/* =============================================================================
   TOKENS — Solo en calma
   El único origen de valores del tema hijo. Todo lo demás (base.css, panel.css,
   aula, carrito, pago y mi cuenta) consume var(--sc-*) y nunca escribe un valor
   de marca a mano.

   Origen: _contexto/diseno/01-sistema-de-diseno/project/tokens/
   (tokens.json · divi-global-variables.json · color, espacio, tipografia,
   forma, elevacion y movimiento). Si un valor cambia allí, cambia aquí.

   Este archivo NO lee ninguna variable de Divi (--gcid-* / --gvid-*). Divi y el
   tema hijo beben del mismo origen por separado: el panel no se acopla nunca a
   la salida CSS del constructor.

   Cuatro capas, en este orden:
     1. Primitivos      — los valores en bruto. Nadie los usa directamente salvo
                          para definir la capa 2.
     2. Semántica clara — los roles. Siempre var() a un primitivo.
     3. Tema oscuro     — reasignado a mano, no invertido. Sin conmutador aún.
     4. Alias del panel — nombres de uso diario.

   Dos convenciones del archivo:
   - Los velos y capas translúcidas se derivan con color-mix() del primitivo que
     tintan, para no repetir canales de un color de marca.
   - Las sombras se declaran literales: son valores compuestos y calibrados a
     mano, no una derivación de nada.

   REGLAS DURAS heredadas del sistema, que este archivo no puede romper:
   - --sc-marron-500 (#C08A55, el pelaje del símbolo) es relleno decorativo.
     Nunca texto, nunca un borde que deba verse: da 2,72 sobre crema y falla en
     todo. El marrón que se lee es --sc-marron-700.
   - Prohibido el verde de semáforo (#22C55E) y el rojo de error (#EF4444).
     Aquí confirmar es oliva y lo más grave es óxido, nunca alarma.
   - No hay tokens de precio ni de plazo. Esos valores no viven en el CSS.
   ========================================================================== */


/* =============================================================================
   1 · PRIMITIVOS
   ========================================================================== */

:root{

  /* --- Color · rampa marrón (familia de marca) ---------------------------- */
  /* El comentario de cada peldaño es su ratio WCAG 2.1 calculado, no estimado. */
  --sc-marron-50:#FDFAF4;    /* superficie elevada · tinta encima 12,28 */
  --sc-marron-100:#FAF3E7;   /* CREMA de marca · fondo de página · tinta encima 11,60 */
  --sc-marron-150:#F4E9D8;   /* superficie hundida · tinta encima 10,66 */
  --sc-marron-200:#EDDCC7;   /* borde sutil · decorativo, 1,22 sobre crema */
  --sc-marron-300:#E0C4A5;   /* borde normal · decorativo, 1,51 · texto 2.º en oscuro 9,91 */
  --sc-marron-400:#CDA175;   /* relleno decorativo · texto 3.º en oscuro 7,03 */
  --sc-marron-500:#C08A55;   /* PELAJE · SOLO relleno decorativo · 2,72: nunca texto ni borde */
  --sc-marron-600:#A9723F;   /* SOMBRA de marca · borde fuerte 3,69 ✓UI · no texto normal */
  --sc-marron-700:#916236;   /* MARRÓN LEGIBLE · 4,75 sobre crema ✓AA · blanco encima 5,24 ✓AA */
  --sc-marron-800:#6A4329;   /* texto secundario · 7,78 sobre crema ✓AAA */
  --sc-marron-900:#4A2A1E;   /* TINTA de marca · 11,60 sobre crema ✓AAA */
  --sc-marron-950:#2E1A12;   /* fondo oscuro · crema encima 14,96 */
  --sc-marron-1000:#241009;  /* fondo oscuro hundido · crema encima 16,51 */

  /* --- Color · acento (terracota) ----------------------------------------- */
  --sc-acento-100:#F6E7E0;   /* superficie tintada · tinta encima 10,2 */
  --sc-acento-200:#E9C4B7;
  --sc-acento-300:#D89A85;   /* texto y anillo de foco en oscuro · 7,14 sobre marrón 950 */
  --sc-acento-400:#C0705A;   /* relleno decorativo */
  --sc-acento-500:#A8503A;   /* ACENTO · blanco encima 5,42 ✓AA · 4,92 sobre crema ✓AA */
  --sc-acento-600:#8F4530;   /* hover y pulsado · 6,22 sobre crema */
  --sc-acento-700:#753827;   /* pulsado profundo y bordes de acento */
  --sc-acento-900:#472016;

  /* --- Color · derivación (óxido profundo) -------------------------------- */
  /* Es el tono de lo más grave del sistema y aun así NO es una alarma:
     «detente y busca apoyo», no «error». */
  --sc-derivacion-100:#F5E4DD;
  --sc-derivacion-300:#D27661; /* oscuro · 5,11 ✓AA */
  --sc-derivacion-500:#8C3B28; /* blanco encima 7,58 ✓AAA · 6,87 sobre crema ✓AA */
  --sc-derivacion-600:#762F1F;

  /* --- Color · aviso (ámbar oscuro) --------------------------------------- */
  --sc-aviso-100:#F8EDD8;
  --sc-aviso-300:#C48026;    /* oscuro · 5,08 ✓AA */
  --sc-aviso-500:#8A5A1B;    /* blanco encima 5,90 ✓AA · 5,35 sobre crema ✓AA */
  --sc-aviso-600:#6F4715;

  /* --- Color · confirmación (oliva) --------------------------------------- */
  /* Oliva, nunca verde de semáforo: aquí el progreso es lento y a veces retrocede. */
  --sc-confirmacion-100:#EAEFDF;
  --sc-confirmacion-300:#7C9952; /* oscuro · 5,14 ✓AA */
  --sc-confirmacion-500:#4F6134; /* blanco encima 6,79 ✓AA · 6,16 sobre crema ✓AA */
  --sc-confirmacion-600:#3F4E29;
  --sc-oliva-calido:#768A48;     /* solo existe translúcido: zona segura del gráfico de umbral */

  /* --- Color · información (azul apagado) --------------------------------- */
  --sc-info-100:#E7EAEB;     /* tinte cálido-neutro: el azul se mantiene muy contenido */
  --sc-info-300:#6B93AC;     /* oscuro · 5,02 ✓AA */
  --sc-info-500:#3D5A6C;     /* blanco encima 7,30 ✓AAA · 6,62 sobre crema ✓AA */
  --sc-info-600:#314857;

  /* --- Color · neutro absoluto -------------------------------------------- */
  --sc-blanco:#FFFFFF;

  /* --- Nombres de marca --------------------------------------------------- */
  /* Los cuatro colores que la marca nombra en voz alta. Son la misma rampa. */
  --sc-marca-crema:var(--sc-marron-100);
  --sc-marca-tinta:var(--sc-marron-900);
  --sc-marca-pelaje:var(--sc-marron-500);  /* decorativo: ver regla dura de la cabecera */
  --sc-marca-sombra:var(--sc-marron-600);

  /* --- Espacio · escala base 4 -------------------------------------------- */
  --sc-espacio-0:0;
  --sc-espacio-05:2px;
  --sc-espacio-1:4px;
  --sc-espacio-15:6px;
  --sc-espacio-2:8px;
  --sc-espacio-3:12px;
  --sc-espacio-4:16px;
  --sc-espacio-5:20px;
  --sc-espacio-6:24px;
  --sc-espacio-8:32px;
  --sc-espacio-10:40px;
  --sc-espacio-12:48px;
  --sc-espacio-16:64px;
  --sc-espacio-20:80px;
  --sc-espacio-24:96px;
  --sc-espacio-32:128px;

  /* --- Anchos y márgenes de página ---------------------------------------- */
  --sc-ancho-contenido:1180px;
  --sc-ancho-estrecho:720px;
  --sc-ancho-lectura:680px;
  --sc-ancho-formulario:520px;
  --sc-margen-pagina:clamp(20px,5vw,64px);
  --sc-margen-pagina-movil:20px;

  /* --- Objetivo táctil ----------------------------------------------------- */
  /* No negociable: el tutor usa esto de noche, de pie y con una mano. */
  --sc-toque-minimo:44px;
  --sc-toque-comodo:48px;

  /* --- Forma · radios ------------------------------------------------------ */
  /* Generosos pero nunca circulares en contenedores: la diferencia entre
     acogedor y de guardería está en la proporción. */
  --sc-radio-xs:4px;
  --sc-radio-s:8px;
  --sc-radio-m:12px;
  --sc-radio-l:18px;
  --sc-radio-xl:26px;
  --sc-radio-2xl:34px;
  --sc-radio-pildora:999px;
  --sc-radio-circulo:50%;

  /* --- Forma · trazos ------------------------------------------------------ */
  --sc-trazo-fino:1px;
  --sc-trazo-normal:1.5px;
  --sc-trazo-icono:2.25px;
  --sc-trazo-grueso:3px;
  --sc-trazo-marca:4px;      /* el contorno del símbolo es la referencia */
  --sc-trazo-foco:2px;
  --sc-desplazamiento-foco:2px;
  --sc-tapa-trazo:round;     /* terminaciones siempre redondeadas, como el símbolo */
  --sc-union-trazo:round;

  /* --- Elevación · sombras cálidas ---------------------------------------- */
  /* Tinte marrón, nunca negro puro. Cuatro niveles y para. */
  --sc-sombra-0:none;
  --sc-sombra-1:0 1px 2px rgba(74,42,30,.06),0 1px 1px rgba(74,42,30,.04);
  --sc-sombra-2:0 2px 4px rgba(74,42,30,.06),0 6px 16px rgba(74,42,30,.06);
  --sc-sombra-3:0 8px 24px rgba(74,42,30,.10),0 2px 6px rgba(74,42,30,.06);
  --sc-sombra-4:0 24px 60px rgba(74,42,30,.18),0 4px 12px rgba(74,42,30,.08);
  --sc-sombra-interior:inset 0 1px 2px rgba(74,42,30,.08);
  --sc-sombra-acento:0 6px 18px rgba(168,80,58,.22);

  /* --- Velos ---------------------------------------------------------------*/
  /* El sistema prefiere una cápsula legible a un degradado de protección.
     El degradado solo se usa sobre fotogramas de vídeo. */
  --sc-velo-video:linear-gradient(to top,rgba(46,26,18,.72) 0%,rgba(46,26,18,.34) 42%,rgba(46,26,18,0) 100%);
  --sc-desenfoque-capsula:blur(10px) saturate(.9);

  /* --- Movimiento · duraciones -------------------------------------------- */
  /* El movimiento baja el pulso, no lo sube. Nada supera los 400 ms salvo la
     respiración, que es decorativa y opcional. */
  --sc-dur-instante:90ms;
  --sc-dur-rapida:160ms;
  --sc-dur-normal:240ms;
  --sc-dur-calma:400ms;
  --sc-dur-respiracion:3600ms;  /* pulso lento del símbolo en pantallas de espera */

  /* --- Movimiento · curvas ------------------------------------------------- */
  /* Sin rebotes, sin elásticos, sin nada que celebre. */
  --sc-ease-entrada:cubic-bezier(0,0,.24,1);
  --sc-ease-salida:cubic-bezier(.4,0,1,1);
  --sc-ease-suave:cubic-bezier(.32,.72,0,1);
  --sc-ease-calma:cubic-bezier(.4,.14,.3,1);
  --sc-desplazamiento-entrada:6px;  /* lo que sube un panel al aparecer */
  --sc-escala-pulsada:.985;         /* el press hunde muy poco */

  /* --- Tipografía · familias ----------------------------------------------- */
  /* Fraunces carga la autoridad; Nunito Sans carga la lectura. Ambas variables,
     subconjuntadas a latin + latin-ext y autoalojadas: los @font-face viven en
     fuentes.css, que se encola antes que este archivo. Nunca Google Fonts (RGPD).
     Fredoka no participa: el logotipo se sirve como SVG. */
  --sc-fuente-display:"Fraunces",Georgia,"Times New Roman",serif;
  --sc-fuente-lectura:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sc-fuente-numeros:var(--sc-fuente-lectura);
  /* Monoespaciada: se resuelve con la pila del sistema operativo. No se
     descarga ninguna fuente de terceros para esto (RGPD). */
  --sc-fuente-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* --- Tipografía · ejes variables de Fraunces ----------------------------- */
  /* SOFT dosifica la calidez; WONK, la excentricidad. */
  --sc-ejes-calido:"SOFT" 60,"WONK" 0;     /* titulares de marca */
  --sc-ejes-sobrio:"SOFT" 25,"WONK" 0;     /* titulares de informe y datos */
  --sc-ejes-editorial:"SOFT" 45,"WONK" 1;  /* citas y portadas impresas */

  /* --- Tipografía · escala --------------------------------------------------*/
  /* Los clamp() reales, con su mínimo y su máximo. El panel los usa tal cual:
     aquí no hay editor visual que mienta sobre el tamaño renderizado. */
  --sc-tipo-display-1:clamp(2.5rem,1.60rem + 3.6vw,4rem);       /* 40 → 64 */
  --sc-tipo-display-2:clamp(2rem,1.45rem + 2.2vw,3rem);         /* 32 → 48 */
  --sc-tipo-display-3:clamp(1.625rem,1.30rem + 1.3vw,2.25rem);  /* 26 → 36 */
  --sc-tipo-titulo-1:clamp(1.375rem,1.20rem + 0.7vw,1.75rem);   /* 22 → 28 */
  --sc-tipo-titulo-2:1.25rem;      /* 20 · fijo a propósito */
  --sc-tipo-titulo-3:1.0625rem;    /* 17 */
  --sc-tipo-leccion:1.1875rem;     /* 19 · cuerpo de lección, AAA sobre crema */
  --sc-tipo-cuerpo:1.0625rem;      /* 17 · cuerpo por defecto */
  --sc-tipo-cuerpo-s:0.9375rem;    /* 15 · densidad alta, tablas */
  --sc-tipo-nota:0.8125rem;        /* 13 · notas legales, metadatos */
  --sc-tipo-etiqueta:0.75rem;      /* 12 · versalitas con tracking. Nunca menos */

  /* --- Tipografía · pesos que se cargan. Ninguno más ------------------------ */
  --sc-peso-regular:400;
  --sc-peso-medio:500;             /* solo Nunito Sans */
  --sc-peso-semi:600;
  --sc-peso-fuerte:700;

  /* --- Tipografía · interlínea ---------------------------------------------- */
  --sc-linea-display:1.08;
  --sc-linea-titulo:1.24;
  --sc-linea-cuerpo:1.6;
  --sc-linea-leccion:1.72;         /* textos largos de lección */
  --sc-linea-compacta:1.35;

  /* --- Tipografía · tracking ------------------------------------------------ */
  --sc-tracking-display:-0.021em;
  --sc-tracking-titulo:-0.012em;
  --sc-tracking-cuerpo:0;
  --sc-tracking-etiqueta:0.12em;
  --sc-tracking-eslogan:0.28em;    /* «OBSERVAR ANTES DE ENTRENAR» del logotipo */

  /* --- Tipografía · longitud de línea -------------------------------------- */
  --sc-medida-leccion:62ch;
  --sc-medida-lectura:66ch;
  --sc-medida-corta:44ch;          /* entradillas, tarjetas */
  --sc-medida-dato:22ch;
}


/* =============================================================================
   2 · SEMÁNTICA — tema claro (por defecto)
   Aquí no aparece ni un hexadecimal: todo apunta a un primitivo.
   ========================================================================== */

:root,
[data-tema="claro"]{
  color-scheme:light;

  /* --- Superficies ---------------------------------------------------------- */
  --sc-color-superficie:var(--sc-marron-100);
  --sc-color-superficie-elevada:var(--sc-marron-50);
  --sc-color-superficie-hundida:var(--sc-marron-150);
  --sc-color-superficie-sobre-superficie:var(--sc-blanco);
  --sc-color-superficie-inversa:var(--sc-marron-950);
  --sc-color-superficie-tintada:var(--sc-acento-100);
  --sc-color-superficie-velo:color-mix(in srgb,var(--sc-marron-900) 42%,transparent);

  /* --- Tinta ----------------------------------------------------------------*/
  --sc-color-tinta:var(--sc-marron-900);              /* 11,60 ✓AAA */
  --sc-color-tinta-suave:var(--sc-marron-800);        /*  7,78 ✓AAA */
  --sc-color-tinta-tenue:var(--sc-marron-700);        /*  4,75 ✓AA  */
  --sc-color-tinta-sobre-acento:var(--sc-blanco);     /*  5,42 sobre acento ✓AA */
  --sc-color-tinta-sobre-inversa:var(--sc-marron-100);/* 14,96 ✓AAA */
  --sc-color-tinta-inactiva:var(--sc-marron-600);     /*  3,69 — texto inactivo, exento */
  --sc-color-enlace:var(--sc-acento-500);
  --sc-color-enlace-hover:var(--sc-acento-600);
  --sc-color-enlace-visitado:var(--sc-marron-800);

  /* --- Bordes y foco --------------------------------------------------------*/
  --sc-color-borde-sutil:var(--sc-marron-200);
  --sc-color-borde:var(--sc-marron-300);
  --sc-color-borde-fuerte:var(--sc-marron-600);       /* 3,69 ✓UI */
  --sc-color-borde-campo:var(--sc-marron-600);        /* 3,69 ✓UI */
  --sc-color-borde-campo-hover:var(--sc-marron-700);
  --sc-color-borde-acento:var(--sc-acento-500);
  --sc-color-foco:var(--sc-acento-500);               /* 4,92 sobre crema ✓ */
  --sc-color-foco-halo:color-mix(in srgb,var(--sc-acento-500) 22%,transparent);

  /* --- Acción ---------------------------------------------------------------*/
  --sc-color-accion:var(--sc-acento-500);
  --sc-color-accion-hover:var(--sc-acento-600);
  --sc-color-accion-pulsada:var(--sc-acento-700);
  --sc-color-accion-inactiva:var(--sc-marron-300);
  --sc-color-accion-tinta-inactiva:var(--sc-marron-600);
  --sc-capa-hover:color-mix(in srgb,var(--sc-marron-900) 6%,transparent);
  --sc-capa-pulsada:color-mix(in srgb,var(--sc-marron-900) 12%,transparent);
  --sc-capa-seleccion:color-mix(in srgb,var(--sc-acento-500) 10%,transparent);

  /* --- Tonos de estado ------------------------------------------------------*/
  /* Cuatro tonos, cada uno con superficie, borde y texto. El color nunca es el
     único portador: el componente lleva siempre texto y forma además del tono. */
  --sc-color-derivacion-superficie:var(--sc-derivacion-100);
  --sc-color-derivacion-borde:var(--sc-derivacion-500);
  --sc-color-derivacion-texto:var(--sc-derivacion-500);
  --sc-color-aviso-superficie:var(--sc-aviso-100);
  --sc-color-aviso-borde:var(--sc-aviso-500);
  --sc-color-aviso-texto:var(--sc-aviso-500);
  --sc-color-confirmacion-superficie:var(--sc-confirmacion-100);
  --sc-color-confirmacion-borde:var(--sc-confirmacion-500);
  --sc-color-confirmacion-texto:var(--sc-confirmacion-500);
  --sc-color-info-superficie:var(--sc-info-100);
  --sc-color-info-borde:var(--sc-info-500);
  --sc-color-info-texto:var(--sc-info-500);

  /* --- Curva de umbral (activo visual de la marca) -------------------------- */
  --sc-color-umbral-linea:var(--sc-acento-500);
  --sc-color-umbral-punto:var(--sc-marron-900);
  --sc-color-umbral-zona-segura:color-mix(in srgb,var(--sc-oliva-calido) 20%,transparent);
  --sc-color-umbral-zona-borde:color-mix(in srgb,var(--sc-confirmacion-500) 42%,transparent);
  --sc-color-umbral-retroceso:var(--sc-marron-600);   /* un retroceso NUNCA es rojo */
  --sc-color-umbral-rejilla:var(--sc-marron-200);
  --sc-color-umbral-eje:var(--sc-marron-700);
  /* Banda de intensidad: pelaje al 25 %. Es el unico uso legitimo de
     --sc-marron-500, que solo puede ser relleno decorativo y nunca texto. */
  --sc-color-umbral-banda-intensidad:color-mix(in srgb,var(--sc-marron-500) 25%,transparent);

  /* --- Elevación dependiente del tema --------------------------------------- */
  --sc-capsula-fondo:color-mix(in srgb,var(--sc-marron-950) 72%,transparent);
  /* Doble anillo: primero el color de la página para despegarlo del fondo,
     después el anillo de foco. Se recompone solo al cambiar de tema. */
  --sc-sombra-foco:0 0 0 var(--sc-trazo-foco) var(--sc-color-superficie),
                   0 0 0 calc(var(--sc-trazo-foco) + 2px) var(--sc-color-foco);
}


/* =============================================================================
   3 · TEMA OSCURO
   Reasignado a mano, no una inversión automática: se conserva la calidez del
   marrón y ninguna superficie es gris neutro. Los valores vienen tal cual del
   sistema, incluidas las sombras recalculadas.

   No hay conmutador en la interfaz ni auditoría en oscuro: el bloque existe
   para que el día que se exponga el tema no haya que reabrir esta capa.
   ========================================================================== */

[data-tema="oscuro"]{
  color-scheme:dark;

  /* --- Primitivos exclusivos del tema oscuro -------------------------------- */
  /* Diez valores que no existen en la rampa clara: son escalones intermedios
     calculados para este fondo concreto. */
  --sc-noche-negro:#140805;          /* base de sombras y velos del tema oscuro */
  --sc-noche-superficie-1:#382217;   /* crema encima 13,51 */
  --sc-noche-superficie-2:#41291B;   /* crema encima 12,22 */
  --sc-noche-superficie-3:#4E2A1F;   /* crema encima 11,3 */
  --sc-noche-borde:#54351F;
  --sc-noche-derivacion:#4A2419;     /* crema encima 12,22 */
  --sc-noche-aviso:#4A2D15;
  --sc-noche-confirmacion:#33351F;
  --sc-noche-info:#2C333B;
  --sc-noche-accion-hover:#B85B43;
  --sc-noche-enlace-hover:#E4B4A2;

  /* --- Superficies ---------------------------------------------------------- */
  --sc-color-superficie:var(--sc-marron-950);
  --sc-color-superficie-elevada:var(--sc-noche-superficie-1);
  --sc-color-superficie-hundida:var(--sc-marron-1000);
  --sc-color-superficie-sobre-superficie:var(--sc-noche-superficie-2);
  --sc-color-superficie-inversa:var(--sc-marron-100);
  --sc-color-superficie-tintada:var(--sc-noche-superficie-3);
  --sc-color-superficie-velo:color-mix(in srgb,var(--sc-noche-negro) 62%,transparent);

  /* --- Tinta ----------------------------------------------------------------*/
  --sc-color-tinta:var(--sc-marron-100);              /* 14,96 ✓AAA */
  --sc-color-tinta-suave:var(--sc-marron-300);        /*  9,91 ✓AAA */
  --sc-color-tinta-tenue:var(--sc-marron-400);        /*  7,03 ✓AAA */
  --sc-color-tinta-sobre-acento:var(--sc-marron-100); /*  4,92 sobre acento 500 ✓AA */
  --sc-color-tinta-sobre-inversa:var(--sc-marron-900);
  --sc-color-tinta-inactiva:var(--sc-marron-600);     /*  4,05 */
  --sc-color-enlace:var(--sc-acento-300);             /*  7,14 ✓AAA */
  --sc-color-enlace-hover:var(--sc-noche-enlace-hover);
  --sc-color-enlace-visitado:var(--sc-marron-400);

  /* --- Bordes y foco --------------------------------------------------------*/
  --sc-color-borde-sutil:var(--sc-noche-superficie-2);
  --sc-color-borde:var(--sc-noche-borde);
  --sc-color-borde-fuerte:var(--sc-marron-700);       /* 3,15 sobre página ✓UI */
  --sc-color-borde-campo:var(--sc-marron-700);        /* 3,15 ✓UI */
  --sc-color-borde-campo-hover:var(--sc-marron-600);
  --sc-color-borde-acento:var(--sc-acento-300);
  --sc-color-foco:var(--sc-acento-300);               /* 7,14 ✓ */
  --sc-color-foco-halo:color-mix(in srgb,var(--sc-acento-300) 26%,transparent);

  /* --- Acción ---------------------------------------------------------------*/
  --sc-color-accion:var(--sc-acento-500);             /* 3,04 sobre página ✓UI */
  --sc-color-accion-hover:var(--sc-noche-accion-hover);
  --sc-color-accion-pulsada:var(--sc-acento-600);
  --sc-color-accion-inactiva:var(--sc-noche-superficie-2);
  --sc-color-accion-tinta-inactiva:var(--sc-marron-600);
  --sc-capa-hover:color-mix(in srgb,var(--sc-marron-100) 7%,transparent);
  --sc-capa-pulsada:color-mix(in srgb,var(--sc-marron-100) 13%,transparent);
  --sc-capa-seleccion:color-mix(in srgb,var(--sc-acento-300) 16%,transparent);

  /* --- Tonos de estado ------------------------------------------------------*/
  --sc-color-derivacion-superficie:var(--sc-noche-derivacion);
  --sc-color-derivacion-borde:var(--sc-derivacion-300);
  --sc-color-derivacion-texto:var(--sc-derivacion-300);      /* 5,11 ✓AA */
  --sc-color-aviso-superficie:var(--sc-noche-aviso);
  --sc-color-aviso-borde:var(--sc-aviso-300);
  --sc-color-aviso-texto:var(--sc-aviso-300);                /* 5,08 ✓AA */
  --sc-color-confirmacion-superficie:var(--sc-noche-confirmacion);
  --sc-color-confirmacion-borde:var(--sc-confirmacion-300);
  --sc-color-confirmacion-texto:var(--sc-confirmacion-300);  /* 5,14 ✓AA */
  --sc-color-info-superficie:var(--sc-noche-info);
  --sc-color-info-borde:var(--sc-info-300);
  --sc-color-info-texto:var(--sc-info-300);                  /* 5,02 ✓AA */

  /* --- Curva de umbral ------------------------------------------------------ */
  --sc-color-umbral-linea:var(--sc-acento-300);
  --sc-color-umbral-punto:var(--sc-marron-100);
  --sc-color-umbral-zona-segura:color-mix(in srgb,var(--sc-confirmacion-300) 18%,transparent);
  --sc-color-umbral-zona-borde:color-mix(in srgb,var(--sc-confirmacion-300) 44%,transparent);
  --sc-color-umbral-retroceso:var(--sc-marron-400);
  --sc-color-umbral-rejilla:var(--sc-noche-superficie-2);
  --sc-color-umbral-eje:var(--sc-marron-400);
  --sc-color-umbral-banda-intensidad:color-mix(in srgb,var(--sc-marron-400) 22%,transparent);

  /* --- Elevación recalculada ------------------------------------------------ */
  /* Sobre fondo oscuro una sombra clara no se ve: sube la opacidad y baja el
     tinte al negro cálido. No es la sombra clara con otro alfa. */
  --sc-sombra-1:0 1px 2px rgba(20,8,5,.40);
  --sc-sombra-2:0 2px 4px rgba(20,8,5,.36),0 6px 16px rgba(20,8,5,.34);
  --sc-sombra-3:0 8px 24px rgba(20,8,5,.46),0 2px 6px rgba(20,8,5,.32);
  --sc-sombra-4:0 24px 60px rgba(20,8,5,.62),0 4px 12px rgba(20,8,5,.42);
  --sc-sombra-interior:inset 0 1px 2px rgba(20,8,5,.44);
  --sc-sombra-acento:0 6px 18px rgba(20,8,5,.50);
  --sc-capsula-fondo:color-mix(in srgb,var(--sc-noche-negro) 74%,transparent);
}


/* =============================================================================
   4 · ALIAS DEL PANEL
   Los nombres que se escriben a diario en panel.css, aula.css y las pantallas
   de carrito, pago y mi cuenta. Todos resuelven contra las capas anteriores, así
   que siguen al tema sin redeclararse.
   ========================================================================== */

:root{

  /* --- Espacio semántico ---------------------------------------------------- */
/* Espaciado fluido: los mismos clamp() que las Global Variables de Divi, para que el
   panel y las páginas públicas no acaben con dos escalas distintas. El máximo de cada
   clamp es el valor fijo que traía el sistema de diseño; el mínimo se deriva de él. */
  --sc-espacio-linea:clamp(3px, 0.2vw + 2px, 4px);            /* entre líneas de una misma idea */
  --sc-espacio-elemento:clamp(6px, 0.4vw + 4px, 8px);         /* icono ↔ etiqueta */
  --sc-espacio-grupo:clamp(12px, 0.8vw + 8px, 16px);            /* campos de un mismo grupo */
  --sc-espacio-bloque:clamp(16px, 1vw + 12px, 24px);           /* párrafos, filas de lista */
  --sc-espacio-componente:clamp(24px, 1.5vw + 16px, 32px);       /* entre componentes */
  --sc-espacio-seccion:clamp(40px, 4vw + 24px, 64px);         /* entre secciones de página */
  --sc-espacio-seccion-amplia:clamp(56px, 5vw + 32px, 96px);
  --sc-espacio-pagina:clamp(72px, 7vw + 40px, 128px);

  /* --- Retícula -------------------------------------------------------------- */
  --sc-canal:var(--sc-espacio-6);
  --sc-canal-amplio:var(--sc-espacio-8);

  /* --- Relleno interno ------------------------------------------------------- */
  /* El campo no usa la escala: 14px verticales son los que dejan el campo en 48
     de alto con el cuerpo de 17. */
  --sc-relleno-campo:14px 16px;
  --sc-relleno-boton-s:8px 14px;
  --sc-relleno-boton-m:12px 20px;
  --sc-relleno-boton-l:16px 28px;
  --sc-relleno-tarjeta:var(--sc-espacio-6);
  --sc-relleno-tarjeta-amplia:var(--sc-espacio-8);
  --sc-relleno-panel:var(--sc-espacio-8);

  /* --- Radios por componente -------------------------------------------------*/
  --sc-radio-campo:var(--sc-radio-m);
  --sc-radio-boton:var(--sc-radio-m);
  --sc-radio-tarjeta:var(--sc-radio-l);
  --sc-radio-panel:var(--sc-radio-xl);
  --sc-radio-modal:var(--sc-radio-xl);
  --sc-radio-distintivo:var(--sc-radio-pildora); /* la píldora es solo para distintivos,
                                                    etiquetas y fichas: nunca tarjetas */
  --sc-radio-avatar:var(--sc-radio-circulo);

  /* --- Sombras por rol -------------------------------------------------------*/
  --sc-sombra-tarjeta:var(--sc-sombra-1);
  --sc-sombra-elevada:var(--sc-sombra-2);
  --sc-sombra-flotante:var(--sc-sombra-3);   /* menús, desplegables, emergentes */
  --sc-sombra-modal:var(--sc-sombra-4);
  --sc-sombra-campo:var(--sc-sombra-interior);

  /* --- Transiciones compuestas ---------------------------------------------- */
  --sc-transicion-rapida:var(--sc-dur-rapida) var(--sc-ease-entrada);
  --sc-transicion-normal:var(--sc-dur-normal) var(--sc-ease-suave);
  --sc-transicion-calma:var(--sc-dur-calma) var(--sc-ease-calma);
  --sc-transicion-salida:var(--sc-dur-rapida) var(--sc-ease-salida);

  /* --- Texto: vocabulario de los mockups ------------------------------------ */
  /* Los mockups del panel hablan de primario/secundario/terciario; el sistema
     y Divi hablan de tinta. Son lo mismo. */
  --sc-texto-primario:var(--sc-color-tinta);
  --sc-texto-secundario:var(--sc-color-tinta-suave);
  --sc-texto-terciario:var(--sc-color-tinta-tenue);

  /* --- Tonos del distintivo -------------------------------------------------- */
  /* El distintivo admite seis tonos: neutro · acento · confirmacion · aviso ·
     derivacion · info. Los cuatro últimos ya son los tríos
     --sc-color-{confirmacion|aviso|derivacion|info}-*; aquí solo faltan estos dos.

     Los siete estados del caso (creado, esperando_video, en_cola, en_revision,
     informe_entregado, cerrado, derivado) se pintan con estos tonos, pero el
     mapeo estado → tono es del componente, no de este archivo. Del sistema solo
     vienen fijados dos: informe_entregado es confirmacion y derivado es
     derivacion. Derivado nunca es rojo ni alarma. */
  --sc-color-neutro-superficie:var(--sc-color-superficie-hundida);
  --sc-color-neutro-borde:var(--sc-color-borde);
  --sc-color-neutro-texto:var(--sc-color-tinta-tenue);
  --sc-color-acento-superficie:var(--sc-color-superficie-tintada);
  --sc-color-acento-borde:var(--sc-acento-500);
  --sc-color-acento-texto:var(--sc-acento-500);
}


/* =============================================================================
   5 · MOVIMIENTO REDUCIDO
   Se anulan las duraciones en el propio token, así que cualquier transición
   escrita con var(--sc-dur-*) o var(--sc-transicion-*) queda neutralizada sin
   tocar el componente.

   La red de seguridad universal va aquí y no en base.css porque base.css solo
   se encola en las pantallas de aplicación, mientras que este archivo se carga
   en todo el sitio, incluidas las páginas públicas montadas con el constructor.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  :root{
    --sc-dur-instante:1ms;
    --sc-dur-rapida:1ms;
    --sc-dur-normal:1ms;
    --sc-dur-calma:1ms;
    --sc-dur-respiracion:1ms;
    --sc-desplazamiento-entrada:0px;
    --sc-escala-pulsada:1;
  }

  *,
  *::before,
  *::after{
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    scroll-behavior:auto!important;
  }
}