/* portal.css — Portal privado del administrador de complejo deportivo
   Diseño oscuro coherente con complejos-deportivos.php / landing.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --p-green:      #22c55e;
    --p-green-dk:   #16a34a;
    --p-green-lt:   rgba(34,197,94,.13);
    --p-green-bg:   rgba(34,197,94,.07);
    --p-blue:       #3b82f6;
    --p-blue-lt:    rgba(59,130,246,.13);
    --p-orange:     #f97316;
    --p-orange-lt:  rgba(249,115,22,.13);
    --p-yellow:     #eab308;
    --p-yellow-lt:  rgba(234,179,8,.13);
    --p-text:       #ffffff;
    --p-muted:      #e5e7eb;
    --p-subtle:     #cbd5e1;
    --p-border:     #334155;
    --p-card-bg:    #1e293b;
    --p-body-bg:    #0f172a;
    --p-nav-bg:     rgba(15,23,42,.92);
    --p-nav-text:   #ffffff;
    --p-shadow:     0 4px 20px rgba(0,0,0,.35);
    --p-radius:     1rem;

    /* ---- "Liquid glass": mismo criterio que assets/css/admin-theme.css
       (panel superadmin) y complejos-deportivos.php — vidrio esmerilado con
       blur+saturación en el "chrome" grande (navbar/sidebar/topbar/tarjetas/
       modales/menús flotantes). --p-glass-nav-bg es más opaco que
       --p-glass-bg a propósito: sobre el nav van textos de menú todo el
       tiempo, necesitan más contraste que una tarjeta de contenido suelta.
       --p-glass-bg-strong es para paneles "flotantes" chicos (modal, menú de
       usuario, campanita) que van encima de todo lo demás. */
    --p-glass-bg:        rgba(30, 41, 59, .55);
    --p-glass-bg-strong: rgba(30, 41, 59, .78);
    --p-glass-nav-bg:    rgba(15, 23, 42, .62);
    --p-glass-border:    rgba(255, 255, 255, .1);
    --p-glass-highlight: rgba(255, 255, 255, .16);
    --p-glass-shadow:    0 1.5rem 3rem -1rem rgba(0,0,0,.55), 0 .25rem .75rem rgba(0,0,0,.25);
    --p-glass-blur:      22px;
}

* { box-sizing: border-box; }

/* Bug real encontrado en auditoría responsive (celular, <992px): el
   ".p-sidebar" queda oculto con "transform: translateX(-100%)" (ver más
   abajo), pero ese desplazamiento lo deja en x negativo SIN sacarlo del
   cálculo de ancho scrolleable del documento — Chromium (confirmado con
   Playwright a 400px) sigue contando ese rectángulo "fantasma" fuera de
   pantalla como parte de document.documentElement.scrollWidth, agregando
   scroll horizontal (~258px, el ancho del propio sidebar) a TODAS las
   pantallas del portal en mobile, aunque nada se vea roto a simple vista.
   overflow-x:hidden en html/body lo bloquea sin afectar el scroll propio
   de elementos que sí lo necesitan (.p-rec-table, tablas table-responsive,
   etc. siguen scrolleando bien adentro suyo — probado). */
html, body.portal-body { overflow-x: hidden; }

body.portal-body {
    background: var(--p-body-bg);
    color: var(--p-text);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: 0;
    min-height: 100vh;
    position: relative;
}

/* Fondo "ambiente" del liquid glass: manchas de color grandes y difusas
   fijas detrás de todo el portal. Sin esto, el vidrio esmerilado (navbar/
   sidebar/tarjetas con blur) desenfoca un color liso y no se nota ningún
   efecto — hace falta variación de color detrás para que el blur se note
   (mismo criterio que body::after de admin-theme.css). Dos de las tres
   manchas usan color-mix con var(--p-green) en vez de un verde fijo: ese
   token ya lo pisa portal/header.php con el color dominante del LOGO de
   cada complejo (color_acento, ver includes/color_helpers.php) — si el logo
   es azul, rojo, etc., el fondo del portal tiene que seguirlo, no quedarse
   en verde. La mancha azul del medio es un segundo tono fijo (igual criterio
   que --app-accent + azul fijo en admin-theme.css), para que siempre haya
   dos colores mezclándose aunque el acento del complejo sea un verde parecido.
   Fixed + z-index negativo: no interfiere con el scroll ni con clics de nada.
   OJO alfa baja a propósito: los carteles ".p-alert"/".p-module-desc" que
   suelen ir arriba de todo (ver portal/header.php) son casi transparentes
   (pensados para un fondo SÓLIDO liso) y quedan justo sobre el pico de estas
   manchas (esquinas superiores) — con alfas altas el resultado se veía como
   un manchón borroso y poco prolijo ("poco nítido") en vez de un tinte apenas
   perceptible. */
body.portal-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 8% 0%,   color-mix(in srgb, var(--p-green) 28%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 95% 8%,  rgba(59, 130, 246, .16) 0%, transparent 50%),
        radial-gradient(circle at 18% 100%, color-mix(in srgb, var(--p-green) 16%, transparent) 0%, transparent 50%);
    filter: blur(50px);
    opacity: 1;
}
/* Sobre fondo claro las mismas manchas quedan más discretas todavía (menos
   opacidad), para no ensuciar el blanco de fondo. */
html[data-bs-theme="light"] body.portal-body::after { opacity: .4; }

/* Wrapper de tablas (Bootstrap .table-responsive) fuera de una .p-card:
   mismo vidrio que el resto del chrome. Cuando queda ANIDADO dentro de una
   .p-card (el caso más común) se anula más abajo, para no acumular blur uno
   adentro del otro (ver ".p-card .table-responsive"). */
.portal-body .table-responsive {
    background: var(--p-glass-bg);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border: 1px solid var(--p-glass-border);
    border-radius: 1.1rem;
    box-shadow: var(--p-glass-shadow);
    padding: .35rem;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .portal-body .table-responsive { background: var(--p-card-bg); }
}

/* ── Navbar ─────────────────────────────────────────────────────────── */
.p-navbar {
    background: var(--p-glass-nav-bg);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border-bottom: 1px solid var(--p-glass-border);
    box-shadow: var(--p-glass-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .p-navbar { background: var(--p-nav-bg); }
}
.p-navbar .container-fluid { padding: 0 1.25rem; min-height: 58px; }

.p-nav-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    min-width: 0;
    flex-shrink: 1;
}
.p-nav-brand img {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.2);
    flex-shrink: 0;
}
.p-nav-brand i { font-size: 1.3rem; color: var(--p-green); flex-shrink: 0; }
.p-nav-brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.p-nav-links {
    display: flex;
    gap: .1rem;
    list-style: none;
    margin: 0; padding: 0;
}
.p-nav-links a {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--p-nav-text);
    text-decoration: none;
    padding: .55rem .85rem;
    border-radius: .5rem;
    font-size: .86rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.p-nav-links a:hover { background: rgba(255,255,255,.09); color: #fff; }
/* Mismo degradé verde → azul del botón "Ver complejo" de
   complejos-deportivos.php, para el link activo del header (portal y jugador). */
.p-nav-links a.active {
    background: linear-gradient(135deg, var(--p-green), #0d4c94);
    color: #fff;
    font-weight: 600;
}
.p-nav-links a i { font-size: .95rem; }

.p-nav-user { position: relative; }
.p-nav-user-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    padding: .4rem .75rem;
    border-radius: .5rem;
    cursor: pointer;
    font-size: .84rem;
    font-weight: 500;
    transition: background .15s;
    white-space: nowrap;
    font-family: inherit;
}
.p-nav-user-btn:hover { background: rgba(255,255,255,.15); }
/* Un nombre de usuario largo no debe poder ensanchar todo el botón (y con
   eso, empujar el navbar entero fuera de la ventana) — se corta con "...". */
.p-nav-user-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.theme-toggle-btn {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: .5rem;
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,.15); }
[data-bs-theme="dark"] .theme-toggle-btn .bi-moon-stars-fill { display: none; }
html[data-bs-theme="light"] .theme-toggle-btn .bi-sun-fill { display: none; }
.p-bell-wrap { position: relative; flex-shrink: 0; }
.p-bell-btn {
    position: relative;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: .5rem;
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    text-decoration: none;
    cursor: pointer;
}
.p-bell-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.p-bell-badge {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    background: var(--p-green);
    color: #fff;
    border-radius: 999px;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    box-shadow: 0 0 0 2px var(--p-nav-bg, #0f172a);
}
html[data-bs-theme="light"] .p-bell-btn {
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.12);
    color: #000;
}
html[data-bs-theme="light"] .p-bell-btn:hover { background: rgba(0,0,0,.09); color: #000; }
html[data-bs-theme="light"] .p-bell-badge { box-shadow: 0 0 0 2px #fff; }
.p-bell-menu {
    display: none;
    position: absolute;
    top: calc(100% + .5rem);
    /* Ancla desde la derecha (no desde la izquierda): la campanita vive
       pegada al borde derecho de la topbar, así que un menú de 240-300px
       que se abre hacia la DERECHA con left:0 termina la mayor parte
       afuera de la pantalla en mobile — se ven los nombres (alineados a
       la izquierda) pero los badges de cantidad, alineados a la derecha
       de cada fila, quedan recortados fuera de la vista. Abriéndolo hacia
       la izquierda queda siempre dentro del viewport. */
    right: 0;
    left: auto;
    min-width: 240px;
    max-width: min(300px, calc(100vw - 1.5rem));
    max-height: 320px;
    overflow-y: auto;
    background: var(--p-glass-bg-strong);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border: 1px solid var(--p-glass-border);
    border-radius: .6rem;
    box-shadow: var(--p-glass-shadow);
    z-index: 1050;
    padding: .4rem 0;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .p-bell-menu { background: var(--p-card-bg, #1e293b); }
}
.p-bell-menu.open { display: block; }
.p-bell-menu-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--p-subtle, #64748b);
    padding: .3rem 1rem .5rem;
}
.p-bell-menu-empty {
    font-size: .82rem;
    color: var(--p-muted, #94a3b8);
    padding: .4rem 1rem .6rem;
}
.p-bell-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 1rem;
    color: var(--p-text, #f1f5f9);
    text-decoration: none;
    font-size: .85rem;
}
.p-bell-menu-item:hover { background: rgba(255,255,255,.06); color: var(--p-text, #f1f5f9); }
html[data-bs-theme="light"] .p-bell-menu-item:hover { background: rgba(0,0,0,.05); }
.p-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--p-green);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
/* Color por rol, para distinguir de un vistazo qué cuenta está logueada:
   jugador queda con el verde por defecto, admin de complejo en azul,
   recepción en naranja y profesor en amarillo (ver portal/header.php y
   jugador/header.php). */
.p-avatar-admin { background: var(--p-blue); }
.p-avatar-recepcion { background: var(--p-orange); }
.p-avatar-profesor { background: var(--p-yellow); }

.p-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--p-glass-bg-strong);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border: 1px solid var(--p-glass-border);
    border-radius: .65rem;
    min-width: 200px;
    box-shadow: var(--p-glass-shadow);
    z-index: 1001;
    overflow: hidden;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .p-dropdown { background: var(--p-card-bg, #1e293b); }
}
.p-dropdown.open { display: block; }
.p-dropdown-header {
    padding: .7rem 1rem .45rem;
    border-bottom: 1px solid var(--p-border);
    font-size: .76rem;
    color: var(--p-subtle);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.p-role-badge {
    display: inline-block;
    margin-left: .4rem;
    padding: .1rem .5rem;
    border-radius: 50rem;
    background: var(--p-green-lt);
    color: var(--p-green);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}
/* Mismo color por rol que .p-avatar-admin/.p-avatar-recepcion/.p-avatar-profesor. */
.p-role-badge-admin { background: var(--p-blue-lt); color: var(--p-blue); }
.p-role-badge-recepcion { background: var(--p-orange-lt); color: var(--p-orange); }
.p-role-badge-profesor { background: var(--p-yellow-lt); color: var(--p-yellow); }
.p-dropdown a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    color: var(--p-text);
    text-decoration: none;
    font-size: .85rem;
    transition: background .12s;
}
.p-dropdown a:hover { background: rgba(255,255,255,.06); }
.p-dropdown .danger { color: #f87171; }
.p-dropdown .danger:hover { background: rgba(239,68,68,.1); }

/* Mobile */
.p-nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    padding: .3rem;
}
@media (max-width: 820px) {
    .p-nav-toggle { display: flex; align-items: center; }
    /* Red de seguridad: si el logo/nombre del complejo + el toggle + tema +
       usuario no entran en una sola fila (nombre largo, pantalla muy angosta),
       el grupo de tema+usuario pasa a una segunda línea en vez de desbordar
       la ventana hacia la derecha (antes el navbar no tenía flex-wrap). */
    .p-navbar .container-fluid {
        flex-wrap: wrap;
        row-gap: .5rem;
        height: auto;
        padding-top: .6rem;
        padding-bottom: .6rem;
    }
    .p-nav-links {
        display: none;
        position: absolute;
        top: 58px; left: 0; right: 0;
        background: #0f172a;
        border-bottom: 1px solid var(--p-border);
        flex-direction: column;
        padding: .5rem .75rem;
        gap: .1rem;
    }
    .p-nav-links.open { display: flex; }
    .p-nav-links a { padding: .7rem 1rem; border-radius: .45rem; }
    .p-nav-user { margin-left: auto; }
}
@media (max-width: 576px) {
    .p-nav-user-btn .p-role-badge { display: none; }
}
@media (max-width: 480px) {
    .p-nav-user-btn .p-nav-user-name { display: none; }
}

/* ── Sidebar vertical ───────────────────────────────────────────────────
   Solo para portal/header.php (admin_complejo/recepción). El navbar
   horizontal de arriba (.p-navbar y compañía) sigue existiendo tal cual
   para jugador/header.php y public/dashboard.php, que lo siguen usando. */
:root { --p-sidebar-width: 258px; }

.p-shell { display: flex; min-height: 100vh; }

.p-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: var(--p-sidebar-width);
    background: var(--p-glass-nav-bg);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border-right: 1px solid var(--p-glass-border);
    box-shadow: var(--p-glass-shadow);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .25s ease;
}
/* Reflejo superior, típico del material "glass" (línea de brillo apenas
   visible arriba, como si captara luz) — mismo recurso que admin-theme.css. */
.p-sidebar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--p-glass-highlight), transparent);
    opacity: .5;
    pointer-events: none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .p-sidebar { background: var(--p-nav-bg); }
}
.p-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.15rem 1.25rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
    min-width: 0;
}
.p-sidebar-brand img {
    width: 36px; height: 36px;
    border-radius: .6rem;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.2);
    flex-shrink: 0;
}
.p-sidebar-brand i { font-size: 1.4rem; color: var(--p-green); flex-shrink: 0; }
.p-sidebar-brand-text-wrap { min-width: 0; }
.p-sidebar-brand-text {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p-sidebar-brand-sub { font-size: .72rem; color: var(--p-muted); }

.p-sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: .75rem; }
.p-sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--p-nav-text);
    text-decoration: none;
    padding: .6rem .8rem;
    border-radius: .55rem;
    font-size: .87rem;
    font-weight: 500;
    margin-bottom: .15rem;
    transition: background .15s, color .15s;
}
.p-sidebar-nav .nav-link i { font-size: 1rem; width: 1.3rem; text-align: center; }
.p-sidebar-nav .nav-link:hover { background: rgba(255,255,255,.09); color: #fff; }
.p-sidebar-nav .nav-link.active {
    background: linear-gradient(135deg, var(--p-green), #0d4c94);
    color: #fff;
    font-weight: 600;
}
/* Submenú del sidebar (ej. "Ventas por cliente"/"Cuenta corriente" debajo de
   "Cantina") — agrupa pantallas de la misma actividad debajo de su padre,
   ESCONDIDO por defecto (pedido explícito): un <ul> anidado adentro del
   <li> del padre, colapsado vía CSS y una flechita que lo abre/cierra por
   JS (ver el toggle al final de este archivo). Arranca expandido solo si
   la página activa es el padre o alguno de sus hijos (clase "open" puesta
   server-side, ver el foreach que arma este <ul>). */
.nav-item-parent { display: flex; flex-direction: column; }
.nav-parent-row { display: flex; align-items: stretch; gap: .25rem; }
.nav-parent-row .nav-link { flex: 1 1 auto; margin-bottom: 0; }
.nav-sub-toggle {
    flex-shrink: 0;
    width: 2rem;
    background: none;
    border: 0;
    color: var(--p-nav-text);
    opacity: .7;
    cursor: pointer;
    border-radius: .4rem;
}
.nav-sub-toggle:hover { opacity: 1; background: rgba(255,255,255,.08); }
.nav-sub-toggle i { transition: transform .15s ease; }
.nav-sub-toggle.open i { transform: rotate(180deg); }
.nav-sub-list {
    display: none;
    padding-left: 0;
    margin: .1rem 0 .15rem;
}
.nav-sub-list.open { display: block; }
.nav-sub-list .nav-link {
    padding-left: 2.3rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    font-size: .8rem;
    position: relative;
}
.nav-sub-list .nav-link::before {
    content: '';
    position: absolute;
    left: 1.4rem;
    top: 0;
    bottom: 50%;
    width: .55rem;
    border-left: 1px solid rgba(255,255,255,.2);
    border-bottom: 1px solid rgba(255,255,255,.2);
    border-bottom-left-radius: .3rem;
}
.nav-sub-list .nav-link i { font-size: .82rem; }
html[data-bs-theme="light"] .nav-sub-toggle { color: #000; }
html[data-bs-theme="light"] .nav-sub-toggle:hover { background: rgba(0,0,0,.06); }
html[data-bs-theme="light"] .nav-sub-list .nav-link::before { border-color: rgba(0,0,0,.18); }

.p-sidebar-footer {
    padding: .9rem 1rem 1.1rem;
    border-top: 1px solid rgba(255,255,255,.07);
}
.p-sidebar-user-row { display: flex; align-items: center; gap: .5rem; }
.p-sidebar-user {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    background: transparent;
    border: none;
    color: inherit;
    padding: .3rem .35rem;
    border-radius: .5rem;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.p-sidebar-user:hover { background: rgba(255,255,255,.06); }
.p-sidebar-user-info { min-width: 0; flex: 1 1 auto; }
.p-sidebar-user-name {
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p-sidebar-user-chevron {
    font-size: .72rem;
    color: var(--p-muted);
    flex-shrink: 0;
    transition: transform .2s ease;
}
.p-sidebar-user[aria-expanded="true"] .p-sidebar-user-chevron { transform: rotate(180deg); }

.p-sidebar-user-menu { display: none; margin-top: .75rem; }
.p-sidebar-user-menu.open { display: block; }

.p-sidebar-categoria {
    margin-bottom: .75rem;
    padding: .6rem .1rem;
    border-top: 1px dashed rgba(255,255,255,.12);
    border-bottom: 1px dashed rgba(255,255,255,.12);
}
.p-sidebar-categoria label { display: block; font-size: .74rem; color: var(--p-muted); margin-bottom: .35rem; }
.p-sidebar-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .1rem;
    color: var(--p-text);
    text-decoration: none;
    font-size: .85rem;
}
.p-sidebar-link:hover { color: var(--p-green); }
.p-sidebar-link.danger { color: #f87171; }
.p-sidebar-link.danger:hover { color: #ef4444; }

.sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035; display: none; }
.sidebar-backdrop.show { display: block; }

.p-content-wrap {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--p-sidebar-width);
    transition: margin-left .2s ease;
}

.p-mobile-topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    background: var(--p-glass-nav-bg);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border-bottom: 1px solid var(--p-glass-border);
    box-shadow: var(--p-glass-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .p-mobile-topbar { background: var(--p-nav-bg); }
}
/* En pantallas anchas .p-mobile-topbar ocupa TODO el ancho del contenido (no
   solo en mobile, ver comentario en portal/header.php) — sin este límite, el
   racimo de íconos (campanita, recibos, videos, informe, stock, idioma,
   tema) quedaba pegado contra el borde derecho de la ventana, lejos del
   resto del contenido (que sí respeta el max-width de .p-main). Mismo ancho
   máximo centrado que .p-main, para que quede alineado con todo lo demás en
   vez de "corrido" hacia el borde. */
.p-mobile-topbar { max-width: 1280px; margin-left: auto; margin-right: auto; }
.p-sidebar-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    border-radius: .5rem;
    width: 2.2rem; height: 2.2rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    flex-shrink: 0;
}
.p-mobile-topbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
}
/* Racimo de íconos (campanitas, idioma, tema) — pedido explícito del
   usuario: antes eran hijos sueltos de .p-mobile-topbar, así que cuando no
   entraban todos en el ancho disponible (pantallas angostas/con zoom, o con
   las nuevas campanitas de Cuenta corriente/Stock agregadas) el desborde
   arrastraba a TODA la página a mostrar su propia barra de scroll
   horizontal.
   Ojo: NO se resolvió con overflow-x:auto acá (la solución "obvia") a
   propósito — cada campanita cuelga un menú desplegable position:absolute
   que se extiende bien por debajo de este racimo; CSS obliga a que
   overflow-y también pase a "auto" apenas overflow-x no es "visible" (no
   se puede tener un eje con scroll y el otro totalmente visible), así que
   esos menús hubieran quedado invisibles, cortados contra el borde de
   este contenedor. En cambio, se los deja pasar a una segunda línea
   cuando no entran todos — nunca se dispara scroll de ningún tipo ni se
   corta ningún desplegable. */
.p-mobile-topbar-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem .75rem;
    flex-shrink: 1;
    min-width: 0;
}

@media (max-width: 991.98px) {
    .p-sidebar { transform: translateX(-100%); }
    .p-sidebar.show { transform: translateX(0); }
    .p-content-wrap { margin-left: 0; }
}

/* ── Barra de navegación inferior (celular): reemplaza al botón ☰ ─────── */
.p-bottom-nav { display: none; }
@media (max-width: 991.98px) {
    .p-bottom-nav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
        padding: .35rem .4rem calc(.35rem + env(safe-area-inset-bottom, 0px));
        background: var(--p-glass-nav-bg, var(--p-nav-bg));
        -webkit-backdrop-filter: blur(var(--p-glass-blur, 14px)) saturate(160%);
        backdrop-filter: blur(var(--p-glass-blur, 14px)) saturate(160%);
        border-top: 1px solid var(--p-glass-border, rgba(255,255,255,.1));
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
    }
    .p-bottom-nav-item {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
        padding: .35rem .15rem; border: 0; border-radius: .8rem; background: transparent;
        color: var(--p-muted, #94a3b8); text-decoration: none; font-size: .68rem; font-weight: 600; line-height: 1.1;
        cursor: pointer; transition: color .15s, background-color .15s;
    }
    .p-bottom-nav-item i { font-size: 1.2rem; line-height: 1; }
    .p-bottom-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .p-bottom-nav-item.active { color: var(--p-green, #22c55e); }
    .p-bottom-nav-item.active i {
        padding: .25rem .9rem; border-radius: 50rem;
        background: color-mix(in srgb, var(--p-green, #22c55e) 18%, transparent);
    }
    .p-bottom-nav-item:hover { color: var(--p-text, #fff); }
    /* El ☰ de arriba ya no hace falta: "Más" abre el mismo menú */
    .p-sidebar-toggle-btn { display: none; }
    /* Que el final de cada pantalla no quede tapado por la barra */
    .p-content-wrap { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    /* (z-index 1030: queda debajo del fondo oscuro 1035 y del menú lateral 1040 al abrirlos) */
}
html[data-bs-theme="light"] .p-bottom-nav { border-top-color: rgba(0, 0, 0, .09); box-shadow: 0 -4px 16px rgba(15, 23, 42, .08); }
html[data-bs-theme="light"] .p-bottom-nav-item:hover { color: #0f172a; }

/* Colapsar el sidebar en desktop: mismo botón de .p-mobile-topbar (que en
   esta vista queda siempre visible, no solo en mobile) — ver el 2do
   addEventListener sobre #sidebarToggle en portal/header.php. */
@media (min-width: 992px) {
    .p-shell.sidebar-collapsed .p-sidebar { transform: translateX(-100%); }
    .p-shell.sidebar-collapsed .p-content-wrap { margin-left: 0; }
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.p-main {
    padding: 1.75rem 1.25rem 4rem;
    max-width: 1280px;
    margin: 0 auto;
}

/* ── Eyebrow label (como en landing) ───────────────────────────────── */
.p-eyebrow {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--p-green);
    margin-bottom: .35rem;
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.p-card {
    background: var(--p-glass-bg);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border-radius: var(--p-radius);
    border: 1px solid var(--p-glass-border);
    box-shadow: var(--p-glass-shadow);
    position: relative;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
/* Reflejo superior tipo "glass" (ver .p-sidebar más arriba). En una .p-card
   anidada dentro de otra (no debería pasar, pero por las dudas) no se repite,
   para no acumular brillos ni blur uno adentro del otro. */
.p-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--p-glass-highlight), transparent);
    opacity: .6;
    pointer-events: none;
}
.p-card .p-card {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
.p-card .p-card::before { display: none; }
/* La tabla dentro de una tarjeta no repite el vidrio (ya está la de la
   tarjeta): mismo criterio que .table-responsive más abajo. */
.p-card .table-responsive {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .p-card { background: var(--p-card-bg); }
}
/* Mismo hover (borde verde + brillo) que .complejo-card de
   complejos-deportivos.php, para que las tarjetas se vean igual en toda la app. */
.p-card:hover {
    border-color: var(--p-green);
    box-shadow: 0 8px 24px -12px rgba(34, 197, 94, .35);
}
.p-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem .85rem;
    border-bottom: 1px solid var(--p-border);
    gap: .75rem;
    flex-wrap: wrap;
}
.p-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--p-text);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}
.p-card-title i { color: var(--p-green); }
.p-card-body { padding: 1.25rem; }

/* ── Hero del dashboard ─────────────────────────────────────────────── */
.p-hero {
    position: relative;
    border-radius: var(--p-radius);
    overflow: hidden;
    min-height: 240px;
    background: linear-gradient(135deg, #0a1628 0%, #0f2d1a 50%, #0d3321 100%);
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--p-border);
}
.p-hero-bg {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%; height: 100%;
    opacity: .3;
}
.p-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
}
.p-hero-content { position: relative; z-index: 1; color: #fff; flex: 1; }
.p-hero-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--p-green);
    margin-bottom: .3rem;
}
.p-hero-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 .4rem;
    letter-spacing: -.02em;
}
.p-hero-sub { font-size: .88rem; color: rgba(255,255,255,.7); margin: 0; }
.p-hero-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1.25rem;
}
.p-hero-stat { text-align: left; }
.p-hero-stat strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--p-green);
    line-height: 1;
}
.p-hero-stat span { font-size: .7rem; color: rgba(255,255,255,.6); margin-top: .1rem; display: block; }
.p-hero-actions { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 1; }

/* ── Stats chips ────────────────────────────────────────────────────── */
.p-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.p-stat-chip {
    background: var(--p-glass-bg);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border: 1px solid var(--p-glass-border);
    box-shadow: var(--p-glass-shadow);
    border-radius: .85rem;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    transition: border-color .2s, transform .15s;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .p-stat-chip { background: var(--p-card-bg); }
}
.p-stat-chip:hover { border-color: #475569; transform: translateY(-2px); }
.p-stat-chip .p-stat-icon {
    width: 44px; height: 44px;
    border-radius: .6rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.p-stat-chip .p-stat-icon.green  { background: rgba(34,197,94,.15);  color: var(--p-green); }
.p-stat-chip .p-stat-icon.blue   { background: rgba(56,189,248,.15); color: #38bdf8; }
.p-stat-chip .p-stat-icon.orange { background: rgba(251,146,60,.15); color: #fb923c; }
.p-stat-chip .p-stat-icon.purple { background: rgba(167,139,250,.15);color: #a78bfa; }
.p-stat-chip strong { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1; color: #fff; }
.p-stat-chip span   { font-size: .71rem; color: var(--p-muted); margin-top: .15rem; display: block; }

/* ── Widget "Resumen de hoy" (portal/index.php) ─────────────────────── */
.p-resumen-hoy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}
.p-resumen-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--p-subtle, #64748b);
    margin-bottom: .35rem;
}
.p-resumen-valor {
    font-size: .95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}
.p-resumen-sep { color: var(--p-subtle, #64748b); font-weight: 400; }

/* ── Módulos / accesos rápidos ──────────────────────────────────────── */
.p-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.p-module-card {
    background: var(--p-glass-bg);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border: 1px solid var(--p-glass-border);
    box-shadow: var(--p-glass-shadow);
    border-radius: var(--p-radius);
    padding: 1.6rem 1.25rem;
    text-align: center;
    text-decoration: none;
    color: var(--p-text);
    transition: border-color .2s, transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .p-module-card { background: var(--p-card-bg); }
}
.p-module-card:hover {
    transform: translateY(-4px);
    border-color: var(--p-green);
    box-shadow: 0 8px 24px rgba(34,197,94,.15);
    color: var(--p-text);
}
.p-module-card .p-mod-icon {
    width: 58px; height: 58px;
    border-radius: 50%;
    background: var(--p-green-lt);
    color: var(--p-green);
    font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    transition: transform .2s;
}
.p-module-card:hover .p-mod-icon { transform: scale(1.08); }
.p-module-card strong { font-size: .95rem; font-weight: 700; color: #fff; }
.p-module-card span   { font-size: .78rem; color: var(--p-muted); }

/* ── Page header ────────────────────────────────────────────────────── */
.p-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.p-page-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
}
.p-page-title i { color: var(--p-green); }

/* ── Botones ────────────────────────────────────────────────────────── */
.p-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .52rem 1.1rem;
    border-radius: .5rem;
    font-size: .86rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s;
    text-decoration: none;
    font-family: inherit;
}
.p-btn:active { transform: scale(.97); }
.slot-btn.active {
    border-color: var(--p-green);
    background: var(--p-green-lt);
    color: #fff;
    font-weight: 700;
}
/* Mismo degradé verde → azul que el botón "Ver complejo" de
   complejos-deportivos.php, para que el botón principal se vea igual en
   toda la app. */
.p-btn-primary {
    background: linear-gradient(135deg, var(--p-green), #0d4c94);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.p-btn-primary:hover {
    background: linear-gradient(135deg, #0d4c94, var(--p-green));
    color: #fff;
    box-shadow: 0 4px 14px rgba(34,197,94,.35);
}
.p-btn-outline {
    background: var(--p-glass-bg);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1.5px solid var(--p-glass-border);
    color: var(--p-muted);
}
.p-btn-outline:hover { border-color: var(--p-green); color: var(--p-green); }
.p-btn-danger { background: #ef4444; color: #fff; }
.p-btn-danger:hover { background: #dc2626; color: #fff; }
.p-btn-sm { padding: .35rem .75rem; font-size: .78rem; }
.p-btn-icon { padding: .4rem; width: 34px; height: 34px; justify-content: center; border-radius: .45rem; }

/* ── Formularios ────────────────────────────────────────────────────── */
.p-label { font-size: .81rem; font-weight: 600; color: var(--p-muted); margin-bottom: .3rem; display: block; letter-spacing: .02em; text-transform: uppercase; }
.p-input {
    width: 100%;
    padding: .58rem .85rem;
    border: 1.5px solid var(--p-glass-border);
    border-radius: .5rem;
    font-size: .9rem;
    color: var(--p-text);
    background: var(--p-glass-bg);
    transition: border-color .15s, box-shadow .15s, background .15s;
    outline: none;
    font-family: inherit;
    color-scheme: dark;
}
.p-input:focus {
    background: var(--p-glass-bg-strong);
    border-color: var(--p-green);
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}
.p-input::placeholder { color: var(--p-subtle); }
.p-input option { background: #1e293b; color: var(--p-text); }
.p-select { appearance: auto; }
.p-textarea { min-height: 90px; resize: vertical; }

/* Bootstrap form overrides dentro del portal */
.portal-body .form-control,
.portal-body .form-select {
    background: var(--p-glass-bg);
    border-color: var(--p-glass-border);
    color: var(--p-text);
}
.portal-body .form-select {
    /* Sin esto, Chrome ignora el color de las <option> del desplegable nativo
       y lo pinta con su propio estilo oscuro/azulado automático. */
    color-scheme: dark;
}
.portal-body .form-control:focus,
.portal-body .form-select:focus {
    background: var(--p-glass-bg-strong);
    border-color: var(--p-green);
    color: var(--p-text);
    box-shadow: 0 0 0 .2rem rgba(34,197,94,.18);
}
.portal-body .form-control::placeholder { color: var(--p-subtle); }
.portal-body .form-select option { background: #1e293b; color: var(--p-text); }
.portal-body .form-label { color: var(--p-muted); font-size: .82rem; font-weight: 600; }
.portal-body .form-check-input:checked {
    background-color: var(--p-green);
    border-color: var(--p-green);
}
.portal-body .form-check-input:focus {
    border-color: var(--p-green);
    box-shadow: 0 0 0 .2rem rgba(34,197,94,.18);
}
.portal-body .input-group-text {
    background: #1e293b;
    border-color: var(--p-border);
    color: var(--p-muted);
}

/* ── Agenda (turnos) ────────────────────────────────────────────────── */
/* Encabezado "Hoy"/"Mañana"/fecha cuando la mini-agenda de portal/index.php
   agrupa turnos de más de un día — el 1ro no lleva margen superior (ya lo da
   el padding del .p-card-body de afuera). */
.p-agenda-dia-header {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--p-subtle);
    padding: .9rem 1.1rem .4rem;
}
.p-agenda-dia-header:first-child { padding-top: 1.1rem; }
.p-agenda-grid { display: grid; gap: 1px; background: var(--p-border); border-radius: .6rem; overflow: hidden; margin: 0 1.1rem 1rem; }
.p-agenda-grid:last-child { margin-bottom: 1.1rem; }
.p-slot {
    padding: .55rem .85rem;
    font-size: .82rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    transition: filter .12s;
    background: var(--p-card-bg);
    min-height: 46px;
}
.p-slot:hover { filter: brightness(1.15); }
/* Mismos colores que la grilla de Agenda del panel admin (bg-warning/success/
   primary/secondary/dark de Bootstrap, ver admin/turnos_agenda.php): toda la
   celda de la reserva se pinta con el color sólido del estado, no solo un
   borde/tinte — a pedido explícito, para que se vea igual que como lo tiene
   el usuario recepción. Las variantes de texto/subtítulo se aclaran u
   oscurecen según el color de fondo para mantener contraste legible. */
.p-slot.libre      { border-left: 4px solid var(--p-green); }
.p-slot.senado     { background: #ffc107; color: #1f2937; }
.p-slot.confirmada { background: #198754; color: #fff; }
.p-slot.en-curso   { background: #0d6efd; color: #fff; }
.p-slot.completada { background: #6c757d; color: #fff; }
.p-slot.ausente    { background: #212529; color: #fff; }
.p-slot.bloqueado  { background: #475569; color: #fff; cursor: default; }
/* Horario extra que solo existe porque OTRA cancha del complejo tiene una
   tarifa que extiende la apertura/cierre general (ver rangoExpandidoGrilla()
   en includes/turnos_helpers.php) — esta cancha puntual no tiene ninguna
   tarifa que cubra esta hora, así que no se puede reservar acá. */
.p-slot.sin-tarifa { opacity: .45; cursor: not-allowed; }
.p-slot.sin-tarifa:hover { filter: none; }
.p-slot.senado .p-slot-hora, .p-slot.senado .p-slot-cliente, .p-slot.senado .p-slot-precio { color: #1f2937; }
.p-slot.confirmada .p-slot-hora, .p-slot.confirmada .p-slot-precio,
.p-slot.en-curso .p-slot-hora, .p-slot.en-curso .p-slot-precio,
.p-slot.completada .p-slot-hora, .p-slot.completada .p-slot-precio,
.p-slot.ausente .p-slot-hora, .p-slot.ausente .p-slot-precio,
.p-slot.bloqueado .p-slot-hora, .p-slot.bloqueado .p-slot-precio { color: rgba(255,255,255,.85); }
.p-slot.confirmada .p-slot-cliente, .p-slot.en-curso .p-slot-cliente,
.p-slot.completada .p-slot-cliente, .p-slot.ausente .p-slot-cliente,
.p-slot.bloqueado .p-slot-cliente { color: #fff; }
/* El badge de precio reutiliza .p-badge-verde/naranja/etc (pensados para
   fondos neutros), pero acá va DENTRO de una fila ya coloreada por estado:
   texto verde sobre fondo verde, naranja sobre amarillo, etc. quedaba casi
   invisible. Se pisa el color/fondo del badge según el color de la fila
   (no según su propia clase semántica), para que siempre contraste. */
.p-slot.confirmada .p-badge, .p-slot.en-curso .p-badge,
.p-slot.completada .p-badge, .p-slot.ausente .p-badge,
.p-slot.bloqueado .p-badge { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.35); }
.p-slot.senado .p-badge { background: rgba(31,41,55,.14); color: #1f2937; border-color: rgba(31,41,55,.25); }
/* Columna de montos (Seña/Saldo/Total) de la grilla diaria de portal/turnos.php:
   mismo problema que el badge de arriba, colores fijos (verde/ámbar/gris)
   pensados para fondo neutro, ilegibles sobre una fila ya coloreada por
   estado (ej. "Total" gris sobre fondo verde). Se pisan según el color de
   la fila, igual que .p-slot-precio más arriba. */
.p-slot-money { text-align: right; font-size: .68rem; line-height: 1.35; white-space: nowrap; }
.p-slot-sena  { color: var(--p-green); font-weight: 600; }
.p-slot-saldo { color: #f59e0b; font-weight: 600; }
.p-slot-total { color: var(--p-muted); }
.p-slot.senado .p-slot-sena  { color: #14532d; }
.p-slot.senado .p-slot-saldo { color: #7c2d12; }
.p-slot.senado .p-slot-total { color: #1f2937; }
.p-slot.confirmada .p-slot-sena, .p-slot.en-curso .p-slot-sena,
.p-slot.completada .p-slot-sena, .p-slot.ausente .p-slot-sena,
.p-slot.bloqueado .p-slot-sena { color: #fff; }
.p-slot.confirmada .p-slot-saldo, .p-slot.en-curso .p-slot-saldo,
.p-slot.completada .p-slot-saldo, .p-slot.ausente .p-slot-saldo,
.p-slot.bloqueado .p-slot-saldo { color: #fde68a; }
.p-slot.confirmada .p-slot-total, .p-slot.en-curso .p-slot-total,
.p-slot.completada .p-slot-total, .p-slot.ausente .p-slot-total,
.p-slot.bloqueado .p-slot-total { color: rgba(255,255,255,.75); }
.p-slot-hora   { font-weight: 700; white-space: nowrap; color: var(--p-muted); font-size: .74rem; min-width: 80px; }
.p-slot-info   { flex: 1; min-width: 0; }
.p-slot-cliente{ font-weight: 600; font-size: .84rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-slot-precio { font-size: .74rem; color: var(--p-muted); }

.p-agenda-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: 1.25rem; font-size: .78rem; color: var(--p-muted); }
.p-agenda-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.p-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ── Canchas grid ───────────────────────────────────────────────────── */
.p-canchas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.25rem; }
.p-cancha-card {
    background: var(--p-glass-bg);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border-radius: var(--p-radius);
    border: 1px solid var(--p-glass-border);
    box-shadow: var(--p-glass-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, transform .2s;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .p-cancha-card { background: var(--p-card-bg); }
}
.p-cancha-card:hover { border-color: var(--p-green); transform: translateY(-3px); }
.p-cancha-img {
    height: 160px;
    background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(34,197,94,.05));
    object-fit: cover;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--p-green);
}
.p-cancha-img img { width: 100%; height: 100%; object-fit: cover; }
.p-cancha-carrusel,
.p-cancha-carrusel .carousel-inner,
.p-cancha-carrusel .carousel-item { width: 100%; height: 100%; }
.p-cancha-carrusel .carousel-control-prev,
.p-cancha-carrusel .carousel-control-next { width: 2rem; opacity: 0; transition: opacity .15s; }
.p-cancha-carrusel:hover .carousel-control-prev,
.p-cancha-carrusel:hover .carousel-control-next { opacity: .8; }
.p-cancha-carrusel .carousel-control-prev-icon,
.p-cancha-carrusel .carousel-control-next-icon { width: 1.3rem; height: 1.3rem; }
.p-cancha-body { padding: 1rem; flex: 1; }
.p-cancha-name { font-size: 1rem; font-weight: 700; margin: 0 0 .3rem; color: #fff; }
.p-cancha-meta { font-size: .78rem; color: var(--p-muted); display: flex; flex-wrap: wrap; gap: .35rem; }
.p-cancha-footer {
    padding: .75rem 1rem;
    border-top: 1px solid var(--p-border);
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* ── Badges ─────────────────────────────────────────────────────────── */
.p-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
}
.p-badge-green  { background: rgba(34,197,94,.15);  color: var(--p-green); border: 1px solid rgba(34,197,94,.25); }
.p-badge-gray   { background: rgba(100,116,139,.2); color: var(--p-muted); }
.p-badge-orange { background: rgba(245,158,11,.15); color: #fbbf24; }
.p-badge-red    { background: rgba(239,68,68,.15);  color: #f87171; }
.p-badge-blue   { background: rgba(56,189,248,.15); color: #38bdf8; }
/* Fondo sólido del color de acento del complejo (derivado del logo, ver
   color_acento en portal/header.php) + número blanco — usado para las
   cantidades de turnos pendientes (campanita, desplegable por cancha,
   tarjetas de portal/canchas.php), a diferencia de los badges de estado
   de arriba (translúcidos, con el texto del color en vez del fondo). */
.p-badge-acento { background: var(--p-green); color: #fff; }

.p-module-card.cam-activa { outline: 2px solid var(--p-green); outline-offset: -2px; }

/* ── Galería de fotos ───────────────────────────────────────────────── */
.p-gallery { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.p-gallery-thumb {
    position: relative;
    width: 74px; height: 74px;
    border-radius: .45rem;
    overflow: hidden;
    border: 2px solid var(--p-border);
    cursor: pointer;
    transition: border-color .15s;
}
.p-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-gallery-thumb.portada { border-color: var(--p-green); }
.p-gallery-del {
    position: absolute; top: 2px; right: 2px;
    background: rgba(0,0,0,.7);
    color: #fff; border: none; border-radius: .25rem;
    width: 20px; height: 20px; font-size: .65rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s;
}
.p-gallery-thumb:hover .p-gallery-del { opacity: 1; }
.p-gallery-add {
    width: 74px; height: 74px;
    border: 2px dashed var(--p-border);
    border-radius: .45rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: .65rem; color: var(--p-subtle);
    cursor: pointer; gap: .2rem;
    transition: border-color .15s, color .15s;
}
.p-gallery-add:hover { border-color: var(--p-green); color: var(--p-green); }
.p-gallery-add i { font-size: 1.2rem; }

/* ── Cámaras grid ───────────────────────────────────────────────────── */
.p-camaras-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem; }
.p-camara-card {
    background: #000;
    border-radius: var(--p-radius);
    overflow: hidden;
    border: 1px solid var(--p-border);
    position: relative;
    cursor: pointer;
    aspect-ratio: 16/9;
    transition: border-color .2s;
}
.p-camara-card:hover { border-color: var(--p-green); }
.p-camara-card:hover .p-camara-play { opacity: 1; }
.p-camara-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.45);
    opacity: 0; transition: opacity .18s;
}
.p-camara-play i { font-size: 2.8rem; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.p-camara-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: .55rem .85rem;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
    color: #fff; font-size: .8rem; font-weight: 600;
}

/* ── Slider de propagandas ──────────────────────────────────────────── */
.p-slider-list { display: flex; flex-direction: column; gap: .75rem; }
.p-slider-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--p-card-bg);
    border: 1px solid var(--p-border);
    border-radius: .65rem;
    padding: .85rem;
    transition: border-color .15s;
}
.p-slider-item:hover { border-color: #475569; }
.p-slider-item img {
    width: 96px; height: 58px;
    object-fit: cover;
    border-radius: .4rem;
    flex-shrink: 0;
    border: 1px solid var(--p-border);
}
.p-slider-info { flex: 1; min-width: 0; }
.p-slider-info strong { display: block; font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.p-slider-info span { font-size: .75rem; color: var(--p-muted); }
.p-slider-actions { display: flex; gap: .35rem; }

/* ── Tabs ──────────────────────────────────────────────────────────── */
.p-tabs {
    display: flex;
    gap: .15rem;
    border-bottom: 2px solid var(--p-border);
    margin-bottom: 1.5rem;
}
.p-tab {
    padding: .65rem 1.1rem;
    border: none;
    background: transparent;
    color: var(--p-muted);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: inherit;
}
.p-tab:hover { color: var(--p-text); }
/* La pestaña activa pasa a verse como un botón (mismo degradé verde → azul
   que .p-btn-primary/.complejo-card de complejos-deportivos.php), en vez de
   solo texto verde subrayado. */
.p-tab.active {
    color: #fff;
    background: linear-gradient(135deg, var(--p-green), #0d4c94);
    border-bottom-color: transparent;
    border-radius: .5rem .5rem 0 0;
}

/* Mismo degradé verde → azul del botón "Ver complejo" de
   complejos-deportivos.php, para los botones .btn-success de Bootstrap
   "a secas" que todavía se usan en algunas pantallas (portal y jugador). */
.btn-success {
    background: linear-gradient(135deg, var(--p-green), #0d4c94);
    border-color: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.btn-success:hover,
.btn-success:focus {
    background: linear-gradient(135deg, #0d4c94, var(--p-green));
    border-color: transparent;
}

/* ── Prestaciones ───────────────────────────────────────────────────── */
.p-prestaciones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.p-prestacion-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .8rem .95rem;
    background: var(--p-card-bg);
    border: 1.5px solid var(--p-border);
    border-radius: .55rem;
    font-size: .86rem;
    color: var(--p-muted);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.p-prestacion-item:hover { border-color: #475569; color: var(--p-text); }
.p-prestacion-item.activo {
    border-color: var(--p-green);
    background: var(--p-green-lt);
    color: var(--p-green);
    font-weight: 600;
}
.p-prestacion-item.activo i { color: var(--p-green); }
.p-prestacion-item i { font-size: 1.1rem; width: 20px; text-align: center; flex-shrink: 0; }

/* Ícono de notificaciones push: verde activado, rojo desactivado */
#btnActivarPush .bi-bell { color: #ef4444; }
#btnActivarPush .bi-bell-fill { color: #22c55e; }

/* ── Alertas ────────────────────────────────────────────────────────── */
.p-alert {
    padding: .85rem 1rem;
    border-radius: .55rem;
    font-size: .84rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-left: 4px solid;
}
.p-alert-success { background: rgba(34,197,94,.1);  border-color: var(--p-green); color: #4ade80; }
.p-alert-error   { background: rgba(239,68,68,.1);  border-color: #ef4444;        color: #f87171; }
.p-alert-info    { background: rgba(56,189,248,.1); border-color: #38bdf8;        color: #7dd3fc; }
.p-alert-warning { background: rgba(245,158,11,.1); border-color: #f59e0b;        color: #fbbf24; }

/* Texto explicativo breve de cada módulo, arriba de todo el contenido
   (portal/header.php, justo después de abrir <main>) — variante más chica y
   sutil de .p-alert-info, pensada para quedar siempre visible sin competir
   con el título de la página. */
.p-module-desc {
    font-size: .76rem;
    padding: .55rem .85rem;
    margin-bottom: .5rem;
    opacity: .85;
}
.p-module-desc i { flex-shrink: 0; }
.p-module-desc span { flex: 1; }
/* Toggle "¿Cómo funciona?" / panel de ayuda expandible debajo del cartel
   corto — pedido explícito: "a cada texto agregar una ayuda explicativa".
   Colapsado por defecto (ver pToggleAyudaModulo() en portal/header.php). */
.p-module-desc-toggle {
    flex-shrink: 0;
    background: none;
    border: none;
    color: inherit;
    opacity: .9;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .3rem;
}
.p-module-desc-toggle:hover { opacity: 1; text-decoration: underline; }
.p-module-desc-toggle i { transition: transform .15s ease; }
.p-module-desc-toggle-open i { transform: rotate(180deg); }
/* Botón "Ver video" del mismo cartel — distingue el ícono de play del
   chevron de "¿Cómo funciona?" (ver pAbrirVideoModulo() en portal/header.php
   y jugador/header.php). */
.p-module-desc-video .bi-play-circle { color: #38bdf8; }
.p-module-ayuda {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--p-muted);
    background: var(--p-card-bg);
    border: 1px solid var(--p-border);
    border-radius: .55rem;
    padding: .75rem 1rem;
    margin: 0 0 1.25rem;
}

/* ── Utilidades ─────────────────────────────────────────────────────── */
.p-divider { border: none; border-top: 1px solid var(--p-border); margin: 1.25rem 0; }

.p-empty {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--p-subtle);
}
.p-empty i { font-size: 2.8rem; display: block; margin-bottom: .75rem; color: var(--p-border); }

.p-spin { animation: p-spin .7s linear infinite; display: inline-block; }
@keyframes p-spin { to { transform: rotate(360deg); } }

/* ── Modal ──────────────────────────────────────────────────────────── */
.p-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(4px);
}
.p-modal-backdrop.open { display: flex; }
.p-modal {
    background: var(--p-glass-bg-strong);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border: 1px solid var(--p-glass-border);
    border-radius: var(--p-radius);
    box-shadow: var(--p-glass-shadow);
    position: relative;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .p-modal { background: var(--p-card-bg, #1e293b); }
}
.p-modal-header {
    padding: 1.1rem 1.25rem .85rem;
    border-bottom: 1px solid var(--p-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}
.p-modal-close {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--p-muted);
    padding: .2rem;
    border-radius: .35rem;
    transition: color .12s, background .12s;
}
.p-modal-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.p-modal-body { padding: 1.25rem; }
.p-modal-footer {
    padding: .85rem 1.25rem 1rem;
    border-top: 1px solid var(--p-border);
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* Bootstrap modal override */
.portal-body .modal-content {
    background: var(--p-glass-bg-strong);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border: 1px solid var(--p-glass-border);
    box-shadow: var(--p-glass-shadow);
    color: var(--p-text);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .portal-body .modal-content { background: var(--p-card-bg, #1e293b); }
}
.portal-body .modal-backdrop {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.portal-body .modal-header { border-color: var(--p-border); }
.portal-body .modal-footer { border-color: var(--p-border); }
.portal-body .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ── Toggle switch ──────────────────────────────────────────────────── */
.p-toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
.p-toggle input { opacity: 0; width: 0; height: 0; }
.p-toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #334155; border-radius: 24px;
    transition: .2s;
}
.p-toggle-slider:before {
    content: ''; position: absolute;
    width: 18px; height: 18px;
    left: 3px; bottom: 3px;
    background: #94a3b8; border-radius: 50%;
    transition: .2s;
}
.p-toggle input:checked + .p-toggle-slider { background: var(--p-green); }
.p-toggle input:checked + .p-toggle-slider:before { background: #fff; transform: translateX(18px); }

/* ── Scrollbar personalizado ─────────────────────────────────────────── */
.portal-body ::-webkit-scrollbar { width: 6px; height: 6px; }
.portal-body ::-webkit-scrollbar-track { background: #0f172a; }
.portal-body ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
.portal-body ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ── NativePlayer dentro del portal ─────────────────────────────────── */
.p-player-modal .p-modal { max-width: 860px; }
#portalPlayerContainer { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: .65rem; overflow: hidden; }

/* ── Vista semanal de turnos ─────────────────────────────────────────── */
.p-semana-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.p-week-card {
    background: var(--p-card-bg);
    border: 1px solid var(--p-border);
    border-radius: .75rem;
    padding: 1rem;
    transition: border-color .15s;
}
.p-week-card:hover            { border-color: rgba(34,197,94,.45); }
.p-week-card.hoy              { border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.04); }
.p-week-card.sin-datos        { opacity: .55; }
.p-week-card-header           { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .75rem; }
.p-week-dia-nombre            { font-weight: 700; color: var(--p-text); font-size: .92rem; }
.p-week-dia-fecha             { font-size: .72rem; color: var(--p-muted); }
.p-week-cancha-row            { display: flex; justify-content: space-between; align-items: center; padding: .28rem 0; font-size: .82rem; border-top: 1px solid rgba(51,65,85,.4); }
.p-week-cancha-nombre         { color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.p-week-cancha-val            { color: var(--p-text); font-weight: 600; white-space: nowrap; }
.p-week-total                 { display: flex; justify-content: space-between; padding-top: .55rem; margin-top: .25rem; border-top: 1px solid var(--p-border); font-size: .84rem; font-weight: 700; color: var(--p-green); }

/* ── Calendario mensual ──────────────────────────────────────────────── */
.p-cal                        { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.p-cal-hdr                    { text-align: center; font-size: .68rem; font-weight: 700; color: var(--p-muted); padding: .4rem 0; text-transform: uppercase; letter-spacing: .06em; }
.p-cal-day {
    aspect-ratio: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: .35rem .15rem;
    border-radius: .4rem;
    border: 1px solid transparent;
    font-size: .82rem; font-weight: 600;
    text-decoration: none;
    color: var(--p-text);
    transition: background .15s, border-color .15s;
}
a.p-cal-day:hover             { background: rgba(255,255,255,.06); border-color: var(--p-border); color: var(--p-text); }
.p-cal-day.hoy                { border-color: rgba(34,197,94,.6); }
.p-cal-day.tiene              { background: rgba(34,197,94,.07); }
a.p-cal-day.tiene:hover       { background: rgba(34,197,94,.14); }
.p-cal-day .cal-num           { line-height: 1; }
.p-cal-day .cal-dot           { width: 5px; height: 5px; border-radius: 50%; background: var(--p-green); margin-top: 3px; }
.p-cal-day .cal-cnt           { font-size: .58rem; color: var(--p-green); font-weight: 700; margin-top: 1px; }

/* ── Tabla de recaudación ────────────────────────────────────────────── */
.p-rec-total {
    background: linear-gradient(135deg, rgba(34,197,94,.1), rgba(34,197,94,.04));
    border: 1px solid rgba(34,197,94,.25);
    border-radius: .75rem;
    padding: 1rem 1.5rem;
    display: flex; align-items: center; gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.p-rec-total .amt             { font-size: 2rem; font-weight: 800; color: var(--p-green); line-height: 1; }
.p-rec-total .lbl             { font-size: .78rem; color: var(--p-muted); margin-top: .2rem; }

/* 4 cajas de resumen de Recaudación → Diaria (Alquileres/Cantina/Videos/
   Total General) — mismo layout que ya tiene el PDF exportado de esta
   pantalla (ver exportarPDFRecaudacionDiaria() en includes/export_helpers.php),
   pedido explícito del usuario: "crear el módulo recaudación como el
   diseño del pdf". */
.p-rec-resumen4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: .75rem;
}
.p-rec-box {
    background: var(--p-glass-bg);
    backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--p-glass-blur)) saturate(160%);
    border: 1px solid var(--p-glass-border);
    box-shadow: var(--p-glass-shadow);
    border-radius: .75rem;
    padding: 1rem;
    text-align: center;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .p-rec-box { background: var(--p-card-bg); }
}
.p-rec-box .lbl  { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--p-muted); margin-bottom: .5rem; }
.p-rec-box .monto { font-size: 1.3rem; font-weight: 800; color: var(--p-green); }
.p-rec-box-total { background: var(--p-green-bg); border-color: var(--p-green); }
.p-rec-box-total .monto { font-size: 1.5rem; }
/* En pantallas angostas el contenido de la tabla (usuario+rol+email+estado+
   botones) no entra en el ancho de la tarjeta: sin esto, las últimas
   columnas (Estado, Editar, Permisos, etc.) quedaban directamente invisibles
   —no había forma de verlas ni deslizando la página— porque no existía
   ningún contenedor con scroll horizontal propio. display:block + overflow-x
   convierte a la tabla misma en ese contenedor, sin tener que envolverla en
   un div nuevo en cada una de las ~20 pantallas del portal que la usan (y sin
   que un refresco automático por idiomorph, ver portal/footer.php, pueda
   deshacer un wrapper agregado por JS). Con lugar de sobra sigue ocupando
   el 100% de la tarjeta igual que antes (no cambia nada visualmente ahí);
   solo entra en juego cuando el contenido real no entra. */
.p-rec-table                  { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; font-size: .88rem; }
.p-rec-table th               { text-align: left; padding: .5rem .75rem; color: var(--p-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--p-border); }
.p-rec-table td               { padding: .55rem .75rem; border-bottom: 1px solid rgba(51,65,85,.4); color: var(--p-text); }
.p-rec-table tr:last-child td { border-bottom: none; }
.p-rec-table .num             { text-align: right; font-variant-numeric: tabular-nums; }
.p-rec-table .total-row td    { font-weight: 700; color: var(--p-green); border-top: 1px solid var(--p-border); border-bottom: none; }
.p-rec-table a.dia-link       { color: var(--p-text); text-decoration: none; }
.p-rec-table a.dia-link:hover { color: var(--p-green); }
.p-rec-bar                    { display: inline-block; height: 6px; border-radius: 3px; background: var(--p-green); opacity: .6; min-width: 4px; max-width: 120px; vertical-align: middle; margin-left: .5rem; }

/* ── Tema claro (07:00-19:00) ───────────────────────────────────────── */
html[data-bs-theme="light"] {
    --p-text:     #000000;
    --p-muted:    #1f2937;
    --p-subtle:   #374151;
    --p-border:   #e2e8f0;
    --p-card-bg:  #ffffff;
    --p-body-bg:  #f8fafc;
    --p-nav-bg:   rgba(255,255,255,.95);
    --p-nav-text: #000000;
    --p-shadow:   0 4px 20px rgba(0,0,0,.10);

    /* Liquid glass en tema claro: mismos tokens, valores de vidrio "blanco"
       en vez de vidrio oscuro (igual criterio que admin-theme.css), pero
       bastante más opacos que su equivalente oscuro. Sobre fondo BLANCO el
       texto oscuro traslúcido pierde contraste mucho más rápido que el texto
       claro sobre vidrio oscuro (reportado: "letras poco claras, poco
       nítidas" al pasar a tema claro) — con .6-.65 de opacidad se veía casi
       ilegible encima de las manchas de color de fondo. */
    --p-glass-bg:        rgba(255, 255, 255, .84);
    --p-glass-bg-strong: rgba(255, 255, 255, .94);
    --p-glass-nav-bg:    rgba(255, 255, 255, .9);
    --p-glass-border:    rgba(15, 23, 42, .1);
    --p-glass-highlight: rgba(255, 255, 255, .95);
    --p-glass-shadow:    0 1.5rem 3rem -1rem rgba(15,23,42,.18), 0 .25rem .75rem rgba(15,23,42,.06);
}
html[data-bs-theme="light"] .p-navbar {
    border-bottom: 1px solid rgba(0,0,0,.09);
}
html[data-bs-theme="light"] .p-nav-brand { color: #000; }
html[data-bs-theme="light"] .p-nav-links a:hover { background: rgba(0,0,0,.05); color: #000; }
html[data-bs-theme="light"] .p-nav-user-btn {
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.12);
    color: #000;
}
html[data-bs-theme="light"] .theme-toggle-btn {
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.12);
    color: #000;
}
html[data-bs-theme="light"] .theme-toggle-btn:hover { background: rgba(0,0,0,.09); }
html[data-bs-theme="light"] .p-nav-user-btn:hover { background: rgba(0,0,0,.09); }

html[data-bs-theme="light"] .p-sidebar { border-right: 1px solid rgba(0,0,0,.09); }
html[data-bs-theme="light"] .p-sidebar-brand { border-bottom-color: rgba(0,0,0,.09); }
html[data-bs-theme="light"] .p-sidebar-brand-text,
html[data-bs-theme="light"] .p-sidebar-user-name,
html[data-bs-theme="light"] .p-mobile-topbar-brand { color: #000; }
html[data-bs-theme="light"] .p-sidebar-nav .nav-link:hover { background: rgba(0,0,0,.05); color: #000; }
html[data-bs-theme="light"] .p-sidebar-user:hover { background: rgba(0,0,0,.05); }
html[data-bs-theme="light"] .p-sidebar-footer { border-top-color: rgba(0,0,0,.09); }
html[data-bs-theme="light"] .p-sidebar-toggle-btn {
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.12);
    color: #000;
}
html[data-bs-theme="light"] .p-mobile-topbar { border-bottom-color: rgba(0,0,0,.09); }
/* Sin override de background acá: .p-dropdown ya usa var(--p-glass-bg-strong)
   / var(--p-glass-shadow), que este mismo bloque [data-bs-theme="light"] ya
   redefine arriba a valores de vidrio "blanco". */
html[data-bs-theme="light"] .p-dropdown a:hover { background: rgba(0,0,0,.04); }
html[data-bs-theme="light"] .p-nav-toggle { color: #000; }
@media (max-width: 820px) {
    html[data-bs-theme="light"] .p-nav-links { background: #ffffff; }
}
html[data-bs-theme="light"] .p-input {
    background: #ffffff;
    color: #000;
    color-scheme: light;
}

/* ── Tooltips personalizados (rectángulo redondeado, color del acento del
   complejo — --p-green ya se deriva del logo, ver portal/header.php /
   jugador/header.php) ──────────────────────────────────────────────────
   Reemplazan el tooltip nativo del navegador: assets/js/tooltips.js mueve
   cada "title" a "data-tooltip" al cargar la página (y sigue haciéndolo
   para contenido agregado después, con un MutationObserver — el portal
   arma mucho contenido por AJAX), así el navegador no muestra además su
   propio tooltip gris encima del nuestro. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    max-width: 240px;
    width: max-content;
    background: var(--p-green-dk);
    color: #fff;
    font-size: .74rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    padding: .4rem .7rem;
    border-radius: .6rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 3000;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Si no hay lugar arriba (elemento pegado al borde superior de la
   pantalla — headers, rieles del reproductor, primera fila de una tabla),
   assets/js/tooltips.js agrega esta clase antes de mostrar la burbuja para
   que aparezca hacia ABAJO en vez de hacia arriba, y no quede cortada. */
[data-tooltip].p-tooltip-below::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}
[data-tooltip].p-tooltip-below:hover::after,
[data-tooltip].p-tooltip-below:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}
/* Igual que p-tooltip-below pero para los bordes izquierdo/derecho de la
   pantalla (ver assets/js/tooltips.js) — en vez de centrar la burbuja sobre
   el elemento (lo que la saca de la ventana cerca de un borde), la ancla
   por ESE lado y crece hacia el centro. Compatible con p-tooltip-below al
   mismo tiempo (la transform de X e Y son independientes). */
[data-tooltip].p-tooltip-al-borde-izq::after {
    left: 0;
    transform: translateX(0) translateY(4px);
}
[data-tooltip].p-tooltip-al-borde-izq:hover::after,
[data-tooltip].p-tooltip-al-borde-izq:focus-visible::after {
    transform: translateX(0) translateY(0);
}
[data-tooltip].p-tooltip-al-borde-izq.p-tooltip-below::after {
    transform: translateX(0) translateY(-4px);
}
[data-tooltip].p-tooltip-al-borde-izq.p-tooltip-below:hover::after,
[data-tooltip].p-tooltip-al-borde-izq.p-tooltip-below:focus-visible::after {
    transform: translateX(0) translateY(0);
}
[data-tooltip].p-tooltip-al-borde-der::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
[data-tooltip].p-tooltip-al-borde-der:hover::after,
[data-tooltip].p-tooltip-al-borde-der:focus-visible::after {
    transform: translateX(0) translateY(0);
}
[data-tooltip].p-tooltip-al-borde-der.p-tooltip-below::after {
    transform: translateX(0) translateY(-4px);
}
[data-tooltip].p-tooltip-al-borde-der.p-tooltip-below:hover::after,
[data-tooltip].p-tooltip-al-borde-der.p-tooltip-below:focus-visible::after {
    transform: translateX(0) translateY(0);
}
/* Elige nowrap para tooltips cortos si entran en una línea sin superar
   max-width — evita saltos de línea innecesarios en la mayoría de los
   casos ("Editar", "Eliminar", etc.) sin dejar de envolver los largos. */
@media (min-width: 481px) {
    [data-tooltip]::after { white-space: nowrap; width: auto; }
}
html[data-bs-theme="light"] .p-input option { background: #ffffff; color: #000; }
html[data-bs-theme="light"] .portal-body .form-control,
html[data-bs-theme="light"] .portal-body .form-select {
    background: #ffffff;
    color: #000;
}
html[data-bs-theme="light"] .portal-body .form-select {
    color-scheme: light;
}
html[data-bs-theme="light"] .portal-body .form-control:focus,
html[data-bs-theme="light"] .portal-body .form-select:focus {
    background: #ffffff;
    color: #000;
}
html[data-bs-theme="light"] .portal-body .form-select option {
    background: #ffffff;
    color: #000;
}
html[data-bs-theme="light"] .portal-body .input-group-text {
    background: #f1f5f9;
    color: var(--p-muted);
    border-color: #e2e8f0;
}
/* Sin override de background para .p-modal / .modal-content: ya usan
   var(--p-glass-bg-strong), redefinida arriba a vidrio "blanco". */
html[data-bs-theme="light"] .p-modal-header { color: #000; }
html[data-bs-theme="light"] .p-modal-close:hover { background: rgba(0,0,0,.06); color: #000; }
html[data-bs-theme="light"] .portal-body .modal-content { color: #000; }
html[data-bs-theme="light"] .portal-body .btn-close { filter: none; }
html[data-bs-theme="light"] .p-stat-chip strong { color: #000; }
html[data-bs-theme="light"] .p-module-card strong { color: #000; }
html[data-bs-theme="light"] .p-page-title { color: #000; }
html[data-bs-theme="light"] .p-cancha-name { color: #000; }
html[data-bs-theme="light"] .p-slot-cliente { color: #000; }
html[data-bs-theme="light"] .p-card:hover { border-color: var(--p-green); }
html[data-bs-theme="light"] .portal-body ::-webkit-scrollbar-track { background: #f8fafc; }
html[data-bs-theme="light"] .portal-body ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html[data-bs-theme="light"] .portal-body ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .p-main { padding: 1.25rem .85rem 3rem; }
    .p-hero-title { font-size: 1.5rem; }
    .p-hero-stats { gap: 1.25rem; }
    .p-stat-row { grid-template-columns: repeat(2, 1fr); }
    .p-modules { grid-template-columns: repeat(2, 1fr); }
    .p-semana-grid { grid-template-columns: 1fr; }
    .p-cal-day { font-size: .72rem; }
}