:root {
    color-scheme: light;
    --ink-950: #07141d;
    --ink-900: #0b2130;
    --ink-800: #153346;
    --ink-700: #24485d;
    --ink-600: #426071;
    --ink-500: #687d8a;
    --ink-400: #92a0aa;
    --ink-300: #c7d1d8;
    --ink-200: #dbe3e8;
    --ink-100: #edf2f5;
    --ink-50: #f7fafc;
    --white: #fff;
    /* Celeste Iquique */
    --brand-800: #06283d;  /* navy profundo */
    --brand-700: #0a3d62;  /* navy */
    --brand-600: #1b6ca8;  /* celeste primary deep */
    --brand-500: #2e93cf;  /* celeste primary bright */
    --brand-100: #d6ecf8;  /* celeste claro */
    --brand-50:  #eef7fc;  /* celeste muy claro */
    --celeste-400: #38bdf8; /* glow / acento activo */
    --grass-700: #047857;
    --grass-100: #d1fae5;
    --grass-500: #10b981;
    --red-700: #be123c;
    --red-600: #e11d48;
    --red-100: #ffe4e6;
    --amber-700: #b45309;
    --amber-100: #fef3c7;
    --purple-700: #6d28d9;
    --purple-100: #ede9fe;
    --teal-700: #0f766e;
    --teal-100: #ccfbf1;
    --indigo-700: #4338ca;
    --indigo-100: #e0e7ff;
    --surface: #ffffff;
    --surface-muted: #f4f7f9;
    --surface-raised: rgba(255, 255, 255, .92);
    --line: #dce5ea;
    --line-strong: #c7d4dc;
    /* Sombras tintadas celeste */
    --shadow-xs: 0 1px 2px rgba(10, 61, 98, .05);
    --shadow-sm: 0 4px 14px rgba(10, 61, 98, .08);
    --shadow-md: 0 18px 48px rgba(10, 61, 98, .12);
    --shadow-lg: 0 28px 70px rgba(10, 61, 98, .22);
    /* Gradientes stat cards (look festivo C1) */
    --grad-training:  linear-gradient(135deg, #0a3d62, #1b6ca8);
    --grad-match:     linear-gradient(135deg, #c0392b, #e74c3c);
    --grad-occupancy: linear-gradient(135deg, #0f8a6e, #1abc9c);
    --grad-pending:   linear-gradient(135deg, #c87f12, #f39c12);
    --radius-xs: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --topbar-height: 56px;
    --content-width: 1540px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        linear-gradient(180deg, rgba(238, 251, 254, .75), rgba(247, 250, 252, .96) 240px),
        repeating-linear-gradient(90deg, rgba(7, 20, 29, .025) 0 1px, transparent 1px 96px),
        #f5f8fb;
    color: var(--ink-800);
    font-family: "Barlow", "Figtree", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body:has(#login-guard:not(.hidden)) {
    overflow-y: hidden;
}

/* Login activo: ocultar app shell (evita que topbar/sidebar asomen sobre login) */
body:has(#login-guard:not(.hidden)) .topbar,
body:has(#login-guard:not(.hidden)) .sidebar {
    display: none !important;
}

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

button,
a,
select,
input,
textarea {
    touch-action: manipulation;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

h1,
h2,
h3,
p {
    margin: 0;
}

h1,
.hero h2,
.page-header h2,
.login-title {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    letter-spacing: .01em;
}

h1,
h2,
h3 {
    text-wrap: balance;
}

.hidden {
    display: none !important;
}

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

.skip-link {
    background: var(--brand-500);
    border-radius: 0 0 var(--radius) var(--radius);
    color: var(--ink-950);
    font-weight: 800;
    left: 18px;
    padding: 10px 14px;
    position: fixed;
    top: -64px;
    z-index: 300;
}

.skip-link:focus {
    top: 0;
}

:focus-visible {
    box-shadow: 0 0 0 4px rgba(46, 147, 207, .22);
    outline: 2px solid rgba(27, 108, 168, .82);
    outline-offset: 2px;
}

.eyebrow {
    color: var(--brand-600);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.eyebrow.light {
    color: rgba(230, 250, 255, .88);
}

.muted {
    color: var(--ink-600);
}

.small {
    font-size: 12px;
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-height);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 100;
    box-shadow: var(--shadow-xs);
    gap: 0;
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    flex-shrink: 0;
}

.topbar-crest {
    width: 28px; height: 34px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.topbar-crest img { width: 100%; height: 100%; object-fit: cover; }

.topbar-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.topbar-brand-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.2;
}

.topbar-brand-sub {
    font-size: 10px;
    color: var(--ink-500);
    line-height: 1.2;
}

.topbar-divider {
    width: 1px;
    height: 24px;
    background: var(--line);
    margin: 0 18px;
    flex-shrink: 0;
}

.topbar-date {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}

.topbar-date-main {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-600);
    line-height: 1.2;
}

.topbar-date-sub {
    font-size: 10px;
    color: var(--ink-400);
    line-height: 1.2;
}

.topbar-spacer { flex: 1; }

.topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.topbar-online-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--grass-500);
    flex-shrink: 0;
}

.topbar-icon-btn {
    width: 32px; height: 32px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-500);
    cursor: pointer;
    position: relative;
    font-size: 14px;
    transition: background-color .15s ease;
}

.topbar-icon-btn:hover { background: var(--ink-50); }

.topbar-icon-btn svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.topbar-notif-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 15px; height: 15px;
    background: var(--red-600);
    border-radius: 8px;
    font-size: 8px; font-weight: 700;
    color: white;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    border: 1.5px solid var(--surface);
}

.topbar-notif-badge[data-count="0"] { display: none; }

.topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 2px;
}

.topbar-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.topbar-user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-800);
    line-height: 1.2;
}

.topbar-user-role {
    font-size: 10px;
    color: var(--ink-500);
    line-height: 1.2;
}

.topbar-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--brand-100);
    flex-shrink: 0;
    cursor: pointer;
}

.session-switcher {
    background: rgba(0, 0, 0, .16);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 240px;
    padding: 6px 11px;
}

.session-switcher span {
    color: #9bdbe8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.session-switcher select {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    outline: 0;
}

.app-shell {
    display: flex;
    margin: var(--topbar-height) auto 0;
    max-width: var(--content-width);
    min-height: calc(100vh - var(--topbar-height));
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
    width: 160px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 14px 8px 12px;
    flex-shrink: 0;
    overflow-y: auto;
    gap: 2px;
}

.content {
    flex: 1;
    min-width: 0;
    padding: 20px 24px 34px;
    overflow-y: auto;
}

.view {
    display: none;
}

.view.active {
    display: block;
    animation: view-enter .22s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes view-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .view.active {
        animation: none;
    }
    .available-slot {
        transition: background .15s ease, border-color .15s ease, color .15s ease;
    }
    .available-slot:hover:not(:disabled) {
        transform: none;
    }
    .event-card {
        transition: none;
    }
    .hero-badge-dot {
        animation: none;
    }
}

.card,
.stat-card,
.series-card,
.fixture-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}

.series-card,
.fixture-card {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}

.role-pill {
    background: var(--brand-100);
    border: 1px solid rgba(27, 108, 168, .18);
    border-radius: 999px;
    color: var(--brand-700);
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    max-width: 100%;
    padding: 5px 8px;
}

.role-pill.admin {
    background: var(--amber-100);
    border-color: rgba(180, 83, 9, .16);
    color: var(--amber-700);
}

.role-pill.reader {
    background: var(--slate-100);
    color: var(--slate-600);
}

.role-pill.purple {
    background: var(--purple-100);
    color: var(--purple-700);
}

.nav-section-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ink-400);
    padding: 8px 10px 4px;
    margin: 0;
    line-height: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-600);
    cursor: pointer;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
    transition: background-color .15s ease, color .15s ease;
    line-height: 1.2;
    position: relative;
}

.nav-item:hover { background: var(--ink-50); color: var(--ink-800); }

.nav-item.active {
    background: var(--brand-50);
    color: var(--brand-700);
    border-left: 3px solid var(--celeste-400);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-weight: 600;
}

.nav-item.active svg { color: var(--brand-600); }

.nav-item.active::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--brand-500);
    border-radius: 0 2px 2px 0;
}

.nav-item svg {
    width: 15px; height: 15px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}

.sidebar-sep {
    height: 1px;
    background: var(--line);
    margin: 8px 0;
    flex-shrink: 0;
}

.sidebar-logout {
    margin-top: auto;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-500);
    cursor: pointer;
    border: none;
    background: none;
    text-align: left;
    width: 100%;
    transition: background-color .15s ease, color .15s ease;
}

.sidebar-logout:hover { background: var(--red-100, #ffe4e6); color: var(--red-600); }

.mini-calendar {
    padding: 10px 8px;
}

.calendar-heading,
.section-header,
.page-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.calendar-heading {
    gap: 10px;
}

.calendar-heading h2 {
    color: var(--ink-700);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.inline-actions {
    display: flex;
    gap: 6px;
}

.icon-button {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    color: var(--ink-700);
    display: inline-flex;
    font-size: 21px;
    height: 28px;
    justify-content: center;
    line-height: 1;
    min-width: 28px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.icon-button:hover {
    background: var(--brand-50);
    border-color: #b4e7f1;
    color: var(--brand-700);
    transform: translateY(-1px);
}

.icon-button.large {
    height: 40px;
    min-width: 40px;
}

.month-title {
    color: var(--ink-900);
    font-weight: 820;
    margin: 13px 0 9px;
    text-transform: capitalize;
}

.weekday-row,
.month-days {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.weekday-row {
    color: var(--ink-400);
    font-size: 9px;
    font-weight: 800;
    margin-bottom: 3px;
    text-align: center;
}

.calendar-day {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-xs);
    color: var(--ink-700);
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 760;
    gap: 1px;
    height: 22px;
    justify-content: center;
    padding: 0;
    transition: background-color .18s ease, color .18s ease;
}

.calendar-day:hover {
    background: var(--surface-muted);
}

.calendar-day.selected {
    background: var(--brand-600);
    color: var(--white);
}

.calendar-day.other-month {
    color: var(--ink-300);
}

.day-dots {
    display: flex;
    gap: 2px;
    height: 4px;
}

.day-dots i,
.dot {
    border-radius: 50%;
    display: block;
}

.day-dots i {
    height: 4px;
    width: 4px;
}

.day-dots .training,
.dot.training {
    background: var(--brand-500);
}

.day-dots .match,
.dot.match {
    background: var(--red-600);
}

.day-dots .pending,
.dot.pending {
    background: #f59e0b;
}

.selected .day-dots i {
    background: var(--white);
}

.calendar-legend {
    border-top: 1px solid var(--line);
    color: var(--ink-500);
    display: flex;
    flex-wrap: wrap;
    font-size: 10px;
    font-weight: 760;
    gap: 8px;
    margin-top: 13px;
    padding-top: 10px;
}

.dot {
    display: inline-block;
    height: 7px;
    margin-right: 3px;
    width: 7px;
}

.hero {
    align-items: center;
    background:
        linear-gradient(115deg, rgba(7, 20, 29, .97), rgba(6, 44, 62, .95) 55%, rgba(27, 108, 168, .88));
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(46, 147, 207, .07);
    color: var(--white);
    display: flex;
    justify-content: space-between;
    min-height: 190px;
    overflow: hidden;
    padding: 30px 34px;
    position: relative;
}

/* Campo de fútbol SVG como fondo */
.hero::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.055)' stroke-width='1.5'%3E%3Crect x='10' y='10' width='380' height='240' rx='2'/%3E%3Cline x1='200' y1='10' x2='200' y2='250'/%3E%3Ccircle cx='200' cy='130' r='42'/%3E%3Ccircle cx='200' cy='130' r='3' fill='rgba(255,255,255,0.07)' stroke='none'/%3E%3Crect x='10' y='78' width='68' height='104'/%3E%3Crect x='322' y='78' width='68' height='104'/%3E%3Crect x='10' y='98' width='28' height='64'/%3E%3Crect x='362' y='98' width='28' height='64'/%3E%3C/g%3E%3C/svg%3E");
    background-position: right -20px center;
    background-repeat: no-repeat;
    background-size: 48%;
    content: "";
    inset: 0;
    opacity: .7;
    pointer-events: none;
    position: absolute;
}

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

.hero-badge {
    align-items: center;
    background: rgba(46, 147, 207, .12);
    border: 1px solid rgba(46, 147, 207, .25);
    border-radius: 20px;
    color: #67e8f9;
    display: inline-flex;
    font-size: 10px;
    font-weight: 600;
    gap: 6px;
    letter-spacing: .08em;
    margin-bottom: 8px;
    padding: 4px 11px;
    text-transform: uppercase;
}

.hero-badge-dot {
    animation: pulse-dot 2.2s ease-in-out infinite;
    background: #22d3ee;
    border-radius: 50%;
    display: inline-block;
    height: 6px;
    width: 6px;
}

.hero h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: .92;
    margin: 0 0 10px;
    max-width: 680px;
    text-transform: uppercase;
}

.hero h2, .eyebrow + h2 {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    line-height: 1.05;
}

.hero p:not(.eyebrow) {
    color: #d7eff5;
    max-width: 620px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-left: 24px;
}

.button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
    white-space: nowrap;
}

.button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.button.primary {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff;
    border: none;
    box-shadow: var(--shadow-xs);
}

.button.primary:hover {
    filter: brightness(1.06);
}

.button.secondary-on-dark {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .26);
    color: var(--white);
}

.button.secondary-on-dark:hover {
    background: rgba(255, 255, 255, .17);
}

.button.subtle {
    background: var(--white);
    color: var(--brand-700);
    border: 1.5px solid var(--brand-100);
}

.button.subtle:hover {
    border-color: var(--brand-500);
    background: var(--brand-50);
}

.button.outline {
    background: var(--white);
    border-color: rgba(27, 108, 168, .42);
    color: var(--brand-700);
}

.button.match-button,
.match-button {
    background: var(--red-600);
    border-color: transparent;
    color: var(--white);
}

.text-button,
.table-action {
    background: transparent;
    border: 0;
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 850;
    padding: 3px 0;
    transition: color .18s ease;
}

.text-button:hover,
.table-action:hover {
    color: var(--brand-500);
}

.text-button.danger,
.table-action.delete {
    color: var(--red-700);
}

.stats-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 18px 0;
}

.stat-card {
    position: relative;
    border-radius: var(--radius-xl);
    padding: 18px 18px 16px;
    color: #fff;
    background: var(--grad-training);
    box-shadow: var(--shadow-sm);
    border: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 120px;
}

.stat-card.match-accent     { background: var(--grad-match); }
.stat-card.occupancy-accent { background: var(--grad-occupancy); }
.stat-card.pending-accent   { background: var(--grad-pending); }

.stat-icon {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 8px;
    color: rgba(255,255,255,.9);
}

.stat-icon svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

.stat-card p {
    color: rgba(255,255,255,.85);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.stat-card strong {
    color: #fff;
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 42px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    margin: 6px 0 4px;
}

.stat-card.match-accent strong, .stat-card.occupancy-accent strong, .stat-card.pending-accent strong { color: #fff; }

.stat-card span {
    color: rgba(255,255,255,.75);
    font-size: 12px;
}

.dashboard-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(430px, 1.45fr) minmax(280px, .9fr);
}

.panel-wide,
.urgent-panel {
    min-width: 0;
}

.section-header {
    gap: 12px;
    margin-bottom: 17px;
}

.section-header h2 {
    color: var(--ink-900);
    font-size: 15px;
    font-weight: 850;
}

.section-header p {
    color: var(--ink-500);
    font-size: 12px;
    margin-top: 2px;
}

.match-list,
.stack-list,
.occupancy-list,
.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.match-item {
    align-items: center;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-left: 3px solid #ef4444;
    border-radius: var(--radius);
    color: inherit;
    display: flex;
    gap: 13px;
    justify-content: space-between;
    padding: 12px 14px 12px 16px;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    width: 100%;
}

.match-item:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.match-date {
    color: var(--red-700);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    min-width: 90px;
    text-transform: uppercase;
}

.match-data {
    flex: 1;
    min-width: 0;
}

.match-data strong {
    color: var(--ink-900);
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.match-data span {
    color: var(--ink-500);
    display: block;
    font-size: 11px;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.status-chip {
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    display: inline-flex;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    padding: 5px 9px;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-chip.official {
    background: var(--red-100);
    border-color: var(--red-100);
    color: var(--red-700);
}

.status-chip.friendly {
    background: var(--brand-100);
    border-color: var(--brand-100);
    color: var(--brand-700);
}

.pending-item {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    color: var(--ink-700);
    padding: 11px 12px;
}

.pending-item strong {
    color: var(--ink-900);
    display: block;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.pending-item p {
    color: var(--ink-600);
    font-size: 11px;
    margin: 3px 0 8px;
}

.empty-state {
    align-items: center;
    background: linear-gradient(180deg, var(--white), var(--surface-muted));
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink-500);
    display: flex;
    font-size: 12px;
    justify-content: center;
    min-height: 76px;
    padding: 18px;
    text-align: center;
}

.occupancy-row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 140px minmax(100px, 1fr) 58px;
}

.occupancy-row strong {
    color: var(--ink-700);
    font-size: 12px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.progress {
    background: var(--ink-100);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.progress i {
    background: linear-gradient(90deg, var(--brand-500), var(--grass-700));
    border-radius: inherit;
    display: block;
    height: 100%;
}

.occupancy-row span:last-child {
    color: var(--ink-500);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.activity-entry {
    border-left: 2px solid var(--brand-100);
    padding: 0 0 10px 12px;
}

.activity-entry:last-child {
    padding-bottom: 0;
}

.activity-entry p {
    color: var(--ink-700);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.activity-entry time {
    color: var(--ink-400);
    font-size: 11px;
}

.page-header {
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.page-header h2 {
    color: var(--ink-950);
    font-size: 34px;
    line-height: 1.05;
    text-transform: uppercase;
}

.page-header .muted {
    margin-top: 4px;
}

.calendar-toolbar {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 14px 16px;
}

.date-navigation {
    display: flex;
    gap: 8px;
}

.filters {
    display: flex;
    gap: 10px;
}

label {
    color: var(--ink-600);
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 800;
    gap: 5px;
}

select,
input:not([type="checkbox"]):not([type="radio"]),
textarea {
    appearance: none;
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink-800);
    font-size: 13px;
    min-height: 40px;
    padding: 8px 10px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

input[type="checkbox"],
input[type="radio"] {
    appearance: auto;
    min-height: unset;
    padding: unset;
    width: auto;
    cursor: pointer;
}

select {
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    padding-right: 32px;
}

textarea {
    resize: vertical;
}

select:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(46, 147, 207, .14);
    outline: 0;
}

.filters select {
    min-width: 170px;
}

.schedule-frame {
    overflow-x: auto;
    padding: 0;
}

.desktop-schedule {
    min-width: 920px;
}

.schedule-header,
.schedule-row {
    display: grid;
    grid-template-columns: 118px repeat(7, minmax(154px, 1fr));
}

.schedule-header {
    background: var(--ink-50);
    border-bottom: 1px solid var(--line);
}

.schedule-header div {
    border-right: 1px solid var(--line);
    padding: 13px 10px;
    text-align: center;
}

.schedule-header div:last-child {
    border-right: 0;
}

.schedule-header strong {
    color: var(--ink-800);
    display: block;
    font-size: 12px;
}

.schedule-header span {
    color: var(--ink-400);
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.schedule-row {
    border-bottom: 1px solid var(--line);
}

.schedule-row:last-child {
    border-bottom: 0;
}

.time-cell {
    align-items: center;
    background: var(--ink-50);
    border-right: 1px solid var(--line);
    color: var(--ink-800);
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    justify-content: center;
    min-height: 104px;
}

.time-cell span {
    color: var(--ink-400);
    font-size: 10px;
    margin-top: 3px;
}

.slot {
    border-right: 1px solid var(--line);
    min-height: 104px;
    padding: 8px;
}

.slot:last-child {
    border-right: 0;
}

.available-slot {
    align-items: center;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--ink-400);
    display: flex;
    font-size: 12px;
    font-weight: 800;
    height: 100%;
    justify-content: center;
    min-height: 86px;
    padding: 8px;
    transition: background .12s, border-color .12s, color .12s;
    width: 100%;
}

.available-slot:hover:not(.readonly):not(:disabled) {
    background: var(--brand-50);
    border-color: var(--brand-500);
    border-style: solid;
    color: var(--brand-700);
}

.available-slot.readonly, .available-slot:disabled {
    border-style: dashed;
    color: var(--ink-300);
    background: transparent;
}

/* ── Event cards ─────────────────────────────────────────────────────────── */
.event-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 7px 9px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    border-left-width: 3px;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    text-align: left;
    min-height: 44px;
    transition: filter .15s ease;
    font: inherit;
    background: none;
}

.event-card:hover { filter: brightness(.97); }

.draggable-card { cursor: grab; }
.draggable-card:active { cursor: grabbing; }
.draggable-card.dragging { opacity: .5; }

.ev-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
}

.ev-title {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    flex: 1;
}

.ev-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}

.ev-bottom {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.ev-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ev-time {
    font-size: 9px;
}

.ev-cat {
    font-size: 9px;
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ev-note {
    font-size: 8px;
    margin-top: 2px;
    opacity: .75;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Actividades de entrenamiento/recuperación/clínica/reunión */
.type-entrenamiento,
.type-recuperacion,
.type-clinica,
.type-reunion {
    background: var(--brand-50);
    border-color: var(--brand-100);
}
.type-entrenamiento .ev-title,
.type-recuperacion .ev-title,
.type-clinica .ev-title,
.type-reunion .ev-title { color: var(--brand-700); }

.type-entrenamiento .ev-badge,
.type-recuperacion .ev-badge,
.type-clinica .ev-badge,
.type-reunion .ev-badge { background: var(--brand-100); color: var(--brand-700); }

.type-entrenamiento .ev-dot,
.type-recuperacion .ev-dot,
.type-clinica .ev-dot,
.type-reunion .ev-dot { background: var(--brand-500); }

.type-entrenamiento .ev-time,
.type-recuperacion .ev-time,
.type-clinica .ev-time,
.type-reunion .ev-time { color: var(--brand-600); }

.type-entrenamiento .ev-cat,
.type-recuperacion .ev-cat,
.type-clinica .ev-cat,
.type-reunion .ev-cat { color: var(--brand-700); }

.type-entrenamiento .ev-note,
.type-recuperacion .ev-note,
.type-clinica .ev-note,
.type-reunion .ev-note { color: var(--brand-600); }

/* Partidos */
.type-partido_oficial,
.type-partido_amistoso {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.type-partido_oficial .ev-title,
.type-partido_amistoso .ev-title { color: #065f46; }

.type-partido_oficial .ev-badge,
.type-partido_amistoso .ev-badge { background: #a7f3d0; color: #065f46; }

.type-partido_oficial .ev-dot,
.type-partido_amistoso .ev-dot { background: #10b981; }

.type-partido_oficial .ev-time,
.type-partido_amistoso .ev-time { color: #059669; }

.type-partido_oficial .ev-cat,
.type-partido_amistoso .ev-cat { color: #065f46; }

.type-partido_oficial .ev-note,
.type-partido_amistoso .ev-note { color: #059669; }

/* Mantenimiento y eventos */
.type-mantenimiento,
.type-evento {
    background: var(--amber-100);
    border-color: #fde68a;
}
.type-mantenimiento .ev-title,
.type-evento .ev-title { color: var(--amber-700); }

.type-mantenimiento .ev-badge,
.type-evento .ev-badge { background: #fde68a; color: var(--amber-700); }

.type-mantenimiento .ev-dot,
.type-evento .ev-dot { background: #f59e0b; }

.type-mantenimiento .ev-time,
.type-evento .ev-time { color: var(--amber-700); }

.type-mantenimiento .ev-cat,
.type-evento .ev-cat { color: var(--amber-700); }

.type-mantenimiento .ev-note,
.type-evento .ev-note { color: var(--amber-700); }

/* Conferencia de prensa */
.type-conferencia {
    background: var(--purple-100);
    border-color: #ddd6fe;
}
.type-conferencia .ev-title { color: var(--purple-700); }
.type-conferencia .ev-badge { background: #ddd6fe; color: var(--purple-700); }
.type-conferencia .ev-dot { background: #8b5cf6; }
.type-conferencia .ev-time { color: var(--purple-700); }
.type-conferencia .ev-cat  { color: var(--purple-700); }
.type-conferencia .ev-note { color: var(--purple-700); }

.slot.drag-over {
    background: rgba(46, 147, 207, .12);
    outline: 2px dashed rgba(46, 147, 207, .6);
    outline-offset: -2px;
    border-radius: var(--radius);
}

.swatch.type-entrenamiento { border-color: var(--cyan-500); background: #e7f8fc; }
.swatch.type-partido_oficial { border-color: var(--red-600); background: var(--red-100); }
.swatch.type-partido_amistoso { border-color: #f59e0b; background: var(--amber-100); }
.swatch.type-conferencia { border-color: #8b5cf6; background: var(--purple-100); }
.swatch.type-reunion { border-color: #0ea5e9; background: #e0f2fe; }
.swatch.type-clinica { border-color: #14b8a6; background: #ccfbf1; }
.swatch.type-mantenimiento { border-color: var(--slate-600); background: var(--slate-100); }
.swatch.type-pending { border-color: #f59e0b; background: #fffbeb; }

.mobile-schedule {
    display: none;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 13px;
    padding: 12px 18px;
}

.legend span {
    align-items: center;
    color: var(--ink-600);
    display: flex;
    font-size: 12px;
    font-weight: 760;
    gap: 7px;
}

.swatch {
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--radius-xs);
    display: inline-block;
    height: 16px;
    width: 18px;
}

.series-grid {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
}

.series-card {
    padding: 17px;
}

.series-card h3 {
    color: var(--ink-950);
    font-size: 16px;
}

.series-card .area {
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 850;
    margin-bottom: 13px;
    text-transform: uppercase;
}

.series-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 13px;
}

.series-summary div {
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 9px;
}

.series-summary strong {
    color: var(--brand-600);
    display: block;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}

.series-summary span {
    color: var(--ink-500);
    display: block;
    font-size: 11px;
}

.next-fixture {
    background: linear-gradient(180deg, var(--ink-50), var(--surface-muted));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-600);
    font-size: 12px;
    min-height: 54px;
    padding: 10px;
}

.next-fixture strong {
    color: var(--ink-900);
    display: block;
}

.series-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.matches-page-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fixture-card {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns: 154px minmax(0, 1fr) 210px 110px;
    padding: 18px 20px;
}

.fixture-date strong {
    color: var(--ink-950);
    display: block;
    font-size: 17px;
}

.fixture-date span,
.fixture-teams span,
.fixture-place span {
    color: var(--ink-500);
    font-size: 12px;
}

.fixture-teams,
.fixture-place {
    min-width: 0;
}

.fixture-teams strong {
    color: var(--ink-900);
    display: block;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.fixture-place strong {
    color: var(--ink-700);
    display: block;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.report-stats {
    margin-top: 0;
}

.charts-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: 16px;
}

.chart-card--wide {
    grid-column: 1 / -1;
}

.chart-card {
    padding: 18px 20px;
}

.chart-wrap {
    height: 200px;
    margin-top: 14px;
    position: relative;
}

.chart-wrap--tall {
    height: 160px;
}

.table-card {
    overflow: hidden;
    padding: 0;
}

.table-card .section-header {
    border-bottom: 1px solid var(--line);
    margin: 0;
    padding: 18px 20px;
}

.table-scroll {
    overflow-x: auto;
}

.data-table {
    border-collapse: collapse;
    font-size: 13px;
    width: 100%;
}

.data-table th {
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .06em;
    padding: 12px 15px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td {
    border-top: 1px solid var(--line);
    color: var(--ink-700);
    padding: 12px 15px;
    vertical-align: top;
}

.data-table td,
.data-table th {
    overflow-wrap: anywhere;
}

.data-table strong {
    color: var(--ink-900);
}

.table-action {
    margin-right: 10px;
}

.table-empty {
    color: var(--ink-500);
    padding: 22px !important;
    text-align: center;
}

.data-table tbody tr:nth-child(even) {
    background: var(--ink-50);
}

[data-theme="dark"] .data-table tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }

.table-action.delete:hover {
    background: var(--red-100);
    border-radius: var(--radius);
    color: var(--red-700);
}

.demo-note {
    margin-top: 16px;
}

.demo-note h2 {
    color: var(--ink-900);
    font-size: 15px;
    margin-bottom: 5px;
}

.demo-note p {
    color: var(--ink-600);
    font-size: 12px;
    margin-bottom: 10px;
}

.mobile-nav {
    display: none;
}

.modal {
    background: var(--white);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    color: var(--ink-800);
    max-height: min(92vh, 820px);
    max-width: 630px;
    overscroll-behavior: contain;
    overflow: auto;
    padding: 0;
    width: calc(100% - 30px);
}

.modal::backdrop {
    background: rgba(6, 40, 61, .55);
    backdrop-filter: blur(5px);
}

.modal-header {
    align-items: flex-start;
    background: linear-gradient(90deg, var(--ink-950), var(--brand-800));
    color: var(--white);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 20px 23px;
}

.modal-header .eyebrow {
    color: #91e2ef;
}

.modal-header h2 {
    font-size: 21px;
    margin-top: 4px;
}

.close-button {
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius);
    color: var(--white);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 25px;
    height: 36px;
    justify-content: center;
    line-height: 1;
    transition: background-color .18s ease, transform .18s ease;
    width: 36px;
}

.close-button:hover {
    background: rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}

.modal form > label,
.compact-modal form > label {
    margin: 16px 23px 0;
}

.form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr;
    padding: 20px 23px 0;
}

.duration-box {
    align-items: center;
    background: var(--brand-50);
    border: 1px solid #bdebf3;
    border-radius: var(--radius);
    color: var(--brand-700);
    display: flex;
    font-size: 12px;
    font-weight: 760;
    margin-top: 22px;
    min-height: 40px;
    padding: 8px 11px;
}

.conditional-fields {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: var(--radius);
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    margin: 17px 23px 0;
    padding: 13px;
}

.full-field {
    margin: 16px 23px 0;
}

.recurrence-box {
    background: var(--ink-50);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 17px 23px 0;
    padding: 12px 14px;
}

.check-row {
    align-items: center;
    color: var(--ink-700);
    flex-direction: row;
}

.check-row input,
.recurrence-controls input[type="checkbox"] {
    accent-color: var(--brand-600);
    min-height: 0;
}

.recurrence-controls {
    align-items: flex-end;
    display: flex;
    gap: 20px;
    margin-top: 12px;
}

.recurrence-controls fieldset {
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.recurrence-controls legend {
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 5px;
}

.recurrence-controls fieldset label {
    align-items: center;
    display: inline-flex;
    flex-direction: row;
    gap: 4px;
}

.form-message {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: var(--radius);
    color: var(--red-700);
    font-size: 12px;
    font-weight: 700;
    margin: 15px 23px 0;
    padding: 10px 12px;
}

.modal-footer {
    align-items: center;
    background: var(--ink-50);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 15px 22px;
}

.event-header.type-entrenamiento,
.event-header.type-recuperacion,
.event-header.type-conferencia,
.event-header.type-mantenimiento,
.event-header.type-evento,
.event-header.type-partido_oficial,
.event-header.type-partido_amistoso,
.event-header.type-pending {
    border: 0;
}

.event-header.type-entrenamiento { background: var(--brand-700); color: var(--white); }
.event-header.type-partido_oficial { background: var(--red-700); color: var(--white); }
.event-header.type-partido_amistoso { background: var(--amber-700); color: var(--white); }
.event-header.type-conferencia { background: var(--purple-700); color: var(--white); }
.event-header.type-recuperacion { background: var(--teal-700); color: var(--white); }
.event-header.type-mantenimiento { background: var(--ink-700); color: var(--white); }
.event-header.type-evento { background: var(--indigo-700); color: var(--white); }
.event-header.type-pending { background: var(--amber-700); color: var(--white); }

.detail-body {
    padding: 20px 23px 0;
}

.detail-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr;
}

.detail-field span {
    color: var(--ink-400);
    display: block;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.detail-field strong {
    color: var(--ink-800);
    display: block;
    font-size: 13px;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.detail-field--joint {
    background: rgba(245, 158, 11, .08);
    border: 1px solid rgba(245, 158, 11, .3);
    border-radius: var(--radius);
    padding: 8px 10px;
}

.detail-field--joint span {
    color: #b45309 !important;
}

.detail-field--joint strong {
    color: #92400e !important;
    font-size: 14px !important;
}

[data-theme="dark"] .detail-field--joint {
    background: rgba(245, 158, 11, .1);
    border-color: rgba(245, 158, 11, .25);
}

[data-theme="dark"] .detail-field--joint span {
    color: #fcd34d !important;
}

[data-theme="dark"] .detail-field--joint strong {
    color: #fde68a !important;
}

.detail-note {
    background: var(--ink-50);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-600);
    font-size: 12px;
    margin-top: 17px;
    padding: 11px 12px;
}

.warning-header {
    background: var(--amber-700);
}

.conflict-modal .detail-body > p {
    color: var(--ink-600);
    font-size: 13px;
    margin-bottom: 13px;
}

.compact-modal {
    max-width: 440px;
}
.compact-modal.pl-modal {
    max-width: 520px;
}

.modal-body {
    padding: 24px 26px;
}

.toast-region {
    bottom: calc(22px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: fixed;
    right: 22px;
    z-index: 90;
}

.toast {
    background: var(--ink-950);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    max-width: 360px;
    padding: 12px 15px;
}

.toast.success { background: var(--grass-700); }
.toast.error { background: var(--red-700); }
.toast.warning { background: var(--amber-700); }
.toast.info { background: var(--brand-600); }

.login-overlay {
    background: #07141d;
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 200;
}

.login-video-bg {
    height: 100%;
    inset: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
}

.login-video-bg iframe {
    border: 0;
    height: 100%;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.18);
    width: 177.78vh;
}

.login-video-overlay {
    background:
        linear-gradient(100deg, rgba(7, 20, 29, .97) 0%, rgba(6, 44, 62, .9) 50%, rgba(7, 20, 29, .82)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 48px);
    inset: 0;
    position: absolute;
}

/* Línea de escaneo */
.login-scan-line {
    animation: login-scan 7s linear infinite;
    background: linear-gradient(90deg, transparent, rgba(46, 147, 207, .55) 30%, rgba(46, 147, 207, .85) 50%, rgba(46, 147, 207, .55) 70%, transparent);
    height: 1px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

@keyframes login-scan {
    0%   { transform: translateY(0); opacity: 0; }
    4%   { opacity: 1; }
    96%  { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* Panel izquierdo */
.login-panel {
    display: none;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    gap: 22px;
    min-height: 100vh;
    padding: 48px clamp(32px, 5vw, 72px);
    position: relative;
    z-index: 3;
}

.login-panel::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.055)' stroke-width='1.5'%3E%3Crect x='20' y='20' width='360' height='220' rx='2'/%3E%3Cline x1='200' y1='20' x2='200' y2='240'/%3E%3Ccircle cx='200' cy='130' r='42'/%3E%3Ccircle cx='200' cy='130' r='3' fill='rgba(255,255,255,0.07)' stroke='none'/%3E%3Crect x='20' y='78' width='66' height='104'/%3E%3Crect x='314' y='78' width='66' height='104'/%3E%3Crect x='20' y='98' width='28' height='64'/%3E%3Crect x='352' y='98' width='28' height='64'/%3E%3Cpath d='M20 20 Q30 20 30 30' stroke-width='1'/%3E%3Cpath d='M380 20 Q370 20 370 30' stroke-width='1'/%3E%3Cpath d='M20 240 Q30 240 30 230' stroke-width='1'/%3E%3Cpath d='M380 240 Q370 240 370 230' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 75%;
    bottom: 0;
    content: "";
    left: 0;
    opacity: .6;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

.login-panel-top {
    align-items: center;
    display: flex;
    gap: 14px;
}

.login-panel-escudo {
    display: block;
    filter: drop-shadow(0 0 14px rgba(46, 147, 207, .35));
    height: auto;
    object-fit: contain;
    width: 52px;
}

.login-panel-club {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    margin: 0 0 3px;
    text-transform: uppercase;
}

.login-panel-tagline {
    color: rgba(46, 147, 207, .9);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    margin: 0;
    text-transform: uppercase;
}

.login-panel-mid {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-system-badge {
    align-items: center;
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .22);
    border-radius: 20px;
    color: #86efac;
    display: inline-flex;
    font-size: 10px;
    font-weight: 600;
    gap: 7px;
    letter-spacing: .08em;
    margin-bottom: 24px;
    padding: 5px 13px;
    text-transform: uppercase;
    width: fit-content;
}

.login-dot {
    animation: pulse-dot 2.2s ease-in-out infinite;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    height: 7px;
    width: 7px;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); opacity: 1; }
    50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); opacity: .75; }
}

.login-panel-title {
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 64px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: .92;
    margin: 0 0 22px;
    text-transform: uppercase;
}

.login-panel-desc {
    color: rgba(203, 213, 225, .7);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
    max-width: 340px;
}

.login-panel-stats {
    border-top: 1px solid rgba(255, 255, 255, .09);
    display: flex;
    gap: 32px;
    padding-top: 30px;
}

.login-panel-stat {
    border-right: 1px solid rgba(255, 255, 255, .07);
    flex: 1;
    margin-right: 24px;
    padding-right: 24px;
}

.login-panel-stat:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}

.login-panel-stat strong {
    color: var(--brand-500);
    display: block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
}

.login-panel-stat span {
    color: rgba(148, 163, 184, .75);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* Card */
.login-card {
    align-self: center;
    animation: card-appear .55s cubic-bezier(.22, .61, .36, 1) both;
    backdrop-filter: blur(20px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    flex-shrink: 0;
    margin: 20px;
    max-width: 420px;
    padding: 38px 34px 34px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 3;
}

@keyframes card-appear {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-crest {
    align-items: center;
    background: linear-gradient(180deg, #fff, var(--brand-50));
    border: 1px solid #c5edf5;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    height: 112px;
    justify-content: center;
    margin-bottom: 18px;
    padding: 12px;
    width: 98px;
}

.login-crest img {
    display: block;
    filter: drop-shadow(0 8px 15px rgba(7, 20, 29, .16));
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.login-title {
    color: var(--ink-950);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.login-subtitle {
    color: var(--slate-500);
    font-size: 10px;
    font-weight: 400;
    margin: 0 0 24px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.input-icon-wrapper {
    align-items: center;
    background: rgba(247, 250, 252, .9);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    display: flex;
    gap: 10px;
    padding: 0 13px;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.input-icon-wrapper:focus-within {
    background: var(--white);
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(46, 147, 207, .14);
}

.input-icon {
    color: var(--ink-400);
    flex-shrink: 0;
    height: 19px;
    stroke: currentColor;
    width: 19px;
}

.input-icon-wrapper:focus-within .input-icon {
    color: var(--brand-600);
}

.input-icon-wrapper input {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--ink-900);
    flex: 1;
    font-size: 14px;
    min-height: 48px;
    min-width: 0;
    outline: 0;
    padding: 0;
}

.input-icon-wrapper input::placeholder {
    color: var(--ink-400);
}

.password-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--ink-400);
    display: inline-flex;
    flex-shrink: 0;
    height: 34px;
    justify-content: center;
    padding: 0;
    transition: color .18s ease;
    width: 34px;
}

.password-toggle:hover {
    color: var(--ink-700);
}

.password-toggle svg {
    height: 18px;
    width: 18px;
}

.password-toggle .eye-closed { display: none; }
.password-toggle.showing .eye-open { display: none; }
.password-toggle.showing .eye-closed { display: inline; }

.login-error {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: var(--radius);
    color: var(--red-700);
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    padding: 9px 12px;
}

.login-button {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    border: 0;
    border-radius: var(--radius);
    box-shadow: 0 10px 24px rgba(27, 108, 168, .25);
    color: var(--white);
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .05em;
    margin-top: 5px;
    min-height: 48px;
    position: relative;
    text-transform: uppercase;
    transition: box-shadow .18s ease, transform .18s ease;
}

.login-button:hover {
    box-shadow: 0 14px 30px rgba(27, 108, 168, .32);
    transform: translateY(-1px);
}

.login-button.loading {
    opacity: .82;
    pointer-events: none;
}

.login-button.loading::after {
    animation: spin .7s linear infinite;
    border: 2px solid transparent;
    border-radius: 50%;
    border-top-color: currentColor;
    content: "";
    display: inline-block;
    height: 16px;
    margin-left: 8px;
    vertical-align: -2px;
    width: 16px;
}

.login-hint {
    color: var(--ink-400);
    font-size: 11px;
    margin: 18px 0 0;
}

.skeleton {
    animation: pulse 1.5s ease-in-out infinite;
    background: var(--ink-200);
    border-radius: var(--radius);
}

.skeleton-header { height: 44px; margin-bottom: 13px; }
.skeleton-row { height: 102px; margin-bottom: 1px; }
.skeleton-stat { height: 120px; }
.skeleton-match { height: 56px; margin-bottom: 10px; }
.skeleton-kpi { height: 72px; margin-bottom: 10px; }

.desktop-schedule.is-loading,
.dashboard-grid.is-loading {
    opacity: .65;
    pointer-events: none;
    transition: opacity .15s ease;
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .series-grid {
        grid-template-columns: repeat(2, minmax(250px, 1fr));
    }

    .fixture-card {
        grid-template-columns: 130px minmax(0, 1fr) 180px 96px;
    }
}

@media (max-width: 960px) {
    :root {
        --topbar-height: 48px;
    }

    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    .topbar {
        padding: 0 15px;
    }

    .session-switcher {
        min-width: 180px;
    }

    .app-shell {
        display: block;
        padding: 16px;
    }

    .sidebar {
        position: static;
        width: auto;
        border-right: none;
    }

    .mini-calendar {
        margin-bottom: 14px;
    }

    .content {
        margin-top: 16px;
    }

    .dashboard-grid {
        display: flex;
        flex-direction: column;
    }

    .mobile-nav {
        align-items: center;
        background: rgba(255, 255, 255, .94);
        backdrop-filter: blur(16px);
        border-top: 1px solid var(--line);
        bottom: 0;
        box-shadow: 0 -10px 28px rgba(7, 20, 29, .08);
        display: grid;
        grid-template-columns: 1fr 1fr 64px 1fr 1fr;
        height: calc(65px + env(safe-area-inset-bottom));
        left: 0;
        padding: 0 8px env(safe-area-inset-bottom);
        position: fixed;
        right: 0;
        z-index: 40;
    }

    .mobile-nav button {
        background: transparent;
        border: 0;
        color: var(--ink-500);
        font-size: 11px;
        font-weight: 850;
        height: 100%;
    }

    .mobile-nav button.active {
        color: var(--brand-700);
    }

    .mobile-nav .floating-write {
        align-items: center;
        background: var(--brand-600);
        border-radius: 50%;
        box-shadow: 0 12px 24px rgba(27, 108, 168, .34);
        color: var(--white);
        display: flex;
        font-size: 28px;
        height: 52px;
        justify-content: center;
        margin-top: -27px;
        width: 52px;
    }
}

@media (max-width: 720px) {
    .mini-calendar {
        display: none;
    }

    .session-switcher {
        min-width: 152px;
        padding: 5px 8px;
    }

    .session-switcher span {
        display: none;
    }

    .session-switcher select {
        max-width: 142px;
    }

    .hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        padding: 25px 22px;
    }

    .hero-actions {
        justify-content: flex-start;
        margin-left: 0;
        width: 100%;
    }

    .hero-actions .button {
        flex: 1 1 150px;
    }

    .stats-grid {
        gap: 10px;
        margin: 13px 0;
    }

    .stat-card {
        min-height: 112px;
        padding: 15px;
    }

    .stat-card strong {
        font-size: 30px;
    }

    .card {
        padding: 16px;
    }

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-header h2 {
        font-size: 29px;
    }

    .page-header > .button,
    .page-header > .button-group {
        width: 100%;
    }

    .calendar-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
    }

    .filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .filters select {
        min-width: 0;
        width: 100%;
    }

    .desktop-schedule {
        display: none;
    }

    .mobile-block h3 {
        color: var(--ink-500);
        font-size: 12px;
        margin-bottom: 8px;
    }

    .mobile-events {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .mobile-events .event-card,
    .mobile-events .available-slot {
        min-height: 62px;
    }

    .legend {
        gap: 10px 16px;
    }

    .series-grid {
        grid-template-columns: 1fr;
    }

    .fixture-card {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px;
    }

    .fixture-card .button {
        width: 100%;
    }

    .button-group .button {
        flex: 1 1 140px;
    }

    .occupancy-row {
        grid-template-columns: 116px 1fr 52px;
    }

    .form-grid,
    .conditional-fields,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .duration-box {
        margin-top: 0;
    }

    .recurrence-controls {
        align-items: flex-start;
        flex-direction: column;
    }

    .modal-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .modal-footer .button {
        width: 100%;
    }

    .toast-region {
        left: 16px;
        right: 16px;
    }

    .toast {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .topbar {
        gap: 10px;
    }

    .theme-toggle {
        height: 38px;
        min-width: 38px;
    }

    .stats-grid,
    .filters {
        grid-template-columns: 1fr;
    }

    .hero h2 {
        font-size: 31px;
    }

    .match-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .match-date {
        min-width: 0;
    }

    .login-card {
        padding: 32px 24px 28px;
    }
}

@media (min-width: 900px) {
    .login-panel {
        display: flex;
    }

    .login-card {
        margin: 40px 60px 40px 0;
        width: 420px;
    }

    .login-crest {
        display: none;
    }
}

@media (min-width: 1200px) {
    .login-panel {
        padding: 60px 72px;
    }

    .login-panel-title {
        font-size: 76px;
    }

    .login-card {
        margin-right: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background:
        linear-gradient(180deg, rgba(5, 15, 28, .96), rgba(9, 18, 31, .98) 260px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 96px),
        #09121f;
    color: #cbd5e1;
}

[data-theme="dark"] .card,
[data-theme="dark"] .series-card,
[data-theme="dark"] .fixture-card,
[data-theme="dark"] .mini-calendar {
    background: #111d2f !important;
    border-color: #20324a !important;
    color: #cbd5e1;
}

[data-theme="dark"] .stat-card { background: var(--grad-training); border: none; color: #fff; }
[data-theme="dark"] .stat-card.match-accent     { background: var(--grad-match); }
[data-theme="dark"] .stat-card.occupancy-accent { background: var(--grad-occupancy); }
[data-theme="dark"] .stat-card.pending-accent   { background: var(--grad-pending); }

[data-theme="dark"] .nav-item {
    color: #94a3b8;
}

[data-theme="dark"] .nav-item:hover {
    background: rgba(255, 255, 255, .05) !important;
    color: #e2e8f0;
}

[data-theme="dark"] .nav-item.active {
    background: rgba(56,189,248,.12);
    color: var(--celeste-400);
    border-left: 3px solid var(--celeste-400);
    font-weight: 600;
}

[data-theme="dark"] .nav-item.active svg { color: var(--celeste-400); }

[data-theme="dark"] .nav-item.active::before {
    background: var(--brand-400, #38bdf8);
}

[data-theme="dark"] .match-item {
    background: #1c0d11 !important;
    border-color: #3d1520 !important;
}

[data-theme="dark"] .topbar {
    background: linear-gradient(90deg, #030a13, #071827);
}

[data-theme="dark"] .hero {
    background:
        linear-gradient(115deg, rgba(3, 10, 19, .98), rgba(7, 24, 39, .96) 58%, rgba(7, 85, 106, .82)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 34px);
}

[data-theme="dark"] .theme-toggle {
    color: #93c5fd;
}

[data-theme="dark"] .series-summary div,
[data-theme="dark"] .next-fixture,
[data-theme="dark"] .detail-note,
[data-theme="dark"] .recurrence-box,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .schedule-header,
[data-theme="dark"] .time-cell,
[data-theme="dark"] .legend,
[data-theme="dark"] .calendar-toolbar {
    background: #0b1626;
    border-color: #20324a;
}

[data-theme="dark"] .section-header h2,
[data-theme="dark"] .page-header h2,
[data-theme="dark"] .series-card h3,
[data-theme="dark"] .series-summary strong,
[data-theme="dark"] .fixture-date strong,
[data-theme="dark"] .fixture-teams strong,
[data-theme="dark"] .fixture-place strong,
[data-theme="dark"] .data-table strong,
[data-theme="dark"] .match-data strong,
[data-theme="dark"] .pending-item strong,
[data-theme="dark"] .detail-field strong,
[data-theme="dark"] .next-fixture strong {
    color: #e5edf5;
}

[data-theme="dark"] .match-data span {
    color: #8da0af;
}

[data-theme="dark"] .muted,
[data-theme="dark"] .section-header p,
[data-theme="dark"] .legend span,
[data-theme="dark"] .match-data span,
[data-theme="dark"] .fixture-date span,
[data-theme="dark"] .fixture-teams span,
[data-theme="dark"] .fixture-place span,
[data-theme="dark"] .activity-entry time,
[data-theme="dark"] .demo-note p,
[data-theme="dark"] .calendar-legend,
[data-theme="dark"] .detail-note,
[data-theme="dark"] label {
    color: #8da0af;
}

[data-theme="dark"] .schedule-header div,
[data-theme="dark"] .schedule-row,
[data-theme="dark"] .time-cell,
[data-theme="dark"] .slot,
[data-theme="dark"] .table-card .section-header,
[data-theme="dark"] .data-table td {
    border-color: #20324a;
}

[data-theme="dark"] select,
[data-theme="dark"] input,
[data-theme="dark"] textarea {
    background-color: #0b1626;
    border-color: #2a3c54;
    color: #e5edf5;
}

[data-theme="dark"] .button.subtle,
[data-theme="dark"] .icon-button {
    background: #0b1626;
    border-color: #2a3c54;
    color: #cbd5e1;
}

[data-theme="dark"] .available-slot {
    border-color: #20324a;
    color: #4a6070;
    background: transparent;
}

[data-theme="dark"] .available-slot:hover:not(.readonly):not(:disabled) {
    background: rgba(46, 147, 207, .08);
    border-color: var(--brand-500);
    border-style: solid;
    color: var(--celeste-400);
}

[data-theme="dark"] .progress {
    background: #20324a;
}

[data-theme="dark"] .empty-state,
[data-theme="dark"] .data-table th {
    background: #0b1626;
    border-color: #20324a;
    color: #8da0af;
}

[data-theme="dark"] .event-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .type-entrenamiento,
[data-theme="dark"] .type-recuperacion,
[data-theme="dark"] .type-clinica,
[data-theme="dark"] .type-reunion {
    background: rgba(46, 147, 207, .12);
    border-color: rgba(46, 147, 207, .25);
}

[data-theme="dark"] .type-partido_oficial,
[data-theme="dark"] .type-partido_amistoso {
    background: rgba(16, 185, 129, .1);
    border-color: rgba(16, 185, 129, .2);
}

[data-theme="dark"] .type-mantenimiento,
[data-theme="dark"] .type-evento {
    background: rgba(245, 158, 11, .1);
    border-color: rgba(245, 158, 11, .2);
}

[data-theme="dark"] .type-conferencia {
    background: rgba(139, 92, 246, .12);
    border-color: rgba(139, 92, 246, .2);
}

[data-theme="dark"] .ev-title { color: rgba(230, 250, 255, .88); }
[data-theme="dark"] .ev-badge { background: rgba(0, 0, 0, .25); color: rgba(255, 255, 255, .7); }
[data-theme="dark"] .ev-time  { color: rgba(255, 255, 255, .5); }
[data-theme="dark"] .ev-cat   { color: rgba(255, 255, 255, .7); }
[data-theme="dark"] .ev-note  { color: rgba(255, 255, 255, .45); }

/* match-item ya es oscuro por defecto — dark mode no necesita override */

[data-theme="dark"] .pending-item {
    background: #1d1809;
    border-color: #4d3710;
    color: #d4dce5;
}

[data-theme="dark"] .modal {
    background: #111d2f;
    color: #cbd5e1;
}

[data-theme="dark"] .login-video-overlay {
    background:
        linear-gradient(90deg, rgba(3, 10, 19, .94), rgba(4, 22, 35, .86) 48%, rgba(0, 72, 93, .5)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 36px);
}

[data-theme="dark"] .login-card {
    background: rgba(10, 22, 38, .94);
    border-color: rgba(255, 255, 255, .1);
}

[data-theme="dark"] .login-crest {
    background: #0b1626;
    border-color: #20324a;
}

[data-theme="dark"] .login-title {
    color: #e5edf5;
}

[data-theme="dark"] .login-subtitle,
[data-theme="dark"] .login-hint {
    color: #8da0af;
}

[data-theme="dark"] .input-icon-wrapper {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] .input-icon-wrapper:focus-within {
    background: rgba(255, 255, 255, .08);
    border-color: var(--brand-500);
}

[data-theme="dark"] .input-icon-wrapper input {
    color: #e5edf5;
}

[data-theme="dark"] .input-icon-wrapper input::placeholder,
[data-theme="dark"] .input-icon,
[data-theme="dark"] .password-toggle {
    color: #708497;
}

[data-theme="dark"] .password-toggle:hover {
    color: #cbd5e1;
}

[data-theme="dark"] .login-error {
    background: rgba(190, 18, 60, .16);
    border-color: rgba(190, 18, 60, .36);
    color: #fda4af;
}

[data-theme="dark"] .mobile-nav {
    background: rgba(11, 22, 38, .94);
    border-color: #20324a;
}

/* ── Event tooltip ─────────────────────────────────────────────────────────── */
.event-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    min-width: 200px;
    max-width: 260px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-800);
}
.event-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}
.etip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}
.etip-type {
    font-weight: 700;
    font-size: 12px;
    color: var(--ink-900);
}
.etip-cat {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-600);
    margin-bottom: 7px;
}
.etip-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.etip-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
}
.etip-row span {
    color: var(--ink-500);
    white-space: nowrap;
}
.etip-row strong {
    font-weight: 600;
    color: var(--ink-800);
    text-align: right;
}
.etip-note {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: var(--ink-600);
    font-style: italic;
}
[data-theme="dark"] .event-tooltip {
    background: #0e1e2d;
    border-color: #1e3248;
    color: #c8d8e4;
}
[data-theme="dark"] .etip-type { color: #e2edf3; }
[data-theme="dark"] .etip-cat  { color: #94a3b0; }
[data-theme="dark"] .etip-row span   { color: #6b8090; }
[data-theme="dark"] .etip-row strong { color: #cbd8e0; }
[data-theme="dark"] .etip-note { border-color: #1e3248; color: #7a96a6; }

/* ── Continuation slots (multi-hour events) ──────────────────────────────── */
.slot-continuation {
    width: 100%;
    min-height: 88px;
    padding: 6px 8px;
    border-radius: 5px;
    border-left: 2px solid currentColor;
    display: flex;
    align-items: center;
    overflow: hidden;
    opacity: 0.45;
    transition: opacity .15s ease;
}
.slot-continuation:hover { opacity: 0.7; }

.sc-label {
    font-size: 9px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .01em;
}

/* Brand (entrenamiento, recuperación, clínica, reunión) */
.slot-continuation.type-entrenamiento,
.slot-continuation.type-recuperacion,
.slot-continuation.type-clinica,
.slot-continuation.type-reunion {
    background: var(--brand-50);
    color: var(--brand-600);
}

/* Partidos */
.slot-continuation.type-partido_oficial,
.slot-continuation.type-partido_amistoso {
    background: #f0fdf9;
    color: #059669;
}

/* Evento / mantenimiento */
.slot-continuation.type-evento,
.slot-continuation.type-mantenimiento {
    background: #fffbeb;
    color: var(--amber-700);
}

/* Conferencia */
.slot-continuation.type-conferencia {
    background: var(--purple-100);
    color: var(--purple-700);
}

/* Dark mode */
[data-theme="dark"] .slot-continuation.type-entrenamiento,
[data-theme="dark"] .slot-continuation.type-recuperacion,
[data-theme="dark"] .slot-continuation.type-clinica,
[data-theme="dark"] .slot-continuation.type-reunion {
    background: rgba(46, 147, 207, .07);
    color: var(--brand-500);
}
[data-theme="dark"] .slot-continuation.type-partido_oficial,
[data-theme="dark"] .slot-continuation.type-partido_amistoso {
    background: rgba(16, 185, 129, .07);
    color: #34d399;
}
[data-theme="dark"] .slot-continuation.type-evento,
[data-theme="dark"] .slot-continuation.type-mantenimiento {
    background: rgba(245, 158, 11, .07);
    color: #fbbf24;
}
[data-theme="dark"] .slot-continuation.type-conferencia {
    background: rgba(139, 92, 246, .07);
    color: #a78bfa;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLUB PREMIUM — Topbar & Sidebar navy oscuro
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Topbar ---------------------------------------------------------------- */
.topbar {
    background: #051d2c;
    border-bottom: 1px solid rgba(46, 147, 207, .15);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .32);
}
.topbar-brand-name { color: rgba(255, 255, 255, .95); }
.topbar-brand-sub  { color: rgba(46, 147, 207, .72); }
.topbar-divider    { background: rgba(255, 255, 255, .09); }
.topbar-date-main  { color: rgba(255, 255, 255, .8); }
.topbar-date-sub   { color: rgba(46, 147, 207, .6); }
.topbar-icon-btn {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .11);
    color: rgba(255, 255, 255, .62);
}
.topbar-icon-btn:hover {
    background: rgba(46, 147, 207, .17);
    border-color: rgba(46, 147, 207, .4);
    color: rgba(255, 255, 255, .95);
}
.topbar-notif-badge { border-color: #051d2c; }
.topbar-user-name  { color: rgba(255, 255, 255, .92); }
.topbar-user-role  { color: rgba(46, 147, 207, .7); }
.topbar-avatar {
    background: rgba(46, 147, 207, .18);
    color: #67e8f9;
    border-color: rgba(46, 147, 207, .3);
}
.topbar-extras {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    color: rgba(255,255,255,.85);
    margin-right: 4px;
}
.topbar-extras-sep { color: rgba(255,255,255,.3); font-size: 10px; }
.topbar-clock {
    font-family: "SF Mono", "Fira Code", monospace;
    font-size: 12px;
    color: var(--celeste-400);
    font-weight: 600;
}
.topbar-logout-btn {
    color: rgba(255,255,255,.45);
    margin-left: 2px;
}
.topbar-logout-btn:hover {
    background: rgba(231,76,60,.2);
    color: #fb7185;
}

.topbar-hamburger {
    display: none;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,.75);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    order: -1;
    margin-right: 8px;
}

.topbar-hamburger:hover {
    color: rgba(255,255,255,.95);
}

.topbar-hamburger svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

@media (max-width: 1199px) {
    .topbar-hamburger {
        display: flex;
    }
}

/* Sidebar responsive toggle */
@media (max-width: 1199px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 56px;
        width: 100%;
        max-width: 280px;
        height: calc(100vh - 56px);
        background: var(--surface);
        border-right: 1px solid var(--line);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
}

@media (min-width: 1200px) {
    .sidebar {
        position: static;
        width: auto;
        height: auto;
        background: transparent;
        border: none;
        transform: none;
        transition: none;
        z-index: auto;
        overflow: visible;
    }

    body.sidebar-open .sidebar {
        transform: none;
    }

    body.sidebar-open::before {
        display: none;
    }
}

/* — Sidebar --------------------------------------------------------------- */
.sidebar {
    background: #051d2c;
    border-right: 1px solid rgba(46, 147, 207, .1);
}
.nav-section-label { color: rgba(46, 147, 207, .48); }
.nav-item          { color: rgba(190, 220, 238, .58); }
.nav-item:hover {
    background: rgba(46, 147, 207, .1);
    color: rgba(215, 238, 250, .95);
}
.nav-item.active {
    background: rgba(56,189,248,.12);
    color: var(--celeste-400);
    border-left: 3px solid var(--celeste-400);
}
.nav-item.active svg { color: var(--celeste-400); }
.nav-item.active::before { background: var(--brand-500); }
.sidebar-sep { background: rgba(255, 255, 255, .07); }
.sidebar-logout { color: rgba(190, 220, 238, .38); }
.sidebar-logout:hover {
    background: rgba(225, 29, 72, .14);
    color: #fda4af;
}

/* — Mini-calendario en sidebar oscuro ------------------------------------- */
.mini-calendar {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
}
.mini-calendar .calendar-heading h2 { color: rgba(46, 147, 207, .52); }
.mini-calendar .icon-button {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .1);
    color: rgba(190, 220, 238, .65);
}
.mini-calendar .icon-button:hover {
    background: rgba(46, 147, 207, .2);
    border-color: rgba(46, 147, 207, .42);
    color: #67e8f9;
    transform: translateY(-1px);
}
.month-title         { color: rgba(215, 238, 250, .82); }
.weekday-row         { color: rgba(190, 220, 238, .35); }
.calendar-day        { color: rgba(190, 220, 238, .7); }
.calendar-day:hover  { background: rgba(46, 147, 207, .12); color: rgba(255, 255, 255, .95); }
.calendar-day.other-month { color: rgba(190, 220, 238, .22); }
.calendar-legend {
    border-color: rgba(255, 255, 255, .07);
    color: rgba(190, 220, 238, .36);
}

/* — Dark mode: sidebar aún más oscuro ------------------------------------- */
[data-theme="dark"] .sidebar {
    background: #020c16;
    border-right-color: rgba(46, 147, 207, .07);
}
[data-theme="dark"] .mini-calendar {
    background: #0a1624 !important;
    border-color: #172b40 !important;
}
[data-theme="dark"] .month-title     { color: #64748b; }
[data-theme="dark"] .calendar-day   { color: #475569; }
[data-theme="dark"] .calendar-legend { color: #374151; border-color: #172b40; }

/* ── Calendar view toggle (Día / Semana) ─────────────────────────────────── */
.cal-view-toggle {
    display: flex;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    overflow: hidden;
    flex-shrink: 0;
}
.cal-toggle-btn {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    background: none;
    border: none;
    color: var(--ink-500);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    line-height: 1;
}
.cal-toggle-btn + .cal-toggle-btn { border-left: 1px solid var(--line); }
.cal-toggle-btn.active {
    background: var(--brand-50);
    color: var(--brand-700);
}
.cal-toggle-btn:not(.active):hover {
    background: var(--ink-50);
    color: var(--ink-700);
}

/* ── Weekly schedule grid ────────────────────────────────────────────────── */
.wk-grid {
    width: 100%;
    min-width: 680px;
}
.wk-header,
.wk-row {
    display: grid;
    grid-template-columns: 130px repeat(7, 1fr);
}
.wk-header {
    position: sticky;
    top: 0;
    background: var(--surface);
    border-bottom: 2px solid var(--line);
    z-index: 2;
}
.wk-row {
    border-bottom: 1px solid var(--line);
}
.wk-row:last-child { border-bottom: 0; }

.wk-space-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    border-right: 1px solid var(--line);
    background: var(--ink-50);
}
.wk-space-label strong {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-800);
    display: block;
    line-height: 1.2;
}
.wk-space-label span {
    font-size: 9px;
    color: var(--ink-400);
    line-height: 1.2;
}
.wk-space-icon { font-size: 14px; flex-shrink: 0; }
.wk-corner { background: var(--ink-50); border-bottom: 2px solid var(--line); }

.wk-day-header {
    padding: 6px 4px;
    text-align: center;
    border-right: 1px solid var(--line);
    border-bottom: 2px solid var(--line);
    background: var(--surface);
}
.wk-day-header:last-child { border-right: 0; }

.wk-day-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-xs);
    padding: 4px 2px;
    transition: background .15s ease;
}
.wk-day-btn:hover { background: var(--ink-50); }
.wk-day-name {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-500);
}
.wk-day-num {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-700);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.wk-today .wk-day-name { color: var(--brand-600); }
.wk-today .wk-day-num  { background: var(--brand-500); color: #fff; }
.wk-selected:not(.wk-today) .wk-day-num { background: var(--brand-100); color: var(--brand-700); }

.wk-cell {
    padding: 5px 4px;
    border-right: 1px solid var(--line);
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.wk-cell:last-child { border-right: 0; }

.wk-event-chip {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 100%;
    padding: 3px 5px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: filter .15s ease;
    min-height: 22px;
    overflow: hidden;
}
.wk-event-chip:hover { filter: brightness(.92); }
.wk-chip-time {
    font-size: 9px;
    font-weight: 700;
    opacity: .65;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.wk-chip-label {
    font-size: 10px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Chip colors — same palette as event cards */
.wk-event-chip.type-entrenamiento,
.wk-event-chip.type-recuperacion,
.wk-event-chip.type-clinica,
.wk-event-chip.type-reunion {
    background: var(--brand-50);
    border-color: var(--brand-100);
    color: var(--brand-700);
}
.wk-event-chip.type-partido_oficial,
.wk-event-chip.type-partido_amistoso {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
.wk-event-chip.type-evento,
.wk-event-chip.type-mantenimiento {
    background: var(--amber-100);
    border-color: #fde68a;
    color: var(--amber-700);
}
.wk-event-chip.type-conferencia {
    background: var(--purple-100);
    border-color: #ddd6fe;
    color: var(--purple-700);
}

.wk-add-btn {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: var(--radius-xs);
    color: var(--ink-400);
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    padding: 2px 0;
    margin-top: auto;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
    line-height: 1.4;
}
.wk-add-btn:hover {
    background: var(--brand-50);
    border-color: var(--brand-500);
    border-style: solid;
    color: var(--brand-700);
}

/* Dark mode */
[data-theme="dark"] .wk-header,
[data-theme="dark"] .wk-day-header,
[data-theme="dark"] .wk-corner { background: #0b1626; border-color: #20324a; }
[data-theme="dark"] .wk-space-label { background: #081321; border-color: #20324a; }
[data-theme="dark"] .wk-space-label strong { color: #cbd5e1; }
[data-theme="dark"] .wk-space-label span  { color: #4a6070; }
[data-theme="dark"] .wk-row { border-color: #20324a; }
[data-theme="dark"] .wk-cell { border-color: #20324a; }
[data-theme="dark"] .wk-day-name { color: #4a6070; }
[data-theme="dark"] .wk-day-num  { color: #94a3b8; }
[data-theme="dark"] .wk-today .wk-day-num { background: var(--brand-500); color: #fff; }
[data-theme="dark"] .wk-event-chip.type-entrenamiento,
[data-theme="dark"] .wk-event-chip.type-recuperacion,
[data-theme="dark"] .wk-event-chip.type-clinica,
[data-theme="dark"] .wk-event-chip.type-reunion {
    background: rgba(46, 147, 207, .12);
    border-color: rgba(46, 147, 207, .22);
    color: #67e8f9;
}
[data-theme="dark"] .wk-event-chip.type-partido_oficial,
[data-theme="dark"] .wk-event-chip.type-partido_amistoso {
    background: rgba(16, 185, 129, .1);
    border-color: rgba(16, 185, 129, .2);
    color: #34d399;
}
[data-theme="dark"] .wk-event-chip.type-evento,
[data-theme="dark"] .wk-event-chip.type-mantenimiento {
    background: rgba(245, 158, 11, .1);
    border-color: rgba(245, 158, 11, .2);
    color: #fbbf24;
}
[data-theme="dark"] .wk-event-chip.type-conferencia {
    background: rgba(139, 92, 246, .1);
    border-color: rgba(139, 92, 246, .2);
    color: #a78bfa;
}
[data-theme="dark"] .cal-toggle-btn + .cal-toggle-btn { border-color: #20324a; }
[data-theme="dark"] .cal-view-toggle { border-color: #20324a; }
[data-theme="dark"] .cal-toggle-btn.active {
    background: rgba(46, 147, 207, .12);
    color: #67e8f9;
}

/* ════════════════════════════════════════════════════════════════════════════
   TASK 3: Topbar Responsive
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
    .topbar {
        padding: 0 8px;
    }
    .topbar-brand { display: none; }
    .topbar-divider { display: none; }
    .topbar-date { display: none; }
    .topbar-spacer { flex: 1; }
    .topbar-extras {
        margin-right: 0;
        gap: 4px;
        padding: 4px 8px;
        font-size: 11px;
    }
    .topbar-clock { font-size: 11px; }
}

@media (max-width: 767px) {
    .topbar-extras { flex-direction: column; gap: 2px; }
    .topbar-weather { display: none; }
    .topbar-extras-sep { display: none; }
    .topbar-user { display: none; }
}

@media (max-width: 479px) {
    .topbar { height: 48px; --topbar-height: 48px; }
    .topbar-clock { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TASK 4: Dashboard Stat Cards Grid
   ════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1200px) {
    .dashboard-cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .dashboard-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .dashboard-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .stat-card { min-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TASK 5: Calendar Responsive
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .calendar { overflow-x: auto; }
    .day-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 100%;
    }
    .day-slot { min-width: 100%; }
    .event-card { font-size: 12px; padding: 6px; }
    .time-header { font-size: 12px; }
    .add-event-btn { font-size: 10px; padding: 4px 8px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .event-card { font-size: 12px; padding: 8px; }
    .day-slot { min-height: 60px; }
}

@media (min-width: 1200px) {
    .day-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
    }
    .day-slot { min-height: 120px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TASK 6: Tables Responsive
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 600px; }
    thead { font-size: 12px; }
    td, th { padding: 8px 4px; }
}

@media (max-width: 767px) {
    table { min-width: 500px; font-size: 12px; }
    td, th { padding: 6px 4px; }
    thead { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TASK 7: Login Responsive
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .login-hero { min-height: 200px; background-size: cover; background-position: center; }
    .login-panel { width: 90%; margin: 20px auto; padding: 20px; }
    .login-title { font-size: 18px; }
    .login-input { font-size: 16px; padding: 10px; }
    .login-btn { font-size: 14px; padding: 10px 16px; }
    .login-stats { grid-template-columns: 2fr; gap: 12px; margin-top: 20px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .login-hero { min-height: 300px; }
    .login-panel { width: 70%; }
    .login-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .login-stats { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════════════
   TASK 8: Series/Partidos Cards
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .matches-grid, .series-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .match-card, .series-card { min-width: 100%; font-size: 12px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .matches-grid, .series-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (min-width: 1200px) {
    .matches-grid, .series-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   TASK 9: Reportes Charts
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .chart-container { height: 300px; margin: 12px 0; }
    .report-card { padding: 12px; }
    canvas { max-height: 280px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .chart-container { height: 400px; margin: 16px 0; }
    .chart-grid { grid-template-columns: 1fr; }
}

@media (min-width: 1200px) {
    .chart-container { height: 500px; margin: 20px 0; }
    .chart-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   TASK 10: Usuarios/Auditoría
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .users-table thead th:nth-child(n+4) { display: none; }
    .users-table td:nth-child(n+4) { display: none; }
    .users-table tbody tr { margin-bottom: 12px; }
    .audit-table { min-width: 500px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .users-table thead th:nth-child(n+5) { display: none; }
    .users-table td:nth-child(n+5) { display: none; }
}

/* ── Módulo Prensa ───────────────────────────────────────────── */
.seg-control {
    display: flex;
    border: 1.5px solid var(--brand-100);
    border-radius: var(--radius-xs);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--white);
    box-shadow: var(--shadow-xs);
}
.seg-btn {
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    background: none;
    border: none;
    color: var(--ink-500);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    line-height: 1;
    letter-spacing: .01em;
}
.seg-btn + .seg-btn { border-left: 1.5px solid var(--brand-100); }
.seg-btn.active {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff;
}
.seg-btn:not(.active):hover {
    background: var(--brand-50);
    color: var(--brand-700);
}
[data-theme="dark"] .seg-control { background: #0e1f31; border-color: #20324a; }
[data-theme="dark"] .seg-btn { color: #94a3b8; }
[data-theme="dark"] .seg-btn + .seg-btn { border-color: #20324a; }
[data-theme="dark"] .seg-btn.active { background: linear-gradient(135deg, var(--brand-600), var(--brand-500)); color: #fff; }
[data-theme="dark"] .seg-btn:not(.active):hover { background: rgba(46,147,207,.1); color: #67e8f9; }

.prensa-toolbar { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.prensa-nav { display:flex; align-items:center; gap:.4rem; }
.prensa-period { font-weight:600; margin-left:.5rem; }
.prensa-grid.prensa-week { display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; }
.prensa-day { border:1px solid var(--border,#e2e8f0); border-radius:10px; min-height:140px; display:flex; flex-direction:column; }
.prensa-day > header { display:flex; justify-content:space-between; padding:.4rem .6rem; border-bottom:1px solid var(--border,#e2e8f0); font-size:.8rem; }
.prensa-day-body { padding:.4rem; display:flex; flex-direction:column; gap:.35rem; }
.prensa-chip { text-align:left; border:none; border-radius:8px; padding:.35rem .5rem; cursor:pointer; background:#eef2ff; display:flex; flex-direction:column; gap:.1rem; border-left:4px solid #94a3b8; }
.prensa-chip .chip-tipo { font-size:.65rem; text-transform:uppercase; opacity:.7; }
.prensa-chip .chip-titulo { font-size:.8rem; font-weight:600; }
.prensa-chip.prio-alta { border-left-color:#dc2626; }
.prensa-chip.prio-media { border-left-color:#d97706; }
.prensa-chip.prio-baja { border-left-color:#16a34a; }
.prensa-chip.estado-lista { opacity:.6; text-decoration:line-through; }
.prensa-chip.estado-cancelada { opacity:.45; }
.prensa-event-reminder { font-size:.7rem; color:#64748b; background:#f1f5f9; border-radius:6px; padding:.2rem .4rem; }
.prensa-empty { color:#cbd5e1; text-align:center; margin:.3rem 0; }
.prensa-add { font-size:.72rem; border:1px dashed #cbd5e1; border-radius:6px; background:transparent; cursor:pointer; padding:.25rem; color:#64748b; }
.prensa-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; margin-bottom:.3rem; font-size:.72rem; color:#64748b; text-transform:capitalize; }
.prensa-month { display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; }
.prensa-mcell { min-height:70px; border:1px solid var(--border,#e2e8f0); border-radius:8px; background:#fff; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; padding:.3rem; gap:.2rem; }
.prensa-mcell.empty { border:none; background:transparent; cursor:default; }
.prensa-mcell .mcell-day { font-size:.75rem; font-weight:600; }
.prensa-mcell .mcell-dots { display:flex; gap:.15rem; flex-wrap:wrap; }
.prensa-mcell .dot { width:7px; height:7px; border-radius:50%; background:#94a3b8; display:inline-block; }
.prensa-mcell .dot.estado-lista { background:#16a34a; }
.prensa-mcell .dot.estado-progreso { background:#d97706; }
.prensa-mcell .dot.estado-cancelada { background:#cbd5e1; }
.prensa-mcell .dot-event { background:#6366f1; }
.prensa-mcell .mcell-more { font-size:.65rem; color:#64748b; }
.prensa-year { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.prensa-ycell { border:1px solid var(--border,#e2e8f0); border-radius:10px; padding:1rem; background:#fff; cursor:pointer; display:flex; flex-direction:column; gap:.3rem; text-align:left; }
.prensa-ycell strong { text-transform:capitalize; }
.prensa-ycell span { font-size:.8rem; color:#64748b; }

/* ── Prensa timetable (estilo grilla canchas) ───────────────── */
#prensa-grid.prensa-tt-day .schedule-header,
#prensa-grid.prensa-tt-day .schedule-row { grid-template-columns: 118px minmax(180px,1fr); }
#prensa-grid.prensa-tt-week .schedule-header,
#prensa-grid.prensa-tt-week .schedule-row { grid-template-columns: 118px repeat(7, minmax(120px,1fr)); }
#prensa-grid.prensa-tt .slot { min-height: 44px; padding: 3px; border-right: 1px solid var(--line,#e2e8f0); border-bottom: 1px solid var(--line,#e2e8f0); }
.prensa-tt-task { width:100%; text-align:left; border:none; border-left:4px solid #94a3b8; border-radius:6px; padding:4px 6px; cursor:pointer; background:#eef2ff; display:flex; flex-direction:column; gap:1px; }
.prensa-tt-task .ttt-time { font-size:.62rem; opacity:.7; }
.prensa-tt-task .ttt-tipo { font-size:.6rem; text-transform:uppercase; opacity:.65; }
.prensa-tt-task .ttt-titulo { font-size:.78rem; font-weight:600; }
.prensa-tt-task.prio-alta { border-left-color:#dc2626; }
.prensa-tt-task.prio-media { border-left-color:#d97706; }
.prensa-tt-task.prio-baja { border-left-color:#16a34a; }
.prensa-tt-task.estado-lista { opacity:.6; text-decoration:line-through; }
.prensa-tt-task.estado-cancelada { opacity:.45; }
.prensa-tt-cont { height:100%; min-height:38px; border-radius:6px; background:#eef2ff; opacity:.45; }
.prensa-tt-cont.estado-lista { background:#dcfce7; }
.prensa-tt-cont.estado-progreso { background:#fef3c7; }
.prensa-tt-add { width:100%; height:100%; min-height:38px; border:1px dashed transparent; border-radius:6px; background:transparent; color:#cbd5e1; cursor:pointer; font-size:.9rem; }
.prensa-tt-add:hover { border-color:#cbd5e1; color:#64748b; }
.prensa-tt-free { display:block; min-height:38px; }
@media (max-width:780px){ #prensa-grid.prensa-tt-week .schedule-header, #prensa-grid.prensa-tt-week .schedule-row { grid-template-columns:80px repeat(7,minmax(72px,1fr)); } }
@media (max-width:780px){ .prensa-grid.prensa-week{grid-template-columns:1fr;} .prensa-year{grid-template-columns:repeat(2,1fr);} }

/* ── Módulo Planteles ───────────────────────────────────────── */
.pl-toolbar { margin-bottom: 1.25rem; }
.pl-seg { flex-wrap: wrap; }

.pl-group { margin-bottom: 2rem; }
.pl-group-title {
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: .75rem; font-size: .85rem; font-weight: 700;
}
.pl-group-count { color: var(--ink-400); font-weight: 500; font-size: .8rem; }

.pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.pl-card {
    display: flex; align-items: center; gap: .6rem;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1rem 1rem 1.1rem;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.pl-card:hover {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.pl-avatar {
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
    position: relative;
}
.pl-avatar svg {
    display: block;
    position: absolute; bottom: 0; left: 0;
}

.pl-card-body { min-width: 0; flex: 1; padding: 2px 0; }
.pl-name {
    font-size: .88rem; font-weight: 700;
    color: var(--ink-800); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    margin-bottom: .45rem;
    line-height: 1.3;
}
.pl-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-bottom: .4rem; }
.pl-cat-pill {
    border-radius: 999px; padding: 3px 10px;
    font-size: .7rem; font-weight: 800;
    white-space: nowrap;
}
.pl-pos { font-size: .72rem; color: var(--ink-500); }
.pl-number { font-size: .72rem; font-weight: 700; color: var(--ink-600); }
.pl-estado-pill {
    border-radius: 999px; padding: 2px 8px;
    font-size: .68rem; font-weight: 700;
    display: inline-block;
}
.pl-empty { color: var(--ink-400); text-align: center; padding: 3rem 0; }

/* Detalle dialog */
.pl-detail-header {
    display: flex; align-items: center; gap: 1.25rem;
    margin-bottom: 1.5rem; padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
}
.pl-detail-name {
    font-size: 1.15rem; font-weight: 800;
    color: var(--ink-900); margin-bottom: .55rem;
    line-height: 1.25;
}
.pl-detail-header-pills { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pl-detail-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}
.pl-detail-row {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--ink-50); border-radius: var(--radius);
    padding: .6rem .75rem;
}
.pl-detail-label {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-400);
}
.pl-detail-val {
    font-size: .9rem; font-weight: 600;
    color: var(--ink-800); line-height: 1.3;
}

[data-theme="dark"] .pl-card { background: #0e1f31; border-color: #20324a; }
[data-theme="dark"] .pl-card:hover { border-color: var(--brand-500); }
[data-theme="dark"] .pl-name { color: #e2e8f0; }
[data-theme="dark"] .pl-detail-name { color: #e2e8f0; }
[data-theme="dark"] .pl-detail-val  { color: #cbd5e1; }
[data-theme="dark"] .pl-detail-row  { background: #0e1f31; }
[data-theme="dark"] .pl-detail-label { color: #4a6070; }
[data-theme="dark"] .pl-group-title { color: #94a3b8; }

/* Card: botón editar en esquina */
.pl-card { position: relative; }
.pl-card-main {
    display: flex; align-items: center; gap: 1rem;
    flex: 1; background: none; border: none; text-align: left; cursor: pointer;
    padding: 0; min-width: 0;
}
.pl-card-action {
    flex-shrink: 0; opacity: 0;
    background: var(--ink-50); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 5px 7px;
    color: var(--ink-500); cursor: pointer;
    transition: opacity .15s ease, background .15s ease;
    display: flex; align-items: center;
}
.pl-card:hover .pl-card-action { opacity: 1; }
.pl-card-action:hover { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); }
[data-theme="dark"] .pl-card-action { background: #0e1f31; border-color: #20324a; color: #94a3b8; }

/* Form jugador */
.pl-form-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.pl-form-full { grid-column: 1 / -1; }
.pl-form-grid .form-field { display: flex; flex-direction: column; gap: 5px; }
.pl-form-grid .form-field label { font-size: .75rem; font-weight: 700; color: var(--ink-600); }
.pl-form-grid input,
.pl-form-grid select,
.pl-form-grid textarea {
    border: 1.5px solid var(--line); border-radius: var(--radius);
    padding: 8px 11px; font-size: .88rem; color: var(--ink-800);
    background: var(--surface); width: 100%; box-sizing: border-box;
    transition: border-color .15s ease;
}
.pl-form-grid input:focus,
.pl-form-grid select:focus,
.pl-form-grid textarea:focus { outline: none; border-color: var(--brand-500); }
.pl-form-grid textarea { resize: vertical; min-height: 60px; }
[data-theme="dark"] .pl-form-grid input,
[data-theme="dark"] .pl-form-grid select,
[data-theme="dark"] .pl-form-grid textarea { background: #0e1f31; border-color: #20324a; color: #e2e8f0; }

@media (max-width: 600px) {
    .pl-grid { grid-template-columns: 1fr 1fr; }
    .pl-detail-grid { grid-template-columns: 1fr; }
    .pl-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
    .pl-grid { grid-template-columns: 1fr; }
}

/* ── Foto de jugador ─────────────────────────────────────────── */
.pl-avatar-photo { overflow: hidden; border-radius: 50%; flex-shrink: 0; }
.pl-avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pl-foto-upload { margin-bottom: 4px; }
.pl-foto-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pl-foto-preview { flex-shrink: 0; }
.pl-foto-preview-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--brand-200); display: block; }
.pl-foto-preview-empty { opacity: .6; }
.pl-foto-actions { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.pl-foto-btn { cursor: pointer; position: relative; overflow: hidden; display: inline-flex !important; align-items: center; gap: .4rem; }
.pl-foto-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.pl-foto-remove-btn { margin-left: 0 !important; }
[data-theme="dark"] .pl-foto-preview-img { border-color: var(--brand-600); }

/* Planteles — tab system */
.pl-detail-tabs { display: flex; gap: .25rem; margin: .75rem 0; border-bottom: 2px solid var(--brand-100); padding-bottom: 0; }
.pl-tab { padding: .4rem .9rem; font-size: .78rem; font-weight: 600; border: none; background: none; cursor: pointer; color: var(--ink-500); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.pl-tab:hover { color: var(--ink-700); }
.pl-tab.active { color: var(--brand-600); border-bottom-color: var(--brand-500); }
.pl-tab-panel { margin-top: .5rem; }
[data-theme="dark"] .pl-detail-tabs { border-color: #20324a; }
[data-theme="dark"] .pl-tab { color: #64748b; }
[data-theme="dark"] .pl-tab:hover { color: #94a3b8; }

/* ── Control Deportivo ───────────────────────────────────────── */
.cd-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }
.cd-section-title { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-600); margin: 1.5rem 0 .75rem; }
.cd-loading { text-align: center; padding: 2rem; color: var(--ink-500); }

/* Dashboard */
.cd-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.cd-stat-card { padding: 1rem 1.25rem; }
.cd-stat-good { color: #16a34a; } .cd-stat-warn { color: #f59e0b; } .cd-stat-bad { color: #dc2626; }

/* Series cards */
.cd-series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.cd-series-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: .75rem; padding: 1rem; }
.cd-series-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.cd-series-players { font-size: .75rem; color: var(--ink-500); }
.cd-series-bar { height: 6px; background: var(--brand-100); border-radius: 3px; margin: .5rem 0; overflow: hidden; }
.cd-bar-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.cd-series-pct { font-size: 1.25rem; font-weight: 700; color: var(--ink-800); }
.cd-today-mini { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .5rem; }
.cd-mini-badge { font-size: .65rem; padding: 1px 6px; border-radius: 10px; font-weight: 600; }
.cd-no-sessions { font-size: .7rem; color: var(--ink-400); display: block; margin-top: .25rem; }

/* Session list */
.cd-serie-selector { margin-bottom: 1rem; overflow-x: auto; }
.cd-session-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: .75rem; padding: .75rem 1rem; margin-bottom: .5rem; }
.cd-session-main { display: flex; align-items: center; gap: .75rem; }
.cd-session-icon { font-size: 1.5rem; flex-shrink: 0; }
.cd-session-info { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; min-width: 0; flex: 1; }
.cd-session-info strong { font-size: .9rem; color: var(--ink-800); }
.cd-session-info span { color: var(--ink-500); font-size: .75rem; }
.cd-responsable { color: var(--ink-600) !important; }
.cd-session-actions { display: flex; gap: .4rem; margin-top: .5rem; justify-content: flex-end; }
.cd-date, .cd-time { font-size: .75rem; color: var(--ink-500); }

/* Session status badges */
.cd-sesion-programada { background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; }
.cd-sesion-realizada { background: #d1fae5; color: #065f46; padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; }
.cd-sesion-suspendida { background: #fef3c7; color: #92400e; padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; }
.cd-sesion-cancelada { background: #fee2e2; color: #991b1b; padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; }
.cd-sesion-cerrada { background: #f1f5f9; color: #475569; padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; }
.cd-session-status { flex-shrink: 0; }

/* Attendance badges */
.cd-badge-pending    { background: #f1f5f9; color: #64748b; }
.cd-badge-presente   { background: #dcfce7; color: #166534; }
.cd-badge-ausente    { background: #fee2e2; color: #991b1b; }
.cd-badge-atrasado   { background: #fef3c7; color: #92400e; }
.cd-badge-justificado{ background: #dbeafe; color: #1e40af; }
.cd-badge-lesionado  { background: #ede9fe; color: #5b21b6; }
.cd-badge-suspendido { background: #f1f5f9; color: #475569; }
.cd-badge-permiso    { background: #fff7ed; color: #c2410c; }

/* Attendance view */
.cd-att-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border, #e2e8f0); }
.cd-att-header strong { display: block; font-size: .95rem; }
.cd-att-header span { display: block; font-size: .75rem; color: var(--ink-500); }
.cd-closed-banner { text-align: center; padding: .5rem; background: #f1f5f9; border-radius: .5rem; font-size: .8rem; color: var(--ink-600); margin-bottom: .75rem; }
.cd-att-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.cd-search-input { flex: 1; min-width: 160px; padding: .4rem .75rem; border: 1px solid var(--border, #e2e8f0); border-radius: .5rem; font-size: .82rem; }
.cd-att-status-filter .seg-btn { font-size: .68rem; padding: .25rem .5rem; }
.cd-att-list { max-height: 55vh; overflow-y: auto; }
.cd-att-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .6rem .5rem; border-bottom: 1px solid var(--brand-50); transition: background .15s; }
.cd-att-row:hover { background: var(--brand-25); }
.cd-att-player { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; }
.cd-att-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cd-att-avatar-svg { border-radius: 50%; flex-shrink: 0; }
.cd-att-player-info { min-width: 0; }
.cd-att-player-info strong { font-size: .82rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-att-pos { font-size: .68rem; color: var(--ink-500); }
.cd-att-num { font-size: .68rem; color: var(--brand-500); margin-left: .3rem; font-weight: 700; }
.cd-att-controls { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; min-width: 180px; }
.cd-att-quick { display: flex; gap: 4px; flex-wrap: wrap; }
.cd-att-btn { padding: 4px 9px; border-radius: 14px; border: 1.5px solid var(--border, #e2e8f0); background: #fff; font-size: .7rem; font-weight: 700; cursor: pointer; transition: all .12s; color: var(--ink-600); white-space: nowrap; line-height: 1.3; }
.cd-att-btn:hover:not(:disabled) { transform: scale(1.1); }
.cd-att-btn:disabled { opacity: .5; cursor: not-allowed; }
.cd-att-extras { display: flex; gap: .3rem; align-items: center; }
.cd-att-time-label { font-size: .68rem; color: var(--ink-500); display: flex; align-items: center; gap: .25rem; }
.cd-att-time-label input { width: 72px; font-size: .7rem; padding: 1px 4px; border: 1px solid var(--border, #e2e8f0); border-radius: 4px; }
.cd-att-reason { font-size: .68rem; padding: 2px 4px; border: 1px solid var(--border, #e2e8f0); border-radius: 4px; width: 130px; }
.cd-att-obs { font-size: .68rem; padding: 2px 5px; border: 1px solid var(--border, #e2e8f0); border-radius: 4px; width: 160px; resize: none; }
.cd-top-count { font-size: 1.25rem; font-weight: 800; color: #dc2626; margin-left: auto; }

/* Alerts */
.cd-alerts-list { display: flex; flex-direction: column; gap: .4rem; }
.cd-alert-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: .5rem; }
.cd-alert-icon { font-size: 1.1rem; flex-shrink: 0; }
.cd-alert-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: .78rem; }
.cd-alert-body span { font-size: .7rem; color: var(--ink-500); }

/* Sessions list (dashboard) */
.cd-sessions-list { display: flex; flex-direction: column; gap: .35rem; }
.cd-session-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .4rem .6rem; background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: .5rem; font-size: .78rem; }

/* Report table */
.cd-report-controls { margin-bottom: 1rem; }
.cd-report-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.cd-report-table th { background: var(--brand-25); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-600); padding: .4rem .5rem; text-align: left; border-bottom: 2px solid var(--border, #e2e8f0); }
.cd-report-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--brand-50); }
.cd-report-table tr:hover td { background: var(--brand-25); }

/* Dark mode */
[data-theme="dark"] .cd-series-card,
[data-theme="dark"] .cd-session-card,
[data-theme="dark"] .cd-session-row { background: #0e1f31; border-color: #20324a; }
[data-theme="dark"] .cd-att-row { border-color: #20324a50; }
[data-theme="dark"] .cd-att-row:hover { background: #1a2d4240; }
[data-theme="dark"] .cd-att-btn { background: #0e1f31; border-color: #20324a; color: #94a3b8; }
[data-theme="dark"] .cd-search-input,
[data-theme="dark"] .cd-att-reason,
[data-theme="dark"] .cd-att-obs,
[data-theme="dark"] .cd-att-time-label input { background: #0e1f31; border-color: #20324a; color: #e2e8f0; }
[data-theme="dark"] .cd-report-table th { background: #0e1f31; }
[data-theme="dark"] .cd-report-table tr:hover td { background: #1a2d4250; }
[data-theme="dark"] .cd-alert-item { background: #1a0f0f; border-color: #3b1515; }
[data-theme="dark"] .cd-closed-banner { background: #0e1f31; }

/* Responsive */
@media (max-width: 600px) {
    .cd-att-row { flex-direction: column; align-items: stretch; }
    .cd-att-controls { align-items: stretch; min-width: auto; }
    .cd-att-quick { justify-content: flex-start; }
    .cd-session-main { flex-wrap: wrap; }
    .cd-dash-grid { grid-template-columns: 1fr 1fr; }
    .cd-series-grid { grid-template-columns: 1fr; }
}

/* ── Gestión Médica ─────────────────────────────────────────────────────────── */
.med-ficha-modal { max-width: 780px; max-height: min(96vh, 920px); }
.med-form-modal  { max-width: 620px; max-height: min(94vh, 880px); }

.med-ficha-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.med-lesion-banner {
    margin: .5rem 0; padding: .4rem .75rem;
    background: #fef3c7; border: 1px solid #fde68a; border-radius: .5rem;
    font-size: .78rem; color: #92400e; font-weight: 500;
}
.med-ficha-tabs {
    display: flex; gap: .25rem; margin: .75rem 0 .25rem;
    border-bottom: 2px solid var(--brand-100);
}

/* Estado badge médico */
.med-estado-badge {
    display: inline-block; padding: 2px 9px; border-radius: 10px;
    font-size: .68rem; font-weight: 700; white-space: nowrap;
}

/* Estado grid (selector rápido de estado) */
.med-estado-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .4rem;
}
.med-estado-btn {
    padding: .4rem .6rem; border-radius: .5rem; border: 1.5px solid; cursor: pointer;
    font-size: .75rem; font-weight: 600; text-align: left; transition: all .12s;
    background: transparent;
}
.med-estado-btn:hover { opacity: .85; }

/* Serie stats en dashboard */
.med-serie-stats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .35rem; }

/* Badges petitorios */
.med-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .65rem; font-weight: 700; }
.med-badge-amber   { background: #fef3c7; color: #92400e; }
.med-badge-grass   { background: #dcfce7; color: #166534; }
.med-badge-red     { background: #fee2e2; color: #991b1b; }
.med-badge-celeste { background: #dbeafe; color: #1e40af; }
.med-badge-purple  { background: #ede9fe; color: #5b21b6; }

/* Dark mode */
[data-theme="dark"] .med-lesion-banner { background: #2a1f00; border-color: #5a3b00; color: #fde68a; }
[data-theme="dark"] .med-estado-btn { border-color: currentColor; }
[data-theme="dark"] .med-badge-amber   { background: #2a1f00; color: #fde68a; }
[data-theme="dark"] .med-badge-grass   { background: #0a2e1a; color: #4ade80; }
[data-theme="dark"] .med-badge-red     { background: #2d0a0a; color: #fca5a5; }
[data-theme="dark"] .med-badge-celeste { background: #0a1e3d; color: #93c5fd; }
[data-theme="dark"] .med-badge-purple  { background: #1e0a3d; color: #c4b5fd; }

@media (max-width: 600px) {
    .med-ficha-modal, .med-form-modal { max-width: calc(100% - 20px); }
    .med-estado-grid { grid-template-columns: 1fr 1fr; }
    .med-ficha-header { flex-direction: column; }
}

/* ── Planteles: Informe Médico tab ───────────────────────────── */
.pl-med-status-banner {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem;
}
.pl-med-status-icon { font-size: 1.4rem; line-height: 1; }
.pl-med-status-label { font-size: .9rem; font-weight: 700; }
.pl-med-status-lesion { font-size: .78rem; color: var(--ink-600); margin-top: .15rem; }
.pl-med-retorno { margin-left: auto; text-align: right; }
.pl-med-retorno-label { display: block; font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); margin-bottom: .1rem; }
.pl-med-section { margin-bottom: 1.25rem; }
.pl-med-section-title {
    font-size: .78rem; font-weight: 700; color: var(--ink-600);
    text-transform: uppercase; letter-spacing: .04em;
    display: flex; align-items: center; gap: .4rem;
    margin-bottom: .6rem; padding-bottom: .35rem;
    border-bottom: 1px solid var(--brand-100);
}
.pl-med-section-date { font-size: .7rem; font-weight: 400; color: var(--ink-400); margin-left: .25rem; }
.pl-med-badge-tag { font-size: .65rem; background: var(--brand-100); color: var(--brand-700); padding: 1px 7px; border-radius: 8px; font-weight: 600; }
.pl-med-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; }
.pl-med-full { grid-column: 1 / -1; }
.pl-med-field { display: flex; flex-direction: column; gap: .1rem; }
.pl-med-field-label { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
.pl-med-field-val { font-size: .82rem; color: var(--ink-800); line-height: 1.4; }
@media (max-width: 500px) {
    .pl-med-grid { grid-template-columns: 1fr; }
    .pl-med-status-banner { flex-wrap: wrap; }
    .pl-med-retorno { margin-left: 0; text-align: left; }
}

/* ── Gestión Médica: dashboard cards clickeables ─────────────── */
.med-dash-card { transition: transform .12s, box-shadow .12s; }
.med-dash-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.10); }
.med-dash-card:active { transform: translateY(0); }