/* ============================================================================
   CHANGUITO IA — super.css
   Modo súper: LA única pantalla oscura del producto (mockup "04 Modo Super",
   tokens --sup-* de DISENO.md). Todo crece un escalón: checks de 56px, texto
   20px+, targets de 56px. Una mano en el changuito, otra en el teléfono.
   ========================================================================== */

/* fondo oscuro de toda la pantalla; el badge propio reemplaza al banner global */
body.modo-super { background: var(--sup-fondo); }
body.modo-super .banner-offline { display: none !important; }
body.modo-super .skeleton {
  background: linear-gradient(90deg,#1A2F24 25%,#22392C 37%,#1A2F24 63%);
  background-size: 400% 100%;
}

.super {
  color: var(--sup-texto);
  padding-bottom: 190px; /* aire para el footer fijo + mic */
  min-height: 100dvh;
}

/* ---------- header: ✕ + cadena + badge offline ---------- */
.sup-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 0 0;
}
.sup-cerrar {
  width: 44px; height: 44px; border-radius: var(--r-pildora); border: none;
  background: rgba(255,255,255,.08); font-size: 17px; color: #B9C9BC;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sup-cerrar:active { background: rgba(255,255,255,.16); }
.sup-header-info { flex: 1; min-width: 0; }
.sup-header-titulo {
  font-family: var(--f-titulos); font-weight: 700; font-size: 16px;
  color: var(--sup-texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sup-header-sub { font-size: 12.5px; color: var(--sup-sub); }
.sup-badge {
  background: rgba(255,255,255,.10); color: #B9C9BC;
  font-family: var(--f-titulos); font-weight: 700; font-size: 10.5px;
  padding: 5px 10px; border-radius: var(--r-pildora);
  white-space: nowrap; flex-shrink: 0;
}

/* ---------- "Llevás" vivo (sticky arriba, bg footer) ---------- */
.sup-llevas {
  position: sticky; top: 8px; z-index: 5;
  margin-top: 14px;
  background: var(--sup-footer); border-radius: 16px; padding: 14px 18px;
}
.sup-llevas-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.sup-llevas-label { font-size: 15px; color: var(--sup-sub); }
.sup-llevas-monto {
  font-family: var(--f-titulos); font-weight: 800; font-size: 28px;
  color: var(--sup-texto); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; white-space: nowrap;
}
.sup-llevas-monto .m-s { font-size: .55em; font-weight: 600; vertical-align: .22em; color: var(--sup-sub); }
.sup-llevas-de { font-size: 15px; font-weight: 600; color: var(--sup-sub); font-variant-numeric: tabular-nums; }
.sup-llevas-track {
  height: 10px; border-radius: var(--r-pildora);
  background: rgba(255,255,255,.10); overflow: hidden; margin-top: 8px;
}
.sup-llevas-fill {
  height: 100%; border-radius: var(--r-pildora);
  background: var(--sup-ok); transition: width .4s ease;
}
.sup-llevas.justito .sup-llevas-fill { background: var(--sup-justito); }
.sup-llevas.pasado  .sup-llevas-fill { background: var(--sup-pasado); }

/* ---------- checklist gigante por góndola ---------- */
.sup-gondola {
  font-family: var(--f-titulos); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sup-sub);
  margin: 18px 0 10px;
}
.sup-items { display: flex; flex-direction: column; gap: 8px; }

.sup-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--sup-card); border-radius: 16px; padding: 12px 14px;
  border: 2px solid transparent;
  transition: opacity .25s ease, border-color .25s ease;
}
/* el próximo de la lista, sutilmente resaltado (mockup G1) */
.sup-item.proximo { border-color: rgba(46,135,87,.5); }
/* tildado: se apaga con gusto */
.sup-item.tildado { opacity: .55; }
/* "no había": gris, fuera del total */
.sup-item.nohabia { opacity: .4; }

/* check 56×56: el target principal */
.sup-check {
  width: 56px; height: 56px; border-radius: 16px;
  border: 3px solid var(--sup-borde-check); background: transparent;
  flex-shrink: 0; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-size: 32px; font-weight: 700; line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}
.sup-item.tildado .sup-check { background: var(--sup-ok); border-color: var(--sup-ok); }
/* animación satisfactoria al tildar */
@keyframes sup-pop {
  0%   { transform: scale(.78); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.sup-check.pop { animation: sup-pop .35s cubic-bezier(.34,1.56,.64,1); }

.sup-item-cuerpo {
  flex: 1; min-width: 0; text-align: left;
  background: transparent; border: none; padding: 0; cursor: pointer;
  font-family: var(--f-cuerpo); color: inherit;
}
.sup-item-nombre {
  font-family: var(--f-titulos); font-weight: 600; font-size: 20px;
  color: var(--sup-texto); line-height: 1.25;
}
.sup-item.tildado .sup-item-nombre { text-decoration: line-through; }
.sup-item.nohabia .sup-item-nombre { text-decoration: line-through; color: var(--sup-sub); }
.sup-item-sub { font-size: 14px; color: var(--sup-sub); margin-top: 2px; }

.sup-item-derecha { flex-shrink: 0; display: flex; align-items: center; }
.sup-item-precio {
  font-family: var(--f-titulos); font-weight: 700; font-size: 18px;
  color: var(--sup-texto); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sup-item.tildado .sup-item-precio { color: #B9C9BC; }
.sup-item.nohabia .sup-item-precio { color: var(--sup-sub); text-decoration: line-through; }

/* píldora "No había" (h44, rojo apagado del mockup) */
.btn-sup-nohabia {
  height: 44px; padding: 0 14px;
  background: rgba(196,74,50,.22); color: #F2A18D;
  border: none; border-radius: var(--r-pildora);
  font-family: var(--f-titulos); font-weight: 700; font-size: 14px;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
/* deshacer del "no había": "Sí había ✓" */
.btn-sup-sihabia {
  height: 44px; padding: 0 14px;
  background: rgba(46,135,87,.22); color: var(--sup-delta-ok);
  border: none; border-radius: var(--r-pildora);
  font-family: var(--f-titulos); font-weight: 700; font-size: 14px;
  cursor: pointer; flex-shrink: 0; white-space: nowrap;
}

/* ---------- footer fijo: conteo + Terminé ---------- */
.sup-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  max-width: 520px; margin: 0 auto;
  background: var(--sup-footer);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 12px;
}
.sup-footer-conteo {
  flex: 1; font-family: var(--f-titulos); font-weight: 800; font-size: 20px;
  color: var(--sup-texto); font-variant-numeric: tabular-nums;
}
.sup-footer-conteo .sfc-de { color: var(--sup-sub); font-weight: 600; font-size: 15px; }
.btn-termine {
  height: 54px; padding: 0 28px;
  background: var(--sup-ok); color: #FFFFFF;
  border: none; border-radius: var(--r-pildora);
  font-family: var(--f-titulos); font-weight: 700; font-size: 16px; cursor: pointer;
  flex-shrink: 0;
}
.btn-termine:active { transform: translateY(1px); }

/* ---------- mic grande: acá la voz es protagonista ---------- */
.sup-mic {
  position: fixed; z-index: 71;
  right: 16px; bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  width: 64px; height: 64px; border-radius: 50%; border: none;
  background: var(--sup-ok); color: #FFFFFF; font-size: 28px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.sup-mic:active { transform: scale(.96); }
@keyframes sup-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(46,135,87,.55), 0 6px 20px rgba(0,0,0,.45); }
  70%  { box-shadow: 0 0 0 18px rgba(46,135,87,0), 0 6px 20px rgba(0,0,0,.45); }
  100% { box-shadow: 0 0 0 0 rgba(46,135,87,0), 0 6px 20px rgba(0,0,0,.45); }
}
.sup-mic.escuchando { animation: sup-pulso 1.2s ease infinite; }
@media (min-width: 521px) {
  .sup-mic { right: calc(50vw - 244px); }
}

/* ---------- sheet oscuro (sustitutos "No había", mockup G2) ---------- */
.sheet.sheet-super {
  background: var(--sup-card); color: var(--sup-texto);
  box-shadow: 0 -8px 28px rgba(0,0,0,.4);
}
.sheet.sheet-super .sheet-grabber { background: rgba(255,255,255,.18); }
.sheet.sheet-super .sheet-titulo { color: var(--sup-texto); font-size: 20px; }
.sup-sust-sub { font-size: 14.5px; color: var(--sup-sub); margin: 6px 0 0; }
.sup-sust-opciones { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.sup-sust-opcion {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px;
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--f-cuerpo); color: inherit;
}
.sup-sust-opcion.mejor {
  border: 2.5px solid var(--sup-ok); background: rgba(46,135,87,.12);
  padding: 12.5px; /* compensa el borde más grueso */
}
.sup-sust-textos { flex: 1; min-width: 0; }
.sup-sust-nombre {
  font-family: var(--f-titulos); font-weight: 600; font-size: 17px;
  color: var(--sup-texto); line-height: 1.3;
}
.sup-sust-detalle { font-size: 13.5px; color: var(--sup-sub); font-variant-numeric: tabular-nums; margin-top: 2px; }
.sup-sust-delta {
  font-family: var(--f-titulos); font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--sup-delta-ok);
  flex-shrink: 0; white-space: nowrap;
}
.sup-sust-delta.mas { color: var(--sup-pasado); }

/* botones del mundo oscuro */
.btn-sup-primario {
  height: 58px; width: 100%; margin-top: 16px;
  background: var(--sup-ok); color: #FFFFFF;
  border: none; border-radius: var(--r-pildora);
  font-family: var(--f-titulos); font-weight: 700; font-size: 17px; cursor: pointer;
}
.btn-sup-primario:disabled { opacity: .45; cursor: not-allowed; }
.btn-sup-fantasma {
  height: 46px; width: 100%; margin-top: 6px;
  background: transparent; color: #B9C9BC;
  border: none; font-family: var(--f-titulos); font-weight: 700; font-size: 15px;
  cursor: pointer;
}

/* ---------- cierre: "¿Cuánto te salió en caja?" (mockup G3) ---------- */
.sup-cierre {
  min-height: 100dvh; display: flex; flex-direction: column;
  color: var(--sup-texto);
}
.sup-cierre-volver {
  margin-top: 18px; align-self: flex-start;
}
.sup-cierre-cuerpo {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 0 8px;
}
.sup-cierre-emoji { text-align: center; font-size: 40px; }
.sup-cierre-titulo {
  font-family: var(--f-titulos); font-weight: 800; font-size: 25px;
  letter-spacing: -.02em; color: var(--sup-texto);
  text-align: center; margin-top: 14px; line-height: 1.25;
}
/* input gigante subrayado en verde */
.sup-cierre-input {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  margin-top: 24px; border-bottom: 3px solid var(--sup-ok); padding-bottom: 10px;
}
.sup-cierre-input .peso {
  font-family: var(--f-titulos); font-weight: 600; font-size: 24px; color: var(--sup-sub);
}
.sup-cierre-input input {
  width: 230px; background: transparent; border: none; outline: none;
  font-family: var(--f-titulos); font-weight: 800; font-size: 44px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  color: var(--sup-texto); caret-color: var(--sup-ok); padding: 0;
}
.sup-cierre-input input::placeholder { color: var(--sup-borde-check); }
/* resumen vivo: lista decía / diferencia / contra presupuesto */
.sup-cierre-resumen {
  margin-top: 22px; background: var(--sup-card); border-radius: 16px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 9px;
}
.sup-cierre-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.sup-cierre-fila .scf-label { color: var(--sup-sub); }
.sup-cierre-fila .scf-valor {
  font-family: var(--f-titulos); font-weight: 700; color: var(--sup-texto);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.scf-valor.ambar { color: var(--sup-justito); }
.scf-valor.verde { color: var(--sup-delta-ok); }
.scf-valor.rojo  { color: var(--sup-pasado); }
.sup-cierre-nota { font-size: 13px; color: var(--sup-sub); text-align: center; margin-top: 14px; }
.sup-cierre-acciones { padding: 16px 0 28px; display: flex; flex-direction: column; gap: 8px; }
.sup-cierre-acciones .btn-sup-primario { margin-top: 0; height: 56px; }

/* ---------- resultado del cierre ---------- */
.sup-resultado {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 0 24px; color: var(--sup-texto);
}
.sup-resultado-emoji { font-size: 56px; }
.sup-resultado-titulo {
  font-family: var(--f-titulos); font-weight: 800; font-size: 26px;
  letter-spacing: -.02em; line-height: 1.25;
}
.sup-resultado-sub { font-size: 15px; color: var(--sup-sub); line-height: 1.5; font-variant-numeric: tabular-nums; }
.sup-resultado .btn-sup-primario { max-width: 320px; }
.sup-resultado .btn-sup-fantasma { max-width: 320px; }

/* ---------- confetti CSS (desvío < 5%: ¡le pegamos!) ---------- */
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 99; overflow: hidden; }
.confeti i {
  position: absolute; top: -16px; width: 8px; height: 14px; border-radius: 2px;
  opacity: .95;
  animation: confeti-caer linear forwards;
}
@keyframes confeti-caer {
  to { transform: translateY(110vh) rotate(720deg); opacity: .85; }
}

/* ---------- skeleton de carga propio (oscuro) ---------- */
.sup-sk-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--sup-card); border-radius: 16px; padding: 12px 14px;
}
.sup-sk-check { width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0; }
.sup-sk-lineas { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sup-sk-linea { height: 16px; border-radius: 6px; }
.sup-sk-linea.corta { width: 40%; height: 12px; }

/* ---------- error / vacío en oscuro ---------- */
.sup-vacio {
  min-height: 80dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 0 32px; color: var(--sup-texto);
}
.sup-vacio-titulo { font-family: var(--f-titulos); font-weight: 700; font-size: 20px; }
.sup-vacio-texto { font-size: 15px; color: var(--sup-sub); line-height: 1.5; }