/* Base compartida de todas as páginas do SumiuPorra — cores, tipografia,
   layout comum. Cada página mantém no seu <style> só o que é específico
   dela. Trocar a marca (cor, raio, fonte) é editar aqui, não 20 arquivos.

   Ícones: Bootstrap Icons, autoalojados em assets/vendor/bootstrap-icons/
   (já é o padrão usado em categorias.icone na BD, ex. "bi-wallet2" — antes
   só existia na coluna, nunca renderizado). Usar <i class="bi bi-xxx"></i>.

   Fonte de títulos: Anton (estilo cartaz/poster, condensada e pesada).
   Testado trocar por Archivo Black em 2026-09-10 (mesma fonte dos
   botões, unificaria a família de destaque) — usuário achou mais
   legível, mas **revertido pro Anton** por ser mais compacta: ocupa
   bem menos largura horizontal, importante pros títulos grandes do
   hero em telas estreitas. Archivo Black segue sendo usada só nos
   botões (`--sp-fonte-botao`). Autoalojada, só o subset latin (os
   acentos do pt-BR já cabem em U+0000-00FF) — 1 peso, ~18KB, aplicada
   só em h1/h2 de destaque via .titulo-marca. Sempre em maiúsculas (a
   fonte não tem minúsculas com boa legibilidade). Corpo do texto
   segue no system-ui, sem custo de rede. */

@import url("../vendor/bootstrap-icons/bootstrap-icons.min.css");

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/anton-regular.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-black.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
  /* Paleta clara/profissional testada em 2026-09-10 (mesma direção do
     mock aprovado antes) — trocada aqui direto nos tokens, então quase
     todo o site herda automaticamente graças à consolidação de CSS.
     Nomes das variáveis mantidos (--sp-amarelo etc.) mesmo os valores
     não sendo mais amarelo/vermelho/verde saturados, pra não precisar
     tocar em cada arquivo que já usa var(--sp-amarelo) como cor de
     marca/link. */
  --sp-fundo: #faf6ee;
  --sp-fundo-alt: #ffffff;
  --sp-cartao: #ffffff;
  --sp-borda: #e2e5ea;
  --sp-texto: #12181f;
  --sp-texto-medio: #4b5563;
  --sp-texto-fraco: #7c8590;
  --sp-texto-muito-fraco: #9aa3ad;
  --sp-amarelo: #0f6e6e;
  --sp-vermelho: #c0392b;
  --sp-verde: #1a7a4c;
  --sp-azul-gov: #1351b4;
  --sp-raio: 10px;
  --sp-raio-grande: 14px;
  --sp-fonte-titulo: 'Anton', system-ui, sans-serif;
  --sp-fonte-botao: 'Archivo Black', system-ui, sans-serif;
}

*{box-sizing:border-box}
body{font-family:system-ui,sans-serif;background:var(--sp-fundo);color:var(--sp-texto);margin:0;padding-bottom:3rem}
a{color:var(--sp-amarelo)}

.titulo-marca{font-family:var(--sp-fonte-titulo);font-weight:400;text-transform:uppercase;letter-spacing:.01em}

header{display:flex;align-items:center;gap:.6rem;padding:1rem 1.2rem}
header a{color:var(--sp-amarelo);text-decoration:none;font-size:1.3rem}
header h1{font-size:1.1rem;margin:0}

/* Logo compacto (ícone + nome) pro header das páginas internas — a volta
   pro início já fica coberta por ele + pela migalha de pão abaixo, sem
   precisar de uma seta "←" redundante. */
.topo-logo{display:flex;align-items:center;gap:.35rem;font-size:.9rem;font-family:var(--sp-fonte-titulo);font-weight:400;text-transform:uppercase;letter-spacing:.01em;color:var(--sp-texto);text-decoration:none;flex:none}
.topo-logo svg{flex:none}
.topo-logo-txt{color:var(--sp-texto)}
.topo-logo-txt span{color:var(--sp-amarelo)}

/* Migalha de pão — mostra onde você está na hierarquia real do site,
   complementa (não substitui) a seta de voltar rápido do header. */
.trilha{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.78rem;color:var(--sp-texto-fraco);padding:0 1.2rem .8rem}
.trilha a{color:var(--sp-amarelo);text-decoration:none;font-size:.78rem}
.trilha a:hover{text-decoration:underline}
.trilha .sep{opacity:.5}
.trilha .atual{color:var(--sp-texto);font-weight:600}

main, form.pagina{max-width:480px;margin:0 auto;padding:0 1.2rem}

label{display:block;font-size:.85rem;color:var(--sp-texto-fraco);margin:1rem 0 .3rem}
input,select,textarea{width:100%;padding:.7rem;border-radius:var(--sp-raio);border:1px solid var(--sp-borda);background:var(--sp-cartao);color:var(--sp-texto);font-size:1rem;font-family:inherit}
input:disabled,select:disabled,textarea:disabled{opacity:.5}
textarea{resize:vertical;min-height:80px}

/* input[type=date] desenha o ícone do calendário em preto por padrão —
   invisível num fundo escuro, mas certinho num fundo claro. color-scheme
   avisa o navegador o tom do campo pra ele acertar o ícone/picker sozinho
   sem precisar de filter:invert() manual em nenhum dos dois temas. */
input[type=date]{color-scheme:light}

.msg{font-size:.9rem;min-height:1.2em;margin-top:.6rem}
.msg.erro{color:var(--sp-vermelho)}
.msg.ok{color:var(--sp-verde)}

.vazio{text-align:center;color:var(--sp-texto-fraco);padding:3rem 1rem}

/* Insígnia tipo adesivo/sticker: cor sólida, borda escura, sombra curta e
   leve rotação — dá o efeito "colado na tela", mais vistoso que um badge
   plano tradicional. */
.tag{display:inline-flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:800;padding:.2rem .55rem;border-radius:999px;border:2px solid #111;box-shadow:1.5px 2px 0 #111}
.tag.lost{background:var(--sp-vermelho);color:#fff;transform:rotate(-3deg)}
.tag.found{background:var(--sp-verde);color:#fff;transform:rotate(2deg)}

.bloco, .gcard{background:var(--sp-cartao);border:1px solid var(--sp-borda);border-radius:var(--sp-raio-grande);padding:1.1rem}

.aviso{background:var(--sp-fundo);border:1px dashed var(--sp-amarelo);border-radius:var(--sp-raio);padding:.8rem;font-size:.82rem;color:var(--sp-texto-medio)}

.oculto{display:none}

/* Modal próprio (sp-modal.js) — substitui confirm()/alert()/prompt()
   nativos do navegador, que não seguem a marca e travam a aba inteira. */
.sp-modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:400;align-items:center;justify-content:center;padding:1.2rem}
.sp-modal-overlay.aberto{display:flex}
.sp-modal-box{background:var(--sp-cartao);border:1px solid var(--sp-borda);border-radius:var(--sp-raio-grande);padding:1.4rem;width:100%;max-width:380px;box-shadow:0 12px 40px rgba(15,23,42,.25)}
.sp-modal-msg{margin:0 0 1rem;font-size:.95rem;color:var(--sp-texto);line-height:1.5}
.sp-modal-input{margin-bottom:1rem;resize:vertical;min-height:70px}
.sp-modal-acoes{display:flex;gap:.6rem}
.sp-modal-btn{flex:1;padding:.7rem;border:0;border-radius:10px;font-family:var(--sp-fonte-botao);font-weight:400;letter-spacing:.01em;font-size:.92rem;cursor:pointer}
.sp-modal-btn-principal{background:var(--sp-amarelo);color:#fff}
.sp-modal-btn-perigo{background:var(--sp-vermelho);color:#fff}
.sp-modal-btn-cancelar{background:var(--sp-fundo);color:var(--sp-texto);border:1px solid var(--sp-borda)}