:root{--fundo:#f2f5fa;--cart:#fff;--txt:#0e1b33;--mudo:#51627f;--brd:#d5ddea;--cor:#0a62c9;--botao:#0a62c9;--botao2:#084fa3;--eletrico:#1e90ff;--ok:#0f7a55;--err:#b3261e;--perigo:#b3261e;--aviso:#eaf2fd;--marinho:#061a3a;--marinho2:#0a2a5e}
@media (prefers-color-scheme:dark){:root{--fundo:#050f20;--cart:#0b1d3d;--txt:#e8eefb;--mudo:#9db0cf;--brd:#1c3563;--cor:#5aaaff;--botao:#1a6fd1;--botao2:#2480ea;--ok:#4cc29b;--err:#ff8a80;--perigo:#ff8a80;--aviso:#0f2750}}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--txt);font:16px/1.5 "Segoe UI Variable Text","Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;font-variant-numeric:tabular-nums}

/* topo: faixa azul-marinho onde o logotipo brilha */
.topo{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 20px;background:linear-gradient(180deg,#08224d,var(--marinho));border-bottom:1px solid rgba(70,150,255,.28);color:#fff}
.marca{display:flex;align-items:center;gap:14px;min-width:0}
.marca img{display:block;height:51px;width:auto;max-width:100%}
.produto{font-size:22px;font-weight:700;letter-spacing:-.01em;color:#4db3ff;padding-left:14px;border-left:1px solid rgba(160,200,255,.35);line-height:1.1}
.produto small{display:block;font-size:12px;font-weight:500;letter-spacing:0;color:#aac3e8;margin-top:3px}
.usuario{display:flex;align-items:center;gap:10px;font-size:14px;color:#c9d9f3}
.topo .sec{color:#fff;border-color:rgba(160,200,255,.4)}
.topo .sec:hover{background:rgba(120,180,255,.16)}
.topo .tag{border-color:rgba(160,200,255,.4);color:#c9d9f3}
.topo .tag.prod{color:#ffb3ab;border-color:#ff8a80}.topo .tag.homol{color:#6fe3bb;border-color:#4cc29b}

main{max-width:840px;margin:0 auto;padding:18px 16px}
.cartao{background:var(--cart);border:1px solid var(--brd);border-radius:12px;padding:20px;margin-bottom:16px;box-shadow:0 1px 0 rgba(8,40,95,.04)}
h1,h2{margin:0 0 10px;line-height:1.25;letter-spacing:-.012em;font-weight:650}h1{font-size:23px}h2{font-size:18px}
.mudo{color:var(--mudo);font-size:14px;margin:6px 0 12px}
label{display:block;font-size:14px;color:var(--mudo);margin-bottom:12px}
input,select{display:block;width:100%;margin-top:4px;padding:10px 12px;font:inherit;color:var(--txt);background:var(--fundo);border:1px solid var(--brd);border-radius:8px;min-height:44px}
input:focus,select:focus,button:focus-visible,textarea:focus{outline:2px solid var(--eletrico);outline-offset:1px}
button{font:inherit;font-weight:600;min-height:44px;padding:0 18px;border:0;border-radius:8px;background:var(--botao);color:#fff;cursor:pointer}
button:hover{background:var(--botao2)}
button.sec{background:transparent;color:var(--cor);border:1px solid var(--brd)}button.sec:hover{background:var(--aviso)}
button.perigo{background:transparent;color:var(--perigo);border:1px solid var(--perigo)}
button:disabled{opacity:.6;cursor:wait}
.linha{display:flex;gap:10px;flex-wrap:wrap}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 14px}
.aviso{padding:10px 12px;background:var(--aviso);border:1px solid var(--brd);border-radius:8px;margin-bottom:10px;font-size:14px}
.aviso.ok{border-color:var(--ok)}.aviso.alerta{border-color:var(--err)}
.erro,.err{color:var(--err)}.ok{color:var(--ok)}
p[role=status],p.erro{min-height:1.4em;margin:10px 0 0;font-size:14px}
footer{text-align:center;color:var(--mudo);font-size:12px;padding:20px}
[hidden]{display:none!important}
textarea{display:block;width:100%;margin-top:4px;padding:10px 12px;font:inherit;color:var(--txt);background:var(--fundo);border:1px solid var(--brd);border-radius:8px;resize:vertical}

/* abas: o item ativo ganha a barra de azul elétrico da marca */
.abas{display:flex;gap:2px;overflow-x:auto;padding:0 16px;background:var(--cart);border-bottom:1px solid var(--brd);-webkit-overflow-scrolling:touch}
.abas button{background:transparent;color:var(--mudo);min-height:46px;padding:0 16px;white-space:nowrap;border-radius:0}
.abas button:hover{background:var(--aviso);color:var(--txt)}
.abas button.ativa{background:transparent;color:var(--cor);box-shadow:inset 0 -3px 0 var(--eletrico)}
.entre{justify-content:space-between;align-items:center}
.tag{font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;border:1px solid var(--brd)}
.tag.prod{color:var(--err);border-color:var(--err)}.tag.homol{color:var(--ok);border-color:var(--ok)}
details{margin:0 0 12px}summary{cursor:pointer;color:var(--cor);font-size:14px;margin-bottom:10px}
.item{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:12px 0;border-top:1px solid var(--brd);align-items:center}
.item:first-child{border-top:0}
.item .nome{font-weight:600;overflow-wrap:anywhere}.item .sub{color:var(--mudo);font-size:13px;overflow-wrap:anywhere}
.item .acoes{display:flex;gap:6px;flex-wrap:wrap;grid-column:1/-1}
.item .acoes button{min-height:36px;padding:0 12px;font-size:14px}
.sit{font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;white-space:nowrap}
.sit.emitida{color:var(--ok);border:1px solid var(--ok)}.sit.cancelada{color:var(--mudo);border:1px solid var(--brd)}.sit.incerta{color:var(--err);border:1px solid var(--err)}
.saida{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--fundo);border:1px solid var(--brd);border-radius:8px;padding:10px;font-size:13px;margin-top:10px}
dialog{border:1px solid var(--brd);border-radius:12px;background:var(--cart);color:var(--txt);padding:20px;width:min(420px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(3,12,30,.6)}
.perigo-cheio{background:var(--perigo);color:#fff}.perigo-cheio:hover{filter:brightness(.9);background:var(--perigo)}
#emResultado .aviso{margin-top:12px}
#emResultado ul{margin:6px 0 0 18px;padding:0}
.aviso,.aviso li{overflow-wrap:anywhere}

/* entrada: a tela inteira vira o fundo do logotipo, com o brilho azul atras dele */
.login{max-width:440px;margin:0 auto;padding:7vh 0 0;text-align:center}
.login-logo{display:block;width:100%;height:auto;margin:0 auto 18px}
.login-card{background:var(--cart);border:1px solid var(--brd);border-radius:14px;padding:24px;text-align:left;box-shadow:0 18px 50px rgba(0,10,40,.45)}
body:has(#telaLogin:not([hidden])){min-height:100vh;background:radial-gradient(ellipse 85% 60% at 50% 14%,rgba(0,128,248,.5),rgba(0,128,248,0) 62%) no-repeat,var(--marinho)}
body:has(#telaLogin:not([hidden])) .topo,body:has(#telaLogin:not([hidden])) .abas{display:none}
body:has(#telaLogin:not([hidden])) footer{color:#8fa9d3}

@media (max-width:620px){.topo{padding:8px 12px}.marca img{height:40px}.produto{font-size:19px;padding-left:10px}.produto small{display:none}.usuario{gap:6px}.tag{font-size:11px}.login{padding-top:4vh}}
@media (max-width:400px){#uNome{display:none}}

/* dicas do cadastro de servico: somem quando vazias para nao abrir buracos no formulario */
#sDicaServ,#sDicaNbs,#sSugestao{min-height:0;margin:0 0 8px}
#sDicaServ:empty,#sDicaNbs:empty,#sSugestao:empty{display:none}

.modulos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:16px}
.modulo{display:flex;flex-direction:column;gap:10px;min-height:170px;padding:18px;background:var(--cart);border:1px solid var(--brd);border-top:5px solid var(--cor);border-radius:12px;color:var(--txt);text-decoration:none}
a.modulo:hover{border-color:var(--cor);box-shadow:0 2px 10px rgba(8,40,95,.15)}
.modulo strong{font-size:17px}.modulo span{font-size:14px;color:var(--mudo);flex-grow:1}
.modulo em{font-style:normal;font-size:12px;font-weight:700;align-self:flex-start;border:1px solid var(--mudo);border-radius:99px;padding:2px 10px;color:var(--mudo)}
.modulo em.ok{color:var(--ok);border-color:var(--ok)}
.m-fin{border-top-color:#0e8f8f}.m-cli{border-top-color:#8e5bd9}.modulo.desativado{opacity:.75}

#cartao2fa form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}#cartao2fa label{display:flex;flex-direction:column;gap:4px;font-size:14px}.passos{margin:8px 0 12px 18px;line-height:1.6}#doisQr{max-width:100%;border:1px solid var(--brd);border-radius:8px;display:block;margin:8px 0}#doisChave{font-size:15px;letter-spacing:.06em;user-select:all}
.dica{font-size:13px;color:#51627f;margin:0 0 10px}
/* administracao + seletor de empresa */
#selEmpresa{max-width:240px;background:#0d2a57;color:#fff;border:1px solid rgba(160,200,255,.4);border-radius:8px;padding:6px 8px;font:inherit;font-size:14px}
.tabela-rol{overflow-x:auto}
table.tab{border-collapse:collapse;width:100%;font-size:14px}
table.tab th,table.tab td{border-bottom:1px solid var(--brd);padding:8px 10px;text-align:left;vertical-align:middle}
table.tab th{font-size:12px;text-transform:uppercase;color:#51627f}
table.tab td button,table.tab td select,table.tab td input{margin:2px 4px 2px 0;padding:5px 8px;min-height:32px;font-size:13px}
.acoes-adm{display:flex;flex-wrap:wrap;align-items:center}
.etq{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;background:#e4ecf8;color:#26456f}
.etq.bad{background:#fde2e2;color:#8a1c1c}.etq.good{background:#dff3e4;color:#17612e}
@media (max-width:620px){#selEmpresa{max-width:130px}}
main:has(#telaAdmin:not([hidden])){max-width:1180px}
table.tab input[type=checkbox]{width:20px;height:20px;min-height:0;padding:0}
table.tab td select{min-width:140px}
table.tab input[type=password]{width:130px}
table.tab td button{white-space:nowrap}