/* ══════════════════════════════════════════════════════════════
   VARIABLES GLOBALES
══════════════════════════════════════════════════════════════ */
:root {
    --bg-color:        #0f1012;
    --page-color:      #ffffff;
    --cover-color:     #1a1c20;
    --accent:          #3b82f6;
    --accent-light:    #60a5fa;
    --accent-dark:     #1e3a8a;
    --duration:        1.5s;
    --duration-mobile: 0.35s;
    --book-width:      800px;
    --book-height:     550px;
    --zoom-level:      1;
    --ease-book:       cubic-bezier(0.15, 0.45, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════
   RESET / BASE
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
    background-image:      url('../images/MMixta.jpg');
    background-size:       cover;
    background-position:   center;
    background-repeat:     no-repeat;
    background-attachment: fixed;
    background-color:      var(--bg-color);
    color:          #ffffff;
    font-family:    "Inter", sans-serif;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    height:         100vh;
    height:         100dvh;
    margin:         0;
    touch-action:   none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout:       none;
}

body::before {
    content:  '';
    position: fixed;
    inset:    0;
    background: rgba(15, 16, 18, 0.75);
    z-index: -1;
}

/* ══════════════════════════════════════════════════════════════
   OVERLAY DE CARGA
══════════════════════════════════════════════════════════════ */
#loading-overlay {
    position:        fixed;
    inset:           0;
    background:      linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 55%, var(--accent-light) 100%);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    z-index:         9000;
    opacity:         1;
    transition:      opacity 0.55s ease;
    pointer-events:  all;
}

#loading-overlay.fade-out {
    opacity:        0;
    pointer-events: none;
}

.loading-card {
    text-align: center;
    max-width:  460px;
    width:      90%;
    padding:    48px 40px;
    animation:  lc-enter 0.5s ease-out both;
}

@keyframes lc-enter {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.loading-book-wrap {
    display:         flex;
    justify-content: center;
    margin-bottom:   32px;
    height:          72px;
    perspective:     500px;
}

.loading-book {
    position:        relative;
    width:           80px;
    height:          64px;
    animation:       lb-float 3s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes lb-float {
    0%,100% { transform: translateY(0)    rotateX(8deg) rotateY(-10deg); }
    50%     { transform: translateY(-14px) rotateX(8deg) rotateY(-10deg); }
}

.lb-cover {
    position:      absolute;
    left: 0; top: 0;
    width:         44px;
    height:        64px;
    background:    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.15) 100%);
    border:        1px solid rgba(255,255,255,.3);
    border-radius: 3px 0 0 3px;
    transform-origin: right center;
    transform:     rotateY(-30deg);
    box-shadow:    inset -4px 0 8px rgba(0,0,0,.2);
}

.lb-spine {
    position:      absolute;
    left: 44px; top: 0;
    width:         6px;
    height:        64px;
    background:    linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
    border-radius: 0;
}

.lb-page {
    position:      absolute;
    top:           3px;
    width:         38px;
    height:        58px;
    background:    rgba(255,255,255,.9);
    border-radius: 0 2px 2px 0;
    transform-origin: left center;
}

.lb-page-1 { left: 47px; animation: lp-flip1 2.6s ease-in-out infinite; }
.lb-page-2 { left: 47px; animation: lp-flip2 2.6s ease-in-out infinite .35s; }
.lb-page-3 { left: 47px; animation: lp-flip3 2.6s ease-in-out infinite .7s; }

@keyframes lp-flip1 {
    0%,100% { transform: rotateY(0deg);   opacity: .9; }
    50%     { transform: rotateY(-30deg); opacity: .6; }
}
@keyframes lp-flip2 {
    0%,100% { transform: rotateY(0deg);   opacity: .75; }
    50%     { transform: rotateY(-20deg); opacity: .5; }
}
@keyframes lp-flip3 {
    0%,100% { transform: rotateY(0deg);   opacity: .6; }
    50%     { transform: rotateY(-10deg); opacity: .4; }
}

.loading-title {
    font-size:      2rem;
    font-weight:    800;
    color:          #ffffff;
    margin:         0 0 10px;
    letter-spacing: -.5px;
    text-shadow:    0 2px 20px rgba(0,0,0,.25);
}

.loading-subtitle {
    font-size:   0.9375rem;
    color:       rgba(255,255,255,.82);
    margin:      0 0 28px;
    line-height: 1.5;
    min-height:  1.5em;
    transition:  opacity .3s ease;
}

.loading-progress-track {
    width:         100%;
    max-width:     320px;
    height:        5px;
    background:    rgba(255,255,255,.22);
    border-radius: 10px;
    overflow:      hidden;
    margin:        0 auto 8px;
    box-shadow:    inset 0 1px 3px rgba(0,0,0,.2);
}

.loading-progress-fill {
    height:        100%;
    width:         0%;
    background:    linear-gradient(90deg, rgba(255,255,255,.7) 0%, #fff 60%, rgba(255,255,255,.7) 100%);
    border-radius: 10px;
    transition:    width .35s cubic-bezier(.4,0,.2,1);
    box-shadow:    0 0 12px rgba(255,255,255,.55);
}

.loading-progress-pct {
    font-size:      0.75rem;
    font-weight:    600;
    color:          rgba(255,255,255,.65);
    margin-bottom:  22px;
    letter-spacing: .5px;
    min-height:     1em;
}

.loading-dots {
    display:         flex;
    justify-content: center;
    gap:             8px;
}

.loading-dots span {
    width:        8px;
    height:       8px;
    background:   rgba(255,255,255,.85);
    border-radius: 50%;
    box-shadow:   0 0 8px rgba(255,255,255,.5);
    animation:    dot-pulse 1.5s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: .22s; }
.loading-dots span:nth-child(3) { animation-delay: .44s; }

@keyframes dot-pulse {
    0%,100% { transform: scale(1);    opacity: .9; }
    50%     { transform: scale(1.55); opacity: .45; }
}

#loading-overlay.is-error {
    background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 55%, #ef4444 100%);
}

.loading-error-icon {
    font-size:     4.5rem;
    margin-bottom: 16px;
    animation:     shake-once .55s ease;
}

@keyframes shake-once {
    0%,100%       { transform: translateX(0);  }
    15%,45%,75%   { transform: translateX(-9px); }
    30%,60%,90%   { transform: translateX( 9px); }
}

.loading-error-box {
    background:    rgba(0,0,0,.25);
    border:        1px solid rgba(255,255,255,.15);
    border-radius: 14px;
    padding:       18px 22px;
    font-size:     .8125rem;
    text-align:    left;
    max-width:     360px;
    margin:        0 auto;
}

.loading-error-box strong { color: #fca5a5; }

/* ══════════════════════════════════════════════════════════════
   VIEWPORT 3-D
══════════════════════════════════════════════════════════════ */
#viewport {
    perspective:     2500px;
    flex:            1;
    display:         flex;
    justify-content: center;
    align-items:     center;
    padding:         80px;
    overflow-x:      auto;
    overflow-y:      hidden;
    cursor:          grab;
    scroll-behavior: auto;
}

body.is-zoomed #viewport { padding: 50vh 50vw; }
#viewport:active          { cursor: grabbing; }

#viewport::-webkit-scrollbar       { width: 8px; height: 8px; }
#viewport::-webkit-scrollbar-track { background: rgba(0,0,0,.1); }
#viewport::-webkit-scrollbar-thumb { background: rgba(59,130,246,.35); border-radius: 4px; }
#viewport::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,.55); }

/* ── Contenedor del libro — con transición suave para el desplazamiento ── */
#book-container {
    display:         flex;
    align-items:     center;
    justify-content: center;
    /* Transición suave al cambiar entre portada / contenido / contraportada */
    transition:      transform 0.45s var(--ease-book);
}

body.single-page-mode #book-container {
    /* En móvil la transición de transform no se necesita */
    transition: none;
}

/* ══════════════════════════════════════════════════════════════
   LIBRO
══════════════════════════════════════════════════════════════ */
.book {
    position:        relative;
    width:           calc(var(--book-width)  * var(--zoom-level));
    height:          calc(var(--book-height) * var(--zoom-level));
    transform-style: preserve-3d;
    display:         flex;
    justify-content: flex-end;
    transition:
        width  .2s ease-out,
        height .2s ease-out,
        transform var(--duration) var(--ease-book);
    margin:      auto;
    flex-shrink: 0;
    user-select: none;
    filter:      drop-shadow(0 30px 60px rgba(0,0,0,.4))
                 drop-shadow(0 15px 30px rgba(0,0,0,.3));
}

body.is-zoomed .book { margin: auto; }

/* Lomo */
.spine {
    position:  absolute;
    left:      0;
    top:       0;
    width:     4%;
    height:    100%;
    background: linear-gradient(90deg,
        rgba(0,0,0,.5)  0%,
        rgba(0,0,0,.25) 30%,
        rgba(0,0,0,.15) 60%,
        rgba(0,0,0,.3)  100%);
    transform-style: preserve-3d;
    transform:       translateZ(-1px);
    border-radius:   2px 0 0 2px;
}

/* ── Hojas ── */
.leaf {
    position:         absolute;
    top:    0;
    right:  0;
    width:  50%;
    height: 100%;
    transform-style:  preserve-3d;
    transform-origin: left center;
    transition:       transform var(--duration) var(--ease-book);
    z-index: 1;
}

.leaf::before {
    content:   '';
    position:  absolute;
    top:    0;
    right:  0;
    width:  2px;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.18) 50%,
        rgba(0,0,0,.05) 100%);
    transform:      translateZ(1px);
    pointer-events: none;
    z-index: 10;
}

.leaf.flipped {
    transform: rotateY(-180deg) rotateZ(-.5deg) translateZ(.5px);
}

/* Páginas */
.page-front,
.page-back {
    position:  absolute;
    width:     100%;
    height:    100%;
    top: 0; left: 0;
    /* CRÍTICO: backface-visibility oculta la cara trasera en 3D */
    -webkit-backface-visibility: hidden;
    backface-visibility:         hidden;
    background: var(--page-color);
    display:    flex;
    justify-content: center;
    align-items:     center;
    overflow:   hidden;
    box-shadow:
        inset 3px 0 10px rgba(0,0,0,.1),
        0 10px 20px rgba(0,0,0,.2);
    transition: box-shadow .3s ease;
}

.page-front:hover,
.page-back:hover {
    box-shadow:
        inset 3px 0 14px rgba(0,0,0,.14),
        0 14px 28px rgba(0,0,0,.28),
        0 0 18px rgba(59,130,246,.08);
}

/*
 * IMPORTANTE: .page-back necesita rotateY(-180deg) para quedar oculta
 * cuando la hoja NO está volteada. No se debe sobrescribir este transform
 * con ninguna regla posterior (como el antiguo bloque de performance).
 */
.page-back  { transform: rotateY(-180deg); border-right: 1px solid rgba(0,0,0,.1); }
.page-front { border-left: 1px solid rgba(0,0,0,.1); }

.page-shadow {
    position:  absolute;
    inset:     0;
    pointer-events: none;
    z-index:   5;
    transition: opacity var(--duration) ease;
    opacity:   0;
}

.page-front .page-shadow {
    background: linear-gradient(to right,
        rgba(0,0,0,.22) 0%, rgba(0,0,0,.05) 15%,
        rgba(0,0,0,.1)  40%, rgba(0,0,0,.22) 50%,
        rgba(0,0,0,0) 80%);
}
.page-back .page-shadow {
    background: linear-gradient(to left,
        rgba(0,0,0,.22) 0%, rgba(0,0,0,.05) 15%,
        rgba(0,0,0,.1)  40%, rgba(0,0,0,.22) 50%,
        rgba(0,0,0,0) 80%);
}

.leaf.flipped       .page-back  .page-shadow { opacity: 1; }
.leaf:not(.flipped) .page-front .page-shadow { opacity: 1; }

/* Portada / contraportada */
.is-cover-front .page-front,
.is-cover-back  .page-back {
    background: var(--cover-color);
    color:      white;
    box-shadow:
        inset 0 0 30px rgba(0,0,0,.5),
        5px  5px 15px rgba(0,0,0,.3);
}

/* Canvas del PDF */
.leaf canvas {
    width:    100% !important;
    height:   100% !important;
    display:  block;
    /* Empieza invisible; transición a visible cuando JS añade .loaded */
    opacity:    0;
    transition: opacity .35s ease;
    image-rendering: high-quality;
}

.leaf canvas.loaded { opacity: 1; }

/* Esquinas interactivas */
.page-front::after,
.page-back::after {
    content:   "";
    position:  absolute;
    width:     100px;
    height:    100px;
    z-index:   1000;
    cursor:    pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-front::after {
    bottom: 0; right: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(59,130,246,.08) 50%);
    border-bottom-right-radius: 12px;
}

.page-back::after {
    bottom: 0; left: 0;
    background: linear-gradient(-135deg, transparent 50%, rgba(59,130,246,.08) 50%);
    border-bottom-left-radius: 12px;
}

.page-front:hover::after {
    background: linear-gradient(135deg, transparent 50%, rgba(59,130,246,.18) 50%);
    box-shadow: 0 0 20px rgba(59,130,246,.2);
}

.page-back:hover::after {
    background: linear-gradient(-135deg, transparent 50%, rgba(59,130,246,.18) 50%);
    box-shadow: 0 0 20px rgba(59,130,246,.2);
}

/* ══════════════════════════════════════════════════════════════
   CONTROLES DE ZOOM LATERALES
══════════════════════════════════════════════════════════════ */
.lateral-zoom-controls {
    position:        fixed;
    right:           18px;
    top:             50%;
    transform:       translateY(-50%);
    background:      rgba(15,16,18,.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:          1px solid rgba(255,255,255,.1);
    border-radius:   20px;
    padding:         8px 0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    z-index:         100;
    box-shadow:
        0 10px 40px rgba(0,0,0,.5),
        0  4px 12px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.1);
    transition: box-shadow .3s ease;
}

.lateral-zoom-controls:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
}

.lateral-zoom-controls button {
    width:          42px;
    height:         42px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    background:     transparent;
    border:         none;
    color:          rgba(255,255,255,.65);
    cursor:         pointer;
    border-radius:  12px;
    font-size:      15px;
    transition:     all .25s ease;
    position:       relative;
    overflow:       hidden;
}

.lateral-zoom-controls button:hover {
    color:      #ffffff;
    background: rgba(59,130,246,.18);
    transform:  scale(1.1);
}

.lateral-zoom-controls button:active { transform: scale(.95); }

.zoom-divider {
    width:      28px;
    height:     1px;
    background: rgba(255,255,255,.1);
    margin:     2px 0;
}

/* ══════════════════════════════════════════════════════════════
   CONTROLES FLOTANTES (derecha)
══════════════════════════════════════════════════════════════ */
.floating-controls {
    position:       fixed;
    right:          18px;
    bottom:         24px;
    z-index:        200;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.floating-btn {
    width:          50px;
    height:         50px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    background:     rgba(15,16,18,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border:         1px solid rgba(255,255,255,.1);
    border-radius:  14px;
    color:          rgba(255,255,255,.75);
    cursor:         pointer;
    font-size:      16px;
    transition:     all .28s cubic-bezier(.4,0,.2,1);
    box-shadow:
        0 10px 40px rgba(0,0,0,.5),
        0  4px 12px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.1);
}

.floating-btn:hover {
    background:   linear-gradient(135deg, rgba(59,130,246,.3), rgba(59,130,246,.15));
    border-color: rgba(59,130,246,.45);
    color:        #ffffff;
    transform:    translateY(-2px) scale(1.08);
    box-shadow:   0 8px 22px rgba(59,130,246,.25);
}

.floating-btn:active { transform: scale(.94); }

/* ══════════════════════════════════════════════════════════════
   CONTROLES FLOTANTES (izquierda — ayuda)
══════════════════════════════════════════════════════════════ */
.left-floating-controls {
    position: fixed;
    left:     18px;
    bottom:   24px;
    z-index:  200;
}

.left-floating-btn {
    width:          50px;
    height:         50px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    background:     rgba(15,16,18,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border:         1px solid rgba(255,255,255,.1);
    border-radius:  14px;
    color:          rgba(255,255,255,.65);
    cursor:         pointer;
    font-size:      16px;
    transition:     all .28s cubic-bezier(.4,0,.2,1);
    box-shadow:
        0 10px 40px rgba(0,0,0,.5),
        0  4px 12px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.1);
    position: relative;
}

.left-floating-btn:hover {
    background:   rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
    color:        #ffffff;
    transform:    translateY(-2px);
}

/* Tooltip */
.left-tooltip {
    position:        absolute;
    left:            calc(100% + 14px);
    bottom:          0;
    width:           310px;
    background:      rgba(10,11,14,.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border:          1px solid rgba(255,255,255,.1);
    border-radius:   16px;
    padding:         16px;
    opacity:         0;
    transform:       translateX(-8px) scale(.97);
    transform-origin: left bottom;
    pointer-events:  none;
    transition:      all .32s cubic-bezier(.34,1.2,.64,1);
    box-shadow:      0 16px 40px rgba(0,0,0,.5);
}

/* Desktop: hover muestra el tooltip */
@media (hover: hover) {
    .left-floating-btn:hover .left-tooltip {
        opacity:        1;
        transform:      translateX(0) scale(1);
        pointer-events: auto;
    }
}

/* Móvil / touch: click-to-toggle (clase añadida por JS) */
.left-floating-btn.tooltip-open .left-tooltip {
    opacity:        1;
    transform:      translateX(0) scale(1);
    pointer-events: auto;
}

.tooltip-content { display: flex; flex-direction: column; gap: 6px; }

.credits-title {
    font-size:      .625rem;
    color:          rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight:    700;
    margin-bottom:  4px;
}

.tooltip-row {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   .8rem;
    color:       rgba(255,255,255,.8);
}

.tooltip-row i {
    width:      18px;
    text-align: center;
    color:      var(--accent);
    font-size:  .875rem;
    flex-shrink: 0;
}

.tooltip-divider {
    height:     1px;
    background: rgba(255,255,255,.08);
    margin:     4px 0;
}

.tooltip-row a {
    transition: all 0.2s ease;
}

.tooltip-row a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px var(--accent-light);
    transform: translateX(2px);
}

/* ══════════════════════════════════════════════════════════════
   BARRA INFERIOR (ui-overlay)
══════════════════════════════════════════════════════════════ */
.ui-overlay {
    position:        fixed;
    bottom:          24px;
    left:            0;
    right:           0;
    margin-inline:   auto;
    width:           max-content;
    display:         flex;
    align-items:     center;
    gap:             14px;
    background:      rgba(10,11,14,.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border:          1px solid rgba(255,255,255,.1);
    border-radius:   60px;
    padding:         10px 22px;
    z-index:         200;
    box-shadow:
        0 10px 40px rgba(0,0,0,.5),
        0  4px 12px rgba(0,0,0,.3),
        inset 0 1px 0 rgba(255,255,255,.1);
    transition:      box-shadow .3s ease, transform .25s ease;
    white-space:     nowrap;
}

.ui-overlay:hover {
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    transform:  translateY(-2px);
}

.nav-btn {
    width:          40px;
    height:         40px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    background:     transparent;
    border:         none;
    color:          rgba(255,255,255,.7);
    cursor:         pointer;
    border-radius:  50%;
    font-size:      15px;
    transition:     all .22s cubic-bezier(.4,0,.2,1);
    position:       relative;
    overflow:       hidden;
}

.nav-btn:hover {
    color:      #ffffff;
    background: rgba(59,130,246,.2);
    border:     1px solid rgba(59,130,246,.35);
    transform:  scale(1.1);
}

.nav-btn:active { transform: scale(.93); }

/* ripple */
.nav-btn::after {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;
    background:    radial-gradient(circle, rgba(59,130,246,.4) 0%, transparent 70%);
    opacity:       0;
    transition:    opacity .45s ease;
}
.nav-btn:hover::after { opacity: 1; }

.ui-divider {
    background: rgba(255,255,255,.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   INDICADOR DE PÁGINA
══════════════════════════════════════════════════════════════ */
.page-change-indicator {
    position:        fixed;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%) scale(.85);
    background:      linear-gradient(135deg, rgba(30,58,138,.9), rgba(59,130,246,.9));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:          1px solid rgba(255,255,255,.2);
    border-radius:   20px;
    padding:         14px 28px;
    z-index:         300;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity .3s ease, transform .3s cubic-bezier(.34,1.2,.64,1);
    box-shadow:      0 12px 32px rgba(30,58,138,.5);
}

.page-change-indicator.show {
    opacity:   1;
    transform: translate(-50%, -50%) scale(1);
}

.indicator-content {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   .9375rem;
    font-weight: 600;
    color:       #ffffff;
    white-space: nowrap;
}

.indicator-content i {
    animation: book-pulse 1.5s ease-in-out infinite;
    color:     var(--accent-light);
}

@keyframes book-pulse {
    0%,100% { transform: scale(1);    opacity: 1;   }
    50%     { transform: scale(1.18); opacity: .75; }
}

/* ══════════════════════════════════════════════════════════════
   NOTIFICACIONES TOAST (Estilo Minimalista)
══════════════════════════════════════════════════════════════ */
#toast-container {
    position:       fixed;
    top:            20px;
    right:          20px;
    z-index:        99999;
    display:        flex;
    flex-direction: column;
    gap:            10px;
    max-width:      420px;
    pointer-events: none;
}

.toast {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     14px 16px;
    border-radius: 10px;
    background:  rgba(9, 9, 11, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border:      1px solid rgba(255, 255, 255, 0.08);
    box-shadow:  
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color:       rgba(255, 255, 255, 0.95);
    pointer-events: auto;
    opacity:     0;
    overflow:    hidden;
    position:    relative;
    transition:  box-shadow 0.2s ease;
}

.toast:hover {
    box-shadow:  
        0 8px 24px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Barra lateral de color minimalista */
.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    transition: width 0.2s ease;
}

.toast-success::before { background: linear-gradient(180deg, #10b981, #059669); }
.toast-error::before   { background: linear-gradient(180deg, #ef4444, #dc2626); }
.toast-warning::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.toast-info::before    { background: linear-gradient(180deg, #3b82f6, #2563eb); }

/* Iconos con diseño minimalista */
.toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 0.95;
}

.toast-success .toast-icon { color: #10b981; }
.toast-error   .toast-icon { color: #ef4444; }
.toast-warning .toast-icon { color: #f59e0b; }
.toast-info    .toast-icon { color: #3b82f6; }

/* Animaciones sutiles */
@keyframes toastIn {
    from { 
        transform: translateX(100%) scale(0.95); 
        opacity: 0; 
    }
    to { 
        transform: translateX(0) scale(1); 
        opacity: 1; 
    }
}

@keyframes toastOut {
    from { 
        transform: translateX(0) scale(1); 
        opacity: 1; 
    }
    to { 
        transform: translateX(100%) scale(0.95); 
        opacity: 0; 
    }
}

.toast-enter { 
    animation: toastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

.toast-exit { 
    animation: toastOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards; 
}

/* Contenido minimalista */
.toast-content { 
    flex: 1; 
    min-width: 0;
}

.toast-title { 
    font-weight: 600; 
    font-size: 0.875rem; 
    margin-bottom: 2px; 
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.01em;
}

.toast-message { 
    font-size: 0.8125rem; 
    opacity: 0.7; 
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

/* Botón de cerrar minimalista */
.toast-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 4px;
    margin: -4px -4px -4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 6px;
    width: 24px;
    height: 24px;
}

.toast-close:hover { 
    background: rgba(255, 255, 255, 0.08); 
    color: rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
}

.toast-close:active {
    transform: scale(0.95);
}

.toast-close i {
    font-size: 12px;
}

/* Variantes de progreso (opcional para toasts con duración) */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.toast-progress-bar {
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    animation: toastProgress linear forwards;
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ══════════════════════════════════════════════════════════════
   MODO SINGLE-PAGE (MÓVIL)
══════════════════════════════════════════════════════════════ */
body.single-page-mode { touch-action: pan-y; }

body.single-page-mode #viewport {
    perspective: none;
    padding:     60px 15px 100px;
    overflow:    hidden;
    cursor:      default;
    display:     flex;
    align-items:     center;
    justify-content: center;
    background:  transparent;
}

body.single-page-mode #book-container {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    transform:       none !important;
    transition:      none;
}

body.single-page-mode .book {
    width:           min(90vw, 440px);
    height:          auto;
    aspect-ratio:    var(--sp-page-ratio, .7071);
    transform-style: flat;
    transform:       translateZ(0) !important;
    transition:      none;
    position:        relative;
    overflow:        hidden;
    border-radius:   10px;
    box-shadow:
        0 24px 70px rgba(0,0,0,.65),
        0  8px 24px rgba(0,0,0,.4);
    flex-shrink: 0;
    margin:      auto;
    background:  #ffffff;
    -webkit-backface-visibility: hidden;
    backface-visibility:         hidden;
}

body.single-page-mode .spine { display: none; }

body.single-page-mode .leaf {
    width:           100%;
    height:          100%;
    right:           auto;
    top:             0;
    left:            0;
    transform-style: flat;
    transform-origin: center;
    transform:       translateX(105%);
    opacity:         0;
    pointer-events:  none;
    transition:
        transform var(--duration-mobile) cubic-bezier(.4,0,.2,1),
        opacity   var(--duration-mobile) ease;
    z-index: 1 !important;
    will-change: transform, opacity;
}

body.single-page-mode .leaf.sp-active {
    transform:      translateX(0) translateZ(0);
    opacity:        1;
    pointer-events: auto;
    z-index:        10 !important;
}

body.single-page-mode .leaf.sp-prev {
    transform: translateX(-105%) translateZ(0);
    opacity:   0;
    z-index:   1 !important;
}

body.single-page-mode .page-back     { display: none; }
body.single-page-mode .page-shadow   { display: none; }
body.single-page-mode .leaf::before  { display: none; }
body.single-page-mode .lateral-zoom-controls { display: none; }

body.horizontal-book #viewport {
    padding: 70px 30px 95px;
    justify-content: center;
}

body.horizontal-book .book {
    max-width: calc(100vw - 90px);
    max-height: calc(100vh - 120px);
    width: min(96vw, 1200px);
    height: auto;
    aspect-ratio: var(--book-ratio, 1.45);
}

body.horizontal-book .leaf {
    width: 100%;
    height: 100%;
}

body.horizontal-book .page-front,
body.horizontal-book .page-back {
    width: 100%;
    height: 100%;
}

body.single-page-mode .page-front {
    width:          100%;
    height:         100%;
    transform:      translateZ(0);
    backface-visibility: visible;
    border:         none;
    box-shadow:     none;
    border-radius:  0;
    background:     #ffffff;
    overflow:       hidden;
}

body.single-page-mode canvas {
    width:      100% !important;
    height:     100% !important;
    max-width:  100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display:    block;
    margin:     0 auto;
    transform:  translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility:         hidden;
}

.sp-swipe-hint {
    position:  absolute;
    bottom:    12px;
    left:      50%;
    transform: translateX(-50%);
    display:   flex;
    align-items: center;
    gap:       6px;
    font-size: .6875rem;
    color:     rgba(255,255,255,.4);
    pointer-events: none;
    animation: sp-hint-fade 3.2s ease forwards;
    white-space: nowrap;
}

@keyframes sp-hint-fade {
    0%   { opacity: 0; transform: translateX(-50%) translateY(5px); }
    20%  { opacity: 1; transform: translateX(-50%) translateY(0);   }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════
   PANTALLA COMPLETA
══════════════════════════════════════════════════════════════ */
body.fullscreen-mode #viewport { padding: 0; }

body.fullscreen-mode .book {
    width:  calc(min(95vw, 1200px) * var(--zoom-level));
    height: calc(min(90vh, 800px)  * var(--zoom-level));
}

/* ══════════════════════════════════════════════════════════════
   ESTADO CARGANDO — deshabilita interacciones
══════════════════════════════════════════════════════════════ */
body.loading-content .ui-overlay button,
body.loading-content .lateral-zoom-controls button,
body.loading-content .floating-controls button {
    opacity:        .35;
    cursor:         not-allowed;
    pointer-events: none;
}
body.loading-content .book { pointer-events: none; }

/* ══════════════════════════════════════════════════════════════
   PERFORMANCE — aceleración GPU selectiva
   NOTA: NO añadir transform:translateZ(0) a .page-back ni a .leaf
   ya que sobrescribiría los transforms 3D críticos del libro.
══════════════════════════════════════════════════════════════ */

/* Solo el canvas necesita GPU hinting explícito */
.leaf canvas {
    transform: translateZ(0);
}

/* will-change solo durante animación activa (gestionado por JS) */
.leaf.is-animating {
    will-change: transform;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-width: 850px) {
    .ui-overlay {
        width:         92%;
        bottom:        25px;
        padding:       8px 12px;
        gap:           5px;
        border-radius: 20px;
        justify-content: center;
    }
    .ui-overlay button         { padding: 0 2px; flex-shrink: 0; }
    #page-status               { font-size: .7rem;    }
    #page-label                { font-size: .4375rem; }
    .lateral-zoom-controls     { display: none; }
    .floating-controls {
        top:            15px;
        right:          15px;
        bottom:         auto;
        flex-direction: row !important;
        gap:            8px !important;
    }
    .left-floating-controls    { top: 15px; left: 15px; bottom: auto; }
    .floating-btn              { width: 44px; height: 44px; }
    .left-tooltip              { width: 280px !important; max-width: 85vw !important; }
}

@media (max-width: 640px) {
    #toast-container {
        top:      auto;
        bottom:   20px;
        right:    16px;
        left:     16px;
        max-width: none;
    }
    body::before { background: rgba(15,16,18,.85); }
    body.single-page-mode #viewport { padding: 50px 10px 110px; }
    body.single-page-mode .book     { width: min(95vw, 420px); }
    .loading-card  { padding: 36px 24px; }
    .loading-title { font-size: 1.625rem; }
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBARS
══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.1); border-radius: 10px; }
::-webkit-scrollbar-thumb {
    background:    linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
}

* { scrollbar-width: thin; scrollbar-color: var(--accent) rgba(0,0,0,.1); }

/* ══════════════════════════════════════════════════════════════
   EFECTOS RIPPLE EN BOTONES
══════════════════════════════════════════════════════════════ */
.nav-btn::before,
.floating-btn::before,
.left-floating-btn::before,
.lateral-zoom-controls button::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;
    background:    radial-gradient(circle, rgba(255,255,255,.3) 0%, transparent 70%);
    opacity:       0;
    transition:    opacity 0.4s ease;
    pointer-events: none;
}

.nav-btn:active::before,
.floating-btn:active::before,
.left-floating-btn:active::before,
.lateral-zoom-controls button:active::before {
    opacity:    1;
    transition: opacity 0.1s ease;
}

/* ══════════════════════════════════════════════════════════════
   FOCUS STATES (accesibilidad)
══════════════════════════════════════════════════════════════ */
button:focus-visible,
.nav-btn:focus-visible,
.floating-btn:focus-visible,
.left-floating-btn:focus-visible,
.lateral-zoom-controls button:focus-visible {
    outline:        2px solid var(--accent);
    outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════
   ANIMACIONES DE ENTRADA
══════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: none;        }
}

#reader-view {
    animation: fadeInScale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.ui-overlay {
    animation: fadeInUp 0.5s ease 0.2s both;
}

.lateral-zoom-controls {
    animation: fadeInScale 0.5s ease 0.3s both;
}

.floating-controls,
.left-floating-controls {
    animation: fadeInScale 0.5s ease 0.4s both;
}

/* ══════════════════════════════════════════════════════════════
   UTILITY CLASSES
══════════════════════════════════════════════════════════════ */
.hidden    { display:  none !important; }
.fade-out  { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.fade-in   { opacity: 1; pointer-events: all;  transition: opacity 0.3s ease; }

/* ══════════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════════ */
@media print {
    body::before,
    .ui-overlay,
    .lateral-zoom-controls,
    .floating-controls,
    .left-floating-controls,
    #loading-overlay,
    #toast-container,
    .page-change-indicator { display: none !important; }

    #viewport { padding: 0; overflow: visible; }

    .book {
        width:     100%;
        height:    auto;
        transform: none !important;
        box-shadow: none;
        filter:    none;
    }
}