/* =====================================================================
   css/portal.css — Portal de Gestão de Compras · Munique
   Estrutura sugerida para evolução: tokens.css / layout.css / components.css
   ===================================================================== */

/* ---------- tokens ---------- */
:root{
  --azul:#3F7CBD;        /* azul institucional (logo) */
  --azul-escuro:#235A93;
  --azul-claro:#8DB8DB;
  --azul-tint:#E8F1F9;
  --ink:#1F191A;         /* preto do logo */
  --ink-2:#4A4646;
  --ink-3:#7A7677;
  --linha:#DEE3EA;
  --canvas:#F3F5F8;
  --surface:#FFFFFF;

  --vermelho:#C8362B; --vermelho-tint:#FBEAE8;
  --laranja:#E07B1A;  --laranja-tint:#FDF0E2;
  --amarelo:#C99A00;  --amarelo-tint:#FFF6D6;
  --verde:#2E8B57;    --verde-tint:#E5F4EB;
  --roxo:#7B4B94;     --roxo-tint:#F1E9F5;
  --cinza-tint:#EEF0F3;

  --fonte:"Segoe UI","Inter",Roboto,"Helvetica Neue",Arial,sans-serif;
  --raio:8px;
  --raio-sm:6px;
  --rail:236px;
  --topo:150px;
  --sombra-sm:0 1px 2px rgba(31,25,26,.06);
  --sombra:0 2px 10px rgba(31,25,26,.07);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--fonte);font-size:14px;color:var(--ink);background:var(--canvas);line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:22px}
h2{font-size:16px}
h3{font-size:14px}
.num{font-variant-numeric:tabular-nums}
a{color:var(--azul-escuro)}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- layout ---------- */
.topo{position:fixed;top:0;left:0;right:0;height:var(--topo);background:var(--surface);border-bottom:1px solid var(--linha);box-shadow:var(--sombra-sm);display:flex;align-items:stretch;gap:22px;padding:0 24px;z-index:30;overflow:hidden}
.topo-marca{display:flex;align-items:center;gap:14px;flex:0 0 auto;padding-right:22px;border-right:1px solid var(--linha)}
.topo-marca img{height:72px;width:auto;flex:0 0 auto}
.topo-textos{display:flex;flex-direction:column;justify-content:center;min-width:0}
.topo .titulo{font-weight:700;font-size:16.5px;color:var(--ink);white-space:nowrap;letter-spacing:-.01em}
.topo .titulo small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-3);white-space:nowrap;margin-top:3px}
.topo-corpo{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px 0}
.topo-linha{display:flex;align-items:center;gap:12px;min-width:0}
.topo-linha1{min-height:33px}
.topo-linha2{border-top:1px solid var(--linha);padding-top:8px}
.topo .espaco{flex:1;min-width:8px}
.topo .fonte-dados{display:none}
.topo .seletor-filial{flex:0 1 auto;min-width:0;overflow-x:auto}
.topo .btn{flex:0 0 auto}
.topo-acoes-principais{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.separador-acoes{width:1px;align-self:stretch;background:var(--linha);flex:0 0 auto;margin:2px 0}
.rail{position:fixed;top:var(--topo);left:0;bottom:0;width:var(--rail);background:var(--surface);border-right:1px solid var(--linha);padding:14px 10px;overflow:auto;z-index:20}
.rail nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:var(--raio);padding:9px 12px;cursor:pointer;color:var(--ink-2)}
.rail nav button:hover{background:var(--canvas)}
.rail nav button.ativo{background:var(--azul-tint);color:var(--azul-escuro);font-weight:600}
.rail nav button .nav-ico{flex:0 0 auto;width:17px;height:17px;color:var(--ink-3);display:inline-flex}
.rail nav button .nav-ico svg{width:100%;height:100%}
.rail nav button.ativo .nav-ico{color:var(--azul-escuro)}
.rail nav button .nav-label{flex:1;min-width:0}
.rail nav button .cont{margin-left:auto;font-size:12px;color:var(--ink-3);font-weight:500}
.rail nav button.ativo .cont{color:var(--azul-escuro)}
.rail .sep{height:1px;background:var(--linha);margin:10px 4px}
.rail .rotulo{font-size:11px;color:var(--ink-3);padding:6px 12px 2px}
.conteudo{margin-left:var(--rail);margin-top:var(--topo);padding:24px 28px 60px;min-height:calc(100vh - var(--topo))}
.vista{display:none}
.vista.ativa{display:block}
.cabecalho{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.cabecalho h1{font-size:21px}
.cabecalho p{margin:5px 0 0;color:var(--ink-3);max-width:74ch;line-height:1.5}

/* seletor de filial */
.seletor-filial{display:flex;gap:4px;background:var(--canvas);border:1px solid var(--linha);border-radius:var(--raio-sm);padding:3px}
.seletor-filial button{border:0;background:none;padding:6px 12px;border-radius:4px;cursor:pointer;color:var(--ink-2);white-space:nowrap;font-weight:500;transition:background .12s,color .12s}
.seletor-filial button:hover{color:var(--azul-escuro)}
.seletor-filial button.ativo{background:var(--azul);color:#fff;font-weight:600}
.btn{border:1px solid var(--linha);background:var(--surface);border-radius:var(--raio-sm);padding:7px 13px;cursor:pointer;color:var(--ink-2);white-space:nowrap;font-weight:500;transition:border-color .12s,color .12s,background .12s}
.btn:hover{border-color:var(--azul-claro);color:var(--azul-escuro);background:var(--azul-tint)}
.btn.primario{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600}
.btn.primario:hover{background:var(--azul-escuro);border-color:var(--azul-escuro);color:#fff}
.btn.pequeno{padding:5px 10px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:default}

/* ---------- cards ---------- */
.grade-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:14px;margin-bottom:22px}
.card{position:relative;background:var(--surface);border:1px solid var(--linha);border-top:3px solid var(--linha);border-radius:var(--raio);padding:16px 18px;cursor:pointer;transition:box-shadow .15s,border-color .15s,transform .15s;display:flex;flex-direction:column;gap:8px;min-height:104px}
.card:hover{border-color:var(--azul-claro);box-shadow:var(--sombra);transform:translateY(-1px)}
.card .rotulo{font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.02em;padding-right:22px}
.card .valor{font-size:28px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.card .sub{font-size:12.5px;color:var(--ink-3);margin-top:auto;line-height:1.4}
.card.vermelho{border-top-color:var(--vermelho)} .card.vermelho .valor{color:var(--vermelho)}
.card.amarelo{border-top-color:var(--amarelo)}  .card.amarelo .valor{color:#8F6D00}
.card.verde{border-top-color:var(--verde)}      .card.verde .valor{color:var(--verde)}
.card.laranja{border-top-color:var(--laranja)}  .card.laranja .valor{color:var(--laranja)}
.card.azul{border-top-color:var(--azul)}        .card.azul .valor{color:var(--azul-escuro)}
.card.roxo{border-top-color:var(--roxo)}        .card.roxo .valor{color:var(--roxo)}
.card.ink .valor{color:var(--ink)}
/* indicadores de apoio (menor prioridade de decisão) recebem tratamento mais discreto */
.grade-cards .card:nth-child(5),
.grade-cards .card:nth-child(8){background:var(--canvas);box-shadow:none}
.grade-cards .card:nth-child(5) .valor,
.grade-cards .card:nth-child(8) .valor{font-size:22px}
.grade-cards .card:nth-child(5):hover,
.grade-cards .card:nth-child(8):hover{background:var(--surface)}

/* ícone ƒx do card: discreto até o hover; abre a ficha da fórmula do indicador */
.card .fx-btn{position:absolute;top:8px;right:8px;width:22px;height:22px;padding:0;line-height:1;border:1px solid transparent;border-radius:var(--raio-sm);background:none;color:var(--ink-3);opacity:.35;font:italic 600 13px/1 var(--fonte);cursor:pointer;transition:opacity .15s,background .15s,color .15s,border-color .15s}
.card:hover .fx-btn{opacity:.75}
.card .fx-btn:hover{opacity:1;color:var(--azul-escuro);background:var(--azul-tint);border-color:var(--azul-claro)}
.card .fx-btn:focus-visible{opacity:1;outline:2px solid var(--azul);outline-offset:1px}

/* trilha de decisão (elemento de destaque) */
.trilha{background:var(--surface);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 20px 16px;margin-bottom:22px}
.trilha h2{margin-bottom:4px}
.trilha .legenda{color:var(--ink-3);font-size:12.5px;margin-bottom:14px}
.trilha .barra{display:flex;height:36px;border-radius:var(--raio-sm);overflow:hidden;background:var(--cinza-tint)}
.trilha .seg{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px;min-width:0;white-space:nowrap;overflow:hidden;padding:0 6px}
.trilha .seg.transf{background:var(--amarelo);color:#3B2E00}
.trilha .seg.compra{background:var(--vermelho)}
.trilha .seg.coberto{background:var(--verde)}
.trilha .passos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}
.trilha .passo{border-top:3px solid var(--linha);padding-top:8px}
.trilha .passo b{display:block;font-size:19px;font-weight:700}
.trilha .passo span{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.trilha .passo.p1{border-color:var(--azul)}
.trilha .passo.p2{border-color:var(--verde)}
.trilha .passo.p3{border-color:var(--amarelo)}
.trilha .passo.p4{border-color:var(--vermelho)}

/* ---------- painéis / gráficos ---------- */
.grade-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.grade-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}
.painel{background:var(--surface);border:1px solid var(--linha);border-radius:var(--raio);padding:16px 18px;min-width:0}
.painel h3{margin-bottom:3px;font-size:14.5px}
.painel .desc{font-size:12.5px;color:var(--ink-3);margin-bottom:12px;line-height:1.4}
.painel svg{width:100%;height:auto;display:block}
.g-tip{position:fixed;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;padding:6px 9px;border-radius:4px;z-index:90;display:none;white-space:nowrap}
.g-bar{cursor:default}
.g-bar-clicavel{cursor:pointer}
.g-bar-clicavel:hover{opacity:.8}
.g-rot{font-size:11px;fill:var(--ink-2)}
.g-val{font-size:11px;fill:var(--ink-2);font-weight:600}
.g-eixo{stroke:var(--linha)}
.legenda-inline{display:flex;gap:14px;font-size:12px;color:var(--ink-2);flex-wrap:wrap;margin-bottom:8px}
.legenda-inline i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* matriz de transferências */
.matriz{width:100%;border-collapse:collapse;font-size:12.5px}
.matriz th,.matriz td{border:1px solid var(--linha);padding:6px 8px;text-align:right;white-space:nowrap}
.matriz-wrap{overflow:auto}
.matriz th{background:var(--canvas);font-weight:600;text-align:center}
.matriz td.rot{text-align:left;font-weight:600;background:var(--canvas)}
.matriz td.calor{cursor:pointer}

/* ---------- filtros ---------- */
.filtros{background:var(--surface);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;margin-bottom:16px}
.indicadores-estoque{margin-bottom:16px}
.indicadores-estoque .seletor-filial+.seletor-filial{margin-top:8px}
/* bloco "Cobertura de estoque e oportunidades de antecipacao" na visao executiva */
.painel-cobertura{margin-bottom:22px}
.painel-cobertura .grade-cards{margin-bottom:0;margin-top:14px}
.indicadores-estoque .seletor-filial{width:fit-content;max-width:100%;overflow-x:auto}
.indicadores-estoque .seletor-filial button{white-space:nowrap}
.resumo-aba-estoque{margin:-8px 0 16px;font-size:12.5px;color:var(--ink-3)}
.filtros .linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.filtros label{display:block;font-size:12px;color:var(--ink-3);margin-bottom:3px}
.filtros input,.filtros select{width:100%;border:1px solid var(--linha);border-radius:5px;padding:6px 8px;background:#fff}
.filtros .acoes{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px;flex-wrap:wrap}
.filtros .resumo{font-size:12.5px;color:var(--ink-2)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--azul-tint);color:var(--azul-escuro);border-radius:14px;padding:2px 9px;font-size:12px;display:inline-flex;gap:6px;align-items:center}
.chip button{border:0;background:none;cursor:pointer;color:inherit;padding:0;font-size:14px;line-height:1}

/* ---------- tabelas ---------- */
.tabela-wrap{background:var(--surface);border:1px solid var(--linha);border-radius:var(--raio);overflow:auto;max-height:70vh;box-shadow:var(--sombra-sm)}
table.tabela{width:100%;border-collapse:collapse;font-size:13px}
.tabela th{position:sticky;top:0;background:var(--canvas);text-align:left;padding:8px 10px;border-bottom:1px solid var(--linha);font-weight:600;color:var(--ink-2);white-space:nowrap;cursor:pointer;user-select:none}
.tabela th.num,.tabela td.num{text-align:right}
.tabela th .ord{color:var(--azul);margin-left:3px;font-size:11px}
.tabela td{padding:7px 10px;border-bottom:1px solid #EEF1F4;vertical-align:top}
.tabela tbody tr{cursor:pointer}
.tabela tbody tr:hover{background:var(--azul-tint)}
.tabela td.desc{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabela td.cod{font-weight:600;white-space:nowrap}
.tabela td.fil{white-space:nowrap}
.tabela td.mono{white-space:nowrap}
.paginacao{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;font-size:12.5px;color:var(--ink-3)}
.paginacao div{display:flex;gap:6px}
.vazio{padding:30px;text-align:center;color:var(--ink-3)}

/* ---------- selos ---------- */
.selo{display:inline-block;border-radius:4px;padding:1px 7px;font-size:11.5px;font-weight:600;white-space:nowrap}
.selo.critico{background:var(--vermelho-tint);color:var(--vermelho)}
.selo.alto{background:var(--laranja-tint);color:#9A5100}
.selo.medio{background:var(--amarelo-tint);color:#7A5C00}
.selo.baixo{background:var(--verde-tint);color:var(--verde)}
.selo.neutro{background:var(--cinza-tint);color:var(--ink-2)}
.selo.azul{background:var(--azul-tint);color:var(--azul-escuro)}
.selo.abc-A{background:var(--azul);color:#fff}
.selo.abc-B{background:var(--azul-claro);color:var(--ink)}
.selo.abc-C{background:var(--cinza-tint);color:var(--ink-2)}
.selo.sit-comprar{background:var(--vermelho-tint);color:var(--vermelho)}
.selo.sit-transferir{background:var(--amarelo-tint);color:#7A5C00}
.selo.sit-parcial{background:var(--laranja-tint);color:#9A5100}
.selo.sit-ok{background:var(--verde-tint);color:var(--verde)}
.selo.sit-ruptura{background:var(--vermelho-tint);color:var(--vermelho)}
.selo.sit-excesso{background:var(--azul-tint);color:var(--azul-escuro)}
.selo.sit-bloqueado{background:var(--roxo-tint);color:var(--roxo)}
.selo.sit-parado{background:var(--cinza-tint);color:var(--ink-2)}
.selo.sit-semdemanda{background:var(--cinza-tint);color:var(--ink-3)}

/* ---------- modal ---------- */
.modal-fundo{position:fixed;inset:0;background:rgba(31,25,26,.45);display:none;z-index:50;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto}
.modal-fundo.aberto{display:flex}
.modal-fundo.centralizado{align-items:center}
.modal{background:var(--surface);border-radius:8px;width:min(1200px,100%);padding:22px 26px;position:relative}
.modal.estreito{width:min(420px,100%);padding:22px 24px}
.modal table.tabela{font-size:12.5px}
.modal table.tabela td,.modal table.tabela th{padding:6px 8px}
.modal .fechar{position:absolute;top:12px;right:14px;border:0;background:none;font-size:22px;cursor:pointer;color:var(--ink-3)}
.modal header{margin-bottom:14px;padding-right:30px}
.modal header h2{font-size:18px}
.modal header .meta{color:var(--ink-3);font-size:12.5px;margin-top:3px;display:flex;gap:12px;flex-wrap:wrap}
.modal .blocos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.modal .bloco{border:1px solid var(--linha);border-radius:var(--raio);padding:10px 12px}
.modal .bloco h3{margin-bottom:6px}
.modal .bloco dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:13px}
.modal .bloco dt{color:var(--ink-3)}
.modal .bloco dd{margin:0;text-align:right;font-weight:500}
.recomendacao{border-radius:var(--raio);padding:12px 14px;margin-bottom:14px;border:1px solid var(--linha);border-left-width:4px}
.recomendacao h3{margin-bottom:4px}
.recomendacao p{margin:3px 0;font-size:13px}
.recomendacao.transferir{border-left-color:var(--amarelo);background:var(--amarelo-tint)}
.recomendacao.comprar{border-left-color:var(--vermelho);background:var(--vermelho-tint)}
.recomendacao.parcial{border-left-color:var(--laranja);background:var(--laranja-tint)}
.recomendacao.ok{border-left-color:var(--verde);background:var(--verde-tint)}
.recomendacao.neutro{border-left-color:var(--linha);background:var(--canvas)}
.modal table.tabela th{position:static}
.modal .filial-atual{background:var(--azul-tint)}

/* ---------- parâmetros / alertas ---------- */
.form-param{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.form-param .campo{background:var(--surface);border:1px solid var(--linha);border-radius:var(--raio);padding:12px 14px}
.form-param label{display:block;font-weight:600;margin-bottom:4px}
.form-param .ajuda{font-size:12px;color:var(--ink-3);margin-bottom:8px}
.form-param input,.form-param select{width:100%;border:1px solid var(--linha);border-radius:5px;padding:6px 8px}
/* valor de compra com suspeita de erro de exportação (vírgula decimal perdida na origem) */
.valor-suspeito{color:var(--laranja);font-weight:600;cursor:help;border-bottom:1px dotted var(--laranja)}
.valor-corrigido{cursor:help;border-bottom:1px dotted var(--verde)}
.valor-corrigido::after{content:'';}

/* faixa de aviso da importação (valores suspeitos) */
.banner-importacao{display:flex;align-items:center;gap:10px;background:var(--laranja-tint);border:1px solid var(--laranja);border-left-width:4px;border-radius:var(--raio);padding:10px 12px;margin-bottom:14px;font-size:13px;color:#7A4400}
.banner-importacao[hidden]{display:none}
.banner-importacao b{font-weight:700}
.banner-importacao .espaco{flex:1}
.banner-importacao button{border:1px solid var(--laranja);background:rgba(255,255,255,.7);color:#7A4400;border-radius:var(--raio-sm);padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer}
.banner-importacao button:hover{background:#fff}
.banner-importacao .fechar-banner{border:0;background:none;font-size:16px;line-height:1;padding:0 4px}

/* resumo da importação (Configurações › Importação) */
.resumo-import{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:14px}
.resumo-import .bloco-import{background:var(--surface);border:1px solid var(--linha);border-radius:var(--raio);padding:10px 12px}
.resumo-import .bloco-import .rotulo{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em}
.resumo-import .bloco-import .valor{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.resumo-import .bloco-import .sub{font-size:12px;color:var(--ink-2);margin-top:2px}
.lista-import{margin:0 0 14px;padding:0;list-style:none;font-size:13px;color:var(--ink-2)}
.lista-import li{padding:4px 0;border-bottom:1px solid var(--linha);display:flex;gap:10px}
.lista-import li:last-child{border-bottom:0}
.lista-import li b{color:var(--ink);font-weight:600;min-width:260px}
.lista-import li span.num{margin-left:auto;font-variant-numeric:tabular-nums}

.alerta{background:var(--surface);border:1px solid var(--linha);border-left:4px solid var(--laranja);border-radius:var(--raio);padding:12px 14px;margin-bottom:10px}
.alerta.info{border-left-color:var(--azul)}
.alerta.ok{border-left-color:var(--verde)}
.alerta h3{display:flex;justify-content:space-between;gap:10px}
.alerta p{margin:4px 0 0;font-size:13px;color:var(--ink-2)}
.regras{background:var(--surface);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 18px;margin-bottom:14px}
.regras code{background:var(--canvas);padding:1px 5px;border-radius:3px;font-size:12.5px}
.regras ul{margin:6px 0 0;padding-left:18px}
.regras li{margin:3px 0}
.aviso-topo{background:var(--amarelo-tint);border-bottom:1px solid #E6D28A;padding:6px 20px;font-size:12.5px;color:#5A4500}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .grade-2,.grade-3{grid-template-columns:1fr}
  .modal .blocos{grid-template-columns:1fr}
}
@media (max-width:1300px){
  .txt-compacta{display:none}
  .anexo-info{max-width:170px}
  .filtro-resumo,#btnLimparFiltrosGlobal{padding-left:9px;padding-right:9px}
}
@media (max-width:960px){
  .anexo-info{display:none}
  .topo{padding:0 16px;gap:14px}
  .topo-marca{padding-right:14px;gap:10px}
  .topo-marca img{height:56px}
  .topo .titulo{font-size:15px}
}
@media (max-width:820px){
  :root{--rail:0px}
  .rail{display:none}
  .conteudo{padding:16px 14px 60px}
  .topo .titulo small,.topo .fonte-dados{display:none}
  .seletor-filial{overflow:auto}
  .topo-linha2{flex-wrap:wrap;row-gap:8px}
  .busca-item-topo{flex:1 1 100%;order:3}
  .btn-limpar-filtros{order:4}
  .btn-voltar{order:5}
  .trilha .passos{grid-template-columns:1fr 1fr}
  .grade-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .nav-mobile{display:flex;gap:6px;overflow:auto;margin-bottom:12px}
}
@media (max-width:600px){
  .topo{gap:10px;padding:0 12px}
  .topo-marca{padding-right:10px;gap:8px}
  .topo-marca img{height:44px}
  .topo .titulo{font-size:13.5px}
  .topo-linha{gap:8px}
}
@media (max-width:560px){
  :root{--topo:168px}
  .topo{flex-direction:column;align-items:stretch;height:var(--topo);padding:10px 14px 8px;gap:0}
  .topo-marca{border-right:0;border-bottom:1px solid var(--linha);padding:0 0 8px;margin-bottom:8px}
  .topo .titulo small{display:none}
  .topo-corpo{padding:0;gap:6px}
}
.nav-mobile{display:none}

/* ---------- anexo (importar planilha) ---------- */
.anexo{display:flex;flex-direction:row;align-items:center;gap:10px;padding:4px 10px;border-radius:8px;border:1px dashed transparent;transition:background .15s,border-color .15s;flex:0 1 auto;min-width:0}
.anexo[hidden]{display:none}
.anexo.arrastando{background:var(--azul-tint);border-color:var(--azul)}
.btn-anexo{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;color:var(--azul-escuro);border-color:var(--azul-claro);transition:transform .12s,box-shadow .12s,border-color .12s;flex:0 0 auto}
.btn-anexo:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(63,124,189,.28);border-color:var(--azul)}
.btn-anexo:active{transform:translateY(0)}
.btn-anexo .ico-anexo{width:16px;height:16px;flex:0 0 auto;display:inline-block;vertical-align:-3px}
.anexo-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;font-size:11px;color:var(--ink-3);text-align:left;line-height:1.3;min-width:0;max-width:230px}
.anexo-info:empty{display:none}
.anexo-info>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexo-info-arquivo{font-weight:600;color:var(--ink-2)}
.anexo-info-linha{font-size:10.5px}
.btn.confirmado{background:var(--verde-tint);border-color:var(--verde);color:var(--verde)}

/* ---------- resumo de filtros ativos ---------- */
.filtro-resumo{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.filtro-resumo.tem-filtro{border-color:var(--azul);background:var(--azul-tint);color:var(--azul-escuro);font-weight:600}
.popover-filtros{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--linha);border-radius:8px;box-shadow:0 8px 24px rgba(31,25,26,.18);padding:12px 14px;width:340px;max-height:70vh;overflow:auto}
.popover-filtros h4{margin-bottom:8px;font-size:13px}
.popover-filtros ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.popover-filtros li{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--canvas);border-radius:5px;padding:5px 8px;font-size:12.5px}
.popover-filtros li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.popover-filtros .remover-filtro{border:0;background:none;cursor:pointer;color:var(--ink-3);font-size:15px;line-height:1;flex:0 0 auto;padding:0 2px}
.popover-filtros .remover-filtro:hover{color:var(--vermelho)}
.popover-filtros .acoes{display:flex;align-items:center;gap:8px}
.popover-filtros .vazio-filtros{font-size:12.5px;color:var(--ink-3);margin:0 0 10px}

.trilha-fora{margin-top:12px;padding-top:10px;border-top:1px dashed var(--linha);font-size:12.5px;color:var(--ink-3);line-height:1.5}
.trilha-fora .num{color:var(--ink-2);font-weight:600}

/* ---------- sinais de confiabilidade do preco e de BO em atraso ---------- */
.valor-conferir{color:var(--laranja);font-weight:600;cursor:help;border-bottom:1px dotted var(--laranja)}
.marca-preco{margin-left:4px;font-size:11px;font-weight:700;cursor:help}
.marca-preco.ok{color:var(--verde)}
.marca-preco.conferir{color:var(--laranja)}
.marca-preco.outra{color:var(--ink-3)}
.zero-neutro{color:var(--ink-3);cursor:help}
.selo.bo{background:var(--laranja-tint);color:#8A4A00;border-color:#F0C48A}
.selo.bo-critico{background:var(--vermelho-tint);color:var(--vermelho);border-color:#E9A79F;font-weight:700}
.aviso-preco{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--laranja-tint);border:1px solid #F0C48A;border-left:3px solid var(--laranja);border-radius:var(--raio);padding:9px 13px;margin-bottom:14px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.aviso-preco b{color:#8A4A00}
.aviso-preco button{margin-left:auto}

/* ---------- ficha de fórmula do indicador (modal ƒx) ---------- */
.fx-sigla{font-style:italic;color:var(--azul);font-weight:700}
.fx-oque{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 16px;max-width:92ch}
.fx-bloco{margin-bottom:16px}
.fx-bloco h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin-bottom:7px}
.fx-formula{width:100%;border:1px solid var(--linha);border-radius:var(--raio);border-collapse:separate;border-spacing:0;overflow:hidden}
.fx-formula td{padding:9px 12px;vertical-align:top;border-top:1px solid var(--linha)}
.fx-formula tr:first-child td{border-top:0}
.fx-formula .fx-rot{width:210px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--canvas);white-space:nowrap}
.fx-formula .fx-expr{font-family:"Cascadia Mono","Consolas",ui-monospace,monospace;font-size:12.5px;color:var(--ink);line-height:1.5}
.fx-formula .fx-nota{display:block;margin-top:3px;font-family:var(--fonte);font-size:12px;color:var(--ink-3)}
.fx-atencao{border-left:3px solid var(--amarelo);background:var(--amarelo-tint);border-radius:0 var(--raio-sm) var(--raio-sm) 0;padding:10px 13px;font-size:12.5px;line-height:1.55;color:var(--ink-2);margin-bottom:16px}
.fx-atencao b{color:var(--ink)}
.fx-conf{margin:0;display:grid;grid-template-columns:1fr auto;gap:0;font-size:13px;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.fx-conf dt{padding:7px 12px;color:var(--ink-2);border-top:1px solid var(--linha)}
.fx-conf dd{margin:0;padding:7px 12px;text-align:right;font-weight:600;border-top:1px solid var(--linha);font-variant-numeric:tabular-nums}
.fx-conf dt:first-of-type,.fx-conf dd:first-of-type{border-top:0}
.fx-duas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fx-lista{margin:0;padding-left:18px;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.fx-lista li{margin-bottom:5px}
.fx-lista li::marker{color:var(--ink-3)}
.fx-lista.fx-sim li::marker{color:var(--verde)}
.fx-lista.fx-nao li::marker{color:var(--vermelho)}
.fx-defs{margin:0;display:grid;grid-template-columns:210px 1fr;gap:6px 14px;font-size:12.5px}
.fx-defs dt{font-weight:600;color:var(--ink-2)}
.fx-defs dd{margin:0;color:var(--ink-2);line-height:1.5}
.fx-rodape{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--linha);padding-top:12px;margin-top:4px}
.fx-rodape span{flex:1;min-width:220px;font-size:12px;color:var(--ink-3);line-height:1.45}
.fx-rodape div{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:860px){.fx-duas{grid-template-columns:1fr}.fx-defs{grid-template-columns:1fr}.fx-formula .fx-rot{width:auto;white-space:normal}}

/* ---------- processar planilha (confirmação + progresso, modal central) ---------- */
.processar-conteudo h4{margin-bottom:10px;font-size:16px}
.processar-conteudo .arquivo-nome{font-size:13px;color:var(--ink-2);margin-bottom:10px;word-break:break-all}
.processar-conteudo .ajuda-anexo{font-size:12.5px;color:var(--ink-3);margin:0 0 16px}
.processar-conteudo .acoes{display:flex;align-items:center;gap:8px;margin-top:6px}
.processar-conteudo .erro-texto{color:var(--vermelho);font-size:12.5px;margin:4px 0 14px}
.barra-progresso{height:10px;border-radius:5px;background:var(--cinza-tint);overflow:hidden;margin-bottom:8px}
.barra-progresso-fill{height:100%;background:var(--azul);width:0%;border-radius:5px;transition:width .3s ease}
.barra-progresso-fill.concluido{background:var(--verde)}
.barra-progresso-fill.erro{background:var(--vermelho)}
.progresso-texto{font-size:12.5px;color:var(--ink-2);display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.progresso-texto .pct{font-weight:600;color:var(--ink);flex:0 0 auto}

/* ---------- barra de rolagem lateral duplicada (topo + rodapé) das tabelas ---------- */
.scroll-topo{overflow-x:auto;overflow-y:hidden;height:16px;margin-bottom:2px}
.scroll-topo-inner{height:1px}

/* ---------- transferências: cargas por rota (origem → destino) ---------- */
.acoes-visao-transf{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.rotas-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:14px}
.rota-card{background:var(--surface);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.rota-titulo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;flex-wrap:wrap}
.rota-fil{color:var(--ink)}
.rota-seta{color:var(--azul);font-size:18px}
.rota-badges{display:flex;gap:6px;flex-wrap:wrap}
.rota-badges .badge{background:var(--canvas);border:1px solid var(--linha);border-radius:12px;padding:2px 9px;font-size:11.5px;color:var(--ink-2)}
.rota-badges .badge.critico{background:var(--vermelho-tint);border-color:var(--vermelho);color:var(--vermelho)}
.rota-badges .badge.alto{background:var(--laranja-tint);border-color:var(--laranja);color:#9A5100}
.rota-status-toggle{display:flex;gap:5px;flex-wrap:wrap}
.rota-status-toggle button{border:1px solid var(--linha);background:var(--surface);border-radius:12px;padding:4px 10px;font-size:11.5px;cursor:pointer;color:var(--ink-2)}
.rota-status-toggle button.ativo.carga-pendente{background:var(--amarelo-tint);border-color:var(--amarelo);color:#7A5C00}
.rota-status-toggle button.ativo.carga-montagem{background:var(--azul-tint);border-color:var(--azul);color:var(--azul-escuro)}
.rota-status-toggle button.ativo.carga-separado{background:var(--verde-tint);border-color:var(--verde);color:var(--verde)}
.rota-status-toggle button.ativo.carga-enviado{background:var(--ink);border-color:var(--ink);color:#fff}
.rota-acoes{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

/* ---------- comentários ---------- */
.btn-coment{border:1px solid var(--linha);background:var(--surface);border-radius:14px;padding:3px 10px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);max-width:180px}
.btn-coment:hover{border-color:var(--azul-claro);color:var(--azul-escuro)}
.btn-coment.tem-coment{border-color:var(--amarelo);background:var(--amarelo-tint);color:#7A5C00}
.btn-coment .txt{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cel-coment{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.selo.status-pendente{background:var(--amarelo-tint);color:#7A5C00}
.selo.status-analise{background:var(--azul-tint);color:var(--azul-escuro)}
.selo.status-comprado{background:var(--verde-tint);color:var(--verde)}
.selo.status-divergente{background:var(--vermelho-tint);color:var(--vermelho)}
.popover-fundo{position:fixed;inset:0;z-index:75}
.popover-coment{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--linha);border-radius:8px;box-shadow:0 8px 24px rgba(31,25,26,.18);padding:12px 14px;width:300px}
.popover-coment h4{margin-bottom:4px;font-size:13px}
.ajuda-comentario{font-size:11.5px;color:var(--ink-3);margin:0 0 8px}
.popover-coment textarea{width:100%;min-height:70px;border:1px solid var(--linha);border-radius:5px;padding:6px 8px;font:inherit;resize:vertical;margin-bottom:8px}
.popover-coment select{width:100%;border:1px solid var(--linha);border-radius:5px;padding:6px 8px;margin-bottom:10px}
.popover-coment .acoes{display:flex;align-items:center;gap:8px}
.busca-item-topo{display:flex;align-items:center;gap:7px;background:var(--canvas);border:1px solid var(--linha);border-radius:var(--raio-sm);padding:6px 10px;flex:0 1 280px;min-width:120px}
.busca-item-topo svg{width:15px;height:15px;flex:0 0 auto;color:var(--ink-3)}
.busca-item-topo input{border:0;background:none;outline:0;font:inherit;color:var(--ink);flex:1;min-width:0}
.busca-item-topo input::placeholder{color:var(--ink-3)}

.btn-voltar{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:9px 16px;font-size:14px;font-weight:600;color:var(--azul-escuro);border-color:var(--azul-claro);transition:transform .12s,box-shadow .12s,border-color .12s,opacity .12s}
.btn-voltar svg{width:17px;height:17px;flex:0 0 auto}
.btn-voltar:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(63,124,189,.22);border-color:var(--azul)}
.btn-voltar:active{transform:translateY(0)}
.btn-voltar[disabled]{opacity:.4;cursor:default;box-shadow:none;transform:none}
.btn-limpar-filtros{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:9px 16px;font-size:14px;font-weight:600;color:var(--vermelho);border-color:#EFC0BA;transition:transform .12s,box-shadow .12s,border-color .12s,background .12s}
.btn-limpar-filtros svg{width:17px;height:17px;flex:0 0 auto}
.btn-limpar-filtros:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(200,54,43,.22);border-color:var(--vermelho);background:var(--vermelho-tint)}
.btn-limpar-filtros:active{transform:translateY(0)}
.btn-limpar-filtros[disabled]{opacity:.4;cursor:default;box-shadow:none;transform:none}
.popover-busca{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--linha);border-radius:8px;box-shadow:0 8px 24px rgba(31,25,26,.18);width:380px;max-height:60vh;overflow:auto;padding:6px}
.popover-busca .item{display:flex;flex-direction:column;gap:2px;padding:7px 9px;border-radius:5px;cursor:pointer}
.popover-busca .item:hover,.popover-busca .item.ativo{background:var(--azul-tint)}
.popover-busca .item .cod{font-weight:700;font-size:12.5px;color:var(--ink)}
.popover-busca .item .desc{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.popover-busca .vazio{padding:10px 8px;font-size:12.5px;color:var(--ink-3)}
.filtros-comentarios{display:flex;gap:8px;flex-wrap:wrap}
.filtros-comentarios button{border:1px solid var(--linha);background:var(--surface);border-radius:14px;padding:5px 12px;font-size:12.5px;cursor:pointer;color:var(--ink-2)}
.filtros-comentarios button.ativo{background:var(--azul);border-color:var(--azul);color:#fff}
.modal .comentario-modal{border:1px solid var(--linha);border-radius:var(--raio);padding:12px 14px;margin-top:14px}
.modal .comentario-modal h3{margin-bottom:8px}
.modal .comentario-modal textarea{width:100%;min-height:60px;border:1px solid var(--linha);border-radius:5px;padding:6px 8px;font:inherit;resize:vertical;margin-bottom:8px}
.modal .comentario-modal .linha-status{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.modal .comentario-modal select{border:1px solid var(--linha);border-radius:5px;padding:6px 8px}
/* comentários em formato de conversa — leitura primeiro, edição só quando pedida */
.comentario-modal [hidden],.popover-coment [hidden]{display:none !important}
.coment-conversa{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.coment-msg{display:flex;gap:10px;align-items:flex-start}
.popover-coment .coment-msg{margin-bottom:10px}
.coment-avatar{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--azul-tint);color:var(--azul-escuro);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.coment-corpo{flex:1;min-width:0;background:var(--canvas);border:1px solid var(--linha);border-radius:0 var(--raio) var(--raio) var(--raio);padding:8px 12px}
.coment-topo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.coment-topo b{color:var(--ink);font-size:12.5px}
.coment-texto{font-size:13px;color:var(--ink);margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
.coment-editado{font-size:11px;color:var(--ink-3);margin-top:4px;font-style:italic}
.coment-acoes{display:flex;gap:8px;flex-wrap:wrap;padding-left:40px}
.coment-vazio{font-size:12.5px;color:var(--ink-3);margin:0}
.coment-novo{border-top:1px dashed var(--linha);padding-top:10px}
.coment-form{border-top:1px dashed var(--linha);padding-top:10px}
.coment-form h4{font-size:12.5px;margin:0 0 6px;color:var(--ink-2)}

/* ---------- arquivamento e histórico de comentários ---------- */
.abas-comentarios{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.abas-comentarios button[data-aba]{border:1px solid var(--linha);background:var(--surface);border-radius:14px;padding:6px 14px;font-size:12.5px;cursor:pointer;color:var(--ink-2);font-weight:600}
.abas-comentarios button[data-aba].ativo{background:var(--ink);border-color:var(--ink);color:#fff}
.aviso-comentario{font-size:11.5px;color:#7A5C00;background:var(--amarelo-tint);border:1px solid var(--amarelo);border-radius:5px;padding:5px 8px;margin:0 0 8px}
.btn-coment.coment-antigo{opacity:.72;text-decoration:underline dotted}
.ctx-linha{font-size:11.5px;color:var(--ink-2);display:block;line-height:1.45}
.ctx-vazio{font-size:11px;color:var(--ink-3);font-style:italic}
.historico-comentarios{border:1px solid var(--linha);border-radius:var(--raio);padding:12px 14px;margin-top:14px;background:var(--canvas)}
.historico-comentarios h3{margin-bottom:4px}
.historico-comentarios summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
.hist-item{border-left:3px solid var(--linha);padding:8px 0 8px 12px;margin-top:10px}
.hist-item:first-of-type{border-left-color:var(--azul)}
.hist-topo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2)}
.hist-motivo{color:var(--ink-3)}
.hist-texto{font-size:13px;color:var(--ink);margin:6px 0 4px;white-space:pre-wrap}
.hist-ctx{font-size:11.5px;color:var(--ink-3);line-height:1.45}

/* ---------- tela de login ---------- */
/* formulário à esquerda, vitrine institucional à direita */
.tela-login{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:minmax(400px,.88fr) 1fr;background:var(--canvas);overflow:auto}
.tela-login[hidden]{display:none}

/* coluna da esquerda: formulário */
.login-painel{display:flex;align-items:center;justify-content:center;padding:32px 28px;background:var(--surface)}
.cartao-login{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px}
.login-logo{height:50px;width:auto;align-self:flex-start;margin-bottom:2px}
.cartao-login h1{font-size:20px;color:var(--ink)}
.cartao-login h1 small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.5}
.cartao-login label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.cartao-login input[type=email],.cartao-login input[type=password],.cartao-login input[type=text]{width:100%;border:1px solid var(--linha);border-radius:var(--raio-sm);background:var(--canvas);padding:10px 12px;font:inherit;transition:border-color .14s,background .14s,box-shadow .14s}
.cartao-login input::placeholder{color:var(--ink-3);opacity:.8;font-weight:400}
.cartao-login input:focus{outline:none;border-color:var(--azul);background:var(--surface);box-shadow:0 0 0 3px rgba(63,124,189,.16)}
.campo-senha{position:relative;display:block}
.campo-senha input{padding-right:42px}
.ver-senha{position:absolute;top:0;right:0;height:100%;width:40px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;padding:0;cursor:pointer;color:var(--ink-3);border-radius:var(--raio-sm);transition:color .14s}
.ver-senha:hover{color:var(--azul-escuro)}
.ver-senha svg{width:18px;height:18px}
.ver-senha svg[hidden]{display:none}
.cartao-login .login-erro{background:var(--vermelho-tint);color:var(--vermelho);border:1px solid rgba(200,54,43,.22);border-radius:var(--raio-sm);padding:8px 11px;font-size:12.5px;margin:0}
.cartao-login[hidden]{display:none}
.cartao-login .btn.primario{margin-top:2px;padding:11px 16px;font-size:14px;border-radius:var(--raio-sm)}
.login-rodape{margin:2px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-3)}

/* coluna da direita: vitrine institucional */
.login-vitrine{position:relative;overflow:hidden;display:flex;align-items:center;padding:40px 48px;color:#fff;background:linear-gradient(150deg,var(--azul-escuro) 0%,#1C4C80 46%,#14375E 100%)}
.login-vitrine-brilho{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(680px 380px at 14% 10%,rgba(141,184,219,.28),transparent 62%),
  radial-gradient(560px 460px at 92% 94%,rgba(63,124,189,.32),transparent 64%)}
.login-vitrine-conteudo{position:relative;width:100%;max-width:420px;display:flex;flex-direction:column;gap:18px}
.login-tag{margin:0;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--azul-claro)}
.login-vitrine h2{font-size:29px;line-height:1.22;font-weight:700;letter-spacing:-.02em;color:#fff}

.login-recursos{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.login-recursos li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.login-recurso-ico{display:inline-flex;color:var(--azul-claro);margin-top:1px}
.login-recurso-ico svg{width:18px;height:18px}

/* entrada suave dos elementos */
@keyframes loginSobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes loginEntraLado{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.login-vitrine-conteudo>*{animation:loginEntraLado .5s both}
.login-vitrine-conteudo>*:nth-child(2){animation-delay:.08s}
.login-vitrine-conteudo>*:nth-child(3){animation-delay:.16s}
.cartao-login>*{animation:loginSobe .45s both}
.cartao-login>*:nth-child(2){animation-delay:.06s}
.cartao-login>*:nth-child(3){animation-delay:.12s}
.cartao-login>*:nth-child(4){animation-delay:.18s}
.cartao-login>*:nth-child(5){animation-delay:.24s}
.cartao-login>*:nth-child(6){animation-delay:.3s}

/* ---------- usuário logado / sair ---------- */
.usuario-logado{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.usuario-logado[hidden]{display:none}

/* ---------- estado sem dados importados ---------- */
.vazio-dados{max-width:520px;margin:60px auto;text-align:center;padding:28px 24px;background:var(--surface);border:1px solid var(--linha);border-radius:var(--raio)}
.vazio-dados h2{margin-bottom:10px}
.vazio-dados p{color:var(--ink-2);margin:0}

@media (max-width:1040px){
  .tela-login{grid-template-columns:1fr}
  .login-vitrine{display:none}
  .login-painel{align-items:flex-start;padding:44px 24px}
}
@media (max-height:720px){
  .login-vitrine{padding:32px 40px}
  .login-vitrine-conteudo{gap:14px}
  .login-vitrine h2{font-size:25px}
  .login-recursos{gap:10px}
}
@media (max-width:640px){
  .login-painel{padding:32px 20px}
  .login-logo{height:44px}
}

/* ---------- selo de versão (canto inferior direito) ---------- */
.rodape-portal{position:fixed;right:10px;bottom:8px;z-index:110;display:flex;align-items:center;gap:8px}
.btn-rodape{padding:3px 9px;border:1px solid var(--linha);border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink-3);font:inherit;font-size:11px;letter-spacing:.02em;box-shadow:var(--sombra-sm);cursor:pointer;opacity:.65;transition:opacity .15s,color .15s,border-color .15s}
.btn-rodape:hover{opacity:1;color:var(--ink-2);border-color:var(--ink-3)}
.btn-rodape:disabled{cursor:default;opacity:.45}
.btn-rodape.confirmado{opacity:1;background:var(--verde-tint);border-color:var(--verde);color:var(--verde)}
.selo-versao{padding:3px 8px;border:1px solid var(--linha);border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink-3);font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.02em;box-shadow:var(--sombra-sm);pointer-events:auto;user-select:none;opacity:.65;transition:opacity .15s}
.selo-versao:hover{opacity:1;color:var(--ink-2)}
.selo-versao:empty{display:none}

/* ---------- tela de usuários ---------- */
.usuarios-barra{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.usuarios-resumo{color:var(--ink-3);font-size:13px;padding-bottom:8px}
.usuarios-resumo b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.busca-usuarios{display:flex;flex-direction:column;gap:4px;min-width:220px}
.busca-usuarios span{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.busca-usuarios input{border:1px solid var(--linha);border-radius:var(--raio-sm);padding:7px 10px;font:inherit;background:var(--surface)}
.pilulas{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:1px}
.pilula{border:1px solid var(--azul-tint);background:var(--azul-tint);color:var(--azul-escuro);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.pilula:hover{border-color:var(--azul-claro)}
.pilula.ativa{background:var(--azul-escuro);border-color:var(--azul-escuro);color:#fff}
.btn.destaque{background:var(--laranja);border-color:var(--laranja);color:#fff;font-weight:600;border-radius:var(--raio-sm);padding:9px 18px;margin-left:auto}
.btn.destaque:hover{background:#C96C13;border-color:#C96C13;color:#fff}

.lista-usuarios{background:var(--surface);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra-sm);overflow:hidden}
.usuario-cab,.usuario-linha{display:grid;grid-template-columns:minmax(220px,1.6fr) 130px minmax(180px,2fr) 110px auto;align-items:center;gap:14px;padding:12px 18px}
.usuario-cab{background:var(--canvas);border-bottom:1px solid var(--linha);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:10px;padding-bottom:10px}
.usuario-linha{border-bottom:1px solid var(--linha)}
.usuario-linha:last-child{border-bottom:0}
.usuario-linha:hover{background:var(--azul-tint)}
.usuario-linha.inativo{background:var(--canvas)}
.usuario-linha.inativo .usuario-id,.usuario-linha.inativo .usuario-acesso{opacity:.55}
.usuario-id{display:flex;align-items:center;gap:12px;min-width:0}
.usuario-id .avatar{flex:0 0 auto;width:32px;height:32px;border-radius:50%;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.usuario-nome{display:flex;flex-direction:column;min-width:0}
.usuario-nome b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usuario-nome span{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marca-voce{background:var(--cinza-tint);color:var(--ink-3);border-radius:4px;padding:1px 6px;font-size:10.5px;font-weight:600;vertical-align:1px}
.usuario-acesso{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.tag-importa{display:inline-block;margin-top:4px;font-size:10.5px;font-weight:700;color:var(--azul-escuro);background:var(--azul-tint);border:1px solid var(--azul-claro);border-radius:999px;padding:1px 8px;white-space:nowrap}
.tag-importa + .tag-importa{margin-left:6px}
.usuario-acoes{display:flex;gap:8px;justify-content:flex-end}

.ficha-usuario{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.ficha-usuario label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ficha-usuario label i{font-weight:400;color:var(--ink-3);font-style:normal}
.ficha-usuario .ficha-check{flex-direction:row;align-items:flex-start;gap:9px;background:var(--canvas);border:1px solid var(--linha);border-radius:var(--raio-sm);padding:10px 12px}
.ficha-usuario .ficha-check input{width:16px;height:16px;flex:0 0 auto;margin-top:1px;padding:0}
.ficha-usuario .ficha-check i{display:block;margin-top:2px;font-weight:400;color:var(--ink-3);font-style:normal}
.ficha-usuario input,.ficha-usuario select{border:1px solid var(--linha);border-radius:var(--raio-sm);padding:8px 10px;font:inherit;font-weight:400;color:var(--ink);background:var(--surface)}
.ficha-erro{margin:0;background:var(--vermelho-tint);color:var(--vermelho);border-radius:var(--raio-sm);padding:8px 10px;font-size:12.5px}
.ficha-acoes{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}

@media (max-width:1100px){
  .usuario-cab{display:none}
  .usuario-linha{grid-template-columns:1fr auto;gap:8px 12px;padding:14px 16px}
  .usuario-linha>div:nth-child(3){grid-column:1/-1}
  .usuario-acoes{grid-column:1/-1;justify-content:flex-start}
}

/* ---------- tarja da versão de validação offline (dist/, gerada por build.js) ---------- */
.tarja-validacao{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--laranja);color:#fff;font-size:12.5px;line-height:1.45;text-align:center;padding:7px 16px;box-shadow:var(--sombra-sm)}
.tarja-validacao b{font-weight:700;letter-spacing:.04em}
.tarja-validacao[hidden]{display:none}
body.com-tarja{padding-top:32px}
.tarja-ver-como{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;background:var(--roxo);color:#fff;font-size:12.5px;line-height:1.45;padding:6px 16px;box-shadow:var(--sombra-sm)}
.tarja-ver-como[hidden]{display:none}
.tarja-ver-como .btn{background:#fff;color:var(--roxo);border-color:transparent}
body.com-tarja-ver-como{padding-top:40px}
@media (max-width:640px){ body.com-tarja-ver-como{padding-top:68px} }
@media (max-width:640px){ body.com-tarja{padding-top:56px} }