/* =========================================================================
   iFix Medical Solutions — Cromo de la aplicación
   Barra de navegación lateral (.left_col) y barra superior (.top_nav).
   Se carga después de custom.css y reemplaza el aspecto del tema base.

   Las dos barras comparten la misma paleta, definida en :root más abajo.
   El nombre del archivo se conservó para no tener que tocar css.php.

   Contrato de clases (no cambiar sin revisar el JS):
     .current-page  -> la agrega Gentelella  (build/js/custom.js) por URL exacta
     .menu-activo   -> la agrega establecer_opcion_menu() (js/ifix_functions.js)
     .active        -> grupo con submenú desplegado
     .active-sm     -> equivalente de .active en modo colapsado
   Las dos primeras deben verse idénticas: son el mismo estado.

   El resplandor de fondo (.ifx-nav-glow) lo inyecta y lo posiciona el JS.

   ---- Por que todo el menu va prefijado con #sidebar-menu ----------------
   Ese id lo lleva el <div> que envuelve el menu, y lo escriben los siete
   archivos que lo pintan (menu.php y sus respaldos, y las dos vistas previas):
   los siete, sin excepcion. No es decorativo, es peso.

   En CSS, un id vale mas que cualquier cantidad de clases. Con el prefijo,
   una regla nuestra como

       .nav-md #sidebar-menu .nav.side-menu > li.current-page > a

   le gana a cualquier regla ajena escrita por clases, aunque venga con
   !important, porque entre dos !important decide la especificidad. Sin el
   prefijo empatabamos, y a la hora de empatar gana la que se lea al final:
   dependiamos del orden de carga, que es justo lo que fallaba en el servidor.

   Solo lo llevan los selectores que cuelgan DEL MENU. El armazon de la barra
   (.left_col, .navbar.nav_title, .site_title, .ifx-nav-glow) y la barra
   superior (.top_nav) quedan como estaban: no son descendientes de ese id.
   ========================================================================= */

/* ---- Paleta -------------------------------------------------------------
   Va en :root y no en .left_col porque la barra superior tambien la usa, y
   .top_nav no es descendiente de la barra lateral. */
:root {
  --nav-bg:           #232D47;   /* marina con un punto de indigo: la barra de la referencia */
  --nav-edge:         rgba(255, 255, 255, .09);
  --nav-guide:        rgba(255, 255, 255, .12);

  --nav-text:         #DCE4ED;   /* etiqueta en reposo (casi blanca) */
  --nav-text-strong:  #FFFFFF;
  --nav-text-soft:    #A9B6C6;   /* etiquetas de submenú */

  /* Se aclaran junto con el fondo: sobre una base mas clara el gris de antes
     perdia contraste y los iconos se apagaban. */
  --nav-icon:         #95A7BC;
  --nav-icon-hover:   #C8D4E0;

  --nav-accent:       #4C7BE0;   /* el azul electrico de la paleta nueva */
  /* Velos blancos: suben un punto porque sobre un fondo mas claro el mismo
     porcentaje rinde menos contraste relativo. */
  --nav-pill:         rgba(255, 255, 255, .14);
  /* El anillo de la opcion activa sube de .07 a .12. Era el problema de fondo
     de "parece que hay dos opciones seleccionadas": el velo del raton (.075)
     y el de la activa (.14) se parecian demasiado, y el anillo, que es lo
     unico que las distingue de verdad, casi no se veia. Ahora el activo tiene
     contorno propio y el hover no. */
  --nav-pill-ring:    rgba(255, 255, 255, .12);
  /* Filo superior iluminado de la pildora activa: es lo que la hace ver
     levantada en vez de pegada. Va SOLO arriba, como una luz cenital. */
  --nav-pill-top:     rgba(255, 255, 255, .11);
  /* Baja de .075 a .05 por lo mismo: separar el "estoy apuntando aqui" del
     "esta es la pagina en la que estoy". El hover sigue siendo perceptible
     porque va acompañado del cambio de color del icono y de la etiqueta. */
  --nav-hover:        rgba(255, 255, 255, .05);

  /* Resplandor: azul de marca, más profundo en el núcleo. Se aclara a la par
     del fondo; si no, la diferencia contra la base se comeria el efecto. */
  --nav-glow-core:    rgba(96, 140, 240, .36);
  --nav-glow-mid:     rgba(70, 110, 215, .22);
  /* La cola del degradado: casi transparente, pero NO transparente. Es lo que
     evita que la rampa caiga de golpe a cero y deje ver el contorno de la
     elipse como un arco. Ver la nota larga en .ifx-nav-glow. */
  --nav-glow-cola:    rgba(70, 110, 215, .05);

  --nav-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;

  /* Alto de la capa del resplandor. El JS lo lee para centrarla. */
  /* Sube junto con el alto de fila: lo que importa es cuantas opciones abarca,
     no el valor absoluto. 44px de paso x ~12 opciones. */
  --nav-glow-h: 540px;
}

/* ---- Superficie -------------------------------------------------------- */
.container.body .col-md-3.left_col {
  background: var(--nav-bg);
  box-shadow: inset -1px 0 0 var(--nav-edge);
}
.container.body .col-md-3.left_col > .left_col.scroll-view {
  /* z-index explicito para que este contenedor cree su propio contexto de
     apilamiento: asi el orden entre el resplandor (0) y el contenido (1) queda
     resuelto aqui dentro y no depende de ancestros. */
  position: relative;
  z-index: 0;
  background: var(--nav-bg);
  min-height: 100%;
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--nav-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- La barra de scroll de la lateral ------------------------------------
   La lateral no ensena barra de scroll, nunca. Ni en reposo ni al pasar el
   puntero por encima: la raya clara pegada al borde del menu es justo lo que se
   reporto como "scroll interno".

   Se apaga la BARRA, no el desplazamiento: overflow-y sigue en auto, asi que en
   una ventana demasiado baja para el menu la rueda y el trackpad siguen
   llegando a la ultima opcion. Lo unico que desaparece es el adorno.

   De paso se quitan los 5px de carril que la barra le robaba al contenido: con
   ancho 0 el menu mide lo mismo en las pantallas que desbordan y en las que no,
   y las opciones dejan de moverse de sitio al cambiar de seccion.

   Hay que declarar el ancho a proposito: si no se declara, macOS decide, y con
   el raton conectado dibuja su propia barra gris de 15px encima del menu. */
.left_col.scroll-view::-webkit-scrollbar { width: 0; height: 0; }
/* Firefox no tiene el pseudo-elemento de arriba */
.left_col.scroll-view { scrollbar-width: none; }

/* =========================================================================
   RESPLANDOR DE FONDO
   Elipse anclada al borde izquierdo que sigue a la opción seleccionada.
   Se mueve con transform (lo compone la GPU); animar top o background-position
   obligaría a repintar el degradado completo en cada frame.
   ========================================================================= */
/* POSITION: FIXED, NO ABSOLUTE. Esto no es cosmetico, es el arreglo del scroll
   interno de la barra.

   Siendo absolute, la capa era descendiente posicionada de .left_col.scroll-view
   —que es el contenedor con overflow-y: auto— y por tanto CONTABA para su altura
   desplazable. La capa mide 540px y el JS la baja para centrarla en la opcion
   activa: con Configuracion > Monitoreo variables (y con Mis alertas, la de
   debajo) el centro cae por el pixel 595, asi que la capa llegaba al 865 y el
   contenedor se creia de 865px de alto aunque el menu acabara en el 678. De ahi
   salia la barra de scroll dentro del menu, y por eso solo pasaba en esas dos
   opciones: son las unicas lo bastante abajo.

   Fijandola al viewport su bloque contenedor deja de ser el contenedor con
   scroll, y una caja asi ya no entra en el calculo de la altura desplazable. Se
   ve exactamente igual porque .col-md-3.left_col tambien es fixed en 0,0.

   El ancho hay que escribirlo: en fixed, width:100% seria el ancho de la VENTANA
   y la capa se derramaria sobre el contenido. Los dos valores son los de
   .col-md-3.left_col en build/css/custom.css (lineas 1024 y 1020); si el ancho
   de la barra cambia alli, cambia aqui. */
.ifx-nav-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 230px;
  height: var(--nav-glow-h);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  /* El nucleo se sostiene hasta el 18% para dar una meseta plana, y el
     desvanecido se estira para un lavado amplio. Sin esos dos ajustes el
     resplandor se lee como una mancha concentrada y no como luz de fondo.

     DONDE TERMINA EL DEGRADADO IMPORTA. Las paradas se miden sobre el RADIO de
     la elipse, no sobre el ancho de la barra. Medido en la pantalla real:
     barra de 230px -> radio horizontal 118% = 271px -> la parada "transparent
     82%" caia en 0.82 x 271 = 223px, SIETE PIXELES antes del borde derecho.
     El contorno de la elipse quedaba dibujado dentro de la zona visible y se
     leia como un arco curvo pegado al borde, en vez de como luz que se apaga.

     Se arregla con dos cambios, no con uno:
       - una parada intermedia casi transparente (.05 al 64%), que aplana la
         rampa antes de que acabe; el contorno se ve cuando la pendiente cae
         de golpe a cero, no por el color en si
       - la parada final al 88% -> 0.88 x 271 = 238px, ya FUERA de la barra
     Con eso, en el borde (230px) la opacidad va por 0.006: invisible. */
  background: radial-gradient(
      ellipse 118% 50% at 0% 50%,
      var(--nav-glow-core)  0%,
      var(--nav-glow-core) 18%,
      var(--nav-glow-mid)  44%,
      var(--nav-glow-cola) 64%,
      transparent          88%);
  transform: translate3d(0, -9999px, 0);
  transition: transform .62s cubic-bezier(.22, .61, .36, 1),
              opacity   .45s ease;
}
/* Modo colapsado: la barra mide 90px. */
.nav-sm .ifx-nav-glow { width: 90px; }

/* El JS agrega esta clase una vez colocado, para que el primer salto no se vea. */
.ifx-nav-glow.is-visible { opacity: 1; }
/* Mientras el JS reposiciona sin animar (colocación inicial, resize, colapsar). */
.ifx-nav-glow.no-anim { transition: none !important; }

/* El contenido va por encima del resplandor. */
.left_col.scroll-view > .navbar.nav_title,
.left_col.scroll-view > .clearfix,
.left_col.scroll-view > br,
.left_col.scroll-view > #sidebar-menu.main_menu_side { position: relative; z-index: 1; }

/* ---- Encabezado / Logo ------------------------------------------------- */
.left_col .navbar.nav_title {
  background: transparent;
  border: 0 !important;
  border-bottom: 1px solid var(--nav-edge) !important;
  border-radius: 0;
  margin: 0 !important;
  width: 100%;
  height: auto;
}

/* 14 + 50 (logo) + 13 + 1 de borde = 78px. La barra superior lleva el mismo
   min-height, para que las dos líneas divisorias formen una sola recta donde
   las barras se juntan. El borde cuenta porque aquí la altura es automática.
   La cruz bajó de 64 a 50px y el relleno subió lo mismo que ella bajó: así el
   encabezado sigue midiendo 78 y la barra superior no tiene que moverse.
   Si algún día se cambia el alto del logo, hay que recalcular este relleno o
   mover también .top_nav .nav_menu. Los dos valores van juntos SIEMPRE. */
.nav-md .left_col .navbar.nav_title { padding: 14px 16px 13px !important; }
.nav-md .site_title {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: auto !important;
  line-height: normal !important;
  overflow: visible !important;
  white-space: nowrap;
  padding: 0 !important;
  margin: 0 !important;
  transition: opacity .18s ease;
}
.nav-md .site_title:hover { opacity: .82; }
/* El logo ya no son dos <img src="images/...">, son dos <span> con la imagen
   de fondo, y la imagen viaja incrustada en esta misma hoja (bloque LOGO-INI de
   mas abajo).

   El motivo no es de diseño. En dos subidas seguidas la carpeta images/ no
   llegó al servidor y el logo salió roto, mientras que build/css/ llegó las dos
   veces. Metiendo el PNG dentro del CSS, el logo viaja con la hoja y deja de
   depender de que suba una carpeta aparte. Son 5 KB de imagen; el ahorro de una
   petición extra los paga casi solos.

   Las medidas salen de la proporción real de cada archivo: la marca es 192x185
   (1.038) y el texto 192x57 (3.368). Se fija el alto y el ancho se calcula, para
   que ninguno de los dos salga deformado. */
.nav-md .site_title .ifx-logo-marca {
  width: 52px;
  height: 50px;
}
.nav-md .site_title .ifx-logo-texto {
  width: 148px;
  height: 44px;
  /* 52 de la marca + 11 del hueco + 4 de respiro */
  max-width: calc(100% - 67px);
}

/* 13 + 50 (logo) + 14 + 1 de borde = 78px, igual que en modo expandido. */
.nav-sm .left_col .navbar.nav_title { padding: 13px 0 14px !important; }
.nav-sm .site_title {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}
.nav-sm .site_title .ifx-logo-marca {
  width: 52px;
  height: 50px;
}
.nav-sm .site_title .ifx-logo-texto { display: none; }

/* Lo genera incrusta_logo.py a partir de images/ifix_logo_marca.png y de
   images/ifix_logo_texto.png. Para cambiar el logo se cambian esos dos archivos
   y se vuelve a correr el script; a mano no. */
/* ---- LOGO-INI (generado por incrusta_logo.py, no editar a mano) ---- */
.site_title .ifx-logo-marca,
.site_title .ifx-logo-texto {
  display: block;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.site_title .ifx-logo-marca { background-image: url("data:image/png;base64,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"); }
.site_title .ifx-logo-texto { background-image: url("data:image/png;base64,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"); }
/* ---- LOGO-FIN ---- */

/* ---- Contenedor del menú -----------------------------------------------
   El relleno de ARRIBA (12px) es parte del aire entre el logo y la primera
   opcion y no se toca. El de ABAJO si: son 22px de fondo liso por debajo de la
   ultima opcion, donde no hay nada que separar de nada. Junto con el margen
   inferior de la lista son 27px que nadie ve y que le hacen falta al menu para
   caber sin sacar barra de scroll. */
#sidebar-menu .menu_section      { margin-bottom: 0; }
#sidebar-menu .menu_section > ul { margin-top: 0; margin-bottom: 0; }
#sidebar-menu.main_menu_side    { padding: 12px 0 8px; }

/* =========================================================================
   MODO EXPANDIDO (nav-md)
   ========================================================================= */
.nav-md #sidebar-menu .nav.side-menu > li {
  position: relative;
  margin: 2px 10px;
  border-radius: 11px;
  background: transparent !important;
}

.nav-md #sidebar-menu .nav.side-menu > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  /* Alto de fila ~42px; antes 9px daba ~36px. El horizontal se queda en 12px
     a proposito: la guia del submenu esta calibrada al centro del icono, que
     depende de este valor. */
  padding: 12px;
  border: 0;
  border-radius: 11px;
  font-family: var(--nav-font);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .15px;
  line-height: 1.35;
  color: var(--nav-text) !important;
  background: transparent;
  text-shadow: none;
  box-shadow: none;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.nav-md #sidebar-menu .nav.side-menu > li > a > i {
  width: 20px;
  min-width: 20px;
  text-align: center;
  font-size: 15.5px;
  color: var(--nav-icon);
  transition: color .16s ease;
}

/* ---- Chevron ----------------------------------------------------------- */
.nav-md #sidebar-menu .nav.side-menu > li > a > span.fa {
  float: none !important;
  margin: 0 0 0 auto !important;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 10px;
  opacity: .40;
  transform-origin: 50% 50%;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .16s ease;
  backface-visibility: hidden;
}
.nav-md #sidebar-menu .nav.side-menu > li > a:hover > span.fa { opacity: .7; }
.nav-md #sidebar-menu .nav.side-menu > li.active > a > span.fa-chevron-down {
  transform: rotate(180deg);
  opacity: .85;
}

/* ---- Hover ------------------------------------------------------------- */
.nav-md #sidebar-menu .nav.side-menu > li > a:hover {
  background-color: var(--nav-hover) !important;
  color: var(--nav-text-strong) !important;
}
.nav-md #sidebar-menu .nav.side-menu > li > a:hover > i { color: var(--nav-icon-hover); }

/* ---- Grupo con submenú desplegado -------------------------------------- */
.nav-md #sidebar-menu .nav.side-menu > li.active > a {
  background: var(--nav-hover) !important;
  color: var(--nav-text-strong) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.nav-md #sidebar-menu .nav.side-menu > li.active > a > i { color: var(--nav-icon-hover); }

/* ---- Página actual ------------------------------------------------------
   Píldora NEUTRA, como en la referencia: el color lo pone el resplandor.    */
.nav-md #sidebar-menu .nav.side-menu > li.menu-activo > a,
.nav-md #sidebar-menu .nav.side-menu > li.current-page > a {
  background: var(--nav-pill) !important;
  color: var(--nav-text-strong) !important;
  font-weight: 600;
  text-shadow: none !important;
  border-right: 0 !important;
  /* El anillo va primero y el filo superior encima, para que en el borde de
     arriba gane la luz y no el anillo. */
  box-shadow: inset 0 0 0 1px var(--nav-pill-ring),
              inset 0 1px 0 var(--nav-pill-top) !important;
}
.nav-md #sidebar-menu .nav.side-menu > li.menu-activo > a > i,
.nav-md #sidebar-menu .nav.side-menu > li.current-page > a > i { color: var(--nav-text-strong); }

/* ---- EL FILO CIAN DEL TEMA ----------------------------------------------
   Gentelella marca la opcion actual con  border-right: 5px solid  sobre el
   <li>, no sobre el <a>:

       .nav.side-menu > li.current-page,
       .nav.side-menu > li.active { border-right: 5px solid <cian>; }

   Con el menu original —cuadrado y a todo lo ancho— eso era una banda limpia
   pegada al canto de la barra. Con la pildora redondeada de aqui deja de
   funcionar: el borde sigue la curva de la esquina y asoma por detras como una
   media luna suelta, ni pegada al canto ni dentro de la pildora.

   Ya se apagaba en el <a> mas arriba, pero eso no alcanza al <li>, que es
   donde el tema lo pone de verdad. Se apaga en los dos y en los tres modos
   —abierto, colapsado y submenu— porque la regla del tema no distingue.

   Va con !important y por elemento, no por estado: da igual de que copia de
   custom.css venga o con que color; si algo intenta pintar un canto a la
   derecha de una opcion, aqui se cae. */
.nav-md #sidebar-menu .nav.side-menu > li,
.nav-md #sidebar-menu .nav.side-menu > li.active,
.nav-md #sidebar-menu .nav.side-menu > li.current-page,
.nav-md #sidebar-menu .nav.side-menu > li.menu-activo,
.nav-md #sidebar-menu .nav.child_menu > li,
.nav-md #sidebar-menu .nav.child_menu > li.current-page,
.nav-md #sidebar-menu .nav.child_menu > li.menu-activo,
.nav-sm #sidebar-menu .nav.side-menu > li,
.nav-sm #sidebar-menu .nav.side-menu > li.active,
.nav-sm #sidebar-menu .nav.side-menu > li.active-sm,
.nav-sm #sidebar-menu .nav.side-menu > li.current-page,
.nav-sm #sidebar-menu .nav.side-menu > li.menu-activo {
  border-right: 0 !important;
}

/* ---- Submenú ----------------------------------------------------------- */
.nav-md #sidebar-menu ul.nav.child_menu li:before,
.nav-md #sidebar-menu ul.nav.child_menu li:after { display: none !important; }

.nav-md #sidebar-menu ul.nav.child_menu {
  margin: 2px 0 6px 21px;          /* alinea la guía con el centro del ícono padre */
  padding: 2px 0 2px 10px;
  border-left: 1px solid var(--nav-guide);
}

.nav-md #sidebar-menu .nav.child_menu > li {
  margin: 2px 0;
  padding: 0 !important;
  border-radius: 8px;
  background: transparent !important;
}
.nav-md #sidebar-menu .nav.child_menu > li > a {
  display: block;
  border-radius: 8px;
  padding: 9px 12px !important;
  font-family: var(--nav-font);
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: .12px;
  color: var(--nav-text-soft) !important;
  background: transparent;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.nav-md #sidebar-menu .nav.child_menu > li > a:hover {
  background: var(--nav-hover) !important;
  color: var(--nav-text-strong) !important;
}
.nav-md #sidebar-menu .nav.child_menu > li.menu-activo > a,
.nav-md #sidebar-menu .nav.child_menu > li.current-page > a {
  background: var(--nav-pill) !important;
  color: var(--nav-text-strong) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px var(--nav-pill-ring),
              inset 0 1px 0 var(--nav-pill-top) !important;
}

/* =========================================================================
   SEPARADOR DE LA ZONA DE CUENTA
   "Mi información" abre lo personal (mi empresa, configuración) y todo lo
   anterior es trabajo. Ese corte existe igual en los 7 roles, así que basta
   con enganchar el id y no hace falta tocar menu.php.
   Se dibuja con ::after y no con border-top: un borde entraría en la caja de
   la opción y se vería dentro de la píldora al pasar el mouse.
   ========================================================================= */
#sidebar-menu .nav.side-menu > li#opcion-mi-informacion { margin-top: 15px !important; }

#sidebar-menu .nav.side-menu > li#opcion-mi-informacion::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 2px;
  right: 2px;
  height: 1px;
  background: var(--nav-edge);
  pointer-events: none;
}
/* En modo colapsado la opción es más angosta y el aire entre filas es mayor. */
.nav-sm #sidebar-menu .nav.side-menu > li#opcion-mi-informacion { margin-top: 16px !important; }
.nav-sm #sidebar-menu .nav.side-menu > li#opcion-mi-informacion::after { top: -9px; left: 12px; right: 12px; }

/* =========================================================================
   ENTRADA ESCALONADA
   Corre en cada carga de página. Sólo opacity y transform, que no provocan
   recálculo de layout: el offsetTop de cada opción no cambia, así que el JS
   puede medir la posición del resplandor mientras la animación corre.
   ========================================================================= */
@keyframes ifxNavItemIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ifxNavHeadIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.left_col .navbar.nav_title {
  animation: ifxNavHeadIn .42s cubic-bezier(.22, .61, .36, 1) both;
}

#sidebar-menu .nav.side-menu > li {
  animation: ifxNavItemIn .38s cubic-bezier(.22, .61, .36, 1) both;
}
#sidebar-menu .nav.side-menu > li:nth-child(1)  { animation-delay: .04s; }
#sidebar-menu .nav.side-menu > li:nth-child(2)  { animation-delay: .065s; }
#sidebar-menu .nav.side-menu > li:nth-child(3)  { animation-delay: .09s; }
#sidebar-menu .nav.side-menu > li:nth-child(4)  { animation-delay: .115s; }
#sidebar-menu .nav.side-menu > li:nth-child(5)  { animation-delay: .14s; }
#sidebar-menu .nav.side-menu > li:nth-child(6)  { animation-delay: .165s; }
#sidebar-menu .nav.side-menu > li:nth-child(7)  { animation-delay: .19s; }
#sidebar-menu .nav.side-menu > li:nth-child(8)  { animation-delay: .215s; }
#sidebar-menu .nav.side-menu > li:nth-child(9)  { animation-delay: .24s; }
#sidebar-menu .nav.side-menu > li:nth-child(10) { animation-delay: .265s; }
#sidebar-menu .nav.side-menu > li:nth-child(11) { animation-delay: .29s; }
#sidebar-menu .nav.side-menu > li:nth-child(12) { animation-delay: .315s; }
#sidebar-menu .nav.side-menu > li:nth-child(13) { animation-delay: .34s; }
#sidebar-menu .nav.side-menu > li:nth-child(14) { animation-delay: .365s; }

/* El submenú lo despliega jQuery con slideDown; no se le encima animación. */
#sidebar-menu .nav.child_menu > li { animation: none !important; }

/* =========================================================================
   MODO COLAPSADO (nav-sm) — 90px
   ========================================================================= */
.nav-sm #sidebar-menu .nav.side-menu > li {
  position: relative;
  margin: 5px 8px !important;
  border-radius: 12px;
  background: transparent !important;
}

.nav-sm #sidebar-menu .nav.side-menu > li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  padding: 13px 4px !important;
  font-family: var(--nav-font);
  font-size: 10px !important;
  font-weight: 500;
  letter-spacing: .2px;
  line-height: 1.25;
  color: var(--nav-text) !important;
  background: transparent;
  text-shadow: none;
  box-shadow: none;
  transition: background-color .16s ease, color .16s ease;
}
.nav-sm #sidebar-menu .nav.side-menu > li > a > i {
  width: auto !important;
  min-width: 0;
  margin: 0 0 6px !important;
  font-size: 21px !important;
  color: var(--nav-icon);
  transition: color .16s ease;
}
.nav-sm #sidebar-menu .nav.side-menu > li > a > span.fa-chevron-down { display: none !important; }

.nav-sm #sidebar-menu .nav.side-menu > li > a:hover {
  background-color: var(--nav-hover) !important;
  color: var(--nav-text-strong) !important;
}
.nav-sm #sidebar-menu .nav.side-menu > li > a:hover > i { color: var(--nav-icon-hover); }

.nav-sm #sidebar-menu .nav.side-menu > li.menu-activo > a,
.nav-sm #sidebar-menu .nav.side-menu > li.current-page > a,
.nav-sm > .nav.side-menu > li.active-sm > a {
  background: var(--nav-pill) !important;
  color: var(--nav-text-strong) !important;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--nav-pill-ring),
              inset 0 1px 0 var(--nav-pill-top) !important;
}
.nav-sm #sidebar-menu .nav.side-menu > li.menu-activo > a > i,
.nav-sm #sidebar-menu .nav.side-menu > li.current-page > a > i,
.nav-sm > .nav.side-menu > li.active-sm > a > i { color: var(--nav-text-strong) !important; }

/* ---- Submenú flotante -------------------------------------------------- */
.nav-sm #sidebar-menu ul.nav.child_menu {
  /* Un escalon por encima de --nav-bg a proposito: es un panel flotante y
     necesita despegarse de la barra. Si se cambia el fondo, subir este igual. */
  background: #2C3856;
  border: 1px solid var(--nav-edge);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .5);
  padding: 6px;
  overflow: hidden;
}
.nav-sm #sidebar-menu ul.nav.child_menu li {
  padding: 0 !important;
  margin: 2px 0;
  background: transparent !important;
}
.nav-sm #sidebar-menu ul.nav.child_menu li a {
  border-radius: 8px;
  padding: 9px 12px !important;
  font-family: var(--nav-font);
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-align: left !important;
  color: var(--nav-text-soft) !important;
  transition: background-color .16s ease, color .16s ease;
}
.nav-sm #sidebar-menu ul.nav.child_menu li a:hover {
  background: var(--nav-hover) !important;
  color: var(--nav-text-strong) !important;
}
.nav-sm #sidebar-menu ul.nav.child_menu li.menu-activo a,
.nav-sm #sidebar-menu ul.nav.child_menu li.current-page a {
  background: var(--nav-pill) !important;
  color: var(--nav-text-strong) !important;
}

/* =========================================================================
   MENÚ FIJO
   ========================================================================= */
.nav-md .container.body .col-md-3.left_col,
.nav-sm .container.body .col-md-3.left_col {
  position: fixed !important;
  top: 0;
  left: 0;
  height: 100vh !important;
}

.nav-md .container.body .col-md-3.left_col > .left_col.scroll-view {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-sm .container.body .col-md-3.left_col > .left_col.scroll-view {
  height: 100vh;
  overflow: visible;
}

/* =========================================================================
   BARRA SUPERIOR (.top_nav)
   Mismo lenguaje que la lateral: misma superficie, misma tipografía, mismo
   tratamiento de hover. Como la lateral es fija y arranca en x=0, con el mismo
   fondo las dos forman una sola pieza de cromo en L.

   OJO: .boton-encabezado NO se toca de forma global. Esa clase se usa en 62
   lugares fuera del encabezado (botones de búsqueda y de submit en formularios
   de pólizas, órdenes de servicio, etc.), donde va sobre fondo claro. Todo lo
   de aquí está acotado con .top_nav por delante.
   ========================================================================= */
.top_nav .nav_menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  float: none;
  width: 100%;
  /* Atado al encabezado de la barra lateral (7 + 64 + 6 + 1). Si allá cambia
     el alto del logo, aquí hay que cambiar este número o la línea divisoria
     de las dos barras deja de ser una sola recta. */
  min-height: 78px;
  padding: 0 18px;
  margin-bottom: 0;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-edge);
  font-family: var(--nav-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* El botón de colapsar queda a la izquierda cuando es visible.
   (El markup lo oculta con d-lg-none, así que en escritorio no aparece.) */
.top_nav .nav.toggle {
  margin: 0 auto 0 0 !important;
  float: none;
  padding: 0;
}
.top_nav #menu_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: var(--nav-icon);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.top_nav #menu_toggle:hover {
  background: var(--nav-hover);
  color: var(--nav-text-strong);
}
.top_nav #menu_toggle i { font-size: 17px; }

/* La lista de la derecha deja de flotar: la alinea el flex del contenedor. */
.top_nav nav.navbar-nav { float: none; margin: 0; }
.top_nav .navbar-right {
  display: flex;
  align-items: center;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.top_nav .navbar-right > li {
  display: flex;
  align-items: center;
  float: none;
  position: static;
}

.top_nav .encabezado-etiqueta-usuario-rol {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 0;
  font-family: var(--nav-font);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .15px;
  color: var(--nav-text);
  white-space: nowrap;
}
.top_nav .encabezado-etiqueta-usuario-rol > i.fa-user {
  font-size: 15px !important;
  color: var(--nav-icon);
}

/* Botón "Salir": fantasma sobre oscuro. El relleno #34495E del tema base
   quedaría invisible contra esta superficie. */
.top_nav .boton-encabezado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 0 6px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  background-color: transparent;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--nav-text);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.top_nav .boton-encabezado:hover,
.top_nav .boton-encabezado:focus {
  background-color: var(--nav-hover);
  border-color: rgba(255, 255, 255, .26);
  color: var(--nav-text-strong);
  text-decoration: none;
}
.top_nav .boton-encabezado i { font-size: 13px; }

/* El tema base fija 15px para todo icono dentro de .top_nav; aquí ya se
   define el tamaño en cada sitio. */
.top_nav li a i { font-size: inherit; }

@media (max-width: 991px) {
  .top_nav .nav_menu { padding: 0 12px; }
  .top_nav .encabezado-etiqueta-usuario-rol { font-size: 12.5px; }
}

/* =========================================================================
   ACCESIBILIDAD E IMPRESIÓN
   ========================================================================= */
.left_col #sidebar-menu .nav.side-menu a:focus-visible,
.left_col #sidebar-menu .nav.child_menu a:focus-visible,
.left_col .site_title:focus-visible,
.top_nav .boton-encabezado:focus-visible,
.top_nav #menu_toggle:focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: -2px;
  border-radius: 10px;
}

@media print { .ifx-nav-glow { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .ifx-nav-glow { transition: opacity .2s ease !important; }
  .left_col .navbar.nav_title,
  #sidebar-menu .nav.side-menu > li { animation: none !important; }
  .left_col .nav a,
  .left_col .nav a > i,
  .nav-md #sidebar-menu .nav.side-menu > li > a > span.fa,
  .nav-md .site_title { transition: none !important; }
}