/* ====================================================
   FANTASTIC FOOTBALL 2026 — Dark Theme
   ==================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { max-width: 100%; overflow-x: hidden; }

:root {
    --bg-0:      #0a0f1e;
    --bg-1:      #0f172a;
    --bg-2:      #1e293b;
    --bg-3:      #273549;
    --border:    #2d3f55;
    --accent:    #10b981;
    --accent-h:  #059669;
    --accent-d:  rgba(16,185,129,.12);
    --text-1:    #f1f5f9;
    --text-2:    #94a3b8;
    --text-3:    #64748b;
    --danger:    #ef4444;
    --danger-h:  #dc2626;
    --warn:      #f59e0b;
    --info:      #3b82f6;
    --gold:      #fbbf24;
    --font:      'Segoe UI', system-ui, -apple-system, sans-serif;
    --r:         8px;
    --r-lg:      14px;
    --shadow:    0 4px 12px rgba(0,0,0,.4);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.5);
}

body {
    background: var(--bg-1);
    color: var(--text-1);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ── Layout ───────────────────────────────────────────── */

.layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    grid-template-rows: 58px 1fr;
    min-height: 100vh;
}

/* ── Header ───────────────────────────────────────────── */

.header {
    grid-column: 1 / -1;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: 200;
    height: 58px;
    gap: 1rem;
    overflow: hidden;
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1rem;
    color: var(--accent);
    letter-spacing: -.01em;
    white-space: nowrap;
}

.brand-ball { font-size: 1.3rem; }

.header-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: .8rem;
    min-width: 0;
    overflow: hidden;
}

.header-team {
    font-weight: 700;
    color: var(--accent);
}

.header-money {
    color: var(--gold);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.header-user {
    color: var(--text-2);
}

.btn-simular {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: .7rem 1.4rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .02em;
    box-shadow: 0 4px 14px rgba(16,185,129,.35);
    transition: transform .12s, box-shadow .12s;
}
.btn-simular:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16,185,129,.5);
}
.btn-simular:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(16,185,129,.3);
}
.btn-simular-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.mgr-tag {
    font-size: .72em;
    color: var(--text-3);
    font-weight: 400;
    white-space: nowrap;
}

.moneda-sel {
    background: var(--bg-2);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: .72rem;
    padding: .15rem .25rem;
    cursor: pointer;
    outline: none;
}
.moneda-sel:hover { border-color: var(--accent); }
.moneda-sel:focus { border-color: var(--accent); }

.btn-logout {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
    padding: .3rem .65rem;
    border-radius: var(--r);
    font-size: .75rem;
    cursor: pointer;
    transition: all .15s;
}

.btn-logout:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

.hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--text-1);
    font-size: 1.4rem;
    cursor: pointer;
    padding: .25rem;
    line-height: 1;
}

/* ── Sidebar ──────────────────────────────────────────── */

.sidebar {
    background: var(--bg-2);
    border-right: 1px solid var(--border);
    padding: 1rem 0 2rem;
    position: sticky;
    top: 58px;
    height: calc(100vh - 58px);
    overflow-y: auto;
    transition: left .3s;
}

.nav-section { margin-bottom: .25rem; }

.nav-label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-3);
    padding: 1rem 1.2rem .35rem;
}

.nav-a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1.2rem;
    color: var(--text-2);
    font-size: .875rem;
    transition: all .12s;
    border-right: 3px solid transparent;
}

.nav-a:hover { background: var(--bg-3); color: var(--text-1); }

.nav-a.active {
    background: var(--accent-d);
    color: var(--accent);
    border-right-color: var(--accent);
    font-weight: 600;
}

.nav-icon { width: 18px; text-align: center; flex-shrink: 0; }

/* ── Main ─────────────────────────────────────────────── */

.main { padding: 1.5rem; min-width: 0; overflow-y: auto; height: calc(100vh - 58px); }

.page-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-1);
}

/* ── Cards ────────────────────────────────────────────── */

.card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}

.card-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}

.card-title {
    font-size: .9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* ── Grid helpers ─────────────────────────────────────── */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.gap-1  { gap: .5rem; }
.gap-2  { gap: 1rem; }
.flex   { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

/* ── Stat boxes ───────────────────────────────────────── */

.stat-box {
    background: var(--bg-3);
    border-radius: var(--r);
    padding: 1rem;
    text-align: center;
}

.stat-box-val {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: .25rem;
}

.stat-box-lbl {
    font-size: .65rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Buttons ──────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border: none;
    border-radius: var(--r);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    text-align: center;
}

.btn-primary  { background: var(--accent);  color: #fff; }
.btn-primary:hover  { background: var(--accent-h); }
.btn-danger   { background: var(--danger);  color: #fff; }
.btn-danger:hover   { background: var(--danger-h); }
.btn-ghost    { background: transparent; border: 1px solid var(--border); color: var(--text-2); }
.btn-ghost:hover    { background: var(--bg-3); color: var(--text-1); }
.btn-warn     { background: var(--warn);    color: #000; }
.btn-sm       { padding: .28rem .55rem; font-size: .75rem; }
.btn-xs       { padding: .18rem .4rem;  font-size: .7rem; }
.btn-block    { width: 100%; justify-content: center; }

/* ── Tables ───────────────────────────────────────────── */

.table-wrap { overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 220px); border-radius: var(--r-lg); }

table { width: 100%; border-collapse: collapse; }

thead th {
    background: var(--bg-3);
    color: var(--text-3);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .6rem .75rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

thead th:first-child { border-radius: var(--r-lg) 0 0 0; }
thead th:last-child  { border-radius: 0 var(--r-lg) 0 0; }
thead th[data-col]:hover { color: var(--text-1); }
thead th.th-sort-desc::after { content: ' ↓'; color: var(--accent); }
thead th.th-sort-asc::after  { content: ' ↑'; color: var(--accent); }

tbody td {
    padding: .6rem .75rem;
    border-bottom: 1px solid rgba(45,63,85,.5);
    font-size: .855rem;
    vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255,255,255,.02); }

/* ── Badges ───────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.badge-por { background: rgba(99,102,241,.2);  color: #818cf8; }
.badge-def { background: rgba(16,185,129,.2);  color: #34d399; }
.badge-med { background: rgba(59,130,246,.2);  color: #60a5fa; }
.badge-del { background: rgba(239,68,68,.2);   color: #f87171; }
.badge-ok  { background: rgba(16,185,129,.15); color: #10b981; }
.badge-warn{ background: rgba(245,158,11,.15); color: #f59e0b; }
.badge-err    { background: rgba(239,68,68,.15);  color: #ef4444; }
.badge-danger { background: rgba(239,68,68,.15);  color: #ef4444; }
.badge-info { background: rgba(96,165,250,.15); color: #60a5fa; }

/* ── Attribute bars ───────────────────────────────────── */

.attr-row { display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem; }
.attr-lbl { font-size: .65rem; color: var(--text-3); width: 30px; text-transform: uppercase; }
.attr-bar { width: 44px; flex-shrink: 0; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.attr-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.fill-def       { background: #34d399; }
.fill-ata       { background: #f87171; }
.fill-vel       { background: var(--warn); }
.fill-int       { background: #f97316; }
.fill-res       { background: var(--info); }
.fill-por       { background: #818cf8; }
.fill-aer       { background: #67e8f9; }
.fill-pas       { background: #c084fc; }
.fill-attr-high      { background: var(--accent); }
.fill-attr-high-soft { background: #34d399; }
.fill-attr-mid       { background: rgba(255,255,255,.22); }
.fill-attr-low-soft  { background: #fca5a5; }
.fill-attr-low       { background: var(--danger); }
.attr-val       { font-size: .75rem; font-weight: 700; min-width: 22px; text-align: right; }
.attr-val-high  { color: var(--accent); }
.attr-val-low   { color: var(--danger); }

/* ── Pitch ────────────────────────────────────────────── */

.pitch-wrap {
    background: var(--bg-2);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    border: 1px solid var(--border);
}

.pitch {
    background: linear-gradient(180deg, #14532d 0%, #166534 45%, #14532d 100%);
    border-radius: var(--r);
    padding: 1.5rem 1rem;
    min-height: 480px;
    position: relative;
    overflow: hidden;
}

/* Alineación: filas posicionadas en % absoluto */
.pitch-row {
    position: absolute;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 1rem;
    transform: translateY(-50%);
    z-index: 1;
}

.pitch-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
}

/* Colores de punto por posición */
.dot-por { border-color: #818cf8 !important; background: rgba(99,102,241,.25) !important; }
.dot-def { border-color: #34d399 !important; background: rgba(52,211,153,.2)  !important; }
.dot-med { border-color: #60a5fa !important; background: rgba(96,165,250,.2)  !important; }
.dot-del { border-color: #f87171 !important; background: rgba(248,113,113,.2) !important; }

.pitch-dot { cursor: pointer; flex-direction: column; gap: 1px; }

.dot-num  { font-size: .6rem; font-weight: 800; opacity: .7; line-height: 1; }
.dot-name {
    font-size: .58rem; font-weight: 700;
    text-align: center; max-width: 50px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.dot-empty { opacity: .4; }

/* Táctica botones tipo pill */
.tactica-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .35rem .75rem;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-2);
    font-size: .8rem; font-weight: 600;
    cursor: pointer; transition: all .15s;
}
.tactica-btn input { display: none; }
.tactica-btn:hover  { border-color: var(--accent); color: var(--accent); }
.tactica-btn.active { border-color: var(--accent); background: rgba(16,185,129,.15); color: var(--accent); }

/* Líneas del campo */
.pitch::before {
    content: '';
    position: absolute;
    top: 50%; left: 8%; right: 8%;
    height: 1px;
    background: rgba(255,255,255,.18);
}

.pitch::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 70px; height: 70px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.pitch-row:last-child { margin-bottom: 0; }

.pitch-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    cursor: default;
}

.pitch-dot {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 800;
    color: #fff;
    transition: all .2s;
    backdrop-filter: blur(4px);
}

.pitch-dot:hover { background: rgba(255,255,255,.25); transform: scale(1.08); }
.pitch-dot.lesion   { border-color: var(--danger); }
.pitch-dot.sancion  { border-color: var(--warn); }
.pitch-dot.portero  { border-color: #818cf8; background: rgba(99,102,241,.2); }

.pitch-name {
    font-size: .58rem;
    color: rgba(255,255,255,.9);
    text-align: center;
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
    line-height: 1.2;
}

.pitch-stats {
    font-size: .52rem;
    color: rgba(255,255,255,.65);
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
}

/* ── Alineación: layout ───────────────────────────────── */

.ali-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 960px) {
    .ali-layout { grid-template-columns: 1fr; }
}

.ali-tactic-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

/* Slots sobre el campo */
.pitch-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
    transition: transform .15s;
}

.slot-dot {
    width: 54px; height: 54px;
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(4px);
    transition: all .2s;
    gap: 1px;
}

.slot-dot.filled  { border-width: 2.5px; }
.slot-dot.empty   { border-style: dashed; opacity: .65; }
.slot-dot.empty:hover { opacity: 1; background: rgba(255,255,255,.2); }

/* Colores por posición */
.slot-por { border-color: #818cf8; background: rgba(99,102,241,.2); }
.slot-def { border-color: #34d399; background: rgba(52,211,153,.15); }
.slot-med { border-color: #60a5fa; background: rgba(96,165,250,.15); }
.slot-del { border-color: #f87171; background: rgba(248,113,113,.15); }

.slot-ini {
    font-size: .75rem; font-weight: 800; color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.8); line-height: 1;
}
.slot-ovr {
    font-size: .6rem; font-weight: 700;
    color: rgba(255,255,255,.7); line-height: 1;
}
.slot-empty-icon {
    font-size: 1.3rem; font-weight: 300;
    color: rgba(255,255,255,.5); line-height: 1;
}

.slot-label { text-align: center; }
.slot-name {
    display: block; font-size: .6rem; font-weight: 700;
    color: rgba(255,255,255,.9);
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
    white-space: nowrap; max-width: 60px;
    overflow: hidden; text-overflow: ellipsis;
}
.slot-pos-badge {
    display: inline-block; font-size: .5rem; font-weight: 400;
    background: rgba(255,255,255,.15); border-radius: 3px;
    padding: 0 3px; color: rgba(255,255,255,1);
    text-transform: uppercase;
}
.slot-estado-ico {
    display: inline-block; font-size: .65rem; margin-left: 2px; vertical-align: middle;
}

/* Slots con jugador no disponible */
.slot-dot.slot-lesionado  { border-color: var(--danger) !important; box-shadow: 0 0 8px rgba(239,68,68,.6); }
.slot-dot.slot-sancionado { border-color: #dc2626       !important; box-shadow: 0 0 8px rgba(220,38,38,.4); }

/* Estados drag */
.slot-highlight .slot-dot { border-style: solid; opacity: 1; box-shadow: 0 0 10px rgba(255,255,255,.4); }
.slot-over .slot-dot      { transform: scale(1.12); box-shadow: 0 0 16px rgba(255,255,255,.6); }
.slot-wrong               { animation: shake .3s; }
@keyframes shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

/* ── Banco de jugadores ───────────────────────────────── */

.ali-right {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 140px);
    position: sticky;
    top: 70px;
}

.bench-tabs {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-3);
    flex-shrink: 0;
}

.bench-tab {
    padding: .25rem .6rem;
    border-radius: 99px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-3);
    font-size: .72rem; font-weight: 700;
    cursor: pointer; transition: all .15s;
}
.bench-tab:hover  { color: var(--text-1); border-color: var(--accent); }
.bench-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.bench-list {
    flex: 1;
    overflow-y: auto;
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.bench-card {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .5rem .6rem;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--bg-1);
    cursor: grab;
    transition: all .15s;
    user-select: none;
}

.bcard-row1 {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.bench-card:hover    { border-color: var(--accent); background: var(--bg-2); }
.bench-card.selected { border-color: var(--accent); background: rgba(16,185,129,.12); box-shadow: 0 0 0 2px var(--accent); }
.bench-card.en-campo      { opacity: .45; cursor: default; }
.bench-card.dragging      { opacity: .3; }
.bench-card.no-disponible { opacity: .55; cursor: not-allowed; border-color: transparent; }
.bench-card.no-disponible:hover { border-color: transparent; background: var(--bg-1); }


.bcard-info  { flex: 1; min-width: 0; }
.bcard-no-disp  { font-size: .65rem; font-weight: 600; margin-top: .2rem; }
.bcard-lesion   { color: var(--danger); }
.bcard-sancion  { color: var(--warn); }
.bcard-nombre {
    font-size: .78rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bcard-meta { display: flex; align-items: center; gap: .3rem; margin-top: .15rem; }

.bcard-stats {
    display: flex;
    gap: 0;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    padding-top: .35rem;
}
.bcard-stat { display: flex; flex-direction: column; align-items: center; }
.bcard-stat-lbl { font-size: .5rem; color: var(--text-3); font-weight: 700; text-transform: uppercase; }
.bcard-stat-val { font-size: .72rem; font-weight: 800; color: var(--text-1); }

.bcard-status { flex-shrink: 0; min-width: 60px; text-align: right; }

/* ── Suplentes drag-drop ──────────────────────────────── */
.sup-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .35rem;
}

.sup-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .5rem .25rem;
    border-radius: var(--r);
    border: 1px dashed var(--border);
    cursor: pointer;
    transition: all .15s;
    min-width: 0;       /* permite que la grid respete 1fr sin expandirse por min-content */
    overflow: hidden;
}
.sup-slot:hover       { border-color: var(--accent); }
.sup-highlight        { border-color: var(--accent); border-style: solid; background: rgba(16,185,129,.07); }
.sup-over             { border-style: solid; background: rgba(16,185,129,.15); transform: scale(1.04); }

.sup-dot {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,.2);
    background: var(--bg-3);
    transition: all .15s;
}
.sup-dot.filled { border-style: solid; }
.sup-dot.empty  { border-style: dashed; opacity: .6; }

.sup-por { border-color: rgba(129,140,248,.5); }
.sup-por .sup-dot.filled { border-color: #818cf8; background: rgba(99,102,241,.2); }
.sup-def { border-color: rgba(52,211,153,.5); }
.sup-def .sup-dot.filled { border-color: #34d399; background: rgba(52,211,153,.15); }
.sup-med { border-color: rgba(96,165,250,.5); }
.sup-med .sup-dot.filled { border-color: #60a5fa; background: rgba(96,165,250,.15); }
.sup-del { border-color: rgba(248,113,113,.5); }
.sup-del .sup-dot.filled { border-color: #f87171; background: rgba(248,113,113,.15); }

.sup-ini       { font-size: .7rem; font-weight: 800; color: var(--text-1); }
.sup-empty-icon { font-size: 1.1rem; color: var(--text-3); }
.sup-label     { text-align: center; }
.sup-pos       { display: block; font-size: .55rem; font-weight: 800; text-transform: uppercase; color: var(--text-3); }
.sup-name      { display: block; font-size: .65rem; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

@media (max-width: 600px) {
    /* Suplentes: dots más pequeños para caber en 7 columnas */
    .sup-slot    { padding: .35rem 0; gap: .2rem; }
    .sup-dot     { width: 32px; height: 32px; }
    .sup-ini     { font-size: .6rem; }
    .sup-empty-icon { font-size: .9rem; }
    .sup-name    { font-size: .55rem; }
    /* Campo: reducir gap y tamaño de slot para filas de hasta 5 jugadores */
    .pitch-row   { gap: .4rem; }
    .pitch       { padding: 1.25rem .5rem; }
    .slot-dot    { width: 44px; height: 44px; }
    .slot-name   { max-width: 46px; font-size: .55rem; }
    .slot-ini    { font-size: .68rem; }
    .slot-ovr    { font-size: .52rem; }
}

@media (max-width: 380px) {
    /* Pitch muy pequeño: reducir dots y gaps para caber en 320px */
    .pitch-dot, .slot-dot { width: 36px; height: 36px; }
    .pitch-row   { gap: .1rem; }
    .pitch-wrap  { padding: .5rem; }
    .pitch       { padding: 1rem .25rem; }
    .dot-name, .slot-name { max-width: 36px; font-size: .5rem; }
    .slot-ini    { font-size: .6rem; }
    .sup-dot     { width: 28px; height: 28px; }
    .sup-name    { font-size: .5rem; }
}

/* ── Forms ────────────────────────────────────────────── */

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

.form-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.form-control {
    width: 100%;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r);
    color: var(--text-1);
    padding: .5rem .75rem;
    font-size: .875rem;
    font-family: var(--font);
    transition: border-color .15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}

select.form-control option { background: var(--bg-2); }
.form-control-sm { padding: .3rem .5rem; font-size: .8rem; }

/* ── Alerts ───────────────────────────────────────────── */

.alert {
    padding: .7rem 1rem;
    border-radius: var(--r);
    font-size: .85rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.alert-ok   { background: rgba(16,185,129,.1);  border: 1px solid rgba(16,185,129,.3); color: #34d399; }
.alert-err  { background: rgba(239,68,68,.1);   border: 1px solid rgba(239,68,68,.3);  color: #f87171; }
.alert-warn { background: rgba(245,158,11,.1);  border: 1px solid rgba(245,158,11,.3); color: #fbbf24; }
.alert-info { background: rgba(59,130,246,.1);  border: 1px solid rgba(59,130,246,.3); color: #60a5fa; }
.alert-close {
    background: none; border: none; cursor: pointer; color: inherit;
    font-size: .95rem; opacity: .5; padding: 0; line-height: 1; flex-shrink: 0;
}
.alert-close:hover { opacity: 1; }

/* ── Login ────────────────────────────────────────────── */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-0);
    padding: 1rem;
}

.login-box {
    width: 100%;
    max-width: 380px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 2.25rem 2rem;
    box-shadow: var(--shadow-lg);
}

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

.login-logo-icon { font-size: 3rem; line-height: 1; margin-bottom: .5rem; }

.login-logo-name {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -.02em;
}

.login-logo-sub {
    font-size: .75rem;
    color: var(--text-3);
    margin-top: .2rem;
}

/* ── Utility ──────────────────────────────────────────── */

/* Notas de rendimiento */
.nota-exc { color: #4ade80; }   /* ≥8.5 excelente — verde brillante */
.nota-bue { color: #10b981; }   /* 7.5–8.5 bueno — verde */
.nota-nor { color: #f97316; }   /* 5.5–7.5 normal — naranja */
.nota-baj { color: #ef4444; }   /* <5.5 bajo — rojo */

.text-accent  { color: var(--accent); }
.text-accent-soft { color: #34d399; }
.text-danger  { color: var(--danger); }
.text-danger-soft { color: #fca5a5; }
.text-warn    { color: var(--warn);   }
.text-gold    { color: var(--gold);   }
.text-muted   { color: var(--text-2); }
.text-xs      { font-size: .72rem; }
.text-sm      { font-size: .82rem; }
.text-lg      { font-size: 1.1rem; }
.font-bold    { font-weight: 700; }
.font-mono    { font-family: monospace; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ── Scrollbar ────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: var(--bg-1); }
::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

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

/* ── Plantilla: tarjetas móvil ───────────────────────────────────────────── */

.pc-list { display: none; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }

.pc-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: .75rem;
    display: flex; flex-direction: column; gap: .5rem;
}

.pc-identity {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.pc-name  { font-weight: 700; font-size: .9rem; flex: 1; min-width: 0; }
.pc-age   { font-size: .75rem; color: var(--text-3); }
.pc-val   { font-size: .72rem; font-family: monospace; margin-left: auto; }

.pc-attrs { display: flex; flex-direction: column; gap: .3rem; }
.pc-attr  { display: flex; align-items: center; gap: .5rem; }
.pc-attr-lbl {
    font-size: .62rem; font-weight: 700; color: var(--text-3);
    text-transform: uppercase; width: 28px; flex-shrink: 0; text-align: right;
}
.pc-attr .attr-row { flex: 1; min-width: 0; }
.pc-attrs .attr-bar { flex: 1 1 0% !important; min-width: 0; }

.pc-footer {
    display: flex; align-items: center; gap: .75rem;
    padding-top: .4rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.pc-stats  { display: flex; gap: .6rem; }
.pc-stat   { font-size: .8rem; font-weight: 600; }
.pc-estado { margin-left: auto; }
.pc-accion { }

/* Desktop: ocultar tarjetas, mostrar tabla */
.pc-list           { display: none; }
.plantilla-tabla   { display: block; }

@media (max-width: 760px) {
    .pc-list         { display: flex; }
    .plantilla-tabla { display: none; }
}

/* ── Modal selector alineación ───────────────────────────────────────────── */

.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.75);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-box {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    width: 100%; max-width: 440px;
    max-height: 85vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}

.modal-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-titulo { font-weight: 700; font-size: .95rem; }

.modal-actual {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem 1rem;
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
    font-size: .82rem;
    flex-shrink: 0;
}

.modal-body {
    overflow-y: auto;
    flex: 1;
    padding: .5rem;
    display: flex; flex-direction: column; gap: .3rem;
}

.modal-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .6rem;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--bg-1);
    transition: border-color .15s;
}
.modal-row:hover:not(.modal-row-bloq) { border-color: var(--accent); }
.modal-row-bloq  { opacity: .45; }
/* Jugador actual del slot */
.modal-row-actual {
    border: 2px solid var(--accent);
    background: rgba(16,185,129,.08);
}
/* Ya es titular en otro slot */
.modal-row-titular {
    border-left: 3px solid var(--gold);
    background: rgba(245,158,11,.06);
}
/* Ya es suplente */
.modal-row-suplente {
    border-left: 3px solid var(--info);
    background: rgba(96,165,250,.06);
}

.modal-row-info  { flex: 1; min-width: 0; }
.modal-row-nombre { font-weight: 700; font-size: .88rem; line-height: 1.3; }
.modal-row-meta  { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; flex-wrap: wrap; }

.modal-row-attrs {
    display: flex; gap: .5rem;
    margin-top: .4rem;
}
.modal-attr {
    display: flex; flex-direction: column; align-items: center;
    gap: .1rem; flex: 1;
}
.modal-attr-lbl {
    font-size: .6rem; color: var(--text-3);
    text-transform: uppercase; letter-spacing: .03em;
}
.modal-attr-val {
    font-size: .82rem; font-weight: 700; color: var(--text-1);
}

/* ── Clasificación ───────────────────────────────────────────────────────── */

/* Fila del equipo propio */
.fila-propia { background: rgba(16,185,129,.06); }
.fila-propia:hover { background: rgba(16,185,129,.1); }

/* Indicador de zona (barra izquierda de celda posición) */
.pos-indicador {
    display: inline-block;
    width: 3px;
    height: 1.1em;
    border-radius: 2px;
    background: transparent;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.zona-campeon  { background: var(--gold); }
.zona-europa   { background: var(--accent); }
.zona-descenso { background: var(--danger); }

/* Forma últimos partidos */
.forma-strip { display: flex; gap: 3px; align-items: center; }
.forma-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.forma-w { background: var(--accent); }
.forma-d { background: var(--warn); }
.forma-l { background: var(--danger); }

/* Leyenda de zonas */
.clasi-leyenda {
    display: flex; gap: 1.25rem; align-items: center;
    font-size: .75rem; color: var(--text-2);
    padding: .25rem 0;
}
.leyenda-item {
    display: flex; align-items: center; gap: .4rem;
}
.leyenda-item .pos-indicador {
    position: static; transform: none;
    width: 8px; height: 14px;
}

/* ── Calendario ──────────────────────────────────────────────────────────── */

/* Layout dos columnas: sidebar jornadas + contenido */
.cal-layout {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: 1rem;
    align-items: start;
}

/* Columna lateral con la lista de jornadas — sticky */
.cal-sidebar {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.cal-nav-btn {
    display: flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.2rem;
    border-radius: var(--r);
    background: var(--bg-2);
    color: var(--text-2);
    font-size: .72rem; font-weight: 600;
    border: 1px solid var(--border);
    text-decoration: none;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.cal-nav-btn:hover  { background: var(--bg-3); color: var(--text-1); }
.cal-nav-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cal-nav-btn.jugada { opacity: .45; }
.cal-nav-btn.jugada.active { opacity: 1; }

/* Bloque de jornada */
.cal-jornada {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: .75rem;
    overflow: hidden;
}
.cal-jornada-activa {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.cal-jugada { opacity: .7; }
.cal-jugada:hover { opacity: 1; }

.cal-jornada-hd {
    display: flex; align-items: center; gap: .75rem;
    padding: .5rem .85rem;
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
}
.cal-jornada-num { font-weight: 600; font-size: .85rem; }
.cal-mi-partido  { margin-left: auto; font-size: .8rem; color: var(--text-2); display: flex; align-items: center; gap: .35rem; }

/* Lista de partidos */
.cal-partidos { padding: .4rem 0; }

.cal-partido {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
    padding: .3rem .85rem;
    font-size: .82rem;
}
.cal-partido:hover { background: var(--bg-3); }
.cal-partido-mio  { background: rgba(16,185,129,.05); }
.cal-partido-mio:hover { background: rgba(16,185,129,.1); }

.cal-equipo { color: var(--text-1); }
.cal-local  { text-align: right; }
.cal-visitante { text-align: left; }
.cal-yo     { font-weight: 700; color: var(--accent); }

.cal-vs {
    font-size: .72rem; font-weight: 600;
    color: var(--text-3);
    padding: .15rem .4rem;
    background: var(--bg-3);
    border-radius: 4px;
    text-align: center; white-space: nowrap;
}

.cal-resultado {
    font-size: .85rem; font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 4px;
    text-align: center; white-space: nowrap;
    background: var(--bg-3);
    color: var(--text-2);
    display: inline-block;
    cursor: pointer;
    transition: opacity .12s, transform .1s;
}
a.cal-resultado:hover { opacity: .8; transform: scale(1.05); }
.res-victoria { background: rgba(16,185,129,.2);  color: var(--accent); }
.res-empate   { background: rgba(245,158,11,.15); color: var(--warn); }
.res-derrota  { background: rgba(239,68,68,.15);  color: var(--danger); }

/* Resumen compacto resultados */
.res-resumen {
    padding: .65rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem 1.25rem;
    flex-wrap: nowrap;
}
.res-resumen-pts   { display: flex; align-items: baseline; gap: .3rem; flex-shrink: 0; }
.res-resumen-sep   { width: 1px; height: 1.2rem; background: var(--border); flex-shrink: 0; }
.res-resumen-grupo { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; font-size: .88rem; }

@media (max-width: 600px) {
    .res-resumen { flex-direction: column; align-items: flex-start; gap: 0; }
    .res-resumen-sep { width: 100%; height: 1px; margin: .45rem 0; }
    .res-resumen-grupo { gap: 1rem; }
}

/* ── Resultados ──────────────────────────────────────────────────────────── */

.stat-big {
    font-size: 2rem; font-weight: 800; line-height: 1.1;
    color: var(--text-1);
}

.res-fila {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .5rem .75rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--border);
}
.res-fila:last-child { border-bottom: none; }
.res-fila:hover { background: var(--bg-3); }

.res-meta     { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.res-jornada  { text-align: center; white-space: nowrap; }
.res-rival    { font-size: .85rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.res-acciones { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }

@media (max-width: 600px) {
    .res-fila {
        grid-template-columns: 1fr;
        gap: .3rem;
        padding: .65rem 1rem;
    }
    .res-rival    { font-size: .82rem; }
    .res-acciones { margin-top: .1rem; }
}

.res-marcador {
    font-size: .9rem; font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--text-2);
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    transition: opacity .12s, transform .1s;
    display: inline-block;
}
a.res-marcador:hover { opacity: .8; transform: scale(1.05); }
.res-marcador.res-victoria { background: rgba(16,185,129,.2);  color: var(--accent); }
.res-marcador.res-empate   { background: rgba(245,158,11,.15); color: var(--warn); }
.res-marcador.res-derrota  { background: rgba(239,68,68,.15);  color: var(--danger); }

.res-badge {
    font-size: .7rem; font-weight: 700;
    width: 1.4rem; height: 1.4rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-3); color: var(--text-3);
    flex-shrink: 0;
}
.res-badge.res-victoria { background: rgba(16,185,129,.25);  color: var(--accent); }
.res-badge.res-empate   { background: rgba(245,158,11,.2);   color: var(--warn); }
.res-badge.res-derrota  { background: rgba(239,68,68,.2);    color: var(--danger); }

/* ── Estrategia ──────────────────────────────────────────────────────────── */

.est-seccion-label {
    font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-3);
    margin-bottom: .6rem;
}

/* Empleado actual — card destacada */
.est-empleado-actual {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.est-emp-icono  { font-size: 2rem; flex-shrink: 0; }
.est-emp-info   { flex: 1; min-width: 0; }
.est-emp-nombre { font-size: 1rem; font-weight: 700; }
.est-emp-desc   { font-size: .8rem; color: var(--text-2); margin-top: .2rem; }

/* Grid de tarjetas de técnicos */
.est-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .85rem;
}

.est-card {
    padding: .9rem 1rem;
    display: flex; flex-direction: column; gap: .75rem;
}
.est-card-actual {
    border-color: var(--accent);
    opacity: .7;
}

.est-card-top {
    display: flex; gap: .75rem; align-items: flex-start;
}
.est-card-icono { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.est-card-info  { flex: 1; min-width: 0; }
.est-card-nombre { font-weight: 700; font-size: .9rem; }
.est-card-desc   { margin-top: .2rem; line-height: 1.4; }

.est-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid var(--border);
    padding-top: .6rem;
}
.est-card-precio { font-size: .85rem; font-weight: 600; }
.text-gold { color: var(--gold); }

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

@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }

    .sidebar {
        position: fixed;
        left: -230px;
        top: 58px;
        height: calc(100vh - 58px);
        z-index: 300;
        width: 230px;
        box-shadow: var(--shadow-lg);
    }

    .sidebar.open { left: 0; }

    .hamburger { display: block; }

    .grid-3 { grid-template-columns: 1fr 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .main { padding: 1rem; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .header-info .header-team,
    .header-info .header-user { display: none; }
    .header      { padding: 0 .75rem; gap: .5rem; }
    .header-info { gap: .5rem; }

    .cal-layout {
        grid-template-columns: 1fr;
    }
    .cal-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .cal-nav-btn {
        width: 2rem; height: 2rem;
    }
}

/* ── Detalle de partido ──────────────────────────────────────────────────── */

.btn-back {
    display: inline-block;
    font-size: .82rem;
    color: var(--text-3);
    margin-bottom: .75rem;
    cursor: pointer;
}
.btn-back:hover { color: var(--text-1); }

.partido-jornada-label {
    font-size: .72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}

.partido-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    margin-bottom: 1.25rem;
}
.partido-header > div:first-child { text-align: right; }
.partido-header > div:last-child  { text-align: left; }
.partido-header > div:nth-child(2){ text-align: center; }

.partido-estadio-info {
    display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
    font-size: .78rem; color: var(--text-3);
    padding: .4rem 1rem; margin-bottom: .5rem;
}

.partido-team-name { font-size: 1rem; font-weight: 700; }
.partido-team-mgr  { font-size: .75rem; color: var(--text-3); margin-top: .15rem; }
.partido-team-emp  { font-size: .72rem; color: var(--text-3); margin-top: .1rem; }

.partido-dinero-card    { padding: 1.25rem; margin-top: 1rem; }
.partido-dinero-title   { font-size: .85rem; font-weight: 700; margin-bottom: .75rem; color: var(--text-2); }
.partido-dinero-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
                          color: var(--text-3); padding: .5rem 0 .2rem; }
.partido-dinero-row     { display: flex; justify-content: space-between; align-items: center;
                          padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .875rem; }
.partido-dinero-row:last-child { border-bottom: none; }
.partido-dinero-lbl     { color: var(--text-2); }
.partido-dinero-val     { font-weight: 600; }
.partido-dinero-diff    { margin-top: .35rem; padding-top: .5rem; border-top: 2px solid var(--border); }
.partido-dinero-pos     { color: var(--accent); }
.partido-dinero-neg     { color: var(--danger); }

.partido-score {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.partido-score-label {
    font-size: .68rem;
    color: var(--text-3);
    margin-top: .3rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.partido-timeline-header {
    display: grid;
    grid-template-columns: 1fr 3rem 1fr;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .35rem;
}
.partido-timeline-header span:first-child { text-align: right; }
.partido-timeline-header span:last-child  { text-align: left; }

.partido-timeline-sep {
    border-top: 1px solid var(--border);
    margin-bottom: .6rem;
}

.partido-timeline {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.partido-ev {
    display: grid;
    grid-template-columns: 1fr 3rem 1fr;
    align-items: center;
    gap: .4rem;
    min-height: 1.6rem;
}
.partido-ev-local  { text-align: right; font-size: .82rem; }
.partido-ev-visit  { text-align: left;  font-size: .82rem; }
.partido-ev-min {
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-3);
    background: var(--bg-3);
    border-radius: 3px;
    padding: .1rem .2rem;
    line-height: 1.5;
    white-space: nowrap;
}
.ev-ast { color: var(--text-3); font-size: .8em; }
.ev-ast img { margin-left: .3rem; }

/* ── Rendimiento partido: grid 2 columnas → 1 columna en móvil ───────────── */
.rend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.rend-col-local { border-right: 1px solid var(--border); }
@media (max-width: 600px) {
    .rend-grid { grid-template-columns: 1fr; }
    .rend-col-local { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── Estadísticas ─────────────────────────────────────────────────────────── */
.stats-tabs       { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.stats-tab        { padding: .45rem 1rem; border-radius: 6px; font-size: .85rem; font-weight: 500;
                    background: var(--bg-1); border: 1px solid var(--border); color: var(--text-2);
                    text-decoration: none; transition: background .15s; }
.stats-tab:hover  { background: var(--bg-2); color: var(--text-1); }
.stats-tab.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 700; }

.stats-table      { width: 100%; border-collapse: collapse; font-size: .875rem; }
.stats-table thead th { padding: .5rem .75rem; text-align: left; font-size: .72rem;
                        text-transform: uppercase; letter-spacing: .05em; color: var(--text-3);
                        border-bottom: 1px solid var(--border); white-space: nowrap; }
.stats-table tbody tr { border-bottom: 1px solid var(--border); }
.stats-table tbody tr:last-child { border-bottom: none; }
.stats-table tbody tr:hover { background: var(--bg-2); }
.stats-table tbody td { padding: .5rem .75rem; vertical-align: middle; }

.stats-th-rank    { width: 2rem; text-align: center; }
.stats-th-pos     { width: 3.5rem; }
.stats-th-num     { width: 3.5rem; text-align: center; }
.stats-td-rank    { text-align: center; color: var(--text-3); font-size: .8rem; font-weight: 700; }
.stats-td-num     { text-align: center; color: var(--text-2); }

.stats-player         { display: flex; align-items: center; gap: .5rem; }
.stats-player img     { flex-shrink: 0; }
.stats-player-name    { font-weight: 500; color: var(--text-1); }
.stats-player-team    { font-size: .75rem; color: var(--text-3); margin-top: .05rem; }

.stats-highlight  { color: var(--accent) !important; font-weight: 700; }
.stats-yellow     { color: var(--warn) !important; font-weight: 700; }
.stats-red        { color: var(--danger) !important; font-weight: 700; }
.stats-row-mine   { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.stats-row-mine:hover { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.stats-empty      { text-align: center; color: var(--text-3); padding: 2rem; }

@media (max-width: 600px) { .stats-hide-sm { display: none; } }

@media (max-width: 600px) {
    .jugador-header { flex-direction: column; gap: .75rem; padding: 1rem; }
    .jugador-attrs  { flex-wrap: wrap; justify-content: center; align-items: center; flex-shrink: 1; }
}

/* ── Ficha de jugador ─────────────────────────────────────────────────────── */
.jugador-header        { display: flex; gap: 1.5rem; padding: 1.25rem; flex-wrap: wrap; align-items: flex-start; }
.jugador-header-left   { display: flex; gap: 1rem; align-items: flex-start; flex: 1; min-width: 0; }
.jugador-ovr           { width: 3rem; height: 3rem; border-radius: 8px; background: var(--accent);
                         color: #000; font-size: 1.1rem; font-weight: 800;
                         display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.jugador-nombre        { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.jugador-meta          { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .3rem; }
.jugador-equipo        { font-size: .82rem; color: var(--text-2); }

.jugador-attrs         { display: flex; gap: .6rem; align-items: flex-end; flex-shrink: 0; }
.jugador-attr          { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.jugador-attr-bar      { width: 18px; height: 60px; background: var(--bg-3); border-radius: 4px;
                         display: flex; align-items: flex-end; overflow: hidden; }
.jugador-attr-fill     { width: 100%; border-radius: 4px; transition: height .3s; }
.jugador-attr-val      { font-size: .75rem; font-weight: 700; color: var(--text-1); }
.jugador-attr-lbl      { font-size: .6rem; color: var(--text-3); text-transform: uppercase; }

.jugador-totales       { padding: 1.25rem; }
.jugador-section-title { font-size: .8rem; font-weight: 700; color: var(--text-2);
                         text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }
.jugador-totales-grid  { display: flex; flex-wrap: wrap; gap: .75rem; }
.jugador-stat-box      { background: var(--bg-2); border-radius: 8px; padding: .6rem .9rem;
                         text-align: center; min-width: 5rem; }
.jugador-stat-val      { font-size: 1.4rem; font-weight: 800; color: var(--text-1); line-height: 1; }
.jugador-stat-lbl      { font-size: .7rem; color: var(--text-3); margin-top: .2rem; }

.text-accent       { color: var(--accent)  !important; }
.text-accent-soft  { color: #34d399        !important; }
.text-warn         { color: var(--warn)    !important; }
.text-danger       { color: var(--danger)  !important; }
.text-danger-soft  { color: #fca5a5        !important; }

/* Enlace de jugador en tablas */
a.jugador-link         { color: inherit; text-decoration: none; }
a.jugador-link:hover   { color: var(--accent); text-decoration: underline; }

/* Enlace de equipo rival */
a.equipo-link          { color: inherit; text-decoration: none; }
a.equipo-link:hover    { color: var(--info); text-decoration: underline; }

/* ── Crónica de ataques ─────────────────────────────────────────────────────── */
.atk-grid       { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.atk-col        { padding: .5rem 0; }
.atk-col:first-child { border-right: 1px solid var(--border); }
.atk-col-hd     { font-size: .78rem; font-weight: 700; color: var(--text-2);
                   padding: .3rem 1rem .6rem; border-bottom: 1px solid var(--border); }
.atk-row        { display: flex; align-items: flex-start; gap: .4rem;
                   padding: .45rem .75rem; border-bottom: 1px solid var(--bg-2);
                   border-left: 3px solid transparent; }
.atk-row:last-child { border-bottom: none; }
.atk-gol        { border-left-color: var(--accent); background: rgba(16,185,129,.06); }
.atk-parada     { border-left-color: var(--info);   background: rgba(96,165,250,.05); }
.atk-def        { border-left-color: var(--warn);   background: rgba(245,158,11,.04); }
.atk-fuera      { border-left-color: var(--bg-3); }
.atk-min        { font-size: .72rem; font-weight: 700; color: var(--text-3);
                   min-width: 2rem; flex-shrink: 0; padding-top: .1rem; }
.atk-nar        { font-size: .78rem; line-height: 1.45; flex: 1; color: var(--text); }
.atk-prob       { font-size: .68rem; color: var(--text-3); flex-shrink: 0;
                   padding-top: .15rem; min-width: 2.2rem; text-align: right; }
.atk-empty      { font-size: .8rem; color: var(--text-3); padding: 1rem; margin: 0; }
@media (max-width: 700px) {
    .atk-grid { grid-template-columns: 1fr; }
    .atk-col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ── Stats del partido ──────────────────────────────────────────────────────── */
.pst-section-hd {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-3);
    margin: 1rem 0 .4rem; padding-bottom: .3rem;
    border-bottom: 1px solid var(--border);
}
.pst-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr 2.5rem;
    align-items: center; gap: .35rem;
    padding: .2rem 0 0;
}
.pst-num        { font-size: .85rem; font-weight: 700; text-align: right; }
.pst-num-r      { text-align: left; }
.pst-label-center { font-size: .78rem; color: var(--text-2); text-align: center; }
.pst-stat-bar   { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: .3rem; }
.pst-stat-bar > div { height: 100%; }
.pst-visit { background: #f97316; }
@media (max-width: 500px) {
    .pst-row { grid-template-columns: 2rem 1fr 2rem; }
    .pst-label-center { font-size: .72rem; }
}

/* Banderas en el timeline del partido: más pequeñas */
.partido-ev img, .partido-timeline-header img {
    width: 14px !important;
    height: 10px !important;
}

@media (max-width: 500px) {
    .partido-header { grid-template-columns: 1fr; text-align: center !important; gap: .5rem; }
    .partido-header > div:first-child,
    .partido-header > div:last-child { text-align: center; }
    .partido-score { font-size: 1.8rem; }
}