/**
 * Los dos skins.
 *
 * Va DESPUÉS de app.css y ANTES de las variables que inyecta Identidad. Lo que hace es
 * redefinir los tokens que hoy salen de `ServicioIdentidad::variablesCss()` más un puñado
 * de tokens nuevos que app.css todavía no tiene —radio, elevación, barra y colores de
 * certificación—, porque un skin no es solo una paleta: es también si la profundidad se
 * consigue con sombra o con borde, y si el radio es de 12 px o de 3.
 *
 * El orden importa y no es el que decía la primera versión de esta cabecera. Tiene que ir
 * después de app.css porque el bloque de Vector usa el selector `:root`, con la misma
 * especificidad que el `:root` de app.css: puesto antes, los radios de app.css ganaban y
 * Vector recibía 10 px donde pide 8. Y antes de Identidad porque lo que el cliente
 * configuró manda sobre el punto de partida del skin —el servicio solo emite lo que se
 * cambió de verdad, así que lo que la universidad no toca lo sigue decidiendo este
 * archivo.
 *
 * El skin se elige con `data-skin` en <html>. Sin atributo, vector: es el que se sirve
 * por defecto.
 *
 *   <html data-skin="claustro">
 *
 * Lo que el CLIENTE sigue eligiendo: color primario, acento, éxito, fondo, texto y logo,
 * exactamente como hoy. Este archivo solo fija el punto de partida de cada skin. Cuando
 * una universidad pone su granate, el granate entra por --color-primario y el resto del
 * skin no se mueve.
 *
 * Los tres grises de texto de --texto / --texto-2 / --texto-3 NO se tocan a ojo: están
 * cubiertos por tests/Unit/ContrasteTest.php, que exige 4,5:1 contra las tres superficies
 * del modo. Los valores de acá pasan esa prueba. Si alguien los aclara «porque se ve más
 * limpio», la suite lo va a rechazar, y hace bien.
 */

/* ══ Tokens nuevos, comunes a los dos skins ══════════════════════════════ */
:root {
  /* La barra superior. Hoy .topbar hereda superficie y borde, que es justo lo que
     diferencia a un skin del otro: Vector la quiere oscura y Claustro blanca. */
  --barra-fondo: var(--superficie);
  --barra-texto: var(--texto);
  --barra-texto-2: var(--texto-3);
  --barra-borde: var(--borde);
  --barra-alto: 64px;

  /* Codificación de certificación. El color de una tarjeta de curso dice a qué
     certificación tributa; no es decoración. Se asignan por orden de creación de la
     certificación, y a partir de la cuarta se repiten con el patrón de sello cambiado:
     tres colores distinguibles es el techo honesto. */
  --cert-1: var(--color-primario);
  --cert-2: var(--color-acento);
  --cert-3: var(--texto-3);

  /* Elevación. En Vector es sombra; en Claustro, borde. Se declara como token para que
     una tarjeta no tenga que saber en qué skin está. */
  --elevacion-1: var(--sombra-1);
  --elevacion-2: var(--sombra-2);
  --marco: 1px solid var(--borde);
}

/* ══ VECTOR ══════════════════════════════════════════════════════════════
   El skin por defecto. Grotesca densa, azul de acción, barra oscura permanente,
   profundidad con sombra. Es el que se parece a lo que un alumno de 25 años espera de
   una plataforma de cursos. */
:root,
:root[data-skin="vector"] {
  --color-primario:        #1B47D6;
  --color-primario-fuerte: #1539A8;
  --color-primario-suave:  #EEF1FE;
  --color-acento:          #C2410C;
  --color-acento-fuerte:   #9A3412;
  --color-acento-suave:    #FFF1EA;
  --color-exito:           #15803D;
  --color-exito-suave:     #ECFDF3;
  --sobre-primario:        #FFFFFF;
  --sobre-acento:          #FFFFFF;

  --fondo:        #F2F3F7;
  --superficie:   #FFFFFF;
  --superficie-2: #FAFBFD;
  --borde:        #E3E6EE;
  --borde-fuerte: #D8DCE7;
  --texto:        #0B0D12;
  --texto-2:      #4A5064;
  /* 4,81:1 sobre blanco y 5,40:1 sobre #F2F3F7. El #8C93A8 que teníamos daba 3,03. */
  --texto-3:      #5B6377;

  --fuente:         'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --fuente-titulos: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  --sombra-1: 0 1px 2px rgba(11,13,18,.05);
  --sombra-2: 0 6px 20px rgba(11,13,18,.05);
  --elevacion-1: var(--sombra-1);
  --elevacion-2: var(--sombra-1), var(--sombra-2);
  --marco: 1px solid var(--borde);

  /* Barra oscura: el buscador vive siempre ahí y la nav no compite con el contenido. */
  --barra-fondo:   #0B0D12;
  --barra-texto:   #FFFFFF;
  --barra-texto-2: rgba(255,255,255,.62);
  --barra-borde:   rgba(255,255,255,.10);

  /* Siguen al color efectivo y no al hex del estilo: si una universidad pone su granate,
     la codificación de certificación tiene que ser de su color, no del azul del producto.
     Sin cliente el resultado es el mismo, porque el color efectivo ES el del estilo. */
  --cert-1: var(--color-primario);
  --cert-2: var(--color-acento);
  --cert-3: var(--texto-2);
}

/* ══ CLAUSTRO ════════════════════════════════════════════════════════════
   Papel cálido, serif en títulos, marino y terracota, profundidad con borde y radio
   casi nulo. Para la universidad que quiere verse académica y no tecnológica.

   Regla propia de este skin: la terracota NO codifica certificación. Es el color de la
   acción irreversible —inscribirse, entregar, verificar—. Si además marcara una
   certificación, dejaría de significar «esto se pulsa». Por eso --cert-2 es el oliva. */
:root[data-skin="claustro"] {
  --color-primario:        #16324F;
  --color-primario-fuerte: #0E2038;
  --color-primario-suave:  #EAEEF3;
  --color-acento:          #B4552D;
  --color-acento-fuerte:   #8A3F13;
  --color-acento-suave:    #FBF3EA;
  --color-exito:           #3B6D11;
  --color-exito-suave:     #F3F7EE;
  --sobre-primario:        #FFFFFF;
  --sobre-acento:          #FFFFFF;

  --fondo:        #F7F4EF;
  --superficie:   #FFFFFF;
  --superficie-2: #FDFCFA;
  --borde:        #E4DED4;
  --borde-fuerte: #DDD5C9;
  --texto:        #1A1B18;
  --texto-2:      #4A443C;
  /* 5,84:1 sobre blanco y 5,32:1 sobre #F7F4EF. */
  --texto-3:      #6B6459;

  --fuente:         'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --fuente-titulos: 'Piazzolla', Georgia, 'Times New Roman', serif;

  /* Casi cuadrado. Un radio de 12 px sobre papel parece una app metida en un libro. */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 3px;

  /* Sin sombra: la profundidad la da el borde y el cambio de superficie. */
  --sombra-1: none;
  --sombra-2: none;
  --elevacion-1: none;
  --elevacion-2: none;
  --marco: 1px solid var(--borde);

  /* Barra clara: sobre columnas de papel, una barra negra parte la pantalla en dos. */
  --barra-fondo:   #FFFFFF;
  --barra-texto:   #1A1B18;
  --barra-texto-2: #6B6459;
  --barra-borde:   #E4DED4;
  --barra-alto:    70px;

  --cert-1: var(--color-primario);
  --cert-2: var(--color-exito);   /* el oliva: acá la terracota es la acción, no un sello */
  --cert-3: var(--texto-2);
}

/* ══ MODO OSCURO ═════════════════════════════════════════════════════════
   Las superficies son las de `ServicioIdentidad::SUPERFICIES_OSCURO` sin tocar. Los
   colores de marca NO están elegidos a ojo: son la salida de `aclararParaFondoOscuro()`
   —que sube el color de 6% en 6% hasta alcanzar 4,5:1 contra el fondo— y de sus
   derivados `mezclarConBlanco(.18)` y `mezclarConNegro(.80/.82)`. Se dejan escritos acá
   para que el skin arranque en el sitio correcto, pero el servicio los recalcula igual
   cuando el cliente cambia su color: los valores coinciden.

   `--sobre-primario` es #0F1525 y no blanco. Lo decide `textoLegibleSobre()`
   comparando los dos contrastes, y para estos azules y naranjas aclarados gana la tinta.

   Sobre Claustro en oscuro: mi recomendación es no ofrecerlo. El marino #16324F aclarado
   da #718294, un gris azulado que ya no es el color de nadie —es el caso que describe el
   comentario de esa función—, y sin papel Claustro es Vector con serif. Si de todas
   formas hay que soportarlo, la paleta de abajo es la correcta. */

:root[data-skin="vector"][data-modo="oscuro"],
:root[data-modo="oscuro"] {
  /* #1B47D6 aclarado · 4,97:1 sobre el fondo y 4,77:1 contra la tinta que lleva encima.
     Era #5878E0, que cumplía contra el fondo y se quedaba en 4,49 contra esa tinta: el
     botón principal del modo oscuro no llegaba al mínimo. La función del servicio ahora
     comprueba las dos cosas, y este valor es su salida. */
  --color-primario:        #5F7DE1;
  --color-primario-fuerte: #7C94E6;
  --color-primario-suave:  #13192D;
  --color-acento:          #CC6136;  /* #C2410C aclarado · 4,81:1 */
  --color-acento-fuerte:   #D57D5A;
  --color-acento-suave:    #25110A;
  --color-exito:           #308F54;
  --color-exito-suave:     #091A0F;
  --sobre-primario:        #0F1525;
  --sobre-acento:          #0F1525;

  --fondo:        #0C1116;
  --superficie:   #141B24;
  --superficie-2: #1A2330;
  --borde:        #232D3A;
  --borde-fuerte: #35424F;
  --texto:        #E5EAF2;
  --texto-2:      #A9B6C8;
  --texto-3:      #7F8DA1;
  --sombra-1: 0 1px 2px rgba(0,0,0,.35);
  --sombra-2: 0 4px 16px rgba(0,0,0,.30);
  /* La sombra no se ve sobre oscuro: la jerarquía la sostienen las tres superficies. */
  --elevacion-1: none;
  --elevacion-2: none;

  --barra-fondo:   #080C10;
  --barra-texto:   #E5EAF2;
  --barra-texto-2: #7F8DA1;
  --barra-borde:   #232D3A;

  --cert-1: var(--color-primario);
  --cert-2: var(--color-acento);
  --cert-3: var(--texto-2);
}

:root[data-skin="claustro"][data-modo="oscuro"] {
  --color-primario:        #718294;  /* #16324F aclarado · 4,63:1 — ver la nota de arriba */
  --color-primario-fuerte: #8B99A7;
  --color-primario-suave:  #171A1E;
  --color-acento:          #BD6946;  /* #B4552D aclarado · 4,58:1 */
  --color-acento-fuerte:   #C98467;
  --color-acento-suave:    #22130D;
  --color-exito:           #668D45;
  --color-exito-suave:     #12190C;
  --sobre-primario:        #0F1525;
  --sobre-acento:          #0F1525;

  --fondo:        #17150F;
  --superficie:   #1F1C15;
  --superficie-2: #262218;
  --borde:        #332E22;
  --borde-fuerte: #443D2D;
  --texto:        #F2EDE2;
  --texto-2:      #C4BBA8;
  --texto-3:      #948B78;

  --barra-fondo:   #120F0A;
  --barra-texto:   #F2EDE2;
  --barra-texto-2: #948B78;
  --barra-borde:   #332E22;

  --cert-1: var(--color-primario);
  --cert-2: var(--color-exito);
  --cert-3: var(--texto-2);
}

/* ── Lo que Claustro necesita de app.css ──────────────────────────────────
   Tres reglas que no se pueden expresar como token porque cambian la forma, no el valor.
   Van acá y no dentro de app.css para que el archivo base siga sin saber de skins. */

/* La entrada activa de un menú se marca con regla al borde, no con relleno.
   El relleno era «rgba(255,255,255,.10)», que suponía un menú sobre fondo oscuro; este
   vive sobre el papel, y ahí un blanco al diez por ciento no se ve. Se cambia por la
   superficie del skin, que es el equivalente sobre claro. */
:root[data-skin="claustro"] .nav-admin a.activa {
  background: var(--superficie);
  color: var(--color-primario);
  border-left: 2px solid var(--color-acento);
  border-radius: 0;
}
:root[data-skin="claustro"] .nav-admin a.activa svg { color: var(--color-acento); }

/* Las pestañas y los estados usan versalitas con borde en vez de pastilla rellena:
   una tabla de veinte filas con pastillas de color parece un semáforo. */
:root[data-skin="claustro"] .pastilla {
  background: transparent;
  border: 1px solid currentColor;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* El hero de Claustro es papel liso: el degradado radial de Vector lava el crema y deja
   una mancha azul donde debería haber una hoja. El peso lo lleva la serif en marino. */
:root[data-skin="claustro"] .hero-fondo { display: none; }
/* Y su botón secundario es terracota: en este skin el acento cálido es el que llama a la
   acción, y sobre papel un contorno gris no llama a nada. */
:root[data-skin="claustro"] .btn-sobre-oscuro {
  color: var(--color-acento);
  border-color: var(--color-acento);
}
:root[data-skin="claustro"] .btn-sobre-oscuro:hover {
  background: var(--color-acento-suave);
  border-color: var(--color-acento);
}

/* La columna del tipo de pregunta se ensancha: acá las pastillas van en versalitas con
   tracking, y «Verdadero o falso» no cabe en los 124 px que basta en Vector —se salía de
   su columna y se montaba sobre el enunciado—. */
:root[data-skin="claustro"] .lista-items-cabecera .col-tipo,
:root[data-skin="claustro"] .fila-item .col-tipo { width: 176px; }
:root[data-skin="claustro"] .lista-items-caja .problemas-item {
  padding-left: calc(var(--e-4) + 176px + var(--e-3));
}

/* ── Miniaturas del selector de estilo ────────────────────────────────────
   Cada miniatura se dibuja con los radios, la profundidad y los colores de SU estilo, no
   con los del que está activo: si las dos se dibujaran iguales, el cliente no vería la
   diferencia que está eligiendo. Por eso estas variables van acá, junto a los tokens de
   cada skin, y no cuelgan de :root[data-skin]: son las mismas mire quien mire.

   Los valores son los de arriba, copiados a propósito: una miniatura que heredara los
   tokens vivos dejaría de mostrar su estilo en cuanto el cliente cambiara un color. */
.skin-vector {
  --mini-fondo:      #F2F3F7;
  --mini-barra:      #0B0D12;
  --mini-superficie: #FFFFFF;
  --mini-borde:      #E3E6EE;
  --mini-primario:   #1B47D6;
  --mini-acento:     #C2410C;
  --mini-exito:      #15803D;
  --mini-radio:      8px;
  --mini-radio-sm:   5px;
  --mini-sombra:     0 1px 2px rgba(11,13,18,.08);
  --mini-titulos:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

.skin-claustro {
  --mini-fondo:      #F7F4EF;
  --mini-barra:      #FFFFFF;
  --mini-superficie: #FFFFFF;
  --mini-borde:      #E4DED4;
  --mini-primario:   #16324F;
  --mini-acento:     #B4552D;
  --mini-exito:      #3B6D11;
  --mini-radio:      3px;
  --mini-radio-sm:   2px;
  --mini-sombra:     none;
  --mini-titulos:    'Piazzolla', Georgia, 'Times New Roman', serif;
}

/* Las pestañas de gestión: en Claustro son subrayado bajo una regla, no un control
   segmentado sobre carril. El carril relleno es un gesto de interfaz de aplicación; acá
   la vista elegida se marca con una regla de acento bajo la palabra. */
:root[data-skin="claustro"] .pestanas-gestion {
  gap: var(--e-6);
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
}
:root[data-skin="claustro"] .pestanas-gestion a {
  height: auto;
  padding: 0 0 13px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--fuente-titulos);
}
:root[data-skin="claustro"] .pestanas-gestion a.activa {
  background: transparent;
  box-shadow: none;
  border-bottom-color: var(--color-acento);
}

/* El escenario del video se queda oscuro en los dos skins: es lo correcto para ver
   imagen, y es la única zona de Claustro que no es papel. */
:root[data-skin="claustro"] .escenario-medio { background: #12130F; }