/* ===== MENÚ PRINCIPAL (independiente; mismo aspecto que el de productos) - Nico 11/2026 ===== */
.homs-sidemenu-principal{
  --hsmpr-orange:#fe5000;
  --hsmpr-orange-soft:rgba(254,80,0,.1);
  --hsmpr-orange-text:#c24e0b;
  --hsmpr-dark:#111418;
  --hsmpr-text:#1d2025;
  --hsmpr-muted:#6b7280;
  --hsmpr-line:#eceef1;
  --hsmpr-bg:#fff;
  --hsmpr-hover:#f4f5f7;
  --hsmpr-ease:cubic-bezier(.22,1,.36,1);
  position:fixed;inset:0 0 0 auto;z-index:100001; /* anclado a la derecha */
  width:min(330px,100vw);height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:#ffffffe0;
  color:var(--hsmpr-text);
  /* font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; */
  box-shadow:-24px 0 60px rgba(0,0,0,.18);
  transform:translateX(102%);visibility:hidden;
  transition:transform .5s var(--hsmpr-ease),visibility 0s .5s;
  outline:0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);

}
.homs-sidemenu-principal.is-open{transform:none;visibility:visible;transition-delay:0s}
.homs-sidemenu-principal *,.homs-sidemenu-principal *::before,.homs-sidemenu-principal *::after{box-sizing:border-box}

/* Overlay (va en la plantilla; si falta, lo crea el JS) */
.homs-sidemenu-principal__overlay{
  position:fixed;inset:0;z-index:100000;
  background:transparent; /* sin blur: solo recoge el clic para cerrar */
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.homs-sidemenu-principal__overlay.is-visible{opacity:1;pointer-events:auto}
html.homs-sidemenu-principal-lock{overflow:hidden}

/* Cabecera */
.homs-sidemenu-principal__header{min-height:25px;flex-shrink:0} /* espacio para la X */
.homs-sidemenu-principal__close{
  position:absolute;
  top: 31px;
  right: 10px;
  width: 34px;
  height: 34px;
  display:grid;place-items:center;margin:0;padding:0;min-height:0;
  border:0;background:none;box-shadow:none;line-height:1;
  color:var(--hsmpr-text);cursor:pointer;
  transition:transform .35s var(--hsmpr-ease),background .2s,color .2s;
}


/* Navegación */
.homs-sidemenu-principal__nav{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 12px 16px;scrollbar-width:thin;scrollbar-color:#d4d7dd transparent}
.homs-sidemenu-principal__group{border-radius:14px}
.homs-sidemenu-principal__group[hidden],.homs-sidemenu-principal__list li[hidden]{display:none}
.homs-sidemenu-principal.is-open .homs-sidemenu-principal__group{animation:hsmpr-in .55s var(--hsmpr-ease) both;animation-delay:calc(120ms + var(--i,0) * 45ms)}
@keyframes hsmpr-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

.homs-sidemenu-principal__section{
  width:100%;display:flex;align-items:center;gap:12px;padding:8px 5px;margin:0;
  border:0;border-radius:12px;background:none;color:inherit;
  font-family:inherit;font-weight:600;font-size:15px;line-height:1.25;text-align:left;cursor:pointer;
  min-height:0;text-transform:none;letter-spacing:normal;box-shadow:none;text-decoration:none;
  transition:background .2s;
}
.homs-sidemenu-principal__section:focus-visible,.homs-sidemenu-principal__list a:focus-visible,.homs-sidemenu-principal__close:focus-visible{outline:2px solid var(--hsmpr-orange);outline-offset:2px}

.homs-sidemenu-principal__icon{
  flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  background:#ffffff;color:var(--hsmpr-text);transition:background .25s,color .25s,transform .3s var(--hsmpr-ease);
}
.homs-sidemenu-principal__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.homs-sidemenu-principal__section[aria-expanded="true"] .homs-sidemenu-principal__icon{background:var(--hsmpr-orange);color:#fff;transform:scale(1.04)}
.homs-sidemenu-principal__label{flex:1;min-width:0}
.homs-sidemenu-principal__chev{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--hsmpr-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--hsmpr-ease)}
.homs-sidemenu-principal__section[aria-expanded="true"] .homs-sidemenu-principal__chev{transform:rotate(180deg);stroke:var(--hsmpr-orange)}

/* Acordeón: anima la altura sin medir con JS */
.homs-sidemenu-principal__content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--hsmpr-ease)}
.homs-sidemenu-principal__section[aria-expanded="true"] + .homs-sidemenu-principal__content{grid-template-rows:1fr}
.homs-sidemenu-principal__list{min-height:0;overflow:hidden;list-style:none;margin:0 0 0 31px;padding:0;border-left:2px solid var(--hsmpr-line)}
.homs-sidemenu-principal__list li{margin:0;padding:0;list-style:none}
.homs-sidemenu-principal__list li:first-child{margin-top:4px}
.homs-sidemenu-principal__list li:last-child{margin-bottom:8px}
.homs-sidemenu-principal__list a{
  display:flex;align-items:center;min-height:24px;padding:5px 12px 5px 20px;margin-left:-2px;border-left:2px solid transparent;border-radius:0 10px 10px 0;
  color:var(--hsmpr-text);font-size:15px;line-height:1.3;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s,padding .25s var(--hsmpr-ease);
}
.homs-sidemenu-principal__list li:first-child a{font-weight:700;color:var(--hsmpr-orange)}



/* Hover solo en ratón; en táctil se usa :active */
@media (hover:hover){
  .homs-sidemenu-principal__close:hover{color:#999;}
  .homs-sidemenu-principal__section:hover{background:var(--hsmpr-hover)}
  .homs-sidemenu-principal__list a:hover{background:rgba(255, 255, 255, 0.6);color:var(--hsmpr-orange-text);border-left-color:var(--hsmpr-orange);padding-left:24px}
}
.homs-sidemenu-principal__section:active{background:var(--hsmpr-hover)}
.homs-sidemenu-principal__list a:active{background:var(--hsmpr-orange-soft);color:var(--hsmpr-orange-text)}

/* Sin soporte de backdrop-filter: panel opaco y fondo oscurecido para que se lea */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .homs-sidemenu-principal{background:#fff}
}

@media (prefers-reduced-motion:reduce){
  .homs-sidemenu-principal,.homs-sidemenu-principal__overlay,.homs-sidemenu-principal__content,.homs-sidemenu-principal__chev,.homs-sidemenu-principal__icon,.homs-sidemenu-principal__list a{transition-duration:.01ms!important}
  .homs-sidemenu-principal.is-open .homs-sidemenu-principal__group{animation:none}
}

/* ===== Propio del menú principal ===== */

/* Fila de primer nivel que es un enlace directo (sin submenú) */
.homs-sidemenu-principal .homs-sidemenu-principal__section--link,
.homs-sidemenu-principal .homs-sidemenu-principal__section--link:hover,
.homs-sidemenu-principal .homs-sidemenu-principal__section--link:focus {
  color: var(--hsmpr-text);
  text-decoration: none;
}

/* Grupo cuyo padre no tiene URL (p. ej. "Sectores" con #): no hay "Ver todos",
   así que el primer enlace no va en naranja */
.homs-sidemenu-principal .homs-sidemenu-principal__group--sin-ver-todos .homs-sidemenu-principal__list li:first-child a {
  font-weight: inherit;
  color: var(--hsmpr-text);
}

/* Página actual (y su rama) */
.homs-sidemenu-principal__group.is-current > .homs-sidemenu-principal__section .homs-sidemenu-principal__icon {
  background: var(--hsmpr-orange);
  color: #fff;
}
.homs-sidemenu-principal__group.is-current > .homs-sidemenu-principal__section .homs-sidemenu-principal__label {
  font-weight: 700;
}
.homs-sidemenu-principal .homs-sidemenu-principal__list li.is-current > a {
  color: var(--hsmpr-orange-text);
  font-weight: 700;
  border-left-color: var(--hsmpr-orange);
}

/* ===== Botón negro (clase btn_menu en el ítem del menú) ===== */
.homs-sidemenu-principal__group--boton { padding: 14px 12px 6px; }
.homs-sidemenu-principal .homs-sidemenu-principal__boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 40px; border-radius: 999px;
  background: #000; color: #fff;
  font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: background .2s, transform .25s var(--hsmpr-ease);
}
@media (hover: hover) {
  .homs-sidemenu-principal .homs-sidemenu-principal__boton:hover { background: #222; color: #fff; transform: translateY(-1px); }
}
.homs-sidemenu-principal .homs-sidemenu-principal__boton:active { transform: scale(.98); }

/* ===== Contextos (la clase la pone el PHP con homs_get_context / is_formacion_context) =====
   El fondo va al 80 % para que se vea el blur del panel: cambia "/ .8" para ajustarlo. */


/* Energía y eventos: fondo de color, texto y acentos en blanco */

.homs-sidemenu-principal.homs-sidemenu-principal--energia { --hsmpr-ctx: 255 80 0; }  /* #ff5000 */
.homs-sidemenu-principal.homs-sidemenu-principal--eventos { --hsmpr-ctx: 0 128 222; } /* rgb(0,128,222) */
/**** 2026 NICO 11/2026 - Rehabilitación ***************/
.homs-sidemenu-principal.homs-sidemenu-principal--rehabilitacion { --hsmpr-ctx: 175 175 175; } /* #afafaf */
/**** FIN 2026 NICO ***************/
.homs-sidemenu-principal.homs-sidemenu-principal--energia,
.homs-sidemenu-principal.homs-sidemenu-principal--eventos,
.homs-sidemenu-principal.homs-sidemenu-principal--rehabilitacion {

  --hsmpr-text: #fff;
  --hsmpr-muted: rgba(255, 255, 255, .8);
  --hsmpr-line: rgba(255, 255, 255, .35);
  --hsmpr-hover: rgba(255, 255, 255, .14);
  --hsmpr-orange: #fff;
  --hsmpr-orange-text: #fff;
  --hsmpr-orange-soft: rgba(255, 255, 255, .18);
  background: rgb(var(--hsmpr-ctx) / .85);
}

.homs-sidemenu-principal--energia .homs-sidemenu-principal__icon,
.homs-sidemenu-principal--eventos .homs-sidemenu-principal__icon,
.homs-sidemenu-principal--rehabilitacion .homs-sidemenu-principal__icon,
.homs-sidemenu-principal--formacion .homs-sidemenu-principal__icon {
  background: #ffffff38; /* muy sutil */
}
/* Grupo abierto o página actual: colores del contexto invertidos (caja blanca, icono del color del contexto) */
.homs-sidemenu-principal--energia .homs-sidemenu-principal__section[aria-expanded="true"] .homs-sidemenu-principal__icon,
.homs-sidemenu-principal--energia .homs-sidemenu-principal__group.is-current > .homs-sidemenu-principal__section .homs-sidemenu-principal__icon,



.homs-sidemenu-principal--eventos .homs-sidemenu-principal__section[aria-expanded="true"] .homs-sidemenu-principal__icon,
.homs-sidemenu-principal--eventos .homs-sidemenu-principal__group.is-current > .homs-sidemenu-principal__section .homs-sidemenu-principal__icon,
.homs-sidemenu-principal--rehabilitacion .homs-sidemenu-principal__section[aria-expanded="true"] .homs-sidemenu-principal__icon,
.homs-sidemenu-principal--rehabilitacion .homs-sidemenu-principal__group.is-current > .homs-sidemenu-principal__section .homs-sidemenu-principal__icon {
  background: #fff;
  color: rgb(var(--hsmpr-ctx));
}
@media (hover: hover) {
  .homs-sidemenu-principal--energia .homs-sidemenu-principal__list a:hover,
  .homs-sidemenu-principal--eventos .homs-sidemenu-principal__list a:hover,
  .homs-sidemenu-principal--rehabilitacion .homs-sidemenu-principal__list a:hover { background: var(--hsmpr-hover); }
  .homs-sidemenu-principal--energia .homs-sidemenu-principal__close:hover,
  .homs-sidemenu-principal--eventos .homs-sidemenu-principal__close:hover,
  .homs-sidemenu-principal--rehabilitacion .homs-sidemenu-principal__close:hover { color: rgba(255, 255, 255, .7); }
}


/* Formación: fondo amarillo; el texto sigue oscuro (blanco sobre amarillo no se lee) */
.homs-sidemenu-principal.homs-sidemenu-principal--formacion {
  --hsmpr-hover: #e9dd8b99;
  background: rgb(234 216 105 / .8);
}
.homs-sidemenu-principal--formacion .homs-sidemenu-principal__section[aria-expanded="true"] .homs-sidemenu-principal__icon,
.homs-sidemenu-principal--formacion .homs-sidemenu-principal__group.is-current > .homs-sidemenu-principal__section .homs-sidemenu-principal__icon {
  background: var(--hsmpr-text); /* invertido: caja del color del texto, icono del color del contexto */
  color: rgb(234, 216, 105);
}
/* Formación: línea del submenú negra y fina */
.homs-sidemenu-principal--formacion .homs-sidemenu-principal__list {
  border-left: 1px solid #000;
}
.homs-sidemenu-principal--formacion .homs-sidemenu-principal__list a {
  margin-left: -1px; /* el indicador del hover arranca sobre la línea de 1px */
}

/* Sin soporte de backdrop-filter: fondos de contexto sólidos */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .homs-sidemenu-principal.homs-sidemenu-principal--energia,
  .homs-sidemenu-principal.homs-sidemenu-principal--eventos,
  .homs-sidemenu-principal.homs-sidemenu-principal--rehabilitacion { background: rgb(var(--hsmpr-ctx)); }
  .homs-sidemenu-principal.homs-sidemenu-principal--formacion { background: rgb(234, 216, 105); }
}


/**** 2026 NICO 11/2026 - Grupo siempre abierto: sin flecha y sin cursor de clic ***************/
.homs-sidemenu-principal__group--abierto > .homs-sidemenu-principal__section {
  cursor: default;
}
.homs-sidemenu-principal__group--abierto .homs-sidemenu-principal__chev {
  display: none;
}
/**** FIN 2026 NICO ***************/


/**** 2026 NICO 11/2026 - Iconos de imagen (H de Homs Rentals): blanca sobre naranja siempre ***************/
.homs-sidemenu-principal .homs-sidemenu-principal__icon img {
  display: block;
  width: 20px;
  height: 20px;
  max-width: none;
  object-fit: contain;
}
.homs-sidemenu-principal .homs-sidemenu-principal__icon--h {
  background: #fe5000;
}
/**** FIN 2026 NICO ***************/