/* ================================================================
   VITRINA PÚBLICA — FixHub v10
   Paleta oscura elegante — sin morado
   ================================================================ */
 
:root {
  --vb:    rgb(19, 19, 22);
  --vs:    #1a1a1e;
  --vs2:   #222228;
  --vs3:   #2c2c34;
  --vbor:  rgba(255,255,255,0.07);
  --vbor2: rgba(255,255,255,0.14);
  --va:    var(--color-accent);
  --va2:   #b976cf;
  --vag:   rgba(255,255,255,0.06);
  --vag2:  rgba(255,255,255,0.11);
  --vtx:   #efefef;
  --vtx2:  rgba(239,239,239,0.60);
  --vtx3:  rgba(239,239,239,0.30);
  --vgrn:  #4ade80;
  --vred:  #f87171;
  --r:     10px;
  --rl:    16px;
  --rxl:   22px;
}
 
*, *::before, *::after {
  box-sizing: border-box; 
  margin: 0;
}
 
#vitrina-root {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
  color: var(--vtx);
  background: var(--vb);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
 
/* ════════════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════════════ */
.vit-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 62px auto;
  align-items: center;
  gap: 0 20px;
  background: var(--vb);
}
/* La fila 1 (logo, buscador, botones) ocupa las 3 columnas de siempre */
.vit-nav > .vit-nav-izq,
.vit-nav > .vit-search-wrap,
.vit-nav > .vit-nav-right {
  grid-row: 1;
}

/* Barra de filtros activos + orden. Ahora vive DENTRO del navbar (ver
   index.html) — segunda fila del grid, ocupando las 3 columnas — así
   queda en la misma capa que el logo y el buscador, sin depender de
   comparar z-index entre el navbar y un elemento aparte (eso fue lo
   que fallaba antes: dos elementos separados, con contextos de
   apilamiento propios, no terminaban de ordenarse bien entre sí).
   Siempre visible, incluso sin filtros activos — ver
   _actualizarFiltrosActivos() en vitrina.js. Trae el select de orden
   (antes vivía en el resumen del sidebar) en vez de un botón "Limpiar
   filtros" — ese sobraba, la X del buscador ya limpia todo.
   Mismo lenguaje visual que .vit-sidebar (tarjeta flotante: mismo
   fondo, borde, radio y sombra) para que combinen entre sí. */
.vit-filtros-bar-top {
  grid-row: 2;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 14px;
  padding: 8px 16px;
  min-height: 36px;
  background: var(--vb);
  border: 1px solid var(--vbor);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.vit-filtros-bar-top.oculto { display: none; }
.vit-filtros-bar-top .vit-filtros-sort { flex: 1; min-width: 0; }
 
.vit-logo {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--va);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.vit-logo span { color: var(--vtx); font-weight: 300; }
 
.vit-search-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 44px;
  background: var(--vs2);
  border: 1px solid var(--vbor);
  border-radius: var(--rxl);
  padding: 0 6px 0 16px;
  transition: border-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
}
.vit-search-wrap:focus-within {
  border-color: var(--vbor2);
  box-shadow: var(--shadow-focus-soft);
}
 
.vit-search {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0 12px 0 0;
  font-size: 14px;
  color: var(--vtx);
  outline: none;
}
.vit-search::placeholder { color: var(--vtx3); }
 
.vit-search-divider {
  width: 1px;
  height: 22px;
  background: var(--vbor2);
  flex-shrink: 0;
}
 
.vit-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  margin-left: 6px;
  background: transparent;
  border: none;
  border-radius: var(--r);
  color: var(--va);
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s var(--ease-apple);
}
.vit-search-btn:hover { color: var(--va2); }
 
#vit-btn-agregar-nav.activo {
  background: var(--vag2);
  box-shadow: 0 0 0 1px rgba(206,147,216,0.35), 0 0 16px rgba(206,147,216,0.45);
}
#vit-btn-agregar-nav.activo i {
  filter: drop-shadow(0 0 6px rgba(206,147,216,0.8));
}
 
/* ── Botón Scanner: mismo glow que Carrito/Agenda/Agregar ── */
#vit-btn-scan-nav.activo {
  background: var(--vag2);
  box-shadow: 0 0 0 1px rgba(206,147,216,0.35), 0 0 16px rgba(206,147,216,0.45);
}
#vit-btn-scan-nav.activo i {
  filter: drop-shadow(0 0 6px rgba(206,147,216,0.8));
}
 
/* ── Línea de escaneo animada ── */
@keyframes scanLinea {
  0%, 100% { top: 20%; }
  50%      { top: 78%; }
}
 
@media (max-width: 700px) {
  #modal-scanner-inv.vit-carrito-dropdown {
    width: calc(100vw - 28px) !important;
  }
}
 
.vit-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
 
.vit-btn-login {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: var(--r);
  color: var(--vtx2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple), color 0.15s var(--ease-apple), box-shadow 0.25s var(--ease-apple);
  white-space: nowrap;
}
.vit-btn-login:hover { background: var(--vag); color: var(--vtx); }
.vit-btn-login i { font-size: 21px; color: var(--va); transition: filter 0.25s var(--ease-apple); }
 
/* ── Estado activo: el botón "brilla" mientras el dropdown está abierto ── */
.vit-btn-login.activo {
  background: var(--vag2);
  color: var(--vtx);
  box-shadow: 0 0 0 1px rgba(206,147,216,0.35), 0 0 16px rgba(206,147,216,0.45);
}
.vit-btn-login.activo i {
  filter: drop-shadow(0 0 6px rgba(206,147,216,0.8));
}
 
.vit-btn-salir {
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  color: var(--vtx3);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease-apple);
}
.vit-btn-salir:hover { border-color: var(--vred); color: var(--vred); }
 
.vit-usuario-info {
  display: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--r);
  font-size: 13px;
  color: var(--vtx2);
  cursor: pointer;
  transition: background 0.15s var(--ease-apple);
}
.vit-usuario-info:hover { background: var(--vag); }
.vit-usuario-info.activo {
  background: var(--vag2);
  box-shadow: 0 0 0 1px rgba(206,147,216,0.35), 0 0 16px rgba(206,147,216,0.45);
}
.vit-usuario-info.activo i {
  filter: drop-shadow(0 0 6px rgba(206,147,216,0.8));
}
.vit-usuario-info strong { color: var(--vtx); font-weight: 600; }
.vit-usuario-info i { color: var(--va); font-size: 20px; transition: filter 0.25s var(--ease-apple); }
 
/* Herramientas */
.vit-btn-herramientas {
  display: none;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  color: var(--vtx2);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s var(--ease-apple);
}
.vit-btn-herramientas:hover { border-color: var(--va); color: var(--va); }
 
/* ── Carrito wrapper ──────────────────────────────────────── */
.vit-carrito-wrapper { position: relative; }
 
.vit-agenda-wrapper { position: relative; }
 
/* ════════════════════════════════════════════════════════════
   FLECHA + GLOW — mismo diseño para TODOS los dropdowns tipo
   panel (Carrito, Agenda, Agregar Producto, Scanner, Login,
   Usuario). Antes cada uno traía su propia copia de estos
   valores, y Login/Usuario directamente no tenían el glow
   difuminado (solo la flecha); ahora es una sola definición y
   cada selector solo aporta su offset (top/right).
 
   - Carrito / Agenda / Agregar Producto: el pseudo-elemento vive
     en el WRAPPER (no en el dropdown) porque el dropdown tiene
     overflow:hidden y recortaría la flecha — por eso usan :has().
   - Scanner: es position:fixed y vive fuera de cualquier wrapper,
     así que su flecha+glow es un elemento real aparte
     (#modal-scanner-glow) que JS posiciona en runtime.
   - Login / Usuario: no tienen overflow:hidden, así que el pseudo-
     elemento va directo sobre el propio dropdown.
   ════════════════════════════════════════════════════════════ */
.vit-carrito-wrapper:has(> .vit-carrito-dropdown:not(.oculto))::before,
.vit-agenda-wrapper:has(> .vit-carrito-dropdown:not(.oculto))::before,
.vit-agregarprod-wrapper:has(> .vit-carrito-dropdown:not(.oculto))::before,
#modal-scanner-glow::before,
.vit-login-dropdown::before,
.vit-usuario-dropdown::before {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  background: var(--vs2);
  border-left: 1px solid var(--vbor2);
  border-top: 1px solid var(--vbor2);
  transform: rotate(45deg);
}
.vit-carrito-wrapper:has(> .vit-carrito-dropdown:not(.oculto))::before,
.vit-agenda-wrapper:has(> .vit-carrito-dropdown:not(.oculto))::before,
.vit-agregarprod-wrapper:has(> .vit-carrito-dropdown:not(.oculto))::before {
  top: calc(100% + 6px); right: 20px;
  z-index: 301;
}
#modal-scanner-glow::before {
  z-index: 301;
}
#modal-scanner-glow::before,
.vit-usuario-dropdown::before { top: -6px; right: 20px; }
.vit-login-dropdown::before   { top: -6px; right: 22px; }
 
.vit-carrito-wrapper:has(> .vit-carrito-dropdown:not(.oculto))::after,
.vit-agenda-wrapper:has(> .vit-carrito-dropdown:not(.oculto))::after,
.vit-agregarprod-wrapper:has(> .vit-carrito-dropdown:not(.oculto))::after,
#modal-scanner-glow::after,
.vit-login-dropdown::after,
.vit-usuario-dropdown::after {
  content: '';
  position: absolute;
  width: 60px; height: 24px;
  background: radial-gradient(ellipse at center, rgba(206,147,216,0.35) 0%, rgba(206,147,216,0) 70%);
  filter: blur(4px);
  pointer-events: none;
}
.vit-carrito-wrapper:has(> .vit-carrito-dropdown:not(.oculto))::after,
.vit-agenda-wrapper:has(> .vit-carrito-dropdown:not(.oculto))::after,
.vit-agregarprod-wrapper:has(> .vit-carrito-dropdown:not(.oculto))::after {
  top: calc(100% - 2px); right: 20px;
  z-index: -1;
}
#modal-scanner-glow::after {
  z-index: -1;
}
#modal-scanner-glow::after,
.vit-usuario-dropdown::after { top: -2px; right: 20px; }
.vit-login-dropdown::after   { top: -2px; right: 22px; }
 
 
#modal-scanner-inv {
  overflow: visible;
}
 
/* ── Flecha + glow del Scanner ──
   Igual que en Carrito/Agenda/Agregar Producto: la flecha (::before)
   va POR ENCIMA del modal (z-index 301 > 300) para que se vea
   completa, sin que el modal la recorte; el glow difuminado (::after)
   va por debajo (z-index -1). Antes ambos vivían sin z-index propio
   dentro de un contenedor (#modal-scanner-glow) que sí tenía
   z-index:299, así que quedaban atrapados por debajo del modal
   entero — de ahí el triángulo "cortado". Se quitó el z-index del
   contenedor para que sus pseudo-elementos compitan directamente
   contra el modal en el stacking context correcto. ── */
#modal-scanner-glow {
  display: none;
  position: fixed;
  pointer-events: none;
}
#modal-scanner-inv:not(.oculto) ~ #modal-scanner-glow {
  display: block;
}
.vit-btn-carrito-nav {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: var(--r);
  color: var(--va);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple), color 0.15s var(--ease-apple);
}
.vit-btn-carrito-nav:hover { background: var(--vag); color: var(--va); }
.vit-btn-carrito-nav i { transition: filter 0.25s var(--ease-apple); }
 
/* ── Botón "Servicio técnico" (llave): igual que vit-btn-carrito-nav
   pero con texto al lado del ícono, para que quede claro qué hace ── */
.vit-btn-agenda-nav-texto {
  width: auto;
  gap: 8px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--vtx2);
}
.vit-btn-agenda-nav-texto i { font-size: 20px; color: var(--va); }
.vit-btn-agenda-nav-texto:hover { color: var(--vtx); }
.vit-btn-carrito-nav.activo {
  background: var(--vag2);
  box-shadow: 0 0 0 1px rgba(206,147,216,0.35), 0 0 16px rgba(206,147,216,0.45);
}
.vit-btn-carrito-nav.activo i {
  filter: drop-shadow(0 0 6px rgba(206,147,216,0.8));
}
 
.vit-carrito-badge-nav {
  position: absolute;
  top: 1px;
  right: 1px;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--va);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}
 
/* Dropdown carrito */
.vit-carrito-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 380px;
  max-height: 80vh;
  background: var(--vs2);
  border: 1px solid var(--vbor2);
  border-radius: var(--rl);
  z-index: 300;
  box-shadow:
  0 24px 64px rgba(0,0,0,0.8),
  0 0 0 1px rgba(206,147,216,0.35),
  0 0 22px rgba(206,147,216,0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: asomarse 0.18s var(--ease-apple);
}
/* .vit-carrito-dropdown ya trae su propia "animation: asomarse" (arriba),
   y con la misma especificidad (una sola clase) que el ".cerrando" genérico
   de utilidades.css, el empate lo gana quien se cargue después en el HTML
   — que es este archivo. Entonces al agregar .cerrando nunca se pasaba a
   "despedirse": el dropdown (carrito, agenda/calendario, agregar producto)
   se quedaba quieto los 140ms y recién ahí lo tapaba el display:none de
   .oculto, sin transición visible. Este override, más específico
   (0,0,2,0), gana siempre sin depender del orden de los <link>. */
.vit-carrito-dropdown.cerrando {
  animation: despedirse 0.14s var(--ease-apple) forwards;
}
.vit-carrito-dropdown.oculto { display: none; }
 
/* ── Calendario de Agenda (agenda.js: _htmlVistaAnio / _htmlDiasDelMes).
   Antes el hover se simulaba con onmouseover/onmouseout inline (sin
   --ease-apple, y reconstruyendo el color base "a mano" en el onmouseout
   de cada celda). Se pasa a clases reales: el color base va en la
   variable --cal-bg (única parte que cambia por celda: hoy/seleccionado/
   feriado), y el hover + la transición quedan en CSS, iguales para
   todo el calendario. ── */
.agenda-cal-dia {
  background: var(--cal-bg, transparent);
  transition: background 0.15s var(--ease-apple);
}
.agenda-cal-dia:hover { background: var(--vag); }
 
.agenda-mini-mes {
  cursor: pointer;
  padding: 5px;
  border-radius: var(--r);
  transition: background 0.15s var(--ease-apple);
}
.agenda-mini-mes:hover { background: var(--vag); }
 
.vit-carrito-drop-header {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--vbor);
}
 
/* ── Indicador de pasos (puntitos): Carrito → Datos → Dispositivo ── */
.vit-carrito-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 10px;
}
.vit-carrito-step-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vbor2);
  transition: width 0.2s var(--ease-apple), height 0.2s var(--ease-apple), background 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
}
.vit-carrito-step-dot.activo {
  width: 10px;
  height: 10px;
  background: var(--vgrn);
}
.vit-carrito-drop-titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--vtx);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vit-carrito-drop-titulo i { color: var(--va); }
 
.vit-carrito-drop-items { max-height: 290px; overflow-y: auto; }
 
.vit-carrito-drop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--vbor);
  transition: background 0.12s var(--ease-apple);
}
.vit-carrito-drop-item:hover { background: rgba(255,255,255,0.02); }
.vit-carrito-drop-item:last-child { border-bottom: none; }
 
.vit-carrito-drop-info { flex: 1; min-width: 0; }
.vit-carrito-drop-nombre { font-size: 13px; font-weight: 500; color: var(--vtx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vit-carrito-drop-precio { font-size: 13px; color: var(--va); font-weight: 700; margin-top: 3px; }
.vit-carrito-drop-cant   { font-size: 11px; color: var(--vtx3); margin-top: 2px; }
 
.vit-carrito-drop-quitar {
  background: transparent;
  border: 1px solid var(--vbor);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--vtx3);
  font-size: 12px;
  transition: all 0.15s var(--ease-apple);
  flex-shrink: 0;
}
.vit-carrito-drop-quitar:hover { border-color: var(--vred); color: var(--vred); }
 
.vit-carrito-drop-empty {
  padding: 36px 18px;
  text-align: center;
  color: var(--vtx3);
  font-size: 13px;
}
 
.vit-carrito-drop-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--vbor);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--vs3);
}
.vit-carrito-drop-total { font-size: 14px; font-weight: 700; color: var(--vtx); }
.vit-carrito-drop-total span { color: var(--va); }
 
.vit-btn-ver-carrito {
  height: 36px; padding: 0 16px;
  background: var(--vag2);
  border: 1px solid var(--vbor2);
  border-radius: var(--r);
  color: var(--va);
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s var(--ease-apple); white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.vit-btn-ver-carrito:hover { background: rgba(206,147,216,0.32); border-color: var(--va); }
 
/* ── Login wrapper ─────────────────────────────────────────── */
.vit-login-wrapper { position: relative; }
 
.vit-login-dropdown {
  position: absolute;
  top: calc(100% + 12px); right: 0;
  width: 300px;
  background: var(--vs2);
  border: 1px solid var(--vbor2);
  border-radius: var(--rl);
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
  z-index: 300;
  box-shadow:
  0 24px 64px rgba(0,0,0,0.8),
  0 0 0 1px rgba(206,147,216,0.35),
  0 0 22px rgba(206,147,216,0.22);
  animation: asomarse 0.18s var(--ease-apple);
}
 
.vit-login-dropdown.oculto { display: none; }
 
.vit-dropdown-titulo { font-size: 16px; font-weight: 700; color: var(--va); text-align: center; }
.vit-dropdown-sub    { font-size: 12px; color: var(--vtx3); text-align: center; margin-top: -8px; }
 
.vit-login-dropdown label {
  display: block;
  font-size: 11px; font-weight: 700;
  color: var(--vtx3);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.vit-login-dropdown input {
  width: 100%; height: 42px;
  background: var(--vs3);
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  padding: 0 14px;
  font-size: 14px; color: var(--vtx);
  outline: none; transition: border-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
}
.vit-login-dropdown input:focus {
  border-color: var(--vbor2);
  box-shadow: var(--shadow-focus-soft);
}
.vit-login-dropdown input::placeholder { color: var(--vtx3); }
 
.vit-modal-error { font-size: 12px; color: var(--vred); text-align: center; min-height: 14px; }
 
.vit-btn-ingresar {
  width: 100%; height: 42px;
  background: linear-gradient(135deg, rgba(206,147,216,0.3), rgba(206,147,216,0.15));
  border: 1px solid var(--vbor2);
  border-radius: var(--r);
  color: var(--va);
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s var(--ease-apple); letter-spacing: 0.2px;
}
.vit-btn-ingresar:hover { background: rgba(206,147,216,0.35); border-color: var(--va); }
.vit-btn-ingresar:disabled { opacity: 0.4; cursor: not-allowed; }
 
/* ════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════ */
.vit-layout {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 62px);
}
 
/* ════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════ */
.vit-sidebar {
  width: 272px;
  min-width: 272px;
  background: var(--vb);
  border: 1px solid var(--vbor);
  border-radius: 18px;
  overflow-x: visible;
  overflow-y: auto;
  overflow-anchor: none; /* que no se autoajuste el scroll solo al cambiar de alto (filtros que se abren/cierran, etc.) */
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: width 0.35s var(--ease-apple), min-width 0.35s var(--ease-apple), margin-left 0.35s var(--ease-apple), opacity 0.35s var(--ease-apple), padding 0.35s var(--ease-apple);
}
 
@media (min-width: 701px) {
  /* Truco: .vit-layout "sube" para empezar desde arriba de todo
     (por eso el margin-top negativo, que compensa la altura del
     navbar), y .vit-main compensa ese corrimiento con padding-top
     para que la grilla se vea en el mismo lugar de siempre.
     Así el sidebar (sticky, contenido dentro de .vit-layout) puede
     ocupar el espacio del navbar como en Safari/macOS Tahoe, pero
     sigue estando acotado por .vit-layout — o sea, se detiene justo
     antes del footer (que queda afuera de .vit-layout) en vez de
     pisarlo.
     El navbar ahora mide ~140px (62px de su fila de siempre + la fila
     de la barra de filtros adentro), no 62 — así que este valor se
     actualizó junto con el padding-top de .vit-main de más abajo. */
  .vit-layout {
    margin-top: -140px;
  }
 
  .vit-layout > .vit-sidebar {
    /* height/max-height/padding/z-index compartidos con la variante
       "suelta" de más abajo viven en utilidades.css (ver comentario
       ahí) — acá solo lo propio de la variante sticky. */
    position: sticky;
    top: 10px;
    align-self: flex-start;
    margin: 0 10px 10px 10px;
  }
 
  /* El navbar reserva el espacio del sidebar abierto corriendo su
     contenido (buscador, login, etc.) a la derecha con padding-left,
     para que el sidebar (que se dibuja por encima, z-index 270) nunca
     tape el buscador. */
  .vit-nav {
    padding-left: 316px; /* 24px padding original + 292px del sidebar */
    transition: padding-left 0.35s var(--ease-apple);
  }
  .vit-nav.vit-sidebar-cerrado {
    padding-left: 24px;
  }
 
  /* El logo+botón original del navbar solo se muestran cuando el sidebar
     está cerrado (esa esquina queda libre); mientras está abierto, el
     propio botón ☰ dentro del resumen del sidebar cumple esa función. */
  .vit-nav-izq {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .vit-nav-izq .vit-btn-menu {
    display: none;
  }
  .vit-nav.vit-sidebar-cerrado .vit-nav-izq .vit-btn-menu {
    display: flex;
  }
}
 
/* ════════════════════════════════════════════════════════════
   Los dropdowns del navbar (Carrito, Agenda, Notas, Login, Usuario,
   Agregar producto) se resuelven en JS (vitrina.js:
   _escaparDropdownFlotante / _restaurarDropdownFlotante): mientras
   están abiertos, escapan de su wrapper y flotan por encima de TODO
   (z-index:290) sin necesidad de tocar el z-index del navbar ni
   arrastrarlo por encima del sidebar (eso tapaba el botón ☰ que vive
   dentro del propio sidebar).
   ════════════════════════════════════════════════════════════ */
 
.vit-sidebar.cerrado {
  width: 0;
  min-width: 0;
  margin-left: 0;
  padding: 0;
  opacity: 0;
  border: none;
  overflow: hidden;
}
 
/* ════════════════════════════════════════════════════════════
   SIDEBAR "SUELTO" para Gráficos/Registro — mismo espíritu que el
   catálogo (asomarse por encima del navbar), pero acá el <aside> se
   saca por completo de adentro de .vitp-page (ver vitp-paginas.js) y
   pasa a vivir como hermano directo de .vit-nav dentro de
   #vitrina-root (que no tiene z-index propio). Así compite de igual
   a igual contra .vit-nav (270 > 260) sin arrastrar el resto de la
   página con él y sin taparle los dropdowns al navbar.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 701px) {
  .vit-sidebar.vitp-sidebar-fijo {
    /* height/max-height/padding/z-index compartidos viven en
       utilidades.css (ver comentario ahí) — acá solo lo propio de la
       variante fixed. */
    position: fixed;
    top: 10px;
    left: 10px;
    margin: 0;
  }
}
 
/* Secciones del sidebar */
.vit-sb-section {
  padding: 2px 12px;
}
 
/* .vit-sb-section-btn hereda la cajita redondeada de .nav-item-pill
   (utilidades.css) — acá solo se agrega lo que le es propio: separar
   el ícono+texto (agrupados en un <span>) del chevron a la derecha. */
.vit-sb-section-btn {
  justify-content: space-between;
}
.vit-sb-section-btn span {
  display: flex; align-items: center; gap: 9px;
}
 
.vit-sb-section-btn.activo .vit-sb-chevron { color: var(--va); }
 
.vit-sb-chevron {
  font-size: 13px;
  color: var(--vtx3);
  transition: transform 0.2s var(--ease-apple), color 0.15s var(--ease-apple);
  flex-shrink: 0;
}
 
/* Cuerpo de la sección: más indentado a la izquierda (28px vs 12px del
   header, que ahora ya tiene su propio margen de 12px) para que las
   opciones se vean "tabuladas" adentro de su sección. */
.vit-sb-section-body {
  padding: 4px 12px 12px 28px;
}
.vit-sb-section-body.cerrado { display: none; }
 
/* Items de filtro — más chicos que antes (son subcategorías, no
   títulos), más espacio, separador sutil */
.vit-filter-item {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  cursor: pointer; transition: background 0.12s var(--ease-apple);
  border-radius: 0;
}
.vit-filter-item:last-child { border-bottom: none; }
.vit-filter-item:hover { background: var(--vag); border-radius: 6px; }
 
.vit-filter-item input[type="checkbox"] {
  width: 15px; height: 15px;
  border-radius: 5px;
  accent-color: var(--va);
  cursor: pointer; flex-shrink: 0;
}
.vit-filter-item label {
  font-size: 12.5px; color: var(--vtx2);
  cursor: pointer; flex: 1; line-height: 1.4;
  white-space: normal;
  transition: color 0.12s var(--ease-apple);
}
.vit-filter-item:hover label { color: var(--vtx); }
 
/* Precio */
.vit-precio-actual {
  font-size: 22px; font-weight: 800;
  color: var(--vtx); text-align: center;
  padding: 10px 0 14px; letter-spacing: -0.5px;
}
.vit-slider {
  width: 100%; accent-color: var(--vtx);
 
  cursor: pointer; margin-bottom: 8px;
}
.vit-precio-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--vtx3); padding: 0 2px;
}
 
/* Toggle switch */
.vit-toggle-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 6px;
  border-radius: var(--r); cursor: pointer; transition: background 0.12s var(--ease-apple);
}
.vit-toggle-item:hover { background: var(--vag2); }
.vit-toggle-info  { display: flex; flex-direction: column; gap: 3px; }
.vit-toggle-label { font-size: 13px; font-weight: 600; color: var(--vtx2); }
.vit-toggle-sub   { font-size: 11px; color: var(--vtx3); }
 
.vit-toggle-wrap { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.vit-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.vit-toggle-track {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 22px; cursor: pointer;
  transition: background 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
}
.vit-toggle-input:hover + .vit-toggle-track { box-shadow: 0 0 0 3px rgba(206,147,216,0.15); }
.vit-toggle-track::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #fff; border-radius: 50%;
  transition: transform 0.2s var(--ease-apple);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.vit-toggle-input:checked + .vit-toggle-track { background: var(--va); }
.vit-toggle-input:checked + .vit-toggle-track::after { transform: translateX(16px); }
 
/* ════════════════════════════════════════════════════════════
   RESUMEN DEL SIDEBAR: conteo + orden + filtros activos
   (antes vivía como barra flotante sobre la grilla; ahora es lo
   primero que se ve en el sidebar, antes de la sección Producto)
   ════════════════════════════════════════════════════════════ */
.vit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

@media (min-width: 701px) {
  .vit-layout > .vit-main { padding-top: 140px; }
}
 
.vit-sb-resumen {
  padding: 14px 20px 16px;
  border-bottom: 1px solid var(--vbor);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
 
.vit-sb-resumen-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
 
.vit-count { font-size: 12px; color: var(--vtx3); white-space: nowrap; flex-shrink: 0; }
 
/* Filtros activos dentro del resumen del sidebar */
.vit-filtros-sort {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.vit-filtro-sort-tag {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 8px;
  background: var(--vag);
  border: 1px solid var(--vbor2);
  border-radius: 20px;
  font-size: 11px; font-weight: 600;
  color: var(--va);
  cursor: pointer; transition: all 0.15s var(--ease-apple);
}
.vit-filtro-sort-tag:hover { background: var(--vag2); }
.vit-filtro-sort-tag i { font-size: 11px; }
 
.vit-sort-select {
  background: var(--vs2);
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  color: var(--vtx2);
  font-size: 12px; padding: 6px 10px;
  outline: none; cursor: pointer;
  transition: border-color 0.2s var(--ease-apple);
}
.vit-sort-select:focus { border-color: var(--vbor2); box-shadow: var(--shadow-focus-soft); }
.vit-sort-select option { background: var(--vs2); }
 
.vit-filtros-bar-top .vit-sort-select {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 6px 4px;
}
.vit-filtros-bar-top .vit-sort-select:focus { box-shadow: none; }
 
/* ════════════════════════════════════════════════════════════
   GRILLA
   ════════════════════════════════════════════════════════════ */
#vit-grid-wrap {
  padding: 6px 36px 20px;
  flex: 1;
}
 
.vit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 14px;
}
 
/* ════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════ */
.vit-card {
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: border-color 0.2s var(--ease-apple), transform 0.15s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
  animation: apareceProducto 0.4s var(--ease-apple) both;
  animation-delay: min(calc(var(--i, 0) * 35ms), 350ms);
}
.vit-card:hover {
  border-color: var(--vbor2);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(206,147,216,0.12);
}
@keyframes apareceProducto {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
.vit-card-img {
  background: var(--vs2);
  height: 130px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--vbor);
  position: relative; overflow: hidden; flex-shrink: 0;
}
.vit-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* antes: cover */
  padding: 8px;          /* opcional: un poco de aire para que no toque los bordes */
  box-sizing: border-box;
}
.vit-card-img i   { font-size: 40px; color: var(--vtx3); }

.vit-card-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: rgba(20,20,20,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; line-height: 1; z-index: 2;
  opacity: 0; transition: opacity 0.15s, background 0.15s, transform 0.15s;
}
.vit-card-flecha i { font-size: 13px; }
.vit-card-img:hover .vit-card-flecha { opacity: 1; }
.vit-card-flecha:hover { background: rgba(20,20,20,0.8); transform: translateY(-50%) scale(1.08); }
.vit-card-flecha:active { transform: translateY(-50%) scale(0.94); }
.vit-card-prev { left: 6px; }
.vit-card-next { right: 6px; }
.vit-card-dots {
  position: absolute; bottom: 6px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  z-index: 2;
}
.vit-card-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  transition: background 0.15s, transform 0.15s;
}
.vit-card-dot.activo { background: #fff; transform: scale(1.2); }

/* En touch (celular) no existe :hover — las flechas quedarían
   invisibles para siempre si dependieran solo de eso. */
@media (hover: none) {
  .vit-card-flecha { opacity: 1; }
}

.vit-badge-svc {
  position: absolute; top: 8px; left: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 12px;
  background: var(--vag2); border: 1px solid var(--vbor2); color: var(--va);
}
 
.vit-card-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.vit-card-tipo { font-size: 9px; font-weight: 500; font-style: italic; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(239,239,239,0.22); }
.vit-card-nombre { font-size: 14px; font-weight: 500; color: var(--vtx); line-height: 1.35; }
.vit-card-categoria { font-size: 11px; color: var(--vtx3); }
.vit-card-compat { font-size: 11px; color: var(--vtx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
.vit-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--vbor);
}
.vit-precio        { font-size: 15px; font-weight: 700; color: var(--va); }
.vit-precio-gratis { font-size: 12px; color: var(--vtx3); }
 
.vit-stock { display: flex; align-items: center; gap: 4px; }
.vit-dot   { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.vit-dot-in  { background: var(--vgrn); }
.vit-dot-out { background: var(--vred); }
.vit-dot-svc { background: var(--vgrn); }
.vit-stock-text-in  { font-size: 10px; color: var(--vgrn); }
.vit-stock-text-out { font-size: 10px; color: var(--vred); }
.vit-stock-text-svc { font-size: 10px; color: var(--vgrn); }
 
.vit-btn-ver {
  width: 100%; margin-top: 8px; height: 33px;
  background: transparent;
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  color: var(--vtx3); font-size: 12px;
  cursor: pointer; transition: all 0.15s var(--ease-apple);
}
.vit-btn-ver:hover { background: var(--vag); border-color: var(--vbor2); color: var(--va); }
 
.vit-btn-carrito {
  width: 100%; margin-top: 6px; height: 33px;
  background: var(--vag);
  border: 1px solid var(--vbor2);
  border-radius: var(--r);
  color: var(--va); font-size: 12px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s var(--ease-apple);
}
.vit-btn-carrito:hover { background: var(--vag2); border-color: var(--va); }
 
/* ════════════════════════════════════════════════════════════
   MODAL DETALLE
   ════════════════════════════════════════════════════════════ */
.vit-detalle-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.vit-detalle-overlay.oculto { display: none; }
 
.vit-detalle-modal {
  background: var(--vs2);
  border: 1px solid var(--vbor2);
  border-radius: var(--rxl);
  width: 100%; max-width: 500px; max-height: 90vh;
  overflow-y: auto; position: relative;
  overscroll-behavior: contain;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8);
  animation: asomarse 0.2s var(--ease-apple);
}
.vit-detalle-img {
  background: var(--vs3); height: 230px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--vbor); flex-shrink: 0;
  position: relative;
}
.vit-detalle-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* antes: cover */
  padding: 12px;
  box-sizing: border-box;
}
.vit-detalle-img i   { font-size: 64px; color: var(--vtx3); }

.vit-carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(20,20,20,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; line-height: 1; z-index: 2;
  transition: background 0.15s, transform 0.15s;
}
.vit-carrusel-flecha i { font-size: 17px; }
.vit-carrusel-flecha:hover { background: rgba(20,20,20,0.8); transform: translateY(-50%) scale(1.08); }
.vit-carrusel-flecha:active { transform: translateY(-50%) scale(0.94); }
.vit-carrusel-prev { left: 10px; }
.vit-carrusel-next { right: 10px; }
.vit-carrusel-dots {
  position: absolute; bottom: 10px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.vit-carrusel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.5); cursor: pointer;
  box-shadow: 0 0 2px rgba(0,0,0,0.3);
  transition: background 0.15s, transform 0.15s;
}
.vit-carrusel-dot.activo { background: #fff; transform: scale(1.2); }
 
.vit-detalle-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.vit-detalle-tipo   { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vtx3); }
.vit-detalle-nombre { font-size: 20px; font-weight: 700; color: var(--vtx); line-height: 1.3; }
.vit-detalle-marca  { font-size: 14px; color: var(--vtx2); }
.vit-detalle-desc   { font-size: 14px; color: var(--vtx2); line-height: 1.65; padding: 12px 0; border-top: 1px solid var(--vbor); border-bottom: 1px solid var(--vbor); }
.vit-detalle-compat { font-size: 13px; color: var(--vtx3); }
.vit-detalle-compat strong { color: var(--vtx2); }
.vit-detalle-footer { display: flex; align-items: center; justify-content: space-between; }
.vit-detalle-precio { font-size: 28px; font-weight: 800; color: var(--va); letter-spacing: -0.5px; }
.vit-detalle-stock  { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.vit-detalle-acciones { display: flex; flex-direction: column; gap: 8px; }
 
.vit-btn-detalle-carrito {
  height: 46px;
  background: var(--vag2);
  border: 1px solid var(--vbor2);
  border-radius: var(--r);
  color: var(--va); font-size: 15px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s var(--ease-apple);
}
.vit-btn-detalle-carrito:hover { background: rgba(206,147,216,0.35); border-color: var(--va); }
 
.vit-btn-detalle-cerrar {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--vbor);
  border-radius: 50%; color: var(--vtx2);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s var(--ease-apple);
}
.vit-btn-detalle-cerrar:hover { background: rgba(0,0,0,0.8); color: var(--vtx); }
 
/* ════════════════════════════════════════════════════════════
   ESTADOS
   ════════════════════════════════════════════════════════════ */
.vit-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 80px 20px; color: var(--vtx3); text-align: center;
  animation: surgir 0.3s var(--ease-apple) both;
}
.vit-empty i { font-size: 52px; }
.vit-empty p { font-size: 15px; }
 
.vit-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 80px; color: var(--vtx3); font-size: 14px;
  animation: surgir 0.2s var(--ease-apple) both;
}

/* Mientras se está pidiendo una página/filtro nuevo y YA hay productos
   dibujados, se dejan puestos (en vez de borrarlos) y solo se atenúan
   — así el alto de la grilla no cambia y no "salta" la página. Ver
   _mostrarLoading() en vitrina.js. */
.vit-grid-wrap.vit-grid-cargando .vit-grid,
.vit-grid-wrap.vit-grid-cargando .vit-paginacion {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.15s var(--ease-apple);
}
 
/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .vit-nav { padding: 0 14px; }
  .vit-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 10px; }
  .vit-grid-wrap { padding: 12px; }
  .vit-btn-login span, .vit-btn-carrito-nav span:not(.vit-carrito-badge-nav) { display: none; }
  .vit-btn-agenda-nav-texto { width: 40px; padding: 0; gap: 0; }
}
 
@keyframes spin { to { transform: rotate(360deg); } }
 
/* ════════════════════════════════════════════════════════════
   PAGINACIÓN
   ════════════════════════════════════════════════════════════ */
.vit-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 20px 10px;
  flex-wrap: wrap;
}
 
.vit-pag-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  background: var(--vag);
  border: 1px solid var(--vbor2);
  border-radius: var(--r);
  color: var(--vtx2);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s var(--ease-apple);
}
.vit-pag-btn:hover:not(:disabled) { background: var(--vag2); color: var(--vtx); }
.vit-pag-btn:disabled { opacity: 0.35; cursor: not-allowed; }
 
.vit-pag-num {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  color: var(--vtx2);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s var(--ease-apple);
}
.vit-pag-num:hover { background: var(--vag); border-color: var(--vbor2); color: var(--vtx); }
.vit-pag-num.activa {
  background: var(--vag2);
  border-color: var(--vbor2);
  color: var(--vtx);
  font-weight: 700;
}
 
.vit-pag-dots { font-size: 13px; color: var(--vtx3); padding: 0 4px; }
 
/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.vit-footer {
  background: linear-gradient(180deg, var(--vs) 0%, var(--vb) 100%);
  border-top: 1px solid var(--vbor2);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.03) inset;
  padding: 56px 40px 32px;
  margin-top: 20px;
}
 
.vit-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto 40px;
}
 
.vit-footer-logo {
  font-size: 22px;
  font-weight: 800;
  color: var(--vtx);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.vit-footer-logo span { font-weight: 300; }
.vit-footer-logo-placeholder {
  font-size: 15px;
  font-weight: 400;
  font-style: italic;
  color: var(--vtx3);
}
.vit-footer-logo img {
  max-height: 128px;
  max-width: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--r);
  background: var(--vtx);
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px var(--vbor2);
  transition: transform 0.25s var(--ease-apple), box-shadow 0.25s var(--ease-apple);
}
.vit-footer-logo img:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.45), 0 0 0 1px var(--vbor2);
}
 
.vit-footer-desc {
  font-size: 13px;
  color: var(--vtx3);
  line-height: 1.65;
  margin-bottom: 20px;
}
 
.vit-footer-redes {
  display: flex;
  gap: 10px;
  margin: 4px 0 16px;
}
.vit-footer-red {
  width: 36px;
  height: 36px;
  background: var(--vag);
  border: 1px solid var(--vbor2);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vtx2);
  font-size: 16px;
  text-decoration: none;
  transition: transform 0.2s var(--ease-apple), background 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple), color 0.2s var(--ease-apple);
  overflow: hidden;
}
 
.vit-footer-red svg {
  width: 100%;
  height: 100%;
  padding: 7px;
  box-sizing: border-box;
  display: block;
  margin: auto;
}
 
.vit-footer-red:hover {
  background: var(--vag2);
  color: var(--vtx);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(206,147,216,0.35), 0 6px 16px rgba(0,0,0,0.35), 0 0 16px rgba(206,147,216,0.35);
}
 
.vit-footer-col-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vtx3);
  margin-bottom: 16px;
}
 
.vit-footer-col a, .vit-footer-col p {
  display: block;
  font-size: 13px;
  color: var(--vtx2);
  text-decoration: none;
  margin-bottom: 10px;
  line-height: 1.4;
  transition: color 0.15s var(--ease-apple), transform 0.15s var(--ease-apple);
}
.vit-footer-col a:hover { color: var(--vtx); transform: translateX(2px); }
 
.vit-footer-mapa {
  border-radius: var(--rl);
  overflow: hidden;
  border: 1px solid var(--vbor);
  height: 120px;
  margin-top: 4px;
  background: var(--vs2);
  display: flex; align-items: center; justify-content: center;
  color: var(--vtx3); font-size: 13px; gap: 8px;
  transition: border-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple), transform 0.2s var(--ease-apple);
}
.vit-footer-mapa:hover {
  border-color: var(--vbor2);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(206,147,216,0.12);
}
 
@media (max-width: 700px) {
  .vit-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .vit-footer { padding: 32px 20px 24px; }
}
 
.vit-carrito-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.vit-carrito-modal-overlay.oculto { display: none; }
 
.vit-carrito-modal {
  background: #1a1a2e;
  border: 1px solid rgba(206,147,216,0.3);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8);
  position: relative;
}
 
.vit-carrito-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(206,147,216,0.18);
  flex-shrink: 0;
}
 
.vit-carrito-modal-titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
 
.vit-carrito-modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  flex: 1;
}
 
.vit-carrito-modal-body .form-section {
  margin-bottom: 0;
  border: none;
  padding: 0;
  background: transparent;
}
 
.vit-carrito-drop-completo {
  padding: 14px 16px 16px;
  overflow-y: auto;
  flex: 1;
}
 
/* ── Carrito: layout de 2 columnas (Datos+Equipo | Carrito) ── */
#vit-carrito-dropdown.vit-carrito-2col {
  width: 920px;
}
#vit-carrito-dropdown.vit-carrito-2col .vit-carrito-drop-completo {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
.vit-carrito-col {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 16px;
  max-height: 70vh;
  overflow-y: auto;
}
/* La derecha (productos, con foto + precio) necesita más espacio que la
   izquierda (campos de texto de cliente/equipo) — si no, con la miniatura
   de producto el texto queda apretado y el nombre se corta en columna. */
.vit-carrito-col-izq {
  flex: 0.85;
}
.vit-carrito-col-der {
  flex: 1.15;
}
.vit-carrito-col-izq {
  border-right: 1px solid var(--vbor);
}
 
@media (max-width: 700px) {
  #vit-carrito-dropdown.vit-carrito-2col {
    width: calc(100vw - 28px);
  }
  #vit-carrito-dropdown.vit-carrito-2col .vit-carrito-drop-completo {
    flex-direction: column;
  }
  .vit-carrito-col-izq {
    border-right: none;
    border-bottom: 1px solid var(--vbor);
  }
  .vit-carrito-col {
    max-height: none;
  }
}
 
.vit-carrito-drop-completo .form-section {
  margin-bottom: 0;
  border: none;
  padding: 0;
  background: transparent;
}
 
@media (max-width: 700px) {
  .vit-carrito-dropdown { width: calc(100vw - 28px); right: -8px; }
}
 
.vit-usuario-wrapper { position: relative; }
 
.vit-usuario-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  background: var(--vs2);
  border: 1px solid var(--vbor2);
  border-radius: var(--rl);
  padding: 8px;
  z-index: 300;
  box-shadow:
  0 24px 64px rgba(0,0,0,0.8),
  0 0 0 1px rgba(206,147,216,0.35),
  0 0 22px rgba(206,147,216,0.22);
  animation: asomarse 0.18s var(--ease-apple);
}
.vit-usuario-dropdown.oculto { display: none; }
 
.vit-btn-salir-dropdown {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-radius: var(--r);
  color: var(--vred);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple);
}
.vit-btn-salir-dropdown:hover { background: rgba(248,113,113,0.12); }
 
.vit-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-radius: var(--r);
  color: var(--vtx2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple), color 0.15s var(--ease-apple);
  text-align: left;
}
.vit-menu-item:hover { background: var(--vag2); color: var(--vtx); }
.vit-menu-item i { color: var(--va); font-size: 15px; flex-shrink: 0; }
 
.vit-menu-sep {
  height: 1px;
  background: var(--vbor);
  margin: 6px 4px;
}
 
/* ════════════════════════════════════════════════════════════
   BOTÓN FLOTANTE WHATSAPP
   ════════════════════════════════════════════════════════════ */
.vit-whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  width: 56px;
  height: 56px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35), 0 0 0 1px rgba(37, 211, 102, 0.2);
  transition: transform 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
  cursor: pointer;
}
.vit-whatsapp-float:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 0 0 1px rgba(37, 211, 102, 0.3);
}
.vit-whatsapp-float:active {
  transform: scale(0.96);
}
 
@media (max-width: 700px) {
  .vit-whatsapp-float {
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}
 
/* ════════════════════════════════════════════════════════════
   BOTÓN MENÚ + OVERLAY + DRAWER MÓVIL
   (Nota: este bloque estaba duplicado en el archivo original —
   había dos copias idénticas de .vit-btn-menu y .vit-sidebar-overlay.
   Se deja una sola versión, la más completa.)
   ════════════════════════════════════════════════════════════ */
 
.vit-btn-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  color: var(--vtx2);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s var(--ease-apple);
  flex-shrink: 0;
}
.vit-btn-menu:hover {
  background: var(--vag);
  color: var(--vtx);
}
 
.vit-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 350;
}
.vit-sidebar-overlay.activo {
  display: block;
}
 
@media (max-width: 700px) {
  .vit-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 400;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    margin: 0;
    border-radius: 0 18px 18px 0;
    border-right: 1px solid var(--vbor2);
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease-apple);
  }
 
  .vit-sidebar.abierto {
    transform: translateX(0);
  }
 
  .vit-sidebar.cerrado {
    transform: translateX(-100%);
    width: 85%;
    min-width: auto;
    margin-left: 0;
    padding: 4px 0 4px 0;
    opacity: 1;
    border: 1px solid var(--vbor2);
  }
}
 
/* ════════════════════════════════════════════════════════════
   NAVBAR MÓVIL — botón de sesión como ícono (igual que ☰)
   En vez de un drawer nuevo, el propio botón "Iniciar sesión"
   (y el de usuario logueado) se reduce a solo-ícono en pantallas
   angostas, del mismo tamaño y estilo que .vit-btn-menu, para que
   siempre quede visible en el navbar sin agregar nada al DOM.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  #vitrina-root {
    overflow-x: hidden;
  }
  .vit-nav-right {
    flex-shrink: 0;
  }
  .vit-btn-login,
  .vit-usuario-info {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--vbor);
    border-radius: var(--r);
    flex-shrink: 0;
  }
  .vit-btn-login span,
  .vit-usuario-info strong,
  .vit-usuario-info i.ti-chevron-down {
    display: none;
  }
  .vit-btn-login i,
  .vit-usuario-info i.ti-user-circle {
    font-size: 20px;
    color: var(--vtx2);
  }
 
  .vit-usuario-dropdown,
  .vit-login-dropdown {
    right: -8px;
  }
}
/* ════════════════════════════════════════════════════════════
   MENÚ ⋮ DE CADA PRODUCTO EN LA GRILLA (Editar / Eliminar)
   ════════════════════════════════════════════════════════════ */
.vit-card-fila-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}
.vit-card-fila-acciones .vit-btn-carrito {
  flex: 1;
  margin-top: 0;
}
.vit-card-fila-acciones .vit-btn-menu-card {
  flex-shrink: 0;
}
 
.vit-btn-menu-card {
  width: 33px;
  height: 33px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  color: var(--vtx3);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s var(--ease-apple);
}
.vit-btn-menu-card:hover {
  background: var(--vag);
  border-color: var(--vbor2);
  color: var(--va);
}
 
/* ── Dropdown flotante (único, compartido por todas las cards) ── */
#vit-card-menu-dropdown {
  position: fixed;
  min-width: 150px;
  background: var(--vs2);
  border: 1px solid var(--vbor2);
  border-radius: var(--r);
  padding: 6px;
  z-index: 500;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: asomarse 0.15s var(--ease-apple);
}
/* Selector por ID: le gana a la clase genérica .cerrando aunque esta se
   cargue después, así que sin este override el menú nunca cerraba animado. */
#vit-card-menu-dropdown.cerrando {
  animation: despedirse 0.14s var(--ease-apple) forwards;
}
#vit-card-menu-dropdown.oculto { display: none; }
 
.vit-card-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--vtx2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple), color 0.15s var(--ease-apple);
  text-align: left;
}
.vit-card-menu-item:hover { background: var(--vag2); color: var(--vtx); }
.vit-card-menu-item i { color: var(--va); font-size: 15px; flex-shrink: 0; }
.vit-card-menu-item-rojo i { color: var(--vred); }
.vit-card-menu-item-rojo:hover { background: rgba(248,113,113,0.12); color: var(--vred); }
 
.vit-agregarprod-wrapper { position: relative; display: flex; align-items: center; }
 
#modal-agregar-producto.vit-carrito-dropdown {
  width: 420px;
}
 
/* Agenda: más ancho para que la vista Año (3 meses por fila) se lea bien */
#vit-agenda-dropdown.vit-carrito-dropdown {
  width: 440px;
}
@media (max-width: 700px) {
  #vit-agenda-dropdown.vit-carrito-dropdown { width: calc(100vw - 28px); right: -8px; }
}

/* ── Timeline de seguimiento público (estilo Chilexpress) ── */
.vit-seg-bloque + .vit-seg-bloque {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--vbor);
}
.vit-seg-bloque-titulo {
  font-size: 12px; font-weight: 700; color: var(--vtx2);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px;
}
.vit-seg-timeline { display: flex; flex-direction: column; }
.vit-seg-nodo { display: flex; gap: 12px; }
.vit-seg-nodo-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.vit-seg-nodo-circulo {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--vs3); border: 1px solid var(--vbor2);
  color: var(--vtx2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.vit-seg-nodo-activo .vit-seg-nodo-circulo {
  background: var(--va); border-color: var(--va); color: #fff;
}
.vit-seg-nodo-conector { width: 2px; flex: 1; min-height: 22px; background: var(--vbor2); margin: 2px 0; }
.vit-seg-nodo-texto { padding-bottom: 18px; }
.vit-seg-nodo:last-child .vit-seg-nodo-texto { padding-bottom: 0; }
.vit-seg-nodo-fecha { font-size: 11px; color: var(--vtx3); margin-bottom: 2px; }
.vit-seg-nodo-label { font-size: 13px; color: var(--vtx2); }
.vit-seg-nodo-activo .vit-seg-nodo-label { font-weight: 700; color: var(--vtx); }
 
#vit-btn-agenda-nav.activo {
  background: var(--vag2);
  box-shadow: 0 0 0 1px rgba(206,147,216,0.35), 0 0 16px rgba(206,147,216,0.45);
}
#vit-btn-agenda-nav.activo i {
  filter: drop-shadow(0 0 6px rgba(206,147,216,0.8));
}

/* ── Remanentes del wizard de un solo paso (ya no existe para empleados,
   siempre es 2 columnas — ver _moverCarritoAlDropdown en vitrina.js) que
   siguen viviendo en el código y hay que mantener ocultos dentro del
   carrito flotante:
   1) #header-navegacion-carrito: header dinámico (buscar/título de
      paso/basurero/flecha "Siguiente") que carrito.js todavía puede
      llegar a crear si algo dispara mostrarDatosClienteConTransicion()
      (p.ej. la lupa de #carrito-fijo).
   2) El título propio de #carrito-fijo (lupa/"Carrito"/basurero/flecha
      "Datos"): queda redundante con el header "Carrito" externo del
      dropdown, que es el que se usa ahora.
   Los títulos "PERSONA"/"DISPOSITIVO"/"EMPRESA" (los de verdad) NO se
   tocan acá — esos sí deben mostrarse, con su mismo estilo compartido
   (.form-section-title, definida en utilidades.css). ── */
#vit-carrito-drop-completo #header-navegacion-carrito,
#vit-carrito-drop-completo #carrito-fijo > .form-section-title {
  display: none !important;
}