/* ==================================================================
   MEDITEL Premium UI v2.0  Clean Architecture
   
   Arquitectura:
   - Sidebar: fixed left, colapsable
   - Main-content: margin-left + overflow-y scroll
   - Header (#global-header): position:sticky dentro de main-content
      scrollea con el contenido, se adhiere al tope visible
   - SIN !important excepto donde sea estrictamente necesario
   
   Orden de carga: admin.css  crm.css  premium-ui.css  mmo-frontend.css
   ================================================================== */

/* ==============================================
   1. SIDEBAR COLLAPSIBLE
   ============================================== */

/* Transiciones suaves solo para propiedades de layout */
.sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-content {
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toggle button */
.sidebar-toggle-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(148,163,184,0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1010;
    transition: all 0.25s ease;
    font-size: 14px;
}
.sidebar-toggle-btn:hover {
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
    border-color: rgba(59,130,246,0.3);
    transform: scale(1.08);
}
.sidebar-toggle-btn i {
    transition: transform 0.3s ease;
}

/* =====================================================================
   ESTADO COLAPSADO DE ALTA GAMA (76px) - ICONOGRAFÍA Y HEADER ULTRA-PROFESIONAL
   ===================================================================== */
.sidebar.collapsed {
    width: 76px !important;
}

/* Header en Modo Colapsado */
.sidebar.collapsed .sidebar-header {
    min-height: 95px !important;
    padding: 14px 6px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    position: relative !important;
}

/* Ocultar elementos secundarios del logo en colapsado */
.sidebar.collapsed .logo-hex-ring,
.sidebar.collapsed .logo-particles,
.sidebar.collapsed .logo-brand,
.sidebar.collapsed .sidebar-subtitle,
.sidebar.collapsed .header-badges,
.sidebar.collapsed .hdr-bottom-line,
.sidebar.collapsed .logo-avatar-glow,
.sidebar.collapsed .brand-pre-label,
.sidebar.collapsed .brand-accent {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Controles del Header en Modo Colapsado */
.sidebar.collapsed .sidebar-header .sidebar-controls {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 0 auto 4px !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 10 !important;
}

.sidebar.collapsed #sidebar-widen-btn {
    display: none !important;
}

.sidebar.collapsed #sidebar-toggle {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(56, 189, 248, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #38bdf8 !important;
}

.sidebar.collapsed #sidebar-toggle i {
    transform: rotate(180deg) !important;
}

/* Stage & Avatar del Logo sin deformación ni aplastamiento */
.sidebar.collapsed .logo-stage {
    position: relative !important;
    margin: 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar.collapsed .logo-avatar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #0a172c, #132747) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 12px rgba(56, 189, 248, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 auto !important;
}

.sidebar.collapsed .logo-avatar img.sidebar-logo {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    object-fit: contain !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 6px !important;
    display: block !important;
    margin: auto !important;
}

/* Categorías / Menu Labels en Colapsado */
.sidebar.collapsed .sidebar-menu .menu-label {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 26px !important;
    padding: 0 !important;
    margin: 12px 0 6px !important;
    border-top: 1px solid rgba(56, 189, 248, 0.12) !important;
    background: transparent !important;
}

.sidebar.collapsed .sidebar-menu .menu-label-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sidebar.collapsed .sidebar-menu .menu-label-icon i {
    font-size: 0.82rem !important;
    color: #38bdf8 !important;
    opacity: 0.85 !important;
    margin: 0 !important;
}

.sidebar.collapsed .sidebar-menu .menu-label-chevron {
    display: none !important;
}

/* Submenu Ul & Li en Colapsado */
.sidebar.collapsed .sidebar-menu ul {
    padding: 0 6px !important;
}

.sidebar.collapsed .sidebar-menu li {
    margin: 4px 0 !important;
    display: flex !important;
    justify-content: center !important;
}

.sidebar.collapsed .sidebar-menu li a {
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    gap: 0 !important;
}

/* Icon Wrapper Único (Limpieza de Cajas Dobles) */
.sidebar.collapsed .sidebar-menu li a .nav-icon-wrap {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: rgba(56, 189, 248, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar.collapsed .sidebar-menu li a .nav-icon-wrap i {
    font-size: 1.1rem !important;
    color: #38bdf8 !important;
}

/* Hover State en Colapsado */
.sidebar.collapsed .sidebar-menu li a:hover .nav-icon-wrap {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(37, 99, 235, 0.2)) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.35) !important;
    transform: scale(1.08) !important;
}

.sidebar.collapsed .sidebar-menu li a:hover .nav-icon-wrap i {
    color: #ffffff !important;
}

/* Active State en Colapsado */
.sidebar.collapsed .sidebar-menu li.active > a .nav-icon-wrap {
    background: linear-gradient(135deg, #0284c7, #2563eb) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.45) !important;
}

.sidebar.collapsed .sidebar-menu li.active > a .nav-icon-wrap i {
    color: #ffffff !important;
}

/* Deshabilitar línea lateral activa en colapsado */
.sidebar.collapsed .sidebar-menu li.active > a::before {
    display: none !important;
}

/* Tooltip Emergente Flotante */
.sidebar.collapsed .sidebar-menu li a::after {
    content: attr(data-tooltip) !important;
    position: absolute !important;
    left: calc(100% + 12px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #0b1528 !important;
    color: #ffffff !important;
    padding: 7px 14px !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    z-index: 99999 !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 12px rgba(56, 189, 248, 0.2) !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
}

.sidebar.collapsed .sidebar-menu li a:hover::after {
    opacity: 1 !important;
}

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

.sidebar.collapsed .sidebar-user-mini {
    display: flex !important;
    justify-content: center !important;
    margin: 8px 4px !important;
    padding: 6px !important;
    background: transparent !important;
    border: none !important;
}

.sidebar.collapsed .sidebar-user-mini-info,
.sidebar.collapsed .sidebar-user-mini-dot {
    display: none !important;
}

.sidebar.collapsed .sidebar-user-mini-content {
    justify-content: center !important;
}

.sidebar.collapsed .sidebar-user-mini-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.sidebar.collapsed ~ .main-content {
    margin-left: 76px !important;
    width: calc(100% - 76px) !important;
    max-width: calc(100% - 76px) !important;
}

/* ==============================================
   2. HEADER  STICKY (dentro del flujo de scroll)
   ============================================== */

/* Base .header  admin.css lo define, aqui refinamos */
.header {
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(31,107,167,0.06);
    box-shadow: 0 1px 3px rgba(8,42,93,0.04), 0 4px 16px rgba(8,42,93,0.05);
    border-radius: 14px;
    padding: 14px 24px;
    margin-bottom: 24px;
    position: relative;
    z-index: 40;
}

.header h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-blue-dark);
    letter-spacing: -0.4px;
    line-height: 1.3;
}
.header h1 i {
    margin-right: 8px;
    color: var(--primary-blue);
    font-size: 1.1rem;
}

/* -- #global-header: FIXED — barra superior premium -- */
#global-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    margin: -66px -28px 32px -28px !important; /* Spans full width and top padding */
    padding: 0 36px !important; /* Better side spacing */
    height: 76px !important; /* Taller, more premium feel */
    min-height: 76px !important;
    max-height: 76px !important;
    background: rgba(255, 255, 255, 0.85) !important; /* Glass effect */
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0,0,0,0.01) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transition: all 0.3s ease !important;
}


/* Ajuste cuando sidebar está colapsado eliminado por ser sticky */


/* Espacio para que el contenido no quede debajo del header fijo
   NOTA: el padding-top real se define en la sección 4 */

#global-header .mobile-menu-btn {
    flex-shrink: 0;
    order: -1;
    color: #475569;
}

#global-header h1 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    color: #0f172a !important;
    letter-spacing: -0.2px;
}

#global-header h1 i {
    color: #1F6BA7 !important;
    margin-right: 8px;
    font-size: 0.95rem;
}

#global-header #global-header-actions,
#global-header .global-header-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin-left: 16px;
}

/* ── Tool items dentro del header oscuro ── */
#global-header .header-tools {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-right: 4px;
}

#global-header .header-tool-item {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s ease !important;
}

#global-header .header-tool-item i {
    color: #475569 !important;
    opacity: 1 !important;
    font-size: 14px !important;
}

#global-header .header-tool-item:hover {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

#global-header .header-tool-item:hover i {
    color: #1F6BA7 !important;
}

/* ── Separador vertical ── */
#global-header .header-tools::after {
    content: '';
    display: block;
    width: 1px;
    height: 24px;
    background: #e2e8f0;
    margin-left: 4px;
}

/* ── Notificaciones ── */
#global-header .notifications {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
}

#global-header .notifications .bell-icon {
    color: #475569 !important;
    font-size: 16px;
    transition: all 0.2s ease;
}

#global-header .notifications:hover .bell-icon {
    color: #1F6BA7 !important;
    transform: scale(1.1);
}

/* ── Separador antes del avatar ── */
#global-header .user-avatar-container {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0;
    margin-left: 6px;
    position: relative;
}

#global-header .user-avatar-container::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.15);
}

#global-header .user-avatar-container img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(31,107,167,0.3) !important;
    box-shadow: 0 2px 8px rgba(31,107,167,0.1) !important;
    transition: all 0.25s ease;
    object-fit: cover;
}

#global-header .user-avatar-container:hover img {
    border-color: #1F6BA7 !important;
    box-shadow: 0 3px 12px rgba(31,107,167,0.2) !important;
    transform: scale(1.05);
}

/* ── User details ── */
#global-header .user-details {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0;
}

#global-header .user-details .name {
    font-size: 0.82rem !important;
    font-weight: 600;
    white-space: nowrap;
    color: #ffffff !important;
    letter-spacing: -0.1px;
    line-height: 1.3;
}

#global-header .user-details .role {
    font-size: 0.68rem !important;
    white-space: nowrap;
    color: rgba(255,255,255,0.55) !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* ── Badges con tema oscuro ── */
#global-header .tool-badge,
#global-header .notifications .badge {
    border-color: #163a5f !important;
    box-shadow: 0 2px 6px rgba(239,68,68,0.4);
}

/* --- User info refined --- */
.user-info {
    gap: 8px;
}
.user-info img {
    width: 40px;
    height: 40px;
    border: 2px solid var(--primary-blue);
    box-shadow: 0 2px 8px rgba(31,107,167,0.15);
    margin-right: 10px;
}
.user-info img:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(31,107,167,0.25);
}
.user-details {
    flex-shrink: 0;
    min-width: 120px;
}
.user-details .name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-blue);
    letter-spacing: -0.2px;
    line-height: 1.3;
    white-space: nowrap;
}
.user-details .role {
    font-size: 0.72rem;
    color: var(--primary-blue);
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    opacity: 0.8;
    white-space: nowrap;
}
.user-avatar-container {
    border: none;
    box-shadow: none;
    transition: all 0.25s ease;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-avatar-container:hover {
    transform: none;
}

/* ==============================================
   3. HEADER TOOLS
   ============================================== */

.header-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 14px;
}
.header-tool-item {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(31,107,167,0.06), rgba(36,130,184,0.04));
    border: 1px solid rgba(31,107,167,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    color: var(--primary-blue);
}
.header-tool-item i {
    font-size: 15px;
    color: var(--primary-blue);
    opacity: 0.7;
    transition: all 0.2s ease;
}
.header-tool-item:hover {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-bright));
    border-color: var(--primary-blue);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31,107,167,0.25);
}
.header-tool-item:hover i {
    color: #fff;
    opacity: 1;
}
.tool-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(239,68,68,0.35);
    line-height: 1;
}

/* Notifications bell */
.notifications .bell-icon {
    font-size: 17px;
    color: var(--primary-blue);
    opacity: 0.75;
    transition: all 0.2s ease;
}
.notifications:hover .bell-icon {
    color: var(--primary-blue-dark);
    opacity: 1;
    transform: scale(1.1);
}
.notifications .badge {
    background: var(--danger);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(239,68,68,0.35);
    min-width: 18px;
    height: 18px;
    font-size: 0.65rem;
    top: -5px;
    right: -6px;
}

/* ==============================================
   4. MAIN CONTENT — ya definido en admin.css
   ============================================== */

.main-content {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    -webkit-overflow-scrolling: touch;
}

/* ==============================================
   5. BREADCRUMB
   ============================================== */

.header-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--gray-medium);
    margin-bottom: 2px;
    font-weight: 500;
}
.header-breadcrumb i {
    font-size: 0.6rem;
    opacity: 0.5;
}
.header-breadcrumb span:last-child {
    color: var(--primary-blue);
    font-weight: 600;
}

/* ==============================================
   6. CARDS
   ============================================== */

.card {
    border: 1px solid rgba(31,107,167,0.06);
    box-shadow: 0 1px 3px rgba(8,42,93,0.04), 0 4px 16px rgba(8,42,93,0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
    border-color: rgba(31,107,167,0.12);
    box-shadow: 0 8px 32px rgba(8,42,93,0.08), 0 2px 8px rgba(31,107,167,0.06);
    transform: translateY(-3px);
}
.card-icon {
    box-shadow: 0 4px 12px rgba(31,107,167,0.15);
}

/* Dashboard cards */
.dashboard-cards .card {
    position: relative;
    overflow: hidden;
}
.dashboard-cards .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, var(--primary-blue), var(--turquoise-light));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.dashboard-cards .card:hover::before {
    opacity: 1;
}

/* ==============================================
   7. SECTIONS
   ============================================== */

.section {
    animation: premiumFadeIn 0.35s ease-out;
}
@keyframes premiumFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.section:not(.active) {
    display: none;
    visibility: hidden;
    pointer-events: none;
}

/* Dashboard: compactación visual sin tocar arquitectura global */
#dashboard .dashboard-cards {
    align-items: start;
    gap: 18px;
}

#dashboard .dashboard-cards .card {
    padding: 22px;
    min-height: unset;
}

#dashboard .dashboard-cards .clinica-buttons {
    margin-top: 12px;
}

/* Module headers */
.module-page-header .module-icon {
    box-shadow: 0 6px 20px rgba(31,107,167,0.25);
}
.module-page-header .module-info h2 {
    color: var(--primary-blue-dark);
}

/* ==============================================
   8. TABLES
   ============================================== */

.table-container table thead th {
    background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border: none;
    white-space: nowrap;
}
.table-container table thead th:first-child { border-radius: 10px 0 0 0; }
.table-container table thead th:last-child  { border-radius: 0 10px 0 0; }

.table-container table tbody tr {
    transition: background 0.15s ease;
}
.table-container table tbody tr:hover {
    background: rgba(31,107,167,0.03);
}
.table-container table tbody td {
    padding: 10px 16px;
    font-size: 0.84rem;
    border-bottom: 1px solid rgba(31,107,167,0.05);
    color: var(--text-blue);
}

/* ==============================================
   9. PANELS
   ============================================== */

.panel {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(31,107,167,0.06);
    box-shadow: 0 1px 3px rgba(8,42,93,0.04);
}

/* ==============================================
   10. BUTTONS
   ============================================== */

.btn-primary,
button[class*="btn-primary"],
.action-button {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-bright) 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(31,107,167,0.2);
}
.btn-primary:hover,
button[class*="btn-primary"]:hover {
    background: linear-gradient(135deg, var(--primary-blue-dark) 0%, var(--primary-blue) 100%);
    box-shadow: 0 4px 16px rgba(31,107,167,0.3);
    transform: translateY(-1px);
}

/* ==============================================
   11. MODALS
   ============================================== */

.modal-overlay,
[class*="modal-overlay"],
[id*="modal"][style*="display: flex"] {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ==============================================
   12. SIDEBAR USER MINI-PANEL
   ============================================== */

.sidebar-user-mini {
    display: block;
    padding: 12px 14px;
    margin: 0 10px 8px;
    background: rgba(31,107,167,0.08);
    border-radius: 12px;
    border: 1px solid rgba(59,130,246,0.1);
    cursor: pointer;
    transition: all 0.25s ease;
}
.sidebar-user-mini:hover {
    background: rgba(31,107,167,0.14);
    border-color: rgba(59,130,246,0.2);
}
.sidebar-user-mini-content {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-user-mini-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(96,165,250,0.3);
    flex-shrink: 0;
    object-fit: cover;
}
.sidebar-user-mini-info {
    flex: 1;
    overflow: hidden;
}
.sidebar-user-mini-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.sidebar-user-mini-role {
    font-size: 0.65rem;
    color: rgba(96,165,250,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.sidebar-user-mini-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
    flex-shrink: 0;
}

/* ==============================================
   13. SCROLLBAR
   ============================================== */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(31,107,167,0.3);
    border-radius: 4px;
    border: 1px solid #f1f5f9;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(31,107,167,0.5);
}
.main-content::-webkit-scrollbar {
    width: 7px;
}
.main-content::-webkit-scrollbar-thumb {
    background: rgba(31,107,167,0.25);
    border-radius: 4px;
}

/* ==============================================
   14. TYPOGRAPHY  solo dentro de main-content
   ============================================== */

.main-content h1, .main-content h2, .main-content h3,
.main-content h4, .main-content h5, .main-content h6 {
    color: var(--text-blue);
    letter-spacing: -0.3px;
}

/* ——— FIX: Headings dentro de banners/headers con fondo oscuro deben ser blancos ——— */
/* Dashboard */
.main-content .kpi-section-title h3,
.main-content .kpi-section-title h2,
.main-content .dash-analytics-title h2,
.main-content .dash-analytics-title h3,
.main-content .dash-modal-header h3,
.main-content .kpi-modal-header h3,
/* Seguridad del Paciente */
.main-content .sp-tri-hero-text h2,
.main-content .sp-inv-hero-text h2,
.main-content .sp-evt-hero-text h2,
.main-content .sp-form-header h2,
.main-content .sp-report-hero-text h2,
.main-content .sp-lp-header h3,
/* COP */
.main-content .cop-reason-category h5,
.main-content .cop-alerts-title h3,
.main-content .cop-he-header-text h3,
.main-content .cop-modal-title-group h3,
.main-content .cop-modal-header-dark h3,
.main-content .cop-modal-header-gradient h3,
.main-content .cop-modal-header-info h3,
.main-content .cop-modal-header-critical h3,
.main-content .cop-modal-header-warning h3,
/* Legal Compliance */
.main-content .lc-welcome-text h2,
.main-content .lc-matriz-header-v2 h4,
.main-content .lc-categorias-header-v2 h4,
.main-content .lc-sla-header-v2 h4,
.main-content .lc-tipos-header-v2 h4,
.main-content .lc-config-section-header h3,
/* Gobierno Clínico */
.main-content .gc-header h2,
.main-content .gc-modal-header h3,
.main-content .gc-comite-header h3,
/* Perfil */
.main-content .perfil-avatar-section h2,
/* Paneles */
.main-content .tool-panel-header h3,
/* QMS / Modales genéricos */
.main-content .qms-auditoria-header h4,
.main-content .qms-proceso-header h3,
.main-content .modal-overlay .modal-header h3,
/* Comités */
.main-content .comite-header h3,
.main-content .comite-header h4,
/* INNO Research */
.main-content .research-card-header h3,
.main-content .research-modal-header h3,
.main-content .research-detail-section-header h4,
/* SGCC / Capacitación */
.main-content .sgcc-header h2,
.main-content .sgcc-header h3,
/* AMI - Auditoría Médica Inteligente */
.main-content .ami-modal-header h3,
/* NCA - Normatividad y Acreditación */
.main-content .nca-modal-header h3,
/* MMO - Medication & Mobility */
.main-content .mmo-metric-info h3,
.main-content .mmo-floor-header h3,
.main-content .mmo-p360-patient h2,
/* PIDME - Desempeño Médico */
.main-content .dashboard-title h2,
/* RC - Referencia y Contrarreferencia */
.main-content .rc-modal-header h3,
/* Notificaciones */
.main-content .notification-header h4 {
    color: #ffffff !important;
}

.main-content .table-header h1,
.main-content .table-header h2,
.main-content .table-header h3,
.main-content .table-header h4,
.main-content .table-header h5,
.main-content .table-header h6,
.main-content .table-header h1 i,
.main-content .table-header h2 i,
.main-content .table-header h3 i,
.main-content .table-header h4 i,
.main-content .table-header h5 i,
.main-content .table-header h6 i {
    color: #ffffff !important;
}
.section-title-wrapper h2 {
    color: var(--primary-blue-dark);
}

/* ==============================================
   15. BADGES  contextuales (sidebar oscuro vs contenido claro)
   ============================================== */

.sidebar .status-badge.active-badge {
    background: rgba(34,197,94,0.12);
    color: rgba(134,239,172,0.85);
    border: 1px solid rgba(34,197,94,0.15);
    font-size: 0.6rem;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.sidebar .status-badge.nuevo-badge {
    background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(31,107,167,0.2));
    color: #93c5fd;
    font-size: 0.6rem;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border: 1px solid rgba(31,107,167,0.25);
}
.main-content .status-badge.active-badge {
    background: rgba(34,197,94,0.12);
    color: #16a34a;
    border: 1px solid rgba(34,197,94,0.2);
    font-size: 0.6rem;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 600;
}
.main-content .status-badge.nuevo-badge {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-bright));
    color: #fff;
    font-size: 0.6rem;
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(31,107,167,0.3);
}

/* ==============================================
   16. TOAST & ALERTS
   ============================================== */

.toast {
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(8,42,93,0.15);
    border-left-width: 3px;
}
.alert-banner {
    border-radius: 12px;
    border: 1px solid rgba(31,107,167,0.1);
}
.alert-banner.info {
    background: linear-gradient(135deg, rgba(31,107,167,0.04), rgba(132,204,213,0.06));
    border-color: rgba(31,107,167,0.12);
}

/* ==============================================
   17. MENU GROUPS  Colapsable
   ============================================== */

.menu-label {
    cursor: pointer;
    user-select: none;
}
.menu-label .menu-label-chevron {
    margin-left: auto;
    font-size: 0.5rem;
    transition: transform 0.25s ease;
    opacity: 0.4;
}
.menu-label.collapsed-group .menu-label-chevron {
    transform: rotate(-90deg);
}
.menu-label.collapsed-group + ul {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    margin: 0;
    padding: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
}
.sidebar-menu ul {
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
}

/* ==============================================
   18. FULLSCREEN
   ============================================== */

:fullscreen .main-content,
:-webkit-full-screen .main-content {
    padding: 0 24px 16px;
}
:fullscreen .sidebar,
:-webkit-full-screen .sidebar {
    box-shadow: 2px 0 20px rgba(0,0,0,0.3);
}

/* ==============================================
   19. ACCESSIBILITY
   ============================================== */

.header-tool-item:focus-visible,
.sidebar-toggle-btn:focus-visible,
.sidebar-menu li a:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* ==============================================
   20. SKELETON LOADING
   ============================================== */

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton-loading {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

/* ==============================================
   21. PID-ME layout
   ============================================== */

#pidme.section.active {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 100%;
}
#pidme .pidme-global-filters,
#pidme .pidme-nav-tabs,
#pidme .pidme-section,
#pidme .pidme-dashboard-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
#pidme .pidme-nav-tabs {
    /* Homologado por sección H2 universal */
}
#pidme .pidme-nav-btn {
    /* Homologado por sección H3 universal */
}
#pidme .pidme-nav-btn.active {
    /* Homologado por sección H3 universal */
}

#pidme .module-page-header {
    /* Homologado por sección H1 universal */
}

#pidme .pidme-section {
    overflow-y: visible;
    overflow-x: hidden;
}
#pidme .pidme-kpi-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

#pidme .quick-access-grid,
#pidme .pidme-ed-metrics-grid,
#pidme .pidme-hosp-summary-grid,
#pidme .pidme-surgery-metrics-grid,
#pidme .pidme-queues-board,
#pidme .triage-distribution,
#pidme .or-status-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

#pidme .pidme-dashboard-content,
#pidme #pidme-dashboard-content,
#pidme #pidme-command-ed-content,
#pidme #pidme-command-hosp-content,
#pidme #pidme-command-surgery-content,
#pidme #pidme-queues-content,
#pidme #pidme-alerts-content,
#pidme #pidme-config-content {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
}

/* ==============================================
   22. RESPONSIVE  Mobile hamburger base
   ============================================== */

.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(31,107,167,0.08), rgba(36,130,184,0.06));
    border: 1px solid rgba(31,107,167,0.1);
    color: var(--primary-blue);
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.25s ease;
    margin-right: 8px;
}
.mobile-menu-btn:hover {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-blue-bright));
    color: #fff;
    box-shadow: 0 4px 12px rgba(31,107,167,0.25);
}

/* ==================================================================
   HOMOLOGACIÓN UNIVERSAL DE DISEÑO v1.0
   Sistema unificado para TODOS los módulos — consistencia premium
   ================================================================== */

.module-page-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    padding: 18px 22px 18px 18px !important;
    background: linear-gradient(135deg, #151f32 0%, #0b0f19 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0,0,0,0.1) !important;
    border: 1px solid #22314d !important;
    position: relative !important;
    overflow: visible !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}

.module-page-header:hover {
    box-shadow: 0 6px 32px rgba(15, 41, 66, 0.09), 0 2px 6px rgba(0,0,0,0.04) !important;
}

.module-page-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    height: auto !important;
    flex: none !important;
    background: linear-gradient(180deg, #1F6BA7 0%, #0ea5e9 50%, #38bdf8 100%) !important;
    border-radius: 16px 0 0 16px !important;
    box-shadow: 2px 0 12px rgba(31, 107, 167, 0.15) !important;
    display: block !important;
}

.module-page-header .module-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 1.15rem !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

.module-page-header:hover .module-icon {
    transform: scale(1.05) !important;
}

.module-page-header .module-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.module-page-header .module-info h2 {
    margin: 0 0 4px 0 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #f8fafc !important;
    letter-spacing: -0.3px !important;
    line-height: 1.3 !important;
}

.module-page-header .module-info p {
    margin: 0 !important;
    font-size: 0.82rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* ==============================================
   H2. TABS UNIVERSALES — Contenedores unificados
   ============================================== */

.sgcc-nav-tabs,
.ami-nav-tabs,
.sp-tabs,
.gc-nav-bar,
.mgdi-tabs,
.module-tabs,
.qms-tabs,
.mmo-view-buttons,
.pidme-nav-tabs,
.cop-nav-tabs,
.nca-main-tabs,
.inno-main-tabs,
.exp360-main-tabs,
.tele-main-tabs,
.rc-main-tabs,
.pmo-tabs,
.crm-tabs,
.config-nav-tabs,
.scheduling-tabs {
    display: flex !important;
    gap: 6px !important;
    padding: 6px !important;
    background: #f1f5f9 !important;
    border-radius: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(31, 107, 167, 0.06) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
    position: relative !important;
    align-items: stretch !important;
}

/* L&C v2 wrapper oscuro → overridearlo al estilo claro */
.lc-main-tabs-v2 {
    background: #f1f5f9 !important;
    border-radius: 12px !important;
    padding: 6px !important;
    border: 1px solid rgba(31, 107, 167, 0.06) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
    margin-bottom: 20px !important;
}
.lc-main-tabs-v2::before,
.lc-main-tabs-v2::after {
    display: none !important;
}
.lc-main-tabs-v2 .lc-tabs-header {
    display: none !important;
}
.lc-main-tabs-v2 .lc-tabs-wrapper {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

/* R&C ultra-premium → normalizar al estilo unificado */
.rc-main-tabs::before,
.rc-main-tabs::after {
    display: none !important;
}

/* NCA/INNO underline decorators → limpiar */
.nca-main-tabs::after,
.inno-main-tabs::before {
    display: none !important;
}

/* ==============================================
   H3. TAB BUTTONS — Estilo unificado tipo "pill"
   ============================================== */

.sgcc-nav-btn,
.ami-tab-btn,
.sp-tab,
.gc-tab,
.mgdi-tab,
.qms-tab-btn,
.mmo-view-btn,
.pidme-nav-btn,
.cop-nav-btn,
.nca-tab-btn,
.inno-tab-btn,
.exp360-tab-btn,
.tele-tab-btn,
.lc-tab-v2,
.rc-tab-btn,
.pmo-tab,
.crm-tab,
.config-tab,
.scheduling-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 16px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    position: relative !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    box-shadow: none !important;
    min-height: 38px !important;
}

/* Limpiar pseudo-elementos de tabs individuales */
.sgcc-nav-btn::before, .sgcc-nav-btn::after,
.nca-tab-btn::before, .nca-tab-btn::after,
.inno-tab-btn::before, .inno-tab-btn::after,
.rc-tab-btn::before, .rc-tab-btn::after,
.lc-tab-v2::before, .lc-tab-v2::after,
.config-tab::before, .config-tab::after,
.exp360-tab-btn::before, .exp360-tab-btn::after {
    display: none !important;
}

/* Hover state unificado */
.sgcc-nav-btn:hover,
.ami-tab-btn:hover,
.sp-tab:hover,
.gc-tab:hover,
.mgdi-tab:hover,
.qms-tab-btn:hover,
.mmo-view-btn:hover,
.pidme-nav-btn:hover,
.cop-nav-btn:hover,
.nca-tab-btn:hover,
.inno-tab-btn:hover,
.exp360-tab-btn:hover,
.tele-tab-btn:hover,
.lc-tab-v2:hover,
.rc-tab-btn:hover,
.pmo-tab:hover,
.crm-tab:hover,
.config-tab:hover,
.scheduling-tab:hover {
    color: #1F6BA7 !important;
    background: rgba(31, 107, 167, 0.06) !important;
    transform: none !important;
}

/* ACTIVE state unificado — pill azul premium */
.sgcc-nav-btn.active,
.ami-tab-btn.active,
.sp-tab.active,
.gc-tab.active,
.mgdi-tab.active,
.qms-tab-btn.active,
.mmo-view-btn.active,
.pidme-nav-btn.active,
.cop-nav-btn.active,
.nca-tab-btn.active,
.inno-tab-btn.active,
.exp360-tab-btn.active,
.tele-tab-btn.active,
.lc-tab-v2.active,
.rc-tab-btn.active,
.pmo-tab.active,
.crm-tab.active,
.config-tab.active,
.scheduling-tab.active {
    background: linear-gradient(135deg, #1F6BA7 0%, #2980b9 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(31, 107, 167, 0.25) !important;
    transform: none !important;
}

/* Iconos dentro de tabs activos */
.sgcc-nav-btn.active i,
.ami-tab-btn.active i,
.sp-tab.active i,
.gc-tab.active i,
.mgdi-tab.active i,
.qms-tab-btn.active i,
.mmo-view-btn.active i,
.pidme-nav-btn.active i,
.cop-nav-btn.active i,
.nca-tab-btn.active i,
.inno-tab-btn.active i,
.exp360-tab-btn.active i,
.tele-tab-btn.active i,
.lc-tab-v2.active i,
.rc-tab-btn.active i,
.pmo-tab.active i,
.crm-tab.active i,
.config-tab.active i,
.scheduling-tab.active i {
    color: #ffffff !important;
    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* Badge/counter en tabs */
.sgcc-nav-btn .badge,
.ami-tab-btn .badge,
.nca-tab-btn .badge,
.cop-nav-btn .badge,
.pidme-nav-btn .badge,
.inno-tab-btn .badge,
.exp360-tab-btn .badge,
.tele-tab-btn .badge,
.rc-tab-btn .badge,
.lc-tab-v2 .badge {
    background: #e74c3c !important;
    color: #fff !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    min-width: 18px !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* Subtitulos dentro de LC tabs v2 */
.lc-tab-v2 .lc-tab-subtitle {
    display: none !important;
}

/* ==============================================
   H4. DASHBOARD CARDS / KPI — Diseño unificado
   ============================================== */

.dashboard-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.dashboard-cards .card {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 20px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    position: relative !important;
    overflow: visible !important;
}

.dashboard-cards .card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    border-radius: 14px 14px 0 0 !important;
    opacity: 1 !important;
}

/* Colores de acento por variante */
.dashboard-cards .card.primary::before   { background: linear-gradient(90deg, #1F6BA7, #2980b9) !important; }
.dashboard-cards .card.secondary::before { background: linear-gradient(90deg, #6366f1, #818cf8) !important; }
.dashboard-cards .card.success::before   { background: linear-gradient(90deg, #059669, #10b981) !important; }
.dashboard-cards .card.warning::before   { background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; }
.dashboard-cards .card.danger::before    { background: linear-gradient(90deg, #ef4444, #f87171) !important; }

/* Card sin variante → azul por defecto */
.dashboard-cards .card:not(.primary):not(.secondary):not(.success):not(.warning):not(.danger)::before {
    background: linear-gradient(90deg, #1F6BA7, #38bdf8) !important;
}

.dashboard-cards .card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(15, 41, 66, 0.1) !important;
    border-color: rgba(31, 107, 167, 0.1) !important;
}

.dashboard-cards .card .card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.dashboard-cards .card .card-title {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.dashboard-cards .card .card-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    transition: none !important;
    transform: none !important;
    animation: none !important;
}

.dashboard-cards .card:hover .card-icon {
    transform: none !important;
    animation: none !important;
}

.dashboard-cards .card .card-value {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
}

.dashboard-cards .card .card-trend {
    font-size: 0.75rem !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.dashboard-cards .card .card-trend.trend-up {
    background: rgba(5, 150, 105, 0.1) !important;
    color: #059669 !important;
}
.dashboard-cards .card .card-trend.trend-down {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

/* CRM KPI → Unificar */
.crm-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.crm-kpi-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #1F6BA7 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.25s ease !important;
}

.crm-kpi-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25) !important;
}

.crm-kpi-card .crm-kpi-value {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.crm-kpi-card .crm-kpi-label {
    font-size: 0.78rem !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

/* PMO KPI → Unificar */
.pmo-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.pmo-kpi-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.25s ease !important;
}

.pmo-kpi-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25) !important;
}

.pmo-kpi-card .pmo-kpi-value {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.pmo-kpi-card .pmo-kpi-label {
    font-size: 0.78rem !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

.pmo-kpi-card .pmo-kpi-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}

/* Stat cards genéricos (scheduling, monitoreo) */
.stat-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 18px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.25s ease !important;
}

.stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(15, 41, 66, 0.1) !important;
}

/* ==============================================
   H5. SECCIONES DE CONTENIDO — Espaciado uniforme
   ============================================== */

/* Alert banners consistentes */
.alert-banner {
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin-bottom: 18px !important;
    font-size: 0.84rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.alert-banner.info {
    background: rgba(31, 107, 167, 0.06) !important;
    border: 1px solid rgba(31, 107, 167, 0.12) !important;
    color: #1F6BA7 !important;
}

/* Filtros globales consistentes */
[class*="-global-filters"],
[class*="-filters-bar"],
[class*="-filter-row"] {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 18px !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Selectores/inputs dentro de filtros */
[class*="-global-filters"] select,
[class*="-global-filters"] input,
[class*="-filters-bar"] select,
[class*="-filters-bar"] input {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 0.82rem !important;
    color: #1e293b !important;
    background: #ffffff !important;
    transition: border-color 0.2s ease !important;
}

[class*="-global-filters"] select:focus,
[class*="-global-filters"] input:focus,
[class*="-filters-bar"] select:focus,
[class*="-filters-bar"] input:focus {
    border-color: #1F6BA7 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(31, 107, 167, 0.1) !important;
}

/* ==============================================
   H6. TABLAS — Estilo premium unificado
   ============================================== */

.table-container,
[class*="-table-container"] {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    max-height: 500px;
    margin-bottom: 20px !important;
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 #f1f5f9;
}

.table-container::-webkit-scrollbar,
[class*="-table-container"]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.table-container::-webkit-scrollbar-thumb,
[class*="-table-container"]::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
    border: 2px solid #f1f5f9;
}

.table-container::-webkit-scrollbar-thumb:hover,
[class*="-table-container"]::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.table-container::-webkit-scrollbar-track,
[class*="-table-container"]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 999px;
}

/* ==============================================
   H7. PANELES / CONTENIDO DE TABS — Estilo unificado
   ============================================== */

[class*="-tab-content"],
[class*="-section"][class*="pidme"],
[class*="-section"][class*="cop"],
.gc-panel,
.config-panel,
[class*="-modulo"] {
    animation: premiumFadeIn 0.25s ease-out !important;
}

/* ==============================================
   H8. BOTONES DE ACCIÓN — Estilo premium unificado
   ============================================== */

.section button[class*="btn-add"],
.section button[class*="btn-new"],
.section button[class*="btn-crear"],
.section .btn-export,
.section .btn-refresh {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 18px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* ==============================================
   H9. SEPARADORES Y ESPACIOS — Ritmo visual uniforme
   ============================================== */

.section > .module-page-header + * {
    margin-top: 0 !important;
}

/* Espacio uniforme entre secciones dentro de un módulo */
.section > div + div {
    /* No forzar margin genérico — cada componente tiene su propio mb */
}

/* ==============================================
   H10. RESPONSIVE — Tabs y KPIs en móvil
   ============================================== */

@media (max-width: 992px) {
    .dashboard-cards {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 12px !important;
    }
    
    .crm-kpi-grid,
    .pmo-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    }
    
    .sgcc-nav-btn, .ami-tab-btn, .sp-tab, .gc-tab,
    .mgdi-tab, .qms-tab-btn, .mmo-view-btn, .pidme-nav-btn,
    .cop-nav-btn, .nca-tab-btn, .inno-tab-btn, .exp360-tab-btn,
    .tele-tab-btn, .lc-tab-v2, .rc-tab-btn, .pmo-tab,
    .crm-tab, .config-tab, .scheduling-tab {
        padding: 7px 12px !important;
        font-size: 0.78rem !important;
    }
}

@media (max-width: 768px) {
    .dashboard-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    
    .crm-kpi-grid,
    .pmo-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .module-page-header {
        padding: 14px 16px 14px 14px !important;
        gap: 12px !important;
    }
    
    .module-page-header .module-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    .module-page-header .module-info h2 {
        font-size: 1rem !important;
    }
    
    .sgcc-nav-btn, .ami-tab-btn, .sp-tab, .gc-tab,
    .mgdi-tab, .qms-tab-btn, .mmo-view-btn, .pidme-nav-btn,
    .cop-nav-btn, .nca-tab-btn, .inno-tab-btn, .exp360-tab-btn,
    .tele-tab-btn, .lc-tab-v2, .rc-tab-btn, .pmo-tab,
    .crm-tab, .config-tab, .scheduling-tab {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        gap: 5px !important;
    }
}

@media (max-width: 480px) {
    .dashboard-cards {
        grid-template-columns: 1fr !important;
    }
    
    .crm-kpi-grid,
    .pmo-kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==============================================
   23. RESPONSIVE  Tablet (<=992px)
   ============================================== */

@media (max-width: 992px) {
    .sidebar:not(.mobile-open) {
        width: 72px;
    }
    .sidebar:not(.mobile-open) .sidebar-header {
        min-height: 72px;
        padding: 12px 8px 10px;
    }
    .sidebar:not(.mobile-open) .hdr-aurora,
    .sidebar:not(.mobile-open) .hdr-grid,
    .sidebar:not(.mobile-open) .hdr-glow-orb,
    .sidebar:not(.mobile-open) .logo-hex-ring,
    .sidebar:not(.mobile-open) .logo-particles,
    .sidebar:not(.mobile-open) .logo-brand,
    .sidebar:not(.mobile-open) .sidebar-subtitle,
    .sidebar:not(.mobile-open) .header-badges,
    .sidebar:not(.mobile-open) .hdr-bottom-line,
    .sidebar:not(.mobile-open) .logo-avatar-glow {
        display: none;
    }
    .sidebar:not(.mobile-open) .logo-avatar {
        width: 40px; height: 40px; margin: 0 auto;
    }
    .sidebar:not(.mobile-open) .logo-avatar img {
        width: 40px; height: 40px;
    }
    .sidebar:not(.mobile-open) .menu-label {
        font-size: 0; height: 12px;
    }
    .sidebar:not(.mobile-open) .sidebar-menu li a .menu-text,
    .sidebar:not(.mobile-open) .sidebar-menu li a .status-badge {
        display: none;
    }
    .sidebar:not(.mobile-open) .sidebar-menu li a {
        justify-content: center; padding: 10px 6px; gap: 0;
    }
    .sidebar:not(.mobile-open) .sidebar-footer,
    .sidebar:not(.mobile-open) .sidebar-user-mini-info,
    .sidebar:not(.mobile-open) .sidebar-user-mini-dot {
        display: none;
    }
    .sidebar:not(.mobile-open) ~ .main-content {
        margin-left: 72px;
    }
    .sidebar {
        width: 72px;
        height: 100vh;
        position: fixed;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .sidebar-header {
        width: auto;
        position: sticky;
    }
    .main-content {
        margin-left: 72px;
    }
    #global-header {
        left: 72px !important;
    }
}

/* ==============================================
   24. RESPONSIVE  Mobile (<=768px)
   ============================================== */

@media (max-width: 768px) {
    .sidebar {
        width: 0;
        overflow: hidden;
        position: fixed;
        height: 100vh;
        z-index: 2000;
    }
    .sidebar.mobile-open {
        width: 280px;
        overflow-y: auto;
        box-shadow: 4px 0 40px rgba(0,0,0,0.5);
    }
    .sidebar.mobile-open .sidebar-header {
        min-height: 160px;
    }
    .main-content {
        margin-left: 0 !important;
        padding: 58px 14px 12px 14px !important;
    }
    #global-header {
        left: 0 !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 12px !important;
    }
    #global-header .user-details {
        display: none !important;
    }
    #global-header h1 {
        font-size: 0.9rem !important;
    }
    .header h1 {
        font-size: 1rem;
    }
    .mobile-menu-btn {
        display: flex !important;
    }
    .mobile-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .mobile-sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none !important;
    }
    .mobile-sidebar-overlay {
        display: none !important;
    }
}

/* @media (max-width: 1200px) */
@media (max-width: 1200px) {
    .header h1 {
        font-size: 1.15rem;
    }
    .main-content {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* =====================================================================
   PREMIUM LIGHT MODE OVERRIDES
   ===================================================================== */

body {
    background: #f8fafc !important;
    color: #1e293b !important;
}

.main-content {
    background: #f8fafc !important;
}

/* Modales e Interfaces principales */
.modal-content, .sp-modal, .cop-modal, .qms-modal, .ami-modal, .nca-modal, .rc-modal, .research-modal {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Overlays deben ser semi-transparentes, NO blancos */
.modal-overlay {
    background-color: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Encabezados y títulos generales - Fuerza contraste absoluto en modo claro */
h1, h2, h3, h4, h5, h6,
.modal-title, .panel-title, .card-title, .title,
.main-content h1, .main-content h2, .main-content h3, 
.main-content h4, .main-content h5, .main-content h6,
.header h1, .header h2, .header h3, .header h4 {
    color: #0f172a !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

/* Tarjetas y Paneles */
.card, 
.panel, 
.tool-panel, 
.sp-panel, 
.fv-panel, 
.qms-panel, 
.ami-panel,
.gc-panel,
.config-panel,
[class*="-card"],
[class*="-panel"],
.stat-box,
.kpi-box {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    border-radius: 12px !important;
}

/* Textos legibles en cualquier tarjeta o panel */
[class*="-card"] h1, [class*="-card"] h2, [class*="-card"] h3, [class*="-card"] h4, [class*="-card"] h5, [class*="-card"] h6,
[class*="-panel"] h1, [class*="-panel"] h2, [class*="-panel"] h3, [class*="-panel"] h4, [class*="-panel"] h5, [class*="-panel"] h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6,
.card-title, [class*="card-title"],
.panel-title, [class*="panel-title"] {
    color: #0f172a !important;
}

[class*="-card"] p, [class*="-panel"] p, .card p, .panel p {
    color: #475569 !important;
}

.card-value, [class*="card-value"], [class*="-kpi-value"] {
    color: #0f172a !important;
}

/* =====================================================================
   HEADER DEL SIDEBAR ENTERPRISE - ALTO NIVEL ESTÉTICO Y DISEÑO DE VANGUARDIA
   ===================================================================== */
.sidebar-header {
    padding: 32px 18px 24px !important;
    background: linear-gradient(180deg, #050b18 0%, #091730 60%, #0d2042 100%) !important;
    text-align: center !important;
    position: relative !important;
    border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.sidebar-header .hdr-aurora,
.sidebar-header .hdr-grid,
.sidebar-header .hdr-glow-orb {
    display: block !important;
}

.sidebar-header h2 {
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important;
}

.sidebar-header .sidebar-subtitle {
    color: #94a3b8 !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
}

.sidebar-header .brand-pre-label {
    color: #38bdf8 !important;
    letter-spacing: 3px !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.3) !important;
}

/* =====================================================================
   SUPERIOR ENTERPRISE SIDEBAR 2026 - DINÁMICO, REDACCIÓN FLUIDA Y ALTO NIVEL ESTÉTICO
   ===================================================================== */

.sidebar {
    width: 310px !important;
    background: linear-gradient(180deg, #070f1e 0%, #0c1a30 35%, #102444 70%, #081224 100%) !important;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease !important;
    box-shadow: 6px 0 35px rgba(0, 0, 0, 0.45), 1px 0 0 rgba(56, 189, 248, 0.12) !important;
}

.sidebar.wide-mode {
    width: 350px !important;
}

.sidebar.collapsed {
    width: 76px !important;
}

.main-content {
    margin-left: 310px !important;
    transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar.wide-mode ~ .main-content {
    margin-left: 350px !important;
}

.sidebar.collapsed ~ .main-content {
    margin-left: 76px !important;
}

/* Botones de Control de la Barra Lateral (Header) */
.sidebar-header .sidebar-controls {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 1010;
}

.sidebar-ctrl-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    font-size: 12px;
}

.sidebar-ctrl-btn:hover {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.4);
    transform: scale(1.08);
}

.sidebar-ctrl-btn.active {
    background: linear-gradient(135deg, #0284c7, #2563eb);
    color: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

/* Menu Labels (Categorías) */
.sidebar-menu .menu-label {
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: #38bdf8 !important;
    padding: 18px 16px 8px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.2) !important;
}

.sidebar-menu .menu-label:hover {
    color: #60a5fa !important;
}

.sidebar-menu .menu-label-icon i {
    color: #38bdf8 !important;
    margin-right: 6px !important;
    font-size: 0.8rem !important;
}

.sidebar-menu .menu-label .menu-label-chevron {
    font-size: 0.72rem !important;
    color: #64748b !important;
    transition: transform 0.3s ease !important;
}

.sidebar-menu .menu-label.collapsed-group .menu-label-chevron {
    transform: rotate(-90deg) !important;
}

/* Submenu Lists */
.sidebar-menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 2px 8px !important;
    transition: all 0.3s ease !important;
}

/* Menu Item Links - DISTRIBUCIÓN PERFECTA SIN TRUNCAISMO */
.sidebar-menu li {
    margin: 3px 0 !important;
    position: relative !important;
}

.sidebar-menu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    color: #e2e8f0 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    gap: 10px !important;
    position: relative !important;
    overflow: visible !important;
}

/* Icon Wrap */
.sidebar-menu li a .nav-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(56, 189, 248, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.15) !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
}

.sidebar-menu li a .nav-icon-wrap i {
    font-size: 0.88rem !important;
    color: #38bdf8 !important;
    transition: all 0.25s ease !important;
}

/* Menu Text (REDACCIÓN FLUIDA Y COMPLETA) */
.sidebar-menu li a .menu-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 0.85rem !important;
    color: #f1f5f9 !important;
    letter-spacing: 0.1px !important;
    line-height: 1.3 !important;
}

/* Status Badge Activo - Sleek Neon Badge */
.sidebar-menu li a .status-badge,
.sidebar-menu li a .active-badge {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    background: rgba(34, 197, 94, 0.14) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.15) !important;
}

/* Hover State */
.sidebar-menu li a:hover {
    background: rgba(56, 189, 248, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.12) !important;
}

.sidebar-menu li a:hover .nav-icon-wrap {
    background: rgba(56, 189, 248, 0.22) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3) !important;
}

.sidebar-menu li a:hover .nav-icon-wrap i {
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* Active State */
.sidebar-menu li.active > a {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(37, 99, 235, 0.12) 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

.sidebar-menu li.active > a .nav-icon-wrap {
    background: linear-gradient(135deg, #0284c7, #2563eb) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.4) !important;
}

.sidebar-menu li.active > a .nav-icon-wrap i {
    color: #ffffff !important;
}

.sidebar-menu li.active > a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 65% !important;
    background: linear-gradient(180deg, #38bdf8, #2563eb) !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: 0 0 10px #38bdf8 !important;
}

/* Collapsed State Icon Only */
.sidebar.collapsed .sidebar-menu ul {
    padding: 0 6px !important;
}

.sidebar.collapsed .sidebar-menu li a {
    justify-content: center !important;
    padding: 10px 4px !important;
    gap: 0 !important;
}

.sidebar.collapsed .sidebar-menu li a .menu-text,
.sidebar.collapsed .sidebar-menu li a .status-badge,
.sidebar.collapsed .sidebar-menu li a .notification-badge {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

.sidebar.collapsed .sidebar-menu li a .nav-icon-wrap {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
}

.sidebar.collapsed .sidebar-menu li a .nav-icon-wrap i {
    font-size: 1.05rem !important;
}

.sidebar.collapsed .sidebar-menu .menu-label {
    font-size: 0 !important;
    padding: 10px 0 4px !important;
    color: transparent !important;
    letter-spacing: 0 !important;
    height: auto !important;
    text-align: center !important;
}

.sidebar.collapsed .sidebar-menu .menu-label .menu-label-icon i {
    font-size: 1.1rem !important;
    color: #60a5fa !important;
    margin: 0 !important;
}

.sidebar.collapsed .sidebar-menu .menu-label-chevron {
    display: none !important;
}

/* Botones de acción secundarias/outline consistentes */
.btn-outline, .btn-secondary, button.btn-outline, button.btn-secondary {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
}
.btn-outline:hover, .btn-secondary:hover, button.btn-outline:hover, button.btn-secondary:hover {
    background: #f8fafc !important;
    color: #1F6BA7 !important;
    border-color: #1F6BA7 !important;
}

/* Controles de Formulario */
.form-control, .input, .select, .textarea, .fv-input, .fv-select, .fv-textarea, 
input[type="text"], input[type="number"], input[type="date"], select, textarea {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}
.form-control:focus, input[type="text"]:focus, select:focus, textarea:focus {
    border-color: #1F6BA7 !important;
    box-shadow: 0 0 0 3px rgba(31, 107, 167, 0.15) !important;
}

/* Tablas */
.table-container, .table-responsive, .fv-table-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px;
    overflow-y: auto !important;
    overflow-x: auto !important;
    max-height: 500px;
}

table, .table, .fv-table {
    background: #ffffff !important;
    color: #334155 !important;
    width: 100%;
}

th, .table th, .fv-table th {
    background: #f8fafc !important;
    color: #475569 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    font-weight: 600;
}

td, .table td, .fv-table td {
    border-bottom: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

tbody tr:hover {
    background: #f1f5f9 !important;
}

/* Header superior */
.header, #global-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* Badges y Pills */
.status-badge, .badge, .sp-estado-pill, .fv-badge {
    text-shadow: none !important;
}

/* Corrección de textos de ayuda y labels */
label, .control-label, .fv-label {
    color: #475569 !important;
    font-weight: 500 !important;
}
.text-muted, p.text-muted, small.text-muted {
    color: #64748b !important;
}

/* Botones de Dirección Médica (Ver Listado) */
.btn-medical {
    background: #1F6BA7 !important; /* Azul Meditel */
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
}
.btn-medical:hover {
    background: #2482B8 !important; /* Azul Claro */
    box-shadow: 0 4px 12px rgba(31, 107, 167, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* Correcciones para el Header Superior en Modo Claro */
#global-header .header-tool-item i,
#global-header .global-header-actions i,
.header-tool-item i {
    color: #475569 !important;
}

#global-header .header-tool-item:hover i,
.header-tool-item:hover i {
    color: #1F6BA7 !important;
}

#global-header .search-container input,
#global-header input[type="text"] {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}

#global-header .search-container input::placeholder,
#global-header input[type="text"]::placeholder {
    color: #94a3b8 !important;
}

#global-header .user-name {
    color: #1e293b !important;
}

/* =====================================================================
   OVERLAY & PANEL SIDE-DRAWER FIXES
   ===================================================================== */

/* El overlay del tool-panel (chat, correo, config) debe ser semi-transparente */
.tool-panel-overlay {
    background: rgba(15, 23, 42, 0.25) !important;
    background-color: rgba(15, 23, 42, 0.25) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* El panel lateral (chat/correo) se desliza desde la derecha */
.tool-panel {
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12) !important;
}

/* Header del panel con gradiente corporativo */
.tool-panel .tool-panel-header {
    background: linear-gradient(135deg, #1F6BA7, #2482B8) !important;
    border-radius: 0 !important;
    border: none !important;
}

.tool-panel .tool-panel-header h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.2) !important;
}

/* Botones de acción del header (minimizar/cerrar) */
.tool-panel .tool-panel-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.tool-panel .tool-panel-actions button {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.tool-panel .tool-panel-actions button i {
    color: #ffffff !important;
    font-size: 13px !important;
}

.tool-panel .tool-panel-actions button:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

.tool-panel .tool-panel-actions button:hover i {
    color: #ffffff !important;
}

/* Body del panel */
.tool-panel .tool-panel-body {
    background: #ffffff !important;
    color: #1e293b !important;
}

/* =========================================================
   ESTILOS DE ALTO CONTRASTE PARA INPUTS DE ASISTENTE IA
   Garantiza visibilidad del texto escrito (Dark Slate Text)
   ========================================================= */
#dm-ia-prompt,
#nd-ia-prompt,
#sch-ia-prompt,
.meditel-ia-input {
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

#dm-ia-prompt:focus,
#nd-ia-prompt:focus,
#sch-ia-prompt:focus,
.meditel-ia-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    background: #ffffff !important;
    color: #0f172a !important;
}

#dm-ia-prompt::placeholder,
#nd-ia-prompt::placeholder,
#sch-ia-prompt::placeholder,
.meditel-ia-input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

/* FIN premium-ui.css */