:root { 
    --primary: #02a0d9; 
    --header-bg: #ffffff; 
    --bg: #1e1e1e; 
    --card-bg: #ffffff; 
    --text-dark: #333;
    --anim-duration: 0.6s;
    --manual-duration: 0.5s;
   
    /* --- VALORES NUMÉRICOS (Sin px para que Firefox pueda calcular) --- */
    --w-main-n: 190;
    --w-side-n: 145;
    --gap-n: 60;

    /* --- MEDIDAS REALES (Se forman aquí) --- */
    --w-main: calc(var(--w-main-n) * 1px);
    --w-side: calc(var(--w-side-n) * 1px);
    --gap: calc(var(--gap-n) * 1px);

    /* --- FACTOR DE REDONDEO (15% del ancho) --- */
    --radius-factor: 0.15;

    /* CÁLCULOS DINÁMICOS */
    --radius-main: calc(var(--w-main) * var(--radius-factor));
    --radius-side: calc(var(--w-side) * var(--radius-factor));

    --move-dist: calc((var(--w-main) / 2) + var(--gap) + (var(--w-side) / 2));
    
    --badge-font-factor: 0.08;  /* El texto será el 8% del ancho de la tarjeta */
    --badge-bottom-factor: 0.05; /* El margen inferior será el 5% del ancho */

    /* ESCALAS DE ANIMACIÓN (Salto de lateral a central) */
    --scale-up: calc(var(--w-main-n) / var(--w-side-n));
    --scale-down: calc(var(--w-side-n) / var(--w-main-n));
}

body { font-family: 'Roboto', sans-serif; background: var(--bg); color: #eee; margin: 0; text-align: center; }

/* --- SEGURIDAD PARA INICIO DE CANCIÓN --- */
/* Al inicio: Ocultamos pasado, EXCEPTO si estamos rebobinando (animating-reverse) */
body.at-start:not(.animating-reverse) #prev-chord,
body.at-start:not(.animating-reverse) #ghost-card-prev {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ocultar futuro al final (si no estamos en medio de la transición animada) */
body.at-end:not(.animating-transition) #next-chord,
body.at-end:not(.animating-transition) #ghost-card {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --- HEADER Y VISOR --- */
#fixed-header { 
    position: sticky; 
    top: 0; 
    z-index: 1000;
    background: var(--header-bg);
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    /* Volvemos a tu valor original pero con un tope responsivo */
    height: 440px; 
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#visor-area { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    width: 100%; 
    height: 340px; /* Dejamos 100px para la fila de herramientas */
    flex: 1; /* Evitamos que crezca más de lo debido */
    padding-top: 10px;
    box-sizing: border-box;
    transition: opacity 0.3s ease, height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#player {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    width: 95%;
    max-width: 1100px;
    height: 100%;
    max-height: 300px;
    position: relative;
}

/* --- MODO COMPACTO (Header Colapsado) --- */

/* 1. Ocultar el visor */
body.header-collapsed #visor-area {
    display: none !important;
}

/* 2. Ajustar la altura del header fijo */
body.header-collapsed #fixed-header {
    height: 80px !important;
    padding: 10px 0;
    min-height: 80px; /* Altura suficiente para tools-row */
}

/* 3. Subir el contenedor de compases */
body.header-collapsed #scroll-container {
    padding-top: 20px !important;
}

/* 4. Posicionamiento de Widgets en modo compacto */
/* Si el usuario los abre, aparecen debajo de la barra de herramientas */
body.header-collapsed #yt-widget,
body.header-collapsed #library-widget {
    top: 90px !important; 
}

body.header-collapsed .beat-box {
    /* Ajusta este valor (ej. 200px - 250px) para que quede 
       exactamente en la tercera fila según tu diseño */
    scroll-margin-top: 0 !important; 
}

body.header-collapsed .tools-row {
    padding-top:10px !important;
    padding-bottom: 0 !important;
}

/* Estilo específico para el botón de colapso */
.btn-collapse {
    margin-left: 15px;
    background: rgba(255,255,255,0.05) !important;
    border-color: #555 !important;
}
.btn-collapse:hover {
    background: var(--primary) !important;
    color: #000 !important;
}

/* --- ESTILOS DE TARJETA UNIFICADOS --- */
.card {
    /* La tarjeta pequeña ocupa el 22% del ancho del player */
    flex: 0 0 var(--w-side); /* Ancho base para las pequeñas */
    aspect-ratio: 13 / 17; 
    border-radius: var(--radius-side) !important;
    /* SEGURIDAD VERTICAL */
    max-height: 85%; /* Deja espacio para los Badges que flotan abajo */
    width: var(--w-side) !important;     /* Permite que el ancho ceda si la altura es el tope */
    
    background: var(--card-bg); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity; /* Avisa a Firefox que prepare la tarjeta para moverse */
    transform: translateZ(0); 
    transition: all 0.3s ease, transform 0.3s ease;
    box-shadow: 0 0 15px rgba(0,0,0,0.08), 6px 6px 12px rgba(0,0,0,0.15);
    color: #000; border: 1px solid #f0f0f0;
    position: relative;
    box-sizing: border-box;
    overflow: visible; /* Para que los badges se vean si sobresalen un poco */
}

.card img { max-width: 90%; max-height: 85%; object-fit: contain; }
.chord-name-text { font-weight: 900; font-size: 1.6em; margin-bottom: 5px; display: none; color: #333; }

#prev-chord .chord-name-text, 
#next-chord .chord-name-text {
    font-size: 1.04em; /* <--- Aumenta este valor para compensar el escalado */
}

/* --- ESTADOS ESPECÍFICOS DE TARJETAS --- */

/* PASADO: Pequeña, gris y transparente al principio */
#prev-chord {
    opacity: 0; 
    filter: grayscale(100%);
    transition: opacity 0.5s ease; 
    z-index: 5;
}

/* PRESENTE: Grande */
#current-chord { 
    --this-w: var(--w-main);
    /* La central ocupa el 40% del ancho del player */
    flex: 0 0 var(--w-main);
    /* SEGURIDAD VERTICAL para la grande */
    max-height: 100%; 
    width: auto;
    
    aspect-ratio: 200 / 260;
    border-radius: var(--radius-main) !important;
    z-index: 10; 
}
#current-chord.countdown-mode { filter: brightness(0.9); }

/* FUTURO: Pequeña normal */
#next-chord { opacity: 1; z-index: 20; }

/* FANTASMA: Fondo */
#ghost-card,
#ghost-card-prev {
    /* 1. Estado y Posicionamiento */
    display: none; 
    position: absolute;
    z-index: 1;
    pointer-events: none;

    box-shadow: 0 0 15px rgba(0,0,0,0.08), 6px 6px 12px rgba(0,0,0,0.15);

    /* 3. Corrección de tamaño y forma */
    /* Hereda width y flex de .card, solo aseguramos la alineación */
    align-self: center !important; 
    height: auto !important;
    min-width: 0;
}

#countdown-box {
    position: absolute; bottom: 20px; width: 100%; text-align: center;
    font-size: 4em; font-weight: 900; color: #000;
    display: none; z-index: 20; pointer-events: none;
}

#measure-display { 
    color: #333; font-size: 1.2em; font-weight: 500; 
    margin-top: 10px; margin-bottom: 15px; 
}

/* --- ETIQUETAS DE SECCIÓN (Fixed & Scaled) --- */
.card-section-badge {
    position: absolute;
    /* Posición proporcional al ancho de la tarjeta */
    bottom: calc(var(--this-w) * var(--badge-bottom-factor));
    font-size: calc(var(--this-w) * var(--badge-font-factor)) !important; 
    left: 50%;
    transform: translateX(-50%);
    
    background: #FFC107;
    color: #000;
    padding: 0.2em 0.6em; /* Padding relativo a la fuente */
    
    border-radius: 4px;
    font-weight: 900;
    z-index: 30;
    white-space: nowrap;
    pointer-events: none;
    transition: transform var(--anim-duration) ease, background var(--anim-duration) ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.card, #prev-chord, #next-chord, #ghost-card, #ghost-card-prev {
    --this-w: var(--w-side); /* Su ancho base */
    flex: 0 0 var(--this-w) !important;
    width: var(--this-w) !important;
    border-radius: calc(var(--this-w) * var(--radius-factor)) !important;
    aspect-ratio: 13 / 17;
}

/* Etiquetas Grises para el Pasado */
#prev-chord .card-section-badge,
#ghost-card-prev .card-section-badge,
.animating-transition #current-chord .card-section-badge {
    background: #e0e0e0 !important; 
    color: #777 !important;
    box-shadow: none;
}

/* --- FÍSICA DE NAIPES V8 (ANIMACIONES MAESTRAS) --- */

.notransition, .notransition .card, .notransition .card-section-badge {
    transition: none !important;
    animation: none !important;
}

.animating-transition .card, 
.animating-transition .card-section-badge {
    transition: transform var(--anim-duration) cubic-bezier(0.25, 1, 0.5, 1), 
                opacity var(--anim-duration), 
                filter var(--anim-duration) !important;
}

/* --- AVANCE (Normal / Play) --- */

/* La carta central se va a la izquierda y se vuelve pequeña/gris */
.animating-transition #current-chord {
    /* Se mueve la distancia exacta (que ahora es mayor en fullscreen) */
    transform: translateX(calc(var(--move-dist) * -1)) scale(var(--scale-down)) !important;
    filter: grayscale(100%);
}

.animating-transition #next-chord {
    /* El salto de tamaño ahora usa el factor de escala correcto del modo activo */
    transform: translateX(calc(var(--move-dist) * -1)) scale(var(--scale-up)) !important;
    z-index: 100;
}

/* --- CONTRA-ESCALA DE BADGES --- */
.animating-transition #next-chord .card-section-badge {
    /* El badge ignora los 2px: EscalaBase / (EscalaBase + pop) */
    transform: translateX(-50%) translateY(-5%)
               scale(calc(var(--scale-up) / var(--scale-up))) !important;
}

.animating-transition #current-chord .card-section-badge {
    transform: translateX(-50%) scale(1) !important;
}

/* Posicionamiento exacto del Ghost Card debajo de Next */
.animating-transition #ghost-card {
    display: flex;
    
    z-index: 5;
    width: var(--w-side) !important;
    flex: 0 0 var(--w-side) !important;
    aspect-ratio: 130 / 170 !important;
    transform: scale(1) !important;
    align-self: center !important;
}

.animating-reverse #ghost-card-prev {
    display: flex;
    align-self: center !important;
    transform: scale(1) !important; /* Proporcional sin pop */
    width: var(--w-side) !important;
    flex: 0 0 var(--w-side) !important;
}

/* --- FÍSICA DE NAIPES: MODO REVERSA (REBOBINADO) --- */

/* 1. Transición Maestra para el modo reversa */
.animating-reverse .card, 
.animating-reverse .card-section-badge {
    transition: transform var(--manual-duration) cubic-bezier(0.25, 1, 0.5, 1), 
                opacity var(--manual-duration), 
                filter var(--manual-duration) !important;
}

/* 2. El PRESENTE se va a la derecha y se vuelve pequeño/gris */
.animating-reverse #current-chord {
    /* Se mueve a la derecha la distancia exacta entre centros */
    transform: translateX(var(--move-dist)) scale(var(--scale-down)) !important;
    z-index: 50;
}

/* 3. El PASADO viene al centro y crece hasta el tamaño principal */
.animating-reverse #prev-chord {
    /* Se mueve a la derecha (desde su posición original a la izquierda) hasta el centro */
    transform: translateX(var(--move-dist)) 
               scale(var(--scale-up)) !important;
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    z-index: 100;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* --- CONTRA-ESCALA DE BADGES (ETIQUETAS) EN REVERSA --- */

/* Badge del Pasado: se encoge al llegar al centro para compensar el crecimiento de la carta */
.animating-reverse #prev-chord .card-section-badge {
    /* Escala inversa: si la carta crece x2, el badge escala 0.5 */
    transform: translateX(-50%) 
               scale(calc(var(--scale-up) / var(--scale-up))) !important;
    background: #FFC107 !important;
    color: #000 !important;
}

/* Badge del Presente: aumenta para no verse minúsculo mientras la carta se encoge */
.animating-reverse #current-chord .card-section-badge {
    transform: translateX(-50%) scale(var(--scale-up)) !important;
}

/* --- HERRAMIENTAS Y BOTONES --- */
.tools-row { display: flex; justify-content: center; gap: 12px; align-items: center; flex-wrap: wrap; }
.tool-separator { width: 1px; height: 30px; background: #555; margin: 0 15px; opacity: 0.5; }

.btn-icon {
    border: none; width: 35px; height: 35px; border-radius: 50%;
    font-size: 1em; cursor: pointer; color: #fff; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.05s, filter 0.1s; outline: none;
}
.btn-icon:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-icon:active { transform: scale(0.95); filter: brightness(0.8); }

.btn-play { background: #ff7675; color: #fff; font-size: 1em; }
.btn-stop { background: var(--primary); }
.btn-mute { background: #636e72; font-size: 1em; width: 35px; height: 35px; }
.btn-mute.muted { background: #d63031; }
.btn-file { background: #2d3436; font-size: 1em; }
.btn-save { background: #2d3436; }
.btn-reset { background: #e17055; font-size: 1em; }
.btn-workshop { background: #34495e; font-size: 1em; }

.center-group {
    background: #eee; padding: 5px 15px; border-radius: 30px; 
    display: flex; gap: 15px; align-items: center; color: #555;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05);
}
.bpm-input { width: 50px; background: transparent; border: none; border-bottom: 1px solid #aaa; color: #333; font-size: 1.1em; text-align: center; font-weight: bold; outline:none;}
.bpm-input.modified {
    color: #ff9f43 !important; /* Naranja cuando es distinto al original */
    border-bottom-color: #ff9f43 !important;
}
.countdown-label { font-size: 0.9em; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-weight: bold;}
input[type=checkbox] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }

/* estilos SLIDER BPM */
/* Posicionamiento del grupo BPM */
.bpm-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Burbuja flotante horizontal */
.bpm-slider-popup-horizontal {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 40px; /* Aparece centrado encima del input y el texto */
    left: 50%;
    transform: translateX(-56.5%);
    background: #1a1a1a;
    border: 1px solid var(--primary);
    padding: 12px 18px;
    border-radius: 30px; /* Estilo píldora */
    box-shadow: 0 8px 25px rgba(0,0,0,0.9);
    z-index: 10000;
    width: 220px; /* Ancho cómodo para el dedo/ratón */
    align-items: center;
}

.bpm-slider-popup-horizontal.active {
    display: flex;
}

/* El slider horizontal estándar */
#bpm-slider {
    width: 100%;
    height: 6px;
    background: #333;
    accent-color: var(--primary); /* Color corporativo para el control */
    cursor: pointer;
    outline: none;
}

/* Triángulo decorativo inferior (opcional) */
.bpm-slider-popup-horizontal::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent var(--primary) transparent;
}
/* Fin estilos SLIDER BPM */

/* --- SIDEBAR --- */
#mini-workshop {
    position: fixed; top: 0; right: -350px; width: 320px; height: 100vh;
    background: #f9f9f9; box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    z-index: 2500; padding: 25px; box-sizing: border-box;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; color: #333;
}
#mini-workshop.workshop-open { right: 0; }
.workshop-header { display: flex; justify-content: space-around; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
.workshop-header h3 { margin: 0; font-size: 1.2em; color: #333; }
.btn-close-sidebar { background: transparent; border: none; font-size: 1.2em; cursor: pointer; color: #666; transition: color 0.2s; }
.btn-close-sidebar:hover { color: #d63031; transform: scale(1.1); }
.workshop-inputs { display: flex; flex-direction: column; gap: 10px; }
.workshop-inputs input { width: 100%; box-sizing: border-box; padding: 10px; border-radius: 6px; border: 1px solid #ddd; background: #fff; color: #333; }
.workshop-actions { margin-top: 15px; display: flex; gap: 10px; }
.workshop-actions button { flex: 1; background: #333; color: #fff; border:none; padding:8px; border-radius:4px; cursor:pointer; position: relative; }
.tooltip-msg { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: #000; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.8em; opacity: 0; transition: opacity 0.5s; pointer-events: none; white-space: nowrap; }
.tooltip-msg.show { opacity: 1; }
#code-output { background: #222; color: #0f0; border-radius: 6px; padding: 8px; margin-top: 10px; height: 80px; width: 100%; border:none; resize: none; font-family: monospace; }

/* --- EDITOR GRID --- */
#scroll-container { padding: 0px 30px 200px 30px; max-width: 1100px; margin: 0 auto; }
.measures-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-break { grid-column: 1 / -1; height: 20px; width: 100%; }

.measure-cell { 
    background: #2a2a2a; border: 1px solid #333; padding: 8px; 
    border-radius: 8px; display: flex; flex-direction: column; gap: 5px; 
    cursor: pointer; transition: background 0.1s; position: relative; overflow: visible; scroll-margin-top: 530px;
}

body.header-collapsed .measure-cell {
    scroll-margin-top: 190px !important;
}

.measure-cell:hover { background: #333; border-color: #555; }
.measure-number { font-size: 0.7em; color: #666; font-weight: bold; padding-left: 2px; }
.section-label { position: absolute; top: -22px; left: 0; background: #FFC107; color: #000; font-size: 0.75em; font-weight: 900; padding: 2px 6px; border-radius: 4px; z-index: 20; box-shadow: 0 2px 4px rgba(0,0,0,0.3); white-space: nowrap; }

/* --- BOTONES DE ACCIÓN EN COMPASES (NUEVO DISEÑO 4 ESQUINAS) --- */
.measure-action-btn { 
    position: absolute; 
    width: 22px; height: 22px; /* Un pelín más grandes para clicar mejor */
    background: #2a2a2a; 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 0.75em; 
    cursor: pointer; 
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Sombra para resaltar sobre el fondo */

    /* LÓGICA DE APARICIÓN: */
    opacity: 0; 
    pointer-events: none; /* Evita clics accidentales cuando no se ven */
    transition: opacity 0.2s ease, transform 0.2s ease; /* Solo opacidad y escala, nada de movimiento */
}

/* AL PASAR EL RATÓN POR LA CELDA: Aparecen sin moverse */
.measure-cell:hover .measure-action-btn { 
    opacity: 1; 
    pointer-events: all; 
}

/* AL PASAR EL RATÓN POR EL BOTÓN: Pequeño efecto zoom */
.measure-action-btn:hover { 
    transform: scale(1.2); 
    filter: brightness(1.2); 
}

/* --- POSICIONAMIENTO (4 ESQUINAS) --- */

/* ARRIBA IZQUIERDA: Borrar (Rojo) */
.btn-del-measure { 
    top: -10px; left: -10px; 
    color: #ff7675; border: 1px solid #ff7675; 
}

/* ARRIBA DERECHA: Añadir (Verde) */
.btn-add-measure { 
    top: -10px; right: -10px; 
    color: var(--primary); border: 1px solid var(--primary); 
}

/* ABAJO IZQUIERDA: Copiar (Azul) */
.btn-copy-measure { 
    bottom: -10px; left: -10px; 
    color: #74b9ff; border: 1px solid #74b9ff; 
}

/* ABAJO DERECHA: Pegar (Morado) */
.btn-paste-measure { 
    bottom: -10px; right: -10px; 
    color: #a29bfe; border: 1px solid #a29bfe; 
}

/* Estilo del botón Pegar Superior */
#btn-paste-first {
    width: 32px; height: 32px; 
    background: #2a2a2a; 
    border: 1px solid #a29bfe; /* Morado */
    color: #a29bfe; 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 1em; 
    cursor: pointer; 
    transition: all 0.2s; 
    outline: none; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#btn-paste-first:hover { 
    transform: scale(1.1); 
    background: #a29bfe; 
    color: #000; 
}

.measure-action-btn.btn-disabled {
    cursor: not-allowed !important;
    background: #222; /* Un gris más oscuro */
    border-color: #444; /* Borde apagado */
    color: #555; /* Icono apagado */
    box-shadow: none;
}

/* Evitar que crezca o brille al pasar el ratón si está desactivado */
.measure-action-btn.btn-disabled:hover {
    transform: scale(1) !important; /* No crece */
    filter: none !important; /* No brilla */
}

/* REGLA CLAVE: Solo se ve (semi-transparente) CUANDO ESTÁS SOBRE LA CELDA */
.measure-cell:hover .measure-action-btn.btn-disabled {
    opacity: 0.4; /* Se ve un poquito, para que sepas que está ahí */
}

.beats-row { display: flex; gap: 4px; justify-content: flex-start; flex-wrap: wrap; height: auto; min-height: 40px; }

.beat-box { 
    flex: 0 0 calc(25% - 3px); 
    height: 40px; 
    background: #3d3d3d; 
    border-radius: 4px; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 0.85em; cursor: pointer; user-select: none; color: #fff; 
    position: relative; 
    scroll-margin-top: 0 !important;
    box-sizing: border-box; 
    border: 1px solid transparent;
}

.beat-box:not(.subdivided):hover,
.mini-beat-box:hover {
    background: #555 !important;
    color: #fff !important; /* Mantenemos tu estilo original de texto blanco */
}

/* Evitamos que el contenedor padre se ilumine si el pulso está dividido */
.beat-box.subdivided:hover {
    background: transparent !important;
}

.beat-box.has-custom { border-bottom-color: var(--primary); }

#start-add-area { width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; padding-top: 10px; }
#btn-add-first { width: 28px; height: 28px; background: #2a2a2a; border: 1px solid var(--primary); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9em; cursor: pointer; transition: all 0.2s; outline: none; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
#btn-add-first:hover { transform: scale(1.2); filter: brightness(1.2); }

h3.section-title { color: var(--primary); margin-bottom: 20px; text-align: left; border-bottom: 1px solid #444; padding-top: 10px; font-weight: 300; }
.editable-title { cursor: text; border-radius: 4px; padding: 0 5px; transition: background 0.2s; outline: none; }
.editable-title:hover { background: rgba(255,255,255,0.05); }
.editable-title:focus { background: rgba(255,255,255,0.1); border-bottom: 2px solid var(--primary); }

/* MODALES */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 3000; align-items: center; justify-content: center; }
.modal-content { background: #333; padding: 20px; border-radius: 10px; border: 1px solid var(--primary); text-align: center; }
.modal-content h4 { margin-top: 0; color: #fff; }
.beats-options { display: flex; gap: 10px; justify-content: center; margin: 15px 0; }
.beats-options button { width: 40px; height: 40px; border-radius: 50%; border: none; background: #444; color: #fff; font-weight: bold; font-size: 1.2em; cursor: pointer; transition: background 0.2s; }
.beats-options button:hover { background: var(--primary); color: #000; }
.modal-cancel { background: transparent; border: none; color: #aaa; cursor: pointer; text-decoration: underline;}

/* --- NUEVO: ESTILOS INPUT MODAL (CANTIDAD Y TIEMPOS) --- */
.modal-inputs-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.input-group label {
    font-size: 0.8em;
    color: #aaa;
    text-transform: uppercase;
    font-weight: bold;
}

.qty-input {
    background: #222;
    border: 2px solid var(--primary);
    color: #fff;
    font-size: 1.8em; 
    text-align: center;
    width: 80px;
    border-radius: 8px;
    padding: 10px;
    outline: none;
    font-weight: bold;
}

.qty-input:focus {
    background: #333;
    box-shadow: 0 0 10px rgba(0, 210, 180, 0.3);
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- SELECTOR DE VARIANTES (MODAL) --- */
#variant-selector { 
    display: none; /* Se cambia a flex con JS */
    flex-direction: column; /* Para que el scroll sea solo interno */
    
    position: fixed; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    
    background: #2a2a2a; 
    border: 2px solid var(--primary); 
    border-radius: 12px; 
    box-shadow: 0 0 80px rgba(0,0,0,1); 
    
    /* ANCHO: Aumentado para que quepan 6 tarjetas grandes */
    width: 95%; 
    max-width: 1100px; 
    
    /* ALTO: Controlado para no salirse de pantalla */
    max-height: 90vh; 
    
    padding: 25px; 
    z-index: 2000; 
    text-align: center; 
}

/* --- REJILLA DE ACORDES (GRID) --- */
#variant-list {
    display: grid !important;
    
    /* CLAVE: Columnas de mínimo 150px. 
       En 1100px caben aprox 6 (150*6 + huecos = ~1000px).
       Si pones más, bajan de fila automáticamente. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    
    gap: 15px; /* Separación */
    
    margin-top: 15px;
    padding: 15px;
    
    /* SCROLL VERTICAL AUTOMÁTICO */
    /* Suficiente altura para ver unas 2-3 filas sin scroll, luego aparece */
    max-height: 60vh; 
    overflow-y: auto; 
    overflow-x: visible !important;
    
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px solid #444;
}

/* --- CADA TARJETA --- */
.variant-option { 
    cursor: pointer; 
    border: 3px solid transparent; 
    border-radius: 9px; 
    overflow: visible !important;
    position: relative; 
    background: #fff; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* IMPORTANTE: Altura mínima de la tarjeta para que no se aplaste */
    min-height: 190px; 

    transition: transform 0.1s, border-color 0.2s; 
}

.variant-option div.small-text {
    font-size: 0.75em;
    line-height: 1.1;
    padding: 5px;
    text-transform: uppercase;
}

.variant-option:hover { 
    transform: scale(1.05); 
    z-index: 5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* --- LA IMAGEN DEL ACORDE --- */
.variant-option img { 
    /* FORZAMOS LA ALTURA GRANDE */
    height: 180px; 
    width: auto; /* El ancho se ajusta solo para no deformar */
    
    object-fit: contain; /* Asegura que se vea entera */
    display: block; 
}

/* Texto de respaldo (Auto / Sin imagen) */
.variant-option div {
    color: #333;
    font-weight: bold;
    font-size: 1.2em;
}

.variant-option.selected-variant {
    filter: none !important;
    opacity: 1 !important;
    border: 3px solid var(--primary) !important;
    box-shadow: 0 0 20px var(--primary) !important;
    background: #fff; /* Asegura fondo blanco para que resalte el diagrama */
}

.variant-option.is-manual-chord.selected-variant {
    border-style: dashed !important; /* Cambia sólido por discontinuo */
    border-width: 3px !important;   /* Mantiene el grosor de selección */
}

#scope-selector { display: none; background: #333; padding: 15px; border-radius: 8px; margin-top: 15px; border: 1px solid #555; }
.scope-btn { display: block; width: 100%; padding: 12px; margin: 8px 0; background: #444; border: none; color: #fff; cursor: pointer; text-align: left; border-radius: 6px; font-size: 1em; }
.scope-btn:hover { background: var(--primary); color: #000; }
.harmony-edit-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; align-items: center; background: rgba(255,255,255,0.1); padding: 10px; border-radius: 6px; }
.harmony-edit-row input { background: #111; border: 1px solid #555; color: #fff; padding: 8px; border-radius: 4px; width: 100px; text-align: center; font-weight: bold; font-size: 1.1em; outline: none; }
.harmony-edit-row button { background: #555; color: #fff; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }

.btn-pdf { background: #e74c3c; font-size: 1em; }
.btn-pdf:hover { background: #c0392b; }

/* --- WIDGET YOUTUBE FLOTANTE (ARRIBA IZQUIERDA) --- */
#yt-widget {
    position: fixed; 
    top: 20px; 
    left: 20px;
    width: 300px;
    background: #1e1e1e; 
    border: 1px solid #444;
    border-radius: 8px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 5000; 
    overflow: hidden;
    font-family: 'Roboto', sans-serif; text-align: left;
    display: block;
}

/* --- GB STUDIO HEADER UNIFICADO --- */
.yt-header {
    background: #333; 
    color: #eee; 
    padding: 10px 15px;
    height: 20px; /* Altura fija */
    display: flex; 
    justify-content: flex-end; /* CAMBIO: Empuja todo el contenido real a la derecha */
    align-items: center;
    border-bottom: 1px solid #444; 
    position: relative; 
}

/* Logo: Flota a la izquierda sin afectar al resto */
.yt-header-logo {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.yt-header-logo img {
    height: 40px;
    width: auto;
    display: block;
    transition: transform 0.2s;
}

/* Título: Flota en el centro exacto */
.yt-header-title {
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff !important;
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    z-index: 10;
}

.yt-header-title:hover {
    color: var(--primary) !important;
    transform: translateY(-50%) scale(1.1);
    letter-spacing: 1px;/* Un leve toque de color al pasar el ratón */
}

/* Contenedor de botones: Se mantiene a la derecha por el flex-end del padre */
.yt-header > div {
    display: flex; 
    align-items: center; 
    gap: 15px; 
    z-index: 10;
    position: relative; /* Asegura que esté por encima de posibles capas de fondo */
}

/* Estilo botón cerrar (X) */
.btn-close-widget { 
    background:none; 
    border:none; 
    color:#aaa; 
    cursor:pointer; 
    font-size: 1.1em;
}
.btn-close-widget:hover { color:#ff7675; }

#btn-reset-map {
    background: none; 
    border: none; 
    color: #666; /* Gris más oscuro para el estado inactivo */
    font-size: 1em; 
    cursor: default; /* Flecha normal del navegador */
    padding: 0;
    transition: all 0.2s ease;
    opacity: 0.5;
    pointer-events: auto; /* IMPORTANTE: Lo activamos para que el cursor 'default' funcione */
}

/* --- NUEVO: Botón Reset (Basura) --- */
#btn-reset-video {
    background: none; 
    border: none; 
    color: #e17055; 
    font-size: 1em; 
    cursor: pointer; 
    transition: all 0.2s ease;
    padding: 0;
    display: none; /* Oculto por defecto (JS lo muestra) */
}
#btn-reset-video:hover {
    color: #ff4757; 
    transform: scale(1.2) rotate(10deg); 
}
/* --- Fin estilos YOUTUBE HEADER --- */


#yt-body { padding: 15px; display: flex; flex-direction: column; gap: 10px; }

/* --- BOTÓN VÍDEO DINÁMICO --- */
.btn-video { 
    background: #636e72 !important; /* Gris neutro por defecto */
    opacity: 0.5;
    transition: all 0.4s ease;
}

/* Estado cuando el proyecto SÍ tiene un ID de vídeo */
.btn-video.has-video { 
    background: #c4302b !important; /* Rojo YouTube */
    opacity: 1;
    box-shadow: 0 0 10px rgba(196, 48, 43, 0.4);
}

.btn-video.has-video:hover {
    background: #e62117 !important;
    transform: translateY(-2px) scale(1.05);
}

/* INPUTS Y PLAYER */
#yt-url-input { width: 100%; box-sizing: border-box; background: #111; border: 1px solid #444; color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 0.85em; }
#yt-player-wrapper { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 4px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; border: 1px solid #333; }
#youtube-iframe { 
    width: 100%; 
    height: 100%; 
    display: none; /* <--- IMPORTANTE: Oculto al inicio */
}

/* CONTROLES Y SWITCHES */
/* 1. Estilo para el botón Reset Mapa (Undo) */
#btn-reset-map {
    background: none; 
    border: none; 
    color: #aaa; /* Gris por defecto (inactivo) */
    font-size: 1em; 
    cursor: default; 
    padding: 0;
    transition: all 0.2s ease;
    opacity: 0.5;
    pointer-events: none; /* No clicable si está gris */
}

/* Estado Activo (Se activa vía JS añadiendo la clase .has-map) */
#btn-reset-map.has-map {
    color: #fff; /* Blanco */
    cursor: pointer;
    opacity: 1;
    pointer-events: all;
}
#btn-reset-map.has-map:hover {
    color: #00d2b4; /* Color primario al pasar ratón */
    transform: rotate(-45deg); /* Efecto visual chulo */
}
.yt-controls { display: flex; flex-direction: column; gap: 10px; }
.yt-row-modes { display: flex; justify-content: space-between; align-items: center; background: #252525; padding: 8px; border-radius: 6px;}

.yt-switch { 
    position: relative; 
    display: flex; 
    align-items: center; 
    gap: 6px; /* Un poco menos de espacio entre cápsula y texto */
    cursor: pointer; 
    font-size: 0.8em; 
    color: #ccc; 
    min-width: 70px; /* Reducido para que el ancla quepa al final */
}
.yt-switch input { display: none; }
.yt-switch .slider { 
    width: 30px; 
    height: 16px; 
    background-color: #555; 
    border-radius: 16px; 
    position: relative; 
    transition: .2s; 
    flex-shrink: 0; /* IMPRESCINDIBLE: Evita que el texto lo estruje */
}

.yt-switch .label-text {
    width: 45px;          
    display: inline-block;
    text-align: left;
    line-height: 1.1;     /* Espaciado estrecho entre Fix y el número */
    white-space: normal;  /* Permite el salto de línea del <br> */
    font-variant-numeric: tabular-nums; 
    vertical-align: middle;
}
.yt-switch .slider:before { content: ""; position: absolute; height: 12px; width: 12px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; transition: .2s; }
.yt-switch input:checked + .slider { background-color: var(--primary); }
.yt-switch input:checked + .slider.rec { background-color: #ff4757; }
.yt-switch input:checked + .slider:before { transform: translateX(14px); }
/* Fixed (Naranja Apagado) */
.yt-switch input:checked + .slider.fixed { background-color: #c27c3e; }
.yt-switch input:disabled + .slider {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.5); /* Opcional: le quita un poco de color */
}
.yt-switch input:disabled + .slider.fixed {
    opacity: 0.3; 
    filter: grayscale(0.8);
}

/* Cuando REC está activo, el switch Fixed recupera su brillo total */
body.rec-active .yt-switch input:not(:disabled) + .slider.fixed {
    opacity: 1;
    filter: none;
}


/* El botón ancla también usa el mismo destello */
#btn-instant-start.flash-anchor-red {
    border-color: #ff0000;
    color: #ff0000;
    opacity: 1;
}

/* Botón base */
.yt-action-btn {
    background: #333;
    border: 1px solid #444;
    color: #666;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    cursor: not-allowed;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.5;
}

/* Solo se ilumina si estamos en el PULSO 1 Y el modo REC está activo */
body.rec-active.at-start #btn-instant-start {
    background: #2a2a2a;
    border-color: var(--primary);
    color: var(--primary);
    cursor: pointer;
    opacity: 1;
    box-shadow: 0 0 10px rgba(0, 210, 180, 0.2);
}

body.rec-active.at-start #btn-instant-start:hover {
    background: var(--primary);
    color: #000;
}

/* NUDGE */
.yt-nudge-row { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
#sync-status { font-size: 0.8em; color: var(--primary); font-weight: bold; }

/* NUDGE: Ahora vinculado al Modo REC */

/* 1. Base: Siempre desactivado y gris */
.nudge-group { 
    display: flex; align-items: center; gap: 5px; 
    background: #333; padding: 2px 5px; border-radius: 4px; 
    transition: opacity 0.2s; 
    opacity: 0.3; 
    pointer-events: none; 
}

/* 2. ÚNICA EXCEPCIÓN: Activado solo si hay Vídeo, el modo REC está encendido y hay mapa */
body.video-active.rec-active.has-sync-map .nudge-group { 
    opacity: 1; 
    pointer-events: all; 
}

.nudge-group button { background: #555; border: none; color: #fff; width: 24px; height: 24px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.7em; transition: transform 0.1s ease, background 0.1s ease !important; }

.nudge-group button:active {
    transform: scale(0.7) !important; /* Encogimiento inmediato */
    background: #ffffff !important;   /* Destello blanco */
    color: #000000 !important;        /* Icono negro */
    box-shadow: 0 0 15px #ffffff !important;
    transition: none !important;      /* Sin suavizado para que sea reactivo */
}

.yt-help-text { 
    font-size: 0.7em; 
    color: #666; 
    text-align: center; 
    margin-top: 5px; 
    transition: color 0.3s ease; /* Para una transición suave */
}

/* Estado dinámico cuando REC está activado */
.yt-help-text.rec-legend-active {
    color: #8e4444 !important; /* Rojo oscuro sutil */
    font-weight: bold;
}

kbd { background: #333; padding: 1px 4px; border-radius: 3px; border: 1px solid #555; }

/* --- VELO "SYNTH MODE" --- */
#synth-mode-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(40, 40, 40, 0.85); /* Gris oscuro semitransparente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #aaa;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10; /* Por encima del iframe */
    transition: opacity 0.3s ease; /* Transición suave */
}

#synth-mode-overlay i {
    color: var(--primary); /* Icono del color principal */
}

/* REGLA MÁGICA: Si el body tiene la clase .video-active, OCULTAMOS el velo */
body.video-active #synth-mode-overlay {
    opacity: 0;
    pointer-events: none; /* Para que se pueda hacer clic en el vídeo debajo */
}

/* Botón "+" estilizado */
.btn-add-custom-plus {
    font-size: 2.5em;
    color: #ffffff !important; /* Blanco puro */
    background: #444;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.variant-option .btn-add-custom-plus {
    color: #ffffff !important;
}

/* Marco para acordes creados manualmente */
.variant-option.is-manual-chord {
    border: 2px dashed var(--primary);
    background: #fff;
}

/* --- 1. ESTILOS PARA LA PARTITURA (EDITOR) --- */
/* 1. LÍNEA PUNTEADA: Creación de sesión (Manual) */
.beat-box.is-manual-chord, 
.mini-beat-box.is-manual-chord {
    outline: 2px dashed var(--primary) !important;
    outline-offset: -2px;
    border: none;
}

/* 2. RAYA NARANJA ARRIBA: Nombre "Custom" (Diferente al Diccionario) */
.beat-box.name-is-custom,
.mini-beat-box.name-is-custom {
    border-top: 3px solid #ff9f43 !important;
}

/* 3. TEXTO NARANJA: Modificado en la sesión actual */
.beat-box.edited-chord,
.mini-beat-box.edited-chord {
    color: #ff9f43 !important;
}

.beat-box.edited-chord.active-beat,
.mini-beat-box.edited-chord.active-beat {
    color: #b26f2e !important; /* Un poco más oscuro sobre el blanco */
}

/* 4. RAYA VERDE DEBAJO: Tiene digitaciones alternativas */
.beat-box.has-alternatives,
.mini-beat-box.has-alternatives {
    border-bottom: 3px solid var(--primary) !important;
}

/* --- 2. ESTILOS PARA EL SELECTOR DE VARIANTES (MODAL) --- */
.variant-option {
    transition: all 0.3s ease; /* Suaviza tanto el filtro como el borde */
}

/* Opacidad para las no elegidas */
.variant-option:not(.selected-variant) { 
    filter: grayscale(1) opacity(0.85); 
}

/* --- 3. BOTONES ESPECIALES --- */
.btn-generate-code {
    background: #27ae60 !important; /* Verde éxito para el botón del Taller */
    color: white !important;
    font-weight: bold;
    margin-top: 10px;
}

/* La tarjeta debe tener posición relativa para que el menú flote respecto a ella */
.variant-option {
    position: relative;
    overflow: visible !important; /* Permitir que el menú salga de los bordes */
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

/* Contenedor del stack */
.fingering-stack-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100; /* Por encima de otras tarjetas */
    pointer-events: none;
}

/* La flecha ocupa el borde inferior */
.fingering-arrow {
    background: var(--primary);
    color: #000;
    width: 100%;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    pointer-events: auto;
    border-radius: 0 0 6px 6px;
}

/* El menú desplegable flotante */
.fingering-dropdown {
    display: none;
    position: fixed; /* Posicionamiento respecto a la pantalla */
    width: 150px; /* Ancho fijo para consistencia */
    background: #1a1a1a;
    border: 2px solid var(--primary);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    z-index: 10000; /* Por encima de todo */
    pointer-events: auto;
}

/* Texto de digitaciones: Pequeño y Blanco */
.fingering-option {
    padding: 8px 4px;
    color: #ffffff !important;
    font-size: 17px;
    font-family: 'Roboto', sans-serif;
    border-bottom: 1px solid #333;
    text-align: center;
    cursor: pointer;
}

.fingering-option:hover {
    background: var(--primary);
    color: #000 !important;
}

/* Mostrar menú */
.variant-option.show-fingering .fingering-dropdown {
    display: block;
}

/* --- ESTILOS UNIFICADOS DEL SELECTOR DE ÁMBITO --- */
.scope-key {
    background: #222;
    color: var(--primary);
    border: 1px solid #555;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
    font-weight: bold;
    margin-right: 12px;
    box-shadow: 0 2px 0 #000;
    flex-shrink: 0;
}

.inline-qty-input {
    background: #111;
    border: 1px solid var(--primary);
    color: #fff;
    text-align: center;
    width: 45px;
    border-radius: 4px;
    font-weight: bold;
    padding: 2px;
    margin: 0 5px;
    outline: none;
}

.scope-btn {
    box-sizing: border-box; /* Corregido: Esto hace que todos midan igual */
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    background: #444;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 6px;
    font-size: 1em;
    transition: background 0.2s;
    text-align: left; /* Alineación coherente */
}

.scope-btn:hover {
    background: #555;
}

/* --- WIDGET LIBRERÍA (Estilo Sync Studio) --- */
#library-widget {
    position: fixed; 
    top: 20px; 
    left: 337px; /* Al lado opuesto del video */
    width: 300px;
    background: #1e1e1e; 
    border: 1px solid #444;
    border-radius: 8px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 5000; 
    display: none; /* Se activa por JS */
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
}

/* --- LIBRERÍA: HEADER SIMPLIFICADO Y DISTRIBUIDO --- */
.library-header {
    background: #397f99; 
    color: #fff; 
    padding: 10px 15px;
    height: 20px; /* Altura unificada con yt-header */
    display: flex; 
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.1); 
    position: relative; 
}

/* 1. Botón Nuevo (Izquierda total) */
.library-header .btn-new-project {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.1em;
    z-index: 20;
    padding: 0;
    transition: all 0.2s;
}
.library-header .btn-new-project:hover {
    color: #b0db21;
    transform: translateY(-50%) scale(1.1);
}

/* 2. Título (Centro exacto) */
.library-header-title {
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 1px;
    z-index: 10;
    white-space: nowrap;
}

/* 3. Botón Cerrar (Derecha total) */
.library-header .btn-close-widget {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.1em;
    z-index: 20;
    padding: 0;
    transition: all 0.2s;
}
.library-header .btn-close-widget:hover {
    color: #ff7675;
    transform: translateY(-50%) scale(1.1);
}

#library-body { 
    padding: 10px; 
    max-height: 400px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
}

.song-item {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Crítico para posicionar etiquetas en la esquina */
    gap: 10px;
    background: #2a2a2a;
    border: 1px solid #333;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    /* 12px arriba/lados y 25px abajo para dejar hueco a las etiquetas */
    padding: 12px 12px 25px 12px !important; 
}

.song-item:hover {
    background: #333;
    border-color: var(--primary);
}

.song-item i { color: var(--primary); font-size: 0.9em; }
.song-item .song-info { display: flex; flex-direction: column; }
.song-item .song-title { color: #eee; font-size: 0.85em; font-weight: bold; }
.song-item .song-meta { color: #666; font-size: 0.7em; }

/* Clase para ocultar temporalmente por Variant */
.variant-hidden {
    display: none !important;
}

/* Estilo para el icono PDF en la lista */
.pdf-download-link {
    color: #ff7675;
    font-size: 1.3em;
    padding: 10px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.pdf-download-link:hover {
    color: #e74c3c;
    transform: scale(1.1);
}

.pdf-download-link:active {
    transform: scale(0.9);
}

/* Botón de borrar en librería */
.btn-delete-song {
    color: #ff7675 !important;
    font-size: 1.1em;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-delete-song:hover {
    color: #d63031;
    background: rgba(231, 76, 60, 0.1);
    transform: scale(1.2);
}

/* Animación de la nube de "Enlace Copiado" */
.copy-cloud-toast {
    position: fixed;
    background: var(--primary);
    color: #000;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
    pointer-events: none;
    z-index: 10000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    animation: cloudFloatUp 1.5s ease-out forwards;
}

@keyframes cloudFloatUp {
    0% { opacity: 0; transform: translateY(0) scale(0.8); }
    20% { opacity: 1; transform: translateY(-20px) scale(1); }
    100% { opacity: 0; transform: translateY(-60px) scale(1); }
}

.btn-share-song {
    color: #00cec9;
    font-size: 1.1em;
    padding: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-share-song:hover { transform: scale(1.2); color: #00f3ee; }

/* Estilo persistente para la canción que está abierta actualmente */
.song-item.active-song {
    border-color: var(--primary) !important;
    background: rgba(0, 210, 180, 0.1);
    box-shadow: inset 0 0 10px rgba(0, 210, 180, 0.1);
}

/* Contenedor de etiquetas en la esquina inferior derecha */
.song-badges-container {
    position: absolute;
    bottom: 8px;
    right: 12px;
    display: flex;
    gap: 5px;
    align-items: center;
}

/* Ajuste de las etiquetas para que sean más compactas en la esquina */
.public-badge, .draft-badge {
    font-size: 0.55em !important;
    padding: 1px 5px !important;
    margin-left: 0 !important; /* El gap del contenedor maneja el espacio */
    border-radius: 3px !important;
    white-space: nowrap;
}

.public-badge {
    background: rgba(39, 174, 96, 0.15);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.2);
}

/* Etiqueta Pública atenuada para modo Demo */
.public-badge.restricted {
    background: rgba(150, 150, 150, 0.1) !important;
    color: #888 !important;
    border-color: rgba(150, 150, 150, 0.2) !important;
    font-weight: normal !important;
    cursor: pointer;
}

.draft-badge {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
    border: 1px solid rgba(230, 126, 34, 0.2);
}

/* NUEVAS ETIQUETAS ALUMNOS GUITAR BOX Estado restringido (Gris) */
.restricted-grey {
    filter: grayscale(1);
    opacity: 0.5;
    cursor: not-allowed !important;
}

/* Permitir que el hover funcione un poco para que el usuario sepa que puede clicar */
.restricted-grey:hover {
    background: #222 !important;
    opacity: 0.7;
}

/* Etiqueta exclusiva para Alumnos (Azul primario) */
.alumnos-badge {
    background: rgba(2, 160, 217, 0.15) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(2, 160, 217, 0.3) !important;
    font-size: 0.55em !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    white-space: nowrap;
    font-weight: 900;
}
/* fin NUEVAS ETIQUETAS ALUMNOS GUITAR BOX */

/* Contenedores de sección en la barra de herramientas */
.tool-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Cabecera arriba, botones abajo */
    align-self: stretch;            /* Estira el div al máximo alto del grupo */
    gap: 5px;                      /* Espacio entre etiqueta y botones */
}

.tools-row {
    display: flex; 
    justify-content: center; 
    gap: 25px;            /* Un poco más de separación entre secciones */
    align-items: stretch; /* Clave para que el estiramiento funcione */
    padding-bottom: 25px; /* EL AIRE ABAJO: Ajusta este valor a tu gusto */
    flex-wrap: wrap;
}

/* El grupo de botones dentro de cada sección */
.tool-section-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Línea con texto centrado */
.section-header {
    display: flex;
    align-items: center;
    width: 100%;
    color: #999;
    font-size: 0.62em;
    text-transform: lowercase;
    font-weight: 900;
    letter-spacing: 1.5px;
    opacity: 0.6;
}

.section-header::before, .section-header::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #444;
}

.section-header:not(:empty)::before { margin-right: 10px; }
.section-header:not(:empty)::after { margin-left: 10px; }

/* Grupo invisible para igualar alturas y espaciados de la center-group */
.ghost-group {
    padding: 5px 0px; /* Mismo padding que .center-group */
    display: flex;
    align-items: center;
    gap: 12px;         /* Espaciado interno entre botones */
}

/* Ajuste para que la tool-section no añada padding extra */
.tool-section-buttons {
    display: flex;
    align-items: center;
    gap: 0; /* Dejamos que los grupos manejen el aire */
}

/* --- PESTAÑAS 1 y 2 DISCRETAS --- */
.editor-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px; 
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 15px 0;
    box-sizing: border-box;
}



.editor-title-row-wrapper {
    position: sticky;
    top: 440px; /* Altura del header expandido */
    z-index: 950; /* Por debajo del menú hamburguesa pero encima de los compases */
    background: var(--bg); /* Fondo sólido para que no se trasparente nada */
    width: 100%;
    padding: 0 30px; 
    box-sizing: border-box;
    transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.header-collapsed .editor-title-row-wrapper {
    top: 100px; /* Se ajusta a la altura exacta del header compacto */
}

body.header-collapsed .editor-title-row {
    padding: 10px 0;
}

/* Título a la izquierda (máximo 50%) */
#structure-title {
    flex: 1 1 auto;      /* Crece y se encoge según necesidad */
    min-width: 0;         /* CRÍTICO: Permite que el flex-item se encoja por debajo de su contenido */
    margin: 0 !important;
    white-space: nowrap;  /* Evita que el título salte a dos líneas y rompa el alto */
    overflow: hidden;     /* Oculta lo que no quepa */
    text-overflow: ellipsis; /* Añade los puntos suspensivos (...) si el nombre es muy largo */
    font-size: 1.2rem;    /* Ajuste de tamaño base */
}

.inline-tabs .tab-btn {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #666;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    filter: none !important; /* Escapan al filtro sepia */
}

.inline-tabs .tab-btn:hover {
    color: #aaa;
    border-color: #666;
}

.inline-tabs .tab-btn.active {
    color: var(--primary);
    border-color: var(--primary);
    background: #333;
}

/* Checkbox discreto */
.inline-tabs .tab-check {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.inline-tabs .tab-check input {
    margin: 0;
    width: 14px !important;
    height: 14px !important;
    opacity: 0.4;
}

.inline-tabs .tab-btn.active .tab-check input,
.inline-tabs .tab-check input:checked {
    opacity: 1;
}

/* Asegurar que las pestañas nunca reciban el filtro naranja de maquetación */
body.layout-mode-active .inline-tabs {
    filter: none !important;
}

.view-mode-info {
    font-size: 0.75rem;          /* Fuente pequeña */
    color: var(--primary);       /* O el color exacto de tu título #b0db21 */
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 15px;          /* Espacio respecto a los botones */
    letter-spacing: 0.5px;
    opacity: 0.8;
    align-self: flex-end;      /* Lo empuja al fondo del contenedor flex */
    display: inline-block;
}

.tabs-container {
    display: flex;
    align-items: flex-end; /* Refuerza que todo el contenido busque la base */
}

/* --- MODO MAQUETACIÓN (OVERLAY filtro NARANJA) --- */

/* --- OCULTAR HERRAMIENTAS DE EDICIÓN EN PESTAÑA 2 --- */
body.layout-mode-active .measure-action-btn {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* 1. Padding para que la etiqueta de sección no choque con el título */
body.layout-mode-active .measure-row:first-of-type {
    padding-top: 25px;
}

/* 1. Eliminamos cualquier filtro global del contenedor */
body.layout-mode-active #scroll-container {
    filter: none !important;
}

/* 2. Filtramos solo el "esqueleto" y la música, NO las etiquetas */
body.layout-mode-active .measure-number,
body.layout-mode-active .beats-row {
    filter: sepia(0.8) saturate(2) hue-rotate(-20deg);
}

/* 3. Para filtrar el fondo de la celda sin filtrar las etiquetas que están dentro:
   Usamos un pseudo-elemento para el color de fondo naranja */
body.layout-mode-active .measure-cell::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #2a2a2a; /* Fondo original */
    border-radius: inherit;
    filter: sepia(0.8) saturate(2) hue-rotate(-20deg);
    z-index: 0; /* Por debajo de todo */
    pointer-events: none;
}

/* 4. Aseguramos que las etiquetas y el contenido estén por encima del fondo filtrado */
.layout-badge, 
.measure-number, 
.beats-row {
    position: relative;
    z-index: 1; 
}

/* 5. Forzamos color natural a todas las etiquetas */
.section-label,
.layout-badge {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
}

/* Permitimos interacción solo con lo que necesitemos en maquetación */
body.layout-mode-active .measure-cell {
    pointer-events: all; 
    cursor: grab;
}

/* --- UI DE CAPAS (Lado izquierdo) --- */
.layer-indicator {
    position: absolute;
    left: -45px;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.layer-num {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #444;
    color: #fff;
    cursor: pointer;
}
.layer-num.active { background: var(--primary); color: #000; font-weight: bold; }

/* --- CONTROLES DE LÍNEA (+ / -) --- */
.line-controls {
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Solo se ve en modo maquetación */
    flex-direction: column;
    gap: 5px;
}
body.layout-mode-active .line-controls { display: flex; }

.btn-line {
    background: #333;
    border: 1px solid #555;
    color: #eee;
    width: 25px;
    height: 25px;
    border-radius: 4px;
    cursor: pointer;
}

/* Estilo base para las placas de maquetación en Pestaña 2 */
.layout-badge {
    position: absolute !important;
    top: -24px !important;
    left: 50% !important; /* Centrado horizontal */
    transform: translateX(-50%) !important; /* Eje de pivote al centro */
    background: #b0db21 !important; /* Tu color lima original */
    color: #000 !important;
    font-size: 0.75em !important;
    font-weight: 900 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    white-space: nowrap;
    z-index: 110;
    filter: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

@keyframes layoutBadgePop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- MAQUETACIÓN (PESTAÑA 2): ESTRUCTURA DE FILAS --- */
body.layout-mode-active #measures-grid {
    display: block !important; /* Desactivamos el grid de 4 */
}

.measure-row {
    display: flex;
    width: 100%;
    gap: 12px;
    margin-bottom: 35px; /* Aire para etiquetas */
}

/* Las celdas en Pestaña 2 se estiran para ocupar la fila */
body.layout-mode-active .measure-cell {
    flex: 1;
    min-width: 80px;
}

/* --- BOTONES DE CONTROL DE MAQUETACIÓN --- */
/* --- BOTONES DE CONTROL DE MAQUETACIÓN (PESTAÑA 2) --- */
.layout-ctrl-btn {
    position: absolute;
    width: 22px; height: 22px;
    background: #2a2a2a;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75em;
    cursor: pointer;
    z-index: 120;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    opacity: 0; /* Ocultos por defecto */
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    border: 1px solid #444;
}

/* Hover de la celda: Mostrar botones */
.measure-cell:hover .layout-ctrl-btn {
    opacity: 1;
    pointer-events: all;
}

/* El ojo siempre rojo de base */
.btn-layout-hide { 
    top: -10px; left: -10px; 
    color: #ff7675 !important; 
}

/* --- ESTADO ACTIVO (OCULTO): ESTA REGLA DEBE IR AL FINAL --- */
.layout-ctrl-btn.is-hidden {
    opacity: 1 !important; /* Se queda visible siempre */
    pointer-events: all !important;
    background: #ff7675 !important; /* Fondo rojo */
    color: #ffffff !important;    /* Icono blanco para contrastar */
    border-color: #ffffff !important;
    box-shadow: 0 0 10px rgba(255, 118, 117, 0.5);
}

.layout-ctrl-btn:hover {
    transform: scale(1.2);
    filter: brightness(1.2);
}

.btn-layout-up { bottom: -10px; left: -10px; color: var(--primary); }
.btn-layout-down { bottom: -10px; right: -10px; color: var(--primary); }

/* --- UI DE CAPAS en MAQUETACIÓN DE PESTAÑA 2--- */
.layer-tabs-container {
    position: absolute;
    top: -18px;
    right: 10px;
    display: flex;
    gap: 3px;
    z-index: 150;
}

.layer-pill {
    background: #444;
    color: #aaa;
    font-size: 9px;
    font-weight: 900;
    padding: 1px 6px;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
    border: 1px solid #555;
    border-bottom: none;
    transition: all 0.2s;
}

.layer-pill.active {
    background: var(--primary);
    color: #000;
    border-color: var(--primary);
}

/* Color distintivo para Capa 2 */
body.layout-mode-active .measure-cell.has-multiple-layers::before {
    background: #2a353d !important; /* Tono azulado/gris para diferenciar de la Capa 1 */
    border: 1px solid rgba(0, 210, 180, 0.3);
}

/* Animación de "Drop" exitoso */
@keyframes flash-drop {
    0% { background: var(--primary); }
    100% { background: transparent; }
}
.flash-drop { animation: flash-drop 0.6s ease-out; }

/* Estilo para el arrastre */
.measure-cell[draggable="true"] {
    cursor: grab;
}
.measure-cell.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

/* --- ESTILO CAPA 1 (NARANJA INTENSO / ORO) --- */
/* Solo se aplica cuando el compás forma parte de un bloque plegado */
body.layout-mode-active .measure-cell.is-layer-1::before {
    filter: sepia(1) saturate(4) hue-rotate(-15deg) brightness(0.8) !important;
    border: 1px solid rgba(255, 193, 7, 0.4);
}

/* El azul de la Capa 2 para contraste */
body.layout-mode-active .measure-cell.is-layer-2::before {
    filter: sepia(1) saturate(3) hue-rotate(160deg) brightness(0.8) !important;
    border: 1px solid rgba(0, 210, 180, 0.4);
}

/* Opcional: que el número de compás resalte un poco más en capa 2 */
body.layout-mode-active .measure-cell.is-layer-2 .measure-number {
    color: #fff;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* ABAJO CENTRO: Botón de Loop */
/* BOTÓN LOOP: Abajo centro, sin efectos de zoom */
.btn-loop-measure {
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important; /* Anula el top de otros botones */
    color: #00d2ff !important;
    border: 1px solid #00d2ff !important;
}

/* Evitar que se mueva al hacer hover en pestaña 1 */
.measure-cell:hover .btn-loop-measure {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
}

/* MARCO DE SELECCIÓN DE LOOP (Afecta a todo el rango) */
.measure-cell.in-loop-range {
    border: 2px solid #00d2ff !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
    position: relative;
}

/* Tinte azulado sutil para el fondo del rango */
.measure-cell.in-loop-range::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 210, 255, 0.08);
    pointer-events: none;
    z-index: 1;
}

/* REC BOTONES rec y stop Estilo para el icono de grabación parpadeante */
.rec-active #btn-play-pause i.fa-circle {
    color: #ff7675 !important; /* Rojo suave */
    animation: pulse-rec 1.5s infinite;
}

@keyframes pulse-rec {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* BOTÓN TAP RECTANGULAR --- */
#floating-tap-btn {
    display: none;
    position: fixed;
    top: 452px; 
    left: 50%;
    transform: translateX(-50%);
    
    width: 90px;
    height: 50px;
    background: #2a2a2a;
    border: 1px solid #ff7675;
    color: #ff7675;
    border-radius: 8px;
    
    font-size: 1.1em;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    z-index: 2000;
    
    box-shadow: 0 0 20px 2px rgba(255, 118, 117, 0.4), 
                0 6px 15px rgba(0,0,0,0.4);
    user-select: none;
    touch-action: manipulation;
    transition: background-color 0.4s ease, transform 0.1s ease;
}

#floating-tap-btn:active {
    transform: translateX(-50%) scale(0.92);
    background: #ff7675;
    color: #000;
}

/* Efecto Flash para botones */
#floating-tap-btn.tap-flash,
#btn-play-pause.tap-flash {
    background-color: #ffffff !important;
    color: #000000 !important;
    transition: none;
}

#btn-play-pause.tap-flash {
    transform: scale(0.95) !important;
}

#floating-tap-btn.tap-flash {
    transform: translateX(-50%) scale(0.95) !important;
}

/* Bloqueo de rejilla durante grabación */
.grid-locked {
    pointer-events: none;
    cursor: not-allowed;
}

.show-tap {
    display: flex !important;
    align-items: center;
    justify-content: center;
    animation: tapPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes tapPopIn {
    from { 
        opacity: 0; 
        transform: translateX(-50%) scale(0.5); 
    }
    to { 
        opacity: 1; 
        transform: translateX(-50%) scale(1); 
    }
}

/* Opcional: Si colapsas el header, el botón debe bajar o desaparecer */
body.header-collapsed #floating-tap-btn {
    top: 106px; /* Se ajusta a la nueva altura del header compacto */
}
/* FIN estilo BOTÓN TAP RECTANGULAR */

/* --- METRÓNOMO VISUAL (Círculos) --- */
.beat-indicator-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--primary);
    opacity: 0.9;
}

.beat-indicator-dots i {
    font-size: 0.65em; /* Tamaño discreto */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Animación cuando el círculo se rellena */
.beat-indicator-dots i.fas {
    transform: scale(1.2);
    filter: drop-shadow(0 0 5px rgba(0, 210, 180, 0.4));
}
/* Fin METRÓNOMO VISUAL

/* MODAL PRO / CONVERSIÓN */
/* Fondo del modal (Overlay) */
.gb-modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Fondo oscuro con transparencia */
    z-index: 10000; /* Por encima de todo */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px); /* Desenfoque del fondo */
}

/* El contenedor del contenido */
.gb-modal-content {
    background: #1e1e1e;
    padding: 35px;
    border-radius: 15px;
    border: 2px solid var(--primary);
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
    color: #eee;
}

/* Ajuste específico para que el de AYUDA sea más ancho por la tabla */
#modal-help .gb-modal-content {
    max-width: 750px;
}

/* ESTA ES LA CLAVE: La clase que activa el JS */
.gb-modal-overlay.show-modal {
    display: flex !important;
}

/* Botón de cerrar (el texto subrayado abajo) */
.gb-modal-close-btn {
    background: transparent;
    border: none;
    color: #666;
    margin-top: 25px;
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.9em;
}

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

/* --- ESTILOS INTERNOS (Que ya tenías o pediste) --- */
.pro-actions-row { display: flex; gap: 15px; justify-content: center; margin-top: 20px; }

.help-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: #252525;
    font-size: 0.85em;
    border-radius: 8px;
    overflow: hidden;
}

.help-table th, .help-table td {
    padding: 12px;
    border-bottom: 1px solid #333;
    text-align: center;
}

.help-table th {
    color: var(--primary);
    background: #333;
    text-transform: uppercase;
}

.help-scroll-area {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px;
}

/* Scrollbar personalizada para el área de ayuda */
.help-scroll-area::-webkit-scrollbar { width: 6px; }
.help-scroll-area::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }
/* fin MODAL PRO / CONVERSIÓN */

/* --- OVERHAUL MODAL DE GUARDADO --- */
#save-project-modal .modal-content {
    background: #1e1e1e;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    color: #eee;
}

#save-project-modal .save-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas */
    gap: 20px;
    text-align: left;
}

/* Campos que ocupan todo el ancho (Título) */
#save-project-modal .full-width {
    grid-column: 1 / -1;
}

#save-project-modal .input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

#save-project-modal label {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    font-weight: 700;
}

#save-project-modal input[type="text"],
#save-project-modal select {
    width: 100%;
    background: #111;
    border: 1px solid #444;
    color: #fff;
    padding: 12px;
    border-radius: 6px;
    font-size: 0.95em;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

#save-project-modal input:focus {
    border-color: var(--primary);
}

/* Estilo específico para el modal de Diseño en Bloque */
#fixed-rows-modal .modal-content {
    background: #1e1e1e;
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    color: #eee;
}

/* Aseguramos que el input de este modal use el estilo de "número grande" */
#fixed-rows-modal .qty-input {
    border-color: var(--primary);
    background: #111;
    color: #fff;
    /* Hereda .qty-input general, solo reforzamos el color */
}

/* Efecto hover para el botón de confirmación interno */
#fixed-rows-modal .btn-confirm-modal:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
    transition: all 0.2s;
}

/* Estilo específico para el modal de Secciones */
#section-modal .modal-content {
    background: #1e1e1e;
    border: 2px solid #FFC107;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    color: #eee;
}

#section-modal .qty-input {
    border-color: #FFC107;
    background: #111;
    color: #fff;
    text-transform: none; /* Permitir minúsculas en los nombres de sección */
}

#section-modal button:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
    transition: all 0.2s;
}

/* Área de controles de Admin/Publicación */
.save-admin-panel {
    grid-column: 1 / -1;
    background: rgba(255,255,255,0.03);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #333;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.save-switch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- BOTÓN HAMBURGUESA Y DROPDOWN --- */
.user-menu-wrapper {
    position: relative;
    align-self: flex-end; /* Alinea con los botones, no con las etiquetas superiores */
    margin-bottom: 5px;   /* Ajuste fino para alinear con la center-group */
}

.btn-hamburguer {
    background: #ffffff !important; /* Fondo blanco para que resalten las barras negras */
    color: #000000 !important;   /* Barras negras */
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

.btn-hamburguer:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    top: 45px;
    background-color: #ffffff;
    min-width: 230px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 5100;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
    text-align: left;
}

.dropdown-content a, .dropdown-content .menu-welcome {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.9em;
    border-bottom: 1px solid #f5f5f5;
}

.dropdown-content .menu-welcome {
    background: #f9f9f9;
    font-weight: bold;
    color: var(--primary);
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
    color: #000;
}

.dropdown-content a i {
    margin-right: 10px;
    width: 15px;
    text-align: center;
}

.show-user-menu { display: block !important; }

/* Estilos para el Acordeón del Menú Usuario */
.submenu-header {
    background: #f1f1f1;
    color: #666;
    padding: 10px 16px;
    font-size: 0.7em;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.submenu-header:hover {
    background: #e9e9e9;
    color: var(--primary);
}

.submenu-header i {
    transition: transform 0.3s ease;
}

/* Contenido colapsable */
.submenu-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fafafa;
}

/* Cuando está abierto */
.submenu-content.open {
    max-height: 300px; /* Suficiente para los items */
}

/* Rotar flecha cuando se abre */
.submenu-header:has(+ .submenu-content.open) i {
    transform: rotate(180deg);
}

/* Ajuste de los enlaces dentro del submenú */
.submenu-content a {
    padding-left: 30px !important; /* Sangría para que se vea que es un subnivel */
    font-size: 0.85em !important;
}
/* --- Fin BOTÓN HAMBURGUESA Y DROPDOWN --- */

/* estilos SUBDIVISIONES */
.sub-tab {
    background: #444;
    color: #aaa;
    border: 1px solid #555;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 900;
    font-size: 0.9em;
    transition: all 0.2s;
}

.sub-tab:hover { background: #555; color: #fff; }

.sub-tab.active {
    background: var(--primary);
    color: #000;
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(0, 210, 180, 0.4);
}

/* Estado bloqueado para el checkbox */
#anticipation-control.enabled {
    opacity: 1 !important;
    pointer-events: all !important;
}
/* fin estilos SUBDIVISIONES */

/* estilos count y animación on off */
.mini-toggle-label {
    font-size: 0.62em !important; /* Texto muy pequeño */
    font-weight: 900;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    color: #555;
}

.mini-toggle-label input[type=checkbox] {
    width: 11px !important; /* Checkbox reducido */
    height: 11px !important;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary);
}
/* FIN estilos count y animación on off */

/* estilos hijitos beat-box SUBDIVISIONES EN REJILLA
/* Contenedor padre cuando hay subdivisiones */
.beat-box.subdivided {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    padding: 0 !important; /* El padding lo llevan los hijos */
    overflow: visible;
    background: transparent !important;
}

/* Estilo de los mini pulsos */
.mini-beat-box {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em; /* Texto más pequeño */
    font-weight: 700;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.1s;
    scroll-margin-top: 0 !important;
    background: #3d3d3d;
}

/* Caso: 2 Subdivisiones (1x2) */
.subs-2 .mini-beat-box:nth-child(1) { border-radius: 4px 0 0 4px; }
.subs-2 .mini-beat-box:nth-child(2) { border-radius: 0 4px 4px 0; }

/* Caso: 4 Subdivisiones (2x2) */
.subs-4 .mini-beat-box:nth-child(1) { border-radius: 4px 0 0 0; }
.subs-4 .mini-beat-box:nth-child(2) { border-radius: 0 4px 0 0; }
.subs-4 .mini-beat-box:nth-child(3) { border-radius: 0 0 0 4px; }
.subs-4 .mini-beat-box:nth-child(4) { border-radius: 0 0 4px 0; }

/* Caso: 3 Subdivisiones (1 arriba, 2 abajo) */
.subs-3 .mini-beat-box:nth-child(1) { border-radius: 4px 4px 0 0; }
.subs-3 .mini-beat-box:nth-child(2) { border-radius: 0 0 0 4px; }
.subs-3 .mini-beat-box:nth-child(3) { border-radius: 0 0 4px 0; }

/* Línea Vertical */
.subs-2 .mini-beat-box:nth-child(2),
.subs-4 .mini-beat-box:nth-child(2),
.subs-4 .mini-beat-box:nth-child(4),
.subs-3 .mini-beat-box:nth-child(3) {
    border-left: 1px solid rgba(0,0,0,0.2);
}

/* Línea Horizontal */
.subs-4 .mini-beat-box:nth-child(3),
.subs-4 .mini-beat-box:nth-child(4),
.subs-3 .mini-beat-box:nth-child(2),
.subs-3 .mini-beat-box:nth-child(3) {
    border-top: 1px solid rgba(0,0,0,0.2);
}

/* --- RESERVA DE ESPACIO PARA SUBDIVISIONES en variant selector--- */

/* 1. Forzamos al contenedor a medir SIEMPRE lo mismo, con o sin botones */
#setup-dashboard {
    flex-wrap: wrap !important;
    max-width: 100% !important; /* Obliga al dashboard a no ser más ancho que el modal */
    box-sizing: border-box !important;
}

/* El espacio reservado solo para los números */
#sub-tabs-container {
    display: flex !important;
    gap: 4px !important;
    width: 145px !important; 
    height: 32px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important; /* Evita que el hueco se aplaste antes de saltar de fila */
}

/* Forzar que los bloques internos se centren al apilarse */
#setup-dashboard > div {
    justify-content: center !important;
}

/* 2. Aseguramos que los botones que crea el JS midan siempre lo mismo */
.sub-tab {
    width: 32px !important;
    height: 28px !important;
    min-width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0.8em !important;
    flex-shrink: 0 !important;
}

/* 2. ESTADOS VISUALES: Sincronía de bordes y sombras */
.mini-beat-box.active-beat,
.mini-beat-box.name-is-custom,
.mini-beat-box.has-alternatives,
.mini-beat-box.is-manual-chord {
    background-clip: padding-box; /* Evita que el fondo sobresalga del radio de los bordes */
}

/* Ajuste de rejilla según cantidad */
/* Si hay 2: 2 columnas, 1 fila */
.beat-box.subs-2 { grid-template-rows: 1fr; }
/* Si hay 3 o 4: 2 columnas, 2 filas (el 2x2 que pedías) */
.beat-box.subs-3, 
.beat-box.subs-4 { grid-template-rows: 1fr 1fr; }

/* Si hay 3, el primero ocupa todo el ancho arriba para un look equilibrado 
   o simplemente dejamos el hueco según prefieras. Aquí el 3º se ajusta: */
.beat-box.subs-3 .mini-beat-box:nth-child(1) { grid-column: span 2; }

/* --- ILUMINACIÓN DE ALTA RESOLUCIÓN --- */

/* Hijito activo: Hereda el estilo de 'papá' */
.beat-box.active-beat,
.mini-beat-box.active-beat {
    transform: none !important; 
    background: transparent !important; 
    box-shadow: none !important;
    z-index: 10 !important;
    position: relative;
    border-color: transparent !important;
    color: #000 !important;
    font-weight: bold;
}

.beat-box.active-beat::before,
.mini-beat-box.active-beat::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #eee !important;
    box-shadow: 0 0 15px var(--primary);
    transform: scale(1.05); /* El crecimiento es solo visual, no de layout */
    border-radius: inherit;
    z-index: -1; 
    pointer-events: none;
}

.beat-box.active-beat:hover,
.mini-beat-box.active-beat:hover {
    color: #000 !important;
}

.active-pulse-parent {
    z-index: 100 !important;
    position: relative;
}

.beat-box.subdivided.active-pulse-parent::before {
    display: none !important;
}

.mini-beat-box {
    scroll-margin-top: 0 !important; /* El hijo nunca debe dictar la posición del scroll */
}

/* Evitar que el contenedor padre se ilumine si hay hijos activos */
.beat-box.subdivided.active-beat {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}
/* FIN estilos hijitos beat-box SUBDIVISIONES EN REJILLA

/* Estilos modos collapse excluyentes */
/* --- BOTÓN GEMELO EN HEADER (Blanco) --- */
.btn-header-collapse {
    position: absolute;
    bottom: 15px;
    right: max(30px, calc(50% - 550px));
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
    width: 40px; height: 30px;
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    z-index: 1001;
}

.btn-header-collapse:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* --- LÓGICA DE VISIBILIDAD MUTUA --- */
/* 1. Si el header está colapsado, ocultamos el botón de arriba */
body.header-collapsed .btn-header-collapse { 
    visibility: hidden !important; 
    pointer-events: none; 
}

/* 2. Si el visor está en pantalla completa, ocultamos el botón de abajo del editor */
body.visor-fullscreen .btn-collapse { 
    visibility: hidden !important; 
    pointer-events: none; 
}

/* --- MODO PANTALLA COMPLETA (PERFORMANCE) --- */
body.visor-fullscreen {
    --w-main-n: 280;
    --w-side-n: 215;
    --gap-n: 85;

    --w-main: calc(var(--w-main-n) * 1px);
    --w-side: calc(var(--w-side-n) * 1px);
    --gap: calc(var(--gap-n) * 1px);    

    /* --- FACTOR DE REDONDEO (15% del ancho) --- */
    --radius-factor: 0.15;

    /* CÁLCULOS DINÁMICOS */
    --radius-main: calc(var(--w-main) * var(--radius-factor));
    --radius-side: calc(var(--w-side) * var(--radius-factor));
    
    --badge-font-factor: 0.08;  /* El texto será el 8% del ancho de la tarjeta */
    --badge-bottom-factor: 0.05; /* El margen inferior será el 5% del ancho */

    --move-dist: calc((var(--w-main) / 2) + var(--gap) + (var(--w-side) / 2));

    /* ESCALAS DE ANIMACIÓN (Salto de lateral a central) */
    --scale-up: calc(var(--w-main-n) / var(--w-side-n));
    --scale-down: calc(var(--w-side-n) / var(--w-main-n));
}

body.visor-fullscreen #scroll-container,
body.visor-fullscreen .editor-title-row-wrapper {
    display: none !important;
}

/* 1. El contenedor padre se adapta al alto de la pantalla */
body.visor-fullscreen #fixed-header {
    /* 1. Dimensiones adaptables */
    height: 100dvh !important;

    min-height: 400px; /* Seguridad para móviles en horizontal */
    
    /* 2. Diseño heredado pero reforzado */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* 3. Limpieza visual */
    overflow: visible; 
    padding: 0 !important;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Sincronizado con el resto */
}

body.visor-fullscreen #visor-area {
    width: 100% !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
}

body.visor-fullscreen #player {
    max-height: none !important; 
    height: auto !important;
    
    /* Le damos un margen para que no toque los bordes del visor */
    padding: 20px 0; 
    
    /* Aseguramos que los elementos internos respiren */
    display: flex;
    align-items: center;
    justify-content: center;
}

body.visor-fullscreen .dropdown-content {
    top: auto !important;
    bottom: 45px;
}
/* 3. Dimensiones de tarjetas para Fullscreen (solo una vez) */
body.visor-fullscreen #current-chord {
    width: var(--w-main) !important;
    flex: 0 0 var(--w-main) !important;
    /* Forzamos la misma proporción que en modo normal */
    aspect-ratio: 13 / 17 !important; 
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.visor-fullscreen #prev-chord, 
body.visor-fullscreen #next-chord, 
body.visor-fullscreen #ghost-card, 
body.visor-fullscreen #ghost-card-prev {
    width: var(--w-side) !important;
    flex: 0 0 var(--w-side) !important;
    aspect-ratio: 13 / 17 !important;
    height: auto !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.visor-fullscreen #ghost-card, 
body.visor-fullscreen #ghost-card-prev {
    /* 1. Las sacamos del flujo flex pero las anclamos al centro exacto del #player */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    
    /* 2. Forzamos que midan lo mismo que las laterales */
    width: var(--w-side) !important;
    flex: 0 0 var(--w-side) !important;
    aspect-ratio: 13 / 17 !important;
    
    /* 3. Eliminamos márgenes que puedan venir del flex anterior */
    margin: 0 !important;
    z-index: 1 !important;
}

/* 4. Posición exacta para el Ghost de la Derecha (Debajo de Next) */
body.visor-fullscreen #ghost-card {
    /* Traducimos: "Muévete al centro (-50%) y luego la distancia de una tarjeta lateral" */
    transform: translate(calc(-50% + var(--move-dist)), -50%) !important;
}

/* 5. Posición exacta para el Ghost de la Izquierda (Debajo de Prev) */
body.visor-fullscreen #ghost-card-prev {
    transform: translate(calc(-50% - var(--move-dist)), -50%) !important;
}

/* 6. Bloqueo de las imágenes internas para que no desborden */
body.visor-fullscreen #ghost-card img,
body.visor-fullscreen #ghost-card-prev img {
    width: 100% !important;
    height: 100% !important;
    max-width: 90% !important;
    max-height: 85% !important;
    object-fit: contain !important;
}

/* --- RE-AJUSTE DE ANIMACIÓN PARA NO ROMPER EL POSICIONAMIENTO --- */

/* Cuando la transición está activa, solo permitimos que cambie la opacidad o filtros, 
   pero mantenemos el translate que acabamos de fijar para que no "vuelen" */
body.visor-fullscreen.animating-transition #ghost-card,
body.visor-fullscreen.animating-reverse #ghost-card-prev {
    display: flex !important;
    /* Mantenemos el translate de arriba para que no se muevan de su sitio */
}
/* 2. EL "RIG" DE IMAGEN (Evita que la imagen deforme la tarjeta) */
body.visor-fullscreen .card img,
body.visor-fullscreen #current-chord img,
body.visor-fullscreen #next-chord img,
body.visor-fullscreen #prev-chord img {
    /* La imagen debe ser una "esclava" del contenedor */
    width: 100% !important;
    height: 100% !important;
    
    /* Dejamos un margen del 10-15% para que respire dentro del naipe */
    max-width: 90% !important;
    max-height: 85% !important;
    
    /* CLAVE: Mantiene la proporción de la imagen sin estirarla */
    object-fit: contain !important;
    
    margin: auto !important;
    display: block !important;
}
/* Fin estilos modos collapse excluyentes */

/* AJUSTES rojo en REC*/
/* --- AJUSTES DE ILUMINACIÓN ROJO EN REC (DEFINITIVO) --- */

/* 1. Fondo rojo intenso para padre o hijo activo */
body.rec-active .beat-box.active-beat::before,
body.rec-active .mini-beat-box.active-beat::before {
    content: "" !important;
    background: #ff4757 !important; 
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.8) !important;
    opacity: 1 !important;
    display: block !important; /* Anula el display:none del modo subdivided */
    transform: scale(1.05) !important;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    border-radius: inherit;
}

/* 2. Texto negro para contraste (igual que en reproducción normal) */
body.rec-active .beat-box.active-beat,
body.rec-active .mini-beat-box.active-beat {
    color: #000000 !important; /* Texto negro solicitado */
    background: transparent !important;
    z-index: 100 !important;
    position: relative;
}

/* 3. Marco rojo individualizado */
body.rec-active .beat-box.active-beat:not(.subdivided),
body.rec-active .mini-beat-box.active-beat {
    border: 2px solid #ff7675 !important;
}

/* 4. Limpieza del contenedor padre cuando hay subdivisiones */
body.rec-active .beat-box.subdivided {
    border: 1px solid transparent !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Forzamos que el ::before del padre no actúe si hay hijos, 
   pero permitimos que el del hijo se vea */
body.rec-active .beat-box.subdivided::before {
    display: none !important; 
}
/* FIN ajustes rojo en REC*/

/* ESTILOS del nuevo VARIANT */
/* Dashboard de configuración del modal */
#setup-dashboard {
    display: flex;
    gap: 15px;
    background: #222;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #444;
    align-items: center;
    justify-content: space-between;
}

.dashboard-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 10px;
}

.dashboard-block:not(:last-child) {
    border-right: 1px solid #333;
}

.label-mini {
    font-size: 0.65em;
    font-weight: 900;
    color: #888;
}

/* Scope Pills */
.scope-horizontal-grid {
    display: flex;
    gap: 5px;
}

.scope-pill {
    background: #333;
    border: 1px solid #555;
    padding: 6px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aaa;
    transition: all 0.2s;
}

.scope-pill.active {
    background: var(--primary) !important;
    color: #000 !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 10px rgba(2, 160, 217, 0.4);
}

.scope-pill.active .pill-key {
    background: #000;
    color: var(--primary);
}

.pill-key {
    font-family: monospace;
    font-weight: 900;
    padding: 1px 4px;
    background: #444;
    border-radius: 3px;
    font-size: 0.9em;
}

.scope-pill input {
    width: 35px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    text-align: center;
    border-radius: 3px;
}

.scope-pill.active input {
    background: #fff;
    color: #000;
    border-color: #000;
}

#scope-label-display {
    font-size: 0.7em;
    color: #666;
    text-align: center;
    font-weight: bold;
}

/* Footer Actions */
.modal-footer-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

#btn-apply-final {
    background: var(--primary);
    color: #000;
    font-weight: 900;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 1px;
}

#btn-apply-final:hover { transform: scale(1.05); }

/* Rhythm buttons inside modal */
.btn-rhythm {
    background: #27ae60;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    cursor: pointer;
}
/* FIN estilos del nuevo VARIANT */

/* --- ESTILOS selects de VARIANT --- */
.harmony-edit-row select {
    background: #111;
    border: 1px solid #555;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.1em;
    outline: none;
    cursor: pointer;
}

.harmony-edit-row select:focus {
    border-color: var(--primary);
}

.select-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.harmony-edit-row optgroup {
    background: #222;
    color: var(--primary);
    font-size: 0.8em;
}
/* --- fin ESTILOS selects de VARIANT --- */

/* --- ESTILOS DEL LOADER ANIMADO --- */
/* Capa negra que cubre todo el reproductor */
#loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Fondo negro sólido */
    display: flex;
    justify-content: center;
    align-items: center;
    /* z-index alto para tapar el iframe (5) y el synth overlay (10) */
    z-index: 20; 
    transition: opacity 0.3s ease; /* Desvanecimiento suave al desaparecer */
}

/* Logo y su animación */
#loading-logo {
    width: 80px; /* Tamaño del logo, ajústalo si lo ves muy grande o pequeño */
    height: auto;
    /* Animación: nombre | duración | tipo | repetición */
    animation: spin-right 1.5s linear infinite;
}

/* Definición de la animación de giro de 360 grados */
@keyframes spin-right {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/*Estilos Modal Versiones */
/* Botón Simplificador en Librería */
.btn-simplify-song {
    color: #a29bfe !important; /* Color morado/lavanda */
    font-size: 1.1em;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-simplify-song:hover {
    color: #6c5ce7;
    transform: scale(1.2) rotate(-10deg);
}

/* --- ETIQUETAS DE TIPO DE VERSIÓN --- */
.version-tag {
    font-size: 0.6em;
    text-transform: uppercase;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.tag-pro { background: var(--primary); color: #000; }
.tag-simple { background: #a29bfe; color: #fff; }
.tag-custom { background: #fab1a0; color: #000; }

/* --- CONTENEDOR DE CADA VERSIÓN EN EL MODAL --- */
.version-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.version-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: #555;
}

.version-info {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.version-name {
    font-weight: bold;
    font-size: 0.9em;
    color: #eee;
}

.version-item-actions {
    display: flex;
    gap: 2px;
    align-items: center;
}

/* Ajuste para los iconos dentro del modal de versiones */
.version-item-actions .btn-icon-mini {
    padding: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: transform 0.1s;
}

.version-item-actions .btn-icon-mini:hover {
    transform: scale(1.2);
}
/*Fin estilos Modal Versiones */

/*estilos Tonalidad y compas en barra título */
.header-info-badges, 
.inline-tabs {
    flex: 0 0 auto;      /* Mantienen su tamaño real siempre */
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-badge {
    background: rgba(2, 160, 217, 0.1); /* Fondo suave del color primario */
    border: 1px solid var(--primary);   /* Marco color primario */
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 900;
    min-width: 65px !important;
    max-width: 65px !important;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 32px; /* Misma altura que tab-btn */
    box-sizing: border-box;
    cursor: default;
}
/*Fin estilos Tonalidad y compas en barra título */

/* ESTILOS botón quick edit mode */
/* Botón Quick Edit Activo */
#btn-quick-edit.active-qem {
    background: #2ecc71 !important;
    box-shadow: 0 0 15px #2ecc71;
    color: #000 !important;
}

/* Filtro ambiental cuando el modo está activo */
body.quick-edit-active {
    background-color: #1a2a1a !important; /* Tono verdoso muy oscuro */
    transition: background-color 0.4s ease;
}

/* Resalte de los beat-boxes en modo Quick Edit */
body.quick-edit-active .beat-box:not(.subdivided) {
    border: 1px dashed rgba(46, 204, 113, 0.3);
}

/* Input flotante para la edición rápida */
.quick-edit-input {
    position: absolute;
    width: 90%;
    height: 80%;
    background: #fff !important;
    color: #000 !important;
    border: none;
    border-radius: 4px;
    text-align: center;
    font-weight: 900;
    font-size: 1.1em;
    z-index: 100;
    outline: 2px solid #2ecc71;
}
/* Fin estilos botón quick edit mode */

/* --- Estilos botón flecha abajo en MAQUETACIÓN --- */
/* Permitimos que el área superior se vea en maquetación */
body.layout-mode-active #start-add-area {
    display: flex !important;
}

/* Pero ocultamos los botones de edición literal */
body.layout-mode-active #btn-paste-first,
body.layout-mode-active #btn-add-first,
body.layout-mode-active #btn-quick-edit {
    display: none !important;
}

/* Mostramos el nuevo botón bulk solo en maquetación */
body.layout-mode-active #btn-layout-bulk-top {
    display: flex !important;
}

/* --- BOTÓN BULK EN CELDA (Esquina Superior Derecha) --- */
.btn-layout-bulk-cell {
    top: -10px;
    right: -10px;
    background: #fab1a0 !important; /* Color salmón/naranja claro */
    color: #000 !important;
    border: 1px solid #000 !important;
    opacity: 0;
    pointer-events: none;
    z-index: 130;
}

/* Mostrar al hacer hover en la celda */
.measure-cell:hover .btn-layout-bulk-cell {
    opacity: 1;
    pointer-events: all;
}

/* Aseguramos que el botón de bajar línea se mantenga abajo a la derecha */
.btn-layout-down {
    bottom: -10px;
    right: -10px;
    color: var(--primary);
    background: #2a2a2a;
    opacity: 0;
}

.measure-cell:hover .btn-layout-down {
    opacity: 1;
    pointer-events: all;
}

/* Limpieza: Eliminamos el grupo que creamos antes */
.layout-down-group {
    display: none !important;
}
/* --- FIN Estilos botón flecha abajo en MAQUETACIÓN --- */

/* Estilos capo y tranpose */
/* --- CONTROLES DE CAPO Y TRANSPORTE --- */
.info-badge-group {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 2px;
    border: 1px solid #444;
    gap: 2px;
}

.btn-step {
    background: transparent;
    border: none;
    color: var(--primary);
    font-weight: 900;
    width: 20px;
    height: 32px;
    cursor: pointer;
    font-size: 1.2em;
}

.btn-step:hover { color: #fff; }

.highlight-key {
    border-color: #FFC107 !important;
    color: #FFC107 !important;
    background: rgba(255, 193, 7, 0.1) !important;
}

.thought-key-badge {
    background: #333;
    color: #FFC107;
    padding: 10px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 1.2em;
    border: 1px dashed #FFC107;
    width: 100%;
    text-align: center;
}

.capo-modal-control {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #111;
    padding: 5px 15px;
    border-radius: 6px;
    border: 1px solid #444;
}

.btn-sync-settings {
    margin-top: 15px;
    background: #2d3436;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 8px;
    border-radius: 6px;
    width: 100%;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
}

.enharmonic-toggle {
    cursor: pointer;
    transition: transform 0.1s;
}

.enharmonic-toggle:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.enharmonic-toggle:active {
    transform: scale(0.95);
}
/* FIN estilos capo y tranpose */

/* estilos FRETBOARD */
#fretboard-iframe {
    /* Altura calculada original */
    height: calc(100vh - 510px); 
    width: 90% !important; /* Ocupa el 90% del ancho del contenedor */
    margin: 0 auto !important;
    background: #fff;
    display: none;

    /* --- ESTÉTICA DE TARJETA "GLOW" --- */
    
    /* 1. Esquinas redondeadas (radio similar a las tarjetas grandes) */
    border-radius: 12px; 
    /* Importante: recorta el contenido para que respete el redondeo */
    overflow: hidden; 
    
    /* 2. Glow (Resplandor) en color primario */
    /* El color #397f99 convertido a RGBA con 50% de opacidad */
    box-shadow: 0 8px 30px rgba(57, 127, 153, 0.5);
    
    /* 3. Un borde muy sutil para definir el límite exacto */
    border: 1px solid rgba(57, 127, 153, 0.3);
    
    /* Pequeño margen para que el glow respire respecto a los laterales */
    width: calc(100% - 4px); /* Ajuste del ancho por el margen */
}

/* Ajuste para cuando el visor está colapsado (Header compacto) */
body.header-collapsed #fretboard-iframe {
    height: calc(100vh - 170px);
}
/* FIN estilos FRETBOARD */

/* --- LAYOUT DEL MODAL DE GUARDADO --- */
.save-modal-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- FILAS --- */
.save-modal-row {
    display: flex;
    gap: 15px; /* Espacio entre columna izquierda y derecha */
    width: 100%;
    align-items: flex-end;
}

/* --- COLUMNA IZQUIERDA (Subgrupo) --- */
.modal-subgroup {
    display: flex;
    gap: 15px; /* Espacio entre elementos internos (ej: Capo e Imán) */
    flex: 1;  
    min-width: 0; /* Permite que el contenido se encoja si es necesario */
}

/* Regla para que si hay dos inputs dentro, midan exactamente lo mismo */
.modal-subgroup > .input-group {
    flex: 1;
    min-width: 0;
}

/* --- CLASES DE UTILIDAD (Limpias) --- */
.flex-1 { 
    flex: 1; 
    min-width: 0; 
}

.flex-2 { 
    flex: 2; 
    min-width: 0; 
}
/* --- fin LAYOUT DEL MODAL DE GUARDADO --- */

/* MEDIA QUERIES (de momento para Tablets en orientación horizontal) */
/* --- MEDIA QUERIES: Ajuste de precisión para el YT Widget --- */
@media screen and (max-width: 1397px) {
    
    #yt-widget {
        width: 240px !important;
        height: auto !important;
    }

    /* 1. Altura del Header */
    .yt-header {
        height: 14px !important; /* Header más compacto */
        padding: 8px 8px !important;
    }

    /* 2. Escalar el Logo */
    .yt-header-logo img {
        height: 26px !important; 
    }

    /* 3. Escalar Texto "GB Studio" e Icono Ayuda */
    .yt-header-title-group {
        left: 48px !important; /* Ajuste por el logo más pequeño */
        gap: 4px !important;   /* Menos espacio entre texto e icono */
    }

    .yt-header-title {
        font-size: 0.78em !important;  /* Escalado del texto GB Studio */
        letter-spacing: 0.5px !important; /* Letras un poco más juntas */
    }

    .yt-header-title-group i {
        font-size: 0.75em !important;  /* Escalado del icono de ayuda */
        opacity: 0.7;
    }

    /* 4. Escalar Botones de Acción (Derecha) */
    .yt-header > div {
        gap: 8px !important; /* Espacio mínimo entre iconos de la derecha */
    }

    /* Iconos individuales: Reset Map (Undo), Reset Video (Trash) y Cerrar (X) */
    #btn-reset-map, 
    #btn-reset-video, 
    .btn-close-widget {
        font-size: 0.85em !important; 
    }

    /* --- AJUSTES DEL CUERPO (MODOS Y URL) --- */
    .yt-row-modes {
        transform: scale(0.82) !important;
        transform-origin: left center !important;
        width: 122% !important;
        margin-bottom: -8px !important;
    }

    #yt-body { padding: 8px !important; gap: 5px !important; }
    #yt-url-input { font-size: 0.75em !important; padding: 4px 8px !important; }
}



@media screen and (max-width: 926px) {
    
    :root {
        /* 1. Definimos el ancho útil restando los 30px de cada lado */
        --available-w: calc(100vw - 60px);

        /* 2. Usamos tus proporciones aplicadas a ese ancho útil */
        /* Así nos aseguramos de que el total nunca supere el contenedor */
        --w-main: calc(var(--available-w) * 0.22);  
        --w-side: calc(var(--available-w) * 0.17);  
        --gap: calc(var(--available-w) * 0.07);     /* Basado en tu 6.5vw */
    }

    body.visor-fullscreen {
        --available-w: calc(100vw - 60px);

        /* Ajuste para Fullscreen: repartimos el ancho para que encaje al 100% */
        --w-main: calc(var(--available-w) * 0.32);  
        --w-side: calc(var(--available-w) * 0.24);  
        --gap: calc(var(--available-w) * 0.10);
    }
    
    #current-chord {
        width: var(--w-main) !important;
        flex: 0 0 var(--w-main) !important;
        aspect-ratio: 13 / 17 !important;
        height: auto !important;
    }

    #prev-chord, #next-chord, #ghost-card, #ghost-card-prev {
        width: var(--w-side) !important;
        flex: 0 0 var(--w-side) !important;
        aspect-ratio: 13 / 17 !important;
        height: auto !important;
        align-self: center !important;
    }

    /* 4. EL "FIX" DEFINITIVO PARA LAS IMÁGENES */
    /* Esto evita que la imagen deforme la tarjeta si el archivo es muy grande */
    #player .card img {
        width: 100% !important;
        height: 100% !important;
        max-width: 90% !important;
        max-height: 85% !important;
        object-fit: contain !important;
        display: block !important;
        margin: auto !important;
    }
    
    #player {
        width: var(--available-w) !important;
        margin: 0 30px !important;
        max-width: none !important;
        gap: var(--gap) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* 1. Contenedor de herramientas relativo para posicionar el menú */
    .tools-row {
        /* 1. Mantenemos y aseguramos el Flexbox */
        display: flex;
        justify-content: center !important; 
        align-items: center !important; /* Cambiamos stretch por center para móviles */
        flex-wrap: nowrap !important;   /* Evitamos que el reproductor se rompa en dos filas */
        
        /* 2. Forzamos ancho total para que el 'right: 30px' sea el borde de la pantalla */
        position: relative;
        width: 100% !important;
        margin: 0 !important;
        padding-bottom: 15px !important;
        gap: 0 !important; /* El aire lo darán los márgenes absolutos de los lados */
    }

    /* 2. Ocultar secciones de Media y Herramientas */
    .tool-section:nth-child(2), /* Media */
    .tool-section:nth-child(4) { /* Herramientas */
        display: none !important;
    }

    /* 3. El menú hamburguesa "flota" a la izquierda sin ocupar espacio real */
    .user-menu-wrapper {
        position: absolute;
        left: max(30px, calc(50% - 222px)) !important;
        margin-bottom: 4.5px;
    }

    /* 4. El reproductor ocupa el centro sin estorbos */
    .tool-section:nth-child(3) {
        width: auto;
        margin: 0 auto;
    }

    /* Ajuste de escala para el reproductor en móviles si fuera necesario */
    .center-group {
        scale: 0.95;
    }

    /* El desplegable debe abrirse hacia la derecha ahora que está pegado a la izquierda */
    .dropdown-content {
        left: 0;
        right: auto;
    }
    
    /* El botón de maximizar también debe ajustarse */
    .btn-header-collapse {
        position: absolute;
        right: max(30px, calc(50% - 433px)) !important;
        bottom: 27px !important;
        left: auto;
    }
}

/* --- OPTIMIZACIÓN ESPECÍFICA: MÓVIL HORIZONTAL --- */
@media screen and (max-height: 480px) and (orientation: landscape) {
    
    /* --- ADAPTACIÓN UNIVERSAL DE MODALES PARA MÓVIL --- */
    /* Seleccionamos todos los contenedores de contenido de tus modales */
    .modal-content, 
    .gb-modal-content, 
    #variant-selector {
        /* 1. DIMENSIONES ELÁSTICAS */
        width: 95vw !important;       /* Casi todo el ancho disponible */
        max-width: 95vw !important;   /* Forzamos el límite sobre anchos fijos */
        min-width: 0 !important;      /* Rompemos el tope de seguridad de 450px */
        
        height: auto !important;
        max-height: 90vh !important;  /* NUNCA se salen por arriba o abajo */
        
        /* 2. POSICIONAMIENTO Y SCROLL */
        margin: 0 !important;
        overflow-y: auto !important;  /* Scroll interno si el contenido es largo */
        box-sizing: border-box !important;
        
        /* 3. RECORTE DE ESPACIOS INTERNOS PARA MÓVIL */
        padding: 15px !important;     /* Más apretado para que quepa más texto */
    }

    /* Ajuste específico para el modal de posturas manuales (que es flex-row) */
    #manual-chord-modal .modal-content {
        flex-direction: column !important; /* En móvil, mejor previsualización arriba/abajo */
        gap: 15px !important;
    }

    /* --- Diseño específico para TAP en Landscape --- */
    #floating-tap-btn {
        position: fixed !important;
        /* Posicionamiento horizontal dinámico (siguiendo al icono fullscreen) */
        right: calc(max(30px, calc(50% - 433px)) + 70px) !important;
        left: auto !important;
        transform: none !important;

        /* Posicionamiento vertical solicitado */
        top: 170px !important; 
        bottom: auto !important;
        
        /* Resto del diseño */
        margin: 0 !important;
        z-index: 40000 !important;
    }

    /* Ajuste para el modal de guardado (que tiene un grid interno) */
    .save-modal-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Aseguramos que los inputs no se desborden */
    .qty-input, .modal-content input, .gb-modal-content input {
        max-width: 100% !important;
    }
    /*FIN estilos para modales landscape*/

    /* 1. TU CÓDIGO ORIGINAL (NO TOCADO) */
    :root {
        --h-main: 115px;
        --h-side: 85px;
        --w-main: calc(var(--h-main) * 0.76) !important;
        --w-side: calc(var(--h-side) * 0.76) !important;
        --gap: 35px !important;
    }

    .card {
        height: var(--h-side) !important;
        width: var(--w-side) !important;
        flex: 0 0 var(--w-side) !important;
        max-height: none !important; 
        aspect-ratio: 13 / 17 !important;
    }

    #current-chord {
        height: var(--h-main) !important;
        width: var(--w-main) !important;
        flex: 0 0 var(--w-main) !important;
        aspect-ratio: 13 / 17 !important;
    }
    
    #prev-chord, #next-chord, #ghost-card, #ghost-card-prev, .card {
        height: var(--h-side) !important;
        width: var(--w-side) !important;
        flex: 0 0 var(--w-side) !important;
        aspect-ratio: 13 / 17 !important;
        align-self: center !important;
    }

    /* 3. CONTROL TOTAL DE IMÁGENES (Evita el desajuste) */
    #player .card img,
    #player #current-chord img,
    #player #next-chord img,
    #player #prev-chord img,
    #player #ghost-card img {
        width: 100% !important;
        height: 100% !important;
        max-width: 90% !important;  /* Margen interno para que no toque bordes */
        max-height: 85% !important;
        object-fit: contain !important;
        display: block !important;
        margin: auto !important;
    }

    #player {
        height: 130px !important; 
        align-items: center !important;
        overflow: visible !important;
    }

    #measure-display {
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 0.75em !important;
    }

    .beat-indicator-dots { margin-bottom: 2px !important; }
    .chord-name-text { font-size: 1em !important; }
    #fixed-header { height: 250px !important; }
    .editor-title-row-wrapper { top: 250px !important; }
    
    body:not(.visor-fullscreen) .dropdown-content {
        bottom: 45px !important; /* Sale hacia arriba del botón */
        top: auto !important;
        transform: none !important;
        left: 0 !important;
        z-index: 50000 !important;
        max-height: 180px; /* Limitamos altura para que no choque con el visor */
        overflow-y: auto;
    }
    
    body.header-collapsed:not(.visor-fullscreen) .dropdown-content {
        top: 40px !important;    /* Aparece debajo del botón */
        bottom: auto !important; /* Anula el despliegue hacia arriba */
        left: 0 !important;
        transform: none !important;
        box-shadow: 0px 8px 16px rgba(0,0,0,0.3) !important;
    }

    /* Asegura que la fila del título siga al header de 80px en landscape */
    body.header-collapsed .editor-title-row-wrapper {
        top: 100px !important; /* Ajustado al alto real del header colapsado */
    }
    
    /* Evita que el compás activo quede tapado */
    .measure-cell {
        scroll-margin-top: 320px !important;
    }
    
    /* Margen con visor cerrado en horizontal */
    body.header-collapsed .measure-cell {
        scroll-margin-top: 190px !important;
    }

    /* --- 2. EXTENSIÓN: MODO PANTALLA COMPLETA PROPORCIONAL --- */
    
    body.visor-fullscreen {
        /* Usamos VH para que al encoger la pantalla, las variables encojan solas */
        --h-main: 80vh; 
        --h-side: 60vh;
        --w-main: calc(var(--h-main) * 0.76) !important;
        --w-side: calc(var(--h-side) * 0.76) !important;
    }

    body.visor-fullscreen #fixed-header,
    body.visor-fullscreen #visor-area,
    body.visor-fullscreen #player {
        height: 100vh !important;
        min-height: 0 !important; /* DATO CLAVE: Rompe el bloqueo de los 400px */
        max-height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.visor-fullscreen #fixed-header {
        z-index: 100 !important; 
    }
  
    body.visor-fullscreen #player {
        display: flex !important;
        align-items: center !important; /* Centrado vertical absoluto */
        justify-content: center !important;
    }

    /* 3. AJUSTE DE CONTENIDO: Para que las tarjetas envuelvan la imagen */
    body.visor-fullscreen .card .img-wrap {
        position: absolute !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.visor-fullscreen .card img {
        max-height: 92% !important; /* La imagen dicta el límite interno */
        width: auto !important;
        object-fit: contain !important;
    }

    /* 1. La botonera se vuelve flotante y centrada */
    body.visor-fullscreen .tools-row {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.9) !important;
        background: rgba(30, 30, 30, 0.95) !important; /* Fondo oscuro traslúcido */
        padding: 20px 40px !important;
        border-radius: 20px !important;
        border: 1px solid var(--primary) !important;
        z-index: 40000 !important;
        flex-direction: row !important;
        box-shadow: 0 0 50px rgba(0,0,0,0.8) !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        display: flex !important;
        width: 65% !important;
    }

    /* 2. Ocultar la botonera cuando la música suena */
    body.visor-fullscreen.playback-active .tools-row {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    /* --- AJUSTE DESPLEGABLE DINÁMICO EN FULLSCREEN HORIZONTAL --- */
    body.visor-fullscreen .dropdown-content {
        bottom: auto !important;
        top: 50% !important; /* Punto de anclaje central */
        transform: translateY(-50%) !important; /* Centrado vertical real */
        left: 45px !important;
        width: 250px !important;
        
        /* SEGURIDAD: Si el menú desplegado supera la altura del móvil, permite scroll interno */
        max-height: 92vh !important; 
        overflow-y: auto !important;
        border: 1px solid var(--primary);
        background: #ffffff;
        z-index: 50000 !important;
    }
    
    /* Asegurar que se vea cuando tiene la clase activa */
    body.visor-fullscreen .show-user-menu {
        display: block !important;
    }
    
    /* Evitar que el texto de bienvenida en el acordeón sea demasiado grande */
    body.visor-fullscreen .menu-welcome {
        padding: 10px 16px !important;
        background: #fdfdfd !important;
    }
    
    /* Espaciado más cómodo para dedos en los enlaces del acordeón */
    body.visor-fullscreen .submenu-content a {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
    
    body.visor-fullscreen #fixed-header {
        z-index: auto !important; /* DATO CLAVE: Permite que los hijos escapen al z-index del padre */
    }

    /* Mantenemos el centrado que te funcionaba bien */
    #yt-widget, 
    #library-widget {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 320px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        z-index: 20000 !important; /* Por encima de cartas, pero debajo de dropdown */
    }
    /* fin pantalla completa en horizontal*/
}

/* --- AJUSTES PARA MÓVIL VERTICAL --- */
@media screen and (orientation: portrait) and (max-width: 480px) {
    
    :root {
        /* 1. Solo 10px de margen a cada lado = 20px total */
        --available-w: calc(100vw - 20px);

        /* 2. Aplicamos la proporción de "reparto total" (como tu fullscreen) */
        /* Esto hace que las tarjetas ocupen el máximo ancho posible */
        --w-main: calc(var(--available-w) * 0.32);  
        --w-side: calc(var(--available-w) * 0.24);  
        --gap: calc(var(--available-w) * 0.10);

        /* 3. Recalculamos distancias de movimiento para Portrait */
        --move-dist: calc((var(--w-main) / 2) + var(--gap) + (var(--w-side) / 2));
    }
    
    body.visor-fullscreen {
        --available-w: calc(100vw - 20px);

        /* 2. Aplicamos la proporción de "reparto total" (como tu fullscreen) */
        /* Esto hace que las tarjetas ocupen el máximo ancho posible */
        --w-main: calc(var(--available-w) * 0.32);  
        --w-side: calc(var(--available-w) * 0.24);  
        --gap: calc(var(--available-w) * 0.10);
    }
    
    /* Aplicación de dimensiones a las tarjetas */
    #current-chord, .current {
        width: var(--w-main) !important;
        flex: 0 0 var(--w-main) !important;
        aspect-ratio: 13 / 17 !important; /* Mantiene la forma siempre */
    }
    
    #prev-chord, #next-chord, #ghost-card, #ghost-card-prev, .next, .prev, .ghost {
        width: var(--w-side) !important;
        flex: 0 0 var(--w-side) !important;
        aspect-ratio: 13 / 17 !important;
    }
    
    #player .card img {
        width: 90% !important;   /* No dejes que la imagen decida su ancho */
        height: 85% !important;  /* No dejes que la imagen decida su alto */
        object-fit: contain !important; /* Evita que se estire */
        margin: auto !important;
    }
    
    #fixed-header {
        height: 540px !important;     /* La altura que buscas */
        min-height: 540px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    #player {
        width: var(--available-w) !important;
        margin: 0 10px !important; /* Margen físico de 10px */
        max-width: none !important;
        gap: var(--gap) !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    /* --- ADAPTACIÓN UNIVERSAL DE MODALES PARA MÓVIL --- */
    /* Seleccionamos todos los contenedores de contenido de tus modales */
    .modal-content, 
    .gb-modal-content, 
    #variant-selector {
        /* 1. DIMENSIONES ELÁSTICAS */
        width: 95vw !important;       /* Casi todo el ancho disponible */
        max-width: 95vw !important;   /* Forzamos el límite sobre anchos fijos */
        min-width: 0 !important;      /* Rompemos el tope de seguridad de 450px */
        
        height: auto !important;
        max-height: 90vh !important;  /* NUNCA se salen por arriba o abajo */
        
        /* 2. POSICIONAMIENTO Y SCROLL */
        margin: 0 !important;
        overflow-y: auto !important;  /* Scroll interno si el contenido es largo */
        box-sizing: border-box !important;
        
        /* 3. RECORTE DE ESPACIOS INTERNOS PARA MÓVIL */
        padding: 15px !important;     /* Más apretado para que quepa más texto */
    }

    /* Ajuste específico para el modal de posturas manuales (que es flex-row) */
    #manual-chord-modal .modal-content {
        flex-direction: column !important; /* En móvil, mejor previsualización arriba/abajo */
        gap: 15px !important;
    }

    /* Ajuste para el modal de guardado (que tiene un grid interno) */
    .save-modal-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Aseguramos que los inputs no se desborden */
    .qty-input, .modal-content input, .gb-modal-content input {
        max-width: 100% !important;
    }
    /*FIN estilos para modales portrait*/
    
    .modal-container {
        /* 1. POSICIONAMIENTO CENTRADO */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 40000 !important;
    
        /* 2. ELÁSTICO PERO CON LÍMITES (DATO CLAVE) */
        width: 95vw !important;       /* Ocupa casi todo el ancho en móviles pequeños */
        max-width: 450px !important;  /* No se hace gigante en pantallas grandes */
        
        height: auto !important;      /* Se adapta al contenido interno */
        max-height: 92vh !important;  /* NUNCA se sale por arriba o abajo */
        
        /* 3. SEGURIDAD CONTRA DESBORDAMIENTO */
        overflow-y: auto !important;  /* Si el contenido mide 1000px, crea scroll interno */
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        
        /* Suavizado de scroll para móviles */
        -webkit-overflow-scrolling: touch;
    }

    /* 1. EL CONTENEDOR PADRE: Cambiamos a columna */
    .editor-title-row {
        display: flex !important;
        flex-direction: column !important; /* Fuerza las dos filas */
        align-items: center !important;    /* Centra ambos elementos */
        gap: 12px !important;               /* Espacio entre el título y los botones */
        height: auto !important;           /* Permite que crezca verticalmente */
        width: 100% !important;
        padding: 0 0 10px 0 !important;
    }

    /* 2. FILA 1: El Título */
    #structure-title {
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        font-size: 1.2rem !important;      /* Ajusta según prefieras */
        white-space: normal !important;    /* Permite que el título largo baje si es necesario */
        padding: 0 !important;
    }

    /* 3. FILA 2: Los Tabs/Botones */
    #tab-navigation {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important; /* Centra los botones en su fila */
        flex-wrap: nowrap !important;       /* Mantiene los botones en una sola línea */
        gap: 5px !important;                /* Espacio entre botones */
    }

    /* Asegurar que el envoltorio general se adapte al nuevo alto */
    .editor-title-row-wrapper {
        position: sticky !important; /* Aseguramos que sea sticky */
        top: 540px !important;      /* DEBE coincidir con la altura del header */
        height: auto !important;
        padding: 10px 0 !important;
        z-index: 950;               /* Mantener por debajo del menú pero sobre los compases */
    }
    
    #yt-widget, 
    #library-widget {
        position: fixed !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* Ancho adaptado a vertical para que no toque los bordes */
        width: 90vw !important; 
        max-width: 380px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        z-index: 2000 !important;
    }

    body.header-collapsed #fixed-header {
        height: 120px !important;
        min-height: 120px !important;
        padding: 0 0 10px 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important; /* Empuja la tools-row (80px) abajo */
        overflow: visible !important;
    }
    
    body.header-collapsed .editor-title-row-wrapper {
        top: 120px !important;    /* Se pega al header colapsado */
    }
    
    /* Subimos los botones del cabecero y los ponemos en la capa suprema */
    .user-menu-wrapper {
        position: relative !important;
        top: -60px !important;    /* Ajusta este valor (ej: -10px, -15px) para subirlo más o menos */
        z-index: 35000 !important; /* Prioridad absoluta sobre la tools-row */
    }
    
    /* --- NUEVO: DROPDOWN CENTRADO VERTICALMENTE --- */
    body:not(.header-collapsed):not(.visor-fullscreen) .user-menu-wrapper .dropdown-content {
        bottom: auto !important;
        top: 50% !important;              /* Se ancla al centro del botón */
        transform: translateY(-50%) !important; /* Se desplaza la mitad de su propio alto hacia arriba */
        left: 0 !important;
        max-height: 80vh !important;       /* Evita que se salga de la pantalla */
        overflow-y: auto !important;
        border: 1px solid var(--primary);
        box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
    }
    
    .btn-header-collapse {
        position: relative !important;
        top: -50px !important;    /* Mantiene tu posición actual */
        z-index: 35000 !important; 
        
        /* DEFINICIÓN DE TAMAÑO */
        width: 40px !important;
        height: 30px !important;
        
        /* CENTRADO DEL ICONO */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* OPCIONAL: Si se ve raro, añade esto para que no intente encogerse */
        flex-shrink: 0 !important;
    }
    
    #floating-tap-btn {
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* Lo bajamos un poco para que no choque con el nuevo header de 180px */
        top: 552px !important; 
        margin-left: 0 !important; /* Anulamos el cálculo anterior */
    }
    
    /* estilos para dividir en 4 líneas la cabecera de variant selector */
    /* 1. Contenedor principal: eliminamos gaps laterales grandes */
    .harmony-edit-row {
        flex-direction: column !important;
        padding: 15px 5px !important;
        gap: 20px !important;
    }

    /* 2. Los Grupos (Alfa y Beta): los convertimos en columnas */
    .harmony-edit-row > div {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-right: 0 !important; /* Eliminamos el margen extra del Bloque 2 */
        gap: 10px !important;
    }

    /* 3. Los 4 Bloques Individuales: aseguramos que se centren y no se corten */
    .harmony-edit-row > div > div {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        flex: none !important;
    }

    /* 4. Ajuste fino de los selectores para que no se amontonen */
    .harmony-edit-row .select-group select {
        font-size: 1rem !important; /* Un poco más pequeño para evitar desbordamiento */
        padding: 6px !important;
    }

    /* 5. El input de texto al 80% para que sea fácil de tocar */
    #edit-chord-display {
        width: 80% !important;
        max-width: 200px;
    }
    /* FIN estilos para dividir en 4 líneas la cabecera de variant selector */

    /* Línea 1: Título */
    #structure-title { order: 1; }

    /* Línea 2: Badges (Compás y Key) */
    #song-info-badges { 
        order: 2; 
        margin: 0; 
        justify-content: center;
        width: 100%;
    }

    /* Línea 3: Tabs */
    #tab-navigation { 
        order: 3; 
        width: 100%;
        justify-content: center;
    }
     
    .measure-cell {
        scroll-margin-top: 640px !important;
    }
    
    /* Margen con visor cerrado en vertical */
    body.header-collapsed .measure-cell {
        scroll-margin-top: 300px !important;
    } 
    
    .save-modal-row {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    /* Regla para que Tonalidad+Compás y Capo+Lectura se mantengan juntos en la misma línea */
    .modal-subgroup {
        flex-direction: row !important;
        width: 100%;
    }

    .modal-subgroup .input-group {
        flex: 1;
    }

    .save-modal-row .input-group, 
    .save-modal-row .btn-sync-settings {
        width: 100% !important;
    }
}

/* --- SOLO ACTIVAR HOVER EN DISPOSITIVOS CON RATÓN --- */
@media (hover: hover) {
    .measure-cell:hover .measure-action-btn { 
        opacity: 1; 
        pointer-events: all; 
    }
    
    .measure-cell:hover { 
        background: #333; 
        border-color: #555; 
    }

    .btn-icon:hover, .btn-close-widget:hover, .layout-ctrl-btn:hover {
        filter: brightness(1.2);
        transform: scale(1.1);
    }
}

/* --- AJUSTE PARA MÓVILES (TACTIL) --- */
@media (hover: none) {
    /* Evitamos que los botones intercepten el primer toque si están ocultos */
    .measure-action-btn, .layout-ctrl-btn {
        pointer-events: none; 
        opacity: 0;
    }
}

/* fin MEDIA QUERIES*/
 
/* ELIMINAR BORRAR ESTO PARA MOSTRAR OTRA VEZ LA ANTICIPACION EN VARIANT SELECTOR */
/* 1. Ocultar el control de anticipación y su espacio */
#anticipation-control {
    display: none !important;
}

/* 2. Quitar la línea divisoria del bloque central para que no quede "huérfana" a la derecha */
#setup-dashboard > div:nth-child(2) {
    border-right: none !important;
    padding-right: 0 !important;
}

/* 3. Asegurar que el dashboard distribuya bien el espacio sobrante */
#setup-dashboard {
    justify-content: center !important;
    gap: 40px !important; /* Aumentamos el gap entre los dos bloques restantes para que respiren */
}
/* ELIMINAR BORRAR ESTO PARA MOSTRAR OTRA VEZ LA ANTICIPACION EN VARIANT SELECTOR */