/* ==========================================================================
   CouchEpsilon — hoja de estilos compartida (maqueta estática)
   Cada bloque corresponde a un componente con el mismo nombre de clase,
   pensado para traducirse a un componente de Angular.
   ========================================================================== */

/* --- Fuentes -------------------------------------------------------------- */
@font-face { font-family: "Geist"; src: url("../fonts/geist-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Color: neutros fríos + un acento cobalto */
  --color-fondo: #f6f7f9;
  --color-superficie: #ffffff;
  --color-superficie-2: #f0f2f6;
  --color-superficie-3: #e6e9ef;
  --color-borde: #dfe3ea;
  --color-borde-fuerte: #c6cdd8;
  --color-texto: #131923;
  --color-texto-2: #465163;
  --color-texto-3: #636d7e;
  --color-acento: #2350cf;
  --color-acento-hover: #1b40a8;
  --color-acento-suave: #e8eefc;
  --color-acento-texto: #1d45b8;
  --color-seleccion: #cddafa;

  /* Marca: solo en el ícono (rojo de marca y su costado oscuro) */
  --color-marca: #C8352F;
  --color-marca-oscuro: #9A2622;

  /* Acción principal: tinta oscura (el rojo queda para la marca y para prod/peligro) */
  --color-accion: var(--color-texto);
  --color-accion-hover: #2b3445;

  /* Ambientes: solo dentro de la UI del producto */
  --color-dev: #18703e;
  --color-dev-suave: #e3f3ea;
  --color-qa: #8a580b;
  --color-qa-suave: #fbf0dc;
  --color-prod: #bf2f2f;
  --color-prod-suave: #fbe7e7;

  /* Código */
  --color-codigo-clave: #7a3fc4;
  --color-codigo-cadena: #1d7f47;
  --color-codigo-numero: #b4540f;
  --color-codigo-palabra: #2350cf;
  --color-resaltado: #fff1b8;

  /* Estados semánticos de formularios y alertas (alias de los tonos registrados) */
  --color-exito: var(--color-dev);
  --color-exito-suave: var(--color-dev-suave);
  --color-error: var(--color-prod);
  --color-error-suave: var(--color-prod-suave);
  --color-aviso: var(--color-qa);
  --color-aviso-suave: var(--color-qa-suave);
  --color-exito-borde: #bfe0cc;
  --color-exito-tinta: #10512c;
  --color-error-borde: #f1c4c4;
  --color-error-tinta: #7d1d1d;
  --color-aviso-borde: #f0d9a8;
  --color-aviso-tinta: #5c3b06;
  --color-info-tinta: #18337f;

  /* Texto sobre rellenos de color (cobalto, prod, tinta) */
  --color-sobre-relleno: #ffffff;
  --color-error-hover: #a32626;

  /* Tipografía */
  --fuente-texto: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-codigo: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --texto-xs: 0.75rem;
  --texto-sm: 0.875rem;
  --texto-base: 1rem;
  --texto-md: 1.125rem;
  --texto-lg: 1.375rem;
  --texto-xl: 1.875rem;
  --texto-2xl: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem);
  --texto-3xl: clamp(2.25rem, 1.3rem + 3.6vw, 3.75rem);
  --interlineado: 1.6;
  --interlineado-titulo: 1.1;

  /* Espaciado */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;
  --esp-10: 8rem;

  /* Forma y profundidad */
  --radio-sm: 4px;
  --radio: 6px;
  --radio-lg: 10px;
  --sombra-sm: 0 1px 2px rgb(19 25 35 / 0.06);
  --sombra: 0 2px 4px rgb(19 25 35 / 0.04), 0 8px 24px rgb(19 25 35 / 0.07);
  --sombra-ventana: 0 2px 6px rgb(19 25 35 / 0.05), 0 24px 64px -12px rgb(19 25 35 / 0.22);

  --ancho-contenedor: 1200px;
  --alto-encabezado: 64px;
  --transicion: 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-encabezado) + var(--esp-4)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: var(--interlineado);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}
h1, h2, h3, h4 { margin: 0; line-height: var(--interlineado-titulo); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-acento-texto); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-acento-hover); }
code, kbd, pre { font-family: var(--fuente-codigo); font-size: 0.92em; }
::selection { background: var(--color-seleccion); color: var(--color-texto); }
:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; border-radius: var(--radio-sm); }
html { scrollbar-color: var(--color-borde-fuerte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-borde-fuerte); border-radius: 10px; border: 3px solid var(--color-fondo); }
[hidden] { display: none !important; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenedor { width: 100%; max-width: var(--ancho-contenedor); margin-inline: auto; padding-inline: var(--esp-4); }
@media (min-width: 720px) { .contenedor { padding-inline: var(--esp-6); } }
.icono { width: 1.125em; height: 1.125em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.saltar-contenido { position: absolute; left: var(--esp-4); top: -100px; z-index: 100; background: var(--color-texto); color: var(--color-sobre-relleno); padding: var(--esp-2) var(--esp-4); border-radius: var(--radio); }
.saltar-contenido:focus, .saltar-contenido:hover { top: var(--esp-2); color: var(--color-sobre-relleno); }

/* --- boton ---------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: 40px; padding: 0 var(--esp-4);
  border: 1px solid transparent; border-radius: var(--radio);
  font: inherit; font-size: var(--texto-sm); font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
/* Respuesta al presionar */
.boton:active:not(.boton--cargando):not(:disabled):not([aria-disabled="true"]) { transform: scale(0.97); }
.boton--primario { background: var(--color-accion); color: var(--color-sobre-relleno); box-shadow: 0 1px 2px rgb(19 25 35 / 0.24), inset 0 1px 0 rgb(255 255 255 / 0.1); }
.boton--primario:hover { background: var(--color-accion-hover); color: var(--color-sobre-relleno); }
.boton--secundario { background: var(--color-superficie); color: var(--color-texto); border-color: var(--color-borde-fuerte); box-shadow: var(--sombra-sm); }
.boton--secundario:hover { border-color: var(--color-texto-3); color: var(--color-texto); }
.boton--fantasma { background: transparent; color: var(--color-texto-2); }
.boton--fantasma:hover { background: var(--color-superficie-3); color: var(--color-texto); }
.boton--grande { min-height: 48px; padding: 0 var(--esp-5); font-size: var(--texto-base); }
.boton--bloque { width: 100%; }
.boton[aria-disabled="true"], .boton:disabled { opacity: 0.5; pointer-events: none; }

/* --- marca ---------------------------------------------------------------- */
.marca { display: inline-flex; align-items: center; gap: var(--esp-2); color: var(--color-texto); text-decoration: none; font-weight: 400; font-size: var(--texto-md); letter-spacing: -0.02em; }
.marca__nombre strong { font-weight: 700; }
.marca:hover { color: var(--color-texto); }
.marca__simbolo { width: 28px; height: 28px; }

/* --- encabezado ----------------------------------------------------------- */
.encabezado {
  position: sticky; top: 0; z-index: 50;
  background: rgb(246 247 249 / 0.85);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion);
}
.encabezado--desplazado { border-bottom-color: var(--color-borde); }
.encabezado__barra { display: flex; align-items: center; gap: var(--esp-5); height: var(--alto-encabezado); }
.encabezado__acciones { display: flex; align-items: center; gap: var(--esp-2); margin-left: auto; }
.encabezado__menu-boton { display: none; }
@media (max-width: 479px) { .encabezado__so { display: none; } }

.navegacion { display: flex; gap: var(--esp-1); }
.navegacion__enlace { padding: var(--esp-2) var(--esp-3); border-radius: var(--radio); color: var(--color-texto-2); font-size: var(--texto-sm); font-weight: 500; text-decoration: none; }
.navegacion__enlace:hover { color: var(--color-texto); background: var(--color-superficie-3); }
.navegacion__enlace[aria-current="page"] { color: var(--color-texto); }

.selector-idioma { display: inline-flex; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 2px; font-size: var(--texto-xs); font-weight: 500; }
.selector-idioma a { padding: 4px 8px; border-radius: var(--radio-sm); color: var(--color-texto-3); text-decoration: none; }
.selector-idioma a[aria-current="true"] { background: var(--color-superficie); color: var(--color-texto); box-shadow: var(--sombra-sm); }

.menu-usuario { display: inline-flex; align-items: center; gap: var(--esp-2); padding: 4px var(--esp-3) 4px 4px; border-radius: 999px; border: 1px solid var(--color-borde); color: var(--color-texto); font-size: var(--texto-sm); font-weight: 500; text-decoration: none; background: var(--color-superficie); }
.menu-usuario:hover { border-color: var(--color-borde-fuerte); color: var(--color-texto); }
.menu-usuario__avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-acento-suave); color: var(--color-acento-texto); font-size: var(--texto-xs); font-weight: 600; }

/* Estado de sesión: el JS de demo pone data-sesion en <body> */
[data-solo-sesion] { display: none !important; }
body[data-sesion="con-sesion"] [data-solo-sesion] { display: inline-flex !important; }
body[data-sesion="con-sesion"] [data-solo-invitado] { display: none !important; }

@media (max-width: 879px) {
  .encabezado__menu-boton { display: inline-flex; }
  .encabezado .navegacion,
  .encabezado__acciones .selector-idioma,
  .encabezado__acciones .boton--fantasma,
  .encabezado__acciones .menu-usuario { display: none !important; }
  .encabezado__acciones { gap: var(--esp-1); }
}

/* --- menu-movil ----------------------------------------------------------- */
.menu-movil { display: none; opacity: 0; transform: translateY(-4px); border-top: 1px solid var(--color-borde); background: var(--color-fondo); padding: var(--esp-3) 0 var(--esp-5); transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1), display 200ms allow-discrete; }
.menu-movil[data-abierto="true"] { display: block; opacity: 1; transform: none; }
@starting-style { .menu-movil[data-abierto="true"] { opacity: 0; transform: translateY(-4px); } }
.menu-movil .navegacion { flex-direction: column; }
.menu-movil .navegacion__enlace { font-size: var(--texto-base); padding: var(--esp-3); }
.menu-movil__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); margin-top: var(--esp-3); padding: var(--esp-3); border-top: 1px solid var(--color-borde); }
@media (min-width: 880px) { .menu-movil, .menu-movil[data-abierto="true"] { display: none; } }

/* --- seccion -------------------------------------------------------------- */
.seccion { padding-block: var(--esp-9); }
.seccion--borde { border-top: 1px solid var(--color-borde); }
.seccion--superficie { background: var(--color-superficie); border-block: 1px solid var(--color-borde); }
.seccion__cabecera { max-width: 46rem; margin-bottom: var(--esp-7); }
.seccion__titulo { font-size: var(--texto-2xl); }
.seccion__cabecera--centrada { margin-inline: auto; text-align: center; }
.seccion__cabecera--centrada .seccion__entrada { margin-inline: auto; }
.seccion__entrada { margin-top: var(--esp-4); font-size: var(--texto-md); color: var(--color-texto-2); max-width: 40rem; }
@media (max-width: 719px) { .seccion { padding-block: var(--esp-8); } .seccion__cabecera { margin-bottom: var(--esp-6); } }

/* --- portada (hero) ------------------------------------------------------- */
.portada { padding-top: var(--esp-8); padding-bottom: var(--esp-9); overflow: hidden; }
.portada__texto { display: grid; gap: var(--esp-6); margin-bottom: var(--esp-7); }
.portada__titulo { font-size: var(--texto-3xl); letter-spacing: -0.035em; font-weight: 650; max-width: 24ch; }
.portada__lado { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--esp-4) var(--esp-8); align-items: start; }
.portada__lado .portada__subtitulo { grid-row: span 2; }
.portada__lado .portada__acciones { justify-content: flex-end; }
.portada__lado .portada__nota { justify-content: flex-end; }
.portada__subtitulo { font-size: var(--texto-md); color: var(--color-texto-2); max-width: 34rem; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.portada__nota { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); font-size: var(--texto-sm); color: var(--color-texto-3); }
.portada__nota span { display: inline-flex; align-items: center; gap: 6px; }
.portada__nota .icono { color: var(--color-dev); }
@media (max-width: 879px) {
  .portada { padding-top: var(--esp-6); }
  .portada__lado { grid-template-columns: 1fr; gap: var(--esp-5); }
  .portada__lado .portada__subtitulo { grid-row: auto; }
  .portada__lado .portada__acciones, .portada__lado .portada__nota { justify-content: flex-start; }
  .portada__titulo { max-width: 16ch; }
}

/* --- ventana-app (demostración del producto) ------------------------------ */
.ventana-app {
  margin: 0;
  --alto-ventana: 580px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-ventana);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
}
.ventana-app__barra-titulo { display: flex; align-items: center; gap: var(--esp-3); height: 38px; padding: 0 var(--esp-3); background: var(--color-superficie-2); border-bottom: 1px solid var(--color-borde); }
.ventana-app__semaforo { display: flex; gap: 7px; }
.ventana-app__semaforo span { width: 11px; height: 11px; border-radius: 50%; background: var(--color-borde-fuerte); }
.ventana-app__titulo { flex: 1; text-align: center; color: var(--color-texto-3); font-size: 12px; font-weight: 500; margin-right: 52px; }
.ventana-app__herramientas { display: flex; align-items: center; gap: var(--esp-3); padding: 7px var(--esp-3); border-bottom: 1px solid var(--color-borde); background: var(--color-superficie); }
.ventana-app__perfil { display: inline-flex; align-items: center; gap: var(--esp-2); padding: 3px 8px 3px 4px; border: 1px solid var(--color-borde); border-radius: var(--radio); font-weight: 500; }
.ventana-app__cuerpo { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: var(--alto-ventana); }
.ventana-app__lateral { border-right: 1px solid var(--color-borde); background: var(--color-superficie-2); padding: var(--esp-3) var(--esp-2); overflow: hidden; }
.ventana-app__principal { display: flex; flex-direction: column; min-width: 0; }
.ventana-app__pie { display: flex; gap: var(--esp-3); white-space: nowrap; overflow: hidden; align-items: center; padding: 6px var(--esp-3); border-top: 1px solid var(--color-borde); background: var(--color-superficie-2); color: var(--color-texto-3); font-size: 12px; }
.ventana-app__pie .datos-ejemplo { margin-left: auto; }
.ventana-app__panel { flex: 1; min-height: 0; overflow: hidden; }
.ventana-app__panel[hidden] { display: none; }
.ventana-app__panel:not([hidden]) { animation: panel-entra 260ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes panel-entra { from { opacity: 0.35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 879px) {
  .ventana-app { --alto-ventana: auto; }
  .ventana-app__cuerpo { grid-template-columns: 1fr; }
  .ventana-app__lateral { display: none; }
  .ventana-app__titulo { margin-right: 0; }
}

/* etiqueta-ambiente: dev / qa / prod, siempre con texto (nunca solo color) */
.etiqueta-ambiente { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.etiqueta-ambiente--dev { background: var(--color-dev-suave); color: var(--color-dev); }
.etiqueta-ambiente--qa { background: var(--color-qa-suave); color: var(--color-qa); }
.etiqueta-ambiente--prod { background: var(--color-prod); color: var(--color-sobre-relleno); }
.etiqueta-candado { display: inline-flex; align-items: center; gap: 4px; color: var(--color-prod); font-weight: 500; font-size: 12px; }
.etiqueta-candado .icono { width: 13px; height: 13px; }

/* arbol-keyspaces */
.arbol-keyspaces { list-style: none; font-size: 12.5px; }
.arbol-keyspaces ul { list-style: none; padding-left: 14px; }
.arbol-keyspaces li > span { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: var(--radio-sm); color: var(--color-texto-2); white-space: nowrap; }
.arbol-keyspaces .icono { width: 14px; height: 14px; color: var(--color-texto-3); }
.arbol-keyspaces .activo { background: var(--color-acento-suave); color: var(--color-acento-texto); font-weight: 500; }
.arbol-keyspaces .activo .icono { color: var(--color-acento-texto); }
.arbol-keyspaces__titulo { padding: 0 6px var(--esp-2); color: var(--color-texto-3); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }

/* pestanas (componente genérico de pestañas) */
.pestanas { display: flex; gap: 2px; padding: 0 var(--esp-3); border-bottom: 1px solid var(--color-borde); background: var(--color-superficie); overflow-x: auto; scrollbar-width: none; }
.pestanas__boton { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px var(--esp-3); border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--color-texto-3); cursor: pointer; white-space: nowrap; }
.pestanas__boton:hover { color: var(--color-texto); }
.pestanas__boton[aria-selected="true"] { color: var(--color-texto); }
.pestanas__boton[aria-selected="true"]::after { content: ""; position: absolute; left: var(--esp-2); right: var(--esp-2); bottom: -1px; height: 2px; background: var(--color-acento); border-radius: 2px; }
.pestanas__boton .icono { width: 14px; height: 14px; }

/* tracer */
.tracer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); height: 100%; }
.tracer__resultados { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--color-borde); }
.tracer__busqueda { display: flex; gap: var(--esp-2); padding: var(--esp-3); border-bottom: 1px solid var(--color-borde); }
.campo-demo { flex: 1; display: flex; align-items: center; gap: var(--esp-2); min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--color-acento); border-radius: var(--radio); box-shadow: 0 0 0 3px var(--color-acento-suave); font-family: var(--fuente-codigo); font-size: 12.5px; }
.campo-demo .icono { color: var(--color-texto-3); width: 14px; height: 14px; }
.boton-demo { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--radio); background: var(--color-acento); color: var(--color-sobre-relleno); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
.tracer__lista { list-style: none; overflow: hidden; }
.tracer__grupo { border-bottom: 1px solid var(--color-borde); }
.tracer__grupo-cabecera { display: flex; align-items: center; gap: var(--esp-2); padding: 8px var(--esp-3); background: var(--color-superficie-2); font-weight: 500; }
.tracer__grupo-cabecera .conteo { margin-left: auto; color: var(--color-texto-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.tracer__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--esp-3); padding: 8px var(--esp-3) 8px 26px; }
.tracer__fila--activa { background: var(--color-acento-suave); box-shadow: inset 2px 0 0 var(--color-acento); }
.tracer__clave { font-family: var(--fuente-codigo); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracer__campo { grid-column: 1; color: var(--color-texto-3); font-size: 12px; }
.tracer__campo code { color: var(--color-texto-2); }
.tracer__estado { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.tracer__aviso { display: grid; gap: 4px; margin: 8px var(--esp-3) 10px 26px; padding: 8px 10px; border: 1px solid var(--color-aviso-borde); background: var(--color-aviso-suave); border-radius: var(--radio); color: var(--color-aviso-tinta); font-size: 12px; }
.tracer__aviso strong { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.tracer__aviso .icono { width: 14px; height: 14px; }
.tracer__aviso code { font-size: 11.5px; overflow-wrap: anywhere; }
.insignia { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.insignia--alerta { background: var(--color-qa-suave); color: var(--color-qa); }
.insignia--ok { background: var(--color-dev-suave); color: var(--color-dev); }
.insignia--neutra { background: var(--color-superficie-3); color: var(--color-texto-2); }
.insignia--acento { background: var(--color-acento-suave); color: var(--color-acento-texto); }

/* visor-json */
.visor-json { display: flex; flex-direction: column; min-width: 0; background: var(--color-superficie); }
.visor-json__cabecera { display: flex; align-items: center; gap: var(--esp-2); padding: 0 var(--esp-3); height: 49px; border-bottom: 1px solid var(--color-borde); color: var(--color-texto-2); font-size: 12px; }
.visor-json__cabecera code { color: var(--color-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-json__cuerpo { margin: 0; padding: var(--esp-3) 0; font-family: var(--fuente-codigo); font-size: 12px; line-height: 1.7; overflow: hidden; counter-reset: linea; }
.visor-json__cuerpo span.l { display: block; padding: 0 var(--esp-3) 0 0; white-space: pre; }
.visor-json__cuerpo span.l::before { counter-increment: linea; content: counter(linea); display: inline-block; width: 3.2em; padding-right: 1em; text-align: right; color: var(--color-borde-fuerte); }
.visor-json__cuerpo span.l.coincide { background: var(--color-resaltado); }
.j-k { color: var(--color-codigo-clave); }
.j-s { color: var(--color-codigo-cadena); }
.j-n { color: var(--color-codigo-numero); }
.j-p { color: var(--color-codigo-palabra); font-weight: 500; }
@media (max-width: 879px) {
  .tracer { grid-template-columns: 1fr; }
  .tracer__resultados { border-right: 0; }
  .visor-json { display: none; }
}

/* doctor (plan legible) */
.doctor { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.doctor__consulta { margin: 0; padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--color-borde); font-family: var(--fuente-codigo); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; background: var(--color-superficie); }
.doctor__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.doctor__plan { list-style: none; padding: var(--esp-4); border-right: 1px solid var(--color-borde); counter-reset: paso; }
.doctor__paso { position: relative; display: grid; gap: 2px; padding: 0 0 var(--esp-4) 30px; }
.doctor__paso::before { counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-superficie-3); color: var(--color-texto-2); font-size: 12px; font-weight: 600; }
.doctor__paso:not(:last-child)::after { content: ""; position: absolute; left: 9.5px; top: 22px; bottom: 2px; width: 1px; background: var(--color-borde); }
.doctor__paso--lento::before { background: var(--color-qa-suave); color: var(--color-qa); }
.doctor__paso strong { font-weight: 600; }
.doctor__paso span { color: var(--color-texto-3); font-size: 12px; }
.doctor__consejo { padding: var(--esp-4); display: grid; align-content: start; gap: var(--esp-3); }
.doctor__consejo-titulo { font-size: 13px; letter-spacing: 0; }
.doctor__consejo pre { margin: 0; padding: var(--esp-3); background: var(--color-superficie-2); border: 1px solid var(--color-borde); border-radius: var(--radio); font-family: var(--fuente-codigo); font-size: 12px; white-space: pre; overflow-x: auto; }
.doctor__metricas { display: flex; gap: var(--esp-4); color: var(--color-texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.doctor__metricas b { color: var(--color-texto); font-weight: 600; }
@media (max-width: 879px) { .doctor__cuerpo { grid-template-columns: 1fr; } .doctor__plan { border-right: 0; border-bottom: 1px solid var(--color-borde); } }



/* --- manifiesto (afirmación centrada) ------------------------------------- */
.manifiesto { display: grid; justify-items: center; gap: var(--esp-5); text-align: center; }
.manifiesto__titulo { font-size: var(--texto-3xl); letter-spacing: -0.035em; font-weight: 650; max-width: 18ch; }
.manifiesto__entrada { font-size: var(--texto-md); color: var(--color-texto-2); max-width: 40rem; }
.manifiesto__entrada strong { color: var(--color-texto); font-weight: 600; }
.manifiesto__antes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 56rem; margin-top: var(--esp-3); list-style: none; border-block: 1px solid var(--color-borde); }
.manifiesto__antes li { padding: var(--esp-5) var(--esp-5); color: var(--color-texto-2); font-size: var(--texto-sm); }
.manifiesto__antes li + li { border-left: 1px solid var(--color-borde); }
.manifiesto__remate { font-size: var(--texto-lg); color: var(--color-texto-2); max-width: 40rem; letter-spacing: -0.01em; }
.manifiesto__remate strong { color: var(--color-texto); font-weight: 600; }
@media (max-width: 719px) {
  .manifiesto { text-align: left; justify-items: start; }
  .manifiesto__antes { grid-template-columns: minmax(0, 1fr); }
  .manifiesto__antes li { padding: var(--esp-3) 0; }
  .manifiesto__antes li + li { border-left: 0; border-top: 1px solid var(--color-borde); }
}

/* --- capacidades (lista agrupada en dos columnas) ------------------------- */
.capacidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6) var(--esp-8); }
.capacidades__titulo { padding-bottom: var(--esp-3); font-size: var(--texto-md); letter-spacing: -0.015em; }
.capacidades__lista { list-style: none; border-top: 1px solid var(--color-borde-fuerte); }
.capacidades__lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-1) var(--esp-3); padding: var(--esp-4) 0; }
.capacidades__lista li + li { border-top: 1px solid var(--color-borde); }
.capacidades__lista .icono { grid-row: span 2; margin-top: 3px; color: var(--color-acento); }
.capacidades__lista strong { font-weight: 600; }
.capacidades__lista span { color: var(--color-texto-2); font-size: var(--texto-sm); max-width: 48ch; }
@media (max-width: 879px) { .capacidades { grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); } }

/* --- seguridad ------------------------------------------------------------ */
.seguridad { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-7) var(--esp-8); }
.seguridad > div { max-width: 46rem; }
.seguridad__puntos { display: grid; gap: var(--esp-5); list-style: none; margin-top: var(--esp-6); }
.seguridad__puntos li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-1) var(--esp-3); }
.seguridad__puntos .icono { grid-row: span 2; width: 20px; height: 20px; margin-top: 2px; color: var(--color-texto); }
.seguridad__puntos strong { font-weight: 600; }
.seguridad__puntos span { color: var(--color-texto-2); }
.compromiso { margin-top: var(--esp-6); padding-top: var(--esp-5); border-top: 1px solid var(--color-borde); font-size: var(--texto-md); font-weight: 500; max-width: 34rem; }
.compromiso span { display: block; margin-top: var(--esp-1); color: var(--color-texto-3); font-size: var(--texto-sm); font-weight: 400; }
@media (max-width: 879px) { .seguridad { grid-template-columns: 1fr; } }

/* demo: diálogo de confirmación en prod (ventana del IDE) */
.dialogo-demo { background: var(--color-superficie); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-lg); box-shadow: var(--sombra-ventana); font-size: 13px; overflow: hidden; }
.dialogo-demo__franja { display: flex; align-items: center; gap: var(--esp-2); padding: 8px var(--esp-4); background: var(--color-prod); color: var(--color-sobre-relleno); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.dialogo-demo__franja .icono { width: 14px; height: 14px; }
.dialogo-demo__cuerpo { display: grid; gap: var(--esp-3); padding: var(--esp-4); }
.dialogo-demo__titulo { font-size: var(--texto-base); letter-spacing: -0.01em; }
.dialogo-demo__cuerpo p { color: var(--color-texto-2); }
.diff { margin: 0; border: 1px solid var(--color-borde); border-radius: var(--radio); font-family: var(--fuente-codigo); font-size: 12px; line-height: 1.7; overflow: hidden; }
.diff span { display: block; padding: 0 var(--esp-3); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.diff .menos { background: var(--color-error-suave); color: var(--color-error-tinta); }
.diff .mas { background: var(--color-exito-suave); color: var(--color-exito-tinta); }
.dialogo-demo__acciones { display: flex; justify-content: flex-end; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border-top: 1px solid var(--color-borde); background: var(--color-superficie-2); }
.dialogo-demo__acciones .boton { min-height: 32px; font-size: 12.5px; pointer-events: none; }
.boton--peligro { background: var(--color-prod); color: var(--color-sobre-relleno); }

/* --- banda-local (afirmación a todo el ancho) ----------------------------- */
.banda-local { padding-block: var(--esp-8); background: var(--color-superficie-2); border-block: 1px solid var(--color-borde); }
.banda-local__contenido { display: grid; gap: var(--esp-3); }
.banda-local__titulo { font-size: var(--texto-2xl); }
.banda-local__entrada { color: var(--color-texto-2); font-size: var(--texto-md); max-width: 46rem; }
.banda-local__hechos { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-6); margin-top: var(--esp-4); padding-top: var(--esp-5); border-top: 1px solid var(--color-borde-fuerte); list-style: none; }
.banda-local__hechos li { display: inline-flex; align-items: center; gap: var(--esp-2); font-weight: 500; font-size: var(--texto-sm); }
.banda-local__hechos .icono { color: var(--color-acento); }
@media (max-width: 719px) { .banda-local { padding-block: var(--esp-7); } .banda-local__hechos { flex-direction: column; gap: var(--esp-3); } }

/* --- tarjeta-plan --------------------------------------------------------- */
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5); max-width: 920px; margin-inline: auto; }
.tarjeta-plan { display: flex; flex-direction: column; gap: var(--esp-5); padding: var(--esp-6); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); }
.tarjeta-plan--destacada { border-color: var(--color-acento); box-shadow: 0 0 0 1px var(--color-acento), var(--sombra); }
.tarjeta-plan__cabecera { display: grid; gap: var(--esp-2); }
.tarjeta-plan__nombre { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); font-size: var(--texto-lg); }
.tarjeta-plan__para { color: var(--color-texto-2); }
.tarjeta-plan__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); }
.tarjeta-plan__monto { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.tarjeta-plan__periodo { color: var(--color-texto-3); }
.tarjeta-plan__provisional { width: 100%; font-size: var(--texto-xs); color: var(--color-qa); font-weight: 500; }
.tarjeta-plan__incluye { display: grid; gap: var(--esp-2); list-style: none; font-size: var(--texto-sm); color: var(--color-texto-2); flex: 1; }
.tarjeta-plan__incluye li { display: flex; gap: var(--esp-2); align-items: flex-start; }
.tarjeta-plan__incluye .icono { margin-top: 0.2em; color: var(--color-dev); }
.tarjeta-plan__incluye .encabezado-lista { color: var(--color-texto); font-weight: 600; }
.planes__nota { margin-top: var(--esp-5); justify-content: center; text-align: center; display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); align-items: center; font-size: var(--texto-sm); color: var(--color-texto-2); }
@media (max-width: 719px) { .planes { grid-template-columns: 1fr; } .tarjeta-plan { padding: var(--esp-5); } }

/* --- descarga (sistema principal + secundarios) -------------------------- */
/* El sistema detectado lleva .plataforma--principal (app.js); sin detección, macOS. */
.descarga__plataformas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); background: var(--color-superficie); overflow: hidden; }
.plataforma { display: grid; align-content: start; gap: var(--esp-2); padding: var(--esp-5) var(--esp-6); grid-column: 2; border-left: 1px solid var(--color-borde); }
.plataforma:not(.plataforma--principal) ~ .plataforma:not(.plataforma--principal),
.plataforma--principal + .plataforma:not(.plataforma--principal) ~ .plataforma:not(.plataforma--principal) { border-top: 1px solid var(--color-borde); }
.plataforma__nombre { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-md); }
.plataforma__nombre .insignia { margin-left: auto; }
.plataforma__detalle, .plataforma__boton { display: none; }
.plataforma__formatos { display: flex; flex-wrap: wrap; gap: var(--esp-2); list-style: none; }
.plataforma__formatos a { display: inline-flex; padding: 4px 10px; border: 1px solid var(--color-borde); border-radius: var(--radio); font-family: var(--fuente-codigo); font-size: 12px; color: var(--color-texto-2); text-decoration: none; }
.plataforma__formatos a:hover { border-color: var(--color-borde-fuerte); color: var(--color-texto); }
.plataforma__canales { font-size: var(--texto-sm); color: var(--color-texto-3); }
.plataforma--principal { grid-column: 1; grid-row: 1 / span 2; gap: var(--esp-4); padding: var(--esp-7); border-left: 0; }
.plataforma--principal .plataforma__nombre { font-size: var(--texto-xl); }
.plataforma--principal .plataforma__detalle { display: block; color: var(--color-texto-2); }
.plataforma--principal .plataforma__boton { display: inline-flex; justify-self: start; margin-block: var(--esp-2); }
.plataforma--principal .plataforma__canales { padding-top: var(--esp-3); border-top: 1px solid var(--color-borde); }
.descarga__docker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-5); margin-top: var(--esp-5); padding: var(--esp-4) var(--esp-5); border: 1px dashed var(--color-borde-fuerte); border-radius: var(--radio-lg); color: var(--color-texto-2); font-size: var(--texto-sm); }
.descarga__docker strong { color: var(--color-texto); font-weight: 600; }
.comando { display: inline-flex; align-items: center; gap: var(--esp-2); padding: 6px 6px 6px 12px; background: var(--color-superficie-2); border: 1px solid var(--color-borde); border-radius: var(--radio); font-family: var(--fuente-codigo); font-size: 12.5px; color: var(--color-texto); }
.comando button { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--radio-sm); background: transparent; color: var(--color-texto-3); cursor: pointer; }
.comando button:hover { background: var(--color-superficie-3); color: var(--color-texto); }
.comando button[data-copiado="true"] { color: var(--color-dev); }
/* Copiar → check: dos íconos superpuestos que se cruzan */
.comando button .icono { grid-area: 1 / 1; transition: opacity var(--transicion), transform var(--transicion), filter var(--transicion); }
.comando button .icono--copiado { opacity: 0; transform: scale(0.9); filter: blur(2px); }
.comando button[data-copiado="true"] .icono--copiar { opacity: 0; transform: scale(0.9); filter: blur(2px); }
.comando button[data-copiado="true"] .icono--copiado { opacity: 1; transform: none; filter: none; }
@media (max-width: 879px) {
  .descarga__plataformas { grid-template-columns: minmax(0, 1fr); }
  .plataforma { grid-column: 1; border-left: 0; border-top: 1px solid var(--color-borde); }
  .plataforma--principal { grid-row: auto; order: -1; padding: var(--esp-5); border-top: 0; }
}

/* --- cierre --------------------------------------------------------------- */
.cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-5); }
.cierre__titulo { font-size: var(--texto-2xl); max-width: 20ch; }
.cierre .portada__acciones { flex: 0 1 auto; }

/* --- pie ------------------------------------------------------------------ */
.pie { padding-block: var(--esp-8) var(--esp-6); border-top: 1px solid var(--color-borde); font-size: var(--texto-sm); color: var(--color-texto-3); }
.pie__rejilla { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--esp-6); }
.pie__marca p { margin-top: var(--esp-3); max-width: 32ch; }
.pie__titulo { font-size: var(--texto-sm); color: var(--color-texto); font-weight: 600; letter-spacing: 0; margin-bottom: var(--esp-3); }
.pie ul { list-style: none; display: grid; gap: var(--esp-2); }
.pie a { color: var(--color-texto-2); text-decoration: none; }
.pie a:hover { color: var(--color-texto); text-decoration: underline; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-3); margin-top: var(--esp-7); padding-top: var(--esp-5); border-top: 1px solid var(--color-borde); }
.pie__legal p { max-width: 70ch; }
@media (max-width: 879px) { .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie__marca { grid-column: 1 / -1; } }

/* --- marcador (contenido real pendiente) ---------------------------------- */
.marcador { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px dashed var(--color-qa); border-radius: var(--radio-sm); background: var(--color-qa-suave); color: var(--color-qa); font-size: max(0.85em, 12px); font-weight: 500; }

/* --- barra-demo (solo maqueta: cambia estados sin backend) ---------------- */
.barra-demo { position: fixed; left: var(--esp-4); bottom: var(--esp-4); z-index: 90; font-size: var(--texto-xs); }
.barra-demo__boton { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #2b3445; border-radius: 999px; background: #131923; color: #e6e9ef; font: inherit; font-weight: 500; cursor: pointer; box-shadow: var(--sombra); }
.barra-demo__boton .icono { width: 14px; height: 14px; }
.barra-demo__panel { position: absolute; left: 0; bottom: calc(100% + 8px); width: 260px; padding: var(--esp-4); display: grid; gap: var(--esp-4); background: #131923; color: #e6e9ef; border-radius: var(--radio-lg); box-shadow: var(--sombra-ventana); }
.barra-demo__panel[hidden] { display: none; }
.barra-demo__grupo { display: grid; gap: var(--esp-2); }
.barra-demo__grupo > span { color: #9aa4b5; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; }
.barra-demo__opciones { display: flex; flex-wrap: wrap; gap: 4px; }
.barra-demo__opciones button { padding: 5px 9px; border: 1px solid #2b3445; border-radius: var(--radio-sm); background: transparent; color: #cfd5df; font: inherit; cursor: pointer; }
.barra-demo__opciones button[aria-pressed="true"] { background: #e6e9ef; color: #131923; border-color: #e6e9ef; }
.barra-demo__nota { color: #9aa4b5; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Menos y más suave, no cero: las duraciones se conservan; se quitan desplazamientos y giros */
  @keyframes panel-entra { from { opacity: 0.35; } to { opacity: 1; } }
  .pregunta summary svg.icono { transition: none; }
}

/* boton--icono: botón cuadrado solo con ícono (menú móvil) */
.boton--icono { width: 40px; padding: 0; background: transparent; color: var(--color-texto); border-color: var(--color-borde); }
.boton--icono:hover { background: var(--color-superficie-3); }


/* Pestañas de la ventana: etiquetas cortas en pantallas angostas */
@media (max-width: 479px) { .solo-ancho { display: none; } }

/* ==========================================================================
   Página de ediciones
   ========================================================================== */

/* --- precios-portada ------------------------------------------------------ */
.precios-portada { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--esp-6) var(--esp-8); align-items: start; padding-top: var(--esp-8); padding-bottom: var(--esp-8); }
.precios-portada__texto { display: grid; gap: var(--esp-5); }
.precios-portada__titulo { font-size: var(--texto-3xl); letter-spacing: -0.035em; font-weight: 650; max-width: 12ch; }
.regla-corte { display: grid; gap: var(--esp-3); list-style: none; font-size: var(--texto-md); color: var(--color-texto-2); max-width: 30rem; }
.regla-corte li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--color-borde); }
.regla-corte strong { color: var(--color-texto); font-weight: 600; }
.precios-portada .compromiso { margin-top: 0; }
.precios-portada__planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }
@media (max-width: 959px) {
  .precios-portada { grid-template-columns: 1fr; padding-top: var(--esp-6); }
  .precios-portada__titulo { max-width: 16ch; }
}
@media (max-width: 599px) { .precios-portada__planes { grid-template-columns: 1fr; } }

/* tarjeta-plan--compacta: variante para la portada de ediciones */
.tarjeta-plan--compacta { gap: var(--esp-4); padding: var(--esp-5); }
@media (min-width: 600px) {
  .precios-portada__planes { grid-template-rows: repeat(5, auto); row-gap: var(--esp-4); }
  .precios-portada__planes .tarjeta-plan--compacta { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
}
.tarjeta-plan--compacta .tarjeta-plan__monto { font-size: 2.25rem; }
.tarjeta-plan__resumen { color: var(--color-texto-2); font-size: var(--texto-sm); flex: 1; }
.tarjeta-plan__anual { font-size: var(--texto-xs); color: var(--color-texto-3); }

/* --- ventana-app--matriz -------------------------------------------------- */
/* overflow: clip conserva las esquinas sin romper la cabecera fija de la tabla */
.ventana-app--matriz { overflow: clip; }
.ventana-app__consulta { margin: 0; padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--color-borde); background: var(--color-superficie); font-family: var(--fuente-codigo); font-size: 12.5px; line-height: 1.7; white-space: pre; overflow-x: auto; }
.ventana-app--matriz { --alto-pestanas: 40px; }
.ventana-app--matriz .pestanas { position: sticky; top: var(--alto-encabezado); z-index: 3; height: var(--alto-pestanas); }
.ventana-app__parametro { white-space: nowrap; padding: 1px 6px; border-radius: var(--radio-sm); background: var(--color-superficie-2); border: 1px solid var(--color-borde); }
.asterisco-movil { display: none; }

/* --- tabla-matriz --------------------------------------------------------- */
.tabla-matriz { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--texto-sm); }
.tabla-matriz col.col-edicion { width: 9.5rem; }
.tabla-matriz thead th { position: sticky; top: calc(var(--alto-encabezado) + var(--alto-pestanas)); z-index: 2; padding: 10px var(--esp-4); background: var(--color-superficie-2); border-bottom: 1px solid var(--color-borde); text-align: left; font-size: 12px; font-weight: 500; color: var(--color-texto-3); }
.tabla-matriz thead th.edicion { text-align: center; color: var(--color-texto); font-size: var(--texto-sm); font-weight: 600; }
.tabla-matriz thead th.edicion span { display: block; font-size: 12px; font-weight: 400; color: var(--color-texto-3); }
.tabla-matriz thead th.edicion .asterisco-movil { display: none; }
.tabla-matriz tbody th[scope="rowgroup"] { padding: var(--esp-5) var(--esp-4) var(--esp-2); text-align: left; font-size: 12px; font-weight: 600; color: var(--color-texto-3); letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--color-borde); }
.tabla-matriz tbody tr:first-child th[scope="rowgroup"] { padding-top: var(--esp-4); }
.tabla-matriz td, .tabla-matriz tbody th[scope="row"] { padding: 11px var(--esp-4); border-bottom: 1px solid var(--color-borde); vertical-align: middle; }
.tabla-matriz tbody th[scope="row"] { text-align: left; font-weight: 400; color: var(--color-texto); }
.tabla-matriz tbody th[scope="row"] .insignia { margin-left: var(--esp-2); vertical-align: 1px; }
.tabla-matriz tbody tr:hover > * { background: var(--color-superficie-2); }
.tabla-matriz tbody tr:hover > th[scope="rowgroup"] { background: transparent; }
.tabla-matriz td { text-align: center; }
.tabla-matriz tbody:last-of-type tr:last-child > * { border-bottom: 0; }
.celda-incluido { display: inline-flex; color: var(--color-acento); }
.celda-incluido .icono { width: 18px; height: 18px; stroke-width: 2.25; }
.celda-no { display: inline-block; width: 12px; height: 2px; border-radius: 1px; background: var(--color-texto-3); vertical-align: middle; }
.tabla-matriz tbody[hidden] { display: none; }
@media (max-width: 599px) {
  .tabla-matriz { table-layout: fixed; }
  .tabla-matriz col.col-edicion { width: 5.25rem; }
  .tabla-matriz thead th, .tabla-matriz td, .tabla-matriz tbody th { padding-inline: var(--esp-3); }
  .tabla-matriz thead th.edicion, .tabla-matriz td { padding-inline: var(--esp-1); }
  .tabla-matriz thead th.edicion { font-size: 12px; }
  .tabla-matriz thead th.edicion span { display: none; }
  .tabla-matriz thead th.edicion .asterisco-movil { display: inline; }
  .ventana-app--matriz .pestanas--desborde { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .ventana-app--matriz .ventana-app__consulta { white-space: pre-wrap; }
  .ventana-app--matriz .ventana-app__pie { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
  .ventana-app--matriz .ventana-app__pie .datos-ejemplo { margin-left: 0; }
}
.tarjeta-plan__anual .marcador { font-size: 12px; }

/* --- preguntas (FAQ con <details>, sin JS) -------------------------------- */
.preguntas { display: grid; gap: var(--esp-6); max-width: 46rem; }
.preguntas__lista { border-top: 1px solid var(--color-borde); }
.pregunta { border-bottom: 1px solid var(--color-borde); }
.pregunta summary { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); padding: var(--esp-4) 0; font-weight: 500; cursor: pointer; list-style: none; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover { color: var(--color-acento-texto); }
.pregunta summary .icono { color: var(--color-texto-3); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.pregunta[open] summary .icono { transform: rotate(180deg); }
.pregunta__respuesta { padding: 0 0 var(--esp-5); color: var(--color-texto-2); max-width: 60ch; }
/* Apertura con altura animada (mejora progresiva: sin soporte, abre al instante) */
.pregunta { interpolate-size: allow-keywords; }
.pregunta::details-content { height: 0; overflow: clip; transition: height 200ms cubic-bezier(0.16, 1, 0.3, 1), content-visibility 200ms allow-discrete; }
.pregunta[open]::details-content { height: auto; }
.pregunta__respuesta { opacity: 0; transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.pregunta[open] .pregunta__respuesta { opacity: 1; }


/* ==========================================================================
   Autenticación: registro, inicio de sesión, recuperar contraseña
   ========================================================================== */

/* --- encabezado--minimo --------------------------------------------------- */
.encabezado--minimo .encabezado__acciones { gap: var(--esp-3); }
.enlace-volver { display: inline-flex; align-items: center; gap: 6px; color: var(--color-texto-2); font-size: var(--texto-sm); font-weight: 500; text-decoration: none; }
.enlace-volver:hover { color: var(--color-texto); }
.enlace-volver .icono { width: 16px; height: 16px; }
@media (max-width: 879px) { .encabezado--minimo .encabezado__acciones .selector-idioma { display: inline-flex !important; } }
@media (max-width: 479px) { .enlace-volver span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* --- pagina-auth ---------------------------------------------------------- */
.pagina-auth { display: grid; justify-items: center; align-content: start; padding: var(--esp-8) var(--esp-4) var(--esp-9); }
.pagina-auth__columna { width: 100%; max-width: 26rem; display: grid; align-content: start; gap: var(--esp-5); }
.pagina-auth__cabecera { display: grid; gap: var(--esp-2); }
.pagina-auth__titulo { font-size: var(--texto-xl); }
.pagina-auth__entrada { color: var(--color-texto-2); }
.pagina-auth__entrada strong { color: var(--color-texto); font-weight: 500; overflow-wrap: anywhere; }
.pagina-auth__alterno { text-align: center; font-size: var(--texto-sm); color: var(--color-texto-2); }
.pagina-auth__icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radio-lg); background: var(--color-acento-suave); color: var(--color-acento-texto); }
.pagina-auth__icono .icono { width: 22px; height: 22px; }
.pagina-auth__icono--exito { background: var(--color-exito-suave); color: var(--color-exito); }
.pagina-auth__icono--error { background: var(--color-error-suave); color: var(--color-error); }
@media (max-width: 599px) { .pagina-auth { padding-top: var(--esp-6); } }

/* --- panel ---------------------------------------------------------------- */
.panel { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-sm); padding: var(--esp-6); }
@media (max-width: 479px) { .panel { padding: var(--esp-5); } }

/* --- formulario ----------------------------------------------------------- */
.formulario { display: grid; gap: var(--esp-5); }
.formulario__acciones { display: grid; gap: var(--esp-3); }
.formulario__nota { font-size: var(--texto-xs); color: var(--color-texto-3); text-align: center; }

/* --- campo ---------------------------------------------------------------- */
.campo { display: grid; gap: 6px; }
.campo__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); }
.campo__etiqueta { font-size: var(--texto-sm); font-weight: 500; color: var(--color-texto); }
.campo__enlace { font-size: var(--texto-sm); }
.campo__control { position: relative; }
.campo__entrada {
  width: 100%; height: 42px; padding: 0 var(--esp-3);
  border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio);
  background: var(--color-superficie); color: var(--color-texto);
  font: inherit; font-size: var(--texto-base);
  box-shadow: inset 0 1px 1px rgb(19 25 35 / 0.04);
  transition: border-color var(--transicion), box-shadow var(--transicion);
  caret-color: var(--color-acento);
}
.campo__entrada::placeholder { color: var(--color-texto-3); }
.campo__entrada:hover { border-color: var(--color-texto-3); }
.campo__entrada:focus { outline: none; border-color: var(--color-acento); box-shadow: 0 0 0 3px var(--color-acento-suave); }
.campo__entrada[aria-invalid="true"] { border-color: var(--color-error); }
.campo__entrada[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--color-error-suave); }
.campo__entrada:disabled { background: var(--color-superficie-2); color: var(--color-texto-3); cursor: not-allowed; }
.campo__entrada--con-boton { padding-right: 76px; }
.campo__ayuda { font-size: var(--texto-xs); color: var(--color-texto-3); }
.campo__ayuda:has(~ .campo__error:not([hidden])) { display: none; }
.campo__error:not([hidden]), .alerta:not([hidden]) { animation: panel-entra 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.campo__error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--texto-sm); color: var(--color-error); }
.campo__error .icono { width: 15px; height: 15px; margin-top: 3px; }
.campo__alternar { position: absolute; top: 5px; right: 5px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--radio-sm); background: transparent; color: var(--color-texto-2); font: inherit; font-size: var(--texto-xs); font-weight: 500; cursor: pointer; }
.campo__alternar:hover { background: var(--color-superficie-3); color: var(--color-texto); }

/* --- casilla -------------------------------------------------------------- */
.casilla { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-2) var(--esp-3); align-items: start; font-size: var(--texto-sm); color: var(--color-texto-2); }
.casilla input { appearance: none; width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-sm); background: var(--color-superficie); display: grid; place-items: center; cursor: pointer; transition: background-color var(--transicion), border-color var(--transicion); }
.casilla input::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--color-sobre-relleno); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.casilla input:checked { background: var(--color-acento); border-color: var(--color-acento); }
.casilla input:checked::after { opacity: 1; }
.casilla input[aria-invalid="true"] { border-color: var(--color-error); }
.casilla .campo__error { grid-column: 2; }

/* --- alerta --------------------------------------------------------------- */
.alerta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid; border-radius: var(--radio); font-size: var(--texto-sm); }
.alerta .icono { grid-row: span 2; width: 18px; height: 18px; margin-top: 1px; }
.alerta strong { font-weight: 600; }
.alerta p { grid-column: 2; }
.alerta--error { background: var(--color-error-suave); border-color: var(--color-error-borde); color: var(--color-error-tinta); }
.alerta--exito { background: var(--color-exito-suave); border-color: var(--color-exito-borde); color: var(--color-exito-tinta); }
.alerta--aviso { background: var(--color-aviso-suave); border-color: var(--color-aviso-borde); color: var(--color-aviso-tinta); }
.alerta--info { background: var(--color-acento-suave); border-color: var(--color-seleccion); color: var(--color-info-tinta); }
.alerta a { color: inherit; font-weight: 500; }

/* --- lista-pistas: consejos neutros en pantallas de autenticación --- */
.lista-pistas { display: grid; gap: var(--esp-2); list-style: none; font-size: var(--texto-sm); color: var(--color-texto-2); }
.lista-pistas li { display: flex; gap: var(--esp-2); align-items: flex-start; }
.lista-pistas .icono { width: 16px; height: 16px; margin-top: 3px; color: var(--color-texto-3); }

/* --- pasos ---------------------------------------------------------------- */
.pasos { display: flex; gap: var(--esp-2); list-style: none; font-size: var(--texto-xs); font-weight: 500; color: var(--color-texto-3); counter-reset: paso-flujo; }
.pasos li { flex: 1; display: grid; gap: 6px; }
.pasos li::before { content: ""; height: 3px; border-radius: 2px; background: var(--color-superficie-3); }
.pasos li[data-estado="completo"]::before, .pasos li[aria-current="step"]::before { background: var(--color-acento); }
.pasos li[aria-current="step"] { color: var(--color-texto); }
.pasos li[data-estado="completo"] { color: var(--color-texto-2); }

/* --- resumen-compra ------------------------------------------------------- */
.resumen-compra { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--color-borde); border-radius: var(--radio); background: var(--color-superficie); font-size: var(--texto-sm); }
.resumen-compra strong { font-weight: 600; }
.resumen-compra__precio { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.resumen-compra__precio span { display: block; font-size: var(--texto-xs); color: var(--color-aviso); }

/* --- boton--cargando ------------------------------------------------------ */
.boton--cargando { position: relative; color: transparent !important; pointer-events: none; }
.boton--cargando::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgb(255 255 255 / 0.35); border-top-color: var(--color-sobre-relleno); border-radius: 50%; animation: girar 700ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* --- pie--minimo ---------------------------------------------------------- */
.pie--minimo { padding-block: var(--esp-5); }
.pie--minimo .pie__legal { margin-top: 0; padding-top: 0; border-top: 0; align-items: center; }
.pie--minimo ul { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); }

/* cuerpo-minimo: el pie queda abajo aunque el contenido sea corto */
.cuerpo-minimo { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.cuerpo-minimo > main { flex: 1; }

/* ==========================================================================
   Área de cuenta
   ========================================================================== */

/* --- cuenta (estructura con navegación lateral) --------------------------- */
.cuenta { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--esp-7); align-items: start; padding-block: var(--esp-7) var(--esp-9); }
.cuenta__principal { display: grid; gap: var(--esp-5); min-width: 0; max-width: 52rem; }
@media (max-width: 879px) { .cuenta { grid-template-columns: 1fr; gap: var(--esp-5); padding-top: var(--esp-4); } }

/* --- navegacion-cuenta ---------------------------------------------------- */
.navegacion-cuenta { position: sticky; top: calc(var(--alto-encabezado) + var(--esp-5)); display: grid; gap: var(--esp-5); }
.navegacion-cuenta__lista { display: grid; gap: 2px; list-style: none; }
.navegacion-cuenta__enlace { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-3); border-radius: var(--radio); color: var(--color-texto-2); font-size: var(--texto-sm); font-weight: 500; text-decoration: none; }
.navegacion-cuenta__enlace .icono { color: var(--color-texto-3); }
.navegacion-cuenta__enlace:hover { background: var(--color-superficie-3); color: var(--color-texto); }
.navegacion-cuenta__enlace[aria-current="page"] { background: var(--color-superficie); color: var(--color-texto); box-shadow: var(--sombra-sm), inset 0 0 0 1px var(--color-borde); }
.navegacion-cuenta__enlace[aria-current="page"] .icono { color: var(--color-acento); }
.navegacion-cuenta__secundaria { padding-top: var(--esp-4); border-top: 1px solid var(--color-borde); }
@media (max-width: 879px) {
  .navegacion-cuenta { position: static; display: block; margin-inline: calc(var(--esp-4) * -1); padding-inline: var(--esp-4); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--color-borde); }
  .navegacion-cuenta__lista { display: flex; gap: var(--esp-1); padding-bottom: var(--esp-3); }
  .navegacion-cuenta__enlace { white-space: nowrap; }
  .navegacion-cuenta__secundaria { display: none; }
}

/* --- encabezado-pagina ---------------------------------------------------- */
.encabezado-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-3) var(--esp-5); }
.encabezado-pagina__texto { display: grid; gap: var(--esp-2); }
.encabezado-pagina__titulo { font-size: var(--texto-xl); }
.encabezado-pagina__descripcion { color: var(--color-texto-2); max-width: 40rem; }
.encabezado-pagina__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.miga { display: inline-flex; align-items: center; gap: 6px; font-size: var(--texto-sm); color: var(--color-texto-2); text-decoration: none; }
.miga:hover { color: var(--color-texto); }
.miga .icono { width: 16px; height: 16px; }

/* --- panel: cabecera, cuerpo y pie --------------------------------------- */
.panel--seccion { padding: 0; }
.panel__cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-5) var(--esp-6) 0; }
.panel__titulo { font-size: var(--texto-md); letter-spacing: -0.015em; display: flex; align-items: center; gap: var(--esp-3); }
.panel__descripcion { width: 100%; color: var(--color-texto-2); font-size: var(--texto-sm); }
.panel__cuerpo { padding: var(--esp-5) var(--esp-6); }
.panel__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-4) var(--esp-6); border-top: 1px solid var(--color-borde); background: var(--color-superficie-2); border-radius: 0 0 var(--radio-lg) var(--radio-lg); font-size: var(--texto-sm); color: var(--color-texto-2); }
.panel__pie-acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-left: auto; }
@media (max-width: 599px) {
  .panel__cabecera { padding: var(--esp-4) var(--esp-4) 0; }
  .panel__cuerpo { padding: var(--esp-4); }
  .panel__pie { padding: var(--esp-3) var(--esp-4); }
  .panel__pie-acciones { margin-left: 0; width: 100%; }
  .panel__pie-acciones .boton { flex: 1; }
}

/* --- plan-actual ---------------------------------------------------------- */
.plan-actual { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-2) var(--esp-5); padding-bottom: var(--esp-5); margin-bottom: var(--esp-2); border-bottom: 1px solid var(--color-borde); }
.plan-actual__nombre { display: flex; align-items: center; gap: var(--esp-3); font-size: var(--texto-xl); }
.plan-actual__precio { font-size: var(--texto-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-actual__precio span { color: var(--color-texto-3); font-weight: 400; font-size: var(--texto-sm); }
.insignia--error { background: var(--color-error-suave); color: var(--color-error); }
.insignia--aviso { background: var(--color-aviso-suave); color: var(--color-aviso); }
.insignia--exito { background: var(--color-exito-suave); color: var(--color-exito); }

/* --- lista-datos (pares clave-valor) ------------------------------------- */
.lista-datos { display: grid; margin: 0; }
.lista-datos__fila { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--esp-1) var(--esp-4); padding: var(--esp-3) 0; border-bottom: 1px solid var(--color-borde); }
.lista-datos__fila:last-child { border-bottom: 0; }
.lista-datos dt { color: var(--color-texto-2); font-size: var(--texto-sm); }
.lista-datos dd { margin: 0; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-1) var(--esp-3); }
.lista-datos dd small { color: var(--color-texto-3); font-size: var(--texto-sm); }
@media (max-width: 599px) { .lista-datos__fila { grid-template-columns: 1fr; } }

/* --- licencia ------------------------------------------------------------- */
.licencia { display: grid; gap: var(--esp-4); }
.licencia .comando { width: 100%; justify-content: space-between; font-size: var(--texto-base); padding-block: 8px; letter-spacing: 0.04em; }
.licencia__nota { color: var(--color-texto-2); font-size: var(--texto-sm); }
.pasos-numerados { display: grid; gap: var(--esp-3); list-style: none; counter-reset: paso-num; }
.pasos-numerados li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--esp-3); align-items: baseline; color: var(--color-texto-2); }
.pasos-numerados li::before { counter-increment: paso-num; content: counter(paso-num); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-superficie-3); color: var(--color-texto); font-size: var(--texto-xs); font-weight: 600; }
.pasos-numerados strong { color: var(--color-texto); font-weight: 500; }

/* --- tabla-recibos -------------------------------------------------------- */
.tabla-recibos { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); font-variant-numeric: tabular-nums; }
.tabla-recibos th { padding: var(--esp-2) var(--esp-3); text-align: left; font-size: var(--texto-xs); font-weight: 500; color: var(--color-texto-3); border-bottom: 1px solid var(--color-borde); }
.tabla-recibos td { padding: var(--esp-3); border-bottom: 1px solid var(--color-borde); vertical-align: middle; }
.tabla-recibos tr:last-child td { border-bottom: 0; }
.tabla-recibos tbody tr:hover td { background: var(--color-superficie-2); }
.tabla-recibos th:first-child, .tabla-recibos td:first-child { padding-left: var(--esp-6); }
.tabla-recibos th:last-child, .tabla-recibos td:last-child { padding-right: var(--esp-6); text-align: right; }
.tabla-recibos .numero { font-family: var(--fuente-codigo); font-size: 12.5px; color: var(--color-texto-2); }
.tabla-recibos .importe { text-align: right; white-space: nowrap; }
.tabla-recibos .concepto small { display: block; color: var(--color-texto-3); font-size: var(--texto-xs); }
.tabla-recibos a { font-weight: 500; text-decoration: none; }
.tabla-recibos a:hover { text-decoration: underline; }
@media (max-width: 719px) {
  .tabla-recibos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-recibos, .tabla-recibos tbody, .tabla-recibos tr, .tabla-recibos td { display: block; }
  .tabla-recibos tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--esp-3); padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--color-borde); }
  .tabla-recibos tr:last-child { border-bottom: 0; }
  .tabla-recibos td { padding: 0 !important; border: 0; text-align: left !important; }
  .tabla-recibos td.fecha { font-weight: 500; }
  .tabla-recibos td.importe { grid-column: 2; grid-row: 1; text-align: right !important; font-weight: 600; }
  .tabla-recibos td.estado { grid-column: 2; grid-row: 2; text-align: right !important; }
  .tabla-recibos td.accion { grid-column: 1 / -1; }
  .tabla-recibos td.numero { grid-column: 1; }
}

/* --- paginacion ----------------------------------------------------------- */
.paginacion { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.paginacion__estado { font-variant-numeric: tabular-nums; }
.paginacion__botones { display: flex; gap: var(--esp-2); }
.paginacion .boton { min-height: 32px; }

/* --- estado-vacio --------------------------------------------------------- */
.estado-vacio { display: grid; justify-items: center; gap: var(--esp-3); padding: var(--esp-8) var(--esp-5); text-align: center; }
.estado-vacio__icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radio-lg); background: var(--color-superficie-3); color: var(--color-texto-2); }
.estado-vacio__titulo { font-size: var(--texto-md); font-weight: 600; letter-spacing: -0.015em; color: var(--color-texto); }
.estado-vacio p { color: var(--color-texto-2); max-width: 36ch; }
.estado-vacio .boton { margin-top: var(--esp-2); }

/* --- opcion-plan (tarjetas de radio) -------------------------------------- */
.opciones-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); border: 0; margin: 0; padding: 0; }
.opciones-plan legend { margin-bottom: var(--esp-3); font-weight: 600; }
.opcion-plan { position: relative; display: grid; gap: var(--esp-1); padding: var(--esp-4); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-lg); background: var(--color-superficie); cursor: pointer; transition: border-color var(--transicion), box-shadow var(--transicion); }
.opcion-plan:hover { border-color: var(--color-texto-3); }
.opcion-plan input { position: absolute; top: var(--esp-4); right: var(--esp-4); width: 18px; height: 18px; margin: 0; accent-color: var(--color-acento); }
.opcion-plan:has(input:checked) { border-color: var(--color-acento); box-shadow: 0 0 0 1px var(--color-acento), 0 0 0 4px var(--color-acento-suave); }
.opcion-plan:has(input:focus-visible) { outline: 2px solid var(--color-acento); outline-offset: 2px; }
.opcion-plan:has(input:disabled) { background: var(--color-superficie-2); cursor: not-allowed; }
.opcion-plan__nombre { font-weight: 600; padding-right: var(--esp-6); }
.opcion-plan__precio { font-size: var(--texto-lg); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.opcion-plan__precio span { font-size: var(--texto-sm); font-weight: 400; color: var(--color-texto-3); }
.opcion-plan__detalle { font-size: var(--texto-sm); color: var(--color-texto-2); }
@media (max-width: 599px) { .opciones-plan { grid-template-columns: 1fr; } }

/* --- comparacion-ediciones (Community actual frente a Pro) --------------- */
.comparacion-ediciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.comparacion-ediciones > div { display: grid; align-content: start; gap: var(--esp-3); padding: var(--esp-5) var(--esp-6); }
.comparacion-ediciones > div + div { border-left: 1px solid var(--color-borde); }
.comparacion-ediciones h3 { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-base); letter-spacing: -0.01em; }
.comparacion-ediciones ul { display: grid; gap: var(--esp-2); list-style: none; font-size: var(--texto-sm); color: var(--color-texto-2); }
.comparacion-ediciones li { display: flex; gap: var(--esp-2); align-items: flex-start; }
.comparacion-ediciones li .icono { margin-top: 0.2em; color: var(--color-acento); }
@media (max-width: 719px) { .comparacion-ediciones { grid-template-columns: 1fr; } .comparacion-ediciones > div + div { border-left: 0; border-top: 1px solid var(--color-borde); } .comparacion-ediciones > div { padding: var(--esp-4); } }

/* --- resumen-pedido ------------------------------------------------------- */
.resumen-pedido { display: grid; gap: 0; margin: 0; font-variant-numeric: tabular-nums; }
.resumen-pedido__fila { display: flex; justify-content: space-between; gap: var(--esp-4); padding: var(--esp-2) 0; font-size: var(--texto-sm); color: var(--color-texto-2); }
.resumen-pedido__fila dd { margin: 0; color: var(--color-texto); text-align: right; }
.resumen-pedido__fila--total { margin-top: var(--esp-2); padding-top: var(--esp-3); border-top: 1px solid var(--color-borde); font-size: var(--texto-base); color: var(--color-texto); font-weight: 600; }

/* --- checkout-simulado ---------------------------------------------------- */
.checkout-simulado { border: 1px dashed var(--color-borde-fuerte); border-radius: var(--radio-lg); background: var(--color-superficie); }
.checkout-simulado__aviso { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-3) var(--esp-5); border-bottom: 1px dashed var(--color-borde-fuerte); font-size: var(--texto-sm); color: var(--color-texto-2); }
.checkout-simulado__aviso .icono { color: var(--color-texto-3); }
.checkout-simulado__cuerpo { display: grid; gap: var(--esp-5); padding: var(--esp-5); }
.checkout-simulado__acciones { display: grid; gap: var(--esp-2); }

/* --- conserva-pierde (cancelación) ---------------------------------------- */
.conserva-pierde { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5); }
.conserva-pierde h3 { font-size: var(--texto-base); letter-spacing: -0.01em; margin-bottom: var(--esp-3); }
.conserva-pierde ul { display: grid; gap: var(--esp-2); list-style: none; font-size: var(--texto-sm); color: var(--color-texto-2); }
.conserva-pierde li { display: flex; gap: var(--esp-2); align-items: flex-start; }
.conserva-pierde li .icono { margin-top: 0.2em; flex: none; }
.conserva-pierde__conserva .icono { color: var(--color-exito); }
.conserva-pierde__pierde .icono { color: var(--color-texto-3); }
@media (max-width: 599px) { .conserva-pierde { grid-template-columns: 1fr; } }

.fecha-clave { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-4); border-radius: var(--radio); background: var(--color-superficie-2); font-size: var(--texto-sm); color: var(--color-texto-2); }
.fecha-clave strong { color: var(--color-texto); font-weight: 600; }
.fecha-clave .icono { width: 20px; height: 20px; color: var(--color-texto-2); }

/* --- opciones-motivo (radios simples) ------------------------------------- */
.opciones-motivo { display: grid; gap: var(--esp-2); border: 0; margin: 0; padding: 0; }
.opciones-motivo legend { margin-bottom: var(--esp-3); font-size: var(--texto-sm); font-weight: 500; }
.opciones-motivo legend span { color: var(--color-texto-3); font-weight: 400; }
.opcion-motivo { display: flex; align-items: center; gap: var(--esp-3); font-size: var(--texto-sm); color: var(--color-texto-2); cursor: pointer; }
.opcion-motivo input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-acento); }
.campo__area { width: 100%; min-height: 88px; padding: var(--esp-2) var(--esp-3); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio); background: var(--color-superficie); color: var(--color-texto); font: inherit; font-size: var(--texto-sm); resize: vertical; caret-color: var(--color-acento); }
.campo__area:focus { outline: none; border-color: var(--color-acento); box-shadow: 0 0 0 3px var(--color-acento-suave); }
.campo__seleccion { width: 100%; height: 42px; padding: 0 var(--esp-3); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio); background: var(--color-superficie); color: var(--color-texto); font: inherit; }
.campo__seleccion:focus { outline: none; border-color: var(--color-acento); box-shadow: 0 0 0 3px var(--color-acento-suave); }
.boton--peligro:hover { background: var(--color-error-hover); color: var(--color-sobre-relleno); }
.boton--peligro-texto { background: transparent; color: var(--color-error); }
.boton--peligro-texto:hover { background: var(--color-error-suave); color: var(--color-error); }

/* --- dialogo (nativo <dialog>) -------------------------------------------- */
.dialogo { width: min(28rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-lg); background: var(--color-superficie); color: var(--color-texto); box-shadow: var(--sombra-ventana); }
/* Entrada 220ms, salida 150ms por el mismo camino */
.dialogo { opacity: 0; transform: translateY(4px); transition: opacity 150ms cubic-bezier(0.16, 1, 0.3, 1), transform 150ms cubic-bezier(0.16, 1, 0.3, 1), overlay 150ms allow-discrete, display 150ms allow-discrete; }
.dialogo[open] { opacity: 1; transform: none; transition-duration: 220ms; }
@starting-style { .dialogo[open] { opacity: 0; transform: translateY(4px); } }
.dialogo::backdrop { background: rgb(19 25 35 / 0); transition: background-color 150ms cubic-bezier(0.16, 1, 0.3, 1), overlay 150ms allow-discrete, display 150ms allow-discrete; }
.dialogo[open]::backdrop { background: rgb(19 25 35 / 0.4); transition-duration: 220ms; }
@starting-style { .dialogo[open]::backdrop { background: rgb(19 25 35 / 0); } }
.dialogo__cuerpo { display: grid; gap: var(--esp-3); padding: var(--esp-6) var(--esp-6) var(--esp-5); }
.dialogo__titulo { font-size: var(--texto-lg); }
.dialogo__cuerpo p { color: var(--color-texto-2); }
.dialogo__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--esp-2); padding: var(--esp-4) var(--esp-6); border-top: 1px solid var(--color-borde); background: var(--color-superficie-2); border-radius: 0 0 var(--radio-lg) var(--radio-lg); }

/* --- documento-recibo ----------------------------------------------------- */
.documento-recibo { display: grid; gap: var(--esp-6); padding: var(--esp-7); }
.documento-recibo__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-4); }
.documento-recibo__titulo { display: flex; align-items: center; gap: var(--esp-3); font-size: var(--texto-lg); }
.documento-recibo__meta { font-size: var(--texto-sm); color: var(--color-texto-2); }
.documento-recibo__numero { font-family: var(--fuente-codigo); }
.documento-recibo__partes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-5); font-size: var(--texto-sm); }
.documento-recibo__partes h3 { font-size: var(--texto-xs); font-weight: 500; color: var(--color-texto-3); letter-spacing: 0; margin-bottom: var(--esp-2); }
.documento-recibo__partes p { color: var(--color-texto); line-height: 1.55; }
.tabla-lineas { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); font-variant-numeric: tabular-nums; }
.tabla-lineas th { padding: var(--esp-2) 0; text-align: left; font-size: var(--texto-xs); font-weight: 500; color: var(--color-texto-3); border-bottom: 1px solid var(--color-borde); }
.tabla-lineas td { padding: var(--esp-3) 0; border-bottom: 1px solid var(--color-borde); vertical-align: top; }
.tabla-lineas td small { display: block; color: var(--color-texto-3); }
.tabla-lineas .importe { text-align: right; white-space: nowrap; }
.tabla-lineas tfoot td { border-bottom: 0; padding: var(--esp-2) 0; color: var(--color-texto-2); }
.tabla-lineas tfoot tr.total td { padding-top: var(--esp-3); border-top: 1px solid var(--color-borde); color: var(--color-texto); font-weight: 600; font-size: var(--texto-base); }
.tabla-lineas tfoot tr.reembolso td { color: var(--color-texto-2); }
.documento-recibo__pie { padding-top: var(--esp-4); border-top: 1px solid var(--color-borde); font-size: var(--texto-xs); color: var(--color-texto-3); }
@media (max-width: 719px) {
  .documento-recibo { padding: var(--esp-5) var(--esp-4); gap: var(--esp-5); }
  .documento-recibo__partes { grid-template-columns: 1fr; gap: var(--esp-4); }
}

.pie-datos-ejemplo { display: flex; justify-content: flex-end; font-size: var(--texto-xs); color: var(--color-texto-3); }

@media print {
  .encabezado, .navegacion-cuenta, .pie, .barra-demo, .encabezado-pagina__acciones, .miga, .pie-datos-ejemplo { display: none !important; }
  body { background: var(--color-superficie); }
  .cuenta { display: block; padding: 0; }
  .panel { border: 0; box-shadow: none; }
}

/* encabezado--cuenta: el menú de usuario sigue visible en móvil */
@media (max-width: 879px) {
  .encabezado--cuenta .encabezado__acciones .menu-usuario, .encabezado--cuenta .encabezado__acciones .selector-idioma { display: inline-flex !important; }
}
@media (max-width: 479px) { .encabezado--cuenta .menu-usuario__nombre { display: none; } .encabezado--cuenta .menu-usuario { padding-right: 4px; } }

/* Íconos dentro de un enlace de texto: en línea con la palabra */
dd a .icono, p a .icono { display: inline-block; width: 0.95em; height: 0.95em; margin-left: 3px; vertical-align: -0.1em; }

/* Facturación: el resumen sigue a la opción elegida */
.formulario-facturacion .resumen-pedido--anual { display: none; }
.formulario-facturacion:has(input[value="anual"]:checked) .resumen-pedido--anual { display: grid; }
.formulario-facturacion:has(input[value="anual"]:checked) .resumen-pedido--mensual { display: none; }

/* Solo maqueta: espacio para la barra de demo sobre el pie en móvil */
@media (max-width: 719px) { .con-barra-demo .pie { padding-bottom: 72px; } }
.plan-actual__calificador { white-space: nowrap; }
@media (max-width: 719px) {
  .resumen-pedido__fila { flex-direction: column; gap: 2px; }
  .resumen-pedido__fila dd { text-align: left; }
  .resumen-pedido__fila--total { flex-direction: row; justify-content: space-between; }
}

/* Momento de éxito (mejora completada): clave y pasos entran escalonados, legibles desde el primer cuadro */
.panel--celebracion .licencia > .comando,
.panel--celebracion .pasos-numerados li { animation: panel-entra 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.panel--celebracion .licencia > .comando { animation-delay: 60ms; }
.panel--celebracion .pasos-numerados li:nth-child(1) { animation-delay: 100ms; }
.panel--celebracion .pasos-numerados li:nth-child(2) { animation-delay: 140ms; }
.panel--celebracion .pasos-numerados li:nth-child(3) { animation-delay: 180ms; }

/* Movimiento reducido para las animaciones de interacción: sin escalas ni desplazamientos; las opacidades se conservan */
@media (prefers-reduced-motion: reduce) {
  .boton:active:not(.boton--cargando):not(:disabled):not([aria-disabled="true"]) { transform: none; }
  .dialogo, .menu-movil, .comando button .icono { transform: none !important; }
  @starting-style { .dialogo[open], .menu-movil[data-abierto="true"] { transform: none !important; } }
  .comando button .icono { filter: none !important; }
  .pregunta::details-content { transition: none; }
  .panel--celebracion .licencia > .comando, .panel--celebracion .pasos-numerados li { animation-delay: 0s; }
}

/* ==========================================================================
   Demostración del IDE (landing): lista de temas + ventana.
   Cada tema reproduce su animación por tiempo al hacer clic (app.js).
   Estados que pone el JS en cada pieza [data-entra]/[data-sale]/[data-anima]:
   .es-oculto, .es-visible, .es-entra (anima la entrada), .es-sale (anima la
   salida) y .es-anima (pulso). Solo transform y opacity, curva del proyecto.
   Sin JS, la ventana muestra el Tracer con resultados y documento.
   ========================================================================== */
@keyframes e-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes e-sale { from { opacity: 1; } to { opacity: 0; } }
@keyframes e-aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes e-aparece-x { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes e-aparece-movil { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: none; } }
@keyframes e-pulsa { 0%, 100% { transform: none; } 45% { transform: scale(0.94); } }
@keyframes e-dialogo { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes e-indicador-mueve { from { transform: none; } to { transform: translateX(calc(var(--ancho-tab) + 2px)); } }

/* --- ide-demo: lista a la izquierda, ventana a la derecha --- */
.ide-demo { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--esp-6); align-items: start; padding-bottom: var(--esp-9); }

/* --- temas (lista de botones) --- */
.temas { display: grid; gap: var(--esp-3); align-content: start; }
.temas__ayuda { font-size: var(--texto-sm); color: var(--color-texto-3); }
.temas__lista { display: grid; gap: var(--esp-1); list-style: none; }
.tema {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--esp-1) var(--esp-3); align-items: start;
  width: 100%; padding: var(--esp-3) var(--esp-4); border: 0; border-radius: var(--radio-lg);
  background: transparent; color: var(--color-texto-2); font: inherit; text-align: left; cursor: pointer;
  transition: transform var(--transicion);
}
.tema:hover { background: var(--color-superficie-3); }
.tema:active { transform: scale(0.98); }
.tema[aria-pressed="true"] { background: var(--color-superficie); box-shadow: var(--sombra-sm), inset 0 0 0 1px var(--color-acento); }
.tema[aria-pressed="true"] .tema__titulo, .tema[aria-pressed="true"] .tema__corto { color: var(--color-acento-texto); }
.tema__icono { width: 18px; height: 18px; margin-top: 2px; color: var(--color-texto-3); }
.tema[aria-pressed="true"] .tema__icono { color: var(--color-acento); }
.tema__texto { display: grid; gap: var(--esp-1); }
.tema__titulo { font-weight: 600; color: var(--color-texto); letter-spacing: -0.01em; }
.tema__corto { display: none; }
.tema__descripcion { font-size: var(--texto-sm); line-height: 1.5; }
.temas__detalle { display: none; }

/* Escritorio: la columna se alinea arriba con la ventana y mide lo que ocupa su contenido.
   Solo el tema activo muestra su descripción; la tarjeta se ajusta a su contenido y el
   espacio entre temas es siempre el mismo. Al cambiar, los títulos de abajo se desplazan,
   pero la columna nunca supera el alto de la ventana, así la sección y la página no se mueven. */
@media (min-width: 880px) {
  .tema__titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tema__texto { grid-template-rows: min-content 0fr; gap: 0; transition: grid-template-rows 240ms cubic-bezier(0.16, 1, 0.3, 1); }
  .tema[aria-pressed="true"] .tema__texto { grid-template-rows: min-content 1fr; }
  .tema__descripcion { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1); }
  .tema[aria-pressed="true"] .tema__descripcion { opacity: 1; transition-delay: 80ms; }
  .tema__descripcion-texto { display: block; padding-top: var(--esp-1); }
}
@media (min-width: 880px) and (prefers-reduced-motion: reduce) {
  .tema__texto, .tema__descripcion { transition: none; }
}


/* --- ventana de la demostración --- */
.ide-demo__ventana { position: relative; display: flex; flex-direction: column; }
.ide-demo__ventana .ventana-app__cuerpo { height: 540px; grid-template-columns: 170px minmax(0, 1fr); }
.ide-demo__paneles { position: relative; flex: 1; min-height: 0; }
.ide-demo__paneles > .ventana-app__panel { position: absolute; inset: 0; }
/* Anula la entrada genérica de .ventana-app__panel:not([hidden]); si no, se reinicia al quitar las clases y mezcla estados */
.ide-demo .ide-demo__paneles > .ventana-app__panel:not(.es-entra):not(.es-sale) { animation: none; }
.ide-demo .doctor__metricas { flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); }
.ide-demo .doctor__metricas span { white-space: nowrap; }

/* Pestañas: un solo indicador que se desliza */
.pestanas--demo { --ancho-tab: 10.5rem; position: relative; }
.pestanas--demo .pestanas__boton { cursor: default; color: var(--color-texto-2); width: var(--ancho-tab); justify-content: center; flex: none; }
.e-indicador { position: absolute; left: calc(var(--esp-3) + var(--esp-2)); bottom: -1px; width: calc(var(--ancho-tab) - var(--esp-4)); height: 2px; border-radius: 2px; background: var(--color-acento); }

/* Búsqueda: el ID se escribe letra a letra */
.e-texto-campo { position: relative; display: inline-flex; min-width: 0; overflow: hidden; white-space: nowrap; }
.e-placeholder { position: absolute; left: 0; color: var(--color-texto-3); font-family: var(--fuente-texto); }

/* Estados vacíos del producto */
.e-vacio { display: grid; place-items: center; padding: var(--esp-5); text-align: center; color: var(--color-texto-3); font-size: 13px; }
.ide-demo .tracer__resultados { position: relative; grid-column: 1; grid-row: 1; }
.e-vacio--resultados { position: absolute; left: 0; right: 0; top: 49px; bottom: 0; }
.ide-demo .tracer > .e-vacio--json, .ide-demo .tracer > .e-json { grid-column: 2; grid-row: 1; }
.e-vacio--json { padding-top: calc(49px + var(--esp-5)); }

/* Confirmación en producción */
.ide-demo__velo { position: absolute; inset: 0; background: rgb(19 25 35 / 0.32); pointer-events: none; }
.ide-demo__dialogo { position: absolute; left: 50%; top: 50%; width: min(26rem, calc(100% - 2rem)); translate: -50% -50%; }

/* Estado sin JS: Tracer con resultados y documento */
.e-placeholder, .e-vacio, .e-panel-doctor, .e-consejo, .e-insignia, .ide-demo__velo, .ide-demo__dialogo { opacity: 0; }

/* --- estados que pone el JS --- */
.ide-demo .es-oculto { opacity: 0; }
.ide-demo .es-visible { opacity: 1; transform: none; }
.ide-demo .es-entra { animation: var(--e-anim, e-aparece) var(--e-dur, 320ms) cubic-bezier(0.16, 1, 0.3, 1) var(--e-retraso, 0ms) both; }
.ide-demo .es-sale { animation: e-sale var(--e-dur-sale, 180ms) cubic-bezier(0.16, 1, 0.3, 1) var(--e-retraso-sale, 0ms) both; }
.ide-demo .es-anima { animation: e-pulsa 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
/* El indicador no se oculta: "oculto" es su posición bajo Tracer y "visible" bajo Query Doctor */
.ide-demo .e-indicador.es-oculto { opacity: 1; transform: none; }
.ide-demo .e-indicador.es-visible { transform: translateX(calc(var(--ancho-tab) + 2px)); }
/* Los paneles se superponen: el panel oculto no debe recibir el foco del puntero */
.ide-demo .ventana-app__panel.es-oculto { visibility: hidden; }

/* --- coreografía por tema (retrasos en ms desde el clic) --- */
/* 1 · Tracer: el ID se escribe (~1,1 s) */
.e-placeholder { --e-dur-sale: 150ms; }
.e-escrito span { --e-anim: e-entra; --e-dur: 90ms; --e-retraso: calc(200ms + var(--i) * 75ms); }
/* 2 · Resultados: pulsar Buscar y llegan los grupos (~1,5 s) */
.e-vacio--resultados { --e-retraso-sale: 220ms; }
.e-grupo { --e-dur: 360ms; --e-retraso: calc(360ms + var(--i) * 130ms); }
.e-estado { --e-anim: e-entra; --e-dur: 240ms; --e-retraso: 1050ms; }
/* 3 · Documento: entra desde la derecha (~0,7 s) */
.e-vacio--json { --e-dur-sale: 150ms; }
.e-json { --e-anim: e-aparece-x; --e-dur: 480ms; --e-retraso: 120ms; }
/* 4 · Query Doctor: cambio de pestaña, la query y el plan (~1,9 s) */
.e-indicador { --e-anim: e-indicador-mueve; --e-dur: 400ms; }
.e-panel-tracer { --e-dur-sale: 220ms; }
.e-panel-doctor { --e-anim: e-entra; --e-dur: 300ms; --e-retraso: 150ms; }
.e-linea { display: block; --e-dur: 300ms; --e-retraso: calc(420ms + var(--i) * 150ms); }
.e-paso { --e-dur: 320ms; --e-retraso: calc(1020ms + var(--i) * 160ms); }
/* 5 · ADVISE (~0,8 s) */
.e-consejo { --e-dur: 420ms; }
.e-insignia { justify-self: start; --e-dur: 300ms; --e-retraso: 480ms; }
/* 6 · Producción: velo, diálogo y diff (~1,2 s) */
.ide-demo__velo { --e-anim: e-entra; --e-dur: 280ms; }
.ide-demo__dialogo { --e-anim: e-dialogo; --e-dur: 420ms; --e-retraso: 140ms; }
.e-diff { --e-anim: e-entra; --e-dur: 220ms; --e-retraso: calc(560ms + var(--i) * 110ms); }

/* Movimiento reducido: el estado final, sin animación (el JS también salta al final) */
@media (prefers-reduced-motion: reduce) {
  .ide-demo .es-entra { animation: none; opacity: 1; transform: none; }
  .ide-demo .e-indicador.es-entra { transform: translateX(calc(var(--ancho-tab) + 2px)); }
  .ide-demo .es-sale { animation: none; opacity: 0; }
  .ide-demo .es-anima { animation: none; }
  .tema:active { transform: none; }
}

/* --- móvil: rejilla de temas sobre la ventana --- */
@media (max-width: 879px) {
  .ide-demo { grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); padding-bottom: var(--esp-8); }
  .temas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-2); }
  .tema { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: var(--esp-2) var(--esp-3); border-radius: var(--radio); box-shadow: inset 0 0 0 1px var(--color-borde); }
  .tema[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--color-acento); }
  .tema__icono { margin-top: 0; }
  .tema__titulo, .tema__descripcion { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tema__corto { display: block; font-weight: 600; color: var(--color-texto); font-size: var(--texto-sm); }
  .temas__detalle { display: block; min-height: 4.8em; color: var(--color-texto-2); font-size: var(--texto-sm); }
  .ide-demo__ventana .ventana-app__cuerpo { height: 460px; grid-template-columns: minmax(0, 1fr); }
  .ide-demo .e-opcional, .ide-demo .tracer__aviso > span, .ide-demo .e-vacio--json { display: none; }
  .ide-demo .tracer { position: relative; overflow: hidden; }
  .ide-demo .tracer > .e-json { grid-column: auto; grid-row: auto; display: flex; position: absolute; inset: 0; z-index: 1; }
  .e-json { --e-anim: e-aparece-movil; }
  .ide-demo .doctor__cuerpo { position: relative; }
  .ide-demo .e-consejo { position: absolute; left: 0; right: 0; bottom: 0; background: var(--color-superficie); border-top: 1px solid var(--color-borde); box-shadow: 0 -10px 18px -10px rgb(19 25 35 / 0.22); }
}
@media (max-width: 479px) { .pestanas--demo { --ancho-tab: 6.5rem; } }

/* --- Objetivos de toque y reajuste a 320 px (auditoría) -------------------- */
/* «Volver al sitio»: el área tocable mide al menos 40×40 aunque solo se vea la flecha */
.enlace-volver { min-height: 40px; padding: 0 var(--esp-2); margin-right: calc(var(--esp-2) * -1); justify-content: center; }
@media (max-width: 479px) { .enlace-volver { min-width: 40px; } }
/* Recibos en móvil: el enlace «Ver» ocupa toda la fila inferior de la tarjeta */
@media (max-width: 719px) {
  .tabla-recibos td.accion a { display: flex; align-items: center; min-height: 44px; margin-bottom: calc(var(--esp-3) * -1); }
}
/* Por debajo de 360 px el botón de descarga del encabezado queda solo con su ícono (el nombre sigue accesible) */
@media (max-width: 359px) {
  .encabezado__acciones > .boton--primario { width: 40px; padding: 0; }
  .encabezado__acciones > .boton--primario > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}