:root {
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --header-height: 70px;

    /* Indigo Glass - Glassmorphism 2.0 + Bento Box (Modo Dia) */
    --bg-primary: linear-gradient(135deg, #eef0ff 0%, #f5f0ff 100%);
    /* Lavanda fria - fondo general con degradado */
    --bg-card: rgba(255, 255, 255, 0.78);
    /* Glass blanco frio - semi-transparente para blur */
    --text-primary: #1a1240;
    /* Violeta casi negro - legibilidad maxima */
    --text-secondary: #5b3fd4;
    /* Violeta electrico - subtitulos, enlaces */
    --text-muted: #7a6aaa;
    /* Violeta gris - textos secundarios */
    --sidebar-bg: linear-gradient(160deg, #2d1b69 0%, #4c3099 50%, #6d4fc2 100%);
    /* Violeta profundo -> Indigo -> Violeta medio */
    --accent-1: #5b3fd4;
    /* Violeta electrico - Primario */
    --accent-2: #7c6be8;
    /* Violeta claro - Informacion, enlaces */
    --accent-3: #9d8df0;
    /* Lavanda - Exito, confirmaciones */
    --accent-4: #4c3099;
    /* Indigo profundo - Advertencias, destacados */
    --shadow: rgba(91, 63, 212, 0.18);
    /* Sombra violeta */
    --shadow-lg: rgba(91, 63, 212, 0.28);
    /* Sombra violeta grande */
    --border-color: rgba(91, 63, 212, 0.20);
    /* Bordes violeta */
    --table-hover: rgba(91, 63, 212, 0.10);
    /* Hover violeta suave */
    --dropdown-bg: rgba(250, 249, 255, 0.96);
    /* Dropdown glass violeta */
    --dropdown-text: #5b3fd4;
    /* Texto dropdown violeta */
    --card-glow: rgba(109, 79, 194, 0.20);
    /* Glow indigo */

    /* Gradiente Header Dashboard */
    --header-gradient-start: #4c3099;
    /* Indigo */
    --header-gradient-end: #6d4fc2;
    /* Violeta medio */

    /* Colores semanticos */
    --color-success: #4db88a;
    /* Verde menta nitido */
    --color-warning: #e8a838;
    /* Ambar nitido */
    --color-danger: #d86878;
    /* Rosa coral nitido */
    --color-info: #5aacbe;
    /* Azul - armoniza con tema */

    /* Dashboard / Graficos */
    --chart-primary: #5b3fd4;
    /* Violeta electrico - principal */
    --chart-secondary: #7c6be8;
    /* Violeta claro - gradientes */
    --chart-success: #4db88a;
    --chart-success-dark: #3a9a70;
    --chart-warning: #e8a838;
    --chart-warning-dark: #cc8e20;
    --chart-danger: #d86878;
    --chart-danger-dark: #c04858;
    --chart-info: #7c6be8;
    /* Violeta - info */
    --chart-info-dark: #5b3fd4;
    /* Violeta oscuro */
    --chart-purple: #9d8df0;
    --chart-purple-dark: #5b3fd4;
    --chart-cyan: #7c6be8;
    --chart-cyan-dark: #4c3099;
    --chart-text: #1a1240;
    /* Violeta casi negro */
    --chart-text-muted: #7a6aaa;
    /* Violeta gris */
    --chart-bg-card: rgba(255, 255, 255, 0.78);
    /* Glass blanco */
    --chart-bg-subtle: #eeeaff;
    /* Lavanda sutil */
    --chart-border: #d0c8f8;
    /* Violeta borde */
    --chart-grid: #eeeaff;
    /* Lavanda grid */
    --rank-gold: #e8a838;
    --rank-silver: #a898c8;
    --rank-bronze: #c08a50;

    /* ===== TIPOGRAFÍA - Sistema de variables independientes ===== */

    /* Familias de fuente (cambiar aquí para todo el ERP) */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;

    /* Colores de headings - violeta oscuro (jerarquia por peso/tamano) */
    --color-h1: #1a1240;
    --color-h2: #1a1240;
    --color-h3: #251a55;
    --color-h4: #251a55;
    --color-h5: #3a2870;
    --color-h6: #3a2870;

    /* Colores de texto general */
    --color-body: #251a55;
    --color-body-secondary: #5a4898;
    --color-caption: #7a6aaa;
    --color-label: #3a2870;

    /* Tamaños de headings - clamp(min, preferred, max) para escalado fluido */
    --fs-h1: clamp(2rem, 1.6rem + 1.25vw, 2.5rem);
    --fs-h2: clamp(1.75rem, 1.45rem + 0.94vw, 2rem);
    --fs-h3: clamp(1.5rem, 1.3rem + 0.63vw, 1.75rem);
    --fs-h4: clamp(1.25rem, 1.1rem + 0.47vw, 1.5rem);
    --fs-h5: clamp(1.125rem, 1.05rem + 0.23vw, 1.25rem);
    --fs-h6: clamp(1rem, 0.95rem + 0.16vw, 1.0625rem);

    /* Tamaños de texto general */
    --fs-body: clamp(0.9375rem, 0.92rem + 0.12vw, 1rem);
    --fs-small: 0.875rem;
    --fs-caption: 0.75rem;
    --fs-lg: 1.125rem;

    /* Pesos de headings */
    --fw-h1: 800;
    --fw-h2: 700;
    --fw-h3: 700;
    --fw-h4: 600;
    --fw-h5: 600;
    --fw-h6: 600;

    /* Sidebar - colores de texto y elementos */
    --sidebar-text: #f0eeff;
    --sidebar-text-secondary: #d8d0f8;
    --sidebar-text-muted: #b0a0e0;
    --sidebar-active-bg: rgba(255, 255, 255, 0.25);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.15);
    --sidebar-submenu-bg: rgba(255, 255, 255, 0.10);
    --sidebar-border: rgba(200, 180, 255, 0.22);
    --sidebar-glow: rgba(109, 79, 194, 0.55);

    /* Buscador / Command palette */
    --search-bg: #e8e5f8;
    --search-border: #c0b8e8;
    --search-text: #1a1240;
    --search-placeholder: #7a6aaa;
    --search-highlight-bg: #d0c8f8;
    --search-highlight-text: #3a1fa8;
    --search-item-hover: #eeeaff;
    --search-kbd-bg: #e8e5f8;
    --search-kbd-border: #c0b8e8;
    --search-kbd-text: #5a4898;

    /* Inputs nativos adoptan el color del tema */
    accent-color: var(--accent-2);
}

.dark-mode {
    /* ===== NEON CYBERPUNK - Cyan / Magenta / Violet ===== */
    --bg-primary: #050510;
    /* Near-black purple */
    --bg-card: rgba(10, 8, 30, 0.65);
    /* Glass indigo */
    --text-primary: #e8e6f0;
    /* Lavender-white */
    --text-secondary: #00fff5;
    /* Cyan electric */
    --text-muted: #8a7faa;
    /* Violet-grey */
    --sidebar-bg: linear-gradient(160deg, #0a0520 0%, #150a35 50%, #1a0845 100%);
    /* Deep indigo/violet */
    --accent-1: #ff00ff;
    /* Magenta - Primario */
    --accent-2: #00fff5;
    /* Cyan electric - Secundario */
    --accent-3: #b400ff;
    /* Violet - Terciario */
    --accent-4: #ff3399;
    /* Hot pink - Acento */
    --shadow: rgba(0, 0, 0, 0.6);
    --shadow-lg: rgba(0, 0, 0, 0.8);
    --border-color: rgba(0, 255, 245, 0.18);
    /* Borde cyan sutil */
    --table-hover: rgba(0, 255, 245, 0.06);
    /* Hover cyan tint */
    --dropdown-bg: rgba(5, 5, 16, 0.97);
    --dropdown-text: #00fff5;
    /* Cyan electric */
    --card-glow: rgba(0, 255, 245, 0.15);
    /* Glow cyan */

    /* Gradiente Header Dashboard - Cyberpunk */
    --header-gradient-start: #0a0520;
    /* Deep indigo */
    --header-gradient-end: #150a35;
    /* Violet dark */

    /* Colores semanticos noche - neon */
    --color-success: #00ff88;
    /* Neon green */
    --color-warning: #ffaa00;
    /* Electric amber */
    --color-danger: #ff0055;
    /* Neon red-pink */
    --color-info: #00ccff;
    /* Bright cyan */

    /* Dashboard / Graficos - Cyberpunk */
    --chart-primary: #00fff5;
    /* Cyan electric */
    --chart-secondary: #ff00ff;
    /* Magenta */
    --chart-success: #00ff88;
    --chart-success-dark: #00cc6a;
    --chart-warning: #ffaa00;
    --chart-warning-dark: #cc8800;
    --chart-danger: #ff0055;
    --chart-danger-dark: #cc0044;
    --chart-info: #00ccff;
    /* Bright cyan */
    --chart-info-dark: #0099cc;
    --chart-purple: #b400ff;
    --chart-purple-dark: #8800cc;
    --chart-cyan: #00fff5;
    --chart-cyan-dark: #00cccc;
    --chart-text: #e8e6f0;
    /* Lavender-white */
    --chart-text-muted: #8a7faa;
    /* Violet-grey */
    --chart-bg-card: rgba(10, 8, 30, 0.70);
    /* Glass indigo */
    --chart-bg-subtle: #0a0520;
    /* Deep indigo */
    --chart-border: rgba(0, 255, 245, 0.12);
    /* Bordes cyan */
    --chart-grid: rgba(0, 255, 245, 0.05);
    /* Grid cyan */
    --rank-gold: #ffaa00;
    /* Electric amber */
    --rank-silver: #8a7faa;
    --rank-bronze: #cc8800;

    /* ===== TIPOGRAFIA NEON CYBERPUNK ===== */

    /* Familias */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Headings - Cyan/Magenta/Violet neon */
    --color-h1: #00fff5;
    /* Cyan electric - titulo principal */
    --color-h2: #e8e6f0;
    /* Lavender-white - secciones */
    --color-h3: #ff00ff;
    /* Magenta - subsecciones */
    --color-h4: #e8e6f0;
    /* Lavender-white */
    --color-h5: #b400ff;
    /* Violet - titulos menores */
    --color-h6: #8a7faa;
    /* Violet-grey - labels */

    /* Colores de texto general dark mode */
    --color-body: #e8e6f0;
    --color-body-secondary: #00fff5;
    /* Cyan electric */
    --color-caption: #8a7faa;
    --color-label: #ff00ff;
    /* Magenta para labels - destaca */

    /* Inputs nativos adoptan el color del tema */
    accent-color: var(--accent-2);
}


/* ==============================================================================
   🎨 SECCIÓN 1.1: SISTEMA DE COLORES Y GRADIENTES
   Define aquí todas las clases de color que usa el sistema
   ============================================================================== */

/* GRADIENT HEADERS - Headers con gradientes Crystal Rose */
.gradient-danger {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-1));
}

.gradient-success {
    background: linear-gradient(135deg, var(--accent-3), var(--chart-success-dark));
}

.gradient-info {
    background: linear-gradient(135deg, var(--accent-2), var(--chart-info-dark));
}

.gradient-primary {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}

/* UTILIDADES DE TEXTO ACCENT (Movido al inicio para fácil acceso) */
.text-accent-1 {
    color: var(--accent-1) !important;
}

.text-accent-2 {
    color: var(--accent-2) !important;
}

.text-accent-3 {
    color: var(--accent-3) !important;
}

.text-accent-4 {
    color: var(--accent-4) !important;
}

/* ==============================================================================
   🛠️ SECCIÓN 2: BASE, TRANSICIONES Y UTILIDADES GLOBALES
   Estilos fundamentales, resets y utilidades
   ============================================================================== */

/* Deshabilitar transiciones durante la carga inicial para evitar parpadeos */
.preload * {
    transition: none !important;
}

/* Transiciones optimizadas - Solo elementos que realmente las necesitan */
body,
.sidebar,
.content-wrapper,
.card,
.modal-content,
.dropdown-menu,
.dropdown-item,
.list-group-item,
.table,
.table th,
.table td,
.alert,
.btn,
.badge,
.nav-link,
.form-control,
.form-select,
a {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Scroll suave global */
html {
    scroll-behavior: smooth;
}

/* Active/pressed state global para botones */
.btn:active:not(:disabled) {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
}

/* Disabled states - Light mode */
.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: auto;
    box-shadow: none;
}

.form-control:disabled,
.form-select:disabled,
textarea:disabled,
input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--chart-bg-subtle, #f1f5f9);
    color: var(--text-muted);
}

/* ESTILOS GLOBALES DEL SISTEMA (Portados desde Dashboard) */
.chart-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 5px 15px var(--shadow);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
    /* Agregado borde sutil */
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
    /* Usar variable */
}

.chart-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    /* Usar variable */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

/* SOBRESCRIBIR FONDOS BLANCOS DE BOOTSTRAP EN MODO OSCURO (Global) */
.dark-mode .card,
.dark-mode .chart-card {
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.dark-mode .table {
    color: var(--text-primary);
    background-color: transparent !important;
    --bs-table-bg: transparent !important;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .table thead th {
    color: var(--text-primary);
    background-color: var(--bg-card) !important;
    border-bottom-color: var(--border-color);
}

.dark-mode .table tbody tr,
.dark-mode .table tbody td {
    background-color: transparent !important;
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

.dark-mode .table-hover tbody tr:hover td {
    color: var(--bg-card);
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 🎨 TIPOGRAFÍA MODO NOCHE - Neon Cyberpunk Glow */
.dark-mode h1,
.dark-mode .h1 {
    color: var(--color-h1) !important;
    text-shadow: 0 0 7px #00fff5, 0 0 20px rgba(0, 255, 245, 0.5), 0 0 40px rgba(0, 255, 245, 0.25);
}

.dark-mode h2,
.dark-mode .h2 {
    color: var(--color-h2) !important;
}

.dark-mode h3,
.dark-mode .h3 {
    color: var(--color-h3) !important;
    text-shadow: 0 0 7px #ff00ff, 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(255, 0, 255, 0.25);
}

.dark-mode h4,
.dark-mode .h4 {
    color: var(--color-h4) !important;
}

.dark-mode h5,
.dark-mode .h5 {
    color: var(--color-h5) !important;
    text-shadow: 0 0 7px #b400ff, 0 0 20px rgba(180, 0, 255, 0.5), 0 0 40px rgba(180, 0, 255, 0.25);
}

.dark-mode h6,
.dark-mode .h6 {
    color: var(--color-h6) !important;
}

.dark-mode p {
    color: var(--color-body-secondary) !important;
}

.dark-mode small,
.dark-mode .text-sm,
.dark-mode .text-xs {
    color: var(--color-caption) !important;
}

.dark-mode label:not(.form-check-label) {
    color: var(--color-label) !important;
}


/* Elementos específicos con transiciones más rápidas para el cambio de tema */
.card,
.modern-card,
.table,
.alert,
.badge,
.btn,
.sidebar,
.top-navbar,
.dropdown-menu {
    transition: background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease !important;
}

/* Tarjetas de estadísticas con transición instantánea de fondo */
.stat-card-purple,
.stat-card-pink,
.stat-card-blue,
.stat-card-green {
    transition: background 0.1s ease !important;
}

/* ==============================================================================
   📱 SECCIÓN 3: ESTRUCTURA DEL LAYOUT (APP SHELL)
   Sidebar, Navbar, Main Content wrapper
   ============================================================================== */

/* 📱 APP SHELL LAYOUT UTILITIES 
   Para módulos que requieren 100% de altura (Mensajería, Archivos, Chat)
*/
.app-full-height {
    height: calc(100vh - var(--header-height) - 1.5rem);
    height: calc(100dvh - var(--header-height) - 1.5rem);
    display: flex;
    gap: 1.5rem;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.glass-panel {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 4px 20px var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Scrollbar Personalizado Fino para paneles internos */
.custom-scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 10px;
    opacity: 0.3;
}

.custom-scroll:hover::-webkit-scrollbar-thumb {
    opacity: 0.6;
    background: var(--accent-1);
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--color-body);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.6;
    letter-spacing: -0.01em;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dark-mode body {
    letter-spacing: -0.007em;
}

/* Sidebar Moderna */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
    border-right: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
}

.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
}

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

.sidebar::-webkit-scrollbar-track {
    background: var(--sidebar-border);
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--sidebar-text-muted);
    border-radius: 10px;
}

.sidebar-header {
    padding: 1.5rem 1rem;
    border-bottom: none !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    overflow: visible;
    position: relative;
    padding: 8px;
    border-radius: 12px;
    box-sizing: border-box;
}


/* Animación de rotación del gradiente cónico */
@keyframes neon-rotate {
    0% {
        --angle: 0deg;
    }

    100% {
        --angle: 360deg;
    }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.dark-mode .logo-container {
    background: rgba(0, 0, 0, 0.2);
}

/* 💡 CLASE REUTILIZABLE: Borde LED Neón (Solo Modo Día) */
/* USO: Agregar class="led-border" a cualquier elemento (cards, botones, divs, etc.) */
.led-border {
    position: relative;
    box-sizing: border-box;
}

.led-border::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    /* Hereda el border-radius del elemento padre */
    padding: 3px;
    background: conic-gradient(from var(--angle),
            var(--accent-1) 0deg,
            /* Rosa vibrante */
            var(--bg-primary) 90deg,
            /* Rosa cristalino */
            var(--accent-2) 180deg,
            /* Azul cielo */
            var(--accent-1) 270deg,
            /* Rosa claro */
            var(--accent-1) 360deg
            /* Rosa vibrante (cierra el ciclo) */
        );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: neon-rotate 3s linear infinite;
    filter: drop-shadow(0 0 10px var(--sidebar-glow));
    pointer-events: none;
    z-index: -1;
}

/* Desactivar LED border en modo oscuro */
.dark-mode .led-border::before {
    display: none;
}

.logo-icon {
    min-width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--accent-2), var(--accent-1));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.logo-icon img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    border-radius: 12px;
    display: block;
}

.logo-text {
    opacity: 1;
    transition: opacity 0.3s ease 0.15s, width 0.3s ease 0.15s;
    /* Transición suave con delay */
}

.sidebar-collapsed .logo-text {
    opacity: 0;
    width: 0;
    transition: opacity 0.25s ease, width 0.25s ease;
    /* Sin delay al colapsar */
}

/* Botón Auto/Manual flotante */
.sidebar-auto-expand-toggle {
    position: fixed;
    top: calc(50% - 40px);
    transform: translateY(-50%);
    background: var(--sidebar-bg);
    border: 2px solid var(--sidebar-border);
    border-left: none;
    color: var(--sidebar-text);
    padding: 8px 12px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1001;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08);
}

.sidebar-auto-expand-toggle:hover {
    background: var(--sidebar-bg);
    filter: brightness(0.95);
    border-color: var(--sidebar-text-muted);
    transform: translateY(-50%) translateX(5px);
}

.sidebar-auto-expand-toggle .toggle-label {
    opacity: 1;
    transition: opacity 0.3s ease 0.15s;
}

.sidebar-auto-expand-toggle.collapsed {
    left: var(--sidebar-collapsed-width);
}

.sidebar-auto-expand-toggle:not(.collapsed) {
    left: var(--sidebar-width);
}

.sidebar-collapsed .sidebar-auto-expand-toggle .toggle-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.25s ease;
}

/* Botón manual para expandir/colapsar sidebar */
.sidebar-manual-toggle {
    position: fixed;
    top: calc(50% + 10px);
    transform: translateY(-50%);
    background: var(--sidebar-bg);
    border: 2px solid var(--sidebar-border);
    border-left: none;
    color: var(--sidebar-text);
    width: 30px;
    height: 50px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08);
}

.sidebar-manual-toggle:hover {
    background: var(--sidebar-bg);
    filter: brightness(0.95);
    width: 35px;
    border-color: var(--sidebar-text-muted);
}

.sidebar-manual-toggle i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.sidebar-manual-toggle.collapsed i {
    transform: rotate(0deg);
}

.sidebar-collapsed .sidebar-manual-toggle:not(.collapsed) i {
    transform: rotate(180deg);
}

.sidebar-manual-toggle.collapsed {
    left: var(--sidebar-collapsed-width);
}

.sidebar-manual-toggle:not(.collapsed) {
    left: var(--sidebar-width);
}

/* Perfil de Usuario */
.user-profile {
    padding: 2rem 1rem;
    background: transparent !important;
    border-bottom: none !important;
    text-align: center;
}

.user-avatar {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 4px solid var(--accent-4);
    object-fit: cover;
    box-shadow: 0 0 25px var(--sidebar-glow);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
    /* Transición suave */
}

.sidebar-collapsed .user-avatar {
    width: 90px;
    height: 90px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, height 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    /* Delay al colapsar */
}

.user-info {
    opacity: 1;
    transition: opacity 0.3s ease 0.15s, width 0.3s ease 0.15s;
    /* Transición suave con delay */
}

.sidebar-collapsed .user-info {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, width 0.25s ease;
    /* Sin delay al colapsar */
}

.user-info h6 {
    margin: 0;
    margin-top: 1rem;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--sidebar-text) !important;
    text-shadow: none;
}

.user-info small {
    opacity: 1;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--sidebar-text-secondary) !important;
    display: block;
    margin-top: 0.3rem;
    text-shadow: none;
}

.logo-text-gold {
    color: var(--sidebar-text) !important;
    text-shadow: none;
}

/* Subtítulo del sidebar (ej: "Sistema ERP") */
.sidebar-subtitle {
    opacity: 1;
    color: var(--sidebar-text-secondary) !important;
}

/* Email del usuario en sidebar */
.user-email {
    color: var(--sidebar-text-muted) !important;
}

/* Icono del toggle de tema */
.theme-icon-sun {
    font-size: 14px;
    color: #ffa400;
}

.user-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.015em;
    background: var(--accent-3);
    color: #000;
}

.sidebar-collapsed .user-profile {
    padding: 1rem 0.5rem;
}

.sidebar-collapsed .user-badge {
    display: none;
}

/* Navegación */
.sidebar-nav {
    padding: 1rem 0;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    padding: 0.85rem 1.5rem;
    color: var(--sidebar-text) !important;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

.sidebar-collapsed .sidebar-nav a {
    padding: 0.85rem 0;
    justify-content: center;
}


.sidebar-nav a:hover {
    color: var(--text-primary) !important;
    background: var(--sidebar-hover-bg);
}

.sidebar-nav a.active {
    background: var(--sidebar-active-bg);
    color: var(--text-primary) !important;
    border-left: 4px solid var(--text-secondary);
    font-weight: 600;
}

.sidebar-nav a i {
    margin-right: 0.85rem;
    font-size: 1.2rem;
    min-width: 24px;
    text-align: center;
}

.sidebar-collapsed .sidebar-nav a i {
    margin-right: 0;
}

.sidebar-nav a span {
    opacity: 1;
    transition: opacity 0.3s ease 0.15s, width 0.3s ease 0.15s;
    /* Transición suave con delay */
}

.sidebar-collapsed .sidebar-nav a span {
    opacity: 0;
    width: 0;
    transition: opacity 0.25s ease, width 0.25s ease;
    /* Sin delay al colapsar */
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    min-height: 100dvh;
}

.sidebar-collapsed .main-content {
    margin-left: var(--sidebar-collapsed-width);
}

.top-navbar {
    background: var(--sidebar-bg);
    color: white;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: none;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 999;
    gap: 1rem;
}

.dark-mode .top-navbar {
    border-bottom: 1px solid rgba(45, 212, 191, 0.25);
    box-shadow: 0 1px 8px rgba(45, 212, 191, 0.08);
}

/* ==========================================
   🔍 BUSCADOR GLOBAL - Header Search
   ========================================== */
.header-search-container {
    position: relative;
    flex: 1;
    max-width: 400px;
    /* Absorbe el espacio sobrante: agrupa los items de la izquierda y empuja
       los controles de la derecha al borde, evitando que space-between deje
       huecos enormes alrededor del icono Menú / selector. */
    margin-right: auto;
}

.header-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.header-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.header-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.header-search-input::placeholder {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.header-search-input:focus {
    outline: none;
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.dark-mode .header-search-input:focus {
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
}

.header-search-shortcut {
    position: absolute;
    right: 10px;
    padding: 2px 6px;
    font-size: 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: inherit;
}

/* Resultados de búsqueda */
.header-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px var(--shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

.header-search-results.show {
    display: block;
}

.dark-mode .header-search-results {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px var(--card-glow);
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-color);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--table-hover);
}

.search-result-item i {
    font-size: 1.25rem;
    margin-right: 0.75rem;
    color: var(--accent-2);
    width: 30px;
    text-align: center;
}

.search-result-info {
    flex: 1;
}

.search-result-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.search-result-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.search-result-category {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--accent-2);
    color: white;
}

.search-no-results {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

/* ==============================================================================
   COMMAND PALETTE (Ctrl+K) - Tendencia 2025-2026
   ============================================================================== */

.cmd-palette-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cmd-palette-overlay.active {
    opacity: 1;
    visibility: visible;
}

.dark-mode .cmd-palette-overlay {
    background: rgba(0, 0, 0, 0.9);
}

.cmd-palette {
    width: 100%;
    max-width: 580px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(99, 102, 241, 0.25);
    transform: translateY(-12px) scale(0.97);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.cmd-palette-overlay.active .cmd-palette {
    transform: translateY(0) scale(1);
}

.dark-mode .cmd-palette {
    background: #0e0e1a;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 30px var(--card-glow), 0 0 0 1px var(--border-color);
}

.cmd-palette-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--search-border);
    gap: 0.75rem;
}

.cmd-palette-search-icon {
    font-size: 1.1rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.cmd-palette-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    outline: none;
    caret-color: var(--text-secondary);
}

.cmd-palette-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.cmd-palette-esc {
    padding: 2px 8px;
    font-size: 0.7rem;
    background: var(--search-bg);
    border: 1px solid var(--search-kbd-border);
    border-radius: 4px;
    color: var(--color-body-secondary);
    font-family: inherit;
    font-weight: 600;
    flex-shrink: 0;
}

.cmd-palette-body {
    max-height: 360px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.cmd-palette-body::-webkit-scrollbar {
    width: 6px;
}

.cmd-palette-body::-webkit-scrollbar-track {
    background: transparent;
}

.cmd-palette-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.cmd-palette-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.cmd-palette-group-label {
    padding: 0.5rem 1.25rem 0.25rem;
    font-size: 0.675rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.cmd-palette-item {
    display: flex;
    align-items: center;
    padding: 0.55rem 1.25rem;
    gap: 0.75rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-body);
    transition: background 0.1s ease;
    border: none;
    background: none;
    width: 100%;
    font-family: inherit;
}

.cmd-palette-item:hover,
.cmd-palette-item.active {
    background: var(--chart-bg-subtle);
    color: var(--color-body);
    text-decoration: none;
}

.cmd-palette-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--search-highlight-bg);
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: background 0.1s ease, color 0.1s ease;
}

.cmd-palette-item.active .cmd-palette-item-icon,
.cmd-palette-item:hover .cmd-palette-item-icon {
    background: var(--accent-1);
    color: #ffffff;
}

.cmd-palette-item-info {
    flex: 1;
    min-width: 0;
}

.cmd-palette-item-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-palette-item-desc {
    font-size: 0.725rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-palette-item-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--search-highlight-bg);
    color: var(--search-highlight-text);
    flex-shrink: 0;
    font-weight: 600;
}

.cmd-palette-item mark {
    background: var(--search-highlight-bg);
    color: var(--search-highlight-text);
    font-weight: 700;
    padding: 0 2px;
    border-radius: 2px;
}

.cmd-palette-reciente-clear {
    float: right;
    font-size: 0.65rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.cmd-palette-reciente-clear:hover {
    opacity: 1;
    color: var(--accent-2);
}

.cmd-palette-no-results {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--text-muted);
}

.cmd-palette-no-results i {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.cmd-palette-no-results p {
    margin: 0;
    font-size: 0.875rem;
}

.cmd-palette-no-results small {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.cmd-palette-footer {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.6rem 1.25rem;
    border-top: 1px solid var(--search-border);
    font-size: 0.7rem;
    color: var(--color-body-secondary);
}

.cmd-palette-footer kbd {
    padding: 1px 5px;
    background: var(--search-bg);
    border: 1px solid var(--search-kbd-border);
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-label);
    margin-right: 0.2rem;
}

@media (max-width: 576px) {
    .cmd-palette-overlay {
        padding-top: 5vh;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .cmd-palette {
        border-radius: 12px;
    }

    .cmd-palette-footer {
        display: none;
    }
}

/* Dark mode overrides para command palette (restaurar variables del tema) */
.dark-mode .cmd-palette-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.dark-mode .cmd-palette-header {
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .cmd-palette-search-icon {
    color: var(--accent-2);
}

.dark-mode .cmd-palette-input {
    color: var(--text-primary);
    caret-color: var(--accent-2);
}

.dark-mode .cmd-palette-input::placeholder {
    color: var(--text-muted);
}

.dark-mode .cmd-palette-esc {
    background: var(--skeleton-base);
    border-color: var(--border-color);
    color: var(--text-muted);
}

.dark-mode .cmd-palette-group-label {
    color: var(--text-muted);
}

.dark-mode .cmd-palette-item {
    color: var(--text-primary);
}

.dark-mode .cmd-palette-item:hover,
.dark-mode .cmd-palette-item.active {
    background: var(--table-hover);
    color: var(--text-primary);
}

.dark-mode .cmd-palette-item-icon {
    background: var(--skeleton-base);
    color: var(--accent-2);
}

.dark-mode .cmd-palette-item.active .cmd-palette-item-icon,
.dark-mode .cmd-palette-item:hover .cmd-palette-item-icon {
    background: var(--accent-2);
    color: white;
}

.dark-mode .cmd-palette-item-title {
    color: var(--text-primary);
}

.dark-mode .cmd-palette-item-desc {
    color: var(--text-muted);
}

.dark-mode .cmd-palette-item-badge {
    background: var(--skeleton-base);
    color: var(--text-muted);
}

.dark-mode .cmd-palette-item mark {
    background: transparent;
    color: var(--accent-2);
}

.dark-mode .cmd-palette-footer {
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
}

.dark-mode .cmd-palette-footer kbd {
    background: var(--skeleton-base);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* ==============================================================================
   SCROLL-DRIVEN ANIMATIONS - Tendencia 2025-2026
   ============================================================================== */

/* Scroll Progress Bar - Barra de progreso al hacer scroll */
@supports (animation-timeline: scroll()) {
    @keyframes scroll-progress-fill {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }

    .scroll-progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
        transform-origin: left;
        transform: scaleX(0);
        animation: scroll-progress-fill linear;
        animation-timeline: scroll();
        z-index: 10001;
        pointer-events: none;
    }
}

/* Scroll Reveal - Elementos aparecen al entrar en viewport */
@supports (animation-timeline: view()) {
    @keyframes scroll-reveal-up {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Clase reutilizable para cualquier vista */
    .scroll-reveal {
        animation: scroll-reveal-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 25%;
    }

    /* Auto-reveal para cards del dashboard y módulos */
    .kpi-card-premium,
    .metric-card-compact,
    .chart-card,
    .insight-card-modern {
        animation: scroll-reveal-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 20%;
    }
}

/* Respetar preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .kpi-card-premium,
    .metric-card-compact,
    .chart-card,
    .insight-card-modern {
        animation: none !important;
    }

    .scroll-progress-bar {
        display: none !important;
    }
}

/* ==========================================
   🔄 VIEW TRANSITIONS API - Transiciones entre páginas
   Aplica a TODO el sistema (cross-document MPA)
   ========================================== */

/* Activar View Transitions automáticas en navegación entre páginas */
@view-transition {
    navigation: auto;
}

/* Animación de salida (página que se va) */
::view-transition-old(root) {
    animation: vt-fade-out 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animación de entrada (página que llega) */
::view-transition-new(root) {
    animation: vt-fade-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes vt-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}

@keyframes vt-fade-in {
    from {
        opacity: 0;
        transform: scale(1.02);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* view-transition-name removido de .sidebar, .top-navbar y .content-wrapper.
   Esta propiedad CSS crea un containing block para position:fixed, lo que
   atrapa los modales Bootstrap dentro del contenedor en vez del viewport.
   Sin startViewTransition activo en navegación, solo causaba bugs. */

/* Desactivar View Transitions si el usuario prefiere reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

/* ==========================================
   📊 INFO CENTRO - Fecha y Timer
   ========================================== */
.header-info-center {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    /* Fondo blanco semitransparente para mejor integración */
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.dark-mode .header-info-center {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.header-datetime,
.header-session-timer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: white;
    white-space: nowrap;
}

.header-datetime i,
.header-session-timer i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.header-separator {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
}

/* ==========================================
   🏷️ MI ESTADO BADGE - Header
   ========================================== */
.mi-estado-badge-wrapper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.mi-estado-dot {
    font-size: 0.45rem;
    vertical-align: middle;
}

.mi-estado-texto {
    letter-spacing: 0.02em;
}

/* Colores por estado */
.mi-estado--success {
    background: rgba(25, 135, 84, 0.2);
    color: #4ade80;
    border-color: rgba(25, 135, 84, 0.4);
}
.mi-estado--success .mi-estado-dot { color: #4ade80; }

.mi-estado--info {
    background: rgba(13, 202, 240, 0.2);
    color: #67e8f9;
    border-color: rgba(13, 202, 240, 0.4);
}
.mi-estado--info .mi-estado-dot { color: #67e8f9; }

.mi-estado--warning {
    background: rgba(255, 193, 7, 0.25);
    color: #fbbf24;
    border-color: rgba(255, 193, 7, 0.5);
}
.mi-estado--warning .mi-estado-dot { color: #fbbf24; }

.mi-estado--danger {
    background: rgba(220, 53, 69, 0.25);
    color: #ff6b6b;
    border-color: rgba(220, 53, 69, 0.5);
}
.mi-estado--danger .mi-estado-dot { color: #ff6b6b; }

.mi-estado--secondary {
    background: rgba(108, 117, 125, 0.2);
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(108, 117, 125, 0.3);
}
.mi-estado--secondary .mi-estado-dot { color: rgba(255, 255, 255, 0.5); }

/* Alerta: parpadeo para llamar atencion */
.mi-estado--alerta {
    animation: miEstadoPulse 1.5s ease-in-out infinite;
}

@keyframes miEstadoPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.03); }
}

/* Dark mode ajustes */
.dark-mode .mi-estado--success {
    background: rgba(25, 135, 84, 0.15);
}
.dark-mode .mi-estado--info {
    background: rgba(13, 202, 240, 0.15);
}
.dark-mode .mi-estado--warning {
    background: rgba(255, 193, 7, 0.15);
}
.dark-mode .mi-estado--danger {
    background: rgba(220, 53, 69, 0.15);
}

/* Responsive: ocultar texto en pantallas pequeñas, solo mostrar dot */
@media (max-width: 575.98px) {
    .mi-estado-badge-wrapper {
        padding: 0.25rem 0.5rem;
        gap: 0.25rem;
    }
    .mi-estado-texto {
        display: none;
    }
    .mi-estado-dot {
        font-size: 0.6rem;
    }
}

/* ==========================================
   🎛️ CONTROLES DERECHA
   ========================================== */
.header-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ==========================================
   🍞 BREADCRUMB MODERNO
   ========================================== */
.header-breadcrumb {
    background: var(--bg-card);
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb-modern {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb-item-modern {
    display: flex;
    align-items: center;
}

.breadcrumb-item-modern a {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.breadcrumb-item-modern a:hover {
    background: var(--table-hover);
    color: var(--accent-2);
}

.breadcrumb-item-modern a i {
    font-size: 0.85rem;
}

.breadcrumb-item-modern:last-child a {
    color: var(--accent-2);
    font-weight: 600;
}

.breadcrumb-separator {
    color: var(--text-muted);
    font-size: 0.6rem;
    margin: 0 0.15rem;
}

.dark-mode .breadcrumb-item-modern a:hover {
    background: rgba(34, 211, 238, 0.1);
}

.dark-mode .breadcrumb-item-modern:last-child a {
    color: var(--text-secondary);
    text-shadow: 0 0 10px var(--card-glow);
}

.content-wrapper {
    padding: 1.5rem;
}

/* ==============================================================================
   🧩 SECCIÓN 4: COMPONENTES UI
   Cards, Botones, Tablas, Alerts, Badges
   ============================================================================== */

/* Cards Modernas - Glassmorphism */
.card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    box-shadow:
        0 1px 3px var(--shadow),
        0 10px 15px var(--shadow),
        0 20px 25px var(--shadow);
    margin-bottom: 1.5rem;
    border-radius: 16px;
    overflow: clip;
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 6px var(--shadow),
        0 15px 20px var(--shadow-lg),
        0 25px 35px var(--shadow-lg),
        0 0 40px var(--card-glow);
}

.dark-mode .card {
    box-shadow:
        0 1px 3px var(--shadow),
        0 8px 16px var(--shadow),
        0 0 15px rgba(0, 255, 245, 0.08),
        0 0 30px rgba(0, 255, 245, 0.04);
}

.dark-mode .card:hover {
    box-shadow:
        0 4px 6px var(--shadow-lg),
        0 15px 25px var(--shadow-lg),
        0 0 30px rgba(0, 255, 245, 0.15),
        0 0 60px rgba(255, 0, 255, 0.08);
}

.card-header {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.card-footer {
    background: var(--bg-card) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Botones Modernos con Gradiente */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
    border: none;
    color: white !important;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    padding: 0.6rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px var(--shadow-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
    box-shadow: 0 8px 25px var(--shadow-lg);
    transform: translateY(-2px);
}

.dark-mode .btn-primary {
    background: linear-gradient(135deg, #ff00ff, #b400ff) !important;
    box-shadow: 0 4px 15px rgba(255, 0, 255, 0.4), 0 0 20px rgba(180, 0, 255, 0.3);
}

.dark-mode .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(255, 0, 255, 0.6), 0 0 40px rgba(180, 0, 255, 0.4);
    transform: translateY(-2px);
}

.btn-success {
    background: var(--accent-3);
    border: none;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: white !important;
}

.dark-mode .btn-success {
    background: #00ff88 !important;
    color: #050510 !important;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

.dark-mode .btn-success:hover {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.6);
    transform: translateY(-2px);
}

.btn-danger {
    background: var(--accent-1);
    border: none;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: white !important;
}

.dark-mode .btn-danger {
    background: #ff0055 !important;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.4);
}

.dark-mode .btn-danger:hover {
    box-shadow: 0 0 30px rgba(255, 0, 85, 0.6);
    transform: translateY(-2px);
}

.btn-warning {
    background: var(--accent-4);
    border: none;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: white !important;
}

.dark-mode .btn-warning {
    background: #ffaa00 !important;
    color: #050510 !important;
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.4);
}

.dark-mode .btn-warning:hover {
    box-shadow: 0 0 30px rgba(255, 170, 0, 0.6);
    transform: translateY(-2px);
}

.btn-info {
    background: var(--accent-2);
    border: none;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: white !important;
}

.dark-mode .btn-info {
    background: #00ccff !important;
    color: #050510 !important;
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.4);
}

.dark-mode .btn-info:hover {
    box-shadow: 0 0 30px rgba(0, 204, 255, 0.6);
    transform: translateY(-2px);
}

/* Toggle Modo Oscuro */
.theme-toggle {
    width: 60px;
    height: 30px;
    background: var(--border-color);
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}

.theme-toggle:hover {
    background: var(--accent-2);
}

.theme-toggle-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-mode .theme-toggle-slider {
    transform: translateX(30px);
    background: linear-gradient(135deg, #00fff5, #ff00ff);
}

/* Badges Modernos con Glow */
.badge {
    padding: 0.4rem 0.8rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.015em;
    border-radius: 8px;
}

.badge.bg-primary {
    background-color: var(--accent-2) !important;
}

.badge.bg-success {
    background-color: var(--accent-3) !important;
}

.badge.bg-danger {
    background-color: var(--accent-1) !important;
}

.badge.bg-warning {
    background-color: var(--accent-4) !important;
}

.badge.bg-info {
    background-color: var(--accent-2) !important;
}

.dark-mode .badge {
    box-shadow: 0 0 10px rgba(0, 255, 245, 0.3);
}

.dark-mode .badge.bg-success {
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
}

.dark-mode .badge.bg-danger {
    box-shadow: 0 0 12px rgba(255, 0, 85, 0.5);
}

.dark-mode .badge.bg-warning {
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.5);
}

.dark-mode .badge.bg-info {
    box-shadow: 0 0 12px rgba(0, 204, 255, 0.5);
}

.dark-mode .badge.bg-primary {
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.5);
}

/* Alerts Modernas con Glassmorphism */
.alert {
    border: none;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    border-left: 4px solid;
    color: var(--text-primary) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    font-weight: 500;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-left-color: var(--accent-3);
}

.dark-mode .alert-success {
    background: rgba(0, 255, 136, 0.1);
    border-left-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.15);
}

.alert-danger {
    background: rgba(244, 63, 94, 0.1);
    border-left-color: var(--accent-1);
}

.dark-mode .alert-danger {
    background: rgba(255, 0, 85, 0.1);
    border-left-color: #ff0055;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.15);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-left-color: var(--accent-4);
}

.dark-mode .alert-warning {
    background: rgba(255, 170, 0, 0.1);
    border-left-color: #ffaa00;
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.15);
}

.alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-left-color: var(--accent-2);
}

.dark-mode .alert-info {
    background: rgba(0, 204, 255, 0.1);
    border-left-color: #00ccff;
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.15);
}

/* Tables Modernas */
.table {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.table thead {
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--border-color) !important;
}

.table thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    padding: 1rem 0.75rem;
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bg-card, #fff) !important;
}

.table tbody {
    color: var(--text-primary) !important;
}

.table tbody td {
    padding: 1rem 0.75rem;
    vertical-align: middle;
}

.table-light {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.table-hover tbody tr {
    transition: all 0.2s ease;
}

.table-hover tbody tr:hover {
    background-color: var(--table-hover) !important;
    color: var(--text-primary) !important;
    transform: scale(1.005);
}

.dark-mode .table-hover tbody tr:hover {
    box-shadow: 0 0 15px var(--card-glow);
}

/* ==========================================
   📝 SISTEMA DE TIPOGRAFÍA MEJORADO
   Jerarquía clara y optimizada con Inter
   ========================================== */

/* Jerarquía de Headings */
h1 {
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: var(--fw-h1);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-h1) !important;
    margin-bottom: 1rem;
}

h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-h2);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--color-h2) !important;
    margin-bottom: 0.875rem;
}

h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: var(--fw-h3);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-h3) !important;
    margin-bottom: 0.75rem;
}

h4 {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: var(--fw-h4);
    line-height: 1.35;
    letter-spacing: -0.008em;
    color: var(--color-h4) !important;
    margin-bottom: 0.625rem;
}

h5 {
    font-family: var(--font-heading);
    font-size: var(--fs-h5);
    font-weight: var(--fw-h5);
    line-height: 1.4;
    letter-spacing: -0.005em;
    color: var(--color-h5) !important;
    margin-bottom: 0.5rem;
}

h6 {
    font-family: var(--font-heading);
    font-size: var(--fs-h6);
    font-weight: var(--fw-h6);
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--color-h6) !important;
    margin-bottom: 0.5rem;
}

/* Ajustes para Dark Mode */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3 {
    letter-spacing: -0.015em;
}

/* Párrafos y texto base */
p {
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--color-body-secondary);
}

span,
div,
td,
th,
li,
label {
    color: inherit;
}

small {
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--color-caption);
}

/* Text Colors */
.text-muted {
    color: var(--text-muted) !important;
}

/* Clases de font-family utilitarias */
.font-heading {
    font-family: var(--font-heading) !important;
}

.font-body {
    font-family: var(--font-body) !important;
}

.font-mono {
    font-family: var(--font-mono) !important;
}

/* ==========================================
   🎯 CLASES UTILITARIAS DE TIPOGRAFÍA
   Sistema completo de tamaños y pesos
   ========================================== */

/* Tamaños de texto */
.text-xs {
    font-size: var(--fs-caption) !important;
    line-height: 1.5;
}

.text-sm {
    font-size: var(--fs-small) !important;
    line-height: 1.5;
}

.text-base {
    font-size: var(--fs-body) !important;
    line-height: 1.6;
}

.text-lg {
    font-size: var(--fs-lg) !important;
    line-height: 1.5;
}

.text-xl {
    font-size: 1.25rem !important;
    line-height: 1.4;
}

.text-2xl {
    font-size: 1.5rem !important;
    line-height: 1.35;
}

.text-3xl {
    font-size: 1.875rem !important;
    line-height: 1.3;
}

.text-4xl {
    font-size: 2.25rem !important;
    line-height: 1.25;
}

/* Pesos de fuente */
.font-light {
    font-weight: 300 !important;
}

.font-normal {
    font-weight: 400 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-extrabold {
    font-weight: 800 !important;
}

/* Letter-spacing (tracking) */
.tracking-tighter {
    letter-spacing: -0.05em !important;
}

.tracking-tight {
    letter-spacing: -0.025em !important;
}

.tracking-normal {
    letter-spacing: 0 !important;
}

.tracking-wide {
    letter-spacing: 0.025em !important;
}

.tracking-wider {
    letter-spacing: 0.05em !important;
}

.tracking-widest {
    letter-spacing: 0.1em !important;
}

/* Line-height */
.leading-none {
    line-height: 1 !important;
}

.leading-tight {
    line-height: 1.25 !important;
}

.leading-snug {
    line-height: 1.375 !important;
}

.leading-normal {
    line-height: 1.5 !important;
}

.leading-relaxed {
    line-height: 1.625 !important;
}

.leading-loose {
    line-height: 2 !important;
}

/* Números tabulares (para tablas) */
.tabular-nums {
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
}

/* Dropdown con Glassmorphism */
.dropdown-menu {
    background: var(--dropdown-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px var(--shadow);
    border-radius: 12px;
    padding: 0.5rem;
}

.dark-mode .dropdown-menu {
    box-shadow: 0 4px 15px var(--shadow-lg), 0 0 20px var(--card-glow);
}

.dropdown-item {
    color: var(--dropdown-text) !important;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: var(--bg-primary);
    color: var(--text-primary) !important;
    transform: translateX(4px);
}

.dropdown-divider {
    border-color: var(--border-color);
    margin: 0.5rem 0;
}

/* Submenú del sidebar */
.sidebar-submenu-container {
    position: relative;
}

.sidebar-submenu-toggle {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.85rem 1.5rem;
    color: var(--sidebar-text);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}

.sidebar-collapsed .sidebar-submenu-toggle {
    padding: 0.85rem 0;
    justify-content: center;
}

.submenu-arrow {
    margin-left: auto;
    font-size: 0.75rem;
    line-height: 1;
    transition: transform 0.3s;
}

.sidebar-collapsed .submenu-arrow {
    display: none;
}

.sidebar-submenu-toggle.expanded .submenu-arrow {
    transform: rotate(180deg);
}

.sidebar-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--sidebar-submenu-bg);
}

.sidebar-submenu.show {
    max-height: 500px;
}

.sidebar-submenu a {
    padding: 0.7rem 1.5rem 0.7rem 3rem !important;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

.sidebar-collapsed .sidebar-submenu {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {

    /* Tipografía responsive: clamp() en :root ya maneja el escalado fluido */

    /* Sidebar responsive */
    .sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width) !important;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0 !important;
    }

    .sidebar-collapsed .sidebar {
        transform: translateX(-100%);
    }

    .sidebar-collapsed .sidebar.show {
        transform: translateX(0);
    }

    /* Ocultar botones toggle sidebar en mobile (ya hay hamburger) */
    .sidebar-auto-expand-toggle,
    .sidebar-manual-toggle {
        display: none !important;
    }

    /* Touch targets mínimos 44px en mobile (WCAG 2.5.8) */
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }

    /* Badges legibles en mobile */
    .badge {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.6rem !important;
    }

    /* FAB adaptado a mobile */
    .btn-fab-estado {
        width: 48px;
        height: 48px;
        bottom: 16px;
        right: 16px;
    }

}

/* ============================================
   CLASES MODERNAS CUSTOM - Sistema Global
   Estas clases proporcionan componentes mejorados
   con glassmorphism y efectos modernos
   ============================================ */

/* Animaciones suaves */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* MODERN CARD - Card mejorada con glassmorphism */
.modern-card {
    border: none;
    border-radius: 16px;
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px var(--shadow), 0 10px 15px var(--shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    /* Cambio: permitir que el borde LED sea visible */
    position: relative;
    z-index: 1;
}

/* Asegurar que el contenido del card esté por encima del borde LED */
.modern-card>* {
    position: relative;
    z-index: 2;
}

.modern-card:hover {
    box-shadow: 0 4px 16px var(--shadow-lg), 0 15px 25px var(--shadow-lg);
    transform: translateY(-4px);
}

.dark-mode .modern-card {
    box-shadow: 0 2px 8px var(--shadow), 0 0 15px rgba(0, 255, 245, 0.08), 0 0 30px rgba(0, 255, 245, 0.04);
}

.dark-mode .modern-card:hover {
    box-shadow: 0 4px 16px var(--shadow-lg), 0 0 30px rgba(0, 255, 245, 0.12), 0 0 60px rgba(255, 0, 255, 0.06);
}

/* 💡 EFECTOS LED PARA MODERN-CARDS - Bordes animados según color del card */

/* Preparar cards para efecto LED */
.modern-card {
    position: relative;
}

/* LED AZUL VIBRANTE - Card CLIENTES (border-primary) - MODO DÍA */
.modern-card.border-primary::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    padding: 3px;
    background: conic-gradient(from var(--angle),
            var(--accent-2) 0deg,
            /* Indigo 600 vibrante */
            var(--color-info) 90deg,
            /* Indigo 400 claro */
            #f0c6ff 180deg,
            /* Rosa lila claro */
            var(--color-info) 270deg,
            /* Indigo 400 claro */
            var(--accent-2) 360deg
            /* Indigo 600 vibrante */
        );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.8)) drop-shadow(0 0 18px rgba(129, 140, 248, 0.6));
    pointer-events: none;
    z-index: 0;
}

/* LED ÁMBAR VIBRANTE - Card COTIZACIONES (border-warning) - MODO DÍA */
.modern-card.border-warning::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    padding: 3px;
    background: conic-gradient(from var(--angle),
            var(--color-warning) 0deg,
            /* Ámbar vibrante */
            #fbbf24 90deg,
            /* Amarillo dorado */
            #fcd34d 180deg,
            /* Amarillo claro */
            #fbbf24 270deg,
            /* Amarillo dorado */
            var(--color-warning) 360deg
            /* Ámbar vibrante */
        );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.8)) drop-shadow(0 0 18px rgba(251, 191, 36, 0.6));
    pointer-events: none;
    z-index: 0;
}

/* LED VERDE ESMERALDA - Card ÓRDENES (border-success) - MODO DÍA */
.modern-card.border-success::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    padding: 3px;
    background: conic-gradient(from var(--angle),
            var(--color-success) 0deg,
            /* Verde esmeralda vibrante */
            var(--color-success) 90deg,
            /* Verde claro */
            var(--chart-success) 180deg,
            /* Verde muy claro */
            var(--color-success) 270deg,
            /* Verde claro */
            var(--color-success) 360deg
            /* Verde esmeralda vibrante */
        );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 10px var(--shadow)) drop-shadow(0 0 18px var(--shadow));
    pointer-events: none;
    z-index: 0;
}

/* LED ROSA VIBRANTE - Card EMPLEADOS (border-info) - MODO DÍA */
.modern-card.border-info::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    padding: 3px;
    background: conic-gradient(from var(--angle),
            var(--accent-1) 0deg,
            /* Rosa vibrante */
            var(--accent-1) 90deg,
            /* Rosa claro */
            #fda4af 180deg,
            /* Rosa muy claro */
            var(--accent-1) 270deg,
            /* Rosa claro */
            var(--accent-1) 360deg
            /* Rosa vibrante */
        );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 10px rgba(244, 63, 94, 0.8)) drop-shadow(0 0 18px rgba(251, 113, 133, 0.6));
    pointer-events: none;
    z-index: 0;
}

/* LED CRYSTAL ROSE - Para otros cards sin border de color - MODO DÍA */
.modern-card:not(.border-primary):not(.border-warning):not(.border-success):not(.border-info):not(.no-led)::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 16px;
    padding: 3px;
    background: conic-gradient(from var(--angle),
            var(--accent-1) 0deg,
            /* Rosa vibrante */
            var(--bg-primary) 90deg,
            /* Rosa cristalino */
            var(--accent-2) 180deg,
            /* Azul cielo */
            var(--accent-1) 270deg,
            /* Rosa claro */
            var(--accent-1) 360deg
            /* Rosa vibrante */
        );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 10px var(--sidebar-glow)) drop-shadow(0 0 18px var(--shadow)) drop-shadow(0 0 15px var(--shadow));
    pointer-events: none;
    z-index: 0;
}

/* MODO OSCURO - Efectos LED Gaming RGB */

.dark-mode .modern-card.border-primary::before {
    background: conic-gradient(from var(--angle),
            #ff00ff 0deg,
            #b400ff 90deg,
            #ff00ff 180deg,
            #b400ff 270deg,
            #ff00ff 360deg
        );
    filter: drop-shadow(0 0 14px rgba(255, 0, 255, 1)) drop-shadow(0 0 22px rgba(180, 0, 255, 0.8));
}

.dark-mode .modern-card.border-warning::before {
    background: conic-gradient(from var(--angle),
            #ffaa00 0deg,
            #ff6600 90deg,
            #ffaa00 180deg,
            #ff6600 270deg,
            #ffaa00 360deg
        );
    filter: drop-shadow(0 0 14px rgba(255, 170, 0, 1)) drop-shadow(0 0 22px rgba(255, 102, 0, 0.8));
}

.dark-mode .modern-card.border-success::before {
    background: conic-gradient(from var(--angle),
            #00ff88 0deg,
            #00ccff 90deg,
            #00ff88 180deg,
            #00ccff 270deg,
            #00ff88 360deg
        );
    filter: drop-shadow(0 0 14px rgba(0, 255, 136, 0.9)) drop-shadow(0 0 22px rgba(0, 204, 255, 0.6));
}

.dark-mode .modern-card.border-info::before {
    background: conic-gradient(from var(--angle),
            #00ccff 0deg,
            #00fff5 90deg,
            #00ccff 180deg,
            #00fff5 270deg,
            #00ccff 360deg
        );
    filter: drop-shadow(0 0 14px rgba(0, 204, 255, 1)) drop-shadow(0 0 22px rgba(0, 255, 245, 0.8));
}

.dark-mode .modern-card:not(.border-primary):not(.border-warning):not(.border-success):not(.border-info):not(.no-led)::before {
    background: conic-gradient(from var(--angle),
            #00fff5 0deg,
            #ff00ff 90deg,
            #b400ff 180deg,
            #00fff5 270deg,
            #ff00ff 360deg
        );
    filter: drop-shadow(0 0 14px rgba(0, 255, 245, 1)) drop-shadow(0 0 22px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 18px rgba(180, 0, 255, 0.6));
}



/* CONFIG CARD - Card de configuración con barra lateral */
.config-card {
    border: none;
    border-radius: 16px;
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px var(--shadow), 0 10px 15px var(--shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.config-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--accent-2), var(--accent-3));
}

.config-card:hover {
    box-shadow: 0 4px 20px var(--shadow-lg), 0 15px 30px var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--accent-2);
}

.dark-mode .config-card {
    box-shadow: 0 2px 8px var(--shadow), 0 0 20px var(--card-glow);
}

.dark-mode .config-card:hover {
    box-shadow: 0 4px 20px var(--shadow-lg), 0 0 40px var(--card-glow);
    border-color: var(--accent-2);
}

.config-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--accent-2);
    margin: 0.5rem 0;
}

.dark-mode .config-value {
    color: var(--text-secondary);
}

.config-icon-bg {
    background-color: rgba(2, 132, 199, 0.15);
    border-radius: 12px;
}

.dark-mode .config-icon-bg {
    background-color: rgba(34, 211, 238, 0.2);
}

/* BOTONES MODERNOS */
.btn-modern {
    border-radius: 10px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow: 0 2px 4px var(--shadow);
}

.btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow-lg);
}

.dark-mode .btn-modern:hover {
    box-shadow: 0 4px 12px var(--shadow-lg), 0 0 20px var(--card-glow);
}

.btn-edit {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
}

.btn-edit:hover {
    background: var(--accent-2);
    border-color: var(--accent-2);
    color: white;
    transform: rotate(15deg) scale(1.1);
}

.dark-mode .btn-edit:hover {
    box-shadow: 0 0 20px var(--card-glow);
}

/* MODERN TABLE - Tabla mejorada con glassmorphism */
.modern-table {
    border-radius: 12px;
    overflow: clip;
    box-shadow: 0 1px 4px var(--shadow);
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

.modern-table thead {
    background-color: var(--table-hover) !important;
    border-bottom: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.modern-table thead th {
    color: var(--text-primary) !important;
    background-color: var(--table-hover) !important;
    border-color: var(--border-color) !important;
    position: sticky;
    top: 0;
    z-index: 2;
}

.modern-table tbody {
    background-color: transparent !important;
}

.modern-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-color) !important;
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.modern-table tbody td {
    color: var(--text-primary) !important;
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

.modern-table tbody th {
    color: var(--text-primary) !important;
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

.modern-table tbody tr:hover {
    background-color: var(--table-hover) !important;
}

.modern-table tbody tr:hover td,
.modern-table tbody tr:hover th {
    background-color: transparent !important;
}

.dark-mode .modern-table {
    box-shadow: 0 1px 4px var(--shadow), 0 0 10px var(--card-glow);
}

.dark-mode .modern-table thead {
    background-color: var(--table-hover) !important;
}

.dark-mode .modern-table tbody tr {
    background-color: var(--bg-card) !important;
}

.dark-mode .modern-table tbody tr:hover {
    box-shadow: 0 0 15px var(--card-glow);
    background-color: var(--table-hover) !important;
}

/* Fila de totales en tablas */
.modern-table tbody tr.bg-light {
    background-color: var(--table-hover) !important;
}

.modern-table tbody tr.bg-light td,
.modern-table tbody tr.bg-light th {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

.dark-mode .modern-table tbody tr.bg-light {
    background-color: var(--table-hover) !important;
}

.dark-mode .modern-table tbody tr.bg-light td,
.dark-mode .modern-table tbody tr.bg-light th {
    background-color: transparent !important;
}

/* Elementos dentro de tablas */
.modern-table td small,
.modern-table th small {
    color: var(--text-muted) !important;
}

.modern-table td .fw-semibold,
.modern-table th .fw-semibold {
    color: var(--text-primary) !important;
}

.modern-table td .badge,
.modern-table th .badge {
    color: white !important;
}

.modern-table td i,
.modern-table th i {
    opacity: 0.9;
}

/* Botones dentro de tablas en modo oscuro */
.dark-mode .modern-table .btn-outline-warning {
    border-color: var(--accent-4);
    color: var(--accent-4);
}

.dark-mode .modern-table .btn-outline-warning:hover {
    background-color: var(--accent-4);
    border-color: var(--accent-4);
    color: white;
}

.dark-mode .modern-table .btn-outline-danger {
    border-color: var(--accent-1);
    color: var(--accent-1);
}

.dark-mode .modern-table .btn-outline-danger:hover {
    background-color: var(--accent-1);
    border-color: var(--accent-1);
    color: white;
}

/* BADGES MODERNOS */
.badge-modern {
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.015em;
}

.dark-mode .badge {
    box-shadow: 0 0 15px var(--card-glow);
}

/* ACORDEONES MODERNOS */
.accordion-button {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.005em;
    border-radius: 12px !important;
    padding: 1rem 1.25rem;
    background-color: var(--table-hover);
    color: var(--text-primary) !important;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    box-shadow: 0 2px 8px var(--shadow);
    background-color: var(--bg-card);
    color: var(--text-primary) !important;
}

.dark-mode .accordion-button:not(.collapsed) {
    box-shadow: 0 2px 8px var(--shadow), 0 0 20px var(--card-glow);
}

.accordion-item {
    border: none;
    margin-bottom: 1rem;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--shadow);
    background-color: var(--bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
}

.dark-mode .accordion-item {
    box-shadow: 0 2px 8px var(--shadow), 0 0 15px var(--card-glow);
}

.accordion-body {
    background-color: var(--bg-card);
}

/* ALERTAS MODERNAS */
.alert-modern {
    border: none;
    border-radius: 12px;
    border-left: 4px solid;
    box-shadow: 0 2px 4px var(--shadow);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.dark-mode .alert-modern {
    box-shadow: 0 2px 4px var(--shadow), 0 0 15px var(--card-glow);
}

/* AJUSTES GENERALES */
.bg-light {
    background-color: var(--table-hover) !important;
}

.border-top {
    border-color: var(--border-color) !important;
}

.dark-mode .opacity-50 {
    opacity: 0.4 !important;
}



/* ==============================================================================
   ✨ SECCIÓN 5: EFECTOS AVANZADOS Y ANIMACIONES
   RGB Gaming, Neón, Partículas
   ============================================================================== */

/* ==========================================
   🎮 EFECTOS GAMING RGB NEÓN - SOLO MODO OSCURO 🎮
   Estilo: Ventiladores RGB de PC Gaming
   ========================================== */

/* 🌈 Animación RGB: Ciclo neon cyan -> magenta -> violet */
@keyframes rgb-glow {
    0%, 100% {
        box-shadow:
            0 0 12px rgba(0, 255, 245, 0.3),
            0 0 24px rgba(0, 255, 245, 0.15);
    }
    33% {
        box-shadow:
            0 0 14px rgba(255, 0, 255, 0.35),
            0 0 28px rgba(255, 0, 255, 0.18);
    }
    66% {
        box-shadow:
            0 0 14px rgba(180, 0, 255, 0.35),
            0 0 28px rgba(180, 0, 255, 0.18);
    }
}

/* ⚡ Animación: Pulso Neón Cyan */
@keyframes neon-pulse {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(0, 255, 245, 0.4),
            0 0 20px rgba(0, 255, 245, 0.2),
            0 0 30px rgba(0, 255, 245, 0.1);
    }
    50% {
        box-shadow:
            0 0 15px rgba(0, 255, 245, 0.6),
            0 0 30px rgba(0, 255, 245, 0.4),
            0 0 45px rgba(0, 255, 245, 0.2);
    }
}

/* ⚡ Animación: Pulso Neón Cyan para inputs */
@keyframes neon-pulse-cyan {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(0, 255, 245, 0.3),
            0 0 16px rgba(0, 255, 245, 0.15),
            0 0 24px rgba(0, 255, 245, 0.08);
    }
    50% {
        box-shadow:
            0 0 12px rgba(0, 255, 245, 0.5),
            0 0 24px rgba(0, 255, 245, 0.25),
            0 0 36px rgba(0, 255, 245, 0.12);
    }
}

/* 🎆 Animación: Ciclo neon completo cyan -> magenta -> violet */
@keyframes neon-rgb-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 255, 245, 0.5), 0 0 30px rgba(0, 255, 245, 0.25);
    }
    33% {
        box-shadow: 0 0 15px rgba(255, 0, 255, 0.5), 0 0 30px rgba(255, 0, 255, 0.25);
    }
    66% {
        box-shadow: 0 0 15px rgba(180, 0, 255, 0.5), 0 0 30px rgba(180, 0, 255, 0.25);
    }
}

/* 💡 Animación: Parpadeo de neon real (solo logo) */
@keyframes neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 0 0 7px #00fff5, 0 0 20px rgba(0, 255, 245, 0.5), 0 0 40px rgba(0, 255, 245, 0.3);
        opacity: 1;
    }
    20%, 24%, 55% {
        text-shadow: none;
        opacity: 0.8;
    }
}

/* 🎆 Animación: Borde cyan <-> magenta */
@keyframes neon-border-cycle {
    0%, 100% {
        border-color: rgba(0, 255, 245, 0.35);
        box-shadow: 0 0 10px rgba(0, 255, 245, 0.15);
    }
    50% {
        border-color: rgba(255, 0, 255, 0.35);
        box-shadow: 0 0 15px rgba(255, 0, 255, 0.20);
    }
}

/* 🎆 Animación: Borde RGB Rotatorio */
@keyframes rgb-border {
    0%, 100% {
        border-color: rgba(0, 255, 245, 0.30);
        box-shadow: 0 0 10px rgba(0, 255, 245, 0.15);
    }
    50% {
        border-color: rgba(255, 0, 255, 0.35);
        box-shadow: 0 0 15px rgba(255, 0, 255, 0.20);
    }
}

/* 💫 Animación: Breathing RGB */
@keyframes rgb-breathing {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* 🎮 SIDEBAR: Fondo cyberpunk + Borde Cyan Neon */
.dark-mode .sidebar {
    background: linear-gradient(160deg, rgba(10, 5, 32, 0.95) 0%, rgba(21, 10, 53, 0.92) 50%, rgba(26, 8, 69, 0.90) 100%) !important;
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-right: 2px solid rgba(0, 255, 245, 0.30);
    box-shadow: 2px 0 25px rgba(0, 255, 245, 0.12);
}

/* Animaciones para halos flotantes - Movimiento más amplio */
@keyframes neon-float-1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(30px, -40px) scale(1.3);
        opacity: 1;
    }
}

@keyframes neon-float-2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.75;
    }

    50% {
        transform: translate(-30px, 35px) scale(1.25);
        opacity: 1;
    }
}

/* 🎨 SIDEBAR NEON CYBERPUNK: Cyan + Magenta */
.dark-mode .sidebar a {
    color: rgba(0, 255, 245, 0.85) !important;
    /* Cyan electric */
}

.dark-mode .sidebar a:hover:not(.active) {
    color: #ff00ff !important;
    /* Magenta */
}

.dark-mode .sidebar a.active {
    color: #ff00ff !important;
    /* Magenta */
}

.dark-mode .sidebar h5,
.dark-mode .sidebar .logo-text-gold {
    color: #00fff5 !important;
    /* Cyan electric - nombre empresa */
    animation: neon-flicker 8s ease-in-out infinite;
}

.dark-mode .sidebar h6,
.dark-mode .user-info h6 {
    color: #00fff5 !important;
    /* Cyan electric */
}

.dark-mode .sidebar small,
.dark-mode .sidebar-subtitle {
    color: #b400ff !important;
    /* Violet */
}

.dark-mode .user-info small {
    color: #8a7faa !important;
    /* Violet-grey */
}

.dark-mode .user-email {
    color: #ff00ff !important;
    /* Magenta */
}

.dark-mode .sidebar p,
.dark-mode .sidebar label,
.dark-mode .sidebar span,
.dark-mode .sidebar div {
    color: rgba(0, 255, 245, 0.80) !important;
    /* Cyan electric */
}

/* 🔥 SIDEBAR Links Activos: Glow magenta neon */
.dark-mode .sidebar a.active {
    position: relative;
    background: rgba(255, 0, 255, 0.08) !important;
    border-left: 3px solid #ff00ff;
    box-shadow: inset 0 0 20px rgba(255, 0, 255, 0.08);
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
}

/* ✨ SIDEBAR Links Hover: Glow cyan sutil */
.dark-mode .sidebar a:hover:not(.active) {
    background: rgba(0, 255, 245, 0.06) !important;
    box-shadow:
        0 0 12px rgba(0, 255, 245, 0.12),
        inset 0 0 8px rgba(0, 255, 245, 0.05);
    transition: all 0.3s ease;
}

/* 🌟 HEADER: Linea cyan neon */
.dark-mode header {
    border-bottom: 1px solid rgba(0, 255, 245, 0.25);
}

/* 💎 CARDS: Cyan/Magenta Glow al Hover */
.dark-mode .modern-phase-card:hover,
.dark-mode .collapsible-card-section:hover {
    border: 1px solid rgba(0, 255, 245, 0.40);
    box-shadow: 0 0 20px rgba(0, 255, 245, 0.15), 0 0 40px rgba(255, 0, 255, 0.06), 0 4px 12px var(--shadow-lg);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* 🎯 BADGES: Glow estatico (sin animacion por performance) */

/* 📊 PROGRESS BARS: Glow estatico neon */
.dark-mode .progress-bar {
    box-shadow:
        0 0 12px rgba(0, 255, 245, 0.5),
        inset 0 0 6px rgba(0, 255, 245, 0.3);
}

/* 📝 FORMS: Estilos base para modo oscuro */
.dark-mode input,
.dark-mode select,
.dark-mode textarea,
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* 📋 SELECT OPTIONS: Opciones de select en modo oscuro */
.dark-mode select option,
.dark-mode .form-select option {
    background-color: #0a0520 !important;
    color: var(--text-primary) !important;
}

.dark-mode select option:hover,
.dark-mode .form-select option:hover {
    background-color: #150a35 !important;
    color: var(--text-primary) !important;
}

.dark-mode select option:checked,
.dark-mode .form-select option:checked {
    background-color: var(--accent-2) !important;
    color: #fff !important;
}

/* 🔘 BUTTONS: Botones outline en modo oscuro */
.dark-mode .btn-outline-primary,
.dark-mode .btn-outline-secondary,
.dark-mode .btn-outline-success,
.dark-mode .btn-outline-danger,
.dark-mode .btn-outline-warning,
.dark-mode .btn-outline-info {
    background-color: transparent !important;
    border-width: 1px !important;
}

.dark-mode .btn-outline-primary:hover,
.dark-mode .btn-outline-secondary:hover,
.dark-mode .btn-outline-success:hover,
.dark-mode .btn-outline-danger:hover,
.dark-mode .btn-outline-warning:hover,
.dark-mode .btn-outline-info:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 📝 FORMS Focus: Borde Cyan neon al enfocar */
.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    border: 2px solid #00fff5 !important;
    box-shadow:
        0 0 8px rgba(0, 255, 245, 0.3),
        0 0 16px rgba(0, 255, 245, 0.15),
        0 0 24px rgba(0, 255, 245, 0.08);
    animation: neon-pulse-cyan 2s ease-in-out infinite;
    outline: none;
    background-color: rgba(0, 255, 245, 0.04) !important;
}

/* 🌙 BOTÓN TOGGLE TEMA: Borde cyan neon */
.dark-mode #theme-toggle {
    border: 2px solid #00fff5;
    box-shadow: 0 0 10px rgba(0, 255, 245, 0.2);
}

/* 🎨 LOGO HEADER: Efecto neon cyberpunk */
.dark-mode .logo-icon {
    position: relative;
    animation: neon-rgb-glow 6s linear infinite;
}

/* Halo neon para el logo */
.dark-mode .logo-icon::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(45deg,
            #00fff5 0%,
            #ff00ff 25%,
            #b400ff 50%,
            #00fff5 75%,
            #ff00ff 100%);
    border-radius: 50%;
    opacity: 0.25;
    filter: blur(12px);
    z-index: -1;
    animation: rgb-rotate-bg 7s linear infinite;
    pointer-events: none;
}

/* 💠 BOTONES PRIMARIOS: Hover neon */
.dark-mode .btn-primary:hover {
    border: 2px solid #00fff5;
}

/* 🔮 MODALS: Borde cyan + glow dual cyberpunk */
.dark-mode .modal-content {
    background-color: var(--bg-card);
    border: 2px solid rgba(0, 255, 245, 0.5);
    box-shadow:
        0 0 20px rgba(0, 255, 245, 0.15),
        0 0 40px rgba(255, 0, 255, 0.08);
}

/* 🔮 MODALS: Backdrop blur glassmorphism */
.modal-backdrop.show {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* 🔮 MODALS: Animaciones de entrada por tipo */

/* Slide-up: modales grandes/informativos (default para todos) */
.modal.fade .modal-dialog {
    transform: translateY(40px) scale(0.98);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Scale-in: modales pequeños/centrados (sm + centered) */
.modal.fade .modal-dialog.modal-dialog-centered.modal-sm .modal-content,
.modal.fade .modal-dialog.modal-sm .modal-content {
    transform: scale(0.85);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal.show .modal-dialog.modal-dialog-centered.modal-sm .modal-content,
.modal.show .modal-dialog.modal-sm .modal-content {
    transform: scale(1);
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transform: none;
        transition: opacity 0.15s linear;
    }
    .modal.fade .modal-dialog.modal-dialog-centered.modal-sm .modal-content,
    .modal.fade .modal-dialog.modal-sm .modal-content {
        transform: none;
        transition: none;
    }
}

/* ⭐ TABLES: Hover Row con glow cyan */
.dark-mode table tbody tr:hover {
    background: rgba(0, 255, 245, 0.06) !important;
    box-shadow:
        inset 0 0 10px rgba(0, 255, 245, 0.08);
}

/* Table header neon */
.dark-mode .table thead {
    border-bottom: 2px solid rgba(255, 0, 255, 0.30) !important;
}

.dark-mode .table thead th {
    text-shadow: 0 0 4px rgba(0, 255, 245, 0.2);
}

/* ⏰ RELOJ EN TIEMPO REAL: Estilos base para modo día */
#realTimeClock {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative;
    box-sizing: border-box;
}

/* Borde LED animado para reloj en modo día */
#realTimeClock::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 12px;
    padding: 3px;
    background: conic-gradient(from var(--angle),
            var(--accent-3) 0deg,
            var(--chart-bg-subtle) 90deg,
            var(--chart-cyan) 180deg,
            var(--accent-4) 270deg,
            var(--accent-3) 360deg
        );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 10px var(--sidebar-glow)) drop-shadow(0 0 18px var(--shadow)) drop-shadow(0 0 15px var(--shadow));
    pointer-events: none;
    z-index: -1;
}

/* ⏰ RELOJ EN TIEMPO REAL: Efecto RGB Gaming para modo oscuro */
.dark-mode #realTimeClock {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 2px solid #00fff5;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow:
        0 0 10px rgba(0, 255, 245, 0.8),
        0 0 20px rgba(0, 255, 245, 0.5),
        0 0 30px rgba(0, 255, 245, 0.3);
}

/* 📅 ÍCONO CALENDARIO del reloj: Glow neon */
.dark-mode #realTimeClock::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
            #00fff5 0%,
            #ff00ff 25%,
            #b400ff 50%,
            #00fff5 75%,
            #ff00ff 100%);
    border-radius: 12px;
    opacity: 0.3;
    filter: blur(8px);
    z-index: -1;
    animation: rgb-rotate-bg 6s linear infinite;
}

/* Animación para el fondo RGB del reloj */
@keyframes rgb-rotate-bg {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Contenedor del reloj con posición relativa para el pseudo-elemento */
.dark-mode .top-navbar h5 {
    position: relative;
}

/* ⏳ CONTADOR DE SESIÓN: Estilos base para modo día */
#sessionTimer {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative;
    box-sizing: border-box;
}

/* Borde LED animado para contador de sesión en modo día */
#sessionTimer::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 12px;
    padding: 3px;
    background: conic-gradient(from var(--angle),
            var(--color-success) 0deg,
            /* Verde */
            var(--color-success) 90deg,
            /* Verde claro */
            var(--chart-success) 180deg,
            /* Verde muy claro */
            var(--color-success) 270deg,
            /* Verde claro */
            var(--color-success) 360deg
            /* Verde */
        );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 10px var(--shadow)) drop-shadow(0 0 18px var(--shadow));
    pointer-events: none;
    z-index: 0;
}

/* ⏳ CONTADOR DE SESIÓN: Efecto neon magenta para modo oscuro */
.dark-mode #sessionTimer {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 2px solid #ff00ff;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow:
        0 0 10px rgba(255, 0, 255, 0.8),
        0 0 20px rgba(255, 0, 255, 0.5),
        0 0 30px rgba(255, 0, 255, 0.3);
}

/* Glow para el contador de sesión en modo oscuro */
.dark-mode #sessionTimer::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
            #ff00ff 0%,
            #b400ff 25%,
            #00fff5 50%,
            #b400ff 75%,
            #ff00ff 100%);
    border-radius: 12px;
    opacity: 0.3;
    filter: blur(8px);
    z-index: -1;
    animation: rgb-rotate-bg 6s linear infinite;
}

.dark-mode .top-navbar h5 .bi-calendar3 {
    filter: drop-shadow(0 0 8px rgba(0, 255, 245, 0.8));
}

/* Animación de parpadeo para contador de sesión crítico */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* 🎮 TOGGLE TEMA: Borde cyan neon */
.dark-mode .theme-toggle {
    cursor: pointer;
    border: 1px solid rgba(0, 255, 245, 0.3);
}

.dark-mode .theme-toggle:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
    box-shadow: 0 0 12px rgba(0, 255, 245, 0.2);
}



/* 🎨 FONDO GAMING RGB - Iluminación Ambiental */

/* Animación: Gradiente RGB que se mueve */
@keyframes rgb-ambient-move {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Animación: Partículas de luz flotantes */
@keyframes particle-float-1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translate(100px, -100px) scale(1.5);
        opacity: 0.6;
    }
}

@keyframes particle-float-2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }

    50% {
        transform: translate(-150px, 120px) scale(1.3);
        opacity: 0.7;
    }
}

@keyframes particle-float-3 {

    0%,
    100% {
        transform: translate(0, 0) scale(1.2);
        opacity: 0.2;
    }

    50% {
        transform: translate(80px, 150px) scale(1.6);
        opacity: 0.5;
    }
}

/* Fondo principal con gradiente cyberpunk */
.dark-mode .main-content {
    background: linear-gradient(135deg,
            rgba(0, 255, 245, 0.03) 0%,
            rgba(255, 0, 255, 0.03) 25%,
            rgba(180, 0, 255, 0.03) 50%,
            rgba(0, 255, 245, 0.03) 75%,
            rgba(255, 0, 255, 0.03) 100%);
    background-size: 400% 400%;
    animation: rgb-ambient-move 20s ease infinite;
}

/* Overlay con gradiente radial neon desde las esquinas */
.dark-mode .main-content::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 20%, rgba(0, 255, 245, 0.06) 0%, transparent 25%),
        radial-gradient(circle at 90% 30%, rgba(255, 0, 255, 0.06) 0%, transparent 25%),
        radial-gradient(circle at 20% 80%, rgba(180, 0, 255, 0.06) 0%, transparent 25%),
        radial-gradient(circle at 80% 90%, rgba(0, 102, 255, 0.06) 0%, transparent 25%);
    z-index: -1;
    animation: rgb-ambient-move 30s ease infinite;
}

/* Partículas flotantes - Partícula 1 (Cyan) */
.dark-mode .main-content::after {
    content: '';
    position: fixed;
    top: 20%;
    left: 15%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 255, 245, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: -1;
    will-change: transform;
    animation: particle-float-1 15s ease-in-out infinite;
}

/* Contenido sobre el fondo - REMOVIDO para no interferir con modals */

/* Partículas adicionales usando body */
.dark-mode body::before {
    content: '';
    position: fixed;
    top: 60%;
    right: 20%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 0, 255, 0.10) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: -1;
    will-change: transform;
    animation: particle-float-2 18s ease-in-out infinite;
}

.dark-mode body::after {
    content: '';
    position: fixed;
    bottom: 15%;
    left: 25%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(180, 0, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(65px);
    pointer-events: none;
    z-index: -1;
    will-change: transform;
    animation: particle-float-3 20s ease-in-out infinite;
}

/* Grid cyberpunk: lineas finas cada 100px en cyan/magenta */
.dark-mode .main-content {
    background-image:
        linear-gradient(135deg,
            rgba(0, 255, 245, 0.03) 0%,
            rgba(255, 0, 255, 0.03) 25%,
            rgba(180, 0, 255, 0.03) 50%,
            rgba(0, 255, 245, 0.03) 75%,
            rgba(255, 0, 255, 0.03) 100%),
        repeating-linear-gradient(0deg,
            rgba(0, 255, 245, 0.025) 0px,
            transparent 1px,
            transparent 100px,
            rgba(0, 255, 245, 0.025) 101px),
        repeating-linear-gradient(90deg,
            rgba(255, 0, 255, 0.02) 0px,
            transparent 1px,
            transparent 100px,
            rgba(255, 0, 255, 0.02) 101px);
    background-size: 400% 400%, 100px 100px, 100px 100px;
}

/* Desactivar animaciones para usuarios con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   ACCESIBILIDAD - Focus visible, skip nav
   ======================================== */

/* Focus visible solo con teclado (no con mouse) */
:focus-visible {
    outline: 3px solid var(--chart-info) !important;
    outline-offset: 2px !important;
}

/* Dark mode: focus cyan neon + glow */
.dark-mode :focus-visible {
    outline-color: #00fff5 !important;
    box-shadow: 0 0 10px rgba(0, 255, 245, 0.3);
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 16px;
    background: var(--chart-info);
    color: #fff;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    z-index: 100000;
    font-weight: 600;
    font-size: 0.875rem;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    color: #fff;
}

/* 🖱️ CURSOR NEON CYBERPUNK - Solo Modo Noche (Cyan + Magenta) */
.dark-mode {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><defs><linearGradient id="cursorGrad" x1="0%25" y1="0%25" x2="100%25" y2="100%25"><stop offset="0%25" style="stop-color:%2300fff5;stop-opacity:1" /><stop offset="50%25" style="stop-color:%23ff00ff;stop-opacity:1" /><stop offset="100%25" style="stop-color:%23b400ff;stop-opacity:1" /></linearGradient><filter id="glow"><feGaussianBlur stdDeviation="1" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><path d="M 4 4 L 4 24 L 10 18 L 14 26 L 17 25 L 13 17 L 20 17 Z" fill="url(%23cursorGrad)" stroke="%23ffffff" stroke-width="1.5" filter="url(%23glow)"/><path d="M 4 4 L 4 24 L 10 18 L 14 26 L 17 25 L 13 17 L 20 17 Z" fill="none" stroke="%2300fff5" stroke-width="0.5" opacity="0.8"/></svg>') 4 4, auto;
}

.dark-mode * {
    cursor: inherit;
}

/* ==============================================================================
   🎯 ANIMACIONES PARA BADGES Y FAB
   ============================================================================== */

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.blinking-badge {
    animation: blink 1s infinite;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

.pulse-animation {
    animation: pulse-red 2s infinite;
    background: var(--color-danger) !important;
}

/* ========== CSS extraído de app.php ========== */
/* ========== MODAL ALERTA DE SESIÓN - MODO DÍA ========== */
.modal-alerta-sesion {
    border: none;
    border-radius: 24px;
    overflow: visible;
    background: var(--bg-card);
    box-shadow: 0 25px 50px -12px var(--shadow-lg), 0 0 0 1px var(--border-color);
    border: 1px solid var(--border-color);
}

.alerta-sesion-icon-wrapper {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.alerta-sesion-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px var(--shadow-lg);
    position: relative;
    z-index: 2;
}

.alerta-sesion-icon i {
    font-size: 2.2rem;
    color: white;
    animation: pulse-icon 2s ease-in-out infinite;
}

.alerta-sesion-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--card-glow);
    border-radius: 50%;
    animation: pulse-ring 1.5s ease-out infinite;
    z-index: 1;
}

@keyframes pulse-icon {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

.alerta-sesion-title {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-top: 30px;
}

.alerta-sesion-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

.alerta-sesion-subtitle strong {
    color: var(--accent-2);
}

/* Countdown circular */
.countdown-circular-wrapper {
    display: flex;
    justify-content: center;
}

.countdown-circular {
    position: relative;
    width: 120px;
    height: 120px;
}

.countdown-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.countdown-bg {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 8;
}

.countdown-progress {
    fill: none;
    stroke: url(#gradient-countdown);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
}

.countdown-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.countdown-number span {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-2);
    line-height: 1;
}

.countdown-number small {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Botones */
.btn-alerta-cancelar {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.btn-alerta-cancelar:hover {
    background: var(--table-hover);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.btn-alerta-continuar {
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent-2) 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px var(--shadow-lg);
    transition: all 0.3s ease;
}

.btn-alerta-continuar:hover {
    background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-3) 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-lg);
}

/* ========== MODAL ALERTA DE SESIÓN - MODO NOCHE ========== */
.dark-mode .modal-alerta-sesion {
    background: var(--bg-card);
    box-shadow: 0 25px 50px -12px var(--shadow-lg), 0 0 40px var(--card-glow);
}

.dark-mode .alerta-sesion-icon {
    background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-3) 100%);
    box-shadow: 0 10px 30px var(--card-glow), 0 0 20px var(--card-glow);
}

.dark-mode .alerta-sesion-pulse {
    background: var(--card-glow);
}

.dark-mode .alerta-sesion-title {
    color: var(--text-primary);
}

.dark-mode .alerta-sesion-subtitle {
    color: var(--text-secondary);
}

.dark-mode .alerta-sesion-subtitle strong {
    color: var(--accent-2);
}

.dark-mode .countdown-bg {
    stroke: var(--border-color);
}

.dark-mode .countdown-number span {
    color: var(--accent-2);
}

.dark-mode .countdown-number small {
    color: var(--text-secondary);
}

.dark-mode .btn-alerta-cancelar {
    background: var(--bg-primary);
    color: var(--text-muted);
    border-color: var(--border-color);
}

.dark-mode .btn-alerta-cancelar:hover {
    background: var(--table-hover);
    color: var(--text-primary);
}

.dark-mode .btn-alerta-continuar {
    background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent-3) 100%);
    box-shadow: 0 4px 15px var(--card-glow), 0 0 15px var(--card-glow);
}

.dark-mode .btn-alerta-continuar:hover {
    background: linear-gradient(135deg, var(--accent-3) 0%, var(--accent-2) 100%);
    box-shadow: 0 6px 20px var(--card-glow), 0 0 20px var(--card-glow);
}


/* ========== CSS extraído de app.php ========== */
#globalLoadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

#globalLoadingOverlay .loading-content {
    text-align: center;
}

#globalLoadingOverlay .logo-container-global {
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 200px;
    height: 200px;
}

#globalLoadingOverlay .pulse-logo-global {
    max-width: 160px;
    /* Reduced from 200px */
    max-height: 160px;
    animation: pulseGlobal 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    z-index: 2;
}

#globalLoadingOverlay .pulse-icon-global {
    font-size: 6rem;
    color: var(--bg-card);
    animation: pulseGlobal 1.5s ease-in-out infinite;
}

#globalLoadingOverlay .loading-text {
    color: var(--bg-card);
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0;
    animation: fadeInOutGlobal 1.5s ease-in-out infinite;
}

@keyframes pulseGlobal {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes fadeInOutGlobal {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Spinner border */
#globalLoadingOverlay .logo-container-global::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--bg-card);
    border-right-color: rgba(255, 255, 255, 0.5);
    animation: spinGlobal 1s linear infinite;
}

/* Scanner Styles */
#globalLoadingOverlay .scanner-container {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    overflow: hidden;
}

#globalLoadingOverlay .scanner-icon {
    font-size: 3.5rem;
    color: rgba(255, 255, 255, 0.3);
}

#globalLoadingOverlay .scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--color-success);
    box-shadow: 0 0 10px var(--color-success);
    animation: scanGlobal 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    opacity: 0.8;
}

@keyframes spinGlobal {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes scanGlobal {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}


/* ========== CSS extraído de app.php ========== */
.btn-fab-estado {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-success), var(--chart-success-dark));
    /* Verde Vibrante */
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: grab;
    /* touch-action: none permite arrastrar el FAB con el dedo sin que la pagina haga scroll */
    touch-action: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-fab-estado:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}

.btn-fab-estado:active {
    transform: scale(0.95);
}

/* Mientras se arrastra: sin animaciones de hover/scale para que siga al puntero con precision */
.btn-fab-estado.fab-dragging {
    cursor: grabbing;
    transform: none !important;
    opacity: 0.92;
    transition: none !important;
}

/* Modal Custom Styles */
.estado-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

.estado-item:last-child {
    border-bottom: none;
}

.estado-item:hover {
    background-color: var(--table-hover);
}

.estado-avatar {
    width: 70px;
    /* Aumentado de 40px */
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    background-color: var(--search-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--text-muted);
    font-size: 1.5rem;
    /* Aumentar fuente de iniciales */
    flex-shrink: 0;
    /* Evitar que se aplaste */
}

.estado-info {
    flex: 1;
}

.estado-nombre {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.estado-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.estado-badge {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

/* ========================================
   🌙 MODO OSCURO - REGLAS UNIVERSALES
   Centralización de TODOS los estilos de modo noche
   ======================================== */

/* REGLA UNIVERSAL: Cualquier elemento con fondo blanco → oscuro */
.dark-mode *[style*="background: white"],
.dark-mode *[style*="background: #fff"],
.dark-mode *[style*="background: #ffffff"],
.dark-mode *[style*="background-color: white"],
.dark-mode *[style*="background-color: #fff"],
.dark-mode *[style*="background-color: #ffffff"] {
    background: rgba(10, 8, 30, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   🔤 TEXTOS UNIVERSALES EN MODO OSCURO
   Todos los textos deben ser claros/blancos
   ======================================== */

/* Fallback textos dark mode: sin !important para permitir que reglas más específicas (sidebar, componentes, tipografía) prevalezcan */
.dark-mode span,
.dark-mode div,
.dark-mode strong,
.dark-mode b,
.dark-mode a {
    color: var(--text-primary);
}

/* Textos específicos en cards */
.dark-mode .qa-card *,
.dark-mode .qa-card h1,
.dark-mode .qa-card h2,
.dark-mode .qa-card h3,
.dark-mode .qa-card h4,
.dark-mode .qa-card h5,
.dark-mode .qa-card h6,
.dark-mode .qa-card p,
.dark-mode .qa-card span,
.dark-mode .qa-card strong,
.dark-mode .qa-card small {
    color: var(--text-primary) !important;
}

/* Textos en financial report */
.dark-mode .financial-report-container *,
.dark-mode .financial-report-container h1,
.dark-mode .financial-report-container h2,
.dark-mode .financial-report-container h3,
.dark-mode .financial-report-container h4,
.dark-mode .financial-report-container h5,
.dark-mode .financial-report-container h6,
.dark-mode .financial-report-container p,
.dark-mode .financial-report-container span,
.dark-mode .financial-report-container strong,
.dark-mode .financial-report-container small {
    color: var(--text-primary) !important;
}

/* Valores y números grandes */
.dark-mode .qa-answer,
.dark-mode .kpi-value,
.dark-mode .stat-value,
.dark-mode .metric-value-compact {
    color: var(--text-primary) !important;
}

/* Labels y títulos pequeños */
.dark-mode .qa-question,
.dark-mode .kpi-label,
.dark-mode .stat-label,
.dark-mode .metric-label-compact {
    color: var(--text-secondary) !important;
}

/* Textos secundarios y descripciones */
.dark-mode .text-muted,
.dark-mode small.text-muted,
.dark-mode .metric-detail-compact {
    color: var(--text-muted) !important;
    font-weight: 700;
    -webkit-text-stroke: 0.5px #FF8C00;
    text-shadow: 0 0 1px #FF8C00;
}

/* Sobrescribir cualquier color negro inline */
.dark-mode *[style*="color: #000"],
.dark-mode *[style*="color: black"],
.dark-mode *[style*="color: #1f1f1f"],
.dark-mode *[style*="color: rgb(0, 0, 0)"] {
    color: var(--text-primary) !important;
}

/* Sobrescribir colores verdes/cyan oscuros a blanco */
.dark-mode *[style*="color: #10b981"],
.dark-mode *[style*="color: #059669"],
.dark-mode *[style*="color: #047857"],
.dark-mode *[style*="color: #065f46"],
.dark-mode *[style*="color: #064e3b"],
.dark-mode *[style*="color: rgb(16, 185, 129)"],
.dark-mode *[style*="color: rgb(5, 150, 105)"] {
    color: #ffffff !important;
}

/* Forzar que valores numéricos nunca sean verdes */
.dark-mode .kpi-value-premium,
.dark-mode .metric-value-compact,
.dark-mode .qa-answer {
    color: #ffffff !important;
}

/* Forzar que labels nunca sean verdes oscuros */
.dark-mode .kpi-label-premium,
.dark-mode .metric-label-compact,
.dark-mode .qa-question {
    color: #cbd5e1 !important;
}

/* ========================================
   💰 VALORES NUMÉRICOS Y KPI CARDS
   Valores grandes deben ser MUY visibles
   ======================================== */

/* Valores numéricos grandes en KPI Cards */
.dark-mode .kpi-value-premium,
.dark-mode .kpi-card-premium .kpi-value-premium,
.dark-mode .stat-value,
.dark-mode .kpi-value {
    color: #ffffff !important;
}

/* Iconos en KPI Cards - Hacerlos brillantes con colores variados */
.dark-mode .kpi-icon-large,
.dark-mode .kpi-icon-large i,
.dark-mode .kpi-card-premium i,
.dark-mode .metric-icon-compact i {
    color: #00fff5 !important;
    /* Cyan electric */
    opacity: 1 !important;
}

/* Labels en KPI Cards */
.dark-mode .kpi-label-premium,
.dark-mode .kpi-card-premium .kpi-label-premium {
    color: var(--text-secondary) !important;
    opacity: 0.9;
}

/* Sparklines y mini gráficos */
.dark-mode .kpi-sparkline canvas {
    opacity: 0.8;
}

/* Trend badges */
.dark-mode .kpi-trend-badge {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Metric cards compact */
.dark-mode .metric-value-compact {
    color: #ffffff !important;
}

.dark-mode .metric-label-compact {
    color: var(--text-secondary) !important;
}

/* Asegurar que los números en cards sean siempre blancos */
.dark-mode .kpi-card-premium strong,
.dark-mode .metric-card-compact strong,
.dark-mode .qa-card strong {
    color: #ffffff !important;
}

/* ========================================
   KPI CARDS PREMIUM - COLORES SEMÁNTICOS POR TIPO
   Cada tipo de KPI tiene su color distintivo
   ======================================== */

/* ICONOS - Base: eliminar gradiente de texto */
.dark-mode .kpi-card-premium i,
.dark-mode .kpi-card-premium .bi,
.dark-mode .kpi-card-premium .kpi-icon-large i,
.dark-mode .kpi-card-premium .kpi-icon-large,
.dark-mode .metric-icon-compact i {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

/* ICONOS - Colores distintos por tipo */
.dark-mode .kpi-card-premium i,
.dark-mode .kpi-card-premium .kpi-icon-large i,
.dark-mode .kpi-card-premium .kpi-icon-large {
    -webkit-text-fill-color: #ff00ff !important;
    color: #ff00ff !important;
}

.dark-mode .kpi-info i,
.dark-mode .kpi-info .kpi-icon-large i {
    -webkit-text-fill-color: #00ccff !important;
    color: #00ccff !important;
}

.dark-mode .kpi-danger i,
.dark-mode .kpi-danger .kpi-icon-large i {
    -webkit-text-fill-color: #ff0055 !important;
    color: #ff0055 !important;
}

.dark-mode .metric-icon-compact i {
    -webkit-text-fill-color: #b400ff !important;
    color: #b400ff !important;
}

/* VALORES NUMÉRICOS - Colores distintos por tipo */
.dark-mode .kpi-card-premium .kpi-value-premium,
.dark-mode .kpi-card-premium div[class*="kpi-value"] {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #ff00ff !important;
    color: #ff00ff !important;
}

.dark-mode .kpi-info .kpi-value-premium {
    -webkit-text-fill-color: #00ccff !important;
    color: #00ccff !important;
}

.dark-mode .kpi-danger .kpi-value-premium {
    -webkit-text-fill-color: #ff0055 !important;
    color: #ff0055 !important;
}

.dark-mode .metric-value-compact {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #b400ff !important;
    color: #b400ff !important;
}

/* LABELS/TÍTULOS - Blanco */
.dark-mode .kpi-card-premium .kpi-label-premium,
.dark-mode .kpi-card-premium div[class*="kpi-label"],
.dark-mode .kpi-info .kpi-label-premium,
.dark-mode .kpi-danger .kpi-label-premium,
.dark-mode .metric-label-compact {
    color: #ffffff !important;
}

/* TEXTOS PEQUEÑOS */
.dark-mode .kpi-card-premium small,
.dark-mode .kpi-card-premium .text-muted,
.dark-mode .kpi-info small,
.dark-mode .kpi-danger small {
    color: #cbd5e1 !important;
}

/* SOBRESCRIBIR CUALQUIER COLOR INLINE */
.dark-mode .kpi-card-premium *[style*="color"],
.dark-mode .kpi-info *[style*="color"],
.dark-mode .kpi-danger *[style*="color"] {
    color: inherit !important;
}

/* Cards del Dashboard - Análisis Financiero */
.dark-mode .qa-card {
    background: rgba(10, 8, 30, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .qa-card:hover {
    background: rgba(10, 8, 30, 0.9) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

/* Contenedor de Reporte Financiero */
.dark-mode .financial-report-container {
    background: linear-gradient(to right, rgba(10, 8, 30, 0.8), rgba(10, 8, 30, 0.9)) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Executive Summary */
.dark-mode .executive-summary {
    background: rgba(10, 8, 30, 0.8) !important;
    border-left-color: var(--color-success) !important;
}

/* Orden Cards */
.dark-mode .orden-card {
    background: rgba(10, 8, 30, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .orden-card:hover {
    background: rgba(10, 8, 30, 0.9) !important;
    border-color: var(--accent-3) !important;
}

/* KPI Cards Premium */
.dark-mode .kpi-card-premium {
    background: rgba(10, 8, 30, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Metric Cards Compact */
.dark-mode .metric-card-compact {
    background: rgba(10, 8, 30, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Insights Cards */
.dark-mode .insights-quick-card {
    background: rgba(10, 8, 30, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .insight-item-mini {
    background: rgba(10, 8, 30, 0.6) !important;
}

.dark-mode .insight-item-mini:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Listas y elementos de lista */
.dark-mode .list-group-item {
    background: rgba(10, 8, 30, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

.dark-mode .list-group-item:hover {
    background: rgba(10, 8, 30, 0.9) !important;
}

/* Dropdowns */
.dark-mode .dropdown-menu {
    background: rgba(10, 8, 30, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .dropdown-item {
    color: var(--text-primary) !important;
}

.dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Alerts */
.dark-mode .alert {
    background: rgba(10, 8, 30, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Breadcrumbs */
.dark-mode .breadcrumb {
    background: rgba(10, 8, 30, 0.8) !important;
}

.dark-mode .breadcrumb-item {
    color: var(--text-secondary) !important;
}

.dark-mode .breadcrumb-item.active {
    color: var(--text-primary) !important;
}

/* Pagination */
.dark-mode .pagination .page-link {
    background: rgba(10, 8, 30, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

.dark-mode .pagination .page-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .pagination .page-item.active .page-link {
    background: var(--accent-3) !important;
    border-color: var(--accent-3) !important;
}

/* Progress bars */
.dark-mode .progress {
    background: rgba(10, 8, 30, 0.8) !important;
}

/* Tooltips y Popovers */
.dark-mode .tooltip-inner {
    background: rgba(10, 8, 30, 0.95) !important;
    color: var(--text-primary) !important;
}

.dark-mode .popover {
    background: rgba(10, 8, 30, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .popover-header {
    background: rgba(10, 8, 30, 0.9) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

.dark-mode .popover-body {
    color: var(--text-secondary) !important;
}

/* Accordions */
.dark-mode .accordion-item {
    background: rgba(10, 8, 30, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .accordion-button {
    background: rgba(10, 8, 30, 0.8) !important;
    color: var(--text-primary) !important;
}

.dark-mode .accordion-button:not(.collapsed) {
    background: rgba(10, 8, 30, 0.9) !important;
    color: var(--accent-3) !important;
}

/* Navs y Tabs */
.dark-mode .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .nav-tabs .nav-link {
    color: var(--text-secondary) !important;
}

.dark-mode .nav-tabs .nav-link:hover {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .nav-tabs .nav-link.active {
    background: rgba(10, 8, 30, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Offcanvas */
.dark-mode .offcanvas {
    background: rgba(10, 8, 30, 0.95) !important;
    color: var(--text-primary) !important;
}

.dark-mode .offcanvas-header {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Toast notifications - neon cyberpunk */
.dark-mode .toast {
    background: rgba(10, 8, 30, 0.95) !important;
    border: 1px solid rgba(0, 255, 245, 0.25) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 15px rgba(0, 255, 245, 0.1);
}

.dark-mode .toast-header {
    background: rgba(10, 8, 30, 0.9) !important;
    border-bottom-color: rgba(0, 255, 245, 0.15) !important;
    color: var(--text-primary) !important;
}

/* ========================================
   BOOTSTRAP UTILITIES - Override dark mode global
   Corrige .bg-light, .bg-white, .text-dark, .table-light
   que fuerzan colores claros en modo oscuro
   ======================================== */

/* bg-light: fondo sutil en dark mode */
.dark-mode .bg-light {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* bg-white: fondo card en dark mode */
.dark-mode .bg-white {
    background-color: var(--bg-card) !important;
}

/* text-dark: texto legible en dark mode */
.dark-mode .text-dark {
    color: var(--text-primary) !important;
}

/* table-light: thead y filas claras en dark mode */
.dark-mode .table-light,
.dark-mode .table-light th,
.dark-mode .table-light td,
.dark-mode thead.table-light,
.dark-mode thead.table-light th {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* input-group-text: addon de inputs en dark mode */
.dark-mode .input-group-text {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--text-secondary) !important;
}

/* ========================================
   NAV PILLS - Dark mode
   ======================================== */
.dark-mode .nav-pills .nav-link {
    color: var(--text-secondary) !important;
}

.dark-mode .nav-pills .nav-link:hover {
    color: var(--text-primary) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .nav-pills .nav-link.active {
    background-color: var(--accent-2) !important;
    color: #fff !important;
}

/* ========================================
   READONLY INPUTS - Dark mode
   ======================================== */
.dark-mode .form-control[readonly],
.dark-mode .form-control:disabled,
.dark-mode .form-control.bg-light {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-muted) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .form-select:disabled,
.dark-mode textarea:disabled {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-muted) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    cursor: not-allowed;
}

.dark-mode .btn:disabled,
.dark-mode .btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* ========================================
   CHECKBOXES & RADIOS - Dark mode
   ======================================== */
.dark-mode .form-check-input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.dark-mode .form-check-input:checked {
    background-color: var(--accent-2) !important;
    border-color: var(--accent-2) !important;
}

.dark-mode .form-check-label {
    color: var(--text-primary) !important;
}

/* ========================================
   SCROLLBARS - Dark mode neon cyberpunk
   ======================================== */
.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: rgba(10, 5, 32, 0.5);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00fff5, #ff00ff);
    border-radius: 10px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00fff5, #b400ff);
}

/* Firefox scrollbar dark mode */
.dark-mode * {
    scrollbar-width: thin;
    scrollbar-color: #00fff5 rgba(10, 5, 32, 0.5);
}

/* ========================================
   STAT-ICONS - Dark mode global
   Fondos más visibles + colores semánticos
   ======================================== */

.dark-mode .stat-icon {
    color: white !important;
}

.dark-mode .stat-icon.bg-primary {
    background: rgba(255, 0, 255, 0.25) !important;
    color: #ff00ff !important;
}

.dark-mode .stat-icon.bg-success {
    background: rgba(0, 255, 136, 0.25) !important;
    color: #00ff88 !important;
}

.dark-mode .stat-icon.bg-danger {
    background: rgba(255, 0, 85, 0.25) !important;
    color: #ff0055 !important;
}

.dark-mode .stat-icon.bg-warning {
    background: rgba(255, 170, 0, 0.25) !important;
    color: #ffaa00 !important;
}

.dark-mode .stat-icon.bg-info {
    background: rgba(0, 204, 255, 0.25) !important;
    color: #00ccff !important;
}

/* ========================================
   BOOTSTRAP COMPONENTS - Dark mode global
   Card headers, modals, forms, navs, etc.
   Centralizados desde vistas inline
   ======================================== */

/* Card header */
.dark-mode .card-header {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Modal components */
.dark-mode .modal-header {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .modal-title {
    color: var(--text-primary) !important;
}

.dark-mode .modal-body {
    background-color: var(--bg-card) !important;
}

.dark-mode .modal-footer {
    background-color: var(--bg-card) !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==============================================================================
   MODAL HEADER DESIGN SYSTEM - Borde izquierdo + icono coloreado
   ============================================================================== */
.modal-header[class*="mh-"] {
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,.1));
    border-left: 4px solid transparent;
    padding-left: 1.25rem;
}

.modal-header[class*="mh-"] .modal-title {
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-header[class*="mh-"] .modal-title i {
    font-size: 1.2rem;
}

/* Informativo (azul) - Historial, Costos, Resumen */
.mh-info { border-left-color: var(--chart-info) !important; }
.mh-info .modal-title i { color: var(--chart-info); }

/* Gestión/CRUD (morado) - Gestión Medidas, Micrajes, Unidades, Sellado, Materiales, Colores */
.mh-manage { border-left-color: var(--chart-purple) !important; }
.mh-manage .modal-title i { color: var(--chart-purple); }

/* Creación (verde) - Nuevo Cliente, Form Medida/Micraje */
.mh-create { border-left-color: var(--chart-success) !important; }
.mh-create .modal-title i { color: var(--chart-success); }

/* Herramientas (dorado) - Convertidores, Buscar, Comparar Precios */
.mh-tool { border-left-color: var(--chart-warning) !important; }
.mh-tool .modal-title i { color: var(--chart-warning); }

/* IA (gradiente cian-morado) - Asistente IA, Resultados IA */
.mh-ai { border-left-color: var(--chart-info) !important; border-image: linear-gradient(to bottom, var(--chart-info), var(--chart-purple)) 1; }
.mh-ai .modal-title i { color: var(--chart-info); }

/* Alerta (amber) - Advertencia, Sugerencia */
.mh-warn { border-left-color: var(--chart-warning) !important; }
.mh-warn .modal-title i { color: var(--chart-warning); }

/* Confirmación (rojo) */
.mh-danger { border-left-color: var(--chart-danger) !important; }
.mh-danger .modal-title i { color: var(--chart-danger); }

/* Dark mode: icon glow sutil */
.dark-mode .modal-header[class*="mh-"] .modal-title i {
    filter: drop-shadow(0 0 4px currentColor);
}

/* Botón Maximizar Modal */
.btn-modal-maximize {
    background: none;
    border: none;
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #6c757d);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: color .2s, background .2s, transform .2s;
    line-height: 1;
    margin-right: 0.25rem;
}

.btn-modal-maximize:hover {
    color: var(--chart-info);
    background: rgba(var(--chart-info-rgb, 13, 202, 240), 0.1);
    transform: scale(1.15);
}

.btn-modal-maximize.is-maximized i::before {
    content: "\F3B0";
}

.dark-mode .btn-modal-maximize:hover {
    background: rgba(var(--chart-info-rgb, 13, 202, 240), 0.2);
}

/* Form labels */
.dark-mode .form-label {
    color: var(--text-secondary) !important;
}

/* Form placeholder */
.dark-mode .form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.6;
}

/* Button light */
.dark-mode .btn-light {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Accordion body */
.dark-mode .accordion-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Dropdown divider */
.dark-mode .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Card title */
.dark-mode .card-title {
    color: var(--text-primary) !important;
}

/* Toast body */
.dark-mode .toast-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Pagination disabled */
.dark-mode .page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--text-muted) !important;
}

/* Nav links genéricos */
.dark-mode .nav-link {
    color: var(--text-secondary) !important;
}

.dark-mode .nav-link:hover {
    color: var(--text-primary) !important;
}

.dark-mode .nav-link.active {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Bootstrap text utilities dark mode */
.dark-mode .text-primary {
    color: var(--chart-primary) !important;
}

.dark-mode .text-secondary {
    color: var(--text-muted) !important;
}

.dark-mode .text-success {
    color: var(--chart-success) !important;
}

.dark-mode .text-warning {
    color: var(--chart-warning) !important;
}

.dark-mode .text-info {
    color: var(--chart-info) !important;
}

/* Border utility */
.dark-mode .border {
    border-color: var(--border-color) !important;
}

/* Select2 plugin dark mode */
.dark-mode .select2-container--default .select2-selection--single {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .select2-container--default .select2-results__option {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.dark-mode .select2-container--default .select2-results__option--highlighted {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ========================================
   FALLBACK: Navegadores sin backdrop-filter
   ======================================== */
@supports not (backdrop-filter: blur(1px)) {
    :root {
        --bg-card: rgba(255, 255, 255, 0.98);
    }
    .dark-mode {
        --bg-card: rgba(10, 8, 30, 0.95);
    }
    #globalLoadingOverlay {
        background: rgba(0, 0, 0, 0.95);
    }
}

/* ========================================
   HERRAMIENTAS - Iconos visibles en modo oscuro
   ======================================== */

.dark-mode .herramienta-icon i {
    color: #1e293b !important;
}

.dark-mode .bg-primary-subtle {
    background-color: rgba(219, 234, 254, 0.9) !important;
}

.dark-mode .bg-success-subtle {
    background-color: rgba(220, 252, 231, 0.9) !important;
}

.dark-mode .bg-warning-subtle {
    background-color: rgba(254, 243, 199, 0.9) !important;
}

.dark-mode .bg-info-subtle {
    background-color: rgba(224, 242, 254, 0.9) !important;
}

/* Asegurar que text-danger use variable global */
.dark-mode .text-danger {
    color: var(--color-danger) !important;
}

/* ========================================
   MENSAJERÍA - Corregir colores de botones
   Usar variables globales en lugar de hardcoded
   ======================================== */

/* Botón Redactar - Usar verde esmeralda */
.btn-epic {
    background: linear-gradient(135deg, var(--accent-3) 0%, var(--color-success) 100%) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3) !important;
}

.btn-epic:hover {
    box-shadow: 0 12px 25px rgba(16, 185, 129, 0.4) !important;
}

/* Botón Bandeja activo - Usar verde esmeralda */
.msg-sidebar-link.active {
    background: linear-gradient(135deg, var(--accent-3), var(--color-success)) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
}

/* MODO OSCURO - Colores neon cyberpunk */
.dark-mode .btn-epic {
    background: linear-gradient(135deg, #0a0520 0%, #150a35 100%) !important;
    box-shadow: 0 8px 20px rgba(0, 255, 245, 0.15) !important;
    border: 1px solid rgba(0, 255, 245, 0.25);
}

.dark-mode .btn-epic:hover {
    background: linear-gradient(135deg, #150a35 0%, #1a0845 100%) !important;
    box-shadow: 0 12px 25px rgba(0, 255, 245, 0.25) !important;
}

.dark-mode .msg-sidebar-link.active {
    background: linear-gradient(135deg, #0a0520, #150a35) !important;
    box-shadow: 0 4px 15px rgba(255, 0, 255, 0.2) !important;
}

/* ========================================
   SERVICIO MÁQUINA - Botón Nueva Orden
   Usar variables globales
   ======================================== */

/* Estilos base */
.btn-new-order {
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
    text-decoration: none;
    background: linear-gradient(135deg, var(--accent-3) 0%, var(--color-success) 100%) !important;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35) !important;
}

.btn-new-order:hover {
    transform: translateY(-2px);
    color: white;
}

/* Modo noche - Neon cyberpunk */
.dark-mode .btn-new-order {
    background: linear-gradient(135deg, #0a0520 0%, #150a35 100%) !important;
    box-shadow: 0 8px 20px rgba(0, 255, 136, 0.2) !important;
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.dark-mode .btn-new-order:hover {
    background: linear-gradient(135deg, #150a35 0%, #1a0845 100%) !important;
    box-shadow: 0 12px 25px rgba(0, 255, 136, 0.35) !important;
}

/* ========================================
   🎨 OVERRIDE DE BADGES BOOTSTRAP
   ======================================== */

/* Sobrescribir badges warning de Bootstrap */
.badge.bg-warning {
    background-color: var(--color-warning) !important;
    color: white !important;
    box-shadow: none !important;
    border: none !important;
}

.dark-mode .badge.bg-warning {
    background-color: var(--color-warning) !important;
    color: var(--bg-primary) !important;
}

/* Asegurar que todos los badges tengan buen contraste */
.dark-mode .badge {
    color: var(--bg-primary) !important;
}

/* Eliminar efectos de brillo/glow en badges - solo modo dia */
:root:not(.dark-mode) .badge,
:root:not(.dark-mode) .metric-badge-compact,
body:not(.dark-mode) .badge,
body:not(.dark-mode) .metric-badge-compact {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ===== FASE 9: Estandarización de componentes ===== */

/* Spacing uniforme de iconos dentro de botones */
.btn > .bi + span,
.btn > .bi + small,
.btn > i.bi {
    vertical-align: middle;
}

.btn > .bi:not(:only-child),
.btn > .fas:not(:only-child),
.btn > .far:not(:only-child),
.btn > .fa:not(:only-child) {
    margin-right: 0.35rem;
}

/* Contenedores de tabla scrolleables para sticky headers */
.table-responsive,
.table-container {
    max-height: 65vh;
    overflow-y: auto;
}

/* ==============================================================================
   EMPTY STATES - Reutilizable en todo el ERP
   ============================================================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 2.5rem;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: var(--skeleton-base);
    color: var(--text-muted);
    opacity: 0.7;
}

.empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.empty-state-description {
    font-size: 0.825rem;
    color: var(--text-muted);
    max-width: 280px;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    font-size: 0.825rem;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(135deg, var(--accent-2), var(--accent-1));
    color: white;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.empty-state-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: white;
}

/* Variante compacta para tablas */
.empty-state-compact {
    padding: 1.5rem 1rem;
}

.empty-state-compact .empty-state-icon {
    font-size: 1.75rem;
    width: 50px;
    height: 50px;
    margin-bottom: 0.75rem;
}

.empty-state-compact .empty-state-title {
    font-size: 0.875rem;
}

.empty-state-compact .empty-state-description {
    font-size: 0.775rem;
    margin-bottom: 0.75rem;
}

/* ==============================================================================
   SKELETON LOADING - Reutilizable en todo el ERP
   ============================================================================== */

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg,
            var(--skeleton-base) 25%,
            var(--skeleton-shine) 50%,
            var(--skeleton-base) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

/* Variantes de forma */
.skeleton-text {
    height: 0.875rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.skeleton-text-sm {
    height: 0.7rem;
    width: 60%;
}

.skeleton-text-lg {
    height: 1.5rem;
    width: 40%;
}

.skeleton-circle {
    border-radius: 50%;
}

.skeleton-card {
    min-height: 80px;
    border-radius: 12px;
}

/* Skeleton para filas de tabla */
.skeleton-row td {
    padding: 0.75rem 0.5rem;
}

.skeleton-row .skeleton {
    height: 0.875rem;
    display: block;
}

/* Variables de color - modo claro */
:root {
    --skeleton-base: rgba(0, 0, 0, 0.08);
    --skeleton-shine: rgba(0, 0, 0, 0.15);
}

/* Variables de color - modo oscuro */
.dark-mode {
    --skeleton-base: rgba(255, 255, 255, 0.08);
    --skeleton-shine: rgba(255, 255, 255, 0.15);
}

/* ==============================================================================
   TOAST CON UNDO - Tendencia 2025-2026
   ============================================================================== */

@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.erp-toast-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    color: var(--text-primary);
    font-size: 0.875rem;
    position: relative;
    overflow: hidden;
    min-width: 320px;
    max-width: 480px;
    animation: toast-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0.5rem;
}

.erp-toast-modern.hiding {
    animation: toast-slide-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.dark-mode .erp-toast-modern {
    border: 1px solid rgba(0, 255, 245, 0.2);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 255, 245, 0.1);
}

/* Borde izquierdo de color según tipo */
.erp-toast-modern.toast-success {
    border-left: 3px solid var(--color-success);
}

.erp-toast-modern.toast-danger {
    border-left: 3px solid var(--color-danger);
}

.erp-toast-modern.toast-warning {
    border-left: 3px solid var(--color-warning);
}

.erp-toast-modern.toast-info {
    border-left: 3px solid var(--accent-2);
}

.erp-toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.erp-toast-icon.success { color: var(--color-success); }
.erp-toast-icon.danger { color: var(--color-danger); }
.erp-toast-icon.warning { color: var(--color-warning); }
.erp-toast-icon.info { color: var(--accent-2); }

.erp-toast-message {
    flex: 1;
    font-weight: 500;
    line-height: 1.3;
}

.erp-toast-undo {
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--accent-2);
    font-weight: 700;
    font-size: 0.825rem;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
    font-family: inherit;
}

.erp-toast-undo:hover {
    background: var(--skeleton-base);
}

.erp-toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s ease;
}

.erp-toast-close:hover {
    color: var(--text-primary);
}

/* Progress bar countdown */
.erp-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 12px 12px;
    transition: width linear;
}

.erp-toast-progress.success { background: var(--color-success); }
.erp-toast-progress.danger { background: var(--color-danger); }
.erp-toast-progress.warning { background: var(--color-warning); }
.erp-toast-progress.info { background: var(--accent-2); }

@media (max-width: 576px) {
    .erp-toast-modern {
        min-width: unset;
        max-width: calc(100vw - 2rem);
    }
}

/* ============================================
   CHAT EN TIEMPO REAL - Estilos
   ============================================ */

/* Tabs del modal Estado */
.chat-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin: 0 -1rem;
    padding: 0 1rem;
}
.chat-tab-btn {
    flex: 1;
    padding: 0.55rem 0.5rem;
    border: none;
    background: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.chat-tab-btn:hover {
    color: var(--accent-1);
}
.chat-tab-btn.active {
    color: var(--accent-1);
    border-bottom-color: var(--accent-1);
}
.chat-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--accent-1);
    color: #fff;
    margin-left: 4px;
}
.chat-tab-content { display: none; }
.chat-tab-content.active { display: block; }

/* Lista de conversaciones */
.chat-conv-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-conv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.chat-conv-item:hover {
    background: var(--table-hover);
}
.chat-conv-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}
.chat-conv-info {
    flex: 1;
    min-width: 0;
}
.chat-conv-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-conv-last {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.chat-conv-meta {
    text-align: right;
    flex-shrink: 0;
}
.chat-conv-time {
    font-size: 0.65rem;
    color: var(--text-muted);
}
.chat-conv-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.62rem;
    font-weight: 700;
    background: var(--accent-1);
    color: #fff;
    margin-top: 2px;
}

/* Botón chat en cada empleado */
.btn-chat-empleado {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--accent-1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    font-size: 0.8rem;
    padding: 0;
}
.btn-chat-empleado:hover {
    background: var(--accent-1);
    color: #fff;
    border-color: var(--accent-1);
}

/* Botón crear grupo */
.btn-nuevo-grupo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: none;
    color: var(--accent-1);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
}
.btn-nuevo-grupo:hover {
    background: var(--table-hover);
    border-style: solid;
}

/* Modal Chat (segundo modal) */
#modalChat .modal-content {
    height: 80vh;
    max-height: 600px;
    display: flex;
    flex-direction: column;
}
#modalChat .modal-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
    gap: 10px;
}
#modalChat .chat-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
}
#modalChat .chat-header-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}
#modalChat .chat-header-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Área de mensajes */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Burbujas */
.chat-bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}
.chat-bubble-wrap.sent {
    align-self: flex-end;
    align-items: flex-end;
}
.chat-bubble-wrap.received {
    align-self: flex-start;
    align-items: flex-start;
}
.chat-sender-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--accent-1);
    margin-bottom: 1px;
    padding-left: 10px;
}
.chat-bubble {
    padding: 8px 13px;
    border-radius: 16px;
    font-size: 0.82rem;
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
}
.chat-bubble-wrap.sent .chat-bubble {
    background: var(--accent-1);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-bubble-wrap.received .chat-bubble {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 4px;
    backdrop-filter: blur(6px);
}
.chat-bubble-time {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 1px;
    padding: 0 6px;
}

/* Input de chat */
.chat-input-area {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
}
.chat-input-area input {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.82rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}
.chat-input-area input:focus {
    border-color: var(--accent-1);
}
.chat-input-area input::placeholder {
    color: var(--text-muted);
}
.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--accent-1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
.chat-send-btn:hover {
    opacity: 0.85;
}
.chat-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Formulario crear grupo */
.chat-crear-grupo {
    padding: 10px 0;
}
.chat-crear-grupo input[type="text"] {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.82rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    margin-bottom: 8px;
}
.chat-crear-grupo input[type="text"]:focus {
    border-color: var(--accent-1);
}
.chat-grupo-usuarios {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}
.chat-grupo-usuario-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.8rem;
}
.chat-grupo-usuario-item:hover {
    background: var(--table-hover);
}
.chat-grupo-usuario-item input[type="checkbox"] {
    accent-color: var(--accent-1);
}
.chat-grupo-acciones {
    display: flex;
    gap: 6px;
}
.chat-grupo-acciones button {
    flex: 1;
    padding: 7px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.chat-grupo-acciones .btn-crear-grupo-confirm {
    background: var(--accent-1);
    color: #fff;
    border-color: var(--accent-1);
}
.chat-grupo-acciones .btn-crear-grupo-confirm:hover {
    opacity: 0.85;
}
.chat-grupo-acciones .btn-crear-grupo-cancel {
    background: none;
    color: var(--text-muted);
}

/* Badge no leídos en FAB */
.chat-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.62rem;
    font-weight: 700;
    background: #ef4444;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
}

/* Separador de fecha en mensajes */
.chat-date-sep {
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-muted);
    padding: 8px 0;
}
.chat-date-sep span {
    background: var(--bg-primary);
    padding: 3px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

/* Chat vacío */
.chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 0.82rem;
    gap: 8px;
}
.chat-empty i {
    font-size: 2rem;
    opacity: 0.4;
}

/* Back button en modal chat */
.btn-chat-back {
    border: none;
    background: none;
    color: var(--accent-1);
    cursor: pointer;
    padding: 4px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}
.btn-chat-back:hover {
    opacity: 0.7;
}

/* Dark mode ajustes específicos */
.dark-mode .chat-bubble-wrap.received .chat-bubble {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}
.dark-mode .chat-bubble-wrap.sent .chat-bubble {
    background: var(--accent-1);
}
.dark-mode .chat-date-sep span {
    background: var(--bg-card);
    border-color: rgba(255, 255, 255, 0.08);
}
.dark-mode .btn-chat-empleado {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}
.dark-mode .btn-chat-empleado:hover {
    background: var(--accent-1);
    color: #fff;
}
.dark-mode .chat-conv-item:hover {
    background: rgba(255, 255, 255, 0.04);
}
.dark-mode .btn-nuevo-grupo {
    border-color: rgba(255, 255, 255, 0.12);
}
.dark-mode .btn-nuevo-grupo:hover {
    background: rgba(255, 255, 255, 0.04);
}
.dark-mode .chat-grupo-usuario-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Responsive */
@media (max-width: 576px) {
    #modalChat .modal-content {
        height: 95vh;
        max-height: none;
    }
    .chat-bubble-wrap {
        max-width: 88%;
    }
}

/* ========================================
   RECORDATORIOS - Badge animado
   ======================================== */
.animate-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

/* ============================================================
   ESTADO DEL EQUIPO - SALA DE CONTROL
   Rediseño del widget con KPIs, agrupacion por cargo,
   cronometros vivos y headers colapsables
   ============================================================ */

/* --- Chips KPI (filtros por estado) --- */
.estado-kpis {
    display: flex;
    gap: 6px;
    padding: 12px 14px 8px;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    position: sticky;
    top: 0;
    z-index: 3;
}
.estado-kpis::-webkit-scrollbar { height: 4px; }
.estado-kpis::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

.estado-kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.estado-kpi-chip:hover {
    border-color: var(--text-muted);
    transform: translateY(-1px);
}
.estado-kpi-chip.activo {
    border-color: var(--color-primary, #6366f1);
    background: var(--color-primary, #6366f1);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, .3);
}
.estado-kpi-chip.activo .kpi-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.estado-kpi-chip .kpi-num { font-weight: 700; font-size: 0.85rem; }
.estado-kpi-chip .kpi-lbl { opacity: .85; }
.kpi-dot {
    width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.kpi-all { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.kpi-success { background: #10b981; }
.kpi-info { background: #06b6d4; }
.kpi-warning { background: #f59e0b; }
.kpi-danger { background: #ef4444; }
.kpi-secondary { background: #94a3b8; }

/* --- Toolbar: busqueda + selector de agrupacion --- */
.estado-toolbar {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    position: sticky;
    top: 52px;
    z-index: 2;
    align-items: center;
    flex-wrap: wrap;
}
.estado-search {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.estado-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.9rem;
}
.estado-search input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: border-color .15s;
}
.estado-search input:focus {
    outline: none;
    border-color: var(--color-primary, #6366f1);
}
.estado-group-select {
    display: flex;
    align-items: center;
    gap: 6px;
}
.estado-group-select .form-select {
    min-width: 110px;
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* --- Banner de alertas --- */
.estado-alertas {
    margin: 10px 14px;
    border-radius: 10px;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .35);
    padding: 8px 12px;
}
.estado-alerta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ef4444;
    font-size: 0.82rem;
    padding: 3px 0;
}
.estado-alerta-item i { font-size: 0.95rem; }

/* --- Grupos colapsables --- */
.estado-grupos { padding: 6px 0 14px; }

.estado-grupo {
    border-bottom: 1px solid var(--border-color);
}
.estado-grupo:last-child { border-bottom: none; }

.estado-grupo-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--bg-card);
    border: none;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    position: sticky;
    top: 104px;
    z-index: 1;
    text-align: left;
    border-top: 1px solid var(--border-color);
}
.estado-grupo-header:hover { background: var(--table-hover); }
.estado-grupo-chevron {
    transition: transform .2s;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.estado-grupo.colapsado .estado-grupo-chevron { transform: rotate(-90deg); }
.estado-grupo.colapsado .estado-grupo-body { display: none; }

.estado-grupo-titulo { text-transform: uppercase; letter-spacing: .03em; }
.estado-grupo-count { color: var(--text-muted); font-weight: 500; }
.estado-grupo-stats {
    margin-left: auto;
    display: flex;
    gap: 4px;
}
.grupo-stat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
}
.grupo-stat-success { background: #10b981; }
.grupo-stat-info { background: #06b6d4; }
.grupo-stat-warning { background: #f59e0b; }
.grupo-stat-danger { background: #ef4444; }
.grupo-stat-secondary { background: #94a3b8; }

/* --- Filas de empleado --- */
.estado-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    transition: background .15s;
}
.estado-fila:hover { background: var(--table-hover); }
.estado-fila.fila-alerta {
    background: rgba(239, 68, 68, .06);
    border-left: 3px solid #ef4444;
}

.estado-avatar-v2 {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}
.estado-avatar-v2 img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--search-border);
}
.estado-avatar-v2 .avatar-iniciales {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--search-border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}
.estado-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}
.estado-dot-success { background: #10b981; }
.estado-dot-info { background: #06b6d4; }
.estado-dot-warning { background: #f59e0b; }
.estado-dot-danger { background: #ef4444; }
.estado-dot-secondary { background: #94a3b8; }

.estado-info-v2 {
    flex: 1;
    min-width: 0;
}
.estado-nombre-v2 {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.estado-meta-v2 {
    font-size: 0.74rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.estado-acciones-v2 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.estado-badge-v2 {
    font-size: 0.7rem;
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}
.estado-badge-v2.b-success { background: rgba(16, 185, 129, .15); color: #10b981; border: 1px solid rgba(16, 185, 129, .35); }
.estado-badge-v2.b-info { background: rgba(6, 182, 212, .15); color: #06b6d4; border: 1px solid rgba(6, 182, 212, .35); }
.estado-badge-v2.b-warning { background: rgba(245, 158, 11, .15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, .35); }
.estado-badge-v2.b-danger { background: rgba(239, 68, 68, .15); color: #ef4444; border: 1px solid rgba(239, 68, 68, .35); }
.estado-badge-v2.b-secondary { background: rgba(148, 163, 184, .15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, .35); }

.estado-crono {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    background: var(--bg-input, transparent);
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}
.estado-crono.crono-warn { color: #f59e0b; border-color: rgba(245, 158, 11, .4); }
.estado-crono.crono-danger {
    color: #ef4444;
    border-color: rgba(239, 68, 68, .5);
    background: rgba(239, 68, 68, .08);
    animation: pulse 1.6s ease-in-out infinite;
}

/* Modo oscuro: refuerzos donde el fondo del header sticky necesita ser opaco */
.dark-mode .estado-kpis,
.dark-mode .estado-toolbar,
.dark-mode .estado-grupo-header {
    background: var(--bg-card);
}
.dark-mode .estado-avatar-v2 .estado-dot { border-color: var(--bg-card); }

/* Responsive: en mobile la toolbar pasa a 2 filas */
@media (max-width: 540px) {
    .estado-toolbar { flex-direction: column; align-items: stretch; }
    .estado-group-select { justify-content: space-between; }
    .estado-grupo-header { top: 138px; }
}

/* ==========================================================================
   APP LAUNCHER - Menu de aplicaciones en grilla (agrupado por area)
   Convive con el sidebar. Se renderiza server-side, asi respeta permisos.
   ========================================================================== */
.applnch-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 1rem 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    overflow-y: auto;
}
.applnch-overlay.active { opacity: 1; visibility: visible; }
.dark-mode .applnch-overlay { background: rgba(0, 0, 0, 0.88); }

.applnch-panel {
    width: 100%;
    max-width: 920px;
    background: var(--bg-card);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 25px 60px var(--shadow-lg);
    transform: translateY(-12px) scale(0.98);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.applnch-overlay.active .applnch-panel { transform: translateY(0) scale(1); }

.applnch-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.applnch-search-icon { color: var(--text-secondary); font-size: 1.1rem; flex-shrink: 0; }
.applnch-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    outline: none;
}
.applnch-close {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}
.applnch-close:hover { color: var(--text-primary); }

.applnch-profile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.applnch-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-2);
    box-shadow: 0 0 14px var(--shadow);
    flex-shrink: 0;
}
.applnch-profile-info { display: flex; flex-direction: column; min-width: 0; }
.applnch-profile-info h6 {
    margin: 0;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.applnch-profile-info small { color: var(--text-muted); line-height: 1.3; }
.applnch-profile-email {
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.applnch-body { padding: 1.25rem; max-height: 70vh; overflow-y: auto; }

.applnch-group { margin-bottom: 1.5rem; }
.applnch-group:last-child { margin-bottom: 0; }
.applnch-group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.85rem;
}

.applnch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.75rem;
}

.applnch-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 16px;
    text-decoration: none;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    text-align: center;
}
.dark-mode .applnch-tile { background: rgba(255, 255, 255, 0.05); }
.applnch-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px var(--shadow);
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-primary);
}
.dark-mode .applnch-tile:hover { background: rgba(255, 255, 255, 0.10); }

.applnch-tile-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-2), var(--accent-1));
    flex-shrink: 0;
}
.applnch-tile-label { font-size: 0.78rem; font-weight: 600; line-height: 1.2; }

.applnch-empty {
    display: none;
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 1rem;
}

.applnch-trigger {
    background: transparent;
    border: none;
    color: var(--sidebar-text);
    padding: 0;
    cursor: pointer;
    display: none; /* visible solo en modo aplicaciones (.nav-apps) */
    align-items: center;
}
.nav-apps .applnch-trigger { display: inline-flex; }
.applnch-trigger:hover { color: var(--sidebar-text); opacity: 0.85; }

/* Selector de vista Lista / Aplicaciones (en el header, junto al botón Menú) */
.navmode-switch {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
}
.navmode-opt {
    border: none;
    background: transparent;
    color: var(--sidebar-text);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.navmode-opt.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 2px 6px var(--shadow);
}
@media (max-width: 600px) {
    .navmode-opt span { display: none; }
    .navmode-opt { padding: 0.3rem 0.5rem; }
}

@media (max-width: 560px) {
    .applnch-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
    .applnch-overlay { padding-top: 4vh; }
    .applnch-tile-icon { width: 42px; height: 42px; font-size: 1.2rem; }
}

/* Modo de navegación "Aplicaciones": sin sidebar, contenido a todo ancho.
   La clase .nav-apps se aplica en <html> ANTES de pintar (igual que .dark-mode),
   asi no hay parpadeo ni salto de layout. Se navega con el App Launcher (boton ⊞). */
.nav-apps .sidebar,
.nav-apps .sidebar-auto-expand-toggle,
.nav-apps .sidebar-manual-toggle,
.nav-apps #sidebarToggle { display: none !important; }
.nav-apps .main-content { margin-left: 0 !important; }