/* ==========================================================================
   GESTOR LAN - HOJA DE ESTILOS PRINCIPAL (v1.25.11)
   Estructura del archivo:
     1. Variables Globales y Paleta de Colores (:root)
     2. Barra Lateral de Navegación (Sidebar)
     3. Contenedor Principal y Barra Superior (Topbar)
     4. Cuadrícula de Pantallas en Vivo (Pestaña 1)
     5. Signos Vitales, KPIs y Diagnóstico de Hardware (Pestaña 2)
     6. Motor de Arrastre Fluido de Tarjetas (Drag & Drop)
     7. Modal de Control Remoto, Visor WebRTC/Canvas y Telemetría
     8. Pantalla de Acceso (Login Overlay y Partículas Estelares)
     9. Sistema de Etiquetas, Filtros y Modales de Configuración
    10. Políticas y Reglas de Bloqueo (Pestaña 3 y Autocompletado theSVG)
    11. Interruptor Flotante y Tema Claro Completo (Light Mode - KRONO)
   ========================================================================== */

:root {
    /* ==========================================
       GAMA DE COLORES - BASE #343840 CON DIFUMINADO SUAVE
       ========================================== */
    --bg: #343840;
    --bg-mesh: radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.09) 0%, transparent 60%),
               linear-gradient(225deg, #3d424c 0%, #343840 50%, #2b2e35 100%);

    --panel: rgba(62, 67, 76, 0.82);
    --panel-alt: rgba(72, 78, 88, 0.86);
    --panel-hover: rgba(82, 88, 100, 0.94);
    --panel-border: rgba(255, 255, 255, 0.16);

    --sidebar-bg: rgba(38, 41, 48, 0.95);
    --topbar-bg: rgba(48, 52, 60, 0.90);

    --text: #f2f3f5;
    --text-muted: #949ba4;
    --text-hover: #ffffff;

    --transDur: 0.3s;
    --primaryT: rgba(229, 62, 62, 0);

    /* Discord Nitro Palette */
    --discord-blurple: #5865F2;
    --discord-blurple-hover: #4752C4;
    --discord-green: #57F287;
    --discord-yellow: #FEE75C;
    --discord-fuchsia: #EB459E;
    --discord-red: #ED4245;

    /* Paleta KRONO */
    --primary: #e53e3e;       /* Principal (botones, enlaces) */
    --primary-hover: #c53030; /* Oscuro (hover) */
    --primary-deep: #9b1c1c;  /* Profundo */
    --bg-soft: rgba(229, 62, 62, 0.14); /* Fondo suave */
    --accent: #2563eb;

    --success: #57f287;
    --warning: #fee75c;
    --danger: #e53e3e;
    --info: #2563eb;
    --sidebar-w: 64px;
    --sidebar-expanded-w: 240px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    background-image: var(--bg-mesh);
    background-attachment: fixed;
    background-size: cover;
    color: var(--text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
}

/* ==========================================
   BARRA LATERAL (SIDEBAR)
   ========================================== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--panel-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    overflow-x: hidden;
}

body.sidebar-expanded .sidebar {
    width: var(--sidebar-expanded-w);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4);
}

.sidebar-header {
    height: 65px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.sidebar-header:hover {
    background: rgba(255, 255, 255, 0.04);
}

.btn-sidebar-toggle {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 22px;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
    transition: color 0.15s, transform 0.1s;
}

.sidebar-header:hover .btn-sidebar-toggle {
    color: var(--accent);
}

.sidebar-title {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--accent);
    margin-left: 12px;
    opacity: 0;
    transition: opacity 0.2s;

    white-space: nowrap;
}

body.sidebar-expanded .sidebar-title {
    opacity: 1;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 15px 8px;
    gap: 8px;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    position: relative;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0.05));
    color: var(--accent);
    font-weight: bold;
    border-left: 3px solid var(--accent);
}

.nav-icon {
    font-size: 20px;
    min-width: 28px;
    text-align: center;
}

.nav-text {
    margin-left: 12px;
    opacity: 0;
    transition: opacity 0.2s;
}

body.sidebar-expanded .nav-text {
    opacity: 1;
}

.nav-badge {
    margin-left: auto;
    background: var(--danger);
    color: white;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: bold;
}

.sidebar-footer {
    padding: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}

/* ==========================================
   CONTENEDOR PRINCIPAL
   ========================================== */
.main-wrapper {
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
    min-height: 100vh;
    padding: 20px 25px;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-expanded .main-wrapper {
    margin-left: var(--sidebar-expanded-w);
    width: calc(100% - var(--sidebar-expanded-w));
}

/* Header / Barra Superior */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--topbar-bg);
    padding: 12px 20px;
    border-radius: 12px;
    margin-bottom: 22px;
    box-shadow: 0 6px 20px rgba(18, 4, 25, 0.45);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-left h2 {
    margin: 0;
    font-size: 20px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.controls input,
.controls select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 13px;
}

.controls button {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
    color: white;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.15s;
}

.controls button:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.5);
}

/* ==========================================
   CONTROLES ESPECÍFICOS DE PANTALLAS (TOPBAR)
   ========================================== */
.btn-actualizar-todos {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.15s !important;
}
.btn-actualizar-todos:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
    box-shadow: 0 5px 14px rgba(245, 158, 11, 0.5) !important;
    transform: translateY(-1px);
}

.btn-servidores-respaldo {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.15s !important;
}
.btn-servidores-respaldo:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
    box-shadow: 0 5px 14px rgba(2, 132, 199, 0.5) !important;
    transform: translateY(-1px);
}

.paginacion-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-pag {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.15s !important;
}
.btn-pag:hover {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.5) !important;
    transform: translateY(-1px);
}

.badge-page-info {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 7px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}

.btn-logout {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.15s !important;
}
.btn-logout:hover {
    background: linear-gradient(135deg, #f87171 0%, #b91c1c 100%) !important;
    box-shadow: 0 5px 14px rgba(239, 68, 68, 0.5) !important;
    transform: translateY(-1px);
}

/* Botón Hamburguesa (3 Líneas) arriba a la derecha */
.btn-hamburger {
    background: #2a2c47;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
    user-select: none;
}

.btn-hamburger:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #1e1e2f;
    transform: scale(1.05);
}

/* Secciones de Contenido */
.section-view {
    display: none;
}

.section-view.active {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   GRID DE PANTALLAS (PESTAÑA 1)
   ========================================== */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: 16px;
}

.pc-card {
    background: var(--panel);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(18, 4, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s;
}

.pc-card:hover {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 15px rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
}

/* Tarjeta de Equipo Desconectado / Historial */
.pc-card.pc-desconectada {
    opacity: 0.7;
    filter: grayscale(85%);
    background: rgba(22, 23, 36, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.pc-card.pc-desconectada:hover {
    opacity: 0.95;
    filter: grayscale(30%);
    border-color: rgba(255, 255, 255, 0.22) !important;
    transform: translateY(-2px);
}

.status-dot.status-desconectado {
    background-color: #64748b !important;
    box-shadow: none !important;
}

.badge-estado-offline {
    font-size: 10px;
    color: #94a3b8;
    background: rgba(100, 116, 139, 0.2);
    border: 1px solid rgba(100, 116, 139, 0.4);
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 700;
}

.pc-offline-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(12, 13, 22, 0.75);
    color: #cbd5e1;
    font-weight: 600;
    font-size: 13px;
    gap: 4px;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

.pc-offline-overlay .offline-icon {
    font-size: 26px;
    filter: grayscale(100%);
    opacity: 0.8;
}

.pc-offline-overlay .offline-time {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

.btn-control.btn-desconectado {
    background: rgba(100, 116, 139, 0.18) !important;
    color: #64748b !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    cursor: not-allowed !important;
    opacity: 0.75;
}

.btn-olvidar-pc {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-muted);
    padding: 5px 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.btn-olvidar-pc:hover {
    background: rgba(253, 93, 147, 0.2);
    border-color: var(--danger);
    color: var(--danger);
}

.pc-header {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 8px;
    cursor: grab;
    cursor: -webkit-grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    position: relative;
    padding-top: 6px;
}

.pc-header:active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

.pc-header::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    transition: background 0.2s, width 0.2s;
    pointer-events: none;
}

.pc-card:hover .pc-header::before {
    background: var(--accent, #6366f1);
    width: 54px;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.pc-header button,
.pc-header a,
.pc-header input {
    cursor: pointer !important;
    touch-action: auto !important;
    position: relative;
    z-index: 2;
}

.pc-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.pc-title-group {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
}

.pc-name-text {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.2px;
}

body.light-theme .pc-name-text {
    color: #0f172a !important;
}

.pc-actions-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}

.badge-version {
    font-size: 10px;
    color: #8c98ad;
    background: #171828;
    border: 1px solid #344675;
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

body.light-theme .badge-version {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

.status-dot {
    height: 10px;
    width: 10px;
    min-width: 10px;
    min-height: 10px;
    background-color: var(--success);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.pc-screen-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid #333;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.pc-screen-wrapper:hover {
    transform: translateY(-2px) scale(1.015);
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(0, 242, 195, 0.25);
}

.pc-screen {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    border: none;
    margin-bottom: 0;
    transition: filter 0.2s ease, transform 0.25s ease;
}

.pc-screen-wrapper:hover .pc-screen {
    filter: brightness(1.08);
}

.pc-screen-zoom-badge {
    position: absolute;
    inset: 0;
    background: rgba(10, 11, 20, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(4px);
}

.pc-screen-wrapper:hover .pc-screen-zoom-badge {
    opacity: 1;
    transform: translateY(0);
}

.zoom-badge-pill {
    background: rgba(0, 242, 195, 0.18);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    letter-spacing: 0.3px;
}

.pc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.pc-footer select {
    padding: 6px 8px;
    border-radius: 5px;
    background: #171828;
    color: white;
    border: 1px solid #444;
    flex: 1;
    font-size: 12px;
}

.btn-control {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    padding: 7px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
    transition: opacity 0.15s, transform 0.1s, box-shadow 0.2s;
}

.btn-control:hover {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%);
    box-shadow: 0 5px 14px rgba(16, 185, 129, 0.45);
    transform: translateY(-1px);
}

/* ==========================================
   SIGNOS VITALES Y HARDWARE (PESTAÑA 2)
   ========================================== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--panel);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--panel-border);
    box-shadow: 0 8px 24px rgba(18, 4, 25, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-top: 4px solid var(--primary) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(18, 4, 25, 0.55);
}

.kpi-card.kpi-total {
    border-top-color: #3b82f6 !important;
}

.kpi-card.kpi-activos {
    border-top-color: #10b981 !important;
}

.kpi-card.kpi-inactivos {
    border-top-color: #ef4444 !important;
}

.kpi-card.kpi-warning {
    border-top-color: #f59e0b !important;
}

.kpi-card.kpi-danger {
    border-top-color: #dc2626 !important;
}

.kpi-card.kpi-info-box {
    border-top-color: #2563eb !important;
}

.kpi-val {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.kpi-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* Tarjetas de Métricas de PC */
.metricas-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: 18px;
}

.metric-card {
    background: var(--panel);
    border-radius: 12px;
    padding: 18px;
    border: 1px solid var(--panel-border);
    box-shadow: 0 8px 24px rgba(18, 4, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.metric-card:hover {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
    transform: translateY(-2px);
}

.metric-card.card-warning {
    border-color: rgba(255, 159, 67, 0.5);
}

.metric-card.card-danger {
    border-color: rgba(253, 93, 147, 0.6);
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 10px;
    cursor: grab;
    cursor: -webkit-grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    position: relative;
    padding-top: 6px;
}

.metric-header:active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

/* Asa superior tipo ventana de Windows */
.metric-header::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    transition: background 0.2s, width 0.2s;
    pointer-events: none;
}

.metric-card:hover .metric-header::before {
    background: var(--accent, #6366f1);
    width: 54px;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.metric-header button,
.metric-header a,
.metric-header input {
    cursor: pointer !important;
    touch-action: auto !important;
    position: relative;
    z-index: 2;
}

body.dragging-card-active,
body.dragging-card-active * {
    cursor: grabbing !important;
    cursor: -webkit-grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Placeholder en el grid para pantallas y métricas */
.pc-card.is-dragged-placeholder,
.metric-card.is-dragged-placeholder {
    opacity: 0.45 !important;
    border: 2px dashed var(--accent, #6366f1) !important;
    background: rgba(99, 102, 241, 0.08) !important;
    box-shadow: inset 0 0 24px rgba(99, 102, 241, 0.2) !important;
    transform: none !important;
    pointer-events: none !important;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 140px;
}

/* Ventana flotante estilo Windows Web para pantallas y métricas */
.card-floating-window,
.metric-card.metric-card-floating,
.pc-card.card-floating-window {
    position: fixed !important;
    z-index: 100000 !important;
    pointer-events: none !important;
    margin: 0 !important;
    transform-origin: center center;
    box-shadow: 0 28px 65px -10px rgba(0, 0, 0, 0.9), 0 0 35px rgba(99, 102, 241, 0.5) !important;
    border: 1.5px solid var(--accent, #6366f1) !important;
    background: rgba(22, 23, 38, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    border-radius: 10px !important;
    opacity: 0.98 !important;
    will-change: transform, left, top;
}

.card-floating-window.is-docking,
.metric-card.metric-card-floating.is-docking,
.pc-card.card-floating-window.is-docking {
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.2s ease !important;
}

.metric-pc-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.metric-pc-name strong {
    font-size: 16px;
    color: var(--text);
}

.metric-tag {
    font-size: 11px;
    background: #344675;
    color: white;
    padding: 2px 7px;
    border-radius: 4px;
    align-self: flex-start;
}

.metric-os {
    font-size: 11px;
    color: var(--text-muted);
}

.metric-health-badge {
    font-size: 11px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.badge-optimo {
    background: rgba(0, 242, 195, 0.15);
    color: var(--success);
    border: 1px solid rgba(0, 242, 195, 0.3);
}

.badge-warning {
    background: rgba(255, 159, 67, 0.15);
    color: var(--warning);
    border: 1px solid rgba(255, 159, 67, 0.3);
}

.badge-danger {
    background: rgba(253, 93, 147, 0.15);
    color: var(--danger);
    border: 1px solid rgba(253, 93, 147, 0.3);
}

.metric-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metric-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}

.metric-label-row strong {
    color: var(--text);
}

/* Barras de Progreso */
.progress-bar {
    width: 100%;
    height: 8px;
    background: #171828;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}

.fill-success { background: var(--success); }
.fill-warning { background: var(--warning); }
.fill-danger  { background: var(--danger); }

/* Fila de Red y Estabilidad */
.metric-net-row {
    display: flex;
    justify-content: space-between;
    background: #171828;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12px;
}

.net-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.net-col .net-lbl {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.net-col .net-val {
    font-weight: bold;
}

/* Caja de Diagnóstico / Descarte */
.metric-recommendation {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
}

.rec-ok {
    background: rgba(0, 242, 195, 0.08);
    color: #4efcd7;
    border: 1px solid rgba(0, 242, 195, 0.2);
}

.rec-warning {
    background: rgba(255, 159, 67, 0.08);
    color: #ffb873;
    border: 1px solid rgba(255, 159, 67, 0.25);
}

.rec-danger {
    background: rgba(253, 93, 147, 0.08);
    color: #ff85ad;
    border: 1px solid rgba(253, 93, 147, 0.3);
}

/* ==========================================
   MODAL DE CONTROL REMOTO Y VISUALIZADOR
   ========================================== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 15, 29, 0.96);
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 10px;
    backdrop-filter: blur(6px);
}

#modalControl.modal-control-fullscreen,
#modalControl {
    padding-top: 0 !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    background: #090d16 !important;
    overflow: hidden !important;
}

#modalControl .modal-header,
#modalControl .modal-control-topbar {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #0f172a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    margin-bottom: 0;
    box-sizing: border-box;
    z-index: 20;
    flex-shrink: 0;
}

#modalControl .modal-control-title-box {
    display: flex;
    align-items: center;
    gap: 12px;
}

#modalControl #modalTitle,
body.light-theme #modalControl #modalTitle {
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin: 0;
    white-space: nowrap;
}

#modalControl .modal-control-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#modalControl .stream-stats-bar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1e293b;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #334155;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 12px;
    color: #f8fafc;
}

#modalControl .stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
}

#modalControl .stat-protocolo {
    color: #e2e8f0;
}

#modalControl .stat-proto-webrtc {
    background: rgba(16, 185, 129, 0.2) !important;
    border: 1px solid #10b981 !important;
    color: #34d399 !important;
}

#modalControl .stat-proto-ws {
    background: rgba(59, 130, 246, 0.2) !important;
    border: 1px solid #3b82f6 !important;
    color: #60a5fa !important;
}

#modalControl .stat-proto-negociando {
    background: rgba(245, 158, 11, 0.2) !important;
    border: 1px solid #f59e0b !important;
    color: #fbbf24 !important;
}

#modalControl .stat-latencia {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

#modalControl .stat-latencia.latencia-media {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

#modalControl .stat-latencia.latencia-alta {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

#modalControl .stat-fps {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

#modalControl .grupo-herramientas-proto {
    display: inline-flex;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

#modalControl .btn-proto-toggle {
    background: transparent;
    border: none;
    color: #94a3b8 !important;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#modalControl .btn-proto-toggle:hover {
    color: #ffffff !important;
    background: #334155;
}

#modalControl .btn-proto-toggle.active#btnProtoUDP {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #34d399 !important;
    border: 1px solid #10b981;
}

#modalControl .btn-proto-toggle.active#btnProtoTCP {
    background: rgba(59, 130, 246, 0.25) !important;
    color: #60a5fa !important;
    border: 1px solid #3b82f6;
}

#modalControl .btn-tool,
body.light-theme #modalControl .btn-tool {
    background: #1e293b;
    border: 1px solid #334155;
    color: #f8fafc !important;
    padding: 7px 13px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.15s ease;
}

#modalControl .btn-tool:hover,
body.light-theme #modalControl .btn-tool:hover {
    background: #e53e3e !important;
    border-color: #c53030 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

#modalControl .btn-modo-control,
body.light-theme #modalControl .btn-modo-control {
    background: rgba(16, 185, 129, 0.18) !important;
    border: 1px solid #10b981 !important;
    color: #34d399 !important;
}

#modalControl .btn-modo-control:hover,
body.light-theme #modalControl .btn-modo-control:hover {
    background: #10b981 !important;
    color: #ffffff !important;
}

#modalControl .btn-modo-observar,
body.light-theme #modalControl .btn-modo-observar {
    background: rgba(59, 130, 246, 0.18) !important;
    border: 1px solid #3b82f6 !important;
    color: #60a5fa !important;
}

#modalControl .btn-modo-observar:hover,
body.light-theme #modalControl .btn-modo-observar:hover {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

#modalControl .btn-calidad,
body.light-theme #modalControl .btn-calidad {
    background: #1e293b !important;
    border: 1px solid #0284c7 !important;
    color: #38bdf8 !important;
    padding: 7px 13px;
    font-size: 12px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

#modalControl .btn-calidad:hover,
body.light-theme #modalControl .btn-calidad:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
}

#modalControl .btn-calidad.hd,
body.light-theme #modalControl .btn-calidad.hd {
    border-color: rgba(0, 242, 195, 0.5) !important;
    color: #00f2c3 !important;
}

#modalControl .btn-calidad.hd:hover,
body.light-theme #modalControl .btn-calidad.hd:hover {
    background: rgba(0, 242, 195, 0.2) !important;
    color: #ffffff !important;
}

/* Botón Reiniciar Ivanti */
#modalControl .btn-reiniciar-ivanti,
body.light-theme #modalControl .btn-reiniciar-ivanti {
    background: rgba(229, 62, 62, 0.22) !important;
    border: 1px solid #e53e3e !important;
    color: #fca5a5 !important;
    font-weight: 700 !important;
}

#modalControl .btn-reiniciar-ivanti:hover,
body.light-theme #modalControl .btn-reiniciar-ivanti:hover {
    background: #e53e3e !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(229, 62, 62, 0.4) !important;
}

/* Botón Desconectar */
#modalControl .btn-close,
body.light-theme #modalControl .btn-close {
    background: #e53e3e !important;
    border: none;
    color: #ffffff !important;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
}

#modalControl .btn-close:hover,
body.light-theme #modalControl .btn-close:hover {
    background: #c53030 !important;
}

/* Dropdown Atajos */
#modalControl .dropdown-atajos-menu,
body.light-theme #modalControl .dropdown-atajos-menu {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
}

#modalControl .dropdown-header,
body.light-theme #modalControl .dropdown-header {
    color: #94a3b8 !important;
    font-size: 11px;
    font-weight: 700;
}

#modalControl .dropdown-atajos-menu button,
body.light-theme #modalControl .dropdown-atajos-menu button {
    color: #f1f5f9 !important;
    background: transparent;
    padding: 7px 12px;
    font-size: 12px;
}

#modalControl .dropdown-atajos-menu button:hover,
body.light-theme #modalControl .dropdown-atajos-menu button:hover {
    background: #e53e3e !important;
    color: #ffffff !important;
}

.modal-control-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    padding: 8px 12px;
    box-sizing: border-box;
    background: #070a10;
}

/* ==========================================
   LOADER DE CONEXIÓN P2P UDP / STREAM (Uiverse by Donewenfu)
   ========================================== */
.loader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #070a10;
    z-index: 25;
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    visibility: visible;
}

.loader.oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after {
    position: absolute;
    top: 0;
    content: '';
}

.jimu-primary-loading:before {
    left: -19.992px;
}

.jimu-primary-loading:after {
    left: 19.992px;
    -webkit-animation-delay: 0.32s !important;
    animation-delay: 0.32s !important;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after,
.jimu-primary-loading {
    background: #076fe5;
    -webkit-animation: loading-keys-app-loading 0.8s infinite ease-in-out;
    animation: loading-keys-app-loading 0.8s infinite ease-in-out;
    width: 13.6px;
    height: 32px;
    border-radius: 3px;
}

.jimu-primary-loading {
    text-indent: -9999em;
    margin: auto;
    position: absolute;
    right: calc(50% - 6.8px);
    top: calc(50% - 16px);
    -webkit-animation-delay: 0.16s !important;
    animation-delay: 0.16s !important;
}

@-webkit-keyframes loading-keys-app-loading {
    0%,
    80%,
    100% {
        opacity: .75;
        box-shadow: 0 0 #076fe5;
        height: 32px;
    }

    40% {
        opacity: 1;
        box-shadow: 0 -8px #076fe5;
        height: 40px;
    }
}

@keyframes loading-keys-app-loading {
    0%,
    80%,
    100% {
        opacity: .75;
        box-shadow: 0 0 #076fe5;
        height: 32px;
    }

    40% {
        opacity: 1;
        box-shadow: 0 -8px #076fe5;
        height: 40px;
    }
}

.loader-status-container {
    position: absolute;
    top: calc(50% + 44px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    text-align: center;
    padding: 0 16px;
}

.loader-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(7, 111, 229, 0.45);
    color: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 15px rgba(7, 111, 229, 0.25);
    font-family: inherit;
}

.loader-status-subtext {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* Modo Claro para Loader de Transmisión */
body.light-theme .loader {
    background: #f8fafc;
}

body.light-theme .loader-status-badge {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(7, 111, 229, 0.35);
    color: #0f172a;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08), 0 0 15px rgba(7, 111, 229, 0.15);
}

body.light-theme .loader-status-subtext {
    color: #64748b;
}

#visorControl, #visorWebRTC {
    max-width: 100%;
    max-height: calc(100vh - 105px);
    object-fit: contain;
    border: 2px solid #1e293b;
    border-radius: 6px;
    cursor: default;
    background: #000;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

#modalControl:fullscreen .modal-control-body {
    padding: 0;
}

#modalControl:fullscreen #visorControl,
#modalControl:fullscreen #visorWebRTC {
    max-height: calc(100vh - 90px);
    max-width: 100vw;
    border-radius: 0;
}

/* Barra inferior discreta para telemetría técnica de conexión */
#modalControl .modal-control-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 16px;
    background: #0a0f1d;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    z-index: 20;
    flex-shrink: 0;
}

.footer-telemetria-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.footer-label {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-divider {
    color: rgba(255, 255, 255, 0.18);
    font-size: 13px;
}

/* Menú Desplegable de Atajos de Teclado */
.dropdown-atajos-wrap {
    position: relative;
    display: inline-block;
}

.dropdown-atajos-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #1e1e2f;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    min-width: 220px;
    padding: 6px;
    z-index: 1100;
    backdrop-filter: blur(8px);
}

.dropdown-atajos-menu.show {
    display: block;
    animation: fadeInMenu 0.15s ease-out;
}

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 6px 10px 4px 10px;
    font-weight: 700;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
}

.dropdown-atajos-menu button {
    display: flex;
    width: 100%;
    align-items: center;
    background: transparent;
    border: none;
    color: #e0e0e0;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.dropdown-atajos-menu button:hover {
    background: var(--accent);
    color: #1e1e2f;
    font-weight: 700;
}

.btn-quick {
    padding: 8px 12px !important;
    font-size: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.btn-quick:hover {
    background: rgba(0, 242, 195, 0.2) !important;
    border-color: #00f2c3 !important;
    color: #00f2c3 !important;
}

/* ==========================================
   LOGIN OVERLAY (FONDO ANIMADO ESTRELLAS/PARTÍCULAS / UIVERSE JAYKDOE)
   ========================================== */
.login-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(ellipse at bottom, #3d424c 0%, #343840 55%, #25282f 100%);
    --stars-color-1: rgba(147, 197, 253, 0.30);
    --stars-color-2: rgba(96, 165, 250, 0.35);
    --stars-color-3: rgba(59, 130, 246, 0.40);
}

/* La sesión se valida por WebSocket después de cargar el panel. Mientras se
   restaura una sesión guardada, no mostrar el login para evitar un parpadeo. */
html.session-restoring .login-overlay {
    display: none;
}

#stars {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  color: var(--stars-color-1);
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    501px 811px currentColor, 1450px 1324px currentColor, 1093px 1780px currentColor, 1469px 678px currentColor, 904px 741px currentColor, 1160px 781px currentColor, 1841px 1962px currentColor, 1630px 1667px currentColor,
    1788px 676px currentColor, 367px 1734px currentColor, 1343px 156px currentColor, 1283px 1142px currentColor, 1062px 378px currentColor, 1395px 467px currentColor, 1017px 1891px currentColor, 137px 1114px currentColor,
    1767px 1403px currentColor, 1543px 11px currentColor, 1078px 181px currentColor, 1189px 1574px currentColor, 1697px 1551px currentColor, 439px 472px currentColor, 1491px 677px currentColor, 1364px 599px currentColor,
    34px 382px currentColor, 1221px 1584px currentColor, 1266px 1499px currentColor, 169px 1907px currentColor, 1219px 1125px currentColor, 659px 18px currentColor, 1731px 1959px currentColor, 332px 1216px currentColor,
    1913px 788px currentColor, 80px 712px currentColor, 326px 1605px currentColor, 574px 1502px currentColor, 473px 1653px currentColor, 404px 975px currentColor, 322px 1797px currentColor, 425px 1321px currentColor,
    1121px 1797px currentColor, 731px 647px currentColor, 891px 1584px currentColor, 1523px 109px currentColor, 1379px 244px currentColor, 865px 1064px currentColor, 493px 956px currentColor, 624px 1380px currentColor,
    440px 619px currentColor, 1630px 767px currentColor, 955px 1196px currentColor, 62px 729px currentColor, 126px 946px currentColor, 1256px 896px currentColor, 1444px 256px currentColor, 661px 1628px currentColor,
    1078px 1716px currentColor, 300px 737px currentColor, 1734px 413px currentColor, 1296px 129px currentColor, 1771px 1678px currentColor, 977px 1764px currentColor, 1879px 549px currentColor, 665px 1531px currentColor,
    89px 701px currentColor, 1084px 1183px currentColor, 1597px 1576px currentColor, 1354px 1774px currentColor, 554px 1471px currentColor, 1469px 287px currentColor, 887px 106px currentColor, 1962px 766px currentColor,
    638px 805px currentColor, 1651px 741px currentColor, 1517px 1826px currentColor, 24px 1152px currentColor, 507px 558px currentColor, 1262px 652px currentColor, 246px 1048px currentColor, 1077px 421px currentColor,
    1866px 1847px currentColor, 1986px 1561px currentColor, 704px 632px currentColor, 1991px 1875px currentColor, 1227px 395px currentColor, 45px 1116px currentColor, 247px 786px currentColor, 890px 607px currentColor,
    787px 1235px currentColor, 557px 524px currentColor, 1582px 1285px currentColor, 1725px 1366px currentColor, 952px 747px currentColor, 251px 458px currentColor, 1500px 1250px currentColor, 1999px 1734px currentColor,
    1336px 1955px currentColor, 1705px 1464px currentColor, 728px 697px currentColor, 594px 510px currentColor, 1345px 1990px currentColor, 1919px 1803px currentColor, 1117px 966px currentColor, 1629px 97px currentColor,
    1046px 1196px currentColor, 810px 1092px currentColor, 722px 976px currentColor, 406px 18px currentColor, 1665px 1860px currentColor, 1758px 1628px currentColor, 1183px 463px currentColor, 564px 239px currentColor,
    13px 1767px currentColor, 1482px 1472px currentColor, 1700px 347px currentColor, 1362px 244px currentColor, 1141px 1708px currentColor, 22px 885px currentColor, 374px 1309px currentColor, 1034px 1037px currentColor,
    1725px 1086px currentColor, 1343px 1921px currentColor, 596px 903px currentColor, 1061px 478px currentColor, 18px 1409px currentColor, 729px 1364px currentColor, 264px 911px currentColor, 677px 1442px currentColor,
    123px 33px currentColor, 1303px 646px currentColor, 1945px 792px currentColor, 1305px 938px currentColor, 918px 1536px currentColor, 620px 948px currentColor, 183px 646px currentColor, 695px 687px currentColor,
    881px 272px currentColor, 1521px 1212px currentColor, 1423px 1022px currentColor, 1545px 1271px currentColor, 1393px 348px currentColor, 685px 1910px currentColor, 1446px 856px currentColor, 73px 1201px currentColor,
    736px 999px currentColor, 673px 796px currentColor, 469px 850px currentColor, 1912px 142px currentColor, 1278px 664px currentColor, 184px 1990px currentColor, 1173px 1312px currentColor, 782px 1879px currentColor,
    323px 1035px currentColor, 611px 908px currentColor, 565px 1449px currentColor, 748px 1713px currentColor, 1047px 490px currentColor, 1040px 1872px currentColor, 1818px 1659px currentColor, 1806px 1327px currentColor,
    386px 575px currentColor, 1550px 463px currentColor, 148px 687px currentColor, 651px 1683px currentColor, 1588px 1194px currentColor, 1831px 2px currentColor, 581px 876px currentColor, 1396px 1743px currentColor,
    1212px 1810px currentColor, 421px 1920px currentColor, 658px 1461px currentColor, 1859px 1809px currentColor, 1456px 388px currentColor, 186px 1627px currentColor, 1528px 1145px currentColor, 171px 97px currentColor,
    674px 1072px currentColor, 676px 1052px currentColor, 1165px 1131px currentColor, 1088px 781px currentColor, 1231px 948px currentColor, 330px 257px currentColor, 426px 1046px currentColor, 549px 652px currentColor,
    1338px 74px currentColor, 1749px 364px currentColor, 931px 369px currentColor, 383px 1428px currentColor, 1558px 389px currentColor, 927px 133px currentColor, 234px 1888px currentColor, 1785px 1617px currentColor,
    556px 643px currentColor, 401px 275px currentColor, 406px 1644px currentColor, 1253px 1852px currentColor, 1599px 883px currentColor, 744px 1721px currentColor, 524px 1297px currentColor, 1226px 1177px currentColor,
    1679px 55px currentColor, 874px 1811px currentColor, 838px 790px currentColor, 1241px 430px currentColor, 1676px 652px currentColor, 1191px 568px currentColor, 53px 1990px currentColor, 1163px 237px currentColor,
    61px 223px currentColor, 592px 456px currentColor, 1844px 271px currentColor, 1324px 1488px currentColor, 1373px 717px currentColor, 1822px 709px currentColor, 1464px 941px currentColor, 1445px 1118px currentColor,
    991px 1414px currentColor, 1964px 1076px currentColor, 108px 172px currentColor, 641px 1722px currentColor, 1539px 427px currentColor, 1697px 45px currentColor, 1301px 1353px currentColor, 1060px 329px currentColor,
    967px 1396px currentColor, 493px 301px currentColor, 1228px 1406px currentColor, 1211px 1653px currentColor, 444px 1822px currentColor, 1746px 353px currentColor, 1449px 381px currentColor, 671px 887px currentColor,
    650px 138px currentColor, 30px 1839px currentColor, 1094px 1405px currentColor, 273px 796px currentColor, 1618px 1964px currentColor, 1045px 1849px currentColor, 1472px 1155px currentColor, 1529px 1312px currentColor,
    728px 448px currentColor, 44px 1908px currentColor, 691px 818px currentColor, 254px 293px currentColor, 1981px 1133px currentColor, 1307px 375px currentColor, 196px 316px currentColor, 1241px 1975px currentColor,
    1138px 1706px currentColor, 1769px 463px currentColor, 1768px 1428px currentColor, 1730px 590px currentColor, 1780px 523px currentColor, 1862px 1526px currentColor, 1613px 909px currentColor, 1266px 1781px currentColor,
    470px 352px currentColor, 699px 1682px currentColor, 1002px 614px currentColor, 1209px 133px currentColor, 1842px 518px currentColor, 1422px 1836px currentColor, 1720px 1901px currentColor, 470px 1788px currentColor,
    1355px 1387px currentColor, 146px 1162px currentColor, 933px 80px currentColor, 681px 1063px currentColor, 313px 1341px currentColor, 740px 1498px currentColor, 168px 1014px currentColor, 345px 1355px currentColor,
    1498px 1562px currentColor, 1626px 1358px currentColor, 890px 403px currentColor, 663px 562px currentColor, 1481px 168px currentColor, 22px 719px currentColor, 774px 1041px currentColor, 1899px 829px currentColor,
    430px 158px currentColor, 430px 361px currentColor, 1592px 1334px currentColor, 224px 323px currentColor, 1639px 1131px currentColor, 7px 271px currentColor, 1646px 1514px currentColor, 1605px 1444px currentColor,
    1820px 1665px currentColor, 1549px 1641px currentColor, 1609px 1377px currentColor, 486px 1098px currentColor, 229px 613px currentColor, 542px 1694px currentColor, 318px 256px currentColor, 1861px 918px currentColor,
    889px 892px currentColor, 442px 1524px currentColor, 19px 422px currentColor, 1935px 1908px currentColor, 828px 109px currentColor, 862px 1248px currentColor, 1275px 560px currentColor, 906px 63px currentColor,
    337px 1605px currentColor, 1691px 918px currentColor, 1414px 679px currentColor, 1726px 749px currentColor, 1540px 1149px currentColor, 1337px 1466px currentColor, 446px 430px currentColor, 676px 1616px currentColor,
    840px 326px currentColor, 976px 977px currentColor, 1840px 642px currentColor, 1273px 804px currentColor, 1071px 928px currentColor, 1292px 1675px currentColor, 29px 1148px currentColor, 1585px 135px currentColor,
    1007px 563px currentColor, 1035px 78px currentColor, 1174px 574px currentColor, 120px 1304px currentColor, 845px 1292px currentColor, 861px 540px currentColor, 234px 232px currentColor, 1940px 1367px currentColor,
    759px 639px currentColor, 1775px 1381px currentColor, 906px 372px currentColor, 1104px 1165px currentColor, 1524px 911px currentColor, 1882px 330px currentColor, 1389px 700px currentColor, 300px 1629px currentColor,
    220px 1614px currentColor, 563px 140px currentColor, 1611px 1586px currentColor, 793px 1316px currentColor, 325px 1070px currentColor, 1722px 1462px currentColor, 1406px 1120px currentColor, 1169px 1768px currentColor,
    1956px 1053px currentColor, 959px 1587px currentColor, 585px 1566px currentColor, 370px 204px currentColor, 1606px 1416px currentColor, 443px 1606px currentColor, 1499px 1102px currentColor, 1943px 105px currentColor,
    1121px 1594px currentColor, 1512px 32px currentColor, 871px 1425px currentColor, 433px 100px currentColor, 294px 1471px currentColor, 1688px 1755px currentColor, 1666px 591px currentColor, 1034px 300px currentColor,
    734px 1178px currentColor, 1342px 313px currentColor, 1616px 1590px currentColor, 1763px 1472px currentColor, 632px 1935px currentColor, 1708px 872px currentColor, 1871px 915px currentColor, 1829px 1020px currentColor,
    1599px 578px currentColor, 42px 585px currentColor, 1163px 1382px currentColor, 1744px 1272px currentColor, 984px 1426px currentColor, 1786px 1584px currentColor, 1813px 379px currentColor, 1867px 1127px currentColor,
    97px 567px currentColor, 626px 988px currentColor, 1178px 79px currentColor, 1703px 211px currentColor, 961px 1785px currentColor, 110px 975px currentColor, 953px 1941px currentColor, 1027px 1790px currentColor,
    1665px 107px currentColor, 11px 964px currentColor, 1718px 1147px currentColor, 21px 1728px currentColor, 1358px 1922px currentColor, 872px 65px currentColor, 1191px 1635px currentColor, 762px 681px currentColor,
    1519px 1033px currentColor, 906px 566px currentColor, 1074px 657px currentColor, 1093px 415px currentColor, 51px 198px currentColor, 1075px 1418px currentColor, 1547px 1070px currentColor, 225px 920px currentColor,
    850px 1974px currentColor, 981px 595px currentColor, 1425px 131px currentColor, 460px 917px currentColor, 56px 495px currentColor, 714px 428px currentColor, 920px 493px currentColor, 470px 1521px currentColor,
    532px 821px currentColor, 1905px 71px currentColor, 883px 1501px currentColor, 294px 196px currentColor, 381px 1999px currentColor, 332px 793px currentColor, 1246px 408px currentColor, 233px 149px currentColor,
    315px 231px currentColor, 1594px 1302px currentColor, 696px 1585px currentColor, 791px 136px currentColor, 479px 199px currentColor, 1627px 1413px currentColor, 1824px 924px currentColor, 1631px 342px currentColor,
    1251px 1151px currentColor, 284px 1781px currentColor, 497px 1052px currentColor, 204px 1161px currentColor, 646px 1499px currentColor, 1762px 558px currentColor, 854px 1833px currentColor, 883px 945px currentColor,
    44px 982px currentColor, 1101px 834px currentColor, 515px 1748px currentColor, 1578px 1435px currentColor, 819px 1258px currentColor, 776px 670px currentColor, 115px 385px currentColor, 1478px 434px currentColor,
    885px 20px currentColor, 192px 1513px currentColor, 78px 1129px currentColor, 1774px 1105px currentColor, 955px 1149px currentColor, 1817px 1929px currentColor, 1106px 1832px currentColor, 1107px 1997px currentColor,
    94px 23px currentColor, 243px 982px currentColor, 43px 1972px currentColor, 1798px 673px currentColor, 1131px 1589px currentColor, 841px 14px currentColor, 826px 345px currentColor, 687px 56px currentColor,
    1084px 32px currentColor, 1887px 1878px currentColor, 153px 526px currentColor, 1828px 253px currentColor, 1947px 1105px currentColor, 886px 700px currentColor, 1307px 1723px currentColor, 1274px 651px currentColor,
    1530px 837px currentColor, 1699px 1637px currentColor, 1703px 1331px currentColor, 1929px 1557px currentColor, 1763px 737px currentColor, 1118px 1680px currentColor, 1545px 692px currentColor, 1462px 1092px currentColor,
    208px 1667px currentColor, 1393px 859px currentColor, 186px 1794px currentColor, 351px 1199px currentColor, 642px 1995px currentColor, 1061px 1726px currentColor, 1708px 115px currentColor, 1233px 1305px currentColor,
    637px 1786px currentColor, 1730px 603px currentColor, 75px 1240px currentColor, 1704px 1326px currentColor, 584px 346px currentColor, 438px 1554px currentColor, 561px 513px currentColor, 1382px 225px currentColor,
    467px 1674px currentColor, 1403px 815px currentColor, 1546px 1835px currentColor, 127px 1119px currentColor, 276px 591px currentColor, 688px 1458px currentColor, 765px 646px currentColor, 474px 984px currentColor,
    171px 361px currentColor, 94px 1480px currentColor, 1962px 1666px currentColor, 909px 1037px currentColor, 1725px 222px currentColor, 253px 1355px currentColor, 1892px 1901px currentColor, 275px 1847px currentColor,
    28px 1184px currentColor, 1725px 1382px currentColor, 882px 647px currentColor, 1935px 1046px currentColor, 10px 344px currentColor, 292px 1328px currentColor, 127px 1352px currentColor, 752px 929px currentColor,
    1589px 384px currentColor, 284px 1829px currentColor, 381px 820px currentColor, 1229px 1125px currentColor, 777px 429px currentColor, 1811px 1499px currentColor, 1573px 287px currentColor, 295px 756px currentColor,
    389px 616px currentColor, 781px 41px currentColor, 1092px 333px currentColor, 794px 1588px currentColor, 386px 1847px currentColor, 1802px 710px currentColor, 662px 60px currentColor, 640px 264px currentColor,
    463px 746px currentColor, 1859px 799px currentColor, 763px 37px currentColor, 639px 396px currentColor, 357px 1071px currentColor, 1190px 1430px currentColor, 1814px 257px currentColor, 1382px 235px currentColor,
    606px 1304px currentColor, 1939px 1470px currentColor, 1124px 349px currentColor, 307px 1567px currentColor, 310px 1323px currentColor, 1145px 922px currentColor, 1196px 1922px currentColor, 1647px 544px currentColor,
    788px 1337px currentColor, 257px 632px currentColor, 1413px 414px currentColor, 590px 620px currentColor, 582px 794px currentColor, 1702px 1481px currentColor, 1055px 53px currentColor, 157px 346px currentColor,
    50px 1901px currentColor, 1038px 1369px currentColor, 796px 1941px currentColor, 215px 194px currentColor, 1567px 1538px currentColor, 367px 800px currentColor, 1044px 489px currentColor, 1109px 1712px currentColor,
    524px 327px currentColor, 525px 1252px currentColor, 1475px 1240px currentColor, 529px 436px currentColor, 795px 834px currentColor, 122px 1371px currentColor, 79px 482px currentColor, 520px 1249px currentColor,
    336px 1878px currentColor, 188px 944px currentColor, 325px 1259px currentColor, 1491px 1942px currentColor, 620px 1054px currentColor, 1606px 1153px currentColor, 1448px 502px currentColor, 53px 1381px currentColor,
    107px 1670px currentColor, 1380px 618px currentColor, 967px 1557px currentColor, 1116px 1722px currentColor, 1174px 1044px currentColor, 1805px 717px currentColor, 663px 394px currentColor, 1848px 1007px currentColor,
    389px 802px currentColor, 49px 392px currentColor, 1650px 852px currentColor, 1678px 1012px currentColor, 335px 1009px currentColor, 1818px 1631px currentColor, 1568px 742px currentColor, 1162px 1991px currentColor,
    52px 1190px currentColor, 1401px 928px currentColor, 119px 1549px currentColor, 537px 1529px currentColor, 2px 1709px currentColor, 122px 387px currentColor, 543px 2px currentColor, 27px 1971px currentColor,
    507px 1377px currentColor, 1362px 1080px currentColor, 1031px 1544px currentColor, 1631px 1174px currentColor, 1603px 312px currentColor, 1626px 1422px currentColor, 1430px 615px currentColor, 1958px 1431px currentColor,
    1946px 1412px currentColor, 1848px 247px currentColor, 984px 1808px currentColor, 1396px 225px currentColor, 319px 717px currentColor, 1252px 875px currentColor, 1619px 156px currentColor, 951px 1971px currentColor,
    386px 355px currentColor, 1406px 1151px currentColor, 273px 1538px currentColor, 844px 1570px currentColor, 947px 151px currentColor, 1363px 525px currentColor, 209px 307px currentColor, 1923px 1718px currentColor,
    993px 1741px currentColor, 1513px 353px currentColor, 1353px 61px currentColor, 664px 352px currentColor, 1382px 359px currentColor, 1487px 1707px currentColor, 657px 1045px currentColor, 1107px 490px currentColor,
    1834px 1176px currentColor, 837px 1438px currentColor, 1947px 448px currentColor, 1196px 333px currentColor, 151px 555px currentColor, 18px 992px currentColor, 458px 748px currentColor, 1801px 890px currentColor,
    1093px 1012px currentColor, 315px 1101px currentColor, 194px 323px currentColor, 754px 292px currentColor, 1737px 7px currentColor, 40px 840px currentColor, 1170px 805px currentColor, 176px 1753px currentColor,
    805px 1148px currentColor, 1578px 1271px currentColor, 367px 1494px currentColor, 363px 1111px currentColor, 1955px 243px currentColor, 1451px 1093px currentColor, 375px 617px currentColor, 1223px 720px currentColor,
    1178px 13px currentColor, 1456px 865px currentColor, 1440px 49px currentColor, 186px 1569px currentColor, 320px 1853px currentColor, 300px 539px currentColor, 1559px 509px currentColor, 1985px 1108px currentColor,
    1588px 828px currentColor, 525px 1432px currentColor, 831px 363px currentColor, 141px 281px currentColor, 1319px 402px currentColor, 40px 456px currentColor, 1955px 478px currentColor, 1758px 818px currentColor,
    1924px 688px currentColor, 1030px 953px currentColor, 1982px 210px currentColor, 917px 1401px currentColor, 1051px 1837px currentColor, 1045px 463px currentColor, 1744px 573px currentColor, 529px 1530px currentColor,
    542px 469px currentColor, 1982px 324px currentColor, 1902px 1422px currentColor, 1968px 782px currentColor, 1666px 1561px currentColor, 955px 304px currentColor, 323px 778px currentColor, 272px 443px currentColor,
    485px 581px currentColor, 1353px 1058px currentColor, 1257px 131px currentColor, 434px 98px currentColor, 1587px 1953px currentColor, 1749px 68px currentColor, 1984px 839px currentColor, 1518px 183px currentColor,
    1071px 855px currentColor, 1662px 1994px currentColor, 1111px 106px currentColor, 1954px 838px currentColor;
  animation: animStar 50s linear infinite;
}
#stars:after {
  position: absolute;
  top: 2000px;
  left: 0;
  border-radius: 50%;
  color: var(--stars-color-1);
  content: " ";
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    501px 811px currentColor, 1450px 1324px currentColor, 1093px 1780px currentColor, 1469px 678px currentColor, 904px 741px currentColor, 1160px 781px currentColor, 1841px 1962px currentColor, 1630px 1667px currentColor,
    1788px 676px currentColor, 367px 1734px currentColor, 1343px 156px currentColor, 1283px 1142px currentColor, 1062px 378px currentColor, 1395px 467px currentColor, 1017px 1891px currentColor, 137px 1114px currentColor,
    1767px 1403px currentColor, 1543px 11px currentColor, 1078px 181px currentColor, 1189px 1574px currentColor, 1697px 1551px currentColor, 439px 472px currentColor, 1491px 677px currentColor, 1364px 599px currentColor,
    34px 382px currentColor, 1221px 1584px currentColor, 1266px 1499px currentColor, 169px 1907px currentColor, 1219px 1125px currentColor, 659px 18px currentColor, 1731px 1959px currentColor, 332px 1216px currentColor,
    1913px 788px currentColor, 80px 712px currentColor, 326px 1605px currentColor, 574px 1502px currentColor, 473px 1653px currentColor, 404px 975px currentColor, 322px 1797px currentColor, 425px 1321px currentColor,
    1121px 1797px currentColor, 731px 647px currentColor, 891px 1584px currentColor, 1523px 109px currentColor, 1379px 244px currentColor, 865px 1064px currentColor, 493px 956px currentColor, 624px 1380px currentColor,
    440px 619px currentColor, 1630px 767px currentColor, 955px 1196px currentColor, 62px 729px currentColor, 126px 946px currentColor, 1256px 896px currentColor, 1444px 256px currentColor, 661px 1628px currentColor,
    1078px 1716px currentColor, 300px 737px currentColor, 1734px 413px currentColor, 1296px 129px currentColor, 1771px 1678px currentColor, 977px 1764px currentColor, 1879px 549px currentColor, 665px 1531px currentColor,
    89px 701px currentColor, 1084px 1183px currentColor, 1597px 1576px currentColor, 1354px 1774px currentColor, 554px 1471px currentColor, 1469px 287px currentColor, 887px 106px currentColor, 1962px 766px currentColor,
    638px 805px currentColor, 1651px 741px currentColor, 1517px 1826px currentColor, 24px 1152px currentColor, 507px 558px currentColor, 1262px 652px currentColor, 246px 1048px currentColor, 1077px 421px currentColor,
    1866px 1847px currentColor, 1986px 1561px currentColor, 704px 632px currentColor, 1991px 1875px currentColor, 1227px 395px currentColor, 45px 1116px currentColor, 247px 786px currentColor, 890px 607px currentColor,
    787px 1235px currentColor, 557px 524px currentColor, 1582px 1285px currentColor, 1725px 1366px currentColor, 952px 747px currentColor, 251px 458px currentColor, 1500px 1250px currentColor, 1999px 1734px currentColor,
    1336px 1955px currentColor, 1705px 1464px currentColor, 728px 697px currentColor, 594px 510px currentColor, 1345px 1990px currentColor, 1919px 1803px currentColor, 1117px 966px currentColor, 1629px 97px currentColor,
    1046px 1196px currentColor, 810px 1092px currentColor, 722px 976px currentColor, 406px 18px currentColor, 1665px 1860px currentColor, 1758px 1628px currentColor, 1183px 463px currentColor, 564px 239px currentColor,
    13px 1767px currentColor, 1482px 1472px currentColor, 1700px 347px currentColor, 1362px 244px currentColor, 1141px 1708px currentColor, 22px 885px currentColor, 374px 1309px currentColor, 1034px 1037px currentColor,
    1725px 1086px currentColor, 1343px 1921px currentColor, 596px 903px currentColor, 1061px 478px currentColor, 18px 1409px currentColor, 729px 1364px currentColor, 264px 911px currentColor, 677px 1442px currentColor,
    123px 33px currentColor, 1303px 646px currentColor, 1945px 792px currentColor, 1305px 938px currentColor, 918px 1536px currentColor, 620px 948px currentColor, 183px 646px currentColor, 695px 687px currentColor,
    881px 272px currentColor, 1521px 1212px currentColor, 1423px 1022px currentColor, 1545px 1271px currentColor, 1393px 348px currentColor, 685px 1910px currentColor, 1446px 856px currentColor, 73px 1201px currentColor,
    736px 999px currentColor, 673px 796px currentColor, 469px 850px currentColor, 1912px 142px currentColor, 1278px 664px currentColor, 184px 1990px currentColor, 1173px 1312px currentColor, 782px 1879px currentColor,
    323px 1035px currentColor, 611px 908px currentColor, 565px 1449px currentColor, 748px 1713px currentColor, 1047px 490px currentColor, 1040px 1872px currentColor, 1818px 1659px currentColor, 1806px 1327px currentColor,
    386px 575px currentColor, 1550px 463px currentColor, 148px 687px currentColor, 651px 1683px currentColor, 1588px 1194px currentColor, 1831px 2px currentColor, 581px 876px currentColor, 1396px 1743px currentColor,
    1212px 1810px currentColor, 421px 1920px currentColor, 658px 1461px currentColor, 1859px 1809px currentColor, 1456px 388px currentColor, 186px 1627px currentColor, 1528px 1145px currentColor, 171px 97px currentColor,
    674px 1072px currentColor, 676px 1052px currentColor, 1165px 1131px currentColor, 1088px 781px currentColor, 1231px 948px currentColor, 330px 257px currentColor, 426px 1046px currentColor, 549px 652px currentColor,
    1338px 74px currentColor, 1749px 364px currentColor, 931px 369px currentColor, 383px 1428px currentColor, 1558px 389px currentColor, 927px 133px currentColor, 234px 1888px currentColor, 1785px 1617px currentColor,
    556px 643px currentColor, 401px 275px currentColor, 406px 1644px currentColor, 1253px 1852px currentColor, 1599px 883px currentColor, 744px 1721px currentColor, 524px 1297px currentColor, 1226px 1177px currentColor,
    1679px 55px currentColor, 874px 1811px currentColor, 838px 790px currentColor, 1241px 430px currentColor, 1676px 652px currentColor, 1191px 568px currentColor, 53px 1990px currentColor, 1163px 237px currentColor,
    61px 223px currentColor, 592px 456px currentColor, 1844px 271px currentColor, 1324px 1488px currentColor, 1373px 717px currentColor, 1822px 709px currentColor, 1464px 941px currentColor, 1445px 1118px currentColor,
    991px 1414px currentColor, 1964px 1076px currentColor, 108px 172px currentColor, 641px 1722px currentColor, 1539px 427px currentColor, 1697px 45px currentColor, 1301px 1353px currentColor, 1060px 329px currentColor,
    967px 1396px currentColor, 493px 301px currentColor, 1228px 1406px currentColor, 1211px 1653px currentColor, 444px 1822px currentColor, 1746px 353px currentColor, 1449px 381px currentColor, 671px 887px currentColor,
    650px 138px currentColor, 30px 1839px currentColor, 1094px 1405px currentColor, 273px 796px currentColor, 1618px 1964px currentColor, 1045px 1849px currentColor, 1472px 1155px currentColor, 1529px 1312px currentColor,
    728px 448px currentColor, 44px 1908px currentColor, 691px 818px currentColor, 254px 293px currentColor, 1981px 1133px currentColor, 1307px 375px currentColor, 196px 316px currentColor, 1241px 1975px currentColor,
    1138px 1706px currentColor, 1769px 463px currentColor, 1768px 1428px currentColor, 1730px 590px currentColor, 1780px 523px currentColor, 1862px 1526px currentColor, 1613px 909px currentColor, 1266px 1781px currentColor,
    470px 352px currentColor, 699px 1682px currentColor, 1002px 614px currentColor, 1209px 133px currentColor, 1842px 518px currentColor, 1422px 1836px currentColor, 1720px 1901px currentColor, 470px 1788px currentColor,
    1355px 1387px currentColor, 146px 1162px currentColor, 933px 80px currentColor, 681px 1063px currentColor, 313px 1341px currentColor, 740px 1498px currentColor, 168px 1014px currentColor, 345px 1355px currentColor,
    1498px 1562px currentColor, 1626px 1358px currentColor, 890px 403px currentColor, 663px 562px currentColor, 1481px 168px currentColor, 22px 719px currentColor, 774px 1041px currentColor, 1899px 829px currentColor,
    430px 158px currentColor, 430px 361px currentColor, 1592px 1334px currentColor, 224px 323px currentColor, 1639px 1131px currentColor, 7px 271px currentColor, 1646px 1514px currentColor, 1605px 1444px currentColor,
    1820px 1665px currentColor, 1549px 1641px currentColor, 1609px 1377px currentColor, 486px 1098px currentColor, 229px 613px currentColor, 542px 1694px currentColor, 318px 256px currentColor, 1861px 918px currentColor,
    889px 892px currentColor, 442px 1524px currentColor, 19px 422px currentColor, 1935px 1908px currentColor, 828px 109px currentColor, 862px 1248px currentColor, 1275px 560px currentColor, 906px 63px currentColor,
    337px 1605px currentColor, 1691px 918px currentColor, 1414px 679px currentColor, 1726px 749px currentColor, 1540px 1149px currentColor, 1337px 1466px currentColor, 446px 430px currentColor, 676px 1616px currentColor,
    840px 326px currentColor, 976px 977px currentColor, 1840px 642px currentColor, 1273px 804px currentColor, 1071px 928px currentColor, 1292px 1675px currentColor, 29px 1148px currentColor, 1585px 135px currentColor,
    1007px 563px currentColor, 1035px 78px currentColor, 1174px 574px currentColor, 120px 1304px currentColor, 845px 1292px currentColor, 861px 540px currentColor, 234px 232px currentColor, 1940px 1367px currentColor,
    759px 639px currentColor, 1775px 1381px currentColor, 906px 372px currentColor, 1104px 1165px currentColor, 1524px 911px currentColor, 1882px 330px currentColor, 1389px 700px currentColor, 300px 1629px currentColor,
    220px 1614px currentColor, 563px 140px currentColor, 1611px 1586px currentColor, 793px 1316px currentColor, 325px 1070px currentColor, 1722px 1462px currentColor, 1406px 1120px currentColor, 1169px 1768px currentColor,
    1956px 1053px currentColor, 959px 1587px currentColor, 585px 1566px currentColor, 370px 204px currentColor, 1606px 1416px currentColor, 443px 1606px currentColor, 1499px 1102px currentColor, 1943px 105px currentColor,
    1121px 1594px currentColor, 1512px 32px currentColor, 871px 1425px currentColor, 433px 100px currentColor, 294px 1471px currentColor, 1688px 1755px currentColor, 1666px 591px currentColor, 1034px 300px currentColor,
    734px 1178px currentColor, 1342px 313px currentColor, 1616px 1590px currentColor, 1763px 1472px currentColor, 632px 1935px currentColor, 1708px 872px currentColor, 1871px 915px currentColor, 1829px 1020px currentColor,
    1599px 578px currentColor, 42px 585px currentColor, 1163px 1382px currentColor, 1744px 1272px currentColor, 984px 1426px currentColor, 1786px 1584px currentColor, 1813px 379px currentColor, 1867px 1127px currentColor,
    97px 567px currentColor, 626px 988px currentColor, 1178px 79px currentColor, 1703px 211px currentColor, 961px 1785px currentColor, 110px 975px currentColor, 953px 1941px currentColor, 1027px 1790px currentColor,
    1665px 107px currentColor, 11px 964px currentColor, 1718px 1147px currentColor, 21px 1728px currentColor, 1358px 1922px currentColor, 872px 65px currentColor, 1191px 1635px currentColor, 762px 681px currentColor,
    1519px 1033px currentColor, 906px 566px currentColor, 1074px 657px currentColor, 1093px 415px currentColor, 51px 198px currentColor, 1075px 1418px currentColor, 1547px 1070px currentColor, 225px 920px currentColor,
    850px 1974px currentColor, 981px 595px currentColor, 1425px 131px currentColor, 460px 917px currentColor, 56px 495px currentColor, 714px 428px currentColor, 920px 493px currentColor, 470px 1521px currentColor,
    532px 821px currentColor, 1905px 71px currentColor, 883px 1501px currentColor, 294px 196px currentColor, 381px 1999px currentColor, 332px 793px currentColor, 1246px 408px currentColor, 233px 149px currentColor,
    315px 231px currentColor, 1594px 1302px currentColor, 696px 1585px currentColor, 791px 136px currentColor, 479px 199px currentColor, 1627px 1413px currentColor, 1824px 924px currentColor, 1631px 342px currentColor,
    1251px 1151px currentColor, 284px 1781px currentColor, 497px 1052px currentColor, 204px 1161px currentColor, 646px 1499px currentColor, 1762px 558px currentColor, 854px 1833px currentColor, 883px 945px currentColor,
    44px 982px currentColor, 1101px 834px currentColor, 515px 1748px currentColor, 1578px 1435px currentColor, 819px 1258px currentColor, 776px 670px currentColor, 115px 385px currentColor, 1478px 434px currentColor,
    885px 20px currentColor, 192px 1513px currentColor, 78px 1129px currentColor, 1774px 1105px currentColor, 955px 1149px currentColor, 1817px 1929px currentColor, 1106px 1832px currentColor, 1107px 1997px currentColor,
    94px 23px currentColor, 243px 982px currentColor, 43px 1972px currentColor, 1798px 673px currentColor, 1131px 1589px currentColor, 841px 14px currentColor, 826px 345px currentColor, 687px 56px currentColor,
    1084px 32px currentColor, 1887px 1878px currentColor, 153px 526px currentColor, 1828px 253px currentColor, 1947px 1105px currentColor, 886px 700px currentColor, 1307px 1723px currentColor, 1274px 651px currentColor,
    1530px 837px currentColor, 1699px 1637px currentColor, 1703px 1331px currentColor, 1929px 1557px currentColor, 1763px 737px currentColor, 1118px 1680px currentColor, 1545px 692px currentColor, 1462px 1092px currentColor,
    208px 1667px currentColor, 1393px 859px currentColor, 186px 1794px currentColor, 351px 1199px currentColor, 642px 1995px currentColor, 1061px 1726px currentColor, 1708px 115px currentColor, 1233px 1305px currentColor,
    637px 1786px currentColor, 1730px 603px currentColor, 75px 1240px currentColor, 1704px 1326px currentColor, 584px 346px currentColor, 438px 1554px currentColor, 561px 513px currentColor, 1382px 225px currentColor,
    467px 1674px currentColor, 1403px 815px currentColor, 1546px 1835px currentColor, 127px 1119px currentColor, 276px 591px currentColor, 688px 1458px currentColor, 765px 646px currentColor, 474px 984px currentColor,
    171px 361px currentColor, 94px 1480px currentColor, 1962px 1666px currentColor, 909px 1037px currentColor, 1725px 222px currentColor, 253px 1355px currentColor, 1892px 1901px currentColor, 275px 1847px currentColor,
    28px 1184px currentColor, 1725px 1382px currentColor, 882px 647px currentColor, 1935px 1046px currentColor, 10px 344px currentColor, 292px 1328px currentColor, 127px 1352px currentColor, 752px 929px currentColor,
    1589px 384px currentColor, 284px 1829px currentColor, 381px 820px currentColor, 1229px 1125px currentColor, 777px 429px currentColor, 1811px 1499px currentColor, 1573px 287px currentColor, 295px 756px currentColor,
    389px 616px currentColor, 781px 41px currentColor, 1092px 333px currentColor, 794px 1588px currentColor, 386px 1847px currentColor, 1802px 710px currentColor, 662px 60px currentColor, 640px 264px currentColor,
    463px 746px currentColor, 1859px 799px currentColor, 763px 37px currentColor, 639px 396px currentColor, 357px 1071px currentColor, 1190px 1430px currentColor, 1814px 257px currentColor, 1382px 235px currentColor,
    606px 1304px currentColor, 1939px 1470px currentColor, 1124px 349px currentColor, 307px 1567px currentColor, 310px 1323px currentColor, 1145px 922px currentColor, 1196px 1922px currentColor, 1647px 544px currentColor,
    788px 1337px currentColor, 257px 632px currentColor, 1413px 414px currentColor, 590px 620px currentColor, 582px 794px currentColor, 1702px 1481px currentColor, 1055px 53px currentColor, 157px 346px currentColor,
    50px 1901px currentColor, 1038px 1369px currentColor, 796px 1941px currentColor, 215px 194px currentColor, 1567px 1538px currentColor, 367px 800px currentColor, 1044px 489px currentColor, 1109px 1712px currentColor,
    524px 327px currentColor, 525px 1252px currentColor, 1475px 1240px currentColor, 529px 436px currentColor, 795px 834px currentColor, 122px 1371px currentColor, 79px 482px currentColor, 520px 1249px currentColor,
    336px 1878px currentColor, 188px 944px currentColor, 325px 1259px currentColor, 1491px 1942px currentColor, 620px 1054px currentColor, 1606px 1153px currentColor, 1448px 502px currentColor, 53px 1381px currentColor,
    107px 1670px currentColor, 1380px 618px currentColor, 967px 1557px currentColor, 1116px 1722px currentColor, 1174px 1044px currentColor, 1805px 717px currentColor, 663px 394px currentColor, 1848px 1007px currentColor,
    389px 802px currentColor, 49px 392px currentColor, 1650px 852px currentColor, 1678px 1012px currentColor, 335px 1009px currentColor, 1818px 1631px currentColor, 1568px 742px currentColor, 1162px 1991px currentColor,
    52px 1190px currentColor, 1401px 928px currentColor, 119px 1549px currentColor, 537px 1529px currentColor, 2px 1709px currentColor, 122px 387px currentColor, 543px 2px currentColor, 27px 1971px currentColor,
    507px 1377px currentColor, 1362px 1080px currentColor, 1031px 1544px currentColor, 1631px 1174px currentColor, 1603px 312px currentColor, 1626px 1422px currentColor, 1430px 615px currentColor, 1958px 1431px currentColor,
    1946px 1412px currentColor, 1848px 247px currentColor, 984px 1808px currentColor, 1396px 225px currentColor, 319px 717px currentColor, 1252px 875px currentColor, 1619px 156px currentColor, 951px 1971px currentColor,
    386px 355px currentColor, 1406px 1151px currentColor, 273px 1538px currentColor, 844px 1570px currentColor, 947px 151px currentColor, 1363px 525px currentColor, 209px 307px currentColor, 1923px 1718px currentColor,
    993px 1741px currentColor, 1513px 353px currentColor, 1353px 61px currentColor, 664px 352px currentColor, 1382px 359px currentColor, 1487px 1707px currentColor, 657px 1045px currentColor, 1107px 490px currentColor,
    1834px 1176px currentColor, 837px 1438px currentColor, 1947px 448px currentColor, 1196px 333px currentColor, 151px 555px currentColor, 18px 992px currentColor, 458px 748px currentColor, 1801px 890px currentColor,
    1093px 1012px currentColor, 315px 1101px currentColor, 194px 323px currentColor, 754px 292px currentColor, 1737px 7px currentColor, 40px 840px currentColor, 1170px 805px currentColor, 176px 1753px currentColor,
    805px 1148px currentColor, 1578px 1271px currentColor, 367px 1494px currentColor, 363px 1111px currentColor, 1955px 243px currentColor, 1451px 1093px currentColor, 375px 617px currentColor, 1223px 720px currentColor,
    1178px 13px currentColor, 1456px 865px currentColor, 1440px 49px currentColor, 186px 1569px currentColor, 320px 1853px currentColor, 300px 539px currentColor, 1559px 509px currentColor, 1985px 1108px currentColor,
    1588px 828px currentColor, 525px 1432px currentColor, 831px 363px currentColor, 141px 281px currentColor, 1319px 402px currentColor, 40px 456px currentColor, 1955px 478px currentColor, 1758px 818px currentColor,
    1924px 688px currentColor, 1030px 953px currentColor, 1982px 210px currentColor, 917px 1401px currentColor, 1051px 1837px currentColor, 1045px 463px currentColor, 1744px 573px currentColor, 529px 1530px currentColor,
    542px 469px currentColor, 1982px 324px currentColor, 1902px 1422px currentColor, 1968px 782px currentColor, 1666px 1561px currentColor, 955px 304px currentColor, 323px 778px currentColor, 272px 443px currentColor,
    485px 581px currentColor, 1353px 1058px currentColor, 1257px 131px currentColor, 434px 98px currentColor, 1587px 1953px currentColor, 1749px 68px currentColor, 1984px 839px currentColor, 1518px 183px currentColor,
    1071px 855px currentColor, 1662px 1994px currentColor, 1111px 106px currentColor, 1954px 838px currentColor;
}

#stars2 {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  color: var(--stars-color-2);
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    1925px 1320px currentColor, 693px 1778px currentColor, 1016px 711px currentColor, 1171px 563px currentColor, 661px 1919px currentColor, 1610px 44px currentColor, 1275px 140px currentColor, 1208px 1802px currentColor,
    1473px 1587px currentColor, 11px 1117px currentColor, 853px 1757px currentColor, 1149px 937px currentColor, 1353px 428px currentColor, 270px 279px currentColor, 258px 1404px currentColor, 417px 1188px currentColor,
    286px 561px currentColor, 393px 1765px currentColor, 147px 881px currentColor, 666px 1097px currentColor, 1425px 1278px currentColor, 806px 156px currentColor, 1252px 561px currentColor, 218px 52px currentColor,
    1371px 1980px currentColor, 171px 745px currentColor, 1424px 89px currentColor, 137px 244px currentColor, 939px 1922px currentColor, 137px 1080px currentColor, 1757px 50px currentColor, 904px 536px currentColor,
    1938px 1001px currentColor, 1172px 440px currentColor, 72px 1475px currentColor, 102px 121px currentColor, 804px 1671px currentColor, 1314px 270px currentColor, 440px 1341px currentColor, 1216px 511px currentColor,
    1061px 1523px currentColor, 97px 274px currentColor, 704px 1318px currentColor, 52px 1872px currentColor, 1962px 296px currentColor, 111px 289px currentColor, 1157px 1236px currentColor, 1347px 1451px currentColor,
    820px 286px currentColor, 1389px 1169px currentColor, 644px 841px currentColor, 1286px 522px currentColor, 955px 659px currentColor, 428px 1805px currentColor, 237px 557px currentColor, 1689px 1058px currentColor,
    636px 1882px currentColor, 1349px 1664px currentColor, 1548px 432px currentColor, 1841px 504px currentColor, 302px 252px currentColor, 827px 1765px currentColor, 620px 123px currentColor, 207px 748px currentColor,
    1454px 1234px currentColor, 1967px 1790px currentColor, 542px 33px currentColor, 742px 1214px currentColor, 255px 1402px currentColor, 74px 1772px currentColor, 699px 475px currentColor, 980px 1253px currentColor,
    534px 1676px currentColor, 909px 202px currentColor, 1498px 1251px currentColor, 1796px 120px currentColor, 1409px 1263px currentColor, 1627px 995px currentColor, 969px 710px currentColor, 1674px 676px currentColor,
    1832px 759px currentColor, 1623px 563px currentColor, 251px 1790px currentColor, 96px 1688px currentColor, 886px 239px currentColor, 778px 150px currentColor, 1767px 430px currentColor, 765px 1259px currentColor,
    1189px 877px currentColor, 444px 1629px currentColor, 1560px 324px currentColor, 1952px 1097px currentColor, 712px 1173px currentColor, 541px 911px currentColor, 827px 1420px currentColor, 1233px 285px currentColor,
    784px 546px currentColor, 645px 285px currentColor, 1273px 1255px currentColor, 1821px 174px currentColor, 221px 1795px currentColor, 1004px 456px currentColor, 1298px 941px currentColor, 274px 387px currentColor,
    174px 376px currentColor, 1491px 258px currentColor, 1489px 1946px currentColor, 1134px 1382px currentColor, 1289px 1145px currentColor, 464px 358px currentColor, 1249px 1842px currentColor, 1665px 831px currentColor,
    1982px 84px currentColor, 541px 774px currentColor, 1994px 523px currentColor, 762px 1644px currentColor, 1730px 867px currentColor, 1951px 1287px currentColor, 911px 1691px currentColor, 1454px 725px currentColor,
    1287px 1940px currentColor, 70px 564px currentColor, 1980px 638px currentColor, 1674px 1774px currentColor, 1720px 116px currentColor, 1747px 182px currentColor, 1040px 450px currentColor, 1795px 375px currentColor,
    857px 1471px currentColor, 1326px 1730px currentColor, 915px 274px currentColor, 1224px 358px currentColor, 1808px 60px currentColor, 43px 1870px currentColor, 1810px 1536px currentColor, 1564px 1719px currentColor,
    731px 1388px currentColor, 1953px 1967px currentColor, 1744px 1119px currentColor, 794px 1384px currentColor, 959px 714px currentColor, 18px 1932px currentColor, 1358px 1437px currentColor, 355px 939px currentColor,
    1355px 1648px currentColor, 608px 719px currentColor, 383px 758px currentColor, 1164px 1681px currentColor, 1045px 253px currentColor, 424px 1279px currentColor, 1899px 359px currentColor, 379px 488px currentColor,
    214px 465px currentColor, 179px 905px currentColor, 830px 1993px currentColor, 448px 1077px currentColor, 1880px 1354px currentColor, 1973px 347px currentColor, 745px 1025px currentColor, 788px 1007px currentColor,
    1377px 883px currentColor, 6px 290px currentColor, 1312px 407px currentColor, 1398px 622px currentColor, 1405px 339px currentColor, 1198px 1709px currentColor, 988px 1226px currentColor, 87px 1459px currentColor,
    1113px 1698px currentColor, 997px 732px currentColor, 708px 331px currentColor, 1876px 1112px currentColor, 1729px 1797px currentColor, 719px 703px currentColor, 1295px 522px currentColor, 758px 1061px currentColor,
    1309px 1014px currentColor, 1327px 1365px currentColor, 854px 1317px currentColor, 531px 1001px currentColor, 1751px 1040px currentColor, 1354px 190px currentColor, 800px 1538px currentColor, 88px 1455px currentColor,
    668px 39px currentColor, 1379px 41px currentColor, 892px 524px currentColor, 54px 649px currentColor, 1289px 730px currentColor, 727px 488px currentColor, 181px 842px currentColor, 1230px 64px currentColor,
    3px 857px currentColor, 292px 1201px currentColor, 1343px 673px currentColor, 1096px 1412px currentColor, 1520px 292px currentColor, 104px 1683px currentColor, 934px 1387px currentColor, 314px 739px currentColor;
  animation: animStar 100s linear infinite;
}
#stars2:after {
  position: absolute;
  top: 2000px;
  left: 0;
  border-radius: 50%;
  color: var(--stars-color-2);
  content: " ";
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    1925px 1320px currentColor, 693px 1778px currentColor, 1016px 711px currentColor, 1171px 563px currentColor, 661px 1919px currentColor, 1610px 44px currentColor, 1275px 140px currentColor, 1208px 1802px currentColor,
    1473px 1587px currentColor, 11px 1117px currentColor, 853px 1757px currentColor, 1149px 937px currentColor, 1353px 428px currentColor, 270px 279px currentColor, 258px 1404px currentColor, 417px 1188px currentColor,
    286px 561px currentColor, 393px 1765px currentColor, 147px 881px currentColor, 666px 1097px currentColor, 1425px 1278px currentColor, 806px 156px currentColor, 1252px 561px currentColor, 218px 52px currentColor,
    1371px 1980px currentColor, 171px 745px currentColor, 1424px 89px currentColor, 137px 244px currentColor, 939px 1922px currentColor, 137px 1080px currentColor, 1757px 50px currentColor, 904px 536px currentColor,
    1938px 1001px currentColor, 1172px 440px currentColor, 72px 1475px currentColor, 102px 121px currentColor, 804px 1671px currentColor, 1314px 270px currentColor, 440px 1341px currentColor, 1216px 511px currentColor,
    1061px 1523px currentColor, 97px 274px currentColor, 704px 1318px currentColor, 52px 1872px currentColor, 1962px 296px currentColor, 111px 289px currentColor, 1157px 1236px currentColor, 1347px 1451px currentColor,
    820px 286px currentColor, 1389px 1169px currentColor, 644px 841px currentColor, 1286px 522px currentColor, 955px 659px currentColor, 428px 1805px currentColor, 237px 557px currentColor, 1689px 1058px currentColor,
    636px 1882px currentColor, 1349px 1664px currentColor, 1548px 432px currentColor, 1841px 504px currentColor, 302px 252px currentColor, 827px 1765px currentColor, 620px 123px currentColor, 207px 748px currentColor,
    1454px 1234px currentColor, 1967px 1790px currentColor, 542px 33px currentColor, 742px 1214px currentColor, 255px 1402px currentColor, 74px 1772px currentColor, 699px 475px currentColor, 980px 1253px currentColor,
    534px 1676px currentColor, 909px 202px currentColor, 1498px 1251px currentColor, 1796px 120px currentColor, 1409px 1263px currentColor, 1627px 995px currentColor, 969px 710px currentColor, 1674px 676px currentColor,
    1832px 759px currentColor, 1623px 563px currentColor, 251px 1790px currentColor, 96px 1688px currentColor, 886px 239px currentColor, 778px 150px currentColor, 1767px 430px currentColor, 765px 1259px currentColor,
    1189px 877px currentColor, 444px 1629px currentColor, 1560px 324px currentColor, 1952px 1097px currentColor, 712px 1173px currentColor, 541px 911px currentColor, 827px 1420px currentColor, 1233px 285px currentColor,
    784px 546px currentColor, 645px 285px currentColor, 1273px 1255px currentColor, 1821px 174px currentColor, 221px 1795px currentColor, 1004px 456px currentColor, 1298px 941px currentColor, 274px 387px currentColor,
    174px 376px currentColor, 1491px 258px currentColor, 1489px 1946px currentColor, 1134px 1382px currentColor, 1289px 1145px currentColor, 464px 358px currentColor, 1249px 1842px currentColor, 1665px 831px currentColor,
    1982px 84px currentColor, 541px 774px currentColor, 1994px 523px currentColor, 762px 1644px currentColor, 1730px 867px currentColor, 1951px 1287px currentColor, 911px 1691px currentColor, 1454px 725px currentColor,
    1287px 1940px currentColor, 70px 564px currentColor, 1980px 638px currentColor, 1674px 1774px currentColor, 1720px 116px currentColor, 1747px 182px currentColor, 1040px 450px currentColor, 1795px 375px currentColor,
    857px 1471px currentColor, 1326px 1730px currentColor, 915px 274px currentColor, 1224px 358px currentColor, 1808px 60px currentColor, 43px 1870px currentColor, 1810px 1536px currentColor, 1564px 1719px currentColor,
    731px 1388px currentColor, 1953px 1967px currentColor, 1744px 1119px currentColor, 794px 1384px currentColor, 959px 714px currentColor, 18px 1932px currentColor, 1358px 1437px currentColor, 355px 939px currentColor,
    1355px 1648px currentColor, 608px 719px currentColor, 383px 758px currentColor, 1164px 1681px currentColor, 1045px 253px currentColor, 424px 1279px currentColor, 1899px 359px currentColor, 379px 488px currentColor,
    214px 465px currentColor, 179px 905px currentColor, 830px 1993px currentColor, 448px 1077px currentColor, 1880px 1354px currentColor, 1973px 347px currentColor, 745px 1025px currentColor, 788px 1007px currentColor,
    1377px 883px currentColor, 6px 290px currentColor, 1312px 407px currentColor, 1398px 622px currentColor, 1405px 339px currentColor, 1198px 1709px currentColor, 988px 1226px currentColor, 87px 1459px currentColor,
    1113px 1698px currentColor, 997px 732px currentColor, 708px 331px currentColor, 1876px 1112px currentColor, 1729px 1797px currentColor, 719px 703px currentColor, 1295px 522px currentColor, 758px 1061px currentColor,
    1309px 1014px currentColor, 1327px 1365px currentColor, 854px 1317px currentColor, 531px 1001px currentColor, 1751px 1040px currentColor, 1354px 190px currentColor, 800px 1538px currentColor, 88px 1455px currentColor,
    668px 39px currentColor, 1379px 41px currentColor, 892px 524px currentColor, 54px 649px currentColor, 1289px 730px currentColor, 727px 488px currentColor, 181px 842px currentColor, 1230px 64px currentColor,
    3px 857px currentColor, 292px 1201px currentColor, 1343px 673px currentColor, 1096px 1412px currentColor, 1520px 292px currentColor, 104px 1683px currentColor, 934px 1387px currentColor, 314px 739px currentColor;
  animation: animStar 100s linear infinite;
}

#stars3 {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  color: var(--stars-color-3);
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    200px 981px currentColor, 1731px 521px currentColor, 132px 1039px currentColor, 1888px 1547px currentColor, 899px 1226px currentColor, 1887px 580px currentColor, 1548px 1092px currentColor, 1626px 689px currentColor,
    254px 1072px currentColor, 1684px 1211px currentColor, 672px 1267px currentColor, 939px 668px currentColor, 1969px 645px currentColor, 1126px 983px currentColor, 457px 568px currentColor, 476px 876px currentColor,
    829px 1896px currentColor, 1364px 1846px currentColor, 1507px 1120px currentColor, 936px 1948px currentColor, 1833px 832px currentColor, 1424px 285px currentColor, 1377px 1596px currentColor, 432px 153px currentColor,
    1348px 1410px currentColor, 1529px 954px currentColor, 1102px 387px currentColor, 264px 297px currentColor, 811px 977px currentColor, 1931px 673px currentColor, 1734px 978px currentColor, 1772px 1567px currentColor,
    1197px 1400px currentColor, 764px 282px currentColor, 1103px 822px currentColor, 872px 1803px currentColor, 1057px 1763px currentColor, 52px 1299px currentColor, 1312px 1236px currentColor, 235px 1082px currentColor,
    299px 1086px currentColor, 1017px 1602px currentColor, 1950px 626px currentColor, 1306px 132px currentColor, 1358px 1618px currentColor, 1873px 1718px currentColor, 1447px 940px currentColor, 1888px 1195px currentColor,
    1704px 1765px currentColor, 872px 1357px currentColor, 1555px 1120px currentColor, 250px 1415px currentColor, 450px 415px currentColor, 492px 901px currentColor, 170px 1641px currentColor, 56px 1129px currentColor,
    627px 1514px currentColor, 1221px 500px currentColor, 324px 1895px currentColor, 1397px 1775px currentColor, 1966px 598px currentColor, 1550px 763px currentColor, 326px 1605px currentColor, 261px 969px currentColor,
    890px 281px currentColor, 736px 544px currentColor, 589px 1262px currentColor, 1581px 368px currentColor, 1900px 1132px currentColor, 1914px 585px currentColor, 1864px 1517px currentColor, 241px 217px currentColor,
    859px 787px currentColor, 996px 1729px currentColor, 741px 121px currentColor, 418px 414px currentColor, 142px 967px currentColor, 387px 896px currentColor, 703px 562px currentColor, 968px 1136px currentColor,
    1682px 332px currentColor, 1287px 846px currentColor, 256px 1427px currentColor, 1885px 432px currentColor, 1739px 1458px currentColor, 345px 1769px currentColor, 1140px 1612px currentColor, 192px 1921px currentColor,
    920px 471px currentColor, 834px 881px currentColor, 917px 1803px currentColor, 466px 1266px currentColor, 483px 1108px currentColor, 689px 986px currentColor, 1279px 786px currentColor, 458px 910px currentColor,
    1250px 870px currentColor, 785px 1654px currentColor, 1543px 1757px currentColor, 287px 1272px currentColor;
  animation: animStar 150s linear infinite;
}
#stars3:after {
  position: absolute;
  top: 2000px;
  left: 0;
  border-radius: 50%;
  color: var(--stars-color-3);
  content: " ";
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    200px 981px currentColor, 1731px 521px currentColor, 132px 1039px currentColor, 1888px 1547px currentColor, 899px 1226px currentColor, 1887px 580px currentColor, 1548px 1092px currentColor, 1626px 689px currentColor,
    254px 1072px currentColor, 1684px 1211px currentColor, 672px 1267px currentColor, 939px 668px currentColor, 1969px 645px currentColor, 1126px 983px currentColor, 457px 568px currentColor, 476px 876px currentColor,
    829px 1896px currentColor, 1364px 1846px currentColor, 1507px 1120px currentColor, 936px 1948px currentColor, 1833px 832px currentColor, 1424px 285px currentColor, 1377px 1596px currentColor, 432px 153px currentColor,
    1348px 1410px currentColor, 1529px 954px currentColor, 1102px 387px currentColor, 264px 297px currentColor, 811px 977px currentColor, 1931px 673px currentColor, 1734px 978px currentColor, 1772px 1567px currentColor,
    1197px 1400px currentColor, 764px 282px currentColor, 1103px 822px currentColor, 872px 1803px currentColor, 1057px 1763px currentColor, 52px 1299px currentColor, 1312px 1236px currentColor, 235px 1082px currentColor,
    299px 1086px currentColor, 1017px 1602px currentColor, 1950px 626px currentColor, 1306px 132px currentColor, 1358px 1618px currentColor, 1873px 1718px currentColor, 1447px 940px currentColor, 1888px 1195px currentColor,
    1704px 1765px currentColor, 872px 1357px currentColor, 1555px 1120px currentColor, 250px 1415px currentColor, 450px 415px currentColor, 492px 901px currentColor, 170px 1641px currentColor, 56px 1129px currentColor,
    627px 1514px currentColor, 1221px 500px currentColor, 324px 1895px currentColor, 1397px 1775px currentColor, 1966px 598px currentColor, 1550px 763px currentColor, 326px 1605px currentColor, 261px 969px currentColor,
    890px 281px currentColor, 736px 544px currentColor, 589px 1262px currentColor, 1581px 368px currentColor, 1900px 1132px currentColor, 1914px 585px currentColor, 1864px 1517px currentColor, 241px 217px currentColor,
    859px 787px currentColor, 996px 1729px currentColor, 741px 121px currentColor, 418px 414px currentColor, 142px 967px currentColor, 387px 896px currentColor, 703px 562px currentColor, 968px 1136px currentColor,
    1682px 332px currentColor, 1287px 846px currentColor, 256px 1427px currentColor, 1885px 432px currentColor, 1739px 1458px currentColor, 345px 1769px currentColor, 1140px 1612px currentColor, 192px 1921px currentColor,
    920px 471px currentColor, 834px 881px currentColor, 917px 1803px currentColor, 466px 1266px currentColor, 483px 1108px currentColor, 689px 986px currentColor, 1279px 786px currentColor, 458px 910px currentColor,
    1250px 870px currentColor, 785px 1654px currentColor, 1543px 1757px currentColor, 287px 1272px currentColor;
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

.login-card {
    position: relative;
    z-index: 2;
    background: rgba(30, 34, 45, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 42px 40px 32px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 35px rgba(0, 153, 255, 0.25);
    width: 100%;
    max-width: 380px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.login-logo-sphere {
    width: 56px;
    height: 56px;
    margin: -72px auto 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #60a5fa 0%, #2563eb 50%, #0b1120 95%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 153, 255, 0.45);
}

.login-card h2 {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.3px;
}

.login-dots {
    color: #38bdf8;
    letter-spacing: 4px;
    font-size: 14px;
    margin-bottom: 22px;
    font-weight: bold;
}

.login-card input[type="text"],
.login-card input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    background: rgba(13, 17, 23, 0.85);
    color: #ffffff;
    font-size: 14px;
    margin-bottom: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.login-card button {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}

.login-card button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
    transform: translateY(-1px);
}

.login-card button:active {
    background: var(--primary-hover);
    transform: translateY(0);
}

.login-error {
    color: #f87171;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 6px;
    padding: 8px;
    font-size: 12px;
    margin-top: 14px;
    display: none;
}

/* ==========================================
   SISTEMA DE ETIQUETAS Y FILTROS GENERALES
   ========================================== */
.btn-etiquetas {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
    border: none !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
    transition: all 0.2s ease;
}

.btn-etiquetas:hover {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.5);
    transform: translateY(-1px);
}

.filtro-grupo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 12px;
    border-radius: 8px;
    border: 1px solid var(--panel-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.lbl-filtro {
    font-size: 12px;
    color: #cbd5e1;
    font-weight: 700;
    letter-spacing: 0.3px;
}

#filtroEtiqueta,
#filtroEtiquetaGeneral {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700;
    padding: 4px 6px !important;
    outline: none;
    cursor: pointer;
    font-size: 13px;
}

#filtroEtiqueta option,
#filtroEtiquetaGeneral option {
    background: #343840;
    color: #ffffff;
}

/* Diálogos Modales */
.modal-dialog {
    background: var(--panel);
    border-radius: 14px;
    border: 1px solid var(--panel-border);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: zoomIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-etiquetas-dialog {
    width: 95%;
    max-width: 920px;
    max-height: 90vh;
}

.modal-asignar-dialog {
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
}

.modal-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    background: rgba(56, 61, 70, 0.95);
    border-bottom: 1px solid var(--panel-border);
}

.modal-dialog-header h3 {
    margin: 0;
    font-size: 18px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-dialog-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.btn-dialog-close:hover {
    color: #ffffff;
    background: rgba(239, 68, 68, 0.4);
}

.modal-dialog-body {
    padding: 22px;
    overflow-y: auto;
}

/* Layout de dos columnas para Etiquetas */
.etiquetas-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .etiquetas-grid-layout {
        grid-template-columns: 1fr;
    }
}

.etiqueta-form-card,
.etiqueta-list-card {
    background: var(--panel);
    border-radius: 10px;
    padding: 18px;
    border: 1px solid var(--panel-border);
    box-shadow: 0 4px 16px rgba(15, 3, 20, 0.35);
    display: flex;
    flex-direction: column;
}

.etiqueta-form-card h4,
.etiqueta-list-card h4 {
    margin: 0 0 14px 0;
    font-size: 15px;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.form-group label {
    font-size: 12px;
    color: var(--text);
    font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group select {
    background: #222338;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}

.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus,
.form-group select:focus {
    border-color: var(--accent);
}

.form-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Selector de Color y Presets */
.color-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.color-picker-row input[type="color"] {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    background: transparent;
}

.color-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-preset-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
}

.color-preset-dot:hover {
    transform: scale(1.15);
}

.color-preset-dot.active {
    border-color: white;
    transform: scale(1.15);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Checkbox Estilizado */
.form-group-checkbox {
    margin-bottom: 14px;
    padding: 10px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px dashed rgba(37, 99, 235, 0.3);
    border-radius: 6px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    user-select: none;
}

.checkbox-container input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.btn-guardar {
    background: var(--success);
    color: #12131e;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    flex: 1;
    transition: opacity 0.15s;
}

.btn-guardar:hover {
    opacity: 0.9;
}

.btn-cancelar {
    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(51, 65, 85, 0.3) !important;
    transition: all 0.15s ease;
}

.btn-cancelar:hover {
    background: linear-gradient(135deg, #64748b 0%, #334155 100%) !important;
    transform: translateY(-1px);
    opacity: 0.95;
}

/* Lista de Etiquetas */
.list-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.badge-total-etiquetas {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-weight: 700;
}

.etiquetas-lista-scroll {
    overflow-y: auto;
    max-height: 430px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding-right: 4px;
}

.etiqueta-item {
    background: rgba(56, 61, 70, 0.75);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid var(--accent);
    border-top: 1px solid var(--panel-border);
    border-right: 1px solid var(--panel-border);
    border-bottom: 1px solid var(--panel-border);
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
}

.etiqueta-item:hover {
    transform: translateX(3px);
    background: rgba(68, 74, 85, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
}

.etiqueta-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.etiqueta-item-nombre {
    font-size: 14px;
    font-weight: bold;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge-tipo-general {
    font-size: 10px;
    background: rgba(0, 242, 195, 0.15);
    color: var(--success);
    border: 1px solid rgba(0, 242, 195, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.badge-tipo-especifica {
    font-size: 10px;
    background: rgba(29, 140, 248, 0.15);
    color: var(--info);
    border: 1px solid rgba(29, 140, 248, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.etiqueta-item-detalles {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    gap: 12px;
}

.etiqueta-item-acciones {
    display: flex;
    gap: 6px;
}

.btn-item-accion {
    border: none;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}

.btn-item-accion:hover {
    transform: translateY(-1px);
    opacity: 0.95;
}

.btn-item-editar {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important;
}

.btn-item-eliminar {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}

.btn-item-eliminar:hover {
    background: var(--danger);
    color: white;
}

/* Badges en la Tarjeta de PC */
.pc-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
    min-height: 22px;
    align-items: center;
}

.badge-tag-general {
    font-size: 11px;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.badge-tag-especifica {
    font-size: 11px;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.badge-tag-empty {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
}

.btn-asignar-tags {
    background: rgba(30, 64, 175, 0.22);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s, border-color 0.15s;
}

.btn-asignar-tags:hover {
    background: rgba(37, 99, 235, 0.35);
    border-color: var(--accent);
}

/* Contenedor de Checkboxes en Modal Asignar PC */
.checkbox-group-container {
    background: #222338;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s;
}

.checkbox-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.checkbox-item input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--success);
}

.checkbox-tag-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}

.btn-renombrar-pc {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #f1f5f9 !important;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 4px;
}

.btn-renombrar-pc:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.12) 100%);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff !important;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* ==========================================
   SECCIÓN DE REGLAS DE BLOQUEO (APPS Y WEB)
   ========================================== */
.bloqueos-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

.bloqueos-scope-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(18, 4, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.scope-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.scope-badge-tag {
    display: inline-block;
    background: rgba(0, 242, 195, 0.15);
    color: #00f2c3;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.scope-title-col h3 {
    margin: 0 0 6px 0;
    font-size: 20px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.scope-title-col p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.scope-selector-tabs {
    display: flex;
    gap: 10px;
    background: #171828;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: fit-content;
    flex-wrap: wrap;
}

.scope-tab-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.scope-tab-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

.scope-tab-btn.active {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
}

.scope-options-panel {
    background: #171828;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.scope-tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scope-tag-pill {
    background: #232742;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
    user-select: none;
}

.scope-tag-pill:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.scope-tag-pill.active {
    background: rgba(0, 242, 195, 0.18);
    border-color: #00f2c3;
    color: #00f2c3;
    font-weight: bold;
}

.scope-tag-pill input[type="checkbox"] {
    accent-color: #00f2c3;
    cursor: pointer;
}

.scope-select-pc {
    background: #222338;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--text);
    padding: 8px 14px;
    font-size: 13px;
    outline: none;
    min-width: 250px;
    cursor: pointer;
}

.scope-select-pc:focus {
    border-color: var(--accent);
}

.scope-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--text-muted);
}

.btn-reset-scope {
    background: transparent;
    border: 1px solid rgba(253, 93, 147, 0.4);
    color: #fd5d93;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reset-scope:hover {
    background: rgba(253, 93, 147, 0.15);
    border-color: #fd5d93;
}

/* Catálogo de Chips Predeterminados */
.catalogo-chips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
    gap: 8px;
    margin-bottom: 14px;
    max-height: 330px;
    overflow-y: auto;
    padding-right: 4px;
}

.catalogo-chip {
    background: #171828;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    position: relative;
}

.catalogo-chip:hover {
    border-color: rgba(37, 99, 235, 0.45);
    background: rgba(37, 99, 235, 0.1);
}

.catalogo-chip.checked {
    background: rgba(37, 99, 235, 0.18);
    border-color: var(--accent);
}

.catalogo-chip input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin: 0;
}

.catalogo-chip-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.catalogo-chip-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

.catalogo-chip-icon img {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    object-fit: contain;
    display: block;
}

.badge-logo-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    margin-right: 4px;
}

.badge-logo-icon svg {
    width: 13px;
    height: 13px;
    display: block;
}

.badge-logo-icon img {
    width: 13px;
    height: 13px;
    border-radius: 2px;
    object-fit: contain;
    display: block;
}

.catalogo-chip-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    line-height: 1.25;
}

.catalogo-chip-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalogo-chip-sub {
    font-size: 10px;
    font-family: 'Consolas', 'Courier New', monospace;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.catalogo-chip-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    flex-shrink: 0;
}

.catalogo-chip-action-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.catalogo-chip-action-btn.edit-btn {
    color: var(--text-muted);
    opacity: 0.55;
}

.catalogo-chip-action-btn.edit-btn:hover {
    opacity: 1;
    color: #00f2c3;
    background: rgba(0, 242, 195, 0.15);
    transform: scale(1.15);
}

.catalogo-chip-action-btn.delete-btn {
    color: #ff5e7e;
    opacity: 0.5;
    font-weight: 700;
}

.catalogo-chip-action-btn.delete-btn:hover {
    opacity: 1;
    background: rgba(255, 94, 126, 0.2);
    color: #ff3366;
    transform: scale(1.18);
}

.subseccion-titulo {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 12px 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Whitelist de Administrador */
.admin-whitelist-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 14px;
    box-shadow: 0 4px 14px rgba(18, 4, 25, 0.35);
}

.whitelist-quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 10px 0;
}

.btn-sugerencia-whitelist,
.quick-tag-add {
    background: #232742;
    border: 1px dashed rgba(0, 242, 195, 0.4);
    color: #00f2c3;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-sugerencia-whitelist:hover,
.quick-tag-add:hover {
    background: rgba(0, 242, 195, 0.15);
    border-style: solid;
    transform: translateY(-1px);
}

.bloqueos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 20px;
}

.bloqueo-card {
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, border-color 0.2s;
    overflow: hidden;
    min-width: 0;
    box-sizing: border-box;
}

.bloqueo-card:hover {
    border-color: rgba(37, 99, 235, 0.35);
}

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

.bloqueo-card-title {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}

.bloqueo-badge-count {
    background: rgba(37, 99, 235, 0.18);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
}

.bloqueo-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 14px;
    min-height: 36px;
}

.bloqueo-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.bloqueo-input-row input {
    flex: 1;
    min-width: 0;
    background: #171828;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.bloqueo-input-row input:focus {
    border-color: var(--accent);
}

.bloqueo-input-row button {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    border: none;
    color: white;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.1s, opacity 0.2s;
}

.bloqueo-input-row button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ==========================================
   COMPONENTES DE ENTRADA Y AGREGADO MODERNO
   ========================================== */
.bloqueo-add-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.bloqueo-add-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 420px) {
    .bloqueo-add-inputs-grid {
        grid-template-columns: 1fr;
    }
}

.bloqueo-input-with-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.bloqueo-add-input {
    width: 100% !important;
    min-width: 0 !important;
    background: #171828;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.bloqueo-add-input:focus {
    border-color: var(--accent);
}

.btn-anadir-item {
    width: 100%;
    padding: 9px 14px;
    border-radius: 6px;
    border: none;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    transition: transform 0.1s, opacity 0.2s, box-shadow 0.2s;
}

.btn-anadir-item:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.4);
}

.btn-whitelist-permitir {
    background: linear-gradient(135deg, #00f2c3 0%, #00b894 100%);
    color: #12131f;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.1s, opacity 0.2s;
}

.btn-whitelist-permitir:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.bloqueo-add-hint {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    display: block;
}

.bloqueo-password-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 12px;
    box-shadow: 0 4px 14px rgba(18, 4, 25, 0.35);
}

.bloqueo-password-label {
    font-size: 13px;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    color: var(--text);
}

.bloqueo-password-input {
    flex: 1;
    background: #222338;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text);
    font-family: monospace;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

.bloqueo-password-hint {
    color: var(--text-muted);
    font-size: 11px;
    display: block;
    margin-top: 6px;
}

.whitelist-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #00f2c3;
}

.whitelist-badge-count {
    background: rgba(0, 242, 195, 0.15);
    color: #00f2c3;
}

.whitelist-card-desc {
    color: var(--text-muted);
    font-size: 11px;
    display: block;
    margin-bottom: 8px;
}

.whitelist-badge-item {
    border-color: rgba(0, 242, 195, 0.3);
    background: #1a2233;
}

.whitelist-badge-text {
    color: #00f2c3;
}

.sugerencias-header {
    font-size: 11px;
    font-weight: 700;
    color: #00f2c3;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
}

.remoto-info-tag {
    background: #232742;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 12px;
}

.remoto-info-pass-box {
    background: rgba(0, 242, 195, 0.08);
    border: 1px solid rgba(0, 242, 195, 0.25);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

/* Contenedor para autocompletado y selección de iconos theSVG */
.bloqueo-input-col-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

.icono-preview-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 33px;
    background: rgba(0, 242, 195, 0.12);
    border: 1px solid rgba(0, 242, 195, 0.3);
    border-radius: 6px;
    flex-shrink: 0;
}

.icono-preview-badge img,
.icono-preview-badge svg {
    width: 14px;
    height: 14px;
    object-fit: contain;
    display: block;
}

.sugerencias-iconos-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 1000;
    background: #1e2038;
    border: 1px solid rgba(0, 242, 195, 0.35);
    border-radius: 8px;
    max-height: 190px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px;
}

.sugerencia-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    background: #171828;
    border: 1px solid transparent;
    transition: all 0.12s ease;
}

.sugerencia-item:hover {
    background: rgba(0, 242, 195, 0.15);
    border-color: rgba(0, 242, 195, 0.4);
}

.sugerencia-logo-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.sugerencia-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.sugerencia-nombre {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sugerencia-slug {
    font-size: 10px;
    color: var(--text-muted);
}

.sugerencia-tag {
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.bloqueos-items-scroll {
    background: #171828;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    min-height: 160px;
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.bloqueo-badge-item {
    background: #232742;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #e0e4ef;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;
}

.bloqueo-badge-item:hover {
    transform: scale(1.02);
    border-color: var(--accent);
}

.btn-quitar-bloqueo {
    background: transparent;
    border: none;
    color: #fd5d93;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    line-height: 1;
    transition: transform 0.15s, color 0.15s;
}

.btn-quitar-bloqueo:hover {
    color: #ff2266;
    transform: scale(1.25);
}

.bloqueo-empty-msg {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
    width: 100%;
    text-align: center;
    padding: 40px 0;
}

/* Interruptor Toggle Moderno */
.switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #171828;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
    cursor: pointer;
}

.switch-label-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.switch-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.switch-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3b3e5b;
    transition: .3s;
    border-radius: 26px;
}

.slider-switch:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .slider-switch {
    background-color: var(--success);
}

input:checked + .slider-switch:before {
    transform: translateX(24px);
}

/* Guardado y Botones de Acción */
.btn-guardar-bloqueos-master {
    background: linear-gradient(135deg, #00f2c3 0%, #00b894 100%);
    color: #12131f;
    border: none;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 242, 195, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.btn-guardar-bloqueos-master:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 242, 195, 0.5);
}

.toast-flotante {
    position: fixed;
    bottom: 74px;
    right: 20px;
    background: #171828;
    color: var(--text);
    border: 1px solid var(--success);
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: none;
    animation: fadeInSlide 0.3s ease;
}

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   SWITCH FLOTANTE DE TEMA COMPACTO Y CENTRADO
   ========================================== */
.theme-toggle-floating-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 12, 32, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 30px;
    padding: 3px 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 16px rgba(37, 99, 235, 0.2);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
    user-select: none;
}

.theme-toggle-floating-container:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 22px rgba(37, 99, 235, 0.35);
}

body.light-theme .theme-toggle-floating-container {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.theme-switch {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0;
    line-height: 0;
}

.theme-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

.theme-switch-track {
    width: 44px;
    height: 22px;
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    border-radius: 22px;
    position: relative;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-switch input:checked + .theme-switch-track {
    background: linear-gradient(135deg, #18122B 0%, #291B4E 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

.theme-switch input:checked + .theme-switch-track .theme-switch-thumb {
    transform: translateX(22px);
    background: #120c22;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.theme-icon {
    width: 11px;
    height: 11px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -5.5px;
    margin-left: -5.5px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    pointer-events: none;
}

/* Estado Modo Claro (Unchecked) */
.theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.3);
}

/* Estado Modo Oscuro (Checked) */
.theme-switch input:checked + .theme-switch-track .theme-icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.3);
}

.theme-switch input:checked + .theme-switch-track .theme-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ==========================================
   TEMA CLARO GLOBAL (LIGHT MODE COMPLETO - KRONO)
   ========================================== */
body.light-theme {
    --bg: #f8fafc;
    --panel: #ffffff;
    --panel-alt: #fff5f5;
    --text: #1a202c;
    --text-muted: #718096;
    --primary: #e53e3e;
    --primary-hover: #c53030;
    --primary-deep: #9b1c1c;
    --bg-soft: #fff5f5;
    --accent: #e53e3e;
    --success: #38a169;
    --warning: #dd6b20;
    --danger: #e53e3e;
    --info: #3182ce;
    background: var(--bg) !important;
    background-image: none !important;
    color: var(--text);
}

/* Sidebar */
body.light-theme .sidebar {
    background: #ffffff;
    border-right: 1px solid #edf2f7;
}
body.light-theme .sidebar-header,
body.light-theme .sidebar-footer {
    border-color: #edf2f7;
}
body.light-theme .btn-sidebar-toggle {
    color: #4a5568;
}
body.light-theme .nav-item {
    color: #4a5568;
}
body.light-theme .nav-item:hover {
    background: var(--bg-soft);
    color: var(--primary-hover);
}
body.light-theme .nav-item.active {
    background: var(--bg-soft);
    color: var(--primary);
    border-color: var(--primary);
}

/* Topbar y Controles */
body.light-theme .topbar {
    background: #ffffff;
    border: 1px solid #edf2f7;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
body.light-theme .topbar-left h2 {
    color: #1a202c;
}
body.light-theme .controls button {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    font-weight: 700;
    transition: all 0.15s ease;
}

/* En Modo Claro los botones de pantalla MANTIENEN sus degradados vibrantes y legibles */
body.light-theme .btn-actualizar-todos {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35) !important;
}
body.light-theme .btn-actualizar-todos:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
    box-shadow: 0 5px 14px rgba(245, 158, 11, 0.5) !important;
}

body.light-theme .btn-servidores-respaldo {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35) !important;
}
body.light-theme .btn-servidores-respaldo:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
    box-shadow: 0 5px 14px rgba(2, 132, 199, 0.5) !important;
}

body.light-theme .btn-etiquetas {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35) !important;
}
body.light-theme .btn-etiquetas:hover {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.5) !important;
}

body.light-theme .btn-pag {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35) !important;
}
body.light-theme .btn-pag:hover {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.5) !important;
}

body.light-theme .badge-page-info {
    background: #edf2f7 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

body.light-theme .btn-logout {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35) !important;
}
body.light-theme .btn-logout:hover {
    background: linear-gradient(135deg, #f87171 0%, #b91c1c 100%) !important;
    box-shadow: 0 5px 14px rgba(239, 68, 68, 0.5) !important;
}

body.light-theme .btn-hamburger {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #4a5568;
}
body.light-theme .btn-hamburger:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

/* Tarjetas y Paneles */
body.light-theme .bloqueo-card,
body.light-theme .bloqueos-scope-card,
body.light-theme .pc-card,
body.light-theme .metric-card,
body.light-theme .panel-scope-bar,
body.light-theme .admin-whitelist-card,
body.light-theme .modal-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
}

/* Franja superior de KPIs en Modo Claro (Mantiene su color y grosor de 4px) */
body.light-theme .kpi-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-top: 4px solid var(--primary) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
}
body.light-theme .kpi-card.kpi-total { border-top-color: #3182ce !important; }
body.light-theme .kpi-card.kpi-activos { border-top-color: #38a169 !important; }
body.light-theme .kpi-card.kpi-inactivos { border-top-color: var(--primary) !important; }
body.light-theme .kpi-card.kpi-warning { border-top-color: #dd6b20 !important; }
body.light-theme .kpi-card.kpi-danger { border-top-color: var(--primary-deep) !important; }
body.light-theme .kpi-card.kpi-info-box { border-top-color: #2563eb !important; }

/* Botones con degradados en Modo Claro */
body.light-theme .btn-renombrar-pc {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 1px solid #93c5fd !important;
    color: #1e40af !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2) !important;
}
body.light-theme .btn-renombrar-pc:hover {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border-color: #3b82f6 !important;
    color: #1e3a8a !important;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.35) !important;
}

body.light-theme .btn-control {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3) !important;
}
body.light-theme .btn-control:hover {
    background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
}

body.light-theme .btn-asignar-tags {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25) !important;
}
body.light-theme .btn-asignar-tags:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}

/* Tipografía, Labels y Textos */
body.light-theme label,
body.light-theme .form-group label,
body.light-theme .switch-title,
body.light-theme .subseccion-titulo,
body.light-theme .bloqueo-card-title,
body.light-theme .scope-title-col h3,
body.light-theme .modal-dialog-header h3,
body.light-theme .etiqueta-item-nombre,
body.light-theme .checkbox-tag-label,
body.light-theme .metric-pc-name strong,
body.light-theme .kpi-val,
body.light-theme .bloqueo-password-label,
body.light-theme .metric-label-row strong {
    color: #0f172a !important;
}

body.light-theme .form-hint,
body.light-theme .switch-hint,
body.light-theme .bloqueo-card-desc,
body.light-theme .scope-title-col p,
body.light-theme .kpi-label,
body.light-theme .metric-os,
body.light-theme .net-col .net-lbl,
body.light-theme .bloqueo-empty-msg,
body.light-theme .catalogo-chip-sub,
body.light-theme .sugerencia-slug,
body.light-theme .bloqueo-add-hint,
body.light-theme .bloqueo-password-hint,
body.light-theme .whitelist-card-desc,
body.light-theme .lbl-filtro,
body.light-theme .sidebar-footer,
body.light-theme small {
    color: #64748b !important;
}

body.light-theme code {
    background: #e2e8f0;
    color: #0f172a;
    padding: 2px 5px;
    border-radius: 4px;
}

/* Formularios, Inputs y Selects */
body.light-theme input,
body.light-theme select,
body.light-theme textarea,
body.light-theme .bloqueo-add-input,
body.light-theme .bloqueo-password-input {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

body.light-theme input::placeholder,
body.light-theme .bloqueo-add-input::placeholder {
    color: #94a3b8 !important;
}

body.light-theme input:focus,
body.light-theme select:focus,
body.light-theme textarea:focus,
body.light-theme .bloqueo-add-input:focus {
    border-color: var(--accent) !important;
    background: #ffffff !important;
}

/* Botones de Acción Añadir y Whitelist */
body.light-theme .btn-anadir-item {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
}
body.light-theme .btn-anadir-item:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

body.light-theme .btn-whitelist-permitir {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
}

body.light-theme .btn-guardar,
body.light-theme .btn-guardar-bloqueos-master {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(5, 150, 105, 0.25);
}

body.light-theme .btn-cancelar {
    background: #e2e8f0;
    color: #334155;
    border: 1px solid #cbd5e1;
}
body.light-theme .btn-cancelar:hover {
    background: #cbd5e1;
    color: #0f172a;
}

body.light-theme .btn-tool {
    background: #f1f5f9;
    color: #1e293b;
    border: 1px solid #cbd5e1;
}
body.light-theme .btn-tool:hover {
    background: #e2e8f0;
    color: #0f172a;
}

body.light-theme .btn-dialog-close {
    color: #64748b;
}
body.light-theme .btn-dialog-close:hover {
    color: #e11d48;
    background: #ffe4e6;
}

/* Chips del Catálogo de Bloqueo */
body.light-theme .catalogo-chip {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}
body.light-theme .catalogo-chip:hover {
    background: #f1f5f9;
    border-color: rgba(37, 99, 235, 0.4);
}
body.light-theme .catalogo-chip.checked {
    background: rgba(37, 99, 235, 0.08);
    border-color: var(--accent);
}
body.light-theme .catalogo-chip-title {
    color: #0f172a;
}
body.light-theme .catalogo-chip-action-btn.edit-btn {
    color: #64748b;
}
body.light-theme .catalogo-chip-action-btn.edit-btn:hover {
    color: #059669;
    background: #d1fae5;
}
body.light-theme .catalogo-chip-action-btn.delete-btn {
    color: #e11d48;
}
body.light-theme .catalogo-chip-action-btn.delete-btn:hover {
    background: #ffe4e6;
    color: #be123c;
}

/* Interruptor UAC y Tarjetas de Seguridad */
body.light-theme .switch-wrapper {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
body.light-theme .switch-wrapper:hover {
    background: #f1f5f9;
}
body.light-theme .slider-switch {
    background-color: #cbd5e1;
}
body.light-theme input:checked + .slider-switch {
    background-color: var(--success);
}
body.light-theme .admin-whitelist-card,
body.light-theme .bloqueo-password-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
body.light-theme .whitelist-card-title {
    color: #047857;
}
body.light-theme .whitelist-badge-count {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
body.light-theme .whitelist-badge-item {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}
body.light-theme .whitelist-badge-text {
    color: #047857;
}
body.light-theme .btn-sugerencia-whitelist,
body.light-theme .quick-tag-add {
    background: #ecfdf5;
    border: 1px dashed #059669;
    color: #047857;
}
body.light-theme .btn-sugerencia-whitelist:hover,
body.light-theme .quick-tag-add:hover {
    background: #d1fae5;
    border-style: solid;
}
body.light-theme .bloqueos-items-scroll {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}
body.light-theme .bloqueo-badge-item {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Buscador de Iconos theSVG */
body.light-theme .sugerencias-iconos-dropdown {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
body.light-theme .sugerencias-header {
    color: #047857;
    border-bottom: 1px solid #e2e8f0;
}
body.light-theme .sugerencia-item {
    background: #f8fafc;
    border-color: #e2e8f0;
}
body.light-theme .sugerencia-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
body.light-theme .sugerencia-nombre {
    color: #0f172a;
}
body.light-theme .icono-preview-badge {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

/* Alcance y Filtros (Scope Bar) */
body.light-theme .scope-selector-tabs {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
body.light-theme .scope-tab-btn {
    background: transparent;
    color: #475569;
    border: none;
}
body.light-theme .scope-tab-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}
body.light-theme .scope-tab-btn.active {
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3);
}
body.light-theme .scope-options-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
body.light-theme .scope-tag-pill {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
}
body.light-theme .scope-tag-pill:hover {
    background: #f1f5f9;
    border-color: var(--accent);
}
body.light-theme .scope-tag-pill.active {
    background: #ecfdf5;
    border-color: #059669;
    color: #047857;
}
body.light-theme .scope-status-bar {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
}
body.light-theme .btn-reset-scope {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}
body.light-theme .btn-reset-scope:hover {
    background: #fecaca;
}
body.light-theme .filtro-grupo {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
body.light-theme #filtroEtiqueta,
body.light-theme #filtroEtiquetaGeneral {
    color: #0f172a !important;
}
body.light-theme #filtroEtiqueta option,
body.light-theme #filtroEtiquetaGeneral option {
    background: #ffffff;
    color: #0f172a;
}

/* Modales */
body.light-theme .modal-dialog {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
body.light-theme .modal-dialog-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
body.light-theme .etiqueta-form-card,
body.light-theme .etiqueta-list-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
body.light-theme .etiqueta-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--accent);
}
body.light-theme .etiqueta-item:hover {
    background: #f1f5f9;
}
body.light-theme .btn-item-editar {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25) !important;
}
body.light-theme .btn-item-eliminar {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
}
body.light-theme .badge-total-etiquetas {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    color: #475569;
}
body.light-theme .checkbox-group-container {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
}
body.light-theme .checkbox-item:hover {
    background: #f1f5f9;
}
body.light-theme .form-group-checkbox {
    background: #eff6ff;
    border: 1px dashed rgba(37, 99, 235, 0.3);
}

/* Telemetría y Diagnóstico */
body.light-theme .progress-bar {
    background: #e2e8f0;
}
body.light-theme .metric-net-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
body.light-theme .metric-tag {
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
}
body.light-theme .rec-ok {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
body.light-theme .rec-warning {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
body.light-theme .rec-danger {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
body.light-theme .remoto-info-tag {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #1e293b;
}
body.light-theme .remoto-info-pass-box {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

/* Toast Notificación */
body.light-theme .toast-flotante {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid var(--success);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Modo Claro para Login Overlay y Card con partículas/bolas rojizas tenues */
body.light-theme .login-overlay {
    background: radial-gradient(ellipse at bottom, #fff5f5 0%, #ffffff 60%, #f8fafc 100%);
    --stars-color-1: rgba(248, 113, 113, 0.28);
    --stars-color-2: rgba(239, 68, 68, 0.32);
    --stars-color-3: rgba(220, 38, 38, 0.36);
}

body.light-theme .login-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(229, 62, 62, 0.18);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05), 0 0 35px rgba(229, 62, 62, 0.14);
}

body.light-theme .login-logo-sphere {
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e0 45%, #1a202c 95%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 0 20px rgba(229, 62, 62, 0.25);
}

body.light-theme .login-card h2 {
    color: #1a202c;
}

body.light-theme .login-dots {
    color: var(--primary);
}

body.light-theme .login-card input[type="text"],
body.light-theme .login-card input[type="password"] {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #1a202c;
}

body.light-theme .login-card input[type="text"]:focus,
body.light-theme .login-card input[type="password"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.18);
}

body.light-theme .login-card button {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.35);
    color: #ffffff;
}

body.light-theme .login-card button:hover {
    background: linear-gradient(135deg, #f87171 0%, #9b1c1c 100%);
    box-shadow: 0 6px 20px rgba(229, 62, 62, 0.5);
    transform: translateY(-1px);
}

body.light-theme .login-error {
    color: var(--primary);
    background: var(--bg-soft);
    border: 1px solid rgba(229, 62, 62, 0.2);
}

/* ==========================================
   MODAL OVERLAY Y EDICIÓN DE BLOQUEOS
   ========================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 11, 20, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeInModal 0.2s ease;
}

.modal-card {
    background: var(--panel);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: zoomInModal 0.2s ease;
}

.modal-card .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomInModal {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Cursor virtual del usuario remoto en pantalla (Opción 2) */
.virtual-cursor {
    position: absolute;
    pointer-events: none;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 4px;
    transform: translate(-2px, -2px);
    transition: left 0.04s linear, top 0.04s linear;
}

.virtual-cursor svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}

.virtual-cursor-tag {
    background: #ff3366;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ==========================================
   AJUSTES RESPONSIVE DE CABECERA Y LAYOUT
   ========================================== */
.topbar {
    flex-wrap: wrap;
    gap: 12px;
}

.topbar-left {
    flex-wrap: wrap;
    min-width: 0;
}

#estado {
    white-space: nowrap;
}

.topbar-right {
    flex: 1 1 420px;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.topbar-right .controls {
    justify-content: flex-end;
}

.pc-card,
.metric-card,
.bloqueo-card {
    min-width: 0;
}

@media (max-width: 768px) {
    .main-wrapper,
    body.sidebar-expanded .main-wrapper {
        /* En móvil la barra expandida se superpone en lugar de empujar el contenido */
        margin-left: var(--sidebar-w);
        width: calc(100% - var(--sidebar-w));
        padding: 12px;
    }

    body.sidebar-expanded .sidebar {
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.45);
    }

    .topbar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }

    .topbar-left h2 {
        font-size: 17px;
    }

    .topbar-right,
    .topbar-right .controls {
        flex: none;
        width: 100%;
        justify-content: flex-start;
    }

    .controls {
        gap: 8px;
    }

    .filtro-grupo {
        flex: 1 1 100%;
        min-width: 0;
    }

    .filtro-grupo select {
        flex: 1;
        min-width: 0;
        max-width: 100%;
    }

    .paginacion-controls {
        flex-wrap: wrap;
    }

    .theme-toggle-floating-container {
        bottom: 12px;
        right: 12px;
    }
}

.metric-header {
    flex-wrap: wrap;
    gap: 8px;
}

.metric-pc-name {
    min-width: 0;
}

.metric-pc-name > div:first-child {
    flex-wrap: wrap;
}

.metric-pc-name strong {
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}