/* ==========================================================================
   Modern Dark Institutional Navbar, Sidenav & Footer Layout - Intranet HAGP
   Inspirado en KGB (Kardex de Gestión de Bodega) y Asistencial HAGP
   Theme: Twitter/X Dim Dark Blue & Hospital Navy (#15202B, #192734, #1d9bf0, #111a24)
   Compatibility: Mozilla Firefox 45.8 ESR+, Chrome, Edge, Safari
   Offline: 100% Vanilla CSS & Local FontAwesome 4.7 / Bootstrap
   ========================================================================== */

/* 1. Cabecera Institucional (#mainNav) */
#mainNav,
.institutional-header {
    background-color: #15202B !important;
    background: #15202B !important;
    border-bottom: 1px solid #22303c !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3) !important;
    padding: 0 16px !important;
    z-index: 1030;
    min-height: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* --- CABECERA: ZONA IZQUIERDA (Toggle + Logo + Identidad Hospital) --- */
.header-left-zone {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Botón Hamburguesa Superior */
.sidebar-toggle-modern,
.btn-sidebar-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    color: #8b98a5 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    margin-right: 6px !important;
    outline: none !important;
}

.sidebar-toggle-modern:hover,
.sidebar-toggle-modern:focus,
.btn-sidebar-toggle:hover,
.btn-sidebar-toggle:focus {
    color: #ffffff !important;
    background-color: #22303c !important;
    text-decoration: none !important;
}

.sidebar-toggle-modern svg,
.btn-sidebar-toggle svg {
    width: 18px;
    height: 18px;
}

.sidebar-toggle-modern i,
.btn-sidebar-toggle i {
    font-size: 14px;
    color: #8b98a5;
}

.sidebar-toggle-modern:hover i,
.btn-sidebar-toggle:hover i {
    color: #ffffff;
}

/* Identidad de la Marca (Logo + Títulos) - SIN RECUADRO */
.header-brand-box,
.header-brand-group {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin-right: 15px !important;
    gap: 10px;
    vertical-align: middle;
}

.header-hospital-logo,
.header-brand-logo,
img#img_msp {
    height: 30px !important;
    max-height: 32px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header-hospital-info,
.header-brand-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important;
}

.header-hospital-title,
.header-brand-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-hospital-subtitle,
.header-brand-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    line-height: 1.2 !important;
    margin: 1px 0 0 0 !important;
    padding: 0 !important;
    white-space: nowrap;
}

/* --- CABECERA: ZONA DERECHA (Inicio + Cambiar Rol + Perfil + Salir) --- */
#mainNav .navbar-nav.ml-auto,
.header-right-zone {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    gap: 8px;
    flex-shrink: 0;
}

#mainNav .navbar-nav.ml-auto > .nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    height: 100% !important;
}

/* Botón Selector de Rol / Inicio estilo KGB */
.header-role-btn,
.header-btn-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11.5px !important;
    background-color: #192734 !important;
    color: #f1f5f9 !important;
    border: 1px solid #273340 !important;
    padding: 4px 10px !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
}

.header-role-btn:hover,
.header-btn-action:hover {
    background-color: #22303c !important;
    border-color: #38444d !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.header-role-btn svg.role-icon,
.header-role-btn i.role-icon,
.header-btn-action i {
    color: #1d9bf0 !important;
    flex-shrink: 0;
    font-size: 12px;
}

.header-role-name {
    color: #ffffff !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

.header-divider-v {
    width: 1px;
    height: 20px;
    background-color: #273340;
    margin: 0 2px;
}

/* Perfil de Usuario con Foto Circular + Nombre + Rol (Estilo KGB, SIN ENMARCADO) */
.header-user-profile {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 4px !important;
    margin: 0 !important;
    cursor: pointer;
}

.header-user-profile:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    opacity: 0.92;
}

.header-user-avatar-box,
.header-avatar-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50% !important;
    margin: 0 !important;
}

.header-user-avatar,
.header-avatar-img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.45) !important;
    background-color: #22303c !important;
    display: block !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    border: none !important;
}

/* Protección anti-clic derecho y arrastre en fotos de usuario */
.header-user-avatar,
.header-avatar-img,
.sidebar-user-avatar,
.user-avatar-protected {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

.header-user-meta,
.header-user-info {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header-user-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.header-user-role-text,
.header-user-status {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 9.5px !important;
    color: #38bdf8 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 1px !important;
    line-height: 1 !important;
    text-transform: uppercase;
}

.header-user-role-text .pulse-dot,
.header-user-status .pulse-dot,
.role-indicator-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background-color: #00ba7c !important;
    box-shadow: 0 0 5px rgba(0, 186, 124, 0.8) !important;
    display: inline-block !important;
    flex-shrink: 0;
}

/* Botón Cerrar Sesión (Estilo KGB Rojo Suave / Resaltado) */
.header-logout-btn,
.btn-logout {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 5px !important;
    background-color: rgba(244, 63, 94, 0.12) !important;
    color: #fda4af !important;
    border: 1px solid rgba(244, 63, 94, 0.3) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    margin-left: 2px !important;
    line-height: 1.2 !important;
}

.header-logout-btn:hover,
.btn-logout:hover {
    background-color: #e11d48 !important;
    border-color: #be123c !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35) !important;
    text-decoration: none !important;
}

.header-logout-btn svg,
.header-logout-btn i,
.btn-logout i {
    width: 13px;
    height: 13px;
    font-size: 12px;
    flex-shrink: 0;
}

.header-logout-text {
    display: inline-block;
    line-height: 1;
}

/* ==========================================================================
   2. Menú Lateral Oscuro (Sidebar .navbar-sidenav) - Compacto, Proporcionado y Elegante
   ========================================================================== */
@media (min-width: 992px) {
    #mainNav.fixed-top .navbar-sidenav,
    #mainNav .navbar-collapse .navbar-sidenav,
    .navbar-sidenav {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 215px !important;
        max-width: 215px !important;
        box-sizing: border-box !important;
        margin-top: 52px !important;
        height: calc(100vh - 52px - 32px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background-color: #15202B !important;
        border-right: 1px solid #22303c !important;
        box-shadow: 2px 0 6px rgba(0, 0, 0, 0.25) !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        transition: width 0.2s ease-in-out !important;
    }

    /* Ajuste de ancho y espacio de contenido principal (Offset superior de 68px para no cortar contenidos) */
    .content-wrapper,
    body.fixed-nav .content-wrapper {
        margin-left: 215px !important;
        padding: 68px 22px 25px 22px !important;
        width: calc(100% - 215px) !important;
        min-height: 100vh !important;
        background-color: #ffffff !important;
        box-sizing: border-box !important;
        transition: margin-left 0.2s ease-in-out, width 0.2s ease-in-out !important;
    }

    .content-wrapper > .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Barra Inferior del Sidebar (Status Conectado & Versión) */
    .sidebar-status-footer,
    .sidebar-footer-status {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 215px !important;
        max-width: 215px !important;
        height: 32px !important;
        background-color: #15202B !important;
        border-top: 1px solid #22303c !important;
        border-right: 1px solid #22303c !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 10px !important;
        z-index: 1031 !important;
        box-sizing: border-box !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        transition: width 0.2s ease-in-out !important;
    }
}

/* Ítems del Menú Lateral - Dimensiones Compactas y Proporcionadas */
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item {
    width: auto !important;
    max-width: 100% !important;
    margin: 1px 5px !important;
    border-radius: 5px !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 5px 8px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    border-left: 3px solid transparent !important;
    border-radius: 5px !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
    box-sizing: border-box !important;
    min-height: 28px !important;
    line-height: 1.25 !important;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link i {
    width: 16px !important;
    font-size: 12px !important;
    color: #8b98a5 !important;
    text-align: center !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease, transform 0.15s ease;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link .nav-link-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    font-size: 11.5px !important;
}

/* Flecha desplegable en menús multinivel */
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
    color: #64748b !important;
    font-size: 11px !important;
    margin-left: auto !important;
    float: right;
}

/* Hover en Ítems del Menú Lateral */
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item:hover > .nav-link,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link:focus {
    background-color: #1e2732 !important;
    color: #ffffff !important;
    border-left-color: #1d9bf0 !important;
    text-decoration: none !important;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item:hover > .nav-link i {
    color: #1d9bf0 !important;
    transform: scale(1.08);
}

/* Ítem Activo en Menú Lateral - Píldora Compacta y Elegante */
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item.active > .nav-link,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item.open > .nav-link,
.sidebar-sublink-active {
    background: linear-gradient(90deg, rgba(29, 155, 240, 0.28) 0%, rgba(29, 155, 240, 0.08) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(29, 155, 240, 0.4) !important;
    border-left: 3px solid #1d9bf0 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 4px rgba(29, 155, 240, 0.2) !important;
    border-radius: 5px !important;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item.active > .nav-link i,
.sidebar-sublink-active i {
    color: #1d9bf0 !important;
    filter: drop-shadow(0 0 4px rgba(29, 155, 240, 0.8));
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item.active > .nav-link .nav-link-text,
.sidebar-sublink-active span {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Submenús */
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level {
    background: #111a24 !important;
    margin: 2px 0 4px 8px !important;
    padding: 2px 0 2px 4px !important;
    border-left: 2px solid #22303c !important;
    border-radius: 0 0 5px 5px !important;
    list-style: none !important;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .sidenav-second-level > li,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .sidenav-third-level > li {
    width: 100% !important;
    margin-bottom: 1px;
    box-sizing: border-box !important;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 4px 6px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #8b98a5 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    border: 1px solid transparent !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .sidenav-second-level > li > a:hover,
#mainNav.navbar-dark .navbar-collapse .navbar-sidenav .sidenav-third-level > li > a:hover {
    background-color: #1e2732 !important;
    color: #f8fafc !important;
    text-decoration: none !important;
}

/* Estado de Conectado y Versión en el Footer del Sidebar */
.sidebar-status-left {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sidebar-status-dot,
.status-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.7);
    display: inline-block;
}

.sidebar-status-text,
.status-text {
    font-size: 10.5px;
    color: #94a3b8;
    font-weight: 500;
}

.sidebar-status-version,
.sidebar-version-badge {
    font-size: 10px;
    color: #64748b;
    font-weight: 600;
    font-family: monospace;
}

/* ==========================================================================
   3. ESTADO COLAPSADO (body.sidenav-toggled) - 50px Uniforme
   ========================================================================== */
@media (min-width: 992px) {
    body.sidenav-toggled #mainNav.fixed-top .navbar-sidenav,
    body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav,
    body.sidenav-toggled .navbar-sidenav {
        width: 50px !important;
        max-width: 50px !important;
        overflow-x: hidden !important;
    }

    body.sidenav-toggled #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item {
        width: 50px !important;
        max-width: 50px !important;
        margin: 1px 0 !important;
        padding: 0 !important;
    }

    body.sidenav-toggled #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
        width: 50px !important;
        max-width: 50px !important;
        padding: 6px 0 !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 0 !important;
    }

    body.sidenav-toggled #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link i {
        margin-right: 0 !important;
        font-size: 14px !important;
        width: 100% !important;
        text-align: center !important;
    }

    body.sidenav-toggled #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link .nav-link-text {
        display: none !important;
    }

    body.sidenav-toggled #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item > .nav-link:after {
        display: none !important;
    }

    body.sidenav-toggled #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-second-level,
    body.sidenav-toggled #mainNav.navbar-dark .navbar-collapse .navbar-sidenav > .nav-item .sidenav-third-level {
        display: none !important;
    }

    body.sidenav-toggled .sidebar-status-footer,
    body.sidenav-toggled .sidebar-footer-status {
        width: 50px !important;
        max-width: 50px !important;
        padding: 0 4px !important;
        justify-content: center !important;
    }

    body.sidenav-toggled .sidebar-status-footer .status-text,
    body.sidenav-toggled .sidebar-status-footer .sidebar-status-text,
    body.sidenav-toggled .sidebar-status-footer .sidebar-version-badge,
    body.sidenav-toggled .sidebar-status-footer .sidebar-status-version {
        display: none !important;
    }

    body.sidenav-toggled .content-wrapper,
    body.sidenav-toggled body.fixed-nav .content-wrapper {
        margin-left: 50px !important;
        width: calc(100% - 50px) !important;
        padding-top: 68px !important;
    }
}

/* ==========================================================================
   4. Ocultar completamente el pie de página inferior
   ========================================================================== */
footer.sticky-footer,
.sticky-footer,
.main-footer,
#text_footer {
    display: none !important;
}

body.sticky-footer {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   5. Modal de Perfil de Funcionario
   ========================================================================== */
.modal-profile-card {
    border-radius: 10px !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden;
    background-color: #ffffff !important;
}

.modal-profile-header {
    background: #15202B !important;
    background: -webkit-linear-gradient(135deg, #15202B 0%, #192734 100%) !important;
    background: linear-gradient(135deg, #15202B 0%, #192734 100%) !important;
    padding: 12px 18px !important;
    border-bottom: 1px solid #22303c !important;
    position: relative;
}

.modal-profile-title {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.modal-profile-close {
    color: #ffffff !important;
    opacity: 0.8 !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    text-shadow: none !important;
    outline: none !important;
    position: absolute !important;
    right: 16px !important;
    top: 8px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
}

.modal-profile-close:hover {
    opacity: 1 !important;
    color: #38bdf8 !important;
}

.modal-profile-body {
    padding: 20px 18px 14px 18px !important;
    text-align: center !important;
    background-color: #f8fafc !important;
}

.modal-avatar-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 10px auto;
    border-radius: 50% !important;
    overflow: hidden;
    border: 3px solid #1d9bf0;
    box-shadow: 0 4px 10px rgba(29, 155, 240, 0.3);
    background-color: #ffffff;
}

.modal-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 50% !important;
    display: block;
}

.modal-profile-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 4px 0 !important;
    text-transform: uppercase;
}

.modal-profile-badge {
    display: inline-block !important;
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
    padding: 2px 10px !important;
    border-radius: 16px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 14px !important;
}

.modal-profile-details {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    text-align: left !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

.profile-detail-row {
    padding: 7px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 12px !important;
}

.profile-detail-row:last-child {
    border-bottom: none !important;
}

.profile-detail-label {
    width: 35% !important;
    font-weight: 600 !important;
    color: #475569 !important;
}

.profile-detail-value {
    width: 65% !important;
    color: #0f172a !important;
    font-weight: 500 !important;
    word-break: break-word !important;
}

.modal-profile-footer {
    padding: 8px 16px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Scrollbar estilizada para el menú lateral oscuro */
#mainNav .navbar-sidenav {
    scrollbar-width: thin;
    scrollbar-color: #273340 #15202B;
}

#mainNav .navbar-sidenav::-webkit-scrollbar {
    width: 5px;
}

#mainNav .navbar-sidenav::-webkit-scrollbar-track {
    background: #15202B;
}

#mainNav .navbar-sidenav::-webkit-scrollbar-thumb {
    background: #273340;
    border-radius: 3px;
}

#mainNav .navbar-sidenav::-webkit-scrollbar-thumb:hover {
    background: #38444d;
}

/* ==========================================================================
   6. Adaptabilidad Responsiva (Móviles / Tablets)
   ========================================================================== */
@media (max-width: 991px) {
    .header-hospital-subtitle,
    .header-brand-subtitle {
        display: none !important;
    }
    
    .header-user-meta,
    .header-user-info {
        display: none !important;
    }
    
    .header-role-btn .header-role-name,
    .header-logout-btn .header-logout-text {
        display: none !important;
    }
    
    .header-role-btn,
    .header-logout-btn {
        padding: 5px 8px !important;
    }
    
    #mainNav .navbar-collapse .navbar-sidenav {
        margin-top: 0 !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .content-wrapper,
    body.fixed-nav .content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 68px 12px 20px 12px !important;
    }

    .sidebar-status-footer,
    .sidebar-footer-status {
        display: none !important;
    }
}