/* ============================================================
   Mi Equipo Stats – Theme v3 "Nocturno"
   Modo oscuro único · Lima #C8F135 · Space Grotesk + IBM Plex Sans
   ============================================================ */

:root {
    /* ── Tipografía ── */
    --ct-font-family:     'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --ct-font-display:    'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;

    /* ── Paleta principal (acento lima) ── */
    --ct-primary:         #C8F135;
    --ct-primary-hover:   #D9FA5E;
    --ct-primary-subtle:  rgba(200, 241, 53, .12);
    --ct-primary-ring:    rgba(200, 241, 53, .18);
    --ct-on-accent:       #10201A;   /* texto sobre lima */

    --ct-accent:          #C8F135;
    --ct-accent-hover:    #D9FA5E;
    --ct-accent-subtle:   rgba(200, 241, 53, .12);

    /* ── Semánticos ── */
    --ct-success:         #4ADE80;
    --ct-success-subtle:  rgba(74, 222, 128, .14);
    --ct-danger:          #F87171;
    --ct-danger-subtle:   rgba(248, 113, 113, .12);
    --ct-warning:         #FACC15;
    --ct-warning-subtle:  rgba(250, 204, 21, .14);
    --ct-info:            #38BDF8;
    --ct-info-subtle:     rgba(56, 189, 248, .14);
    /* Naranja: no tiene contextual de Bootstrap, se usa para la categoría
       "Velocidad" de tareas y bloques, que cuelga de Físico pero se distingue. */
    --ct-orange:          #FB923C;
    --ct-orange-subtle:   rgba(251, 146, 60, .16);

    /* ── Superficies ── */
    --ct-surface-body:    #0B1712;
    --ct-surface-card:    #142822;
    --ct-surface-hover:   #0F1E18;
    --ct-surface-active:  #17342A;
    --ct-surface-raised:  #17342A;   /* avatares, chips, sub-cards elevadas */
    --ct-surface-sidebar: #0B1712;

    /* ── Texto ── */
    --ct-text-primary:    #E8F5EE;
    --ct-text-secondary:  #B7CCC1;
    --ct-text-tertiary:   #8AA598;
    --ct-text-faint:      #6E8A7D;   /* placeholders, cabeceras de tabla, metadatos */
    --ct-text-inverse:    #10201A;
    --ct-icon-muted:      #4C6B5D;   /* iconos decorativos en KPI */

    /* ── Bordes ── */
    --ct-border:          #1C332A;
    --ct-border-light:    #16291F;
    --ct-border-strong:   #35584A;   /* inputs, botones secundarios */

    /* ── Secciones (colores por módulo, legibles en dark) ── */
    --ct-section-matches:     #FACC15;
    --ct-section-players:     #C8F135;
    --ct-section-teams:       #4ADE80;
    --ct-section-trainings:   #A78BFA;
    --ct-section-evaluations: #38BDF8;
    --ct-section-surveys:     #F472B6;
    --ct-section-calendar:    #FB923C;
    --ct-section-share:       #22D3EE;

    /* ---- Color por línea del campo (portería / defensa / medio / ataque) ----
       Identifica la posición de un vistazo en toda la plataforma. La línea la
       decide TeamType::positionGroup() (espejo en public/js/position-colors.js);
       aquí solo vive el color. Deliberadamente suave: tinte + texto, nunca
       relleno sólido, para no competir con los estados (lesionada, sancionada). */
    --ct-pos-gk:          #A78BFA;
    --ct-pos-gk-subtle:   rgba(167, 139, 250, .16);
    --ct-pos-gk-border:   rgba(167, 139, 250, .42);
    --ct-pos-def:         #38BDF8;
    --ct-pos-def-subtle:  rgba(56, 189, 248, .16);
    --ct-pos-def-border:  rgba(56, 189, 248, .42);
    --ct-pos-mid:         #FACC15;
    --ct-pos-mid-subtle:  rgba(250, 204, 21, .16);
    --ct-pos-mid-border:  rgba(250, 204, 21, .42);
    --ct-pos-fwd:         #F87171;
    --ct-pos-fwd-subtle:  rgba(248, 113, 113, .16);
    --ct-pos-fwd-border:  rgba(248, 113, 113, .42);
    --ct-pos-none:        #8AA598;
    --ct-pos-none-subtle: rgba(138, 165, 152, .14);
    --ct-pos-none-border: rgba(138, 165, 152, .38);

    /* ── Tipografía — escalas ── */
    --ct-font-xs:   .7rem;
    --ct-font-sm:   .8rem;
    --ct-font-md:   .875rem;
    --ct-font-body: 1rem;
    --ct-font-lg:   1.25rem;
    --ct-font-xl:   1.5rem;
    --ct-font-2xl:  2rem;

    /* ── Espaciado ── */
    --ct-space-xs:  .5rem;
    --ct-space-sm:  .75rem;
    --ct-space-md:  1rem;
    --ct-space-lg:  1.5rem;
    --ct-space-xl:  2rem;

    /* ── Avatares ── */
    --ct-avatar-xs:  28px;
    --ct-avatar-sm:  36px;
    --ct-avatar-md:  48px;
    --ct-avatar-lg:  80px;
    --ct-avatar-xl:  140px;

    /* ── Sombras (suaves sobre fondo oscuro) ── */
    --ct-shadow-xs:    0 1px 2px rgba(0, 0, 0, .25);
    --ct-shadow-card:  0 1px 3px rgba(0, 0, 0, .30);
    --ct-shadow-hover: 0 4px 14px rgba(0, 0, 0, .40);
    --ct-shadow-lg:    0 8px 28px rgba(0, 0, 0, .50);

    /* ── Bordes redondeados ── */
    --ct-radius-sm:    5px;      /* badges de posición */
    --ct-radius-md:    10px;     /* inputs, selects */
    --ct-radius-lg:    12px;     /* cards */
    --ct-radius-xl:    14px;     /* contenedor de página */
    --ct-radius-full:  50%;
    --ct-radius-pill:  999px;    /* botones, chips, badges de estado */

    /* ── Transiciones ── */
    --ct-transition:   .15s ease;

    /* ── Legacy aliases (compatibilidad) ── */
    --color-dark:          #E8F5EE;
    --color-accent:        #C8F135;
    --color-accent-hover:  #D9FA5E;
    --color-bg:            #0B1712;
    --color-gray-light:    #1C332A;
    --color-sidebar:       #0B1712;
    --color-sidebar-hover: #142822;
    --ct-brand:            #C8F135;
    --ct-brand-hover:      #D9FA5E;
    --ct-brand-subtle:     rgba(200, 241, 53, .12);
    --ct-bg-page:          #0B1712;
    --ct-bg-card:          #142822;
    --ct-bg-sidebar:       #0B1712;
    --ct-bg-sidebar-hover: #142822;
}

/* ============================================================
   Puente Bootstrap 5.3 dark — el <html> lleva data-bs-theme="dark";
   aquí se mapean las variables de Bootstrap a los tokens Nocturno
   para que las utilities (bg-light, text-muted, tablas, modales,
   dropdowns, offcanvas…) resuelvan a la paleta del tema.
   ============================================================ */
[data-bs-theme="dark"] {
    --bs-primary-rgb: 200, 241, 53;
    --bs-success-rgb: 74, 222, 128;
    --bs-danger-rgb: 248, 113, 113;
    --bs-warning-rgb: 250, 204, 21;
    --bs-info-rgb: 56, 189, 248;
    --bs-body-bg: var(--ct-surface-body);
    --bs-body-color: var(--ct-text-primary);
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--ct-text-tertiary);
    --bs-secondary-bg: var(--ct-surface-raised);
    --bs-tertiary-color: var(--ct-text-faint);
    --bs-tertiary-bg: var(--ct-surface-hover);
    --bs-border-color: var(--ct-border);
    --bs-border-color-translucent: rgba(232, 245, 238, .12);
    --bs-heading-color: var(--ct-text-primary);
    --bs-link-color: var(--ct-accent);
    --bs-link-hover-color: var(--ct-accent-hover);
    --bs-link-color-rgb: 200, 241, 53;
    --bs-link-hover-color-rgb: 217, 250, 94;
    --bs-highlight-bg: var(--ct-warning-subtle);
    --bs-form-valid-color: var(--ct-success);
    --bs-form-valid-border-color: var(--ct-success);
    --bs-form-invalid-color: var(--ct-danger);
    --bs-form-invalid-border-color: var(--ct-danger);
    /* Subtle backgrounds de estado = color al 12–14% con texto puro */
    --bs-success-bg-subtle: var(--ct-success-subtle);
    --bs-success-border-subtle: rgba(74, 222, 128, .35);
    --bs-success-text-emphasis: var(--ct-success);
    --bs-danger-bg-subtle: var(--ct-danger-subtle);
    --bs-danger-border-subtle: rgba(248, 113, 113, .35);
    --bs-danger-text-emphasis: var(--ct-danger);
    --bs-warning-bg-subtle: var(--ct-warning-subtle);
    --bs-warning-border-subtle: rgba(250, 204, 21, .35);
    --bs-warning-text-emphasis: var(--ct-warning);
    --bs-info-bg-subtle: var(--ct-info-subtle);
    --bs-info-border-subtle: rgba(56, 189, 248, .35);
    --bs-info-text-emphasis: var(--ct-info);
    --bs-primary-bg-subtle: var(--ct-accent-subtle);
    --bs-primary-border-subtle: rgba(200, 241, 53, .35);
    --bs-primary-text-emphasis: var(--ct-accent);
    --bs-secondary-bg-subtle: var(--ct-surface-raised);
    --bs-secondary-border-subtle: var(--ct-border-strong);
    --bs-secondary-text-emphasis: var(--ct-text-secondary);
    --bs-light-bg-subtle: var(--ct-surface-raised);
    --bs-light-border-subtle: var(--ct-border);
    --bs-dark-bg-subtle: var(--ct-surface-hover);
    --bs-dark-border-subtle: var(--ct-border);
    --bs-dark-text-emphasis: var(--ct-text-primary);
}

/* Variantes de tabla claras → superficies Nocturno */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-white,
[data-bs-theme="dark"] .table-secondary {
    --bs-table-bg: var(--ct-surface-card);
    --bs-table-color: var(--ct-text-faint);
    --bs-table-border-color: var(--ct-border);
    --bs-table-striped-bg: var(--ct-surface-hover);
    --bs-table-hover-bg: var(--ct-surface-hover);
    color: var(--ct-text-faint);
    border-color: var(--ct-border);
}

/* Variantes contextuales de fila (.table-warning, .table-info, .table-danger…):
   Bootstrap las pinta con fondos claros fijos que no dependen del tema, así que
   el texto del tema, los enlaces (lima) y los badges sutiles quedaban encima de
   un amarillo/rosa pálido sin contraste. Se reconducen a un tinte del color
   sobre la superficie oscura, conservando el color de texto de Nocturno. */
[data-bs-theme="dark"] :is(.table-primary, .table-success, .table-danger, .table-warning, .table-info) {
    --bs-table-color: var(--ct-text-primary);
    --bs-table-color-type: var(--ct-text-primary);
    --bs-table-striped-color: var(--ct-text-primary);
    --bs-table-hover-color: var(--ct-text-primary);
    --bs-table-active-color: var(--ct-text-primary);
    --bs-table-border-color: var(--ct-border);
    --bs-table-striped-bg: var(--ct-surface-hover);
    --bs-table-hover-bg: var(--ct-surface-hover);
    --bs-table-active-bg: var(--ct-surface-active);
    color: var(--ct-text-primary);
    border-color: var(--ct-border);
}
[data-bs-theme="dark"] .table-primary { --bs-table-bg: rgba(200, 241, 53, .07); }
[data-bs-theme="dark"] .table-success { --bs-table-bg: rgba(74, 222, 128, .07); }
[data-bs-theme="dark"] .table-danger  { --bs-table-bg: rgba(248, 113, 113, .07); }
[data-bs-theme="dark"] .table-warning { --bs-table-bg: rgba(250, 204, 21, .07); }
[data-bs-theme="dark"] .table-info    { --bs-table-bg: rgba(56, 189, 248, .07); }

/* Fondos sólidos vivos (no badge): texto oscuro para mantener contraste */
[data-bs-theme="dark"] :is(.bg-warning, .bg-info, .bg-success, .bg-primary):not(.badge) { color: var(--ct-on-accent); }
[data-bs-theme="dark"] :is(.bg-warning, .bg-info, .bg-success, .bg-primary).text-dark { color: var(--ct-on-accent) !important; }

/* Utilities claras hardcodeadas en vistas → superficies Nocturno */
[data-bs-theme="dark"] .bg-white  { background-color: var(--ct-surface-card) !important; }
[data-bs-theme="dark"] .bg-light  { background-color: var(--ct-surface-raised) !important; }
[data-bs-theme="dark"] .bg-dark   { background-color: var(--ct-surface-body) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--ct-text-primary) !important; }
[data-bs-theme="dark"] .text-muted { color: var(--ct-text-tertiary) !important; }
[data-bs-theme="dark"] .btn-light { --bs-btn-bg: var(--ct-surface-raised); --bs-btn-border-color: var(--ct-border-strong); --bs-btn-color: var(--ct-text-primary); --bs-btn-hover-bg: var(--ct-surface-active); --bs-btn-hover-border-color: var(--ct-accent); --bs-btn-hover-color: var(--ct-text-primary); }
[data-bs-theme="dark"] .badge.bg-info    { background-color: var(--ct-info-subtle) !important; color: var(--ct-info) !important; }
[data-bs-theme="dark"] .badge.bg-warning { background-color: var(--ct-warning-subtle) !important; color: var(--ct-warning) !important; }
[data-bs-theme="dark"] .badge.bg-success { background-color: var(--ct-success-subtle) !important; color: var(--ct-success) !important; }
[data-bs-theme="dark"] .badge.bg-danger  { background-color: var(--ct-danger-subtle) !important; color: var(--ct-danger) !important; }
[data-bs-theme="dark"] .badge.bg-secondary { background-color: var(--ct-surface-raised) !important; color: var(--ct-text-secondary) !important; }
[data-bs-theme="dark"] .badge.bg-primary { background-color: var(--ct-accent-subtle) !important; color: var(--ct-accent) !important; }
/* Categoría "Velocidad": Bootstrap no trae contextual naranja, así que el
   badge_color de TrainingTask/TrainingSessionBlock devuelve 'speed'. */
.badge.bg-speed { background-color: var(--ct-orange-subtle) !important; color: var(--ct-orange) !important; }

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

body {
    font-family: var(--ct-font-family);
    background-color: var(--ct-surface-body);
    color: var(--ct-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Space Grotesk para display: títulos, números, botones, badges */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn, .badge, .nav-tabs .nav-link,
.font-display {
    font-family: var(--ct-font-display);
}

::placeholder { color: var(--ct-text-faint) !important; opacity: 1; }
::selection { background: var(--ct-accent); color: var(--ct-on-accent); }

/* Iconos Lucide inline */
.ct-icon {
    display: inline-block;
    vertical-align: -0.155em;
    flex-shrink: 0;
}

/* Guest layout (login, register, etc.) */
.guest-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Auth card (login / register) */
.auth-card {
    border: none !important;
    box-shadow: var(--ct-shadow-lg);
    border-radius: var(--ct-radius-xl);
}
.auth-brand-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: var(--ct-radius-full);
    background: var(--ct-accent-subtle);
    color: var(--ct-accent);
    font-size: 1.5rem;
}

a { color: var(--ct-accent); transition: color var(--ct-transition); }
a:hover { color: var(--ct-accent-hover); }

/* ---- Navbar (top bar móvil) ---- */
.navbar-brand { font-family: var(--ct-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ct-text-primary); }
.mobile-topbar {
    background: var(--ct-surface-body);
    border-bottom: 1px solid var(--ct-border);
}
.mobile-topbar .btn-link { color: var(--ct-text-secondary); }
.mobile-topbar .btn-link:hover { color: var(--ct-text-primary); }

/* ---- App shell: sidebar fija 232px + main flexible ---- */
.app-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}
.app-shell > main {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- Ocultar / mostrar el menu lateral (escritorio) ---- */
.sidebar-head {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
}
.sidebar-head .sidebar-logo { flex: 1 1 auto; min-width: 0; }
.sidebar-collapse-btn,
.sidebar-reveal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-md);
    background: transparent;
    color: var(--ct-text-tertiary);
    transition: all var(--ct-transition);
}
.sidebar-collapse-btn:hover,
.sidebar-reveal-btn:hover {
    background: var(--ct-surface-hover);
    color: var(--ct-text-primary);
}
.sidebar-collapse-btn:focus-visible,
.sidebar-reveal-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--ct-primary-ring);
}
.sidebar-reveal-btn {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 1035;
    background: var(--ct-surface-sidebar);
}

@media (min-width: 768px) {
    /* Menu plegado: la barra desaparece y el contenido ocupa todo el ancho,
       dejando hueco para el boton flotante que la devuelve. */
    html.ct-sidebar-collapsed .app-shell > .sidebar { display: none !important; }
    html.ct-sidebar-collapsed .sidebar-reveal-btn { display: inline-flex !important; }
    html.ct-sidebar-collapsed .app-shell > main { padding-left: 3.25rem !important; }
}

/* ---- Sidebar ---- */
.sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--ct-surface-sidebar) !important;
    border-right: 1px solid var(--ct-border);
    position: sticky;
    top: 0;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .5rem .9rem;
    color: var(--ct-text-primary);
    text-decoration: none;
    font-family: var(--ct-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
}
.sidebar-logo:hover { color: var(--ct-text-primary); }
.sidebar-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--ct-radius-full);
    background: var(--ct-accent);
    color: var(--ct-on-accent);
    font-weight: 700;
    font-size: .95rem;
    flex-shrink: 0;
}
.sidebar-team-card {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--ct-surface-raised);
    border-radius: var(--ct-radius-md);
    padding: .5rem .65rem;
    margin: 0 0 .75rem;
    color: var(--ct-text-secondary);
}
.sidebar-team-card .form-select {
    background-color: transparent;
    border: none;
    color: var(--ct-text-primary);
    font-weight: 600;
    font-size: .82rem;
    padding: 0 1.25rem 0 0;
    box-shadow: none;
}
.sidebar-team-card .form-select:focus { border: none; box-shadow: none; }
.sidebar-team-name {
    color: var(--ct-text-primary);
    font-weight: 600;
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar .nav-link {
    color: var(--ct-text-tertiary);
    padding: .55rem .85rem;
    border-radius: var(--ct-radius-md);
    margin: 1px 0;
    font-size: var(--ct-font-md);
    font-weight: 500;
    transition: all var(--ct-transition);
}
.sidebar .nav-link:hover {
    background: var(--ct-surface-card) !important;
    color: var(--ct-text-primary);
}
.sidebar .nav-link.active {
    background: var(--ct-accent) !important;
    color: var(--ct-on-accent);
    font-weight: 700;
}
.sidebar .nav-link i { width: 20px; text-align: center; }
.sidebar .nav-link .ct-icon { width: 20px; margin-right: .5rem; }
/* Módulo no incluido en el plan del club: visible pero atenuado, lleva a /plan */
.nav-link-locked { opacity: .55; display: flex; align-items: center; }
.nav-link-locked:hover { opacity: 1; }
.nav-link-locked .ct-icon:last-child { width: auto; margin-right: 0; }
.sidebar .nav-link.active i,
.sidebar .nav-link.active .ct-icon { color: var(--ct-on-accent); }
.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid var(--ct-border);
    padding: .75rem .5rem .5rem;
}
.sidebar-footer .sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--ct-text-secondary);
    text-decoration: none;
    border-radius: var(--ct-radius-md);
    padding: .45rem .5rem;
    transition: background var(--ct-transition);
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}
.sidebar-footer .sidebar-user:hover { background: var(--ct-surface-card); color: var(--ct-text-primary); }
.sidebar-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ct-radius-full);
    background: var(--ct-surface-raised);
    color: var(--ct-accent);
    font-family: var(--ct-font-display);
    font-weight: 700;
    font-size: .8rem;
    flex-shrink: 0;
}
.sidebar-user-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ct-text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-user-role {
    font-size: .7rem;
    color: var(--ct-text-faint);
    line-height: 1.2;
}

/* Sidebar accordion (nav groups) */
.sidebar .sidebar-nav-toggle {
    cursor: pointer;
    user-select: none;
    text-decoration: none !important;
    color: var(--ct-text-secondary);
}
.sidebar .sidebar-nav-toggle:hover {
    color: var(--ct-text-primary);
}
.sidebar .sidebar-nav-toggle:focus {
    box-shadow: none;
    outline: 0;
}
.sidebar .sidebar-nav-toggle:focus-visible {
    box-shadow: 0 0 0 2px var(--ct-primary-ring);
}
.sidebar .sidebar-nav-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    opacity: 0.75;
}
.sidebar .sidebar-nav-toggle:not(.collapsed) .sidebar-nav-chevron {
    transform: rotate(-180deg);
}
.sidebar .sidebar-nav-sub {
    margin: 0 0 0.25rem 0;
    padding-left: 0.35rem;
    border-left: 2px solid var(--ct-border);
    margin-left: 0.65rem;
}
.sidebar .sidebar-nav-sub .nav-link {
    font-size: calc(var(--ct-font-md) * 0.95);
    padding: 0.4rem 0.65rem 0.4rem 0.5rem;
}
.sidebar .sidebar-nav-sub .nav-link i {
    width: 18px;
    font-size: 0.95em;
}

/* Sidebar section labels */
.sidebar-section-label {
    display: block;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ct-text-tertiary);
    padding: .75rem .85rem .25rem;
    list-style: none;
}

/* ---- Navbar refinements ---- */
.navbar .dropdown-menu { border-radius: var(--ct-radius-md); box-shadow: var(--ct-shadow-hover); border: 1px solid var(--ct-border); }
.navbar .dropdown-item { font-size: var(--ct-font-md); padding: .45rem 1rem; transition: background var(--ct-transition); }
.navbar .dropdown-item:hover { background: var(--ct-surface-hover); }

/* ---- Offcanvas mobile sidebar ---- */
.offcanvas-mobile {
    width: 280px !important;
    border-right: none !important;
}
.offcanvas-mobile .nav-link {
    color: var(--ct-text-secondary);
    padding: .55rem .85rem;
    border-radius: var(--ct-radius-md);
    margin: 1px 0;
    font-size: var(--ct-font-md);
    font-weight: 500;
    transition: all var(--ct-transition);
}
.offcanvas-mobile .nav-link:hover {
    background: var(--ct-surface-active);
    color: var(--ct-text-primary);
}
.offcanvas-mobile .nav-link.active {
    background: var(--ct-accent);
    color: var(--ct-on-accent);
    font-weight: 700;
}
.offcanvas-mobile .sidebar-section-label {
    display: block;
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ct-text-tertiary);
    padding: .75rem .85rem .25rem;
    list-style: none;
}
.offcanvas-mobile .nav-link i { width: 20px; text-align: center; }

.offcanvas-mobile .sidebar-nav-toggle {
    cursor: pointer;
    user-select: none;
    text-decoration: none !important;
    color: var(--ct-text-secondary);
}
.offcanvas-mobile .sidebar-nav-toggle:hover {
    color: var(--ct-text-primary);
}
.offcanvas-mobile .sidebar-nav-toggle:focus {
    box-shadow: none;
    outline: 0;
}
.offcanvas-mobile .sidebar-nav-toggle:focus-visible {
    box-shadow: 0 0 0 2px var(--ct-primary-ring);
}
.offcanvas-mobile .sidebar-nav-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    opacity: 0.75;
}
.offcanvas-mobile .sidebar-nav-toggle:not(.collapsed) .sidebar-nav-chevron {
    transform: rotate(-180deg);
}
.offcanvas-mobile .sidebar-nav-sub {
    margin: 0 0 0.25rem 0;
    padding-left: 0.35rem;
    border-left: 2px solid var(--ct-border);
    margin-left: 0.65rem;
}
.offcanvas-mobile .sidebar-nav-sub .nav-link {
    font-size: calc(var(--ct-font-md) * 0.95);
    padding: 0.4rem 0.65rem 0.4rem 0.5rem;
}
.offcanvas-mobile .sidebar-nav-sub .nav-link i {
    width: 18px;
    font-size: 0.95em;
}

/* ---- Cards ---- */
.card {
    border: 1px solid var(--ct-border) !important;
    box-shadow: var(--ct-shadow-card);
    border-radius: var(--ct-radius-lg);
    transition: box-shadow var(--ct-transition);
}

/* ---- Forms ---- */
.form-control,
.form-select {
    background-color: var(--ct-surface-body);
    border: 1.5px solid var(--ct-border-strong);
    border-radius: var(--ct-radius-md);
    color: var(--ct-text-primary);
    font-size: var(--ct-font-md);
    transition: border-color var(--ct-transition), box-shadow var(--ct-transition);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--ct-surface-body);
    color: var(--ct-text-primary);
    border-color: var(--ct-accent);
    box-shadow: 0 0 0 3px var(--ct-primary-ring);
}
.form-control:disabled,
.form-select:disabled {
    background-color: var(--ct-surface-hover);
    color: var(--ct-text-faint);
}
.form-label {
    font-weight: 600;
    color: var(--ct-text-secondary);
    font-size: var(--ct-font-sm);
}
.input-group-text {
    background-color: var(--ct-surface-raised);
    border: 1.5px solid var(--ct-border-strong);
    color: var(--ct-text-tertiary);
    border-radius: var(--ct-radius-md);
}
.form-check-input {
    background-color: var(--ct-surface-body);
    border: 1.5px solid var(--ct-border-strong);
}
.form-check-input:checked {
    background-color: var(--ct-accent);
    border-color: var(--ct-accent);
}
.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2310201A' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:focus {
    border-color: var(--ct-accent);
    box-shadow: 0 0 0 3px var(--ct-primary-ring);
}
.form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238AA598'/%3e%3c/svg%3e");
}

/* ---- Buttons ---- */
.btn {
    border-radius: var(--ct-radius-pill);
    font-weight: 600;
    font-size: var(--ct-font-md);
    transition: all var(--ct-transition);
}
/* Primario: lima pill, texto oscuro 700 */
.btn-primary {
    --bs-btn-bg: var(--ct-accent);
    --bs-btn-border-color: var(--ct-accent);
    --bs-btn-color: var(--ct-on-accent);
    --bs-btn-hover-bg: var(--ct-accent-hover);
    --bs-btn-hover-border-color: var(--ct-accent-hover);
    --bs-btn-hover-color: var(--ct-on-accent);
    --bs-btn-active-bg: var(--ct-accent-hover);
    --bs-btn-active-border-color: var(--ct-accent-hover);
    --bs-btn-active-color: var(--ct-on-accent);
    --bs-btn-disabled-bg: var(--ct-accent);
    --bs-btn-disabled-border-color: var(--ct-accent);
    --bs-btn-disabled-color: var(--ct-on-accent);
    font-weight: 700;
}
/* Secundario: transparente, borde 1.5px, hover lima */
.btn-outline-secondary,
.btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ct-border-strong);
    --bs-btn-color: var(--ct-text-primary);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: var(--ct-accent);
    --bs-btn-hover-color: var(--ct-accent);
    --bs-btn-active-bg: var(--ct-accent-subtle);
    --bs-btn-active-border-color: var(--ct-accent);
    --bs-btn-active-color: var(--ct-accent);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--ct-border);
    --bs-btn-disabled-color: var(--ct-text-faint);
    border-width: 1.5px;
}
/* Editar: borde + texto lima al hover ya cubierto; variante outline-primary */
.btn-outline-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ct-border-strong);
    --bs-btn-color: var(--ct-accent);
    --bs-btn-hover-bg: var(--ct-accent-subtle);
    --bs-btn-hover-border-color: var(--ct-accent);
    --bs-btn-hover-color: var(--ct-accent);
    --bs-btn-active-bg: var(--ct-accent);
    --bs-btn-active-border-color: var(--ct-accent);
    --bs-btn-active-color: var(--ct-on-accent);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--ct-border);
    --bs-btn-disabled-color: var(--ct-text-faint);
    border-width: 1.5px;
}
/* Peligro: rojo al 12% + borde al 35% */
.btn-danger,
.btn-outline-danger {
    --bs-btn-bg: var(--ct-danger-subtle);
    --bs-btn-border-color: rgba(248, 113, 113, .35);
    --bs-btn-color: var(--ct-danger);
    --bs-btn-hover-bg: rgba(248, 113, 113, .22);
    --bs-btn-hover-border-color: var(--ct-danger);
    --bs-btn-hover-color: var(--ct-danger);
    --bs-btn-active-bg: var(--ct-danger);
    --bs-btn-active-border-color: var(--ct-danger);
    --bs-btn-active-color: var(--ct-on-accent);
    --bs-btn-disabled-bg: var(--ct-danger-subtle);
    --bs-btn-disabled-border-color: rgba(248, 113, 113, .2);
    --bs-btn-disabled-color: rgba(248, 113, 113, .5);
}
/* Precaución: amarillo al 14% */
.btn-warning,
.btn-outline-warning {
    --bs-btn-bg: var(--ct-warning-subtle);
    --bs-btn-border-color: rgba(250, 204, 21, .35);
    --bs-btn-color: var(--ct-warning);
    --bs-btn-hover-bg: rgba(250, 204, 21, .24);
    --bs-btn-hover-border-color: var(--ct-warning);
    --bs-btn-hover-color: var(--ct-warning);
    --bs-btn-active-bg: var(--ct-warning);
    --bs-btn-active-border-color: var(--ct-warning);
    --bs-btn-active-color: var(--ct-on-accent);
    --bs-btn-disabled-bg: var(--ct-warning-subtle);
    --bs-btn-disabled-border-color: rgba(250, 204, 21, .2);
    --bs-btn-disabled-color: rgba(250, 204, 21, .5);
}
/* Confirmar / iniciar: verde al 14% */
.btn-success,
.btn-outline-success {
    --bs-btn-bg: var(--ct-success-subtle);
    --bs-btn-border-color: rgba(74, 222, 128, .35);
    --bs-btn-color: var(--ct-success);
    --bs-btn-hover-bg: rgba(74, 222, 128, .24);
    --bs-btn-hover-border-color: var(--ct-success);
    --bs-btn-hover-color: var(--ct-success);
    --bs-btn-active-bg: var(--ct-success);
    --bs-btn-active-border-color: var(--ct-success);
    --bs-btn-active-color: var(--ct-on-accent);
    --bs-btn-disabled-bg: var(--ct-success-subtle);
    --bs-btn-disabled-border-color: rgba(74, 222, 128, .2);
    --bs-btn-disabled-color: rgba(74, 222, 128, .5);
}
/* Info / ver detalle */
.btn-info,
.btn-outline-info {
    --bs-btn-bg: var(--ct-info-subtle);
    --bs-btn-border-color: rgba(56, 189, 248, .35);
    --bs-btn-color: var(--ct-info);
    --bs-btn-hover-bg: rgba(56, 189, 248, .24);
    --bs-btn-hover-border-color: var(--ct-info);
    --bs-btn-hover-color: var(--ct-info);
    --bs-btn-active-bg: var(--ct-info);
    --bs-btn-active-border-color: var(--ct-info);
    --bs-btn-active-color: var(--ct-on-accent);
    --bs-btn-disabled-bg: var(--ct-info-subtle);
    --bs-btn-disabled-border-color: rgba(56, 189, 248, .2);
    --bs-btn-disabled-color: rgba(56, 189, 248, .5);
}
/* Terciario / enlace: texto lima */
.btn-link {
    --bs-btn-color: var(--ct-accent);
    --bs-btn-hover-color: var(--ct-accent-hover);
    --bs-btn-active-color: var(--ct-accent-hover);
    text-decoration: none;
}
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---- Tables ---- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ct-text-primary);
    --bs-table-border-color: var(--ct-border);
    --bs-table-striped-bg: var(--ct-surface-hover);
    --bs-table-striped-color: var(--ct-text-primary);
    --bs-table-hover-bg: var(--ct-surface-hover);
    --bs-table-hover-color: var(--ct-text-primary);
}
.table thead th {
    background-color: transparent;
    font-family: var(--ct-font-family);
    font-weight: 600;
    font-size: .72rem; /* ~11.5px */
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ct-text-faint);
    border-bottom: 1.5px solid var(--ct-border) !important;
}
.table tbody tr {
    transition: background-color var(--ct-transition);
}
.table tbody td { border-bottom: 1px solid var(--ct-border); }
.table-hover tbody tr:hover {
    background-color: var(--ct-surface-hover) !important;
}
/* ---- Filas de refuerzos e invitadas ----
   Marcado semántico para futbolistas ajenas a la plantilla: barra de acento a
   la izquierda y un tinte muy leve, dejando el color de texto intacto. Se usa
   en vez de las contextuales de Bootstrap (.table-warning, .table-info), que
   ni son semánticas aquí ni distinguen invitada de refuerzo. */
.ct-row-guest > td,
.ct-row-trial > td,
.ct-row-own > td,
.ct-row-incident > td {
    background-color: var(--ct-row-accent-bg);
    color: var(--ct-text-primary);
}
.ct-row-guest > td:first-child,
.ct-row-trial > td:first-child,
.ct-row-own > td:first-child,
.ct-row-incident > td:first-child {
    box-shadow: inset 3px 0 0 var(--ct-row-accent);
}
.ct-row-guest {
    --ct-row-accent: var(--ct-info);
    --ct-row-accent-bg: rgba(56, 189, 248, .07);
}
.ct-row-trial {
    --ct-row-accent: var(--ct-warning);
    --ct-row-accent-bg: rgba(250, 204, 21, .07);
}
/* Nuestro equipo dentro de una clasificación de rivales. */
.ct-row-own {
    --ct-row-accent: var(--ct-primary);
    --ct-row-accent-bg: rgba(200, 241, 53, .08);
}
/* Incidencia de convocatoria: convocada, pero algo pasó (no se presentó, llegó tarde…). */
.ct-row-incident {
    --ct-row-accent: var(--ct-danger);
    --ct-row-accent-bg: rgba(248, 113, 113, .07);
}
/* La marca también vale sobre tarjetas (banquillo del directo, convocatoria móvil). */
.card.ct-row-incident {
    border-left: 3px solid var(--ct-danger);
    background-color: rgba(248, 113, 113, .07);
}
/* El hover del tema usa !important; se mantiene el acento lateral. */
.table-hover tbody tr.ct-row-guest:hover > td,
.table-hover tbody tr.ct-row-trial:hover > td,
.table-hover tbody tr.ct-row-own:hover > td,
.table-hover tbody tr.ct-row-incident:hover > td {
    background-color: var(--ct-surface-active);
}

/* Tarjeta enlazada (rejilla de competiciones): eleva y marca el borde al pasar. */
.ct-hover-card {
    transition: transform .15s ease, border-color .15s ease;
}
.ct-hover-card:hover {
    transform: translateY(-2px);
    border-color: var(--ct-primary);
}

/* Notas del rival en la convocatoria: acento lateral para que no se lea como
   una sección más del formulario. */
.ct-rival-notes {
    border-left: 3px solid var(--ct-primary);
}

/* Texto libre que conserva los saltos de línea tal cual se escribieron. */
.ct-prewrap {
    white-space: pre-line;
}

/* Números destacados en tablas */
.table .ct-num,
.ct-num {
    font-family: var(--ct-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---- Nav tabs (subrayado lima) ---- */
.nav-tabs {
    border-bottom: 1px solid var(--ct-border);
    gap: .25rem;
}
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2.5px solid transparent;
    border-radius: 0;
    color: var(--ct-text-tertiary);
    font-weight: 500;
    font-size: .84rem;
    padding: .5rem 1rem;
    transition: all var(--ct-transition);
    background: transparent;
}
.nav-tabs .nav-link:hover {
    color: var(--ct-text-primary);
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--ct-border-strong);
}
.nav-tabs .nav-link.active {
    color: var(--ct-accent);
    background: transparent;
    border-bottom: 2.5px solid var(--ct-accent);
    font-weight: 600;
}
/* Pills (filtros) */
.nav-pills .nav-link {
    border-radius: var(--ct-radius-pill);
    color: var(--ct-text-tertiary);
    font-size: var(--ct-font-md);
}
.nav-pills .nav-link.active {
    background: var(--ct-accent);
    color: var(--ct-on-accent);
    font-weight: 700;
}

/* ---- Badges ---- */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: var(--ct-radius-pill); }
/* Badge de posición: radio 5px — primario lima relleno / secundario borde+texto lima */
.badge-position,
.ct-badge-pos {
    border-radius: var(--ct-radius-sm) !important;
    font-family: var(--ct-font-display);
    font-size: .7rem;
    font-weight: 700;
    background: var(--ct-accent);
    color: var(--ct-on-accent);
    padding: .28em .5em;
}
.ct-badge-pos-secondary {
    background: transparent;
    border: 1px solid var(--ct-border-strong);
    color: var(--ct-accent);
}

/* ---- Color por línea del campo ----
   Una sola clase (`ct-pos-*`, que escupe TeamType::positionClass()) fija las
   tres variables; a partir de ahí cualquier elemento se tiñe. Aplicarla a un
   contenedor colorea también los dots y textos que lleve dentro. */
.ct-pos-gk   { --ct-pos: var(--ct-pos-gk);   --ct-pos-bg: var(--ct-pos-gk-subtle);   --ct-pos-bd: var(--ct-pos-gk-border); }
.ct-pos-def  { --ct-pos: var(--ct-pos-def);  --ct-pos-bg: var(--ct-pos-def-subtle);  --ct-pos-bd: var(--ct-pos-def-border); }
.ct-pos-mid  { --ct-pos: var(--ct-pos-mid);  --ct-pos-bg: var(--ct-pos-mid-subtle);  --ct-pos-bd: var(--ct-pos-mid-border); }
.ct-pos-fwd  { --ct-pos: var(--ct-pos-fwd);  --ct-pos-bg: var(--ct-pos-fwd-subtle);  --ct-pos-bd: var(--ct-pos-fwd-border); }
.ct-pos-none { --ct-pos: var(--ct-pos-none); --ct-pos-bg: var(--ct-pos-none-subtle); --ct-pos-bd: var(--ct-pos-none-border); }

/* Badge de posición teñido por su línea. Gana a `bg-*` de Bootstrap y a la
   variante lima de arriba, así que basta con añadir la clase al markup. */
.badge.ct-pos-gk,
.badge.ct-pos-def,
.badge.ct-pos-mid,
.badge.ct-pos-fwd,
.badge.ct-pos-none {
    background-color: var(--ct-pos-bg) !important;
    border: 1px solid var(--ct-pos-bd);
    color: var(--ct-pos) !important;
}
/* Posición secundaria de una futbolista polivalente: mismo color, sin relleno,
   para que la principal siga leyéndose primero. */
.badge.ct-badge-pos-secondary.ct-pos-gk,
.badge.ct-badge-pos-secondary.ct-pos-def,
.badge.ct-badge-pos-secondary.ct-pos-mid,
.badge.ct-badge-pos-secondary.ct-pos-fwd,
.badge.ct-badge-pos-secondary.ct-pos-none {
    background-color: transparent !important;
}

/* Punto de color para textos sueltos (asistencia, listas compactas). */
.ct-pos-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: var(--ct-radius-full);
    background: var(--ct-pos, var(--ct-pos-none));
    vertical-align: middle;
    flex-shrink: 0;
}
/* Texto en el color de la línea, para cuando un badge sería demasiado ruido. */
.ct-pos-text { color: var(--ct-pos, var(--ct-pos-none)) !important; }

/* Selector de posición de la convocatoria y del directo: cada botón lleva el
   color de su línea, así el once se lee por bloques y no como una fila de
   siglas. El seleccionado conserva su relleno de Bootstrap; el resto, no.
   La posición natural de la futbolista sigue distinguiéndose en negrita. */
.pos-tab.btn-outline-secondary,
.position-tab-btn.btn-outline-secondary,
.position-tab-btn.btn-outline-primary {
    color: var(--ct-pos, var(--ct-text-secondary));
    border-color: var(--ct-pos-bd, var(--ct-border-strong));
}
.pos-tab.btn-outline-secondary:hover,
.position-tab-btn.btn-outline-secondary:hover,
.position-tab-btn.btn-outline-primary:hover {
    background-color: var(--ct-pos-bg, var(--ct-surface-hover));
    color: var(--ct-pos, var(--ct-text-primary));
    border-color: var(--ct-pos, var(--ct-border-strong));
}
.pos-tab[data-natural],
.position-tab-btn[data-natural] { font-weight: 700; }

/* Hueco libre de la formación: el círculo punteado toma el color de la línea a
   la que corresponde, así el dibujo del once se lee antes de rellenarlo. */
.ct-pitch-slot.ct-pos-gk,
.ct-pitch-slot.ct-pos-def,
.ct-pitch-slot.ct-pos-mid,
.ct-pitch-slot.ct-pos-fwd {
    border-color: var(--ct-pos-bd);
    color: var(--ct-pos);
}

/* ---- Chip de asistencia (listado de futbolistas y convocatoria) ---- */
/* Es un <button>, así que hay que quitarle la caja de botón y dejarlo del
   tamaño de un badge: se pinta pegado al nombre y no debe romper la línea. */
.ct-attendance-chip {
    font-family: var(--ct-font-display);
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .45rem;
    --bs-btn-font-size: .7rem;
}
.ct-attendance-chip:focus-visible {
    outline: 2px solid var(--ct-accent);
    outline-offset: 1px;
}

/* ---- Alerts ---- */
.alert { border-radius: var(--ct-radius-md); font-size: var(--ct-font-md); }

/* ---- Progress (barras de evaluación) ---- */
.progress {
    background-color: var(--ct-surface-body);
    border-radius: var(--ct-radius-pill);
}
.progress-bar { background-color: var(--ct-accent); color: var(--ct-on-accent); }

/* ---- Modal ---- */
.modal-content {
    border-radius: var(--ct-radius-lg);
    border: 1px solid var(--ct-border);
    box-shadow: var(--ct-shadow-lg);
    background-color: var(--ct-surface-card);
}
.modal-header, .modal-footer { border-color: var(--ct-border); }

/* ---- Dropdowns ---- */
.dropdown-menu {
    background-color: var(--ct-surface-card);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-md);
    box-shadow: var(--ct-shadow-hover);
}
.dropdown-item { color: var(--ct-text-secondary); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ct-surface-hover); color: var(--ct-text-primary); }
.dropdown-item.active { background: var(--ct-accent); color: var(--ct-on-accent); }
.dropdown-divider { border-color: var(--ct-border); }

/* ---- SweetAlert2 dark ---- */
.swal2-popup {
    background: var(--ct-surface-card) !important;
    color: var(--ct-text-primary) !important;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg) !important;
}
.swal2-title { color: var(--ct-text-primary) !important; font-family: var(--ct-font-display); }
.swal2-html-container { color: var(--ct-text-secondary) !important; }
/* Botones: el mismo lenguaje que los .btn de la app (píldora, Space Grotesk,
   borde de 1,5px). El de «deny» no estaba contemplado y salía con la esquina
   y el rojo de serie de SweetAlert, así que en un diálogo de tres botones
   convivían dos radios distintos.

   El fondo NO lleva !important a propósito: setenta llamadas pasan
   `confirmButtonColor` para marcar en rojo lo que borra, y forzar la lima se
   llevaría por delante ese aviso. Estos selectores solo tienen que ganarle a
   la hoja de SweetAlert, nunca al estilo en línea. */
.swal2-container .swal2-styled.swal2-confirm,
.swal2-container .swal2-styled.swal2-deny,
.swal2-container .swal2-styled.swal2-cancel {
    border-radius: var(--ct-radius-pill) !important;
    border: 1.5px solid transparent;
    font-family: var(--ct-font-display);
    font-size: var(--ct-font-md);
    font-weight: 600;
    transition: all var(--ct-transition);
}
.swal2-container .swal2-styled.swal2-confirm {
    background-color: var(--ct-accent);
    color: var(--ct-on-accent) !important;
    font-weight: 700;
}
.swal2-container .swal2-styled.swal2-confirm:hover { background-color: var(--ct-accent-hover); }
.swal2-container .swal2-styled.swal2-deny {
    background-color: var(--ct-danger-subtle);
    border-color: rgba(248, 113, 113, .35);
    color: var(--ct-danger);
}
.swal2-container .swal2-styled.swal2-deny:hover {
    background-color: rgba(248, 113, 113, .22);
    border-color: var(--ct-danger);
}
.swal2-container .swal2-styled.swal2-cancel {
    background-color: transparent;
    border-color: var(--ct-border-strong);
    color: var(--ct-text-primary);
}
.swal2-container .swal2-styled.swal2-cancel:hover {
    border-color: var(--ct-accent);
    color: var(--ct-accent);
}
/* El foco de serie es un halo azul que no está en la paleta */
.swal2-container .swal2-styled:focus {
    box-shadow: 0 0 0 3px var(--ct-accent-subtle) !important;
}
/* Los botones se separan con el gap de la fila y no con el margen de cada uno:
   así los diálogos que usan `buttonsStyling: false` con .btn de verdad —el
   patrón preferido— no salen pegados, que es el único sitio donde SweetAlert
   no pone margen. */
.swal2-actions { gap: .5rem; }
.swal2-container .swal2-styled { margin: 0; }

/* ---- Tom Select dark ---- */
.ts-control {
    background-color: var(--ct-surface-body) !important;
    border: 1.5px solid var(--ct-border-strong) !important;
    border-radius: var(--ct-radius-md) !important;
    color: var(--ct-text-primary) !important;
}
.ts-control input { color: var(--ct-text-primary) !important; }
.ts-dropdown {
    background: var(--ct-surface-card);
    border: 1px solid var(--ct-border);
    color: var(--ct-text-primary);
    border-radius: var(--ct-radius-md);
}
.ts-dropdown .active { background: var(--ct-surface-hover); color: var(--ct-text-primary); }
.ts-dropdown .option:hover { background: var(--ct-surface-hover); }

/* Tables inside cards: cleaner borders */
.card .table,
.card .table td { border: none !important; }
.card .table th { border: none !important; }
.card .table thead th { border-bottom: 1px solid var(--ct-border) !important; }
table.dataTable { border-collapse: collapse !important; }
table.dataTable,
table.dataTable td { border: none !important; }
table.dataTable th { border: none !important; }
table.dataTable thead th { border-bottom: 1px solid var(--ct-border) !important; }

/* Tables inside cards: add horizontal spacing */
.card > .table-responsive,
.card > .card-body > .table-responsive { margin: 0; }
.card > .table-responsive > table,
.card > .card-body.p-0 > .table-responsive > table { margin-bottom: 0; }
.card > .card-body.p-0 { overflow: hidden; }

/* Stat / KPI cards — label muted + cifra grande Space Grotesk */
.stat-card,
.kpi-card { background: var(--ct-surface-card); }
.stat-card { transition: box-shadow var(--ct-transition), transform var(--ct-transition); }
.stat-card:hover { box-shadow: var(--ct-shadow-hover); transform: translateY(-1px); }
.stat-card-simple { border: 1px solid var(--ct-border); background: var(--ct-surface-card); }
.stat-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--ct-radius-md);
    background: var(--ct-accent-subtle);
    color: var(--ct-accent);
    font-size: 1.15rem;
    flex-shrink: 0;
}
.kpi-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ct-text-tertiary);
    letter-spacing: .02em;
}
.kpi-value {
    font-family: var(--ct-font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ct-text-primary);
}
/* KPI destacada invertida en lima */
.kpi-card-accent,
.stat-card.stat-card-accent {
    background: var(--ct-accent) !important;
    border-color: var(--ct-accent) !important;
    color: var(--ct-on-accent);
}
.kpi-card-accent .kpi-label,
.kpi-card-accent .kpi-value,
.stat-card.stat-card-accent .kpi-label,
.stat-card.stat-card-accent .kpi-value,
.stat-card.stat-card-accent * { color: var(--ct-on-accent) !important; }

/* ---- Page header ---- */
.page-header-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--ct-radius-full);
    font-size: 1rem;
    flex-shrink: 0;
}

/* ---- Section title ---- */
.section-title {
    font-weight: 600;
    color: var(--ct-text-secondary);
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--ct-border);
}
.section-title i { color: var(--ct-primary); }

/* ---- Filter bar ---- */
.filter-bar {
    background: var(--ct-surface-body);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
    padding: .75rem 1rem;
}

/* ---- Empty state ---- */
.empty-state-icon {
    display: block;
    font-size: 2.5rem;
    color: var(--ct-text-tertiary);
    margin-bottom: .5rem;
}

/* ---- Social Cards ---- */
.social-cards-page .page-header-icon {
    background: rgba(6, 182, 212, 0.12) !important;
    color: var(--ct-section-share) !important;
}

.social-card-shell {
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-xl);
    box-shadow: var(--ct-shadow-card);
}

.social-card-panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ct-text-primary);
}

.social-card-badge {
    background: rgba(6, 182, 212, 0.12);
    color: var(--ct-section-share);
    font-weight: 700;
}

.social-card-mobile-template {
    display: none;
}

.social-card-template-list {
    display: grid;
    gap: .75rem;
}

.social-card-template {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
    background: var(--ct-surface-card);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ct-transition), box-shadow var(--ct-transition), background-color var(--ct-transition), transform var(--ct-transition);
}

.social-card-template:hover {
    border-color: rgba(6, 182, 212, 0.45);
    background: rgba(6, 182, 212, 0.04);
    box-shadow: var(--ct-shadow-hover);
}

.social-card-template.is-active {
    border-color: var(--ct-section-share);
    background: rgba(6, 182, 212, 0.08);
    box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.08);
}

.social-card-template-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ct-radius-md);
    background: rgba(6, 182, 212, 0.12);
    color: var(--ct-section-share);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.social-card-template-copy {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.social-card-template-label {
    font-weight: 700;
    color: var(--ct-text-primary);
}

.social-card-template-description {
    color: var(--ct-text-secondary);
    font-size: .9rem;
    line-height: 1.4;
}

.social-card-controls-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) minmax(220px, 260px);
    gap: 1rem;
    align-items: start;
}

.social-card-filters-panel,
.social-card-style-panel,
.social-card-actions-panel {
    padding: 1rem;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
    background: var(--ct-surface-body);
}

.social-card-actions-panel {
    display: grid;
    gap: .75rem;
}

.social-card-theme-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.social-card-theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .35rem;
    border: 1px solid transparent;
    border-radius: var(--ct-radius-md);
    background: transparent;
    cursor: pointer;
    transition: var(--ct-transition);
}

.social-card-theme-swatch:hover {
    background: var(--ct-surface-card);
}

.social-card-theme-swatch-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--ct-border-strong);
    display: block;
}

.social-card-theme-swatch.is-active .social-card-theme-swatch-dot {
    border-color: var(--ct-accent);
    box-shadow: 0 0 0 3px rgba(200, 241, 53, .28);
}

.social-card-theme-swatch-label {
    font-size: .68rem;
    color: var(--ct-text-tertiary);
    max-width: 64px;
    text-align: center;
    line-height: 1.15;
}

.social-card-theme-swatch.is-active .social-card-theme-swatch-label {
    color: var(--ct-text-primary);
    font-weight: 600;
}

.social-card-format-select {
    font-size: 1rem;
}

.social-card-download-btn {
    min-height: 44px;
}

.social-card-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.social-card-view-tabs {
    display: inline-flex;
    gap: .5rem;
    padding: .35rem;
    border: 1px solid var(--ct-border);
    border-radius: 999px;
    background: var(--ct-surface-body);
}

.social-card-view-tab {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ct-text-secondary);
    font-weight: 700;
    padding: .55rem 1rem;
    transition: background-color var(--ct-transition), color var(--ct-transition);
}

.social-card-view-tab.is-active {
    background: rgba(6, 182, 212, 0.12);
    color: var(--ct-section-share);
}

.social-card-preview-stage {
    width: min(100%, 60vh);
    margin: 0 auto;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-xl);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.05));
    aspect-ratio: 1 / 1;
}

.social-card-preview-stage[data-format="portrait"] {
    width: min(100%, 48vh);
    aspect-ratio: 4 / 5;
}

.social-card-preview-stage[data-format="story"] {
    width: min(100%, 34vh);
    aspect-ratio: 9 / 16;
}

.social-card-preview-frame,
.social-card-preview-empty {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #ffffff;
}

.social-card-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-card-privacy-note {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: var(--ct-radius-lg);
    background: rgba(245, 158, 11, 0.08);
    color: var(--ct-text-secondary);
    font-size: .92rem;
    line-height: 1.5;
}

.social-card-privacy-note i {
    color: var(--ct-accent-hover);
    margin-top: .1rem;
}

.social-card-history {
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-xl);
    padding: 1rem;
    background: var(--ct-surface-body);
}

.social-card-history-table th {
    color: var(--ct-text-secondary);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.social-card-history-table td {
    white-space: normal;
}

.social-card-history-empty {
    min-height: 320px;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
}

/* ---- Avatar ring ---- */
.avatar-ring {
    box-shadow: 0 0 0 2px var(--ct-surface-card), 0 0 0 3px var(--ct-border);
}

/* ---- Badges ---- */
.badge-position { font-size: .7rem; }

/* ---- Calendar (shared: matches & trainings) ---- */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-cell { min-height: 80px; padding: 4px; font-size: .75rem; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-sm); background: var(--ct-surface-card); overflow: hidden; }
.cal-cell.today { background: var(--ct-accent-subtle); border-color: var(--ct-accent); }
.cal-cell.other-month { background: var(--ct-surface-body); color: var(--ct-text-tertiary); }
.cal-event { border-radius: var(--ct-radius-sm); padding: 1px 4px; margin-top: 2px; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; display: block; text-decoration: none; color: #fff; max-width: 100%; }
.cal-event.st-scheduled { background: var(--ct-text-secondary); }
.cal-event.st-first_half,
.cal-event.st-second_half { background: var(--ct-success); color: var(--ct-on-accent); }
.cal-event.st-half_time { background: var(--ct-info); color: var(--ct-on-accent); }
.cal-event.st-finished { background: var(--ct-border-strong); }
.cal-day-num { font-weight: 600; font-size: .8rem; }

/* Training calendar event */
.cal-event:not([class*="st-"]) { background: var(--ct-border-strong); }

/* ---- Text truncation for tables ---- */
table.dataTable td,
.table td { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.dataTable td.text-end,
table.dataTable td.text-center,
.table td.text-end,
.table td.text-center { overflow: visible; white-space: normal; max-width: none; }

/* ============================================================
   DataTables Overrides
   ============================================================ */

/* Inputs / selects consistency */
.dataTables_wrapper .dataTables_filter input { display: inline-block; width: auto; border-radius: var(--ct-radius-md); }
.dataTables_wrapper .dataTables_length select { display: inline-block; width: auto; border-radius: var(--ct-radius-md); }
.dataTables_wrapper .dataTables_info { font-size: .85rem; color: var(--ct-text-secondary); }
table.dataTable th { white-space: nowrap; }

/* --- Sort arrows: completely hidden by default, visible only on active column --- */
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::after,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::after,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::after { opacity: 0 !important; }
/* Show only the active arrow on the sorted column */
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before { opacity: .8 !important; }
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after { opacity: .8 !important; }
/* Remove extra padding when no arrows shown */
table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > td.dt-orderable-asc,
table.dataTable thead > tr > td.dt-orderable-desc { padding-right: 12px !important; }
table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc,
table.dataTable thead > tr > td.dt-ordering-asc,
table.dataTable thead > tr > td.dt-ordering-desc { padding-right: 30px !important; }

/* --- Pagination: only prev/next arrows, styled --- */
.dataTables_paginate .paginate_button.first,
.dataTables_paginate .paginate_button.last { display: none !important; }
.dataTables_paginate .paginate_button { min-width: 36px; text-align: center; }

/* Active page accent */
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--ct-accent) !important;
    border-color: var(--ct-accent) !important;
    color: var(--ct-on-accent) !important;
}

/* Bootstrap pagination override for DT */
.pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--ct-text-secondary);
    --bs-pagination-border-color: var(--ct-border);
    --bs-pagination-hover-bg: var(--ct-surface-hover);
    --bs-pagination-hover-color: var(--ct-text-primary);
    --bs-pagination-hover-border-color: var(--ct-border-strong);
    --bs-pagination-focus-bg: var(--ct-surface-hover);
    --bs-pagination-focus-color: var(--ct-text-primary);
    --bs-pagination-active-bg: var(--ct-accent);
    --bs-pagination-active-border-color: var(--ct-accent);
    --bs-pagination-active-color: var(--ct-on-accent);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--ct-text-faint);
    --bs-pagination-disabled-border-color: var(--ct-border);
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color: var(--ct-accent);
    border-color: var(--ct-accent);
    color: var(--ct-on-accent);
}

/* --- Export button: accent style --- */
.dataTables_wrapper .dt-buttons .btn {
    font-size: .8rem;
    background-color: transparent;
    border: 1.5px solid var(--ct-border-strong);
    color: var(--ct-text-primary);
    font-weight: 600;
    border-radius: var(--ct-radius-pill);
}
.dataTables_wrapper .dt-buttons .btn:hover {
    background-color: transparent;
    border-color: var(--ct-accent);
    color: var(--ct-accent);
}

/* --- "Mostrar registros" compact styling next to pagination --- */
.dataTables_wrapper .dataTables_length { font-size: .85rem; }
.dataTables_wrapper .dataTables_length label { margin-bottom: 0; display: flex; align-items: center; gap: .35rem; white-space: nowrap; }

/* Jugadoras no disponibles en convocatoria: fila atenuada */
.callup-row-unavailable > td,
.player-mob-card.callup-row-unavailable { opacity: .55; }

/* Lienzo de las imágenes para compartir (convocatoria, alineación) */
.ct-share-canvas {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-md);
}

/* ---- Campo de alineación (convocatoria, mockup 3b) ---- */
.ct-pitch {
    position: relative;
    background: linear-gradient(180deg, #123527 0%, #0E2B20 100%);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
    aspect-ratio: 68 / 92;
    --ct-pitch-max-h: 560px;
    max-height: var(--ct-pitch-max-h);
    overflow: hidden;
}
/* En columnas anchas el campo se deforma: el max-height frena el alto pero el ancho
   sigue al 100% del contenedor. El tope de ancho es el que corresponde a ese alto,
   así que sale de la misma variable y basta con redefinirla por pantalla. */
.ct-pitch-contained {
    width: 100%;
    max-width: calc(var(--ct-pitch-max-h) * 68 / 92);
    margin-inline: auto;
}
.ct-pitch svg.ct-pitch-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ct-pitch-chip {
    position: absolute;
    transform: translate(-50%, 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 2;
}
.ct-pitch-chip-draggable {
    cursor: pointer;
    touch-action: none;
}
/* Hueco libre de la formación: círculo punteado que abre el selector de futbolista */
.ct-pitch-slot {
    position: absolute;
    transform: translate(-50%, 50%);
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--ct-radius-full);
    border: 1.5px dashed rgba(200, 241, 53, .45);
    background: rgba(16, 32, 26, .35);
    color: rgba(200, 241, 53, .75);
    font-family: var(--ct-font-display);
    font-weight: 700;
    font-size: .62rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.ct-pitch-slot:not(:disabled):hover,
.ct-pitch-slot:not(:disabled):focus-visible {
    border-style: solid;
    border-color: var(--ct-accent);
    color: var(--ct-accent);
    transform: translate(-50%, 50%) scale(1.12);
    outline: none;
}
.ct-pitch-slot:disabled {
    cursor: default;
    opacity: .6;
}
.ct-pitch-chip-circle {
    width: 34px;
    height: 34px;
    border-radius: var(--ct-radius-full);
    background: var(--ct-surface-raised);
    border: 1.5px solid var(--ct-accent);
    color: var(--ct-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ct-font-display);
    font-weight: 700;
    font-size: .8rem;
    position: relative;
}
.ct-pitch-chip.is-captain .ct-pitch-chip-circle {
    background: var(--ct-accent);
    color: var(--ct-on-accent);
}
/* Fichas con el color de la equipación (local → primario, visitante → secundario).
   Se activa desde la vista con la clase ct-pitch-kit + variables --kit-color/--kit-contrast. */
.ct-pitch.ct-pitch-kit .ct-pitch-chip-circle {
    background: var(--kit-color);
    border-color: var(--kit-color);
    color: var(--kit-contrast);
}
.ct-pitch.ct-pitch-kit .ct-pitch-chip.is-captain .ct-pitch-chip-circle {
    border-color: var(--ct-accent);
}
/* Foto de la futbolista dentro del círculo de la ficha.
   El redondeo lo pone la propia imagen: el círculo NO lleva overflow:hidden porque
   la "C" de capitana y la marca de expulsión se posicionan fuera de sus límites y
   quedarían recortadas. El borde se conserva, así la equipación sigue enmarcando. */
.ct-pitch-chip-circle.is-photo,
.ct-bench-chip-circle.is-photo,
.ct-pitch.ct-pitch-kit .ct-pitch-chip-circle.is-photo {
    background: transparent;
    padding: 0;
}
.ct-chip-photo {
    width: 100%;
    height: 100%;
    border-radius: var(--ct-radius-full);
    object-fit: cover;
    display: block;
}
.ct-pitch-chip-cap {
    position: absolute;
    top: -5px;
    right: -6px;
    width: 15px;
    height: 15px;
    border-radius: var(--ct-radius-full);
    background: #ffffff;
    color: #10201A;
    font-family: var(--ct-font-display);
    font-size: .58rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ct-pitch-chip-name {
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .62rem;
    font-weight: 600;
    color: #DFF3E8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
/* ---- Modo campo del directo: ficha pulsable que abre el modal de cambio ---- */
.live-pitch {
    --ct-pitch-max-h: 460px;
}
.live-pitch-chip {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    touch-action: none; /* el arrastre de la ficha no debe hacer scroll de la página */
}
/* Ficha en movimiento: transparente al puntero para poder detectar la de debajo */
.live-pitch-chip.is-dragging {
    pointer-events: none;
    z-index: 5;
    opacity: .9;
}
.live-pitch-chip.is-drop-target .ct-pitch-chip-circle {
    border-color: #FACC15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, .35);
}
.live-pitch-chip:disabled {
    cursor: default;
    opacity: .75;
}
.live-pitch-chip .ct-pitch-chip-circle {
    transition: transform .15s ease;
}
.live-pitch-chip:not(:disabled):not(.is-sent-off):hover .ct-pitch-chip-circle,
.live-pitch-chip:not(:disabled):not(.is-sent-off):focus-visible .ct-pitch-chip-circle {
    transform: scale(1.12);
    outline: none;
}
.live-pitch-chip-timer {
    font-size: .58rem;
    font-weight: 600;
    color: #DFF3E8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
/* Expulsada: sigue en su sitio pero apagada, para que se vea que esa posición
   quedó libre y que el equipo juega con una menos. */
/* No se arrastra ni se pulsa, pero sí admite que le suelten una ficha encima */
.live-pitch-chip.is-sent-off {
    cursor: default;
}
.live-pitch-chip.is-sent-off .ct-pitch-chip-circle {
    background: #2A3A34;
    border-color: #5A6B64;
    color: #93A69E;
    filter: grayscale(1);
}
.live-pitch-chip.is-sent-off .ct-pitch-chip-name,
.live-pitch-chip.is-sent-off .live-pitch-chip-timer {
    color: #93A69E;
}
/* Tarjeta roja sobre la ficha: el estado no se distingue solo por el gris */
.ct-pitch-chip-red {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    background: #DC3545;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
/* Fichas del banquillo dentro del modo campo del directo: se arrastran sobre una
   titular para hacer el cambio, así que se comportan igual que las del campo. */
.live-bench-chip {
    touch-action: none; /* el arrastre de la ficha no debe hacer scroll de la página */
}
/* Ficha en movimiento: transparente al puntero para poder detectar la de debajo */
.live-bench-chip.is-dragging {
    position: relative;
    pointer-events: none;
    z-index: 5;
    opacity: .9;
}
.live-bench-chip.is-drop-target .ct-bench-chip-circle {
    border-color: #FACC15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, .35);
}
.live-bench-chip:disabled {
    opacity: .75;
}

/* ---- Banquillo bajo el campo: una plaza por suplente hasta el tope de acta ---- */
.ct-bench-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ct-space-xs);
    margin-bottom: var(--ct-space-xs);
}
.ct-bench-label {
    font-family: var(--ct-font-display);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ct-text-tertiary);
}
.ct-bench-count {
    font-family: var(--ct-font-display);
    font-size: .72rem;
    font-weight: 700;
    color: var(--ct-text-tertiary);
}
.ct-bench-slots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ct-space-xs);
}
.ct-bench-chip,
.ct-bench-slot {
    padding: 0;
    background: none;
    border: none;
}
.ct-bench-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 44px;
    cursor: pointer;
}
.ct-bench-chip:disabled {
    cursor: default;
}
.ct-bench-chip-circle {
    width: 34px;
    height: 34px;
    border-radius: var(--ct-radius-full);
    background: var(--ct-surface-raised);
    border: 1.5px solid var(--ct-accent);
    color: var(--ct-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ct-font-display);
    font-weight: 700;
    font-size: .8rem;
    transition: transform .15s ease;
}
.ct-bench-chip:not(:disabled):hover .ct-bench-chip-circle,
.ct-bench-chip:not(:disabled):focus-visible .ct-bench-chip-circle {
    transform: scale(1.1);
    outline: none;
}
.ct-bench-chip-name {
    max-width: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .6rem;
    font-weight: 600;
    color: var(--ct-text-tertiary);
}
/* Plaza libre: mismo círculo punteado que los huecos del campo */
.ct-bench-slot {
    width: 34px;
    height: 34px;
    border-radius: var(--ct-radius-full);
    border: 1.5px dashed var(--ct-border-strong);
    background: var(--ct-surface-raised);
    transition: border-color .15s ease, transform .15s ease;
}
.ct-bench-slot:not(:disabled) {
    cursor: pointer;
}
.ct-bench-slot:not(:disabled):hover,
.ct-bench-slot:not(:disabled):focus-visible {
    border-style: solid;
    border-color: var(--ct-accent);
    transform: scale(1.1);
    outline: none;
}
.ct-bench-slot:disabled {
    opacity: .6;
}
.ct-pitch-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200, 241, 53, .5);
    font-size: .82rem;
    text-align: center;
    padding: 1rem;
    z-index: 1;
}

/* ---- Lista de plantilla de la pizarra (players/board) ---- */
.ct-squad-list {
    /* Alto para que una plantilla normal quepa entera junto al campo; a partir
       de ahí scrollea la lista, no la página. */
    max-height: min(70vh, 720px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.ct-squad-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-sm);
    background: var(--ct-surface-raised);
}
/* Quien ya está colocada se distingue de un vistazo sin releer los botones. */
.ct-squad-row.is-on-pitch {
    border-color: var(--ct-accent);
    background: var(--ct-accent-subtle);
}
.ct-squad-row.is-on-bench {
    border-color: var(--ct-border-strong);
}
.ct-squad-number {
    flex: 0 0 2rem;
    text-align: center;
    font-family: var(--ct-font-display);
    font-weight: 700;
    color: var(--ct-text-faint);
}
.ct-squad-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}
.ct-squad-badges {
    display: flex;
    gap: .2rem;
    flex-shrink: 0;
}
.ct-squad-actions {
    display: flex;
    gap: .2rem;
    flex-shrink: 0;
}
.ct-squad-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: .2rem .4rem;
}
/* El selector crece con la fila pero no se estrangula al envolver los botones. */
.ct-squad-template-select {
    min-width: 180px;
}
@media (max-width: 575.98px) {
    .ct-squad-badges { display: none; }
}

/* ---- Checklist de requisitos de convocatoria ---- */
.ct-callup-req {
    border: 1px solid var(--ct-warning);
    border-radius: var(--ct-radius-md);
    background: var(--ct-warning-subtle);
    padding: var(--ct-space-sm) var(--ct-space-md);
    transition: border-color .2s ease, background-color .2s ease;
}
.ct-callup-req.is-ready {
    border-color: var(--ct-success);
    background: var(--ct-success-subtle);
}
.ct-callup-req-title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--ct-font-display);
    font-size: var(--ct-font-sm);
    font-weight: 600;
    color: var(--ct-warning);
    margin-bottom: .4rem;
}
.ct-callup-req.is-ready .ct-callup-req-title { color: var(--ct-success); }
.ct-callup-req-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.ct-callup-req-item {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: var(--ct-font-sm);
    line-height: 1.35;
    color: var(--ct-text-secondary);
}
.ct-callup-req-item .ct-callup-req-icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--ct-text-faint);
}
.ct-callup-req-item.is-pending { color: var(--ct-text-primary); font-weight: 500; }
.ct-callup-req-item.is-pending .ct-callup-req-icon { color: var(--ct-warning); }
.ct-callup-req-item.is-done { color: var(--ct-text-tertiary); }
.ct-callup-req-item.is-done .ct-callup-req-icon { color: var(--ct-success); }

/* Publicación de la convocatoria: visibilidad en el portal y aviso por email */
.ct-callup-publish {
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-md);
    background: var(--ct-surface-raised);
    padding: var(--ct-space-sm) var(--ct-space-md);
    text-align: left;
}
.ct-callup-publish .form-check-label { color: var(--ct-text-primary); font-weight: 500; }
.ct-callup-publish .form-text { color: var(--ct-text-tertiary); margin-bottom: 0; }
.ct-callup-publish .form-check + .form-check { margin-top: var(--ct-space-sm); }

/* ---- Stepper (flujo de partido) ---- */
.ct-stepper { display: flex; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; }
.ct-step { display: flex; align-items: center; gap: .5rem; }
.ct-step-circle {
    width: 28px; height: 28px;
    border-radius: var(--ct-radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--ct-font-display);
    font-weight: 700; font-size: .8rem;
    border: 1.5px solid var(--ct-border-strong);
    color: var(--ct-text-tertiary);
    flex-shrink: 0;
}
.ct-step.active .ct-step-circle { background: var(--ct-accent); border-color: var(--ct-accent); color: var(--ct-on-accent); }
.ct-step.done .ct-step-circle { border-color: var(--ct-accent); color: var(--ct-accent); }
.ct-step-label { font-family: var(--ct-font-display); font-size: .82rem; color: var(--ct-text-tertiary); font-weight: 600; }
.ct-step.active .ct-step-label { color: var(--ct-text-primary); }
.ct-step-connector { width: 32px; height: 1.5px; background: var(--ct-border-strong); margin: 0 .6rem; flex-shrink: 0; }

/* ---- Toggle segmentado pill ---- */
.ct-segmented {
    display: inline-flex;
    background: var(--ct-surface-body);
    border: 1.5px solid var(--ct-border-strong);
    border-radius: var(--ct-radius-pill);
    padding: 3px;
}
.ct-segmented .ct-seg-btn {
    border: 0;
    background: transparent;
    color: var(--ct-text-tertiary);
    border-radius: var(--ct-radius-pill);
    padding: .35rem .9rem;
    font-family: var(--ct-font-display);
    font-weight: 600;
    font-size: .8rem;
    transition: all var(--ct-transition);
    white-space: nowrap;
}
.ct-segmented .ct-seg-btn.active { background: var(--ct-accent); color: var(--ct-on-accent); font-weight: 700; }

/* ---- Retrospective ---- */
.retro-section { border-left: 4px solid var(--ct-accent) !important; border-radius: var(--ct-radius-lg); }
.player-check { cursor: pointer; user-select: none; transition: background var(--ct-transition); }
.player-check:hover { background: var(--ct-surface-hover); }
.player-check.selected { background: var(--ct-accent-subtle); }
.player-check.starter { background: var(--ct-warning-subtle); }
.player-check .form-check { display: flex; align-items: flex-start; gap: .35rem; min-width: 0; padding-left: 0; }
.player-check .form-check-input { flex-shrink: 0; margin-top: .3em; margin-left: 0; position: static; }
.player-check .form-check-label { white-space: normal; word-break: break-word; overflow: hidden; min-width: 0; }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .social-card-controls-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .social-card-template {
        padding: .85rem;
    }

    .social-card-preview-stage[data-format="story"] {
        max-height: 70vh;
    }

    .social-card-history {
        padding: .85rem;
    }
}

@media (max-width: 599.98px) {
    .page-header { flex-direction: column !important; align-items: flex-start !important; gap: .75rem; }
    .page-header .btn-group-responsive { display: flex; flex-wrap: wrap; gap: .5rem; }
    .page-header .btn-group-responsive .btn { font-size: .8rem; }
    .page-header h2 { font-size: 1.3rem; }
    .page-header-icon { width: 32px; height: 32px; font-size: .85rem; }
    .filter-bar { padding: .5rem .75rem; }
    .stat-card-icon { width: 40px; height: 40px; font-size: 1rem; }
    main { padding-left: 1rem !important; padding-right: 1rem !important; }
    .social-card-actions-panel,
    .social-card-style-panel,
    .social-card-filters-panel { padding: .85rem; }
    .social-card-panel-title { font-size: .95rem; }
    .social-card-mobile-template { display: block; }
    .social-card-template-sidebar { display: none; }
    .social-card-view-tabs { width: 100%; }
    .social-card-view-tab { flex: 1 1 0; text-align: center; }
}

/* ============================================================
   Design System — Utility Classes
   ============================================================ */

/* ── Avatares ── */
.avatar {
    display: block;
    border-radius: var(--ct-radius-full);
    object-fit: cover;
    overflow: hidden;
    flex-shrink: 0;
}
.avatar-xs    { width: var(--ct-avatar-xs) !important; height: var(--ct-avatar-xs) !important; }
.avatar-sm    { width: var(--ct-avatar-sm) !important; height: var(--ct-avatar-sm) !important; }
.avatar-md    { width: var(--ct-avatar-md) !important; height: var(--ct-avatar-md) !important; }
.avatar-lg    { width: var(--ct-avatar-lg) !important; height: var(--ct-avatar-lg) !important; }
.avatar-xl    { width: var(--ct-avatar-xl) !important; height: var(--ct-avatar-xl) !important; }
.avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    background: var(--ct-surface-raised);
    color: var(--ct-accent);
    font-family: var(--ct-font-display);
    font-weight: 700;
    font-size: var(--ct-font-xs);
}
.avatar-xl.avatar-fallback { font-size: 2.5rem; }
.avatar-lg.avatar-fallback { font-size: 1.5rem; }
.avatar-md.avatar-fallback { font-size: 1rem; }

/* ── Texto (reemplaza 9 font-sizes inline) ── */
.text-xs      { font-size: var(--ct-font-xs) !important; }
.text-sm      { font-size: var(--ct-font-sm) !important; }
.text-md      { font-size: var(--ct-font-md) !important; }

/* ── Card padding helpers ── */
.card-compact { padding: var(--ct-space-md); }
.card-default { padding: var(--ct-space-lg); }

/* ── Card accent border ── */
.card-accent  { border-left: 4px solid var(--ct-brand) !important; }

/* ── Leyendas (puntos de color) ── */
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--ct-radius-full);
    background: var(--legend-color, var(--ct-text-tertiary));
    flex-shrink: 0;
}
/* Variante hueca, para lo que está planificado pero aún no existe. */
.legend-dot--hollow {
    background: transparent;
    border: 1px dashed var(--legend-color, var(--ct-text-tertiary));
}

/* ── Interactividad ── */
.clickable    { cursor: pointer; user-select: none; }
.clickable:hover { background-color: var(--ct-surface-hover); }

/* ── Ancho columnas tabla ── */
.col-w-xs     { width: 40px; }
.col-w-sm     { width: 50px; }
.col-w-md     { width: 60px; }
.col-w-lg     { width: 100px; }

/* ── Background accent suave ── */
.bg-accent-subtle { background: var(--ct-brand-subtle) !important; }

/* ── Image preview heights (replaces inline max-height) ── */
.img-preview-sm  { max-height: 60px; }
.img-preview-md  { max-height: 120px; }
.img-preview-lg  { max-height: 180px; }

/* ── Lista de selección con scroll (buscadores en modales) ── */
.ct-picker-list {
    max-height: 260px;
    overflow-y: auto;
}

/* ── Imagen ampliable (click para lightbox) ── */
.img-zoomable {
    cursor: zoom-in;
    transition: filter .15s ease, transform .15s ease;
}
.img-zoomable:hover { filter: brightness(1.04); }

/* ── Lightbox global ── */
.ct-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(10, 12, 16, .88);
    backdrop-filter: blur(3px);
    cursor: zoom-out;
}
.ct-lightbox.is-open { display: flex; }
.ct-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--ct-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    cursor: default;
}
.ct-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    cursor: pointer;
    transition: background .15s ease;
}
.ct-lightbox__close:hover { background: rgba(255, 255, 255, .24); }

/* ── Width utilities (replaces inline min/max-width) ── */
.min-w-130 { min-width: 130px; }
.min-w-160 { min-width: 160px; }
.max-w-500 { max-width: 500px; }
.max-w-700 { max-width: 700px; }

/* ── Font size utilities (replaces inline font-size) ── */
.fs-2xs { font-size: .65rem !important; }
.fs-icon-sm { font-size: .75rem !important; }

/* ============================================================
   Fase 5 — Responsive & Micro-interactions
   ============================================================ */

/* ── Live match: score & timer (mockup 3c) ── */
.live-score { font-family: var(--ct-font-display); font-size: 2.75rem; font-weight: 700; line-height: 1; }
.live-timer { font-family: var(--ct-font-display); font-size: 1.25rem; font-weight: 700; color: var(--ct-accent); }

/* Punto verde con glow para el badge EN DIRECTO */
.ct-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--ct-radius-full);
    background: var(--ct-success);
    box-shadow: 0 0 8px var(--ct-success);
}
@media (prefers-reduced-motion: no-preference) {
    .ct-live-dot { animation: ct-live-pulse 1.6s ease-in-out infinite; }
}
@keyframes ct-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* ── Match Score Card component ── */
.match-score-card .match-team-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ct-text-faint);
    margin-bottom: 2px;
}
.match-score-card .match-team-name {
    font-family: var(--ct-font-display);
    font-size: 1.1rem;
    line-height: 1.25;
    word-break: break-word;
}
.match-score-card .match-score-display {
    font-family: var(--ct-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
}
.match-score-card .match-score-separator {
    margin: 0 .15em;
    opacity: .4;
}
.match-score-card .match-meta {
    color: var(--ct-text-faint);
    font-size: .8rem;
    line-height: 1.4;
}

/* ── Live match: player avatars (replace inline styles) ── */
.live-avatar { width: 36px; height: 36px; object-fit: cover; flex-shrink: 0; }

/* ── Live match: action buttons — 44px touch targets ── */
.live-action-btn {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: .5rem .75rem;
    font-size: 1rem;
}

/* ── Micro-interactions: button press feedback ── */
.btn:active:not(:disabled) { transform: scale(.97); }
.btn { transition: all var(--ct-transition); }

/* ── Micro-interactions: card hover lift ── */
.card { transition: box-shadow var(--ct-transition), transform var(--ct-transition); }
.card-hover:hover,
.player-pick-card:hover,
.bulk-bench-pick:hover {
    box-shadow: var(--ct-shadow-hover);
    transform: translateY(-2px);
}

/* ── Selección de futbolista en los modales de cambio ──
   La sombra del hover sola no distinguía la tarjeta elegida, así que la seleccionada
   se rellena con el color de acento y lleva una marca ✓: el estado no depende solo
   del color, que en el campo y a pleno sol se pierde. ── */
.player-pick-card,
.bulk-bench-pick {
    position: relative;
    cursor: pointer;
    user-select: none;
    border: 1.5px solid var(--ct-border);
    transition: background-color var(--ct-transition), border-color var(--ct-transition),
                color var(--ct-transition), box-shadow var(--ct-transition), transform var(--ct-transition);
}
.player-pick-card.is-selected,
.bulk-bench-pick.is-selected {
    background: var(--ct-accent);
    border-color: var(--ct-accent);
    color: var(--ct-on-accent);
    box-shadow: 0 0 0 3px rgba(200, 241, 53, .3);
}
/* Iniciales y textos secundarios legibles sobre el relleno */
.player-pick-card.is-selected .text-secondary,
.bulk-bench-pick.is-selected .text-secondary {
    color: var(--ct-on-accent) !important;
}
.player-pick-card.is-selected .bg-secondary,
.bulk-bench-pick.is-selected .bg-secondary {
    background-color: rgba(16, 32, 26, .2) !important;
}
.player-pick-card.is-selected .badge.bg-info {
    background-color: var(--ct-on-accent) !important;
    color: var(--ct-accent) !important;
}
.player-pick-card.is-selected::after,
.bulk-bench-pick.is-selected::after {
    content: '✓';
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ct-on-accent);
}
.player-pick-card:focus-visible,
.bulk-bench-pick:focus-visible {
    outline: 2px solid var(--ct-accent);
    outline-offset: 2px;
}

/* ── Micro-interactions: badge minimum size ── */
.badge { min-height: 20px; font-size: .75rem; }

/* ── Calendar: better mobile readability ── */
@media (max-width: 575.98px) {
    .calendar-grid { gap: 1px; }
    .cal-cell { min-height: 60px; padding: 2px; font-size: .7rem; }
    .cal-event { font-size: .65rem; padding: 1px 3px; }
    .cal-day-num { font-size: .7rem; }
}

/* ── Page header: responsive action buttons ── */
@media (max-width: 575.98px) {
    .page-header .d-flex.flex-wrap { gap: .35rem !important; }
    .page-header .d-flex.flex-wrap .btn {
        font-size: .75rem;
        padding: .35rem .6rem;
    }
    /* Hide button text, show icon-only on xs */
    .page-header .btn .btn-text-responsive { display: none; }
}

/* ── Live match: responsive ── */
@media (max-width: 575.98px) {
    .live-score { font-size: 2rem; }
    .live-timer { font-size: 1.5rem; }
    .live-avatar { width: 28px; height: 28px; }
    .live-action-btn { min-width: 40px; min-height: 40px; padding: .4rem .6rem; font-size: .9rem; }
    .live-actions { gap: .35rem !important; }
    /* Bulk sub FAB more visible */
    #bulk-sub-fab { bottom: 16px !important; right: 16px !important; font-size: .85rem !important; padding: 10px 18px !important; }
}

/* ── Tables: smooth scroll on mobile ── */
@media (max-width: 767.98px) {
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ── Forms: better touch on mobile ── */
@media (max-width: 575.98px) {
    .form-control, .form-select { font-size: 1rem; min-height: 44px; }
    .form-check-input { width: 1.25em; height: 1.25em; }
}

/* ── Sticky table headers & columns ── */

/* Sticky thead: header row stays visible on vertical scroll inside any .table-responsive */
.table-responsive thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--ct-surface-card);
    box-shadow: 0 1px 0 var(--ct-border);
}

/* Sticky first column for tables marked with .table-sticky-col */
.table-sticky-col th:first-child,
.table-sticky-col td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--ct-surface-card);
    box-shadow: 2px 0 4px rgba(0,0,0,.3);
}
/* Raise the sticky header corner above sticky column */
.table-sticky-col thead th:first-child {
    z-index: 4;
}

/* Coach evaluations: horizontal scroll + sticky player column */
.eval-table-wrap {
    position: relative;
    overflow-x: auto;
}
.eval-table-wrap table {
    margin-bottom: 0;
}
.eval-table-wrap th.eval-sticky,
.eval-table-wrap td.eval-sticky {
    position: sticky;
    left: 0;
    background: var(--ct-surface-card);
    z-index: 2;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
}
.eval-table-wrap thead th.eval-sticky,
.eval-table-wrap tfoot th.eval-sticky {
    background: var(--ct-surface-card);
    z-index: 4;
}

/* Ranking table: player name is 3rd column */
#ranking-table th:nth-child(3),
#ranking-table td:nth-child(3) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--ct-surface-card);
    box-shadow: 2px 0 4px rgba(0,0,0,.3);
}
#ranking-table thead th:nth-child(3) {
    z-index: 4;
}

/* ==============================================
   Player Profile — Hero Card
   ============================================== */
.player-hero {
    background: linear-gradient(135deg, var(--ct-surface-raised) 0%, var(--ct-surface-card) 60%);
    border: 1px solid var(--ct-border);
}
.player-hero-name { font-family: var(--ct-font-display); font-size: 1.5rem; }
.player-hero-meta { font-size: .78rem; color: var(--ct-text-tertiary); }
.player-hero-dorsal {
    font-family: var(--ct-font-display);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ct-accent);
}
.player-hero-dorsal-label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ct-text-faint);
}
/* ==============================================
   Ficha del equipo — Hero
   Mismo lenguaje que .player-hero; comparte .hero-kpi.
   ============================================== */
.team-hero {
    background: linear-gradient(135deg, var(--ct-surface-raised) 0%, var(--ct-surface-card) 60%);
    border: 1px solid var(--ct-border);
}
.team-hero-name { font-family: var(--ct-font-display); font-size: 1.5rem; }
.team-hero-meta { font-size: .78rem; color: var(--ct-text-tertiary); }
.team-hero-crest {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: var(--ct-radius-md, .5rem);
    background: var(--ct-surface-card);
    border: 1px solid var(--ct-border);
    padding: 4px;
    flex-shrink: 0;
}
.team-hero-crest-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ct-icon-muted);
}

.hero-kpi {
    background: var(--ct-surface-card);
    border: 1px solid var(--ct-border-light);
    border-radius: var(--ct-radius-md, .5rem);
    padding: .5rem .25rem;
    transition: box-shadow .15s;
}
.hero-kpi:hover { box-shadow: var(--ct-shadow-xs); }
.hero-kpi-value { font-family: var(--ct-font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.hero-kpi-label { font-size: .7rem; color: var(--ct-text-secondary); text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }

/* ==============================================
   Player Profile — Radar Chart Container
   ============================================== */
.radar-chart-container { max-width: 280px; width: 100%; }

/* ==============================================
   Player Profile — Evolution Chart Container
   ============================================== */
.eval-evolution-container { max-width: 700px; }

/* ==============================================
   Player Profile — Stat Compare
   ============================================== */
.stat-compare { margin-top: 2px; line-height: 1; }
.stat-compare .bi { font-size: .65rem; }
.stat-compare span { font-size: var(--ct-font-xs); }

/* ==============================================
   Player Profile — Streak Widget
   ============================================== */
.streak-item { min-width: 52px; max-width: 72px; }
.streak-circle {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
    /* Los tres semánticos son colores claros: el blanco se quedaba en 1.7:1
       sobre verde y 2.8:1 sobre rojo. Texto oscuro, como el resto de fondos
       de acento sólidos del tema. */
    color: var(--ct-on-accent);
    margin-bottom: 2px;
}
.streak-win  { background-color: var(--ct-success); }
.streak-draw { background-color: var(--ct-warning); }
.streak-loss { background-color: var(--ct-danger); }
.streak-detail { font-size: var(--ct-font-xs); line-height: 1.2; }
.streak-rival { font-size: .6rem; color: var(--ct-text-tertiary); max-width: 72px; }

/* ==============================================
   Calendario
   ============================================== */
.cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ct-space-xs);
}
.cal-toolbar .form-select { width: auto; }

.cal-cell {
    min-width: 0;
    min-height: 96px;
    padding: 4px;
    cursor: pointer;
    transition: background var(--ct-transition);
}
.cal-cell:hover { background: var(--ct-surface-hover); }
.cal-cell--out { background: var(--ct-surface-hover); }
.cal-cell--out .cal-daynum { color: var(--ct-text-faint); }
.cal-cell--today { background: var(--ct-primary-subtle); }

.cal-daynum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 2px;
    font-size: var(--ct-font-sm);
    color: var(--ct-text-secondary);
    border-radius: var(--ct-radius-full);
}
.cal-daynum--today {
    background: var(--ct-primary);
    color: var(--ct-on-accent);
    font-weight: 700;
}

/* Chip de evento: fondo sutil + barra izquierda de color pleno */
.cal-event {
    display: block;
    margin-bottom: 3px;
    padding: 2px 6px;
    font-size: var(--ct-font-xs);
    line-height: 1.35;
    color: var(--ct-text-primary);
    background: var(--ct-surface-raised);
    border-left: 3px solid var(--ct-text-tertiary);
    border-radius: var(--ct-radius-sm);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.cal-event:hover { color: var(--ct-text-primary); filter: brightness(1.15); }
.cal-event .ct-icon { vertical-align: -2px; margin-right: 3px; }
.cal-event--match    { background: var(--ct-danger-subtle);  border-left-color: var(--ct-danger); }
.cal-event--training { background: rgba(167, 139, 250, .14); border-left-color: var(--ct-section-trainings); }
.cal-event--note     { background: var(--ct-warning-subtle); border-left-color: var(--ct-warning); }
.cal-event--birthday { background: var(--ct-info-subtle);    border-left-color: var(--ct-info); }
/* Hueco del horario: no existe todavía, así que va hueco y punteado para que
   nunca se confunda con una sesión creada de verdad. */
.cal-event--slot {
    background: transparent;
    color: var(--ct-text-tertiary);
    border: 1px dashed var(--ct-section-trainings);
    border-left: 3px dashed var(--ct-section-trainings);
    opacity: .8;
}
a.cal-event--slot:hover { color: var(--ct-text-secondary); opacity: 1; }
.cal-event--live {
    background: var(--ct-danger);
    color: var(--ct-text-inverse);
    font-weight: 700;
}
@media (prefers-reduced-motion: no-preference) {
    .cal-event--live { animation: pulse-live 1.5s ease-in-out infinite; }
}
@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

.cal-more {
    display: block;
    padding: 1px 6px;
    font-size: var(--ct-font-xs);
    color: var(--ct-text-tertiary);
    background: none;
    border: 0;
    text-align: left;
    width: 100%;
    border-radius: var(--ct-radius-sm);
}
.cal-more:hover { color: var(--ct-text-primary); background: var(--ct-surface-raised); }

/* Leyenda-filtro (chips clicables) */
.cal-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: var(--ct-font-sm);
    color: var(--ct-text-secondary);
    background: transparent;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-pill);
    cursor: pointer;
    user-select: none;
    transition: all var(--ct-transition);
}
.cal-filter:hover { border-color: var(--ct-border-strong); color: var(--ct-text-primary); }
.cal-filter.active {
    color: var(--ct-text-primary);
    background: var(--ct-surface-raised);
    border-color: var(--ct-border-strong);
}
.cal-filter:not(.active) { opacity: .45; }
.cal-filter:focus-visible { outline: 2px solid var(--ct-primary-ring); outline-offset: 1px; }
.cal-filter .cal-filter-count {
    font-size: var(--ct-font-xs);
    color: var(--ct-text-tertiary);
    font-weight: 600;
}

/* Evento oculto por filtro */
.cal-hidden { display: none !important; }

/* Puntos de evento en celdas (solo móvil) */
.cal-dots { display: flex; flex-wrap: wrap; gap: 3px; padding: 2px; }
.cal-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--ct-radius-full);
    flex-shrink: 0;
}
.cal-dot--match    { background: var(--ct-danger); }
.cal-dot--training { background: var(--ct-section-trainings); }
.cal-dot--note     { background: var(--ct-warning); }
.cal-dot--birthday { background: var(--ct-info); }
.cal-dot--training_slot {
    background: transparent;
    border: 1px dashed var(--ct-section-trainings);
}

/* ── Tira de "esta semana" (listado de entrenamientos) ── */
/* Siete columnas en escritorio; en móvil se desliza en horizontal en vez de
   apilarse, para que la semana se siga leyendo como una semana. */
.ct-week-strip > [class*="col"] { min-width: 0; }
@media (max-width: 767.98px) {
    .ct-week-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .ct-week-strip > [class*="col"] {
        flex: 0 0 9.5rem;
        scroll-snap-align: start;
    }
}
/* Hueco del horario dentro de la tira: mismo lenguaje visual que en el calendario. */
.ct-week-slot {
    color: var(--ct-text-tertiary);
    border: 1px dashed var(--ct-section-trainings);
    border-radius: var(--ct-radius-sm);
    line-height: 1.2;
}
.ct-week-slot:hover {
    color: var(--ct-text-secondary);
    background: var(--ct-surface-hover);
}

/* Agenda del mes (solo móvil) */
.cal-agenda-day { border-left: 3px solid var(--ct-border-strong); padding-left: var(--ct-space-sm); }
.cal-agenda-day--today { border-left-color: var(--ct-primary); }
.cal-agenda-date {
    font-family: var(--ct-font-display);
    font-weight: 700;
    font-size: var(--ct-font-sm);
    color: var(--ct-text-secondary);
    margin-bottom: 4px;
}
.cal-agenda-day--today .cal-agenda-date { color: var(--ct-primary); }
.cal-agenda .cal-event { padding: 8px 10px; font-size: var(--ct-font-sm); white-space: normal; }

/* Móvil: celdas compactas, targets táctiles en agenda */
@media (max-width: 991.98px) {
    .cal-cell { min-height: 52px; padding: 2px; }
    .cal-daynum { width: 22px; height: 22px; font-size: var(--ct-font-xs); }
    .cal-agenda .cal-event { min-height: 44px; display: flex; align-items: center; }
}

/* Semana: columnas y cabeceras */
.week-col { border-right: 1px solid var(--ct-border); min-width: 0; min-height: 180px; }
.week-col:last-child { border-right: none; }
.week-day-header {
    font-size: var(--ct-font-sm);
    padding: .5rem .4rem;
    text-align: center;
    border-bottom: 1px solid var(--ct-border);
    color: var(--ct-text-secondary);
}
.week-day-header.today {
    background: var(--ct-primary);
    color: var(--ct-on-accent);
}

/* ============================================================
   Módulo Entrenamientos (Nocturno)
   ============================================================ */

/* Botón de acción cuadrado (tabla, cabeceras de bloque) */
.ct-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    line-height: 1;
}
.ct-icon-btn.ct-icon-btn-sm { width: 30px; height: 30px; }

/* Miniatura de tarea/bloque */
.ct-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex: none;
    background-color: var(--ct-surface-body);
    border: 1px solid var(--ct-border);
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ct-icon-muted);
    overflow: hidden;
}
.ct-thumb-lg { width: 56px; height: 56px; }

/* Punto de color de categoría (KPIs, selects) */
.ct-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--ct-radius-pill);
    display: inline-block;
    flex: none;
}

/* Celda de título con miniatura en la biblioteca de tareas */
.ct-task-title-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ct-task-title-cell .ct-task-title-body { min-width: 0; }
.ct-task-title-cell .ct-task-title { font-weight: 600; color: var(--ct-text-primary); }
.ct-task-title-cell .ct-task-desc {
    font-size: var(--ct-font-sm);
    color: var(--ct-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 42ch;
}

/* Cabecera de columna de categoría con punto */
.kpi-card .ct-kpi-head { display: flex; align-items: center; gap: 7px; }

/* Duración en Space Grotesk */
.ct-duration { font-family: var(--ct-font-display); font-weight: 700; color: var(--ct-text-primary); }

/* ---- Editor de sesión: dos paneles (Nocturno) ---- */
.ct-block-list { display: flex; flex-direction: column; gap: 8px; }
.ct-block-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--ct-surface-card);
    border: 1px solid var(--ct-border);
    border-left: 4px solid var(--phase, var(--ct-primary));
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background var(--ct-transition), border-color var(--ct-transition);
}
.ct-block-item:hover { background: var(--ct-surface-hover); }
.ct-block-item.active { background: var(--ct-surface-active); border-color: var(--ct-primary); }
.ct-block-item .ct-block-order { font-family: var(--ct-font-display); font-weight: 700; color: var(--ct-text-tertiary); min-width: 1.2em; text-align: center; }
.ct-block-item .ct-block-name { font-weight: 600; color: var(--ct-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-block-item .ct-block-meta { font-size: var(--ct-font-sm); color: var(--ct-text-tertiary); }
.ct-block-item.has-error { border-color: var(--ct-danger); }

.ct-editor-panel {
    background: var(--ct-surface-card);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-lg);
    padding: 1rem 1.25rem;
}
.ct-editor-empty {
    border: 1px dashed var(--ct-border-strong);
    border-radius: var(--ct-radius-lg);
    color: var(--ct-text-tertiary);
}

/* ---- Biblioteca de tareas: feedback al añadir a la sesión ---- */
/* El colapso usa grid-template-rows 1fr -> 0fr para animar hasta la altura real */
.ct-lib-item { display: grid; grid-template-rows: 1fr; }
.ct-lib-item > .ct-lib-item-inner { overflow: hidden; min-height: 0; }
.ct-lib-item .card { margin-bottom: .5rem; }
.ct-lib-item.is-added { pointer-events: none; }
.ct-lib-item.is-added .card {
    background: var(--ct-success-subtle);
    border-color: var(--ct-success) !important;
}
.ct-lib-item.is-added .ct-lib-body { opacity: .5; }
.ct-lib-item.is-leaving { grid-template-rows: 0fr; }
.ct-lib-item.is-leaving > .ct-lib-item-inner { opacity: 0; transform: translateX(14px); }
.ct-lib-added-badge {
    background: var(--ct-success-subtle);
    color: var(--ct-success);
    border: 1px solid var(--ct-success);
}
@media (prefers-reduced-motion: no-preference) {
    .ct-lib-item { transition: grid-template-rows .32s ease; }
    .ct-lib-item > .ct-lib-item-inner { transition: opacity .28s ease, transform .28s ease; }
    .ct-lib-item .card { transition: background var(--ct-transition), border-color var(--ct-transition); }
    .ct-lib-item .ct-lib-body { transition: opacity var(--ct-transition); }
}

/* Campo de correcciones destacado en ámbar */
.ct-field-correction { border-left: 3px solid var(--ct-warning); padding-left: .75rem; }

/* Barra de reparto por fase */
.ct-phase-bar { display: flex; height: 8px; border-radius: var(--ct-radius-pill); overflow: hidden; background: var(--ct-surface-body); }
.ct-phase-bar > span { display: block; height: 100%; }

/* Utilidad: permitir truncado dentro de flex (usada en editor de sesión y cards) */
.min-w-0 { min-width: 0 !important; }

/* ---- Páginas de error (419, ...) ---- */
.error-card { position: relative; overflow: hidden; }
.error-code {
    position: absolute;
    top: -.35em;
    right: .15em;
    font-family: var(--ct-font-display);
    font-weight: 700;
    font-size: 7rem;
    line-height: 1;
    color: var(--ct-text-primary);
    opacity: .05;
    pointer-events: none;
    user-select: none;
}
.error-icon {
    background: var(--ct-warning-subtle);
    color: var(--ct-warning);
}
.error-hint {
    font-size: var(--ct-font-sm);
    border-top: 1px solid var(--ct-border);
    padding-top: 1rem;
}
.error-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem;
    background: var(--ct-surface-hover);
    border-top: 1px solid var(--ct-border);
    font-family: var(--ct-font-display);
    font-weight: 600;
    font-size: var(--ct-font-md);
    color: var(--ct-text-secondary);
}

/* =========================================================================
   Entrenamiento — vista de sesión en móvil
   Pestañas (Sesión / Asistencia), selector de estado con chips y barra fija
   de guardado. Todo el bloque está pensado para que en escritorio (≥768px)
   la pantalla siga siendo exactamente la de dos columnas de siempre.
   ========================================================================= */

/* ---- Barra de pestañas pegajosa (móvil) ---- */
.ct-tabs-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ct-surface-body);
    margin: 0 -12px 12px;
    padding: 0 12px;
    border-bottom: 1px solid var(--ct-border);
}
.ct-tabs-sticky .nav {
    flex-wrap: nowrap;
    border: 0;
}
.ct-tabs-sticky .nav-link {
    flex: 1 1 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--ct-text-secondary);
    font-family: var(--ct-font-display);
    font-size: var(--ct-font-sm);
    font-weight: 600;
    padding: .7rem .9rem;
    white-space: nowrap;
}
.ct-tabs-sticky .nav-link.active {
    color: var(--ct-primary);
    border-bottom-color: var(--ct-primary);
    background: none;
}

/* Los paneles solo se alternan en móvil: en escritorio este bloque no existe
   y las columnas del row se comportan como siempre. */
@media (max-width: 767.98px) {
    [data-training-pane] { display: none; }
    [data-training-pane].is-active { display: block; }
}

/* ---- Selector de estado de asistencia ---- */
.ct-att-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.ct-att-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1.5px solid var(--ct-border-strong);
    background: transparent;
    color: var(--ct-text-faint);
    border-radius: var(--ct-radius-pill);
    padding: .32rem .62rem;
    font-family: var(--ct-font-display);
    font-size: var(--ct-font-xs);
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    transition: all var(--ct-transition);
}
.ct-att-chip:hover:not(:disabled) {
    border-color: var(--ct-text-tertiary);
    color: var(--ct-text-secondary);
}
.ct-att-chip:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.ct-att-chip[data-value=""].is-active {
    background: var(--ct-surface-hover);
    border-color: var(--ct-text-tertiary);
    border-style: dashed;
    color: var(--ct-text-secondary);
}
.ct-att-chip[data-value="present"].is-active {
    background: var(--ct-success-subtle);
    border-color: var(--ct-success);
    color: var(--ct-success);
}
.ct-att-chip[data-value="absent"].is-active {
    background: var(--ct-danger-subtle);
    border-color: var(--ct-danger);
    color: var(--ct-danger);
}
.ct-att-chip[data-value="justified"].is-active {
    background: var(--ct-info-subtle);
    border-color: var(--ct-info);
    color: var(--ct-info);
}
.ct-att-chip[data-value="injured"].is-active {
    background: var(--ct-surface-raised);
    border-color: var(--ct-text-tertiary);
    color: var(--ct-text-secondary);
}
.ct-att-chip[data-value="late"].is-active {
    background: var(--ct-warning-subtle);
    border-color: var(--ct-warning);
    color: var(--ct-warning);
}

/* Sugerencia por lesión activa: la fila viene premarcada sin haberse guardado */
.ct-att-hint {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: var(--ct-font-xs);
    color: var(--ct-text-faint);
}

/* ---- Observaciones plegadas ---- */
.ct-att-note-field { display: none; }
.ct-att-note.is-open .ct-att-note-field { display: block; }
.ct-att-note-btn.has-content {
    border-color: var(--ct-info);
    color: var(--ct-info);
}

/* ---- Barra fija de guardado (móvil) ---- */
.ct-sticky-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--ct-surface-raised);
    border-top: 1px solid var(--ct-border-strong);
    box-shadow: var(--ct-shadow-lg);
    /* El hueco inferior es generoso a propósito: en Android antiguos la barra
       de navegación (con el botón de atrás) queda pegada al borde y el pulgar
       se pasaba de largo al guardar. */
    padding: .6rem .85rem calc(1.15rem + env(safe-area-inset-bottom));
}
/* Objetivo de pulsación cómodo en el campo, con guantes o con prisa */
.ct-sticky-actions .btn {
    min-height: 52px;
    padding: .75rem 1.25rem;
    font-size: var(--ct-font-sm);
    font-weight: 600;
}
.ct-att-counts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-family: var(--ct-font-display);
    font-size: var(--ct-font-xs);
    font-weight: 600;
    min-width: 0;
}
.ct-att-count {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}
.ct-att-count::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.ct-att-count-present   { color: var(--ct-success); }
.ct-att-count-absent    { color: var(--ct-danger); }
.ct-att-count-justified { color: var(--ct-info); }
.ct-att-count-injured   { color: var(--ct-text-tertiary); }
.ct-att-count-late      { color: var(--ct-warning); }
.ct-att-unmarked { color: var(--ct-text-faint); font-weight: 500; }
.ct-att-dirty {
    display: block;
    color: var(--ct-warning);
    font-weight: 500;
    width: 100%;
}

/* ---- Tabla de asistencia apilada en móvil ---- */
@media (max-width: 767.98px) {
    .ct-att-table thead { display: none; }
    .ct-att-table,
    .ct-att-table tbody,
    .ct-att-table tr,
    .ct-att-table td {
        display: block;
        width: 100%;
    }
    .ct-att-table tr {
        position: relative;
        border: 1px solid var(--ct-border);
        border-radius: var(--ct-radius-lg);
        padding: .6rem .75rem;
        margin-bottom: .5rem;
    }
    .ct-att-table td {
        border: 0;
        padding: .2rem 0;
    }
    /* El botón de quitar invitada va anclado a la esquina, así que esta celda
       no debe reservar alto: en las filas de plantilla va vacía. */
    .ct-att-table td.ct-att-actions { padding: 0; }
    /* Dorsal y nombre comparten línea: apilados quedarían dos renglones tontos */
    .ct-att-table td.ct-att-num,
    .ct-att-table td.ct-att-player {
        display: inline-block;
        width: auto;
        vertical-align: top;
    }
    .ct-att-table td.ct-att-num {
        margin-right: .45rem;
        font-weight: 700;
    }
    .ct-att-table td.ct-att-status { margin-top: .4rem; }
    .ct-att-table .ct-att-chip { flex: 1 1 auto; justify-content: center; }
    .ct-att-table .ct-att-note-field .form-control { min-width: 0; width: 100%; }
    /* El botón de quitar invitada se ancla a la esquina de la tarjeta */
    .ct-att-table .ct-att-remove {
        position: absolute;
        top: .5rem;
        right: .5rem;
        width: auto;
        padding: 0;
    }
    /* Hueco para que la barra fija no tape la última futbolista */
    .ct-att-pane-pad { padding-bottom: 7.5rem; }
}

/* ── Rejilla semanal de horarios de entrenamiento (/teams) ────────────────── */
/* Ocho columnas: la de horas y los siete días. No se apila en móvil: se
   desplaza en horizontal, porque una semana partida deja de leerse como tal,
   y la columna de horas se queda fija para no perder la referencia. */
.ct-tsched-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ct-tsched {
    display: grid;
    grid-template-columns: 3.5rem repeat(7, minmax(7.5rem, 1fr));
    min-width: 58rem;
    --tsched-hour: 3.5rem;
}
.ct-tsched-corner,
.ct-tsched-gutter {
    position: sticky;
    left: 0;
    z-index: 30;
    background: var(--ct-surface-card);
}
.ct-tsched-corner { border-bottom: 1px solid var(--ct-border); }
.ct-tsched-dayname {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: var(--ct-font-display);
    font-size: var(--ct-font-sm);
    font-weight: 600;
    color: var(--ct-text-secondary);
    padding-bottom: var(--ct-space-xs);
    border-bottom: 1px solid var(--ct-border);
    border-left: 1px solid var(--ct-border-light);
}
.ct-tsched-dayname.is-today { color: var(--ct-primary); }
.ct-tsched-daycount {
    font-size: var(--ct-font-xs);
    font-weight: 600;
    color: var(--ct-text-faint);
    font-variant-numeric: tabular-nums;
}
.ct-tsched-daycount:empty { display: none; }

.ct-tsched-gutter,
.ct-tsched-col { position: relative; }
.ct-tsched-col { border-left: 1px solid var(--ct-border-light); }
.ct-tsched-col.is-today { background: var(--ct-surface-hover); }

/* Cada hora es una fila real: da altura a la columna y dibuja la línea. */
.ct-tsched-hour {
    height: var(--tsched-hour);
    border-bottom: 1px solid var(--ct-border-light);
}
.ct-tsched-gutter .ct-tsched-hour {
    border-bottom: none;
    position: relative;
}
.ct-tsched-gutter .ct-tsched-hour span {
    position: absolute;
    top: -.45rem;
    right: var(--ct-space-xs);
    font-size: var(--ct-font-xs);
    color: var(--ct-text-faint);
    font-variant-numeric: tabular-nums;
}

/* Franja. Fondo translúcido a propósito: cuando varios equipos se solapan se
   ven todas las capas, y el color sólido queda en el borde para distinguirlas. */
.ct-tsched-block {
    position: absolute;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 3px 6px;
    border-radius: var(--ct-radius-sm);
    border: 1px solid var(--tsched-color, var(--ct-section-trainings));
    border-left: 3px solid var(--tsched-color, var(--ct-section-trainings));
    background: var(--tsched-fill, rgba(167, 139, 250, .22));
    backdrop-filter: blur(1px);
    line-height: 1.15;
    text-decoration: none;
    transition: opacity var(--ct-transition), box-shadow var(--ct-transition);
}
.ct-tsched-block.is-open-ended {
    border-style: dashed;
    border-left-style: solid;
}
/* Seguir a un equipo por la semana: al posarse, el resto se apaga. */
.ct-tsched-block.is-faded { opacity: .3; }

/* Al posarse, la franja se lleva la columna entera y sube al frente: con tres
   equipos a la vez cada una tiene un tercio, que no da para leer nada.
   Hace falta !important porque la colocación va en estilos en línea. */
.ct-tsched-block:hover,
.ct-tsched-block:focus-visible {
    left: 0 !important;
    width: 100% !important;
    z-index: 40 !important;
    opacity: 1;
    box-shadow: var(--ct-shadow-hover);
    background: color-mix(in srgb, var(--tsched-color) 32%, var(--ct-surface-card));
}
.ct-tsched-block-team {
    font-size: var(--ct-font-xs);
    font-weight: 700;
    color: var(--ct-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ct-tsched-block-time {
    font-size: var(--ct-font-xs);
    color: var(--tsched-color, var(--ct-text-secondary));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ct-tsched-block-place {
    font-size: var(--ct-font-xs);
    color: var(--ct-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Franja estrecha (solape de tres o más): solo cabe el nombre hasta que se
   posa el cursor encima y se expande. Las reglas de hover van después de las
   de is-narrow porque empatan en especificidad y gana la última. */
.ct-tsched-block.is-narrow { padding: 3px 4px; }
.ct-tsched-block.is-narrow .ct-tsched-block-time,
.ct-tsched-block.is-narrow .ct-tsched-block-place { display: none; }
.ct-tsched-block.is-narrow:hover .ct-tsched-block-time,
.ct-tsched-block.is-narrow:hover .ct-tsched-block-place,
.ct-tsched-block.is-narrow:focus-visible .ct-tsched-block-time,
.ct-tsched-block.is-narrow:focus-visible .ct-tsched-block-place { display: block; }

/* Choque de instalación: dos equipos a la vez es normal, a la vez y en el
   mismo sitio no. Se avisa con una esquina, sin robarle el color al equipo. */
.ct-tsched-block.is-clash::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 .55rem .55rem 0;
    border-style: solid;
    border-color: transparent var(--ct-warning) transparent transparent;
}

/* Hora actual sobre la columna de hoy. */
.ct-tsched-now {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--ct-primary);
    z-index: 35;
    pointer-events: none;
}
.ct-tsched-now::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -4px;
    width: 7px;
    height: 7px;
    border-radius: var(--ct-radius-full);
    background: var(--ct-primary);
}

/* Leyenda: cada chip apaga o enciende su equipo en la rejilla. */
.ct-tsched-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ct-space-xs);
}
.ct-tsched-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--ct-radius-pill);
    border: 1px solid var(--ct-border-strong);
    background: var(--ct-surface-raised);
    color: var(--ct-text-tertiary);
    font-size: var(--ct-font-xs);
    font-weight: 600;
    transition: all var(--ct-transition);
}
.ct-tsched-chip.is-on {
    border-color: var(--tsched-color);
    background: var(--tsched-fill);
    color: var(--ct-text-primary);
}
.ct-tsched-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--ct-radius-full);
    background: var(--tsched-color);
    opacity: .35;
}
.ct-tsched-chip.is-on .ct-tsched-chip-dot { opacity: 1; }
.ct-tsched-chip-count {
    color: var(--ct-text-faint);
    font-variant-numeric: tabular-nums;
}
.ct-tsched-chip.is-on .ct-tsched-chip-count { color: var(--ct-text-secondary); }

/* Sin cursor (táctil) no hay expansión al posarse: se compensa dando columnas
   más anchas, que la rejilla ya se desplaza en horizontal de todas formas. */
@media (hover: none) {
    .ct-tsched {
        grid-template-columns: 3.5rem repeat(7, minmax(10rem, 1fr));
        min-width: 73.5rem;
    }
}

/* ── Lista de destinatarias de una encuesta ──────────────────────────────
   La plantilla puede pasar de veinte nombres: el bloque scrollea en su
   propia caja para que el formulario de creación no se estire. */
.ct-audience-list {
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-sm, .5rem);
    padding: .5rem .75rem;
}

/* ---- Lista de refuerzos del club (alta de invitadas en asistencia) ----
   Reemplaza al desplegable de resultados que solo aparecía al teclear: aquí la
   lista se ve entera y el campo de texto la filtra. Cada fila añade al momento
   y desaparece de la lista, sin recargar la pantalla. */
.ct-guest-picker {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius-md);
    background: var(--ct-surface-body);
}
.ct-guest-group + .ct-guest-group {
    border-top: 1px solid var(--ct-border);
}
.ct-guest-group-head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .35rem .7rem;
    background: var(--ct-surface-raised);
    color: var(--ct-text-tertiary);
    font-family: var(--ct-font-display);
    font-size: var(--ct-font-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ct-guest-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .42rem .7rem;
    border: 0;
    background: transparent;
    color: var(--ct-text-secondary);
    text-align: left;
    font-size: var(--ct-font-sm);
    transition: background var(--ct-transition), color var(--ct-transition);
}
.ct-guest-item:hover:not(:disabled),
.ct-guest-item:focus-visible {
    background: var(--ct-surface-hover);
    color: var(--ct-text-primary);
}
.ct-guest-item:disabled {
    opacity: .5;
    cursor: progress;
}
.ct-guest-num {
    flex-shrink: 0;
    min-width: 2.1rem;
    color: var(--ct-text-faint);
    font-variant-numeric: tabular-nums;
    font-size: var(--ct-font-xs);
}
.ct-guest-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Puntuación con estrellas (valoración tras el partido) ─────────────────
   Media estrella = 1 punto, entera = 2 → escala 1-10. Cada estrella son dos
   botones invisibles superpuestos; el relleno lo pinta una capa recortada por
   ancho, que es lo que permite la media estrella sin un segundo icono. */
.ct-stars__row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ct-stars__star {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 0;
}

.ct-stars__half {
    position: absolute;
    top: 0;
    width: 50%;
    /* El área táctil se estira por encima del icono: en móvil una mitad de
       13px sería imposible de acertar. */
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 2;
}

.ct-stars__half--left  { left: 0; }
.ct-stars__half--right { right: 0; }

.ct-stars__icon--bg { color: var(--ct-border, #3a3f4b); }
.ct-stars__icon--on { color: var(--ct-accent, #c6f24e); }

.ct-stars__fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

.ct-stars__value {
    margin-left: .5rem;
    min-width: 3.2rem;
    font-size: .8rem;
    color: var(--ct-text-muted, #9aa0ab);
    font-variant-numeric: tabular-nums;
}

.ct-stars__clear {
    padding: 0 .25rem;
    border: 0;
    background: none;
    color: var(--ct-text-muted, #9aa0ab);
    cursor: pointer;
}

/* Barra de guardado siempre a la vista: el formulario es largo y en móvil
   obligaría a bajar hasta el final para enviarlo. */
.ct-rate__footer {
    position: sticky;
    bottom: 0;
    background: var(--ct-bg, #14161a);
    border-top: 1px solid var(--ct-border, #3a3f4b);
}

.ct-rate { max-width: 720px; }
.ct-rate__crest { max-height: 72px; }

/* ============================================================
   Cabecera de /matches — próximos partidos destacados
   ============================================================ */
.ct-next-match {
    border: 1px solid var(--ct-border);
    border-left: 3px solid var(--ct-accent);
    display: flex;
    flex-direction: column;
}
.ct-next-match.is-live { border-left-color: var(--ct-success); }
.ct-next-when {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-family: var(--ct-font-display);
    font-size: var(--ct-font-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ct-text-secondary);
}
.ct-next-match.is-live .ct-next-when { color: var(--ct-success); }
.ct-next-crest {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--ct-radius-md);
    background: var(--ct-surface-card);
    border: 1px solid var(--ct-border);
    padding: 3px;
    flex-shrink: 0;
}
.ct-next-teams {
    font-family: var(--ct-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}
.ct-next-meta {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
    font-size: var(--ct-font-sm);
    color: var(--ct-text-tertiary);
}
.ct-next-score {
    font-family: var(--ct-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ct-success);
    flex-shrink: 0;
}