/* ─────────────────────────────────────────────
   AirBook v2 — nav.css
   Estilos del componente de navegación lateral compartido (nav.js).
   Paleta FIJA, independiente del tema de cada página (aprobado
   explícitamente: el sidebar no hereda --wind ni ninguna otra variable
   de la página que lo incluye -- así se ve igual en páginas claras
   como en las oscuras "sky" de Bonos/Chat, hasta que esas se unifiquen
   en un encargo aparte).

   Este fichero también define el "shell" de layout (.ab-layout /
   .ab-sidebar-root / .ab-content) que cada página adopta para colocar
   su contenido existente junto al sidebar en vez de debajo de un
   <header> de arriba a abajo como hasta ahora.
   ───────────────────────────────────────────── */

#ab-sidebar-root, #ab-sidebar-root *{box-sizing:border-box}

#ab-sidebar-root{
  --ab-w: 236px;
  --ab-bg: #fbfcfe;
  --ab-border: #e5eaf1;
  --ab-text: #17212e;
  --ab-text-dim: #64748b;
  --ab-hover: #eef4fa;
  --ab-active-bg: #e3f1fc;
  --ab-accent: #0284c7;
  --ab-accent-dark: #0369a1;
  --ab-sun: #d97706;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ---- Layout shell: cada página envuelve su <main> existente con esto ----
   --ab-topbar-h vive aquí (no en #ab-sidebar-root) para que .ab-content
   -- hermano, no descendiente, de #ab-sidebar-root -- pueda leerlo también.
   Páginas con altura fija tipo pantalla completa (ej. Reservas, con sus
   propios paneles de scroll interno) deben dimensionar su contenido con
   calc(100vh - var(--ab-topbar-h, 0px)) en vez de 100vh a secas, para no
   desbordar por los 52px que ocupa la topbar solo en móvil. */
.ab-layout{display:flex; min-height:100vh; --ab-topbar-h: 0px}
.ab-content{flex:1; min-width:0}

/* ---- Sidebar (desktop: fijo; móvil: cajón fuera de pantalla) ---- */
.ab-sidebar{
  width:var(--ab-w); flex:0 0 var(--ab-w);
  background:var(--ab-bg); border-right:1px solid var(--ab-border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.ab-brand{display:flex; align-items:center; gap:9px; padding:16px 16px 12px; text-decoration:none}
.ab-brand .ab-mark{
  width:28px; height:28px; border-radius:8px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--ab-accent), var(--ab-accent-dark));
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.ab-brand .ab-brand-text{display:flex; flex-direction:column; gap:1px; min-width:0}
.ab-brand .ab-wordmark{font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2.4px; color:var(--ab-text); line-height:1.1}
.ab-brand .ab-wordmark span{color:var(--ab-sun)}
.ab-brand .ab-business-name{
  font-family:'DM Sans',sans-serif; font-size:10px; color:var(--ab-text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.ab-nav{padding:4px 8px 14px; display:flex; flex-direction:column; gap:2px}

.ab-link{
  display:flex; align-items:center; gap:10px;
  padding:8px 9px; border-radius:8px;
  color:var(--ab-text-dim); text-decoration:none;
  font-size:13px; font-weight:500;
}
.ab-link .ab-ic{font-size:14px; width:17px; text-align:center; flex:0 0 auto}
.ab-link .ab-lb{flex:1; min-width:0}
.ab-link:hover{background:var(--ab-hover); color:var(--ab-text)}
.ab-link.is-active{background:var(--ab-active-bg); color:var(--ab-accent-dark); font-weight:700}

.ab-badge{
  font-family:'DM Mono',monospace; font-size:10px; font-weight:500;
  min-width:16px; text-align:center; padding:1px 5px; border-radius:9px;
  background:var(--ab-sun); color:#fff; line-height:1.5;
}

.ab-group{margin-top:1px}
.ab-group-head{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:9px 9px 5px; border:0; background:none; cursor:pointer;
  color:var(--ab-text-dim); font-family:'DM Sans',sans-serif;
}
.ab-group-head .ab-gl{font-size:10px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; flex:1; text-align:left}
.ab-group-head .ab-chev{font-size:10px; transition:transform .16s ease; color:var(--ab-text-dim); display:inline-block}
.ab-group.is-open .ab-chev{transform:rotate(90deg)}
.ab-group-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .18s ease}
.ab-group.is-open .ab-group-body{grid-template-rows:1fr}
.ab-group-body > div{overflow:hidden}
.ab-group-items{display:flex; flex-direction:column; gap:2px; padding:0 8px 4px 20px; position:relative}
.ab-group-items::before{content:''; position:absolute; left:17px; top:2px; bottom:8px; width:1px; background:var(--ab-border)}

/* ---- Topbar (solo móvil) ---- */
.ab-topbar{
  display:none; align-items:center; gap:12px;
  height:var(--ab-topbar-h); padding:0 12px;
  background:var(--ab-bg); border-bottom:1px solid var(--ab-border);
  position:sticky; top:0; z-index:20;
}
.ab-burger{
  position:relative; width:34px; height:34px; border-radius:8px; border:1px solid var(--ab-border);
  background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto;
}
.ab-burger .ab-bars{width:15px; height:10px; position:relative}
.ab-burger .ab-bars span{position:absolute; left:0; right:0; height:2px; background:var(--ab-text); border-radius:2px}
.ab-burger .ab-bars span:nth-child(1){top:0}
.ab-burger .ab-bars span:nth-child(2){top:4px}
.ab-burger .ab-bars span:nth-child(3){top:8px}
.ab-burger .ab-dot{
  position:absolute; top:-4px; right:-4px; min-width:15px; height:15px; padding:0 3px; border-radius:8px;
  background:var(--ab-sun); color:#fff; font:700 9px/15px 'DM Mono',monospace; text-align:center;
  border:2px solid var(--ab-bg);
}
.ab-topbar .ab-t-wordmark{font-family:'Bebas Neue',sans-serif; font-size:16px; letter-spacing:2px; color:var(--ab-text)}
.ab-topbar .ab-t-wordmark span{color:var(--ab-sun)}

.ab-backdrop{
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.42); z-index:15; opacity:0; transition:opacity .18s ease;
}
.ab-backdrop.show{display:block; opacity:1}

@media (max-width: 900px){
  .ab-layout{display:block; --ab-topbar-h: 52px}
  .ab-topbar{display:flex}
  .ab-sidebar{
    position:fixed; top:0; bottom:0; left:0; width:min(78vw, 288px); height:100vh;
    transform:translateX(-100%); transition:transform .22s ease; z-index:16;
  }
  .ab-sidebar.is-open{transform:translateX(0); box-shadow:10px 0 32px rgba(15,23,42,.18)}
}
@media (min-width: 901px){
  .ab-backdrop{display:none !important}
}