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

/* =========================================================================
   The Mythical League — Modern Design System v2
   Verde profundo · Crema · Dorado · Tipografía Inter + Plus Jakarta Sans
   ========================================================================= */

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

/* Los drawers fixed se deslizan fuera del viewport sin crear scroll global. */
html,
body {
    overflow-x: clip;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: fixed;
    inset-block-start: var(--space-3, 0.75rem);
    inset-inline-start: var(--space-3, 0.75rem);
    z-index: 10000;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    color: var(--myth-paper-light, #faf5e8);
    background: var(--myth-night, #01172d);
    border: 2px solid var(--myth-blue, #08789a);
    box-shadow: 4px 4px 0 var(--myth-red, #b43724);
    font-weight: 800;
    transform: translateY(calc(-100% - 2rem));
    transition: transform var(--t-fast, 120ms) ease-out;
}

.skip-link:focus {
    transform: translateY(0);
}

body.dialog-open {
    overflow: hidden;
}

:root {
    color-scheme: light;

    /* Primitive brand palette: programa de partido impreso. */
    --myth-night: #01172d;
    --myth-navy: #08263b;
    --myth-navy-2: #10354e;
    --myth-paper: #f2e7cd;
    --myth-paper-light: #faf5e8;
    --myth-cream: #e8d4aa;
    --myth-red: #b43724;
    --myth-red-dark: #8d2417;
    --myth-blue: #08789a;
    --myth-blue-dark: #025b7d;
    --myth-gold: #d5a23e;
    --myth-ink: #111b24;
    --myth-muted: #647079;
    --myth-rule: #c9bda4;
    --myth-white: #fffdf7;

    /* Stacking contract for shared navigation, floating actions and dialogs. */
    --myth-z-bottom-nav: 50;
    --myth-z-cta: 900;
    --myth-z-nav: 1000;
    --myth-z-drawer: 1200;
    --myth-z-dialog: 1300;
    --myth-z-moment: 1400;
    --myth-z-toast: 1500;

    /* ----- Football Modern palette ----- */
    /* Deep navy (from retro logo) */
    --field-green: var(--myth-night);
    --field-green-dark: #000e1d;
    --field-green-light: var(--myth-navy-2);
    --field-green-darker: #000914;

    /* Logo brand colors (navy + red + cream) */
    --brand-navy: var(--myth-night);
    --brand-blue: var(--myth-blue);
    --brand-silver: #c6d0d5;
    --brand-red: var(--myth-red);
    --brand-cream: var(--myth-paper);

    /* Surfaces - cream tones (retro) */
    --surface: var(--myth-white);
    --surface-alt: #eee4cf;
    --bg: var(--myth-paper);
    --bg-deep: var(--myth-night);

    /* Ink (charcoal) */
    --ink: #313b43;
    --ink-strong: var(--myth-ink);
    --ink-muted: var(--myth-muted);
    --ink-soft: #7d878d;
    --line-white: var(--myth-paper-light);

    /* Borders */
    --border: var(--myth-rule);
    --border-strong: #a99b80;
    --border-subtle: #ddd2bc;

    /* Accents - retro red + warm gold */
    --accent-gold: var(--myth-red);
    --accent-gold-dark: var(--myth-red-dark);
    --accent-gold-light: #e35a43;
    --accent-amber: var(--myth-gold);
    --accent-red: var(--myth-red);
    --accent-red-dark: var(--myth-red-dark);
    --accent-blue: var(--myth-blue);

    /* Semantic states: color communicates the state, text names it. */
    --state-success: #176b42;
    --state-success-surface: #e7f5ed;
    --state-warning: #765a12;
    --state-warning-surface: #fff4d6;
    --state-danger: #8d2417;
    --state-danger-surface: #fbeae8;
    --state-info: #075b76;
    --state-info-surface: #e8f3f7;
    --state-neutral: #59666d;
    --state-neutral-surface: #edf0ef;
    --state-live: var(--myth-red);
    --state-finished: var(--state-success);
    --state-disabled: #8a918f;

    /* Position colors */
    --pos-por: #c89b3c;
    --pos-def: #1e4ea8;
    --pos-med: #1d6b4a;
    --pos-del: #b8332a;

    /* ----- Typography ----- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Bebas Neue', 'Oswald', 'Inter', -apple-system, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

    /* Canon editorial Myth: Gaceta fija esta escala en las superficies de liga. */
    --myth-font-display: 'Bitter', Georgia, serif;
    --myth-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --myth-font-label: 'Oswald', sans-serif;
    --myth-size-display: clamp(3.5rem, 6vw, 6rem);
    --myth-size-h1: clamp(2.75rem, 5vw, 5rem);
    --myth-size-h2: clamp(2rem, 3.8vw, 3.3rem);
    --myth-size-h3: 1.35rem;
    --myth-size-body: 0.95rem;
    --myth-size-meta: 0.75rem;
    --myth-size-label: 0.68rem;
    --myth-content-wide: 1380px;
    --myth-content-gutter: 42px;

    /* ----- Spacing scale ----- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* ----- Radii ----- */
    --radius-xs: 0;
    --radius-sm: 2px;
    --radius: 3px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-pill: 9999px;

    /* ----- Shadows (paper, multi-layer) ----- */
    --shadow-xs: 2px 2px 0 rgba(1, 23, 45, 0.08);
    --shadow-sm: 3px 3px 0 rgba(1, 23, 45, 0.11);
    --shadow: 4px 4px 0 rgba(1, 23, 45, 0.12);
    --shadow-md: 5px 5px 0 rgba(1, 23, 45, 0.14);
    --shadow-lg: 7px 7px 0 rgba(1, 23, 45, 0.16);
    --shadow-xl: 10px 10px 0 rgba(1, 23, 45, 0.18);
    --shadow-card: 4px 4px 0 rgba(1, 23, 45, 0.1);
    --shadow-focus: 0 0 0 3px rgba(8, 120, 154, 0.27);
    --shadow-focus-gold: 0 0 0 3px rgba(180, 55, 36, 0.24);

    /* ----- Motion ----- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 120ms;
    --t-base: 180ms;
    --t-slow: 280ms;
    --transition-standard: color var(--t-fast) var(--ease), background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
    --content-max: 1200px;
    --measure-copy: 72ch;
    --touch-target: 44px;

    /* ----- Backwards-compat aliases ----- */
    --primary: var(--field-green);
    --primary-dark: var(--field-green-dark);
    --secondary: var(--field-green-light);
    --danger: var(--accent-red);
    --warning: var(--accent-amber);
    --dark: var(--ink);
    --light: var(--surface-alt);
    --white: var(--surface);
    --text: var(--ink-muted);
}

/* =========================================================================
   Base
   ========================================================================= */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    background-image:
        radial-gradient(1200px 600px at 100% -10%, rgba(20, 84, 58, 0.06), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(200, 155, 60, 0.05), transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink-strong);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

h1 {
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h4 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}

p { line-height: 1.65; }

a {
    color: var(--field-green);
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
}

a:hover {
    color: var(--field-green-dark);
}

::selection {
    background: var(--field-green);
    color: var(--line-white);
}

:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-xs);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.dark-toggle {
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(242, 227, 191, 0.45);
    border-radius: 999px;
    background: transparent;
    color: var(--cream, #f2e3bf);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.dark-toggle:hover,
.dark-toggle:focus-visible { background: rgba(242, 227, 191, 0.14); }

/* Shared composition and state patterns. */
.js-hidden,
.is-hidden {
    display: none;
}

.page-heading {
    margin-bottom: var(--space-4);
    text-align: center;
}

.page-intro {
    margin-bottom: var(--space-8);
    color: var(--ink-muted);
    text-align: center;
}

.centered-state {
    padding: var(--space-8);
    color: var(--ink-muted);
    text-align: center;
}

.text-muted-strong {
    color: var(--ink-muted);
    font-weight: 500;
}

.is-emphasized {
    font-weight: 800;
}

.inline-error {
    max-width: 720px;
    margin: 0 auto var(--space-6);
    padding: var(--space-4);
    border: 1px solid rgba(184, 51, 42, 0.25);
    border-radius: var(--radius-sm);
    background: rgba(184, 51, 42, 0.08);
    color: var(--accent-red-dark);
    text-align: center;
}

.load-error strong,
.load-error p {
    display: block;
}

.load-error p {
    max-width: 60ch;
    margin: var(--space-2) auto var(--space-4);
}

.load-error .btn-secondary {
    min-height: 44px;
}

.classification-summary {
    max-width: 720px;
    margin: 0 auto var(--space-8);
    border-left-color: var(--field-green);
}

.state-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
    color: var(--ink-muted);
    font-size: 0.8rem;
}

.state-legend-centered {
    justify-content: center;
    margin-top: 0;
    margin-bottom: var(--space-6);
}

.state-legend > span {
    display: inline-flex;
    align-items: center;
}

.state-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

.state-dot.is-unavailable { background: #e74c3c; }
.state-dot.is-pending { background: #95a5a6; }
.state-dot.is-open { background: #f39c12; }
.state-dot.is-complete { background: #278a4e; }

/* =========================================================================
   Navbar — styles moved to header-retro.css (loaded dynamically)
   ========================================================================= */

/* Logo, nav-menu, nav-link — see header-retro.css */

/* Hamburger — see header-retro.css */

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
    background:
        radial-gradient(800px 400px at 100% 0%, rgba(192, 57, 43, 0.15), transparent 60%),
        linear-gradient(135deg, #0a2e1a 0%, #0d3d22 60%, #1a4a2e 100%);
    color: var(--line-white);
    padding: var(--space-16) 0 var(--space-12);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5.5vw, 3.75rem);
    font-weight: 700;
    color: var(--line-white);
    margin-bottom: var(--space-3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.2);
}

.hero p {
    font-size: 1.125rem;
    margin-bottom: var(--space-10);
    opacity: 0.85;
    color: var(--line-white);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
    max-width: 720px;
    margin: 0 auto;
}

.hero .stat-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.hero .stat-card:hover {
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-2px);
}

.hero .stat-card h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-gold-light);
    margin-bottom: var(--space-1);
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum';
}

.hero .stat-card p {
    font-size: 0.85rem;
    opacity: 0.85;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* =========================================================================
   Sections
   ========================================================================= */

.section {
    padding: var(--space-16) 0;
}

.section.bg-light {
    background: var(--surface-alt);
    border-block: 1px solid var(--border-subtle);
}

.section h2 {
    text-align: center;
    margin-bottom: var(--space-10);
    position: relative;
}

.section h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--field-green), var(--accent-gold));
    border-radius: var(--radius-pill);
    margin: var(--space-3) auto 0;
}

.kpis-section {
    padding: var(--space-12) 0 var(--space-8);
}

.kpis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}

/* =========================================================================
   Cards (generic)
   ========================================================================= */

.regla-card,
.info-card,
.gasto-card,
.baja-card,
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.regla-card:hover,
.info-card:hover,
.gasto-card:hover,
.baja-card:hover,
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

.regla-card h3,
.info-card h4,
.gasto-card h4,
.baja-card h4 {
    color: var(--ink-strong);
    margin-bottom: var(--space-2);
}

.regla-card p,
.info-card p,
.gasto-card p,
.baja-card p {
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Reglas */
.reglas-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
}

.regla-card {
    border-top: 3px solid var(--field-green);
}

.regla-card h3 {
    font-size: 1.1rem;
}

/* Info cards (subasta) */
.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.info-card {
    border-color: var(--accent-gold);
    padding: var(--space-5);
}

.info-card h4 {
    font-size: 0.95rem;
    color: var(--ink-strong);
}

.info-card p {
    color: var(--field-green);
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: var(--space-1);
}

/* Gastos */
.resumen-gastos {
    margin-top: var(--space-10);
}

.resumen-gastos h3 {
    margin-bottom: var(--space-5);
}

.gastos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}

.gasto-card {
    text-align: center;
    padding: var(--space-5);
}

.gasto-card h4 {
    color: var(--field-green);
    font-size: 1rem;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gasto-card .jugadores-count {
    font-size: 0.8rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-1);
}

.gasto-card .gasto-total {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ink-strong);
    font-feature-settings: 'tnum';
    letter-spacing: -0.01em;
}

/* Bajas */
.bajas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.baja-card {
    border-color: var(--accent-red);
    padding: var(--space-5);
}

.baja-card h4 {
    color: var(--accent-red-dark);
    font-size: 0.95rem;
    margin-bottom: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Subasta selector */
.subasta-selector {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
    background: var(--surface);
    padding: var(--space-2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.subasta-btn {
    padding: var(--space-2) var(--space-5);
    background: transparent;
    color: var(--ink-muted);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-base) var(--ease);
    letter-spacing: 0.01em;
}

.subasta-btn:hover {
    color: var(--ink-strong);
    background: var(--surface-alt);
}

.subasta-btn.active {
    background: var(--field-green);
    color: var(--line-white);
    box-shadow: var(--shadow-sm);
}

.subasta-content {
    display: none;
}

.subasta-content.active {
    display: block;
}

.subasta-info h3 {
    margin-bottom: var(--space-2);
}

.ronda {
    margin-bottom: var(--space-8);
}

.ronda h4 {
    color: var(--field-green);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    font-weight: 700;
}

/* =========================================================================
   Tables (clasificación, draft, fichajes, admin)
   ========================================================================= */

.table-container,
.draft-table-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.clasificacion-table,
.draft-table,
.fichajes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.clasificacion-table thead,
.draft-table thead,
.fichajes-table thead {
    background: linear-gradient(180deg, var(--field-green-dark), var(--field-green));
    color: var(--line-white);
}

.clasificacion-table th,
.draft-table th,
.fichajes-table th {
    padding: var(--space-4) var(--space-4);
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.92);
}

.clasificacion-table td,
.draft-table td,
.fichajes-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--ink);
    vertical-align: middle;
}

.clasificacion-table tbody tr:nth-child(even),
.draft-table tbody tr:nth-child(even),
.fichajes-table tbody tr:nth-child(even) {
    background: var(--surface-alt);
}

.clasificacion-table tbody tr:hover,
.draft-table tbody tr:hover,
.fichajes-table tbody tr:hover {
    background: rgba(20, 84, 58, 0.05);
}

.clasificacion-table tbody tr:last-child td,
.draft-table tbody tr:last-child td,
.fichajes-table tbody tr:last-child td {
    border-bottom: none;
}

/* Numeric columns: right-align */
.clasificacion-table td:nth-child(1),
.clasificacion-table th:nth-child(1) { width: 56px; text-align: center; font-weight: 700; color: var(--ink-muted); font-feature-settings: 'tnum'; }
.clasificacion-table td:nth-child(4),
.clasificacion-table td:nth-child(5),
.clasificacion-table td:nth-child(6),
.clasificacion-table th:nth-child(4),
.clasificacion-table th:nth-child(5),
.clasificacion-table th:nth-child(6) {
    text-align: right;
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
}

.clasificacion-table td:nth-child(5) {
    font-weight: 700;
    color: var(--ink-strong);
}

/* Top 3 highlights */
.clasificacion-table tbody tr:nth-child(1) td:first-child { color: var(--accent-gold-dark); }
.clasificacion-table tbody tr:nth-child(2) td:first-child { color: var(--ink-muted); }
.clasificacion-table tbody tr:nth-child(3) td:first-child { color: #b87333; }

.draft-table td:nth-child(1),
.draft-table th:nth-child(1) { width: 64px; text-align: center; font-weight: 700; color: var(--ink-muted); font-feature-settings: 'tnum'; }
.draft-table td:last-child,
.draft-table th:last-child {
    text-align: right;
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.empty-state {
    text-align: center;
    color: var(--ink-soft);
    font-style: italic;
    padding: var(--space-10) var(--space-4) !important;
}

/* =========================================================================
   Position Badges (POR / DEF / MED / DEL)
   ========================================================================= */

.pos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid transparent;
}

.pos-badge.por {
    background: rgba(200, 155, 60, 0.12);
    color: var(--pos-por);
    border-color: rgba(200, 155, 60, 0.25);
}

.pos-badge.def {
    background: rgba(30, 78, 168, 0.10);
    color: var(--pos-def);
    border-color: rgba(30, 78, 168, 0.20);
}

.pos-badge.med {
    background: rgba(29, 107, 74, 0.10);
    color: var(--pos-med);
    border-color: rgba(29, 107, 74, 0.20);
}

.pos-badge.del {
    background: rgba(184, 51, 42, 0.10);
    color: var(--pos-del);
    border-color: rgba(184, 51, 42, 0.20);
}

/* =========================================================================
   Search & Filter
   ========================================================================= */

.search-filter {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.search-input,
.filter-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    background: var(--surface);
    color: var(--ink);
    transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
    min-width: 0;
}

.search-input::placeholder,
input::placeholder {
    color: var(--ink-soft);
}

.search-input:hover,
.filter-select:hover {
    border-color: var(--border-strong);
}

.search-input:focus,
.filter-select:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--field-green);
    box-shadow: var(--shadow-focus);
}

.search-filter .search-input {
    flex: 1;
    min-width: 220px;
}

.search-filter .filter-select {
    min-width: 180px;
}

/* =========================================================================
   Equipos
   ========================================================================= */

.equipos-selector {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var(--space-8);
}

.equipo-btn {
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    color: var(--ink-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-base) var(--ease);
}

.equipo-btn:hover {
    color: var(--ink-strong);
    border-color: var(--field-green);
}

.equipo-btn.active {
    background: var(--field-green);
    color: var(--line-white);
    border-color: var(--field-green);
    box-shadow: var(--shadow-sm);
}

.equipos-view {
    display: none;
}

.equipos-view.active {
    display: block;
}

.equipos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-5);
}

.equipo-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-card);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.equipo-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* =========================================================================
   Footer
   ========================================================================= */

.footer {
    background: #031F16;
    color: rgba(184, 199, 190, 0.7);
    padding: var(--space-10) 0;
    text-align: center;
    font-size: 0.875rem;
    border-top: 3px solid #0E6F8F;
}

.footer p {
    margin-bottom: var(--space-1);
}

.footer p:first-child {
    color: rgba(242, 227, 191, 0.85);
    font-weight: 600;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-4);
    }

    /* Hamburger menu */
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--field-green-dark);
        flex-direction: column;
        padding: var(--space-4);
        gap: var(--space-2);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 100;
    }
    .nav-menu.open {
        display: flex;
    }
    .nav-menu li { width: 100%; }
    .nav-menu .nav-link {
        display: block;
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-sm);
    }

    .hamburger { display: flex; }
    .navbar .container { position: relative; }

    .section { padding: var(--space-8) 0; }
    .hero { padding: var(--space-8) 0 var(--space-6); }
    .hero h1 { font-size: 1.6rem; }
    .hero-stats { flex-direction: column; gap: var(--space-3); }
    .stat-card { min-width: auto; }

    /* KPIs */
    .kpis-grid { grid-template-columns: 1fr 1fr !important; gap: var(--space-3) !important; }

    /* Tablas */
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .clasificacion-table th,
    .clasificacion-table td,
    .draft-table th,
    .draft-table td,
    .fichajes-table th,
    .fichajes-table td {
        padding: var(--space-1) var(--space-2);
        font-size: 0.78rem;
        white-space: nowrap;
    }

    /* Ocultar columna Código en clasificación móvil */
    .clasificacion-table th:nth-child(3),
    .clasificacion-table td:nth-child(3) { display: none; }

    /* Calendario */
    .jornadas-grid { grid-template-columns: 1fr !important; }
    .vueltas-tabs {
        overflow-x: auto; flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch; padding-bottom: var(--space-2);
    }
    .vuelta-tab { white-space: nowrap; flex-shrink: 0; }

    /* Plantillas */
    .plantilla-grid { grid-template-columns: 1fr !important; }
    .plantilla-col { border-right: 0 !important; border-bottom: 1px solid var(--border-subtle); }
    .manager-selector {
        overflow-x: auto; flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch; justify-content: flex-start;
        padding-bottom: var(--space-2);
    }
    .manager-btn { white-space: nowrap; flex-shrink: 0; }

    /* Mercado */
    .mercado-tabs { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
    .mercado-tab { white-space: nowrap; flex-shrink: 0; }
    .bajas-grid { grid-template-columns: 1fr !important; }

    /* Puntuaciones */
    .pts-grid { grid-template-columns: 1fr 1fr !important; }
    .matchup-body { grid-template-columns: 1fr !important; }
    .matchup-body > .lado + .lado { border-left: 0 !important; border-top: 1px solid var(--border-subtle); }

    /* Reglas: sin sidebar, secciones apiladas */
    .reglas-grid { grid-template-columns: 1fr !important; }
    .reglas-toc { position: static !important; display: none; }
    .reglas-content section { margin-bottom: var(--space-4); padding: var(--space-4); }

    /* Palmarés */
    .palmares-table thead th,
    .palmares-table tbody td { padding: var(--space-1) var(--space-2); font-size: 0.75rem; }
    .pos-cell { min-width: 22px; height: 22px; font-size: 0.7rem; }

    /* Equipos selector (legacy) */
    .equipos-selector { gap: var(--space-1); }
    .equipo-btn { font-size: 0.8rem; padding: var(--space-1) var(--space-3); }
}

@media (max-width: 480px) {
    .kpis-grid { grid-template-columns: 1fr !important; }
    .pts-grid { grid-template-columns: 1fr !important; }
    .hero h1 { font-size: 1.3rem; }
    .plantilla-header h2 { font-size: 1.2rem; }
}


/* =========================================================================
   Dark Mode
   ========================================================================= */
html.dark {
    --surface: #1a1a2e;
    --surface-alt: #16213e;
    --border: #2a2a4a;
    --border-subtle: #252545;
    --ink-strong: #e8e8f0;
    --ink-muted: #a0a0b8;
    --ink-soft: #6a6a88;
    --shadow-card: 0 2px 8px rgba(0,0,0,0.4);
    --line-white: #f0f0f8;
}
html.dark body { background: #0f0f1a; color: var(--ink-strong); }
html.dark .navbar { background: #0a1628; }
html.dark .footer { background: #0a1628; }
html.dark .hero { background: linear-gradient(135deg, #0a1628 0%, #1a1a2e 100%); }
html.dark .kpis-section { background: var(--surface-alt); }
html.dark .section.bg-light { background: var(--surface-alt); }
html.dark input, html.dark select, html.dark textarea {
    background: var(--surface); color: var(--ink-strong); border-color: var(--border);
}
html.dark .matchup-header { background: linear-gradient(180deg, #0a1628, #16213e); }
html.dark .clasificacion-table thead th,
html.dark .fichajes-table thead th,
html.dark .palmares-table thead th {
    background: linear-gradient(180deg, #0a1628, #16213e);
}

/* =========================================================================
   Loading Skeletons
   ========================================================================= */

@keyframes skeleton-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 0.3; }
    100% { opacity: 0.6; }
}

.skeleton {
    background: linear-gradient(90deg, var(--border-subtle) 25%, var(--border) 50%, var(--border-subtle) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 80%;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 60%; }

.skeleton-row {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.skeleton-cell {
    height: 16px;
    border-radius: var(--radius-xs);
}

.skeleton-cell.w1 { width: 40px; }
.skeleton-cell.w2 { width: 80px; }
.skeleton-cell.w3 { width: 120px; flex: 1; }

/* =========================================================================
   Smooth Animations & Transitions
   ========================================================================= */

/* Fade-in for sections */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeInUp 0.3s var(--ease) both;
}

/* Staggered children */
.stagger > * {
    animation: fadeInUp 0.3s var(--ease) both;
}
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 250ms; }

/* Smooth page transitions */
.admin-section,
.vuelta-panel,
.subasta-content {
    transition: opacity 0.2s var(--ease);
}

/* Card hover lift */
.equipo-card,
.participante-card,
.kpi-card,
.matchup-card {
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

/* Position delta indicators in clasificacion */
.pos-delta {
    display: inline-block;
    font-size: 0.7rem;
    margin-left: 4px;
    font-weight: 700;
}
.pos-delta.pos-up { color: #27ae60; }
.pos-delta.pos-down { color: #e74c3c; }

/* Manager cell in clasificacion */
.manager-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* =========================================================================
   Notification Toast (global)
   ========================================================================= */

.notification {
    position: fixed;
    top: 16px;
    right: 16px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 10000;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    box-shadow: var(--shadow-md);
    max-width: 360px;
}
.notification.show {
    opacity: 1;
    transform: translateX(0);
}
.notification-success { background: #27ae60; color: white; }
.notification-error { background: #e74c3c; color: white; }
.notification-warning { background: #f39c12; color: white; }

/* =========================================================================
   Escudo mini (used in tables and lists)
   ========================================================================= */

.escudo-mini {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
}

.equipo-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* =========================================================================
   Activity Feed
   ========================================================================= */

.activity-feed {
    max-width: 640px;
    margin: 0 auto;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--field-green);
    background: var(--surface);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    box-shadow: var(--shadow-xs);
    animation: fadeInUp 0.3s var(--ease) both;
}

.activity-item .icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.activity-item .content {
    flex: 1;
}

.activity-item .text {
    font-size: 0.9rem;
    color: var(--ink-strong);
    font-weight: 500;
}

.activity-item .time {
    font-size: 0.75rem;
    color: var(--ink-soft);
    margin-top: 2px;
}

html.dark .activity-item {
    background: var(--surface);
    border-left-color: var(--field-green-light);
}

/* =========================================================================
   Empty States (illustrated)
   ========================================================================= */

.empty-state-box {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--ink-muted);
}

.empty-state-box .empty-icon {
    font-size: 3.5rem;
    margin-bottom: var(--space-4);
    opacity: 0.6;
    display: block;
}

.empty-state-box .empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-strong);
    margin-bottom: var(--space-2);
}

.empty-state-box .empty-desc {
    font-size: 0.9rem;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}

/* =========================================================================
   Clasificacion: highlight logged-in user row
   ========================================================================= */

.clasificacion-table tbody tr.my-row {
    background: rgba(20, 84, 58, 0.08) !important;
    box-shadow: inset 0 2px 0 var(--field-green), inset 0 -2px 0 var(--field-green);
}

html.dark .clasificacion-table tbody tr.my-row {
    background: rgba(20, 84, 58, 0.2) !important;
}

/* =========================================================================
   View Transitions (for browsers that support it)
   ========================================================================= */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 200ms ease both fade-out;
}

::view-transition-new(root) {
    animation: 200ms ease both fade-in;
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =========================================================================
   Dark mode: scroll-top button
   ========================================================================= */

html.dark #scroll-top-btn {
    background: #27ae60;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* =========================================================================
   Gradient Text (Hero title)
   ========================================================================= */

.gradient-text {
    color: var(--brand-silver);
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* =========================================================================
   Glassmorphism Cards
   ========================================================================= */

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

html.dark .glass-card {
    background: rgba(26, 26, 46, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

/* =========================================================================
   LIVE Badge (pulsating)
   ========================================================================= */

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.live-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc2626;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* =========================================================================
   Gradient Border (matchup cards with results)
   ========================================================================= */

.matchup-card.has-result {
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.matchup-card.has-result::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-lg) + 2px);
    background: linear-gradient(135deg, var(--field-green), var(--accent-gold));
    z-index: -1;
}

/* =========================================================================
   Manager Avatar (initials circle)
   ========================================================================= */

.manager-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Unique colors per manager (assigned by index) */
.manager-avatar.c0 { background: #14543a; }
.manager-avatar.c1 { background: #1e4ea8; }
.manager-avatar.c2 { background: #b8332a; }
.manager-avatar.c3 { background: #8b5cf6; }
.manager-avatar.c4 { background: #d97706; }
.manager-avatar.c5 { background: #0891b2; }
.manager-avatar.c6 { background: #be185d; }
.manager-avatar.c7 { background: #4338ca; }

.manager-avatar.sm { width: 24px; height: 24px; font-size: 0.6rem; }

/* =========================================================================
   Table Micro-interactions
   ========================================================================= */

.clasificacion-table tbody tr {
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.clasificacion-table tbody tr:hover {
    transform: translateX(4px);
    box-shadow: -4px 0 0 var(--field-green);
    background: rgba(20, 84, 58, 0.06);
}

/* =========================================================================
   Count-up animation (numbers)
   ========================================================================= */

[data-countup] {
    transition: opacity 0.3s ease;
}

/* =========================================================================
   Mini clasificación in navbar
   ========================================================================= */

.nav-position-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.12);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-gold-light);
    margin-left: var(--space-2);
}

.nav-position-badge .pos-num {
    font-size: 0.85rem;
    font-weight: 900;
}

/* =========================================================================
   Confetti animation
   ========================================================================= */

@keyframes confettiFall {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
    position: fixed;
    top: -10px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    animation: confettiFall 3s ease-in forwards;
    z-index: 99999;
    pointer-events: none;
}

/* =========================================================================
   Swipe indicator (mobile)
   ========================================================================= */

.swipe-hint {
    display: none;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.75rem;
    padding: var(--space-2);
    opacity: 0.7;
}

@media (max-width: 768px) {
    .swipe-hint { display: block; }
}

/* =========================================================================
   Parallax Hero
   ========================================================================= */

.hero {
    position: relative;
    overflow: hidden;
}

.hero .container {
    position: relative;
    z-index: 2;
}

/* Parallax handled by JS: .hero-bg moves slower */
.hero-bg {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(800px 400px at 100% 0%, rgba(200, 155, 60, 0.18), transparent 60%),
        linear-gradient(135deg, var(--field-green-dark) 0%, var(--field-green) 60%, var(--field-green-light) 100%);
    z-index: 0;
    will-change: transform;
}

/* =========================================================================
   Particle Background
   ========================================================================= */

.particles-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% { transform: translateY(100vh) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-10vh) translateX(30px); opacity: 0; }
}

/* =========================================================================
   Podium (Palmarés top 3)
   ========================================================================= */

.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    padding: var(--space-6) 0;
}

.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
}

.podium-place:hover { transform: translateY(-4px); }

.podium-block {
    width: 120px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-4) var(--space-3);
    color: white;
    font-weight: 800;
    position: relative;
    overflow: hidden;
}

.podium-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 60%);
}

.podium-1st .podium-block {
    height: 160px;
    background: linear-gradient(180deg, #c89b3c, #a87d27);
    box-shadow: 0 4px 20px rgba(200, 155, 60, 0.4);
}

.podium-2nd .podium-block {
    height: 120px;
    background: linear-gradient(180deg, #8a909c, #5c6371);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.podium-3rd .podium-block {
    height: 90px;
    background: linear-gradient(180deg, #b87333, #8b5a2b);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.podium-name {
    font-size: 0.9rem;
    margin-top: var(--space-2);
    color: var(--ink-strong);
    font-weight: 700;
}

.podium-pos {
    font-size: 2rem;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.podium-pts {
    font-size: 0.75rem;
    opacity: 0.9;
    margin-top: 4px;
}

.podium-trophy { font-size: 1.5rem; margin-bottom: 4px; }

@media (max-width: 480px) {
    .podium-block { width: 90px; }
    .podium-1st .podium-block { height: 120px; }
    .podium-2nd .podium-block { height: 90px; }
    .podium-3rd .podium-block { height: 70px; }
    .podium-name { font-size: 0.75rem; }
}

/* =========================================================================
   Ranking Animation (leaderboard reorder)
   ========================================================================= */

.clasificacion-table tbody tr {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.15s ease,
                box-shadow 0.15s ease,
                opacity 0.3s ease;
}

.clasificacion-table tbody tr.rank-enter {
    animation: rankSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes rankSlideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* =========================================================================
   Manager Theme Colors (accent per manager)
   ========================================================================= */

[data-manager-theme="CARLOS"]    { --manager-accent: #14543a; }
[data-manager-theme="FELIPE"]    { --manager-accent: #1e4ea8; }
[data-manager-theme="ANDRES"]    { --manager-accent: #b8332a; }
[data-manager-theme="JESUS"]     { --manager-accent: #8b5cf6; }
[data-manager-theme="FRAN"]      { --manager-accent: #d97706; }
[data-manager-theme="ALEJANDRO"] { --manager-accent: #0891b2; }
[data-manager-theme="LAZARO"]    { --manager-accent: #be185d; }
[data-manager-theme="MIGUEL"]    { --manager-accent: #4338ca; }
[data-manager-theme="RAUL"]      { --manager-accent: #059669; }

/* Apply manager accent to key elements when theme is set */
[data-manager-theme] .hero { 
    background: linear-gradient(135deg, var(--manager-accent), color-mix(in srgb, var(--manager-accent) 70%, black));
}

/* =========================================================================
   MVP Badge
   ========================================================================= */

.mvp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 800;
    border: 1px solid #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mvp-badge::before { content: '⭐'; font-size: 0.8rem; }

/* =========================================================================
   Logros / Badges
   ========================================================================= */

.logro-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logro-badge:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

.logro-badge .logro-icon { font-size: 1.1rem; }
.logro-badge.locked { opacity: 0.4; filter: grayscale(1); }

/* =========================================================================
   Predicciones
   ========================================================================= */

.prediccion-selector {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: var(--space-2);
}

.prediccion-btn {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.prediccion-btn:hover { border-color: var(--field-green); color: var(--ink-strong); }
.prediccion-btn.selected {
    background: var(--field-green);
    color: white;
    border-color: var(--field-green);
}
.prediccion-btn.correct {
    background: #27ae60;
    color: white;
    border-color: #27ae60;
}
.prediccion-btn.wrong {
    background: #e74c3c;
    color: white;
    border-color: #e74c3c;
    opacity: 0.6;
}

/* =========================================================================
   Nav Dropdown ("Más")
   ========================================================================= */

.nav-dropdown {
    position: relative;
}

.nav-dropdown > .nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-dropdown > .nav-link::after {
    content: '▾';
    font-size: 0.7rem;
    opacity: 0.7;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--field-green-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    padding: var(--space-2) 0;
    z-index: calc(var(--myth-z-nav, 1000) + 1);
    list-style: none;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    display: block;
    animation: dropdownFade 0.15s ease;
}

/* Ensure dropdown closes when mouse leaves */
.nav-dropdown .nav-dropdown-menu {
    padding-top: 4px; /* small gap so mouseleave doesn't trigger immediately */
}

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

.nav-dropdown-menu li { margin: 0; }

.nav-dropdown-menu .nav-link {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: 0.85rem;
    border-radius: 0;
    white-space: nowrap;
}

.nav-dropdown-menu .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Mobile: dropdown items show inline in hamburger menu */
@media (max-width: 768px) {
    .nav-dropdown-menu {
        position: static;
        display: block;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        padding-left: var(--space-4);
        min-width: auto;
        animation: none;
    }
    .nav-dropdown > .nav-link::after { content: ''; }
    .nav-dropdown-menu .nav-link {
        padding: var(--space-2) var(--space-3);
        font-size: 0.82rem;
        opacity: 0.8;
    }
}


/* =========================================================================
   Página: clasificaciones.html (consolidado desde HTML)
   ========================================================================= */
        .pos-delta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.1em;
            height: 1.1em;
            margin-left: var(--space-2);
            font-size: 0.78em;
            line-height: 1;
            border-radius: 50%;
            vertical-align: middle;
        }
        .pos-delta.pos-up   { color: #1e8c4a; }   /* verde */
        .pos-delta.pos-down { color: #c0392b; }   /* rojo */
        .pos-delta.pos-flat { color: var(--ink-soft); font-size: 1em; }
        .manager-cell { display: inline-flex; align-items: center; gap: var(--space-1); }


/* =========================================================================
   Página: login.html (consolidado desde HTML)
   ========================================================================= */
        .login-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                radial-gradient(900px 500px at 80% 0%, rgba(199, 53, 42, 0.08), transparent 60%),
                radial-gradient(700px 400px at 0% 100%, rgba(14, 111, 143, 0.1), transparent 60%),
                linear-gradient(135deg, #05281B 0%, #062F20 50%, #031F16 100%);
            padding: var(--space-6);
            position: relative;
            overflow: hidden;
        }

        .login-page::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
            background-size: 64px 64px;
            mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
            pointer-events: none;
        }

        .login-container {
            background: var(--white);
            padding: var(--space-12) var(--space-10);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-xl);
            border: 1px solid var(--border-subtle);
            max-width: 420px;
            width: 100%;
            position: relative;
            z-index: 1;
            animation: loginSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        @keyframes loginSlideIn {
            from { opacity: 0; transform: translateY(20px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .login-header {
            text-align: center;
            margin-bottom: var(--space-8);
        }

        .login-header h1 {
            color: var(--ink-strong);
            margin-bottom: var(--space-2);
            font-size: 1.75rem;
            font-weight: 800;
            letter-spacing: -0.02em;
        }

        .login-header .subtitle {
            color: var(--ink-muted);
            font-size: 0.9rem;
        }

        .login-header .icon {
            font-size: 3rem;
            margin-bottom: var(--space-3);
            display: inline-flex;
            width: 72px;
            height: 72px;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--field-green) 0%, var(--field-green-dark) 100%);
            border-radius: var(--radius-pill);
            box-shadow: 0 8px 24px -8px rgba(20, 84, 58, 0.4);
            color: var(--accent-gold-light);
            line-height: 1;
        }

        .form-group {
            margin-bottom: 1.25rem;
        }

        .form-group label {
            display: block;
            margin-bottom: var(--space-2);
            color: var(--ink-strong);
            font-weight: 600;
            font-size: 0.875rem;
            letter-spacing: 0.01em;
        }

        .form-group input {
            width: 100%;
            padding: var(--space-3) var(--space-4);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            font-family: var(--font-sans);
            font-size: 0.95rem;
            background: var(--white);
            color: var(--ink);
            transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
            box-sizing: border-box;
        }

        .form-group input::placeholder {
            color: var(--ink-soft);
        }

        .form-group input:hover {
            border-color: var(--border-strong);
        }

        .form-group input:focus {
            outline: none;
            border-color: var(--field-green);
            box-shadow: var(--shadow-focus);
        }

        .btn-login {
            width: 100%;
            padding: var(--space-4);
            background: var(--field-green);
            color: var(--white);
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            font-family: var(--font-sans);
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            cursor: pointer;
            transition: background var(--t-base) ease, transform var(--t-fast) ease, box-shadow var(--t-base) ease;
            box-shadow: var(--shadow-sm);
        }

        .btn-login:hover:not(:disabled) {
            background: var(--field-green-dark);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .btn-login:active:not(:disabled) {
            transform: translateY(0);
        }

        .btn-login:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .error-message {
            background: rgba(184, 51, 42, 0.08);
            color: var(--accent-red-dark);
            border: 1px solid rgba(184, 51, 42, 0.2);
            padding: 0.75rem 1rem;
            border-radius: var(--radius-sm);
            margin-top: 1rem;
            display: none;
            text-align: center;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .error-message.show {
            display: block;
        }


/* =========================================================================
   Página: mercado.html (consolidado desde HTML)
   ========================================================================= */
        .mercado-page { padding: var(--space-10) 0 var(--space-12); }
        .mercado-page h1 {
            text-align: center;
            margin-bottom: var(--space-3);
        }
        .mercado-page h1::after {
            content: '';
            display: block;
            width: 64px;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-gold), var(--field-green));
            border-radius: var(--radius-pill);
            margin: var(--space-3) auto 0;
        }
        .mercado-intro {
            text-align: center;
            color: var(--ink-muted);
            margin-bottom: var(--space-8);
            max-width: 720px;
            margin-left: auto;
            margin-right: auto;
            font-size: 0.95rem;
        }
        .mercado-error {
            display: none;
            max-width: 720px;
            margin: 0 auto var(--space-6);
            padding: var(--space-4);
            background: rgba(184, 51, 42, 0.08);
            border: 1px solid rgba(184, 51, 42, 0.25);
            color: var(--accent-red-dark);
            border-radius: var(--radius-sm);
            text-align: center;
            font-weight: 500;
        }
        .mercado-tabs {
            display: flex;
            justify-content: center;
            gap: var(--space-2);
            flex-wrap: wrap;
            margin-bottom: var(--space-6);
        }
        .mercado-tab {
            background: var(--surface);
            border: 1px solid var(--border);
            color: var(--ink-strong);
            padding: var(--space-2) var(--space-4);
            border-radius: var(--radius-pill);
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 150ms ease;
        }
        .mercado-tab:hover { border-color: var(--field-green); }
        .mercado-tab.active {
            background: var(--field-green);
            color: var(--line-white);
            border-color: var(--field-green-dark);
        }

        .mercado-event { display: none; }
        .mercado-event.active { display: block; }

        .mercado-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            padding: var(--space-6);
            margin-bottom: var(--space-6);
        }
        .mercado-card h3 {
            font-size: 1.1rem;
            margin: 0 0 var(--space-4);
            color: var(--ink-strong);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        /* BAJAS */
        .bajas-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: var(--space-3);
        }
        .baja-card {
            background: var(--surface-alt);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius);
            padding: var(--space-3) var(--space-4);
        }
        .baja-card h4 {
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--ink-muted);
            margin: 0 0 var(--space-2);
            font-weight: 700;
        }
        .baja-card .lista {
            color: var(--ink-strong);
            font-size: 0.92rem;
            line-height: 1.5;
        }
        .baja-card .lista span {
            display: inline-block;
            margin-right: var(--space-2);
            margin-bottom: var(--space-1);
            padding: 2px 8px;
            background: rgba(184, 51, 42, 0.08);
            border: 1px solid rgba(184, 51, 42, 0.18);
            color: var(--accent-red-dark);
            border-radius: var(--radius-pill);
            font-size: 0.84rem;
            font-weight: 500;
        }

        /* RONDAS */
        .ronda { margin-top: var(--space-6); }
        .ronda h3 {
            font-size: 0.92rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--field-green-dark);
            font-weight: 800;
            margin-bottom: var(--space-3);
            border-bottom: 2px solid var(--accent-gold);
            padding-bottom: var(--space-2);
            display: inline-block;
        }
        .fichajes-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.9rem;
        }
        .fichajes-table thead th {
            background: var(--field-green);
            color: var(--line-white);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-size: 0.72rem;
            font-weight: 700;
            padding: var(--space-2) var(--space-3);
            text-align: left;
        }
        .fichajes-table tbody td {
            padding: var(--space-2) var(--space-3);
            border-bottom: 1px solid var(--border-subtle);
        }
        .fichajes-table tbody tr:nth-child(even) td { background: var(--surface-alt); }
        .fichajes-table tbody tr:hover td { background: rgba(20, 84, 58, 0.04); }

        .pos-badge {
            display: inline-block;
            padding: 2px 8px;
            font-size: 0.72rem;
            font-weight: 700;
            border-radius: var(--radius-pill);
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .pos-badge.por { background: #fde68a; color: #92400e; }
        .pos-badge.def { background: #bfdbfe; color: #1e3a8a; }
        .pos-badge.med { background: #c7d2fe; color: #312e81; }
        .pos-badge.del { background: #fecaca; color: #991b1b; }

        .manager-name {
            font-weight: 700;
            color: var(--ink-strong);
            text-transform: uppercase;
            font-size: 0.82rem;
            letter-spacing: 0.04em;
        }


/* =========================================================================
   Página: palmares.html (consolidado desde HTML)
   ========================================================================= */
        /* ==========================================================
           Palmarés — tabla pivotada (managers x temporadas)
           ========================================================== */
        .palmares-page {
            padding: var(--space-10) 0 var(--space-12);
        }
        .palmares-page h1 {
            text-align: center;
            margin-bottom: var(--space-3);
        }
        .palmares-page h1::after {
            content: '';
            display: block;
            width: 64px;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-gold), var(--field-green));
            border-radius: var(--radius-pill);
            margin: var(--space-3) auto 0;
        }
        .palmares-intro {
            text-align: center;
            color: var(--ink-muted);
            margin-bottom: var(--space-8);
            max-width: 720px;
            margin-left: auto;
            margin-right: auto;
            font-size: 0.95rem;
        }
        .palmares-error {
            display: none;
            max-width: 720px;
            margin: 0 auto var(--space-6);
            padding: var(--space-4);
            background: rgba(184, 51, 42, 0.08);
            border: 1px solid rgba(184, 51, 42, 0.25);
            color: var(--accent-red-dark);
            border-radius: var(--radius-sm);
            text-align: center;
            font-weight: 500;
        }

        .palmares-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            padding: 0;
            overflow: hidden;
        }

        .palmares-table-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .palmares-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.9rem;
            font-feature-settings: 'tnum';
            font-variant-numeric: tabular-nums;
        }

        .palmares-table thead th {
            background: linear-gradient(180deg, var(--field-green-dark), var(--field-green));
            color: var(--line-white);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-size: 0.72rem;
            padding: var(--space-3) var(--space-3);
            text-align: center;
            white-space: nowrap;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .palmares-table thead th.col-manager {
            text-align: left;
            position: sticky;
            left: 0;
            z-index: 2;
            background: linear-gradient(180deg, var(--field-green-dark), var(--field-green));
            min-width: 140px;
            box-shadow: 1px 0 0 rgba(255, 255, 255, 0.08);
        }

        .palmares-table tbody td {
            padding: var(--space-3) var(--space-3);
            text-align: center;
            border-bottom: 1px solid var(--border-subtle);
        }

        .palmares-table tbody tr:last-child td {
            border-bottom: none;
        }

        .palmares-table tbody tr:nth-child(even) td {
            background: var(--surface-alt);
        }

        .palmares-table tbody tr:hover td {
            background: rgba(20, 84, 58, 0.04);
        }

        .palmares-table td.col-manager {
            text-align: left;
            font-weight: 700;
            color: var(--ink-strong);
            position: sticky;
            left: 0;
            background: var(--surface);
            box-shadow: 1px 0 0 var(--border-subtle);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-size: 0.85rem;
            min-width: 140px;
        }

        .palmares-table tbody tr:nth-child(even) td.col-manager {
            background: var(--surface-alt);
        }

        .palmares-table tbody tr:hover td.col-manager {
            background: rgba(20, 84, 58, 0.06);
        }

        .palmares-table .manager-historico {
            color: var(--ink-soft);
            font-style: italic;
        }

        /* Posiciones */
        .pos-cell {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 28px;
            border-radius: var(--radius-pill);
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--ink-muted);
        }
        .pos-cell.empty {
            color: var(--ink-soft);
            font-weight: 400;
        }
        .pos-cell.gold {
            background: linear-gradient(135deg, #f4d35e 0%, #c89b3c 100%);
            color: #5a3e0c;
            font-weight: 800;
            box-shadow: 0 1px 2px rgba(200, 155, 60, 0.4), 0 2px 4px rgba(200, 155, 60, 0.2);
        }
        .pos-cell.silver {
            background: linear-gradient(135deg, #e8e8e8 0%, #b0b0b0 100%);
            color: #4a4a4a;
            font-weight: 700;
        }
        .pos-cell.bronze {
            background: linear-gradient(135deg, #e0a672 0%, #b87333 100%);
            color: #4a2a0c;
            font-weight: 700;
        }

        /* Columna resumen */
        .palmares-table .col-summary {
            background: rgba(200, 155, 60, 0.06);
            border-left: 2px solid var(--accent-gold);
            font-weight: 700;
        }
        .palmares-table thead th.col-summary {
            background: linear-gradient(180deg, var(--accent-gold-dark), var(--accent-gold));
        }

        .summary-trophies {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
            font-size: 0.95rem;
            color: var(--accent-gold-dark);
            font-weight: 800;
        }
        .summary-trophies .count {
            color: var(--ink-strong);
            margin-right: 2px;
        }

        /* Leyenda */
        .palmares-legend {
            display: flex;
            justify-content: center;
            gap: var(--space-6);
            margin-top: var(--space-6);
            flex-wrap: wrap;
            color: var(--ink-muted);
            font-size: 0.85rem;
        }
        .palmares-legend .leg-item {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .palmares-table thead th,
            .palmares-table tbody td {
                padding: var(--space-2) var(--space-2);
                font-size: 0.8rem;
            }
            .pos-cell {
                min-width: 24px;
                height: 24px;
                font-size: 0.75rem;
            }
        }


/* =========================================================================
   Página: plantillas.html (consolidado desde HTML)
   ========================================================================= */
        .plantillas-page { padding: var(--space-8) 0 var(--space-12); }
        .plantillas-page h1 { text-align: center; margin-bottom: var(--space-6); }

        .manager-selector {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-2);
            margin-bottom: var(--space-6);
        }
        .manager-btn {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-pill);
            padding: var(--space-2) var(--space-4);
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 150ms ease;
        }
        .manager-btn:hover { border-color: var(--field-green); }
        .manager-btn.active {
            background: var(--field-green);
            color: var(--line-white);
            border-color: var(--field-green-dark);
        }

        .plantilla-card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            overflow: hidden;
        }
        .plantilla-header {
            background: linear-gradient(180deg, var(--field-green-dark), var(--field-green));
            color: var(--line-white);
            text-align: center;
            padding: var(--space-4) var(--space-5);
        }
        .plantilla-header h2 {
            margin: 0;
            font-size: 1.6rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .plantilla-summary {
            text-align: center;
            padding: var(--space-3) var(--space-5);
            background: var(--surface-alt);
            border-bottom: 1px solid var(--border-subtle);
            font-size: 0.9rem;
            color: var(--ink-muted);
        }
        .plantilla-summary strong { color: var(--ink-strong); }

        .plantilla-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
        }
        .plantilla-col {
            padding: var(--space-4);
            border-right: 1px solid var(--border-subtle);
        }
        .plantilla-col:last-child { border-right: 0; }
        .plantilla-col h3 {
            text-align: center;
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--field-green-dark);
            margin: 0 0 var(--space-3);
            padding-bottom: var(--space-2);
            border-bottom: 2px solid var(--accent-gold);
        }

        .jugador-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) 0;
            border-bottom: 1px solid var(--border-subtle);
        }
        .jugador-item:last-child { border-bottom: 0; }
        .jugador-item .escudo {
            width: 28px;
            height: 28px;
            object-fit: contain;
            flex-shrink: 0;
        }
        .jugador-item .info { flex: 1; min-width: 0; }
        .jugador-item .nombre {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--ink-strong);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .jugador-item .meta {
            font-size: 0.78rem;
            color: var(--ink-muted);
        }
        .jugador-item .meta .precio { color: var(--field-green-dark); font-weight: 600; }
        .jugador-item .meta .puntos { margin-left: var(--space-2); }

        @media (max-width: 900px) {
            .plantilla-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 500px) {
            .plantilla-grid { grid-template-columns: 1fr; }
        }


/* =========================================================================
   Página: reglas.html (consolidado desde HTML)
   ========================================================================= */
        .reglas-page { padding: var(--space-8) 0 var(--space-12); }
        .reglas-page h1 { text-align: center; margin-bottom: var(--space-3); }
        .reglas-page h1::after {
            content: '';
            display: block;
            width: 64px;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-gold), var(--field-green));
            border-radius: var(--radius-pill);
            margin: var(--space-3) auto var(--space-6);
        }
        .reglas-grid {
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: var(--space-6);
        }
        .reglas-content {
            display: block;
        }
        .reglas-toc {
            position: sticky;
            top: var(--space-4);
            align-self: start;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: var(--space-4);
            box-shadow: var(--shadow-card);
        }
        .reglas-toc ul { list-style: none; margin: 0; padding: 0; }
        .reglas-toc li { margin-bottom: var(--space-2); }
        .reglas-toc a {
            color: var(--ink-strong);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
        }
        .reglas-toc a:hover { color: var(--field-green-dark); text-decoration: underline; }
        .reglas-content section {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: var(--space-6);
            margin-bottom: var(--space-5);
            box-shadow: var(--shadow-card);
            scroll-margin-top: 80px;
            display: block;
            width: 100%;
        }
        .reglas-content h2 {
            margin-top: 0;
            color: var(--field-green-dark);
            font-size: 1.4rem;
            border-bottom: 2px solid var(--accent-gold);
            display: inline-block;
            padding-bottom: var(--space-1);
        }
        .reglas-content h3 {
            margin-top: var(--space-5);
            font-size: 1.05rem;
            color: var(--ink-strong);
        }
        .reglas-content p, .reglas-content li {
            color: var(--ink-strong);
            line-height: 1.55;
        }
        .reglas-content ul { padding-left: var(--space-5); }
        .reglas-content table {
            width: 100%;
            border-collapse: collapse;
            margin: var(--space-3) 0;
            font-size: 0.92rem;
        }
        .reglas-content th, .reglas-content td {
            border: 1px solid var(--border-subtle);
            padding: 6px 10px;
            text-align: left;
        }
        .reglas-content thead th {
            background: linear-gradient(180deg, var(--field-green-dark), var(--field-green));
            color: var(--line-white);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-size: 0.78rem;
        }
        .reglas-content tbody tr:nth-child(even) { background: var(--surface-alt); }
        .reglas-content .bonus { color: #1c8c4a; font-weight: 700; }
        .reglas-content .malus { color: var(--accent-red-dark); font-weight: 700; }
        .reglas-content .nota {
            font-size: 0.88rem;
            color: var(--ink-muted);
            background: var(--surface-alt);
            border: 1px solid var(--accent-gold);
            padding: var(--space-2) var(--space-3);
            margin-top: var(--space-2);
        }
@media (max-width: 900px) {
            .reglas-grid { grid-template-columns: 1fr; }
            .reglas-toc { position: static; }
        }

/* =========================================================================
   Myth foundations v3 — shared surface contract
   ========================================================================= */

html {
    accent-color: var(--myth-blue);
}

body {
    overflow-x: hidden;
}

main > section > .container,
main > .container {
    width: min(100%, var(--content-max));
}

button,
input,
select,
textarea {
    font: inherit;
}

button:not([disabled]),
a {
    -webkit-tap-highlight-color: transparent;
}

button[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
    cursor: not-allowed;
    opacity: 0.62;
}

button,
.btn-primary,
.btn-secondary,
.btn-edit,
.btn-delete,
.link-btn {
    min-height: var(--touch-target);
}

input,
select,
textarea {
    border-color: var(--border);
    color: var(--ink-strong);
    background: var(--surface);
    transition: var(--transition-standard);
}

input::placeholder,
textarea::placeholder {
    color: var(--ink-muted);
    opacity: 0.9;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--border-strong);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--myth-blue);
    box-shadow: var(--shadow-focus);
}

.page-heading,
.page-intro,
.section-heading {
    text-wrap: balance;
}

.page-heading {
    margin-top: var(--space-8);
}

.page-intro {
    max-width: var(--measure-copy);
    margin-right: auto;
    margin-left: auto;
}

.surface-panel,
.surface-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}

.surface-panel {
    border-radius: var(--radius-lg);
}

.surface-card {
    border-radius: var(--radius-xl);
    transition: var(--transition-standard);
}

.surface-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.state-dot {
    flex: 0 0 auto;
}

.state-dot.is-unavailable { background: var(--state-disabled); }
.state-dot.is-pending { background: var(--state-warning); }
.state-dot.is-open { background: var(--state-live); }
.state-dot.is-complete { background: var(--state-finished); }

.state-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    gap: var(--space-2);
    padding: 4px 10px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.state-badge.is-success,
.status-badge.is-success { color: var(--state-success); background: var(--state-success-surface); }
.state-badge.is-warning,
.status-badge.is-warning { color: var(--state-warning); background: var(--state-warning-surface); }
.state-badge.is-danger,
.status-badge.is-danger { color: var(--state-danger); background: var(--state-danger-surface); }
.state-badge.is-info,
.status-badge.is-info { color: var(--state-info); background: var(--state-info-surface); }
.state-badge.is-neutral,
.status-badge.is-neutral { color: var(--state-neutral); background: var(--state-neutral-surface); }

.loading-state {
    min-height: 96px;
    display: grid;
    place-items: center;
    color: var(--ink-muted);
}

.loading-state::before {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: var(--space-2);
    border: 2px solid var(--border);
    border-top-color: var(--myth-blue);
    border-radius: 50%;
    content: '';
    animation: myth-spin 700ms linear infinite;
}

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

.empty-state,
.empty-state-box,
.centered-state {
    max-width: var(--measure-copy);
    margin-right: auto;
    margin-left: auto;
}

.footer {
    border-top: 1px solid var(--border);
    background: var(--myth-navy);
}

.footer p {
    color: var(--myth-paper);
}

@media (max-width: 768px) {
    .container {
        padding-right: var(--space-4);
        padding-left: var(--space-4);
    }

    .page-heading {
        margin-top: var(--space-6);
    }

    .state-legend {
        gap: var(--space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .loading-state::before { animation: none; }
}

/* Acceso global al calendario real: se inyecta junto a la navegación en
   todas las superficies, no sólo en el panel de puntuaciones. */
.global-fixtures-trigger { position: fixed; z-index: var(--myth-z-drawer); top: 5.25rem; right: 1rem; display: inline-flex; align-items: center; gap: .45rem; min-width: 7.75rem; min-height: 3.25rem; padding: .48rem .82rem .48rem 2.9rem; border: 1px solid var(--myth-rule, #c9bda4); border-radius: 999px; color: var(--myth-paper-light, #faf5e8); background: var(--myth-night, #01172d); box-shadow: 0 9px 24px rgba(1,23,45,.24); cursor: pointer; transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.global-fixtures-trigger:hover { background: var(--myth-navy, #08263b); box-shadow: 0 13px 30px rgba(1,23,45,.3); transform: translateY(-1px); }
.global-fixtures-trigger:focus-visible, .global-fixtures-close:focus-visible, .global-fixtures-round:focus-visible { outline: 3px solid var(--myth-gold, #d5a23e); outline-offset: 3px; }
.global-fixtures-ball { position: absolute; left: -1rem; top: 50%; display: grid; place-items: center; width: 3.7rem; height: 3.7rem; pointer-events: none; transform: translateY(-52%); }
.global-fixtures-ball img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 7px rgba(1,23,45,.34)); animation: global-fixtures-ball-float 3.8s ease-in-out infinite; }
@keyframes global-fixtures-ball-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
.global-fixtures-trigger-copy { display: grid; gap: .12rem; text-align: left; }
.global-fixtures-trigger-copy strong { font: 900 .7rem/1 var(--font-display, 'Bebas Neue', sans-serif); letter-spacing: .07em; text-transform: uppercase; }
.global-fixtures-trigger-copy small { color: rgba(250,245,232,.7); font-size: .56rem; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .global-fixtures-ball img { animation: none; } }
.global-fixtures-scrim { position: fixed; z-index: calc(var(--myth-z-drawer) - 10); inset: 0; background: rgba(1,23,45,.42); opacity: 0; transition: opacity 220ms ease; }
.global-fixtures-scrim.is-visible { opacity: 1; }
.global-fixtures-drawer { position: fixed; z-index: calc(var(--myth-z-drawer) + 10); inset-block: 0; inset-inline-end: 0; display: flex; flex-direction: column; width: min(25rem, calc(100vw - 1rem)); padding: 1rem; color: var(--myth-paper-light, #faf5e8); background: var(--myth-night, #01172d); box-shadow: -18px 0 42px rgba(1,23,45,.22); transform: translateX(105%); visibility: hidden; transition: transform 360ms cubic-bezier(.22,1,.36,1), visibility 0s linear 360ms; }
.global-fixtures-drawer.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.global-fixtures-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .95rem; border-bottom: 1px solid rgba(242,231,205,.2); }
.global-fixtures-brand { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.global-fixtures-brand img { width: 2.3rem; height: 2.3rem; border: 1px solid rgba(242,231,205,.35); border-radius: 8px; object-fit: cover; }
.global-fixtures-brand > div { min-width: 0; }
.global-fixtures-brand span { display: block; color: var(--myth-gold, #d5a23e); font-size: .57rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.global-fixtures-brand h2 { margin: .22rem 0 0; overflow: hidden; color: var(--myth-paper-light, #faf5e8); font: 900 1.15rem/1 var(--font-display, 'Bebas Neue', sans-serif); letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.global-fixtures-close { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(242,231,205,.35); border-radius: 50%; color: var(--myth-paper-light, #faf5e8); background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.global-fixtures-toolbar { display: flex; align-items: center; gap: .45rem; padding: .85rem 0 .7rem; color: rgba(250,245,232,.72); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.global-fixtures-live-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--myth-red, #b43724); box-shadow: 0 0 0 4px rgba(180,55,36,.15); }
.global-fixtures-rounds { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: 0 0 .75rem; padding: .25rem; border: 1px solid rgba(242,231,205,.16); border-radius: 7px; background: rgba(8,38,59,.56); }
.global-fixtures-round { min-height: 2.5rem; border: 0; border-radius: 5px; color: rgba(250,245,232,.68); background: transparent; font: 900 .72rem/1 var(--font-display, 'Bebas Neue', sans-serif); cursor: pointer; }
.global-fixtures-round:hover { color: var(--myth-paper-light, #faf5e8); background: rgba(242,231,205,.1); }
.global-fixtures-round.is-active { color: var(--myth-night, #01172d); background: var(--myth-gold, #d5a23e); }
.global-fixtures-round.is-pending:not(.is-active)::after { display: inline-block; width: .3rem; height: .3rem; margin-left: .25rem; border-radius: 50%; background: var(--myth-blue, #08789a); content: ''; vertical-align: middle; }
.global-fixtures-retry { min-height: 2.5rem; margin-top: .35rem; padding: .55rem .9rem; border: 1px solid rgba(242,231,205,.42); border-radius: 6px; color: var(--myth-night, #01172d); background: var(--myth-gold, #d5a23e); font: 900 .72rem/1 var(--font-display, 'Bebas Neue', sans-serif); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.global-fixtures-retry:hover { background: var(--myth-paper-light, #faf5e8); }
.global-fixtures-retry:focus-visible { outline: 3px solid var(--myth-blue, #08789a); outline-offset: 3px; }
.global-fixtures-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-content: start; gap: .55rem; overflow-y: auto; padding: .1rem .15rem .75rem 0; }
.global-fixture-card { display: grid; gap: .55rem; min-width: 0; padding: .68rem .62rem .58rem; border: 1px solid rgba(242,231,205,.22); border-radius: 7px; color: var(--myth-paper-light, #faf5e8); background: rgba(8,38,59,.78); }
.global-fixture-card-main { display: grid; gap: .55rem; min-width: 0; color: inherit; text-decoration: none; }
.global-fixture-card-top, .global-fixture-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: .35rem; color: rgba(250,245,232,.62); font-size: .56rem; }
.global-fixture-card-top span:first-child { color: var(--myth-gold, #d5a23e); font-weight: 900; }
.global-fixture-teams { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: .25rem; }
.global-fixture-team { display: flex; align-items: center; gap: .3rem; min-width: 0; font-size: .62rem; }
.global-fixture-team.is-away { justify-content: flex-end; text-align: right; }
.global-fixture-team strong { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.global-fixture-team img { width: 1.55rem; height: 1.55rem; flex: 0 0 auto; object-fit: contain; }
.global-fixture-score { color: var(--myth-paper-light, #faf5e8); font: 900 .82rem/1 var(--font-display, 'Bebas Neue', sans-serif); white-space: nowrap; }
.global-fixture-card-bottom { justify-content: flex-start; border-top: 1px solid rgba(242,231,205,.12); padding-top: .45rem; }
.global-fixture-card-bottom a { color: var(--myth-gold, #d5a23e); text-decoration: none; }
.global-fixtures-empty { display: grid; grid-column: 1 / -1; gap: .4rem; margin: 1rem .25rem; color: rgba(250,245,232,.7); font-size: .78rem; line-height: 1.45; }
.global-fixtures-empty strong { color: var(--myth-paper-light, #faf5e8); font-size: .9rem; }
body.global-fixtures-open { overflow: hidden; }
@media (max-width: 560px) {
    /* En móvil el balón es el único signo gráfico del acceso a Partidos.
       El aro del botón/píldora competía con el asset y parecía un segundo
       balón; se elimina la decoración secundaria sin ocultar el control. */
    .global-fixtures-trigger {
        top: 4.75rem;
        right: .75rem;
        width: 3.3rem;
        min-width: 3.3rem;
        height: 3.3rem;
        min-height: 3.3rem;
        padding: 0;
        border-color: transparent;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
    }

    .global-fixtures-trigger:hover {
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .global-fixtures-ball {
        left: 50%;
        width: 2.85rem;
        height: 2.85rem;
        transform: translate(-50%, -52%);
    }

    .global-fixtures-trigger-copy { display: none; }
    .page-admin .global-fixtures-trigger { top: 10rem; }
    .global-fixtures-drawer { width: min(22rem, 100vw); padding: .85rem; }
    .global-fixtures-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .global-fixtures-scrim, .global-fixtures-drawer { transition: none; } }

/* =========================================================================
   MYTH EXPERIENCE · momentos, cambios de estado y feedback editorial
   ========================================================================= */

:root {
    --myth-motion-entrance: 260ms cubic-bezier(.22, 1, .36, 1);
    --myth-motion-exit: 180ms cubic-bezier(.4, 0, 1, 1);
    --myth-motion-emphasis: 520ms cubic-bezier(.22, 1, .36, 1);
}

.myth-moment {
    position: fixed;
    z-index: var(--myth-z-moment);
    right: clamp(16px, 4vw, 56px);
    bottom: clamp(18px, 4vw, 48px);
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    width: min(400px, calc(100vw - 32px));
    padding: 15px 17px 16px 15px;
    border: 1px solid var(--myth-night);
    border-top: 4px solid var(--myth-blue);
    color: var(--myth-paper-light);
    background: var(--myth-night);
    box-shadow: 9px 11px 0 rgba(1, 23, 45, .18), 0 16px 34px rgba(1, 23, 45, .24);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--myth-motion-entrance), transform var(--myth-motion-entrance);
}

.myth-moment.is-visible { opacity: 1; transform: translateY(0); }
.myth-moment--success { border-top-color: var(--myth-gold); }
.myth-moment--danger { border-top-color: var(--myth-red); }
.myth-moment--state { border-top-color: var(--myth-blue); }
.myth-moment-mark { display: grid; place-items: center; width: 48px; height: 48px; color: var(--myth-gold); border: 1px solid rgba(242,231,205,.34); }
.myth-moment-mark svg { width: 30px; height: 30px; }
.myth-moment--danger .myth-moment-mark { color: #ed8772; }
.myth-moment--state .myth-moment-mark { color: #63c5d7; }
.myth-moment-copy { display: grid; gap: 3px; min-width: 0; }
.myth-moment-context { color: var(--myth-gold); font: 800 .64rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.myth-moment-title { color: var(--myth-paper-light); font: 900 clamp(1.25rem, 3vw, 1.65rem)/.95 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.myth-moment-subtitle { color: rgba(250,245,232,.76); font-size: .78rem; line-height: 1.35; }

.myth-state-change { animation: myth-state-change var(--myth-motion-emphasis) both; }
@keyframes myth-state-change {
    0% { box-shadow: 0 0 0 0 rgba(8,120,154,0); }
    35% { box-shadow: 0 0 0 5px rgba(8,120,154,.22); }
    100% { box-shadow: 0 0 0 0 rgba(8,120,154,0); }
}

/* La lectura de una jornada empieza con el acta, no con un bloque genérico. */
.page-jornada .jornada-page > .container > .page-heading { max-width: 12ch; margin-bottom: 10px; font-size: clamp(3rem, 8vw, 6.25rem); line-height: .84; text-transform: uppercase; }
.page-jornada .jornada-page > .container > .page-heading::after { display: block; width: 88px; height: 5px; margin-top: 20px; background: var(--myth-red); content: ''; }
.page-jornada .jornada-banner { position: relative; overflow: hidden; }
.page-jornada .jornada-banner::after { position: absolute; right: 8%; bottom: 15px; width: 28%; height: 2px; background: var(--myth-blue); box-shadow: 0 9px 0 var(--myth-blue); content: ''; opacity: .45; transform: rotate(-7deg); pointer-events: none; }
.page-jornada .jornada-detail > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 12px; font-size: clamp(2rem, 5vw, 3.7rem); text-transform: uppercase; }
.page-jornada .matchup-card.local-wins, .page-jornada .matchup-card.visit-wins { border-color: var(--myth-red); }
.page-jornada .matchup-card.local-wins::after, .page-jornada .matchup-card.visit-wins::after { display: block; height: 3px; background: var(--myth-gold); content: ''; }

/* La clasificación distingue el líder antes de pedir lectura numérica. */
.page-clasificaciones .clasificacion-table tbody tr:first-child { background: rgba(213,162,62,.16); }
.page-clasificaciones .clasificacion-table tbody tr:first-child td:first-child::before { display: inline-block; width: 6px; height: 6px; margin: 0 7px 2px 0; border-radius: 50%; background: var(--myth-gold); content: ''; }
.page-clasificaciones .clasificacion-table tbody tr.my-row { outline: 2px solid var(--myth-blue); outline-offset: -2px; }
.page-clasificaciones .visual-module { border-top: 4px solid var(--myth-red); }

@media (max-width: 768px) {
    .myth-moment { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom) + 12px); width: min(390px, calc(100vw - 24px)); }
    .page-jornada .jornada-page > .container > .page-heading { font-size: clamp(3rem, 18vw, 5rem); }
    .page-jornada .jornada-banner::after { right: -8%; width: 48%; }
}

@media (prefers-reduced-motion: reduce) {
    .myth-moment { transition: none; transform: none; }
    .myth-moment.is-visible { transform: none; }
    .myth-state-change { animation: none; }
}