/* ==========================================================================
   Multitrack — vista de canción (reproductor) y editor (carga de pistas)
   Solo tokens del design system (variables.css).
   ========================================================================== */

/* ───────────── Vista de canción ───────────── */

.song-multitrack-section:empty {
    display: none;
}

/* El atributo hidden debe ganar a los display de abajo y a .btn */
.mt-vista [hidden],
.song-editor-multitrack [hidden],
.mt-gestor [hidden] {
    display: none;
}

.song-multitrack-section {
    margin-top: var(--space-4);
}

.mt-vista {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-tertiary);
    overflow: hidden;
}

.mt-cabecera {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mt-desplegar {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: transparent;
    border: none;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

@media (hover: hover) {
    .mt-desplegar:hover {
        background: var(--bg-secondary);
    }
}

.mt-chevron {
    width: 16px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    transition: transform var(--transition-fast);
}

.mt-vista.abierto .mt-chevron {
    transform: rotate(90deg);
}

.mt-titulo {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.mt-resumen {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-play-mini {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: var(--space-2);
    border-radius: var(--border-radius-full);
    border: 1px solid var(--border-color-hover);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--text-xs);
}

.mt-panel {
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

/* Transporte */

.mt-transporte {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.mt-play {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--border-radius-full);
    border: 2px solid var(--text-primary);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mt-play .fa-play {
    margin-left: 3px;
}

.mt-play:disabled,
.mt-play-mini:disabled {
    opacity: 0.4;
    cursor: default;
}

.mt-reloj {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.mt-reloj b {
    color: var(--text-primary);
    font-weight: 600;
}

.mt-controles {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.mt-maestro {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.mt-maestro input {
    width: 90px;
}

.mt-panel input[type="range"] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

.mt-interruptor {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
}

.mt-interruptor input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.mt-interruptor-pista {
    width: 32px;
    height: 18px;
    border-radius: var(--border-radius-full);
    background: var(--surface-4);
    position: relative;
    transition: background var(--transition-fast);
}

.mt-interruptor-pista::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: var(--border-radius-full);
    background: var(--text-primary);
    transition: transform var(--transition-fast);
}

.mt-interruptor input:checked + .mt-interruptor-pista {
    background: var(--color-primary);
}

.mt-interruptor input:checked + .mt-interruptor-pista::after {
    transform: translateX(14px);
}

.mt-interruptor input:focus-visible + .mt-interruptor-pista {
    outline: 2px solid var(--border-color-focus);
    outline-offset: 2px;
}

.mt-controles .mt-tono {
    width: auto;
    height: 34px;
    padding: 0 var(--space-3);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--text-xs);
    max-width: 200px;
}

/* Estado de carga / preparación de tono */

.mt-estado {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mt-estado-barra {
    height: 4px;
    border-radius: var(--border-radius-full);
    background: var(--surface-3);
    overflow: hidden;
    position: relative;
}

.mt-estado-barra span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-primary);
    transition: width 0.2s linear;
}

.mt-estado-barra.indeterminada span {
    width: 30%;
    animation: mt-indeterminada 1.2s ease-in-out infinite;
}

@keyframes mt-indeterminada {
    from { transform: translateX(-100%); }
    to { transform: translateX(340%); }
}

.mt-estado-texto {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Pistas */

.mt-pistas {
    --mt-progreso: 0;
    position: relative;
    margin-top: var(--space-4);
    user-select: none;
    -webkit-user-select: none;
}

.mt-cabezal {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--text-secondary);
    pointer-events: none;
    z-index: 2;
    will-change: transform;
}

.mt-cabezal-tiempo {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    background: var(--surface-5);
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mt-grupo {
    padding-top: var(--space-3);
}

.mt-grupo + .mt-grupo {
    margin-top: var(--space-2);
    border-top: 1px solid var(--border-color);
}

.mt-grupo-titulo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: var(--space-2) 0;
}

.mt-grupo-titulo i {
    color: var(--color-info);
    width: 16px;
    text-align: center;
}

.mt-pista {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px 32px;
    grid-template-areas:
        "cabeza cabeza cabeza"
        "onda mute solo";
    align-items: center;
    column-gap: var(--space-2);
    row-gap: var(--space-1);
    padding: var(--space-2) 0;
}

.mt-pista-cabeza {
    grid-area: cabeza;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.mt-pista-nombre {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-vol {
    width: 110px;
    flex-shrink: 0;
}

.mt-onda {
    grid-area: onda;
    position: relative;
    height: 40px;
    cursor: pointer;
    touch-action: none;
}

.mt-onda canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

.mt-onda-base {
    color: var(--text-muted);
    opacity: 0.55;
}

.mt-onda-sonada {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--mt-progreso) * 100%);
    overflow: hidden;
    pointer-events: none;
}

.mt-onda-activa {
    color: var(--text-primary);
}

.mt-pista.apagada .mt-onda,
.mt-pista.apagada .mt-pista-nombre {
    opacity: 0.4;
}

.mt-boton {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-full);
    border: 1px solid var(--border-color-hover);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.mt-boton[data-accion="mute"] {
    grid-area: mute;
}

.mt-boton-solo {
    grid-area: solo;
}

.mt-boton[data-accion="mute"].activo {
    background: var(--color-error);
    border-color: var(--color-error);
    color: var(--text-inverse);
}

.mt-boton-solo.activo {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--text-inverse);
}

@media (hover: hover) {
    .mt-boton:not(.activo):hover {
        border-color: var(--text-secondary);
        color: var(--text-primary);
    }
}

/* Modo compacto: una línea por pista */

.mt-pistas.compacto .mt-pista {
    grid-template-columns: 120px minmax(0, 1fr) 28px 28px;
    grid-template-areas: "cabeza onda mute solo";
    padding: 3px 0;
}

.mt-pistas.compacto .mt-vol {
    display: none;
}

.mt-pistas.compacto .mt-pista-nombre {
    font-size: var(--text-xs);
}

.mt-pistas.compacto .mt-onda {
    height: 24px;
}

.mt-pistas.compacto .mt-boton {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.mt-pistas.compacto .mt-grupo {
    padding-top: var(--space-1);
}

.mt-pistas.compacto .mt-grupo-titulo {
    margin: var(--space-1) 0;
}

@media (max-width: 640px) {
    .mt-panel {
        padding: var(--space-3);
    }

    .mt-controles {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }

    .mt-maestro input {
        width: 70px;
    }

    .mt-vol {
        width: 80px;
    }

    .mt-pistas.compacto .mt-pista {
        grid-template-columns: 84px minmax(0, 1fr) 28px 28px;
    }
}

/* ───────────── Editor: resumen en la barra lateral ───────────── */

/* La barra lateral ordena con `order` (Tonos por Ministro = 1, Etiquetas = 2,
   Referencias = 3). Mismo order que Tonos y después en el DOM → justo debajo. */
.song-editor-info-grid .song-editor-multitrack {
    order: 1;
    grid-column: 1 / -1;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 12px;
}

.mt-ed-resumen-caja {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.mt-ed-resumen-caja:empty {
    display: none;
}

.mt-ed-resumen-linea {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.mt-ed-grupos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.mt-ed-grupos b {
    color: var(--text-secondary);
    font-weight: 600;
}

.mt-ed-vacio {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--line-height-relaxed);
}

.mt-ed-administrar {
    width: 100%;
    justify-content: center;
}

.mt-ed-zona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    border: 1px dashed var(--border-color-hover);
    border-radius: var(--border-radius-md);
    text-align: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.mt-ed-zona > i {
    font-size: var(--font-size-xl);
    color: var(--text-muted);
}

.mt-ed-zona strong {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    line-height: var(--line-height-snug);
}

.mt-ed-zona-botones {
    display: flex;
    gap: var(--space-1);
}

.mt-ed-zona.compacta {
    padding: var(--space-3);
}

.mt-ed-zona.compacta > i {
    font-size: var(--font-size-base);
}

.mt-ed-zona.mt-arrastrando,
.mt-ed-zona:focus-visible {
    border-color: var(--color-primary);
    background: var(--bg-tertiary);
    outline: none;
}

@media (hover: hover) {
    .mt-ed-zona:hover {
        border-color: var(--color-primary);
    }
}

.mt-ed-estado {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.mt-ed-estado.error {
    color: var(--color-error);
}

.mt-ed-estado.aviso {
    color: var(--color-warning);
}

.mt-ed-estado .loading-spinner-sm {
    width: 12px;
    height: 12px;
}

/* ───────────── Panel "Administrar pistas" ───────────── */

.mt-gestor-fondo {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--bg-overlay);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.mt-gestor-fondo.visible {
    opacity: 1;
}

.mt-gestor {
    width: 100%;
    max-width: 1100px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--glass-body-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    position: relative;
}

.mt-gestor.mt-arrastrando::after {
    content: 'Suelta aquí para agregar las pistas';
    position: absolute;
    inset: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-primary);
    border-radius: var(--border-radius-lg);
    background: var(--bg-overlay);
    color: var(--text-primary);
    font-weight: 600;
    pointer-events: none;
    z-index: 3;
}

.mt-gestor-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-2);
}

.mt-gestor-titulo h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.mt-gestor-sub {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.mt-gestor-acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.mt-gestor-cerrar {
    width: 34px;
    height: 34px;
    margin-left: var(--space-2);
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    cursor: pointer;
}

@media (hover: hover) {
    .mt-gestor-cerrar:hover {
        background: var(--surface-3);
        color: var(--text-primary);
    }
}

.mt-gestor-ayuda {
    margin: 0;
    padding: 0 var(--space-5) var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.mt-gestor-cuerpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--space-5) var(--space-4);
    container-type: inline-size;
}

.mt-ed-grupo-n {
    margin-left: var(--space-1);
    color: var(--text-disabled);
}

.mt-ed-grupo {
    padding-bottom: var(--space-2);
}

.mt-ed-grupo + .mt-ed-grupo {
    border-top: 1px solid var(--border-color);
}

/* Fila: una línea en pantallas anchas */
.mt-ed-fila {
    display: grid;
    grid-template-columns: 26px minmax(160px, 1fr) 190px 120px auto 32px;
    grid-template-areas:
        "orden nombre categoria info checks borrar"
        ". avisos avisos avisos avisos avisos";
    align-items: center;
    column-gap: var(--space-3);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--border-radius-md);
}

@media (hover: hover) {
    .mt-ed-fila:hover {
        background: var(--surface-1);
    }
}

.mt-ed-orden { grid-area: orden; display: flex; flex-direction: column; }
.mt-ed-nombre { grid-area: nombre; }
.mt-ed-categoria { grid-area: categoria; }
.mt-ed-info { grid-area: info; }
.mt-ed-checks { grid-area: checks; display: flex; gap: var(--space-4); }
.mt-ed-borrar { grid-area: borrar; }

.mt-ed-avisos {
    grid-area: avisos;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--space-1);
}

.mt-ed-flecha,
.mt-ed-borrar {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
}

.mt-ed-flecha {
    width: 24px;
    height: 16px;
    font-size: 10px;
}

.mt-ed-flecha:disabled {
    opacity: 0.25;
    cursor: default;
}

.mt-ed-borrar {
    width: 32px;
    height: 32px;
    font-size: var(--text-xs);
}

@media (hover: hover) {
    .mt-ed-flecha:not(:disabled):hover {
        color: var(--text-primary);
        background: var(--surface-3);
    }

    .mt-ed-borrar:hover {
        color: var(--color-error);
        background: var(--surface-3);
    }
}

.mt-gestor .mt-ed-nombre,
.mt-gestor .mt-ed-categoria {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 var(--space-3);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.mt-gestor .mt-ed-categoria {
    font-size: var(--text-xs);
}

.mt-gestor .mt-ed-nombre:focus,
.mt-gestor .mt-ed-categoria:focus {
    border-color: var(--border-color-focus);
    outline: none;
}

.mt-ed-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
}

.mt-ed-check input {
    accent-color: var(--color-primary);
    margin: 0;
}

/* Panel angosto (celular): la fila se apila */
@container (max-width: 720px) {
    .mt-ed-fila {
        grid-template-columns: 26px minmax(0, 1fr) 32px;
        grid-template-areas:
            "orden nombre borrar"
            "orden info info"
            "orden categoria categoria"
            "orden checks checks"
            "orden avisos avisos";
        row-gap: var(--space-1);
        padding: var(--space-3) 0;
    }

    .mt-ed-fila + .mt-ed-fila {
        border-top: 1px solid var(--edge-soft);
    }
}

@media (max-width: 640px) {
    .mt-gestor-fondo {
        padding: 0;
        align-items: stretch;
    }

    .mt-gestor {
        max-width: none;
        border-radius: 0;
    }

    .mt-gestor-cabecera,
    .mt-gestor-ayuda,
    .mt-gestor-cuerpo {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .mt-gestor-acciones {
        width: 100%;
    }

    .mt-gestor-cerrar {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
    }
}

/* ───────────── Panel flotante de subidas ───────────── */

.mt-subidas {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    width: 340px;
    z-index: var(--z-popover);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mt-subidas[hidden] {
    display: none;
}

.mt-sub-lote {
    background: var(--glass-body-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.mt-sub-cabecera {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
}

.mt-sub-cabecera .loading-spinner-sm {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.mt-sub-ok {
    color: var(--color-success);
}

.mt-sub-mal {
    color: var(--color-error);
}

.mt-sub-titulos {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mt-sub-titulo {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.mt-sub-cancion {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt-sub-icono {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--text-xs);
}

@media (hover: hover) {
    .mt-sub-icono:hover {
        background: var(--surface-3);
        color: var(--text-primary);
    }
}

.mt-sub-cuerpo {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-3);
}

.mt-sub-barra {
    height: 6px;
    border-radius: var(--border-radius-full);
    background: var(--surface-3);
    overflow: hidden;
}

.mt-sub-barra span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--color-primary);
    transition: width 0.25s linear;
}

.mt-sub-linea {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.mt-sub-archivo {
    font-size: var(--text-xs);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.mt-sub-errores {
    margin: 0;
    padding-left: var(--space-4);
    max-height: 120px;
    overflow-y: auto;
    font-size: var(--text-xs);
    color: var(--color-error);
}

.mt-sub-botones {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-1);
}

@media (max-width: 820px) {
    .mt-subidas {
        left: var(--space-3);
        right: var(--space-3);
        width: auto;
        bottom: calc(var(--mobile-nav-height) + var(--safe-area-bottom, 0px) + var(--space-4));
    }
}

.mt-girando {
    color: var(--color-primary);
    flex-shrink: 0;
}

.mt-sub-botones .mt-sub-cancelar {
    color: var(--color-error);
}