/* Opinio — site. Tokens iguais aos do protótipo (src/styles.css): marinho da casca,
   verde-água da 3AJ, claro e escuro. Cor de tela sai SEMPRE de variável do :root.
   As fontes Sofia Sans e IBM Plex Mono entram servidas do próprio domínio (pendência
   da etapa 1); até lá valem as de sistema que já estão na pilha. */
:root{
  color-scheme: light;
  --rail:#0d2552; --rail-2:#081a3d; --rail-ink:#ffffff;
  --title:#0d2552;
  --teal:#0f9e8d; --teal-hover:#0b8274; --teal-ink:#ffffff; --teal-wash:#e0f4f1; --teal-line:#9fd9cf;
  --ground:#ffffff; --surface:#ffffff; --surface-2:#f4f7fb; --surface-3:#e7edf6;
  --ink:#0f1d33; --ink-2:#44546a; --ink-3:#66758a;
  --line:#d6dfeb; --line-2:#e8eef5;
  --good:#16924f; --good-ink:#0d6b39; --good-wash:#e3f4ea;
  --warn:#f0a91c; --warn-ink:#7d5200; --warn-wash:#fdf1d6;
  --crit:#d0453b; --crit-ink:#a42a22; --crit-wash:#fbe6e4;
  --s1:#2a78d6; --s2:#0f9e8d; --s3:#eb6834; --s4:#8a5cd6; --s5:#d9a320;
  --pos:#1b9e5a; --neu:#a3aebd; --neg:#d0453b;
  --a1:#0f7a5a; --a2:#56b58f; --a3:#c6cdd7; --a4:#ef9a6a; --a5:#cf4a3b;
  --q1:#dff3ef; --q2:#ade3d9; --q3:#62c6b6; --q4:#1f9d8c; --q5:#0c6a5f;
  --q1-ink:#0f1d33; --q2-ink:#0f1d33; --q3-ink:#0f1d33; --q4-ink:#ffffff; --q5-ink:#ffffff;
  --grid:#e6ebf2; --axis:#c3cddb;
  --shadow:0 1px 2px rgba(13,37,82,.06),0 8px 24px rgba(13,37,82,.09);
  --radius:10px; --radius-sm:6px;
  --f-display:"Sofia Sans Extra Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Sofia Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme: dark;
  --rail:#071731; --rail-2:#040e22; --title:#cddcff;
  --teal:#2cc2ae; --teal-hover:#45d3c0; --teal-ink:#04211d; --teal-wash:#0e3532; --teal-line:#1d6b62;
  --ground:#0a1322; --surface:#101b2f; --surface-2:#15223a; --surface-3:#1c2b46;
  --ink:#e6edf7; --ink-2:#b3c0d2; --ink-3:#8c9bb0;
  --line:#26375a; --line-2:#1d2c48;
  --good:#3cc47a; --good-ink:#7fe0a8; --good-wash:#123726;
  --warn:#f5b93d; --warn-ink:#ffd27a; --warn-wash:#3a2c0d;
  --crit:#ef6b60; --crit-ink:#ffa39b; --crit-wash:#3e1a19;
  --s1:#5b9cf0; --s2:#2cc2ae; --s3:#f08a5d; --s4:#a888ec; --s5:#e8bb45;
  --pos:#3cc47a; --neu:#6f7d92; --neg:#ef6b60;
  --a1:#2aa37b; --a2:#6cc7a1; --a3:#5b6a80; --a4:#f0a57a; --a5:#e5604f;
  --q1:#123b39; --q2:#165a53; --q3:#1d8577; --q4:#3bb5a3; --q5:#86e3d4;
  --q1-ink:#e6edf7; --q2-ink:#e6edf7; --q3-ink:#ffffff; --q4-ink:#04211d; --q5-ink:#04211d;
  --grid:#1e2d48; --axis:#34476b;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  color-scheme: dark;
  --rail:#071731; --rail-2:#040e22; --title:#cddcff;
  --teal:#2cc2ae; --teal-hover:#45d3c0; --teal-ink:#04211d; --teal-wash:#0e3532; --teal-line:#1d6b62;
  --ground:#0a1322; --surface:#101b2f; --surface-2:#15223a; --surface-3:#1c2b46;
  --ink:#e6edf7; --ink-2:#b3c0d2; --ink-3:#8c9bb0;
  --line:#26375a; --line-2:#1d2c48;
  --good:#3cc47a; --good-ink:#7fe0a8; --good-wash:#123726;
  --warn:#f5b93d; --warn-ink:#ffd27a; --warn-wash:#3a2c0d;
  --crit:#ef6b60; --crit-ink:#ffa39b; --crit-wash:#3e1a19;
  --s1:#5b9cf0; --s2:#2cc2ae; --s3:#f08a5d; --s4:#a888ec; --s5:#e8bb45;
  --pos:#3cc47a; --neu:#6f7d92; --neg:#ef6b60;
  --a1:#2aa37b; --a2:#6cc7a1; --a3:#5b6a80; --a4:#f0a57a; --a5:#e5604f;
  --q1:#123b39; --q2:#165a53; --q3:#1d8577; --q4:#3bb5a3; --q5:#86e3d4;
  --q1-ink:#e6edf7; --q2-ink:#e6edf7; --q3-ink:#ffffff; --q4-ink:#04211d; --q5-ink:#04211d;
  --grid:#1e2d48; --axis:#34476b;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.5 var(--f-body)}
#app{min-height:100vh;display:flex;flex-direction:column}
h1{margin:0 0 12px;color:var(--title);font:800 34px/1.1 var(--f-display)}
h2{margin:0 0 8px;color:var(--title);font:700 22px/1.2 var(--f-display)}
p{margin:0 0 12px;color:var(--ink-2)}
.pular{position:absolute;left:-999px;top:0;background:var(--teal);color:var(--teal-ink);padding:8px 12px;border-radius:0 0 var(--radius-sm) 0}
.pular:focus{left:0}
.carregando{margin:48px 16px;color:var(--ink-2);text-align:center}
.marca{font:800 28px/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase}
.marca-sub{font:500 12px/1 var(--f-mono);opacity:.75}
.nota{color:var(--ink-3);font-size:14px}
.vazio{color:var(--ink-3);background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--radius-sm);padding:12px}

/* ---------- Botões e campos ---------- */
.botao{font:600 15px/1 var(--f-body);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 14px;cursor:pointer}
.botao:hover{background:var(--surface-3)}
.botao:focus-visible,.entrada:focus-visible,.menu-item:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.botao[disabled]{opacity:.6;cursor:progress}
.botao.principal{width:100%;background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
.botao.principal:hover{background:var(--teal-hover)}
.botao.liso{width:100%;background:none;border-color:transparent;color:var(--ink-2);margin-top:8px}
.botao.liso:hover{background:var(--surface-2)}
.campo{display:block;margin:0 0 14px}
.campo span{display:block;margin-bottom:4px;color:var(--ink-2);font-size:14px;font-weight:600}
.entrada{width:100%;font:400 16px/1.3 var(--f-body);color:var(--ink);background:var(--surface);border:1px solid var(--axis);border-radius:var(--radius-sm);padding:11px 12px}
.entrada.codigo{font:500 24px/1.2 var(--f-mono);letter-spacing:.3em;text-align:center}
.aviso{background:var(--teal-wash);border:1px solid var(--teal-line);border-radius:var(--radius-sm);color:var(--ink);padding:10px 12px}
.aviso.erro{background:var(--crit-wash);border-color:var(--crit);color:var(--crit-ink)}
.aviso.alerta{background:var(--warn-wash);border-color:var(--warn);margin-bottom:16px}
.aviso.alerta p{color:var(--warn-ink)}
.selo{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;background:var(--warn-wash);color:var(--warn-ink);font:500 12px/1.6 var(--f-mono)}

/* ---------- Telas de acesso ---------- */
.acesso{flex:1;display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px 16px;background:var(--surface-2)}
.acesso-marca{display:flex;align-items:baseline;gap:8px;color:var(--title)}
.cartao{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.acesso-rodape{color:var(--ink-3);font:400 12px/1.4 var(--f-mono)}
.passos{margin:0 0 16px;padding-left:20px;color:var(--ink-2)}
.passos li{margin-bottom:6px}
.qr{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 16px}
.qr img{width:200px;height:200px;background:var(--rail-ink);border-radius:var(--radius-sm);padding:8px}
.segredo{font:500 14px/1.4 var(--f-mono);word-break:break-all;text-align:center}

/* ---------- Área logada ---------- */
.topo{display:flex;align-items:baseline;gap:8px;background:var(--rail);color:var(--rail-ink);padding:12px 16px}
.topo-quem{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;opacity:.85}
.botao.no-topo{align-self:center;background:none;border-color:var(--rail-ink);color:var(--rail-ink);padding:7px 12px}
.botao.no-topo:hover{background:var(--rail-2)}
.casca{flex:1;display:flex;align-items:stretch}
.menu{flex:0 0 232px;background:var(--surface-2);border-right:1px solid var(--line-2);padding:12px 8px}
.menu ul{list-style:none;margin:0;padding:0}
.menu-item{display:flex;justify-content:space-between;align-items:baseline;gap:8px;width:100%;font:600 15px/1.3 var(--f-body);color:var(--ink);background:none;border:0;border-radius:var(--radius-sm);padding:9px 10px;text-align:left;cursor:pointer}
button.menu-item:hover{background:var(--surface-3)}
.menu-item[aria-current="page"]{background:var(--teal-wash);color:var(--ink)}
.menu-item.apagado{color:var(--ink-3);font-weight:400;cursor:default}
.menu-item small{font:400 11px/1 var(--f-mono);color:var(--ink-3);white-space:nowrap}
.miolo{flex:1;min-width:0;max-width:820px;padding:28px 20px}
.bloco{margin:0 0 24px}
.lista{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.lista li{padding:10px 12px;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.lista li:last-child{border-bottom:0}
.lista b{color:var(--ink)}
.rodape{padding:12px 16px;border-top:1px solid var(--line-2);color:var(--ink-3);font:400 12px/1.4 var(--f-mono)}

@media (max-width:720px){
  .casca{flex-direction:column}
  .menu{flex:none;border-right:0;border-bottom:1px solid var(--line-2);padding:8px}
  .menu ul{display:flex;gap:4px;overflow-x:auto}
  .menu li{flex:none}
  .menu-item{width:auto;white-space:nowrap}
  .menu-item small{display:none}
  .miolo{padding:20px 16px}
}