/* ==========================================================================
   Zumer — Tokens de diseño
   Traducción literal de `marketing/sistema_diseno_web.md` a CSS.
   Regla: los componentes usan SOLO la capa semántica (§1.3). Nunca un valor crudo.
   ========================================================================== */

:root {
  /* --- Capa 1 — primitivas (los 8 del manual de marca, intocables) §1.1 --- */
  --z-papel: #F6F6F6;
  --z-superficie: #FBFBFA;
  --z-rojo: #F24720;
  --z-gris-oscuro: #423F3C;
  --z-blanco: #FFFFFF;
  --z-tinta: #1B1917;
  --z-gris-medio: #6E6963;
  --z-linea: #E3E1DE;

  /* --- Capa 1b — derivados de pantalla (calculados, no elegidos a ojo) §1.2 --- */
  --z-rojo-oscuro: #D4320C;        /* el rojo de marca da 3,41:1 sobre papel: no vale para texto pequeño */
  --z-rojo-claro: #F56C4D;         /* el rojo de marca sobre panel oscuro da 2,84:1 */
  --z-texto-suave-oscuro: #AEAAA5; /* el gris medio sobre panel oscuro da 1,92:1 */
  --z-borde-control: #958D82;      /* WCAG 1.4.11 exige 3:1 en bordes de campo */
  --z-desactivado: #746F69;        /* estado disabled sólido. NUNCA opacity: 0.5 */

  /* --- Capa 1c — fondos que de verdad separan (añadido 09/09/2026) ---
     Diagnóstico de omc.com: su tarjeta es BLANCO PURO sobre un gris de
     sección, y eso da 1,497:1. La nuestra era superficie sobre papel:
     1,044:1 medido, invisible. Se había copiado la regla "separar por fondo"
     sin tener los colores que la sostienen.
     El gris está calculado, no elegido a ojo: mismo contraste que el suyo
     (1,505:1 sobre blanco) pero cálido, como el resto de la paleta (§7 regla 2).
     El tinte sustituye al azul claro de Omnicom, que es SU color secundario de
     marca y Zumer no tiene azul: es el rojo de marca al 12% sobre blanco. */
  --z-gris-seccion: #D5D2CF;   /* 1,505:1 sobre blanco · texto tinta encima 11,64:1 */
  --z-tinte-acento: #FDE9E4;   /* 1,170:1 sobre blanco · texto tinta encima 14,98:1 */

  /* --- Capa 2 — semánticos (lo que se usa al maquetar) §1.3 --- */
  --z-fondo: var(--z-papel);
  --z-fondo-elevado: var(--z-superficie);
  --z-fondo-tarjeta: var(--z-blanco);      /* blanco puro: la tarjeta es el objeto más claro de la página */
  --z-fondo-seccion: var(--z-gris-seccion);
  --z-fondo-acento-suave: var(--z-tinte-acento);
  --z-fondo-inverso: var(--z-gris-oscuro);
  /* Añadido 17/09/2026, patrón de módulos (investigación de wise.com — ver
     sistema_diseno_web.md §4bis). El fondo de PÁGINA (detrás de todo, entre
     un módulo y el siguiente) pasa a blanco puro — no --z-fondo (#F6F6F6,
     que llevaba un tinte cálido apenas perceptible, pensado para cuando la
     página entera era un único lienzo). Con módulos de color flotando y aire
     real entre ellos, ese aire tiene que ser el blanco más neutro posible
     para que se lea como "página", no como una sección más. */
  --z-fondo-pagina: var(--z-blanco);
  --z-texto: var(--z-tinta);
  --z-texto-suave: var(--z-gris-medio);
  --z-texto-inverso: var(--z-blanco);
  --z-texto-suave-inverso: var(--z-texto-suave-oscuro);
  --z-acento: var(--z-rojo);
  --z-acento-texto: var(--z-rojo-oscuro);
  --z-accion-fondo: var(--z-rojo);
  --z-accion-texto: var(--z-blanco);
  --z-accion-fondo-hover: #E4350D;
  --z-accion-fondo-activo: #CF300C;
  --z-acento-inverso: var(--z-rojo-claro);
  /* Rojo de marca a texto muy pequeño (antetítulo, --z-texto-pie): ni
     --z-acento-texto (3,27:1 sobre gris) ni --z-acento-inverso (3,55:1
     sobre oscuro) llegan a 4,5:1 a ese tamaño — verificado y corregido
     tras /impeccable audit 15/09/2026. Mismo tono de marca, más oscuro/
     claro hasta que pasa AA; no se usan fuera de esta etiqueta. */
  --z-acento-texto-pie: #9A2409;      /* 5,30:1 sobre gris, 7,98:1 sobre blanco */
  --z-acento-inverso-pie: #F79078;    /* 4,59:1 sobre el gris oscuro de seccion--inversa */
  /* Añadido 17/09/2026, ronda 2 de pulido: Mario vio el rojo de iconos y
     números de "Por qué no es un bot más" como apagado/pastel. Regla nueva
     (documentada en sistema_diseno_web.md §1.4bis): en un ELEMENTO GRÁFICO
     GRANDE (icono, número ≥24px) se usa el rojo de marca intacto (--z-acento,
     #F24720) porque ahí basta el umbral de 3:1 — pero medido con una
     herramienta de contraste real (no a ojo), el rojo de marca sobre el
     panel oscuro (#423F3C) da solo 2,84:1: NO llega ni al 3:1, así que sobre
     ese fondo sigue sin poder usarse (prohibición ya existente, sin cambiar).
     Este token es la alternativa MÁS VÍVIDA posible que sí pasa 3:1 con
     margen real: mismo matiz y saturación que el rojo de marca (H11°/S89%),
     solo un poco más claro (L60% en vez de L54%) — el mínimo necesario para
     cruzar el umbral, no el punto medio "seguro" que se había usado hasta
     ahora (--z-acento-inverso, L63%, que es el tono que se veía pastel).
     Verificado con script de contraste real (WCAG relative luminance),
     no estimado: 3,28:1. Solo para iconos y números grandes sobre el panel
     oscuro — nunca para texto (eso sigue en --z-acento-inverso-pie, que ya
     estaba cerca de su propio mínimo para 4,5:1 y no tenía margen real para
     volverse más vívido sin fallar AA). */
  --z-acento-inverso-grafico: #F4603E; /* 3,28:1 sobre el panel oscuro — solo iconos/números ≥24px, nunca texto */
  --z-separador: var(--z-linea);
  --z-borde: var(--z-borde-control);
  --z-foco: var(--z-rojo-oscuro);
  --z-foco-inverso: var(--z-blanco);

  /* --- Tipografía §2 — escala base 16px, ratio 1.25 --- */
  --z-fuente-titular: 'Switzer', system-ui, -apple-system, sans-serif;
  --z-fuente-texto: 'Chivo', system-ui, -apple-system, sans-serif;
  /* Tercera familia, añadida 09/09/2026. Switzer y Chivo son dos sans
     geométricas: juntas no crean tensión, y ese contraste de estilo es el
     gesto que da carácter a omc.com (sans + cursiva serif, repetido en toda
     su página). Cormorant Garamond, de Christian Thalmann, licencia SIL OFL
     y cursiva verdadera de tradición renacentista, no una inclinación
     mecánica. Se usa SOLO en los párrafos de apoyo y en las etiquetas de
     cifra: si aparece en más sitios, deja de ser un acento. */
  --z-fuente-cursiva: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* 72px, calcado del titular de omc.com (medido). El peso baja de 800 a 700:
     el tamaño ya jerarquiza, y a 800 el titular grita. 400 —lo que usan
     ellos— habría contradicho el manual de marca, que fija 700/800. */
  --z-texto-display: 72px;  /* Switzer 700 — titular del hero */
  --z-texto-h1: 49px;       /* Switzer 800 */
  --z-texto-h2: 39px;       /* Switzer 800 — titular de sección */
  --z-texto-h3: 31px;       /* Switzer 700 — subsección */
  --z-texto-h4: 25px;       /* Switzer 700 — destacados */
  --z-texto-grande: 20px;   /* Chivo 400 — entradilla */
  --z-texto-cuerpo: 16px;   /* Chivo 400 — texto normal */
  --z-texto-pie: 13px;      /* Chivo 400 — notas, fuentes */

  --z-medida-linea: 65ch;   /* máximo 65-70 caracteres */

  /* Tracking negativo en titulares grandes: omc.com usa -1,32px a 72px, que
     son -0,018em. A tamaño display las letras necesitan apretarse; a tamaño
     de cuerpo, nunca. */
  --z-tracking-titular: -0.018em;

  /* --- Espaciado §3 — múltiplos de 4 --- */
  --z-esp-1: 4px;
  --z-esp-2: 8px;
  --z-esp-3: 12px;
  --z-esp-4: 16px;
  --z-esp-6: 24px;
  --z-esp-8: 32px;
  --z-esp-12: 48px;   /* de aquí en adelante: entre secciones */
  --z-esp-16: 64px;
  --z-esp-24: 96px;
  --z-esp-32: 128px;

  /* Añadido 17/09/2026, patrón de módulos de wise.com. Alias semántico, no un
     número nuevo (§1.3: los componentes usan solo la capa semántica) — el
     aire de página blanca por encima y por debajo de cada módulo de color.
     Wise usa dos magnitudes muy distintas para esto: ~28-30px entre módulos
     que van en la misma fila, y 250-450px entre bloques macro distintos. Ni
     una ni otra encajan aquí: con solo 3 módulos en toda la página (no una
     fila de muchos, ni docenas de bloques), 28px se ve pegado y 300px+ deja
     la página vacía y estirada sin necesidad. --z-esp-16 (64px) ya es un
     escalón real de "entre secciones" en la escala propia de Zumer — se
     reutiliza en vez de injertar el número de Wise sin más. Un paso menos en
     móvil (48px), mismo criterio que el resto del sistema. */
  --z-modulo-gap: var(--z-esp-16);

  /* --- Radios §4 --- */
  --z-radio: 12px;         /* cajas */
  --z-radio-tarjeta: 24px; /* corregido 08/09/2026 (era 20px): curvado algo más marcado, a petición directa */
  --z-radio-boton: 999px;  /* píldora completa, cualquier alto — botones, chips y ahora también campos */
  /* La excepción documentada de §4, que estaba en el documento pero no en el
     código porque nunca se había construido el mockup: imita la burbuja real
     de WhatsApp (esquina inferior del lado del emisor casi recta). */
  --z-radio-chat: 20px 20px 4px;
  /* Añadido 17/09/2026, del patrón de módulos de wise.com (medido con el
     inspector, no a ojo: su nivel de radio pequeño usa clamp(24px,...,30px),
     el grande clamp(32px,...,40px) — dos escalones, no uno). --z-radio-tarjeta
     (24px) ya cubre el escalón pequeño (tarjetas DENTRO de un módulo, como
     .z-tarjeta o .z-chat). Este es el escalón grande, nuevo: el módulo de
     página entera. 40px en vez del clamp() fluido de Wise — mismo motivo que
     ya rige toda la tipografía del sistema (§0/§2): "escalones discretos, no
     clamp() con valores inventados". Un paso menos en móvil (28px), mismo
     punto de corte de 640px que ya usa el resto del sistema. */
  --z-radio-modulo: 40px;

  /* --- Sombras §1.5 (añadido 08/09/2026, revisado el mismo día) ---
     Las tarjetas NO llevan sombra — se distinguen por fondo, no por
     profundidad (§7 regla 5, y así es la referencia de Omnicom). La sombra
     solo sobrevive donde de verdad hace falta separar del fondo: el chip. */
  --z-sombra-chip: 0 2px 6px rgba(66, 63, 60, 0.05), 0 16px 32px rgba(66, 63, 60, 0.08), 0 32px 64px rgba(0, 0, 0, 0.10);

  /* --- Textura de grafito (corregida 08/09/2026, tercera vez) — un
     radial-gradient es matemáticamente liso, nunca puede parecer un pase de
     pincel. La textura real viene de un filtro SVG (feTurbulence: ruido
     fractal de verdad, no color suavizado) codificado como imagen — grano
     genuino, no una mancha de color con los bordes difuminados. Colores fijos
     en hexadecimal porque un data-URI no puede leer variables CSS; están
     calcados a mano de --z-gris-oscuro / --z-gris-medio. */
  --z-chip-textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='100'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='4' seed='11' stitchTiles='stitch' result='r'/%3E%3CfeColorMatrix in='r' type='matrix' values='0 0 0 0 0.42  0 0 0 0 0.40  0 0 0 0 0.38  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Cuarta vuelta (08/09/2026): reabre a propósito el gradiente direccional
     que se había revertido — esta vez calcado con los valores EXACTOS leídos
     del panel de Figma (efecto "Vidrio" + relleno lineal), no aproximados a
     ojo como el "transparent 60%" anterior. Los tres stops y el 40% de
     opacidad son los que Figma reporta tal cual.
     El grano sigue siendo el mismo --z-chip-textura (feTurbulence real):
     Figma generó el suyo con su efecto nativo "Textura" (tamaño 0.4, radio
     30), pero esos parámetros no tienen conversión exacta a SVG, así que se
     mantiene el ruido ya afinado en vez de inventar una traducción falsa.
     El fondo sólido (gris-oscuro / rojo-oscuro) se mantiene DEBAJO del
     gradiente vía background-blend-mode: overlay — igual que antes — para
     que el texto blanco del chip nunca pierda contraste, ni siquiera en el
     extremo derecho donde el gradiente casi llega a blanco. Ir 100% vidrio
     translúcido (sin base sólida) rompería la legibilidad del texto ahí. */
  --z-chip-vidrio:
    linear-gradient(90deg, rgba(62, 62, 62, 0.4) 0%, rgba(182, 181, 181, 0.4) 43%, rgba(245, 245, 245, 0.4) 100%),
    var(--z-chip-textura);
  --z-chip-vidrio-acento:
    linear-gradient(90deg, rgba(212, 50, 12, 0.4) 0%, rgba(182, 181, 181, 0.4) 43%, rgba(245, 245, 245, 0.4) 100%),
    var(--z-chip-textura);

  /* Aproximación del efecto "Vidrio" de Figma (luz a -53°, brillo 80%,
     escarcha 4). Refracción/dispersión (dobla lo que hay detrás) no tiene
     equivalente en CSS plano — se aproxima con un desenfoque de fondo suave
     + un resplandor interior de luz, sin pretender ser una réplica exacta. */
  --z-chip-vidrio-filtro: blur(4px) saturate(135%);
  --z-chip-resplandor-vidrio:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);

  /* --- Foco de campos de formulario (corregido 08/09/2026, tercera vez):
     el token tenía "0 0 0 1px" DUPLICADO con el border real del campo — los
     dos anillos oscuros se sumaban visualmente y se veía más grueso de lo
     que el CSS decía, y en pantallas estrechas el resplandor de 64px llegaba
     a "tocar" el campo de al lado, pareciendo que se solapaban. Quitado el
     anillo duplicado (el borde real ya lo hace) y reducido el alcance
     máximo — sigue siendo blur puro, sin escalones, pero ya no invade al
     vecino. */
  --z-resplandor-foco:
    0 0 12px 1px rgba(242, 71, 32, 0.20),
    0 0 28px 6px rgba(242, 71, 32, 0.13),
    0 0 44px 10px rgba(242, 71, 32, 0.07);

  /* --- Borde del botón secundario (corregido 08/09/2026, tercera vez):
     ya no es un resplandor de luz roja — Mario lo pidió más como el grafito
     del chip, "que parezca una sombra pero no lo sea". Mismos dos lados
     (inset + hacia fuera) pero en tonos grafito, no rojos, y algo más
     opacos que el resplandor rojo que sustituye. */
  --z-resplandor-boton-secundario:
    inset 0 0 0 1px rgba(66, 63, 60, 0.18),
    inset 0 0 14px 2px rgba(66, 63, 60, 0.16),
    0 0 14px 3px rgba(66, 63, 60, 0.22),
    0 0 28px 7px rgba(66, 63, 60, 0.14);
  --z-resplandor-boton-secundario-hover:
    inset 0 0 0 1px rgba(66, 63, 60, 0.26),
    inset 0 0 18px 3px rgba(66, 63, 60, 0.22),
    0 0 18px 4px rgba(66, 63, 60, 0.30),
    0 0 36px 10px rgba(66, 63, 60, 0.18);

  /* --- Movimiento §5 — Material Design, mitad de duración que en móvil --- */
  --z-dur-rapida: 150ms;
  --z-dur-media: 200ms;
  --z-ease-entra: cubic-bezier(0, 0, 0.2, 1);
  --z-ease-sale: cubic-bezier(0.4, 0, 1, 1);
  --z-ease-mueve: cubic-bezier(0.4, 0, 0.2, 1);

  /* Curvas con muelle (16/10/2026): antes solo existían en el registro producto y estaban copiadas a mano en la web.
     Ahora viven aquí, una sola vez, para web y Hub. Muelle: arranca rápido, se pasa un poco y se asienta (fórmula de
     muelle amortiguado, 26/09/2026). Rebote: mismo muelle con más recorrido (10,7 %). Rodillo: sin muelle a propósito,
     para que cada dígito de una cifra se asiente a la vez. Respaldo en cubic-bezier para navegadores sin linear(). */
  --z-ease-rodillo: cubic-bezier(0.16, 1, 0.3, 1);
  --z-ease-resorte: cubic-bezier(0.22, 1, 0.36, 1);
  --z-ease-rebote: cubic-bezier(0.22, 1, 0.36, 1);

  /* Cristal (16/10/2026): lo que la web nueva usa en menú, tarjetas y botones sobre fondo oscuro. */
  --z-cristal: rgba(255, 255, 255, 0.07);
  --z-cristal-fuerte: rgba(255, 255, 255, 0.12);
  --z-cristal-borde: rgba(255, 255, 255, 0.14);
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --z-ease-resorte: linear(0, 0.035, 0.12, 0.234, 0.359, 0.484, 0.601, 0.705, 0.793, 0.865, 0.922, 0.965, 0.996, 1.017, 1.03, 1.036, 1.038, 1.037, 1.034, 1.03, 1.025, 1.02, 1.016, 1.012, 1.008, 1.005, 1.003, 1.002, 1, 0.999, 0.999, 0.999, 1);
    --z-ease-rebote: linear(0, 0.034, 0.121, 0.24, 0.376, 0.515, 0.647, 0.766, 0.867, 0.95, 1.013, 1.058, 1.087, 1.102, 1.107, 1.103, 1.094, 1.081, 1.067, 1.052, 1.038, 1.025, 1.014, 1.006, 0.999, 0.994, 0.991, 0.989, 0.989, 0.989, 0.99, 0.991, 0.993, 0.994, 0.996, 0.997, 0.998, 0.999, 1, 1.001, 1);
  }
}

/* En móvil la escala baja un paso (§2). Escalones discretos, no clamp() inventado. */
@media (max-width: 640px) {
  :root {
    --z-texto-display: 44px;
    --z-texto-h1: 31px;
    --z-texto-h2: 31px;
    --z-texto-h3: 25px;
    --z-texto-h4: 20px;
    --z-radio-modulo: 28px;
    --z-modulo-gap: var(--z-esp-12);
  }
}

/* Añadido 17/09/2026, auditoría visual: el H2 "Un sistema conectado a tu
   agenda..." (80 caracteres, 13 palabras) medido en el navegador — a 31px
   envuelve en 5 líneas a 390px de viewport real (302px de ancho de texto
   disponible dentro del módulo) y en 4 a los ~420-459px de los móviles
   grandes. Un escalón más, solo por debajo de 480px (los móviles donde de
   verdad ocurre el problema — a partir de 460px ya envuelve en 3 líneas con
   el tamaño normal): 25px lo deja en 3 líneas a 390px. Es el mismo valor que
   ya usa --z-texto-h4, no un número inventado. NO resuelve el problema del
   todo en los móviles más estrechos (a 375px sigue en 4 líneas, a 320px en
   5) — bajar más el tamaño para forzar menos líneas ahí dejaría el titular
   desproporcionadamente pequeño frente al resto de H2 de la página; el techo
   real es la longitud del texto, no el CSS. Documentado en marketing/CLAUDE.md. */
@media (max-width: 480px) {
  :root {
    --z-texto-h2: 25px;
  }
}

/* ==========================================================================
   Colores de estado — añadidos 26/09/2026 (spec 2026-09-26-sistema-ui-zumer).
   Valen en los dos registros. Contraste comprobado en hub/tests/unit/contraste.test.ts.
   ========================================================================== */
:root {
  --z-exito-texto: #1D6B3A;
  --z-exito-fondo: #E7F3EB;
  --z-aviso-texto: #855400;
  --z-aviso-fondo: #FBEFD8;
  --z-error-texto: #B2270A;
  --z-error-fondo: #FDE9E4;
  --z-info-texto: #2B5A8A;
  --z-info-fondo: #E6EEF6;
}

/* ==========================================================================
   Registro PRODUCTO (Hub) — añadido 26/09/2026.
   Se activa con <html data-registro="producto">. La landing no lo lleva,
   así que nada de esto cambia su aspecto. Va al final del archivo a propósito:
   con la misma especificidad que :root, gana por orden también en móvil.
   ========================================================================== */
[data-registro="producto"] {
  --z-fondo-pagina: var(--z-papel);
  --z-texto-display: 40px;
  --z-texto-h1: 32px;
  --z-texto-h2: 24px;
  --z-texto-h3: 20px;
  --z-texto-h4: 17px;
  --z-texto-grande: 18px;
  --z-texto-cuerpo: 15px;
  --z-texto-etiqueta: 14px;
  --z-texto-pie: 13px;
  --z-tracking-titular: -0.02em;
  /* Ronda 2 del sistema de UI (26/09/2026): dirección visual elegida por Mario tras comparar
     3 combinaciones de tipografía y una Ronda 1 de movimiento. Documentado en
     docs/superpowers/plans/2026-09-26-sistema-ui-cimientos-y-piezas.md y en el dossier D-01/H-09. */
  --z-fuente-texto: 'Switzer', system-ui, -apple-system, sans-serif; /* antes Chivo: Switzer en todo el registro producto */
  --z-radio-tarjeta: 24px; /* antes 20px: el de la web (16/10) */
  --z-radio-control: 12px; /* antes 10px; la opción del desplegable (control − esp-1) pasa a 8px sola */
  --z-radio-menu: 14px;    /* nuevo: opción (8) + margen interior del menú (6) = esquinas concéntricas */
  --z-sombra-flotante: 0 8px 24px rgba(27, 25, 23, 0.12), 0 2px 6px rgba(27, 25, 23, 0.08);
  --z-sombra-menu:         /* nuevo: más presencia que --z-sombra-flotante, para el menú del desplegable */
    0 16px 40px -12px rgba(27, 25, 23, 0.22),
    0 4px 10px -4px rgba(27, 25, 23, 0.08),
    0 0 0 1px rgba(27, 25, 23, 0.07);
  --z-superposicion: rgba(27, 25, 23, 0.48);

  /* Foco: en tinta neutra (17,5:1 sobre blanco), no en rojo — el rojo queda solo para la acción
     (dossier H-09: la regla general de foco pintaba un contorno naranja sobre todos los controles). */
  --z-foco: var(--z-texto); /* = tinta en claro; en oscuro ya era el mismo color de texto (línea de abajo) */
  --z-halo-foco: color-mix(in srgb, var(--z-texto) 9%, transparent);       /* halo del anillo de foco */
  --z-resalte-opcion: color-mix(in srgb, var(--z-texto) 7%, transparent);  /* píldora del desplegable */

  /* Error de campo: carmín en vez del rojo-error compartido, para no confundirse con el rojo de marca
     del botón (mismo motivo que el foco). Solo lo usa .zp-campo; el resto de "estado=error"
     (Insignia, Aviso, Tabla) sigue con --z-error-texto/-fondo, sin tocar. */
  --z-error-campo-texto: #B4232C; /* 6,53:1 sobre blanco, 6,04:1 sobre la página */
  --z-error-campo-fondo: #FBECEC;
  --z-halo-error-campo: color-mix(in srgb, var(--z-error-campo-texto) 16%, transparent);

  /* Movimiento: salida exponencial para lo que entra/aparece. */
  --z-ease-entra-registro: cubic-bezier(0.22, 1, 0.36, 1);
  --z-dur-larga: 560ms;

  /* Muelle: arranca rápido, se pasa un poco y se asienta. Calculado con la fórmula de un muelle
     amortiguado (26/09/2026), no elegido a ojo. Respaldo en cubic-bezier para navegadores sin linear(). */
  --z-dur-resorte: 420ms;
  /* Rebote: mismo muelle con más recorrido (10,7 %, pedido por Mario tras ver el primero "casi plano") —
     solo para la píldora que sigue a la opción/tema señalados. */
  --z-dur-rebote: 520ms;
  /* Rodillo: el giro de cada dígito de una cifra. Sin muelle a propósito: cada dígito recorre una
     distancia distinta y con rebote se pasaban de forma distinta, la cifra se veía dentada al asentarse. */
  --z-dur-rodillo: 950ms;
}

/* Modo oscuro del Hub (26/09/2026): lo decide data-tema en <html>, que pone el script de
   hub/lib/tema.ts antes de pintar. Por defecto sigue al sistema ("Sistema"); la persona puede
   forzar Claro u Oscuro con el selector. Así la lista de colores oscuros vive en un solo sitio. */
[data-registro="producto"][data-tema="oscuro"] {
  color-scheme: dark;
  --z-fondo: #121110;
  --z-fondo-pagina: #121110;
  --z-fondo-tarjeta: #1C1A18;
  --z-fondo-elevado: #26231F;
  --z-fondo-seccion: #1C1A18;
  --z-fondo-acento-suave: #2E1712;
  --z-texto: #F2F0ED;
  --z-texto-suave: #A8A29B;
  --z-separador: #34302C;
  --z-borde: #7A736B;
  --z-acento-texto: #F56C4D;
  --z-foco: #F2F0ED;
  --z-exito-texto: #7BD39A;
  --z-exito-fondo: #17271D;
  --z-aviso-texto: #F2C16B;
  --z-aviso-fondo: #2B2213;
  --z-error-texto: #F79078;
  --z-error-fondo: #2E1712;
  --z-info-texto: #8DB8E6;
  --z-info-fondo: #152230;
  --z-sombra-flotante: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  --z-sombra-menu: 0 16px 40px -12px rgba(0, 0, 0, 0.6), 0 4px 10px -4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --z-superposicion: rgba(0, 0, 0, 0.6);
  --z-halo-foco: color-mix(in srgb, var(--z-texto) 14%, transparent);
  --z-resalte-opcion: color-mix(in srgb, var(--z-texto) 9%, transparent);
  /* 7,13:1 sobre la tarjeta oscura, 6,99:1 sobre su fondo. */
  --z-error-campo-texto: #F2878E;
  --z-error-campo-fondo: #2C1618;
  --z-halo-error-campo: color-mix(in srgb, var(--z-error-campo-texto) 22%, transparent);
}