/* ══════════ LIBROS con el sistema visual (29/09/2026) ══════════
   Biblioteca, sagas y universos, Cuentos y «A por la oposición».
   Lo común (banda, pestañas, filtros, cajas, notas, etiquetas, botones,
   ranking, vacíos) sale de 16-sistema.css; aquí solo va:
     · la pieza propia de Libros, «el lomo» (tablero SisFirma): portadas con
       el lomo oscuro a la izquierda, títulos en Fraunces (--f-firma) y la
       barra de lectura en el color del área;
     · la maquetación de cada sección (tablero EscLibros: seis portadas por
       fila y la columna derecha para lo secundario);
     · y las piezas que aún no son comunes (la hoja de filtros del móvil y
       los campos de formulario), con prefijo bib- hasta que se promuevan.
   Nada de fondos de área ni colores propios fuera del lomo: el área llega
   como --area y --area-suave por body[data-area="libros"]. */

/* En escritorio, más ancho que el resto: con la columna derecha, 7–8
   portadas por fila en una pantalla grande (el tablero pide usar el ancho). */
@media (min-width:900px){
  body[data-area="libros"] #reactMain{ max-width:1680px }
}

.bib, .cue, .opo{ padding-bottom:28px }
.bib-pie{ font-size:12px; line-height:1.45; color:var(--tx3) }
.bib-chips{ display:flex; flex-wrap:wrap; gap:6px }
.bib-etiquetas{ display:flex; flex-wrap:wrap; align-items:center; gap:6px }
/* 16-sistema.css va después: estos ajustes a sus piezas llevan dos clases. */
.sis-btn-icono.bib-quitar{ color:var(--error) }
.bib-a-la-izquierda{ margin-right:auto }

/* ── El lomo ── */
.bib-lomo{
  position:relative; display:block; width:100%; aspect-ratio:2/3; overflow:hidden;
  border-radius:3px 8px 8px 3px; background:var(--area); box-shadow:var(--sombra-1);
  transition:transform .18s ease, box-shadow .18s ease;
}
/* La franja en sombra y el filete de luz del lomo, por encima de la imagen. */
.bib-lomo::before, .bib-lomo::after{ content:""; position:absolute; top:0; bottom:0; z-index:2; pointer-events:none }
.bib-lomo::before{ left:0; width:10px; background:rgba(0,0,0,.28) }
.bib-lomo::after{ left:10px; width:2px; background:rgba(255,255,255,.25) }
.bib-lomo img{ display:block; width:100%; height:100%; object-fit:cover }
.bib-lomo-tit{
  position:absolute; left:20px; right:8px; top:12px; z-index:1;
  font-family:var(--f-firma); font-weight:700; font-size:13px; line-height:1.2; color:#FFF;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;
}
.bib-lomo-nota{ position:absolute; top:6px; right:6px; z-index:3 }
.bib-lomo.mini::before{ width:6px } .bib-lomo.mini::after{ left:6px; width:1.5px }
.bib-lomo.mini .bib-lomo-tit{ left:11px; right:5px; top:7px; font-size:10px }
.bib-lomo.ficha .bib-lomo-tit{ font-size:16px; left:22px; top:16px }

/* ── Biblioteca: filtros ── */
.sis-chip.bib-filtros-btn{ display:none }
@media (max-width:899px){
  /* En el móvil no caben: buscar se queda y lo demás va a la hoja. */
  .bib-solo-ancho{ display:none !important }
  .sis-chip.bib-filtros-btn{ display:inline-flex; height:var(--h-m); border-radius:var(--r-m) }
  .bib-principal .sis-buscar{ max-width:none; min-width:0 }
}

/* ── Biblioteca: la rejilla de portadas ──
   Se cuenta contra el ancho de SU columna (container query), no contra la
   ventana: con la columna derecha al lado o debajo, la misma pantalla deja
   sitios muy distintos. 3 en el móvil, 6 en un portátil, 7–8 en grande. */
.bib-rejilla{ container-type:inline-size }
.bib-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 12px }
@container (min-width:470px){ .bib-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@container (min-width:590px){ .bib-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px 14px } }
@container (min-width:740px){ .bib-grid{ grid-template-columns:repeat(6,minmax(0,1fr)) } }
@container (min-width:960px){ .bib-grid{ grid-template-columns:repeat(7,minmax(0,1fr)) } }
@container (min-width:1140px){ .bib-grid{ grid-template-columns:repeat(8,minmax(0,1fr)) } }

.bib-libro{
  display:flex; flex-direction:column; gap:3px; min-width:0; padding:0; border:0; background:none;
  text-align:left; cursor:pointer; color:var(--tx);
}
.bib-libro:hover .bib-lomo{ transform:translateY(-3px); box-shadow:var(--sombra-2) }
.bib-libro .bib-lomo{ margin-bottom:5px }
.bib-libro-tit{
  font-family:var(--f-firma); font-weight:600; font-size:14px; line-height:1.2; color:var(--tx);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bib-libro-autor{ font-size:12px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bib-libro-meta{ display:flex; align-items:center; min-height:20px; font-family:var(--f-mono); font-size:10.5px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* La barra de lectura del lomo, en el color del área. */
.bib-barra{ display:block; height:4px; border-radius:2px; background:var(--neutro-suave); overflow:hidden }
.bib-barra i{ display:block; height:100%; border-radius:2px; background:var(--area) }
@media (max-width:899px){ .bib-libro-tit{ font-size:13px } .bib-libro-autor{ font-size:11.5px } }

/* ── Biblioteca: columna derecha ── */
/* «Leyendo ahora»: destacado, con el filete de 3 px del área. En escritorio
   ancho va arriba de la columna; donde la columna cae debajo de la lista
   (móvil y escritorio estrecho), la copia de encima de las portadas. */
.sis-caja.bib-ahora{ border-top:3px solid var(--area); gap:10px; margin:0 0 14px }
.sis-col > .sis-caja.bib-ahora{ margin:0 }
.bib-ahora.en-col{ display:none }
@media (min-width:900px){
  .bib-ahora.en-lista{ display:none }
  .bib-ahora.en-col{ display:flex }
}
.bib-ahora-libro{ display:flex; gap:12px; align-items:center; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer; color:var(--tx) }
.bib-ahora-libro + .bib-ahora-libro{ border-top:1px solid var(--borde-s); padding-top:10px }
.bib-ahora-libro .bib-lomo{ flex:0 0 62px; width:62px }
.bib-ahora-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.bib-ahora-txt > b{ font-family:var(--f-firma); font-weight:700; font-size:19px; line-height:1.1 }
.bib-ahora-txt > small{ font-size:12px; color:var(--tx2) }
.bib-ahora-txt .bib-barra{ margin-top:6px; height:6px; border-radius:3px }
.bib-ahora-txt > em{ font-style:normal; font-family:var(--f-mono); font-size:10.5px; font-weight:600; color:var(--area) }
@media (max-width:899px){ .bib-ahora-txt > b{ font-size:17px } }

/* El ritmo lector: columnas por año en el color del área, la última entera. */
.bib-columnas{ display:flex; align-items:stretch; gap:6px; height:124px; overflow-x:auto; padding-top:2px; scrollbar-width:thin }
.bib-columna{ display:grid; grid-template-rows:16px 1fr 16px; flex:1 0 26px; min-width:26px; max-width:56px; text-align:center }
.bib-columna > b{ font-family:var(--f-mono); font-size:9.5px; font-weight:600; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bib-columna > span{ display:flex; align-items:flex-end; justify-content:center; border-bottom:1px solid var(--borde) }
.bib-columna i{ display:block; width:72%; min-height:0; border-radius:4px 4px 0 0; background:var(--area); opacity:.3; transition:height .24s ease }
.bib-columna.actual i{ opacity:1 }
.bib-columna small{ padding-top:4px; font-family:var(--f-mono); font-size:9px; color:var(--tx3) }
.bib-ritmo-cifras{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding-top:12px; border-top:1px solid var(--borde-s) }
.bib-ritmo-cifras .sis-cifra-v b{ font-size:18px }

/* Los otros estantes: pequeños, cada uno con su lomo de color del área. */
.bib-estantes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.bib-estante{
  min-height:64px; display:flex; flex-direction:column; justify-content:space-between; gap:4px; padding:9px 11px 9px 16px;
  border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup2); box-shadow:inset 5px 0 0 var(--area);
  text-align:left; cursor:pointer; color:var(--tx);
}
.bib-estante:hover{ border-color:var(--tx) }
.bib-estante b{ font-family:var(--f-firma); font-weight:700; font-size:15px }
.bib-estante span{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--tx3) }

/* ── Hoja de filtros (móvil; en escritorio, centrada) ── */
.bib-hoja{ position:fixed; inset:0; z-index:70 }
.bib-hoja-fondo{ position:absolute; inset:0; background:rgba(19,28,42,.45) }
.bib-hoja-caja{
  position:absolute; left:0; right:0; bottom:0; max-height:86vh; display:flex; flex-direction:column;
  background:var(--sup); border-radius:var(--r-l) var(--r-l) 0 0; box-shadow:var(--sombra-3); color:var(--tx);
}
.bib-hoja-cab{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid var(--borde-s) }
.bib-hoja-cab h3{ font-family:var(--f-tit); font-weight:800; font-size:20px }
.bib-hoja-cuerpo{ overflow:auto; padding:14px 16px; display:flex; flex-direction:column; gap:16px }
.bib-hoja fieldset{ border:0; min-width:0; display:flex; flex-direction:column; gap:8px }
/* Sin esto, el .fp (que tiene overflow propio) se encoge a 0 en la columna. */
.bib-hoja-cuerpo > *{ flex-shrink:0 }
.bib-hoja .fp{ margin:0; flex-wrap:wrap }
.bib-hoja .fp .fp-rotulo{ width:100% }
.bib-hoja-pie{ padding:12px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--borde-s) }
.bib-hoja-pie .sis-btn{ width:100% }
@media (min-width:900px){
  .bib-hoja-caja{ left:50%; right:auto; top:50%; bottom:auto; transform:translate(-50%,-50%); width:520px; max-height:80vh; border-radius:var(--r-l) }
}

/* ── Capas: ficha, buscador de alta y formularios ── */
.bib-capa{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(19,28,42,.55) }
.bib-ficha, .bib-alta, .bib-editor{
  position:relative; width:min(640px,100%); max-height:calc(100dvh - 36px); overflow:auto;
  background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:22px; box-shadow:var(--sombra-3); color:var(--tx);
}
.bib-editor{ width:min(740px,100%) }
.sis-btn-icono.bib-cerrar{ position:absolute; right:12px; top:12px; z-index:4; font-size:20px; line-height:1 }
.bib-capa-tit{ font-family:var(--f-tit); font-weight:800; font-size:22px; letter-spacing:-.01em; line-height:1.15; margin:6px 0 4px; padding-right:48px }
.bib-capa-sub{ font-size:13px; line-height:1.45; color:var(--tx2); max-width:52ch }
.bib-capa .sis-aviso{ margin-top:12px }
.bib-capa .sis-acciones{ margin-top:18px }

/* La ficha de un libro */
.bib-ficha-principal{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:22px; align-items:start; padding-right:40px }
.bib-ficha-cuerpo{ min-width:0 }
.bib-ficha-cuerpo .bib-chips{ margin-top:12px }
.bib-ficha h3{ font-family:var(--f-firma); font-weight:700; font-size:28px; line-height:1.08; margin:10px 0 4px }
.bib-ficha-autor{ font-size:14px; color:var(--tx2) }
.bib-ficha-nota{ display:flex; align-items:center; gap:10px; margin-top:14px }
.bib-ficha-progreso{ display:flex; align-items:center; gap:10px; margin-top:12px; max-width:320px }
.bib-ficha-progreso .bib-barra{ flex:1; height:6px; border-radius:3px }
.bib-ficha-progreso span{ font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--area) }
.bib-ficha-dato{ font-family:var(--f-mono); font-size:11px; color:var(--tx3); margin-top:6px }
.bib-resena{ font-family:var(--f-firma); font-size:15px; line-height:1.55; border-top:1px solid var(--borde-s); padding-top:14px; margin-top:16px }
.bib-notas{ font-size:13px; line-height:1.5; color:var(--tx2); margin-top:10px }
.bib-ficha-datos{ margin-top:14px }
.bib-historial{ display:flex; flex-direction:column; gap:8px; margin-top:16px; padding-top:12px; border-top:1px solid var(--borde-s) }
.bib-historial ol{ list-style:none; display:grid; gap:6px }
.bib-historial li{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:10px;
  padding:6px 8px 6px 12px; border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup2);
}
.bib-historial li > b{ font-size:13px; font-weight:600 }
.bib-historial li > span{ font-family:var(--f-mono); font-size:11px; color:var(--tx2) }
.bib-lectura-acciones{ display:flex; gap:4px }
.bib-lectura-acciones .sis-btn-icono{ width:32px; height:32px; font-size:18px }
.bib-lectura-editor{ grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.bib-form.bib-lectura-editor input{ width:auto; min-height:var(--h-s); padding:4px 8px }
.bib-form.bib-lectura-editor input[type="text"]{ width:72px }
.bib-lectura-editor .sis-acciones{ margin:0 0 0 auto }

/* El buscador del catálogo */
.bib-busqueda-alta{ display:flex; gap:8px; margin:16px 0 8px }
.bib-busqueda-alta input{ flex:1; min-width:0 }
.bib-resultados{ display:grid; gap:6px; margin-top:10px }
.bib-resultados > button{
  display:flex; align-items:center; gap:10px; width:100%; padding:7px; text-align:left; cursor:pointer; color:var(--tx);
  border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup);
}
.bib-resultados > button:hover{ border-color:var(--tx) }
.bib-resultados img, .bib-mini-respaldo{
  flex:0 0 auto; width:38px; height:55px; object-fit:cover; display:block;
  border-radius:2px 4px 4px 2px; background:var(--area); box-shadow:inset 4px 0 0 rgba(0,0,0,.28);
}
.bib-resultados > button > span:last-child{ display:flex; flex-direction:column; min-width:0 }
.bib-resultados b{ font-family:var(--f-firma); font-weight:600; font-size:14px; line-height:1.25 }
.bib-resultados small{ font-size:12px; color:var(--tx2); margin-top:2px }
.bib-manual{ margin-top:12px }

/* Campos de formulario (pieza común que aún no existe: ver el informe). */
.bib-form label{
  display:flex; flex-direction:column; gap:5px;
  font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3);
}
.bib-form input:not([type="file"]), .bib-form select, .bib-form textarea{
  width:100%; min-height:var(--h-m); padding:8px 12px; border:1.5px solid var(--borde); border-radius:var(--r-m);
  background:var(--sup); color:var(--tx); font-family:var(--f-txt); font-size:14px; letter-spacing:0; text-transform:none;
}
.bib-form input:focus, .bib-form select:focus, .bib-form textarea:focus{ outline:none; border-color:var(--tx) }
.bib-form textarea{ min-height:84px; resize:vertical }
.bib-form input[type="file"]{ font-size:13px; color:var(--tx2) }
.bib-editor-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin-top:16px }
.bib-editor-grid label.ancho{ grid-column:1/-1 }
.bib-editor-grid + .bib-pie{ margin-top:12px }
.bib-editor-colecciones{ grid-column:1/-1; min-width:0; margin:0; padding:10px 12px 12px; border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup2) }
.bib-editor-colecciones legend{ padding:0 4px; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3) }
.bib-editor-colecciones > p{ margin-top:8px; font-size:12px; line-height:1.4; color:var(--tx2) }
.bib-asignaciones{ display:grid; gap:6px; margin-top:8px }
.bib-asignaciones > div{
  display:grid; grid-template-columns:minmax(0,1fr) 84px 40px; align-items:end; gap:8px;
  padding:8px; border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup);
}
.bib-asignaciones > div > span{ display:flex; flex-direction:column; min-width:0 }
.bib-asignaciones > div > span small{ font-family:var(--f-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--tx3) }
.bib-asignaciones > div > span b{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bib-asignaciones label{ gap:3px }

/* ── Sagas y universos ── */
.bib-grupo{ display:block; margin:4px 0 10px }
.bib-colecciones-grid + .bib-grupo{ margin-top:22px }
.bib-colecciones-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px }
@media (min-width:700px){ .bib-colecciones-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1100px){ .bib-colecciones-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:1500px){ .bib-colecciones-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.bib-coleccion{
  display:grid; grid-template-columns:104px minmax(0,1fr); min-height:120px; overflow:hidden; padding:0;
  border:1px solid var(--borde-s); border-radius:var(--r-l); background:var(--sup); text-align:left; cursor:pointer; color:var(--tx);
}
.bib-coleccion:hover{ border-color:var(--tx2); box-shadow:var(--sombra-1) }
.bib-coleccion-portadas{ position:relative; display:flex; align-items:flex-end; justify-content:center; gap:3px; overflow:hidden; padding:12px 8px 8px; background:var(--area-suave) }
.bib-coleccion-portadas img{ position:absolute; bottom:8px; width:54px; height:82px; object-fit:cover; border-radius:2px 4px 4px 2px; box-shadow:0 5px 10px rgba(0,0,0,.2); transform:rotate(-5deg) translateX(-17px) }
.bib-coleccion-portadas img:nth-child(2){ z-index:2; transform:none }
.bib-coleccion-portadas img:nth-child(3){ transform:rotate(5deg) translateX(17px) }
/* Sin portadas: tres lomos, el motivo de la banda de Libros. */
.bib-coleccion-portadas.sin-imagen i{ display:block; width:15px; height:56px; border-radius:2px 2px 0 0; background:var(--area) }
.bib-coleccion-portadas.sin-imagen i:nth-child(2){ height:46px; background:var(--tx2) }
.bib-coleccion-portadas.sin-imagen i:nth-child(3){ height:62px; opacity:.6 }
.bib-coleccion-cuerpo{ display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; padding:12px 14px }
.bib-coleccion-cuerpo > .sis-rotulo{ overflow:hidden; text-overflow:ellipsis }
.bib-coleccion-cuerpo strong{ font-family:var(--f-firma); font-weight:700; font-size:17px; line-height:1.1 }
.bib-coleccion-cuenta{ font-family:var(--f-mono); font-size:11px; color:var(--tx2) }
.bib-coleccion-cuerpo .bib-barra{ margin-top:4px }

.bib-coleccion-ficha{ width:min(780px,100%) }
.bib-coleccion-tit{ font-family:var(--f-firma); font-weight:700; font-size:28px; line-height:1.08; margin:10px 0 4px; padding-right:40px }
.bib-coleccion-ruta{ font-family:var(--f-mono); font-size:11px; color:var(--tx3) }
.bib-coleccion-descripcion{ font-family:var(--f-firma); font-size:15px; line-height:1.5; color:var(--tx2); margin-top:12px }
.bib-coleccion-resumen{ display:flex; align-items:flex-end; gap:16px; margin:14px 0 12px }
.bib-coleccion-resumen .bib-barra{ flex:1; max-width:240px; height:6px; border-radius:3px; margin-bottom:8px }
.bib-coleccion-libros{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 10px; margin-top:12px; padding-top:14px; border-top:1px solid var(--borde-s) }
@media (min-width:700px){ .bib-coleccion-libros{ grid-template-columns:repeat(5,minmax(0,1fr)) } }
.bib-coleccion-libros > button{ display:flex; flex-direction:column; gap:3px; min-width:0; padding:0; border:0; background:none; text-align:left; cursor:pointer; color:var(--tx) }
.bib-coleccion-libros .bib-lomo{ margin-bottom:4px }
.bib-coleccion-libros .bib-libro-tit{ font-size:13px }
.bib-coleccion-orden{
  position:absolute; right:5px; top:5px; z-index:3; padding:2px 6px; border-radius:var(--r-pill);
  background:rgba(19,28,42,.85); color:#FFF; font-style:normal; font-family:var(--f-mono); font-size:10px; font-weight:600;
}

/* ── Cuentos ── */
.cue-lista{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px }
@media (min-width:700px){ .cue-lista{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1300px){ .cue-lista{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.sis-caja.cue-tarjeta{ flex-direction:row; align-items:flex-start; gap:14px }
.cue-lomo{ flex:0 0 auto; width:34px; height:50px; border-radius:2px 5px 5px 2px; background:var(--area); box-shadow:inset 6px 0 0 rgba(0,0,0,.28) }
.cue-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px }
.cue-txt h3{ font-family:var(--f-firma); font-weight:700; font-size:17px; line-height:1.2 }
.cue-notas{ font-size:13px; line-height:1.45; color:var(--tx2) }
.cue-acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px }
.cue-acciones .bib-quitar{ margin-left:auto; width:32px; height:32px; font-size:18px }
.sis-caja.cue-form{ max-width:640px; gap:6px }
.cue-form label{ margin-top:6px }
.cue-form .sis-acciones{ margin-top:10px }

/* ══ A por la oposición ══
   Una herramienta de trabajo que se mira a diario: que se lea rápido y no
   canse. El número de cada tema lleva el color de su bloque del temario (es
   un dato); todo lo demás, el sistema. */
.opo-cifras{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.opo-cifras .sis-cifra + .sis-cifra{ border-left:1px solid var(--borde-s); padding-left:12px }
.opo-cifras .sis-cifra:first-child .sis-cifra-v b{ color:var(--area) }
.opo-barra-total{ height:6px; border-radius:3px; background:var(--neutro-suave); overflow:hidden }
.opo-barra-total i{ display:block; height:100%; border-radius:3px; background:var(--area); transition:width .35s ease }
.opo-fecha{ display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.opo-fecha.bib-form input{ width:auto; min-height:var(--h-s); padding:4px 8px }
.opo-fecha .sis-btn.enlace{ padding:0 }

/* El temario: páginas de quince, con imán; 2 o 3 columnas si hay sitio. */
.opo-temario, .opo-plan{ container-type:inline-size }
.opo-temario .sis-filtros{ margin:0 }
.opo-sw-nav{ display:inline-flex; align-items:center; gap:6px }
.sis-btn-icono.opo-flecha{ width:32px; height:32px; font-size:18px }
.opo-flecha:disabled{ opacity:.35; cursor:default }
.opo-sw{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -4px }
.opo-sw::-webkit-scrollbar{ display:none }
.opo-sw-pag{ flex:0 0 100%; scroll-snap-align:start; padding:0 4px; display:flex; flex-direction:column; gap:6px }
@container (min-width:480px){ .opo-sw-pag{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; align-items:start } }
@container (min-width:720px){ .opo-sw-pag{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.opo-sw-pag > .sis-vacio{ grid-column:1/-1 }
.opo .sw-puntos{ display:flex; justify-content:center; gap:5px }
.opo .sw-puntos i{ width:7px; height:7px; border-radius:50%; background:var(--borde) }
.opo .sw-puntos i.on{ background:var(--area); transform:scale(1.2) }

.opo-tema{ background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-m); overflow:hidden }
.opo-tema.con-avance{ border-color:var(--borde) }
.opo-tema.abierto{ border-color:var(--tx); box-shadow:0 0 0 1px var(--tx) }
.opo-tema-cab{ width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border:0; background:none; text-align:left; cursor:pointer; color:var(--tx) }
.opo-tema-cab:hover{ background:var(--sup2) }
.opo-tema-n{ flex:0 0 auto; width:26px; height:26px; border-radius:7px; display:grid; place-items:center; color:#FFF; font-family:var(--f-mono); font-size:11px; font-weight:600 }
.opo-tema-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.opo-tema-txt b{ font-size:14px; font-weight:600; line-height:1.25 }
.opo-tema-txt i{ font-style:normal; font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--tx3) }
.opo-tema-pct{ flex:0 0 auto; font-family:var(--f-mono); font-size:11px; color:var(--tx2) }
.opo-tema-barra{ height:3px; background:var(--neutro-suave) }
.opo-tema-barra i{ display:block; height:100%; background:var(--area); transition:width .3s ease }
.opo-tema-cuerpo{ padding:2px 10px 10px; border-top:1px solid var(--borde-s) }
.opo-tema-largo{ font-size:13px; line-height:1.45; color:var(--tx2); margin:8px 0 10px }
.opo-fases{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px }
.opo-fase{
  height:var(--h-s); border:1.5px solid var(--borde); border-radius:var(--r-m); background:var(--sup); color:var(--tx);
  font-family:var(--f-mono); font-size:12px; font-weight:600; cursor:pointer;
}
.opo-fase:hover{ border-color:var(--tx) }
.opo-fase.on{ background:var(--tx); border-color:var(--tx); color:#FFF }
.opo-fase:disabled{ opacity:.55; cursor:default }
.sis-btn.opoex-abrir{ width:100%; margin-top:10px; justify-content:flex-start }

/* El plan semanal: páginas de dos semanas (apiladas, o lado a lado si cabe). */
.opo-semanas{ display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x mandatory }
.opo-semanas-pag{ flex:0 0 100%; min-width:0; scroll-snap-align:start; display:grid; gap:8px; align-content:start }
@container (min-width:620px){ .opo-semanas-pag{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start } }
.opo-semana{ min-width:0; padding:10px 12px; border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup2) }
/* Esta semana es «hoy»: el acento común. */
.opo-semana.actual{ border-color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento) }
.opo-semana.atrasada{ border-color:var(--error) }
.opo-semana-cab{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:8px }
.opo-semana-cab b{ font-family:var(--f-mono); font-size:12px; font-weight:600 }
.opo-semana-stat{ margin-left:auto; font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--tx2) }
.opo-semana-stat.completa{ color:var(--ok) }
.opo-semana-temas{ display:flex; flex-direction:column; gap:6px }
.opo-plan-tema{ display:flex; flex-direction:column; gap:6px }
.opo-plan-chip{
  display:flex; align-items:center; gap:6px; width:100%; padding:6px 9px; cursor:pointer; text-align:left; line-height:1.35;
  border:1.5px solid var(--borde); border-radius:var(--r-m); background:var(--sup); color:var(--tx);
  font-family:var(--f-mono); font-size:11.5px;
}
.opo-plan-chip-txt{ flex:1; min-width:0; overflow-wrap:anywhere }
.opo-plan-chip.hecho{ border-color:var(--ok); color:var(--ok); background:var(--ok-suave) }
.opo-plan-fase-etq{ flex:0 0 auto; padding:2px 7px; border-radius:var(--r-pill); color:#FFF; font-style:normal; font-size:10px; font-weight:700 }
.opo-plan-editor{ display:flex; flex-direction:column; gap:8px; padding:8px; border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup) }
.sis-btn.opo-plan-quitar{ align-self:flex-start; color:var(--error) }
.opo-plan-anadir{
  align-self:flex-start; padding:6px 12px; border:1.5px dashed var(--borde); border-radius:var(--r-pill); background:none; cursor:pointer;
  font-family:var(--f-mono); font-size:11.5px; color:var(--tx2);
}
.opo-plan-anadir:hover{ border-color:var(--tx); color:var(--tx) }
.opo-plan-anadir-fila{ display:flex; align-items:center; gap:6px; min-width:0 }
.opo-plan-anadir-fila.bib-form select{ width:auto; min-height:var(--h-s); padding:4px 8px; font-size:13px }
.opo-plan-anadir-fila.bib-form .opo-plan-anadir-sel{ flex:1; min-width:0 }
.opo-plan-anadir-fila .sis-btn-icono{ width:var(--h-s); height:var(--h-s) }

/* La columna: cómo vas (ranking común; «Sin empezar», apagado), el ritmo y lo último. */
.opo-como .sis-ranking li:last-child{ opacity:.55 }
.opo-ritmo-nota{ font-size:13px; line-height:1.5; color:var(--tx2) }
.opo-ultimos{ display:grid; gap:8px }
.opo-ultimo{ display:flex; align-items:center; gap:10px }
.opo-ultimo-f{ flex:0 0 auto; font-family:var(--f-mono); font-size:11px; color:var(--tx3) }
.opo-ultimo-n{ flex:1; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ── Los exámenes tipo test de un tema (ExamenTema.tsx) ── */
.opoex{ max-width:680px }
.opoex-tit{ font-family:var(--f-tit); font-weight:800; font-size:22px; letter-spacing:-.01em; margin-bottom:2px }
.opoex-sub{ font-size:14px; color:var(--tx2); margin-bottom:14px }
.opoex-etq{ font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); margin:10px 0 6px }
.opoex-barra{ height:6px; border-radius:3px; background:var(--neutro-suave); margin-bottom:12px; overflow:hidden }
.opoex-barra i{ display:block; height:100%; border-radius:3px; background:var(--area); transition:width .2s ease }
.opoex-origen{ font-size:11px; font-style:italic; text-align:right; color:var(--tx3); margin-bottom:4px }
/* El enunciado va en su propia tarjeta con borde marcado: en móvil, sin
   marco, pregunta y opciones se fundían y costaba leer dónde acababa una. */
.opoex-enunciado{ margin-bottom:12px; padding:14px 16px; border:2px solid var(--tx); border-radius:var(--r-l); background:var(--sup); font-size:15px; font-weight:600; line-height:1.5 }
.opoex-opciones{ display:grid; gap:8px }
.opoex-opcion{
  display:flex; align-items:flex-start; gap:10px; padding:11px 12px; text-align:left; cursor:pointer; color:var(--tx);
  border:1.5px solid var(--borde); border-radius:var(--r-m); background:var(--sup); font-size:14px; line-height:1.4;
}
.opoex-opcion b{ flex-shrink:0; font-family:var(--f-mono) }
.opoex-opcion:hover:not(:disabled){ border-color:var(--tx) }
.opoex-opcion.correcta{ border:2px solid var(--ok); background:var(--ok-suave) }
.opoex-opcion.fallada{ border:2px solid var(--error); background:var(--error-suave) }
.opoex-opcion.apagada{ opacity:.55 }
.opoex-opcion:disabled{ cursor:default }
.opoex-veredicto{ margin-top:10px; font-weight:600 }
.opoex-siguiente{ width:100%; margin-top:12px }
.opoex-tarjeta{ display:flex; align-items:center; gap:12px; margin-bottom:8px; padding:12px 14px; border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup) }
.opoex-tarjeta.bloqueada{ opacity:.55 }
.opoex-tarjeta.hecha{ border-color:var(--ok) }
.opoex-tarjeta-txt{ flex:1; min-width:0 }
.opoex-tarjeta-txt b{ display:block; font-size:14px; font-weight:600 }
.opoex-tarjeta-txt small{ font-family:var(--f-mono); font-size:11px; color:var(--tx2) }
.opoex-pct{ flex-shrink:0; font-family:var(--f-mono); font-size:15px; font-weight:700 }
.opoex-pct.bien, .opoex-resumen b.bien{ color:var(--ok) }
.opoex-pct.mal, .opoex-resumen b.mal{ color:var(--error) }
.sis-caja.opoex-resumen{ align-items:center; gap:6px; margin-top:10px; padding:22px 16px; text-align:center }
.opoex-resumen b{ font-family:var(--f-tit); font-size:44px; font-weight:800; line-height:1.05 }
.opoex-resumen p{ font-size:14px }
.opoex-resumen .opoex-nota{ font-size:13px; color:var(--tx2) }
.opoex-resumen .sis-btn{ margin-top:10px }
.opoex-feedback{ margin-top:10px; font-family:var(--f-mono); font-size:11px; line-height:1.6; color:var(--tx2) }

@media (max-width:899px){
  .bib-ficha, .bib-alta, .bib-editor{ padding:18px 16px }
  .bib-ficha-principal{ grid-template-columns:110px minmax(0,1fr); gap:16px; padding-right:36px }
  .bib-ficha h3, .bib-coleccion-tit{ font-size:22px }
  .bib-editor-grid{ grid-template-columns:1fr }
  .bib-editor-grid label.ancho, .bib-editor-colecciones{ grid-column:auto }
  .bib-coleccion{ grid-template-columns:90px minmax(0,1fr) }
  .opo-cifras .sis-cifra-v b{ font-size:20px }
}