/* ================================================================
   VITRINA PÚBLICA — FixHub v10
   Paleta oscura elegante — sin morado
   ================================================================ */
 
:root {
  --vb:    rgb(20, 20, 20);
  --vs:    #1b1b1b;
  --vs2:   #232323;
  --vs3:   #2e2e2e;
  --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);
  /* ── Texto: cuatro pasos, un rol cada uno ──────────────────────────
     La regla es que cada texto elija su PAPEL, no su tono. Antes había
     tres niveles para cuatro trabajos, así que --vtx3 (el más apagado,
     hecho para placeholders) terminó pintando también subtítulos,
     categorías y fechas: contenido que hay que leer al 30% de opacidad.
     De ahí venía la mezcla de intensidades.

       --txt-titulo   títulos, valores, énfasis
       --txt-cuerpo   texto normal, el que se lee de corrido
       --txt-sub      subtítulos y metadatos (categoría, fecha, "3 de 8")
       --txt-tenue    SOLO placeholder, deshabilitado e iconos decorativos

     Nada de contenido usa --txt-tenue. Si hay que leerlo, es --txt-sub
     como mínimo. ── */
  --txt-titulo: #efefef;
  --txt-cuerpo: rgba(239,239,239,0.70);
  --txt-sub:    rgba(239,239,239,0.45);
  --txt-tenue:  rgba(239,239,239,0.28);

  /* Nombres antiguos. --vtx3 apunta a --txt-sub, NO a --txt-tenue: es el
     que quedó regado por public/modulos y por estilos en línea del JS,
     casi siempre sobre contenido. Apuntándolo al escalón legible, lo que
     todavía no se auditó sale un poco claro de más; apuntándolo al
     tenue, salía ilegible. El que de verdad es placeholder o está
     deshabilitado pide --txt-tenue por su nombre. */
  --vtx:   var(--txt-titulo);
  --vtx2:  var(--txt-cuerpo);
  --vtx3:  var(--txt-sub);

  /* ── Tamaños ───────────────────────────────────────────────────────
     Había 28 tamaños distintos, con medios píxeles (11.5, 12.5, 13.5)
     que no son un escalón sino un ajuste suelto. Estos son los pasos;
     16px es aparte y solo para campos de formulario, porque bajo 16px
     Safari en iOS hace zoom al enfocar un input. ── */
  --fs-2xs: 10px;   /* etiquetas diminutas, contadores */
  --fs-xs:  11px;   /* etiquetas en mayúscula */
  --fs-sm:  12px;   /* metadatos */
  --fs-md:  13px;   /* cuerpo — el tamaño por defecto */
  --fs-lg:  14px;   /* cuerpo destacado, nombres */
  --fs-xl:  15px;   /* subtítulo */
  --fs-2xl: 17px;   /* título de sección */
  --fs-3xl: 20px;   /* título de página */
  --fs-input: 16px; /* solo campos de formulario, ver arriba */

  /* ── Pesos ─────────────────────────────────────────────────────────
     En navegación —la franja de accesos, el menú de usuario, las
     pestañas, la paginación— el peso NO decora: dice cuál está activo.
     En reposo van todos en 400 y el activo en 700. Cada familia elegía
     antes su propio par (600→600, 500→600, 600→nada), así que había
     ítems en reposo más pesados que otros ya activos y el peso no
     significaba nada. El 600 queda para las opciones dentro de un
     desplegable, que no tienen estado activo. ── */
  --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;
  /* Columna: franja de aviso, navbar y contenido, uno debajo del otro,
     con la página ocupando como mínimo la pantalla completa. Antes el
     contenido se estiraba con min-height: calc(100vh - alto del navbar),
     y ese "alto del navbar" era un número que había que MEDIR en
     JavaScript y mantener al día en una variable CSS (--vit-nav-alto):
     si el navbar crecía a dos o tres líneas y la medición llegaba tarde,
     el contenido quedaba con más o menos alto del que en verdad tenía.
     En una columna flex la cuenta la hace el navegador: el navbar ocupa
     lo que ocupa y al contenido le toca el resto, siempre. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
 
/* ════════════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════════════ */
.vit-nav {
  /* sticky (no fixed): sigue reservando su alto real en el flujo normal
     del documento, así que no hace falta ningún padding-top de
     compensación en #vitrina-root ni en nada de lo que viene después —
     eso es justo lo que hacía complicado el diseño "fixed" de antes. */
  position: sticky;
  /* Debajo de la franja de aviso, que también es sticky. La variable la
     escribe _actualizarTopVitpPages (vitp-paginas.js) con su alto real;
     sin aviso vale 0 y el navbar queda pegado arriba como siempre. */
  top: var(--vit-aviso-alto, 0px);
  /* Por ENCIMA de las páginas vitp (250, ver vitp-shell.css). El navbar
     crea su propio contexto de apilamiento, así que todo lo que abre
     hacia abajo —el dropdown de login, el de usuario, carrito, notas,
     pendientes— queda atrapado en ESTE número por más z-index que tenga
     por dentro (todos declaran 300 y no les servía de nada). Con 100,
     cualquier página vitp abierta se los tragaba enteros: en
     /registro-empresa el panel de "Iniciar sesión" se abría detrás de la
     página y no se podía ni ver ni usar.
     Sube hasta acá y no más: los modales y overlays que van por encima
     del navbar (#vit-sidebar-overlay 350, modales 300+, toasts 1000)
     tienen que seguir ganándole. */
  z-index: 260;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  background: var(--vb);
}
.vit-nav.vit-nav-oculto { display: none; }
/* Fila única, arriba de todo, como la barra de menú de macOS: ☰ + logo
   primero (la "manzanita" del extremo izquierdo), después Usuario/Login,
   Agregar/Carrito/Agenda/Notas/Pendientes/WhatsApp en texto plano, y por
   último el buscador — empujado al margen derecho con margin-left:auto
   (ver más abajo). Todos viven en .vit-nav-right ahora; no hay más fila
   aparte para logo/buscador. */
.vit-nav > .vit-nav-right {
  justify-content: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid var(--vbor);
}

/* Barra de filtros activos + orden. Ahora vive DENTRO del navbar (ver
   index.html), debajo de la fila de menú — así queda en la misma capa
   que el resto del navbar, 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 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
  /* margin-top:10px — mismo espacio de separación bajo el navbar que el
     sidebar (ver .vit-layout > .vit-sidebar en vitrina.css), para que
     ambos arranquen a la misma altura. Sticky (mismo criterio que el
     sidebar y el navbar): se queda pegado bajo el navbar al scrollear,
     en vez de irse con el resto de la grilla — top incluye el alto real
     del navbar (--vit-nav-alto, medido en vivo por
     _actualizarTopVitpPages en vitp-paginas.js) + el mismo margen. z-index
     menor al del navbar (100) pero mayor al del sidebar (50), para que
     no quede tapado al cruzarse con este último en pantallas angostas. */
  position: sticky;
  top: calc(var(--vit-nav-alto, 62px) + 10px);
  z-index: 60;
  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; }
/* Los chips de filtros activos se llenan de izquierda a derecha y, cuando
   ya no caben al lado del conteo y del orden, bajan de línea usando el
   ancho completo de la barra.

   Antes era "flex: 1" (base 0), así que este contenedor solo recibía lo
   que sobraba después del conteo y del selector — unos 190px — y los
   chips se apilaban ahí adentro en cuatro líneas mientras el resto de la
   barra quedaba vacío. Con una base de 320px, si no hay ese espacio al
   lado, el bloque entero pasa a su propia línea en vez de estrujarse. */
.vit-filtros-bar-top .vit-filtros-sort { flex: 1 1 320px; min-width: 0; }

/* El conteo y el orden se quedan pegados al borde derecho aunque bajen de
   línea. Con "space-between", una línea con un solo elemento lo deja al
   principio, así que al pasar abajo el selector de orden saltaba a la
   izquierda del todo y quedaba lejos del número al que acompaña. El
   margen automático se come el espacio libre de SU línea y lo empuja a
   la derecha; cuando todo entra en una sola línea no hay espacio libre
   que comer (los chips ya lo ocupan) y esto no cambia nada. */
.vit-filtros-bar-top .vit-count,
.vit-filtros-bar-top .vit-sort-select { margin-left: auto; }

.vit-logo {
  font-size: 20px;
  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 {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0 12px 0 0;
  /* 16px por el token, no 14: bajo 16 Safari en iOS hace zoom al tocar
     el buscador (ver --fs-input arriba). */
  font-size: var(--fs-input);
  color: var(--vtx);
  outline: none;
}
.vit-search::placeholder { color: var(--txt-tenue); }
 
.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 {
  color: var(--va);
  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 {
  color: var(--va);
  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: 4px;
  flex-shrink: 0;
  /* NO overflow-x:auto acá (se probó y se sacó): alcanza con ponerle
     overflow a un eje para que el navegador trate el OTRO eje también
     como "auto" (regla del spec de CSS Overflow), y eso recortaba /
     scrolleaba los dropdowns que se abren adentro de esta fila (Login,
     que a propósito no "escapa" con position:fixed — ver
     toggleLoginDropdown en vitrina.js, por el autocompletado de Safari)
     en vez de dejarlos flotar por encima como corresponde. En una
     ventana muy angosta el contenido puede no entrar en una sola línea
     — se acepta ese caso raro antes que romper el login. */
}

/* Tres grupos dentro de la fila de menú: ☰/logo fijos a la izquierda;
   Agregar producto+buscador+Carrito pegados entre sí (gap chico) y
   centrados COMO BLOQUE en el espacio restante (antes el buscador se
   centraba solo, separado del carrito, dejando un hueco enorme entre
   ambos); Servicio técnico/Notas/Pendientes/WhatsApp/Usuario/Login en
   su propio grupo, pegado al extremo derecho, sin cambios. */
/* Izquierda y derecha son la misma caja; el del medio (abajo) sí es
   distinto, porque es el que se estira. */
.vit-nav-group-left,
.vit-nav-group-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.vit-nav-group-center {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ☰ y logo, ahora dentro de la fila de menú — se achican un poco para
   quedar a tono con el resto (los .vit-nav-menutext miden 30px). */
.vit-nav-group-left > .vit-btn-menu {
  width: 30px;
  height: 30px;
  font-size: 16px;
  flex-shrink: 0;
}
.vit-nav-group-left > .vit-logo {
  font-size: 16px;
  margin-right: 4px;
  flex-shrink: 0;
}

/* Buscador — un ítem más (achicable) dentro de .vit-nav-group-center,
   junto a Agregar producto/Carrito/etc. */
.vit-nav-group-center > .vit-search-wrap {
  width: auto;
  min-width: 200px;
  max-width: 340px;
  height: 30px;
  flex-shrink: 1;
}

/* ── Vuelta al diseño de íconos sueltos (sin texto al lado) para
   Carrito/Servicio técnico/Notas/Pendientes/WhatsApp/Agregar producto/
   Login/Usuario — el texto queda como title/aria-label para
   accesibilidad, pero visualmente solo se ve el ícono, como era antes
   del intento de "barra de Apple" con texto plano. ── */
.vit-nav-right .vit-nav-menutext {
  width: 30px;
  height: 30px;
  gap: 0;
  padding: 0;
  justify-content: center;
  border-radius: var(--r);
  color: var(--vtx2);
  white-space: nowrap;
}
.vit-nav-right .vit-nav-menutext:hover { background: var(--vag); color: var(--vtx); }
.vit-nav-right .vit-nav-menutext i { display: inline-flex; font-size: 17px; }
.vit-nav-right .vit-nav-menutext span:not(.vit-carrito-badge-nav) { display: none; }
.vit-nav-right .vit-nav-menutext .vit-carrito-badge-nav {
  position: absolute;
  top: 1px;
  right: 1px;
  margin-left: 0;
}
/* ── Excepción: Login/Usuario se ven con texto completo ("Iniciar
   sesión" / nombre del usuario), como antes — nunca solo ícono, a
   diferencia del resto de los botones de esta fila. ── */
.vit-nav-right .vit-btn-login,
.vit-nav-right .vit-usuario-info {
  width: auto;
  gap: 8px;
  padding: 0 10px;
}
.vit-nav-right .vit-btn-login span:not(.vit-carrito-badge-nav),
.vit-nav-right .vit-usuario-info strong {
  display: inline;
}

/* ── Excepción: Servicio técnico para visitantes SIN sesión se ve con
   texto completo (llamado a la acción claro, "Servicio técnico"), no
   solo el ícono — es el único botón del navbar pensado también para
   quien no tiene cuenta. Logueado, cuando reaparece en la página
   Agenda como acceso rápido, sí vuelve a ser solo ícono (clase
   .vit-servicio-solo-icono, agregada por JS en _onLoginExitoso/
   _cerrarSesionVitrina, ver vitrina.js). ── */
.vit-nav-right .vit-btn-agenda-nav-texto {
  width: auto;
  gap: 6px;
  padding: 0 10px;
  /* El botón hereda font-size:20px de .vit-btn-carrito-nav (pensado para
     el glyph del ícono, que ya tiene su propio font-size:17px puesto
     aparte) — sin esto el texto "Servicio técnico" salía enorme. Mismo
     tamaño que el resto de los textos del sidebar (.nav-item-pill). */
  font-size: 14px;
}
.vit-nav-right .vit-btn-agenda-nav-texto span:not(.vit-carrito-badge-nav) {
  display: inline;
}

.vit-nav-right .vit-btn-agenda-nav-texto.vit-servicio-solo-icono {
  width: 30px;
  gap: 0;
  padding: 0;
}
.vit-nav-right .vit-btn-agenda-nav-texto.vit-servicio-solo-icono span:not(.vit-carrito-badge-nav) {
  display: none;
}

.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: 400;
  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: 20px; 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);
  font-weight: 700;
}
.vit-btn-login.activo i {
  color: var(--va);
  filter: drop-shadow(0 0 6px rgba(206,147,216,0.8));
}
 
.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 {
  color: var(--va);
  filter: drop-shadow(0 0 6px rgba(206,147,216,0.8));
}
.vit-usuario-info.activo strong { color: var(--va); }
.vit-usuario-info strong { color: var(--vtx); font-weight: 600; transition: color 0.15s var(--ease-apple); }
.vit-usuario-info i { 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 / Login / Usuario: el
     pseudo-elemento vive en el WRAPPER (no en el dropdown) — todos
     estos dropdowns ahora "escapan" del wrapper con
     _escaparDropdownFlotante (vitrina.js) y flotan centrados bajo su
     botón con position:fixed, así que una flecha pegada al propio
     dropdown quedaría descolgada de su botón apenas la centrada la
     corriera. Pegada al wrapper, que no se mueve, siempre apunta bien.
   - 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.
   ════════════════════════════════════════════════════════════ */
.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,
.vit-login-wrapper:has(> .vit-login-dropdown:not(.oculto))::before,
.vit-usuario-wrapper:has(> .vit-usuario-dropdown:not(.oculto))::before,
#modal-scanner-glow::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);
  top: calc(100% + 6px); right: 20px;
  z-index: 301;
}

.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,
.vit-login-wrapper:has(> .vit-login-dropdown:not(.oculto))::after,
.vit-usuario-wrapper:has(> .vit-usuario-dropdown:not(.oculto))::after,
#modal-scanner-glow::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;
  top: calc(100% - 2px); right: 20px;
  z-index: -1;
}


#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): mismo ícono suelto que el resto,
   sin texto al lado ── */
.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 {
  color: var(--va);
  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;
  /* Sin esto, pasar la rueda del mouse sobre una zona del carrito sin
     scroll propio (p.ej. los campos de "Persona") deja que el gesto
     "se escape" hacia la página de atrás — este panel no scrollea nada
     él mismo (overflow:hidden), pero corta la cadena igual. */
  overscroll-behavior: contain;
  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: numerado y horizontal, estilo seguimiento de
   envío (círculo por paso conectado por una línea que se va llenando a
   medida que se avanza; ✓ en los pasos ya completados). Compartido por
   el carrito interno (carrito.js) y el público (carrito-publico.js) vía
   _renderStepsIndicadorCarrito en utilidades.js. ── */
.vit-carrito-steps {
  display: flex;
  align-items: center;
  padding-top: 10px;
}
.vit-carrito-step {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.vit-carrito-step-circ {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: var(--vs3);
  border: 1px solid var(--vbor2);
  color: var(--txt-sub);
  transition: background 0.2s var(--ease-apple), border-color 0.2s var(--ease-apple), color 0.2s var(--ease-apple);
}
.vit-carrito-step-circ i { font-size: 11px; }
.vit-carrito-step.activo .vit-carrito-step-circ {
  background: var(--va);
  border-color: var(--va);
  color: #fff;
}
.vit-carrito-step.hecho .vit-carrito-step-circ {
  background: var(--vgrn);
  border-color: var(--vgrn);
  color: #fff;
}
.vit-carrito-step-linea {
  flex: 1 1 auto;
  height: 2px;
  min-width: 8px;
  margin: 0 4px;
  background: var(--vbor2);
  transition: background 0.2s var(--ease-apple);
}
.vit-carrito-step-linea.hecho { 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); overflow-wrap: anywhere; }
.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(--txt-sub); 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(--txt-sub);
  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(--txt-sub);
  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;
  /* right, no left: el botón de Login vive en el extremo DERECHO de la
     barra de menú — anclado a la izquierda (left:0) el dropdown se salía
     de la pantalla por la derecha. */
  top: calc(100% + 12px); right: 0;
  width: 300px;
  /* Tenía tope vertical pero no horizontal: en una ventana de 280px este
     panel medía 288 y se salía 28px por la izquierda. Va contra
     --ancho-ventana y no contra 100vw, que incluye la barra de scroll
     (ver _publicarAnchoVentana en utilidades.js). */
  max-width: calc(var(--ancho-ventana, 100vw) - 24px);
  /* Tope + scroll propio por si no entra completo en pantallas bajas o
     con zoom — así nunca se corta contra el borde de la ventana. */
  max-height: min(600px, calc(100vh - 96px));
  max-height: min(600px, calc(100dvh - 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
  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(--txt-sub); text-align: center; margin-top: -8px; }

#vit-login-campos { display: flex; flex-direction: column; gap: 14px; }
/* Los campos de contraseña nueva ocupan el mismo lugar del panel: se
   muestran en vez de los de entrar, nunca junto con ellos. */
#vit-reset-campos { display: flex; flex-direction: column; gap: 14px; }
#vit-reset-campos[hidden] { display: none; }
 
.vit-login-dropdown label {
  display: block;
  font-size: 11px; font-weight: 700;
  color: var(--txt-sub);
  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: var(--fs-input); color: var(--vtx);
  outline: none; transition: border-color 0.2s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
}
.vit-login-dropdown input::placeholder { color: var(--txt-tenue); }
 
.vit-modal-error { font-size: 12px; color: var(--vred); text-align: center; min-height: 14px; }
.vit-modal-error.vit-modal-msg-ok { color: #81c784; }

.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; }

/* "Ver catálogo" del Home — reusa .vit-btn-ingresar (mismo look que el
   botón de login) pero más chico y centrado en vez de ancho completo,
   ahora que vive pegado abajo del carrusel de banners en vez de al
   fondo de toda la fila de Dispositivos. */
.fixhub-btn-catalogo {
  width: auto;
  height: 34px;
  padding: 0 24px;
  display: block;
  margin: 16px auto 0;
  font-size: 13px;
}

.vit-link-olvide-clave {
  display: block;
  width: 100%;
  margin-top: 4px;
  background: none;
  border: none;
  color: var(--txt-sub);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s var(--ease-apple);
}
.vit-link-olvide-clave:hover { color: var(--va); text-decoration: underline; }
.vit-link-olvide-clave:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }

/* ════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════ */
.vit-layout {
  display: flex;
  align-items: flex-start;
  /* Se lleva el alto que sobre en la columna de #vitrina-root; ya no hay
     que restarle a mano el alto del navbar. */
  flex: 1 0 auto;
}
.vit-layout.vit-layout-oculto { display: none; }

/* ════════════════════════════════════════════════════════════
   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);
}

/* Solo existe como panel flotante en mobile (ver @media max-width:700px);
   en desktop el sidebar es sticky en el layout normal y no necesita cierre. */
.vit-sidebar-btn-cerrar { display: none; }
 
@media (min-width: 701px) {
  /* Sidebar sticky "de toda la vida": el navbar scrollea con la
     página como cualquier otro contenido, y el sidebar se pega al
     borde de arriba del viewport (no al navbar) apenas este último
     se sale de pantalla. height/max-height/padding/z-index
     compartidos con la variante "suelta" de Registro/Gráficos/Agenda/
     Admin viven en utilidades.css. margin-top:10px = mismo valor que
     "top" (el umbral del sticky): así arranca con ese espacio de
     separación bajo el navbar desde el primer render (no pegado del
     todo), igual que el resto de los sidebars (Registro/Gráficos/
     Agenda/Admin, variante fixed acá abajo). */
  .vit-layout > .vit-sidebar {
    /* "top" tiene que incluir el alto real del navbar (ahora sticky, se
       queda pegado arriba siempre) + el mismo margin-top:10px de acá
       abajo, para que el sidebar arranque pegado justo debajo del
       navbar con el mismo espacio de siempre, sin saltos al hacer
       scroll (ver _actualizarTopVitpPages en vitp-paginas.js, que mide
       el alto real del navbar en vivo). z-index MENOR al del navbar
       (100): si alguna vez llegan a superponerse visualmente, el
       navbar tiene que quedar por encima, nunca tapado por el sidebar.
       Acotado por .vit-layout (el footer vive afuera, como hermano de
       .vit-layout) — nunca puede "pisar" el footer, por más alto que
       sea el contenido: el sticky no puede escapar la caja de su
       contenedor. */
    position: sticky;
    top: calc(var(--vit-nav-alto, 62px) + 10px);
    z-index: 50;
    align-self: flex-start;
    margin: 10px 10px 10px 10px;
  }
}
 
/* ════════════════════════════════════════════════════════════
   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. "+10px": mismo espacio de separación bajo el
       navbar que el sidebar del catálogo (sticky, más arriba, con
       margin-top:10px) — a propósito, no pegado del todo. */
    position: fixed;
    top: calc(var(--vit-nav-alto, 62px) + 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(--txt-sub);
  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 */
/* Las filas de opción de los sidebars de filtros son .sb-opcion
   (utilidades.css), las mismas del admin y de la consola — acá vivía un
   segundo juego con las mismas medidas escritas a mano. Ver
   _htmlOpcionSidebar en utilidades.js. */

/* 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(--txt-sub); 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; }
/* Misma medida que .sb-opcion: las filas de Stock son una
   opción más dentro de su sección, no un título — antes eran más grandes
   y en negrita, y cantaban al lado de los demás filtros del sidebar. */
.vit-toggle-label { font-size: 13px; font-weight: 400; color: var(--vtx2); }
.vit-toggle-sub   { font-size: 11px; color: var(--txt-sub); }
 
.vit-toggle-wrap { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
/* Esconder el checkbox lo hace .chk-dark (utilidades.css), que estaba
   repetido acá con las mismas cuatro propiedades. La clase se queda en el
   marcado igual, porque de ella cuelgan los selectores hermanos de abajo. */
.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); }
 
.vit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.vit-count { font-size: 12px; color: var(--txt-sub); 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; }
/* Chip fijo (ej. "Solo con stock" para un cliente sin sesión) — mismo
   look pero sin X y sin cursor de click, porque no se puede quitar. */
.vit-filtro-sort-tag-bloqueado { cursor: default; padding: 4px 10px; }
.vit-filtro-sort-tag-bloqueado:hover { background: var(--vag); }
 
.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 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(min(175px, 100%), 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(--txt-tenue); }

/* ── Relleno difuminado detrás de la foto ──────────────────────────
   La foto se muestra entera (object-fit: contain), así que una vertical
   deja franjas vacías a los lados y una horizontal arriba y abajo.
   Detrás va la MISMA foto, pero recortada a todo el marco y desenfocada
   —el mismo truco de los videos verticales—: el hueco se llena con los
   colores de la propia foto en vez de un gris plano.

   Son dos <img> con la misma URL: el navegador la descarga UNA vez y la
   pinta dos, así que no cuesta ancho de banda. El de atrás va con
   aria-hidden y alt vacío en el HTML, porque para un lector de pantalla
   sería la misma imagen repetida.

   Se agranda (scale) porque el desenfoque come los bordes: sin eso
   queda un halo claro pegado al marco. */
.vit-foto-fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(16px) saturate(1.3);
  transform: scale(1.3);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
/* Estas dos van SÍ o SÍ con la especificidad de las reglas del marco
   (".vit-card-img img" y ".vit-detalle-img img"), que traen contain y
   padding. Puestas en el bloque de arriba perdían por un pelo y el
   relleno quedaba con la misma forma que la foto, sin llenar nada:
   tiene que recortar (cover) y llegar hasta el borde (sin padding). */
.vit-card-img .vit-foto-fondo,
.vit-detalle-img .vit-foto-fondo {
  object-fit: cover;
  padding: 0;
}

/* La foto de verdad, nítida y por encima del relleno. */
.vit-foto { position: relative; z-index: 1; }

.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: 10px; 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: var(--fs-2xs); font-weight: 500; font-style: italic; text-transform: uppercase; letter-spacing: 0.06em; color: var(--txt-sub); }
/* La categoría es la línea grande de la tarjeta: dice de qué se trata el
   producto ("USB-C a LIGHTNING"), que es lo que el cliente busca. La
   marca y el modelo van chicos al final, como dato. */
.vit-card-categoria { font-size: 14px; font-weight: 500; color: var(--vtx); line-height: 1.35; }
.vit-card-nombre { font-size: 11px; color: var(--txt-sub); }
.vit-card-descripcion {
  font-size: 11px;
  color: var(--txt-sub);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Se deja envolver en varias líneas en vez de cortarse con "…": la lista
   de modelos compatibles es el dato por el que se mira esta línea, y
   media lista no sirve para decidir. */
.vit-card-compat { font-size: 11px; color: var(--txt-sub); line-height: 1.35; overflow-wrap: anywhere; }
 
.vit-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  /* Separación entre el precio y el stock, y permiso para que el stock
     baje de línea. Con space-between y sin gap, en una tarjeta angosta
     (dos por fila en el teléfono) los dos textos se estiran hasta
     tocarse: quedaba "$5.000• 24 en stock" pegado, como si fuera una
     sola cosa. */
  flex-wrap: wrap;
  gap: 2px 10px;
  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(--txt-sub); }
 
.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(--txt-sub); 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(11,11,11,0.45);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  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;
  /* overflow: el relleno difuminado va agrandado y se saldría del marco
     (la grilla ya lo tenía). */
  position: relative; overflow: hidden;
}
.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(--txt-tenue); }

.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(--txt-sub); }
.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(--txt-sub); }
.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; }

/* ── Reparto del stock local por local ──
   Va tanto en la ficha del producto como bajo el campo de stock del
   editor, así que el ancho lo pone quien la contiene. Cada local es una
   pastilla "nombre + número"; el que está en cero se apaga, para que de
   un vistazo se lea dónde HAY sin tener que leer los números. */
.vit-stock-locales {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.vit-stock-locales[hidden] { display: none; }
.vit-stock-locales-titulo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--txt-sub, rgba(255,255,255,.45));
  margin-right: 2px;
}
.vit-stock-local {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--vbor, rgba(255,255,255,.12));
  background: var(--vag2, rgba(255,255,255,.04));
  font-size: 11px;
  line-height: 1.4;
}
.vit-stock-local-nombre { color: var(--txt-sub, rgba(255,255,255,.6)); }
.vit-stock-local-num    { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Cero no es un número más: es "acá no queda". */
.vit-stock-local-vacio  { opacity: .45; }
/* En la tarjeta de la grilla la misma línea va más chica y pegada al
   pie: hay hasta 60 en pantalla y no puede competir con el precio. */
.vit-stock-locales-mini {
  margin-top: 6px;
  gap: 4px;
}
.vit-stock-locales-mini .vit-stock-local {
  padding: 2px 6px;
  font-size: 10px;
  gap: 4px;
}
/* El total cierra la fila y se separa del reparto con el borde lila. */
.vit-stock-local-total {
  border-color: var(--color-accent, #ce93d8);
}
.vit-detalle-acciones { display: flex; flex-direction: column; gap: 8px; }

/* ── Modo página (fixhubtec.com/producto/{codigo}) ──────────────
   Mismo .vit-detalle-modal de siempre (el modal viejo ya no se usa,
   ver _renderPaginaProducto en vitrina.js), pero sin el tratamiento de
   "caja flotante angosta": ocupa el ancho disponible de .vitp-body
   (que ya viene con overflow:hidden, así que el scroll vive acá
   adentro), con más aire para la foto y el texto. */
.vit-detalle-pagina {
  max-width: 900px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border: none;
  border-left: 1px solid var(--vbor2);
  border-right: 1px solid var(--vbor2);
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
.vit-detalle-pagina .vit-detalle-img { height: 380px; }
.vit-detalle-pagina .vit-detalle-body { padding: 32px 40px; }
.vit-detalle-pagina .vit-detalle-nombre { font-size: 24px; }

/* ── Editor de producto como página ────────────────────────────────
   El encuadre lo pone .fx-form-pagina/.fx-form-cols (admin.css), el mismo
   del alta pública de empresa: no tiene sentido que dos formularios
   largos de pantalla completa se vean distinto. Acá solo van las tres
   piezas que esa página no tiene: la fila de la primera sección, con
   Guardar y Limpiar al lado del título. */

/* Título de sección a la izquierda, Guardar y Limpiar a la derecha.
   El <h3> lo pinta .admin-form h3 (admin.css); acá solo se lo reparte
   con los botones. */
.ed-prod-seccion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ed-prod-seccion-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* .admin-form h3 trae un margin-bottom pensado para cuando el título va
   solo en su línea; con los botones al lado el bloque ya separa. */
.ed-prod-seccion h3 { margin-bottom: 0; }

/* Limpiar vacía el formulario entero, así que va en rojo (btn-rojo-bg,
   utilidades.css) — pero más liviano que Guardar: al lado de la acción
   de la pantalla, dos botones gritando compiten.

   Ojo: .btn-sm sola no trae fondo, solo forma y tamaño; sin el
   modificador de color queda con el fondo por defecto del navegador,
   que sobre esta pantalla oscura es un rectángulo blanco. */
.ed-prod-limpiar { font-weight: 400; }

/* ── Cabeza del formulario: campos | fotos ─────────────────────────
   La columna de las fotos se estira hasta donde llega la de los campos
   (align-items por defecto en grid es stretch), así que el hueco de la
   galería crece con ellos y la foto se ve de verdad, en vez de una
   miniatura suelta al final del formulario. */
.ed-prod-cabeza {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ed-prod-campos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ed-prod-fotos { min-width: 0; }
/* El hueco de las fotos ocupa lo que sobra bajo su etiqueta y el
   selector de archivo: por eso el flex:1 y el min-height, que es el
   piso cuando el formulario todavía está vacío. */
.ed-prod-fotos #np-imagen-galeria {
  flex: 1;
  min-height: 120px;
  margin-top: 8px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  background: var(--vs3);
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  /* En una sola línea, desplazándose de lado si hay varias: partiendo en
     varias filas, cada foto vuelve a ser una miniatura chica y se pierde
     justamente el alto que se ganó al ponerlas acá. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
/* Cuadradas y tan altas como la caja, para aprovechar el espacio que
   dejan los cuatro campos de al lado.

   La foto va en posición absoluta a propósito: dejándola en el flujo,
   su tamaño natural (una imagen de producto, cientos de píxeles) pasa a
   ser el alto mínimo de la miniatura, y entonces era la foto la que
   estiraba la fila en vez de encogerse a ella. Fuera del flujo no
   aporta alto, así que la fila la miden los campos, y recién ahí el
   height:100% tiene contra qué resolverse. */
.ed-prod-fotos .np-img-item {
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  flex: 0 0 auto;
}
.ed-prod-fotos .np-img-item img {
  position: absolute;
  inset: 0;
}

@media (max-width: 640px) {
  /* Una debajo de la otra: en un teléfono, media pantalla para cada una
     deja los dos lados inservibles. */
  .ed-prod-cabeza { grid-template-columns: 1fr; }
}

/* ── Repuestos ─────────────────────────────────────────────────────
   La lista y el formulario reusan el armazón de página-formulario
   (.fx-form-*) y la tarjeta de .admin-form; acá solo va lo propio: las
   fichas de la lista y las piezas de cada repuesto. */
.rep-conteo { color: var(--txt-tenue); }
.rep-conteo:not(:empty)::before { content: ' · '; }

.rep-lista { display: flex; flex-direction: column; gap: 10px; }

.rep-vacio {
  padding: 40px 20px;
  text-align: center;
  color: var(--txt-sub);
  font-size: var(--fs-md);
  line-height: 1.6;
}

.rep-card {
  display: flex;
  gap: 14px;
  background: var(--vs);
  border: 1px solid var(--vbor2);
  border-radius: var(--rl);
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-apple);
}
.rep-card:hover { border-color: var(--va); }

.rep-card-foto {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: var(--r);
  background: var(--vs3);
  border: 1px solid var(--vbor);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--txt-tenue);
  font-size: 26px;
  overflow: hidden;
}
.rep-card-foto img { width: 100%; height: 100%; object-fit: cover; }

.rep-card-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rep-card-titulo { font-size: var(--fs-lg); font-weight: 700; color: var(--txt-titulo); }
.rep-card-estado { font-size: var(--fs-sm); color: var(--txt-cuerpo); }
.rep-card-pie {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: var(--fs-xs); color: var(--txt-sub);
}
.rep-card-pie span { display: inline-flex; align-items: center; gap: 4px; }

/* Las piezas, como etiquetas de colores: de un vistazo se ve qué sirve
   todavía y qué ya se sacó, que es lo que uno mira al buscar. */
.rep-piezas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.rep-pieza {
  font-size: var(--fs-2xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid;
}
.rep-pieza-sirve { color: var(--vgrn); border-color: color-mix(in srgb, var(--vgrn) 45%, transparent); }
.rep-pieza-usado { color: var(--va);   border-color: color-mix(in srgb, var(--va) 45%, transparent); }
.rep-pieza-malo  { color: var(--vred); border-color: color-mix(in srgb, var(--vred) 45%, transparent);
                   text-decoration: line-through; }

/* ── Piezas dentro del formulario ── */
.rep-componentes { display: flex; flex-direction: column; gap: 8px; }
.rep-sin-componentes { font-size: var(--fs-sm); color: var(--txt-tenue); padding: 6px 0; }

.rep-componente {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 8px;
}
.rep-componente-nombre { font-size: var(--fs-md); color: var(--txt-titulo); font-weight: 600; }

/* Los atajos: un toque agrega la pieza en vez de escribirla. */
.rep-sugeridos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rep-sugerido {
  background: none;
  border: 1px dashed var(--vbor2);
  border-radius: 20px;
  color: var(--txt-sub);
  font-size: var(--fs-xs);
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.15s var(--ease-apple), border-color 0.15s var(--ease-apple);
}
.rep-sugerido:hover { color: var(--txt-titulo); border-color: var(--va); }

.rep-agregar-pieza { display: flex; gap: 8px; margin-top: 10px; }
.rep-agregar-pieza input { flex: 1; min-width: 0; font-size: var(--fs-input); }

.rep-pie-acciones { display: flex; justify-content: flex-end; margin-top: 18px; }

.ed-prod-fotos #rep-galeria {
  flex: 1;
  min-height: 120px;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding: 10px;
  background: var(--vs3);
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  overflow-y: auto;
}
.ed-prod-fotos #rep-galeria .np-img-item { width: 104px; height: 104px; }

@media (max-width: 640px) {
  /* En un teléfono las cuatro columnas de una pieza dejan el nombre en
     dos letras: se apilan nombre+estado arriba y la nota abajo. */
  .rep-componente { grid-template-columns: minmax(0, 1fr) auto; }
  .rep-componente-nota { grid-column: 1 / -1; }
  .rep-card-foto { width: 64px; height: 64px; }
}

/* .form-row nunca envuelve (utilidades.css). En escritorio la fila de
   tres —Stock / Proveedor / Fecha de compra— entra bien en los 720px de
   la columna, pero en un teléfono deja cada campo en ~110px, y el
   selector de fecha ni siquiera cabe. Se permite el salto solo acá
   dentro: tocar .form-row en general afectaría todos los formularios de
   la aplicación. */
@media (max-width: 640px) {
  #vitp-editor-producto .form-row { flex-wrap: wrap; }
  #vitp-editor-producto .form-group { flex: 1 1 150px; min-width: 0; }
}

.vit-detalle-no-encontrado {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 80px 24px; text-align: center;
}
.vit-detalle-no-encontrado.oculto { display: none; }
.vit-detalle-no-encontrado i { font-size: 48px; color: var(--txt-tenue); }
.vit-detalle-no-encontrado p { font-size: 16px; color: var(--vtx2); margin: 0; }

.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(--txt-sub); 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(--txt-sub); 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; }

  /* La barra de filtros en el teléfono. Con el reparto de escritorio
     quedaba en tres líneas escalonadas: los chips a la izquierda, el
     conteo solo y pegado a la derecha, y el orden solo debajo, también a
     la derecha. Tres renglones para dos datos que se leen juntos
     ("1619 productos, más vendidos").

     Ahora los chips se llevan su línea entera y el conteo y el orden
     comparten la siguiente: el número a la izquierda y el selector a la
     derecha, que es como se leen. Y el borde de la barra se alinea con
     el de las tarjetas (12px, igual que #vit-grid-wrap) — antes tenía
     16px y quedaba un escaloncito contra la grilla. */
  .vit-filtros-bar-top { padding: 8px 12px; margin: 10px 0 12px; gap: 8px 10px; }
  .vit-filtros-bar-top .vit-filtros-sort { flex: 1 1 100%; }
  .vit-filtros-bar-top .vit-count { margin-left: 0; margin-right: auto; }
  .vit-filtros-bar-top .vit-sort-select { margin-left: auto; }

  /* Dos productos por fila, siempre. Con auto-fill + minmax(145px) la
     cuenta se caía a UNA sola columna en cualquier teléfono de 360px o
     menos (dos tarjetas de 145 + 10 de separación + los márgenes no
     entraban), y un catálogo de una tarjeta por pantalla obliga a
     recorrer kilómetros para ver seis productos. Dos entran bien hasta
     en los angostos: minmax(0, 1fr) es lo que deja que la tarjeta se
     achique en vez de desbordar. */
  .vit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Con id, no con clase: el elemento es #vit-grid-wrap y la regla de
     arriba (padding 6px 36px) le gana a cualquier selector de clase por
     especificidad. Escrita como clase, esto no hacía nada y el teléfono
     se quedaba con los 36px de margen a cada lado — que en una pantalla
     de 360px es una quinta parte del ancho tirada a la basura. */
  #vit-grid-wrap { padding: 6px 12px 20px; }
}

/* ── Navbar en 2 filas para pantallas de celular ──
   La fila única (☰+logo | Agregar producto/Servicio técnico+Buscador+
   Carrito | Notas/Pendientes/Impresos/WhatsApp/Usuario) da por hecho
   que todo entra en una línea — en un celular no entra ni cerca. Sin
   esto, .vit-nav-group-center (flex:1, centrado) se achicaba a 0 de
   ancho y sus hijos (buscador, carrito), al seguir centrados alrededor
   de ESE punto cero, terminaban superpuestos sobre el ☰/logo en vez de
   simplemente no entrar.
   Acá el ☰/logo y los íconos de Notas/Pendientes/Impresos/WhatsApp/
   Usuario (ambos angostos, con las excepciones de abajo puestas todas
   en solo-ícono) comparten la primera fila — entran de sobra, con
   margin-left:auto empujando el segundo grupo al extremo derecho vía
   "order" (en el HTML el grupo derecho viene DESPUÉS del buscador/
   carrito, pero acá se reordena para que aparezca ANTES en pantalla).
   El buscador+carrito, que sí necesitan ancho de verdad, quedan solos
   en la segunda fila completa. */
@media (max-width: 640px) {
  .vit-nav-right { flex-wrap: wrap; row-gap: 6px; }
  .vit-nav-group-left  { flex-basis: auto; order: 1; }
  .vit-nav-group-right { flex-basis: auto; order: 2; margin-left: auto; justify-content: flex-end; }
  .vit-nav-group-center { flex-basis: 100%; order: 3; }

  .vit-nav-group-center > .vit-search-wrap {
    flex: 1;
    min-width: 0;
    max-width: none;
  }

  /* Usuario/Login normalmente se ven con texto completo (ver la
     "Excepción" más arriba en este archivo) — pero con 4 íconos más al
     lado en la misma fila, un nombre largo desborda igual que pasaba
     con el buscador. Solo ícono acá; el nombre completo sigue estando
     en el dropdown de todos modos. */
  .vit-nav-right .vit-btn-login,
  .vit-nav-right .vit-usuario-info {
    width: 30px;
    gap: 0;
    padding: 0;
  }
  .vit-nav-right .vit-btn-login span:not(.vit-carrito-badge-nav),
  .vit-nav-right .vit-usuario-info strong,
  .vit-nav-right .vit-usuario-info .ti-chevron-down {
    display: none;
  }

  /* "Servicio técnico" (visitante sin sesión) — mismo criterio: el
     texto ya no entra con todo lo demás en la fila. */
  .vit-nav-right .vit-btn-agenda-nav-texto {
    width: 30px;
    gap: 0;
    padding: 0;
  }
  .vit-nav-right .vit-btn-agenda-nav-texto span:not(.vit-carrito-badge-nav) {
    display: none;
  }
}

 
/* ════════════════════════════════════════════════════════════
   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(--txt-sub); padding: 0 4px; }
 
/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */

 
 

/* Antes vivía sobre el banner del Home (sel-emp-hero-pais en
   selector-empresas.css) — se movió acá para que se vea en cualquier
   página del sitio, no solo al entrar (mismo motivo que las reseñas
   de Google, ver arriba en el footer). Franja de ancho completo al
   pie de las 3 columnas, con cada bandera en un extremo. */
/* ── Seguimiento, dentro de su desplegable ────────────────────────────
   Encabezado propio y, debajo, el buscador prestado del dropdown de
   Repara aquí (ver abrirSeguimientoDesdeAcceso en vitrina.js). Ese cuerpo
   ya trae su alto máximo y su scroll de origen, así que acá no hay que
   agregarle nada: es un desplegable dentro de otro desplegable.

   Es más ancho que los otros tres accesos porque adentro va un buscador
   con resultados y una línea de tiempo, no dos renglones de texto. */
.vit-acceso-menu-seguimiento {
  min-width: 380px;
  max-width: min(380px, calc(100vw - 24px));
  padding: 10px;
  /* El acceso que abre este menú centra su texto y el buscador prestado
     lo heredaba: las etiquetas RUT y CÓDIGO DE COMPROBANTE salían
     centradas sobre campos alineados a la izquierda. La de RUT parecía
     bien solo porque su texto llenaba el ancho. */
  text-align: left;
}
.vit-seg-cabecera {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 2px 0;
}
.vit-seg-limpiar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: transparent;
  border: 1px solid var(--vbor2);
  border-radius: var(--r);
  color: var(--txt-sub);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s var(--ease-apple), border-color 0.15s var(--ease-apple);
}
.vit-seg-limpiar:hover { color: var(--color-rojo-suave); border-color: var(--color-rojo-suave); }

/* ── Accesos rápidos del Home, arriba del banner ─────────────────
   Cuatro columnas con el ícono arriba y separadores finos entre ellas,
   el mismo formato que ya se usa en tiendas del rubro. Los mismos cuatro
   están en el pie: acá para el que recién entra, allá para el que llegó
   hasta abajo.

   Dos de ellos abren un menú en vez de navegar, porque tienen dos
   destinos cada uno. */
.vit-accesos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--vbor);
  margin-bottom: 4px;
}
.vit-acceso-wrap { position: relative; display: flex; }
.vit-acceso {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centrado vertical: el alto de la fila lo fija "Términos y privacidad",
     que cae en dos renglones en una columna de ~160px. Sin esto los otros
     tres apoyaban su contenido arriba y les quedaban 20px muertos abajo —
     se veían pegados al borde de arriba y sueltos abajo. */
  justify-content: center;
  /* Compacta a propósito: la franja es lo primero arriba del banner y no
     debe robarle protagonismo. Los 20px que se recuperaron al centrar
     pagan casi todo este aire entre el ícono y el texto. */
  gap: 8px;
  padding: 5px 10px;
  background: transparent;
  border: none;
  /* Mismo nivel de cuerpo que el contenido de sus menús, y sin negrita:
     son rótulos de navegación, no titulares. En 100% y 700 competían con
     el banner que tienen justo debajo. El lila de .abierto sigue siendo
     lo que marca cuál está desplegado. */
  color: var(--txt-cuerpo);
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background 0.18s var(--ease-apple), color 0.18s var(--ease-apple);
}
/* La línea divisoria va en el borde izquierdo de cada uno menos el
   primero. Se apoya en el wrapper cuando lo hay, así los cuatro quedan
   separados igual tengan menú o no. */
.vit-accesos > *:not(:first-child) .vit-acceso::before,
.vit-accesos > .vit-acceso:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  height: 56%;
  width: 1px;
  background: var(--vbor2);
}
.vit-acceso:hover { background: rgba(255,255,255,0.03); }
/* Mientras su menú está abierto, el acceso queda marcado. No es adorno:
   con cuatro menús que se abren en el mismo lugar, es lo que dice cuál de
   ellos estás mirando. Sube de nivel en la misma rampa —a blanco y
   negrita— en vez de cambiar de color: el lila ya es el de los íconos y
   el del acento, y ahí no distinguía "abierto" de "decorativo". */
.vit-acceso.abierto { color: var(--txt-titulo); font-weight: 700; background: rgba(255,255,255,0.04); }

/* Los cuatro entran escalonados al cargar el Home. Va en el contenedor y
   no en cada uno para que el orden salga del propio marcado: si mañana se
   agrega un quinto acceso, entra solo en su turno.
   "backwards" mantiene el estado inicial durante el retraso — sin eso los
   cuatro se ven un instante antes de empezar a animarse. */
@keyframes accesoEntrar {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vit-accesos > * { animation: accesoEntrar 0.38s var(--ease-apple) backwards; }
.vit-accesos > *:nth-child(1) { animation-delay: 0.05s; }
.vit-accesos > *:nth-child(2) { animation-delay: 0.11s; }
.vit-accesos > *:nth-child(3) { animation-delay: 0.17s; }
.vit-accesos > *:nth-child(4) { animation-delay: 0.23s; }
.vit-accesos > *:nth-child(5) { animation-delay: 0.29s; }
.vit-acceso svg {
  width: 22px;
  height: 22px;
  stroke: var(--va);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--ease-apple);
}
.vit-acceso:hover svg { transform: translateY(-3px) scale(1.06); }

/* El menú de los que tienen dos destinos. Mismo fondo y borde que
   cualquier desplegable de la vitrina. */
.vit-acceso-menu {
  position: absolute;
  top: calc(100% - 6px);
  /* El menú es más ancho que su columna, así que se centra con
     translateX(-50%) — "margin: auto" no sirve acá: cuando la caja no
     entra en su contenedor, la spec resuelve los márgenes automáticos a
     0 y la deja desbordando hacia un solo lado.
     Y como el centrado vive en "transform", la animación de entrada NO
     puede ser la de siempre (asomarse anima transform y lo pisaría: el
     menú aparecía corrido media caja a la derecha y saltaba a su lugar
     al terminar). Por eso abajo usa asomarseCentrado, la misma animación
     pero arrastrando el -50%. */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 92vw;
  z-index: 120;
  min-width: 230px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--vs);
  border: 1px solid var(--vbor2);
  border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  animation: asomarseCentrado 0.15s var(--ease-apple);
}
/* Igual que "asomarse" (utilidades.css) pero conservando el
   translateX(-50%) del centrado en los dos extremos. */
@keyframes asomarseCentrado {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
/* El primero de la fila se sale por la izquierda si se centra sobre su
   columna (el menú es más ancho que ella y la columna empieza en el borde
   de la pantalla), así que ese se alinea a la izquierda. Como deja de
   depender de transform, vuelve a la animación de siempre.
   El último se alinearía a la derecha por el mismo motivo, pero hoy no
   tiene menú — se deja la regla igual, para que no aparezca el problema
   si mañana lo tiene. */
.vit-accesos > .vit-acceso-wrap:first-child .vit-acceso-menu {
  left: 0;
  transform: none;
  animation-name: asomarse;
  /* El origen va en la esquina anclada: asomarse entra con scale(0.96), y
     encogiendo desde el centro el borde izquierdo se corría ~5px y volvía.
     Es el mismo temblor de antes, más chico. */
  transform-origin: top left;
}
.vit-accesos > .vit-acceso-wrap:last-child .vit-acceso-menu {
  left: auto;
  right: 0;
  transform: none;
  animation-name: asomarse;
  transform-origin: top right;
}
.vit-acceso-menu.oculto { display: none; }
.vit-acceso-menu > button {
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple), color 0.15s var(--ease-apple);
}
.vit-acceso-menu > button:hover { background: var(--vag); color: var(--vtx); }
/* El menú de "Dónde estamos" lleva las redes arriba y después horario y
   dirección, en el mismo orden que la columna del pie de la que sale. */
.vit-acceso-menu-donde { min-width: 250px; }
.vit-acceso-redes {
  display: flex;
  gap: 8px;
  padding: 6px 10px 10px;
  border-bottom: 1px solid var(--vbor);
  margin-bottom: 4px;
}
.vit-acceso-redes .vit-red { margin: 0; }

/* Pagos no navega a ningún lado: informa qué medios se aceptan. */
.vit-acceso-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  text-align: left;
}
/* Los cuatro desplegables de la franja comparten DOS niveles y nada más:
   la línea primaria (una opción de Términos, el nombre de un medio de
   pago, el encabezado de Seguimiento) y la secundaria que la explica.
   "Webpay o tarjeta" estaba en --txt-titulo mientras "Términos de
   servicio", que es lo mismo un renglón más allá, estaba en
   --txt-cuerpo: dos niveles para la misma jerarquía en menús vecinos. */
.vit-acceso-menu > button,
.vit-acceso-info strong {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--txt-cuerpo);
}
.vit-acceso-info span {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--txt-sub);
  line-height: 1.35;
}

/* El horario y la dirección de "Dónde estamos" no son título+subtítulo
   como los medios de pago: son contenido, del mismo peso que "Términos
   de servicio" en el menú de al lado. Se igualan a ese botón (13px,
   --txt-cuerpo) en vez de heredar el escalón de metadato de arriba, que
   los dejaba al 30% de opacidad y un punto y medio más chicos. El span
   se nombra explícito porque la regla de arriba apunta a los spans
   directamente y le gana al color del contenedor. */
.vit-acceso-menu-donde .vit-acceso-info,
.vit-acceso-menu-donde .vit-acceso-info span {
  font-size: var(--fs-md);
  color: var(--txt-cuerpo);
  line-height: 1.4;
}

/* En pantallas angostas cuatro columnas dejan el texto en tres renglones:
   pasan a dos filas de dos. */
/* Quien pidió menos movimiento ve la franja puesta, sin entrada. */
@media (prefers-reduced-motion: reduce) {
  .vit-accesos > * { animation: none; }
}

@media (max-width: 640px) {
  .vit-accesos { grid-template-columns: repeat(2, 1fr); }

  /* Con dos columnas, :first-child/:last-child dejan de servir para saber
     quién está pegado a un borde: esos selectores son orden del DOM, y acá
     el 2º queda al borde DERECHO de la primera fila y el 3º al borde
     IZQUIERDO de la segunda. Centrados sobre su columna se salían de la
     pantalla — Pagos 35px por la izquierda y Términos 8px por la derecha.
     Acá manda la columna, no el orden: impares a la izquierda, pares a la
     derecha. Como dejan de depender de transform, vuelven a la animación
     de siempre, con el origen en la esquina anclada. */
  /* El menú se mide contra la FRANJA, no contra la ventana. Con
     "max-width: calc(100vw - 20px)" seguía desbordando: 100vw incluye la
     barra de scroll, así que en una ventana de 280px con 11px de barra el
     área visible es 269px y el menú se pasaba justo por esos 11px.
     Anclándolo a la franja el ancho disponible es el real, sin depender
     de si hay barra ni de cuánto mide. Para eso la franja pasa a ser el
     bloque contenedor: el wrap deja de estar posicionado. */
  .vit-accesos { position: relative; }
  .vit-acceso-wrap { position: static; }

  .vit-acceso-menu,
  .vit-acceso-menu-seguimiento {
    min-width: 0;
    max-width: calc(100% - 16px);
    /* Ahora "top: 100%" es el alto de la franja entera: el menú cae bajo
       las dos filas en vez de taparle la de abajo a los de arriba. */
    top: calc(100% + 2px);
  }
  .vit-accesos > .vit-acceso-wrap:nth-child(odd) .vit-acceso-menu {
    left: 8px;
    right: auto;
    transform: none;
    animation-name: asomarse;
    transform-origin: top left;
  }
  .vit-accesos > .vit-acceso-wrap:nth-child(even) .vit-acceso-menu {
    left: auto;
    right: 8px;
    transform: none;
    animation-name: asomarse;
    transform-origin: top right;
  }
  .vit-acceso { padding: 6px 8px; gap: 6px; font-size: 13px; }
  .vit-acceso svg { width: 20px; height: 20px; }
  /* Con dos columnas la divisoria del tercero sobra: es el primero de su
     fila. */
  .vit-accesos > *:nth-child(3) .vit-acceso::before,
  .vit-accesos > .vit-acceso:nth-child(3)::before { display: none; }
}

/* El pie completo se borró: repetía Términos, Privacidad y los datos de
   contacto que ya están en la franja de accesos, arriba de la portada.
   Estas son las redes de esa franja, lo único que sobrevivió de él. */
 
.vit-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-red svg {
  width: 100%;
  height: 100%;
  padding: 7px;
  box-sizing: border-box;
  display: block;
  margin: auto;
}
 
.vit-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-carrito-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11,11,11,0.45);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.vit-carrito-modal-overlay.oculto { display: none; }
 
.vit-carrito-modal {
  background: var(--color-bg-panel);
  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-drop-completo {
  padding: 14px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  /* Hijo flex de .vit-carrito-dropdown (column, max-height:80vh,
     overflow:hidden): sin min-height:0 se niega a achicarse por debajo
     de su propio contenido (default min-height:auto), así que en vez de
     activar SU overflow-y:auto, empujaba al padre más allá de su
     max-height — y como el padre recorta con overflow:hidden (no
     scroll), todo lo que quedaba abajo (Documento Tributario, lista de
     productos, Total) quedaba cortado sin forma de llegar ahí. Se nota
     sobre todo en mobile, con .vit-carrito-2col pasado a 1 columna
     (mucho más contenido apilado que en desktop). */
  min-height: 0;
}
 
/* ── 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;
}
/* Dentro del carrito manda la columna, no los envoltorios de adentro.
   #formulario-scroll trae .scroll-area (overflow-y:auto), pensado para el
   panel donde él era el que scrolleaba. Movido acá crece a su alto real,
   así que no desborda y no scrollea nada — pero al seguir siendo
   contenedor de scroll se tragaba la rueda, y el "contain" heredado
   impedía que el gesto llegara a la columna que sí podía moverse. Ese es
   el motivo de que el carrito solo scrolleara con el puntero justo sobre
   su barra. Lo mismo para #carrito-fijo, que viene del mismo panel. */
.vit-carrito-col #formulario-scroll,
.vit-carrito-col #carrito-fijo {
  overflow: visible;
  overscroll-behavior: auto;
  max-height: none;
}

.vit-carrito-col {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 16px;
  max-height: 70vh;
  overflow-y: auto;
  /* SIN overscroll-behavior: contain. Una columna cuyo contenido cabe
     sigue siendo contenedor de scroll, y con "contain" se tragaba la
     rueda sin mover nada ni dejarla pasar al padre: el carrito solo
     scrolleaba con el puntero justo encima de su barra. El corte de la
     cadena hacia la página de atrás ya lo hacen el propio dropdown y
     #vit-carrito-drop-completo, que sí tienen "contain". */
}
/* 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-col-izq/-der traen flex:0.85/1.15 pensado para
       repartir ANCHO en modo fila (desktop) — en columna (acá, mobile),
       ese mismo flex reparte ALTURA por partes según esas proporciones
       en vez de dejar que cada columna crezca a su alto real. Quedaban
       apretadas a una fracción fija del alto disponible y el resto del
       contenido (Documento Tributario, lista de productos, Total) se
       recortaba sin scroll posible. flex:none con height:auto deja que
       cada una mida lo que su contenido necesita; .vit-carrito-drop-
       completo (flex-direction:column, overflow-y:auto, min-height:0)
       es quien scrollea si la suma de las dos no entra. */
    flex: none;
    height: auto;
    /* Y dejan de ser contenedores de scroll. Seguían con overflow-y:auto
       y overscroll-behavior:contain heredados del modo escritorio: acá
       no tienen nada propio que scrollear (max-height:none), pero al ser
       contenedores igual se tragaban la rueda y "contain" impedía que el
       gesto pasara al padre. Resultado: el carrito no scrolleaba con la
       rueda aunque .vit-carrito-drop-completo sí podía hacerlo. */
    overflow: visible;
  }
}
 
/* .form-section trae caja y separación propias (utilidades.css); dentro
   del carrito no van, lo mismo en su versión modal que en la desplegable. */
.vit-carrito-modal-body .form-section,
.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: 400;
  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-item.activo {
  background: var(--vag2);
  color: var(--va);
  font-weight: 700;
}
.vit-menu-item.activo i { filter: drop-shadow(0 0 6px rgba(206,147,216,0.6)); }
 
.vit-menu-sep {
  height: 1px;
  background: var(--vbor);
  margin: 6px 4px;
}

/* Selector de sucursal del menú de usuario. No es un ítem de navegación
   —no lleva a ninguna página— así que se ve distinto a propósito: una
   etiqueta chica arriba y el select debajo, como un ajuste. Solo
   aparece cuando el negocio tiene más de un local. */
.vit-menu-sucursal {
  padding: 8px 12px 10px;
}
.vit-menu-sucursal label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vtx3);
  margin-bottom: 6px;
}
.vit-menu-sucursal label i { color: var(--va); font-size: 13px; }
.vit-menu-sucursal select {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--r);
  border: 1px solid var(--vbor);
  background: var(--vag2);
  color: var(--vtx);
  font-size: 13px;
  cursor: pointer;
}
/* El mismo lugar y el mismo peso visual que el desplegable, pero sin
   flecha ni cursor de mano: es información, no una elección. */
/* El display de acá le gana al "display:none" que el navegador le pone
   a [hidden] (una regla de autor siempre pisa la del navegador), así que
   al administrador —que sí ve el desplegable— le quedaba además esta
   caja vacía debajo. Hay que apagarla a mano. */
.vit-menu-sucursal-fija[hidden] {
  display: none;
}
.vit-menu-sucursal-fija {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 8px;
  border-radius: var(--r);
  border: 1px solid var(--vbor);
  background: var(--vag2);
  color: var(--vtx);
  font-size: 13px;
}

/* Marca permanente de que se está administrando el sistema y no el
   taller propio: una franja fina arriba de todo. Sin esto, las dos
   páginas se parecen lo bastante como para confundirlas. */
body.modo-consola::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--va), var(--color-azul, #64b5f6));
  z-index: 9999;
  pointer-events: none;
}
 
/* ════════════════════════════════════════════════════════════
   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(11,11,11,0.35);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  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;
    /* 100vh en iOS es la ventana CON la barra del navegador escondida,
       así que un cajón de alto completo se corta por abajo detrás de esa
       barra. dvh es el alto real de ahora; la línea de vh queda como
       respaldo para navegadores viejos. */
    height: 100vh;
    height: 100dvh;
    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-btn-cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--vbor);
    background: var(--vs2);
    color: var(--txt-sub);
    font-size: 16px;
    cursor: pointer;
    z-index: 1;
  }
  .vit-sidebar-btn-cerrar:hover { color: var(--vtx); border-color: var(--vbor2); }
 
  .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
   ════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  #vitrina-root {
    /* Esto está para que nada desborde a lo ancho en el teléfono, pero
       "overflow-x: hidden" arrastra un efecto que no se ve venir: por
       spec, fijar UN eje en hidden fuerza el otro a "auto". Eso convierte
       a #vitrina-root en contenedor de scroll, y un contenedor de scroll
       se vuelve el contexto de todos los position:sticky que tenga
       adentro. Como el que scrollea de verdad es <html> y no él, la cinta
       morada y el navbar dejaban de pegarse: medido, al bajar 500px se
       iban a -500 y -306. En escritorio esta regla no aplica, por eso
       ahí siempre funcionó.

       "clip" recorta igual pero NO crea contenedor de scroll: overflow-y
       se queda en visible y el sticky vuelve a funcionar. Verificado en
       la página real: con hidden el aviso terminaba en -500, con clip se
       queda en 0.

       El "hidden" queda arriba como respaldo para navegadores que no
       entiendan clip: ahí se pierde el sticky, pero no el recorte. */
    overflow-x: hidden;
    overflow-x: clip;
  }
  .vit-nav-right {
    flex-shrink: 0;
  }
  .vit-usuario-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;
  /* La fila también es hija de un flex (el cuerpo de la tarjeta), así que
     ella misma tampoco baja de lo que mide su contenido si no se le dice.
     Sin esto, achicar el botón de adentro no servía de nada: la fila
     seguía siendo más ancha que la tarjeta.

     Y con permiso para envolver: si ni achicándose entran los dos (una
     pantalla muy angosta), el ⋮ baja a la línea siguiente. Es mejor que
     la alternativa, que era un botón "Agregar" de 14px con el texto
     recortado a nada. */
  min-width: 0;
  flex-wrap: wrap;
}
.vit-card-fila-acciones .vit-btn-carrito {
  flex: 1;
  /* min-width:0 o el botón NO baja de lo que mide su contenido ("🛒
     Agregar"): con el ⋮ al lado, la fila terminaba más ancha que la
     tarjeta y, como se alinea a la derecha, lo que sobraba se salía por
     la IZQUIERDA — el botón quedaba cortado contra el borde. Ahora se
     achica, y si el espacio es muy poco el texto se recorta en vez de
     desbordar. */
  /* Baja hasta 76px —lo que mide "Agregar" con su carrito— y de ahí no
     más: por debajo, el texto no se lee y el botón deja de decir qué
     hace. Si no alcanza ni eso, la fila envuelve (ver arriba). */
  min-width: 76px;
  margin-top: 0;
  padding: 0 6px;
  overflow: hidden;
}
.vit-card-fila-acciones .vit-btn-carrito span,
.vit-card-fila-acciones .vit-btn-carrito {
  white-space: nowrap;
}
.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(--txt-sub);
  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) ── */
/* 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-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;
}
@media (max-width: 700px) {
  #modal-agregar-producto.vit-carrito-dropdown { width: calc(100vw - 28px); right: -8px; }
}

/* 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(--txt-sub); 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 {
  color: var(--va);
  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;
}

/* ── Página legal (Política de Privacidad) dentro del catálogo de la
   empresa — se activa con ?pagina=privacidad mientras haya un
   ?empresa= en la URL (ver _iniciarPaginaLegal en vitrina.js). Oculta
   la grilla/sidebar (.vit-layout) y muestra esto en su lugar. ── */
.vit-pagina-legal.oculto { display: none; }
.vit-pagina-legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  color: var(--vtx2);
  line-height: 1.6;
}
.vit-pagina-legal-logo { margin-bottom: 24px; }
.vit-pagina-legal h1 {
  font-size: 24px;
  color: var(--vtx);
  border-bottom: 1px solid var(--vbor);
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.vit-pagina-legal h2 {
  font-size: 17px;
  color: var(--va);
  margin-top: 28px;
}
.vit-pagina-legal p { margin: 10px 0; }
.vit-pagina-legal ul { padding-left: 20px; margin: 10px 0; }
.vit-pagina-legal li { margin: 4px 0; }
.vit-pagina-legal strong { color: var(--vtx); }
.vit-pagina-legal a,
.vit-pagina-legal a:visited { color: var(--vtx); font-weight: 700; text-decoration: none; }

/* ── Franja de aviso superior ──────────────────────────────────────
   Va arriba de todo, sobre el navbar, de borde a borde. El color de
   fondo lo pone _pintarAvisoHome inline (viene de Admin > Portada), así
   que acá no se define: solo la forma. */
.vit-aviso-home {
  width: 100%;
  /* Tres partes: bandera, aviso al centro, bandera. El centro se lleva el
     espacio sobrante para que el texto quede centrado en la franja y no
     corrido por el ancho de una bandera. */
  display: flex;
  align-items: center;
  gap: 10px;
  /* Franja deliberadamente baja: 4px arriba y abajo más un interlineado
     de 1.3 dan ~25px de alto, un 30% menos que los ~36px que ocupaba
     antes. Es un aviso, no debe robarle altura al contenido. */
  padding: 4px 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  /* Se queda pegada arriba junto con el navbar. Antes era relative: al
     bajar se iba con el contenido y quedaba solo el navbar, que sí es
     sticky. El navbar arranca justo debajo (ver .vit-nav top), con el
     alto real de esta franja medido en vivo, porque el texto del aviso
     puede envolver a dos líneas.
     z-index por encima del navbar: si no, al pegarse los dos, el navbar
     le pasaba por arriba. */
  position: sticky;
  top: 0;
  z-index: 300;
}
.vit-aviso-home.oculto { display: none; }
.vit-aviso-texto { flex: 1; min-width: 0; }
.vit-aviso-bandera {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
}
.vit-aviso-home a {
  color: #fff;
  text-decoration: none;
}
/* Sin subrayado fijo, el hover es lo único que delata que es clickeable
   — por eso acá sí aparece, en vez de solo bajarle la opacidad. */
.vit-aviso-home a:hover {
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Selector de taller en el menú de usuario ──
   Va arriba del selector de local: primero de quién es el negocio,
   después en qué sucursal de ese negocio. Solo aparece para quien
   trabaja en más de uno. */
.vit-menu-empresas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 8px 10px;
  border-bottom: 1px solid var(--vbor);
}
.vit-menu-titulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--txt-sub);
  padding: 2px 8px 6px;
}
.vit-menu-empresa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.vit-menu-empresa-rol {
  font-size: 11px;
  color: var(--txt-sub);
  text-transform: lowercase;
}
/* El taller donde ya estás: marcado, no clickeable. */
.vit-menu-empresa.activo {
  background: var(--vag2);
  color: var(--va);
}
.vit-menu-empresa:disabled {
  opacity: 0.5;
  cursor: default;
}

/* La fila del taller donde estás: el nombre ocupa lo suyo y los tres
   puntitos quedan al borde. */
.vit-menu-empresa-fila {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.vit-menu-empresa-fila .vit-menu-empresa {
  flex: 1;
  min-width: 0;
}
.vit-menu-empresa-mas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--txt-sub);
  cursor: pointer;
  font-size: 16px;
}
.vit-menu-empresa-mas:hover {
  background: var(--vag2);
  color: var(--vtx);
}
/* Lo compartido está en .fx-menu-anclado (utilidades.css): cuelga debajo
   de los puntitos en vez de empujar las filas de abajo, igual que el
   resto de los menús del sitio. */
.vit-menu-empresa-acciones {
  background: var(--vs2);
  min-width: 160px;
  z-index: 30;
}
.vit-menu-empresa-acciones .vit-menu-salir-taller {
  white-space: nowrap;
}
/* No hay un .oculto general en el sitio: cada componente declara el suyo.
   Sin esto, "Salir del taller" se veía siempre y los puntitos no servían
   de nada. */
.vit-menu-empresas.oculto,
.vit-menu-empresa-acciones.oculto {
  display: none;
}
/* "Salir del taller": en rojo, para que no se confunda con las filas de
   arriba, que son para cambiarse. */
.vit-menu-salir-taller {
  color: var(--vred);
  margin-top: 2px;
}


/* ── Los botones de la tarjeta en el teléfono ──────────────────────
   Con dos tarjetas por fila, "Agregar" y el ⋮ comparten unos 90px. Este
   bloque va al FINAL del archivo a propósito: las reglas de
   .vit-card-fila-acciones se definen más arriba y, con la misma
   especificidad, gana la última — puesto antes, esto no hacía nada (el
   ⋮ seguía bajándose de línea). */
@media (max-width: 700px) {
  .vit-card-fila-acciones { gap: 4px; }
  .vit-card-fila-acciones .vit-btn-carrito {
    /* 56px es el piso: por debajo, "Agregar" empieza a recortarse. */
    min-width: 56px;
    height: 30px;
    font-size: 11px;
    padding: 0 6px;
  }
  .vit-card-fila-acciones .vit-btn-menu-card {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
}

/* Y en las pantallas más angostas, el carrito del botón sobra: entre el
   dibujito y la palabra, la palabra es la que dice qué hace. Sacándolo
   entran los dos botones en la misma línea incluso ahí. */
@media (max-width: 360px) {
  .vit-card-fila-acciones .vit-btn-carrito i { display: none; }
  .vit-card-fila-acciones .vit-btn-carrito { gap: 0; }
}