/* ==========================================================================
   1. VARIABLES DE CONTROL GLOBAL Y PALETA DE COLORES
   ========================================================================== */
:root {
  /* Proporciones optimizadas para evitar scrolls en pantallas compactas de 1366x768 */
  --book-max-width: 1000px;  
  --book-aspect-ratio: 1.5;  /* Proporción clásica 3:2 para catálogos doble página */
  --transition-speed: 0.55s; /* Velocidad de la animación de slide horizontal 2D */
  
  /* Paleta Estética */
  --bg-environment: #f5f5f7; /* Color de fondo del micrositio */
  --btn-bg: #1e293b;        /* Azul oscuro premium para botones de control */
  --btn-hover: #334155;
  --btn-zoom: #059669;       /* Verde esmeralda para activar la lupa */
  --btn-zoom-hover: #047857;
  --btn-zoom-active: #dc2626;/* Rojo para denotar salida de zoom */
  --btn-download: #0284c7;   /* Color diferencial para descarga del PDF */
}

/* ==========================================================================
   2. REGLAS BASE Y CONTENEDOR ENVOLVENTE
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-environment);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

/* Organiza verticalmente el libro y el panel de control inferior */
.main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  width: 100%;
  padding: 15px;
}

/* Contenedor flexible amarrado al Viewport Height (vh) para laptops compactas */
.flipbook-container {
  position: relative;
  /* Calcula el ancho adaptativo según la altura sin romper el aspecto */
  width: calc(62vh * var(--book-aspect-ratio)); 
  max-width: var(--book-max-width);
  height: 62vh; /* No supera el 62% del alto de la pantalla, dejando espacio libre abajo */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1);
}

/* Cuerpo del Libro */
.book {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: width var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1),
              transform var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1);
}

/* Sombra e iluminación del lomo central (Activo en modo libro abierto) */
.book::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 30px;
  height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to right, 
    rgba(0,0,0,0) 0%, 
    rgba(0,0,0,0.03) 40%, 
    rgba(0,0,0,0.06) 50%, 
    rgba(0,0,0,0.03) 60%, 
    rgba(0,0,0,0) 100%);
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ==========================================================================
   3. MAQUETACIÓN PREMIUM DE PÁGINAS Y RESOLUCIÓN CRISP-EDGES
   ========================================================================== */
.page {
  position: absolute;
  top: 0;
  width: 50%; /* Por defecto en libro abierto ocupan exactamente la mitad */
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1), 
              opacity var(--transition-speed) ease-in-out,
              width var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1),
              left var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.page-content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ACOPLE ESTRICTO DE IMAGENES: Forzado al contenedor sin recortes */
.editorial-bg {
  background-size: 100% 100%; 
  background-position: center;
  background-repeat: no-repeat;
  
  /* Filtros de renderizado de hardware para evitar pixelado en letras pequeñas */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0); 
  backface-visibility: hidden;
}

/* Numeración de página sutil estilo catálogo */
.page-number {
  position: absolute;
  bottom: 20px;
  right: 25px;
  font-size: 0.75rem;
  font-family: system-ui, sans-serif;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 3px 9px;
  border-radius: 4px;
  z-index: 6;
  pointer-events: none;
}

/* ==========================================================================
   4. CLASES DE ESTADO ACTIVO (Navegación Escritorio Abierto/Cerrado)
   ========================================================================== */
.page.left-side { 
  left: 0; 
  opacity: 1; 
  pointer-events: auto; 
  transform: translateX(0); 
  z-index: 5; 
}

.page.right-side { 
  left: 50%; 
  opacity: 1; 
  pointer-events: auto; 
  transform: translateX(0); 
  z-index: 5; 
}

/* Transición de salida controlada por aceleración de hardware */
.page.exit-left { 
  transform: translateX(-100%); 
  opacity: 0; 
  pointer-events: none; 
  z-index: 2; 
}

.page.hidden-page {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* AJUSTE FÍSICO DE LIBRO CERRADO: Oculta lomos y encoge contenedor al 50% */
@media (min-width: 821px) {
  .book.book-closed {
    width: 50%; 
  }
  .book.book-closed::after {
    opacity: 0; /* Oculta la línea divisoria si el libro está cerrado */
  }
  .book.cover-closed .page.right-side {
    width: 100%;
    left: 0;
  }
  .book.back-closed .page.left-side {
    width: 100%;
    left: 0;
  }
}

/* ==========================================================================
   5. INTERACCIONES FÍSICAS DE LAS ESQUINAS (Zonas de Amago)
   ========================================================================== */
.corner-trigger {
  position: absolute;
  bottom: 0;
  width: 12%;
  min-width: 80px;
  height: 18%;
  min-height: 100px;
  z-index: 50; 
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0); 
}
.bottom-left { left: 0; }
.bottom-right { right: 0; }

/* Micro-interacciones de levantamiento sutil (Solo cuando NO hay zoom) */
.book:not(.book-closed):has(#globalNext:hover) .page.right-side { transform: translateX(-8px) scale(0.995); }
.book:not(.book-closed):has(#globalPrev:hover) .page.left-side { transform: translateX(8px) scale(0.995); }
.book.cover-closed:has(#globalNext:hover) .page.right-side { transform: scale(0.985); }

.corner-trigger.disabled {
  pointer-events: none !important;
  display: none !important;
}

/* ==========================================================================
   6. PANEL DE CONTROL INFERIOR (Botones de UI)
   ========================================================================== */
.bottom-controls {
  display: flex;
  gap: 15px;
  z-index: 60;
}

.action-btn {
  background-color: var(--btn-bg);
  color: white;
  border: none;
  padding: 10px 22px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.action-btn:hover { background-color: var(--btn-hover); }
.action-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Botón Lupa */
.zoom-btn { background-color: var(--btn-zoom) !important; }
.zoom-btn:hover { background-color: var(--btn-zoom-hover) !important; }
.zoom-btn.zoom-active { background-color: var(--btn-zoom-active) !important; }

/* Botón Descarga */
.download-pdf { background-color: var(--btn-download); }
.download-pdf:hover { background-color: #0369a1; }

/* ==========================================================================
   7. MODO DE ENFOQUE EXCLUSIVO: ZOOM INTERACTIVO Y ARRASTRE
   ========================================================================== */
.book.zoomed {
  cursor: grab;
  z-index: 40;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.25);
}
.book.zoomed:active { cursor: grabbing; }

/* Deshabilitamos animaciones de página durante el drag de zoom para evitar lag */
.book.zoomed .page { transition: none !important; }
.book.zoomed .corner-trigger { display: none !important; }

/* ==========================================================================
   8. CORRECCIÓN CRÍTICA DE RESPONSIVE: COMPORTAMIENTO SMARTPHONES (Móvil)
   ========================================================================== */
@media (max-width: 820px) {
  .flipbook-container {
    width: 95vw; /* Aprovecha el ancho completo del dispositivo */
    height: calc(95vw * 1.41); /* Aplica el ratio nativo de una hoja carta vertical */
    max-height: 62vh; /* Margen estricto de seguridad para forzar los botones adentro */
  }

  .book {
    width: 100% !important;
    height: 100% !important;
  }

  .book::after { 
    display: none !important; /* Quita el lomo central en smartphones */
  }

  .page {
    width: 100% !important; /* Transforma el layout a página simple completa */
    left: 0 !important;
  }

  /* El render móvil simplemente superpone los estados de frente */
  .page.right-side, .page.left-side {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
  }

  .page.exit-left {
    transform: translateX(-100%);
    opacity: 0;
    z-index: 1;
  }

  /* Ajustes para facilitar los toques táctiles en móviles (Thumb Zone) */
  .corner-trigger {
    width: 30%;
    height: 20%;
  }

  /* Paneo móvil suave en zoom */
  .book:has(#globalNext:hover) .page.right-side,
  .book:has(#globalNext:hover) .page.left-side {
    transform: translateX(-4px);
  }

  /* Distribución fluida de botones inferiores alineados en una sola fila */
  .bottom-controls {
    width: 95vw;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
  }

  .action-btn {
    flex: 1;
    padding: 12px 4px;
    font-size: 0.72rem;
    white-space: nowrap;
    text-align: center;
  }
}

/* ==========================================================================
   9. FORMATO EXCLUSIVO DE IMPRESIÓN (Limpieza total para descarga de PDF)
   ========================================================================== */
@media print {
  @page { size: letter landscape; margin: 0; }
  body, html, .main-wrapper { background: #fff !important; width: 100% !important; height: 100% !important; min-height: auto !important; padding: 0 !important; margin: 0 !important; }
  .bottom-controls, .corner-trigger, .book::after { display: none !important; }
  .flipbook-container { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; transform: none !important; }
  .book { width: 100% !important; height: 100% !important; box-shadow: none !important; overflow: visible !important; display: block !important; transform: none !important; left: 0 !important; top: 0 !important; }
  .page { position: relative !important; display: block !important; width: 100% !important; height: 100vh !important; opacity: 1 !important; transform: none !important; page-break-after: always !important; break-after: page !important; left: 0 !important; background-color: #fff !important; }
  .page-content { width: 100% !important; height: 100% !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}