/* ============================================
   Sticker Swap — FIFA World Cup 2026
   Festivo CDMX · Dark mode · Gradientes vivos
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&family=Noto+Sans:wght@400;700;900&display=swap');

:root {
    /* ── Festivo palette ── */
    --fucsia:   #ff2d87;
    --naranja:  #ff7a1a;
    --amarillo: #ffd23f;
    --teal:     #19d4c8;
    --violeta:  #8b3cf0;
    --verde:    #00b65c;
    --rojo:     #e8213a;

    /* ── Gradientes ── */
    --grad-hot:    linear-gradient(135deg, #ff2d87 0%, #ff7a1a 55%, #ffd23f 100%);
    --grad-cool:   linear-gradient(135deg, #19d4c8 0%, #5e43f3 100%);
    --grad-legend: linear-gradient(135deg, #ff2d87 0%, #ffd23f 40%, #19d4c8 75%, #8b3cf0 100%);

    /* ── FIFA WC2026 color aliases ── */
    --wc-blue:    #0066FF;
    --wc-coral:   #F08060;
    --wc-cyan:    #19d4c8;
    --wc-red:     #e8213a;
    --wc-yellow:  #ffd23f;
    --wc-lime:    #CCFF00;
    --wc-magenta: #ff2d87;
    --wc-orange:  #ff7a1a;
    --wc-purple:  #8b3cf0;
    --wc-green:   #00b65c;
    --wc-navy:    #e8e0f0;   /* text on dark */

    /* ── Dark backgrounds ── */
    --panini-bg:        #0a0610;
    --panini-dark:      #0a0610;
    --panini-dark-card: #1c0d26;
    --panini-dark-cell: rgba(255,255,255,0.07);

    /* ── Text ── */
    --panini-white:  #ffffff;
    --panini-gray:   rgba(255,255,255,0.55);
    --panini-border: rgba(255,255,255,0.09);
    --panini-shadow: 0 4px 24px rgba(0,0,0,0.4);

    /* ── Compat aliases ── */
    --panini-gold:       var(--fucsia);
    --panini-gold-light: var(--naranja);
    --panini-green:      var(--teal);
    --panini-green-dark: var(--verde);
    --panini-red:        var(--rojo);

    --panini-radius:    14px;
    --panini-radius-sm: 10px;

    /* ── Typography ── */
    --font-display: 'Archivo', 'Noto Sans', sans-serif;
    --font-ui:      'Inter', 'Noto Sans', sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.panini-body {
    font-family: 'Noto Sans', sans-serif;
    background: var(--panini-bg);
    color: var(--panini-white);
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Typography */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #ffffff;
}

a {
    color: var(--teal);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover { color: #fff; }

/* ── Papel picado decorative band ── */
.papel-band {
    height: 5px;
    background: var(--grad-hot);
    width: 100%;
    flex-shrink: 0;
}

/* ── Progress track ── */
.progress-track {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 100px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--grad-hot);
    border-radius: 100px;
    transition: width .4s ease;
}

/* ── Chromo card ── */
.chromo {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--panini-dark-card);
    border: 1px solid var(--panini-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.chromo-legend {
    border: 1px solid transparent;
    background: linear-gradient(var(--panini-dark-card),var(--panini-dark-card)) padding-box,
                var(--grad-legend) border-box;
}

/* ============ LAYOUT ============ */

.panini-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10,6,16,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--panini-border);
    box-shadow: 0 2px 20px rgba(0,0,0,0.35);
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panini-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.05rem;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: opacity 0.2s;
}
.panini-logo:hover { opacity: 0.8; }
.panini-logo-img {
    height: 36px;
    width: auto;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 8px;
    padding: 3px;
}

.panini-header-nav {
    display: flex;
    gap: 4px;
}
.panini-header-nav a {
    padding: 8px 16px;
    border-radius: 50px;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--panini-gray);
    transition: all 0.2s;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.panini-header-nav a:hover,
.panini-header-nav a.active {
    color: #ffffff;
    background: var(--grad-hot);
}
.panini-header-nav .material-symbols-outlined { display: none; }

.panini-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
}

/* Landing page uses full-bleed sections — remove container padding */
.panini-container:has(.landing-stripe) {
    max-width: none;
    padding: 0;
}

.panini-footer {
    text-align: center;
    padding: 20px 20px;
    background: #14091d;
    border-top: 1px solid var(--panini-border);
    margin-top: 48px;
}

.panini-footer-recall {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 24px;
    background: rgba(255,45,135,0.07);
    border: 1px solid rgba(255,45,135,0.2);
    border-radius: var(--panini-radius);
    margin-bottom: 16px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.panini-footer-recall-label {
    font-family: var(--font-ui);
    font-size: 0.88rem;
    color: var(--panini-gray);
}

.panini-footer-recall-cta {
    display: inline-block;
    padding: 9px 20px;
    background: var(--grad-hot);
    color: #ffffff;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(255,45,135,0.35);
}
.panini-footer-recall-cta:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #ffffff;
}

.panini-footer-copy {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--panini-gray);
    line-height: 1.6;
}
.panini-footer-copy a {
    background: var(--grad-hot);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    text-decoration: none;
}
.panini-footer-copy a:hover { opacity: 0.8; }

/* ============ BUTTONS ============ */

.btn-panini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border: none;
    border-radius: 50px;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    letter-spacing: 0.01em;
}

.btn-panini-gold {
    background: var(--grad-hot);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(255,45,135,0.35);
}
.btn-panini-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(255,45,135,0.5);
    opacity: 0.9;
    color: #ffffff;
}

.btn-panini-outline {
    background: transparent;
    color: rgba(255,255,255,0.8);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 50px;
}
.btn-panini-outline:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border-color: rgba(255,255,255,0.4);
}

.btn-panini-green {
    background: var(--wc-green);
    color: #fff;
}
.btn-panini-green:hover {
    background: #006b4d;
    color: #fff;
    transform: translateY(-1px);
}

.btn-panini-red {
    background: var(--wc-red);
    color: #fff;
    padding: 8px 16px;
    font-size: 0.85rem;
}
.btn-panini-red:hover {
    background: #ff1a3d;
    color: #fff;
}

.btn-panini-sm {
    padding: 8px 20px;
    font-size: 0.85rem;
    border-radius: 50px;
}

.btn-panini:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
}

/* ============ CARDS ============ */

.panini-card {
    background: #1c0d26;
    border: 1px solid var(--panini-border);
    border-radius: var(--panini-radius);
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

/* ============ FORMS ============ */

.panini-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid var(--panini-border);
    border-radius: var(--panini-radius-sm);
    color: #ffffff;
    font-family: var(--font-ui);
    font-size: 1rem;
    transition: border-color 0.2s, background 0.2s;
}
.panini-input:focus {
    outline: none;
    border-color: var(--fucsia);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 0 0 3px rgba(255,45,135,0.15);
}
.panini-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.panini-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235A5A80' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.register-hint {
    margin-top: 16px;
    font-size: 0.82rem;
    color: var(--panini-gray);
    text-align: center;
    line-height: 1.5;
}

.panini-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--panini-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.panini-error {
    color: var(--wc-red);
    font-size: 0.85rem;
    margin-top: 8px;
    font-weight: 600;
}

.panini-success {
    color: var(--wc-green);
    font-size: 0.85rem;
    margin-top: 8px;
    font-weight: 600;
}

/* ============ LANDING ============ */

.landing-stripe {
    height: 6px;
    background: linear-gradient(90deg,
        var(--wc-red)     0%    14.2%,
        var(--wc-magenta) 14.2% 28.5%,
        var(--wc-purple)  28.5% 42.8%,
        var(--wc-blue)    42.8% 57.1%,
        var(--wc-cyan)    57.1% 71.4%,
        var(--wc-green)   71.4% 85.7%,
        var(--wc-lime)    85.7% 100%
    );
}

.landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    max-width: 1100px;
    margin: 0 auto;
}

.landing-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--wc-navy);
    text-decoration: none;
}
.landing-brand:hover { color: var(--wc-red); }

.landing-nav-btn {
    padding: 10px 24px;
    border: 2px solid var(--wc-navy);
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--wc-navy);
    text-decoration: none;
    transition: all 0.2s;
}
.landing-nav-btn:hover {
    background: var(--wc-navy);
    color: #ffffff;
}

.landing-hero {
    padding: 72px 20px 64px;
    text-align: center;
}

.landing-hero-inner {
    max-width: 700px;
    margin: 0 auto;
}

.landing-badge {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(228,0,43,0.08);
    border: 1.5px solid rgba(228,0,43,0.25);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wc-red);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.landing-title {
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--wc-navy);
    margin-bottom: 24px;
    letter-spacing: -0.03em;
}

.landing-title-accent { color: var(--wc-red); }

.landing-subtitle {
    font-size: 1.15rem;
    color: var(--panini-gray);
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 40px;
}

.landing-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 56px;
}

.landing-cta-btn {
    font-size: 1.1rem;
    padding: 18px 52px;
}

.landing-hint {
    font-size: 0.85rem;
    color: var(--panini-gray);
}

.landing-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.landing-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.landing-stat-num {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    line-height: 1;
}

.landing-stat-label {
    font-size: 0.8rem;
    color: var(--panini-gray);
    font-weight: 500;
}

.landing-stat-sep {
    width: 1px;
    height: 40px;
    background: var(--panini-border);
}

.landing-steps-section {
    padding: 72px 20px;
    background: #ffffff;
    border-top: 1px solid var(--panini-border);
}

.landing-section-title {
    text-align: center;
    font-size: 1.8rem;
    color: var(--wc-navy);
    margin-bottom: 48px;
    font-weight: 900;
}

.landing-steps-grid {
    display: flex;
    align-items: center;
    max-width: 960px;
    margin: 0 auto;
}

.landing-step-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid var(--panini-border);
    border-top: 5px solid var(--step-color);
    border-radius: var(--panini-radius);
    padding: 32px 28px;
    text-align: center;
    box-shadow: var(--panini-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}
.landing-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(29,29,94,0.12);
}

.landing-step-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--step-color);
    color: #ffffff;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.landing-step-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wc-navy);
    margin-bottom: 10px;
}

.landing-step-card p {
    font-size: 0.9rem;
    color: var(--panini-gray);
    line-height: 1.6;
}

.landing-step-connector {
    font-size: 1.5rem;
    color: var(--panini-border);
    padding: 0 16px;
    flex-shrink: 0;
}

.landing-cta-band {
    background: #ffffff;
    border-top: 1px solid var(--panini-border);
    padding: 80px 20px;
    text-align: center;
}

.landing-cta-band-inner {
    max-width: 600px;
    margin: 0 auto;
}

.landing-cta-band h2 {
    font-size: 2rem;
    font-weight: 900;
    color: var(--wc-navy);
    margin-bottom: 12px;
}

.landing-cta-band p {
    color: var(--panini-gray);
    margin-bottom: 36px;
}

.landing-cta-band-btn {
    background: var(--wc-red);
    color: #ffffff;
    font-size: 1.05rem;
    padding: 16px 44px;
    box-shadow: 0 4px 24px rgba(228,0,43,0.4);
}
.landing-cta-band-btn:hover {
    background: #ff1a3d;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(228,0,43,0.55);
}

.landing-recall-footer {
    text-align: center;
    padding: 28px 20px;
    font-size: 0.85rem;
    color: var(--wc-blue);
    border-top: 1px solid rgba(0,102,255,0.15);
    background: rgba(0,102,255,0.04);
}

.landing-recall-footer a {
    color: var(--wc-blue);
    font-weight: 700;
    text-decoration: none;
}
.landing-recall-footer a:hover {
    color: #0055DD;
    text-decoration: underline;
}

/* compat stubs para otras páginas */
.panini-counter {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; margin-top: 32px; font-size: 0.95rem; color: var(--panini-gray);
}
.panini-counter .number {
    font-family: 'Noto Sans', sans-serif; font-weight: 900;
    font-size: 1.6rem; color: var(--wc-red);
}
.panini-counter .divider {
    width: 4px; height: 4px; border-radius: 50%; background: var(--panini-border);
}

/* ============ REGISTER ============ */

.panini-register {
    max-width: 440px;
    margin: 60px auto;
}

.panini-register h2 {
    text-align: center;
    font-size: 1.8rem;
    color: var(--wc-navy);
    margin-bottom: 8px;
}

.panini-register .subtitle {
    text-align: center;
    color: var(--panini-gray);
    margin-bottom: 32px;
}

.phone-input-group {
    display: flex;
    gap: 8px;
}

.phone-input-group .country-code {
    width: 100px;
    flex-shrink: 0;
}

.phone-input-group .phone-number {
    flex: 1;
}

.otp-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 24px 0;
}

.otp-input {
    width: 52px;
    height: 60px;
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    background: var(--panini-dark-cell);
    border: 2px solid var(--panini-border);
    border-radius: var(--panini-radius-sm);
    color: var(--wc-navy);
    transition: border-color 0.2s;
}
.otp-input:focus {
    outline: none;
    border-color: var(--fucsia);
    background: rgba(255,255,255,0.12);
    box-shadow: 0 0 0 3px rgba(255,45,135,0.15);
}

.resend-link {
    text-align: center;
    margin-top: 16px;
}
.resend-link a {
    font-size: 0.9rem;
    color: var(--panini-gray);
}
.resend-link a:hover {
    color: var(--teal);
}

/* ============ CITY ============ */

.panini-city {
    max-width: 480px;
    margin: 60px auto;
    text-align: center;
}

.panini-city h2 {
    font-size: 2rem;
    color: var(--wc-navy);
    margin-bottom: 8px;
}

.panini-nickname {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--teal);
    margin-bottom: 32px;
}

/* ============ ALBUM ============ */

.album-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

/* Right-side action cluster: "Mis repetidas →" + print-icon button */
.album-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.album-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.album-user-info .nickname {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--wc-navy);
}

.album-user-info .city {
    font-size: 0.85rem;
    color: var(--panini-gray);
}

.album-progress {
    background: var(--grad-hot);
    border-radius: var(--panini-radius);
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.album-progress::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1px, transparent 0);
    background-size: 14px 14px;
    pointer-events: none;
}

.album-progress .stats { flex: 1; }

.album-progress .stats h3 {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: rgba(255,255,255,0.8);
    position: relative;
}

.album-progress .stats .numbers {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.4rem;
    color: #fff;
    position: relative;
}

.album-progress .stats .numbers .have { color: #fff; }
.album-progress .stats .numbers .need  { color: rgba(255,255,255,0.75); }

.progress-bar-wrap {
    flex: 2;
    min-width: 200px;
}

.progress-bar-outer {
    height: 8px;
    background: rgba(0,0,0,0.25);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.progress-bar-inner {
    height: 100%;
    background: rgba(255,255,255,0.9);
    border-radius: 100px;
    transition: width 0.4s ease;
}

.progress-text {
    text-align: right;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.6rem;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1;
    position: relative;
}

/* Album toolbar */
.album-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.album-search {
    flex: 1;
    min-width: 180px;
    position: relative;
}

.album-search input { padding-left: 40px; }

.album-search .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--panini-gray);
}

.album-filters {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 50px;
    padding: 4px;
    border: 1px solid var(--panini-border);
}

.album-filter-btn {
    padding: 8px 18px;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: var(--panini-gray);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.02em;
}
.album-filter-btn.active {
    background: var(--grad-hot);
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(255,45,135,0.3);
}
.album-filter-btn:hover:not(.active) {
    color: #ffffff;
    background: rgba(255,255,255,0.08);
}

/* Album Grid */
.album-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.album-bulk-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--panini-border);
    flex-wrap: wrap;
}

.album-bulk-print {
    background: transparent;
    color: var(--teal, #19d4c8);
    border: 1.5px solid rgba(25,212,200,0.5);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.album-bulk-print:hover {
    background: rgba(25,212,200,0.12);
    color: var(--teal, #19d4c8);
    transform: translateY(-1px);
    text-decoration: none;
}

.album-bulk-select {
    background: var(--grad-hot);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 16px rgba(255,45,135,0.3);
}
.album-bulk-select:hover { opacity: 0.88; color: #ffffff; transform: translateY(-1px); }

.album-bulk-clear {
    background: transparent;
    color: var(--rojo);
    border: 1.5px solid rgba(232,33,58,0.4);
}
.album-bulk-clear:hover { background: rgba(232,33,58,0.12); color: var(--rojo); transform: translateY(-1px); }

/* ── Album cell — chromo style ── */
.album-cell {
    aspect-ratio: 3/4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 4px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.9rem;
    transition: all 0.15s;
    position: relative;
    user-select: none;
    overflow: hidden;
    letter-spacing: -0.02em;
}

/* Team color backgrounds — owned cells */
.album-cell.owned { color: #fff; border: none; }
.album-cell.owned::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, transparent 50%);
    pointer-events: none;
}
/* Team color bands: repeat the cycle of WC teams */
.album-cell.owned:nth-child(20n+1)  { background: linear-gradient(160deg,#006847,#ce1126); }
.album-cell.owned:nth-child(20n+2)  { background: linear-gradient(160deg,#ff0000,#8B0000); }
.album-cell.owned:nth-child(20n+3)  { background: linear-gradient(160deg,#3c3b6e,#b22234); }
.album-cell.owned:nth-child(20n+4)  { background: linear-gradient(160deg,#74acdf,#2a4a8e); }
.album-cell.owned:nth-child(20n+5)  { background: linear-gradient(160deg,#fedf00,#009c3b); }
.album-cell.owned:nth-child(20n+6)  { background: linear-gradient(160deg,#0055a4,#ef4135); }
.album-cell.owned:nth-child(20n+7)  { background: linear-gradient(160deg,#aa151b,#f1bf00); }
.album-cell.owned:nth-child(20n+8)  { background: linear-gradient(160deg,#003399,#cc0000); }
.album-cell.owned:nth-child(20n+9)  { background: linear-gradient(160deg,#000000,#dd0000); }
.album-cell.owned:nth-child(20n+10) { background: linear-gradient(160deg,#046a38,#da291c); }
.album-cell.owned:nth-child(20n+11) { background: linear-gradient(160deg,#ae1c28,#21468b); }
.album-cell.owned:nth-child(20n+12) { background: linear-gradient(160deg,#bc002d,#ffffff); }
.album-cell.owned:nth-child(20n+13) { background: linear-gradient(160deg,#ff2d87,#ff7a1a); }
.album-cell.owned:nth-child(20n+14) { background: linear-gradient(160deg,#8b3cf0,#19d4c8); }
.album-cell.owned:nth-child(20n+15) { background: linear-gradient(160deg,#ff7a1a,#ffd23f); }
.album-cell.owned:nth-child(20n+16) { background: linear-gradient(160deg,#19d4c8,#0038a8); }
.album-cell.owned:nth-child(20n+17) { background: linear-gradient(160deg,#e8213a,#0038a8); }
.album-cell.owned:nth-child(20n+18) { background: linear-gradient(160deg,#004B87,#00843D); }
.album-cell.owned:nth-child(20n+19) { background: linear-gradient(160deg,#C8102E,#012169); }
.album-cell.owned:nth-child(20n+0)  { background: linear-gradient(160deg,#00563B,#FFD700); }

.album-cell.missing {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.2);
    border: 1px dashed rgba(255,255,255,0.12);
}
.album-cell.missing:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.5);
}
.album-cell.owned:hover { filter: brightness(1.12); transform: scale(1.04); z-index: 2; }

.album-cell .check {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 0.6rem;
    opacity: 0.85;
}

.album-cell.highlight {
    box-shadow: 0 0 0 2px var(--fucsia), 0 0 16px rgba(255,45,135,0.5) !important;
    z-index: 3;
}

/* Repeated count badge — shown when a sticker has extras (×2, ×3, …) */
.album-cell .cell-count {
    position: absolute;
    top: 2px;
    right: 3px;
    background: var(--fucsia);
    color: #ffffff;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.5rem;
    border-radius: 50px;
    padding: 1px 4px;
    line-height: 1.4;
    letter-spacing: 0;
    pointer-events: none;
}

/* ============ REPEATED ============ */

.rep-page { max-width: 700px; margin: 0 auto; }

.rep-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.rep-header h2 {
    font-size: 1.6rem;
    color: var(--wc-navy);
    margin-bottom: 4px;
}

.rep-header-sub {
    font-size: 0.88rem;
    color: var(--panini-gray);
}

.rep-summary-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(25,212,200,0.08);
    border: 1.5px solid rgba(25,212,200,0.22);
    border-radius: var(--panini-radius-sm);
    padding: 10px 16px;
    text-align: center;
    min-width: 72px;
}

.rep-summary-num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--teal);
    line-height: 1;
}

.rep-summary-label {
    font-size: 0.72rem;
    color: var(--teal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* Add form */
.rep-add-card {
    background: #1c0d26;
    border: 1px solid var(--panini-border);
    border-radius: var(--panini-radius);
    padding: 16px;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

.rep-add-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rep-num-input {
    flex: 1;
    padding: 12px 14px;
    background: var(--panini-dark-cell);
    border: 1.5px solid var(--panini-border);
    border-radius: var(--panini-radius-sm);
    color: var(--wc-navy);
    font-family: 'Noto Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    transition: border-color 0.2s;
    min-width: 0;
}
.rep-num-input:focus {
    outline: none;
    border-color: var(--fucsia);
    background: rgba(255,255,255,0.12);
    box-shadow: 0 0 0 3px rgba(255,45,135,0.15);
}
.rep-num-input::placeholder { color: var(--panini-gray); font-weight: 400; }

.rep-qty-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--panini-dark-cell);
    border: 1.5px solid var(--panini-border);
    border-radius: var(--panini-radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}

.rep-qty-btn {
    width: 36px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--panini-gray);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rep-qty-btn:hover { background: rgba(25,212,200,0.1); color: var(--teal); }

.rep-qty-stepper span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
    min-width: 28px;
    text-align: center;
}

.rep-add-btn {
    padding: 12px 20px;
    background: var(--grad-hot);
    color: #ffffff;
    border: none;
    border-radius: var(--panini-radius-sm);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(255,45,135,0.3);
}
.rep-add-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* Chip grid */
.rep-chip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.rep-chip {
    position: relative;
    background: #1c0d26;
    border: 1.5px solid var(--panini-border);
    border-radius: var(--panini-radius-sm);
    padding: 12px 8px 10px;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.rep-chip:hover {
    border-color: rgba(25,212,200,0.3);
    box-shadow: 0 4px 16px rgba(25,212,200,0.1);
}

.rep-chip-del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    color: var(--panini-border);
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s;
    padding: 0;
}
.rep-chip:hover .rep-chip-del { color: var(--panini-gray); }
.rep-chip-del:hover { background: rgba(228,0,43,0.1) !important; color: var(--wc-red) !important; }

.rep-chip-num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--teal);
    line-height: 1;
    margin-bottom: 4px;
}

.rep-chip-qty {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--panini-gray);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.rep-chip-ctrl {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.rep-chip-ctrl button {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--panini-border);
    background: rgba(255,255,255,0.06);
    color: var(--panini-gray);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}
.rep-chip-ctrl button:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: rgba(25,212,200,0.1);
}

/* Empty state */
.rep-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--panini-gray);
}
.rep-empty-icon { font-size: 3rem; margin-bottom: 16px; }
.rep-empty h3 { font-size: 1.2rem; color: var(--wc-navy); margin-bottom: 8px; }
.rep-empty p  { font-size: 0.9rem; max-width: 300px; margin: 0 auto; line-height: 1.6; }

/* compat */
.qty-control { display: flex; align-items: center; gap: 8px; }
.qty-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid var(--panini-border); background: rgba(255,255,255,0.06);
    color: var(--panini-gray); font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.qty-btn:hover { border-color: var(--teal); color: var(--teal); }
.qty-value {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.1rem; min-width: 28px; text-align: center; color: #ffffff;
}

/* Repeated — mobile cards */
.repeated-cards { flex-direction: column; gap: 8px; }

.rep-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #1c0d26;
    border: 1px solid var(--panini-border);
    border-radius: var(--panini-radius-sm);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.rep-card-num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--teal);
    min-width: 52px;
}

.rep-card .qty-control { flex: 1; justify-content: flex-start; }

.rep-card-del {
    border: none;
    background: none;
    color: var(--panini-gray);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}
.rep-card-del:hover { background: rgba(228,0,43,0.08); color: var(--wc-red); }

/* ============ MATCHES ============ */

.matches-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.matches-page h2 {
    font-size: 1.8rem;
    color: var(--wc-navy);
    margin-bottom: 8px;
}

.matches-page .subtitle {
    color: var(--panini-gray);
    margin-bottom: 0;
}

.matches-disclaimer {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(255, 210, 63, 0.06);
    border: 1px solid rgba(255, 210, 63, 0.22);
    border-left: 3px solid var(--amarillo);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 24px;
    color: var(--panini-gray);
    font-size: 0.78rem;
    line-height: 1.55;
}
.matches-disclaimer-icon {
    flex-shrink: 0;
    font-size: 1rem;
    margin-top: 1px;
    opacity: 0.8;
}

.match-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.match-card {
    background: #1c0d26;
    border: 1px solid var(--panini-border);
    border-radius: var(--panini-radius);
    padding: 20px;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.match-card:hover {
    border-color: var(--fucsia);
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(255,45,135,0.18);
}

.match-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.match-card-header .nickname {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: #ffffff;
}

.match-card-header .country {
    font-size: 0.85rem;
    color: var(--panini-gray);
}

.match-stickers-section {
    margin-bottom: 16px;
}

.match-stickers-section h4 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.match-stickers-section h4.they-have { color: var(--teal); }
.match-stickers-section h4.you-have  { color: var(--wc-purple); }

.sticker-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sticker-tag {
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
}

.sticker-tag.green {
    background: rgba(25,212,200,0.15);
    color: var(--teal);
    border: 1px solid rgba(25,212,200,0.3);
    font-family: var(--font-display);
    font-weight: 700;
}

.sticker-tag.gold {
    background: rgba(255,45,135,0.12);
    color: var(--fucsia);
    border: 1px solid rgba(255,45,135,0.25);
    font-family: var(--font-display);
    font-weight: 700;
}

.btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: #25D366;
    color: #fff;
    border: none;
    border-radius: var(--panini-radius-sm);
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}
.btn-whatsapp:hover {
    background: #1da851;
    color: #fff;
}

.no-matches {
    text-align: center;
    padding: 60px 20px;
    color: var(--panini-gray);
}

.no-matches h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
    color: var(--wc-navy);
}

/* ============ PROFILE ============ */

.profile-page {
    max-width: 560px;
    margin: 0 auto;
    padding-bottom: 40px;
}

/* Profile hero band */
.profile-hero {
    margin: -24px -16px 0;
    padding: 48px 24px 80px;
    background: var(--grad-legend);
    position: relative;
    overflow: hidden;
}
.profile-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), transparent 55%);
    pointer-events: none;
}
.profile-hero-band {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 5px;
    background: rgba(0,0,0,0.2);
}

.profile-page h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: #ffffff;
    text-align: center;
    margin-bottom: 32px;
}

.profile-nickname {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 8px;
    letter-spacing: -0.04em;
    position: relative;
}

.profile-city {
    text-align: center;
    font-family: var(--font-ui);
    color: rgba(255,255,255,0.7);
    margin-bottom: 32px;
    position: relative;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 28px;
    margin-top: -44px;
    position: relative;
    z-index: 2;
}

.profile-stat {
    background: #1c0d26;
    border: 1px solid var(--panini-border);
    border-radius: var(--panini-radius);
    padding: 16px 12px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.profile-stat.green { border-top: 3px solid var(--teal); }
.profile-stat.gold  { border-top: 3px solid var(--fucsia); }
.profile-stat.red   { border-top: 3px solid var(--amarillo); }

.profile-stat .value {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.8rem;
    letter-spacing: -0.04em;
}

.profile-stat .label {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--panini-gray);
    margin-top: 4px;
}

.profile-stat.green .value { color: var(--teal); }
.profile-stat.gold  .value { color: var(--fucsia); }
.profile-stat.red   .value { color: var(--amarillo); }

.profile-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.profile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #1c0d26;
    border: 1px solid var(--panini-border);
    border-radius: var(--panini-radius-sm);
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    box-shadow: var(--panini-shadow);
}
.profile-link:hover {
    border-color: var(--teal);
    background: rgba(25,212,200,0.05);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(25,212,200,0.12);
}

.profile-link .arrow {
    color: var(--panini-gray);
}

/* ============ LOADING / SPINNER ============ */

.panini-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: panini-spin 0.6s linear infinite;
}

@keyframes panini-spin {
    to { transform: rotate(360deg); }
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ============ BOTTOM NAV ============ */

.bottom-nav { display: none; }

@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 200;
        background: linear-gradient(180deg, transparent 0%, rgba(10,6,16,0.85) 35%, var(--panini-bg) 100%);
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    }

    /* Glass pill wrapper */
    .bottom-nav > nav, .bottom-nav {
        display: flex;
        align-items: center;
        width: 100%;
    }

    /* Inner pill (rendered directly as the nav flex row) */
    .bottom-nav::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 52px;
        border-radius: 100px;
        font-family: var(--font-ui);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.45);
        text-decoration: none;
        gap: 3px;
        transition: all 0.2s;
        position: relative;
    }

    /* Hide Material Symbols spans in bottom nav */
    .bottom-nav .material-symbols-outlined { display: none; }

    /* SVG icon via ::before */
    .bottom-nav a::before {
        content: '';
        display: block;
        width: 22px;
        height: 22px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.45;
        transition: opacity 0.2s;
    }

    .bottom-nav a[href$="/album"]::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M4 4h6a3 3 0 013 3v11a2 2 0 00-2-2H4V4z' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M18 4h-6a3 3 0 00-3 3v11a2 2 0 012-2h7V4z' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .bottom-nav a[href$="/repeated"]::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Crect x='6' y='6' width='12' height='14' rx='1.5' stroke='white' stroke-width='1.8'/%3E%3Cpath d='M4 15V4h11' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    .bottom-nav a[href$="/matches"]::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M4 8l4-4M4 8l4 4M4 8h12a2 2 0 012 2v2' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 14l-4 4M18 14l-4-4M18 14H6a2 2 0 01-2-2v-2' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .bottom-nav a[href$="/profile"]::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='11' cy='8' r='4' stroke='white' stroke-width='1.8'/%3E%3Cpath d='M3 20c1.5-4 4.5-6 8-6s6.5 2 8 6' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    .bottom-nav a[href$="/calendario"]::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Crect x='3.5' y='5.5' width='15' height='13' rx='1.5' stroke='white' stroke-width='1.8'/%3E%3Cpath d='M3.5 10h15' stroke='white' stroke-width='1.6'/%3E%3Cpath d='M8 3.5v4M14 3.5v4' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3Crect x='9.5' y='12.5' width='3' height='3' fill='white'/%3E%3C/svg%3E");
    }

    .bottom-nav a.active {
        background: var(--grad-hot);
        color: #ffffff;
        box-shadow: 0 4px 16px rgba(255,45,135,0.45);
    }
    .bottom-nav a.active::before { opacity: 1; }

    /* space for bottom nav */
    .panini-container { padding-bottom: 90px; }
    /* Footer clears the fixed bottom nav (≈68px) + safe area */
    .panini-footer {
        margin-top: 0;
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

/* ============ RESPONSIVE ============ */

@media (max-width: 768px) {
    /* Landing */
    .landing-title      { font-size: 2.4rem; }
    .landing-steps-grid { flex-direction: column; gap: 20px; }
    .landing-step-connector { transform: rotate(90deg); padding: 8px 0; }
    .landing-stats-row  { gap: 20px; }
    .landing-stat-sep   { width: 40px; height: 1px; }
    .landing-nav        { padding: 12px 20px; }

    /* Header — hide on mobile (bottom nav takes over) */
    .panini-header      { display: none; }

    /* Interior pages */
    .match-cards        { grid-template-columns: 1fr; }
    .profile-stats      { grid-template-columns: repeat(3,1fr); }
    .repeated-form      { flex-direction: column; }

    .album-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
    }
    .album-cell          { font-size: 0.78rem; }
    .album-header        { flex-direction: column; align-items: flex-start; gap: 8px; }
    .album-progress      { flex-direction: column; align-items: flex-start; gap: 12px; }
    .progress-bar-wrap   { width: 100%; min-width: unset; }
    .album-toolbar       { gap: 8px; }

    /* Repeated table → card list on mobile */
    .repeated-table      { display: none; }
    .repeated-cards      { display: flex; flex-direction: column; gap: 10px; }

    /* Matches */
    .match-card          { padding: 16px; }
    .matches-section-header .section-title { font-size: 0.95rem; }

    /* Profile */
    .profile-page        { margin: 16px auto; }
    .profile-nickname    { font-size: 1.6rem; }
}

@media (max-width: 480px) {
    .album-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }
    .album-cell { font-size: 0.72rem; }
    .otp-input {
        width: 44px;
        height: 52px;
        font-size: 1.2rem;
    }
    .profile-stats { grid-template-columns: 1fr; }
    .panini-container { padding: 16px 12px 80px; }
}

/* ============ UTILITY ============ */

.text-center { text-align: center; }
.text-gold   { color: var(--wc-red); }
.text-green  { color: var(--wc-cyan); }
.text-gray   { color: var(--panini-gray); }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.gap-12 { gap: 12px; }
.hidden { display: none !important; }

/* ============ MATCHES V2 ============ */

.matches-section { margin-bottom: 40px; }

.matches-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--panini-border);
}

.matches-section-header .section-title {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--wc-navy);
}

.section-badge {
    padding: 3px 10px;
    border-radius: 50px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
}

.section-badge-cyan { background: rgba(25,212,200,0.12); color: var(--teal);     border: 1px solid rgba(25,212,200,0.25); }
.section-badge-lime { background: rgba(139,60,240,0.12); color: var(--violeta);  border: 1px solid rgba(139,60,240,0.25); }

.city-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.same-city-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(25,212,200,0.12);
    color: var(--teal);
    border: 1px solid rgba(25,212,200,0.25);
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.match-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.match-actions .btn-whatsapp { flex: 2; min-width: 150px; }

.btn-confirm-got {
    flex: 1;
    min-width: 120px;
    padding: 12px 16px;
    background: transparent;
    border: 1.5px solid var(--teal);
    border-radius: var(--panini-radius-sm);
    color: var(--teal);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.btn-confirm-got:hover {
    background: var(--teal);
    color: #000000;
}

.sticker-tag-more {
    padding: 4px 10px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.8rem;
    color: var(--panini-gray);
}

.loading-text,
.no-section-matches {
    color: var(--panini-gray);
    font-size: 0.95rem;
    padding: 16px 0;
}

/* ============ MODAL ============ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-box {
    background: #1c0d26;
    border: 1px solid var(--panini-border);
    border-top: 4px solid var(--fucsia);
    border-radius: var(--panini-radius);
    padding: 28px;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.modal-header h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: #ffffff;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--panini-gray);
    font-size: 1.6rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.modal-close:hover { color: var(--fucsia); }

.modal-subtitle {
    color: var(--panini-gray);
    font-size: 0.9rem;
    margin-bottom: 12px;
    line-height: 1.5;
}

.modal-toggle-row {
    font-size: 0.85rem;
    color: var(--panini-gray);
    margin-bottom: 16px;
}
.modal-toggle-row a { color: var(--teal); }

.modal-stickers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.modal-sticker-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.modal-sticker-item input[type=checkbox] { display: none; }

.modal-sticker-chip {
    padding: 6px 14px;
    background: var(--panini-dark-cell);
    border: 1.5px solid var(--panini-border);
    border-radius: 6px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--panini-gray);
    transition: all 0.15s;
}

.modal-sticker-item input[type=checkbox]:checked + .modal-sticker-chip {
    background: rgba(25,212,200,0.15);
    border-color: var(--teal);
    color: var(--teal);
}

.modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ============ TOAST ============ */

.panini-toast {
    position: fixed;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 28px;
    border-radius: 50px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.95rem;
    z-index: 2000;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.panini-toast-success {
    background: rgba(25,212,200,0.12);
    border: 1.5px solid var(--teal);
    color: var(--teal);
}

.panini-toast-error {
    background: rgba(255,45,135,0.12);
    border: 1.5px solid var(--fucsia);
    color: var(--fucsia);
}

/* ─── Promo Banner ─────────────────────────────────────────── */
/*
 * iOS Safari fix: CSS-grid stacking (both images at grid-area 1/1)
 * rendered them vertically stacked instead of overlapping on iPhone.
 * Switched to classic position:absolute stacking — bulletproof across
 * every browser since IE6, no specificity wars with inline styles.
 */
.promo-banner {
    grid-column: 1 / -1 !important;  /* force span inside album-grid */
    grid-row: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, #1a0830 0%, #2a0d3e 100%);
    border: 1px solid rgba(255, 45, 135, 0.45);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 2px 0;
    overflow: hidden;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}

.promo-img-stack {
    position: relative;         /* anchor for absolutely-positioned images */
    width: 80px;
    min-width: 80px;
    height: 107px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.promo-img-stack img {
    position: absolute;         /* stack exactly on top of each other */
    top: 0;
    left: 0;
    width: 80px;
    height: 107px;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/*
 * Crossfade: image 1 starts visible, image 2 starts transparent and
 * runs the animation in reverse. At any given moment exactly one is
 * at opacity 1. If the animation engine ever fails (old browsers,
 * reduce-motion, etc.), image 1 stays visible as a safe default.
 */
.promo-img-1 { opacity: 1; animation: promo-crossfade 6s ease-in-out infinite; }
.promo-img-2 { opacity: 0; animation: promo-crossfade-reverse 6s ease-in-out infinite; }

@keyframes promo-crossfade {
    0%, 40%   { opacity: 1; }
    50%, 90%  { opacity: 0; }
    100%      { opacity: 1; }
}
@keyframes promo-crossfade-reverse {
    0%, 40%   { opacity: 0; }
    50%, 90%  { opacity: 1; }
    100%      { opacity: 0; }
}

.promo-content {
    flex: 1;
    min-width: 0;
}

.promo-tag {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fucsia);
    opacity: 0.8;
    margin: 0 0 4px;
}

.promo-copy {
    font-size: 0.75rem;
    color: #d4b8e8;
    line-height: 1.45;
    margin: 0 0 10px;
}

.promo-cta {
    display: inline-block;
    background: var(--fucsia);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    border-radius: 6px;
    padding: 5px 12px;
    text-decoration: none;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    transition: opacity 0.15s;
}

.promo-cta:hover { opacity: 0.85; color: #fff; text-decoration: none; }

/* On repeated page the banner lives outside a grid — reset grid-column */
.rep-page .promo-banner { grid-column: unset; margin-top: 24px; }
/* ─────────────────────────────────────────────────────────── */

/* ─── Sectioned album (Panini) ─────────────────────────────── */
.album-sections {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: 24px;
}

.album-section { scroll-margin-top: 80px; }

.album-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    margin: 0 0 12px;
    padding: 6px 12px;
    color: #fff;
    background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
    border-left: 3px solid var(--fucsia, #ff2d87);
    border-radius: 4px;
    text-transform: uppercase;
}

.album-section-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.album-section-progress {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0;
    text-transform: none;
}

/* Album cell with code + title (overrides legacy single-number layout) */
.album-cell {
    text-align: center;
    padding: 4px 3px 6px;
    line-height: 1.05;
    gap: 2px;
    justify-content: center;
}

.album-cell .cell-code {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    line-height: 1;
}

.album-cell .cell-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0;
    opacity: 0.85;
    line-height: 1.1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    max-width: 100%;
    padding: 0 2px;
}

.album-cell.missing .cell-title { opacity: 0.45; }

/* Search clear (×) button */
.album-search { position: relative; }
.album-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.55);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.album-search-clear:hover { color: #fff; background: rgba(255,255,255,0.08); }
.album-search-clear.hidden { display: none; }

/* No-results message when search returns nothing */
.album-no-results {
    text-align: center;
    color: rgba(255,255,255,0.6);
    font-family: var(--font-display);
    font-weight: 600;
    padding: 32px 16px;
    margin: 16px 0;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 8px;
}
.album-no-results.hidden { display: none; }

/* ─── Calendario / Match schedule ──────────────────────────── */
.cal-page { padding-bottom: 40px; }
.cal-header { text-align: center; margin-bottom: 20px; }
.cal-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.6rem;
    margin: 0 0 4px;
    color: #fff;
    letter-spacing: 0.01em;
}
.cal-subtitle { color: rgba(255,255,255,0.7); margin: 0; font-size: 0.9rem; }

.cal-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.cal-search { position: relative; }
.cal-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.55);
    font-size: 1rem;
    pointer-events: none;
}

.cal-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cal-filter-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.75);
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    transition: all 0.15s;
}
.cal-filter-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.cal-filter-btn.active {
    background: var(--fucsia, #ff2d87);
    color: #fff;
    border-color: transparent;
}

.cal-note {
    background: rgba(255,255,255,0.04);
    border-left: 3px solid #ffd23f;
    color: rgba(255,255,255,0.75);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 0.82rem;
    line-height: 1.4;
    margin-bottom: 20px;
}
.cal-note code {
    background: rgba(0,0,0,0.3);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.85em;
    color: #fff;
}

.cal-no-results {
    text-align: center;
    color: rgba(255,255,255,0.6);
    padding: 32px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 8px;
    font-family: var(--font-display);
    font-weight: 600;
}
.cal-no-results.hidden { display: none; }

.cal-list { display: flex; flex-direction: column; gap: 24px; }

.cal-day-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    margin: 0 0 10px;
    padding: 6px 12px;
    background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
    border-left: 3px solid var(--fucsia, #ff2d87);
    border-radius: 4px;
}
.cal-day-matches { display: grid; grid-template-columns: 1fr; gap: 10px; }

@media (min-width: 700px) {
    .cal-day-matches { grid-template-columns: 1fr 1fr; }
    .cal-toolbar { flex-direction: row; align-items: center; }
    .cal-search { flex: 1; max-width: 380px; }
    .cal-filters { flex: 1; }
}

.cal-match {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cal-match:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-1px);
}

.cal-match-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cal-match-phase {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.cal-match-phase.phase-final  { background: linear-gradient(90deg, #FFD700, #FFA500); color: #000; }
.cal-match-phase.phase-sf     { background: linear-gradient(90deg, #ff2d87, #c81f6b); }
.cal-match-phase.phase-qf     { background: rgba(199, 31, 107, 0.4); }
.cal-match-phase.phase-r16    { background: rgba(139, 60, 240, 0.4); }
.cal-match-phase.phase-r32    { background: rgba(25, 212, 200, 0.3); }
.cal-match-phase.phase-3rd    { background: rgba(255, 167, 38, 0.4); }
.cal-match-phase.phase-group  { background: rgba(255,255,255,0.10); }

.cal-match-group {
    color: rgba(255,255,255,0.7);
    font-size: 0.7rem;
    font-weight: 600;
}
.cal-match-time {
    margin-left: auto;
    color: rgba(255,255,255,0.85);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    background: rgba(0,0,0,0.3);
    padding: 1px 8px;
    border-radius: 3px;
}

.cal-match-teams {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: 0.01em;
}
.cal-team { flex: 1; }
.cal-team:last-child { text-align: right; }
.cal-vs {
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.cal-match-venue {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,0.65);
    font-size: 0.78rem;
}
.cal-match-venue .material-symbols-outlined {
    font-size: 1rem;
    opacity: 0.7;
}
.cal-flag { margin-left: auto; font-size: 1rem; }

/* Stadium modal */
.cal-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    backdrop-filter: blur(4px);
}
.cal-modal.hidden { display: none; }

.cal-modal-content {
    background: linear-gradient(180deg, #1a1330, #0d0820);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    color: #fff;
}
.cal-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.6);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.cal-modal-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

.cal-modal-flag { font-size: 2rem; line-height: 1; margin-bottom: 4px; }
.cal-modal-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    margin: 0 0 4px;
}
.cal-modal-city { color: rgba(255,255,255,0.7); margin: 0 0 16px; font-size: 0.9rem; }

.cal-modal-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.cal-modal-stats > div {
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
}
.cal-modal-stats strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--fucsia, #ff2d87);
}
.cal-modal-stats span {
    color: rgba(255,255,255,0.6);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cal-modal-fact {
    background: rgba(255,255,255,0.04);
    padding: 12px 14px;
    border-radius: 6px;
    margin-bottom: 12px;
}
.cal-modal-fact h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    margin: 0 0 6px;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.04em;
}
.cal-modal-fact p { margin: 0; line-height: 1.45; font-size: 0.92rem; color: rgba(255,255,255,0.85); }

.cal-modal-highlight {
    background: linear-gradient(90deg, rgba(255,210,63,0.2), rgba(255,167,38,0.1));
    border-left: 3px solid #ffd23f;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    color: #ffd23f;
}

.cal-modal-match {
    background: rgba(255,255,255,0.05);
    padding: 12px 14px;
    border-radius: 6px;
    border-top: 2px solid var(--fucsia, #ff2d87);
}
.cal-modal-match h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    margin: 0 0 6px;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.05em;
}
.cal-modal-match p { margin: 2px 0; font-size: 0.88rem; }

/* Hero: next match cards */
.cal-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
@media (min-width: 700px) {
    .cal-hero { grid-template-columns: 1fr 1fr; }
}

.cal-hero-card {
    background: linear-gradient(135deg, #2a1a4d 0%, #1a1330 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
}
.cal-hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255,45,135,0.18), transparent 60%);
    pointer-events: none;
}
.cal-hero-card:hover {
    transform: translateY(-2px);
    border-color: var(--fucsia, #ff2d87);
    box-shadow: 0 6px 20px rgba(255,45,135,0.25);
}
.cal-hero-card.my-team {
    background: linear-gradient(135deg, #4d1a3d 0%, #1a1330 100%);
    border-color: var(--fucsia, #ff2d87);
}

.cal-hero-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fucsia, #ff2d87);
    margin-bottom: 8px;
}

.cal-hero-teams {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 0.01em;
    margin-bottom: 10px;
    line-height: 1.1;
}
.cal-hero-vs {
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
}
.cal-hero-teams > span:not(.cal-hero-vs) { flex: 1; }
.cal-hero-teams > span:last-child { text-align: right; }

.cal-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
}
.cal-hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cal-hero-meta .material-symbols-outlined { font-size: 1rem; opacity: 0.7; }

/* Highlight: matches involving the user's country */
.cal-match.is-my-team {
    border-color: var(--fucsia, #ff2d87);
    background: linear-gradient(90deg, rgba(255,45,135,0.10), rgba(255,255,255,0.05));
    box-shadow: inset 3px 0 0 var(--fucsia, #ff2d87);
}
.cal-team.my-team {
    color: var(--fucsia, #ff2d87);
    text-shadow: 0 0 4px rgba(255,45,135,0.4);
}

/* "Hidden" utility for filter buttons that appear on login */
.cal-filter-btn.hidden { display: none; }

/* ─── Repetidas (sectioned) ─────────────────────────────────── */
.rep-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}

.rep-section { scroll-margin-top: 80px; }

.rep-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
    margin: 0 0 12px;
    padding: 6px 12px;
    color: #fff;
    background: linear-gradient(90deg, rgba(25,212,200,0.18), rgba(25,212,200,0.04));
    border-left: 3px solid var(--teal, #19d4c8);
    border-radius: 4px;
    text-transform: uppercase;
}

.rep-section-title > span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rep-section-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

/* New chip layout: code + title (replaces single-number layout) */
.rep-chip-code {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.95rem;
    color: var(--teal);
    line-height: 1;
    margin-bottom: 3px;
    letter-spacing: 0.01em;
    word-break: break-word;
}

.rep-chip-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.15;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    min-height: 1.5em;
    padding: 0 2px;
}

/* Tighten chip padding now that there's more text inside */
.rep-chip { padding: 10px 6px 8px; }

@media (max-width: 480px) {
    .rep-chip-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .rep-chip-code { font-size: 0.85rem; }
    .rep-chip-title { font-size: 0.6rem; }
}

/* ─── Search/autocomplete in add-card ─────────────────────────── */
.rep-search-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.rep-search-input {
    width: 100%;
}

.rep-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1c0d26;
    border: 1.5px solid var(--panini-border);
    border-radius: var(--panini-radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
}
.rep-search-results.hidden { display: none; }

.rep-search-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    color: #fff;
    font-family: var(--font-display);
    transition: background 0.1s;
}
.rep-search-item:last-child { border-bottom: 0; }
.rep-search-item:hover, .rep-search-item:focus {
    background: rgba(25,212,200,0.08);
    outline: none;
}

.rep-search-code {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--teal);
    min-width: 56px;
}
.rep-search-title {
    font-weight: 600;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rep-search-section {
    font-weight: 600;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rep-search-empty {
    padding: 14px;
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
}

/* Selected sticker confirmation pill */
.rep-selected-preview {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(25,212,200,0.1);
    border: 1px solid rgba(25,212,200,0.3);
    border-radius: var(--panini-radius-sm);
    color: #fff;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rep-selected-preview.hidden { display: none; }
.rep-selected-preview strong { color: var(--teal); font-weight: 800; }
.rep-selected-clear {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rep-selected-clear:hover { border-color: var(--teal); color: var(--teal); }

/* ─── Album owned-sticker actions modal ───────────────────── */
.album-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    backdrop-filter: blur(4px);
}
.album-modal.hidden { display: none; }

.album-modal-content {
    background: linear-gradient(180deg, #1a1330, #0d0820);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
    position: relative;
    color: #fff;
    text-align: center;
}

.album-modal-close {
    position: absolute;
    top: 6px;
    right: 10px;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.6);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
}
.album-modal-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

.album-modal-sticker {
    margin-bottom: 20px;
    padding: 16px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}

.album-modal-code {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.6rem;
    color: var(--fucsia, #ff2d87);
    line-height: 1;
    letter-spacing: 0.02em;
}

.album-modal-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    margin-top: 4px;
    color: #fff;
}

.album-modal-section {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.5);
    margin-top: 6px;
}

.album-modal-status {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.12);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
}

.album-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.album-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    transition: all 0.15s;
}
.album-modal-btn .material-symbols-outlined {
    font-size: 1.2rem;
}

.album-modal-btn-add {
    background: var(--teal, #19d4c8);
    color: #0d0820;
    border-color: var(--teal, #19d4c8);
}
.album-modal-btn-add:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.album-modal-btn-remove {
    background: transparent;
    color: rgba(255,255,255,0.85);
    border-color: rgba(228, 0, 43, 0.6);
}
.album-modal-btn-remove:hover {
    background: rgba(228, 0, 43, 0.12);
    color: #ff5c7a;
    border-color: #ff5c7a;
}