@charset "UTF-8";
/*
 * SmartZolt Manager - FontAwesome 7 & Utilities
 */

/* Forzar renderizado de estilo Light (fa-light) */
.fa-light,
.fal {
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 300 !important;
}

/* Forzar renderizado de estilo Duotone */
.fa-duotone,
.fad {
  font-family: "Font Awesome 7 Duotone" !important;
  font-weight: 900 !important;
}

/* Forzar renderizado de estilo Regular */
.fa-regular,
.far {
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 400 !important;
}

/* Forzar renderizado de estilo Solid */
.fa-solid,
.fas {
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 900 !important;
}

/* Forzar renderizado de estilo Thin */
.fa-thin,
.fat {
  font-family: "Font Awesome 7 Pro" !important;
  font-weight: 100 !important;
}

/* Forzar marcas registradas */
.fa-brands,
.fab {
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}

/* Estilos de botones de ícono y micro-animaciones */
.btn-icon-hover {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.22s ease !important;
}

.btn-icon-hover:hover {
  transform: scale(1.25) rotate(5deg) !important;
}

:root {
  --theme-accent: #00acac;
  --theme-accent-alpha: rgba(0, 172, 172, 0.25);
}

/* Jerarquía de capas z-index: Header > Sidebar > Submenú flotante */
#header,
.header {
  z-index: 1040 !important;
}

.sidebar,
#sidebar {
  z-index: 1030 !important;
}

/* Corregir posición del primer icono en el menú colapsado/miniminizado */
.page-sidebar-minified .sidebar {
  padding-top: 55px !important;
}

/* Garantizar visibilidad nativa de íconos en menú minimizado */
.page-sidebar-minified .sidebar .nav>li>a>i,
.page-sidebar-minified .sidebar .nav>li>a>[class*="fa-"],
.page-sidebar-minified .sidebar .nav>li>a>img {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Estilo Premium de Submenús: Fondo Oscuro Profundo, Adaptativo, Sin Borde & Íconos Estilizados
   ========================================================================== */

/* 1. Fondo Oscuro Profundo Unificado sin Espacios ni Desfases de Color entre Menú y Submenú */
.float-sub-menu-container {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 1020 !important;
}

.sidebar .sub-menu,
.float-sub-menu,
.page-sidebar-minified .sidebar .nav>li>.sub-menu,
.page-sidebar-minified .sidebar .nav>li:hover>.sub-menu {
  background: rgba(10, 14, 20, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  min-width: 210px !important;
  max-width: 320px !important;
  max-height: calc(100vh - 70px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1020 !important;
  padding-left: 20px !important;
  margin-left: 0 !important;
}

/* 2. Posición Limpia para Línea Guía Vertical y Puntito en la Punta de la Línea Horizontal */
.sidebar .sub-menu>li:before,
.float-sub-menu-container .float-sub-menu>li:before {
  content: '' !important;
  position: absolute !important;
  left: -14px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  border-left: 1px dashed rgba(255, 255, 255, 0.25) !important;
  background: transparent !important;
  z-index: 5 !important;
}

/* Línea conectora horizontal desde la vertical hacia el ícono */
.sidebar .sub-menu>li>a:after,
.float-sub-menu-container .float-sub-menu>li>a:after {
  content: '' !important;
  position: absolute !important;
  left: -14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 1px !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.25) !important;
  background: transparent !important;
  z-index: 5 !important;
}

/* Puntito situado exactamente en la PUNTA de la línea horizontal (dirigiéndose al ícono) */
.sidebar .sub-menu>li:after,
.float-sub-menu-container .float-sub-menu>li:after {
  content: '' !important;
  position: absolute !important;
  left: -3px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #38bdf8 !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  z-index: 6 !important;
}

/* Estilo del Sidebar Principal: Fondo Oscuro Profundo (Idéntico al Submenú) */
.sidebar,
#sidebar,
.sidebar-bg,
.page-sidebar-minified .sidebar,
.sidebar .nav {
  background: rgba(10, 14, 20, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* 3. Color Blanco Ligeramente Suavizado para Texto del Menú Principal (Menos Intenso, Iconos desplazados a la izquierda) */
.sidebar .nav>li>a {
  padding: 10px 10px 10px 10px !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-left: 3px solid transparent !important;
}

.sidebar .nav>li>a,
.sidebar .nav>li>a>span {
  color: rgba(248, 250, 252, 0.90) !important;
  font-weight: 400 !important;
}

/* Íconos del Menú Principal: Finos, Alineados y con Colores Dinámicos Alternados */
.sidebar .nav>li>a>i,
.sidebar .nav>li>a>[class*="fa-"] {
  font-weight: 300 !important;
  font-size: 15px !important;
  min-width: 18px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 6px !important;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.22s ease !important;
}

/* Paleta Vibrante Fina para Íconos del Menú Principal */
.sidebar .nav>li:nth-child(6n+1)>a>i,
.sidebar .nav>li:nth-child(6n+1)>a>[class*="fa-"] {
  color: #38bdf8 !important;
  /* Celeste */
}

.sidebar .nav>li:nth-child(6n+2)>a>i,
.sidebar .nav>li:nth-child(6n+2)>a>[class*="fa-"] {
  color: #fb7185 !important;
  /* Coral / Rosa */
}

.sidebar .nav>li:nth-child(6n+3)>a>i,
.sidebar .nav>li:nth-child(6n+3)>a>[class*="fa-"] {
  color: #34d399 !important;
  /* Esmeralda */
}

.sidebar .nav>li:nth-child(6n+4)>a>i,
.sidebar .nav>li:nth-child(6n+4)>a>[class*="fa-"] {
  color: #a78bfa !important;
  /* Violeta */
}

.sidebar .nav>li:nth-child(6n+5)>a>i,
.sidebar .nav>li:nth-child(6n+5)>a>[class*="fa-"] {
  color: #fbbf24 !important;
  /* Ámbar */
}

.sidebar .nav>li:nth-child(6n+0)>a>i,
.sidebar .nav>li:nth-child(6n+0)>a>[class*="fa-"] {
  color: #2dd4bf !important;
  /* Turquesa */
}

/* Micro-animación y Resaltado en Hover/Active para el Menú Principal */
.sidebar .nav>li>a:hover,
.sidebar .nav>li>a:focus,
.sidebar .nav>li.active>a {
  color: #ffffff !important;
  background: var(--theme-accent-alpha, rgba(0, 172, 172, 0.25)) !important;
  border-left: 3px solid var(--theme-accent, #00acac) !important;
}

.sidebar .nav>li>a:hover>i,
.sidebar .nav>li>a:hover>[class*="fa-"] {
  transform: scale(1.22) rotate(4deg) !important;
}

/* 4. Estilo Adaptativo y Alineado para Texto del Submenú (Desplazado a la izquierda, Ultra Ligero) */
.sidebar .sub-menu>li>a,
.float-sub-menu>li>a {
  padding: 6px 10px 6px 4px !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.sidebar .sub-menu>li>a,
.sidebar .sub-menu>li>a>span,
.float-sub-menu>li>a,
.float-sub-menu>li>a>span {
  color: rgba(248, 250, 252, 0.88) !important;
  font-weight: 300 !important;
  transition: all 0.2s ease !important;
}

/* 5. Íconos del Submenú: Alineados, Finos y con Colores Dinámicos Alternados */
.sidebar .sub-menu>li>a>i,
.sidebar .sub-menu>li>a>[class*="fa-"],
.float-sub-menu>li>a>i,
.float-sub-menu>li>a>[class*="fa-"] {
  font-weight: 300 !important;
  font-size: 13px !important;
  min-width: 16px !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

/* Paleta Vibrante Fina para Íconos del Submenú (Saltando Colores) */
.sidebar .sub-menu>li:nth-child(6n+1)>a>i,
.sidebar .sub-menu>li:nth-child(6n+1)>a>[class*="fa-"],
.float-sub-menu>li:nth-child(6n+1)>a>i,
.float-sub-menu>li:nth-child(6n+1)>a>[class*="fa-"] {
  color: #38bdf8 !important;
  /* Celeste */
}

.sidebar .sub-menu>li:nth-child(6n+2)>a>i,
.sidebar .sub-menu>li:nth-child(6n+2)>a>[class*="fa-"],
.float-sub-menu>li:nth-child(6n+2)>a>i,
.float-sub-menu>li:nth-child(6n+2)>a>[class*="fa-"] {
  color: #fb7185 !important;
  /* Coral / Rosa */
}

.sidebar .sub-menu>li:nth-child(6n+3)>a>i,
.sidebar .sub-menu>li:nth-child(6n+3)>a>[class*="fa-"],
.float-sub-menu>li:nth-child(6n+3)>a>i,
.float-sub-menu>li:nth-child(6n+3)>a>[class*="fa-"] {
  color: #34d399 !important;
  /* Esmeralda / Verde */
}

.sidebar .sub-menu>li:nth-child(6n+4)>a>i,
.sidebar .sub-menu>li:nth-child(6n+4)>a>[class*="fa-"],
.float-sub-menu>li:nth-child(6n+4)>a>i,
.float-sub-menu>li:nth-child(6n+4)>a>[class*="fa-"] {
  color: #a78bfa !important;
  /* Violeta */
}

.sidebar .sub-menu>li:nth-child(6n+5)>a>i,
.sidebar .sub-menu>li:nth-child(6n+5)>a>[class*="fa-"],
.float-sub-menu>li:nth-child(6n+5)>a>i,
.float-sub-menu>li:nth-child(6n+5)>a>[class*="fa-"] {
  color: #fbbf24 !important;
  /* Ámbar / Dorado */
}

.sidebar .sub-menu>li:nth-child(6n+0)>a>i,
.sidebar .sub-menu>li:nth-child(6n+0)>a>[class*="fa-"],
.float-sub-menu>li:nth-child(6n+0)>a>i,
.float-sub-menu>li:nth-child(6n+0)>a>[class*="fa-"] {
  color: #2dd4bf !important;
  /* Turquesa */
}

/* 6. Animación Rápida de Latencia / Pulso (0.5s) Exclusiva para el Puntito del Submenú */
@keyframes dotPulse {
  0% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.9);
    background: #38bdf8 !important;
  }

  50% {
    transform: translateY(-50%) scale(1.6);
    box-shadow: 0 0 8px 3px rgba(56, 189, 248, 0.8);
    background: #00acac !important;
  }

  100% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
    background: #38bdf8 !important;
  }
}

.sidebar .sub-menu>li>a:hover,
.sidebar .sub-menu>li:focus>a,
.sidebar .sub-menu>li.active>a,
.float-sub-menu>li>a:hover,
.float-sub-menu>li.active>a {
  color: #ffffff !important;
  background: var(--theme-accent-alpha, rgba(0, 172, 172, 0.25)) !important;
  border-left: 3px solid var(--theme-accent, #00acac) !important;
}

.sidebar .sub-menu>li:hover:after,
.sidebar .sub-menu>li.active:after,
.float-sub-menu-container .float-sub-menu>li:hover:after,
.float-sub-menu-container .float-sub-menu>li:active:after {
  animation: dotPulse 0.5s ease-in-out !important;
}

.sidebar .sub-menu>li>a:hover>i,
.sidebar .sub-menu>li>a:hover>[class*="fa-"],
.float-sub-menu>li>a:hover>i,
.float-sub-menu>li>a:hover>[class*="fa-"] {
  transform: scale(1.15) !important;
}

/* ==========================================================================
   Boton Minify (Colapsar/Expandir Sidebar) - Estilo Pegado al Sidebar & Neutro
   ========================================================================== */
.sidebar .sidebar-minify-btn {
  margin: 15px auto !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  color: rgba(248, 250, 252, 0.75) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer !important;
  width: 100% !important;
  height: auto !important;
  text-align: center !important;
}

.sidebar .sidebar-minify-btn i,
.sidebar .sidebar-minify-btn [class*="fa-"] {
  margin: 0 !important;
  font-size: 16px !important;
  color: #38bdf8 !important;
  --fa-primary-color: #38bdf8 !important;
  --fa-secondary-color: #e2e8f0 !important;
  --fa-secondary-opacity: 0.75 !important;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.22s ease !important;
}

.sidebar .sidebar-minify-btn:hover,
.sidebar .sidebar-minify-btn:focus {
  background: transparent !important;
  border: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.sidebar .sidebar-minify-btn:hover i,
.sidebar .sidebar-minify-btn:hover [class*="fa-"] {
  color: #00e6e6 !important;
  --fa-primary-color: #00e6e6 !important;
  --fa-secondary-color: #ffffff !important;
  --fa-secondary-opacity: 0.95 !important;
  transform: scale(1.2) !important;
}

.page-sidebar-minified .sidebar .sidebar-minify-btn {
  margin: 15px auto !important;
  float: none !important;
}



/* Prevenir desbordamiento horizontal global */
html,
body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

#page-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#content,
.content {
  width: auto !important;
  max-width: none !important;
  overflow-x: hidden !important;
}

/* ==========================================================================
   Estilos & Micro-animaciones para Íconos del Header Superior (Duotone Neutro)
   ========================================================================== */
#header .navbar-nav>li>a {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

#header .navbar-nav>li>a>i,
#header .navbar-nav>li>a>[class*="fa-"] {
  color: #64748b !important;
  --fa-primary-color: #475569 !important;
  --fa-secondary-color: #94a3b8 !important;
  --fa-secondary-opacity: 0.55 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
}

/* Micro-animación Ligera & Cambio de Tono Duotone al pasar el cursor (Hover) */
#header .navbar-nav>li>a:hover>i,
#header .navbar-nav>li>a:hover>[class*="fa-"] {
  color: #0f172a !important;
  --fa-primary-color: #0f172a !important;
  --fa-secondary-color: #475569 !important;
  --fa-secondary-opacity: 0.85 !important;
  transform: scale(1.12) !important;
}

/* Inversión de Contraste para el ícono de Cámara Duotone (Cuerpo claro / Centro oscuro) */
#header .navbar-nav #tryhtml2canvas i,
#header .navbar-nav #tryhtml2canvas [class*="fa-"] {
  --fa-primary-color: #cbd5e1 !important;
  --fa-primary-opacity: 0.65 !important;
  --fa-secondary-color: #0f172a !important;
  --fa-secondary-opacity: 1 !important;
}

#header .navbar-nav #tryhtml2canvas:hover i,
#header .navbar-nav #tryhtml2canvas:hover [class*="fa-"] {
  --fa-primary-color: #94a3b8 !important;
  --fa-primary-opacity: 0.85 !important;
  --fa-secondary-color: #000000 !important;
  --fa-secondary-opacity: 1 !important;
}

/* Tamaño calibrado para el ícono de Telegram */
#header .navbar-nav a[href*="telegram"] i,
#header .navbar-nav a[href*="telegram"] [class*="fa-"] {
  font-size: 16px !important;
}

/* Adaptación para pantalla móvil / adaptativa */
@media (max-width: 767.98px) {
  #header {
    z-index: 1030 !important;
  }

  .sidebar {
    top: 50px !important;
    z-index: 1020 !important;
  }

  #content,
  .content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Tablas y utilidades responsivas */
.table-responsive,
.dataTables_wrapper {
  max-width: 100% !important;
  overflow-x: auto !important;
  box-sizing: border-box !important;
}

/* Evitar que flexbox calcule min-width: auto en Chrome para columnas */
.row>[class*="col-"],
.home-col {
  min-width: 0 !important;
}

/* Ocultar barras de desplazamiento visuales */
::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
  background: transparent !important;
  display: none !important;
}

* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* ==========================================================================
   Estilos de Íconos de Cabecera de Panel (SmartZolt Clean Neon Icons)
   ========================================================================== */

/* Layout del grupo de botones en la cabecera del panel (Separación de 14px) */
.panel-heading-btn {
  margin-left: auto !important;
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
}

/* Sin botón, sin círculo transparente, sin borde, sin fondo */
.panel-heading-btn>a,
.panel-heading-btn .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  outline: none !important;
  transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease !important;
}

.panel-heading-btn>a i,
.panel-heading-btn .btn i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.25s ease, filter 0.2s ease !important;
}

/* --- BOTÓN EXPANDIR (Cyan / Sky Blue #38bdf8) --- */
.panel-heading-btn>a[data-click="panel-expand"],
.panel-heading-btn .btn[data-click="panel-expand"],
.panel-heading-btn>a[data-click="panel-expand"] i,
.panel-heading-btn .btn[data-click="panel-expand"] i,
.panel-heading-btn>a .fa-expand,
.panel-heading-btn .btn .fa-expand {
  color: #38bdf8 !important;
}

.panel-heading-btn>a[data-click="panel-expand"]:hover,
.panel-heading-btn .btn[data-click="panel-expand"]:hover {
  transform: scale(1.1) !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.75)) !important;
}

.panel-heading-btn>a[data-click="panel-expand"]:active,
.panel-heading-btn .btn[data-click="panel-expand"]:active {
  transform: scale(0.95) !important;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.95)) !important;
}

/* --- BOTÓN ACTUALIZAR / RECARGAR (Emerald Green #34d399) --- */
.panel-heading-btn>a[data-click="panel-reload"],
.panel-heading-btn .btn[data-click="panel-reload"],
.panel-heading-btn>a[onclick*="reload"],
.panel-heading-btn>a[onclick*="update"],
.panel-heading-btn .btn[onclick*="reload"],
.panel-heading-btn .btn[onclick*="update"],
.panel-heading-btn>a[data-click="panel-reload"] i,
.panel-heading-btn .btn[data-click="panel-reload"] i,
.panel-heading-btn>a[onclick*="reload"] i,
.panel-heading-btn>a[onclick*="update"] i,
.panel-heading-btn .btn[onclick*="reload"] i,
.panel-heading-btn .btn[onclick*="update"] i,
.panel-heading-btn>a .fa-rotate-right,
.panel-heading-btn>a .fa-sync-alt {
  color: #34d399 !important;
}

.panel-heading-btn>a[data-click="panel-reload"]:hover,
.panel-heading-btn .btn[data-click="panel-reload"]:hover,
.panel-heading-btn>a[onclick*="reload"]:hover,
.panel-heading-btn>a[onclick*="update"]:hover,
.panel-heading-btn .btn[onclick*="reload"]:hover,
.panel-heading-btn .btn[onclick*="update"]:hover {
  transform: scale(1.1) !important;
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.75)) !important;
}

.panel-heading-btn>a[data-click="panel-reload"]:hover i,
.panel-heading-btn .btn[data-click="panel-reload"]:hover i,
.panel-heading-btn>a[onclick*="reload"]:hover i,
.panel-heading-btn>a[onclick*="update"]:hover i {
  transform: rotate(180deg) !important;
}

.panel-heading-btn>a[data-click="panel-reload"]:active,
.panel-heading-btn .btn[data-click="panel-reload"]:active,
.panel-heading-btn>a[onclick*="reload"]:active,
.panel-heading-btn>a[onclick*="update"]:active {
  transform: scale(0.95) !important;
  filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.95)) !important;
}

/* --- BOTÓN MINIMIZAR / COLAPSAR (Amber Gold #fbbf24) --- */
.panel-heading-btn>a[data-click="panel-collapse"],
.panel-heading-btn .btn[data-click="panel-collapse"],
.panel-heading-btn>a[data-click="panel-collapse"] i,
.panel-heading-btn .btn[data-click="panel-collapse"] i,
.panel-heading-btn>a .fa-minus,
.panel-heading-btn .btn .fa-minus {
  color: #fbbf24 !important;
}

.panel-heading-btn>a[data-click="panel-collapse"]:hover,
.panel-heading-btn .btn[data-click="panel-collapse"]:hover {
  transform: scale(1.1) !important;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.75)) !important;
}

.panel-heading-btn>a[data-click="panel-collapse"]:active,
.panel-heading-btn .btn[data-click="panel-collapse"]:active {
  transform: scale(0.95) !important;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.95)) !important;
}

/* --- BOTÓN CERRAR / REMOVER (Rose / Red #f87171) --- */
.panel-heading-btn>a[data-click="panel-remove"],
.panel-heading-btn .btn[data-click="panel-remove"],
.panel-heading-btn>a[data-toggle="ajax"],
.panel-heading-btn .btn[data-toggle="ajax"],
.panel-heading-btn>a[data-click="panel-remove"] i,
.panel-heading-btn .btn[data-click="panel-remove"] i,
.panel-heading-btn>a[data-toggle="ajax"] i,
.panel-heading-btn .btn[data-toggle="ajax"] i,
.panel-heading-btn>a .fa-times,
.panel-heading-btn>a .fa-xmark {
  color: #f87171 !important;
}

.panel-heading-btn>a[data-click="panel-remove"]:hover,
.panel-heading-btn .btn[data-click="panel-remove"]:hover,
.panel-heading-btn>a[data-toggle="ajax"]:hover,
.panel-heading-btn .btn[data-toggle="ajax"]:hover {
  transform: scale(1.1) !important;
  filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.75)) !important;
}

.panel-heading-btn>a[data-click="panel-remove"]:active,
.panel-heading-btn .btn[data-click="panel-remove"]:active,
.panel-heading-btn>a[data-toggle="ajax"]:active,
.panel-heading-btn .btn[data-toggle="ajax"]:active {
  transform: scale(0.95) !important;
  filter: drop-shadow(0 0 10px rgba(248, 113, 113, 0.95)) !important;
}

/* ==========================================================================
   Configuración de Fondo de Partículas Interactiva (Telecom Networks)
   ========================================================================== */
:root {
  /* Modifique estos valores para cambiar el color de las partículas y sus líneas de conexión */
  --particle-color: #0072ff;
  --particle-line-color: #00c6ff;
}

#particles-js {
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
  top: 0 !important;
  left: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* Forzar que el contenedor principal de la página tenga fondo transparente para ver las partículas atrás */
#page-container {
  background: transparent !important;
}

/* Forzar que el fondo de la página mantenga el color original de MikroWisp pero permitiendo ver el canvas */
body {
  background-color: #d9e0e7 !important;
}

/* Forzar que el submenú flotante tenga bordes redondeados de 14px solo en el lado derecho y no muestre bordes ni sombras */
.float-sub-menu-container .float-sub-menu {
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  border: none !important;
  box-shadow: none !important;
}

/* Eliminar por completo cualquier borde, línea o sombra blanca en el menú lateral y submenú */
.sidebar,
#sidebar,
.sidebar-bg,
.page-sidebar-minified .sidebar,
.sidebar .nav,
.sidebar .sub-menu,
.float-sub-menu,
.float-sub-menu-container,
.float-sub-menu-container .float-sub-menu {
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Botones con Gradiente Premium "btn-azul" */
.btn-azul,
a.btn-azul,
button.btn-azul,
button[type="submit"].btn-azul {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 8px 22px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}

.btn-azul:hover,
a.btn-azul:hover,
button.btn-azul:hover,
button[type="submit"].btn-azul:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5) !important;
}

.btn-azul:active,
a.btn-azul:active,
button.btn-azul:active,
button[type="submit"].btn-azul:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3) !important;
}

.btn-azul i,
a.btn-azul i,
button.btn-azul i {
  font-size: 14px !important;
  margin-right: 4px !important;
}

/* Badges & Labels Globales de Lujo con Gradientes Intensos, Mayor Altura y Sin Negrita */
.badge,
.label,
.badge-pill,
.label-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  border-radius: 50px !important;
  letter-spacing: 0.3px !important;
  border: none !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
}

.badge i,
.label i {
  margin-right: 5px !important;
  font-size: 12px !important;
}

.badge-success,
.label-success {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35) !important;
}

.badge-danger,
.label-danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35) !important;
}

.badge-warning,
.label-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35) !important;
}

.badge-info,
.label-info,
.badge-primary,
.label-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.35) !important;
}

.badge-secondary,
.label-secondary {
  background: linear-gradient(135deg, #64748b 0%, #334155 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(100, 116, 139, 0.35) !important;
}

/* Botón de Subir al Inicio (Esquina Inferior Derecha) */
.btn-scroll-to-top,
a.btn-scroll-to-top,
a[data-click="scroll-top"] {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #ffffff !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.45) !important;
  cursor: pointer !important;
  border: none !important;
  z-index: 1020 !important;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
}

.btn-scroll-to-top.visible-top,
a.btn-scroll-to-top.visible-top,
a[data-click="scroll-top"].visible-top,
.btn-scroll-to-top.show,
a.btn-scroll-to-top.show,
.btn-scroll-to-top.in,
a.btn-scroll-to-top.in {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.btn-scroll-to-top:hover,
a.btn-scroll-to-top:hover,
a[data-click="scroll-top"]:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6) !important;
}

/* Estandarización de títulos en paneles para un diseño moderno, suave y consistente */
.panel.panel-inverse .panel-title,
.panel.panel-blue .panel-title,
.panel .panel-title,
.panel-title {
  font-weight: 300 !important;
  font-family: 'Outfit', 'Inter', 'Roboto', sans-serif !important;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   ÍTEM DE MENÚ: ACTUALIZACIÓN DISPONIBLE (SELECTOR ÁMBAR SUAVE & DUOTONE AZUL)
   ========================================================================== */

/* --- MODO EXPANDIDO --- */
.sidebar .nav>li.menu-update-item {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sidebar .nav>li.menu-update-item>a.nav-update-link {
  display: flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-left: 3px solid #f59e0b !important;
  background: rgba(245, 158, 11, 0.12) !important;
  color: rgba(248, 250, 252, 0.95) !important;
  text-decoration: none !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.sidebar .nav>li.menu-update-item>a.nav-update-link:hover,
.sidebar .nav>li.menu-update-item>a.nav-update-link:focus {
  background: rgba(245, 158, 11, 0.22) !important;
  color: #ffffff !important;
}

.sidebar .nav>li.menu-update-item .update-icon-container {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  margin-right: 8px !important;
}

.sidebar .nav>li.menu-update-item .ico-download-anim {
  color: #38bdf8 !important;
  --fa-primary-color: #38bdf8 !important;
  --fa-secondary-color: #93c5fd !important;
  font-size: 16px !important;
  display: inline-block !important;
  animation: download-bounce-anim 1.6s infinite ease-in-out !important;
}

.sidebar .nav>li.menu-update-item>a.nav-update-link>span.update-text {
  color: rgba(248, 250, 252, 0.95) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  flex: 1 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

/* Badge circular verde sin borde con el número 1 en blanco */
.sidebar .nav>li.menu-update-item .update-badge-bubble {
  position: absolute !important;
  top: -6px !important;
  right: -7px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.5) !important;
  line-height: 1 !important;
  z-index: 5 !important;
}

@keyframes download-bounce-anim {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(3px);
  }
}

/* --- MODO MINIFICADO / ENCOGIDO (page-sidebar-minified) --- */
.page-sidebar-minified .sidebar .nav>li.menu-update-item {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.page-sidebar-minified .sidebar .nav>li.menu-update-item>a.nav-update-link {
  width: 100% !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-left: 3px solid #f59e0b !important;
  background: rgba(245, 158, 11, 0.14) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.page-sidebar-minified .sidebar .nav>li.menu-update-item>a.nav-update-link:hover {
  background: rgba(245, 158, 11, 0.25) !important;
}

.page-sidebar-minified .sidebar .nav>li.menu-update-item .update-icon-container {
  margin: 0 !important;
  position: relative !important;
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-sidebar-minified .sidebar .nav>li.menu-update-item .ico-download-anim {
  font-size: 17px !important;
  color: #38bdf8 !important;
  --fa-primary-color: #38bdf8 !important;
  --fa-secondary-color: #93c5fd !important;
}

.page-sidebar-minified .sidebar .nav>li.menu-update-item .update-badge-bubble {
  top: -4px !important;
  right: -6px !important;
  border: none !important;
}

.page-sidebar-minified .sidebar .nav>li.menu-update-item span.update-text {
  display: none !important;
}

/* ==========================================================================
   Panel de Notificaciones y Badges Modernos (MikroWisp Modern UI)
   ========================================================================== */

/* Badges en la barra de navegación superior */
.lbl-notyficaction,
.lbl-soporte {
  display: inline-block !important;
}

.lbl-notyficaction:empty,
.lbl-soporte:empty {
  display: none !important;
}

.lbl-notyficaction .label,
.lbl-soporte .label {
  position: absolute !important;
  top: 7px !important;
  right: 2px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 17px !important;
  height: 17px !important;
  line-height: 17px !important;
  padding: 0 4px !important;
  text-align: center !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
}

.lbl-notyficaction .label {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
}

.lbl-soporte .label {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
}

/* Panel Lateral de Notificaciones */
.noty-panel.theme-panel-lg {
  width: 380px !important;
  right: -380px !important;
  background: #ffffff !important;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 1050 !important;
}

.noty-panel.theme-panel-lg.active {
  right: 0 !important;
}

.noty-panel .theme-panel-content {
  padding: 16px 14px !important;
  background: #f8fafc !important;
}

.noty-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.noty-panel-header-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Campanita Animada (Efecto Campaneo Suave) */
@keyframes noty-bell-swing {
  0%, 100% { transform: rotate(0deg); }
  6%, 18%, 30% { transform: rotate(14deg); }
  12%, 24%, 36% { transform: rotate(-14deg); }
  42%, 95% { transform: rotate(0deg); }
}

.noty-panel-header-title i.bell-animated {
  display: inline-block !important;
  transform-origin: top center !important;
  animation: noty-bell-swing 3.2s infinite ease-in-out !important;
  color: #0284c7 !important;
  font-size: 17px !important;
}

/* Botón Eliminar Todo (Estilo Premium Degradado Rojo) */
.btn-noty-clear-all {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 5px 13px !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35) !important;
  transition: all 0.22s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
}

.btn-noty-clear-all:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  box-shadow: 0 5px 14px rgba(239, 68, 68, 0.5) !important;
  transform: translateY(-1px) scale(1.02) !important;
  color: #ffffff !important;
}

/* Botón de Cerrar (X Roja Animada sin marco ni círculo) */
.noty-close-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ef4444 !important;
  font-size: 19px !important;
  padding: 3px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease !important;
}

.noty-close-btn:hover {
  color: #b91c1c !important;
  transform: scale(1.3) rotate(90deg) !important;
  text-decoration: none !important;
}

/* Tarjetas de Notificación Compactas */
.bodypanelboty a.item-noty-link {
  display: block !important;
  margin-bottom: 6px !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.bodypanelboty a.item-noty-link:hover {
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

.noty-panel .notification_container {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.18s ease !important;
  position: relative !important;
}

.bodypanelboty a.item-noty-link:hover .notification_container {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07) !important;
  background: #f8fafc !important;
}

.noty-row-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
}

.noty-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.noty-title-text {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.noty-timeago {
  font-size: 10.5px !important;
  color: #94a3b8 !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.noty-panel .notification_entry {
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-left: 23px !important;
}

.noty-ico {
  width: 17px !important;
  height: 17px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.noty-ico-danger { color: #ef4444 !important; }
.noty-ico-warning { color: #f59e0b !important; }
.noty-ico-info { color: #3b82f6 !important; }
.noty-ico-success { color: #10b981 !important; }
.noty-ico-primary { color: #0284c7 !important; }

/* ==========================================================================
   DataTables Header Toolbar y Botones de Acción (.tooltablas)
   Flujo Horizontal Dinámico: Botones Grupales, Nuevo Router y Buscador
   ========================================================================== */

div.dataTables_wrapper {
  position: relative !important;
  width: 100% !important;
  clear: both !important;
}

/* Botones grupales (Paginación, Columnas, Exportar) */
div.dataTables_wrapper div.dt-buttons {
  float: left !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 8px !important;
  margin-bottom: 10px !important;
  height: 34px !important;
  width: auto !important;
}

/* Botón de acción (ej. Nuevo Router) inmediatamente a continuación */
.tooltablas,
div.dataTables_wrapper div.tooltablas {
  position: static !important;
  float: left !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-left: 0 !important;
  margin-right: 12px !important;
  margin-bottom: 10px !important;
  height: 34px !important;
  width: auto !important;
  z-index: 1 !important;
}

.tooltablas .grupotabla,
div.dataTables_wrapper div.tooltablas .grupotabla {
  margin-left: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
}

/* Buscador a la derecha o a continuación según el espacio */
div.dataTables_wrapper div.dataTables_filter {
  float: right !important;
  text-align: right !important;
  margin-bottom: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: 34px !important;
  width: auto !important;
}

div.dataTables_wrapper div.dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  font-weight: normal !important;
  width: auto !important;
}

div.dataTables_wrapper div.dataTables_filter input {
  margin-left: 0.5em !important;
  display: inline-block !important;
  width: auto !important;
  min-width: 170px !important;
  height: 34px !important;
  border-radius: 50px !important;
  padding: 6px 14px !important;
  border: 1px solid #cbd5e1 !important;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2) !important;
  outline: none !important;
}

/* Limpieza de floats antes de la tabla */
div.dataTables_wrapper table.dataTable,
div.dataTables_wrapper table.table {
  clear: both !important;
  margin-top: 8px !important;
  width: 100% !important;
}

/* Centrado perfecto de filas de detalle en vista responsiva / expandida */
table.dataTable > tbody > tr.child ul.dtr-details {
  width: 100% !important;
  text-align: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

table.dataTable > tbody > tr.child span.dtr-title {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 11px !important;
}

table.dataTable > tbody > tr.child span.dtr-data {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

table.dataTable > tbody > tr.child span.dtr-data > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* En dispositivos móviles estrechos (< 576px), envoltura suave */
@media (max-width: 575px) {
  div.dataTables_wrapper div.dt-buttons,
  div.dataTables_wrapper div.tooltablas {
    float: none !important;
    display: inline-flex !important;
    margin-right: 6px !important;
    margin-bottom: 8px !important;
  }

  div.dataTables_wrapper div.dataTables_filter {
    float: none !important;
    display: inline-flex !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin-bottom: 8px !important;
  }

  div.dataTables_wrapper div.dataTables_filter input {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   Botones Estilizados y Modal Panel Inverse para Reportes de Pago
   ========================================================================== */
.btn-reporte-revisado {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  border: 1px solid #b45309 !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  box-shadow: 0 3px 6px rgba(245, 158, 11, 0.28) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  letter-spacing: 0.3px !important;
}

.btn-reporte-revisado:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(245, 158, 11, 0.45) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

.btn-reporte-pagar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  border: 1px solid #047857 !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  box-shadow: 0 3px 6px rgba(16, 185, 129, 0.28) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  letter-spacing: 0.3px !important;
}

.btn-reporte-pagar:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.45) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

.btn-reporte-cerrar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  border: 1px solid #334155 !important;
  border-radius: 6px !important;
  padding: 8px 18px !important;
  box-shadow: 0 2px 4px rgba(71, 85, 105, 0.2) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.btn-reporte-cerrar:hover {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(71, 85, 105, 0.35) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

.table-reporte-view td:first-child {
  background-color: #f8fafc !important;
  font-weight: 600 !important;
  color: #334155 !important;
  border-right: 1px solid #e2e8f0 !important;
}

/* Soporte Dropdown Styling & Empty State */
.loadsoporte {
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.loadsoporte .dropdown-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.loadsoporte .dropdown-item.media {
  padding: 12px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background 0.15s ease-in-out !important;
}

.loadsoporte .dropdown-item.media:hover {
  background: #f8fafc !important;
}

.loadsoporte .empty-soporte-box {
  padding: 30px 20px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 290px !important;
  background: #ffffff !important;
  border: none !important;
}

.loadsoporte .empty-soporte-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%) !important;
  border: 1px solid #bae6fd !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px auto !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15) !important;
}

.loadsoporte .empty-soporte-icon i {
  color: #0284c7 !important;
  font-size: 24px !important;
}

.loadsoporte .empty-soporte-title {
  font-weight: 700 !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
  margin-bottom: 4px !important;
}

.loadsoporte .empty-soporte-desc {
  font-size: 12px !important;
  color: #64748b !important;
  margin-bottom: 0 !important;
}

.table-reporte-view td {
  padding: 10px 14px !important;
  vertical-align: middle !important;
}