/*
  Biblioteca.

  Es una pantalla de hojear, no de leer. Por eso usa `--ancho-panel` (72rem) y
  no `--ancho-lectura` (34rem): con el ancho de lectura, un catálogo se
  convierte en una columna estrecha de filas apiladas en mitad de una pantalla
  vacía, que es exactamente como se veía antes.

  Todo lo que es una colección va en rejilla `auto-fill`: las tarjetas se
  reparten según el ancho que haya, sin puntos de ruptura escritos a mano y sin
  que sobre espacio a los lados.

  Ningún color escrito a mano: todos salen de tokens.css (criterio 1.1).
*/

.biblioteca {
  max-width: var(--ancho-panel);
  margin: 0 auto;
  padding: var(--espacio-6) var(--espacio-4) var(--espacio-7);
}

.biblioteca-cabecera { margin-bottom: var(--espacio-5); }
.biblioteca-cabecera__titulo {
  font-size: var(--tamano-titulo-pagina);
  font-weight: 800;
  color: var(--grafito);
  margin: var(--espacio-2) 0;
}
.biblioteca-cabecera__nota {
  font-size: var(--tamano-menor);
  line-height: 1.6;
  color: var(--tinta-suave);
  max-width: 58ch;
}

.biblioteca__hueco {
  background: var(--rojo-fondo);
  border-left: 4px solid var(--rojo);
  padding: var(--espacio-3) var(--espacio-4);
  margin-bottom: var(--espacio-6);
  font-size: var(--tamano-menor);
  line-height: 1.6;
  color: var(--tinta);
}
.biblioteca__hueco strong { color: var(--rojo); }

.biblioteca__grupo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-6);
}

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-2) var(--espacio-4);
  border: 1px solid var(--linea);
  border-radius: var(--radio-pildora);
  background: var(--papel-elevado);
  color: var(--tinta);
  font-size: var(--tamano-menor);
  font-weight: 600;
  cursor: pointer;
}
.pastilla:hover { border-color: var(--linea-fuerte); }
.pastilla--activa { background: var(--azul); border-color: var(--azul); color: var(--sobre-azul); }
.pastilla__cifra { font-variant-numeric: tabular-nums; color: var(--tinta-tenue); }
.pastilla--activa .pastilla__cifra { color: var(--sobre-azul); }

/* Cursos: tarjetas en rejilla, no filas de ancho completo. Dieciocho filas
   apiladas obligan a recorrer la pantalla entera para ver el reparto; en
   rejilla se abarca de un vistazo, que es para lo que sirve esta lista. */
.biblioteca__cursos {
  list-style: none;
  margin: 0 0 var(--espacio-6);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--espacio-2);
}
.curso-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  row-gap: var(--espacio-1);
  column-gap: var(--espacio-3);
  width: 100%;
  height: 100%;
  text-align: left;
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  background: var(--papel-elevado);
  cursor: pointer;
}
.curso-fila:hover { border-color: var(--linea-fuerte); }
.curso-fila--activa { border-color: var(--azul); box-shadow: var(--sombra-azul-baja); }
.curso-fila__nombre { font-weight: 600; color: var(--tinta); }
/* Cifra tabular: las tarjetas solo se comparan de un vistazo si los dígitos
   ocupan lo mismo en todas. */
.curso-fila__peso {
  grid-column: 1;
  font-size: var(--tamano-menor);
  color: var(--tinta-tenue);
  font-variant-numeric: tabular-nums;
}
.curso-fila__cifra {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: var(--tamano-menor);
  font-weight: 600;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.curso-fila--vacia .curso-fila__cifra { color: var(--rojo); }

/* Exámenes: una tarjeta por convocatoria, con la prueba y sus claves dentro. */
.examenes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-6);
}
.convocatoria {
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  background: var(--papel-elevado);
  padding: var(--espacio-4);
}
.convocatoria__proceso {
  font-weight: 700;
  color: var(--grafito);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--espacio-3);
}
.convocatoria__piezas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-2); }
.convocatoria__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio);
  background: var(--azul-fondo);
  color: var(--azul);
  font-size: var(--tamano-menor);
  font-weight: 600;
  text-decoration: none;
}
.convocatoria__enlace:hover { text-decoration: underline; }
/* Las claves en tono apagado: se mira el examen antes que la respuesta. */
.convocatoria__enlace--claves { background: var(--papel-hundido); color: var(--tinta-suave); }
.convocatoria__accion { flex-shrink: 0; }

/* Estantes: un bloque por curso, y dentro los tomos en rejilla. */
.estantes { display: grid; gap: var(--espacio-5); margin-bottom: var(--espacio-6); }
.estante__curso {
  font-size: var(--tamano-titulo-tarjeta);
  font-weight: 700;
  color: var(--grafito);
  margin-bottom: var(--espacio-3);
}
.estante__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--espacio-3);
}
.estante__vacio {
  font-size: var(--tamano-menor);
  color: var(--tinta-tenue);
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px dashed var(--linea);
  border-radius: var(--radio-grande);
}
.libro {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  height: 100%;
  padding: var(--espacio-4);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  background: var(--papel-elevado);
}
.libro__texto { flex: 1 1 auto; min-width: 0; }
.libro__titulo { font-weight: 600; color: var(--tinta); }
.libro__subtitulo { font-size: var(--tamano-menor); color: var(--tinta-suave); margin-top: var(--espacio-1); }
.libro__fuente { font-size: var(--tamano-menor); color: var(--tinta-tenue); margin-top: var(--espacio-2); }
.libro__abrir { align-self: flex-start; }

/* Material suelto: la misma rejilla, tarjetas más compactas. */
.biblioteca__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--espacio-3);
}
.recurso {
  height: 100%;
  padding: var(--espacio-3) var(--espacio-4);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  background: var(--papel-elevado);
}
.recurso__titulo { font-weight: 600; color: var(--tinta); }
.recurso__detalle {
  font-size: var(--tamano-menor);
  line-height: 1.6;
  color: var(--tinta-suave);
  margin-top: var(--espacio-2);
}
/* La fuente va siempre visible, nunca plegada: es lo que permite comprobar por
   qué tenemos derecho a mostrar el material. */
.recurso__pie { font-size: var(--tamano-menor); color: var(--tinta-tenue); margin-top: var(--espacio-2); }

.biblioteca__pendientes {
  background: var(--papel-hundido);
  border-radius: var(--radio-grande);
  padding: var(--espacio-3) var(--espacio-4);
  margin-bottom: var(--espacio-6);
  font-size: var(--tamano-menor);
  line-height: 1.6;
  color: var(--tinta-suave);
}