/*
*{
  outline: 1px solid yellow;
}
*/

/***********************************************************  */

/* SIDEBAR / MENU LATERAL */

/* Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: auto;
  min-height: 100vh;
  width: 220px;
  background-color: #154734;
  color: #f6fffe;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  font-family: Comfortaa, Verdana !important;
}

/* icono arrow de la barra lateral */
.ph-caret-down {
  font-size: 24px;
  right: 0.7rem;
  display: flex;
  position: absolute;
  margin-left: auto; /* Empuja el icono a la derecha */
  transition: transform 0.3s ease;
}

.nav-links {
  list-style: none;
  width: 100%;
  padding: 10px;
  margin: 0;
  gap: 12px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between; /* empuja el sticker a la derecha */
  padding: 10px;
  border-radius: 0 8px 8px 0;
  margin: -8px 0 16px;
  left: -10px;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  overflow: hidden;
}

/* Contenido principal del ítem (icono + texto) */
.nav-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mantener el estilo visual */
.nav-item:hover {
  background-color: #007848;
  color: #f6fffe;
}

/* Para items con submenú: el trigger ocupa todo */
.nav-item.has-submenu .nav-trigger {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  padding: 3px 12px; /* top right bottom left */
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  /* background-color: red; pruebas */
}

/* Para items SIN submenú, mantiene el estilo original */
.nav-item:not(.has-submenu) {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  padding: 10px;
}

/* --- HOVER --- */
.nav-item:hover {
  background-color: #007848;
  color: #f6fffe;
}

/* --- ACTIVE ITEM --- */
.nav-item.active,
.nav-trigger.active {
  background-color: #f6fffe;
  color: #007848;
  font-weight: bold;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding-left: 20px;
}

/* Línea naranja solo cuando tenga la clase highlight */
.nav-item.highlight::before {
  content: "";
  position: absolute;
  width: 6px;
  left: 5px; /* LINEA MENU */
  bottom: 50%;
  transform: translateY(50%);
  height: 100%;
  background-color: orange;
  border-radius: 4px;
}

/* Línea naranja animada para submenús */
.submenu li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 20px;
  background-color: #ffd65a;
  border-radius: 4px;
  opacity: 0;
  transition: all 0.4s ease;
}

/* Cuando está activo: animamos a cuadro a la derecha  en los subtemas */
.submenu li.highlight::before {
  left: -10px;
  right: 10px;
  width: 120%;
  height: 26px;
  border-radius: 6px 0 0 6px; /* top-right-bottom-left */
  opacity: 1;
  z-index: -1; /* detras del texto submenu */
  transform: translateY(-50%);
}

/* Línea naranja específicamente para los que tienen submenús */
.nav-item.has-submenu.highlight::before,
.nav-item.active::before {
  top: 32% !important;
  transform: translateX(50%);
}

/* --- SUBMENÚ --- */
.has-submenu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Submenús ocultos por defecto */
.submenu {
  display: none;
  flex-direction: column;
  width: 100%;
  padding-left: 30px;
  margin-top: 2px;

  /* background: fuchsia;pruebas */
}

.submenu li {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 10px;
  margin: 5px 0; /* top right bottom left */
  padding-left: 10px;
  z-index: 1;
  padding: 10px 0; /* top right bottom left */

  /* background-color: purple;pruebas */
}

/* Open menu */

/* Rotación cuando el submenú está abierto */
.has-submenu.open-submenu .ph-caret-down {
  transform: rotate(180deg);
}

.has-submenu.open-submenu .submenu {
  display: flex;
}

/* --- Span --- */
.nav-item span,
.has-submenu span,
.submenu span {
  font-size: 1rem;
}

/* CERRAR SESIÓN */
.cerrar-sesion {
  margin-top: auto;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: #f6fffe;
  transition: background-color 0.3s ease;
}

.cerrar-sesion:hover {
  background-color: #007848;
  border-radius: 8px;
}

/* ----------------------------------------------------------------------------------------------------------------------- */

/* STICKERS PRO */
.sticker-pro {
  position: relative;
  flex-shrink: 0;
  margin-left: 10px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.7rem;
  font-family: Comfortaa;
  color: #f6fffe;
  letter-spacing: 0.5px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="%23007848"/><stop offset="45%" stop-color="%23E99A3C"/> <stop offset="100%" stop-color="%23FFE24F"/> </linearGradient> </defs> <path  d="m401.1 869-150.7 63.3-20.5-162.1-162.2-20.6L131 598.9.8 500 131 401.1 67.7 250.4l162.2-20.5 20.5-162.2L401.1 131 500 .8 598.9 131l150.7-63.3 20.6 162.2 162.1 20.5L869 401.1 999.2 500 869 598.9l63.3 150.7-162.1 20.6-20.6 162.1L598.9 869 500 999.2 401.1 869z" fill="url(%23grad1)"  stroke="%23103426" stroke-width="30" stroke-linejoin="round"/> </svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.25s ease;
}

/* Brillo dorado-gloss más centrado y continuo */
.sticker-pro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    rgb(255 255 180 / 60%) 20%,
    /* brillo central */ rgb(21 71 52 / 0%) 60%
      /* borde se mezcla con el fondo */
  );
  filter: blur(3px);
  pointer-events: none;
  z-index: 2;
  animation: shinePulse 2s ease-in-out infinite;
}

@keyframes shinePulse {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Hover sutil */
.nav-item:hover .sticker-pro {
  transform: scale(1.08) rotate(-15deg);
}