/* =====================================================================
   FINANCEIRO SAD · v001 · identidade visual
   Mesmo molde da Escala SAD (identidade v156): barra azul-escura no topo,
   Calibri Light, cartões claros com borda fina, PDF/impressão sem a barra.
   ===================================================================== */
@font-face{font-family:"Lato";font-weight:300;src:url(app/lato-300.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lato";font-weight:400;src:url(app/lato-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Lato";font-weight:700;src:url(app/lato-700.woff2) format("woff2");font-display:swap}
:root{
  --nv-950:#081831;--nv-900:#0C2142;--nv-800:#12305C;--nv-700:#1B4078;--nv-600:#27548F;
  --acc:#2F6FED;--acc-2:#E8EFFD;--line:#E3E9F2;--bg:#F2F5FA;--ink:#14233D;--muted:#5F6E85;
  --ok:#1F7A4A;--ok-bg:#E3F3E9;--alerta:#A15C00;--alerta-bg:#FDF1DC;--erro:#B42318;--erro-bg:#FBE6E6;
  --tbh:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:"Calibri Light",Calibri,"Lato",Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.4}
button,input,select,textarea{font:inherit;color:inherit}
.oculto{display:none!important}

/* ---------- barra superior ---------- */
.topo{position:fixed;top:0;left:0;right:0;height:var(--tbh);z-index:200;display:flex;align-items:center;gap:6px;padding:0 14px 0 16px;
  background:linear-gradient(90deg,var(--nv-950),var(--nv-900) 55%,var(--nv-800));color:#C9D6EA;box-shadow:0 2px 10px rgba(8,24,49,.25)}
.marca{display:flex;align-items:center;gap:10px;margin-right:10px;flex:none;color:#fff;text-decoration:none}
.marca img{height:26px;display:block}
.marca span{font-size:16px;font-weight:400;letter-spacing:.2px}
.menu{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{flex:none;display:inline-flex;align-items:center;height:36px;padding:0 11px;border-radius:8px;color:#C9D6EA;font-size:12.5px;font-weight:700;
  letter-spacing:.35px;text-decoration:none;white-space:nowrap;text-transform:uppercase}
.menu a:hover{background:rgba(255,255,255,.08);color:#fff}
.menu a.ativa{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 -2px 0 #8FB3FF}
.usuario{flex:none;display:flex;align-items:center;gap:8px;font-size:12.5px}
.usuario .ini{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--nv-900);font-weight:700;font-size:12.5px}
.modo-teste{flex:none;font-size:11px;font-weight:700;letter-spacing:.4px;color:#1B1300;background:#F59E0B;border-radius:99px;padding:3px 9px;margin-right:4px}
.abre-menu{display:none;flex:none;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}

/* ---------- conteúdo ---------- */
main{position:fixed;top:var(--tbh);left:0;right:0;bottom:0;overflow:auto;padding:22px 30px 48px}
.modulo{max-width:1400px;margin:0 auto}
.cab{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.cab h1{font-size:23px;margin:0;color:var(--nv-900);letter-spacing:.2px;font-weight:700;text-transform:uppercase;font-weight:300}
.cab .esp{flex:1}
.pilula{display:inline-flex;align-items:center;gap:6px;background:var(--acc-2);color:var(--nv-800);border-radius:99px;font-size:12px;font-weight:700;padding:6px 12px;white-space:nowrap}
.pilula.ok{background:var(--ok-bg);color:var(--ok)}
.pilula.alerta{background:var(--alerta-bg);color:var(--alerta)}
.pilula.erro{background:var(--erro-bg);color:var(--erro)}
.botao{border-radius:9px;border:1px solid #C8D4E6;background:#fff;color:var(--nv-800);font-weight:700;font-size:12.5px;padding:8px 13px;cursor:pointer;line-height:1.1;white-space:nowrap}
.botao:hover{background:#F2F6FD;border-color:#9FB5D6}
.botao.forte{background:var(--nv-900);border-color:var(--nv-900);color:#fff}
.botao.forte:hover{background:var(--nv-800)}
.botao:disabled{opacity:.5;cursor:default}
select.comp{border-radius:9px;border:1px solid #C8D4E6;background:#fff;color:var(--nv-900);font-weight:700;font-size:13px;padding:8px 10px;max-width:100%}

.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.cartao{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:0 1px 2px rgba(20,40,75,.05);min-width:0}
.cartao .k{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.2px}
.cartao .v{font-size:21px;color:var(--nv-900);font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartao .d{font-size:12px;color:var(--muted);margin-top:2px}
.painel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(20,40,75,.05);margin-bottom:18px;overflow:hidden}
.painel>h2{font-size:14px;margin:0;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--nv-800);letter-spacing:.3px;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.painel>h2 small{font-weight:400;text-transform:none;color:var(--muted);letter-spacing:0}
.painel .corpo{padding:14px 16px}
.nota{font-size:13px;color:var(--muted);margin:0 0 12px}

/* ---------- grade de lançamento (vira cartões no celular) ---------- */
.rolar{overflow-x:auto}
table.grade{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.grade th,.grade td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.grade th{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.3px;text-transform:uppercase;background:#F7F9FC;position:sticky;top:0;z-index:1}
.grade th:first-child,.grade td:first-child{text-align:left;position:sticky;left:0;background:#fff;z-index:2;white-space:normal;min-width:150px}
.grade th:first-child{background:#F7F9FC;z-index:3}
.grade tr.total td{font-weight:700;background:#F7F9FC;border-top:2px solid var(--line)}
.grade tr.total td:first-child{background:#F7F9FC}
.grade td.forte{font-weight:700;color:var(--nv-900)}
.grade td.neg{color:var(--erro)}
.grade input{width:110px;border:1px solid transparent;border-radius:7px;background:#F4F7FB;padding:6px 8px;text-align:right;font-variant-numeric:tabular-nums;font-size:14px}
.grade input.curto{width:70px}
.grade input:focus{outline:2px solid #9bb6f5;background:#fff;border-color:var(--acc)}
.grade input:disabled{background:transparent;color:var(--ink)}
.grade select{border:1px solid #D5DEEA;border-radius:7px;background:#fff;padding:5px 6px}

.verif{display:grid;gap:8px}
.verif .item{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:start;padding:10px 12px;border-radius:10px;background:#F7F9FC}
.verif .item .ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff}
.verif .item.ok .ic{background:var(--ok)}.verif .item.alerta .ic{background:#D98A00}.verif .item.erro .ic{background:var(--erro)}
.verif .item b{display:block;font-size:14px}
.verif .item span{font-size:13px;color:var(--muted)}
.verif .item .val{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

.lista-comp{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.lista-comp a{display:block;text-decoration:none;color:inherit;background:#F7F9FC;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.lista-comp a:hover{border-color:#9FB5D6}
.lista-comp a.atual{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-2)}
.lista-comp b{display:block;color:var(--nv-900)}
.lista-comp span{font-size:12.5px;color:var(--muted)}

.aviso-barra{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--nv-900);color:#fff;border-radius:10px;padding:10px 16px;font-size:13.5px;z-index:300;box-shadow:0 10px 30px rgba(8,24,49,.3);max-width:calc(100vw - 32px)}
.vazio{padding:28px;text-align:center;color:var(--muted)}

/* ---------- iPad em pé e celular ---------- */
@media (max-width:1100px){
  main{padding:18px 18px 40px}
}
@media (max-width:900px){
  .abre-menu{display:grid;place-items:center}
  .marca span{display:none}
  .menu{position:fixed;top:var(--tbh);left:0;bottom:0;width:min(86vw,320px);flex-direction:column;align-items:stretch;gap:2px;padding:12px;
    background:var(--nv-950);overflow-y:auto;transform:translateX(-102%);transition:transform .2s ease;z-index:250}
  body.menu-aberto .menu{transform:none;box-shadow:12px 0 30px rgba(8,24,49,.4)}
  .menu a{height:auto;min-height:46px;font-size:14px}
  .usuario .nome{display:none}
}
@media (max-width:700px){
  main{padding:14px 12px 40px}
  .cab h1{font-size:19px;width:100%}
  .cartoes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cartao .v{font-size:17px}
  /* tabela vira cartões: uma linha = um cartão, cada coluna com o seu nome */
  .rolar{overflow:visible}
  table.grade,table.grade tbody,table.grade tr,table.grade td{display:block;width:100%}
  table.grade thead{display:none}
  table.grade tr{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;padding:6px 10px 8px;background:#fff}
  table.grade tr.total{background:#F7F9FC}
  .grade td{display:flex!important;justify-content:space-between;align-items:center;gap:10px;border:0;padding:5px 0;position:static!important;white-space:normal;min-width:0!important;text-align:right}
  .grade td::before{content:attr(data-r);font-size:12.5px;color:var(--muted);font-weight:700;text-align:left}
  .grade td:first-child{font-weight:700;font-size:15px;color:var(--nv-900);border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:3px;background:transparent!important}
  .grade td:first-child::before{content:none}
  .grade td:empty{display:none!important}
  .grade input{width:132px;font-size:16px}
  .grade input.curto{width:90px}
  .painel .corpo{padding:12px}
}
@media print{
  .topo,.botao,select.comp{display:none!important}
  main{position:static;overflow:visible;padding:0}
  .grade input{border:0;background:transparent}
}

/* =====================================================================
   v002 · últimas regras de layout da Escala SAD (v241, relevo.css v204–v212), só na tela:
   - barra gelo com o S azul grande e FINANCEIRO em letra fina; opções da barra como botões acetinados separados;
   - iPad deitado e telas até 1365px: barra em duas linhas (logo em cima, opções embaixo);
   - fundo cinza-azulado, cartões em relevo macio com luz de cima, campos em baixo-relevo;
   - títulos em CAIXA ALTA com letra fina e espaçada, números grandes em letra fina;
   - Lato hospedada como reserva da Calibri Light (o iPhone não tem Calibri); campos com 16px no celular.
   ===================================================================== */
@font-face{font-family:"SAD Texto";font-weight:300;font-display:swap;src:url(app/lato-300.woff2) format("woff2")}
@font-face{font-family:"SAD Texto";font-weight:400;font-display:swap;src:url(app/lato-400.woff2) format("woff2")}
@font-face{font-family:"SAD Texto";font-weight:600 700;font-display:swap;src:url(app/lato-700.woff2) format("woff2")}
@font-face{font-family:"SAD Texto";font-weight:800 900;font-display:swap;src:url(app/lato-900.woff2) format("woff2")}
@media screen{
:root{--bg:#E6EBF3;--ink:#0B1B33;--line:rgba(150,165,190,.28);--tbh:64px;
 --relevo:linear-gradient(180deg,#F5F8FC 0%,#E8EDF5 30%,#DEE4EE 100%);
 --nm-r:0 1px 1px rgba(12,33,66,.07),0 6px 14px -6px rgba(12,33,66,.20),-5px -5px 12px -4px rgba(255,255,255,.95),inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 .75px rgba(140,156,184,.42);
 --nm-s:0 1px 1px rgba(12,33,66,.08),0 4px 9px -4px rgba(12,33,66,.22),-3px -3px 8px -3px rgba(255,255,255,.95),inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 .75px rgba(140,156,184,.45);
 --nm-i:inset 0 1.5px 3px rgba(12,33,66,.14),inset 0 -1px 0 rgba(255,255,255,.9),inset 0 0 0 .5px rgba(150,165,190,.35);
 --cetim:linear-gradient(180deg,#FFFFFF 0%,#F3F6FA 48%,#E6EBF2 52%,#EDF1F6 100%);
 --cetim-borda:#FFFFFF #C9D2DE #AEB9C9 #C9D2DE;
 --cetim-sombra:inset 0 1px 0 #fff,0 1px 1px rgba(12,33,66,.12),0 4px 8px -3px rgba(12,33,66,.25);
 --marinho:linear-gradient(180deg,#3B5F98 0%,#1E4178 48%,#12305C 52%,#0E2750 100%);
 --marinho-borda:#4A6EA8 #0C2142 #061430 #0C2142;
 --marinho-sombra:inset 0 1px 0 rgba(255,255,255,.3),0 1px 1px rgba(8,24,49,.3),0 4px 8px -3px rgba(8,24,49,.5)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,button,input,select,textarea{font-family:"Calibri Light",Calibri,"SAD Texto",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--ink)}

/* barra gelo */
.topo{background:linear-gradient(180deg,#FBFCFE 0%,#EEF2F7 55%,#E4E9F1 100%);color:#24406B;border-bottom:1px solid #C3CCD9;box-shadow:inset 0 1px 0 #fff,0 6px 16px -10px rgba(12,33,66,.35);gap:10px}
.marca{color:#0C2142;gap:8px}
.marca img{content:url("app/simbolo-azul.svg");height:38px}
.marca span{font-size:19px;font-weight:300;letter-spacing:.12em;text-transform:uppercase;color:#0C2142}
.menu{gap:7px;padding:0 4px;align-items:center}
.menu a{height:34px;padding:0 12px;border-radius:11px;font-size:12.5px;font-weight:400;letter-spacing:.06em;color:#24406B;
  background:var(--cetim);border:1px solid;border-color:var(--cetim-borda);box-shadow:var(--cetim-sombra)}
.menu a:hover{background:linear-gradient(180deg,#FFFFFF 0%,#F7F9FC 48%,#ECF0F6 52%,#F2F5F9 100%);color:#0C2142}
.menu a:active{background:linear-gradient(180deg,#DCE2EB 0%,#E6EBF2 50%,#EDF1F6 100%);border-color:#AEB9C9 #C9D2DE #FFFFFF #C9D2DE;box-shadow:inset 0 2px 4px rgba(12,33,66,.22);transform:translateY(1px)}
.menu a.ativa{background:var(--marinho);border-color:var(--marinho-borda);box-shadow:var(--marinho-sombra);color:#fff;font-weight:600}
.usuario{color:#24406B}
.usuario .ini{background:var(--marinho);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 5px -1px rgba(8,24,49,.45)}
.abre-menu{background:var(--cetim);border:1px solid;border-color:var(--cetim-borda);box-shadow:var(--cetim-sombra);color:#0C2142}

/* conteúdo em relevo */
.cab h1{font-weight:300;font-size:27px;letter-spacing:.1em;color:var(--ink)}
.cartao,.painel{background:var(--relevo);border-color:transparent;border-radius:20px;box-shadow:var(--nm-r)}
.cartao .v{font-weight:300;font-size:24px;color:var(--ink)}
.painel>h2{border-bottom-color:var(--line);font-weight:600;letter-spacing:.08em}
.grade th,.grade th:first-child,.grade tr.total td,.grade tr.total td:first-child{background:transparent}
.grade thead tr{box-shadow:inset 0 -1px 0 rgba(150,165,190,.3),0 1px 0 #fff}
.grade td{border-bottom-color:var(--line)}
.grade td:first-child{background:#E9EEF5}
.grade tr.total td{border-top-color:rgba(150,165,190,.45)}
.grade input,select.comp,.grade select{background:var(--bg);border-color:transparent;box-shadow:var(--nm-i)}
.grade input:focus{background:#fff;box-shadow:none}
.grade input:disabled{box-shadow:none;background:transparent}
.botao{border-radius:11px;background:var(--cetim);border:1px solid;border-color:var(--cetim-borda);box-shadow:var(--cetim-sombra);color:#24406B}
.botao:hover{background:linear-gradient(180deg,#FFFFFF 0%,#F7F9FC 48%,#ECF0F6 52%,#F2F5F9 100%)}
.botao:active:not(:disabled){background:linear-gradient(180deg,#DCE2EB 0%,#E6EBF2 50%,#EDF1F6 100%);border-color:#AEB9C9 #C9D2DE #FFFFFF #C9D2DE;box-shadow:inset 0 2px 4px rgba(12,33,66,.22);transform:translateY(1px)}
.botao.forte,.botao.forte:hover{background:var(--marinho);border-color:var(--marinho-borda);box-shadow:var(--marinho-sombra);color:#fff}
select.comp{border-radius:11px}
.verif .item,.lista-comp a{background:var(--bg);box-shadow:var(--nm-i);border-color:transparent}
.lista-comp a.atual{box-shadow:var(--nm-s);background:var(--relevo)}
.pilula{box-shadow:inset 0 0 0 .75px rgba(140,156,184,.35)}
}
/* iPad deitado e telas até 1365px: barra em duas linhas, para nenhuma opção sumir */
@media screen and (min-width:901px) and (max-width:1365px){
  :root{--tbh:104px}
  .topo{flex-wrap:wrap;align-content:center;row-gap:6px;padding-top:6px;padding-bottom:6px}
  .marca{order:1}
  .modo-teste{order:2;margin-left:auto}
  .usuario{order:2}
  .menu{order:3;flex:1 1 100%;overflow:visible;gap:6px;padding:0;flex-wrap:wrap}
  .menu a{padding:0 10px;font-size:12px;letter-spacing:.04em}
  .cartao .v{font-size:21px}
}
/* celular e iPad em pé: menu lateral gelo, com um respiro entre o logo e o primeiro botão */
@media screen and (max-width:900px){
  .marca span{display:inline;font-size:17px}
  /* menu do celular: lista enxuta à esquerda, logo abaixo do botão, do tamanho das opções (sem painel de tela inteira) */
  .menu{top:calc(var(--tbh) + 8px);left:max(10px,env(safe-area-inset-left,0px));bottom:auto;width:max-content;max-width:calc(100vw - 20px);max-height:calc(100% - var(--tbh) - 24px);
    align-items:stretch;gap:6px;padding:10px;border-radius:16px;transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:transform .16s ease,opacity .16s ease,visibility 0s linear .16s;
    background:linear-gradient(180deg,#FFFFFF 0%,#F1F4F9 100%);border:1px solid #C9D2DE;box-shadow:0 14px 30px -10px rgba(12,33,66,.35),inset 0 1px 0 #fff}
  body.menu-aberto .menu{transform:none;opacity:1;visibility:visible;transition:transform .16s ease,opacity .16s ease;box-shadow:0 14px 30px -10px rgba(12,33,66,.35),inset 0 1px 0 #fff}
  .menu a{justify-content:flex-start;text-align:left;min-height:40px;height:auto;padding:0 14px;font-size:13.5px;letter-spacing:.06em}   /* todos com a largura da opção mais longa; a caixa acompanha */
  .modo-teste{margin-left:auto}
  .cartao .v{font-size:19px}
  table.grade tr{background:var(--relevo);border-color:transparent;border-radius:18px;box-shadow:var(--nm-r)}
  table.grade tr.total{background:var(--relevo)}
  .grade td:first-child{background:transparent!important}
}
@media screen and (max-width:420px){ .marca img{height:32px} .marca span{font-size:15px;letter-spacing:.1em} }
@media (max-width:820px),(pointer:coarse){ input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important} }