:root{
  --bg:#F8FAFC;--painel:#fff;--borda:#E2E8F0;--texto:#334155;--suave:#64748B;
  --primaria:#2563EB;--primaria-escura:#1D4ED8;--primaria-fundo:#DBEAFE;
  --perigo:#b42318;--perigo-fundo:#fdecea;--aviso:#92600a;--aviso-fundo:#fff4d6;
  --ok:#157347;--ok-fundo:#e2f5ea;--info:#1d5fb8;--info-fundo:#e5eefb;--sombra:0 8px 30px rgba(15,30,50,.18);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1117;--painel:#171b26;--borda:#2a3045;--texto:#e8ecf4;--suave:#8892aa;
  --primaria:#3B82F6;--primaria-escura:#93C5FD;--primaria-fundo:rgba(59,130,246,.18);
  --perigo:#ff8a80;--perigo-fundo:#3b1b1a;--aviso:#f3c969;--aviso-fundo:#3a2f12;
  --ok:#6ed39a;--ok-fundo:#14301f;--info:#8db8ff;--info-fundo:#16263d;--sombra:0 8px 30px rgba(0,0,0,.55)}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--texto);font:15px/1.45 "DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1{font-size:22px;margin:0 0 4px}h2{font-size:17px;margin:0 0 10px}h3{font-size:15px;margin:14px 0 6px}
a{color:var(--primaria)}
.suave{color:var(--suave)}.pequeno{font-size:13px}.direita{text-align:right}.nowrap{white-space:nowrap}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}

/* estrutura: menu lateral igual ao do ERP (barra de ícones que abre ao passar o mouse) */
:root{--sb-mini:52px;--sb-full:220px;--sb-bg:#1E3A8A;--sb-texto:#DBEAFE;--sb-texto2:rgba(219,234,254,.72);
  --sb-hover:rgba(219,234,254,.10);--sb-ativo:#2563EB;--sb-ativo-texto:#fff;--sb-borda:rgba(255,255,255,.10);
  --sb-sub:rgba(15,23,42,.16);--sb-perigo:#FCA5A5}
@media (prefers-color-scheme:dark){:root{--sb-bg:#172554;--sb-texto2:rgba(219,234,254,.60);--sb-hover:rgba(219,234,254,.08);--sb-borda:rgba(255,255,255,.08);--sb-sub:rgba(0,0,0,.18)}}
.ico{display:block;flex-shrink:0}
.sidebar{position:fixed;top:0;left:0;z-index:100;height:100vh;width:var(--sb-mini);overflow:hidden;display:flex;flex-direction:column;
  background:var(--sb-bg);border-right:1px solid var(--sb-borda);transition:width .2s cubic-bezier(.4,0,.2,1)}
.sidebar:hover{width:var(--sb-full)}
.principal{margin-left:var(--sb-mini);transition:margin-left .2s cubic-bezier(.4,0,.2,1);padding:24px 28px 60px;min-width:0;max-width:1360px}
.shell:has(.sidebar:hover) .principal{margin-left:var(--sb-full)}
.sidebar-logo{height:52px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--sb-borda);white-space:nowrap;overflow:hidden}
.sidebar-logo .icone{width:28px;height:28px;flex-shrink:0;background:#2563EB;color:#fff;border-radius:7px;display:grid;place-items:center;font-size:15px;font-weight:700;box-shadow:0 2px 8px rgba(37,99,235,.28)}
.sidebar-logo .texto{opacity:0;max-width:0;overflow:hidden;transition:opacity .15s,max-width .2s}
.sidebar:hover .sidebar-logo .texto{opacity:1;max-width:160px}
.sidebar-logo .nome{font-size:13px;font-weight:700;color:var(--sb-ativo-texto)}
.sidebar-logo .ver{font-size:10px;color:var(--sb-texto2);font-family:"JetBrains Mono",monospace}
.sidebar nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}
.nav-grupo{margin-bottom:2px}
.nav-cab{display:flex;align-items:center;justify-content:space-between;width:100%;height:40px;padding:0 13px 0 14px;border:0;border-radius:0;background:none;cursor:pointer;white-space:nowrap;overflow:hidden;color:inherit;transition:background .12s}
.nav-cab:hover{background:var(--sb-hover);border:0}
.nav-esq{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav-icone{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--sb-texto2);border-radius:6px;transition:color .12s,background .12s,box-shadow .12s}
.nav-cab:hover .nav-icone,.nav-grupo.aberto>.nav-cab .nav-icone{color:var(--sb-ativo-texto)}
.nav-grupo:has(.nav-item.ativo)>.nav-cab .nav-icone{color:var(--sb-ativo-texto);background:var(--sb-hover);box-shadow:0 0 0 5px var(--sb-hover)}
.nav-rotulo{font-size:13px;font-weight:500;color:var(--sb-texto);opacity:0;max-width:0;overflow:hidden;white-space:nowrap;transition:opacity .12s,max-width .18s}
.sidebar:hover .nav-rotulo{opacity:1;max-width:130px}
.nav-seta{font-size:12px;color:var(--sb-texto2);opacity:0;flex-shrink:0;transition:transform .2s,opacity .12s}
.sidebar:hover .nav-seta{opacity:1}
.nav-grupo.aberto>.nav-cab .nav-seta{transform:rotate(90deg)}
.nav-sub{overflow:hidden;max-height:0;background:var(--sb-sub);transition:max-height .22s cubic-bezier(.4,0,.2,1)}
.sidebar:not(:hover) .nav-sub{max-height:0!important}
.sidebar:hover .nav-grupo.aberto .nav-sub{max-height:400px}
.nav-item{display:flex;align-items:center;height:38px;padding:0 14px 0 42px;color:var(--sb-texto);font-size:13px;text-decoration:none;white-space:nowrap;overflow:hidden;border-left:2px solid transparent;transition:background .12s,color .12s}
.nav-item:hover{background:var(--sb-hover);color:var(--sb-ativo-texto)}
.nav-item.ativo{color:var(--sb-ativo-texto);font-weight:600;background:var(--sb-ativo);border-left-color:#DBEAFE}
.sidebar-rodape{flex-shrink:0;border-top:1px solid var(--sb-borda);overflow:hidden;white-space:nowrap}
.usuario-pilula{display:flex;align-items:center;gap:10px;height:52px;padding:10px 11px;min-width:var(--sb-mini)}
.sidebar:not(:hover) .usuario-pilula{justify-content:center;padding:10px 0}
.avatar{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:#DBEAFE;color:#1E3A8A;display:grid;place-items:center;font-size:12px;font-weight:700}
.usuario-pilula .dados-u{flex:1;min-width:0}
.unome,.upapel{display:block;opacity:0;max-width:0;overflow:hidden;white-space:nowrap;transition:opacity .12s,max-width .18s}
.unome{font-size:13px;font-weight:600;color:var(--sb-ativo-texto)}.upapel{font-size:11px;color:var(--sb-texto2)}
.sidebar:hover .unome,.sidebar:hover .upapel{opacity:1;max-width:130px}
.sidebar:not(:hover) .usuario-pilula .dados-u{display:none}
.botao-sair{background:none;border:0;padding:4px;color:var(--sb-texto2);opacity:0;margin-left:auto;transition:opacity .12s,color .12s}
.sidebar:not(:hover) .botao-sair{display:none}
.sidebar:hover .botao-sair{opacity:1}.botao-sair:hover{color:var(--sb-perigo);border:0}
.cabeca{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
@media(max-width:820px){.principal{padding:16px 14px 60px}}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;padding:4px 0 16px}
.marca i{width:30px;height:30px;border-radius:8px;background:var(--primaria);display:grid;place-items:center;color:#fff;font-style:normal}

/* componentes */
.cartao{background:var(--painel);border:1px solid var(--borda);border-radius:12px;padding:18px;margin-bottom:16px}
.grade{display:grid;gap:14px}.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.linha{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.linha.fim{justify-content:flex-end}
.numero{font-size:28px;font-weight:700;line-height:1.1}
.indicador{background:var(--painel);border:1px solid var(--borda);border-radius:12px;padding:14px;text-decoration:none;color:inherit;display:block}
a.indicador:hover{border-color:var(--primaria)}
button,.botao{font:inherit;border:1px solid var(--borda);background:var(--painel);color:var(--texto);padding:8px 14px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.botao:hover{border-color:var(--primaria)}
button.primario{background:var(--primaria);border-color:var(--primaria);color:#fff}button.primario:hover{background:var(--primaria-escura)}
button.perigo{background:var(--perigo);border-color:var(--perigo);color:#fff}
button.leve{border-color:transparent;background:transparent;color:var(--primaria);padding:4px 8px}
button:disabled{opacity:.55;cursor:not-allowed}
button.pequeno{padding:4px 10px;font-size:13px}
:focus-visible{outline:3px solid var(--primaria);outline-offset:2px}
.selo{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:var(--bg);border:1px solid var(--borda);white-space:nowrap}
.selo.ok{background:var(--ok-fundo);color:var(--ok);border-color:transparent}.selo.info{background:var(--info-fundo);color:var(--info);border-color:transparent}
.selo.aviso{background:var(--aviso-fundo);color:var(--aviso);border-color:transparent}.selo.perigo{background:var(--perigo-fundo);color:var(--perigo);border-color:transparent}
.caixa{border-radius:10px;padding:10px 14px;margin:10px 0;font-size:14px;border:1px solid transparent}
.caixa.aviso{background:var(--aviso-fundo);color:var(--aviso)}.caixa.perigo{background:var(--perigo-fundo);color:var(--perigo)}.caixa.info{background:var(--info-fundo);color:var(--info)}.caixa.ok{background:var(--ok-fundo);color:var(--ok)}

/* tabelas */
.rolar{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--borda);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--suave);white-space:nowrap}
th.ordena{cursor:pointer;user-select:none}th.ordena:hover{color:var(--primaria)}
tr.clicavel{cursor:pointer}tr.clicavel:hover td{background:var(--bg)}
.vazio{padding:28px;text-align:center;color:var(--suave)}
.paginacao{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:12px;flex-wrap:wrap}

/* formulários */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:end}
label.campo{display:block;font-size:13px;font-weight:600;margin-bottom:12px}
label.campo>span.dica{display:block;font-weight:400;color:var(--suave);font-size:12px;margin-top:2px}
input,select,textarea{font:inherit;width:100%;margin-top:4px;padding:8px 10px;border:1px solid var(--borda);border-radius:8px;background:var(--painel);color:var(--texto)}
input[type=checkbox],input[type=radio]{width:auto;margin:0 6px 0 0}
.filtros input,.filtros select{width:auto;min-width:150px}
.erro-campo{color:var(--perigo);font-size:12.5px;font-weight:500;margin-top:3px;display:block}
input.invalido,select.invalido,textarea.invalido{border-color:var(--perigo)}
.marcar{display:flex;align-items:center;font-weight:400;font-size:14px;margin:4px 0}
.marcar input{margin-right:8px}
fieldset{border:1px solid var(--borda);border-radius:10px;margin:0 0 14px;padding:10px 14px}legend{font-weight:600;padding:0 6px;font-size:13px}
.abas{display:flex;gap:2px;border-bottom:1px solid var(--borda);margin-bottom:16px;overflow-x:auto}
.abas a{padding:9px 16px;text-decoration:none;color:var(--suave);border-bottom:3px solid transparent;white-space:nowrap}
.abas a.ativo{color:var(--primaria-escura);border-color:var(--primaria);font-weight:600}
dl.dados{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}dl.dados dt{color:var(--suave)}dl.dados dd{margin:0}

/* modal e aviso rápido */
.fundo{position:fixed;inset:0;background:rgba(10,20,30,.55);display:grid;place-items:center;padding:16px;overflow:auto}
.modal{background:var(--painel);border-radius:14px;box-shadow:var(--sombra);width:min(560px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.modal.largo{width:min(820px,100%)}
.modal header{padding:16px 20px 8px}.modal header h2{margin:0}
.modal .corpo{padding:6px 20px 12px;overflow:auto}
.modal footer{padding:12px 20px 16px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--borda)}
.modal.perigo header h2{color:var(--perigo)}
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:9999}
.toast{background:var(--ok);color:#fff;padding:10px 16px;border-radius:10px;box-shadow:var(--sombra);animation:entra .2s}
.toast.saindo{opacity:0;transition:opacity .4s}
@keyframes entra{from{transform:translateY(8px);opacity:0}}
.senha-box{font-size:20px;letter-spacing:.04em;background:var(--bg);border:1px dashed var(--primaria);padding:10px 14px;border-radius:10px;word-break:break-all;user-select:all}
.codigos{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:16px;background:var(--bg);padding:12px;border-radius:10px}
textarea.mensagem{min-height:150px;font-size:13px}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .cartao{width:min(440px,100%);margin:0}
.qr{background:#fff;padding:8px;border-radius:10px;display:inline-block}.qr svg{display:block;width:200px;height:200px}
.carregando{padding:40px;text-align:center;color:var(--suave)}
.barra{height:8px;background:var(--bg);border-radius:99px;overflow:hidden}.barra>i{display:block;height:100%;background:var(--primaria)}
.barra>i.excesso{background:var(--perigo)}


/* page control (abas no estilo Delphi): a aba ativa "encosta" no painel */
.pc{margin-bottom:16px}
.pc-abas{display:flex;gap:2px;padding-left:6px;border-bottom:1px solid var(--borda);overflow-x:auto;overflow-y:hidden}
.pc-aba{position:relative;top:1px;border:1px solid var(--borda);border-bottom:0;border-radius:8px 8px 0 0;background:var(--bg);color:var(--suave);padding:8px 16px;font-size:14px;white-space:nowrap;text-decoration:none;display:inline-block}
.pc-aba:hover{color:var(--texto);border-color:var(--borda);background:var(--painel)}
.pc-aba.ativa{background:var(--painel);color:var(--primaria);font-weight:600;border-color:var(--borda);border-top:2px solid var(--primaria);padding-top:7px;z-index:1}
.pc-aba.com-erro::after{content:"";position:absolute;top:6px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--perigo)}
.pc-painel{background:var(--painel);border:1px solid var(--borda);border-top:0;border-radius:0 0 12px 12px;padding:18px}
.pc-painel>fieldset:last-child,.pc-painel>.grade:last-child{margin-bottom:0}
.pc.externo>.pc-abas{border-bottom-color:var(--borda)}
.pc-rodape{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.pc-painel>.cartao{border:0;padding:0;margin-bottom:22px;background:none}
.pc-painel>.cartao:last-child{margin-bottom:0}

/* combos (select) com a mesma altura e aparência dos campos de texto */
input:not([type=checkbox]):not([type=radio]),select{height:40px;line-height:1.2}
select{-webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
select:disabled,input:disabled{opacity:.7;cursor:not-allowed}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primaria);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
label.campo>span.dica:empty{display:none}
input,select,textarea{font-weight:400}
.cartao.filtros{margin-bottom:16px;padding:14px 18px}
.cartao.filtros label.campo{margin-bottom:0}
.cartao.filtros input[name=busca]{min-width:280px}
.cartao.filtros button{height:40px}
.filtros label.campo{display:flex;flex-direction:column;gap:2px}
.filtros label.campo input,.filtros label.campo select{margin-top:2px}
.filtros label.marcar{height:40px}
a.botao.primario{background:var(--primaria);border-color:var(--primaria);color:#fff}
a.botao.primario:hover{background:var(--primaria-escura);border-color:var(--primaria-escura)}