/* Área do cliente — mesma identidade do site, em formato de painel */
:root {
  --green:#F97316; --green-dark:#C2410C; --green-light:#FFF1E8; --green-mid:#FB923C;
  --navy:#0D2137; --gray:#5A6B7C; --gray-faint:#8494A3; --gray-light:#F4F6F9;
  --border:#DDE3EA; --ground:#EDF0F4;
  --ok:#15803D; --ok-bg:#E7F5EC;
  --warn:#B45309; --warn-bg:#FDF3E3;
  --alert:#B3261E; --alert-bg:#FBEBEA;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x: clip; }
body {
  font-family:Arial, Helvetica, sans-serif;
  background:var(--ground); color:var(--navy); line-height:1.6;
  width:100%; max-width:100%; overflow-x:hidden; overflow-x:clip; overflow-wrap:break-word;
}
a { color:var(--green-dark); }
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }

/* ── topo ── */
.topo { background:var(--navy); position:sticky; top:0; z-index:50; }
.topo-inner { max-width:60rem; margin:0 auto; padding:.8rem 1.1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.marca { display:flex; align-items:center; gap:.5rem; color:#fff; font-weight:900; font-size:1rem; letter-spacing:-.02em; text-decoration:none; }
.marca i { width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--green),var(--green-mid)); display:grid; place-items:center; font-style:normal; font-size:.85rem; }
.marca span { color:var(--green-mid); }
.topo-dir { display:flex; align-items:center; gap:.7rem; }
.topo-dir a, .topo-dir button { color:rgba(255,255,255,.65); font-size:.8rem; font-weight:700; text-decoration:none; background:none; border:none; cursor:pointer; font-family:inherit; }
.topo-dir a:hover, .topo-dir button:hover { color:#fff; }

/* ── abas ── */
.abas { background:var(--navy); border-top:1px solid rgba(255,255,255,.08); }
.abas-inner { max-width:60rem; margin:0 auto; padding:0 1.1rem .7rem; display:flex; gap:.35rem; flex-wrap:wrap; }
.abas a {
  font-size:.82rem; color:rgba(255,255,255,.6); font-weight:700; text-decoration:none;
  padding:.35rem .8rem; border-radius:100px; white-space:nowrap;
}
.abas a:hover { color:#fff; }
.abas a.on { color:#fff; background:rgba(255,255,255,.14); }

/* ── conteúdo ── */
main { max-width:60rem; margin:0 auto; padding:1.4rem 1.1rem 4rem; display:flex; flex-direction:column; gap:1rem; }
.painel { display:none; flex-direction:column; gap:1rem; }
.painel.ativo { display:flex; }

.ola { font-size:1.25rem; font-weight:900; letter-spacing:-.02em; }
.ola small { display:block; font-size:.84rem; font-weight:600; color:var(--gray); margin-top:.15rem; letter-spacing:0; }

.grade { display:grid; gap:.75rem; }
.g2 { grid-template-columns:repeat(auto-fit, minmax(16rem,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit, minmax(12rem,1fr)); }
.grade > * { min-width:0; }

.cartao { background:#fff; border:1px solid var(--border); border-radius:14px; padding:1rem 1.1rem; }
.cartao h3 { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--gray-faint); margin-bottom:.45rem; }
.numerao { font-size:1.9rem; font-weight:900; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
/* Cartão e linha que abrem a lista por trás do número (painel /admin) */
.cartao.clicavel, .funil-linha.clicavel { cursor:pointer; transition:border-color .15s, background .15s, transform .1s; }
.cartao.clicavel:hover { border-color:var(--green); transform:translateY(-1px); }
.funil-linha.clicavel:hover b { color:var(--green-dark); text-decoration:underline; }
.cartao.clicavel:focus-visible, .funil-linha.clicavel:focus-visible { outline:2px solid var(--green); outline-offset:3px; border-radius:10px; }
.ver-lista { font-size:.72rem; font-weight:800; color:var(--green-dark); margin-top:.5rem; opacity:0; transition:opacity .15s; }
.cartao.clicavel:hover .ver-lista, .cartao.clicavel:focus-visible .ver-lista { opacity:1; }
@media (hover:none) { .ver-lista { opacity:1; } }
.numerao small { font-size:.85rem; color:var(--gray-faint); font-weight:800; }
.sub { font-size:.8rem; color:var(--gray); margin-top:.3rem; }

.pill { display:inline-flex; align-items:center; gap:.28rem; font-size:.7rem; font-weight:800; padding:.2rem .58rem; border-radius:100px; white-space:nowrap; }
.p-ok { background:var(--ok-bg); color:var(--ok); }
.p-warn { background:var(--warn-bg); color:var(--warn); }
.p-alert { background:var(--alert-bg); color:var(--alert); }
.p-neutro { background:var(--border); color:var(--gray); }

.destaque { border:2px solid var(--green); background:var(--green-light); border-radius:16px; padding:1.15rem 1.2rem; }
.destaque .tag { font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--green-dark); }
.destaque h2 { font-size:1.15rem; font-weight:900; margin:.3rem 0 .35rem; letter-spacing:-.02em; text-wrap:balance; }
.destaque p { font-size:.9rem; color:var(--gray); }

.botao { display:inline-block; margin-top:.8rem; margin-right:.45rem; background:linear-gradient(135deg,var(--green),var(--green-mid)); color:#fff; font-weight:800; font-size:.86rem; padding:.6rem 1.2rem; border-radius:100px; text-decoration:none; border:none; cursor:pointer; font-family:inherit; }
.botao.fantasma { background:none; color:var(--green-dark); border:2px solid var(--green); }
.botao.mini { font-size:.76rem; padding:.4rem .9rem; margin-top:.45rem; }

/* ── pedidos ── */
.pedido { background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.pedido-cab { background:var(--navy); padding:.85rem 1rem; display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap; }
.pedido-cab b { color:#fff; font-size:.95rem; min-width:0; }
.pedido-corpo { padding:1rem; display:flex; flex-direction:column; gap:.9rem; }
.valores { display:grid; grid-template-columns:repeat(auto-fit, minmax(7rem,1fr)); gap:.7rem; }
.valores > div { min-width:0; }
.valores dt { font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-faint); }
.valores dd { font-size:1.05rem; font-weight:900; font-variant-numeric:tabular-nums; margin-top:.1rem; }

.passos-wrap { position:relative; z-index:0; }
.passos { display:flex; align-items:flex-start; }
.passo { flex:1; text-align:center; position:relative; min-width:0; }
.passo .pt { width:20px; height:20px; border-radius:50%; margin:0 auto .35rem; border:2px solid var(--border); background:#fff; }
.passo.done .pt { background:var(--ok); border-color:var(--ok); }
.passo.now .pt { background:var(--green); border-color:var(--green); box-shadow:0 0 0 4px var(--green-light); }
.passo small { font-size:.68rem; color:var(--gray); font-weight:700; display:block; line-height:1.35; }
.passo::before { content:''; position:absolute; top:9px; left:-50%; width:100%; height:2px; background:var(--border); z-index:-1; }
.passo:first-child::before { display:none; }

.aviso { background:var(--warn-bg); border-left:3px solid var(--warn); border-radius:8px; padding:.65rem .85rem; font-size:.82rem; color:var(--warn); font-weight:600; }
.aviso.grave { background:var(--alert-bg); border-color:var(--alert); color:var(--alert); }
.lgpd-nota { font-size:.75rem; color:var(--gray-faint); border-top:1px dashed var(--border); padding-top:.6rem; }

/* ── jornada ── */
.etapa { display:flex; gap:.85rem; }
.trilho { display:flex; flex-direction:column; align-items:center; flex:none; }
.bola { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; font-weight:900; border:2px solid var(--border); background:#fff; color:var(--gray-faint); }
.bola.feita { background:var(--ok); border-color:var(--ok); color:#fff; }
.bola.agora { background:var(--green); border-color:var(--green); color:#fff; }
.fio { width:2px; flex:1; background:var(--border); min-height:18px; }
.etxt { padding-bottom:1rem; min-width:0; }
.etxt b { font-size:.92rem; display:block; }
.etxt span { font-size:.8rem; color:var(--gray); }

/* ── meus dados ── */
.campo { display:flex; justify-content:space-between; align-items:center; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.campo:last-child { border-bottom:none; }
.campo .rot-c { font-size:.78rem; color:var(--gray-faint); font-weight:700; }
.campo .val-c { font-size:.92rem; font-weight:700; }
.campo .det { font-size:.76rem; color:var(--gray); font-weight:600; }
.campo button.editar { background:none; border:none; color:var(--green-dark); font-family:inherit; font-size:.78rem; font-weight:800; cursor:pointer; text-decoration:underline; }
.campo input {
  border:2px solid var(--green); border-radius:10px; padding:.45rem .7rem; font-size:16px;
  font-family:inherit; font-weight:700; color:var(--navy); background:#fff; outline:none; max-width:100%;
}
.switch { width:40px; height:23px; border-radius:100px; background:var(--border); position:relative; flex:none; border:none; cursor:pointer; transition:background .2s; }
.switch.on { background:var(--ok); }
.switch::after { content:''; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; transition:left .2s; }
.switch.on::after { left:20px; }

/* ── estados ── */
.vazio { background:#fff; border:1px dashed var(--border); border-radius:14px; padding:1.6rem 1.2rem; text-align:center; }
.vazio p { font-size:.9rem; color:var(--gray); max-width:28rem; margin:0 auto; }
.carregando { text-align:center; padding:2.5rem 1rem; color:var(--gray-faint); font-size:.9rem; font-weight:700; }
.msg { font-size:.82rem; font-weight:700; margin-top:.5rem; }
.msg.ok { color:var(--ok); } .msg.erro { color:var(--alert); }

/* ── porta de entrada (deslogado) ── */
.portao { max-width:24rem; margin:3rem auto; background:#fff; border:1px solid var(--border); border-radius:16px; padding:1.8rem 1.6rem; text-align:center; }
.portao h1 { font-size:1.2rem; font-weight:900; margin-bottom:.4rem; }
.portao p { font-size:.9rem; color:var(--gray); margin-bottom:1.2rem; }
/* Entrar e criar conta acontecem aqui: quem chega pelo site não é mandado
   para o app só para se cadastrar. 16px no input evita o zoom do iOS. */
.portao input {
  width:100%; box-sizing:border-box; margin-bottom:.6rem;
  border:2px solid var(--border); border-radius:10px; padding:.7rem .8rem;
  font-size:16px; font-family:inherit; font-weight:700; color:var(--navy);
  background:#fff; outline:none;
}
.portao input:focus { border-color:var(--green); }
.portao .botao { width:100%; margin:.3rem 0 0; text-align:center; }
.portao .links { display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-top:.9rem; }
.portao .links button {
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
  font-size:.8rem; font-weight:800; color:var(--green-dark); text-decoration:underline;
}
.portao .links button.discreto { color:var(--gray); font-weight:700; }

@media (max-width:480px) {
  .topo-inner { padding:.7rem .9rem; }
  .abas-inner { padding:0 .9rem .6rem; }
  main { padding:1.1rem .9rem 3rem; }
}

/* ── jornada: barra e formulários das etapas ── */
.barra-progresso { height:8px; background:var(--border); border-radius:10px; overflow:hidden; }
.barra-progresso i { display:block; height:100%; width:0; border-radius:10px; background:linear-gradient(to right,var(--green),var(--green-mid)); transition:width .35s; }

.form-etapa { background:var(--gray-light); border-radius:12px; padding:.85rem .9rem; margin-top:.6rem; }
.form-etapa label { display:block; font-size:.76rem; font-weight:800; color:var(--navy); margin-bottom:.25rem; }
.form-etapa input[type=text] {
  width:100%; border:2px solid var(--border); border-radius:10px; padding:.6rem .75rem;
  font-size:16px; font-family:inherit; font-weight:700; color:var(--navy); background:#fff;
  outline:none; margin-bottom:.6rem;
}
.form-etapa input[type=text]:focus { border-color:var(--green); }
.form-etapa .dupla { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.form-etapa .dupla > * { min-width:0; }
.check { display:flex; gap:.6rem; align-items:flex-start; font-size:.84rem; font-weight:600; color:var(--navy); padding:.4rem 0; cursor:pointer; }
.check input { width:19px; height:19px; accent-color:var(--green); flex:none; margin-top:.1rem; }

.balanco { border-radius:10px; padding:.75rem .85rem; margin-top:.5rem; font-size:.82rem; font-weight:700; }
.balanco .big { display:block; font-size:1.4rem; font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin:.15rem 0; }
.balanco.ok { background:var(--ok-bg); color:var(--ok); }
.balanco.ruim { background:var(--alert-bg); color:var(--alert); }
.meta-barra { height:10px; background:var(--border); border-radius:10px; overflow:hidden; margin-top:.5rem; }
.meta-barra i { display:block; height:100%; background:linear-gradient(to right,var(--green),var(--green-mid)); }

/* ── capa da jornada (mesma linguagem do app) ── */
.jornada-capa { background:#fff; border:1px solid var(--border); border-radius:14px; padding:1.1rem 1.15rem; }
.jc-titulo { font-size:1.05rem; font-weight:900; letter-spacing:-.02em; }
.jc-sub { font-size:.84rem; color:var(--gray); margin:.2rem 0 .8rem; }
.jc-resumo { font-size:.8rem; color:var(--green-dark); font-weight:800; margin-top:.5rem; }
.marcador { font-size:.65rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--green-dark); display:block; margin-bottom:.1rem; }
.marcador.pronta { color:var(--ok); }