/* navegacion.css — estilos del menú en dos niveles (js/navegacion.js).
   Hoja aparte y cargada la ÚLTIMA en index.html: doctrix-redesign.css se carga
   después de style.css y fija `--sidebar-w` y `.sidebar` sin media, así que
   cualquier regla puesta en style.css perdía. Aquí además se usa `html:root`,
   que gana a `:root` por especificidad aunque el orden cambie. */
/* ═══════════════════════════════════════════════════════════════════════════════
   MENÚ EN DOS NIVELES (js/navegacion.js): riel de áreas + panel de pantallas
   ═══════════════════════════════════════════════════════════════════════════════
   Los .nav-item conservan su estilo; aquí solo se define el riel, el panel y
   cómo se reparten según el ancho. Dos modos:
     riel + desplegable (≥768px, tableta Y escritorio)
       El riel de iconos queda fijo en 84px; pulsar un área abre el panel de
       pantallas como flotante. Hasta hace poco esto solo pasaba en tableta:
       en escritorio el panel vivía siempre abierto al lado del riel, 250 a
       320px fijos de ancho, aunque casi ninguna área tuviera más de cinco
       líneas que mostrar ahí (en "Créditos" eran dos). Ese ancho se le
       devuelve al contenido.
     teléfono (cajón)
       riel horizontal arriba, panel debajo, siempre visibles juntos —no
       hace falta desplegable porque el cajón entero ya es lo que se abre.
*/
.nav-fuera { display: none !important; }
.sidebar-dos-niveles .nav-group { display: none !important; }

/* La barra lateral es azul marino en los dos temas (--dx-sidebar), así que los
   colores de aquí son claros sobre oscuro y NO usan --text-main/--text-muted,
   que son los del contenido (texto casi negro) y quedaban ilegibles encima. */
.nav-dos-niveles {
  display: flex;
  align-items: stretch;
  gap: .75rem;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

.nav-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
  padding-right: .7rem;
  border-right: 1px solid rgba(255,255,255,.10);
}
/* Icono y nombre. Lo que se pinta debajo es `corto` (ver AREAS en
   js/navegacion.js), no el título completo: en un riel angosto "Créditos
   académicos" o "Gestión Escolar" solo caben cortados, y un menú con las
   etiquetas a medias no se puede leer. Con nombres pensados para este ancho
   —"Créditos", "Gestión", "Centro"— entran enteros. El título completo sigue
   encabezando el panel de al lado, y está en el tooltip y el aria-label. */
.nav-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 64px;
  min-height: 56px;
  padding: 7px 3px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: #cddcef;
  font: inherit;
  font-size: .66rem;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background .15s ease, color .15s ease;
}
.nav-area svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-area:hover { background: rgba(255,255,255,.075); color: #fff; }
.nav-area.active {
  background: color-mix(in srgb, var(--primary) 78%, #0b2447 22%);
  color: #fff;
}
.nav-area-nombre {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Puntito: algún ítem del área lleva un distintivo con número. */
.nav-area-punto {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger-solid, #ef4444);
  box-shadow: 0 0 0 2px var(--bg-sidebar);
}

.nav-panel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.nav-panel-cabeza {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 .2rem .55rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav-panel-cabeza strong { font-size: .95rem; font-weight: 600; color: #fff; }

/* Nombre y rol dentro del menú de cuenta: solo hace falta con el riel
   compacto, que le quita esos datos al botón que abre el menú (más abajo,
   "Pie de la barra: riel compacto"). En el cajón del teléfono el botón ya
   los muestra y esto duplicaría la información. Base: oculto. */
.cuenta-menu-quien { display: none; }
/* Estado comercial del módulo: saldo de créditos, vigencia, "Solicitar". */
.nav-modulo-estado {
  align-self: flex-start;
  margin-top: .5rem;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: .72rem;
  font-weight: 500;
  cursor: default;
}
/* Tonos claros: el pill vive sobre el azul marino de la barra, no sobre el
   fondo del contenido, así que los colores sólidos de estado no contrastan. */
.nav-modulo-estado[data-tono="ok"]    { background: rgba(80,201,164,.16); color: #7fdcc0; }
.nav-modulo-estado[data-tono="aviso"] { background: rgba(244,179,95,.16);  color: #f4b35f; }
.nav-modulo-estado.es-enlace { cursor: pointer; }
.nav-modulo-estado.es-enlace:hover { border-color: currentColor; }
/* La lista se desplaza dentro del panel. Sin esto, en cuanto un área tiene más
   pantallas de las que caben —o la ventana es baja— los últimos ítems se salían
   por debajo y quedaban pisados por el pie de la barra: "Constructor de
   Horarios" aparecía impreso encima del nombre del usuario. El desbordamiento
   estaba desde antes; se veía menos porque las tarjetas del pie tenían fondo
   propio y lo tapaban. */
.nav-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.nav-items::-webkit-scrollbar { width: 6px; }
.nav-items::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }

/* Dentro del desplegable de cuenta los botones son filas con texto, siempre.
   Varias reglas de barra estrecha (tableta, escritorio angosto, iPad vertical)
   los convierten en cuadrados de solo icono y esconden su <span>; eso valía
   cuando vivían sueltos en un pie de 70 px, pero aquí el desplegable mide 250
   y el icono suelto no dice nada. Esta hoja carga la última, así que gana. */
.sidebar .cuenta-menu .btn-logout {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  border-radius: 8px !important;
  font-size: .82rem !important;
}
.sidebar .cuenta-menu .btn-logout span { display: inline !important; }
.sidebar .cuenta-menu .btn-logout:hover::after { content: none !important; }

/* ── Riel + desplegable: tableta Y escritorio, un solo bloque ──────────────
   Antes esto se partía en dos: un bloque de escritorio (≥1024px) que fijaba
   el sidebar en 320/340px con el panel siempre abierto al lado, y un bloque
   de tableta que lo dejaba en 84px con el panel flotante. La tableta ya tenía
   razón: con solo cinco áreas y como mucho cinco pantallas por área, un panel
   siempre abierto no gana nada por tener más espacio — solo dejaba una
   columna casi vacía la mayor parte del tiempo (ver la cabecera del archivo).
   Ahora el mismo comportamiento vale desde 768px para arriba, y el único
   corte que queda es el del teléfono, que es un layout distinto de verdad
   (cajón apilado, no riel + flotante). */
@media (min-width: 768px) {
  html:root { --sidebar-w: 84px; }
  .sidebar.sidebar-dos-niveles { width: 84px; overflow: visible; }
  /* El nombre del centro ("DOCTRIX · Guardería Infantil") está pensado para
     una barra ancha; en 84px no cabe y, con `overflow: visible` en el propio
     sidebar (arriba, necesario para que el panel flotante no se recorte), ese
     texto largo salía del sidebar y quedaba flotando encima del título de la
     topbar — el "Mi Centro / Configura los datos…" que se veía superpuesto
     con "DOCTRIX / Guardería Infantil". Esto ya se resolvía para tableta
     (style.css, 768-1023px) ocultando el texto y centrando el icono; con el
     riel compacto ahora también en escritorio, hacía falta aquí para todo
     ancho ≥768px. */
  .sidebar-brand { justify-content: center; }
  .sidebar-brand .brand-icon { margin: 0; }
  .sidebar-brand .brand-text { display: none; }
  .nav-dos-niveles { margin: 0; }
  .nav-rail { border-right: 0; padding-right: 0; width: 100%; align-items: center; }
  .nav-panel {
    display: none;
    position: fixed;
    left: var(--sidebar-w);
    top: 0;
    bottom: 0;
    width: 280px;
    padding: 1.2rem .9rem;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-glass);
    box-shadow: var(--shadow-xl);
    z-index: 190;
    overflow-y: auto;
  }
  .nav-panel.abierto { display: flex; }
  /* La barra mide 84 px aquí y además desplaza (overflow-y), así que un
     desplegable absoluto quedaría recortado. Se ancla fijo a su derecha, igual
     que el panel de pantallas. */
  .sidebar .cuenta-menu {
    position: fixed;
    left: calc(var(--sidebar-w) + 8px);
    right: auto;
    bottom: 14px;
    width: 250px;
    z-index: 195;
  }
  /* Dentro del panel los ítems recuperan su texto: las reglas de la barra de
     iconos los dejaban en font-size:0 y con el span oculto. */
  .sidebar .nav-panel .nav-item { font-size: .9rem; justify-content: flex-start; gap: 10px; padding: 10px 14px; }
  .sidebar .nav-panel .nav-item span { display: inline; }
  .sidebar .nav-panel .nav-item .nav-icon { width: 20px; height: 20px; }
  .sidebar .nav-panel .nav-badge { display: inline-block; }

  /* ── Pie de la barra: riel compacto ──────────────────────────────────────
     El botón de cuenta (avatar + nombre + rol + flecha) está pensado para una
     barra de 270-340px; en 84px el nombre y el rol no caben y se envuelven
     contra la flecha. Antes esto solo se corregía para iPad en vertical
     (style.css, 1024-1366 portrait); con el riel de 84px ahora también en
     escritorio, hacía falta aquí, para todo ancho ≥768px. Se deja solo el
     avatar, centrado, y el nombre reaparece —una sola vez, no dos— dentro del
     menú desplegable (`.cuenta-menu-quien`, arriba), que es a donde ese botón
     lleva. */
  .sidebar .user-card { justify-content: center; padding: 7px 0; }
  .sidebar .user-info-text,
  .sidebar .cuenta-chevron { display: none !important; }
  .cuenta-menu-quien {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .cuenta-menu-quien strong { color: #fff; font-size: .88rem; font-weight: 600; }
  .cuenta-menu-quien span { color: #a7bcd8; font-size: .74rem; }
}

/* ── Teléfono (cajón): riel horizontal arriba, panel debajo ────────────────
   doctrix-redesign.css deja el sidebar en 84px cuando el puntero es táctil y la
   pantalla está en vertical (pensado para tableta), y eso alcanza al teléfono:
   el cajón abierto tiene que medir lo de siempre para que quepan riel y panel. */
@media (max-width: 767px) {
  /* !important porque esa regla de doctrix-redesign.css también lo lleva. */
  .sidebar.sidebar-dos-niveles { width: 290px !important; padding: 1.2rem 1rem; }
  .nav-dos-niveles { flex-direction: column; gap: .8rem; margin: 0; }
  .nav-rail {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-right: 0;
    padding: 0 0 .6rem;
    border-bottom: 1px solid var(--border-glass);
    scrollbar-width: none;
  }
  .nav-rail::-webkit-scrollbar { display: none; }
  .nav-area { flex: 0 0 auto; }
}

/* `.nav-area` se declara con `display: flex`, y eso gana a la regla del
   navegador para `[hidden]` —que es `display: none` sin más—. Así que un
   `area.hidden = true` desde JS no escondía nada: con el plan vencido el riel
   seguía enseñando las cinco áreas aunque cuatro estuvieran vacías. Es el
   mismo tropiezo que ya hubo con `.btn[hidden]`. */
.nav-area[hidden] { display: none !important; }