/* =========================================
   1. BANNER DE ALERTA Y GLOBALES
========================================= */
.banner-alerta {
    background-color: #ff4d4f; /* Un rojo/naranja suave de error */
    color: white;
    text-align: center;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    z-index: 9999; /* Para que quede por encima de todo */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.btn-cerrar-banner {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.app-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    min-height: calc(100vh - 80px);
    margin: 0 auto;
    padding: 2rem;
    box-sizing: border-box;
}

/* =========================================
   2. TOP BAR Y SWITCH
========================================= */
.top-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 3rem;
}
.filter-label { font-size: 1.2rem; font-weight: 500; }
.switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
.switch input:checked + .slider { background-color: #ef5466; /* Un toque de color activo */ }
.switch input:checked + .slider:before { transform: translateX(24px); background-color: #fff; }

/* =========================================
   3. LAYOUT PRINCIPAL (LA TARJETA SWIPE)
========================================= */
.player-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.swipe-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4rem; 
    width: 100%;
}

.cover-wrapper img {
    width: 320px;
    height: 320px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    flex-shrink: 0; /* Evita que la imagen se haga pequeña */
}

.right-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3rem; 
}

/* =========================================
   4. BLOQUEO DE TEXTOS (EL FIX DEL SALTO)
========================================= */
.track-info { 
    display: flex; 
    flex-direction: column; 
    gap: 15px;
    /* --- EL CANDADO DE TAMAÑO --- */
    width: 320px;  
    height: 320px; /* Misma altura que la imagen para simetría */
    justify-content: flex-start; 
    overflow: hidden; 
}

.track-info h1#title { 
    margin: 0; 
    font-size: 1.8rem; 
    font-weight: 800; 
    line-height: 1.2;
    height: calc(1.8rem * 1.2 * 2); /* Obliga a que sean 2 líneas siempre */
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-info h2#artist { 
    margin: 0; 
    font-size: 1.2rem; 
    font-weight: 400; 
    color: var(--text-muted, #aaa); 
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    height: 1.5rem; /* Obliga a que sea 1 línea siempre */
}

/* Etiquetas y Rating */
.tags-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.tag { font-size: 0.9rem; font-weight: bold; color: var(--text-main, #fff); }

.rating-container { display: flex; flex-direction: column; gap: 5px; margin-top: auto; /* Lo empuja al fondo si hay espacio libre */ }
.stars { font-size: 1.8rem; display: flex; gap: 5px; }
.star.filled { color: var(--accent-purple, #9b59b6); }
.star.half-filled { color: var(--accent-purple, #9b59b6); opacity: 0.5; }
.star.empty { color: #444; }
.rating-text { font-size: 0.9rem; color: var(--text-muted, #aaa); }

/* =========================================
   5. CONTROLES LATERALES
========================================= */
.nav-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* --- BLOQUEO DE TAMAÑO --- */
    height: 320px; /* Se ancla a la misma altura que la info y la imagen */
}

.chevron-btn { background: none; border: none; cursor: pointer; padding: 10px; transition: transform 0.2s; }
.chevron-btn:hover { transform: scale(1.2); }

.btn-extra { background: transparent; border: none; color: white; font-size: 24px; cursor: pointer; transition: transform 0.2s, color 0.2s; }
.btn-extra:active { transform: scale(0.85); }
.btn-extra.liked { color: #6138a8; }

.btn-deezer { color: #6138a8; text-decoration: none; }

/* =========================================
   6. MODAL DE FILTROS (DISEÑO HORIZONTAL)
========================================= */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex; justify-content: center; align-items: center;
    z-index: 99999; /* Por encima de cualquier menú o header */
    backdrop-filter: blur(8px);
}

.modal-content {
    background-color: #1a1a1a;
    color: #ffffff;
    width: 95%; max-width: 850px; /* Ancho para layout horizontal */
    border-radius: 15px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
    display: flex; flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; border-bottom: 1px solid #333;
}
.modal-header h3 { margin: 0; font-size: 1.3rem; }
.btn-cerrar { background: none; border: none; color: #fff; font-size: 1.8rem; cursor: pointer; }

/* Grid del cuerpo del modal */
.modal-body {
    padding: 25px;
    max-height: 70vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    gap: 20px 40px;
}

.filtro-seccion:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2; }
.filtro-seccion:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 3; }
.filtro-seccion:nth-child(3) {
    grid-column: 2 / 3; grid-row: 1 / 3;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    align-content: start;
    gap: 15px;
}
.filtro-seccion:nth-child(3) h4 { grid-column: 1 / -1; margin-bottom: 5px; }

.filtro-seccion h4 { margin: 0 0 10px 0; font-size: 1rem; color: #ccc; }
.badge-proximamente { background: #444; font-size: 10px; padding: 3px 6px; border-radius: 5px; color: #aaa; margin-left: 10px; }

.filtro-input { width: 100%; padding: 10px; background: #333; color: white; border: 1px solid #444; border-radius: 8px; font-size: 1rem; }

.genero-grupo { background: #222; padding: 12px; border-radius: 10px; }
.genero-padre { display: block; margin-bottom: 8px; cursor: pointer; border-bottom: 1px solid #333; padding-bottom: 5px; }
.genero-hijos { display: flex; flex-direction: column; gap: 8px; }
.genero-hijos label { cursor: pointer; font-size: 0.9rem; color: #bbb; display: flex; align-items: center; gap: 5px; }

.modal-footer {
    display: flex; justify-content: flex-end; gap: 15px;
    padding: 15px 20px; border-top: 1px solid #333; background: #141414;
}
.btn-secundario { background: transparent; color: #fff; border: 1px solid #555; padding: 10px 20px; border-radius: 25px; cursor: pointer; transition: 0.2s;}
.btn-secundario:hover { background: #333; }
.btn-primario { background: #6138a8; color: #fff; border: none; padding: 10px 25px; border-radius: 25px; cursor: pointer; font-weight: bold; transition: 0.2s;}
.btn-primario:hover { background: #6138a8; }

@media (max-width: 768px) {
    .modal-body { grid-template-columns: 1fr; }
    .filtro-seccion:nth-child(3) { grid-column: 1 / 2; grid-row: 3 / 4; }
    .swipe-card { flex-direction: column; gap: 2rem; }
    .right-content { flex-direction: column; gap: 2rem; }
    .nav-controls { height: auto; flex-direction: row; width: 100%; justify-content: center; gap: 30px; }
    .track-info { height: auto; align-items: center; text-align: center; }
}

/* =========================================
   7. CLASE OCULTA (VITAL PARA EL JS)
========================================= */
.hidden {
    display: none !important;
}

/* =========================================
   8. AJUSTES DE ESPACIADO Y CENTRADO SWIPE
========================================= */
.page-swipe {
    --swipe-gap-bloques: 3rem;
}

.page-swipe .app-container {
    min-height: calc(100vh - 180px);
    justify-content: space-between;
    padding-bottom: var(--swipe-gap-bloques);
}

.page-swipe .top-bar {
    margin-bottom: var(--swipe-gap-bloques);
}

.page-swipe .player-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--swipe-gap-bloques);
}

.page-swipe .footer-xylo {
    width: 100%;
    margin-top: 0;
    padding-top: 0.25rem;
}

@media (max-width: 1024px) {
    body.page-swipe {
        height: 100vh;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
    }

    .page-swipe .app-container {
        min-height: calc(100dvh - 200px);
        padding: 1rem;
        padding-bottom: 1.25rem;
    }

    .page-swipe .top-bar {
        margin-bottom: 1.25rem;
    }

    .page-swipe .player-container {
        margin-bottom: 1.25rem;
        min-height: 0;
    }

    .page-swipe #swipeArea {
        touch-action: none;
    }

    .app-container {
        padding: 1.25rem;
    }

    .swipe-card {
        gap: 2rem;
    }

    .cover-wrapper img {
        width: clamp(240px, 38vw, 300px);
        height: clamp(240px, 38vw, 300px);
    }

    .track-info {
        width: clamp(240px, 38vw, 300px);
        height: auto;
        min-height: clamp(240px, 38vw, 300px);
    }

    .right-content {
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .page-swipe {
        --swipe-gap-bloques: 1.25rem;
    }

    .page-swipe .app-container {
        min-height: calc(100dvh - 170px);
    }

    .page-swipe .player-container {
        width: 100%;
    }

    .app-container {
        padding: 1rem;
    }

    .top-bar {
        margin-bottom: 1.25rem;
    }

    .swipe-card {
        gap: 1.5rem;
    }

    .track-info {
        width: 100%;
        min-height: 0;
    }

    .track-info h1#title {
        font-size: 1.45rem;
        height: auto;
    }

    .track-info h2#artist {
        white-space: normal;
        height: auto;
    }

    .tags-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: calc(100% - 1rem);
    }

    .modal-body {
        padding: 15px;
        gap: 14px;
    }

    .modal-footer {
        flex-wrap: wrap;
    }
}