/* ==============================================================
   producto-card.css
   Punto Neto v1.0
   Ruta: public/assets/css/producto-card.css
   Creado: 2026-07-14
   Descripcion: Estilos de la card de producto — extraidos tal cual
                de catalogo.css v1.2 (mismas reglas, mismos valores,
                sin cambios de diseño). Va de la mano con
                src/Views/partials/producto-card.php: cualquier
                vista que incluya ese partial debe cargar este CSS.

                Unico agregado real (no extraccion): estilo para
                .boton-no-disponible, que en catalogo.css v1.2 no
                tenia NINGUNA regla propia — se confirmo revisando
                tambien base.css (la version real, /assets/css/,
                segun su propio encabezado v1.1) y tampoco esta ahi.
                Se le da el mismo look de "deshabilitado" que ya
                usa .boton-agotado, sin inventar un estilo nuevo.

   Depende de:    public/assets/css/base.css (variables --color-*,
                  --sp-*, --radio-*, --trans-*)
   Requerido por: src/Views/partials/producto-card.php — cargado por
                  src/Views/storefront/catalogo.php y (desde la
                  seccion "Ofertas del día") src/Views/storefront/home.php
   ============================================================== */

.producto-card {
  position: relative;
  background: var(--color-superficie);
  border-radius: var(--radio-lg);
  border: 1px solid var(--color-borde);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.producto-badge {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 2;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radio-pill);
  color: #fff;
}
.producto-badge--oferta { background: var(--color-primario); }

.producto-imagen-wrap {
  /* v1.1 — 2026-07-22: antes 1/1 (cuadrado perfecto). Con
     object-fit:cover, un cuadrado recorta agresivo cualquier foto
     que no sea exactamente cuadrada (la mayoria de fotos de comida
     no lo son) — Cris reporto que la imagen "se ve cortada" en la
     card. 4/5 (mas alta que ancha, mismo estandar que usan apps de
     delivery tipo Rappi/DiDi) le da mas aire a la imagen sin dejar
     de recortar del todo — sigue siendo necesario recortar algo
     para que todas las cards del grid midan lo mismo.
  */
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-md);
  overflow: hidden;
  background: var(--color-superficie-alt);
}
.producto-imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.producto-card--sin-imagen .producto-imagen-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.producto-card--sin-imagen .producto-imagen-wrap::after {
  font-family: 'Material Symbols Rounded';
  content: 'restaurant';
  font-size: 32px;
  color: var(--color-texto-suave);
}

.producto-nombre {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--color-texto);
  line-height: 1.25;
}

.producto-precio {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.producto-precio-actual {
  font-size: 16px;
  font-weight: 900;
  color: var(--color-primario);
}
.producto-precio-tachado {
  font-size: 12px;
  color: var(--color-texto-suave);
  text-decoration: line-through;
}

.boton-agregar {
  width: 100%;
  background: var(--color-primario);
  color: var(--texto-sobre-primario);
  border: none;
  border-radius: var(--radio-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter var(--trans-rapida);
}
.boton-agregar:hover { filter: brightness(1.08); }
.boton-agregar:active { transform: scale(.98); }

.producto-stepper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primario);
  border-radius: var(--radio-md);
  padding: var(--sp-1) var(--sp-2);
}
.producto-stepper-btn {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.25);
  color: var(--texto-sobre-primario);
  font-family: 'Material Symbols Rounded';
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.producto-stepper-btn:hover { background: rgba(255,255,255,.4); }
.producto-stepper-btn:active { transform: scale(.92); }
.producto-stepper-cantidad {
  color: var(--texto-sobre-primario);
  font-weight: 900;
  font-size: 14px;
  min-width: 20px;
  text-align: center;
}

.boton-agotado {
  width: 100%;
  background: var(--color-superficie-alt);
  color: var(--color-texto-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: not-allowed;
}
.producto-card--agotado .producto-imagen-wrap { opacity: .5; }

/* NUEVO — no existia en ningun lado (ver nota en el encabezado del
   archivo). Mismo look que .boton-agotado a proposito: ambos
   comunican "no se puede comprar ahorita", solo cambia el texto. */
.boton-no-disponible {
  width: 100%;
  background: var(--color-superficie-alt);
  color: var(--color-texto-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: not-allowed;
}