/* ==========================================================================
           ESTRUCTURA DE LA PLANTILLA - MODO OSCURO GLOBAL
           ========================================================================== */
        body {
            background-color: #07090e !important;
            background-image: 
                radial-gradient(circle at 50% -10%, rgba(14, 165, 233, 0.16) 0%, transparent 60%),
                radial-gradient(circle at 90% 85%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
                linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
            background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px !important;
            background-attachment: fixed !important;
            color: #f1f5f9 !important;
        }

        /* ==========================================================================
           SWEETALERT2 GLOBAL: SIEMPRE AL FRENTE DE TODO (Z-INDEX MÁXIMO)
           ========================================================================== */
        .swal2-container {
            z-index: 999999 !important;
            pointer-events: none;
        }
        .swal2-container.swal2-backdrop-show,
        .swal2-container.swal2-noanimation {
            pointer-events: auto;
        }
        .swal2-popup {
            pointer-events: auto;
        }
        .swal2-popup.swal-custom-dark {
            background: #161b22 !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            color: #ffffff !important;
            border-radius: 16px !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
            z-index: 1000000 !important;
        }
        .swal-custom-dark .swal2-title {
            color: #ffffff !important;
        }
        .swal-custom-dark .swal2-html-container {
            color: #cbd5e1 !important;
        }
        .swal2-toast.swal-custom-toast {
            background: #1e293b !important;
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
            z-index: 1000000 !important;
            pointer-events: auto !important;
        }
        .swal-custom-toast .swal2-title {
            color: #ffffff !important;
            font-size: 0.95rem !important;
        }
        .swal2-container.swal2-bottom-end,
        .swal2-container.swal2-bottom-right {
            bottom: 20px !important;
            right: 20px !important;
            z-index: 1000000 !important;
        }
        
        .sidebar {
            position: fixed !important;
            top: 0;
            left: 0;
            bottom: 0;
            width: 300px;
            max-width: 85vw;
            z-index: 1050;
            transform: translateX(-105%);
            transition: transform 0.25s ease;
            background: transparent !important;
        }

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

        .sidebar .sidebar-panel {
            height: 100vh;
            border-radius: 0 18px 18px 0;
        }

        .sidebar-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(2px);
            z-index: 1040;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        .sidebar-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

        .main-content {
            min-height: 100vh;
        }

        .sidebar-panel.collapsed {
            padding: 1rem 0.5rem !important;
        }

        .sidebar-panel.collapsed .sidebar-brand {
            justify-content: center;
        }

        .sidebar-logo {
            filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
        }

        .auth-brand {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: min(100%, 420px);
            min-height: 150px;
            padding: 1rem;
            border-radius: 18px;
            background: rgba(8, 12, 20, 0.32);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
        }

        .auth-brand img {
            max-width: 100%;
            max-height: 110px;
            object-fit: contain;
            filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
        }

        .sidebar-panel.collapsed .sidebar-toggle {
            margin-left: auto;
            margin-right: auto;
        }

        .card-custom {
            background: #0d121f !important;
            border: 1px solid rgba(56, 189, 248, 0.16) !important;
            border-radius: 14px !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .auth-card {
            background: #0d121f !important;
            border: 1px solid rgba(56, 189, 248, 0.22) !important;
            border-radius: 18px !important;
            box-shadow: inset 0 1px 0 rgba(56, 189, 248, 0.15), 0 20px 50px rgba(0, 0, 0, 0.7) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .auth-card .card-body {
            padding: 2rem !important;
            border-radius: 18px;
            background: transparent !important;
        }

        .auth-card .form-control,
        .auth-card .input-group .btn,
        .auth-card .nav-tabs .nav-link {
            border-radius: 10px;
        }

        .auth-card .form-control {
            background: #080d18 !important;
            border: 1px solid rgba(56, 189, 248, 0.2) !important;
            color: #ffffff !important;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
        }

        .auth-card .form-control:focus {
            border-color: #38bdf8 !important;
            background: #0a1120 !important;
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
        }

        .auth-card .input-group .btn {
            border-left: 0;
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
        }

        .auth-card .nav-tabs {
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        }

        .auth-card .nav-tabs .nav-link {
            color: #d8e0ec;
            background: transparent;
            border: 1px solid transparent;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .auth-card .nav-tabs .nav-link:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.04);
        }

        .auth-card .nav-tabs .nav-link.active {
            color: #ffffff;
            background: linear-gradient(180deg, #0d6efd, #0a57d5);
            border-color: #0d6efd #0d6efd transparent;
            box-shadow: 0 6px 16px rgba(13, 110, 253, 0.35);
        }

        .auth-card .btn-primary,
        .auth-card .btn-success {
            border-radius: 14px;
            font-weight: 700;
            letter-spacing: 0.3px;
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
        }

        /* ==========================================================================
           APLICACIÓN MASIVA DE BLANCO ABSOLUTO (SELECTORES DE ALTA ESPECIFICIDAD)
           ========================================================================== */

        /* Romper grises en textos secundarios, alertas vacías y pies de página */
        p, small, span, td, th, label, .text-muted, .text-white-50, .text-light-50 {
            color: #ffffff !important;
        }

        /* Forzar blanco en todo el árbol de navegación del Sidebar */
        .sidebar a, 
        .sidebar span, 
        .sidebar i, 
        .nav-link {
            color: #ffffff !important;
        }

        /* Mantener azul el módulo seleccionado de la barra lateral */
        .nav-pills .nav-link.active, 
        .nav-pills .nav-link.active * {
            background-color: #0d6efd !important;
            color: #ffffff !important;
        }

        /* Efecto de selección sutil al pasar el mouse */
        .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
        }

        /* ==========================================================================
           ESTILOS ULTRA-ESPECÍFICOS PARA CONTENEDORES MODALES Y FORMULARIOS
           ========================================================================== */

        /* Garantizar visibilidad de títulos, etiquetas y avisos dentro del modal */
        .modal,
        .modal-dialog,
        .modal-content,
        .modal-header,
        .modal-title,
        .modal-body,
        .modal-body label,
        .modal-body .form-label,
        .modal-body .form-text,
        .modal-body small {
            color: #ffffff !important;
        }

        /* Configuración de las casillas de entrada (inputs) de texto */
        .form-control, 
        .form-select, 
        input, 
        select, 
        textarea {
            color: #ffffff !important;
            background-color: rgba(255, 255, 255, 0.08) !important;
            border: 1px solid #30363d !important;
        }

        /* Asegurar que el texto que escribe el usuario se renderice en blanco puro */
        .form-control:focus, 
        input:focus, 
        select:focus {
            color: #ffffff !important;
            background-color: rgba(255, 255, 255, 0.12) !important;
        }

        /* Color claro y nítido para los placeholders de ejemplo */
        .form-control::placeholder, 
        input::placeholder {
            color: #cbd5e1 !important;
            opacity: 1 !important;
        }

        /* ==========================================================================
   CORRECCIÓN PARA CAJAS DE SELECCIÓN (SELECT / OPTION)
   ========================================================================== */

/* Forzar que las opciones desplegables tengan fondo claro y letra negra */
select option,
.form-select option,
.modal-content select option {
    color: #212529 !important;
    background-color: #ffffff !important;
}

/* Por si acaso el navegador Chromium toma el focus del select con letras oscuras */
select:focus option {
    color: #212529 !important;
    background-color: #ffffff !important;
}

        /* Botón de cerrar (X) del modal en blanco */
        .btn-close {
            filter: invert(1) !important;
        }

        /* ==========================================================================
           EXCEPCIONES OBLIGATORIAS (ALERTAS ROJAS Y FILAS CLARAS)
           ========================================================================== */

        /* Rescatar el color rojo de los asteriscos obligatorios */
        .text-danger, 
        .text-danger *, 
        span[style*="color: red"], 
        span[style*="color:red"] {
            color: #ff4d4d !important;
        }

        /* ==========================================================================
           REGLA UNIVERSAL DE ALTO CONTRASTE: TEXTO NEGRO EN FONDOS CLAROS Y BADGES
           ========================================================================== */
        .table-light, 
        .table-light th, 
        .table-light td, 
        .table-light *,
        .bg-light,
        .bg-white,
        .bg-secondary-subtle,
        .bg-light-subtle,
        .bg-warning-subtle,
        .bg-info-subtle,
        .bg-success-subtle,
        .badge.bg-light,
        .badge.bg-white,
        .badge.bg-secondary-subtle,
        .badge.bg-light-subtle,
        .badge.bg-warning,
        .badge.bg-warning-subtle,
        .badge.bg-info,
        .badge.bg-info-subtle,
        .badge.bg-success,
        .badge.bg-success-subtle,
        .badge-light,
        .btn-light,
        .table-warning,
        .table-warning td,
        .table-warning th,
        .table-warning *,
        .text-dark {
            color: #111827 !important;
        }

        .badge.bg-warning,
        .badge.bg-warning-subtle,
        .badge.bg-info,
        .badge.bg-info-subtle,
        .badge.bg-secondary-subtle,
        .badge.bg-light,
        .badge.bg-white {
            color: #0f172a !important;
            font-weight: 700 !important;
        }

        .badge.bg-secondary-subtle *,
        .badge.bg-light *,
        .badge.bg-white *,
        .badge.bg-warning * {
            color: #0f172a !important;
        }

        /* ==========================================================================
           TABLAS MODERNAS Y RESPONSIVE
           ========================================================================== */
        .table {
            --bs-table-bg: transparent !important;
            --bs-table-striped-bg: rgba(255, 255, 255, 0.02) !important;
            --bs-table-hover-bg: rgba(14, 165, 233, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.06) !important;
        }

        .table thead th {
            background: rgba(15, 23, 42, 0.95) !important;
            color: #94a3b8 !important;
            font-family: 'Outfit', sans-serif !important;
            font-weight: 600 !important;
            text-transform: uppercase !important;
            font-size: 0.74rem !important;
            letter-spacing: 0.06em !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
            padding: 0.85rem 0.9rem !important;
            white-space: nowrap !important;
            vertical-align: middle;
        }

        .table tbody td {
            padding: 0.85rem 0.9rem !important;
            vertical-align: middle !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
            color: #e2e8f0 !important;
        }

        .table-responsive {
            position: relative;
            border-radius: 14px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: rgba(14, 165, 233, 0.4) rgba(15, 23, 42, 0.6);
        }

        .table-responsive::-webkit-scrollbar {
            height: 6px;
        }
        .table-responsive::-webkit-scrollbar-track {
            background: rgba(15, 23, 42, 0.6);
            border-radius: 999px;
        }
        .table-responsive::-webkit-scrollbar-thumb {
            background: linear-gradient(90deg, #0ea5e9, #2563eb);
            border-radius: 999px;
        }

        /* Indicador móvil para sugerir scroll */
        .mobile-table-hint {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.76rem;
            font-weight: 500;
            color: #94a3b8;
            background: rgba(14, 165, 233, 0.08);
            border: 1px solid rgba(14, 165, 233, 0.22);
            border-radius: 20px;
            padding: 0.35rem 0.75rem;
            margin-bottom: 0.65rem;
        }

        /* DataTables controles oscuros y estilizados */
        .dataTables_wrapper .dataTables_filter input {
            background: rgba(15, 23, 42, 0.85) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            border-radius: 10px !important;
            color: #ffffff !important;
            padding: 0.35rem 0.75rem !important;
            font-size: 0.85rem !important;
        }
        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: #0ea5e9 !important;
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25) !important;
            outline: none !important;
        }
        .dataTables_wrapper .dataTables_length select {
            background-color: #1e293b !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            border-radius: 8px !important;
            color: #ffffff !important;
            padding: 0.3rem 0.5rem !important;
        }
        .dataTables_wrapper .dataTables_info {
            color: #94a3b8 !important;
            font-size: 0.82rem !important;
            padding-top: 0.75rem !important;
        }
        .dataTables_wrapper .dataTables_paginate {
            padding-top: 0.75rem !important;
        }
        .dataTables_wrapper .dataTables_paginate .pagination {
            gap: 4px;
        }
        .dataTables_wrapper .dataTables_paginate .page-item .page-link {
            background: rgba(15, 23, 42, 0.6) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            color: #94a3b8 !important;
            border-radius: 8px !important;
            padding: 0.3rem 0.65rem !important;
            font-size: 0.82rem !important;
        }
        .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
            background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
            border-color: transparent !important;
            color: #ffffff !important;
            font-weight: 600;
            box-shadow: 0 2px 10px rgba(14, 165, 233, 0.4);
        }

        /* ==========================================================================
           REGLAS RESPONSIVE MÓVIL (TELÉFONOS)
           ========================================================================== */
        @media (max-width: 767.98px) {
            body {
                font-size: 0.92rem;
            }

            .main-content {
                padding: 0.75rem 0.5rem !important;
            }

            .card-custom {
                padding: 1rem 0.75rem !important;
                border-radius: 16px !important;
            }

            /* Los botones en celdas de tabla NO se expanden al 100% */
            .table .btn,
            .table .btn-sm,
            .table td .btn,
            .table td a.btn,
            .table td button.btn {
                width: auto !important;
                min-width: 32px !important;
                height: 32px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0 0.55rem !important;
                margin: 1px !important;
                white-space: nowrap !important;
                border-radius: 8px !important;
            }

            .table td:last-child {
                white-space: nowrap !important;
                min-width: 90px;
            }

            /* Columna fija (Sticky) en pantallas pequeñas para no perder el contexto */
            .table-sticky-col th:first-child,
            .table-sticky-col td:first-child {
                position: sticky !important;
                left: 0 !important;
                z-index: 3 !important;
                background-color: #0f172a !important;
                box-shadow: 3px 0 8px rgba(0, 0, 0, 0.5) !important;
                border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
            }
            .table-sticky-col thead th:first-child {
                z-index: 4 !important;
                background-color: #0f172a !important;
            }

            /* Botones principales de cabecera de página sí se adaptan */
            .page-heading-actions {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 0.65rem !important;
            }
            .page-heading-actions .btn {
                width: 100% !important;
            }
        }

        /* ==========================================================================
           BARRA DE NAVEGACIÓN INFERIOR PARA MÓVILES (NATIVE APP FEEL)
           ========================================================================== */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1040;
            background: #080c16 !important;
            border-top: 1px solid rgba(56, 189, 248, 0.2) !important;
            box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.7) !important;
            padding-bottom: max(6px, env(safe-area-inset-bottom, 6px)) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .bottom-nav-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 56px;
            padding: 0 4px;
            max-width: 600px;
            margin: 0 auto;
        }

        .bottom-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            color: #94a3b8;
            text-decoration: none;
            font-size: 0.72rem;
            font-weight: 500;
            transition: all 0.2s ease;
            padding: 6px 0;
            border-radius: 8px;
            border: none;
            background: transparent;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .bottom-nav-item:hover,
        .bottom-nav-item:focus {
            color: #e2e8f0;
            text-decoration: none;
        }

        .bottom-nav-item.active {
            color: #38bdf8;
            font-weight: 700;
        }

        .bottom-nav-icon {
            font-size: 1.25rem;
            margin-bottom: 2px;
            line-height: 1;
            transition: transform 0.2s ease;
        }

        .bottom-nav-item.active .bottom-nav-icon {
            transform: scale(1.15);
            color: #38bdf8;
            filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.4));
        }

        .bottom-nav-label {
            letter-spacing: -0.02em;
        }

        /* Espaciado para que el contenido no quede oculto tras la barra en móvil */
        @media (max-width: 767.98px) {
            body {
                padding-bottom: calc(76px + max(10px, env(safe-area-inset-bottom, 10px))) !important;
            }

            /* Protección para el menú lateral en dispositivos con barra de navegación nativa */
            #mobileSidebar {
                padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
            }

            #mobileSidebar .sidebar-panel {
                padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
            }

            #mobileSidebar .sidebar-user-footer {
                padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
                margin-bottom: max(6px, env(safe-area-inset-bottom, 6px)) !important;
            }
        }

        /* ==========================================================================
           BANNER DE ESTADO DE CONEXIÓN (ONLINE / OFFLINE)
           ========================================================================== */
        .offline-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999999;
            background: #ef4444;
            color: #ffffff;
            text-align: center;
            font-size: 0.85rem;
            font-weight: 600;
            padding: 10px 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            animation: slideDown 0.3s ease-out;
        }

        .offline-banner.online {
            background: #10b981;
        }

        @keyframes slideDown {
            from { transform: translateY(-100%); }
            to { transform: translateY(0); }
        }

        /* Gestos táctiles nativos */
        html, body {
            overscroll-behavior-y: contain;
        }

        button, a, input, select {
            touch-action: manipulation;
        }

        /* ==========================================================================
           SUITE DE DISEÑO TECNOLÓGICO Y CIBERNÉTICO (COMMAND CENTER / NOC STARLINK)
           ========================================================================== */

        /* 1. Tarjetas con Borde Láser y Micro-Profundidad */
        .card,
        .card-custom,
        .auth-card {
            position: relative;
            background: #0d121f !important;
            border: 1px solid rgba(56, 189, 248, 0.16) !important;
            border-radius: 14px !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease !important;
        }

        .card:not(.calendar-modal-host):hover,
        .card-custom:not(.calendar-modal-host):hover,
        .auth-card:hover {
            transform: translateY(-2px);
            border-color: rgba(56, 189, 248, 0.42) !important;
            box-shadow: inset 0 1px 0 rgba(56, 189, 248, 0.2), 0 14px 34px rgba(0, 0, 0, 0.7), 0 0 18px rgba(56, 189, 248, 0.12) !important;
        }

        /* Línea de resplandor láser superior en cada tarjeta */
        .card::before,
        .card-custom::before,
        .auth-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.45), transparent);
            pointer-events: none;
            z-index: 1;
        }

        /* 2. Cabeceras de Tarjeta y Secciones */
        .card-header {
            background: rgba(14, 21, 37, 0.8) !important;
            border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
            padding: 0.9rem 1.25rem !important;
        }

        /* 3. Tablas Tecnológicas (DataTables & Tablas Nativas) */
        .table {
            --bs-table-bg: transparent !important;
            --bs-table-color: #f1f5f9 !important;
            border-collapse: separate !important;
            border-spacing: 0 !important;
        }

        .table thead th {
            background: #090e1a !important;
            color: #94a3b8 !important;
            font-size: 0.72rem !important;
            text-transform: uppercase !important;
            letter-spacing: 0.06em !important;
            font-weight: 700 !important;
            border-bottom: 2px solid rgba(56, 189, 248, 0.25) !important;
            border-top: none !important;
            padding: 0.85rem 1rem !important;
        }

        .table tbody td {
            background: transparent !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
            padding: 0.85rem 1rem !important;
            vertical-align: middle !important;
            font-size: 0.88rem !important;
        }

        .table tbody tr:hover td {
            background: rgba(56, 189, 248, 0.05) !important;
            color: #ffffff !important;
        }

        /* Paginador y buscador de DataTables */
        .dataTables_wrapper .dataTables_filter input {
            background: #080d18 !important;
            border: 1px solid rgba(56, 189, 248, 0.25) !important;
            border-radius: 8px !important;
            color: #ffffff !important;
            padding: 0.35rem 0.75rem !important;
        }

        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: #38bdf8 !important;
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25) !important;
            outline: none !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: 8px !important;
            border: 1px solid transparent !important;
            color: #94a3b8 !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            background: #0284c7 !important;
            border-color: #38bdf8 !important;
            color: #ffffff !important;
            box-shadow: 0 0 10px rgba(56, 189, 248, 0.3) !important;
        }

        /* 4. Badges de Telemetría y Pulso Radar */
        .status-pulse-online {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            animation: radar-pulse 2s infinite;
            margin-right: 6px;
            vertical-align: middle;
        }

        .status-pulse-warning {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #f59e0b;
            box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
            animation: radar-pulse-warning 2s infinite;
            margin-right: 6px;
            vertical-align: middle;
        }

        .status-pulse-danger {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ef4444;
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            animation: radar-pulse-danger 2s infinite;
            margin-right: 6px;
            vertical-align: middle;
        }

        @keyframes radar-pulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }

        @keyframes radar-pulse-warning {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
        }

        @keyframes radar-pulse-danger {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
        }

        /* 5. Tipografía de Telemetría (IPs, MACs, Balances, IDs) */
        .tech-mono,
        .ip-address,
        .mac-address,
        .currency-val,
        code,
        kbd {
            font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
            letter-spacing: -0.02em;
        }

        /* 6. Barra de Desplazamiento Tecnológica */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #070a12;
        }

        ::-webkit-scrollbar-thumb {
            background: #1e293b;
            border-radius: 4px;
            border: 1px solid rgba(56, 189, 248, 0.1);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #0284c7;
        }

        /* 7. Iconos de Métricas con Resplandor Neón */
        .metric-icon-glow {
            filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.4));
        }

        .metric-icon-success {
            filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4));
        }

        .metric-icon-warning {
            filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.4));
        }