:root {
    --sidebar-width: 250px;
    --sidebar-bg: #1a2035;
    --sidebar-text: #c8d0e0;
    --sidebar-active-bg: #0d6efd;
    --sidebar-active-text: #fff;
    --sidebar-hover-bg: rgba(255,255,255,0.08);
    --topbar-height: 54px;
}

/* ── Overlay de carga global (ver includes/header.php + assets/js/app.js) ── */
#globalLoadingOverlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease;
}
#globalLoadingOverlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
#globalLoadingOverlay .loading-box {
    background: var(--sidebar-bg, #1a2035);
    color: #fff;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}

/* ── Sidebar ── */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    transition: width .25s ease;
    flex-shrink: 0;
}

/* Zona de nav: scroll independiente */
.sidebar-nav {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }

/* Cabeceras de sección colapsables: mismo color que un nav-link normal (antes iban al 50%
   de opacidad y parecían deshabilitadas) — se distinguen del resto por el peso/tamaño y el
   icono de flecha, no por estar más apagadas. */
.nav-section-toggle {
    color: var(--sidebar-text) !important;
    font-size: .78rem !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700 !important;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    cursor: pointer;
}
.nav-section-toggle:hover {
    background: var(--sidebar-hover-bg) !important;
    color: #fff !important;
}
.nav-section-caret {
    font-size: .65rem;
    opacity: .85;
    transition: transform .2s ease;
}
.nav-section-toggle[aria-expanded="true"] .nav-section-caret {
    transform: rotate(-180deg);
}
/* Items dentro de secciones: ligeramente más compactos */
.sidebar .collapse .nav-link {
    font-size: .84rem;
    padding: .4rem .75rem;
}

.sidebar-header {
    min-height: var(--topbar-height);
    background: rgba(0,0,0,.2);
}

.sidebar-club-name {
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    word-break: break-word;
}

.sidebar-escudo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
}

.sidebar-icon-placeholder {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #6c8ebf;
}

.sidebar-divider {
    border-color: rgba(255,255,255,.1);
    margin: 0;
}

.sidebar .nav-link {
    color: var(--sidebar-text);
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: .875rem;
    transition: background .15s;
}

.sidebar .nav-link:hover {
    background: var(--sidebar-hover-bg);
    color: #fff;
}

.sidebar .nav-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}


/* Sin esto, #page-content (flex item de la fila sidebar+contenido) no se puede encoger
   nunca por debajo del ancho intrínseco de su contenido (comportamiento por defecto
   min-width:auto de flexbox) — una tabla con texto sin wrap en cualquier página puede
   entonces ensanchar TODO el layout más allá del viewport en vez de scrollear solo
   dentro de su propio .table-responsive. */
#page-content {
    min-width: 0;
}

/* ── Topbar ── */
.topbar {
    height: var(--topbar-height);
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ── Cards ── */
.stat-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: transform .15s, box-shadow .15s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.stat-card .stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* ── Tables ── */
.table th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    border-top: none;
}

.table-hover tbody tr:hover {
    background: rgba(13,110,253,.04);
}

/* ── Badges estado pago ── */
.badge-pendiente  { background: #ffc107; color: #000; }
.badge-pagado     { background: #198754; color: #fff; }
.badge-exento     { background: #6c757d; color: #fff; }

/* ── Asistencia / Pagos ── */
.btn-asistencia {
    min-width: 110px;
}

/* Columna jugador fija en tabla de pagos */
.table-pagos thead th:first-child,
.table-pagos tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
}
.table-pagos thead th:first-child {
    background: #f8f9fa;
    z-index: 3;
}

@media (max-width: 767.98px) {
    .btn-asistencia {
        min-width: 44px;
        padding: .2rem .3rem;
        font-size: .85rem;
        font-weight: 700;
    }
    .btn-asistencia .btn-label { display: none; }
    .table-pagos th { min-width: 52px !important; }

    /* Listados (jugadores, entrenadores, socios, equipos, pagos...): fuente más pequeña y celdas más compactas */
    .card-body.p-0 .table {
        font-size: .8rem;
    }
    .card-body.p-0 .table th {
        font-size: .7rem;
    }
    .card-body.p-0 .table th,
    .card-body.p-0 .table td {
        padding: .4rem .5rem;
    }
}

/* ── Login page ── */
.login-wrapper {
    min-height: 100vh;
    min-height: 100dvh; /* ajuste dinámico cuando aparece el teclado */
    background: linear-gradient(135deg, var(--color-principal, #1a2035) 0%, var(--color-secundario, #0d6efd) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 1.5rem 1rem;  /* espacio lateral para que la tarjeta no toque los bordes */
}

.login-card {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

@media (max-width: 575.98px) {
    /* Más margen lateral para que la tarjeta no ocupe toda la pantalla */
    .login-wrapper { padding: 1rem 1.5rem; }
    /* Escudo más pequeño para que el formulario sea visible sin scroll */
    .login-card .login-escudo { max-height: 60px !important; }
    /* Fila "Contraseña / ¿Olvidaste?" apilada en pantallas muy estrechas */
    .login-forgot-row { flex-wrap: wrap; gap: .25rem; }
    /* Reducir padding interno de la tarjeta en xs */
    .login-card.p-4 { padding: 1.1rem !important; }
}

/* ── Tablas: scroll horizontal en móvil ── */
.card > .card-body.p-0 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* El menú "⋮" de una fila (dropdown-menu de Bootstrap) se posiciona dentro de esta caja
   (y de un .table-responsive anidado dentro de ella) — overflow-x:auto fuerza también
   overflow-y a no ser "visible" (regla del spec CSS: un eje "auto" y el otro "visible" a
   la vez no es válido, el navegador convierte el "visible" en "auto"), así que cualquier
   menú que se abra más abajo del borde inferior de la tabla queda recortado. Con varias
   filas casi siempre hay hueco por encima para que Bootstrap lo voltee hacia arriba y se
   vea igual; con una tabla de una sola fila (p.ej. al filtrar un listado y quedar un único
   resultado) no hay hueco en ningún sentido y el menú desaparece por completo. Se
   soluciona quitando el recorte en AMBOS ejes (los dos a la vez, por la misma regla de
   arriba) solo mientras el menú está abierto — clase añadida/quitada por JS con los
   eventos show/hidden.bs.dropdown, delegados a nivel global en app.js. */
.card > .card-body.p-0.menu-abierto,
.table-responsive.menu-abierto {
    overflow: visible;
}

/* ── Sidebar backdrop ── */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1044;
    cursor: pointer;
}
.sidebar-backdrop.show { display: block; }

/* ── Mobile ── */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1045;
        transform: translateX(-100%);
        height: 100vh;
        overflow: hidden;
    }
    .sidebar.show {
        transform: translateX(0);
    }
    #page-content {
        width: 100%;
    }
    main.p-4 {
        padding: .875rem !important;
    }
    /* Formularios de filtro: selects a ancho completo */
    .filter-row .col-auto {
        flex: 1 1 140px;
        min-width: 0;
    }
    .filter-row .col-auto select,
    .filter-row .col-auto input[type="text"] {
        width: 100%;
    }
    /* Ocultar columnas secundarias en tablas */
    .col-hide-mobile { display: none !important; }
    /* Bulk bar en móvil */
    .bulk-bar {
        flex-wrap: wrap;
        padding: .5rem .75rem;
        gap: .4rem;
    }
    .bulk-bar .vr { display: none; }
    .bulk-bar .ms-auto { margin-left: 0 !important; }
}

@media (max-width: 575.98px) {
    /* En pantallas muy pequeñas, comprimir padding de cards */
    .card-header, .card-body:not(.p-0) {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}