/* ===== Lançamento Pilarex · folha de estilo ===== */

:root{
  --azul:#0b2d5c;
  --azul2:#1668c4;
  --ciano:#17b6e6;
  --ambar:#f59e0b;
  --ambar-fraco:#fef3c7;
  --verde:#10b981;
  --verde-fraco:#d1fae5;
  --vermelho:#ef4444;
  --vermelho-fraco:#fee2e2;
  --roxo:#7c3aed;
  --fundo:#f1f5fb;
  --card:#ffffff;
  --texto:#12253f;
  --suave:#657892;
  --borda:#e3e9f2;
  --sombra:0 1px 2px rgba(11,45,92,.06), 0 8px 24px -12px rgba(11,45,92,.18);
  --sombra-alta:0 4px 12px rgba(11,45,92,.10), 0 20px 48px -20px rgba(11,45,92,.28);
  --raio:16px;
  --grad:linear-gradient(135deg,#0b2d5c 0%,#14528f 45%,#17b6e6 130%);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  background:var(--fundo);
  color:var(--texto);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
.oculto{display:none !important}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}

/* ---------- Marca ---------- */
.marca{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.marca h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.4px}
.marca p{margin:2px 0 0;font-size:12.5px;color:var(--suave);font-weight:500}
.marca-icone{
  width:52px;height:52px;border-radius:15px;background:var(--grad);
  display:grid;place-items:center;flex:none;
  box-shadow:0 6px 18px -6px rgba(22,104,196,.65);
  position:relative;overflow:hidden;
}
.marca-icone::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,.34),transparent 55%);
}
.marca-icone span{color:#fff;font-weight:800;font-size:26px;position:relative;z-index:1}
.marca-icone.pequeno{width:38px;height:38px;border-radius:11px}
.marca-icone.pequeno span{font-size:19px}

/* ---------- Login ---------- */
.login{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1000px 520px at 50% -10%,#e0edfb 0%,var(--fundo) 62%);
}
.login-card{
  background:var(--card);border-radius:22px;padding:30px 26px 24px;
  width:100%;max-width:400px;box-shadow:var(--sombra-alta);
  animation:sobe .45s cubic-bezier(.22,1,.36,1);
}
@keyframes sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.login label{display:block;font-size:12px;font-weight:700;color:var(--suave);
  text-transform:uppercase;letter-spacing:.7px;margin:0 0 9px}
.quem{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.quem button{
  padding:14px 10px;border-radius:13px;border:2px solid var(--borda);
  background:#fafbfd;font-weight:700;font-size:14.5px;transition:.16s;text-align:center;
}
.quem button small{display:block;font-weight:500;font-size:11.5px;color:var(--suave);margin-top:2px}
.quem button.on{border-color:var(--azul2);background:#eef5ff;color:var(--azul)}
.quem button.on small{color:var(--azul2)}
#pin{
  width:100%;padding:15px 16px;border-radius:13px;border:2px solid var(--borda);
  background:#fafbfd;font-size:22px;font-weight:700;letter-spacing:9px;text-align:center;
  margin-bottom:18px;outline:none;transition:.16s;
}
#pin:focus{border-color:var(--azul2);background:#fff}
.btn-principal{
  width:100%;padding:15px;border-radius:13px;background:var(--grad);color:#fff;
  font-weight:700;font-size:15.5px;box-shadow:0 8px 20px -8px rgba(22,104,196,.7);
  transition:.16s;
}
.btn-principal:active{transform:scale(.985)}
.btn-principal:disabled{opacity:.55}
.erro{color:var(--vermelho);font-size:13px;font-weight:600;margin:12px 0 0;min-height:18px;text-align:center}
.rodape-login{text-align:center;font-size:12px;color:var(--suave);margin:22px 0 0}

/* ---------- Onboard ---------- */
.onboard{position:fixed;inset:0;background:rgba(11,45,92,.55);backdrop-filter:blur(4px);
  z-index:90;display:grid;place-items:center;padding:20px}
.onboard-card{background:var(--card);border-radius:20px;padding:26px 22px;max-width:420px;
  width:100%;box-shadow:var(--sombra-alta);max-height:86dvh;overflow:auto}
.onboard-card h2{margin:0 0 4px;font-size:20px;font-weight:800}
.onboard-card .sub{margin:0 0 18px;color:var(--suave);font-size:13.5px}
.passo{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start}
.passo .passo-n{width:25px;height:25px;border-radius:50%;background:#eef5ff;color:var(--azul2);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none;margin-top:1px}
.passo span{font-size:13.5px;line-height:1.45}
.passo span b{color:var(--azul2)}

/* ---------- Topo ---------- */
.topo{
  background:var(--grad);color:#fff;padding:14px 16px 16px;
  padding-top:calc(14px + env(safe-area-inset-top));
  border-radius:0 0 22px 22px;box-shadow:0 8px 28px -14px rgba(11,45,92,.6);
  position:relative;overflow:hidden;
}
.topo::after{content:'';position:absolute;top:-70px;right:-50px;width:210px;height:210px;
  border-radius:50%;background:rgba(255,255,255,.08)}
.topo-linha{display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:1;margin-bottom:14px}
.marca-mini{display:flex;align-items:center;gap:11px}
.marca-mini strong{display:block;font-size:16px;font-weight:800;letter-spacing:-.3px}
.marca-mini small{display:block;font-size:11.5px;opacity:.8;font-weight:500;margin-top:1px}
.sair{color:#fff;font-size:20px;opacity:.75;padding:6px 10px;border-radius:9px;
  background:rgba(255,255,255,.12)}

/* contagem regressiva */
.contagem{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  border-radius:15px;padding:13px 15px;position:relative;z-index:1;margin-bottom:12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.contagem .cr-txt{min-width:0}
.contagem .cr-rot{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;opacity:.75;font-weight:700}
.contagem .cr-tit{font-size:15.5px;font-weight:800;margin-top:2px;line-height:1.25}
.contagem .cr-det{font-size:11.5px;opacity:.78;margin-top:3px;line-height:1.35}
.contagem .cr-num{text-align:center;flex:none}
.contagem .cr-num b{display:block;font-size:31px;font-weight:800;line-height:1;letter-spacing:-1.5px}
.contagem .cr-num span{font-size:10.5px;opacity:.8;font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.contagem.urgente{background:rgba(245,158,11,.26);border-color:rgba(245,158,11,.5)}
.contagem.urgente .cr-num b{animation:pulsa 1.8s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.5}}

.topo-numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;position:relative;z-index:1}
.tn{background:rgba(255,255,255,.13);border-radius:12px;padding:9px 10px;text-align:center}
.tn b{display:block;font-size:19px;font-weight:800;line-height:1.15;letter-spacing:-.5px}
.tn span{font-size:10px;opacity:.8;font-weight:600;text-transform:uppercase;letter-spacing:.4px}

/* ---------- Abas ---------- */
.abas{
  display:flex;gap:7px;overflow-x:auto;padding:14px 16px 12px;
  scrollbar-width:none;-ms-overflow-style:none;position:sticky;top:0;z-index:20;
  background:linear-gradient(var(--fundo) 72%,rgba(241,245,251,0));
}
.abas::-webkit-scrollbar{display:none}
.abas button{
  flex:none;padding:9px 15px;border-radius:11px;background:var(--card);
  border:1px solid var(--borda);font-weight:700;font-size:13.5px;color:var(--suave);
  transition:.15s;white-space:nowrap;
}
.abas button.on{background:var(--azul);color:#fff;border-color:var(--azul);
  box-shadow:0 6px 16px -8px rgba(11,45,92,.8)}

/* ---------- Conteúdo ---------- */
main{padding:2px 16px 30px;max-width:840px;margin:0 auto}
.secao{animation:entra .3s cubic-bezier(.22,1,.36,1)}
@keyframes entra{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.card{
  background:var(--card);border-radius:var(--raio);padding:17px;
  box-shadow:var(--sombra);margin-bottom:13px;border:1px solid rgba(227,233,242,.8);
}
.card.destaque{border:1.5px solid var(--ambar);background:linear-gradient(180deg,#fffbf2,#fff)}
.card.perigo{border:1.5px solid var(--vermelho);background:linear-gradient(180deg,#fff5f5,#fff)}
.card.ok{border:1.5px solid var(--verde);background:linear-gradient(180deg,#f2fdf8,#fff)}

h2.tit{font-size:18.5px;font-weight:800;margin:20px 0 11px;letter-spacing:-.35px;
  display:flex;align-items:center;gap:9px}
h2.tit:first-child{margin-top:4px}
h2.tit em{font-style:normal;font-size:12px;font-weight:700;color:var(--suave);
  background:#eef2f8;padding:3px 9px;border-radius:7px}
h3.sub{font-size:14.5px;font-weight:800;margin:0 0 10px;letter-spacing:-.2px}
p.nota{font-size:13px;color:var(--suave);margin:0 0 13px;line-height:1.55}
.rotulo{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;
  color:var(--suave);margin:0 0 7px}

/* pílulas */
.pil{display:inline-block;padding:3px 9px;border-radius:7px;font-size:11px;font-weight:700;
  background:#eef2f8;color:var(--suave);white-space:nowrap}
.pil.azul{background:#e5efff;color:var(--azul2)}
.pil.verde{background:var(--verde-fraco);color:#047857}
.pil.ambar{background:var(--ambar-fraco);color:#b45309}
.pil.vermelho{background:var(--vermelho-fraco);color:#b91c1c}
.pil.roxo{background:#ede9fe;color:#6d28d9}

/* ---------- Checklist ---------- */
.chk{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--borda);cursor:pointer;transition:.13s}
.chk:last-child{border-bottom:none;padding-bottom:2px}
.chk:active{opacity:.6}
.caixa{
  width:23px;height:23px;border-radius:8px;border:2px solid #cbd5e1;flex:none;
  display:grid;place-items:center;transition:.17s;margin-top:1px;background:#fff;
}
.caixa svg{width:12px;height:12px;stroke:#fff;stroke-width:3.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:20;stroke-dashoffset:20;transition:.22s}
.chk.feito .caixa{background:var(--verde);border-color:var(--verde)}
.chk.feito .caixa svg{stroke-dashoffset:0}
.chk-txt{font-size:13.8px;line-height:1.5;flex:1;min-width:0}
.chk.feito .chk-txt{color:var(--suave);text-decoration:line-through;text-decoration-color:#cbd5e1}

/* ---------- Progresso ---------- */
.barra{height:8px;border-radius:99px;background:#e8edf5;overflow:hidden;margin:9px 0}
.barra i{display:block;height:100%;border-radius:99px;background:var(--grad);
  transition:width .55s cubic-bezier(.22,1,.36,1)}
.barra i.verde{background:linear-gradient(90deg,#10b981,#34d399)}
.barra i.ambar{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.barra i.vermelho{background:linear-gradient(90deg,#ef4444,#f87171)}

.anel{position:relative;width:78px;height:78px;flex:none}
.anel svg{transform:rotate(-90deg);width:78px;height:78px}
.anel circle{fill:none;stroke-width:8;stroke-linecap:round}
.anel .fundo{stroke:#e8edf5}
.anel .frente{stroke:url(#gradAnel);transition:stroke-dashoffset .75s cubic-bezier(.22,1,.36,1)}
.anel .meio{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.anel .meio b{font-size:18px;font-weight:800;line-height:1;letter-spacing:-.6px}
.anel .meio span{font-size:9px;color:var(--suave);font-weight:700;text-transform:uppercase}

/* ---------- Tabelas ---------- */
.tab{width:100%;border-collapse:collapse;font-size:13px}
.tab th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--suave);font-weight:800;padding:0 9px 8px 0;border-bottom:1.5px solid var(--borda)}
.tab td{padding:10px 9px 10px 0;border-bottom:1px solid #eef2f7;vertical-align:top;line-height:1.45}
.tab tr:last-child td{border-bottom:none}
.tab td:last-child,.tab th:last-child{padding-right:0}
.tab .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.tab tr.forte td{font-weight:800;background:#f8fafd}
.rolar{overflow-x:auto;margin:0 -17px;padding:0 17px;scrollbar-width:thin}

/* ---------- Grade de números ---------- */
.grade{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.grade.tres{grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--card);border:1px solid var(--borda);border-radius:13px;padding:13px}
.kpi .rot{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--suave);margin-bottom:5px;line-height:1.3}
.kpi .val{font-size:22px;font-weight:800;letter-spacing:-.8px;line-height:1.1}
.kpi .det{font-size:11.5px;color:var(--suave);margin-top:3px;font-weight:600}
.kpi.verde{border-color:var(--verde);background:linear-gradient(180deg,#f2fdf8,#fff)}
.kpi.verde .val{color:#047857}
.kpi.ambar{border-color:var(--ambar);background:linear-gradient(180deg,#fffbf2,#fff)}
.kpi.ambar .val{color:#b45309}
.kpi.vermelho{border-color:var(--vermelho);background:linear-gradient(180deg,#fff5f5,#fff)}
.kpi.vermelho .val{color:#b91c1c}

/* ---------- Campos ---------- */
.campo{margin-bottom:12px}
.campo label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.6px;color:var(--suave);margin-bottom:6px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:11px 13px;border-radius:11px;border:1.5px solid var(--borda);
  background:#fafbfd;outline:none;transition:.15s;font-size:14.5px;font-weight:600;
}
.campo textarea{font-weight:500;line-height:1.5;resize:vertical;min-height:80px}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--azul2);background:#fff}
.linha{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.linha.tres{grid-template-columns:1fr 1fr 1fr}

.btn{padding:10px 15px;border-radius:11px;background:var(--azul);color:#fff;
  font-weight:700;font-size:13.5px;transition:.15s}
.btn:active{transform:scale(.97)}
.btn.claro{background:#eef2f8;color:var(--texto)}
.btn.verde{background:var(--verde)}
.btn.ambar{background:var(--ambar)}
.btn.vermelho{background:var(--vermelho)}
.btn.fino{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn-linha{display:flex;gap:8px;flex-wrap:wrap}

.stepper{display:flex;align-items:center;gap:9px}
.stepper button{width:36px;height:36px;border-radius:10px;background:#eef2f8;
  font-size:19px;font-weight:700;color:var(--azul);display:grid;place-items:center;flex:none}
.stepper input{flex:1;text-align:center;padding:9px;border-radius:10px;
  border:1.5px solid var(--borda);background:#fafbfd;font-weight:800;font-size:17px;
  outline:none;min-width:0}

/* ---------- Lista de itens ---------- */
.item{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid #eef2f7;align-items:flex-start}
.item:last-child{border-bottom:none}
.item .esq{flex:none;width:52px}
.item .dir{flex:1;min-width:0}
.item .tit{font-weight:700;font-size:13.8px;line-height:1.35}
.item .det{font-size:12.5px;color:var(--suave);margin-top:3px;line-height:1.45}

/* acordeão */
.dobra{border-bottom:1px solid var(--borda)}
.dobra:last-child{border-bottom:none}
.dobra > summary{
  padding:13px 0;font-weight:700;font-size:14px;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.dobra > summary::-webkit-details-marker{display:none}
.dobra > summary::after{content:'⌄';font-size:17px;color:var(--suave);transition:.22s;flex:none}
.dobra[open] > summary::after{transform:rotate(180deg)}
.dobra .corpo{padding:0 0 15px;font-size:13.5px;line-height:1.6;color:#33465f}

/* copiar */
.copiavel{position:relative;background:#f7f9fc;border:1px solid var(--borda);
  border-radius:12px;padding:13px 13px 40px;font-size:13.3px;line-height:1.6;white-space:pre-wrap}
.copiavel .btn-copiar{position:absolute;right:9px;bottom:9px;padding:5px 11px;
  border-radius:8px;background:var(--azul);color:#fff;font-size:11.5px;font-weight:700}
.copiavel .btn-copiar.feito{background:var(--verde)}

/* vídeo */
.video{border:1px solid var(--borda);border-radius:13px;padding:13px;margin-bottom:10px;
  background:var(--card);transition:.2s}
.video.completo{border-color:var(--verde);background:linear-gradient(180deg,#f4fdf9,#fff)}
.video.hoje{border-color:var(--azul2);box-shadow:0 0 0 3px #e5efff}
.video-topo{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px}
.video-n{width:29px;height:29px;border-radius:9px;background:var(--azul);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.video.completo .video-n{background:var(--verde)}
.video-tit{font-weight:800;font-size:14px;line-height:1.3;flex:1;min-width:0}
.video-meta{font-size:12px;color:var(--suave);margin-top:2px}
.video-det{font-size:12.5px;color:#41566f;line-height:1.5;margin-bottom:10px}
.video-det b{color:var(--texto)}
.etapas{display:flex;gap:6px}
.etapas button{flex:1;padding:7px 4px;border-radius:9px;background:#f1f5f9;
  font-size:11.5px;font-weight:700;color:var(--suave);transition:.15s;border:1.5px solid transparent}
.etapas button.on{background:var(--verde-fraco);color:#047857;border-color:var(--verde)}

/* semáforo */
.sem{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.sem.v{background:var(--verde)} .sem.a{background:var(--ambar)}
.sem.r{background:var(--vermelho)} .sem.c{background:#cbd5e1}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,120%);
  background:var(--texto);color:#fff;padding:12px 20px;border-radius:12px;
  font-size:13.5px;font-weight:700;z-index:200;box-shadow:var(--sombra-alta);
  transition:transform .3s cubic-bezier(.22,1,.36,1);max-width:86vw;text-align:center;
}
.toast.on{transform:translate(-50%,0)}

/* ---------- Rodapé ---------- */
.rodape{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 16px calc(18px + env(safe-area-inset-bottom));font-size:11.5px;
  color:var(--suave);max-width:840px;margin:0 auto;font-weight:600}
#sync-estado{padding:3px 9px;border-radius:7px;background:#e8edf5;font-size:10.5px}
#sync-estado.salvando{background:var(--ambar-fraco);color:#b45309}
#sync-estado.erro{background:var(--vermelho-fraco);color:#b91c1c}

/* ---------- Timeline ---------- */
.tl{position:relative;padding-left:26px}
.tl::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--borda)}
.tl-item{position:relative;padding-bottom:16px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:-22px;top:5px;width:11px;height:11px;
  border-radius:50%;background:#cbd5e1;border:2.5px solid var(--fundo)}
.tl-item.feito::before{background:var(--verde)}
.tl-item.agora::before{background:var(--azul2);box-shadow:0 0 0 4px #dbeafe}
.tl-hora{font-size:11px;font-weight:800;color:var(--suave);text-transform:uppercase;letter-spacing:.6px}
.tl-txt{font-size:13.8px;font-weight:600;margin-top:2px;line-height:1.45}

@media(min-width:620px){
  body{font-size:15.5px}
  .grade{grid-template-columns:repeat(3,1fr)}
  .grade.tres{grid-template-columns:repeat(4,1fr)}
  .topo{border-radius:0 0 26px 26px;padding:18px 24px 20px}
  main{padding:2px 24px 40px}
  .abas{padding:16px 24px 12px}
  .rodape{padding-left:24px;padding-right:24px}
  .rolar{margin:0 -17px;padding:0 17px}
}

/* ===================== GRÁFICOS ===================== */
/* Superfície dos gráficos é o branco do cartão; a paleta foi validada contra ela. */
.gr{position:relative;margin:2px 0}
.gr-svg{width:100%;height:auto;display:block;overflow:visible}
.gr-svg text{font-family:inherit}
.gr-mini{font-size:10px;font-weight:700}
.gr-val{font-size:15px;font-weight:800}
.gr-val-mini{font-size:12px;font-weight:800}
.gr-rot{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.gr-mini-svg{width:84px;height:26px;flex:none;opacity:.9}

.gr-legenda{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:11px}
.gr-item{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:600;color:var(--suave)}
.gr-item i{width:9px;height:9px;border-radius:3px;flex:none}
.gr-item b{color:var(--texto);font-weight:800}

.gr-dica{position:absolute;display:none;z-index:15;pointer-events:none;
  background:var(--texto);color:#fff;padding:7px 10px;border-radius:9px;
  font-size:11.5px;line-height:1.45;white-space:nowrap;box-shadow:var(--sombra-alta)}
.gr-dica b{display:block;font-weight:800;font-size:11px}
.gr-dica span{opacity:.85}

.gr-vazio{padding:22px 14px;text-align:center;font-size:13px;color:var(--suave);
  font-weight:600;line-height:1.55;background:#f7f9fc;border-radius:12px;
  border:1px dashed var(--borda)}
.gr-vazio span{font-size:12px;font-weight:500;opacity:.85}

/* ===================== PAINEL ===================== */
.painel-hero{display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;margin-bottom:16px}
.hero-num{font-size:52px;font-weight:800;letter-spacing:-2.5px;line-height:.92;
  color:var(--azul)}
.hero-num span{font-size:15px;font-weight:700;letter-spacing:-.2px;margin-left:6px;
  color:var(--suave)}
.hero-txt{font-size:14px;font-weight:800;margin-top:8px;line-height:1.3}
.hero-txt span{font-weight:600;color:var(--suave);font-size:12px}
.hero-lado{display:flex;flex-direction:column;gap:8px;text-align:right;flex:none}
.hero-mini b{display:block;font-size:19px;font-weight:800;letter-spacing:-.6px;line-height:1}
.hero-mini span{font-size:10.5px;color:var(--suave);font-weight:600}

.kpi-linha{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.painel-linha{display:flex;justify-content:space-between;gap:10px;
  padding-top:13px;border-top:1px solid var(--borda)}
.painel-linha > div{text-align:center;flex:1}
.painel-linha .rotulo{display:block;margin-bottom:3px}
.painel-linha b{font-size:15px;font-weight:800;letter-spacing:-.4px}

.sem-linha{display:flex;align-items:center;gap:9px;padding:9px 0;
  border-bottom:1px solid #eef2f7}
.sem-linha:last-child{border-bottom:none}
.sem-nome{flex:1;font-size:13px;font-weight:700;min-width:0}
.sem-val{font-size:13.5px;font-weight:800;white-space:nowrap}
.sem-meta{font-size:10.5px;color:var(--suave);font-weight:600;white-space:nowrap;
  max-width:96px;overflow:hidden;text-overflow:ellipsis}

/* ===================== CASAL ===================== */
.dupla{display:grid;grid-template-columns:1fr;gap:11px}
.pessoa{border-top:3px solid var(--cor)}
.pessoa-topo{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.pessoa-topo b{font-size:15px;font-weight:800;display:block;line-height:1.2}
.pessoa-topo small{font-size:11px;color:var(--suave);font-weight:600}
.bolinha{width:11px;height:11px;border-radius:50%;flex:none;display:inline-block}
.pessoa-num{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.pessoa-num > div{flex:1}
.pessoa-num span{display:block;font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.6px;color:var(--suave);margin-bottom:2px}
.pessoa-num b{font-size:14.5px;font-weight:800;letter-spacing:-.4px}
.pessoa-det{display:flex;flex-direction:column;gap:4px;margin-top:10px;
  font-size:11.5px;color:var(--suave);font-weight:600}
.pessoa-det b{color:var(--texto);font-weight:800}

.acerto{text-align:center;padding:4px 0}
.acerto-frase{font-size:16px;font-weight:800;line-height:1.35;letter-spacing:-.3px}
.acerto-seta{display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:12px;flex-wrap:wrap;font-size:13px}
.acerto-seta b{font-weight:800}
.acerto-seta .seta{color:var(--ambar);font-weight:800;font-size:12.5px}

.opcoes{display:flex;gap:7px;flex-wrap:wrap}
.opcoes.tres button{flex:1 1 30%}
.opcoes button{flex:1;padding:10px 8px;border-radius:10px;background:#f1f5f9;
  border:1.5px solid transparent;font-size:12.5px;font-weight:700;color:var(--suave);
  transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap}
.opcoes button.on{background:#eef5ff;border-color:var(--azul2);color:var(--azul)}

@media(min-width:620px){
  .dupla{grid-template-columns:1fr 1fr}
  .gr-svg{max-width:520px;margin:0 auto}
  .gr{display:flex;flex-direction:column}
}

/* o valor do cartão nunca quebra por causa da minilinha ao lado */
.kpi-linha .val{white-space:nowrap;min-width:0}
.kpi-linha .gr-mini-svg{width:56px}
@media(min-width:620px){ .kpi-linha .gr-mini-svg{width:84px} }

/* cabeçalho curto quando o Painel está aberto */
.topo.enxuto{padding-bottom:18px;border-radius:0 0 20px 20px}
.topo.enxuto .topo-linha{margin-bottom:0}