/* ============================================================
   Revista interactiva — visor FLIPBOOK (estilo Heyzine)
   Las hojas se dan vuelta de verdad: arrastrás la esquina,
   hacés clic en el borde o usás las flechas.
   ============================================================ */

:root{
  --acento:      #39c4ad;
  --acento-osc:  #279e8a;

  --tinta:       #f2f5f4;
  --tinta-suave: #93a3a0;
  --fondo:       #16191d;
  --fondo-2:     #1e2227;
  --panel:       #1b1f24;
  --linea:       rgba(255,255,255,.10);

  --barra-alto:  58px;
  --pie-alto:    46px;
  --tira-alto:   86px;

  --radio:       8px;
  --transicion:  .32s cubic-bezier(.22,.61,.36,1);
}

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

html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color:var(--tinta);
  background:
    radial-gradient(1200px 700px at 50% -10%, #242a30 0%, transparent 60%),
    var(--fondo);
  overscroll-behavior:none;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

.app{
  display:grid;
  grid-template-rows: var(--barra-alto) 1fr var(--tira-alto) var(--pie-alto);
  grid-template-columns: minmax(0, 1fr);
  height:100dvh;
  position:relative;
  overflow:hidden;
}

/* ── Tira de miniaturas ───────────────────────────────────── */
.tira{
  background:rgba(18,21,25,.92);
  border-top:1px solid var(--linea);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  z-index:28;
}
.tira::-webkit-scrollbar{ display:none; }
.tira-pista{
  display:flex; align-items:center; gap:8px;
  height:100%; padding:0 14px;
  width:max-content; min-width:100%;
}
.tira-item{
  position:relative; flex:0 0 auto;
  height:calc(var(--tira-alto) - 24px);
  aspect-ratio:var(--ar,.707);
  border:2px solid transparent; border-radius:5px;
  padding:0; background:#fff; cursor:pointer; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  transition:border-color .18s, transform .18s, opacity .18s;
  opacity:.62;
}
.tira-item img{ display:block; width:100%; height:100%; object-fit:cover; }
.tira-item:hover{ opacity:1; transform:translateY(-2px); }
.tira-item.activa{
  border-color:rgba(255,255,255,.85);   /* neutro: el verde fuerte hacía ruido */
  opacity:1;
  box-shadow:0 2px 8px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.35);
}
.tira-item .n{
  position:absolute; left:0; right:0; bottom:0; text-align:center;
  font-size:.6rem; font-weight:700; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
  padding:7px 0 2px;
}

/* ── Pista de la esquina ──────────────────────────────────── */
.pista-esquina{
  position:absolute; right:0; bottom:0;
  width:64px; height:64px; pointer-events:none; z-index:22;
  opacity:0;
  background:linear-gradient(315deg, #ffffff 0%, #e8ecec 45%, transparent 50%);
  box-shadow:-3px -3px 10px rgba(0,0,0,.35);
  border-radius:0 0 4px 0;
  transform-origin:bottom right;
}
.pista-esquina.mostrar{ animation:esquina 1.6s ease-in-out 2; }
@keyframes esquina{
  0%,100%{ opacity:0; transform:scale(.3) rotate(0deg); }
  45%    { opacity:1; transform:scale(1) rotate(-6deg); }
  70%    { opacity:1; transform:scale(.9) rotate(-2deg); }
}

/* ── Barra superior ───────────────────────────────────────── */
.barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:0 14px;
  background:rgba(22,25,29,.86);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--linea);
  z-index:30;
}
.marca{ min-width:0; }
/* Logo real (reemplaza al texto cuando la edición lo trae) */
.marca-logo{ display:block; height:34px; width:auto; flex:0 0 auto; }
.marca-logo ~ .marca-texto{
  border-left:1px solid var(--linea);
  padding-left:11px;
}

.marca-texto{ display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.marca-texto strong{
  font-size:.95rem; font-weight:700; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.marca-texto small{
  font-size:.72rem; color:var(--tinta-suave);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.acciones{ display:flex; align-items:center; gap:6px; }

.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border:1px solid var(--linea); border-radius:999px;
  background:rgba(255,255,255,.06); color:var(--tinta);
  font:inherit; font-size:.82rem; font-weight:600; line-height:1;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .18s, border-color .18s, transform .18s;
}
.btn:hover{ background:rgba(255,255,255,.13); border-color:rgba(57,196,173,.5); }
.btn:active{ transform:scale(.96); }
.btn svg{ width:16px; height:16px; flex:0 0 auto; }
.btn[aria-pressed="false"] .ico-on{ display:none; }
.btn[aria-pressed="false"] .ico-off{ display:block; }

/* La zona del libro: el cursor invita a pasar de hoja */
.libro{ cursor:pointer; }
.libro.arrastrando{ cursor:grabbing; }

/* ── Escenario + libro ────────────────────────────────────── */
.escenario{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:0; min-width:0;
  padding:16px 8px;
  overflow:hidden;
}

/* El marco: lo dimensiona app.js para que el libro entre justo */
.marco{
  position:relative;
  display:block;
}

/* El contenedor que StPageFlip convierte en libro.
   min-width:0 es a propósito: la librería le pone un min-width en línea
   (= minWidth) que en celular haría desbordar el libro. */
.libro{
  position:relative;
  width:100%; height:100%;
  min-width:0 !important;
  min-height:0 !important;
}
.libro:empty{ display:none; }

/* Cada hoja (StPageFlip le pone el tamaño) */
.hoja{
  background-color:#fff;
  background-size:contain;      /* la imagen entra entera, sin recortes */
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  user-select:none;
  -webkit-user-drag:none;
  /* Ayuda a que el navegador componga la animación en la GPU (menos tirones) */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hoja img{
  display:block;
  width:100%; height:100%;
  object-fit:contain;
  background:#fff;
  pointer-events:none;      /* el flip necesita el mouse */
  -webkit-user-drag:none;
}

/* Hotspots dentro de una página */
.hotspot{
  position:absolute; border-radius:6px; cursor:pointer;
  background:transparent; border:0; padding:0; z-index:5;
  transition:background .2s, box-shadow .2s;
}
.hotspot:hover{ background:rgba(57,196,173,.18); box-shadow:0 0 0 2px rgba(57,196,173,.6); }

/* ── Flechas ──────────────────────────────────────────────── */
.flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid var(--linea); background:rgba(30,34,39,.85);
  color:var(--tinta); cursor:pointer; z-index:20;
  touch-action:manipulation;      /* respuesta inmediata al toque, sin retardo */
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  transition:background .18s, opacity .3s, transform .18s;
}
.flecha svg{ width:22px; height:22px; }
.flecha:hover{ background:rgba(45,52,60,.95); }
.flecha-prev{ left:14px; } .flecha-next{ right:14px; }
.flecha[disabled]{ opacity:.2; cursor:default; }

/* ── Cargando ─────────────────────────────────────────────── */
.cargando{
  position:absolute; inset:0; display:grid; place-items:center;
  background:var(--fondo); z-index:25; transition:opacity .4s;
}
.cargando.fuera{ opacity:0; pointer-events:none; }
.rueda{
  width:38px; height:38px; border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:var(--acento);
  animation:girar .8s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }

/* ── Pie ──────────────────────────────────────────────────── */
.pie{
  display:flex; align-items:center; gap:12px;
  padding:0 16px;
  background:rgba(22,25,29,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--linea);
  z-index:30;
}
.progreso{
  flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.10);
  cursor:pointer; position:relative; outline:none;
}
.progreso:focus-visible{ box-shadow:0 0 0 3px rgba(57,196,173,.4); }
.progreso-barra{
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--acento), #2cc473);
  transition:width .3s ease;
}
.contador{ font-size:.8rem; color:var(--tinta-suave); font-variant-numeric:tabular-nums; }
.contador b{ color:var(--tinta); }

/* ── Panel de índice ──────────────────────────────────────── */
.panel{
  position:absolute; top:0; right:0; bottom:0; width:min(390px,88vw);
  background:var(--panel); border-left:1px solid var(--linea);
  box-shadow:-18px 0 50px rgba(0,0,0,.5);
  transform:translateX(102%); transition:transform var(--transicion);
  z-index:60; display:flex; flex-direction:column;
}
.panel.abierto{ transform:none; }
.panel-cab{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--linea);
}
.panel-cab h2{ margin:0; font-size:1rem; }
.btn-cerrar{
  border:0; background:transparent; font-size:1.6rem; line-height:1;
  color:var(--tinta-suave); cursor:pointer; padding:0 4px; border-radius:8px;
}
.btn-cerrar:hover{ color:var(--tinta); background:rgba(255,255,255,.08); }

.buscador{ padding:12px 16px 0; }
.buscador input{
  width:100%; padding:9px 12px; font:inherit; font-size:.85rem;
  border:1px solid var(--linea); border-radius:10px;
  background:rgba(255,255,255,.06); color:var(--tinta); outline:none;
}
.buscador input:focus{ border-color:var(--acento); }
.buscador input::placeholder{ color:var(--tinta-suave); }

.miniaturas{
  flex:1; overflow-y:auto; padding:14px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  align-content:start;
}
.mini{
  position:relative; border:2px solid transparent; border-radius:7px;
  padding:0; background:#fff; cursor:pointer; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:border-color .18s, transform .18s;
}
.mini:hover{ transform:translateY(-2px); }
.mini img{ display:block; width:100%; height:auto; }
.mini.activa{ border-color:var(--acento); }
.mini .num{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(to top, rgba(0,0,0,.8), transparent);
  color:#fff; font-size:.68rem; font-weight:700; text-align:center;
  padding:8px 0 4px;
}
.mini.oculta{ display:none; }

.velo{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px); z-index:50; opacity:0; transition:opacity var(--transicion);
}
.velo.visible{ opacity:1; }

/* ── Zoom ─────────────────────────────────────────────────── */
.zoom{
  position:fixed; inset:0; z-index:90;
  background:rgba(10,12,14,.96);
  display:flex; flex-direction:column;
}
.zoom-lienzo{
  flex:1; overflow:auto; display:grid; place-items:start center; padding:12px;
  -webkit-overflow-scrolling:touch;
}
.zoom-lienzo img{
  display:block; width:var(--zw,100%); height:auto; max-width:none;
  border-radius:4px; background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.zoom-barra{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px; background:rgba(255,255,255,.07);
  border-bottom:1px solid var(--linea);
}

/* ── Aviso flotante ───────────────────────────────────────── */
.ayuda{
  position:absolute; bottom:calc(var(--pie-alto) + 16px); left:50%;
  transform:translateX(-50%); z-index:40;
  background:rgba(0,0,0,.82); color:#fff;
  padding:9px 16px; border-radius:999px; font-size:.79rem;
  transition:opacity .4s; pointer-events:none; white-space:nowrap;
  border:1px solid var(--linea);
}
.ayuda p{ margin:0; }

/* ── Escritorio ───────────────────────────────────────────── */
@media (min-width:900px){
  .escenario{ padding:24px 64px; }
  .panel{ width:350px; }
}

/* ── Celular ──────────────────────────────────────────────── */
@media (max-width:899px){
  :root{ --barra-alto:52px; --pie-alto:42px; --tira-alto:62px; }
  .btn span{ display:none; }
  .btn{ padding:9px; }
  .marca-texto small{ display:none; }
  .marca-logo{ height:26px; }
  .escenario{ padding:8px 4px; }
  .flecha{ width:44px; height:44px; touch-action:manipulation; }
  .flecha-prev{ left:4px; } .flecha-next{ right:4px; }
  .miniaturas{ grid-template-columns:repeat(4,1fr); gap:7px; }
  .tira-pista{ gap:6px; padding:0 8px; }
  .tira-item{ height:calc(var(--tira-alto) - 16px); }
  .tira-item .n{ font-size:.55rem; padding:6px 0 1px; }
  .pista-esquina{ width:46px; height:46px; bottom:14px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}