/* ==========================================================================
   ESTILOS PRINCIPALES - RÚPULO EDICIONES
   ==========================================================================

   DESCRIPCIÓN:
   Este archivo contiene todos los estilos para la aplicación principal del
   catálogo (accesible tras el login). Define la apariencia de la barra de
  navegación, las vistas (tarjetas), el modal de detalles y el diseño responsivo.

  Nota (2026): los estilos del catálogo se separaron para mantener orden:
  - styles/catalog-controls.css (buscador/filtros/status/estado vacío)
  - styles/catalog-table.css (vista lista / tabla)

   ESTRUCTURA DEL ARCHIVO:
   1.  Variables Globales y Reseteo Básico
   2.  Utilidades (ej. para accesibilidad)
   3.  Tipografía y Enlaces
   4.  Barra de Navegación (Navbar)
   5.  Layout Principal y Secciones SPA
  6.  Vista de Cuadrícula (Tarjetas de Partitura)
  9.  Modal de Detalles de Partitura
  10. Notificaciones (Toasts)
  11. Diseño Responsivo (Media Queries)
*/

/* ==========================================================================
   1. VARIABLES Y CONFIGURACIÓN GLOBAL
   ========================================================================== */
:root {
  /* ========================================================================
    COLORES
    ------------------------------------------------------------------------
    Importante: TODOS los colores viven en `styles/theme.css`.
    Este archivo mantiene tokens de layout, sombras, transiciones y fuentes.
     ======================================================================== */

  /* Sombras: Muy difusas, tipo "Sombra de nubes" */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
  --shadow-glow: none;
  /* Eliminamos los brillos de neón */

  /* Layout Constants */
  --header-height: 60px;
  /* Altura sólida y estándar */
  --toolbar-gap: 0px;
  /* Eliminamos gap para anclaje sólido */
  --toolbar-height-desktop: 120px;
  /* Valor base, JS lo recalcula */

  /* Cálculo de anclaje robusto */
  --table-header-top: calc(var(--header-height) + var(--toolbar-height-desktop));
  --table-header-offset: var(--table-header-top);

  /* Tiempos */
  --transicion-rapida: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transicion-media: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* Movimientos más fluidos */

  /* Tipografías: modernas / futuras */
  --font-ui: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
}

html {
  box-sizing: border-box;
  font-size: 14px;
  /* SCALE DOWN */
  /* Smoother scrolling */
  scroll-behavior: smooth;
  /* Evita “saltos” horizontales cuando aparece/desaparece el scrollbar vertical
     (típico al alternar vistas con distinta altura). */
  scrollbar-gutter: stable;
  /* Evita que el documento se desplace en X al enfocar/clickear
    (típico cuando existe un overflow horizontal mínimo de 1–2px). */
  overflow-x: clip;
  /* Forzamos scrollbar vertical estable también en el root. */
  overflow-y: scroll;
  overscroll-behavior-y: none;
  /*
    AJUSTE DE SCROLL:
    Solo necesitamos compensar el Navbar fijo (60px).
    No compensamos la toolbar aquí porque al navegar a una sección (#partituras),
    queremos ver la toolbar, no que quede oculta arriba.
  */
  scroll-padding-top: var(--header-height);
  -webkit-font-smoothing: antialiased;
  /* Texto nítido en Mac */
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar: Velvet Touch (Fina y elegante) */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-superficie-3) var(--color-fondo);
}

@supports not (scrollbar-gutter: stable) {

  /* Fallback: reserva espacio para el scrollbar evitando el reflow.
     Nota: puede mostrar scrollbar “siempre” en algunos entornos. */
  html {
    overflow-y: scroll;
  }
}

body {
  /* Asegurar consistencia en el body */
  scrollbar-width: thin;
  scrollbar-color: var(--color-superficie-3) var(--color-fondo);
}

::-webkit-scrollbar {
  width: 8px;
  /* Más fina */
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-fondo);
  /* Track invisible */
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-superficie-2);
  /* Sutil por defecto */
  border-radius: 99px;
  /* Píldora completa */
  border: 2px solid var(--color-fondo);
  /* Padding visual */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-marca);
  /* Toque de color al interactuar */
}

/* Botón flotante: subir al tope */
.scroll-top-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--color-borde);
  background: var(--color-superficie-2);
  color: var(--color-texto);
  box-shadow: var(--shadow-elev);
  cursor: pointer;

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity var(--transicion-rapida), transform var(--transicion-rapida), border-color var(--transicion-rapida), background var(--transicion-rapida);
}

.scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top-btn:hover {
  background: rgba(var(--color-marca-rgb), 0.14);
  border-color: rgba(var(--color-marca-rgb), 0.40);
}

.scroll-top-btn:focus-visible {
  outline: 2px solid rgba(var(--color-marca-rgb), 0.55);
  outline-offset: 2px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

body {
  font-family: var(--font-ui);
  background: var(--color-fondo);
  color: var(--color-texto);
  margin: 0;
  min-height: 100vh;
  font-weight: 400;
  line-height: 1.6;
  /* Mayor legibilidad */
  overflow-x: clip;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* ==========================================================================
   INTERACCIÓN INTELIGENTE (MOUSE vs TECLADO)
   ========================================================================== */
/* Cuando el usuario usa el teclado (.using-keyboard en body), DESACTIVAMOS
   completamente los efectos de hover accidental.
   Esto soluciona el problema de que al scrollear con flechas, el puntero del mouse
   (que está quieto) active items aleatorios al pasar por debajo. */

body.using-keyboard .score-card:hover:not(:focus-visible) {
  transform: none;
  box-shadow: none;
  background: var(--color-superficie);
  /* Reset background */
  border-color: var(--color-borde);
  /* Reset border */
  z-index: 0;
}

body.using-keyboard .score-card:hover:not(:focus-visible) .card-image img {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  filter: brightness(0.95);
}

/* ==========================================================================
   2. UTILIDADES
   ========================================================================== */

/* Clase para ocultar visualmente un elemento pero mantenerlo accesible para lectores de pantalla. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Oculta un elemento de forma controlada (usado en JS para mostrar/ocultar). */
.hidden {
  display: none !important;
}

/* ==========================================================================
   3. TIPOGRAFÍA Y ENLACES
   ========================================================================== */
h1,
h2,
h3 {
  color: var(--color-texto);
  font-weight: 400;
  margin-top: 0;
}

a {
  color: var(--color-enlace);
  text-decoration: none;
  transition: color var(--transicion-rapida);
}

a:hover {
  color: var(--color-enlace-hover);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* Ajuste para el anclaje de secciones (Legacy fallback, preferir scroll-padding-top en html) */
[id] {
  scroll-margin-top: var(--header-height);
}

/* ==========================================================================
   4. BARRA DE NAVEGACIÓN (NAVBAR)
   ========================================================================== */
/* Navbar sólido y profesional (Sin transparencias, sin rendijas) */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 24px;
  /* Padding lateral estándar */
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Fondo sólido, sin gradientes */
  background: var(--color-superficie);
  backdrop-filter: none;
  /* Sin blur, todo sólido */
  -webkit-backdrop-filter: none;

  /* Separación sutil pero firme */
  border-bottom: 1px solid var(--color-borde);
  z-index: 1000;
  transition: transform 0.3s ease;
  /* Solo transform si se ocultara */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 10px 28px rgba(0, 0, 0, 0.35);
  /* Un poco más de profundidad */
}

.navbar .brand {
  font-family: var(--font-ui);
  color: var(--color-texto);
  font-size: 1.1em;
  font-weight: 500;
  letter-spacing: 0.05em;
  /* Elegancia sutil */
  text-decoration: none;
  flex: 0 0 auto;
  position: relative;
  text-transform: uppercase;
}

.navbar .brand:focus-visible {
  outline: none;
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(var(--color-marca-rgb), 0.22);
}

.navbar .brand::after {
  /* Punto minimalista */
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--color-marca);
  border-radius: 50%;
  margin-left: 8px;
  margin-bottom: 3px;
  box-shadow: 0 0 0 3px rgba(var(--color-marca-rgb), 0.12);
}

/* Contenedor para centrar los enlaces de navegación. */
.nav-links-container {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 8px;
  /* Menos gap, estilo botón flotante */
  margin: 0;
  padding: 0;
  align-items: center;
  background: rgba(var(--color-marca-rgb), 0.06);
  /* Cápsula contenedora sutil */
  padding: 4px;
  border-radius: 99px;
  border: 1px solid rgba(var(--color-marca-rgb), 0.16);
}

.navbar a {
  color: var(--color-texto-suave);
  padding: 6px 16px;
  border-radius: 99px;
  /* Pill shape */
  /* Importante: Definimos un borde transparente por defecto para evitar "saltos" (layout shift)
     cuando se activa el borde en el estado activo. */
  border: 1px solid transparent;

  transition: all 0.25s cubic-bezier(0.2, 0.6, 0.2, 1);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85em;
  letter-spacing: 0.01em;
}

.navbar a:hover {
  color: var(--color-texto);
  background: rgba(var(--color-marca-rgb), 0.10);
  /* Feedback sutil al hover */
  text-decoration: none;
  /* Asegura que no se subraye */
}

.navbar a:focus-visible {
  outline: none;
  color: var(--color-texto);
  background: var(--color-superficie-2);
  border-color: rgba(var(--color-marca-rgb), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--color-marca-rgb), 0.18);
  text-decoration: none;
}

.navbar a.active {
  background: rgba(var(--color-marca-rgb), 0.18);
  color: var(--color-texto);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  border-color: rgba(var(--color-marca-rgb), 0.55);
}


/* Bloque de información del usuario (email y botón de logout). */
.navbar .user-block {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9em;
}

.session-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-borde);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-texto);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9em;
  line-height: 1;
}

.session-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(var(--color-marca-rgb), 0.28);
}

.session-pill:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--color-marca-rgb), 0.18);
}

.session-pill:focus-visible {
  outline: none;
  border-color: rgba(var(--color-marca-rgb), 0.65);
  box-shadow: 0 0 0 4px rgba(var(--color-marca-rgb), 0.22);
}

.session-pill[data-state="user"] {
  border-color: rgba(46, 204, 113, 0.35);
}

.session-pill[data-state="guest"] {
  border-color: rgba(var(--color-marca-rgb), 0.35);
}

.session-pill[data-state="none"] {
  border-color: rgba(251, 113, 133, 0.28);
}

.navbar .user-block button {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  cursor: pointer;
  transition: all var(--transicion-rapida);
}

.navbar .user-block button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--color-marca-rgb), 0.24);
}

.navbar .user-block button:focus-visible {
  outline: none;
  border-color: rgba(var(--color-marca-rgb), 0.6);
  box-shadow: 0 0 0 4px rgba(var(--color-marca-rgb), 0.18);
}

/* Acciones principales del header */
#login-btn {
  background: var(--color-marca);
  border-color: var(--color-marca);
  color: var(--color-texto);
}

#login-btn:hover {
  filter: brightness(1.05);
}

#logout-btn {
  background: transparent;
  border-color: rgba(251, 113, 133, 0.35);
  color: var(--color-error);
}

#logout-btn:hover {
  background: rgba(131, 113, 251, 0.12);
}


/* =============================
     AUTH MODAL (LOGIN EMBEBIDO)
   ============================= */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion-media);
}

.auth-modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.auth-modal {
  width: min(520px, 92vw);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  padding: 18px 18px 16px;
  position: relative;
}

.auth-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--color-borde);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-texto);
  cursor: pointer;
}

.auth-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.auth-modal-header {
  padding-right: 44px;
}

.auth-modal-title {
  margin: 0 0 4px 0;
  font-size: 1.2rem;
}

.auth-modal-subtitle {
  color: var(--color-texto-suave);
  font-size: 0.95rem;
}

.auth-modal-message {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: rgba(var(--color-marca-rgb), 0.12);
  border: 1px solid rgba(var(--color-marca-rgb), 0.35);
  border-radius: 10px;
}

.auth-modal-actions {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  color: var(--color-texto-muy-suave);
  font-size: 0.9rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: var(--color-borde);
  flex: 1;
}

.auth-label {
  font-size: 0.9rem;
  color: var(--color-texto-suave);
}

.auth-input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid var(--color-borde);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-texto);
  outline: none;
}

.auth-input:focus {
  border-color: rgba(var(--color-marca-rgb), 0.6);
  box-shadow: 0 0 0 4px rgba(var(--color-marca-rgb), 0.16);
}

.auth-btn {
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-borde);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-texto);
  cursor: pointer;
  transition: all var(--transicion-rapida);
}

.auth-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.auth-btn-primary {
  border-color: rgba(var(--color-marca-rgb), 0.35);
  background: rgba(var(--color-marca-rgb), 0.10);
}

.auth-btn-primary:hover {
  background: rgba(var(--color-marca-rgb), 0.16);
}

.auth-btn-provider {
  border-color: rgba(var(--color-marca-rgb), 0.30);
  background: rgba(var(--color-marca-rgb), 0.08);
}

.auth-btn-provider:hover {
  background: rgba(var(--color-marca-rgb), 0.14);
}

.auth-btn-ghost {
  border-style: dashed;
}

.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.92rem;
}

/* Botón "hamburguesa" para el menú en dispositivos móviles. */
.navbar .menu-toggle {
  display: none !important;
  /* Forzamos que se oculte en desktop a menos que media query diga lo contrario */
  background: none;
  border: none;
  color: var(--color-texto);
  font-size: 1.5em;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  /* Push it to right if flex order changes */
}

.navbar .menu-toggle:focus-visible {
  outline: none;
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(var(--color-marca-rgb), 0.22);
}

/* ==========================================================================
   5. LAYOUT PRINCIPAL Y SECCIONES SPA
   ========================================================================== */
main.content {
  /* Nuevo Modelo de Sangrado (Padding) Profesional: */
  width: 100%;
  /* Full width para solidity */
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  padding-top: var(--header-height);
  /* Compensación obligatoria por Navbar Fixed */
}

/* Las secciones se muestran/ocultan para simular una Single Page Application. */
section.seccion {
  display: none;
  /* Ocultas por defecto. */
  animation: fadeIn var(--transicion-media);
  padding: 2rem 0;
  /* Padding vertical estándar para las secciones */
}

/* EXCEPCIÓN: La sección de partituras NO tiene padding superior
   para que el toolbar se pegue inmediatamente al navbar. */
section.seccion#partituras {
  padding-top: 0;
  margin-top: 0;
  /* Limpieza total de márgenes */
}

section.seccion.active {
  display: block;
  /* La sección activa es visible. */
}

/* Estilos específicos para Inicio y Contacto (Diseño delicado) */
#inicio,
#contacto {
  max-width: 800px;
  /* Ancho de lectura cómodo */
  margin: 0 auto;
  /* Centrado horizontal */
  padding: 80px 24px;
  /* Vertical generoso, lateral seguro */
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-texto-suave);
}

#inicio .inicio-content,
#contacto {
  animation: fadeInSlow 0.8s ease-out;
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS DE LA SECCIÓN INICIO
   ========================================================================== */
#inicio .inicio-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  /* Extra padding bottom */
  text-align: left;
  color: var(--color-texto-suave);
}

#inicio .inicio-content h1,
#inicio .inicio-content h2 {
  color: var(--color-marca);
  margin-top: 1.8em;
  margin-bottom: 1em;
  font-weight: 500;
  border-bottom: 1px solid rgba(var(--color-marca-rgb), 0.22);
  padding-bottom: 10px;
  letter-spacing: -0.01em;
}

#inicio .inicio-content p {
  font-size: 1.15em;
  line-height: 1.8;
  margin-bottom: 1.8em;
  font-weight: 300;
}

#inicio .inicio-content strong {
  color: var(--color-texto);
  font-weight: 600;
}

#inicio .inicio-content ul {
  list-style: none;
  padding: 0;
  margin-bottom: 2.5em;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: fit-content;
  min-width: 280px;
  max-width: 100%;
}

#inicio .inicio-content ul li {
  position: relative;
  padding: 10px 15px;
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

#inicio .inicio-content ul li:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--color-marca-rgb), 0.45);
  background: rgba(255, 255, 255, 0.05);
}

#inicio .inicio-content ul li::before {
  content: "";
  /* Eliminamos bullet clásico */
}

/* BOTÓN IRRESISTIBLE - CALL TO ACTION */
.btn-ingresar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 380px;
  margin: 60px auto 40px;
  padding: 24px 32px;

  /* Rojo matte (sin brillo/shine) */
  background: var(--color-marca);
  color: var(--color-texto-sobre-marca);

  font-size: 1.3rem;
  font-weight: 700;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-decoration: none !important;

  border-radius: 8px;
  border: none;
  cursor: pointer;

  /* Sombra neutra (evita “glow” de color) */
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);

  border: 1px solid rgba(var(--color-marca-rgb), 0.22);

  position: relative;
  overflow: hidden;
  transition: transform var(--transicion-media), box-shadow var(--transicion-media), background var(--transicion-media), border-color var(--transicion-media);
}

.btn-ingresar:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  background: rgba(var(--color-marca-rgb), 0.92);
  border-color: rgba(var(--color-marca-rgb), 0.40);
}

.btn-ingresar:active {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.50);
}

@keyframes fadeInSlow {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }


  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================================================== */
/* Catálogo (controles + tabla) extraído a:                                    */
/* - styles/catalog-controls.css                                               */
/* - styles/catalog-table.css                                                  */
/* ========================================================================== */

/* Responsive: en celulares los filtros bajan */
@media (max-width: 768px) {

  /* ========================================================================
     1. LAYOUT Y NAVEGACIÓN MÓVIL (PROFESIONAL DRAWER)
     ======================================================================== */

  /* Mostrar botón hamburguesa */
  .navbar .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    z-index: 1002;
    /* Por encima del menú abierto */
  }

  /* Ajustes del Navbar */
  .navbar {
    padding: 0 16px;
    /* Padding lateral seguro */
    height: var(--header-height);
    justify-content: space-between;
  }

  /* Ocultar menú normal y prepararlo para modal/drawer */
  .nav-links-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-fondo);
    /* Fondo sólido total */
    padding: calc(var(--header-height) + 20px) 20px 40px;
    /* Espacio para header */
    transform: translateY(-100%);
    /* Oculto arriba */
    transition: transform var(--transicion-media);
    z-index: 1001;
    /* Debajo del header pero sobre contenido */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    visibility: hidden;
  }

  /* Estado Abierto (controlado JS: .nav-links-container.open) */
  /* .navbar ul.show removed as it was empty */

  /* En JS actual (ui.js), se añade .show a `navbar ul`.
     Necesitamos adaptar el CSS para que funcione con ese selector
     O BIEN, cambiar el selector aquí para apuntar a lo que JS cambia.

     Mirando ui.js: `navbarUl.classList.toggle('show');`
     `navbarUl` es la <ul> dentro del contenedor.

     Mejor estrategia CSS: */

  .nav-links-container:has(ul.show),
  /* Modern browsers */
  .nav-links-container.responsive-open

  /* Fallback if I edit JS */
    {
    transform: translateY(0);
    visibility: visible;
  }

  /* Si el JS aplica .show al UL, hagamos que el UL ocupe el espacio */
  .navbar ul {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-fondo);
    flex-direction: column;
    padding: 40px 20px;
    gap: 20px;
    border-radius: 0;
    border: none;
    transform: translateY(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    /* Debajo del navbar real */
    opacity: 0;
    border-top: 1px solid var(--color-borde);
  }

  .navbar ul.show {
    transform: translateY(0);
    opacity: 1;
    display: flex;
    /* Force flex */
  }

  /* Estilo de enlaces móviles "App-like" */
  .navbar ul li {
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    animation: slideInMenu 0.3s forwards;
    animation-delay: 0.1s;
  }

  .navbar ul li:nth-child(2) {
    animation-delay: 0.15s;
  }

  .navbar ul li:nth-child(3) {
    animation-delay: 0.2s;
  }

  .navbar a {
    display: block;
    width: 100%;
    padding: 16px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 12px;
    background: var(--color-superficie-2);
    border-color: transparent !important;
  }

  .navbar a.active {
    background: var(--color-marca);
    color: var(--color-fondo);
    box-shadow: 0 4px 12px rgba(var(--color-marca-rgb), 0.30);
  }

  @keyframes slideInMenu {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Bloque de usuario en móvil: mover al final del drawer o dejar en header?
     Dejar en header es más accesible. */
  .navbar .user-block {
    margin-right: 0;
  }

  /* Ocultar el nombre "Invitado" para ahorrar espacio, dejar solo botones */
  #session-status {
    display: none;
  }

  /* ========================================================================
      2. CONTENIDO (MÓVIL)
      Nota: controles del catálogo y tabla están en:
      - styles/catalog-controls.css
      - styles/catalog-table.css
      ======================================================================== */

  main.content {
    width: 100%;
    max-width: none;
  }

  /* Ajuste de Grilla y Lista MÓVIL */
  .catalog-grid {
    padding: 24px 16px calc(80px + env(safe-area-inset-bottom, 0px)) 16px;
    /* Menos padding lateral, más bottom */
    gap: 16px;
    grid-template-columns: 1fr;
    /* 1 columna forzada para máxima visibilidad */
  }

  .score-card {
    flex-direction: row;
    /* Tarjeta horizontal tipo "media object" */
    height: auto;
    min-height: 120px;
  }

  /* Si la tarjeta es solo imagen, no tiene sentido el layout horizontal */
  .score-card.image-only {
    flex-direction: column;
    min-height: 0;
  }

  .card-image {
    width: 84px;
    height: auto;
    /* No forzar alto: evita previews gigantes */
    min-height: 0;
    padding: 8px;
    border-bottom: none;
    border-right: 1px solid var(--color-borde);
    background: var(--color-superficie-2);
  }

  .score-card.image-only .card-image {
    width: 100%;
    padding: 10px;
    border-right: none;
    border-bottom: 1px solid var(--color-borde);
  }

  .card-image img {
    max-height: 92px;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .card-body {
    padding: 10px 12px;
    justify-content: center;
    gap: 6px;
  }

  .score-card h3 {
    font-size: 0.95rem;
    line-height: 1.3;
    padding: 0;
    margin: 0;
  }

  .meta-row {
    font-size: 0.82rem;
  }
}

/* ==========================================================================
   7. VISTA DE CUADRÍCULA (TARJETAS DE PARTITURA)
   ========================================================================== */
/* Layout: grilla del catálogo (desktop/tablet) */
.catalog-grid {
  /* Ajustes rápidos (desktop):
     - Más grande => subir estos números
     - Más chico  => bajar estos números */
  --grid-card-min: 240px;
  --grid-card-image-height: 140px;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-card-min), 1fr));
  gap: 16px;
  padding: 16px 24px 48px 24px;
}

/* En compu: tarjetas más grandes */
@media (min-width: 1024px) {
  .catalog-grid {
    /* Un poco más chicas para que entren 4 por fila */
    --grid-card-min: 260px;
  }

  /* En compu: previews tipo hoja A4 (vertical) y más grandes */
  .catalog-grid .card-image {
    height: auto;
    aspect-ratio: 210 / 297;
    padding: 6px;
  }

  .catalog-grid .card-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
}

/* En pantallas muy grandes: un poco más grandes todavía */
@media (min-width: 1440px) {
  .catalog-grid {
    /* Mantener 4 por fila en pantallas grandes típicas */
    --grid-card-min: 280px;
  }
}

/* Tarjeta base */
.score-card {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  transition: transform var(--transicion-media), box-shadow var(--transicion-media), border-color var(--transicion-media);
}

.score-card:hover,
.score-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev), 0 0 0 1px rgba(var(--color-marca-rgb), 0.22), 0 16px 40px rgba(0, 0, 0, 0.45);
  background: rgba(var(--color-marca-rgb), 0.06);
  border-color: rgba(var(--color-marca-rgb), 0.55);
  z-index: 1;
  outline: none;
}

.score-card:focus {
  outline: none;
}

/* Foco teclado: marco blanco */
.score-card:focus-visible::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--color-marca);
  border-radius: 14px;
  pointer-events: none;
  animation: pulseFocus 1.5s infinite;
}

@keyframes pulseFocus {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--color-marca-rgb), 0.35);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(var(--color-marca-rgb), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--color-marca-rgb), 0);
  }
}

/* Imagen preview (control estricto para que los JPG no se agranden) */
.card-image {
  width: 100%;
  height: var(--grid-card-image-height);
  overflow: hidden;
  background: var(--color-superficie-2);
  border-bottom: 1px solid var(--color-borde-sutil);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease, filter 0.35s ease;
  filter: brightness(0.95);
}

.score-card:hover .card-image img,
.score-card:focus-visible .card-image img {
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  filter: brightness(1.05);
}

.img-loading {
  opacity: 0;
}

.img-loaded {
  opacity: 1;
}

.card-body {
  padding: 14px 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.4;
}

.card-body h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.card-meta-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
}

.card-meta-row dt {
  color: var(--color-texto-muy-suave);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.card-meta-row dd {
  margin: 0;
  color: var(--color-texto-suave);
  font-weight: 400;
}

.details-btn {
  background: transparent;
  border: 1px solid rgba(var(--color-marca-rgb), 0.24);
  color: var(--color-texto);
  padding: 10px 0;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  font-family: var(--font-ui);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Variante más fina/delicada para el botón de descarga */
.details-btn.download-btn-modal {
  border-color: rgba(var(--color-marca-rgb), 0.32);
  color: var(--color-texto);
  background: rgba(var(--color-marca-rgb), 0.10);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 400;
  font-size: 0.85rem;
  padding: 9px 12px;
}

.details-btn.download-btn-modal:hover {
  background: rgba(var(--color-marca-rgb), 0.18);
  border-color: rgba(var(--color-marca-rgb), 0.55);
  color: var(--color-texto);
}

.details-btn.download-btn-modal:active {
  transform: none;
}

.details-btn:hover {
  background: rgba(var(--color-marca-rgb), 0.16);
  border-color: rgba(var(--color-marca-rgb), 0.75);
  color: var(--color-texto);
  transform: translateY(0);
}

/* ==========================================================================
   9. MODAL DE DETALLES DE PARTITURA
   ========================================================================== */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  /* Slower, more elegant */
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--color-superficie);
  width: 90%;
  max-width: 900px;
  height: min(90vh, 820px);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(var(--color-marca-rgb), 0.14), 0 18px 60px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(var(--color-marca-rgb), 0.28);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  transform: translateY(20px) scale(0.98);
  /* Slide up entrance */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  /* Elegant finish */
}

.modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(var(--color-marca-rgb), 0.65);
  pointer-events: none;
}

.overlay.show .modal {
  transform: translateY(0) scale(1);
}

.modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-borde);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: var(--color-superficie-2);
}


.modal-navs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-nav,
.modal-copy-link {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
  border-radius: 10px;
  padding: 0.42rem 0.6rem;
  cursor: pointer;
  transition: background var(--transicion-rapida), color var(--transicion-rapida), transform var(--transicion-rapida);
}

.modal-nav:hover,
.modal-copy-link:hover {
  background: rgba(var(--color-marca-rgb), 0.12);
  border-color: rgba(var(--color-marca-rgb), 0.25);
  color: var(--color-texto);
}

.modal-nav:focus-visible,
.modal-copy-link:focus-visible {
  outline: none;
  border-color: rgba(var(--color-marca-rgb), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--color-marca-rgb), 0.18);
}

.modal-nav:active,
.modal-copy-link:active {
  transform: none;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.3rem;
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--color-texto-muy-suave);
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  transition: color var(--transicion-rapida), transform var(--transicion-rapida);
}

.modal-close-btn:hover {
  color: var(--color-texto);
  transform: scale(1.05);
}

.modal-close-btn:focus-visible {
  outline: none;
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(var(--color-marca-rgb), 0.18);
}

.modal-body {
  display: grid;
  grid-template-columns: 420px 1fr;
  overflow: hidden;
  flex-grow: 1;
  min-height: 0;
}

.modal-body .preview {
  background: var(--color-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-right: 1px solid var(--color-borde);
  min-height: 0;
}

.modal-body .preview img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.modal-body .meta {
  padding: 1.5rem;
  overflow-y: auto;
  /* Permite scroll solo en la sección de metadatos si es necesario. */
  min-height: 0;
}

.modal-body .meta .meta-title {
  margin: 0 0 12px 0;
  font-size: 1.15rem;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.modal-body .meta-grid {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 12px;
  row-gap: 10px;
  align-items: baseline;
}

.modal-body .meta-grid dt {
  margin: 0;
  padding: 0;
  color: var(--color-texto-muy-suave);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.modal-body .meta-grid dd {
  margin: 0;
  padding: 0;
  color: var(--color-texto);
  word-break: break-word;
}

.modal-body .meta-note {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--color-marca-rgb), 0.18);
  background: var(--color-superficie-2);
  color: var(--color-texto);
}

.modal-body .meta p {
  margin: 10px 0;
  color: var(--color-texto);
  line-height: 1.4;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-borde);
  background: var(--color-superficie-2);
  text-align: right;
  flex-shrink: 0;
}

.download-btn {
  background: var(--color-marca);
  border: none;
  color: var(--color-texto);
  padding: 10px 24px;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  transition: all var(--transicion-media);
}

.download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--color-marca-rgb), 0.30);
}

.download-btn:disabled {
  background: var(--color-superficie-3);
  color: var(--color-texto-muy-suave);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ==========================================================================
   10. NOTIFICACIONES (TOASTS)
   ========================================================================== */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: var(--color-superficie);
  color: var(--color-texto);
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  border-left: 4px solid var(--color-info);
  opacity: 0;
  transform: translateX(100%);
  animation: slideIn 0.5s forwards;
}

.toast.success {
  border-color: var(--color-exito);
}

.toast.error {
  border-color: var(--color-error);
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   11. DISEÑO RESPONSIVO (MEDIA QUERIES)
   ========================================================================== */

/* Tablets y pantallas medianas */
@media (max-width: 900px) {
  .group-search {
    flex-basis: 100%;
  }

  .group-view {
    flex: 1 1 calc(50% - 6px);
    min-width: 260px;
  }
}

/* Móviles grandes y tablets en vertical */
@media (max-width: 840px) {
  .modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(240px, 46vh) 1fr;
    /* El modal pasa a una sola columna. */
    max-height: calc(90vh - 120px);
    /* Ajusta altura para caber en pantalla. */
  }

  .modal-body .preview {
    border-right: none;
    border-bottom: 1px solid var(--color-borde);
    max-height: none;
    min-height: 240px;
  }

  .modal-body .meta-grid {
    grid-template-columns: 110px 1fr;
  }
}

/* Móviles */
@media (max-width: 768px) {
  /* Nota: Reglas legacy de navbar removidas.
       El móvil se maneja por el drawer principal (ver media query superior). */
}

/* Extra: en móviles muy chicos ocultar el texto largo de sesión */
@media (max-width: 420px) {
  .session-pill {
    display: none;
  }
}

/* Móviles pequeños */
@media (max-width: 600px) {
  .catalog-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .score-card {
    border-radius: 14px;
  }

  /* Mantener proporción compacta en móviles chicos (evita tarjetas gigantes) */
  .card-image {
    height: auto;
  }

  .card-body {
    padding: 10px 12px;
  }

  .card-body h3 {
    font-size: 0.95rem;
    line-height: 1.25;
  }

  .catalog-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .catalog-controls .view-toggles {
    justify-content: center;
  }

  .card-meta {
    gap: 6px;
  }

  .card-meta-row {
    grid-template-columns: 92px 1fr;
    gap: 8px;
  }
}

/* =============================
     MODAL DE CONFIRMACIÓN (GENÉRICO)
     ============================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1900;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion-media);
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: var(--color-superficie);
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  max-width: 90vw;
  width: 350px;
  margin: 0 auto;
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  position: relative;
  text-align: center;
  animation: fadeInModal 0.3s;
}

.modal-box p {
  margin-bottom: 1.5rem;
  font-size: 1.1em;
  line-height: 1.5;
}

.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.modal-btn {
  padding: 0.7em 1.6em;
  border-radius: 6px;
  border: 1px solid var(--color-borde);
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.modal-btn:focus-visible {
  outline: none;
  border-color: rgba(var(--color-marca-rgb), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--color-marca-rgb), 0.18);
}

.modal-btn.confirm {
  background: rgba(var(--color-marca-rgb), 0.14);
  border-color: rgba(var(--color-marca-rgb), 0.35);
  color: var(--color-texto);
}

.modal-btn.confirm:hover {
  background: rgba(var(--color-marca-rgb), 0.22);
}

.modal-btn.cancel {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-texto);
}

.modal-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-texto);
}

@keyframes fadeInModal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal en móviles: más liviano y legible */
@media (max-width: 768px) {
  .overlay {
    backdrop-filter: none;
    padding: 14px;
  }

  .modal-close-btn,
  .modal-nav,
  .modal-copy-link {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.7rem;
  }

  .modal-header {
    padding: 0.75rem 1rem;
  }

  .modal {
    width: min(96vw, 760px);
    max-width: 760px;
    max-height: 92vh;
    height: min(92vh, 860px);
    border-radius: 14px;
    transform: none;
    transition: none;
  }

  .overlay.show .modal {
    transform: none;
  }

  .modal-body {
    max-height: none;
  }

  .modal-body .meta {
    padding: 1rem;
  }

  /* Preview en móvil: más grande pero sin ocupar toda la pantalla */
  .modal-body .preview {
    max-height: 46vh;
    aspect-ratio: 4 / 3;
  }

  .modal-body .preview img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
}