/* ============================================================
   RESPONSIVE.CSS — Adaptaciones por breakpoint
   TANTO LAMPS — Catálogo Digital  v2026060
   ============================================================ */

/* ============================================================
   TABLET (768px – 1199px)
   ============================================================ */

@media (max-width: 1199px) {
  .flip-header__logo { height: 18px; }
  .flip-progress-wrap { max-width: 240px; }
  .modal__contenedor { grid-template-columns: 40% 60%; }
}

/* ============================================================
   ROTATE PROMPT — solo visible en mobile portrait
   ============================================================ */

.rotate-prompt {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: var(--c-negro-pu);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 32px;
  /* Bloquear long-press (selección, diccionario, context menu) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.rotate-prompt * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.rotate-prompt__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--c-crema);
}

.rotate-prompt__icon {
  color: var(--c-terracota);
  animation: rotateHint 2.4s ease-in-out infinite;
}

@keyframes rotateHint {
  0%, 35%, 100% { transform: rotate(0deg); }
  60%, 75%      { transform: rotate(90deg); }
}

.rotate-prompt__texto {
  font-family: var(--f-titulo);
  font-size: 22px;
  font-style: italic;
  font-weight: 200;
  letter-spacing: 0.02em;
  color: var(--c-crema);
}

.rotate-prompt__sub {
  font-family: var(--f-cuerpo);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 244, 230, 0.55);
  max-width: 240px;
  line-height: 1.5;
}

/* Rotate prompt en teléfono: SOLO después de que el usuario haya tocado
   (post-tap) y esté en portrait. Antes del tap, mostramos el loader
   con "TOCA PARA EMPEZAR" — el rotate prompt llega después. */
@media (orientation: portrait) {
  body.tlf.post-tap .rotate-prompt { display: flex; }
}

/* La salida del aviso de girar. `.rotate-prompt *` apaga los eventos de
   puntero de todo lo que hay dentro —para que un long-press no dispare el
   menú del navegador—, así que este enlace tiene que recuperarlos a mano o
   no se deja tocar. */
.rotate-prompt__volver {
  pointer-events: auto;
  margin-top: 10px;
  font-family: var(--f-ui, 'Instrument Sans', sans-serif);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 244, 230, 0.55); text-decoration: none;
  padding: 12px 8px;
}

/* ============================================================
   MÓVIL EN HORIZONTAL (height baja → es un móvil rotado)
   - Ocultar header y footer para ganar espacio
   - Flipbook a tamaño completo
   - NO afecta a tablets ni a escritorio (ambos tienen height > 500)
   ============================================================ */

@media (orientation: landscape) and (max-height: 500px) {

  :root {
    --ui-fondo: #1a1a1a;
    /* Y el color de la tinta con él. El fondo se ponía casi negro para que
       el libro destaque, pero `--ui-texto` se quedaba en la tinta oscura de
       siempre —rgba(30,28,26,.55)— sobre ese negro: los controles seguían
       ahí, del mismo color que el fondo, invisibles. Un fondo oscuro pide
       tinta clara; si algún día se vuelve al fondo claro, estas dos líneas
       se quitan juntas. */
    --ui-texto: rgba(255, 244, 230, 0.72);
  }

  /* `.flip-web` («volver a la web») hereda el color del documento, que es la
     tinta oscura: sobre el fondo negro tampoco se veía. */
  .flip-header { color: rgba(255, 244, 230, 0.72); }
  .flip-web { opacity: .8; }

  /* Aquí se ocultaban el header Y el pie para ganar sitio, pero este es
     justo el único estado en el que un teléfono lee el catálogo de verdad
     —el rotate-prompt bloquea el portrait—, así que en el móvil no había
     ni «volver a la web», ni lupa, ni el menú del catálogo (páginas,
     contador y miniaturas). Se quedan los dos.

     EL PIE, FLOTANDO EN LA ESQUINA. En la fila del `#catalogo-wrap` le
     quitaba alto al libro, y en una pantalla de 412 px de alto eso se nota
     mucho. Puesto en la esquina de abajo a la derecha no le quita nada: el
     libro va centrado y en un teléfono apaisado quedan casi 200 px de
     margen a cada lado —el libro es más alto que ancho—, así que la
     pastilla cae sobre el fondo y no sobre la página.

     Para que quepa en ese margen se deja fuera la barra de progreso y se
     queda el contador, que dice lo mismo en menos sitio. Con la barra no
     cabía y se metía unos 40 px por encima del libro. */
  .flip-footer {
    position: absolute; right: 12px; bottom: 10px; left: auto;
    z-index: 10;
    width: auto;
    padding: 5px 10px;
    gap: 8px;
    justify-content: flex-end;
    border-radius: 999px;
    background: rgba(18, 16, 14, .45);
    backdrop-filter: blur(4px);
  }
  .flip-nav-btn, .flip-btn--thumbnails { width: 24px; height: 24px; }
  .flip-progress-bar { display: none; }
  .flip-progress-wrap { max-width: none; width: auto; }

  .flip-header { padding: 6px 10px; }
  .flip-header__logo { height: 20px; }
  .flip-btn--loupe { width: 38px !important; height: 38px !important; }
  .flip-btn--loupe svg { width: 22px; height: 22px; }
  /* Separación entre «web» y la lupa: con 4 px se tocaban y el dedo no
     sabía a cuál iba. */
  .flip-header__actions { gap: 16px; }

  /* La lupa medía 220 px de diámetro, pensada para un monitor. En un
     teléfono girado la pantalla tiene ~400 px de alto: media pantalla de
     lupa tapa justo lo que se quiere mirar. El JS lee el tamaño de aquí,
     así que sigue centrada en el dedo. */
  .loupe { width: 150px; height: 150px; }

  #catalogo-wrap {
    padding: 0;
    overflow: hidden;
  }

  #tanto-catalogo {
    flex: 1;
    width: 100%;
    height: 100vh;
  }

  body { overscroll-behavior: none; }

}

/* Hint "TOCA PARA EMPEZAR" + cursor pointer en el loader.
   Visible en CUALQUIER orientación si:
     - es teléfono y aún no ha tocado (pre-tap)
     - es escritorio y el flipbook ya cargó (loader-ready, añadido por JS
       cuando inicializarFlip completa)
   Después del tap/click, el loader se desvanece via JS. */
/* «Toca para empezar» solo cuando de verdad hay algo que enseñar: en el
   teléfono espera además a `precarga-lista`, que pone el JS cuando las
   primeras hojas ya están descargadas (o al agotarse su tope de espera).
   Antes invitaba a entrar de inmediato y el catálogo se abría en blanco,
   que es justo lo que esta pantalla existe para evitar. El enlace de volver
   a la web sí sale desde el principio: nadie tiene que esperar para irse. */
body.tlf.pre-tap.precarga-lista .loader__hint,
body.loader-ready .loader__hint { display: block; }
body.tlf.pre-tap .loader,
body.loader-ready .loader { cursor: pointer; }

/* Escudo durante rotación — ocultar el catálogo (que está en estado
   transitorio) y mostrar el loader hasta que la recarga termine.
   La clase .transitioning se añade vía JS al detectar el cambio de
   orientación (matchMedia change, dispara antes que orientationchange). */
body.transitioning #catalogo-wrap,
body.transitioning .rotate-prompt {
  visibility: hidden !important;
}
body.transitioning .loader {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

/* ============================================================
   MOBILE (< 768px)
   Sin flip — scroll vertical con scroll-snap
   ============================================================ */

@media (max-width: 767px) {

  #catalogo-wrap {
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
  }

  #tanto-catalogo.modo-scroll {
    /* CRÍTICO: cambiar de flex (row) a block para que las páginas
       se apilen VERTICALMENTE (sin esto, todas se solapan lateralmente
       y solo se ve una). */
    display: block;
    width: 100%;
    flex: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* En modo scroll las .flip-hoja también respetan snap */
  #tanto-catalogo.modo-scroll .flip-hoja {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.4142;
    scroll-snap-align: start;
    position: relative;
  }

  #tanto-catalogo.modo-scroll .pagina {
    width: 100%;
    height: 100%;
  }

  .flip-header { padding: 8px 16px; }
  .flip-header__logo { height: 16px; }
  /* Ojo: aquí había una regla que ocultaba ".flip-btn:not(#btn-fullscreen)"
     dentro de las acciones. #btn-fullscreen no existe en el HTML, así que
     el :not() no protegía nada y la regla ocultaba TODO botón de ahí —hoy
     solo hay uno, la lupa— dejándola inutilizable en cualquier pantalla
     menor de 768px. Quitada: no hay ningún botón de más que esconder. */

  .flip-footer { padding: 8px 16px 10px; gap: 10px; }
  .flip-progress-wrap { max-width: 160px; }

  /* Modal full-screen en mobile */
  .modal__contenedor {
    grid-template-columns: 1fr;
    grid-template-rows: 45vw auto;
    width: 100%;
    max-width: 100%;
    max-height: 95vh;
    border-radius: 0;
    margin-top: auto;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .modal { align-items: flex-end; padding: 0; }

  .modal__imagen-wrap { min-height: 45vw; max-height: 45vw; }
  .modal__info { overflow-y: auto; max-height: 55vw; }
  .modal__cerrar { background: rgba(0,0,0,0.6); }

  .thumbnails-panel {
    max-width: 100vw;
    bottom: 55px;
    border-radius: 8px 8px 0 0;
    padding: 12px;
    max-height: 220px;
  }

  .thumbnails-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 6px;
  }

  .layout-d { padding: 20px; }


}

/* ============================================================
   IMPRESIÓN
   ============================================================ */

@media print {

  .loader,
  .flip-header,
  .flip-footer,
  .thumbnails-panel,
  .modal,
  .btn-ver-producto {
    display: none !important;
  }

  body {
    overflow: visible;
    background: white;
  }

  #catalogo-wrap {
    position: static;
    background: white;
    display: block;
  }

  #tanto-catalogo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  #tanto-catalogo .stf__parent,
  #tanto-catalogo .stf__wrapper {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    perspective: none !important;
  }

  .flip-hoja {
    width: 210mm !important;
    height: 297mm !important;
    page-break-after: always;
    break-after: page;
  }

  .pagina {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden;
    display: flex !important;
  }

  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }

  video { display: none !important; }

  .layout-b__titulo,
  .layout-f__titulo { font-size: 36pt !important; }
  .layout-d__titulo { font-size: 28pt !important; }
}