/* ==========================================================================
   Smuggling Charts · songs.css
   --------------------------------------------------------------------------
   Estilos exclusivos de las vistas de canciones:
     app/Views/songs/index.php · app/Views/songs/show.php
   (Las tarjetas de canción compartidas están en base.css.)
   Requiere base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reproductor Clone Hero (Bridge / chart-preview)
   -------------------------------------------------------------------------- */
.sc-bridge-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #05040a;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--sc-border);
}

.sc-bridge-stage chart-preview-player {
    display: block;
    width: 100%;
    height: 100%;
}

.sc-bridge-hint {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.5rem;
    color: var(--sc-muted);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Selectores de instrumento / dificultad del reproductor
   -------------------------------------------------------------------------- */
.sc-select-auto {
    width: auto;
}

/* --------------------------------------------------------------------------
   Selector de vista del catálogo (tarjetas / lista)
   -------------------------------------------------------------------------- */
.sc-view-toggle {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--sc-border);
    border-radius: 12px;
}

.sc-view-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--sc-muted);
    font-size: 1.02rem;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.sc-view-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.sc-view-btn.active {
    background: linear-gradient(135deg, var(--sc-accent), #a3061a);
    color: #fff;
    box-shadow: 0 8px 20px rgba(225, 29, 46, .35);
}

/* --------------------------------------------------------------------------
   Vista de lista del catálogo
   songs/index.php añade .sc-songs-view-list a <html>; aquí solo cambia la
   disposición de las MISMAS tarjetas (sin duplicar contenido).
   -------------------------------------------------------------------------- */
html.sc-songs-view-list .sc-songs [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

html.sc-songs-view-list .sc-songs .row {
    --bs-gutter-y: .8rem;
}

html.sc-songs-view-list .sc-card {
    flex-direction: row !important;
}

html.sc-songs-view-list .sc-card:hover {
    transform: none;
}

html.sc-songs-view-list .sc-card-cover {
    flex: 0 0 auto;
    width: 108px;
}

html.sc-songs-view-list .sc-cover-play {
    width: 34px;
    height: 34px;
    right: .45rem;
    bottom: .45rem;
    font-size: .78rem;
}

html.sc-songs-view-list .sc-card-body {
    flex-direction: row !important;
    align-items: center;
    gap: .5rem 1.1rem;
    padding: .85rem 1.1rem !important;
}

html.sc-songs-view-list .sc-card-titlebox {
    flex: 1 1 auto;
    min-width: 0;
}

html.sc-songs-view-list .sc-card-titlebox .small {
    margin-bottom: 0 !important;
}

html.sc-songs-view-list .sc-diff-row {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    margin-bottom: 0 !important;
}

html.sc-songs-view-list .sc-diff-chip {
    padding: .3rem .45rem;
}

/* En lista los chips muestran solo el ícono; el tooltip conserva el nombre. */
html.sc-songs-view-list .sc-diff-chip .d-sm-inline {
    display: none !important;
}

html.sc-songs-view-list .sc-card-meta {
    flex: 0 0 auto;
    margin-top: 0 !important;
    gap: .9rem;
}

@media (max-width: 1199.98px) {
    html.sc-songs-view-list .sc-card-meta small {
        display: none;
    }
}

@media (max-width: 767.98px) {
    html.sc-songs-view-list .sc-card-cover {
        width: 88px;
    }

    html.sc-songs-view-list .sc-diff-row {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    html.sc-songs-view-list .sc-card-cover {
        width: 74px;
    }

    html.sc-songs-view-list .sc-card-body {
        padding: .7rem .85rem !important;
    }
}