/*
 * Páginas legales y de soporte de Nynel Master.
 *
 * ┌─ POR QUÉ SON HTML SUELTO Y NO PANTALLAS DEL PANEL ──────────────────────┐
 * │ Estas cuatro páginas tienen que estar en pie SIEMPRE, incluso si la     │
 * │ aplicación del panel no compila, si la interfaz de programación está    │
 * │ caída o si alguien rompe el paquete de JavaScript. De ellas depende que │
 * │ la aplicación móvil siga publicada en las tiendas: Apple exige que la   │
 * │ política de privacidad sea accesible por dirección pública, y Google    │
 * │ exige además una forma de pedir la eliminación de la cuenta desde la    │
 * │ web, sin instalar nada.                                                 │
 * │                                                                         │
 * │ Una página legal que depende de que arranque una aplicación de una sola │
 * │ página es una página legal que puede desaparecer por un fallo de        │
 * │ compilación. Por eso son archivos estáticos, sin JavaScript, sin        │
 * │ dependencias y sin necesitar que la interfaz responda.                  │
 * └─────────────────────────────────────────────────────────────────────────┘
 *
 * ┌─ POR QUÉ SE REPITEN LA CABECERA Y EL PIE EN LAS CUATRO ─────────────────┐
 * │ Con cuatro páginas, montar un sistema de plantillas costaría más que    │
 * │ mantenerlas. Y hay una razón de fondo: la independencia es una VIRTUD   │
 * │ aquí. Cada página se puede abrir, imprimir, archivar o mandar por       │
 * │ correo por sí sola, que es exactamente lo que se hace con un documento  │
 * │ legal cuando alguien lo pide.                                           │
 * └─────────────────────────────────────────────────────────────────────────┘
 */

/*
 * Tipografía de marca, en su versión recortada de 34 kB.
 *
 * Es la misma que usa la carta del comensal: solo el alfabeto que se usa de
 * verdad, en vez de los 189 kB del archivo completo. Se emplea únicamente en
 * los titulares; el texto corrido va con la del sistema, que ya está en el
 * aparato y no cuesta ni un byte. En un documento que alguien abre una vez
 * para leerlo, la velocidad importa más que la uniformidad tipográfica.
 */
@font-face {
  font-family: 'Archivo';
  src: url('tipografias/archivo.woff2') format('woff2-variations');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Los colores salen de marca/tokens.json. Van como literales porque estas
     páginas no pasan por el generador de tokens: son HTML suelto a propósito. */
  --hueso: #f6f3ed;
  --loza: #ffffff;
  --ceniza: #e4e0d8;
  --carbon: #12171c;
  --humo: #5a6672;
  --brasa: #d2600f;
  --brasa-honda: #a8480a;
  --brasa-suave: #fbede1;
  --huacatay: #0b6b4f;
  --huacatay-suave: #e3f0eb;
  --ambar-hondo: #8a5a00;
  --ambar-suave: #fbf0da;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hueso);
  color: var(--carbon);
  /* 17 píxeles: son documentos largos que alguien va a leer entero, a veces en
     el móvil. Un texto legal a 14 no lo lee nadie. */
  font: 400 17px/1.65 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ──────────────────────────────────────────────────────────── CABECERA ── */

.cinta {
  height: 3px;
  background: var(--brasa);
}

.barra {
  background: var(--loza);
  border-bottom: 1px solid var(--ceniza);
}

.barra-interior,
.contenido,
.pie-interior {
  /* 42rem son unos 70 caracteres por línea, que es el ancho en el que se lee
     más rápido. Un texto legal a todo lo ancho de una pantalla de escritorio
     obliga a buscar el principio de cada renglón. */
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 20px;
}

.barra-interior {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.marca {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--carbon);
  text-decoration: none;
}

.menu {
  display: flex;
  /* 4 px de hueco más los 6 de relleno de cada enlace dejan los mismos 16 px
     de aire entre palabras que había antes, pero ahora repartidos dentro del
     área que se puede tocar en vez de fuera. */
  gap: 4px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

/*
 * Los enlaces del menú y los del pie se miden: en su forma natural salían de
 * 22 y de 16 píxeles de alto, por debajo de los 24 que exige el objetivo
 * táctil mínimo. Es el fallo típico del enlace de texto suelto, que parece
 * bastante grande en el escritorio y se vuelve imposible de acertar con el
 * pulgar en un móvil.
 *
 * La norma admite dos salidas —el enlace dentro de una frase está exento, y
 * hay excepción por separación— pero esto es la navegación principal entre los
 * cuatro documentos y se usa sobre todo desde el teléfono. Sale más barato
 * darles el tamaño que buscarles la exención.
 *
 * Lo que NO se hace es compensar el relleno con un margen negativo para que
 * todo quede donde estaba: eso devuelve las áreas tocables a tocarse entre
 * ellas y deja el problema exactamente igual, solo que más difícil de ver.
 */
.menu a,
.pie-interior a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 6px;
}

.menu a {
  color: var(--humo);
  text-decoration: none;
}

.menu a:hover,
.menu a:focus-visible {
  color: var(--carbon);
  text-decoration: underline;
}

.menu a[aria-current='page'] {
  color: var(--brasa-honda);
  font-weight: 600;
}

/* ───────────────────────────────────────────────────────────── TEXTO ── */

.contenido {
  padding-top: 32px;
  padding-bottom: 56px;
}

h1 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

h2 {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 36px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ceniza);
}

h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 24px 0 6px;
}

p,
li {
  margin: 0 0 14px;
}

ul,
ol {
  padding-left: 22px;
  margin: 0 0 16px;
}

li {
  margin-bottom: 8px;
}

a {
  color: var(--brasa-honda);
}

strong {
  font-weight: 700;
}

.fecha {
  color: var(--humo);
  font-size: 0.88rem;
  margin: 0 0 28px;
}

.entradilla {
  font-size: 1.05rem;
  color: var(--carbon);
  margin-bottom: 24px;
}

/* ───────────────────────────────────────────────────────── DESTACADOS ── */

/*
 * Los tres avisos llevan la cinta de 3 px de la marca a la izquierda, igual que
 * las tarjetas del panel y las líneas del pedido de la carta. El color dice de
 * qué tipo es, y el título dentro lo dice con palabras: nada codificado solo
 * por color, que es regla escrita en marca/tokens.json.
 */
.aviso,
.aviso-limite,
.aviso-bien {
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 3px solid;
  margin: 0 0 20px;
  font-size: 0.95rem;
}

.aviso {
  background: var(--brasa-suave);
  border-color: var(--brasa);
  color: #6d3208;
}

.aviso-limite {
  background: var(--ambar-suave);
  border-color: var(--ambar-hondo);
  color: var(--ambar-hondo);
}

.aviso-bien {
  background: var(--huacatay-suave);
  border-color: var(--huacatay);
  color: #0a4d3a;
}

.aviso p:last-child,
.aviso-limite p:last-child,
.aviso-bien p:last-child {
  margin-bottom: 0;
}

/*
 * Hueco que tiene que rellenar el titular del servicio.
 *
 * Se marca EN AMARILLO y con corchetes a propósito, para que sea imposible
 * publicarlo sin darse cuenta. Una política de privacidad con el nombre de la
 * empresa sin poner es una política que nadie revisó.
 */
.pendiente {
  background: #fff3cd;
  border: 1px dashed var(--ambar-hondo);
  border-radius: 6px;
  padding: 1px 7px;
  font-weight: 600;
  color: var(--ambar-hondo);
  white-space: nowrap;
}

/* ───────────────────────────────────────────────────────────── TABLA ── */

.tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 0.92rem;
}

.tabla th,
.tabla td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ceniza);
}

.tabla th {
  background: var(--loza);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--humo);
}

/* Las tablas anchas se deslizan dentro de su caja y no arrastran la página. */
.tabla-caja {
  overflow-x: auto;
  margin: 0 0 22px;
  border: 1px solid var(--ceniza);
  border-radius: 10px;
}

.tabla-caja .tabla {
  margin: 0;
}

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

/* ───────────────────────────────────────────────────────────── BOTÓN ── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 48 píxeles de alto: es el objetivo táctil que fija la marca para Android, y
     estas páginas se abren sobre todo desde un móvil. */
  min-height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--brasa-honda);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  margin: 4px 8px 4px 0;
}

.boton:hover,
.boton:focus-visible {
  filter: brightness(1.08);
}

.boton-secundario {
  background: var(--loza);
  color: var(--carbon);
  border: 1px solid var(--ceniza);
}

/* Foco visible siempre. El brasa da 3.5:1 sobre el fondo, que es lo que pide
   un indicador de foco. */
:focus-visible {
  outline: 2px solid var(--brasa);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────── PIE ── */

.pie {
  background: var(--loza);
  border-top: 1px solid var(--ceniza);
  padding: 24px 0;
  font-size: 0.85rem;
  color: var(--humo);
}

.pie-interior p {
  margin: 0 0 8px;
}

.pie-interior a {
  color: var(--humo);
}

/* ───────────────────────────────────────────────────────── IMPRESIÓN ── */

/*
 * Un documento legal se imprime y se archiva. Sin esto sale con el fondo
 * hueso gastando tinta, con la navegación en medio y con las direcciones de
 * los enlaces perdidas.
 */
@media print {
  body {
    background: #fff;
    font-size: 11pt;
  }

  .barra,
  .cinta,
  .pie {
    display: none;
  }

  .contenido {
    max-width: none;
    padding: 0;
  }

  /* Al imprimir, un enlace sin su dirección es texto subrayado sin más. */
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    color: #555;
  }

  h2 {
    break-after: avoid;
  }
}