/* ikigai-flip-pages · hoja de estilo del libro
   Sobriedad de galeria: el papel manda, la interfaz desaparece. */

@font-face{font-family:'JostFlip';src:url(fuente.ttf) format('truetype');font-weight:100 900;font-display:swap;}

:root{
  --ui:'JostFlip',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-rapida:.22s cubic-bezier(.22,.61,.36,1);
  --t-suave:.5s cubic-bezier(.22,.61,.36,1);
}

/* Sala: el modo por defecto. El fondo se retira para que la lamina exista. */
[data-tema="sala"]{
  --fondo:#131210; --fondo2:#1E1C17;
  --tinta:#EAE5DA; --tinta-baja:#8F887A;
  --acento:#B99A6B;
  --panel:rgba(22,20,17,.86); --borde:rgba(234,229,218,.13);
  --lomo:rgba(0,0,0,.34);
}
[data-tema="papel"]{
  --fondo:#E9E6DF; --fondo2:#F3F1EB;
  --tinta:#26241F; --tinta-baja:#6E695E;
  --acento:#96703F;
  --panel:rgba(243,241,235,.9); --borde:rgba(38,36,31,.14);
  --lomo:rgba(0,0,0,.14);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;overflow:hidden;
  transition:background var(--t-suave),color var(--t-suave);
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 34%,var(--fondo2) 0%,var(--fondo) 68%);
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;}
:focus-visible{outline:1.5px solid var(--acento);outline-offset:3px;border-radius:2px;}
.oculto-visual{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- escena ---------- */
.escena{position:fixed;inset:0;z-index:1;display:grid;place-items:center;padding:2.6rem 1.4rem 4.6rem;}
/* Con atril, la interfaz de lectura espera fuera de cuadro. */
body:has(.atril:not([data-abierto="1"])) .barra,
body:has(.atril:not([data-abierto="1"])) .zona,
body:has(.atril:not([data-abierto="1"])) .progreso,
body:has(.atril:not([data-abierto="1"])) .ayuda,
body:has(.atril:not([data-abierto="1"])) .gira,
body:has(.atril:not([data-abierto="1"])) .pie-marca{opacity:0!important;pointer-events:none!important;}
.lienzo{position:relative;width:100%;height:100%;display:grid;place-items:center;}

#libro{position:relative;filter:drop-shadow(0 26px 44px rgba(0,0,0,.42));}
[data-tema="papel"] #libro{filter:drop-shadow(0 20px 34px rgba(0,0,0,.20));}

/* El canto: leyendo una hoja a la vez, esto es lo que dice que hay un libro
   debajo. Las vetas son las hojas cosidas vistas de perfil. */
body[data-modo="single"] #libro::before{
  content:'';position:absolute;left:-10px;top:7px;bottom:7px;width:10px;z-index:-1;
  border-radius:2px 0 0 2px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.11) 0 1px,rgba(0,0,0,0) 1px 3px),
    linear-gradient(90deg,#B9B2A4 0%,#F2EFE8 42%,#D8D2C6 78%,#A9A294 100%);
  box-shadow:-2px 0 10px -3px rgba(0,0,0,.4);
}
body[data-modo="single"] #libro::after{ /* la sombra del cosido sobre la hoja */
  content:'';position:absolute;left:0;top:0;bottom:0;width:3.2%;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,0));
}
#libro .stf__item{background:#fff;}
.hoja{background:#fff;overflow:hidden;position:relative;}
.hoja img{width:100%;height:100%;object-fit:cover;display:block;background-size:cover;background-position:center;}
.hoja::after{ /* lomo: la curvatura del papel junto al cosido */
  content:'';position:absolute;inset:0;pointer-events:none;
}
.hoja[data-lado="der"]::after{background:linear-gradient(90deg,var(--lomo) 0,rgba(0,0,0,0) 4.2%);}
.hoja[data-lado="izq"]::after{background:linear-gradient(270deg,var(--lomo) 0,rgba(0,0,0,0) 4.2%);}
body[data-modo="single"] .hoja::after{background:none;}
.hoja.dura{box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);}

/* ---------- barra de control ---------- */
.barra{
  position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);z-index:20;
  display:flex;align-items:center;gap:.15rem;padding:.34rem .4rem;
  background:var(--panel);border:1px solid var(--borde);border-radius:999px;
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 12px 34px -12px rgba(0,0,0,.55);
  transition:opacity var(--t-suave),transform var(--t-suave);
}
body.reposo .barra{opacity:0;transform:translateX(-50%) translateY(10px);pointer-events:none;}
.b{
  width:2.3rem;height:2.3rem;display:grid;place-items:center;border-radius:999px;
  color:var(--tinta-baja);transition:color var(--t-rapida),background var(--t-rapida);
}
.b:hover:not(:disabled),.b[aria-pressed="true"]{color:var(--tinta);background:rgba(128,128,128,.14);}
.b:disabled{opacity:.26;cursor:default;}
.b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
a.b{text-decoration:none;}
.sep{width:1px;height:1.35rem;background:var(--borde);margin:0 .34rem;}

.folio{
  display:flex;align-items:baseline;gap:.34rem;padding:0 .7rem;
  font-size:.735rem;letter-spacing:.13em;color:var(--tinta-baja);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.folio b{color:var(--tinta);font-weight:400;}
.folio input{
  width:2.1rem;background:none;border:0;border-bottom:1px solid transparent;color:var(--tinta);
  font:inherit;letter-spacing:inherit;text-align:right;padding:0;
}
.folio input:focus{outline:none;border-bottom-color:var(--acento);}
.folio input::-webkit-outer-spin-button,.folio input::-webkit-inner-spin-button{appearance:none;margin:0;}

.progreso{position:fixed;left:0;right:0;bottom:0;height:1.5px;z-index:21;background:rgba(128,128,128,.16);}
.progreso i{display:block;height:100%;width:0;background:var(--acento);transition:width var(--t-suave);}

/* ---------- zonas de clic laterales ---------- */
.zona{
  position:fixed;top:0;bottom:0;width:min(15vw,150px);z-index:10;border:0;
  display:grid;place-items:center;opacity:0;transition:opacity var(--t-rapida);
}
.zona[data-d="prev"]{left:0;} .zona[data-d="next"]{right:0;}
.zona:hover:not(:disabled){opacity:1;}
.zona:disabled{cursor:default;}
.zona span{
  width:2.9rem;height:2.9rem;display:grid;place-items:center;border-radius:999px;
  background:var(--panel);border:1px solid var(--borde);color:var(--tinta);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.zona svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- indice de miniaturas ---------- */
.indice{
  position:fixed;inset:auto 0 0 0;z-index:30;max-height:min(62vh,540px);
  background:var(--panel);border-top:1px solid var(--borde);
  backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);
  transform:translateY(101%);transition:transform var(--t-suave);
  display:flex;flex-direction:column;
}
.indice[data-abierto="1"]{transform:none;}
.indice header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem .55rem;flex:0 0 auto;
}
.indice h2{
  margin:0;font-size:.66rem;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--tinta-baja);
}
.rejilla{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  gap:1.05rem 1rem;padding:.5rem 1.5rem 1.6rem;overflow-y:auto;overscroll-behavior:contain;
}
.mini{text-align:left;display:flex;flex-direction:column;gap:.5rem;}
.mini figure{
  margin:0;aspect-ratio:var(--aspecto,1.7778);background:#fff center/cover no-repeat;
  border:1px solid var(--borde);border-radius:2px;overflow:hidden;position:relative;
  transition:transform var(--t-rapida),box-shadow var(--t-rapida);
}
.mini img{width:100%;height:100%;object-fit:cover;display:block;}
.mini:hover figure{transform:translateY(-3px);box-shadow:0 10px 22px -8px rgba(0,0,0,.5);}
.mini[aria-current="true"] figure{box-shadow:0 0 0 1.5px var(--acento);}
.mini .n{font-size:.6rem;letter-spacing:.2em;color:var(--tinta-baja);font-variant-numeric:tabular-nums;}
.mini .t{font-size:.775rem;line-height:1.34;color:var(--tinta);font-weight:300;}
.mini .s{font-size:.665rem;line-height:1.32;color:var(--tinta-baja);font-weight:300;}
.mini[aria-current="true"] .n{color:var(--acento);}

/* ---------- lupa ---------- */
.lupa{
  position:fixed;inset:0;z-index:40;background:rgba(9,8,7,.95);
  display:none;place-items:center;cursor:zoom-out;overflow:hidden;
}
.lupa[data-abierto="1"]{display:grid;}
.lupa img{
  max-width:none;transform-origin:0 0;will-change:transform;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.lupa .pista{
  position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(234,229,218,.5);
  pointer-events:none;
}

/* ---------- telon de carga ---------- */
.telon{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:var(--fondo);transition:opacity .6s ease,visibility .6s;
}
.telon[data-listo="1"]{opacity:0;visibility:hidden;}
.telon div{text-align:center;padding:0 1.5rem;}
.telon .tt{font-size:.95rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta);}
.telon .ss{margin-top:.7rem;font-size:.68rem;letter-spacing:.2em;color:var(--tinta-baja);}
.telon .barrita{margin:1.5rem auto 0;width:120px;height:1px;background:rgba(128,128,128,.25);overflow:hidden;}
.telon .barrita i{display:block;height:100%;width:30%;background:var(--acento);animation:corre 1.25s ease-in-out infinite;}
@keyframes corre{0%{transform:translateX(-110%)}100%{transform:translateX(400%)}}

/* ---------- ayuda de teclado ---------- */
.ayuda{
  position:fixed;top:1.15rem;left:50%;transform:translateX(-50%);z-index:22;
  display:flex;gap:1.15rem;padding:.5rem 1.05rem;border-radius:999px;
  background:var(--panel);border:1px solid var(--borde);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  font-size:.63rem;letter-spacing:.14em;color:var(--tinta-baja);text-transform:uppercase;
  opacity:0;transition:opacity var(--t-suave);pointer-events:none;
}
.ayuda[data-ver="1"]{opacity:1;}
.ayuda kbd{
  font:inherit;color:var(--tinta);border:1px solid var(--borde);border-radius:3px;
  padding:.06rem .3rem;margin-right:.32rem;
}

.pie-marca{
  position:fixed;left:1.5rem;bottom:1.5rem;z-index:19;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-baja);
  opacity:.72;transition:opacity var(--t-suave);
}
body.reposo .pie-marca{opacity:0;}
.pie-marca a{color:inherit;text-decoration:none;}
.pie-marca a:hover{color:var(--tinta);}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .escena{padding:1rem .55rem 4.2rem;}
  .zona{display:none;}
  .ayuda{display:none;}
  .pie-marca{display:none;}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.85rem .7rem;padding:.4rem .9rem 1.2rem;}
  .barra{bottom:.75rem;gap:0;}
  .b{width:2.15rem;height:2.15rem;}
  .folio{padding:0 .45rem;font-size:.7rem;}
}
@media (max-width:420px){ .b.opcional{display:none;} }

/* Pantalla baja (telefono acostado, ventana a media altura): el aire de abajo
   se lo lleva la lamina, que es lo unico que importa. */
@media (max-height:540px){
  .escena{padding:.5rem .5rem 2.7rem;}
  .barra{bottom:.4rem;padding:.24rem .3rem;}
  .b{width:2rem;height:2rem;}
  .ayuda{display:none;}
}

/* Un documento apaisado en un telefono de pie es diminuto: se dice, no se finge. */
.gira{display:none;}
@media (max-width:760px) and (orientation:portrait){
  .gira{
    display:block;position:fixed;top:1.15rem;left:50%;transform:translateX(-50%);z-index:22;
    font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-baja);
    padding:.4rem .85rem;border:1px solid var(--borde);border-radius:999px;
    background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    transition:opacity var(--t-suave);pointer-events:none;
  }
  body.reposo .gira{opacity:0;}
}

/* Sin animacion para quien la pidio sin animacion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}

@media print{
  .barra,.zona,.indice,.ayuda,.progreso,.telon,.pie-marca{display:none!important;}
}