@charset "UTF-8";
/* CSS EXTRA */


/* =========================
   ICONOS COLORIDOS (sin cambiar el layout)
   ========================= */

/* Icono grande del login header (candado) */
.login.login-v2 .login-header .icon i{
  color: #22c55e !important;          /* verde */
  opacity: .95 !important;
  text-shadow: 0 0 18px rgba(38, 233, 109, 0.519);
}

/* Iconos dentro de inputs (FontAwesome) si los tienes */
.login .form-control + .input-group-append i,
.login .form-control + i,
.login i.fa,
.login i.fas,
.login i.far,
.login i.fal,
.login i.fab{
  color: #60a5fa;                      /* azul */
}

/* Botón login: iconos (si algún día le pones) */
.login .btn i{
  color: #10faeea9 !important;
}

/* Colores por tipo de ícono (solo pinta, no mueve nada) */
i.fa-user, i.fa-users { color: #04a43f !important; }           /* verde */
i.fa-lock { color: #f59e0b !important; }       /* amarillo */
i.fa-envelope, i.fa-at { color: #38bdf8 !important; }          /* celeste */
i.fa-triangle-exclamation, i.fa-exclamation-circle { color: #ef4444 !important; } /* rojo */

/* “Recuperarla aquí” un poquito más pro */
.login-content a[data-target="#modalrecover"]{
  color: #a78bfa !important;           /* morado */
  font-weight: 700;
  text-decoration: none;
}
.login-content a[data-target="#modalrecover"]:hover{
  color: #c4b5fd !important;
  text-decoration: underline;
}

/* Modal: iconos dentro del modal (si los hay) */
.modal i.fa,
.modal i.fas,
.modal i.far,
.modal i.fal,
.modal i.fab{
  color: #a78bfa !important;
}


/* =========================
   NEON POR CATEGORIA - SIDEBAR MKWS
   ========================= */

/* Base (siempre aplica, pero luego cada categoría sobre-escribe color) */
#sidebar .nav > li > a i,
#sidebar .nav .sub-menu > li > a i{
  transition: all .18s ease;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.18));
}

/* ========= GESTION DE RED (cyan) ========= */
#sidebar .nav > li.menu-gestion > a i,
#sidebar .nav > li.menu-gestion .sub-menu > li > a i{
  color: #00eaff !important;
  text-shadow: 0 0 10px rgba(0,234,255,.75), 0 0 22px rgba(0,234,255,.35) !important;
  filter: drop-shadow(0 0 10px rgba(0,234,255,.65));
}
#sidebar .nav > li.menu-gestion > a:hover i,
#sidebar .nav > li.menu-gestion .sub-menu > li > a:hover i{
  color: #7dfcff !important;
  filter: drop-shadow(0 0 14px rgba(0,234,255,.8));
}

/* ========= SERVICIOS (verde) ========= */
#sidebar .nav > li.menu-servicios > a i,
#sidebar .nav > li.menu-servicios .sub-menu > li > a i{
  color: #5cffb8 !important;
  text-shadow: 0 0 10px rgba(92,255,184,.75), 0 0 22px rgba(92,255,184,.35) !important;
  filter: drop-shadow(0 0 10px rgba(92,255,184,.65));
}
#sidebar .nav > li.menu-servicios > a:hover i,
#sidebar .nav > li.menu-servicios .sub-menu > li > a:hover i{
  color: #baffdf !important;
  filter: drop-shadow(0 0 14px rgba(92,255,184,.8));
}

/* ========= CLIENTES (morado) ========= */
#sidebar .nav > li.has-sub:not(.menu-gestion):not(.menu-servicios) > a i.fa-users,
#sidebar .nav > li.has-sub:not(.menu-gestion):not(.menu-servicios) .sub-menu > li > a i.fa-users,
#sidebar .nav > li.has-sub:not(.menu-gestion):not(.menu-servicios) .sub-menu > li > a i.fa-street-view,
#sidebar .nav > li.has-sub:not(.menu-gestion):not(.menu-servicios) .sub-menu > li > a i.fa-megaphone,
#sidebar .nav > li.has-sub:not(.menu-gestion):not(.menu-servicios) .sub-menu > li > a i.fa-inbox-full,
#sidebar .nav > li.has-sub:not(.menu-gestion):not(.menu-servicios) .sub-menu > li > a i.fa-user-helmet-safety,
#sidebar .nav > li.has-sub:not(.menu-gestion):not(.menu-servicios) .sub-menu > li > a i.fa-file-signature,
#sidebar .nav > li.has-sub:not(.menu-gestion):not(.menu-servicios) .sub-menu > li > a i.fa-bell-ring{
  color: #7e5be9 !important;
  text-shadow: 0 0 10px rgba(113, 66, 254, 0.653), 0 0 22px rgba(119, 78, 241, 0.35) !important;
  filter: drop-shadow(0 0 10px rgba(167,139,250,.65));
}


/* ========= FICHAS HOTSPOT (amarillo) ========= */
#sidebar .nav > li.has-sub > a i.fa-wifi,
#sidebar .nav > li.has-sub .sub-menu > li > a i.fa-tickets,
#sidebar .nav > li.has-sub .sub-menu > li > a i.fa-router,
#sidebar .nav > li.has-sub .sub-menu > li > a i.fa-table-list{
  color: #facc15 !important;
  text-shadow: 0 0 10px rgba(250,204,21,.7), 0 0 22px rgba(250,204,21,.32) !important;
  filter: drop-shadow(0 0 10px rgba(250,204,21,.55));
}

/* ========= TAREAS (naranja) ========= */
#sidebar .nav > li > a i.fa-calendar-alt{
  color: #fb923c !important;
  text-shadow: 0 0 10px rgba(251,146,60,.7), 0 0 22px rgba(251,146,60,.32) !important;
  filter: drop-shadow(0 0 10px rgba(251,146,60,.55));
}

/* ========= FINANZAS (verde-lima) ========= */
#sidebar .nav > li.has-sub > a i.fa-hand-holding-usd,
#sidebar .nav > li.has-sub .sub-menu > li > a i.fa-file-invoice-dollar,
#sidebar .nav > li.has-sub .sub-menu > li > a i.fa-dollar-sign,
#sidebar .nav > li.has-sub .sub-menu > li > a i.fa-cash-register,
#sidebar .nav .sub-menu i.fa-money-bill-transfer,
#sidebar .nav .sub-menu i.fa-comments-dollar,
#sidebar .nav .sub-menu i.fa-chart-mixed-up-circle-dollar,
#sidebar .nav > li.has-sub .sub-menu > li > a i.fa-building-columns{
  color: #84cc16 !important;
  text-shadow: 0 0 10px rgba(132,204,22,.7), 0 0 22px rgba(132,204,22,.32) !important;
  filter: drop-shadow(0 0 10px rgba(132,204,22,.55));
}

/* ========= ALMACEN (azul) ========= */
#sidebar .nav > li.has-sub > a i.fa-shop,
#sidebar .nav > li.has-sub .sub-menu > li > a i.fa-boxes-stacked,
#sidebar .nav > li.has-sub .sub-menu > li > a i.fa-truck,
#sidebar .nav > li.has-sub .sub-menu > li > a i.fa-pallet-boxes{
  color: #60a5fa !important;
  text-shadow: 0 0 10px rgba(96,165,250,.75), 0 0 22px rgba(96,165,250,.35) !important;
  filter: drop-shadow(0 0 10px rgba(96,165,250,.6));
}

/* ========= TICKETS SOPORTE (rojo) ========= */
#sidebar .nav > li.has-sub > a i.fa-tickets,
#sidebar .nav .sub-menu > li > a i.fa-ear-listen,
#sidebar .nav .sub-menu > li > a i.fa-bullhorn,
#sidebar .nav .sub-menu > li > a i.fa-ban{
  color: #ef4444 !important;
  text-shadow: 0 0 10px rgba(239,68,68,.75), 0 0 22px rgba(239,68,68,.35) !important;
  filter: drop-shadow(0 0 10px rgba(239,68,68,.6));
}

/* ========= MENSAJERIA (verde whatsapp) ========= */
#sidebar .nav > li.has-sub > a i.fa-comments,
#sidebar .nav .sub-menu > li > a i.fa-whatsapp,
#sidebar .nav .sub-menu > li > a i.fa-comment-sms{
  color: #22c55e !important;
  text-shadow: 0 0 10px rgba(34,197,94,.75), 0 0 22px rgba(34,197,94,.35) !important;
  filter: drop-shadow(0 0 10px rgba(34,197,94,.6));
}

/* ========= AJUSTES (gris/cyan suave) ========= */
#sidebar .nav > li > a i.fa-cogs{
  color: #94a3b8 !important;
  text-shadow: 0 0 10px rgba(148,163,184,.55), 0 0 22px rgba(0,234,255,.18) !important;
  filter: drop-shadow(0 0 10px rgba(148,163,184,.35));
}

/* Imágenes del menú (SmartOLT/Zendesk) no cambian color, solo glow */
#sidebar .nav img{
  filter: drop-shadow(0 0 8px rgba(0,234,255,.5));
}


/* =========================
   GRID DE MODULOS (circulos) - ICONOS NEON
   ========================= */

/* 1) Detecta “tiles” circulares sin depender de una clase exacta */
a[style*="border-radius: 50%"],
a[style*="border-radius:50%"],
.module-circle,
.circle-item,
.tile-circle{
  position: relative;
}

/* 2) Iconos dentro del circulo (FA <i>) */
a[style*="border-radius: 50%"] i,
a[style*="border-radius:50%"] i,
.module-circle i,
.circle-item i,
.tile-circle i{
  opacity: .98;
  filter: drop-shadow(0 0 10px rgba(0,0,0,.25));
  text-shadow: 0 0 14px rgba(255,255,255,.10);
}

/* 3) Si el icono es FontAwesome SVG / duotone */
a[style*="border-radius: 50%"] svg,
a[style*="border-radius:50%"] svg,
.module-circle svg,
.circle-item svg,
.tile-circle svg{
  color: inherit;
  filter: drop-shadow(0 0 10px rgba(0,0,0,.25));
}
a[style*="border-radius: 50%"] svg .fa-primary,
a[style*="border-radius:50%"] svg .fa-primary{
  opacity: 1 !important;
}
a[style*="border-radius: 50%"] svg .fa-secondary,
a[style*="border-radius:50%"] svg .fa-secondary{
  opacity: .55 !important;
}

/* 4) Hover: glow mas fuerte */
a[style*="border-radius: 50%"]:hover i,
a[style*="border-radius:50%"]:hover i,
a[style*="border-radius: 50%"]:hover svg,
a[style*="border-radius:50%"]:hover svg{
  filter: drop-shadow(0 0 14px rgba(255,255,255,.20));
}

/* =========================
   COLORES POR ICONO (segun clase FA)
   Ajusta a tu gusto
   ========================= */

/* General / Sistema */
.fa-cogs, .fa-cog, .fa-gears, .fa-share-square { 
  color: #6d0197 !important; 
  text-shadow: 0 0 16px rgba(197, 34, 186, 0.4);
}

/* Usuarios / Personal */
.fa-users, .fa-user, .fa-user-gear, .fa-user-cog, .fa-user-tag, .fa-user-edit, .fa-users-cog, .fa-user-lock, .fa-user-times { 
  color: #8a16f7 !important; 
  text-shadow: 0 0 16px rgba(167,139,250,.40);
}

/* Correo */
.fa-envelope, .fa-at, .fa-mailbox, .fa-inbox { 
  color: #38bdf8 !important; 
  text-shadow: 0 0 16px rgba(56,189,248,.40);
}

/* Facturacion */
.fa-file-pdf, .fa-file-invoice, .fa-file-invoice-dollar, .fa-file-code, .fa-file, .fa-list-alt { 
  color: #f59e0b !important; 
  text-shadow: 0 0 16px rgba(245,158,11,.40);
}

/* Pasarela de pago */
.fa-hand-holding-usd { 
  color: #0b88f5 !important; 
  text-shadow: 0 0 16px rgba(245, 159, 11, 0.462);
}

/* Editor de Planilla */
.fa-code, .fa-retweet, .fa-clock, .fa-sync-alt, .fa-chart-bar, .fa-wifi { 
  color: #05ab95 !important; 
  text-shadow: 0 0 16px rgba(11, 183, 245, 0.462);
}

/* Pago */
.fa-hand-holding-dollar, .fa-money-bill, .fa-dollar-sign, .fa-cash-register, .fa-shopping-cart { 
  color: #84cc16 !important; 
  text-shadow: 0 0 16px rgba(132,204,22,.40);
}

/* Push / Notificaciones */
.fa-bell, .fa-bell-ring, .fa-bell-on, .fa-power-off, .fa-cogs, .fa-times { 
  color: #fb7185 !important; 
  text-shadow: 0 0 16px rgba(251,113,133,.40);
}

/* Tickets */
.fa-ticket, .fa-tickets, .fa-life-ring, .fa-search { 
  color: #60a5fa !important; 
  text-shadow: 0 0 16px rgba(96,165,250,.40);
}

/* Map/Google */
.fa-google, .fa-filter, .fa-check, .fa-download, .fa-toolbox { 
  color: #0f8c03 !important; 
  text-shadow: 0 0 16px rgba(238, 13, 13, 0.4);
}

/* Upload */
.fa-upload, .fa-ban, .fa-cloud-upload-alt, .fa-exchange-alt, .fa-tachometer-alt { 
  color: #0808ad !important; 
  text-shadow: 0 0 16px rgba(238, 13, 13, 0.4);
}

/* Cloud */
.fa-cloud, .fa-cloud-arrow-up, .fa-dropbox, .fa-camera { 
  color: #22d3ee !important; 
  text-shadow: 0 0 16px rgba(34,211,238,.40);
}

/* Base de datos */
.fa-database, .fa-server, .fa-laptop, .fa-print, .fa-sitemap { 
  color: #94a3b8 !important; 
  text-shadow: 0 0 16px rgba(16, 225, 208, 0.35);
}

/* Mensajeria */
.fa-comments, .fa-edit, .fa-list-ol, .fa-list-ul { 
  color: #08b74b !important; 
  text-shadow: 0 0 16px rgba(8, 235, 76, 0.35);
}


/* Llave */
.fa-key, .fa-id-card, .fa-badge-check, .fa-map-signs, .fa-trash-alt, .fa-eye { 
  color: #f97316 !important; 
  text-shadow: 0 0 16px rgba(249,115,22,.40);
}

/*licencia */
.fa-info-circle, .fa-wrench, .fa-save, .fa-lg, .fa-plus, .fa-tools { 
  color: hsl(247, 95%, 53%) !important; 
  text-shadow: 0 0 16px rgba(84, 73, 233, 0.4);
}

/* ===== EFECTO HOVER SUAVE ===== */
@keyframes neonPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255,255,255,.2)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 16px rgba(255,255,255,.4)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255,255,255,.2)); }
}

/* Aplica a íconos en sidebar al hacer hover */
#sidebar .nav > li > a:hover i,
#sidebar .nav .sub-menu > li > a:hover i {
  animation: neonPulse 1s ease-out;
}

/* Aplica también al login (icono del candado y otros) */
.login .form-control + .input-group-append i:hover,
.login .form-control + i:hover,
.login i.fa:hover {
  animation: neonPulse 0.4s ease-out;
}