/* ═══════════════════════════════════════════════════════════════════════
   🎨 PÁTIO — O DESIGN SYSTEM (contrato único, PRD §4.1)

   ⚖️ POR QUE EXISTE UM ARQUIVO SÓ. As telas da v1 nasceram cada uma com o
   seu `:root` copiado — 5 cópias da mesma paleta. É a mesma doença que
   custou os títulos pelados em 18/08: duas leis para a mesma coisa, e a
   permissiva aprova o que a real reprova. Aqui é UM lugar; tela que quiser
   cor inventa token, não hex solto.

   ⚖️ A RÉGUA DA CLONAGEM (PRD §0): *posição e comportamento = deles; pixel
   de identidade = nosso*. Este arquivo é o "pixel nosso". O laranja
   `#E4570F` da Polsia está VETADO por lei de marca da casa — o nosso âmbar
   é `#b45309`. O glitch RGB deles (assinatura de marca) foi substituído
   pela PRENSA: sombra dupla verde/âmbar da nossa paleta.

   🔒 Zero @import, zero @font-face remoto, zero url() de fora: a CSP de
   produção derruba qualquer coisa de outro host, e fonte que não carrega
   troca a tela inteira em silêncio.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── tinta e papel ─────────────────────────────────────────────────── */
  --papel:        #fbfaf6;
  --papel2:       #f2f0e8;
  --papel3:       #e8e5da;
  --tinta:        #16150f;
  --tinta2:       #57544a;
  --tinta-fraca:  #6f6b5e;
  --tinta3:       #8c887b;
  --linha:        #d9d5c6;
  --linha2:       #c2bda9;

  /* ── os três significados (nunca decorativos) ──────────────────────── */
  --obra:   #b45309;   /* atenção / esperando você  (âmbar da casa) */
  --pe:     #15803d;   /* no ar / feito */
  --fatal:  #b91c1c;   /* erro / limite / falhou */

  /* ── superfícies especiais ─────────────────────────────────────────── */
  --preto:        #161511;
  --preto-tx:     #fbfaf6;
  --terminal:     #12110c;
  --terminal-tx:  #a3e39b;
  --veu:          rgba(22, 21, 15, .45);

  /* ── tipografia (famílias nossas, contrato rígido igual ao deles) ──── */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ── medidas ───────────────────────────────────────────────────────── */
  --raio:      2px;
  --col-login: 340px;
  --col-onb:   480px;
  --col-modal: 520px;
  --chat:      340px;
}

/* ⚖️ TEMA ÚNICO, BRANCO — ordem do dono (20/08): *"NÃO QUERO O TEMA ESCURO
   AGORA, QUERO TUDO BRANCO IGUAL POLSIA"*. Não há bloco `prefers-color-scheme`
   nem `[data-theme]` de propósito: é escolha, não esquecimento. Por isso
   `body` pinta o fundo explicitamente — página transparente pega o fundo do
   host e some no escuro. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 15px/1.55 var(--serif);
}

/* ── a faixa-terminal narradora (o "> ..." deles, no topo de tudo) ────── */
.term {
  background: var(--terminal);
  color: var(--terminal-tx);
  font: 11.5px/1.7 var(--mono);
  padding: 8px 14px;
  min-height: 34px;
  white-space: pre-wrap;
}

/* ── cabeçalho ────────────────────────────────────────────────────────── */
.cab {
  border-bottom: 1px solid var(--linha);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.marca { font: 600 22px/1 var(--serif); letter-spacing: -.02em; }
.marca a { color: inherit; text-decoration: none; }

/* ── tipos de texto ───────────────────────────────────────────────────── */
h1 {
  font: 600 clamp(28px, 5vw, 42px)/1.14 var(--serif);
  letter-spacing: -.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}
h2 { font: 600 16px/1.3 var(--serif); margin: 0 0 6px; }

.sub  { font: 13.5px/1.6 var(--serif); color: var(--tinta2); margin: -10px 0 24px; }
.eco  { text-align: center; font: italic 13.5px/1.4 var(--serif);
        color: var(--tinta2); margin: 9px 0 0; }
.letra{ font: 11px/1.6 var(--mono); letter-spacing: .05em; color: var(--tinta3);
        text-align: center; margin: 12px 0 0; }
.rot  { font: 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
        color: var(--tinta2); }
.num  { font-variant-numeric: tabular-nums; }

/* ── botões: bloco preto cheio + eco itálico (a hierarquia deles) ─────── */
.acao {
  display: block; width: 100%;
  background: var(--preto); color: var(--preto-tx);
  border: 1px solid var(--preto);
  font: 600 13px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 17px 12px; border-radius: var(--raio);
  cursor: pointer; min-height: 50px; text-align: center;
  text-decoration: none;
}
.acao:hover { opacity: .88; }
.acao:disabled { opacity: .35; cursor: not-allowed; }
.acao:focus-visible { outline: 2px solid var(--obra); outline-offset: 2px; }

.acao.clara {
  background: var(--papel2); color: var(--tinta);
  border: 1px solid var(--linha2);
}
.acao.fina {
  padding: 10px 14px; min-height: 0; width: auto; display: inline-block;
  font-size: 11px;
}
.acao.perigo { background: var(--fatal); border-color: var(--fatal); }

.volta {
  background: none; border: 0; padding: 6px 0; margin-bottom: 8px;
  font: 11px/1 var(--mono); letter-spacing: .1em;
  color: var(--tinta2); cursor: pointer; text-decoration: none;
  display: inline-block;
}
.volta:hover { color: var(--tinta); }

.ou {
  display: flex; align-items: center; gap: 12px; margin: 22px 0;
  font: 10px/1 var(--mono); letter-spacing: .14em; color: var(--tinta3);
}
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

/* ── campos ───────────────────────────────────────────────────────────── */
label { display: block; font: 10px/1 var(--mono); letter-spacing: .12em;
        text-transform: uppercase; color: var(--tinta2); margin: 0 0 7px; }
input[type=email], input[type=text], textarea, select {
  width: 100%; font: 15px/1.5 var(--serif); color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linha2);
  border-radius: var(--raio); padding: 13px 12px; margin-bottom: 14px;
}
textarea { min-height: 130px; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--obra); outline-offset: 1px;
}

/* ── cartões ──────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--linha); background: var(--papel2);
  border-radius: var(--raio); padding: 15px;
}
.card.viva { background: var(--papel); }
.card.escolhido { border-color: var(--obra); border-width: 2px; background: var(--papel); }

/* ── selos de estado (o significado, não a decoração) ─────────────────── */
.selo {
  display: inline-block; font: 600 9.5px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 7px; border-radius: var(--raio); border: 1px solid;
}
.selo.feito     { color: var(--obra);  border-color: var(--obra); }
.selo.no-ar     { color: var(--pe);    border-color: var(--pe); }
.selo.falhou    { color: var(--fatal); border-color: var(--fatal); }
.selo.fila      { color: var(--tinta3); border-color: var(--linha2); }

/* ── "EM BREVE": a fachada honesta tem cara de fachada ────────────────── */
.embreve { opacity: .62; }
.embreve .acao { background: var(--papel3); color: var(--tinta-fraca);
                 border-color: var(--linha2); }

/* ── o efeito PRENSA (nosso substituto do glitch RGB deles) ───────────── */
.prensa {
  text-shadow: 0.5px 0.5px 0 rgba(21, 128, 61, .55),
              -0.5px -0.5px 0 rgba(180, 83, 9, .45);
}

/* ── modal ────────────────────────────────────────────────────────────── */
.veu {
  position: fixed; inset: 0; background: var(--veu);
  display: none; align-items: center; justify-content: center;
  padding: 18px; z-index: 40; overflow-y: auto;
}
.veu.on { display: flex; }
.modal {
  width: 100%; max-width: var(--col-modal); background: var(--papel);
  border: 1px solid var(--linha2); border-radius: var(--raio);
  padding: 22px; margin: auto;
}

/* ── amostra/monoespaçado de prova ────────────────────────────────────── */
.amostra {
  font: 10.5px/1.75 var(--mono); color: var(--tinta2);
  background: var(--papel3); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 9px 11px;
  overflow-x: auto; white-space: pre; margin: 10px 0;
}

/* ── rodapé ───────────────────────────────────────────────────────────── */
.rodape {
  border-top: 1px solid var(--linha); padding: 14px 18px; margin-top: 40px;
  font: 10px/1.7 var(--mono); letter-spacing: .06em; color: var(--tinta3);
  display: flex; gap: 16px; flex-wrap: wrap;
}
.rodape a { color: var(--tinta2); text-decoration: none; }
.rodape a:hover { color: var(--tinta); }

/* ── tabela (extrato de créditos, faturas) ────────────────────────────── */
.tab { width: 100%; border-collapse: collapse; font: 12px/1.5 var(--mono); }
.tab th { text-align: left; font-weight: 600; letter-spacing: .08em;
          text-transform: uppercase; font-size: 9.5px; color: var(--tinta2);
          border-bottom: 1px solid var(--linha2); padding: 8px 6px; }
.tab td { border-bottom: 1px solid var(--linha); padding: 9px 6px;
          font-variant-numeric: tabular-nums; }
.tab .mais { color: var(--pe); } .tab .menos { color: var(--fatal); }

/* ── acessibilidade ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.pula {
  position: absolute; left: -9999px;
}
.pula:focus { left: 8px; top: 8px; background: var(--papel); padding: 8px;
              border: 1px solid var(--tinta); z-index: 99; }