/* Tokens canônicos do DESIGN.md §3. Módulo novo nasce com estes — a primeira
   versão deste arquivo inventou nomes próprios (`--fundo`, `--cartao`,
   `--acento`), o que quebra a premissa de o hub inteiro compartilhar
   vocabulário e reprovou na revisão de design. */
:root, [data-theme="dark"] {
  --bg:           #061423;
  --surface:      rgba(255,255,255,.045);
  --surface-2:    rgba(255,255,255,.03);
  --border:       rgba(255,255,255,.10);
  --text:         #eaf2f8;
  --text-muted:   #93a7ba;
  --accent:       #2fd15a;
  --accent-text:  #2fd15a;  /* no escuro o verde funciona como texto */
  --on-accent:    #061423;
  --warning:      #ffb020;
  --warning-text: #ffb020;
}

[data-theme="light"] {
  --bg:           #eaeff6;
  --surface:      #ffffff;
  --surface-2:    #dde5ef;
  --border:       #ccd7e4;
  --text:         #0f1c2b;
  --text-muted:   #54637a;
  --accent:       #22a847;
  /* O verde da marca dá 2,02:1 sobre branco — inacessível como tipo. Por isso
     o claro separa preenchimento de texto (DESIGN.md §3). */
  --accent-text:  #147233;
  --on-accent:    #061423;
  --warning:      #b7791f;
  --warning-text: #8a5a12;
}

@font-face {
  font-family: 'Poppins';
  src: url('./vendor/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./vendor/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  /* Vendorada porque a CSP é `font-src 'self'` — Google Fonts é bloqueado. O
     fallback do sistema segura a tela se o .woff2 falhar (DESIGN.md §4). */
  font: 500 15px/1.5 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

#conteudo {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

h2 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.sub { margin: 0; color: var(--text-muted); font-size: 13px; }
.oculto { display: none !important; }

.cartao {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media (max-width: 480px) {
  .cartao { flex-direction: column; align-items: stretch; }
}

.alerta {
  border-color: var(--warning);      /* cheia é preenchimento… */
  color: var(--warning-text);        /* …e a variante -text pinta o tipo */
  font-size: 13px;
  display: block;
  /* A mensagem pode carregar texto de erro externo; sem isto ela estoura em
     tela estreita (P-032). */
  overflow-wrap: break-word;
}

.botao {
  min-height: 44px;                  /* alvo de toque mínimo (P-031) */
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.botao:disabled { opacity: .6; cursor: default; }

.botao-secundario {
  background: transparent;
  color: var(--accent-text);
  border: 1px solid var(--accent);
  /* `flex` e `min-height` explícitos: a regra do `.botao` já se aplica (o link
     tem as duas classes), mas deixar implícito convida o próximo a mexer sem
     perceber que 44px é requisito, não estética. */
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-top: 10px;
}

.titulo-lista { margin: 18px 0 8px; }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}

.item-topo { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
/* Flex-item nasce com `min-width: auto`, então um título longo SEM espaços —
   nome de empresa colado, que é o que vem de bureau — não encolhe e estoura a
   linha (P-032). */
.item-titulo { min-width: 0; overflow-wrap: break-word; font-weight: 600; }

.quando { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

.item-corpo {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  /* A primeira linha decide, as outras dão contexto — as quebras vêm do módulo
     que pediu a decisão. */
  white-space: pre-line;
  /* `anywhere` e não `break-word`: os dois quebram a palavra, mas só o
     primeiro entra no cálculo de largura mínima, que é justamente o caso em
     que um nome de credor colado estouraria. */
  overflow-wrap: anywhere;
}