/* ==================================================================
   ZYRA — sistema de diseño
   Fondo oscuro, acento lima, tarjetas redondeadas con borde fino y
   títulos anchos en cursiva. Se carga DESPUÉS de Bootstrap.
   ================================================================== */

/* ---------- Fuentes (servidas desde static/, licencia OFL) ---------- */

@font-face { font-family: 'Archivo'; font-weight: 400; font-display: swap; src: url("zyra/fonts/Archivo-Regular.fc87a89f4be2.ttf") format('truetype'); }
@font-face { font-family: 'Archivo'; font-weight: 700; font-display: swap; src: url("zyra/fonts/Archivo-Bold.8e2c14f8866e.ttf") format('truetype'); }
@font-face { font-family: 'Archivo'; font-weight: 800; font-display: swap; src: url("zyra/fonts/Archivo-ExtraBold.332c4b0c4109.ttf") format('truetype'); }
@font-face { font-family: 'Syncopate'; font-weight: 700; font-display: swap; src: url("zyra/fonts/Syncopate-Bold.eda316a6befb.ttf") format('truetype'); }
@font-face { font-family: 'Syncopate'; font-style: italic; font-weight: 700; font-display: swap; src: url("zyra/fonts/Syncopate-BoldItalic.879eaeccc646.ttf") format('truetype'); }

:root,
[data-bs-theme="dark"] {
    --z-lime: #B4F100;
    --z-lime-hover: #C8FF2E;
    --z-lime-press: #9AD000;
    --z-lime-rgb: 180, 241, 0;
    --z-ink: #0A0A0A;          /* texto sobre lima */
    /* Grises con un toque oliva: casan con el lima en vez de ser grises "de serie" */
    --z-bg: #0A0B09;
    --z-bg-top: #252821;
    --z-surface: #141512;
    --z-surface-2: #1C1D1A;
    --z-surface-3: #252722;
    --z-border: #30322D;
    --z-border-strong: #474A42;
    --z-text: #F4F5F1;
    --z-muted: #A4A79E;
    --z-danger: #FF5C63;
    --z-warning: #FFC940;
    --z-success: #B4F100;
    --z-radius: 16px;
    --z-radius-sm: 10px;
    --z-display: 'Syncopate', 'Archivo', system-ui, sans-serif;
    --z-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --z-nav-h: 72px;
    --z-ease: cubic-bezier(.22, 1, .36, 1);
    /* Relieve: filo de luz arriba + sombra tintada hacia abajo */
    --z-edge: inset 0 1px 0 rgba(255, 255, 255, .05);
    --z-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
    --z-shadow-pop: 0 24px 48px -16px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .04);
    --z-glow: 0 10px 30px -12px rgba(var(--z-lime-rgb), .55);
    --z-sheen: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 45%);

    /* Bootstrap */
    --bs-body-font-family: var(--z-body);
    --bs-body-bg: var(--z-bg);
    --bs-body-color: var(--z-text);
    --bs-emphasis-color: #FFFFFF;
    --bs-secondary-color: var(--z-muted);
    --bs-tertiary-bg: var(--z-surface-2);
    --bs-border-color: var(--z-border);
    --bs-border-radius: var(--z-radius-sm);
    --bs-primary: var(--z-lime);
    --bs-primary-rgb: var(--z-lime-rgb);
    --bs-success: var(--z-lime);
    --bs-success-rgb: var(--z-lime-rgb);
    --bs-danger: var(--z-danger);
    --bs-danger-rgb: 255, 92, 99;
    --bs-link-color: var(--z-lime);
    --bs-link-color-rgb: var(--z-lime-rgb);
    --bs-link-hover-color: var(--z-lime-hover);
    --bs-link-hover-color-rgb: 200, 255, 46;
    --bs-heading-color: #FFFFFF;
    --bs-focus-ring-color: rgba(var(--z-lime-rgb), .35);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    min-height: 100%;
    color-scheme: dark;
    scrollbar-color: var(--z-border-strong) var(--z-bg);
    -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Paso suave entre páginas (js/page-transitions.js). Solo opacidad sobre el contenido:
   nada de View Transitions (desvían los clics mientras dura la animación) ni transform
   o filter (mueven la zona clicable o recolocan lo fijo). La opacidad no cambia dónde
   cae un clic, así que pulsar rápido durante el fundido sigue funcionando. Cabecera y
   barra inferior no se animan.
   Al salir, el contenido se desvanece; al entrar, cada bloque aparece en cascada con
   un pequeño retardo, lo que da sensación de continuidad entre una página y la otra.
   "backwards" y no "both": al acabar, ningún bloque se queda como contexto de apilamiento. */
@keyframes z-page-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
    .main-content { transition: opacity .2s cubic-bezier(.4, 0, .2, 1); }
    /* Bloques: los hijos de main o, si la página lo envuelve todo en un único div, los de ese div. */
    .main-content > :not(script, style, link, div:only-of-type),
    .main-content > div:only-of-type > :not(script, style, link) {
        animation: z-page-in .42s cubic-bezier(.25, .1, .25, 1) var(--z-in-delay, 0s) backwards;
    }
    :is(.main-content, .main-content > div:only-of-type) > :nth-child(2 of :not(script, style, link)) { --z-in-delay: .05s; }
    :is(.main-content, .main-content > div:only-of-type) > :nth-child(3 of :not(script, style, link)) { --z-in-delay: .1s; }
    :is(.main-content, .main-content > div:only-of-type) > :nth-child(4 of :not(script, style, link)) { --z-in-delay: .15s; }
    :is(.main-content, .main-content > div:only-of-type) > :nth-child(n+5 of :not(script, style, link)) { --z-in-delay: .2s; }
    body.z-leaving .main-content { opacity: .12; }
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--z-body);
    line-height: 1.55;
    color: var(--z-text);
    background-color: var(--z-bg);
    /* Grano muy suave + halo lima arriba + degradado de siempre */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(50% 35% at 50% -8%, rgba(var(--z-lime-rgb), .09) 0%, rgba(var(--z-lime-rgb), 0) 100%),
        radial-gradient(120% 60% at 50% 0%, var(--z-bg-top) 0%, var(--z-bg) 70%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Nada debe ensanchar la página en móvil (desplazaría el contenido a un lado) */
    overflow-x: clip;
}

::selection { background: var(--z-lime); color: var(--z-ink); }

a { color: var(--z-lime); text-decoration: none; }
a:hover { color: var(--z-lime-hover); }
/* Enlaces dentro de un texto: subrayados, para no distinguirlos solo por el color (WCAG 1.4.1) */
.z-auth-foot a, .z-legal p a, .z-legal li a, main p a:not([class]) { text-decoration: underline; text-underline-offset: .2em; }
/* btn-outline-danger de Bootstrap (#dc3545) no llega a 4.5:1 sobre el fondo oscuro */
.btn-outline-danger { --bs-btn-color: var(--z-danger); --bs-btn-border-color: var(--z-danger); }

img { border-radius: var(--z-radius-sm); }

h1, h2, h3, h4, h5, h6 { color: #FFFFFF; font-weight: 700; text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Títulos de página: anchos, cursiva y mayúsculas (como los mockups) */
h1, .z-title {
    font-family: var(--z-display);
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: clamp(1.25rem, 3.2vw, 1.9rem);
    line-height: 1.2;
    margin: 0 0 1.25rem;
    text-align: left;
}

h2, .z-subtitle {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

h3 { font-size: 1rem; font-weight: 700; }
/* Encabezado con el tamaño de .h4/.h5 de Bootstrap pero sin las mayúsculas de h2 */
.z-heading-plain { text-transform: none; letter-spacing: normal; font-weight: 700; }

.text-muted, .text-secondary, .form-text { color: var(--z-muted) !important; }
.text-dark { color: var(--z-text) !important; }
.text-success { color: var(--z-lime) !important; }
.text-danger { color: var(--z-danger) !important; }
.text-lime { color: var(--z-lime) !important; }

:focus-visible { outline: 2px solid var(--z-lime); outline-offset: 2px; }
/* Enlace «Saltar al contenido»: oculto hasta que se llega a él con el teclado */
.z-skip-link {
    position: absolute; left: 12px; top: -100px; z-index: 2000;
    padding: 10px 16px; border-radius: var(--z-radius-sm);
    background: var(--z-lime); color: var(--z-ink); font-weight: 700;
}
.z-skip-link:focus { top: 12px; color: var(--z-ink); }
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Layout ---------- */

.main-content {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.container { max-width: 1200px; }

/* Contenedor genérico de página: tarjeta oscura con borde fino */
.table-container,
.styled-table,
.z-panel {
    width: 100%;
    margin: 0 auto 24px;
    padding: 28px;
    background: var(--z-sheen), rgba(20, 21, 18, .86);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    box-shadow: var(--z-edge), var(--z-shadow);
    overflow: visible;
    backdrop-filter: blur(10px);
}

.z-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 22px;
}
.z-page-head h1 { margin: 0; }
.z-page-head .z-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.z-eyebrow {
    display: block;
    margin-bottom: 4px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--z-lime);
}

.z-section-title {
    margin: 28px 0 14px;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* ---------- Cabecera / navegación ---------- */

.z-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(10, 11, 9, .72);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    backdrop-filter: blur(18px) saturate(140%);
}

.z-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    height: 68px;
    margin: 0 auto;
    padding: 0 24px;
}

.z-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
    flex-shrink: 0;
}
.z-brand:hover { color: #FFFFFF; }
.z-brand img { width: 30px; height: auto; border-radius: 0; }

.z-wordmark {
    font-family: var(--z-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .06em;
    line-height: 1;
}

.z-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.z-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--z-muted);
    border-radius: 999px;
    transition: color .2s var(--z-ease), background-color .2s var(--z-ease), box-shadow .2s var(--z-ease);
}
.z-nav-link:hover { color: #FFFFFF; background: var(--z-surface-2); }
.z-nav-link.is-active { color: var(--z-ink); background: var(--z-lime); box-shadow: var(--z-glow); }

.z-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.z-club-name {
    max-width: 200px;
    overflow: hidden;
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #FFFFFF;
}

.z-club-select { min-width: 160px; max-width: 220px; }

.z-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--z-text);
    background: var(--z-surface-2);
    border: 1px solid var(--z-border);
    border-radius: 50%;
    transition: border-color .2s var(--z-ease), color .2s var(--z-ease);
}
.z-icon-btn:hover { color: var(--z-lime); border-color: var(--z-lime); }

.z-user-menu .dropdown-menu { min-width: 240px; padding: 8px; }
.z-lang-menu .dropdown-menu { min-width: 160px; padding: 8px; }
.z-lang-menu .btn { font-size: .85rem; font-weight: 700; }

/* Barra inferior (móvil), como en los mockups */
.z-bottom-nav {
    display: none;
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 1030;
    transform: translateX(-50%);
    width: min(440px, calc(100% - 28px));
    padding: 8px;
    background: var(--z-lime);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 34px -8px rgba(0, 0, 0, .7), 0 8px 28px -10px rgba(var(--z-lime-rgb), .45);
}
.z-bottom-nav ul {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
}
.z-bottom-nav a {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
    color: var(--z-ink);
    border-radius: 50%;
    transition: background-color .2s var(--z-ease), color .2s var(--z-ease);
}
.z-bottom-nav a.is-active { color: var(--z-lime); background: var(--z-ink); }
.z-bottom-nav .visually-hidden { position: absolute; }

/* Cabecera y barra inferior se esconden al bajar y vuelven al subir (static/js/nav.js) */
.z-header { transition: transform .35s var(--z-ease); }
.z-bottom-nav { transition: transform .35s var(--z-ease); }
.z-nav-hidden .z-header { transform: translateY(-100%); }
.z-nav-hidden .z-bottom-nav { transform: translate(-50%, calc(100% + 24px + env(safe-area-inset-bottom))); }

@media (max-width: 991.98px) {
    .z-nav, .z-header-actions .z-desktop-only { display: none !important; }
    .z-header-inner { gap: 12px; height: 60px; padding: 0 16px; justify-content: space-between; }
    .z-bottom-nav { display: block; }
    .main-content { padding: 20px 16px calc(var(--z-nav-h) + 40px); }
    .table-container, .styled-table, .z-panel { padding: 20px 16px; }
    .z-footer { padding-bottom: calc(var(--z-nav-h) + 30px); }

    /* Que la cabecera quepa en el ancho del móvil: menú de usuario solo con icono */
    .z-header-actions { gap: 8px; min-width: 0; }
    .z-header-actions .btn-sm { --bs-btn-padding-x: .75rem; }
    .z-user-menu .dropdown-toggle { gap: 0 !important; width: 40px; height: 34px; justify-content: center; padding: 0; }
    .z-user-menu .dropdown-toggle::after, .z-lang-menu .dropdown-toggle::after { display: none; }
    .z-user-menu .dropdown-toggle i { font-size: 1.1rem; }
    .z-user-menu .z-club-name {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .z-lang-menu .dropdown-toggle { height: 34px; gap: 6px !important; }
    .z-header-actions .dropdown-menu { max-width: calc(100vw - 32px); }
}

@media (max-width: 359.98px) {
    .z-wordmark { display: none; }
}

.z-footer {
    padding: 22px 16px;
    font-size: .8rem;
    text-align: center;
    color: var(--z-muted);
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.z-footer p { margin: 0; }
.z-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: 8px; }
.z-footer-links a { color: var(--z-muted); padding: 4px 0; }
.z-footer-links a:hover { color: var(--z-lime); }

/* Páginas legales: texto largo, ancho de lectura cómodo */
.z-legal { max-width: 760px; margin: 0 auto; }
.z-legal h2 { margin-top: 1.75rem; }
.z-legal li { margin-bottom: .35rem; }
.footer { background: transparent; box-shadow: none; }

/* ---------- Botones ---------- */
/* Ojo: nada de transform (scale/translate) en :hover/:active de botones, enlaces o tarjetas.
   Mueven la zona clicable: si el puntero queda fuera al soltar, el clic se pierde. */

.btn {
    --bs-btn-font-weight: 800;
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-padding-y: .62rem;
    --bs-btn-border-radius: 999px;
    --bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--z-lime-rgb), .35);
    font-size: .85rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: background-color .2s var(--z-ease), color .2s var(--z-ease), border-color .2s var(--z-ease), box-shadow .2s var(--z-ease);
}
.btn-primary:hover, .btn-success:hover, .button:hover { box-shadow: var(--z-glow); }
.btn-primary, .btn-success, .button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-sm { --bs-btn-padding-x: .9rem; --bs-btn-padding-y: .38rem; font-size: .72rem; }
.btn-lg { --bs-btn-padding-y: .85rem; font-size: 1rem; }

.btn-primary, .btn-success, .button {
    --bs-btn-color: var(--z-ink);
    --bs-btn-bg: var(--z-lime);
    --bs-btn-border-color: var(--z-lime);
    --bs-btn-hover-color: var(--z-ink);
    --bs-btn-hover-bg: var(--z-lime-hover);
    --bs-btn-hover-border-color: var(--z-lime-hover);
    --bs-btn-active-color: var(--z-ink);
    --bs-btn-active-bg: var(--z-lime-press);
    --bs-btn-active-border-color: var(--z-lime-press);
    --bs-btn-disabled-color: var(--z-ink);
    --bs-btn-disabled-bg: var(--z-lime);
    --bs-btn-disabled-border-color: var(--z-lime);
}
.button {
    display: inline-block;
    padding: .62rem 1.35rem;
    font-weight: 800;
    color: var(--z-ink);
    background: var(--z-lime);
    border: 0;
    border-radius: 999px;
}

.btn-secondary, .btn-dark, .btn-light {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--z-surface-3);
    --bs-btn-border-color: var(--z-border-strong);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #30322C;
    --bs-btn-hover-border-color: #5A5D54;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #383A33;
    --bs-btn-active-border-color: #5A5D54;
}

.btn-warning {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--z-border-strong);
    --bs-btn-hover-color: var(--z-ink);
    --bs-btn-hover-bg: var(--z-lime);
    --bs-btn-hover-border-color: var(--z-lime);
    --bs-btn-active-color: var(--z-ink);
    --bs-btn-active-bg: var(--z-lime-press);
    --bs-btn-active-border-color: var(--z-lime-press);
}

.btn-danger {
    --bs-btn-color: var(--z-danger);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255, 92, 99, .55);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--z-danger);
    --bs-btn-hover-border-color: var(--z-danger);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #E0474E;
    --bs-btn-active-border-color: #E0474E;
}

.btn-outline-primary, .btn-outline-secondary, .btn-outline-light {
    --bs-btn-color: var(--z-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--z-border-strong);
    --bs-btn-hover-color: var(--z-ink);
    --bs-btn-hover-bg: var(--z-lime);
    --bs-btn-hover-border-color: var(--z-lime);
    --bs-btn-active-color: var(--z-ink);
    --bs-btn-active-bg: var(--z-lime);
    --bs-btn-active-border-color: var(--z-lime);
}

.btn-link { --bs-btn-color: var(--z-lime); --bs-btn-hover-color: var(--z-lime-hover); text-transform: none; }

.btn-group { gap: 6px; flex-wrap: wrap; }
.btn-group > .btn { border-radius: 999px !important; margin: 0 !important; }

/* Selector segmentado (vista, orden, etc.) */
.z-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--z-surface-2);
    border: 1px solid var(--z-border);
    border-radius: 999px;
}
.z-segmented .btn, .z-segmented a, .z-segmented button {
    --bs-btn-border-color: transparent;
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--z-muted);
    border-radius: 999px !important;
}
.z-segmented .active, .z-segmented [aria-current="page"] {
    color: var(--z-ink) !important;
    background: var(--z-lime) !important;
}

/* ---------- Formularios ---------- */

label, .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #FFFFFF;
}
.form-check-label { display: inline; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .95rem; color: var(--z-text); cursor: pointer; }

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
.z-select-trigger,
textarea {
    display: block;
    width: 100%;
    padding: .7rem 1rem;
    font: inherit;
    font-size: .95rem;
    color: var(--z-text);
    background-color: var(--z-surface-2);
    border: 1px solid var(--z-border);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
    transition: border-color .2s var(--z-ease), box-shadow .2s var(--z-ease), background-color .2s var(--z-ease);
}
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled),
input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), .z-select-trigger:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) { border-color: var(--z-border-strong); }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #8C8C8C; }
.form-control:focus, .form-select:focus, input:focus, select:focus, .z-select-trigger:focus-visible, textarea:focus {
    color: #FFFFFF;
    background-color: var(--z-surface-2);
    border-color: var(--z-lime);
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--z-lime-rgb), .16);
}
select, .form-select, .z-select-trigger {
    padding-right: 2.5rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23B4F100' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
    cursor: pointer;
}
select[multiple] { background-image: none; padding-right: 1rem; }
option { color: var(--z-text); background: var(--z-surface-2); }
input[type="date"] { color-scheme: dark; }
input[type="number"] { width: 90px; text-align: center; }
input[type="file"], .form-control[type="file"] { padding: .55rem; color: var(--z-muted); }
input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: .4rem 1rem;
    font-weight: 700;
    color: var(--z-ink);
    background: var(--z-lime);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

input[type="checkbox"], .form-check-input {
    width: 1.15em;
    height: 1.15em;
    accent-color: var(--z-lime);
    background-color: var(--z-surface-2);
    border-color: var(--z-border-strong);
    cursor: pointer;
}
.form-check-input:checked { background-color: var(--z-lime); border-color: var(--z-lime); }
.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='%230A0A0A' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--z-lime-rgb), .25); border-color: var(--z-lime); }

form p { margin-bottom: 1rem; }
form ul.errorlist, .errorlist { margin: 6px 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--z-danger); }
.helptext { display: block; margin-top: 4px; font-size: .8rem; color: var(--z-muted); }

/* Contraseñas: botón para mostrarla y lista de requisitos (static/js/password.js) */
.z-password { position: relative; display: block; }
.z-password input { padding-right: 3rem; }
.z-password-toggle {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 3rem; padding: 0;
    color: var(--z-muted); background: none; border: 0; border-radius: 0 12px 12px 0;
    cursor: pointer;
}
.z-password-toggle:hover, .z-password-toggle:focus-visible { color: var(--z-lime); }
.z-password-toggle:focus-visible { outline: 2px solid var(--z-lime); outline-offset: -4px; }
.z-password-rules { display: block; margin: 6px 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--z-muted); }
.z-password-rules li { position: relative; padding-left: 1.4em; margin: 2px 0; }
.z-password-rules li::before { content: "•"; position: absolute; left: .35em; }
.z-password-rules.is-live li::before { content: "○"; left: .15em; }
.z-password-rules li.is-ok { color: var(--z-success); }
.z-password-rules li.is-ok::before { content: "✓"; }
.z-password-rules li.is-bad { color: var(--z-danger); }
.z-password-rules li.is-bad::before { content: "✗"; }

fieldset {
    margin: 0 0 16px;
    padding: 20px;
    background: var(--z-surface-2);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
}
legend {
    float: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--z-lime);
}

/* Lista de jugadores seleccionables (convocatorias, sanciones) */
.z-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.z-check-grid .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin: 0;
    padding: 10px 14px;
    background: var(--z-surface-2);
    border: 1px solid var(--z-border);
    border-radius: 12px;
    transition: border-color .15s;
}
.z-check-grid .form-check:hover { border-color: var(--z-border-strong); }
.z-check-grid .form-check:has(input:checked) { border-color: var(--z-lime); }
.z-check-grid .form-check-input { margin: 0; flex-shrink: 0; }

/* ---------- Tarjetas ---------- */

.card, .z-card {
    --bs-card-bg: var(--z-surface);
    --bs-card-border-color: var(--z-border);
    --bs-card-color: var(--z-text);
    --bs-card-cap-bg: var(--z-surface-2);
    --bs-card-border-radius: var(--z-radius);
    --bs-card-inner-border-radius: calc(var(--z-radius) - 1px);
    color: var(--z-text);
    background: var(--z-sheen), var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
    box-shadow: var(--z-edge) !important;
}
.z-card { padding: 20px; }
.card-title { color: #FFFFFF; }

a.z-card, .z-card--link { display: block; color: inherit; transition: border-color .25s var(--z-ease), box-shadow .25s var(--z-ease); }
a.z-card:hover, .z-card--link:hover {
    color: inherit;
    border-color: rgba(var(--z-lime-rgb), .7);
    box-shadow: var(--z-edge), var(--z-shadow), 0 0 0 1px rgba(var(--z-lime-rgb), .15) !important;
}

.z-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px;
}

/* Etiquetas */
.badge { padding: .4em .8em; font-weight: 700; letter-spacing: .03em; border-radius: 999px; }
.z-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--z-muted);
    background: var(--z-surface-3);
    border-radius: 999px;
    white-space: nowrap;
}
.z-badge--lime, .bg-success { color: var(--z-ink) !important; background: var(--z-lime) !important; }
.z-badge--danger, .bg-danger { color: #FFFFFF !important; background: rgba(255, 92, 99, .22) !important; }
.z-badge--danger { color: var(--z-danger) !important; }
.z-badge--warning { color: var(--z-ink); background: var(--z-warning); }
.z-badge--outline { color: var(--z-text); background: transparent; border: 1px solid var(--z-border-strong); }

/* Avatares con aro lima (como en los mockups) */
.z-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    padding: 2px;
    object-fit: cover;
    background: var(--z-surface-2);
    border: 2px solid var(--z-lime);
    border-radius: 50% !important;
}
.z-avatar--lg { width: 96px; height: 96px; border-width: 3px; }
.z-avatar--xl { width: 140px; height: 140px; border-width: 3px; }
.z-avatar--sm { width: 40px; height: 40px; }


/* ---------- Tablas ---------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--z-text);
    --bs-table-border-color: var(--z-border);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-bg: rgba(var(--z-lime-rgb), .06);
    --bs-table-hover-color: #FFFFFF;
    margin-bottom: 0;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.table > thead th,
.styled-table th {
    padding: 12px 14px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--z-muted);
    background: var(--z-surface-2);
    border-bottom: 1px solid var(--z-border);
}
.table > :not(caption) > * > * { padding: 12px 14px; }
.table-bordered > :not(caption) > * { border-color: var(--z-border); }
.styled-table td { color: var(--z-text); background: transparent; border-color: var(--z-border); }

.z-table-wrap {
    overflow-x: auto;
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
}
.z-table-wrap .table > thead th:first-child { border-top-left-radius: var(--z-radius); }
.z-table-wrap .table > thead th:last-child { border-top-right-radius: var(--z-radius); }
.z-table-wrap .table tbody tr:last-child > * { border-bottom: 0; }

.table-avatar, .table-logo {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 50% !important;
    border: 2px solid var(--z-lime);
}
.table-logo { border-radius: 12px !important; border-color: var(--z-border-strong); }

/* ---------- Paginación ---------- */

.pagination {
    --bs-pagination-color: var(--z-text);
    --bs-pagination-bg: var(--z-surface-2);
    --bs-pagination-border-color: var(--z-border);
    --bs-pagination-hover-color: var(--z-ink);
    --bs-pagination-hover-bg: var(--z-lime);
    --bs-pagination-hover-border-color: var(--z-lime);
    --bs-pagination-focus-color: var(--z-ink);
    --bs-pagination-focus-bg: var(--z-lime);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--z-lime-rgb), .3);
    --bs-pagination-active-color: var(--z-lime);
    --bs-pagination-active-bg: transparent;
    --bs-pagination-active-border-color: transparent;
    --bs-pagination-disabled-color: #5A5A5A;
    --bs-pagination-disabled-bg: var(--z-surface);
    --bs-pagination-disabled-border-color: var(--z-border);
    flex-wrap: wrap;
    gap: 6px;
    margin: 24px 0 0;
}
.pagination .page-link { border-radius: 999px !important; font-weight: 700; font-size: .85rem; }
.pagination .page-item.active .page-link { font-weight: 800; }

/* ---------- Mensajes y avisos ---------- */

.alert,
.alert-message,
.alert-log,
.warning,
.error,
.messages p {
    display: block;
    margin: 0 0 16px;
    padding: 14px 16px;
    font-size: .92rem;
    color: var(--z-text);
    background: var(--z-surface-2);
    border: 1px solid var(--z-border);
    border-left: 4px solid var(--z-lime);
    border-radius: 12px;
    box-shadow: none;
}
.alert p, .alert-message p { margin: 0; }
.alert p + p, .alert-message p + p { margin-top: 6px; }
.alert-message ul { margin: 0; padding-left: 18px; }
.warning, .alert-danger, .error, .alert .error, p.error { border-left-color: var(--z-danger); }
.alert-log, .alert-warning { border-left-color: var(--z-warning); }
.alert-success { border-left-color: var(--z-lime); }
.alert .success, .alert-message .success { color: var(--z-text); }
.alert-success, .alert-danger, .alert-warning, .alert-info { --bs-alert-color: var(--z-text); --bs-alert-bg: var(--z-surface-2); --bs-alert-border-color: var(--z-border); }

.log-container {
    max-height: 340px;
    overflow-y: auto;
    padding: 12px;
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
}
.log-container p { margin: 0 0 8px; }

/* ---------- Dropdowns, modales, tooltips ---------- */

.dropdown-menu {
    --bs-dropdown-bg: rgba(28, 29, 26, .88);
    --bs-dropdown-border-color: var(--z-border);
    --bs-dropdown-color: var(--z-text);
    --bs-dropdown-link-color: var(--z-text);
    --bs-dropdown-link-hover-color: var(--z-ink);
    --bs-dropdown-link-hover-bg: var(--z-lime);
    --bs-dropdown-link-active-color: var(--z-ink);
    --bs-dropdown-link-active-bg: var(--z-lime);
    --bs-dropdown-divider-bg: var(--z-border);
    --bs-dropdown-header-color: var(--z-muted);
    border-radius: 14px;
    box-shadow: var(--z-edge), var(--z-shadow-pop);
    backdrop-filter: blur(16px) saturate(140%);
}
.dropdown-item { border-radius: 8px; font-weight: 600; transition: background-color .15s var(--z-ease), color .15s var(--z-ease); }

/* Desplegables y popovers aparecen con un pequeño fundido (translate no choca con el transform de Popper) */
@keyframes z-pop { from { opacity: 0; translate: 0 -6px; } }
.dropdown-menu.show, .z-picker.is-open .z-picker-list, .z-datepicker.is-open .z-datepicker-pop { animation: z-pop .2s var(--z-ease); }
.modal-backdrop { --bs-backdrop-opacity: .6; backdrop-filter: blur(6px); }
.dropdown-item i { width: 20px; }

.tooltip { --bs-tooltip-bg: var(--z-surface-3); --bs-tooltip-color: var(--z-text); }
.tooltip-inner { text-align: left; border: 1px solid var(--z-border); }
.tooltip-inner p { margin: 0; }

.list-group-item { color: var(--z-text); background: var(--z-surface); border-color: var(--z-border); }

.modal {
    --bs-modal-bg: var(--z-surface);
    --bs-modal-color: var(--z-text);
    --bs-modal-border-color: var(--z-border);
    --bs-modal-header-border-color: var(--z-border);
    --bs-modal-footer-border-color: var(--z-border);
    --bs-modal-border-radius: 18px;
}
.modal .btn-close { filter: invert(1); }

/* «Completar equipo» */
.z-import-wrap { max-height: 420px; overflow-y: auto; margin: 0 0 20px; }
/* Tabla con columnas de ancho fijo: nombres, etiquetas y última columna alineados en todas las filas. */
.z-import-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.z-import-table col.z-import-cat { width: 130px; }
.z-import-table col.z-import-last { width: 34%; }
.z-import-table th { position: sticky; top: 0; z-index: 1; padding: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--z-muted); text-align: left; background: var(--z-surface); border-bottom: 1px solid var(--z-border-strong, var(--z-border)); }
.z-import-table td { padding: 10px 8px; vertical-align: middle; border-bottom: 1px solid var(--z-border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-import-table tbody tr:last-child td { border-bottom: 0; }
.z-import-table .text-end { text-align: right; }

/* Categoría SNP del jugador: un color por tipo. */
.z-cat { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; vertical-align: middle; }
.z-cat--future { color: #0B1F14; background: #4ADE80; }
.z-cat--500 { color: #FFFFFF; background: #8B5CF6; }
.z-cat--1000 { color: #FFFFFF; background: #3B82F6; }
.z-cat--grand-slam { color: #2A1B00; background: #F5B700; }
.z-cat--other { color: var(--z-text); background: var(--z-surface-3); }


/* ---------- Pantallas de acceso (login, registro, portada) ---------- */

.z-auth {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 220px);
}
.z-auth-card {
    width: 100%;
    max-width: 440px;
    padding: 36px 28px;
    background: var(--z-sheen), var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: 24px;
    box-shadow: var(--z-edge), 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 80px -40px rgba(var(--z-lime-rgb), .35);
}
.z-auth-card--wide { max-width: 560px; }
.z-auth-logo { display: block; width: 64px; height: auto; margin: 0 auto 14px; border-radius: 0; }
.z-auth-card h1 { text-align: center; }
.z-auth-card .btn { width: 100%; }
.z-auth-foot { margin: 18px 0 0; font-size: .9rem; text-align: center; color: var(--z-muted); }

/* Portada pública: todo centrado en una columna, y centrada en el alto de la ventana */
.main-content:has(> .z-hero) { display: flex; flex-direction: column; justify-content: center; }
.z-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 20px;
    text-align: center;
}
.z-hero-title {
    margin: 0 0 12px;
    text-align: inherit;
    font-family: var(--z-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2.8rem, 8vw, 5.6rem);
    line-height: .95;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: linear-gradient(180deg, #FFFFFF 35%, #8E9286 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.z-hero-tag {
    margin: 0 0 18px;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--z-lime);
}
.z-hero-text { max-width: 560px; margin: 0 auto 24px; font-size: 1.1rem; color: var(--z-muted); }
.z-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.z-hero-art { display: grid; place-items: center; order: -1; }
.z-hero-art img { width: min(100%, 150px); height: auto; border-radius: 0; filter: drop-shadow(0 30px 60px rgba(var(--z-lime-rgb), .25)); }
.z-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 1000px; margin: 40px auto 0; text-align: left; }
.z-feature { padding: 22px; transition: border-color .25s var(--z-ease); }
.z-feature:hover { border-color: rgba(var(--z-lime-rgb), .45); }
.z-feature i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    font-size: 1.1rem;
    color: var(--z-lime);
    background: rgba(var(--z-lime-rgb), .1);
    border: 1px solid rgba(var(--z-lime-rgb), .25);
    border-radius: 12px;
}
.z-feature h3 { margin: 0 0 6px; font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.z-feature p { margin: 0; font-size: .9rem; color: var(--z-muted); }

.z-hero-subtitle {
    display: block;
    margin-top: 14px;
    font-family: var(--z-body);
    font-style: normal;
    font-size: clamp(1rem, 2.6vw, 1.35rem);
    letter-spacing: .08em;
    -webkit-text-fill-color: var(--z-text);
    color: var(--z-text);
}
/* Secciones de la portada bajo el primer pantallazo: qué hace, cómo funciona y preguntas */
.z-landing-section { width: 100%; max-width: 1000px; margin: 56px auto 0; }
.z-landing-section .z-features { margin-top: 0; }
.z-landing-title { margin: 0 0 18px; font-size: 1.15rem; font-weight: 800; text-align: center; }
.z-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: z-step; }
.z-steps li { padding: 22px; color: var(--z-muted); counter-increment: z-step; }
.z-steps li::before {
    content: counter(z-step);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
    font-weight: 800;
    color: var(--z-ink);
    background: var(--z-lime);
    border-radius: 50%;
}
.z-steps strong { display: block; margin-bottom: 4px; color: var(--z-text); }
.z-faq { display: grid; gap: 10px; }
.z-faq details { padding: 16px 20px; }
.z-faq summary { cursor: pointer; }
.z-faq summary h3 { display: inline; margin: 0; font-size: 1rem; font-weight: 700; }
.z-faq details p { margin: 10px 0 0; color: var(--z-muted); }
.z-landing-cta { margin-top: 28px; }
.z-back-to-top { align-items: center; gap: 8px; }

@media (max-width: 767.98px) {
    .z-hero-art img { width: 120px; }
    .z-steps { grid-template-columns: 1fr; }
    .z-landing-section { margin-top: 40px; }
    .z-hero-actions { width: 100%; }
    .z-hero-actions .btn { flex: 1 1 100%; }
    .z-features { grid-template-columns: 1fr; }
}

/* ---------- Listados (jugadores, equipos, partidos) ---------- */

.z-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.z-toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.z-search { position: relative; min-width: 260px; }
.z-search i { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: var(--z-muted); pointer-events: none; }
.z-search input { padding-left: 42px; border-radius: 999px; }
@media (min-width: 768px) { .z-toolbar-group > .z-search { flex-shrink: 0; min-width: 300px; } }
.z-toggle { display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; user-select: none; }
.z-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.z-toggle-track {
    position: relative; flex-shrink: 0; width: 44px; height: 24px; border-radius: 999px;
    background: var(--z-surface-3); border: 1px solid var(--z-border-strong);
    transition: background-color .2s var(--z-ease), border-color .2s var(--z-ease);
}
.z-toggle-track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--z-muted); transition: transform .2s var(--z-ease), background-color .2s var(--z-ease);
}
.z-toggle:hover .z-toggle-track { border-color: var(--z-muted); }
.z-toggle input:checked + .z-toggle-track { background: var(--z-lime); border-color: var(--z-lime); }
.z-toggle input:checked + .z-toggle-track::after { transform: translateX(20px); background: var(--z-ink); }
.z-toggle input:focus-visible + .z-toggle-track { box-shadow: 0 0 0 3px rgba(var(--z-lime-rgb), .35); }
.z-toggle-label { font-size: .92rem; font-weight: 500; color: var(--z-text); text-transform: none; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
    .z-toggle-track, .z-toggle-track::after { transition: none; }
}
.z-toolbar-label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--z-muted); }

@media (max-width: 767.98px) {
    .z-toolbar, .z-toolbar-group { align-items: stretch; }
    .z-toolbar-group, .z-search { width: 100%; min-width: 0; }
    .z-segmented { width: 100%; justify-content: space-between; }
    .z-segmented > * { flex: 1; }
}

/* Tarjeta de jugador */
.z-player {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 18px;
}
.z-player-name { margin: 0 0 4px; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: #FFFFFF; }
.z-player-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; font-size: .82rem; color: var(--z-muted); }
.z-player-meta i { color: var(--z-lime); margin-right: 4px; }
.z-player-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.z-edit {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    font-size: .8rem;
    color: var(--z-muted);
    background: var(--z-surface-2);
    border: 1px solid var(--z-border);
    border-radius: 50%;
}
.z-edit:hover { color: var(--z-ink); background: var(--z-lime); border-color: var(--z-lime); }
.z-edit--danger:hover { color: #FFFFFF; background: var(--z-danger); border-color: var(--z-danger); }

/* Nivel de rendimiento (0-10) */

/* Tarjeta de equipo */
.z-team { display: flex; align-items: center; gap: 16px; padding: 16px; }
.z-team img { width: 72px; height: 72px; flex-shrink: 0; object-fit: cover; border-radius: 14px; background: var(--z-surface-2); }
.z-team h2 { margin: 0 0 2px; font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: normal; }
.z-team p { margin: 0 0 8px; font-size: .85rem; color: var(--z-muted); }

/* Tarjeta de enfrentamiento */
.z-match {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}
.z-match-team { display: flex; align-items: center; gap: 14px; min-width: 0; font-weight: 800; text-transform: uppercase; color: #FFFFFF; }
.z-match-team--away { flex-direction: row-reverse; text-align: right; }
.z-match-team span { overflow: hidden; text-overflow: ellipsis; }
.z-match-team img { width: 56px; height: 56px; flex-shrink: 0; object-fit: cover; border-radius: 50%; border: 2px solid var(--z-border-strong); background: var(--z-surface-2); }
.z-match-center { text-align: center; }
.z-match-score { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--z-lime); font-variant-numeric: tabular-nums; }
.z-match-date { margin-top: 6px; font-size: .78rem; color: var(--z-muted); }
.z-match-status { margin-top: 8px; }

@media (max-width: 575.98px) {
    .z-match { grid-template-columns: 1fr; gap: 10px; padding: 18px 16px; }
    .z-match-team, .z-match-team--away { flex-direction: row; text-align: left; }
    .z-match-center { order: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; text-align: left; }
    .z-match-date, .z-match-status { margin: 0; }
    .z-match-team img { width: 40px; height: 40px; }
}

/* ---------- Detalle de enfrentamiento ---------- */

.z-versus {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 24px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, rgba(var(--z-lime-rgb), .12), rgba(var(--z-lime-rgb), 0) 60%), var(--z-surface-2);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
}
.z-versus-team { font-size: clamp(1rem, 2.4vw, 1.4rem); font-weight: 800; text-transform: uppercase; color: #FFFFFF; }
.z-versus-team small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--z-muted); }
.z-versus-team:last-child { text-align: right; }
.z-versus-mid { text-align: center; }
.z-versus-vs { font-family: var(--z-display); font-style: italic; font-weight: 700; font-size: 1.2rem; color: var(--z-lime); }
.z-versus-date { font-size: .8rem; color: var(--z-muted); }

.z-positions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.z-positions .z-card { padding: 16px; }
.z-positions h3 { margin: 0 0 10px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--z-lime); }
.z-positions ul { margin: 0; padding: 0; list-style: none; }
.z-positions li { padding: 8px 0; border-bottom: 1px solid var(--z-border); font-weight: 600; }
.z-positions li:last-child { border-bottom: 0; }
.z-positions p { margin: 0; font-size: .88rem; color: var(--z-muted); }

.z-game { margin-bottom: 12px; overflow: hidden; }
.z-game-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--z-surface-2); border-bottom: 1px solid var(--z-border); }
.z-game-head h3 { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.z-game-row { display: grid; grid-template-columns: 1fr repeat(3, 44px); align-items: center; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--z-border); }
.z-game-row:last-child { border-bottom: 0; }
.z-game-row .z-set { font-size: 1.05rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; color: var(--z-muted); }
.z-game-row.is-winner .z-set, .z-game-row.is-winner .z-game-side { color: #FFFFFF; }
.z-game-row.is-winner .z-set { color: var(--z-lime); }
.z-game-side { min-width: 0; font-size: .9rem; color: var(--z-muted); }
.z-game-side strong { display: block; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.z-game-sets-head { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; font-size: .7rem; font-weight: 800; color: var(--z-muted); text-align: center; }

@media (max-width: 767.98px) {
    .z-positions { grid-template-columns: 1fr; }
    .z-versus { grid-template-columns: 1fr; text-align: center; }
    .z-versus-team:last-child { text-align: center; }
}

/* Orden de parejas en la creación de partidos */
.pair-order-container { margin-top: 20px; padding: 20px; background: var(--z-surface-2); border: 1px solid var(--z-border); border-radius: var(--z-radius); }
.pair-order-container h2 { margin: 0 0 10px; }
#pair-order-list { margin: 0; padding: 0; list-style: none; counter-reset: pair; }
#pair-order-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-weight: 600; border-bottom: 1px solid var(--z-border); counter-increment: pair; }
#pair-order-list li:last-child { border-bottom: 0; }
#pair-order-list li::before {
    content: counter(pair);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    font-size: .8rem;
    font-weight: 800;
    color: var(--z-ink);
    background: var(--z-lime);
    border-radius: 50%;
}
/* Alineación: parejas a la izquierda, orden por puntos SNP a la derecha (fijo al hacer scroll) */
.z-lineup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 20px; align-items: start; }
.z-lineup-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.z-lineup-pairs fieldset { margin: 0; }
.z-lineup-pairs fieldset { position: relative; }
.z-lineup-reset { position: absolute; top: 10px; right: 16px; padding: 3px 10px; font-size: .75rem; letter-spacing: .02em; }
.z-lineup-pairs fieldset > div + div { margin-top: 12px; }
.z-lineup-side.pair-order-container { position: sticky; top: 96px; margin-top: 0; }
.z-lineup > input, .z-lineup > .z-selector-bar { grid-column: 1 / -1; }
#pair-order-list li > div { display: grid; flex: 1; min-width: 0; }
#pair-order-list li small { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--z-muted); }
#pair-order-list li span { overflow: hidden; text-overflow: ellipsis; }
#pair-order-list li p { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; }
#pair-order-list li b { flex-shrink: 0; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--z-lime); }
#pair-order-list li.is-empty span { font-weight: 500; color: var(--z-muted); }
#pair-order-list li.is-empty::before { color: var(--z-muted); background: var(--z-surface-3); }
@media (max-width: 991.98px) {
    .z-lineup { grid-template-columns: 1fr; }
    .z-lineup-side.pair-order-container { position: static; }
}
.z-games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.z-games-grid fieldset { margin: 0; }
.z-games-grid fieldset > div + div { margin-top: 12px; }

/* Resultado de un partido (sets) */
.set-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.set { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; background: var(--z-surface-2); border: 1px solid var(--z-border); border-radius: var(--z-radius); }
.set label { margin: 0; color: var(--z-lime); }
.set input[type="number"] { width: 84px; height: 52px; font-size: 1.3rem; font-weight: 800; }
.z-set-legend { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 0; }
.z-set-legend span { display: flex; align-items: center; height: 52px; font-size: .85rem; font-weight: 700; text-transform: uppercase; color: var(--z-muted); }

/* ---------- Perfil de jugador ---------- */

.z-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-bottom: 26px; }
.z-profile-name { margin: 0 0 6px; }
.z-profile-stats { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.z-stat { min-width: 110px; padding: 14px 18px; text-align: center; background: var(--z-surface-2); border: 1px solid var(--z-border); border-radius: var(--z-radius); }
.z-stat b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--z-lime); }
.z-stat span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--z-muted); }

.z-results { margin: 0; padding: 0; list-style: none; }
.z-results li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--z-border); }
.z-results li:last-child { border-bottom: 0; }
.z-results .z-result-date { font-size: .82rem; color: var(--z-muted); }
.z-wl { display: inline-grid; place-items: center; width: 30px; height: 30px; font-weight: 800; font-size: .85rem; border-radius: 50%; }
.z-wl--w { color: var(--z-ink); background: var(--z-lime); }
.z-wl--l { color: #FFFFFF; background: rgba(255, 92, 99, .3); }

@media (max-width: 767.98px) {
    .z-profile { flex-direction: column; text-align: center; }
    .z-profile-stats { width: 100%; margin: 0; justify-content: center; }
}

/* ---------- Portada ---------- */

.z-home-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(var(--z-lime-rgb), .12), rgba(var(--z-lime-rgb), 0) 60%), var(--z-surface-2);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius);
}
.z-home-hero h1 { margin: 0; }
.z-home-logo {
    flex-shrink: 0;
    width: 112px;
    height: 112px;
    padding: 6px;
    object-fit: contain;
    background: var(--z-surface);
    border: 3px solid var(--z-lime);
    border-radius: 50% !important;
}

.z-next-match { display: grid; gap: 18px; }
.z-next-match-when { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--z-muted); }
.z-next-match-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.z-next-match-team { display: grid; justify-items: center; gap: 6px; text-align: center; font-weight: 800; text-transform: uppercase; color: #FFFFFF; }
.z-next-match-team img { width: 64px; height: 64px; object-fit: contain; }
.z-next-match-team small { font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--z-muted); }
.z-next-match-team.is-own span { color: var(--z-lime); }
.z-next-match-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--z-border);
}
.z-location { display: inline-flex; align-items: flex-start; gap: 8px; min-width: 0; font-weight: 600; color: var(--z-text); }
.z-location i { margin-top: 3px; color: var(--z-lime); }
a.z-location:hover span { text-decoration: underline; }

.z-hot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.z-hot { display: grid; gap: 14px; align-content: start; }
.z-hot .z-eyebrow { color: var(--z-lime); }
.z-hot .btn { justify-self: start; }
.z-hot-body { display: flex; align-items: center; gap: 14px; }
.z-hot-body strong { display: block; font-size: 1.05rem; color: #FFFFFF; }
.z-hot-body span { color: var(--z-muted); }
.z-hot-avatars { display: flex; flex-shrink: 0; }
.z-hot-avatars .z-avatar + .z-avatar { margin-left: -14px; }

@media (max-width: 575.98px) {
    .z-home-hero { flex-direction: column; text-align: center; }
    .z-home-logo { width: 96px; height: 96px; }
    .z-next-match-team img { width: 48px; height: 48px; }
}

.z-empty {
    padding: 36px 20px;
    text-align: center;
    color: var(--z-muted);
    background: var(--z-surface);
    border: 1px dashed var(--z-border-strong);
    border-radius: var(--z-radius);
}
.z-empty i { display: block; margin-bottom: 10px; font-size: 1.6rem; color: var(--z-lime); }

/* ==================================================================
   Estadísticas (equipo y jugador). Prefijo st- para no chocar con el
   CSS global. Reutilizan los colores de Zyra.
   ================================================================== */

.st-page {
  --st-navy: var(--z-lime);
  --st-navy-soft: var(--z-muted);
  --st-gold: var(--z-lime);
  --st-win: var(--z-lime);
  --st-loss: var(--z-danger);
  --st-ink: var(--z-text);
  --st-muted: var(--z-muted);
  --st-line: var(--z-border);
  --st-tint: var(--z-surface-2);
  --st-card: var(--z-surface);
  --st-display: var(--z-display);

  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 40px;
  font-family: var(--z-body);
  color: var(--st-ink);
  line-height: 1.5;
}

.st-page *, .st-page *::before, .st-page *::after { box-sizing: border-box; }
.st-page h1, .st-page h2, .st-page h3, .st-page p { text-align: left; }

.st-up { color: var(--st-win); }
.st-down { color: var(--st-loss); }
.st-muted { color: var(--st-muted); }

.st-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px 32px; margin-bottom: 24px;
}
.st-title {
  margin: 0; font-family: var(--st-display); font-style: italic; text-transform: uppercase;
  font-size: clamp(1.4rem, 4vw, 2.3rem); font-weight: 700; line-height: 1.1; color: #FFFFFF;
}
.st-subtitle { margin: 6px 0 0; font-size: 1rem; color: var(--st-muted); }

.st-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-label { margin: 0; }
.st-select { min-width: 240px; width: auto; }
.st-btn { padding: 9px 18px; font: inherit; font-weight: 800; color: var(--z-ink); background: var(--z-lime); border: 0; border-radius: 999px; cursor: pointer; }

.st-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px; margin-bottom: 14px;
}

.st-kpi {
  display: flex; flex-direction: column; justify-content: center;
  padding: 20px 22px; background: var(--st-card);
  border: 1px solid var(--st-line); border-radius: var(--z-radius);
}
.st-kpi-label { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--st-muted); }
.st-kpi-value {
  margin: 4px 0 0; font-size: 2.8rem; font-weight: 800;
  line-height: 1; font-variant-numeric: tabular-nums; color: #FFFFFF;
}
.st-kpi-sub { margin: 6px 0 0; font-size: .9rem; color: var(--st-muted); }

.st-kpi--ring { flex-direction: row; align-items: center; gap: 18px; background: var(--st-card); border-color: var(--z-lime); }
.st-kpi--ring .st-kpi-label { color: var(--z-lime); }
.st-kpi--ring .st-kpi-sub { color: var(--z-text); }

.st-ring {
  --size: 96px;
  flex: none; display: grid; place-items: center;
  width: var(--size); height: var(--size); border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--st-card) 80%, transparent 82%),
    conic-gradient(var(--z-lime) calc(var(--pct) * 1%), var(--z-surface-3) 0);
}
.st-ring span { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #FFFFFF; }

.st-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 14px; margin-bottom: 14px;
}

.st-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 22px; background: var(--st-card); border: 1px solid var(--st-line); border-radius: var(--z-radius);
}
.st-card-title { margin: 0; font-size: .9rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; color: #FFFFFF; }
.st-card-note { margin: 4px 0 0; font-size: .88rem; color: var(--st-muted); }

.st-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.st-pip {
  display: grid; place-items: center; width: 38px; height: 38px;
  font-size: 1rem; font-weight: 800; border-radius: 50%;
}
.st-pip--w { color: var(--z-ink); background: var(--st-win); }
.st-pip--l { color: #FFFFFF; background: rgba(255, 92, 99, .35); }

.st-split { margin-top: 18px; }
.st-split-head { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; }
.st-split-head b { font-size: 1.5rem; font-weight: 800; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.st-meter { height: 8px; margin-top: 6px; overflow: hidden; background: var(--z-surface-3); border-radius: 999px; }
.st-meter span { display: block; height: 100%; background: var(--z-lime); border-radius: 999px; }
.st-split-foot { margin: 6px 0 0; font-size: .88rem; color: var(--st-muted); }

.st-section { margin-top: 36px; scroll-margin-top: 90px; }
.st-section-title {
  display: inline-block; margin: 0 0 16px; padding-bottom: 8px;
  font-size: 1rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #FFFFFF; border-bottom: 2px solid var(--z-lime);
}

.st-chart { position: relative; height: 280px; margin-top: 16px; }
.st-chart--tall { height: 520px; }

.st-table-wrap { margin-top: 12px; overflow-x: auto; }
.st-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.st-table th, .st-table td { padding: 12px 14px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--st-line); }
.st-table thead th { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--st-muted); }
.st-table th:first-child, .st-table td:first-child { text-align: left; }
.st-table tbody th { font-weight: 700; color: #FFFFFF; }
.st-table tbody tr:last-child th, .st-table tbody tr:last-child td { border-bottom: 0; }
.st-table tbody tr:hover { background: rgba(var(--z-lime-rgb), .05); }

.st-empty {
  margin-bottom: 24px; padding: 36px 24px; text-align: center; color: var(--st-muted);
  background: var(--st-card); border: 1px dashed var(--z-border-strong); border-radius: var(--z-radius);
}
.st-empty strong { display: block; margin-bottom: 4px; font-size: 1.1rem; color: #FFFFFF; }

.st-seasons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.st-chip {
  display: inline-block; padding: 7px 16px;
  font-size: .85rem; font-weight: 700; color: var(--z-text);
  background: var(--z-surface-2); border: 1px solid var(--st-line); border-radius: 999px;
  transition: border-color .2s var(--z-ease), background-color .2s var(--z-ease), color .2s var(--z-ease);
}
.st-chip:hover { color: #FFFFFF; border-color: var(--z-lime); }
.st-chip[aria-current="page"] { color: var(--z-ink); background: var(--z-lime); border-color: var(--z-lime); }
.st-filter-label { align-self: center; margin-right: 4px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--z-muted); }
.st-chip[aria-pressed="true"] { color: var(--z-ink); background: var(--z-lime); border-color: var(--z-lime); }
button.st-chip { font-family: inherit; line-height: inherit; cursor: pointer; }

/* Grado de afinidad: selector de compañeros arriba a la derecha */
.st-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.st-aff-scope { display: flex; flex-wrap: wrap; gap: 8px; }
.st-aff-empty { margin-top: 16px; }
.st-chart[hidden], .st-aff-empty[hidden] { display: none; }
@media (max-width: 760px) {
  .st-aff-scope { gap: 6px; }
  .st-aff-scope .st-chip { padding: 6px 12px; font-size: .8rem; white-space: nowrap; }
}

/* Balance por jugador: orden y paginador */
.st-balance-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.st-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.st-pager[hidden] { display: none; }
.st-pager-info { min-width: 7.5em; text-align: center; font-size: .9rem; font-weight: 700; color: var(--z-text); font-variant-numeric: tabular-nums; }
.st-pager-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  color: var(--z-text); background: var(--z-surface-2); border: 1px solid var(--st-line); border-radius: 999px;
  cursor: pointer; transition: border-color .15s;
}
.st-pager-btn:hover:not(:disabled) { color: #FFFFFF; border-color: var(--z-lime); }
.st-pager-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 760px) {
  .st-balance-sort { gap: 6px; }
  .st-balance-sort .st-filter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .st-balance-sort .st-chip { padding: 6px 12px; font-size: .8rem; white-space: nowrap; }
}

.st-detail { margin-bottom: 24px; padding: 22px; background: rgba(var(--z-lime-rgb), .05); border: 1px solid rgba(var(--z-lime-rgb), .25); border-radius: 20px; }
.st-detail-title { margin: 0 0 16px; font-size: 1.05rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--z-lime); }
.st-detail .st-kpis, .st-detail .st-row { margin-bottom: 14px; }
.st-detail .st-row:last-child { margin-bottom: 0; }

.st-kpi--accent { border-left: 4px solid var(--z-lime); }

.st-vs { margin-top: 18px; }
.st-vs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-weight: 600; }
.st-vs-head b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.st-vs-bar { height: 8px; margin-top: 6px; overflow: hidden; background: rgba(255, 92, 99, .45); border-radius: 999px; }
.st-vs-bar span { display: block; height: 100%; background: var(--st-win); }
.st-vs-bar--neutral { background: var(--z-surface-3); }
.st-vs-bar--neutral span { background: var(--z-lime); }

.st-tally { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--st-line); }
.st-tally-item { display: inline-flex; align-items: baseline; gap: 6px; color: var(--st-muted); }
.st-tally-item::before { content: ""; width: 10px; height: 10px; align-self: center; border-radius: 50%; background: var(--st-muted); }
.st-tally-item b { font-size: 1.2rem; font-weight: 800; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.st-tally-item--win::before { background: var(--st-win); }
.st-tally-item--loss::before { background: var(--st-loss); }
.st-tally-item--draw::before { background: #8A8A8A; }
.st-tally-item--neutral::before { background: var(--z-lime); }
.st-tally-item--muted::before { background: var(--z-surface-3); }

.st-table tbody tr.st-current { background: rgba(var(--z-lime-rgb), .08); }
.st-table tbody tr.st-current th { box-shadow: inset 3px 0 0 var(--z-lime); }
.st-table a { color: inherit; text-decoration: underline; text-decoration-color: var(--z-border-strong); text-underline-offset: 3px; }
.st-table a:hover { text-decoration-color: var(--z-lime); }
/* Tabla de partidos del jugador: toda la fila lleva al partido */
.st-table--links tbody tr { position: relative; cursor: pointer; }
.st-table--links tbody th a::after { content: ""; position: absolute; inset: 0; }
/* Partido enlazado desde las estadísticas (call_for_match#partido-N) */
.z-game { scroll-margin-top: 90px; }
.z-game:target { box-shadow: 0 0 0 2px var(--z-lime); }

.st-empty--inline { padding: 18px 24px; text-align: left; margin-bottom: 16px; }
.st-empty--inline strong { display: inline; margin: 0 6px 0 0; font-size: 1rem; }

.st-kpi-of { font-size: 1.2rem; font-weight: 700; color: var(--st-muted); }
.st-page h4 { margin: 0; }
.st-card-title + .st-vs { margin-top: 14px; }

/* Barras de la vista de equipo */
.st-bar { height: 10px; margin-top: 8px; overflow: hidden; background: rgba(255, 92, 99, .45); border-radius: 999px; }
.st-bar { display: flex; }
.st-bar-win { display: block; height: 100%; background: var(--z-lime); }
.st-bar-draw { display: block; height: 100%; background: #8A8A8A; }

/* Jugadores para elegir en las estadísticas de jugador (sin jugador elegido) */
.st-player-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 10px; margin: 0 0 24px; padding: 0; list-style: none;
}
.st-player-card {
  display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 14px;
  font-weight: 700; color: var(--z-text); text-decoration: none;
  background: var(--st-card); border: 1px solid var(--st-line); border-radius: 14px;
  transition: border-color .2s var(--z-ease), background .2s var(--z-ease);
}
.st-player-card:hover, .st-player-card:focus-visible { color: var(--z-text); border-color: var(--z-lime); background: var(--z-surface-2); }
.st-player-card span { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .st-select { min-width: 0; width: 100%; }
  .st-picker { width: 100%; }
  .st-player-grid { gap: 8px; }
  .st-player-card { padding: 8px 12px; }
  .st-chart { height: 260px; }
  .st-chart--tall { height: 460px; }
  .st-kpi-value { font-size: 2.3rem; }
}

/* Utilidades */
[hidden] { display: none !important; }
.min-w-0 { min-width: 0; }
.z-check-grid > [class*="col-"] { width: auto; max-width: none; padding: 0; }

/* Estadísticas del equipo: marcador, datos y rejilla */
.st-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 14px;
  padding: 26px;
  background: linear-gradient(135deg, rgba(var(--z-lime-rgb), .14), rgba(var(--z-lime-rgb), 0) 55%), var(--st-card);
  border: 1px solid var(--st-line);
  border-radius: var(--z-radius);
}
.st-board-label { margin: 0 0 8px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--z-lime); }
.st-record { display: flex; align-items: center; gap: 18px; }
.st-score { display: flex; flex-direction: column; }
.st-record-num { font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 800; line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.st-score-cap { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--st-muted); }
.st-record-sep { font-size: 2rem; color: var(--st-muted); }
.st-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.st-fact { padding: 14px 16px; background: var(--z-surface-2); border: 1px solid var(--st-line); border-radius: 12px; }
.st-fact dt { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-muted); }
.st-fact dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 800; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.st-fact--gold { border-color: var(--z-lime); }
.st-fact--gold dd { color: var(--z-lime); }
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.st-card--wide { grid-column: 1 / -1; }
.st-vs-bar--loss span { background: var(--z-lime); }

.st-tabs { margin-bottom: 20px; }

@media (max-width: 900px) {
  .st-grid { grid-template-columns: 1fr; }
  .st-board { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .st-board { padding: 18px; }
  .st-record { justify-content: space-between; gap: 8px; }
  .st-record-sep { font-size: 1.5rem; }
  .st-score-cap { font-size: .62rem; letter-spacing: .04em; }
  .st-fact { min-width: 0; padding: 12px; }
}

/* Ajustes de maquetación */
.z-header-inner > nav { margin: 0 auto; }
.z-header-actions { margin-left: auto; }
.z-header-inner > nav + .z-header-actions { margin-left: 0; }
.z-game { padding: 0; }
@media (max-width: 991.98px) {
    .z-club-name { max-width: 120px; }
}

/* Resultado: equipos + 3 sets siempre en una fila */
.set-row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 620px; }
.set { padding: 12px 8px; }
.set input[type="number"] { width: 100%; max-width: 84px; }
.z-set-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 52px; }
.z-set-legend { padding: 12px 0; min-width: 0; }
@media (max-width: 575.98px) {
    .set-row { gap: 6px; }
    .set { padding: 10px 4px; }
    .set input[type="number"] { height: 46px; font-size: 1.1rem; padding: .4rem; }
    .z-set-legend span { height: 46px; line-height: 46px; font-size: .72rem; }
}

/* Tablas top 5 */
.st-top-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.st-top { margin: 14px 0 0; padding: 0; list-style: none; }
.st-top-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--st-line); }
.st-top-row:last-child { border-bottom: 0; padding-bottom: 0; }
.st-top-pos {
  display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px;
  font-size: .8rem; font-weight: 800; color: var(--z-text); background: var(--z-surface-3); border-radius: 50%;
}
.st-top-row:first-child .st-top-pos { color: var(--z-ink); background: var(--z-lime); }
.st-top-name { flex: 1; min-width: 0; font-weight: 700; color: #FFFFFF; overflow-wrap: anywhere; }
.st-top-name small { display: block; font-size: .8rem; font-weight: 500; color: var(--st-muted); }
.st-top-pct { font-size: 1.25rem; font-weight: 800; color: var(--z-lime); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .st-top-grid { grid-template-columns: 1fr; } }

/* ---------- Partidos: resumen y filas compactas ---------- */
.z-select-compact { width: auto; min-width: 210px; padding-top: .55rem; padding-bottom: .55rem; }
.z-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.z-summary > div { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; background: var(--z-surface); border: 1px solid var(--z-border); border-radius: 14px; }
.z-summary b { font-size: 1.5rem; font-weight: 800; line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.z-summary span { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--z-muted); }
.z-summary .is-win b { color: var(--z-lime); }
.z-summary .is-loss b { color: var(--z-danger); }
.z-summary .is-draw b { color: #A3A3A3; }

/* Listado de partidos en tarjetas: fecha, tipo y estado arriba; un equipo por fila con
   sus puntos a la derecha (el ganador resaltado); abajo lugar, convocados y «Ver partido».
   El borde izquierdo y la etiqueta de estado llevan el color del resultado (lima victoria,
   rojo derrota, gris empate, ámbar próximo). Toda la tarjeta es pulsable. */
.z-fixtures { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.z-fixture {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-left: 4px solid var(--z-border-strong);
    border-radius: var(--z-radius);
    box-shadow: var(--z-edge);
    transition: border-color .2s var(--z-ease), background-color .2s var(--z-ease);
}
.z-fixture:hover { background-color: var(--z-surface-2); border-color: var(--z-border-strong); }
.z-fixture:focus-within { outline: 2px solid var(--z-lime); outline-offset: 2px; }
.z-fixture.is-win { border-left-color: var(--z-lime); }
.z-fixture.is-loss { border-left-color: var(--z-danger); }
.z-fixture.is-draw { border-left-color: #A3A3A3; }
.z-fixture.is-pending { border-left-color: var(--z-warning); }

.z-fixture-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.z-fixture-date { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; font-size: .88rem; font-weight: 700; color: var(--z-text); white-space: nowrap; }
.z-fixture-date i { color: var(--z-lime); font-size: .85em; }
.z-fixture-type { padding: 3px 9px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--z-text); border: 1px solid var(--z-border-strong); border-radius: 999px; white-space: nowrap; }
.z-fixture-state { padding: 3px 10px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; white-space: nowrap; }
.z-fixture-state.is-win { color: var(--z-ink); background: var(--z-lime); }
.z-fixture-state.is-loss { color: var(--z-ink); background: var(--z-danger); }
.z-fixture-state.is-draw { color: var(--z-ink); background: #C9CBC4; }
.z-fixture-state.is-upcoming { color: var(--z-ink); background: var(--z-warning); }
.z-fixture-state.is-open { color: var(--z-warning); border: 1px solid var(--z-warning); }

.z-fixture-teams { display: grid; gap: 8px; }
.z-fixture-team { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 1rem; font-weight: 700; color: #D9DBD3; }
.z-fixture-team img { width: 36px; height: 36px; flex-shrink: 0; object-fit: cover; border-radius: 50%; background: var(--z-surface-2); border: 1px solid var(--z-border-strong); }
.z-fixture-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-fixture-team.is-own .z-fixture-name { color: #FFFFFF; font-weight: 800; }
.z-fixture-team.is-own img { border-color: var(--z-lime); }
.z-fixture-points { min-width: 2ch; font-size: 1.5rem; font-weight: 800; line-height: 1; text-align: right; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.z-fixture-team.is-loser { color: var(--z-muted); }
.z-fixture-team.is-loser .z-fixture-points { color: var(--z-muted); }
.z-fixture.is-win .z-fixture-team.is-winner .z-fixture-points { color: var(--z-lime); }
.z-fixture.is-loss .z-fixture-team.is-winner .z-fixture-points { color: var(--z-danger); }

.z-fixture-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 32px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--z-border); font-size: .82rem; color: var(--z-muted); }
.z-fixture-meta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.z-fixture-meta i { font-size: .9em; }
.z-fixture-place { display: block; flex: 0 1 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-fixture-place i { margin-right: 6px; }
.z-fixture-actions { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.z-fixture-open { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--z-lime); text-decoration: none; white-space: nowrap; }
.z-fixture-open:hover { color: var(--z-lime-hover); }
.z-fixture-open:focus-visible { outline: none; }
.z-fixture-open i { font-size: .75em; }
.z-fixture .z-fixture-delete { position: relative; top: auto; right: auto; }
.z-wl { color: var(--z-text); background: var(--z-surface-3); }
.z-wl--d { color: var(--z-ink); background: #C9CBC4; }

/* Buscador y filtro por rival encima del listado */
.z-match-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; }
.z-match-filters .z-search { flex: 1 1 260px; max-width: 420px; }
.z-match-filters .z-picker { flex: 0 1 280px; min-width: 200px; }
.z-match-filters-count { font-size: .85rem; color: var(--z-muted); }

@media (max-width: 767.98px) {
    .z-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
    .z-summary > div { flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 0; }
    .z-summary b { font-size: 1.2rem; }
    /* El texto escala con la pantalla para que "Pendientes" quepa en su panel incluso a 320 px */
    .z-summary span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: clamp(.47rem, 2.3vw, .6rem); letter-spacing: 0; }
    .z-select-compact { min-width: 0; width: 100%; }
    .z-page-head .z-actions { width: 100%; }
    .z-page-head .z-actions form { flex: 1; }
    /* Móvil: una tarjeta por fila a todo el ancho, con algo menos de relleno. */
    .z-fixtures { gap: 10px; }
    .z-fixture { gap: 10px; padding: 12px 14px; }
    .z-fixture-team img { width: 32px; height: 32px; }
    .z-match-filters .z-search, .z-match-filters .z-picker { flex: 1 1 100%; max-width: none; }
}

/* ---------- Selector con búsqueda (player-picker.js) ---------- */
.z-picker { position: relative; min-width: 240px; }
.z-picker-input {
    padding-left: 2.6rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 1rem center;
    border-radius: 999px !important;
}
.z-picker-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1040;
    display: none;
    max-height: 320px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    background: var(--z-surface-2);
    border: 1px solid var(--z-border-strong);
    border-radius: 14px;
    box-shadow: var(--z-edge), var(--z-shadow-pop);
}
.z-picker.is-open .z-picker-list { display: block; }
.z-picker-option { padding: 9px 12px; font-weight: 600; border-radius: 8px; cursor: pointer; }
.z-picker-option:hover { background: var(--z-surface-3); }
.z-picker-option.is-active { color: var(--z-ink); background: var(--z-lime); }
.z-picker-option { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.z-picker-meta { flex-shrink: 0; font-size: .75rem; font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
.z-picker.has-toggle .z-picker-input { padding-right: 2.8rem !important; }
.z-picker-toggle { position: absolute; top: 0; right: 4px; display: grid; place-items: center; width: 40px; height: 100%; padding: 0; color: var(--z-muted); background: none; border: 0; cursor: pointer; }
.z-picker-toggle:hover { color: var(--z-lime); }
.z-picker.is-open .z-picker-toggle i { transform: rotate(180deg); }
.z-picker-option[aria-selected="true"]:not(.is-active) { color: var(--z-lime); }
.z-picker-empty { padding: 9px 12px; color: var(--z-muted); }
@media (max-width: 760px) { .z-picker { min-width: 0; width: 100%; } }

/* ---------- Calendario (static/js/date-picker.js) ---------- */
.z-datepicker { position: relative; }
.z-datepicker-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: .7rem 1rem;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    text-align: left;
    color: var(--z-text);
    background: var(--z-surface-2);
    border: 1px solid var(--z-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.z-datepicker-trigger i { color: var(--z-lime); }
.z-datepicker-trigger.is-empty span { font-weight: 500; color: #8C8C8C; }
.z-datepicker-trigger:hover { border-color: var(--z-border-strong); }
.z-datepicker.is-open .z-datepicker-trigger,
.z-datepicker-trigger:focus-visible {
    border-color: var(--z-lime);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--z-lime-rgb), .18);
}
.z-datepicker.is-invalid .z-datepicker-trigger { border-color: var(--z-danger); box-shadow: 0 0 0 3px rgba(255, 92, 99, .18); }

.z-datepicker-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1040;
    display: none;
    width: 320px;
    max-width: 100%;
    padding: 14px;
    background: var(--z-surface-2);
    border: 1px solid var(--z-border-strong);
    border-radius: var(--z-radius);
    box-shadow: var(--z-edge), var(--z-shadow-pop);
}
.z-datepicker.is-open .z-datepicker-pop { display: block; }

.z-datepicker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.z-datepicker-title {
    font-family: var(--z-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #FFFFFF;
}
.z-datepicker-nav {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: .8rem;
    color: var(--z-lime);
    background: var(--z-surface-3);
    border: 1px solid var(--z-border);
    border-radius: 50%;
    cursor: pointer;
}
.z-datepicker-nav:hover { border-color: var(--z-lime); }

.z-datepicker-weekdays,
.z-datepicker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.z-datepicker-weekdays span {
    padding: 4px 0;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    color: var(--z-muted);
}
.z-datepicker-day {
    aspect-ratio: 1;
    padding: 0;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--z-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.z-datepicker-day:hover { background: var(--z-surface-3); }
.z-datepicker-day:focus-visible { outline: none; border-color: var(--z-lime); }
.z-datepicker-day.is-outside { color: #5C5C5C; }
.z-datepicker-day.is-today { color: var(--z-lime); border-color: rgba(var(--z-lime-rgb), .45); }
.z-datepicker-day.is-selected { font-weight: 800; color: var(--z-ink); background: var(--z-lime); border-color: var(--z-lime); }
.z-datepicker-day.is-selected:hover { background: var(--z-lime-hover); }

.z-datepicker-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--z-border);
}
.z-datepicker-foot button {
    padding: 4px 10px;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--z-lime);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
.z-datepicker-foot button:hover { background: var(--z-surface-3); }
.z-datepicker-foot .z-datepicker-clear { color: var(--z-muted); }
@media (max-width: 760px) {
    /* En móvil se abre dentro del formulario para poder hacer scroll por encima de la barra inferior */
    .z-datepicker-pop { position: static; width: 100%; margin-top: 8px; }
}

/* ---------- Selector de jugadores (convocatorias) ---------- */
.z-selector-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.z-selector-tools .z-search { flex: 1 1 240px; }
.z-selector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.z-pick {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    text-transform: none;
    letter-spacing: 0;
    background: var(--z-surface);
    border: 1px solid var(--z-border);
    border-radius: 14px;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s var(--z-ease), background-color .2s var(--z-ease);
}
.z-pick:hover { border-color: var(--z-border-strong); }
.z-pick input { position: absolute; opacity: 0; pointer-events: none; }
.z-pick-check {
    display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px;
    font-size: .75rem; color: transparent; border: 2px solid var(--z-border-strong); border-radius: 50%;
    transition: background-color .12s, border-color .12s;
}
.z-pick-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.z-pick-name { font-size: .95rem; font-weight: 700; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-pick-meta { font-size: .78rem; font-weight: 500; color: var(--z-muted); }
.z-pick-warn { flex-shrink: 0; font-size: .78rem; font-weight: 800; color: var(--z-warning); }
.z-pick:has(input:checked) { background: rgba(var(--z-lime-rgb), .08); border-color: var(--z-lime); }
.z-pick:has(input:checked) .z-pick-check { color: var(--z-ink); background: var(--z-lime); border-color: var(--z-lime); }
.z-pick:has(input:focus-visible) { outline: 2px solid var(--z-lime); outline-offset: 2px; }

.z-selector-bar {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 10px 10px 10px 20px;
    background: rgba(28, 29, 26, .82);
    border: 1px solid var(--z-border-strong);
    border-radius: 999px;
    box-shadow: var(--z-edge), var(--z-shadow-pop);
    backdrop-filter: blur(16px) saturate(140%);
}
.z-selector-bar b { font-size: 1.2rem; color: var(--z-lime); }
.z-selector-bar small { display: block; color: var(--z-muted); }
@media (max-width: 991.98px) {
    .z-selector-bar { bottom: calc(var(--z-nav-h) + 26px); transition: bottom .25s ease; }
    .z-nav-hidden .z-selector-bar { bottom: 16px; }
}
.st-warn-count { color: var(--z-warning); }
.st-table td:nth-child(3) a { white-space: normal; }

/* ---------- Gestionar plantilla ---------- */
.z-roster {
    display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px;
    text-transform: none; letter-spacing: 0;
    background: var(--z-surface); border: 1px solid var(--z-border); border-radius: 14px; cursor: pointer;
    transition: border-color .12s, opacity .12s;
}
/* Fuera del equipo: se atenúa la foto, no el texto (el texto debe mantener contraste 4.5:1) */
.z-roster:not(.is-on) .z-avatar { opacity: .5; }
.z-roster:not(.is-on) .z-pick-name { color: var(--z-muted); }
.z-roster:not(.is-on) .z-avatar { border-color: var(--z-border-strong); }
.z-roster.is-changed { border-color: var(--z-warning); opacity: 1; }
.z-roster .form-switch .form-check-input { width: 2.6em; height: 1.4em; margin: 0; cursor: pointer; }
.form-switch .form-check-input {
    --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='%23A3A3A3'/%3e%3c/svg%3e");
}
.form-switch .form-check-input: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='%230A0A0A'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus: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='%23A3A3A3'/%3e%3c/svg%3e");
}
.z-select-compact { min-width: 150px; }
@media (max-width: 767.98px) {
    .z-selector-bar small { font-size: .72rem; }
}

/* ---------- Resultado de un partido ---------- */
.z-result { max-width: 640px; }
.z-result-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 72px);
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.z-result-head { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--z-lime); }
.z-result-team { overflow: hidden; font-weight: 800; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: #FFFFFF; }
.z-result-team small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; font-weight: 600; color: var(--z-lime); }
.z-result-pair { margin: 4px 0 0; color: var(--z-muted); }
.z-result-pair strong { color: var(--z-text); }
.z-result-grid input { height: 56px; padding: 0; font-size: 1.5rem; font-weight: 800; text-align: center; }
.z-result-grid input:disabled { opacity: .35; cursor: not-allowed; }
.z-result-checks { display: grid; gap: 4px; min-height: 1.5rem; margin: 0 0 12px; padding: 0; list-style: none; font-size: .9rem; }
.z-result-checks li { color: var(--z-muted); }
.z-result-checks .is-ok { color: var(--z-lime); }
.z-result-checks .is-bad { color: var(--z-danger); }
.z-result-checks i { width: 18px; }
@media (max-width: 575.98px) {
    .z-result-grid { grid-template-columns: minmax(0, 1fr) repeat(3, 52px); gap: 8px; }
    .z-result-grid input { height: 50px; font-size: 1.3rem; }
    .z-result-team { font-size: .78rem; }
}

/* ---------- Convocatoria en el detalle del partido ---------- */
.z-call { margin-top: 8px; padding: 18px; background: var(--z-surface); border: 1px solid var(--z-border); border-radius: var(--z-radius); }
.z-call-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; color: var(--z-muted); }
.z-call-head b { font-size: 1.3rem; color: #FFFFFF; }
.z-call-legend { margin-left: auto; font-size: .8rem; }
/* Una fila por posición con los jugadores en varias columnas: la lista no crece tanto con muchos convocados */
.z-call-groups { display: grid; gap: 14px; }
.z-call-group { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 16px; align-items: start; }
.z-call-group + .z-call-group { padding-top: 14px; border-top: 1px solid var(--z-border); }
.z-call-group h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--z-lime); }
.z-call-group h3 span { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; font-size: .75rem; color: var(--z-text); background: var(--z-surface-3); border-radius: 999px; }
.z-call-group ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.z-call-group ul.is-collapsed li:nth-child(n+9) { display: none; }
.z-call-more { margin-top: 8px; padding: 4px 0; font: inherit; font-size: .82rem; font-weight: 700; color: var(--z-lime); background: none; border: 0; cursor: pointer; }
.z-call-more:hover { text-decoration: underline; }
.z-call-group p { margin: 0; font-size: .88rem; color: var(--z-muted); }
.z-chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 10px 4px 4px; font-size: .88rem; font-weight: 600; background: var(--z-surface-2); border: 1px solid var(--z-border); border-radius: 999px; }
.z-chip img { width: 26px; height: 26px; flex-shrink: 0; object-fit: cover; border-radius: 50%; }
.z-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-chip.is-playing { border-color: rgba(var(--z-lime-rgb), .5); }
.z-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; background: var(--z-lime); border-radius: 50%; }
@media (max-width: 767.98px) {
    .z-call-group { grid-template-columns: 1fr; }
    .z-call-group h3 { margin: 0; }
    .z-call-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .z-call .z-chip { gap: 6px; font-size: .78rem; }
    .z-call .z-chip img { width: 22px; height: 22px; }
    .z-call-legend { margin-left: 0; }
}

/* ---------- Advertencias: historial a ancho completo y legible ---------- */
.st-warn-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1100px) { .st-warn-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }
.st-table--wrap th, .st-table--wrap td { white-space: normal; text-align: left; }
.st-table--wrap td:first-child { white-space: nowrap; }
@media (max-width: 575.98px) {
    .st-table--wrap thead { display: none; }
    .st-table--wrap tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--st-line); }
    .st-table--wrap td { padding: 0; border: 0; }
    .st-table--wrap td:nth-child(3) { grid-column: 1 / -1; color: var(--st-muted); }
}

/* Separador "o" y botón de Google en las pantallas de acceso */
.z-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--z-muted); font-size: .85rem; }
.z-or::before, .z-or::after { content: ""; flex: 1; height: 1px; background: var(--z-border); }
.z-google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }

/* Aviso de la portada para registrar la cuenta SNP */
.z-snp-notice { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; border-color: var(--z-lime); }
.z-snp-notice > .fa-trophy { font-size: 1.5rem; color: var(--z-lime); }

/* ---------- Móvil: revisión general ----------
   Acciones de cabecera a todo el ancho, pestañas de estadísticas en una
   fila y filtros (temporada, tipo de partido) deslizables en horizontal. */
@media (max-width: 767.98px) {
    .z-page-head .z-actions > .btn,
    .z-page-head .z-actions > a,
    .z-page-head .z-actions > form { flex: 1 1 150px; }
    .z-page-head .z-actions .btn { width: 100%; white-space: nowrap; }

    .st-tabs.z-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-radius: 20px; }
    .st-tabs.z-segmented .btn {
        display: flex; flex-direction: column; align-items: center; gap: 4px;
        padding: .5rem .15rem; font-size: .6rem; letter-spacing: 0; border-radius: 16px !important;
    }
    .st-tabs.z-segmented .btn i { margin: 0 !important; font-size: .95rem; }

    /* Temporadas y tipo de partido: sin scroll lateral, los chips reparten el ancho
       y si no caben pasan a la línea siguiente (nunca se salen de la pantalla). */
    .st-seasons { gap: 6px; }
    .st-seasons > li { flex: 1 1 auto; min-width: 0; }
    .st-seasons .st-chip { display: block; overflow: hidden; padding: 7px 10px; font-size: .8rem; text-align: center; text-overflow: ellipsis; }
    /* Temporadas: Todas + tres últimas en una sola fila de columnas iguales; si hay una
       temporada antigua elegida (quinto chip), baja a una segunda fila. */
    .st-season-filter .st-seasons { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .st-season-filter .st-seasons:has(> li:nth-child(5)) { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .st-season-filter .st-chip { padding: 7px 4px; font-size: clamp(.7rem, 3.4vw, .85rem); }
    .st-seasons > .st-filter-label { flex-basis: 100%; margin: 0 0 2px; font-size: .7rem; }
    .st-chip { white-space: nowrap; }
}

/* Tablas que en móvil pasan a tarjetas apiladas (miembros, invitaciones) */
@media (max-width: 575.98px) {
    .z-table-stack thead { display: none; }
    .z-table-stack, .z-table-stack tbody, .z-table-stack tr, .z-table-stack td { display: block; width: 100%; }
    .z-table-stack tr { padding: 12px 14px; border-bottom: 1px solid var(--z-border); }
    .z-table-stack tbody tr:last-child { border-bottom: 0; }
    .table.z-table-stack > :not(caption) > * > * { padding: 4px 0; border: 0; text-align: left; }
    .z-table-stack td:first-child { font-weight: 700; color: #FFFFFF; }
    .z-table-stack input, .z-table-stack select, .z-table-stack .z-select-trigger { max-width: none !important; }
    .z-table-stack form.d-flex > * { flex: 1 1 100%; }
    .z-table-stack .text-end .btn { width: 100%; }
}

/* ---------- Formulario de partido: modo y cards de equipo ---------- */
.z-mode { margin: 0 0 18px; padding: 0; background: none; border: 0; border-radius: 0; }
.z-mode legend { float: none; width: auto; margin-bottom: 6px; padding: 0; }
.z-mode-option {
    position: relative;
    margin: 0;
    padding: .5rem 1.2rem;
    font-size: .85rem;
    color: var(--z-muted);
    border-radius: 999px;
    cursor: pointer;
}
.z-mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.z-mode-option.active, .z-mode-option:has(input:checked) { color: var(--z-ink); background: var(--z-lime); }
.z-mode-option:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(var(--z-lime-rgb), .35); }

.z-team-cards { display: grid; gap: 14px; margin: 6px 0 18px; }
.z-team-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 16px 52px 16px 16px;
    text-transform: none;
    letter-spacing: 0;
    background: linear-gradient(90deg, #2E3A1C 0%, #232619 45%, #1A1A1A 100%);
    border: 1px solid var(--z-border);
    border-radius: var(--z-radius-sm);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.z-team-card:hover { border-color: var(--z-border-strong); }
.z-team-card:focus-within { border-color: var(--z-lime); box-shadow: 0 0 0 3px rgba(var(--z-lime-rgb), .18); }
.z-team-card-logo {
    flex: none;
    width: 96px;
    height: 96px;
    padding: 4px;
    border: 4px solid var(--z-lime);
    border-radius: 50%;
    background: var(--z-bg);
    overflow: hidden;
}
.z-team-card-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.z-team-card-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.z-team-card-role { font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--z-lime); }
.z-team-card-name {
    font-family: var(--z-display);
    font-size: 1.6rem;
    font-style: italic;
    line-height: 1.15;
    text-transform: uppercase;
    color: #FFFFFF;
    overflow-wrap: anywhere;
}
.z-team-card-name.is-empty { color: var(--z-muted); font-size: 1.1rem; }
.z-team-card-caret { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--z-lime); }
/* El <select> real cubre toda la card: al pulsarla se abre el desplegable de equipos. */
.z-team-card select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
@media (max-width: 575.98px) {
    .z-team-card { gap: 14px; padding: 12px 40px 12px 12px; }
    .z-team-card-logo { width: 64px; height: 64px; border-width: 3px; padding: 3px; }
    .z-team-card-name { font-size: 1.1rem; }
    .z-team-card-caret { right: 14px; }
}

/* Estadísticas: selector de tipo dentro de "Competitivos" */
.st-type-filter .st-seasons:has(+ .st-type-select) { margin-bottom: 10px; }
.st-type-select { margin: 0 0 20px; }
.st-type-select select, .st-type-select .z-select-trigger { width: auto; min-width: 220px; max-width: 100%; padding-top: 7px; padding-bottom: 7px; font-size: .85rem; font-weight: 700; border-radius: 999px; }

/* Estadísticas: selector de temporadas (Todas + tres últimas + buscador) */
.st-season-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 20px; }
.st-season-filter .st-seasons { margin: 0; }
.st-season-search { flex: 0 1 240px; }
.st-season-search .z-picker { min-width: 0; }
.st-season-search .z-picker-input { padding-top: 7px; padding-bottom: 7px; font-size: .85rem; font-weight: 700; }
@media (max-width: 767.98px) {
    .st-season-filter { display: block; }
    .st-season-search { margin-top: 10px; }
}

/* ---------- Gestionar equipos ---------- */
.z-bulk {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 14px;
    background: var(--z-surface); border: 1px solid var(--z-border); border-radius: 14px;
}
.z-bulk .form-check { display: flex; align-items: center; gap: 8px; margin-right: auto; padding-left: 0; }
.z-bulk .form-check-input { margin: 0; }
.z-bulk .form-select { width: auto; min-width: 130px; }
.z-team-rows { display: flex; flex-direction: column; gap: 8px; }
.z-team-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 14px;
    background: var(--z-surface); border: 1px solid var(--z-border); border-radius: 14px;
}
.z-team-row.is-changed { border-color: var(--z-warning); }
.z-team-row.has-error { border-color: var(--z-danger); }
.z-team-row > .text-danger { flex-basis: 100%; }
.z-team-row-head { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; }
.z-team-row-head .form-check-input { flex-shrink: 0; margin: 0; }
.z-team-row-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.z-team-row-fields .form-select { width: auto; min-width: 120px; }
.z-team-row-group, .z-bulk .form-check { text-transform: none; letter-spacing: 0; }
.z-team-row-group { display: flex; align-items: center; gap: 8px; padding-left: 0; white-space: nowrap; }
.z-team-row-group .form-check-input { width: 2.6em; height: 1.4em; margin: 0; cursor: pointer; float: none; }
@media (max-width: 767.98px) {
    .z-bulk .form-check { flex-basis: 100%; }
    .z-bulk .form-select { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .z-bulk [data-teams-apply] { flex-basis: 100%; }
    .z-team-row-fields { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .z-team-row-fields .form-select { width: 100%; min-width: 0; }
}

/* ---------- «¿Quién eres en el equipo?» (link_player.html) ---------- */
.z-claim {
    display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px;
    background: var(--z-surface); border: 1px solid var(--z-border); border-radius: 14px;
    transition: border-color .12s, background-color .12s;
}
.z-claim[hidden] { display: none; }
.z-claim.is-free { border-color: var(--z-lime); background: rgba(var(--z-lime-rgb), .08); }
.z-claim .z-pick-name { white-space: normal; overflow-wrap: anywhere; }
.z-claim.is-free .z-pick-name { color: var(--z-lime); }
.z-claim.is-free .z-avatar { border-color: var(--z-lime); }
.z-claim.is-taken { opacity: .45; }
.z-claim.is-taken .z-pick-name { color: var(--z-muted); }
.z-claim-lock { flex-shrink: 0; color: var(--z-muted); padding: 0 6px; }
.z-claim-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .82rem; color: var(--z-muted); }
.z-claim-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.z-claim-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.z-claim-dot.is-free { background: var(--z-lime); }
.z-claim-dot.is-taken { background: var(--z-border-strong); }
.z-claim-confirm-name { font-size: 1.15rem; font-weight: 800; color: var(--z-lime); margin-bottom: .75rem; }

/* ---------- Ajuste de la foto en el círculo (static/js/photo-crop.js) ---------- */
.z-crop-field { display: flex; align-items: center; gap: 12px; }
.z-crop-field .form-control { flex: 1; min-width: 0; }
.z-crop-stage {
    position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto;
    overflow: hidden; touch-action: none; cursor: grab; user-select: none;
    background: repeating-conic-gradient(#202020 0 25%, #171717 0 50%) 0 0 / 20px 20px;
    border-radius: 14px;
}
.z-crop-stage:active { cursor: grabbing; }
.z-crop-stage:focus-visible { outline: 2px solid var(--z-lime); outline-offset: 3px; }
.z-crop-stage canvas { display: block; width: 100%; height: 100%; }
.z-crop-ring {
    position: absolute; inset: 8%; pointer-events: none;
    border: 2px solid var(--z-lime); border-radius: 50%;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, .6);
}
.z-crop-zoom { display: flex; align-items: center; gap: 10px; width: min(100%, 360px); margin: 16px auto 0; }
.z-crop-zoom .form-range { flex: 1; }
.z-crop-zoom .form-range::-webkit-slider-thumb { background-color: var(--z-lime); }
.z-crop-zoom .form-range::-moz-range-thumb { background-color: var(--z-lime); }
.z-crop-zoom .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--z-bg), 0 0 0 .25rem rgba(var(--z-lime-rgb), .25); }

/* ---------- Avisos de error en popup (core/templates/includes/messages_popup.html) ---------- */
.z-messages-modal .modal-header { gap: 12px; justify-content: flex-start; }
.z-messages-modal .modal-header .btn-close { margin-left: auto; }
.z-messages-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; font-size: 1.1rem; color: var(--z-ink);
    background: var(--z-danger); border-radius: 50%;
}
.z-messages-icon.is-warning { background: var(--z-warning); }
.z-messages-list { margin: 0; padding: 0; list-style: none; }
.z-messages-list li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--z-border); }

/* Notificaciones de confirmación (éxito, información) */
.z-toasts { z-index: 1090; width: min(100%, 460px); margin-top: 56px; }
.z-toast {
    --bs-toast-max-width: 100%;
    width: 100%; padding: 14px 16px; color: var(--z-text); font-weight: 600;
    background: var(--z-surface-2); border: 1px solid var(--z-border); border-left: 4px solid var(--z-muted);
    border-radius: 12px; box-shadow: var(--z-edge), var(--z-shadow-pop);
}
.z-toast.is-success { border-left-color: var(--z-lime); }
.z-toast-icon { margin-top: 3px; color: var(--z-muted); }
.z-toast.is-success .z-toast-icon { color: var(--z-lime); }

/* Tarjeta de la cuenta SNP */
.z-snp-card { max-width: 560px; }
.z-snp-fields { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 16px; align-items: center; }
.z-snp-fields dt { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--z-muted); }
.z-snp-fields dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.z-snp-password { display: flex; align-items: center; gap: 4px; }
.z-snp-password .z-password-toggle { width: 2.5rem; height: 2rem; border-radius: 8px; }
@media (max-width: 480px) {
    .z-snp-fields { grid-template-columns: 1fr; gap: 2px; }
    .z-snp-fields dd { margin-bottom: 8px; }
}

/* ---------- Portada: primeros pasos del club nuevo (core.onboarding) ---------- */
.z-onboarding { margin-top: 2rem; margin-bottom: 24px; border-color: var(--z-lime); }
.z-onboarding-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.z-onboarding-head h2 { font-size: 1.15rem; margin: 4px 0 0; }
.z-onboarding-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.z-onboarding-steps li {
    display: flex; align-items: center; gap: 12px; padding: 12px;
    background: var(--z-surface-2); border: 1px solid var(--z-border); border-radius: var(--z-radius-sm);
}
.z-onboarding-check { font-size: 1.25rem; color: var(--z-muted); flex: none; }
.z-onboarding-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.z-onboarding-text span { color: var(--z-muted); font-size: .9rem; }
.z-onboarding-steps .btn { flex: none; white-space: nowrap; }
.z-onboarding-steps li.is-done .z-onboarding-check { color: var(--z-lime); }
.z-onboarding-steps li.is-done strong { text-decoration: line-through; color: var(--z-muted); }
@media (max-width: 575.98px) {
    .z-onboarding-steps li { flex-wrap: wrap; }
    .z-onboarding-steps .btn { width: 100%; }
}

/* Por número de partido, sets, récords y ranking SNP (estadísticas) */
.st-numbers { margin: 4px 0 0; padding: 0; list-style: none; }
.st-number .st-split-head small { font-weight: 500; color: var(--st-muted); }
.st-number--best .st-split-head b { color: var(--z-lime); }
.st-number--worst .st-meter span { background: var(--st-loss); }
.st-numbers-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--st-line); }
.st-facts--sets { grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr)); gap: 10px; margin-top: 16px; }
.st-facts--sets .st-fact { padding: 12px; }
.st-facts--sets dt { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--st-muted); }
.st-facts--sets dd { margin: 4px 0 0; font-size: 1.35rem; font-weight: 800; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.st-facts--sets .st-fact-name { font-size: 1rem; overflow-wrap: anywhere; }
.st-sets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 22px; }
.st-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.st-record-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px; background: var(--st-card); border: 1px solid var(--st-line); border-radius: 16px; }
.st-record-tile b { font-size: 1.35rem; font-weight: 800; line-height: 1.2; color: #FFFFFF; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.st-record-tile b.st-up { color: var(--st-win); }
.st-record-tile b.st-down { color: var(--st-loss); }
.st-record-tile small { font-size: .85rem; color: var(--st-muted); }
.st-record-tile small a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.st-snp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 16px; align-items: start; }
.st-snp-table td:first-child { width: 2.5em; color: var(--st-muted); }
@media (max-width: 760px) { .st-snp-layout { grid-template-columns: minmax(0, 1fr); } }

/* Alineación sugerida en el formulario de parejas */
.z-lineup-suggest { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; padding: 14px 16px; background: rgba(var(--z-lime-rgb), .06); border: 1px solid rgba(var(--z-lime-rgb), .3); border-radius: 14px; }
.z-lineup-suggest-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.z-lineup-suggest [data-suggest-info] { color: var(--z-muted); }
.st-snp-table th[scope="row"], .st-snp-table thead th:nth-child(2) { text-align: left; }
.st-snp-table th[scope="row"] { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .st-snp-table th, .st-snp-table td { padding: 10px 6px; font-size: .9rem; }
  .st-facts--sets dd { font-size: 1.1rem; }
}

/* Avisos con icono (p. ej. la posición en pista tras traer jugadores de SNP) */
.z-callout { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; font-size: .9rem; color: var(--z-text); background: rgba(var(--z-lime-rgb), .08); border: 1px solid rgba(var(--z-lime-rgb), .35); border-radius: 12px; }
.z-callout > i { margin-top: 3px; color: var(--z-lime); }

/* Registro del club: elegir cómo se crea el jugador del capitán */
.z-choice { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
.z-choice-option { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 12px 14px; cursor: pointer; background: var(--z-surface-2); border: 1px solid var(--z-border); border-radius: 12px; }
.z-choice-option:has(input:checked) { border-color: var(--z-lime); background: rgba(var(--z-lime-rgb), .07); }
.z-choice-option input { accent-color: var(--z-lime); }
.z-choice-option, .z-choice-option small { margin: 0; text-transform: none; letter-spacing: normal; }
.z-choice-option span { font-weight: 700; color: var(--z-text); }
.z-choice-option small { grid-column: 2; font-size: .8rem; color: var(--z-muted); }

/* Espera mientras se trae el equipo de SNP tras registrar el club */
.z-welcome-snp { text-align: center; }
.z-welcome-spinner { margin: 8px 0 18px; color: var(--z-lime); }

/* ---------- «Mi perfil» (core/templates/my_profile.html) ---------- */
.z-account { max-width: 720px; }
.z-account-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--z-border); }
.z-account-row:first-of-type { border-top: 0; padding-top: 0; }
.z-account-row > i { width: 1.25rem; text-align: center; color: var(--z-lime); }
.z-account-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.z-account-label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--z-muted); }
.z-account-value { font-weight: 600; overflow-wrap: anywhere; }
.z-account-note { font-size: .82rem; color: var(--z-muted); }
.z-account-row > .btn { flex-shrink: 0; }
.z-account-form { max-width: 420px; }
a.z-account-player { color: inherit; text-decoration: none; }
a.z-account-player:hover { background: rgba(var(--z-lime-rgb), .14); }
a.z-account-player .btn { flex-shrink: 0; }
@media (max-width: 575.98px) {
    .z-account-btn-text { display: none; }
    .z-account-row > .btn, a.z-account-player .btn { width: 2.5rem; height: 2.5rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
}
.z-row-link { cursor: pointer; }

/* ---------- Desplegable propio de los <select> (static/js/custom-select.js) ---------- */
.z-select { display: contents; }
/* El <select> real sigue en el DOM (fuente de verdad del formulario) pero no se ve ni se pulsa */
select.z-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
}
.z-select-trigger { text-align: left; line-height: 1.5; text-transform: none; letter-spacing: normal; }
.z-select-trigger .z-select-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-select-trigger.is-placeholder { color: var(--z-muted); }
.z-select-trigger:disabled { opacity: .55; cursor: not-allowed; }
.z-select.is-open > .z-select-trigger { border-color: var(--z-lime); box-shadow: 0 0 0 4px rgba(var(--z-lime-rgb), .16); }
.z-select.is-open > .z-select-trigger { background-position: right 1rem center; }
.z-select-list {
    position: fixed;
    z-index: 1060;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    color: var(--z-text);
    background: var(--z-surface-2);
    border: 1px solid var(--z-border-strong);
    border-radius: 14px;
    box-shadow: var(--z-edge), var(--z-shadow-pop);
}
.z-select-list[hidden] { display: none; }
.z-select-option {
    padding: 9px 12px;
    font-size: .95rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.z-select-option.is-empty { color: var(--z-muted); }
.z-select-option[aria-selected="true"]:not(.is-active) { color: var(--z-lime); }
.z-select-option[aria-selected="true"]::after { content: "\2713"; float: right; margin-left: 12px; font-weight: 800; }
.z-select-option.is-active { color: var(--z-ink); background: var(--z-lime); }
.z-select-option.is-disabled { opacity: .4; cursor: not-allowed; }
.z-select-option.is-disabled.is-active { color: inherit; background: none; }
.z-select-group { padding: 8px 12px 4px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--z-muted); }
/* Card de equipo del formulario de partido: el botón transparente cubre toda la card */
.z-team-card .z-select-trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}