/* ============================================================================
   CHANGUITO IA — app.css
   Design system del especialista (designsystem/DISENO.md + mockups *.dc.html).
   Acá vive TODO lo base: tokens, tipografía, botones, chips, cards, barra de
   presupuesto, sheets, toasts, skeletons, badges, controles y layout
   del shell. Sin navbar inferior: el home es el hub de navegación. Los CSS de pantalla (onboarding/armar/lista/super/extras) solo
   agregan lo propio de cada una.
   ========================================================================== */

/* ---------- Fuente Sora (local, una sola descarga; SOLO montos/títulos/botones) */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/sora-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/sora-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/sora-800.woff2') format('woff2');
}

/* ---------- Tokens (tal cual DISENO.md, no tocar) ---------- */
:root{
  /* marca */
  --yerba-900:#14352A; --yerba-700:#1E5C3C; --yerba-600:#27734B; --yerba-hov:#2A7E52;
  --yerba-50:#EEF5EA; --yerba-50-press:#DFEDDD;
  --mate-500:#E5A52E; --mate-100:#FAEFD7; --mate-texto:#95610A;
  /* neutros cálidos */
  --crema:#FAF7EF; --superficie:#FFFFFF; --hundido:#F3EEE1; --linea:#E3DCCB;
  --tinta-900:#1C2B23; --tinta-600:#5B685C; --tinta-400:#939C90;
  /* semánticos de plata (SOLO barras, deltas, estados de plata; NUNCA botones/nav) */
  --ok:#2E8757; --ok-fondo:#E4F1E3; --justito:#E5A52E; --justito-texto:#95610A;
  --pasado:#C44A32; --pasado-fondo:#FAE4DD; --pasado-texto:#B23A24;
  /* modo súper (oscuro, SOLO esa pantalla) */
  --sup-fondo:#12211A; --sup-card:#1A2F24; --sup-texto:#F2EFE6; --sup-sub:#7FA890;
  --sup-borde-check:#4A6354; --sup-footer:#0D1813; --sup-ok:#2E8757;
  --sup-justito:#E8B45A; --sup-pasado:#E07A5F; --sup-delta-ok:#8FCBA8;
  /* logo */
  --logo-fondo:#14352A; --logo-carrito:#F2C66D; --logo-rombo:#E5A52E;
  /* forma y elevación */
  --r-input:12px; --r-card:16px; --r-sheet:24px; --r-pildora:999px;
  --sombra-flotante:0 2px 8px rgba(28,43,35,.10);
  --sombra-sheet:0 8px 28px rgba(28,43,35,.18);
  --sombra-toast:0 8px 28px rgba(28,43,35,.25);
  /* tipografía */
  --f-titulos:'Sora',system-ui,sans-serif;
  --f-cuerpo:system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta-900);
  font-family: var(--f-cuerpo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
img { max-width: 100%; display: block; }
a { color: var(--yerba-600); }
[hidden] { display: none !important; }
.oculto { display: none !important; }

:focus-visible {
  outline: 3px solid rgba(39,115,75,.4);
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus:not(:focus-visible) { outline: none; }

/* ---------- Layout del shell ---------- */
#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: 0 16px;
  position: relative;
}
@media (min-width: 400px) { #app { padding: 0 20px; } }

/* animación de entrada de pantalla (fade + slide suave) */
@keyframes pantalla-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pantalla-in { animation: pantalla-in .22s ease both; }

/* header genérico de pantalla */
.pantalla-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 0 14px;
}
.display {
  font-family: var(--f-titulos); font-weight: 800; font-size: 28px;
  letter-spacing: -.02em; line-height: 1.15; color: var(--tinta-900);
  margin: 0;
}
.title {
  font-family: var(--f-titulos); font-weight: 700; font-size: 20px;
  letter-spacing: -.01em; color: var(--tinta-900); margin: 0;
}
.item-nombre { font-size: 15px; font-weight: 600; line-height: 1.3; }
.caption { font-size: 13px; color: var(--tinta-600); }
/* punto de cadena: indicador inline 8px junto al nombre del súper en captions
   (el sheet "Armar a mano" lo agranda a 10px con su regla más específica) */
.punto-cadena {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0; vertical-align: 0;
}
.micro {
  font-family: var(--f-titulos); font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-400);
}

/* botón volver ‹ (icónico de header) */
.btn-volver {
  width: 44px; height: 44px; border-radius: var(--r-pildora); border: none;
  background: var(--hundido); font-size: 20px; color: var(--tinta-600);
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.btn-volver:active { background: var(--linea); }

/* ---------- Marca / splash ---------- */
.logo-cuadro {
  width: 76px; height: 76px; border-radius: 24px; background: var(--logo-fondo);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.logo-rombo {
  position: absolute; top: 8px; right: 8px; width: 9px; height: 9px;
  background: var(--logo-rombo); transform: rotate(45deg);
}
.wordmark {
  font-family: var(--f-titulos); font-weight: 800; font-size: 30px;
  letter-spacing: -.02em; line-height: 1; color: var(--tinta-900);
}
.wordmark span { color: var(--yerba-600); }

.splash {
  min-height: 80dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; text-align: center;
}
.splash-frase { font-size: 15px; color: var(--tinta-600); line-height: 1.5; }
.splash-rueda {
  width: 28px; height: 28px; border-radius: 50%; margin-top: 8px;
  border: 3px solid var(--linea); border-top-color: var(--yerba-600);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Banner global sin conexión (mockup J3) ---------- */
.banner-offline {
  position: sticky; top: 0; z-index: 60;
  background: var(--yerba-900); color: var(--sup-texto);
  padding: 10px 16px; display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
}

/* ---------- Escala de plata ---------- */
.money {
  font-family: var(--f-titulos); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.money .m-s {
  font-size: .55em; font-weight: 600; vertical-align: .22em; color: var(--tinta-600);
}
.money-hero  { font-size: 48px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.money-total { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.money-lg    { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.money-md    { font-size: 17px; font-weight: 700; line-height: 1; }
.money-sm    { font-size: 13px; font-weight: 600; color: var(--tinta-400); line-height: 1; }
.money-sm .m-s { color: var(--tinta-400); }

/* deltas: SIEMPRE con flecha */
.delta-ok, .delta-mal, .delta-cero {
  font-family: var(--f-titulos); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.delta-ok   { color: var(--ok); }
.delta-mal  { color: var(--pasado); }
.delta-cero { color: var(--tinta-400); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--r-pildora); cursor: pointer;
  font-family: var(--f-titulos); font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease, transform .1s ease, box-shadow .1s ease;
}

/* primario: h56, sombra dura 3D, UNO por pantalla, el monto va en el botón */
.btn-primario {
  height: 56px; padding: 0 28px; width: 100%;
  background: var(--yerba-600); color: #FFFFFF; font-size: 17px;
  box-shadow: 0 3px 0 var(--yerba-700);
}
.btn-primario:hover { background: var(--yerba-hov); }
.btn-primario:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--yerba-700); }
.btn-primario:disabled, .btn-primario.deshabilitado {
  background: var(--linea); color: #A8A290; box-shadow: none;
  cursor: not-allowed; transform: none;
}
/* cargando: spinner + el label dice QUÉ está pasando */
.btn-primario.cargando { cursor: wait; opacity: .9; pointer-events: none; }
.btn-primario.cargando::before {
  content: ''; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid rgba(255,255,255,.35); border-top-color: #FFFFFF;
  animation: spin .8s linear infinite;
}

.btn-sec {
  height: 48px; padding: 0 24px;
  background: var(--superficie); color: var(--yerba-600); font-size: 15px;
  border: 1.5px solid var(--yerba-600);
}
.btn-sec:hover { background: var(--yerba-50); }
.btn-sec:active { background: var(--yerba-50-press); }

.btn-fantasma {
  height: 44px; padding: 0 16px;
  background: transparent; color: var(--yerba-600); font-size: 15px;
}
.btn-fantasma:hover { background: var(--yerba-50); }

.btn-icono {
  width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  background: var(--hundido); color: var(--tinta-600); font-size: 20px;
  border-radius: var(--r-pildora); border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icono:hover { background: #E9E4D6; }

/* "No había" (modo súper en claro lo reusa el sheet) */
.btn-nohabia {
  height: 48px; padding: 0 24px;
  background: var(--pasado-fondo); color: var(--pasado-texto); font-size: 15px;
}
.btn-nohabia:hover { background: #F5D5CB; }

/* ---------- Tarjeta (contenedor: rectángulo redondeado, borde, SIN sombra) */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-card);
  padding: 16px;
}
.tarjeta-producto { padding: 14px; }

/* foto de producto + placeholder rayado */
.foto-prod {
  width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0;
  object-fit: contain; background: var(--superficie);
}
.foto-prod-placeholder {
  width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0;
  background: repeating-linear-gradient(45deg,#F3EEE1 0 6px,#EFE9DA 6px 12px);
}
.foto-prod-chica, .foto-prod-placeholder.chica { width: 48px; height: 48px; border-radius: 10px; }

/* ---------- Chips ---------- */
/* gustos (blandos): suaves, verdes, con ✓ al activarse */
.chip {
  height: 44px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--superficie); color: var(--tinta-600);
  border: 1.5px solid var(--linea); border-radius: var(--r-pildora);
  font-family: var(--f-cuerpo); font-size: 15px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--yerba-600); }
.chip.activo {
  background: var(--yerba-50); border-color: var(--yerba-600); color: var(--tinta-900);
}
.chip.activo::before { content: '✓'; color: var(--yerba-600); font-weight: 700; }
.chip.chip-mas { border-style: dashed; }

/* restricciones (duras): tinta + candado, llenas al activarse */
.chip-duro {
  height: 44px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--superficie); color: var(--yerba-900);
  border: 2px solid var(--yerba-900); border-radius: var(--r-pildora);
  font-family: var(--f-cuerpo); font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s ease;
}
.chip-duro:hover { background: var(--hundido); }
.chip-duro.activo { background: var(--yerba-900); color: #FFFFFF; }
.chip-duro.activo::before { content: '🔒'; font-size: 14px; }
.chip-duro.chip-mas { border-style: dashed; }

/* ---------- Stepper ---------- */
.stepper {
  display: inline-flex; align-items: center;
  background: var(--hundido); border-radius: var(--r-pildora);
}
.stepper button {
  width: 44px; height: 44px; border: none; background: transparent;
  border-radius: var(--r-pildora); cursor: pointer;
  font-size: 22px; font-weight: 700; color: var(--yerba-600);
  display: flex; align-items: center; justify-content: center;
}
.stepper button:active { background: var(--linea); }
.stepper .stepper-cant {
  font-family: var(--f-titulos); font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums; min-width: 24px; text-align: center;
}

/* botón ⇄ Cambiar de la card */
.btn-cambiar {
  height: 44px; padding: 0 18px;
  background: var(--superficie); color: var(--yerba-600);
  border: 1.5px solid var(--yerba-50-press); border-radius: var(--r-pildora);
  font-family: var(--f-titulos); font-weight: 700; font-size: 14px; cursor: pointer;
  transition: border-color .15s ease;
}
.btn-cambiar:hover { border-color: var(--yerba-600); }

/* ---------- Barra de presupuesto (el corazón de la app) ---------- */
.barra-presu { display: flex; flex-direction: column; gap: 8px; }
.barra-presu .bp-encabezado {
  display: flex; align-items: baseline; gap: 6px;
}
.barra-presu .bp-monto {
  font-family: var(--f-titulos); font-weight: 800; font-size: 22px;
  font-variant-numeric: tabular-nums; color: var(--tinta-900);
}
.barra-presu .bp-de {
  font-family: var(--f-titulos); font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--tinta-400);
}
.barra-presu .bp-estado {
  margin-left: auto; font-family: var(--f-titulos); font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.barra-presu .bp-track {
  position: relative; height: 14px; border-radius: var(--r-pildora);
  background: var(--hundido); overflow: hidden; display: flex;
}
.barra-presu .bp-fill {
  height: 100%; border-radius: var(--r-pildora);
  transition: width .4s ease;
}
/* zona flexible: segmento rayado (lo que invade / lo que queda de estirable) */
.barra-presu .bp-flex {
  height: 100%;
  background: repeating-linear-gradient(45deg,#E5A52E 0 5px,#F6DCA6 5px 10px);
  transition: width .4s ease;
}
.barra-presu .bp-caption {
  font-size: 13px; color: var(--tinta-600);
}
.barra-presu .bp-caption strong { font-variant-numeric: tabular-nums; }
.barra-presu .bp-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
/* estados */
.barra-presu.ok      .bp-fill   { background: var(--ok); }
.barra-presu.ok      .bp-estado { color: var(--ok); }
.barra-presu.justito .bp-fill   { background: var(--justito); }
.barra-presu.justito .bp-estado { color: var(--justito-texto); }
.barra-presu.flexible .bp-fill  { background: var(--justito); }
.barra-presu.flexible .bp-estado { color: var(--justito-texto); }
.barra-presu.pasado  .bp-track  { background: var(--pasado-fondo); }
.barra-presu.pasado  .bp-fill   { background: var(--pasado); }
.barra-presu.pasado  .bp-estado { color: var(--pasado-texto); }
.barra-presu.pasado  .bp-monto  { color: var(--pasado-texto); }
/* Reoptimizar: la salida SIEMPRE a mano cuando te pasaste */
.btn-reoptimizar {
  height: 36px; padding: 0 16px; border: none; border-radius: var(--r-pildora);
  background: var(--pasado); color: #FFFFFF; cursor: pointer;
  font-family: var(--f-titulos); font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}

/* ---------- Bottom sheet ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20,53,42,.45);
  opacity: 0; transition: opacity .25s ease;
}
.sheet-backdrop.abierto { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
  max-width: 520px; margin: 0 auto;
  background: var(--superficie);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: 0 -8px 28px rgba(28,43,35,.18);
  padding: 12px 20px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  max-height: 88dvh; overflow-y: auto;
  transform: translateY(100%); transition: transform .28s cubic-bezier(.32,.72,.33,1);
  touch-action: pan-y;
}
.sheet.abierto { transform: translateY(0); }
.sheet-grabber {
  width: 40px; height: 4px; border-radius: var(--r-pildora);
  background: var(--linea); margin: 0 auto 16px;
}
/* Botón de cerrar explícito (además del backdrop y el swipe): target 44px,
   pegado arriba a la derecha del sheet, siempre visible al scrollear. */
/* ✕ pegado arriba a la derecha del sheet. sticky (no absolute: en un contenedor
   con scroll, absolute se va con el contenido). z-index ALTO para ganarle a
   cualquier cabezal interno sticky del propio contenido (el buscador usa uno con
   z-index 3 y fondo opaco que antes lo tapaba). Fondo sólido + sombra para
   leerse sobre fotos/inputs. float:right para no empujar el contenido. */
.sheet-cerrar {
  position: sticky; top: 4px; float: right; z-index: 30;
  width: 36px; height: 36px; margin: 0 0 -36px 0;
  border: none; border-radius: var(--r-pildora);
  background: var(--superficie); color: var(--tinta-900);
  box-shadow: 0 1px 6px rgba(28,43,35,.20);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sheet-cerrar:hover { background: var(--hundido); }
/* Mientras hay un sheet abierto, el fondo no scrollea (evita el "contenido
   detrás" que se movía). */
body.sheet-abierto { overflow: hidden; }
.sheet .sheet-titulo {
  font-family: var(--f-titulos); font-weight: 700; font-size: 19px;
  letter-spacing: -.01em; margin: 0;
}

/* ---------- Toasts (SIEMPRE con deshacer / salida) ---------- */
#toasts {
  position: fixed; left: 16px; right: 16px; bottom: 20px; z-index: 95;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 420px; pointer-events: auto;
  background: var(--yerba-900); color: #F2EFE6;
  border-radius: 14px; padding: 14px 18px;
  box-shadow: var(--sombra-toast);
  animation: toast-in .25s ease both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast.saliendo { opacity: 0; transform: translateY(12px); transition: all .25s ease; }
.toast .toast-msg { font-size: 15px; flex: 1; }
.toast .toast-delta {
  font-family: var(--f-titulos); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--sup-delta-ok);
}
.toast .toast-accion {
  background: transparent; border: none; cursor: pointer; padding: 8px;
  color: #F2C66D; font-family: var(--f-titulos); font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
/* error: qué pasó + qué hacer, acción en píldora */
.toast.error { background: var(--pasado-texto); color: #FFF6F3; }
.toast.error .toast-accion {
  background: rgba(255,255,255,.16); color: #FFFFFF;
  padding: 8px 14px; border-radius: var(--r-pildora);
}

/* ---------- Skeleton (shimmer, misma silueta que la card real) ---------- */
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.skeleton, .sk-bloque {
  background: linear-gradient(90deg,#F3EEE1 25%,#E9E4D6 37%,#F3EEE1 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}
.sk-card {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--r-card); padding: 14px;
  display: flex; gap: 12px; align-items: center;
}
.sk-foto { width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0; }
.sk-foto.chica { width: 48px; height: 48px; border-radius: 10px; }
.sk-lineas { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.sk-linea { height: 14px; }
.sk-linea.corta { height: 12px; width: 45%; }
.sk-linea.media { width: 70%; }
.sk-precio { width: 56px; height: 14px; align-self: center; flex-shrink: 0; }
.sk-barra { height: 14px; border-radius: var(--r-pildora); }
.sk-tarjeta { height: 120px; border-radius: var(--r-card); }

/* ---------- Campanita de avisos (header del home) ---------- */
/* punto ámbar de no leídos sobre el botón icónico 🔔 */
.btn-icono { position: relative; }
.punto-aviso {
  position: absolute; top: 3px; right: 3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--mate-500); border: 2px solid var(--crema);
}

/* ---------- Píldora "Modo súper" (vive en el pie fijo único de La Lista:
   .lista-pie > .lp-flotantes > .lp-super, ver lista.css §15.1) ---------- */
.fab-super {
  pointer-events: auto;
  height: 52px; padding: 0 22px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--yerba-900); color: #F2EFE6;
  border: none; border-radius: var(--r-pildora); cursor: pointer;
  font-family: var(--f-titulos); font-weight: 700; font-size: 15px;
  white-space: nowrap;
  box-shadow: var(--sombra-flotante);
  transition: transform .1s ease;
}
.fab-super:active { transform: translateY(2px); }

/* sin navbar, la barra de guardado del perfil baja al borde de la pantalla
   (pisa el bottom 78px de extras.css, que compensaba la navbar) */
#app .pf-guardar { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--f-titulos); font-weight: 700; font-size: 11px;
  padding: 3px 8px; border-radius: var(--r-pildora);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--hundido); color: var(--tinta-600);
}
.badge-oferta      { background: var(--pasado); color: #FFFFFF; }       /* siempre con % */
.badge-dietario    { background: var(--yerba-50); color: var(--yerba-600); }
.badge-dietario-mate { background: var(--mate-100); color: var(--mate-texto); }
.badge-recurrente  { background: var(--yerba-900); color: #F2C66D; }
.badge-bajo        { background: var(--yerba-50); color: var(--ok); }
.badge-subio       { background: var(--pasado-fondo); color: var(--pasado-texto); }
.badge-activa      { background: var(--yerba-50); color: var(--yerba-600); }
.badge-comprada    { background: var(--hundido); color: var(--tinta-600); }

/* precio en oferta: rojo cálido + lista tachada */
.precio-oferta { color: var(--pasado-texto); }
.precio-tachado {
  font-family: var(--f-titulos); font-weight: 600; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--tinta-400);
  text-decoration: line-through;
}

/* ---------- Segmented (período) ---------- */
.segmented {
  display: flex; background: var(--hundido);
  border-radius: var(--r-pildora); padding: 4px; gap: 2px;
}
.segmented button {
  flex: 1; height: 40px; border: none; background: transparent;
  border-radius: var(--r-pildora); cursor: pointer;
  font-size: 14px; color: var(--tinta-600);
}
.segmented button.activo {
  background: var(--superficie); color: var(--tinta-900);
  font-family: var(--f-titulos); font-weight: 700;
  box-shadow: 0 1px 4px rgba(28,43,35,.15);
}

/* ---------- Sliders ---------- */
/* flexibilidad: track hundido, fill mate, thumb blanco borde mate */
.slider-flex { position: relative; height: 28px; display: flex; align-items: center; }
.slider-flex .sf-track {
  position: absolute; left: 0; right: 0; height: 8px;
  border-radius: var(--r-pildora); background: var(--hundido);
}
.slider-flex .sf-fill {
  position: absolute; left: 0; height: 8px;
  border-radius: var(--r-pildora); background: var(--mate-500);
}
.slider-flex .sf-thumb {
  position: absolute; width: 28px; height: 28px; margin-left: -14px;
  border-radius: 50%; background: var(--superficie);
  border: 3px solid var(--mate-500);
  box-shadow: 0 2px 6px rgba(28,43,35,.2); cursor: grab;
}
.slider-flex input[type=range] {
  position: absolute; inset: 0; width: 100%; opacity: 0; cursor: grab; margin: 0;
}
.slider-valor {
  font-family: var(--f-titulos); font-weight: 700; font-size: 15px;
  color: var(--mate-texto); font-variant-numeric: tabular-nums;
}
.slider-extremos {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--tinta-400); margin-top: 6px;
}
/* de extremos (hábitos): gradiente suave, thumb yerba, labels a ambos lados */
.slider-habito { position: relative; height: 28px; display: flex; align-items: center; }
.slider-habito .sf-track {
  position: absolute; left: 0; right: 0; height: 8px;
  border-radius: var(--r-pildora);
  background: linear-gradient(90deg,#DFEDDD,#F3EEE1);
}
.slider-habito .sf-thumb {
  position: absolute; width: 28px; height: 28px; margin-left: -14px;
  border-radius: 50%; background: var(--superficie);
  border: 3px solid var(--yerba-600);
  box-shadow: 0 2px 6px rgba(28,43,35,.2); cursor: grab;
}
.slider-habito input[type=range] {
  position: absolute; inset: 0; width: 100%; opacity: 0; cursor: grab; margin: 0;
}
.slider-habito-labels {
  display: flex; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--tinta-600); margin-top: 6px;
}

/* ---------- Avatares de familia ---------- */
.avatar-miembro {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 64px; background: transparent; border: none; cursor: pointer; padding: 0;
}
.avatar-miembro .av-circulo {
  position: relative;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--mate-100); border: 2.5px solid var(--yerba-600);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.avatar-miembro .av-nombre { font-size: 13px; font-weight: 600; color: var(--tinta-900); }
/* candadito: tiene restricción dura */
.avatar-miembro .av-candado {
  position: absolute; bottom: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--yerba-900); color: #FFFFFF; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #FFFFFF;
}
/* excluido de esta compra (tap alterna) */
.avatar-miembro.excluido { opacity: .45; }
.avatar-miembro.excluido .av-circulo {
  background: var(--hundido); border: 2.5px dashed var(--tinta-400); filter: grayscale(1);
}
.avatar-miembro.excluido .av-nombre { text-decoration: line-through; }

/* ---------- Diff (cambios de precio / edición conversacional) ---------- */
.diff { display: flex; flex-direction: column; gap: 8px; }
.diff-fila {
  display: flex; align-items: center; gap: 10px;
  border-radius: 12px; padding: 11px 14px; font-size: 14.5px;
}
.diff-fila .diff-signo { font-family: var(--f-titulos); font-weight: 800; }
.diff-fila .diff-nombre { flex: 1; min-width: 0; }
.diff-fila .diff-precios {
  font-size: 13px; color: var(--tinta-600); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.diff-fila .diff-delta {
  font-family: var(--f-titulos); font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* subió (o se agrega plata): fondo rojizo */
.diff-fila.subio { background: var(--pasado-fondo); }
.diff-fila.subio .diff-signo { color: var(--pasado-texto); }
.diff-fila.subio .diff-delta { color: var(--pasado-texto); }
/* bajó (o se libera plata): fondo verdoso */
.diff-fila.bajo { background: var(--yerba-50); }
.diff-fila.bajo .diff-signo { color: var(--yerba-600); }
.diff-fila.bajo .diff-delta { color: var(--ok); }
/* total del diff */
.diff-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding: 14px 16px;
  background: var(--hundido); border-radius: 14px;
}
.diff-total .diff-total-label { font-size: 14.5px; font-weight: 600; }
.diff-total .diff-total-monto {
  font-family: var(--f-titulos); font-weight: 800; font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.diff-aviso {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding: 12px 14px;
  background: #FFF9EC; border: 1.5px solid var(--mate-500); border-radius: 14px;
  font-size: 13.5px; color: var(--mate-texto); font-weight: 600;
}

/* ---------- Estados vacíos (siempre con salida) ---------- */
.vacio {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 48px 36px;
}
.vacio .vacio-circulo {
  width: 110px; height: 110px; border-radius: 50%;
  background: repeating-linear-gradient(45deg,#F3EEE1 0 8px,#EFE9DA 8px 16px);
  display: flex; align-items: center; justify-content: center;
}
.vacio .vacio-titulo { font-family: var(--f-titulos); font-weight: 700; font-size: 18px; }
.vacio .vacio-texto { font-size: 14.5px; color: var(--tinta-600); line-height: 1.5; }

/* ---------- Listas de opciones dentro de sheets (mockup D3) ---------- */
.sheet-opcion {
  width: 100%; height: 56px; display: flex; align-items: center; gap: 14px;
  padding: 0 16px; background: transparent; border: none; border-radius: 14px;
  font-size: 16px; font-weight: 600; cursor: pointer; color: var(--tinta-900);
  text-align: left;
}
.sheet-opcion:hover { background: var(--hundido); }
.sheet-opcion.peligro { color: var(--pasado-texto); }
.sheet-opcion.peligro:hover { background: var(--pasado-fondo); }
.sheet-opcion .so-icono {
  width: 36px; height: 36px; border-radius: 10px; background: var(--hundido);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  flex-shrink: 0;
}

/* ---------- Accesibilidad: menos animaciones si lo piden ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- invitación a instalar la PWA (instalar.js) ---------- */
.instalar-banner {
  position: fixed; left: 12px; right: 12px; z-index: 80;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 496px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  background: var(--yerba-900); color: #F2EFE6;
  border-radius: var(--r-card); padding: 12px 14px;
  box-shadow: var(--sombra-sheet);
  transform: translateY(140%); opacity: 0;
  transition: transform .3s cubic-bezier(.32,.72,.33,1), opacity .3s ease;
}
.instalar-banner.abierto { transform: translateY(0); opacity: 1; }
.instalar-logo {
  width: 42px; height: 42px; flex-shrink: 0;
  background: #14352A; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.instalar-texto { flex: 1; min-width: 0; }
.instalar-titulo { font-family: var(--f-titulos); font-weight: 700; font-size: 15px; }
.instalar-sub { font-size: 13px; color: #B9C9BC; line-height: 1.4; margin-top: 2px; }
.instalar-icono {
  display: inline-block; transform: translateY(2px);
  font-size: 15px; color: #F2C66D;
}
.instalar-btn {
  flex-shrink: 0; height: 40px; padding: 0 18px;
  background: var(--mate-500); color: #14352A; border: none;
  border-radius: var(--r-pildora);
  font-family: var(--f-titulos); font-weight: 700; font-size: 14px; cursor: pointer;
}
.instalar-cerrar {
  flex-shrink: 0; width: 30px; height: 30px; align-self: flex-start;
  background: transparent; border: none; color: #7FA890;
  font-size: 15px; cursor: pointer; line-height: 1;
}