/*
 * Base de la hoja de estilos.
 * Reúne el reinicio del navegador, los testigos de color y de forma, la tipografía y las utilidades que no pertenecen a ningún componente.
 * Ocupa el primer lugar de la cascada porque todo lo que viene después consume sus testigos, de modo que ninguna regla posterior escribe un color literal.
 *
 * Los tres estados del tema.
 * El claro vive en la raíz y es el que se ve sin ninguna preferencia declarada.
 * El oscuro elegido a mano se marca con el atributo data-tema en el elemento raíz.
 * El oscuro del sistema se aplica solo cuando nadie ha elegido el claro, condición que evita que la preferencia del equipo pise la de la persona.
 *
 * Contraste medido de las tintas, en razón de contraste según WCAG 2.1.
 * Tema claro sobre la superficie blanca: tinta 17.68 a 1, tinta-2 8.73 a 1, tinta-3 5.69 a 1.
 * Tema claro sobre el fondo de la página: tinta-3 5.31 a 1, y sobre la superficie secundaria 5.03 a 1.
 * Tema oscuro sobre la superficie: tinta 14.61 a 1, tinta-2 9.11 a 1, tinta-3 6.15 a 1.
 * Tema oscuro sobre el fondo de la página: tinta-3 6.74 a 1, y sobre la superficie secundaria 5.38 a 1.
 * Estados en tema claro sobre la superficie: exito 6.57 a 1, alerta 5.92 a 1, peligro 7.11 a 1, info 6.61 a 1.
 * Estados en tema oscuro sobre la superficie: exito 9.26 a 1, alerta 9.21 a 1, peligro 7.66 a 1, info 8.76 a 1.
 * La marca alcanza 8.31 a 1 en claro y 8.60 a 1 en oscuro, y la marca secundaria 4.91 a 1 en claro y 10.01 a 1 en oscuro.
 */

/* ------------------------------------------------------------
   Testigos del tema claro, que es el de partida.
   ------------------------------------------------------------ */

:root {
  --fuente-texto: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --fuente-mono: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;

  --fondo: #f6f7fb;
  --fondo-2: #e9edf8;
  --superficie: #ffffff;
  --superficie-2: #eef1f8;
  --superficie-3: #e2e7f4;
  --borde: #d9deeb;
  --borde-fuerte: #b6c0d8;

  --tinta: #12172e;
  --tinta-2: #414a68;
  --tinta-3: #5d6683;

  --marca: #1f4e8c;
  --marca-2: #8a6d16;
  --marca-tinta: #ffffff;
  --grad-marca: linear-gradient(135deg, #1f4e8c, #8a6d16);

  --exito: #116b3d;
  --alerta: #8a5a06;
  --peligro: #a8242c;
  --info: #1b5f9e;

  --radio: 14px;
  --radio-s: 9px;
  --radio-g: 22px;
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 26px rgba(31, 78, 140, 0.1);
  --sombra-alta: 0 4px 14px rgba(15, 23, 42, 0.12), 0 20px 54px rgba(31, 78, 140, 0.2);
  --transicion: 170ms cubic-bezier(0.3, 0.6, 0.3, 1);
  --ancho-maximo: 1180px;

  /* Tinta y papel de la impresión, que se declaran aquí para que la hoja de papel no tenga que escribir ningún color literal. */
  --papel: #ffffff;
  --papel-tinta: #000000;
  --papel-borde: #666666;
}

/* ------------------------------------------------------------
   Tema oscuro elegido a mano.
   Los tonos son pasos propios validados contra el fondo oscuro y no una inversión de los claros.
   ------------------------------------------------------------ */

html[data-tema="oscuro"] {
  --fondo: #0c1020;
  --fondo-2: #141b33;
  --superficie: #141a2e;
  --superficie-2: #1d2540;
  --superficie-3: #273052;
  --borde: #2c3557;
  --borde-fuerte: #3d4874;

  --tinta: #e8ecf8;
  --tinta-2: #b3bcd6;
  --tinta-3: #8f9ab8;

  --marca: #8fb8ff;
  --marca-2: #e0c36a;
  --marca-tinta: #0b1022;
  --grad-marca: linear-gradient(135deg, #8fb8ff, #e0c36a);

  --exito: #5fd39a;
  --alerta: #eab54a;
  --peligro: #ff8b8b;
  --info: #7cc0f0;

  --sombra: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 26px rgba(0, 0, 0, 0.4);
  --sombra-alta: 0 4px 14px rgba(0, 0, 0, 0.5), 0 20px 54px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------
   Tema oscuro heredado del sistema operativo.
   La condición de no llevar el tema claro puesto es lo que permite que una elección a mano gane a la preferencia del equipo.
   ------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) {
    --fondo: #0c1020;
    --fondo-2: #141b33;
    --superficie: #141a2e;
    --superficie-2: #1d2540;
    --superficie-3: #273052;
    --borde: #2c3557;
    --borde-fuerte: #3d4874;

    --tinta: #e8ecf8;
    --tinta-2: #b3bcd6;
    --tinta-3: #8f9ab8;

    --marca: #8fb8ff;
    --marca-2: #e0c36a;
    --marca-tinta: #0b1022;
    --grad-marca: linear-gradient(135deg, #8fb8ff, #e0c36a);

    --exito: #5fd39a;
    --alerta: #eab54a;
    --peligro: #ff8b8b;
    --info: #7cc0f0;

    --sombra: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 26px rgba(0, 0, 0, 0.4);
    --sombra-alta: 0 4px 14px rgba(0, 0, 0, 0.5), 0 20px 54px rgba(0, 0, 0, 0.55);
  }
}

/* ------------------------------------------------------------
   Reinicio corto.
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * El recorte horizontal de la raíz impide que el menú lateral, que en las pantallas estrechas espera fuera de la pantalla, alargue la zona desplazable de la página.
 * Se usa clip y no hidden porque clip no convierte la raíz en un contenedor de desplazamiento, de modo que la cabecera pegajosa y el desplazamiento vertical siguen funcionando igual.
 */
html {
  scroll-behavior: smooth;
  color-scheme: light dark;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tinta);
  background:
    radial-gradient(1100px 480px at 88% -12%, color-mix(in srgb, var(--marca) 9%, transparent), transparent 62%),
    radial-gradient(880px 400px at -12% 2%, color-mix(in srgb, var(--marca-2) 7%, transparent), transparent 58%),
    var(--fondo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  /* Las palabras muy largas, como los nombres de los cursos en inglés, se parten antes que desbordar la columna en la que caen. */
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.25;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  letter-spacing: -0.012em;
}

/* Los títulos llevan un corte más decidido, porque una sola palabra larga en un tamaño grande basta para sacar la línea del ancho disponible. */
h1,
h2,
h3,
h4 {
  overflow-wrap: anywhere;
}

h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
h3 { font-size: 1.08rem; }
h4 { font-size: 0.98rem; }

p { margin: 0 0 1em; }

ul,
ol { margin: 0 0 1em; padding-left: 1.25em; }

a {
  color: var(--marca);
  text-underline-offset: 0.18em;
}

a:hover { color: color-mix(in srgb, var(--marca) 78%, var(--tinta)); }

em { font-style: italic; }

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; }

img,
svg { max-width: 100%; }

code,
kbd,
samp {
  font-family: var(--fuente-mono);
  font-size: 0.9em;
  background: var(--superficie-2);
  border-radius: 5px;
  padding: 1px 6px;
}

table { border-collapse: collapse; }

[hidden] { display: none !important; }

::selection {
  background: var(--marca);
  color: var(--marca-tinta);
}

/* ------------------------------------------------------------
   Foco visible, que es lo único que orienta a quien navega con el teclado.
   ------------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}

:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------
   Barra de desplazamiento, que de otro modo rompe el tema oscuro.
   ------------------------------------------------------------ */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--borde-fuerte) transparent;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border: 3px solid var(--fondo);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }

/* ------------------------------------------------------------
   Utilidades de base.
   ------------------------------------------------------------ */

/* Texto reservado a los lectores de pantalla, que queda fuera de la vista sin salir del árbol de accesibilidad. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Región permanente que anuncia el cambio de vista, de modo que no ocupa sitio en la página. */
.region-estado {
  margin: 0;
}

/* Los iconos acompañan al texto y nunca lo sustituyen, razón por la que heredan su color y su alineación. */
.icono {
  display: inline-block;
  vertical-align: -0.18em;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------
   Movimiento reducido.
   Quien declara esa preferencia suele hacerlo por mareo, razón por la que aquí la animación se apaga en lugar de acortarse.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }
}