/* Lila — sistema visual operativo compartido entre fachada y consola clásica.
   Sin framework, sin build de Node: hoja propia, JS vanilla, SVG en el servidor.
   Móvil primero, claro/oscuro por `prefers-color-scheme` con conmutador manual
   (`data-tema` en <html>, recordado en localStorage). La restricción -- pocos
   tamaños, color que solo comunica estado, densidad -- es la regla de §5.6.5:
   es lo que separa una interfaz profesional de una "pobre". */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/estaticos/inter.woff2") format("woff2");
}

:root {
  /* ─── Marca (GalapagosTech, skill reporte-estilo-galapagostech, §5.6.1) ─── */
  --marca:        #245e5c;
  --marca-fuerte: #1b4f4d;
  --marca-suave:  #dce8e5;
  --marca-texto:  #ffffff;   /* texto sobre un relleno de marca */

  /* Relleno de BOTÓN, separado de `--marca` (22-sep-2026, el dueño mirando
     la consola en oscuro: el botón «Entrar» se leía deshabilitado). En claro
     es el mismo teal de siempre — ahí funciona bien, 3.40:1 con blanco. En
     oscuro `--marca` se aclaró a propósito para servir como TEXTO legible
     sobre fondo oscuro (8.89:1) — pero ese mismo tono pastel, puesto de
     RELLENO, lee como "apagado/inactivo" en vez de como acción principal.
     Un botón necesita su propio token: mismo family teal, calibrado como
     relleno solamente (ver el porqué medido junto al bloque oscuro). */
  --boton-primario-fondo: var(--marca);
  --boton-primario-texto: var(--marca-texto);

  /* ─── Superficie y texto (light) ─── */
  --fondo:        #f3f3ef;
  --fondo-2:      #e8ebe8;
  --superficie:   #fbfaf7;
  --papel:        #f7f4ed;   /* fondo de las páginas editoriales públicas (Seguridad); en oscuro sigue a --fondo */
  --borde:        #cfd6d3;
  --borde-tenue:  #e2e6e3;
  --campo-borde:  var(--borde);   /* borde de campo de formulario — alias en claro, valor propio en oscuro */
  --foco:         #2f7773;
  --texto:        #24343a;
  --texto-fuerte: #10242b;
  --texto-suave:  #5d6a6d;
  --sombra-1:     0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 1px rgba(17, 24, 39, 0.04);
  --sombra-2:     0 4px 12px rgba(17, 24, 39, 0.10), 0 2px 4px rgba(17, 24, 39, 0.06);

  /* ─── Los cuatro estados, único vocabulario en toda la consola (§5.4.1) ─── */
  --exito:        #2f6b3a;
  --exito-fondo:  #e6f2e8;
  --aviso:        #8a5a00;
  --aviso-fondo:  #fbf1dd;
  --error:        #9a3324;
  --error-fondo:  #fbeae6;
  --inactivo:     #6b7280;
  --inactivo-fondo: #eef0f2;

  /* ─── Serie categórica de gráficos (§5.6.4) ─── */
  --serie-1: #2098af;
  --serie-2: #1a5b7a;
  --serie-3: #6ab8a0;
  --serie-4: #2d3f6b;
  --serie-5: #8fa8b5;

  /* ─── Tipografía: cinco tamaños, ni uno más (§5.6.5) ─── */
  --texto-xs:  clamp(0.75rem,  0.70rem + 0.25vw,  0.875rem);
  --texto-sm:  clamp(0.875rem, 0.80rem + 0.375vw, 1rem);
  --texto-base:clamp(1rem,     0.90rem + 0.5vw,   1.125rem);
  --texto-lg:  clamp(1.125rem, 1.00rem + 0.625vw, 1.25rem);
  --texto-xl:  clamp(1.25rem,  1.10rem + 0.75vw,  1.5rem);
  --texto-2xl: clamp(1.5rem,   1.20rem + 1.5vw,   2rem);
  --texto-3xl: clamp(1.875rem, 1.40rem + 2.375vw, 2.5rem);
  --texto-4xl: clamp(2.25rem,  1.50rem + 3.75vw,  3.5rem);   /* solo el titular de "/" */

  /* ─── Espaciado fluido (skill responsive-design) ─── */
  --espacio-xs: clamp(0.5rem,  0.4rem + 0.5vw,  0.75rem);
  --espacio-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
  --espacio-md: clamp(1rem,    0.8rem + 1vw,    1.5rem);
  --espacio-lg: clamp(1.5rem,  1.2rem + 1.5vw,  2rem);
  --espacio-xl: clamp(2rem,    1.5rem + 2.5vw,  3rem);
  --espacio-2xl:clamp(3rem,    2.0rem + 5vw,    5rem);

  --ancho-prosa: min(100% - 2rem, 45rem);
  --ancho-app:   min(100% - 2rem, 68rem);

  --radio: 4px;
  --radio-pill: 999px;

  /* Tokens editoriales compartidos. Las secciones pueden afinarlos localmente,
     pero su valor base vive aquí para que ningún fragmento dependa del orden
     en que se cargue la hoja. */
  --classic-navy: #102a43;
  --classic-navy-hover: #193b58;
  --classic-ink: #f3f1eb;
  --classic-muted: #c0cbd1;
  --landing-navy: #0d2630;
  --landing-teal: #2f6f6d;
  --landing-paper: #f7f4ed;
  --landing-sand: #ded6cc;
  --landing-ink: #10242b;
  --landing-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --portada-navy: #102a43;
  --portada-crema: #f6f1e7;
  --portada-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --portada-gutter: clamp(2rem, 3.4vw, 4rem);
  --auth-visual-overlay: linear-gradient(180deg, rgba(7, 22, 28, 0.08), rgba(7, 22, 28, 0.76));

  /* ─── Paleta de la portada y la página de acceso (valores de Lila). Cada marca los cambia desde
     `/marca.css`; el valor de respaldo de cada `var()` queda como red de seguridad. ─── */
  --trazo-logo: #9ed6c8;
  --escena-avatar: #2c6968;
  --escena-trazo: #9ed6c8;
  --escena-confirma-borde: rgba(118, 208, 178, 0.7);
  --escena-confirma-fondo: rgba(47, 111, 109, 0.42);
  --escena-confirma-texto: #c6f2df;
  --acceso-fondo: #102a33;
  --acceso-hover: #183a45;
  --panel-consulta: #d5e4e0;
  --panel-erp: #c8d9e3;
  --panel-control: #c7a99d;
  --burbuja-fondo: #dcefea;
  --burbuja-texto: #173c3b;
  --conectado: #347466;
  --icono-doc-borde: #3f7975;
  --icono-doc-trazo: #d8ebe7;
  --boton-hover: #245c55;
  --oper-etiqueta: #8fc3b5;
  --contexto-fondo: #dbe7e2;
  --contexto-etiqueta: #527169;
  --contexto-titulo: #10272f;
  --sistema-borde: rgba(24, 63, 61, 0.13);
  --sistema-icono: #315f59;
  --sistema-nombre: #20383c;
  --sistema-detalle: #667b77;
  --chat-canal: #2f866f;
  --persona-fondo: #d9eee7;
  --persona-texto: #173e38;
  --chat-boton: #1b514a;
  --confirma-icono-fondo: #ddefe7;
  --confirma-titulo: #17332f;
  --confianza-fondo: #edf2f1;
  --cierre-fondo: #112f39;
  --cierre-etiqueta: #91c4b7;
  --landing-navy: #0d2630;
  --auth-etiqueta: #b8d8ce;
  --auth-boton-oscuro: #397c78;
  --seguridad-fondo: #102a34;
}

/* ─── Oscuro: `prefers-color-scheme` y conmutador manual, los dos caminos ─── */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --marca:        #83bdb1;
    --marca-fuerte: #a8d4ca;
    --marca-suave:  #294a4a;
    --marca-texto:  #102522;
    --boton-primario-fondo: #83bdb1;
    --boton-primario-texto: #102522;

    --fondo:        #0e1c21;
    --fondo-2:      #21353b;
    --superficie:   #14272d;
    --papel:        #0e1c21;
    --borde:        #34494e;
    --borde-tenue:  #263b40;
    --campo-borde:  #61767a;
    --foco:         #83bdb1;
    --texto:        #dbe2df;
    --texto-fuerte: #f2f0e9;
    --texto-suave:  #adb9b6;
    --sombra-1:     0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-2:     0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);

    --exito:        #7fbf8c;
    --exito-fondo:  #16261a;
    --aviso:        #e0b45a;
    --aviso-fondo:  #2a2110;
    --error:        #e2897a;
    --error-fondo:  #2b1714;
    --inactivo:     #a9a8a4;
    --inactivo-fondo: #2a2c30;
  }
}
:root[data-tema="oscuro"] {
  --marca:        #83bdb1;
  --marca-fuerte: #a8d4ca;
  --marca-suave:  #294a4a;
  --marca-texto:  #102522;
  --boton-primario-fondo: #83bdb1;
  --boton-primario-texto: #102522;

  --fondo:        #0e1c21;
  --fondo-2:      #21353b;
  --superficie:   #14272d;
  --papel:        #0e1c21;
  --borde:        #34494e;
  --borde-tenue:  #263b40;
  --campo-borde:  #61767a;
  --foco:         #83bdb1;
  --texto:        #dbe2df;
  --texto-fuerte: #f2f0e9;
  --texto-suave:  #adb9b6;
  --sombra-1:     0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-2:     0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);

  --exito:        #7fbf8c;
  --exito-fondo:  #16261a;
  --aviso:        #e0b45a;
  --aviso-fondo:  #2a2110;
  --error:        #e2897a;
  --error-fondo:  #2b1714;
  --inactivo:     #a9a8a4;
  --inactivo-fondo: #2a2c30;
}

/* ─── Rejilla base ─── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: var(--texto-base)/1.5 "Inter", ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

a { color: var(--marca-fuerte); text-decoration: none; transition: color 0.15s ease; }
a:hover { text-decoration: underline; }

/* ─── Movimiento con cuidado: transición corta y sobria, nunca decorativa,
   y del todo apagada si la persona pidió menos movimiento (§5.6.6) ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.envoltorio {
  max-width: 1088px;
  width: var(--ancho-app);
  margin: 0 auto;
  padding: 0 0 var(--espacio-2xl);
  padding-inline: 0;
}

/* ─── Shell clásico con navegación lateral ─── */
.classic-shell {
  --classic-navy: #102a43;
  --classic-navy-hover: #193b58;
  --classic-ink: #f3f1eb;
  --classic-muted: #c0cbd1;
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fondo);
}
.classic-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex: 0 0 15rem;
  flex-direction: column;
  align-self: flex-start;
  width: 15rem;
  height: 100vh;
  height: 100dvh;
  padding: 1.25rem 1rem;
  overflow-y: auto;
  background: var(--classic-navy);
  color: var(--classic-ink);
}
.classic-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  margin: 0 0 2rem 0.45rem;
  color: var(--classic-ink);
  font-size: var(--texto-xl);
  letter-spacing: -0.035em;
}
.classic-brand:hover { color: #fff; text-decoration: none; }
.classic-brand-mark {
  position: relative;
  display: inline-grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1.5px solid var(--trazo-logo, #9ed6c8);
  border-radius: 50%;
}
.classic-brand-mark::before,
.classic-brand-mark i {
  position: absolute;
  display: block;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--trazo-logo, #9ed6c8);
  border-radius: 50%;
  content: "";
}
.classic-brand-mark i { width: 0.55rem; height: 0.55rem; }
.classic-brand-mark i:last-child { width: 0.2rem; height: 0.2rem; background: var(--trazo-logo, #9ed6c8); }
.classic-nav { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; }
.classic-nav a,
.classic-nav a.activo {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 4px;
  color: var(--classic-muted);
  font-size: var(--texto-sm);
  font-weight: 500;
}
.classic-nav a:hover,
.classic-nav a.activo {
  background: var(--classic-navy-hover);
  color: #fff;
  text-decoration: none;
}
.classic-nav a.activo { font-weight: 650; }
.classic-workspace { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; }
.classic-topbar {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.25rem;
  padding: 0.5rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}
.classic-context { color: var(--texto-suave); font-size: var(--texto-sm); }
.classic-identity {
  max-width: min(34vw, 22rem);
  margin-inline-start: auto;
  overflow: hidden;
  color: var(--texto-fuerte);
  font-size: var(--texto-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.classic-topbar form { margin: 0; }
.classic-topbar button { font-size: var(--texto-sm); }
.classic-main {
  width: min(100%, 90rem);
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2.5rem);
  min-width: 0;
}
.classic-topbar .conmutador-tema { flex: none; }
.classic-sidebar .boton-menu { display: none; }

@media (max-width: 760px) {
  .classic-shell { display: block; }
  .classic-sidebar {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    width: min(19rem, calc(100vw - 3rem));
    height: 100vh;
    height: 100dvh;
    padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }
  .classic-sidebar:has(.classic-nav.abierta) { transform: translateX(0); }
  .classic-sidebar .boton-menu {
    position: fixed;
    z-index: 40;
    top: calc(0.65rem + env(safe-area-inset-top, 0px));
    left: calc(0.75rem + env(safe-area-inset-left, 0px));
    display: inline-flex;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    overflow: hidden;
    border-color: var(--borde);
    background: var(--superficie);
    color: var(--texto-fuerte);
    font-size: 0;
  }
  .classic-sidebar .boton-menu .icono { width: 1.2rem; height: 1.2rem; }
  .classic-brand { margin: 3rem 0 1.5rem 0.45rem; }
  .classic-nav { display: none; }
  .classic-nav.abierta { display: flex; width: 100%; }
  .classic-topbar { min-height: 4rem; padding-inline: 4rem 0.75rem; gap: 0.4rem; }
  .classic-context { display: none; }
  .classic-identity { max-width: 40vw; }
  .classic-topbar button { min-width: 2.75rem; min-height: 2.75rem; padding: 0.4rem 0.55rem; }
  .classic-topbar form button { padding-inline: 0.65rem; }
  .classic-main { padding: 1rem; overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .classic-topbar { gap: 0.25rem; padding-inline-end: 0.5rem; }
  .classic-topbar form button { min-width: 2.5rem; padding-inline: 0.45rem; }
  .classic-main { padding-inline: 0.75rem; }
}

.prosa { width: var(--ancho-prosa); margin-inline: auto; }

/* ─── Cabecera ─── */
header.cabecera {
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
  padding: var(--espacio-sm) var(--espacio-md);
  padding-top: calc(var(--espacio-sm) + env(safe-area-inset-top, 0px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-xs) var(--espacio-md);
  position: sticky;
  top: 0;
  z-index: 10;
}

header.cabecera strong { font-size: var(--texto-lg); font-weight: 600; color: var(--texto-fuerte); }

nav.principal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-xs) var(--espacio-md);
  margin-inline-start: auto;
}

nav.principal a, header.cabecera form { font-size: var(--texto-sm); }
nav.principal a {
  padding: 0.35em 0.6em;
  border-radius: var(--radio);
  transition: background-color 0.15s ease, color 0.15s ease;
}
nav.principal a:hover { background: var(--fondo-2); text-decoration: none; }
nav.principal a.activo { background: var(--marca-suave); color: var(--texto-fuerte); font-weight: 600; }

/* ─── Tipografía de página: cinco usos, cinco tokens (§5.6.5) ─── */
h1 { font-size: var(--texto-2xl); font-weight: 600; margin: 0 0 var(--espacio-md); color: var(--texto-fuerte); }
h2 { font-size: var(--texto-lg); font-weight: 600; margin: var(--espacio-lg) 0 var(--espacio-sm); color: var(--texto-fuerte); }
p, li { font-size: var(--texto-base); }
.secundario, .metadato { font-size: var(--texto-sm); color: var(--texto-suave); }
.etiqueta-xs { font-size: var(--texto-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

main { padding-top: var(--espacio-lg); }
main.sin-cabecera { padding-top: 0; }

/* ─── Tarjeta ─── */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
  padding: var(--espacio-md);
  margin-bottom: var(--espacio-md);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tarjeta > h2:first-child { margin-top: 0; }

/* `<details class="tarjeta">` es la única tarjeta que de verdad se toca (el
   acordeón de preguntas de la portada): la elevación en hover/foco confirma
   que responde, sin tocar las que solo muestran datos. */
details.tarjeta > summary { cursor: pointer; }
details.tarjeta:hover, details.tarjeta:focus-within { box-shadow: var(--sombra-2); }

/* Tarjeta de KPI: vive en tres anchos distintos (tablero, selector de empresas,
   panel del operador) — `container query`, no media query (§5.6.3). */
.tarjeta-kpi {
  container: kpi / inline-size;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--espacio-sm) var(--espacio-md);
}
.tarjeta-kpi .kpi-etiqueta { font-size: var(--texto-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--texto-suave); }
.tarjeta-kpi .kpi-numero { display: block; font-size: var(--texto-xl); font-weight: 600;
  color: var(--texto-fuerte); font-variant-numeric: tabular-nums; margin: 0.15em 0; }
.tarjeta-kpi .kpi-comparacion { font-size: var(--texto-xs); color: var(--texto-suave); }
.tarjeta-kpi .kpi-comparacion.sube { color: var(--exito); }
.tarjeta-kpi .kpi-comparacion.baja { color: var(--error); }
@container kpi (min-width: 13rem) {
  .tarjeta-kpi .kpi-numero { font-size: var(--texto-3xl); }
}

.numero-grande { font-size: var(--texto-3xl); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--texto-fuerte); }

/* ─── Rejilla `auto-fit`, sin media queries (§5.6.3) ─── */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--espacio-md);
}
.rejilla-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--espacio-sm);
}

/* ─── Formularios ─── */
label { display: block; margin: var(--espacio-sm) 0 0.25rem; font-weight: 600; font-size: var(--texto-sm); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=url], select, textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  min-height: 44px;
  border: 1px solid var(--campo-borde);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font-size: var(--texto-base);
  font-family: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible,
button:focus-visible, .boton:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

button, .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radio);
  border: 1px solid var(--boton-primario-fondo);
  background: var(--boton-primario-fondo);
  color: var(--boton-primario-texto);
  font-size: var(--texto-base);
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
button.secundario, .boton.secundario { background: transparent; color: var(--marca-fuerte); border-color: var(--borde); }
button.peligro, .boton.peligro { background: var(--error); border-color: var(--error); color: #fff; }
button.enlace, .boton.enlace { background: none; border: none; color: var(--marca-fuerte); padding: 0.25rem 0.4rem; min-width: 0; }
button:disabled, .boton:disabled { opacity: 0.55; cursor: default; }

/* Que responder al pulgar/al cursor se NOTE — filled se oscurece, outline se
   rellena tenue, ninguno cambia de tamaño ni tiembla (§5.6.6, movimiento sobrio) */
button:not(:disabled):hover, .boton:not(.deshabilitado):hover { filter: brightness(0.94); }
button.secundario:not(:disabled):hover, .boton.secundario:not(.deshabilitado):hover,
button.enlace:not(:disabled):hover, .boton.enlace:not(.deshabilitado):hover { background: var(--fondo-2); filter: none; }
button:not(:disabled):active, .boton:not(.deshabilitado):active { transform: translateY(1px); }
.boton-primario, a.boton, a.boton-primario { transition: filter 0.15s ease, background-color 0.15s ease, transform 0.05s ease; }
.boton-primario:hover, a.boton:hover, a.boton-primario:hover { filter: brightness(0.94); text-decoration: none; }
.boton.secundario:hover, .boton.enlace:hover { text-decoration: none; }
.boton-primario:active, a.boton:active, a.boton-primario:active { transform: translateY(1px); }

/* ─── Mensajes (nunca solo color: color + icono + palabra, §5.6.6) ─── */
.mensaje { display: flex; align-items: flex-start; gap: 0.5em; padding: var(--espacio-sm) var(--espacio-md);
  border-radius: var(--radio); margin-bottom: var(--espacio-md); font-size: var(--texto-sm); }
.mensaje.exito { background: var(--exito-fondo); color: var(--exito); }
.mensaje.error { background: var(--error-fondo); color: var(--error); }
.mensaje.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.mensaje .icono { flex: none; width: 1.2em; height: 1.2em; margin-top: 0.1em; }

.codigo-grande {
  font-size: var(--texto-2xl);
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: var(--espacio-sm) var(--espacio-md);
  background: var(--fondo-2);
  border: 1px dashed var(--marca);
  border-radius: var(--radio);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ─── Pastilla de estado — vocabulario único de las cuatro listas (§5.4.1) ───
   Estado + icono + palabra, nunca color solo. */
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radio-pill);
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pastilla .icono { width: 0.85em; height: 0.85em; flex: none; }
.pastilla.etiqueta { background: var(--fondo-2); color: var(--texto-suave); text-transform: none; font-weight: 500; }

.estado-hecho       { background: var(--exito-fondo);    color: var(--exito); }
.estado-esperando    { background: var(--aviso-fondo);    color: var(--aviso); }
.estado-error        { background: var(--error-fondo);    color: var(--error); }
.estado-no-hecho     { background: var(--inactivo-fondo); color: var(--inactivo); }

.etiqueta {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radio-pill);
  font-size: var(--texto-xs);
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  color: var(--texto-suave);
}

/* ─── Tablas de datos: densas, filas escaneables (§5.6.5, regla 4) ───
   `tabular-nums` en TODA celda, no solo en las que hoy tienen montos: Inter
   trae cifras de ancho fijo, así que no cuesta nada aplicarlo aquí una vez
   y que ninguna columna de dinero futura tenga que acordarse de pedirlo. */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--borde-tenue);
  font-size: var(--texto-sm); font-variant-numeric: tabular-nums; }
th { color: var(--texto-suave); font-weight: 600; font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.02em; }
.tabla-datos tbody tr { transition: background-color 0.15s ease; }
.tabla-datos tbody tr:hover { background: var(--fondo-2); }
.tabla-datos td { max-height: 72px; }

/* Envoltura con scroll horizontal contenido, nunca desbordamiento de página */
.tabla-envoltorio { overflow-x: auto; }
.tabla-envoltorio table { min-width: 32rem; }

/* Tablas -> tarjeta en pantallas angostas (patrón ya existente, extendido) */
@media (max-width: 640px) {
  table.responsiva, table.responsiva thead, table.responsiva tbody,
  table.responsiva th, table.responsiva td, table.responsiva tr,
  .tabla-datos, .tabla-datos thead, .tabla-datos tbody,
  .tabla-datos th, .tabla-datos td, .tabla-datos tr { display: block; }
  table.responsiva thead, .tabla-datos thead { display: none; }
  table.responsiva tr, .tabla-datos tr {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    margin-bottom: var(--espacio-sm);
    padding: 0.4rem 0.6rem;
  }
  table.responsiva td, .tabla-datos td {
    border: none;
    padding: 0.35rem 0;
    display: flex;
    justify-content: space-between;
    gap: var(--espacio-md);
  }
  table.responsiva td::before, .tabla-datos td::before {
    content: attr(data-etiqueta);
    font-weight: 600;
    color: var(--texto-suave);
  }
}

/* ─── Actividad y listas: fila = frase legible (§5.4.2) ─── */
.lista-filas { display: flex; flex-direction: column; }
.fila {
  padding: var(--espacio-sm) 0;
  border-bottom: 1px solid var(--borde-tenue);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
.fila:last-child { border-bottom: none; }
.fila { transition: background-color 0.15s ease; }
.fila:hover { background: var(--fondo-2); }
.fila-cabecera { display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap; font-size: var(--texto-sm); color: var(--texto-suave); }
.fila-cabecera .icono { width: 1em; height: 1em; }
.fila-frase { font-size: var(--texto-base); color: var(--texto); }
.fila-acciones { display: flex; gap: var(--espacio-sm); margin-top: 0.2em; flex-wrap: wrap; }
.fila-detalle { margin-top: 0.4em; }
.fila-detalle pre {
  background: var(--fondo-2);
  border-radius: var(--radio);
  padding: var(--espacio-sm);
  overflow-x: auto;
  font-size: var(--texto-xs);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── Filtros ─── */
.filtros { display: flex; flex-wrap: wrap; gap: var(--espacio-sm); align-items: center; margin-bottom: var(--espacio-md); }
.filtros select, .filtros input { width: auto; min-width: 8rem; }
.filtros .buscador { flex: 1 1 12rem; }

/* ─── Paginación ─── */
.paginacion { display: flex; gap: var(--espacio-sm); align-items: center; justify-content: center;
  margin-top: var(--espacio-md); font-size: var(--texto-sm); color: var(--texto-suave); }

/* ─── Avisos (franja bajo el tablero, §5.3) ─── */
.avisos { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--espacio-md); }
.aviso-fila {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem var(--espacio-md);
  border-radius: var(--radio);
  font-size: var(--texto-sm);
}
.aviso-fila.critico { background: var(--error-fondo); color: var(--error); }
.aviso-fila.atencion { background: var(--aviso-fondo); color: var(--aviso); }
.aviso-fila a { margin-inline-start: auto; white-space: nowrap; }

/* ─── Estado vacío: enseña, no se disculpa (§5.3, §5.6.5) ─── */
.vacio {
  text-align: center;
  padding: var(--espacio-xl) var(--espacio-md);
  color: var(--texto-suave);
}
.vacio .icono { width: 2.5rem; height: 2.5rem; color: var(--marca); margin-bottom: var(--espacio-sm); }
.vacio h3 { font-size: var(--texto-lg); color: var(--texto-fuerte); margin: 0 0 0.5rem; }
.vacio ol { text-align: start; max-width: 28rem; margin: var(--espacio-sm) auto; }
.vacio-banda {
  position: relative;
}
.vacio-banda::after {
  content: "EJEMPLO";
  position: absolute;
  top: 0.4rem;
  inset-inline-end: 0.4rem;
  background: var(--aviso-fondo);
  color: var(--aviso);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radio-pill);
}

/* ─── Gráficos SVG (heredan currentColor: el oscuro sale gratis) ─── */
.grafico { width: 100%; height: auto; color: var(--texto-suave); }
.grafico text { fill: currentColor; font-size: var(--texto-xs); font-family: inherit; }
/* El «sin datos» de un gráfico vacío: legible, pero sin gritar más que las
   cifras de al lado, que sí tienen algo que contar. */
.grafico .grafico-vacio { font-size: var(--texto-sm); fill: var(--texto-suave); }
.grafico .serie-1 { fill: var(--serie-1); stroke: var(--serie-1); }
.grafico .serie-2 { fill: var(--serie-2); stroke: var(--serie-2); }
.grafico .serie-3 { fill: var(--serie-3); stroke: var(--serie-3); }
.grafico .serie-4 { fill: var(--serie-4); stroke: var(--serie-4); }
.grafico .serie-5 { fill: var(--serie-5); stroke: var(--serie-5); }
.grafico .eje { stroke: var(--borde); }

/* ─── Pasos (asistente de alta) ─── */
.pasos { display: flex; gap: var(--espacio-sm); margin-bottom: var(--espacio-lg); flex-wrap: wrap; }
.pasos .paso { font-size: var(--texto-sm); color: var(--texto-suave); display: flex; align-items: center; gap: 0.4em; }
.pasos .paso.activo { color: var(--marca-fuerte); font-weight: 600; }
.pasos .paso.hecho { color: var(--exito); }

/* ─── Iconos ─── */
.icono { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.125em; }
.icono.relleno { fill: currentColor; stroke: none; }

/* ─── Conmutador de tema — el botón ya tenía CSS y JS (`app.js`,
   `[data-conmutador-tema]`) pero ninguna plantilla lo pintaba: el modo
   oscuro solo se veía si el sistema operativo ya estaba en oscuro, sin
   forma de elegirlo aparte. El ícono muestra el destino del clic, no el
   estado actual (convención GitHub/Vercel): sol cuando está oscuro
   ofreciendo claro, luna cuando está claro ofreciendo oscuro. ─── */
.conmutador-tema { background: none; border: 1px solid var(--borde); color: var(--texto-suave); padding: 0.4rem; }
.conmutador-tema:hover { background: var(--fondo-2); filter: none; }
[data-conmutador-tema] .icono-sol { display: none; }
[data-conmutador-tema] .icono-luna { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) [data-conmutador-tema] .icono-sol { display: inline; }
  :root:not([data-tema="claro"]) [data-conmutador-tema] .icono-luna { display: none; }
}
:root[data-tema="oscuro"] [data-conmutador-tema] .icono-sol { display: inline; }
:root[data-tema="oscuro"] [data-conmutador-tema] .icono-luna { display: none; }
:root[data-tema="claro"] [data-conmutador-tema] .icono-sol { display: none; }
:root[data-tema="claro"] [data-conmutador-tema] .icono-luna { display: inline; }

/* ─── Objetivo táctil, ancho contenido (skill responsive-design) ─── */
/* El botón del menú SOLO existe en pantallas estrechas: en ancho, la
   navegación ya está a la vista y un botón «Menú» sobraría. */
.boton-menu { display: none; }

@media (max-width: 640px) {
  nav.principal { display: none; }
  nav.principal.abierta { display: flex; flex-direction: column; width: 100%; }
  .boton-menu { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (min-width: 1024px) {
  nav.principal { display: flex; }
}

/* ─── Utilidades — para no escribir `style=` en ninguna plantilla (§5.6, C10) ─── */
.caja-angosta { max-width: 26rem; margin-inline: auto; }
/* 22-sep-2026 — mismo bug que el de las tarjetas de la portada (línea ~683),
   encontrado por auditoría explícita: las cuatro pantallas de cuenta
   (`registro`, `ingresar`, `recuperar`, `clave_nueva`) llevaban
   `tw:rounded-2xl tw:border-border/60 tw:shadow-xl tw:shadow-black/5 tw:p-8`
   en su tarjeta principal — INERTES las tres propiedades, medido con
   `getComputedStyle` en las cuatro pantallas reales (no leyendo el HTML):
   `borderRadius` daba 8px (el de `.tarjeta` a secas, nunca los 16px
   pedidos), `padding` daba 17.8px (nunca los 32px pedidos) y `boxShadow`
   daba `--sombra-1` (nunca la sombra pedida) — la regla sin capa de
   `.tarjeta` le sigue ganando a la utilidad de Tailwind, esté en la
   plantilla que esté. Se quitan esas clases inertes del HTML y se arregla
   aquí, en una hoja sin capa, donde sí puede ganar. `--sombra-2` en vez de
   un valor fijo porque ya está calibrada para los dos temas (ver su
   definición) — un rgba nuevo habría que auditarlo aparte en oscuro. */
.tarjeta.caja-angosta {
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--sombra-2);
}
.forma-angosta { margin-top: var(--espacio-sm); max-width: 24rem; }
.mt-1 { margin-top: var(--espacio-sm); }
.mb-1 { margin-bottom: var(--espacio-md); }
.sin-margen { margin: 0; }
.etiqueta-en-linea { margin: 0; font-weight: 400; }
.en-linea-bloque { display: inline-block; }
.en-linea-bloque-arriba { display: inline-block; vertical-align: top; }
.sin-subrayado { text-decoration: none; }
.con-puntero { cursor: pointer; }
.texto-critico { color: var(--error); font-weight: 600; }
.pre-envuelto { white-space: pre-wrap; word-break: break-word; }
.casilla-en-linea { display: flex; align-items: center; gap: 0.35em; margin: 0; font-weight: 400; }

/* ─── Portada pública: composición editorial y flujo de operación ─────── */
.portada-seccion {
  --portada-navy: #102a43;
  --portada-crema: #f6f1e7;
  --portada-teal: #2f6f6d;
  --portada-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --portada-gutter: clamp(2rem, 3.4vw, 4rem);
  position: relative;
  display: grid;
  align-items: start;
  width: 100vw;
  min-height: clamp(36rem, calc(100svh - 4.5rem), 48rem);
  margin: 0 calc(50% - 50vw);
  padding: clamp(4rem, 10vh, 7rem) var(--portada-gutter) 5rem;
  overflow: hidden;
  background: var(--portada-navy);
  color: #fff;
}
.portada-media,
.portada-velo {
  position: absolute;
  inset: 0;
}
.portada-media {
  background: url("/estaticos/imagenes/lila-operacion-amanecer.webp") center center / cover no-repeat;
  transform: scale(1.035);
  animation: portada-acercamiento 4.5s var(--portada-ease-out) both;
}
.portada-velo {
  background:
    linear-gradient(90deg, rgba(5, 15, 25, 0.68) 0%, rgba(5, 15, 25, 0.4) 38%, rgba(5, 15, 25, 0.05) 72%),
    linear-gradient(0deg, rgba(4, 12, 20, 0.48) 0%, transparent 42%);
}
.portada-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  animation: portada-copy 720ms var(--portada-ease-out) 120ms both;
}
.titular-portada {
  max-width: none;
  font-size: clamp(3.3rem, 4.7vw, 4.8rem);
  line-height: 1.01;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0;
  color: #fff;
}
.portada-seccion .subtitulo-portada {
  max-width: 31rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--texto-base);
  line-height: 1.55;
}
.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-sm); }
.portada-seccion .boton-primario {
  min-height: 50px;
  padding: 0.75rem 1.4rem;
  border-color: var(--portada-crema);
  background: var(--portada-crema);
  color: var(--portada-navy);
  font-size: var(--texto-base);
  gap: 1.5rem;
  border-radius: 3px;
}
.escena-lila {
  position: absolute;
  z-index: 1;
  right: var(--portada-gutter);
  bottom: clamp(3.5rem, 9vh, 5.5rem);
  display: grid;
  width: min(30rem, 38vw);
  gap: 0.75rem;
  min-height: 20rem;
  align-content: end;
}
.escena-mensajes { display: grid; gap: 0.75rem; }
.escena-avatar {
  position: relative;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: var(--escena-avatar, #2c6968);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.escena-avatar::before,
.escena-avatar i {
  position: absolute;
  inset: 0.45rem;
  border: 2px solid var(--escena-trazo, #9ed6c8);
  border-radius: 50%;
  content: "";
}
.escena-avatar i { inset: 0.72rem; border-color: rgba(158,214,200,0.48); }
.escena-mensaje {
  display: grid;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(15, 24, 32, 0.72);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: var(--texto-sm);
  line-height: 1.45;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms var(--portada-ease-out), transform 260ms var(--portada-ease-out);
}
.escena-mensaje-persona {
  grid-template-columns: auto 1fr;
  width: 90%;
  justify-self: end;
}
.escena-mensaje-lila {
  grid-template-columns: auto 1fr auto;
}
.escena-mensaje-oculto { opacity: 0; transform: translateY(8px); }
.escena-mensaje p { margin: 0; }
.escena-mensaje-lila strong { display: block; font-size: var(--texto-xs); }
.escena-mensaje-lila p { margin-top: 0.1rem; font-weight: 650; }
.escena-mensaje-lila div > span { color: rgba(255, 255, 255, 0.68); font-size: var(--texto-xs); }
.escena-canal,
.escena-confirmacion {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 700;
}
.escena-canal { background: #249bd4; }
.escena-canal-whatsapp { background: #25a86a; }
.escena-canal svg { width: 1.15rem; height: 1.15rem; fill: #fff; }
.escena-confirmacion {
  border: 1px solid var(--escena-confirma-borde, rgba(118, 208, 178, 0.7));
  background: var(--escena-confirma-fondo, rgba(47, 111, 109, 0.42));
  color: var(--escena-confirma-texto, #c6f2df);
}
.portada-integraciones {
  position: absolute;
  z-index: 1;
  bottom: 1.5rem;
  left: var(--portada-gutter);
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--texto-sm);
  letter-spacing: 0.01em;
  opacity: 0;
  animation: escena-fundido 500ms var(--portada-ease-out) 2.1s both;
  max-width: min(48vw, 38rem);
  overflow: hidden;
}
.portada-integraciones-cinta {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: integraciones-recorrido 34s linear 2.1s infinite;
}
.portada-integraciones-grupo { display: flex; flex: 0 0 auto; align-items: center; gap: 0.45rem; padding-right: 0.9rem; white-space: nowrap; }
@keyframes integraciones-recorrido {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes portada-acercamiento {
  from { transform: scale(1.035); }
  to { transform: scale(1); }
}
@keyframes portada-copy {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes escena-paso {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes escena-fundido {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .escena-mensaje { transition: opacity 260ms var(--portada-ease-out); }
  .escena-mensaje-oculto { transform: none; }
}
.portada-seccion-final { text-align: center; padding-block: var(--espacio-xl); }

.portada-mecanismo, .portada-control { margin-block: clamp(3rem, 7vw, 6rem); }
.portada-seccion-titulo { margin-bottom: var(--espacio-xl); }
.portada-seccion-titulo h2, .portada-control-intro h2 { max-width: 19ch; margin: 0; font-size: var(--texto-3xl); line-height: 1.12; letter-spacing: -0.035em; }
.portada-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.portada-paso { padding: var(--espacio-lg) var(--espacio-md); }
.portada-paso:first-child { padding-left: 0; }
.portada-paso + .portada-paso { border-left: 1px solid var(--borde); }
.portada-paso h3, .portada-control-item h3 { margin: 0; color: var(--texto-fuerte); font-size: var(--texto-base); font-weight: 650; }
.portada-paso p, .portada-control-item p { margin: var(--espacio-xs) 0 0; color: var(--texto-suave); font-size: var(--texto-sm); line-height: 1.55; }
.portada-control { display: grid; grid-template-columns: minmax(15rem, 0.75fr) minmax(0, 1.25fr); gap: clamp(2rem, 7vw, 6rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); border-block: 1px solid var(--borde); }
.portada-control-intro > .secundario { max-width: 32rem; margin-top: var(--espacio-sm); }
.portada-control-lista { border-top: 1px solid var(--borde); }
.portada-control-item { padding-block: var(--espacio-md); }
.portada-control-item + .portada-control-item { border-top: 1px solid var(--borde-tenue); }

@media (max-width: 760px) {
  .portada-seccion {
    --portada-gutter: 1.5rem;
    min-height: 49rem;
    padding-top: 3.5rem;
  }
  .portada-media { background-position: 59% center; }
  .portada-velo {
    background:
      linear-gradient(180deg, rgba(4, 12, 20, 0.78) 0%, rgba(4, 12, 20, 0.42) 50%, rgba(4, 12, 20, 0.76) 100%),
      linear-gradient(90deg, rgba(4, 12, 20, 0.64), transparent 90%);
  }
  .titular-portada { max-width: 12ch; font-size: clamp(2.8rem, 13vw, 3.5rem); }
  .portada-seccion .subtitulo-portada { max-width: 27rem; }
  .escena-lila {
    right: var(--portada-gutter);
    bottom: 4.25rem;
    left: var(--portada-gutter);
    width: auto;
  }
  .escena-mensaje-persona { width: 94%; }
  .portada-integraciones { right: var(--portada-gutter); bottom: 1.25rem; max-width: calc(100% - 2 * var(--portada-gutter)); }
  .portada-seccion-titulo, .portada-control { grid-template-columns: minmax(0, 1fr); gap: var(--espacio-md); }
  .portada-pasos { grid-template-columns: minmax(0, 1fr); }
  .portada-paso, .portada-paso:first-child { padding: var(--espacio-md) 0; }
  .portada-paso + .portada-paso { border-left: 0; border-top: 1px solid var(--borde-tenue); }
}

@media (prefers-reduced-motion: reduce) {
  .portada-media,
  .portada-hero-copy,
  .escena-mensaje,
  .portada-integraciones {
    opacity: 1;
    transform: none;
  }
}

/* Los botones secundarios de la portada (`.boton.secundario` con
   `tw:rounded-full` en el HTML) tenían el MISMO problema: `button, .boton {
   border-radius: var(--radio); }` es una regla sin capa y siempre gana.
   Alcance a propósito: solo dentro de la portada — el resto de la consola
   sigue con el radio de `--radio` de siempre en sus botones secundarios. */
.barra-publica .boton.secundario,
.portada-seccion ~ section .boton.secundario {
  border-radius: var(--radio-pill);
}

/* Más aire entre bloques que el `.mb-1` genérico de la consola (§5.6.5,
   "aire entre bloques"): la portada es una fachada que se recorre con
   scroll, no una pantalla de trabajo densa — cada sección necesita
   separarse de la siguiente para leerse como un bloque propio. Selector
   de hermano general, sin clase nueva: solo afecta a lo que va DESPUÉS
   del hero de la portada.

   22-sep-2026 (el dueño, otra vez: "las secciones están pegadas"): subido
   de `--espacio-xl` a `--espacio-2xl` — el MISMO token que ya usa
   `.portada-seccion` para el aire del propio hero, así que el ritmo
   vertical de la portada es consistente de punta a punta, no dos escalas
   distintas. */
.portada-seccion ~ section { margin-bottom: var(--espacio-2xl); }

/* Las tres tarjetas de "Cómo funciona" son pasos, no datos sueltos: el
   trazo de marca arriba las agrupa como una secuencia, sin tocar el HTML
   ni la clase `.tarjeta` que comparten con el resto de la consola. */
#como-funciona.rejilla .tarjeta { border-top: 3px solid var(--marca); }

/* 22-sep-2026 — presencia de tarjeta a la par del front nuevo (React,
   `frontend_consola/src/components/ui/card.tsx`): mismo radio (12px, el
   `rounded-xl` de ahí) y una elevación real al pasar el cursor.

   🔴 CAUSA RAÍZ de "las tarjetas son lo más pobre de la pantalla": el HTML
   de `publico/inicio.html` YA pedía esto (`tw:rounded-2xl
   tw:border-border/60 tw:shadow-sm tw:hover:shadow-lg
   tw:hover:-translate-y-0.5`) pero NUNCA se aplicaba — comprobado en
   pantalla, no supuesto. Tailwind 4 mete sus utilidades dentro de `@layer
   utilities`; por especificación CSS, una regla SIN capa (como CUALQUIERA
   de esta hoja, `estilos.css`, que no declara `@layer`) le gana SIEMPRE a
   una regla con capa, sin importar especificidad ni orden de carga — así
   que el `border-radius: 8px` de `.tarjeta` (abajo) ganaba siempre contra
   el `tw:rounded-2xl` (16px) que el HTML pedía. El radio medido en pantalla
   era 8px, nunca 16px — "pieza escrita, nunca conectada", esta vez en CSS.
   Se quitaron esas clases inertes del HTML (ya no engañan a quien lea la
   plantilla) y se arregla AQUÍ, en una hoja sin capa, donde sí puede
   ganar. Alcance a propósito: solo las tarjetas DESPUÉS del hero de la
   portada (`.portada-seccion ~ section`) — el resto de la consola sigue
   con el radio de `--radio` de siempre, sin tocar. */
.portada-seccion ~ section .tarjeta,
.portada-seccion ~ section.tarjeta {
  border-radius: 12px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.portada-seccion ~ section .tarjeta:hover,
.portada-seccion ~ section .tarjeta:focus-within,
.portada-seccion ~ section.tarjeta:hover {
  box-shadow: var(--sombra-2);
  transform: translateY(-2px);
}
/* `<details>` abierto: la elevación de host quedaría rara con el contenido
   ya desplegado debajo — se queda en el resto de `--sombra-1`, sin levantar. */
.portada-seccion ~ section details.tarjeta[open]:hover,
.portada-seccion ~ section details.tarjeta[open]:focus-within {
  transform: none;
}

/* 22-sep-2026 — el dueño, mirando los DOS temas (encargo posterior, con
   hallazgos concretos): "en oscuro las tarjetas casi desaparecen — el
   fondo es casi el mismo negro de la página". Causa: una sombra OSCURA
   sobre una página ya casi negra no separa nada — es una técnica de tema
   CLARO (`--sombra-1`/`--sombra-2` son negro con alfa; sobre #17181a el ojo
   no distingue "negro con alfa 0.4" de "negro"). En oscuro la tarjeta se
   distingue por el BORDE, no por la sombra: se usa `--campo-borde`
   (#7a7a7e), el MISMO tono que ya se calibró para que los campos de
   formulario se separen del fondo en oscuro (ver su comentario, línea
   ~133) — reutilizado, no un tono nuevo que auditar aparte. En claro no
   hace falta: `--borde` (#d1d5db) ya separa bien sobre blanco. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .portada-seccion ~ section .tarjeta,
  :root:not([data-tema="claro"]) .portada-seccion ~ section.tarjeta {
    border-color: var(--campo-borde);
  }
}
:root[data-tema="oscuro"] .portada-seccion ~ section .tarjeta,
:root[data-tema="oscuro"] .portada-seccion ~ section.tarjeta {
  border-color: var(--campo-borde);
}

/* Título de cada bloque de tres tarjetas ("Cómo funciona" / "Qué te
   garantizamos", texto nuevo autorizado para este hallazgo): antes las seis
   tarjetas de los dos bloques se leían como una lista suelta de seis cosas,
   sin nada que las agrupe en "pasos" vs. "promesas". `h2` ya trae el tamaño
   y el peso del resto de la consola (§5.6.5) — solo hace falta centrarlo,
   a la par del resto de la portada. */
.titulo-bloque-portada { text-align: center; }
/* El título de cada TARJETA baja a `<h3>` (antes `<h2>`) porque ahora hay un
   `<h2>` de bloque por encima — jerarquía correcta, no decoración. Sin una
   regla propia caería al tamaño de párrafo del navegador por omisión (no
   hay `h3` general en esta hoja, a propósito: "cinco tamaños, ni uno más",
   §5.6.5) — se mantiene VISIBLE pero un escalón por debajo del título de
   bloque, alcance acotado a la tarjeta de la portada, no un `h3` global que
   habría que auditar en toda la consola. */
.portada-seccion ~ section .tarjeta h3 {
  font-size: var(--texto-base);
  font-weight: 600;
  color: var(--texto-fuerte);
  margin: 0;
}

/* El CTA del hero es la ÚNICA acción que importa en toda la pantalla y
   tenía el mismo tamaño que el botón secundario de al lado — sin jerarquía
   visual entre "la acción" y "leer más". Se escala por SELECTOR (nunca
   añadiendo una clase al `<a class="boton-primario">`: `test_publico_vista.
   py::test_portada_tiene_un_solo_cta_primario` cuenta el literal
   `class="boton-primario"` — una clase de más lo haría desaparecer del
   conteo). Alcance: solo el CTA dentro del hero de la portada; el de la
   sección final (`.portada-seccion-final`) y el resto de la consola
   siguen con el tamaño de siempre. */
.portada-seccion .boton-primario {
  min-height: 50px;
  padding: 0.75rem 1.4rem;
  font-size: var(--texto-base);
}

/* El triángulo nativo de `<details>` se ve distinto en cada navegador y no
   dice "clic aquí": un "+" que gira a "×" al abrir, con `::marker` en vez de
   una imagen, es la misma información con la fricción de un ícono menos. */
details.tarjeta > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-sm);
}
details.tarjeta > summary::-webkit-details-marker { display: none; }
details.tarjeta > summary::after {
  content: "+";
  flex: none;
  font-size: var(--texto-lg);
  font-weight: 400;
  color: var(--marca-fuerte);
  transition: transform 0.15s ease;
}
details.tarjeta[open] > summary::after { transform: rotate(45deg); }

.boton-primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radio);
  border: 1px solid var(--boton-primario-fondo);
  background: var(--boton-primario-fondo);
  color: var(--boton-primario-texto);
  font-size: var(--texto-base);
  font-weight: 600;
  cursor: pointer;
}

/* ─── Página de error (`plantillas/error.html`, agente app.py): los botones
   de salida centrados, igual que el resto de `.vacio` ─── */
.vacio .fila-acciones { justify-content: center; }

/* ─── Cabecera de las pantallas sin sesión ───
   21-sep/25-sep-2026: nace para la familia "entrar a tu cuenta"
   (`ingresar`/`recuperar`/`clave_nueva`) — un enlace de vuelta a la
   izquierda, el conmutador a la derecha.

   22-sep-2026 (el team-lead, mirando la portada real a 1470px): "la
   cabecera está desordenada" — la portada y `registro`/`seguridad` NO
   usaban esta clase, pintaban `nav.principal` y el conmutador SUELTOS,
   hermanos sin envoltorio flex común. Resultado medido en pantalla: el nav
   se estira al 100% dentro de `<main>` (que no es flex, así que el
   `margin-inline-start: auto` de `nav.principal` no tenía contra qué
   empujar) y queda pegado arriba y corrido a la izquierda; el conmutador,
   sin fila que compartir, cae en la línea de abajo, suelto; y en NINGUNA
   de las tres pantallas hay marca — quien llega de un enlace no sabe dónde
   está.

   Una sola clase para las seis pantallas públicas con encabezado propio
   (`inicio`, `registro`, `seguridad`, `ingresar`, `recuperar`,
   `clave_nueva`): `.marca-cabecera` siempre primero (identidad, sin
   `href` — misma marca «Lila» que `header.cabecera`, no es
   una cuarta opción de navegación), luego el contenido propio de cada
   pantalla (`nav.principal`, que YA trae `margin-inline-start: auto` —
   línea 242 — o el enlace único `.volver-inicio`, que lo toma prestado
   abajo), y el conmutador siempre al final. Sin `justify-content:
   space-between`: con dos o tres elementos ese reparto los separa a partes
   iguales por toda la fila — vacío en el medio otra vez, el mismo defecto
   que se está arreglando —, el auto-margin del elemento penúltimo agrupa
   todo lo demás contra el borde derecho, que es lo que pide una cabecera:
   marca a un lado, el resto junto al otro. */
.barra-publica {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-xs) var(--espacio-md);
  padding-block: var(--espacio-sm);
}
.barra-portada {
  width: 100vw;
  min-height: 4.5rem;
  margin: 0 calc(50% - 50vw);
  padding-inline: clamp(2rem, 3.4vw, 4rem);
}
.barra-publica .marca-cabecera {
  font-size: var(--texto-lg);
  font-weight: 600;
  color: var(--texto-fuerte);
}
.barra-portada .marca-cabecera {
  font-size: clamp(1.55rem, 2vw, 1.85rem);
  letter-spacing: -0.045em;
}
.barra-portada nav.principal > a:not(.boton) {
  color: #18272e;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
}
.barra-portada nav.principal > a:not(.boton):hover {
  color: #18272e;
  text-decoration-color: currentColor;
}
.barra-portada .boton.secundario {
  min-height: 2.75rem;
  padding-inline: 1.3rem;
  border-color: var(--acceso-fondo, #102a33);
  border-radius: 3px;
  background: var(--acceso-fondo, #102a33);
  color: #fff;
}
.barra-portada .boton.secundario:hover { background: var(--acceso-hover, #183a45); }
.barra-portada .conmutador-tema {
  border-radius: 3px;
  background: transparent;
}
.barra-publica .volver-inicio { margin-inline-start: auto; }

/* La portada no hereda la cabecera ni los controles de la consola. */
.cabecera-portada {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: 100vw;
  min-height: 4.5rem;
  margin: 0 calc(50% - 50vw);
  padding-inline: clamp(2rem, 3.4vw, 4rem);
  background: #fbfaf7;
  color: #10242b;
}
.cabecera-portada .marca-cabecera {
  font-size: clamp(1.55rem, 2vw, 1.85rem);
  font-weight: 650;
  letter-spacing: -0.04em;
}
.portada-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.4rem); margin-inline-start: auto; }
.portada-nav a { color: #18272e; font-size: 0.86rem; font-weight: 560; text-decoration: none; text-underline-offset: 0.35em; }
.portada-nav > a:not(.acceso-portada):hover { text-decoration: underline; }
.acceso-portada {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding-inline: 1.3rem;
  border: 1px solid var(--acceso-fondo, #102a33);
  border-radius: 3px;
  background: var(--acceso-fondo, #102a33);
  color: #fff !important;
}
.acceso-portada:hover { background: var(--acceso-hover, #183a45); }
.tema-portada,
.menu-portada {
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid #d6dcda;
  border-radius: 3px;
  background: transparent;
  color: #34474d;
}
.tema-portada { display: grid; place-items: center; padding: 0; }
.tema-portada .icono { width: 1.05rem; height: 1.05rem; }
.menu-portada { display: none; align-items: center; gap: 0.5rem; padding-inline: 0.8rem; font: inherit; font-size: 0.82rem; }
.menu-portada svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
@media (max-width: 640px) {
  .cabecera-portada { flex-wrap: wrap; padding-inline: 1rem; }
  .menu-portada { display: inline-flex; margin-inline-start: auto; }
  .portada-nav { display: none; order: 4; width: 100%; margin: 0; padding-bottom: 1rem; align-items: stretch; flex-direction: column; gap: 0; }
  .portada-nav.abierta { display: flex; }
  .portada-nav a { min-height: 2.75rem; display: flex; align-items: center; padding-inline: 0.25rem; }
  .portada-nav .acceso-portada { justify-content: center; margin-top: 0.5rem; padding-inline: 1rem; }
}

/* ─── Portada 2026: narrativa de producto ────────────────────────────────
   El cuerpo usa superficies completas y demostraciones del producto. No
   hereda el patrón de tarjeta de la consola: una fachada explica; una
   consola opera. */
.relato-operativo,
.operacion-lila,
.confianza-lila,
.preguntas-lila,
.cierre-lila {
  --landing-navy: #0d2630;
  --landing-ink: #101a22;
  --landing-teal: #397c78;
  --landing-mint: #b9d8c9;
  --landing-sand: #e2d9d2;
  --landing-paper: #f7f2ea;
  --landing-ease: cubic-bezier(0.23, 1, 0.32, 1);
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw) !important;
  color: var(--landing-ink);
}
.relato-operativo,
.confianza-lila,
.preguntas-lila {
  padding-inline: clamp(1.5rem, 5vw, 6rem);
}
.relato-etiqueta {
  margin: 0 0 1.15rem;
  color: var(--landing-teal);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Primer capítulo: tres momentos, cada uno demostrado en vez de descrito. */
.relato-operativo {
  padding-block: clamp(6rem, 10vw, 9.5rem);
  overflow: hidden;
  background: var(--landing-sand);
}
.relato-encabezado,
.operacion-encabezado {
  max-width: 48rem;
  margin: 0 auto clamp(3.5rem, 6vw, 5.5rem);
  text-align: center;
}
.relato-encabezado h2,
.operacion-encabezado h2,
.confianza-intro h2,
.preguntas-intro h2,
.cierre-lila h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(2.25rem, 4vw, 4.1rem);
  font-weight: 520;
  line-height: 0.99;
  letter-spacing: -0.055em;
}
.relato-encabezado > p:last-child,
.operacion-encabezado > p:last-child {
  max-width: 40rem;
  margin: 1.5rem auto 0;
  color: #59636a;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55;
}
.relato-paneles {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.4vw, 1.4rem);
  max-width: 84rem;
  margin: 0 auto;
}
.relato-panel {
  display: grid;
  grid-template-rows: auto minmax(20rem, 1fr) auto;
  min-width: 0;
  min-height: 32rem;
  padding: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(16, 26, 34, 0.1);
  border-radius: 0.375rem;
  background: rgba(250, 247, 242, 0.82);
  box-shadow: 0 14px 36px rgba(44, 35, 28, 0.055);
}
.relato-paneles[data-revelar] .relato-panel,
.conversacion-operativa[data-revelar],
.confianza-columnas > article[data-revelar] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 250ms var(--portada-ease-out), transform 250ms var(--portada-ease-out);
}
.relato-paneles[data-revelar][data-revelado] .relato-panel,
.conversacion-operativa[data-revelado],
.confianza-columnas > article[data-revelado] {
  opacity: 1;
  transform: translateY(0);
}
.relato-paneles[data-revelar][data-revelado] .relato-panel:nth-child(2) { transition-delay: 65ms; }
.relato-paneles[data-revelar][data-revelado] .relato-panel:nth-child(3) { transition-delay: 130ms; }
.relato-panel-consulta { grid-column: span 7; background: var(--panel-consulta, #d5e4e0); }
.relato-panel-erp { grid-column: span 5; background: var(--panel-erp, #c8d9e3); }
.relato-panel-control {
  grid-column: 1 / -1;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(22rem, 1.2fr);
  grid-template-rows: auto 1fr;
  min-height: 29rem;
  background: var(--panel-control, #c7a99d);
}
.relato-panel-control .relato-panel-meta { grid-column: 1 / -1; }
.relato-panel-control .demo-aprobacion { grid-column: 2; grid-row: 2; width: min(100%, 31rem); }
.relato-panel-control .relato-panel-pie { grid-column: 1; grid-row: 2; align-self: center; max-width: 25rem; padding: clamp(2rem, 5vw, 4rem); }
.relato-panel-control .relato-panel-pie h3 { font-size: clamp(1.8rem, 3vw, 3.1rem); font-weight: 520; line-height: 1.05; letter-spacing: -0.045em; }
.relato-panel-control .relato-panel-pie p { max-width: 23rem; font-size: 0.95rem; }
.relato-panel-meta {
  display: flex;
  justify-content: space-between;
  color: #6d7478;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.relato-panel-pie { padding: 1.35rem 0.25rem 0.2rem; }
.relato-panel-pie h3 { margin: 0; color: var(--landing-ink); font-size: 1.08rem; }
.relato-panel-pie p { margin: 0.55rem 0 0; color: #646d72; font-size: 0.88rem; line-height: 1.5; }
.demo-movil,
.demo-erp,
.demo-aprobacion {
  align-self: center;
  width: min(100%, 22rem);
  margin: 2rem auto;
  border: 1px solid rgba(16, 26, 34, 0.12);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 22px 48px rgba(44, 35, 28, 0.12);
  transition: transform 500ms var(--landing-ease), box-shadow 500ms var(--landing-ease);
}
.relato-panel:hover .demo-movil,
.relato-panel:hover .demo-erp,
.relato-panel:hover .demo-aprobacion,
.relato-panel:focus-within .demo-movil,
.relato-panel:focus-within .demo-erp,
.relato-panel:focus-within .demo-aprobacion {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(44, 35, 28, 0.17);
}
.demo-movil { padding: 0.85rem; }
.demo-movil-cabecera { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.65rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e8eaeb; }
.demo-avatar { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border-radius: 50%; background: var(--landing-teal); color: #fff; font-weight: 700; }
.demo-movil-cabecera strong, .demo-movil-cabecera small { display: block; }
.demo-movil-cabecera strong { font-size: 0.82rem; }
.demo-movil-cabecera small { margin-top: 0.1rem; color: #778085; font-size: 0.65rem; }
.demo-movil-cabecera i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #55a77e; box-shadow: 0 0 0 0.25rem #e8f5ee; }
.demo-burbuja { width: 82%; margin: 4.4rem 0 0 auto; padding: 0.8rem 0.9rem; border-radius: 0.9rem 0.9rem 0.2rem 0.9rem; background: var(--burbuja-fondo, #dcefea); color: var(--burbuja-texto, #173c3b); font-size: 0.86rem; line-height: 1.4; }
.relato-panel-consulta:hover .demo-burbuja { transform: translateX(-5px); }
.demo-burbuja { transition: transform 450ms var(--landing-ease); }
.demo-hora { margin: 0.45rem 0 1rem; color: #949b9f; font-size: 0.6rem; text-align: right; }
.demo-erp { padding: 1rem; }
.demo-erp-barra { display: flex; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid #e8eaeb; color: #22313a; font-size: 0.8rem; font-weight: 700; }
.demo-conectado { color: var(--conectado, #347466); }
.demo-resultado { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: center; margin-block: 3.3rem 2.2rem; }
.demo-icono-documento { width: 2.7rem; height: 3.2rem; border: 1.5px solid var(--icono-doc-borde, #3f7975); border-radius: 0.35rem; background: linear-gradient(var(--icono-doc-trazo, #d8ebe7) 0 0) 50% 35% / 60% 2px no-repeat, linear-gradient(var(--icono-doc-trazo, #d8ebe7) 0 0) 50% 55% / 60% 2px no-repeat; }
.demo-icono-documento { transition: transform 450ms var(--landing-ease); }
.relato-panel-erp:hover .demo-icono-documento { transform: rotate(-4deg) scale(1.06); }
.demo-resultado strong, .demo-resultado small { display: block; }
.demo-resultado strong { color: #14262e; font-size: 0.94rem; }
.demo-resultado small { margin-top: 0.25rem; color: #687277; font-size: 0.7rem; line-height: 1.4; }
.demo-lineas { display: grid; gap: 0.45rem; }
.demo-lineas i { height: 0.38rem; border-radius: 2rem; background: #edf0f0; }
.demo-lineas i:nth-child(1) { width: 100%; }
.demo-lineas i:nth-child(2) { width: 76%; }
.demo-lineas i:nth-child(3) { width: 88%; }
.demo-aprobacion { padding: 1.2rem; }
.demo-canal-aprobacion { display: flex; align-items: center; gap: 0.55rem; margin: -0.1rem 0 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid #e5e8e9; color: #2a3b42; font-size: 0.72rem; }
.demo-canal-aprobacion span { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 50%; background: #2d86ad; color: #fff; font-weight: 750; }
.demo-estado { display: inline-flex; padding: 0.35rem 0.5rem; border-radius: 999px; background: #f3e5b8; color: #765b17; font-size: 0.63rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.demo-aprobacion > h3 { max-width: 14rem; margin: 1.25rem 0 2rem; color: #17262d; font-size: 1.35rem; line-height: 1.15; }
.demo-aprobacion dl { margin: 0; border-block: 1px solid #e5e8e9; }
.demo-aprobacion dl div { display: flex; justify-content: space-between; padding-block: 0.7rem; }
.demo-aprobacion dl div + div { border-top: 1px solid #eef0f1; }
.demo-aprobacion dt { color: #778085; font-size: 0.72rem; }
.demo-aprobacion dd { margin: 0; color: #25333b; font-size: 0.76rem; font-weight: 700; }
.demo-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 1rem; text-align: center; }
.demo-botones span, .demo-botones strong { padding: 0.65rem; border-radius: 0.55rem; font-size: 0.74rem; }
.demo-botones span { border: 1px solid #dfe3e4; color: #556066; }
.demo-botones strong { background: var(--landing-navy); color: #fff; }
.relato-panel-control:hover .demo-botones strong { transform: scale(1.025); background: var(--boton-hover, #245c55); }

/* Segundo capítulo: el producto pasa a primer plano. */
.operacion-lila {
  padding: clamp(6rem, 10vw, 10rem) clamp(1.5rem, 5vw, 6rem);
  overflow: hidden;
  background: var(--landing-navy);
  color: #f7f4ed;
}
.operacion-encabezado { margin-bottom: 2.5rem; }
.operacion-encabezado .relato-etiqueta { color: var(--oper-etiqueta, #8fc3b5); }
.operacion-encabezado > p:last-child { color: rgba(247, 244, 237, 0.7); }
.capacidades-lila {
  display: flex;
  width: max-content;
  max-width: none;
  margin: 0 auto 3rem;
  gap: 0.55rem;
  transform: translateX(2.5rem);
}
.capacidades-lila span {
  flex: none;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  color: rgba(255,255,255,0.78);
  font-size: 0.78rem;
}
.conversacion-operativa {
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(25rem, 1.28fr);
  max-width: 74rem;
  min-height: 39rem;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 1.3rem;
  background: var(--landing-paper);
  color: var(--landing-ink);
  box-shadow: 0 38px 90px rgba(0,0,0,0.24);
}
.conversacion-contexto {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 5vw, 4.5rem);
  border-right: 1px solid #d9dfdc;
  background: var(--contexto-fondo, #dbe7e2);
}
.conversacion-contexto > p {
  margin: 0 0 2.5rem;
  color: var(--contexto-etiqueta, #527169);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.conversacion-contexto h3 {
  margin: 0;
  color: var(--contexto-titulo, #10272f);
  font-size: clamp(2.1rem, 3.7vw, 3.55rem);
  font-weight: 520;
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.sistemas-conectados {
  display: grid;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 3rem;
}
.sistemas-conectados span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.65rem;
  padding: 0.8rem;
  border: 1px solid var(--sistema-borde, rgba(24, 63, 61, 0.13));
  border-radius: 0.7rem;
  background: rgba(255,255,255,0.48);
}
.sistemas-conectados i {
  grid-row: 1 / span 2;
  display: grid;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border-radius: 0.5rem;
  background: #f8f5ee;
  color: var(--sistema-icono, #315f59);
  font-style: normal;
  font-weight: 750;
}
.sistemas-conectados b { color: var(--sistema-nombre, #20383c); font-size: 0.78rem; }
.sistemas-conectados small { color: var(--sistema-detalle, #667b77); font-size: 0.65rem; }
.chat-operativo { align-self: center; width: min(88%, 35rem); margin: 3rem auto; overflow: hidden; border: 1px solid #d9dddc; border-radius: 1.05rem; background: #fff; box-shadow: 0 20px 50px rgba(29, 50, 47, 0.12); }
.chat-cabecera { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem; padding: 0.9rem 1rem; border-bottom: 1px solid #e5e8e7; background: #fbfcfb; }
.chat-canal { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: 50%; background: var(--chat-canal, #2f866f); color: #fff; font-weight: 750; }
.chat-cabecera strong, .chat-cabecera small { display: block; }
.chat-cabecera strong { color: #172b31; font-size: 0.82rem; }
.chat-cabecera small { margin-top: 0.12rem; color: #73807e; font-size: 0.66rem; }
.chat-cabecera > i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #51a982; box-shadow: 0 0 0 0.25rem #e2f1e9; }
.chat-mensajes { display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem; background: #f4f1eb; }
.chat-fecha { align-self: center; color: #8a918f; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; }
.chat-persona,
.chat-lila { max-width: 84%; margin: 0; padding: 0.75rem 0.85rem; font-size: 0.74rem; line-height: 1.45; }
.chat-persona { align-self: flex-end; border-radius: 0.8rem 0.8rem 0.18rem 0.8rem; background: var(--persona-fondo, #d9eee7); color: var(--persona-texto, #173e38); }
.chat-lila { align-self: flex-start; border-radius: 0.8rem 0.8rem 0.8rem 0.18rem; background: #fff; color: #314146; box-shadow: 0 4px 14px rgba(33,54,50,0.06); }
.chat-lila > strong, .chat-lila > span { display: block; }
.chat-lila > strong { margin-bottom: 0.3rem; color: #14282f; }
.chat-lila > span { color: #5c686b; }
.chat-lila dl { margin: 0.7rem 0 0; border-block: 1px solid #e6e9e8; }
.chat-lila dl div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.48rem; }
.chat-lila dl div + div { border-top: 1px solid #eef0ef; }
.chat-lila dt { color: #7b8585; }
.chat-lila dd { margin: 0; color: #25363b; font-weight: 700; }
.chat-acciones { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0.45rem; margin-top: 0.7rem; text-align: center; }
.chat-acciones span, .chat-acciones b { padding: 0.55rem; border-radius: 0.48rem; }
.chat-acciones span { border: 1px solid #dfe3e2; color: #667173; }
.chat-acciones b { background: var(--chat-boton, #1b514a); color: #fff; }
.chat-aprobado { max-width: 38%; }
.chat-confirmacion { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.55rem; }
.chat-confirmacion i { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 50%; background: var(--confirma-icono-fondo, #ddefe7); color: #2d6a5d; font-style: normal; font-weight: 750; }
.chat-confirmacion strong { color: var(--confirma-titulo, #17332f); }

/* Tercer capítulo: evidencia, FAQ y cierre editorial. */
.confianza-lila { padding-block: clamp(6rem, 10vw, 9rem); background: var(--confianza-fondo, #edf2f1); }
.confianza-intro { max-width: 65rem; margin: 0 auto clamp(4rem, 7vw, 7rem); }
.confianza-intro h2 { max-width: 18ch; font-size: clamp(2.2rem, 3.8vw, 3.9rem); }
.confianza-columnas { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); max-width: 80rem; margin: 0 auto; border-top: 1px solid #cbd5d3; }
.confianza-columnas article { padding: 1.3rem clamp(0.8rem, 1.6vw, 1.5rem) 0; }
.confianza-columnas article + article { border-left: 1px solid #cbd5d3; }
.confianza-columnas article:first-child { padding-left: 0; }
.confianza-columnas span { color: #6f7c7a; font-size: 0.68rem; font-weight: 700; }
.confianza-columnas h3 { margin: 2.4rem 0 0.7rem; color: #17262d; font-size: 1rem; }
.confianza-columnas p { margin: 0; color: #65716f; font-size: 0.83rem; line-height: 1.55; }
.preguntas-lila { display: grid; grid-template-columns: minmax(15rem, 0.75fr) minmax(20rem, 1.25fr); gap: clamp(3rem, 8vw, 8rem); padding-block: clamp(6rem, 10vw, 9rem); background: #faf9f6; }
.preguntas-intro { max-width: 32rem; justify-self: end; }
.preguntas-intro h2 { font-size: clamp(2.1rem, 3.5vw, 3.5rem); }
.preguntas-lista { width: 100%; max-width: 43rem; border-top: 1px solid #cfd4d3; }
.preguntas-lista details { padding: 1.35rem 0; border-bottom: 1px solid #cfd4d3; }
.preguntas-lista summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none; color: #17262d; }
.preguntas-lista summary::-webkit-details-marker { display: none; }
.preguntas-lista summary::after { content: "+"; color: var(--landing-teal); font-size: 1.35rem; font-weight: 400; transition: transform 180ms ease; }
.preguntas-lista details[open] summary::after { transform: rotate(45deg); }
.preguntas-lista details p { max-width: 38rem; margin: 1rem 2rem 0 0; color: #66716f; font-size: 0.88rem; line-height: 1.6; }
.cierre-lila { padding: clamp(6rem, 10vw, 9rem) 1.5rem; background: var(--cierre-fondo, #112f39); color: #f8f4ec; text-align: center; }
.cierre-lila .relato-etiqueta { color: var(--cierre-etiqueta, #91c4b7); }
.cierre-lila h2 { font-size: clamp(2.25rem, 4vw, 4rem); }
.cierre-lila > p:not(.relato-etiqueta) { margin: 1.4rem auto 0; color: rgba(255,255,255,0.68); }
.cierre-acciones { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: 2.3rem; }
.cierre-acciones .boton { display: inline-flex; align-items: center; gap: 2rem; min-height: 3.25rem; padding-inline: 1.2rem; border: 0; background: var(--landing-paper); color: var(--landing-navy); }
.cierre-acciones > a:not(.boton) { color: rgba(255,255,255,0.82); font-size: 0.84rem; }

/* Movimiento explicativo: entra una vez con la sección; ningún dato se mueve
   continuamente y no hay movimiento si el sistema pide reducirlo. */
@supports (animation-timeline: view()) {
  .capacidades-lila {
    animation: landing-carril 1ms linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
  }
  .demo-burbuja,
  .demo-resultado,
  .demo-aprobacion,
  .chat-persona,
  .chat-lila {
    opacity: 0;
    transform: translateY(14px);
    animation: landing-momento 1ms var(--landing-ease) both;
    animation-timeline: view();
    animation-range: entry 18% cover 34%;
  }
  .chat-lila { animation-range: entry 24% cover 40%; }
  .chat-aprobado { animation-range: entry 30% cover 46%; }
  .chat-confirmacion { animation-range: entry 36% cover 52%; }
}
@keyframes landing-entrada { to { opacity: 1; transform: translateY(0); } }
@keyframes landing-carril { to { transform: translateX(-2.5rem); } }
@keyframes landing-momento { to { opacity: 1; transform: translateY(0); } }
.demo-botones strong,
.cierre-acciones .boton { transition: transform 150ms ease, background-color 150ms ease; }
.cierre-acciones .boton:hover { transform: translateY(-2px); }
.cierre-acciones .boton:active { transform: scale(0.98); }

@media (max-width: 900px) {
  .relato-paneles { grid-template-columns: 1fr; max-width: 35rem; }
  .relato-panel { grid-column: 1 / -1; min-height: 33rem; }
  .relato-panel-control { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .relato-panel-control .relato-panel-meta,
  .relato-panel-control .relato-panel-pie,
  .relato-panel-control .demo-aprobacion { grid-column: 1; grid-row: auto; }
  .relato-panel-control .relato-panel-pie { order: 3; padding: 1.35rem 0.25rem 0.2rem; }
  .relato-panel-control .relato-panel-pie h3 { font-size: 1.35rem; }
  .confianza-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confianza-columnas article:nth-child(3) { border-left: 0; }
  .confianza-columnas article:nth-child(n+3) { margin-top: 2.5rem; border-top: 1px solid #cbd5d3; }
  .preguntas-lila { grid-template-columns: 1fr; }
  .preguntas-intro { justify-self: start; }
  .preguntas-lista { max-width: none; }
}
@media (max-width: 640px) {
  .relato-operativo,
  .operacion-lila,
  .confianza-lila,
  .preguntas-lila { padding-inline: 1.1rem; }
  .relato-encabezado h2,
  .operacion-encabezado h2,
  .confianza-intro h2,
  .preguntas-intro h2,
  .cierre-lila h2 { font-size: clamp(2.35rem, 12vw, 3.35rem); }
  .relato-panel { min-height: 31rem; }
  .capacidades-lila { width: auto; flex-wrap: wrap; justify-content: center; transform: none; }
  .conversacion-operativa { grid-template-columns: 1fr; min-height: 0; }
  .conversacion-contexto { border-right: 0; border-bottom: 1px solid #d9dfdc; }
  .conversacion-contexto h3 { max-width: 14ch; }
  .sistemas-conectados { grid-template-columns: 1fr 1fr; }
  .chat-operativo { width: calc(100% - 2rem); margin-block: 1rem; }
  .confianza-columnas { grid-template-columns: 1fr; }
  .confianza-columnas article,
  .confianza-columnas article:first-child { padding: 1.2rem 0 2rem; border-left: 0; border-bottom: 1px solid #cbd5d3; }
  .confianza-columnas article:nth-child(n+3) { margin-top: 0; border-top: 0; }
  .confianza-columnas h3 { margin-top: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .portada-integraciones-cinta { animation: none; }
  .relato-paneles[data-revelar] .relato-panel,
  .conversacion-operativa[data-revelar],
  .confianza-columnas > article[data-revelar] {
    opacity: 1;
    transform: none;
    transition: opacity 250ms var(--portada-ease-out);
  }
  .relato-panel,
  .conversacion-operativa,
  .confianza-columnas article,
  .capacidades-lila,
  .demo-burbuja,
  .demo-resultado,
  .demo-aprobacion,
  .chat-persona,
  .chat-lila { opacity: 1; transform: none; animation: none; }
  .demo-movil,
  .demo-erp,
  .demo-aprobacion,
  .demo-burbuja,
  .demo-icono-documento { transition: none; }
  .demo-botones strong,
  .cierre-acciones .boton,
  .preguntas-lista summary::after { transition: none; }
}

/* Complementos del SRI: explicación pública; la descarga real vive en la empresa. */
.complementos-lila {
  display: grid;
  grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  width: min(100% - 3rem, 78rem);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  border-top: 1px solid var(--borde);
  color: var(--texto-fuerte);
}
.complementos-intro h2 { max-width: 18ch; margin: 0; font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.15; font-weight: 650; letter-spacing: -0.025em; }
.complementos-intro > p { max-width: 42ch; margin: 0.8rem 0 0; color: var(--texto-suave); font-size: 0.95rem; line-height: 1.55; }
.complementos-acceso { display: inline-flex; min-height: 44px; align-items: center; gap: 0.6rem; margin-top: 1.2rem; color: var(--texto-fuerte); font-size: 0.875rem; font-weight: 650; text-decoration: underline; text-underline-offset: 0.2em; }
.complementos-acceso:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.complementos-lista { border-top: 1px solid var(--borde); }
.complementos-lista article { padding: 1.1rem 0; border-bottom: 1px solid var(--borde); }
.complementos-lista h3 { margin: 0; color: var(--texto-fuerte); font-size: 1rem; font-weight: 650; }
.complementos-lista p { max-width: 60ch; margin: 0.4rem 0 0; color: var(--texto-suave); font-size: 0.875rem; line-height: 1.55; }

@media (max-width: 640px) {
  .complementos-lila { grid-template-columns: 1fr; width: calc(100% - 2.2rem); gap: 1.25rem; padding-block: 2rem; }
  .complementos-intro h2 { max-width: 22ch; }
}

/* Autenticación: composición editorial compartida por login y recuperación. */
.auth-page {
  --auth-visual-overlay: linear-gradient(180deg, rgba(13, 38, 48, 0.18) 8%, rgba(13, 38, 48, 0.84) 100%);
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--landing-paper, var(--superficie));
  color: var(--texto-fuerte);
}
.auth-page,
.auth-page * { box-sizing: border-box; }
.auth-page .tarjeta {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.auth-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--borde-tenue);
  background: var(--landing-paper, var(--superficie));
}
.auth-brand { display: inline-flex; align-items: center; gap: 0.7rem; min-width: 0; color: var(--landing-navy, var(--texto-fuerte)); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.035em; text-decoration: none; }
.auth-brand img { display: block; width: auto; max-width: min(9rem, 36vw); max-height: 2.15rem; object-fit: contain; }
.auth-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem; min-width: 0; color: var(--texto-suave); font-size: 0.82rem; }
.auth-header-actions a { color: var(--landing-teal, var(--marca)); font-weight: 650; text-underline-offset: 0.2em; }
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 0.9fr);
  min-height: 0;
  /* `main` conserva un padding global para las páginas clásicas. Esta
     composición ya controla su propio ritmo y debe tocar la cabecera. */
  padding-top: 0;
}
.auth-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  min-height: 35rem;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--landing-navy, #0d2630);
  background-image: url('/estaticos/imagenes/lila-acceso-operativo.webp');
  background-position: center;
  background-size: cover;
}
.auth-visual::before { position: absolute; z-index: -1; inset: 0; background: var(--auth-visual-overlay); content: ""; }
.auth-visual-content { width: min(100%, 48rem); padding: clamp(2rem, 5vw, 5rem); color: #fff; }
.auth-eyebrow { margin: 0 0 0.9rem; color: var(--auth-etiqueta, #b8d8ce); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.auth-visual-content h1,
.auth-visual-content h2 { max-width: 13ch; margin: 0; color: #fff; font-size: clamp(1.9rem, 3vw, 3.35rem); font-weight: 550; letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
.auth-visual-content p { max-width: 34rem; margin: 1.15rem 0 0; color: rgba(255,255,255,0.79); font-size: clamp(0.9rem, 1.2vw, 1.05rem); line-height: 1.6; }
.auth-integraciones { max-width: min(48vw, 38rem); margin-top: 1.35rem; color: rgba(255,255,255,0.79); font-size: 0.86rem; letter-spacing: 0.01em; }
.auth-integraciones-lectura { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.auth-integraciones-marco { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.auth-integraciones-cinta { display: flex; width: max-content; white-space: nowrap; will-change: transform; animation: integraciones-recorrido 38s linear infinite; }
.auth-integraciones-grupo { display: flex; flex: 0 0 auto; align-items: center; gap: 0.45rem; padding-right: 0.9rem; white-space: nowrap; }
.auth-form-area { display: flex; align-items: center; justify-content: center; min-width: 0; padding: clamp(2rem, 5vw, 5rem); background: var(--landing-paper, var(--superficie)); }
.auth-form { width: min(100%, 28rem); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.auth-form:focus-within { box-shadow: none; }
.auth-form h1,
.auth-form h2,
.auth-title { margin: 0; color: var(--landing-navy, var(--texto-fuerte)); font-size: clamp(1.8rem, 2.3vw, 2.35rem); font-weight: 620; letter-spacing: -0.035em; line-height: 1.12; }
.auth-intro { margin: 0.8rem 0 1.8rem; color: var(--texto-suave); font-size: 0.94rem; line-height: 1.55; }
.auth-fields { display: grid; gap: 1rem; min-width: 0; }
.auth-fields label { display: grid; gap: 0.4rem; min-width: 0; color: var(--texto-fuerte); font-size: 0.84rem; font-weight: 620; }
.auth-fields input,
.auth-fields select { width: 100%; min-width: 0; min-height: 2.875rem; padding: 0.65rem 0.75rem; border: 1px solid var(--campo-borde, var(--borde)); border-radius: 4px; outline: 0; background: var(--superficie); color: var(--texto-fuerte); font: inherit; font-size: 0.93rem; }
.auth-fields input:focus,
.auth-fields select:focus { border-color: var(--landing-teal, var(--marca)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--landing-teal, var(--marca)) 18%, transparent); }
.auth-fields input::placeholder { color: var(--texto-suave); opacity: 0.78; }
.auth-fields button,
.auth-form button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 2.9rem; margin-top: 0.25rem; padding: 0.7rem 1rem; border: 1px solid var(--landing-navy, #0d2630); border-radius: 3px; background: var(--landing-navy, #0d2630); color: #fff; font: inherit; font-size: 0.9rem; font-weight: 680; cursor: pointer; }
.auth-fields button:hover,
.auth-form button[type="submit"]:hover { background: var(--landing-teal, var(--marca)); border-color: var(--landing-teal, var(--marca)); }
.auth-fields button:focus-visible,
.auth-form button[type="submit"]:focus-visible,
.auth-links a:focus-visible,
.auth-header a:focus-visible { outline: 2px solid var(--landing-teal, var(--marca)); outline-offset: 3px; }
.auth-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1rem; margin-top: 1.1rem; color: var(--texto-suave); font-size: 0.82rem; }
.auth-links p { margin: 0; }
.auth-links a { color: var(--landing-teal, var(--marca)); font-weight: 620; text-underline-offset: 0.2em; }
.auth-page .auth-note { margin: 1.7rem 0 0; padding: 0.9rem 0 0; border: 0; border-top: 1px solid var(--borde-tenue); border-radius: 0; background: transparent; color: var(--texto-suave); font-size: 0.76rem; line-height: 1.5; }
.auth-status { margin: 1rem 0 0; padding: 0.65rem 0.8rem; border: 1px solid var(--borde); border-radius: 3px; background: var(--fondo-2); color: var(--texto); font-size: 0.84rem; line-height: 1.45; }
.auth-form .auth-status { margin-block: 1rem 0; }
.auth-form .auth-status:not(.mensaje) { padding-inline: 0; border: 0; border-radius: 0; background: transparent; }
.auth-status[role="alert"],
.auth-status.is-error { border-color: var(--error); color: var(--error); }
.auth-status.is-success { border-color: var(--exito); color: var(--exito); }
.auth-form .auth-note.mensaje.aviso { padding: 0.65rem 0.8rem; border: 1px solid color-mix(in srgb, var(--aviso) 42%, var(--borde)); border-radius: 3px; background: var(--aviso-fondo); color: var(--aviso); }
.auth-fields button.secundario { border-color: var(--borde); background: transparent; color: var(--landing-navy, var(--texto-fuerte)); }
.auth-fields button.secundario:hover { border-color: var(--borde); background: var(--fondo-2); color: var(--landing-navy, var(--texto-fuerte)); }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .auth-page,
  :root[data-tema="oscuro"] .auth-page {
    --auth-visual-overlay: linear-gradient(180deg, rgba(7, 22, 28, 0.26) 8%, rgba(7, 22, 28, 0.91) 100%);
    background: var(--fondo);
    color: var(--texto-fuerte);
  }
  :root:not([data-tema="claro"]) .auth-header,
  :root[data-tema="oscuro"] .auth-header,
  :root:not([data-tema="claro"]) .auth-form-area,
  :root[data-tema="oscuro"] .auth-form-area { border-color: var(--borde-tenue); background: var(--fondo); }
  :root:not([data-tema="claro"]) .auth-brand,
  :root[data-tema="oscuro"] .auth-brand,
  :root:not([data-tema="claro"]) .auth-form h1,
  :root[data-tema="oscuro"] .auth-form h1,
  :root:not([data-tema="claro"]) .auth-form h2,
  :root[data-tema="oscuro"] .auth-form h2,
  :root:not([data-tema="claro"]) .auth-title,
  :root[data-tema="oscuro"] .auth-title { color: var(--texto-fuerte); }
  :root:not([data-tema="claro"]) .auth-fields input,
  :root[data-tema="oscuro"] .auth-fields input,
  :root:not([data-tema="claro"]) .auth-fields select,
  :root[data-tema="oscuro"] .auth-fields select { background: var(--superficie); color: var(--texto-fuerte); }
  :root:not([data-tema="claro"]) .auth-fields button:not(.secundario),
  :root[data-tema="oscuro"] .auth-fields button:not(.secundario),
  :root:not([data-tema="claro"]) .auth-form button[type="submit"],
  :root[data-tema="oscuro"] .auth-form button[type="submit"]:not(.secundario) { border-color: var(--auth-boton-oscuro, #397c78); background: var(--auth-boton-oscuro, #397c78); color: #fff; }
  :root:not([data-tema="claro"]) .auth-fields button:not(.secundario):hover,
  :root[data-tema="oscuro"] .auth-fields button:not(.secundario):hover,
  :root:not([data-tema="claro"]) .auth-form button[type="submit"]:hover,
  :root[data-tema="oscuro"] .auth-form button[type="submit"]:not(.secundario):hover { border-color: var(--marca); background: var(--marca); color: var(--marca-texto); }
  :root:not([data-tema="claro"]) .auth-note,
  :root[data-tema="oscuro"] .auth-note { border-color: var(--borde-tenue); }
  :root:not([data-tema="claro"]) .auth-form .auth-note.mensaje.aviso,
  :root[data-tema="oscuro"] .auth-form .auth-note.mensaje.aviso { border-color: var(--aviso); background: var(--aviso-fondo); color: var(--aviso); }
  :root:not([data-tema="claro"]) .auth-fields button.secundario,
  :root[data-tema="oscuro"] .auth-fields button.secundario { border-color: var(--borde); background: transparent; color: var(--texto-fuerte); }
  :root:not([data-tema="claro"]) .auth-fields button.secundario:hover,
  :root[data-tema="oscuro"] .auth-fields button.secundario:hover { background: var(--fondo-2); }
}
@media (max-width: 760px) {
  .auth-page { grid-template-rows: 64px auto; min-height: 100vh; min-height: 100svh; }
  .auth-header { min-height: 64px; padding-inline: 1.1rem; }
  .auth-header-actions { gap: 0.45rem; font-size: 0.75rem; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); }
  .auth-visual { min-height: 12rem; min-height: clamp(11.25rem, 30vh, 13.75rem); }
  .auth-visual-content { padding: 1.2rem 1.25rem; }
  .auth-eyebrow { margin-bottom: 0.45rem; font-size: 0.64rem; }
  .auth-visual-content h1,
  .auth-visual-content h2 { max-width: 18ch; font-size: 1.7rem; }
  .auth-visual-content p { max-width: 36rem; margin-top: 0.5rem; font-size: 0.82rem; }
  .auth-integraciones { max-width: min(88vw, 38rem); margin-top: 0.75rem; font-size: 0.76rem; }
  .auth-form-area { align-items: flex-start; padding: 1.75rem 1.25rem 2rem; }
  .auth-intro { margin-bottom: 1.35rem; }
}
@media (max-width: 360px) {
  .auth-header { gap: 0.55rem; padding-inline: 0.8rem; }
  .auth-header-actions { flex-wrap: wrap; font-size: 0.7rem; }
  .auth-visual-content { padding-inline: 1rem; }
  .auth-form-area { padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-page *,
  .auth-page *::before,
  .auth-page *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .auth-integraciones-marco { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .auth-integraciones-cinta { width: auto; flex-wrap: wrap; white-space: normal; animation: none !important; will-change: auto; }
  .auth-integraciones-grupo { flex-wrap: wrap; white-space: normal; }
  .auth-integraciones-grupo + .auth-integraciones-grupo { display: none; }
}

/* Cabecera pública (portada y Seguridad) en oscuro: sigue los tokens del tema
   en vez de quedarse marfil. En claro conserva su aspecto de siempre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cabecera-portada { background: var(--superficie); color: var(--texto-fuerte); }
  :root:not([data-tema="claro"]) .portada-nav a:not(.acceso-portada) { color: var(--texto-fuerte); }
  :root:not([data-tema="claro"]) .tema-portada,
  :root:not([data-tema="claro"]) .menu-portada { border-color: var(--borde); color: var(--texto-fuerte); }
}
:root[data-tema="oscuro"] .cabecera-portada { background: var(--superficie); color: var(--texto-fuerte); }
:root[data-tema="oscuro"] .portada-nav a:not(.acceso-portada) { color: var(--texto-fuerte); }
:root[data-tema="oscuro"] .tema-portada,
:root[data-tema="oscuro"] .menu-portada { border-color: var(--borde); color: var(--texto-fuerte); }

/* Seguridad: página editorial plana, con el mismo tono visual de la portada. */
.security-page {
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  margin-left: calc(50% - 50vw);
  background: var(--papel);
  color: var(--texto-fuerte);
}
main:has(> .auth-page),
main:has(> .security-page) { padding-top: 0; }
.security-content { width: min(100% - 2.5rem, 82rem); margin-inline: auto; padding-block: clamp(2rem, 4vw, 4rem) 3rem; }
.security-hero { display: grid; grid-template-columns: minmax(19rem, 0.72fr) minmax(28rem, 1.28fr); align-items: stretch; min-height: 30rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); background: var(--seguridad-fondo, #102a34); color: #f7f4ed; }
.security-intro { display: flex; flex-direction: column; justify-content: flex-end; max-width: none; margin: 0; padding: clamp(2rem, 4.5vw, 4.25rem); }
.security-eyebrow { margin: 0 0 0.8rem; color: var(--landing-teal, var(--marca)); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.security-intro h1 { max-width: 14ch; margin: 0; color: inherit; font-family: inherit; font-size: clamp(2rem, 3.2vw, 3.4rem); font-weight: 560; letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
.security-intro > p:last-child { max-width: 32rem; margin: 1.15rem 0 0; color: rgba(255,255,255,0.72); font-size: clamp(0.9rem, 1.1vw, 1.02rem); line-height: 1.6; }
.security-visual { min-width: 0; margin: 0; overflow: hidden; }
.security-visual img { display: block; width: 100%; height: 100%; min-height: 30rem; object-fit: cover; object-position: center; }
.security-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--borde-tenue); }
.security-principles section { position: relative; min-width: 0; padding: 1.6rem clamp(1rem, 3vw, 2.2rem) 1.7rem 0; border-bottom: 1px solid var(--borde-tenue); }
.security-principles section:nth-child(odd) { margin-right: clamp(1rem, 4vw, 3.25rem); }
.security-principles section:nth-child(even) { padding-left: clamp(1rem, 4vw, 3.25rem); border-left: 1px solid var(--borde-tenue); }
.security-index { display: block; margin-bottom: 1rem; color: var(--marca); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; }
.security-principles h2 { max-width: 24ch; margin: 0; color: var(--texto-fuerte); font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 620; letter-spacing: -0.025em; line-height: 1.25; }
.security-principles p { max-width: 38rem; margin: 0.7rem 0 0; color: var(--texto-suave); font-size: 0.9rem; line-height: 1.65; }
@media (max-width: 640px) {
  
/* Ajustes posteriores a las reglas de navegación compartidas. */
nav.principal.classic-nav { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; }
nav.principal.classic-nav a,
nav.principal.classic-nav a.activo {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 4px;
  background: transparent;
  color: var(--classic-muted);
  font-size: var(--texto-sm);
  font-weight: 500;
}
nav.principal.classic-nav a:hover,
nav.principal.classic-nav a.activo {
  background: var(--classic-navy-hover);
  color: #fff;
  text-decoration: none;
}
.classic-topbar .classic-brand { flex: none; margin: 0; gap: 0.55rem; }
nav.principal.classic-nav a.activo { font-weight: 650; }
@media (max-width: 760px) {
  nav.principal.classic-nav { display: none; }
  nav.principal.classic-nav.abierta { display: flex; width: 100%; }
  .classic-topbar .classic-brand { gap: 0.35rem; font-size: var(--texto-base); }
  .classic-topbar .classic-brand-mark { width: 1.55rem; height: 1.55rem; }
  .classic-topbar .classic-brand-mark::before { width: 0.85rem; height: 0.85rem; }
}
@media (max-width: 360px) {
  .classic-identity { max-width: 22vw; }
  .classic-topbar .classic-brand { font-size: var(--texto-sm); }
  .classic-topbar .classic-brand-mark { width: 1.35rem; height: 1.35rem; }
  .classic-topbar .classic-brand-mark::before { width: 0.72rem; height: 0.72rem; }
}

/* Workspace operativo: páginas densas y planas para formularios y datos. */
.workspace-page,
.workspace-page * { box-sizing: border-box; }
.workspace-page {
  width: min(calc(100% - 2rem), 72rem);
  min-width: 0;
  margin-inline: auto;
  padding-block: clamp(1rem, 2vw, 1.75rem) 2.5rem;
  color: var(--texto);
}
.workspace-header { min-width: 0; margin: 0 0 1.25rem; }
.workspace-header h1 {
  margin: 0;
  color: var(--texto-fuerte);
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  font-weight: 620;
  letter-spacing: -0.025em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.workspace-summary { margin: 0.35rem 0 0; color: var(--texto-suave); font-size: var(--texto-sm); line-height: 1.5; }
.workspace-section {
  min-width: 0;
  margin: 0;
  padding: 1.1rem 0 1.25rem;
  border: 0;
  border-top: 1px solid var(--borde-tenue);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.workspace-section h2 { margin: 0 0 0.75rem; color: var(--texto-fuerte); font-size: 1rem; font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; }
.workspace-section h3 { margin: 1rem 0 0.5rem; color: var(--texto-fuerte); font-size: var(--texto-base); font-weight: 620; }
.workspace-section > :last-child { margin-bottom: 0; }
.workspace-page .tarjeta,
.workspace-page .workspace-section.tarjeta {
  padding: 1.1rem 0 1.25rem;
  border: 0;
  border-top: 1px solid var(--borde-tenue);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}
.workspace-page details.tarjeta:hover,
.workspace-page details.tarjeta:focus-within { box-shadow: none; }
.workspace-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  width: min(100%, 42rem);
  min-width: 0;
  margin: 0.75rem 0 1rem;
}
.workspace-form label { display: grid; gap: 0.35rem; min-width: 0; color: var(--texto-fuerte); font-size: var(--texto-sm); font-weight: 600; }
.workspace-form input:not([type="hidden"]),
.workspace-form select,
.workspace-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--campo-borde, var(--borde));
  border-radius: 4px;
  background: var(--superficie);
  color: var(--texto-fuerte);
  font: inherit;
  font-size: var(--texto-sm);
}
.workspace-form textarea { min-height: 6rem; resize: vertical; }
.workspace-form input:focus,
.workspace-form select:focus,
.workspace-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--marca) 38%, transparent); outline-offset: 1px; border-color: var(--marca); }
.workspace-form button { justify-self: start; min-height: 2.75rem; max-width: 100%; }
.workspace-form p { margin: 0.25rem 0 0; }
.workspace-page .tabla-envoltorio { max-width: 100%; min-width: 0; }
.workspace-page .tabla-datos { width: 100%; }
.workspace-page .tabla-datos th,
.workspace-page .tabla-datos td { overflow-wrap: anywhere; }
.workspace-page pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .workspace-page { width: calc(100% - 1.5rem); padding-top: 1rem; }
  .workspace-header { margin-bottom: 0.9rem; }
  .workspace-section { padding-block: 0.9rem 1rem; }
  .workspace-page .tabla-envoltorio { overflow-x: auto; }
}
@media (max-width: 360px) {
  .workspace-page { width: calc(100% - 1.25rem); }
  .workspace-summary { overflow-wrap: anywhere; }
  .workspace-form button { justify-self: stretch; }
}

/* Marcas (20-oct-2026): piezas que solo pinta una marca que las define. La marca predeterminada no
   usa ninguna de las dos, así que su portada no cambia. */
.portada-seccion .portada-aviso {
  max-width: 31rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.5;
}
.logo-marca { display: block; height: 1.75rem; width: auto; }