/* =========================================================================
   Módulos de produtividade — estilos (Escritório Digital RMBF)
   Só tokens (tema.css). Gráficos, avatares, KPIs comparativos, esteiras,
   Meu Painel, Agenda, Atividades, Contatos, Financeiro evoluído.
   ========================================================================= */

/* ---------------- Avatares ---------------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; font-size: 12px; font-weight: 700; flex: 0 0 auto; letter-spacing: .2px; }
.av-1 { background: var(--marca-suave); color: var(--marca); }
.av-2 { background: var(--ok-bg); color: var(--ok); }
.av-3 { background: var(--atencao-bg); color: var(--atencao); }
.av-4 { background: var(--erro-bg); color: var(--erro); }

/* ---------------- Top bar: Adicionar, busca global, usuário ---------------- */
.busca-global { position: relative; display: flex; align-items: center; gap: 8px; background: var(--superficie-2);
  border: 1px solid var(--borda); border-radius: var(--r-pill); padding: 0 10px 0 12px; height: 38px; width: 320px; max-width: 40vw; }
.busca-global .ico { color: var(--texto-3); }
.busca-global input { border: 0; background: transparent; outline: none; font: inherit; font-size: var(--fs-13); color: var(--texto); flex: 1; min-width: 0; }
.busca-global input::placeholder { color: var(--texto-3); }
.busca-global:focus-within { border-color: var(--marca-borda); box-shadow: var(--anel-foco); }
.busca-global kbd { font-family: var(--fonte); font-size: 11px; color: var(--texto-3); border: 1px solid var(--borda-forte);
  border-radius: 5px; padding: 1px 6px; background: var(--superficie); }
.busca-resultados { position: absolute; top: 46px; left: 0; right: 0; background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r); box-shadow: var(--sombra-3); max-height: 60vh; overflow-y: auto; z-index: 40; padding: 6px; }
.res-grupo-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-3); padding: 8px 10px 4px; font-weight: 700; }
.res-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; color: var(--texto); }
.res-item:hover, .res-item.foco { background: var(--marca-suave); }
.res-item .ico { color: var(--texto-3); }
.res-item .res-sub { color: var(--texto-3); font-size: 12px; margin-left: auto; }
.res-vazio { padding: 16px; color: var(--texto-2); font-size: var(--fs-13); text-align: center; }

.usuario-chip { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--borda);
  border-radius: var(--r-pill); padding: 3px 12px 3px 4px; cursor: pointer; color: var(--texto); font-weight: 600; font-size: var(--fs-13); }
.usuario-chip:hover { background: var(--superficie-2); }

.menu-suspenso { position: absolute; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r);
  box-shadow: var(--sombra-3); padding: 6px; z-index: 70; min-width: 210px; }
.menu-suspenso .menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm);
  cursor: pointer; color: var(--texto); font-size: var(--fs-14); background: transparent; border: 0; width: 100%; text-align: left; }
.menu-suspenso .menu-item:hover { background: var(--superficie-2); }
.menu-suspenso .menu-item .ico { color: var(--texto-3); }
.menu-suspenso .menu-sep { height: 1px; background: var(--borda); margin: 6px 4px; }
.menu-suspenso .menu-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-3); padding: 6px 10px 2px; font-weight: 700; }
.sino-badge { position: absolute; top: 3px; right: 3px; background: var(--erro); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; }
.central-notif { max-height: 70vh; overflow-y: auto; }
.central-notif .menu-item { align-items: flex-start; }
.central-notif .menu-item.nao-lida { background: var(--marca-suave); }
.central-notif .menu-item.nao-lida:hover { background: var(--marca-suave); }

/* ---------------- KPI comparativo ---------------- */
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e4) var(--e5); box-shadow: var(--sombra-1); }
.kpi .kpi-topo { display: flex; align-items: center; gap: 8px; }
.kpi .rot { font-size: var(--fs-12); color: var(--texto-2); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; flex: 1; }
.kpi .val { font-size: var(--fs-28); font-weight: var(--peso-metrica); color: var(--texto); margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .comp { font-size: var(--fs-12); color: var(--texto-3); margin-top: 2px; }
.kpi .comp a { color: var(--marca); }
.selo-var { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); }
.selo-var.pos { background: var(--ok-bg); color: var(--ok); }
.selo-var.neg { background: var(--erro-bg); color: var(--erro); }
.selo-var.zero { background: var(--superficie-2); color: var(--texto-2); }
.selo-var .ico { width: 13px; height: 13px; }

/* ---------------- Gráficos ---------------- */
.grafico-caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e4) var(--e5); box-shadow: var(--sombra-1); }
.grafico { width: 100%; height: auto; display: block; }
.g-eixo { fill: var(--texto-3); font-size: 10px; font-family: var(--fonte); }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--texto-2); }
.leg-cor { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.barras-h { display: flex; flex-direction: column; gap: 12px; }
.bh-linha { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.bh-rot { font-size: var(--fs-13); color: var(--texto-2); font-weight: 600; text-align: right; }
.bh-trilha { display: flex; flex-direction: column; gap: 4px; }
.bh-barra { height: 12px; border-radius: var(--r-pill); min-width: 24px; position: relative; display: flex; align-items: center; transition: width var(--t-media); }
.bh-num { font-size: 10px; color: var(--sobre-marca); font-weight: 700; margin-left: auto; padding-right: 6px; }
.donut-caixa { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.grafico-donut { flex: 0 0 auto; }
.donut-legenda { display: flex; flex-direction: column; gap: 6px; }
.donut-centro { fill: var(--texto); font-size: 20px; font-weight: 700; font-family: var(--fonte); }
.donut-centro-sub { fill: var(--texto-3); font-size: 10px; font-family: var(--fonte); }

/* Painéis analíticos com rolagem horizontal */
.paineis-scroll { display: flex; gap: var(--e4); overflow-x: auto; padding-bottom: 8px; }
.paineis-scroll > * { flex: 0 0 320px; }

/* ---------------- Esteira: cartão extra ---------------- */
.card-esteira .card-rodape { margin-top: 8px; }
.card-esteira .linha-atalhos { display: flex; gap: 4px; margin-top: 8px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ponto-notif { width: 8px; height: 8px; border-radius: 50%; background: var(--erro); display: inline-block; }
.col-menu-btn { margin-left: auto; }

/* ---------------- Cockpit (Meu Painel v2) ---------------- */
.cockpit-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e4); }
.cockpit-card { display: block; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e4) var(--e5); box-shadow: var(--sombra-1); text-decoration: none; color: inherit; transition: transform var(--t-rapida), box-shadow var(--t-rapida), border-color var(--t-rapida); }
.cockpit-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--borda-forte); text-decoration: none; }
.cockpit-card .cc-topo { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.cockpit-card .cc-ico { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--marca-suave); color: var(--marca); display: inline-flex; align-items: center; justify-content: center; }
.cockpit-card h3 { margin: 0; font-size: var(--fs-16); }
.cc-nums { display: flex; flex-direction: column; gap: 8px; }
.cc-num { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cc-rot { font-size: var(--fs-12); color: var(--texto-2); }
.cc-val { font-size: var(--fs-16); font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; text-align: right; }
.cc-alerta { margin-top: 12px; display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 600; padding: 5px 9px; border-radius: var(--r-sm); }
.cc-alerta.alerta { background: var(--atencao-bg); color: var(--atencao); }
.cc-alerta.perigo { background: var(--erro-bg); color: var(--erro); }
.cc-alerta.ok { background: var(--superficie-2); color: var(--texto-3); font-weight: 500; }

/* ---------------- Meu Painel ---------------- */
.saudacao { font-size: var(--fs-28); letter-spacing: -.02em; margin: 0 0 2px; }
.saudacao-sub { color: var(--texto-2); font-size: var(--fs-14); margin: 0 0 var(--e5); }
.painel-2col { display: grid; grid-template-columns: 1fr 340px; gap: var(--e5); align-items: start; }

.mini-cal { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e4); box-shadow: var(--sombra-1); }
.mini-cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mini-cal-cab .mes { font-weight: 600; font-size: var(--fs-14); text-transform: capitalize; }
.mini-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mini-cal-dow { text-align: center; font-size: 10px; color: var(--texto-3); text-transform: uppercase; padding-bottom: 4px; font-weight: 600; }
.mini-cal-dia { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--r-sm); font-size: var(--fs-12); color: var(--texto-2); position: relative; cursor: default; }
.mini-cal-dia.fora { color: var(--texto-3); opacity: .45; }
.mini-cal-dia.hoje { background: var(--marca); color: var(--sobre-marca); font-weight: 700; }
.mini-cal-dia .badge { position: absolute; top: 2px; right: 4px; background: var(--marca); color: var(--sobre-marca);
  font-size: 8px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.mini-cal-dia.hoje .badge { background: var(--sobre-marca); color: var(--marca); }

/* Lista de compromissos agrupada por urgência */
.grupo-urg { border: 1px solid var(--borda); border-radius: var(--r); background: var(--superficie); margin-bottom: 12px; box-shadow: var(--sombra-1); overflow: hidden; }
.grupo-urg-cab { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; background: var(--superficie); border: 0; width: 100%; text-align: left; font: inherit; }
.grupo-urg-cab:hover { background: var(--superficie-2); }
.grupo-urg-cab .titg { font-weight: 700; font-size: var(--fs-13); color: var(--texto); }
.grupo-urg-cab .contag { margin-left: auto; background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); font-size: 11px; padding: 1px 9px; border-radius: var(--r-pill); font-weight: 600; }
.grupo-urg-cab .pontinho { width: 8px; height: 8px; border-radius: 50%; }
.grupo-urg.vencidas .pontinho { background: var(--erro); }
.grupo-urg.hoje .pontinho { background: var(--atencao); }
.grupo-urg.semana .pontinho { background: var(--marca); }
.grupo-urg.proximas .pontinho { background: var(--texto-3); }
.grupo-urg-cab .seta { color: var(--texto-3); transition: transform var(--t-rapida); }
.grupo-urg.colapsado .seta { transform: rotate(-90deg); }
.grupo-urg.colapsado .grupo-urg-lista { display: none; }

.tarefa-linha { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--borda); }
.tarefa-linha:hover { background: var(--superficie-2); }
.tar-check { width: 18px; height: 18px; flex: 0 0 auto; cursor: pointer; accent-color: var(--marca); }
.tar-estrela { background: none; border: 0; cursor: pointer; color: var(--texto-3); padding: 0; display: inline-flex; }
.tar-estrela.ativa { color: var(--atencao); }
.prio { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.prio-alta { background: var(--erro); }
.prio-media { background: var(--atencao); }
.prio-baixa { background: var(--texto-3); }
.tar-corpo { flex: 1; min-width: 0; }
.tar-titulo { font-size: var(--fs-14); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tar-titulo .tar-tipo { font-weight: 700; }
.tar-sub { font-size: var(--fs-12); color: var(--texto-3); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.tar-venc { font-size: var(--fs-12); color: var(--texto-2); white-space: nowrap; }
.tar-venc.vencida { color: var(--erro); font-weight: 700; }
.tar-concluida .tar-titulo { text-decoration: line-through; color: var(--texto-3); }

/* Atividades concluídas — ranking */
.ranking-lista { display: flex; flex-direction: column; gap: 10px; }
.rank-linha { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.rank-rot { font-size: var(--fs-13); color: var(--texto-2); }
.rank-trilha { grid-column: 1 / -1; height: 8px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--r-pill); overflow: hidden; }
.rank-trilha > span { display: block; height: 100%; background: var(--marca); border-radius: var(--r-pill); }

/* ---------------- Atividades (número gigante) ---------------- */
.numero-gigante { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e5); box-shadow: var(--sombra-1); display: flex; flex-direction: column; justify-content: center; }
.numero-gigante .n { font-size: 56px; font-weight: 700; color: var(--marca); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.03em; }
.numero-gigante .rot { font-size: var(--fs-13); color: var(--texto-2); margin-top: 6px; }
.painel-3 { display: grid; grid-template-columns: 1fr 220px 280px; gap: var(--e4); align-items: stretch; }

/* segmento de troca de visão (mensal/diário, mês/semana/dia) */
.segmento { display: inline-flex; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--r-sm); padding: 2px; }
.segmento button { border: 0; background: transparent; color: var(--texto-2); font: inherit; font-size: var(--fs-13); font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.segmento button.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }

/* ---------------- Agenda ---------------- */
.agenda-layout { display: grid; grid-template-columns: 210px 1fr; gap: var(--e5); align-items: start; }
.agenda-filtros { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e4); box-shadow: var(--sombra-1); }
.agenda-filtros h4 { font-size: var(--fs-13); margin: 12px 0 6px; }
.agenda-filtros h4:first-child { margin-top: 0; }
.filtro-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); padding: 4px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--borda); background: var(--superficie-2); cursor: pointer; margin: 0 4px 4px 0; color: var(--texto-2); }
.filtro-chip.ativo { background: var(--marca-suave); border-color: var(--marca-borda); color: var(--marca); }
.legenda-status { display: flex; flex-direction: column; gap: 6px; }

.agenda-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.agenda-cab .periodo { font-size: var(--fs-20); font-weight: 600; text-transform: capitalize; }
.agenda-cab .nav-per { display: inline-flex; gap: 4px; }

.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; background: var(--borda); gap: 1px; }
.cal-dow { background: var(--superficie-2); text-align: center; padding: 8px 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-2); }
.cal-cel { background: var(--superficie); min-height: 104px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.cal-cel:hover { background: var(--superficie-2); }
.cal-cel.fora { background: var(--superficie-2); opacity: .55; }
.cal-cel .cal-num { font-size: var(--fs-12); color: var(--texto-2); align-self: flex-end; font-weight: 600; }
.cal-cel.hoje .cal-num { background: var(--marca); color: var(--sobre-marca); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.cal-ev { font-size: 11px; padding: 3px 6px; border-radius: 5px; background: var(--marca-suave); color: var(--marca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; border-left: 3px solid var(--marca); }
.cal-ev.concluido { background: var(--ok-bg); color: var(--ok); border-left-color: var(--ok); }
.cal-ev.atrasado { background: var(--erro-bg); color: var(--erro); border-left-color: var(--erro); }
.cal-ev .hora { font-weight: 700; }
.cal-mais { font-size: 10px; color: var(--texto-3); padding-left: 4px; }

.timeline { border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; background: var(--superficie); }
.tl-diainteiro { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--borda); background: var(--superficie-2); flex-wrap: wrap; min-height: 20px; }
.tl-hora { display: grid; grid-template-columns: 54px 1fr; border-top: 1px solid var(--borda); }
.tl-hora:first-child { border-top: 0; }
.tl-hlabel { font-size: 11px; color: var(--texto-3); padding: 4px 8px; text-align: right; }
.tl-slot { padding: 3px 6px; min-height: 34px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.tl-slot:hover { background: var(--superficie-2); }
.tl-bloco { background: var(--marca-suave); color: var(--marca); border-left: 3px solid var(--marca); border-radius: 5px; padding: 4px 8px; font-size: 12px; }

/* ---------------- Contatos ---------------- */
.contato-linha-exp { background: var(--superficie-2); }
.contato-detalhe { padding: 10px 16px; font-size: var(--fs-13); color: var(--texto-2); display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }

/* ---------------- Financeiro ---------------- */
.contas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--e4); }
.conta-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r); padding: var(--e4) var(--e5); box-shadow: var(--sombra-1); }
.conta-card .nome { font-size: var(--fs-13); color: var(--texto-2); font-weight: 600; }
.conta-card .saldo { font-size: var(--fs-20); font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; margin-top: 4px; }
.val-entrada { color: var(--ok); font-weight: 600; font-variant-numeric: tabular-nums; }
.val-saida { color: var(--erro); font-weight: 600; font-variant-numeric: tabular-nums; }
.navegador-mes { display: inline-flex; align-items: center; gap: 8px; }
.navegador-mes .rotmes { font-weight: 600; min-width: 130px; text-align: center; text-transform: capitalize; }
.totais-rodape { display: flex; gap: var(--e5); flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 var(--r) var(--r); font-size: var(--fs-13); }
.totais-rodape b { font-variant-numeric: tabular-nums; }

/* ---------------- Nav: módulos transversais (sidebar escura) ---------------- */
.nav-modulos { padding: 4px 0 10px; margin-bottom: 6px; border-bottom: 1px solid var(--sb-borda); }
.nav-modulo { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--r-sm); color: var(--sb-texto-2);
  font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background var(--t-rapida), color var(--t-rapida); }
.nav-modulo:hover { background: var(--sb-hover); color: var(--sb-texto); text-decoration: none; }
.nav-modulo .ico { color: var(--ico-modulo); opacity: .9; }
.nav-modulo.ativo { background: var(--sb-ativo); color: #C4B5FD; }
.nav-modulo.ativo .ico { color: #C4B5FD; }
.nav-grupo-tit { font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--sb-texto-3); font-weight: 700; padding: 10px 12px 4px; }

/* ---------------- Responsivo ---------------- */
@media (max-width: 980px) {
  .painel-2col { grid-template-columns: 1fr; }
  .painel-3 { grid-template-columns: 1fr; }
  .agenda-layout { grid-template-columns: 1fr; }
  .busca-global { width: 200px; }
}
@media (max-width: 640px) {
  .busca-global { display: none; }
  .cal-cel { min-height: 70px; }
  .bh-linha { grid-template-columns: 90px 1fr; }
  .usuario-chip .u-nome { display: none; }
}