/* ============================================================
   libros.css — tokens compartidos, componente "tapa" y biblioteca
   Los libros de Zafi · sin dependencias externas
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --papel:      #fdf6e7;
  --papel-2:    #f7e9cf;
  --papel-3:    #f0dcb8;
  --tinta:      #3b2a1c;
  --tinta-2:    #6d5540;
  --tinta-3:    #9c8265;
  --miel:       #e8a33d;
  --miel-osc:   #c9761b;
  --fondo:      #2a1d14;
  --fondo-2:    #3d2a1c;

  --radio:      28px;
  --radio-ch:   16px;
  --sombra:     0 18px 44px -14px rgba(60,35,10,.45);
  --sombra-alta:0 30px 70px -20px rgba(30,15,0,.6);

  --fuente-cuerpo: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
                   "Chalkboard SE", "Comic Sans MS", "Segoe UI", system-ui,
                   -apple-system, Roboto, sans-serif;
  --fuente-titulo: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                   "Times New Roman", serif;

  /* color por libro (lo pisa el JS con style="--c1:..;--c2:..") */
  --c1: #f6c667;
  --c2: #d98324;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html,body{ margin:0; padding:0; }
body{
  font-family: var(--fuente-cuerpo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
button{ font: inherit; color: inherit; }
img{ max-width:100%; display:block; }

/* ============================================================
   TAPA (se usa en la biblioteca, en el inicio del visor
   y en la página de colección)
   ============================================================ */
.tapa{
  position:relative;
  aspect-ratio: 71 / 100;
  width:100%;
  border-radius: 6px 18px 18px 6px;
  overflow:hidden;
  background: linear-gradient(150deg, var(--c1), var(--c2) 78%);
  box-shadow: var(--sombra);
  container-type: inline-size;
  isolation:isolate;
}
/* OJO: las unidades cqw NO resuelven contra el propio contenedor, sólo contra
   un ancestro. Por eso la escala se aplica a los hijos, nunca a .tapa. */
@supports (container-type: inline-size){
  .tapa__cuerpo{ font-size: 7.2cqw; }
  .tapa__num   { font-size: 3.6cqw; }
  /* en tapas muy chiquitas (mosaico de colección) sacamos lo accesorio */
  @container (max-width: 165px){
    .tapa__serie, .tapa__estrellas{ display:none; }
    .tapa__titulo{ font-size:1.18em; }
  }
}

/* lomo del libro */
.tapa::before{
  content:"";
  position:absolute; inset:0 auto 0 0; width:7%;
  background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.10) 60%, rgba(255,255,255,.10));
  z-index:3;
}
/* brillo diagonal */
.tapa::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(115deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 42%);
  z-index:3; pointer-events:none;
}

.tapa__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  z-index:1;
}

/* tapa tipográfica (libros todavía sin ilustrar) */
.tapa__deco{
  position:absolute; inset:0; z-index:1; overflow:hidden;
}
.tapa__deco::before{      /* sol / luna suave */
  content:"";
  position:absolute; top:-14%; right:-16%;
  width:62%; aspect-ratio:1; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.5), rgba(255,255,255,.06) 70%);
}
.tapa__deco::after{       /* colina */
  content:"";
  position:absolute; left:-18%; right:-18%; bottom:-34%;
  height:52%; border-radius:50% 50% 0 0 / 62% 62% 0 0;
  background: rgba(0,0,0,.16);
}

.tapa__cuerpo{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5em;
  padding: 1.1em 1em 1.5em 1.5em;
  text-align:center;
  color:#fff;
  font-size: 15px;               /* fallback sin container queries */
  overflow:hidden;
}
.tapa__serie{
  margin:0;
  font-size:.46em; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.18);
  padding:.42em .95em; border-radius:999px;
  backdrop-filter: blur(2px);
}
.tapa__titulo{
  margin:0;
  font-family: var(--fuente-titulo);
  font-size: 1.02em; line-height:1.16; font-weight:700;
  text-wrap: balance;
  text-shadow: 0 .06em .12em rgba(0,0,0,.28);
}
.tapa__sub{
  margin:0;
  font-size:.5em; line-height:1.25; font-style:italic;
  color: rgba(255,255,255,.9);
  text-wrap: balance;
}
.tapa__estrellas{
  margin-top:.2em;
  font-size:.55em; letter-spacing:.35em;
  color: rgba(255,255,255,.75);
}
.tapa__num{
  position:absolute; z-index:4;
  right:.55em; bottom:.5em;
  min-width:1.7em; height:1.7em;
  display:grid; place-items:center;
  border-radius:50%;
  font-size:7.5px; font-weight:700;   /* fallback sin container queries */
  color: var(--c2);
  background: rgba(255,255,255,.92);
  box-shadow: 0 .1em .3em rgba(0,0,0,.25);
}

/* ============================================================
   BIBLIOTECA
   ============================================================ */
body.biblioteca{
  min-height:100dvh;
  background:
    radial-gradient(1100px 700px at 12% -8%, #fff3d8 0%, rgba(255,243,216,0) 62%),
    radial-gradient(900px 600px at 92% 6%,  #ffe0c2 0%, rgba(255,224,194,0) 60%),
    linear-gradient(178deg, #fdf1da 0%, #f6e2c2 58%, #efd5ad 100%);
  background-attachment: fixed;
  padding: clamp(18px, 3.4vw, 44px);
  padding-bottom: calc(clamp(18px,3.4vw,44px) + env(safe-area-inset-bottom));
}
/* nubecitas de fondo */
body.biblioteca::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.55) 0 3.2%, rgba(255,255,255,0) 3.4%),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.42) 0 2.4%, rgba(255,255,255,0) 2.6%),
    radial-gradient(circle at 62% 68%, rgba(255,255,255,.35) 0 2%,   rgba(255,255,255,0) 2.2%),
    radial-gradient(circle at 30% 86%, rgba(255,255,255,.4)  0 2.6%, rgba(255,255,255,0) 2.8%);
}
.envoltorio{ position:relative; z-index:1; max-width:1500px; margin:0 auto; }

.cabecera{
  text-align:center;
  margin: clamp(8px,2vw,26px) 0 clamp(22px,4vw,44px);
}
.cabecera__hola{
  margin:0 0 .35em;
  font-size: clamp(13px, 1.6vw, 17px);
  letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color: var(--tinta-3);
}
.cabecera h1{
  margin:0;
  font-family: var(--fuente-titulo);
  font-size: clamp(34px, 6.4vw, 74px);
  line-height:1.02; font-weight:700;
  color: var(--tinta);
  text-wrap: balance;
}
.cabecera h1 em{
  font-style:normal;
  background: linear-gradient(100deg, var(--miel-osc), var(--miel) 55%, #f3c96a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cabecera__bajada{
  margin:.7em auto 0; max-width:34ch;
  font-size: clamp(15px, 1.9vw, 21px);
  color: var(--tinta-2);
}

/* grilla de libros */
.estante{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(132px, 16vw, 215px), 1fr));
  gap: clamp(18px, 3vw, 40px) clamp(14px, 2.2vw, 32px);
  list-style:none; margin:0; padding:0;
}
.libro{ position:relative; }
.libro__link{
  display:block; text-decoration:none; color:inherit;
  border-radius: 8px 22px 22px 8px;
  outline:none;
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.libro__link:hover{ transform: translateY(-8px) rotate(-.7deg); }
.libro__link:active{ transform: translateY(-2px) scale(.985); }
.libro__link:focus-visible{ box-shadow: 0 0 0 5px rgba(232,163,61,.65); }
.libro__link .tapa{ transition: box-shadow .22s ease; }
.libro__link:hover .tapa{ box-shadow: var(--sombra-alta); }

.libro__pie{ padding: .85em .35em 0; text-align:center; }
.libro__titulo{
  margin:0;
  font-family: var(--fuente-titulo);
  font-size: clamp(16px, 1.75vw, 23px);
  line-height:1.18; font-weight:700;
  color: var(--tinta);
  text-wrap: balance;
}
.libro__dato{
  margin:.35em 0 0;
  font-size: clamp(12px, 1.15vw, 15px);
  color: var(--tinta-3);
}
.libro__dato .punto{ opacity:.5; margin:0 .45em; }

.vacio, .error{
  grid-column:1/-1;
  text-align:center; padding: 8vh 6vw;
  color: var(--tinta-2);
  font-size: clamp(17px,2.2vw,22px);
}
.error strong{ display:block; font-size:1.3em; margin-bottom:.4em; color:var(--tinta); }

.pie{
  margin: clamp(34px,6vw,70px) 0 0;
  text-align:center;
  color: var(--tinta-3);
  font-size: 14px;
}
.pie__salir{
  background:none; border:1px solid rgba(120,90,60,.28);
  border-radius:999px; padding:.5em 1.3em;
  color: var(--tinta-3); cursor:pointer;
  transition: background .18s ease, color .18s ease;
}
.pie__salir:hover{ background: rgba(120,90,60,.1); color: var(--tinta-2); }

/* aparición escalonada */
@media (prefers-reduced-motion: no-preference){
  .libro{ animation: aparecer .5s cubic-bezier(.2,.8,.3,1) backwards; }
  @keyframes aparecer{
    from{ opacity:0; transform: translateY(22px) scale(.96); }
    to  { opacity:1; transform:none; }
  }
}

/* ============================================================
   PANTALLA DE LOGIN (opcional, si el backend la usa)
   ============================================================ */
body.puerta{
  min-height:100dvh; margin:0;
  display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(900px 620px at 30% 10%, #fff1d5 0%, rgba(255,241,213,0) 60%),
    linear-gradient(170deg, #f9e8c8, #eed3a8);
}
.puerta__caja{
  width:min(400px, 92vw);
  background: var(--papel);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  padding: clamp(26px,5vw,40px);
  text-align:center;
}
.puerta__caja h1{
  margin:0 0 .1em; font-family:var(--fuente-titulo);
  font-size: clamp(26px,4.6vw,36px);
}
.puerta__caja p{ margin:0 0 1.4em; color:var(--tinta-2); }
.quien{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:18px; }
.quien button{
  border:2px solid rgba(120,90,60,.25); background:transparent;
  border-radius:999px; padding:.6em 1.25em; font-size:17px; cursor:pointer;
  color: var(--tinta-2); transition: all .16s ease;
}
.quien button.on{ background: var(--miel); border-color: var(--miel); color:#3b2a1c; font-weight:700; }
.puerta input{
  width:100%; text-align:center; font: inherit; font-size:20px;
  padding:.7em .9em; border-radius:14px;
  border:2px solid rgba(120,90,60,.25); background:#fffdf6; color:var(--tinta);
  outline:none;
}
.puerta input:focus{ border-color: var(--miel); }
.puerta__boton{
  margin-top:14px; width:100%; border:none; cursor:pointer;
  background: linear-gradient(160deg, var(--miel), var(--miel-osc));
  color:#fff; font-size:20px; font-weight:700;
  padding:.75em; border-radius:14px;
  box-shadow: 0 10px 22px -10px rgba(201,118,27,.9);
}
.puerta__error{ min-height:22px; margin-top:12px; color:#c0483a; font-size:15px; }