/* ═══════════════════════════════════════════════════════════════════
   TRIXPADEL — Main Stylesheet
   Fonts: Outfit (body) + Anton (display) | Theme: Dark + TRX Lime
   ═══════════════════════════════════════════════════════════════════ */

/* ─── CSS Variables ─────────────────────────────────────────────── */
:root {
    /* Club brand colors (customizable per club via base.html inline) */
    --color-primary: #1b5e20;
    --color-secondary: #388e3c;
    --color-club-accent: #66bb6a;

    /* TriXPadel fixed brand accent — never customizable */
    --accent-trx: #9DD30C;
    --accent-trx-bright: #b4ec1a;
    --accent-trx-dim: #6f9609;
    --accent-trx-glow: rgba(157, 211, 12, 0.35);

    /* Dark mode foundation — "Stadium Twilight" (lifted +3-4% L vs near-black) */
    --color-bg: #11140f;
    --color-bg-2: #181c16;
    --color-surface: #1f241d;
    --color-surface-2: #272d24;
    --color-surface-3: #313830;
    --color-text: #f4f6f0;
    --color-text-muted: #adb3a8;
    --color-text-dim: #797f74;
    --color-border: #3a4137;
    --color-border-soft: #2a3027;
    --color-shadow: rgba(0, 0, 0, 0.45);

    /* Podium colors */
    --gold: #fbbf24;
    --gold-dim: #92710f;
    --silver: #cbd5e1;
    --silver-dim: #64748b;
    --bronze: #d97706;
    --bronze-dim: #7c4709;

    --danger: #ef4444;
    --warn: #f59e0b;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 18px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
    --shadow-glow: 0 0 24px var(--accent-trx-glow);
    --shadow-color: 0 4px 20px var(--color-shadow);

    --transition: 0.2s ease;
    --font: 'Outfit', sans-serif;
    --font-display: 'Anton', 'Archivo Black', 'Bebas Neue', sans-serif;
    --font-condensed: 'Bebas Neue', 'Anton', sans-serif;
}

/* ─── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    background-image:
        /* Horizon spotlight desde arriba */
        radial-gradient(ellipse 90% 40% at 50% -10%, rgba(157,211,12,0.09) 0%, transparent 60%),
        /* Esquina superior izquierda */
        radial-gradient(ellipse 50% 60% at 12% 28%, rgba(157,211,12,0.06) 0%, transparent 65%),
        /* Esquina inferior derecha — sombra de cancha verde */
        radial-gradient(ellipse 65% 45% at 92% 75%, rgba(50,100,40,0.07) 0%, transparent 60%),
        /* Floor glow inferior */
        radial-gradient(ellipse 80% 30% at 50% 105%, rgba(40,80,30,0.05) 0%, transparent 50%);
    background-attachment: fixed;
}


a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ─── Typography ────────────────────────────────────────────────── */
h1, h2 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.05;
    text-transform: uppercase;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: 0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.01em; }
h4 { font-size: 1rem; font-weight: 600; }

.display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
.display-num { font-family: var(--font-display); font-weight: 400; line-height: 0.95; letter-spacing: 0; }
.condensed { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 0.05em; }
.text-trx { color: var(--accent-trx); }
.text-mono-tab { font-variant-numeric: tabular-nums; }

/* Accent text underline used by hero etc */
.text-glow { text-shadow: 0 0 24px var(--accent-trx-glow); }

/* ─── Layout ────────────────────────────────────────────────────── */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ─── Navbar ────────────────────────────────────────────────────── */
.navbar {
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.navbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 1rem;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: var(--shadow-sm);
}

.brand-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    padding: 2px;
    box-shadow: var(--shadow-sm);
}

.club-card-banner {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    position: relative;
}

.club-card-logo {
    max-height: 100px;
    max-width: 80%;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
}

.club-initial {
    font-size: 4rem;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.hero-club-logo {
    display: block;
    max-height: 80px;
    max-width: 220px;
    object-fit: contain;
    margin: 0 auto 1.25rem;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.3));
}

.navbar-links {
    display: flex;
    gap: 0.25rem;
}

.nav-link {
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    transition: all var(--transition);
}

.nav-link:hover, .nav-link.active {
    background: var(--color-bg);
    color: var(--color-primary);
}

.nav-btn-admin {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--color-primary);
    color: #fff !important;
    border: 2px solid var(--color-primary);
    transition: all var(--transition);
    margin-left: 0.5rem;
}
.nav-btn-admin:hover {
    background: transparent;
    color: var(--color-primary) !important;
}

/* ─── Back to TriXPadel nav button ───────────────────────────────── */
.nav-back-main {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
    border: 1.5px solid var(--color-border);
    letter-spacing: 0.01em;
}
.nav-back-main:hover {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.nav-back-main .back-label { display: inline; }
.nav-mobile-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--color-primary);
    border: 1.5px solid var(--color-border);
    margin-bottom: 0.4rem;
    transition: all var(--transition);
}
.nav-mobile-back:hover { background: var(--color-bg); }

/* ─── Hero Section ──────────────────────────────────────────────── */
.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 60%, var(--color-accent) 100%);
    padding: 4rem 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-content { position: relative; }

.hero-title {
    color: white;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.hero-subtitle {
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
    margin-top: 0.75rem;
    font-weight: 400;
}

/* ─── Botón compartir por WhatsApp ──────────────────────────────── */
.hero-share { margin-top: 1rem; }
.btn-share-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #25D366;
    color: #fff;
    padding: 0.55rem 1.05rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
.btn-share-wa:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45); }
.btn-share-wa:active { transform: translateY(0); }
.btn-share-wa svg { flex-shrink: 0; }

/* ─── Torneo Header ─────────────────────────────────────────────── */
.torneo-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    padding: 2.5rem 0;
}

.torneo-header-content {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.back-link {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color var(--transition);
    white-space: nowrap;
    margin-top: 0.3rem;
}

.back-link:hover { color: white; }

.torneo-title-block h1 {
    color: white;
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
}

.torneo-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.torneo-location {
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.95rem;
}

.torneo-location svg { width: 16px; height: 16px; }

/* ─── Section Headers ───────────────────────────────────────────── */
.section { padding: 2rem 0; }

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-border);
}

.section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
}

.section-count {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    background: var(--color-bg);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
}

/* ─── Tournament Cards ──────────────────────────────────────────── */
.tournaments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.tournament-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    transition: all var(--transition);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.tournament-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-color);
    border-color: var(--color-accent);
}

.tournament-card.finished { opacity: 0.85; }

.card-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    width: fit-content;
}

.card-status-badge.active {
    background: #e8f5e9;
    color: #2e7d32;
}

.card-status-badge.finished-badge {
    background: #f5f5f5;
    color: #757575;
}
.card-status-badge.historico-badge {
    background: #e3f2fd;
    color: #1565c0;
}

.card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.card-location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.card-location svg { width: 14px; height: 14px; flex-shrink: 0; }

.card-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.meta-item svg { width: 14px; height: 14px; }

.card-arrow {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-accent);
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity var(--transition), right var(--transition);
}

.tournament-card:hover .card-arrow {
    opacity: 1;
    right: 1rem;
}

/* ─── Pulse Animation ───────────────────────────────────────────── */
.pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #4caf50;
    border-radius: 50%;
    position: relative;
    animation: pulse-ring 1.5s ease-out infinite;
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

/* ─── Status Badges ─────────────────────────────────────────────── */
.badge-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
}

.badge-finished {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
}

/* ─── Podium ────────────────────────────────────────────────────── */
.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0 2.5rem;
}

.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.podium-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.podium-place.first .podium-avatar {
    width: 68px;
    height: 68px;
    font-size: 1.8rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.podium-name {
    font-weight: 600;
    font-size: 0.9rem;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium-pts {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.podium-bar {
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.first .podium-bar  { background: linear-gradient(180deg, #fef3c7, #fde68a); height: 80px; }
.second .podium-bar { background: linear-gradient(180deg, #f1f5f9, #e2e8f0); height: 60px; }
.third .podium-bar  { background: linear-gradient(180deg, #fef3c7, #fed7aa); height: 48px; }

.podium-medal { font-size: 1.4rem; }

/* ─── Standings Table ───────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }

.standings-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    font-size: 0.92rem;
}

.standings-table th {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    padding: 0.85rem 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.standings-table th:first-child { text-align: center; border-radius: var(--radius-md) 0 0 0; }
.standings-table th:nth-child(2) { text-align: left; }
.standings-table th:last-child { border-radius: 0 var(--radius-md) 0 0; }

.standings-table td {
    padding: 0.75rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition);
}

.standings-table td:nth-child(2) { text-align: left; }

.standings-table tbody tr:hover { background: var(--color-bg); }
.standings-table tbody tr:last-child td { border-bottom: none; }

.standings-table tbody tr:nth-child(even) { background: var(--color-surface-2); }
.standings-table tbody tr:nth-child(even):hover { background: var(--color-bg); }

.standings-table .top-1 { background: linear-gradient(90deg, #fffbeb, #fef9e7) !important; }
.standings-table .top-2 { background: linear-gradient(90deg, #f8fafc, #f1f5f9) !important; }
.standings-table .top-3 { background: linear-gradient(90deg, #fffaf0, #fef3e2) !important; }

/* ── Liga: zonas de clasificación / eliminación en la tabla general ── */
.standings-table tbody tr.liga-row-clasifica,
.standings-table tbody tr.liga-row-clasifica:nth-child(even) {
    background: linear-gradient(90deg, rgba(34,197,94,.16), rgba(34,197,94,.06)) !important;
    box-shadow: inset 3px 0 0 #16a34a;
}
.standings-table tbody tr.liga-row-clasifica:hover { background: rgba(34,197,94,.24) !important; }
.standings-table tbody tr.liga-row-elimina,
.standings-table tbody tr.liga-row-elimina:nth-child(even) {
    background: linear-gradient(90deg, rgba(239,68,68,.14), rgba(239,68,68,.05)) !important;
    box-shadow: inset 3px 0 0 #dc2626;
}
.standings-table tbody tr.liga-row-elimina:hover { background: rgba(239,68,68,.22) !important; }
.standings-table tbody tr.liga-row-cut td { border-bottom: 2px dashed #dc2626 !important; }

.liga-zonas-legend { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.lz-chip {
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    padding: .22rem .6rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .35rem;
}
.lz-chip::before { content: ""; width: 9px; height: 9px; border-radius: 2px; }
.lz-clasifica { background: rgba(34,197,94,.14); color: #15803d; }
.lz-clasifica::before { background: #16a34a; }
.lz-elimina { background: rgba(239,68,68,.12); color: #b91c1c; }
.lz-elimina::before { background: #dc2626; }

.rank-cell { font-size: 1.1rem; text-align: center; }
.player-name { font-weight: 600; }
.wins { color: #2e7d32; font-weight: 600; }
.losses { color: #c62828; font-weight: 600; }
.positive { color: #2e7d32; font-weight: 600; }
.negative { color: #c62828; font-weight: 600; }
.total-pts { font-size: 1.05rem; }

/* ─── Rounds Accordion ──────────────────────────────────────────── */
.rounds-list { display: flex; flex-direction: column; gap: 0.75rem; }

.round-accordion {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.round-accordion[open] { box-shadow: var(--shadow-md); }

.round-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
    gap: 1rem;
    transition: background var(--transition);
}

.round-summary:hover { background: var(--color-bg); }
.round-summary::-webkit-details-marker { display: none; }

.round-info { display: flex; align-items: center; gap: 0.75rem; flex: 1; }

.round-number {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1rem;
    white-space: nowrap;
}

.round-name {
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.92;
}

.round-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.match-count {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.round-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.round-badge.completed { background: #e8f5e9; color: #2e7d32; }
.round-badge.partial   { background: #fff8e1; color: #f57f17; }

.accordion-icon {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}

details[open] .accordion-icon { transform: rotate(180deg); }

.round-content { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--color-border); }

/* ─── Match Cards (Public) ──────────────────────────────────────── */
.matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.match-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.match-card.completed { border-color: var(--color-accent); }

.match-court {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-players {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pair {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex: 1;
    min-width: 0;
}

.player-tag {
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.pair-separator {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 700;
}

.match-score-display {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.score {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-text);
    min-width: 2ch;
    text-align: center;
}

.score.winner { color: var(--color-primary); }

.score-sep {
    color: var(--color-text-muted);
    font-weight: 300;
}

.score-pending {
    font-size: 1rem;
    color: var(--color-text-muted);
    font-weight: 500;
    padding: 0 0.5rem;
}

.match-status {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    width: fit-content;
    margin: 0 auto;
}

.match-status.pending { background: #fff8e1; color: #f57f17; }
.match-status.done    { background: #e8f5e9; color: #2e7d32; }

/* ─── Buttons ───────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #154a1a, var(--color-primary));
    box-shadow: 0 4px 12px var(--color-shadow);
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-bg);
    border-color: var(--color-accent);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.btn-danger {
    background: #fee2e2;
    color: #c62828;
    border-color: #fecaca;
}

.btn-danger:hover {
    background: #fecaca;
    border-color: #f87171;
}

.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.82rem; }
.btn-lg { padding: 0.8rem 2rem; font-size: 1rem; }
.btn-full { width: 100%; }

.btn-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-family: var(--font);
    font-size: inherit;
    text-decoration: underline;
    padding: 0;
}

/* ─── Form Controls ─────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.form-control {
    padding: 0.65rem 0.9rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.95rem;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.2);
}

.form-control::placeholder { color: #9ca3af; }

select.form-control { appearance: none; cursor: pointer; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.form-actions { padding-top: 0.5rem; }

/* ─── Alerts / Flash messages ───────────────────────────────────── */
.alert {
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
    border-left: 4px solid;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.alert-success { background: #e8f5e9; color: #2e7d32; border-color: #4caf50; }
.alert-error   { background: #fee2e2; color: #c62828; border-color: #f44336; }
.alert-warning { background: #fff8e1; color: #e65100; border-color: #ff9800; }

/* ─── Empty State ───────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--color-border);
}

.empty-state.small {
    padding: 2rem 1.5rem;
}

.empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-state h3 { font-size: 1.2rem; color: var(--color-text); margin-bottom: 0.5rem; }
.empty-state p  { color: var(--color-text-muted); margin-bottom: 1.25rem; }

/* ─── Footer ────────────────────────────────────────────────────── */
.footer {
    background: var(--color-primary);
    color: rgba(255,255,255,0.7);
    padding: 2rem 0;
    margin-top: 4rem;
    font-size: 0.88rem;
}

.footer .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer a { color: rgba(255,255,255,0.85); transition: color var(--transition); }
.footer a:hover { color: white; }

/* ─── Floating Admin Button ─────────────────────────────────────── */
.fab-admin {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition);
    z-index: 999;
    opacity: 0.7;
}

.fab-admin svg { width: 20px; height: 20px; }
.fab-admin:hover { opacity: 1; transform: scale(1.1); }

/* ─── Modal ─────────────────────────────────────────────────────── */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(2px);
}

.modal-overlay.open { display: flex; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.25s ease;
}

.modal-lg { max-width: 640px; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

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

.modal-header h3 { font-size: 1.15rem; }
.modal-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--color-text-muted);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}
.modal-close:hover { background: var(--color-bg); color: var(--color-text); }

.modal-form { display: flex; flex-direction: column; }
.modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 0.5rem; }

/* Nuevo Torneo: en PC, ensanchar y aprovechar el ancho (en mobile queda full-width como está) */
@media (min-width: 641px) {
    #modal-nuevo-torneo .modal {
        max-width: min(1200px, 94vw);
        padding: 1.75rem 2.25rem;
    }
    /* selectores de 3 tarjetas en una sola fila → menos alto */
    #modal-nuevo-torneo .type-selector { grid-template-columns: repeat(3, 1fr); }
    /* campos en pares para usar el ancho */
    #modal-nuevo-torneo .form-row { grid-template-columns: 1fr 1fr; }
}

/* ─── Admin Layout ──────────────────────────────────────────────── */
.admin-body { background: #f0f4f0; }

.admin-layout {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 240px;
    background: linear-gradient(180deg, var(--color-primary) 0%, #0d3b10 100%);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
    z-index: 50;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-logo {
    font-size: 1.75rem;
    line-height: 1;
}

.sidebar-title { display: flex; flex-direction: column; }
.sidebar-app  { color: white; font-size: 0.9rem; font-weight: 700; }
.sidebar-role { color: rgba(255,255,255,0.5); font-size: 0.75rem; }

.sidebar-nav {
    flex: 1;
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition);
    text-decoration: none;
}

.sidebar-link svg { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar-link:hover { background: rgba(255,255,255,0.12); color: white; }
.sidebar-link.active { background: rgba(255,255,255,0.18); color: white; }
.sidebar-link.logout:hover { background: rgba(244, 67, 54, 0.2); color: #ef9a9a; }

.sidebar-footer {
    padding: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sidebar-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    padding: 0.5rem 0.75rem 0.15rem;
}
.sidebar-club-link {
    font-size: 0.82rem;
    opacity: 0.85;
}
.sidebar-club-link:hover { opacity: 1; }

/* ─── Admin Main ────────────────────────────────────────────────── */
.admin-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.admin-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: var(--shadow-sm);
}

.admin-header-inner {
    padding: 0 1.5rem;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-page-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
    flex: 1;
}

.admin-header-actions { display: flex; gap: 0.5rem; }

.admin-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid var(--color-border);
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.admin-back-btn:hover {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.admin-content { padding: 1.5rem; flex: 1; }

/* ─── Admin Sections ────────────────────────────────────────────── */
.admin-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.admin-section h3 {
    color: var(--color-primary);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.admin-section-header h2,
.admin-section-header h3 {
    border: none;
    padding: 0;
    margin: 0;
}

/* ─── Stats Grid ────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.stat-icon { font-size: 2rem; line-height: 1; }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--color-primary); }
.stat-label { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 500; }

/* ─── Admin Tournament Cards ────────────────────────────────────── */
.admin-tournaments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.admin-tournament-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.admin-tournament-card:hover { box-shadow: var(--shadow-md); }
.admin-tournament-card.finished-card { opacity: 0.8; }

.atc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.atc-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.atc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
}

.active-badge   { background: #e8f5e9; color: #2e7d32; }
.finished-badge-sm { background: #f5f5f5; color: #757575; }

.atc-name { font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
.atc-location { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.75rem; }

.atc-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.atc-date { font-size: 0.78rem; color: var(--color-text-muted); }

/* ─── Tabs ──────────────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: 0.25rem;
    background: var(--color-surface);
    padding: 0.4rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.tab-btn {
    padding: 0.6rem 1.1rem;
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.tab-btn:hover { background: var(--color-bg); color: var(--color-text); }
.tab-btn.active { background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: white; box-shadow: var(--shadow-sm); }

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.2s ease; }

/* ─── Players Grid ──────────────────────────────────────────────── */
.players-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.player-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.35rem 0.5rem 0.35rem 0.4rem;
    transition: all var(--transition);
}

.player-chip:hover { border-color: var(--color-accent); }

.player-avatar {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: white;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    box-sizing: border-box;
    padding: 0;
    flex-shrink: 0;
}

.player-chip-name { font-size: 0.88rem; font-weight: 500; }

.player-remove {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.player-remove:hover { background: #fee2e2; color: #c62828; }

.player-count-info { margin-top: 1rem; }

.info-box {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}

.warning-text { color: #e65100; font-weight: 500; }

/* ─── Admin Matches ─────────────────────────────────────────────── */
.rounds-admin-list { display: flex; flex-direction: column; gap: 0.75rem; }
.admin-accordion .round-summary { background: var(--color-bg); }

/* ── Ojito de visibilidad de fecha/ronda (liga + largo) ───────────────────── */
.round-vis-form { display: inline-flex; margin: 0; }
.round-vis-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem; border-radius: 999px; cursor: pointer;
    font-size: .72rem; font-weight: 700; line-height: 1;
    border: 1px solid transparent; letter-spacing: .02em;
}
.round-vis-btn svg { flex: none; }
.round-vis-btn.on  { background: rgba(34,197,94,.15);  color: #22c55e; border-color: rgba(34,197,94,.4); }
.round-vis-btn.off { background: rgba(148,163,184,.15); color: #94a3b8; border-color: rgba(148,163,184,.4); }
.round-vis-btn.on:hover  { background: rgba(34,197,94,.28); }
.round-vis-btn.off:hover { background: rgba(148,163,184,.28); }
.round-vis-label { white-space: nowrap; }
@media (max-width: 560px) { .round-vis-label { display: none; } }

/* Fecha/ronda oculta al público: se ve atenuada en el admin. */
.round-accordion.round-hidden,
.admin-subsection.round-hidden { opacity: .62; }
.round-accordion.round-hidden > .round-summary { border-left: 3px solid #94a3b8; }

/* Botones rápidos "Mostrar todo / Solo la Fecha 1". */
.rounds-vis-bulk {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-bottom: .9rem; padding: .55rem .7rem;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 8px;
}
.rounds-vis-bulk .rvb-hint { font-size: .8rem; font-weight: 700; opacity: .85; margin-right: .15rem; }

.round-actions-bar {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.matches-admin-list { display: flex; flex-direction: column; gap: 0.75rem; }

.match-admin-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.mac-court {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    min-width: 80px;
}

.mac-players {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    flex-wrap: wrap;
}

.mac-pair {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    font-weight: 500;
}

.mac-pair .plus { color: var(--color-text-muted); font-size: 0.8rem; }

.mac-score-area { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; }

/* Aviso de suma incorrecta en el americano (puntos por partido). Marca en rojo
   los partidos ya cargados cuya suma no coincide con americano_points. */
.match-admin-card.suma-mal {
    border-color: #e0403a;
    box-shadow: inset 0 0 0 1px #e0403a;
    background: rgba(224, 64, 58, 0.07);
}
.suma-warn {
    flex-basis: 100%;
    text-align: center;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ff6b63;
    background: rgba(224, 64, 58, 0.13);
    border-radius: 6px;
    padding: 0.22rem 0.45rem;
}
/* Alerta (solo admin) de resultado por sets mal cargado — mejor de 3. Solo avisa. */
.set-alert {
    width: 100%;
    text-align: center;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
    background: #d13b34;
    border: 1px solid #ff6b63;
    border-radius: 6px;
    padding: 0.28rem 0.5rem;
    box-shadow: 0 0 0 2px rgba(224,64,58,0.25);
}

.score-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.score-input {
    width: 58px;
    padding: 0.4rem 0.5rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-primary);
    transition: border-color var(--transition);
    /* Sin flechitas nativas: con números de 2+ dígitos (ej. 24) el spinner del
       navegador tapaba el valor centrado. El score se teclea (en mobile el
       spinner ni aparecía). Solo aplica al americano — los sets usan .set-input. */
    -moz-appearance: textfield;
    appearance: textfield;
}

.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.score-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.mac-actions { margin-left: auto; }

/* ─── Match Setup (Admin modal) ─────────────────────────────────── */
.match-setup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.vs-divider {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-text-muted);
    text-align: center;
}

/* ─── Config / Settings Page ────────────────────────────────────── */
.config-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.config-form-panel { }
.config-preview-panel { position: sticky; top: 80px; }

.preview-title {
    color: var(--color-text);
    margin-bottom: 1rem;
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.preview-box {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    background: var(--color-bg);
}

.preview-navbar {
    background: var(--color-surface);
    padding: 0.65rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--color-border);
}

.preview-brand { font-size: 0.85rem; color: var(--color-primary); }
.preview-nav-links { display: flex; gap: 0.5rem; }
.preview-link { font-size: 0.75rem; color: var(--color-text-muted); padding: 0.2rem 0.5rem; border-radius: 4px; }
.preview-link.active { background: var(--color-bg); color: var(--color-primary); }

.preview-hero {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    padding: 1.5rem 1rem;
    text-align: center;
}

.preview-hero h2 { color: white; font-size: 1.1rem; margin-bottom: 0.25rem; }
.preview-hero p  { color: rgba(255,255,255,0.8); font-size: 0.78rem; }

.preview-body {
    padding: 0.75rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.preview-card {
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    padding: 0.6rem;
    border: 1px solid var(--color-border);
}

.preview-card-badge { font-size: 0.65rem; margin-bottom: 0.25rem; }
.preview-card-title { font-size: 0.78rem; font-weight: 700; margin-bottom: 0.15rem; }
.preview-card-meta { font-size: 0.65rem; color: var(--color-text-muted); }

.preview-table {
    margin: 0 0.75rem 0.75rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.preview-row {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    padding: 0.4rem 0.6rem;
    font-size: 0.72rem;
    gap: 0.5rem;
    align-items: center;
}

.preview-row.header {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    font-weight: 600;
}

.preview-row.gold   { background: #fffbeb; }
.preview-row.silver { background: #f8fafc; }
.preview-row.bronze { background: #fffaf0; }

/* ─── Color Pickers ─────────────────────────────────────────────── */
.color-pickers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.color-picker-item label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    display: block;
    margin-bottom: 0.4rem;
}

.color-picker-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

input[type="color"] {
    width: 44px;
    height: 42px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 3px;
    cursor: pointer;
    background: white;
    flex-shrink: 0;
}

.color-text {
    flex: 1;
    font-family: monospace;
    font-size: 0.88rem;
}

/* ─── Status info ───────────────────────────────────────────────── */
.status-info { margin-bottom: 1rem; }
.badge-status { padding: 0.2rem 0.75rem; border-radius: 999px; font-weight: 600; font-size: 0.85rem; display: inline-flex; }
.badge-status.active   { background: #e8f5e9; color: #2e7d32; }
.badge-status.finished { background: #f5f5f5; color: #757575; }

/* ─── Login Page ────────────────────────────────────────────────── */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 60%, var(--color-bg) 100%);
}

.login-container { width: 100%; max-width: 400px; padding: 1.25rem; }

.login-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.login-header h1 { font-size: 1.75rem; color: var(--color-primary); margin-bottom: 0.25rem; }
.login-header p  { color: var(--color-text-muted); font-size: 0.9rem; }

.login-form { display: flex; flex-direction: column; gap: 0.5rem; }
.login-back { text-align: center; margin-top: 1.5rem; font-size: 0.85rem; }
.login-back a { color: var(--color-text-muted); }
.login-back a:hover { color: var(--color-primary); }

/* ─── Sidebar overlay (mobile) ──────────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 150;
}
.sidebar-overlay.open { display: block; }

/* ─── Sidebar toggle ────────────────────────────────────────────── */
.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--color-text);
    flex-shrink: 0;
}

/* ─── Responsive ─────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 900px) {
    .config-layout { grid-template-columns: 1fr; }
    .config-preview-panel { position: static; }

    .admin-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        height: 100dvh;
        transition: left 0.28s cubic-bezier(.4,0,.2,1);
        z-index: 200;
        box-shadow: none;
    }
    .admin-sidebar.open {
        left: 0;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    }
    .sidebar-toggle { display: flex; }
    .admin-main { margin-left: 0 !important; }
}

/* ── Hamburger button (hidden on desktop) ── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    flex-shrink: 0;
}
.nav-hamburger:hover { background: var(--color-bg); }
.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: all 0.25s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile dropdown menu ── */
.nav-mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem 0.75rem;
    gap: 0.25rem;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-link {
    display: block;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-text-muted);
    transition: all var(--transition);
}
.nav-mobile-link:hover, .nav-mobile-link.active {
    background: var(--color-bg);
    color: var(--color-primary);
}
.nav-mobile-admin {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.9rem;
    margin-top: 0.25rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--color-primary);
    color: #fff !important;
}

/* Mobile */
@media (max-width: 640px) {

    /* ── Navbar pública ── */
    .navbar-inner { padding: 0 0.75rem; }
    .navbar-brand span { font-size: 0.95rem; }
    .navbar-links { display: none; }
    .nav-hamburger { display: flex; }
    .nav-left { gap: 0.4rem; }
    .nav-back-main { padding: 5px 7px; font-size: 0.72rem; }
    .nav-back-main .back-label { display: none; }

    /* ── Hero ── */
    .hero { padding: 2.5rem 1rem; }
    .hero-title { font-size: 1.8rem; }
    .hero-subtitle { font-size: 0.9rem; }

    /* ── Tournament grid ── */
    .tournaments-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .admin-tournaments-grid { grid-template-columns: 1fr; gap: 0.75rem; }

    /* ── Standings table: scroll horizontal ── */
    .standings-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .standings-table { min-width: 520px; font-size: 0.82rem; }
    .standings-table th, .standings-table td { padding: 0.5rem 0.5rem; }

    /* ── Podium ── */
    .podium { gap: 0.4rem; }
    .podium-avatar { width: 42px; height: 42px; font-size: 1rem; }
    .first .podium-avatar { width: 52px; height: 52px; }
    .podium-name { font-size: 0.78rem; }
    .podium-pts { font-size: 0.72rem; }

    /* ── Public match cards ── */
    .matches-grid { grid-template-columns: 1fr; gap: 0.5rem; }

    /* ── Admin header ── */
    .admin-header-inner { padding: 0 0.75rem; gap: 0.5rem; min-width: 0; }
    .admin-page-title { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* En mobile la barra de acciones de torneo (badges + botones) puede ser más
       ancha que el viewport: que scrollee dentro del header en vez de desbordar
       el documento entero (evita el zoom-out / scroll horizontal de toda la página). */
    .admin-header-actions { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .admin-header-actions::-webkit-scrollbar { display: none; }
    .admin-header-actions > * { flex-shrink: 0; }
    .admin-content { padding: 0.75rem; }
    .admin-back-btn { padding: 5px 7px; font-size: 0.72rem; }
    .admin-back-btn .admin-back-label { display: none; }
    /* Cards de parejas (fase de zonas): el grid item se estiraba a su min-content
       (~438px) y desbordaba en mobile; min-width:0 lo limita a la columna. */
    .pair-admin-card { min-width: 0; }
    .pair-admin-card select { max-width: 100%; }
    /* Tablas del manual: scroll horizontal propio en vez de desbordar la página. */
    .manual-body table { display: block; width: 100%; overflow-x: auto; }

    /* ── Stats grid ── */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .stat-card { padding: 0.75rem; }
    .stat-value { font-size: 1.6rem; }

    /* ── Tabs ── */
    .tabs {
        display: flex;
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0;
        border-radius: 12px 12px 0 0;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
        flex: 1;
        min-width: 90px;
        text-align: center;
        font-size: 0.78rem;
        padding: 0.6rem 0.4rem;
        white-space: nowrap;
    }

    /* ── Players grid ── */
    .players-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .player-chip { padding: 0.5rem 0.6rem; gap: 0.4rem; }
    .player-avatar { width: 30px; height: 30px; font-size: 0.85rem; }
    .player-chip-name { font-size: 0.85rem; }

    /* ── Match admin cards ── */
    .match-admin-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 0.85rem;
    }
    .mac-court {
        font-size: 0.72rem;
        padding: 0.2rem 0.6rem;
        align-self: flex-start;
    }
    .mac-players {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    .mac-pair {
        justify-content: center;
        font-size: 0.9rem;
        font-weight: 600;
        gap: 0.3rem;
    }
    .mac-score-area {
        justify-content: center;
    }
    .score-form {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        justify-content: center;
        width: 100%;
    }
    .score-input {
        width: 58px !important;
        height: 44px;
        font-size: 1.1rem;
        text-align: center;
        border-radius: 10px;
    }
    .score-sep { font-size: 1.2rem; font-weight: 700; }
    .mac-actions { align-self: flex-end; }

    /* ── Round accordion ── */
    .round-summary { padding: 0.75rem; }
    .round-number { font-size: 0.85rem; }
    .round-content { padding: 0.75rem; }
    .round-actions-bar { margin-bottom: 0.75rem; }

    /* ── Admin section ── */
    .admin-section { padding: 1rem; margin-bottom: 0.75rem; }
    .admin-section-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .btn-group { width: 100%; }
    .btn-group .btn, .btn-group form { width: 100%; }
    .btn-group .btn { width: 100%; justify-content: center; }

    /* ── Config form ── */
    .form-grid { grid-template-columns: 1fr; }
    .config-form .btn { width: 100%; }

    /* ── Modals ── */
    .modal-overlay { align-items: flex-end; }
    .modal {
        border-radius: 20px 20px 0 0;
        max-height: 90dvh;
        overflow-y: auto;
        width: 100%;
        max-width: 100%;
        animation: slideUp 0.25s ease;
    }
    .modal-lg { max-height: 95dvh; }
    .match-setup { grid-template-columns: 1fr; gap: 0.75rem; }
    .vs-divider { display: none; }

    /* ── Dashboard tournament cards ── */
    .at-card { padding: 1rem; }
    .at-card-actions { flex-direction: column; gap: 0.5rem; }
    .at-card-actions .btn { width: 100%; justify-content: center; text-align: center; }

    /* ── Login ── */
    .login-card { padding: 1.5rem 1.25rem; }

    /* ── Color pickers ── */
    .color-pickers-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
    .players-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .color-pickers-grid { grid-template-columns: 1fr; }
    .tab-btn { font-size: 0.72rem; padding: 0.5rem 0.3rem; min-width: 75px; }
    .hero-title { font-size: 1.5rem; }
}

@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   NUEVAS SECCIONES — Clásico, Rankings, Sponsors, Categorías
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Hero Variants ─────────────────────────────────────────────── */
.hero-home { min-height: 320px; }
.hero-sm { padding: 2.5rem 1.25rem; min-height: 180px; }
.hero-clasico { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%); }
.hero-rankings { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%); }

.hero-badge { display: inline-block; padding: 0.3rem 0.85rem; border-radius: 20px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    background: rgba(255,255,255,0.18); color: #fff; margin-bottom: 0.75rem; }
.americano-badge-light { background: rgba(255,255,255,0.2); }
.clasico-badge-light { background: rgba(255,255,255,0.2); }
.liga-badge-light { background: rgba(255,255,255,0.2); }

.hero-meta-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.5rem; }
.active-badge-pill { background: rgba(76,175,80,0.35); color: #fff; display: flex; align-items: center; gap: 0.3rem; }
.finished-badge-pill { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
.cat-badge-masculino { background: rgba(33,150,243,0.3); }
.cat-badge-femenino { background: rgba(233,30,99,0.3); }

.hero-breadcrumb { display: flex; align-items: center; gap: 0.4rem; color: rgba(255,255,255,0.7);
    font-size: 0.85rem; margin-bottom: 0.5rem; }
.hero-breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: underline; }
.hero-breadcrumb span { color: rgba(255,255,255,0.5); }

/* Hero action buttons */
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.hero-btn { display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.6rem 1.2rem; border-radius: var(--radius-md); font-weight: 600;
    font-size: 0.9rem; transition: var(--transition); cursor: pointer; }
.hero-btn-primary { background: #fff; color: var(--color-primary); }
.hero-btn-primary:hover { background: var(--color-accent); color: var(--color-primary); transform: translateY(-1px); }
.hero-btn-secondary { background: rgba(255,255,255,0.15); color: #fff; border: 1.5px solid rgba(255,255,255,0.35); }
.hero-btn-secondary:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); }
.hero-btn-ghost { background: transparent; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.25); }
.hero-btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ─── Home Tabs ──────────────────────────────────────────────────── */
.home-tabs-section { margin: 2rem 0; }
.home-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--color-border); }
.home-tab { background: none; border: none; padding: 0.7rem 1.1rem; font-size: 0.95rem;
    font-family: var(--font); font-weight: 600; color: var(--color-text-muted);
    cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -2px;
    transition: var(--transition); display: flex; align-items: center; gap: 0.4rem; }
.home-tab:hover { color: var(--color-primary); }
.home-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-badge { background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 20px; padding: 0.1rem 0.5rem; font-size: 0.75rem; font-weight: 700; }
.home-tab.active .tab-badge { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.home-tab-content { display: none; }
.home-tab-content.active { display: block; }

/* ─── Tournament Type & Category Badges ─────────────────────────── */
.card-type-badge { position: absolute; top: 0.85rem; right: 2.5rem;
    font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.55rem;
    border-radius: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.americano-badge { background: #e8f5e9; color: #1b5e20; }
.clasico-badge { background: #e3f2fd; color: #0d47a1; }
.card-category { position: absolute; top: 0.5rem; left: 0.85rem;
    font-size: 0.7rem; font-weight: 600; color: var(--color-text-muted);
    background: var(--color-bg); border-radius: 6px; padding: 0.15rem 0.5rem; }

/* Admin type badges */
.badge-type { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 8px;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-type.americano { background: #e8f5e9; color: #1b5e20; }
.badge-type.clasico { background: #e3f2fd; color: #0d47a1; }
.badge-type.flash { background: #fff3cd; color: #92400e; }

.atc-type-row { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
.atc-type-badge { font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem;
    border-radius: 6px; text-transform: uppercase; }
.atc-type-badge.americano { background: #e8f5e9; color: #1b5e20; }
.atc-type-badge.clasico { background: #e3f2fd; color: #0d47a1; }
.atc-type-badge.flash { background: #fff3cd; color: #92400e; }
.flash-badge-light { background: rgba(245,158,11,0.2); color: #fff; }
.atc-cat-badge { font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem;
    border-radius: 6px; background: #fce4ec; color: #880e4f; }

/* ─── Type Selector in Modal ─────────────────────────────────────── */
.type-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.type-option { cursor: pointer; }
.type-option input { display: none; }
.type-card { display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    padding: 1rem; border-radius: var(--radius-md); border: 2px solid var(--color-border);
    background: var(--color-surface); text-align: center; transition: var(--transition); cursor: pointer; }
.type-card:hover { border-color: var(--color-accent); }
.type-option input:checked + .type-card { border-color: var(--color-primary); background: var(--color-surface-2); }
.type-icon { font-size: 1.6rem; }
.type-label { font-weight: 700; font-size: 0.95rem; color: var(--color-text); }
.type-desc { font-size: 0.78rem; color: var(--color-text-muted); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modal-lg { max-width: 560px; }

/* ─── Pairs UI ───────────────────────────────────────────────────── */
.pairs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.pair-admin-card { display: flex; align-items: center; gap: 0.75rem;
    background: var(--color-surface); border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md); padding: 0.75rem 1rem;
    transition: var(--transition); }
.pair-admin-card:hover { border-color: var(--color-accent); }
.pair-avatars { display: flex; gap: -6px; }
.pair-avatars .player-avatar { margin-right: -6px; border: 2px solid var(--color-surface); }
.pair-info { flex: 1; min-width: 0; }
.pair-names-main { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pair-seed { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 2px; }
.level-badge { display:inline-block; padding:1px 6px; border-radius:10px; background:var(--color-accent); color:#fff; font-size:.7rem; font-weight:600; vertical-align:middle; }

/* Reemplazos de jugador (lesión/baja) — ficha de pareja, campeón, botón admin */
.pair-admin-actions { display:flex; align-items:center; gap:.35rem; }
.btn-icon { background:none; border:1px solid var(--color-border); border-radius:8px;
    cursor:pointer; font-size:1rem; line-height:1; padding:.3rem .45rem; transition:var(--transition); }
.btn-icon:hover { border-color:var(--color-accent); background:rgba(56,189,248,0.08); }
.pair-subs { margin-top:4px; display:flex; flex-direction:column; gap:2px; }
.pair-sub-line { font-size:.72rem; color:var(--color-text-muted); white-space:normal; line-height:1.25; }
.pair-sub-line b { color:var(--color-text-soft); font-weight:600; }
.pair-sub-ico { margin-right:2px; }
.champ-sub { font-size:.82em; font-weight:500; opacity:.85; }

/* Score block — 3 sets layout */
.score-block { display:flex; flex-direction:column; align-items:center; gap:.35rem; min-width:120px; }
.score-form-sets { display:flex; flex-direction:column; gap:.25rem; align-items:center; }
.sets-row { display:flex; align-items:center; gap:.25rem; }
.set-input { width:36px; height:30px; text-align:center; border:1px solid var(--color-border); border-radius:5px; font-size:.85rem; padding:0 .25rem; }
.set-sep { font-weight:600; color:#888; }
.wo-actions { display:flex; gap:.25rem; margin-top:.15rem; }
.btn-xs { padding:.15rem .4rem; font-size:.7rem; }
.walkover-badge { background:#fee2e2; color:#b91c1c; padding:.3rem .65rem; border-radius:6px; font-weight:700; font-size:.78rem; letter-spacing:.04em; }

/* Compact view in match displays */
.match-sets-display { display:flex; gap:.4rem; font-family: 'Courier New', monospace; font-weight:700; color:#1e293b; }
.match-sets-display .set { background:#f1f5f9; padding:.1rem .35rem; border-radius:4px; font-size:.85rem; }
.match-sets-display .set.lost { color:#888; }

/* TriXPadel branding accents */
.nav-trix-icon { width:22px; height:22px; border-radius:6px; object-fit:contain; background:#000; margin-right:.25rem; flex-shrink:0; }
.sidebar-trix-logo { width:44px; height:44px; border-radius:10px; object-fit:cover; background:#000; flex-shrink:0; }
.footer-trix-brand { display:flex; align-items:center; gap:.75rem; justify-content:center; }
.footer-trix-logo { width:36px; height:36px; border-radius:8px; object-fit:contain; background:#000; flex-shrink:0; }
.header-trix-logo { width:32px; height:32px; border-radius:7px; object-fit:contain; background:#000; flex-shrink:0; margin-left:.5rem; }

/* Foto de jugador con badge de categoría superpuesto */
.player-photo-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.player-photo-wrap .player-avatar-lg {
    display: block;
}
.player-photo-wrap .player-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.cat-badge-overlay {
    position: absolute;
    bottom: -2px;
    right: -2px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    line-height: 1;
}
.pair-name-label { font-weight: 600; }

/* Pair cell in public table */
.pair-cell { display: flex; align-items: center; gap: 0.6rem; }
.player-avatar.sm { width: 26px; height: 26px; font-size: 0.7rem; }

/* Cuando el avatar es una <img> (foto real), no aplicar gradient */
img.player-avatar,
img.player-avatar.sm,
img.player-avatar.photo {
    background: var(--color-bg-2, #181c16);
    object-fit: cover;
    border: 1px solid var(--color-border, #2b2f25);
}
.pair-names { display: flex; align-items: center; gap: 0.3rem; font-size: 0.88rem; flex-wrap: wrap; }
.pair-sep { color: var(--color-text-muted); font-weight: 300; }

/* Pareja apilada: cada integrante con su avatar y nombre en su propia línea */
.pair-cell-stacked { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.pair-member { display: flex; align-items: center; gap: 0.45rem; }
.pair-member .player-avatar.sm { flex-shrink: 0; }
.pair-member-name { font-size: 0.88rem; line-height: 1.15; }

/* ─── Rankings ───────────────────────────────────────────────────── */
.rankings-filter-bar { margin: 1.5rem 0; }
.rankings-form { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.filter-group { display: flex; flex-direction: column; gap: 0.35rem; }
.filter-group label { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); }
.filter-select { min-width: 160px; }

.rankings-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border); margin-bottom: 2rem; }
.rankings-table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.rankings-table th { background: var(--color-primary); color: #fff;
    padding: 0.75rem 1rem; text-align: left; font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.rankings-table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--color-border);
    font-size: 0.88rem; vertical-align: middle; }
.rankings-table tr:last-child td { border-bottom: none; }
.rankings-table tr.rank-gold td { background: #fffde7; }
.rankings-table tr.rank-silver td { background: #f8f9fa; }
.rankings-table tr.rank-bronze td { background: #fff8f5; }
.rankings-table tr:hover td { background: var(--color-surface-2); }
.rank-col { width: 50px; text-align: center; }
.num-col { text-align: center; width: 60px; }
.highlight-col { font-weight: 700; color: var(--color-primary); }
.rank-num { display: inline-block; width: 24px; height: 24px; border-radius: 50%;
    background: var(--color-border); color: var(--color-text-muted); text-align: center;
    line-height: 24px; font-size: 0.78rem; font-weight: 700; }
.cat-col { width: 120px; }
.player-name-cell { font-weight: 600; }

/* Category chips */
.cat-chip { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 20px;
    font-size: 0.75rem; font-weight: 700; }
.cat-chip.masculino { background: #e3f2fd; color: #0d47a1; }
.cat-chip.femenino { background: #fce4ec; color: #880e4f; }

.category-chips-section { margin: 2rem 0; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.category-chips-title { font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; }
.category-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cat-chip-link { padding: 0.35rem 0.85rem; border-radius: 20px; font-size: 0.82rem;
    font-weight: 600; border: 1.5px solid transparent; transition: var(--transition); }
.cat-chip-link.masculino { background: #e3f2fd; color: #0d47a1; border-color: #bbdefb; }
.cat-chip-link.masculino:hover, .cat-chip-link.masculino.active { background: #0d47a1; color: #fff; }
.cat-chip-link.femenino { background: #fce4ec; color: #880e4f; border-color: #f8bbd9; }
.cat-chip-link.femenino:hover, .cat-chip-link.femenino.active { background: #880e4f; color: #fff; }

/* ─── Sponsors ───────────────────────────────────────────────────── */
.sponsors-section { background: linear-gradient(180deg, var(--color-surface) 0%, rgba(0,0,0,0.15) 100%);
    border-top: 2px solid var(--color-accent); padding: 2.5rem 1.25rem 2rem; margin-top: 3rem; }
.sponsors-label { text-align: center; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-text-muted);
    margin-bottom: 0.5rem; }
/* Lead sponsor (Nucia) — destacado, primero */
.lead-sponsor { display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; }
.lead-sponsor-badge {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.22em; color: var(--color-accent); margin-bottom: 0.9rem;
    padding: 0.3rem 1rem; border-radius: 999px;
    background: rgba(var(--color-accent-rgb, 255,193,7), 0.12);
    border: 1.5px solid rgba(var(--color-accent-rgb, 255,193,7), 0.4);
}
.lead-sponsor-card {
    display: flex; align-items: center; justify-content: center;
    padding: 1.6rem 3rem; border-radius: 22px; background: #fff;
    border: 3px solid var(--color-accent);
    box-shadow: 0 10px 40px rgba(0,0,0,0.22), 0 0 0 6px rgba(var(--color-accent-rgb, 255,193,7), 0.14);
    transition: var(--transition);
    max-width: 90%;
}
.lead-sponsor-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 16px 50px rgba(0,0,0,0.28), 0 0 0 8px rgba(var(--color-accent-rgb, 255,193,7), 0.2);
}
.lead-sponsor-logo {
    height: 182px; width: auto; max-width: 494px;
    object-fit: contain; display: block;
}

/* Main sponsor */
.main-sponsor { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.5rem; }
.main-sponsors-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.main-sponsor-badge { font-size: 0.65rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.2em; color: var(--color-accent); margin-bottom: 0.75rem; }
.main-sponsor-card { display: flex; align-items: center; justify-content: center;
    padding: 1rem 2.5rem; border-radius: var(--radius-lg, 16px);
    background: #fff; border: 2.5px solid var(--color-accent);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 0 4px rgba(var(--color-accent-rgb, 255,193,7), 0.1);
    transition: var(--transition); cursor: default; }
.main-sponsor-card:hover { transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(0,0,0,0.2), 0 0 0 6px rgba(var(--color-accent-rgb, 255,193,7), 0.15); }
.main-sponsor-logo { height: 125px; width: auto; max-width: 442px; object-fit: contain; display: block; }
/* Regular sponsors */
.sponsors-grid { display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 1rem; max-width: 900px; margin: 0 auto; }
.sponsor-card { display: flex; align-items: center; justify-content: center;
    padding: 0.5rem 0.9rem; border-radius: var(--radius-md);
    background: #fff; border: 1.5px solid var(--color-border);
    transition: var(--transition); min-width: 150px; cursor: default;
    box-shadow: var(--shadow-sm); }
.sponsor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-accent); }
.sponsor-card-featured { border-color: #c0392b; border-width: 2px; order: -1; }
.sponsor-card-featured:hover { border-color: #c0392b; }
.sponsor-logo { height: 83px; width: auto; max-width: 312px; object-fit: contain; display: block; }
.sponsor-logo.adidas-logo { height: 62px; }
.sponsor-logo.wilson-logo { height: 83px; width: 83px; object-fit: contain; }

/* ─── Footer links ───────────────────────────────────────────────── */
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: rgba(255,255,255,0.7); font-size: 0.85rem; transition: var(--transition); }
.footer-links a:hover { color: #fff; }

/* ─── Positive/negative diff ─────────────────────────────────────── */
.positive { color: #2e7d32; }
.negative { color: #c62828; }

/* ─── Accordion (public torneo) ─────────────────────────────────── */
.accordion { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.accordion-item { background: var(--color-surface); border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md); overflow: hidden; }
.accordion-btn { width: 100%; display: flex; align-items: center; gap: 0.75rem;
    padding: 0.9rem 1.1rem; background: none; border: none; cursor: pointer;
    font-family: var(--font); font-size: 0.95rem; font-weight: 600; text-align: left;
    color: var(--color-text); }
.acc-title { flex: 1; color: var(--color-text); font-weight: 700; }
.accordion-item:not(.open) .accordion-content { display: none; }
.accordion-item.open .accordion-content { display: block; }
.accordion-item.open .acc-arrow { transform: rotate(180deg); }
.acc-title { flex: 1; }
.acc-meta { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 400; }
.acc-arrow { font-size: 0.7rem; color: var(--color-text-muted); transition: transform 0.2s; }
.accordion-content { padding: 0 1rem 1rem; border-top: 1px solid var(--color-border); }
.matches-list { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 0.75rem; }
.match-row { background: var(--color-bg); border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem; }
.match-court { font-size: 0.72rem; color: var(--color-text-muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; display: block; }
.match-teams { display: flex; align-items: center; gap: 0.5rem; }
.match-team { flex: 1; font-size: 0.85rem; font-weight: 500; }
.match-team.right { text-align: right; }
.match-pair-names { font-size: 0.82rem; }
.match-score { display: flex; align-items: center; gap: 0.3rem; font-size: 1.1rem;
    font-weight: 700; min-width: 70px; justify-content: center; }
.score-win { color: var(--color-primary); }
.score-lose { color: var(--color-text-muted); }
.score-sep { color: var(--color-text-muted); font-weight: 300; }
.score-pending { color: var(--color-text-muted); font-size: 0.85rem; font-style: italic; }
.finished-mark {
    font-family: var(--font-condensed);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-trx);
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--accent-trx-dim);
    border-radius: 2px;
    font-weight: 400;
}
.match-row.played { border-left: 3px solid var(--color-accent); }
.match-team.winner .match-pair-names { font-weight: 700; color: var(--color-primary); }
.no-matches { padding: 0.75rem 0; color: var(--color-text-muted); font-size: 0.85rem; }

/* ─── Table wrap ─────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); border: 1px solid var(--color-border); margin-bottom: 2rem; }

/* ─── Admin responsive additions ────────────────────────────────── */
@media (max-width: 640px) {
    .type-selector { grid-template-columns: 1fr 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .sponsors-grid { gap: 0.5rem; }
    .sponsor-card { min-width: 110px; padding: 0.4rem 0.7rem; }
    .sponsor-logo { height: 68px; max-width: 260px; }
    .main-sponsor-logo { height: 99px; }
    .main-sponsor-card { padding: 0.75rem 1.5rem; }
    .lead-sponsor-logo { height: 124px; max-width: 85vw; }
    .lead-sponsor-card { padding: 1rem 1.5rem; }
    .lead-sponsor-badge { font-size: 0.65rem; letter-spacing: 0.18em; }
    .hero-actions { flex-direction: column; align-items: flex-start; }
    .hero-btn { width: 100%; justify-content: center; }
    .home-tabs { gap: 0; }
    .home-tab { font-size: 0.82rem; padding: 0.6rem 0.7rem; }
    .rankings-form { flex-direction: column; align-items: flex-start; }
    .filter-select { width: 100%; }
    .pairs-grid { grid-template-columns: 1fr; }
}

/* ─── Danger Zone ────────────────────────────────────────────────── */
.danger-zone { border: 1.5px solid rgba(239,68,68,0.35); background: rgba(239,68,68,0.06); }
.danger-zone h3 { color: #f87171; }
.danger-desc { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.btn-danger-outline { background: transparent; color: #b91c1c;
    border: 1.5px solid #b91c1c; padding: 0.5rem 1.1rem;
    border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 600;
    cursor: pointer; font-family: var(--font); transition: var(--transition); }
.btn-danger-outline:hover { background: #b91c1c; color: #fff; }

/* ─── Mundial Format ─────────────────────────────────────────────── */

/* Badge */
.badge-type.mundial, .atc-type-badge.mundial {
    background: #b45309; color: #fff;
}
.hero-badge.mundial-badge-light {
    background: rgba(180,83,9,0.25); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3);
}

/* Group section */
.group-section { margin-bottom: 2rem; }
.group-title {
    font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem;
    padding: 0.5rem 1rem; background: var(--color-primary); color: #fff;
    border-radius: var(--radius-sm);
}
.group-public-section { margin-bottom: 2.5rem; }

/* Advance row highlight */
.advance-row { background: rgba(34,197,94,0.08); }
.advance-row td:first-child { border-left: 3px solid var(--color-primary); }

/* Compact standings table for groups */
.standings-table-sm th, .standings-table-sm td { padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.standings-table-compact th, .standings-table-compact td { padding: 0.4rem 0.6rem; font-size: 0.88rem; }

/* Inline group form on pair cards */
.inline-group-form { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
.group-label { font-size: 0.78rem; color: #666; white-space: nowrap; }
.form-control-xs {
    padding: 0.15rem 0.4rem; font-size: 0.8rem; width: auto; min-width: 60px;
    border: 1px solid #ddd; border-radius: 4px;
}
.pair-group-row { margin-top: 0.25rem; }

/* Public tabs for mundial */
.public-tabs {
    display: flex; gap: 0.5rem; margin-bottom: 2rem; margin-top: 1.5rem;
    border-bottom: 2px solid #e5e7eb; padding-bottom: 0;
}
.pub-tab-btn {
    padding: 0.7rem 1.5rem; font-size: 0.95rem; font-weight: 600;
    background: none; border: none; border-bottom: 3px solid transparent;
    cursor: pointer; color: #666; transition: var(--transition); font-family: var(--font);
    margin-bottom: -2px;
}
.pub-tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.pub-tab-btn:hover { color: var(--color-primary); }
.pub-tab-content { display: none; }
.pub-tab-content.active { display: block; }

/* Elimination bracket */
.elimination-bracket { }
.elim-round-section { margin-bottom: 2rem; }
.elim-matches {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.elim-match-card {
    border: 1px solid #e5e7eb; border-radius: var(--radius-sm);
    overflow: hidden; background: #fff;
}
.elim-match-card.played { border-color: var(--color-primary); }
.elim-match-team {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6;
}
.elim-match-team:last-child { border-bottom: none; }
.elim-match-team.winner { background: rgba(34,197,94,0.08); font-weight: 600; }
.elim-team-name { font-size: 0.9rem; }
.elim-team-score {
    font-size: 1.1rem; font-weight: 700; min-width: 2rem; text-align: center;
    color: #374151;
}
.elim-match-team.winner .elim-team-score { color: var(--color-primary); }

/* ── Bracket clickeable → detalle en games (2026-07-26) ── */
.elim-match-card.clickable { cursor: pointer; transition: border-color .15s, transform .1s, box-shadow .15s; }
.elim-match-card.clickable:hover { border-color: var(--accent-trx) !important; transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0,0,0,0.25); }
.elim-detail-hint {
    font-size: 0.62rem; text-align: right; color: var(--color-text-dim);
    padding: 2px 8px 3px; border-top: 1px solid var(--color-border-soft);
    letter-spacing: 0.02em; text-transform: uppercase;
}
.elim-match-card.clickable:hover .elim-detail-hint { color: var(--accent-trx); }
.match-score-detail {
    font-size: 0.72rem; color: var(--color-text-muted); text-align: center;
    margin-top: 2px; letter-spacing: 0.02em; white-space: nowrap;
}
.pm-anchor { scroll-margin-top: 80px; border-radius: 12px; }
.pm-flash { animation: pmFlash 2.2s ease-out; }
@keyframes pmFlash {
    0%, 18% { box-shadow: 0 0 0 3px var(--accent-trx), 0 0 20px var(--accent-trx-glow); }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.fixture-playoffs .section-title, .elim-detail-list .section-title { font-size: 1.05rem; }

.bye-card { opacity: 0.7; }
.bye-slot { background: #f9fafb; }
.bye-text { color: #9ca3af; font-style: italic; }
.bye-label { font-size: 0.82rem; color: #22c55e; font-weight: 600; font-style: italic; }
.match-bye { opacity: 0.75; border-left: 3px solid #22c55e; }
.match-bye .mac-court { color: #22c55e; font-weight: 600; }

/* Mundial config fields */
#mundial-config-fields .form-row { display: flex; gap: 1rem; }
#mundial-config-fields .form-group { flex: 1; }

/* Global player photo styles */
.player-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.player-avatar-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}
.player-pick-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .75rem;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-size: .9rem;
    transition: background .15s;
}
.player-pick-btn:hover { background: var(--color-bg); }
.players-picker-list { display: flex; flex-direction: column; gap: .4rem; max-height: 320px; overflow-y: auto; }
.players-picker-search { margin-bottom: .75rem; }

/* Modal tabs */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    padding: 0 1rem;
    gap: 0;
}
.modal-tab-btn {
    padding: .6rem 1rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: .9rem;
    font-family: var(--font);
    color: #666;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.modal-tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }

/* Toast notification */
.toast-msg {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px);
    padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 0.92rem; font-weight: 600;
    color: #fff; z-index: 9999; opacity: 0; transition: opacity 0.3s, transform 0.3s;
    pointer-events: none; font-family: var(--font); box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.toast-msg.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-msg.success { background: #16a34a; }
.toast-msg.error { background: #dc2626; }

@media (max-width: 600px) {
    .public-tabs { gap: 0; }
    .pub-tab-btn { flex: 1; text-align: center; padding: 0.6rem 0.5rem; font-size: 0.85rem; }
    .elim-matches { grid-template-columns: 1fr; }
    #mundial-config-fields .form-row { flex-direction: column; gap: 0; }
    .toast-msg { left: 1rem; right: 1rem; transform: translateY(20px); }
    .toast-msg.show { transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   ▓▓▓ TRIXPADEL — BROADCAST EDITORIAL OVERRIDE ▓▓▓
   Ronda E — Rediseño visual 2026-05-27
   Sistema dark + TRX lime + Anton display + bracket UI
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Atmósfera global: grain + mesh ────────────────────────────── */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.83 0 0 0 0 0.05 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.5;
    mix-blend-mode: overlay;
}
body > * { position: relative; z-index: 2; }

/* ─── NAVBAR override (broadcast topbar) ────────────────────────── */
.navbar {
    background: rgba(10, 12, 10, 0.85);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 0 0 var(--accent-trx-dim), 0 8px 32px rgba(0,0,0,0.4);
}
.navbar-inner { height: 60px; }
.navbar-brand {
    color: var(--color-text);
    font-family: var(--font-condensed);
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.brand-icon {
    background: var(--accent-trx);
    color: #000;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--accent-trx-dim);
}
.brand-logo {
    background: transparent;
    box-shadow: none;
    border-radius: 4px;
    filter: drop-shadow(0 0 8px rgba(157,211,12,0.15));
}
.nav-link {
    color: var(--color-text-muted);
    font-family: var(--font-condensed);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.92rem;
    padding: 0.5rem 0.9rem;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}
.nav-link:hover, .nav-link.active {
    background: transparent;
    color: var(--accent-trx);
    border-bottom-color: var(--accent-trx);
}
.nav-btn-admin {
    background: var(--accent-trx);
    color: #000 !important;
    border: 1px solid var(--accent-trx);
    border-radius: 4px;
    font-family: var(--font-condensed);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem;
    box-shadow: 0 0 18px var(--accent-trx-glow);
}
.nav-btn-admin:hover {
    background: var(--accent-trx-bright);
    color: #000 !important;
    transform: translateY(-1px);
}
.nav-back-main {
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    background: transparent;
    font-family: var(--font-condensed);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.nav-back-main:hover {
    background: transparent;
    color: var(--accent-trx);
    border-color: var(--accent-trx);
}

/* mobile menu dark */
.nav-mobile-menu {
    background: var(--color-bg-2);
    border-top: 1px solid var(--accent-trx-dim);
}
.nav-mobile-link, .nav-mobile-back {
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-soft);
    font-family: var(--font-condensed);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.nav-mobile-link.active { color: var(--accent-trx); }
.nav-hamburger span { background: var(--color-text); }

/* ─── HERO redesign (editorial broadcast) ───────────────────────── */
.hero, .hero-home, .hero-sm {
    background: linear-gradient(135deg, #0a0c0a 0%, #111811 100%);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    position: relative;
    padding: 3rem 1.5rem 3.5rem;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 60% 80% at 20% 30%, rgba(157,211,12,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 90% 80%, rgba(27,94,32,0.12) 0%, transparent 65%),
        repeating-linear-gradient(90deg, transparent 0, transparent 80px, rgba(157,211,12,0.04) 80px, rgba(157,211,12,0.04) 81px);
    pointer-events: none;
}
.hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--accent-trx) 30%, var(--accent-trx) 70%, transparent 100%);
    opacity: 0.6;
}
.hero-content { max-width: 1100px; margin: 0 auto; position: relative; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--accent-trx);
    border: 1px solid var(--accent-trx);
    padding: 0.3rem 0.8rem;
    border-radius: 0;
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    box-shadow: 0 0 14px var(--accent-trx-glow);
}
.hero-badge::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--accent-trx);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-trx);
}
.hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-text);
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.hero-title .accent { color: var(--accent-trx); }
.hero-subtitle {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    max-width: 620px;
    margin-bottom: 1.75rem;
    line-height: 1.5;
}
.hero-club-logo {
    max-height: 90px;
    max-width: 240px;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 2px 24px rgba(157,211,12,0.2));
}

/* Logo grande en el hero — reemplaza al h1 cuando el club tiene logo */
.hero-logo-main {
    display: block;
    max-width: 420px;
    width: 100%;
    height: auto;
    margin: 0.25rem 0 1.5rem;
    filter:
        drop-shadow(0 2px 40px rgba(255,255,255,0.12))
        drop-shadow(0 4px 16px rgba(0,0,0,0.55));
    animation: hero-logo-in 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes hero-logo-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (max-width: 600px) {
    .hero-logo-main { max-width: 280px; }
}

/* Hero action buttons */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.4rem;
    border-radius: 2px;
    font-family: var(--font-condensed);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.92rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}
.hero-btn-primary {
    background: var(--accent-trx);
    color: #000;
    border-color: var(--accent-trx);
    box-shadow: 0 0 24px var(--accent-trx-glow);
}
.hero-btn-primary:hover {
    background: var(--accent-trx-bright);
    transform: translateY(-2px);
    box-shadow: 0 4px 28px var(--accent-trx-glow);
}
.hero-btn-secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}
.hero-btn-secondary:hover {
    border-color: var(--accent-trx);
    color: var(--accent-trx);
}
.hero-btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
}
.hero-btn-ghost:hover {
    color: var(--accent-trx);
    background: transparent;
}

/* ─── SECTION HEADERS — editorial counter style ─────────────────── */
.section-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: 2.5rem 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    position: relative;
}
.section-header::before {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 60px; height: 2px;
    background: var(--accent-trx);
}
.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-text);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
}
.section-count {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--accent-trx);
    background: transparent;
    border: 1px solid var(--accent-trx-dim);
    padding: 0.15rem 0.55rem;
    border-radius: 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

/* ─── TOURNAMENT CARDS — editorial broadcast cards ──────────────── */
.tournaments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.tournament-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.tournament-card::before {
    /* type stripe — top accent band */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--accent-trx);
    z-index: 1;
}
.tournament-card[data-type="flash"]::before,
.tournament-card:has(.badge-type.flash)::before,
.tournament-card:has([style*="f59e0b"])::before { background: #fbbf24; }
.tournament-card[data-type="americano"]::before,
.tournament-card:has(.americano-badge)::before { background: #38bdf8; }
.tournament-card[data-type="liga"]::before,
.tournament-card:has(.liga-badge)::before { background: #0055A4; }

/* bracket corners */
.tournament-card::after {
    content: "";
    position: absolute;
    top: 12px; right: 12px;
    width: 14px; height: 14px;
    border-top: 1.5px solid var(--accent-trx);
    border-right: 1.5px solid var(--accent-trx);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.tournament-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-trx);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--accent-trx-dim);
}
.tournament-card:hover::after {
    opacity: 1;
    transform: translate(2px, -2px);
}
.tournament-card.finished {
    opacity: 0.7;
    border-color: var(--color-border-soft);
}
.tournament-card.finished::before { background: var(--color-text-dim); opacity: 0.5; }

.card-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 0;
    margin: 1.25rem 1.25rem 0.5rem;
    width: fit-content;
    border: 1px solid transparent;
}
.card-status-badge.active {
    background: transparent;
    color: var(--accent-trx);
    border-color: var(--accent-trx);
}
.card-status-badge.finished-badge,
.card-status-badge.historico-badge {
    background: transparent;
    color: var(--color-text-dim);
    border-color: var(--color-border);
}
.card-type-badge {
    position: absolute;
    top: 12px; left: 12px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 0;
    background: transparent;
    color: #000;
    z-index: 2;
}
.card-type-badge.clasico-badge { background: var(--accent-trx); color: #000; }
.card-type-badge.americano-badge { background: #38bdf8; color: #000; }
.card-type-badge.liga-badge { background: #0055A4; color: #fff; }

.card-body {
    padding: 0.5rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}
.card-title {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-text);
    font-size: 1.45rem;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
}
.card-location, .meta-item {
    color: var(--color-text-muted);
    font-family: var(--font);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}
.card-location svg, .meta-item svg { color: var(--accent-trx); opacity: 0.7; }
.meta-item strong {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--color-text);
    letter-spacing: 0;
    line-height: 1;
    margin-right: 0.15rem;
}
.card-arrow {
    color: var(--accent-trx);
    font-family: var(--font-display);
    top: auto;
    bottom: 1rem;
}
.card-category {
    font-family: var(--font-condensed);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-trx);
    background: transparent;
    border-left: 2px solid var(--accent-trx);
    padding: 0.1rem 0.55rem;
    margin: 0 1.25rem;
    width: fit-content;
}

/* ─── PULSE — live broadcast dot ────────────────────────────────── */
.pulse {
    width: 7px;
    height: 7px;
    background: var(--accent-trx);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-trx);
    animation: trx-pulse 1.8s ease-out infinite;
}
@keyframes trx-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(157,211,12,0.6), 0 0 8px var(--accent-trx); transform: scale(1); }
    50% { box-shadow: 0 0 0 6px rgba(157,211,12,0), 0 0 12px var(--accent-trx); transform: scale(1.05); }
}

/* ─── LEADERBOARD EDITORIAL — Rankings rewrite ──────────────────── */
.leaderboard {
    margin: 1.5rem 0 3rem;
}
.leaderboard-podium {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 0.8rem;
    align-items: end;
    margin: 1.5rem 0 2.5rem;
}
@media (max-width: 720px) {
    .leaderboard-podium { grid-template-columns: 1fr; gap: 0.6rem; }
    /* En mobile: orden visual 1, 2, 3 (no 2, 1, 3) */
    .leaderboard-podium .podium-slot-1 { order: 1; transform: none; }
    .leaderboard-podium .podium-slot-2 { order: 2; }
    .leaderboard-podium .podium-slot-3 { order: 3; }
    .podium-slot-1:hover { transform: none; }
}
.podium-slot {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 1.25rem 1rem 1.5rem;
    position: relative;
    text-align: center;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.podium-slot::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(ellipse at 50% 100%, rgba(157,211,12,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.podium-slot-1 {
    border-color: var(--gold);
    background: linear-gradient(180deg, #1a1810 0%, var(--color-surface) 60%);
    transform: translateY(-12px);
}
.podium-slot-1::before {
    background-image: radial-gradient(ellipse at 50% 100%, rgba(251,191,36,0.15) 0%, transparent 70%);
}
.podium-slot-2 { border-color: var(--silver-dim); }
.podium-slot-3 { border-color: var(--bronze-dim); }
.podium-slot:hover { transform: translateY(-15px); }
.podium-slot-2:hover, .podium-slot-3:hover { transform: translateY(-3px); }

.podium-rank {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 4.5rem;
    line-height: 0.9;
    color: var(--accent-trx);
    text-shadow: 0 0 32px var(--accent-trx-glow);
    letter-spacing: 0;
    margin-bottom: 0.5rem;
    position: relative;
}
.podium-slot-1 .podium-rank {
    font-size: 6rem;
    color: var(--gold);
    text-shadow: 0 0 32px rgba(251,191,36,0.4);
}
.podium-slot-2 .podium-rank { color: var(--silver); }
.podium-slot-3 .podium-rank { color: var(--bronze); }

.podium-medal-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.podium-photo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 0.75rem;
    border: 3px solid var(--accent-trx);
    box-shadow: 0 0 20px var(--accent-trx-glow);
    display: block;
}
.podium-slot-1 .podium-photo {
    width: 110px; height: 110px;
    border-color: var(--gold);
    box-shadow: 0 0 28px rgba(251,191,36,0.4);
}
.podium-photo-placeholder {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface-3));
    border: 3px solid var(--accent-trx);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--accent-trx);
    text-transform: uppercase;
}
.podium-slot-1 .podium-photo-placeholder {
    width: 110px; height: 110px;
    border-color: var(--gold);
    color: var(--gold);
    font-size: 3rem;
}
.podium-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.1;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.podium-slot-1 .podium-name { font-size: 1.5rem; }
.podium-points {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--accent-trx);
    letter-spacing: 0;
}
.podium-slot-1 .podium-points {
    font-size: 3.5rem;
    color: var(--gold);
}
.podium-points-label {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}
.podium-meta {
    margin-top: 0.5rem;
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Leaderboard list (positions 4+) — terminal-style rows */
.leaderboard-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 2px;
}
.leaderboard-list-header {
    display: grid;
    grid-template-columns: 60px 1fr 80px 60px 80px 100px;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-2);
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.leaderboard-list-header > div:nth-child(3),
.leaderboard-list-header > div:nth-child(4),
.leaderboard-list-header > div:nth-child(5) { text-align: center; }
.leaderboard-list-header > div:last-child { text-align: right; }

.leaderboard-row {
    display: grid;
    grid-template-columns: 60px 1fr 80px 60px 80px 100px;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    align-items: center;
    border-bottom: 1px solid var(--color-border-soft);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.leaderboard-row:hover {
    background: rgba(157, 211, 12, 0.04);
    border-color: var(--accent-trx-dim);
}
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-row.rank-top1 { border-left: 3px solid #f59e0b; background: rgba(245,158,11,0.05); }
.leaderboard-row.rank-top1 .leaderboard-rank { color: #f59e0b; font-weight: 700; }
.leaderboard-row.rank-top2 { border-left: 3px solid #94a3b8; background: rgba(148,163,184,0.05); }
.leaderboard-row.rank-top2 .leaderboard-rank { color: #94a3b8; font-weight: 700; }
.leaderboard-row.rank-top3 { border-left: 3px solid #cd7c3a; background: rgba(205,124,58,0.05); }
.leaderboard-row.rank-top3 .leaderboard-rank { color: #cd7c3a; font-weight: 700; }
.leaderboard-rank {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 1rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.leaderboard-rank::before { content: "#"; opacity: 0.4; margin-right: 2px; }
.leaderboard-name {
    display: flex; align-items: center; gap: 0.7rem;
    min-width: 0;
}
.leaderboard-name-text {
    font-family: var(--font);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leaderboard-meta {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
}
.leaderboard-points {
    text-align: right;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--accent-trx);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
@media (max-width: 640px) {
    .leaderboard-list-header { grid-template-columns: 40px 1fr 70px; }
    .leaderboard-list-header > div:nth-child(3),
    .leaderboard-list-header > div:nth-child(4),
    .leaderboard-list-header > div:nth-child(5) { display: none; }
    .leaderboard-row { grid-template-columns: 40px 1fr 70px; }
    .leaderboard-row > .leaderboard-meta:nth-of-type(3),
    .leaderboard-row > .leaderboard-meta:nth-of-type(4),
    .leaderboard-row > .leaderboard-meta:nth-of-type(5) { display: none; }
    .leaderboard-points { font-size: 1.3rem; }
}

/* Avatar in leaderboard row */
.lb-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}
.lb-avatar-placeholder {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--color-surface-2);
    border: 1px solid var(--accent-trx-dim);
    color: var(--accent-trx);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.95rem;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* ─── INFO BOX dark ─────────────────────────────────────────────── */
.info-box {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 3px solid var(--accent-trx) !important;
    color: var(--color-text-muted) !important;
    padding: 0.85rem 1rem !important;
    border-radius: 2px !important;
    font-size: 0.85rem !important;
}
.info-box strong { color: var(--accent-trx); font-family: var(--font-condensed); letter-spacing: 0.04em; font-weight: 400; }

/* ─── TABS public ───────────────────────────────────────────────── */
.public-tabs {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0;
}
.pub-tab-btn {
    background: transparent;
    color: var(--color-text-muted);
    padding: 0.85rem 1.25rem;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-condensed);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.2s ease, border-color 0.2s ease;
    margin-bottom: -1px;
}
.pub-tab-btn:hover { color: var(--accent-trx); }
.pub-tab-btn.active {
    color: var(--accent-trx);
    border-bottom-color: var(--accent-trx);
    background: transparent;
}

/* ─── FORMS dark ────────────────────────────────────────────────── */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 2px !important;
    padding: 0.6rem 0.8rem !important;
    font-family: var(--font) !important;
    font-size: 0.95rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--accent-trx) !important;
    box-shadow: 0 0 0 3px var(--accent-trx-glow) !important;
}
label { color: var(--color-text-muted); font-family: var(--font-condensed); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; }

/* Filter bar */
form[method="GET"][action*="rankings"], form[method="GET"][action*="jugadores"] {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border);
    border-radius: 2px !important;
}

/* ─── BUTTONS ───────────────────────────────────────────────────── */
.btn, button.btn {
    font-family: var(--font-condensed);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 0.6rem 1.1rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    cursor: pointer;
}
.btn-primary {
    background: var(--accent-trx);
    color: #000;
    border-color: var(--accent-trx);
    box-shadow: 0 0 14px var(--accent-trx-glow);
}
.btn-primary:hover {
    background: var(--accent-trx-bright);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px var(--accent-trx-glow);
}
.btn-secondary, .btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-ghost { color: var(--color-text-muted); border-color: transparent; }
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--accent-trx); color: var(--accent-trx); background: transparent; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.82rem; }

/* ─── ALERTS dark ───────────────────────────────────────────────── */
.alert {
    background: var(--color-surface) !important;
    border-left: 3px solid var(--accent-trx) !important;
    color: var(--color-text) !important;
    padding: 0.8rem 1rem;
    border-radius: 2px;
    margin-bottom: 1rem;
    font-family: var(--font);
}
.alert-success { border-left-color: var(--accent-trx) !important; }
.alert-error, .alert-danger { border-left-color: var(--danger) !important; }
.alert-warning { border-left-color: var(--warn) !important; }
.alert-info { border-left-color: #38bdf8 !important; }

/* ─── PLAYERS GRID (jugadores.html) ─────────────────────────────── */
.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 0.65rem;
}
.player-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 1.15rem 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.player-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent-trx);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.player-card::after {
    content: "";
    position: absolute;
    top: 7px; right: 7px;
    width: 6px; height: 6px;
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    transition: border-color 0.25s ease;
    pointer-events: none;
}
.player-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-trx);
    background: color-mix(in srgb, var(--color-surface) 92%, var(--accent-trx) 8%);
}
.player-card:hover::before { transform: scaleX(1); }
.player-card:hover::after { border-color: var(--accent-trx); }

.player-card-avatar-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    margin-bottom: 0.7rem;
    flex-shrink: 0;
}

/* Slot pendiente en bracket pre-armado */
.pair-slot-label {
    display: inline-block;
    padding: 4px 10px;
    border: 1px dashed var(--color-text-soft, #8a9180);
    border-radius: 6px;
    background: rgba(157, 211, 12, 0.05);
    color: var(--accent-trx, #9dd30c);
    font-family: var(--font-condensed, 'Bebas Neue', sans-serif);
    letter-spacing: 0.12em;
    font-size: 0.92rem;
    text-transform: uppercase;
    font-weight: 600;
}
.btn-slot-edit {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-soft);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
}
.btn-slot-edit:hover {
    background: var(--accent-trx, #9dd30c);
    color: #11140f;
    border-color: var(--accent-trx, #9dd30c);
}
.btn-slot-edit.empty {
    margin-left: 0;
    padding: 4px 10px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-trx, #9dd30c);
    border-style: dashed;
}

/* Corona Nº 1 — overlay sobre la foto/placeholder, usada en jugadores público y admin */
.player-card-crown,
.player-photo-wrap .player-card-crown {
    position: absolute;
    top: -14px;
    right: -10px;
    font-size: 1.55rem;
    line-height: 1;
    z-index: 5;
    transform: rotate(18deg);
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45));
    pointer-events: none;
    user-select: none;
    animation: crown-float 2.6s ease-in-out infinite;
}
@keyframes crown-float {
    0%, 100% { transform: rotate(18deg) translateY(0); }
    50%      { transform: rotate(18deg) translateY(-2px); }
}
.player-card.is-leader .player-card-photo,
.player-card.is-leader .player-card-placeholder {
    box-shadow: 0 0 0 2px var(--accent-trx, #9dd30c);
}
@media (max-width: 700px) {
    .player-card-crown,
    .player-photo-wrap .player-card-crown {
        font-size: 1.25rem;
        top: -10px;
        right: -6px;
    }
}
.player-card-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--color-bg-2);
    border: 1px solid var(--color-border);
}
.player-card-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f2419, #15180f);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent-trx);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.player-card-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.92rem;
    color: var(--color-text);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    min-height: 2.2em;
}
.player-card-meta {
    font-family: var(--font-condensed);
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: flex;
    gap: 0.3rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    line-height: 1.1;
}
.player-card-meta .sep {
    color: var(--color-text-dim);
    opacity: 0.5;
}
.player-card-meta .city {
    width: 100%;
    display: block;
    font-size: 0.64rem;
    color: var(--color-text-dim);
    margin-top: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-card-cat {
    --cat-color: var(--accent-trx);
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--cat-color);
    color: #0a0d08;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    border: 2px solid var(--color-surface);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cat-color) 55%, #000),
        0 0 12px -4px var(--cat-color),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    z-index: 2;
}
.player-card-cat.is-male   { --cat-color: #5BA3F5; }
.player-card-cat.is-female { --cat-color: #F472B6; }

/* ─── REGLAMENTO ──────────────────────────────────────────────── */
.reglamento-doc {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--accent-trx);
    border-radius: 3px;
    padding: 2rem 2.2rem;
    color: var(--color-text);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 820px;
    margin: 0 auto;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

/* ─── ASCENSOS ────────────────────────────────────────────────── */
.ascensos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 0.85rem;
}
.ascenso-card {
    --ascenso-color: var(--accent-trx);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--ascenso-color);
    border-radius: 3px;
    padding: 1rem 1.1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: transform 0.2s ease, border-color 0.2s ease;
    position: relative;
}
.ascenso-card:hover {
    transform: translateY(-1px);
    border-color: var(--ascenso-color);
}
.ascenso-card.is-male   { --ascenso-color: #5BA3F5; }
.ascenso-card.is-female { --ascenso-color: #F472B6; }

.ascenso-avatar-wrap {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}
.ascenso-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ascenso-color);
    background: var(--color-bg-2);
    box-shadow: 0 0 12px -4px var(--ascenso-color);
}
.ascenso-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ascenso-color);
    background: linear-gradient(135deg, #1f2419, #15180f);
}
.ascenso-body { flex: 1; min-width: 0; }
.ascenso-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-bottom: 0.35rem;
}
.ascenso-cats {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ascenso-color);
    margin-bottom: 0.5rem;
}
.ascenso-cat {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.55rem;
    border-radius: 2px;
}
.ascenso-cat.from {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.ascenso-cat.to {
    background: color-mix(in srgb, var(--ascenso-color) 18%, transparent);
    color: var(--ascenso-color);
    border: 1px solid color-mix(in srgb, var(--ascenso-color) 60%, transparent);
}
.ascenso-motivo {
    font-size: 0.83rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0 0 0.5rem;
    line-height: 1.4;
}
.ascenso-meta {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    display: flex;
    gap: 0.3rem;
    align-items: center;
    flex-wrap: wrap;
}
.ascenso-meta .sep { opacity: 0.5; }
.ascenso-pts {
    color: var(--ascenso-color);
    font-weight: 600;
}

/* Hero CTA · Ascensos (medalla dorada) — extiende .hero-btn (hereda tamaño + mobile) */
.hero-btn-promo {
    --promo-gold-1: #F59E0B;
    --promo-gold-2: #FCD34D;
    --promo-gold-deep: #B45309;
    background: linear-gradient(135deg, var(--promo-gold-1) 0%, var(--promo-gold-2) 50%, var(--promo-gold-1) 100%);
    color: #1a1408;
    border: none;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 0 0 1px var(--promo-gold-deep),
        0 4px 14px -4px rgba(245, 158, 11, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* Hero CTA · Ranking (cromo/plata metálica) */
.hero-btn-rank {
    --rank-light: #F2F5F8;
    --rank-base: #C9D0D8;
    --rank-mid: #9BA4AE;
    --rank-deep: #5A6470;
    background: linear-gradient(165deg, var(--rank-light) 0%, var(--rank-base) 38%, var(--rank-mid) 100%);
    color: #0a0d10;
    border-color: var(--rank-deep);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 0 0 1px var(--rank-deep),
        0 4px 14px -4px rgba(155, 164, 174, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.hero-btn-rank::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -40%;
    width: 22%;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: skewX(-16deg);
    transition: left 0.55s ease;
    pointer-events: none;
    z-index: 0;
}
.hero-btn-rank > * { position: relative; z-index: 2; }
.hero-btn-rank:hover {
    background: linear-gradient(165deg, var(--rank-light) 0%, #DCE2E8 38%, var(--rank-mid) 100%);
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px var(--rank-deep),
        0 6px 20px -4px rgba(155, 164, 174, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.hero-btn-rank:hover::after { left: 140%; }
.hero-btn-rank svg { stroke-width: 2.4; }

/* Hero CTA · Liga (azul Francia) — extiende .hero-btn */
.hero-btn-liga {
    background: linear-gradient(165deg, #1f6fe0 0%, #0055A4 48%, #003f7d 100%);
    color: #ffffff;
    border-color: #002f5e;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 0 0 1px #002f5e,
        0 4px 16px -4px rgba(0, 85, 164, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.hero-btn-liga::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -40%;
    width: 22%;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%);
    transform: skewX(-16deg);
    transition: left 0.55s ease;
    pointer-events: none;
    z-index: 0;
}
.hero-btn-liga > * { position: relative; z-index: 2; }
.hero-btn-liga:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px #002f5e,
        0 6px 22px -4px rgba(0, 85, 164, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.hero-btn-liga:hover::after { left: 140%; }
.hero-btn-liga svg { stroke-width: 2.2; }

/* ─── PWA INSTALL · patrón TriXPadel main ─────────────────────── */
#pwa-install-btn {
    display: none;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1050;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: var(--accent-trx);
    color: #0a0c0a;
    border: none;
    border-radius: 2px;
    font-family: var(--font-condensed);
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 0 1px var(--accent-trx-dim), 0 4px 14px -4px rgba(0,0,0,0.5);
}
#pwa-install-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 16px var(--accent-trx-glow);
}
#pwa-install-btn.visible { display: inline-flex; }
@media (max-width: 720px) {
    /* Mover bajo el navbar para no chocar con la hamburguesa */
    #pwa-install-btn { top: auto; bottom: 1rem; padding: 0.5rem 0.85rem; font-size: 0.8rem; }
}

/* iOS install banner */
#ios-install-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 12, 10, 0.96);
    border-top: 2px solid var(--accent-trx);
    padding: 1rem 1.25rem;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: pwaSlideUp 0.4s ease-out;
}
#ios-install-banner.visible { display: block; }
@keyframes pwaSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.ios-banner-inner {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.ios-banner-icon {
    width: 48px; height: 48px;
    border-radius: 4px;
    flex-shrink: 0;
    overflow: hidden;
    filter: drop-shadow(0 0 10px var(--accent-trx-glow));
}
.ios-banner-icon img { width: 100%; height: 100%; object-fit: cover; }
.ios-banner-text { flex: 1; min-width: 0; }
.ios-banner-text strong {
    display: block;
    font-family: var(--font-condensed);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-trx);
    margin-bottom: 4px;
}
.ios-banner-text p {
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin: 0;
}
.ios-share-icon {
    display: inline-block;
    background: #007aff;
    border-radius: 4px;
    padding: 1px 4px;
    vertical-align: middle;
}
.ios-banner-close {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.25rem 0.65rem;
    border-radius: 2px;
    cursor: pointer;
    flex-shrink: 0;
}
.ios-banner-close:hover { color: var(--accent-trx); border-color: var(--accent-trx); }

/* No mostrar nada cuando ya está instalada */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    #pwa-install-btn, #ios-install-banner { display: none !important; }
}

/* Forzar oculto cualquier remanente DOM/CSS de versiones anteriores */
.pwa-install-wrap, .pwa-install-dismiss, .pwa-ios-modal { display: none !important; }

/* ─── HISTORIAL · agrupamiento por año ──────────────────────────── */
.year-section {
    margin-bottom: 3rem;
}
.year-section:first-of-type { margin-top: 1.5rem; }
.year-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--color-border);
}
.year-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2.4rem;
    color: var(--accent-trx);
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1;
}
.year-count {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 2px;
}
.year-divider {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--color-border), transparent);
    margin-left: 0.5rem;
}
@media (max-width: 640px) {
    .year-title { font-size: 1.8rem; }
    .year-count { font-size: 0.7rem; padding: 0.18rem 0.5rem; }
    .year-section { margin-bottom: 2.2rem; }
}
.hero-btn-promo::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 14px; height: 14px;
    background: var(--promo-gold-deep);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 1;
    pointer-events: none;
}
.hero-btn-promo::after {
    content: "";
    position: absolute;
    top: -50%; left: -100%;
    width: 40%; height: 200%;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    transform: skewX(-18deg);
    transition: left 0.55s ease;
    pointer-events: none;
    z-index: 0;
}
.hero-btn-promo > * { position: relative; z-index: 2; }
.hero-btn-promo:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px var(--promo-gold-deep),
        0 7px 22px -4px rgba(245, 158, 11, 0.78),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.hero-btn-promo:hover::after { left: 150%; }
.hero-btn-promo svg { stroke-width: 2.4; }

@media (max-width: 640px) {
    .players-grid {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        gap: 0.5rem;
    }
    .player-card { padding: 1rem 0.55rem 0.7rem; }
    .player-card-avatar-wrap { width: 62px; height: 62px; margin-bottom: 0.55rem; }
    .player-card-placeholder { font-size: 1.65rem; }
    .player-card-name { font-size: 0.82rem; }
    .player-card-cat { width: 1.5rem; height: 1.5rem; font-size: 0.72rem; }
}

/* ─── EMPTY STATES ──────────────────────────────────────────────── */
.empty-state {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: 2px;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--color-text-muted);
}
.empty-state h3 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-text);
    text-transform: uppercase;
    margin: 0.5rem 0;
}
.empty-icon { font-size: 3rem; opacity: 0.5; }

/* ─── FOOTER ────────────────────────────────────────────────────── */
.footer {
    background: var(--color-bg-2) !important;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    margin-top: 4rem;
    padding: 2.5rem 0;
    position: relative;
}
.footer::before {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-trx) 50%, transparent);
    opacity: 0.4;
}
.footer .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.footer a {
    color: var(--color-text-muted);
    font-family: var(--font-condensed);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}
.footer a:hover { color: var(--accent-trx); }
.footer-trix-brand { display: flex; gap: 0.75rem; align-items: center; }
.footer-trix-logo { width: 40px; height: 40px; border-radius: 6px; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }

/* ─── TICKER (live last results) ─────────────────────────────────── */
.ticker {
    background: var(--color-bg-2);
    border-top: 1px solid var(--accent-trx-dim);
    border-bottom: 1px solid var(--accent-trx-dim);
    overflow: hidden;
    position: relative;
    height: 38px;
    display: flex;
    align-items: center;
}
.ticker-label {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--accent-trx);
    color: #000;
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    z-index: 2;
    box-shadow: 4px 0 12px rgba(0,0,0,0.4);
}
.ticker-track {
    display: flex;
    gap: 2.5rem;
    padding-left: 110px;
    animation: ticker-scroll 35s linear infinite;
    white-space: nowrap;
}
.ticker-item {
    font-family: var(--font-condensed);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.ticker-item strong {
    color: var(--accent-trx);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
}
.ticker-item::after {
    content: "•";
    color: var(--accent-trx-dim);
    margin-left: 2.5rem;
}
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ─── STAT BAND (hero quick stats) ──────────────────────────────── */
.stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    margin-top: 2rem;
}
.stat-cell {
    background: var(--color-surface);
    padding: 1rem 1.25rem;
    text-align: left;
}
.stat-value {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--accent-trx);
    letter-spacing: 0;
    margin-bottom: 0.25rem;
}
.stat-label {
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ─── FAB admin dark ────────────────────────────────────────────── */
.fab-admin {
    background: var(--accent-trx) !important;
    color: #000 !important;
    box-shadow: 0 4px 20px var(--accent-trx-glow), 0 0 0 1px var(--accent-trx-dim);
}
.fab-admin:hover { background: var(--accent-trx-bright); }

/* ─── STAGGERED FADE-IN on page load ────────────────────────────── */
@keyframes trx-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-content > * { animation: trx-fade-up 0.6s ease-out backwards; }
.hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.hero-content > *:nth-child(2) { animation-delay: 0.12s; }
.hero-content > *:nth-child(3) { animation-delay: 0.18s; }
.hero-content > *:nth-child(4) { animation-delay: 0.24s; }
.hero-content > *:nth-child(5) { animation-delay: 0.30s; }
.tournaments-grid .tournament-card { animation: trx-fade-up 0.4s ease-out backwards; }
.tournaments-grid .tournament-card:nth-child(1) { animation-delay: 0.05s; }
.tournaments-grid .tournament-card:nth-child(2) { animation-delay: 0.10s; }
.tournaments-grid .tournament-card:nth-child(3) { animation-delay: 0.15s; }
.tournaments-grid .tournament-card:nth-child(4) { animation-delay: 0.20s; }
.tournaments-grid .tournament-card:nth-child(5) { animation-delay: 0.25s; }
.tournaments-grid .tournament-card:nth-child(6) { animation-delay: 0.30s; }
.tournaments-grid .tournament-card:nth-child(n+7) { animation-delay: 0.35s; }

/* ─── SCORE HERO (used in match detail) ─────────────────────────── */
.score-hero {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 1;
    color: var(--accent-trx);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}
.score-hero-sm {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--color-text);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

/* ─── BRACKET CORNERS utility ───────────────────────────────────── */
.bracket-frame {
    position: relative;
}
.bracket-frame::before, .bracket-frame::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--accent-trx);
}
.bracket-frame::before {
    top: -1px; left: -1px;
    border-top: 1.5px solid;
    border-left: 1.5px solid;
}
.bracket-frame::after {
    bottom: -1px; right: -1px;
    border-bottom: 1.5px solid;
    border-right: 1.5px solid;
}

/* ─── SCROLLBAR dark ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-surface-3); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-trx-dim); }

/* ─── SELECTION ─────────────────────────────────────────────────── */
::selection { background: var(--accent-trx); color: #000; }

/* ─── Catch-all for stubborn old white backgrounds ──────────────── */
.ranking-table { background: var(--color-surface) !important; }
.ranking-table table { background: var(--color-surface); color: var(--color-text); }
.ranking-table thead { background: var(--color-bg-2) !important; }
.ranking-table thead th { color: var(--accent-trx) !important; background: var(--color-bg-2) !important; font-family: var(--font-condensed); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem; }
.ranking-table tbody tr { border-bottom: 1px solid var(--color-border-soft) !important; }
.ranking-table tbody tr:hover { background: rgba(157,211,12,0.04); }
.ranking-table td { color: var(--color-text) !important; }

/* admin sidebar dark — fondo sólido claro-dentro-de-dark + links brillantes */
.admin-body { background: var(--color-bg) !important; }
.admin-sidebar {
    background: var(--color-surface) !important;
    border-right: 1px solid var(--color-border) !important;
}
.sidebar-header {
    border-bottom: 1px solid var(--color-border) !important;
}
.sidebar-app { color: var(--color-text) !important; }
.sidebar-role { color: var(--accent-trx) !important; opacity: 0.85; }
.sidebar-section-label { color: var(--color-text-muted) !important; }
.sidebar-footer { border-top: 1px solid var(--color-border) !important; }
.sidebar-link { color: var(--color-text) !important; opacity: 0.92; }
.sidebar-link:hover { background: var(--color-surface-2) !important; color: var(--accent-trx) !important; opacity: 1; }
.sidebar-link.active {
    background: var(--color-surface-2) !important;
    color: var(--accent-trx) !important;
    border-left: 3px solid var(--accent-trx);
    opacity: 1;
}
.sidebar-link.logout { color: #f4f6f0 !important; opacity: 0.8; }
.sidebar-link.logout:hover { background: rgba(239,68,68,0.18) !important; color: #fca5a5 !important; opacity: 1; }

/* sponsor/marquee soft */
._sponsors, .sponsors { background: var(--color-bg-2); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }

/* Standings table fallback (admin views) */
.standings-table { background: var(--color-surface) !important; color: var(--color-text); }
.standings-table th { background: var(--color-bg-2) !important; color: var(--accent-trx); font-family: var(--font-condensed); letter-spacing: 0.08em; }
.standings-table td { color: var(--color-text) !important; border-color: var(--color-border-soft); }
.standings-table tr:hover { background: rgba(157,211,12,0.04); }

/* Inline override for any element using #fff hardcoded backgrounds in templates */
[style*="background:#fff"], [style*="background: #fff"], [style*="background:white"], [style*="background: white"] {
    background: var(--color-surface) !important;
    color: var(--color-text);
}
[style*="background:#f8f9fa"], [style*="background:#f0f4f0"], [style*="background:#f1f5f9"], [style*="background:#f5f5f5"] {
    background: var(--color-surface) !important;
}
[style*="color:#555"], [style*="color:#666"], [style*="color:#757575"], [style*="color: #555"], [style*="color: #666"] {
    color: var(--color-text-muted) !important;
}
[style*="color:#075985"] { color: var(--color-text-muted) !important; }

/* ─── TOURNAMENT DETAIL — match scores hero ─────────────────────── */
.section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    padding: 1.5rem 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--color-text);
}
.section h2, .section h3, .section-title-h2 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.torneo-header {
    background: linear-gradient(135deg, #0a0c0a 0%, #131913 100%) !important;
    border-bottom: 1px solid var(--accent-trx-dim);
    color: var(--color-text);
    padding: 2.5rem 0 1.5rem;
    position: relative;
}
.torneo-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-trx) 50%, transparent);
}
.torneo-title-block h1 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(1.8rem, 4vw, 3rem);
}
.torneo-meta, .torneo-location {
    color: var(--color-text-muted) !important;
    font-family: var(--font-condensed);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.back-link {
    color: var(--color-text-muted) !important;
    font-family: var(--font-condensed);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.back-link:hover { color: var(--accent-trx) !important; }

/* Scores en match list - hero treatment */
.score, .score-win, .score-lose {
    font-family: var(--font-display) !important;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    padding: 0.05rem 0.3rem;
    display: inline-block;
}
.score-win {
    color: var(--accent-trx) !important;
    text-shadow: 0 0 14px var(--accent-trx-glow);
}
.score-lose {
    color: var(--color-text-muted) !important;
    opacity: 0.65;
}
.score-sep {
    font-family: var(--font-display);
    color: var(--color-text-dim);
    margin: 0 0.15rem;
}
.score-pending {
    font-family: var(--font-condensed);
    color: var(--color-text-dim);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.set {
    font-family: var(--font-display) !important;
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--color-text);
    background: var(--color-bg-2);
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    border: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
    margin: 0 0.15rem;
}

/* Podium en torneo_clasico — rediseño editorial */
.podium-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--gold);
    padding: 2rem 1.5rem 2.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}
.podium-section::before {
    content: "PODIO";
    position: absolute;
    top: 0.6rem; right: 1rem;
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    color: var(--gold);
}
.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
}
.podium-place {
    text-align: center;
}
.podium-medal {
    font-size: 2rem !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    margin-bottom: 0.4rem;
}
.podium-place .podium-name {
    font-family: var(--font-display) !important;
    font-weight: 400;
    color: var(--color-text);
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.02em;
    max-width: 140px;
}
.podium-place.gold .podium-name { font-size: 1.25rem; color: var(--gold); }
.podium-pts {
    font-family: var(--font-display);
    color: var(--accent-trx);
    font-size: 1.4rem;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    margin-top: 0.2rem;
}
.podium-place.gold .podium-pts { font-size: 1.9rem; color: var(--gold); }
.podium-block {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-text);
    padding: 0.5rem 1.5rem;
    border-radius: 2px 2px 0 0;
}
.gold-block { background: linear-gradient(180deg, var(--gold), var(--gold-dim)); color: #0a0c0a; min-width: 80px; padding: 0.75rem 1.5rem; }
.silver-block { background: linear-gradient(180deg, var(--silver), var(--silver-dim)); color: #0a0c0a; }
.bronze-block { background: linear-gradient(180deg, var(--bronze), var(--bronze-dim)); color: #0a0c0a; }

/* Standings table compacta */
.standings-table-compact {
    font-size: 0.88rem;
}
.standings-table-compact th, .standings-table-compact td { padding: 0.5rem 0.65rem; }
.standings-table tbody tr.is-first td { background: rgba(251,191,36,0.08) !important; color: var(--gold) !important; }
.standings-table tbody tr.is-second td { background: rgba(203,213,225,0.05) !important; }
.standings-table tbody tr.is-third td { background: rgba(217,119,6,0.05) !important; }

/* Round headers */
.round-header, .round-title {
    font-family: var(--font-condensed);
    color: var(--accent-trx);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.95rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--accent-trx-dim);
    margin: 1rem 0 0.75rem;
}

/* Match row layout */
.match-row, .match-item, .partido-row {
    background: var(--color-bg-2);
    border: 1px solid var(--color-border);
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 2px;
    transition: border-color 0.15s ease;
}
.match-row:hover, .match-item:hover { border-color: var(--accent-trx-dim); }

.no-matches {
    color: var(--color-text-dim);
    font-family: var(--font-condensed);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    text-align: center;
    padding: 1.5rem;
}

/* Round badges */
.round-badge {
    font-family: var(--font-condensed);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--color-bg-2) !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border);
    padding: 0.2rem 0.55rem;
    border-radius: 2px;
    font-size: 0.75rem;
}
.round-badge.completed { background: rgba(157,211,12,0.1) !important; color: var(--accent-trx) !important; border-color: var(--accent-trx-dim); }
.round-badge.partial { background: rgba(245,158,11,0.1) !important; color: var(--warn) !important; border-color: var(--warn); }

/* Match status pills */
.match-status {
    font-family: var(--font-condensed);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
}
.match-status.pending { background: rgba(245,158,11,0.1) !important; color: var(--warn) !important; border: 1px solid var(--warn); }
.match-status.finished { background: rgba(157,211,12,0.08) !important; color: var(--accent-trx) !important; border: 1px solid var(--accent-trx-dim); }

/* Champion card (gold) */
.champion-card, .card-champion {
    background: linear-gradient(135deg, rgba(251,191,36,0.08), var(--color-surface)) !important;
    border: 1px solid var(--gold) !important;
    color: var(--color-text);
    padding: 1.5rem;
    border-radius: 2px;
    position: relative;
}
.champion-card::before {
    content: "CAMPEÓN";
    position: absolute;
    top: 0.6rem; right: 1rem;
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    color: var(--gold);
}
.champion-name {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--gold);
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1;
}

/* Badges WO */
.wo-badge, .walkover {
    background: rgba(239,68,68,0.12) !important;
    color: var(--danger) !important;
    border: 1px solid var(--danger);
    font-family: var(--font-condensed);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    font-size: 0.75rem;
    border-radius: 2px;
}

/* Type badges in detail header */
.badge-type {
    font-family: var(--font-condensed) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem !important;
    border-radius: 2px !important;
    font-size: 0.78rem !important;
}
.badge-type.flash { background: #fbbf24 !important; color: #0a0c0a !important; }
.badge-type.americano { background: #38bdf8 !important; color: #0a0c0a !important; }
.badge-type.clasico, .badge-type.largo { background: var(--accent-trx) !important; color: #0a0c0a !important; }

/* Active badge */
.badge-active {
    background: transparent !important;
    color: var(--accent-trx) !important;
    border: 1px solid var(--accent-trx);
    font-family: var(--font-condensed);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 2px;
}
.badge-finished {
    background: transparent !important;
    color: var(--color-text-dim) !important;
    border: 1px solid var(--color-border);
    font-family: var(--font-condensed);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 2px;
}

/* Tournament card hover - finished tournament */
.finished .card-status-badge.finished-badge {
    background: transparent;
    color: var(--color-text-dim);
    border: 1px solid var(--color-border);
}

/* ─── UTILITY CLASSES (replacement for repeated inline styles) ──── */
.u-flex { display: flex; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-gap-1 { gap: 0.25rem; }
.u-gap-2 { gap: 0.5rem; }
.u-gap-3 { gap: 0.75rem; }
.u-gap-4 { gap: 1rem; }
.u-mt-1 { margin-top: 0.5rem; }
.u-mt-2 { margin-top: 1rem; }
.u-mt-3 { margin-top: 1.5rem; }
.u-mt-4 { margin-top: 2rem; }
.u-mb-1 { margin-bottom: 0.5rem; }
.u-mb-2 { margin-bottom: 1rem; }
.u-mb-3 { margin-bottom: 1.5rem; }
.u-text-muted { color: var(--color-text-muted); }
.u-text-accent { color: var(--accent-trx); }
.u-text-sm { font-size: 0.85rem; }
.u-text-xs { font-size: 0.75rem; }
.u-w-full { width: 100%; }
.u-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.u-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.u-panel { background: var(--color-surface); border: 1px solid var(--color-border); padding: 1rem 1.25rem; border-radius: 2px; }
.u-panel-accent { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--accent-trx); padding: 0.85rem 1rem; border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   ▓▓▓ LIVE MOMENTS — Scoreboard motion ▓▓▓
   ═══════════════════════════════════════════════════════════════════ */

/* Counter number subtle glow breath */
.counter-number {
    animation: counter-breath 4s ease-in-out infinite;
}
@keyframes counter-breath {
    0%, 100% { text-shadow: 0 0 36px var(--accent-trx-glow); }
    50% { text-shadow: 0 0 48px rgba(157,211,12,0.55); }
}

/* Ticker scanline overlay */
.ticker::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 3px,
        rgba(157,211,12,0.04) 3px,
        rgba(157,211,12,0.04) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* Match row reveal — sliding accent on the left when in view */
.match-row, .match-item {
    position: relative;
    overflow: hidden;
}
.match-row::before, .match-item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent-trx);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}
.match-row:hover::before, .match-item:hover::before {
    transform: scaleY(1);
}

/* Score reveal animation — score numbers fade in with scale */
.score-win {
    animation: score-reveal 0.5s ease-out;
}
@keyframes score-reveal {
    0% { opacity: 0; transform: scale(0.6); }
    60% { opacity: 1; transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Live indicator next to "En vivo" badges - more dramatic */
.card-status-badge.active {
    position: relative;
}
.card-status-badge.active::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid var(--accent-trx);
    border-radius: inherit;
    opacity: 0.4;
    animation: live-ring 2s ease-out infinite;
    pointer-events: none;
}
@keyframes live-ring {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* Podium slot subtle float on top 1 */
.podium-slot-1 .podium-photo,
.podium-slot-1 .podium-photo-placeholder {
    animation: podium-float 5s ease-in-out infinite;
}
@keyframes podium-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Section header underline grow on load */
.section-header::before {
    animation: section-line-grow 0.6s ease-out backwards;
    animation-delay: 0.3s;
}
@keyframes section-line-grow {
    from { width: 0; opacity: 0; }
    to { width: 60px; opacity: 1; }
}

/* Hero counter stack glow appear */
.hero-counter-stack {
    animation: trx-fade-up 0.6s ease-out 0.2s backwards;
}

/* Tournament card type stripe — slide in */
.tournament-card::before {
    transform-origin: left;
    animation: stripe-slide 0.5s ease-out backwards;
    animation-delay: inherit;
}
@keyframes stripe-slide {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Leaderboard rows stagger on load */
.leaderboard-row {
    animation: trx-fade-up 0.4s ease-out backwards;
}
.leaderboard-row:nth-child(1) { animation-delay: 0.05s; }
.leaderboard-row:nth-child(2) { animation-delay: 0.08s; }
.leaderboard-row:nth-child(3) { animation-delay: 0.11s; }
.leaderboard-row:nth-child(4) { animation-delay: 0.14s; }
.leaderboard-row:nth-child(5) { animation-delay: 0.17s; }
.leaderboard-row:nth-child(6) { animation-delay: 0.20s; }
.leaderboard-row:nth-child(7) { animation-delay: 0.23s; }
.leaderboard-row:nth-child(n+8) { animation-delay: 0.26s; }

/* Podium slots stagger reveal */
.podium-slot {
    animation: podium-rise 0.7s cubic-bezier(0.25, 1, 0.5, 1) backwards;
}
.podium-slot-2 { animation-delay: 0.1s; }
.podium-slot-1 { animation-delay: 0.25s; }
.podium-slot-3 { animation-delay: 0.4s; }
@keyframes podium-rise {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
.podium-slot-1 {
    animation-name: podium-rise-1;
}
@keyframes podium-rise-1 {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(-12px); }
}

/* Respect user reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .ticker-track { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   CONTRAST AUDIT FIXES — High-contrast overrides (Ronda F, 2026-05-27)
   Fixes para que se lea bien incluso bajo sol en celulares.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ganador de partido: lime brillante en vez del color del club ── */
.match-team.winner .match-pair-names {
    color: var(--accent-trx) !important;
    font-weight: 700 !important;
    text-shadow: 0 0 12px var(--accent-trx-glow);
}
.match-team:not(.winner) .match-pair-names {
    color: var(--color-text) !important;
    font-weight: 500;
}
.match-team .match-pair-names { font-size: 0.92rem; }

/* ── Trofeo + Ganador inline next to winning pair ── */
.winner-trophy {
    display: inline-block;
    margin-right: 0.25rem;
    filter: drop-shadow(0 0 4px rgba(251,191,36,0.55));
    transform: translateY(-1px);
}
.winner-label {
    display: inline-block;
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(251,191,36,0.08);
    border: 1px solid var(--gold);
    border-radius: 2px;
    padding: 0.12rem 0.5rem;
    margin-top: 0.3rem;
    line-height: 1;
}
.match-team.right .winner-label { float: right; clear: both; }
.match-team.right .winner-trophy { margin-right: 0; margin-left: 0.25rem; }

/* ── Elimination bracket: dark mode ── */
.elim-match-card {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm);
}
.elim-match-card.played {
    border-color: var(--accent-trx-dim) !important;
    box-shadow: 0 0 0 1px var(--accent-trx-dim), 0 0 18px rgba(157,211,12,0.08);
}
.elim-match-team {
    border-bottom: 1px solid var(--color-border-soft) !important;
    color: var(--color-text);
}
.elim-match-team.winner {
    background: linear-gradient(90deg, rgba(157,211,12,0.10), rgba(157,211,12,0.02)) !important;
    color: var(--accent-trx) !important;
}
.elim-team-name { color: var(--color-text); }
.elim-match-team.winner .elim-team-name {
    color: var(--accent-trx) !important;
    font-weight: 700;
    text-shadow: 0 0 8px var(--accent-trx-glow);
}
.elim-team-score {
    font-family: var(--font-display);
    color: var(--color-text-muted) !important;
}
.elim-match-team.winner .elim-team-score {
    color: var(--accent-trx) !important;
    text-shadow: 0 0 10px var(--accent-trx-glow);
}
.bye-slot { background: var(--color-bg-2) !important; }
.bye-text { color: var(--color-text-dim) !important; }
.bye-label { color: var(--accent-trx) !important; }
.match-bye { border-left-color: var(--accent-trx) !important; }
.match-bye .mac-court { color: var(--accent-trx) !important; }

/* ── Public tab buttons: lime accent in dark mode ── */
.pub-tab-btn { color: var(--color-text-muted) !important; }
.pub-tab-btn.active {
    color: var(--accent-trx) !important;
    border-bottom-color: var(--accent-trx) !important;
}
.pub-tab-btn:hover { color: var(--accent-trx) !important; }
.pub-tabs { border-bottom-color: var(--color-border) !important; }

/* ── Podio Final card: rediseño broadcast editorial ── */
.podio-card {
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-2) 100%) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 4px solid var(--gold) !important;
    color: var(--color-text) !important;
    border-radius: var(--radius-md) !important;
    padding: 1.5rem 1.75rem !important;
    box-shadow: var(--shadow-lg), inset 0 0 60px rgba(251,191,36,0.04) !important;
    position: relative;
    overflow: hidden;
}
.podio-card::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(251,191,36,0.12), transparent 70%);
    pointer-events: none;
}
.podio-card::after {
    content: "PODIO";
    position: absolute;
    top: 1rem; right: 1.25rem;
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    color: var(--gold);
    opacity: 0.7;
}
.podio-card h2 {
    color: var(--gold) !important;
    font-family: var(--font-condensed) !important;
    letter-spacing: 0.2em !important;
    font-size: 0.9rem !important;
}
.podio-card .podio-row {
    display: flex; align-items: center; gap: 0.9rem;
    margin-bottom: 0.65rem;
}
.podio-card .podio-row:last-child { margin-bottom: 0; }
.podio-card .podio-icon {
    flex-shrink: 0;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    background: rgba(251,191,36,0.10);
    border: 1px solid var(--gold);
    border-radius: 50%;
}
.podio-card .podio-row.runner-up .podio-icon {
    width: 44px; height: 44px; font-size: 1.6rem;
    background: rgba(203,213,225,0.08);
    border-color: var(--silver);
}
.podio-card .podio-label {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.85;
}
.podio-card .podio-row.runner-up .podio-label { color: var(--silver); }
.podio-card .podio-name {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--color-text);
    font-size: 1.65rem;
    line-height: 1.05;
    margin-top: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.podio-card .podio-row.champion .podio-name {
    color: var(--gold);
    text-shadow: 0 0 18px rgba(251,191,36,0.25);
    font-size: 2rem;
}

/* ── Info card (notas del torneo): dark mode ── */
.info-card {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 3px solid var(--accent-trx) !important;
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    line-height: 1.6;
}

/* ── Badge histórico (era light-blue) ── */
.badge-historico {
    background: rgba(157,211,12,0.10) !important;
    color: var(--accent-trx) !important;
    border: 1px solid var(--accent-trx-dim);
    font-family: var(--font-condensed);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    font-size: 0.75rem;
}

/* ── Alert info (admin tournament): dark mode ── */
.alert.alert-info, .alert-info {
    background: rgba(56,189,248,0.08) !important;
    color: var(--color-text) !important;
    border-left: 3px solid #38bdf8 !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

/* ── Standings tops (era backgrounds light yellow/silver/bronze) ── */
.standings-table .top-1 {
    background: linear-gradient(90deg, rgba(251,191,36,0.14), rgba(251,191,36,0.04)) !important;
    color: var(--gold) !important;
}
.standings-table .top-1 td { color: var(--gold) !important; font-weight: 700; }
.standings-table .top-2 {
    background: linear-gradient(90deg, rgba(203,213,225,0.10), rgba(203,213,225,0.02)) !important;
}
.standings-table .top-3 {
    background: linear-gradient(90deg, rgba(217,119,6,0.10), rgba(217,119,6,0.02)) !important;
}

/* ── Force readability on score-win (override club color) ── */
.match-score .score-win,
.match-score .score.score-win { color: var(--accent-trx) !important; }
.match-score .score-lose,
.match-score .score.score-lose { color: var(--color-text-muted) !important; }

/* ── Active tab indicator color in tournament page ── */
.pub-tabs .pub-tab-btn { font-family: var(--font-condensed); letter-spacing: 0.1em; }

/* ═══════════════════════════════════════════════════════════════════
   ADMIN DARK MODE FIXES (Ronda G, 2026-05-27)
   Reemplaza --color-primary (dark teal del club, invisible) por
   --color-text o --accent-trx en títulos y elementos clave del admin.
   ═══════════════════════════════════════════════════════════════════ */

/* Section titles del admin: blanco/lime en vez del teal del club */
.admin-page-title {
    color: var(--color-text) !important;
    font-family: var(--font-condensed);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}
.admin-section h3,
.admin-section h2 {
    color: var(--color-text) !important;
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom-color: var(--color-border) !important;
}
.admin-back-btn:hover {
    background: var(--color-surface-2) !important;
    color: var(--accent-trx) !important;
    border-color: var(--accent-trx) !important;
}

/* Stat cards (dashboard): números héroe en lime */
.stat-value {
    color: var(--accent-trx) !important;
    font-family: var(--font-display);
    font-weight: 400;
}

/* Tournament list cards en admin */
.atc-name {
    color: var(--color-text) !important;
    font-family: var(--font-condensed);
    letter-spacing: 0.04em;
}
.active-badge {
    background: rgba(157,211,12,0.12) !important;
    color: var(--accent-trx) !important;
    border: 1px solid var(--accent-trx-dim);
}
.finished-badge-sm {
    background: rgba(154,161,149,0.10) !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border);
}

/* Tabs del admin: lime en active */
.tab-btn { color: var(--color-text-muted); }
.tab-btn:hover { background: var(--color-surface-2) !important; color: var(--color-text) !important; }
.tab-btn.active {
    background: var(--accent-trx) !important;
    color: #0a0c0a !important;
    box-shadow: 0 0 18px var(--accent-trx-glow);
}

/* Player avatars: gradiente lime en vez del teal-club */
.player-avatar,
.player-avatar-lg {
    background: linear-gradient(135deg, var(--accent-trx) 0%, #7fbe00 100%) !important;
    color: #0a0c0a !important;
    font-weight: 800 !important;
}

/* Player remove hover: rojo dark */
.player-remove:hover {
    background: rgba(239,68,68,0.18) !important;
    color: #fca5a5 !important;
}
.warning-text { color: var(--warn) !important; }

/* Player admin cards: dark surface (override inline #fff) */
.player-admin-card-global {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text);
}
.player-admin-card-global div[style*="color:#999"],
.player-admin-card-global div[style*="color:#aaa"],
.player-admin-card-global div[style*="color:#888"] {
    color: var(--color-text-muted) !important;
}
.player-admin-card-global span[style*="background:#e8f5e9"] {
    background: rgba(157,211,12,0.12) !important;
    color: var(--accent-trx) !important;
}

/* Admin avatar size correction (era 72px, demasiado grande en grid 180px) */
.player-admin-card-global .player-avatar[style*="width:72px"] {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.4rem !important;
}

/* Info-boxes con inline light bg en modals admin */
[style*="background:#f0f9ff"],
[style*="background:#f0f4ff"],
[style*="background:#fff7ed"],
[style*="background:#f0fdf4"],
[style*="background:#e3f2fd"],
[style*="background:#e0f2fe"],
[style*="background:#fef3c7"],
[style*="background:#fefce8"],
[style*="background:#f8fafc"] {
    background: var(--color-surface-2) !important;
}
[style*="border-left:4px solid #0ea5e9"],
[style*="border-left: 4px solid #0ea5e9"],
[style*="border-left:4px solid #1976d2"] {
    border-left-color: var(--accent-trx) !important;
}
[style*="color:#0c4a6e"],
[style*="color:#0d47a1"],
[style*="color:#312e81"],
[style*="color:#1565c0"],
[style*="color:#7c2d12"] {
    color: var(--color-text) !important;
}

/* Override more grays in inline styles */
[style*="color:#888"], [style*="color: #888"],
[style*="color:#999"], [style*="color: #999"],
[style*="color:#aaa"], [style*="color: #aaa"] {
    color: var(--color-text-muted) !important;
}
[style*="color:#333"], [style*="color: #333"] {
    color: var(--color-text) !important;
}
[style*="background:#6366f1"] {
    background: var(--accent-trx) !important;
    color: #0a0c0a !important;
}
[style*="background:#f59e0b"] {
    background: rgba(245,158,11,0.18) !important;
    color: var(--warn) !important;
}

/* Inline thead backgrounds (admin ranking flash table) */
thead[style*="background:#f59e0b"] {
    background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(245,158,11,0.10)) !important;
    color: var(--warn) !important;
}
thead[style*="background:#f59e0b"] th {
    color: var(--warn) !important;
    background: transparent !important;
}

/* Modal contents en dark */
.modal {
    background: var(--color-surface) !important;
    color: var(--color-text);
    border: 1px solid var(--color-border) !important;
}
.modal-header h3 {
    color: var(--color-text) !important;
    font-family: var(--font-condensed);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.modal-overlay {
    background: rgba(0,0,0,0.72) !important;
    backdrop-filter: blur(4px);
}

/* Form controls dark */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="file"],
textarea,
select {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
}
.form-control:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--accent-trx) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(157,211,12,0.18);
}
label, .form-group label, .form-label {
    color: var(--color-text) !important;
}

/* Color picker — dark bg */
input[type="color"] {
    background: var(--color-surface) !important;
    border: 2px solid var(--color-border) !important;
    border-radius: 8px;
    cursor: pointer;
}

/* Card titles en blue (h3 con --color-primary en tournament cards) */
.atc-name a,
.atc-name {
    color: var(--color-text) !important;
}
.card-title, .tournament-card .card-title {
    color: var(--color-text) !important;
}

/* Alert types en dark mode */
.alert {
    background: var(--color-surface) !important;
    color: var(--color-text);
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
}
.alert.alert-success {
    border-left: 3px solid var(--accent-trx) !important;
    background: rgba(157,211,12,0.06) !important;
}
.alert.alert-error, .alert.alert-danger {
    border-left: 3px solid var(--danger) !important;
    background: rgba(239,68,68,0.06) !important;
}
.alert.alert-warning {
    border-left: 3px solid var(--warn) !important;
    background: rgba(245,158,11,0.06) !important;
}

/* Button dark mode tweaks */
.btn-secondary {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border);
}
.btn-secondary:hover {
    background: var(--color-surface-3) !important;
    border-color: var(--accent-trx-dim);
}
.btn-ghost {
    background: transparent !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border);
}
.btn-ghost:hover {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
}
.btn-primary {
    background: var(--accent-trx) !important;
    color: #0a0c0a !important;
    border: none;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.btn-primary:hover {
    background: var(--accent-trx-bright) !important;
    box-shadow: 0 0 24px var(--accent-trx-glow);
}

/* Configuracion sections h2/h3 (overrides admin/configuracion.html) */
.admin-section .admin-section-header h2,
.admin-section .admin-section-header h3 {
    color: var(--color-text) !important;
}

/* Pub tabs en torneo admin (mismas reglas) */
.pub-tabs {
    border-bottom: 1px solid var(--color-border);
}

/* Sidebar overlay solo en mobile */
@media (min-width: 1025px) {
    .sidebar-overlay { display: none !important; }
}

/* Helper: inline strong with #1976d2 etc */
strong[style*="color"] {
    color: inherit !important;
}

/* Type badges (admin tournament cards) — dark mode con accent del tipo */
.atc-type-badge {
    font-family: var(--font-condensed);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
    border: 1px solid currentColor;
}
.atc-type-badge.americano,
.atc-type-badge.largo,
.atc-type-badge.clasico {
    background: rgba(157,211,12,0.10) !important;
    color: var(--accent-trx) !important;
}
.atc-type-badge.flash {
    background: rgba(251,191,36,0.10) !important;
    color: var(--gold) !important;
}
.atc-type-badge.mundial {
    background: rgba(245,158,11,0.10) !important;
    color: var(--warn) !important;
}
.atc-type-badge.liga {
    background: rgba(56,189,248,0.12) !important;
    color: #38bdf8 !important;
}

/* Category badge (admin) — fancy pink-mauve era light, ahora dark */
.atc-cat-badge {
    background: rgba(157,211,12,0.10) !important;
    color: var(--accent-trx) !important;
    font-family: var(--font-condensed);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--accent-trx-dim);
    border-radius: 2px;
}

/* Cat badge overlay sobre player avatar — usar lime accent + dark borde */
.cat-badge-overlay {
    background: var(--accent-trx) !important;
    color: #0a0c0a !important;
    border-color: var(--color-bg) !important;
    font-weight: 800;
}

/* Cat badges masculino/femenino — eran light blue/pink */
.cat-badge-masculino {
    background: rgba(56,189,248,0.18) !important;
    color: #7dd3fc !important;
}
.cat-badge-femenino {
    background: rgba(244,114,182,0.18) !important;
    color: #f9a8d4 !important;
}

/* hero-badge variants */
.hero-badge.flash-badge-light {
    background: rgba(251,191,36,0.18) !important;
    color: var(--gold) !important;
    border-color: var(--gold) !important;
}
.hero-badge.cat-badge-masculino {
    color: #7dd3fc !important;
    border-color: #7dd3fc !important;
}
.hero-badge.cat-badge-femenino {
    color: #f9a8d4 !important;
    border-color: #f9a8d4 !important;
}
.hero-badge.finished-badge-pill {
    background: rgba(154,161,149,0.15) !important;
    color: var(--color-text-muted) !important;
    border-color: var(--color-border) !important;
}

/* match-sets-display: era dark color, fix dark mode */
.match-sets-display {
    color: var(--color-text) !important;
}
.match-sets-display .set {
    background: var(--color-bg-2) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border-soft);
}
.match-sets-display .set.lost {
    color: var(--color-text-muted) !important;
}

/* Walkover badge */
.walkover-badge {
    background: rgba(239,68,68,0.14) !important;
    color: #fca5a5 !important;
    border: 1px solid #fca5a5;
    font-family: var(--font-condensed);
    letter-spacing: 0.12em;
    border-radius: 2px;
}

/* Level badge (suma) */
.level-badge {
    background: var(--accent-trx) !important;
    color: #0a0c0a !important;
    font-weight: 800;
}

/* ─── Sub-pestañas por zona (fase de zonas) ─── */
.zone-tabs {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--color-border);
    margin: 1rem 0 1rem 0;
    padding-bottom: 0;
}
.zone-tab-btn {
    background: transparent;
    color: var(--color-text-muted);
    border: none;
    border-bottom: 3px solid transparent;
    padding: .55rem 1rem .55rem 1rem;
    margin-bottom: -2px;
    font-family: var(--font-condensed, var(--font));
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color .15s, border-color .15s;
}
.zone-tab-btn:hover { color: var(--color-text); }
.zone-tab-btn.active {
    color: var(--accent-trx);
    border-bottom-color: var(--accent-trx);
}
.zone-tab-count {
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: .7rem;
    padding: .12rem .42rem;
    border-radius: 10px;
    font-weight: 700;
}
.zone-tab-btn.active .zone-tab-count {
    background: var(--accent-trx);
    color: #0a0c0a;
}
.zone-pane { display: none; }
.zone-pane.active { display: block; }
.zone-pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .8rem 0;
    border-bottom: 1px dashed var(--color-border-soft);
    margin-bottom: 1rem;
}
.zone-section { margin-bottom: 1rem; }
.zone-subhead {
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted);
    margin: 0 0 .4rem 0;
    font-weight: 700;
}
.zone-pair-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.zone-pair-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 4px;
    padding: .25rem .5rem;
    font-size: .85rem;
}
.zone-pair-seed {
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: .7rem;
    padding: .1rem .35rem;
    border-radius: 3px;
    font-weight: 700;
}
.zone-pair-name { color: var(--color-text); }
.zfix-team-select {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 4px !important;
    padding: .3rem .4rem !important;
    font-size: .85rem !important;
    min-width: 130px;
    max-width: 220px;
}
.zfix-team-select.win { color: var(--accent-trx) !important; font-weight: 700; }

/* set-input field — input limpio, los spinners nativos van OUT y se reemplazan por botones .set-spin afuera */
.set-input {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    width: 44px !important;
    height: 36px !important;
    padding: 0 .25rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-radius: 5px !important;
    -moz-appearance: textfield;
    appearance: textfield;
}
.set-input::-webkit-outer-spin-button,
.set-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.set-input-wrap {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
}
.set-spin {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1px;
}
.set-spin-btn {
    width: 18px;
    height: 17px;
    line-height: 1;
    padding: 0;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 700;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.set-spin-btn:hover {
    background: var(--accent-trx);
    color: #0a0c0a;
    border-color: var(--accent-trx);
}
.set-spin-btn:active { transform: scale(0.92); }

/* Color picker preview - configuracion */
input[type="color"]::-webkit-color-swatch {
    border-radius: 4px;
    border: none;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }

/* "Vista Previa" h2 outside admin-section */
h2 {
    color: var(--color-text);
}

/* Atc / tournament list category badge (the pink "6ta Damas") inline-styled */
.atc-cat-badge,
[class*="cat-badge"] {
    /* defaults */
}

/* Pair admin card hover */
.pair-admin-card { background: var(--color-surface) !important; color: var(--color-text); }
.pair-admin-card:hover { border-color: var(--accent-trx) !important; }

/* Ranking player card dark + lime points */
.ranking-player-card {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text);
}
.ranking-details {
    background: var(--color-bg-2) !important;
    border-top-color: var(--color-border-soft) !important;
}
.ranking-details td, .ranking-details th { color: var(--color-text); }

/* Set-sep */
.set-sep { color: var(--color-text-muted) !important; }

/* VER PUBLICO link en torneo header */
a[href*="/torneo/"][class*="ver-publico"],
.ver-publico-link,
a.ver-publico {
    color: var(--accent-trx) !important;
}

/* Last clean-up: any `color:var(--color-primary)` inline in templates */
[style*="color:var(--color-primary)"],
[style*="color: var(--color-primary)"] {
    color: var(--accent-trx) !important;
}

/* admin/dashboard.html stat-value inline colors */
.stat-card .stat-value[style*="color:#"] { color: var(--accent-trx) !important; }

/* Players grid en admin/jugadores — forzar grid cuando se le pasa grid-template-columns inline */
.players-grid[style*="grid-template-columns"] {
    display: grid !important;
    flex-wrap: initial;
}

/* Player admin card: layout consistente, avatar tamaño contenido */
.player-admin-card-global {
    min-height: 200px;
    text-align: center;
}
.player-admin-card-global .player-avatar {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.25rem !important;
    margin: 0 auto;
}

/* Pair admin card pairs-grid también forzar grid */
.pairs-grid[style*="grid-template-columns"] {
    display: grid !important;
}

/* ── Americano: .score.winner usa lime ── */
.score.winner {
    color: var(--accent-trx) !important;
    text-shadow: 0 0 12px var(--accent-trx-glow);
}
.match-card.completed .pair.pair1:has(+ .match-score-display .score:first-child.winner),
.match-card.completed .pair.pair2 {
    /* fallback: pair names siempre legibles */
}
.pair .player-tag { color: var(--color-text); }

/* ── Sponsor/footer link contrast safety ── */
.footer a { color: var(--accent-trx); opacity: 0.85; }
.footer a:hover { color: var(--accent-trx-bright); opacity: 1; }

/* ── Aviso "reportar error en los datos" por WhatsApp ── */
.data-error-notice {
    display: flex; align-items: center; gap: 0.7rem;
    max-width: 680px; margin: 2rem auto 0.5rem;
    padding: 0.85rem 1.15rem;
    background: rgba(37, 211, 102, 0.10);
    border: 1px solid rgba(37, 211, 102, 0.40);
    border-radius: 12px;
    color: var(--color-text);
    font-size: 0.86rem; line-height: 1.4;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.data-error-notice:hover {
    background: rgba(37, 211, 102, 0.18);
    border-color: rgba(37, 211, 102, 0.7);
    transform: translateY(-1px);
}
.data-error-notice svg { width: 24px; height: 24px; flex-shrink: 0; fill: #25D366; }
.data-error-notice strong { color: #25D366; white-space: nowrap; }

/* ═══════════ Zone fixture cards — formato Excel (PAREJA vs PAREJA + horario) ═══════════ */
.zfix-list { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 0.75rem; }
.zfix-table-caption { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: .4rem; }

.zfix-match {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.8rem 0.7rem;
    position: relative;
}
.zfix-match.played { border-left: 3px solid var(--accent-trx); }

/* horario row (top-right) */
.zfix-when { display: flex; justify-content: flex-start; align-items: center; gap: .35rem; min-height: 1.1rem; overflow: hidden; }
.zfix-when-label { font-size: .58rem; font-weight: 700; letter-spacing: .14em; color: var(--color-text-dim); white-space: nowrap; }
.zfix-time {
    font-size: 0.74rem; font-weight: 700; letter-spacing: .03em;
    color: var(--color-text); background: var(--color-surface-3);
    border: 1px solid var(--color-border); border-radius: 999px;
    padding: 0.1rem 0.55rem; font-variant-numeric: tabular-nums;
}
.zfix-time.empty { color: var(--color-text-dim); border-style: dashed; background: transparent; }

/* teams row: PAREJA A | VS | PAREJA B */
.zfix-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; }
.zfix-team { font-size: 0.9rem; font-weight: 600; color: var(--color-text); line-height: 1.25; text-align: center; }
.zfix-team.right { text-align: right; }
.zfix-team.win { color: var(--accent-trx); font-weight: 800; }
.zfix-bye { font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--color-text-dim); }
.zfix-trophy { margin: 0 0.2rem; }
.zfix-vs {
    font-size: 0.66rem; font-weight: 800; color: var(--color-text-dim);
    letter-spacing: .08em; padding: 0.08rem 0.45rem;
    border: 1px solid var(--color-border-soft); border-radius: 6px; white-space: nowrap;
}

/* results row: RESULTADO A | (sep) | RESULTADO B */
.zfix-scores { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; margin-top: 0.45rem; }
.zfix-res {
    font-family: 'Courier New', monospace; font-weight: 700; font-size: 1.02rem;
    color: var(--color-text); letter-spacing: .14em; font-variant-numeric: tabular-nums;
}
.zfix-res.right { text-align: right; }
.zfix-res.win { color: var(--accent-trx); }
.zfix-res.pending { color: var(--color-text-dim); font-family: inherit; font-weight: 600; letter-spacing: 0; }
.zfix-mid { font-size: 0.68rem; color: var(--color-text-dim); }
.zfix-wo { font-weight: 800; color: var(--color-text-dim); }
.zfix-wo.win { color: var(--accent-trx); }

/* admin editable variant */
.zfix-match.admin .zfix-scores { margin-top: 0.55rem; grid-template-columns: 1fr; justify-items: center; }
.zfix-horario-form { display: flex; align-items: center; gap: .3rem; }
/* Especificidad alta para ganar a input[type="date"] con !important */
input[type="date"].zfix-horario-input,
input[type="text"].zfix-horario-input {
    padding: .22rem .4rem !important; font-size: .8rem !important; text-align: center;
    border: 1px solid var(--color-border) !important; border-radius: 6px !important;
    background: var(--color-surface-2) !important; color: var(--color-text) !important;
    min-width: 0; box-sizing: border-box;
}
input[type="text"].zfix-horario-input::placeholder { color: var(--color-text-dim); }
.zfix-admin-actions { position: absolute; top: .5rem; left: .7rem; }

/* ═══════════════════════════════════════════════════════════════════
   MSCORE — Match scoreboard card (public view)
   Each pair on its own row, set scores aligned in columns.
   Reads like an ATP/WTA broadcast scoreboard: pair → set scores.
   ═══════════════════════════════════════════════════════════════════ */

.zfix-list { display: flex; flex-direction: column; gap: 0.65rem; padding-top: 0.75rem; }

.mscore {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    transition: border-color .18s ease, transform .18s ease;
}
.mscore-played {
    border-left: 3px solid var(--accent-trx);
}
.mscore-bye { opacity: .92; }

/* ── Header bar ─────────────────────────────────────────────── */
.mscore-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .42rem .85rem;
    background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.18) 100%);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    color: var(--color-text-muted);
}
.mscore-clock { color: var(--accent-trx); flex-shrink: 0; }
.mscore-time {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
    font-weight: 700;
}
.mscore-state-tag {
    margin-left: auto;
    text-transform: uppercase;
    font-size: .56rem;
    padding: .15rem .55rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    letter-spacing: .14em;
    color: var(--color-text-dim);
    background: var(--color-bg-2);
}
.mscore-state-done {
    color: var(--accent-trx);
    border-color: rgba(157, 211, 12, .35);
    background: rgba(157, 211, 12, .06);
}
.mscore-state-wo {
    color: #e9b34a;
    border-color: rgba(233, 179, 74, .35);
    background: rgba(233, 179, 74, .07);
}

/* ── Body — pair rows ───────────────────────────────────────── */
.mscore-body { display: flex; flex-direction: column; }

.mscore-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .6rem .85rem;
    position: relative;
}
.mscore-row + .mscore-row {
    border-top: 1px dashed var(--color-border-soft);
}

/* Winning pair row — subtle lime tint flowing from the left */
.mscore-win {
    background: linear-gradient(90deg,
        rgba(157, 211, 12, .10) 0%,
        rgba(157, 211, 12, .025) 55%,
        transparent 100%);
}

.mscore-pair {
    display: flex; align-items: center; gap: .55rem; min-width: 0;
}

.mscore-bullet {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--color-border);
    flex-shrink: 0;
    transition: all .15s ease;
}
.mscore-win .mscore-bullet {
    background: var(--accent-trx);
    border-color: var(--accent-trx);
    box-shadow: 0 0 8px rgba(157, 211, 12, .65);
}

.mscore-name {
    font-size: .95rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.mscore-win .mscore-name {
    color: var(--accent-trx);
    font-weight: 800;
}

/* ── Set columns ────────────────────────────────────────────── */
.mscore-sets {
    display: flex;
    gap: .3rem;
    align-items: center;
    flex-shrink: 0;
}

.mscore-set {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--color-text-muted);
    min-width: 1.85rem;
    height: 1.95rem;
    line-height: 1.95rem;
    text-align: center;
    border-radius: 5px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-soft);
    font-variant-numeric: tabular-nums;
    padding: 0 .25rem;
}
.mscore-set-win {
    color: var(--color-bg);
    background: var(--accent-trx);
    border-color: var(--accent-trx);
    box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 0 12px rgba(157, 211, 12, .25);
}

.mscore-pending {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--color-text-dim);
    min-width: 1.85rem;
    height: 1.95rem;
    line-height: 1.95rem;
    text-align: center;
    border-radius: 5px;
    background: transparent;
    border: 1px dashed var(--color-border-soft);
}

.mscore-flag {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text-dim);
    min-width: 1.85rem;
    text-align: center;
}
.mscore-win .mscore-flag { color: var(--accent-trx); }

/* Walkover badge */
.mscore-wo {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--color-text-dim);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: .22rem .6rem;
    background: var(--color-bg-2);
}
.mscore-wo-win {
    color: var(--color-bg);
    background: var(--accent-trx);
    border-color: var(--accent-trx);
}

/* BYE row tag */
.mscore-bye-tag {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--accent-trx);
    border: 1px solid rgba(157, 211, 12, .35);
    border-radius: 999px;
    padding: .22rem .7rem;
    background: rgba(157, 211, 12, .07);
    text-transform: uppercase;
}

/* ── Mobile tweaks ──────────────────────────────────────────── */
@media (max-width: 540px) {
    .mscore-head { padding: .38rem .7rem; font-size: .62rem; gap: .4rem; }
    .mscore-row { padding: .55rem .7rem; gap: .55rem; }
    .mscore-name { font-size: .88rem; }
    .mscore-set, .mscore-pending {
        font-size: .95rem;
        min-width: 1.65rem;
        height: 1.8rem;
        line-height: 1.8rem;
    }
    .mscore-sets { gap: .25rem; }
    .mscore-state-tag { font-size: .52rem; padding: .12rem .42rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   NAVBAR RESPONSIVE — broadcast topbar adaptive layout
   La navbar pública tiene 9 enlaces + brand + back-link + admin.
   El ancho real requerido (uppercase + condensed + letter-spacing)
   supera los 1300px en muchos clubes. Estrategia en tres tiers:
     · ≥1321px  → diseño espacioso original
     · 1101-1320 → tier compacto, mantiene identidad
     · ≤1100px  → hamburguesa (cubre tablets y laptops chicos)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ampliar contenedor en desktop ───────────────────────────────────
   El max-width: 1100px original del navbar-inner es el causante real
   del overlap incluso en pantallas wide: el contenido se confina a
   1100px centrados aunque haya 1920px disponibles. Ampliamos a 1480px
   para que los 9 enlaces uppercase+condensed + brand + admin respiren. */
@media (min-width: 1101px) {
    .navbar-inner {
        max-width: 1480px;
        padding: 0 1.5rem;
        gap: 0.6rem;
    }
}

/* ── Tier desktop compacto: >=1101px y <1481px ───────────────────────
   Aplica siempre que el navbar todavía esté apretado contra los bordes
   de su contenedor. Mantiene la identidad broadcast (uppercase+condensed)
   con métricas reducidas para que entren los 9 enlaces sin overlap. */
@media (min-width: 1101px) and (max-width: 1480px) {
    .navbar-inner { padding: 0 1rem; }
    .nav-left { gap: 0.5rem; min-width: 0; flex: 0 1 auto; }
    .navbar-brand {
        font-size: 0.95rem;
        letter-spacing: 0.05em;
        min-width: 0;
    }
    .navbar-brand span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 16ch;
    }
    .brand-logo, .brand-icon { width: 32px; height: 32px; }
    .nav-back-main {
        padding: 5px 8px;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
    }
    .nav-back-main .back-label { display: none; }
    .navbar-links { gap: 0.05rem; flex: 0 1 auto; }
    .nav-link {
        padding: 0.45rem 0.6rem;
        font-size: 0.8rem;
        letter-spacing: 0.05em;
    }
    .nav-btn-admin {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
        letter-spacing: 0.05em;
        margin-left: 0.4rem;
    }
    .nav-btn-admin svg { width: 13px; height: 13px; }
}

/* ── Tier desktop wide: >=1481px — diseño espacioso original ────────── */
@media (min-width: 1481px) {
    .navbar-brand span { max-width: 22ch; }
}

/* ── Tier intermedio: muchos clubes con nombre largo todavía se aprietan
   entre 1101 y 1180. Refinamiento extra. ────────────────────────────── */
@media (min-width: 1101px) and (max-width: 1180px) {
    .nav-link {
        padding: 0.45rem 0.42rem;
        font-size: 0.74rem;
        letter-spacing: 0.03em;
    }
    .navbar-brand span { max-width: 10ch; }
}

/* ── Hamburger: ≤1100px (incluye tablets y laptops 11-13") ──────────── */
@media (max-width: 1100px) {
    .navbar-inner { padding: 0 1rem; }
    .navbar-links { display: none; }
    .nav-hamburger { display: flex; }
    .nav-left { gap: 0.5rem; min-width: 0; }
    .nav-back-main {
        padding: 5px 9px;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
    }
    .nav-back-main .back-label { display: none; }
    .navbar-brand {
        font-size: 0.95rem;
        letter-spacing: 0.05em;
        min-width: 0;
        overflow: hidden;
    }
    .navbar-brand span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 22ch;
    }

    /* Dropdown más pulido: aparecerá en tablets, debe sentirse premium */
    .nav-mobile-menu {
        background: rgba(10, 12, 10, 0.96);
        backdrop-filter: saturate(160%) blur(18px);
        -webkit-backdrop-filter: saturate(160%) blur(18px);
        border-top: 1px solid var(--accent-trx-dim);
        box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 1px 0 0 var(--accent-trx-dim) inset;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        padding: 0.65rem 0.9rem 1rem;
        gap: 0.15rem;
        animation: navMenuSlide 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

@keyframes navMenuSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   FIP DOWNLOAD CARD — banner reglamento oficial en página de reglamento
   ═══════════════════════════════════════════════════════════════════ */
.fip-download-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 1.5rem 0 2rem;
    padding: 1.1rem 1.3rem;
    background:
        linear-gradient(135deg, rgba(157,211,12,0.08) 0%, rgba(157,211,12,0.02) 100%),
        rgba(10, 12, 10, 0.6);
    border: 1px solid var(--accent-trx-dim);
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.fip-download-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(157,211,12,0.07), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}
.fip-download-card:hover {
    border-color: var(--accent-trx);
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 0 1px var(--accent-trx-dim), 0 0 24px rgba(157,211,12,0.12);
}
.fip-download-card:hover::before { transform: translateX(100%); }

.fip-dl-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-trx);
    background: rgba(157,211,12,0.08);
    border: 1px solid var(--accent-trx-dim);
    border-radius: 8px;
    box-shadow: inset 0 0 16px rgba(157,211,12,0.06);
}
.fip-dl-body { flex: 1; min-width: 0; }
.fip-dl-eyebrow {
    font-family: var(--font-condensed);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    color: var(--accent-trx);
    margin-bottom: 0.25rem;
}
.fip-dl-title {
    font-family: var(--font-condensed);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.05rem;
    color: var(--color-text);
    line-height: 1.2;
}
.fip-dl-meta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.35rem;
    letter-spacing: 0.02em;
}
.fip-dl-cta {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    background: var(--accent-trx);
    border-radius: 50%;
    transition: transform var(--transition);
    box-shadow: 0 0 16px var(--accent-trx-glow);
}
.fip-download-card:hover .fip-dl-cta { transform: translateX(3px); }

@media (max-width: 600px) {
    .fip-download-card { padding: 0.9rem 1rem; gap: 0.85rem; }
    .fip-dl-icon { width: 44px; height: 44px; }
    .fip-dl-icon svg { width: 22px; height: 22px; }
    .fip-dl-title { font-size: 0.92rem; }
    .fip-dl-eyebrow { font-size: 0.62rem; letter-spacing: 0.1em; }
    .fip-dl-cta { width: 32px; height: 32px; }
}

/* ── Tablet horizontal: ≥641px y ≤1100px — dropdown en columnas ─────── */
@media (min-width: 700px) and (max-width: 1100px) {
    .nav-mobile-menu {
        display: none;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0.85rem 1rem 1.1rem;
        gap: 0.4rem;
    }
    .nav-mobile-menu.open { display: flex; }
    .nav-mobile-back {
        flex: 0 0 100%;
        margin-bottom: 0.3rem;
    }
    .nav-mobile-link {
        flex: 1 1 calc((100% - 1.2rem) / 4);
        min-width: 130px;
        text-align: center;
        border-bottom: 1px solid var(--color-border-soft);
        border-radius: 4px;
    }
    .nav-mobile-admin {
        flex: 0 0 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
}


/* ─── Sistema de ayuda del admin (botón ?, modal contextual y manual) ───────── */
.help-fab {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--accent-trx);
    background: transparent;
    color: var(--accent-trx);
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.help-fab:hover {
    background: var(--accent-trx);
    color: #11140f;
}
.help-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1200;
}
.help-overlay.open { display: block; }
.help-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(680px, calc(100vw - 2rem));
    max-height: min(82vh, 780px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 18px 60px var(--color-shadow);
    z-index: 1201;
    flex-direction: column;
    overflow: hidden;
}
.help-modal.open { display: flex; }
.help-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    background: var(--color-surface-2);
    border-bottom: 2px solid var(--accent-trx);
    color: var(--color-text);
}
.help-modal-header h2 { margin: 0; font-size: 1.05rem; color: var(--accent-trx); }
.help-modal-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    line-height: 1;
}
.help-modal-close:hover { color: var(--color-text); }
.help-modal-body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--color-text);
}
.help-modal-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-border);
    text-align: right;
    flex-shrink: 0;
}
body.help-open { overflow: hidden; }

/* Contenido de ayuda (modal y manual comparten estas clases) */
.help-content { color: var(--color-text); }
.help-content h3 {
    margin: 1.1rem 0 0.35rem;
    font-size: 0.98rem;
    color: var(--accent-trx);
}
.help-content h3:first-child { margin-top: 0; }
.help-content p { margin: 0.4rem 0; }
.help-content a { color: var(--accent-trx); text-decoration: underline; }
.help-content ul, .help-content ol { margin: 0.4rem 0 0.6rem; padding-left: 1.35rem; }
.help-content li { margin: 0.28rem 0; }
.help-content .help-tip {
    background: rgba(157, 211, 12, 0.08);
    border-left: 4px solid var(--accent-trx);
    border-radius: 0 8px 8px 0;
    padding: 0.6rem 0.85rem;
    margin: 0.7rem 0;
}
.help-content .help-warn {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid var(--warn);
    border-radius: 0 8px 8px 0;
    padding: 0.6rem 0.85rem;
    margin: 0.7rem 0;
}
.help-content .help-btn-ref {
    display: inline-block;
    background: var(--color-surface-3);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.05rem 0.45rem;
    font-size: 0.85em;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-text);
}
.help-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.6rem 0;
    font-size: 0.88rem;
}
.help-content table th, .help-content table td {
    border: 1px solid var(--color-border);
    padding: 0.4rem 0.6rem;
    text-align: left;
    vertical-align: top;
}
.help-content table th { background: var(--color-surface-2); color: var(--accent-trx); }

/* Página del manual completo */
.manual-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.manual-toc {
    position: sticky;
    top: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.9rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}
.manual-toc-title {
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}
.manual-toc a {
    display: block;
    padding: 0.32rem 0.55rem;
    border-radius: 7px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.88rem;
}
.manual-toc a:hover { background: var(--color-surface-2); color: var(--accent-trx); }
.manual-toc a.toc-sub { padding-left: 1.3rem; font-size: 0.83rem; color: var(--color-text-muted); }
.manual-body {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem 2rem;
    min-width: 0;
    color: var(--color-text);
}
.manual-body section { scroll-margin-top: 1rem; }
.manual-body h2 {
    color: var(--accent-trx);
    font-size: 1.3rem;
    margin: 2rem 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border);
}
.manual-body section:first-of-type h2 { margin-top: 0.3rem; }
.manual-intro {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}
@media (max-width: 900px) {
    .manual-layout { grid-template-columns: 1fr; }
    .manual-toc { position: static; max-height: none; }
}

/* ── Figuras / diagramas del manual ── */
.manual-figure {
    margin: 1rem 0 1.2rem;
    padding: 0;
}
.manual-figure .fig-frame {
    background: linear-gradient(180deg, var(--color-bg-2), var(--color-bg));
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1rem 1rem 0.85rem;
    overflow-x: auto;
}
.manual-figure svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 720px;
    margin: 0 auto;
}
.manual-figure figcaption {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.35;
}
.manual-figure figcaption strong { color: var(--accent-trx); font-weight: 700; }
.help-content .manual-figure { margin: 0.9rem 0 1rem; }
/* SVG helpers reutilizables en los diagramas */
.dg-box { fill: var(--color-surface-2); stroke: var(--color-border); }
.dg-accent { fill: var(--accent-trx); }
.dg-txt { fill: #f4f6f0; font-family: inherit; }
.dg-muted { fill: #adb3a8; font-family: inherit; }
.dg-line { stroke: #3a4137; }
@media (max-width: 640px) {
    .manual-figure .fig-frame { padding: 0.7rem 0.6rem 0.6rem; }
}

/* ── Carga de resultado por sets (liga/largo): flujo guiado ─────────────────── */
/* ── Carga de resultado por sets (liga/largo): grilla compacta, un tilde por pareja ──
   Nombres en 2 columnas arriba, sets apilados (cómodo en el celular), y una fila
   de tilde: al elegir la pareja ganadora el mayor de cada set se acomoda solo. */
.match-entry { display:flex; flex-direction:column; align-items:stretch; gap:.5rem; min-width:220px; max-width:320px; }
.me-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:.45rem .5rem; align-items:center; }
.me-name { font-size:.8rem; font-weight:700; text-align:center; color:var(--color-text); line-height:1.15;
           padding:.2rem .1rem .3rem; border-bottom:2px solid var(--color-border); word-break:break-word;
           transition:color .12s, border-color .12s; }
.me-name.win { color:var(--accent-trx-bright); border-bottom-color:var(--accent-trx); }
.me-mid { min-width:.5rem; }
.me-setlbl { font-size:.64rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
             color:var(--color-text-dim); text-align:center; white-space:nowrap; }
.me-opt { display:block; font-size:.55rem; font-weight:600; letter-spacing:0; text-transform:none;
          color:var(--color-text-muted); opacity:.8; }
.me-g { width:100%; max-width:72px; justify-self:center; height:46px; text-align:center; font-size:1.2rem; font-weight:700;
        border:1px solid var(--color-border); border-radius:8px; background:var(--color-bg-2); color:var(--color-text); }
.me-g:focus { outline:none; border-color:var(--accent-trx); box-shadow:0 0 0 2px var(--accent-trx-glow); }
.me-g::-webkit-outer-spin-button, .me-g::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.me-g[type=number] { -moz-appearance:textfield; appearance:textfield; }
.me-pick { justify-self:stretch; padding:.55rem .4rem; border:1.5px solid var(--color-border); border-radius:8px;
           background:var(--color-surface-3); color:var(--color-text); font-weight:700; font-size:.8rem;
           cursor:pointer; line-height:1.15; transition:background .12s, border-color .12s; word-break:break-word; }
.me-pick:hover, .me-pick:focus { border-color:var(--accent-trx); outline:none; }
.me-pick.sel { background:var(--accent-trx); border-color:var(--accent-trx); color:#11140f; }
.me-pick.sel::before { content:"\2713 "; font-weight:900; }
.me-picklbl { font-size:.64rem; color:var(--color-text-muted); text-align:center; white-space:nowrap; }
.me-dash { color:var(--color-text-muted); font-weight:400; }
.me-err { color:var(--danger); font-size:.74rem; margin-top:.15rem; min-height:0; text-align:center; }
.me-err:empty { display:none; }
.me-summary { font-size:.86rem; color:var(--color-text-muted); text-align:center; min-height:0; }
.me-summary.ready { color:var(--color-text); background:rgba(157,211,12,.10); border:1px solid var(--accent-trx-dim);
                    border-radius:6px; padding:.4rem .5rem; }
.me-summary .me-sum-sets { color:var(--color-text-muted); font-weight:400; }
.me-actions { display:flex; justify-content:center; }
.me-confirm:disabled { opacity:.45; cursor:not-allowed; }