/* ==========================================================================
   IEL Sergipe: CSS das paginas de politicas (includes/politicas-body.php, o template das tres rotas Politica de Privacidade,
   Termos de Uso e Mapa do Site; mais os componentes que so ele usa em includes/components.php: tab_bar(), policy_items(),
   policy_index(), sitemap_index() e info_card(); e o HTML do CMS que iel_politicas_texto(), em lib/politicas.php, devolve com
   as classes deste arquivo; carregado pelas tres paginas, pela chave `'css' => 'politicas.css'` do page_head()).

   Onda 6 da migracao do Tailwind (docs/tailwind/migracao-tailwind.md). Copiado do template e dos componentes, sem apagar nada do
   `style.css` antigo. Os tokens (cor, fonte, espaco, raio, sombra), o miolo `.secao__interno` e o hero (variante
   `hero-pagina--politicas`, global, da onda 0) vem do `styles.css`, que carrega antes. O reset (`hr`, `a`, `dl`, `dd`, `p`: margem
   zero, `hr` de altura zero e filete de 1px, link que herda a cor) e o do `reset-preflight.css`.

   HTML do CMS: o texto rico dos itens passa por iel_politicas_texto(), que INJETA as classes `politicas__paragrafo`,
   `politicas__link`, `politicas__caixa`, `politicas__par`, `politicas__rotulo`, `politicas__valor` (e os modificadores
   `--destaque`) em `<p>`, `<a>`, `<dl>`, `<dt>` e `<dd>`. Elas sao classes, e nao seletores de descendente (`.politicas__item p`),
   porque so o que a funcao reconhece recebe estilo: um `<a>` dentro de `<li>`, um `<p class="...">` ou uma lista do editor ficam
   com o chao do reset, como antes. O `<hr>` entre os itens (`politicas__regua`) nasce no PHP do painel.

   Figma: Screen/Desktop/Politica-de-Privacidade (11865:2411, arte de 1600px), Tablet (12015:11019, 768px), Mobile Termos-de-Uso
   (11981:6350, 390px). Breakpoints (min-width, mobile-first, em `em`): md = 48em, xl = 80em. A margem lateral (1rem, 2.5rem em
   48em, 11.875rem em 80em) e o token `--margem-x`.
   ========================================================================== */

/* ==========================================================================
   POLITICAS - secao do documento: coluna unica ate o tablet; texto e barra lateral lado a lado no desktop
   ========================================================================== */

.politicas {
  width: 100%;
  padding: var(--espaco-xl) var(--margem-x);
}

.politicas__interno {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xl);
}

.politicas__documento {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
  gap: var(--espaco-xl);
}

/* Paragrafo: o de abertura e todo `<p>` do texto do CMS (classe injetada por iel_politicas_texto) */
.politicas__paragrafo {
  font-size: var(--fonte-16);
  font-weight: 400;
  line-height: var(--entrelinha-16-24);
  color: var(--tinta-dark);
}

/* Link dentro do paragrafo do CMS (classe injetada) */
.politicas__link { color: var(--iel-dark); }
.politicas__link:hover { text-decoration-line: underline; }

/* O indice aparece duas vezes: depois da abertura (ate o desktop) e na barra lateral (a partir do desktop) */
.politicas__indice--lateral { display: none; }

.politicas__lateral {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--espaco-md);
}

/* ==========================================================================
   ITENS DO DOCUMENTO (iel_politicas_painel e policy_items) - itens numerados separados por reguas
   ========================================================================== */

.politicas__itens {
  display: flex;
  flex-direction: column;
}

.politicas__regua {
  margin-block: var(--espaco-xl);
  border-color: var(--tinta-lighter);
}

.politicas__item {
  display: flex;
  scroll-margin-top: 7rem;
  flex-direction: column;
  gap: var(--espaco-md);
}

.politicas__item-titulo {
  font-size: var(--fonte-20);
  font-weight: 700;
  line-height: var(--entrelinha-20-28);
  color: var(--corporativo-pure);
}

/* Caixa de pares rotulo/valor (o contato do DPO): `<dl>` que iel_politicas_texto monta quando todas as linhas do `<p>` sao "Rotulo: valor" */
.politicas__caixa {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  border: 1px solid var(--tinta-lighter);
  border-radius: var(--raio-lg);
  background-color: var(--tinta-white);
  padding: var(--espaco-lg);
  font-size: var(--fonte-14);
  line-height: var(--entrelinha-14-20);
}

.politicas__par {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2xs);
}

.politicas__rotulo {
  font-weight: 700;
  color: var(--tinta-dark);
}
.politicas__rotulo--destaque { color: var(--iel-darkest); }

.politicas__valor {
  font-weight: 400;
  color: var(--tinta-dark);
}
.politicas__valor--destaque {
  font-weight: 700;
  color: var(--iel-darkest);
}

.politicas__valor-link:hover { text-decoration-line: underline; }

/* ==========================================================================
   ABAS DO DOCUMENTO (tab_bar) - as tres paginas como abas; links de verdade, a ativa leva aria-current
   ========================================================================== */

.abas-documento {
  display: flex;
  border-bottom-width: 1px;
  border-color: var(--tinta-lighter); /* a cor vale para os quatro lados, como o `border-ink-lighter` fazia; so a de baixo tem largura */
}

.abas-documento__item {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.abas-documento__rotulo {
  padding: var(--espaco-sm) var(--espaco-xs);
  text-align: center;
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--iel-darkest);
}
.abas-documento__item[aria-current="page"] .abas-documento__rotulo { font-weight: 700; }

/* Rotulo curto no mobile, completo do tablet para cima */
.abas-documento__rotulo-longo { display: none; }

.abas-documento__barra {
  width: 100%;
  height: .25rem;
  background-color: transparent;
}
.abas-documento__item[aria-current="page"] .abas-documento__barra { background-color: var(--iel-pure); }

/* ==========================================================================
   INDICE DO DOCUMENTO (policy_index) - titulo do grupo e sub-itens recuados, cada um ancorado no item do texto
   ========================================================================== */

.indice-documento {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
  border: 1px solid var(--tinta-lightest);
  border-radius: var(--raio-lg);
  background-color: var(--tinta-white);
  padding: var(--espaco-lg);
  box-shadow: var(--sombra-card);
}

.indice-documento__titulo {
  font-size: var(--fonte-20);
  font-weight: 700;
  line-height: var(--entrelinha-20-28);
  color: var(--iel-darkest);
}

.indice-documento__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  font-size: var(--fonte-14);
  line-height: var(--entrelinha-14-20);
}

.indice-documento__grupo-titulo {
  font-weight: 700;
  color: var(--iel-darkest);
}

.indice-documento__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  padding-left: var(--espaco-sm);
}

.indice-documento__link {
  font-weight: 400;
  color: var(--tinta-dark);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.indice-documento__link:hover {
  color: var(--iel-dark);
  text-decoration-line: underline;
}

/* ==========================================================================
   CARTAO DE APOIO (info_card) - "Canal do Titular" e "Documentos relacionados" na barra lateral
   O tom (`--branco`, com filete, ou `--suave`, sem filete e com fundo cinza) vem sempre no HTML.
   ========================================================================== */

.cartao-info {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
  border-radius: var(--raio-lg);
  padding: var(--espaco-lg);
  box-shadow: var(--sombra-card);
}
.cartao-info--branco {
  border: 1px solid var(--tinta-lightest);
  background-color: var(--tinta-white);
}
.cartao-info--suave { background-color: var(--tinta-lightest); }

.cartao-info__titulo {
  font-size: var(--fonte-20);
  font-weight: 700;
  line-height: var(--entrelinha-20-28);
  color: var(--iel-darkest);
}

.cartao-info__texto {
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}

.cartao-info__contato {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2xs);
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
}

.cartao-info__contato-rotulo { color: var(--tinta-darkest); }

.cartao-info__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
}

/* Link do contato e dos documentos relacionados */
.cartao-info__link { color: var(--iel-dark); }
.cartao-info__link:hover { text-decoration-line: underline; }

/* ==========================================================================
   MAPA DO SITE (sitemap_index) - secoes numeradas com filete de destaque, titulo e descricao; cada item e uma linha clicavel
   No mobile a linha empilha (numero, rotulo, caminho); do tablet para cima o caminho volta para a direita, como na arte.
   ========================================================================== */

.mapa-site {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xl);
}

.mapa-site__secao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

.mapa-site__cabecalho {
  display: flex;
  align-items: stretch;
  gap: var(--espaco-md);
}

.mapa-site__filete {
  width: .25rem;
  flex-shrink: 0;
  border-radius: .125rem;
  background-color: var(--iel-dark);
}

.mapa-site__texto {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  flex-direction: column;
  gap: var(--espaco-2xs);
}

.mapa-site__titulo {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
}

.mapa-site__numero {
  font-size: var(--fonte-12);
  font-weight: 700;
  line-height: var(--entrelinha-12-16);
  color: var(--iel-dark);
}

.mapa-site__nome {
  font-size: var(--fonte-20);
  font-weight: 700;
  line-height: var(--entrelinha-20-28);
  color: var(--iel-darkest);
}

.mapa-site__descricao {
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}

.mapa-site__lista {
  overflow: hidden;
  border: 1px solid var(--tinta-lighter);
  border-radius: var(--raio-lg);
  background-color: var(--tinta-white);
}

/* Filete entre uma linha e a seguinte (a primeira nao tem); a cor vale para os quatro lados, como o `border-ink-lighter` fazia */
.mapa-site__item + .mapa-site__item {
  border-top-width: 1px;
  border-color: var(--tinta-lighter);
}

.mapa-site__link {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2xs);
  padding: var(--espaco-sm) var(--espaco-md);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.mapa-site__link:hover { background-color: var(--iel-lightest); }

.mapa-site__rotulos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-2xs);
}

.mapa-site__item-numero {
  font-size: var(--fonte-12);
  font-weight: 500;
  line-height: var(--entrelinha-12-16);
  color: var(--iel-dark);
}

.mapa-site__item-rotulo {
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  color: var(--iel-darkest);
}

.mapa-site__caminho {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}

/* ==========================================================================
   RESPONSIVO
   Sempre no fim do arquivo, em ordem crescente (48em, 80em); dentro de cada @media, na ordem dos blocos acima.
   ========================================================================== */

@media (min-width: 48em) {
  .politicas { padding-block: var(--espaco-64); }

  .politicas__item {
    gap: var(--espaco-xl);
    padding-left: var(--espaco-lg);
  }

  .abas-documento__rotulo {
    padding-inline: var(--espaco-md);
    font-size: var(--fonte-16);
    line-height: var(--entrelinha-16-24);
  }
  .abas-documento__rotulo-curto { display: none; }
  .abas-documento__rotulo-longo { display: inline; }

  .mapa-site__link {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-md);
  }
  .mapa-site__rotulos {
    flex-direction: row;
    align-items: center;
    gap: var(--espaco-sm);
  }
}

@media (min-width: 80em) {
  .politicas__interno {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--espaco-xl);
  }

  .politicas__indice--movel { display: none; }
  .politicas__indice--lateral { display: block; }

  .politicas__lateral {
    width: 24rem;
    flex-shrink: 0;
  }
}