/* ════════════════════════════════════════════════════════════════
   AYO — MARKETPLACE (rediseño del índice /ayo)
   Origen: artifact "AyoStore" (sistema de diseño), propuesta en
   project/guidelines/10-propuesta-rediseno.md. Tokens y componentes
   (.ay-*) tomados tal cual del sistema (tokens.css + bundle.css);
   solo se agregó lo que el sistema no cubre (dropdowns de filtro,
   popover de precio) y el retinte del navbar compartido, ambos
   marcados abajo. Scope: index de /ayo y la fila de búsqueda/filtros de la
   tienda del vendedor (`.ayo-store-filters`, /ayo/tienda — la hoja se carga
   en esa ruta desde el layout); el resto de /ayo sigue usando style.css y su
   sidebar sin tocar.
   ════════════════════════════════════════════════════════════════ */

/* ── Tokens (tema oscuro — único tema que usa la app hoy) ───────────
   `.ayo-store-filters` (fila de búsqueda/filtros de la tienda del
   vendedor) entra en el scope porque esta hoja también se carga en
   /ayo/tienda (layout: $isStore) y ahí no existe `.ay-vista` — sin la
   declaración, var(--superficie-alta) y el resto quedarían undefined y
   el buscador saldría transparente. Los componentes .ay-* de la tienda
   viven dentro de ese form, así que heredan los tokens. */
.ay-vista, .ayo-navbar.is-market, .ayo-store-filters {
  --fondo: #11283b;
  --superficie: #193249;
  --superficie-alta: #234159;
  --borde: #2f4b66;
  --borde-control: #6b88a6;
  --tinta: #eef3f9;
  --tinta-suave: #b9c7d8;
  --tinta-tenue: #9fb3c9;
  --acento: #fa6b92;
  --sobre-acento: #11283b;
  --acento-texto: #ff8fb0;
  --acento-intenso: #d753a7;
  --acento-calido: #ff9370;
  --logo-fondo: #263745;
  --exito-fondo: #17482b;
  --exito-tinta: #9be8b4;
  --aviso-fondo: #5a3a0a;
  --aviso-tinta: #fcd07a;
  --cond-nuevo: #4ade80;
  --cond-como-nuevo: #2dd4bf;
  --cond-seminuevo: #fbbf24;
  --cond-usado: #a3b4c8;
  --whatsapp: #25d366;
  --sobre-whatsapp: #0b2a17;
  --flotante: rgba(17,40,59,0.88);
  --foco: #7dd3fc;
  --sombra-reposo: 0 1px 2px rgba(4,12,20,0.30), 0 4px 12px rgba(4,12,20,0.18);
  --sombra-elevada: 0 2px 4px rgba(4,12,20,0.35), 0 12px 28px rgba(4,12,20,0.35);
  --sombra-flotante: 0 6px 20px rgba(4,12,20,0.45);
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 20px;
  --espacio-6: 24px;
  --espacio-8: 32px;
  --espacio-10: 40px;
  --espacio-12: 48px;
  --radio-xs: 6px;
  --radio-md: 14px;
  --radio-lg: 20px;
  --radio-pildora: 999px;
  --alto-barra: 68px;
  --alto-control: 44px;
  --alto-chip: 40px;
  --alto-filtro: 36px;
  --columna-min: 208px;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Modo claro (mejoras 34, extendido a navbar/sidebar en mejoras 35) ──
   Mismo grupo de selectores que la declaración oscura de arriba
   (`.ay-vista, .ayo-navbar.is-market`) — `.ay-vista` es ancestro tanto de
   `.ay-lateral` (sidebar) como de `.ay-contenido`, así que redefinir acá
   cambia todo el índice junto: navbar, sidebar y contenido.
   `--acento`/`--logo-fondo`/`--whatsapp`/`--flotante`/`--cond-*`/sombras no
   cambian: son colores de marca o superficies flotantes sobre fotos, ya
   funcionan igual en cualquier fondo. */
html[data-theme="light"] .ay-vista,
html[data-theme="light"] .ayo-navbar.is-market,
html[data-theme="light"] .ayo-store-filters {
  --fondo: #f7f7fb;
  --superficie: #ffffff;
  --superficie-alta: #f1f5f9;
  --borde: #e2e8f0;
  --borde-control: #cbd5e1;
  --tinta: #1c1c28;
  --tinta-suave: #475569;
  --tinta-tenue: #64748b;
  --exito-fondo: #dcfce7;
  --exito-tinta: #15803d;
  --aviso-fondo: #fef9c3;
  --aviso-tinta: #a16207;
}
html[data-theme="light"] .ay-vista { background: var(--fondo); color: var(--tinta); }

/* ---------- base ---------- */
.ay-vista {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  container: ay-vista / inline-size;
  position: relative;
  min-height: calc(100vh - var(--ayo-navbar-h, 57px));
}
.ay-vista *, .ay-vista *::before, .ay-vista *::after { box-sizing: border-box; }
.ay-vista button { font: inherit; color: inherit; }
.ay-vista :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ay-icono { display: block; flex: none; }
.ay-oculto-visual {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- botones ---------- */
.ay-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--alto-control); padding: 0 20px;
  border: 0; border-radius: var(--radio-pildora);
  font-weight: 700; font-size: 14px; line-height: 20px; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.ay-boton--primario { background: var(--acento); color: var(--sobre-acento); }
.ay-boton--primario:hover { filter: brightness(1.07); color: var(--sobre-acento); }
/* Botón secundario (ej. "Iniciar sesión") — el sistema de diseño no lo
   define (solo tiene el primario coral), pero convivía con él en la barra
   así que necesita la misma forma de píldora en vez del botón cuadrado de
   Bootstrap que traía antes. */
.ay-boton--secundario {
  background: transparent; color: var(--tinta); border: 1px solid var(--borde-control);
}
.ay-boton--secundario:hover { background: var(--superficie-alta); color: var(--tinta); }
.ay-nav-guest { display: flex; align-items: center; gap: 8px; }

/* ---------- navbar compartido, retinte "mercado" (adaptación — el sistema
   define esto como <header class="ay-barra"> propio; aquí se aplica sobre
   el <nav class="ayo-navbar"> ya existente y compartido por todo /ayo,
   solo en su variante "inicio" vía la clase .is-market) ---------- */
.ayo-navbar.is-market {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  /* .ayo-navbar trae `height: var(--ayo-navbar-h)` fijo (57px) para la barra
     compartida de una sola fila; BarraSuperior necesita más (68px en
     escritorio, el doble en móvil con la búsqueda en su propia fila) — con
     el alto fijo, esa segunda fila se salía por debajo del fondo/borde de
     la barra y quedaba superpuesta al contenido. */
  height: auto;
  min-height: var(--ayo-navbar-h, 57px);
}
.ay-barra__interior {
  /* .ayo-navbar (compartido, style.css) es flex y sin este width:100% el
     grid se encoge a su contenido (fit-content) en vez de ocupar toda la
     barra — con eso la columna central de abajo no tenía de dónde repartir
     espacio y el buscador quedaba pegado al logo, no centrado (mejoras 20 #2). */
  width: 100%;
  padding: 0 var(--espacio-8);
  min-height: var(--alto-barra);
  display: grid; align-items: center; column-gap: var(--espacio-6);
  /* Columnas flexibles por defecto (seguras: el buscador solo ocupa el
     espacio sobrante entre el logo y las acciones — centrado dentro de ESE
     espacio vía justify-self:center más abajo, nunca choca con ninguno de
     los dos lados). El centrado simétrico de verdad, en toda la barra
     (mejoras 20 #2), solo se activa más abajo ≥1480px: columnas 1fr
     realmente iguales a los lados exigen que QUEPAN DOS VECES el lado más
     ancho (Mensajes+Favoritos+Publicar+avatar, ~424px, mucho más que el
     logo) — por debajo de eso las acciones quedaban con menos columna de
     la que su contenido necesita y se superponían al buscador. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo busqueda acciones";
}
@media (min-width: 1480px) {
  .ay-barra__interior { grid-template-columns: minmax(0, 1fr) minmax(160px, 480px) minmax(0, 1fr); }
}
.ay-logo {
  grid-area: logo; justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  color: var(--tinta); text-decoration: none;
  font-weight: 800; font-size: 20px; line-height: 24px; letter-spacing: -0.01em;
}
.ay-logo__marca {
  width: 40px; height: 40px; border-radius: var(--radio-md); flex: none;
  background: transparent; display: grid; place-items: center; overflow: hidden;
}
.ay-logo__marca img { display: block; width: 34px; height: 34px; object-fit: contain; }
.ay-logo__marca i { color: var(--tinta); font-size: 18px; }

.ay-busqueda { grid-area: busqueda; justify-self: center; width: 100%; max-width: 480px; position: relative; margin: 0; }
@media (min-width: 1480px) {
  .ay-busqueda { justify-self: stretch; max-width: none; }
}
.ay-busqueda input {
  width: 100%; height: var(--alto-control); padding: 0 56px 0 20px;
  border: 1px solid var(--borde-control); border-radius: var(--radio-pildora);
  background: var(--superficie-alta); color: var(--tinta);
  font: inherit; font-size: 15px; -webkit-appearance: none; appearance: none;
}
.ay-busqueda input::placeholder { color: var(--tinta-tenue); opacity: 1; }
/* La "x" nativa del navegador para input[type=search] quedaba antes del
   botón propio (dos formas de limpiar/buscar superpuestas) — se oculta
   porque el botón ahora hace ese trabajo, transformándose él mismo en una
   "x" (mejoras 25 #2, ver ayo-index.js). */
.ay-busqueda input[type="search"]::-webkit-search-cancel-button,
.ay-busqueda input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ay-busqueda input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }
.ay-busqueda__boton {
  position: absolute; top: 4px; right: 4px; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: var(--acento); color: var(--sobre-acento);
  display: grid; place-items: center; cursor: pointer;
}
/* La transición/rotación lupa→x (.es-limpiar) es una regla compartida con
   .ayo-buscador-toggle — vive en style.css (mejoras 26 #1) para que
   también sirva al buscador de /chat, que no carga esta hoja. */
/* Resultados del buscador de vendedores del navbar (logueado, solo /ayo
   index — mejoras 19 #2/#3) */
.ay-busqueda__resultados {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--superficie-alta); border: 1px solid var(--borde); border-radius: var(--radio-md);
  box-shadow: var(--sombra-elevada); max-height: 320px; overflow-y: auto; z-index: 50; padding: 6px;
}
.ay-busqueda__resultados.es-visible { display: block; }
.ay-busqueda__item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radio-md);
  color: var(--tinta); text-decoration: none;
}
.ay-busqueda__item:hover { background: var(--superficie); }
.ay-busqueda__item strong { display: block; font-size: 14px; font-weight: 700; }
.ay-busqueda__item small { display: block; font-size: 12px; color: var(--tinta-tenue); }
.ay-busqueda__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700;
}
.ay-busqueda__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ay-busqueda__vacio { padding: 10px; color: var(--tinta-tenue); font-size: 13px; text-align: center; }

.ay-barra__acciones { grid-area: acciones; justify-self: end; display: flex; align-items: center; gap: var(--espacio-2); }
.ay-barra__acciones-desktop { align-items: center; gap: var(--espacio-2); }
.ay-icono-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  height: var(--alto-control); padding: 0 14px;
  border: 0; border-radius: var(--radio-pildora); background: transparent; color: var(--tinta-suave);
  font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none;
}
.ay-icono-btn:hover { background: var(--superficie-alta); color: var(--tinta); }
.ay-contador {
  position: absolute; top: 2px; left: 24px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radio-xs); background: var(--acento); color: var(--sobre-acento);
  font-size: 11px; line-height: 18px; font-weight: 800; text-align: center;
}
.ay-avatar-btn { border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; }

/* ---------- avatar ---------- */
.ay-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: var(--superficie-alta); color: var(--tinta); font-weight: 800; font-size: 14px;
  overflow: hidden;
}
.ay-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ay-avatar--premium { padding: 2px; background: linear-gradient(135deg, var(--acento-intenso), var(--acento-calido)); }
.ay-avatar--premium > span, .ay-avatar--premium > img {
  width: 100%; height: 100%; aspect-ratio: 1 / 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--superficie-alta); border: 2px solid var(--superficie);
}

/* ---------- contenido ---------- */
.ay-contenido {
  padding: var(--espacio-6) var(--espacio-8) calc(var(--espacio-12) + var(--espacio-10));
}

/* ---------- sidebar (solo logueado — mejoras 17 #1/#2) ----------
   El público en general no lleva sidebar (`.ay-vista` sola, como arriba);
   logueado agrega `.ay-vista--con-sidebar` y un <aside class="ay-lateral">
   como hermano de `.ay-contenido`. Ninguno de los dos limita el ancho —
   todo el ancho de pantalla, mejoras 18 #1.
   `.ay-lateral` es `position: fixed` pegado a la esquina superior
   izquierda, sin margin ni espacio alrededor y a toda la altura -
   igual que `.ayo-sidebar` en el resto de /ayo (panel, publicar, chat),
   mejoras 22 #1 — antes era sticky con hueco arriba/abajo y una card
   flotante centrada, inconsistente con esas otras vistas. Por eso ya no
   es grid: con el sidebar fuera de flujo (fixed), `.ay-contenido` solo
   necesita un margin-left del ancho del sidebar, como `.ayo-main` allá. */
.ay-vista--con-sidebar { padding: 0 var(--espacio-8) 0 0; }
.ay-vista--con-sidebar .ay-contenido {
  max-width: none; margin: 0 0 0 232px;
  padding: var(--espacio-6) 0 calc(var(--espacio-12) + var(--espacio-10)) var(--espacio-6);
}
.ay-lateral {
  position: fixed; top: var(--alto-barra, 68px); left: 0; z-index: 90;
  width: 232px; height: calc(100vh - var(--alto-barra, 68px));
  display: flex; flex-direction: column; gap: var(--espacio-4);
  /* Mismo fondo que el navbar (mejoras 21 #1); sin esquinas redondeadas y
     solo borde a la derecha, como `.ayo-sidebar` (mejoras 22 #1). */
  background: var(--superficie); border: 0; border-right: 1px solid var(--borde);
  padding: var(--espacio-4);
  overflow-y: auto; scrollbar-width: none;
}
.ay-lateral::-webkit-scrollbar { display: none; }
.ay-lateral__cabecera-movil { display: none; align-items: center; justify-content: space-between; }
.ay-lateral__cabecera-movil span { font-weight: 700; font-size: 15px; color: var(--tinta); }
.ay-lateral__cerrar {
  border: 0; background: transparent; color: var(--tinta-suave);
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
}
.ay-lateral__cerrar:hover { background: var(--superficie-alta); color: var(--tinta); }
.ay-lateral__perfil {
  display: flex; align-items: center; gap: 10px;
  color: var(--tinta); text-decoration: none;
}
.ay-lateral__perfil strong { display: block; font-size: 14px; font-weight: 700; }
.ay-lateral__perfil small { display: block; font-size: 12px; color: var(--tinta-tenue); }
.ay-lateral__acciones { display: flex; flex-direction: column; gap: 2px; }
.ay-lateral__link {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 10px; border-radius: var(--radio-md);
  color: var(--tinta-suave); font-weight: 600; font-size: 14px; text-decoration: none;
}
.ay-lateral__link:hover { background: var(--superficie-alta); color: var(--tinta); }
.ay-lateral__link .ay-contador { position: static; margin-left: auto; }
.ay-lateral__divisor { border: 0; border-top: 1px solid var(--borde); margin: 0; }
.ay-lateral__titulo {
  margin: 0 0 4px; padding: 0 10px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-tenue);
}
/* Título de "Categorías" como botón desplegable (mejoras 27 #6) — mismo
   texto/tipografía de .ay-lateral__titulo, solo agrega la mecánica de
   acordeón. El estado (abierto/cerrado) se guarda en localStorage. */
.ay-lateral__titulo--desplegable {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: transparent; border: 0; cursor: pointer;
}
/* `.ay-vista button { font: inherit }` (más específico: clase+elemento vs.
   solo clase) le ganaba a font-weight:700 de .ay-lateral__titulo — quedaba
   en peso normal en vez de negrita, se leía como una tipografía distinta a
   "VENDEDORES PREMIUM" (mismo <p>/clase, sin ese reset) aunque ambos usan
   Plus Jakarta Sans (mejoras 28 #1). Mismo truco de especificidad que
   `button.ay-lateral-toggle` más abajo: selector con elemento. */
button.ay-lateral__titulo--desplegable { font-size: 12px; font-weight: 700; }
.ay-lateral__titulo--desplegable:hover { color: var(--tinta-suave); }
.ay-lateral__titulo--desplegable .ay-icono { flex: none; transition: transform .15s ease; }
.ay-lateral__titulo--desplegable[aria-expanded="false"] .ay-icono { transform: rotate(-90deg); }
.ay-lateral__categorias { display: flex; flex-direction: column; gap: 2px; }
.ay-lateral__cats-lista { display: flex; flex-direction: column; gap: 2px; }
.ay-lateral__cats-lista[hidden] { display: none; }
.ay-lateral__cat {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px; border: 0; border-radius: var(--radio-md);
  background: transparent; color: var(--tinta-suave); font-weight: 600; font-size: 14px;
  text-align: left; cursor: pointer;
}
/* Nombres largos ("Vehículos y repuestos", "Herramientas y construcción") en
   UNA sola fila con puntos suspensivos; el `title` del botón muestra el
   nombre completo al pasar el cursor (2026-10-05). `min-width: 0` es clave:
   sin él el ítem flex no encoge bajo su contenido y el ellipsis no llega a
   aplicar (el texto se salía de los 232px del sidebar en dos líneas). */
.ay-lateral__cat-nombre {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ay-lateral__cat:hover { background: var(--superficie-alta); color: var(--tinta); }
.ay-lateral__cat.es-activo { background: var(--superficie-alta); color: var(--tinta); }
/* Vendedores premium — reubicados al final del sidebar (mejoras 19 #3),
   antes vivían en una franja horizontal dentro del contenido. */
.ay-lateral__vendedores { display: flex; flex-direction: column; gap: 2px; }
.ay-lateral__vendedor {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: var(--radio-md); color: var(--tinta); text-decoration: none;
}
.ay-lateral__vendedor:hover { background: var(--superficie-alta); }
.ay-lateral__vendedor strong { display: block; font-size: 14px; font-weight: 700; }
.ay-lateral__vendedor small { display: block; font-size: 12px; color: var(--tinta-tenue); }
/* Botón "Ver opciones" (mejoras 21 #3) — abre el sidebar como panel
   deslizante en móvil, donde ya no cabe en columna fija junto al
   contenido. Mismo breakpoint (880px) que oculta/despliega `.ay-lateral`
   abajo, para que nunca quede sin forma de abrirlo. */
/* button.ay-lateral-toggle (no solo .ay-lateral-toggle): el botón también
   lleva la clase .ay-filtro, que trae su propio "display: inline-flex" —
   como las dos son un solo selector de clase, gana la que esté declarada
   más abajo en el archivo (`.ay-filtro`, después de esta regla) sin
   importar cuál "debería" ganar semánticamente. El selector con elemento
   sube la especificidad para no depender del orden. */
button.ay-lateral-toggle { display: none; flex: none; }
/* "Ver opciones" + buscador en una sola fila en móvil (mejoras 26 #3) — en
   escritorio el botón está oculto arriba, así que esta fila solo contiene
   al buscador (mismo resultado que antes de agrupar los dos). */
.ay-fila-movil { display: flex; align-items: center; gap: var(--espacio-2); margin: var(--espacio-3) 0 var(--espacio-4); }
.ay-fila-movil .ay-busqueda--contenido { max-width: none; margin: 0; flex: 1 1 auto; min-width: 0; }
@media (max-width: 880px) {
  .ay-vista--con-sidebar { display: block; padding: 0; }
  .ay-vista--con-sidebar .ay-contenido {
    /* El sidebar pasa a panel off-canvas (fixed, fuera de flujo) — sin el
       margin-left de escritorio que le reservaba su ancho. */
    margin-left: 0;
    padding: var(--espacio-6) var(--espacio-8) calc(var(--espacio-12) + var(--espacio-10));
  }
  button.ay-lateral-toggle { display: inline-flex; }
  /* Ya no se oculta: se saca del flujo (fixed) y se desliza fuera de
     pantalla por defecto, en vez de display:none — así "Ver opciones"
     puede abrirlo como panel off-canvas. */
  .ay-lateral {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 260;
    /* Todo el ancho en móvil (antes 280px/82vw, dejaba una franja del
       contenido visible al lado) — mejoras 26 #2. */
    width: 100%; max-width: none; max-height: none;
    border: 0; border-radius: 0; border-right: 1px solid var(--borde);
    transform: translateX(-100%); transition: transform .28s ease;
  }
  .ay-lateral.es-abierto { transform: translateX(0); }
  .ay-lateral__cabecera-movil { display: flex; margin-bottom: var(--espacio-2); }
}
.ay-lateral-overlay {
  display: none; position: fixed; inset: 0; z-index: 255;
  background: rgba(4, 14, 23, .6); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.ay-lateral-overlay.active { display: block; opacity: 1; pointer-events: auto; }
@media (max-width: 720px) {
  .ay-vista--con-sidebar .ay-contenido { padding: var(--espacio-4) var(--espacio-4) calc(var(--espacio-12) + var(--espacio-10)); }
}

/* ---------- cabecera pegajosa (logueado) ----------
   Chips de categoría + buscador de productos reubicado (mejoras 19 #3),
   fijos arriba del contenido mientras la grilla se desplaza (mejoras 19 #4).
   Solo existe para el usuario logueado — el invitado sigue con los chips en
   flujo normal, como antes. */
.ay-cabecera-pegajosa {
  position: sticky; top: var(--alto-barra, 68px); z-index: 15;
  background: var(--fondo); padding-top: var(--espacio-2); margin-top: calc(var(--espacio-2) * -1);
  /* flex en vez de flujo normal: evita que el margin-bottom del buscador
     (mejoras 20 #1 — quedaba pegado al borde inferior pegajoso) colapse con
     el propio borde del contenedor, como pasaría en flujo de bloque normal. */
  display: flex; flex-direction: column;
}

/* ---------- chips de categoría ---------- */
.ay-chips__pista {
  display: flex; gap: var(--espacio-2); overflow-x: auto; padding: 2px 2px 6px;
  scrollbar-width: none;
}
.ay-chips__pista::-webkit-scrollbar { display: none; }
.ay-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: var(--alto-chip); padding: 0 16px 0 12px;
  border: 1px solid var(--borde); border-radius: var(--radio-pildora);
  background: var(--superficie); color: var(--tinta-suave);
  font-weight: 700; font-size: 14px; line-height: 20px; white-space: nowrap; cursor: pointer;
}
.ay-chip:hover { background: var(--superficie-alta); color: var(--tinta); }
.ay-chip.es-activo { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }

/* Logueado (mejoras 37/38): "Todas" + hasta 5 categorías más populares
   (solo ícono) a la izquierda, accesos rápidos (Mensajes/Favoritos/Mi
   panel, también solo ícono) a la derecha — mismos destinos que el
   sidebar, para no depender de abrirlo. Cuántas categorías se ven depende
   del ancho disponible del contenedor (@container ay-vista más abajo, no
   JS) — CategoryModel::popularRoots() ya trae hasta 5 desde el controller,
   el recorte es puramente visual. */
.ay-chips--conAcciones { display: flex; align-items: center; gap: var(--espacio-3); }
.ay-chips--conAcciones .ay-chips__pista { flex: 1 1 auto; min-width: 0; }
.ay-chip--icono { width: var(--alto-chip); padding: 0; justify-content: center; }

/* Separador entre categorías y accesos — sin esto, las dos filas de
   círculos se leían como un solo grupo (mejoras 38, se pidió diferenciarlas
   para evitar confusión: una filtra la grilla, la otra navega a otra
   página). */
.ay-chips__divisor { flex: none; width: 1px; align-self: stretch; margin: 4px 0; background: var(--borde); }

.ay-chips__acciones { display: flex; align-items: center; gap: var(--espacio-2); flex: none; }
.ay-chips__accion {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--alto-chip); height: var(--alto-chip); flex: none;
  border: 1px solid transparent; border-radius: 50%;
  /* Fondo "elevado" (un paso más marcado que --superficie, el de los chips
     de categoría) — junto con el separador, la segunda señal de que este
     grupo hace algo distinto (navega) al de la izquierda (filtra). */
  background: var(--superficie-alta); color: var(--tinta-suave); cursor: pointer;
}
.ay-chips__accion:hover { background: var(--borde); color: var(--tinta); }
/* .ay-contador (ay-index.js/index.php) está pensado para el botón ancho
   .ay-icono-btn (left:24px fijo) — reposicionado a la esquina de este
   botón redondo más chico. */
.ay-contador--accion { top: -3px; left: auto; right: -3px; }

/* ---------- cuántas categorías se ven, según el ancho disponible (mejoras
   38) — `container: ay-vista / inline-size` está declarado en .ay-vista
   (el contenedor de TODO: sidebar + contenido, ver arriba), así que estos
   @container miden ese ancho completo (≈ viewport), no el más angosto de
   .ay-contenido solo — igual que ya asume el @container existente de
   720px más arriba. Los 3 cortes van de más ancho a más angosto a
   propósito: si el contenedor calza en más de uno a la vez, gana el
   último en cascada (el más restrictivo). */
@container ay-vista (max-width: 1300px) {
  /* 4 categorías (children 2-5 de .ay-chips__pista; "Todas" es el 1º) */
  .ay-chips--conAcciones .ay-chips__pista > .ay-chip:nth-child(n+6) { display: none; }
}
@container ay-vista (max-width: 992px) {
  /* 3 categorías */
  .ay-chips--conAcciones .ay-chips__pista > .ay-chip:nth-child(n+5) { display: none; }
}
@container ay-vista (max-width: 480px) {
  /* Móvil: 2 categorías, y "Todas" pasa a ser solo ícono (mejoras 38) —
     mismo tratamiento que .ay-chip--icono, sin la clase (es un chip
     normal, solo se le esconde el texto). */
  .ay-chips--conAcciones .ay-chips__pista > .ay-chip:nth-child(n+4) { display: none; }
  .ay-chips--conAcciones .ay-chip__texto { display: none; }
  .ay-chips--conAcciones .ay-chips__pista > .ay-chip:first-child {
    width: var(--alto-chip); padding: 0; justify-content: center;
  }
}

/* ---------- vendedores ---------- */
.ay-vendedores { display: flex; align-items: center; gap: var(--espacio-4); margin-top: var(--espacio-4); }
.ay-vendedores__titulo {
  margin: 0; flex: none; font-size: 13px; line-height: 18px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-tenue);
}
.ay-vendedores__pista { display: flex; gap: var(--espacio-2); overflow-x: auto; flex: 1; min-width: 0; padding: 2px; scrollbar-width: none; }
.ay-vendedores__pista::-webkit-scrollbar { display: none; }
.ay-vendedor {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 18px 6px 6px; border: 1px solid var(--borde); border-radius: var(--radio-pildora);
  background: var(--superficie); color: var(--tinta); text-decoration: none;
}
.ay-vendedor:hover { background: var(--superficie-alta); color: var(--tinta); }
.ay-vendedor strong { display: block; font-size: 14px; line-height: 18px; font-weight: 700; }
.ay-vendedor small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tinta-tenue); }
.ay-confianza {
  margin: 0; flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 18px; font-weight: 500; color: var(--tinta-suave);
}
.ay-confianza .ay-icono { color: var(--cond-nuevo); }

/* ---------- filtros ---------- */
.ay-filtros {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--espacio-3) var(--espacio-4); margin-top: var(--espacio-6);
}
.ay-filtros__titulo { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.ay-filtros__titulo span { color: var(--tinta-tenue); font-weight: 500; }
.ay-filtros__controles { display: flex; align-items: center; flex-wrap: wrap; gap: var(--espacio-2); position: relative; }
.ay-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--alto-filtro); padding: 0 14px;
  border: 1px solid var(--borde-control); border-radius: var(--radio-pildora);
  background: transparent; color: var(--tinta-suave);
  font-weight: 600; font-size: 14px; line-height: 20px; white-space: nowrap; cursor: pointer;
}
.ay-filtro:hover { background: var(--superficie-alta); color: var(--tinta); }
.ay-filtro.es-activo { background: var(--superficie-alta); color: var(--tinta); border-color: var(--tinta-suave); }
/* Bootstrap agrega su propia flechita a todo `.dropdown-toggle` — duplicada
   con el icono "abajo" propio del sistema de diseño que ya trae el botón. */
.ay-filtro.dropdown-toggle::after { display: none; }
.ay-interruptor {
  position: relative; display: inline-flex; align-items: center; gap: 10px; margin-left: var(--espacio-2);
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--tinta-suave); cursor: pointer; user-select: none;
}
.ay-interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ay-interruptor__pista {
  position: relative; flex: none; width: 44px; height: 26px;
  border: 1px solid var(--borde-control); border-radius: var(--radio-pildora); background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.ay-interruptor__pista::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tinta-suave); transition: transform 0.15s, background 0.15s;
}
.ay-interruptor input:checked + .ay-interruptor__pista { background: var(--acento); border-color: var(--acento); }
.ay-interruptor input:checked + .ay-interruptor__pista::after { transform: translateX(18px); background: var(--sobre-acento); }
.ay-interruptor input:focus-visible + .ay-interruptor__pista { outline: 2px solid var(--foco); outline-offset: 2px; }
.ay-solo-movil { display: none; }

/* ---------- dropdowns de filtro (Condición / Precio / Orden) — el sistema
   de diseño no define su contenido ("decisión abierta"); se implementan
   con el dropdown de Bootstrap ya cargado en /ayo, con el mismo fondo
   oscuro que el resto de menús del navbar. ---------- */
.ay-filtros .dropdown-menu {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-md); box-shadow: var(--sombra-elevada);
  padding: .4rem; min-width: 180px;
}
.ay-filtros .dropdown-item {
  color: var(--tinta-suave); border-radius: var(--radio-xs);
  font-size: 14px; font-weight: 600; padding: .5rem .75rem;
}
.ay-filtros .dropdown-item:hover,
.ay-filtros .dropdown-item:focus { background: var(--superficie-alta); color: var(--tinta); }
.ay-filtros .dropdown-item.es-activo { background: var(--acento); color: var(--sobre-acento); }
/* `display: flex` va solo bajo `.show` (la clase que agrega Bootstrap al
   abrir el dropdown): declararlo sin condición pisaba el `display: none`
   por defecto de `.dropdown-menu` (misma especificidad, esta hoja carga
   después) y el popover quedaba SIEMPRE visible, sin abrir ni cerrar. */
.ay-precio-popover { padding: .6rem; flex-direction: column; gap: .5rem; min-width: 200px; }
.ay-precio-popover.show { display: flex; }
.ay-precio-popover__campos { display: flex; align-items: center; gap: .4rem; }
.ay-precio-popover input {
  width: 0; flex: 1; height: 34px; padding: 0 .6rem;
  border: 1px solid var(--borde-control); border-radius: var(--radio-xs);
  background: var(--superficie-alta); color: var(--tinta); font: inherit; font-size: 13px;
}
.ay-precio-popover button {
  height: 34px; padding: 0 14px; border: 0; border-radius: var(--radio-pildora);
  background: var(--acento); color: var(--sobre-acento); font-weight: 700; font-size: 13px; cursor: pointer;
}

/* ---------- grilla ---------- */
.ay-grilla {
  display: grid; gap: var(--espacio-5); margin-top: var(--espacio-4);
  grid-template-columns: repeat(auto-fill, minmax(var(--columna-min), 1fr));
}
.ay-separador {
  display: flex; align-items: center; gap: var(--espacio-4); margin-top: var(--espacio-10);
  color: var(--tinta-tenue); font-size: 13px; line-height: 18px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.ay-separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
[data-vendidos="ocultos"] .solo-vendidos { display: none; }

/* ---------- tarjeta de producto ---------- */
.ay-tarjeta {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-reposo);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ay-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-elevada); }
.ay-tarjeta__foto { position: relative; aspect-ratio: 1 / 1; background: var(--superficie-alta); overflow: hidden; }
.ay-tarjeta__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.ay-tarjeta:hover .ay-tarjeta__foto img { transform: scale(1.04); }
.ay-sinfoto {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--tinta-tenue); font-size: 13px; line-height: 18px; font-weight: 600;
}
.ay-fav, .ay-share {
  position: absolute; top: 10px; z-index: 2; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: var(--flotante); color: #fff;
  display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ay-fav { right: 10px; }
.ay-share { right: 54px; }
/* Modo claro: círculo oscuro translúcido + ícono blanco (mejoras 34) pasan
   a círculo claro + ícono oscuro — sobre una foto clara (fondo típico de
   modo claro) ambos se perdían. Mismo criterio para
   .ayo-quickview-share/-fav (style.css). */
html[data-theme="light"] .ay-fav,
html[data-theme="light"] .ay-share {
  background: rgba(255,255,255,.82);
  color: #1c1c28;
}
.es-favorito .ay-fav .ay-icono { fill: var(--acento); stroke: var(--acento); }
.ay-estado {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: var(--espacio-1); height: 26px; padding: 0 10px 0 8px;
  border-radius: var(--radio-xs); font-size: 12px; line-height: 16px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.ay-estado--vendido { background: var(--exito-fondo); color: var(--exito-tinta); }
.ay-estado--reservado { background: var(--aviso-fondo); color: var(--aviso-tinta); }
.es-vendido .ay-tarjeta__foto img { filter: grayscale(1) brightness(0.72); }
.es-reservado .ay-tarjeta__foto img { filter: saturate(0.7); }

.ay-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px var(--espacio-4) var(--espacio-4); }
.ay-precio { margin: 0; font-size: 20px; line-height: 24px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.ay-precio__moneda { margin-right: 3px; font-size: 13px; font-weight: 700; color: var(--tinta-suave); }
.es-vendido .ay-precio { color: var(--tinta-tenue); text-decoration: line-through; }
.ay-tarjeta__titulo {
  margin: 0; min-height: 40px; font-size: 15px; line-height: 20px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ay-tarjeta__enlace { color: inherit; text-decoration: none; }
.ay-tarjeta__enlace::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
/* Fila 2: precio a la izquierda, condición a la derecha. */
.ay-tarjeta__fila-precio { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Fila 3: foto de perfil del vendedor + su calificación (o su nombre, si
   todavía no tiene calificaciones — mejoras 36). */
.ay-tarjeta__vendedor { display: flex; align-items: center; gap: 6px; min-height: 20px; }
.ay-tarjeta__avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; background: var(--superficie-alta); color: var(--tinta);
  font-size: 9px; font-weight: 800;
  /* Borde de marca — antes sin borde, la foto se perdía contra el fondo de
     la card en fotos claras (mejoras 36). */
  border: 1.5px solid var(--acento);
}
/* aspect-ratio: mismo fix que .ay-avatar--premium (mejoras 35) — sin esto,
   una foto de perfil vertical (retrato) ignora el height:100% dentro de
   este contenedor grid y el avatar queda ovalado. */
.ay-tarjeta__avatar img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* Nombre del vendedor cuando aún no tiene estrellas — mismo lugar que
   .ay-rating, para que la fila no se vea vacía. */
.ay-tarjeta__vendedor-nombre {
  font-size: 13px; font-weight: 600; color: var(--tinta-suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ay-cond {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 13px; line-height: 18px; font-weight: 500; color: var(--tinta-suave);
}
.ay-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--cond, var(--cond-usado)); }
.ay-cond--nuevo { --cond: var(--cond-nuevo); }
.ay-cond--como-nuevo { --cond: var(--cond-como-nuevo); }
.ay-cond--seminuevo { --cond: var(--cond-seminuevo); }
.ay-cond--usado { --cond: var(--cond-usado); }
.ay-cond--para-repuestos { --cond: var(--cond-usado); }
.ay-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--tinta); font-weight: 700; }
.ay-rating .ay-icono { color: var(--acento-texto); }
.ay-rating span { color: var(--tinta-tenue); font-weight: 500; }
.ay-tarjeta__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; min-height: 42px; }
.ay-lugar {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
  font-size: 13px; line-height: 18px; font-weight: 500; color: var(--tinta-tenue);
}
.ay-lugar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ay-contactar {
  position: relative; z-index: 2; flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--whatsapp); background: transparent; color: var(--whatsapp);
  display: grid; place-items: center; cursor: pointer; text-decoration: none;
}
.ay-contactar:hover { background: var(--whatsapp); color: var(--sobre-whatsapp); }

/* ---------- ayuda flotante ---------- */
.ay-ayuda {
  position: fixed; right: var(--espacio-6); bottom: var(--espacio-6); z-index: 90;
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: var(--whatsapp); color: var(--sobre-whatsapp);
  display: grid; place-items: center; box-shadow: var(--sombra-flotante); cursor: pointer;
  text-decoration: none;
}

/* ---------- estado vacío ---------- */
.ay-vacio {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 3rem 1rem; color: var(--tinta-tenue); text-align: center;
}
.ay-vacio i { font-size: 2rem; opacity: .5; }
.ay-cargando { text-align: center; padding: 1rem; color: var(--tinta-tenue); font-size: 13px; }
/* Enlace de texto, no botón (mejoras 48 #3) — antes tenía borde + fondo de
   píldora, se ve más liviano como un simple "ver más" de lista.
   `.ay-vista .ay-ver-mas` (no solo `.ay-ver-mas`) a propósito: mayor
   especificidad que el reset `.ay-vista button { color: inherit }` de más
   arriba, que si no gana por tener también un selector de elemento. */
.ay-vista .ay-ver-mas {
  display: block; margin: var(--espacio-5) auto 0; padding: .4rem 0; height: auto;
  border: none; background: none;
  color: var(--acento); font-weight: 700; font-size: 14px; cursor: pointer;
}
/* Sin subrayado al pasar el mouse (mejoras 49 #1) — solo un leve cambio de
   opacidad como feedback. */
.ay-vista .ay-ver-mas:hover { opacity: .8; }

/* ---------- vista angosta (móvil) ----------
   El sistema usa @container en .ay-vista para las reglas de .ay-grilla y
   demás contenido; el navbar (.ay-barra__interior y afines) vive fuera de
   .ay-vista en esta integración (es compartido por todo /ayo, sticky en el
   layout), así que su versión móvil usa @media — misma regla, mecanismo
   distinto porque el contenedor real es distinto. El colapso de
   `.ay-barra__acciones-desktop` al menú hamburguesa pasa en `lg` (992px) de
   Bootstrap, no aquí (mejoras 19 #1/#2, subido de `md`/768 a `lg`/992 en
   mejoras 20 #2 — logo + Mensajes + Favoritos + Publicar + avatar no
   entraban entre 768-991px). */
@media (max-width: 767px) {
  .ay-barra__interior { padding: 12px var(--espacio-4); }
  /* Solo el ícono en móvil — el nombre ya está en el <title> y sobra ancho
     que la búsqueda necesita (mejoras 17 #3, igual que .ayo-brand-text en
     el navbar "has-page" del resto de /ayo). */
  .ay-logo__nombre { display: none; }
}
@container ay-vista (max-width: 720px) {
  .ay-contenido { padding: var(--espacio-4) var(--espacio-4) calc(var(--espacio-12) + var(--espacio-10)); }
  .ay-vendedores { margin-top: var(--espacio-3); }
  .ay-vendedores__titulo, .ay-confianza { display: none; }
  .ay-filtros { margin-top: var(--espacio-4); }
  .ay-filtros__titulo { width: 100%; }
  .ay-filtros__controles { width: 100%; }
  .ay-solo-escritorio { display: none; }
  .ay-solo-movil { display: inline-flex; }
  .ay-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-3); }
  .ay-tarjeta { border-radius: var(--radio-md); }
  .ay-tarjeta__cuerpo { padding: 10px var(--espacio-3) var(--espacio-3); gap: 4px; }
  .ay-precio { font-size: 17px; line-height: 22px; }
  .ay-tarjeta__titulo { min-height: 38px; font-size: 14px; line-height: 19px; }
  .ay-cond, .ay-rating { font-size: 12px; }
  .ay-fav, .ay-share { top: 8px; width: 34px; height: 34px; }
  .ay-fav { right: 8px; }
  .ay-share { right: 50px; }
  .ay-estado { left: 8px; bottom: 8px; }
  .ay-contactar { width: 34px; height: 34px; }
  .ay-lugar__ciudad { display: none; }
  .ay-ayuda { right: var(--espacio-4); bottom: var(--espacio-4); width: 52px; height: 52px; }
}