/* ==========================================================
   custom.min.css (CUSTOM) — LINKSOPS / VELZON PRO
   ✅ FIX TOPBAR DARK (evita morado)
   ✅ FIX usuario header en DARK
   ✅ Dark Mode Select / Select2 (sin blancos)
   ✅ Neón por modo:
      - Día: Azul neón
      - Noche: Verde LIMÓN neón
   ✅ Bordes neón MÁS GRUESOS: header / sidebar / cards
   ========================================================== */

/*# sourceMappingURL=custom.min.css.map */


/* ==========================================================
   FIX TOPBAR DARK (evita morado Velzon)
   ========================================================== */
html[data-layout-mode="dark"] #page-topbar,
html[data-layout-mode="dark"] .navbar-header {
  background-color: #1f2430 !important;
}


/* iconos/texto claros en dark */
html[data-layout-mode="dark"] #page-topbar .btn,
html[data-layout-mode="dark"] #page-topbar i,
html[data-layout-mode="dark"] #page-topbar .text-dark {
  color: #e9ecef !important;
}


/* ==========================================================
   FIX: área del usuario (topbar-user) en DARK
   ========================================================== */
html[data-layout-mode="dark"] #page-topbar .topbar-user > .btn,
html[data-layout-mode="dark"] #page-topbar .topbar-user .header-item,
html[data-layout-mode="dark"] #page-topbar .header-item {
  background: transparent !important;
}

/* hover del área del usuario */
html[data-layout-mode="dark"] #page-topbar .topbar-user > .btn:hover,
html[data-layout-mode="dark"] #page-topbar .topbar-user > .btn:focus,
html[data-layout-mode="dark"] #page-topbar .topbar-user.show > .btn,
html[data-layout-mode="dark"] #page-topbar .header-item:hover,
html[data-layout-mode="dark"] #page-topbar .header-item.show {
  background-color: rgba(255,255,255,.06) !important;
}

/* texto del usuario */
html[data-layout-mode="dark"] #page-topbar .user-name-text,
html[data-layout-mode="dark"] #page-topbar .user-name-sub-text {
  color: #e9ecef !important;
}

/* dropdown usuario */
html[data-layout-mode="dark"] #page-topbar .dropdown-menu {
  background-color: #1f2430 !important;
  border-color: rgba(255,255,255,.12) !important;
}
html[data-layout-mode="dark"] #page-topbar .dropdown-menu .dropdown-item {
  color: #e9ecef !important;
}
html[data-layout-mode="dark"] #page-topbar .dropdown-menu .dropdown-item:hover {
  background-color: rgba(255,255,255,.06) !important;
}


/* ==========================================================
   DARK MODE: Bootstrap Select + Select2 (sin fondos blancos)
   ========================================================== */
html[data-layout-mode="dark"] .form-control,
html[data-layout-mode="dark"] .form-select,
html[data-layout-mode="dark"] select.form-select,
html[data-layout-mode="dark"] select.form-control {
  background-color: #212529 !important;
  color: #f8f9fa !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* SELECT2 caja */
html[data-layout-mode="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: #212529 !important;
  color: #f8f9fa !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* SELECT2 texto */
html[data-layout-mode="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
  color: #f8f9fa !important;
}

/* SELECT2 placeholder */
html[data-layout-mode="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder {
  color: rgba(248,249,250,.6) !important;
}

/* SELECT2 dropdown */
html[data-layout-mode="dark"] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: #212529 !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* SELECT2 search */
html[data-layout-mode="dark"] .select2-container--bootstrap-5 .select2-search__field {
  background-color: #1b1f23 !important;
  color: #f8f9fa !important;
  border-color: rgba(255,255,255,.15) !important;
}

/* SELECT2 opciones */
html[data-layout-mode="dark"] .select2-container--bootstrap-5 .select2-results__option {
  background-color: #212529 !important;
  color: #f8f9fa !important;
}

/* hover opción */
html[data-layout-mode="dark"] .select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: rgba(255,255,255,.08) !important;
  color: #fff !important;
}


/* ==========================================================
   EFECTO NEÓN GLOBAL POR MODO (TODOS LOS CAMPOS)
   ========================================================== */

/* ---- DÍA (AZUL) ---- */
html[data-layout-mode="light"] .form-control:focus,
html[data-layout-mode="light"] .form-select:focus,
html[data-layout-mode="light"] textarea.form-control:focus,
html[data-layout-mode="light"] select.form-control:focus,
html[data-layout-mode="light"] select.form-select:focus,
html[data-layout-mode="light"] .form-control[type="file"]:focus {
  border-color: #0d6efd !important;
  box-shadow:
    0 0 0 .20rem rgba(13,110,253,.35),
    0 0 14px rgba(13,110,253,.55),
    0 0 28px rgba(13,110,253,.35) !important;
  outline: none !important;
}

/* Select2 foco/open en DÍA */
html[data-layout-mode="light"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
html[data-layout-mode="light"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: #0d6efd !important;
  box-shadow:
    0 0 0 .20rem rgba(13,110,253,.35),
    0 0 14px rgba(13,110,253,.55),
    0 0 28px rgba(13,110,253,.35) !important;
}

/* ---- NOCHE (VERDE LIMÓN NEÓN) ---- */
html[data-layout-mode="dark"] .form-control:focus,
html[data-layout-mode="dark"] .form-select:focus,
html[data-layout-mode="dark"] textarea.form-control:focus,
html[data-layout-mode="dark"] select.form-control:focus,
html[data-layout-mode="dark"] select.form-select:focus,
html[data-layout-mode="dark"] .form-control[type="file"]:focus {
  border-color: #A3FF12 !important;
  box-shadow:
    0 0 0 .20rem rgba(163,255,18,.30),
    0 0 14px rgba(163,255,18,.70),
    0 0 32px rgba(163,255,18,.50) !important;
  outline: none !important;
}

/* Select2 foco/open en NOCHE */
html[data-layout-mode="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection,
html[data-layout-mode="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: #A3FF12 !important;
  box-shadow:
    0 0 0 .20rem rgba(163,255,18,.30),
    0 0 14px rgba(163,255,18,.70),
    0 0 32px rgba(163,255,18,.50) !important;
}

/* input-group: que no se esconda el glow */
.input-group .form-control:focus,
.input-group .form-select:focus {
  z-index: 3;
}

/* asegurar fondo oscuro en focus */
html[data-layout-mode="dark"] .form-control:focus,
html[data-layout-mode="dark"] .form-select:focus,
html[data-layout-mode="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: #212529 !important;
  color: #fff !important;
}


/* ==========================================================
   BORDES NEÓN GLOBAL (MÁS GRUESOS)
   header / sidebar / cards / contenido
   ========================================================== */

/* ===== HEADER ===== */
html[data-layout-mode="light"] #page-topbar {
  border-bottom: 3px solid rgba(13,110,253,.75) !important;
  box-shadow:
    0 0 12px rgba(13,110,253,.45),
    0 0 30px rgba(13,110,253,.25);
}
html[data-layout-mode="dark"] #page-topbar {
  border-bottom: 3px solid rgba(163,255,18,.85) !important;
  box-shadow:
    0 0 14px rgba(163,255,18,.65),
    0 0 34px rgba(163,255,18,.35);
}

/* ===== SIDEBAR ===== */
html[data-layout-mode="light"] .navbar-menu {
  border-right: 3px solid rgba(13,110,253,.70);
  box-shadow: 0 0 14px rgba(13,110,253,.35);
}
html[data-layout-mode="dark"] .navbar-menu {
  border-right: 3px solid rgba(163,255,18,.80);
  box-shadow: 0 0 18px rgba(163,255,18,.45);
}

/* ===== CARDS / FORMULARIOS ===== */
html[data-layout-mode="light"] .card {
  border: 3px solid rgba(13,110,253,.35) !important;
  box-shadow: 0 0 14px rgba(13,110,253,.25);
}
html[data-layout-mode="dark"] .card {
  border: 3px solid rgba(163,255,18,.55) !important;
  box-shadow: 0 0 18px rgba(163,255,18,.35);
}

/* ===== MAIN CONTENT glow suave ===== */
html[data-layout-mode="light"] .main-content {
  box-shadow: inset 0 0 35px rgba(13,110,253,.06);
}
html[data-layout-mode="dark"] .main-content {
  box-shadow: inset 0 0 45px rgba(163,255,18,.08);
}


/* ==========================================================
   MENÚ LATERAL NEÓN (hover/active)
   ========================================================== */
.navbar-menu .nav-link {
  transition:
    all .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

/* DÍA */
html[data-layout-mode="light"] .navbar-menu .nav-link:hover {
  color: #0d6efd !important;
  box-shadow:
    inset 4px 0 0 #0d6efd,
    0 0 10px rgba(13,110,253,.35);
}
html[data-layout-mode="light"] .navbar-menu .nav-link.active {
  color: #0d6efd !important;
  background-color: rgba(13,110,253,.08) !important;
  box-shadow:
    inset 4px 0 0 #0d6efd,
    0 0 16px rgba(13,110,253,.35),
    0 0 30px rgba(13,110,253,.18);
}
html[data-layout-mode="light"] .navbar-menu .nav-link.active i {
  color: #0d6efd !important;
}

/* NOCHE (VERDE LIMÓN) */
html[data-layout-mode="dark"] .navbar-menu .nav-link:hover {
  color: #A3FF12 !important;
  box-shadow:
    inset 4px 0 0 #A3FF12,
    0 0 12px rgba(163,255,18,.55);
}
html[data-layout-mode="dark"] .navbar-menu .nav-link.active {
  color: #A3FF12 !important;
  background-color: rgba(163,255,18,.10) !important;
  box-shadow:
    inset 4px 0 0 #A3FF12,
    0 0 18px rgba(163,255,18,.55),
    0 0 34px rgba(163,255,18,.22);
}
html[data-layout-mode="dark"] .navbar-menu .nav-link.active i {
  color: #A3FF12 !important;
}

/* Submenú activo */
html[data-layout-mode="dark"] .navbar-menu .menu-dropdown.show {
  box-shadow: inset 3px 0 0 rgba(163,255,18,.35);
}
html[data-layout-mode="light"] .navbar-menu .menu-dropdown.show {
  box-shadow: inset 3px 0 0 rgba(13,110,253,.35);
}


/* ==========================================================
   TRANSICIÓN SUAVE GENERAL
   ========================================================== */
.form-control,
.form-select,
.select2-container--bootstrap-5 .select2-selection,
#page-topbar,
.navbar-menu,
.card,
.main-content {
  transition:
    box-shadow .20s ease,
    border-color .20s ease,
    background-color .20s ease;
}

/* ==========================================================
   FIX LOGOS: Cambiar logo-light / logo-dark según modo
   Usa data-layout-mode (light/dark)
   ========================================================== */

/* Por defecto: modo LIGHT => mostrar logo-light, ocultar logo-dark */
html[data-layout-mode="light"] .logo.logo-light { display: block !important; }
html[data-layout-mode="light"] .logo.logo-dark  { display: none !important; }

/* Modo DARK => mostrar logo-dark, ocultar logo-light */
html[data-layout-mode="dark"] .logo.logo-dark   { display: block !important; }
html[data-layout-mode="dark"] .logo.logo-light  { display: none !important; }


/* ==========================================================
   MOBILE FIX: mostrar botón y asegurar contraste
   ========================================================== */
@media (max-width: 991.98px) {
  /* el botón que abre/cierra menú */
  #topnav-hamburger-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: 9999 !important;
  }

  /* que el icono se vea en dark */
  html[data-layout-mode="dark"] #topnav-hamburger-icon .hamburger-icon span {
    background-color: #e9ecef !important;
  }

  /* que el icono se vea en light */
  html[data-layout-mode="light"] #topnav-hamburger-icon .hamburger-icon span {
    background-color: #0b1320 !important;
  }
}

/* ==========================================================
   MOBILE FIX: sidebar encima del contenido
   ========================================================== */
@media (max-width: 991.98px) {
  .navbar-menu {
    z-index: 9998 !important; /* encima del contenido */
  }

  #page-topbar {
    z-index: 9999 !important; /* el topbar encima */
  }

  .vertical-overlay {
    z-index: 9997 !important; /* overlay detrás del menú */
  }
}

/* ==========================================================
   FIX: Mostrar logo del SIDEBAR en móvil
   (cuando se abre el menú: body.vertical-sidebar-enable)
   ========================================================== */
@media (max-width: 991.98px) {

  /* Asegura que el contenedor del logo exista y se vea */
  body.vertical-sidebar-enable .navbar-menu .navbar-brand-box{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 64px !important;
    padding: 10px 12px !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
  }

  /* Asegura que los <a> del logo no estén ocultos */
  body.vertical-sidebar-enable .navbar-menu .navbar-brand-box .logo{
    display: flex !important;
    align-items: center !important;
  }

  /* Tamaño del logo grande en móvil */
  body.vertical-sidebar-enable .navbar-menu .navbar-brand-box .logo-lg img{
    height: 34px !important; /* ajustá si querés 30-45 */
    max-width: 100% !important;
  }

  /* Tamaño del logo pequeño (si se usa) */
  body.vertical-sidebar-enable .navbar-menu .navbar-brand-box .logo-sm img{
    height: 22px !important;
  }
}