/*==========================================
SELECTOR DE MODULOS (barra superior) Y ENCABEZADO DEL MODULO EN LA BARRA LATERAL
Usa las variables del tema (claro / oscuro) de medsys-tema.css
=============================================*/

.ms-modulos .ms-modulos-toggle{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}

.ms-modulos .ms-modulo-actual{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--ms-module-bg, #cce0f4);
  border: 1px solid var(--ms-module-border, #9cc0e6);
  color: var(--ms-accent-fg, #174a78);
  font-size: .85rem;
  white-space: nowrap;
}

.ms-modulos .ms-modulos-panel{
  width: 340px !important;
  min-width: 0;
  max-width: calc(100vw - 16px);
  padding: .75rem;
  background: var(--ms-card, #fff);
  border: 1px solid var(--ms-border, #e3e6eb);
  box-shadow: var(--ms-shadow-lg, 0 20px 50px -12px rgba(16,24,40,.28));
  border-radius: 12px;
}

.ms-modulos-titulo{
  margin: 0 .25rem .5rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ms-muted-fg, #667085);
}

.ms-modulos-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

.ms-modulo-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .7rem .3rem;
  border-radius: 10px;
  border: 1px solid transparent;
  text-align: center;
  color: var(--ms-fg, #1a1d23);
  line-height: 1.15;
  text-decoration: none;
}

.ms-modulo-tile:hover{
  background: var(--ms-hover, rgba(29,111,184,.05));
  border-color: var(--ms-border, #e3e6eb);
  color: var(--ms-fg, #1a1d23);
  text-decoration: none;
}

.ms-modulo-tile.activo{
  background: var(--ms-accent, #e8f1fb);
  border-color: var(--ms-module-border, #9cc0e6);
  color: var(--ms-accent-fg, #174a78);
}

.ms-modulo-icono{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: var(--ms-muted, #f1f3f6);
  color: var(--ms-primary, #1d6fb8);
  font-size: 1.15rem;
}

.ms-modulo-tile.activo .ms-modulo-icono{
  background: var(--ms-primary, #1d6fb8);
  color: var(--ms-primary-fg, #fff);
}

.ms-modulo-nombre{
  font-size: .78rem;
  font-weight: 600;
  word-break: break-word;
}

/* Encabezado del modulo en la barra lateral */
.nav-sidebar .ms-sidebar-modulo{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .8rem .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ms-muted-fg, #667085);
}

/* Boton del selector: texto "Modulos" y flecha para que se vea que se despliega */
.ms-modulos .ms-modulo-flecha{
  font-size: .65rem;
  opacity: .7;
}

.ms-modulos.show .ms-modulo-flecha{
  transform: rotate(180deg);
}

/* El encabezado del modulo en la barra lateral abre el selector */
.nav-sidebar .ms-sidebar-modulo-cambiar{
  cursor: pointer;
  border-radius: 8px;
  margin: 0 .4rem;
  padding-left: .4rem;
}

.nav-sidebar .ms-sidebar-modulo-cambiar:hover,
.nav-sidebar .ms-sidebar-modulo-cambiar:focus-visible{
  background: var(--ms-hover, rgba(29,111,184,.08));
  color: var(--ms-accent-fg, #174a78);
  outline: none;
}

.nav-sidebar .ms-sidebar-modulo-cambiar-icono{
  margin-left: auto;
  font-size: .7rem;
  opacity: .6;
}

@media (max-width: 575.98px){
  .ms-modulos .ms-modulos-texto{ display: none; }
  .ms-modulos .ms-modulo-actual{ display: none; }
  .ms-modulos .ms-modulos-panel{ position: fixed !important; left: 8px !important; right: 8px; top: 56px !important; width: auto !important; transform: none !important; }
}