/* ================================================================
   ui-polish.css — Pulido UI/UX progresivo
   ================================================================
   ⚠️  Desacoplamiento total: para revertir todos los cambios,
       basta con eliminar el <link> de este archivo en index.html.
    ================================================================ */

:root {
    /* Radios */
    --ui-radius-sm: 6px;
    --ui-radius-md: 10px;
    --ui-radius-lg: 14px;

    /* Espaciado */
    --ui-spacing-xs: 4px;
    --ui-spacing-sm: 8px;
    --ui-spacing-md: 16px;

    /* Dimensiones */
    --ui-control-height: 36px;
    --ui-play-height: 44px;

    /* Efectos */
    /* Removido --ui-glow de :root para evitar eval global (fuga de color a otros temas) */

    /* Animación */
    --ui-speed: 0.15s;
    --ui-ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ── Paso 1: Play como acción primaria ────────────────────────────
   Objetivo: #btnPlayer destaca visualmente en ≤3 segundos.
   Archivos afectados: solo este archivo.
   Riesgo: Bajo.
   ─────────────────────────────────────────────────────────────── */

.top-bar .col.playback .play-row #btnPlayer {
    /* Tamaño generoso: acción primaria visible de un vistazo */
    min-width: 52px;
    height: var(--ui-play-height) !important;
    padding: 0 18px;
    font-size: 22px;

    /* Color de acento del tema activo — respeta todos los temas */
    background: var(--uiv2-accent, #3b82f6) !important;
    border-color: transparent !important;
    color: #fff !important;

    /* Glow del acento para mayor presencia visual */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.15),
        0 4px 20px var(--uiv2-accent-glow, color-mix(in srgb, var(--uiv2-accent, #3b82f6) 45%, transparent)),
        0 8px 24px rgba(0, 0, 0, 0.5) !important;

    border-radius: var(--ui-radius-md) !important;

    /* Microanimación en hover */
    transition:
        transform var(--ui-speed) var(--ui-ease),
        box-shadow var(--ui-speed) var(--ui-ease) !important;
}

.top-bar .col.playback .play-row #btnPlayer:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.2),
        0 6px 28px color-mix(in srgb, var(--uiv2-accent, #3b82f6) 70%, transparent),
        0 10px 28px rgba(0, 0, 0, 0.55) !important;
}

.top-bar .col.playback .play-row #btnPlayer:active {
    transform: translateY(0) scale(0.97);
}


/* ── Paso 2: Separar visualmente MODO vs PLAYBACK ─────────────────
   Objetivo: dos zonas percibidas sin leer etiquetas.
   Riesgo: Bajo.
   ─────────────────────────────────────────────────────────────── */

/* Divisor visual entre entrenamiento y playback */
.top-bar .col.playback {
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin-left: var(--ui-spacing-xs) !important;
    padding-left: 12px;
}


/* ── Paso 4: Escena central: estado vacío guiado ───────────────────
   Objetivo: mostrar un hint sutil en idle.
   ─────────────────────────────────────────────────────────────── */

#synthesia {
    position: relative;
    overflow: hidden;
}

.synthesia-idle-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    opacity: 0.35 !important;
    font-size: 1.1rem !important;
    color: var(--uiv2-text, #fff) !important;
    text-align: center;
    width: 80%;
    transition: opacity var(--ui-speed) var(--ui-ease), transform var(--ui-speed) var(--ui-ease) !important;
}

.synthesia-idle-hint.hidden {
    opacity: 0 !important;
    transform: translate(-50%, -40%);
    display: none;
}


/* ── Paso 5: Labels de columna: jerarquía clara ───────────────────
   Objetivo: Labels técnicos pequeños (9px), controles legibles.
   ─────────────────────────────────────────────────────────────── */

.top-bar .col>h3 {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0.85 !important;
    /* Mayor contraste para accesibilidad */
    margin-bottom: var(--ui-spacing-sm) !important;
    font-weight: 600 !important;
}

.top-bar .col label {
    font-size: 11px !important;
    color: var(--uiv2-text-main, #fff) !important;
    letter-spacing: 0.05em !important;
    opacity: 0.95 !important;
    /* Casi blanco puro para contraste de lectura */
    display: block !important;
    text-transform: none !important;
    margin: 0 !important;
}

/* Labels dentro de filas de control se alinean horizontalmente */
.top-bar .control-row label {
    flex: 0 0 auto !important;
    min-width: 80px;
    text-align: left !important;
    display: inline-block !important;
}

/* El contenido del control debe ser legible (13-14px) */
.top-bar .col select,
.top-bar .col button,
.top-bar .custom-select-trigger {
    font-size: 13px !important;
}

/* Quitar margen superior extra en selects que vienen después de un label */
.top-bar .col label+select,
.top-bar .col label+.custom-select {
    margin-top: 2px !important;
}


/* ── Paso 3: Unificar altura de controles en top bar ────────────────
   Objetivo: selects y botones a exactamente 36px.
   Riesgo: Bajo-medio.
   ─────────────────────────────────────────────────────────────── */

.top-bar .col select,
.top-bar .col button:not(#btnPlayer):not(.toggle-switch),
.top-bar .custom-select-trigger {
    height: var(--ui-control-height) !important;
    min-height: var(--ui-control-height) !important;
    max-height: var(--ui-control-height) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* ── Paso 6: Estructura de Filas (Control Rows) ───────────────── */
.top-bar .control-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 28px !important;
    gap: 12px !important;
}

.top-bar .col {
    gap: 8px !important;
    padding: 12px 14px !important;
}


.top-bar .control-row select,
.top-bar .control-row .custom-select {
    width: 110px !important;
}

/* Alineación específica a la izquierda para el toggle como pidió el usuario */
.top-bar .tempo .control-row {
    justify-content: flex-start !important;
    gap: 16px !important;
}

/* ── Paso 7: Accesibilidad y Feedback ─────────────────────────────
   Objetivo: Focus rings modernos, feedback táctil y Toggle estético.
   ─────────────────────────────────────────────────────────────── */

/* 1. Modern Toggle Switch (Expert UI Design: High-Fidelity, Vibrant, 3D Knob) */
.top-bar .toggle-switch {
    width: 48px !important;
    height: 24px !important;
    background: var(--uiv2-toggle-off-bg, rgba(0, 0, 0, 0.3)) !important;
    border: none !important;
    border-radius: 20px !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    /* Profundidad del track */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.top-bar .toggle-switch::after {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 4px !important;
    width: 18px !important;
    height: 18px !important;
    /* Knob Premium con gradiente 3D */
    background: linear-gradient(135deg, #fefefe 0%, #d8d8d8 100%) !important;
    border-radius: 50% !important;
    /* Sombra física */
    box-shadow:
        0 1px 1px rgba(255, 255, 255, 0.4) inset,
        0 1px 3px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

/* Estado ON: Soporta aria-pressed, .active e .is-active para máxima compatibilidad */
.top-bar .toggle-switch[aria-pressed="true"],
.top-bar .toggle-switch.active,
.top-bar .toggle-switch.is-active {
    background: var(--uiv2-accent, #3b82f6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.15),
        0 4px 20px var(--uiv2-accent-glow, color-mix(in srgb, var(--uiv2-accent, #3b82f6) 45%, transparent)),
        inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

/* Knob en estado ON */
.top-bar .toggle-switch[aria-pressed="true"]::after,
.top-bar .toggle-switch.active::after,
.top-bar .toggle-switch.is-active::after {
    transform: translateX(24px) !important;
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important;
    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.3),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1) !important;
}

/* Excluir el toggle de cualquier efecto de salto global */
.top-bar .toggle-switch:hover,
.top-bar .toggle-switch:focus,
.top-bar .toggle-switch:active {
    transform: none !important;
    box-shadow: none !important;
}

/* 2. Selects & Buttons Hover Animation */
.top-bar select,
.top-bar button:not(#btnPlayer),
.top-bar .custom-select-trigger {
    transition:
        transform 0.1s var(--ui-ease),
        box-shadow var(--ui-speed) var(--ui-ease),
        background var(--ui-speed) var(--ui-ease),
        border-color var(--ui-speed) var(--ui-ease) !important;
}

.top-bar select:hover,
.top-bar button:not(#btnPlayer):not(.toggle-switch):hover,
.top-bar .custom-select-trigger:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    /* Fondo un poco más visible al pasar el mouse */
    transform: translateY(-1px);
}

/* 3. Focus & Active Feedback */
.top-bar button:focus-visible,
.top-bar select:focus-visible,
.top-bar .custom-select:focus-within .custom-select-trigger {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--uiv2-accent, #3b82f6) 40%, transparent) !important;
}

.top-bar button:active,
.top-bar .custom-select-trigger:active,
.top-bar .toggle-switch:active {
    transform: scale(0.96) !important;
}

/* Ajuste específico para selects nativos si los hay */
.top-bar .col select {
    line-height: 34px !important;
    /* height - borders */
}

/* Asegurar alineación en los contenedores .col */
.top-bar .col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.top-bar .col>*:not(h3) {
    align-self: flex-start;
}

/* Excepción para la fila de reproducción: debe estar centrada */
.top-bar .col.playback .play-row {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 4px !important;
}

.top-bar .col.playback .play-row button {
    align-self: center !important;
}

/* Ídem para "ENTRENAMIENTO" */
.top-bar .col.training>h3,
.top-bar section:first-child>h3 {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0.85 !important;
    font-weight: 600 !important;
}

/* =========================================
   ACTIVE STATE SCOPED OVERRIDES
   Keep global .is-active for top bar, but
   preserve subtle/strong styles in exercises.
   ========================================= */
#note-container .note-exercise-btn.is-active,
#chord-container .note-exercise-btn.is-active,
#staff-ear-container .note-exercise-btn.is-active,
#note-container .exercise-mode--active,
#chord-container .exercise-mode--active,
#staff-ear-container .exercise-mode--active {
    background: color-mix(in srgb, var(--uiv2-accent, #ff2a5a) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--uiv2-accent, #ff2a5a) 35%, transparent) !important;
    color: color-mix(in srgb, var(--uiv2-accent, #ff2a5a) 82%, #fff 18%) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 500 !important;
}

#chord-levels .chord-level-btn.is-active,
#chord-levels .level-btn--active,
#interval-levels .chord-level-btn.is-active,
#interval-levels .interval-level-btn.is-active,
#interval-levels .level-btn--active,
#staff-ear-levels .staff-level-btn.is-active,
#staff-ear-levels .level-btn--active,
#staff-ear-levels .chord-level-btn.is-active {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 2px solid var(--uiv2-accent, #ff2a5a) !important;
    color: color-mix(in srgb, var(--uiv2-accent, #ff2a5a) 82%, #fff 18%) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 500 !important;
}

#note-container .sequence-item.is-active,
#note-container .sequence-item--active,
#note-container .sequence-note.is-active,
#note-container .sequence-note--active,
#chord-container .sequence-item.is-active,
#chord-container .sequence-item--active,
#chord-container .sequence-note.is-active,
#chord-container .sequence-note--active {
    background: var(--uiv2-accent, #ff2a5a) !important;
    color: #fff !important;
    box-shadow: 0 0 18px color-mix(in srgb, var(--uiv2-accent, #ff2a5a) 45%, transparent) !important;
    text-shadow: none !important;
}