/* ExtraHealth PWA — styles.css
   Responsive single-codebase: mobile shell < 900px, desktop shell ≥ 900px.
   ------------------------------------------------------------------ */

:root{
  --green-bright:#3DDC84; --green-mid:#22C77A; --green-deep:#15A862;
  --green-soft:#E8FBF1; --green-ink:#0E5B3A;
  --blue-bright:#2D94E0; --cyan:#1FB9D6;
  --ink:#0F1A14; --ink70:#3D4A43; --ink50:#6B7872; --ink30:#A6AEAA; --ink10:#E8EDEA;
  --paper:#fff; --surface:#F4F8F5; --surface-alt:#EEF3F0;
  --red:#E5484D;
  --font:"Plus Jakarta Sans",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;
  --card-radius:22px; --row-radius:18px;
  --grad-green:linear-gradient(155deg,#5BE39B 0%,#22C77A 55%,#0FA85F 100%);
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font); color:var(--ink); background:var(--surface);
  overflow:hidden;
}
button{font-family:inherit;}
::-webkit-scrollbar{width:0;height:0;}
.hidden{display:none !important;}

/* ───────── Splash ───────── */
#splash{
  position:fixed; inset:0; z-index:600; background:var(--grad-green);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  transition:opacity .5s ease, visibility .5s ease;
}
#splash.gone{opacity:0; visibility:hidden;}
#splash .splash-cross{animation:pop .7s cubic-bezier(0.2,0.8,0.2,1);}
#splash .splash-word{animation:rowin .5s ease .2s backwards;}

/* ───────── Buttons / chips ───────── */
.btn-primary{
  border:none; cursor:pointer; color:#fff; font-weight:700; letter-spacing:-.2px;
  background:linear-gradient(180deg,var(--green-bright),var(--green-mid));
  box-shadow:0 6px 20px rgba(34,199,122,.35);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.22); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3); color:#fff; font-weight:600; font-size:12px;
}

/* ───────── Login ───────── */
#login{
  position:fixed; inset:0; z-index:500; color:#fff; overflow:hidden;
  background:var(--grad-green);
}
#login .blob1{position:absolute; top:-80px; right:-60px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%); filter:blur(8px);}
#login .blob2{position:absolute; bottom:120px; left:-100px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(31,185,214,.45),transparent 70%); filter:blur(20px);}
#login .login-inner{position:relative; max-width:440px; margin:0 auto; height:100%;}
#login .globe-btn{position:absolute; top:max(40px,env(safe-area-inset-top)); right:24px;
  width:44px; height:44px; border-radius:999px; background:rgba(255,255,255,.18);
  backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.3); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;}
#login .hero{position:absolute; left:24px; right:24px; top:20%;
  transition:all .5s cubic-bezier(0.2,0.7,0.2,1);}
#login.sheet-open .hero{transform:translateY(-30px) scale(.96); opacity:.4;}
#login .hero h1{font-weight:800; font-size:56px; letter-spacing:-1.5px; margin:15px 0 8px; line-height:1;}
#login .hero p{font-weight:400; font-size:26px; letter-spacing:-.5px; margin:0; line-height:1.15;}
#login .cta{position:absolute; left:24px; right:24px; bottom:14%;
  transition:all .4s cubic-bezier(0.2,0.7,0.2,1);}
#login.sheet-open .cta{transform:translateY(40px); opacity:0; pointer-events:none;}
#login .cta .login-open{width:100%; height:60px; border-radius:18px; background:#fff; border:none;
  cursor:pointer; font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.2px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);}
#login .cta .forgot{margin-top:24px; width:100%; text-align:center; background:none; border:none;
  font-size:15px; color:#fff; opacity:.92; cursor:pointer;}
.logo_pwa img {
    width: 80px;
}
.splash-cross img {
    width: 80px;
}
.logo_desk img {
    width: 170px;
    margin: 20px auto;
    display: table;
}
.m-header .brand .isotipemob {
    display: flex;
}
span.isotipemob img {
    object-fit: contain;
    height: 21px;
}
div#detailHost .dh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
div#detailHost{
  transition: all 0.4s ease-in-out;
      padding-bottom: 120px;
}
div#detailHost .dh .t {
    font-family: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: rgb(15, 26, 20);
    letter-spacing: -0.3px;
}
.opencard {
    background: rgb(255, 255, 255);
    border-radius: 20px;
    box-shadow: rgba(15, 26, 20, 0.04) 0px 1px 0px, rgba(15, 26, 20, 0.08) 0px 8px 24px -8px, rgba(15, 26, 20, 0.05) 0px 2px 6px -2px;
    border: 1px solid rgba(15, 26, 20, 0.04);
    padding: 20px 20px 24px;
}
.plan {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
}
.plan .pn {
    font-family: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: rgb(15, 26, 20);
    letter-spacing: -0.6px;
}
.plan .mb {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
    font-size: 12px;
    color: rgb(107, 120, 114);
}
.sec-lbl {
    font-family: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
    font-size: 11px;
    color: rgb(107, 120, 114);
    letter-spacing: 1.2px;
    font-weight: 600;
    margin-bottom: 10px;
}
/* login sheet */
#login .sheet{position:absolute; left:0; right:0; bottom:0; background:#fff; color:var(--ink);
  border-radius:28px 28px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.18);
  transform:translateY(100%); transition:transform .5s cubic-bezier(0.2,0.7,0.2,1);
  padding:14px 24px 40px; z-index:10;}
#login.sheet-open .sheet{transform:translateY(0);}
body.mode-desktop #login .login-inner {
    max-width: 800px;
}
@media(min-width:900px){
  body.mode-desktop #login .sheet {
    max-width: 800px;
    width: 90%;
  }
  #login .sheet{left:50%; transform:translate(-50%,100%);}
  #login.sheet-open .sheet{transform:translate(-50%,0);}
}
.sheet-grab{width:42px; height:4px; border-radius:99px; background:#E5E9E7; margin:0 auto 18px;}
.sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;}
.sheet-head h2{font-weight:700; font-size:24px; letter-spacing:-.5px; margin:0;}
.x-btn{width:36px; height:36px; border-radius:999px; border:none; cursor:pointer;
  background:var(--surface-alt); color:var(--ink70); display:flex; align-items:center; justify-content:center; font-size:16px;}

/* fields */
.field{position:relative; border-bottom:1.5px solid #E5E9E7; padding-bottom:8px; transition:border-color .2s;}
.field + .field{margin-top:14px;}
.field.focus{border-color:var(--green-mid);}
.field label{position:absolute; left:30px; pointer-events:none; font-weight:500; font-size:17px;
  color:var(--ink50); top:18px; transition:all .2s cubic-bezier(0.2,0.7,0.2,1);}
.field.active label{font-size:12px; top:-4px; color:var(--green-mid);}
.field .row{display:flex; align-items:flex-end; gap:10px; padding-top:16px;}
.field .row .ic{color:var(--ink50); transition:color .2s; display:flex;}
.field.focus .row .ic{color:var(--green-mid);}
.field input{flex:1; border:none; outline:none; background:none; font-family:var(--font);
  font-size:17px; color:var(--ink); padding-bottom:2px;}
.sheet .btn-primary{margin-top:28px; width:100%; height:54px; border-radius:16px; font-size:17px;}
.install-hint{margin-top:18px; display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--green-soft); border-radius:14px; color:var(--green-ink); font-size:13px; line-height:1.3;}

/* spinner */
.spinner{width:18px; height:18px; animation:spin .8s linear infinite;}

/* ───────── App container ───────── */
#app{position:fixed; inset:0; background:var(--surface);}

/* SHELL VISIBILITY (responsive switch) */
.mobile-shell{display:none;}
.desktop-shell{display:none;}
body.mode-mobile .mobile-shell{display:block;}
body.mode-desktop .desktop-shell{display:flex;}

/* ───────── Mobile shell ───────── */
.mobile-shell{position:absolute; inset:0; max-width:520px; margin:0 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.m-header{position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding:max(44px,env(safe-area-inset-top)) 20px 12px; background:rgba(255,255,255,.78);
  backdrop-filter:blur(16px) saturate(160%); border-bottom:1px solid rgba(15,26,20,.04);}
.m-header .brand{display:flex; align-items:center; gap:8px;}
.m-header .brand .cross{display:flex;}
.m-header .brand .t{font-weight:700; font-size:19px; color:var(--green-mid); letter-spacing:-.3px;}
.m-header .right{display:flex; align-items:center; gap:14px; color:var(--ink70);}
.m-header .right .ic{display:flex; cursor:pointer;}
.m-content{position:relative;}
.m-screen{animation:pagein .36s cubic-bezier(0.2,0.7,0.2,1); min-height:100%;}

/* pill nav — fixed to viewport bottom */
.pill-nav{position:fixed; left:0; right:0; bottom:max(26px,env(safe-area-inset-bottom)); display:flex; justify-content:center; pointer-events:none; z-index:999;}
body.mode-desktop .pill-nav{display:none;}
.pill-nav .pill{width: 85%; pointer-events:auto; display:flex; align-items:center; gap:0; padding:5px 6px; margin:0 12px;
  border-radius:999px; background:rgba(255,255,255,.92); backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 8px 30px -6px rgba(15,26,20,.22),0 0 0 1px rgba(15,26,20,.04); border:1px solid rgba(255,255,255,.6);}
.pill-nav button{border:none; background:none; cursor:pointer; display:flex; align-items:center; flex-direction:column; gap:2px;
  padding:7px 8px; border-radius:18px; color:var(--ink30); transition:all .32s cubic-bezier(0.2,0.7,0.2,1); flex:1;}
.pill-nav button .lbl{font-weight:600; font-size:10px; letter-spacing:-.1px; white-space:nowrap;
  transition:color .32s cubic-bezier(0.2,0.7,0.2,1);}
.pill-nav button.active{padding:7px 8px; color:var(--green-deep);
  background:linear-gradient(180deg,var(--green-soft),#fff); box-shadow:inset 0 0 0 1.5px rgba(61,220,132,.33);}

/* ───────── Desktop shell ───────── */
.desktop-shell{position:absolute; inset:0;}
body.mode-desktop .desktop-shell{display:flex;}
.sidebar{width:260px; flex-shrink:0; background:#fff; border-right:1px solid var(--ink10);
  display:flex; flex-direction:column; padding:22px 16px;}
.sidebar .logo{padding:4px 8px 22px;}
.sidebar nav{display:flex; flex-direction:column; gap:4px;}
.sidebar nav button{border:none; background:none; cursor:pointer; display:flex; align-items:center; gap:13px;
  padding:12px 14px; border-radius:14px; color:var(--ink70); font-weight:600; font-size:15px; transition:all .2s; text-align:left;}
.sidebar nav button:hover{background:var(--surface);}
.sidebar nav button.active{color:var(--green-deep); font-weight:700;
  background:linear-gradient(180deg,var(--green-soft),#fff); box-shadow:inset 0 0 0 1.5px rgba(61,220,132,.27);}
.sidebar nav button .ic{display:flex;}
.sidebar .foot{margin-top:auto; display:flex; flex-direction:column; gap:12px;}
.sidebar .install-card{display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:16px; background:var(--green-soft);}
.sidebar .install-card .t{font-weight:700; font-size:13px; color:var(--green-ink); line-height:1.2;}
.sidebar .install-card .s{font-size:11px; color:var(--green-deep); opacity:.8;}
.sidebar .user{display:flex; align-items:center; gap:12px; padding:10px 8px; border-top:1px solid var(--ink10);}
.avatar{width:40px; height:40px; border-radius:999px; flex-shrink:0; color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:15px; background:linear-gradient(135deg,var(--green-bright),var(--cyan));}
.sidebar .user .n{font-weight:700; font-size:14px; color:var(--ink); line-height:1.1;}
.sidebar .user .p{font-size:12px; color:var(--ink50);}
.d-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.d-header{display:flex; align-items:center; justify-content:space-between; padding:22px 36px;
  border-bottom:1px solid var(--ink10); background:rgba(255,255,255,.7); backdrop-filter:blur(12px);}
.d-header h1{font-weight:800; font-size:26px; letter-spacing:-.8px; margin:0;}
.d-header p{font-size:14px; color:var(--ink50); margin:3px 0 0;}
.d-header .acts{display:flex; align-items:center; gap:10px;}
.icon-btn{width:42px; height:42px; border-radius:999px; cursor:pointer; background:#fff;
  border:1px solid var(--ink10); color:var(--ink70); display:flex; align-items:center; justify-content:center;}
.d-content{flex:1; overflow-y:auto; padding:32px 36px 48px;}
.d-content .wrap{max-width:1080px; margin:0 auto; animation:pagein .36s cubic-bezier(0.2,0.7,0.2,1);}

/* ───────── Brand marks ───────── */
.mark{display:inline-flex; align-items:center; line-height:1;}
.mark.wordmark{gap:.32em; font-weight:800; letter-spacing:-.5px;}
.mark.wordmark .gray{color:var(--ink);} .mark.wordmark .grn{color:var(--green-bright);}
.mark.lyric{font-family:"Playfair Display",Georgia,serif; font-weight:700; color:#fff; letter-spacing:-1px;}
.mark.rx{gap:7px; font-weight:700; letter-spacing:-.4px;} .mark.rx .a{color:#2D3A33;} .mark.rx .b{color:var(--green-mid);}
.mark.vca{gap:7px; font-weight:700; letter-spacing:-.3px;} .mark.vca .a{color:#9BA29F;} .mark.vca .b{color:var(--cyan);}
.mark.bill{font-weight:800; letter-spacing:-.3px;} .mark.bill .a{color:#1A1A1A;} .mark.bill .b{color:#D7263D;}
.mark.concierge{gap:7px; font-weight:700; letter-spacing:-.3px; color:#3A3A3A;}

/* ───────── Benefits (mobile accordion) ───────── */
.scr-pad{padding:18px 16px 140px; display:flex; flex-direction:column; gap:12px;}
.benefit-row{background:#fff; border:1px solid rgba(15,26,20,.04); border-radius:var(--row-radius);
  box-shadow:0 1px 0 rgba(15,26,20,.04),0 8px 24px -8px rgba(15,26,20,.08); position:relative; overflow:hidden;
  animation:rowin .5s cubic-bezier(0.2,0.7,0.2,1) backwards;}
.benefit-row .accent{position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:99px; opacity:.7;}
.benefit-row .head{display:flex; align-items:center; justify-content:space-between; padding:20px 18px; cursor:pointer; width:100%; background:none; border:none;}
.benefit-row .head .lbl{font-weight:600; font-size:11px; color:var(--ink70); text-align:right; letter-spacing:.3px; max-width:110px; line-height:1.25;}
.benefit-row .head .chev{color:var(--ink30); display:flex; transition:transform .3s cubic-bezier(0.2,0.7,0.2,1);}
.benefit-row.open .head .chev{transform:rotate(90deg);}
.benefit-row .drawer{display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s cubic-bezier(0.2,0.7,0.2,1);}
.benefit-row.open .drawer{grid-template-rows:1fr;}
.benefit-row .drawer > div{overflow:hidden;}
.benefit-row .drawer .inner{padding:0 18px 18px; display:flex; flex-direction:column; gap:14px; opacity:0; transition:opacity .3s .08s;}
.benefit-row.open .drawer .inner{opacity:1;}
.benefit-row .divider{height:1px; background:var(--ink10);}
.benefit-row .short{margin:0; font-size:14px; line-height:1.5; color:var(--ink70); text-wrap:pretty;}
.see-more{
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--green-deep);
    font-weight: 800;
    font-size: 13px;
    border: 0px;
    background-color: transparent;
    margin: 20px 0px 10px;
}

/* Benefits (desktop grid) */
.benefit-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px;}
.benefit-card{background:#fff; border:1px solid rgba(15,26,20,.04); border-radius:20px;
  box-shadow:0 1px 0 rgba(15,26,20,.04),0 8px 24px -8px rgba(15,26,20,.08); padding:24px 22px;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  animation:rowin .5s cubic-bezier(0.2,0.7,0.2,1) backwards;}
.benefit-card .accent{position:absolute; left:0; top:20px; bottom:20px; width:3px; border-radius:99px; opacity:.7;}
.benefit-card .mk{margin-bottom:14px;}
.benefit-card .lbl{font-weight:700; font-size:10.5px; letter-spacing:1px; color:var(--ink50); margin-bottom:10px;}
.benefit-card .short{margin:0 0 18px; font-size:14px; line-height:1.5; color:var(--ink70); text-wrap:pretty; flex:1;}
/* ver más accordion */
.ver-mas-body{max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(0.2,0.7,0.2,1);}
.ver-mas-body.open{max-height:700px;}
.see-more svg{transition:transform .3s ease;}
.see-more.open svg{transform:rotate(90deg);}


/* ───────── Wallet ───────── */
.wallet-title{padding:8px 20px 0;}
.wallet-title h2{font-weight:800; font-size:34px; letter-spacing:-1.2px; margin:8px 0 4px;}
.wallet-title p{font-size:14px; color:var(--ink50); margin:0; line-height:1.4;}
.stack{position:relative; margin:20px 18px 280px; padding-bottom:140px;}
.card-slot{left:0; right:0; transform-origin:center top; cursor:pointer;
  transition:transform .6s cubic-bezier(0.5,0.05,0.2,1), opacity .4s;}

/* flip */
.flip{perspective:1400px;}
.flip-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(0.4,0.1,0.2,1); transform:rotateY(0);}
.flip.flipped .flip-inner{transform:rotateY(180deg);}
.flip-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.flip-back-face{transform:rotateY(180deg);}

/* card faces */
.ins-card{height:100%; border-radius:var(--card-radius); padding:20px 22px; position:relative; overflow:hidden; color:#fff;
  box-shadow:0 8px 20px -6px rgba(15,26,20,.25),0 0 0 1px rgba(255,255,255,.3) inset; transition:box-shadow .4s;}
.ins-card.expanded{box-shadow:0 30px 60px -10px rgba(15,26,20,.25),0 0 0 1px rgba(255,255,255,.4) inset; display:flex; flex-direction:column;}
/* data rows shown on expanded card face */
.card-data{display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; margin:12px 0 8px;}
.card-data .cdi .k{font-size:8px; letter-spacing:1px; opacity:.55; font-weight:700; margin-bottom:2px; text-transform:uppercase;}
.card-data .cdi .v{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:-.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.95;}
/* expanded bottom becomes inline (no longer absolute) */
.ins-card .btm-inline{position:relative; left:auto; right:auto; bottom:auto; margin-top:auto; padding-top:8px;}
.ins-card .sheen{position:absolute; inset:0; border-radius:var(--card-radius); pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.08) 100%);}
.ins-card .orb{position:absolute; right:-30px; top:-30px; width:160px; height:160px; border-radius:50%;
  pointer-events:none; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);}
.ins-card .top{position:relative; display:flex; justify-content:space-between; align-items:flex-start;}
.ins-card .sub{font-weight:800; font-size:15px; margin-bottom:8px;}
.ins-card .ttl{font-weight:300; font-size:17px; letter-spacing:-.5px; line-height:1.1;}
.ins-card .bottom{position:absolute; left:22px; right:22px; bottom:18px; display:flex; justify-content:space-between; align-items:flex-end; gap:14px;}
.ins-card .k{font-size:10px; letter-spacing:1.4px; opacity:.8; margin-bottom:4px; font-weight:600;}
.ins-card .v{font-weight:600; font-size:15px; letter-spacing:-.2px; line-height:1.1;}
.ins-card .v.mono{font-family:var(--mono); font-size:13px;}
.ins-card .v.big{font-weight:700; font-size:17px; letter-spacing:-.3px;}
.card-detail button.see-more {
    margin-top: 20px;
}
/* card back */
.ins-back{height:100%; border-radius:var(--card-radius); position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(160deg,#14241B 0%,#1E3B2C 100%);
  box-shadow:0 8px 20px -6px rgba(15,26,20,.25),0 0 0 1px rgba(255,255,255,.08) inset;}
.ins-back.expanded{box-shadow:0 30px 60px -10px rgba(15,26,20,.3),0 0 0 1px rgba(255,255,255,.1) inset;}
.ins-back .stripe{position:absolute; top:16px; left:0; right:0; height:34px; background: #0a140eb8;}
.ins-back .body{padding:32px 20px 16px; position:relative; height:100%; display:flex; flex-direction:column;}
.ins-back .rows{display:grid; grid-template-columns:1fr 1fr; gap:7px 16px;}
.ins-back .rows .k{font-size:8.5px; letter-spacing:1px; opacity:.55; font-weight:700; margin-bottom:2px;}
.ins-back .rows .v{font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:-.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ins-back .svc{margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:14px;}
.ins-back .svc .k{font-size:8.5px; letter-spacing:1px; opacity:.55; font-weight:700; margin-bottom:3px;}
.ins-back .svc .ph{font-family:var(--mono); font-size:13px; font-weight:600; color:var(--green-bright);}
.ins-back .svc .web{font-size:10.5px; opacity:.7; margin-top:2px;}
.barcode{display:flex; align-items:flex-end; gap:1.5px; height:40px; padding:0 2px; background:#fff; border-radius:3px;}
.barcode i{background:#14241B; display:block;}
.barcode-num{font-family:var(--mono); font-size:9px; opacity:.7; margin-top:3px; letter-spacing:1px; text-align:center;}

/* card detail panel */
.card-detail{background:#fff; border-radius:20px; border:1px solid rgba(15,26,20,.04);
  box-shadow:0 1px 0 rgba(15,26,20,.04),0 8px 24px -8px rgba(15,26,20,.08); padding:20px 20px 24px;
  animation:detailin .5s cubic-bezier(0.2,0.7,0.2,1) .28s backwards;}
.card-detail .dh{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.card-detail .dh .t{font-weight:700; font-size:17px; letter-spacing:-.3px;}
.card-detail .plan{display:flex; align-items:baseline; gap:8px; margin-bottom:14px;}
.card-detail .plan .pn{font-weight:800; font-size:24px; letter-spacing:-.6px;}
.card-detail .plan .mb{font-family:var(--mono); font-size:12px; color:var(--ink50);}
.card-detail .sec-lbl{font-size:11px; color:var(--ink50); letter-spacing:1.2px; font-weight:600; margin-bottom:10px;}
.perks{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px;}
.perks li{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink70);}
.perks li .tick{width:18px; height:18px; border-radius:999px; background:var(--green-soft); color:var(--green-deep);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;}
.disc-pill{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:var(--green-soft); color:var(--green-deep); font-weight:700; font-size:14px; margin-bottom:18px;}
.kv{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--ink10);}
.kv .k{font-size:13px; color:var(--ink50);} .kv .v{font-size:14px; font-weight:600; letter-spacing:-.2px; text-align:right;}
.note{margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--surface-alt); color:var(--ink70); font-size:13px; line-height:1.4;}
.flip-btn{margin-top:18px; width:100%; height:48px; border-radius:14px; font-size:15px;}
.flip-btn.back{background:#fff; color:var(--green-deep); border:1.5px solid var(--green-bright); box-shadow:none;}

/* wallet desktop grid */
.wallet-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px;}
.wallet-grid .gc{cursor:pointer; height:210px; transition:transform .22s;
  animation:rowin .5s cubic-bezier(0.2,0.7,0.2,1) backwards;}
.wallet-grid .gc:hover{transform:translateY(-4px);}

/* ───────── Profile ───────── */
.profile-hero{background:linear-gradient(135deg,var(--green-bright) 0%,var(--green-mid) 60%,var(--cyan) 130%);
  border-radius:var(--card-radius); padding:24px 22px; color:#fff; position:relative; overflow:hidden;
  box-shadow:0 14px 28px -8px rgba(34,199,122,.45);}
.profile-hero .orb{position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);}
.profile-hero .head{display:flex; align-items:center; gap:16px; position:relative;}
.profile-hero .av{width:64px; height:64px; border-radius:999px; background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:24px; letter-spacing:-.5px; backdrop-filter:blur(8px);}
.profile-hero .nm{font-weight:700; font-size:21px; letter-spacing:-.4px; line-height:1.1;}
.profile-hero .em{font-size:13px; opacity:.9; margin-top:4px;}
.profile-hero .chips{display:flex; gap:8px; margin-top:18px; position:relative;}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.stat{background:#fff; border-radius:16px; padding:14px 12px; border:1px solid var(--ink10);}
.stat .n{font-weight:800; font-size:22px; letter-spacing:-.5px; line-height:1;}
.stat .l{font-size:11px; color:var(--ink50); margin-top:4px; font-weight:500; letter-spacing:.2px;}
.settings{}
.settings .grp-lbl{font-size:11px; letter-spacing:1.4px; font-weight:700; color:var(--ink50); margin-bottom:8px; padding-left:4px;}
.settings .grp{background:#fff; border-radius:var(--row-radius); border:1px solid rgba(15,26,20,.04); overflow:hidden;}
.settings .r{display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer;}
.settings .r + .r{border-top:1px solid var(--ink10);}
.settings .r.hl{background:var(--green-soft);}
.settings .r .ic{color:var(--ink70); display:flex;} .settings .r.hl .ic{color:var(--green-deep);}
.settings .r .nm{flex:1; font-size:15px; color:var(--ink); font-weight:500;}
.settings .r.hl .nm{color:var(--green-deep); font-weight:700;}
.settings .r .val{font-size:13px; color:var(--ink50);}
.settings .r .chev{color:var(--ink30); display:flex;}
.logout{width:100%; padding:16px; background:none; border:1px solid var(--ink10); border-radius:var(--row-radius);
  font-weight:600; font-size:15px; color:var(--red); cursor:pointer;}
.app-ver{margin-top:18px; text-align:center; font-size:11px; color:var(--ink30); letter-spacing:.5px;}

/* ───────── Doctor ───────── */
.doc-hero{background:linear-gradient(155deg,#143948 0%,#1B5566 100%); color:#fff; border-radius:var(--card-radius);
  padding:24px 22px; position:relative; overflow:hidden; box-shadow:0 14px 28px -8px rgba(20,57,72,.45);}
.doc-hero .orb{position:absolute; right:-30px; top:-30px; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);}
.doc-hero h2{font-weight:800; font-size:28px; letter-spacing:-.8px; margin:14px 0 6px; line-height:1.1;}
.doc-hero p{font-size:14px; opacity:.85; line-height:1.4; margin:0;}
.doc-hero .em{color:var(--green-bright);}
.btn-lyric-launch{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px;
  width:100%; padding:15px 24px; background:#fff; color:#143948; border:none; border-radius:14px;
  font-weight:700; font-size:15px; cursor:pointer; transition:opacity .2s;}
.btn-lyric-launch:active{opacity:.85;}
.btn-lyric-launch.loading{opacity:.7; cursor:not-allowed;}
.btn-lyric-launch .spinner{width:18px;height:18px;}
.lyric-msg{min-height:22px; margin-top:10px;}
.lyric-err{font-size:13px; color:rgba(255,180,120,1); line-height:1.4;}
.consult-list{background:#fff; border-radius:var(--row-radius); border:1px solid rgba(15,26,20,.04); overflow:hidden;}
.consult-list .c{display:flex; gap:14px; padding:14px 16px; align-items:center;}
.consult-list .c + .c{border-top:1px solid var(--ink10);}
.consult-list .date{width:44px; height:44px; border-radius:12px; background:var(--green-soft); color:var(--green-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:700; font-size:12px; line-height:1.1;}
.consult-list .date span{font-size:9px; opacity:.7;}
.consult-list .c .tp{font-weight:600; font-size:14px;}
.consult-list .c .dr{font-size:12px; color:var(--ink50);}

/* ───────── Chat ───────── */
.chat-wrap{padding:18px 16px 140px; display:flex; flex-direction:column; gap:10px;}
.bubble-row{display:flex; align-items:flex-end; gap:8px; animation:rowin .4s cubic-bezier(0.2,0.7,0.2,1);}
.bubble-row.me{justify-content:flex-end;}
.bubble{max-width:78%; padding:10px 14px; font-size:14px; line-height:1.45;}
.bubble.them{border-radius:18px 18px 18px 4px; background:#fff; border:1px solid var(--ink10); color:var(--ink); box-shadow:0 1px 2px rgba(15,26,20,.04);}
.bubble.me{border-radius:18px 18px 4px 18px; background:linear-gradient(180deg,var(--green-bright),var(--green-mid)); color:#fff; box-shadow:0 4px 12px rgba(34,199,122,.25);}
.sugg{display:flex; gap:8px; margin:4px 0 0 8px;}
.sugg button{padding:6px 12px; border-radius:999px; background:#fff; border:1px solid var(--green-mid); color:var(--green-deep); font-weight:600; font-size:12px; cursor:pointer;}
.chat-input{position:sticky; bottom:0; padding:10px 14px 14px; background:rgba(255,255,255,.85); backdrop-filter:blur(12px); border-top:1px solid var(--ink10);}
.chat-input .box{display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surface); border-radius:999px; border:1px solid var(--ink10);}
.chat-input .box .ph{flex:1; font-size:14px; color:var(--ink50);}
.chat-input .box .send{width:34px; height:34px; border-radius:999px; border:none; background:var(--green-mid); color:#fff; cursor:pointer;}
.dots{display:inline-flex; gap:4px;}
.dots i{width:7px; height:7px; border-radius:99px; background:var(--ink30); display:inline-block; animation:bounce 1.2s infinite ease-in-out;}

/* ───────── Modal ───────── */
.overlay{position:fixed; inset:0; z-index:400; background:rgba(15,26,20,.42);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:fadein .26s ease;}
/* mobile = bottom sheet */
body.mode-mobile .overlay{display:flex; align-items:flex-end; justify-content:center;}
body.mode-mobile .modal{width:100%; max-width:520px; background:#fff; border-radius:28px 28px 0 0;
  box-shadow:0 -12px 48px rgba(0,0,0,.22); padding:14px 24px 32px; max-height:80%; overflow-y:auto;
  animation:sheetup .42s cubic-bezier(0.2,0.7,0.2,1);}
/* desktop = centered */
body.mode-desktop .overlay{display:flex; align-items:center; justify-content:center; padding:32px;}
body.mode-desktop .modal{background:#fff; border-radius:24px; max-width:560px; width:100%; padding:30px 32px 32px;
  box-shadow:0 30px 80px rgba(0,0,0,.3); max-height:82vh; overflow-y:auto;
  animation:detailin .4s cubic-bezier(0.2,0.7,0.2,1);}
.modal .m-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:8px;}
.modal .m-lbl{font-weight:700; font-size:11px; letter-spacing:1.2px; margin:4px 0 14px;}
.modal p{margin:0 0 14px; font-size:15px; line-height:1.6; color:var(--ink70); text-wrap:pretty;}
.modal .btn-primary{margin-top:8px; padding:14px 26px; border-radius:14px; font-size:15px;}
/* desktop card modal: card + detail side by side */
.card-modal{display:flex; gap:28px; align-items:stretch; max-width:1250px; width:100%;
  animation:detailin .4s cubic-bezier(0.2,0.7,0.2,1);}
.card-modal .left{flex:0 0 380px; display:flex; flex-direction:column; justify-content:center; gap:16px;}
.card-modal .left .hint{text-align:center; font-size:13px; color:#fff; opacity:.85;}
.card-modal .right{flex:1; min-width:0; max-height:78vh; overflow-y:auto;}

/* ───────── Keyframes ───────── */
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes rowin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes detailin{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* profile / doctor responsive layouts */
.profile-layout{display:flex; flex-direction:column; gap:20px;}
.doc-layout{display:flex; flex-direction:column; gap:24px;}
body.mode-desktop .profile-layout{display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:start;}
body.mode-desktop .doc-layout{display:grid; grid-template-columns:1fr; gap:24px; align-items:start;}
body.mode-desktop .doc-hero{padding:32px 30px;}
body.mode-desktop .doc-hero h2{font-size:32px;}
body.mode-desktop .profile-hero{border-radius:24px; padding:28px 26px;}

/* ───────── Botpress webchat ───────── */
/* Ocultar el FAB nativo — se abre desde el tab de Chat */
[class*="bpFab"], [class*="bp-fab"], [id*="bp-web-widget"] > [class*="Fab"],
#bp-webchat > div:last-child[style*="position:fixed"] { display:none !important; }
/* Elevar el widget por encima del pill-nav */
#bp-webchat, [id*="bp-web-widget"] { z-index:200 !important; }

/* Placeholder mientras Botpress carga */
.chat-bp-placeholder{display:flex; align-items:center; justify-content:center; min-height:60vh;}
.chat-bp-inner{display:flex; flex-direction:column; align-items:center; gap:16px; color:var(--ink50);}
.chat-bp-inner p{font-size:14px; margin:0; display:flex; align-items:center; gap:8px;}

/* view toggle (manual override) */
.view-toggle{position:fixed; z-index:450; bottom:14px; right:14px; display:flex; gap:2px; padding:4px;
  background:rgba(15,26,20,.7); backdrop-filter:blur(10px); border-radius:999px;}
.view-toggle button{border:none; background:none; color:rgba(255,255,255,.6); cursor:pointer;
  font-size:11px; font-weight:700; padding:6px 12px; border-radius:999px;}
.view-toggle button.on{background:#fff; color:var(--ink);}
@media(max-width:520px){ .view-toggle{bottom:96px;} }