/* ==========================================================================
   LeadSync - Rail de navegacion
   La columna de iconos de la izquierda, su estado fijado y su pie (item 129).

   OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y
   ese orden ES la cascada. Mover un enlace de sitio cambia que regla gana entre dos
   de la misma especificidad. Si anades uno nuevo, ponlo donde le toque, no al final.
   ========================================================================== */

/* ==========================================================================
   Rail de navegación (item 129, fase 1)
   ========================================================================== */

/* El HUECO del rail no se mueve nunca: .nav-rail reserva el ancho compacto en el flujo y
   lo que crece al desplegar es .rail-inner, que flota encima. Ese es el punto del item
   129, no un detalle de estilo: si creciera el hueco, abrir el menú empujaría el chat que
   alguien está leyendo. Se probó al revés primero (absolute sobre el propio rail) y la
   bandeja saltaba al borde izquierdo, que es exactamente lo que había que evitar. */
.nav-rail {
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  position: relative;
  z-index: 60;
}
.rail-inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rail-w);
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  overflow: hidden;
  transition: width 170ms ease, box-shadow 170ms ease;
}

/* El ancho DESPLEGADO vive en --rail-open-w (item 129 + petición del 12-08). Es una
   variable y no un 232px repetido porque lo consumen cuatro reglas —el hueco fijado, el
   panel flotante y sus dos versiones de móvil—: con el número escrito a mano, arrastrar
   el divisor movía una y dejaba las otras tres donde estaban. */
.nav-rail.open .rail-inner {
  width: var(--rail-open-w, 232px);
  box-shadow: 4px 0 24px var(--shadow);
}

/* El divisor solo existe con el menú abierto: plegado no hay nada que redimensionar y un
   borde con cursor de arrastre invitaría a un gesto que no hace nada. */
.rail-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 6px;
  margin-right: -3px;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: background-color .12s ease, opacity .12s ease;
  touch-action: none;

  /* igual que .resizer: sin esto el dedo hace scroll y no arrastra */
}

/* El divisor va donde ESTÁ el borde que se arrastra. Plegado el rail mide 56px, pero al
   desplegarse flotando el hueco NO crece (crece .rail-inner encima), así que con `right:0`
   el divisor se quedaba en el borde del hueco —a 56px— mientras el panel llegaba a 232.
   Anclándolo a --rail-open-w cae en el borde real en los dos casos: flotando y fijado. */
.nav-rail.open .rail-resizer,
.nav-rail.pinned .rail-resizer {
  opacity: 1;
  pointer-events: auto;
  left: var(--rail-open-w, 232px);
  right: auto;
}
.rail-resizer:hover,
body.resizing .rail-resizer {
  background: var(--accent);
}

/* El fondo del menú en móvil: DETRÁS del rail y delante de todo lo demás.
   Y por eso NO puede ser hijo de `.nav-rail`: el rail tiene z-index propio, así que crea
   su propio contexto de apilamiento y un hijo con z-index menor sigue pintándose ENCIMA de
   sus hermanos de dentro. El velo acababa oscureciendo el propio menú, que es lo que se
   veía. Es hermano del rail, y ahí sí manda el z-index. */
.rail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, .45);
  animation: backdropIn 160ms ease;
}
/* El [hidden] lo resuelve la regla global de css/base/ajustes.css. */
@keyframes backdropIn {
  from { opacity: 0; }
}

/* En escritorio el rail no tapa nada: se despliega al lado y el trabajo de detrás sigue
   siendo legible. Un velo ahí sería apagar la pantalla para abrir un menú. */
@media (min-width: 721px) {
  .rail-backdrop { display: none !important; }
}

/* MIENTRAS SE ARRASTRA, sin transición. El rail anima su ancho en 170ms para plegarse y
   desplegarse; con esa animación puesta, el borde persigue al cursor con retraso y el
   arrastre se siente pegajoso. La animación sigue estando para lo suyo. */
body.resizing .nav-rail,
body.resizing .rail-inner {
  transition: none;
}

/* Al RESTAURAR con doble clic, los tres paneles vuelven animados. Es solo para ese gesto:
   se pone la clase, se quita la variable y se retira la clase al acabar. Durante el
   arrastre no puede haber transición (el borde iría por detrás del cursor), y por eso no
   se declara en la regla normal de cada panel. */
/* `.debug-panel` y no `.info-panel`: esta regla se quedó con el nombre VIEJO del panel, que
   ya no existe en ningún sitio —ni en el HTML ni en el JS—, así que de los tres divisores el
   del panel era el único que restauraba de golpe. Lo cazó él notando que ese perdía la
   animación. Una clase que no existe no da error: simplemente no aplica, y por eso aguantó
   hasta que alguien miró los tres seguidos. */
body.restaurando .sidebar,
body.restaurando .debug-panel,
body.restaurando .nav-rail,
body.restaurando .rail-inner {
  transition: width 180ms ease, flex-basis 180ms ease;
}

/* SOLO ESTA LISTA SCROLLEA. Con el menú entero desbordando, lo primero que se salía de
   la pantalla eran el tema, la configuración y la cuenta —que están al final— y quedaban
   inalcanzables. Así la marca se queda arriba, el pie abajo, y lo que cede es la lista de
   secciones, que es lo que puede crecer.
   `min-height: 0` es obligatorio: sin él un hijo flexible no encoge por debajo de su
   contenido y el scroll no llega a aparecer nunca. */
.rail-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

/* LOS BOTONES NO SE ENCOGEN: cuando falta alto, la LISTA hace scroll (petición tuya). Un
   flex reparte el hueco que falta entre sus hijos, así que sin `flex-shrink: 0` las filas se
   aplastaban una por una y el scroll no aparecía nunca — se veían diez botones enanos en vez
   de seis normales y un scroll.
   El pie (tema, configuración y tu cuenta) queda FUERA de esa lista a propósito: son las tres
   cosas que tienen que estar siempre a la vista, sin buscarlas bajando. */
.rail-items > * { flex: 0 0 auto; }
.rail-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 8px);
  height: 40px;
  padding: 0 10px;
  margin: 0 8px;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 13.5px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 130ms ease, color 130ms ease;
}
/* --- PLEGADO: TODO BOTÓN ES UN CUADRADO -----------------------------------
   El problema, medido antes de tocar nada: el botón de la lista salía 37,3 x 40 y el del
   pie 47,3 x 40. Ninguno era 1:1 y encima no coincidían entre ellos.

   La causa NO estaba en los botones sino en sus dos contenedores. `width: calc(100% - 8px)`
   depende del ancho del padre, y los padres no miden lo mismo: `.rail-items` reserva
   siempre el hueco del scrollbar (`scrollbar-gutter: stable`) y se queda en 45px de
   contenido, mientras que `.rail-foot` está FUERA de ese scroll y conserva los 55,3px. De
   ahí los 10px de diferencia, y de ahí que al alejar el zoom el botón se saliera del rail
   (48px de ancho + 16 de márgenes no caben en 56).

   Se arregla por los dos lados: plegado no se reserva hueco de scrollbar —en 56px se come
   una cuarta parte del ancho, y desplazar con la rueda sigue funcionando—, y el botón deja
   de medirse en porcentaje para ser un cuadrado fijo. Así no depende ni del padre, ni del
   zoom, ni de que aparezca el scrollbar. */
/* EL BORDE DERECHO, DIBUJADO SIN OCUPAR ANCHO. Plegado, `border-right: 1px` deja la caja
   de contenido en 55px de los 56, así que centrar dentro de ella deja el icono medio pixel
   a la izquierda del centro VISUAL: medido, 7,7px a un lado y 8,3 al otro. Con una sombra
   interior el borde se ve igual y no resta ancho, así que el centrado sale simétrico.
   Va sin `.pinned` porque ahí manda su propia sombra (y el rail está desplegado). */
.nav-rail:not(.open):not(.pinned) .rail-inner {
  border-right: 0;
  box-shadow: inset -1px 0 0 var(--border);
}
/* PLEGADO ES `:not(.open):not(.pinned)`, NUNCA `:not(.open)` A SECAS.
   El rail tiene TRES estados y solo dos clases: plegado (ninguna), flotando (.open) y
   fijado (.pinned). Al fijar, fijar() QUITA .open a propósito —fijado no flota, entra en
   el flujo y corre el contenido—, así que toda regla que colapse mirando solo `:not(.open)`
   se aplica también al rail fijado y lo deja con el ancho de abierto pero sin etiquetas:
   visualmente, fijar CERRABA el menú.
   Lo reportó el usuario dos veces. Seis reglas de aquí abajo lo tenían mal mientras otras
   dos del mismo fichero ya lo hacían bien, que es como pasan estas cosas. */
.nav-rail:not(.open):not(.pinned) .rail-items {
  scrollbar-gutter: auto;
  scrollbar-width: none;
}
.nav-rail:not(.open):not(.pinned) .rail-items::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.nav-rail:not(.open):not(.pinned) .rail-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  margin-inline: auto;
  justify-content: center;
  flex: 0 0 auto;
}

/* La cuenta comparte fila con el botón de salir y por eso puede CRECER; plegado, salir no
   se ve, así que crecer solo la sacaría de la columna de iconos. */
.nav-rail:not(.open):not(.pinned) .rail-cuenta-fila .rail-account {
  flex: 0 0 40px;
}
.nav-rail:not(.open):not(.pinned) .rail-cuenta-fila {
  justify-content: center;
}

.rail-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.rail-btn.active {
  background: var(--bg-hover);
  color: var(--text);
  font-weight: 600;
}
.rail-ic {
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rail-ic .ic {
  width: 19px;
  height: 19px;
}

/* El texto existe SIEMPRE en el DOM (para lectores de pantalla y para que no haya que
   repintar al desplegar); lo que cambia es si se ve. */
.rail-txt {
  opacity: 0;
  transition: opacity 130ms ease;
}
.nav-rail.open .rail-txt { opacity: 1; }

/* PLEGADO, EL TEXTO NO PUEDE OCUPAR SITIO — y esto es lo que descentraba los iconos.
   `opacity: 0` lo hace invisible pero lo deja EN EL FLUJO: medido, seguía ocupando 8px.
   Así que el botón, con `justify-content: center`, centraba el bloque entero
   [icono + hueco de 12px + texto], y el icono acababa desplazado a la izquierda. El botón
   sí estaba centrado; lo que no lo estaba era su contenido, y por eso medirlo a él no
   delataba nada.
   Se saca del flujo con la técnica de "solo para lectores de pantalla" en vez de con
   `display: none`: el nombre de la sección tiene que seguir anunciándose a quien navega
   sin ver, que es justo por lo que existe en el DOM estando plegado. */
.nav-rail:not(.open):not(.pinned) .rail-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La fila de la marca: el nombre a la izquierda y los botones al final, como pediste.
   `margin-left: auto` en el primero los empuja a los dos. */

/* 6px en TODA la fila, y el mismo hueco en `.rail-brand-acts`: el punto de estado tenía 4px
   a la izquierda (2 de la fila + 2 de su margen) y 8 a la derecha (2 + los 6 del grupo), y
   esa diferencia de 4px se ve — un punto descentrado parece mal colocado aunque nadie sepa
   decir por qué. Un solo valor para los dos lados y no hay nada que cuadrar a mano. */
.rail-brand-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
}
.rail-brand-fila .rail-brand {
  flex: 1 1 auto;
  min-width: 0;
}
.rail-brand-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* PLEGADO NO CABE NADA MÁS QUE EL LOGO. Se intentó dejar el punto de estado visible ahí y
   el resultado fue el de la captura: 56px con logo + contador de sin leer + punto, todo
   pisándose. Plegado, el rail es una tira de iconos; el estado vuelve en cuanto se despliega,
   que es a un gesto de distancia. */
.nav-rail:not(.open):not(.pinned) .rail-brand-acts { display: none; }

/* LA CHINCHETA MIDE LO MISMO QUE LA MARCA (lo cazaste tú): la marca es una fila de 40px y el
   botón un .icon-btn de 34, así que las dos cajas redondeadas de la misma fila no cuadraban
   de alto. El ancho se queda en 34: lo que se lee desalineado es el alto. */
.rail-brand-fila .icon-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* Junto a la marca, el punto de estado necesita área de pulsación propia: 10px de círculo se
   fallan con el ratón y no se ven con el foco del teclado. */
.rail-brand-acts .conn-dot { outline-offset: 4px; }

/* sin margen propio: el hueco lo pone el gap */

/* R5: la marca del rail, que ADEMÁS es el botón de menú (como Gemini). En reposo se ve el
   logo; al pasar el cursor se convierte en la hamburguesa y al pulsar despliega. Son la
   misma cosa porque ocupaban dos filas para lo mismo: la de arriba del todo, que es donde
   la gente ya va a buscar el menú.
   El icono NO se mueve al cambiar: los dos viven apilados en la misma caja de 20px y lo
   único que cambia es cuál se ve. Si uno sustituyera al otro en el DOM, la fila daría un
   salto de un píxel en cada hover. */
.rail-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 4px;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-dim);
  font: inherit;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  transition: background-color 130ms ease;
}
.rail-brand:hover { background: var(--bg-hover); }
.rail-brand-ic {
  position: relative;
  flex: 0 0 20px;
  height: 20px;
}

/* El contador sobre el isotipo, abajo a la derecha. `overflow: visible` en la caja del icono
   es obligatorio: mide 20px y el punto se sale por diseño. */
.marca-badge {
  position: absolute;
  right: -6px;
  bottom: -5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--notif);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--bg-elev);
  animation: marca-badge-in 140ms ease-out;
}

@keyframes marca-badge-in {
  from {
    opacity: 0;
    transform: scale(.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marca-badge { animation: none; }
}
.marca-badge.hidden { display: none; }

/* Los DOS iconos que se turnan (logo y hamburguesa), apilados. Se nombran uno a uno y no
   con `> *`: ese selector alcanzaba también al contador de sin leer, y el `inset: 0` lo
   estiraba hasta ocupar el icono entero. */
.rail-brand-ic > .rail-brand-logo,
.rail-brand-ic > .rail-brand-menu {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 130ms ease;
}
.rail-brand-ic .ic {
  width: 20px;
  height: 20px;
}
.rail-brand-menu {
  opacity: 0;
  color: var(--text);
}

/* El cambio logo⇄hamburguesa cuelga de `.marca-menu` y NO de `.rail-brand`: la misma pieza
   la llevan el primer botón del rail y, en móvil, los botones de menú de la bandeja y de una
   sección (#rail-movil, #panel-menu). Atarlo a `.rail-brand` habría obligado a repetir las
   reglas o a copiar el marcado, que es justo como se torció el interruptor del popover. */
.marca-menu:hover .rail-brand-menu,
.marca-menu:focus-visible .rail-brand-menu {
  opacity: 1;
}
.marca-menu:hover .rail-brand-logo,
.marca-menu:focus-visible .rail-brand-logo {
  opacity: 0;
}

/* En la cabecera de la bandeja el botón es un .icon-btn (34px) y la marca vive centrada
   dentro, sin el hueco de 20px del rail. */
.icon-btn.marca-menu { padding: 0; }
.icon-btn.marca-menu .rail-brand-ic {
  flex: 0 0 20px;
  width: 20px;
}

/* 20px, el ancho del hueco de icono del rail: así el isotipo comparte eje con Mensajes,
   Departamentos y el resto, en vez de quedar descolgado como le pasaba al avatar (R3). */
.rail-brand-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.rail-brand .logo { font-size: 15px; }

/* Las vistas: la bandeja y el panel de sección ocupan el mismo hueco. */
.app-view {
  flex: 1;
  display: flex;
  min-width: 0;
}
.app-view.hidden { display: none; }
.app-panel {
  flex-direction: column;
  overflow-y: auto;
  /* EL RELLENO DE ARRIBA, EN UNA VARIABLE, porque hay que RESTARLO desde dentro: un
     `position: sticky` se pega al borde del RELLENO del scrollport, no al del contenedor, así
     que una cabecera de tabla con `top: 0` se queda estos 26 px por debajo del borde y por ese
     hueco se ven pasar las filas. Lo señaló él en Contactos: *"quedó mal pq se ve el contenido
     de la tabla por detrás"*.

     Y va en variable —y no repetido— porque este relleno se escribe DOS VECES: aquí y en
     responsive-rail.css para móvil. Con el número suelto, quien pega algo arriba acierta en
     una pantalla y falla en la otra (NO_REPETIR 37). */
  --pane-pad-t: 26px;
  padding: var(--pane-pad-t) 30px 40px;

  /* SUELO gris: las tarjetas y la tabla son blancas y se apoyan encima. Sin esto, panel y
     tarjetas eran del mismo blanco y la única separación era el contorno — que es justo lo
     que el usuario señaló que no se apreciaba. */
  background: var(--bg);
}

/* La cabecera de una sección lleva su botón de menú a la IZQUIERDA del título (solo en
   móvil, ver #panel-menu): es la única puerta de vuelta al resto de apartados. */
.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.panel-head-txt {
  min-width: 0;
  flex: 1 1 auto;
}
#panel-menu {
  flex: 0 0 auto;
  margin-top: 2px;
}
.panel-head h2 {
  font-size: 21px;
  margin: 0 0 4px;
}
.panel-sub {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
  max-width: 70ch;
  line-height: 1.5;
}
.panel-body { max-width: 900px; }

/* Entra con movimiento porque SUSTITUYE a la bandeja: sin él, cambiar de sección es un
   corte seco y no se ve de dónde salió lo nuevo. */

/* La MISMA animación para las tres vistas: la bandeja y las secciones entran igual.
   Antes solo la llevaba .app-panel y volver a Mensajes era un corte seco. */
.app-view.swapping { animation: panel-in 190ms ease-out; }
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rail-inner,
  .rail-txt {
    transition: none;
  }
  .app-view.swapping { animation: none; }
}


/* --- "Ya no tienes acceso a esta pantalla" (punto 9 del 09-09) ---------------
   Sale cuando un administrador te quita, EN CALIENTE, la pantalla que tienes delante. No se
   vuelve a la bandeja sin más a propósito: a alguien mirando las métricas le desaparecería
   todo de golpe y pensaría que se rompió algo. Aquí lee qué pasó y se va cuando quiera. */
.sin-acceso {
  max-width: 420px;
  margin: 48px auto;
  padding: 0 20px;
  text-align: center;
  color: var(--text-dim);
}

.sin-acceso-ic {
  display: inline-flex;
  color: var(--text-dim);
  opacity: .55;
}

.sin-acceso-ic .ic {
  width: 40px;
  height: 40px;
}

.sin-acceso h3 {
  margin: 14px 0 6px;
  font-size: 16px;
  color: var(--text);
}

.sin-acceso p {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
}

/* ==========================================================================
   ACORDEONES DEL RAIL (item A20)

   "El sidebar ya se comenzó a desbordar porque son muchas opciones, hay que
   organizarlo mejor agrupando." Once entradas en una columna de 56px son once
   siluetas seguidas que hay que recorrer una a una.

   HAY DOS PRESENTACIONES Y NO SON LA MISMA PIEZA:
     · DESPLEGADO -> acordeón de verdad: cabecera + hijos que se despliegan.
     · PLEGADO    -> no cabe ninguna lista dentro de 56px, así que se ve UN icono
                     por grupo y los hijos salen en un panel flotante al lado
                     (.rail-flotante), con sus nombres escritos.
   ========================================================================== */

/* La caja de los hijos se anima con `grid-template-rows: 0fr -> 1fr`.
   NO con `height`: el alto depende de cuántos hijos sobrevivan al filtro de
   permisos, así que habría que medirlo desde JS y volver a medirlo cada vez que
   cambian los permisos en caliente. Con las fracciones lo interpola el navegador
   y no hay ningún número escrito a mano. */
.rail-grupo-caja {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 190ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rail-grupo-caja[data-abierto="true"] { grid-template-rows: 1fr; }

/* PLEGADO TODOS LOS GRUPOS ESTAN CERRADOS, diga lo que diga la preferencia. En 56px los
   hijos salen como iconos sueltos indistinguibles de las cabeceras, y el rail vuelve a ser
   la tira de once siluetas que se venia a arreglar. Ahi los hijos se ven en el panel
   flotante, con su nombre al lado. La preferencia no se pierde: se respeta al desplegar. */
.nav-rail:not(.open):not(.pinned) .rail-grupo-caja { grid-template-rows: 0fr; }
.nav-rail:not(.open):not(.pinned) .rail-grupo-caja .rail-grupo-hijos { padding-top: 0; }

/* `min-height: 0` es obligatorio: sin él el hijo de un grid no baja de su altura
   de contenido y la fila de 0fr no llega a cerrarse nunca. Y `overflow: hidden`
   es lo que recorta mientras se cierra. */
.rail-grupo-hijos {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* MISMA REGLA QUE .rail-items > *: un hijo de flex encoge por debajo de su alto cuando falta
   sitio, y ahi salian tres filas aplastadas en vez de tres botones y un scroll. La de arriba
   solo alcanza a los hijos DIRECTOS de .rail-items, y estos cuelgan un nivel mas abajo. */
.rail-grupo-hijos > * { flex: 0 0 auto; }
/* El hueco de arriba solo existe con el grupo abierto: cerrado dejaría un espacio
   que no separa nada. */
.rail-grupo-caja[data-abierto="true"] .rail-grupo-hijos { padding-top: 4px; }

/* LOS HIJOS VAN SANGRADOS Y CON UNA GUÍA VERTICAL. Sin ella, un hijo y una
   cabecera se ven igual y el acordeón deja de leerse como una jerarquía: parecen
   once entradas otra vez, solo que con cinco en negrita. */
.nav-rail.open .rail-hijo,
.nav-rail.pinned .rail-hijo {
  margin-left: 26px;
  width: calc(100% - 34px);
  padding-left: 12px;
  border-left: 1px solid var(--border);
  border-radius: 0 10px 10px 0;
  font-size: 13px;
}
.nav-rail.open .rail-hijo .rail-ic .ic,
.nav-rail.pinned .rail-hijo .rail-ic .ic { width: 17px; height: 17px; }

/* La cabecera del grupo: el chevron a la derecha, girado cuando está abierto.
   `margin-left: auto` lo empuja al final sin tocar el resto de la fila. */
.rail-grupo-chevron {
  margin-left: auto;
  display: inline-flex;
  opacity: 0;
  transition: transform 190ms cubic-bezier(0.4, 0, 0.2, 1), opacity 130ms ease;
}
.rail-grupo-chevron .ic { width: 15px; height: 15px; }
.nav-rail.open .rail-grupo-chevron,
.nav-rail.pinned .rail-grupo-chevron { opacity: .6; }
.rail-grupo-cab[aria-expanded="true"] .rail-grupo-chevron { transform: rotate(180deg); }

/* PLEGADO LA FLECHA SE QUEDA, Y APUNTA A LA DERECHA.

   Aqui ponia `display: none` con este motivo: "no hay nada que desplegar ahi dentro, y una
   flecha que no hace nada es una promesa rota". Ya no es cierto —plegado, pasar por encima
   de un grupo abre su panelito HACIA LA DERECHA— y sin flecha un grupo y una seccion son el
   mismo icono suelto: no hay forma de saber cual de los dos te lleva a algun sitio. Lo pidio
   el 14-09, dibujando las flechas encima de la captura.

   Se gira el mismo chevron en vez de traer otro icono: `v` girado -90 grados es `>`, que es
   exactamente por donde sale el panel. */
.nav-rail:not(.open):not(.pinned) .rail-grupo-cab { position: relative; }
.nav-rail:not(.open):not(.pinned) .rail-grupo-chevron,
/* Tambien con el acordeon marcado como abierto: plegado eso no significa nada, y sin esta
   linea la regla de `[aria-expanded="true"]` lo dejaria boca abajo. */
.nav-rail:not(.open):not(.pinned) .rail-grupo-cab[aria-expanded="true"] .rail-grupo-chevron {
  display: inline-flex;
  position: absolute;
  right: 0;
  top: 50%;
  margin: -6px 0 0;
  opacity: .55;
  transform: rotate(-90deg);
}
.nav-rail:not(.open):not(.pinned) .rail-grupo-chevron .ic { width: 12px; height: 12px; }

/* EL GRUPO SE MARCA CUANDO LA PANTALLA ABIERTA ES UNO DE SUS HIJOS. Plegado es lo
   único visible, así que sin esto no habría forma de saber dónde estás; y con el
   acordeón cerrado pasa igual estando desplegado.
   Es más suave que `.active` a propósito: la sección activa sigue siendo el hijo,
   no la cabecera, y dos cosas igual de destacadas no dicen cuál es cuál. */
.rail-grupo-cab.dentro { color: var(--text); }
.nav-rail:not(.open):not(.pinned) .rail-grupo-cab.dentro {
  background: var(--bg-hover);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* --- El panel flotante del rail plegado ---------------------------------- */

/* CUELGA DE `.nav-rail`, NO DE `.rail-inner`: ese tiene `overflow: hidden` para
   que el texto no asome plegado, y un panel que sale hacia la derecha se quedaría
   recortado dentro. Misma razón por la que el divisor de ancho vive ahí fuera. */
.rail-flotante {
  position: fixed;
  left: var(--rail-w);
  margin-left: 6px;

  /* EL HUECO NO PUEDE CERRARLO. Entre el icono y el panelito hay 6 px de aire, y al cruzarlos
     con el cursor el `mouseleave` del rail se disparaba y el panel se iba: habia que ir
     deprisa y en diagonal para alcanzarlo. Lo reporto asi: *"debo ser rapido, creo que por
     comodidad esa pequenia parte al colocar el cursor alli no deberia cerrar el popover, que
     sea como parte del hover tambien, pero invisible"*.

     Se resuelve con un puente invisible: el panel extiende su area sensible 8 px hacia la
     izquierda con un pseudo-elemento, asi que el cursor NUNCA sale de algo que cuenta como
     "encima". No se usa `padding-left` porque eso moveria el contenido; el pseudo-elemento
     ocupa el hueco sin tocar la caja.

     Va hasta -8 y no hasta -6 para pisar el borde del rail: con exactamente 6, un pixel de
     redondeo en pantallas con escalado dejaba una rendija por la que se colaba el cursor.

     Funciona porque el panel CUELGA de .nav-rail: `mouseleave` no se dispara mientras el
     cursor este sobre un descendiente, y un `position: fixed` sigue siendo descendiente a
     efectos de eventos aunque no lo parezca en pantalla. */
  z-index: 70;
  min-width: 196px;
  max-width: 260px;
  padding: 6px;
  /* --bg-elev y no --bg-panel: el panel FLOTA sobre la bandeja, que ya usa --bg-panel. Con
     el mismo color de fondo, el borde era lo unico que lo separaba de lo de detras y a
     media animacion parecia transparente. Un plano que se levanta se pinta mas claro. */
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: railFlotanteIn 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sale DESDE el rail, no de la nada: el desplazamiento de 6px dice de dónde
   viene. Sin `fill-mode`, así que si la animación no llega a correr el panel se
   queda en su estado natural (visible) en vez de congelado invisible. */
@keyframes railFlotanteIn {
  from { opacity: 0; transform: translateX(-6px); }
}

/* El título del grupo, dentro del panel: plegado es lo único que dice a qué
   grupo pertenece lo que estás viendo. */
.rail-flotante-tit {
  padding: 4px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Dentro del panel los botones son filas normales CON TEXTO, aunque el rail esté
   plegado: las reglas de `:not(.open):not(.pinned)` lo colapsarían todo a un
   cuadrado de 40px y el panel quedaría con una columna de iconos sin nombres —
   que es justo lo que se venía a resolver. */
.nav-rail:not(.open):not(.pinned) .rail-flotante .rail-btn {
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  justify-content: flex-start;
}
.nav-rail:not(.open):not(.pinned) .rail-flotante .rail-txt {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  opacity: 1;
}
.rail-flotante .rail-hijo { border-left: 0; }

/* El puente invisible del que habla la regla de arriba. Sin fondo y sin borde: solo existe
   para el cursor. `top: 0; bottom: 0` para que cubra TODO el alto del panel, no solo la fila
   por la que se entro. */
.rail-flotante::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8px;
  width: 8px;
}

/* DESPLEGADO NO HAY PANELITO: el acordeón ya enseña los nombres, y un flotante
   encima sería el mismo menú dos veces. Lo quita el JS, y esto lo remata por si
   el cursor entra justo mientras se está abriendo el rail. */
.nav-rail.open .rail-flotante,
.nav-rail.pinned .rail-flotante { display: none; }

/* EN MOVIL NO HAY PANELITO NUNCA. El rail no esta en pantalla (mide 0) y se abre entero
   desde el boton de la cabecera, asi que no hay icono al que acercarse; pero una tablet de
   720px o menos CON RATON si dispara el hover, y ahi saldria un panel flotando pegado al
   borde izquierdo sin nada de lo que colgar. */
@media (max-width: 720px) {
  .rail-flotante { display: none !important; }
}

/* Quien pide menos movimiento no pierde el acordeón: cambia de golpe, que es un
   estado estable, no una animación a medias. */
@media (prefers-reduced-motion: reduce) {
  .rail-grupo-caja { transition: none; }
  .rail-grupo-chevron { transition: none; }
  .rail-flotante { animation: none; }
}