/* documento.css
   -------------------------------------------------------------------
   Estilo compartido por las páginas tipo "hoja de documento oficial":
   guia-de-uso.html, terminos-y-condiciones.html, avisos-de-privacidad.html.

   Los colores (acento + claro/oscuro) vienen de tema.css como variables;
   este archivo se enlaza DESPUÉS de tema.css.

   Para agregar una página nueva con este mismo estilo, copia cualquiera
   de esas 3 y enlaza tema.css + este archivo, y el bootstrap
   Sistema/temaGuardado.js en el <head>.
   ------------------------------------------------------------------- */

body {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--texto);
  background: var(--fondo);
  margin: 0;
  /* max(...) con env(safe-area-inset-*): respeta el notch / la barra de
     estado cuando se abre como app instalada en iOS. En navegador
     normal env(...) vale 0. */
  padding: max(40px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.hoja-documento {
  max-width: 750px;
  margin: 0 auto;
  background: var(--superficie);
  padding: 50px 60px;
  min-height: 70vh;
  box-shadow: 0 2px 10px var(--sombra-2);
  border-radius: 2px;
}

.hoja-documento h1 {
  font-size: 26px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--texto);
}

.hoja-documento p {
  line-height: 1.6;
  color: var(--texto);
}

/* Fecha de "Última actualización" que va justo debajo del <h1> en
   terminos-y-condiciones.html y avisos-de-privacidad.html. */
.documento-fecha {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: var(--texto-2);
  margin: -8px 0 26px 0;
}

/* Sub-secciones (A, B, 3.1, 3.2...) y listas dentro de los documentos
   legales. Todo esto lo usan terminos-y-condiciones.html y
   avisos-de-privacidad.html, que se arman a partir de los .md que están
   en la raíz del proyecto. */
.hoja-documento h3 {
  font-size: 15px;
  margin: 20px 0 8px 0;
}

.hoja-documento ul {
  line-height: 1.6;
  color: var(--texto);
  padding-left: 22px;
  margin: 8px 0;
}

.hoja-documento li {
  margin-bottom: 6px;
}

.hoja-documento blockquote {
  margin: 14px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--borde-2);
  background: var(--superficie-2);
  color: var(--texto-2);
  font-size: 14px;
}

/* La tabla de precios de los Términos. El contenedor .tabla-scroll deja
   que la tabla se deslice de lado en celular sin desbordar la hoja. */
.tabla-scroll {
  overflow-x: auto;
  margin: 14px 0;
}

.hoja-documento table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.hoja-documento th,
.hoja-documento td {
  border: 1px solid var(--borde);
  padding: 8px 10px;
  text-align: left;
}

.hoja-documento th {
  background: var(--superficie-2);
}

.volver {
  display: inline-block;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: var(--color-primario);
  text-decoration: none;
}

.volver:hover {
  text-decoration: underline;
}

/* Aviso hasta arriba de avisos-de-privacidad.html y terminos-y-condiciones.html:
   deja clarísimo que la página es un ESQUELETO de secciones, no texto
   legal ya vigente, para que no se confunda con contenido revisado. */
.aviso-pendiente-revision {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 28px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--aviso-texto);
}

.aviso-pendiente-revision strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13.5px;
}

.aviso-pendiente-revision a {
  color: inherit;
  font-weight: bold;
}

/* Estados de carga/error de páginas de este estilo que traen contenido
   dinámico por fetch (ej. informacion-oficial.html) — mismas reglas que
   .mensaje-carga / .mensaje-error en plataforma.css, repetidas aquí
   porque esta hoja no se enlaza junto con esa. */
.mensaje-carga {
  color: var(--texto-2);
  font-style: italic;
  font-family: Arial, sans-serif;
}

.mensaje-error {
  color: #d9534f;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.seccion-legal {
  margin-bottom: 26px;
}

.seccion-legal h2 {
  font-size: 16px;
  margin: 0 0 8px 0;
}

/* Lista de enlaces (cuentas oficiales / fuentes oficiales) en
   informacion-oficial.html. */
.lista-enlaces-oficiales {
  line-height: 1.8;
  padding-left: 22px;
  margin: 8px 0 0 0;
}

.lista-enlaces-oficiales a {
  color: var(--color-primario);
}

/* Cada párrafo de contenido todavía sin redactar por un abogado se ve
   distinto al resto del texto (fondo e itálica), para que sea imposible
   confundirlo con contenido ya revisado y publicarlo por accidente. */
.marcador-pendiente {
  background: var(--aviso-fondo);
  border-left: 3px solid var(--aviso-borde);
  padding: 8px 12px;
  font-style: italic;
  color: var(--texto-2);
}

/* Cubre el contenido de una página pública cuando este dispositivo no
   tiene sesión iniciada (ver Sistema/bloqueoDeAcceso.js). No borra el
   contenido de abajo, solo lo tapa. */
.bloqueo-acceso {
  position: fixed;
  inset: 0;
  background: var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10;
}

.bloqueo-acceso-tarjeta {
  max-width: 360px;
  width: 100%;
  background: var(--superficie);
  border-radius: 10px;
  box-shadow: 0 2px 10px var(--sombra-2);
  padding: 32px 28px;
  text-align: center;
  font-family: Arial, sans-serif;
}

.bloqueo-acceso-tarjeta p {
  margin: 0 0 20px 0;
  font-size: 15px;
  color: var(--texto);
  line-height: 1.5;
}

.bloqueo-acceso-boton {
  display: inline-block;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: var(--color-primario-degradado, var(--color-primario));
  border-radius: 6px;
  text-decoration: none;
}

.bloqueo-acceso-boton:hover {
  filter: brightness(0.88);
}

/* En pantallas de celular, el acolchado generoso pensado para escritorio
   (60px a los lados) deja muy poco espacio para el texto — se reduce
   para que la lectura no quede apretada contra el borde. */
@media (max-width: 600px) {
  body {
    padding: max(20px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .hoja-documento {
    padding: 26px 20px;
  }
}