/* Console de Joy Stonethorn — claro e escuro, sem dependência externa.
   As fontes são as do sistema: nenhuma requisição sai daqui, o que deixa a
   CSP fechada em 'self'. */

:root, :root[data-tema="claro"]{
  --bg:#f7f3ea; --bg-2:#fffdf7; --bg-3:#efe9dc; --bg-4:#e7e0d0;
  --ink:#231f19; --ink-soft:#544c41; --ink-mute:#6f6659;
  --gold:#b1892f; --gold-hover:#9a7526; --gold-ink:#7c5f1d; --on-gold:#231f19;
  --gold-fraco:rgba(177,137,47,.1);
  --line:rgba(35,31,25,.15); --line-2:rgba(35,31,25,.08);
  --campo:#fffdf7; --campo-foco:#ffffff;
  --ok:#2f6b46; --ok-fraco:rgba(47,107,70,.1);
  --err:#a83a24; --err-fraco:rgba(168,58,36,.1);
  --aviso:#8a5a12; --aviso-fraco:rgba(138,90,18,.12);
  --sombra:0 14px 34px rgba(60,50,32,.13);
  --sombra-forte:0 22px 54px rgba(60,50,32,.2);
}

:root[data-tema="escuro"]{
  --bg:#0b0e10; --bg-2:#0f1316; --bg-3:#141a1e; --bg-4:#1a2126;
  --ink:#e8e4d6; --ink-soft:#b9b5a6; --ink-mute:#7a786f;
  --gold:#c9a64a; --gold-hover:#d8b662; --gold-ink:#c9a64a; --on-gold:#0b0e10;
  --gold-fraco:rgba(201,166,74,.13);
  --line:rgba(232,228,214,.12); --line-2:rgba(232,228,214,.06);
  --campo:rgba(11,14,16,.6); --campo-foco:rgba(11,14,16,.85);
  --ok:#7ec79b; --ok-fraco:rgba(126,199,155,.12);
  --err:#d98b7a; --err-fraco:rgba(217,139,122,.12);
  --aviso:#d9b56a; --aviso-fraco:rgba(217,181,106,.12);
  --sombra:0 18px 42px rgba(0,0,0,.5);
  --sombra-forte:0 26px 60px rgba(0,0,0,.62);
}

:root{
  --serif:Georgia,'Times New Roman',Times,serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:var(--gold-ink);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::selection{background:var(--gold);color:var(--on-gold)}

.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-ink);
}
.titulo{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.1;margin-top:6px}
.titulo em{font-style:italic;color:var(--gold-ink)}
.sub{color:var(--ink-mute);font-size:13.5px;margin-top:8px}

/* ---------------- Botões e campos ---------------- */
button{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 16px;border:0;border-radius:3px;background:var(--gold);color:var(--on-gold);
  cursor:pointer;transition:background .18s,opacity .18s,border-color .18s,color .18s;
}
button:hover{background:var(--gold-hover)}
button:disabled{opacity:.5;cursor:default}
button.fantasma{
  background:transparent;border:1px solid var(--line);color:var(--ink-soft);padding:8px 12px;
}
button.fantasma:hover{background:transparent;border-color:var(--gold);color:var(--gold-ink)}
button.mini{padding:6px 10px;font-size:10px;letter-spacing:.1em}

.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);
}
input,select,textarea{
  width:100%;background:var(--campo);border:1px solid var(--line);border-radius:3px;
  padding:11px 12px;transition:border-color .18s,background .18s;
}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--gold);background:var(--campo-foco);
}
input::placeholder,textarea::placeholder{color:var(--ink-mute)}
textarea{resize:vertical;min-height:80px}
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}

.aviso{font-size:13px;min-height:1px;margin-bottom:4px;color:var(--err)}
.aviso.ok{color:var(--ok)}
.nota{font-size:12.5px;color:var(--ink-mute);margin-top:18px;line-height:1.7}

/* ---------------- Login ---------------- */
.tela-login{display:grid;place-items:center;padding:24px}
.cartao-login{
  width:100%;max-width:390px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:4px;padding:32px 28px 26px;box-shadow:var(--sombra-forte);position:relative;
}
.cartao-login::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.cartao-login form{margin-top:22px}
.cartao-login button[type="submit"]{width:100%;padding:13px}

.tema-flutuante{
  position:fixed;top:16px;right:16px;width:36px;height:36px;border-radius:50%;padding:0;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-soft);
  display:grid;place-items:center;font-size:15px;
}
.tema-flutuante:hover{background:var(--bg-3);border-color:var(--gold);color:var(--gold-ink)}

/* ---------------- Estrutura do painel ---------------- */
.topo{
  position:sticky;top:0;z-index:20;background:var(--bg-2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:12px 20px;flex-wrap:wrap;
}
.marca{font-family:var(--serif);font-size:19px;white-space:nowrap}
.marca em{font-style:italic;color:var(--gold-ink)}
.topo .espaco{flex:1}
.usuario{font-family:var(--mono);font-size:11px;color:var(--ink-mute);white-space:nowrap}
.selo{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;border-radius:2px;border:1px solid var(--line);color:var(--ink-mute);
}
.selo.alerta{color:var(--aviso);border-color:var(--aviso);background:var(--aviso-fraco)}

.abas{
  display:flex;gap:2px;padding:0 12px;background:var(--bg-2);
  border-bottom:1px solid var(--line);overflow-x:auto;position:sticky;top:61px;z-index:19;
}
.abas button{
  background:transparent;border:0;border-bottom:2px solid transparent;color:var(--ink-mute);
  border-radius:0;padding:12px 14px;white-space:nowrap;
}
.abas button:hover{background:transparent;color:var(--ink)}
.abas button[aria-selected="true"]{color:var(--gold-ink);border-bottom-color:var(--gold)}

main{max-width:1120px;margin:0 auto;padding:24px 20px 70px}
.secao{display:none}
.secao.ativa{display:block}
.secao > h2{
  font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:4px;
}
.secao > .sub{margin-bottom:20px}

/* ---------------- Cartões de número ---------------- */
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:26px}
.cartao{
  background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:15px 16px;
}
.cartao .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-mute);
}
.cartao .v{font-family:var(--serif);font-size:30px;line-height:1.1;margin-top:5px}
.cartao .v.pequeno{font-size:18px}
.cartao.destaque{border-color:var(--gold);background:var(--gold-fraco)}

/* ---------------- Blocos e tabelas ---------------- */
.bloco{
  background:var(--bg-2);border:1px solid var(--line);border-radius:4px;
  padding:20px 18px;margin-bottom:20px;
}
.bloco h3{font-family:var(--serif);font-weight:400;font-size:20px;margin-bottom:4px}
.bloco .sub{margin-bottom:16px}
.barra{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.barra .campo{margin-bottom:0;flex:1;min-width:150px}
.barra .campo.curto{flex:0 0 150px}

.tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:560px}
th{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);text-align:left;font-weight:400;padding:9px 8px;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:11px 8px;border-bottom:1px solid var(--line-2);vertical-align:top;font-size:13.5px}
tbody tr:hover{background:var(--bg-3)}
td.acoes{white-space:nowrap;width:1%}
td.acoes .grupo{display:flex;gap:6px}
.num{font-family:var(--serif);font-size:20px}
.num.fraco{color:var(--ink-mute);font-size:15px}
.mono{font-family:var(--mono);font-size:11.5px}
.quando{font-family:var(--mono);font-size:10.5px;color:var(--ink-mute);white-space:nowrap}
.recorte{display:block;max-width:280px;overflow-wrap:break-word;color:var(--ink-mute);font-size:12px}
.serifado{font-family:var(--serif);font-size:16px}
.vazio{text-align:center;color:var(--ink-mute);font-size:13.5px;padding:26px 0}
tr.inativo{opacity:.5}

.etiqueta{
  display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:2px;border:1px solid var(--line);
  color:var(--ink-mute);white-space:nowrap;
}
.etiqueta.novo{color:var(--gold-ink);border-color:var(--gold);background:var(--gold-fraco)}
.etiqueta.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-fraco)}
.etiqueta.err{color:var(--err);border-color:var(--err);background:var(--err-fraco)}

.detalhe{background:var(--bg-3)}
.detalhe .interno{padding:14px 10px;display:flex;flex-wrap:wrap;gap:22px}
.detalhe h4{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:400;margin-bottom:7px;
}
.detalhe ul{list-style:none;min-width:145px;font-size:13px}
.detalhe li{display:flex;justify-content:space-between;gap:14px;padding:2px 0}
.detalhe li b{font-weight:600}
.pct{font-family:var(--mono);font-size:9.5px;color:var(--ink-mute);margin-left:4px}

.mensagem{font-size:13px;margin-top:10px;min-height:1px;color:var(--ok)}
.mensagem.err{color:var(--err)}

@media (max-width:640px){
  .titulo{font-size:26px}
  main{padding:18px 14px 60px}
  .topo{padding:10px 14px}
  .abas{top:57px}
  .bloco{padding:16px 14px}
}