/* =========================================================================
   VÉRTICE — Sistema de diseño multisector
   Tokens compartidos + identidad por vertical (Tec / Finanzas / Educación)
   ========================================================================= */

/* ------------------------------------------------------------- tokens --- */
:root{
  /* escala tipográfica */
  --f-display: 28px;
  --f-h1: 22px;
  --f-h2: 17px;
  --f-body: 15px;
  --f-sm: 13px;
  --f-xs: 11px;

  /* espaciado */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;

  /* radios */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* superficies claras */
  --bg: #F5F6FA;
  --surface: #FFFFFF;
  --surface-2: #FBFBFD;
  --line: #E7E8EF;
  --line-soft: #F0F1F6;
  --ink: #14151C;
  --ink-2: #4B4D5C;
  --ink-3: #8B8D9C;
  --shadow-sm: 0 1px 2px rgba(20,21,28,.05), 0 4px 12px rgba(20,21,28,.05);
  --shadow-md: 0 2px 6px rgba(20,21,28,.06), 0 14px 32px rgba(20,21,28,.10);
  --shadow-lg: 0 24px 60px rgba(20,21,28,.18);

  /* semánticos */
  --pos: #0FA36B;
  --neg: #E5484D;
  --warn: #E9860A;

  /* acento por vertical (lo sobreescribe [data-vertical]) */
  --accent: #6C5CE7;
  --accent-2: #22D3EE;
  --tint: #F1EFFE;
  --on-accent: #FFFFFF;

  --dur: 260ms;
  --ease: cubic-bezier(.22,.8,.28,1);
}

[data-vertical="tec"]{ --accent:#6C5CE7; --accent-2:#22D3EE; --tint:#F1EFFE; }
[data-vertical="fin"]{ --accent:#0FA36B; --accent-2:#7BE495; --tint:#E7F7EF; }
[data-vertical="edu"]{ --accent:#EA7A17; --accent-2:#FFC46B; --tint:#FDF0E2; }

[data-mode="dark"]{
  --bg: #0C0D13;
  --surface: #15161F;
  --surface-2: #1B1D28;
  --line: #262837;
  --line-soft: #1F2130;
  --ink: #F2F3F8;
  --ink-2: #A9ABBC;
  --ink-3: #74768A;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 10px 30px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.7);
}
[data-mode="dark"][data-vertical="tec"]{ --tint:#221E3D; }
[data-mode="dark"][data-vertical="fin"]{ --tint:#123024; }
[data-mode="dark"][data-vertical="edu"]{ --tint:#332411; }

/* --------------------------------------------------------------- base --- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:#0B0B12;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input{ font:inherit; }
svg{ fill:currentColor; }
::-webkit-scrollbar{ width:0; height:0; }

/* -------------------------------------------------------------- stage --- */
.stage{
  position:fixed; inset:0;
  display:grid; place-items:center;
  padding:24px;
}
.stage__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%),
    radial-gradient(50% 40% at 85% 100%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 70%),
    #0B0B12;
  transition:background var(--dur) var(--ease);
}
.stagehint{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.02em; color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  padding:7px 14px; border-radius:var(--r-full);
  backdrop-filter:blur(8px);
  transition:opacity .4s;
}
.stagehint__dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-2) 60%,transparent); animation:ping 2s infinite; }
@keyframes ping{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-2) 60%,transparent)} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }

/* ------------------------------------------------------------- device --- */
.device{ position:relative; z-index:1; }
.device__frame{
  position:relative;
  width:390px; height:844px;
  max-height:calc(100vh - 76px);
  aspect-ratio:390/844;
  background:linear-gradient(160deg,#3A3B47,#101118 40%,#2A2B36);
  border-radius:52px;
  padding:11px;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.device__island{
  position:absolute; top:22px; left:50%; transform:translateX(-50%);
  width:112px; height:31px; background:#000; border-radius:var(--r-full); z-index:20;
  pointer-events:none;
}
.device__screen{
  position:relative; width:100%; height:100%;
  background:var(--bg); border-radius:42px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:background var(--dur) var(--ease);
}

/* modo incrustado (iframe / móvil real) */
body.embed .stage{ padding:0; display:block; }
body.embed .stagehint{ display:none; }
body.embed .device{ width:100%; height:100%; }
body.embed .device__frame{
  width:100%; height:100%; max-height:none; aspect-ratio:auto; padding:0;
  border-radius:0; background:none; box-shadow:none;
}
body.embed .device__island{ display:none; }
body.embed .device__screen{ border-radius:0; }

/* --------------------------------------------------------- status bar --- */
.statusbar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--s6) 4px;
  height:46px; color:var(--ink);
  font-size:14px; font-weight:700; letter-spacing:.01em;
  z-index:15;
}
.statusbar__icons{ display:flex; align-items:center; gap:5px; }
body.embed .statusbar{ padding-top:max(14px, env(safe-area-inset-top)); }

/* ------------------------------------------------------------- views --- */
.view{ flex:1; min-height:0; display:flex; flex-direction:column; }
.view[hidden]{ display:none; }

/* ------------------------------------------------------------- login --- */
.login{
  flex:1; position:relative; display:flex; flex-direction:column;
  padding:0 var(--s6) var(--s6);
  overflow:hidden;
}
.login__glow{
  position:absolute; top:-160px; left:50%; transform:translateX(-50%);
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 30%,transparent), transparent 65%);
  transition:background var(--dur) var(--ease);
}
.login__brand{ position:relative; text-align:center; padding:52px 0 34px; }
.login__brand h1{
  margin:16px 0 6px; font-size:30px; font-weight:800; letter-spacing:.14em;
}
.login__brand p{ margin:0; color:var(--ink-2); font-size:var(--f-sm); letter-spacing:.02em; }
.logo{ display:inline-block; width:52px; height:52px; }
.logo svg{ width:100%; height:100%; }
.logo .lg1{ fill:var(--accent); }
.logo .lg2{ fill:var(--accent-2); }
.logo .lg3{ fill:var(--ink); opacity:.85; }

.login__form{ position:relative; display:flex; flex-direction:column; gap:var(--s3); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field span{ font-size:var(--f-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.field input{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:14px var(--s4);
  color:var(--ink); font-size:var(--f-body); font-weight:600;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.field input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent); }
.login__demo{
  position:relative; margin-top:auto; text-align:center;
  background:var(--tint); border:1px dashed color-mix(in srgb,var(--accent) 40%,transparent);
  border-radius:var(--r-md); padding:12px;
  display:flex; flex-direction:column; gap:3px;
}
.login__demo strong{ font-size:var(--f-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.login__demo span{ font-size:var(--f-sm); font-weight:600; color:var(--ink-2); }

/* ------------------------------------------------------------ buttons --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-md); padding:14px var(--s5);
  font-size:var(--f-body); font-weight:700; letter-spacing:.01em;
  transition:transform .12s var(--ease), background .2s, opacity .2s, box-shadow .2s;
}
.btn:active{ transform:scale(.97); }
.btn--block{ width:100%; }
.btn--primary{
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--accent-2)));
  color:#fff; box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 32%,transparent);
}
.btn--ghost{ background:var(--surface); border:1px solid var(--line); color:var(--ink-2); }
.btn--soft{ background:var(--tint); color:var(--accent); }
.btn--done{ background:var(--tint) !important; color:var(--accent) !important; box-shadow:none !important; }
.btn--sm{ padding:10px var(--s4); font-size:var(--f-sm); border-radius:var(--r-sm); }

/* ------------------------------------------------------------- appbar --- */
.appbar{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--s3);
  padding:2px var(--s5) var(--s2);
}
.appbar__back{
  width:36px; height:36px; border-radius:var(--r-full);
  display:grid; place-items:center; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  opacity:0; pointer-events:none; transform:scale(.8);
  transition:opacity .2s, transform .2s;
}
.appbar.has-back .appbar__back{ opacity:1; pointer-events:auto; transform:none; }
.appbar__title{ flex:1; min-width:0; display:flex; flex-direction:column; }
.appbar__kicker{
  font-size:var(--f-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); transition:color var(--dur) var(--ease);
}
.appbar__title strong{ font-size:var(--f-h1); font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.appbar__avatar{
  width:38px; height:38px; border-radius:var(--r-full); font-size:19px;
  display:grid; place-items:center;
  background:var(--tint); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  transition:background var(--dur) var(--ease);
}

/* ---------------------------------------------------------- switcher --- */
.switcher{
  flex:0 0 auto; position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  margin:var(--s2) var(--s5) var(--s3);
  padding:4px; border-radius:var(--r-full);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.switcher button{
  position:relative; z-index:2;
  padding:9px 4px; border-radius:var(--r-full);
  font-size:var(--f-sm); font-weight:700; color:var(--ink-3);
  transition:color .25s var(--ease);
}
.switcher button[aria-selected="true"]{ color:var(--on-accent,#fff); }
.switcher__pill{
  position:absolute; z-index:1; top:4px; bottom:4px;
  width:calc((100% - 8px)/3); left:4px;
  border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 50%,var(--accent-2)));
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 34%,transparent);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* ------------------------------------------------------------- scroll --- */
.scroll{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:0 var(--s5) 108px;
  scroll-behavior:smooth;
}
.page{ display:flex; flex-direction:column; gap:var(--s5); }
.page.enter{ animation:pageIn .34s var(--ease) both; }
.page.enter-back{ animation:pageBack .34s var(--ease) both; }
@keyframes pageIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
@keyframes pageBack{ from{ opacity:0; transform:translateX(-14px) } to{ opacity:1; transform:none } }

/* ------------------------------------------------------------- cards --- */
.hero{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl); padding:var(--s5);
  color:#fff;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 45%,var(--accent-2)));
  box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 30%,transparent);
  transition:background var(--dur) var(--ease);
}
.hero::after{
  content:''; position:absolute; right:-56px; top:-72px;
  width:190px; height:190px; border-radius:50%;
  background:rgba(255,255,255,.14);
}
.hero::before{
  content:''; position:absolute; right:-20px; bottom:-88px;
  width:150px; height:150px; border-radius:50%;
  background:rgba(255,255,255,.09);
}
.hero > *{ position:relative; z-index:1; }
.hero__kicker{ font-size:var(--f-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.82; }
.hero__title{ margin:6px 0 4px; font-size:var(--f-display); font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.hero__sub{ margin:0; font-size:var(--f-sm); opacity:.9; font-weight:500; }
.hero__bar{ margin-top:var(--s4); height:6px; border-radius:var(--r-full); background:rgba(255,255,255,.28); overflow:hidden; }
.hero__bar i{ display:block; height:100%; border-radius:var(--r-full); background:#fff; transition:width .8s var(--ease); }
.hero__meta{ margin-top:8px; font-size:var(--f-xs); opacity:.85; font-weight:600; }
.hero__actions{ display:flex; gap:var(--s2); margin-top:var(--s4); }
.hero__actions .btn{ flex:1; background:rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(6px); }
.hero__actions .btn.is-white{ background:#fff; color:var(--accent); }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }
.stat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s3) var(--s3);
  text-align:center; box-shadow:var(--shadow-sm);
}
.stat b{ display:block; font-size:var(--f-h2); font-weight:800; letter-spacing:-.02em; }
.stat span{ display:block; font-size:10px; font-weight:600; color:var(--ink-3); margin-top:2px; }
.stat em{ display:block; font-size:var(--f-xs); font-weight:700; color:var(--accent); font-style:normal; }

.section__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--s3); }
.section__head h2{ margin:0; font-size:var(--f-h2); font-weight:800; letter-spacing:-.02em; }
.section__head button{ font-size:var(--f-sm); font-weight:700; color:var(--accent); }

.feature{
  display:flex; align-items:center; gap:var(--s4);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s4);
  box-shadow:var(--shadow-sm); width:100%; text-align:left;
  transition:transform .14s var(--ease), box-shadow .2s;
}
.feature:active{ transform:scale(.985); }
.feature__icon{
  flex:0 0 auto; width:52px; height:52px; border-radius:var(--r-md);
  display:grid; place-items:center; font-size:24px;
  background:var(--tint); transition:background var(--dur) var(--ease);
}
.feature__body{ flex:1; min-width:0; }
.feature__body strong{ display:block; font-size:var(--f-body); font-weight:700; letter-spacing:-.01em; }
.feature__body strong{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.feature__body span{ display:block; font-size:var(--f-sm); color:var(--ink-3); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feature__side{ text-align:right; flex:0 0 auto; max-width:104px; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.feature__side b{ display:block; font-size:var(--f-sm); font-weight:800; white-space:nowrap; }
.badge{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 8px; border-radius:var(--r-full);
  background:var(--tint); color:var(--accent);
}

.rows{ display:flex; flex-direction:column; gap:var(--s2); }
.row{
  display:flex; align-items:center; gap:var(--s3);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:12px var(--s4);
  width:100%; text-align:left;
  transition:transform .14s var(--ease), border-color .2s;
}
.row:active{ transform:scale(.985); }
.row__icon{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; font-size:19px;
  background:var(--surface-2); border:1px solid var(--line-soft);
}
.row__body{ flex:1; min-width:0; }
.row__body strong{ display:block; font-size:var(--f-body); font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row__body span{ display:block; font-size:var(--f-sm); color:var(--ink-3); margin-top:1px; }
.row__meta{ flex:0 0 auto; font-size:var(--f-sm); font-weight:800; color:var(--ink-2); }
.row__meta.is-pos{ color:var(--pos); }

.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); }
.tile{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s3) 6px; text-align:center;
  transition:transform .14s var(--ease);
}
.tile:active{ transform:scale(.96); }
.tile em{ display:block; font-size:22px; font-style:normal; }
.tile strong{ display:block; font-size:var(--f-xs); font-weight:800; margin-top:6px; }
.tile span{ display:block; font-size:10px; color:var(--ink-3); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ------------------------------------------------------------ buscar --- */
.searchbar{
  display:flex; align-items:center; gap:var(--s2);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:12px var(--s4);
  box-shadow:var(--shadow-sm);
}
.searchbar svg{ width:18px; flex:0 0 auto; color:var(--ink-3); }
.searchbar input{ flex:1; min-width:0; border:0; outline:0; background:none; color:var(--ink); font-size:var(--f-body); font-weight:600; }
.searchbar input::placeholder{ color:var(--ink-3); font-weight:500; }
.searchbar button{ font-size:var(--f-sm); font-weight:700; color:var(--accent); }

.segmented{ display:flex; gap:var(--s2); overflow-x:auto; padding-bottom:2px; margin:0 calc(var(--s5)*-1); padding-inline:var(--s5); }
.segmented button{
  flex:0 0 auto; padding:8px 14px; border-radius:var(--r-full);
  font-size:var(--f-sm); font-weight:700; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line);
  transition:background .2s, color .2s, border-color .2s;
}
.segmented button.is-on{ background:var(--accent); color:#fff; border-color:transparent; }

.chips{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.chip{
  font-size:var(--f-sm); font-weight:700; padding:7px 12px; border-radius:var(--r-full);
  background:var(--tint); color:var(--accent);
  transition:background var(--dur) var(--ease);
}
.chip.is-plain{ background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line); }

.empty{ text-align:center; padding:var(--s7) var(--s4); color:var(--ink-3); }
.empty em{ font-size:34px; font-style:normal; display:block; margin-bottom:var(--s3); }
.empty strong{ display:block; font-size:var(--f-body); color:var(--ink-2); }
.empty span{ font-size:var(--f-sm); }

/* ----------------------------------------------------------- detalle --- */
.detail__head{
  border-radius:var(--r-xl); padding:var(--s5); color:#fff;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 45%,var(--accent-2)));
  box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 28%,transparent);
  position:relative; overflow:hidden;
}
.detail__head::after{ content:''; position:absolute; right:-50px; top:-60px; width:170px; height:170px; border-radius:50%; background:rgba(255,255,255,.13); }
.detail__head > *{ position:relative; z-index:1; }
.detail__emoji{ font-size:32px; }
.detail__head h2{ margin:var(--s3) 0 6px; font-size:var(--f-display); font-weight:800; letter-spacing:-.03em; line-height:1.12; }
.detail__head p{ margin:0; font-size:var(--f-sm); opacity:.92; line-height:1.5; }
.detail__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-top:var(--s5); }
.detail__stats div{ background:rgba(255,255,255,.16); border-radius:var(--r-sm); padding:10px 8px; text-align:center; backdrop-filter:blur(4px); }
.detail__stats b{ display:block; font-size:var(--f-h2); font-weight:800; }
.detail__stats span{ display:block; font-size:10px; opacity:.85; font-weight:600; margin-top:1px; }

.block{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s4); box-shadow:var(--shadow-sm); }
.block h3{ margin:0 0 6px; font-size:var(--f-h2); font-weight:800; letter-spacing:-.02em; }
.block p{ margin:0; font-size:var(--f-sm); color:var(--ink-2); line-height:1.6; }

.steps{ display:flex; flex-direction:column; gap:0; }
.step{ display:flex; align-items:flex-start; gap:var(--s3); padding:10px 0; }
.step__dot{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; margin-top:1px;
  display:grid; place-items:center; font-size:11px; font-weight:800;
  border:2px solid var(--line); color:var(--ink-3); background:var(--surface);
}
.step.is-done .step__dot{ background:var(--accent); border-color:var(--accent); color:#fff; }
.step__body{ flex:1; }
.step__body strong{ display:block; font-size:var(--f-body); font-weight:700; }
.step__body span{ font-size:var(--f-sm); color:var(--ink-3); }
.step + .step{ border-top:1px solid var(--line-soft); }

.person{
  display:flex; align-items:center; gap:var(--s3);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s3) var(--s4); box-shadow:var(--shadow-sm);
}
.person__ava{ width:44px; height:44px; border-radius:var(--r-full); display:grid; place-items:center; font-size:22px; background:var(--tint); }
.person__body{ flex:1; }
.person__body strong{ display:block; font-size:var(--f-body); font-weight:700; }
.person__body span{ font-size:var(--f-sm); color:var(--ink-3); }

.stickycta{
  position:sticky; bottom:0; z-index:5;
  display:flex; gap:var(--s2);
  padding:10px; margin:var(--s2) -6px 0;
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
}
.stickycta .btn--primary{ flex:2; }
.stickycta .btn--ghost{ flex:1; }
.foot{ font-size:var(--f-xs); color:var(--ink-3); text-align:center; line-height:1.5; }

/* ------------------------------------------------------------ perfil --- */
.profile__head{ display:flex; align-items:center; gap:var(--s4); }
.profile__ava{
  width:68px; height:68px; border-radius:var(--r-full);
  display:grid; place-items:center; font-size:32px;
  background:var(--tint); border:2px solid color-mix(in srgb,var(--accent) 34%,transparent);
  transition:background var(--dur) var(--ease);
}
.profile__head h2{ margin:0; font-size:var(--f-h1); font-weight:800; letter-spacing:-.02em; }
.profile__head p{ margin:2px 0 0; font-size:var(--f-sm); color:var(--ink-3); }

.meters{ display:flex; flex-direction:column; gap:var(--s3); }
.meter span{ display:flex; justify-content:space-between; font-size:var(--f-sm); font-weight:700; margin-bottom:6px; }
.meter span i{ font-style:normal; color:var(--accent); }
.meter div{ height:8px; border-radius:var(--r-full); background:var(--line-soft); overflow:hidden; }
.meter div b{ display:block; height:100%; border-radius:var(--r-full); background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .9s var(--ease); }

/* ----------------------------------------------------------- ajustes --- */
.group{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.group__title{ font-size:var(--f-xs); font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s2) var(--s1); }
.item{ display:flex; align-items:center; gap:var(--s3); padding:14px var(--s4); width:100%; text-align:left; }
.item + .item{ border-top:1px solid var(--line-soft); }
.item strong{ flex:1; font-size:var(--f-body); font-weight:600; }
.item .val{ font-size:var(--f-sm); font-weight:700; color:var(--ink-3); }
.switch{
  flex:0 0 auto; width:46px; height:28px; border-radius:var(--r-full);
  background:var(--line); position:relative; transition:background .25s var(--ease);
}
.switch::after{
  content:''; position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2);
  transition:transform .25s var(--ease);
}
.switch[aria-checked="true"]{ background:var(--accent); }
.switch[aria-checked="true"]::after{ transform:translateX(18px); }

/* ------------------------------------------------------------ tabbar --- */
.tabbar{
  flex:0 0 auto; position:absolute; left:0; right:0; bottom:0; z-index:12;
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
  padding:10px var(--s3) 22px;
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--line);
}
.tabbar button{ display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--ink-3); transition:color .2s; }
.tabbar button svg{ width:23px; height:23px; }
.tabbar button span{ font-size:10px; font-weight:700; letter-spacing:.01em; }
.tabbar button.is-active{ color:var(--accent); }
.tabbar__fab{
  width:50px; height:50px; border-radius:var(--r-full); justify-self:center;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 50%,var(--accent-2)));
  color:#fff !important; display:grid !important; place-items:center;
  box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 42%,transparent);
  transform:translateY(-8px);
  transition:transform .16s var(--ease), background var(--dur) var(--ease);
}
.tabbar__fab svg{ width:24px; height:24px; }
.tabbar__fab:active{ transform:translateY(-8px) scale(.92); }
.homebar{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%); z-index:14;
  width:134px; height:5px; border-radius:var(--r-full); background:var(--ink); opacity:.25; pointer-events:none;
}
body.embed .tabbar{ padding-bottom:max(22px, env(safe-area-inset-bottom)); }
body.embed .homebar{ display:none; }

/* ------------------------------------------------------------- sheet --- */
.sheet{ position:absolute; inset:0; z-index:30; }
.sheet[hidden]{ display:none; }
.sheet__scrim{ position:absolute; inset:0; background:rgba(8,8,14,.5); backdrop-filter:blur(2px); animation:fade .25s var(--ease); }
.sheet__panel{
  position:absolute; left:0; right:0; bottom:0; max-height:82%;
  overflow-y:auto;
  background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s3) var(--s5) var(--s6);
  box-shadow:0 -14px 40px rgba(0,0,0,.24);
  animation:slideUp .32s var(--ease);
}
.sheet.is-closing .sheet__panel{ animation:slideDown .24s var(--ease) forwards; }
.sheet.is-closing .sheet__scrim{ animation:fadeOut .24s var(--ease) forwards; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes fadeOut{ from{opacity:1} to{opacity:0} }
@keyframes slideUp{ from{ transform:translateY(100%) } to{ transform:none } }
@keyframes slideDown{ from{ transform:none } to{ transform:translateY(100%) } }
.sheet__grab{ display:block; width:38px; height:4px; border-radius:var(--r-full); background:var(--line); margin:0 auto var(--s4); }
.sheet h3{ margin:0 0 var(--s2); font-size:var(--f-h1); font-weight:800; letter-spacing:-.02em; }
.sheet p.lead{ margin:0 0 var(--s4); font-size:var(--f-sm); color:var(--ink-3); line-height:1.5; }
.sheet__list{ display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s4); }

/* tutor IA */
.chat{ display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s4); max-height:280px; overflow-y:auto; }
.bubble{ max-width:84%; padding:11px 14px; border-radius:var(--r-lg); font-size:var(--f-sm); line-height:1.5; animation:pop .28s var(--ease) both; }
.bubble.ai{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--line); border-bottom-left-radius:6px; color:var(--ink-2); }
.bubble.me{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:6px; }
.bubble.typing{ display:flex; gap:4px; align-items:center; }
.bubble.typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:blink 1.1s infinite; }
.bubble.typing i:nth-child(2){ animation-delay:.18s } .bubble.typing i:nth-child(3){ animation-delay:.36s }
@keyframes blink{ 0%,60%,100%{opacity:.25} 30%{opacity:1} }
@keyframes pop{ from{ opacity:0; transform:translateY(6px) scale(.98) } to{ opacity:1; transform:none } }

/* stepper de aporte */
.amount{ text-align:center; padding:var(--s4) 0 var(--s5); }
.amount b{ display:block; font-size:38px; font-weight:800; letter-spacing:-.03em; color:var(--accent); }
.amount span{ font-size:var(--f-sm); color:var(--ink-3); }
.stepper{ display:flex; align-items:center; justify-content:center; gap:var(--s4); margin-top:var(--s4); }
.stepper button{ width:44px; height:44px; border-radius:var(--r-full); background:var(--tint); color:var(--accent); font-size:22px; font-weight:800; display:grid; place-items:center; }

/* ------------------------------------------------------------- toast --- */
.toast{
  position:absolute; left:50%; bottom:104px; transform:translateX(-50%);
  z-index:40; max-width:82%;
  background:var(--ink); color:var(--bg);
  padding:11px 18px; border-radius:var(--r-full);
  font-size:var(--f-sm); font-weight:700; text-align:center;
  box-shadow:var(--shadow-md);
  animation:toastIn .3s var(--ease);
}
.toast[hidden]{ display:none; }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,10px) } to{ opacity:1; transform:translate(-50%,0) } }

/* --------------------------------------------------------- responsive --- */
@media (max-width: 460px), (max-height: 720px){
  .stage{ padding:0; display:block; }
  .stagehint{ display:none; }
  .device{ width:100%; height:100%; }
  .device__frame{ width:100%; height:100%; max-height:none; aspect-ratio:auto; padding:0; border-radius:0; background:none; box-shadow:none; }
  .device__island{ display:none; }
  .device__screen{ border-radius:0; }
  .statusbar{ padding-top:max(14px, env(safe-area-inset-top)); }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}