/* ==========================================================
   BANNER GLOBAL LIMPIO Y ESTABLE
   El banner lo construye banner.js y este archivo controla
   todo el layout/responsive del header en todas las páginas.
   ========================================================== */

#header.album-global-header,
#header.album-global-header * {
    box-sizing: border-box !important;
}

#header.album-global-header {
    --h-normal: 255px;
    --h-normal-index: 298px;
    --h-compact: 82px;
    --h-mobile: 232px;
    --h-mobile-index: 272px;
    --h-mobile-no-search: 202px;
    --h-mobile-compact: 132px;
    --h-mobile-compact-no-search: 108px;
    --banner-gradient-main: linear-gradient(135deg, #7a0000 0%, #9b1608 48%, #d19a00 100%);
    --banner-gradient-compact: linear-gradient(135deg, #6f0000 0%, #8c1206 52%, #b88300 100%);

    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: var(--h-normal) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1000 !important;
    overflow: visible !important;
    color: #fff !important;
    text-align: center !important;
    background: var(--banner-gradient-main) !important;
    border-bottom: 3px solid #ffc107 !important;
    box-shadow:
        0 6px 15px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        inset 0 15px 30px rgba(255,255,255,0.05) !important;
    transition: height .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease, background .28s ease !important;
    contain: layout paint style;
}

#header.album-global-header::after {
    content: "" !important;
    position: absolute !important;
    right: -70px !important;
    bottom: -120px !important;
    width: 260px !important;
    height: 260px !important;
    border-radius: 50% !important;
    background: rgba(255, 193, 7, 0.20) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

#header.album-global-header[data-page="index"] { height: var(--h-normal-index) !important; }

#header.album-global-header .header-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 14px 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: padding .28s ease, gap .28s ease !important;
}

#header.album-global-header h1,
#header.album-global-header .header-tools,
#header.album-global-header .auth-row,
#header.album-global-header .stats-container,
#header.album-global-header #progress-container,
#header.album-global-header #search-container {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
}

#header.album-global-header h1 {
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: min(92vw, 980px) !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: clamp(1.8rem, 2.7vw, 2.45rem) !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: linear-gradient(180deg, #fff 0%, #ddd 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(2px 3px 2px rgba(0,0,0,.5)) !important;
    transition: font-size .28s ease, max-width .28s ease !important;
    z-index: 4 !important;
}

#header.album-global-header .header-tools {
    order: 2 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    z-index: 9 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .2s ease, transform .2s ease !important;
}
#header.album-global-header[data-page="index"] .header-tools { display: flex !important; }

#header.album-global-header .auth-row {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    z-index: 8 !important;
    transition: opacity .22s ease, transform .22s ease, min-height .22s ease, height .22s ease !important;
}

#header.album-global-header .stats-container {
    order: 4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    z-index: 7 !important;
}

#header.album-global-header #progress-container { order: 5 !important; }
#header.album-global-header #search-container { order: 6 !important; }

/* Idioma / tema */
#header.album-global-header .language-dropdown { position: relative !important; display: inline-flex !important; align-items: center !important; }
#header.album-global-header .language-toggle,
#header.album-global-header .theme-toggle-btn {
    height: 34px !important;
    min-width: 98px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    border-bottom: 3px solid rgba(0,0,0,.32) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    outline: none !important;
    white-space: nowrap !important;
}
#header.album-global-header .language-flag { font-size: 16px !important; line-height: 1 !important; display: inline-block !important; }
#header.album-global-header .language-code { letter-spacing: .4px !important; }
#header.album-global-header .language-arrow { font-size: 10px !important; opacity: .9 !important; }
#header.album-global-header .language-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 128px !important;
    padding: 7px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #990000 0%, #770000 100%) !important;
    border: 1px solid rgba(255,193,7,.75) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.15) !important;
    display: none !important;
    z-index: 6200 !important;
}
#header.album-global-header .language-dropdown.open .language-menu { display: grid !important; gap: 5px !important; }
#header.album-global-header .language-option {
    width: 100% !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}
#header.album-global-header .language-option:hover,
#header.album-global-header .language-option.active { background: rgba(255,193,7,.22) !important; box-shadow: inset 0 0 0 1px rgba(255,193,7,.45) !important; }

/* Botones */
#header.album-global-header .stats-btn,
#header.album-global-header .btn-login-header {
    min-width: 112px !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-bottom: 3px solid rgba(0,0,0,.30) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)) !important;
    color: #fff !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.24) !important;
    cursor: pointer !important;
}
#header.album-global-header .btn-login-header { background: #fff !important; color: #444 !important; border-color: #fff !important; }
#header.album-global-header .btn-repetidas { border-color: rgba(255,193,7,.95) !important; }
#header.album-global-header .btn-info,
#header.album-global-header .btn-perfil,
#header.album-global-header .btn-pronosticos,
#header.album-global-header .btn-inicio { border-color: rgba(255,255,255,.9) !important; }
#header.album-global-header .btn-intercambios { border-color: rgba(188,80,255,.95) !important; background: linear-gradient(180deg, rgba(170,60,190,.52), rgba(120,35,150,.30)) !important; }
#header.album-global-header .stats-btn:hover,
#header.album-global-header .btn-login-header:hover,
#header.album-global-header .language-toggle:hover,
#header.album-global-header .theme-toggle-btn:hover { box-shadow: 0 7px 16px rgba(0,0,0,.28), 0 0 0 2px rgba(255,193,7,.18) !important; transform: translateY(-1px) !important; }

#header.album-global-header #auth-header-slot { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
#header.album-global-header .user-profile-wrapper { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
#header.album-global-header .user-avatar-btn { width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 2px solid rgba(255,255,255,.86) !important; background-color: rgba(255,255,255,.18) !important; background-size: cover !important; background-position: center !important; box-shadow: 0 2px 8px rgba(72,0,0,.22) !important; cursor: pointer !important; padding: 0 !important; outline: none !important; appearance: none !important; -webkit-appearance: none !important; }
#header.album-global-header .profile-menu { display: none !important; position: absolute !important; top: 46px !important; right: 50% !important; transform: translateX(50%) !important; width: 170px !important; padding: 7px !important; border-radius: 14px !important; background: linear-gradient(180deg, #990000 0%, #770000 100%) !important; border: 1px solid rgba(255,193,7,.75) !important; box-shadow: 0 12px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.15) !important; z-index: 2600 !important; }
#header.album-global-header .profile-menu.show { display: block !important; }
#header.album-global-header .profile-menu button,
#header.album-global-header .profile-menu a { width: 100% !important; height: 34px !important; margin: 0 0 5px !important; padding: 0 10px !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 10px !important; background: rgba(255,255,255,.10) !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; cursor: pointer !important; text-decoration: none !important; box-sizing: border-box !important; }
#header.album-global-header .profile-menu button:hover,
#header.album-global-header .profile-menu a:hover { background: rgba(255,193,7,.22) !important; }

#header.album-global-header .banner-menu-panel a[href="perfil.html"],
#header.album-global-header .banner-menu-panel a[href*="pronosticos-mundial.html"],
a[href*="pronosticos-mundial.html"]:not(#header.album-global-header .profile-menu a) {
    display: none !important;
}

#header.album-global-header .notification-badge { min-width: 18px !important; height: 18px !important; padding: 0 5px !important; border-radius: 999px !important; background: #ff3b30 !important; color: #fff !important; font-size: 10px !important; font-weight: 900 !important; display: none !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 6px rgba(0,0,0,.35) !important; }
#header.album-global-header .notification-badge.show { display: inline-flex !important; }

/* Progreso */
#header.album-global-header #progress-container {
    width: 280px !important;
    height: 30px !important;
    min-height: 30px !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: linear-gradient(180deg, rgba(40,40,40,.9), rgba(20,20,20,.9)) !important;
    border-radius: 20px !important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.8), 0 4px 10px rgba(0,0,0,.5) !important;
    border: 2px solid rgba(255,193,7,.8) !important;
    z-index: 4 !important;
    text-decoration: none !important;
}
#header.album-global-header #progress-container.progress-static { cursor: default !important; pointer-events: none !important; }
#header.album-global-header #progress-container:not(.progress-static) { cursor: pointer !important; }
#header.album-global-header #progress-container::before { content: '' !important; position: absolute !important; top: 3px !important; left: 12% !important; width: 76% !important; height: 28% !important; background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.05)) !important; border-radius: 10px !important; z-index: 3 !important; pointer-events: none !important; }
#header.album-global-header #progress-bar { position: absolute !important; inset: 0 auto 0 0 !important; height: 100% !important; min-width: 0 !important; background: linear-gradient(270deg, #c1121f, #ff3b30, #c1121f) !important; background-size: 300% 300% !important; animation: waveFlow 4s ease infinite !important; transition: width .4s ease-in-out, background .35s ease !important; box-shadow: inset 0 -3px 6px rgba(0,0,0,.4), inset 0 3px 6px rgba(255,255,255,.2) !important; z-index: 1 !important; }
#header.album-global-header #progress-text { position: absolute !important; inset: 0 !important; transform: none !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; padding: 0 8px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: white !important; font-size: .82rem !important; font-weight: bold !important; text-shadow: 1px 1px 3px rgba(0,0,0,.9) !important; font-family: 'Kanit', sans-serif !important; letter-spacing: .5px !important; pointer-events: none !important; z-index: 4 !important; }
@keyframes waveFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

#header.album-global-header #search-container { width: 280px !important; max-width: 80% !important; height: 30px !important; min-height: 30px !important; z-index: 3 !important; }
#header.album-global-header.no-search #search-container { display: none !important; }
#header.album-global-header .search-box { width: 100% !important; height: 30px !important; min-height: 30px !important; padding: 0 14px !important; border-radius: 25px !important; border: 2px solid #ffc107 !important; background: #fff !important; color: #333 !important; font-size: .88rem !important; outline: none !important; box-shadow: 0 3px 6px rgba(0,0,0,.15) !important; }
body.dark-mode #header.album-global-header .search-box { background: rgba(255,255,255,.10) !important; color: #fff !important; border-color: rgba(255,193,7,.75) !important; }
body.dark-mode #header.album-global-header .search-box::placeholder { color: rgba(255,255,255,.68) !important; }
body.dark-mode #header.album-global-header .profile-menu,
body.dark-mode #header.album-global-header .language-menu { background: linear-gradient(180deg, #6f0000 0%, #4e0000 100%) !important; }

#main-content,
#main-content.container,
.container.main-content { margin-top: calc(var(--h-normal) + 16px) !important; }
body:has(#header.album-global-header[data-page="index"]) #main-content { margin-top: calc(var(--h-normal-index) + 16px) !important; }

/* PC: scroll en una sola línea */
@media screen and (min-width: 1024px) {
    #header.album-global-header.compact { height: var(--h-compact) !important; background: var(--banner-gradient-compact) !important; box-shadow: 0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15) !important; }
    #header.album-global-header.compact .header-content { padding: 0 24px !important; display: grid !important; grid-template-columns: minmax(185px, 1.1fr) minmax(210px, .9fr) minmax(170px, .65fr) minmax(330px, 1.4fr) !important; column-gap: 18px !important; align-items: center !important; justify-items: stretch !important; height: 100% !important; }
    #header.album-global-header.compact.no-search .header-content { grid-template-columns: minmax(210px, 1.1fr) minmax(190px, .8fr) minmax(330px, 1.4fr) !important; }
    #header.album-global-header.compact h1 { order: unset !important; grid-column: 1 !important; justify-self: start !important; max-width: 100% !important; font-size: clamp(.95rem, 1.25vw, 1.2rem) !important; text-align: left !important; }
    #header.album-global-header.compact .header-tools,
    #header.album-global-header.compact .auth-row { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
    #header.album-global-header.compact #search-container { order: unset !important; grid-column: 2 !important; width: 100% !important; max-width: none !important; justify-self: stretch !important; }
    #header.album-global-header.compact.no-search #search-container { display: none !important; }
    #header.album-global-header.compact #progress-container { order: unset !important; grid-column: 3 !important; width: 100% !important; max-width: 240px !important; min-width: 170px !important; justify-self: center !important; }
    #header.album-global-header.compact.no-search #progress-container { grid-column: 2 !important; }
    #header.album-global-header.compact .stats-container { order: unset !important; grid-column: 4 !important; width: 100% !important; max-width: none !important; justify-content: flex-end !important; gap: 8px !important; }
    #header.album-global-header.compact.no-search .stats-container { grid-column: 3 !important; }
    #header.album-global-header.compact .stats-btn,
    #header.album-global-header.compact .btn-login-header { min-width: 92px !important; max-width: 135px !important; height: 34px !important; padding: 0 10px !important; font-size: 10.5px !important; }
    #header.album-global-header.compact .btn-intercambios { min-width: 118px !important; }
    #main-content.header-compact-active,
    .container.main-content.header-compact-active { margin-top: calc(var(--h-compact) + 16px) !important; }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    #header.album-global-header.compact { height: 132px !important; }
    #header.album-global-header.compact .header-content { gap: 7px !important; padding: 8px 12px !important; justify-content: center !important; }
    #header.album-global-header.compact h1 { font-size: 1.05rem !important; max-width: 92vw !important; }
    #header.album-global-header.compact .header-tools,
    #header.album-global-header.compact .auth-row { display: none !important; }
    #header.album-global-header.compact .stats-container { order: 2 !important; gap: 7px !important; flex-wrap: nowrap !important; }
    #header.album-global-header.compact #progress-container { order: 3 !important; width: 250px !important; height: 24px !important; min-height: 24px !important; }
    #header.album-global-header.compact #search-container { order: 4 !important; width: 320px !important; height: 26px !important; min-height: 26px !important; }
    #header.album-global-header.compact .search-box { height: 26px !important; min-height: 26px !important; }
    #main-content.header-compact-active,
    .container.main-content.header-compact-active { margin-top: 148px !important; }
}

/* Móvil */
@media screen and (max-width: 768px) {
    body { background-attachment: scroll !important; }
    #header.album-global-header { height: var(--h-mobile) !important; }
    #header.album-global-header[data-page="index"] { height: var(--h-mobile-index) !important; }
    #header.album-global-header.no-search { height: var(--h-mobile-no-search) !important; }
    #header.album-global-header .header-content { padding: 7px 8px !important; gap: 7px !important; justify-content: center !important; }
    #header.album-global-header h1 { width: 100% !important; max-width: calc(100vw - 16px) !important; font-size: clamp(.98rem, 4.9vw, 1.30rem) !important; line-height: 1.02 !important; }
    #header.album-global-header .header-tools { gap: 6px !important; }
    #header.album-global-header .language-toggle,
    #header.album-global-header .theme-toggle-btn { height: 28px !important; min-width: 76px !important; padding: 0 8px !important; font-size: 10px !important; border-bottom-width: 2px !important; }
    #header.album-global-header .language-flag { font-size: 14px !important; }
    #header.album-global-header .auth-row { min-height: 30px !important; }
    #header.album-global-header .stats-container { width: 100% !important; max-width: calc(100vw - 12px) !important; flex-wrap: wrap !important; justify-content: center !important; gap: 5px !important; }
    #header.album-global-header .stats-btn,
    #header.album-global-header .btn-login-header { min-width: 76px !important; max-width: 118px !important; height: 30px !important; padding: 0 8px !important; font-size: 9.7px !important; }
    #header.album-global-header .btn-intercambios .nav-label-long { display: none !important; }
    #header.album-global-header .btn-intercambios { min-width: 74px !important; }
    #header.album-global-header .user-avatar-btn { width: 38px !important; height: 38px !important; }
    #header.album-global-header #progress-container { width: min(74vw, 260px) !important; height: 21px !important; min-height: 21px !important; }
    #header.album-global-header #progress-text { font-size: .62rem !important; }
    #header.album-global-header #search-container { width: min(88vw, 360px) !important; height: 24px !important; min-height: 24px !important; }
    #header.album-global-header .search-box { height: 24px !important; min-height: 24px !important; font-size: .80rem !important; padding: 0 12px !important; }
    #main-content,
    #main-content.container,
    .container.main-content { margin-top: calc(var(--h-mobile) + 16px) !important; width: 95% !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    body:has(#header.album-global-header[data-page="index"]) #main-content { margin-top: calc(var(--h-mobile-index) + 16px) !important; }
    body:has(#header.album-global-header.no-search) #main-content { margin-top: calc(var(--h-mobile-no-search) + 16px) !important; }

    #header.album-global-header.compact { height: var(--h-mobile-compact) !important; }
    #header.album-global-header.compact.no-search { height: var(--h-mobile-compact-no-search) !important; }
    #header.album-global-header.compact .header-content { padding: 7px 8px !important; gap: 4px !important; justify-content: center !important; }
    #header.album-global-header.compact h1 { font-size: clamp(.78rem, 3.65vw, .98rem) !important; max-width: calc(100vw - 16px) !important; line-height: 1 !important; }
    #header.album-global-header.compact .header-tools,
    #header.album-global-header.compact .auth-row { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; min-height: 0 !important; height: 0 !important; margin: 0 !important; }
    #header.album-global-header.compact .stats-container { gap: 4px !important; max-width: calc(100vw - 10px) !important; }
    #header.album-global-header.compact .stats-btn,
    #header.album-global-header.compact .btn-login-header { min-width: 64px !important; max-width: 105px !important; height: 25px !important; padding: 0 6px !important; font-size: 8.6px !important; }
    #header.album-global-header.compact #progress-container { width: min(70vw, 245px) !important; height: 18px !important; min-height: 18px !important; }
    #header.album-global-header.compact #progress-text { font-size: .58rem !important; }
    #header.album-global-header.compact #search-container { width: min(88vw, 350px) !important; height: 22px !important; min-height: 22px !important; }
    #header.album-global-header.compact .search-box { height: 22px !important; min-height: 22px !important; font-size: .75rem !important; }
    #main-content.header-compact-active,
    .container.main-content.header-compact-active { margin-top: calc(var(--h-mobile-compact) + 16px) !important; }
    body:has(#header.album-global-header.no-search.compact) #main-content.header-compact-active { margin-top: calc(var(--h-mobile-compact-no-search) + 16px) !important; }
}

@media screen and (max-width: 380px) {
    #header.album-global-header .stats-btn,
    #header.album-global-header .btn-login-header { min-width: 64px !important; padding: 0 5px !important; font-size: 8.4px !important; }
}

body.dark-mode #header.album-global-header .profile-menu,
body.dark-mode #header.album-global-header .language-menu { background: linear-gradient(180deg, #6f0000 0%, #4e0000 100%) !important; }

/* Fluidez general en dispositivos pequeños */
@media screen and (max-width: 768px) {
    * { -webkit-tap-highlight-color: transparent; }
    #header.album-global-header { will-change: height; }
    #main-content { transform: translateZ(0); }
}

/* ==========================================================
   FIX FINAL: menú de idioma del banner con clases propias
   Mantiene el diseño anterior y permite scroll interno sin
   romper el layout del header.
   ========================================================== */
#header.album-global-header .banner-language-dropdown {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
}

#header.album-global-header .banner-language-toggle,
#header.album-global-header .banner-theme-toggle {
    height: 34px !important;
    min-width: 98px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    border-bottom: 3px solid rgba(0,0,0,.32) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    outline: none !important;
    white-space: nowrap !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#header.album-global-header .banner-language-toggle:hover,
#header.album-global-header .banner-theme-toggle:hover {
    box-shadow: 0 7px 16px rgba(0,0,0,.28), 0 0 0 2px rgba(255,193,7,.18) !important;
    transform: translateY(-1px) !important;
}

#header.album-global-header .banner-language-toggle:active,
#header.album-global-header .banner-theme-toggle:active {
    transform: translateY(2px) !important;
    border-bottom-width: 1px !important;
}

#header.album-global-header .banner-language-flag,
#header.album-global-header .banner-language-flag-option {
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    min-width: 18px !important;
}

#header.album-global-header .banner-language-code {
    letter-spacing: .4px !important;
}

#header.album-global-header .banner-language-arrow {
    font-size: 10px !important;
    opacity: .9 !important;
    transform: translateY(-1px) !important;
}

#header.album-global-header .banner-language-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 132px !important;
    min-width: 132px !important;
    max-height: 138px !important;
    padding: 7px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #990000 0%, #770000 100%) !important;
    border: 1px solid rgba(255,193,7,.75) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.15) !important;
    display: none !important;
    z-index: 2600 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,193,7,.75) rgba(255,255,255,.10) !important;
}

#header.album-global-header .banner-language-menu::-webkit-scrollbar {
    width: 6px !important;
}

#header.album-global-header .banner-language-menu::-webkit-scrollbar-track {
    background: rgba(255,255,255,.10) !important;
    border-radius: 999px !important;
}

#header.album-global-header .banner-language-menu::-webkit-scrollbar-thumb {
    background: rgba(255,193,7,.75) !important;
    border-radius: 999px !important;
}

#header.album-global-header .banner-language-dropdown.open .banner-language-menu {
    display: grid !important;
    gap: 5px !important;
}

#header.album-global-header .banner-language-option {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#header.album-global-header .banner-language-option:hover,
#header.album-global-header .banner-language-option.active {
    background: rgba(255,193,7,.22) !important;
    box-shadow: inset 0 0 0 1px rgba(255,193,7,.45) !important;
}

body.dark-mode #header.album-global-header .banner-language-menu {
    background: linear-gradient(180deg, #6f0000 0%, #4e0000 100%) !important;
}

@media screen and (max-width: 768px) {
    #header.album-global-header .banner-language-toggle,
    #header.album-global-header .banner-theme-toggle {
        height: 28px !important;
        min-width: 78px !important;
        padding: 0 9px !important;
        font-size: 10px !important;
        gap: 5px !important;
        border-bottom-width: 2px !important;
    }

    #header.album-global-header .banner-language-flag,
    #header.album-global-header .banner-language-flag-option {
        font-size: 14px !important;
        width: 16px !important;
        min-width: 16px !important;
    }

    #header.album-global-header .banner-language-menu {
        width: 122px !important;
        min-width: 122px !important;
        max-height: 112px !important;
        top: calc(100% + 6px) !important;
    }

    #header.album-global-header .banner-language-option {
        height: 31px !important;
        min-height: 31px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================
   FIX: el contenido siempre empieza debajo del banner fijo
   banner.js actualiza --album-header-space según el estado real
   del header antes, durante y después de la animación.
   ========================================================== */
#main-content,
#main-content.container,
.container.main-content {
    margin-top: var(--album-header-space, 276px) !important;
}

/* Mantiene el desplegable dentro de su propia caja con scroll interno. */
#header.album-global-header .banner-language-menu {
    max-height: 138px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ==========================================================
   FIX FINAL PC COMPACTO + BANDERAS
   En escritorio, al hacer scroll, todo queda en UNA línea
   centrada verticalmente: título | búsqueda | progreso | menú.
   ========================================================== */
#header.album-global-header .banner-language-flag,
#header.album-global-header .banner-language-flag-option {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 1 !important;
    font-size: 15px !important;
    -webkit-text-fill-color: initial !important;
    color: initial !important;
}

@media screen and (min-width: 1024px) {
    #header.album-global-header.compact {
        height: var(--h-compact) !important;
        overflow: visible !important;
        background: var(--banner-gradient-compact) !important;
    }

    #header.album-global-header.compact .header-content {
        height: 100% !important;
        width: 100% !important;
        max-width: 1480px !important;
        margin: 0 auto !important;
        padding: 0 28px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(12px, 1.25vw, 22px) !important;
    }

    #header.album-global-header.compact h1,
    #header.album-global-header.compact #search-container,
    #header.album-global-header.compact #progress-container,
    #header.album-global-header.compact .stats-container {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-self: center !important;
    }

    #header.album-global-header.compact h1 {
        order: 1 !important;
        flex: 0 1 clamp(210px, 22vw, 340px) !important;
        max-width: clamp(210px, 22vw, 340px) !important;
        min-width: 0 !important;
        text-align: left !important;
        font-size: clamp(.95rem, 1.25vw, 1.2rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #header.album-global-header.compact #search-container {
        order: 2 !important;
        flex: 0 1 clamp(210px, 19vw, 300px) !important;
        width: clamp(210px, 19vw, 300px) !important;
        max-width: clamp(210px, 19vw, 300px) !important;
        min-width: 0 !important;
        height: 30px !important;
        min-height: 30px !important;
        display: block !important;
        opacity: 1 !important;
    }

    #header.album-global-header.compact.no-search #search-container {
        display: none !important;
    }

    #header.album-global-header.compact .search-box {
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 14px !important;
        font-size: .84rem !important;
        border-radius: 18px !important;
    }

    #header.album-global-header.compact #progress-container {
        order: 3 !important;
        flex: 0 0 clamp(170px, 15vw, 230px) !important;
        width: clamp(170px, 15vw, 230px) !important;
        max-width: clamp(170px, 15vw, 230px) !important;
        min-width: 170px !important;
        height: 30px !important;
        min-height: 30px !important;
    }

    #header.album-global-header.compact #progress-text {
        font-size: .70rem !important;
    }

    #header.album-global-header.compact .stats-container {
        order: 4 !important;
        flex: 1 1 auto !important;
        min-width: 330px !important;
        width: auto !important;
        max-width: none !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    #header.album-global-header.compact .stats-btn,
    #header.album-global-header.compact .btn-login-header {
        min-width: 88px !important;
        max-width: 132px !important;
        height: 34px !important;
        padding: 0 10px !important;
        font-size: 10.5px !important;
        flex: 0 0 auto !important;
    }

    #header.album-global-header.compact .btn-intercambios {
        min-width: 118px !important;
        max-width: 148px !important;
    }

    #header.album-global-header.compact .header-tools,
    #header.album-global-header.compact .auth-row {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #main-content.header-compact-active,
    #main-content.container.header-compact-active,
    .container.main-content.header-compact-active {
        margin-top: calc(var(--h-compact) + 18px) !important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1180px) {
    #header.album-global-header.compact .header-content {
        gap: 10px !important;
        padding: 0 14px !important;
    }

    #header.album-global-header.compact h1 {
        flex-basis: 190px !important;
        max-width: 190px !important;
    }

    #header.album-global-header.compact #search-container {
        flex-basis: 210px !important;
        width: 210px !important;
        max-width: 210px !important;
    }

    #header.album-global-header.compact #progress-container {
        flex-basis: 170px !important;
        width: 170px !important;
    }

    #header.album-global-header.compact .stats-container {
        min-width: 310px !important;
        gap: 6px !important;
    }

    #header.album-global-header.compact .stats-btn,
    #header.album-global-header.compact .btn-login-header {
        min-width: 78px !important;
        height: 32px !important;
        padding: 0 8px !important;
        font-size: 9.8px !important;
    }

    #header.album-global-header.compact .btn-intercambios {
        min-width: 98px !important;
    }
}

/* ==========================================================
   HOTFIX SOLO ESCRITORIO: progreso contenido + banderas visibles
   No altera móvil ni la estructura del banner.
   ========================================================== */
@media screen and (min-width: 1024px) {
    #header.album-global-header.compact {
        height: var(--h-compact) !important;
        overflow: visible !important;
        background: var(--banner-gradient-compact) !important;
    }

    #header.album-global-header.compact .header-content {
        height: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(12px, 1.2vw, 22px) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #header.album-global-header.compact #progress-container {
        position: relative !important;
        display: block !important;
        flex: 0 0 clamp(170px, 15vw, 230px) !important;
        width: clamp(170px, 15vw, 230px) !important;
        max-width: clamp(170px, 15vw, 230px) !important;
        min-width: 170px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        contain: paint !important;
        isolation: isolate !important;
        border-radius: 20px !important;
        background: linear-gradient(180deg, rgba(40,40,40,.92), rgba(18,18,18,.94)) !important;
        border: 2px solid rgba(255,193,7,.82) !important;
        box-shadow: inset 0 3px 5px rgba(0,0,0,.82), 0 4px 10px rgba(0,0,0,.45) !important;
        transform: none !important;
        align-self: center !important;
        vertical-align: middle !important;
        clip-path: inset(0 round 20px) !important;
    }

    #header.album-global-header.compact #progress-container::before {
        content: '' !important;
        position: absolute !important;
        top: 3px !important;
        left: 12% !important;
        width: 76% !important;
        max-width: 76% !important;
        height: 28% !important;
        max-height: 28% !important;
        border-radius: 10px !important;
        background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.05)) !important;
        pointer-events: none !important;
        z-index: 3 !important;
        transform: none !important;
        overflow: hidden !important;
    }

    #header.album-global-header.compact #progress-container > #progress-bar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        z-index: 1 !important;
        overflow: hidden !important;
        contain: paint !important;
        background: linear-gradient(270deg, #c1121f, #ff3b30, #c1121f) !important;
        background-size: 300% 300% !important;
        animation: waveFlow 4s ease infinite !important;
        box-shadow: inset 0 -3px 6px rgba(0,0,0,.4), inset 0 3px 6px rgba(255,255,255,.2) !important;
    }

    #header.album-global-header.compact #progress-container > #progress-text {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 8px !important;
        margin: 0 !important;
        transform: none !important;
        text-align: center !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: .70rem !important;
        z-index: 4 !important;
        pointer-events: none !important;
    }

    #header.album-global-header .banner-language-flag img,
    #header.album-global-header .banner-language-flag-option img,
    #header.album-global-header img.banner-flag-img {
        display: block !important;
        width: 18px !important;
        height: 13px !important;
        min-width: 18px !important;
        object-fit: cover !important;
        border-radius: 2px !important;
        box-shadow: 0 0 0 1px rgba(255,255,255,.25) !important;
    }
}


/* ==========================================================
   Modal de aviso: nueva sección de Intercambios
   ========================================================== */
.trade-feature-notice-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(0, 0, 0, 0.72) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.18s ease, visibility 0.18s ease !important;
    box-sizing: border-box !important;
}

.trade-feature-notice-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.trade-feature-notice-card {
    width: min(92vw, 480px) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%) !important;
    color: #202020 !important;
    border-radius: 18px !important;
    border: 2px solid #ffc107 !important;
    border-left: 8px solid #970223 !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.8) !important;
    padding: 24px 24px 22px !important;
    position: relative !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transform: translateY(12px) scale(0.98) !important;
    transition: transform 0.18s ease !important;
    font-family: sans-serif !important;
}

.trade-feature-notice-overlay.show .trade-feature-notice-card {
    transform: translateY(0) scale(1) !important;
}

.trade-feature-notice-close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(151, 2, 35, 0.2) !important;
    background: rgba(151, 2, 35, 0.08) !important;
    color: #970223 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.trade-feature-notice-icon {
    font-size: 34px !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
}

.trade-feature-notice-card h2 {
    margin: 0 0 10px !important;
    color: #970223 !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 1.45rem !important;
    line-height: 1.1 !important;
}

.trade-feature-notice-card p {
    margin: 0 auto 18px !important;
    color: #444 !important;
    line-height: 1.5 !important;
    font-size: 0.96rem !important;
    max-width: 390px !important;
}

.trade-feature-notice-action,
.trade-feature-notice-secondary {
    min-height: 38px !important;
    border-radius: 12px !important;
    padding: 0 18px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 4px 5px 0 !important;
}

.trade-feature-notice-action {
    background: linear-gradient(180deg, #990000 0%, #770000 100%) !important;
    color: #fff !important;
    border: 1px solid #ffc107 !important;
    border-bottom: 4px solid rgba(0,0,0,0.35) !important;
}

.trade-feature-notice-secondary {
    background: #ffffff !important;
    color: #770000 !important;
    border: 1px solid rgba(119, 0, 0, 0.25) !important;
    border-bottom: 4px solid rgba(119, 0, 0, 0.22) !important;
}

body.dark-mode .trade-feature-notice-card {
    background: linear-gradient(180deg, #1b1f2b 0%, #111620 100%) !important;
    color: #eeeeee !important;
    border-color: rgba(255,193,7,0.9) !important;
    border-left-color: #ffc107 !important;
}

body.dark-mode .trade-feature-notice-card h2 {
    color: #ffc107 !important;
}

body.dark-mode .trade-feature-notice-card p {
    color: #e6e6e6 !important;
}

body.dark-mode .trade-feature-notice-close {
    background: rgba(255,193,7,0.12) !important;
    color: #ffc107 !important;
    border-color: rgba(255,193,7,0.35) !important;
}

body.dark-mode .trade-feature-notice-secondary {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.18) !important;
}

.album-welcome-notice-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: rgba(0, 0, 0, 0.72) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.18s ease, visibility 0.18s ease !important;
    box-sizing: border-box !important;
}

.album-welcome-notice-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.album-welcome-notice-card {
    width: min(94vw, 560px) !important;
    max-height: min(88vh, 720px) !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f3e6 100%) !important;
    color: #26201a !important;
    border-radius: 18px !important;
    border: 2px solid #ffc107 !important;
    border-left: 8px solid #970223 !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.86) !important;
    padding: 24px 24px 22px !important;
    position: relative !important;
    box-sizing: border-box !important;
    transform: translateY(12px) scale(0.98) !important;
    transition: transform 0.18s ease !important;
    font-family: sans-serif !important;
}

.album-welcome-notice-overlay.show .album-welcome-notice-card {
    transform: translateY(0) scale(1) !important;
}

.album-welcome-notice-close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(151, 2, 35, 0.2) !important;
    background: rgba(151, 2, 35, 0.08) !important;
    color: #970223 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.album-welcome-notice-icon {
    font-size: 36px !important;
    line-height: 1 !important;
    margin: 0 0 10px !important;
    text-align: center !important;
}

.album-welcome-notice-card h2 {
    margin: 0 26px 12px !important;
    color: #970223 !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 1.45rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
}

.album-welcome-lead,
.album-welcome-subtitle {
    color: #43362c !important;
    line-height: 1.45 !important;
    font-size: 0.96rem !important;
    margin: 0 0 12px !important;
}

.album-welcome-subtitle {
    font-weight: 900 !important;
    color: #7a0000 !important;
}

.album-welcome-list {
    display: grid !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    list-style: none !important;
}

.album-welcome-list li {
    display: flex !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(151, 2, 35, 0.06) !important;
    border: 1px solid rgba(151, 2, 35, 0.12) !important;
    color: #33271f !important;
    line-height: 1.35 !important;
    font-size: 0.93rem !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.album-welcome-list li span {
    flex: 0 0 26px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    text-align: center !important;
}

.album-welcome-list li div,
.album-welcome-list li p {
    margin: 0 !important;
    min-width: 0 !important;
}

.album-welcome-list li strong {
    color: #970223 !important;
    display: inline !important;
}

.album-welcome-notice-action {
    min-height: 42px !important;
    width: 100% !important;
    border-radius: 999px !important;
    border: 1px solid #ffc107 !important;
    border-bottom: 4px solid rgba(0,0,0,0.35) !important;
    background: linear-gradient(180deg, #990000 0%, #770000 100%) !important;
    color: #fff !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

body.dark-mode .album-welcome-notice-card {
    background: linear-gradient(180deg, #1b1f2b 0%, #111620 100%) !important;
    color: #eeeeee !important;
    border-color: rgba(255,193,7,0.9) !important;
    border-left-color: #ffc107 !important;
}

body.dark-mode .album-welcome-notice-card h2,
body.dark-mode .album-welcome-subtitle,
body.dark-mode .album-welcome-list li strong {
    color: #ffc107 !important;
}

body.dark-mode .album-welcome-lead,
body.dark-mode .album-welcome-list li {
    color: #f1f1f1 !important;
}

body.dark-mode .album-welcome-list li {
    background: rgba(255, 193, 7, 0.08) !important;
    border-color: rgba(255, 193, 7, 0.20) !important;
}

body.dark-mode .album-welcome-notice-close {
    background: rgba(255,193,7,0.12) !important;
    color: #ffc107 !important;
    border-color: rgba(255,193,7,0.35) !important;
}

.empty-account-warning-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: rgba(0, 0, 0, 0.72) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.18s ease, visibility 0.18s ease !important;
    box-sizing: border-box !important;
}

.empty-account-warning-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.empty-account-warning-card {
    width: min(92vw, 460px) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f3e6 100%) !important;
    color: #26201a !important;
    border-radius: 18px !important;
    border: 2px solid #ffc107 !important;
    border-left: 8px solid #970223 !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.86) !important;
    padding: 24px !important;
    position: relative !important;
    box-sizing: border-box !important;
    text-align: center !important;
    transform: translateY(12px) scale(0.98) !important;
    transition: transform 0.18s ease !important;
}

.empty-account-warning-overlay.show .empty-account-warning-card {
    transform: translateY(0) scale(1) !important;
}

.empty-account-warning-close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(151, 2, 35, 0.2) !important;
    background: rgba(151, 2, 35, 0.08) !important;
    color: #970223 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.empty-account-warning-icon {
    font-size: 34px !important;
    line-height: 1 !important;
    margin-bottom: 10px !important;
}

.empty-account-warning-card h2 {
    margin: 0 28px 12px !important;
    color: #970223 !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 1.32rem !important;
    line-height: 1.12 !important;
}

.empty-account-warning-card p {
    margin: 0 auto 12px !important;
    color: #43362c !important;
    line-height: 1.45 !important;
    font-size: 0.96rem !important;
    max-width: 370px !important;
}

.album-global-help-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 7200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: rgba(0, 0, 0, 0.70) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.18s ease, visibility 0.18s ease !important;
    box-sizing: border-box !important;
}

.album-global-help-modal.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.album-global-help-card {
    width: min(94vw, 560px) !important;
    max-height: 88vh !important;
    overflow: auto !important;
    background: linear-gradient(180deg, #ffffff 0%, #fff8e4 100%) !important;
    color: #2c241d !important;
    border: 2px solid #ffc107 !important;
    border-left: 8px solid #970223 !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important;
    padding: 24px !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.album-global-help-card h2 {
    margin: 0 40px 14px 0 !important;
    color: #970223 !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 1.45rem !important;
    line-height: 1.1 !important;
}

.album-global-help-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(151, 2, 35, 0.22) !important;
    background: rgba(151, 2, 35, 0.08) !important;
    color: #970223 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.album-global-help-list {
    display: grid !important;
    gap: 10px !important;
}

.album-global-help-item {
    border-radius: 12px !important;
    border: 1px solid rgba(151, 2, 35, 0.13) !important;
    background: rgba(255, 255, 255, 0.68) !important;
    padding: 12px 14px !important;
}

.album-global-help-item strong {
    display: block !important;
    color: #970223 !important;
    font-weight: 900 !important;
    margin-bottom: 4px !important;
}

.album-global-help-item p {
    margin: 0 !important;
    color: #43362c !important;
    line-height: 1.42 !important;
    font-size: 0.95rem !important;
}

body.dark-mode .album-global-help-card {
    background: linear-gradient(180deg, #1b1f2b 0%, #111620 100%) !important;
    color: #eeeeee !important;
    border-color: rgba(255,193,7,0.9) !important;
    border-left-color: #ffc107 !important;
}

body.dark-mode .album-global-help-card h2,
body.dark-mode .album-global-help-item strong {
    color: #ffc107 !important;
}

body.dark-mode .album-global-help-item {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 193, 7, 0.20) !important;
}

body.dark-mode .album-global-help-item p {
    color: #eeeeee !important;
}

body.dark-mode .album-global-help-close {
    background: rgba(255,193,7,0.12) !important;
    color: #ffc107 !important;
    border-color: rgba(255,193,7,0.35) !important;
}

@media screen and (max-width: 640px) {
    .album-global-help-card {
        padding: 22px 16px 16px !important;
        border-radius: 16px !important;
    }

    .album-global-help-card h2 {
        font-size: 1.25rem !important;
    }

    .album-global-help-item {
        padding: 11px 12px !important;
    }
}

.empty-account-warning-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 16px !important;
}

.empty-account-warning-actions button {
    min-height: 40px !important;
    border-radius: 999px !important;
    padding: 0 18px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    border: 1px solid rgba(122, 0, 0, 0.22) !important;
}

.empty-account-switch {
    background: linear-gradient(180deg, #990000 0%, #770000 100%) !important;
    color: #fff !important;
    border-color: #ffc107 !important;
    border-bottom: 4px solid rgba(0,0,0,0.35) !important;
}

.empty-account-ok {
    background: #fff8df !important;
    color: #770000 !important;
    border-bottom: 4px solid rgba(119, 0, 0, 0.20) !important;
}

body.dark-mode .empty-account-warning-card {
    background: linear-gradient(180deg, #1b1f2b 0%, #111620 100%) !important;
    color: #eeeeee !important;
    border-color: rgba(255,193,7,0.9) !important;
    border-left-color: #ffc107 !important;
}

body.dark-mode .empty-account-warning-card h2 {
    color: #ffc107 !important;
}

body.dark-mode .empty-account-warning-card p {
    color: #e6e6e6 !important;
}

body.dark-mode .empty-account-warning-close,
body.dark-mode .empty-account-ok {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.18) !important;
}

.btn-login-header.last-login-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    text-align: center !important;
    max-width: 42px !important;
}

.last-login-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    flex: 0 0 34px !important;
    background-size: cover !important;
    background-position: center !important;
    border: 2px solid rgba(255, 193, 7, 0.9) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.24) !important;
}

.last-login-text {
    display: none !important;
}

.last-login-text small,
.last-login-text strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.last-login-text small {
    font-size: 9px !important;
    opacity: 0.78 !important;
    font-weight: 800 !important;
}

.last-login-text strong {
    font-size: 12px !important;
    max-width: 168px !important;
}

@media screen and (max-width: 520px) {
    .btn-login-header.last-login-button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
    }

    .last-login-avatar {
        width: 30px !important;
        height: 30px !important;
        flex-basis: 30px !important;
    }
}

@media screen and (max-width: 768px) {
    .trade-feature-notice-card {
        padding: 22px 18px 18px !important;
        border-radius: 16px !important;
    }

    .trade-feature-notice-card h2 {
        font-size: 1.24rem !important;
    }

    .trade-feature-notice-card p {
        font-size: 0.9rem !important;
    }

    .trade-feature-notice-action,
    .trade-feature-notice-secondary {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}


/* ==========================================================
   AJUSTE ÚNICO: bandera del selector de idioma en celular
   Usa el mismo formato de imagen que en escritorio.
   ========================================================== */
@media screen and (max-width: 768px) {
    #header.album-global-header .banner-language-flag,
    #header.album-global-header .banner-language-flag-option {
        width: 18px !important;
        min-width: 18px !important;
        height: 13px !important;
        min-height: 13px !important;
        font-size: 0 !important;
        line-height: 0 !important;
        overflow: hidden !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #header.album-global-header .banner-language-flag img,
    #header.album-global-header .banner-language-flag-option img,
    #header.album-global-header img.banner-flag-img {
        display: block !important;
        width: 18px !important;
        min-width: 18px !important;
        height: 13px !important;
        min-height: 13px !important;
        object-fit: cover !important;
        border-radius: 2px !important;
        box-shadow: 0 0 0 1px rgba(255,255,255,.25) !important;
        flex: 0 0 18px !important;
    }

    #header.album-global-header .banner-language-toggle {
        min-width: 86px !important;
        gap: 6px !important;
    }

    #header.album-global-header .banner-language-option {
        gap: 8px !important;
    }
}

/* ==========================================================
   Botones de vista limpios: conserva clases, eventos y estado active
   ========================================================== */
.view-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 0 auto 18px !important;
}

.view-controls .view-btn {
    min-width: 132px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(122, 0, 0, 0.20) !important;
    background: #ffffff !important;
    color: #7a0000 !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 6px 15px rgba(122, 0, 0, 0.10) !important;
    transform: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}

.view-controls .view-btn:hover {
    background: #fff8df !important;
    border-color: rgba(122, 0, 0, 0.34) !important;
    box-shadow: 0 8px 18px rgba(122, 0, 0, 0.16) !important;
    transform: translateY(-1px) !important;
}

.view-controls .view-btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 4px 10px rgba(122, 0, 0, 0.12) !important;
}

.view-controls .view-btn.active {
    background: #7a0000 !important;
    color: #ffffff !important;
    border-color: #7a0000 !important;
    box-shadow: 0 8px 18px rgba(122, 0, 0, 0.22) !important;
}

.view-controls .extra-stickers-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
    background: #fff8df !important;
    border-color: rgba(151, 2, 35, 0.28) !important;
    min-width: 92px !important;
    min-height: 36px !important;
    max-width: 108px !important;
    padding: 0 12px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.05 !important;
    vertical-align: middle !important;
}

.view-controls .market-stickers-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 193, 7, 0.16) !important;
    border-color: rgba(151, 2, 35, 0.24) !important;
    color: #7a0000 !important;
    min-width: 86px !important;
    max-width: 98px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.05 !important;
    vertical-align: middle !important;
}

.view-controls .market-stickers-link:hover {
    background: rgba(255, 193, 7, 0.28) !important;
    border-color: rgba(151, 2, 35, 0.38) !important;
}

.view-controls .import-data-home-link,
.view-controls .download-home-link {
    background: #ffc107 !important;
    border-color: #a67c00 !important;
    color: #7a0000 !important;
}

.view-controls .import-data-home-link:hover,
.view-controls .download-home-link:hover {
    background: #ffd34d !important;
    border-color: #8a6500 !important;
    color: #7a0000 !important;
}

.view-controls .import-data-home-link:active,
.view-controls .download-home-link:active {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(122, 0, 0, 0.24) !important;
    color: #7a0000 !important;
    transform: translateY(1px) scale(0.98) !important;
    box-shadow: inset 0 2px 7px rgba(122, 0, 0, 0.18), 0 2px 8px rgba(122, 0, 0, 0.10) !important;
}

.subtle-affiliate-link {
    display: inline-block !important;
    margin-top: 6px !important;
    color: rgba(122, 0, 0, 0.74) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(122, 0, 0, 0.22) !important;
}

.subtle-affiliate-link:hover {
    color: #7a0000 !important;
    border-bottom-color: rgba(122, 0, 0, 0.48) !important;
}

.country-block.collapsed .grid {
    display: none !important;
}

.country-block.collapsed {
    max-height: 76px !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

body.dark-mode .view-controls .view-btn {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffc107 !important;
    border-color: rgba(255, 193, 7, 0.30) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24) !important;
}

body.dark-mode .view-controls .view-btn:hover {
    background: rgba(255, 193, 7, 0.16) !important;
    border-color: rgba(255, 193, 7, 0.52) !important;
}

body.dark-mode .view-controls .market-stickers-link {
    color: #ffe08a !important;
    background: rgba(255, 193, 7, 0.12) !important;
}

body.dark-mode .view-controls .import-data-home-link,
body.dark-mode .view-controls .download-home-link {
    background: #ffc107 !important;
    border-color: rgba(255, 224, 138, 0.80) !important;
    color: #2a1d00 !important;
}

body.dark-mode .view-controls .import-data-home-link:hover,
body.dark-mode .view-controls .download-home-link:hover {
    background: #ffd34d !important;
    color: #2a1d00 !important;
}

body.dark-mode .view-controls .import-data-home-link:active,
body.dark-mode .view-controls .download-home-link:active {
    background: rgba(18, 21, 30, 0.92) !important;
    border-color: rgba(255, 193, 7, 0.46) !important;
    color: #ffc107 !important;
}

body.dark-mode .subtle-affiliate-link {
    color: rgba(255, 224, 138, 0.82) !important;
    border-bottom-color: rgba(255, 224, 138, 0.28) !important;
}

body.dark-mode .view-controls .view-btn.active {
    background: #ffc107 !important;
    color: #2a1d00 !important;
    border-color: #ffc107 !important;
}

#header.album-global-header .menu-count-wrap {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 2px !important;
    font: inherit !important;
    color: inherit !important;
}

#header.album-global-header #total-repeats.num-repetidas,
#header.album-global-header .num-repetidas {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    max-width: none !important;
    height: 18px !important;
    margin: 0 0 0 3px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #970223 !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    box-shadow: none !important;
    transform: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
}

.section-icon-fallback {
    display: inline-flex !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 24px !important;
    margin-right: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
}

@media screen and (max-width: 768px) {
    .view-controls {
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .view-controls .view-btn {
        flex: 1 1 136px !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 0 12px !important;
        font-size: 0.84rem !important;
    }

    .view-controls .extra-stickers-link,
    .view-controls .market-stickers-link {
        margin-left: 0 !important;
        flex: 0 1 108px !important;
        align-self: center !important;
    }

    .view-controls .market-stickers-link {
        flex-basis: 96px !important;
        max-width: 96px !important;
        font-size: 0.76rem !important;
        align-self: center !important;
    }
}

/* ==========================================================
   Botones del banner minimalistas: conserva medidas responsive
   ========================================================== */
#header.album-global-header .stats-btn,
#header.album-global-header .btn-login-header,
#header.album-global-header .banner-language-toggle,
#header.album-global-header .banner-theme-toggle,
#header.album-global-header .language-toggle,
#header.album-global-header .theme-toggle-btn {
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
    border-bottom-width: 1px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
}

#header.album-global-header .stats-btn:hover,
#header.album-global-header .btn-login-header:hover,
#header.album-global-header .banner-language-toggle:hover,
#header.album-global-header .banner-theme-toggle:hover,
#header.album-global-header .language-toggle:hover,
#header.album-global-header .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.54) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20) !important;
    transform: translateY(-1px) !important;
}

#header.album-global-header .stats-btn:active,
#header.album-global-header .btn-login-header:active,
#header.album-global-header .banner-language-toggle:active,
#header.album-global-header .banner-theme-toggle:active,
#header.album-global-header .language-toggle:active,
#header.album-global-header .theme-toggle-btn:active {
    transform: translateY(1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16) !important;
}

#header.album-global-header .btn-login-header {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #7a0000 !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
}

#header.album-global-header .btn-repetidas,
#header.album-global-header .btn-info,
#header.album-global-header .btn-perfil,
#header.album-global-header .btn-pronosticos,
#header.album-global-header .btn-inicio,
#header.album-global-header .btn-intercambios {
    border-color: rgba(255, 255, 255, 0.34) !important;
}

#header.album-global-header .btn-intercambios {
    background: rgba(255, 255, 255, 0.14) !important;
}

#header.album-global-header .btn-inicio:hover,
#header.album-global-header .btn-perfil:hover,
#header.album-global-header .btn-pronosticos:hover,
#header.album-global-header .btn-info:hover {
    border-color: rgba(255, 255, 255, 0.92) !important;
}

#header.album-global-header .btn-repetidas:hover {
    border-color: rgba(255, 193, 7, 0.95) !important;
}

#header.album-global-header .btn-intercambios:hover {
    border-color: rgba(188, 80, 255, 0.95) !important;
}

#header.album-global-header .btn-inicio:active,
#header.album-global-header .btn-perfil:active,
#header.album-global-header .btn-pronosticos:active,
#header.album-global-header .btn-info:active {
    background: #ffffff !important;
    color: #7a0000 !important;
    border-color: #ffffff !important;
}

#header.album-global-header .btn-repetidas:active {
    background: #ffc107 !important;
    color: #2a1d00 !important;
    border-color: #ffc107 !important;
}

#header.album-global-header .btn-intercambios:active {
    background: #9c4dff !important;
    color: #ffffff !important;
    border-color: #9c4dff !important;
}

body.dark-mode #header.album-global-header .stats-btn,
body.dark-mode #header.album-global-header .btn-login-header,
body.dark-mode #header.album-global-header .banner-language-toggle,
body.dark-mode #header.album-global-header .banner-theme-toggle,
body.dark-mode #header.album-global-header .language-toggle,
body.dark-mode #header.album-global-header .theme-toggle-btn {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    border-color: rgba(255, 193, 7, 0.34) !important;
}

body.dark-mode #header.album-global-header .btn-login-header {
    background: rgba(255, 193, 7, 0.92) !important;
    color: #2a1d00 !important;
}

/* ==========================================================
   Botones de descarga limpios: conserva azul Docs y verde Sheets
   ========================================================== */
.btn-action-download {
    border-radius: 999px !important;
    border: 1px solid rgba(122, 0, 0, 0.16) !important;
    border-left-width: 1px !important;
    border-bottom-width: 1px !important;
    background: #ffffff !important;
    color: #333333 !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.10) !important;
    transform: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

.btn-action-download.doc-style {
    border-color: rgba(0, 86, 179, 0.38) !important;
    color: #0056b3 !important;
}

.btn-action-download.sheet-style {
    border-color: rgba(25, 135, 84, 0.38) !important;
    color: #198754 !important;
}

.btn-action-download.doc-style:hover {
    background: rgba(0, 86, 179, 0.08) !important;
    border-color: #0056b3 !important;
    box-shadow: 0 8px 18px rgba(0, 86, 179, 0.16) !important;
    transform: translateY(-1px) !important;
}

.btn-action-download.sheet-style:hover {
    background: rgba(25, 135, 84, 0.08) !important;
    border-color: #198754 !important;
    box-shadow: 0 8px 18px rgba(25, 135, 84, 0.16) !important;
    transform: translateY(-1px) !important;
}

.btn-action-download.doc-style:active {
    background: #0056b3 !important;
    border-color: #0056b3 !important;
    color: #ffffff !important;
    transform: translateY(1px) !important;
}

.btn-action-download.sheet-style:active {
    background: #198754 !important;
    border-color: #198754 !important;
    color: #ffffff !important;
    transform: translateY(1px) !important;
}

body.dark-mode .btn-action-download {
    background: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24) !important;
}

/* ==========================================================
   Botones generales restantes
   ========================================================== */
.btn-back-bottom,
.btn-got-it,
.protected-access-actions button,
.protected-access-actions a,
.modal-content button,
.btn-check-all,
.action-btn,
.expand-trade-btn,
.delete-friend-btn,
.trade-notice-btn,
.trade-feature-notice-action,
.trade-feature-notice-secondary,
#guest-warning button {
    border-radius: 999px !important;
    border: 1px solid rgba(122, 0, 0, 0.20) !important;
    border-bottom-width: 1px !important;
    background: #ffffff !important;
    color: #7a0000 !important;
    min-height: 36px !important;
    padding: 8px 15px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 6px 15px rgba(122, 0, 0, 0.10) !important;
    transform: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

.btn-back-bottom:hover,
.btn-got-it:hover,
.protected-access-actions button:hover,
.protected-access-actions a:hover,
.modal-content button:hover,
.btn-check-all:hover,
.action-btn:hover,
.expand-trade-btn:hover,
.delete-friend-btn:hover,
.trade-notice-btn:hover,
.trade-feature-notice-action:hover,
.trade-feature-notice-secondary:hover,
#guest-warning button:hover {
    background: #fff8df !important;
    border-color: rgba(122, 0, 0, 0.38) !important;
    box-shadow: 0 8px 18px rgba(122, 0, 0, 0.16) !important;
    transform: translateY(-1px) !important;
}

.btn-back-bottom:active,
.btn-got-it:active,
.protected-access-actions button:active,
.protected-access-actions a:active,
.modal-content button:active,
.btn-check-all:active,
.action-btn:active,
.expand-trade-btn:active,
.delete-friend-btn:active,
.trade-notice-btn:active,
.trade-feature-notice-action:active,
.trade-feature-notice-secondary:active,
#guest-warning button:active {
    background: #7a0000 !important;
    border-color: #7a0000 !important;
    color: #ffffff !important;
    transform: translateY(1px) !important;
}

.action-btn.primary,
.trade-feature-notice-action,
.protected-access-actions button,
#guest-warning button {
    background: #7a0000 !important;
    border-color: #7a0000 !important;
    color: #ffffff !important;
}

.action-btn.primary:hover,
.trade-feature-notice-action:hover,
.protected-access-actions button:hover,
#guest-warning button:hover {
    background: #8b0d0d !important;
    border-color: #ffc107 !important;
}

.btn-check-all {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-color: rgba(255, 193, 7, 0.72) !important;
    background: #ffffff !important;
    color: #7a0000 !important;
    box-shadow: 0 5px 13px rgba(122, 0, 0, 0.12) !important;
}

.btn-check-all:hover {
    background: #fff8df !important;
    border-color: #ffc107 !important;
}

.btn-check-all.active,
.country-title-wrapper.completed .btn-check-all {
    background: #ffc107 !important;
    color: #3b2500 !important;
    border-color: #ffc107 !important;
}

.action-btn.accept {
    border-color: rgba(25, 135, 84, 0.42) !important;
    color: #198754 !important;
}

.action-btn.accept:hover {
    background: rgba(25, 135, 84, 0.08) !important;
    border-color: #198754 !important;
}

.action-btn.accept:active {
    background: #198754 !important;
    border-color: #198754 !important;
    color: #ffffff !important;
}

.action-btn.decline,
.delete-friend-btn {
    border-color: rgba(220, 53, 69, 0.38) !important;
    color: #dc3545 !important;
}

.action-btn.decline:hover,
.delete-friend-btn:hover {
    background: rgba(220, 53, 69, 0.08) !important;
    border-color: #dc3545 !important;
}

.action-btn.decline:active,
.delete-friend-btn:active {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.action-btn:disabled,
.action-btn[disabled] {
    opacity: 0.56 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

body.dark-mode .btn-back-bottom,
body.dark-mode .btn-got-it,
body.dark-mode .protected-access-actions button,
body.dark-mode .protected-access-actions a,
body.dark-mode .modal-content button,
body.dark-mode .btn-check-all,
body.dark-mode .action-btn,
body.dark-mode .expand-trade-btn,
body.dark-mode .delete-friend-btn,
body.dark-mode .trade-notice-btn,
body.dark-mode .trade-feature-notice-action,
body.dark-mode .trade-feature-notice-secondary,
body.dark-mode #guest-warning button {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffc107 !important;
    border-color: rgba(255, 193, 7, 0.30) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24) !important;
}

body.dark-mode .btn-check-all.completed,
body.dark-mode .btn-check-all.active,
body.dark-mode .country-title-wrapper.completed .btn-check-all {
    background: linear-gradient(135deg, #00c853, #00b0ff) !important;
    color: #ffffff !important;
    border-color: #00e676 !important;
    box-shadow: 0 0 0 1px rgba(0, 230, 118, 0.25), 0 0 16px rgba(0, 200, 83, 0.32) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

body.dark-mode .action-btn.primary,
body.dark-mode .trade-feature-notice-action,
body.dark-mode .protected-access-actions button,
body.dark-mode #guest-warning button {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #2a1d00 !important;
}

/* Intercambios: botones y contadores dentro de amistades */
body.intercambios-page .compact-trade-card .trade-receive-pill {
    background: rgba(123, 44, 191, 0.30) !important;
    border-color: rgba(75, 21, 136, 0.48) !important;
    color: #4b1588 !important;
}

body.intercambios-page .compact-trade-card .trade-offer-pill {
    background: rgba(255, 193, 7, 0.30) !important;
    border-color: rgba(166, 124, 0, 0.50) !important;
    color: #3b2500 !important;
}

body.intercambios-page .compact-trade-card .trade-status-pill {
    background: rgba(249, 115, 22, 0.30) !important;
    border-color: rgba(184, 74, 0, 0.50) !important;
    color: #8a3a00 !important;
}

body.intercambios-page .compact-trade-card .trade-status-pill.incoming {
    background: rgba(25, 135, 84, 0.30) !important;
    border-color: rgba(15, 81, 50, 0.48) !important;
    color: #0f5132 !important;
}

body.intercambios-page .compact-trade-card .trade-actions .trade-notice-btn {
    background: rgba(123, 44, 191, 0.30) !important;
    border-color: rgba(75, 21, 136, 0.52) !important;
    color: #4b1588 !important;
}

body.intercambios-page .compact-trade-card .trade-actions .trade-notice-btn.incoming {
    background: rgba(25, 135, 84, 0.30) !important;
    border-color: rgba(15, 81, 50, 0.52) !important;
    color: #0f5132 !important;
}

body.intercambios-page .compact-trade-card .trade-actions .expand-trade-btn,
body.intercambios-page .compact-trade-card .friend-proposal-actions .action-btn,
body.intercambios-page .trade-chat-actions .action-btn,
body.intercambios-page .trade-confirm-actions .action-btn {
    background: rgba(122, 0, 0, 0.30) !important;
    border-color: rgba(79, 0, 0, 0.52) !important;
    color: #7a0000 !important;
}

body.intercambios-page .compact-trade-card .trade-actions .delete-friend-btn {
    background: rgba(220, 53, 69, 0.30) !important;
    border-color: rgba(143, 23, 35, 0.52) !important;
    color: #8f1723 !important;
}

body.intercambios-page .compact-trade-card .trade-actions .action-btn.accept,
body.intercambios-page .compact-trade-card .friend-proposal-actions .action-btn.accept,
body.intercambios-page .trade-chat-actions .action-btn.accept,
body.intercambios-page .trade-confirm-actions .action-btn.accept {
    background: rgba(25, 135, 84, 0.30) !important;
    border-color: rgba(15, 81, 50, 0.52) !important;
    color: #0f5132 !important;
}

body.intercambios-page .compact-trade-card .trade-selection-bar .action-btn.primary,
body.intercambios-page .compact-trade-card [data-send-trade] {
    background: rgba(249, 115, 22, 0.30) !important;
    border-color: rgba(184, 74, 0, 0.54) !important;
    color: #8a3a00 !important;
}

body.intercambios-page .compact-trade-card .trade-actions button:hover,
body.intercambios-page .compact-trade-card .friend-proposal-actions button:hover,
body.intercambios-page .trade-chat-actions button:hover,
body.intercambios-page .trade-confirm-actions button:hover,
body.intercambios-page .compact-trade-card [data-send-trade]:hover {
    filter: brightness(1.06) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

body.intercambios-page .compact-trade-card [data-send-trade]:disabled {
    background: rgba(249, 115, 22, 0.30) !important;
    border-color: rgba(184, 74, 0, 0.54) !important;
    color: #8a3a00 !important;
    opacity: 0.58 !important;
    cursor: not-allowed !important;
}

body.intercambios-page .compact-trade-card .trade-actions button,
body.intercambios-page .compact-trade-card .friend-proposal-actions button,
body.intercambios-page .compact-trade-card .trade-selection-bar button {
    min-height: 0 !important;
    height: auto !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    border-bottom-width: 1px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

body.intercambios-page .compact-trade-card .trade-actions .expand-trade-btn,
body.intercambios-page .compact-trade-card .friend-proposal-actions .action-btn,
body.intercambios-page .trade-chat-actions .action-btn,
body.intercambios-page .trade-confirm-actions .action-btn,
body.intercambios-page .compact-trade-card .trade-actions .delete-friend-btn,
body.intercambios-page .action-btn.decline,
body.intercambios-page .delete-friend-btn {
    background: rgba(123, 44, 191, 0.10) !important;
    border-color: rgba(123, 44, 191, 0.26) !important;
    color: #5b1684 !important;
    text-shadow: none !important;
}

body.dark-mode.intercambios-page .compact-trade-card .trade-actions .expand-trade-btn,
body.dark-mode.intercambios-page .compact-trade-card .friend-proposal-actions .action-btn,
body.dark-mode.intercambios-page .trade-chat-actions .action-btn,
body.dark-mode.intercambios-page .trade-confirm-actions .action-btn,
body.dark-mode.intercambios-page .compact-trade-card .trade-actions .delete-friend-btn,
body.dark-mode.intercambios-page .action-btn.decline,
body.dark-mode.intercambios-page .delete-friend-btn {
    background: rgba(123, 44, 191, 0.34) !important;
    border-color: rgba(207, 159, 255, 0.46) !important;
    color: #fff !important;
    text-shadow: none !important;
}

body.intercambios-page .compact-trade-card .trade-actions .expand-trade-btn:hover,
body.intercambios-page .compact-trade-card .friend-proposal-actions .action-btn:hover,
body.intercambios-page .trade-chat-actions .action-btn:hover,
body.intercambios-page .trade-confirm-actions .action-btn:hover,
body.intercambios-page .compact-trade-card .trade-actions .delete-friend-btn:hover,
body.intercambios-page .action-btn.decline:hover,
body.intercambios-page .delete-friend-btn:hover {
    background: rgba(123, 44, 191, 0.92) !important;
    border-color: rgba(75, 21, 136, 0.82) !important;
    color: #fff !important;
}

/* Indicador compacto de repetidas en Inicio y Repetidas */
.country-block:not(.collapsed),
.country-block:not(.collapsed) .grid,
#album-container .grid,
#repetidas-content .grid,
.repetidas-grid {
    overflow: visible !important;
}

#album-container .country-block:not(.collapsed),
#album-container .country-block:not(.collapsed) .grid {
    contain: layout style !important;
}

#album-container .grid,
#repetidas-content .grid,
.repetidas-grid {
    padding-top: 7px !important;
}

.sticker {
    overflow: visible !important;
}

.repeat-badge,
.repeat-tag {
    top: -5px !important;
    right: -5px !important;
    width: 19px !important;
    min-width: 19px !important;
    height: 19px !important;
    min-height: 19px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #ff3b30 !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.24) !important;
    z-index: 5 !important;
}

@media screen and (max-width: 768px) {
    .repeat-badge,
    .repeat-tag {
        top: -4px !important;
        right: -4px !important;
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        font-size: 8.5px !important;
    }
}

/* Refuerzo de modo oscuro para tarjetas y paneles con estilos locales */
body.dark-mode .section-card,
body.dark-mode .estadio-card,
body.dark-mode .estadio-info,
body.dark-mode .modal-content,
body.dark-mode .help-icon,
body.dark-mode .help-item,
body.dark-mode .protected-access-card,
body.dark-mode .request-card,
body.dark-mode .friend-card,
body.dark-mode .proposal-card,
body.dark-mode .trade-confirm-dialog,
body.dark-mode .trade-confirm-section,
body.dark-mode .trade-pick-column,
body.dark-mode .compact-trade-card .match-block {
    background: rgba(24, 28, 38, 0.94) !important;
    color: #eeeeee !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

body.dark-mode .estadio-info,
body.dark-mode .help-icon,
body.dark-mode .trade-confirm-section,
body.dark-mode .trade-pick-column,
body.dark-mode .compact-trade-card .match-block {
    background: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .section-card > div[style*="border-bottom"],
body.dark-mode .section-card [style*="border-bottom"] {
    border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

body.dark-mode .section-card h2,
body.dark-mode .section-card h3,
body.dark-mode .section-card p,
body.dark-mode .section-card span,
body.dark-mode .estadio-info p,
body.dark-mode .help-text h4,
body.dark-mode .help-text p,
body.dark-mode .modal-content,
body.dark-mode .modal-content p,
body.dark-mode .modal-content span {
    color: #eeeeee !important;
}

body.dark-mode .section-card .highlight,
body.dark-mode .section-card .label,
body.dark-mode .estadio-info .label,
body.dark-mode .modal-content h2,
body.dark-mode .modal-content h3 {
    color: #ffc107 !important;
}

body.dark-mode .img-caption,
body.dark-mode .muted,
body.dark-mode .trade-pick-hint,
body.dark-mode .trade-selection-summary {
    color: #d9dce5 !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    border-color: rgba(255, 193, 7, 0.42) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: rgba(255, 255, 255, 0.66) !important;
}

.footer-links-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.active-users-widget {
    margin-right: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #666666 !important;
    font-weight: 800 !important;
}

.active-users-widget strong {
    color: #880000 !important;
}

.active-users-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #28a745 !important;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.16) !important;
}

body.dark-mode .active-users-widget {
    color: #d9dce5 !important;
}

body.dark-mode .active-users-widget strong {
    color: #ffc107 !important;
}

#header.album-global-header .btn-intercambios .nav-label-long {
    display: inline !important;
}

@media screen and (max-width: 768px) {
    #header.album-global-header .btn-intercambios {
        min-width: 92px !important;
    }

    #header.album-global-header .btn-intercambios .nav-label-long {
        display: inline !important;
    }
}

/* ==========================================================
   Header minimalista tipo barra de app
   ========================================================== */
#header.album-global-header {
    --h-normal: 118px !important;
    --h-normal-index: 118px !important;
    --h-compact: 86px !important;
    --h-mobile: 154px !important;
    --h-mobile-index: 154px !important;
    --h-mobile-no-search: 154px !important;
    --h-mobile-compact: 132px !important;
    --h-mobile-compact-no-search: 154px !important;
    height: var(--h-normal) !important;
    min-height: 0 !important;
    background: linear-gradient(135deg, rgba(122, 0, 0, 0.98) 0%, rgba(151, 2, 35, 0.97) 48%, rgba(196, 137, 0, 0.97) 100%) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 193, 7, 0.58) !important;
    box-shadow: 0 4px 14px rgba(72, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    contain: layout style !important;
}

#header.album-global-header::after {
    display: none !important;
}

#header.album-global-header[data-page="index"],
#header.album-global-header.no-search {
    height: var(--h-normal) !important;
}

#header.album-global-header.compact,
#header.album-global-header.compact.no-search {
    height: var(--h-compact) !important;
    background: linear-gradient(135deg, rgba(111, 0, 0, 0.98) 0%, rgba(137, 12, 26, 0.97) 50%, rgba(177, 119, 0, 0.97) 100%) !important;
}

#header.album-global-header .header-content,
#header.album-global-header.compact .header-content,
#header.album-global-header.compact.no-search .header-content {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    padding: 12px 18px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 52px 36px !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: stretch !important;
}

#header.album-global-header .banner-main-row {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) minmax(360px, 560px) minmax(260px, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
}

#header.album-global-header.no-search .banner-main-row {
    grid-template-columns: minmax(260px, 1fr) minmax(360px, 560px) minmax(260px, 1fr) !important;
}

#header.album-global-header .banner-left {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    justify-content: flex-start !important;
}

#header.album-global-header .banner-actions {
    justify-self: end !important;
}

#header.album-global-header h1,
#header.album-global-header.compact h1 {
    order: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    color: #ffffff !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: clamp(1.12rem, 1.95vw, 1.72rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
}

#header.album-global-header .banner-menu-dropdown {
    position: relative !important;
    flex: 0 0 auto !important;
    z-index: 40 !important;
}

#header.album-global-header .banner-icon-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

#header.album-global-header .banner-icon-btn:hover,
#header.album-global-header .banner-menu-dropdown.open .banner-menu-toggle {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    transform: none !important;
}

#header.album-global-header .banner-icon-btn:active {
    background: rgba(255, 255, 255, 0.24) !important;
    transform: translateY(1px) !important;
}

#header.album-global-header .banner-menu-toggle {
    background: rgba(255, 255, 255, 0.20) !important;
    flex-direction: column !important;
    gap: 0 !important;
}

#header.album-global-header .banner-menu-toggle span {
    display: block !important;
    width: 21px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    margin: 3px 0 !important;
}

#header.album-global-header .banner-menu-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    width: min(86vw, 270px) !important;
    padding: 8px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(60, 64, 67, 0.14) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18) !important;
    display: none !important;
    text-align: left !important;
    z-index: 5100 !important;
    overflow: visible !important;
}

#header.album-global-header .banner-menu-dropdown.open .banner-menu-panel {
    display: block !important;
}

#header.album-global-header .banner-menu-section {
    display: grid !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
}

#header.album-global-header .banner-menu-legal {
    margin-top: 7px !important;
    padding-top: 7px !important;
    border-top: 1px solid rgba(122, 0, 0, 0.12) !important;
}

#header.album-global-header .menu-nav-link,
#header.album-global-header .banner-menu-action,
#header.album-global-header .banner-language-option {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #3c4043 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-align: left !important;
    cursor: pointer !important;
}

#header.album-global-header .menu-nav-link:hover,
#header.album-global-header .menu-nav-link.active,
#header.album-global-header .banner-menu-action:hover,
#header.album-global-header .banner-language-option:hover,
#header.album-global-header .banner-language-option.active {
    background: rgba(122, 0, 0, 0.08) !important;
    color: #7a0000 !important;
}

#header.album-global-header .banner-menu-panel .header-tools {
    order: -1 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 0 8px 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(60, 64, 67, 0.12) !important;
    position: relative !important;
    z-index: 6100 !important;
}

#header.album-global-header .banner-menu-panel .banner-language-dropdown.open {
    z-index: 6300 !important;
}

#header.album-global-header .banner-menu-panel .banner-language-menu {
    z-index: 6400 !important;
}

#header.album-global-header .banner-menu-panel .menu-nav-link,
#header.album-global-header .banner-menu-panel .banner-menu-action {
    box-sizing: border-box !important;
    flex: none !important;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
}

#header.album-global-header .banner-menu-panel .menu-nav-link > span:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#header.album-global-header .menu-details-group {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

#header.album-global-header .menu-details-toggle {
    justify-content: space-between !important;
}

#header.album-global-header .menu-details-arrow {
    flex: 0 0 auto !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    transition: transform .18s ease !important;
}

#header.album-global-header .menu-details-group.open .menu-details-arrow {
    transform: rotate(180deg) !important;
}

#header.album-global-header .menu-details-panel {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    left: calc(100% + 8px) !important;
    width: min(220px, 72vw) !important;
    gap: 4px !important;
    padding: 8px !important;
    border: 1px solid rgba(122, 0, 0, 0.14) !important;
    border-left: 3px solid rgba(122, 0, 0, 0.26) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18) !important;
    z-index: 5200 !important;
}

#header.album-global-header .menu-details-group.open .menu-details-panel {
    display: grid !important;
}

#header.album-global-header .menu-details-link {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.88rem !important;
    color: #5f6368 !important;
}

#header.album-global-header .menu-details-link:hover,
#header.album-global-header .menu-details-link.active {
    color: #7a0000 !important;
    background: rgba(122, 0, 0, 0.07) !important;
}

@media screen and (max-width: 520px) {
    #header.album-global-header .menu-details-panel {
        left: 42px !important;
        right: 8px !important;
        width: auto !important;
    }
}

.download-actions-hidden {
    display: none !important;
}

.album-download-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: rgba(0, 0, 0, 0.56) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .18s ease, visibility .18s ease !important;
}

.album-download-modal-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.album-download-modal-card {
    width: min(94vw, 460px) !important;
    padding: 24px !important;
    border-radius: 18px !important;
    border: 2px solid #ffc107 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f2e8 100%) !important;
    color: #2b2b2b !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34) !important;
    position: relative !important;
    transform: translateY(8px) scale(.98) !important;
    transition: transform .18s ease !important;
}

.album-download-modal-overlay.show .album-download-modal-card {
    transform: translateY(0) scale(1) !important;
}

.album-download-modal-close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(122, 0, 0, .22) !important;
    background: #fff !important;
    color: #7a0000 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.album-download-modal-card h2 {
    margin: 0 36px 8px 0 !important;
    color: #7a0000 !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 1.45rem !important;
    line-height: 1.1 !important;
}

.album-download-modal-card p {
    margin: 0 0 18px !important;
    color: #555 !important;
    font-size: .95rem !important;
    line-height: 1.45 !important;
}

.album-download-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.album-share-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(122, 0, 0, .12) !important;
}

.album-download-grid button,
.album-share-grid button {
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(122, 0, 0, .24) !important;
    background: #ffffff !important;
    color: #7a0000 !important;
    font-size: .9rem !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 5px 14px rgba(122, 0, 0, .12) !important;
}

.album-share-grid button {
    min-height: 42px !important;
    padding: 0 8px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: .82rem !important;
    background: #f7fbff !important;
    border-color: rgba(0, 94, 184, .28) !important;
    color: #005eb8 !important;
}

.album-download-grid button:hover,
.album-share-grid button:hover {
    background: #fff8df !important;
    border-color: #ffc107 !important;
    transform: translateY(-1px) !important;
}

body.dark-mode .album-download-modal-card {
    background: linear-gradient(180deg, #1b1f2b 0%, #111620 100%) !important;
    color: #eeeeee !important;
    border-color: rgba(255, 193, 7, .9) !important;
}

body.dark-mode .album-download-modal-card h2 {
    color: #ffc107 !important;
}

body.dark-mode .album-download-modal-card p {
    color: #e8e8e8 !important;
}

body.dark-mode .album-share-grid {
    border-top-color: rgba(255, 255, 255, .14) !important;
}

body.dark-mode .album-download-grid button,
body.dark-mode .album-share-grid button,
body.dark-mode .album-download-modal-close {
    background: rgba(255, 255, 255, .10) !important;
    color: #ffc107 !important;
    border-color: rgba(255, 193, 7, .30) !important;
}

@media screen and (max-width: 520px) {
    .album-download-modal-card {
        padding: 22px 16px 18px !important;
    }

    .album-download-grid {
        grid-template-columns: 1fr !important;
    }

    .album-share-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .album-share-grid button {
        min-height: 40px !important;
        padding: 0 6px !important;
        font-size: .78rem !important;
    }
}

#header.album-global-header .header-tools {
    display: flex !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(60, 64, 67, 0.12) !important;
    gap: 6px !important;
    justify-content: stretch !important;
}

#header.album-global-header .banner-language-dropdown {
    position: relative !important;
    flex: 1 1 auto !important;
}

#header.album-global-header .banner-language-toggle,
#header.album-global-header .banner-theme-toggle {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(60, 64, 67, 0.16) !important;
    background: #ffffff !important;
    color: #3c4043 !important;
    box-shadow: none !important;
    font-size: 0.82rem !important;
}

#header.album-global-header .banner-language-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    top: calc(100% + 6px) !important;
    width: 150px !important;
    background: #ffffff !important;
    border-color: rgba(60, 64, 67, 0.14) !important;
}

#header.album-global-header .banner-menu-panel .banner-language-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

#header.album-global-header #search-container,
#header.album-global-header.compact #search-container {
    order: unset !important;
    grid-column: auto !important;
    width: 100% !important;
    max-width: 560px !important;
    height: 40px !important;
    min-height: 40px !important;
    justify-self: center !important;
}

#header.album-global-header.no-search #search-container,
#header.album-global-header .banner-search-placeholder {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#header.album-global-header .search-box,
#header.album-global-header.compact .search-box {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #202124 !important;
    box-shadow: none !important;
    font-size: 0.95rem !important;
}

#header.album-global-header .search-box:focus {
    background: #ffffff !important;
    border-color: rgba(255, 193, 7, 0.78) !important;
    box-shadow: 0 1px 8px rgba(72, 0, 0, 0.18) !important;
}

#header.album-global-header .banner-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
}

#header.album-global-header .auth-row,
#header.album-global-header.compact .auth-row {
    order: unset !important;
    display: flex !important;
    min-height: 44px !important;
    height: 44px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#header.album-global-header .user-avatar-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border: 2px solid rgba(255, 255, 255, 0.86) !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 2px 8px rgba(72, 0, 0, 0.22) !important;
    padding: 0 !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
#header.album-global-header .user-profile-wrapper .user-avatar-btn::before,
#header.album-global-header .user-profile-wrapper .user-avatar-btn::after {
    content: none !important;
    display: none !important;
}
#header.album-global-header .user-profile-wrapper {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#header.album-global-header .profile-menu {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    transform: none !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(60, 64, 67, 0.14) !important;
}

#header.album-global-header .profile-menu button,
#header.album-global-header .profile-menu a {
    background: transparent !important;
    color: #3c4043 !important;
    border: 0 !important;
    text-decoration: none !important;
}

#header.album-global-header .profile-menu button:hover,
#header.album-global-header .profile-menu a:hover {
    background: rgba(122, 0, 0, 0.08) !important;
}

#header.album-global-header .btn-login-header {
    min-width: 44px !important;
    max-width: 116px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #7a0000 !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 2px 8px rgba(72, 0, 0, 0.16) !important;
}

#header.album-global-header .banner-bell-btn {
    position: relative !important;
}

#header.album-global-header .banner-bell-icon {
    width: 100% !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: inherit !important;
    line-height: 1 !important;
    border: 0 !important;
    overflow: visible !important;
}

#header.album-global-header .banner-bell-icon::before {
    content: none !important;
}

#header.album-global-header .banner-bell-icon::after {
    content: none !important;
}

#header.album-global-header .banner-bell-btn::before {
    content: none !important;
}

#header.album-global-header .banner-notification-dropdown {
    position: relative !important;
    display: inline-flex !important;
}

#header.album-global-header .banner-notification-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: min(86vw, 280px) !important;
    padding: 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(60, 64, 67, 0.14) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    color: #3c4043 !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18) !important;
    display: none !important;
    text-align: left !important;
    z-index: 90 !important;
}

#header.album-global-header .banner-notification-dropdown.open .banner-notification-panel {
    display: block !important;
}

#header.album-global-header .banner-notification-panel strong {
    display: block !important;
    margin-bottom: 6px !important;
    color: #7a0000 !important;
    font-family: 'Kanit', sans-serif !important;
    font-size: 1rem !important;
}

#header.album-global-header .banner-notification-panel p {
    margin: 0 !important;
    color: #5f6368 !important;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
}

#header.album-global-header .banner-notification-item {
    position: relative !important;
    padding-right: 34px !important;
}

#header.album-global-header .banner-notification-dismiss {
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(151,2,35,.22) !important;
    background: rgba(255,255,255,.82) !important;
    color: #970223 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: transform .12s ease, background .12s ease !important;
}

#header.album-global-header .banner-notification-dismiss:active {
    transform: scale(.9) !important;
}

#header.album-global-header .banner-tester-notice {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(60, 64, 67, 0.12) !important;
}

#header.album-global-header .banner-tester-notice p {
    margin: 0 !important;
}

#header.album-global-header .banner-request-notices {
    margin-top: 10px !important;
}

#header.album-global-header .banner-request-notices p {
    display: block !important;
    margin: 0 0 6px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: rgba(122, 0, 0, 0.08) !important;
    color: #4a1111 !important;
    font-weight: 700 !important;
}

#header.album-global-header .banner-notification-link {
    margin-top: 10px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: rgba(122, 0, 0, 0.10) !important;
    color: #7a0000 !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#header.album-global-header .notification-badge {
    position: absolute !important;
    top: 5px !important;
    right: 3px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #ff3b30 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 17px !important;
    box-shadow: 0 0 0 2px rgba(122, 0, 0, 0.94) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

#header.album-global-header .notification-badge.show {
    display: inline-flex !important;
}

#header.album-global-header .banner-progress-row {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#header.album-global-header.no-progress .banner-progress-row {
    display: none !important;
}

#header.album-global-header #progress-container,
#header.album-global-header.compact #progress-container {
    order: unset !important;
    grid-column: auto !important;
    width: min(82vw, 760px) !important;
    max-width: 760px !important;
    min-width: 240px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 999px !important;
    justify-self: center !important;
}

#header.album-global-header #progress-text,
#header.album-global-header.compact #progress-text {
    font-size: 0.76rem !important;
}

#header.album-global-header .stats-container {
    display: none !important;
}

.help-btn {
    display: none !important;
}

body.dark-mode #header.album-global-header {
    background: linear-gradient(135deg, rgba(73, 0, 0, 0.98) 0%, rgba(99, 4, 25, 0.97) 48%, rgba(124, 83, 0, 0.97) 100%) !important;
    color: #eeeeee !important;
    border-bottom-color: rgba(255, 193, 7, 0.46) !important;
}

body.dark-mode #header.album-global-header h1,
body.dark-mode #header.album-global-header .banner-icon-btn {
    color: #eeeeee !important;
}

body.dark-mode #header.album-global-header .banner-menu-toggle,
body.dark-mode #header.album-global-header .banner-menu-panel,
body.dark-mode #header.album-global-header .banner-notification-panel,
body.dark-mode #header.album-global-header .profile-menu,
body.dark-mode #header.album-global-header .banner-language-menu {
    background: rgba(31, 36, 48, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

body.dark-mode #header.album-global-header .menu-nav-link,
body.dark-mode #header.album-global-header .banner-menu-action,
body.dark-mode #header.album-global-header .banner-language-option,
body.dark-mode #header.album-global-header .banner-notification-panel,
body.dark-mode #header.album-global-header .banner-notification-panel p,
body.dark-mode #header.album-global-header .profile-menu button,
body.dark-mode #header.album-global-header .profile-menu a {
    color: #eeeeee !important;
}

body.dark-mode #header.album-global-header .banner-notification-panel strong,
body.dark-mode #header.album-global-header .banner-notification-link {
    color: #ffc107 !important;
}

body.dark-mode #header.album-global-header .banner-notification-dismiss {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 193, 7, 0.28) !important;
    color: #ffc107 !important;
}

body.dark-mode #header.album-global-header .menu-nav-link:hover,
body.dark-mode #header.album-global-header .menu-nav-link.active,
body.dark-mode #header.album-global-header .banner-menu-action:hover,
body.dark-mode #header.album-global-header .banner-language-option:hover,
body.dark-mode #header.album-global-header .banner-language-option.active {
    background: rgba(255, 193, 7, 0.16) !important;
    color: #ffc107 !important;
}

body.dark-mode #header.album-global-header .menu-details-panel {
    border-left-color: rgba(255, 193, 7, 0.22) !important;
    background: rgba(31, 36, 48, 0.98) !important;
}

body.dark-mode #header.album-global-header .search-box,
body.dark-mode #header.album-global-header .banner-language-toggle,
body.dark-mode #header.album-global-header .banner-theme-toggle,
body.dark-mode #header.album-global-header .btn-login-header {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    border-color: rgba(255, 193, 7, 0.32) !important;
}

body.dark-mode #header.album-global-header .notification-badge {
    box-shadow: 0 0 0 2px rgba(24, 28, 38, 0.96) !important;
}

@media screen and (max-width: 768px) {
    #header.album-global-header,
    #header.album-global-header[data-page="index"] {
        height: var(--h-mobile) !important;
    }

    #header.album-global-header.no-search,
    #header.album-global-header.compact.no-search {
        height: var(--h-mobile-no-search) !important;
    }

    #header.album-global-header.compact {
        height: var(--h-mobile-compact) !important;
    }

    #header.album-global-header .header-content,
    #header.album-global-header.compact .header-content,
    #header.album-global-header.compact.no-search .header-content {
        padding: 10px 12px !important;
        grid-template-rows: auto auto auto !important;
        gap: 8px !important;
    }

    #header.album-global-header .banner-main-row {
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
    }

    #header.album-global-header.no-search .banner-main-row {
        grid-template-columns: 1fr auto !important;
    }

    #header.album-global-header #search-container,
    #header.album-global-header.compact #search-container {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    #header.album-global-header .search-box,
    #header.album-global-header.compact .search-box {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 0.88rem !important;
    }

    #header.album-global-header .banner-progress-row {
        grid-row: 3 !important;
    }

    #header.album-global-header h1,
    #header.album-global-header.compact h1 {
        font-size: clamp(0.95rem, 4.2vw, 1.18rem) !important;
    }

    #header.album-global-header .banner-left {
        gap: 8px !important;
    }

    #header.album-global-header .banner-icon-btn,
    #header.album-global-header .user-avatar-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        font-size: 20px !important;
    }

    #header.album-global-header .btn-login-header {
        max-width: 86px !important;
        height: 34px !important;
        padding: 0 8px !important;
        font-size: 0.72rem !important;
    }

    #header.album-global-header .banner-actions {
        gap: 4px !important;
    }

    #header.album-global-header #progress-container,
    #header.album-global-header.compact #progress-container {
        width: min(92vw, 520px) !important;
        height: 24px !important;
        min-height: 24px !important;
    }

    #header.album-global-header #progress-text,
    #header.album-global-header.compact #progress-text {
        font-size: 0.66rem !important;
    }

    #header.album-global-header.no-search .banner-progress-row,
    #header.album-global-header.compact.no-search .banner-progress-row {
        grid-row: 3 !important;
    }
}

@media screen and (max-width: 420px) {
    #header.album-global-header .banner-actions {
        gap: 2px !important;
    }

    #header.album-global-header .btn-login-header {
        width: auto !important;
        min-width: 94px !important;
        max-width: none !important;
        height: 38px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }

    #header.album-global-header .btn-login-header::before {
        content: none !important;
        display: none !important;
    }

    #header.album-global-header h1,
    #header.album-global-header.compact h1 {
        font-size: clamp(0.78rem, 3.45vw, 0.94rem) !important;
    }
}

/* Banner fijo: se eliminan contracciones y corrimientos al hacer scroll */
#header.album-global-header,
#header.album-global-header .header-content,
#header.album-global-header h1,
#header.album-global-header #search-container,
#header.album-global-header #progress-container,
#header.album-global-header .banner-main-row,
#header.album-global-header .banner-actions {
    transition: none !important;
}

#header.album-global-header.compact,
#header.album-global-header.compact.no-search {
    height: var(--h-normal) !important;
}

#header.album-global-header.compact .header-content,
#header.album-global-header.compact.no-search .header-content {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    padding: 12px 18px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 52px 36px !important;
    gap: 10px !important;
}

#header.album-global-header.compact .header-tools,
#header.album-global-header.compact .auth-row {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#header.album-global-header.compact .banner-main-row {
    grid-template-columns: minmax(260px, 1fr) minmax(360px, 560px) minmax(260px, 1fr) !important;
}

#header.album-global-header.compact.no-search .banner-main-row {
    grid-template-columns: minmax(260px, 1fr) minmax(360px, 560px) minmax(260px, 1fr) !important;
}

#header.album-global-header.compact h1 {
    grid-column: auto !important;
    font-size: clamp(1.12rem, 1.95vw, 1.72rem) !important;
}

#main-content.header-compact-active,
#main-content.container.header-compact-active,
.container.main-content.header-compact-active {
    margin-top: var(--album-header-space, 136px) !important;
}

@media screen and (max-width: 768px) {
    #header.album-global-header.compact,
    #header.album-global-header.compact.no-search {
        height: var(--h-mobile) !important;
    }

    #header.album-global-header.compact.no-search {
        height: var(--h-mobile-no-search) !important;
    }

    #header.album-global-header.compact .header-content,
    #header.album-global-header.compact.no-search .header-content {
        padding: 10px 12px !important;
        grid-template-rows: auto auto auto !important;
        gap: 8px !important;
    }

    #header.album-global-header.compact .banner-main-row,
    #header.album-global-header.compact.no-search .banner-main-row {
        grid-template-columns: 1fr auto !important;
    }

    #header.album-global-header.compact #search-container {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    #header.album-global-header.compact h1 {
        font-size: clamp(0.95rem, 4.2vw, 1.18rem) !important;
    }
}

html,
body {
    background:
        linear-gradient(rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0.50)),
        linear-gradient(135deg, #006847 0%, #00805a 28%, #005eb8 44%, #005eb8 58%, #d7193f 74%, #c8102e 100%) !important;
    background-attachment: scroll !important;
}

html.dark-mode,
body.dark-mode {
    background:
        linear-gradient(rgba(15, 18, 27, 0.50), rgba(15, 18, 27, 0.50)),
        linear-gradient(135deg, #00402d 0%, #00503a 28%, #003a74 44%, #003a74 58%, #8f0a26 74%, #7c081d 100%) !important;
    color: #eeeeee !important;
}

#header.album-global-header {
    --banner-gradient-main: linear-gradient(135deg, #7a0000 0%, #9b1608 48%, #d19a00 100%) !important;
    --banner-gradient-compact: linear-gradient(135deg, #6f0000 0%, #8c1206 52%, #b88300 100%) !important;
    background: var(--banner-gradient-main) !important;
}

#header.album-global-header.compact {
    background: var(--banner-gradient-compact) !important;
}

body.dark-mode #header.album-global-header {
    --banner-gradient-main: linear-gradient(135deg, #490000 0%, #630419 48%, #7c5300 100%) !important;
    --banner-gradient-compact: linear-gradient(135deg, #3f0000 0%, #560315 52%, #664400 100%) !important;
    background: var(--banner-gradient-main) !important;
}

body.dark-mode #header.album-global-header.compact {
    background: var(--banner-gradient-compact) !important;
}

.site-footer,
footer.site-footer {
    text-align: center !important;
    padding: 18px 12px 22px !important;
    margin-top: 34px !important;
    color: #4b4b4b !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.site-footer p {
    margin: 0 0 8px !important;
    font-weight: 700 !important;
}

.site-footer .site-footer-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    color: #777 !important;
}

.site-footer a {
    color: #7a0000 !important;
    text-decoration: none !important;
    font-weight: 900 !important;
}

.site-footer a:hover {
    text-decoration: underline !important;
}

body.dark-mode .site-footer,
body.dark-mode footer.site-footer {
    color: #e8e8e8 !important;
}

body.dark-mode .site-footer .site-footer-links {
    color: rgba(255,255,255,.55) !important;
}

body.dark-mode .site-footer a {
    color: #ffc107 !important;
}

/* ==========================================================
   Capa final de seguridad responsive para WebView / TWA
   Mantiene el banner estable y evita solapes en pantallas
   pequeñas, tablets y dispositivos con notch.
   ========================================================== */
html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    scroll-padding-top: calc(var(--album-header-space, 134px) + env(safe-area-inset-top, 0px)) !important;
}

body {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
}

body *,
body *::before,
body *::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100% !important;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

p,
li,
h1,
h2,
h3,
h4,
.section-card,
.country-block,
.trade-card,
.panel,
.intro-card,
.modal-content,
.album-download-modal-card {
    overflow-wrap: anywhere;
}

#header.album-global-header {
    --album-header-space: calc(var(--h-normal) + 16px);
    top: env(safe-area-inset-top, 0px) !important;
    height: var(--h-normal) !important;
    min-height: var(--h-normal) !important;
    max-height: var(--h-normal) !important;
    overflow: visible !important;
}

#header.album-global-header.compact,
#header.album-global-header.compact.no-search,
#header.album-global-header[data-page="index"],
#header.album-global-header.no-search {
    height: var(--h-normal) !important;
    min-height: var(--h-normal) !important;
    max-height: var(--h-normal) !important;
}

#main-content,
#main-content.container,
.container.main-content,
#main-content.header-compact-active,
#main-content.container.header-compact-active,
.container.main-content.header-compact-active {
    width: min(1000px, calc(100vw - 24px)) !important;
    max-width: min(1000px, calc(100vw - 24px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: calc(var(--album-header-space, 134px) + env(safe-area-inset-top, 0px)) !important;
}

#header.album-global-header .header-content,
#header.album-global-header.compact .header-content,
#header.album-global-header.compact.no-search .header-content {
    height: 100% !important;
    min-width: 0 !important;
}

#header.album-global-header .banner-main-row,
#header.album-global-header.compact .banner-main-row,
#header.album-global-header.compact.no-search .banner-main-row,
#header.album-global-header.no-search .banner-main-row {
    min-width: 0 !important;
}

#header.album-global-header .banner-left,
#header.album-global-header .banner-actions,
#header.album-global-header #search-container,
#header.album-global-header .banner-progress-row,
#header.album-global-header .stats-container {
    min-width: 0 !important;
}

#header.album-global-header .banner-menu-panel,
#header.album-global-header .banner-notification-panel,
#header.album-global-header .profile-menu,
#header.album-global-header .banner-language-menu,
#header.album-global-header .language-menu {
    max-width: calc(100vw - 20px) !important;
    max-height: min(72vh, 460px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

.album-download-modal-overlay,
.trade-confirm-overlay {
    padding:
        max(12px, env(safe-area-inset-top, 0px))
        max(12px, env(safe-area-inset-right, 0px))
        max(12px, env(safe-area-inset-bottom, 0px))
        max(12px, env(safe-area-inset-left, 0px)) !important;
}

.album-download-modal-card,
.modal-content,
.trade-confirm-dialog {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100svh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.grid,
.repetidas-grid,
.stickers-grid,
.compact-stickers-grid,
.proposal-stickers-grid {
    min-width: 0 !important;
}

.section-card,
.country-block,
.trade-card,
.panel,
.intro-card,
.request-card,
.compact-trade-card,
.estadio-card,
.story-subcard {
    max-width: 100% !important;
}

@media screen and (max-width: 1023px) {
    #header.album-global-header {
        --album-header-space: calc(var(--h-mobile) + 16px);
        height: var(--h-mobile) !important;
        min-height: var(--h-mobile) !important;
        max-height: var(--h-mobile) !important;
    }

    #header.album-global-header.compact,
    #header.album-global-header.compact.no-search,
    #header.album-global-header[data-page="index"],
    #header.album-global-header.no-search {
        height: var(--h-mobile) !important;
        min-height: var(--h-mobile) !important;
        max-height: var(--h-mobile) !important;
    }

    #main-content,
    #main-content.container,
    .container.main-content,
    #main-content.header-compact-active,
    #main-content.container.header-compact-active,
    .container.main-content.header-compact-active {
        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
        padding-left: min(16px, 4vw) !important;
        padding-right: min(16px, 4vw) !important;
        margin-top: calc(var(--album-header-space, 170px) + env(safe-area-inset-top, 0px)) !important;
    }

    #header.album-global-header .banner-main-row,
    #header.album-global-header.compact .banner-main-row,
    #header.album-global-header.compact.no-search .banner-main-row,
    #header.album-global-header.no-search .banner-main-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    #header.album-global-header .banner-actions {
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
    }

    #header.album-global-header #search-container,
    #header.album-global-header.compact #search-container {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media screen and (max-width: 520px) {
    html {
        scroll-padding-top: calc(var(--album-header-space, 178px) + env(safe-area-inset-top, 0px)) !important;
    }

    #header.album-global-header .header-content,
    #header.album-global-header.compact .header-content,
    #header.album-global-header.compact.no-search .header-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #header.album-global-header h1,
    #header.album-global-header.compact h1 {
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        line-height: 1.08 !important;
    }

    #header.album-global-header .banner-icon-btn,
    #header.album-global-header .user-avatar-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    #header.album-global-header .banner-menu-panel {
        left: 0 !important;
        width: min(88vw, 300px) !important;
    }

    #header.album-global-header .banner-notification-panel,
    #header.album-global-header .profile-menu,
    #header.album-global-header .banner-language-menu,
    #header.album-global-header .language-menu {
        right: 0 !important;
        left: auto !important;
        transform: none !important;
    }

    .calendar-link-row,
    .stage-tabs,
    .download-choice-grid,
    .share-choice-grid {
        gap: 6px !important;
    }
}

@media screen and (max-width: 360px) {
    #header.album-global-header {
        --h-mobile: 166px !important;
        --album-header-space: calc(var(--h-mobile) + 16px);
    }

    #header.album-global-header .banner-actions {
        gap: 1px !important;
    }

    #header.album-global-header h1,
    #header.album-global-header.compact h1 {
        font-size: 0.84rem !important;
    }
}

@media screen and (max-width: 768px) {
    #header.album-global-header .banner-left {
        align-items: center !important;
    }

    #header.album-global-header h1,
    #header.album-global-header.compact h1 {
        transform: translateY(2px) !important;
    }
}

#header.album-global-header .banner-menu-panel {
    overflow: visible !important;
}

#header.album-global-header .banner-actions,
#header.album-global-header .auth-row {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media screen and (orientation: landscape) and (max-height: 600px) {
    #header.album-global-header .header-content,
    #header.album-global-header.compact .header-content,
    #header.album-global-header.compact.no-search .header-content {
        align-items: center !important;
    }

    #header.album-global-header .banner-main-row,
    #header.album-global-header.compact .banner-main-row,
    #header.album-global-header.no-search .banner-main-row {
        align-items: center !important;
    }
}

#header.album-global-header .banner-menu-panel .banner-language-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 180px !important;
    max-width: 100% !important;
    z-index: 6400 !important;
}

@media screen and (max-width: 768px) {
    #header.album-global-header .banner-menu-panel {
        position: fixed !important;
        top: calc(env(safe-area-inset-top, 0px) + 62px) !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
        width: min(92vw, 320px) !important;
        max-height: calc(100svh - env(safe-area-inset-top, 0px) - 74px) !important;
        z-index: 7000 !important;
        overscroll-behavior: contain !important;
    }

    #header.album-global-header .banner-menu-panel .menu-nav-link,
    #header.album-global-header .banner-menu-panel .banner-menu-action {
        width: 100% !important;
        max-width: none !important;
    }

    #header.album-global-header .banner-menu-panel .banner-language-menu {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #header.album-global-header .banner-menu-dropdown.open {
        z-index: 7000 !important;
    }
}

.sticker.rare-sticker {
    position: relative;
    isolation: isolate;
    outline: 2px solid rgba(151, 2, 35, .22);
    outline-offset: 1px;
    overflow: visible;
}

.sticker.rare-sticker::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 12%, rgba(255,255,255,.9) 48%, transparent 82%);
    transform: translateX(-145%);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
}

.sticker.rare-sticker.rare-found-flash {
    animation: rareStickerPulse 1.35s ease both;
}

.sticker.rare-sticker.rare-found-flash::before {
    opacity: 1;
    animation: rareStickerShine .9s ease-out both;
}

.sticker.rare-sticker::after {
    content: attr(data-rare-name);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 6px);
    min-width: 132px;
    max-width: 190px;
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(34, 20, 20, .94);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 10px 22px rgba(0,0,0,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 30;
}

.sticker.rare-sticker:hover::after,
.sticker.rare-sticker:focus-visible::after,
.sticker.rare-sticker.show-rare-tooltip::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.dark-mode .sticker.rare-sticker {
    outline-color: rgba(255, 193, 7, .35);
}

@keyframes rareStickerPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, .75); transform: translateY(-1px) scale(.98); }
    70% { box-shadow: 0 0 0 9px rgba(255, 193, 7, 0); }
    100% { box-shadow: none; transform: translateY(0) scale(1); }
}

@keyframes rareStickerShine {
    0% { transform: translateX(-145%); opacity: 0; }
    18% { opacity: .95; }
    100% { transform: translateX(145%); opacity: 0; }
}

.back-to-top {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 193, 7, .78) !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #970223, #d19a00) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) scale(.96) !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease, box-shadow .2s ease !important;
    z-index: 1400 !important;
    text-indent: 0 !important;
    line-height: 1 !important;
}

.back-to-top::before {
    content: "" !important;
    width: 14px !important;
    height: 14px !important;
    border-left: 5px solid currentColor !important;
    border-top: 5px solid currentColor !important;
    border-radius: 2px 0 0 0 !important;
    transform: rotate(45deg) translate(3px, 3px) !important;
    transform-origin: center !important;
    display: block !important;
}

.back-to-top.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

.back-to-top:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,.34), 0 0 0 3px rgba(255,193,7,.22) !important;
}

body.dark-mode .back-to-top {
    background: linear-gradient(135deg, #5c0000, #970223) !important;
    border-color: rgba(255, 193, 7, .9) !important;
}

@media screen and (max-width: 768px) {
    .back-to-top {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        right: max(14px, env(safe-area-inset-right, 0px)) !important;
        bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    }

    .back-to-top::before {
        width: 13px !important;
        height: 13px !important;
        border-left-width: 5px !important;
        border-top-width: 5px !important;
    }
}

/* ==========================================================
   HOTFIX MOVIL: listas largas de carga
   En algunos navegadores moviles, content-visibility/contain calculaba
   mal la altura de Faltantes/Repetidas y bloqueaba el desplazamiento.
   ========================================================== */
@media screen and (max-width: 768px) {
    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #album-container,
    #faltantes-content,
    #repetidas-content,
    .repetidas-grid,
    .grid,
    .country-block,
    .section-card,
    .section-block {
        contain: none !important;
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
    }

    #main-content,
    #main-content.container,
    .container.main-content {
        min-height: auto !important;
        overflow: visible !important;
    }
}

/* Single-row app bar for utility pages without search or album progress. */
#header.album-global-header.banner-single-row,
#header.album-global-header.banner-single-row.compact,
#header.album-global-header.banner-single-row.compact.no-search {
    --h-normal: 64px !important;
    --h-mobile: 60px !important;
    --h-mobile-no-search: 60px !important;
    --h-mobile-compact: 60px !important;
    --h-mobile-compact-no-search: 60px !important;
    height: calc(var(--h-normal) + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(var(--h-normal) + env(safe-area-inset-top, 0px)) !important;
    max-height: calc(var(--h-normal) + env(safe-area-inset-top, 0px)) !important;
}

#header.album-global-header.banner-single-row,
#header.album-global-header.banner-single-row .header-content,
#header.album-global-header.banner-single-row .banner-main-row,
#header.album-global-header.banner-single-row .banner-left,
#header.album-global-header.banner-single-row .banner-actions {
    box-sizing: border-box !important;
}

#header.album-global-header.banner-single-row .header-content,
#header.album-global-header.banner-single-row.compact .header-content,
#header.album-global-header.banner-single-row.compact.no-search .header-content {
    height: 100% !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 18px 8px !important;
    display: grid !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    align-items: center !important;
}

#header.album-global-header.banner-single-row .banner-main-row,
#header.album-global-header.banner-single-row.no-search .banner-main-row,
#header.album-global-header.banner-single-row.compact.no-search .banner-main-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
}

#header.album-global-header.banner-single-row #search-container,
#header.album-global-header.banner-single-row .banner-search-placeholder,
#header.album-global-header.banner-single-row .banner-progress-row {
    display: none !important;
}

#header.album-global-header.banner-single-row .banner-actions,
#header.album-global-header.banner-single-row .auth-row {
    align-self: center !important;
    margin: 0 !important;
}

@media screen and (max-width: 768px) {
    #header.album-global-header.banner-single-row,
    #header.album-global-header.banner-single-row.compact,
    #header.album-global-header.banner-single-row.compact.no-search {
        height: calc(var(--h-mobile-no-search) + env(safe-area-inset-top, 0px)) !important;
        min-height: calc(var(--h-mobile-no-search) + env(safe-area-inset-top, 0px)) !important;
        max-height: calc(var(--h-mobile-no-search) + env(safe-area-inset-top, 0px)) !important;
    }

    #header.album-global-header.banner-single-row .header-content,
    #header.album-global-header.banner-single-row.compact .header-content,
    #header.album-global-header.banner-single-row.compact.no-search .header-content {
        padding: calc(7px + env(safe-area-inset-top, 0px)) 8px 7px !important;
    }

    #header.album-global-header.banner-single-row .banner-main-row,
    #header.album-global-header.banner-single-row.no-search .banner-main-row,
    #header.album-global-header.banner-single-row.compact.no-search .banner-main-row {
        display: block !important;
        position: relative !important;
        height: 100% !important;
        gap: 6px !important;
    }

    #header.album-global-header.banner-single-row h1,
    #header.album-global-header.banner-single-row.compact h1 {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        white-space: nowrap !important;
        display: block !important;
        font-size: clamp(0.84rem, 3.8vw, 1rem) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        transform: none !important;
    }

    #header.album-global-header.banner-single-row .banner-left {
        min-width: 0 !important;
        overflow: visible !important;
        gap: 6px !important;
        width: 100% !important;
        height: 100% !important;
        padding-right: 142px !important;
    }

    #header.album-global-header.banner-single-row .banner-actions {
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        gap: 1px !important;
    }

    #header.album-global-header.banner-single-row .banner-icon-btn,
    #header.album-global-header.banner-single-row .user-avatar-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        font-size: 18px !important;
    }

    #header.album-global-header.banner-single-row .btn-login-header {
        width: auto !important;
        min-width: 70px !important;
        max-width: 78px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 6px !important;
        font-size: 0.62rem !important;
        white-space: nowrap !important;
    }
}