/* Navegación: menú lateral desplegable (contraíble a solo íconos). En el celular es un cajón que se abre con el botón «Menú». */

/* Piezas comunes */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--naranjo); color: #fff; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em; }
.cajon-fondo { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.45); z-index: 35; }

/* ═══ Menú lateral ═══ */
:root { --lat-w: 264px; }
body.lat-contraido { --lat-w: 76px; }
body { transition: padding-left 0.15s; }
body:has(#lateral:not([hidden])) { padding-left: var(--lat-w); }   /* sin sesión no se reserva el espacio del menú */
.lateral { position: fixed; inset: 0 auto 0 0; width: var(--lat-w); z-index: 40; display: flex; flex-direction: column; background: var(--azul); color: #fff; border-right: 4px solid var(--naranjo); transition: width 0.15s, transform 0.2s; overflow: hidden; }
.lateral[hidden] { display: none; }
.lat-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.lat-logo { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; color: #fff; text-decoration: none; }
.lat-logo img { flex: none; border-radius: 8px; }
.lat-marca { font-weight: 700; font-size: 0.9375rem; line-height: 1.2; }
.lat-contraer { flex: none; width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.45); background: transparent; color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.lat-contraer:hover { background: rgba(255, 255, 255, 0.14); }
.lat-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }
.lat-nav ul { list-style: none; margin: 0; padding: 0; }
.lat-nav li + li { margin-top: 1px; }
.lat-item, .lat-subitem, .lat-enlace { color: #fff; text-decoration: none; font: inherit; }
.lat-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 38px; padding: 5px 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; font-weight: 600; font-size: 0.9375rem; }
.lat-item:hover, .lat-subitem:hover { background: rgba(255, 255, 255, 0.12); }
.lat-item.activo { background: rgba(255, 255, 255, 0.18); }
.lat-ico { flex: none; }
.lat-texto { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.lat-flecha { flex: none; font-size: 0.75rem; transition: transform 0.15s; opacity: 0.85; }
.lat-grupo.abierto > .lat-padre .lat-flecha { transform: rotate(90deg); }
.lat-sub { display: none; margin: 1px 0 4px 22px !important; padding-left: 10px !important; border-left: 2px solid rgba(255, 255, 255, 0.28); }
.lat-grupo.abierto > .lat-sub { display: block; }
.lat-subitem { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 10px; border-radius: 8px; font-size: 0.875rem; }
.lat-subitem.activo { background: #fff; color: var(--azul); font-weight: 700; }
.lat-insignia { flex: none; margin-left: 0; }
.lat-usuario { padding: 10px 14px 12px; border-top: 1px solid rgba(255, 255, 255, 0.18); display: flex; flex-direction: column; gap: 8px; }
.lat-persona { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lat-datos { display: flex; flex-direction: column; min-width: 0; }
.lat-datos b { font-size: 0.75rem; }
.lat-datos small { color: #C9D8EC; }
.lat-1l { display: block; overflow-wrap: normal; word-break: normal; }
.lat-1l span { display: inline-block; max-width: 100%; overflow-wrap: break-word; }   /* si no cabe, salta antes de la «@» */
.lat-enlaces { display: flex; gap: 8px; }
.lat-enlace { flex: 1 1 0; text-align: center; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 8px; background: transparent; cursor: pointer; font-size: 0.8125rem; font-weight: 600; }
.lat-enlace:hover { background: rgba(255, 255, 255, 0.14); }
.lateral :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Contraído: solo íconos (el nombre y los textos salen; las burbujas quedan como punto sobre el ícono) */
body.lat-contraido:not(.cajon-abierto) .lat-marca, body.lat-contraido:not(.cajon-abierto) .lat-texto,
body.lat-contraido:not(.cajon-abierto) .lat-flecha, body.lat-contraido:not(.cajon-abierto) .lat-sub,
body.lat-contraido:not(.cajon-abierto) .lat-datos, body.lat-contraido:not(.cajon-abierto) .lat-enlaces { display: none; }
body.lat-contraido:not(.cajon-abierto) .lat-cab { flex-direction: column; padding: 12px 0; gap: 10px; }
body.lat-contraido:not(.cajon-abierto) .lat-logo { flex: none; }
body.lat-contraido:not(.cajon-abierto) .lat-item { justify-content: center; padding: 8px 0; position: relative; }
body.lat-contraido:not(.cajon-abierto) .lat-item .lat-insignia { position: absolute; top: 4px; right: 12px; min-width: 8px; padding: 2px 4px; font-size: 0.625rem; }
body.lat-contraido:not(.cajon-abierto) .lat-persona { justify-content: center; cursor: pointer; }
body.lat-contraido:not(.cajon-abierto) .lat-contraer span { display: inline-block; transform: rotate(180deg); }

/* Nombre de cada ícono con el menú contraído (lo crea app.js al pasar el mouse o enfocar) */
.lat-tip { position: fixed; z-index: 60; padding: 6px 12px; border-radius: 8px; background: #101828; color: #fff; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.3); pointer-events: none; }

/* Celular: el menú es un cajón que se abre con el botón «Menú» */
@media (max-width: 760px) {
  body, body:has(#lateral:not([hidden])) { padding-left: 0; }   /* en el celular el menú es solo cajón: no reserva espacio, sea cual sea la preferencia guardada */
  #barra { display: block; }
  .lateral { width: min(300px, 86vw); transform: translateX(-105%); box-shadow: 0 0 30px rgba(16, 24, 40, 0.4); }
  body.cajon-abierto .lateral { transform: none; }
  .lat-contraer { display: none; }
}