/* ── css/base.css ── */
/* =========================================================
   BASE / IDENTIDAD UPLAY – ACADEMIA BOGADO
========================================================= */

:root {
    /* Brand colors */
    --blue-900: #0b1c2d;
    --blue-800: #12314f;
    --blue-700: #1f4b75;

    --lime-500: #b6d400;
    --lime-400: #cbe800;

    --white: #ffffff;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;

    /* Status colors */
    --success: #22c55e;
    --warning: #f59e0b;
    --danger:  #ef4444;
    --info:    #38bdf8;

    /* Semantic colors */
    --bg-body: var(--blue-900);
    --bg-surface: var(--blue-800);
    --bg-hover: var(--blue-700);

    --text-primary: var(--white);
    --text-secondary: var(--gray-300);
    --text-muted: var(--gray-400);

    --accent: var(--lime-500);
    --accent-hover: var(--lime-400);

    /* Layout */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 16px;

    --gap-xs: 0.25rem;
    --gap-sm: 0.5rem;
    --gap: 1rem;
    --gap-lg: 2rem;

    /* Typography */
    --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* -------------------------
   Reset básico
-------------------------- */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-main);
    background-color: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -------------------------
   Tipografía base
-------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.5rem 0;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

p {
    margin: 0 0 1rem 0;
    color: var(--text-secondary);
}

small {
    color: var(--text-muted);
}

/* -------------------------
   Enlaces
-------------------------- */

a {
    color: var(--accent);
    text-decoration: none;
}

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

/* -------------------------
   Helpers universales
-------------------------- */

.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-info    { color: var(--info); }

.fw-bold { font-weight: 700; }
.fw-semibold { font-weight: 600; }

.hidden {
    display: none !important;
}

/* -------------------------
   Normalización inputs
-------------------------- */

button,
input,
select,
textarea {
    font-family: var(--font-main);
    font-size: 1rem;
}

/* ── css/layout.css ── */
/* =========================================================
   LAYOUT / ESTRUCTURA GENERAL
========================================================= */

/* -------------------------
   Página base
-------------------------- */

.page {
    min-height: 100vh;
    padding: var(--gap-lg);
}

.page-login,
.page-dashboard,
.page-ranking,
.page-profile,
.page-admin {
    /* variantes futuras */
}

/* -------------------------
   App containers
-------------------------- */

.app-container,
.uplay-app,
.admin-layout {
    max-width: 1280px;
    margin: 0 auto;
}

/* Reserva espacio para que el botón flotante de soporte (WhatsApp, fixed
   bottom-right) y la barra de tabs inferior nunca tapen el último
   contenido real de la página. */
.app-container {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

/* -------------------------
   Barra de tabs inferior (solo usuarios logueados)
-------------------------- */
.uplay-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(11, 28, 45, 0.97);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}

.uplay-tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.45);
    font-family: inherit;
    padding: 4px 2px;
    cursor: pointer;
}

.uplay-tabbar-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.uplay-tabbar-label {
    font-size: 0.62rem;
    font-weight: 500;
}

.uplay-tabbar-item.active {
    color: var(--accent, #b6d400);
}

@media (min-width: 900px) {
    .uplay-tabbar {
        display: none;
    }
    .app-container {
        padding-bottom: 0;
    }
}

/* -------------------------
   Header de página
-------------------------- */

.page-header {
    margin-bottom: var(--gap-lg);
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.page-subtitle {
    margin-top: var(--gap-xs);
    color: var(--text-muted);
}

.page-actions {
    margin-top: var(--gap);
}

/* -------------------------
   Secciones
-------------------------- */

.section,
.section-card,
.section-uplay {
    margin-bottom: var(--gap-lg);
}

.section-header,
.section-card-header {
    margin-bottom: var(--gap);
}

.section-title,
.section-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.section-sub,
.section-card-meta {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.section-body {
    display: block;
}

.section-actions {
    margin-top: var(--gap);
}

/* =========================================================
   LAYOUT / PANEL
========================================================= */

body {
    background: radial-gradient(circle at top left, #1f2933 0, #050812 55%);
    overflow-x: hidden;
}

/* SIDEBAR */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100%;
    background: linear-gradient(180deg, #050812, #10141e);
    padding: 20px 16px;
    z-index: 2000;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.55);
    overflow-y: auto; /* 🔧 FIX: Permitir scroll si hay muchos links */
    -webkit-overflow-scrolling: touch; /* 📱 Smooth scroll en iOS */
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo-title {
    font-weight: 800;
    letter-spacing: .08em;
    font-size: .85rem;
    text-transform: uppercase;
}

.sidebar-logo-sub {
    font-size: .75rem;
    color: var(--text-muted);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: .95rem;
    border-radius: var(--radius);
    transition: .18s;
}

.sidebar a:hover {
    color: #fff;
    background: linear-gradient(90deg,
            rgba(182, 212, 0, .15),
            rgba(0, 95, 163, .45));
}

.sidebar-section-title {
    margin: 14px 6px 6px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .45);
}

.logout-btn {
    color: #ff9a9a !important;
}

/* TOPBAR */
.topbar {
    background: rgba(10, 16, 26, 0.96);
    backdrop-filter: blur(14px);
    height: 64px;
    padding: 0 20px;
    margin-left: 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 1500;
}

.topbar-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.topbar-sub {
    font-size: .8rem;
    color: var(--text-muted);
}

main {
    margin-left: 260px;
    padding: 24px 18px 32px;
}

/* =========================================================
   NAVBAR (GLOBAL)
========================================================= */

.navbar {
    position: sticky;
    top: 0;
    height: 64px;
    display: flex;
    align-items: center;
    background: rgba(10, 16, 26, 0.95);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1200;
}

.nav-inner {
    width: 100%;
    max-width: 1200px;
    /* 👈 evita que se estire infinito */
    margin: 0 auto;
    padding: 0 1rem;

    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.navbar-left,
.navbar-center,
.navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.navbar-left {
    flex-shrink: 0;
}

.navbar-center {
    flex: 1;
    justify-content: center;
}

.navbar-center a {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

.navbar-actions {
    flex-shrink: 0;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.navbar-logo {
    height: 32px;
    width: auto;
    max-width: 120px;
    /* Evita que se estire infinito en horizontal */
    object-fit: contain;
    /* Preserva aspect ratio */
    display: block;
    /* Evita problemas de baseline en flex */
}

.brand-text {
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.navbar-user:hover {
    background: rgba(255, 255, 255, 0.05);
}

.navbar-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-primary);
    line-height: 1;
}

.navbar-mobile {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #050812, #10141e);
    padding: 1rem;
    z-index: 1100;
}

.navbar-user:hover .navbar-user-menu,
.navbar-user:focus-within .navbar-user-menu {
    display: flex;
}

.navbar-user-menu a {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
}

.navbar-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;

    display: none;
    /* 👈 CLAVE */
    flex-direction: column;
    min-width: 160px;

    background: linear-gradient(180deg, #050812, #10141e);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.35rem;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    z-index: 1300;
}


.navbar-user-menu a:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ===============================
   NAVBAR - NOTIFICACIONES (MEJORADO)
=============================== */

.navbar-bell {
    position: relative;
    transition: transform 0.2s ease;
}

.navbar-bell:hover {
    transform: scale(1.05);
}

/* Badge contador */
.navbar-bell .badge {
    font-size: 0.65rem;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* oculto por defecto */
.navbar-bell+.dropdown-menu,
.navbar-notifications {
    display: none;
}

/* visible al hover / focus */
.navbar-bell:hover+.dropdown-menu,
.navbar-bell:focus-within+.dropdown-menu,
.dropdown-menu:hover {
    display: block;
}

/* 🔧 FIX CRÍTICO: Visible cuando JS agrega clase .open (mobile táctil) */
.navbar-notifications.open {
    display: block !important;
}

/* Dropdown container */
.navbar-notifications {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 340px;
    max-width: 400px;
    max-height: 480px;
    overflow-y: auto;

    background: linear-gradient(180deg, #0a0f1a, #141922);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.05);

    padding: 0;
    z-index: 1300;

    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;

    /* Animación de entrada */
    animation: notificationSlideIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar-notifications::-webkit-scrollbar {
    width: 6px;
}

.navbar-notifications::-webkit-scrollbar-track {
    background: transparent;
}

.navbar-notifications::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.navbar-notifications::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Header */
.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #0a0f1a, #0d1218);
    z-index: 10;
}

.notifications-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.notifications-mark-all {
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.notifications-mark-all:hover {
    background: rgba(182, 212, 0, 0.1);
    color: var(--accent-hover);
}

/* Lista de notificaciones */
.navbar-notifications ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Item individual */
.notification-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item.unread {
    background: rgba(182, 212, 0, 0.03);
}

.notification-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    text-decoration: none;
    color: var(--text-primary);
    position: relative;
    transition: all 0.2s ease;
}

.notification-link:hover {
    background: rgba(255, 255, 255, 0.04);
}

.notification-item.unread .notification-link:hover {
    background: rgba(182, 212, 0, 0.08);
}

/* Badge punto "no leída" */
.notification-badge {
    position: absolute;
    left: 0.75rem;
    top: 1.125rem;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(182, 212, 0, 0.2);
}

/* Contenido */
.notification-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 0.5rem;
}

.notification-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.notification-message {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.notification-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
    opacity: 0.7;
}

/* Empty state */
.notifications-empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.notifications-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.notifications-empty-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .navbar-notifications {
        /* 🔧 FIX: Usar fixed para evitar desbordes relativos al botón */
        position: fixed;
        top: 70px;
        left: 1rem;
        right: 1rem;
        width: auto;
        min-width: unset;
        max-height: 70vh;
        z-index: 2000;

        /* Sombra más fuerte en mobile para separar del fondo */
        box-shadow: 0 10px 100px rgba(0, 0, 0, 0.8);
    }

    .notifications-header {
        padding: 1rem;
    }

    .notification-link {
        padding: 1rem;
    }
}

@media (max-width: 900px) {
    .navbar-center {
        display: none;
    }
}

/* =========================================================
   NAVBAR - MOBILE OPTIMIZATION
========================================================= */

@media (max-width: 768px) {

    /* Truncar nombre de usuario para evitar overflow */
    .navbar-user-name {
        font-size: 0.8rem;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Mejorar targets táctiles (WCAG 44px mínimo) */
    .navbar-toggle,
    .navbar-bell {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Reducir padding para aprovechar espacio */
    .nav-inner {
        padding: 0 0.75rem;
    }
}

@media (max-width: 480px) {

    /* Ocultar texto "UPLAY" en mobile pequeño (logo es suficiente) */
    .brand-text {
        display: none;
    }

    /* Nombre de usuario aún más compacto */
    .navbar-user-name {
        max-width: 60px;
        font-size: 0.75rem;
    }

    /* Aprovechar bordes de pantalla */
    .nav-inner {
        padding: 0 0.5rem;
    }

    /* Reducir gap en navbar-left */
    .navbar-left {
        gap: 0.5rem;
    }
}
/* ── css/components.css ── */
/* =========================================================
   COMPONENTS / UI CORE
========================================================= */

/* -------------------------
   Buttons
--------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    height: 42px;
    padding: 0 1.25rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-primary);
    /* 🆕 UX: Easing premium para microinteracciones suaves */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-sm {
    height: 34px;
    padding: 0 0.75rem;
    font-size: 0.85rem;
}

.btn-lg {
    height: 48px;
    padding: 0 1.75rem;
    font-size: 1rem;
}

.btn-primary {
    background: var(--accent);
    color: #0b1c2d;
}

/* 🆕 UX: Hover con lift effect y glow */
.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(182, 212, 0, 0.4);
}

/* 🆕 UX: Feedback visual al hacer click */
.btn-primary:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(182, 212, 0, 0.3);
}

.btn-secondary {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--blue-700);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.btn-secondary:active {
    transform: scale(0.98);
}

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

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.btn-danger:active {
    transform: scale(0.98);
}

.btn-warning {
    background: var(--warning);
    color: #111;
}

.btn-warning:hover {
    background: #f59e0b;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.btn-warning:active {
    transform: scale(0.98);
}

.btn-success {
    background: var(--success);
    color: #fff;
}

.btn-success:hover {
    background: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

.btn-success:active {
    transform: scale(0.98);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--bg-hover);
}

/* 🆕 UX: Ghost button con hover más expresivo */
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
}

.btn-ghost:active {
    transform: scale(0.98);
}

.btn-link {
    background: none;
    padding: 0;
    height: auto;
    color: var(--accent);
}

.btn-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Legacy button absorption */
.btn-auth,
.btn-uplay,
.btn-uplay-primary {
    background: var(--accent);
    color: #0b1c2d;
}

.btn-auth:hover,
.btn-uplay:hover,
.btn-uplay-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(182, 212, 0, 0.4);
}

.btn-admin,
.btn-uplay-secondary {
    background: var(--bg-hover);
}

.btn-admin:hover,
.btn-uplay-secondary:hover {
    background: var(--blue-700);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Outline button variants (dashboard) */
.btn-outline-light {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--text-primary);
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-warning {
    background: transparent;
    border: 1px solid var(--warning);
    color: var(--warning);
}

.btn-outline-warning:hover {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
}

/* Estaba solo en bootstrap-shim.css, que las pantallas nuevas no cargan --
   así que los botones destructivos (eliminar torneo, limpiar partidos)
   quedaban sin ningún color: el botón más peligroso de la app se veía como
   un link inofensivo. */
.btn-outline-danger {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
}

.btn-outline-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: #f87171;
}

/* 🆕 UX: Estados disabled y focus mejorados */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* 🆕 UX: Focus visible para accesibilidad */
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* -------------------------
   Cards
-------------------------- */

.card,
.card-uplay,
.quick-card {
    background: var(--bg-surface);
    border-radius: var(--radius);
    padding: var(--gap);
}

.card-header {
    font-weight: 600;
    margin-bottom: var(--gap-sm);
}

.card-body {
    display: block;
}

.card-footer {
    margin-top: var(--gap);
}

/* -------------------------
   Section Card (canonical)
-------------------------- */

/*
 Bloque estructural canónico para secciones principales.
 - No reemplaza .card
 - No pisa estilos existentes
 - Uso progresivo y opt-in
*/

.section-card {
    background: var(--bg-surface);
    border: 1px solid var(--bg-hover);
    border-radius: var(--radius);
    padding: var(--gap);
    margin-bottom: var(--gap-lg);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.section-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Variante compacta (opcional) */
.section-card.section-sm {
    padding: var(--gap-sm);
    margin-bottom: var(--gap);
}

/* Variante destacada (opcional, sin colores de estado) */
.section-card.section-highlight {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0));
}

/* 🆕 UX: CARD MODIFIERS - Estados funcionales para jerarquía visual */

/*
  Modifier: Card de acción (secciones con botones primarios)
  Uso: <div class="section-card section-card--action">
*/
.section-card--action {
    background: linear-gradient(135deg,
            rgba(182, 212, 0, 0.05),
            rgba(0, 95, 163, 0.08));
    border-color: rgba(182, 212, 0, 0.25);
    box-shadow: 0 0 0 1px rgba(182, 212, 0, 0.1);
}

/*
  Modifier: Card de alerta (alertas críticas, requiere atención inmediata)
  Uso: <div class="section-card section-card--alert">
*/
.section-card--alert {
    background: linear-gradient(135deg,
            rgba(239, 68, 68, 0.05),
            rgba(239, 68, 68, 0.02));
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

/*
  Modifier: Card de información (resúmenes, métricas, info estática)
  Uso: <div class="section-card section-card--info">
*/
.section-card--info {
    background: var(--bg-surface);
    border-color: rgba(255, 255, 255, 0.06);
    /* Mantiene estilo por defecto, explícito para semántica */
}

/*
  Modifier: Card destacado (importante pero no urgente)
  Uso: <div class="section-card section-card--highlight">
*/
.section-card--highlight {
    background: linear-gradient(135deg,
            rgba(182, 212, 0, 0.08),
            rgba(0, 95, 163, 0.12));
    border-color: rgba(182, 212, 0, 0.25);
    box-shadow:
        0 0 0 1px rgba(182, 212, 0, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.25);
}

/*
  Modifier: Card de warning (advertencia, requiere atención media)
  Uso: <div class="section-card section-card--warning">
*/
.section-card--warning {
    background: linear-gradient(135deg,
            rgba(245, 158, 11, 0.05),
            rgba(245, 158, 11, 0.02));
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.15);
}

/*
  Modifier: Card de éxito (confirmación, estado positivo)
  Uso: <div class="section-card section-card--success">
*/
.section-card--success {
    background: linear-gradient(135deg,
            rgba(34, 197, 94, 0.05),
            rgba(34, 197, 94, 0.02));
    border-color: rgba(34, 197, 94, 0.25);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.1);
}

/* -------------------------
   Match (Base Component) 🎾
-------------------------- */
.match {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    padding: 1rem;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

/* Variante: Flat (Legacy feel, para listados masivos) */
.match--flat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Variante: Premium (Dashboard feel, para torneos y destacados) */
.match--premium {
    background: var(--bg-surface-light, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.1));
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.match--premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    border-color: rgba(182, 212, 0, 0.3);
}

/* -------------------------
   Tarjeta de partido unificada 🎾
   (components/_match_card.html) — un solo lugar para el look de
   "mostrar un partido", en vez de reimplementarlo por página.
-------------------------- */
.uplay-match-card {
    display: block;
    text-decoration: none;
    color: inherit;
    /* .section-card trae 2rem de margin-bottom para separar secciones de
       página — de más para tarjetas en grilla, que ya tienen su gutter. */
    margin-bottom: 0.75rem;
}

.uplay-match-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.uplay-match-card-extra {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}

.uplay-match-card-jugadores {
    min-width: 0;
}

.uplay-match-card-jugador {
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.uplay-match-card-jugadores.is-winner .uplay-match-card-jugador {
    color: var(--accent);
    font-weight: 700;
}

.uplay-match-card-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 0.45rem 0;
}

.uplay-match-card-score {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.uplay-match-card-score span {
    background: rgba(182, 212, 0, 0.15);
    border-radius: var(--radius-sm);
    padding: 1px 7px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
}

.uplay-match-card-meta {
    margin-top: 0.55rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* En pantallas angostas el padding anidado (página + tarjeta de zona +
   columna) dejaba menos del 75% del ancho útil para los nombres. */
@media (max-width: 600px) {
    .page-zonas {
        padding-left: 0;
        padding-right: 0;
    }

    .page-zonas .zona-card {
        padding: 0.75rem;
    }

    .uplay-match-card {
        padding: 0.75rem;
    }

    .uplay-match-card-jugador {
        font-size: 0.85rem;
    }
}

/* -------------------------
   Alerts
-------------------------- */

.alert {
    padding: var(--gap-sm) var(--gap);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.alert-success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.alert-info {
    background: rgba(56, 189, 248, 0.15);
    color: var(--info);
}

/* -------------------------
   Badges
-------------------------- */

.badge,
.badge-uplay,
.badge-status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 999px;
    font-weight: 600;
}

.badge-success {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.badge-info {
    background: rgba(56, 189, 248, 0.2);
    color: var(--info);
}

.badge-soft {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius);
    color: var(--text-primary);
}

/* -------------------------
   Pills
-------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.pill-info {
    background: rgba(56, 189, 248, 0.2);
    color: var(--info);
}

.pill-warn {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.pill-sm {
    font-size: 0.7rem;
}

/* -------------------------
   Empty states
-------------------------- */

.empty-state {
    text-align: center;
    padding: var(--gap-lg);
}

.empty-title {
    font-weight: 600;
}

.empty-sub {
    margin-top: var(--gap-xs);
    color: var(--text-muted);
}

.empty-actions {
    margin-top: var(--gap);
}

/* -------------------------
   Tables (base)
-------------------------- */

.table,
.table-uplay,
.table-minimal {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.75rem;
    text-align: left;
}

/* =========================================================
   FORMS & INPUTS
========================================================= */

/* -------------------------
   Form container
-------------------------- */

.form,
.reg-form {
    display: block;
    width: 100%;
}

/* -------------------------
   Form group
-------------------------- */

.form-group,
.pass-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    margin-bottom: var(--gap);
}

/* -------------------------
   Labels & help
-------------------------- */

.form-label,
label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-help {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* -------------------------
   Inputs & selects
-------------------------- */

.form-control,
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--bg-hover);
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.15s ease;
}

.form-control:focus,
.input:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(182, 212, 0, 0.15);
}

/* -------------------------
   Selects
-------------------------- */

.form-select,
select {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--bg-hover);
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* -------------------------
   Select dropdown options (dark mode)
-------------------------- */

select option {
    background-color: #0d1b2a;
    /* mismo tono que cards */
    color: var(--text-primary);
}

/* Hover / selected */
select option:hover,
select option:checked {
    background-color: var(--accent);
    color: #000;
}

/* -------------------------
   Small variants (legacy)
-------------------------- */

.form-control-sm,
.form-select-sm {
    padding: 0.45rem 0.6rem;
    font-size: 0.8rem;
}

/* -------------------------
   Checkboxes & radios
-------------------------- */

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check-input {
    accent-color: var(--accent);
}

.form-check-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* -------------------------
   Switch (toggle)
-------------------------- */

.form-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* -------------------------
   Form actions
-------------------------- */

.form-actions,
.confirmar-area {
    margin-top: var(--gap);
    display: flex;
    gap: var(--gap-sm);
    justify-content: flex-end;
}

/* -------------------------
   Password toggle helper
-------------------------- */

.toggle-pass {
    cursor: pointer;
    opacity: 0.75;
}

.toggle-pass:hover {
    opacity: 1;
}

/* =========================================================
   DROPDOWNS, TABLES & STATES
========================================================= */

/* -------------------------
   Tables
-------------------------- */

.table,
.table-uplay,
.table-minimal {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.table th,
.table td {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid var(--bg-hover);
    vertical-align: middle;
}

.table thead th {
    font-weight: 600;
    color: var(--text-secondary);
}

.table-hover tbody tr:hover {
    background: var(--bg-hover);
}

/* -------------------------
   Dropdowns
-------------------------- */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 180px;
    background: var(--bg-surface);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: 0.25rem 0;
    display: none;
    z-index: 50;
}

.dropdown.show .dropdown-menu {
    display: block;
}

.dropdown-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.dropdown-item:hover {
    background: var(--bg-hover);
}

.dropdown-divider {
    height: 1px;
    background: var(--bg-hover);
    margin: 0.25rem 0;
}

/* -------------------------
   States & status
-------------------------- */

.state,
.estado-badge,
.winner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
}

.state-success,
.success,
.win,
.ok,
.done {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.state-warning,
.warning,
.pending {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.state-danger,
.danger,
.bad,
.lose {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.state-neutral,
.neutral {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-muted);
}

/* -------------------------
   Trend helpers
-------------------------- */

.trend-up {
    color: var(--ok-color);
    font-weight: bold;
    transition: opacity 0.2s ease;
}

.trend-down {
    color: var(--bad-color);
    font-weight: bold;
    transition: opacity 0.2s ease;
}

.trend-up:hover,
.trend-down:hover {
    opacity: 0.8;
}

.trend-eq {
    opacity: 0.6;
}

/* =========================================================
   UPLAY · MODAL CONFIRMACIÓN
========================================================= */

.uplay-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    z-index: 900;
}

.uplay-modal-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 901;
    padding: 1rem;
}

.uplay-modal {
    background: linear-gradient(180deg,
            rgba(15, 23, 42, 0.98),
            rgba(11, 18, 32, 0.98));
    border-radius: 18px;
    width: 100%;
    max-width: 380px;
    /* 🔑 más compacto */
    padding: 1.75rem;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

@keyframes modalFadeIn {
    from {
        transform: translateY(16px) scale(0.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.uplay-modal h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    /* menos pesado */
    letter-spacing: 0.2px;
}

#uplay-modal-message {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    color: rgba(226, 232, 240, 0.9);
    /* El mensaje se setea con textContent (nunca innerHTML, para no abrir la
       puerta a inyectar markup desde un nombre de torneo). Sin esto los \n
       quedaban todos en un párrafo corrido. */
    white-space: pre-line;
}

.uplay-modal-alert {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border-left: none;
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25);
    /* Para listar varios avisos con "•" y salto de línea (se setea con textContent). */
    white-space: pre-line;
}

.uplay-modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.25rem;
}

#uplay-modal-cancel {
    opacity: 0.85;
}

#uplay-modal-confirm.btn-success {
    background: linear-gradient(180deg,
            #22c55e,
            #16a34a);
    box-shadow:
        0 8px 20px rgba(34, 197, 94, 0.35);
}


/* =========================================================
   ANIMATIONS & LOADING
========================================================= */

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

.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    cursor: wait;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 1.2em;
    height: 1.2em;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    left: 50%;
    top: 50%;
    margin-left: -0.6em;
    margin-top: -0.6em;
}

/* Variante para botones con fondo claro */
.btn-ghost.btn-loading::after,
.btn-link.btn-loading::after {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: currentColor;
}
/* =========================================================
   UI NOTIFICATIONS (TOASTS)
========================================================= */

.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 90%;
    max-width: 400px;
    pointer-events: none;
}

.uplay-toast {
    background: var(--bg-surface);
    color: var(--text-primary);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: toastSlideDown 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    pointer-events: auto;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(8px); /* Glass effect subtle */
}

@keyframes toastSlideDown {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastFadeOut {
    to { opacity: 0; transform: translateY(-10px); }
}

.uplay-toast.hiding {
    animation: toastFadeOut 0.3s ease forwards;
}

.uplay-toast-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.uplay-toast-content {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 500;
}

.uplay-toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    margin-top: 0;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uplay-toast-close:hover {
    color: var(--text-primary);
}

/* Variantes */
.uplay-toast.success .uplay-toast-icon { color: var(--success); }
.uplay-toast.error .uplay-toast-icon,
.uplay-toast.danger .uplay-toast-icon { color: var(--danger); }
.uplay-toast.warning .uplay-toast-icon { color: var(--warning); }
.uplay-toast.info .uplay-toast-icon { color: var(--info); }

/* =========================================================
   COMPONENTS: WEEKLY PODIUM (GAMIFICATION) 🏆
========================================================= */

.uplay-weekly-podium {
    margin-bottom: 2.5rem;
}

.uplay-podium-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.uplay-podium-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.uplay-podium-period {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.25);
    padding: 0.35rem 0.75rem;
    border-radius: 99px;
    border: 1px solid var(--border-soft);
}

/* Base Card */
.uplay-podium-card {
    height: 100%;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--border-soft) !important;
    border-radius: 18px;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.uplay-podium-card:hover {
    transform: translateY(-5px);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

/* Rank Medals */
.uplay-podium-rank {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Modifiers for Gold, Silver, Bronze */
.uplay-podium-card--gold {
    border-color: rgba(255, 193, 7, 0.3) !important;
    background: linear-gradient(165deg, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.02));
    box-shadow: 0 10px 30px rgba(255, 193, 7, 0.1);
}

.uplay-podium-card--gold .uplay-podium-rank {
    background: var(--warning);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.uplay-podium-card--gold .uplay-podium-avatar {
    border-color: var(--warning) !important;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.2);
}

.uplay-podium-card--silver .uplay-podium-rank {
    background: #adb5bd;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.uplay-podium-card--bronze .uplay-podium-rank {
    background: #cd7f32;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Avatar Initials */
.uplay-podium-avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* Typography */
.uplay-podium-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uplay-podium-score {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--warning);
    margin-bottom: 0.75rem;
    display: block;
}

.uplay-podium-stats {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    opacity: 0.6;
}

.uplay-podium-stat-item {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.uplay-podium-stat-val {
    color: var(--text-primary);
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    .uplay-podium-card {
        padding: 1.25rem 0.75rem;
    }
    
    .uplay-podium-avatar {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
    
    .uplay-podium-name {
        font-size: 0.85rem;
    }
    
    .uplay-podium-score {
        font-size: 1rem;
    }
}

/* --- Winner Premium Variant (#1) --- */
.uplay-podium-card--gold {
    padding: 2rem 1.25rem !important;
}

.uplay-podium-badge-gold {
    background: linear-gradient(90deg, #ffd700, #ff8c00);
    color: #000;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    margin-bottom: 0.75rem;
    display: inline-block;
}

.uplay-podium-extra {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dotted rgba(255, 255, 255, 0.1);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.uplay-podium-extra-item {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: space-between;
}

.uplay-podium-extra-val {
    font-weight: 700;
    color: var(--text-primary);
}

.uplay-podium-extra-val--accent {
    color: var(--warning);
}

@media (max-width: 480px) {
    .uplay-podium-card--gold {
        padding: 1.5rem 1rem !important;
    }
}

/* --- WhatsApp Coordination Button --- */
.btn-whatsapp {
    background-color: #25D366;
    border: 1px solid #25D366;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(37, 211, 102, 0.1);
}

.btn-whatsapp:hover {
    background-color: #20bd5a;
    border-color: #20bd5a;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.2);
    color: #fff !important;
}

.btn-whatsapp:active {
    transform: scale(0.98);
    box-shadow: 0 2px 4px rgba(37, 211, 102, 0.1);
}

.btn-whatsapp:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #25D366 !important;
    transform: none;
}

/* --- Instagram Share Button --- */
.btn-instagram {
    background-color: #E1306C;
    border: none;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    cursor: pointer;
}

.btn-instagram:hover {
    background-color: #c42a5e;
    transform: translateY(-1px);
    color: #fff !important;
}

.btn-instagram:active {
    transform: scale(0.98);
}

/* -------------------------
   Gamification (Fase 1) 🔥
-------------------------- */

.u-streak-fire {
    background: rgba(255, 69, 0, 0.1);
    color: #ff4500;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid rgba(255, 69, 0, 0.2);
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    animation: u-fire-pulse 2s infinite ease-in-out;
}

@keyframes u-fire-pulse {
    0% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 10px rgba(255, 69, 0, 0.2); }
    100% { transform: scale(1); opacity: 0.9; }
}

/* Toast Gamification modifier */
.uplay-toast.gamification {
    border-left: 4px solid var(--warning);
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), var(--bg-surface));
}

.uplay-toast.gamification .bi-trophy-fill {
    filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.5));
}

/* ── Toast celebración de puntos ganados ── */
.uplay-toast--celebration {
    border-left: 4px solid #4ade80;
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.12), var(--bg-surface));
    position: relative;
    overflow: hidden;
}

.uplay-toast--celebration-confetti {
    position: absolute;
    top: 6px;
    right: 38px;
    font-size: 1.2rem;
    animation: confetti-bounce 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes confetti-bounce {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    60%  { transform: scale(1.3) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* -------------------------
   Gamification (Fase 2 Refactor) 📈
-------------------------- */

.pill.u-pill-improving {
    color: var(--accent);
    font-weight: 800;
}

.pill.u-pill-lowering {
    color: var(--bad-color);
    font-weight: 800;
}

.u-streak-fire-sm {
    color: var(--accent);
    font-weight: bold;
    font-size: 0.85rem;
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.u-streak-fire-sm:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.u-history-link {
    font-size: 0.75rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.u-history-link:hover {
    opacity: 0.7;
}

/* -------------------------
   Helpers & Utilities
-------------------------- */

.metric-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* =========================================================
   AYUDA DEL TORNEO (modal)
   =========================================================
   Se abre a pedido, nunca solo. El panel muestra botones que aparecen y
   desaparecen según la etapa, y sin el recorrido completo un organizador
   nuevo no sabe cuál toca primero ni por qué se fue el que estaba antes. */
.ayuda-torneo-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(4, 12, 22, 0.72);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
}

.ayuda-torneo-overlay[hidden] { display: none; }

.ayuda-torneo {
    width: 100%;
    max-width: 640px;
    background: #12314f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.ayuda-torneo-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ayuda-torneo-titulo {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ayuda-torneo-cerrar {
    background: transparent;
    border: none;
    color: var(--text-muted, #9fb3c8);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    line-height: 1;
}

.ayuda-torneo-cerrar:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.ayuda-torneo-intro {
    margin: 0.6rem 0 1.2rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted, #9fb3c8);
}

.ayuda-pasos {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ayuda-paso {
    position: relative;
    padding: 0 0 1.1rem 2.3rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    margin-left: 0.85rem;
}

.ayuda-paso:last-child {
    border-left-color: transparent;
    padding-bottom: 0.4rem;
}

.ayuda-paso p {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-muted, #9fb3c8);
}

.ayuda-paso-ojo {
    padding-left: 0.7rem;
    border-left: 2px solid rgba(182, 212, 0, 0.35);
}

.ayuda-paso-cabecera {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.ayuda-paso-num {
    position: absolute;
    left: -0.95rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #12314f;
    border: 2px solid rgba(255, 255, 255, 0.18);
    color: var(--text-muted, #9fb3c8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
}

.ayuda-paso-nombre {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}

/* Paso actual: lo que hay que mirar primero al abrir la ayuda. */
.ayuda-paso--actual > .ayuda-paso-cabecera .ayuda-paso-num {
    background: var(--accent, #b6d400);
    border-color: var(--accent, #b6d400);
    color: #0b1c2d;
}

.ayuda-paso-badge {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(182, 212, 0, 0.15);
    color: var(--accent, #b6d400);
    border: 1px solid rgba(182, 212, 0, 0.35);
    padding: 2px 8px;
    border-radius: 999px;
}

.ayuda-paso--hecho .ayuda-paso-num {
    border-color: rgba(62, 207, 142, 0.5);
    color: rgba(62, 207, 142, 0.9);
}

.ayuda-paso--hecho .ayuda-paso-nombre {
    color: var(--text-muted, #9fb3c8);
}

.ayuda-bloque-extra {
    margin-top: 1.2rem;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.ayuda-bloque-titulo {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ayuda-bloque-extra p {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-muted, #9fb3c8);
}

.ayuda-bloque-extra p:last-child { margin-bottom: 0; }

.ayuda-torneo-pie {
    margin-top: 1.3rem;
    display: flex;
    justify-content: flex-end;
}

/* Botón que abre la ayuda: discreto, no compite con las acciones. */
.btn-ayuda-torneo {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    color: var(--text-muted, #9fb3c8);
}

.btn-ayuda-torneo:hover {
    border-color: var(--accent, #b6d400);
    color: var(--accent, #b6d400);
}

@media (max-width: 640px) {
    .ayuda-torneo { padding: 1.1rem; }
    .ayuda-torneo-overlay { padding: 1rem 0.6rem; }
}

/* =========================================================
   CAPTION SUGERIDO AL DESCARGAR UNA TARJETA
   =========================================================
   Solo aparece en desktop, donde no existe la hoja nativa de compartir y
   la tarjeta se descarga. Reemplaza al alert() gris del navegador que
   usaban tres de las cinco copias del compartir. */
.uplay-caption-hint {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 90%;
    max-width: 340px;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--bg-hover, #1f4b75);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    text-align: center;
    animation: uplay-caption-in 0.18s ease-out;
}

.uplay-caption-hint__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent, #b6d400);
    margin-bottom: 0.35rem;
}

.uplay-caption-hint__intro {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted, #9fb3c8);
}

.uplay-caption-hint__text {
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--accent, #b6d400);
    word-break: break-word;
}

.uplay-caption-hint__acciones {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.6rem;
}

.uplay-caption-hint__copiar,
.uplay-caption-hint__cerrar {
    border-radius: 8px;
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.uplay-caption-hint__copiar {
    background: var(--accent, #b6d400);
    border: none;
    color: #0b1c2d;
}

.uplay-caption-hint__cerrar {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--text-muted, #9fb3c8);
    font-weight: 400;
}

@keyframes uplay-caption-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* =========================================================
   PODIO EN TABLAS  (.u-table-podio)
   =========================================================
   Oro, plata y bronce en las tres primeras filas.

   Es OPT-IN a propósito. Antes vivía en pages/zonas.css sin ninguna
   clase que la acotara, y como todo el CSS de pages/ se carga en todas
   las pantallas, le ponía medallas a las tres primeras filas de
   CUALQUIER tabla: el listado de partidos del admin, el de jugadores,
   las solicitudes, el listado de torneos. Hasta la vista previa del
   compositor de campanas, que inserta el HTML del mail dentro de la
   pagina del admin.

   Solo la piden las tablas donde la primera columna es una posicion de
   verdad: los tres rankings, el ranking del torneo y la tabla de zona.
   ========================================================= */

.u-table-podio tbody tr:nth-child(1) td:first-child::before {
    content: "🥇";
    margin-right: 0.3rem;
    font-size: 1.1rem;
}

.u-table-podio tbody tr:nth-child(2) td:first-child::before {
    content: "🥈";
    margin-right: 0.3rem;
    font-size: 1.1rem;
}

.u-table-podio tbody tr:nth-child(3) td:first-child::before {
    content: "🥉";
    margin-right: 0.3rem;
    font-size: 1.1rem;
}

/* ── css/pages/partidos.css ── */
/* =========================================================
   PAGE / PARTIDOS
========================================================= */

.section-uplay {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    padding: 18px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 22px rgba(0,0,0,.45);
    margin-bottom: 20px;
}

.uplay-table {
    background: rgba(10,15,22,.8);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}

.uplay-table thead {
    background: #0d1b2a;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: .04em;
}

.uplay-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.uplay-table tbody tr:hover {
    background: rgba(182,212,0,.06);
}

.section-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 12px;
}

/* ── css/pages/auth.css ── */
/* =========================================================
   PAGE / AUTH (Login / Registro)
========================================================= */

/* =========================
   Layout base AUTH
========================= */

.page-login.view-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at top left, rgba(0,95,163,.25), transparent 45%),
        radial-gradient(circle at bottom right, rgba(182,212,0,.18), transparent 45%);
}

/* Card principal */
.view-auth .card {
    width: 100%;
    max-width: 420px;
    padding: 2.25rem 2rem;
    border-radius: 18px;
    background: linear-gradient(
        180deg,
        rgba(13,27,42,.98),
        rgba(10,20,32,.98)
    );
    box-shadow:
        0 25px 60px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}

/* =========================
   Header
========================= */

.auth-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth-logo {
    height: 46px;
    width: auto;
    margin: 0 auto 0.75rem;
    display: block;
}

.auth-title {
    font-size: 1.45rem;
    font-weight: 800;
    margin-bottom: .35rem;
}

.auth-subtitle {
    font-size: .9rem;
    color: var(--text-muted);
}

/* =========================
   Form base
========================= */

.view-auth form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.form-group label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Inputs premium */
.view-auth .input,
.view-auth select {
    height: 46px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--text-primary);
    padding: 0 14px;
    font-size: .95rem;
}

.view-auth .input::placeholder {
    color: rgba(255,255,255,.45);
}

.view-auth .input:focus,
.view-auth select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0,95,163,.25);
}

/* Password */
.pass-wrapper {
    position: relative;
}

.toggle-pass {
    position: absolute;
    right: 10px;
    top: 34px;
    height: 32px;
    width: 32px;
    padding: 0;
    border-radius: 50%;
    font-size: .85rem;
    flex: 0 0 auto;
}

.toggle-pass {
    width: 32px;
    min-width: 32px;
    max-width: 32px;

    display: inline-flex;   /* 🔑 clave */
    justify-content: center;
    align-items: center;
}

/* =========================
   Actions
========================= */

.auth-actions {
    text-align: center;
}

.auth-actions a {
    font-size: .8rem;
    color: var(--text-muted);
}

.auth-actions a:hover {
    color: var(--accent);
}

/* Botón principal */
.view-auth .btn-primary {
    margin-top: .75rem;
    height: 46px;
    border-radius: 14px;
    font-size: .95rem;
    font-weight: 700;
}

/* Loading */
.btn-loading {
    pointer-events: none;
    opacity: .85;
}

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

.auth-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .85rem;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--accent);
    font-weight: 600;
    margin-left: .25rem;
}

/* =========================
   Registro (solo diferencias)
========================= */

.reg-form .form-group {
    text-align: left;
}

.reg-form .btn {
    width: 100%;
}

/* =========================
   Mobile refinements
========================= */

@media (max-width: 480px) {
    .view-auth .card {
        padding: 2rem 1.5rem;
    }

    .auth-title {
        font-size: 1.3rem;
    }
}

/* ── css/pages/panel.css ── */
/* =========================================================
   PAGE / PANEL (Jugador Dashboard)
========================================================= */

.page-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}

/* =========================================================
   HERO / WELCOME
========================================================= */

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    padding: 2rem;
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(0,95,163,.25), transparent 45%),
        radial-gradient(circle at bottom right, rgba(182,212,0,.18), transparent 45%);
}

.dashboard-hero h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.dashboard-hero p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* CTA */
.dashboard-hero-actions {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}

/* =========================================================
   METRICS
========================================================= */

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.metric-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.metric-card small {
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.metric-card h3 {
    font-size: 1.6rem;
    font-weight: 800;
}

/* =========================================================
   MAIN GRID
========================================================= */

.dashboard-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-lg);
}

/* =========================================================
   LISTS / TABLES INSIDE CARDS
========================================================= */

.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-top: var(--gap-sm);
}

.dashboard-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-sm);
}

/* =========================================================
   EMPTY STATES
========================================================= */

.dashboard-empty {
    margin-top: var(--gap-sm);
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1024px) {
    .dashboard-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-metrics {
        grid-template-columns: 1fr;
    }
}

/* ── css/pages/dashboard.css ── */
/* =========================================================
   DASHBOARD ADMIN - PREMIUM UX
   Mejora 3: Dashboard Hero Section
========================================================= */

/* -------------------------
   Dashboard Hero
--------------------------- */

/*
  Hero section que destaca KPIs principales
  Establece jerarquía visual clara
*/
.dashboard-hero {
    /* display:block explicito: ".dashboard-hero" tambien existe en panel.css
       (display:flex, para el panel del jugador) y esa regla se filtra acá por
       compartir nombre de clase. Sin esto, el título y la grilla de KPIs
       quedan lado a lado en una fila en vez de apilados. */
    display: block;
    background: linear-gradient(135deg,
            rgba(182, 212, 0, 0.08) 0%,
            rgba(0, 95, 163, 0.12) 100%);
    border: 1px solid rgba(182, 212, 0, 0.25);
    border-radius: var(--radius-lg);
    padding: var(--gap-lg);
    margin-bottom: var(--gap-lg);
    box-shadow:
        0 0 0 1px rgba(182, 212, 0, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.25);
}

.hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--gap);
    gap: var(--gap);
}

.hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.hero-meta {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: var(--gap-xs);
}

.hero-actions {
    display: flex;
    gap: var(--gap-sm);
    flex-shrink: 0;
}

/* -------------------------
   Dashboard Grid
--------------------------- */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
    justify-content: center;
    gap: var(--gap-sm);
    width: 100%;
}

/* -------------------------
   Metric Cards (dentro de dashboard)
--------------------------- */

.metric-card {
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.85rem;
    position: relative;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    border-color: rgba(182, 212, 0, 0.3);
}

.metric-card .icon {
    display: inline-flex;
    vertical-align: middle;
    font-size: 1.3rem;
    margin-right: 8px;
    opacity: 0.75;
}

.metric-card h6 {
    display: inline-flex;
    vertical-align: middle;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: var(--gap-sm);
}

.metric-card .value {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: var(--gap-xs);
    line-height: 1;
}

.metric-card .sub {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Variante con warning */
.metric-card.border-warning {
    border-color: rgba(245, 158, 11, 0.4);
}

/* -------------------------
   Data Cards — datos de texto, no métricas
--------------------------

   .metric-card está pensada para un número corto: .value es 1.6rem en
   negrita con line-height 1, .sub es 0.7rem, y la tarjeta tiene
   overflow:hidden. Funciona para "287" o "141".

   El detalle del jugador usaba ese mismo componente para el email, la
   ubicación y el rol. Un email a 1.6rem necesita ~520px y la tarjeta nunca
   pasa de 200px, así que se cortaba en seco --sin puntos suspensivos ni
   nada-- en TODOS los anchos, escritorio incluido. Medido el 06/09/2026:
   necesitaba 524px y tenía 171px.

   Esta variante es para eso: texto que se lee, no un número que se mira.
   Va como clase ADICIONAL a .metric-card, para heredar fondo, borde y
   padding sin tocar las otras cinco pantallas que usan el componente. */

.data-grid {
    /* Sin el tope de 200px de .dashboard-grid: un email necesita el ancho
       que haya. En pantallas angostas cae a una sola columna. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    justify-content: stretch;
}

.data-card .value {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    /* Un email no tiene espacios donde cortar: sin esto no baja de línea
       aunque haya lugar debajo. */
    overflow-wrap: anywhere;
}

.data-card .sub {
    /* 0.7rem son 11px: el teléfono quedaba casi ilegible, y es un dato que
       se usa para llamar a alguien. */
    font-size: 0.85rem;
}

/* -------------------------
   Alert Grid
--------------------------- */

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

.alert-tile {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: var(--gap);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.alert-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.alert-tile.state-danger {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}

.alert-tile.state-danger:hover {
    box-shadow: 0 8px 16px rgba(239, 68, 68, 0.3);
}

.alert-tile.state-warning {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
}

.alert-tile.state-warning:hover {
    box-shadow: 0 8px 16px rgba(245, 158, 11, 0.3);
}

.alert-tile.info {
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.08);
}

.alert-tile.info:hover {
    box-shadow: 0 8px 16px rgba(56, 189, 248, 0.3);
}

.alert-tile.state-neutral {
    border-color: rgba(148, 163, 184, 0.3);
    background: rgba(148, 163, 184, 0.05);
}

.alert-tile span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.alert-tile strong {
    font-size: 1.5rem;
    font-weight: 700;
}

/* -------------------------
   Chart Container
--------------------------- */

.chart-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius);
    padding: var(--gap);
    height: 300px;
}

/* -------------------------
   Zone Boxes (Ranking)
--------------------------- */

.zone-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: var(--gap-sm);
    margin-bottom: var(--gap-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zone-box.ascenso {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.08);
}

.zone-box.descenso {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}

.zone-box span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.zone-box strong {
    font-size: 1.25rem;
    font-weight: 700;
}

/* -------------------------
   Modalidad Bars
--------------------------- */

.mod-row {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--gap-xs) 0;
}

.mod-row span {
    min-width: 80px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.mod-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}

.mod-bar>div {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), rgba(182, 212, 0, 0.6));
    border-radius: 999px;
    transition: width 0.3s ease;
}

.mod-row strong {
    min-width: 40px;
    text-align: right;
    font-weight: 600;
}

/* -------------------------
   Dashboard List (historial, próximos)
--------------------------- */

.dashboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.dashboard-list li {
    background: var(--bg-hover);
    padding: var(--gap);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s ease;
}

.dashboard-list li:hover {
    background: var(--bg-surface);
}

.clickable-item {
    cursor: pointer !important;
}

.clickable-item:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.dashboard-empty {
    text-align: center;
    padding: var(--gap-lg);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* -------------------------
   Filters Row
--------------------------- */

.filters-row {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}

.filters-row .btn.active {
    background: var(--accent);
    color: #0b1c2d;
    border-color: var(--accent);
}

/* -------------------------
   Section Actions
--------------------------- */

.section-actions {
    margin-top: var(--gap);
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}

/* -------------------------
   Responsive (Mobile)
--------------------------- */

@media (max-width: 768px) {
    .dashboard-hero {
        padding: var(--gap);
    }

    .hero-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-sm);
    }

    .hero-title {
        font-size: 1.25rem;
    }

    .hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .dashboard-grid,
    .alert-grid {
        grid-template-columns: 1fr;
    }

    .metric-card .value {
        font-size: 1.75rem;
    }

    /* En móvil la métrica se agranda todavía más (1.75rem = 28px), que es
       lo que hacía que el email se cortara peor en el celular que en la
       compu. Los datos de texto NO siguen esa regla: se leen, no se miran
       de lejos. Va acá y no arriba porque esta regla es posterior en el
       archivo y, con la misma especificidad, gana la última. */
    .data-card .value {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .dashboard-hero {
        border-radius: var(--radius);
        padding: var(--gap-sm);
    }

    .alert-tile {
        padding: var(--gap-sm);
    }

    .alert-tile span {
        font-size: 0.75rem;
    }

    .alert-tile strong {
        font-size: 1.25rem;
    }
}
/* =========================================================
   PLAYER PANEL (Specific Fixes)
   Mejora Visual para panel.html
========================================================= */

/* KPI Cards Container */
.profile-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--gap);
    margin-top: var(--gap);
}

/* KPI Card Individual */
.profile-kpi {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.profile-kpi:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.profile-kpi .label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.profile-kpi .value {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 0.35rem;
    /* Gradiente sutil en texto */
    background: linear-gradient(180deg, #ffffff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.profile-kpi .hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.8;
}

/* Mobile KPIs */
@media (max-width: 480px) {
    .profile-kpis {
        grid-template-columns: 1fr 1fr; /* 2 columnas en mobile */
        gap: var(--gap-sm);
    }
    
    .profile-kpi {
        padding: 1rem 0.5rem;
    }
    
    .profile-kpi .value {
        font-size: 1.5rem;
    }
}

/* ── css/pages/perfil.css ── */
/* =========================================================
   PAGE / PERFIL (JUGADOR)
   Estilo premium UPLAY · Instagram / SaaS
========================================================= */

.profile-page {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* =========================================================
   HEADER / IDENTIDAD
========================================================= */

.profile-header {
    background: linear-gradient(135deg,
            rgba(0, 95, 163, 0.18),
            rgba(182, 212, 0, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.profile-identidad {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6de3a5, #005fa3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: #041018;
    flex-shrink: 0;
}

.profile-identidad-text h1 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.profile-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.profile-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* =========================================================
   KPIs PRINCIPALES
========================================================= */

.profile-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.profile-kpi {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
}

.profile-kpi .label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.profile-kpi .value {
    font-size: 1.6rem;
    font-weight: 800;
    margin-top: 0.25rem;
}

.profile-kpi .hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* =========================================================
   GRIDS
========================================================= */

.profile-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* =========================================================
   SECCIONES / CARDS
========================================================= */

.profile-section-title {
    font-size: 1rem;
    font-weight: 700;
}

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

.card-body {
    margin-top: 1rem;
}

/* =========================================================
   PROGRESIÓN
========================================================= */

.profile-progress-wrap {
    margin-top: 1rem;
}

.profile-progress-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.profile-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6de3a5, #b6d400);
}

.profile-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* =========================================================
   KPIs MINI
========================================================= */

.profile-kpis-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.profile-kpis-mini.two {
    grid-template-columns: repeat(2, 1fr);
}

.profile-kpi.mini {
    padding: 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.profile-kpi.mini .value {
    font-size: 1.1rem;
}

/* =========================================================
   LISTAS (RELACIONES)
========================================================= */

.profile-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.profile-item:last-child {
    border-bottom: none;
}

.profile-item .name {
    font-weight: 600;
    font-size: 0.9rem;
}

.profile-item .meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.profile-item .count {
    font-weight: 700;
}

/* =========================================================
   SUBSECCIONES
========================================================= */

.profile-subsection {
    margin-top: 1.5rem;
}

.profile-subsection-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* =========================================================
   SOFT / PLACEHOLDER
========================================================= */

.profile-soft {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    padding: 1rem;
    margin-top: 1rem;
}

.profile-soft-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.profile-muted {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* =========================================================
   HISTORIAL
========================================================= */

.profile-history .profile-table-wrap {
    overflow-x: auto;
}

.profile-table {
    width: 100%;
    font-size: 0.8rem;
}

.profile-table th {
    color: var(--text-muted);
    font-weight: 600;
}

.profile-table td {
    vertical-align: middle;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1024px) {
    .profile-kpis {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .profile-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-kpis {
        grid-template-columns: 1fr;
    }

    /* 🔧 FIX RESPONSIVE: Grid de 2 columnas colapsa a 1 en mobile */
    .profile-grid-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* =========================================================
   Mobile Pequeño (≤480px) - UX Refinement
========================================================= */

@media (max-width: 480px) {

    /* 🔧 FIX RESPONSIVE: KPIs mini más legibles (2 cols en vez de 3) */
    .profile-kpis-mini {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .profile-kpi.mini {
        padding: 0.625rem;
    }

    .profile-kpi.mini .value {
        font-size: 1rem;
    }
}
/* ── css/pages/abierto_nuevo.css ── */
/* =========================================================
   PAGE / ABIERTO NUEVO
   Estilo premium Instagram / SaaS
========================================================= */

.page-abierto {
    max-width: 980px;
    margin: 0 auto;
}

/* =========================================================
   HEADER
========================================================= */

.page-abierto .page-header {
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.page-abierto .page-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.page-abierto .page-subtitle {
    max-width: 620px;
}

/* =========================================================
   CARDS
========================================================= */

.page-abierto .card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.page-abierto .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* =========================================================
   HOW IT WORKS (steps)
========================================================= */

.page-abierto .u-step-list {
    margin-top: 0.75rem;
}

.page-abierto .u-step-list li {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* =========================================================
   FORM
========================================================= */

.page-abierto form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page-abierto .form-group {
    margin-bottom: 0;
}

/* Input focus un poco más pro */
.page-abierto .input:focus {
    box-shadow: 0 0 0 3px rgba(0,95,163,0.25);
}

/* =========================================================
   INFO BOX
========================================================= */

.page-abierto .u-info-box {
    border-radius: 14px;
    background: linear-gradient(
        135deg,
        rgba(0,95,163,0.12),
        rgba(182,212,0,0.08)
    );
    border: 1px solid rgba(255,255,255,0.08);
}

.page-abierto .u-info-title {
    font-weight: 700;
}

/* =========================================================
   CTA
========================================================= */

.page-abierto .btn-primary {
    align-self: flex-start;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-shadow: 0 14px 30px rgba(0,95,163,0.35);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .page-abierto {
        padding-bottom: 2rem;
    }

    .page-abierto .page-title {
        font-size: 1.4rem;
    }

    .page-abierto .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* ── css/pages/abiertos_listar.css ── */
/* =========================================================
   PAGE / LISTADO DE PARTIDOS ABIERTOS
   Estilo premium Instagram / SaaS
========================================================= */

/* Contenedor general */
.page {
    max-width: 1100px;
    margin: 0 auto;
}

/* =========================================================
   HEADER
========================================================= */

.page .page-header {
    margin-bottom: 2rem;
    gap: 1.5rem;
}

.page .page-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.page .page-subtitle {
    max-width: 720px;
}

/* CTA principal */
.page .page-actions .btn-primary {
    box-shadow: 0 14px 30px rgba(0,95,163,0.35);
}

/* =========================================================
   CARD CONTENEDORA
========================================================= */

.page .card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.page .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* =========================================================
   TABLA
========================================================= */

.page .u-table-wrap {
    border-radius: 14px;
    overflow-y: hidden; /* clip border-radius verticalmente sin bloquear scroll horizontal */
}

/* Header de tabla */
.page .u-table-uplay thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* Filas */
.page .u-table-uplay tbody tr {
    transition: background 0.12s ease;
}

.page .u-table-uplay tbody tr:hover {
    background: rgba(255,255,255,0.03);
}

/* =========================================================
   CUPOS
========================================================= */

.page .u-cupos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.page .u-cupos.ok {
    background: rgba(0,200,120,0.15);
    color: #6de3a5;
}

.page .u-cupos.full {
    background: rgba(255,80,80,0.15);
    color: #ff9a9a;
}

/* =========================================================
   ESTADOS
========================================================= */

.page .u-badge-state {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.page .u-badge-state.open {
    background: rgba(0,95,163,0.18);
    color: #7abfff;
}

.page .u-badge-state.pending {
    background: rgba(255,200,0,0.18);
    color: #ffd966;
}

.page .u-badge-state.done {
    background: rgba(200,200,200,0.15);
    color: #cfcfcf;
}

/* =========================================================
   BOTÓN DE ACCIÓN
========================================================= */

.page .btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.page .u-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.page .u-empty .btn-primary {
    margin-top: 0.75rem;
    box-shadow: 0 14px 30px rgba(0,95,163,0.35);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .page .page-title {
        font-size: 1.4rem;
    }

    .page .page-actions {
        width: 100%;
    }

    .page .page-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Tabla scrollable */
    .page .u-table-wrap {
        overflow-x: auto;
    }

}

/* ── css/pages/cargar_resultado.css ── */
/* =========================================================
   CARGAR RESULTADO — UI tap-based
   ========================================================= */

.cr-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 0.5rem 0.25rem 2rem;
}

/* ---------------- HEADER ---------------- */
.cr-header {
    margin-bottom: 1rem;
}

.cr-eyebrow {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 0.25rem;
}

.cr-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
}

/* ---------------- SCORE CARD ---------------- */
.cr-score-card {
    background: var(--bg-surface);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.cr-score-head {
    display: grid;
    grid-template-columns: 5rem 1fr 1fr;
    gap: 0.5rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.cr-score-head::before {
    content: "";
}

.cr-team-col {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.cr-team-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cr-team-names {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cr-score-row {
    display: grid;
    grid-template-columns: 5rem 1fr 1fr;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.cr-set-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.cr-set-label small {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
}

.cr-score-cell {
    background: var(--bg-body);
    border: 1px solid var(--bg-hover);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 0.9rem 0.5rem;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
    -webkit-tap-highlight-color: transparent;
}

.cr-score-cell:active {
    transform: scale(0.96);
}

.cr-score-cell.is-winner {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-body);
}

.cr-score-num {
    display: block;
}

.cr-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin: 0.75rem 0 0;
}

/* ---------------- SUMMARY ---------------- */
.cr-summary {
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
    border: 1px solid transparent;
}

.cr-summary.is-success {
    background: rgba(34, 197, 94, 0.12);
    border-color: var(--success);
    color: var(--success);
}

.cr-summary.is-loss {
    background: rgba(239, 68, 68, 0.10);
    border-color: var(--danger);
    color: var(--danger);
}

.cr-summary-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cr-summary-score {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 0.15rem;
}

/* ---------------- SUBMIT ---------------- */
.cr-submit {
    width: 100%;
    padding: 0.95rem 1rem;
    font-size: 1rem;
    font-weight: 700;
}

.cr-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------------- DETAILS ---------------- */
.cr-details {
    margin-top: 1.25rem;
    background: var(--bg-surface);
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
}

.cr-details summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: 0.5rem 0;
}

.cr-details-body {
    padding: 0.25rem 0 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.cr-details-body p {
    margin: 0 0 0.5rem;
}

.cr-details-body a {
    color: var(--accent);
    text-decoration: none;
}

/* ---------------- RESPONSIVE (mobile-first OK ya) ---------------- */
@media (max-width: 360px) {
    .cr-score-head,
    .cr-score-row {
        grid-template-columns: 4rem 1fr 1fr;
    }

    .cr-score-cell {
        font-size: 1.35rem;
        padding: 0.75rem 0.4rem;
    }
}

/* ── css/pages/desafio_nuevo.css ── */
/* =========================================================
   PAGE / CREAR DESAFÍO
   Estilo premium Instagram / SaaS
========================================================= */

/* ---------------------------------------------------------
   CONTENEDOR
--------------------------------------------------------- */

.page {
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.page .page-header {
    margin-bottom: 1.75rem;
}

.page .page-title {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.page .page-subtitle {
    max-width: 760px;
}

/* ---------------------------------------------------------
   CARDS
--------------------------------------------------------- */

.page .card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.page .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* ---------------------------------------------------------
   SECCIONES
--------------------------------------------------------- */

.page .profile-section-title {
    font-size: 1rem;
    font-weight: 700;
}

/* ---------------------------------------------------------
   INFO BOX / PASOS
--------------------------------------------------------- */

.page .u-info-box {
    border-radius: 12px;
    padding: 1rem;
    line-height: 1.45;
}

.page .u-step-list {
    margin: 0;
}

.page .u-step-list li {
    padding: 0.35rem 0;
}

/* ---------------------------------------------------------
   FORMULARIO
--------------------------------------------------------- */

.page .form-label {
    font-weight: 600;
}

.page .input {
    font-size: 0.95rem;
}

.page select.input {
    cursor: pointer;
}

/* Placeholder más sutil */
.page input::placeholder {
    color: rgba(255,255,255,0.35);
}

/* ---------------------------------------------------------
   GRID DE JUGADORES
--------------------------------------------------------- */

.page .row > [class*="col-"] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* ---------------------------------------------------------
   FECHA
--------------------------------------------------------- */

.page input[type="datetime-local"] {
    max-width: 280px;
}

/* ---------------------------------------------------------
   BOTONES
--------------------------------------------------------- */

.page .btn-primary {
    box-shadow: 0 14px 30px rgba(0,95,163,0.35);
}

.page .page-actions {
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------
   SEPARADOR
--------------------------------------------------------- */

.page .u-sep {
    margin: 1.25rem 0;
}

/* ---------------------------------------------------------
   MUTED / AYUDAS
--------------------------------------------------------- */

.page .u-muted {
    font-size: 0.9rem;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 768px) {

    .page .page-title {
        font-size: 1.35rem;
    }

    .page .page-actions {
        width: 100%;
    }

    .page .page-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .page input[type="datetime-local"] {
        max-width: 100%;
    }

}

/* ── css/pages/detalle.css ── */
/* =========================================================
   PAGE / DETALLE DE PARTIDO
   Estilo premium Instagram / SaaS
========================================================= */

/* ---------------------------------------------------------
   CONTENEDOR
--------------------------------------------------------- */

.page {
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.page .page-header {
    margin-bottom: 1.75rem;
}

.page .page-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.page .u-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* ---------------------------------------------------------
   CARDS GENERALES
--------------------------------------------------------- */

.page .card {
    margin-bottom: 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.page .card:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

/* ---------------------------------------------------------
   TÍTULOS DE SECCIÓN
--------------------------------------------------------- */

.page .profile-section-title {
    font-size: 1rem;
    font-weight: 700;
}

/* ---------------------------------------------------------
   LISTAS LIMPIAS
--------------------------------------------------------- */

.page .u-list-clean li {
    padding: 0.35rem 0;
    line-height: 1.45;
}

/* ---------------------------------------------------------
   HINTS / MENSAJES DE ESTADO
--------------------------------------------------------- */

.page .u-hint {
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0.6rem 0;
}

/* ---------------------------------------------------------
   ARMADO DEL PARTIDO (VS)
--------------------------------------------------------- */

.page .u-versus-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
}

.page .u-vs {
    font-weight: 800;
    opacity: 0.7;
}

.page .u-team .u-player-card {
    text-align: center;
    padding: 0.75rem;
}

/* ---------------------------------------------------------
   ACCIONES DISPONIBLES
--------------------------------------------------------- */

.page .card-body>.btn {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.page .card-body form {
    display: inline-block;
}

/* ---------------------------------------------------------
   RESULTADO PROPUESTO
--------------------------------------------------------- */

.page .u-result-box {
    margin: 0.75rem 0;
    padding: 0.75rem;
    border-radius: 10px;
}

.page .u-result-sets {
    font-size: 1.05rem;
    font-weight: 700;
    margin-top: 0.4rem;
}

/* ---------------------------------------------------------
   CONTACTOS
--------------------------------------------------------- */

.page .u-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.page .u-contacts .u-player-card {
    text-align: left;
}

/* ---------------------------------------------------------
   RESULTADO FINAL
--------------------------------------------------------- */

.page .u-highlight {
    font-size: 1.05rem;
    font-weight: 700;
}

/* ---------------------------------------------------------
   TARJETA DE VERIFICACIÓN (MEJORA UX)
--------------------------------------------------------- */

.u-verification-card {
    background: var(--bg-surface-light, #1a1a1a);
    border: 1px solid var(--primary-soft, #3a3a3a);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.u-verification-header {
    background: var(--primary-dim, rgba(0, 123, 255, 0.1));
    color: var(--primary, #007bff);
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--primary-soft, #3a3a3a);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.u-verification-body {
    padding: 1rem;
}

.u-proposed-winner {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.u-proposed-sets .pill {
    padding: 0.4rem 0.8rem;
    font-size: 1rem;
    font-weight: 800;
    min-width: 3rem;
    text-align: center;
}

.u-proposed-meta {
    line-height: 1.4;
    border-top: 1px dashed var(--border-soft, #333);
    padding-top: 0.75rem;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 768px) {

    .page .page-title {
        font-size: 1.3rem;
    }

    .page .u-versus-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .page .u-vs {
        display: none;
    }

    .page .page-actions {
        width: 100%;
    }

    .page .page-actions .btn {
        width: 100%;
        justify-content: center;
    }

}
/* ── css/pages/listar.css ── */
/* =========================================================
   ADMIN / LISTADO DE PARTIDOS
   Estilo Panel Premium SaaS
========================================================= */

/* ---------------------------------------------------------
   CONTENEDOR
--------------------------------------------------------- */

.section-uplay {
    padding: 1.25rem 1.5rem;
}

.section-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ---------------------------------------------------------
   TABLA
--------------------------------------------------------- */

.uplay-table {
    border-radius: 12px;
    overflow: hidden;
}

.uplay-table table {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Head */
.uplay-table thead th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Body */
.uplay-table tbody td {
    vertical-align: middle;
    padding: 0.65rem 0.75rem;
    line-height: 1.3;
}

/* Hover suave */
.uplay-table tbody tr {
    transition: background-color 0.15s ease;
}

.uplay-table tbody tr:hover {
    background-color: rgba(255,255,255,0.04);
}

/* ---------------------------------------------------------
   IDS
--------------------------------------------------------- */

.uplay-table td:first-child {
    font-weight: 700;
    opacity: 0.85;
}

/* ---------------------------------------------------------
   BADGES
--------------------------------------------------------- */

.uplay-table .badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.35em 0.55em;
    border-radius: 6px;
    letter-spacing: 0.03em;
}

/* Modalidad (neutro premium) */
.uplay-table td:nth-child(3) .badge {
    background-color: rgba(255,255,255,0.08);
}

/* ---------------------------------------------------------
   PAREJAS
--------------------------------------------------------- */

.uplay-table td:nth-child(4),
.uplay-table td:nth-child(5) {
    font-size: 0.85rem;
    opacity: 0.95;
}

/* ---------------------------------------------------------
   ACCIONES
--------------------------------------------------------- */

.uplay-table .btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    white-space: nowrap;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 992px) {

    .section-uplay {
        padding: 1rem;
    }

    .section-title {
        font-size: 1.2rem;
    }

    .uplay-table table {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {

    .uplay-table thead {
        display: none;
    }

    .uplay-table tbody tr {
        display: block;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
        border-radius: 10px;
        background: rgba(255,255,255,0.04);
    }

    .uplay-table tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.35rem 0;
    }

    .uplay-table tbody td:last-child {
        justify-content: flex-end;
    }
}

/* ── css/pages/mis_partidos.css ── */
/* =========================================================
   MIS PARTIDOS – Player Feed / SaaS Premium
========================================================= */

/* ---------------------------------------------------------
   PAGE
--------------------------------------------------------- */

.mymatches-page {
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   FILTERS
--------------------------------------------------------- */

.mymatches-filters {
    margin-bottom: 1rem;
}

.filters-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.filters-meta {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

/* ---------------------------------------------------------
   MATCH LIST
--------------------------------------------------------- */

.matches-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ---------------------------------------------------------
   MATCH CARD
--------------------------------------------------------- */

.match-item {
    background: rgba(255,255,255,0.03);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    transition: background 0.2s ease, transform 0.15s ease;
}

.match-item:hover {
    background: rgba(255,255,255,0.06);
    transform: translateY(-1px);
}

/* ---------------------------------------------------------
   TOP BAR
--------------------------------------------------------- */

.match-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.match-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------
   PAIRS
--------------------------------------------------------- */

.match-pairs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-weight: 700;
    margin: 0.4rem 0;
    text-align: center;
}

.match-pairs .pair {
    font-size: 0.95rem;
}

.match-pairs .vs {
    font-size: 0.75rem;
    opacity: 0.6;
}

.pill.estado-incompleto {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

/* ---------------------------------------------------------
   META
--------------------------------------------------------- */

.match-meta {
    font-size: 0.75rem;
    opacity: 0.65;
    text-align: center;
}

/* Fecha/cancha del partido (si ya se cargó horario) -- para verlo de
   entrada en la lista, sin tener que abrir cada partido. */
.match-schedule {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.3rem;
}

/* ---------------------------------------------------------
   RESULT
--------------------------------------------------------- */

.match-result {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(255,255,255,0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.8rem;
}

.match-result-label {
    opacity: 0.7;
}

.match-sets {
    font-weight: 700;
}

.winner-badge {
    background: rgba(255,215,0,0.12);
    color: #ffd700;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    font-size: 0.75rem;
}

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */

.match-item .btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
}

/* ---------------------------------------------------------
   INVITACIÓN PENDIENTE — highlight + botones inline
--------------------------------------------------------- */

.match-item--invited {
    border: 1.5px solid var(--accent);
    background: rgba(255, 193, 7, 0.06);
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.08);
}

.match-item--invited:hover {
    background: rgba(255, 193, 7, 0.1);
}

.match-invite-actions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255,255,255,0.12);
}

.match-invite-msg {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    margin: 0 0 0.55rem;
    line-height: 1.5;
}

.match-invite-btns {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.match-invite-btns .btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    font-weight: 700;
}

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

/* ---------------------------------------------------------
   ACCION INLINE: CARGAR RESULTADO (estado confirmado)
--------------------------------------------------------- */

.match-load-action {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255,255,255,0.12);
}

.match-load-btn {
    width: 100%;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    justify-content: center;
}

/* ---------------------------------------------------------
   ACCION INLINE: CONFIRMAR / RECHAZAR (estado cargado)
--------------------------------------------------------- */

.match-confirm-action {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255,255,255,0.12);
}

.match-confirm-msg {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    margin: 0 0 0.55rem;
    line-height: 1.5;
}

.match-confirm-btns {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.match-confirm-btns .btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    font-weight: 700;
}

.match-waiting-msg {
    margin-top: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.10);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.65);
}

/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */

.empty-state {
    text-align: center;
    padding: 2rem 1rem;
}

.empty-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.empty-sub {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 992px) {

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

@media (max-width: 576px) {

    .match-pairs {
        flex-direction: column;
        gap: 0.25rem;
    }

    .match-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

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

    /* Búsqueda y botón limpiar ocupan fila completa */
    .filters-row input[type="text"] {
        grid-column: 1 / -1;
    }

    .filters-row button {
        grid-column: 1 / -1;
        justify-self: start;  /* no se estira */
    }

    .filters-meta {
        justify-content: flex-start;
    }

    /* Botones de invitación en columna en mobile */
    .match-invite-btns {
        flex-direction: column;
    }

    .match-invite-btns .btn {
        width: 100%;
        text-align: center;
    }
}

/* ── css/pages/nuevo.css ── */
/* =========================================================
   CREAR PARTIDO NUEVO – Wizard Premium
========================================================= */

/* ---------------------------------------------------------
   PAGE
--------------------------------------------------------- */

.page {
    max-width: 960px;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   INFO BOX
--------------------------------------------------------- */

.u-info-box {
    background: rgba(255,255,255,0.04);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.u-info-title {
    font-weight: 800;
    margin-bottom: 0.4rem;
}

/* ---------------------------------------------------------
   STEP TITLES
--------------------------------------------------------- */

.profile-section-title {
    font-size: 1.05rem;
    font-weight: 800;
}

.u-hint {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 0.6rem;
}

/* ---------------------------------------------------------
   FORM LAYOUT
--------------------------------------------------------- */

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

.form-label {
    font-weight: 700;
    font-size: 0.8rem;
}

/* Inputs ya definidos en components.css,
   acá solo mejoramos la lectura */

.input {
    height: 44px;
}

/* ---------------------------------------------------------
   SELECT GRID
--------------------------------------------------------- */

.row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------
   SEPARATORS
--------------------------------------------------------- */

.u-sep {
    margin: 1.2rem 0;
    opacity: 0.4;
}

/* ---------------------------------------------------------
   ACTIONS
--------------------------------------------------------- */

.page-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.page-actions .btn-primary {
    font-weight: 800;
}

/* ---------------------------------------------------------
   STEP INFO BOX (BOTTOM)
--------------------------------------------------------- */

.u-info-box ul {
    margin: 0;
    padding-left: 1.1rem;
}

.u-info-box li {
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 768px) {

    .page {
        padding: 0 0.25rem;
    }

    .page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── css/pages/reemplazar.css ── */
/* =========================================================
   REEMPLAZAR RIVAL – Acción controlada
========================================================= */

/* ---------------------------------------------------------
   PAGE
--------------------------------------------------------- */

.page {
    max-width: 820px;
    margin: 0 auto;
}

/* ---------------------------------------------------------
   BADGES
--------------------------------------------------------- */

.u-badges {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------
   INFO BOX (Jugadores actuales)
--------------------------------------------------------- */

.u-info-box {
    background: rgba(255,255,255,0.04);
    border-radius: 14px;
    padding: 0.9rem 1rem;
}

.u-list-clean {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.u-player-card {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
}

/* ---------------------------------------------------------
   SECTION TITLES
--------------------------------------------------------- */

.profile-section-title {
    font-size: 1.05rem;
    font-weight: 800;
}

/* ---------------------------------------------------------
   FORM
--------------------------------------------------------- */

.form-group {
    max-width: 420px;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 700;
}

.input {
    height: 44px;
}

/* ---------------------------------------------------------
   SEPARATOR
--------------------------------------------------------- */

.u-sep {
    margin: 1.2rem 0;
    opacity: 0.35;
}

/* ---------------------------------------------------------
   ACTIONS
--------------------------------------------------------- */

.page-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.page-actions .btn-primary {
    font-weight: 800;
}

/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */

.u-empty {
    text-align: center;
    padding: 1.2rem 0;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 768px) {

    .u-list-clean {
        grid-template-columns: 1fr;
    }

    .page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .form-group {
        max-width: 100%;
    }
}

/* ── css/pages/ranking_categoria.css ── */
/* =========================================================
   RANKING CATEGORÍA — UPLAY
   Scope: .page-ranking-categoria
========================================================= */

.page-ranking-categoria {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.page-ranking-categoria .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.page-ranking-categoria .ranking-page-title {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin: .2rem 0 .5rem;
}

.page-ranking-categoria .ranking-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .5rem;
}

/* ---------------------------------------------------------
   PODIO TOP 3
--------------------------------------------------------- */

.podium-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 320px));
    gap: .75rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

.podium-card {
    border-radius: 14px;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .03);
    display: flex;
    align-items: center;
    gap: .85rem;
    transition: transform .18s ease, box-shadow .18s ease;
    text-decoration: none;
    color: inherit;
}

.podium-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}

.podium-card--1st {
    background: rgba(182, 212, 0, .07);
    border-color: rgba(182, 212, 0, .25);
}

.podium-card--2nd {
    background: rgba(192, 192, 192, .05);
    border-color: rgba(192, 192, 192, .15);
}

.podium-card--3rd {
    background: rgba(205, 127, 50, .05);
    border-color: rgba(205, 127, 50, .15);
}

.podium-medal {
    font-size: 1.9rem;
    line-height: 1;
    flex-shrink: 0;
}

.podium-info {
    min-width: 0;
}

.podium-label {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .45;
    margin-bottom: .15rem;
}

.podium-name {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.podium-pts {
    font-size: .8rem;
    font-weight: 700;
    color: var(--accent, #b6d400);
    margin-top: .1rem;
}

/* ---------------------------------------------------------
   CARD CONTENEDORA
--------------------------------------------------------- */

.page-ranking-categoria .section-card {
    margin-bottom: 0;
}

.page-ranking-categoria .section-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------
   BUSCADOR
--------------------------------------------------------- */

.ranking-search-input {
    height: 38px;
    min-width: 220px;
    padding: 0 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    color: inherit;
    font-size: .88rem;
    transition: border-color .15s, background .15s;
    display: block;
}

.ranking-search-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .1);
}

.ranking-search-input::placeholder {
    opacity: .55;
}

/* ---------------------------------------------------------
   TABLA
--------------------------------------------------------- */

.ranking-table {
    font-size: .93rem;
    width: 100%;
}

.ranking-table th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .5;
    padding: .7rem .65rem;
    white-space: nowrap;
}

.ranking-table td {
    padding: .7rem .65rem;
    vertical-align: middle;
}

/* Hover sobre fila */
.ranking-table tbody tr {
    transition: background .13s ease;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.ranking-table tbody tr:hover {
    background: rgba(255, 255, 255, .03);
}

/* ---------------------------------------------------------
   POSICIÓN CON MEDALLAS (TOP 3)
--------------------------------------------------------- */

.rank-pos {
    font-size: 1rem;
    font-weight: 900;
    opacity: .8;
    min-width: 2rem;
    text-align: center;
}

tbody tr:nth-child(1) .rank-pos {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, .5);
    opacity: 1;
}

tbody tr:nth-child(2) .rank-pos {
    color: #c0c0c0;
    text-shadow: 0 0 8px rgba(192, 192, 192, .4);
    opacity: 1;
}

tbody tr:nth-child(3) .rank-pos {
    color: #cd7f32;
    text-shadow: 0 0 8px rgba(205, 127, 50, .4);
    opacity: 1;
}

/* Separador visual después del top 3 */
tbody tr:nth-child(3) {
    border-bottom: 2px solid rgba(182, 212, 0, .15) !important;
}

/* ---------------------------------------------------------
   JUGADOR
--------------------------------------------------------- */

.rank-name {
    font-size: .95rem;
    font-weight: 600;
}

.u-streak-fire {
    font-size: .75rem;
    opacity: .9;
    margin-left: .25rem;
}

/* ---------------------------------------------------------
   USUARIO ACTUAL
--------------------------------------------------------- */

tr.is-me {
    background: linear-gradient(
        90deg,
        rgba(77, 163, 255, .18),
        rgba(77, 163, 255, .04)
    ) !important;
    outline: 1px solid rgba(77, 163, 255, .2);
    outline-offset: -1px;
}

tr.is-me td {
    font-weight: 700;
}

tr.is-me .rank-name::after {
    content: " · vos";
    font-size: .7rem;
    opacity: .5;
    font-weight: 500;
}

/* ---------------------------------------------------------
   TENDENCIA
--------------------------------------------------------- */

.trend-up   { color: #3ecf8e; font-weight: 800; }
.trend-down { color: #ff6b6b; font-weight: 800; }
.trend-eq   { opacity: .35;   font-weight: 700; }

/* ---------------------------------------------------------
   BADGES
--------------------------------------------------------- */

.badge-success {
    background: rgba(62, 207, 142, .15);
    color: #3ecf8e;
    border: 1px solid rgba(62, 207, 142, .25);
    font-size: .68rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    letter-spacing: .03em;
}

.badge-danger {
    background: rgba(255, 107, 107, .13);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, .22);
    font-size: .68rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    letter-spacing: .03em;
}

.badge-muted {
    opacity: .25;
    font-size: .78rem;
}

/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */

.page-ranking-categoria .u-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.page-ranking-categoria .u-empty-icon {
    font-size: 2.8rem;
    opacity: .3;
    margin-bottom: .75rem;
}

.page-ranking-categoria .u-empty-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .3rem;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {

    .page-ranking-categoria .ranking-page-title { font-size: 1.4rem; }

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

    .ranking-search-input {
        min-width: unset;
        width: 100%;
    }

    .page-ranking-categoria .section-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .hide-mobile { display: none !important; }

    .ranking-table { font-size: .88rem; }

    .ranking-table th,
    .ranking-table td { padding: .6rem .45rem; }
}

@media (max-width: 390px) {
    .ranking-table th,
    .ranking-table td { padding: .5rem .35rem; font-size: .82rem; }
}

/* ── css/pages/ranking_general.css ── */
/* =========================================================
   RANKING GENERAL — UPLAY
   Scope: .page-ranking-general
========================================================= */

.page-ranking-general {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.page-ranking-general .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.page-ranking-general .ranking-page-title {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin: .2rem 0 .3rem;
}

/* ---------------------------------------------------------
   CHIPS DE FILTRO
--------------------------------------------------------- */

.ranking-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ranking-chip {
    background: var(--bg-surface, #12314f);
    color: var(--text-secondary, #d1d5db);
    border: none;
    font-size: .8rem;
    font-weight: 600;
    padding: .4rem .9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}

.ranking-chip:hover {
    background: var(--bg-hover, #1f4b75);
}

.ranking-chip.is-active {
    background: var(--accent, #b6d400);
    color: var(--bg-body, #0b1c2d);
}

/* ---------------------------------------------------------
   TABLA ÚNICA
--------------------------------------------------------- */

.page-ranking-general .ranking-table th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .5;
    padding: .6rem .65rem;
    white-space: nowrap;
}

.page-ranking-general .ranking-table td {
    padding: .6rem .65rem;
    vertical-align: middle;
    font-size: .9rem;
    white-space: nowrap;
}

.page-ranking-general .ranking-table tbody tr {
    transition: background .13s ease;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.page-ranking-general .ranking-table tbody tr:hover {
    background: rgba(255, 255, 255, .03);
}

.page-ranking-general .ranking-table .rank-pos {
    font-weight: 700;
}

.ranking-cat-badge {
    display: inline-block;
    background: rgba(182, 212, 0, .12);
    color: var(--accent, #b6d400);
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 6px;
    white-space: nowrap;
}

/* ---------------------------------------------------------
   SCROLL LATERAL EN MOBILE
   (mismo patrón que .page-torneos .u-table-wrap)
--------------------------------------------------------- */

.page-ranking-general .u-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ranking-scroll-hint {
    display: none;
    text-align: center;
    padding: .5rem;
    font-size: .75rem;
    color: var(--muted, #9ca3af);
    background: rgba(255, 255, 255, .03);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {
    .page-ranking-general .ranking-page-title { font-size: 1.4rem; }

    .page-ranking-general .ranking-table--general {
        min-width: 720px;
    }

    .ranking-scroll-hint {
        display: block;
    }

    .page-ranking-general .ranking-table { font-size: .88rem; }
    .page-ranking-general .ranking-table th,
    .page-ranking-general .ranking-table td { padding: .55rem .4rem; }
}

@media (max-width: 390px) {
    .page-ranking-general .ranking-table th,
    .page-ranking-general .ranking-table td { padding: .45rem .3rem; font-size: .82rem; }
}

/* ── css/pages/mi_sede.css ── */
/* =========================================================
   MI SEDE — UPLAY
   Scope: .page-mi-sede, .page-detalle-turno
========================================================= */

.page-mi-sede,
.page-detalle-turno {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---------------------------------------------------------
   BACK LINK
--------------------------------------------------------- */

.turno-back-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: color .13s;
    margin-bottom: -.25rem;
}

.turno-back-link:hover { color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.mi-sede-title {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin: .2rem 0 .2rem;
}

.mi-sede-dir {
    font-size: .85rem;
    margin: 0;
}

/* ---------------------------------------------------------
   STATS
--------------------------------------------------------- */

.sede-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.sede-stat {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    text-align: center;
}

.sede-stat-val {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: .25rem;
    color: var(--accent, #b6d400);
}

.sede-stat-val--green { color: #3ecf8e; }
.sede-stat-val--muted { color: rgba(255,255,255,.35); }

.sede-stat-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .45;
}

/* ---------------------------------------------------------
   CANCHAS
--------------------------------------------------------- */

.canchas-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: .85rem;
}

.cancha-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    transition: border-color .13s;
}

.cancha-row:hover { border-color: rgba(255,255,255,.14); }

.cancha-row--inactiva { opacity: .45; }

.cancha-row-icon {
    color: var(--accent, #b6d400);
    font-size: .9rem;
    flex-shrink: 0;
}

.cancha-nombre-form { flex: 1; margin: 0; }

.cancha-nombre-input {
    background: none;
    border: none;
    color: inherit;
    font-size: .9rem;
    font-weight: 600;
    width: 100%;
    padding: .1rem .2rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background .12s;
}

.cancha-nombre-input:hover,
.cancha-nombre-input:focus {
    background: rgba(255,255,255,.06);
    outline: none;
    cursor: text;
}

.cancha-nombre-input:disabled {
    cursor: default;
    opacity: .5;
}

.cancha-badge {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .15rem .5rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.cancha-badge--activa  { background: rgba(62,207,142,.12); color: #3ecf8e; border: 1px solid rgba(62,207,142,.2); }
.cancha-badge--inactiva { background: rgba(255,255,255,.06); color: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.1); }

.cancha-toggle-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,.3);
    cursor: pointer;
    padding: .3rem .4rem;
    border-radius: 6px;
    font-size: .85rem;
    transition: color .13s, background .13s;
    flex-shrink: 0;
}

.cancha-toggle-btn:hover {
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.06);
}

.cancha-add-form {
    display: flex;
    gap: .5rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

.cancha-add-input {
    flex: 1;
    height: 36px;
    padding: 0 .75rem;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: inherit;
    font-size: .85rem;
}

.cancha-add-input:focus {
    outline: none;
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.09);
}

/* En celular: input y botón apilados para que el nombre se vea completo */
@media (max-width: 480px) {
    .cancha-add-form {
        flex-direction: column;
    }
    .cancha-add-input {
        width: 100%;
        height: 44px;
        font-size: 16px;   /* >=16px evita el auto-zoom de iOS al enfocar */
    }
    .cancha-add-form .btn {
        width: 100%;
        justify-content: center;
    }
    /* Mismo criterio anti-zoom de iOS para el buscador de habituales */
    .habitual-search-input {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------
   VISTA SEMANAL (legacy, mantenido por si se referencia)
--------------------------------------------------------- */

.semana-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------
   GRILLA DE DISPONIBILIDAD
--------------------------------------------------------- */

.disp-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.disp-table {
    width: 100%;
    min-width: 540px;
    border-collapse: collapse;
}

/* En mobile, dar a cada columna ancho legible y scrollear horizontalmente
   en lugar de comprimir las 8 columnas (canchas + 7 días) hasta romperlas. */
@media (max-width: 768px) {
    .disp-table { min-width: 720px; }
}

/* ──────────────────────────────────────────────────────────────
   Separación operación / configuración.
   Reordena por CSS (sin mover HTML): lo operativo (stats, alertas,
   grilla, turnos) queda arriba; las secciones de setup caen al fondo
   bajo el divisor "Configuración de la sede".
────────────────────────────────────────────────────────────── */
.page-mi-sede { display: flex; flex-direction: column; }
.page-mi-sede > .sede-setup { order: 2; }
.sede-config-divider {
    order: 2;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.75rem 0 .5rem;
}
.sede-config-divider::before,
.sede-config-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.1);
}
.sede-config-divider span {
    font-size: .8rem;
    font-weight: 700;
    color: var(--muted, #9aa);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* Barra con el botón de generar turnos, dentro de la sección de horarios */
.tmpl-generar-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.tmpl-generar-hint {
    font-size: .82rem;
    color: var(--muted, #9aa);
}
@media (max-width: 480px) {
    .tmpl-generar-bar .btn { width: 100%; justify-content: center; }
}

/* Acciones por horario fijo (pausar / eliminar la fila completa de la grilla) */
.tmpl-grid-hora { white-space: nowrap; }
.tmpl-hora-top { display: flex; align-items: center; gap: .4rem; }
.tmpl-hora-actions { display: flex; gap: .25rem; margin-top: .2rem; }
.tmpl-hora-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    padding: .1rem .2rem;
    font-size: .9rem;
    line-height: 1;
    transition: color .15s;
}
.tmpl-hora-btn:hover { color: var(--accent, #b6d400); }
.tmpl-hora-del:hover { color: #ef4444; }
.tmpl-hora-pausa-badge {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: #f59e0b;
    background: rgba(245,158,11,.12);
    padding: .05rem .35rem;
    border-radius: 6px;
}
/* Fila pausada: atenuada pero legible */
.tmpl-row-pausada .tmpl-cell-chip { opacity: .4; }
.tmpl-row-pausada .tmpl-grid-hora-val { opacity: .5; }

/* Rango de fechas en el modal de generar turnos */
.tmpl-fecha-row {
    display: flex;
    gap: 1rem;
}
.tmpl-fecha-field { flex: 1; }
.tmpl-fecha-field .template-input { width: 100%; }
@media (max-width: 480px) {
    .tmpl-fecha-row { flex-direction: column; gap: .75rem; }
    .tmpl-fecha-field .template-input { font-size: 16px; }
}

/* Leyenda */
.disp-legend {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    padding: .1rem .5rem;
    border-radius: 4px;
    margin-right: .3rem;
}
.disp-legend::before { content: ''; width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.disp-legend--pub    { color: #4ade80; } .disp-legend--pub::before    { background: #4ade80; }
.disp-legend--fijo   { color: #63b3ed; } .disp-legend--fijo::before   { background: #63b3ed; }
.disp-legend--bloqueo{ color: #f6ad55; } .disp-legend--bloqueo::before{ background: #f6ad55; }

/* Header */
.disp-th-cancha {
    width: 90px;
    min-width: 70px;
    padding: .5rem .75rem .5rem .75rem;
    text-align: left;
}

.disp-th-dia {
    text-align: center;
    padding: .45rem .25rem;
    min-width: 76px;
    border-left: 1px solid rgba(255,255,255,.05);
}

.disp-dia-nombre {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
}

.disp-dia-num {
    display: block;
    font-size: .95rem;
    font-weight: 800;
    color: rgba(255,255,255,.55);
    line-height: 1.2;
}

.disp-th-dia--hoy .disp-dia-nombre { color: rgba(74,222,128,.7); }
.disp-th-dia--hoy .disp-dia-num    { color: #4ade80; }

/* Rows */
.disp-row { border-top: 1px solid rgba(255,255,255,.05); }
.disp-row:hover td { background: rgba(255,255,255,.015); }

.disp-td-cancha {
    padding: .6rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
    vertical-align: top;
}

.disp-td-cell {
    vertical-align: top;
    padding: .35rem .25rem;
    border-left: 1px solid rgba(255,255,255,.05);
}

.disp-td-cell--hoy { background: rgba(74,222,128,.03); }

/* Chips */
.disp-chip-wrap { position: relative; margin-bottom: .18rem; }

.disp-chip {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .45rem;
    border-radius: 5px;
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .12s, filter .12s;
}
.disp-chip:hover { opacity: .82; filter: brightness(1.15); }

/* Verde — turno público UPLAY */
.disp-chip--pub  { background: rgba(74,222,128,.13); color: #4ade80; }
/* Azul — turno fijo (no público, partido) */
.disp-chip--fijo { background: rgba(99,179,237,.13); color: #63b3ed; }
/* Naranja — bloqueo (entrenamiento / torneo) */
.disp-chip--bloqueo { background: rgba(246,173,85,.13); color: #f6ad55; }
/* Lleno */
.disp-chip--full { opacity: .5; }

.disp-chip-hora { font-weight: 800; font-size: .73rem; }
.disp-chip-info { opacity: .75; font-size: .68rem; }

/* Checkbox modo selección */
.disp-cb {
    display: none;
    position: absolute;
    top: 2px; left: 2px;
    z-index: 2;
    cursor: pointer;
    accent-color: #4ade80;
}
.modo-seleccion .disp-cb { display: block; }
.modo-seleccion .disp-chip { padding-left: 1.4rem; }

/* Botón agregar */
.disp-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .18rem 0;
    background: none;
    border: 1px dashed rgba(255,255,255,.1);
    border-radius: 5px;
    color: rgba(255,255,255,.18);
    font-size: .78rem;
    text-decoration: none;
    transition: all .15s;
    margin-top: .1rem;
}
.disp-add-btn:hover {
    border-color: rgba(74,222,128,.5);
    color: #4ade80;
    background: rgba(74,222,128,.06);
}

.disp-row--sin-cancha .disp-td-cancha { opacity: .5; }

.semana-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    min-width: 700px;
}

.dia-col {
    border-right: 1px solid rgba(255,255,255,.05);
    padding: .75rem .6rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.dia-col:last-child { border-right: none; }
.dia-col--hoy { background: rgba(182,212,0,.04); }

.dia-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .05rem;
    margin-bottom: .35rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.dia-nombre {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .45;
}

.dia-num {
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
}

.dia-col--hoy .dia-num { color: var(--accent, #b6d400); }

.dia-mes {
    font-size: .62rem;
    opacity: .4;
    font-weight: 600;
    text-transform: uppercase;
}

.dia-turnos {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.turno-chip {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .35rem .55rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    text-decoration: none;
    color: inherit;
    font-size: .78rem;
    transition: background .13s, border-color .13s;
    cursor: pointer;
}

.turno-chip:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
}

.turno-chip--abierto {
    border-color: rgba(62,207,142,.2);
    background: rgba(62,207,142,.05);
}

.turno-chip--cerrado {
    border-color: rgba(77,163,255,.2);
    background: rgba(77,163,255,.05);
    opacity: .7;
}

.turno-chip--cancelado { opacity: .35; text-decoration: line-through; }

.turno-chip--fijo {
    border-style: dashed;
}

.turno-chip-hora  { font-weight: 700; flex: 1; }
.turno-chip-count { font-size: .7rem; opacity: .6; }

.turno-chip-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.turno-chip-dot--green { background: #3ecf8e; }
.turno-chip-dot--blue  { background: #4da3ff; }
.turno-chip-dot--muted { background: rgba(255,255,255,.25); }

.turno-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border-radius: 8px;
    border: 1px dashed rgba(255,255,255,.12);
    color: rgba(255,255,255,.3);
    font-size: .85rem;
    text-decoration: none;
    transition: border-color .13s, color .13s, background .13s;
    margin-top: .1rem;
}

.turno-add-btn:hover {
    border-color: var(--accent, #b6d400);
    color: var(--accent, #b6d400);
    background: rgba(182,212,0,.05);
}

/* Leyenda tipos en header semana */
.chip-publico-legend {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .72rem; font-weight: 700;
    color: #3ecf8e;
}

.chip-fijo-legend {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .72rem; font-weight: 700;
    color: rgba(255,255,255,.5);
}

/* ---------------------------------------------------------
   DOS COLUMNAS (Horarios + Habituales)
--------------------------------------------------------- */

.sede-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* ---------------------------------------------------------
   JUGADORES HABITUALES
--------------------------------------------------------- */

.habituales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .5rem;
    margin-bottom: 1rem;
}

.habitual-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
}

.habitual-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(182,212,0,.15);
    color: var(--accent, #b6d400);
    font-size: .7rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.habitual-info { flex: 1; min-width: 0; }

.habitual-nombre {
    font-size: .85rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.habitual-cat { font-size: .72rem; opacity: .45; }

.habitual-remove-btn {
    background: none; border: none;
    color: rgba(255,107,107,.5);
    cursor: pointer;
    padding: .2rem .3rem;
    border-radius: 6px;
    font-size: .9rem; line-height: 1;
    transition: color .13s;
    flex-shrink: 0;
}

.habitual-remove-btn:hover { color: #ff6b6b; }

.habitual-search-wrap {
    position: relative;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

.habitual-search-box { position: relative; }

.habitual-search-icon {
    position: absolute; left: .75rem; top: 50%;
    transform: translateY(-50%);
    opacity: .4; font-size: .85rem;
}

.habitual-search-input {
    width: 100%; height: 38px;
    padding: 0 1rem 0 2.2rem;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: inherit; font-size: .88rem;
    box-sizing: border-box;
}

.habitual-search-input:focus {
    outline: none;
    border-color: rgba(255,255,255,.25);
    background: rgba(255,255,255,.09);
}

.habitual-search-results {
    position: absolute; top: calc(100% + .3rem);
    left: 0; right: 0;
    background: var(--surface, #1a1d24);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    overflow: hidden;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

.habitual-result-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem .85rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .12s;
}

.habitual-result-item:last-child { border-bottom: none; }
.habitual-result-item:hover { background: rgba(255,255,255,.04); }
.habitual-result-item.is-habitual { opacity: .5; }

.habitual-result-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    font-size: .68rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; text-transform: uppercase;
}

.habitual-result-info { flex: 1; min-width: 0; }
.habitual-result-nombre { font-size: .85rem; font-weight: 600; }
.habitual-result-cat    { font-size: .72rem; opacity: .4; }
.habitual-result-badge  { font-size: .68rem; opacity: .5; font-style: italic; }

/* ---------------------------------------------------------
   PLANTILLAS
--------------------------------------------------------- */

.templates-list {
    display: flex; flex-direction: column; gap: 0;
    margin-bottom: 1rem;
}

.template-del-btn { color: rgba(255,107,107,.6); padding: .2rem .4rem; }
.template-del-btn:hover { color: #ff6b6b; }

/* ── Grilla semanal de plantillas ── */
.tmpl-grid-wrap {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.tmpl-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}

.tmpl-grid thead th {
    padding: .3rem .5rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.tmpl-grid-th-hora { text-align: left !important; width: 3rem; }

.tmpl-grid tbody tr:hover td { background: rgba(255,255,255,.025); }

.tmpl-grid-hora {
    padding: .4rem .5rem .4rem 0;
    font-size: .78rem;
    font-weight: 700;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
    vertical-align: top;
    border-bottom: 1px solid rgba(255,255,255,.04);
}

.tmpl-grid-cell {
    padding: .3rem .4rem;
    vertical-align: top;
    border-bottom: 1px solid rgba(255,255,255,.04);
    min-width: 70px;
}

/* Chip de cancha dentro de la celda */
.tmpl-cell-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .15rem .4rem;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 600;
    margin: .1rem .1rem;
    background: rgba(99,179,237,.12);
    color: #63b3ed;
    white-space: nowrap;
    position: relative;
}

.tmpl-cell-chip--entrenamiento {
    background: rgba(154,205,50,.12);
    color: #9acd32;
}

.tmpl-cell-chip--torneo_externo {
    background: rgba(246,173,85,.12);
    color: #f6ad55;
}

.tmpl-cell-chip form { display: inline; margin: 0; }

.tmpl-cell-del {
    background: none;
    border: none;
    color: rgba(255,255,255,.25);
    cursor: pointer;
    font-size: .75rem;
    padding: 0 0 0 .15rem;
    line-height: 1;
    display: none;
}

.tmpl-cell-chip:hover .tmpl-cell-del { display: inline; color: rgba(255,107,107,.7); }
.tmpl-cell-del:hover { color: #ff6b6b !important; }

/* ── Horarios fijos colapsable ── */
.horarios-hdr {
    cursor: pointer;
    user-select: none;
    transition: opacity .15s;
}
.horarios-hdr:hover { opacity: .85; }

.horarios-chevron {
    font-size: 1rem;
    opacity: .45;
    flex-shrink: 0;
    transition: transform .22s ease;
}
.horarios-hdr[aria-expanded="true"] .horarios-chevron {
    transform: rotate(180deg);
}

#horarios-fijos-body {
    overflow: hidden;
    transition: none;
}

.template-form {
    display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

.template-input {
    height: 36px; padding: 0 .75rem;
    border-radius: 8px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: inherit; font-size: .85rem;
}

.template-input:focus {
    outline: none;
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.1);
}

.template-input--nombre { flex: 1; min-width: 140px; }

/* ---------------------------------------------------------
   HISTORIAL BADGES
--------------------------------------------------------- */

.sede-badge-closed {
    background: rgba(77,163,255,.13); color: #4da3ff;
    border: 1px solid rgba(77,163,255,.22);
    font-size: .68rem; font-weight: 700;
    padding: .2rem .55rem; border-radius: 999px; letter-spacing: .03em;
}

.sede-badge-resolving {
    background: rgba(255,193,7,.13); color: #ffc107;
    border: 1px solid rgba(255,193,7,.22);
    font-size: .68rem; font-weight: 700;
    padding: .2rem .55rem; border-radius: 999px; letter-spacing: .03em;
}

.turno-tipo-badge {
    font-size: .65rem; font-weight: 700;
    padding: .15rem .5rem; border-radius: 999px;
    letter-spacing: .04em; text-transform: uppercase;
}

.turno-tipo-badge--publico { background: rgba(62,207,142,.1); color: #3ecf8e; border: 1px solid rgba(62,207,142,.2); }
.turno-tipo-badge--fijo    { background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.12); }

/* ---------------------------------------------------------
   DETALLE TURNO — HEADER CARD
--------------------------------------------------------- */

.turno-header-card {
    padding: 1.25rem 1.5rem !important;
}

.section-card.turno-header-card .section-card-body {
    padding: 0 !important;
}

.turno-header-main {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    flex: 1;
    flex-wrap: wrap;
}

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

.turno-header-fecha {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.turno-header-dia {
    font-size: .8rem;
    opacity: .5;
    font-weight: 600;
    text-transform: capitalize;
}

.turno-header-hora {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--accent, #b6d400);
}

.turno-header-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding-top: .5rem;
}

.turno-meta-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 600;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.6);
}

.turno-meta-pill--publico  { background: rgba(62,207,142,.1);  color: #3ecf8e; border-color: rgba(62,207,142,.2); }
.turno-meta-pill--fijo     { background: rgba(255,255,255,.06); color: rgba(255,255,255,.45); }
.turno-meta-pill--abierto  { background: rgba(62,207,142,.08);  color: #3ecf8e; border-color: rgba(62,207,142,.15); }
.turno-meta-pill--cerrado  { background: rgba(77,163,255,.1);   color: #4da3ff; border-color: rgba(77,163,255,.2); }
.turno-meta-pill--resolviendo { background: rgba(255,193,7,.1); color: #ffc107; border-color: rgba(255,193,7,.2); }

/* ---------------------------------------------------------
   JUGADORES SLOTS
--------------------------------------------------------- */

.jugadores-slots {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.jugador-slot {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
}

.jugador-slot--ocupado {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.1);
}

.jugador-slot--vacio {
    background: rgba(255,255,255,.02);
    border-style: dashed;
    border-color: rgba(255,255,255,.07);
}

.jugador-slot-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(182,212,0,.15);
    color: var(--accent, #b6d400);
    font-size: .8rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.jugador-slot-avatar--vacio {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.2);
    font-size: 1rem;
}

.jugador-slot-info { flex: 1; min-width: 0; }

.jugador-slot-nombre {
    font-size: .9rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.jugador-slot-cat { font-size: .75rem; opacity: .45; margin-top: .1rem; }

.jugador-slot-remove {
    background: none; border: none;
    color: rgba(255,107,107,.4);
    cursor: pointer;
    padding: .35rem .45rem;
    border-radius: 8px;
    font-size: .95rem;
    transition: color .13s, background .13s;
    flex-shrink: 0;
}

.jugador-slot-remove:hover {
    color: #ff6b6b;
    background: rgba(255,107,107,.08);
}

/* Asignar jugador #}*/

.asignar-jugador-wrap {
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

.asignar-jugador-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .45;
    margin: 0 0 .6rem;
}

.asignar-jugador-form {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.asignar-jugador-select {
    flex: 1;
    min-width: 200px;
    height: 40px;
    padding: 0 .85rem;
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: inherit;
    font-size: .88rem;
}

.asignar-jugador-select:focus {
    outline: none;
    border-color: var(--accent, #b6d400);
    background: rgba(255,255,255,.1);
}

.turno-info-footer {
    padding: .75rem 1rem;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
}

/* ── Detalle turno bloqueo (entrenamiento / torneo externo) ── */
.bloqueo-card .section-card-body {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.4rem 1.5rem !important;
}

.bloqueo-icon {
    font-size: 2rem;
    opacity: .55;
    flex-shrink: 0;
    line-height: 1;
}

.bloqueo-titulo {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.bloqueo-desc {
    font-size: .82rem;
}

/* ---------------------------------------------------------
   CREAR TURNO — FORM STYLES
--------------------------------------------------------- */

.form-group { display: flex; flex-direction: column; gap: .4rem; }

.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.form-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .5;
}

.form-input {
    height: 42px;
    padding: 0 .85rem;
    border-radius: 10px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: inherit;
    font-size: .92rem;
    transition: border-color .13s, background .13s;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent, #b6d400);
    background: rgba(255,255,255,.1);
}

.form-select { cursor: pointer; }

/* Tipo turno toggle */

.tipo-turno-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.tipo-turno-option { cursor: pointer; }

.tipo-turno-option input { display: none; }

.tipo-turno-card {
    padding: 1rem;
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    text-align: center;
    transition: border-color .15s, background .15s;
    user-select: none;
}

.tipo-turno-option:hover .tipo-turno-card {
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
}

.tipo-turno-option.is-selected .tipo-turno-card {
    border-color: var(--accent, #b6d400);
    background: rgba(182,212,0,.07);
}

.tipo-turno-icon {
    display: block;
    font-size: 1.4rem;
    margin-bottom: .4rem;
    opacity: .6;
}

.tipo-turno-option.is-selected .tipo-turno-icon { opacity: 1; color: var(--accent, #b6d400); }

.tipo-turno-label {
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.tipo-turno-desc {
    font-size: .72rem;
    opacity: .45;
    line-height: 1.3;
}

/* ---------------------------------------------------------
   CREAR TURNO — MODO TABS
--------------------------------------------------------- */

.modo-tabs {
    display: flex;
    gap: .4rem;
    margin-bottom: 1rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: .35rem;
}

.modo-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem .5rem;
    border-radius: 9px;
    border: none;
    background: none;
    color: rgba(255,255,255,.4);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: color .13s, background .13s;
    white-space: nowrap;
}

.modo-tab:hover {
    color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.05);
}

.modo-tab.is-active {
    background: rgba(255,255,255,.1);
    color: #fff;
}

.modo-tab[data-modo="bloqueo_unico"].is-active   { color: #fbbf24; }
.modo-tab[data-modo="bloqueo_rango"].is-active   { color: #f87171; }

/* ---------------------------------------------------------
   CREAR TURNO — INTERVALO PRESETS
--------------------------------------------------------- */

.intervalo-preset {
    height: 34px;
    padding: 0 .75rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.5);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .13s, color .13s, background .13s;
}

.intervalo-preset:hover {
    border-color: rgba(255,255,255,.25);
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.08);
}

.intervalo-preset.is-active {
    border-color: var(--accent, #b6d400);
    color: var(--accent, #b6d400);
    background: rgba(182,212,0,.08);
}

/* ---------------------------------------------------------
   CREAR TURNO — BLOQUEO PREVIEW
--------------------------------------------------------- */

.bloqueo-preview {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .9rem;
    border-radius: 10px;
    background: rgba(248,113,113,.07);
    border: 1px solid rgba(248,113,113,.18);
    color: #fca5a5;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------
   CHIPS — PROPÓSITO (entrenamiento / torneo_externo)
--------------------------------------------------------- */

.turno-chip--entrenamiento {
    border-color: rgba(251,191,36,.25);
    background: rgba(251,191,36,.06);
}

.turno-chip--torneo_externo {
    border-color: rgba(248,113,113,.25);
    background: rgba(248,113,113,.06);
}

.turno-tipo-badge--entrenamiento {
    background: rgba(251,191,36,.12);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,.22);
}

.turno-tipo-badge--torneo_externo {
    background: rgba(248,113,113,.12);
    color: #f87171;
    border: 1px solid rgba(248,113,113,.22);
}

/* ---------------------------------------------------------
   PLANTILLAS ENRIQUECIDAS
--------------------------------------------------------- */

.template-form-new { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }

/* Cancha multi-select en form nueva plantilla */
.tmpl-cancha-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem;
    padding: .35rem .65rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    min-height: 36px;
    min-width: 140px;
    cursor: default;
}

.tmpl-cancha-group-label {
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .45;
    margin-right: .2rem;
    white-space: nowrap;
}

.tmpl-cancha-opt {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    color: rgba(255,255,255,.8);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.tmpl-cancha-opt input[type="checkbox"] {
    accent-color: #4ade80;
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.tmpl-cancha-empty {
    font-size: .78rem;
    color: rgba(255,255,255,.35);
    font-style: italic;
}

/* Días multi-select en form nueva plantilla */
.tmpl-dias-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    padding: .35rem .65rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    min-height: 36px;
}

.tmpl-dia-opt {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    color: rgba(255,255,255,.8);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.tmpl-dia-opt input[type="checkbox"] {
    accent-color: #4ade80;
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.tmpl-new-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.tmpl-new-row--2 { align-items: flex-start; }

/* Agrupación por día */
.tmpl-day-group {
    margin-bottom: .5rem;
}

.tmpl-day-header {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
    padding: .55rem .25rem .2rem;
}

.template-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem .25rem 1rem;
    border-radius: 6px;
    flex-wrap: nowrap;
}

.template-row:hover { background: rgba(255,255,255,.04); }

.template-proposito { font-size: .85rem; opacity: .6; flex-shrink: 0; }
.template-hora { font-size: .8rem; font-weight: 700; min-width: 2.8rem; flex-shrink: 0; }
.template-cancha { font-size: .75rem; opacity: .5; min-width: 4rem; flex-shrink: 0; }
.template-nombre { font-size: .75rem; opacity: .5; font-style: italic; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.template-abonados {
    display: flex;
    gap: .2rem;
    align-items: center;
    flex-shrink: 0;
}

.abonado-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(99,179,237,.2);
    color: #63b3ed;
    font-size: .65rem;
    font-weight: 800;
    cursor: default;
}

.abonado-empty {
    font-size: .72rem;
    opacity: .4;
}

.template-vis-badge {
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: .4rem;
    flex-shrink: 0;
}

.tmpl-pub  { background: rgba(72,187,120,.12); color: #48bb78; }
.tmpl-priv { background: rgba(246,173,85,.12);  color: #f6ad55; }

.tmpl-publico-label {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    cursor: pointer;
    white-space: nowrap;
}

/* Autocomplete abonados en form */
.tmpl-abonados-search-wrap { position: relative; flex: 1; min-width: 160px; }

.tmpl-abonado-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #1e1e2e;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .5rem;
    z-index: 50;
    max-height: 180px;
    overflow-y: auto;
}

.tmpl-abonado-result-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .7rem;
    cursor: pointer;
    font-size: .82rem;
    transition: background .12s;
}

.tmpl-abonado-result-item:hover { background: rgba(255,255,255,.06); }

.tmpl-abonados-selected {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .3rem;
}

.tmpl-abonado-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(99,179,237,.12);
    color: #90cdf4;
    border-radius: 1rem;
    padding: .15rem .55rem;
    font-size: .75rem;
    font-weight: 600;
}

.tmpl-abonado-chip button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: .6;
}

.tmpl-abonado-chip button:hover { opacity: 1; }

/* ---------------------------------------------------------
   TOOLTIP HOVER EN CHIPS DE LA GRILLA
--------------------------------------------------------- */

.disp-tooltip {
    position: fixed;
    background: #16182a;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    padding: .6rem .85rem;
    font-size: .8rem;
    z-index: 300;
    pointer-events: none;
    box-shadow: 0 8px 28px rgba(0,0,0,.55);
    min-width: 130px;
    max-width: 210px;
}

.disp-tip-hora {
    font-weight: 800;
    font-size: .88rem;
    color: rgba(255,255,255,.9);
    margin-bottom: .3rem;
    letter-spacing: -.01em;
}

.disp-tip-count {
    font-size: .72rem;
    color: rgba(255,255,255,.38);
    margin-bottom: .3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.disp-tip-row {
    font-size: .78rem;
    color: rgba(255,255,255,.7);
    padding: .08rem 0;
    line-height: 1.35;
}

.disp-tip-empty {
    font-size: .75rem;
    font-style: italic;
    color: rgba(255,255,255,.28);
}

/* ── Modal rápido crear turno — fila de contexto ── */
.qt-context-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .85rem;
    background: rgba(74,222,128,.07);
    border: 1px solid rgba(74,222,128,.14);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255,255,255,.8);
}

.qt-context-row i {
    color: #4ade80;
    font-size: .9rem;
    flex-shrink: 0;
}

/* Modal generar turnos */
.tmpl-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.tmpl-modal-box {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 1rem;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 16px 48px rgba(0,0,0,.6);
}

.tmpl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem .75rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.tmpl-modal-title { font-weight: 700; font-size: .95rem; }

.tmpl-modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: .1rem .3rem;
}

.tmpl-modal-close:hover { color: #fff; }

.tmpl-modal-body { padding: 1rem 1.25rem; }

.tmpl-modal-label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .5;
    margin-bottom: .4rem;
}

.tmpl-modal-hint {
    font-size: .85rem;
    font-weight: 600;
    margin: 0 0 1rem;
}


.tmpl-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1.25rem 1rem;
    border-top: 1px solid rgba(255,255,255,.07);
}

/* ---------------------------------------------------------
   NAVEGACIÓN SEMANAL
--------------------------------------------------------- */

.semana-nav {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

.semana-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .6rem;
    border-radius: .5rem;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.7);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .13s, color .13s;
}

.semana-nav-btn:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}

.semana-nav-btn--hoy {
    border-color: rgba(99,179,237,.35);
    color: #63b3ed;
}

.semana-nav-btn--hoy:hover {
    background: rgba(99,179,237,.1);
    color: #90cdf4;
}

.semana-hoy-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(99,179,237,.15);
    color: #63b3ed;
    border-radius: .4rem;
    padding: .1rem .45rem;
    margin-left: .5rem;
    vertical-align: middle;
}

/* ---------------------------------------------------------
   ELIMINACIÓN MASIVA — checkboxes + barra flotante
--------------------------------------------------------- */

.turno-chip-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.turno-chip-wrap .bulk-cb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    accent-color: #f87171;
    cursor: pointer;
    z-index: 2;
    display: none;
}

.modo-seleccion .turno-chip-wrap .bulk-cb {
    display: block;
}

.modo-seleccion .turno-chip-wrap .turno-chip {
    padding-left: 1.4rem;
}

.turno-chip-wrap .turno-chip {
    flex: 1;
}

/* checkbox en historial */
.bulk-cb-all,
tbody .bulk-cb {
    accent-color: #f87171;
    cursor: pointer;
    width: 15px;
    height: 15px;
}

/* fila seleccionada */
tr.bulk-selected {
    background: rgba(248, 113, 113, .07);
}

tr.bulk-selected td:first-child {
    border-left: 2px solid #f87171;
}

/* barra flotante */
.bulk-bar {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    display: none;
    align-items: center;
    gap: 1rem;
    background: #1e1e2e;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 2rem;
    padding: .6rem 1rem .6rem 1.25rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    z-index: 1000;
    white-space: nowrap;
    animation: bulkBarIn .22s cubic-bezier(.34,1.56,.64,1);
}

.bulk-bar--visible {
    display: flex;
}

@keyframes bulkBarIn {
    from { transform: translateX(-50%) translateY(120%); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}

.bulk-bar-count {
    font-size: .85rem;
    font-weight: 600;
    color: rgba(255,255,255,.75);
}

.bulk-bar-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.bulk-bar-delete {
    background: #f87171;
    color: #0f0f17;
    font-weight: 700;
    border: none;
    padding: .35rem .9rem;
    border-radius: 1.5rem;
    font-size: .82rem;
    cursor: pointer;
    transition: background .13s;
}

.bulk-bar-delete:hover { background: #fca5a5; }

.bulk-bar-cancel {
    color: rgba(255,255,255,.5);
    font-size: .82rem;
    border-radius: 1.5rem;
    padding: .35rem .75rem;
}

.bulk-bar-cancel:hover { color: rgba(255,255,255,.85); }

/* ---------------------------------------------------------
   ALERTAS CONTEXTUALES
--------------------------------------------------------- */

.alertas-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.alerta {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem 1rem;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 500;
    border: 1px solid;
}

.alerta--warn {
    background: rgba(251,191,36,.08);
    border-color: rgba(251,191,36,.2);
    color: rgba(255,255,255,.85);
}

.alerta--info {
    background: rgba(99,179,237,.08);
    border-color: rgba(99,179,237,.18);
    color: rgba(255,255,255,.85);
}

.alerta-icono {
    font-size: 1rem;
    flex-shrink: 0;
}

.alerta--warn .alerta-icono { color: #fbbf24; }
.alerta--info .alerta-icono { color: #63b3ed; }

.alerta-msg { flex: 1; }

.alerta-accion {
    background: none;
    border: 1px solid;
    border-radius: 6px;
    padding: .2rem .65rem;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .13s, color .13s;
}

.alerta--warn .alerta-accion {
    border-color: rgba(251,191,36,.35);
    color: #fbbf24;
}

.alerta--warn .alerta-accion:hover { background: rgba(251,191,36,.12); }

.alerta--info .alerta-accion {
    border-color: rgba(99,179,237,.35);
    color: #63b3ed;
}

.alerta--info .alerta-accion:hover { background: rgba(99,179,237,.1); }

/* ---------------------------------------------------------
   BOTÓN ASIGNAR JUGADOR (en chips de la grilla)
--------------------------------------------------------- */

.disp-assign-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(99,179,237,.35);
    background: rgba(99,179,237,.1);
    color: #63b3ed;
    font-size: .72rem;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background .13s, color .13s;
    line-height: 1;
}

.disp-chip-wrap:hover .disp-assign-btn { display: flex; }

.disp-assign-btn:hover {
    background: rgba(99,179,237,.25);
    color: #90cdf4;
    border-color: rgba(99,179,237,.6);
}

/* ---------------------------------------------------------
   MODAL ASIGNACIÓN RÁPIDA
--------------------------------------------------------- */

/* Variante compacta del modal box */
.tmpl-modal-box--sm { max-width: 360px; }

.ar-subtitulo {
    font-size: .78rem;
    color: rgba(255,255,255,.4);
    font-weight: 500;
    margin-top: .15rem;
}

.ar-body {
    padding: .5rem 0;
    max-height: 320px;
    overflow-y: auto;
}

.ar-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .12s;
}

.ar-row:last-child { border-bottom: none; }
.ar-row:hover { background: rgba(255,255,255,.025); }

.ar-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(182,212,0,.15);
    color: var(--accent, #b6d400);
    font-size: .72rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.ar-info { flex: 1; min-width: 0; }

.ar-nombre {
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ar-cat {
    font-size: .72rem;
    color: rgba(255,255,255,.38);
    margin-top: .05rem;
}

.ar-btn { flex-shrink: 0; white-space: nowrap; }

.ar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1.75rem 1.25rem;
    text-align: center;
    font-size: .85rem;
    color: rgba(255,255,255,.4);
    font-weight: 500;
    line-height: 1.4;
}

.ar-error {
    font-size: .72rem;
    color: #f87171;
    margin-top: .25rem;
    font-weight: 500;
}

/* ---------------------------------------------------------
   QUICK MODAL — SELECCIÓN DE JUGADORES
--------------------------------------------------------- */

.qt-players-section {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

/* Chips de habituales — people picker */
.qt-hab-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
    padding-right: .25rem;
}

.qt-hab-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .5rem .55rem .45rem;
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    cursor: pointer;
    transition: border-color .13s, background .13s;
    user-select: none;
    min-width: 58px;
}

.qt-hab-chip:hover {
    border-color: rgba(74,222,128,.35);
    background: rgba(74,222,128,.06);
}

.qt-hab-chip.is-selected {
    border-color: #4ade80;
    background: rgba(74,222,128,.12);
}

.qt-hab-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    font-size: .75rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    flex-shrink: 0;
    transition: background .13s, color .13s;
}

.qt-hab-chip.is-selected .qt-hab-avatar {
    background: rgba(74,222,128,.22);
    color: #4ade80;
}

.qt-hab-name {
    font-size: .7rem;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
}

.qt-hab-chip.is-selected .qt-hab-name { color: #4ade80; }

/* Dropdown búsqueda */
.qt-player-results {
    position: absolute;
    top: calc(100% + .3rem);
    left: 0; right: 0;
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    overflow: hidden;
    z-index: 600;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

.qt-player-result-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .12s;
}

.qt-player-result-item:last-child { border-bottom: none; }
.qt-player-result-item:hover { background: rgba(255,255,255,.05); }

.qt-player-result-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    font-size: .7rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.qt-player-result-label {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
}

.qt-player-result-cat {
    display: block;
    font-size: .72rem;
    color: rgba(255,255,255,.38);
    font-weight: 400;
}

/* Footer: contador + chips no habituales */
.qt-players-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .5rem;
    min-height: 1.6rem;
}

.qt-player-counter {
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255,255,255,.3);
    letter-spacing: .04em;
    flex-shrink: 0;
}

.qt-non-hab-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    flex: 1;
}

.qt-non-hab-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: rgba(99,179,237,.12);
    color: #90cdf4;
    border-radius: 999px;
    padding: .15rem .4rem .15rem .6rem;
    font-size: .75rem;
    font-weight: 600;
}

.qt-non-hab-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: .55;
    font-size: .9rem;
}

.qt-non-hab-remove:hover { opacity: 1; }

/* ---------------------------------------------------------
   CHIPS — OCUPACIÓN VISUAL (partido)
   0 → gris tenue   1-2 → ámbar   3 → verde claro
   4/cerrado → --full (ya existente)
--------------------------------------------------------- */

/* Doble clase → gana a .disp-chip--pub / --fijo sin !important */
.disp-chip.disp-chip--occ-0 {
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.22);
    border: 1px dashed rgba(255,255,255,.1);
}

.disp-chip.disp-chip--occ-12 {
    background: rgba(251,191,36,.11);
    color: #fbbf24;
}

.disp-chip.disp-chip--occ-3 {
    background: rgba(74,222,128,.2);
    color: #4ade80;
}

/* ---------------------------------------------------------
   HISTORIAL — FILTROS RÁPIDOS
--------------------------------------------------------- */

.historial-filtros {
    display: flex;
    gap: .4rem;
    margin-bottom: .75rem;
}

.historial-filtro {
    padding: .3rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.45);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .13s, background .13s, color .13s;
}

.historial-filtro:hover {
    border-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.07);
}

.historial-filtro.is-active {
    border-color: rgba(99,179,237,.5);
    background: rgba(99,179,237,.1);
    color: #90cdf4;
}

/* ---------------------------------------------------------
   TOAST DE CONFIRMACIÓN
--------------------------------------------------------- */

.sede-toast {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1.1rem;
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 600;
    z-index: 2000;
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}

.sede-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sede-toast--success {
    background: #1a2e22;
    border: 1px solid rgba(62,207,142,.3);
    color: #3ecf8e;
}

.sede-toast--success i { font-size: 1rem; }

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {
    .mi-sede-title  { font-size: 1.4rem; }
    .sede-stats-row { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    .sede-stat      { padding: .75rem; }
    .sede-stat-val  { font-size: 1.3rem; }
    .sede-two-col   { grid-template-columns: 1fr; }
    .form-group-row { grid-template-columns: 1fr; }
    .tipo-turno-toggle { grid-template-columns: 1fr; }
}

/* ── css/pages/clubes.css ── */
/* =========================================================
   CLUBES — "Dónde jugar" — page-clubes
   Página pública: turnos libres agrupados por club
========================================================= */

.page-clubes {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
.clubes-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.clubes-title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0 0 .25rem;
    line-height: 1.1;
}

.clubes-sub {
    color: rgba(255, 255, 255, .4);
    font-size: .88rem;
    margin: 0;
    line-height: 1.5;
}

.clubes-live-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(74, 222, 128, .1);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, .22);
    padding: .3rem .75rem;
    border-radius: 999px;
    flex-shrink: 0;
    margin-top: .2rem;
    white-space: nowrap;
}

.clubes-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    animation: clubes-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes clubes-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .35; transform: scale(.65); }
}

/* ---------------------------------------------------------
   TABS
--------------------------------------------------------- */
.clubes-tabs {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

.clubes-tab {
    padding: .38rem .9rem;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, .09);
    background: transparent;
    color: rgba(255, 255, 255, .4);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .14s ease;
    line-height: 1;
}

.clubes-tab:hover {
    border-color: rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .7);
}

.clubes-tab.is-active {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
}

/* ---------------------------------------------------------
   LISTA DE CLUBS
--------------------------------------------------------- */
.clubes-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---------------------------------------------------------
   CLUB CARD
--------------------------------------------------------- */
.club-card {
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .15s ease;
}

.club-card:hover {
    border-color: rgba(255, 255, 255, .12);
}

/* Header del club */
.club-card-hdr {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.25rem .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.club-card-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(168,85,247,.18));
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    color: rgba(255, 255, 255, .7);
    letter-spacing: -.03em;
    text-transform: uppercase;
    overflow: hidden;
    flex-shrink: 0;
}

.club-card-avatar--img {
    object-fit: contain;
    display: block;
    background: rgba(255, 255, 255, .06);
    padding: 4px;
}

.club-card-info {
    flex: 1;
    min-width: 0;
}

.club-card-nombre {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.club-card-dir {
    font-size: .76rem;
    color: rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    gap: .3rem;
}

.club-card-dir .bi {
    font-size: .7rem;
    opacity: .6;
}

/* Botón WhatsApp */
.club-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .36rem .75rem;
    border-radius: 8px;
    border: 1.5px solid rgba(37, 211, 102, .3);
    background: rgba(37, 211, 102, .07);
    color: #25D366;
    font-size: .74rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .14s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.club-wa-btn:hover {
    background: rgba(37, 211, 102, .15);
    border-color: rgba(37, 211, 102, .5);
    color: #25D366;
}

.club-wa-btn .bi {
    font-size: .85rem;
}

/* Contenedor de contacto */
.club-card-contact {
    flex-shrink: 0;
}

.club-card-contact--empty {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    color: rgba(255,255,255,.2);
    padding: .36rem .5rem;
}

/* ---------------------------------------------------------
   TURNOS DENTRO DEL CARD
--------------------------------------------------------- */
.club-turns {
    padding: .4rem 0 .3rem;
}

/* Separador de día */
.club-day-sep {
    padding: .5rem 1.25rem .25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .1rem;
}

.club-day-chip {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .16rem .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .38);
    border: 1px solid rgba(255, 255, 255, .07);
}

.club-day-chip.hoy {
    background: rgba(74, 222, 128, .12);
    color: #4ade80;
    border-color: rgba(74, 222, 128, .25);
}

.club-day-chip.manana {
    background: rgba(251, 191, 36, .1);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, .2);
}

/* Fila de turno */
.club-turn-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .035);
    transition: background .12s ease;
}

.club-turn-row:last-child {
    border-bottom: none;
}

.club-turn-row:hover {
    background: rgba(255, 255, 255, .025);
}

/* Hora */
.club-turn-hora {
    font-size: .95rem;
    font-weight: 800;
    color: #fff;
    min-width: 48px;
    letter-spacing: -.02em;
    flex-shrink: 0;
}

/* Cancha */
.club-turn-cancha {
    font-size: .78rem;
    color: rgba(255, 255, 255, .38);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dots de spots */
.club-turn-spots {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

.club-spots-dots {
    display: flex;
    gap: 3px;
    align-items: center;
}

.club-spot-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    flex-shrink: 0;
}

.club-spot-dot.ocupado {
    background: rgba(255, 255, 255, .45);
}

.club-spots-label {
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .38);
    min-width: 52px;
    text-align: right;
}

.club-spots-label.urgente {
    color: #f97316;  /* naranja cuando queda 1 spot */
}

/* Botón Anotarme */
.club-turn-cta {
    flex-shrink: 0;
}

.club-turn-inscribir {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .34rem .75rem;
    border-radius: 8px;
    border: 1.5px solid rgba(74, 222, 128, .3);
    background: rgba(74, 222, 128, .07);
    color: #4ade80;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .14s ease;
    white-space: nowrap;
    line-height: 1;
}

.club-turn-inscribir:hover {
    background: rgba(74, 222, 128, .15);
    border-color: rgba(74, 222, 128, .5);
}

.club-turn-inscribir.ya-inscripto {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .3);
    cursor: default;
    pointer-events: none;
}

.club-turn-inscribir.sin-cat {
    border-color: rgba(251, 191, 36, .2);
    background: rgba(251, 191, 36, .05);
    color: rgba(251, 191, 36, .5);
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */
.clubes-empty {
    text-align: center;
    padding: 4rem 1rem 3rem;
    color: rgba(255, 255, 255, .3);
}

.clubes-empty-icon {
    font-size: 3rem;
    margin-bottom: .75rem;
    opacity: .35;
    display: block;
}

.clubes-empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .55);
    margin-bottom: .35rem;
}

.clubes-empty-sub {
    font-size: .85rem;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 600px) {
    .clubes-title { font-size: 1.4rem; }
    .club-turn-cancha { display: none; }
    .club-card-hdr { padding: .85rem 1rem .75rem; }
    .club-turn-row { padding: .55rem 1rem; }
    .club-day-sep { padding: .4rem 1rem .2rem; }
}

/* ── css/pages/configurar_zonas.css ── */
/* =========================================================
   CONFIGURAR ZONAS – UPLAY (ADMIN PREMIUM)
========================================================= */

.page-configurar-zonas {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 32px;
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.hero-subtitle {
    font-size: .95rem;
    opacity: .7;
    margin-top: .25rem;
}

/* ---------------------------------------------------------
   CHIPS
--------------------------------------------------------- */

.chips {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 600;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-blue {
    background: var(--azul-claro);
}

/* ---------------------------------------------------------
   CARDS
--------------------------------------------------------- */

.page-configurar-zonas .card {
    background: var(--gris-medio);
    border-radius: 18px;
    padding: 22px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    margin-bottom: 20px;
}

/* ---------------------------------------------------------
   TITLES
--------------------------------------------------------- */

.section-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 12px;
}

/* ---------------------------------------------------------
   ALERTS
--------------------------------------------------------- */

.alert {
    border-radius: 12px;
    font-size: .9rem;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {

    .hero-title {
        font-size: 1.6rem;
    }

    .page-configurar-zonas {
        padding: 16px 12px 28px;
    }

}

/* ── css/pages/inscribir_pareja.css ── */
/* =========================================================
   INSCRIBIR PAREJA – UPLAY
   Vista jugador · estética premium
========================================================= */

/* ---------------------------------------------------------
   CONTENEDOR GENERAL
--------------------------------------------------------- */

.page {
    max-width: 920px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.page-header {
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.1;
}

.page-subtitle {
    margin-top: .35rem;
    font-size: .95rem;
    opacity: .7;
}

/* ---------------------------------------------------------
   CARD
--------------------------------------------------------- */

.card {
    margin-top: .5rem;
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* ---------------------------------------------------------
   INFO BOX
--------------------------------------------------------- */

.u-info-box {
    margin-bottom: .5rem;
}

.u-info-title {
    font-weight: 800;
    margin-bottom: .35rem;
}

.u-step-list li {
    margin-bottom: .35rem;
}

/* ---------------------------------------------------------
   FORM
--------------------------------------------------------- */

.form-group {
    margin-top: .5rem;
}

.form-label {
    font-weight: 700;
}

.input {
    margin-top: .35rem;
}

/* Texto de ayuda */
.u-muted {
    font-size: .85rem;
    line-height: 1.4;
}

/* ---------------------------------------------------------
   ACTIONS
--------------------------------------------------------- */

.page-actions {
    margin-top: 1rem;
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.page-actions .btn {
    min-height: 42px;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {

    .page {
        padding-left: .25rem;
        padding-right: .25rem;
    }

    .page-title {
        font-size: 1.6rem;
    }

    .page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions .btn {
        width: 100%;
    }
}

/* ── css/pages/torneo_panel.css ── */
/* =========================================================
   PAGE / TORNEO PANEL (Admin) - RESPONSIVE PRO ✨
   ========================================================= */

.match-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.match-card {
    background: var(--bg-surface);
    border: 1px solid var(--bg-hover);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 110px;
    position: relative;
    overflow: hidden;
}

.match-card:hover {
    border-color: rgba(182, 212, 0, 0.4);
    background: rgba(255, 255, 255, 0.04);
}

/* Status Indicators (Left Border) */
.match-card--played { border-left: 5px solid var(--success); }
.match-card--live { border-left: 5px solid #38bdf8; }
.match-card--pending { border-left: 5px solid var(--warning); }

/* Main Body: Desktop 3-Col */
.match-card-body {
    display: grid;
    grid-template-columns: 1fr 110px 1fr;
    align-items: center;
    gap: 0.75rem;
}

.match-team {
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: opacity 0.2s ease;
}

/* Winner/Loser Visual Logic */
.match-card.is-winner-p1 .match-team:nth-child(1) .team-name { color: var(--accent); font-weight: 800; }
.match-card.is-winner-p1 .match-team:nth-child(3) { opacity: 0.4; }

.match-card.is-winner-p2 .match-team:nth-child(3) .team-name { color: var(--accent); font-weight: 800; }
.match-card.is-winner-p2 .match-team:nth-child(1) { opacity: 0.4; }

.team-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-players {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Scorebox: Modern & Integrated */
.match-score-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    padding: 0.4rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.score-main {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.5px;
}

.score-vs {
    font-size: 0.65rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    letter-spacing: 2px;
}

/* Footer: Compact Tooltip */
.match-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.match-meta {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Vista previa de la llave: cómo van a quedar los cruces según posición
   de zona, mientras el playoff real todavía no existe. Antes el bracket
   quedaba vacío durante toda la fase de zonas. */
.bracket-preview {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--accent, #b6d400);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
}

.bracket-preview-titulo {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary, #f2f5f9);
}

.bracket-preview-sub {
    margin: 0 0 0.8rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted, #9fb3c8);
}

/* Llave en columnas: una por ronda. Cada columna reparte sus partidos con
   space-around, así una ronda con la mitad de partidos queda centrada
   frente a los dos que la alimentan -- se lee como una llave sin
   necesidad de dibujar las líneas. */
.bracket-preview-rondas {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    align-items: stretch;
}

.bracket-preview-col {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 0 0 190px;
    gap: 0.5rem;
}

.bracket-preview-fase {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent, #b6d400);
    margin-bottom: 0.2rem;
}

/* Horario de la fase, debajo del nombre de la ronda. Más chico y en gris:
   acompaña al cuadro sin competirle la atención a los cruces. */
.bracket-preview-horario {
    text-align: center;
    font-size: 0.68rem;
    color: var(--text-muted, #9fb3c8);
    margin-bottom: 0.45rem;
    line-height: 1.35;
}

.bracket-preview-tentativo {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.75;
}

/* Nota al lado de una acción deshabilitada: dice POR QUÉ no se puede, en vez
   de esconder el botón y dejar al organizador adivinando. */
.acciones-nota {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted, #9fb3c8);
    margin-top: 0.3rem;
    line-height: 1.4;
}

.bracket-preview-cruce {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    font-size: 0.76rem;
}

.bracket-preview-num {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #9fb3c8);
    font-size: 0.65rem;
    font-weight: 700;
}

.bracket-preview-lados {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.bracket-preview-vs {
    font-size: 0.62rem;
    color: var(--text-muted, #9fb3c8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Fecha/cancha del partido (si ya se cargó horario) -- para que el panel
   de resultados también muestre cuándo/dónde se juega cada uno, no solo
   el marcador. */
.match-schedule {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--text-muted, #9fb3c8);
    margin-top: 0.5rem;
}

.match-edit-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 8px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* RESPONSIVE: Mobile Force Vertical */
@media (max-width: 768px) {
    .match-grid { grid-template-columns: 1fr; }
    
    .match-card-body {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.5rem;
    }

    .match-team { align-items: center !important; }
    .match-team.text-end { text-align: center !important; }

    .match-score-center {
        order: 0; /* Middle */
        margin: 0.5rem auto;
        width: 100%;
        max-width: 140px;
        background: transparent;
        border: none;
        position: relative;
    }

    /* VS Line in Mobile */
    .score-vs::before, .score-vs::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 40px;
        height: 1px;
        background: rgba(255,255,255,0.05);
    }
    .score-vs::before { right: 100%; margin-right: 10px; }
    .score-vs::after { left: 100%; margin-left: 10px; }

    .match-card-footer {
        flex-direction: column;
        gap: 0.75rem;
    }

    .match-edit-btn {
        width: 100%;
        text-align: center;
        padding: 0.5rem;
    }
}

/* =========================================================
   ACCIONES DEL TORNEO — agrupadas por consecuencia
   =========================================================
   Antes eran 8+ botones en una sola fila (.hero-actions, que ni siquiera
   tiene flex-wrap): el texto se partía en cuatro líneas y, peor, "Eliminar
   definitivamente" tenía exactamente el mismo peso visual que "Ver como
   jugador". Ahora van en grupos, con lo irreversible separado del resto. */
.acciones-grupo {
    margin-bottom: 1.1rem;
}

.acciones-grupo-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted, #9fb3c8);
    margin-bottom: 0.5rem;
}

.acciones-fila {
    display: flex;
    flex-wrap: wrap;          /* lo que faltaba: sin esto el texto se parte */
    align-items: stretch;
    gap: 0.6rem;
}

/* Que un <form> no imponga su propio ancho: el botón manda. */
.acciones-fila form {
    margin: 0;
    display: flex;
}

.acciones-fila .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;      /* el texto nunca se corta a mitad */
    line-height: 1.2;
}

.acciones-fila .btn i {
    font-size: 0.95em;
    opacity: 0.85;
}

/* Zona irreversible: separada por una línea, para que cancelar o eliminar
   no queden a un click de distancia de las acciones cotidianas. */
.acciones-grupo--peligro {
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(239, 68, 68, 0.22);
}

.acciones-grupo--peligro .acciones-grupo-label {
    color: rgba(239, 68, 68, 0.85);
}

@media (max-width: 640px) {
    .acciones-fila,
    .acciones-fila form {
        width: 100%;
    }

    .acciones-fila .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Modo del cuadro: no es un botón de acción sino una configuración, así que
   se muestra como una nota que explica qué va a pasar. Un toggle suelto
   ("Cuadro: automático") no dice si informa el estado o si eso es lo que
   pasa al tocarlo -- y menos a alguien que nunca armó un cuadro a mano. */
.modo-cuadro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-left: 3px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
}

/* Manual: hay algo pendiente de tu lado, se marca con el color de aviso. */
.modo-cuadro--manual {
    border-left-color: var(--warning, #f59e0b);
    background: rgba(245, 158, 11, 0.06);
}

.modo-cuadro-texto {
    flex: 1 1 320px;
    min-width: 0;
}

.modo-cuadro-titulo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

.modo-cuadro-desc {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted, #9fb3c8);
}

.modo-cuadro form {
    margin: 0;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .modo-cuadro form,
    .modo-cuadro .btn {
        width: 100%;
    }
}

/* El "Cómo funciona" va alineado con el título, no debajo. */
.acciones-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* =========================================================
   SUBIDA DEL LOGO DEL TORNEO
   =========================================================
   El max-width fijo de 220px que tenía el input inline no entra al lado
   del botón en un celular (375px de ancho). En escritorio se mantiene
   acotado; en pantalla chica el input ocupa la fila completa y el botón
   baja debajo, gracias al flex-wrap del form. */
.logo-input {
    max-width: 220px;
}

@media (max-width: 576px) {
    .logo-form {
        width: 100%;
    }

    .logo-input {
        max-width: 100%;
        flex: 1 1 100%;
    }

    /* El botón, ya en su propia fila, ocupa todo el ancho: en un celular
       un botón chico al ras del borde es difícil de acertar. */
    .logo-form button {
        width: 100%;
    }
}

/* =========================================================
   ORGANIZADORES DEL TORNEO -- selección en lote
   =========================================================
   Antes cada organizador era un chip con su propio botón ✕ (un POST +
   recarga por persona). Ahora es una lista con checkbox: se tilda a
   varios y se manda un solo POST, tanto para dar de alta como de baja. */
.org-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.org-select-all {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.org-bulk-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.org-list {
    display: flex;
    flex-direction: column;
}

.org-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.org-row:last-child {
    border-bottom: none;
}

.org-pending-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.org-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem 0.4rem 0.75rem;
    background: rgba(182, 212, 0, 0.12);
    border: 1px solid rgba(182, 212, 0, 0.35);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
}

.org-chip-quitar {
    all: unset;
    cursor: pointer;
    color: var(--accent);
    opacity: 0.75;
    line-height: 1;
    padding: 0 0.15rem;
}

.org-chip-quitar:hover {
    opacity: 1;
}

/* Resultado del buscador que ya es organizador (o ya está en la lista
   pendiente de agregar): se ve, pero no se puede volver a elegir. */
.org-search-row-disabled {
    opacity: 0.45;
}

/* =========================================================
   PAREJAS Y PARTIDOS: DESPLEGABLES (en vez de una lista plana)
   Un torneo grande (32avos = 63 partidos, o simplemente muchas parejas)
   volvía la página larguísima, sobre todo en celular, donde .match-grid y
   la grilla de parejas caen a una sola columna. Se agrupan por fase (o se
   recorta la lista de parejas) con <details> nativo, mismo patrón que ya
   usa .horarios-avanzado en torneo_horarios.html.
   ========================================================= */
.panel-fase-grupo {
    margin-bottom: 1rem;
    border: 1px solid var(--bg-hover);
    border-radius: 12px;
    overflow: hidden;
}

.panel-fase-grupo summary {
    cursor: pointer;
    list-style: none;
    padding: 0.85rem 1.1rem;
    font-weight: 700;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-surface);
}

.panel-fase-grupo summary::-webkit-details-marker {
    display: none;
}

.panel-fase-grupo summary::after {
    content: "▾";
    color: var(--text-muted, #9fb3c8);
    transition: transform 0.2s ease;
}

.panel-fase-grupo[open] summary::after {
    transform: rotate(180deg);
}

.panel-fase-grupo summary:hover {
    color: var(--accent, #b6d400);
}

.panel-fase-grupo .panel-fase-cuerpo {
    padding: 1.1rem;
    border-top: 1px solid var(--bg-hover);
}

.panel-fase-badge {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #9fb3c8);
}

/* "Ver las demás parejas": el summary es un link chico, no una barra
   completa como en los partidos -- son pocas parejas, no hace falta el
   mismo peso visual. */
.panel-parejas-mas summary {
    cursor: pointer;
    list-style: none;
    color: var(--accent, #b6d400);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0;
}

.panel-parejas-mas summary::-webkit-details-marker {
    display: none;
}

/* ── css/pages/torneos_listar.css ── */
/* =========================================================
   TORNEOS · LISTADO
   Scope: .page-torneos
========================================================= */

.page-torneos {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ---------------------------------------------------------
   HERO / HEADER
--------------------------------------------------------- */
.page-torneos .section:first-child .card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.page-torneos .section:first-child h2 {
    font-weight: 700;
}

.page-torneos .section:first-child p {
    max-width: 520px;
}

/* ---------------------------------------------------------
   FILTROS (CHIPS)
--------------------------------------------------------- */
.page-torneos .chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.page-torneos .chip {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.page-torneos .chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    opacity: .95;
}

.page-torneos .chip.active {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .08) inset;
}

/* ---------------------------------------------------------
   CARD CONTENEDORA PRINCIPAL
--------------------------------------------------------- */
.page-torneos .section>.card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Header interno */
.page-torneos .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ---------------------------------------------------------
   TABLA
--------------------------------------------------------- */
.page-torneos .u-table-wrap {
    border-radius: var(--radius-lg);
    overflow-y: hidden; /* clip border-radius verticalmente sin bloquear scroll horizontal */
}

/* Hover de fila */
.page-torneos .u-table-uplay tbody tr {
    transition: background-color .15s ease;
}

.page-torneos .u-table-uplay tbody tr:hover {
    background-color: rgba(0, 0, 0, .02);
}

/* Columna nombre */
.page-torneos .u-row-title {
    font-weight: 600;
}

/* ---------------------------------------------------------
   PILLS (TIPO TORNEO)
--------------------------------------------------------- */
.page-torneos .pill {
    font-size: .75rem;
    letter-spacing: .02em;
}

/* Resaltado sutil por tipo */
.page-torneos .pill.americano {
    background: rgba(59, 130, 246, .12);
    color: #2563eb;
}

.page-torneos .pill.playoff {
    background: rgba(168, 85, 247, .12);
    color: #7c3aed;
}

.page-torneos .pill.zona_playoff {
    background: rgba(14, 165, 233, .12);
    color: #0284c7;
}

/* ---------------------------------------------------------
   ESTADOS
--------------------------------------------------------- */
.page-torneos .u-badge-state {
    font-weight: 600;
    letter-spacing: .02em;
}

/* ---------------------------------------------------------
   ACCIONES
--------------------------------------------------------- */
.page-torneos .u-table-actions {
    display: flex;
    gap: .25rem;
    justify-content: flex-end;
}

.page-torneos .u-table-actions .btn {
    transition: background-color .15s ease, transform .15s ease;
}

.page-torneos .u-table-actions .btn:hover {
    transform: translateY(-1px);
}

/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */
.page-torneos .u-empty {
    padding: 2rem 1rem;
    text-align: center;
}

.page-torneos .u-empty-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.page-torneos .u-empty-sub {
    margin-top: .25rem;
    color: var(--muted);
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */
@media (max-width: 768px) {

    .page-torneos .section:first-child .card {
        flex-direction: column;
        align-items: stretch;
    }

    .page-torneos .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }

    .page-torneos .u-table-actions {
        justify-content: flex-start;
    }

    /* ========================================================= 
       FIX MOBILE: Scroll horizontal en tabla 
    ========================================================= */
    .page-torneos .u-table-wrap {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        /* Scroll suave en iOS */
    }

    .page-torneos .u-table-uplay {
        min-width: 650px;
        /* Asegura que la tabla mantenga su ancho */
    }

    /* Indicador visual de que es scrollable */
    .page-torneos .u-table-wrap::after {
        content: "← Deslizá para ver más →";
        display: block;
        text-align: center;
        padding: 0.5rem;
        font-size: 0.75rem;
        color: var(--muted);
        background: rgba(0, 0, 0, 0.02);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
}
/* ── css/pages/torneos_nuevo.css ── */
/* =========================================================
   NUEVO TORNEO
========================================================= */

.page {
    max-width: 900px;
    margin: 0 auto;
}

/* Subcards por tipo */
.section-subcard {
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
}

.section-title {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: .75rem;
}

/* Acciones */
.page-actions {
    display: flex;
    gap: .6rem;
    margin-top: 1.6rem;
}

/* Mobile */
@media (max-width: 768px) {

    .page {
        padding-left: .25rem;
        padding-right: .25rem;
    }

    .page-actions {
        flex-direction: column;
    }

    .page-actions .btn {
        width: 100%;
    }
}

/* ── css/pages/playoff_cuadro.css ── */
/* =========================================================
   PLAYOFF CUADRO – PREMIUM
========================================================= */

.page-playoff {
    max-width: 1200px;
    margin: 0 auto;
}

/* -------------------------
   WRAPPER PRINCIPAL
------------------------- */

.playoff-wrapper {
    padding: 1.5rem;
}

/* -------------------------
   GRID CON CONEXIONES
------------------------- */

/* display:flex en vez de grid de 2 columnas fijas: un cuadro puede tener
   entre 2 y 6 rondas (32avos...final) según el tamaño real de la llave, así
   que el número de columnas no se puede hardcodear. Con flex + min-width,
   las rondas se acomodan una al lado de la otra y, si no entran todas en el
   ancho disponible, la fila scrollea horizontal en vez de romper el layout. */
.playoff-bracket {
    position: relative;
    display: flex;
    gap: 3rem;
    padding: 2rem;
    overflow-x: auto;
}

/* Líneas que conectan cada partido con el que le sigue en la ronda
   siguiente. Se dibujan por JS (playoff_cuadro.html) porque las tarjetas no
   miden siempre lo mismo (una jugada muestra el resultado, una pendiente
   no) — con alturas variables, un cálculo puramente en CSS no da preciso.
   El SVG queda detrás de las columnas (z-index más bajo) y no intercepta
   clicks. */
.playoff-bracket svg#bracket-connectors {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

/* -------------------------
   COLUMNAS DE RONDA
------------------------- */

.round-column {
    display: flex;
    flex-direction: column;
    flex: 0 0 240px;
    gap: 2rem;
    z-index: 1;
}

.round-title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: linear-gradient(90deg, #3ecf8e, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(62, 207, 142, 0.2);
}

/* -------------------------
   MATCH CARD ENHANCED
------------------------- */

.match-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.2rem;
    /* Altura pareja para TODAS las tarjetas de una ronda -- un BYE (1 solo
       equipo) es bastante más bajo que un partido real (2 equipos), y el JS
       de centrarRondas() mide la altura de cada tarjeta para ubicar la
       ronda siguiente. Con alturas dispares en la primera ronda (varios BYE
       mezclados con partidos reales), el cálculo se va acumulando mal ronda
       tras ronda -- se nota recién 2-3 columnas después, como tarjetas
       superpuestas. Fijar el mínimo evita que la diferencia exista. */
    min-height: 210px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Glow effect para partidos jugados */
.match-card.jugado {
    border-color: rgba(62, 207, 142, 0.4);
    box-shadow: 0 0 20px rgba(62, 207, 142, 0.15);
}

/* BYE: no es un partido, es una pareja que pasa directo a la fase
   siguiente. Se muestra al ras para que no compita visualmente con los
   partidos de verdad, pero tiene que estar: si no, la fase parece
   incompleta y no se entiende por qué. Con un solo equipo (la mitad del
   contenido de un partido real) y la misma min-height de arriba, se
   centra verticalmente en vez de quedar pegado arriba con un hueco vacío
   abajo. */
.match-card--bye {
    border-style: dashed;
    border-color: rgba(245, 158, 11, 0.45);
    opacity: 0.85;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Sin transform: las líneas de conexión se calculan una sola vez (por JS,
   con la posición real de cada tarjeta) y no se actualizan en vivo. Si la
   tarjeta se mueve/agranda al pasar el mouse, la línea se queda fija donde
   estaba y se ve desalineada del borde justo en el hover. */
.match-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(62, 207, 142, 0.5);
}

/* Shimmer effect (opcional) */
.match-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.05),
            transparent);
    transition: left 0.5s;
}

.match-card:hover::before {
    left: 100%;
}

/* -------------------------
   MATCH HEADER
------------------------- */

.match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.match-id {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    opacity: 0.5;
    text-transform: uppercase;
}

/* -------------------------
   TEAM ENHANCED
------------------------- */

.team {
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.15s ease;
}

/* Ganador con efecto premium */
.team.state-success {
    background: linear-gradient(135deg,
            rgba(62, 207, 142, 0.2),
            rgba(34, 197, 94, 0.15));
    border: 2px solid rgba(62, 207, 142, 0.6);
    box-shadow: 0 0 16px rgba(62, 207, 142, 0.3);
    animation: winner-glow 1.5s ease-in-out infinite;
}

@keyframes winner-glow {

    0%,
    100% {
        box-shadow: 0 0 16px rgba(62, 207, 142, 0.3);
    }

    50% {
        box-shadow: 0 0 24px rgba(62, 207, 142, 0.5);
    }
}

/* Perdedor difuminado */
.team.state-danger {
    opacity: 0.4;
    filter: grayscale(0.3);
}

/* -------------------------
   MATCH FOOTER
------------------------- */

.match-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.badge-neutral {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

.score {
    font-size: 0.9rem;
    font-weight: 900;
    color: #3ecf8e;
    letter-spacing: 0.05em;
}

/* -------------------------
   DIFERENCIACIÓN POR FASE
------------------------- */

/* La final es siempre la última columna que se renderiza (fases_playoff
   respeta el orden 32avos...final), no "la segunda" — antes esto asumía
   que el cuadro tenía exactamente 2 rondas y le pintaba el dorado a
   cualquier ronda que cayera en esa posición. */
.round-column:last-child .round-title {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.round-column:last-child .match-card {
    border-color: rgba(251, 191, 36, 0.3);
}

.round-column:last-child .match-card:hover {
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 12px 30px rgba(251, 191, 36, 0.25);
}

/* -------------------------
   RESPONSIVE MOBILE
------------------------- */

/* Tablet landscape: apiladas en vertical en vez de una fila horizontal
   scrolleable, más cómodo para leer todas las rondas en una pantalla chica */
@media (max-width: 900px) {
    .playoff-bracket {
        flex-direction: column;
        overflow-x: visible;
        gap: 2rem;
    }

    .round-column {
        flex: 1 1 auto;
        width: 100%;
    }

    .match-card {
        padding: 1rem;
    }
}

/* Mobile portrait */
@media (max-width: 768px) {
    .playoff-wrapper {
        padding: 1rem;
    }

    .playoff-bracket {
        padding: 1rem;
    }

    .round-column {
        gap: 1.5rem;
    }

    .round-title {
        font-size: 1rem;
    }

    .team {
        padding: 0.6rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* Small mobile */
@media (max-width: 390px) {
    .match-card {
        padding: 0.85rem;
    }

    .match-id {
        font-size: 0.7rem;
    }

    .team {
        font-size: 0.85rem;
    }
}
/* ── css/pages/torneos_ranking.css ── */
/* =========================================================
   RANKING TORNEO – UPLAY PREMIUM
========================================================= */

.page-ranking {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* -------------------------
   CARD CONTENEDORA
------------------------- */

.ranking-card {
    margin-top: 1.2rem;
}

/* -------------------------
   TABLA CON HOVER EFFECT
------------------------- */

.ranking-table {
    font-size: .95rem;
}

.ranking-table th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .6;
    padding: .75rem .6rem;
}

.ranking-table td {
    padding: .75rem .6rem;
}

/* Hover effect premium */
.ranking-table tbody tr {
    transition: all 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ranking-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* -------------------------
   POSICIÓN CON MEDALLAS
------------------------- */

.rank-pos {
    font-size: 1.05rem;
    font-weight: 900;
    opacity: .85;
}

/* -------------------------
   JUGADOR
------------------------- */

.rank-name {
    font-size: 1rem;
    font-weight: 700;
}

/* -------------------------
   PUNTOS DESTACADOS
------------------------- */

.ranking-table td strong {
    font-size: 1.05rem;
}

/* -------------------------
   TOP 3 MEDALLAS DESTACADAS
------------------------- */

tbody tr:nth-child(1) .rank-pos {
    color: #ffd700;
    font-size: 1.15rem;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

tbody tr:nth-child(2) .rank-pos {
    color: #c0c0c0;
    font-size: 1.1rem;
    text-shadow: 0 0 8px rgba(192, 192, 192, 0.5);
}

tbody tr:nth-child(3) .rank-pos {
    color: #cd7f32;
    font-size: 1.1rem;
    text-shadow: 0 0 8px rgba(205, 127, 50, 0.5);
}

/* -------------------------
   SEPARADORES VISUALES
------------------------- */

/* Separador después del top 3 */
tbody tr:nth-child(3) {
    border-bottom: 2px solid rgba(62, 207, 142, 0.2) !important;
}

/* Separador después del top 10 */
tbody tr:nth-child(10) {
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

/* -------------------------
   MOBILE RESPONSIVE
------------------------- */

@media (max-width: 768px) {
    .ranking-table {
        font-size: .9rem;
    }

    .ranking-table th,
    .ranking-table td {
        padding: .6rem .4rem;
    }

    .rank-pos {
        font-size: 1rem;
    }

    tbody tr:nth-child(1) .rank-pos {
        font-size: 1.1rem;
    }

    tbody tr:nth-child(2) .rank-pos,
    tbody tr:nth-child(3) .rank-pos {
        font-size: 1.05rem;
    }
}

/* Small mobile */
@media (max-width: 390px) {

    .ranking-table th,
    .ranking-table td {
        padding: 0.5rem 0.3rem;
        font-size: 0.85rem;
    }
}
/* ── css/pages/vista_previa_zonas.css ── */
/* =========================================================
   VISTA PREVIA DE ZONAS – UPLAY
========================================================= */

.page-vista-zonas {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2.5rem;
}

/* -------------------------
   CARD ZONA
------------------------- */

.zona-card .card {
    padding: 1.25rem 1.25rem 1.5rem;
}

/* -------------------------
   TÍTULO ZONA
------------------------- */

.zona-card .section-title {
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* -------------------------
   TABLA ZONA
------------------------- */

.zona-table {
    font-size: .95rem;
}

.zona-table th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .6;
    padding: .6rem .5rem;
}

.zona-table td {
    padding: .65rem .5rem;
    text-align: center;
}

/* -------------------------
   PAREJA
------------------------- */

.zona-pareja {
    text-align: left;
    font-weight: 700;
    min-width: 260px;
}

/* -------------------------
   DIAGONAL
------------------------- */

.zona-diag {
    opacity: .4;
    font-weight: 700;
}

/* -------------------------
   ACCIONES
------------------------- */

.page-actions-center {
    justify-content: center;
    margin-top: 2rem;
}

/* -------------------------
   MOBILE
------------------------- */

@media (max-width: 768px) {

    .zona-pareja {
        min-width: 200px;
        font-size: .9rem;
    }

    .zona-table {
        font-size: .9rem;
    }

}

/* ── css/pages/zonas.css ── */
/* =========================================================
   ZONAS – FASE DE GRUPOS · UPLAY PREMIUM
========================================================= */

.page-zonas {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2.5rem;
}

/* -------------------------
   ZONA CARD WRAPPER
------------------------- */

.zona-card-wrapper {
    margin-bottom: 2rem;
}

/* Card de zona con gradiente sutil */
.zona-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Header de zona */
.zona-card .section-card-header {
    border-bottom: 2px solid rgba(62, 207, 142, 0.2);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.zona-card .section-card-title {
    font-size: 1.3rem;
    font-weight: 800;
    background: linear-gradient(90deg, #3ecf8e, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* -------------------------
   TABLA CON HOVER EFFECT
------------------------- */

.u-table-uplay tbody tr {
    transition: all 0.15s ease;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.u-table-uplay tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateX(4px);
    box-shadow: -4px 0 0 rgba(62, 207, 142, 0.5);
}

/* -------------------------
   CLASIFICADOS DESTACADOS
------------------------- */

.table-success {
    background: linear-gradient(90deg,
            rgba(62, 207, 142, 0.12),
            rgba(62, 207, 142, 0.04),
            transparent) !important;
    border-left: 3px solid #3ecf8e;
}

.table-success:hover {
    background: linear-gradient(90deg,
            rgba(62, 207, 142, 0.18),
            rgba(62, 207, 142, 0.06),
            transparent) !important;
}

/* -------------------------
   MEDALLAS PARA TOP 3
-------------------------
   Se mudaron a components.css como .u-table-podio.

   Acá vivían sin ninguna clase que las acotara:

       tbody tr:nth-child(1) td:first-child::before { content: "🥇"; }

   Como todo el CSS de pages/ se carga en TODAS las pantallas, eso le
   ponía oro, plata y bronce a las tres primeras filas de cualquier tabla
   del sistema. Se veía en el listado de partidos del admin, donde los
   partidos #378, #377 y #376 salían con podio por el solo hecho de estar
   arriba, y hasta en la vista previa del compositor de campañas, que
   inserta el HTML del mail dentro de la página del admin.

   Ahora son opt-in: la tabla que quiere podio pide la clase. */

/* -------------------------
   BADGE CLASIFICA
------------------------- */

.badge-success {
    background: linear-gradient(135deg, #3ecf8e, #16a34a);
    color: #fff;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(62, 207, 142, 0.35);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(62, 207, 142, 0.35);
    }

    50% {
        box-shadow: 0 4px 20px rgba(62, 207, 142, 0.55);
    }
}

/* -------------------------
   STATS DESTACADOS
------------------------- */

.u-table-uplay td.fw-bold {
    font-size: 1.05rem;
    color: #3ecf8e;
}

/* -------------------------
   ZONA SECTION (legacy)
------------------------- */

.zona-section {
    margin-top: 1.5rem;
}

/* -------------------------
   PAREJA
------------------------- */

.zona-pareja {
    font-weight: 700;
}

/* -------------------------
   TABLA (legacy)
------------------------- */

.zona-table {
    font-size: .95rem;
}

.zona-table th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .6;
}

/* -------------------------
   CLASIFICADOS (legacy)
------------------------- */

tr.is-highlight {
    background: linear-gradient(90deg,
            rgba(62, 207, 142, .18),
            rgba(62, 207, 142, .04));
}

tr.is-highlight td {
    font-weight: 700;
}

/* -------------------------
   POSICIÓN (legacy)
------------------------- */

.rank-pos {
    font-weight: 900;
    opacity: .85;
}

/* -------------------------
   MOBILE RESPONSIVE
------------------------- */

@media (max-width: 768px) {
    .zona-card {
        padding: 1rem;
        border-radius: 12px;
    }

    .zona-card .section-card-title {
        font-size: 1.1rem;
    }

    .u-table-uplay tbody tr:hover {
        transform: translateX(2px);
    }

    .zona-table {
        font-size: .9rem;
    }

    .zona-pareja {
        font-size: .9rem;
    }

    .u-table-podio tbody tr:nth-child(1) td:first-child::before,
    .u-table-podio tbody tr:nth-child(2) td:first-child::before,
    .u-table-podio tbody tr:nth-child(3) td:first-child::before {
        font-size: 1rem;
    }
}

/* Tablets */
@media (max-width: 900px) {
    .page-zonas {
        padding-bottom: 2rem;
    }
}

/* Small mobile */
@media (max-width: 390px) {

    .u-table-uplay th,
    .u-table-uplay td {
        padding: 0.5rem 0.4rem;
        font-size: 0.85rem;
    }
}
/* =========================================================
   COLUMNAS DE DESEMPATE
   =========================================================
   Pts, DS y DG son las que efectivamente deciden el orden. Se marcan
   para que se distingan de las que están solo para entender de dónde
   salen (SF/SC, GF/GC) -- si todas pesan igual visualmente, la tabla
   parece una lista de números y no se ve cuál mandó. */
.u-table-uplay th.col-desempate,
.u-table-uplay td.col-desempate {
    background: rgba(255, 255, 255, 0.035);
}

/* ── "¿Cómo se desempata?" ───────────────────────────────── */
.zona-desempate {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.zona-desempate > summary {
    cursor: pointer;
    color: var(--accent, #b6d400);
    font-weight: 600;
    list-style: none;
}

.zona-desempate > summary::-webkit-details-marker {
    display: none;
}

.zona-desempate > summary::before {
    content: "▸ ";
}

.zona-desempate[open] > summary::before {
    content: "▾ ";
}

.zona-desempate-cuerpo {
    margin-top: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-left: 3px solid var(--accent, #b6d400);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 8px 8px 0;
    line-height: 1.55;
}

.zona-desempate-cuerpo p {
    margin: 0 0 0.55rem;
}

.zona-desempate-cuerpo p:last-child {
    margin-bottom: 0;
}

/* ── css/pages/mi_ranking.css ── */
/* =========================================================
   MI HISTORIAL DE RANKING — UPLAY
   Scope: .page-mi-ranking
========================================================= */

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.ranking-historial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.ranking-historial-title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 .2rem;
}

/* ---------------------------------------------------------
   LEYENDA "MENOS PUNTOS = MEJOR"
--------------------------------------------------------- */

.ranking-leyenda {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(77, 163, 255, .1);
    border: 1px solid rgba(77, 163, 255, .2);
    color: #7abfff;
    margin-bottom: 1rem;
}

.ranking-leyenda .bi {
    font-size: .8rem;
}

/* ---------------------------------------------------------
   TABLA
--------------------------------------------------------- */

.page-mi-ranking .u-table-uplay thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .5;
    padding: .85rem .75rem;
}

.page-mi-ranking .u-table-uplay tbody td {
    padding: .85rem .75rem;
    vertical-align: middle;
}

.page-mi-ranking .u-table-uplay tbody tr {
    transition: background .13s ease;
}

.page-mi-ranking .u-table-uplay tbody tr:hover {
    background: rgba(255, 255, 255, .025);
}

/* ---------------------------------------------------------
   FECHA
--------------------------------------------------------- */

.historial-fecha {
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.3;
}

.historial-hora {
    font-size: .75rem;
    opacity: .45;
}

/* ---------------------------------------------------------
   ACTIVIDAD / DESCRIPCIÓN
--------------------------------------------------------- */

.historial-desc {
    font-size: .88rem;
    font-weight: 500;
    max-width: 280px;
    line-height: 1.4;
}

/* ---------------------------------------------------------
   DELTA DE PUNTOS
--------------------------------------------------------- */

.historial-delta {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-weight: 800;
    font-size: .9rem;
    white-space: nowrap;
}

/* Verde = puntos bajan (mejoró en ranking) */
.historial-delta--down {
    color: #3ecf8e;
}

/* Rojo = puntos suben (empeoró en ranking) */
.historial-delta--up {
    color: #ff6b6b;
}

.historial-delta--neutral {
    color: rgba(255, 255, 255, .3);
}

/* ---------------------------------------------------------
   SALDO
--------------------------------------------------------- */

.historial-saldo {
    font-weight: 700;
    font-size: .95rem;
}

/* ---------------------------------------------------------
   EMPTY STATE
--------------------------------------------------------- */

.historial-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    opacity: .7;
}

.historial-empty-icon {
    font-size: 2.5rem;
    margin-bottom: .75rem;
}

.historial-empty-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .25rem;
}

/* ---------------------------------------------------------
   PAGINACIÓN
--------------------------------------------------------- */

.historial-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.historial-pagination .page-info {
    font-size: .82rem;
    opacity: .5;
    padding: 0 .5rem;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {
    .historial-desc { max-width: 160px; font-size: .82rem; }
    .page-mi-ranking .u-table-uplay thead th,
    .page-mi-ranking .u-table-uplay tbody td { padding: .65rem .5rem; font-size: .82rem; }
}

/* ── css/pages.css ── */
/* =========================================================
   PAGE STYLES INDEX
   Importa estilos específicos por vista
========================================================= */

/* Partidos */


/* Auth (login / registro) */


/* Panel / Dashboard (Legacy) */


/* Dashboard Admin & Player Premium (Must be AFTER panel.css to override legacy styles) */


/* Mi perfil */


/* Abierto nuevo */


/* Abierto listar */


/* Cargar resultado */


/* Desafio nuevo */


/* Detalle partido */


/* Listar partidos */


/* Mis partidos */


/* Partido nuevo */


/* reemplazar */


/* Ranking */



/* Mi Sede */


/* Clubes — Dónde jugar */


/* Configurar zonas */


/* Inscribir pareja */



/* Torneos listar */


/* Torneos nuevo */


/* Playoff cuadro */


/* Ranking del torneo */


/* Vista previa zonas */


/* Zonas */


/* Mi historial de ranking */

/* ── css/mobile.css ── */
/* =========================================================
   MOBILE / RESPONSIVE
========================================================= */

/* =========================================================
   GLOBAL OVERFLOW PROTECTION (Mobile-Safe)
========================================================= */

/* 🔧 FIX RESPONSIVE: Prevenir scroll horizontal no deseado */
/* overflow: clip en vez de hidden: recorta sin crear scroll container,
   así los hijos con overflow-x:auto pueden scrollear correctamente */
html {
    overflow-x: clip;
    max-width: 100vw;
}

/* Protección de media para que no rompan layout */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* 🔧 FIX RESPONSIVE: Todas las tablas scrollean horizontalmente
   cuando el contenido es más ancho que la pantalla.
   Aplica globalmente a player y admin pages. */
.u-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =========================================================
   ≤ 1024px – Tablets
========================================================= */

@media (max-width: 1024px) {

    .page {
        padding: var(--gap);
    }

    .card {
        padding: var(--gap);
    }

    .dashboard-grid,
    .metrics-grid,
    .panel-grid-3,
    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }

}

/* =========================================================
   ≤ 768px – Mobile
========================================================= */

@media (max-width: 768px) {

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

    .page {
        padding: var(--gap-sm);
    }

    .section {
        margin-bottom: var(--gap);
    }

    .card {
        padding: var(--gap);
        border-radius: var(--radius-sm);
    }

    /* -------------------------
       Typography
    -------------------------- */

    .page-title {
        font-size: 1.3rem;
    }

    .section-title {
        font-size: 1.1rem;
    }

    /* -------------------------
       Buttons
    -------------------------- */

    .btn {
        width: 100%;
        justify-content: center;
    }

    .btn-sm,
    .btn-lg {
        width: 100%;
    }

    /* -------------------------
       Tables
    -------------------------- */

    .table th,
    .table td {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    /* -------------------------
       Navbar & Sidebar
    -------------------------- */

    .navbar-center {
        display: none;
    }

    .navbar-toggle {
        display: inline-flex;
    }

    /* -------------------------
       Helpers
    -------------------------- */

    .hide-mobile {
        display: none !important;
    }

    /* 🔧 FIX RESPONSIVE: Botones apilan desde tablet para mejor UX táctil */
    .page-actions {
        display: flex;
        flex-direction: column;
        gap: var(--gap-sm);
    }

    .page-actions .btn {
        width: 100%;
    }

}

/* =========================================================
   ≤ 480px – Mobile small
========================================================= */

@media (max-width: 480px) {

    .page {
        padding: var(--gap-xs);
    }

    .card {
        padding: var(--gap-sm);
    }

    .dropdown-menu {
        right: auto;
        left: 0;
        min-width: 100%;
    }

}

/* =========================================================
   MOBILE / PANEL
========================================================= */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .topbar {
        margin-left: 0;
    }

    main {
        margin-left: 0;
    }
}

/* OVERLAY SIDEBAR MOBILE */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1400;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

body.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
}

body.sidebar-open {
    overflow: hidden;
}

/* =========================================================
   NAVBAR MOBILE
========================================================= */

.navbar-mobile {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 64px); /* 🔧 FIX: Limitar a la pantalla */
    overflow-y: auto;               /* 🔧 FIX: Permitir scroll interno */
    -webkit-overflow-scrolling: touch; /* 📱 Smooth scroll iOS */

    background: linear-gradient(180deg, #050812, #10141e);
    padding: 1rem;

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    transform: translateY(-120%);
    transition: transform 0.25s ease;

    z-index: 1100;
}

.navbar-mobile.is-open {
    transform: translateY(0);
}

.navbar-mobile a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 1rem;
    border-radius: var(--radius);
    transition: background 0.2s, color 0.2s;
}

.navbar-mobile a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.navbar-mobile a.active {
    background: rgba(34, 197, 94, 0.15);
    /* Verde suave */
    color: var(--accent);
    font-weight: 600;
}
/* ── css/app.css ── */
/* =========================================================
   UPLAY – CSS ENTRYPOINT
========================================================= */







/* ── css/components/discovery_async.css ── */
/* static/css/components/ui_toast.css */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.uplay-toast {
    min-width: 280px;
    max-width: 350px;
    padding: 16px 20px;
    border-radius: 8px;
    background-color: var(--bg-surface, #1e1e1e);
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.uplay-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.uplay-toast.success { border-left: 4px solid var(--success, #28a745); }
.uplay-toast.error { border-left: 4px solid var(--danger, #dc3545); }
.uplay-toast.warning { border-left: 4px solid var(--warning, #ffc107); }

.uplay-toast .toast-icon { font-size: 1.2rem; }
.uplay-toast.success .toast-icon { color: var(--success, #28a745); }
.uplay-toast.error .toast-icon { color: var(--danger, #dc3545); }
.uplay-toast.warning .toast-icon { color: var(--warning, #ffc107); }

.uplay-toast-body { flex: 1; line-height: 1.4; }
.uplay-toast-close {
    background: transparent;
    border: none;
    color: #888;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
}
.uplay-toast-close:hover { color: #fff; }

/* Modal Premium Animations */
.modal-async-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-async-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.modal-async-container {
    background: var(--bg-surface, #1e1e1e);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    padding: 24px;
    transform: scale(0.95) translateY(10px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.modal-async-backdrop.show .modal-async-container {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.card-remove-transition {
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.4s ease;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}