/* web/estilo.css — la hoja de estilo de las paginas legales de Zoirux.
 *
 * ⚠️ POR QUE HAY UNA SOLA HOJA PARA LAS CUATRO PAGINAS: es la primera regla del repo.
 * La paleta esta escrita UNA vez. Si manana cambia el cobre, se cambia aqui y no en
 * cuatro ficheros que acabarian diciendo cuatro cosas distintas.
 *
 * ⚠️ LOS COLORES SON LOS DE `src/theme.js`, copiados a mano, y eso es una segunda
 * fuente de verdad ACEPTADA: una pagina web no puede importar un modulo de React
 * Native. Lo vigila `test/operaciones/web.test.js`, que falla si un hexadecimal de
 * aqui deja de existir en el tema de la app.
 *
 * ⚠️ NO HAY NI UNA PETICION A UN TERCERO: ni tipografias de Google, ni iconos, ni
 * analitica. En una pagina de privacidad eso no es una optimizacion, es coherencia:
 * un texto que dice que no hay seguimiento no puede cargar un fichero de otra empresa.
 */

:root {
  /* grafito — `bgScreen`, `bgCard`, `bgElevated` de src/theme.js */
  --grafito:        #0E0E11;
  --grafito-tarjeta:#18181C;
  --grafito-alto:   #212126;
  /* cobre — el acento de la marca. `COBRE` y `COBRE_OSCURO` */
  --cobre:          #C98B4B;
  --cobre-oscuro:   #A66F36;
  /* hueso y sus dos grises — `HUESO`, `textSecondary`, `textMuted` */
  --hueso:          #F2F0EC;
  --gris:           #9A978F;
  --gris-apagado:   #8B8984;
  --borde:          #2C2C32;
}

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

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

body {
  margin: 0;
  background: var(--grafito);
  color: var(--hueso);
  /* Tipografia del sistema: la mas legible del dispositivo y cero descargas. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  /* El gutter de 16px del movil, y nada de scroll horizontal. */
  padding: 0 16px 64px;
  overflow-x: hidden;
}

/* El ancho de lectura: 68 caracteres. Mas ancho se lee peor, y esto lo abre
 * alguien con prisa. */
.hoja { max-width: 68ch; margin: 0 auto; }

/* ─── Cabecera: la marca y un filete de cobre ─────────────────────────────── */

header.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 0 18px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 36px;
}
header.marca img { height: 26px; width: auto; display: block; }
/* El nombre en texto, solo para impresion y lectores de pantalla. */
header.marca .marca-texto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
header.marca .seccion {
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris-apagado);
  border-left: 1px solid var(--borde);
  padding-left: 14px;
}

/* ─── Texto ───────────────────────────────────────────────────────────────── */

h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
h2 {
  font-size: 1.1rem;
  margin: 40px 0 10px;
  color: var(--cobre);
  letter-spacing: .01em;
}
.fecha { color: var(--gris-apagado); font-size: .9rem; margin: 0 0 32px; }
p, li { color: var(--hueso); }
p { margin: 0 0 16px; }
ul { padding-left: 22px; margin: 0 0 16px; }
li { margin-bottom: 8px; }
/* Una lista dentro de un punto: la usa la pagina de borrado para partir en dos
   mitades lo que pasa con una matricula. Sin esto hereda los 16px de abajo de `ul`
   y abre un hueco dentro del propio punto. */
li > ul { margin: 8px 0 0; }
strong { color: var(--hueso); }
.apagado { color: var(--gris); }

a { color: var(--cobre); text-decoration: underline; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--hueso); }

/* ─── El bloque de accion: el camino que Google exige que este a la vista ──── */

.accion {
  background: var(--grafito-tarjeta);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--cobre);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 28px 0;
}
.accion h2 { margin-top: 0; }
.correo {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 600;
  /* Un correo largo no desborda la pantalla de un movil. */
  word-break: break-all;
  margin: 4px 0 2px;
}

/* ─── El aviso de texto pendiente ─────────────────────────────────────────── */

.pendiente {
  background: var(--grafito-alto);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--cobre-oscuro);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 28px 0;
  color: var(--gris);
}
.pendiente strong { color: var(--hueso); }

/* ─── Pie ─────────────────────────────────────────────────────────────────── */

footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
  font-size: .9rem;
  color: var(--gris-apagado);
}
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }

/* ─── Movil ───────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 1.5rem; }
  header.marca { gap: 10px; padding-top: 22px; }
  header.marca .seccion { font-size: 12px; padding-left: 10px; }
  .accion, .pendiente { padding: 16px 18px; }
}

/* ─── Impresion ───────────────────────────────────────────────────────────────
 * Un texto legal se imprime y se adjunta. En papel el grafito es un derroche de
 * tinta y el cobre claro no contrasta: se invierte, y el cobre pasa al oscuro
 * (`COBRE_OSCURO`, 4.24 sobre papel blanco — el mismo que usa el certificado). */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; padding: 0; }
  p, li, strong, .apagado { color: #000; }
  h2 { color: var(--cobre-oscuro); }
  a { color: #000; text-decoration: none; }
  /* La URL completa detras de cada enlace, que en papel no se puede pulsar. */
  a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; }
  header.marca img { display: none; }
  header.marca .marca-texto {
    position: static; width: auto; height: auto; clip: auto;
    font-size: 15pt; font-weight: 700;
  }
  .accion, .pendiente { border: 1px solid #000; background: none; }
  footer nav { display: none; }
}