/* TuDespensa25 — sistema de diseno.
 *
 * Traducido del export de Stitch ("Mercado Calido"), con dos diferencias:
 * los nombres son los del negocio y no los de Material 3, y no hay Tailwind:
 * el resto del proyecto es CSS plano y esto tiene que convivir con el.
 *
 * La regla que mas facil se rompe y mas cara sale: el NARANJA es solo para
 * botones de accion. Si aparece en iconos, bordes o etiquetas deja de
 * significar "pulsa aqui" y el cliente tiene que buscar el boton de comprar.
 */

:root {
  /* --- marca ------------------------------------------------------ */
  /* Segunda paleta (2026-08-17): se saco el terracota apagado (#8c2f04) por
     un rojo-naranja vivo. --marca en textos chicos (menos de 24px / 18,66px
     en negrita) no llega a 4,5:1 sobre el fondo -solo a ~4,1:1-, asi que ahi
     va --marca-oscura, no --marca. Para titulos, precios e iconos si sirve
     directo: son texto grande o graficos, que piden 3:1. */
  --marca:            #e8380d;  /* rojo-naranja vivo: cabecera, titulos, precios */
  --marca-oscura:     #a82c0c;  /* hover, pulsado, y texto chico sobre --marca-suave/fondo */
  --marca-suave:      #ffd9c2;  /* fondos de realce en tono marca */

  /* --- accion ----------------------------------------------------- */
  --accion:           #ffb020;  /* SOLO botones de comprar */
  --accion-oscura:    #e6a000;
  /* Texto OSCURO sobre el dorado: con blanco da 1,83:1, con oscuro 9,41:1. */
  --sobre-accion:     #231914;

  /* --- superficies ------------------------------------------------ */
  --fondo:            #fff8f6;  /* fondo de la app, hueso calido */
  --tarjeta:          #ffffff;  /* lo que se levanta del fondo */
  --tarjeta-suave:    #fff1eb;
  --tarjeta-media:    #feeae1;
  --hundido:          #f2dfd6;

  /* --- texto ------------------------------------------------------ */
  --texto:            #231914;  /* marron muy oscuro, nunca negro puro */
  --texto-suave:      #57423b;
  --borde:            #dec0b7;
  --borde-fuerte:     #8a7269;

  /* --- semanticos ------------------------------------------------- */
  --ahorro:           #15803d;  /* descuentos y ahorros: verde vivo que sigue pasando 4,5:1 en blanco */
  --ahorro-fondo:     #b1f0cd;
  --alerta:           #ba1a1a;  /* agotado, errores */
  --alerta-fondo:     #ffdad6;
  /* El verde exacto de WhatsApp, que la gente reconoce al instante. Con
     texto blanco daba 1,98:1 —muy por debajo del minimo— asi que el texto
     va oscuro: 7,90:1 y el boton sigue siendo reconocible. */
  --whatsapp:         #25d366;
  --sobre-whatsapp:   #0b2912;

  /* --- tipografia ------------------------------------------------- */
  /* Archivo Narrow para titulos: imita el rotulo pintado a mano de un
     puesto de mercado. Inter para todo lo demas, que se lee mejor. */
  /* Segundo lote de Stitch: Plus Jakarta Sans para titulos y Manrope para
     todo lo demas. Sustituye a Archivo Narrow + Inter del primer lote. */
  --f-titulo: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-texto:  Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-display:  2.5rem;   /* 40px */
  --t-titulo:   1.75rem;  /* 28px */
  --t-seccion:  1.25rem;  /* 20px */
  --t-precio:   1.5rem;   /* 24px */
  --t-cuerpo:   1rem;     /* 16px */
  --t-etiqueta: 0.875rem; /* 14px */

  /* --- ritmo ------------------------------------------------------ */
  /* Base de 8px. Todo el espaciado sale de aqui. */
  --e-xs: 4px;
  --e-sm: 12px;
  --e-md: 24px;
  --e-lg: 48px;
  --e-xl: 64px;
  --margen: 16px;

  /* El segundo lote abandona el radio de 4px "de rotulo de mercado" y pasa a
     esquinas claramente redondeadas, mas de aplicacion. */
  --radio: 12px;
  --radio-chico: 6px;
  --radio-grande: 18px;

  /* Minimo de zona tactil. Mucha gente compra de pie y con prisa. */
  --tactil: 48px;

  /* Elevacion en vez de bordes. Un borde de 1px en cada elemento hace que
     todo parezca un boceto; la sombra suave separa sin dibujar la caja.
     Se reservan los bordes para donde significan algo (campos de texto). */
  --sombra:       0 1px 3px rgba(35, 25, 20, 0.06), 0 1px 2px rgba(35, 25, 20, 0.04);
  --sombra-alta:  0 4px 16px rgba(35, 25, 20, 0.08);
}

/* El display baja en movil para que no parta en lineas raras. */
@media (max-width: 480px) {
  :root { --t-display: 2rem; }
}

/* ------------------------------------------------------------------
   Piezas base. Solo lo que se repite en todas las pantallas.
   ------------------------------------------------------------------ */

.td-titulo {
  font-family: var(--f-titulo);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--marca);
  line-height: 1.15;
  text-wrap: balance;
}

/* El precio es lo primero que se mira despues de la foto. */
.td-precio {
  font-family: var(--f-texto);
  font-size: var(--t-precio);
  font-weight: 600;
  color: var(--marca);
  font-variant-numeric: tabular-nums;
}

.td-precio-antes {
  font-size: var(--t-etiqueta);
  color: var(--texto-suave);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* El equivalente en pesos: quien paga mira el dolar, quien recibe el peso. */
.td-precio-cup {
  font-size: var(--t-etiqueta);
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.td-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-xs);
  min-height: var(--tactil);
  padding: 0 var(--e-md);
  border: 0;
  border-radius: var(--radio);
  background: var(--accion);
  color: var(--sobre-accion);
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.td-boton:hover { background: var(--accion-oscura); }
.td-boton:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
}

.td-boton--whatsapp { background: var(--whatsapp); color: var(--sobre-whatsapp); }
.td-boton--whatsapp:hover { background: #1fb857; }

/* Secundario: sin relleno, para no competir con el de comprar. */
.td-boton--suave {
  background: transparent;
  color: var(--marca-oscura);
  border: 1px solid var(--borde);
}
.td-boton--suave:hover { background: var(--tarjeta-suave); }

.td-tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.td-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--e-xs) 8px;
  border-radius: var(--radio);
  font-family: var(--f-texto);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: var(--ahorro);
}
.td-chip--agotado { background: var(--alerta); }

.td-campo {
  width: 100%;
  min-height: var(--tactil);
  padding: 0 var(--e-sm);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
}
.td-campo:focus {
  outline: 2px solid var(--marca);
  outline-offset: -2px;
}

/* Quien haya pedido menos movimiento, que no lo tenga. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}