:root{
  --fundo:#f7f7f5; --superficie:#ffffff; --superficie-2:#f1f1ee;
  --texto:#1a1a18; --texto-2:#4d4d49; --texto-3:#6b6b66;
  --linha:#e4e4df; --linha-forte:#cfcfc8;
  --acento:#2456d6; --acento-fundo:#eaf0fd; --acento-texto:#1b46b3;
  --ok:#1f7a36; --ok-fundo:#e6f3e9;
  --aviso:#8a5200; --aviso-fundo:#fdf1dc;
  --perigo:#b42318; --perigo-fundo:#fdecea;
  --neutro:#4d4d49; --neutro-fundo:#efefeb;
  --foco:#2456d6; --contador:#c8261b;
  --r-sm:8px; --r:12px; --r-lg:16px;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --t-xs:13px; --t-sm:14px; --t:16px; --t-md:18px; --t-lg:22px;
  --alvo:44px; --barra:64px;
  --dur:150ms;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --fundo:#121211; --superficie:#1c1c1a; --superficie-2:#252523;
  --texto:#f0f0ec; --texto-2:#c4c4be; --texto-3:#a3a39c;
  --linha:#2e2e2b; --linha-forte:#43433f;
  --acento:#7aa2ff; --acento-fundo:#1a2744; --acento-texto:#a9c1ff;
  --ok:#7fd494; --ok-fundo:#16301d;
  --aviso:#f3c572; --aviso-fundo:#3a2a0d;
  --perigo:#ff9b92; --perigo-fundo:#3d1714;
  --neutro:#c4c4be; --neutro-fundo:#2a2a27;
  --foco:#7aa2ff;
  color-scheme:dark;
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--fundo);color:var(--texto);
  font:400 var(--t)/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;touch-action:manipulation}
a{color:inherit}
h1{font-size:var(--t-lg);font-weight:600;line-height:1.25;margin:0}
h2{font-size:var(--t-sm);font-weight:600;color:var(--texto-2);margin:var(--e6) 0 var(--e3)}
p{margin:0}
.ico{flex:none;width:20px;height:20px}
.ico.p{width:16px;height:16px}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* foco: visível sempre que o teclado estiver em uso, nunca removido */
:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:var(--r-sm)}
.pular{position:absolute;left:var(--e3);top:-100px;z-index:100;background:var(--superficie);
  padding:var(--e3) var(--e4);border-radius:var(--r-sm);border:1px solid var(--linha-forte)}
.pular:focus{top:var(--e3)}

/* ---------- estrutura ---------- */
.topo{position:sticky;top:0;z-index:20;background:var(--superficie);border-bottom:1px solid var(--linha);
  padding-top:env(safe-area-inset-top)}
.topo-in{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:var(--e3);
  min-height:56px;padding:0 max(var(--e4),env(safe-area-inset-right)) 0 max(var(--e4),env(safe-area-inset-left))}
.marca{font-weight:600;font-size:var(--t-md);text-decoration:none;display:flex;align-items:center;min-height:var(--alvo)}
.sessao{display:flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--texto-2)}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.ponto.carencia{background:var(--aviso)} .ponto.alerta{background:var(--perigo)} .ponto.desconhecido{background:var(--texto-3)}
.sair{margin-left:auto}
main{max-width:880px;margin:0 auto;
  padding:var(--e5) max(var(--e4),env(safe-area-inset-right)) calc(var(--barra) + var(--e6) + env(safe-area-inset-bottom)) max(var(--e4),env(safe-area-inset-left))}
.cab{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e4);flex-wrap:wrap}

/* navegação: embaixo no celular (alcance do polegar), no topo em tela grande */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--superficie);border-top:1px solid var(--linha);
  display:grid;grid-template-columns:repeat(3,1fr);padding-bottom:env(safe-area-inset-bottom)}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--barra);
  text-decoration:none;color:var(--texto-3);font-size:12px;font-weight:500;position:relative;transition:color var(--dur)}
.nav a[aria-current="page"]{color:var(--acento)}
.nav a[aria-current="page"]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;background:var(--acento);border-radius:0 0 2px 2px}
.nav .contador{position:absolute;top:8px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--contador);color:#fff;font-size:12px;font-weight:600;line-height:18px;text-align:center}
@media (min-width:768px){
  .nav{position:static;display:flex;gap:var(--e1);border:0;padding:0;background:transparent}
  .nav a{flex-direction:row;min-height:var(--alvo);padding:0 var(--e3);border-radius:var(--r-sm);font-size:var(--t-sm);gap:var(--e2)}
  .nav a:hover{background:var(--superficie-2);color:var(--texto)}
  .nav a[aria-current="page"]{background:var(--acento-fundo);color:var(--acento-texto)}
  .nav a[aria-current="page"]::before{display:none}
  .nav .contador{position:static;margin-left:2px}
  .topo-in{gap:var(--e5)}
  main{padding-bottom:var(--e6)}
}

/* ---------- controles ---------- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);min-height:var(--alvo);
  padding:0 var(--e4);border-radius:var(--r-sm);border:1px solid var(--linha-forte);background:var(--superficie);
  color:var(--texto);font:500 var(--t-sm)/1 inherit;text-decoration:none;cursor:pointer;
  transition:background var(--dur),border-color var(--dur)}
.botao:hover{background:var(--superficie-2)}
.botao:active{background:var(--linha)}
.botao.primario{background:var(--acento);border-color:var(--acento);color:#fff}
.botao.primario:hover{filter:brightness(1.06)}
@media (prefers-color-scheme:dark){.botao.primario{color:#0b1530}}
.botao.largo{width:100%;min-height:48px;font-size:var(--t)}
.botao.fantasma{border-color:transparent;background:transparent;color:var(--texto-2)}
.botao.fantasma:hover{background:var(--superficie-2);color:var(--texto)}
.campo{display:flex;align-items:center;gap:var(--e2);min-height:48px;padding:0 var(--e3);border-radius:var(--r-sm);
  border:1px solid var(--linha-forte);background:var(--superficie);color:var(--texto-3)}
.campo:focus-within{border-color:var(--foco);box-shadow:0 0 0 1px var(--foco)}
.campo input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--texto);font:400 var(--t) inherit;min-height:46px}
.campo input::placeholder{color:var(--texto-3)}
label.rot{display:block;font-size:var(--t-sm);font-weight:500;margin-bottom:var(--e2)}

/* ---------- selos de estado: sempre ícone + texto ---------- */
.selo{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:500;line-height:1;
  padding:6px 10px;border-radius:999px;white-space:nowrap}
.selo .ico{width:14px;height:14px}
.selo.esperando{background:var(--aviso-fundo);color:var(--aviso)}
.selo.aprovar{background:var(--acento-fundo);color:var(--acento-texto)}
.selo.respondido{background:var(--ok-fundo);color:var(--ok)}
.selo.nao_enviado,.selo.fechado{background:var(--neutro-fundo);color:var(--neutro)}

/* ---------- avisos ---------- */
.aviso{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e3) var(--e4);border-radius:var(--r);
  font-size:var(--t-sm);line-height:1.5;margin-bottom:var(--e4)}
.aviso .ico{margin-top:1px}
.aviso strong{display:block;font-weight:600;margin-bottom:2px}
.aviso.info{background:var(--superficie-2);color:var(--texto-2)}
.aviso.carencia{background:var(--aviso-fundo);color:var(--aviso)}
.aviso.alerta{background:var(--perigo-fundo);color:var(--perigo)}
.aviso .acoes{margin-top:var(--e3)}
.aviso a{font-weight:600}

/* ---------- listas ---------- */
.lista{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden}
.linha{display:flex;align-items:center;gap:var(--e3);min-height:68px;padding:var(--e3) var(--e4);
  text-decoration:none;border-top:1px solid var(--linha);transition:background var(--dur)}
.linha:first-child{border-top:0}
.linha:hover{background:var(--superficie-2)}
.linha:active{background:var(--linha)}
.linha .corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.linha .titulo{display:flex;align-items:baseline;gap:var(--e2);min-width:0}
.linha .nome{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha .cod{font:500 var(--t-xs) ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--texto-3);flex:none}
.linha .res{color:var(--texto-2);font-size:var(--t-sm);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.linha .meta{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;font-size:var(--t-xs);color:var(--texto-3)}
.linha .seta{color:var(--texto-3)}
.avatar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--acento-fundo);color:var(--acento-texto);font-weight:600;font-size:var(--t-sm)}

.vazio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--e2);
  padding:var(--e6) var(--e5);color:var(--texto-2);font-size:var(--t-sm)}
.vazio .ico{width:32px;height:32px;color:var(--texto-3)}
.vazio strong{color:var(--texto);font-size:var(--t);font-weight:600}
.vazio.tudo-certo .ico{color:var(--ok)}

/* ---------- visão geral ---------- */
.resumo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e3)}
@media (min-width:640px){.resumo{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cartao{display:flex;flex-direction:column;gap:var(--e1);min-height:84px;padding:var(--e3) var(--e4);border-radius:var(--r);
  background:var(--superficie);border:1px solid var(--linha);text-decoration:none;transition:border-color var(--dur),background var(--dur)}
a.cartao:hover{border-color:var(--linha-forte)}
a.cartao:active{background:var(--superficie-2)}
.cartao small{font-size:var(--t-xs);color:var(--texto-2)}
.cartao strong{font-size:28px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.cartao.destaque{border-color:var(--aviso);background:var(--aviso-fundo)}
.cartao.destaque small,.cartao.destaque strong{color:var(--aviso)}
.rodape{margin-top:var(--e5);font-size:var(--t-xs);color:var(--texto-3)}

/* ---------- tickets ---------- */
.busca{margin-bottom:var(--e3)}
.filtros{display:flex;gap:var(--e2);flex-wrap:wrap;margin-bottom:var(--e4)}
.filtros a{display:inline-flex;align-items:center;gap:6px;min-height:var(--alvo);padding:0 var(--e4);border-radius:999px;
  border:1px solid var(--linha-forte);text-decoration:none;font-size:var(--t-sm);font-weight:500;color:var(--texto-2);
  transition:background var(--dur)}
.filtros a:hover{background:var(--superficie-2)}
.filtros a[aria-current="true"]{background:var(--texto);border-color:var(--texto);color:var(--fundo)}
.filtros .n{font-variant-numeric:tabular-nums;opacity:.8}

/* ---------- detalhe ---------- */
.voltar{display:inline-flex;align-items:center;gap:var(--e2);min-height:var(--alvo);margin:-8px 0 var(--e2) -8px;padding:0 8px;
  color:var(--texto-2);text-decoration:none;font-size:var(--t-sm);border-radius:var(--r-sm)}
.voltar:hover{background:var(--superficie-2);color:var(--texto)}
.ficha{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);padding:var(--e4);margin-bottom:var(--e4)}
.ficha .topo-ficha{display:flex;align-items:flex-start;gap:var(--e3);justify-content:space-between;flex-wrap:wrap}
.ficha .cod{font:600 var(--t-md)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.ficha .quem{margin-top:var(--e1);color:var(--texto-2);font-size:var(--t-sm)}
.ficha .quem a{color:inherit;display:inline-block;padding:13px 0;margin:-13px 0}
.ficha .sintese{margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--linha);font-size:var(--t);line-height:1.5}
.ficha .sintese small{display:block;font-size:var(--t-xs);color:var(--texto-3);margin-bottom:2px}
.passo{display:flex;gap:var(--e3);align-items:flex-start;padding:var(--e4);border-radius:var(--r);margin-bottom:var(--e5)}
.passo .ico{margin-top:2px}
.passo strong{display:block;font-weight:600;margin-bottom:2px}
.passo p{font-size:var(--t-sm);line-height:1.5}
.passo .acoes{margin-top:var(--e3);display:flex;gap:var(--e2);flex-wrap:wrap}
.passo.esperando{background:var(--aviso-fundo);color:var(--aviso)}
.passo.aprovar{background:var(--acento-fundo);color:var(--acento-texto)}
.passo.nao_enviado,.passo.fechado{background:var(--superficie-2);color:var(--texto-2)}
.passo.respondido{background:var(--ok-fundo);color:var(--ok)}

.conversa{display:flex;flex-direction:column;gap:var(--e3)}
.msg{max-width:88%;display:flex;flex-direction:column;gap:4px}
.msg.out{align-self:flex-end;align-items:flex-end}
.msg .quem-fala{font-size:12px;color:var(--texto-3);padding:0 4px}
.bolha{padding:10px 14px;border-radius:16px;font-size:var(--t);line-height:1.5;overflow-wrap:anywhere}
.msg.in .bolha{background:var(--superficie);border:1px solid var(--linha);border-bottom-left-radius:6px}
.msg.out .bolha{background:var(--acento-fundo);color:var(--texto);border-bottom-right-radius:6px}
.bolha .texto{white-space:pre-wrap}
.bolha .transc{color:var(--texto-2)}
.bolha .transc small{display:block;font-size:12px;color:var(--texto-3);margin-bottom:2px}
.msg .nota{font-size:12px;color:var(--texto-3);padding:0 4px;display:flex;align-items:center;gap:4px}
.msg .nota.pendente{color:var(--aviso)}
audio{display:block;width:100%;min-width:240px;height:44px;margin-bottom:6px}
.baixar{display:inline-flex;align-items:center;gap:6px;min-height:var(--alvo);font-size:var(--t-xs);color:var(--texto-2);text-decoration:none}
.baixar:hover{color:var(--texto)}

.resposta{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);padding:var(--e4);margin-bottom:var(--e3)}
.resposta .estado{display:flex;justify-content:space-between;align-items:center;gap:var(--e2);margin-bottom:var(--e3);flex-wrap:wrap}
.resposta .estado small{font-size:var(--t-xs);color:var(--texto-3)}
.resposta .final{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
details.fala{margin-top:var(--e3);border-top:1px solid var(--linha);padding-top:var(--e2)}
details.fala summary,details.tempo summary{display:flex;align-items:center;gap:var(--e2);min-height:var(--alvo);cursor:pointer;
  font-size:var(--t-sm);color:var(--texto-2);list-style:none;border-radius:var(--r-sm)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-left:4px;margin-top:-4px;transition:transform var(--dur)}
details[open] summary::after{transform:rotate(225deg);margin-top:4px}
details.fala p{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--texto-2);font-size:var(--t-sm);padding-bottom:var(--e2)}
details.tempo{margin-top:var(--e5)}
.eventos{list-style:none;margin:0;padding:0 0 0 var(--e2);border-left:2px solid var(--linha)}
.eventos li{position:relative;padding:0 0 var(--e3) var(--e4);font-size:var(--t-sm);color:var(--texto-2)}
.eventos li::before{content:"";position:absolute;left:-7px;top:6px;width:10px;height:10px;border-radius:50%;
  background:var(--superficie);border:2px solid var(--linha-forte)}
.eventos time{display:block;font-size:12px;color:var(--texto-3);font-variant-numeric:tabular-nums}

/* ---------- login ---------- */
.entrar{min-height:100dvh;display:grid;place-items:center;padding:var(--e5) var(--e4)}
.cartao-entrar{width:100%;max-width:380px;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r-lg);padding:var(--e6) var(--e5)}
.entrar .emblema{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--acento-fundo);color:var(--acento-texto);margin-bottom:var(--e4)}
.entrar h1{margin-bottom:var(--e1)}
.entrar .sub{color:var(--texto-2);font-size:var(--t-sm);margin-bottom:var(--e5)}
.entrar .campo{margin-bottom:var(--e4)}
.entrar .ajuda{margin-top:var(--e4);font-size:var(--t-xs);color:var(--texto-3);text-align:center}
.erro{display:flex;gap:var(--e2);align-items:flex-start;background:var(--perigo-fundo);color:var(--perigo);
  border-radius:var(--r-sm);padding:var(--e3);font-size:var(--t-sm);margin-bottom:var(--e4)}

main.sem-menu{padding:0;max-width:none}
.msg .baixar{padding:0 4px}
.ficha h1.cod{margin:0}
@media (max-width:420px){.rot-sair{display:none}.topo-in{gap:var(--e2)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}