/* ============================================================
   SonoraPadel — Premium Dark Theme
   ============================================================ */
:root {
    --cactus:        #2ECC71;
    --cactus-dark:   #27AE60;
    --cactus-glow:   rgba(46, 204, 113, .35);
    --graphite:      #16181D;
    --graphite-2:    #1E2128;
    --graphite-3:    #262A33;
    --ball:          #E8FF3A;
    --white:         #F5F7FA;
    --muted:         #8A93A2;
    --border:        #2C313B;
    --radius:        18px;
    --radius-lg:     26px;
    --shadow:        0 10px 40px rgba(0,0,0,.45);
    --shadow-soft:   0 4px 20px rgba(0,0,0,.25);
    --gradient:      linear-gradient(135deg, var(--cactus) 0%, var(--cactus-dark) 100%);
}

* { box-sizing: border-box; }

body {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(46,204,113,.10), transparent 60%),
        radial-gradient(900px 500px at -10% 20%, rgba(232,255,58,.05), transparent 55%),
        var(--graphite);
    color: var(--white);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cactus); text-decoration: none; transition: color .2s; }
a:hover { color: var(--cactus-dark); }

.text-cactus { color: var(--cactus) !important; }
.text-ball   { color: var(--ball) !important; }
.text-muted-2 { color: var(--muted) !important; }
.bg-graphite-2 { background: var(--graphite-2) !important; }

/* Navbar */
.pc-navbar {
    background: rgba(22,24,29,.85);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 1000;
}
.pc-brand { font-weight: 800; letter-spacing: -.5px; font-size: 1.35rem; }
.pc-brand .dot { color: var(--cactus); }

.pc-navlink {
    color: var(--muted); font-weight: 600; padding: .5rem .9rem;
    border-radius: 12px; transition: all .2s;
}
.pc-navlink:hover, .pc-navlink.active { color: var(--white); background: var(--graphite-3); }

/* Botones */
.btn-cactus {
    background: var(--gradient); border: none; color: #0B1F14; font-weight: 700;
    border-radius: 14px; padding: .7rem 1.5rem;
    box-shadow: 0 6px 20px var(--cactus-glow); transition: transform .15s, box-shadow .15s;
}
.btn-cactus:hover { transform: translateY(-2px); box-shadow: 0 10px 28px var(--cactus-glow); color: #0B1F14; }
.btn-ghost {
    background: var(--graphite-3); border: 1px solid var(--border); color: var(--white);
    border-radius: 14px; padding: .7rem 1.5rem; font-weight: 600; transition: all .2s;
}
.btn-ghost:hover { border-color: var(--cactus); color: var(--cactus); }
.btn-ball { background: var(--ball); color: #16181D; font-weight: 700; border: none; border-radius: 14px; }

/* Tarjetas */
.pc-card {
    background: linear-gradient(180deg, var(--graphite-2), var(--graphite));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.pc-card:hover { transform: translateY(-4px); border-color: rgba(46,204,113,.4); box-shadow: var(--shadow); }
.pc-card-flat { background: var(--graphite-2); border: 1px solid var(--border); border-radius: var(--radius); }

/* Hero */
.pc-hero {
    padding: 6rem 0 4rem; text-align: center; position: relative; overflow: hidden;
}
.pc-hero h1 {
    font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 900; letter-spacing: -1.5px; line-height: 1.05;
}
.pc-hero .highlight {
    background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Stat chips */
.stat-chip {
    background: var(--graphite-3); border: 1px solid var(--border);
    border-radius: 16px; padding: 1.1rem 1rem; text-align: center;
}
.stat-chip .val { font-size: 1.7rem; font-weight: 800; }
.stat-chip .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

/* Avatar */
.pc-avatar {
    border-radius: 50%; object-fit: cover; object-position: center; aspect-ratio: 1/1; border: 3px solid var(--cactus);
    box-shadow: 0 0 0 4px rgba(46,204,113,.12);
}
.pc-avatar-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient); color: #0B1F14; font-weight: 800; border-radius: 50%;
}

/* Player code badge */
.pc-code {
    font-family: 'JetBrains Mono', monospace; background: var(--graphite-3);
    border: 1px solid var(--border); color: var(--cactus);
    padding: .25rem .7rem; border-radius: 10px; font-size: .8rem; font-weight: 700;
}

/* Ranking list */
.rank-row {
    display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem;
    border-radius: 14px; transition: background .2s;
}
.rank-row:hover { background: var(--graphite-3); }
.rank-pos { font-weight: 800; font-size: 1.1rem; width: 2.2rem; text-align: center; color: var(--muted); }
.rank-pos.top { color: var(--ball); }

/* Bracket */
.bracket { display: flex; gap: 0; overflow-x: auto; padding: 1rem 0; }
.bracket-round {
    display: flex; flex-direction: column; justify-content: space-around;
    min-width: 230px; gap: 1rem; position: relative; padding: 0 22px;
}
.bracket-round h6 { color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-size: .72rem; text-align: center; }
.bracket-match {
    background: var(--graphite-2); border: 1px solid var(--border); border-radius: 12px; padding: .6rem .8rem;
    position: relative; z-index: 2;
    transition: border-color .2s, box-shadow .2s;
}
.bracket-match:hover { border-color: var(--cactus); box-shadow: 0 0 14px rgba(46,204,113,.18); }
.bracket-team { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .85rem; }
.bracket-team.winner { color: var(--cactus); font-weight: 700; }

/* Conectores entre rondas */
.bracket-round:not(:last-child) .bracket-match::after {
    content: ''; position: absolute; z-index: 1;
    top: 50%; left: 100%; width: 22px; height: 2px;
    background: linear-gradient(90deg, var(--border) 0%, var(--cactus) 50%, var(--border) 100%);
    background-size: 200% 100%;
    animation: bracketFlow 2.2s linear infinite;
}
.bracket-round:not(:first-child) .bracket-match::before {
    content: ''; position: absolute; z-index: 1;
    top: 50%; right: 100%; width: 22px; height: 2px;
    background: linear-gradient(90deg, var(--border) 0%, var(--cactus) 50%, var(--border) 100%);
    background-size: 200% 100%;
    animation: bracketFlow 2.2s linear infinite;
}
@keyframes bracketFlow {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Panel sidebar */
.pc-sidebar {
    background: var(--graphite-2); border-right: 1px solid var(--border);
    min-height: 100vh; padding: 1.5rem 1rem;
}
.pc-sidebar .nav-item {
    display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 12px;
    color: var(--muted); font-weight: 600; margin-bottom: .3rem; transition: all .2s;
}
.pc-sidebar .nav-item:hover, .pc-sidebar .nav-item.active {
    background: var(--graphite-3); color: var(--white);
}
.pc-sidebar .nav-item.active { border-left: 3px solid var(--cactus); }

/* Forms */
.form-control, .form-select {
    background: var(--graphite-3); border: 1px solid var(--border); color: var(--white);
    border-radius: 12px; padding: .7rem 1rem;
}
.form-control:focus, .form-select:focus {
    background: var(--graphite-3); border-color: var(--cactus); color: var(--white);
    box-shadow: 0 0 0 .25rem var(--cactus-glow);
}
.form-control::placeholder { color: var(--muted); }
.form-label { color: var(--muted); font-weight: 600; font-size: .85rem; margin-bottom: .35rem; }

/* Badges */
.badge-status { padding: .35rem .75rem; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.badge-open   { background: rgba(46,204,113,.15); color: var(--cactus); }
.badge-closed { background: rgba(138,147,162,.15); color: var(--muted); }
.badge-live   { background: rgba(232,255,58,.15); color: var(--ball); }

/* Section title */
.section-title { font-weight: 800; letter-spacing: -.5px; margin-bottom: 1.5rem; }
.section-title .accent { color: var(--cactus); }

/* Search dropdown */
.pc-rival-pick { position: relative; }
.pc-search-results {
    position: absolute; top: 110%; left: 0; right: 0; background: var(--graphite-2);
    border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
    z-index: 1100; max-height: 400px; overflow-y: auto; display: none;
}
.pc-search-results.show { display: block; }
.pc-search-item { padding: .7rem 1rem; display: flex; align-items: center; gap: .7rem; }
.pc-search-item:hover { background: var(--graphite-3); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--graphite); }
::-webkit-scrollbar-thumb { background: var(--graphite-3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* Utilities */
.divider { height: 1px; background: var(--border); margin: 1.5rem 0; }
.chip { background: var(--graphite-3); border: 1px solid var(--border); border-radius: 20px; padding: .3rem .9rem; font-size: .8rem; color: var(--muted); display: inline-block; }
.win-rate-bar { height: 8px; border-radius: 4px; background: var(--graphite-3); overflow: hidden; }
.win-rate-fill { height: 100%; background: var(--gradient); }

@media (max-width: 768px) {
    .pc-hero { padding: 3.5rem 0 2.5rem; }
    .bracket { gap: 0; }
    .bracket-round { padding: 0 16px; min-width: 200px; }
}

.pc-offcanvas {
    background: var(--graphite-2);
    color: var(--white);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    max-width: 82vw;
    width: 320px;
}
.pc-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--border);
}
.pc-mobile-nav .nav-item,
.pc-offcanvas .nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    border-radius: 12px;
    color: var(--muted, #8A93A2);
    font-weight: 600;
    margin-bottom: .25rem;
    transition: background .15s, color .15s;
}
.pc-mobile-nav .nav-item:hover,
.pc-mobile-nav .nav-item.active,
.pc-offcanvas .nav-item:hover,
.pc-offcanvas .nav-item.active {
    background: var(--graphite-3);
    color: var(--white);
}
.pc-mobile-nav .nav-item i,
.pc-offcanvas .nav-item i {
    width: 20px;
    text-align: center;
    color: var(--cactus);
}
.pc-offcanvas .divider,
.pc-mobile-nav .divider {
    height: 1px;
    background: var(--border);
    margin: .75rem 0;
}
.pc-offcanvas.pc-sidebar .pc-brand {
    margin-bottom: 1rem;
}
@media (max-width: 767.98px) {
    .pc-search-results.show { position: static; margin-top: .5rem; }
}

.pc-bottomnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(30, 33, 40, .96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(0,0,0,.35);
}
.pc-bottomnav .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: .35rem 0;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 600;
    transition: color .15s;
}
.pc-bottomnav .bn-item i { font-size: 1.15rem; }
.pc-bottomnav .bn-item.active { color: var(--cactus); }
.pc-bottomnav .bn-item.active i { filter: drop-shadow(0 0 6px var(--cactus-glow)); }
.pc-bottomnav .bn-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--cactus);
}
.pc-bottomnav .bn-center {
    flex: 0 0 auto;
    width: 58px; height: 58px;
    margin: -26px .3rem 0;
    border-radius: 50%;
    background: var(--gradient);
    display: flex; align-items: center; justify-content: center;
    color: #0B1F14;
    font-size: 1.4rem;
    box-shadow: 0 8px 22px var(--cactus-glow);
    border: 4px solid var(--graphite);
    transition: transform .15s;
}
.pc-bottomnav .bn-center:active { transform: scale(.92); }
@media (max-width: 991.98px) {
    body { padding-bottom: 74px; }
}

.pc-hero-live {
    background:
        radial-gradient(1200px 400px at 50% -10%, rgba(46,204,113,.14), transparent 70%),
        radial-gradient(800px 300px at 80% 20%, rgba(232,255,58,.06), transparent 70%);
}
.pc-hero-glow {
    position: absolute;
    top: -120px; left: 50%;
    width: 520px; height: 520px;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--cactus-glow), transparent 60%);
    filter: blur(30px);
    opacity: .5;
    pointer-events: none;
    animation: pulseGlow 5s ease-in-out infinite;
}
@keyframes pulseGlow {
    0%, 100% { opacity: .35; transform: translateX(-50%) scale(1); }
    50% { opacity: .6; transform: translateX(-50%) scale(1.12); }
}
.pc-hero-stats { max-width: 640px; margin-left: auto; margin-right: auto; }
.pc-hero-stat {
    background: rgba(30,33,40,.6);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem .5rem;
    backdrop-filter: blur(8px);
    transition: transform .15s, border-color .15s;
}
.pc-hero-stat:hover { transform: translateY(-4px); border-color: var(--cactus); }
.pc-hero-stat .lbl, a.pc-hero-stat:hover .lbl { color: var(--muted); }
.pc-hero-stat i { color: var(--cactus); font-size: 1.3rem; margin-bottom: .35rem; }
.pc-hero-stat .val { font-size: 1.7rem; font-weight: 900; color: var(--white); line-height: 1; }
.pc-hero-stat .lbl { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: .2rem; }

.sponsor-marquee {
    overflow: hidden;
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sponsor-track {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation: sponsorScroll 40s linear infinite;
}
.sponsor-marquee:hover .sponsor-track { animation-play-state: paused; }
@keyframes sponsorScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.sponsor-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
    flex: 0 0 auto;
    transition: transform .2s;
}
.sponsor-item:hover { transform: translateY(-3px); }
.sponsor-visual { position: relative; display: inline-block; }
.sponsor-logo {
    height: 52px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    display: block;
    opacity: 0;
    transition: opacity .25s;
}
.sponsor-item:hover .sponsor-logo { opacity: 1; }
.sponsor-tint {
    position: absolute;
    inset: 0;
    background: var(--cactus);
    opacity: .45;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    transition: opacity .25s;
    pointer-events: none;
}
.sponsor-item:hover .sponsor-tint { opacity: 0; }

.gallery-cell {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4/3;
}
.gallery-cell img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s;
}
.gallery-cell:hover img { transform: scale(1.08); }
.gallery-cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: .6rem .8rem;
    background: linear-gradient(transparent, rgba(0,0,0,.8));
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
}
.pc-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 2rem;
    backdrop-filter: blur(4px);
}
.pc-lightbox.show { display: flex; animation: fadeIn .2s; }
.pc-lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    animation: zoomIn .25s;
}
.pc-lightbox-close {
    position: absolute;
    top: 1.2rem; right: 1.6rem;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    opacity: .8;
    transition: opacity .2s;
}
.pc-lightbox-close:hover { opacity: 1; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.cr-teams { display: flex; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.cr-team {
    flex: 1; text-align: center; font-weight: 700; font-size: .95rem;
    color: var(--white); background: var(--graphite); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 8px; word-break: break-word;
}
.cr-set {
    background: var(--graphite); border: 1px solid var(--border);
    border-radius: 14px; padding: 12px; margin-bottom: 12px;
}
.cr-set-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cr-setlbl { color: var(--cactus); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cr-score { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.cr-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cr-big {
    width: 56px; height: 48px; border: none; border-radius: 12px;
    background: var(--graphite-2, #262b33); color: var(--white);
    font-size: 1.6rem; font-weight: 700; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .12s;
}
.cr-big:active { background: var(--cactus); color: #0B1F14; }
.cr-num {
    min-width: 56px; text-align: center; font-size: 2.4rem; font-weight: 800;
    color: var(--white); line-height: 1;
}
.cr-dash { color: var(--muted); font-weight: 700; font-size: 1.5rem; align-self: center; }
.cr-del {
    width: 28px; height: 28px; border: none; border-radius: 8px;
    background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem;
}
.cr-del:active { color: #e74c3c; }
.cr-addset {
    width: 100%;
    margin-top: .5rem;
    padding: .5rem;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-weight: 600;
    transition: border-color .15s, color .15s;
}
.cr-addset:hover { border-color: var(--cactus); color: var(--cactus); }

.album-card {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/3;
    text-decoration: none;
}
.album-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.album-card:hover img { transform: scale(1.06); }
.album-card-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--graphite-3);
    color: var(--muted); font-size: 2.5rem;
}
.album-card-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1rem;
    background: linear-gradient(transparent 40%, rgba(0,0,0,.85));
}
.album-card-name { color: #fff; font-weight: 700; font-size: 1.05rem; }
.album-card-count { color: var(--cactus); font-size: .8rem; font-weight: 600; }

.club-hero-photos { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .5rem; border-radius: var(--radius); overflow: hidden; max-height: 320px; }
.club-hero-photos img { width: 100%; height: 100%; object-fit: cover; min-height: 150px; }
.club-hero-photos img:first-child { grid-row: span 2; }
@media (max-width: 767.98px){ .club-hero-photos { grid-template-columns: 1fr 1fr; } .club-hero-photos img:first-child { grid-row: span 1; grid-column: span 2; } }
.amenity-chip { display: inline-flex; align-items: center; gap: .4rem; }

.collectible-card {
    width: 340px;
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(160deg, #1E2128 0%, #12141A 60%, #0C1F16 100%);
    border: 2px solid var(--cactus);
    box-shadow: 0 0 40px rgba(46,204,113,.25);
    font-family: 'Inter', system-ui, sans-serif;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.collectible-card::before {
    content: '';
    position: absolute; top: -50%; right: -30%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, var(--cactus-glow), transparent 70%);
}
.cc-top { display: flex; justify-content: space-between; align-items: center; position: relative; }
.cc-brand { font-weight: 800; font-size: 1.1rem; color: var(--cactus); letter-spacing: .5px; }
.cc-logo { height: 30px; width: auto; max-width: 140px; object-fit: contain; }
.cc-level { font-size: .7rem; font-weight: 700; background: var(--ball); color: #16181D; padding: 3px 10px; border-radius: 20px; }
.cc-photo {
    width: 150px; height: 150px;
    margin: 18px auto 12px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--cactus);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    position: relative;
}
.cc-photo img { width: 100%; height: 100%; object-fit: cover; }
.cc-photo-ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--graphite-3); font-size: 3.5rem; font-weight: 800; color: var(--cactus);
}
.cc-name { text-align: center; font-size: 1.4rem; font-weight: 800; position: relative; }
.cc-code { text-align: center; font-size: .8rem; color: var(--cactus); font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; }
.cc-points {
    text-align: center; font-size: 2.8rem; font-weight: 900; color: var(--ball);
    line-height: 1; margin: 8px 0;
}
.cc-points span { font-size: .9rem; color: var(--muted); margin-left: 4px; }
.cc-stats {
    display: flex; justify-content: space-around;
    background: rgba(0,0,0,.3); border-radius: 16px;
    padding: 14px 8px; margin-top: 12px; position: relative;
}
.cc-stat { text-align: center; }
.cc-stat b { display: block; font-size: 1.4rem; font-weight: 800; color: #fff; }
.cc-stat span { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.cc-foot { text-align: center; font-size: .75rem; color: var(--muted); margin-top: 14px; position: relative; }

.hero-search-wrap { max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
.hero-search {
    height: 56px;
    padding-left: 3rem !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid var(--border) !important;
    color: #fff !important;
    font-size: 1.05rem;
}
.hero-search:focus { border-color: var(--cactus) !important; box-shadow: 0 0 0 4px var(--cactus-glow) !important; }
.hero-search::placeholder { color: var(--muted); }
.hero-search-icon {
    position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%);
    color: var(--cactus); z-index: 2;
}

/* Reservas de cancha */
.court-slots { display: flex; flex-wrap: wrap; gap: .4rem; }
.court-slot {
    position: relative; background: transparent; border: 1.5px solid var(--cactus);
    border-radius: 10px; padding: .4rem .6rem; font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: transform .12s, background .12s; display: flex;
    flex-direction: column; align-items: center; line-height: 1.1; min-width: 92px;
}
.court-slot:hover:not(:disabled) { transform: translateY(-2px); background: rgba(46,204,113,.1); }
.court-slot:disabled { cursor: not-allowed; opacity: .6; }
.court-slot-tag { font-size: .62rem; font-weight: 500; margin-top: 2px; opacity: .85; text-transform: uppercase; letter-spacing: .3px; }
.court-day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }

/* Eventos */
.event-card { overflow: hidden; transition: transform .15s; }
.event-card:hover { transform: translateY(-4px); }
.event-cover { position: relative; height: 170px; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.event-cover img { width: 100%; height: 100%; object-fit: cover; }
.event-cover-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--graphite-2), var(--graphite-3)); color: var(--cactus); font-size: 2.5rem; }
.event-date-badge {
    position: absolute; top: 12px; left: 12px; background: rgba(11,31,20,.85);
    border: 1px solid var(--cactus); border-radius: 12px; padding: .35rem .6rem;
    display: flex; flex-direction: column; align-items: center; line-height: 1; backdrop-filter: blur(4px);
}
.event-date-badge .d { font-size: 1.3rem; font-weight: 900; color: var(--white); }
.event-date-badge .m { font-size: .65rem; font-weight: 700; color: var(--cactus); letter-spacing: .5px; }
.event-cat {
    position: absolute; bottom: 12px; right: 12px; background: var(--ball); color: #0B1F14;
    font-size: .68rem; font-weight: 700; padding: .25rem .6rem; border-radius: 20px; text-transform: uppercase; letter-spacing: .3px;
}
.event-mini-date {
    background: var(--graphite-3); border: 1px solid var(--border); border-radius: 10px;
    padding: .3rem .5rem; display: flex; flex-direction: column; align-items: center; line-height: 1; min-width: 48px;
}
.event-mini-date .d { font-size: 1.1rem; font-weight: 900; color: var(--white); }
.event-mini-date .m { font-size: .6rem; font-weight: 700; color: var(--cactus); }
.event-hero { position: relative; min-height: 280px; display: flex; align-items: flex-end; overflow: hidden; }
.event-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,15,20,.96) 0%, rgba(11,15,20,.4) 100%); }
.event-hero-content { position: relative; z-index: 2; padding: 2rem 0; }

/* Login social */
.btn-social {
    background: #FFFFFF; color: #1F1F1F; border: 1px solid #DADCE0;
    font-weight: 600; border-radius: var(--radius); padding: .7rem 1rem;
    display: flex; align-items: center; justify-content: center; transition: background .15s, box-shadow .15s;
}
.btn-social:hover { background: #F1F3F4; color: #1F1F1F; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.auth-divider { display: flex; align-items: center; text-align: center; margin: 1rem 0 1.2rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-divider span { padding: 0 .8rem; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* Pestañas de torneo */
.tournament-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.tournament-tabs .ttab {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
    background: var(--graphite-2); color: var(--muted-2, #C7CDD6);
    border: 1px solid var(--border); border-radius: 11px;
    padding: 11px 14px; font-size: .9rem; font-weight: 500; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.tournament-tabs .ttab:hover { border-color: var(--cactus); color: var(--white); }
.tournament-tabs .ttab.active { background: var(--cactus); color: #0B1F14; border-color: var(--cactus); }
.tournament-tabs .ttab-badge {
    background: rgba(255,255,255,.25); color: inherit; font-size: .72rem;
    padding: 1px 7px; border-radius: 10px; font-weight: 700;
}
.tournament-tabs .ttab.active .ttab-badge { background: rgba(11,31,20,.2); }
.tpanel { display: none; }
.tpanel.active { display: block; animation: fadeInTab .25s ease; }
@keyframes fadeInTab { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 576px) {
    .tournament-tabs { grid-template-columns: repeat(2, 1fr); }
    .tournament-tabs .ttab { padding: 10px 8px; font-size: .82rem; }
}

/* Encuentros */
.match-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 560px) { .match-list { grid-template-columns: 1fr; } }
.match-card {
    background: linear-gradient(145deg, var(--graphite-2), var(--graphite-3));
    border: 1px solid var(--border); border-radius: 16px; padding: 16px 16px 0;
    position: relative; overflow: hidden; transition: border-color .18s, transform .18s;
}
.match-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(var(--cactus), #17a35a);
}
.match-card:hover { border-color: var(--cactus); transform: translateY(-2px); }
.match-card.is-done::before { background: linear-gradient(var(--ball), #b9c400); }

.match-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.match-round {
    background: rgba(46,204,113,.15); color: var(--cactus); font-size: .72rem; font-weight: 700;
    padding: 3px 11px; border-radius: 20px; text-transform: uppercase; letter-spacing: .4px;
}
.match-tag {
    display: inline-flex; align-items: center; gap: 5px; background: var(--graphite);
    color: var(--muted-2, #C7CDD6); font-size: .74rem; font-weight: 500;
    padding: 3px 11px; border-radius: 20px; border: 1px solid var(--border);
}
.match-tag i { color: var(--cactus); font-size: .72rem; }
.match-tag-soft { opacity: .7; }
.match-tag-soft i { color: var(--muted); }
.match-tag-done { background: rgba(232,255,58,.1); color: var(--ball); border-color: rgba(232,255,58,.2); }
.match-tag-done i { color: var(--ball); }

.match-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-bottom: 16px; }
.match-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.match-team-right { justify-content: flex-end; }
.match-team-name {
    color: var(--white); font-weight: 600; font-size: .95rem; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis;
}
.match-team.is-winner .match-team-name { color: var(--cactus); }
.match-crown { color: var(--ball); font-size: .82rem; flex-shrink: 0; }

.match-vs { display: flex; align-items: center; justify-content: center; }
.match-vs-badge {
    width: 38px; height: 38px; border-radius: 50%; background: var(--graphite);
    border: 1px solid var(--border); color: var(--muted-2, #C7CDD6);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; letter-spacing: .5px;
}
.match-score {
    background: var(--cactus); color: #0B1F14; font-weight: 800; font-size: .95rem;
    padding: 6px 14px; border-radius: 12px; white-space: nowrap;
}

.match-share {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    flex: 1; padding: 11px; background: rgba(37,211,102,.12);
    color: #25D366; font-weight: 700; font-size: .85rem; text-decoration: none;
    border: none; cursor: pointer; transition: background .15s;
}
.match-share:hover { background: rgba(37,211,102,.22); color: #25D366; }
.match-share i { font-size: 1.1rem; }
.match-share-row { display: flex; margin: 0 -16px; border-top: 1px solid var(--border); }
.match-share-row .match-share:first-child { border-right: 1px solid var(--border); }
.match-share-img { background: rgba(46,204,113,.1); color: var(--cactus); }
.match-share-img:hover { background: rgba(46,204,113,.2); color: var(--cactus); }

@media (max-width: 576px) {
    .match-body { grid-template-columns: 1fr; gap: 8px; text-align: center; }
    .match-team, .match-team-right { justify-content: center; }
    .match-vs { order: 2; margin: 2px 0; }
    .match-team-right { order: 3; }
    .match-team-name { font-size: .9rem; }
}

/* Inscribir jugador (organizador) */
.enroll-box { text-align: left; }
.enroll-slot { margin-bottom: 16px; position: relative; }
.enroll-label { display: block; font-size: .8rem; color: var(--muted-2, #C7CDD6); margin-bottom: 6px; font-weight: 600; }
.enroll-search { background: var(--graphite) !important; border: 1px solid var(--border) !important; color: var(--white) !important; }
.enroll-results { margin-top: 6px; max-height: 220px; overflow-y: auto; }
.enroll-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
    cursor: pointer; transition: background .12s;
}
.enroll-item:hover { background: var(--graphite); }
.enroll-item-add { margin-left: auto; color: var(--cactus); }
.enroll-ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.enroll-ava-ph {
    background: var(--cactus); color: #0B1F14; display: flex; align-items: center; justify-content: center;
    font-weight: 700; text-transform: uppercase;
}
.enroll-item-info { display: flex; flex-direction: column; min-width: 0; }
.enroll-item-name { color: var(--white); font-weight: 600; font-size: .9rem; }
.enroll-item-meta { color: var(--muted); font-size: .76rem; }
.enroll-empty { padding: 10px; color: var(--muted); font-size: .85rem; text-align: center; }
.enroll-chip {
    display: flex; align-items: center; gap: 10px; background: var(--graphite);
    border: 1px solid var(--cactus); border-radius: 12px; padding: 8px 10px;
}
.enroll-chip-name { color: var(--white); font-weight: 600; flex-grow: 1; }
.enroll-chip-x { background: none; border: none; color: var(--muted-2, #C7CDD6); cursor: pointer; }
.enroll-chip-x:hover { color: #e74c3c; }

/* Banner de notificaciones push */
.push-banner {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, rgba(46,204,113,.12), rgba(46,204,113,.04));
    border: 1px solid rgba(46,204,113,.25); border-radius: 14px; padding: 14px 16px;
}
.push-banner-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: rgba(46,204,113,.15); color: var(--cactus);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.push-banner-text { flex-grow: 1; min-width: 0; }
.push-toggle-btn.is-on { border-color: var(--cactus); color: var(--cactus); }
@media (max-width: 480px) {
    .push-banner { flex-wrap: wrap; }
    .push-toggle-btn { width: 100%; }
}

/* Widget de notificaciones (público) */
.push-widget { position: fixed; right: 20px; bottom: 20px; z-index: 1050; }
.push-fab {
    width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--cactus), #17a35a); color: #0B1F14;
    font-size: 1.35rem; position: relative;
    box-shadow: 0 8px 24px rgba(46,204,113,.4);
    display: flex; align-items: center; justify-content: center;
    transition: transform .18s, box-shadow .18s;
    animation: pushFabIn .4s ease;
}
.push-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px rgba(46,204,113,.55); }
@keyframes pushFabIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.push-fab-dot {
    position: absolute; top: 2px; right: 2px; width: 13px; height: 13px;
    background: var(--ball); border: 2px solid #0B1F14; border-radius: 50%;
    animation: pushPulse 2s infinite;
}
@keyframes pushPulse {
    0% { box-shadow: 0 0 0 0 rgba(232,255,58,.6); }
    70% { box-shadow: 0 0 0 8px rgba(232,255,58,0); }
    100% { box-shadow: 0 0 0 0 rgba(232,255,58,0); }
}

.push-pop {
    position: absolute; right: 0; bottom: 68px; width: 300px;
    background: linear-gradient(160deg, #1E2128, #16181D);
    border: 1px solid var(--border); border-radius: 18px; padding: 20px;
    box-shadow: 0 16px 44px rgba(0,0,0,.5); text-align: center;
    transform: translateY(12px) scale(.96); opacity: 0; transform-origin: bottom right;
    transition: transform .25s cubic-bezier(.2,.8,.3,1.2), opacity .25s;
}
.push-pop.show { transform: translateY(0) scale(1); opacity: 1; }
.push-pop-close {
    position: absolute; top: 10px; right: 12px; background: none; border: none;
    color: var(--muted); cursor: pointer; font-size: 1rem;
}
.push-pop-close:hover { color: var(--white); }
.push-pop-emoji { font-size: 2.4rem; margin-bottom: 6px; animation: pushBounce 1.4s ease infinite; }
@keyframes pushBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.push-pop-title { color: var(--white); font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.push-pop-text { color: var(--muted-2, #C7CDD6); font-size: .84rem; line-height: 1.4; margin-bottom: 16px; }
.push-pop-btn {
    width: 100%; border: none; border-radius: 12px; padding: 11px;
    background: linear-gradient(135deg, var(--cactus), #17a35a); color: #0B1F14;
    font-weight: 700; font-size: .9rem; cursor: pointer; transition: filter .15s;
}
.push-pop-btn:hover { filter: brightness(1.08); }
.push-pop-later {
    width: 100%; background: none; border: none; color: var(--muted);
    font-size: .8rem; margin-top: 8px; cursor: pointer; padding: 6px;
}
.push-pop-later:hover { color: var(--muted-2, #C7CDD6); }

@media (max-width: 480px) {
    .push-widget { right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); }
    .push-pop { width: calc(100vw - 40px); right: -4px; }
}

/* Avatares en encuentros y rondas */
.match-avas { display: inline-flex; align-items: center; flex-shrink: 0; }
.match-avas .match-ava:not(:first-child) { margin-left: -8px; }
.match-ava {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--graphite-2); background: var(--graphite-3);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; color: var(--cactus); flex-shrink: 0;
}
.match-ava-ph { background: linear-gradient(135deg, var(--graphite-3), var(--graphite-2)); }
.match-team .match-avas { margin-right: 8px; }
.match-team-right .match-avas { margin-right: 0; margin-left: 8px; order: 2; }
.bracket-team { align-items: center; gap: 7px; }
.bracket-team .match-ava { width: 24px; height: 24px; font-size: .62rem; }
.bracket-team .match-avas .match-ava:not(:first-child) { margin-left: -6px; }
.bracket-team span { flex-grow: 1; }
@media (max-width: 576px) {
    .match-team .match-avas, .match-team-right .match-avas { display: none; }
}

/* Tab y tarjetas de Campeones */
.ttab-champions.active { background: var(--ball); color: #0B1F14; border-color: var(--ball); }
.ttab-champions { border-color: rgba(232,255,58,.3); }
.champ-card {
    background: linear-gradient(160deg, var(--graphite-2), var(--graphite-3));
    border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin-bottom: 16px;
    position: relative;
}
.champ-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(232,255,58,.08), transparent 60%);
}
.champ-card-inner { padding: 24px 20px; text-align: center; position: relative; }
.champ-header { margin-bottom: 18px; }
.champ-badge {
    display: inline-flex; align-items: center; gap: 6px; background: var(--ball); color: #0B1F14;
    font-weight: 800; font-size: .78rem; padding: 4px 14px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px;
}
.champ-cat { color: var(--cactus); font-weight: 600; margin-top: 8px; font-size: .95rem; }
.champ-players { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-bottom: 18px; }
.champ-player { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.champ-photo {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    border: 3px solid var(--cactus); box-shadow: 0 0 20px rgba(46,204,113,.3);
}
.champ-photo-ph {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--graphite-3), var(--graphite));
    color: var(--white); font-size: 2.2rem; font-weight: 800;
}
.champ-name { color: var(--white); font-weight: 700; font-size: 1rem; }
.champ-pts {
    display: inline-flex; align-items: center; gap: 7px; background: rgba(46,204,113,.15);
    color: var(--cactus); font-weight: 700; padding: 8px 18px; border-radius: 24px; font-size: .95rem;
}
.champ-share {
    width: 100%; border: none; padding: 14px; cursor: pointer;
    background: linear-gradient(135deg, var(--cactus), #17a35a); color: #0B1F14;
    font-weight: 700; font-size: .95rem; display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: filter .15s;
}
.champ-share:hover { filter: brightness(1.08); }
.champ-share i { font-size: 1.1rem; }

/* Bandera del jugador */
.player-flag { vertical-align: middle; margin-left: 6px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.4); display: inline-block; }

/* Medallas y logros */
.medal-list { display: flex; flex-direction: column; gap: 10px; }
.medal-item {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    background: var(--graphite-2); border: 1px solid var(--border); border-radius: 14px;
    text-decoration: none; position: relative; overflow: hidden;
    transition: transform .15s, border-color .15s;
}
.medal-item::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.medal-item:hover { transform: translateX(3px); }
.medal-gold::before { background: linear-gradient(#FFD700, #FFA500); }
.medal-gold:hover { border-color: #FFD700; }
.medal-silver::before { background: linear-gradient(#E8E8E8, #B0B0B0); }
.medal-silver:hover { border-color: #C0C0C0; }
.medal-bronze::before { background: linear-gradient(#CD7F32, #A0522D); }
.medal-bronze:hover { border-color: #CD7F32; }
.medal-emoji { font-size: 1.8rem; flex-shrink: 0; line-height: 1; }
.medal-info { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.medal-tournament { color: var(--white); font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medal-sub { color: var(--muted-2, #C7CDD6); font-size: .78rem; margin-top: 2px; }
.medal-arrow { color: var(--muted); font-size: .8rem; flex-shrink: 0; }

/* Banderita superpuesta en avatares de encuentros/rondas */
.match-ava-wrap { position: relative; display: inline-flex; }
.match-ava-flag {
    position: absolute; bottom: -3px; right: -4px; line-height: 0;
}
.match-ava-flag .player-flag {
    width: 14px !important; height: auto !important; margin: 0;
    border: 1.5px solid var(--graphite-2); border-radius: 2px;
}
.champ-name .player-flag { vertical-align: middle; }

/* Logo del hero (reemplaza el título) */
.hero-logo {
    max-width: min(420px, 82vw);
    max-height: 160px;
    height: auto;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,.4));
}

/* ===== Encuentros — diseño moderno ===== */
.mc {
    position: relative; border-radius: 20px; overflow: hidden;
    background: linear-gradient(160deg, var(--graphite), #121419);
    border: 1px solid var(--border);
    transition: transform .18s, border-color .18s;
}
.mc:hover { transform: translateY(-2px); border-color: rgba(46,204,113,.4); }
.mc-live::after {
    content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, rgba(46,204,113,.5), transparent 42%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.mc-done::after {
    content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, rgba(232,255,58,.4), transparent 42%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}

.mc-top {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.02);
}
.mc-round {
    font-size: .68rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: #0B1F14; background: var(--cactus); padding: 3px 10px; border-radius: 8px;
}
.mc-round.done { background: var(--ball); }
.mc-tag { font-size: .72rem; color: var(--muted-2, #C7CDD6); display: inline-flex; align-items: center; gap: 4px; }
.mc-tag i { color: var(--cactus); font-size: .7rem; }
.mc-status {
    margin-left: auto; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    padding: 3px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px;
}
.mc-status.live { color: var(--cactus); background: rgba(46,204,113,.12); }
.mc-status.fin { color: var(--ball); background: rgba(232,255,58,.1); }
.mc-status.soft { color: var(--muted); background: rgba(255,255,255,.04); }

.mc-body { padding: 16px; }
.mc-row { display: flex; align-items: center; gap: 12px; }
.mc-row .match-avas, .mc-row .match-ava, .mc-row .match-ava-wrap { flex-shrink: 0; }
.mc-row .match-ava { width: 42px; height: 42px; font-size: .95rem; border-radius: 50%; }
.mc-name { flex: 1; color: var(--white); font-weight: 600; font-size: .98rem; min-width: 0; line-height: 1.25; }
.mc-name.win { color: var(--cactus); font-weight: 800; }
.mc-crown { color: var(--ball); font-size: .82rem; }
.mc-sets {
    font-size: 1.15rem; font-weight: 800; color: var(--muted); letter-spacing: 1px;
    white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.mc-sets.win { color: var(--cactus); }

.mc-divider { display: flex; align-items: center; gap: 10px; margin: 9px 2px; }
.mc-divider::before, .mc-divider::after { content: ''; height: 1px; flex: 1; background: rgba(255,255,255,.06); }
.mc-vs { font-size: .68rem; font-weight: 800; color: var(--muted); letter-spacing: 1px; }

.mc-foot { display: flex; border-top: 1px solid rgba(255,255,255,.05); }
.mc-btn {
    flex: 1; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 7px;
    cursor: pointer; font-size: .82rem; font-weight: 700; border: none; background: transparent;
    text-decoration: none; transition: background .15s;
}
.mc-btn.wa { color: #25D366; }
.mc-btn.wa:hover { background: rgba(37,211,102,.1); }
.mc-btn.img { color: var(--cactus); border-left: 1px solid rgba(255,255,255,.05); }
.mc-btn.img:hover { background: rgba(46,204,113,.1); }
.mc-btn i { font-size: 1rem; }

/* ===== Card de torneo con póster ===== */
.tcard { padding: 0 !important; overflow: hidden; }
.tcard-poster { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--graphite-3); }
.tcard-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.tcard:hover .tcard-poster img { transform: scale(1.05); }
.tcard-badge { position: absolute; top: 10px; left: 10px; z-index: 2; }
.tcard-club {
    position: absolute; bottom: 10px; right: 10px; z-index: 2;
    width: 46px; height: 46px; border-radius: 12px; overflow: hidden;
    background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.45); border: 2px solid rgba(255,255,255,.9);
    display: flex; align-items: center; justify-content: center;
}
.tcard-club img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.tcard-club-inline {
    width: 30px; height: 30px; border-radius: 8px; overflow: hidden; background: #fff;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tcard-club-inline img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }

/* ===== Póster en detalle del torneo ===== */
.tdetail-poster { position: relative; width: 100%; max-height: 340px; border-radius: 18px; overflow: hidden; background: var(--graphite-3); }
.tdetail-poster img { width: 100%; height: 100%; max-height: 340px; object-fit: cover; display: block; }
.tdetail-club {
    position: absolute; bottom: 14px; right: 14px;
    width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.9);
    display: flex; align-items: center; justify-content: center;
}
.tdetail-club img { width: 100%; height: 100%; object-fit: contain; padding: 4px; max-height: 64px; }

/* ===== Card de instalación PWA ===== */
.pwa-install-card {
    position: relative; max-width: 560px; margin: 16px auto 0; width: 100%;
    background: linear-gradient(135deg, rgba(46,204,113,.08), rgba(255,255,255,.02));
    border: 1px solid rgba(46,204,113,.25); border-radius: 16px; padding: 14px 16px;
    backdrop-filter: blur(6px);
}
.pwa-close {
    position: absolute; top: 8px; right: 10px; background: none; border: none;
    color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.pwa-close:hover { color: var(--white); }
.pwa-main { display: flex; align-items: center; gap: 14px; }
.pwa-logo { width: 46px; height: 46px; border-radius: 12px; object-fit: contain; background: var(--graphite-3); padding: 4px; flex-shrink: 0; }
.pwa-text { flex: 1; min-width: 0; text-align: left; }
.pwa-title { color: var(--white); font-weight: 800; font-size: 1rem; line-height: 1.2; }
.pwa-sub { color: var(--muted-2, #C7CDD6); font-size: .82rem; line-height: 1.3; margin-top: 2px; }
.pwa-btn {
    flex-shrink: 0; background: var(--cactus); color: #0B1F14; border: none; border-radius: 10px;
    padding: 9px 16px; font-weight: 800; font-size: .9rem; cursor: pointer; transition: filter .15s;
}
.pwa-btn:hover { filter: brightness(1.08); }
.pwa-ios-steps { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); text-align: left; }
.pwa-ios-title { color: var(--white); font-weight: 700; font-size: .85rem; margin-bottom: 8px; }
.pwa-step { color: var(--muted-2, #C7CDD6); font-size: .85rem; display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.pwa-step i { color: var(--cactus); }
.pwa-step b { color: var(--white); }
.pwa-step-n {
    width: 20px; height: 20px; border-radius: 50%; background: var(--cactus); color: #0B1F14;
    font-weight: 800; font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
@media (max-width: 480px) {
    .pwa-main { flex-wrap: wrap; }
    .pwa-text { flex-basis: calc(100% - 60px); }
    .pwa-btn { width: 100%; margin-top: 4px; }
}

/* ===== Inputs y selects dentro de SweetAlert (tema oscuro) ===== */
.swal2-popup .swal2-select,
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup select,
.swal2-popup input[type="text"],
.swal2-popup input[type="number"],
.swal2-popup input[type="date"],
.swal2-popup input[type="email"] {
    background-color: #14161B !important;
    color: #F5F7FA !important;
    border: 1px solid #2A2F38 !important;
    border-radius: 10px !important;
}
.swal2-popup .swal2-select:focus,
.swal2-popup .swal2-input:focus,
.swal2-popup select:focus,
.swal2-popup input:focus {
    border-color: var(--cactus) !important;
    box-shadow: 0 0 0 3px rgba(46,204,113,.25) !important;
    outline: none !important;
}
.swal2-popup select option {
    background-color: #14161B !important;
    color: #F5F7FA !important;
}
.swal2-popup .swal-lbl {
    display: block;
    color: #C7CDD6;
    font-size: .82rem;
    font-weight: 600;
    margin: 0 0 4px;
}
.swal2-popup input::placeholder { color: #6B7280 !important; }

/* ===== Fondo rotativo del hero (sutil) ===== */
.pc-hero-bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.pc-hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.6s ease-in-out;
    transform: scale(1.05);
}
.pc-hero-slide.active { opacity: var(--hero-bg-op, 0.18); }
/* Velo de color del sitio + oscurecido para legibilidad */
.pc-hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(15,18,22,.72) 0%, rgba(15,18,22,.88) 60%, var(--graphite, #16181D) 100%),
        radial-gradient(1000px 400px at 50% 0%, rgba(46,204,113,.12), transparent 70%);
}
.pc-hero .container { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    .pc-hero-slide { transition: none; }
}

/* ===== Tabs de configuración ===== */
.set-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.set-tab {
    background: transparent; border: none; color: var(--muted); font-weight: 700; font-size: .9rem;
    padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.set-tab:hover { color: var(--white); }
.set-tab.active { color: var(--cactus); border-bottom-color: var(--cactus); }
.set-panel { display: none; animation: fadeInPanel .25s ease; }
.set-panel.active { display: block; }
@keyframes fadeInPanel { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ===== Gestor de imágenes del hero ===== */
.hero-slides-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; margin-bottom: 6px; }
.hero-slide-item { position: relative; width: 110px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.hero-slide-item img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide-del {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,.65); color: #fff; border: none; font-size: 1rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.hero-slide-del:hover { background: #e74c3c; }
.hero-slide-add {
    width: 110px; height: 72px; border-radius: 10px; border: 2px dashed var(--border);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--muted); cursor: pointer; font-size: .78rem; transition: border-color .15s, color .15s;
}
.hero-slide-add:hover { border-color: var(--cactus); color: var(--cactus); }
.hero-slide-add i { font-size: 1.1rem; }

/* ===== Tira de logos de clubes en el hero ===== */
.clubs-strip { text-align: center; }
.clubs-strip-label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.clubs-strip-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 26px; }
@media (max-width: 640px) {
    .clubs-strip-logos {
        flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
        gap: 16px; padding-bottom: 8px; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .clubs-strip-logos::-webkit-scrollbar { display: none; }
    .club-logo-item { flex: 0 0 auto; }
    .club-logo-img { height: 52px; max-width: 130px; }
}
.club-logo-item {
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .2s; text-decoration: none;
}
.club-logo-item:hover { transform: translateY(-3px); }
.club-logo-visual { position: relative; display: inline-block; }
.club-logo-img {
    height: 68px; width: auto; max-width: 180px; object-fit: contain; display: block;
    opacity: 0; transition: opacity .25s;
}
.club-logo-item:hover .club-logo-img,
.club-logo-item:active .club-logo-img,
.club-logo-item:focus .club-logo-img,
.hub-club:hover .club-logo-img,
.hub-club:active .club-logo-img,
.hub-club:focus .club-logo-img { opacity: 1; }
.club-logo-tint {
    position: absolute; inset: 0;
    background: var(--muted-2, #C7CDD6); opacity: .55;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: contain; mask-size: contain;
    transition: opacity .25s; pointer-events: none;
}
.club-logo-item:hover .club-logo-tint,
.club-logo-item:active .club-logo-tint,
.club-logo-item:focus .club-logo-tint,
.hub-club:hover .club-logo-tint,
.hub-club:active .club-logo-tint,
.hub-club:focus .club-logo-tint { opacity: 0; }

/* ===== Mini-sitio de patrocinador ===== */
.sponsor-site { padding-bottom: 20px; }
.sp-cover { height: 220px; background-size: cover; background-position: center; position: relative; }
.sp-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,16,.3), var(--graphite, #16181D)); }
.sp-cover-plain { background: radial-gradient(800px 300px at 50% 0, rgba(46,204,113,.18), transparent 70%), var(--graphite-3, #0F1216); }
.sp-header { display: flex; align-items: flex-end; gap: 18px; margin-top: -50px; position: relative; z-index: 1; margin-bottom: 24px; }
.sp-logo { width: 96px; height: 96px; border-radius: 20px; background: #fff; overflow: hidden; flex-shrink: 0; box-shadow: 0 6px 20px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; }
.sp-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.sp-headinfo { padding-bottom: 6px; }
.sp-name { color: var(--white); font-weight: 900; font-size: 1.9rem; margin: 0 0 6px; }
.sp-field-lbl { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.sp-action {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 16px 10px; border-radius: 14px; background: var(--graphite, #1B1E24); border: 1px solid var(--border);
    color: var(--white); text-decoration: none; font-weight: 700; font-size: .85rem; height: 100%; transition: transform .15s, border-color .15s;
}
.sp-action:hover { transform: translateY(-3px); border-color: var(--cactus); color: var(--white); }
.sp-action i { font-size: 1.5rem; color: var(--cactus); }
.sp-action.wa i { color: #25D366; }
.sp-social { color: var(--muted-2, #C7CDD6); font-size: 1.6rem; transition: color .15s; }
.sp-social:hover { color: var(--cactus); }
.sp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sp-gphoto { aspect-ratio: 1; background-size: cover; background-position: center; border-radius: 12px; display: block; transition: transform .2s; }
.sp-gphoto:hover { transform: scale(1.03); }
@media (max-width: 560px) { .sp-gallery { grid-template-columns: repeat(2, 1fr); } .sp-name { font-size: 1.5rem; } }

/* Sponsors sin filtro de color (color original siempre) */
.sponsor-nocolor .sponsor-logo { opacity: 1 !important; }
.sponsor-nocolor .sponsor-tint { opacity: 0 !important; }

/* ===== Gestor de sponsors del torneo ===== */
.tsp-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.tsp-item {
    position: relative; width: 120px; padding: 10px; border-radius: 12px;
    background: var(--graphite-3, #0F1216); border: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.tsp-item img { max-height: 46px; max-width: 100px; object-fit: contain; }
.tsp-noimg { color: var(--white); font-weight: 700; font-size: .85rem; }
.tsp-name { color: var(--muted-2, #C7CDD6); font-size: .72rem; word-break: break-word; }
.tsp-del {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,0,0,.6); color: #fff; border: none; font-size: .95rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.tsp-del:hover { background: #e74c3c; }

/* Logos de clubes sin filtro (color original + borde del color principal) */
.clubs-nocolor .club-logo-img { opacity: 1 !important; }
.clubs-nocolor .club-logo-tint { opacity: 0 !important; }

.alert-inscrito {
    background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.4);
    color: var(--cactus); border-radius: 10px; padding: 10px 12px; font-weight: 700; text-align: center; font-size: .9rem;
}

/* ===== Póster del evento + modal ===== */
.event-poster-wrap { position: relative; display: inline-block; width: 100%; text-align: center; }
.event-poster {
    max-width: 100%; max-height: 520px; width: auto; border-radius: 16px; cursor: zoom-in;
    border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .2s;
}
.event-poster:hover { transform: translateY(-2px); }
.event-poster-zoom {
    position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 10px;
    background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center;
    pointer-events: none; font-size: .95rem;
}
.poster-modal {
    display: none; position: fixed; inset: 0; z-index: 3000;
    background: rgba(8,10,13,.92); align-items: center; justify-content: center; padding: 24px;
    cursor: zoom-out;
}
.poster-modal.open { display: flex; animation: posterFade .2s ease; }
@keyframes posterFade { from { opacity: 0; } to { opacity: 1; } }
.poster-modal img { max-width: 96%; max-height: 92vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); cursor: default; }
.poster-modal-close {
    position: absolute; top: 18px; right: 26px; color: #fff; font-size: 2.4rem; line-height: 1;
    cursor: pointer; opacity: .8; transition: opacity .15s;
}
.poster-modal-close:hover { opacity: 1; }

/* ===== Logo en el perfil del club (sin recorte) ===== */
.club-profile-logo {
    width: 110px; height: 110px; object-fit: contain; object-position: center;
    background: #fff; border-radius: 18px; padding: 10px;
    border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

/* ===== Filtros de torneos ===== */
.tfilters { display: flex; gap: 10px; flex-wrap: wrap; }
.tfilter-search {
    flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 0 14px; height: 44px;
}
.tfilter-search i { color: var(--muted); }
.tfilter-search input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--white); font-size: 15px; height: 100%;
}
.tfilter-search input::placeholder { color: var(--muted); }
.tfilter-city {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 0 14px; height: 44px;
    color: var(--muted-2); font-size: 15px; min-width: 180px; cursor: pointer;
}
.tfilter-city:focus { outline: none; border-color: var(--cactus); }
.tfilter-city option { background: var(--graphite-2); color: var(--white); }

.tchips { display: flex; gap: 8px; flex-wrap: wrap; }
.tchip {
    background: var(--panel-2, #16181D); border: 1px solid var(--border);
    color: var(--muted-2); font-size: 14px; padding: 7px 16px;
    border-radius: 20px; cursor: pointer; transition: all .15s;
}
.tchip:hover { border-color: var(--cactus); color: var(--white); }
.tchip.active {
    background: var(--cactus); border-color: var(--cactus);
    color: #0B1F14; font-weight: 600;
}

/* ===== Detalle de torneo · layout Propuesta B ===== */
.tdetail-layout { display: flex; gap: 20px; align-items: flex-start; }
.tdetail-main { flex: 1; min-width: 0; }
.tdetail-side { width: 260px; flex-shrink: 0; position: sticky; top: 84px; }
.tside-card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 16px; padding: 20px;
}
.tside-price { font-size: 30px; font-weight: 800; color: var(--cactus); text-align: center; line-height: 1; }
.tside-price-unit { font-size: 12px; color: var(--muted); text-align: center; margin-top: 4px; margin-bottom: 16px; }
.tside-meta { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
.tside-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; }
.tside-k { color: var(--muted); }
.tside-k i { width: 18px; }
.tside-v { color: var(--white); font-weight: 500; }

/* Tarjetas de datos clave · solo móvil (en escritorio están en la columna lateral) */
.tdetail-stats-mobile { display: none; }
.tdetail-actions-mobile { display: none; }
@media (max-width: 991px) {
    .tdetail-stats-mobile {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .tdetail-actions-mobile { display: block; }
    .tstat {
        background: var(--panel); border: 1px solid var(--border);
        border-radius: 12px; padding: 12px 14px;
    }
    .tstat-k { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
    .tstat-k i { color: var(--cactus); width: 16px; }
    .tstat-v { font-size: 15px; font-weight: 600; color: var(--white); }
}

/* Barra de acción fija en móvil — desactivada (se usan los botones grandes en el cuerpo) */
.tside-mobilebar { display: none !important; }
@media (max-width: 991px) {
    .tdetail-layout { display: block; }
    .tdetail-side { display: none; }
}

/* ===== Lista de torneos abiertos (index) ===== */
.topen-row {
    background: var(--graphite-2); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; transition: border-color .15s, transform .15s;
}
.topen-row:hover { border-color: var(--cactus); transform: translateY(-1px); }
.topen-date {
    flex-shrink: 0; width: 58px;
    background: rgba(46, 204, 113, .14);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--cactus);
}
.topen-day { font-size: 20px; font-weight: 700; line-height: 1; }
.topen-mon { font-size: 11px; text-transform: uppercase; margin-top: 2px; }
.topen-body {
    flex: 1; min-width: 0; padding: 11px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.topen-main { min-width: 0; }
.topen-name {
    font-size: 15px; font-weight: 600; color: var(--white);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topen-place { font-size: 12px; color: var(--muted-2, #C7CDD6); margin-top: 3px; }
.topen-place i { opacity: .8; }
.topen-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.topen-tag {
    font-size: 11px; background: var(--graphite); color: var(--muted-2, #C7CDD6);
    padding: 2px 9px; border-radius: 20px; border: 1px solid var(--border);
}
.topen-arrow { color: var(--muted); flex-shrink: 0; }

/* ===== Footer del sitio ===== */
.site-footer {
    margin-top: 4rem;
    background: var(--graphite-2);
    border-top: 1px solid var(--border);
    padding: 2.5rem 0 1.5rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}
.footer-brand-col .footer-tagline {
    color: var(--muted-2, #C7CDD6);
    font-size: .9rem;
    margin: 0 0 1rem;
    max-width: 260px;
}
.footer-social { display: flex; gap: 10px; }
.footer-soc {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--graphite); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted-2, #C7CDD6); transition: all .15s;
}
.footer-soc:hover { color: var(--cactus); border-color: var(--cactus); transform: translateY(-2px); }
.footer-h {
    color: var(--white); font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a {
    color: var(--muted-2, #C7CDD6); text-decoration: none;
    font-size: .9rem; transition: color .15s;
}
.footer-links a:hover { color: var(--cactus); }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 1.5rem; flex-wrap: wrap; gap: .5rem;
    color: var(--muted); font-size: .85rem;
}
.footer-madein i { color: var(--cactus); margin-right: 4px; }

@media (max-width: 767.98px) {
    .site-footer { padding: 2rem 0 1.25rem; text-align: center; }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem 1rem;
        text-align: left;
    }
    .footer-brand-col {
        grid-column: 1 / -1;
        text-align: center;
        padding-bottom: .5rem;
        border-bottom: 1px solid var(--border);
    }
    .footer-brand-col .footer-tagline { max-width: none; }
    .footer-social { justify-content: center; }
    .footer-bottom { justify-content: center; text-align: center; }
}

/* ===== Página pública de Patrocinadores ===== */
.sponsors-hero {
    padding: 3rem 0 2rem;
    background: radial-gradient(circle at 50% 0%, rgba(46,204,113,.10), transparent 60%);
}
.sponsors-eyebrow {
    display: inline-block; font-size: .8rem; color: var(--cactus);
    background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.3);
    padding: 5px 16px; border-radius: 20px; margin-bottom: 1rem; font-weight: 600;
}
.sponsors-title { font-size: 2.2rem; font-weight: 800; margin-bottom: .5rem; }
.sponsors-sub { color: var(--muted-2, #C7CDD6); max-width: 560px; margin: 0 auto; font-size: 1rem; }

.sp-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; }
.sp-chip {
    background: var(--graphite-2); border: 1px solid var(--border);
    color: var(--muted-2, #C7CDD6); font-size: 14px; padding: 7px 18px;
    border-radius: 20px; cursor: pointer; transition: all .15s;
}
.sp-chip:hover { border-color: var(--cactus); color: var(--white); }
.sp-chip.active { background: var(--cactus); border-color: var(--cactus); color: #0B1F14; font-weight: 600; }

.sp-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.sp-card {
    position: relative; display: flex; align-items: center; gap: 16px;
    background: var(--graphite-2); border: 1px solid var(--border);
    border-radius: 16px; padding: 18px; text-decoration: none;
    transition: border-color .18s, transform .18s;
    overflow: hidden;
}
.sp-card:hover { border-color: var(--cactus); transform: translateY(-3px); }
.sp-card-logo {
    flex-shrink: 0; width: 70px; height: 70px; border-radius: 14px;
    background: var(--white); display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.sp-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.sp-card-initial { font-size: 28px; font-weight: 800; color: var(--cactus); }
.sp-card-body { flex: 1; min-width: 0; }
.sp-card-name {
    font-size: 1.05rem; font-weight: 700; color: var(--white);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-card-cat {
    display: inline-block; font-size: 11px; color: var(--cactus);
    background: rgba(46,204,113,.12); padding: 2px 10px; border-radius: 20px;
    margin-top: 4px;
}
.sp-card-desc {
    font-size: .82rem; color: var(--muted-2, #C7CDD6); margin: 8px 0 0;
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-card-meta { display: flex; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--muted); align-items: center; }
.sp-card-meta i { color: var(--cactus); }
.sp-card-arrow {
    position: absolute; right: 16px; top: 18px;
    color: var(--muted); opacity: 0; transition: opacity .18s, transform .18s;
}
.sp-card:hover .sp-card-arrow { opacity: 1; transform: translateX(3px); color: var(--cactus); }

.sp-cta {
    margin-top: 2.5rem;
    background: linear-gradient(120deg, rgba(46,204,113,.10), transparent);
    border: 1px solid rgba(46,204,113,.25);
    border-radius: 18px; padding: 2rem;
}
.sp-cta-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
}
.sp-cta-title { color: var(--white); font-weight: 700; margin: 0 0 .3rem; }
.sp-cta-text { color: var(--muted-2, #C7CDD6); margin: 0; font-size: .92rem; }
.sp-cta-btn { flex-shrink: 0; }

@media (max-width: 767.98px) {
    .sponsors-title { font-size: 1.7rem; }
    .sp-grid { grid-template-columns: 1fr; }
    .sp-cta-inner { flex-direction: column; align-items: flex-start; text-align: left; }
    .sp-cta-btn { width: 100%; text-align: center; }
}

/* ===== Página de búsqueda ===== */
.search-page { max-width: 640px; margin: 0 auto; }
.search-h1 { font-size: 2rem; font-weight: 800; text-align: center; margin-bottom: .3rem; }
.search-sub { color: var(--muted-2, #C7CDD6); text-align: center; margin-bottom: 2rem; }
.search-box {
    display: flex; align-items: center; gap: 12px;
    background: var(--graphite-2); border: 1px solid var(--border);
    border-radius: 14px; padding: 0 18px; height: 56px; margin-bottom: 1.25rem;
    transition: border-color .15s;
}
.search-box:focus-within { border-color: var(--cactus); }
.search-box > i { color: var(--muted); font-size: 18px; }
.search-box input {
    flex: 1; background: transparent; border: none; outline: none;
    color: var(--white); font-size: 1.05rem; height: 100%;
}
.search-box input::placeholder { color: var(--muted); }
.search-clear { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.search-clear:hover { color: var(--white); }
.search-hint { text-align: center; color: var(--muted); padding: 2rem 0; font-size: .95rem; }
.search-hint i { color: var(--cactus); margin-right: 6px; }

.sr-section { margin-bottom: 1.5rem; }
.sr-head {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--cactus); font-weight: 700; margin-bottom: .6rem;
}
.sr-head i { margin-right: 6px; }
.sr-list { display: flex; flex-direction: column; gap: 8px; }
.sr-item {
    display: flex; align-items: center; gap: 14px;
    background: var(--graphite-2); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 16px; text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.sr-item:hover { border-color: var(--cactus); transform: translateX(3px); }
.sr-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    background: var(--graphite); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--cactus); font-weight: 700; font-size: 18px;
}
.sr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sr-avatar.sr-icon { background: rgba(46,204,113,.12); }
.sr-name { flex: 1; min-width: 0; color: var(--white); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-item > i { color: var(--muted); font-size: 13px; }

/* ===== Panel unificado: clubes protagonistas + barra de stats ===== */
.hub-panel {
    background: var(--graphite-2); border: 1px solid var(--border);
    border-radius: 16px; padding: 24px;
}
.hub-clubs-label {
    text-align: center; color: var(--muted); font-size: .72rem;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px;
}
.hub-clubs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 14px; margin-bottom: 20px;
    justify-content: center;
}
.hub-club {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 16px 10px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--graphite);
    text-decoration: none; transition: border-color .18s, transform .18s;
}
.hub-club:hover { border-color: var(--cactus); transform: translateY(-2px); }
.hub-club-logo { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; }
.hub-club-logo .club-logo-img { height: 56px; max-width: 120px; }
.hub-club-name {
    font-size: .85rem; color: var(--white); font-weight: 600; text-align: center;
    line-height: 1.25;
}
.hub-stats {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; flex-wrap: wrap;
    background: var(--graphite); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 18px;
}
.hub-stat {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--white); transition: color .15s;
}
.hub-stat:hover { color: var(--cactus); }
.hub-stat i { color: var(--cactus); font-size: 1rem; }
.hub-stat-val { font-size: 1.05rem; font-weight: 700; }
.hub-stat-lbl { font-size: .85rem; color: var(--muted-2, #C7CDD6); }
.hub-stat-sep { color: var(--border-strong, #3a4150); margin: 0 8px; }

@media (max-width: 575.98px) {
    .hub-panel { padding: 18px 14px; }
    .hub-clubs { grid-template-columns: repeat(2, 1fr); }
    .hub-stats { gap: 4px; padding: 12px; }
    .hub-stat-sep { margin: 0 4px; }
    .hub-stat-lbl { font-size: .8rem; }
}

/* ===== Foto de compañero en tarjetas de pareja ===== */
.pair-mate-photo {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    object-fit: cover; background: var(--graphite);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
}
.pair-mate-initials {
    color: var(--cactus); font-weight: 700; font-size: .95rem;
    background: rgba(46,204,113,.12);
}
.min-w-0 { min-width: 0; }

/* ===== Agenda de canchas (rejilla) ===== */
.agenda-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.agenda-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.agenda-table th {
    background: var(--graphite-2); color: var(--white); font-weight: 600;
    font-size: .85rem; padding: 12px 10px; text-align: center;
    border-bottom: 1px solid var(--border); position: sticky; top: 0;
}
.agenda-table th.agenda-hcell { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.agenda-time {
    background: var(--graphite-2); color: var(--muted-2, #C7CDD6); font-size: .8rem;
    font-weight: 600; text-align: center; padding: 10px 8px; white-space: nowrap;
    border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
}
.agenda-cell {
    padding: 5px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
    vertical-align: middle; min-width: 120px;
}
.agenda-cell:last-child { border-right: none; }
.agenda-book {
    border-radius: 8px; padding: 7px 9px; cursor: pointer; transition: transform .12s;
    border-left: 3px solid;
}
.agenda-book:hover { transform: translateY(-1px); }
.agenda-book.is-approved { background: rgba(46,204,113,.14); border-left-color: var(--cactus); }
.agenda-book.is-pending  { background: rgba(232,255,58,.12); border-left-color: var(--ball); }
.agenda-book-name { font-size: .82rem; font-weight: 600; color: var(--white); line-height: 1.2; }
.agenda-book-sub { font-size: .7rem; color: var(--muted-2, #C7CDD6); margin-top: 2px; }
.agenda-book.is-pending .agenda-book-sub { color: var(--ball); }
.agenda-free { display: block; text-align: center; color: var(--muted); font-size: .78rem; opacity: .55; cursor: pointer; padding: 6px 0; border-radius: 6px; transition: all .12s; }
.agenda-free:hover { opacity: 1; color: var(--cactus); background: rgba(46,204,113,.08); }

/* ===== Mis reservas (panel jugador) ===== */
.bk-section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2, #C7CDD6); font-weight: 700; margin-bottom: 12px; }
.bk-list { display: flex; flex-direction: column; gap: 12px; }
.bk-card {
    display: flex; gap: 0; background: var(--graphite-2); border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden; transition: border-color .15s, transform .15s;
}
.bk-card:hover { border-color: var(--cactus); transform: translateY(-1px); }
.bk-card.bk-past { opacity: .72; }
.bk-date {
    flex-shrink: 0; width: 66px; background: rgba(46,204,113,.12);
    display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--cactus);
}
.bk-card.bk-past .bk-date { background: var(--graphite); color: var(--muted); }
.bk-date-day { font-size: 24px; font-weight: 800; line-height: 1; }
.bk-date-mon { font-size: 12px; text-transform: uppercase; margin-top: 3px; }
.bk-body { flex: 1; min-width: 0; padding: 14px 16px; }
.bk-club { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bk-club-logo {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; object-fit: contain;
    background: var(--white); padding: 3px;
    display: inline-flex; align-items: center; justify-content: center;
}
.bk-club-initial { background: rgba(46,204,113,.15); color: var(--cactus); font-weight: 800; font-size: 1.1rem; padding: 0; }
.bk-club-name { font-size: 1.02rem; font-weight: 700; color: var(--white); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-club-name:hover { color: var(--cactus); }
.bk-court { font-size: .8rem; color: var(--muted-2, #C7CDD6); margin-top: 2px; }
.bk-court i { color: var(--cactus); }
.bk-badge { flex-shrink: 0; align-self: flex-start; }
.bk-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--muted-2, #C7CDD6); }
.bk-meta i { color: var(--cactus); margin-right: 3px; }
.bk-note { font-size: .82rem; color: var(--muted-2, #C7CDD6); margin-top: 8px; padding: 6px 10px; background: var(--graphite); border-radius: 8px; }
.bk-note i { color: var(--cactus); }
.bk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 575.98px) {
    .bk-date { width: 54px; }
    .bk-date-day { font-size: 20px; }
    .bk-actions .btn { flex: 1; }
}

/* ===== Portada del club (fondo del header, info legible) ===== */
.club-header.has-cover {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
}
.club-header.has-cover::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--club-cover);
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.club-header.has-cover::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(22,24,29,.92) 0%, rgba(22,24,29,.82) 45%, rgba(22,24,29,.55) 100%),
        linear-gradient(0deg, rgba(22,24,29,.6) 0%, rgba(22,24,29,.25) 100%);
    z-index: 1;
}
.club-header.has-cover .club-header-inner {
    position: relative;
    z-index: 2;
}
@media (max-width: 575.98px) {
    .club-header.has-cover::after {
        background: linear-gradient(180deg, rgba(22,24,29,.7) 0%, rgba(22,24,29,.88) 100%);
    }
}

/* ===== Zona de peligro / borrado de cuenta ===== */
.danger-zone { border: 1px solid rgba(231,76,60,.35) !important; }
.btn-outline-danger {
    background: transparent; border: 1px solid #e74c3c; color: #e74c3c;
    padding: 9px 18px; border-radius: 10px; font-weight: 600; transition: all .15s;
}
.btn-outline-danger:hover { background: #e74c3c; color: #fff; }

/* ===== Modo App nativa (Capacitor / standalone) ===== */
.is-native-app .site-footer,
.is-native-app .pwa-install-card,
.is-native-app .app-hide-native { display: none !important; }

.is-web .app-only-native { display: none !important; }

/* Safe areas de iOS (notch arriba, barra de gestos abajo) */
.is-native-app body { padding-top: env(safe-area-inset-top); }
.is-native-app .pc-bottomnav {
    padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
}
.is-native-app .pc-navbar,
.is-native-app .navbar {
    padding-top: calc(env(safe-area-inset-top) + 4px);
}
/* En app, el contenido no queda tapado por la bottom nav */
.is-native-app main { padding-bottom: 84px; }

/* ===== Botón Sign in with Apple ===== */
.btn-apple {
    background: #000; color: #fff; border: 1px solid #000;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 16px; gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px; font-weight: 500; line-height: 1;
    border-radius: 8px; text-decoration: none;
}
.btn-apple .apple-logo { flex-shrink: 0; display: block; margin-top: -2px; }
.btn-apple .apple-btn-text { display: inline-block; }
.btn-apple:hover { background: #1a1a1a; color: #fff; }
.btn-apple:active { background: #333; color: #fff; }
.btn-apple:hover { background: #1a1a1a; color: #fff; }

/* ===== Página de soporte ===== */
.support-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.support-contact {
    display: flex; align-items: center; gap: 14px; padding: 16px;
    background: var(--graphite); border: 1px solid var(--border); border-radius: 12px;
    text-decoration: none; transition: border-color .15s, transform .15s;
}
.support-contact:hover { border-color: var(--cactus); transform: translateY(-1px); }
.support-ico {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 11px;
    background: rgba(46,204,113,.14); color: var(--cactus);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.support-contact-label { display: block; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.support-contact-value { display: block; font-size: .95rem; color: var(--white); font-weight: 600; word-break: break-word; }
.support-faq { display: flex; flex-direction: column; gap: 10px; }
.support-faq-item {
    background: var(--graphite); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.support-faq-item summary {
    cursor: pointer; font-weight: 600; color: var(--white); list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.support-faq-item summary::-webkit-details-marker { display: none; }
.support-faq-item summary::after { content: "\002B"; color: var(--cactus); font-size: 1.3rem; line-height: 1; }
.support-faq-item[open] summary::after { content: "\2212"; }
.support-faq-item p { margin: 12px 0 0; color: var(--muted-2, #C7CDD6); font-size: .92rem; line-height: 1.6; }

/* ===== Escaneo QR nativo — SOLO iOS (@capacitor-community/barcode-scanner) =====
   Este plugin renderiza la camara DETRAS del WebView, por eso hace falta
   transparentar la vista con hideBackground(). El plugin oficial que usa
   Android (@capacitor/barcode-scanner) trae su propia UI y NO usa estas reglas.
   No eliminar mientras el build de iOS publicado siga usando el plugin community. */
body.qr-scanning {
    background: transparent !important;
    --background: transparent;
}
body.qr-scanning .app-navbar,
body.qr-scanning .pc-navbar,
body.qr-scanning .pc-bottomnav,
body.qr-scanning main,
body.qr-scanning footer,
body.qr-scanning .swal2-container {
    visibility: hidden !important;
}
body.qr-scanning::after {
    content: "Escanea el código QR";
    position: fixed; left: 0; right: 0; bottom: 90px;
    text-align: center; color: #fff; font-size: 1rem; font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,.8); z-index: 2147483647;
}

/* ===== Página pública de eliminación de cuenta (Google Play) ===== */
.del-app-name {
    display: flex; gap: 12px; align-items: flex-start; margin-top: 20px;
    background: var(--graphite); border: 1px solid var(--border);
    border-left: 3px solid var(--cactus); border-radius: 10px; padding: 14px 16px;
}
.del-app-name i { color: var(--cactus); margin-top: 3px; }
.del-steps { padding-left: 20px; margin: 0; }
.del-steps li { margin-bottom: 8px; color: var(--muted-2, #C7CDD6); line-height: 1.55; }
.del-plain { list-style: none; padding: 0; margin: 0; }
.del-plain li { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--muted-2, #C7CDD6); }
.del-plain li:last-child { border-bottom: 0; }
.del-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.del-box { background: var(--graphite); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.del-box-h { font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.del-box-out .del-box-h { color: #e74c3c; }
.del-box-keep .del-box-h { color: var(--ball, #E8FF3A); }
.del-box ul { padding-left: 18px; margin: 0 0 8px; }
.del-box li { color: var(--muted-2, #C7CDD6); font-size: .9rem; margin-bottom: 6px; line-height: 1.5; }
.del-warn {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(231,76,60,.08); border: 1px solid rgba(231,76,60,.35);
    border-radius: 10px; padding: 14px 16px; color: var(--muted-2, #C7CDD6);
}
.del-warn i { color: #e74c3c; margin-top: 3px; }

/* ===== Botones de autenticación: área de toque y respuesta garantizada (iPhone/iPad) ===== */
.btn-social, .siwa-official, #appleFallback, #googleLoginBtn {
    min-height: 44px;
    pointer-events: auto !important;
    position: relative;
    z-index: 5;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255,255,255,.15);
    cursor: pointer;
}
.btn-social > svg, .btn-social > span { pointer-events: none; }
.btn-apple { -webkit-appearance: none; appearance: none; }
@media (min-width: 768px) {
    .btn-social, .siwa-official { max-width: 100%; }
}

/* ===== Criterios de desempate (drag) ===== */
.tb-list { display: flex; flex-direction: column; gap: 8px; }
.tb-item {
    display: flex; align-items: center; gap: 12px;
    background: var(--graphite); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 14px; cursor: grab;
}
.tb-item:active { cursor: grabbing; }
.tb-num {
    width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
    background: rgba(46,204,113,.15); color: var(--cactus);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
}
.tb-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted-2, #C7CDD6); margin: 0; cursor: pointer; }

.border-top-soft { border-top: 1px solid var(--border); }
.reg-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.reg-chip { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; line-height: 1; padding: .28rem .5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--graphite-3); color: var(--white); }
.reg-chip-lvl { color: var(--ball); border-color: rgba(232,255,58,.35); }
.reg-chip-rank { color: var(--cactus); border-color: rgba(46,204,113,.35); }
.reg-chip-wr { color: #7FB3FF; border-color: rgba(127,179,255,.35); }

.level-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; line-height: 1; padding: .3rem .55rem; border-radius: 999px; border: 1px solid var(--border); }
.level-badge i { font-size: .7rem; }
.level-badge.lvl-low { color: #9FB0C3; border-color: rgba(159,176,195,.4); background: rgba(159,176,195,.08); }
.level-badge.lvl-mid { color: var(--cactus); border-color: rgba(46,204,113,.4); background: rgba(46,204,113,.08); }
.level-badge.lvl-elite { color: var(--ball); border-color: rgba(232,255,58,.45); background: rgba(232,255,58,.08); }

.bk-total { margin-top:.5rem; font-size:.9rem; color:var(--white); }
.bk-pay { margin-top:.75rem; padding:.75rem .9rem; border:1px solid var(--border); border-radius:12px; background:var(--graphite-3); }
.bk-pay-title { font-weight:700; color:var(--ball); font-size:.85rem; margin-bottom:.5rem; }
.bk-pay-block { font-size:.82rem; color:#C7CED8; padding:.5rem 0; border-top:1px solid var(--border); }
.bk-pay-block:first-of-type { border-top:0; }
.bk-pay-tag { display:inline-block; font-size:.7rem; font-weight:700; color:var(--cactus); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.25rem; }