/* ==========================================================================
   Biblioteca de Titanes del Dinero · serie-biblioteca.css
   Identidad: mostaza de las miniaturas, papel y balda de madera, sellos de
   veredicto (ACIERTA / A MEDIAS / FALLA). Se carga en el hub y en cada ficha.
   ========================================================================== */
[data-serie="biblioteca"] {
  --mostaza: #e6b33a; --mostaza-2: #f0c75e; --tinta-libro: #18261f; --papel: #f6efe0;
  --v-ok: #1f6e43; --v-medio: #8a6200; --v-mal: #a3321c;
}

/* ---------- Cabecera del hub y de la ficha: papel mostaza (igual en los dos modos) ---------- */
.cab-serie--mostaza, .cine--mostaza { background: var(--mostaza); color: var(--tinta-libro); }
.cab-serie--mostaza .migas a, .cine--mostaza .migas a, .cab-serie--mostaza .migas ol, .cine--mostaza .migas ol { color: #2d3a31; }
.cab-serie--mostaza .migas li + li::before, .cine--mostaza .migas li + li::before { color: #5c4a14; }
.cab-serie--mostaza .antetitulo, .cine--mostaza .antetitulo { color: #2d3a31; }
.cab-serie--mostaza .antetitulo::before { background: var(--tinta-libro); }
.cab-serie--mostaza .boton--linea, .cine--mostaza .boton--linea { color: var(--tinta-libro); border-color: var(--tinta-libro); }
.cab-serie--mostaza .boton--linea:hover, .cine--mostaza .boton--linea:hover { background: rgb(255 255 255 / .25); }
.cab-serie--mostaza .avisame, .cine--mostaza .avisame { color: var(--tinta-libro); border-color: var(--tinta-libro); }
.cab-serie--mostaza .boton:not(.boton--linea), .cine--mostaza .boton:not(.boton--linea) { background: var(--tinta-libro); color: #fefeea; }
.cab-serie--mostaza :focus-visible, .cine--mostaza :focus-visible { outline-color: var(--tinta-libro); }
.cab-serie--mostaza .sello { box-shadow: inset 0 0 0 1.5px var(--tinta-libro); }

/* Hoy en la Biblioteca: tarjeta del estreno dentro de la cabecera */
.esta-noche { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--e-4); align-items: center; padding: var(--e-3); border-radius: var(--r-3); background: #f3d27a; border: 2px solid var(--tinta-libro); box-shadow: 5px 5px 0 var(--tinta-libro); }
.esta-noche img { border-radius: var(--r-1); aspect-ratio: 16 / 9; object-fit: cover; }
.esta-noche .meta { color: #2d3a31; display: block; margin-bottom: .2rem; }
.esta-noche b { display: block; font-size: 1.0625rem; line-height: 1.25; margin-bottom: .5rem; }

/* ---------- Estantería de lomos ---------- */
.estanteria { position: relative; margin-top: var(--e-6); }
.lomos {
  display: flex; align-items: flex-end; gap: 5px; margin: 0; padding: 1rem 0 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.lomos::-webkit-scrollbar { display: none; }
.lomos li { flex: 1 0 3.5rem; max-width: 5.25rem; }
.lomo {
  --alto: 15.5rem; --fondo: #18261f; --letra: #fefeea;
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: .55rem;
  width: 100%; height: var(--alto); padding: .7rem .25rem .6rem; border-radius: 4px 4px 2px 2px;
  background: var(--fondo); color: var(--letra); text-decoration: none;
  box-shadow: inset 3px 0 0 rgb(255 255 255 / .14), inset -3px 0 0 rgb(0 0 0 / .18), 0 2px 0 rgb(0 0 0 / .2);
  transition: transform var(--rapido) var(--suave);
}
.lomo:hover { transform: translateY(-6px); }
.lomo:focus-visible { outline: 3px solid var(--tinta-libro); outline-offset: 3px; }
.lomo__n { font: 700 .75rem/1 var(--mono); }
/* El título va colocado a mano entre el número (arriba) y las marcas o la fecha (abajo): así no depende de cómo calcule cada
   navegador la altura del texto vertical (Safari lo dejaba crecer y pisaba las marcas). */
.lomo__titulo {
  position: absolute; left: 50%; top: 2.15rem; bottom: calc(.6rem + var(--marcas, 0) * 8px + .55rem);
  max-width: calc(100% - .6rem); transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl; font: 700 .875rem/1.15 var(--sans); letter-spacing: -0.005em; overflow: hidden; text-align: left;
}
.lomo--hoy .lomo__titulo, .lomo--prox .lomo__titulo { bottom: calc(.6rem + 1.75rem + .55rem); }
.lomo__marcas, .lomo__estado { grid-row: 3; }
/* El título nunca pisa las marcas ni el número: ocupa solo su hueco y, si es largo, pasa a dos columnas con letra menor */
.lomo__titulo--l { font-size: .78rem; }
.lomo__titulo--xl { font-size: .7rem; line-height: 1.1; }
.lomo__marcas { display: grid; gap: 3px; }
.lomo__marcas i { display: block; width: 1.4rem; height: 5px; border-radius: 1px; box-shadow: 0 0 0 1px rgb(255 255 255 / .55); }
.lomo__marcas .v-acierta { background: #3fae6a; }
.lomo__marcas .v-medias { background: #f0c75e; }
.lomo__marcas .v-falla { background: #e0603f; }
.lomo--c1 { --fondo: #18261f; --letra: #fefeea; }
.lomo--c2 { --fondo: #7d2e1c; --letra: #fdf3e3; }
.lomo--c3 { --fondo: #f6efe0; --letra: #18261f; }
.lomo--c4 { --fondo: #234b6e; --letra: #f4f1e6; }
.lomo--c5 { --fondo: #3d3127; --letra: #f6e7c8; }
.lomo--c3 .lomo__marcas i { box-shadow: 0 0 0 1px rgb(24 38 31 / .45); }
.lomo--hoy { --fondo: #fefeea; --letra: #18261f; outline: 3px solid var(--tinta-libro); outline-offset: -3px; }
.lomo--hoy .lomo__estado { background: var(--tinta-libro); color: #f0c75e; }
.lomo--prox {
  --fondo: #f8e7b3; --letra: #3a2d05;
  background-image: repeating-linear-gradient(135deg, rgb(24 38 31 / .07) 0 6px, transparent 6px 12px);
  box-shadow: inset 0 0 0 1.5px rgb(24 38 31 / .45);
}
.lomo__estado { padding: .2rem .25rem; border-radius: 3px; background: rgb(24 38 31 / .12); font: 700 .75rem/1.15 var(--mono); text-align: center; text-transform: uppercase; }
.balda--hub { height: 16px; margin: 0; border-radius: 0 0 3px 3px; background: linear-gradient(#a5761b, #7d5712); box-shadow: 0 10px 18px -10px rgb(0 0 0 / .6); }
.estanteria__leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: var(--e-3) 0 0; padding: 0; list-style: none; font-size: .875rem; color: #2d3a31; }
.estanteria__leyenda li { display: inline-flex; align-items: center; gap: .45rem; }
.estanteria__leyenda i { width: 1.2rem; height: 6px; border-radius: 1px; box-shadow: 0 0 0 1px rgb(24 38 31 / .4); }

/* ---------- Sellos de veredicto: siempre con texto ---------- */
.veredicto {
  display: inline-flex; align-items: center; gap: .35rem; width: fit-content; padding: .3rem .6rem .3rem .45rem;
  border: 2px solid currentColor; border-radius: 6px; font: 800 .8125rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  transform: rotate(-3deg); background: var(--sup); white-space: nowrap;
}
.veredicto .ico { width: 1rem; height: 1rem; stroke-width: 2.5; }
.veredicto--acierta { color: var(--ok); }
.veredicto--medias { color: var(--medio); }
.veredicto--falla { color: var(--mal); }
.recuento { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.recuento li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .3rem .8rem; padding: .8rem 1rem; border-radius: var(--r-3); background: var(--sup); border: 1px solid var(--borde-2); }
.recuento b { grid-row: span 2; font: 300 2.5rem/1 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.recuento .veredicto { transform: none; background: transparent; }
.recuento small { font-size: .875rem; color: var(--texto-2); }
.recuento--grande li { flex: 1 1 12rem; padding: var(--e-5); }
.recuento--grande b { font-size: clamp(3rem, 2.4rem + 2.4vw, 4.5rem); }
.cine--mostaza .recuento li { background: #f8e6ad; border: 1.5px solid var(--tinta-libro); }
.cine--mostaza .recuento small { color: #2d3a31; }
.cine--mostaza .recuento .veredicto--acierta { color: #155c35; } .cine--mostaza .recuento .veredicto--medias { color: #6e4d00; } .cine--mostaza .recuento .veredicto--falla { color: #8f2a16; }

/* ---------- Rejilla de libros del hub ---------- */
.libros { display: grid; gap: var(--e-6) var(--hueco); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.libros .tv { gap: .45rem; }
.libro-pronto { display: grid; align-content: space-between; aspect-ratio: 16 / 9; padding: .9rem 1rem; border-radius: var(--r-3); background: #e6b33a; color: #18261f; box-shadow: inset 0 0 0 2px rgb(24 38 31 / .25); background-image: repeating-linear-gradient(135deg, rgb(24 38 31 / .06) 0 8px, transparent 8px 16px); }
.libro-pronto b { font: 850 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.02 var(--sans); letter-spacing: -0.03em; text-transform: uppercase; max-width: 14ch; }
.libro-pronto span { justify-self: start; padding: .3rem .55rem; border-radius: 4px; background: #18261f; color: #f0c75e; font: 700 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.libro__autor { margin: 0; color: var(--texto-2); font-size: .9375rem; }
.libro__estreno { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .2rem 0 0; font: 600 var(--t-mono)/1.3 var(--mono); color: var(--oro-texto); }

/* ---------- Cara a cara ---------- */
.caras { display: grid; gap: var(--hueco); grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.cara { display: grid; gap: var(--e-4); padding: var(--e-5); border-radius: var(--r-4); background: var(--sup); border: 1px solid var(--borde); }
.cara h3 { font-size: var(--t-xl); }
.cara__duelo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--e-3); align-items: stretch; }
.cara__lado { padding: var(--e-4); border-radius: var(--r-3); background: var(--sup-2); }
.cara__lado p { margin: .4rem 0 0; font-size: .9375rem; color: var(--texto-2); }
.cara__lado b { display: block; font-size: 1rem; line-height: 1.25; }
.cara__lado .meta { display: block; margin-bottom: .3rem; }
.cara__vs { align-self: center; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #e6b33a; color: #18261f; font: 800 .875rem/1 var(--mono); }
@media (max-width: 34.99rem) { .cara__duelo { grid-template-columns: 1fr; } .cara__vs { justify-self: center; } }

/* ---------- Ficha de libro ---------- */
.cine--mostaza .cine__entrada, .cine--mostaza .firma, .cine--mostaza .cine__posicion { color: #2d3a31; }
.cine--mostaza .cine__entrada strong { color: var(--tinta-libro); }
.cine--mostaza .cine__cinta, .cine--mostaza .cine__cinta a { color: var(--tinta-libro); }
.cine--mostaza .cine__cinta .etiqueta { background: rgb(254 254 234 / .5); color: var(--tinta-libro); }
.cine--mostaza .capitulos { background: #fbf3dc; border-color: rgb(24 38 31 / .25); color: var(--tinta-libro); }
.cine--mostaza .capitulos__titulo { color: #2d3a31; border-color: rgb(24 38 31 / .2); }
.cine--mostaza .capitulos a { color: var(--tinta-libro); }
.cine--mostaza .capitulos a:hover { background: #f3e2b0; }
.cine--mostaza .capitulos time { color: #6e4d00; }
.cine--mostaza .reproductor { box-shadow: 0 0 0 2px var(--tinta-libro), 8px 8px 0 var(--tinta-libro); }
.cine--mostaza .firma li { color: #2d3a31; }
.cine--mostaza .autor-libro { margin: -.25rem 0 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 600; }
/* En móvil, la tira va sin panel (como en las guías): el fondo lo lleva cada capítulo y «Capítulos» no queda pegado al borde. */
@media (max-width: 63.99rem) { .cine--mostaza .capitulos { background: transparent; border: 0; } .cine--mostaza .capitulos a { background: #fbf3dc; border-color: rgb(24 38 31 / .3); } }

.idea { position: relative; padding: var(--e-5) 0 var(--e-6); border-top: 2px solid var(--texto); scroll-margin-top: calc(var(--cab) + 1rem); }
.idea + .idea { margin-top: 0; }
.idea__cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1.25rem; margin-bottom: var(--e-4); }
.idea__num { display: block; margin-bottom: .35rem; font: 600 var(--t-mono)/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--texto-3); }
.idea h3 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); letter-spacing: -0.028em; }
.idea .veredicto { flex: none; margin-top: .35rem; }
.idea > p { margin: 0 0 var(--e-4); }
.en-espana { margin: var(--e-4) 0; padding: var(--e-4) var(--e-5); border-radius: var(--r-3); background: var(--sup-2); border-left: 4px solid #e6b33a; }
.en-espana p.en-espana__titulo { display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem !important; font: 650 var(--t-mono)/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--bi-tinta); }
.en-espana p { margin: 0; font-size: 1rem; }
.ficha-libro dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; margin: 0; font-size: .9375rem; }
.ficha-libro dt { font: 600 var(--t-mono)/1.5 var(--mono); color: var(--texto-3); }
.ficha-libro dd { margin: 0; color: var(--texto); }
.ficha-libro dd a { display: inline-block; padding-block: .2rem; margin-block: -.2rem; } /* objetivo táctil de 24 px (WCAG 2.5.8) */
.proximos-libros { margin-top: var(--e-7); }
.proximos-libros h3 { margin-bottom: var(--e-4); font-size: var(--t-xl); }
.libros--prox { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--e-5) var(--hueco); }
.libros--prox .libro-pronto { aspect-ratio: 16 / 10; }
.libros--prox .tv__titulo { font-size: 1rem; }
@media (max-width: 39.99rem) {
  .recuento:not(.recuento--grande) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .recuento:not(.recuento--grande) li { grid-template-columns: 1fr; justify-items: start; padding: .6rem .65rem; }
  .recuento:not(.recuento--grande) b { grid-row: auto; font-size: 2rem; }
  .recuento:not(.recuento--grande) .veredicto { font-size: .75rem; padding: .25rem .4rem; }
}

/* Móvil: el sello del veredicto, siempre debajo del título de la lección (antes, a su lado o debajo según el largo
   del título); y el balance de la Biblioteca en una fila de tres, como el recuento de cada libro */
@media (max-width: 39.99rem) {
  .idea__cab { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .recuento--grande { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .recuento--grande li { grid-template-columns: minmax(0, 1fr); align-content: start; gap: .45rem; padding: .85rem .7rem; }
  .recuento--grande b { grid-row: auto; font-size: 2.5rem; }
  .recuento--grande .veredicto { justify-self: start; padding-inline: .45rem; }
  .recuento--grande .veredicto .ico { display: none; } /* «A MEDIAS» con icono no cabía en un tercio de pantalla */
  .recuento--grande small { font-size: .8125rem; line-height: 1.35; }
}