/* ============================================================
   TOP BAR — disponibilidad
   ============================================================ */
.topbar{
  background:var(--navy-deep);
  color:rgba(255,255,255,.78);
  font-size:13px;
  border-bottom:1px solid var(--line-dark);
}
.topbar .row{display:flex;justify-content:space-between;align-items:center;height:40px;gap:24px}
.topbar-left{display:flex;gap:22px;align-items:center}
.topbar-item{display:flex;gap:8px;align-items:center;font-weight:500}
.topbar-item svg{width:13px;height:13px;flex:none}
.topbar-item.live{color:var(--white)}
.topbar-item.live .liveDot{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.25);animation:pulse 2s infinite}
.topbar-right a{color:var(--white);font-weight:600;display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap;line-height:1}
.topbar-right a svg{width:14px;height:14px;flex:none}
.topbar-right a:hover{color:var(--precision)}
/* "Ventas" + número en una línea — proporcional con el resto del topbar */
.topbar-right .tb-wa{display:inline-flex;align-items:baseline;gap:8px;line-height:1}
.topbar-right .tb-wa-sub{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.topbar-right .tb-wa-num{font-size:13px;font-weight:600;letter-spacing:.01em}

@media(max-width:780px){
  .topbar-left .hide-mobile{display:none}
}
@media(max-width:480px){
  .topbar{font-size:12px}
  .topbar .row{gap:12px}
  .tb-sched{display:none}              /* deja solo "Atención disponible" para no desbordar */
  .topbar-right a{font-size:12px;gap:7px}
  .topbar-right .tb-wa-num{font-size:12px}
  .topbar-right .tb-wa{gap:6px}
}
@media(max-width:360px){
  .topbar-right .tb-wa-sub{display:none}   /* en pantallas muy estrechas deja solo el número */
}