/* publico.css: folha unica das paginas publicas sem autenticacao (landing, os
   tres retornos do Asaas, as quatro paginas legais da Task 5, a pagina de
   exclusao de conta da Task 7).

   Sobria de proposito (decisao D6 do Weslley, plano P6 legal): tipografia de
   sistema, paleta neutra, sem identidade visual. Marca e landing de vendas
   sao tarefa propria, com briefing proprio, e nao se decide dentro de uma
   peca juridica.

   ⛔ Zero @import, zero fonte externa, zero CDN: a CSP do docroot depende de
   mod_headers (R36 do CLAUDE.md, sem o modulo nao sai header nenhum), e a
   pagina de exclusao de conta da Task 7 vai ter CSP com script-src 'self'.
   Tudo mora neste arquivo, nenhum atributo style="" nem tag <style> inline.

   Classes publicadas, o contrato com as Tasks 5 e 7: .pagina, .cabecalho,
   .conteudo, .rodape, .aviso. */

:root {
  /* Diz ao motor do navegador que a pagina suporta os DOIS esquemas, para
     que widget nativo (scrollbar, checkbox sem estilo) escolha sozinho
     antes de qualquer CSS nosso rodar. A Task 7 (pagina de exclusao de
     conta, um FORMULARIO) e quem mais precisa disto: sem ele, um campo sem
     estilo fica claro sobre fundo escuro. */
  color-scheme: light;
  --cor-fundo: #ffffff;
  --cor-fundo-destaque: #f6f7f9;
  --cor-texto: #1b1f23;
  --cor-texto-suave: #4b5563;
  --cor-borda: #d0d7de;
  --cor-link: #0b5a8a;
  --cor-aviso-fundo: #fff8e6;
  --cor-aviso-borda: #c99700;
  --cor-aviso-texto: #5c4400;
  --cor-erro: #b3261e;
  --cor-erro-fundo: #fdecea;
  --raio: 8px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --cor-fundo: #12161c;
    --cor-fundo-destaque: #1a1f27;
    --cor-texto: #e6e9ee;
    --cor-texto-suave: #b0b8c1;
    --cor-borda: #2a2f37;
    --cor-link: #7ec4ec;
    --cor-aviso-fundo: #2a2410;
    --cor-aviso-borda: #8a6d00;
    --cor-aviso-texto: #f0d878;
    --cor-erro: #ff8a80;
    --cor-erro-fundo: #3a1a17;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: var(--cor-link);
}

.pagina {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

.cabecalho {
  margin-bottom: 2rem;
}

.cabecalho h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 0.4rem;
}

.cabecalho p {
  color: var(--cor-texto-suave);
  margin: 0;
  font-size: 1.05rem;
}

.conteudo section {
  margin-bottom: 1.75rem;
}

.conteudo h2 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 0.6rem;
}

.conteudo h3 {
  font-size: 1.05rem;
  margin: 1rem 0 0.5rem;
}

.conteudo p, .conteudo li {
  margin: 0 0 0.75rem;
}

.conteudo ul, .conteudo ol {
  padding-left: 1.4rem;
}

.aviso {
  border: 1px solid var(--cor-aviso-borda);
  background: var(--cor-aviso-fundo);
  color: var(--cor-aviso-texto);
  border-radius: var(--raio);
  padding: 1.1rem 1.3rem;
}

.aviso h2 {
  margin-top: 0;
  color: inherit;
}

.aviso p:last-child {
  margin-bottom: 0;
}

.rodape {
  border-top: 1px solid var(--cor-borda);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.rodape nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-bottom: 0.9rem;
}

.rodape nav a {
  text-decoration: underline;
}

.rodape p {
  margin: 0;
}

/* Preparo Mn-5 (fix round 1): a Task 7 e uma pagina de FORMULARIO (telefone
   e senha) sob CSP `default-src 'self'`, isto e, sem `<style>` nem
   `style=""` possivel ali. As regras abaixo ja existem aqui, na folha unica,
   antes de a Task 7 precisar delas. */

label {
  display: block;
  margin: 0 0 0.35rem;
  font-weight: 600;
}

input {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin: 0 0 1rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font: inherit;
}

/* A caixa de confirmacao da pagina de exclusao de conta (Task 7). O seletor
   generico `input` acima veste CAMPO DE TEXTO (bloco, largura total), e isso
   esta errado para uma caixa de marcar: sem estas duas regras ela ocupa a
   linha inteira e o rotulo cai embaixo, longe dela. Como a pagina roda sob
   `default-src 'self'`, nao existe `<style>` nem `style=""` la para corrigir
   caso a caso: tudo mora aqui, na folha unica. */
input[type="checkbox"] {
  display: inline-block;
  width: auto;
  margin: 0 0.5rem 0 0;
  vertical-align: baseline;
}

.confirmacao {
  font-weight: 400;
  margin: 0 0 1.25rem;
}

button {
  display: inline-block;
  padding: 0.65rem 1.2rem;
  border: 1px solid var(--cor-link);
  border-radius: var(--raio);
  background: var(--cor-link);
  color: var(--cor-fundo);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cor-link);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .pagina {
    padding: 1.5rem 1rem 2rem;
  }
}