/* ===============================
   FUENTES & VARIABLES
================================ */
/* Importación de la fuente 'Inter' desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* Definición de variables globales (CSS Custom Properties) para el tema oscuro por defecto */
:root {
    --bg-color: #121212;
    /* Fondo más oscuro y elegante */
    --text-color: #e0e0e0;
    /* Texto gris claro, menos agresivo */
    --toolbar-bg: rgba(30, 30, 30, 0.85);
    /* Transparencia para efecto vidrio */
    --toolbar-border: rgba(255, 255, 255, 0.1);
    /* Borde sutil */
    --icon-color: #a0a0a0;
    --icon-hover: #ffffff;
    --accent-color: #60a5fa;
    /* Azul más suave y moderno */
    --shadow-color: rgba(0, 0, 0, 0.6);
    --backdrop-blur: 12px;
    /* Desenfoque para glassmorphism */
}

/* Tema claro: Se activa cuando el body tiene la clase 'light-mode' */
body.light-mode {
    --bg-color: #f3f4f6;
    --text-color: #1f2937;
    --toolbar-bg: #ffffff;
    --toolbar-border: #e5e7eb;
    --icon-color: #4b5563;
    --icon-hover: #111827;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* ===============================
   RESET & BASE
================================ */
/* Reset universal para eliminar márgenes y paddings por defecto */
* {
    box-sizing: border-box;
    /* El padding y borde se incluyen en el tamaño total */
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    /* Fuente global */
}

/* Estilos base del cuerpo */
body {
    background: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    /* Ocupa todo el alto de la ventana */
    overflow: hidden;
    /* Evita scroll en el body (el visor maneja su propio espacio) */
    transition: background-color .3s, color .3s;
    /* Transición suave al cambiar de tema */
}

/* ===============================
   VISOR GENERAL
================================ */
/* Contenedor principal que envuelve toda la interfaz */
#viewer-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Organiza elementos verticalmente */
    position: relative;
    /* Contexto de posicionamiento para hijos absolutos */
}

/* ===============================
   ESCENARIO DEL LIBRO
================================ */
/* Área central donde se renderiza el libro 3D */
.book-stage {
    flex: 1;
    /* Ocupa el espacio restante disponible */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centra el libro vertical y horizontalmente */
    position: relative;
    overflow: hidden;
    /* Oculta desbordamientos durante animaciones */
    opacity: 0;
    /* Inicialmente invisible para efecto fade-in */
    visibility: hidden;
    /* No interactuable hasta cargar */
    transition: opacity 1s ease-in;
    /* Animación de aparición suave */
    padding: 20px;
    padding-bottom: 60px;
    padding-top: 60px;
    /* Espacio reservado para las toolbars */
    width: 100%;
    height: 100%;
}

/* Clase que se añade cuando el libro ha terminado de cargarse */
.book-stage.loaded {
    opacity: 1;
    visibility: visible;
}

/* Estilo del contenedor #book generado por PageFlip */
#book {
    box-shadow: 0 25px 60px var(--shadow-color);
    /* Sombra profunda para realismo 3D */
    transition: transform .3s ease;
    /* Transiciones suaves para zoom y rotación */
}

/* Fondo de las páginas (canvas) */
.page-canvas {
    background: #fff;
    /* Asegura fondo blanco para el PDF */
}

/* ===============================
   TOOLBAR UNIFICADA (SUPERIOR E INFERIOR)
================================ */
/* Estilos compartidos para ambas barras */
.toolbar-top,
.toolbar-bottom {
    width: 100%;
    min-height: 56px;
    /* Altura un poco mayor para elegancia */
    background: var(--toolbar-bg);
    backdrop-filter: blur(var(--backdrop-blur));
    /* Efecto vidrio */
    -webkit-backdrop-filter: blur(var(--backdrop-blur));
    border: 1px solid var(--toolbar-border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 200;
    position: absolute;
    left: 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Barra Superior */
.toolbar-top {
    top: 0;
    border-bottom: 1px solid var(--toolbar-border);
    border-top: none;
    justify-content: space-between;
    /* Separa los grupos a los extremos */
}

/* Barra Inferior */
.toolbar-bottom {
    bottom: 0;
    border-top: 1px solid var(--toolbar-border);
    border-bottom: none;
    justify-content: center;
    /* Centra los controles de navegación */
}

/* Grupos de botones dentro de las toolbars */
.toolbar-group {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Espacio entre botones */
}

/* Estilos de botones de la toolbar */
.toolbar-top button,
.toolbar-bottom button {
    background: transparent;
    border: none;
    color: var(--icon-color);
    font-size: 1.15rem;
    padding: 10px;
    border-radius: 8px;
    /* Bordes más redondeados */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* Transición fluida */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
}

/* Hover en botones */
.toolbar-top button:hover,
.toolbar-bottom button:hover {
    color: var(--icon-hover);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
    /* Elevación sutil al hover */
}

.toolbar-top button:active,
.toolbar-bottom button:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.15);
}

/* Indicador de página y Input numérico */
#page-control {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--icon-color);
}

/* Input para escribir número de página */
#page-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--toolbar-border);
    color: var(--text-color);
    width: 50px;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    outline: none;
    font-size: 0.9rem;
    transition: .2s;
}

#page-input:focus {
    border-color: var(--accent-color);
    /* Resaltar borde al escribir */
    background: rgba(255, 255, 255, 0.1);
}

/* Hack para ocultar flechas del input number en Webkit (Chrome, Safari) */
#page-input::-webkit-outer-spin-button,
#page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin-top: 50px;
}

/* Restricción para modo vista de una sola página */
/* Restricción para modo vista de una sola página */
.book-stage.single-view #book {
    max-width: 600px !important;
    /* Fuerza ancho máximo */
    margin: 0 auto;
}

/* FIX: Bloqueador de Hover para el lado izquierdo en modo simple */
.hover-blocker {
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    /* Cubre el 35% izquierdo del libro */
    height: 100%;
    z-index: 20;
    /* Por encima del libro (z-0ish) pero DEBAJO de toolbar (z-200) y arrows (z-150) */
    cursor: default;
    /* Cursor normal, no pointer */
    backface-visibility: hidden;
    user-select: none;
    pointer-events: auto;
    /* Asegurar que capture eventos */
    background: transparent;
    /* Transparente pero presente */
}

/* Firefox: Ocultar flechas input number */
#page-input[type=number] {
    appearance: textfield;
}

#page-total {
    min-width: 20px;
    text-align: center;
}

/* ===============================
   FLECHAS LATERALES
================================ */
/* Botones flotantes gigantes para navegación anterior/siguiente */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Centrado vertical exacto */
    background: none;
    border: none;
    color: var(--icon-color);
    font-size: 3rem;
    padding: 16px;
    cursor: pointer;
    z-index: 150;
    opacity: .4;
    /* Sutil por defecto */
    transition: .2s;
}

.nav-arrow:hover {
    opacity: 1;
    /* Totalmente visible al hover */
    color: var(--icon-hover);
}

.nav-arrow.left {
    left: 10px;
}

.nav-arrow.right {
    right: 10px;
}

/* ===============================
   LOADER (Pantalla de carga)
================================ */
/* Contenedor a pantalla completa */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 1);
    /* Fondo sólido oscuro */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    /* Máxima prioridad de visualización */
    transition: opacity 0.5s ease;
}

/* Estado oculto del loader */
#loader.hidden {
    opacity: 0;
    pointer-events: none;
    /* Permite clicks a través de él */
    visibility: hidden;
}

/* Texto debajo de la animación */
/* Texto debajo de la animación con efecto Shimmer (Resplandor) */
#loader-text {
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 40px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, #ffffff 50%, rgba(255, 255, 255, 0.3) 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 2.5s linear infinite;
}

/* Animación del brillo pasando por el texto */
@keyframes shimmer {
    to {
        background-position: 200% center;
    }
}

/* ANIMACIÓN DEL LIBRO (CSS Puro) */
.book-loader {
    --color: #fff;
    --duration: 6.8s;
    width: 32px;
    height: 12px;
    position: relative;
    margin: 32px 0 0 0;
    zoom: 1.5;
    /* Escalar tamaño */
}

/* Estructura interna del loader */
.book-loader .inner {
    width: 32px;
    height: 12px;
    position: relative;
    transform-origin: 2px 2px;
    transform: rotateZ(-90deg);
    animation: book var(--duration) ease infinite;
}

/* Tapas del libro */
.book-loader .inner .left,
.book-loader .inner .right {
    width: 60px;
    height: 4px;
    top: 0;
    border-radius: 2px;
    background: var(--color);
    position: absolute;
}

.book-loader .inner .left {
    right: 28px;
    transform-origin: 58px 2px;
    transform: rotateZ(90deg);
    animation: left var(--duration) ease infinite;
}

.book-loader .inner .right {
    left: 28px;
    transform-origin: 2px 2px;
    transform: rotateZ(-90deg);
    animation: right var(--duration) ease infinite;
}

.book-loader .inner .middle {
    width: 32px;
    height: 12px;
    border: 4px solid var(--color);
    border-top: 0;
    border-radius: 0 0 9px 9px;
    transform: translateY(2px);
}

/* Hojas del libro animado */
.book-loader ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    left: 50%;
    top: 0;
}

.book-loader ul li {
    height: 4px;
    border-radius: 2px;
    transform-origin: 100% 2px;
    width: 48px;
    right: 0;
    top: -10px;
    position: absolute;
    background: var(--color);
    transform: rotateZ(0deg) translateX(-18px);
    animation-duration: var(--duration);
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

/* Retrasos de animación para cada hoja */
.book-loader ul li:nth-child(1) {
    animation-name: page-0;
}

.book-loader ul li:nth-child(2) {
    animation-name: page-1;
}

.book-loader ul li:nth-child(3) {
    animation-name: page-2;
}

.book-loader ul li:nth-child(4) {
    animation-name: page-3;
}

.book-loader ul li:nth-child(5) {
    animation-name: page-4;
}

.book-loader ul li:nth-child(6) {
    animation-name: page-5;
}

.book-loader ul li:nth-child(7) {
    animation-name: page-6;
}

.book-loader ul li:nth-child(8) {
    animation-name: page-7;
}

.book-loader ul li:nth-child(9) {
    animation-name: page-8;
}

.book-loader ul li:nth-child(10) {
    animation-name: page-9;
}

.book-loader ul li:nth-child(11) {
    animation-name: page-10;
}

.book-loader ul li:nth-child(12) {
    animation-name: page-11;
}

.book-loader ul li:nth-child(13) {
    animation-name: page-12;
}

.book-loader ul li:nth-child(14) {
    animation-name: page-13;
}

.book-loader ul li:nth-child(15) {
    animation-name: page-14;
}

.book-loader ul li:nth-child(16) {
    animation-name: page-15;
}

.book-loader ul li:nth-child(17) {
    animation-name: page-16;
}

.book-loader ul li:nth-child(18) {
    animation-name: page-17;
}

/* Keyframes de animación para el paso de hojas */
@keyframes page-0 {
    4% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    13%,
    54% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    63% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-1 {
    5.86% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    14.74%,
    55.86% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    64.74% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-2 {
    7.72% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    16.48%,
    57.72% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    66.48% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-3 {
    9.58% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    18.22%,
    59.58% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    68.22% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-4 {
    11.44% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    19.96%,
    61.44% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    69.96% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-5 {
    13.3% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    21.7%,
    63.3% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    71.7% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-6 {
    15.16% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    23.44%,
    65.16% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    73.44% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-7 {
    17.02% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    25.18%,
    67.02% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    75.18% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-8 {
    18.88% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    26.92%,
    68.88% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    76.92% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-9 {
    20.74% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    28.66%,
    70.74% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    78.66% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-10 {
    22.6% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    30.4%,
    72.6% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    80.4% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-11 {
    24.46% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    32.14%,
    74.46% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    82.14% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-12 {
    26.32% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    33.88%,
    76.32% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    83.88% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-13 {
    28.18% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    35.62%,
    78.18% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    85.62% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-14 {
    30.04% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    37.36%,
    80.04% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    87.36% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-15 {
    31.9% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    39.1%,
    81.9% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    89.1% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-16 {
    33.76% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    40.84%,
    83.76% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    90.84% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes page-17 {
    35.62% {
        transform: rotateZ(0deg) translateX(-18px);
    }

    42.58%,
    85.62% {
        transform: rotateZ(180deg) translateX(-18px);
    }

    92.58% {
        transform: rotateZ(0deg) translateX(-18px);
    }
}

@keyframes left {
    4% {
        transform: rotateZ(90deg);
    }

    10%,
    40% {
        transform: rotateZ(0deg);
    }

    46%,
    54% {
        transform: rotateZ(90deg);
    }

    60%,
    90% {
        transform: rotateZ(0deg);
    }

    96% {
        transform: rotateZ(90deg);
    }
}

@keyframes right {
    4% {
        transform: rotateZ(-90deg);
    }

    10%,
    40% {
        transform: rotateZ(0deg);
    }

    46%,
    54% {
        transform: rotateZ(-90deg);
    }

    60%,
    90% {
        transform: rotateZ(0deg);
    }

    96% {
        transform: rotateZ(-90deg);
    }
}

@keyframes book {
    4% {
        transform: rotateZ(-90deg);
    }

    10%,
    40% {
        transform: rotateZ(0deg);
        transform-origin: 2px 2px;
    }

    40.01%,
    59.99% {
        transform-origin: 30px 2px;
    }

    46%,
    54% {
        transform: rotateZ(90deg);
    }

    60%,
    90% {
        transform: rotateZ(0deg);
        transform-origin: 2px 2px;
    }

    96% {
        transform: rotateZ(-90deg);
    }
}

/* ===============================
   SEARCH BAR (Barra de búsqueda)
================================ */
#search-bar-container {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--toolbar-bg);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--toolbar-border);
    box-shadow: 0 5px 15px var(--shadow-color);
    display: flex;
    gap: 8px;
    z-index: 300;
    transition: opacity 0.3s;
}

#search-bar-container.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    /* Efecto de deslizar hacia arriba al ocultar */
}

#search-input {
    background: transparent;
    border: none;
    color: var(--text-color);
    outline: none;
    font-size: 0.9rem;
    width: 120px;
}

#search-bar-container button {
    background: none;
    border: none;
    color: var(--icon-color);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 5px;
    transition: color 0.2s;
}

#search-bar-container button:hover {
    color: var(--accent-color);
}

#search-counter {
    font-size: 0.8rem;
    color: var(--icon-color);
    min-width: 40px;
    text-align: center;
}

.search-divider {
    width: 1px;
    height: 20px;
    background: var(--toolbar-border);
    margin: 0 5px;
}

/* Acciones de búsqueda */
#search-action,
#search-close {
    background: none;
    border: none;
    color: var(--icon-color);
    cursor: pointer;
    font-size: 1rem;
    transition: .2s;
}

#search-action:hover {
    color: var(--accent-color);
}

#search-close:hover {
    color: #ff6b6b;
    /* Rojo al cerrar */
}

/* Estado Activo para botones toggle (e.g. Slideshow) */
.toolbar-bottom button.active {
    color: var(--accent-color);
    background: rgba(59, 130, 246, 0.15);
}

/* ===============================
   SIDEBAR MINIATURAS
================================ */
#thumbnails-sidebar {
    position: fixed;
    top: 52px;
    /* Debajo de la toolbar top */
    left: 0;
    width: 250px;
    height: calc(100% - 52px);
    background: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(10px);
    /* Efecto "Glass" */
    border-right: 1px solid var(--toolbar-border);
    z-index: 400;
    transform: translateX(-100%);
    /* Oculto a la izquierda */
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

#thumbnails-sidebar.open {
    transform: translateX(0);
    /* Visible */
}

.sidebar-header {
    padding: 15px;
    border-bottom: 1px solid var(--toolbar-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h3 {
    font-size: 1rem;
    font-weight: 500;
}

#close-thumbnails {
    background: none;
    border: none;
    color: var(--icon-color);
    cursor: pointer;
    font-size: 1.2rem;
}

#thumbnails-container {
    flex: 1;
    overflow-y: auto;
    /* Scroll vertical */
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Columnas */
    gap: 15px;
}

/* Item individual de miniatura */
.thumbnail-item {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    transition: .2s;
    position: relative;
    background: #fff;
    min-height: 100px;
    /* Evita colapso antes de cargar */
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumbnail-canvas {
    width: 100%;
    height: auto;
    display: block;
}

.thumbnail-number {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-top-left-radius: 4px;
}

/* ===============================
   RESPONSIVE (Móviles)
================================ */
@media (max-width: 768px) {

    /* Toolbar flexible y scrolleable en móviles */
    .toolbar-top {
        justify-content: flex-start;
        /* Alinear al inicio para permitir scroll */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Suavidad en iOS */
        padding-right: 15px;
        /* Espacio final */
        gap: 10px;
    }

    /* Ocultar barra de scroll en toolbar top (estético) */
    .toolbar-top::-webkit-scrollbar {
        height: 0px;
        background: transparent;
    }

    /* Toolbar Inferior: Centrado y compacto */
    .toolbar-bottom {
        justify-content: center;
        padding: 5px;
    }

    .toolbar-group.center {
        width: auto;
        margin-bottom: 0;
        justify-content: center;
    }

    /* Ocultar flechas laterales en móvil (se usa swipe) */
    .nav-arrow {
        display: none;
    }

    /* Mostrar control de página explícito */
    #page-control {
        display: flex;
        margin: 0 10px;
    }

    /* Ajustar tamaño botones táctiles */
    .toolbar-top button,
    .toolbar-bottom button {
        padding: 8px 10px;
        font-size: 1rem;
    }
}

/* ===============================
   MODALES (Info / Ayuda / Share)
================================ */
/* Capa de fondo oscura */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    visibility: visible;
}

.modal-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Contenedor del contenido modal */
.modal-content {
    background: var(--toolbar-bg);
    color: var(--text-color);
    width: 90%;
    max-width: 500px;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--toolbar-border);
    position: relative;
    transform: translateY(0) scale(1);
    /* Estado visible */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Efecto rebote */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Estado oculto (animación de entrada) */
.modal-overlay.hidden .modal-content {
    transform: translateY(20px) scale(0.95);
}

.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: var(--icon-color);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal-btn:hover {
    color: #ef4444;
}

.modal-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--toolbar-border);
}

.modal-header i {
    font-size: 1.4rem;
    color: var(--accent-color);
}

.modal-header h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.modal-body {
    padding: 24px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.modal-body p {
    margin-bottom: 12px;
    color: var(--text-color);
    opacity: 0.9;
}

.modal-body hr {
    margin: 20px 0;
    border: none;
    border-top: 1px solid var(--toolbar-border);
}

.modal-body h3 {
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--accent-color);
    font-weight: 600;
}

.help-list {
    list-style: none;
    padding: 0;
}

.help-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.help-list li i {
    width: 20px;
    text-align: center;
    color: var(--icon-color);
    font-size: 0.9rem;
}

.modal-footer {
    padding: 15px 24px;
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 0.8rem;
    color: var(--icon-color);
    border-top: 1px solid var(--toolbar-border);
}

/* ===============================
   MODAL COMPARTIR (SHARE)
================================ */
.modal-content.share-content {
    max-width: 600px;
    background: #fff;
    /* Forzar fondo blanco tipo tarjeta */
    color: #333;
}

.share-body {
    padding: 30px;
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #333;
    border-radius: 8px;
}

/* Override para mantener estilo claro en el modal de compartir */
body.light-mode .share-body {
    background: #fff;
    color: #333;
}

.modal-content.share-content .close-modal-btn {
    color: #666;
    /* Visible sobre blanco */
}

.modal-content.share-content .close-modal-btn:hover {
    color: #ef4444;
}

#qrcode-container {
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#qrcode-container img {
    display: block;
    max-width: 150px;
    height: auto;
}

.share-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.share-details h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

.share-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f3f4f6;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

#share-url-input {
    border: none;
    background: transparent;
    flex: 1;
    outline: none;
    color: #555;
    font-size: 0.9rem;
    width: 100%;
}

#btn-copy-link {
    background: var(--toolbar-bg);
    border: 1px solid var(--toolbar-border);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

#btn-copy-link:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#btn-copy-link:active {
    transform: translateY(1px);
}

@media (max-width: 600px) {
    .share-body {
        flex-direction: column;
        text-align: center;
    }

    .share-input-group {
        width: 100%;
    }
}

/* ===============================
   PROGRESS BAR SCRUBBER
================================ */
.progress-bar-container {
    position: absolute;
    bottom: 52px;
    left: 0;
    width: 100%;
    height: 30px;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: auto;
}

/* Mostrar cuando el escenario se carga */
.book-stage.loaded .progress-bar-container {
    opacity: 1;
}

/* Slider (Input Range) Personalizado */
#page-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

#page-slider:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Knob para Chrome/Safari/Edge */
#page-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.5);
    /* Glow azul */
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-top: -6px;
    border: 2px solid #fff;
}

#page-slider::-webkit-slider-thumb:hover {
    transform: scale(1.4);
}

/* Knob para Firefox */
#page-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.5);
    transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#page-slider::-moz-range-thumb:hover {
    transform: scale(1.4);
}

/* Tooltip de Previsualización */
#progress-tooltip {
    position: absolute;
    bottom: 60px;
    /* Un poco más arriba */
    background: rgba(30, 30, 30, 0.95);
    color: #fff;
    padding: 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.1s;
    transform: translateX(-50%) translateY(10px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 220;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#progress-tooltip.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#preview-canvas {
    width: 120px;
    height: auto;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#progress-tooltip.visible {
    opacity: 1;
}

/* ===============================
   AJUSTES PARA MODO CLARO
================================ */
body.light-mode #page-slider {
    background: rgba(0, 0, 0, 0.15);
}

body.light-mode #page-slider:hover {
    background: rgba(0, 0, 0, 0.25);
}

body.light-mode #page-slider::-webkit-slider-thumb {
    background: #333333;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

body.light-mode #page-slider::-moz-range-thumb {
    background: #333333;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

body.light-mode #progress-tooltip {
    background: #333;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.light-mode #thumbnails-sidebar {
    background: rgba(255, 255, 255, 0.95);
    border-right: 1px solid #e5e7eb;
}