@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxpY29uIGlkPSJhIiBmaWxsPSIjZGI4YTQyIiBjbGlwLXBhdGg9InVybCgjY2xpcDApIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjAgLTQpIj48cGF0aCBkPSJNNDcgMzAuM2E0IDEgMCAwIDEgLTQgMVYzMEg1YTQgNCAwIDAgMCAwIDggMjAgOCAwIDAgMCAyMCAwIGg4YTYgNiAwIDAgMCA2LTYuMmw1LTEwYzAtMS40LS42LTIuNy0xLjYtMy43QS45LjkgMCAwIDAgNDcgMzAuM3oiLz48L2ljb24+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiPjxnPjxwYXRoIGQ9Ik0wIDBoNjB2NDlIMFYweiIgZmlsbD0"id2c3RyZWN0YWJsZTsiZG9jdW1lbnQtaW1hZ2UtaW8ncGF0dGVybi1maWxlPSIvPjxpbWFnZSB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHNyYz0iaHR0cHM6Ly93d3cudzMub3JnLzE5OTkveGxpbmsvZG93bmxvYWQvU1VHRVVUZXgvMjAwMC82ZWY3MmNiL2JiMmMzMmEwZjI0NTc3YmEzMDZhNGE3OTdkNjk3YjNiNTgzLmpwZyI+)/no-repeat left center, linear-gradient(180deg,#fff,#f7f9fb);
}

/* === Fix para el logo del sidebar que oculta el primer elemento del menú === */
/* Asegurar que el sidebar nav tenga suficiente espacio superior cuando header es fixed */
body.header-function-fixed:not(.nav-function-top) .page-sidebar #js-primary-nav {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Asegurar que el logo del sidebar esté correctamente posicionado */
body.header-function-fixed:not(.nav-function-top) .page-sidebar .page-logo {
    position: relative !important;
    z-index: 1 !important;
}

/* Asegurar que el primer elemento del menú no quede oculto */
body.header-function-fixed:not(.nav-function-top) .page-sidebar #js-primary-nav .nav-menu {
    margin-top: 0 !important;
    padding-top: 0.5rem !important;
}

/* Fix adicional para cuando el slimScrollDiv está presente */
body.header-function-fixed:not(.nav-function-top) .page-sidebar .slimScrollDiv {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Asegurar que todos los elementos del menú sean visibles */
body.header-function-fixed:not(.nav-function-top) .page-sidebar #js-primary-nav li {
    opacity: 1 !important;
    visibility: visible !important;
}

/* === Logo del header: OCULTO por defecto, visible solo en top navigation === */
.page-header .page-logo {
    display: none !important; /* Oculto por defecto */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* === Fix para logo y header en modo top navigation === */
body.nav-function-top .page-header .page-logo {
    /* MOSTRAR el logo SOLO cuando está en modo top navigation */
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 64px !important; /* Altura fija del header en top navigation */
    padding: 8px 15px !important;
    overflow: visible !important;
}

/* === FIX PARA MÓVIL: Ocultar logo del header en mobile view === */
body.mobile-view-activated .page-header .page-logo {
    display: none !important; /* OCULTAR en móvil */
    visibility: hidden !important;
    opacity: 0 !important;
}

/* IMPORTANTE: El logo del header solo debe mostrarse en top navigation Y en desktop */
body.nav-function-top:not(.mobile-view-activated) .page-header .page-logo {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* En móvil, SIEMPRE ocultar el logo del header, incluso en top navigation */
body.mobile-view-activated .page-header .page-logo,
body.mobile-view-activated.nav-function-top .page-header .page-logo {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Control específico del tamaño de la imagen del logo en top navigation */
body.nav-function-top .page-header .page-logo img {
    opacity: 1 !important;
    visibility: visible !important;
    filter: brightness(0) invert(1) !important; /* Convierte el logo a blanco puro */
    -webkit-filter: brightness(0) invert(1) !important;
    /* IMPORTANTE: Estas propiedades evitan que el logo se deforme */
    max-height: 48px !important; /* Altura máxima controlada */
    height: auto !important; /* Permite que se ajuste proporcionalmente */
    width: auto !important; /* Ancho automático para mantener proporción */
    max-width: 200px !important; /* Ancho máximo */
    object-fit: contain !important; /* CLAVE: Mantiene la proporción sin deformar */
    object-position: center !important;
    display: block !important;
}

/* Alternativa: Si el filtro anterior hace que se vea muy brillante, usa esta opción */
/* body.nav-function-top .page-header .page-logo img {
    opacity: 1 !important;
    visibility: visible !important;
    filter: brightness(3) grayscale(1) contrast(200%) !important;
    -webkit-filter: brightness(3) grayscale(1) contrast(200%) !important;
    max-height: 48px !important;
    height: auto !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
    object-position: center !important;
} */

body.nav-function-top .page-header {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
}

    /* Asegurar que todos los textos del header sean visibles y con color blanco/normal */
    body.nav-function-top .page-header h2,
    body.nav-function-top .page-header h1,
    body.nav-function-top .page-header h3,
    body.nav-function-top .page-header h4,
    body.nav-function-top .page-header h5,
    body.nav-function-top .page-header h6,
    body.nav-function-top .page-header label,
    body.nav-function-top .page-header span,
    body.nav-function-top .page-header p,
    body.nav-function-top .page-header .color-primary-900,
    body.nav-function-top .page-header .text-white {
        opacity: 1 !important;
        visibility: visible !important;
        color: #ffffff !important;
        text-shadow: none !important;
    }

    /* Específicamente para el título del panel principal */
    body.nav-function-top .page-header h2 {
        color: #ffffff !important;
        font-weight: 500 !important;
    }

    /* Asegurar que el search y otros elementos sean visibles */
    body.nav-function-top .page-header .search,
    body.nav-function-top .page-header .search input {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Asegurar que los íconos también sean visibles */
    body.nav-function-top .page-header i,
    body.nav-function-top .page-header .fa,
    body.nav-function-top .page-header .fal,
    body.nav-function-top .page-header .fas,
    body.nav-function-top .page-header .far {
        opacity: 1 !important;
        visibility: visible !important;
        color: #ffffff !important;
    }

    /* Fix para los botones y enlaces del header */
    body.nav-function-top .page-header a,
    body.nav-function-top .page-header button {
        opacity: 1 !important;
        visibility: visible !important;
    }

/* Asegurar que el wrapper del logo no tenga opacidad */
body.nav-function-top .page-logo-text,
body.nav-function-top .page-logo > * {
    opacity: 1 !important;
    visibility: visible !important;
}

    /* También aplicar el filtro blanco a las imágenes dentro de page-logo-text */
    body.nav-function-top .page-logo-text img {
        filter: brightness(0) invert(1) !important;
        -webkit-filter: brightness(0) invert(1) !important;
        max-height: 48px !important;
        height: auto !important;
        width: auto !important;
        max-width: 200px !important;
        object-fit: contain !important;
    }

/* === Fix para el dropdown del perfil en Top Navigation === */

/* Asegurar que el dropdown del perfil tenga el z-index correcto en Top Navigation */
body.nav-function-top .page-header .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    z-index: 15000 !important; /* INCREMENTADO: Mucho más alto que el nav horizontal */
    display: none !important;
    margin-top: 0.5rem !important;
    background-color: #ffffff !important; /* Asegurar fondo blanco */
    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important; /* Sombra más visible */
}

    /* Cuando el dropdown está abierto (show) */
    body.nav-function-top .page-header .dropdown-menu.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

/* Contenedor del dropdown necesita position relative y z-index muy alto */
body.nav-function-top .page-header .dropdown {
    position: relative !important;
    z-index: 15001 !important; /* Incrementado para estar por encima de todo */
}

/* El wrapper horizontal del nav también necesita ajuste */
body.nav-function-top #js-nav-menu-wrapper {
    z-index: 10000 !important; /* Menor que el dropdown del perfil */
    position: relative !important;
}

/* El nav horizontal completo */
body.nav-function-top #js-nav-menu {
    z-index: 10000 !important;
    position: relative !important;
}

/* Fix general para todos los dropdowns en el header cuando está en top navigation */
body.nav-function-top .page-header .dropdown-menu-animated {
    animation-duration: 0.3s !important;
    animation-name: slideInDown !important;
}

/* Asegurar que el backdrop (si existe) no interfiera */
body.nav-function-top .dropdown-backdrop {
    z-index: 14999 !important; /* Justo debajo del dropdown */
}

/* Fix adicional: el contenedor ml-auto también necesita z-index */
body.nav-function-top .page-header .ml-auto {
    position: relative !important;
    z-index: 15002 !important; /* Más alto que el dropdown */
}

/* Animación para el dropdown */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Fix para mobile view también */
body.nav-function-top.mobile-view-activated .page-header .dropdown-menu {
    z-index: 15000 !important;
}

/* Asegurar que el dropdown no se corte por overflow hidden del header */
body.nav-function-top .page-header {
    overflow: visible !important;
    position: relative !important;
    z-index: 15000 !important; /* Header también necesita z-index alto */
}

    /* Fix para el contenedor específico del avatar/perfil */
    body.nav-function-top .page-header .header-icon {
        position: relative !important;
        z-index: 15003 !important; /* Más alto que todo */
    }

/* === Fix para el modal de configuración en Top Navigation === */

/* Asegurar que el modal de configuración tenga z-index más alto que el header */
body.nav-function-top .modal.js-modal-settings,
body.nav-function-top .modal-dialog {
    z-index: 16000 !important; /* Más alto que el header (15000) */
}

/* El backdrop del modal también necesita z-index alto */
body.nav-function-top .modal-backdrop {
    z-index: 15999 !important; /* Justo debajo del modal */
}

/* Asegurar que el contenido del modal sea visible */
body.nav-function-top .modal-content {
    z-index: 16001 !important;
    position: relative !important;
}

/* El header del modal */
body.nav-function-top .modal-header {
    z-index: 16002 !important;
    position: relative !important;
}

/* El body del modal */
body.nav-function-top .modal-body {
    z-index: 16001 !important;
    position: relative !important;
}

/* === Mejorar visibilidad del contenido del dropdown === */
body.nav-function-top .page-header .dropdown-menu .dropdown-header {
    /* CAMBIADO: Usar el mismo azul del header en lugar del gradiente púrpura */
    background: #4e73df !important; /* Color azul del header de SmartAdmin */
    color: #ffffff !important;
    padding: 1rem !important;
}

body.nav-function-top .page-header .dropdown-menu .dropdown-item {
    color: #333333 !important; /* Color de texto oscuro para mejor visibilidad */
    padding: 0.75rem 1.5rem !important;
    background-color: transparent !important;
    transition: background-color 0.2s ease !important;
}

    body.nav-function-top .page-header .dropdown-menu .dropdown-item:hover {
        background-color: #f8f9fa !important;
        color: #1861ac !important;
    }

body.nav-function-top .page-header .dropdown-menu .info-card-text {
    color: #ffffff !important;
}

body.nav-function-top .page-header .dropdown-menu .fs-md,
body.nav-function-top .page-header .dropdown-menu .fs-xs {
    color: #ffffff !important;
}

/* NUEVO: Asegurar que el texto dentro del dropdown-item sea oscuro */
body.nav-function-top .page-header .dropdown-menu .dropdown-item span {
    color: #333333 !important;
}

/* NUEVO: Si el dropdown-item es un enlace <a>, asegurar color oscuro */
body.nav-function-top .page-header .dropdown-menu a.dropdown-item {
    color: #333333 !important;
    text-decoration: none !important;
}

body.nav-function-top .page-header .dropdown-menu a.dropdown.item:hover {
    color: #1861ac !important;
    text-decoration: none !important;
}

/* Asegurar que el dropdown esté por encima de todos los elementos del nav */
body.nav-function-top .page-header .dropdown-menu-animated.dropdown-md {
    min-width: 280px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 0.25rem !important;
}

/* Fix para que el nav-menu-wrapper no tape el dropdown */
body.nav-function-top .nav-menu-wrapper {
    z-index: 10000 !important;
    position: relative !important;
}

/* Asegurar que los botones de scroll del nav horizontal también tengan z-index correcto */
body.nav-function-top #js-nav-menu-wrapper-left-btn,
body.nav-function-top #js-nav-menu-wrapper-right-btn {
    z-index: 10001 !important;
    position: relative !important;
}

/* === Floater styling for cloned submenu (make it match SmartAdmin nav style) === */

/* Default: keep floater hidden and non-interactive unless top navigation is active.
   This prevents the floater from being visible when the app is in sidebar mode. */
.topnav-floater {
    /* allow JS to control visibility via inline styles -- do not use !important for display */
    display: none;
    pointer-events: none;
    background: #ffffff;
    border-radius: 0.25rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    padding: 0.25rem 0;
    font-family: inherit;
    font-size: 0.95rem;
    color: #2b5d8a;
    min-width: 220px;
    max-width: 360px;
    z-index: 12000 !important; /* ensure it sits above page header */
    transition: opacity .12s ease, transform .12s ease;
    opacity: 0;
    transform: translateY(-4px);
    white-space: normal;
}

    /* When JS makes the floater visible it will set inline styles (display:block and pointerEvents) */
    .topnav-floater[style*="display: block"] {
        opacity: 1;
        transform: translateY(0);
    }

/* Hide original nested uls when top navigation is active so only the floater is shown */
body.nav-function-top:not(.mobile-view-activated) #js-nav-menu li ul {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Make floater look like the native dropdown panel */
.topnav-floater ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    width: auto;
    min-width: inherit; /* prefer floater's min-width */
}

.topnav-floater .topnav-floater-menu {
    display: block !important;
    width: auto;
    min-width: 220px;
    max-width: 360px;
}

.topnav-floater li {
    display: block;
    position: relative; /* allow absolute submenus */
    width: auto; /* prevent inherited 100% widths */
}

/* separator between items */
.topnav-floater ul li + li {
    border-top: 1px solid rgba(0,0,0,0.04);
}

/* links */
.topnav-floater a, .topnav-floater a .nav-link-text {
    display: block;
    padding: .6rem 1.25rem;
    color: #1366a7;
    text-decoration: none;
    background: transparent;
    white-space: nowrap; /* keep labels on single line */
}

    .topnav-floater a:hover, .topnav-floater a:focus {
        background: #f1f6fb;
        color: #0b4f81;
    }

/* ensure any icons or caret spans align properly */
.topnav-floater .collapse-sign, .topnav-floater .nav-item-icon {
    margin-right: .5rem;
}

/* make sure nested lists behave visually like native submenus */
.topnav-floater ul ul {
    padding-left: 0;
}

/* ---------------------- Floating flyout rules for nested submenus ---------------------- */
/* Submenus appear as flyouts to the right of parent items */
.topnav-floater ul li > ul {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0;
    left: 100%;
    margin-left: .5rem;
    min-width: 200px;
    background: #ffffff;
    border-radius: .25rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    padding: .25rem 0;
    z-index: 5200;
}

/* Show flyout on hover or when focused inside */
.topnav-floater ul li:hover > ul,
.topnav-floater ul li:focus-within > ul {
    display: block;
}

/* Make sure nested links inherit spacing */
.topnav-floater ul li > ul li > a {
    padding: .5rem 1rem;
}

/* Add caret indicator for items that have children */
.topnav-floater li > a .caret, .topnav-floater li > a .fa-caret-right {
    float: right;
    margin-left: .5rem;
    opacity: .7;
}

/* Active/expanded state */
.topnav-floater a[aria-expanded="true"] {
    background: #eaf3fb;
}

/* responsive safety: hide floater on small screens */
@media (max-width: 991px) {
    .topnav-floater {
        display: none !important;
    }
}

/* === Switch / btn-switch styles to match SmartAdmin appearance === */
.btn-switch {
    display: inline-block;
    width: 48px;
    height: 26px;
    border-radius: 20px;
    background: #e9ecef;
    border: 1px solid rgba(0,0,0,0.06);
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    transition: background .15s ease, border-color .15s ease;
}

    .btn-switch:after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        background: #ffffff;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.12);
        transition: left .18s ease, background .18s ease;
    }

    /* Active state class used by our init script */
    .btn-switch.active {
        background: #1b6ec2; /* primary */
        border-color: #1861ac;
    }

        .btn-switch.active:after {
            left: 26px;
        }

    /* Accessibility: pressed attribute */
    .btn-switch[aria-pressed="true"] {
        background: #1b6ec2;
        border-color: #1861ac;
    }

        .btn-switch[aria-pressed="true"]:after {
            left: 26px;
        }

/* Small label alignment inside settings panel */
.settings-panel .list {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
}

.settings-panel .onoffswitch-title {
    font-weight: 600;
}

.settings-panel .onoffswitch-subtitle {
    font-size: .85rem;
    color: rgba(0,0,0,0.55);
}