/* ============================================================================
   RGFIT — CSS global do app.
   ============================================================================

   Carregado por base.html. Cobre regras que Tailwind via CDN não consegue
   estilizar (elementos limitados de CSS, principalmente <option>).

   Convenção: usar paleta RG já definida em base.html
     - #0A0A0A  rg-preto    (fundo body)
     - #1A1A1A  rg-cinza    (cards, fundo de option)
     - #2A2A2A  contraste   (borders, hover/checked)
     - #C20235  rg-vermelho (acento)
     - #FFFFFF  branco      (texto principal)
   ============================================================================ */


/* ----------------------------------------------------------------------------
   Bug 12 — Contraste de <option> no tema escuro
   ----------------------------------------------------------------------------

   `<option>` é elemento muito limitado em CSS: NÃO herda estilos do <select>
   pai. Browser desenha o dropdown aberto usando defaults do SO (fundo branco
   no Windows/Linux). Combinado com `color: white` herdado do body, texto
   fica invisível — operador acha que dropdown está vazio.

   Regras dedicadas pra todo <option> ficar legível no tema escuro RG.

   Caveat: Safari macOS ignora a maioria dessas regras (decisão delegada ao
   AppKit). RGFIT é uso interno no Windows/Edge — Chromium-first. Catalogado
   em docs/historico/etapa-3-pendencias.md como dívida técnica pra revalidar
   em deploy/produção se algum operador usar Mac.
   ---------------------------------------------------------------------------- */

select option {
    background-color: #1A1A1A;   /* rg-cinza */
    color: #FFFFFF;
}

select option:checked {
    background-color: #2A2A2A;   /* contraste sutil pra "selecionado" */
    color: #FFFFFF;
}

/* Hover varia muito por browser/SO. Chrome/Edge respeitam, Firefox quase não,
   Safari ignora. Definir pra cobrir o caso comum. */
select option:hover {
    background-color: #2A2A2A;
    color: #FFFFFF;
}

/* Placeholder do <option value=""> (ex: "Selecione…") — fica visualmente
   distinto pra reforçar que não é opção válida. */
select option[value=""] {
    color: rgba(255, 255, 255, 0.4);   /* white/40 — bate com text-white/40 do Tailwind */
}


/* ----------------------------------------------------------------------------
   Tipografia de documento legal (.doc-legal) — Fatia 1
   ----------------------------------------------------------------------------

   Os três documentos (Termos, Política, Termo de Responsabilidade) chegam como
   HTML semântico PURO: <h2>, <p>, <ul>, <ol>, <table>, <strong>. Sem classes
   Tailwind, e assim tem que continuar — é texto jurídico, não se edita uma
   palavra (nem um atributo) por motivo de layout.

   Como o Tailwind aqui é o CDN base (sem o plugin @tailwindcss/typography, que
   exigiria trocar a URL do <script> e mexer no CSP de TODA página), a
   tipografia vem daqui: um bloco de descendentes de .doc-legal. É o mesmo
   princípio do bloco de <option> acima — CSS local cobre o que o CDN não cobre.

   Se um documento não renderizar bem, o ajuste é NESTE bloco.
   ---------------------------------------------------------------------------- */

.doc-legal {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
}

/* Cabeçalho PRÓPRIO dos documentos entregues (`<article class="documento-legal">`
   com <header><h1>+.subtitulo+.entidade+.versao</header>). O layout não renderiza
   header próprio quando há conteúdo — quem manda é o do documento, e estas regras
   dão a ele a hierarquia visual certa. Sem isto, subtítulo/entidade/versão saem com
   o mesmo peso do corpo do texto. */
.doc-legal .documento-legal > header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.doc-legal .documento-legal > header h1 { margin-top: 0; font-size: 1.875rem; }

.doc-legal .subtitulo,
.doc-legal .entidade,
.doc-legal .versao {
    margin: 0.25rem 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
}

.doc-legal .versao { color: rgba(255, 255, 255, 0.7); }

.doc-legal h1,
.doc-legal h2,
.doc-legal h3,
.doc-legal h4 {
    color: #FFFFFF;
    font-weight: 700;
    line-height: 1.3;
}

.doc-legal h1 { font-size: 1.5rem;   margin: 2.5rem 0 1rem; }
.doc-legal h2 { font-size: 1.25rem;  margin: 2.25rem 0 0.875rem; }
.doc-legal h3 { font-size: 1.05rem;  margin: 1.75rem 0 0.75rem; }
.doc-legal h4 { font-size: 1rem;     margin: 1.5rem 0 0.5rem; }

/* Primeiro heading do documento não empurra o topo (o <header> da casca já
   deu o respiro). */
.doc-legal > :first-child { margin-top: 0; }

.doc-legal p { margin: 0.875rem 0; }

.doc-legal strong, .doc-legal b { color: #FFFFFF; font-weight: 600; }
.doc-legal em, .doc-legal i { font-style: italic; }

.doc-legal a {
    color: #C20235;                    /* rg-vermelho */
    text-decoration: underline;
    /* Documento jurídico costuma trazer URL longa (ANPD, e-mail do DPO) —
       sem isto estoura a caixa no celular. */
    overflow-wrap: anywhere;
}

.doc-legal ul, .doc-legal ol { margin: 0.875rem 0; padding-left: 1.5rem; }
.doc-legal ul { list-style: disc; }
.doc-legal ol { list-style: decimal; }
.doc-legal li { margin: 0.375rem 0; }
.doc-legal li::marker { color: rgba(255, 255, 255, 0.35); }
/* Listas aninhadas (cláusula 3.1.1) mudam o marcador pra não virar sopa de bolinhas. */
.doc-legal ul ul { list-style: circle; margin: 0.375rem 0; }
.doc-legal ol ol { list-style: lower-alpha; margin: 0.375rem 0; }

/* Tabelas (matriz de dados tratados × finalidade × base legal). O wrapper de
   scroll é o próprio bloco: tabela larga rola dentro do artigo em vez de
   fazer a PÁGINA rolar de lado no celular. */
.doc-legal table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.9rem;
}

.doc-legal th, .doc-legal td {
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.doc-legal th {
    background-color: #1A1A1A;         /* rg-cinza */
    color: #FFFFFF;
    font-weight: 600;
}

.doc-legal blockquote {
    border-left: 3px solid rgba(255, 255, 255, 0.15);
    padding-left: 1rem;
    margin: 1.25rem 0;
    color: rgba(255, 255, 255, 0.6);
}

.doc-legal hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 2rem 0;
}


/* -----------------------------------------------------------------------------
   Item 15.1-b — AUTOFILL do Chromium contra o tema escuro
   -----------------------------------------------------------------------------

   Sintoma: campo autopreenchido fica com fundo AZUL-CLARO e texto PRETO, e o
   tema escuro quebra. Apareceu no ícone de olho do 15.1 (invisível sobre o
   azul), mas o olho só foi o mensageiro: ele é `absolute` POR CIMA do input,
   então é o primeiro elemento que fica DENTRO do campo sem ser pintado junto.

   ★ É o Bug 12 outra vez, uma tag acima. Lá o `<option>` era desenhado com o
   padrão do SO por cima do tema; aqui é o `<input>` autopreenchido. Mesma
   forma, mesmo arquivo, mesma razão de este arquivo existir.

   ══ O QUE FOI MEDIDO, no Chrome REAL com campo autopreenchido de verdade
   (DevTools, medição do Igor — headless NÃO dispara autofill):

     estado inicial   bg rgb(232,240,254) · boxShadow none · textFill rgb(0,0,0)

     TESTE 1  `background-color` com `!important` INLINE, +500ms
              -> rgb(232,240,254). ⛔ NÃO VENCE: o autofill do Chromium pinta
                 FORA da cascata de autor. A correção simples está descartada
                 por medição, não por preferência.

     TESTE 2  `box-shadow: inset 0 0 0 1000px` + `-webkit-text-fill-color`
              -> bg segue rgb(232,240,254) no COMPUTADO, e NA TELA o campo
                 ficou escuro com texto branco. ⚠️ O `backgroundColor` MENTE
                 aqui: o `inset` pinta por cima sem alterar a propriedade. Não
                 procure a correção no `backgroundColor` computado.

     TESTE 3  o `focus:ring` sobrevive? -> NÃO. O `inset` COME o anel.
     TESTE 4  as duas sombras empilhadas -> COEXISTEM (regra do `:focus` abaixo).

   ⛔ SEM `transition: background-color 9999s`. O folclore existe pra "segurar"
   a cor até a transição nunca terminar; medido, o `inset` pega de primeira e
   não precisa disso. E o preço seria alto: os campos JÁ carregam a utilitária
   `transition` do Tailwind (0.15s) com `color`, `border-color` e `box-shadow`
   na lista — sequestrá-la mataria os efeitos de `:focus` que hoje funcionam.

   ══ POR QUE TRÊS REGRAS E NÃO UMA

   Censo dos 92 campos que o autofill alcança (`text`/`email`/`password`/`tel`):
     53x  bg-white/5     (translúcido — efetivo #161616..#1c1c1c conforme o pai)
     35x  bg-rg-cinza    (opaco #1A1A1A)
      3x  bg-black/30    (efetivo #070707 — `onboarding/conheca_horarios.html`)
      1x  via macro `_telefone.html` (herda um dos dois primeiros)

   #1A1A1A cobre 89 deles com diferença IMPERCEPTÍVEL (pior caso 1.04:1 contra
   o fundo real). Os 3 de `bg-black/30` dariam 1.157:1 — degrau comparável ao
   de página↔card (#0A0A0A vs #1A1A1A = 1.138:1), que se vê. ⚠️ E logo esses
   3 são os mais expostos: formulário PÚBLICO com nome+e-mail+celular, a forma
   que o autofill de endereço mais reconhece. Daí a 2ª regra.

   A 3ª regra devolve o anel de foco. ⚠️ Ela é escopada por CLASSE de propósito:
   só 15 dos 92 campos declaram `focus:ring-1 focus:ring-rg-vermelho` (e os 15
   são `bg-rg-cinza`, por isso a cor é #1A1A1A). Uma regra `input:...:focus`
   genérica DARIA anel aos outros 77, que nunca tiveram — mudança visual que
   ninguém pediu.

   ⛔ NADA DE `:-moz-autofill` NESTA LISTA. Medido: `input:-moz-autofill` é
   SyntaxError no Chromium, e um seletor inválido invalida a REGRA INTEIRA —
   `input:-webkit-autofill, input:-moz-autofill { … }` foi aceito como
   0 regra(s). Firefox fica sem tratamento, como o Bug 12 já deixa o Safari:
   RGFIT é Chromium-first, declarado no topo deste arquivo.

   ★ O `caret-color` NÃO É NO-OP — MEDIDO no Chrome real, campo
   autopreenchido, via DevTools:
     getComputedStyle(input).caretColor  ->  rgb(0, 0, 0)

   O autofill força `color` ALÉM do `-webkit-text-fill-color`, e o cursor de
   texto herda dele: fica PRETO. Sem esta linha, ele ficaria invisível sobre
   o #1A1A1A que o `inset` DESTA MESMA REGRA pinta — a correção criaria o
   problema, e logo no campo que a pessoa vai editar.
   ⛔ Remover reintroduz um cursor invisível. Nenhum check do guard toca
   `caret-color`; a trava aqui é este parágrafo.
   ✓ Pra RECONFERIR daqui a um ano, com um campo autopreenchido:
     getComputedStyle(document.querySelector('input:-webkit-autofill')).caretColor
   -------------------------------------------------------------------------- */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    box-shadow: inset 0 0 0 1000px #1A1A1A;
    -webkit-text-fill-color: #FFFFFF;
    caret-color: #FFFFFF;
}

/* Os 3 campos de `bg-black/30` (conheca_horarios). A barra da classe do
   Tailwind precisa de escape: `.bg-black\/30`. Medido: parseia e casa. */
.bg-black\/30:-webkit-autofill,
.bg-black\/30:-webkit-autofill:hover,
.bg-black\/30:-webkit-autofill:focus,
.bg-black\/30:-webkit-autofill:active {
    box-shadow: inset 0 0 0 1000px #070707;
}

/* O anel de foco dos 15 que o declaram. ORDEM MEDIDA no Chrome do Igor:
   o anel PRIMEIRO (desenha por fora), o preenchimento depois.
   ⚠️ Só `.focus\:ring-rg-vermelho` — os outros 77 campos não têm anel e não
   podem ganhar um aqui. */
.focus\:ring-rg-vermelho:-webkit-autofill:focus {
    box-shadow: 0 0 0 1px #C20235, inset 0 0 0 1000px #1A1A1A;
}