/* ==========================================================
   SIGAE — CAPA DE TEMAS CONFIGURABLE
   Añadir AL FINAL del CSS actual del sidebar.

   Configuración opcional en <html>:
     data-sidebar-mode="dark"  o "light"
     data-sidebar-color="green", "blue", "red",
                        "orange" o "purple"

   Sin atributos: verde esmeralda + modo oscuro.
   No modifica dimensiones ni comportamiento del menú.
   ========================================================== */

/* ==========================================================
   1. CONFIGURACIÓN DEFAULT EN ROOT
   Cambia estos valores para crear tu propia paleta.
   ========================================================== */

:root {
  /* COLOR PRINCIPAL: VERDE ESMERALDA
     RGB se escribe como tres números separados por comas. */
  --sb-theme-rgb: 16, 185, 129;
  --sb-theme-start: #047857;
  --sb-theme-end: #065f46;
  --sb-theme-on-active: #ffffff;

  /* Detalles de color sobre fondos claros y oscuros */
  --sb-theme-ink-light: #047857;
  --sb-theme-ink-dark: #6ee7b7;

  /* SUPERFICIE DEFAULT: OSCURA */
  --sb-surface-top: #172024;
  --sb-surface-bottom: #10171b;
  --sb-surface-rgb: 23, 32, 36;

  --sb-brand-color: #f4faf7;
  --sb-label-color: #c3d1cc;
  --sb-sub-label-color: #a9bdb4;
  --sb-muted-color: #859b90;
  --sb-icon-color: #a7bdb2;

  --sb-line-color: rgba(255, 255, 255, 0.08);
  --sb-icon-surface: rgba(255, 255, 255, 0.045);
  --sb-hover-surface: rgba(255, 255, 255, 0.055);
  --sb-hover-label: #ffffff;
  --sb-toggle-surface: rgba(255, 255, 255, 0.035);
  --sb-elevation: 8px 0 32px rgba(9, 19, 15, 0.12);

  --sb-theme-ink: var(--sb-theme-ink-dark);

  --sb-state-hover-alpha: 0.09;
  --sb-state-hover-icon-alpha: 0.17;
  --sb-state-open-hover-alpha: 0.16;
  --sb-state-pressed-alpha: 0.21;
  --sb-state-focus-alpha: 0.28;

  --sb-selected-hover-overlay: rgba(255, 255, 255, 0.075);
  --sb-selected-pressed-overlay: rgba(0, 0, 0, 0.14);
  --sb-selected-shadow-alpha: 0.2;

  /* Deshabilitado: valores para modo oscuro */
  --sb-disabled-text: #74817e;
  --sb-disabled-icon: #65736f;
  --sb-disabled-bg: rgba(255, 255, 255, 0.018);
  --sb-disabled-icon-bg: rgba(255, 255, 255, 0.025);

  --sb-motion-duration: 160ms;

}

/* ==========================================================
   2. MODO CLARO
   Independiente del tema general de la plantilla.
   ========================================================== */

html[data-sidebar-mode="light"] {
  --sb-surface-top: #ffffff;
  --sb-surface-bottom: #f7faf8;
  --sb-surface-rgb: 255, 255, 255;

  --sb-brand-color: #192d25;
  --sb-label-color: #42564c;
  --sb-sub-label-color: #586c62;
  --sb-muted-color: #798d82;
  --sb-icon-color: #637d6f;

  --sb-line-color: rgba(24, 54, 40, 0.1);
  --sb-icon-surface: rgba(24, 54, 40, 0.045);
  --sb-hover-surface: rgba(24, 54, 40, 0.04);
  --sb-hover-label: #192d25;
  --sb-toggle-surface: rgba(24, 54, 40, 0.035);
  --sb-elevation: 8px 0 28px rgba(24, 54, 40, 0.055);

  --sb-theme-ink: var(--sb-theme-ink-light);

  --sb-state-hover-alpha: 0.075;
  --sb-state-hover-icon-alpha: 0.13;
  --sb-state-open-hover-alpha: 0.12;
  --sb-state-pressed-alpha: 0.17;
  --sb-state-focus-alpha: 0.22;

  --sb-disabled-text: #929b96;
  --sb-disabled-icon: #a0a9a4;
  --sb-disabled-bg: rgba(24, 54, 40, 0.018);
  --sb-disabled-icon-bg: rgba(24, 54, 40, 0.028);

}

/* ==========================================================
   3. PALETAS OPCIONALES
   Cada paleta funciona tanto en claro como en oscuro.
   ========================================================== */

html[data-sidebar-color="green"] {
  --sb-theme-rgb: 16, 185, 129;
  --sb-theme-start: #047857;
  --sb-theme-end: #065f46;
  --sb-theme-ink-light: #047857;
  --sb-theme-ink-dark: #6ee7b7;
}

html[data-sidebar-color="blue"] {
  --sb-theme-rgb: 59, 130, 246;
  --sb-theme-start: #2563eb;
  --sb-theme-end: #1d4ed8;
  --sb-theme-ink-light: #1d4ed8;
  --sb-theme-ink-dark: #93c5fd;
}

html[data-sidebar-color="red"] {
  --sb-theme-rgb: 239, 68, 68;
  --sb-theme-start: #dc2626;
  --sb-theme-end: #b91c1c;
  --sb-theme-ink-light: #b91c1c;
  --sb-theme-ink-dark: #fca5a5;
}

html[data-sidebar-color="orange"] {
  --sb-theme-rgb: 249, 115, 22;
  --sb-theme-start: #c2410c;
  --sb-theme-end: #9a3412;
  --sb-theme-ink-light: #c2410c;
  --sb-theme-ink-dark: #fdba74;
}

html[data-sidebar-color="purple"] {
  --sb-theme-rgb: 139, 92, 246;
  --sb-theme-start: #7c3aed;
  --sb-theme-end: #6d28d9;
  --sb-theme-ink-light: #6d28d9;
  --sb-theme-ink-dark: #c4b5fd;
}

/* Rosado */
html[data-sidebar-color="pink"] {
  --sb-theme-rgb: 236, 72, 153;
  --sb-theme-start: #be185d;
  --sb-theme-end: #9d174d;
  --sb-theme-ink-light: #be185d;
  --sb-theme-ink-dark: #f9a8d4;
}

/* Fucsia */
html[data-sidebar-color="fuchsia"] {
  --sb-theme-rgb: 217, 70, 239;
  --sb-theme-start: #a21caf;
  --sb-theme-end: #86198f;
  --sb-theme-ink-light: #a21caf;
  --sb-theme-ink-dark: #f0abfc;
}

/* Índigo */
html[data-sidebar-color="indigo"] {
  --sb-theme-rgb: 99, 102, 241;
  --sb-theme-start: #4f46e5;
  --sb-theme-end: #4338ca;
  --sb-theme-ink-light: #4338ca;
  --sb-theme-ink-dark: #a5b4fc;
}

/* Turquesa */
html[data-sidebar-color="teal"] {
  --sb-theme-rgb: 20, 184, 166;
  --sb-theme-start: #0f766e;
  --sb-theme-end: #115e59;
  --sb-theme-ink-light: #0f766e;
  --sb-theme-ink-dark: #5eead4;
}

/* Cian */
html[data-sidebar-color="cyan"] {
  --sb-theme-rgb: 6, 182, 212;
  --sb-theme-start: #0e7490;
  --sb-theme-end: #155e75;
  --sb-theme-ink-light: #0e7490;
  --sb-theme-ink-dark: #67e8f9;
}

/* Ámbar */
html[data-sidebar-color="amber"] {
  --sb-theme-rgb: 245, 158, 11;
  --sb-theme-start: #b45309;
  --sb-theme-end: #92400e;
  --sb-theme-ink-light: #92400e;
  --sb-theme-ink-dark: #fcd34d;
}

/* Lima */
html[data-sidebar-color="lime"] {
  --sb-theme-rgb: 132, 204, 22;
  --sb-theme-start: #4d7c0f;
  --sb-theme-end: #3f6212;
  --sb-theme-ink-light: #4d7c0f;
  --sb-theme-ink-dark: #bef264;
}

/* ==========================================================
   4. SUPERFICIE DEL SIDEBAR
   Reemplaza las variables locales del CSS anterior.
   ========================================================== */

#layout-menu {
  --sb-text: var(--sb-label-color);
  --sb-muted: var(--sb-muted-color);
  --sb-accent: var(--sb-theme-ink);
  --sb-border: var(--sb-line-color);

  color: var(--sb-label-color) !important;

  background:
    radial-gradient(
      ellipse at top left,
      rgba(var(--sb-theme-rgb), 0.075),
      transparent 55%
    ),
    linear-gradient(
      180deg,
      var(--sb-surface-top),
      var(--sb-surface-bottom)
    ) !important;

  border-right-color: var(--sb-line-color) !important;
  box-shadow: var(--sb-elevation) !important;
}

/* ==========================================================
   5. CABECERA Y BOTÓN
   ========================================================== */

#layout-menu .app-brand.demo {
  border-bottom-color: var(--sb-line-color) !important;
}

#layout-menu .app-brand-text.demo {
  color: var(--sb-brand-color) !important;
}

#layout-menu .app-brand-logo.demo {
  border-color: rgba(var(--sb-theme-rgb), 0.24) !important;
  background: linear-gradient(
    145deg,
    rgba(var(--sb-theme-rgb), 0.16),
    rgba(var(--sb-theme-rgb), 0.045)
  ) !important;
}

#layout-menu .app-brand-logo.demo > span {
  color: var(--sb-theme-ink) !important;
}

#layout-menu .app-brand .layout-menu-toggle {
  color: var(--sb-muted-color) !important;
  border-color: var(--sb-line-color) !important;
  background: var(--sb-toggle-surface) !important;
}

#layout-menu .app-brand .layout-menu-toggle:hover {
  color: var(--sb-theme-ink) !important;
  background: rgba(var(--sb-theme-rgb), 0.14) !important;
  border-color: rgba(var(--sb-theme-rgb), 0.25) !important;
}

/* ==========================================================
   6. OPCIONES PRINCIPALES E ICONOS
   ========================================================== */

#layout-menu #side-menu .menu-link {
  color: var(--sb-label-color) !important;
}

#layout-menu #side-menu > .menu-item > .menu-link .menu-icon {
  color: var(--sb-icon-color) !important;
  background: var(--sb-icon-surface) !important;
}

#layout-menu #side-menu > .menu-item > .menu-link:hover {
  color: var(--sb-hover-label) !important;
  background: var(--sb-hover-surface) !important;
}

#layout-menu #side-menu > .menu-item > .menu-link:hover .menu-icon {
  color: var(--sb-theme-ink) !important;
  background: rgba(var(--sb-theme-rgb), 0.12) !important;
}

/* Módulo abierto o que contiene la página seleccionada */
#layout-menu #side-menu > .menu-item.open > .menu-link,
#layout-menu #side-menu > .menu-item.active > .menu-link {
  color: var(--sb-theme-ink) !important;
  background: rgba(var(--sb-theme-rgb), 0.1) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--sb-theme-rgb), 0.17) !important;
}

#layout-menu #side-menu > .menu-item.open > .menu-link .menu-icon,
#layout-menu #side-menu > .menu-item.active > .menu-link .menu-icon {
  color: var(--sb-theme-ink) !important;
  background: rgba(var(--sb-theme-rgb), 0.17) !important;
}

/* Flechas: solo color; conserva posición y rotación */
#layout-menu #side-menu .menu-toggle::after {
  color: var(--sb-muted-color) !important;
  border-color: currentColor !important;
}

#layout-menu #side-menu .open > .menu-toggle::after,
#layout-menu #side-menu .active > .menu-toggle::after {
  color: var(--sb-theme-ink) !important;
}

/* ==========================================================
   7. SUBMENÚS Y PÁGINA SELECCIONADA
   ========================================================== */

#layout-menu #side-menu .menu-sub::before {
  background: linear-gradient(
    to bottom,
    rgba(var(--sb-theme-rgb), 0.3),
    rgba(var(--sb-theme-rgb), 0.065)
  ) !important;
}

#layout-menu #side-menu .menu-sub > .menu-item > .menu-link {
  color: var(--sb-sub-label-color) !important;
}

#layout-menu #side-menu .menu-sub > .menu-item > .menu-link::before {
  background: var(--sb-muted-color) !important;
}

#layout-menu #side-menu .menu-sub > .menu-item > .menu-link:hover {
  color: var(--sb-theme-ink) !important;
  background: rgba(var(--sb-theme-rgb), 0.075) !important;
}

#layout-menu #side-menu .menu-sub > .menu-item > .menu-link:hover::before {
  background: var(--sb-theme-ink) !important;
}

/* Página activa: verde con texto blanco en ambos modos */
#layout-menu #side-menu .menu-sub > .menu-item.active > .menu-link {
  color: var(--sb-theme-on-active) !important;
  background: linear-gradient(
    110deg,
    var(--sb-theme-start),
    var(--sb-theme-end)
  ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

#layout-menu #side-menu .menu-sub > .menu-item.active > .menu-link::before {
  background: var(--sb-theme-on-active) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16) !important;
}

/* ==========================================================
   8. SELECCIÓN EN MODO COMPACTO
   Sobrescribe el violeta del CSS anterior.
   ========================================================== */

@media (min-width: 1200px) {
  html.layout-menu-collapsed:not(.layout-menu-hover)
  #layout-menu #side-menu > .menu-item.active > .menu-link .menu-icon {
    color: var(--sb-theme-on-active) !important;
    background: linear-gradient(
      135deg,
      var(--sb-theme-start),
      var(--sb-theme-end)
    ) !important;
    box-shadow:
      0 3px 10px rgba(var(--sb-theme-rgb), 0.2) !important;
  }
}

/* ==========================================================
   9. SCROLL Y FOCO DE TECLADO
   ========================================================== */

#layout-menu .menu-inner-shadow {
  background: linear-gradient(
    to bottom,
    rgba(var(--sb-surface-rgb), 0.94),
    rgba(var(--sb-surface-rgb), 0)
  ) !important;
}

#layout-menu .ps__thumb-y {
  background: rgba(var(--sb-theme-rgb), 0.3) !important;
}

#layout-menu .ps__rail-y:hover .ps__thumb-y,
#layout-menu .ps__rail-y.ps--clicking .ps__thumb-y {
  background: rgba(var(--sb-theme-rgb), 0.55) !important;
}

#layout-menu #side-menu {
  scrollbar-color:
    rgba(var(--sb-theme-rgb), 0.35) transparent !important;
}

#layout-menu #side-menu::-webkit-scrollbar-thumb {
  background: rgba(var(--sb-theme-rgb), 0.35) !important;
}

#layout-menu .menu-link:focus-visible,
#layout-menu .app-brand-link:focus-visible {
  outline-color: var(--sb-theme-ink) !important;
}

/* ==========================================================
   3. TRANSICIONES
   Sin desplazamientos: las opciones no saltan al pulsarlas.
   ========================================================== */

#layout-menu #side-menu .menu-link,
#layout-menu #side-menu .menu-icon,
#layout-menu .app-brand .layout-menu-toggle {
  transition:
    color var(--sb-motion-duration) ease,
    background-color var(--sb-motion-duration) ease,
    box-shadow var(--sb-motion-duration) ease,
    border-color var(--sb-motion-duration) ease !important;
}

/* ==========================================================
   4. HOVER: OPCIONES NORMALES
   ========================================================== */

#layout-menu #side-menu > .menu-item > .menu-link:hover {
  color: var(--sb-theme-ink) !important;
  background: rgba(
    var(--sb-theme-rgb),
    var(--sb-state-hover-alpha)
  ) !important;
}

#layout-menu #side-menu > .menu-item > .menu-link:hover .menu-icon {
  color: var(--sb-theme-ink) !important;
  background: rgba(
    var(--sb-theme-rgb),
    var(--sb-state-hover-icon-alpha)
  ) !important;
}

#layout-menu #side-menu > .menu-item > .menu-toggle:hover::after {
  color: var(--sb-theme-ink) !important;
}

#layout-menu #side-menu .menu-sub > .menu-item > .menu-link:hover {
  color: var(--sb-theme-ink) !important;
  background: rgba(
    var(--sb-theme-rgb),
    var(--sb-state-hover-alpha)
  ) !important;
}

/* Módulo abierto + hover: algo más intenso */
#layout-menu #side-menu > .menu-item:is(.open, .active) > .menu-link:hover {
  background: rgba(
    var(--sb-theme-rgb),
    var(--sb-state-open-hover-alpha)
  ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--sb-theme-rgb), 0.25) !important;
}

/* ==========================================================
   5. PULSADO
   :active significa mientras mantienes pulsado.
   .active sigue representando la página seleccionada.
   ========================================================== */

#layout-menu #side-menu > .menu-item > .menu-link:active,
#layout-menu #side-menu .menu-sub > .menu-item > .menu-link:active {
  color: var(--sb-theme-ink) !important;
  background: rgba(
    var(--sb-theme-rgb),
    var(--sb-state-pressed-alpha)
  ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(var(--sb-theme-rgb), 0.3) !important;
}

/* ==========================================================
   6. SELECCIONADO
   Compatible con la clase actual y con aria-current="page".
   También contempla módulos con un enlace directo.
   ========================================================== */

#layout-menu #side-menu .menu-sub > .menu-item.active > .menu-link,
#layout-menu #side-menu .menu-link[aria-current="page"],
#layout-menu #side-menu > .menu-item.active > .menu-link:not(.menu-toggle) {
  color: var(--sb-theme-on-active) !important;
  background: linear-gradient(
    110deg,
    var(--sb-theme-start),
    var(--sb-theme-end)
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Seleccionado + hover: mantiene el color sólido */
#layout-menu #side-menu .menu-sub > .menu-item.active > .menu-link:hover,
#layout-menu #side-menu .menu-link[aria-current="page"]:hover,
#layout-menu #side-menu > .menu-item.active > .menu-link:not(.menu-toggle):hover {
  color: var(--sb-theme-on-active) !important;
  background:
    linear-gradient(
      var(--sb-selected-hover-overlay),
      var(--sb-selected-hover-overlay)
    ),
    linear-gradient(
      110deg,
      var(--sb-theme-start),
      var(--sb-theme-end)
    ) !important;
  box-shadow:
    0 3px 10px rgba(
      var(--sb-theme-rgb),
      var(--sb-selected-shadow-alpha)
    ),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* Seleccionado + pulsado: se oscurece ligeramente */
#layout-menu #side-menu .menu-sub > .menu-item.active > .menu-link:active,
#layout-menu #side-menu .menu-link[aria-current="page"]:active,
#layout-menu #side-menu > .menu-item.active > .menu-link:not(.menu-toggle):active {
  color: var(--sb-theme-on-active) !important;
  background:
    linear-gradient(
      var(--sb-selected-pressed-overlay),
      var(--sb-selected-pressed-overlay)
    ),
    linear-gradient(
      110deg,
      var(--sb-theme-start),
      var(--sb-theme-end)
    ) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* Punto seleccionado: blanco en todos los estados */
#layout-menu #side-menu .menu-sub > .menu-item.active > .menu-link::before,
#layout-menu #side-menu .menu-sub > .menu-item > .menu-link[aria-current="page"]::before {
  background: var(--sb-theme-on-active) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16) !important;
}

#layout-menu #side-menu > .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon,
#layout-menu #side-menu > .menu-item > .menu-link[aria-current="page"] .menu-icon {
  color: var(--sb-theme-on-active) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ==========================================================
   7. FOCO CON TECLADO
   No altera el ancho: el contorno es interior.
   ========================================================== */

#layout-menu #side-menu .menu-link:focus-visible,
#layout-menu .app-brand-link:focus-visible,
#layout-menu .app-brand .layout-menu-toggle:focus-visible {
  outline: 2px solid var(--sb-theme-ink) !important;
  outline-offset: -2px !important;
  box-shadow:
    0 0 0 3px rgba(
      var(--sb-theme-rgb),
      var(--sb-state-focus-alpha)
    ) !important;
}

#layout-menu #side-menu .menu-sub > .menu-item.active > .menu-link:focus-visible,
#layout-menu #side-menu .menu-link[aria-current="page"]:focus-visible,
#layout-menu #side-menu > .menu-item.active > .menu-link:not(.menu-toggle):focus-visible {
  outline-color: var(--sb-theme-on-active) !important;
}

/* ==========================================================
   8. BOTÓN DE CONTRAER: ESTADO PULSADO
   ========================================================== */

#layout-menu .app-brand .layout-menu-toggle:active {
  color: var(--sb-theme-ink) !important;
  background: rgba(
    var(--sb-theme-rgb),
    var(--sb-state-pressed-alpha)
  ) !important;
  border-color: rgba(var(--sb-theme-rgb), 0.3) !important;
}

/* ==========================================================
   9. DESHABILITADO
   Puede marcarse en el <li> o en el enlace:
     class="disabled"
     aria-disabled="true"

   Estas reglas van después de los estados anteriores.
   El CSS cambia la apariencia; no bloquea la navegación.
   ========================================================== */

#layout-menu #side-menu .menu-item:is(.disabled, [aria-disabled="true"]) > .menu-link,
#layout-menu #side-menu .menu-item > .menu-link:is(.disabled, [aria-disabled="true"]) {
  color: var(--sb-disabled-text) !important;
  background: var(--sb-disabled-bg) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  text-shadow: none !important;
}

#layout-menu #side-menu .menu-item:is(.disabled, [aria-disabled="true"]) > .menu-link .menu-icon,
#layout-menu #side-menu .menu-item > .menu-link:is(.disabled, [aria-disabled="true"]) .menu-icon {
  color: var(--sb-disabled-icon) !important;
  background: var(--sb-disabled-icon-bg) !important;
  box-shadow: none !important;
}

#layout-menu #side-menu .menu-item:is(.disabled, [aria-disabled="true"]) > .menu-link::after,
#layout-menu #side-menu .menu-item > .menu-link:is(.disabled, [aria-disabled="true"])::after {
  color: var(--sb-disabled-icon) !important;
  border-color: currentColor !important;
}

#layout-menu #side-menu .menu-sub > .menu-item:is(.disabled, [aria-disabled="true"]) > .menu-link::before,
#layout-menu #side-menu .menu-sub > .menu-item > .menu-link:is(.disabled, [aria-disabled="true"])::before {
  background: var(--sb-disabled-icon) !important;
  box-shadow: none !important;
}

/* Si excepcionalmente recibe foco, sigue siendo identificable */
#layout-menu #side-menu .menu-item:is(.disabled, [aria-disabled="true"]) > .menu-link:focus-visible,
#layout-menu #side-menu .menu-item > .menu-link:is(.disabled, [aria-disabled="true"]):focus-visible {
  outline: 2px dashed var(--sb-disabled-text) !important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

/* Prioridad explícita sobre el icono seleccionado compacto */
@media (min-width: 1200px) {
  html.layout-menu-collapsed:not(.layout-menu-hover)
  #layout-menu #side-menu > .menu-item:is(.disabled, [aria-disabled="true"]) > .menu-link .menu-icon,
  html.layout-menu-collapsed:not(.layout-menu-hover)
  #layout-menu #side-menu > .menu-item > .menu-link:is(.disabled, [aria-disabled="true"]) .menu-icon {
    color: var(--sb-disabled-icon) !important;
    background: var(--sb-disabled-icon-bg) !important;
    box-shadow: none !important;
  }
}

/* ==========================================================
   10. ACCESIBILIDAD: MOVIMIENTO REDUCIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  #layout-menu #side-menu .menu-link,
  #layout-menu #side-menu .menu-icon,
  #layout-menu .app-brand .layout-menu-toggle {
    transition: none !important;
  }
}