/* ═══════════════════════════════════════════════════════════════════════════
   ÁLBUM MUNDIAL 2026 — Panini Digital
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
    --bg: #0e0e1a;
    --surface: #16213e;
    --surface2: #1a2a4a;
    --card: #1e2d4f;
    --card-hover: #243562;
    --border: rgba(255, 255, 255, 0.08);
    --gold: #f4b942;
    --gold-light: #ffd166;
    --green: #2ecc71;
    --red: #e74c3c;
    --blue: #3498db;
    --purple: #9b59b6;
    --text: #e8eaf0;
    --text-muted: #8899bb;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3);
    /* Las fuentes de emoji van explícitas para que Chrome/Windows
       no intente renderizarlos con Poppins y caiga en modo texto */
    --font: "Poppins", "Apple Color Emoji", "Segoe UI Emoji",
            "Noto Color Emoji", "Android Emoji", sans-serif;

    /* Group colors */
    --group-a: #e53935;
    --group-b: #8e24aa;
    --group-c: #1e88e5;
    --group-d: #00897b;
    --group-e: #e64a19;
    --group-f: #f4b942;
    --group-g: #43a047;
    --group-h: #e91e63;
    --group-i: #1565c0;
    --group-j: #6a1b9a;
    --group-k: #00838f;
    --group-l: #c62828;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 15px;
    scroll-behavior: smooth;
}
/* Twemoji — imágenes SVG que reemplazan emojis: heredan tamaño del texto */
img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.1em;
    display: inline-block;
    pointer-events: none;
}
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}
a {
    text-decoration: none;
    color: inherit;
}
img {
    max-width: 100%;
    display: block;
}
button {
    cursor: pointer;
    font-family: var(--font);
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg);
}
::-webkit-scrollbar-thumb {
    background: var(--surface2);
    border-radius: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  AUTH PAGES                                                                */
/* ══════════════════════════════════════════════════════════════════════════ */
.auth-body {
    background: linear-gradient(135deg, #0e0e1a 0%, #16213e 50%, #0e0e1a 100%);
}

.auth-wrapper {
    display: flex;
    min-height: 100vh;
}
.auth-wrapper.auth-single {
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
}

/* Left decorative panel */
.auth-left {
    flex: 1;
    background: linear-gradient(145deg, #16213e, #0f3460, #e91e63);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}
.auth-left-content {
    color: #fff;
    text-align: center;
}
.auth-ball {
    font-size: 80px;
    margin-bottom: 20px;
    animation: bounce 2s infinite;
}
.auth-hero-logo {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin: 0 auto 18px;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.35));
}
@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}
.auth-left h1 {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
}
.auth-left h1 span {
    color: var(--gold);
}
.auth-left p {
    font-size: 1rem;
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 32px;
}
.auth-stats-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.stat-bubble {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
}

/* Right form panel */
.auth-right {
    width: 440px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--bg);
}

.auth-card {
    width: 100%;
    background: var(--surface);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.auth-card.wide {
    max-width: 480px;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.logo-icon {
    font-size: 28px;
}
.auth-card-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 6px;
}
.logo-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-muted);
}
.logo-text b {
    color: var(--gold);
}

.auth-card h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 24px;
}
.auth-subtitle {
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Form elements */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.form-group input,
.form-group textarea,
.form-group select {
    background: var(--surface2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    color: var(--text);
    font-family: var(--font);
    font-size: 16px; /* ≥16px evita el zoom automático de iOS al enfocar */
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.15);
}
.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--gold), #e6a820);
    color: #1a1a2e;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    border-radius: var(--radius-sm);
    padding: 13px 24px;
    transition:
        transform 0.15s,
        box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 185, 66, 0.4);
}
.btn-full {
    width: 100%;
}
.btn-sm {
    padding: 7px 14px;
    font-size: 0.82rem;
    border-radius: 6px;
    font-weight: 600;
    border: none;
}
.btn-gold {
    background: var(--gold);
    color: #1a1a2e;
}
.btn-email {
    background: var(--blue);
    color: #fff;
}
.btn-offer {
    background: var(--purple);
    color: #fff;
}
.btn-accept {
    background: var(--green);
    color: #fff;
}
.btn-reject {
    background: var(--red);
    color: #fff;
}

.auth-links {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.auth-links a {
    color: var(--gold);
    font-weight: 600;
}
.auth-links a:hover {
    text-decoration: underline;
}

/* Alerts */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 0.88rem;
    line-height: 1.5;
}
.alert-success {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}
.alert-error {
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}
.reset-link {
    color: var(--gold);
    word-break: break-all;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  TOP NAV                                                                   */
/* ══════════════════════════════════════════════════════════════════════════ */
.topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(22, 33, 62, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    height: 64px;
}
.topnav-inner {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.brand-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}
.brand-ball {
    font-size: 24px;
}
.brand-name {
    font-size: 1.05rem;
    font-weight: 700;
}
.brand-name b {
    color: var(--gold);
}

.nav-links {
    display: flex;
    gap: 4px;
    flex: 1;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    transition:
        background 0.15s,
        color 0.15s;
    color: var(--text-muted);
}
.nav-link:hover,
.nav-link.active {
    background: var(--surface2);
    color: var(--text);
}
.nav-link.active {
    color: var(--gold);
}
.nav-icon {
    font-size: 1.1rem;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}
.user-stats-mini {
    display: flex;
    gap: 10px;
}
.stat-mini {
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--surface2);
    border-radius: 20px;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.stat-mini small {
    font-weight: 400;
    color: var(--text-muted);
}
.stat-mini.owned {
    color: var(--green);
}
.stat-mini.missing {
    color: var(--red);
}
.stat-mini.pct {
    color: var(--gold);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}
.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), #e6a820);
    color: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
}
.user-name {
    font-size: 0.88rem;
    font-weight: 600;
}
.chevron {
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.user-menu.open .chevron {
    transform: rotate(180deg);
}
.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-width: 160px;
    padding: 6px;
    box-shadow: var(--shadow);
    z-index: 200;
}
.user-menu.open .user-dropdown {
    display: block;
}
.user-dropdown a {
    display: block;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--text);
    transition: background 0.15s;
}
.user-dropdown a:hover {
    background: var(--surface2);
}

.flash-msg {
    background: var(--gold);
    color: #1a1a2e;
    text-align: center;
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  LAYOUT                                                                    */
/* ══════════════════════════════════════════════════════════════════════════ */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 60px;
}

.page-header {
    padding: 32px 0 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}
.page-header-inner {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
}
.back-link {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}
.back-link:hover {
    color: var(--gold);
}
.page-title {
    font-size: 1.8rem;
    font-weight: 800;
}
.page-title span {
    color: var(--gold);
}
.page-title .flag { zoom: 0.4; display: inline-block; vertical-align: middle; margin-right: 4px; }
.page-subtitle {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}
.page-subtitle a {
    color: var(--gold);
}

.site-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.82rem;
}
.footer-sep {
    margin: 0 8px;
    opacity: 0.4;
}
.footer-credit strong {
    color: var(--gold);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  STATS BAR                                                                 */
/* ══════════════════════════════════════════════════════════════════════════ */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat-number {
    font-size: 2rem;
    font-weight: 800;
}
.stat-number.gold {
    color: var(--gold);
}
.stat-number.red {
    color: var(--red);
}
.stat-number.blue {
    color: var(--blue);
}
.stat-number.green {
    color: var(--green);
}
.stat-label {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.stat-pct-card {
    position: relative;
}
.pct-bar-wrap {
    height: 4px;
    background: var(--surface2);
    border-radius: 2px;
    margin-top: 8px;
}
.pct-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--green));
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  FILTER BAR                                                                */
/* ══════════════════════════════════════════════════════════════════════════ */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.filter-input {
    flex: 1;
    min-width: 240px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 16px;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
}
.filter-input:focus {
    outline: none;
    border-color: var(--gold);
}
.filter-input.small {
    min-width: 180px;
    padding: 8px 14px;
}
.filter-buttons {
    display: flex;
    gap: 6px;
}
.filter-btn {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 16px;
    color: var(--text-muted);
    font-size: 0.83rem;
    font-weight: 600;
    transition: all 0.15s;
}
.filter-btn:hover,
.filter-btn.active {
    background: var(--surface2);
    border-color: var(--gold);
    color: var(--gold);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  ALBUM — GROUP SECTIONS                                                    */
/* ══════════════════════════════════════════════════════════════════════════ */
.group-section {
    margin-bottom: 40px;
}
.group-section-header {
    margin-bottom: 16px;
}
.group-title {
    font-size: 1.1rem;
}
.group-badge {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.country-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition:
        transform 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.country-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}
.country-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: var(--shadow-card);
}
.country-card:hover::before {
    opacity: 1;
}
.country-card.complete {
    border-color: rgba(46, 204, 113, 0.4);
}

.country-flag {
    font-size: 2.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.country-flag .flag { zoom: 0.7; display: inline-block; }
.country-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.country-name {
    font-weight: 700;
    font-size: 0.95rem;
}
.country-code {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: monospace;
}

.progress-bar {
    height: 5px;
    background: var(--surface2);
    border-radius: 3px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--green));
    transition: width 0.4s ease;
}
.progress-text {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.country-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  GROUP PAGE LAYOUT                                                         */
/* ══════════════════════════════════════════════════════════════════════════ */
.group-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.country-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    position: sticky;
    top: 80px;
}
.sidebar-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 12px;
    font-weight: 700;
}

.sidebar-country {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    transition: background 0.15s;
}
.sidebar-country:hover {
    background: var(--surface2);
}
.sidebar-country.active {
    background: var(--surface2);
    border: 1.5px solid var(--gold);
}
.sc-flag {
    font-size: 1.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.sc-flag .flag { zoom: 0.38; display: inline-block; }
.sc-info {
    flex: 1;
    min-width: 0;
}
.sc-name {
    font-size: 0.82rem;
    font-weight: 600;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-bar {
    height: 3px;
    background: var(--surface);
    border-radius: 2px;
    margin: 4px 0;
}
.sc-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--gold);
    transition: width 0.4s;
}
.sc-pct {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.sticker-main {
    flex: 1;
    min-width: 0;
}

/* Country stats bar */
.country-stats-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.csb-flag {
    font-size: 2.5rem;
    display: flex;
    align-items: center;
}
.csb-flag .flag { zoom: 0.75; display: inline-block; }
.csb-info {
    flex: 1;
}
.csb-info h2 {
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.csb-info h2 code {
    font-size: 0.75rem;
    background: var(--surface2);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--text-muted);
}
.csb-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.csb-pct-ring {
    width: 64px;
    height: 64px;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.csb-pct-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.csb-pct-ring span {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gold);
    position: relative;
}

/* Sticker filter bar */
.sticker-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  ALBUM PAGE + STICKER GRID                                                 */
/* ══════════════════════════════════════════════════════════════════════════ */
.album-page-wrap {
    background: #f0ebe0; /* cream paper */
    border-radius: 16px;
    padding: 4px;
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.6),
        inset 0 0 0 2px rgba(0, 0, 0, 0.08);
}
.album-page {
    background: linear-gradient(180deg, #f5f0e8 0%, #ede8db 100%);
    border-radius: 14px;
    padding: 20px;
}
.album-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.5);
}
.album-page-header .flag { zoom: 0.35; display: inline-block; vertical-align: middle; }

.sticker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.sticker-card {
    aspect-ratio: 3/4;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    border: 2px solid transparent;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}
.sticker-card:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 2;
}
.sticker-card.owned {
    border-color: rgba(46, 204, 113, 0.5);
}
.sticker-card.missing {
    background: repeating-linear-gradient(
        45deg,
        #ccc,
        #ccc 2px,
        #d8d8d8 2px,
        #d8d8d8 10px
    );
    border: 2px dashed #aaa;
    box-shadow: none;
}
.sticker-card.repeated {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(244, 185, 66, 0.4);
}

.sticker-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
/* ── Flip cards ──────────────────────────────────────────────────────────────
   has-image   : owned + foto  → frente = foto        / hover = info
   missing-peek: missing + foto→ frente = placeholder / hover = foto (peek)
   transform-style:preserve-3d en la tarjeta es clave: evita que el
   scale(1.06) del :hover aplane el contexto 3D del flipper hijo.
   ─────────────────────────────────────────────────────────────────────────── */
.sticker-card.has-image,
.sticker-card.missing-peek {
    perspective: 900px;
    overflow: visible;
    transform-style: preserve-3d;
}
.sticker-flipper {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sticker-card.has-image:hover .sticker-flipper,
.sticker-card.has-image.touch-flip .sticker-flipper,
.sticker-card.missing-peek:hover .sticker-flipper,
.sticker-card.missing-peek.touch-flip .sticker-flipper {
    transform: rotateY(180deg);
}

/* Ocultar badges de número mientras la tarjeta está girada */
.sticker-card.has-image:hover .sticker-overlay,
.sticker-card.has-image.touch-flip .sticker-overlay,
.sticker-card.missing-peek:hover .sticker-overlay,
.sticker-card.missing-peek.touch-flip .sticker-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}
/* qty-controls: ocultar solo en mobile touch-flip (mobile usa modal) */
.sticker-card.has-image.touch-flip .qty-controls,
.sticker-card.missing-peek.touch-flip .qty-controls {
    opacity: 0 !important;
    pointer-events: none !important;
}
.sticker-face {
    position: absolute;
    inset: 0;
    /* clip-path en lugar de overflow:hidden — overflow:hidden rompe
       backface-visibility en Chrome dentro de preserve-3d */
    clip-path: inset(0 round 6px);
    border-radius: 6px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ── sf-photo: cara con la foto del jugador ─────────────────────────────── */
.sf-photo {
    will-change: transform;
    background: #111827;
}
/* shimmer solo mientras la imagen NO ha cargado (clase añadida por JS) */
.sf-photo.img-loading,
.sf-photo-back.img-loading {
    background-image: linear-gradient(
        90deg,
        #1a2540 25%,
        #243060 50%,
        #1a2540 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
.sf-photo img,
.sf-photo-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.18s ease;
}
/* Clase añadida por JS cuando img.decode() resuelve */
.sf-photo.img-ready img,
.sf-photo-back.img-ready img {
    opacity: 1;
}

/* ── sf-info: cara con código/nombre (back de owned, rotada 180) ──────── */
.sf-info {
    transform: rotateY(180deg);
    background: linear-gradient(145deg, #111827, #24324f);
    border: 1px solid rgba(244, 185, 66, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sf-info-inner {
    padding: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.sf-info .back-code {
    color: var(--gold);
    font-family: monospace;
    font-weight: 900;
    font-size: 0.8rem;
}
.sf-info .back-name {
    color: var(--text);
    font-weight: 800;
    font-size: 0.72rem;
    line-height: 1.2;
}
.sf-info .back-type {
    color: var(--text-muted);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ── sf-placeholder: cara de placeholder (front de missing-peek) ─────── */
.sf-placeholder {
    position: absolute;
    inset: 0;
    background: var(--ph-c1, #c8d8f8); /* flat pastel, sin degradado */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    overflow: hidden;
}
.sf-placeholder .ph-fondo {
    position: absolute;
    inset: 0;
    background-image: url("../../imagen/fondo.svg");
    background-size: 100%;
    background-position: center;
    opacity: 0.07;
    filter: invert(1); /* sutil textura oscura sobre pastel */
    pointer-events: none;
    z-index: 1;
}
.sf-placeholder .front-code {
    color: rgba(0, 0, 0, 0.7);
    font-family: monospace;
    font-weight: 900;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.55);
    padding: 2px 6px;
    border-radius: 3px;
    position: relative;
    z-index: 2;
}
.sf-placeholder .front-name {
    color: rgba(0, 0, 0, 0.65);
    font-size: 0.57rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
    position: relative;
    z-index: 2;
    max-width: 92%;
}
.sf-placeholder .front-badge {
    font-size: 1.3rem;
    opacity: 0.5;
    position: relative;
    z-index: 2;
    line-height: 1;
}

/* ── sf-photo-back: foto revelada al hover (back de missing-peek) ─────── */
.sf-photo-back {
    transform: rotateY(180deg);
    will-change: transform;
    background: #111827;
}

/* Placeholder */
.sticker-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
}
.owned-ph {
    background: linear-gradient(135deg, #1a3a1a, #2d5a2d);
}
.missing-ph {
    background: transparent;
}
.ph-code {
    font-size: 0.65rem;
    font-weight: 800;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 5px;
    border-radius: 3px;
}
.missing-ph .ph-code {
    color: rgba(0, 0, 0, 0.4);
    background: rgba(0, 0, 0, 0.08);
}
.ph-name {
    font-size: 0.6rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.2;
}
.missing-ph .ph-name {
    color: rgba(0, 0, 0, 0.3);
}
.ph-icon {
    font-size: 1.4rem;
}
.missing-ph .ph-icon {
    color: rgba(0, 0, 0, 0.2);
    font-size: 1.8rem;
}

/* Overlay badges */
.sticker-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    padding: 8px 4px 4px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    transform: translateZ(1px);
}
.sticker-num {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
}
.missing-ph ~ .sticker-overlay .sticker-num {
    color: rgba(0, 0, 0, 0.3);
}
.owned-check {
    font-size: 0.7rem;
    background: var(--green);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.repeated-badge {
    font-size: 0.6rem;
    background: var(--gold);
    color: #1a1a2e;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 4px;
}

/* Quantity controls */
.qty-controls {
    position: absolute;
    left: 50%;
    bottom: 8px;
    /* translateZ eleva el elemento sobre el plano 3D → capa GPU propia,
       evita el renderizado en "tiles" que ocurre en preserve-3d */
    transform: translateX(-50%) translateZ(2px);
    background: rgba(0, 0, 0, 0.72);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 7px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 4;
    will-change: opacity;
}
.sticker-card:hover .qty-controls {
    opacity: 1;
    pointer-events: auto;
}
.qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gold);
    color: #1a1a2e;
    font-size: 1rem;
    font-weight: 800;
    border: none;
}
.qty-val {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    min-width: 20px;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  CHAMPIONS SECTION                                                         */
/* ══════════════════════════════════════════════════════════════════════════ */
.champions-section {
    margin-top: 48px;
}
.section-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gold);
}
.champions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.champion-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 16px;
    text-align: center;
    position: relative;
    transition: transform 0.2s;
}
.champion-card:hover {
    transform: translateY(-4px);
}
.champion-card.rank-1 {
    border-color: gold;
    background: linear-gradient(145deg, var(--surface), #2a2000);
}
.champion-card.rank-2 {
    border-color: silver;
}
.champion-card.rank-3 {
    border-color: #cd7f32;
}
.champion-rank {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 700;
}
.champion-flag {
    font-size: 2.4rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.champion-flag .flag { zoom: 0.7; display: inline-block; }
.champion-name {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.champion-titles {
    margin-bottom: 6px;
}
.trophy {
    font-size: 0.85rem;
}
.champion-years {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  REPETIDAS PAGE                                                            */
/* ══════════════════════════════════════════════════════════════════════════ */
.rep-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 28px;
}
.rep-stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.rep-stat-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--gold);
}
.rep-stat-label {
    font-size: 0.82rem;
    color: var(--text-muted);
}
.rep-cta {
    margin-left: auto;
}

.rep-country-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 20px;
    overflow: hidden;
}
.rep-country-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}
.rep-flag {
    font-size: 1.6rem;
    display: flex;
    align-items: center;
}
.rep-flag .flag { zoom: 0.55; display: inline-block; }
.rep-country-name {
    font-weight: 700;
}
.rep-group-tag {
    font-size: 0.75rem;
    background: var(--surface);
    border-radius: 12px;
    padding: 2px 10px;
    color: var(--text-muted);
}
.rep-count-badge {
    margin-left: auto;
    background: var(--gold);
    color: #1a1a2e;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 12px;
    padding: 3px 10px;
}

.rep-sticker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
}
.rep-sticker-card {
    display: flex;
    gap: 10px;
    background: var(--card);
    border-radius: var(--radius-sm);
    padding: 10px;
    width: 200px;
}
.rep-sticker-img {
    position: relative;
    width: 60px;
    height: 80px;
    flex-shrink: 0;
}
.rep-sticker-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.rep-img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--surface2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rep-img-placeholder span {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    font-family: monospace;
    text-align: center;
}
.rep-extras-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--gold);
    color: #1a1a2e;
    font-size: 0.65rem;
    font-weight: 800;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rep-sticker-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rep-sticker-code {
    font-size: 0.8rem;
    font-weight: 700;
    font-family: monospace;
}
.rep-sticker-player {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.rep-qty-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}
.qty-display {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gold);
    min-width: 20px;
    text-align: center;
}
.rep-extra-label {
    color: var(--text-muted);
    font-size: 0.64rem;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  INTERCAMBIO PAGE                                                          */
/* ══════════════════════════════════════════════════════════════════════════ */
.tabs-bar {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 24px;
    overflow-x: auto;
}
.trade-location-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 210px 210px auto auto;
    gap: 10px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 18px;
}
.trade-location-filter strong {
    display: block;
    font-size: 0.9rem;
}
.trade-location-filter span {
    color: var(--text-muted);
    font-size: 0.78rem;
}
.trade-location-filter select {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 9px 10px;
    font-family: var(--font);
}
.tab-btn {
    padding: 12px 20px;
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-muted);
    white-space: nowrap;
    position: relative;
    transition: color 0.15s;
}
.tab-btn:hover {
    color: var(--text);
}
.tab-btn.active {
    color: var(--gold);
}
.tab-btn.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold);
}
.tab-badge {
    background: var(--red);
    color: #fff;
    font-size: 0.7rem;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 6px;
}

.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}

.matches-info-bar {
    padding: 10px 0 16px;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.matches-info-bar strong {
    color: var(--text);
}

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

.match-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    transition: border-color 0.2s;
}
.match-card:hover {
    border-color: var(--gold);
}

/* ── Tab "Todos los usuarios" ──────────────────────────────────────────── */
.users-tab-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}
.all-users-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.all-user-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color 0.2s;
}
.all-user-card:hover { border-color: rgba(244,185,66,0.4); }
.all-user-info { flex: 1; min-width: 0; }
.all-user-stats {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.rep-badge { color: var(--gold); font-weight: 700; }
.all-user-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.match-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.match-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
}
.match-avatar.small {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
}
.match-user-info {
    flex: 1;
}
.match-username {
    font-weight: 700;
    font-size: 1rem;
}
.match-email {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.match-location {
    font-size: 0.72rem;
    color: var(--gold);
    margin-top: 2px;
}
.score-badge {
    background: var(--gold);
    color: #1a1a2e;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
}

.match-stickers-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.match-section {
}
.match-section-title {
    margin-bottom: 6px;
}
.arrow-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
}
.arrow-badge.get {
    background: rgba(46, 204, 113, 0.2);
    color: var(--green);
}
.arrow-badge.give {
    background: rgba(231, 76, 60, 0.2);
    color: var(--red);
}

.match-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.sticker-chip {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    font-family: monospace;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sticker-chip .flag { zoom: 0.25; display: inline-block; flex-shrink: 0; }
.get-chip {
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.3);
    color: var(--green);
}
.give-chip {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.3);
    color: var(--red);
}
/* chip-single: solo tiene 1 copia — intercambio 1x1 posible */
.chip-single {
    opacity: 0.72;
    border-style: dashed;
}
.missing-chip {
    background: rgba(52, 152, 219, 0.15);
    border-color: rgba(52, 152, 219, 0.3);
    color: var(--blue);
}
.chip-more {
    font-size: 0.72rem;
    color: var(--text-muted);
    align-self: center;
}

.match-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Trade offers */
.offers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.offer-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.offer-card.status-accepted {
    border-color: rgba(46, 204, 113, 0.4);
}
.offer-card.status-rejected {
    border-color: rgba(231, 76, 60, 0.4);
    opacity: 0.7;
}
.offer-from {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.offer-from > div {
    flex: 1;
}
.offer-from strong {
    display: block;
}
.offer-from small {
    color: var(--text-muted);
    font-size: 0.78rem;
}
.offer-email-link {
    font-size: 0.78rem;
    color: var(--gold);
    display: block;
    margin-top: 2px;
}
.offer-message {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: var(--surface2);
    border-radius: 6px;
}
.offer-stickers-summary {
    font-size: 0.82rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.offer-status-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 10px;
}
.offer-status-badge.pending {
    background: rgba(244, 185, 66, 0.2);
    color: var(--gold);
}
.offer-status-badge.accepted {
    background: rgba(46, 204, 113, 0.2);
    color: var(--green);
}
.offer-status-badge.rejected {
    background: rgba(231, 76, 60, 0.2);
    color: var(--red);
}
.offer-actions {
    display: flex;
    gap: 8px;
}

/* My list */
.mylist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.mylist-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.mylist-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sticker-chip sup {
    font-size: 0.65rem;
    margin-left: 2px;
    color: var(--gold);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  MATCHES / STANDINGS / SIMULATION                                         */
/* ══════════════════════════════════════════════════════════════════════════ */
.matches-filters,
.standings-filters {
    margin-bottom: 24px;
}
.filter-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
}
.filter-select {
    min-width: 170px;
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-family: var(--font);
    font-size: 0.86rem;
}
.btn-outline-sm,
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    font-weight: 700;
}
.btn-outline-sm:hover,
.btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.match-day-block {
    margin-bottom: 28px;
}
.match-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0 2px;
}
.match-day-label {
    font-weight: 800;
    color: var(--gold);
}
.match-day-count {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.match-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}
.match-card {
    background: linear-gradient(
        145deg,
        rgba(30, 45, 79, 0.98),
        rgba(22, 33, 62, 0.98)
    );
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-card);
}
.match-card.live {
    border-color: rgba(231, 76, 60, 0.75);
}
.match-card.finished {
    border-color: rgba(46, 204, 113, 0.45);
}
.match-card-top {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.match-grupo-tag,
.match-jornada-tag,
.badge {
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 4px 9px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
.match-grupo-tag {
    background: rgba(244, 185, 66, 0.16);
    color: var(--gold);
}
.match-jornada-tag {
    background: rgba(52, 152, 219, 0.16);
    color: #7cc7ff;
}
.badge-sched {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}
.badge-live,
.badge-warn {
    background: rgba(231, 76, 60, 0.18);
    color: #ff9a8f;
}
.badge-done {
    background: rgba(46, 204, 113, 0.16);
    color: var(--green);
}
.match-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}
.match-team {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.match-team.away {
    text-align: right;
    align-items: flex-end;
}
.team-flag {
    font-size: 1.8rem;
    line-height: 1;
}
.team-name {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.2;
}
.team-code {
    color: var(--text-muted);
    font-family: monospace;
    font-size: 0.76rem;
}
.match-score {
    min-width: 86px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(14, 14, 26, 0.55);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-weight: 900;
}
.score-home,
.score-away {
    font-size: 1.65rem;
    color: var(--gold);
}
.score-sep {
    color: var(--text-muted);
}
.score-time {
    font-size: 0.9rem;
    color: var(--text);
}
.match-venue {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}
.match-calendar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}
.match-calendar-row a {
    font-size: 0.72rem;
    font-weight: 800;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
}
.match-calendar-row a:hover {
    color: var(--gold);
    border-color: rgba(244, 185, 66, 0.4);
}
.match-admin-row {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}
.btn-edit-score,
.btn-set-score {
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    color: #111827;
    background: var(--gold);
    font-weight: 800;
}
.modal-header,
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.modal-header {
    margin-bottom: 18px;
}
.modal-body {
    color: var(--text);
}
.modal-footer {
    margin-top: 22px;
    justify-content: flex-end;
}
.score-inputs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.score-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.score-input-group label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 700;
}
.score-input {
    width: 76px;
    text-align: center;
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    font-size: 1.3rem;
    font-weight: 900;
}
.score-dash {
    font-size: 1.8rem;
    color: var(--gold);
    margin-top: 16px;
}
.status-check {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.group-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
}
.group-tab {
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-weight: 800;
    font-size: 0.82rem;
}
.group-tab:hover,
.group-tab.active {
    background: var(--surface2);
    color: var(--gold);
}
.standings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
}
.standings-grid.single-group {
    grid-template-columns: minmax(0, 900px);
}
.standings-group-card,
.sim-group-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.standings-group-header,
.sim-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(
        90deg,
        rgba(244, 185, 66, 0.16),
        rgba(0, 131, 143, 0.12)
    );
    border-bottom: 1px solid var(--border);
}
.standings-group-header h2,
.sim-group-header h3 {
    font-size: 1rem;
}
.standings-expand {
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: 800;
}
.standings-table-wrap {
    overflow-x: auto;
}
.standings-table,
.sim-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.standings-table th,
.standings-table td,
.sim-table th,
.sim-table td {
    padding: 9px 8px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.standings-table th,
.sim-table th {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
}
.col-team {
    text-align: left !important;
    min-width: 170px;
}
.col-pts {
    color: var(--gold);
}
.team-flag-sm {
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.team-flag-sm .flag { zoom: 0.38; display: inline-block; }
.team-code-sm {
    color: var(--text-muted);
    font-family: monospace;
    margin-left: 5px;
}
.fav-star {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.25);
    font-size: 1rem;
    cursor: pointer;
    margin-right: 4px;
    vertical-align: middle;
    transition:
        transform 0.15s,
        color 0.15s;
}
.fav-star:hover {
    transform: scale(1.15);
    color: var(--gold);
}
.fav-star.active {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(244, 185, 66, 0.35);
}
.pos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface2);
    color: var(--text-muted);
    font-weight: 900;
}
.pos-badge.qualify,
tr.qualify .pos-badge {
    background: rgba(46, 204, 113, 0.18);
    color: var(--green);
}
.pos-badge.possible,
tr.possible .pos-badge {
    background: rgba(244, 185, 66, 0.18);
    color: var(--gold);
}
.gd-pos {
    color: var(--green);
}
.gd-neg {
    color: var(--red);
}
.standings-legend {
    padding: 10px 16px;
    color: var(--text-muted);
    font-size: 0.76rem;
}
.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 4px;
}
.legend-dot.qualify {
    background: var(--green);
}
.legend-dot.possible {
    background: var(--gold);
}
.group-matches-list {
    padding: 0 16px 16px;
}
.group-matches-title {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    margin: 4px 0 8px;
}
.gm-row {
    display: grid;
    grid-template-columns: 70px 1fr 46px 1fr 18px;
    gap: 6px;
    align-items: center;
    padding: 7px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.78rem;
}
.gm-date {
    color: var(--text-muted);
}
.gm-score {
    text-align: center;
    font-weight: 900;
    color: var(--gold);
}
.gm-vs {
    color: var(--text-muted);
}
.gm-away {
    text-align: right;
}
.badge-live-sm {
    color: var(--red);
}

.sim-info-banner {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: linear-gradient(
        90deg,
        rgba(0, 137, 123, 0.16),
        rgba(244, 185, 66, 0.13)
    );
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 18px;
    color: var(--text);
}
.sim-legend {
    color: var(--text-muted);
}
.sim-outer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
}
.sim-outer-grid.single-group {
    grid-template-columns: minmax(0, 1000px);
}
.sim-matches {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sim-match {
    display: grid;
    grid-template-columns: 76px 26px 42px 46px 24px 46px 42px 26px;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    padding: 8px;
}
.sim-date {
    color: var(--text-muted);
    font-size: 0.73rem;
}
.sim-flag {
    font-size: 1.1rem;
}
.sim-code {
    font-family: monospace;
    font-weight: 800;
    font-size: 0.78rem;
}
.sim-input {
    width: 44px;
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 7px;
    text-align: center;
    padding: 7px 4px;
    font-weight: 900;
}
.sim-input:focus {
    outline: none;
    border-color: var(--gold);
}
.sim-input.saved {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.12);
}
.sim-sep {
    text-align: center;
    color: var(--gold);
    font-weight: 900;
}
.sim-real-score {
    text-align: center;
    font-weight: 900;
    color: var(--green);
}
.sim-closed {
    grid-column: span 3;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    padding: 7px;
}
.sim-table-wrap {
    padding: 0 14px 14px;
}
.sim-table-title {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    margin: 4px 0 8px;
}

.profile-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 18px;
}
.profile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-card);
}
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold), #00897b);
    color: #10131f;
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 14px;
}
.profile-card h2 {
    font-size: 1.15rem;
    margin-bottom: 5px;
}
.profile-card p {
    color: var(--text-muted);
    margin-bottom: 12px;
}
.profile-role {
    display: inline-flex;
    border-radius: 999px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    margin-bottom: 14px;
}
.profile-role.admin {
    background: rgba(244, 185, 66, 0.17);
    color: var(--gold);
}
.profile-card small {
    display: block;
    color: var(--text-muted);
}
.profile-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
}
.profile-stat-row span {
    color: var(--text-muted);
}
.profile-stat-row strong {
    color: var(--gold);
    font-size: 1.1rem;
}
.profile-favorites {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.favorite-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(244, 185, 66, 0.12);
    border: 1px solid rgba(244, 185, 66, 0.25);
    color: var(--text);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 0.82rem;
}
.favorite-chip code {
    color: var(--gold);
    font-weight: 900;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  MODAL                                                                     */
/* ══════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.modal-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 36px;
    max-width: 480px;
    width: 90%;
    position: relative;
    box-shadow: var(--shadow);
    transform: scale(0.95);
    transition: transform 0.2s;
}
.modal-overlay.active .modal-box {
    transform: scale(1);
}
.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--surface2);
    border: none;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 0.9rem;
}
.modal-preview {
    background: var(--surface2);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.88rem;
    line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  EMPTY STATE                                                               */
/* ══════════════════════════════════════════════════════════════════════════ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.empty-icon {
    font-size: 4rem;
    margin-bottom: 16px;
}
.empty-state h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--text);
}
.empty-state p {
    font-size: 0.88rem;
    margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  RESPONSIVE                                                                */
/* ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .auth-left {
        display: none;
    }
    .auth-right {
        width: 100%;
    }
    .stats-bar {
        grid-template-columns: 1fr 1fr;
    }
    .group-layout {
        flex-direction: column;
    }
    .country-sidebar {
        width: 100%;
        position: static;
    }
    .sticker-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .matches-grid {
        grid-template-columns: 1fr;
    }
    .mylist-grid {
        grid-template-columns: 1fr;
    }
    .trade-location-filter {
        grid-template-columns: 1fr 1fr;
    }
    .standings-grid,
    .sim-outer-grid {
        grid-template-columns: 1fr;
    }
    .profile-grid {
        grid-template-columns: 1fr;
    }
    .nav-brand .brand-name {
        display: none;
    }
}
@media (max-width: 600px) {
    .auth-body {
        min-height: 100dvh;
    }
    .auth-wrapper {
        min-height: 100dvh;
    }
    .auth-right {
        width: 100%;
        align-items: flex-start;
        padding: 24px 16px;
        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(244, 185, 66, 0.12),
                transparent 34%
            ),
            var(--bg);
    }
    .auth-card {
        padding: 28px 20px;
        border-radius: 16px;
        max-width: 420px;
        margin: 0 auto;
    }
    .auth-logo {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 8px;
        margin-bottom: 22px;
    }
    .auth-card-logo {
        width: 92px;
        height: 92px;
    }
    .auth-card h2 {
        text-align: center;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .topnav-inner {
        padding: 0 12px;
        gap: 12px;
    }
    .user-stats-mini {
        display: none;
    }
    .nav-label {
        display: none;
    }
    .sticker-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .main-content {
        padding: 0 12px 40px;
    }
    .stats-bar {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .match-cards-grid {
        grid-template-columns: 1fr;
    }
    .trade-location-filter {
        grid-template-columns: 1fr;
    }
    .match-teams {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .match-team,
    .match-team.away {
        align-items: center;
        text-align: center;
    }
    .match-score {
        width: 100%;
    }
    .standings-grid,
    .sim-outer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .sim-match {
        grid-template-columns: 62px 22px 36px 38px 18px 38px 36px 22px;
        gap: 4px;
        padding: 7px 5px;
    }
    .sim-input {
        width: 38px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  HAMBURGER BUTTON                                                          */
/* ══════════════════════════════════════════════════════════════════════════ */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.hamburger:hover {
    background: var(--surface2);
}
.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition:
        transform 0.3s,
        opacity 0.3s,
        width 0.3s;
    transform-origin: center;
}
.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
    opacity: 0;
    width: 0;
}
.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  MOBILE NAV DRAWER                                                         */
/* ══════════════════════════════════════════════════════════════════════════ */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1100;
    opacity: 0;
    transition: opacity 0.25s;
}
.mobile-nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100dvh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}
.mobile-nav-drawer.open {
    right: 0;
}

.mnd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    font-weight: 800;
    font-size: 1rem;
}
.mnd-close {
    background: var(--surface2);
    border: none;
    color: var(--text);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 0.9rem;
}

.mnd-user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}
.user-avatar.large {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.mnd-username {
    font-weight: 700;
    font-size: 1rem;
}
.mnd-stats {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.mnd-links {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}
.mnd-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    transition:
        background 0.15s,
        color 0.15s;
}
.mnd-link:hover {
    background: var(--surface2);
}
.mnd-link.active {
    background: var(--surface2);
    color: var(--gold);
}
.mnd-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.mnd-footer {
    border-top: 1px solid var(--border);
    padding: 12px 0;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  BOTTOM NAV (mobile app-style)                                             */
/* ══════════════════════════════════════════════════════════════════════════ */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
    display: none; /* overridden in media query */
}
.bn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    gap: 2px;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 600;
    transition:
        color 0.15s,
        background 0.15s;
    position: relative;
}
.bn-item:hover {
    background: var(--surface2);
}
.bn-item.active {
    color: var(--gold);
}
.bn-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--gold);
    border-radius: 0 0 3px 3px;
}
.bn-icon {
    font-size: 1.3rem;
    line-height: 1;
}
.bn-label {
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  STICKER IMPROVED PLACEHOLDERS                                             */
/* ══════════════════════════════════════════════════════════════════════════ */

/* Missing SIN foto — flip placeholder → texto info
   Excluye has-image (owned flipper) y missing-peek (usa flipper con foto) */
.sticker-card.missing:not(.has-image):not(.missing-peek) {
    background: var(--ph-c1, #c8d8f8);
    border: 2px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    perspective: 900px;
}
.sticker-card.missing:not(.has-image):not(.missing-peek) > .missing-ph,
.sticker-card.missing:not(.has-image):not(.missing-peek) > .escudo-ph,
.sticker-card.missing:not(.has-image):not(.missing-peek) > .equipo-ph {
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.sticker-card.missing:not(.has-image):not(.missing-peek):hover > .missing-ph,
.sticker-card.missing:not(.has-image):not(.missing-peek):hover > .escudo-ph,
.sticker-card.missing:not(.has-image):not(.missing-peek):hover > .equipo-ph {
    transform: rotateY(-180deg);
}
.sticker-card.missing:not(.has-image):not(.missing-peek)::after {
    content: attr(data-code) "\A" attr(data-player-label);
    white-space: pre-line;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    color: rgba(0, 0, 0, 0.75);
    font-size: 0.7rem;
    line-height: 1.4;
    font-weight: 800;
    font-family: var(--font);
    background: var(--ph-c1, #c8d8f8);
    transform: rotateY(180deg);
    backface-visibility: hidden;
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
    z-index: 1;
}
.sticker-card.missing:not(.has-image):not(.missing-peek):hover::after {
    transform: rotateY(0);
}

.missing-ph {
    width: 100%;
    height: 100%;
    background: var(--ph-c1, #c8d8f8); /* flat pastel */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px;
    position: relative;
    overflow: hidden;
}
.ph-fondo {
    position: absolute;
    inset: 0;
    background-image: url("../../imagen/fondo.svg");
    background-size: 100%;
    background-position: center;
    opacity: 0.07;
    filter: invert(1); /* sutil textura oscura sobre pastel */
    pointer-events: none;
    z-index: 1;
}
/* Texto e íconos siempre por encima del fondo.svg */
.missing-ph .ph-code,
.missing-ph .ph-name,
.missing-ph .ph-icon,
.escudo-ph .ph-code,
.escudo-ph .escudo-shape,
.equipo-ph .equipo-left,
.equipo-ph .equipo-right {
    position: relative;
    z-index: 2;
}
.missing-ph .ph-code {
    color: rgba(0, 0, 0, 0.72);
    background: rgba(255, 255, 255, 0.55);
    font-size: 0.6rem;
    font-weight: 800;
    font-family: monospace;
    padding: 2px 5px;
    border-radius: 3px;
    position: relative;
    z-index: 2;
}
.missing-ph .ph-name {
    font-size: 0.55rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.2;
    font-weight: 600;
    position: relative;
    z-index: 2;
    max-width: 90%;
}
.missing-ph .ph-icon {
    font-size: 1.6rem;
    color: rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 2;
    font-weight: 900;
    font-family: monospace;
}

/* Missing sticker overlay (number badge) */
.sticker-card.missing .sticker-overlay {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.18));
}
.sticker-card.missing .sticker-num {
    color: rgba(0, 0, 0, 0.55);
}

/* Escudo (#1) special card */
.sticker-card.escudo-card {
    border: 2px solid rgba(0, 0, 0, 0.15);
}
.escudo-ph {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    background: var(--ph-c1, #c8d8f8); /* flat pastel */
    position: relative;
    overflow: hidden;
}
.escudo-ph .ph-fondo {
    opacity: 0.07;
    filter: invert(1);
}
.escudo-shape {
    font-size: 2rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.escudo-shape .flag { zoom: 0.65; display: inline-block; }
.escudo-ph .ph-code {
    font-size: 0.58rem;
    font-weight: 900;
    font-family: monospace;
    color: rgba(0, 0, 0, 0.7);
    background: rgba(255, 255, 255, 0.55);
    padding: 2px 6px;
    border-radius: 3px;
    position: relative;
    z-index: 1;
}

/* Equipo (#13) horizontal card — spans 2 columns */
.sticker-card.equipo-card {
    grid-column: span 2;
    aspect-ratio: 16/9;
}
.equipo-ph {
    width: 100%;
    height: 100%;
    background: var(--ph-c1, #c8d8f8); /* flat pastel */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    position: relative;
    overflow: hidden;
}
.equipo-ph .ph-fondo {
    opacity: 0.07;
    filter: invert(1);
    background-size: cover;
}
.equipo-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    position: relative;
    z-index: 1;
}
.equipo-flag {
    font-size: 2rem;
    line-height: 1;
    display: flex;
    align-items: center;
}
.equipo-flag .flag { zoom: 0.65; display: inline-block; }
.equipo-ph .ph-code {
    font-size: 0.65rem;
    font-weight: 900;
    font-family: monospace;
    color: rgba(0, 0, 0, 0.72);
    background: rgba(255, 255, 255, 0.55);
    padding: 2px 6px;
    border-radius: 3px;
}
.equipo-ph .ph-name {
    font-size: 0.6rem;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
    max-width: 120px;
}
.equipo-right {
    position: relative;
    z-index: 1;
    font-size: 2.8rem;
    line-height: 1;
    opacity: 0.4;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  MOBILE RESPONSIVE ADDITIONS                                               */
/* ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* Show hamburger, hide desktop nav links */
    .hamburger {
        display: flex;
    }
    .nav-links {
        display: none !important;
    }

    /* Show mobile overlay when active */
    .mobile-nav-overlay {
        display: block;
        pointer-events: none;
    }

    /* Show bottom nav */
    .bottom-nav {
        display: flex;
        flex-direction: row;
    }

    /* Add bottom padding to content so bottom nav doesn't cover it */
    .main-content {
        padding-bottom: calc(60px + env(safe-area-inset-bottom) + 20px);
    }
    .site-footer {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  QTY MODAL (mobile long-press)                                             */
/* ══════════════════════════════════════════════════════════════════════════ */
.qty-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.qty-modal-backdrop.open {
    display: flex;
}
.qty-modal {
    background: var(--surface);
    border-radius: 20px 20px 0 0;
    padding: 28px 24px 32px;
    width: 100%;
    max-width: 400px;
    border-top: 1px solid var(--border);
    animation: slideUp 0.25s cubic-bezier(0.2,0.8,0.3,1);
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.qty-modal-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.qty-modal-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 20px;
}
.qty-modal-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.qty-modal-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--gold);
    color: #1a1a2e;
    font-size: 1.6rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}
.qty-modal-btn:active { transform: scale(0.9); }
.qty-modal-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--text);
    min-width: 50px;
    text-align: center;
}
.qty-modal-close {
    display: block;
    margin: 22px auto 0;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 8px 28px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* ── Desktop nav groups with dropdowns ──────────────────────────── */
.nav-group {
    position: relative;
}
.nav-group-btn {
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.nav-group-btn:hover,
.nav-group:hover .nav-group-btn {
    background: rgba(255,255,255,0.08);
    color: var(--gold);
}
.nav-group-btn.active {
    color: var(--gold);
}
.nav-group-chevron {
    font-size: 0.65rem;
    transition: transform 0.2s;
    opacity: 0.6;
}
.nav-group:hover .nav-group-chevron {
    transform: rotate(180deg);
}
.nav-group-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    min-width: 180px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    transform: translateX(-50%) translateY(-4px);
    z-index: 200;
}
.nav-group:hover .nav-group-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-group-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}
.nav-group-dropdown a:hover,
.nav-group-dropdown a.active {
    background: rgba(244,185,66,0.12);
    color: var(--gold);
}
.nav-group-dropdown a .drop-icon {
    font-size: 1rem;
    flex-shrink: 0;
}