/* ── Barra superior negra de la galería ── */
#galeria-topbar {
    position: sticky;
    top: 0;
    z-index: 120;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
}
#galeria-cerrar {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5em;
    line-height: 1;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
#galeria-cerrar:hover { background: rgba(255,255,255,0.12); }
#galeria-login-btn, #detalle-login-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
#galeria-login-btn:hover, #detalle-login-btn:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

/* ── Grupo de acciones a la derecha de la barra (idioma + login) ── */
.topbar-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Desplegable de idioma (ES / EN) ── */
.lang-switch {
    position: relative;
    font-family: 'Geist Mono', 'Courier New', monospace;
}
.lang-current {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 12px;
    background: none;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 0.12em;
    transition: all 0.2s;
}
.lang-current:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.lang-current .lang-globe { font-size: 1em; line-height: 1; }
.lang-current .lang-code  { font-size: 0.85em; }
.lang-current .lang-caret {
    font-size: 0.7em;
    opacity: 0.7;
    transition: transform 0.2s;
}
.lang-switch.open .lang-caret { transform: rotate(180deg); }

.lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 130px;
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.6);
    overflow: hidden;
    display: none;
    z-index: 300;
}
.lang-switch.open .lang-menu { display: block; }
.lang-opt {
    display: block;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: none;
    color: #cfcfcf;
    text-align: left;
    cursor: pointer;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.92em;
    letter-spacing: 0.03em;
    transition: background 0.15s, color 0.15s;
}
.lang-opt:hover { background: rgba(255,255,255,0.08); color: #fff; }
.lang-opt.on {
    color: #c9a84c;
    font-weight: 800;
    background: rgba(201,168,76,0.08);
}

/* ── Botón "AUDIO LECTURA" (transcripción por voz) ── */
/* En la barra superior, justo a la izquierda del selector de idioma.
   Coherente con login/idioma (transparente + borde claro) pero etiquetado
   y más ancho, con el icono de altavoz en dorado (acento cyberpunk). */
.tts-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 16px;
    background: none;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: 'Geist Mono', 'Courier New', monospace;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.2s;
}
.tts-btn svg { width: 18px; height: 18px; display: block; color: #c9a84c; }
.tts-btn .tts-label { line-height: 1; }
.tts-btn:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
/* Mientras lee: estado activo dorado + pulso en las ondas */
.tts-btn.tts-on {
    background: #c9a84c;
    border-color: #c9a84c;
    color: #111;
}
.tts-btn.tts-on svg { color: #111; }
.tts-btn.tts-on .tts-wave-1 { animation: tts-pulse 1s ease-in-out infinite; }
.tts-btn.tts-on .tts-wave-2 { animation: tts-pulse 1s ease-in-out infinite 0.2s; }
@keyframes tts-pulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}
/* En pantallas estrechas, deja solo el icono para no desbordar la barra */
@media (max-width: 560px) {
    .tts-btn .tts-label { display: none; }
    .tts-btn { padding: 0 11px; }
}

/* ── Botón flotante para silenciar la música de fondo ── */
#bg-mute-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 500;                 /* por encima de la galería (120) y el detalle (210) */
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: #fff;
    background: rgba(10, 10, 10, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
#bg-mute-btn:hover { background: rgba(0, 0, 0, 0.85); border-color: #fff; transform: scale(1.06); }
#bg-mute-btn svg { display: block; }
/* Alterna icono según el estado: sonando muestra ic-on, silenciado muestra ic-off */
#bg-mute-btn .ic-off { display: none; }
#bg-mute-btn.muted .ic-on  { display: none; }
#bg-mute-btn.muted .ic-off { display: block; }
#bg-mute-btn.muted { color: #e06363; border-color: rgba(224, 99, 99, 0.55); }

/* ── Botón "salir al pasillo" (blanco sobre negro) ── */
#galeria-cerrar-2 {
    background: none;
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    padding: 11px 24px;
    font-size: 1em;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.3em;
    font-family: 'Geist Mono', 'Courier New', monospace;
    text-transform: uppercase;
    border-radius: 3px;
    transition: all 0.2s;
}
#galeria-cerrar-2:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }

/* ── Detalle de obra: tres bandas (negra / blanca / negra) ── */
#detalle-topbar {
    position: sticky;
    top: 0;
    z-index: 210;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
}
#obra-volver {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 10px 20px;
    font-size: 0.95em;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.3em;
    font-family: 'Geist Mono', 'Courier New', monospace;
    text-transform: uppercase;
    border-radius: 3px;
    transition: all 0.2s;
}
#obra-volver:hover { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.45) !important; color: #fff !important; }
#detalle-resenas-band { background: #000; }

#galeria-overlay::-webkit-scrollbar { width: 4px; }
#galeria-overlay::-webkit-scrollbar-track { background: #f8f8f8; }
#galeria-overlay::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); }
#obra-detalle::-webkit-scrollbar { width: 4px; }
#obra-detalle::-webkit-scrollbar-track { background: #e8e8e8; }
#obra-detalle::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); }

/* ── El overlay apila en columna (topbar / contenido / carrusel) para poder
   hacer que el carrusel crezca y llene el alto en vertical ── */
#galeria-overlay { flex-direction: column; }

/* ── Sección del carrusel (fondo negro) ── */
#galeria-carrusel { background: #000; flex-direction: column; }

/* Carrusel de miniaturas: ~5 visibles, centrado, se esconden simétricamente */
#carrusel-track {
    display: flex;
    gap: 1.2vw;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 30px 2vw;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
}
#carrusel-track::-webkit-scrollbar { display: none; }
#carrusel-track.dragging { cursor: grabbing; }
/* Mientras se arrastra, las miniaturas no reaccionan al hover (evita parpadeos) */
#carrusel-track.dragging .carr-thumb,
#carrusel-track.dragging .carr-thumb:hover { transform: none; transition: none; }
.carr-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 17vw;
    aspect-ratio: 1/1;
    border-radius: 3px;
    overflow: hidden;
    /* Skeleton de carga: brillo animado en gris mientras la miniatura carga
       (en vez de un negro seco). La imagen aparece con fundido encima al cargar. */
    background: #131318;
    background-image: linear-gradient(100deg, #131318 28%, #23232e 50%, #131318 72%);
    background-size: 220% 100%;
    animation: carrShimmer 1.3s ease-in-out infinite;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.carr-thumb:hover { transform: translateY(-5px) scale(1.04); box-shadow: 0 16px 38px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.22); }
.carr-thumb img, .carr-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
@keyframes carrShimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
.carr-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 1.6em; text-shadow: 0 2px 8px rgba(0,0,0,0.7); pointer-events: none; }

/* ── Botón de acceso visitante (hover dorado, como el de la llave admin) ── */
#vis-btn:hover {
    border-color: rgba(201,168,76,0.5) !important;
    box-shadow: 0 0 20px rgba(201,168,76,0.2), inset 0 0 12px #1a1511 !important;
}

/* ── Overlay y reseñas del visitante ── */
#vis-overlay{font-family:'Segoe UI',system-ui,sans-serif}
.vis-card{background:#0a0a0a;border:1px solid #222;border-radius:8px;width:100%;max-width:360px;padding:28px;position:relative}
.vis-tabs{display:flex;gap:4px;margin-bottom:22px}
.vis-tab{flex:1;padding:8px;background:#111;border:1px solid #222;border-radius:4px;color:#555;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-align:center;transition:all .15s}
.vis-tab.active{background:#c9a84c18;border-color:#c9a84c55;color:#c9a84c}
.vis-fg{margin-bottom:16px}
.vis-fg label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#555;margin-bottom:6px}
.vis-fg input{width:100%;background:#050505;border:1px solid #1e1e1e;border-radius:5px;color:#d8d8d8;font-size:14px;padding:9px 12px;outline:none;transition:border-color .2s;font-family:inherit;box-sizing:border-box}
.vis-fg input:focus{border-color:#c9a84c}
.vis-check{display:flex;align-items:center;gap:8px;font-size:12px;color:#555;cursor:pointer;margin-bottom:16px}
.vis-check input{width:14px;height:14px;accent-color:#c9a84c}
.vis-submit{width:100%;padding:11px;background:#c9a84c;color:#000;font-size:14px;font-weight:600;border:none;border-radius:5px;cursor:pointer;transition:background .2s;font-family:inherit}
.vis-submit:hover{background:#d9ba62}
.vis-err{background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.25);color:#e74c3c;border-radius:5px;padding:9px 12px;font-size:13px;margin-bottom:16px}
.vis-ok{background:rgba(39,174,96,.1);border:1px solid rgba(39,174,96,.25);color:#2ecc71;border-radius:5px;padding:9px 12px;font-size:13px;margin-bottom:16px}
.vis-link{text-align:center;margin-top:14px;font-size:12px;color:#555}
.vis-link a{color:#555;text-decoration:underline;cursor:pointer}
.vis-close{position:absolute;top:14px;right:16px;background:none;border:none;color:#555;font-size:1.3em;cursor:pointer}
.vis-close:hover{color:#d8d8d8}
.star-row{display:flex;gap:6px;margin:8px 0 16px}
.star-btn{font-size:1.9em;cursor:pointer;color:rgba(0,0,0,.18);transition:color .15s;line-height:1}
.star-btn.on{color:#b8860b}
.resena-item{padding:15px 0;border-bottom:1px solid rgba(0,0,0,.1)}
.resena-item:last-child{border-bottom:none}
.resena-stars{color:#b8860b;font-size:1em;letter-spacing:2px;font-weight:700}
.resena-meta{font-size:.8em;color:#444;letter-spacing:.05em;margin:5px 0 7px;font-family:'Geist Mono', 'Courier New',monospace;font-weight:500;display:flex;align-items:center;gap:8px}
.resena-texto{font-size:.97em;color:#111;line-height:1.8;font-weight:500}
.btn-resena-cyber{background:#111;border:1px solid #111;color:#fff;border-radius:3px;padding:10px 32px;font-size:.78em;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;font-family:'Geist Mono', 'Courier New',monospace;font-weight:800;transition:all .25s;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.btn-resena-cyber:hover{background:#000;border-color:#000;color:#fff;box-shadow:0 0 22px rgba(0,0,0,.5),0 0 8px rgba(255,255,255,.12);transform:translateY(-1px)}
.del-res-btn{background:none;border:none;color:#c0392b;font-size:1.3em;cursor:pointer;line-height:1;transition:all .2s;padding:0 2px;opacity:.9}
.del-res-btn:hover{opacity:1;transform:scale(1.25);color:#e74c3c!important;filter:drop-shadow(0 0 5px rgba(192,57,43,.7))}
.saved-chip{display:flex;align-items:center;gap:12px;background:#111;border:1px solid #c9a84c55;border-radius:6px;padding:12px 14px;cursor:pointer;transition:all .2s;margin-bottom:10px}
.saved-chip:hover{border-color:#c9a84c;background:#161616;box-shadow:0 0 16px rgba(201,168,76,.15)}
.saved-avatar{width:36px;height:36px;border-radius:50%;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.3);display:flex;align-items:center;justify-content:center;color:#c9a84c;font-weight:700;flex-shrink:0;font-family:'Segoe UI',sans-serif}
.saved-info{flex:1;min-width:0;text-align:left}
.saved-nombre{font-size:14px;color:#d8d8d8;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.saved-sub{font-size:11px;color:#8c7e6d;letter-spacing:.05em}
.saved-quitar{display:block;text-align:center;font-size:11px;color:#666;cursor:pointer;margin:6px 0 18px;text-decoration:underline}
.saved-quitar:hover{color:#c0392b}
.vis-sep{display:flex;align-items:center;gap:10px;color:#444;font-size:10px;letter-spacing:.2em;margin:4px 0 16px;text-transform:uppercase}
.vis-sep::before,.vis-sep::after{content:'';flex:1;height:1px;background:#222}

/* ════════════ RESPONSIVE GALERÍA / DETALLE ════════════ */

/* Nada de scroll horizontal en los overlays a cualquier tamaño */
#galeria-overlay, #obra-detalle { overflow-x: hidden; }

/* Tablet: miniaturas mayores (≈3 visibles) */
@media (max-width: 1024px) {
    .carr-thumb { width: 30vw; }
}

/* Detalle: apilar obra y datos en una columna en pantallas estrechas */
@media (max-width: 760px) {
    .detalle-cols { flex-direction: column; gap: 26px !important; }
    .detalle-media-col { width: 100%; flex: none !important; }
    #detalle-info { min-width: 0 !important; }
}

/* Tablet / móvil ancho: barras superiores algo más ajustadas */
@media (max-width: 768px) {
    #galeria-topbar, #detalle-topbar { padding: 10px 14px; }
    .topbar-acciones { gap: 8px; }
}

/* Móvil: 2 miniaturas, barras compactas y textos/cajas más pequeños */
@media (max-width: 600px) {
    .carr-thumb { width: 46vw; }
    #carrusel-track { gap: 3vw; padding: 22px 4vw; }

    /* Barras superiores: que quepan ✕/VOLVER + audiolectura + idioma + login */
    #galeria-topbar, #detalle-topbar { padding: 9px 10px; }
    .topbar-acciones { gap: 6px; }
    .lang-current { padding: 0 9px; gap: 4px; }
    .tts-btn { padding: 0 10px; }
    #obra-volver { padding: 9px 12px; font-size: 0.8em; letter-spacing: 0.14em; }
    #galeria-cerrar { width: 38px; height: 38px; }
    #galeria-login-btn, #detalle-login-btn, .tts-btn, .lang-current { height: 38px; }

    /* Banda blanca de la galería: menos padding lateral */
    #galeria-titulo { font-size: 1.05em !important; letter-spacing: 0.35em !important; }

    /* Botón "salir al pasillo": que no desborde en pantallas estrechas */
    #galeria-cerrar-2 { padding: 10px 16px; font-size: 0.82em; letter-spacing: 0.16em; white-space: normal; }

    /* Botón visitante (cabecera home) */
    #vis-btn { top: 14px; right: 14px; min-width: 0 !important; padding: 10px 14px !important; }
    #vis-btn .vs { font-size: 12px !important; }
    #vis-btn .vl { font-size: 9px !important; }

    .vis-card { max-width: none; margin: 0 14px; padding: 24px 20px; }
    #detalle-resenas { padding: 20px 16px !important; }

    /* Botón flotante de música un poco más pequeño */
    #bg-mute-btn { width: 42px; height: 42px; right: 14px; bottom: 14px; }
}

/* Móviles muy estrechos: apurar aún más para evitar cortes */
@media (max-width: 380px) {
    #galeria-topbar, #detalle-topbar { padding: 8px 8px; }
    .topbar-acciones { gap: 5px; }
    #obra-volver { padding: 8px 10px; letter-spacing: 0.08em; }
    .lang-current { padding: 0 7px; }
    .tts-btn { padding: 0 9px; }
}

/* ── Responsive VERTICAL (portrait): móvil/tablet ──
   El contenido quedaba muy arriba con un hueco grande abajo. El carrusel CRECE
   para ocupar el alto disponible y CENTRA sus miniaturas (ahora más grandes),
   así no queda espacio muerto. Se ven ~2-3 imágenes y se siguen desplazando.
   Solo en vertical: en horizontal y escritorio no cambia nada.
   Va al final para ganar a las reglas de ancho anteriores. */
@media (orientation: portrait) and (max-width: 1024px) {
    #galeria-carrusel { flex: 1 1 auto; justify-content: center; }
    .carr-thumb { width: min(54vw, 44vh); }
    #carrusel-track { gap: 3vw; padding: 18px 4vw; }
}