/* ============================================================
   Bioma — componentes (frontend-spec.md §4) + pantallas
   ============================================================ */

/* ===================== BOTONES ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--fs-btn);
  font-weight: var(--w-med);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  border-radius: var(--r-sm);
  padding: 13px 24px;              /* texto llena la caja */
  min-height: var(--touch-min);
  line-height: 1;
  width: 100%;
  transition: background .15s, opacity .15s, transform .05s;
  user-select: none;
}
.btn:active { transform: scale(.99); }
.btn-primary { background: var(--olive); color: var(--on-olive); }
.btn-primary:hover { background: var(--olive-light); }
.btn-secondary { background: transparent; color: var(--olive); border: 1px solid var(--olive); }
.btn-secondary:hover { background: rgba(107,124,74,0.08); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-ghost { background: transparent; color: var(--text-muted); text-transform: uppercase; }
.btn[disabled], .btn.is-loading { opacity: .55; pointer-events: none; }
.btn .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.btn-inline { width: auto; }

/* ===================== CARDS ===================== */
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--sh-card);
}
.card-olive { background: var(--olive); color: var(--on-olive); border-color: transparent; }
.card-olive .label, .card-olive .muted { color: rgba(245,240,232,.72); }
.card-tap { cursor: pointer; transition: transform .06s; }
.card-tap:active { transform: scale(.995); }

/* ===================== BADGES / PASTILLAS ===================== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--olive-soft); color: var(--olive);
  font-size: var(--fs-label); letter-spacing: 2px; text-transform: uppercase; font-weight: var(--w-med);
  border-radius: var(--r-xs); padding: 4px 9px; line-height: 1;
}
.badge-active { background: var(--olive); color: var(--on-olive); }
.badge-pro { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.badge-soft { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

/* Pill de racha (dorado quirúrgico: solo el punto/acento) */
.streak {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 6px 12px 6px 10px;
}
.streak .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.streak b { font-family: var(--font-ui); font-weight: 600; color: var(--text); font-size: 14px; }
.streak span { font-size: var(--fs-label); letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }

/* ===================== INPUTS ===================== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); font-weight: var(--w-med); }
.input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font-size: var(--fs-body);
  color: var(--text);
  transition: border-color .15s;
}
.input::placeholder { color: var(--text-disabled); }
.input:focus { outline: none; border-color: var(--olive); }
.input.err { border-color: var(--danger); }
.field-err { color: var(--danger); font-size: var(--fs-body-sm); min-height: 0; }
.field-hint { color: var(--text-muted); font-size: 12px; }

/* Checkbox (ChecklistItem estilo consentimiento) */
.check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 4px 0; }
.check-box {
  width: 22px; height: 22px; flex: none; border-radius: var(--r-xs);
  border: 1.75px solid var(--olive); background: var(--bg);
  display: flex; align-items: center; justify-content: center; color: transparent; transition: background .15s;
  margin-top: 1px;
}
.check-row.on .check-box { background: var(--olive); color: var(--on-olive); }
.check-row .check-box .ic { width: 15px; height: 15px; stroke-width: 2.4; }

/* ===================== APP HEADER ===================== */
.appbar {
  position: sticky; top: 0; z-index: 20;
  padding: calc(var(--safe-top) + 14px) var(--gutter) 12px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  background: var(--bg);
}
.appbar.scrolled { box-shadow: 0 1px 0 var(--border); }
.appbar .hi-name { font-family: var(--font-display); font-size: 26px; color: var(--text); line-height: 1.1; }
.appbar .hi-sub { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.iconbtn {
  width: 42px; height: 42px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--olive); background: var(--bg-2); border: 1px solid var(--border);
}
.iconbtn:active { background: var(--border); }

/* ===================== SCREEN / SCROLL ===================== */
.screen { padding: 0 var(--gutter) calc(var(--tabbar-h) + var(--safe-bottom) + 28px); }
.screen-scroll { height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.block { margin-top: var(--s-6); animation: fadeup .35s ease both; }
.block-title { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-3); }
.block-title .n { font-family: var(--font-display); color: var(--gold); font-size: 18px; font-weight: 500; }
.block-title h3 { font-size: var(--fs-h); font-weight: var(--w-med); color: var(--text); letter-spacing: .3px; }

/* ===================== TAB BAR ===================== */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: var(--app-max);
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--bg); border-top: 1px solid var(--border);
  display: flex; z-index: 30;
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--text-muted); padding-top: 6px;
}
.tab .ic { width: 23px; height: 23px; }
.tab span { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: var(--w-med); }
.tab.active { color: var(--olive); }
.tab.active .lab-dot { opacity: 1; }

/* ===================== PROGRESS RING ===================== */
.ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ring-wrap .ring-center { position: absolute; text-align: center; }
.ring-center .pct { font-family: var(--font-display); font-size: 34px; color: var(--olive); line-height: 1; }
.ring-center .sub { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.ring-mini .pct { font-size: 15px; font-family: var(--font-ui); font-weight: 600; }

/* barra de progreso */
.pbar { height: 5px; background: var(--border); border-radius: var(--r-xs); overflow: hidden; }
.pbar > i { display: block; height: 100%; background: var(--olive); border-radius: var(--r-xs); transition: width .4s ease; }

/* ===================== CHECKLIST ITEM (hábito/row) ===================== */
.item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 10px; transition: border-color .15s, background .15s;
}
.item .item-ic { color: var(--olive); flex: none; }
.item .item-txt { flex: 1; }
.item .item-txt b { display: block; font-weight: 500; color: var(--text); font-size: var(--fs-body); }
.item .item-txt small { color: var(--text-muted); font-size: 13px; }
.item .tick {
  width: 26px; height: 26px; border-radius: var(--r-pill); flex: none;
  border: 1.75px solid var(--olive-soft); background: var(--bg);
  display: flex; align-items: center; justify-content: center; color: transparent; transition: background .15s, border-color .15s;
}
.item.done { background: rgba(107,124,74,0.06); }
.item.done .tick { background: var(--olive); border-color: var(--olive); color: var(--on-olive); }
.item.done .item-txt b { color: var(--olive); }
.item .tick .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.item.rowlink { cursor: pointer; }
.item .chev { color: var(--text-disabled); }

/* ===================== VASOS DE AGUA (8 pastillas) ===================== */
.glasses { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.glass {
  aspect-ratio: 1 / 1.35; border-radius: var(--r-sm);
  border: 1.75px solid var(--olive-soft); background: var(--bg);
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden; position: relative;
}
.glass i { display: block; width: 100%; background: var(--olive-soft); transition: height .3s ease; height: 0; }
.glass.on { border-color: var(--olive); }
.glass.on i { height: 100%; background: var(--olive); }

/* ===================== CHECK-IN 30s (rating 1..5) ===================== */
.checkin-metric { margin-bottom: var(--s-4); }
.checkin-metric .m-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--text-body); }
.checkin-metric .m-head .ic { color: var(--olive); }
.checkin-metric .m-head b { font-weight: 500; font-size: var(--fs-body); color: var(--text); }
.checkin-metric .m-head small { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.scale button {
  height: 46px; border-radius: var(--r-sm);
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text-muted); font-weight: 600; font-size: 17px; transition: all .12s;
}
.scale button.sel { background: var(--olive); border-color: var(--olive); color: var(--on-olive); }
.scale button.near { background: var(--olive-soft); border-color: var(--olive-soft); color: var(--olive); }

/* ===================== HACK CARD (dorado) ===================== */
.hack {
  background: var(--gold-soft); border: 1px solid var(--gold);
  border-radius: var(--r-md); padding: var(--s-4) var(--s-5);
  display: flex; gap: 12px; align-items: flex-start;
}
.hack .hack-ic { color: var(--gold); flex: none; }
.hack .tag { display: inline-block; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 4px; }
.hack b { color: var(--text); font-weight: 500; display: block; }
.hack p { color: var(--text-body); font-size: 13px; margin-top: 3px; }

/* ===================== BIA MASCOTA ===================== */
.bia-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-4) 0; }
.bia-mascot { cursor: pointer; animation: pulse-olive 5s ease-in-out infinite; position: relative; }
.bia-mascot .notif { position: absolute; top: 6px; right: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--bg); }
.bia-hero .bia-say { margin-top: 10px; font-family: var(--font-display); font-size: 20px; color: var(--text); max-width: 280px; }
.bia-hero .bia-lvl { margin-top: 4px; }

/* ===================== AUDIO CARD / CANAL ===================== */
.audio-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px;
}
.audio-thumb {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-sm);
  background: var(--olive); color: var(--on-olive);
  display: flex; align-items: center; justify-content: center;
}
.audio-card .a-txt { flex: 1; min-width: 0; }
.audio-card .a-txt b { display: block; font-family: var(--font-display); font-size: 18px; color: var(--text); font-weight: 500; line-height: 1.2; }
.audio-card .a-txt small { color: var(--text-muted); font-size: 12px; letter-spacing: .5px; }
.audio-card .a-play { width: 40px; height: 40px; border-radius: var(--r-pill); border: 1.75px solid var(--olive); color: var(--olive); display: flex; align-items: center; justify-content: center; flex: none; }
.chan-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
.chan-chip {
  flex: none; min-width: 120px; padding: 14px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--border);
}
.chan-chip .c-name { font-family: var(--font-display); font-size: 20px; color: var(--text); }
.chan-chip .c-meta { font-size: var(--fs-label); letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }

/* ===================== ESTADOS DE SISTEMA ===================== */
.state { text-align: center; padding: var(--s-10) var(--s-5); animation: fadeup .3s both; }
.state .ic { color: var(--text-muted); margin-bottom: var(--s-3); }
.state h3 { font-family: var(--font-display); font-size: var(--fs-display-sm); color: var(--text); margin-bottom: 6px; }
.state p { color: var(--text-muted); font-size: var(--fs-body-sm); max-width: 280px; margin: 0 auto var(--s-4); }
.state .btn { width: auto; margin: 0 auto; }

/* Skeleton */
.skel { background: linear-gradient(90deg, var(--bg-2) 25%, #e6dfd2 37%, var(--bg-2) 63%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--r-md); }
.skel-line { height: 14px; margin: 8px 0; }
.skel-card { height: 74px; margin-bottom: 10px; }

/* Offline / aviso banner */
.banner {
  display: flex; align-items: center; gap: 8px;
  background: var(--olive-soft); color: var(--olive);
  padding: 9px var(--gutter); font-size: 13px; font-weight: 500;
}
.banner.warn { background: var(--gold-soft); color: #7a6220; }
.banner .ic { width: 17px; height: 17px; }

/* pequeño aviso "guardado local" */
.saved-flag { font-size: 12px; color: var(--olive); display: inline-flex; align-items: center; gap: 4px; }

/* ===================== AUTH ===================== */
.auth-wrap { min-height: 100dvh; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 40px) var(--s-6) calc(var(--safe-bottom) + 28px); }
.auth-logo { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--s-8); }
.auth-logo .tagline { font-family: var(--font-display); font-size: 30px; color: var(--text); line-height: 1.15; margin-top: var(--s-4); }
.auth-logo .manifest { color: var(--text-muted); font-size: var(--fs-body-sm); margin-top: 8px; max-width: 300px; }
.auth-tabs { display: flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px; margin-bottom: var(--s-6); }
.auth-tabs button { flex: 1; padding: 11px; border-radius: var(--r-pill); font-size: var(--fs-btn); letter-spacing: var(--ls-btn); text-transform: uppercase; font-weight: var(--w-med); color: var(--text-muted); }
.auth-tabs button.on { background: var(--olive); color: var(--on-olive); }
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.form .btn { margin-top: var(--s-2); }
.form-alt { text-align: center; margin-top: var(--s-4); }
.linklike { color: var(--olive); font-weight: 500; font-size: var(--fs-body-sm); background: none; }
.form-msg { border-radius: var(--r-sm); padding: 10px 12px; font-size: var(--fs-body-sm); text-align: center; }
.form-msg.err { background: rgba(154,74,60,0.10); color: var(--danger); }
.form-msg.ok { background: var(--olive-soft); color: var(--olive); }

/* ===================== SHEET / OVERLAY (Bia) ===================== */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.overlay .veil { position: absolute; inset: 0; background: var(--overlay); animation: fadeup .2s both; }
.sheet {
  position: relative; width: 100%; max-width: var(--app-max);
  background: var(--bg); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--s-5) var(--s-5) calc(var(--safe-bottom) + var(--s-6));
  box-shadow: var(--sh-float); animation: sheetup .28s cubic-bezier(.2,.8,.2,1) both;
  max-height: 88dvh; overflow-y: auto;
}
.sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto var(--s-4); }
.sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-4); }
.sheet-head .s-name { font-family: var(--font-display); font-size: 22px; color: var(--text); }

/* burbujas de chat */
.bubbles { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--s-4); }
.bubble { max-width: 82%; padding: 10px 14px; border-radius: var(--r-lg); font-size: var(--fs-body-sm); line-height: 1.55; }
.bubble.bia { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-body); border-bottom-left-radius: 4px; }
.bubble.me { align-self: flex-end; background: var(--olive); color: var(--on-olive); border-bottom-right-radius: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { border: 1px solid var(--border); background: var(--bg-2); color: var(--text-body); border-radius: var(--r-pill); padding: 8px 14px; font-size: 13px; }
.chip.on { background: var(--olive); color: var(--on-olive); border-color: var(--olive); }
.bia-input { display: flex; gap: 8px; align-items: center; margin-top: var(--s-3); }
.bia-input .input { border-radius: var(--r-pill); }
.bia-input .send { width: 46px; height: 46px; flex: none; border-radius: var(--r-pill); background: var(--olive); color: var(--on-olive); display: flex; align-items: center; justify-content: center; }

/* logo mark */
.logo-mark { display: inline-flex; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 20px); transform: translateX(-50%); z-index: 60;
  background: var(--text); color: var(--bg); font-size: 13px; padding: 10px 16px; border-radius: var(--r-pill); box-shadow: var(--sh-float); animation: fadeup .25s both; max-width: 90%; }

/* gamificación card */
.game { display: flex; align-items: center; gap: 14px; }
.game .lvl-badge { width: 52px; height: 52px; border-radius: var(--r-pill); background: var(--olive-soft); color: var(--olive); display: flex; align-items: center; justify-content: center; flex: none; }
.game .g-txt b { font-family: var(--font-display); font-size: 22px; color: var(--text); display:block; }
.game .g-txt small { color: var(--text-muted); font-size: 12px; }