/* Componentes do dashboard. Os estilos vêm do dashboard de referência;
   upload e relatório de validação são novos, no mesmo idioma visual. */

/* ============ UPLOAD DA PLANILHA ============ */
.upload{border:2px dashed var(--ink);border-radius:20px;background:var(--paper);padding:38px 28px;text-align:center;transition:all .25s ease;position:relative}
.upload.arrastando{border-color:var(--blue);background:var(--blue-soft);transform:scale(1.005)}
.upload.ocupado{pointer-events:none;opacity:.75}
.upload-ico{width:54px;height:54px;border-radius:16px;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px;transition:background .25s}
.upload.arrastando .upload-ico{background:var(--blue)}
.upload h2{font-family:var(--f-titulo);font-weight:800;font-size:clamp(16px,2vw,21px);letter-spacing:-.04em;margin-bottom:8px}
.upload p{font-size:13px;opacity:.7;line-height:1.55;max-width:560px;margin:0 auto}
.upload-acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.upload-privacidade{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:11px;font-weight:600;color:var(--blue-deep);background:var(--blue-soft);border-radius:99px;padding:6px 13px;letter-spacing:.02em}
.upload-arquivo{margin-top:16px;font-size:12px;font-weight:600}
.upload-arquivo b{color:var(--blue)}

.progresso{margin-top:20px;max-width:420px;margin-left:auto;margin-right:auto}
.progresso-barra{height:8px;border-radius:99px;background:var(--bone);border:1px solid var(--line);overflow:hidden}
.progresso-barra i{display:block;height:100%;width:0;background:var(--blue);transition:width .25s ease}
.progresso-barra.indeterminado i{width:35%;animation:vaivem 1.1s ease-in-out infinite}
@keyframes vaivem{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}
.progresso-texto{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;opacity:.6;margin-top:8px}

/* ============ RELATÓRIO DE VALIDAÇÃO ============ */
.rv{border:2px solid var(--ink);border-radius:20px;background:var(--paper);overflow:hidden;margin-top:18px}
.rv-head{display:flex;align-items:center;gap:14px;padding:16px 22px;background:var(--ink);color:var(--paper);flex-wrap:wrap}
.rv.bloqueado .rv-head{background:var(--neg)}
.rv-titulo{font-family:var(--f-titulo);font-weight:800;font-size:14px;letter-spacing:-.02em;flex:1;min-width:200px}
.rv-numeros{display:flex;gap:8px;flex-wrap:wrap}
.rv-num{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.14)}
.rv-num.ok{background:var(--blue)}
.rv-body{padding:8px 22px 18px}
.rv-grupo{margin-top:14px}
.rv-grupo h4{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.rv-grupo h4 .cont{font-family:var(--f-texto);background:var(--bone);border-radius:99px;padding:2px 8px;letter-spacing:0}
.rv-lista{list-style:none;display:flex;flex-direction:column;gap:6px}
.rv-item{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13px;line-height:1.45;padding:10px 13px;border-radius:11px;border:1.5px solid var(--line)}
.rv-item .ic{font-weight:800;font-size:12px;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.rv-item.bloqueio{border-color:var(--neg);background:var(--neg-soft)}
.rv-item.bloqueio .ic{background:var(--neg);color:#fff}
.rv-item.descarte .ic{background:var(--ink);color:#fff}
.rv-item.aviso{background:var(--warn-soft);border-color:transparent}
.rv-item.aviso .ic{background:var(--warn);color:#fff}
.rv-item .dica{display:block;font-size:12px;opacity:.72;margin-top:3px}
.rv-item .ex{display:block;font-size:11px;opacity:.6;margin-top:3px}
.rv-mais{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-deep);background:none;border:none;cursor:pointer;padding:8px 2px}
.rv-tudo-certo{font-size:13px;padding:14px 0 4px;opacity:.75}

/* ============ ESTRUTURA DO PAINEL ============ */
.blocos.pilha{display:flex;flex-direction:column;gap:16px}
.blocos.two-col,.blocos.two-col-a{row-gap:16px}
.bloco{min-width:0}
.bloco.inteira{grid-column:1/-1}
.bloco-erro{border-color:var(--neg);color:var(--neg);font-size:13px;line-height:1.5}
.margem-cartoes{margin-top:16px}
.tabela-wrap{overflow-x:auto;border:1.5px solid var(--line);border-radius:12px}
.tabela-wrap .modal-table th{cursor:default}
.tabela-wrap .modal-table th:hover{background:var(--ink)}
.num{text-align:right;white-space:nowrap}
.tabela-bloco tbody tr{cursor:pointer}
.erro-config{border-color:var(--neg)}
.erro-config ul{margin:8px 0 0 18px;font-size:13px;line-height:1.7;color:var(--neg)}
.zona-upload{margin-bottom:18px}
.carga-inicial{display:flex;align-items:center;justify-content:center;gap:14px;min-height:60vh;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.6}
.sem-js{padding:40px;text-align:center}

/* ============ BARRA DA PLANILHA ============ */
.barra-planilha{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:2px solid var(--ink);border-radius:18px;background:var(--paper);padding:12px 16px;margin-bottom:18px}
.bp-ico{width:36px;height:36px;border-radius:11px;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.bp-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.bp-lab{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.45;font-weight:600}
.bp-nome{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}
.bp-det{font-size:11px;opacity:.6}
.bp-situacao{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:99px;white-space:nowrap}
.bp-situacao.ok{background:var(--blue-soft);color:var(--blue-deep)}
.bp-situacao.aviso{background:var(--warn-soft);color:var(--warn)}
.bp-situacao.descarte{background:var(--neg-soft);color:var(--neg)}
.bp-acoes{display:flex;gap:8px;flex-wrap:wrap}
.bp-acoes .btn{padding:9px 15px;font-size:11px}
.bp-cont{background:var(--neg);color:#fff;border-radius:99px;font-size:10px;padding:1px 7px;letter-spacing:0}
.relatorio-modal{padding:4px 24px 24px}
.relatorio-modal .rv{margin-top:14px}
@media(max-width:640px){
  .barra-planilha{padding:12px}
  .bp-info{flex-basis:calc(100% - 60px)}
  .bp-acoes{width:100%}
  .bp-acoes .btn{flex:1}
  .relatorio-modal{padding:4px 14px 18px}
}

/* ============ CARREGANDO / AVISO FLUTUANTE ============ */
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid var(--blue-soft);border-top-color:var(--blue);animation:gira .8s linear infinite;display:inline-block}
@keyframes gira{to{transform:rotate(360deg)}}
.carregando{position:fixed;inset:0;background:rgba(242,245,253,.72);backdrop-filter:blur(3px);z-index:900;display:flex;align-items:center;justify-content:center}
.carregando-caixa{display:flex;align-items:center;gap:14px;background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:16px 22px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;transition:all .3s ease;z-index:1100;background:var(--ink);color:var(--paper);border-radius:14px;padding:14px 18px;max-width:min(560px,calc(100vw - 32px));display:flex;flex-direction:column;gap:4px;box-shadow:0 14px 40px -12px rgba(0,14,59,.5);font-size:12.5px;line-height:1.45}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{font-family:var(--f-titulo);font-weight:800;font-size:12.5px;letter-spacing:-.02em}
.toast span{opacity:.75}

/* ============ DETALHAMENTO ============ */
/* a rolagem (inclusive horizontal) é do corpo do modal, para o cabeçalho da tabela ficar fixo */
.det .modal-table .td-cli{min-width:170px}
.det .modal-table .td-sm{min-width:96px}
.det-mais{display:flex;margin:14px auto 18px}
.det-rodape{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;width:100%}
.modal-table th.num{text-align:right}
.modal-table th .sort-arrow.on{opacity:1;color:var(--blue-lt)}
.modal-toolbar .modal-sort{padding:8px 14px}

/* ============ COMPARAÇÃO DE PERÍODOS ============ */
.kpi-delta{font-size:11px;font-weight:700;margin-top:9px;letter-spacing:.02em}
.kpi .kpi-delta.bom{color:var(--blue-lt)}
.kpi .kpi-delta.ruim{color:var(--neg-lt)}
.kpi .kpi-delta.neutro{opacity:.6}
.kpi-mini .kpi-delta.bom{color:var(--blue-deep)}
.kpi-mini .kpi-delta.ruim{color:var(--neg)}
.kpi-mini:hover .kpi-delta{color:inherit}
.cmp-periodo{font-size:12px;margin:-6px 0 16px;opacity:.75}
.cmp-periodo b{color:var(--blue);opacity:1}
.cmp-motivo{font-size:13px;padding:10px 0;opacity:.7}
.cmp-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.cmp-card{border:1.5px solid var(--line);border-radius:15px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.cmp-lab{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;font-weight:600}
.cmp-val{font-family:var(--f-titulo);font-weight:800;font-size:22px;letter-spacing:-.045em;margin-bottom:8px}
.cmp-linha{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;font-size:12px;padding:7px 8px;margin:0 -8px;border-top:1px dashed var(--line);border-radius:8px}
.cmp-linha[role=button]{cursor:pointer}
.cmp-linha[role=button]:hover{background:var(--blue-soft)}
.cmp-linha.sem{grid-template-columns:1fr auto;opacity:.55}
.cmp-rot{opacity:.65}
.cmp-ant{font-weight:600;white-space:nowrap}
.cmp-var{font-weight:800;white-space:nowrap;padding:2px 8px;border-radius:99px;font-size:11px}
.cmp-var.bom{background:var(--blue-soft);color:var(--blue-deep)}
.cmp-var.ruim{background:var(--neg-soft);color:var(--neg)}
.cmp-var.neutro{background:var(--bone)}

/* ============ HIERARQUIA (DRILL-DOWN EM NÍVEIS) ============ */
.hier-trilha{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin:-4px 0 14px}
.hier-migalha{font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:none;background:var(--blue-soft);
  color:var(--blue-deep);border-radius:99px;padding:6px 12px;cursor:pointer;transition:background .2s}
.hier-migalha:hover{background:var(--blue);color:var(--paper)}
.hier-migalha.atual,.hier-migalha:disabled{background:var(--ink);color:var(--paper);cursor:default}
.hier-sep{opacity:.35;font-weight:700}
.hier-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.hier-nivel{font-family:var(--f-titulo);font-weight:800;font-size:18px;letter-spacing:-.04em}
.hier-total{font-size:11px;opacity:.55;margin-top:3px}
.hier-voltar{padding:7px 13px;font-size:10.5px}
.hier-corpo.anima-desce{animation:hierDesce .45s cubic-bezier(.2,.8,.2,1)}
.hier-corpo.anima-volta{animation:hierVolta .45s cubic-bezier(.2,.8,.2,1)}
@keyframes hierDesce{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes hierVolta{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
.hier-linha{grid-template-columns:auto 1fr auto}
.hier-dir{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.hier-acoes{display:flex;gap:6px;flex-wrap:wrap}
.hier-btn{font:inherit;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border:1.5px solid var(--line);
  background:var(--paper);color:var(--ink);border-radius:99px;padding:5px 10px;cursor:pointer;white-space:nowrap;transition:all .2s}
.hier-btn:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.hier-btn.descer{border-color:var(--blue);color:var(--blue-deep)}
.hier-btn.descer:hover{background:var(--blue);color:var(--paper)}
.hier-btn:focus-visible,.hier-migalha:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.hier-proporcao{display:flex;height:14px;border-radius:99px;overflow:hidden;margin:14px 0 16px;gap:2px;background:var(--bone)}
.hier-proporcao i{display:block;height:100%;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.hier-lado{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.hier-cartao{border:2px solid var(--ink);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:8px;transition:all .3s ease}
.hier-cartao[role=button]{cursor:pointer}
.hier-cartao[role=button]:hover{transform:translateY(-3px);box-shadow:0 12px 30px -12px rgba(46,94,255,.4)}
.hier-cartao-t{display:flex;align-items:center;gap:8px;font-family:var(--f-titulo);font-weight:800;font-size:13px;letter-spacing:-.02em}
.hier-ponto{width:11px;height:11px;border-radius:50%;display:inline-block}
.hier-cartao-v{font-family:var(--f-titulo);font-weight:800;font-size:30px;letter-spacing:-.05em;color:var(--blue);display:flex;align-items:baseline;gap:10px}
.hier-cartao-v small{font-family:var(--f-texto);font-size:13px;font-weight:700;color:var(--ink);opacity:.55;letter-spacing:0}
.hier-cartao-s{font-size:12px;opacity:.7}
.hier-cartao .hier-acoes{margin-top:6px}
@media(max-width:640px){
  .hier-linha{grid-template-columns:auto 1fr}
  .hier-dir{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
}

/* ============ JANELA COMPARATIVO ============ */
.bp-cmp{box-shadow:0 8px 20px -10px rgba(46,94,255,.7)}
.cmpv{padding:0 0 24px}
.cmpv-controles{display:flex;flex-direction:column;gap:12px;padding:18px 28px;border-bottom:1px solid var(--line);background:var(--paper)}
.cmpv-linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cmpv-linha > .vb-lab{min-width:88px}
.cmpv-linha .vb{padding:8px 14px;font-size:11px}
.cmpv-refs{display:flex;gap:12px;flex-wrap:wrap}
.cmpv-sel{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600}
.cmpv-sel span{opacity:.6;letter-spacing:.04em}
.cmpv-sel select{font:inherit;font-size:12.5px;font-weight:700;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);
  border-radius:99px;padding:7px 30px 7px 14px;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.cmpv-sel select:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.cmpv-meses{display:flex;gap:6px;flex-wrap:wrap}
.cmpv-meses .pill{padding:6px 10px;font-size:10.5px}
.cmpv-livre{padding:10px 12px;border:1.5px dashed var(--line);border-radius:14px}
.cmpv-filtros{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer}
.cmpv-filtros input{width:16px;height:16px;accent-color:var(--blue)}
.cmpv-tag{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--f-titulo);font-weight:800;font-size:13px;letter-spacing:-.02em;
  padding:8px 14px;border-radius:12px;background:var(--blue);color:var(--paper)}
.cmpv-tag.b{background:var(--blue-soft);color:var(--blue-deep)}
.cmpv-tag small{font-family:var(--f-texto);font-weight:600;font-size:10.5px;opacity:.75;letter-spacing:0}
.cmpv-conteudo{padding:18px 28px 0;display:flex;flex-direction:column;gap:16px;background:var(--bone)}
.cmpv-periodos{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cmpv-x{font-weight:800;opacity:.4}
.cmpv-conteudo .nota{margin:0}
.cmpv-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.cmpv-card{background:var(--paper);border:1.5px solid var(--line);border-radius:15px;padding:15px 16px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;transition:border-color .2s,transform .2s}
.cmpv-card[role=button]{cursor:pointer}
.cmpv-card[role=button]:hover{border-color:var(--blue);transform:translateY(-2px)}
.cmpv-a{font-family:var(--f-titulo);font-weight:800;font-size:21px;letter-spacing:-.045em}
.cmpv-b{font-size:12px;opacity:.7;margin-bottom:4px}
.cmpv-barras{width:100%;display:flex;flex-direction:column;gap:4px;margin-top:10px}
.cmpv-barras > div{height:6px;border-radius:99px;background:var(--bone);overflow:hidden}
.cmpv-barras i{display:block;height:100%;border-radius:99px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
/* minmax(0, 1fr): sem isso, um canvas já desenhado impede a coluna de encolher e a janela ganha rolagem lateral */
.cmpv-graficos{grid-template-columns:repeat(2,minmax(0,1fr))}
.cmpv-graficos .an-card.largo{grid-column:1/-1}
.cmpv-roscas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cmpv-rosca{min-width:0}
.cmpv-rosca-t{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;text-align:center;opacity:.6;margin-bottom:4px}
.cmpv-legenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:10.5px;font-weight:600}
.cmpv-legenda span{display:inline-flex;align-items:center;gap:6px}
.cmpv-legenda i{width:10px;height:10px;border-radius:3px;display:inline-block}
@media(max-width:640px){
  .cmpv-controles,.cmpv-conteudo{padding-left:14px;padding-right:14px}
  .cmpv-linha > .vb-lab{min-width:100%}
  .cmpv-graficos,.cmpv-roscas{grid-template-columns:minmax(0,1fr)}
}

/* ============ FILTROS ============ */
.filters{border:2px solid var(--ink);border-radius:18px;background:var(--paper);margin-bottom:28px;overflow:hidden;}
.filters-head{display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--ink);color:var(--paper);flex-wrap:wrap;}
.ftitle{font-family:var(--f-titulo);font-weight:800;font-size:13px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;white-space:nowrap}
.ftitle .fcount{font-family:var(--f-texto);font-weight:700;font-size:10px;background:var(--blue);color:var(--paper);padding:2px 8px;border-radius:99px;letter-spacing:0}
.fsummary{flex:1;font-size:11px;letter-spacing:.06em;opacity:.62;min-width:180px;line-height:1.5}
.fclear{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:6px 13px;border:1.5px solid rgba(255,255,255,.35);border-radius:99px;background:transparent;color:var(--paper);cursor:pointer;transition:all .2s ease;white-space:nowrap}
.fclear:hover{background:var(--blue);border-color:var(--blue)}
.fgroup{border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:none}
.fg-head{width:100%;display:flex;align-items:center;gap:13px;padding:13px 20px;background:transparent;border:none;cursor:pointer;text-align:left;transition:background .2s ease;color:var(--ink)}
.fg-head:hover,.fgroup.open .fg-head{background:var(--blue-soft)}
.fg-chev{font-size:10px;color:var(--blue);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:inline-block;width:10px;flex-shrink:0}
.fgroup.open .fg-chev{transform:rotate(90deg)}
.fg-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.45;min-width:88px;flex-shrink:0;font-weight:600}
.fg-val{font-size:12.5px;font-weight:700;line-height:1.4}
.fg-val.dim{opacity:.42;font-weight:500}
.fg-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1)}
.fgroup.open .fg-body{grid-template-rows:1fr}
.fg-inner{overflow:hidden}
.fg-pills{display:flex;gap:8px;flex-wrap:wrap;padding:3px 20px 16px 61px}
.pill{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:7px 14px;border:1.5px solid var(--ink);border-radius:99px;background:var(--paper);cursor:pointer;transition:all .2s ease;white-space:nowrap;color:var(--ink)}
.pill:hover{background:var(--ink);color:var(--paper)}
.pill.active{background:var(--blue);border-color:var(--blue);color:var(--paper);}
.pill.ghost{border-style:dashed;opacity:.6}
.pill.ghost:hover{opacity:1}

/* ============ KPIs ============ */
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--ink);background:var(--ink);color:var(--paper);margin-bottom:14px;border-radius:18px;overflow:hidden;}
.kpi{padding:26px 24px;position:relative;cursor:pointer;border-right:1px solid rgba(255,255,255,.12);transition:background .3s ease,transform .3s ease;}
.kpi:last-child{border-right:none}
.kpi:hover{background:var(--blue);transform:translateY(-2px)}
.kpi-label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.65;margin-bottom:10px;font-weight:600}
.kpi-value{font-family:var(--f-titulo);font-weight:800;font-size:clamp(20px,2.4vw,33px);line-height:1;letter-spacing:-.04em}
.kpi-sub{font-size:12px;margin-top:8px;opacity:.7;font-weight:500}
.kpi:hover .kpi-sub,.kpi:hover .kpi-label{opacity:1}
.kpi .kpi-hint{position:absolute;bottom:10px;right:14px;font-size:9px;opacity:.3;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.kpi:hover .kpi-hint{opacity:.7}
.kpi.nodrill{cursor:default}
.kpi.nodrill:hover{background:transparent;transform:none}
.kpi.neg .kpi-value{color:var(--neg-lt)}

.kpi-sub-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:46px}
.kpi-mini{background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:16px 18px;cursor:pointer;transition:all .3s ease}
.kpi-mini:hover{background:var(--blue);border-color:var(--blue);color:var(--paper);transform:translateY(-3px)}
.kpi-mini.nodrill{cursor:default}
.kpi-mini.nodrill:hover{background:var(--paper);border-color:var(--ink);color:var(--ink);transform:none}
.kpi-mini .m-lab{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;font-weight:600;margin-bottom:7px}
.kpi-mini .m-val{font-family:var(--f-titulo);font-weight:800;font-size:17px;letter-spacing:-.04em}
.kpi-mini .m-val.peq{font-size:12px;line-height:1.35}
.kpi-mini .m-sub{font-size:11px;opacity:.55;margin-top:5px}
.kpi-mini:hover .m-lab,.kpi-mini:hover .m-sub{opacity:.9}
@media(max-width:860px){.kpi-strip,.kpi-sub-strip{grid-template-columns:repeat(2,1fr)}}

/* ============ DRE ============ */
.dre{display:flex;flex-direction:column;gap:9px}
.dre-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 17px;border:1.5px solid rgba(255,255,255,.18);border-radius:13px;background:rgba(255,255,255,.03);transition:all .3s ease;cursor:pointer;}
.dre-row:hover{background:var(--blue);border-color:var(--blue);transform:scale(1.015)}
.dre-row .lbl{font-size:10px;letter-spacing:.17em;text-transform:uppercase;opacity:.72;font-weight:600}
.dre-row .sub{font-size:11px;opacity:.5;margin-top:3px}
.dre-row .val{font-family:var(--f-titulo);font-weight:800;font-size:17px;letter-spacing:-.04em;white-space:nowrap}
.dre-row.head{background:var(--blue);border-color:var(--blue)}
.dre-row.head:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.dre-row.minus{background:rgba(255,255,255,.055)}
.dre-row.sub-total{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.4)}
.dre-row.sub-total .val{color:var(--blue-lt)}
.dre-row.final{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.dre-row.final:hover{background:var(--blue-lt);border-color:var(--blue-lt);color:var(--ink)}
.dre-row.final .lbl{opacity:.6}
.dre-row.final .val{font-size:21px}
.dre-row.final.neg .val{color:var(--neg)}
.dre-row.nodrill{cursor:default}
.dre-row.nodrill:hover{transform:none}
.dre-op{font-size:11px;font-weight:700;opacity:.45;padding-left:2px;letter-spacing:.1em}

.prog-wrap{margin-top:20px;padding-top:18px;border-top:1px dashed rgba(255,255,255,.2)}
.prog-bar{height:16px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;display:flex;border:1px solid rgba(255,255,255,.2)}
.prog-fill{height:100%;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.prog-fill.f-cost{background:var(--d1)}
.prog-fill.f-res{background:var(--blue)}
.prog-legend{display:flex;justify-content:space-between;margin-top:10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;font-weight:600;gap:10px;flex-wrap:wrap}

/* ============ CARTÕES DE ÁREA / CATEGORIA ============ */
.areas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.area-card{background:var(--paper);border:2px solid var(--ink);border-radius:18px;padding:20px;cursor:pointer;transition:all .35s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;}
.area-card::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:0;}
.area-card:hover::before{transform:translateY(0)}
.area-card:hover{color:var(--paper);transform:translateY(-4px);box-shadow:0 12px 30px -10px rgba(46,94,255,.35)}
.area-card>*{position:relative;z-index:1}
.area-card .area-name{font-family:var(--f-titulo);font-weight:800;font-size:12.5px;letter-spacing:-.035em;margin-bottom:12px;line-height:1.3;min-height:33px}
.area-card .area-num{font-family:var(--f-titulo);font-weight:800;font-size:26px;letter-spacing:-.05em;line-height:.95;color:var(--blue)}
.area-card.desp .area-num{color:var(--d2)}
.area-card:hover.desp .area-num{color:var(--blue-lt)}
.area-card .area-num small{font-size:12px;color:var(--ink);font-weight:600;opacity:.55;display:inline-block;margin-left:5px;letter-spacing:0;font-family:var(--f-texto)}
.area-card:hover .area-num small{color:var(--paper);opacity:.6}
.area-vals{display:flex;flex-direction:column;gap:3px;margin-top:10px}
.area-vals span{font-size:10.5px;opacity:.7}
.area-card:hover .area-vals span{opacity:.85}
.area-mini{height:6px;border-radius:99px;background:var(--bone);overflow:hidden;border:1px solid var(--line);margin-top:12px;display:flex}
.area-card:hover .area-mini{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2)}
.area-mini i{display:block;height:100%;background:var(--blue)}
.area-card.desp .area-mini i{background:var(--d2)}
.area-card:hover.desp .area-mini i{background:var(--blue-lt)}
.area-tax-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);gap:8px}
.area-card:hover .area-tax-row{border-color:rgba(255,255,255,.2)}
.area-tax-row .lb{font-size:10px;opacity:.55;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.tax-pill{padding:4px 10px;border-radius:99px;background:var(--blue-soft);color:var(--blue-deep);font-weight:700;font-size:11px;white-space:nowrap}
.area-card:hover .tax-pill{background:var(--blue);color:var(--paper)}
.tax-pill.neg{background:var(--neg-soft);color:var(--neg)}
.area-card:hover .tax-pill.neg{background:var(--neg);color:#fff}

/* ============ RANKING ============ */
.rank-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 8px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:8px;transition:background .2s;}
.rank-row:hover{background:var(--blue-soft)}
.rank-row:last-child{border-bottom:none}
.rank-row .rank{font-size:11px;color:var(--blue);font-weight:700;min-width:22px}
.rank-row .nome{font-weight:600;font-size:13px;line-height:1.25}
.rank-row .qty{font-size:10px;opacity:.55;margin-top:3px}
.rank-row .bar-wrap{position:relative;height:5px;width:100%;max-width:220px;background:var(--bone);border-radius:99px;overflow:hidden;border:1px solid var(--line);margin-top:6px;display:flex}
.rank-row .bar-fill{height:100%;background:var(--blue)}
.rank-row .bar-fill.b2{background:var(--ink);opacity:.4}
.rank-row.d .bar-fill{background:var(--d2)}
.rank-row.d .bar-fill.b2{background:var(--d1);opacity:.5}
.rank-row.d .rank{color:var(--d2)}
.rank-row .valor{font-family:var(--f-titulo);font-weight:800;font-size:13px;text-align:right;min-width:104px;white-space:nowrap;letter-spacing:-.04em}

/* ============ CARTÕES DE DESTAQUE ============ */
.deals-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.deals-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.deals-grid{grid-template-columns:1fr}}
.deal-card{background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:16px 18px;transition:all .3s ease;cursor:pointer;}
.deal-card:hover{background:var(--blue);border-color:var(--blue);color:var(--paper);transform:translateY(-3px)}
.deal-card .dc-num{font-size:10px;opacity:.5;margin-bottom:5px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.deal-card .dc-name{font-family:var(--f-titulo);font-weight:800;font-size:10.5px;letter-spacing:-.03em;line-height:1.3;margin-bottom:8px;text-transform:uppercase;min-height:40px}
.deal-card .dc-val{font-size:14px;font-weight:700;color:var(--blue)}
.deal-card:hover .dc-val{color:var(--paper)}
.deal-card .dc-split{font-size:10px;opacity:.55;margin-top:4px}

/* ============ NOTA ============ */
.nota{display:flex;gap:10px;align-items:flex-start;background:var(--blue-soft);border:1.5px dashed var(--blue);border-radius:13px;padding:13px 16px;margin-bottom:16px;font-size:12px;line-height:1.55;color:var(--blue-deep)}
.nota b{font-weight:700}

/* ============ SELETOR DE VISÃO ============ */
.viewbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:2px solid var(--ink);border-radius:18px;background:var(--paper);padding:12px 16px;margin-bottom:18px}
.vb-lab{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.45;font-weight:600}
.vb-opts{display:flex;gap:8px;flex-wrap:wrap}
.vb{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:9px 18px;border:1.5px solid var(--ink);border-radius:99px;background:var(--paper);color:var(--ink);cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:9px}
.vb:hover{background:var(--blue-soft)}
.vb.active{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.vb-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--blue)}
.vb-dot.d{background:var(--ink)}
.vb-dot.rd{background:linear-gradient(90deg,var(--blue) 0 50%,var(--ink) 50% 100%)}
.vb.active .vb-dot{background:var(--paper)}
.vb-hint{font-size:11.5px;opacity:.55;line-height:1.45;flex:1;min-width:150px}

/* ============ MODAL DE DETALHE ============ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,14,59,.72);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s ease;backdrop-filter:blur(4px);}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--paper);border:2px solid var(--ink);border-radius:24px;width:100%;max-width:1220px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;transform:translateY(20px);transition:transform .3s ease;}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:22px 28px 15px;border-bottom:2px solid var(--ink);flex-shrink:0;gap:16px}
.modal-header h2{font-family:var(--f-titulo);font-weight:800;font-size:clamp(13px,1.8vw,18px);letter-spacing:-.04em;line-height:1.25}
.modal-header .modal-count{font-size:12px;color:var(--blue);font-weight:600;margin-left:12px;white-space:nowrap}
.modal-head-dir{display:flex;align-items:center;gap:14px}
.modal-footer[hidden]{display:none}
.modal-close{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;color:var(--ink)}
.modal-close:hover{background:var(--ink);color:var(--paper)}
.modal-toolbar{display:flex;align-items:center;gap:10px;padding:13px 28px;border-bottom:1px solid var(--line);flex-shrink:0;flex-wrap:wrap;}
.modal-search{flex:1;min-width:200px;padding:9px 14px;border:1.5px solid var(--line);border-radius:10px;font-family:var(--f-texto);font-size:13px;outline:none;transition:border .2s;color:var(--ink)}
.modal-search:focus{border-color:var(--blue)}
.modal-sort{font-size:11px;color:var(--blue-deep);cursor:pointer;padding:7px 13px;border:1.5px solid var(--blue-soft);border-radius:99px;background:var(--blue-soft);white-space:nowrap;font-weight:600}
.modal-sort:hover{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.modal-sort.cta{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.modal-sort.cta:hover{background:var(--blue);border-color:var(--blue)}
.modal-body{overflow:auto;flex:1;}
.modal-table{width:100%;border-collapse:collapse;font-size:13px;}
.modal-table th{position:sticky;top:0;background:var(--ink);color:var(--paper);padding:11px 14px;text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;user-select:none;white-space:nowrap;z-index:2;font-weight:600}
.modal-table th:hover{background:var(--blue)}
.modal-table th .sort-arrow{margin-left:4px;opacity:.4}
.modal-table td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
.modal-table tr:hover td{background:var(--blue-soft)}
.modal-table tr:last-child td{border-bottom:none}
.modal-table .td-num{font-size:11px;color:var(--blue);white-space:nowrap;font-weight:600}
.modal-table .td-val{font-family:var(--f-titulo);font-weight:800;font-size:12px;white-space:nowrap;text-align:right;letter-spacing:-.04em}
.modal-table .td-date{font-size:11px;opacity:.75;white-space:nowrap}
.modal-table .td-cli{font-weight:600;max-width:250px}
.modal-table .td-sm{font-size:11px;opacity:.75}
.status-badge{display:inline-block;padding:3px 8px;border-radius:99px;font-size:10px;letter-spacing:.06em;font-weight:700;white-space:nowrap}
.sb-ok{background:var(--blue);color:#fff}
.sb-pend{background:var(--blue-soft);color:var(--blue-deep)}
.sb-pago{background:var(--ink);color:#fff}
.sb-apagar{background:#DCE2F0;color:var(--d3)}
.sb-fixa{background:var(--d4);color:#fff}
.sb-var{background:#DCE2F0;color:var(--d3)}
.modal-footer{padding:13px 28px;border-top:1px solid var(--line);font-size:11px;opacity:.7;flex-shrink:0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.modal-footer b{color:var(--blue-deep);font-weight:700}

/* análise do drill: gráficos acima da lista, filtrando-a por clique */
.an{padding:20px 28px 4px;border-bottom:1px solid var(--line);background:var(--bone)}
.an-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:900px){.an-grid{grid-template-columns:1fr}}
.an-card{background:var(--paper);border:1.5px solid var(--line);border-radius:15px;padding:16px 18px;min-width:0}
.an{position:sticky;left:0}
.an-card h4{font-family:var(--f-titulo);font-weight:800;font-size:12.5px;letter-spacing:-.035em;margin-bottom:3px}
.an-card .an-sub{font-size:10px;letter-spacing:.13em;text-transform:uppercase;opacity:.42;font-weight:600;margin-bottom:12px}
.an-wrap{position:relative;height:210px}
.an-wrap.tall{height:262px}
.an-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;min-height:30px}
.an-chips .cl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.45;font-weight:600}
.an-chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;padding:6px 12px;border-radius:99px;background:var(--blue);color:var(--paper);border:1.5px solid var(--blue);cursor:pointer}
.an-chip:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.an-chip .x{opacity:.7;font-size:13px;line-height:1}
.an-chip.clear{background:transparent;color:var(--ink);border-color:var(--ink)}
.an-chip.clear:hover{background:var(--ink);color:var(--paper)}
.an-resumo{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media(max-width:760px){.an-resumo{grid-template-columns:repeat(2,1fr)}}
.an-kpi{background:var(--paper);border:1.5px solid var(--line);border-radius:13px;padding:12px 14px}
.an-kpi .k{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.45;font-weight:600;margin-bottom:5px}
.an-kpi .v{font-family:var(--f-titulo);font-weight:800;font-size:15px;letter-spacing:-.045em}
.an-listlab{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.45;font-weight:600;padding:16px 28px 0}

@media(max-width:640px){
  .fg-head{flex-wrap:wrap;gap:8px 10px;padding:12px 16px}
  .fg-label{min-width:auto}
  .fg-val{width:100%;padding-left:23px}
  .fg-pills{padding:3px 16px 14px 16px}
  .filters-head{padding:12px 16px}
  .fsummary{order:3;width:100%;flex:none}
  .upload{padding:28px 18px}
  .rv-head,.rv-body{padding-left:16px;padding-right:16px}
  .modal-overlay{padding:0}
  .modal-box{max-height:100vh;height:100%;border-radius:0}
  .modal-header,.modal-toolbar,.modal-footer{padding-left:16px;padding-right:16px}
}
