/*
   Ouvir Música - Mobile & Tablet CSS Optimization
   Target: Screens < 1024px (Tablets + Mobile)
*/

@media (max-width: 1024px) {

    /* --- 1. Global & Resets --- */
    .container {
        padding: 0 20px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    body {
        padding-bottom: 160px;
        overflow-x: hidden;
    }

    /* --- 2. header-inner Overrides --- */
    .site-header .container {
        padding: 10px 20px !important;
    }

    /* Desktop Nav Hiding & Mobile Menu Logic (Keep for all < 1024px) */
    .nav-menu:not(.active) {
        display: none !important;
    }

    #mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        z-index: 1001;
    }

    #mobile-menu-btn i {
        font-size: 24px !important;
    }

    .header-inner {
        gap: 15px !important;
    }

    .header-left {
        width: auto !important;
        display: flex !important;
        gap: 15px !important;
        align-items: center !important;
    }

    .logo {
        margin: 0 !important;
    }

    .header-right {
        width: auto !important;
        margin-top: 0 !important;
        order: unset !important;
    }

    /* --- 3. Mobile Navigation Menu --- */
    .nav-menu.active {
        display: flex !important;
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100vh;
        background: var(--bg-surface) !important;
        flex-direction: column !important;
        padding-top: 80px !important;
        z-index: 999;
        overflow-y: auto;
        gap: 0 !important;
    }

    .nav-link {
        font-size: 22px !important;
        padding: 20px 0 !important;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--border-subtle);
    }

    /* --- 4. Grid & Card Uniformity --- */
    /* Fix "Recién Llegados" and Artist Cards sizes */
    .grid-cards {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        /* Adaptive columns */
        gap: 15px !important;
    }

    /* FIX: Allow JS to hide grid on mobile (overrides the !important above) */
    .grid-cards[style*="display: none"],
    .grid-cards[style*="display:none"] {
        display: none !important;
    }

    .media-card {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .media-cover {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        /* Force Square */
        position: relative !important;
        overflow: hidden !important;
        border-radius: 8px !important;
    }

    .media-cover img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* Crop to fit */
    }

    /* --- 5. Hero Adjustments --- */
    .hero-full-wrapper section.container {
        flex-direction: column !important;
        text-align: center;
        align-items: center !important;
    }

    .hero-full-wrapper div[style*="display: flex"] {
        justify-content: center !important;
    }

    /* --- 6. Track List (Tablet Optimization 768px - 1024px) - FIXED --- */
    /* Hide Time & Lyrics, 2 Columns Only */
    .track-grid-layout,
    .track-row.album-track {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        /* Num | Info (Img+Text) */
        align-items: center !important;
        padding: 10px 15px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
        height: auto !important;
        gap: 15px !important;
        text-align: left !important;
        /* Fix Center bug */
    }

    /* 1. Rank */
    .track-num-wrap,
    .track-row.album-track .track-num {
        width: 100% !important;
        text-align: center !important;
        font-size: 14px !important;
        color: var(--text-muted) !important;
        display: block !important;
    }

    /* Active Track Icon Support */
    .track-play-icon {
        display: none;
    }

    /* Default hide */

    .track-row.album-track.active-track .track-num {
        display: none !important;
    }

    .track-row.album-track.active-track .track-play-icon {
        display: block !important;
        color: var(--primary) !important;
        font-size: 14px !important;
        text-align: center;
        width: 100%;
    }

    /* 2. Info Col (2nd Child) */
    .track-row.album-track>div:nth-child(2) {
        display: flex !important;
        align-items: flex-start !important;
        /* Fix Horizontal Centering (Column Layout) */
        min-width: 0 !important;
        /* Crucial for truncation */
    }

    /* So just Text Truncation */
    .track-row.album-track>div:nth-child(2)>div:first-child {
        font-size: 15px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: var(--text-main) !important;
        text-align: left !important;
        /* FORCE LEFT */
        justify-content: flex-start !important;
        align-items: center !important;
        display: block !important;
    }

    /* Force Artist Name Left */
    .track-row.album-track>div:nth-child(2)>div:nth-child(2) {
        text-align: left !important;
        justify-content: flex-start !important;
        display: block !important;
        width: 100% !important;
    }

    .track-row.album-track.active-track>div:nth-child(2)>div:first-child {
        color: var(--primary) !important;
        font-weight: 700 !important;
    }

    /* 3. Hide Lyrics Badge (3rd Child or attribute) & Time (4th Child) */
    .track-row.album-track>div[data-lyrics-badge],
    .track-row.album-track>div:last-child {
        display: none !important;
    }

    /* Hero Title Fix for Tablet */
    .hero-info h1,
    .album-header h1,
    .album-hero-flex h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    /* --- 7. Player Bar Tablet --- */
    .player-right-vol {
        display: none !important;
    }

    .player-left {
        max-width: 40% !important;
    }

    .p-info {
        padding-right: 15px !important;
    }
}

/* --- PHONE SPECIFIC TWEAKS (< 768px) --- */
@media (max-width: 767px) {

    /* 0. Header Layout: Force Stacked for Phone */
    .header-inner {
        flex-wrap: wrap !important;
        gap: 0 !important;
    }

    .header-left {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 40px 1fr 40px;
        gap: 0 !important;
    }

    .logo {
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .header-right {
        width: 100% !important;
        order: 3;
        margin-top: 10px;
        display: flex !important;
        gap: 15px !important;
    }

    /* 1. Condense "Ver Letra" to Icon Only on Phones */
    .btn-lyrics-small {
        font-size: 0 !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center !important;
        border-radius: 50% !important;
        background: var(--bg-surface-hover) !important;
        border: 1px solid var(--border-subtle) !important;
    }

    .btn-lyrics-small i {
        font-size: 14px !important;
        margin: 0 !important;
        color: var(--primary) !important;
    }

    /* 2. Section Titles Cleanup */
    .section-title {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    .section-title h2 {
        font-size: 22px !important;
        margin-bottom: 0 !important;
        line-height: 1.2 !important;
    }

    /* Adjust buttons inside section title (like "Reproducir todo") */
    .section-title div {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* 3. Alphabet Navigation & Title (Mobile Optimization) */
    .alphabet-filter {
        padding: 10px !important;
        gap: 8px !important;
    }

    .alphabet-link {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
        /* Larger touch targets */
    }

    /* Clean up the Main Title "Artistas por letra: Z" */
    .section-title h1 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    .section-title p {
        font-size: 14px !important;
    }

    /* 4. Biographies Page Title "Revista Musical..." */
    .bio-hero h1 {
        font-size: 28px !important;
        /* Override 3.5rem inline */
        line-height: 1.2 !important;
    }

    .bio-hero p {
        font-size: 15px !important;
        padding: 0 10px !important;
        /* Prevent text touching edges */
    }

    .btn-play-all {
        font-size: 13px !important;
        padding: 6px 16px !important;
    }

    /* 5. Artist Page Split Layout Fix (Stack Sidebar) */
    div.hero-full-wrapper+section.container {
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* Reset width for both columns (Songs list & Sidebar) */
    div.hero-full-wrapper+section.container>div {
        width: 100% !important;
        max-width: 100% !important;
        flex: auto !important;
        min-width: 0 !important;
    }

    /* 6. Spotify-Style Mobile Track List (Final Fix - No Images) */

    /* 1. FORCE HIDE TIME, ADS, RANK & IMAGES */
    .track-meta-col>div,
    /* The time element */
    .track-duration,
    /* Just in case */
    .ad-container,
    .track-num-wrap,
    .track-num,
    .track-info-col img {
        display: none !important;
    }

    /* 2. FLEX ROW CONTAINER */
    .track-grid-layout,
    .track-row.album-track {
        display: flex !important;
        flex-wrap: wrap !important;
        /* Allow stacking */
        position: relative !important;
        align-items: center !important;
        /* Center vertically */
        padding: 12px 10px !important;
        /* Balanced padding, no left/right offset needed */
        min-height: 64px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
        height: auto !important;
        align-content: center !important;
        /* Center content block vertically */
    }

    /* 3. TEXT CONTENT: Fills allowed space */
    .track-info-col {
        display: block !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        /* Force full width line */
        padding-right: 70px !important;
        /* Space for Icons on Right */
    }

    .track-title-text,
    .track-title {
        font-size: 16px !important;
        /* Slightly larger for readability without img */
        font-weight: 600 !important;
        color: var(--text-main) !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        margin-bottom: 2px !important;
        /* Tighter gap */
    }

    .track-artist-col,
    .album-track .track-artist {
        padding-left: 0 !important;
        margin-top: 0 !important;
        font-size: 14px !important;
        color: var(--text-muted) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        /* Force full width line */
        padding-right: 70px !important;
        /* Prevent overlap with meta */
    }

    /* 4. META ICONS: Absolute Right & Centered */
    .track-meta-col {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 16px !important;
        padding-right: 15px !important;
    }

    .track-meta-col i,
    .btn-save-bookmark i,
    .btn-lyrics-small i {
        font-size: 20px !important;
        /* Larger icons like Spotify */
        color: #b3b3b3 !important;
    }

    /* Ensure buttons inside meta don't add weird spacing */
    .track-meta-col button,
    .track-meta-col a {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
    }

    /* 7. Albums Page Header Mobile Optimization */
    /* Target the specific flex container used in albums.php header */
    main.container>div[style*="align-items: flex-end"] {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important;
    }

    /* Image adjustments */
    main.container>div[style*="align-items: flex-end"]>img {
        margin-bottom: 10px !important;
        width: 140px !important;
        height: 140px !important;
    }

    /* Title adjustments */
    main.container>div[style*="align-items: flex-end"] h1 {
        font-size: 32px !important;
        /* Smaller than 42px for mobile */
        margin-top: 5px !important;
    }

    /* Subtitle/Count */
    main.container>div[style*="align-items: flex-end"] p {
        margin-top: 5px !important;
        font-size: 14px !important;
    }

    /* View Toggle Buttons container */
    main.container>div[style*="align-items: flex-end"]>div:last-child {
        margin-top: 15px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* 8. Album List View Item Optimization (Spotify Style) */
    .album-list-item {
        background: var(--bg-surface) !important;
        border-radius: 8px !important;
        padding: 15px !important;
        margin-bottom: 20px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .album-list-header {
        display: grid !important;
        grid-template-columns: 100px 1fr !important;
        /* Fixed Image + Remaining Content */
        gap: 15px !important;
        align-items: center !important;
    }

    .album-list-cover {
        width: 100px !important;
        height: 100px !important;
        border-radius: 6px !important;
        object-fit: cover !important;
    }

    .album-list-info {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .album-list-type {
        font-size: 11px !important;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 4px;
        letter-spacing: 0.5px;
    }

    .album-list-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        color: var(--text-main);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .album-list-meta {
        font-size: 13px !important;
        color: var(--text-muted);
        margin-top: 4px;
        margin-bottom: 12px;
    }

    /* ACTIONS: Compact Play & Hide Others */
    .album-list-actions {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    /* Hide Heart & Dots */
    .album-list-actions .btn-icon-action {
        display: none !important;
    }

    /* Standard Pill Play Button (User Preference) */
    .album-list-actions .btn-play-album {
        font-size: 12px !important;
        /* Show Text */
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        width: auto !important;
        height: 36px !important;
        border-radius: 500px !important;
        /* Pill */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 20px !important;
        background: var(--primary) !important;
        color: #fff !important;
        border: none !important;
        margin-top: 5px !important;
    }

    .album-list-actions .btn-play-album i {
        font-size: 14px !important;
        margin: 0 8px 0 0 !important;
        /* Spacing between icon and text */
        color: #fff !important;
    }

    /* Tracks inside album card */
    .album-tracks-list .track-row {
        padding: 10px 0 !important;
        border-bottom: 1px solid var(--border-subtle) !important;
    }

    /* 9. Playlist Page Mobile Optimization */
    .playlist-hero {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px !important;
    }

    .playlist-cover {
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        width: 160px !important;
        height: 160px !important;
    }

    /* Info Container: Reset flex text alignment */
    .playlist-hero>div {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Controls Container (The one with inline flex style) */
    .playlist-hero>div>div[style*="display: flex"] {
        flex-direction: column !important;
        /* Stack buttons vertically */
        gap: 10px !important;
        width: 100% !important;
    }

    .view-controls {
        display: flex !important;
        flex-direction: column !important;
        /* Stack internal button groups */
        gap: 10px !important;
        width: 100% !important;
        align-items: center !important;
    }

    /* Make buttons fullish width or centered pills */
    .btn-play-all,
    #btn-start-karaoke,
    #btn-config {
        width: 100% !important;
        margin-left: 0 !important;
        /* Reset inline margins */
        justify-content: center !important;
        max-width: 300px !important;
        /* Don't be too wide */
    }

    /* 10. My Playlists Index Mobile Optimization */
    .playlist-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }

    .playlist-header>div {
        width: 100% !important;
    }

    .playlist-header h1 {
        font-size: 32px !important;
    }

    /* Actions container */
    .playlist-header>div:last-child {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        /* Button left, Exit right */
    }

    .btn-create {
        flex: 1 !important;
        justify-content: center !important;
        padding: 12px 20px !important;
    }

    /* Convert Playlist Grid to List View on Mobile */
    .grid-playlists {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .card-playlist {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        height: auto !important;
        padding: 10px !important;
        border: 1px solid var(--border-subtle) !important;
    }

    .card-img-placeholder {
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
        font-size: 24px !important;
        /* Smaller icon */
    }

    .card-body {
        padding: 0 0 0 15px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .card-title {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }

    .card-meta {
        font-size: 13px !important;
    }

    /* 11. Song Page Mobile Optimization */
    .btn-save-bookmark {
        display: none !important;
    }

    /* 12. Album Details Page Mobile Optimization */
    .album-hero-flex {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
    }

    /* Target Album Cover specifically (First child div contains it) */
    .album-hero-flex>div:first-child img {
        width: 180px !important;
        height: 180px !important;
        margin: 0 auto !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    }

    .album-hero-flex h1 {
        font-size: 28px !important;
        /* Slightly smaller for balance */
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    /* Meta Info Row: Artist Image & Text */
    .album-hero-flex>div>div[style*="align-items: center"] {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-bottom: 25px !important;
    }

    /* Force Artist Avatar small (It was inheriting 180px!) */
    .album-hero-flex>div:last-child img {
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        border-radius: 50% !important;
    }

    /* Buttons Container (Main Info Div) */
    .album-hero-flex>div:last-child {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        /* Restore Vertical Stack for Text */
        align-items: center !important;
    }

    /* New Wrapper for Buttons Row */
    .album-actions-row {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important;
        justify-content: center !important;
    }

    /* Play Button */
    .album-hero-flex .btn-play-all {
        flex: 1 !important;
        width: auto !important;
        margin-bottom: 0 !important;
        padding: 12px 10px !important;
        white-space: nowrap !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Share Container */
    .album-hero-flex .share-container {
        display: block !important;
        flex: 1 !important;
        width: auto !important;
    }

    .album-hero-flex .btn-share-toggle {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 10px !important;
        white-space: nowrap !important;
    }

    /* Hide Lyrics Badge and Time on Mobile Tracklist */
    .album-track>div[data-lyrics-badge],
    .album-track>div:last-child {
        display: none !important;
    }

    /* Main Grid Stack */
    .album-content-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Expand Content to Full Width */
    .main-content .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .album-track-list {
        width: 100% !important;
        padding: 5px !important;
        box-sizing: border-box !important;
    }

    /* Fix specificity conflict and ensure Grid */
    /* Fix specificity conflict and ensure Grid */
    .track-row.album-track {
        display: grid !important;
        grid-template-columns: 30px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        width: 100% !important;
        padding: 12px 0 !important;
        text-align: left !important;
        /* Fix Center bug */
    }

    /* Force Title Truncation */
    .track-row.album-track>div:nth-child(2)>div:first-child {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: left !important;
        /* FORCE LEFT */
        display: block !important;
        width: 100% !important;
    }

    /* Force Artist Name Left (Mobile) */
    .track-row.album-track>div:nth-child(2)>div:nth-child(2) {
        text-align: left !important;
        justify-content: flex-start !important;
        display: block !important;
        width: 100% !important;
    }

    /* Active Track Styling on Mobile */
    .track-row.album-track.active-track .track-number {
        display: none !important;
    }

    .track-row.album-track.active-track .track-play-icon {
        display: block !important;
        color: var(--primary) !important;
        font-size: 14px !important;
    }

    .track-row.album-track.active-track>div:nth-child(2)>div:first-child {
        color: var(--primary) !important;
        font-weight: 700 !important;
    }
}