/* ============================================================
   FLIPBOOK.CSS — Contenedor y controles del flipbook
   TANTO LAMPS — Catálogo Digital  v2026060

   ARQUITECTURA DE CAPAS:
   ┌─────────────────────────────┐
   │  #catalogo-wrap             │  fondo UI (#e8e6e2)
   │  ┌───────────────────────┐  │
   │  │  .flip-header         │  │  logo + botones
   │  ├───────────────────────┤  │
   │  │  #tanto-catalogo      │  │  área del libro
   │  │  ┌─────────────────┐  │  │
   │  │  │  stf__parent    │  │  │  StPageFlip — gestiona posición
   │  │  │  ┌───────────┐  │  │  │
   │  │  │  │ .flip-hoja│  │  │  │  wrapper NEUTRO (StPageFlip añade
   │  │  │  │ ┌───────┐ │  │  │  │  stf__item, --soft, --left, etc.)
   │  │  │  │ │.pagina│ │  │  │  │  visual intocado — fondos CSS aquí
   │  │  │  │ └───────┘ │  │  │  │
   │  │  │  └───────────┘  │  │  │
   │  │  └─────────────────┘  │  │
   │  ├───────────────────────┤  │
   │  │  .flip-footer         │  │  controles navegación
   │  └───────────────────────┘  │
   └─────────────────────────────┘
   ============================================================ */

/* ---- Wrapper exterior ---- */

#catalogo-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ui-fondo);
  gap: 0;
  /* opacity gestionada por JS solo si hay animación de entrada */
}

/* ---- Header ---- */

.flip-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 20px;
  pointer-events: none; /* el fondo no bloquea clicks al flipbook */
}

.flip-header__logo,
.flip-header__actions {
  pointer-events: all;
}

.flip-header__logo {
  height: 32px;
  width: auto;
  opacity: 1;
  transition: opacity var(--tr-rapida);
}

.flip-header__logo:hover {
  opacity: 0.8;
}

.flip-header__actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

/* ---- Lupa de detalle ---- */

.loupe {
  position: fixed;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1.5px solid rgba(122, 59, 46, 0.35);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
  overflow: hidden;
  pointer-events: none;
  z-index: 400;
  display: none;
  background: #0d0d0d;
  outline: 4px solid rgba(0,0,0,0.12);
  outline-offset: -2px;
}

/* Cuando la lupa está activa, el cursor del catálogo se oculta */
body.loupe-mode #tanto-catalogo {
  cursor: none;
}

/* Lupa — botón más grande para que sea obvio */
.flip-btn--loupe {
  width: 80px !important;
  height: 80px !important;
}

/* Indicador visual en el botón cuando la lupa está activa */
#btn-loupe.active {
  background: rgba(122, 59, 46, 0.2);
  color: var(--c-terracota);
}

/* ---- Área del flipbook ---- */

#tanto-catalogo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible; /* no recortar páginas durante la animación de giro */
}

/* Sombra exterior del libro — preset "medio" del shadow-editor.
   Usamos filter:drop-shadow (no box-shadow) porque sigue la FORMA visible
   del contenido. En la portada solo aparece la página derecha y la sombra
   se ajusta a ella; box-shadow envolvía el rectángulo completo del spread
   incluyendo el "fantasma" cremoso a la izquierda. */
#tanto-catalogo {
  filter:
    drop-shadow(0  2px  4px rgba(0, 0, 0, 0.08))
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.12))
    drop-shadow(0 30px 60px rgba(0, 0, 0, 0.14));
}

/* CRÍTICO — StPageFlip inyecta transform:translateZ(0) en .stf__parent.
   En Windows/Chromium esto activa composición GPU que aplica corrección
   de gamma y convierte #000 en ~#232323 (14% de velo aparente).
   Anular el transform elimina el efecto. */
#tanto-catalogo .stf__parent {
  transform: none !important;
  will-change: auto !important;
}

/* ---- .flip-hoja: wrapper neutro para StPageFlip ----
   StPageFlip añade sus clases (stf__item, --soft, --left...) sobre .flip-hoja.
   .pagina vive DENTRO y nunca es manipulada por StPageFlip.
   Transparente para no interferir con los fondos de .pagina. */
.flip-hoja {
  width: 100%;
  height: 100%;
  background: transparent;
  position: relative;
}

/* ---- Todos los contenedores de StPageFlip — transparentes ---- */
#tanto-catalogo .stf__parent,
#tanto-catalogo .stf__parent > div,
#tanto-catalogo .stf__wrapper,
#tanto-catalogo .stf__block,
#tanto-catalogo .stf__item {
  background: transparent !important;
}

/* Canvas — visible para que StPageFlip pueda renderizar la cara trasera
   del cover durante el giro. Sin él aparece el efecto recortado. */
#tanto-catalogo canvas.stf__canvas {
  /* display: none eliminado — necesario para cara trasera del cover */
}

/* Sombras durante el flip — outer/inner habilitadas para que la
   curvatura de la página al girar tenga profundidad sutil.
   hardShadow oculta (es la sombra del lomo, demasiado dura). */
#tanto-catalogo .stf__hardShadow,
#tanto-catalogo .stf__hardInnerShadow {
  display: none !important;
}

/* ---- Footer ---- */

.flip-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 24px 4px;
  flex-shrink: 0;
}

/* ---- Botones genéricos UI ---- */

.flip-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-texto);
  border-radius: 4px;
  transition: color var(--tr-rapida), background var(--tr-rapida);
  flex-shrink: 0;
}

/* Solo donde hay puntero de verdad. En táctil, el `:hover` se queda PEGADO
   al botón que acabas de tocar, y estas dos reglas pintan tinta oscura: al
   apagar la lupa, el botón no volvía a su crema sino a un gris que sobre el
   fondo oscuro del móvil casi no se distinguía. Parecía que se apagaba mal,
   y lo que pasaba es que se quedaba con el color del ratón. */
@media (hover: hover) {
  .flip-btn:hover {
    color: rgba(30,28,26,0.85);
    background: var(--ui-hover);
  }
}

/* ---- Botones de navegación ---- */

.flip-nav-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-texto);
  border-radius: 50%;
  transition: color var(--tr-rapida), background var(--tr-rapida);
  flex-shrink: 0;
}

/* Misma razón que en `.flip-btn:hover`: en táctil se queda pegado. */
@media (hover: hover) {
  .flip-nav-btn:hover {
    color: rgba(30,28,26,0.9);
    background: var(--ui-hover);
  }
}

.flip-nav-btn:disabled {
  opacity: 0.2;
  pointer-events: none;
}

/* ---- Barra de progreso ---- */

.flip-progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  max-width: 360px;
}

.flip-progress-bar {
  width: 100%;
  height: 2px;
  background: var(--ui-borde);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
}

.flip-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--c-terracota);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.flip-counter {
  font-family: var(--f-cuerpo);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ui-texto);
  white-space: nowrap;
}

.flip-counter__sep {
  opacity: 0.4;
}

/* ---- Panel de miniaturas ---- */

.thumbnails-panel {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15,15,15,0.96);
  border: 1px solid var(--ui-borde);
  border-radius: 8px;
  padding: 16px;
  max-width: min(92vw, 940px);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-media), transform var(--tr-media);
}

.thumbnails-panel.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.thumbnails-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 80px);
  gap: 10px;
  justify-content: start;
}

.thumbnail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
  transition: transform var(--tr-rapida);
  background: transparent;
  border: none;
  padding: 0;
}

.thumbnail-item:hover {
  transform: scale(1.05);
}

.thumbnail-item--activo .thumbnail-item__preview {
  outline: 2px solid var(--c-terracota);
  outline-offset: 1px;
}

.thumbnail-item__preview {
  width: 80px;
  aspect-ratio: 1 / 1.414;
  background: #1a1a1a;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

/* Imagen WebP estática generada por tools/generate-thumbnails.mjs */
.thumbnail-item__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}

.thumbnail-item__num {
  font-family: var(--f-cuerpo);
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  position: absolute;
  bottom: 3px;
  right: 4px;
  z-index: 2;
  text-shadow: 0 0 3px rgba(0,0,0,0.85);
}


/* ---- Salida a la web ----
   Ocupa el sitio del boton de pantalla completa, que llevaba de vuelta a
   la pantalla de carga y no aportaba nada. */
.flip-web {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; color: inherit;
  font-family: var(--f-ui, 'Instrument Sans', sans-serif);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  opacity: .6; transition: opacity var(--tr-rapida, .3s ease);
  pointer-events: all;
}
.flip-web:hover, .flip-web:focus-visible { opacity: 1; }
.flip-web svg { display: block; }