/* ============================================================
   SkillMap Logística — estilos
   Tokens primeiro: cores, tipografia e espaçamento com regra fixa.
   ============================================================ */
:root{
  /* Marca */
  --azul:#003DA5; --azul-esc:#002C78; --azul-50:#EEF3FB; --azul-100:#D9E6F7;
  /* Neutros */
  --fundo:#F5F7FA; --papel:#FFFFFF; --linha:#E3E8EF; --linha-forte:#CBD3DF;
  --texto:#172033; --texto-2:#4A5568; --texto-3:#718096;
  /* Estados (cor forte só onde exige ação) */
  --ok:#1E7B4F; --ok-bg:#E7F4EE; --alerta:#8A5A00; --alerta-bg:#FDF3DC;
  --perigo:#B42318; --perigo-bg:#FDECEA; --estrela:#E3A21A;
  /* Tipografia: 4 tamanhos de texto + 2 de título */
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1.0625rem; --fs-lg:1.375rem; --fs-xl:1.75rem;
  /* Espaçamento: múltiplos de 4 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --raio:8px; --raio-lg:12px;
  --sombra:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --foco:0 0 0 3px rgba(0,61,165,.18);
  /* Tokens de superfície (o tema escuro troca só estes valores) */
  --campo:#FFFFFF; --hover:#F7F9FC; --linha-hover:#AEB8C7; --placeholder:#9AA4B2; --borda-suave:rgba(23,32,51,.06);
  --azul-btn:#003DA5; --azul-btn-hover:#002C78; --toast:#172033;
  --perigo-borda:#F3C5C0; --ok-borda:#BFE3CF; --estrela-vazia:#D5DBE4; --estrela-ant:#F1D595;
  --perigo-solido:#B42318;
  --mistura:100%; /* força das cores do Nine-Box (no escuro vira um tom suave) */
  color-scheme:light;
}

/* ============ Tema escuro ============ */
:root[data-tema="escuro"]{
  --azul:#6EA2FF; --azul-esc:#8DB6FF; --azul-50:#18233B; --azul-100:#22335A;
  --fundo:#0E131D; --papel:#161C29; --linha:#263044; --linha-forte:#36415A;
  --texto:#E6EAF2; --texto-2:#B6BFCF; --texto-3:#8791A5;
  --ok:#4CC38A; --ok-bg:#12291E; --alerta:#E8B85A; --alerta-bg:#2D2412;
  --perigo:#FF8A7E; --perigo-bg:#331A18; --estrela:#F2B33D;
  --sombra:0 1px 2px rgba(0,0,0,.35);
  --foco:0 0 0 3px rgba(110,162,255,.30);
  --campo:#0F1521; --hover:#1C2435; --linha-hover:#4A5672; --placeholder:#6B758A; --borda-suave:rgba(255,255,255,.06);
  --azul-btn:#2F6BD8; --azul-btn-hover:#3B7BEF; --toast:#2A3346;
  --perigo-borda:#5C2A25; --ok-borda:#1F4A33; --estrela-vazia:#3A4459; --estrela-ant:#6E5A2C;
  --perigo-solido:#C2362B;
  --mistura:26%;
  color-scheme:dark;
}
:root[data-tema="escuro"] .login-box{box-shadow:0 12px 32px rgba(0,0,0,.45)}
:root[data-tema="escuro"] .dlg::backdrop{background:rgba(0,0,0,.6)}
/* Nine-Box: a cor configurada vira um tom suave sobre o fundo escuro */
.box,.nb-edit{background:color-mix(in srgb,var(--cor) var(--mistura),var(--papel))!important}
/* no escuro, mantém o tom da cor (azul, rosado...) em versão escura e saturada, em vez de virar cinza */
@supports (color:oklch(from red l c h)){
  :root[data-tema="escuro"] .box,:root[data-tema="escuro"] .nb-edit{background:oklch(from var(--cor) 0.31 calc(c * 2.6) h)!important}
}
/* Botão de tema no topo */
.btn-tema .ic-lua{display:none}
:root[data-tema="escuro"] .btn-tema .ic-sol{display:none}
:root[data-tema="escuro"] .btn-tema .ic-lua{display:inline}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--fundo);color:var(--texto);font-size:var(--fs-base);line-height:1.5}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:600;color:var(--texto)}
h1{font-size:var(--fs-xl)} h2{font-size:var(--fs-lg)} h3{font-size:var(--fs-md)} h4{font-size:var(--fs-base);margin:var(--e3) 0 var(--e1)}
p{margin:0 0 var(--e2)}
b,strong{font-weight:600}
.muted{color:var(--texto-3)} .small{font-size:var(--fs-sm)}
.erro{color:var(--perigo);min-height:1.2em;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Ícones */
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.ic-at{color:var(--perigo);width:15px;height:15px;margin-right:var(--e1)}

/* Formulários */
label{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:var(--fs-sm);color:var(--texto-2)}
input,select,textarea{font:inherit;font-size:var(--fs-base);color:var(--texto);background:var(--campo);border:1px solid var(--linha-forte);border-radius:var(--raio);padding:0 var(--e3);height:40px;width:100%;transition:border-color .15s,box-shadow .15s}
textarea{height:auto;min-height:104px;padding:var(--e2) var(--e3);resize:vertical;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:var(--linha-hover)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:var(--foco)}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--azul)}
input[type=color]{width:52px;padding:3px}
.invalido{border-color:var(--perigo)!important;box-shadow:0 0 0 3px rgba(180,35,24,.12)!important}
.msg-erro{display:flex;align-items:center;gap:6px;color:var(--perigo);font-size:var(--fs-sm);margin:6px 0 0;font-weight:500}
.msg-erro .ic{width:15px;height:15px}
label.check{flex-direction:row;align-items:center;gap:var(--e2);font-size:var(--fs-base);color:var(--texto);margin:var(--e1) 0}
:focus-visible{outline:none;box-shadow:var(--foco)}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:600;font-size:var(--fs-sm);height:38px;padding:0 var(--e4);border-radius:var(--raio);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn.primary{background:var(--azul-btn);color:#fff}
.btn.primary:hover{background:var(--azul-btn-hover)}
.btn.secondary,.btn:not(.primary):not(.ghost):not(.danger):not(.danger-solid){background:var(--papel);border-color:var(--linha-forte);color:var(--texto)}
.btn.secondary:hover,.btn:not(.primary):not(.ghost):not(.danger):not(.danger-solid):hover{background:var(--fundo);border-color:var(--linha-hover)}
.btn.ghost{background:transparent;color:var(--azul)}
.btn.ghost:hover{background:var(--azul-50)}
.btn.danger{background:var(--papel);border-color:var(--perigo-borda);color:var(--perigo)}
.btn.danger:hover{background:var(--perigo-bg)}
.btn.danger-solid{background:var(--perigo-solido);color:#fff}
.btn.sm{height:30px;padding:0 var(--e3);font-size:var(--fs-xs)}
.btn.sm .ic{width:15px;height:15px}
.btn.grande{height:44px;font-size:var(--fs-base)}
.btn.icone{width:38px;padding:0}
.btn:disabled{opacity:.45;cursor:default}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:var(--e4);background:linear-gradient(180deg,var(--azul-btn) 0 38%,var(--fundo) 38%)}
.login-box{background:var(--papel);width:100%;max-width:380px;padding:var(--e6);border-radius:var(--raio-lg);box-shadow:0 12px 32px rgba(16,24,40,.12);display:flex;flex-direction:column;gap:var(--e4)}
.lembrar{margin-top:calc(var(--e2) * -1)}
.login-marca{display:flex;gap:var(--e3);align-items:center;margin-bottom:var(--e2)}
.login-marca img{height:44px;width:auto}
.login-marca h1{font-size:var(--fs-lg);color:var(--azul)}
.login-marca p{margin:2px 0 0;font-size:var(--fs-sm)}

/* Topo */
.topo{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:var(--e5);height:60px;padding:0 var(--e5);background:var(--papel);border-bottom:1px solid var(--linha)}
.marca{display:flex;align-items:center;gap:6px;color:var(--azul);font-size:var(--fs-md)}
.marca img{height:28px;width:auto;margin-right:var(--e2)}
.marca strong{font-weight:700} .marca span{color:var(--texto-3);font-weight:500}
#menu{display:flex;gap:var(--e1);height:100%}
#menu button{display:flex;align-items:center;gap:var(--e2);height:100%;padding:0 var(--e3);border:0;background:none;font:inherit;font-weight:500;color:var(--texto-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
#menu button:hover{color:var(--texto)}
#menu button.ativo{color:var(--azul);border-bottom-color:var(--azul);font-weight:600}
.topo-dir{margin-left:auto;display:flex;align-items:center;gap:var(--e4)}
.ciclo{flex-direction:row;align-items:center;gap:var(--e2)}
.ciclo select{width:auto;height:34px;padding:0 var(--e2)}
#quem{display:flex;align-items:center;gap:var(--e2)}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--azul-100);color:var(--azul);font-weight:700;font-size:var(--fs-sm)}
.quem-txt{display:flex;flex-direction:column;line-height:1.2}
.quem-txt b{font-size:var(--fs-sm)} .quem-txt small{font-size:var(--fs-xs);color:var(--texto-3)}

/* Estrutura de página */
main{padding:var(--e5);max-width:1320px;margin:0 auto}
.painel{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:var(--e5);margin-bottom:var(--e4);box-shadow:var(--sombra)}
.painel>h3{margin-bottom:var(--e3)}
.cabecalho{display:flex;gap:var(--e4);flex-wrap:wrap;align-items:flex-end;margin-bottom:var(--e5)}
.cabecalho h2{flex:1;margin:0}
.painel .cabecalho{margin-bottom:var(--e4)}
.linha{display:flex;gap:var(--e3);flex-wrap:wrap;align-items:flex-end}
.linha>label{flex:1;min-width:140px}
.filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:var(--e3);align-items:end}
.filtros-sel{display:contents}
.acoes-form{display:flex;gap:var(--e2);margin-top:var(--e4);flex-wrap:wrap;align-items:center}
.bloco-form{border-top:1px solid var(--linha);margin-top:var(--e5);padding-top:var(--e4)}
.bloco-form h4{margin-top:0}
.vazio{padding:var(--e6);text-align:center;color:var(--texto-3)}
.ok-txt{display:flex;align-items:center;gap:var(--e2);color:var(--ok);font-weight:600;margin:0}

/* Selos de status */
.status,.tag,.selo{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:600;padding:2px var(--e2);border-radius:999px;white-space:nowrap;line-height:1.5}
.tag{background:var(--fundo);color:var(--texto-2);border:1px solid var(--linha)}
.tag-exc{background:var(--perigo-bg);color:var(--perigo);border-color:var(--perigo-borda)}
.st-pendente{background:var(--perigo-bg);color:var(--perigo)}
.st-parcial{background:var(--alerta-bg);color:var(--alerta)}
.st-completo{background:var(--ok-bg);color:var(--ok)}
.selo i{width:7px;height:7px;border-radius:50%;background:currentColor}
.s-boa{background:var(--ok-bg);color:var(--ok)} .s-alerta{background:var(--alerta-bg);color:var(--alerta)}
.s-critica{background:var(--perigo-bg);color:var(--perigo)} .s-sem{background:var(--fundo);color:var(--texto-3)}

/* Barras de alerta */
.alerta-barra{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;padding:var(--e3) var(--e4);border-radius:var(--raio);margin-bottom:var(--e4);background:var(--azul-50);border:1px solid var(--azul-100);font-size:var(--fs-base)}
.alerta-barra>span:first-of-type{flex:1}
.alerta-barra .ic{color:var(--azul)}
.alerta-barra.ok{background:var(--ok-bg);border-color:var(--ok-borda)}
.alerta-barra.excecao{background:var(--perigo-bg);border-color:var(--perigo-borda)}
.alerta-barra.excecao .ic{color:var(--perigo)}

/* Cards de saúde */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e4);margin-bottom:var(--e4)}
@media (min-width:901px){.cards:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}
.cd-card{font:inherit;color:inherit;text-align:left;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-lg);padding:var(--e4) var(--e5);box-shadow:var(--sombra);cursor:pointer;display:flex;flex-direction:column;gap:var(--e3);transition:border-color .15s,box-shadow .15s}
.cd-card:disabled{cursor:default}
.cd-card:not(:disabled):hover{border-color:var(--linha-forte)}
.cd-card.sel{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.cd-card header{display:flex;justify-content:space-between;align-items:center;gap:var(--e2)}
.cd-card header b{font-size:var(--fs-md)}
.cd-card .selo{align-self:flex-start}
.cob{display:flex;align-items:baseline;gap:var(--e2)}
.cob b{font-size:var(--fs-xl);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.cob span{font-size:var(--fs-sm);color:var(--texto-3)}
.cd-card dl{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2);margin:0;padding-top:var(--e3);border-top:1px solid var(--linha)}
.cd-card dt{font-size:var(--fs-xs);color:var(--texto-3);white-space:nowrap}
.cd-card dd{margin:0;font-size:var(--fs-md);font-weight:600;font-variant-numeric:tabular-nums}
.trilho{background:var(--fundo);height:6px;border-radius:3px;overflow:hidden}
.enche{background:var(--azul);height:100%;border-radius:3px}

/* Nine-Box */
.ninebox{display:grid;grid-template-columns:18px 44px repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(116px,auto)) 22px 22px;gap:var(--e2)}
.ninebox .box{grid-column:auto}
.eixo-y{grid-column:1;grid-row:1/4;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.eixo-x{grid-column:3/6;grid-row:5;text-align:center;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3);align-self:center}
.marca-y{grid-column:2;align-self:center;text-align:right;font-size:var(--fs-xs);color:var(--texto-3);padding-right:2px}
.marca-x{grid-row:4;text-align:center;font-size:var(--fs-xs);color:var(--texto-3);align-self:center}
.legenda-nb{margin-top:var(--e4);border:1px solid var(--linha);border-radius:var(--raio);background:var(--fundo)}
.legenda-nb summary{display:flex;align-items:center;gap:var(--e2);cursor:pointer;padding:var(--e3) var(--e4);font-weight:600;font-size:var(--fs-sm);color:var(--azul);list-style:none}
.legenda-nb summary::-webkit-details-marker{display:none}
.legenda-nb summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.legenda-nb[open] summary::after{transform:rotate(225deg)}
.legenda-corpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--e3) var(--e5);padding:0 var(--e4) var(--e4)}
.legenda-corpo>p{grid-column:1/-1;margin:0}
.leg-item>b{display:block;font-size:var(--fs-sm);margin-bottom:2px}
.leg-item p{margin:0;font-size:var(--fs-sm);color:var(--texto-2)}
.faixas{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm);color:var(--texto-2)}
.faixas span{display:flex;align-items:center;gap:var(--e2)}
.faixas i{width:10px;height:10px;border-radius:2px;border:1px solid var(--linha-forte)}
.faixas .f1{background:var(--papel)} .faixas .f2{background:var(--azul-100)} .faixas .f3{background:var(--azul)}
.box{border:1px solid var(--borda-suave);border-radius:var(--raio);padding:var(--e3) var(--e4);display:flex;flex-direction:column;gap:2px;cursor:pointer;text-align:left;font:inherit;color:var(--texto);transition:box-shadow .15s,border-color .15s}
.box:hover{border-color:var(--azul)}
.box.sel{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.box .qt{font-size:var(--fs-xl);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.box .nome-q{font-weight:600;font-size:var(--fs-sm);display:flex;align-items:center}
.box .pct{font-size:var(--fs-xs);color:var(--texto-3)}
.quadro-lista{margin-top:var(--e5);border-top:1px solid var(--linha);padding-top:var(--e4)}
.quadro-lista h3{margin-bottom:2px}

.nb-cab{align-items:flex-end;margin-bottom:var(--e4)!important}
.nb-filtros{display:flex;gap:var(--e2);align-items:flex-end;flex-wrap:wrap}
.nb-filtros label{min-width:170px}
.nb-filtros select{height:34px;font-size:var(--fs-sm)}
@media (max-width:700px){.nb-filtros{width:100%}.nb-filtros label{flex:1;min-width:0}}

/* Tabelas */
.tabela-wrap{overflow-x:auto;margin:0 calc(var(--e2) * -1)}
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--texto-3);text-align:left;padding:var(--e2) var(--e2) var(--e2);border-bottom:1px solid var(--linha);white-space:nowrap}
td{padding:var(--e3) var(--e2);border-bottom:1px solid var(--linha);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clicavel{cursor:pointer}
tbody tr.clicavel:hover td{background:var(--hover)}
td.acoes{white-space:nowrap;text-align:right}
td.acoes .btn+.btn{margin-left:var(--e1)}
td.ordem{white-space:nowrap;width:1%}
td input,td select{min-width:110px;height:34px}
.tab-ficha{table-layout:fixed}
.tab-ficha td:nth-child(1){width:38%} .tab-ficha td:nth-child(2){width:18%} .tab-ficha td:nth-child(3){width:20%}

/* Avaliação */
.aval{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--e4);align-items:start}
.legenda{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e3);font-size:var(--fs-xs);color:var(--texto-3);margin:var(--e2) 0 0}
.legenda b{color:var(--texto-2)}
.marca-ant{display:flex;gap:var(--e2);align-items:flex-start;font-size:var(--fs-sm);color:var(--texto-2);background:var(--fundo);border-radius:var(--raio);padding:var(--e2) var(--e3);margin:var(--e3) 0 0}
.marca-ant .ic{color:var(--texto-3);margin-top:1px}
.aval .painel>h3{margin-top:var(--e4);margin-bottom:0;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--texto-3)}
.aval .painel>h3:first-child{margin-top:0;font-size:var(--fs-md);text-transform:none;letter-spacing:0;color:var(--texto)}
.comp{padding:var(--e3) 0;border-bottom:1px solid var(--linha)}
.comp.falta{background:var(--perigo-bg);margin:0 calc(var(--e3) * -1);padding:var(--e3);border-radius:var(--raio);border-bottom-color:transparent}
.comp-top{display:flex;justify-content:space-between;align-items:center;gap:var(--e3);flex-wrap:wrap}
.comp-nome{font-weight:600}
.estrelas{display:inline-flex;flex-direction:row-reverse}
.estrelas input{position:absolute;opacity:0;width:1px;height:1px}
.estrelas label{cursor:pointer;padding:2px;color:var(--estrela-vazia);display:flex}
.estrelas .ic{width:26px;height:26px;fill:currentColor;stroke:none}
.estrelas label.ant{color:var(--estrela-ant)}
.estrelas input:checked~label,.estrelas label:hover,.estrelas label:hover~label{color:var(--estrela)}
.estrelas input:focus-visible+label{box-shadow:var(--foco);border-radius:4px}
.est-ro{display:inline-flex;gap:1px;vertical-align:middle}
.est-ro .ic{width:15px;height:15px;fill:var(--estrela-vazia);stroke:none}
.est-ro .ic.on{fill:var(--estrela)}
.obs-wrap{position:relative;margin-top:var(--e2)}
.obs-wrap input{padding-right:3.75rem;font-size:var(--fs-sm);height:36px}
.obs-wrap input::placeholder{font-style:italic}
.obs-wrap small{position:absolute;right:var(--e3);top:50%;transform:translateY(-50%);color:var(--texto-3);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.resultado{display:flex;gap:var(--e4);flex-wrap:wrap;align-items:center;background:var(--azul-50);border-radius:var(--raio);padding:var(--e3) var(--e4);margin-top:var(--e4);font-size:var(--fs-sm)}
.resultado b{color:var(--azul);font-size:var(--fs-base)}
.ajuste{margin-top:var(--e3)}
.fb label{margin-bottom:var(--e4)}
.limites{background:var(--fundo);border-radius:var(--raio);padding:var(--e3) var(--e4);margin-top:var(--e2)}
.texto{white-space:pre-wrap;margin:0 0 var(--e3);color:var(--texto)}

/* Configurações */
.subabas{display:flex;gap:var(--e1);flex-wrap:wrap;margin-bottom:var(--e5);border-bottom:1px solid var(--linha)}
.subabas button{font:inherit;font-weight:500;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:var(--e2) var(--e3);color:var(--texto-2);cursor:pointer}
.subabas button.ativo{color:var(--azul);border-bottom-color:var(--azul);font-weight:600}
.nb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e2)}
.nb-edit{border-radius:var(--raio);padding:var(--e3);display:flex;flex-direction:column;gap:var(--e2);border:1px solid var(--borda-suave)}

.badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--perigo);color:#fff;font-size:11px;font-weight:700;line-height:1;margin-left:2px}
#menu button{position:relative}
optgroup{font-style:normal;font-weight:600;color:var(--texto-3)}

/* Prévia da importação */
.previa{margin-top:var(--e4);border:1px solid var(--linha);border-radius:var(--raio);padding:var(--e4);background:var(--fundo)}
.prev-topo{display:flex;justify-content:space-between;gap:var(--e3);flex-wrap:wrap;margin-bottom:var(--e3)}
.prev-num{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e2);margin-bottom:var(--e3)}
.prev-num div{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);padding:var(--e2) var(--e3)}
.prev-num b{display:block;font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.prev-num span{font-size:var(--fs-xs);color:var(--texto-3)}
.prev-num .ruim b{color:var(--perigo)}
.prev-bloco{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);margin-top:var(--e2)}
.prev-bloco summary{cursor:pointer;padding:var(--e2) var(--e3);font-weight:600;font-size:var(--fs-sm)}
.prev-bloco ul{margin:0;padding:0 var(--e4) var(--e3) var(--e6);font-size:var(--fs-sm);max-height:280px;overflow:auto}
.prev-bloco li{padding:2px 0}
.prev-bloco s{color:var(--texto-3)}

/* Diálogos e toast */
.dlg{border:0;border-radius:var(--raio-lg);padding:var(--e5);width:min(440px,92vw);box-shadow:0 20px 48px rgba(16,24,40,.22);color:var(--texto);background:var(--papel)}
.dlg::backdrop{background:rgba(23,32,51,.45)}
.dlg h3{margin-bottom:var(--e2)}
.conf-msg{font-size:var(--fs-base);margin:0}
.dlg-conf .acoes-form{justify-content:flex-end;margin-top:var(--e5)}
.pdf-lista{display:flex;flex-direction:column;gap:var(--e1);margin:var(--e3) 0;max-height:40vh;overflow:auto}
.pdf-item{flex-direction:row;align-items:center;gap:var(--e2);font-size:var(--fs-base);color:var(--texto);padding:var(--e2);border-radius:var(--raio)}
.pdf-item:hover{background:var(--fundo)}
.toast{position:fixed;bottom:var(--e5);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:var(--e2);background:var(--toast);color:#fff;padding:var(--e3) var(--e4);border-radius:var(--raio);box-shadow:0 8px 24px rgba(16,24,40,.24);z-index:30;font-size:var(--fs-sm);max-width:92vw}
.toast.ok .ic{color:#7FD3A7} .toast.erro .ic{color:#FF9C8F}

/* Textos longos sem espaço quebram dentro do quadro */
.texto,.f-fb p,.f-obs,.marca-ant,.aval>*{overflow-wrap:anywhere;word-break:break-word;min-width:0}
/* células de tabela quebram só entre palavras (nunca "Caram-bei"); texto sem espaço muito longo ainda quebra */
td{overflow-wrap:break-word}
/* tabelas largas: rolam para o lado em vez de espremer as colunas */
.tab-colab{min-width:1120px} .tab-real{min-width:900px} .tab-fila{min-width:720px}
.tab-colab td:nth-child(1){min-width:170px} .tab-colab td:nth-child(4){min-width:160px} .tab-colab td:nth-child(6){min-width:170px}
.tab-colab td:nth-child(7),.tab-real td:nth-child(6){white-space:nowrap}
.tab-colab td:nth-child(2),.tab-colab td:nth-child(3),.tab-colab td:nth-child(5),.tab-colab td:nth-child(8),
.tab-real td:nth-child(1),.tab-real td:nth-child(3),.tab-fila td:nth-child(2),.tab-fila td:nth-child(4){white-space:nowrap}

/* Impressão (só aparece ao imprimir) */
#impressao{display:none}
@page{size:A4;margin:14mm}
@media print{
  :root[data-tema]{color-scheme:light;--azul:#003DA5;--estrela:#E3A21A;--estrela-vazia:#D5DBE4;--papel:#fff;--texto:#111;--texto-3:#718096}
  body{background:#fff;font-size:10.5pt}
  body>*:not(#impressao){display:none!important}
  #impressao{display:block}
  .folha{page-break-after:always;break-after:page;color:#111}
  .folha:last-child{page-break-after:auto;break-after:auto}
  .f-topo{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--azul);padding-bottom:5pt;margin-bottom:12pt;color:var(--azul);font-size:9pt}
  .f-marca{display:flex;align-items:center;gap:6pt;font-weight:700;font-size:10.5pt}
  .f-marca img{height:22pt;width:auto}
  .folha h1{font-size:17pt;color:#111;margin:0 0 6pt}
  .folha h2{font-size:10pt;margin:14pt 0 4pt;color:var(--azul);text-transform:uppercase;letter-spacing:.05em}
  .folha h3{font-size:9.5pt;margin:7pt 0 2pt}
  .folha p{margin:0 0 4pt}
  .folha table{width:100%;border-collapse:collapse;font-size:9pt}
  .f-dados td{border:0;padding:2pt 0}
  .f-res{display:flex;gap:16pt;background:#EEF3FB;border-radius:4pt;padding:6pt 9pt;margin:8pt 0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .f-comp{table-layout:fixed}
  .f-comp th,.f-comp td{border-bottom:1px solid #D5DBE4;padding:3.5pt 4pt;vertical-align:top;text-transform:none;letter-spacing:0;font-size:9pt}
  .f-comp th{color:#555;font-weight:600}
  .f-comp th:nth-child(1){width:30%} .f-comp th:nth-child(2){width:14%} .f-comp th:nth-child(3){width:20%}
  .f-comp tr{break-inside:avoid}
  .folha .est-ro .ic{width:10pt;height:10pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .f-fb{break-inside:avoid}
  .f-ass{display:flex;gap:30pt;margin-top:36pt;break-inside:avoid}
  .f-ass div{flex:1;border-top:1px solid #111;padding-top:3pt;text-align:center;font-size:9pt}
  .f-rodape{margin-top:14pt;font-size:7.5pt;color:#777}
}

/* Responsivo */
@media (max-width:1100px){
  .quem-txt{display:none}
  #menu button{padding:0 var(--e2)}
}
@media (max-width:900px){
  .aval{grid-template-columns:minmax(0,1fr)}
}
/* Celular: menu vira barra inferior, como nos aplicativos */
@media (max-width:700px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .topo{height:56px;gap:var(--e3);padding:0 var(--e4)}
  .marca span{display:none}
  #menu{position:fixed;left:0;right:0;bottom:0;height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--papel);border-top:1px solid var(--linha);z-index:20;gap:0}
  #menu button{flex:1;flex-direction:column;justify-content:center;gap:2px;font-size:11px;border-bottom:0;border-top:2px solid transparent;margin:0;padding:0}
  #menu button.ativo{border-top-color:var(--azul)}
  #menu button .ic{width:22px;height:22px}
  .topo-dir{gap:var(--e2)}
  .ciclo{font-size:0} .ciclo select{font-size:var(--fs-sm)}
  main{padding:var(--e4)}
  .painel{padding:var(--e4)}
  .cabecalho{margin-bottom:var(--e4)}
  .ninebox{grid-template-columns:12px 30px repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(92px,auto)) 20px 20px;gap:6px}
  .marca-x,.marca-y{font-size:10px}
  .box{padding:var(--e2)}
  .box .qt{font-size:var(--fs-lg)}
  .box .nome-q{font-size:11px;hyphens:auto;overflow-wrap:anywhere;flex-wrap:wrap}
  .box .ic-at{width:12px;height:12px;margin-right:2px}
  .nb-grid{grid-template-columns:1fr}
  .filtros{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2)}
  .painel .cabecalho{flex-direction:column;align-items:stretch;gap:var(--e3)}
  .filtros>label:first-child{grid-column:1/-1}
  .filtros select{font-size:var(--fs-sm);padding:0 var(--e2)}
  .prev-num{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cabecalho>.muted.small{display:none}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e2)}
  .cd-card{padding:var(--e3);gap:var(--e2)}
  .cd-card header b{font-size:var(--fs-base)}
  .cd-card header .tag{display:none}
  .cob{flex-direction:column;gap:0}
  .cob b{font-size:var(--fs-lg)}
  .cob span{font-size:var(--fs-xs)}
  .cd-card dl{gap:var(--e1);padding-top:var(--e2)}
  .cd-card dt{font-size:10px;white-space:normal;line-height:1.2}
  .cd-card dd{font-size:var(--fs-base)}
  .estrelas .ic{width:32px;height:32px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
  .login{background:var(--fundo)}
  .login-box{padding:var(--e5)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Versão online: carregamento e gravação */
.carregando{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--e3);background:color-mix(in srgb,var(--fundo) 85%,transparent);font-weight:600;color:var(--texto-2)}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--linha);border-top-color:var(--azul);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
body.salvando .topo::after{content:'Salvando…';position:absolute;right:var(--e5);bottom:-22px;font-size:var(--fs-xs);color:var(--texto-3)}
.conf-msg{white-space:pre-line;max-height:60vh;overflow:auto}