/* ============================================================
   FACTUCIENDA · Sistema de diseño
   Un único fichero, cero build. Tokens en variables CSS con
   nomenclatura compatible con shadcn/ui para que la SPA de
   /area y /admin herede exactamente los mismos valores.
   ============================================================ */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--anillo); outline-offset: 2px; border-radius: 4px; }

/* ---------- 2. Tokens ----------
   ORIGEN DE VERDAD: los mismos nombres y valores que ya usa area.html.
   Extraídos del CSS en producción el 2026-08-24. No inventar tokens nuevos
   de color: si hace falta uno, se añade aquí Y en el CSS del área.
   ------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* — Paleta del producto — */
  --marca: #122c4f;
  --accion: #0d9488;
  --accion-viva: #0f766e;
  --accion-tenue: #ecfdf9;

  --texto: #0f172a;
  --texto-2: #475569;
  --texto-3: #94a3b8;

  --fondo: #f1f5f9;
  --superficie: #ffffff;
  --superficie-2: #f8fafc;
  --linea: #e2e8f0;

  --verde-t: #15803d;  --verde-f: #dcfce7;
  --ambar-t: #b45309;  --ambar-f: #fef3c7;
  --rojo-t:  #be123c;  --rojo-f:  #ffe4e6;

  --r: 14px;
  --r-sm: 10px;
  --sombra:   0 1px 2px rgba(15,23,42,.04), 0 2px 8px rgba(15,23,42,.05);
  --sombra-2: 0 4px 16px rgba(15,23,42,.08);

  /* — Superficies oscuras de la web pública (héroe, pie, lateral de acceso).
       Son siempre oscuras, en los dos temas: no se invierten. — */
  --tinta-marca: #0a1a30;
  --sobre-accion:  #ffffff;
  --sobre-tinta:   #ffffff;
  --sobre-tinta-2: #a9b6c9;
  --sobre-tinta-3: #8fa0b6;

  /* — Alias hacia los nombres que usa este fichero — */
  --fondo-pagina: var(--fondo);
  --fondo-sutil:  var(--superficie-2);
  --tinta:        var(--texto);
  --tinta-suave:  var(--texto-2);
  --tinta-tenue:  var(--texto-3);
  --borde:        var(--linea);
  --borde-fuerte: var(--linea);
  --anillo:       var(--accion);

  --n-0:   var(--superficie);
  --n-25:  var(--superficie-2);
  --n-50:  var(--superficie-2);
  --n-100: var(--superficie-2);
  --n-200: var(--linea);
  --n-300: var(--linea);
  --n-400: var(--texto-3);
  --n-500: var(--texto-3);
  --n-600: var(--texto-2);
  --n-900: var(--texto);

  --marca-900: var(--tinta-marca);
  --marca-800: #0e2340;
  --marca-700: var(--marca);
  --marca-600: #1b3d69;
  --marca-100: var(--accion-tenue);

  --acento-700: var(--accion-viva);
  --acento-600: var(--accion);
  --acento-500: var(--accion);
  --acento-100: var(--accion-tenue);
  --acento-50:  var(--accion-tenue);

  --exito-600: var(--verde-t);  --exito-50: var(--verde-f);
  --aviso-600: var(--ambar-t);  --aviso-50: var(--ambar-f);
  --error-600: var(--rojo-t);   --error-50: var(--rojo-f);

  --s-1: var(--sombra);
  --s-2: var(--sombra-2);
  --s-3: var(--sombra-2);
  --r-lg: var(--r);
  --r-xl: 20px;
  --r-full: 999px;

  /* — Tipografía: misma familia y mismo cuerpo base que el área — */
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  --t-xs: 0.7333rem; --t-sm: 0.8667rem;  --t-base: 1rem;
  --t-lg: 1.1333rem; --t-xl: 1.3333rem;  --t-2xl: 1.7333rem;
  --t-3xl: 2.2rem;   --t-4xl: 2.9333rem; --t-5xl: 3.6rem;

  /* — Espaciado, escala de 4 — */
  --e-1: 0.25rem; --e-2: 0.5rem;  --e-3: 0.75rem; --e-4: 1rem;
  --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 2.5rem;  --e-8: 3rem;
  --e-9: 4rem;    --e-10: 6rem;   --e-11: 8rem;

  --ancho: 1120px;
  --ancho-texto: 68ch;
  --transicion: 160ms cubic-bezier(.32, .72, 0, 1);
}

/* Tema oscuro: valores idénticos a los del área, para que /contacto y la
   landing cambien de tema a la vez que el producto. */
/* Tema oscuro. Dos vías, mismos valores:
   1) preferencia del sistema, salvo que el visitante haya elegido claro a mano
   2) elección manual guardada en localStorage → data-tema="oscuro" en <html> */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --marca: #e2e8f0;
    --accion: #2dd4bf;
    --accion-viva: #5eead4;
    --accion-tenue: #0b2b28;

    --texto: #f1f5f9;
    --texto-2: #cbd5e1;
    --texto-3: #64748b;

    --fondo: #0b0f14;
    --superficie: #151a21;
    --superficie-2: #1b212a;
    --linea: #262e39;

    --verde-t: #4ade80;  --verde-f: #10261a;
    --ambar-t: #fbbf24;  --ambar-f: #2a1f08;
    --rojo-t:  #fb7185;  --rojo-f:  #2b1119;

    --sombra:   0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 8px 24px rgba(0,0,0,.5);

    --sobre-accion: #06231f;
    --tinta-marca: #0e141c;
    --marca-800: #0b0f14;
    --marca-700: #122c4f;
    --marca-600: #1b3d69;
  }
}
:root[data-tema="oscuro"] {
    --marca: #e2e8f0;
    --accion: #2dd4bf;
    --accion-viva: #5eead4;
    --accion-tenue: #0b2b28;

    --texto: #f1f5f9;
    --texto-2: #cbd5e1;
    --texto-3: #64748b;

    --fondo: #0b0f14;
    --superficie: #151a21;
    --superficie-2: #1b212a;
    --linea: #262e39;

    --verde-t: #4ade80;  --verde-f: #10261a;
    --ambar-t: #fbbf24;  --ambar-f: #2a1f08;
    --rojo-t:  #fb7185;  --rojo-f:  #2b1119;

    --sombra:   0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 8px 24px rgba(0,0,0,.5);

    --sobre-accion: #06231f;
    --tinta-marca: #080c11;
    --marca-800: #0b0f14;
    --marca-700: #122c4f;
    --marca-600: #1b3d69;
}


/* ---------- 3. Base ---------- */
body {
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo-pagina);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.022em; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); letter-spacing: -0.034em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); letter-spacing: -0.028em; }
h3 { font-size: var(--t-xl); }
p  { text-wrap: pretty; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--e-5); }
.seccion { padding-block: clamp(var(--e-9), 8vw, var(--e-11)); }
.seccion--sutil { background: var(--fondo-sutil); border-block: 1px solid var(--borde); }
.seccion--oscura { background: var(--marca-900); color: var(--sobre-tinta-2); }
.seccion--oscura h2 { color: var(--sobre-tinta); }

.medida { max-width: var(--ancho-texto); }
.centrado { text-align: center; margin-inline: auto; }

/* ---------- 4. Tipografía de apoyo ---------- */
.sobretitulo {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acento-700);
}
.seccion--oscura .sobretitulo { color: #2dd4bf; }

.entradilla { font-size: clamp(1.0625rem, 1rem + .4vw, var(--t-lg)); color: var(--tinta-suave); }
.seccion--oscura .entradilla { color: var(--sobre-tinta-2); }

.pie-nota { font-size: var(--t-sm); color: var(--tinta-tenue); }
.mono { font-family: var(--fuente-mono); font-size: .9em; letter-spacing: -.02em; }

/* ---------- 5. Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: 0.7rem 1.15rem; border-radius: var(--r);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -.005em;
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton:active { transform: translateY(1px); }
.boton[disabled], .boton[aria-busy="true"] { opacity: .55; pointer-events: none; }

.boton--primario   { background: var(--accion); color: var(--sobre-accion); box-shadow: var(--s-1); }
.boton--primario:hover { background: var(--accion-viva); box-shadow: var(--s-2); }

.boton--marca      { background: var(--marca-700); color: #fff; box-shadow: var(--s-1); }
.boton--marca:hover{ background: var(--marca-800); }

.boton--secundario { background: var(--n-0); color: var(--tinta); border-color: var(--borde-fuerte); box-shadow: var(--s-1); }
.boton--secundario:hover { background: var(--n-50); border-color: var(--n-400); }

.boton--fantasma   { background: transparent; color: var(--tinta-suave); }
.boton--fantasma:hover { background: var(--n-100); color: var(--tinta); }

.boton--claro      { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); }
.boton--claro:hover{ background: rgba(255,255,255,.18); }

.boton--lg { padding: 0.9rem 1.5rem; font-size: var(--t-base); border-radius: var(--r-lg); }
.boton--sm { padding: 0.45rem 0.8rem; font-size: var(--t-xs); }
.boton--bloque { width: 100%; }

/* ---------- 6. Formularios ---------- */
.campo { display: grid; gap: var(--e-2); }
.campo > label { font-size: var(--t-sm); font-weight: 550; color: var(--tinta); }
.campo .ayuda { font-size: var(--t-xs); color: var(--tinta-tenue); }

.control {
  width: 100%; padding: 0.68rem 0.85rem;
  background: var(--n-0); color: var(--tinta);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r);
  box-shadow: var(--s-1);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.control::placeholder { color: var(--n-400); }
.control:hover { border-color: var(--n-400); }
.control:focus { outline: none; border-color: var(--acento-600); box-shadow: 0 0 0 3px var(--acento-100); }
.control[aria-invalid="true"] { border-color: var(--error-600); }
.control[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--error-50); }
textarea.control { min-height: 7rem; resize: vertical; }
select.control {
  appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2374746c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
}

.casilla { display: flex; gap: var(--e-3); align-items: flex-start; font-size: var(--t-sm); color: var(--tinta-suave); cursor: pointer; }
.casilla input { width: 1.05rem; height: 1.05rem; margin-top: .22rem; accent-color: var(--acento-600); flex: none; cursor: pointer; }

/* Casillero de PIN — 6 dígitos */
.pin { display: flex; gap: var(--e-3); justify-content: center; }
.pin input {
  width: 3rem; height: 3.6rem; text-align: center;
  font-size: var(--t-2xl); font-weight: 600; font-family: var(--fuente-mono);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r); background: var(--n-0);
  box-shadow: var(--s-1); transition: border-color var(--transicion), box-shadow var(--transicion);
}
.pin input:focus { outline: none; border-color: var(--acento-600); box-shadow: 0 0 0 3px var(--acento-100); }
.pin input:not(:placeholder-shown) { border-color: var(--marca-700); }
@media (max-width: 420px) { .pin { gap: var(--e-2); } .pin input { width: 2.6rem; height: 3.1rem; font-size: var(--t-xl); } }

/* ---------- 7. Superficies ---------- */
.tarjeta {
  background: var(--n-0); border: 1px solid var(--borde);
  border-radius: var(--r-lg); padding: var(--e-5); box-shadow: var(--s-1);
}
.tarjeta--elevada { box-shadow: var(--s-3); border-color: transparent; }
.tarjeta--interactiva { transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); }
.tarjeta--interactiva:hover { transform: translateY(-2px); box-shadow: var(--s-2); border-color: var(--borde-fuerte); }

.panel {
  background: var(--n-0); border: 1px solid var(--borde);
  border-radius: var(--r-xl); padding: clamp(var(--e-5), 4vw, var(--e-7));
  box-shadow: var(--s-3);
}

/* ---------- 8. Distintivos y avisos ---------- */
.distintivo {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: .28rem .7rem; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: -.005em;
  background: var(--n-100); color: var(--tinta-suave); border: 1px solid var(--borde);
}
.distintivo--acento { background: var(--acento-50); color: var(--acento-700); border-color: var(--acento-100); }
.distintivo--exito  { background: var(--exito-50); color: var(--exito-600); border-color: transparent; }
.distintivo--aviso  { background: var(--aviso-50); color: var(--aviso-600); border-color: transparent; }
.distintivo--error  { background: var(--error-50); color: var(--error-600); border-color: transparent; }
.distintivo--claro  { background: rgba(255,255,255,.08); color: #dbe4f0; border-color: rgba(255,255,255,.16); }
.punto { width: .45rem; height: .45rem; border-radius: var(--r-full); background: currentColor; flex: none; }

.aviso {
  display: block;
  padding: var(--e-4); border-radius: var(--r); font-size: var(--t-sm);
  line-height: 1.55; border: 1px solid transparent;
}
/* El titulillo va EN LÍNEA con el texto, no en una columna aparte:
   como hermano flex se partía en dos y se leía en zigzag. */
.aviso strong { margin-right: .3em; }
.aviso--info  { background: var(--accion-tenue); color: var(--accion-viva); }
.aviso--exito { background: var(--exito-50); color: var(--exito-600); }
.aviso--error { background: var(--error-50); color: var(--error-600); }
.aviso[hidden] { display: none; }

/* ---------- 9. Rejillas ---------- */
.rejilla { display: grid; gap: var(--e-5); }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; } }

.pila { display: grid; gap: var(--e-4); }
.fila { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; }

/* ---------- 10. Iconografía ---------- */
.icono {
  display: grid; place-items: center; flex: none;
  width: 2.5rem; height: 2.5rem; border-radius: var(--r);
  background: var(--acento-50); color: var(--acento-700);
  border: 1px solid var(--acento-100);
}
.icono svg { width: 1.15rem; height: 1.15rem; stroke-width: 1.7; }
.seccion--oscura .icono { background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.22); color: var(--acento-500); }

/* ---------- 11. Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fondo-pagina) 82%, transparent); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color var(--transicion), box-shadow var(--transicion);
}
.cabecera[data-fija="si"] { border-bottom-color: var(--borde); box-shadow: var(--s-1); }
.cabecera__interior { display: flex; align-items: center; justify-content: space-between; gap: var(--e-5); height: 4.25rem; }
.nav { display: flex; gap: var(--e-5); align-items: center; }
.nav a { font-size: var(--t-sm); font-weight: 500; color: var(--tinta-suave); transition: color var(--transicion); }
.nav a:hover { color: var(--tinta); }
@media (max-width: 860px) { .nav--principal { display: none; } }

.marca { display: inline-flex; align-items: center; gap: .6rem; font-weight: 650; letter-spacing: -.03em; font-size: 1.0625rem; }
.marca__sello {
  width: 1.85rem; height: 1.85rem; border-radius: 8px; flex: none;
  background: linear-gradient(145deg, var(--marca-700), var(--acento-600));
  display: grid; place-items: center; color: #fff; font-size: .8rem; font-weight: 700;
}

/* ---------- 12. Héroe ---------- */
.heroe { position: relative; overflow: hidden; padding-block: clamp(var(--e-9), 9vw, var(--e-11)) var(--e-10); }
.heroe::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 70vh; z-index: -1;
  background:
    radial-gradient(46% 52% at 22% 18%, rgba(13,148,136,.14), transparent 68%),
    radial-gradient(42% 46% at 78% 8%,  rgba(18,44,79,.13),  transparent 66%);
  filter: blur(8px);
}
.heroe::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 55% at 50% 20%, #000 20%, transparent 78%);
  opacity: .55;
}

/* ---------- 13. Pasos numerados ---------- */
.pasos { counter-reset: paso; }
.paso { position: relative; padding-left: 3.4rem; }
.paso::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: 0; top: -.1rem;
  width: 2.3rem; height: 2.3rem; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--marca-700); color: #fff;
  font-size: var(--t-sm); font-weight: 700;
}

/* ---------- 14. Acordeón ---------- */
.acordeon { border-top: 1px solid var(--borde); }
.acordeon details { border-bottom: 1px solid var(--borde); }
.acordeon summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
  padding: var(--e-4) 0; cursor: pointer; list-style: none;
  font-weight: 550; letter-spacing: -.012em;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: "+"; font-size: var(--t-xl); font-weight: 400; color: var(--tinta-tenue);
  transition: transform var(--transicion); flex: none; line-height: 1;
}
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon details > div { padding-bottom: var(--e-5); color: var(--tinta-suave); max-width: var(--ancho-texto); }

/* ---------- 15. Tabla ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla th {
  text-align: left; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-tenue);
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borde);
}
.tabla td { padding: var(--e-4); border-bottom: 1px solid var(--borde); }
.tabla tbody tr:hover { background: var(--n-25); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 16. Pie ---------- */
.pie { background: var(--marca-900); color: #94a3b8; padding-block: var(--e-8) var(--e-6); }
.pie a { color: #cbd5e1; transition: color var(--transicion); }
.pie a:hover { color: #fff; }
.pie__base { border-top: 1px solid rgba(255,255,255,.09); margin-top: var(--e-7); padding-top: var(--e-5); font-size: var(--t-sm); }

/* ---------- 17. Pantalla de autenticación ---------- */
.auth { min-height: 100dvh; display: grid; grid-template-columns: 1fr 42%; }
.auth__forma { display: grid; place-items: center; padding: var(--e-6) var(--e-5); }
.auth__caja { width: 100%; max-width: 27rem; }
.auth__lateral {
  background: var(--marca-900); color: var(--sobre-tinta-2);
  border-left: 1px solid var(--linea);
  position: relative; overflow: hidden;
  display: grid; align-content: center; padding: var(--e-8) clamp(var(--e-6), 4vw, var(--e-9));
}
.auth__lateral::before {
  content: ""; position: absolute; inset: auto -20% -35% -20%; height: 65%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(13,148,136,.35), transparent 70%);
}
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth__lateral { display: none; } }

/* ---------- 18. Utilidades ---------- */
/* Necesario: .campo/.pila/.fila usan display:grid|flex y ganan a [hidden] */
[hidden] { display: none !important; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.separador { height: 1px; background: var(--borde); border: 0; }

/* Aparición al hacer scroll */
[data-aparece] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.32,.72,0,1); }
[data-aparece].visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-aparece] { opacity: 1; transform: none; }
}

/* Cargador */
.girando { animation: girar 700ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- 19. Conmutador de tema ---------- */
.tema {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: var(--r-sm);
  color: var(--tinta-suave);
  border: 1px solid transparent;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.tema:hover { background: var(--superficie-2); color: var(--tinta); border-color: var(--borde); }
.tema svg { width: 1.15rem; height: 1.15rem; stroke-width: 1.7; fill: none; stroke: currentColor;
            stroke-linecap: round; stroke-linejoin: round; }
.tema .luna { display: none; }
:root[data-tema="oscuro"] .tema .sol  { display: none; }
:root[data-tema="oscuro"] .tema .luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema .sol  { display: none; }
  :root:not([data-tema="claro"]) .tema .luna { display: block; }
}

/* ---------- 20. Tono menor y avisos de estado ----------
 *
 * Vienen de `estilo.css`, la hoja que servía a `privacidad`, `area` y `admin`
 * antes de la migración del 2026-08-29. No son adorno: `.tenue` y `.mini` son
 * los dos escalones de tono menor que usan esas tres páginas, y los estados en
 * ámbar/verde/rojo son los que ya llevaban.
 *
 * Se traen con los tokens de ESTA hoja, no con valores literales: por eso
 * cambian de aspecto al pasarse a la paleta nueva sin tocar una sola clase del
 * HTML. `--ambar-f`/`--ambar-t` y sus pares ya estaban definidos aquí, y ya
 * cambian los DOS juntos en modo oscuro — un fondo puesto sin su color de texto
 * al lado es justo como se rompe un tema.
 */
.tenue { color: var(--texto-2); font-size: var(--t-sm); }
.mini  { color: var(--texto-3); font-size: var(--t-xs); }

.aviso.ok  { background: var(--verde-f); color: var(--verde-t); }
.aviso.ojo { background: var(--ambar-f); color: var(--ambar-t); }
.aviso.mal { background: var(--rojo-f);  color: var(--rojo-t); }

/* En la hoja vieja el titulillo del aviso era un bloque; aquí va en línea. Estas
   tres páginas lo escriben como `<strong>` suelto seguido del texto, que con el
   `.aviso strong` de arriba se lee como una frase y no en zigzag. */

/* ---------- 21. Prosa: documentos largos ----------
 *
 * El reset de esta hoja pone `* { margin: 0 }` y `a { color: inherit;
 * text-decoration: none }`, y sus `h1`/`h2` estan dimensionados para titular de
 * pagina de aterrizaje. Eso esta bien en la portada, donde cada bloque pone su
 * espaciado a mano y cada enlace es un boton.
 *
 * En un documento largo es otra cosa, y se vio al migrar `privacidad`:
 *
 *   · Los `h2` salian del mismo tamano que el `h1` y la jerarquia desaparecia.
 *   · Sin margenes, cada parrafo se pegaba al titular de arriba.
 *   · Y los ENLACES no se distinguian del texto. En una politica de privacidad
 *     eso no es estetica: el enlace a la AEPD y la direccion de contacto son por
 *     donde se ejercen derechos, y un enlace invisible es un derecho escondido.
 *
 * `.prosa` es el ambito para texto corrido. No toca nada fuera de el.
 */
.prosa { max-width: 76ch; }
.prosa h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); margin-bottom: var(--e-3); }
.prosa h2 {
  font-size: var(--t-xl); letter-spacing: -.02em;
  margin-top: var(--e-8); margin-bottom: var(--e-3);
  padding-top: var(--e-5); border-top: 1px solid var(--borde);
}
.prosa h3 { font-size: var(--t-base); font-weight: 650; margin-top: var(--e-5); margin-bottom: var(--e-2); }
.prosa p, .prosa ul, .prosa ol, .prosa table { margin-bottom: var(--e-4); }
.prosa ul, .prosa ol { padding-left: 1.25rem; }
.prosa li { margin-bottom: var(--e-2); }
.prosa li::marker { color: var(--tinta-tenue); }

/* El enlace vuelve a parecer un enlace. Subrayado con hueco bajo las bajadas,
   que se lee mejor que el subrayado pegado del navegador. */
.prosa a {
  color: var(--accion-viva);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.prosa a:hover { text-decoration-thickness: 2px; }

/* La tabla de encargados del tratamiento no lleva clase en el HTML: es un
   `<table>` pelado dentro del documento, asi que se le da forma aqui. */
.prosa table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.prosa th {
  text-align: left; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-tenue);
  padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--borde);
}
.prosa td { padding: var(--e-3); border-bottom: 1px solid var(--borde); vertical-align: top; }
.prosa .tarjeta { margin-block: var(--e-5); }
.prosa .tarjeta h2 { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 620px) { .prosa table, .prosa thead, .prosa tbody, .prosa th, .prosa td, .prosa tr { display: block; }
  .prosa thead { display: none; }
  .prosa td { border-bottom: 0; padding: .15rem 0; }
  .prosa tr { border-bottom: 1px solid var(--borde); padding-block: var(--e-3); }
}