/* ════════════════════════════════════════════════════════════════════════
   barra-lateral.css — el desplegable (off-canvas) de tu cuenta.

   ── El disparador es tu parte de la barra de arriba ─────────────────────
   Tu foto y tu nombre con una flecha, pintado dentro de `#nav`. Al pulsarlo
   el panel se desliza desde la izquierda y una capa oscura se tiende detrás:
   clic fuera = cerrar, como en cualquier menú del sistema.

   ── Cerrado/abierto con una clase, no con `hidden` ──────────────────────
   `[hidden]{display:none !important}` mata toda transición, y esto se tiene
   que DESLIZAR. El panel cierra con `visibility:hidden` + `translateX`
   (invisible e infocalizable), y abre con la clase `.abierta`. Con
   `prefers-reduced-motion` la animación desaparece pero el mecanismo igual
   funciona, porque el estado está en la clase y no en el tiempo.
   ════════════════════════════════════════════════════════════════════════ */

/* ── El disparador, en la barra de arriba ───────────────────────────────── */
.lateral-disparador{
  display:flex; align-items:center; gap:.45rem;
  border:0; background:none; color:var(--ink); cursor:pointer;
  font:inherit; font-size:.92rem;
  padding:.4rem .65rem; border-radius:999px;
}
.lateral-disparador:hover{background:var(--brand-suave)}
.lateral-disparador .yo{
  width:1.7rem; height:1.7rem; border-radius:50%; object-fit:cover;
}
.lateral-disparador .nombre{
  max-width:9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lateral-disparador .flecha{
  font-size:.62rem; color:var(--muted); transition:transform .2s;
}
.lateral-disparador[aria-expanded="true"] .flecha{transform:rotate(180deg)}
/* el globo de avisos sobre el disparador, junto a la flecha */
.lateral-disparador .globo{margin:0 .1rem}

/* ── La capa oscura ───────────────────────────────────────────────────────
   `pointer-events` va aparte de la animación y a propósito:.visible solo vive
   durante el fade (transición diferida) para que se vea desvanecer, pero
   pointer-events sí se apaga AL INSTANTE de cerrar — si no, el velo se comería
   el siguiente clic de quien ya cerró el menú y siguió navegando. Comprobarlo
   fue el arnés de la sección 5b, que el velo desechó el clic que abría el
   chat. */
.lateral-velo{
  position:fixed; inset:0; z-index:40;
  border:0; padding:0; cursor:pointer;
  background:rgba(36,26,32,.45);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, visibility 0s linear .22s;
}
.lateral-velo.abierta{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .22s ease;
}

/* ── El panel que se desliza desde la izquierda ─────────────────────────── */
.lateral{
  position:fixed; top:0; left:0; bottom:0; z-index:50;
  width:min(16rem, 84vw);
  padding:1.4rem 1rem 1.1rem;
  background:var(--card);
  border-right:1px solid var(--line);
  box-shadow:0 0 44px rgba(36,26,32,.3);
  display:flex; flex-direction:column; gap:.25rem;
  overflow-y:auto;
  transform:translateX(-103%);
  visibility:hidden; pointer-events:none;
  transition:transform .25s ease, visibility 0s linear .25s;
}
.lateral.abierta{
  transform:none; visibility:visible; pointer-events:auto;
  transition:transform .25s ease;
}

/* tu foto y tu nombre, arriba del todo */
.lateral .quien{
  display:flex; align-items:center; gap:.6rem;
  padding:.2rem .35rem .9rem; border-bottom:1px solid var(--line);
  margin-bottom:.5rem;
}
.lateral .yo{
  width:2.6rem; height:2.6rem; border-radius:50%; object-fit:cover; flex:0 0 auto;
}
.lateral .nombre{
  font-weight:600; font-size:1rem;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* las opciones */
.lateral .opcion{
  border:0; background:none; color:var(--ink); cursor:pointer;
  font:inherit; font-size:.95rem; text-align:left;
  padding:.6rem .65rem; border-radius:10px;
  display:flex; align-items:center; gap:.5rem; width:100%;
}
.lateral .opcion:hover{background:var(--brand-suave)}
.lateral .opcion[aria-current="page"]{color:var(--brand-ink); background:var(--brand)}
.lateral .opcion[aria-current="page"] .globo{background:var(--brand-ink); color:var(--brand)}
.lateral .globo{margin-left:auto; margin-right:0}

/* «Salir», al fondo y separado: es la acción de la que más hay que desconfiar
   con el dedo en un teléfono prestado */
.lateral .salir{margin-top:auto; color:#c0392b;
  border-top:1px solid var(--line); border-radius:0;
  padding:1rem .65rem}
.lateral .salir:hover{background:#fbeeea}

/* rótulo chico sobre las opciones, y nada más */
.lateral .rotulo{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding:.35rem .35rem .1rem;
}

/* ── Teléfono: es donde más se usa ───────────────────────────────────────── */
@media (max-width:48rem){
  /* en la barra queda solo la foto, que el nombre roba ancho que necesita
     la sección del sitio */
  .lateral-disparador .nombre{display:none}
  .lateral-disparador{padding:.4rem .5rem}
}