/* ==============================================================
   catalogo.css
   Punto Neto v1.3
   Ruta: public/assets/css/catalogo.css
   Creado: 2026-07-01
   Modificado: 2026-07-14
   Descripcion: Estilos exclusivos de la vista Catalogo/Menu.
                Fondo en variante off-white para que las cards de
                producto (blancas) destaquen. Sidebar de filtros
                por categoria, grid de productos, ranking "mas
                pedidos".

                v1.1 — TODO lo de carrito (panel, barra movil,
                selector de variantes, badge) se movio a
                carrito-panel.css (global, cargado por layout.php).
                Cambios de layout reales en esta version:

                1. .catalogo-layout paso de 3 columnas fijas
                   (220px 1fr 300px, con la 3a para el carrito) a
                   2 columnas (220px 1fr) — el carrito ya no es
                   parte de este grid, es un hermano externo en
                   .contenido-principal (ver carrito-panel.css) que
                   empuja TODO el bloque .catalogo cuando tiene
                   items.

                2. .productos-grid paso de columnas fijas
                   (repeat(2/3,1fr)) a auto-fill con minmax — asi
                   el grid se reacomoda solo segun el espacio
                   disponible: mas columnas cuando el carrito esta
                   cerrado (usa todo el ancho), menos cuando el
                   carrito abre y empuja. Esto es justo el
                   comportamiento pedido ("si no existe carrito se
                   rellena con otra columna de productos, si existe
                   empuja") sin necesidad de JS ni clases extra.

                v1.3 — TODO lo de la card en si (.producto-card,
                badge, imagen, precio, boton-agregar, stepper,
                agotado/no-disponible) se movio a producto-card.css,
                de la mano de la extraccion del partial
                src/Views/partials/producto-card.php — ahora
                reusable desde Home (seccion "Ofertas del día") sin
                duplicar CSS. Este archivo se queda solo con layout:
                sidebar de filtros, grid contenedor, y "mas pedidos"
                (que tiene su propio markup, NO usa el partial de
                card).

   Depende de:    public/assets/css/base.css (variables --color-*,
                  --sp-*, --radio-*, --sombra-*, --trans-*),
                  public/assets/css/producto-card.css (estilos de
                  .producto-card — cargar junto con este, ambos via
                  $pagina_css de catalogo.php),
                  public/assets/css/carrito-panel.css (estilos del
                  carrito y de .contenido-principal — cargado antes
                  por layout.php)
   Requerido por: src/Views/storefront/catalogo.php
   ============================================================== */

/* ---------------- Layout base ---------------- */
.catalogo {
  background: var(--color-superficie-alt); /* off-white — para que
    .producto-card (blanca) contraste, pedido explicito */
  padding: var(--sp-6) 0 calc(var(--sp-8) + 70px); /* espacio extra
    abajo para que la barra movil del carrito no tape el ultimo
    producto (la barra sigue siendo fixed, ver carrito-panel.css) */
  min-height: 100vh;
}

.catalogo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

/* ---------------- Sidebar de filtros ---------------- */
.cat-filtros {
  display: flex;
  overflow-x: auto;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  -webkit-overflow-scrolling: touch;
}
.cat-filtros::-webkit-scrollbar { display: none; }

.filtro-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radio-lg);
  border: 1px solid var(--color-borde);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--trans-rapida), color var(--trans-rapida);
}
.filtro-item .filtro-icono {
  font-family: 'Material Symbols Rounded';
  font-size: 18px;
}
.filtro-item--activo {
  background: var(--color-primario);
  color: var(--texto-sobre-primario);
  border-color: var(--color-primario);
}

/* ---------------- Grid de productos ---------------- */
.cat-titulo-seccion { margin-bottom: var(--sp-4); }
.cat-titulo-seccion h1 {
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-texto);
}

.cat-vacio {
  color: var(--color-texto-suave);
  font-size: 14px;
  padding: var(--sp-6) 0;
  text-align: center;
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* movil: fijo en 2, auto-fill
    en pantallas chicas puede dejar columnas demasiado angostas */
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

/* ---------------- Los mas pedidos ---------------- */
.mas-pedidos {
  background: var(--color-superficie);
  border: 1px dashed var(--color-primario);
  border-radius: var(--radio-lg);
  padding: var(--sp-4);
}
.mas-pedidos-titulo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-texto);
  margin-bottom: var(--sp-3);
}
.mas-pedidos-titulo .icono { color: var(--color-primario); font-size: 18px; }

.mas-pedidos-lista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.mas-pedidos-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.mas-pedidos-numero {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-primario);
  color: var(--texto-sobre-primario);
  font-size: 11px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.mas-pedidos-imagen {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.mas-pedidos-info { display: flex; flex-direction: column; }
.mas-pedidos-nombre { font-size: 12.5px; font-weight: 700; color: var(--color-texto); }
.mas-pedidos-precio { font-size: 12px; font-weight: 800; color: var(--color-primario); }

@media (min-width: 768px) {
  /* auto-fill: el navegador decide cuantas columnas caben segun el
     ancho REAL disponible — que cambia solo cuando el carrito
     global (hermano externo, ver carrito-panel.css) empuja o
     libera espacio. Sin esto habria que reescribir manualmente el
     numero de columnas cada vez que cambia el estado del carrito. */
  .productos-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .cat-filtros { flex-direction: column; overflow: visible; }
  .catalogo-layout {
    grid-template-columns: 220px 1fr; /* antes: 220px 1fr 300px —
      la 3a columna (carrito) ya no es parte de este grid */
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .catalogo { padding-bottom: var(--sp-8); } /* en desktop no hay barra movil que tape */
  .catalogo-layout { grid-template-columns: 220px 1fr; }
  .productos-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}