/* ============================================================================
   CHANGUITO IA — lista.css
   Lo específico de la pantalla La Lista (#/lista/:id), fiel al mockup
   designsystem/03 La Lista.dc.html (D1, D1b, D2, E1, E2, F1).
   Lo base (tokens, botones, stepper, barra-presu, sheets, toasts, badges,
   skeletons, segmented) vive en app.css; acá va solo lo propio: header y
   footer fijos, card de producto, swipe, campo conversacional, detalle,
   sheet de Cambiar y banner de sugerencias.
   ========================================================================== */

/* deja aire para el pie fijo completo (píldora súper + conversacional + footer):
   52 + 10 + 60 + 12 + ~82 ≈ 216px, redondeado con margen + safe-area iOS */
.lista-pantalla { padding-bottom: calc(232px + env(safe-area-inset-bottom, 0px)); }

/* ---------- header fijo (la barra de presupuesto nunca scrollea fuera) ---------- */
.lista-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  margin: 0 -16px;
  padding: 14px 16px 12px;
}
@media (min-width: 400px) {
  .lista-header { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
}
.lh-fila { display: flex; align-items: flex-start; gap: 10px; }
.lh-barra { flex: 1; min-width: 0; }
/* en el header la barra va compacta, como el mockup (track 10px) */
.lista-header .bp-track { height: 10px; }
.lh-badges { margin-top: 8px; padding-left: 54px; }
/* lista manual sin tope: total prominente en lugar de barra */
.lh-sintope { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.lh-st-monto .money-total { font-size: 28px; }

/* ---------- banner ámbar: sugerencia compensatoria de la IA ---------- */
.lista-banner {
  margin-top: 12px;
  background: #FFF9EC;
  border: 1.5px solid var(--mate-500);
  border-radius: var(--r-card);
  padding: 14px 16px;
}
.lb-texto { font-size: 14px; line-height: 1.5; color: var(--tinta-900); }
.lb-acciones { display: flex; gap: 8px; margin-top: 10px; }
.lb-dale {
  height: 40px; padding: 0 16px;
  background: var(--yerba-600); color: #FFFFFF;
  border: none; border-radius: var(--r-pildora);
  font-family: var(--f-titulos); font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: 0 2px 0 var(--yerba-700);
}
.lb-dale:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--yerba-700); }
.lb-cerrar {
  height: 40px; padding: 0 14px;
  background: transparent; color: var(--tinta-600);
  border: none; border-radius: var(--r-pildora);
  font-family: var(--f-titulos); font-weight: 700; font-size: 13px; cursor: pointer;
}

/* ---------- "¿Por qué esta lista?" (colapsable, verde suave) ---------- */
.porque {
  margin-top: 12px;
  background: var(--yerba-50);
  border: 1px solid var(--yerba-50-press);
  border-radius: var(--r-card);
  padding: 14px 16px;
}
.porque-cab {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: none; padding: 0; cursor: pointer;
  min-height: 24px;
}
.porque-titulo {
  font-family: var(--f-titulos); font-weight: 700; font-size: 14.5px;
  color: var(--yerba-700);
}
.porque-flecha { color: var(--yerba-600); font-size: 13px; }
.porque-bullets {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
  font-size: 13.5px; line-height: 1.45; color: var(--tinta-900);
  text-align: left;
}
.porque-bullet { display: flex; gap: 8px; }
.porque-bullet > span:first-child { color: var(--yerba-600); flex-shrink: 0; }

/* ---------- menú semanal vinculado ---------- */
.menu-card { margin-top: 10px; padding: 14px 16px; }
.mc-cab {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: none; padding: 0; cursor: pointer;
  min-height: 24px;
}
.mc-titulo { font-family: var(--f-titulos); font-weight: 700; font-size: 14.5px; color: var(--tinta-900); }
.mc-flecha { color: var(--tinta-400); font-size: 13px; }
.mc-dias { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.mc-dia { display: flex; flex-direction: column; gap: 6px; }
.mc-comida {
  width: 100%; min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--hundido); border: none; border-radius: 12px;
  cursor: pointer; text-align: left; font-size: 14px; font-family: var(--f-cuerpo);
  color: var(--tinta-900);
}
.mc-comida:active { background: var(--linea); }
.mc-tipo {
  font-family: var(--f-titulos); font-weight: 700; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-400);
  flex-shrink: 0; width: 76px;
}
.mc-desc { flex: 1; min-width: 0; }
.mc-ver { color: var(--tinta-400); }

/* ---------- grupos por góndola ---------- */
.grupo { margin-top: 16px; }
.grupo.cerrado { margin-top: 16px; }
.grupo.cerrado + .grupo.cerrado { margin-top: 8px; }
.grupo-cab {
  width: 100%; display: flex; align-items: baseline; gap: 8px;
  padding: 0 2px 8px; background: transparent; border: none; cursor: pointer;
  min-height: 32px;
}
.grupo-label { color: var(--tinta-600); font-size: 12px; }
/* el mockup usa 16px para el subtotal de góndola en contexto de fila */
.grupo-monto.money-lg {
  margin-left: auto;
  font-family: var(--f-titulos); font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums; color: var(--tinta-900);
  letter-spacing: 0;
}
.grupo-flecha { color: var(--tinta-400); font-size: 12px; flex-shrink: 0; }
.grupo-cerrado {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-card); padding: 16px; cursor: pointer;
  text-align: left;
}
.grupo-cerrado:active { background: var(--hundido); }
.grupo-items { display: flex; flex-direction: column; gap: 8px; }
.ver-restantes {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--f-titulos); font-weight: 700; font-size: 14px;
  color: var(--yerba-600); padding: 8px; min-height: 44px;
}

/* ---------- swipe-left para Sacar (atajo) ---------- */
.card-swipe {
  position: relative;
  border-radius: var(--r-card);
  background: var(--pasado);
  overflow: hidden;
}
.swipe-sacar {
  position: absolute; right: 0; top: 0; bottom: 0; width: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: transparent; border: none; cursor: pointer; color: #FFFFFF;
}
.ss-icono { font-size: 20px; }
.ss-label { font-family: var(--f-titulos); font-weight: 700; font-size: 12px; }
.ss-delta {
  font-family: var(--f-titulos); font-weight: 700; font-size: 11px;
  font-variant-numeric: tabular-nums; opacity: .85;
}
.swipe-frente {
  position: relative;
  transition: transform .22s ease;
  touch-action: pan-y;
  border-radius: var(--r-card);
}
.card-swipe.revelado .swipe-frente { transform: translateX(-96px); }

/* ---------- card de producto (anatomía exacta del design system) ---------- */
.card-item {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.ci-top { display: flex; gap: 12px; cursor: pointer; }
.ci-info { flex: 1; min-width: 0; }
.ci-badges { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.ci-caption { margin-top: 2px; }
.ci-unitario {
  font-family: var(--f-titulos); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--tinta-400);
}
.ci-precio { text-align: right; flex-shrink: 0; }
.ci-sub {
  font-family: var(--f-titulos); font-weight: 700; font-size: 17px;
  font-variant-numeric: tabular-nums; color: var(--tinta-900);
}
.ci-sub.precio-oferta { color: var(--pasado-texto); }
.ci-porcant {
  font-family: var(--f-titulos); font-weight: 600; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--tinta-400); margin-top: 2px;
}
.ci-precio .precio-tachado { margin-top: 2px; }
.ci-controles { display: flex; align-items: center; gap: 8px; }
.ci-controles .btn-cambiar { margin-left: auto; }
/* badge chiquito inline (INFALTABLE / OFERTA en captions) */
.badge-inline { font-size: 10px; padding: 2px 7px; margin-left: 2px; vertical-align: 1px; }
/* la foto real vive dentro del placeholder rayado (fallback gratis) */
.foto-prod-placeholder { position: relative; overflow: hidden; }
.ci-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* variante compacta de una línea (modo datos reducidos, sin foto) */
.card-item.compacta { padding: 13px 14px; gap: 10px; }
.ci-verdet {
  height: 44px; padding: 0 14px;
  background: transparent; border: none; border-radius: var(--r-pildora);
  color: var(--yerba-600); font-family: var(--f-titulos); font-weight: 700;
  font-size: 14px; cursor: pointer;
}

/* ---------- pie fijo ÚNICO (§15.1): un solo contenedor en columna ----------
   fila 1 (derecha): píldora "🛒 Modo súper" · fila 2: "+" + conversacional + 🎤
   · abajo: footer (Total + Guardar + ⋯). Sin solapes: cada cosa empuja a la otra. */
.lista-pie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column;
  pointer-events: none; /* solo los hijos accionables reciben taps */
}
.lp-flotantes {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 16px 12px;
}
@media (min-width: 400px) { .lp-flotantes { padding: 0 20px 12px; } }
.lp-super { display: flex; justify-content: flex-end; }
.lp-super .fab-super { pointer-events: auto; }
.lp-conv { display: flex; align-items: center; gap: 10px; }
.lp-conv > * { pointer-events: auto; }
.conv-agregar {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid var(--yerba-600);
  background: var(--superficie); color: var(--yerba-600);
  font-size: 24px; font-weight: 600; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-flotante);
}
.conv-agregar:active { background: var(--yerba-50); }
.conv-pill {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  background: var(--yerba-900);
  border-radius: var(--r-pildora);
  padding: 8px 8px 8px 20px;
  box-shadow: 0 8px 28px rgba(28,43,35,.30);
}
.conv-input {
  flex: 1; min-width: 0;
  background: transparent; border: none;
  color: #F2EFE6; font-size: 14.5px; font-family: var(--f-cuerpo);
  padding: 8px 0;
}
.conv-input::placeholder { color: #B9C9BC; }
.conv-input:focus { outline: none; }
.conv-mic, .conv-enviar {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; border: none;
  background: rgba(255,255,255,.12); color: #F2EFE6;
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.conv-enviar { background: var(--yerba-600); font-size: 16px; }
.conv-mic.grabando { background: var(--pasado); animation: conv-pulso 1s ease infinite; }
@keyframes conv-pulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
/* mientras la IA piensa: spinner en la píldora */
.conv-pill.cargando .conv-mic,
.conv-pill.cargando .conv-enviar { display: none; }
.conv-pill.cargando::after {
  content: '';
  width: 20px; height: 20px; flex-shrink: 0; margin: 12px 12px 12px 0;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #FFFFFF;
  animation: conv-spin .8s linear infinite;
}
@keyframes conv-spin { to { transform: rotate(360deg); } }

/* ---------- footer (última fila del pie fijo): total + acciones ---------- */
.lista-footer {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--superficie);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -8px 28px rgba(28,43,35,.10);
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
.lf-total { flex: 1; min-width: 0; overflow: hidden; }
.lf-label { font-size: 12px; color: var(--tinta-400); }
/* el mockup usa 26px en el footer (money-total compacto) */
.lf-monto .money-total { font-size: 26px; line-height: 1.1; }
.lf-guardar {
  height: 52px; padding: 0 20px; flex-shrink: 0;
  background: var(--yerba-600); color: #FFFFFF;
  border: none; border-radius: var(--r-pildora);
  font-family: var(--f-titulos); font-weight: 700; font-size: 15px; cursor: pointer;
  box-shadow: 0 3px 0 var(--yerba-700);
  white-space: nowrap;
}
.lf-guardar:hover { background: var(--yerba-hov); }
.lf-guardar:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--yerba-700); }
.lf-super {
  height: 52px; padding: 0 16px; flex-shrink: 0;
  background: var(--superficie); color: var(--yerba-600);
  border: 1.5px solid var(--yerba-600); border-radius: var(--r-pildora);
  font-family: var(--f-titulos); font-weight: 700; font-size: 15px; cursor: pointer;
  white-space: nowrap;
}
.lf-super:active { background: var(--yerba-50); }
.lf-mas {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 50%; border: none;
  background: var(--hundido); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lf-mas:active { background: var(--linea); }
/* en pantallas muy finas el footer se aprieta sin romperse */
@media (max-width: 374px) {
  .lf-guardar { padding: 0 14px; font-size: 14px; }
  .lf-super { padding: 0 12px; font-size: 14px; }
  .lf-monto .money-total { font-size: 22px; }
}

/* ---------- sheet detalle de producto (F1) ---------- */
.det { display: flex; flex-direction: column; }
.det-foto {
  height: 200px; border-radius: 20px; overflow: hidden;
  background: repeating-linear-gradient(45deg, #F3EEE1 0 10px, #EFE9DA 10px 20px);
  display: flex; align-items: center; justify-content: center;
}
.det-foto img { width: 100%; height: 100%; object-fit: contain; }
.det .ci-badges { margin: 12px 0 0; }
.det-nombre {
  font-family: var(--f-titulos); font-weight: 700; font-size: 20px;
  letter-spacing: -.01em; margin-top: 8px;
}
.det-sub { margin-top: 4px; color: var(--tinta-400); }
.mono { font-family: ui-monospace, monospace; font-size: 12px; }
.det-bloque { margin-top: 14px; }
.det-bloque-titulo { display: block; color: var(--tinta-400); margin-bottom: 12px; }
.det-cad { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.det-cad + .det-cad { margin-top: 10px; }
.det-cad.sindato { opacity: .55; }
.cad-cubo {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  color: #FFFFFF; font-family: var(--f-titulos); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.det-cad-nombre { font-size: 14.5px; font-weight: 600; flex: 1; min-width: 0; }
.det-cad-precio {
  font-family: var(--f-titulos); font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.det-cad-precio.apagado { color: var(--tinta-600); }
.det-cad-delta {
  font-family: var(--f-titulos); font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--pasado-texto);
}
.det-hist-cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.det-hist-pct {
  font-family: var(--f-titulos); font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.det-canvas { width: 100%; height: 64px; display: block; }
.det-hist-pie {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--tinta-400); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.det-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.alerta-form {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--hundido); border-radius: var(--r-card); padding: 12px 14px;
}
.alerta-fila { display: flex; gap: 8px; }
.alerta-fila .input-lista { flex: 1; min-width: 0; }

/* input de la pantalla (rectángulo redondeado 12: contiene, no acciona) */
.input-lista {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1.5px solid var(--linea); border-radius: var(--r-input);
  background: var(--superficie);
  font-size: 16px; font-family: var(--f-cuerpo); color: var(--tinta-900);
}
.input-lista:focus { outline: none; border-color: var(--yerba-600); }

/* ---------- sheet "⇄ Cambiar" (E1/E2) ---------- */
.camb-prod { display: flex; align-items: center; gap: 12px; }
.camb-prod-info { flex: 1; min-width: 0; }
.camb-tabs { margin-top: 16px; }
.camb-opciones { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; min-height: 120px; }
.camb-opcion {
  width: 100%; display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--linea); border-radius: var(--r-card);
  padding: 12px 14px; background: var(--superficie);
  cursor: pointer; text-align: left; font-family: var(--f-cuerpo);
}
.camb-opcion.activa {
  border: 2.5px solid var(--yerba-600);
  background: var(--yerba-50);
  padding: 10.5px 12.5px;
}
.camb-op-info { flex: 1; min-width: 0; }
.camb-op-nombre { font-size: 14.5px; font-weight: 600; color: var(--tinta-900); }
.camb-op-delta { flex-shrink: 0; }
.camb-op-delta .delta-ok,
.camb-op-delta .delta-mal,
.camb-op-delta .delta-cero { font-size: 14px; }
.camb-aviso {
  margin-top: 14px;
  background: #FFF9EC; border: 1.5px solid var(--mate-500);
  border-radius: var(--r-card); padding: 14px 16px;
  font-family: var(--f-titulos); font-weight: 700; font-size: 15px;
  color: var(--mate-texto);
  font-variant-numeric: tabular-nums;
}
.camb-aviso .caption { font-family: var(--f-cuerpo); font-weight: 400; }
.camb-cta { margin-top: 16px; }
.camb-sacar {
  width: 100%; height: 44px; margin-top: 6px;
  background: transparent; border: none; cursor: pointer;
  color: var(--pasado-texto);
  font-family: var(--f-titulos); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.camb-vacio { padding: 20px 8px; font-size: 14.5px; color: var(--tinta-600); line-height: 1.5; }

/* ---------- sheets del comando conversacional / reoptimizar / cuenta ---------- */
.conv-respuesta {
  font-size: 14.5px; line-height: 1.5; color: var(--tinta-900);
  background: var(--hundido); border-radius: 12px;
  padding: 11px 14px; margin: 12px 0 0;
}
.conv-botones { display: flex; gap: 10px; margin-top: 16px; }
.conv-botones .btn-primario { flex: 1; }
.reopt-cambios {
  display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
  font-size: 14px; line-height: 1.45;
}
.reopt-cambio { display: flex; gap: 8px; }
.reopt-cambio > span:first-child { color: var(--yerba-600); flex-shrink: 0; }
.receta { font-size: 15px; line-height: 1.6; margin: 12px 0 0; }
.cuenta-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cuenta-error { font-size: 13.5px; color: var(--pasado-texto); line-height: 1.45; }
.menu-sheet { display: flex; flex-direction: column; }
.menu-sheet .badge { margin-left: auto; }

/* ---------- §15.4: deltas de repricing ---------- */
/* chip junto al precio: subió (rojo cálido) / bajó (verde), Sora 11/700 */
.chip-delta {
  display: inline-flex; align-items: center;
  font-family: var(--f-titulos); font-weight: 700; font-size: 11px;
  padding: 2px 7px; margin-top: 4px;
  border-radius: var(--r-pildora);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.chip-delta.subio { background: var(--pasado-fondo); color: var(--pasado-texto); }
.chip-delta.bajo  { background: var(--ok-fondo); color: var(--ok); }

/* banner sutil debajo del header: neto de los cambios de la semana */
.lista-deltas {
  margin-top: 12px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  padding: 10px 14px;
  font-size: 13px; line-height: 1.45; color: var(--tinta-600);
}
.ld-subio, .ld-bajo {
  font-family: var(--f-titulos); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ld-subio { color: var(--pasado-texto); }
.ld-bajo  { color: var(--ok); }

/* ---------- §15.2: vista compartida (solo lectura) ---------- */
.card-item.solo-lectura .ci-top { cursor: default; }
.lf-ro {
  flex-shrink: 0;
  font-family: var(--f-titulos); font-weight: 700; font-size: 13px;
  color: var(--tinta-400);
}

/* ============================================================================
   §16.3 — Auditoría de "mi lista de siempre" (la joya)
   Acceso visible arriba de la lista (.aud-acceso) + sheet grande (.aud-*):
   gráfico de evolución, "qué cambió" (chips de delta) y tarjetas de ahorro.
   100% tokens del design system: Sora para montos/títulos, tabular-nums,
   semánticos de plata solo en deltas, sheets radius 24 (los hereda .sheet).
   ============================================================================ */

/* ---------- acceso visible arriba de la lista ---------- */
.aud-acceso {
  width: 100%; margin-top: 12px;
  display: flex; align-items: center; gap: 12px;
  background: var(--yerba-900); color: #F2EFE6;
  border: none; border-radius: var(--r-card);
  padding: 14px 16px; cursor: pointer; text-align: left;
  box-shadow: var(--sombra-flotante);
}
.aud-acceso:active { transform: translateY(1px); }
.aud-acceso-icono {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; border-radius: 12px;
  background: rgba(242,198,109,.18);
}
.aud-acceso-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aud-acceso-titulo {
  font-family: var(--f-titulos); font-weight: 700; font-size: 15px;
  color: #F2EFE6;
}
.aud-acceso-sub { font-size: 12.5px; line-height: 1.35; color: #B9C9BC; }
.aud-acceso-flecha { color: var(--logo-carrito); font-size: 22px; flex-shrink: 0; }
/* variante discreta (borradores): un solo renglón fantasma sobre crema */
.aud-acceso-discreto {
  background: var(--superficie); color: var(--tinta-900);
  border: 1px solid var(--linea); box-shadow: none;
}
.aud-acceso-discreto .aud-acceso-icono { background: var(--hundido); font-size: 18px; width: 32px; height: 32px; }
.aud-acceso-discreto .aud-acceso-titulo { flex: 1; min-width: 0; font-size: 14px; }
.aud-acceso-discreto .aud-acceso-flecha { color: var(--tinta-400); }

/* ---------- sheet de auditoría ---------- */
.aud { display: flex; flex-direction: column; }
.aud-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.aud-h-nombre { font-weight: 600; font-size: 14px; color: var(--tinta-400); }
.aud-cuerpo { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.aud-bloque { padding: 16px; }
.aud-bloque-titulo {
  display: block; color: var(--tinta-400); margin-bottom: 12px;
}
.aud-vacio { font-size: 14.5px; line-height: 1.55; color: var(--tinta-600); }

/* — bloque 1: evolución (titular grande + gráfico) — */
.aud-titular {
  font-family: var(--f-titulos); font-weight: 800; font-size: 24px;
  letter-spacing: -.02em; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.aud-tit-subio  { color: var(--pasado-texto); }
.aud-tit-bajo   { color: var(--ok); }
.aud-tit-neutro { color: var(--tinta-900); }
.aud-subt-mes {
  font-size: 13px; color: var(--tinta-600); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.aud-canvas { width: 100%; height: 120px; display: block; margin-top: 14px; }
.aud-evo-pie {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--tinta-400); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* — bloque 2: qué cambió (chips de delta) — */
.aud-cambios-lista { display: flex; flex-direction: column; gap: 10px; }
.aud-cambio {
  display: flex; align-items: center; gap: 10px;
  min-height: 32px;
}
.aud-cambio-nombre {
  flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--tinta-900);
  line-height: 1.3;
}
.aud-chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  font-family: var(--f-titulos); font-weight: 700; font-size: 12px;
  padding: 3px 9px; border-radius: var(--r-pildora);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.aud-chip.subio { background: var(--pasado-fondo); color: var(--pasado-texto); }
.aud-chip.bajo  { background: var(--ok-fondo); color: var(--ok); }

/* — bloque 3: ahorro (tarjetas de sugerencia) — */
.aud-ahorro-header {
  font-size: 14.5px; line-height: 1.5; color: var(--tinta-900);
  margin-bottom: 12px;
}
.aud-ahorro-header strong {
  font-family: var(--f-titulos); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--ok);
}
.aud-afilada { font-size: 15px; line-height: 1.5; color: var(--tinta-600); }
.aud-sugs { display: flex; flex-direction: column; gap: 10px; }
.aud-sug {
  display: flex; align-items: center; gap: 12px;
  background: var(--hundido); border-radius: var(--r-card);
  padding: 12px 14px;
}
.aud-sug-cuerpo { flex: 1; min-width: 0; }
.aud-sug-de { display: flex; align-items: baseline; gap: 8px; }
.aud-sug-de-nombre {
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--tinta-600);
  text-decoration: line-through;
}
.aud-sug-de-precio {
  font-family: var(--f-titulos); font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums; color: var(--tinta-400);
  text-decoration: line-through; flex-shrink: 0;
}
.aud-sug-flecha { color: var(--yerba-600); font-size: 13px; line-height: 1; margin: 2px 0; }
.aud-sug-a { display: flex; align-items: baseline; gap: 8px; }
.aud-sug-a-nombre {
  flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--tinta-900);
}
.aud-sug-a-precio {
  font-family: var(--f-titulos); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--tinta-900); flex-shrink: 0;
}
.aud-sug-ahorro {
  font-size: 13px; color: var(--tinta-600); margin-top: 4px;
}
.aud-sug-ahorro strong {
  font-family: var(--f-titulos); font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--ok);
}
.aud-sug-btn {
  flex-shrink: 0; height: 44px; padding: 0 18px;
  background: var(--superficie); color: var(--yerba-600);
  border: 1.5px solid var(--yerba-600); border-radius: var(--r-pildora);
  font-family: var(--f-titulos); font-weight: 700; font-size: 14px; cursor: pointer;
}
.aud-sug-btn:hover { background: var(--yerba-50); }
.aud-sug-btn:active { transform: translateY(1px); }
.aud-sug-btn.cargando { opacity: .7; pointer-events: none; }

/* productos que no se pudieron chequear en el refresco (no son cambios de precio) */
.diff-sindato {
  margin-top: 10px; padding: 10px 12px;
  background: var(--hundido); border-radius: var(--r-chico, 12px);
  font-size: 13px; color: var(--tinta-600); line-height: 1.4;
}