/* ══════════════════════════════════════════════════════════════════
   MyGest — menú lateral
   Panel de navegación vertical en azul corporativo, con logo,
   perfil del usuario, accesos rápidos y menú de iconos.
   Mantiene su color en ambos temas; en oscuro se apaga un poco.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --gx-lat-ancho: 264px;
  --gx-lat-fondo: #1717a8;
  --gx-lat-fondo-pie: #12128f;
  --gx-lat-texto: rgba(255, 255, 255, .88);
  --gx-lat-hover: rgba(255, 255, 255, .10);
  --gx-lat-activo: rgba(255, 255, 255, .17);
  --gx-lat-separador: rgba(255, 255, 255, .14);
}

[data-bs-theme="dark"] {
  --gx-lat-fondo: #0e0e56;
  --gx-lat-fondo-pie: #0a0a3f;
  --gx-lat-texto: rgba(255, 255, 255, .82);
}

/* ── Estructura ───────────────────────────────────────────────────── */
.gx-lateral {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--gx-lat-ancho);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--gx-lat-texto);
  background: linear-gradient(180deg, var(--gx-lat-fondo) 0%, var(--gx-lat-fondo-pie) 100%);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.gx-lateral::-webkit-scrollbar { width: 6px; }
.gx-lateral::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .25); border-radius: 3px;
}

body.gx-con-lateral > main,
body.gx-con-lateral > footer { margin-left: var(--gx-lat-ancho); }

/* ── Logo ─────────────────────────────────────────────────────────── */
.gx-logo {
  width: 56px; height: 56px;
  margin: 1.1rem auto .3rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  display: grid; place-items: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem; letter-spacing: .06em;
  color: #fff; text-decoration: none;
}
.gx-logo:hover { border-color: #fff; color: #fff; }

/* ── Perfil ───────────────────────────────────────────────────────── */
.gx-avatar {
  width: 62px; height: 62px;
  margin: .85rem auto .45rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b6cff, #9b5bff);
  border: 3px solid rgba(255, 255, 255, .22);
  display: grid; place-items: center;
  font-size: 1.3rem; font-weight: 600; color: #fff;
}
.gx-perfil-nombre {
  text-align: center; font-weight: 600; font-size: .88rem;
  color: #fff; padding: 0 .75rem; line-height: 1.25;
}
.gx-perfil-saludo {
  text-align: center; font-size: .74rem; font-weight: 500;
  color: rgba(255, 255, 255, .62); margin-top: .1rem;
}

/* ── Accesos rápidos ──────────────────────────────────────────────── */
.gx-acciones {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .4rem; padding: .75rem .5rem .5rem;
}
.gx-accion {
  width: 30px; height: 30px; border-radius: .5rem;
  background: rgba(255, 255, 255, .13);
  color: #fff; border: 0;
  display: grid; place-items: center;
  font-size: .8rem; text-decoration: none;
}
.gx-accion:hover { background: rgba(255, 255, 255, .26); color: #fff; }

/* ── Chips de estado ──────────────────────────────────────────────── */
.gx-estado {
  display: flex; justify-content: center; align-items: center;
  gap: .4rem; padding: 0 .5rem .85rem;
}
.gx-punto-verde {
  width: .6rem; height: .6rem; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25);
}
.gx-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(255, 255, 255, .15);
  border-radius: .4rem; padding: .1rem .42rem;
  font-size: .72rem; color: #fff; text-decoration: none;
}
.gx-chip:hover { background: rgba(255, 255, 255, .28); color: #fff; }

/* ── Menú ─────────────────────────────────────────────────────────── */
.gx-menu {
  border-top: 1px solid var(--gx-lat-separador);
  padding: .5rem 0 1rem;
  flex: 1 0 auto;
}
.gx-item {
  display: flex; align-items: center; gap: .7rem;
  width: calc(100% - 1.1rem);
  margin: .12rem .55rem;
  padding: .52rem .7rem;
  border: 0; border-radius: .5rem;
  background: none; text-align: left;
  color: var(--gx-lat-texto); text-decoration: none;
  font-size: .89rem; line-height: 1.3;
}
.gx-item:hover { background: var(--gx-lat-hover); color: #fff; }
.gx-item.activo { background: var(--gx-lat-activo); color: #fff; font-weight: 600; }
.gx-item:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: -2px; }

.gx-icono {
  width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: .45rem;
  background: var(--c, #4b5563);
  display: grid; place-items: center;
  color: #fff; font-size: .8rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.gx-chevron {
  margin-left: auto; font-size: .7rem; opacity: .65;
  transition: transform .15s ease-in-out;
}
.gx-item[aria-expanded="true"] .gx-chevron { transform: rotate(90deg); }

/* Submenú */
.gx-submenu .gx-item {
  font-size: .85rem;
  padding-left: 2.9rem;
  color: rgba(255, 255, 255, .74);
}
.gx-submenu .gx-item.activo { color: #fff; }

/* ── Barra superior en móvil ──────────────────────────────────────── */
.gx-barra-movil { display: none; }

@media (max-width: 991.98px) {
  .gx-lateral {
    transform: translateX(-100%);
    transition: transform .2s ease-in-out;
    box-shadow: 0 0 40px rgba(0, 0, 0, .45);
  }
  .gx-lateral.abierto { transform: none; }

  body.gx-con-lateral > main,
  body.gx-con-lateral > footer { margin-left: 0; }

  .gx-barra-movil {
    display: flex; align-items: center; gap: .6rem;
    position: sticky; top: 0; z-index: 1030;
    padding: .5rem .75rem;
    background: linear-gradient(180deg, var(--gx-lat-fondo), var(--gx-lat-fondo-pie));
    color: #fff;
  }
  .gx-barra-movil .gx-titulo-movil {
    font-weight: 600; letter-spacing: .02em;
  }
  .gx-velo {
    position: fixed; inset: 0; z-index: 1035;
    background: rgba(0, 0, 0, .45);
  }
}

/* ── Impresión ────────────────────────────────────────────────────── */
@media print {
  .gx-lateral, .gx-barra-movil, .gx-velo { display: none !important; }
  body.gx-con-lateral > main,
  body.gx-con-lateral > footer { margin-left: 0 !important; }
}

/* ── Pie del lateral: selector de tema ────────────────────────────── */
.gx-lateral-pie {
  margin-top: auto;
  border-top: 1px solid var(--gx-lat-separador);
  padding: .8rem .8rem 1rem;
}
.gx-lateral-pie .gx-etiqueta {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255, 255, 255, .55); margin-bottom: .35rem;
}
.gx-tema-lineal .btn {
  --bs-btn-border-color: rgba(255, 255, 255, .32);
  --bs-btn-hover-bg: rgba(255, 255, 255, .2);
  --bs-btn-hover-border-color: rgba(255, 255, 255, .5);
}
.gx-tema-lineal .gx-tema-opcion.activa {
  background-color: #fff;
  border-color: #fff;
  color: var(--gx-lat-fondo-pie);
}