/* ============================================================================
   LX-CLIENTBAR — Barra superior (estilo home) + sidebar COLAPSABLE del area de
   cliente (dashboard + perfil). Prefijo .lxc-. El editor (drawer) oculta
   #header-dashboard, asi que no le afecta. La sidebar ya tenia un patron
   icono-solo en @media(max-width:1200px) de new-style.css: aqui se reutiliza
   ese mismo aspecto para el estado colapsado a cualquier ancho.
   Estado: clase `lxc-collapsed` en <html> (persistida en localStorage).
   ========================================================================== */

/* ---------------- Barra superior ---------------- */
/* OJO: NO usar display:flex!important aqui. El drawer (editor) oculta la barra
   con #header-dashboard{display:none!important} (id); un id+clase !important la
   volveria a mostrar en el editor (zona restringida). El .d-flex del elemento ya
   da el flex en dashboard/perfil, y asi el hide del drawer prevalece. */
#header-dashboard.lxc-bar{
  display:flex;align-items:center;gap:22px;min-height:72px;
  padding:12px clamp(16px,2.4vw,28px)!important;background:#0D1031!important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* Mismo estilo que el boton de cierre (✕) de los paneles de producto (.lxp-x):
   borde tenue + hover/activo cian. */
/* Reposo: borde transparente (sin borde visible) + icono blanco, SIN halo (se
   elimina outline/box-shadow de foco). Al activar (hover/pulsar): borde e icono
   cian. NO se usa :focus para el color, porque el boton conserva el foco tras el
   clic y se quedaba azul; solo hover/:active/:focus-visible (teclado). El borde
   transparente reserva 1px para que no salte el layout al iluminarse. */
.lxc-burger{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border:1px solid transparent;outline:none;box-shadow:none;border-radius:6px;background:none;color:#fff;cursor:pointer;transition:color .16s,border-color .16s;-webkit-appearance:none;appearance:none}
.lxc-burger:focus{outline:none;box-shadow:none}
.lxc-burger:hover,.lxc-burger:active,.lxc-burger:focus-visible{border-color:#6ECAE4;color:#6ECAE4;outline:none;box-shadow:none}
.lxc-burger svg{display:block}
/* sin overflow:hidden (recortaba enlaces al no caber los 9 items). gap:22px =
   misma distancia entre enlaces que el nav de la home (.lx .nav-links). */
.lxc-nav{display:flex;align-items:center;gap:22px;flex:0 1 auto;min-width:0;flex-wrap:nowrap}
.lxc-nav a{font-family:'Montserrat',system-ui,sans-serif;font-size:13px;font-weight:300;color:#D9D8E4;white-space:nowrap;text-decoration:none;transition:color .16s}
.lxc-nav a:hover,.lxc-nav a:focus{color:#6ECAE4!important}
.lxc-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* ES/VA segmentado (como la home, fuera de scope .lx) */
.lxc-lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.18);border-radius:9px}
.lxc-lang a{padding:5px 11px;border-radius:6px;font-size:12px;font-weight:600;color:#fff;text-decoration:none;line-height:1;transition:background .16s}
.lxc-lang a:hover{color:#fff;background:rgba(255,255,255,.10)}
.lxc-lang a.on,.lxc-lang a.on:hover{background:#AE419C;color:#fff}
/* Avatar circular */
#header-dashboard.lxc-bar #head-photo{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.4);background:#fff}
/* La barra oculta login/registro cuando hay sesion via .login-button (JS existente);
   en el area de cliente el usuario esta logueado. No forzamos su display aqui. */
@media (max-width:991px){.lxc-nav{display:none}}

/* ---------------- Layout sidebar/contenido ---------------- */
/* El sidebar es position:fixed (lx-lateral.css): el spacer reserva su hueco
   (236px abierto / 76px colapsado) y el contenido rellena el resto. */
.lxc-spacer{flex:0 0 236px!important;max-width:236px!important;width:236px!important;transition:flex-basis .22s ease,max-width .22s ease}
.lxc-content{flex:1 1 auto!important;max-width:none!important;width:auto!important;min-width:0}
/* El .row del area cliente NO debe envolver: con MUCHOS elementos el contenido se
   hacia tan ancho que saltaba a una nueva linea flex (x=0), quedando BAJO el sidebar
   fijo (solape de tarjetas/pie sobre el menu, fallo responsive en portatil). nowrap
   fuerza que el contenido quede junto al spacer (x=236) y encoja (min-width:0),
   envolviendo sus tarjetas dentro de la columna. Cubre dashboard y perfil. */
.row:has(> .lxc-spacer),
.row:has(> .lxc-content){flex-wrap:nowrap!important;align-items:flex-start!important}
html.lxc-collapsed .lxc-spacer{flex-basis:76px!important;max-width:76px!important;width:76px!important}
/* La barra fija mide 72px: el contenido arranca justo debajo. */
#dashboard-section{padding-top:72px!important}