/*
 * Políticas de privacidad y de uso (politicas/index.html).
 *
 * Es la página de app.css (fondo, sello, tarjetas) con lo que necesita un texto
 * largo que se consulta más que se lee: índice, tablas, listas y una columna algo
 * más ancha. Va en archivo propio porque la CSP no admite estilos en línea.
 */

/* minmax(0, 1fr): sin esto la columna crece hasta lo que pida la tabla más ancha
   y en el teléfono el texto de todas las tarjetas queda cortado a la derecha. */
.app__shell--texto {
  width: min(100%, 920px);
  grid-template-columns: minmax(0, 1fr);
}

.politica__vigencia {
  margin: 12px 0 0;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
}

/* ---------- Índice ---------- */

.indice ol {
  margin: 0;
  padding: 0 0 0 1.4em;
  columns: 2 260px;
  column-gap: 28px;
}

.indice li {
  margin: 0 0 6px;
  break-inside: avoid;
  color: var(--tinta-tenue);
}

.indice a {
  color: var(--tinta-fuerte);
  text-decoration: none;
}

.indice a:hover,
.indice a:focus-visible {
  color: var(--oro-claro);
  text-decoration: underline;
}

/* ---------- Texto de cada sección ---------- */

.politica {
  scroll-margin-top: 16px;
}

.politica h3 {
  margin: 18px 0 8px;
  font-size: 0.98rem;
  font-weight: 750;
  color: var(--tinta-alta);
}

.politica ul,
.politica ol {
  margin: 0 0 12px;
  padding-left: 1.3em;
  color: rgba(226, 232, 240, 0.8);
  line-height: 1.6;
}

.politica li {
  margin: 0 0 6px;
}

.politica li::marker {
  color: var(--oro);
}

.politica a {
  color: var(--azul-claro);
  overflow-wrap: anywhere;
}

.politica b,
.politica strong {
  color: var(--tinta-alta);
}

.politica cite {
  font-style: normal;
  color: var(--tinta-fuerte);
}

/* ---------- Tablas ---------- */

.tabla {
  width: 100%;
  margin: 4px 0 14px;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.1);
}

.tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.5;
}

.tabla th,
.tabla td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(226, 232, 240, 0.08);
}

.tabla tr:last-child td {
  border-bottom: 0;
}

.tabla th {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  background: rgba(2, 6, 23, 0.5);
}

.tabla td {
  color: rgba(226, 232, 240, 0.82);
}

.tabla td:first-child {
  font-weight: 650;
  color: var(--tinta-alta);
}

@media (max-width: 520px) {
  .tabla table {
    font-size: 0.84rem;
  }

  .tabla th,
  .tabla td {
    padding: 8px 9px;
    hyphens: auto;
  }
}

/* ---------- Contacto ---------- */

.contacto {
  margin: 4px 0 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(202, 163, 73, 0.3);
}

.contacto a {
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--oro-claro);
}

/* Las tarjetas de esta página son muchas: entran juntas, sin escalonado. */
.politica.tarjeta {
  --i: 1;
}