/* Telas do portal (login, troca de senha, administração): mesma identidade do Hub de Manuais. */
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600 800; font-display: swap; src: url(/fonts/BricolageGrotesque-var.woff2) format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-weight: 400; font-display: swap; src: url(/fonts/Ubuntu-400.woff2) format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-weight: 500; font-display: swap; src: url(/fonts/Ubuntu-500.woff2) format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-weight: 700; font-display: swap; src: url(/fonts/Ubuntu-700.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(/fonts/IBMPlexMono-500.woff2) format('woff2'); }

:root {
  --ouro: #f5b301; --ouro-tinta: #8f6400; --ouro-veu: #fbeec7;
  --fundo: #f7f4ec; --papel: #fffdf8; --papel-2: #f0ebdf;
  --tinta: #1e1a12; --tinta-2: #645d4e; --linha: #e3dbc9;
  --ok: #217a49; --ok-veu: #def1e5; --erro: #b3261e; --erro-veu: #fbe3e1;
  --f-titulo: 'Bricolage Grotesque', 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
  --f-texto: 'Ubuntu', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-codigo: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ouro-tinta: #f5b301; --ouro-veu: #3a2e0e; --fundo: #12110e; --papel: #1b1915; --papel-2: #24211b;
    --tinta: #f2eee4; --tinta-2: #a9a190; --linha: #322e26; --ok: #57c98a; --ok-veu: #16301f; --erro: #ff8a80; --erro-veu: #3b1714;
    color-scheme: dark;
  }
}
[data-tema="escuro"] {
  --ouro-tinta: #f5b301; --ouro-veu: #3a2e0e; --fundo: #12110e; --papel: #1b1915; --papel-2: #24211b;
  --tinta: #f2eee4; --tinta-2: #a9a190; --linha: #322e26; --ok: #57c98a; --ok-veu: #16301f; --erro: #ff8a80; --erro-veu: #3b1714;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 400 16px/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; }
.codigo { font-family: var(--f-codigo); font-weight: 500; }

.campo { display: grid; gap: 6px; }
.campo label { font-size: .88rem; font-weight: 500; }
.campo input, .campo select { width: 100%; border: 1px solid var(--linha); background: var(--papel); border-radius: 10px; padding: 11px 13px; outline: none; }
.campo input:focus, .campo select:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px var(--ouro-veu); }
.campo small { color: var(--tinta-2); font-size: .8rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; border-radius: 10px; padding: 11px 18px; border: 1px solid var(--linha); background: var(--papel-2); font-weight: 500; }
.btn.prim { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }
.btn.ouro { background: var(--ouro); border-color: var(--ouro); color: #1b1608; }
.btn.perigo { color: var(--erro); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.peq { padding: 6px 11px; font-size: .85rem; border-radius: 8px; }
.aviso { border-radius: 10px; padding: 10px 13px; font-size: .92rem; }
.aviso.erro { background: var(--erro-veu); color: var(--erro); }
.aviso.ok { background: var(--ok-veu); color: var(--ok); }
.aviso[hidden] { display: none; }

/* superfícies do navegador com as cores do tema */
::selection { background: var(--ouro); color: #1b1608; }
html { scrollbar-color: var(--linha) var(--fundo); accent-color: var(--ouro); }
input { caret-color: var(--ouro-tinta); }
@media (max-width: 760px) { .btn, .btn.peq { min-height: 44px; } .campo input, .campo select { min-height: 44px; } }