/*
 * La biblioteca.
 *
 * Tema claro, una sola escala tipográfica, y ni una fuente que salga a la red:
 * la CSP del cascarón no deja pedir nada de fuera, así que la personalidad la
 * ponen la escala, el color y el espaciado, no una tipografía descargada. Los
 * dos stacks están elegidos, no heredados: serif con contraste para los
 * títulos (el mismo aire de los mazos), grotesca para el resto.
 *
 * Nada de emojis en ninguna parte: los iconos son los símbolos SVG del HTML.
 */

:root {
  /* Tinta */
  --tinta: #16202b;
  --tinta-media: #4d5b68;
  --tinta-suave: #74818e;

  /* Papel */
  --papel: #f2f4f7;
  --superficie: #ffffff;
  --superficie-hundida: #eef1f5;
  --borde: #dce2e9;
  --borde-fuerte: #c3ccd6;

  /* Acentos: marino de la casa, ámbar para lo que llama la atención */
  --marino: #123a5c;
  --marino-vivo: #1a5589;
  --marino-tenue: #e7eef5;
  --ambar: #a9541c;
  --verde: #256b4c;
  --verde-tenue: #e6f2ec;
  --rojo: #9c2b2b;
  --rojo-tenue: #fbeaea;

  --sombra-1: 0 1px 2px rgba(22, 32, 43, .06), 0 1px 3px rgba(22, 32, 43, .04);
  --sombra-2: 0 2px 4px rgba(22, 32, 43, .07), 0 8px 20px rgba(22, 32, 43, .08);
  --sombra-3: 0 12px 40px rgba(22, 32, 43, .18);

  --radio: 10px;
  --radio-chico: 7px;

  --fuente-titulos: "Iowan Old Style", Charter, "Palatino Linotype", Palatino,
    Georgia, "Times New Roman", serif;
  --fuente-texto: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Un ritmo de espaciado, para que los márgenes no se inventen uno a uno. */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
}

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

/* El atributo `hidden` manda SIEMPRE, también sobre secciones con `display`
   propio. Sin esto, la pantalla de entrar (display: grid, 100vh) seguía
   pintada encima de la biblioteca después de un login correcto: la sesión se
   abría y la vista no cambiaba. Cazado por Jorge el 11-ago-2026. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* 16px de piso: por debajo, iOS hace zoom al enfocar un campo. */
  font: 400 16px/1.55 var(--fuente-texto);
  color: var(--tinta);
  background: var(--papel);
  /* La regla que impide el scroll horizontal sorpresa a 390px: nada mide más
     que la ventana, y lo que se pase se recorta en su contenedor. */
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 600; margin: 0; }

code { font-family: var(--fuente-mono); font-size: .9em; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.sprite { display: none; }

.saltar {
  position: absolute; left: -9999px; top: var(--e2);
  background: var(--marino); color: #fff; padding: var(--e2) var(--e4);
  border-radius: var(--radio-chico); z-index: 50; text-decoration: none;
}
.saltar:focus { left: var(--e4); }

/* ── Botones ──────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font: 500 14px/1 var(--fuente-texto);
  padding: 9px 13px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  background: var(--superficie);
  color: var(--tinta);
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease,
    box-shadow .14s ease, transform .08s ease;
}
.boton svg { width: 16px; height: 16px; flex: none; }
.boton:hover { background: var(--superficie-hundida); border-color: var(--tinta-suave); }
.boton:active { transform: translateY(1px); }
.boton:focus-visible { outline: 2px solid var(--marino-vivo); outline-offset: 2px; }
.boton[disabled] {
  cursor: not-allowed; opacity: .5; background: var(--superficie-hundida);
  border-color: var(--borde); color: var(--tinta-suave); transform: none;
}

.boton--principal {
  background: var(--marino); border-color: var(--marino); color: #fff;
  box-shadow: var(--sombra-1);
}
.boton--principal:hover { background: var(--marino-vivo); border-color: var(--marino-vivo); }
.boton--principal[disabled] { background: var(--marino); border-color: var(--marino); color: #fff; }

.boton--llano { background: transparent; border-color: transparent; color: var(--tinta-media); }
.boton--llano:hover { background: var(--superficie-hundida); border-color: var(--borde); color: var(--tinta); }

.boton--peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.boton--peligro:hover { background: #832424; border-color: #832424; }

.boton--peligro-llano { color: var(--rojo); border-color: #e8c9c9; background: var(--rojo-tenue); }
.boton--peligro-llano:hover { background: #f5dcdc; border-color: var(--rojo); }

.boton--chico { padding: 7px 10px; font-size: 13px; }
.boton--ancho { width: 100%; padding: 11px 13px; font-size: 15px; }

/*
 * El botón que está trabajando.
 *
 * Un anillo girando en el sitio del texto, no la palabra "Cargando": el botón
 * conserva su tamaño (nada salta) y queda deshabilitado, que es lo que impide
 * el doble clic que crearía dos links seguidos.
 */
.boton--cargando { color: transparent !important; pointer-events: none; }
.boton--cargando svg { visibility: hidden; }
.boton--cargando::after {
  content: ""; position: absolute;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(22, 32, 43, .25);
  border-top-color: var(--tinta);
  animation: gira .7s linear infinite;
}
.boton { position: relative; }
.boton--principal.boton--cargando::after,
.boton--peligro.boton--cargando::after {
  border-color: rgba(255, 255, 255, .38); border-top-color: #fff;
}
@keyframes gira { to { transform: rotate(360deg); } }

.boton-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radio-chico);
  background: transparent; color: var(--tinta-media); cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.boton-icono svg { width: 18px; height: 18px; }
.boton-icono:hover { background: var(--superficie-hundida); color: var(--tinta); }
.boton-icono:focus-visible { outline: 2px solid var(--marino-vivo); outline-offset: 2px; }

/* ── La barra ─────────────────────────────────────────────────────────── */

.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e5);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--borde);
}
.barra__marca { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.barra__logo, .entrar__logo {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  background: linear-gradient(150deg, var(--marino) 0%, var(--marino-vivo) 60%, var(--ambar) 160%);
}
.barra__titulo {
  margin: 0; font-family: var(--fuente-titulos); font-size: 19px; font-weight: 600;
  letter-spacing: .01em;
}
.barra__sub { margin: 0; font-size: 13px; color: var(--tinta-suave); }
.barra__acciones { display: flex; align-items: center; gap: var(--e2); flex: 1 1 260px; justify-content: flex-end; }

.buscador {
  position: relative; display: flex; align-items: center;
  flex: 0 1 320px; min-width: 0;
}
.buscador__icono {
  position: absolute; left: 10px; width: 16px; height: 16px;
  color: var(--tinta-suave); pointer-events: none;
}
.buscador input {
  width: 100%;
  font: 400 15px/1 var(--fuente-texto);
  padding: 9px 12px 9px 32px;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  transition: border-color .14s ease, box-shadow .14s ease;
  -webkit-appearance: none; appearance: none;
}
.buscador input::placeholder { color: var(--tinta-suave); }
.buscador input:hover { border-color: var(--tinta-suave); }
.buscador input:focus {
  outline: none; border-color: var(--marino-vivo);
  box-shadow: 0 0 0 3px rgba(26, 85, 137, .16);
}

/* ── Entrar ───────────────────────────────────────────────────────────── */

.entrar { display: grid; place-items: center; min-height: 100vh; padding: var(--e5); }
.entrar__caja {
  width: min(100%, 380px);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
  padding: var(--e6);
  display: grid; gap: var(--e4);
}
.entrar__logo { width: 34px; height: 34px; }
.entrar__titulo { font-size: 25px; margin: 0; }
.entrar__pie { margin: -8px 0 0; font-size: 14px; color: var(--tinta-suave); }

.campo { display: grid; gap: var(--e2); }
.campo__etiqueta { font-size: 13px; font-weight: 500; color: var(--tinta-media); }
.campo input {
  font: 400 16px/1 var(--fuente-texto);
  padding: 11px 12px;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  transition: border-color .14s ease, box-shadow .14s ease;
  -webkit-appearance: none; appearance: none;
}
.campo input:hover { border-color: var(--tinta-suave); }
.campo input:focus {
  outline: none; border-color: var(--marino-vivo);
  box-shadow: 0 0 0 3px rgba(26, 85, 137, .16);
}
.campo input[disabled] { background: var(--superficie-hundida); color: var(--tinta-suave); }
.campo--mal input { border-color: var(--rojo); }
.campo--mal input:focus { box-shadow: 0 0 0 3px rgba(156, 43, 43, .16); }
.campo__error {
  margin: -8px 0 0; font-size: 13.5px; color: var(--rojo);
  display: flex; align-items: center; gap: 6px;
}
.campo__error::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rojo); flex: none;
}

/* ── El grid ──────────────────────────────────────────────────────────── */

.biblioteca { padding: var(--e5) var(--e5) var(--e7); }
.cursos { display: grid; gap: var(--e6); max-width: 1360px; margin: 0 auto; }

.curso__cabecera {
  display: flex; align-items: baseline; gap: var(--e3);
  padding-bottom: var(--e2); margin-bottom: var(--e4);
  border-bottom: 1px solid var(--borde);
}
.curso__nombre { font-size: 21px; letter-spacing: .01em; }
.curso__cuenta { font-size: 13px; color: var(--tinta-suave); }

.rejilla {
  display: grid;
  /* `min(100%, 280px)`: a 390px de ancho la columna se encoge en vez de
     desbordar, que es lo que hace un `minmax(280px, 1fr)` a secas. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 282px), 1fr));
  gap: var(--e4);
}

.tarjeta {
  display: flex; flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.tarjeta:hover { box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); transform: translateY(-1px); }
.tarjeta[hidden] { display: none; }

.tarjeta__foto {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--superficie-hundida);
  border-bottom: 1px solid var(--borde);
  display: grid; place-items: center;
  overflow: hidden;
}
.tarjeta__sinfoto { width: 34px; height: 34px; color: var(--borde-fuerte); }
.tarjeta__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .28s ease;
}
.tarjeta__foto img.puesta { opacity: 1; }

.tarjeta__cuerpo { padding: var(--e4) var(--e4) var(--e2); flex: 1; min-width: 0; }
.tarjeta__sesion {
  margin: 0 0 var(--e2);
  font: 600 11.5px/1 var(--fuente-texto);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ambar);
}
.tarjeta__titulo {
  font-size: 17px; line-height: 1.32; margin: 0 0 var(--e2);
  /* Dos líneas y corta: con títulos de 90 caracteres, sin esto una tarjeta
     mide el doble que su vecina y la rejilla se descuadra. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserva las dos líneas para que todas las tarjetas midan igual. */
  min-height: calc(2 * 1.32em);
  overflow-wrap: anywhere;
}
.tarjeta__meta { margin: 0; font-size: 13px; color: var(--tinta-suave); }

.tarjeta__estado { padding: 0 var(--e4) var(--e3); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: var(--superficie-hundida);
  color: var(--tinta-media);
  border: 1px solid var(--borde);
}
.chip__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-suave); }
.chip--vivo { background: var(--verde-tenue); color: var(--verde); border-color: #c6e2d5; }
.chip--vivo .chip__punto { background: var(--verde); }

.tarjeta__acciones {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  padding: 0 var(--e4) var(--e4);
}
.tarjeta__acciones .boton { flex: 1 1 auto; }

.enlace {
  display: grid; gap: var(--e2);
  padding: var(--e3) var(--e4) var(--e4);
  background: var(--marino-tenue);
  border-top: 1px solid #d4e0ea;
}
.enlace__campo {
  width: 100%;
  font: 400 13px/1.3 var(--fuente-mono);
  padding: 8px 10px;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid #c4d4e2;
  border-radius: var(--radio-chico);
  overflow-x: auto;
  -webkit-appearance: none; appearance: none;
}
.enlace__campo:focus { outline: 2px solid var(--marino-vivo); outline-offset: 1px; }
.enlace__botones { display: flex; gap: var(--e2); }
.enlace__botones .boton { flex: 1 1 auto; }

/* ── Esqueletos ───────────────────────────────────────────────────────── */

.tarjeta--hueso { box-shadow: none; }
.tarjeta--hueso:hover { transform: none; box-shadow: none; border-color: var(--borde); }
.hueso {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, #e6eaef 25%, #f1f4f7 50%, #e6eaef 75%);
  background-size: 400% 100%;
  animation: brillo 1.5s ease-in-out infinite;
}
.hueso--foto { aspect-ratio: 16 / 9; border-radius: 0; }
.hueso--titulo { width: 180px; height: 22px; }
.hueso--linea { height: 13px; margin-bottom: var(--e2); }
.hueso--corta { width: 55%; }
@keyframes brillo {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hueso { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ── Vacíos y fallas ──────────────────────────────────────────────────── */

.aviso-vacio {
  max-width: 1360px; margin: var(--e7) auto; text-align: center;
  color: var(--tinta-suave); font-size: 15px;
}
.falla {
  max-width: 520px; margin: 18vh auto; padding: var(--e6); text-align: center;
  background: var(--superficie); border: 1px solid var(--borde);
  border-left: 3px solid var(--rojo);
  border-radius: var(--radio); box-shadow: var(--sombra-1);
}
.falla__titulo { font-size: 20px; margin-bottom: var(--e2); }
.falla__detalle { color: var(--tinta-media); font-size: 14.5px; margin: 0 0 var(--e5); }

/* ── Diálogos ─────────────────────────────────────────────────────────── */

.dialogo {
  width: min(100% - 32px, 560px);
  padding: var(--e5);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-3);
  background: var(--superficie);
  color: var(--tinta);
}
.dialogo--angosto { width: min(100% - 32px, 420px); }
.dialogo::backdrop { background: rgba(22, 32, 43, .42); }
.dialogo__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); }
.dialogo__titulo { font-size: 19px; }
.dialogo__sub { margin: var(--e1) 0 0; font-size: 14px; color: var(--tinta-suave); }
.dialogo__cuerpo { margin-top: var(--e4); max-height: 60vh; overflow-y: auto; }
.dialogo__botones { display: flex; justify-content: flex-end; gap: var(--e2); margin-top: var(--e5); }

.version {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) 0;
  border-top: 1px solid var(--borde);
}
.version:first-child { border-top: none; }
.version__que { min-width: 0; }
.version__num { font-weight: 600; font-size: 15px; }
.version__meta { font-size: 13px; color: var(--tinta-suave); margin: 2px 0 0; }
/* La procedencia: de qué repo y qué commit salió esta versión (F3.5). Va en
   monoespaciada porque son un hash y una ruta, y se lee mejor alineada. */
.version__origen {
  font-size: 12px; color: var(--tinta-suave); margin: 2px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}
.version__origen--sucio { color: var(--ambar); }
.version__marca {
  font-size: 12px; font-weight: 500; color: var(--verde);
  background: var(--verde-tenue); border: 1px solid #c6e2d5;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}

/* ── Avisos ───────────────────────────────────────────────────────────── */

.avisos {
  position: fixed; right: var(--e4); bottom: var(--e4); z-index: 60;
  display: grid; gap: var(--e2); width: min(calc(100vw - 32px), 340px);
  pointer-events: none;
}
.aviso {
  padding: var(--e3) var(--e4);
  border-radius: var(--radio-chico);
  background: var(--tinta); color: #fff;
  font-size: 14px; box-shadow: var(--sombra-2);
  border-left: 3px solid var(--marino-vivo);
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.aviso.puesto { opacity: 1; transform: none; }
.aviso--bien { border-left-color: #4fbf8c; }
.aviso--mal { border-left-color: #e07373; }

/* ── Ventanas angostas ────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .barra { padding: var(--e3) var(--e4); }
  .barra__acciones { flex: 1 1 100%; }
  .biblioteca { padding: var(--e4) var(--e4) var(--e7); }
  .cursos { gap: var(--e5); }
  .entrar__caja { padding: var(--e5); }
  .dialogo { padding: var(--e4); }
}