/* ============================================================================
   CGEI THEME — Menú lateral (Fase 2, docs/plan_mejora_cgei.md)

   Copia literal del CSS real de redpronorte.freya.cl para el menú lateral,
   tomado de:
     - C:\laragon\www\redpronorte.freya.cl\public_html\vistas\css\components.css
       (bloque de tokens :root, líneas 18-150)
     - C:\laragon\www\redpronorte.freya.cl\public_html\vistas\css\custom.css
       (líneas 477-806: #left, .left_media, .user-media, #menu, dropdown_menu,
       sidebar-left-hidden)

   Se copiaron los valores REALES de RPN (marrón/naranjo), sin remapear a
   colores de CGEI, tal como se pidió. Se verificó línea por línea contra
   redpronorte.freya.cl/public_html/vistas/p_admin/menu/menu_lateral_adm.php
   (mismo HTML que usa CGEI: <li class="dropdown_menu">, <span class="fa arrow">,
   etc.) que este es efectivamente el CSS que se aplica a ese archivo.

   IMPORTANTE: este CSS real de RPN NO tiene "cajitas" de ícono ni fila activa
   en durazno — ese diseño no existe en ningún archivo de la copia de RPN
   revisada (custom.css, components.css, pages/*.css). Lo que sigue es el
   diseño real: bloque superior sólido, ítems planos, borde izquierdo de 4px
   como indicador de activo/hover. Si la vista que viste en producción es
   distinta a esto, no está en los archivos a los que tengo acceso.
   ============================================================================ */

/* ---- Copiado de components.css líneas 18-150 (bloque de tokens :root) ----
   Colores recoloreados a pedido del usuario: no quiere el marrón/naranjo de
   RPN, sino algo armonioso con la paleta general de CGEI. Se usan los mismos
   colores que ya existen en vistas/css/components.css de CGEI:
   --primary/--blue (#00c0ef) y --mint (#0fb0c0) como acento, y el mismo gris
   oscuro que ya usa el navbar de CGEI (#313e48) para el bloque superior del
   sidebar. Solo cambian los VALORES de estas dos variables; toda la
   estructura/animaciones siguen siendo la copia literal de RPN. ---- */
:root {
  /* ---- CAPA 1: paleta cruda (no usar directo en componentes) ---- */
  --rp-brown:           #313E48;   /* panel lateral superior / bloque bienvenida — gris oscuro, igual al navbar de CGEI */
  --rp-dark-blue:       #16243D;   /* navbar superior */
  --rp-orange:          #0FB0C0;   /* menu activo / acentos — mint de CGEI (components.css --mint) */
  --rp-teal:            #00BF86;   /* tarjetas activas / acciones principales */
  --rp-red:             #FF8086;   /* danger */
  --rp-info:            #1B85C0;   /* info / acento azul */
  --rp-mint:            #0F9C78;   /* acento verde del logo */

  --rp-white:           #FFFFFF;
  --rp-black:           #000000;

  --rp-gray-50:         #F9F9F9;   /* fondos internos claros */
  --rp-gray-100:        #F5F3F4;   /* fondo general de pagina */
  --rp-gray-200:        #EFEFEF;   /* lineas y fondos muy claros */
  --rp-gray-300:        #E6E4E5;   /* sombras / antialiasing en fondos claros */
  --rp-gray-400:        #D6D5D5;   /* bordes y grises suaves */
  --rp-gray-500:        #D4D4D4;   /* tarjetas inactivas */
  --rp-gray-600:        #D0D1D3;   /* bordes secundarios */
  --rp-gray-700:        #A3A9AD;   /* texto e iconos deshabilitados sidebar */
  --rp-gray-800:        #525252;   /* texto secundario */
  --rp-gray-900:        #222222;   /* texto principal / iconos fuertes */

  --rp-search-bg:       #E7F1FF;   /* input de busqueda superior */
  --rp-logo-blue-dark:  #223D78;
  --rp-logo-blue:       #225692;

  /* Alias legacy: mantener si ya existen clases usando estos nombres */
  --rp-gray-blue:       var(--rp-brown);      /* primary anterior */
  --rp-dark:            var(--rp-dark-blue);  /* secondary anterior */
  --rp-icon-sidebar:    var(--rp-gray-700);
  --rp-bg-page:         var(--rp-gray-100);

  /* ---- CAPA 2: tokens semanticos (los que usa la UI) ---- */
  --brand-primary:      var(--rp-dark-blue);
  --brand-secondary:    var(--rp-dark-blue);
  --brand-accent:       var(--rp-orange);
  --brand-action:       var(--rp-teal);

  --text-base:          var(--rp-gray-900);
  --text-muted:         var(--rp-gray-800);
  --text-disabled:      var(--rp-gray-700);
  --text-on-brand:      var(--rp-white);
  --text-on-accent:     var(--rp-white);
  --text-on-action:     var(--rp-gray-900);

  --surface-page:       var(--rp-gray-100);
  --surface-card:       var(--rp-white);
  --surface-card-muted: var(--rp-gray-500);
  --surface-header:     var(--rp-gray-50);
  --surface-search:     var(--rp-search-bg);

  --border-default:     var(--rp-gray-200);
  --border-strong:      var(--rp-gray-600);

  /* ---- CAPA 3: tokens de componente ---- */
  /* Navbar superior */
  --navbar-bg:          var(--brand-secondary);
  --navbar-text:        var(--text-on-brand);
  --navbar-hover-bg:    var(--brand-secondary);

  /* Sidebar / menu lateral */
  --sidebar-bg:         var(--rp-white);
  --sidebar-top-bg:     var(--brand-primary);
  --sidebar-icon:       var(--text-disabled);
  --menu-text:          var(--brand-secondary);
  --menu-active-bg:     rgba(15, 176, 192, 0.10);   /* tinte suave del acento (mint) */
  --menu-active-text:   var(--brand-accent);
  --menu-active-icon:   var(--brand-accent);
  --menu-hover-bg:      var(--rp-gray-50);
  --menu-hover-text:    var(--brand-accent);
  --menu-submenu-bg:    var(--rp-gray-50);
}

/* ---- Copiado de custom.css líneas 477-806 (menú lateral completo) ----
   NOTA: se omitió a propósito el bloque original `#left { position: absolute;
   left: -250px; ... }`. CGEI ya define ese posicionamiento en su propio
   custom.css, con un media query `@media (min-width: 768px) { #left {
   position: relative; left: auto; ... } }` que es el que muestra el sidebar
   en escritorio. Al duplicar el bloque de RPN (sin ese media query) acá,
   quedaba cargando DESPUÉS de custom.css y volvía a ocultar el sidebar
   incluso en escritorio — eso fue lo que "hizo desaparecer" el menú.
   Todo lo demás (colores, animaciones, hover/activo) sí se mantiene. ---- */

.sidebar-left-opened #left {
  overflow-y: auto; }

.left_media {
	background-color: var(--brand-primary);
}

.user-media .user-link {
  display: flex;
  float: none;    /* el custom.css original de CGEI trae "float: left" en este mismo selector; sin este reset el elemento se encoge al ancho de su contenido y todo queda pegado a la izquierda en vez de centrado */
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-on-brand); }

.user-media .user-link .user-img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  margin: 17px 10px 3px 17px;
  justify-content: center; }

.user-media .media-body {
  display: block;
  margin-left: 12px; }

.user-media .media-body h5.media-heading {
  align-items: center;
  color: #fff;
  padding-top: 8px;
  margin-bottom: 3px; }

.user-media .media-body ul.user-info li {
  color: #ccc; }

.side-right .user-link .user-label {
  left: 6px;
  right: auto; }

.sidebar-left-mini .user-wrapper {
  position: absolute;
  top: 0;
  left: -100%;
  display: none;
  min-width: 250px; }

.user-media-toggleHover {
  display: none; }

.sidebar-left-mini .user-media-toggleHover {
  font-size: 18px;
  color: #fff;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  display: inherit; }

.sidebar-left-mini .user-media:hover .user-wrapper {
  left: 100%;
  display: inherit;
  z-index: 99; }

.sidebar-left-mini.side-right .user-media:hover .user-wrapper {
  left: auto;
  right: 100%; }

/* FIX (no estaba en la copia literal de RPN): .media de Bootstrap pone
   display:flex en el contenedor padre (.media.user-media), lo que convierte
   a .user-wrapper en flex-item sin ancho propio — se encogía a ~118px en vez
   de ocupar los 250px del sidebar, por lo que .user-link/.user-info quedaban
   centrados dentro de una caja angosta pegada a la izquierda, no en el ancho
   real del sidebar. Se agrega width:100% para que sí ocupe todo el ancho. */
.user-wrapper {
  width: 100%;
}

.user-wrapper .user-info {
  width: 100%;
  text-align: center;
  padding: 20px 10px;
}

#menu.affix {
  position: fixed;
  width: 250px;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; }

#menu.affix:hover {
  overflow-y: scroll; }

.sidebar-left-mini #menu .nav-header {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important; }

#menu .fa.arrow {
  float: right;
  padding-top: 3px;
  margin-right: 15px;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s ease;
  transform-origin: center; }

#menu .fa.arrow:before {
  content: "\f104"; }

#menu .active > a > .fa.arrow:before {
  content: "\f104"; }

#menu li.active > a > .fa.arrow {
  transform: rotate(-90deg); }

#menu > li.dropdown_menu > a {
  display: flex;
  align-items: center; }

#menu > li.dropdown_menu > a > .link-title {
  flex: 1; }

#menu > li.dropdown_menu > a > .fa.arrow {
  float: none; }

.badge {
  padding: 0.4em 0.4em; }

.badge-pill {
  padding-left: 0.6em;
  padding-right: 0.6em; }

.admin_img3 {
  width: 64px;
  height: 64px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

#left, #right {
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: left, width;
  z-index: 90;
  width: 250px; }

#menu li a {
  color: var(--menu-text);
  padding: 15px 8px 15px 15px;
  border-bottom: none; }

#menu li.active > ul {
  background-color: var(--menu-submenu-bg); }

#menu li ul li a {
  padding: 10px 8px 10px 30px; }

#menu li.active > a {
  color: var(--menu-active-text); }

#menu > li.active {
  background-color: var(--menu-active-bg); }

#menu > li.active > a {
  border-left: 4px solid var(--brand-accent);
  padding-left: 11px; }

.sidebarbottom {
  top: auto !important;
  bottom: 0 !important; }

#menu li:nth-child(3) .sidebarbottom {
  top: 0 !important;
  bottom: auto !important; }

#menu, #menu ul, #menu li, #menu a {
  padding: 0;
  margin: 0;
  color: var(--menu-text); }

#menu, #menu ul {
  list-style: none; }

#menu li, #menu a {
  position: relative;
  display: block; }

#menu a, #menu a:hover, #menu a:focus, #menu a:active {
  text-decoration: none; }

#menu ul {
  background: var(--menu-submenu-bg); }

#menu li > ul.collapse {
  overflow: hidden;
  will-change: height; }

#menu li > ul.collapsing {
  overflow: hidden;
  transition: height 0.24s cubic-bezier(0.22, 1, 0.36, 1); }

#menu li > ul.collapse.show {
  animation: menuSubmenuFade 0.18s ease-out; }

@keyframes menuSubmenuFade {
  from {
    opacity: 0.75; }
  to {
    opacity: 1; } }

#menu ul > li > ul.sub-submenu > li > a {
  padding-left: 50px; }

#menu ul > li > ul > li > ul.sub-submenu > li > a {
  padding-left: 65px; }

#menu ul > li > ul > li > ul.sub-submenu > li > ul > li > a {
  padding-left: 80px; }

#menu ul > li > ul > li > ul.sub-submenu > li > ul > li > ul > li > a {
  padding-left: 95px; }

#menu li:not(.active) a:hover {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
  border-left: 4px solid var(--brand-accent);
  padding: 15px 8px 15px 11px;
  box-shadow: inset 0 1px 0 var(--border-default), inset 0 -1px 0 var(--border-default); }

#menu li ul li:not(.active) a:hover {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-text);
  border-left: 4px solid var(--brand-accent);
  padding: 10px 8px 10px 26px;
  box-shadow: inset 0 1px 0 var(--border-default), inset 0 -1px 0 var(--border-default); }

#menu li.active > ul > li > a {
  color: var(--menu-text); }

#menu li.active ul li.active > a {
  color: var(--menu-active-text);
  background-color: var(--menu-active-bg);
  border-left: 4px solid var(--brand-accent);
  padding-left: 26px;
  font-weight: 600; }

.sub-menu.sub-submenu.collapse.show li a:hover {
  padding-left: 46px !important; }

.sub-menu.sub-submenu.collapse.show li.active a:hover {
  padding-left: 50px !important; }

.sub-menu.sub-submenu.collapse.show .sub-submenu li.active a:hover {
  padding-left: 65px !important; }

.sub-menu.sub-submenu.collapse.show .sub-submenu li a:hover {
  padding-left: 61px !important; }

.sub-menu.sub-submenu.collapse.show .sub-submenu .sub-submenu li.active a:hover {
  padding-left: 80px !important; }

.sub-menu.sub-submenu.collapse.show .sub-submenu .sub-submenu li a:hover {
  padding-left: 76px !important; }

.sub-menu.sub-submenu.collapse.show .sub-submenu .sub-submenu .sub-submenu li a:hover {
  padding-left: 91px !important; }

.new_badge {
  margin-left: 10px; }

.no_header #left {
  display: table-cell;
  float: inherit; }

.no_header #content {
  display: table-cell;
  vertical-align: top; }

/* ================================ End of left menu ===================================*/
/*========================== 2.3 Minimize menu hover ======================*/
.dropdown_menu.active:hover {
  background-color: var(--menu-active-bg) !important; }

.sidebar-left-hidden .dropdown_menu .sub-menu .active {
  background-color: var(--menu-active-bg) !important; }

.sidebar-left-hidden .dropdown_menu .sub-menu li.active > a {
  background-color: var(--menu-active-bg) !important;
  color: var(--menu-active-text) !important;
  padding-top: 10px  !important;
  padding-bottom: 10px !important; }

.sidebar-left-hidden .dropdown_menu li.active > a:hover {
  background-color: var(--menu-active-bg) !important;
  border-left: 0 !important;
  padding: 10px 8px 10px 30px !important; }

.sidebar-left-hidden .dropdown_menu .sub-menu li.active a:hover {
  box-shadow: none !important;
  padding-top: 10px  !important;
  padding-bottom: 10px !important; }

.sidebar-left-hidden .sub-submenu li.active > a:hover {
  border-left: 0 !important; }

.sidebar-left-hidden .dropdown_menu .collapse li.active > a {
  background-color: var(--menu-active-bg); }

.sidebar-left-hidden .dropdown_menu .collapse li.active > a:hover {
  background-color: var(--menu-active-bg); }

.sidebar-left-hidden .dropdown_menu.active .collapse li.active > a:hover {
  background-color: var(--menu-active-bg) !important;
  border-left: 0;
  padding: 10px 8px 10px 30px !important; }

.sidebar-left-hidden #menu .dropdown_menu > ul {
  max-height: 500px;
  overflow-y: auto; }

/*======================= minimize menu hover end ===========================*/

/*======================= campos de fecha/hora separados (evento rueda de negocio) ===========================*/
.campos-fecha-separados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px; }

.campos-fecha-separados > .form-control,
.campos-fecha-separados > .input-group-text,
.campos-fecha-separados > .btn {
  flex: 0 0 auto;
  border-radius: .25rem !important; }

.campos-fecha-separados > input[type="date"].form-control,
.campos-fecha-separados > input[type="text"].form-control {
  width: auto;
  min-width: 150px;
  flex: 1 1 150px; }

/*======================= panel evento mandante/proveedor (ver evento MP) ===========================*/
.cgei_panel_col {
  margin-bottom: 20px; }

.cgei_panel_heading {
  text-align: left;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--text-base);
  margin: 0 0 14px 0; }

.cgei_inscripcion_row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px; }

.cgei_inscripcion_row span {
  font-weight: 600;
  color: var(--text-base); }

.cgei_stat_card {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--rp-teal);
  border-radius: 8px;
  padding: 16px 20px;
  text-decoration: none; }

.cgei_stat_card:hover,
.cgei_stat_card:focus {
  color: inherit;
  text-decoration: none;
  opacity: .92; }

.cgei_stat_icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px; }

.cgei_stat_body {
  display: flex;
  flex-direction: column;
  gap: 2px; }

.cgei_stat_title {
  color: #fff;
  font-weight: 700;
  font-size: 16px; }

.cgei_stat_desc {
  color: rgba(255, 255, 255, .9);
  font-size: 13px; }

/*======================= acciones del evento (ver evento MP) ===========================*/
.cgei_section_label {
  text-align: left;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin: 0 0 16px 0; }

.cgei_actions_row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; }

.cgei_action_card {
  flex: 1 1 260px;
  max-width: 340px;
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 20px; }

.cgei_action_card a {
  display: block;
  text-decoration: none; }

.cgei_action_icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--rp-gray-200);
  color: var(--rp-gray-800);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px; }

.cgei_action_title {
  display: block;
  font-weight: 700;
  color: var(--text-base);
  margin-bottom: 6px; }

.cgei_action_desc {
  display: block;
  font-size: 13px;
  color: var(--text-muted); }

@media (max-width: 575.98px) {
  .cgei_inscripcion_row,
  .cgei_actions_row {
    gap: 12px; }

  .cgei_stat_card {
    padding: 14px 16px; }

  .cgei_action_card {
    flex: 1 1 100%;
    max-width: 100%; }
}
/*======================= campos de fecha/hora separados fin ===========================*/