/*
 * Navegación: menú lateral, topbar, selector de empresa (tenant), menú de usuario y login.
 *
 * Dirección (docs/DISENO_PANEL.md): el marino enmarca. El menú lateral es una barra marino a toda altura en claro
 * y en oscuro (como la cabecera y la barra de pestañas de la app); la topbar queda clara y discreta, del color del
 * suelo, para no competir. El celeste solo marca "dónde estás": barra de 3 px e icono del ítem activo.
 *
 * Profundidad: cambios de tono sobre el marino (marino → marino-2 → marino-3), sin sombras ni bordes duros.
 * Densidad: ítems de 40 px, base 4 px.
 */

:root {
    --cp-nav-marino: #0a1033;
    --cp-nav-marino-2: #141c4d;
    --cp-nav-marino-3: #232c66;
    --cp-nav-texto: #f3f5ff;
    --cp-nav-texto-item: #dbe0f6;
    --cp-nav-texto-2: #aab3dd;
    --cp-nav-celeste: #0096ff;
    --cp-nav-celeste-pro: #5cb8ff;
    --cp-nav-topbar: var(--cp-canvas);
    --cp-nav-campo: #ffffff;
    --cp-nav-campo-borde: #c3cae0;
    --cp-nav-texto-3: #5a6387;
    --cp-nav-foco: #047857; /* verde cancha */
}

.dark {
    --cp-nav-marino-2: #151d4c;
    --cp-nav-marino-3: #26306a;
    --cp-nav-celeste: #38b0ff;
    --cp-nav-celeste-pro: #7cc8ff;
    --cp-nav-campo: #10163a;
    --cp-nav-campo-borde: #323b70;
    --cp-nav-texto-3: #8c93bd;
    --cp-nav-foco: #34d399;
}

/* ===================================================================== */
/* Menú lateral marino                                                   */
/* ===================================================================== */

.fi-sidebar.fi-main-sidebar {
    background-color: var(--cp-nav-marino);
    color: var(--cp-nav-texto);
}

.dark .fi-sidebar.fi-main-sidebar {
    box-shadow: inset -1px 0 0 rgb(255 255 255 / 0.06);
}

/* Drawer (< lg): marino también, con sombra suave hacia el contenido. */
.fi-sidebar.fi-main-sidebar.fi-sidebar-open {
    --tw-ring-color: transparent;
}

/* ---------- Cabecera con la marca ---------- */
.fi-main-sidebar .fi-sidebar-header,
.fi-body-has-topbar .fi-main-sidebar .fi-sidebar-header {
    height: var(--topbar-height);
    justify-content: flex-start;
    padding-inline: 1.25rem;
    background-color: transparent;
    box-shadow: none;
}

.fi-main-sidebar .cp-brand {
    color: var(--cp-nav-texto);
}

.fi-main-sidebar .cp-brand-pro {
    color: var(--cp-nav-celeste-pro);
}

.fi-main-sidebar .cp-brand-mark {
    box-shadow: 0 0 0 1px var(--cp-nav-marino-3);
}

/* Etiqueta de panel (Súper Admin): chip en oración, no versalitas. */
.fi-main-sidebar .cp-brand-tag {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 650;
    font-size: 0.75rem;
    color: var(--cp-nav-texto-2);
    background: var(--cp-nav-marino-2);
    border-radius: 6px;
}

.fi-main-sidebar a:has(> .fi-logo) {
    border-radius: 8px;
    outline: none;
}

.fi-main-sidebar a:has(> .fi-logo):focus-visible {
    box-shadow: 0 0 0 2px var(--cp-nav-celeste);
}

/* ---------- Selector de empresa (tenant) ---------- */
.fi-main-sidebar .fi-sidebar-header-controls::after {
    margin-inline: 1.25rem;
    margin-top: 1rem;
    border-color: var(--cp-nav-marino-3);
}

.fi-main-sidebar .fi-tenant-menu {
    margin-inline: 0.75rem;
    margin-top: 0.25rem;
}

.fi-main-sidebar .fi-tenant-menu-trigger {
    min-height: 3rem;
    padding: 0.5rem 0.625rem;
    gap: 0.75rem;
    border-radius: 12px;
    background-color: var(--cp-nav-marino-2);
    box-shadow: inset 0 0 0 1px var(--cp-nav-marino-3);
    transition: background-color 120ms var(--cp-ease);
}

.fi-main-sidebar .fi-tenant-menu-trigger:hover,
.fi-main-sidebar .fi-tenant-menu-trigger:focus-visible {
    background-color: var(--cp-nav-marino-3);
}

.fi-main-sidebar .fi-tenant-menu-trigger:focus-visible {
    box-shadow: inset 0 0 0 2px var(--cp-nav-celeste);
}

.fi-main-sidebar .fi-tenant-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
}

.fi-main-sidebar .fi-tenant-menu-trigger-tenant-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cp-nav-texto);
}

.fi-main-sidebar .fi-tenant-menu-trigger-current-tenant-label {
    color: var(--cp-nav-texto-2);
}

.fi-main-sidebar .fi-tenant-menu-trigger .fi-icon,
.fi-main-sidebar .fi-tenant-menu-trigger:hover .fi-icon {
    color: var(--cp-nav-texto-2);
}

/* ---------- Lista del menú ---------- */
.fi-main-sidebar .fi-sidebar-nav {
    padding: 1.25rem 0.75rem 1.5rem;
    gap: 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--cp-nav-marino-3) transparent;
}

.fi-main-sidebar .fi-sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.fi-main-sidebar .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--cp-nav-marino-3);
    border-radius: 6px;
}

.fi-main-sidebar .fi-sidebar-nav-groups {
    margin-inline: 0;
    row-gap: 1.25rem;
}

/* Etiqueta de grupo: oración, peso 650, secundario. Nada de MAYÚSCULAS con tracking. */
.fi-main-sidebar .fi-sidebar-group-btn {
    min-height: 1.75rem;
    padding: 0 0.25rem 0 0.75rem;
    gap: 0.5rem;
}

.fi-main-sidebar .fi-sidebar-group-label {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cp-nav-texto-2);
}

.fi-main-sidebar .fi-sidebar-group-btn > .fi-icon {
    color: var(--cp-nav-texto-2);
}

.fi-main-sidebar .fi-sidebar-group-collapse-btn {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    color: var(--cp-nav-texto-2);
    opacity: 0.7;
    transition: opacity 120ms var(--cp-ease), background-color 120ms var(--cp-ease), rotate 200ms var(--cp-ease);
}

.fi-main-sidebar .fi-sidebar-group-collapse-btn .fi-icon {
    color: inherit;
    width: 1rem;
    height: 1rem;
}

.fi-main-sidebar .fi-sidebar-group-btn:hover .fi-sidebar-group-collapse-btn,
.fi-main-sidebar .fi-sidebar-group-collapse-btn:focus-visible {
    opacity: 1;
    background-color: var(--cp-nav-marino-2);
}

.fi-main-sidebar .fi-sidebar-group-items,
.fi-main-sidebar .fi-sidebar-sub-group-items {
    row-gap: 2px;
}

.fi-main-sidebar .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: var(--cp-nav-celeste);
}

/* ---------- Ítem: 40 px, icono outline, hover marino apenas más claro ---------- */
.fi-main-sidebar .fi-sidebar-item-btn,
.fi-main-sidebar .fi-sidebar-group-dropdown-trigger-btn,
.fi-main-sidebar .fi-sidebar-database-notifications-btn {
    min-height: 2.5rem;
    padding: 0 0.75rem;
    gap: 0.75rem;
    border-radius: 10px;
    transition: background-color 120ms var(--cp-ease), color 120ms var(--cp-ease);
}

.fi-main-sidebar .fi-sidebar-item-btn > .fi-icon,
.fi-main-sidebar .fi-sidebar-group-dropdown-trigger-btn > .fi-icon,
.fi-main-sidebar .fi-sidebar-database-notifications-btn > .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--cp-nav-texto-2);
    transition: color 120ms var(--cp-ease);
}

.fi-main-sidebar .fi-sidebar-item-label,
.fi-main-sidebar .fi-sidebar-database-notifications-btn-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cp-nav-texto-item);
}

.fi-main-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-main-sidebar .fi-sidebar-group-dropdown-trigger-btn:hover,
.fi-main-sidebar .fi-sidebar-database-notifications-btn:hover {
    background-color: color-mix(in oklab, var(--cp-nav-marino-2) 65%, var(--cp-nav-marino));
}

.fi-main-sidebar .fi-sidebar-item-btn:hover > .fi-icon,
.fi-main-sidebar .fi-sidebar-item-btn:hover > .fi-sidebar-item-label {
    color: var(--cp-nav-texto);
}

.fi-main-sidebar .fi-sidebar-item-btn:focus-visible,
.fi-main-sidebar .fi-sidebar-group-dropdown-trigger-btn:focus-visible,
.fi-main-sidebar .fi-sidebar-database-notifications-btn:focus-visible {
    background-color: color-mix(in oklab, var(--cp-nav-marino-2) 65%, var(--cp-nav-marino));
    box-shadow: inset 0 0 0 2px var(--cp-nav-celeste);
}

/* Activo: marino-2 + barra celeste de 3 px + texto blanco 700; el icono toma el celeste ("dónde estás"). */
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover {
    background-color: var(--cp-nav-marino-2);
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
    background: var(--cp-nav-celeste);
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    font-weight: 700;
    color: #fff;
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--cp-nav-celeste);
}

/* Sub-ítems (navegación anidada): guía en marino-3, punto celeste en el activo. */
.fi-main-sidebar .fi-sidebar-item-grouped-border-part-not-first,
.fi-main-sidebar .fi-sidebar-item-grouped-border-part-not-last,
.fi-main-sidebar .fi-sidebar-item-grouped-border-part {
    background-color: var(--cp-nav-marino-3);
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-grouped-border-part {
    background-color: var(--cp-nav-celeste);
}

/* ---------- Badges de conteo: chips pequeños (radio 6 px), cifra condensada ---------- */
.fi-main-sidebar .fi-sidebar-item-badge-ctn .fi-badge,
.fi-main-sidebar .fi-sidebar-database-notifications-btn-badge-ctn .fi-badge {
    min-width: 1.375rem;
    min-height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 800;
    font-stretch: 72%;
    font-variant-numeric: tabular-nums;
    color: var(--cp-nav-texto);
    background-color: var(--cp-nav-marino-3);
    box-shadow: none;
    --tw-ring-color: transparent;
    display: inline-flex;
    align-items: center;
}

.fi-main-sidebar .fi-sidebar-item-badge-ctn .fi-badge .fi-badge-label-ctn {
    align-self: center;
}

.fi-main-sidebar .fi-sidebar-item-badge-ctn .fi-badge.fi-color-warning {
    color: #2b1700;
    background-color: #f59e0b;
}

.fi-main-sidebar .fi-sidebar-item-badge-ctn .fi-badge.fi-color-danger {
    color: #fff;
    background-color: #dc2626;
}

.fi-main-sidebar .fi-sidebar-item-badge-ctn .fi-badge.fi-color-success {
    color: #fff;
    background-color: #15803d;
}

.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge.fi-color-primary,
.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge.fi-color-gray {
    color: var(--cp-nav-marino);
    background-color: var(--cp-nav-celeste);
}

/* ---------- Pie del menú (si se usa) ---------- */
.fi-main-sidebar .fi-sidebar-footer {
    border-color: var(--cp-nav-marino-3);
}

/* ===================================================================== */
/* Topbar clara y discreta                                               */
/* ===================================================================== */

.fi-topbar-ctn .fi-topbar {
    min-height: var(--topbar-height);
    background-color: var(--cp-nav-topbar);
    box-shadow: 0 1px 0 var(--cp-line);
    --tw-ring-color: transparent;
}

.fi-topbar .fi-topbar-open-sidebar-btn,
.fi-topbar .fi-topbar-close-sidebar-btn,
.fi-topbar .fi-topbar-open-collapse-sidebar-btn,
.fi-topbar .fi-topbar-close-collapse-sidebar-btn {
    border-radius: 10px;
    color: var(--cp-nav-texto-3);
}

.fi-topbar .fi-topbar-open-sidebar-btn .fi-icon,
.fi-topbar .fi-topbar-close-sidebar-btn .fi-icon,
.fi-topbar .fi-topbar-open-collapse-sidebar-btn .fi-icon,
.fi-topbar .fi-topbar-close-collapse-sidebar-btn .fi-icon {
    color: inherit;
}

.fi-topbar .fi-topbar-open-sidebar-btn:hover,
.fi-topbar .fi-topbar-close-sidebar-btn:hover,
.fi-topbar .fi-topbar-open-collapse-sidebar-btn:hover,
.fi-topbar .fi-topbar-close-collapse-sidebar-btn:hover {
    background-color: var(--cp-line-strong);
    color: var(--gray-950);
}

.dark .fi-topbar .fi-topbar-open-sidebar-btn:hover,
.dark .fi-topbar .fi-topbar-close-sidebar-btn:hover,
.dark .fi-topbar .fi-topbar-open-collapse-sidebar-btn:hover,
.dark .fi-topbar .fi-topbar-close-collapse-sidebar-btn:hover {
    color: #fff;
}

/* ---------- Buscador global: input del sistema ---------- */
.fi-topbar .fi-global-search-field .fi-input-wrp {
    width: 18rem;
    min-height: 2.5rem;
    border-radius: 12px;
    background-color: var(--cp-nav-campo);
    box-shadow: inset 0 0 0 1px var(--cp-nav-campo-borde);
    --tw-ring-color: transparent;
    transition: box-shadow 120ms var(--cp-ease);
}

.fi-topbar .fi-global-search-field .fi-input-wrp:focus-within {
    box-shadow: inset 0 0 0 2px var(--cp-nav-foco);
}

.fi-topbar .fi-global-search-field .fi-input-wrp {
    align-items: center;
}

.fi-topbar .fi-global-search-field .fi-input {
    height: 2.5rem;
    padding-block: 0;
    font-size: 0.875rem;
    line-height: 2.5rem;
}

.fi-topbar .fi-global-search-field .fi-input::placeholder {
    color: var(--cp-nav-texto-3);
}

.fi-topbar .fi-global-search-field .fi-input-wrp-prefix .fi-icon {
    color: var(--cp-nav-texto-3);
}

/* ---------- Avatar del usuario como "dorsal" ---------- */
.fi-topbar .fi-user-menu-trigger {
    border-radius: 10px;
    outline: none;
}

.fi-topbar .fi-user-avatar,
.fi-simple-layout-header .fi-user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    transition: box-shadow 120ms var(--cp-ease);
}

.dark .fi-topbar .fi-user-avatar,
.dark .fi-simple-layout-header .fi-user-avatar {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14);
}

.fi-topbar .fi-user-menu-trigger:hover .fi-user-avatar,
.fi-topbar .fi-user-menu-trigger:focus-visible .fi-user-avatar {
    box-shadow: 0 0 0 2px var(--cp-nav-topbar), 0 0 0 4px var(--cp-nav-foco);
}

/* ===================================================================== */
/* Escritorio (≥ lg): menú a toda altura, la topbar arranca tras el menú */
/* ===================================================================== */

@media (min-width: 64rem) {
    /* El contenedor del menú sube por detrás de la topbar y queda por encima de ella. */
    .fi-body-has-topbar .fi-layout > div:has(> .fi-main-sidebar) {
        position: relative;
        z-index: 31;
        margin-top: calc(-1 * var(--topbar-height));
    }

    .fi-body-has-topbar .fi-main-sidebar {
        top: 0;
        height: 100dvh;
    }

    .fi-body-has-topbar .fi-main-sidebar .fi-sidebar-header {
        display: flex;
    }

    .fi-body-has-topbar:has(.fi-main-sidebar.fi-sidebar-open) .fi-topbar {
        padding-inline-start: calc(var(--sidebar-width) + 1rem);
    }

    .fi-body-has-topbar:has(.fi-main-sidebar:not(.fi-sidebar-open)) .fi-topbar {
        padding-inline-start: calc(var(--collapsed-sidebar-width) + 1rem);
    }

    /* La marca vive en el menú; en la topbar solo queda el botón de plegar. */
    .fi-topbar-start .fi-logo,
    .fi-topbar-start a:has(> .fi-logo) {
        display: none;
    }

    /* Menú plegado a iconos: el símbolo de la marca ocupa la cabecera. */
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        background: url('/images/clubpro-icon.svg') center / 1.75rem no-repeat;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-inline: 0.75rem;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-tenant-menu-trigger {
        background-color: transparent;
        box-shadow: none;
        padding: 0.375rem;
    }
}

/* ---------- Drawer (< lg) ---------- */
@media (max-width: 63.999rem) {
    .fi-sidebar.fi-main-sidebar.fi-sidebar-open {
        box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 24px 48px -12px rgb(7 11 34 / 0.5);
    }

    .fi-sidebar-close-overlay {
        background-color: rgb(7 11 34 / 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-main-sidebar .fi-sidebar-item-btn,
    .fi-main-sidebar .fi-tenant-menu-trigger,
    .fi-main-sidebar .fi-sidebar-group-collapse-btn,
    .fi-topbar .fi-user-avatar,
    .fi-topbar .fi-global-search-field .fi-input-wrp {
        transition: none;
    }
}

/* ===================================================================== */
/* Login y páginas simples                                               */
/* ===================================================================== */
/* Banda marino plana arriba (como la app y como el menú lateral) y el suelo azulado abajo; sin brillos. */
.fi-simple-layout {
    background-color: var(--cp-canvas);
    background-image: linear-gradient(to bottom, var(--cp-nav-marino) 0 36vh, transparent 36vh);
    background-repeat: no-repeat;
}

.fi-simple-main {
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgb(10 16 51 / 0.06), 0 12px 40px -12px rgb(10 16 51 / 0.18);
}

.dark .fi-simple-main {
    background-color: var(--gray-900);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 20px 50px -20px rgb(0 0 0 / 0.7);
}

.fi-simple-header .fi-logo {
    margin-bottom: 0.5rem;
}

.fi-simple-header-subheading {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500);
}

/* Menú de usuario de las páginas simples: va sobre la banda marino. */
.fi-simple-layout-header .fi-user-avatar {
    box-shadow: 0 0 0 1px var(--cp-nav-marino-3);
}