/* ═══════════════════════════════════════════════════════════
   App Vitta Prime — Paciente
   Marca: navy #001B3A · gold #B8963E · cream #FAF6EF
   (alinhado ao painel clínico da Dra)
   ═══════════════════════════════════════════════════════════ */
:root{
  --navy:#001B3A; --navy-2:#012a55; --gold:#B8963E; --gold-light:#D4AF6A;
  --cream:#FAF6EF; --white:#fff; --text:#1a1a2e; --text-light:#5a6170;
  --border:rgba(184,150,62,0.18); --shadow:0 4px 24px rgba(0,27,58,0.08);
  --green:#1E8449; --red:#C0392B; --amber:#E67E22;
  --green-bg:#E8F5E9; --red-bg:#FFEBEE; --amber-bg:#FFF3E0;
  --r:16px; --rs:12px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--cream); color:var(--text);
  font-family:var(--sans); font-weight:300; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* layout mobile-first, largura de app */
#app{max-width:480px; margin:0 auto; min-height:100vh; position:relative;
  padding:18px 16px 96px; background:var(--cream)}

/* tipografia */
h1{font-family:var(--serif); font-weight:500; font-size:26px; color:var(--navy); letter-spacing:.2px}
h1 em{font-style:italic; color:var(--gold)}
h2{font-family:var(--serif); font-weight:500; font-size:20px; color:var(--navy); margin-bottom:4px}
.eyebrow{font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); font-weight:500}
.muted{color:var(--text-light); font-size:14px}
.tiny{font-size:12px; color:var(--text-light)}
a{color:var(--gold); text-decoration:none}

/* cards */
.card{background:var(--white); border:1px solid var(--border); border-radius:var(--r);
  padding:20px; box-shadow:var(--shadow); margin-bottom:14px}
.card.tap{cursor:pointer; transition:transform .15s, box-shadow .15s}
.card.tap:active{transform:scale(.99)}
.row{display:flex; align-items:center; gap:12px}
.row.between{justify-content:space-between}
.grow{flex:1}

/* grade de atalhos (home) */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:6px}
.quick{display:flex; flex-direction:column; gap:3px; background:var(--white); border:1px solid var(--border);
  border-radius:16px; padding:15px 15px 16px; box-shadow:var(--shadow); text-decoration:none; transition:transform .12s}
.quick:active{transform:scale(.98)}
.quick b{font-family:var(--serif); font-size:17px; color:var(--navy); font-weight:600; line-height:1.15}
.quick span{font-size:12px; color:var(--text-light)}

/* botões */
.btn{display:block; width:100%; background:var(--navy); color:var(--white); border:none;
  border-radius:var(--rs); padding:15px 18px; font-family:var(--sans);
  font-size:16px; font-weight:500; cursor:pointer; transition:background .2s, transform .1s; text-align:center}
.btn:hover{background:var(--navy-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:default}
.btn.gold{background:var(--gold); color:var(--navy); font-weight:600}
.btn.gold:hover{background:var(--gold-light)}
.btn.ghost{background:transparent; color:var(--navy); border:1px solid var(--border)}

/* inputs */
label.field{display:block; font-size:13px; color:var(--text-light); margin:12px 0 4px; font-weight:400}
input,select{width:100%; padding:14px; border:1.5px solid var(--border); border-radius:var(--rs);
  font-family:var(--sans); font-size:16px; color:var(--text); background:#fff; outline:none; transition:border-color .2s}
input:focus,select:focus{border-color:var(--gold)}
.msg{font-size:14px; margin-top:10px; min-height:18px}
.msg.erro{color:var(--red)} .msg.ok{color:var(--green)}

/* badges / pills */
.pill{display:inline-block; font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px;
  background:var(--cream); color:var(--gold); border:1px solid var(--border)}
.pill.green{background:var(--green-bg); color:var(--green); border-color:transparent}
.pill.amber{background:var(--amber-bg); color:var(--amber); border-color:transparent}

/* índice / número grande */
.bignum{font-family:var(--serif); font-size:54px; font-weight:600; color:var(--navy); line-height:1}
.bignum .of{font-size:20px; color:var(--text-light)}

/* barra de progresso simples */
.bar{height:8px; border-radius:999px; background:#eee; overflow:hidden; margin-top:6px}
.bar > span{display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-light))}

/* lista de itens */
.item{padding:14px 0; border-bottom:1px solid #f0ece3}
.item:last-child{border-bottom:none}

/* ─── LOGIN ─── */
.login-wrap{min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:32px 22px 110px; background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(184,150,62,.10), transparent 60%),
    var(--navy)}
.login-logo{width:84px; height:84px; object-fit:contain; margin:0 auto 18px; display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.login-card{background:rgba(255,255,255,.05); backdrop-filter:blur(16px);
  border:1px solid rgba(184,150,62,.22); border-radius:22px; padding:34px 26px; text-align:center}
.login-card .eyebrow{opacity:.85}
.login-card h1{color:var(--white); margin:6px 0 4px}
.login-card .sub{color:rgba(255,255,255,.6); font-size:13px; margin-bottom:22px}
.login-card label.field{color:rgba(255,255,255,.6); text-align:left}
.login-card input{background:rgba(255,255,255,.07); border-color:rgba(184,150,62,.3); color:#fff}
.login-card input::placeholder{color:rgba(255,255,255,.35)}
.login-card .btn{margin-top:18px}
.login-foot{margin-top:18px; font-size:12px; color:rgba(255,255,255,.45)}
.login-foot a{color:var(--gold-light)}

/* banner instalar PWA */
.banner-instalar{background:var(--navy); color:var(--cream); padding:12px 14px;
  border-radius:var(--rs); font-size:14px; margin-bottom:14px; display:flex; gap:10px; align-items:center}
.banner-instalar u{cursor:pointer; color:var(--gold-light); text-decoration:underline; white-space:nowrap}

/* tabbar inferior */
nav.tabbar{position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; display:flex; background:#fff; border-top:1px solid var(--border);
  box-shadow:0 -4px 20px rgba(0,27,58,.06); z-index:50}
nav.tabbar a{flex:1; text-align:center; padding:10px 4px 12px; font-size:11px; color:var(--text-light);
  text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:3px}
nav.tabbar a .ic{font-size:20px; line-height:1}
nav.tabbar a .ic svg{width:23px; height:23px; display:block}
nav.tabbar a.ativo{color:var(--gold)}

/* topo da página interna */
.topbar{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.topbar img{width:34px; height:34px; object-fit:contain}
.topbar .t{font-family:var(--serif); font-size:18px; color:var(--navy)}
.topbar .t em{font-style:italic; color:var(--gold)}

/* estado vazio */
.vazio{text-align:center; padding:34px 16px; color:var(--text-light)}
.vazio .ic{font-size:40px; opacity:.4; display:block; margin-bottom:10px}

/* disclaimer CFM */
.disclaimer{font-size:11px; color:var(--text-light); text-align:center; margin:10px 0 0; line-height:1.5}

/* Questionário de treino (chips) */
.q{display:block; font-weight:600; font-size:14px; color:var(--navy); margin:0 0 8px}
.q .muted{font-weight:400}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--white); border:1px solid var(--border); color:var(--navy);
  border-radius:999px; padding:9px 15px; font-size:14px; cursor:pointer; transition:all .12s}
.chip:active{transform:scale(.97)}
.chip.on{background:var(--navy); color:var(--white); border-color:var(--navy)}
.msg.ok{color:#1E8449}

/* Exercício com GIF sob demanda */
.ex-item{border-bottom:1px solid var(--border)}
.ex-item:last-child{border-bottom:none}
.ex-head{padding:10px 0}
.ex-midia{display:none}
.ex-midia.aberto{display:block}

/* ═══ Ficha de treino (redesign) ═══ */
.tr-hero{position:relative; overflow:hidden; background:linear-gradient(140deg,#001B3A 0%,#012a55 70%,#03386f 100%);
  color:#fff; border-radius:22px; padding:24px 22px 22px; box-shadow:0 10px 30px rgba(0,27,58,.18); margin-bottom:6px}
.tr-hero::after{content:""; position:absolute; right:-50px; top:-50px; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,106,.28), transparent 70%)}
.tr-hero h1{color:#fff; margin-top:2px}
.tr-hero-meta{display:flex; gap:8px; align-items:center; color:rgba(255,255,255,.72); font-size:13px; margin-top:6px}
.tr-ia{display:inline-block; margin-top:14px; font-size:11px; letter-spacing:.4px;
  background:rgba(212,175,106,.16); color:var(--gold-light); border:1px solid rgba(212,175,106,.4);
  padding:5px 12px; border-radius:999px}

.tr-days{display:flex; gap:9px; overflow-x:auto; padding:14px 2px 8px; position:sticky; top:0; z-index:6;
  background:var(--cream); scrollbar-width:none}
.tr-days::-webkit-scrollbar{display:none}
.tr-pill{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:58px; padding:9px 14px; border-radius:14px; border:1px solid var(--border);
  background:var(--white); color:var(--navy); cursor:pointer; transition:all .18s; box-shadow:var(--shadow)}
.tr-pill b{font-family:var(--serif); font-size:20px; font-weight:600; line-height:1}
.tr-pill span{font-size:10px; letter-spacing:.5px; color:var(--text-light)}
.tr-pill.on{background:var(--navy); border-color:var(--navy)}
.tr-pill.on b,.tr-pill.on span{color:#fff}
.tr-pill.on b{color:var(--gold-light)}

.tr-day-label{font-family:var(--serif); font-style:italic; font-size:18px; color:var(--gold);
  margin:6px 2px 14px; letter-spacing:.3px}

.tr-card{position:relative; background:var(--white); border:1px solid var(--border); border-radius:20px;
  overflow:hidden; margin-bottom:16px; box-shadow:var(--shadow); animation:trUp .5s both}
.tr-card:nth-child(2){animation-delay:.04s} .tr-card:nth-child(3){animation-delay:.08s}
.tr-card:nth-child(4){animation-delay:.12s} .tr-card:nth-child(5){animation-delay:.16s}
.tr-card:nth-child(6){animation-delay:.2s} .tr-card:nth-child(7){animation-delay:.24s}
@keyframes trUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

.tr-media{position:relative; aspect-ratio:1/1; background:linear-gradient(135deg,#0a2342,#0e2f59)}
.tr-media img{width:100%; height:100%; object-fit:cover; display:block}
.tr-shimmer{position:absolute; inset:0; background:linear-gradient(100deg,#0c2746 30%,#163a64 50%,#0c2746 70%);
  background-size:220% 100%; animation:trShim 1.3s infinite}
@keyframes trShim{from{background-position:200% 0} to{background-position:-120% 0}}
.tr-noimg{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); font-size:12px; letter-spacing:.5px}
.tr-ord{position:absolute; top:12px; left:12px; z-index:2; width:30px; height:30px; border-radius:50%;
  background:var(--gold); color:var(--navy); font-weight:600; display:flex; align-items:center;
  justify-content:center; font-size:14px; box-shadow:0 3px 10px rgba(0,0,0,.25)}

.tr-card-body{padding:14px 16px 16px}
.tr-name{font-family:var(--serif); font-weight:500; font-size:20px; color:var(--navy); line-height:1.2}
.tr-obs{font-size:12px; color:var(--amber); margin-top:5px}
.tr-badges{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:13px}
.tr-badge{background:var(--cream); border:1px solid var(--border); border-radius:12px; padding:9px 4px; text-align:center}
.tr-badge b{display:block; font-family:var(--serif); font-size:19px; color:var(--navy); line-height:1}
.tr-badge span{display:block; font-size:9.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--text-light); margin-top:3px}

/* ═══ Treino: programa (resumo IA) + aquecimento/mobilidade + modal adicionar ═══ */
.tr-programa{background:var(--white); border:1px solid var(--border); border-radius:18px; padding:16px 16px;
  box-shadow:var(--shadow); margin:0 0 14px}
.tr-prog-resumo{font-size:14px; color:var(--navy); line-height:1.5; margin:0 0 10px}
.tr-prog-row{display:flex; gap:8px; font-size:13px; color:var(--text); padding:6px 0; border-top:1px solid var(--border)}
.tr-prog-row b{color:var(--gold-dark,#a07d3e); min-width:88px; flex-shrink:0; font-weight:600}
.tr-prog-conf{display:inline-block; margin-top:11px; font-size:11px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--text-light); background:var(--cream); border:1px solid var(--border); border-radius:999px; padding:4px 11px}
.tr-prep{background:linear-gradient(135deg,#fff8ec,#fffdf8); border:1px solid #ecdfc2; border-radius:16px;
  padding:12px 14px; margin:0 0 14px}
.tr-prep-row{display:flex; flex-direction:column; gap:2px; padding:6px 0}
.tr-prep-row + .tr-prep-row{border-top:1px solid #efe3c8}
.tr-prep-row b{font-size:12px; letter-spacing:.4px; color:var(--gold-dark,#a07d3e)}
.tr-prep-row span{font-size:13.5px; color:var(--navy); line-height:1.45}
@keyframes slideup{from{transform:translateY(40px); opacity:.4} to{transform:none; opacity:1}}

/* ═══ Hero premium reutilizável (Pedidos, Evolução, Mais) ═══ */
.hero{position:relative; overflow:hidden; background:linear-gradient(140deg,#001B3A 0%,#012a55 70%,#03386f 100%);
  color:#fff; border-radius:22px; padding:24px 22px; box-shadow:0 10px 30px rgba(0,27,58,.18); margin-bottom:14px}
.hero::after{content:""; position:absolute; right:-50px; top:-50px; width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,175,106,.28), transparent 70%)}
.hero .eyebrow{color:var(--gold-light)}
.hero h1{color:#fff; margin-top:2px; position:relative}
.hero p{color:rgba(255,255,255,.72); font-size:14px; margin-top:5px; position:relative}

/* ═══ Abas internas (segmented) ═══ */
.segs{display:flex; gap:6px; background:var(--white); border:1px solid var(--border); border-radius:14px;
  padding:5px; margin-bottom:16px; box-shadow:var(--shadow)}
.segs button{flex:1; border:none; background:transparent; color:var(--text-light); font-size:13.5px; font-weight:600;
  padding:10px 6px; border-radius:10px; cursor:pointer; transition:all .15s; font-family:var(--sans)}
.segs button.on{background:var(--navy); color:#fff}

/* ═══ Pedidos: receitas e exames ═══ */
.rx{background:var(--white); border:1px solid var(--border); border-radius:18px; padding:16px 16px 14px;
  margin-bottom:13px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.rx::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--gold)}
.rx.tipo-injetavel::before{background:#7E57C2}
.rx.tipo-medicamento::before{background:#1A5C6B}
.rx.tipo-suplemento::before{background:var(--gold)}
.rx-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.rx-nome{font-family:var(--serif); font-size:21px; color:var(--navy); line-height:1.15}
.rx-tag{flex:0 0 auto; font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--text-light);
  background:var(--cream); border:1px solid var(--border); padding:4px 9px; border-radius:999px}
.rx-dose{font-size:14px; color:var(--gold); font-weight:600; margin-top:3px}
.rx-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.rx-pill{display:flex; align-items:center; gap:6px; background:var(--cream); border:1px solid var(--border);
  border-radius:10px; padding:7px 11px; font-size:12.5px; color:var(--navy)}
.rx-pill b{font-weight:600}
.rx-obs{font-size:12.5px; color:var(--text-light); margin-top:11px; line-height:1.5; border-top:1px dashed var(--border); padding-top:9px}
.rx-by{font-size:11px; color:var(--text-light); margin-top:9px; font-style:italic}
.status{flex:0 0 auto; font-size:10.5px; font-weight:600; letter-spacing:.4px; padding:4px 10px; border-radius:999px}
.status.ativa,.status.solicitado{background:var(--amber-bg); color:#a85b00}
.status.agendado{background:#E3F2FD; color:#1565C0}
.status.feito,.status.concluida{background:var(--green-bg); color:var(--green)}
.status.suspensa{background:var(--red-bg); color:var(--red)}
.sec-label{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--gold); margin:4px 2px 12px}

/* ═══ Evolução premium ═══ */
.ev-stat{background:var(--white); border:1px solid var(--border); border-radius:20px; padding:18px 18px 8px;
  margin-bottom:14px; box-shadow:var(--shadow)}
.ev-head{display:flex; justify-content:space-between; align-items:baseline}
.ev-label{font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--text-light)}
.ev-now{display:flex; align-items:baseline; gap:6px; margin-top:4px}
.ev-now b{font-family:var(--serif); font-size:40px; color:var(--navy); line-height:1}
.ev-now span{font-size:15px; color:var(--text-light)}
.ev-delta{font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:999px; display:inline-flex; gap:4px; align-items:center}
.ev-delta.good{background:var(--green-bg); color:var(--green)}
.ev-delta.bad{background:var(--red-bg); color:var(--red)}
.ev-delta.flat{background:var(--cream); color:var(--text-light)}
.ev-chart{margin:14px -4px 4px}
.ev-chart svg{width:100%; display:block}
.ev-foot{display:flex; justify-content:space-between; font-size:11px; color:var(--text-light); padding:0 2px 6px}
/* comparativo antes/agora (1-2 pontos) */
.ev-cmp{display:flex; align-items:stretch; gap:0; margin-top:14px; border:1px solid var(--border); border-radius:14px; overflow:hidden}
.ev-cmp .col{flex:1; padding:14px 12px; text-align:center}
.ev-cmp .col.de{background:var(--cream)}
.ev-cmp .col.para{background:linear-gradient(135deg,#fff,#fbf6ec)}
.ev-cmp .col small{font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:var(--text-light)}
.ev-cmp .col b{display:block; font-family:var(--serif); font-size:30px; color:var(--navy); margin-top:4px; line-height:1}
.ev-cmp .arrow{display:flex; align-items:center; color:var(--gold); padding:0 4px}

/* ═══ Cards de menu (Mais, Pedidos hub) ═══ */
.menu-card{display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--border);
  border-radius:16px; padding:15px 16px; margin-bottom:11px; box-shadow:var(--shadow); cursor:pointer;
  text-decoration:none; transition:transform .12s}
.menu-card:active{transform:scale(.985)}
.menu-card .mc-ic{flex:0 0 auto; width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:var(--cream); color:var(--gold)}
.menu-card .mc-ic svg{width:22px; height:22px}
.menu-card .mc-t{flex:1}
.menu-card h2{font-size:16px; color:var(--navy); margin:0}
.menu-card p{font-size:12.5px; color:var(--text-light); margin:2px 0 0}
.menu-card .mc-go{color:var(--gold); font-size:20px}
.menu-card .soon{font-size:10px; color:var(--text-light); background:var(--cream); border:1px solid var(--border); padding:3px 8px; border-radius:999px}

/* ═══ Vitrine (O que fazemos) ═══ */
.vitrine-h{display:flex; justify-content:space-between; align-items:baseline; margin:22px 2px 12px}
.vitrine-h h2{font-family:var(--serif); font-size:21px; color:var(--navy); margin:0}
.vitrine-h a{font-size:12.5px; color:var(--gold); text-decoration:none; font-weight:600}
.vitrine{display:flex; gap:13px; overflow-x:auto; padding:2px 2px 10px; scroll-snap-type:x mandatory; scrollbar-width:none}
.vitrine::-webkit-scrollbar{display:none}
.vshot{flex:0 0 86%; scroll-snap-align:center; border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--border); background:#fff; position:relative; cursor:pointer}
.vshot img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover}
.vshot .vcap{padding:11px 14px; display:flex; justify-content:space-between; align-items:center}
.vshot .vcap b{font-family:var(--serif); font-size:16px; color:var(--navy)}
.vshot .vcap span{font-size:11px; color:var(--gold); font-weight:600}
/* grid de serviços (página #/servicos) */
.serv-grid{display:flex; flex-direction:column; gap:14px}
.serv-card{border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); background:#fff}
.serv-card img{width:100%; display:block}
.serv-card .scap{padding:13px 16px}
.serv-card .scap b{font-family:var(--serif); font-size:18px; color:var(--navy); display:block}
.serv-card .scap p{font-size:13px; color:var(--text-light); margin:3px 0 0}

/* ═══ CTA dourado (indicação, agendar) ═══ */
.cta-gold{display:block; width:100%; text-align:center; background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:#3a2d0e; font-weight:700; font-size:15px; border:none; border-radius:14px; padding:15px;
  box-shadow:0 8px 20px rgba(184,150,62,.3); cursor:pointer; text-decoration:none; margin:6px 0}
.indic-card{background:linear-gradient(140deg,#1a1410,#2c2316); color:#fff; border-radius:22px; padding:24px 22px;
  text-align:center; box-shadow:var(--shadow); margin-bottom:14px; position:relative; overflow:hidden}
.indic-card h1{color:var(--gold-light); font-size:26px}
.indic-card p{color:rgba(255,255,255,.78); font-size:14px; margin:8px 0 16px; line-height:1.55}