/* ─────────────────────────────────────────────────────────────
   LOS OCHO MUNDOS

   Un tema no es una paleta. Es un material, una forma de cortar
   las esquinas, una textura, un signo que separa las secciones.
   Aquí vive todo eso: lo que un token de color no puede decir.

   Los tokens (src/themes.js) se aplican como estilo en línea sobre
   :root, así que ganan a cualquier regla de aquí. Por eso este
   archivo NO repite colores: solo añade lo que los tokens no
   alcanzan — seudoelementos, ornamentos, texturas y geometría.
   ───────────────────────────────────────────────────────────── */

/* ── CAPAS DE ATMÓSFERA ──────────────────────────────────────
   Dos capas fijas sobre el fondo y bajo el contenido: la textura
   del material y el viñeteado. Cada tema las enciende o apaga. */

.texture-layer,
.vignette-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.texture-layer {
  background-image: var(--texture);
  background-size: var(--texture-size);
  opacity: var(--texture-opacity);
  mix-blend-mode: var(--texture-blend);
}
.vignette-layer { background: var(--vignette); }

/* ── ORNAMENTO DE SECCIÓN ────────────────────────────────────
   El signo que remata cada encabezado. Cambia con el mundo:
   ❧ en el grimorio, [ ] en la terminal, nada en la obsidiana. */

.section-heading::before,
.section-heading::after {
  background: var(--rule-line);
  height: var(--rule-height);
}
.section-heading-text {
  font-weight: var(--display-weight);
  text-transform: var(--label-transform);
  letter-spacing: var(--label-spacing);
}
.section-heading-text::before {
  content: var(--ornament);
  color: var(--ornament-color);
  margin-right: .5em;
  opacity: .85;
}

/* Las tarjetas necesitan contexto para sus filos y márgenes. */
.book-card, .lib-card, .tracker-card { position: relative; }


/* ═════════════════════════════════════════════════════════════
   ✨ GRIMORIO · manuscrito iluminado
   Firma: el margen dorado. Una barra de oro degradado al filo
   izquierdo de cada libro, como la miniatura de un códice.
   ═════════════════════════════════════════════════════════════ */

[data-theme="grimorio"] .book-card::before,
[data-theme="grimorio"] .lib-card::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: .75;
}
[data-theme="grimorio"] .brand-title { text-shadow: 0 0 18px rgb(var(--gold-rgb) / .35); }


/* ═════════════════════════════════════════════════════════════
   🌑 OBSIDIANA · vidrio volcánico
   Firma: el filo de luz. Sin bordes, sin brillos, sin estrellas.
   Solo una línea de luz de 1px en el canto superior, como la que
   atrapa una piedra pulida. Todo lo demás es negro y aire.
   ═════════════════════════════════════════════════════════════ */

[data-theme="obsidiana"] .book-card,
[data-theme="obsidiana"] .lib-card,
[data-theme="obsidiana"] .tracker-card,
[data-theme="obsidiana"] .year-btn {
  border-top: 1px solid rgb(255 255 255 / .07);
}
[data-theme="obsidiana"] .brand-title,
[data-theme="obsidiana"] .month-name-text,
[data-theme="obsidiana"] .book-card-title {
  font-weight: 600;
}
[data-theme="obsidiana"] .book-card-title { font-size: 16px; letter-spacing: -.2px; }
[data-theme="obsidiana"] .month-group { margin-bottom: 34px; }
/* Sin filete: el tema no adorna nada. El rótulo se sostiene solo. */
[data-theme="obsidiana"] .section-heading::after { display: none; }


/* ═════════════════════════════════════════════════════════════
   ☀️ PERGAMINO · papel envejecido
   Firma: el renglón. Los libros dejan de ser tarjetas y pasan a
   ser entradas de un índice, separadas por una línea de tinta.
   El mes va en el margen, como en un libro de verdad.
   ═════════════════════════════════════════════════════════════ */

/* El renglón que este tema inventó —libros como entradas de un índice,
   sin tarjeta— pasó a ser como se pintan en TODOS los temas. Lo que
   queda aquí es solo lo suyo: el filete más marcado bajo cada mes y el
   nombre del mes en cursiva, como el titulillo de un libro impreso. */
[data-theme="pergamino"] .book-card,
[data-theme="pergamino"] .lib-card { border-bottom-color: rgb(var(--lilac-rgb) / .22); }
[data-theme="pergamino"] .month-name-text { font-size: 19px; font-style: italic; }
[data-theme="pergamino"] .month-label {
  border-bottom: 2px solid rgb(var(--lilac-rgb) / .3);
  padding-bottom: 6px;
}
[data-theme="pergamino"] .month-label .month-rule { display: none; }
[data-theme="pergamino"] .book-card-title { font-size: 16px; }


/* ═════════════════════════════════════════════════════════════
   🌿 HERBARIO · cuaderno de campo
   Firma: la etiqueta de espécimen. El género cuelga como una
   ficha atada, sobre papel cuadriculado de botánica.
   ═════════════════════════════════════════════════════════════ */

/* La etiqueta de espécimen. `.tag` ya no trae forma —es un dato al
   margen— así que aquí se le pone entera, y se quitan los puntos que
   separan los datos: una etiqueta atada no necesita separador. */
[data-theme="herbario"] .tag {
  position: relative;
  border-radius: 3px;
  padding: 2px 8px 2px 16px;
  background: rgb(var(--gold-rgb) / .1);
  border: 1px solid rgb(var(--gold-rgb) / .35);
  color: var(--lilac);
}
[data-theme="herbario"] .tag + .tag::before { content: none; }
[data-theme="herbario"] .tag::before {
  content: '';
  position: absolute;
  left: 5px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  border: 1px solid rgb(var(--gold-rgb) / .7);
}
[data-theme="herbario"] .book-card { border-left: 3px solid rgb(var(--violet-rgb) / .45); }


/* ═════════════════════════════════════════════════════════════
   🌊 MAREA · agua profunda
   Firma: la línea de marea. Una banda luminosa que cruza el fondo
   muy despacio, como luz filtrándose bajo el agua. Nada tiene
   borde: todo flota sobre su propia sombra difusa.
   ═════════════════════════════════════════════════════════════ */

[data-theme="marea"] .bg-canvas::after {
  background-image:
    linear-gradient(180deg, transparent 44%, rgb(var(--lilac-rgb) / .16) 50%, transparent 56%);
  background-size: 100% 220vh;
  animation: tide 26s ease-in-out infinite alternate;
  opacity: 1;
}
@keyframes tide {
  from { background-position: 0 -40vh; }
  to   { background-position: 0 60vh; }
}
[data-theme="marea"] .book-card,
[data-theme="marea"] .lib-card,
[data-theme="marea"] .tracker-card { backdrop-filter: blur(14px); }


/* ═════════════════════════════════════════════════════════════
   🕯️ GÓTICO · nave iluminada por velas
   Firma: el arco. Las portadas y los meses rematan en arco, como
   un vitral. La pantalla se oscurece por los bordes y una luz
   cálida cae desde arriba.
   ═════════════════════════════════════════════════════════════ */

/* El arco iba en TODAS las portadas de la lista, y desde que un libro
   sin portada se dibuja como su lomo, eso era un lomo con cúpula: los
   libros no tienen forma de ventana. El arco se queda donde sí es un
   arco — el hueco de la ficha, con el libro de pie dentro, como una
   hornacina— y ahí gana. */
[data-theme="gotico"] .detail-libro {
  border-radius: 50% 50% 3px 3px / 18% 18% 3px 3px;
  overflow: hidden;
}
[data-theme="gotico"] .brand-title { text-shadow: 0 0 24px rgb(var(--gold-rgb) / .45); }


/* ═════════════════════════════════════════════════════════════
   🌸 SAKURA · espacio y aire
   Firma: la línea vertical. Los encabezados se marcan con un
   trazo vertical a la izquierda, como escritura en tategaki.
   Sin bordes, sin reglas horizontales: separa el vacío.
   ═════════════════════════════════════════════════════════════ */

[data-theme="sakura"] .section-heading::before,
[data-theme="sakura"] .section-heading::after { display: none; }
[data-theme="sakura"] .section-heading { justify-content: flex-start; }
[data-theme="sakura"] .section-heading-text {
  border-left: 2px solid var(--violet);
  padding-left: 12px;
  line-height: 1.9;
}
[data-theme="sakura"] .book-card,
[data-theme="sakura"] .lib-card {
  border: 0;
  background: rgb(var(--deep-rgb) / .5);
  margin-bottom: 14px;
}
[data-theme="sakura"] .month-group { margin-bottom: 40px; }
[data-theme="sakura"] .month-label { margin-bottom: 18px; }
[data-theme="sakura"] .view { padding: 22px 20px; }


/* ═════════════════════════════════════════════════════════════
   🖨️ MÁQUINA · terminal
   Firma: los corchetes y las marcas de esquina. Todo es dato:
   sin curvas, sin sombras, con líneas de barrido sobre la pantalla.
   ═════════════════════════════════════════════════════════════ */

[data-theme="maquina"] .section-heading::before,
[data-theme="maquina"] .section-heading::after { display: none; }
[data-theme="maquina"] .section-heading { justify-content: flex-start; }
[data-theme="maquina"] .section-heading-text::before { content: '['; margin-right: .4em; }
[data-theme="maquina"] .section-heading-text::after  { content: ']'; margin-left: .4em; color: var(--ornament-color); }
[data-theme="maquina"] .book-card::before,
[data-theme="maquina"] .book-card::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-color: var(--gold);
  border-style: solid;
}
[data-theme="maquina"] .book-card::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
[data-theme="maquina"] .book-card::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
[data-theme="maquina"] .book-card-title,
[data-theme="maquina"] .lib-title { letter-spacing: -.3px; }


/* ═════════════════════════════════════════════════════════════
   🌾 EL PRINCIPITO · el desierto al anochecer
   Firma: el horizonte. La arena tibia sube desde el borde inferior
   de la pantalla — el desierto donde cayó el aviador — bajo un
   cielo índigo con estrellas dibujadas a mano.

   Las esquinas son desiguales a propósito: trazadas, no impresas.
   ═════════════════════════════════════════════════════════════ */

/* La letra a mano necesita más aire que una imprenta para leerse bien. */
[data-theme="principito"] .book-card-title,
[data-theme="principito"] .lib-title {
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: .2px;
}
[data-theme="principito"] .month-name-text { font-size: 18px; }
[data-theme="principito"] .brand-title { font-size: 22px; }

/* La runa del mes es su asteroide: un planeta pequeño con halo. */

/* Nada tiene borde duro: la acuarela no traza contornos. */
[data-theme="principito"] .book-card,
[data-theme="principito"] .lib-card,
[data-theme="principito"] .tracker-card { border: 0; }

/* Las estrellas titilan muy despacio. El principito le dice al aviador
   que al mirarlas oirá reír a todas las estrellas. */
[data-theme="principito"] .bg-canvas::after {
  animation: estrellas 7s ease-in-out infinite alternate;
}
@keyframes estrellas {
  from { opacity: .55; }
  to   { opacity: .9; }
}




/* ═════════════════════════════════════════════════════════════
   LOS ADORNOS

   En un libro impreso cada capítulo termina con una viñeta del
   impresor: una hoja, un rombo, una rama. Aquí cada tema tiene la
   suya y cierra la lista cuando terminas de bajar — el premio por
   haber llegado al final, que es justo donde no molesta.

   Los diez dibujos están en el pliego del index.html y se eligen
   SOLO CON CSS: nada de repintar al cambiar de tema, y ninguna
   posibilidad de que la viñeta se quede en la del tema anterior.
   ═════════════════════════════════════════════════════════════ */

.vineta {
  display: flex;
  justify-content: center;
  padding: 34px 0 14px;
  color: var(--gold);
  opacity: .48;
}
.vineta svg {
  width: 92px; height: 50px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
/* Una lista vacía no se remata: no ha terminado nada. */
.view:has(#plan-body:empty) .vineta,
.view:has(#lib-body:empty) .vineta,
.view:has(#tracker-body:empty) .vineta { display: none; }

/* El mismo mecanismo sirve para el florón de la portada de acceso: se
   listan los once y manda el atributo del `html`. Los selectores van
   juntos para que añadir un tema nuevo sea una línea y no dos sitios
   que se olvidan por separado. */
.vineta use, .portada-vineta use { display: none; }
[data-theme="exlibris"] .portada-vineta use[data-tema="exlibris"],
[data-theme="grimorio"] .portada-vineta use[data-tema="grimorio"],
[data-theme="obsidiana"] .portada-vineta use[data-tema="obsidiana"],
[data-theme="pergamino"] .portada-vineta use[data-tema="pergamino"],
[data-theme="herbario"] .portada-vineta use[data-tema="herbario"],
[data-theme="marea"] .portada-vineta use[data-tema="marea"],
[data-theme="gotico"] .portada-vineta use[data-tema="gotico"],
[data-theme="sakura"] .portada-vineta use[data-tema="sakura"],
[data-theme="principito"] .portada-vineta use[data-tema="principito"],
[data-theme="maquina"] .portada-vineta use[data-tema="maquina"],
[data-theme="manta"] .portada-vineta use[data-tema="manta"] { display: block; }
html:not([data-theme]) .portada-vineta use[data-tema="exlibris"] { display: block; }

[data-theme="exlibris"] .vineta use[data-tema="exlibris"],
[data-theme="grimorio"] .vineta use[data-tema="grimorio"],
[data-theme="obsidiana"] .vineta use[data-tema="obsidiana"],
[data-theme="pergamino"] .vineta use[data-tema="pergamino"],
[data-theme="herbario"] .vineta use[data-tema="herbario"],
[data-theme="marea"] .vineta use[data-tema="marea"],
[data-theme="gotico"] .vineta use[data-tema="gotico"],
[data-theme="sakura"] .vineta use[data-tema="sakura"],
[data-theme="principito"] .vineta use[data-tema="principito"],
[data-theme="maquina"] .vineta use[data-tema="maquina"] { display: block; }
[data-theme="manta"] .vineta use[data-tema="manta"] { display: block; }
/* Antes de que el módulo aplique el tema, el de casa. */
html:not([data-theme]) .vineta use[data-tema="exlibris"] { display: block; }

/* ═════════════════════════════════════════════════════════════
   🧶 MANTA · lana y tarde de domingo
   Firma: la puntada. Entre un libro y el siguiente no hay un filete
   de tinta —eso es Pergamino— sino un pespunte: hilo, hueco, hilo.
   Es lo mismo que hace el borde de una manta, y es lo que separa a
   los dos temas claros cuando alguien los ve uno detrás de otro.

   El resto del carácter va en los tokens: todo redondo, la crema
   dorada de la lámina y una serif de remates blandos.
   ═════════════════════════════════════════════════════════════ */

[data-theme="manta"] .book-card,
[data-theme="manta"] .lib-card { border-bottom-color: transparent; }
[data-theme="manta"] .book-card::after,
[data-theme="manta"] .lib-card::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,
    rgb(var(--lilac-rgb) / .42) 0 8px, transparent 8px 14px);
}
/* El mes se cose con el mismo hilo, en el color del realce. */
[data-theme="manta"] .month-label .month-rule {
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,
    rgb(var(--gold-rgb) / .38) 0 8px, transparent 8px 14px);
}


/* ── LO QUE VIVE EN EL FONDO ────────────────────────────────── */
.mundo {
  position: fixed;
  inset: auto 0 0 0;
  /* Bajo y pequeño: es el horizonte, no la escena principal. Con
     `slice` se ampliaba hasta pisar la lista de libros. */
  height: 34vh;
  max-height: 250px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 100%;
  /* Se desvanece por arriba para que la escena no tenga un borde recto
     contra el fondo: el horizonte aparece, no se pega. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%);
  mask-image: linear-gradient(180deg, transparent, #000 42%);
}
/* CADA TEMA CON ESCENA, SU IMAGEN. Esta lista es el inventario: si un
   tema no está aquí es que aún no tiene lámina, y su fondo queda vacío
   sin que haya nada que apagar.

   Va por `background-image` a propósito. Con un <img> por tema había
   que esconder nueve, y una imagen con `display:none` se descarga
   igual: eran ~430 KB en cada apertura para enseñar unos 60. El fondo
   de una regla que no casa no se pide NUNCA, así que aquí la carga
   perezosa la hace el navegador y no hay que programarla.

   Se coloca por el borde de abajo y recorta por los lados: la lámina
   llega a 2:1 y una pantalla estrecha es más alta que eso, así que o
   se recorta o se deforma. */
[data-theme="exlibris"]   .mundo { background-image: url('../img/tema/exlibris.webp'); }
[data-theme="grimorio"]   .mundo { background-image: url('../img/tema/grimorio.webp'); }
[data-theme="obsidiana"]  .mundo { background-image: url('../img/tema/obsidiana.webp'); }
[data-theme="pergamino"]  .mundo { background-image: url('../img/tema/pergamino.webp'); }
[data-theme="herbario"]   .mundo { background-image: url('../img/tema/herbario.webp'); }
[data-theme="marea"]      .mundo { background-image: url('../img/tema/marea.webp'); }
[data-theme="gotico"]     .mundo { background-image: url('../img/tema/gotico.webp'); }
[data-theme="sakura"]     .mundo { background-image: url('../img/tema/sakura.webp'); }
[data-theme="principito"] .mundo { background-image: url('../img/tema/principito.webp'); }
[data-theme="manta"]      .mundo { background-image: url('../img/tema/manta.webp'); }

/* Un tema con escena necesita que la lista termine ANTES de ella: si
   no, la viñeta de remate cae encima del dibujo y parece un descuido.
   Esta lista va con la de arriba: un tema que gane escena y no entre
   aquí se queda con el remate pisando la lámina.

   Y EL HUECO DEL FINAL NO BASTA. Solo arregla el final: a mitad de la
   lista las filas siguen pasando por encima de la parte opaca del
   dibujo, y ahí no es que quede feo, es que NO SE LEEN. Se veía en
   Pergamino desde que se pusieron las láminas y no lo vi porque solo
   miré el final de las listas, que es justo donde el hueco lo tapa.

   Así que la lista se desvanece antes de llegar: la fila se vuelve
   invisible en vez de ilegible, se lee como la página metiéndose bajo
   el horizonte, y basta seguir bajando para traerla a la zona
   limpia —el hueco de abajo garantiza que siempre se puede—. */
[data-theme="exlibris"] .scroll-area,
[data-theme="grimorio"] .scroll-area,
[data-theme="obsidiana"] .scroll-area,
[data-theme="pergamino"] .scroll-area,
[data-theme="herbario"] .scroll-area,
[data-theme="marea"] .scroll-area,
[data-theme="gotico"] .scroll-area,
[data-theme="sakura"] .scroll-area,
[data-theme="principito"] .scroll-area,
[data-theme="manta"] .scroll-area {
  /* Los números salen de la geometría de la lámina, no del ojo: mide
     250 px y se vuelve opaca al 42 %, o sea a 145 px del borde de
     abajo. Ahí es donde el contenido tiene que haber desaparecido ya,
     y el desvanecido arranca 130 px antes para que sea un degradado y
     no un corte. El hueco del final deja la última fila por encima. */
  padding-bottom: 300px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 275px), transparent calc(100% - 145px));
  mask-image: linear-gradient(180deg, #000 calc(100% - 275px), transparent calc(100% - 145px));
}

/* ── LA ESTRELLA FUGAZ · Grimorio ───────────────────────────── */
.fugaz {
  position: fixed;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 6px 1px rgb(var(--gold-rgb) / .9);
}
.fugaz::before {
  content: '';
  position: absolute;
  right: 1px; top: 50%;
  width: 84px; height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(270deg, rgb(255 255 255 / .85), transparent);
}
[data-theme="grimorio"] .fugaz {
  animation: fugaz 11s cubic-bezier(.2, .5, .4, 1) infinite;
}
/* Cruza una vez y desaparece: los otros nueve segundos no está. */
@keyframes fugaz {
  0%      { opacity: 0; transform: translate(78vw, -6vh) rotate(28deg); }
  2%      { opacity: 1; }
  11%     { opacity: 1; }
  14%     { opacity: 0; transform: translate(14vw, 40vh) rotate(28deg); }
  100%    { opacity: 0; transform: translate(14vw, 40vh) rotate(28deg); }
}


/* ── Nadie debería marearse por un tema. ── */
@media (prefers-reduced-motion: reduce) {
  .fugaz { animation: none !important; }
  [data-theme="marea"] .bg-canvas::after,
  [data-theme="principito"] .bg-canvas::after { animation: none; }
}