/*
 * Estilo das paginas PUBLICAS estaticas: os documentos legais (/termos,
 * /privacidade, /termos-motorista, o indice /legal) e a exclusao de conta
 * (/excluir-conta). Um arquivo so para as cinco: regra de cor repetida em
 * dois lugares e o defeito que mais volta neste projeto.
 *
 * Direcao visual C · "Mais Waze" (docs/DESIGN.md): chao creme, tinta
 * azul-noite, cartoes brancos com sombra "de carimbo" (deslocada, sem
 * desfoque), avisos PREENCHIDOS sem contorno, o coral so no unico botao
 * principal (texto escuro: branco sobre coral reprova), e a fonte Nunito em
 * pesos 700-900. No escuro, o chao da noite e os MESMOS acentos.
 *
 * A Nunito e a do proprio app: o build web publica o asset do design system
 * em /assets/packages/regional_rides_design_system/fonts/. Nada vem de fora
 * (a CSP so aceita fonte da propria origem e do gstatic); sem o arquivo, a
 * fonte do sistema assume com a mesma escala.
 */
@font-face {
  font-family: "Nunito";
  src: url("/assets/packages/regional_rides_design_system/fonts/Nunito%5Bwght%5D.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --chao: #FFF8E8;          /* creme */
  --cartao: #FFFFFF;
  --carimbo: #F0DDB0;       /* sombra de carimbo do cartao */
  --divisoria: #FFF4D6;     /* creme100 */
  --tinta: #1E2A3A;
  --tinta-suave: #3E5266;   /* 7,6:1 sobre o creme */
  --link: #0F5E6B;          /* turquesaTexto */
  --turquesa: #3CC4D8;
  --foco: #0F7A8A;          /* turquesa700 */
  --info-fundo: #E4F7FA;
  --info-texto: #0F5E6B;
  --alerta-fundo: #FFF4D6;
  --alerta-texto: #6B4A00;
  --minuta-fundo: #FFE3D9;  /* coral100 */
  --minuta-texto: #7A2A14;  /* coralTexto */
  --coral: #FF6B4A;
  --coral-tinta: #2A0E05;   /* 6,4:1 sobre o coral */
  --coral-carimbo: #C23E22;
}

@media (prefers-color-scheme: dark) {
  :root {
    --chao: #121416;        /* noite900 */
    --cartao: #1F2326;      /* noite800 */
    --carimbo: #07080A;     /* no escuro o carimbo e MAIS escuro que o cartao */
    --divisoria: #2A2F33;
    --tinta: #FFF8E8;
    --tinta-suave: #C9D3DE; /* nevoa */
    --link: #3CC4D8;
    --foco: #3CC4D8;
    --info-fundo: #10343B;
    --info-texto: #A6E6EF;
    --alerta-fundo: #3A2E0A;
    --alerta-texto: #FFDF8A;
    --minuta-fundo: #4A2014;
    --minuta-texto: #FFB8A3;
    --coral-carimbo: #8A2A16;
  }
}

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
  background: var(--chao);
  color: var(--tinta);
}
main { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
h1, h2, h3, h4 { font-weight: 900; line-height: 1.2; }
h1 { font-size: 2rem; margin: 12px 0 8px; }
h2 { font-size: 1.4rem; margin: 32px 0 8px; }
h3 { font-size: 1.15rem; margin: 24px 0 8px; }
h4 { font-size: 1rem; margin: 20px 0 6px; }
a { color: var(--link); font-weight: 800; text-underline-offset: 3px; }
a:focus-visible, .botao:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
ul, ol { padding-left: 1.4em; }
li { margin: 6px 0; }

/* Caminho de volta: selo preenchido, como os chips do app. */
.trilha { font-size: 0.95rem; }
.trilha a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 18px;
  background: var(--cartao);
  box-shadow: 0 3px 0 var(--carimbo);
  text-decoration: none;
  color: var(--tinta);
}

.nota, .situacao { color: var(--tinta-suave); font-size: 0.95rem; }
.idiomas { margin: 12px 0 20px; font-size: 0.95rem; }
.idiomas a[aria-current] { font-weight: 900; text-decoration: none; color: inherit; }

/* Aviso: caixa PREENCHIDA no creme quente, texto ambar escuro, sem contorno. */
.aviso {
  background: var(--alerta-fundo);
  color: var(--alerta-texto);
  padding: 14px 16px;
  border-radius: 20px;
  margin: 16px 0;
}
.aviso strong { display: block; margin-bottom: 4px; font-weight: 900; }

/* Informacao: o mesmo formato, no turquesa suave. */
.info {
  background: var(--info-fundo);
  color: var(--info-texto);
  padding: 14px 16px;
  border-radius: 20px;
  margin: 16px 0;
}
.info a { color: inherit; }

/* "Minuta": selo preenchido no coral suave, nunca o coral cheio. */
.rotulo-minuta {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 10px;
  background: var(--minuta-fundo);
  color: var(--minuta-texto);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.875rem;
}

/* O texto do documento num cartao branco que "salta" do creme. */
#texto:not(:empty) {
  background: var(--cartao);
  border-radius: 26px;
  box-shadow: 0 4px 0 var(--carimbo);
  padding: 4px 20px 16px;
  margin: 16px 0;
}

/* Indice: cada documento e uma linha tocavel num cartao, com a seta. */
.lista-documentos {
  list-style: none;
  padding: 6px 16px;
  margin: 16px 0;
  background: var(--cartao);
  border-radius: 26px;
  box-shadow: 0 4px 0 var(--carimbo);
}
.lista-documentos li { margin: 0; border-bottom: 2px solid var(--divisoria); }
.lista-documentos li:last-child { border-bottom: 0; }
.lista-documentos a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-size: 1.0625rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--tinta);
}
.lista-documentos a::after { content: "›"; font-size: 1.6rem; font-weight: 900; color: var(--tinta-suave); }
/* Dentro do cartao de outra lingua a lista ja esta num cartao: sem degrau. */
section[lang] .lista-documentos { background: none; box-shadow: none; padding: 0; margin: 8px 0 0; }

/* O UNICO botao principal da pagina: coral, texto escuro, carimbo. */
.botao {
  display: inline-block;
  margin: 8px 0;
  padding: 18px 28px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--coral-tinta);
  box-shadow: 0 5px 0 var(--coral-carimbo);
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 900;
}

/* Blocos das outras linguas: cartao, sem linha solta. */
section[lang] {
  background: var(--cartao);
  border-radius: 26px;
  box-shadow: 0 4px 0 var(--carimbo);
  padding: 4px 20px 12px;
  margin-top: 28px;
}

footer {
  border-top: 2px solid var(--divisoria);
  margin-top: 40px;
  padding-top: 12px;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}
footer p { margin: 4px 0; }