/* Tipografía Plus Jakarta Sans, autoalojada (ficheros .woff2 en ./fonts) -
   antes se cargaba desde Google Fonts, pero eso depende de que el
   dispositivo pueda alcanzar fonts.googleapis.com; autoalojarla hace que
   cargue igual de rápido para todo el mundo, funcione sin conexión (el
   Service Worker ya cachea el resto de la app) y evite el parpadeo de
   fuente de sistema mientras se descarga. Solo necesitamos el subset
   "latin": ya incluye á/é/í/ó/ú/ñ/¿/¡, todos los caracteres del español. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-700.woff2') format('woff2');
}

:root {
  /* Paleta de marca SuperBien (revisada a petición de Iris para que se
     sienta más "verde lima del logo" y menos "app de bienestar genérica"):
     Blanco cálido #FDFCF9 (fondo general, muy sutil, ya no crema/beige),
     blanco puro (tarjetas), Verde Lima claro #E7EDC9 (derivado del verde
     del logo - hero de "Escanear producto", chips, avatar, iconos de
     info/favoritos, en vez del verde menta grisáceo de antes), Verde Hoja
     #BAC36E (acentos puntuales, ya en el manual de marca), Verde Bosque
     #173C2A (botones, titulares, texto - más vivo que el verde oscuro
     anterior #2A3D32), Amarillo Sol #F0CB6D (acento secundario, sin
     cambios), Gris Cálido #D8D3CA (separadores/bordes, sin cambios). */
  --brand: #BAC36E;
  --brand-dark: #173C2A;
  --brand-darker: #112D20;
  --brand-light: #E7EDC9;
  --accent: #F0CB6D;
  --ok: #173C2A;
  --ok-bg: #E7EDC9;
  --bad: #C0392B;
  --bad-bg: #FBEAE8;
  --warn: #B7791F;
  --warn-bg: #FDF3DF;
  --precaucion: #C2540A;
  --precaucion-bg: #FBE8D8;
  --info: #2B6CB0;
  --info-bg: #E3EEFB;
  --neutral: #6B7280;
  --neutral-bg: #F0F1F3;
  --text: #173C2A;
  --muted: #6B7280;
  --bg: #FDFCF9;
  --card-bg: #FFFFFF;
  --border: #D8D3CA;
  font-size: 16px;
}

* { box-sizing: border-box; }

/* Los navegadores NO heredan automáticamente la tipografía de la página en
   botones/inputs/selects - usan la fuente del sistema salvo que se les
   diga explícitamente lo contrario. Por eso las tarjetas (son <button>) y
   el menú de abajo (también <button>) se quedaban con la fuente antigua
   aunque el resto de la app ya usara Plus Jakarta Sans. */
button, input, select, textarea {
  font-family: inherit;
}

/* El borde de las tarjetas usa el Gris Cálido de la marca, que es un tono
   muy suave sobre el fondo Crema - esta sombra ligera ayuda a que cada
   tarjeta se siga distinguiendo con claridad. (.home-card de la Home tiene
   su propio tratamiento, más suave todavía - ver más abajo). */
.result-row, .cant-card, .check-row, .fav-card,
.not-found-box, .ingredients-box, .result-card {
  box-shadow: 0 1px 3px rgba(42, 61, 50, 0.06);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  color: var(--text);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.topbar__brand {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar__logo { height: 34px; width: auto; display: block; }

.topbar__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-light);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-dark);
  cursor: pointer;
  flex-shrink: 0;
}
.topbar__avatar svg { width: 20px; height: 20px; }

.app-main {
  flex: 1;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 20px 96px;
}

.screen { display: none; }
.screen--active { display: block; animation: fadein .15s ease-out; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero {
  padding: 16px 0 4px;
}

.hero__greeting {
  color: var(--brand-dark);
  opacity: 0.75;
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 2px;
}

.hero h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.25;
}

.muted { color: var(--muted); font-size: 0.92rem; }

/* ---------- "Revisando para ti" (resumen del perfil en Inicio) ---------- */

.profile-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.profile-summary__label {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.profile-summary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-chip {
  background: var(--brand-light);
  color: var(--brand-dark);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.profile-summary__edit {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.profile-summary__edit svg { width: 15px; height: 15px; display: block; }

/* ---------- Tarjeta grande "Escanear producto" ---------- */

.hero-card {
  position: relative;
  overflow: hidden;
  background: var(--brand-light);
  border-radius: 22px;
  padding: 24px;
  margin-top: 28px;
}

.hero-card__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.hero-card__icon-circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--brand-dark);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-card__icon-circle svg { width: 32px; height: 32px; }

.hero-card__body { flex: 1; min-width: 0; padding-top: 4px; }

.hero-card__title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 6px;
}

.hero-card__desc {
  color: var(--brand-dark);
  opacity: 0.75;
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0;
}

.hero-card__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand-dark);
  color: white;
  border: none;
  border-radius: 13px;
  padding: 14px 26px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 22px;
  max-width: 260px;
}
.hero-card__btn:active { background: var(--brand-darker); }
.hero-card__btn svg { width: 18px; height: 18px; }

.hero-card__illustration {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 158px;
  height: 158px;
  color: var(--brand-dark);
  opacity: 0.09;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Tarjetas de acceso rápido (grid 2x2) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 12px;
  padding: 13px 20px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 12px;
  text-align: center;
}

.btn--primary { background: var(--brand-dark); color: white; }
.btn--primary:active { background: var(--brand-darker); }

.btn--secondary { background: white; color: var(--brand-dark); border: 1.5px solid var(--brand-dark); }

.btn-icon {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--text);
}

.home-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 30px;
}

.home-card {
  background: var(--card-bg);
  border: 1px solid #EDEAE3;
  border-radius: 18px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(42, 61, 50, 0.05);
}

.home-card__icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.home-card__icon-circle svg { width: 22px; height: 22px; stroke-width: 2; }

/* Mismo tono de saturación/claridad en las 4 - así se leen como una
   familia de colores a propósito, no como iconos sueltos de sitios
   distintos (cada uno con su propio significado, pero con la misma
   "temperatura" visual). */
.home-card__icon-circle--foto { background: #FDF3DF; color: #B7791F; }
.home-card__icon-circle--favoritos { background: #FBEAE8; color: #C0392B; }
.home-card__icon-circle--perfil { background: #E7E3F6; color: #5B4E9E; }
.home-card__icon-circle--cantidades { background: #E3EEFB; color: #2B6CB0; }

.home-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 6px;
}

.home-card__title { font-size: 0.98rem; font-weight: 600; }

.home-card__desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.3;
}

/* ---------- Cabecera de sección ("Escaneados recientemente") ---------- */

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 38px;
  margin-bottom: 16px;
}

.section-header__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

.section-header__link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-dark);
  opacity: 0.8;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* ---------- Tira de "Escaneados recientemente" (estilo "stories") ---------- */
/* Estética prestada de las stories de redes sociales (círculo + aro de
   color en scroll horizontal), pero NO su funcionamiento: no son
   contenidos efímeros ni hay indicador de visto/no visto. El aro tiene un
   significado propio de SuperBien - es el resultado del último análisis
   de ese producto (verde = compatible, ámbar = revisar/precaución,
   rojo = puede dar problemas, gris = sin datos suficientes) - por eso es
   un color sólido, nunca un degradado. */

.story-scans {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  scrollbar-width: none;
}
.story-scans::-webkit-scrollbar { display: none; }

/* Ancho del ítem = diámetro del aro + un pelín de aire para el nombre.
   Con este ancho y esta separación se ven ~4 círculos completos y un
   poco del quinto en el ancho típico de un móvil - la pista visual de
   que se puede deslizar, como un carrusel. */
.story-item {
  flex: 0 0 auto;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
}

/* Aro fino (2-3px): su único significado es el resultado del análisis
   (verde/ámbar/rojo/gris), nunca un degradado. Una pequeña separación
   blanca entre la foto y el aro evita que el color "sangre" sobre la
   fotografía. */
.story-ring {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5px;
  border: 2.5px solid var(--neutral);
  background: var(--card-bg);
  flex-shrink: 0;
  box-sizing: border-box;
}
.story-ring--ok { border-color: var(--brand); }
.story-ring--bad { border-color: var(--bad); }
.story-ring--warn { border-color: var(--warn); }
.story-ring--sin-datos { border-color: var(--neutral); }
.story-ring--empty {
  border-style: dashed;
  border-color: var(--border);
  background: none;
}

/* La fotografía ocupa todo el interior del círculo con object-fit: cover,
   como una story real. Cuando no hay foto todavía, el placeholder es un
   fondo verde muy suave (el mismo verde de marca que usamos en otras
   tarjetas) con un icono de producto/bolsa - nada de cámara, que sugiere
   "haz una foto" en vez de "esto es un producto". */
.story-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-light);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-photo svg { width: 26px; height: 26px; }

/* El estado vacío es un único elemento fijo (no forma parte del scroll de
   varios productos): círculo algo mayor que el resto (llamada a la
   acción) y texto centrado debajo sin recorte, ya que es un texto fijo
   corto y conocido, no el nombre variable de un producto. */
.story-item--empty { width: 100px; }
.story-item--empty .story-ring { width: 80px; height: 80px; }
.story-item--empty .story-photo { background: none; color: var(--muted); }
.story-item--empty .story-name {
  display: block;
  -webkit-line-clamp: initial;
  overflow: visible;
  white-space: normal;
  text-align: center;
}

.story-name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- Banner informativo ---------- */
/* A propósito ligero, casi sin "peso" visual - es un recordatorio, no una
   alerta. El aviso legal más completo (que SuperBien no sustituye el
   criterio médico) vive en la pantalla de Resultado, no aquí. */

.info-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 4px 0 0;
  margin-top: 30px;
  border-top: 1px solid #EDEAE3;
  padding-top: 18px;
}

.info-banner__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.info-banner__icon svg { width: 13px; height: 13px; }

.info-banner__body { flex: 1; min-width: 0; }

.info-banner__title {
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0 0 2px;
  color: var(--text);
}

.info-banner__text {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

.disclaimer {
  margin-top: 24px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}

.screen-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.screen-header h2 { font-size: 1.15rem; font-weight: 600; margin: 0; flex: 1; }

.camera-box {
  width: 100%;
  min-height: 260px;
  background: #111;
  border-radius: 14px;
  overflow: hidden;
}

.manual-barcode {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.manual-barcode__row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.manual-barcode__row .search-input { margin-top: 0; flex: 1; min-width: 0; }
.manual-barcode__row .btn { margin-top: 0; width: auto; flex-shrink: 0; }

.status-text {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

.status-text--error { color: var(--bad); }
.status-text--ok { color: var(--ok); font-weight: 600; }

.foto-preview {
  width: 100%;
  border-radius: 14px;
  margin-top: 12px;
  max-height: 260px;
  object-fit: cover;
}

.foto-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.foto-actions .btn { margin-top: 0; cursor: pointer; }

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 14px;
}

.progress-bar__fill {
  height: 100%;
  width: 0%;
  background: var(--brand-dark);
  transition: width .2s ease-out;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.result-header h2 { font-size: 1.15rem; font-weight: 600; margin: 0; }

.result-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}

.result-card__img {
  max-height: 120px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.result-card__name { font-weight: 600; font-size: 1.05rem; }
.result-card__brand { color: var(--muted); font-size: 0.88rem; margin-bottom: 8px; }

.verdict-banner {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  font-weight: 700;
}

.result-details {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-row {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
}

.result-row__label {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.result-row .badge { margin-top: 6px; }

.result-row__detail {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 6px;
}

.result-row__detail--bad { color: var(--bad); font-weight: 600; }
.result-row__detail--ok { color: var(--ok); font-weight: 600; }
.result-row__detail--precaucion { color: var(--precaucion); font-weight: 600; }
.result-row__detail--info { color: var(--info); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

.badge--ok { background: var(--ok-bg); color: var(--ok); }
.badge--bad { background: var(--bad-bg); color: var(--bad); }
.badge--warn { background: var(--warn-bg); color: var(--warn); }
.badge--precaucion { background: var(--precaucion-bg); color: var(--precaucion); }
.badge--neutral { background: var(--neutral-bg); color: var(--neutral); }

.verdict-banner.badge--ok { background: var(--ok-bg); color: var(--ok); }
.verdict-banner.badge--bad { background: var(--bad-bg); color: var(--bad); }
.verdict-banner.badge--warn { background: var(--warn-bg); color: var(--warn); }
.verdict-banner.badge--precaucion { background: var(--precaucion-bg); color: var(--precaucion); }
.verdict-banner.badge--neutral { background: var(--neutral-bg); color: var(--neutral); }

.lactosa-estimacion {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--info-bg);
  font-size: 0.8rem;
  line-height: 1.4;
}
.lactosa-estimacion__nivel { font-weight: 700; }
.lactosa-estimacion__nivel--verde { color: var(--ok); }
.lactosa-estimacion__nivel--amarillo { color: var(--warn); }
.lactosa-estimacion__nivel--naranja { color: var(--precaucion); }

.ingredients-box {
  margin-top: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.85rem;
}

.ingredients-box__title { font-weight: 600; margin-bottom: 6px; }
.ingredients-box p { color: var(--muted); margin: 0; line-height: 1.5; }

.no-ingredients-box {
  margin-top: 16px;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.no-ingredients-box p { margin: 0 0 10px; font-size: 0.88rem; color: var(--text); }
.no-ingredients-box .btn { margin-top: 0; }

.not-found-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-top: 12px;
}

.not-found-box p { margin: 0 0 8px; }
.not-found-box .btn { margin-top: 8px; }

.fav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.fav-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fav-card__img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.fav-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-light);
  font-size: 1.4rem;
}

.fav-card__body { flex: 1; min-width: 0; }
.fav-card__name { font-weight: 600; font-size: 0.92rem; }
.fav-card__brand { color: var(--muted); font-size: 0.8rem; margin-bottom: 4px; }
.fav-card__remove { color: var(--bad); }

.check-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 600;
  cursor: pointer;
}

.check-row input { width: 18px; height: 18px; accent-color: var(--brand-dark); }
.check-row__emoji { font-size: 1.1rem; }

.submodo {
  margin: -2px 0 4px 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--brand-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.submodo[hidden] { display: none; }
.submodo__pregunta { font-weight: 600; font-size: 0.88rem; margin: 0; }
.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.86rem;
  cursor: pointer;
}
.radio-row input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand-dark); flex-shrink: 0; }

.search-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 0.95rem;
  margin-top: 12px;
  font-family: inherit;
  background: var(--card-bg);
  color: var(--text);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

.chip--active {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: white;
}

.cant-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.cant-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}

.cant-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.cant-card__cat {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.nivel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.nivel-dot.nivel--ok { background: var(--ok); }
.nivel-dot.nivel--warn { background: var(--warn); }
.nivel-dot.nivel--bad { background: var(--bad); }

.cant-card__name { font-weight: 600; font-size: 1rem; }
.cant-card__amount { color: var(--brand-dark); font-weight: 600; font-size: 0.9rem; margin-top: 2px; }
.cant-card__detalle { color: var(--muted); font-size: 0.8rem; margin-top: 4px; line-height: 1.4; }

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: white;
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 10;
}

.tabbar__btn {
  flex: 1;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 2px 4px;
  cursor: pointer;
}

.tabbar__btn svg { width: 22px; height: 22px; display: block; }

.tabbar__btn--active { color: var(--brand-dark); font-weight: 700; }

.tabbar__dot {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: transparent;
  margin-top: 1px;
}
.tabbar__btn--active .tabbar__dot { background: var(--brand); }