/*
 * Color por familia de curso y por especialización.
 * Las cuatro familias agrupan los cursos por el papel que cumplen dentro del plan de estudios, que son el núcleo de la especialización, la electiva de especialización, la electiva libre y el curso de fuera de CS.
 * Se codifica la agrupación y no el curso, porque más de cuatro categorías simultáneas dejan pares de tonos indistinguibles por bien elegidos que estén.
 * Cada familia lleva además su nombre escrito en la insignia, de manera que la identidad nunca depende solo del color.
 * Es la única hoja, junto con la base, donde se admite un color literal, dado que aquí es donde vive la paleta medida.
 *
 * Medidas del tema claro sobre el fondo #f6f7fb, tomadas de la revisión de paleta del arnés.
 *   peor par con visión normal   20.5  (#1a3a99 y #7e0360)
 *   peor par con daltonismo      10.3  (#1a3a99 y #7e0360, protanopia)
 *   #1a3a99   luminosidad 0.391   croma 0.160   contraste 9.30 a 1
 *   #aa5f04   luminosidad 0.560   croma 0.130   contraste 4.51 a 1
 *   #04510e   luminosidad 0.379   croma 0.120   contraste 8.96 a 1
 *   #7e0360   luminosidad 0.399   croma 0.170   contraste 9.48 a 1
 *
 * Medidas del tema oscuro sobre la superficie #141a2e, tomadas de la misma revisión.
 *   peor par con visión normal   21.2  (#d9932a y #ef6ab0)
 *   peor par con daltonismo      11.9  (#d9932a y #ef6ab0, tritanopia)
 *   #7fa8ff   luminosidad 0.738   croma 0.134   contraste 7.35 a 1
 *   #d9932a   luminosidad 0.717   croma 0.140   contraste 6.70 a 1
 *   #7ce0a5   luminosidad 0.830   croma 0.127   contraste 10.73 a 1
 *   #ef6ab0   luminosidad 0.706   croma 0.180   contraste 6.05 a 1
 *
 * Los umbrales exigidos son de 15 en la separación con visión normal, de 8 en la separación con daltonismo y de 3 a 1 en el contraste contra el fondo.
 * Los dos temas quedan por encima de los tres, y los cuatro tonos superan además el 4.5 a 1 que pide el texto corriente, razón por la que la insignia puede escribirse con el color de su familia.
 */

/* ------------------------------------------------------------
   Tonos de familia en el tema claro.
   ------------------------------------------------------------ */

.familia-nucleo { --familia: #1a3a99; }
.familia-electiva { --familia: #aa5f04; }
.familia-libre { --familia: #04510e; }
.familia-fuera { --familia: #7e0360; }

.esp-ia { --esp: #0f6b7a; }
.esp-ml { --esp: #6b3fbd; }

/* ------------------------------------------------------------
   Tonos de familia en el tema oscuro elegido a mano.
   Son pasos propios validados contra el fondo oscuro y no una inversión de los claros.
   ------------------------------------------------------------ */

html[data-tema="oscuro"] .familia-nucleo { --familia: #7fa8ff; }
html[data-tema="oscuro"] .familia-electiva { --familia: #d9932a; }
html[data-tema="oscuro"] .familia-libre { --familia: #7ce0a5; }
html[data-tema="oscuro"] .familia-fuera { --familia: #ef6ab0; }

html[data-tema="oscuro"] .esp-ia { --esp: #4fd0e0; }
html[data-tema="oscuro"] .esp-ml { --esp: #b294f5; }

/* ------------------------------------------------------------
   Los mismos tonos cuando el tema oscuro viene del sistema y nadie eligió el claro.
   ------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) .familia-nucleo { --familia: #7fa8ff; }
  html:not([data-tema="claro"]) .familia-electiva { --familia: #d9932a; }
  html:not([data-tema="claro"]) .familia-libre { --familia: #7ce0a5; }
  html:not([data-tema="claro"]) .familia-fuera { --familia: #ef6ab0; }

  html:not([data-tema="claro"]) .esp-ia { --esp: #4fd0e0; }
  html:not([data-tema="claro"]) .esp-ml { --esp: #b294f5; }
}

/* ------------------------------------------------------------
   Cómo se aplica el tono de familia.
   El borde izquierdo marca la tarjeta entera y el fondo tintado la separa de las demás sin tapar el texto.
   Las reglas se limitan a la tarjeta, dado que la insignia lleva la misma clase de familia y necesita otro tratamiento.
   ------------------------------------------------------------ */

.tarjeta.familia-nucleo,
.tarjeta.familia-electiva,
.tarjeta.familia-libre,
.tarjeta.familia-fuera {
  border-left: 5px solid var(--familia, var(--marca));
  background: linear-gradient(115deg, color-mix(in srgb, var(--familia, var(--marca)) 9%, var(--superficie)), var(--superficie) 62%);
}

.tarjeta.familia-nucleo:hover,
.tarjeta.familia-electiva:hover,
.tarjeta.familia-libre:hover,
.tarjeta.familia-fuera:hover {
  border-color: var(--familia, var(--marca));
}

.familia-nucleo .tarjeta-codigo,
.familia-electiva .tarjeta-codigo,
.familia-libre .tarjeta-codigo,
.familia-fuera .tarjeta-codigo {
  color: var(--familia, var(--marca));
}

.familia-nucleo .barra-relleno,
.familia-electiva .barra-relleno,
.familia-libre .barra-relleno,
.familia-fuera .barra-relleno {
  background: var(--familia, var(--marca));
}

/*
 * Insignia de familia.
 * Lleva escrito el nombre de la familia, de modo que quien no distingue los tonos sigue sabiendo de cuál se trata.
 * La clase de familia viaja en la propia insignia, con lo cual toma su tono aunque la tarjeta que la contiene no lo declare.
 */
.insignia-familia {
  border-color: color-mix(in srgb, var(--familia, var(--marca)) 45%, transparent);
  background: color-mix(in srgb, var(--familia, var(--marca)) 12%, var(--superficie));
  color: var(--familia, var(--marca));
}

/* ------------------------------------------------------------
   Acento de las dos especializaciones.
   Sirve para distinguir la tarjeta de Machine Learning de la tarjeta de la otra especialización, y también lleva su nombre escrito.
   ------------------------------------------------------------ */

.tarjeta.esp-ia,
.tarjeta.esp-ml {
  border-left: 5px solid var(--esp, var(--marca));
  background: linear-gradient(115deg, color-mix(in srgb, var(--esp, var(--marca)) 10%, var(--superficie)), var(--superficie) 60%);
}

.esp-ia .tarjeta-titulo,
.esp-ml .tarjeta-titulo {
  color: var(--esp, var(--marca));
}

.esp-ia .insignia,
.esp-ml .insignia {
  border-color: color-mix(in srgb, var(--esp, var(--marca)) 45%, transparent);
  background: color-mix(in srgb, var(--esp, var(--marca)) 12%, var(--superficie));
  color: var(--esp, var(--marca));
}

.esp-ia .barra-relleno,
.esp-ml .barra-relleno {
  background: var(--esp, var(--marca));
}

/* ------------------------------------------------------------
   Familias del atlas de estudio.

   Los siete bloques se agrupan en tres familias en lugar de recibir siete tonos propios.
   La razón es que siete colores simultáneos dejan siempre algún par indistinguible por bien elegido que esté, mientras que tres se separan con holgura.
   La familia base reúne las herramientas que se usan en todos los demás bloques, que son las matemáticas y los algoritmos.
   La familia de modelos reúne los bloques que entrenan un modelo a partir de datos, que son la IA clásica, el Machine Learning y el aprendizaje profundo.
   La familia de secuencia reúne los bloques que deciden o generan paso a paso, que son el aprendizaje por refuerzo y los modelos de lenguaje.
   Cada insignia lleva escrito el nombre del bloque, de modo que la identidad nunca depende solo del color.

   Medidas del tema claro sobre el fondo #f6f7fb, tomadas de la revisión de paleta del arnés.
     peor par con visión normal   18.1  (#9c4a00 y #a3006b)
     peor par con daltonismo      10.6  (#9c4a00 y #a3006b, tritanopia)
     #3b2fb5   luminosidad 0.418   croma 0.200   contraste 8.68 a 1
     #9c4a00   luminosidad 0.504   croma 0.130   contraste 5.78 a 1
     #a3006b   luminosidad 0.472   croma 0.197   contraste 7.08 a 1

   Medidas del tema oscuro sobre la superficie #141a2e, tomadas de la misma revisión.
     peor par con visión normal   18.7  (#9d8cff y #ff7ab8)
     peor par con daltonismo      10.7  (#e8a14a y #ff7ab8, tritanopia)
     #9d8cff   luminosidad 0.705   croma 0.164   contraste 6.27 a 1
     #e8a14a   luminosidad 0.762   croma 0.132   contraste 7.91 a 1
     #ff7ab8   luminosidad 0.751   croma 0.174   contraste 7.17 a 1

   Los umbrales exigidos son de 15 en la separación con visión normal, de 8 en la separación con daltonismo y de 4.5 a 1 en el contraste contra el fondo.
   Los dos temas quedan por encima de los tres, razón por la cual la insignia puede escribirse con el color de su familia.
   ------------------------------------------------------------ */

.fam-base { --fam: #3b2fb5; }
.fam-modelos { --fam: #9c4a00; }
.fam-secuencia { --fam: #a3006b; }

html[data-tema="oscuro"] .fam-base { --fam: #9d8cff; }
html[data-tema="oscuro"] .fam-modelos { --fam: #e8a14a; }
html[data-tema="oscuro"] .fam-secuencia { --fam: #ff7ab8; }

@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) .fam-base { --fam: #9d8cff; }
  html:not([data-tema="claro"]) .fam-modelos { --fam: #e8a14a; }
  html:not([data-tema="claro"]) .fam-secuencia { --fam: #ff7ab8; }
}

/*
 * Cómo se aplica el tono de familia.
 * El borde izquierdo marca la tarjeta entera y el fondo tintado la separa de las demás sin tapar el texto.
 * Las reglas se limitan a la tarjeta, dado que la insignia y el chip llevan la misma clase de familia y necesitan otro tratamiento.
 */
.tarjeta.fam-base,
.tarjeta.fam-modelos,
.tarjeta.fam-secuencia {
  border-left: 5px solid var(--fam, var(--marca));
  background: linear-gradient(115deg, color-mix(in srgb, var(--fam, var(--marca)) 9%, var(--superficie)), var(--superficie) 62%);
}

.tarjeta.fam-base:hover,
.tarjeta.fam-modelos:hover,
.tarjeta.fam-secuencia:hover {
  border-color: var(--fam, var(--marca));
}

/*
 * Insignia del bloque.
 * Lleva escrito el nombre del bloque, de modo que quien no distingue los tonos sigue sabiendo de cuál se trata.
 * La clase de familia viaja en la propia insignia, con lo cual toma su tono aunque la tarjeta que la contiene no lo declare.
 */
.insignia-bloque {
  border-color: color-mix(in srgb, var(--fam, var(--marca)) 45%, transparent);
  background: color-mix(in srgb, var(--fam, var(--marca)) 12%, var(--superficie));
  color: var(--fam, var(--marca));
}

/* Chip de bloque del modo estudio, que mientras está suelto solo insinúa el tono en su marco. */
.chip.fam-base,
.chip.fam-modelos,
.chip.fam-secuencia {
  border-color: color-mix(in srgb, var(--fam, var(--marca)) 42%, var(--borde));
}

.chip.fam-base.chip-activo,
.chip.fam-modelos.chip-activo,
.chip.fam-secuencia.chip-activo {
  background: var(--fam, var(--marca));
  border-color: var(--fam, var(--marca));
  color: var(--superficie);
}

/* Barra de aciertos por bloque, que toma el tono de su familia y lleva siempre la cifra escrita al lado. */
.barra-bloque.fam-base .barra-relleno,
.barra-bloque.fam-modelos .barra-relleno,
.barra-bloque.fam-secuencia .barra-relleno {
  background: var(--fam, var(--marca));
}

.barra-bloque.fam-base .barra-bloque-nombre,
.barra-bloque.fam-modelos .barra-bloque-nombre,
.barra-bloque.fam-secuencia .barra-bloque-nombre {
  color: var(--fam, var(--marca));
}