:root{--navy:#0b1f44;--navy2:#13306a;--azul:#0070fa;--azul2:#e7f1ff;--tx:#0f1b33;--tx2:#5b6780;--ln:#e2e8f2;--bg:#f3f6fb;--card:#fff;
  --er:#b42318;--er-bg:#fdecea;--ok:#147a43;--ok-bg:#e5f5ec;--r:12px;font-family:"Segoe UI",system-ui,-apple-system,sans-serif}
@media (prefers-color-scheme:dark){:root{--tx:#e8eefa;--tx2:#9aabc9;--ln:#22365e;--bg:#06122b;--card:#0b1d40;--azul2:#11305f;--er-bg:#3a1a18;--ok-bg:#0e2e20;--er:#ff8a80;--ok:#5fd394}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--tx);font-size:14px}
a{color:var(--azul)}
.sp{flex:1}
.nota{color:var(--tx2);font-size:12.5px}
h1{font-size:22px;margin:0}h2{font-size:16px;margin:0 0 10px}h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9fb3d9;margin:16px 12px 6px}
input,select,textarea{font:inherit;color:var(--tx);background:var(--card);border:1px solid var(--ln);border-radius:9px;padding:9px 11px;width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--azul) 25%,transparent);border-color:var(--azul)}
input[type=checkbox]{width:auto}input[type=color]{padding:2px;height:40px}
label{display:block;font-size:12.5px;font-weight:600;color:var(--tx2);margin:12px 0 5px}
label.check{display:flex;gap:8px;align-items:center;font-weight:500;color:var(--tx);font-size:14px}
.bt{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:9px;background:var(--azul);color:#fff;padding:8px 14px;font:600 13.5px inherit;
  font-family:inherit;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:36px}
.bt:hover{filter:brightness(1.08)}.bt:disabled{opacity:.6;cursor:default}
.bt.leve{background:var(--card);color:var(--tx);border:1px solid var(--ln)}.bt.leve:hover{border-color:var(--azul)}
.bt.perigo{color:var(--er)}.bt.perigo:not(.leve){background:var(--er);color:#fff}
.bt.largo{width:100%;justify-content:center;margin-top:16px}
.ic-bt{min-width:40px;justify-content:center;font-size:17px}
.topo{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--navy);color:#fff}
.topo form{margin:0}.topo .bt.leve{background:transparent;color:#dbe6ff;border-color:#2a4478}
.marca{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:16px}.marca b{color:#7fb6ff}
.marca.grande{font-size:21px;color:var(--tx);margin-bottom:18px}.marca.grande b{color:var(--azul)}
.avisos{position:fixed;top:62px;right:16px;z-index:50;display:flex;flex-direction:column;gap:6px;max-width:440px}
.aviso{padding:10px 14px;border-radius:10px;background:var(--ok-bg);color:var(--ok);font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.aviso.erro{background:var(--er-bg);color:var(--er)}
/* acesso */
body.acesso{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0b1f44,#13306a 60%,#0070fa)}
.cartao-acesso{background:var(--card);border-radius:16px;padding:30px;width:min(400px,94vw);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.cartao-acesso.largo{width:min(560px,94vw)}.cartao-acesso h1{margin-bottom:6px}.cartao-acesso h2{margin-top:20px}
.codigo{font-size:22px;letter-spacing:.3em;text-align:center}
.qr{display:flex;gap:16px;align-items:center}.qr img{background:#fff;border-radius:10px;flex:none}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* páginas */
.pagina{max-width:980px;margin:0 auto;padding:22px 16px 60px}.pagina.estreita{max-width:820px}
.cab{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cartao{background:var(--card);border:1px solid var(--ln);border-radius:var(--r);padding:18px;margin:14px 0}
.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}.grade .inteira{grid-column:1/-1}
.acoes{display:flex;gap:8px;align-items:center;margin-top:14px}
.como ol{margin:8px 0 0;padding-left:20px;line-height:1.7}.como summary{cursor:pointer;font-weight:600}
.conta-linha{border-top:1px solid var(--ln);padding:10px 0}.conta-linha summary{cursor:pointer;display:flex;gap:10px;align-items:center}
.etiqueta{font-size:11px;background:var(--bg);border:1px solid var(--ln);border-radius:99px;padding:1px 8px}
.anexos-orig{border:1px solid var(--ln);border-radius:10px;margin-top:12px}
.bolinha{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block;background:#7fb6ff}
.bolinha.todas{background:conic-gradient(#2563eb,#16a34a,#dc2626,#9333ea,#2563eb)}
/* caixa: três painéis */
body.caixa{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.tres{flex:1;display:grid;grid-template-columns:260px minmax(320px,420px) 1fr;min-height:0}
.lado{background:var(--navy);color:#dbe6ff;overflow-y:auto;padding:10px 6px 30px}
.lado-item{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;
  padding:8px 10px;border-radius:9px;cursor:pointer;min-height:36px}
.lado-item:hover{background:rgba(255,255,255,.07)}.lado-item.ativo{background:var(--azul);color:#fff}
.lado-item .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lado-item .num{font-size:12px;font-weight:700;color:#9fd0ff}.lado-item.ativo .num{color:#fff}.num.falha{color:#ff9b9b}
.lado-item .ic{width:11px;text-align:center;font-size:11px}
.lado-sub,.pastas{padding-left:14px}.lado-item.pasta{font-size:13px;min-height:30px;padding:5px 10px;color:#b9c9ea}
.meio{display:flex;flex-direction:column;border-right:1px solid var(--ln);background:var(--card);min-height:0}
.barra{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--ln);align-items:center;flex-wrap:wrap}
.acoes-lote{background:var(--azul2)}
.titulo-lista{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;align-items:baseline}
.lista{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.item{display:flex;gap:8px;align-items:flex-start;padding:10px 12px 10px 8px;border-bottom:1px solid var(--ln);cursor:pointer;position:relative}
.item:hover{background:color-mix(in srgb,var(--azul2) 50%,transparent)}.item.aberto{background:var(--azul2)}
.item:focus{outline:2px solid var(--azul);outline-offset:-2px}
.item .sel{margin-top:3px}
.faixa{width:4px;align-self:stretch;border-radius:3px;flex:none}
.item-txt{flex:1;min-width:0}
.l1{display:flex;justify-content:space-between;gap:8px}.de{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quando{color:var(--tx2);font-size:12px;flex:none}
.l2{display:flex;gap:5px;color:var(--tx2);overflow:hidden;white-space:nowrap}.assunto{overflow:hidden;text-overflow:ellipsis}
.l3{font-size:11.5px;color:var(--tx2);margin-top:2px}
.nao-lida .de,.nao-lida .assunto{font-weight:700;color:var(--tx)}
.nao-lida::before{content:"";position:absolute;left:2px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--azul)}
.estrela{color:#e0a100}
.vazio-lista{padding:30px;text-align:center;color:var(--tx2)}
#mais{margin:8px;width:auto}
.barra input[type=search]{flex:1;width:auto;min-width:0}
#conta-movel{flex-basis:100%}
#conta-movel{display:none}
.leitura{display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.vazio{flex:1;display:grid;place-items:center;color:var(--tx2)}
#msg{display:flex;flex-direction:column;min-height:0;flex:1;padding:0 18px 12px}
#msg[hidden]{display:none}
.msg-barra{display:flex;gap:6px;flex-wrap:wrap;padding:10px 0;align-items:center}
#voltar{display:none}
#m-assunto{font-size:19px;margin:6px 0 10px}
.msg-cab{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}.msg-dir{text-align:right}
.etiqueta-conta{display:inline-block;color:#fff;font-size:11.5px;font-weight:700;border-radius:99px;padding:2px 10px;background:var(--azul)}
.anexos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.anexo{display:inline-flex;gap:6px;align-items:center;background:var(--card);border:1px solid var(--ln);border-radius:9px;padding:6px 10px;
  text-decoration:none;color:var(--tx);font-size:13px}
.anexo:hover{border-color:var(--azul)}
.msg-imagens{margin-bottom:8px}.msg-imagens .bt{min-height:28px;padding:3px 10px;font-size:12px}
#m-corpo{flex:1;width:100%;border:1px solid var(--ln);border-radius:var(--r);background:#fff;min-height:300px}
/* celular e telas médias */
@media (max-width:1100px){.tres{grid-template-columns:220px minmax(280px,360px) 1fr}}
@media (max-width:860px){
  .tres{grid-template-columns:1fr}.lado{display:none}
  body.caixa.lendo .meio{display:none}body:not(.lendo) .leitura{display:none}
  #voltar{display:inline-flex}#conta-movel{display:block}.grade{grid-template-columns:1fr}.duas{grid-template-columns:1fr}
  .topo .bt{padding:6px 10px}.marca span{display:none}
}