.vl-pagina { max-width: 1280px; margin: 0 auto; padding: 1.25rem 15px 2.5rem; }

.vl-volver {
    display: inline-flex; align-items: center; gap: .25rem; margin-bottom: .9rem;
    color: #0B2A6F !important; font-weight: 600; text-decoration: none !important;
}
.vl-volver svg { width: 1.3em; height: 1.3em; fill: currentColor; }
.vl-volver:hover, .vl-volver:focus { text-decoration: underline !important; }

.vl {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: radial-gradient(ellipse at center, #3a4f86 0%, #1b2d5e 55%, #0f1d42 100%);
    border-radius: 14px; box-shadow: 0 12px 34px rgba(11, 42, 111, .28);
}
.vl:fullscreen { border-radius: 0; width: 100%; height: 100%; }
.vl:-webkit-full-screen { border-radius: 0; width: 100%; height: 100%; }
.vl.vl--fija { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; border-radius: 0; }

.vl-barra {
    display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem;
    background: #0B2A6F; color: #fff; border-bottom: 4px solid #FFC20E;
}
.vl-logo { flex: 0 0 auto; display: flex; align-items: center; background: #fff; border-radius: 8px; padding: .3rem .55rem; }
.vl-logo img { display: block; height: 44px; width: auto; }
.vl-titulos { flex: 1 1 auto; min-width: 0; }
.vl-titulos small {
    display: block; color: #FFC20E; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.vl-titulos h1 {
    margin: .1rem 0 0; color: #fff; font-size: 1.25rem; font-weight: 800; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vl-herramientas { flex: 0 0 auto; display: flex; gap: .4rem; }

.vl-boton {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
    background: rgba(255, 255, 255, .12); color: #fff !important; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
    cursor: pointer; transition: background .15s, color .15s, transform .15s;
}
.vl-boton svg { width: 22px; height: 22px; fill: currentColor; }
.vl-boton:hover, .vl-boton:focus { background: #FFC20E; color: #0B2A6F !important; border-color: #FFC20E; outline: none; }
.vl-boton:disabled { opacity: .4; cursor: default; background: rgba(255, 255, 255, .12); color: #fff !important; border-color: rgba(255, 255, 255, .25); }
.vl-icono-contraer { display: none; }
.vl.vl--pantalla .vl-icono-expandir { display: none; }
.vl.vl--pantalla .vl-icono-contraer { display: block; }

.vl-cuerpo { position: relative; flex: 1 1 auto; display: flex; align-items: center; padding: 1.5rem 4.25rem; min-height: 420px; }
.vl-escenario { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.vl-libro { margin: 0 auto; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .45)); transition: transform .45s ease; }

.vl-flecha {
    position: absolute; top: 50%; z-index: 5; display: flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; margin-top: -25px; padding: 0; border: 0; border-radius: 50%;
    background: #FFC20E; color: #0B2A6F; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); cursor: pointer;
    transition: transform .15s, opacity .15s;
}
.vl-flecha svg { width: 30px; height: 30px; fill: currentColor; }
.vl-flecha:hover, .vl-flecha:focus { transform: scale(1.08); outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .6), 0 4px 12px rgba(0, 0, 0, .35); }
.vl-flecha:disabled { opacity: .3; cursor: default; transform: none; }
.vl-flecha--anterior { left: .9rem; }
.vl-flecha--siguiente { right: .9rem; }

.vl-cargando { display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center; }
.vl-cargando[hidden] { display: none; }
.vl-cargando p { margin: 1rem 0 0; font-weight: 600; }
.vl-cargando a { color: #FFC20E; font-weight: 700; }
.vl-spinner {
    width: 54px; height: 54px; border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, .2); border-top-color: #FFC20E; animation: vl-girar 1s linear infinite;
}
@keyframes vl-girar { to { transform: rotate(360deg); } }

.vl-pie {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .75rem 1.5rem 1rem;
    background: rgba(5, 15, 40, .35); color: #fff;
}
.vl-deslizador { flex: 1 1 260px; accent-color: #FFC20E; cursor: pointer; }
.vl-deslizador:disabled { cursor: default; }
.vl-indicador { flex: 0 0 auto; min-width: 9.5rem; font-weight: 700; text-align: center; }
.vl-ayuda { flex: 1 1 100%; font-size: .8rem; color: rgba(255, 255, 255, .7); text-align: center; }

.vl-panel {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column;
    background: rgba(8, 20, 52, .96);
}
.vl-panel[hidden] { display: none; }
.vl-panel__cabecera {
    display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; color: #fff;
    background: #0B2A6F; border-bottom: 4px solid #FFC20E;
}
.vl-panel__cabecera strong { flex: 1 1 auto; font-size: 1.05rem; text-align: center; }
.vl-panel__cabecera .vl-boton[data-vl-cerrar] { margin-left: auto; }
.vl-separador { width: 1px; height: 28px; margin: 0 .25rem; background: rgba(255, 255, 255, .25); }

.vl-miniaturas {
    flex: 1 1 auto; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1.1rem; padding: 1.25rem;
}
.vl-miniatura {
    display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 0; background: none; border: 0;
    color: #fff; font-weight: 600; font-size: .85rem; cursor: pointer;
}
.vl-miniatura img { display: block; width: 100%; height: auto; background: #fff; border: 3px solid transparent; border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); transition: transform .15s, border-color .15s; }
.vl-miniatura:hover img, .vl-miniatura:focus img { transform: translateY(-3px); border-color: #FFC20E; }
.vl-miniatura:focus { outline: none; }
.vl-miniatura.vl-actual img { border-color: #FFC20E; }
.vl-miniatura.vl-actual span { color: #FFC20E; }

.vl-zoom { flex: 1 1 auto; overflow: auto; padding: 1.25rem; text-align: center; }
.vl-zoom img { display: inline-block; max-width: none; height: auto; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }

@media (max-width: 767.98px) {
    .vl-barra { flex-wrap: wrap; gap: .6rem; }
    .vl-logo img { height: 34px; }
    .vl-titulos h1 { font-size: 1.05rem; white-space: normal; }
    .vl-herramientas { width: 100%; justify-content: center; }
    .vl-cuerpo { padding: 1rem .5rem 4.5rem; min-height: 320px; }
    .vl-escenario { min-height: 300px; }
    .vl-flecha { top: auto; bottom: .9rem; margin-top: 0; width: 44px; height: 44px; }
    .vl-flecha--anterior { left: calc(50% - 56px); }
    .vl-flecha--siguiente { right: calc(50% - 56px); }
    .vl-ayuda { display: none; }
}