*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#EEF1EC;color:#1B1F3B;
     font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
     font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
table{border-collapse:collapse}
button{font:inherit;color:inherit}
/* #45962E media 3,7:1 e reprovava; sublinhado para nao depender so da cor. */
a{color:#2F6E1F;text-decoration:underline}
a:hover{color:#255819}
.tnum{font-variant-numeric:tabular-nums}
@keyframes dashfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dashfade{animation:dashfade .3s ease}

/* ── Foco visível ──────────────────────────────────────────────────────────
   Sem isto, quem navega por teclado não sabe onde está. */
:focus-visible{outline:2px solid #1E2266;outline-offset:2px;border-radius:6px}
header :focus-visible{outline:2px solid #fff;outline-offset:2px}
[data-busca]:focus{outline:2px solid #1E2266;outline-offset:1px;border-color:#1E2266}

/* ── Estados de mouse ──────────────────────────────────────────────────────
   Num painel desktop, hover é o principal sinal de que algo é clicável.
   O destaque de linha inteira evita clicar no cliente errado numa tabela larga. */
tr[data-cli]{transition:background .12s}
tr[data-cli]:hover td{background:#F5F7F3}
tr[data-cli]:focus-within td{background:#EEF1FB}
[data-tab]:hover,[data-mes]:hover,[data-ord]:hover,[data-limpar]:hover,
[data-acesso]:hover,[data-importar]:hover,[data-confirmar-imp]:hover,
[data-fechar-cli]:hover,[data-fechar-imp]:hover,[data-sair]:hover{filter:brightness(.94)}
[data-tab]:active,[data-mes]:active,[data-acesso]:active,[data-importar]:active{transform:translateY(1px)}

/* Botão ocupado precisa parecer ocupado. */
button[disabled]{opacity:.55;cursor:progress;filter:saturate(.6)}

/* Tela de login (spec §4.2): botão tinta -> hover preto; secundário sutil. */
.btn-login{transition:background .15s}
.btn-login:hover{background:#000}
.btn-login-sec:hover{background:#F7F5F0}

/* Tela de Módulos (spec §4.2). */
.card-modulo{transition:border-color .15s,transform .15s,box-shadow .15s}
.card-modulo:hover{border-color:#F5C518!important;transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(35,32,28,.08)!important}
.hbtn{transition:background .15s}
.hbtn:hover{background:#F4F2EC}
@media(max-width:720px){.cards-modulos{grid-template-columns:1fr!important}}

/* Tela de Carga — semáforo (spec §4.2/§4.3). */
.top{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap;margin-bottom:18px}
.semaforo{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid #E7E3DB;
  border-radius:16px;padding:18px 22px;flex:1;min-width:320px}
.lights{display:flex;flex-direction:column;gap:9px;background:#23201C;border-radius:14px;padding:12px}
.lt{width:34px;height:34px;border-radius:50%;transition:opacity .2s,box-shadow .2s}
.lt.r{background:#C8102E}.lt.y{background:#E0852A}.lt.g{background:#1C8A5B}
.lt.off{opacity:.16}
.lt.on.r{box-shadow:0 0 0 4px rgba(200,16,46,.25),0 0 18px rgba(200,16,46,.6)}
.lt.on.y{box-shadow:0 0 0 4px rgba(224,133,42,.25),0 0 18px rgba(224,133,42,.6)}
.lt.on.g{box-shadow:0 0 0 4px rgba(28,138,91,.25),0 0 18px rgba(28,138,91,.6)}
.st-txt .big{font-family:'Archivo',sans-serif;font-weight:800;font-size:22px}
.st-txt .msg{font-size:13px;color:#46423B;margin-top:3px;max-width:420px;line-height:1.4}
.st-txt .ts{font-size:11px;color:#A39E94;margin-top:8px}
.cards2{display:flex;flex-direction:column;gap:12px;min-width:240px}
.dcard{background:#fff;border:1px solid #E7E3DB;border-radius:14px;padding:14px 16px}
.dcard .k{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#807A6F}
.dcard .v{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;color:#23201C;margin-top:3px;
  font-variant-numeric:tabular-nums}
.dcard .s{font-size:11px;color:#8A857C;margin-top:1px}

/* ── Link de pulo (só aparece ao receber foco) ─────────────────────────── */
.pular{position:absolute;left:-9999px}
.pular:focus{position:fixed;left:8px;top:8px;z-index:999;background:#fff;color:#1B1F3B;
             padding:10px 16px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.25)}

/* ── Responsividade ───────────────────────────────────────────────────────
   Em CSS e não em JS: sem salto ao redimensionar e correto na impressão. */
@media (max-width:1119px){ .grid2{grid-template-columns:1fr!important} }
@media (max-width:1039px){ .grid3{grid-template-columns:repeat(2,1fr)!important} }
@media (max-width:719px){  .grid3{grid-template-columns:1fr!important} }
@media print{
  .grid2,.grid3{grid-template-columns:1fr!important}
  [data-sticky]{position:static!important}
  .pular{display:none}
}

/* ── Movimento reduzido ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .dashfade{animation:none}
  *{transition-duration:.01ms!important}
}