/* ========================================================================
   KIVA Ahorro — sistema de diseño (prototipo de alta fidelidad)
   ======================================================================== */
:root{
  --navy:#254B62;
  --navy-deep:#15303D;
  --navy-ink:#1B3A4A;
  --amber:#DDA53A;
  --amber-text:#946811;
  --amber-soft:#F4E4C2;
  --paper:#FCFAF6;
  --white:#FFFFFF;
  --ink:#1E343F;
  --muted:#5E707A;
  --faint:#647079;
  --line:#E3DED3;
  --line-strong:#CFD8DC;
  --info-bg:#EAF1F4;
  --info-border:#D6E2E8;
  --equal-hover:#EDF1F2;
  --red:#B0413E;
  --green:#2E7D5B;

  --r-card:16px;
  --r-btn:13px;
  --shadow-card:0 1px 2px rgba(21,48,61,.04);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  background:#DBE0E2;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  background-image:radial-gradient(circle at 50% 0%, #E4E8E9, #D2D8DA 70%);
  min-height:100vh;
}
.num{ font-variant-numeric:tabular-nums; }

/* ----------------------------- STAGE LAYOUT ---------------------------- */
.stage{
  display:flex;
  align-items:stretch;
  min-height:100vh;
  gap:0;
}

/* review sidebar (fuera del teléfono) */
.review{
  width:266px;
  flex:0 0 266px;
  background:#fff;
  border-right:1px solid var(--line);
  padding:26px 22px 40px;
  overflow-y:auto;
  height:100vh;
  position:sticky;
  top:0;
}
.review-brand{ display:flex; align-items:flex-end; gap:10px; margin-bottom:6px; }
.review-brand svg{ width:26px; height:28px; display:block; }
.review-brand .wm{ font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--navy); line-height:1; white-space:nowrap; }
.review-tag{ font-size:12px; color:var(--faint); margin:0 0 26px; letter-spacing:.01em; }
.review-group{ margin-bottom:22px; }
.review-group h4{
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); margin:0 0 10px;
}
.review-links{ display:flex; flex-direction:column; gap:4px; }
.review-links button{
  appearance:none; text-align:left; border:none; background:none;
  font-family:inherit; font-size:14px; color:var(--muted);
  padding:9px 12px; border-radius:9px; cursor:pointer; display:flex; gap:10px; align-items:center;
  transition:background .12s, color .12s;
}
.review-links button .n{ font-size:11px; color:var(--faint); width:18px; font-weight:600; }
.review-links button:hover{ background:#F4F2EC; color:var(--ink); }
.review-links button.active{ background:var(--navy); color:#fff; }
.review-links button.active .n{ color:rgba(255,255,255,.6); }
.review-hint{ font-size:11.5px; color:var(--faint); line-height:1.5; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }

/* main */
.main{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:32px; min-width:0;
}

/* ------------------------------- PHONE --------------------------------- */
.phone{
  position:relative;
  width:402px;
  height:min(858px, calc(100vh - 56px));
  background:#0C1418;
  border-radius:56px;
  padding:13px;
  box-shadow:0 40px 90px rgba(18,38,49,.34), 0 6px 20px rgba(18,38,49,.18);
}
.screenwrap{
  position:relative;
  width:100%; height:100%;
  background:var(--paper);
  border-radius:44px;
  overflow:hidden;
}
/* status bar */
.statusbar{
  position:absolute; top:0; left:0; right:0; height:54px; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 30px; pointer-events:none;
  font-size:15px; font-weight:600; color:var(--ink); letter-spacing:-.01em;
}
.statusbar .sb-right{ display:flex; align-items:center; gap:7px; }
.phone[data-theme="navy"] .statusbar{ color:#fff; }
.notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:118px; height:32px; background:#0C1418; border-radius:18px; z-index:45;
}

/* viewport (scroll area) */
.viewport{
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.viewport::-webkit-scrollbar{ display:none; }

.screen{ display:none; min-height:100%; }
.screen.active{ display:block; }
.screen-pad{ padding:66px 22px 30px; }
.screen-pad.has-nav{ padding-bottom:104px; }
.screen-pad.has-topbar{ padding-top:8px; }

@media (prefers-reduced-motion:no-preference){
  .screen.active{ animation:scr .34s cubic-bezier(.2,.7,.2,1); }
  @keyframes scr{ from{ transform:translateY(8px);} to{ transform:none;} }
}

/* navy body screens */
.screen.navy{ background:var(--navy-deep); }

/* ------------------------------ TOPBAR --------------------------------- */
.topbar{
  position:relative; z-index:30;
  display:flex; align-items:center; gap:12px;
  padding:62px 22px 8px;
}
.topbar .back{
  width:38px; height:38px; flex:0 0 38px; border-radius:11px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--navy);
  transition:background .12s;
}
.topbar .back:hover{ background:var(--equal-hover); }
.topbar h2{ font-size:18px; font-weight:600; letter-spacing:-.02em; margin:0; color:var(--ink); text-wrap:balance; }

/* ------------------------------ TYPE ----------------------------------- */
.eyebrow{ font-size:11.5px; font-weight:600; color:var(--amber-text); letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
.h1{ font-size:25px; font-weight:600; letter-spacing:-.03em; line-height:1.12; margin:0; color:var(--ink); text-wrap:balance; }
.h2{ font-size:20px; font-weight:600; letter-spacing:-.02em; line-height:1.15; margin:0; color:var(--ink); text-wrap:balance; }
.lede{ font-size:15px; line-height:1.5; color:var(--muted); margin:10px 0 0; text-wrap:pretty; }
.cap{ font-size:13px; line-height:1.45; color:var(--faint); margin:0; text-wrap:pretty; }
.muted{ color:var(--muted); }

/* ------------------------------ CARDS ---------------------------------- */
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; box-shadow:var(--shadow-card); }
.card + .card, .card + .stack, .stack > * + *{ margin-top:14px; }
.stack{ display:flex; flex-direction:column; }
.stack-14 > * + *{ margin-top:14px; }
.stack-10 > * + *{ margin-top:10px; }

.card-hero{ background:var(--navy); border:none; color:#fff; border-radius:18px; padding:20px; }
.card-hero *{ color:#fff; }
.card-info{ background:var(--info-bg); border:1px solid var(--info-border); border-radius:var(--r-card); padding:20px; }
.card-amber{ background:var(--amber-soft); border:none; border-radius:var(--r-card); padding:20px; }
.card-amber .ink{ color:#6B4E12; }

/* ------------------------------ BUTTONS -------------------------------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:54px; border-radius:var(--r-btn);
  font-family:inherit; font-size:16px; font-weight:600; letter-spacing:-.01em;
  cursor:pointer; border:1px solid transparent; transition:background .14s, border-color .14s, transform .05s;
  text-decoration:none;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:#1E3F53; }
.btn-secondary{ background:var(--amber-soft); color:var(--amber-text); }
.btn-secondary:hover{ background:#EFDBB2; }
.btn-equal{ background:#fff; border-color:var(--line-strong); color:var(--navy); }
.btn-equal:hover{ background:var(--equal-hover); border-color:var(--navy); }
.btn-ghost{ background:transparent; color:var(--navy); }
.btn-ghost.on-navy{ color:#fff; border-color:rgba(255,255,255,.34); }
.btn-ghost.on-navy:hover{ background:rgba(255,255,255,.08); }
.btn-amber{ background:var(--amber); color:#3A2A06; }
.btn-amber:hover{ background:#D29B2C; }
.btn-row{ display:flex; flex-direction:column; gap:10px; }

/* --------------------------- BADGE / PILL ------------------------------ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--amber-soft); color:var(--amber-text);
  font-size:13px; font-weight:600; padding:4px 10px; border-radius:99px;
}
.badge-line{ color:var(--amber); background:rgba(221,165,58,.14); }

/* ---------------------------- TOOLTIP "i" ------------------------------ */
.tip{ position:relative; display:inline-flex; vertical-align:middle; }
.tip-i{
  width:18px; height:18px; border-radius:50%;
  border:1.4px solid var(--amber-text); color:var(--amber-text);
  font-style:italic; font-weight:700; font-size:11px; font-family:Georgia, serif;
  display:inline-flex; align-items:center; justify-content:center; cursor:help;
  background:none;
}
.tip-i:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.tip-bubble{
  position:absolute; bottom:150%; left:50%; transform:translateX(-50%) translateY(4px);
  width:248px; background:var(--navy-ink); color:#fff;
  font-size:12.5px; line-height:1.45; font-weight:400;
  padding:11px 13px; border-radius:11px; z-index:60;
  opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
  box-shadow:0 10px 26px rgba(18,38,49,.26);
}
.tip-bubble::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--navy-ink);
}
.tip:hover .tip-bubble, .tip:focus-within .tip-bubble{ opacity:1; transform:translateX(-50%) translateY(0); }
/* tooltip anclado a la derecha (para "i" cerca del borde) */
.tip-right .tip-bubble{ left:auto; right:-8px; transform:translateX(0) translateY(4px); text-transform:none; letter-spacing:normal; }
.tip-right:hover .tip-bubble, .tip-right:focus-within .tip-bubble{ transform:translateX(0) translateY(0); }
.tip-right .tip-bubble::after{ left:auto; right:11px; transform:none; }

/* ---------------------------- PROGRESS --------------------------------- */
.progress{ height:9px; background:#EAE4D6; border-radius:99px; overflow:hidden; }
.card-hero .progress{ background:rgba(255,255,255,.18); }
.progress > i{ display:block; height:100%; background:var(--amber); border-radius:99px; }
.progress-marks{ display:flex; justify-content:space-between; margin-top:8px; }
.progress-marks span{ font-size:12px; color:var(--faint); }

/* ----------------------------- LEDGER ---------------------------------- */
.ledger{ display:flex; flex-direction:column; }
.ledger-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.ledger-row:last-child{ border-bottom:none; }
.ledger-row .lbl{ font-size:14px; color:var(--muted); line-height:1.35; }
.ledger-row .amt{ font-size:16px; font-weight:600; color:var(--navy); white-space:nowrap; }
.ledger-row.neg .amt{ color:var(--amber-text); }
.ledger-row.total{ padding-top:16px; }
.ledger-row.total .lbl{ color:var(--ink); font-weight:600; font-size:15px; }
.ledger-row.total .amt{ font-size:24px; font-weight:700; color:var(--navy); }

/* --------------------------- TIMELINE ---------------------------------- */
.timeline{ display:flex; flex-direction:column; }
.tl-item{ display:flex; gap:15px; }
.tl-marker{ display:flex; flex-direction:column; align-items:center; flex:0 0 auto; }
.tl-dot{ width:18px; height:18px; border-radius:50%; border:2px solid var(--line-strong); background:#fff; margin-top:2px; }
.tl-dot.done{ background:var(--amber); border-color:var(--amber); }
.tl-dot.current{ background:var(--navy); border-color:var(--navy); box-shadow:0 0 0 4px rgba(37,75,98,.12); }
.tl-line{ width:2px; flex:1; background:var(--line); min-height:22px; margin:3px 0; }
.tl-item:last-child .tl-line{ display:none; }
.tl-body{ flex:1; min-width:0; padding-bottom:22px; }
.tl-item:last-child .tl-body{ padding-bottom:0; }
.tl-body .t{ font-size:15px; font-weight:600; color:var(--ink); margin:0; line-height:1.25; }
.tl-body .s{ font-size:13px; color:var(--faint); margin:3px 0 0; line-height:1.4; }
.tl-body.pending .t{ color:var(--faint); font-weight:500; }

/* --------------------------- BOTTOM NAV -------------------------------- */
.bottomnav{
  position:absolute; bottom:13px; left:13px; right:13px; z-index:35;
  border-bottom-left-radius:44px; border-bottom-right-radius:44px;
  display:none; background:var(--paper);
  border-top:1px solid var(--line); padding:9px 8px calc(env(safe-area-inset-bottom) + 18px);
}
.phone[data-nav="on"] .bottomnav{ display:flex; }
/* el contenido no debe quedar tapado por la nav */
.phone[data-nav="on"] .viewport{ padding-bottom:104px; }
.bottomnav button{
  flex:1; appearance:none; border:none; background:none; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0;
  color:var(--faint); transition:color .12s;
}
.bottomnav button svg{ width:24px; height:24px; }
.bottomnav button .lab{ font-size:11px; font-weight:600; letter-spacing:.01em; }
.bottomnav button.active{ color:var(--navy); }

/* home indicator */
.home-ind{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:134px; height:5px; border-radius:99px; background:rgba(30,52,63,.28); z-index:50; }
.phone[data-theme="navy"] .home-ind{ background:rgba(255,255,255,.42); }
.phone[data-nav="on"] .home-ind{ display:none; }

/* ------------------------------ LOGO ----------------------------------- */
.logo{ display:inline-flex; align-items:flex-end; gap:11px; }
.logo svg{ width:30px; height:32px; display:block; }
.logo .wm{ font-size:23px; font-weight:700; letter-spacing:-.025em; line-height:.9; white-space:nowrap; }
.logo.on-navy .wm{ color:#fff; }
.logo.on-paper .wm{ color:var(--navy); }

/* --------------------------- FORM FIELDS ------------------------------- */
.field{ margin-top:14px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:7px; }
.field input{
  width:100%; height:52px; border-radius:12px; border:1px solid var(--line-strong);
  background:#fff; padding:0 16px; font-family:inherit; font-size:16px; color:var(--ink);
}
.field input::placeholder{ color:var(--faint); }
.field input:focus-visible{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(37,75,98,.12); }
.field.on-navy label{ color:rgba(255,255,255,.7); }
.field.on-navy input{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff; }
.field.on-navy input::placeholder{ color:rgba(255,255,255,.45); }

.link{ color:var(--amber-text); font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; background:none; border:none; font-family:inherit; padding:0; white-space:nowrap; }
.link:hover{ text-decoration:underline; }
.link-navy{ color:rgba(255,255,255,.82); }

/* --------------------------- ONBOARDING -------------------------------- */
.stepper{ display:flex; gap:7px; margin-bottom:8px; }
.stepper i{ height:5px; flex:1; border-radius:99px; background:var(--line); }
.stepper i.on{ background:var(--amber); }
.step{ display:none; }
.step.active{ display:block; }
.step-center.active{ display:flex; flex-direction:column; justify-content:center; flex:1; text-align:center; }
.step-center .card-amber{ text-align:left; }
.bignum{ font-size:52px; font-weight:700; letter-spacing:-.03em; color:var(--navy); line-height:1; display:inline-flex; align-items:center; white-space:nowrap; }
.bignum .cur{ display:inline-block; width:3px; height:46px; background:var(--amber); margin-left:4px; border-radius:2px; animation:blink 1.1s steps(2) infinite; }
.bignum-input{ outline:none; white-space:nowrap; border-bottom:2px dashed rgba(221,165,58,.55); padding-bottom:2px; min-width:1ch; cursor:text; caret-color:var(--amber); }
.bignum-input:focus{ border-bottom-color:var(--amber); border-bottom-style:solid; }
.bignum-input:empty::before{ content:attr(data-ph); color:var(--line-strong); pointer-events:none; }
@media (prefers-reduced-motion:reduce){ .bignum .cur{ animation:none; } }
@keyframes blink{ 50%{ opacity:0; } }

.choice-row{ display:flex; gap:10px; }
.choice{ flex:1; border:1.5px solid var(--line-strong); background:#fff; border-radius:14px; padding:18px 12px; text-align:center; cursor:pointer; font-family:inherit; transition:border-color .12s, background .12s; }
.choice .big{ font-size:24px; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.choice .sm{ font-size:12px; color:var(--muted); margin-top:2px; }
.choice:hover{ background:var(--equal-hover); }
.choice.sel{ border-color:var(--amber); background:#FEFBF4; }
.choice.sel .big{ color:var(--navy); }

/* bank connect tile */
.tile{ display:flex; align-items:center; gap:14px; border:1px solid var(--line-strong); border-radius:14px; padding:16px 20px; background:#fff; cursor:pointer; transition:background .12s, border-color .12s; }
.tile:hover{ background:var(--equal-hover); border-color:var(--navy); }
.tile .ic{ width:42px; height:42px; flex:0 0 42px; border-radius:11px; background:var(--info-bg); display:flex; align-items:center; justify-content:center; color:var(--navy); }
.tile .t{ font-size:15px; font-weight:600; color:var(--ink); }
.tile .s{ font-size:12.5px; color:var(--faint); margin-top:1px; }

/* --------------------------- HOME / METRICS ---------------------------- */
.greet{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.greet h2{ font-size:22px; font-weight:600; letter-spacing:-.02em; margin:0; }
.avatar{ width:44px; height:44px; border-radius:50%; background:var(--amber-soft); color:var(--amber-text); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; }
.avatar.lg{ width:64px; height:64px; font-size:24px; }

.hero-label{ font-size:14px; font-weight:600; color:rgba(255,255,255,.72) !important; margin:0; }
.hero-amount{ font-size:46px; font-weight:700; letter-spacing:-.03em; line-height:1; margin:8px 0 0; }
.hero-sub{ font-size:14px; margin:12px 0 0; color:rgba(255,255,255,.8) !important; line-height:1.4; text-wrap:pretty; }
.hero-sub .up{ color:var(--amber) !important; font-weight:600; }
.hero-divider{ height:1px; background:rgba(255,255,255,.16); margin:20px 0 16px; }
.hero-plazo{ display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; background:none; border:none; width:100%; font-family:inherit; padding:0; text-align:left; }
.hero-plazo .pl-t{ font-size:14px; font-weight:600; color:#fff !important; white-space:nowrap; }
.hero-plazo .pl-chev{ color:rgba(255,255,255,.6); }

.metric-duo{ display:flex; gap:14px; align-items:stretch; }
.metric-duo .card{ flex:1; padding:20px; display:flex; flex-direction:column; margin-top:0; }
.metric-label{ font-size:13px; color:var(--muted); margin:0; font-weight:500; }
.metric-value{ font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--navy); margin:7px 0 4px; }
.metric-cap{ font-size:12px; color:var(--faint); margin:0; line-height:1.35; text-wrap:balance; }
.card-lg-amount{ font-size:34px; font-weight:700; letter-spacing:-.025em; color:var(--navy); margin:6px 0 0; }

/* --------------------------- INMUEBLES --------------------------------- */
.screen[data-screen="inmuebles"]{ background:var(--paper); }
.estate{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card); }
.estate image-slot{ display:block; width:100%; height:96px; margin:0; border:none; border-bottom:1px solid var(--line); overflow:hidden; }
.estate-head{ display:block; }
.estate-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; padding:11px 16px; }
.estate-meta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.estate .nm{ font-size:16px; font-weight:600; color:var(--ink); letter-spacing:-.01em; margin:0; line-height:1.25; }
.estate .loc{ font-size:12.5px; color:var(--muted); line-height:1.3; }
.estate-chev{ flex:0 0 auto; color:var(--faint); font-size:20px; line-height:1; transition:transform .2s; transform:rotate(90deg); }
.estate.open .estate-chev{ transform:rotate(-90deg); }

/* esquema de inmueble (dropdown) — ritmo de ledger de la app */
.estate-schema{ text-align:left; padding:0 16px 16px; display:flex; flex-direction:column; }
.estate-schema[hidden]{ display:none; }
.estate-schema .es-desc{ font-size:13px; line-height:1.5; color:var(--muted); margin:0 0 6px; padding-top:14px; border-top:1px solid var(--line); }
.estate-schema .es-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.estate-schema .es-row:last-of-type{ border-bottom:none; }
.estate-schema .es-k{ font-size:13px; color:var(--muted); flex:0 0 auto; }
.estate-schema .es-v{ font-size:13.5px; font-weight:500; color:var(--ink); text-align:right; line-height:1.3; }
.estate-schema .es-v.num{ font-variant-numeric:tabular-nums; }
.estate-occ{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0 0; }
.estate-occ .es-k{ font-size:13px; color:var(--muted); }
.estate-occ .es-v{ font-size:13.5px; font-weight:600; color:var(--navy); }
.estate-schema .es-occ{ height:7px; border-radius:99px; background:var(--info-bg); overflow:hidden; margin-top:8px; }
.estate-schema .es-occ > i{ display:block; height:100%; background:var(--navy); border-radius:99px; }
.es-mine{ display:flex; align-items:center; justify-content:space-between; background:var(--amber-soft); border-radius:10px; padding:10px 12px; margin:0 0 12px; }
.es-mine span:first-child{ font-size:13px; font-weight:600; color:#6B4E12; }
.es-mine .num{ font-size:16px; font-weight:700; color:var(--amber-text); }
.es-addr{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.5; color:var(--muted); }
.es-addr a{ display:inline-flex; align-items:center; gap:4px; color:var(--navy); font-weight:600; text-decoration:none; margin-top:6px; }

/* list rows (perfil / historial) */
.list{ background:#fff; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.list-row{ display:flex; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line); width:100%; background:none; border-left:none; border-right:none; border-top:none; font-family:inherit; cursor:pointer; text-align:left; transition:background .1s; }
.list-row:last-child{ border-bottom:none; }
.list-row:hover{ background:#F8F6F1; }
.list-row .ic{ width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:var(--info-bg); display:flex; align-items:center; justify-content:center; color:var(--navy); }
.list-row .lr-main{ flex:1; min-width:0; }
.list-row .lr-t{ display:block; font-size:15px; font-weight:500; color:var(--ink); }
.list-row .lr-s{ display:block; font-size:12.5px; color:var(--faint); margin-top:2px; }
.list-row .chev{ color:var(--faint); flex:0 0 auto; }
.list-row .lr-amt{ font-size:16px; font-weight:600; color:var(--navy); }
.list-row .paid{ display:inline-block; margin-top:3px; font-size:12px; font-weight:600; color:#2E7D5B; }

/* salida — franja de ajuste (reemplaza la gráfica de barras) */
.exit-track{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.exit-track .exit-cap{ font-size:13.5px; line-height:1.45; color:var(--muted); margin:0 0 13px; }
.exit-track .track{ height:8px; border-radius:99px; background:linear-gradient(90deg, var(--amber) 0%, #E7C98B 52%, #BFD8BC 100%); }
.exit-track .track-ends{ display:flex; justify-content:space-between; margin-top:10px; font-size:12.5px; color:var(--muted); }
.exit-track .track-ends strong{ font-weight:700; margin-right:5px; }
.exit-track .track-ends .neg{ color:var(--amber-text); }
.exit-track .track-ends .zero{ color:#2E7D5B; }

/* funcionó */
.star-badge{ width:78px; height:78px; border-radius:50%; background:rgba(221,165,58,.16); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; }
.center{ text-align:center; }

/* bottom sheet (recordatorio modal) */
.sheet-scrim{ position:absolute; inset:13px; z-index:80; display:flex; align-items:flex-end; background:rgba(15,30,40,.46); border-radius:44px; overflow:hidden; animation:scrimin .2s ease; }
.sheet-scrim[hidden]{ display:none; }
@keyframes scrimin{ from{ opacity:0; } to{ opacity:1; } }
.sheet{ width:100%; background:#fff; border-radius:24px 24px 44px 44px; padding:12px 22px 28px; box-shadow:0 -12px 40px rgba(18,38,49,.22); animation:sheetup .3s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion:reduce){ .sheet, .sheet-scrim{ animation:none; } }
@keyframes sheetup{ from{ transform:translateY(100%); } to{ transform:none; } }
.sheet-handle{ width:42px; height:4px; border-radius:99px; background:var(--line-strong); margin:2px auto 18px; }
.sheet-icon{ width:46px; height:46px; border-radius:13px; background:var(--info-bg); display:flex; align-items:center; justify-content:center; color:var(--navy); margin-bottom:14px; }
.sheet-title{ font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink); margin:0 0 8px; text-wrap:balance; }
.sheet-body{ font-size:14.5px; line-height:1.5; color:var(--navy-ink); margin:0 0 20px; text-wrap:pretty; }
.sheet .btn + .btn{ margin-top:10px; }
/* overlay tipo documento (aviso de privacidad / términos) */
.sheet.sheet-doc{ max-height:calc(100% - 22px); display:flex; flex-direction:column; padding-bottom:22px; }
.sheet-doc .doc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
.sheet-doc .doc-x{ flex:0 0 auto; width:30px; height:30px; border:none; background:var(--info-bg); border-radius:9px; color:var(--navy); font-size:13px; line-height:1; cursor:pointer; }
.sheet-doc .doc-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:2px; }
.sheet-doc .doc-body h4{ font-size:13.5px; font-weight:600; color:var(--ink); margin:18px 0 6px; }
.sheet-doc .doc-body p{ font-size:13px; line-height:1.55; color:var(--navy-ink); margin:0 0 10px; text-wrap:pretty; }
.sheet-doc .doc-body p:first-child{ margin-top:0; }
.sheet-doc .doc-body strong{ color:var(--ink); }

/* generic spacing helpers */
.mt-6{ margin-top:6px !important; } .mt-8{ margin-top:8px !important; } .mt-10{ margin-top:10px !important; } .mt-12{ margin-top:12px !important; } .mt-14{ margin-top:14px !important; }
.mt-16{ margin-top:16px !important; } .mt-20{ margin-top:20px !important; } .mt-24{ margin-top:24px !important; } .mt-28{ margin-top:28px !important; }
.section-label{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:0 0 10px; }

/* --------------------------- KYC / CREAR CUENTA ------------------------ */
.kstepper{ display:flex; gap:6px; margin-bottom:8px; }
.kstepper i{ height:5px; flex:1; border-radius:99px; background:var(--line); transition:background .25s; }
.kstepper i.on{ background:var(--amber); }
.kyc-step{ display:none; flex-direction:column; flex:1; }
.kyc-step.active{ display:flex; }

/* select estilizado como input */
.field select{
  width:100%; height:52px; border-radius:12px; border:1px solid var(--line-strong);
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235E707A' stroke-width='1.6'><path d='m1 1 5 5 5-5'/></svg>") no-repeat right 16px center;
  padding:0 42px 0 16px; font-family:inherit; font-size:16px; color:var(--ink);
  appearance:none; -webkit-appearance:none; cursor:pointer;
}
.field select:focus-visible{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(37,75,98,.12); }

/* checkbox */
.check{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.check .box{ width:22px; height:22px; flex:0 0 22px; border-radius:6px; border:1.5px solid var(--line-strong); background:#fff; display:flex; align-items:center; justify-content:center; margin-top:1px; transition:background .12s, border-color .12s; }
.check .box svg{ opacity:0; color:#fff; transition:opacity .12s; }
.check.on .box{ background:var(--navy); border-color:var(--navy); }
.check.on .box svg{ opacity:1; }
.check .check-tx{ font-size:13px; line-height:1.5; color:var(--navy-ink); }

/* tile de captura de documento */
.upload{ display:flex; align-items:center; gap:14px; width:100%; border:1.5px dashed var(--line-strong); border-radius:14px; padding:16px 18px; background:#fff; cursor:pointer; font-family:inherit; text-align:left; transition:background .12s, border-color .12s; }
.upload:hover{ border-color:var(--navy); background:var(--equal-hover); }
.upload .ic{ width:42px; height:42px; flex:0 0 42px; border-radius:11px; background:var(--info-bg); display:flex; align-items:center; justify-content:center; color:var(--navy); }
.upload .um{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; text-align:left; }
.upload .um .t{ display:block; font-size:15px; font-weight:600; color:var(--ink); }
.upload .um .s{ display:block; font-size:12.5px; color:var(--faint); margin-top:1px; }
.upload .um-status{ flex:0 0 auto; display:flex; align-items:center; color:var(--faint); }
.upload .um-status .check-ic{ display:none; }
.upload.done{ border-style:solid; border-color:#2E7D5B; background:#F1F8F4; }
.upload.done .ic{ background:#DCEFE3; color:#2E7D5B; }
.upload.done .um .s{ color:#2E7D5B; }
.upload.done .um-status .plus-ic{ display:none; }
.upload.done .um-status .check-ic{ display:flex; color:#2E7D5B; }

/* OTP */
.otp{ display:flex; gap:9px; justify-content:center; }
.otp span{ width:46px; height:58px; border-radius:12px; border:1.5px solid var(--line-strong); background:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; color:var(--navy); }
.otp span.cursor{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(37,75,98,.12); }

/* selfie / prueba de vida */
.selfie-frame{ width:184px; height:184px; margin:26px auto 4px; border-radius:50%; border:3px dashed var(--amber); display:flex; align-items:center; justify-content:center; color:var(--navy); background:var(--info-bg); }
.selfie-frame svg{ width:92px; height:92px; }
.checklist{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.checklist li{ display:flex; gap:11px; align-items:center; font-size:14px; color:var(--navy-ink); }
.checklist li .ck{ width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:#DCEFE3; color:#2E7D5B; display:flex; align-items:center; justify-content:center; }

/* preguntas regulatorias (segmentado) */
.seg-field{ margin-top:16px; }
.seg-field > .seg-lbl{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:8px; }
.seg{ display:flex; gap:8px; }
.seg button{ flex:1; min-height:48px; border:1.5px solid var(--line-strong); background:#fff; border-radius:12px; font-family:inherit; font-size:15px; font-weight:600; color:var(--muted); cursor:pointer; transition:border-color .12s, background .12s, color .12s; }
.seg button:hover{ background:var(--equal-hover); }
.seg button.sel{ border-color:var(--navy); background:#F1F5F6; color:var(--navy); }

/* verificación */
.verify-spin{ width:78px; height:78px; margin:0 auto 22px; border-radius:50%; border:4px solid var(--info-bg); border-top-color:var(--amber); animation:vspin 1s linear infinite; }
@keyframes vspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .verify-spin{ animation:none; } }

/* --------------------------- CONECTAR BANCO ---------------------------- */
.bstepper{ display:flex; gap:6px; margin-bottom:16px; }
.bstepper i{ height:5px; flex:1; border-radius:99px; background:var(--line); transition:background .25s; }
.bstepper i.on{ background:var(--amber); }
.bank-step{ display:none; flex-direction:column; flex:1; }
.bank-step.active{ display:flex; }
.bank-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bank-opt{ display:flex; align-items:center; gap:12px; border:1.5px solid var(--line-strong); background:#fff; border-radius:14px; padding:14px; cursor:pointer; font-family:inherit; text-align:left; transition:border-color .12s, background .12s; }
.bank-opt:hover{ border-color:var(--navy); background:var(--equal-hover); }
.bank-opt .mono{ width:38px; height:38px; flex:0 0 38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; letter-spacing:-.02em; }
.bank-opt .bn{ font-size:14.5px; font-weight:600; color:var(--ink); }
.bank-dd{ margin-top:10px; border:1px solid var(--line); border-radius:14px; overflow:hidden; max-height:296px; overflow-y:auto; background:#fff; box-shadow:var(--shadow-card); }
.bank-dd-item{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 16px; border:none; border-bottom:1px solid var(--line); background:#fff; cursor:pointer; font-family:inherit; text-align:left; transition:background .1s; }
.bank-dd-item:last-child{ border-bottom:none; }
.bank-dd-item:hover{ background:var(--equal-hover); }
.bank-dd-item .mono{ width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; letter-spacing:-.02em; }
.bank-dd-item .bn{ font-size:14.5px; font-weight:600; color:var(--ink); }
.bank-dd-empty{ padding:18px 16px; font-size:13.5px; color:var(--faint); text-align:center; }
.editable-name{ outline:none; border-radius:5px; cursor:text; transition:box-shadow .12s; }
.editable-name:hover{ box-shadow:0 0 0 1px var(--line-strong); }
.editable-name:focus{ box-shadow:0 0 0 3px rgba(37,75,98,.12); }
.editable-name:empty:before{ content:attr(data-placeholder); color:var(--faint); }
.tile.connected{ border-color:#2E7D5B; background:#F1F8F4; }
.tile.connected .ic{ background:#DCEFE3; color:#2E7D5B; }
.bank-tile-chev{ flex:0 0 auto; }

/* ----------------------------- CONFIGURACIÓN --------------------------- */
/* etiqueta de subgrupo dentro de configuración */
.cfg-label{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:22px 4px 9px; }
.cfg-label:first-child{ margin-top:4px; }
.list + .cfg-label{ margin-top:22px; }

/* fila con switch a la derecha (reusa .list / .list-row) */
.list-row.has-switch{ cursor:default; }
.list-row.has-switch:hover{ background:#fff; }

/* switch */
.switch{
  flex:0 0 auto; width:46px; height:28px; border-radius:99px; border:none;
  background:var(--line-strong); padding:0; cursor:pointer; position:relative;
  transition:background .18s ease;
}
.switch .knob{
  position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(21,48,61,.25); transition:transform .18s ease;
}
.switch.on{ background:var(--navy); }
.switch.on .knob{ transform:translateX(18px); }
.switch:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,75,98,.18); }

/* fila destructiva */
.list-row .lr-t.danger{ color:#B0413E; }
.list-row .ic.danger{ background:#FBEDED; color:#B0413E; }

/* meta / valor a la derecha de una fila (idioma, versión, etc.) */
.list-row .lr-val{ font-size:13.5px; color:var(--faint); flex:0 0 auto; margin-left:auto; }

/* nota al pie de una pantalla de ajustes */
.cfg-note{ font-size:12.5px; line-height:1.55; color:var(--faint); margin:16px 4px 0; }
.cfg-ver{ text-align:center; font-size:12px; color:var(--faint); margin-top:22px; }


/* --------------------------- GREET ACTIONS / CAMPANA ------------------- */
.greet-actions{ display:flex; align-items:center; gap:11px; }
button.avatar{ border:none; font-family:inherit; cursor:pointer; padding:0; }
.bell{ position:relative; width:44px; height:44px; flex:0 0 44px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s; }
.bell:hover{ background:var(--equal-hover); }
.bell-dot{ position:absolute; top:8px; right:9px; width:9px; height:9px; border-radius:50%; background:var(--amber); border:2px solid #fff; }
.bell-dot[hidden]{ display:none; }

/* --------------------------- PLAN EN PAUSA (BANNER) -------------------- */
.pause-banner{ display:flex; align-items:center; gap:13px; background:var(--amber-soft); border-radius:14px; padding:12px 14px; margin-bottom:18px; }
.pause-banner[hidden]{ display:none; }
.pause-banner .pb-ic{ width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:rgba(182,131,31,.16); color:var(--amber-text); display:flex; align-items:center; justify-content:center; }
.pause-banner .pb-main{ flex:1; min-width:0; }
.pause-banner .pb-t{ display:block; font-size:14px; font-weight:600; color:#6B4E12; line-height:1.25; }
.pause-banner .pb-s{ display:block; font-size:12.5px; color:#8A6A22; margin-top:2px; line-height:1.35; }
.pause-banner .pb-cta{ flex:0 0 auto; border:1px solid var(--amber-text); background:none; color:var(--amber-text); font-family:inherit; font-weight:600; font-size:13px; padding:8px 14px; border-radius:9px; cursor:pointer; transition:background .12s; }
.pause-banner .pb-cta:hover{ background:rgba(182,131,31,.12); }

/* --------------------------- NOTIFICACIONES ---------------------------- */
.notif-bar{ display:flex; justify-content:flex-end; margin-bottom:2px; }
.notif-day{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:18px 4px 9px; }
.notif-day:first-of-type{ margin-top:6px; }
.notif-list{ display:flex; flex-direction:column; gap:10px; }
.notif-item{ position:relative; display:flex; gap:13px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 15px; width:100%; text-align:left; font-family:inherit; cursor:default; box-shadow:var(--shadow-card); transition:background .1s, border-color .1s; }
button.notif-item{ cursor:pointer; }
button.notif-item:hover{ background:#F8F6F1; }
.notif-item .ni-ic{ width:38px; height:38px; flex:0 0 38px; border-radius:10px; background:var(--info-bg); color:var(--navy); display:flex; align-items:center; justify-content:center; }
.notif-item .ni-ic.ni-rent{ background:#DCEFE3; color:#2E7D5B; }
.notif-item .ni-ic.ni-amber{ background:var(--amber-soft); color:var(--amber-text); }
.notif-item .ni-main{ flex:1; min-width:0; padding-right:10px; }
.notif-item .ni-t{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.notif-item .ni-b{ display:block; font-size:13px; color:var(--muted); margin-top:3px; line-height:1.45; }
.notif-item .ni-time{ display:block; font-size:11.5px; color:var(--faint); margin-top:6px; }
.notif-item .ni-dot{ position:absolute; top:15px; right:15px; width:8px; height:8px; border-radius:50%; background:var(--amber); }
.notif-item:not(.unread) .ni-dot{ display:none; }
.notif-item.unread{ background:#FEFBF4; border-color:#F0E2C4; }
button.notif-item.unread:hover{ background:#FCF6E9; }

/* --------------------------- RECUPERAR CONTRASEÑA ---------------------- */
.rstepper{ display:flex; gap:6px; margin-bottom:8px; }
.rstepper i{ height:5px; flex:1; border-radius:99px; background:var(--line); transition:background .25s; }
.rstepper i.on{ background:var(--amber); }
.reset-step{ display:none; flex-direction:column; flex:1; }
.reset-step.active{ display:flex; }

/* --------------------------- SOPORTE ----------------------------------- */
.support-status{ display:flex; align-items:center; gap:10px; background:#DCEFE3; border-radius:12px; padding:11px 14px; font-size:12.5px; font-weight:500; color:#2E6B4F; line-height:1.4; }
.dot-online{ width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:#2E7D5B; box-shadow:0 0 0 3px rgba(46,125,91,.18); }
.support-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.support-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; border:1px solid var(--line); background:#fff; border-radius:14px; padding:15px; cursor:pointer; font-family:inherit; text-align:left; box-shadow:var(--shadow-card); transition:border-color .12s, background .12s; }
.support-tile:hover{ border-color:var(--navy); background:var(--equal-hover); }
.support-tile .st-ic{ width:40px; height:40px; border-radius:11px; background:var(--info-bg); color:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.support-tile .st-t{ font-size:15px; font-weight:600; color:var(--ink); }
.support-tile .st-s{ font-size:12.5px; color:var(--muted); }
.faq-list{ display:flex; flex-direction:column; gap:0; }
.faq{ border-bottom:1px solid var(--line); }
.faq:last-child{ border-bottom:none; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:15px 4px; border:none; background:none; font-family:inherit; text-align:left; font-size:14.5px; font-weight:600; color:var(--ink); cursor:pointer; }
.faq-chev{ flex:0 0 auto; font-size:18px; color:var(--faint); transition:transform .18s ease; line-height:1; }
.faq.open .faq-chev{ transform:rotate(180deg); }
.faq-a{ padding:0 4px 16px; font-size:13.5px; line-height:1.55; color:var(--muted); }
.faq-a[hidden]{ display:none; }

/* toast ligero dentro del marco del teléfono */
.kiva-toast{ position:absolute; left:50%; bottom:104px; transform:translate(-50%, 10px); background:var(--navy); color:#fff; font-size:13.5px; font-weight:500; padding:11px 18px; border-radius:99px; box-shadow:0 8px 24px rgba(21,48,61,.32); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:60; white-space:nowrap; max-width:84%; }
.kiva-toast.show{ opacity:1; transform:translate(-50%, 0); }
@media (prefers-reduced-motion:reduce){ .kiva-toast{ transition:opacity .2s ease; transform:translate(-50%,0); } }

/* --------------------------- ESTADO VACÍO / PRIMER USO ----------------- */
.empty-hero{ text-align:center; padding:30px 16px 22px; }
.empty-ic{ width:62px; height:62px; margin:0 auto 16px; border-radius:16px; background:var(--info-bg); color:var(--navy); display:flex; align-items:center; justify-content:center; }
.empty-t{ font-size:19px; font-weight:700; letter-spacing:-.02em; color:var(--navy-deep); margin:0; }
.empty-s{ font-size:14px; line-height:1.5; color:var(--muted); margin:8px auto 0; max-width:30ch; text-wrap:pretty; }

/* --------------------------- PANEL DE DIRECCIÓN ------------------------ */
.review-director{ padding-bottom:18px; border-bottom:1px solid var(--line); }
.review-director h4{ color:var(--amber-text); }
.review-director .review-links button .n{ color:var(--amber-text); }

/* --------------------------- SITIO PÚBLICO (SIMULADO) ------------------ */
.site-badge{ align-self:center; white-space:nowrap; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.2); border-radius:99px; padding:5px 13px; }
.site-props{ display:flex; justify-content:center; gap:20px; margin-top:30px; }
.site-props div{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; flex:1; max-width:33%; }
.site-props .sp-n{ font-size:18px; font-weight:700; color:var(--amber); letter-spacing:-.01em; }
.site-props .sp-l{ font-size:11px; color:rgba(255,255,255,.6); line-height:1.3; }
.site-foot{ font-size:11px; color:rgba(255,255,255,.45); text-align:center; line-height:1.6; margin:16px 0 0; }
.site-foot [data-kid-display]{ display:inline-block; margin-top:7px; font-size:10px; letter-spacing:.01em; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.4); word-break:break-word; }

/* --------------------------- GATE / WAITLIST --------------------------- */
.gate-badge{ align-self:flex-start; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); border:1px solid rgba(221,165,58,.42); border-radius:99px; padding:5px 12px; }
.check.check-navy .box{ border-color:rgba(255,255,255,.42); }
.check.check-navy .check-tx{ color:rgba(255,255,255,.78); }
.check.check-navy .check-tx a{ color:#fff; }
.wl-banner{ display:flex; align-items:center; gap:14px; justify-content:space-between; background:var(--amber-soft); border-radius:14px; padding:15px 16px; margin-top:20px; }
.wl-banner[hidden]{ display:none; }
.wl-banner .wl-t{ display:block; font-size:14px; font-weight:700; color:#6B4E12; line-height:1.2; }
.wl-banner .wl-s{ display:block; font-size:12px; color:#8A6A22; margin-top:3px; line-height:1.35; }
.wl-banner .btn{ width:auto; flex:0 0 auto; min-height:46px; padding:0 16px; font-size:13.5px; white-space:nowrap; }

/* --------------------------- ESTADOS DE ERROR ------------------------- */
.alert-card{ display:flex; gap:13px; align-items:flex-start; background:#FBEDED; border:1px solid #F0D5D4; border-radius:14px; padding:15px 16px; }
.alert-card.amber{ background:var(--amber-soft); border-color:#EBD6A8; }
.alert-ic{ width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:#fff; color:var(--red); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; }
.alert-card.amber .alert-ic{ color:var(--amber-text); }
.alert-t{ font-size:15px; font-weight:700; color:var(--ink); margin:0; line-height:1.25; }
.alert-s{ font-size:13px; color:var(--muted); margin:5px 0 0; line-height:1.45; }
.alert-badge{ width:64px; height:64px; margin:0 auto; border-radius:50%; background:#FBEDED; color:var(--red); display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800; }
.alert-banner{ display:flex; align-items:center; gap:13px; background:#FBEDED; border:1px solid #F0D5D4; border-radius:14px; padding:12px 14px; margin-bottom:18px; }
.alert-banner[hidden]{ display:none; }
.alert-banner .ab-ic{ width:32px; height:32px; flex:0 0 32px; border-radius:9px; background:#fff; color:var(--red); display:flex; align-items:center; justify-content:center; font-weight:800; }
.alert-banner .ab-main{ flex:1; min-width:0; }
.alert-banner .ab-t{ display:block; font-size:14px; font-weight:600; color:#8A2F2D; line-height:1.2; }
.alert-banner .ab-s{ display:block; font-size:12.5px; color:#9E4A47; margin-top:2px; line-height:1.35; }
.alert-banner .ab-cta{ flex:0 0 auto; border:1px solid var(--red); background:none; color:var(--red); font-family:inherit; font-weight:600; font-size:13px; padding:8px 14px; border-radius:9px; cursor:pointer; transition:background .12s; }
.alert-banner .ab-cta:hover{ background:rgba(176,65,62,.08); }
.checklist li.x{ color:var(--ink); }
.checklist li.x .ck-x{ width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:#FBEDED; color:var(--red); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }

/* --------------------------- VELO DE CARGA ---------------------------- */
.load-veil{ position:absolute; inset:0; z-index:90; background:rgba(252,250,246,.93); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.phone[data-theme="navy"] .load-veil{ background:rgba(21,48,61,.93); }
.load-veil.show{ opacity:1; pointer-events:auto; }
.lv-spin{ width:46px; height:46px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--amber); animation:vspin 1s linear infinite; }
.lv-label{ font-size:14px; font-weight:500; color:var(--muted); }
.phone[data-theme="navy"] .lv-label{ color:rgba(255,255,255,.8); }
@media (prefers-reduced-motion:reduce){ .lv-spin{ animation:none; } }

/* responsive: stack sidebar on top for narrow */
@media (max-width:880px){
  .stage{ flex-direction:column; }
  .review{ width:100%; flex:none; height:auto; position:static; border-right:none; border-bottom:1px solid var(--line); }
  .review-links{ flex-direction:row; flex-wrap:wrap; }
  .review-hint{ display:none; }
  .main{ padding:20px 12px 36px; }
}