@font-face { font-family:'Space Grotesk'; font-weight:300 700; font-display:swap; src:url(/assets/fonts/space-grotesk-latin.woff2) format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:100 800; font-display:swap; src:url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); }

:root {
  --n-0:#FFFFFF; --n-50:#F7F9FC; --n-100:#EFF2F7; --n-200:#E2E7EF; --n-300:#CBD3E0; --n-400:#9AA5B8;
  --n-500:#5C6775; --n-700:#333B47; --n-900:#121821;
  --navy-50:#EAF1FA; --navy-100:#D3E2F5; --navy-200:#A9C4E8; --navy-300:#6E9BD1; --navy-400:#3D74B5;
  --navy-500:#245C9B; --navy-600:#17457A; --navy-700:#0E3159; --navy-800:#0A1F3B; --navy-900:#071829;
  --yes-ink:#86E3AC; --no-bg:#FCECEA; --no-line:#F4CFCB;
  --paper:var(--n-0); --paper-2:var(--n-50); --ink:var(--n-900); --ink-body:var(--n-700); --ink-muted:var(--n-500);
  --rule:var(--n-200); --rule-strong:var(--n-300); --accent:var(--navy-400); --accent-deep:var(--navy-600);
  --on-navy:#EDF3FA; --on-navy-muted:#A8BDD6;
  --glass-bar:rgba(255,255,255,.82);
  --grad-lift:linear-gradient(158deg, var(--navy-700) 0%, var(--navy-900) 70%);
  --grad-edge:linear-gradient(90deg, var(--navy-400), var(--navy-700));
  --glow:radial-gradient(60% 60% at 50% 45%, rgba(61,116,181,.16), transparent 70%);
  --surface-glass:
    radial-gradient(78% 62% at 16% -10%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(158deg, #FDFEFF 0%, #F5F8FC 52%, #ECF1F7 100%);
  --surface-glass-shadow:
    inset 0 1px 0 rgba(255,255,255,1), inset 1px 0 0 rgba(255,255,255,.72), inset -1px -1px 0 rgba(10,31,59,.045),
    0 1px 2px rgba(10,31,59,.04), 0 12px 30px -18px rgba(10,31,59,.18);
  --sh-2:0 4px 14px rgba(10,31,59,.07), 0 0 0 1px rgba(10,31,59,.05);
  --sh-4:0 24px 46px -18px rgba(10,31,59,.28), 0 0 0 1px rgba(10,31,59,.07);
  --sh-navy:0 20px 44px -20px rgba(10,31,59,.55);
  --container:1200px; --gutter:28px; --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --font:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --t-xs:.875rem; --t-sm:1rem;
  --dur:200ms; --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0}
body{font-family:var(--font);background:var(--paper);color:var(--ink-body);font-size:var(--t-sm);line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;background:var(--glow);pointer-events:none;z-index:-1}
button{font:inherit;color:inherit}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter) 64px}
@media (min-width:860px){.wrap{padding-inline:20px}}

/* topo */
.brand{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0 18px}
.brand img{height:30px;width:auto;display:block}
.stamp{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-muted);text-align:right}
.eyebrow{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-muted);letter-spacing:.04em;text-transform:uppercase}
h1{font-size:clamp(1.7rem,5vw,2.6rem);color:var(--ink);letter-spacing:-.02em;line-height:1.1;margin:6px 0 20px}

/* barra de filtros */
.toolbar{position:sticky;top:0;z-index:20;margin:0 calc(var(--gutter) * -1);padding:10px var(--gutter);background:var(--glass-bar);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border-bottom:1px solid var(--rule)}
@media (min-width:860px){.toolbar{margin:0 -20px;padding-inline:20px}}
.tb-row{display:flex;gap:10px;align-items:center}
.seg{display:flex;gap:4px;background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.seg::-webkit-scrollbar{display:none}
@media (max-width:859px){.seg{-webkit-mask-image:linear-gradient(90deg,var(--n-900) 88%,transparent);mask-image:linear-gradient(90deg,var(--n-900) 88%,transparent);padding-right:28px}}
.seg button,.chip,.fbtn{cursor:pointer;transition:background var(--dur),color var(--dur),border-color var(--dur),transform var(--dur)}
.seg button{border:0;background:transparent;color:var(--ink-muted);font-size:var(--t-xs);padding:10px 14px;border-radius:var(--r-pill);white-space:nowrap}
.seg button:hover{color:var(--ink);background:var(--navy-50)}
.seg button:active{transform:translateY(1px)}
.seg button[aria-pressed=true]{background:var(--navy-800);color:var(--on-navy)}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink);font-size:var(--t-xs);padding:12px 16px;border-radius:var(--r-pill);white-space:nowrap}
.fbtn:hover{border-color:var(--accent);background:var(--navy-50)}
.fbtn:active{transform:translateY(1px)}
.fbtn[aria-expanded=true]{background:var(--navy-800);color:var(--on-navy);border-color:var(--navy-800)}
.badge{min-width:20px;height:20px;border-radius:var(--r-pill);background:var(--accent);color:var(--paper);font-family:var(--mono);font-size:.75rem;display:none;align-items:center;justify-content:center;padding:0 6px}
.badge.on{display:inline-flex}
.custom{display:none;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.custom.on{display:flex}
.custom label{font-size:var(--t-xs);color:var(--ink-muted);display:flex;gap:8px;align-items:center}
.custom input{font:inherit;font-size:var(--t-xs);border:1px solid var(--rule-strong);border-radius:var(--r-sm);padding:8px 10px;background:var(--paper);color:var(--ink)}
.panel{display:none;position:absolute;left:var(--gutter);right:var(--gutter);top:100%;margin-top:8px;z-index:30;max-height:calc(100vh - 150px);overflow-y:auto;padding:16px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.panel.on{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:860px){.panel{left:20px;right:20px}.panel.on{grid-template-columns:repeat(3,1fr)}}
.fg h3{font-size:var(--t-xs);color:var(--ink-muted);font-weight:500;margin-bottom:8px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink-body);font-size:var(--t-xs);padding:10px 14px;border-radius:var(--r-pill)}
.chip:hover{border-color:var(--accent);background:var(--navy-50)}
.chip:active{transform:translateY(1px)}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.clear{border:0;background:transparent;color:var(--accent-deep);font-size:var(--t-xs);text-decoration:underline;cursor:pointer;padding:4px 0}
.clear:hover{color:var(--ink)}
.panel-actions{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px}
.done{border:0;background:var(--navy-800);color:var(--on-navy);font-size:var(--t-xs);padding:8px 18px;border-radius:var(--r-pill);cursor:pointer;transition:background var(--dur)}
.done:hover{background:var(--navy-600)}
.done:active{transform:translateY(1px)}
.reset{border:1px solid var(--rule-strong);background:var(--paper);color:var(--ink);font-size:var(--t-xs);padding:8px 16px;border-radius:var(--r-pill);cursor:pointer;margin:4px;transition:background var(--dur),border-color var(--dur)}
.reset:hover{background:var(--navy-50);border-color:var(--accent)}
.reset:active{transform:translateY(1px)}
.active{display:none;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.active.on{display:flex}
.active .lbl{font-size:var(--t-xs);color:var(--ink-muted)}
.tag{display:inline-flex;gap:6px;align-items:center;border:0;background:var(--navy-50);color:var(--accent-deep);border:1px solid var(--navy-100);border-radius:var(--r-pill);padding:8px 12px;font-size:var(--t-xs);cursor:pointer;transition:background var(--dur)}
.tag:hover{background:var(--navy-100)}

main{padding-top:20px}
/* leitura */
.lead{background:var(--grad-lift);color:var(--on-navy);border-radius:var(--r-lg);padding:24px 24px 26px;box-shadow:var(--sh-navy);margin-bottom:16px}
.lead p{font-size:clamp(1.15rem,3.2vw,1.6rem);line-height:1.3;letter-spacing:-.01em;max-width:38ch}
.lead b{color:var(--yes-ink);font-weight:600}
.lead small{display:block;margin-top:10px;color:var(--on-navy-muted);font-size:var(--t-xs)}

/* grade e cartões */
.grid{display:grid;gap:16px;grid-template-columns:1fr;margin-bottom:16px}
.kpis{grid-template-columns:1fr 1fr}
@media (min-width:860px){
  .kpis{grid-template-columns:repeat(4,1fr)}
  .g2{grid-template-columns:3fr 2fr}
  .g3{grid-template-columns:repeat(3,1fr)}
}
.card{background:var(--surface-glass);box-shadow:var(--surface-glass-shadow);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px;min-width:0}
.kpi .label{font-size:var(--t-xs);color:var(--ink-muted)}
.kpi .value{font-size:clamp(1.45rem,5vw,2.1rem);font-weight:600;color:var(--ink);letter-spacing:-.02em;margin:4px 0 8px;line-height:1.1}
.kpi.small .value{font-size:clamp(1.15rem,4vw,1.45rem);margin-bottom:6px}
.delta{display:inline-flex;gap:4px;align-items:center;font-family:var(--mono);font-size:.75rem;border-radius:var(--r-pill);padding:2px 8px}
.delta.good{background:var(--navy-50);color:var(--accent-deep)}
.delta.bad{background:var(--no-bg);color:var(--ink-body);border:1px solid var(--no-line)}
.delta.none{color:var(--ink-muted);padding-left:0}
.card h2{font-size:1.0625rem;color:var(--ink);font-weight:600}
.card .sub{font-size:var(--t-xs);color:var(--ink-muted);margin:2px 0 16px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:12px}
.head .sub{margin-bottom:0}

/* linha */
.plot{position:relative;padding-left:44px;margin-top:8px;touch-action:pan-y}
.plot-msg{padding:56px 12px;text-align:center;color:var(--ink-muted);margin-left:-44px}
.plot svg{width:100%;height:210px;display:block}
.plot .gl{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.plot .area{fill:var(--navy-50)}
.plot .cur{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.plot .prev{fill:none;stroke:var(--navy-300);stroke-width:1.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.yl{position:absolute;left:0;width:38px;text-align:right;font-family:var(--mono);font-size:.75rem;color:var(--ink-muted);transform:translateY(-50%)}
.vline{position:absolute;top:0;bottom:0;width:1px;background:var(--navy-300);display:none;pointer-events:none}
.dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:var(--r-pill);background:var(--accent);border:2px solid var(--paper);box-shadow:var(--sh-2);display:none;pointer-events:none}
.axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.75rem;color:var(--ink-muted);margin:8px 0 0 44px}
.legend.off{display:none}
.legend{display:flex;gap:16px;font-size:var(--t-xs);color:var(--ink-muted);margin:12px 0 0 44px}
.legend i{display:inline-block;width:18px;height:0;border-top:2.5px solid var(--accent);vertical-align:middle;margin-right:6px}
.legend i.d{border-top:2px dashed var(--navy-300)}
.toggle{display:flex;gap:4px;background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-pill);padding:3px}
.toggle button{border:0;background:transparent;color:var(--ink-muted);font-size:var(--t-xs);padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;transition:background var(--dur),color var(--dur)}
.toggle button:hover{color:var(--ink)}
.toggle button[aria-pressed=true]{background:var(--navy-800);color:var(--on-navy)}

/* colunas mensais */
.cols{display:flex;align-items:flex-end;gap:12px;height:200px}
.col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.col .stick{width:100%;max-width:64px;border-radius:var(--r-md) var(--r-md) 4px 4px;background:var(--navy-200);transition:background var(--dur),transform var(--dur)}
.col:hover .stick{background:var(--navy-300)}
.col.now .stick{background:var(--grad-edge)}
.col b{font-size:var(--t-sm);color:var(--ink);font-weight:600}
.col span{font-family:var(--mono);font-size:.75rem;color:var(--ink-muted)}

/* barras clicáveis */
.bars{display:grid;gap:6px}
.bar{display:block;width:calc(100% + 20px);text-align:left;border:0;background:transparent;padding:8px 10px;margin:0 -10px;border-radius:var(--r-md);cursor:pointer;transition:background var(--dur),opacity var(--dur)}
.bar:hover{background:var(--navy-50)}
.bar:active{transform:translateY(1px)}
.bar .row{display:flex;justify-content:space-between;gap:12px;color:var(--ink)}
.bar .row span:last-child{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-muted);white-space:nowrap}
.track{height:10px;border-radius:var(--r-pill);background:var(--navy-50);margin-top:6px;overflow:hidden}
.fill{height:100%;border-radius:var(--r-pill);background:var(--grad-edge);transition:width 300ms var(--ease)}
.bars.static .bar{cursor:default}
.bars.static .bar:hover{background:transparent}
.bars.has-sel .bar:not([aria-pressed=true]){opacity:.5}
.bars.has-sel .bar:not([aria-pressed=true]):hover{opacity:1}
.bar[aria-pressed=true]{background:var(--navy-50)}

/* tabela */
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-xs)}
.tbl th{font-family:var(--mono);font-weight:500;color:var(--ink-muted);text-align:right;padding:0 8px 10px;text-transform:uppercase;letter-spacing:.03em;font-size:.75rem}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{padding:12px 8px;border-top:1px solid var(--rule);text-align:right;font-size:var(--t-sm);color:var(--ink)}
.tbl tr.r{cursor:pointer;transition:background var(--dur)}
.tbl tr.r:hover,.tbl tr.r.sel{background:var(--navy-50)}
.tbl tr.r:active{background:var(--navy-100)}
.rowbtn{border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;padding:0;display:inline-flex;gap:8px;align-items:center}
.rowbtn::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);border:2px solid var(--rule-strong);transition:background var(--dur),border-color var(--dur)}
.rowbtn[aria-pressed=true]::before{background:var(--accent);border-color:var(--accent)}
.tbl td.best{color:var(--accent-deep);font-weight:600}
.tbl-wrap{overflow-x:auto}

.empty{display:none;text-align:center;padding:48px 16px;color:var(--ink-muted)}
.empty.on{display:block}
.help{margin-top:16px}
.help summary{cursor:pointer;color:var(--accent-deep);font-size:var(--t-xs);list-style:none;display:inline-flex;gap:8px;align-items:center;padding:8px 0}
.help summary::-webkit-details-marker{display:none}
.help summary::before{content:"?";width:20px;height:20px;border-radius:var(--r-pill);background:var(--navy-50);border:1px solid var(--navy-100);display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.75rem}
.help summary:hover{color:var(--ink)}
.help dl{display:grid;gap:12px;margin-top:8px}
.help dt{color:var(--ink);font-weight:600}
.help dd{color:var(--ink-muted);margin:0}
@media (min-width:860px){.help dl{grid-template-columns:1fr 1fr;gap:16px 32px}}
.empty b{display:block;color:var(--ink);font-size:1.125rem;margin-bottom:6px}
.foot{margin-top:28px;font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-muted);display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between}
.sample{display:inline-block;background:var(--navy-50);color:var(--accent-deep);border:1px solid var(--navy-100);border-radius:var(--r-pill);padding:2px 10px}

/* tooltip */
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--navy-900);color:var(--on-navy);border-radius:var(--r-md);padding:10px 12px;font-size:var(--t-xs);box-shadow:var(--sh-4);display:none;max-width:240px;line-height:1.4}
.tip b{display:block;color:var(--paper);font-weight:600;margin-bottom:2px}
.tip em{font-style:normal;color:var(--on-navy-muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- etapa, campanha e período (v2) ---- */
.logos{display:flex;align-items:center;gap:16px;min-width:0}
.logos .sep{width:1px;height:28px;background:var(--rule-strong);flex:none}
.logo-cliente{height:34px;width:auto;max-width:160px;object-fit:contain;display:block}
.toolbar{position:static;margin:0;padding:0 0 4px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;display:grid;gap:12px}
.grupo{display:grid;gap:6px}
.rot{font-family:var(--mono);font-size:.75rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em}
.mais{margin:0 0 16px}
.mais summary{cursor:pointer;color:var(--accent-deep);font-size:var(--t-xs);list-style:none;display:inline-flex;align-items:center;gap:8px;padding:10px 0}
.mais summary::-webkit-details-marker{display:none}
.mais summary::before{content:"+";width:20px;height:20px;border-radius:var(--r-pill);background:var(--navy-50);border:1px solid var(--navy-100);display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.875rem}
.mais[open] summary::before{content:"–"}
.mais summary:hover{color:var(--ink)}
.mais summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.mais .grid{margin-top:4px}
@media (min-width:860px){.g2e{grid-template-columns:1fr 1fr}}

/* ---- destaque do cliente, atualizar e suporte (v3) ---- */
.logo-lupin{height:24px;width:auto;display:block;opacity:.85}
.brand{padding:18px 0 14px}
.stamp{display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:flex-end;align-items:center}
.atualiza{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:flex-end}
.btn-atualiza,.btn-sair{font:inherit;font-size:var(--t-xs);cursor:pointer;border-radius:var(--r-pill);padding:6px 12px;transition:background var(--dur),border-color var(--dur),color var(--dur)}
.btn-atualiza{background:var(--navy-50);color:var(--accent-deep);border:1px solid var(--navy-100)}
.btn-atualiza:hover{background:var(--navy-100)}
.btn-atualiza:active{background:var(--navy-200)}
.btn-atualiza:disabled{opacity:.6;cursor:wait}
.btn-sair{background:transparent;border:0;color:var(--ink-muted);text-decoration:underline;padding:6px 4px}
.btn-sair:hover{color:var(--ink)}
.btn-atualiza:focus-visible,.btn-sair:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hero{display:flex;align-items:center;gap:clamp(16px,3vw,28px);margin:6px 0 24px}
.hero .marca{flex:none;min-width:88px;height:88px;max-width:240px;padding:14px 18px;display:flex;align-items:center;justify-content:center;background:var(--surface-glass);box-shadow:var(--surface-glass-shadow);border:1px solid var(--rule);border-radius:var(--r-lg)}
.hero .marca img{display:block;max-height:60px;max-width:100%;width:auto;height:auto;object-fit:contain}
.hero .marca.mono{width:88px;padding:0;background:var(--grad-lift);color:var(--on-navy);font-size:2.4rem;font-weight:600;border:0;box-shadow:var(--sh-navy)}
.hero-txt{min-width:0}
.hero h1{font-size:clamp(1.8rem,5.5vw,3rem);margin:4px 0 0;line-height:1.05;overflow-wrap:anywhere}
@media (max-width:520px){.hero .marca{min-width:72px;height:72px;padding:10px 12px}.hero .marca.mono{width:72px;font-size:2rem}.hero .marca img{max-height:48px}}

/* WhatsApp flutuante: suporte */
.wa{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;background:var(--grad-lift);color:var(--on-navy);font:inherit;font-size:var(--t-xs);padding:8px 16px 8px 8px;border-radius:var(--r-pill);box-shadow:var(--sh-navy);transition:transform var(--dur),box-shadow var(--dur)}
.wa:hover{transform:translateY(-2px)}
.wa:active{transform:translateY(0)}
.wa:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wa__ico{width:30px;height:30px;border-radius:var(--r-pill);background:var(--whatsapp);display:grid;place-items:center;flex:none}
.wa__ico svg{width:17px;height:17px;fill:var(--n-0)}
.wa-card{position:fixed;right:18px;bottom:76px;z-index:41;width:min(300px,calc(100vw - 36px));background:var(--surface-glass);box-shadow:var(--sh-4);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px;opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity var(--dur),transform var(--dur),visibility var(--dur)}
.wa-card.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.wa-card__close{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;background:transparent;border-radius:var(--r-pill);font-size:1.4rem;line-height:1;color:var(--ink-muted);cursor:pointer;transition:background var(--dur)}
.wa-card__close:hover{background:var(--n-100)}
.wa-card__close:focus-visible{outline:2px solid var(--accent)}
.wa-card__avatar{position:relative;display:block;width:56px;height:56px;margin-bottom:10px}
.wa-card__avatar img{width:100%;height:100%;border-radius:var(--r-pill);object-fit:cover;object-position:50% 28%;display:block}
.wa-card__online{position:absolute;right:0;bottom:0;width:13px;height:13px;border-radius:var(--r-pill);background:var(--whatsapp);border:2px solid var(--n-0)}
.wa-card__name{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.wa-card__title{font-size:var(--t-sm);color:var(--ink-body);margin:4px 0 14px;line-height:1.35}
.wa-card__btn{width:100%;background:var(--whatsapp);color:var(--n-900)}
.wa-card__btn:hover{filter:brightness(1.06);background:var(--whatsapp)}
@media (max-width:520px){.wa span:last-child{display:none}.wa{padding:8px}}

.dica{margin:2px 2px 0;font-size:var(--t-xs);color:var(--ink-muted);line-height:1.45;max-width:70ch}
.dica b{color:var(--ink);font-weight:600}

/* =====================================================================
   v4 · versão 01: leitura fácil (50+), toque, balões, legenda, avisos, impressão
   ===================================================================== */
:root { --good-ink: #1E7B52; --whatsapp: #25D366; color-scheme: light; }
html { -webkit-text-size-adjust: 100%; }
body { font-size: 1.0625rem; line-height: 1.55; }
h1, h2, h3 { text-wrap: balance; }
p, .sub, .dica { text-wrap: pretty; }
.value, .tt b, .col b { white-space: nowrap; }
input, select, button { font-size: 1rem; }
.rot, .eyebrow { font-size: .875rem; }
.axis, .yl, .col span { font-size: .875rem; }
.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
@media (min-width: 860px) { .wrap { padding-left: 20px; padding-right: 20px; } body { font-size: 1.0625rem; } }

/* cabeçalho A: barra fina + cliente em destaque */
.brand { padding: 16px 0 12px; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-lupin { height: 26px; opacity: .9; }
.atualiza { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.btn-atualiza { min-height: 44px; padding: 0 18px; background: var(--navy-800); color: var(--on-navy); border: 0; border-radius: var(--r-pill); font-size: 1rem; cursor: pointer; transition: background var(--dur), transform var(--dur); }
.btn-atualiza:hover { background: var(--navy-600); }
.btn-atualiza:active { transform: translateY(1px); }
.btn-atualiza:disabled { opacity: .65; cursor: wait; }
.btn-sair { min-height: 44px; padding: 0 12px; font-size: 1rem; }
.hero { margin: 10px 0 26px; }
.hero h1 { font-size: clamp(1.9rem, 5.6vw, 3.1rem); }
.hero-sub { font-size: .9375rem; color: var(--ink-muted); margin-top: 8px; }
.hero .eyebrow { letter-spacing: .06em; }
.aviso-erro { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; background: var(--navy-50); border: 1px solid var(--navy-100); color: var(--ink); border-radius: var(--r-md); padding: 14px 8px 14px 16px; margin: 0 0 14px; }
.aviso-erro .cod { display: block; margin-top: 6px; font-family: var(--mono); font-size: .875rem; color: var(--accent-deep); }
.aviso-erro .x { flex: none; border: 0; background: transparent; font-size: 1.6rem; line-height: 1; min-width: 44px; min-height: 44px; border-radius: var(--r-pill); color: var(--ink-muted); cursor: pointer; }
.aviso-erro .x:hover { background: var(--navy-100); }
.aviso-velho { background: var(--navy-50); border: 1px solid var(--navy-100); border-radius: var(--r-md); padding: 12px 16px; margin: 0 0 14px; font-size: 1rem; }
.canais { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.canais button { min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--rule-strong); background: var(--paper); font-size: 1rem; cursor: pointer; }
.canais button[aria-pressed=true] { background: var(--navy-800); color: var(--on-navy); border-color: var(--navy-800); }

/* filtros: botões grandes, com respiro */
.toolbar { gap: 16px; margin-bottom: 8px; }
.seg { gap: 6px; padding: 5px; }
.seg button { min-height: 44px; padding: 0 16px; font-size: 1rem; }
.dica { font-size: 1rem; max-width: 62ch; margin-top: 4px; }
.custom input { min-height: 44px; font-size: 1rem; }

/* resumo */
.lead { padding: 26px 26px 22px; margin-bottom: 20px; }
.lead p { font-size: clamp(1.3rem, 3.6vw, 1.75rem); max-width: 40ch; line-height: 1.3; text-wrap: balance; }
.lead .lead2 { font-size: 1.0625rem; margin-top: 10px; color: var(--on-navy-muted); max-width: 44ch; }
.lead .lead2:empty { display: none; }
.lead .lead2 b { color: var(--yes-ink); }
.lead small { margin-top: 14px; font-size: .9375rem; }

/* números: 6 em destaque sem cartão sozinho; setas leves, sem etiqueta */
.grid { gap: 16px; }
.kpis { grid-template-columns: 1fr 1fr; }
.kpis > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 860px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .kpis[data-n="4"] { grid-template-columns: repeat(4, 1fr); }
  .kpis[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
  .kpis > .card:last-child:nth-child(odd) { grid-column: auto; }
}
.kpi { padding: 20px 22px; }
.kpi .label { font-size: .9375rem; color: var(--ink-muted); line-height: 1.35; min-height: 2.7em; }
.kpi .value { font-size: clamp(1.7rem, 5.2vw, 2.25rem); margin: 4px 0 6px; }
.kpi[data-tip] { cursor: default; }
.delta { background: none; border: 0; padding: 0; border-radius: 0; font-family: var(--font); font-size: .9375rem; font-weight: 500; }
.delta.good { color: var(--good-ink); background: none; }
.delta.none { color: var(--ink-muted); background: none; }
.mais summary { min-height: 44px; font-size: 1rem; }

/* gráfico: legenda clara e balão padrão */
.card h2 { font-size: 1.1875rem; }
.card .sub { font-size: .9375rem; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 12px; padding: 0; }
.legend.off { display: flex; }
.lg { display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--ink); }
.lg i { display: inline-block; width: 30px; height: 0; border-top: 3px solid var(--accent); }
.lg i.ponto { border-top: 3px dashed var(--navy-300); }
.lg b { font-weight: 600; }
.lg span { color: var(--ink-muted); }
.toggle button { min-height: 40px; padding: 0 14px; font-size: .9375rem; }
.tip { width: min(290px, calc(100vw - 16px)); padding: 16px 18px; border-radius: var(--r-md); line-height: 1.4; }
.tt-t { font-size: 1rem; font-weight: 600; color: var(--n-0); margin-bottom: 2px; text-transform: capitalize; }
.tt-m { font-size: .875rem; color: var(--on-navy-muted); margin-bottom: 10px; }
.tt-r { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0; }
.tt-l { font-size: .875rem; color: var(--on-navy-muted); }
.tt-r b { font-size: 1.25rem; font-weight: 600; color: var(--n-0); }
.tt-r.fraca b { font-size: 1.0625rem; font-weight: 500; color: var(--on-navy-muted); }
.tt-ok { margin-top: 8px; font-size: .9375rem; color: var(--yes-ink); }
.tt-f { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule-navy); font-size: .875rem; color: var(--on-navy-muted); }

/* ajuda em passos */
.help summary { min-height: 44px; font-size: 1rem; }
.passos { padding: 4px 0 8px; max-width: 62ch; }
.passos h3 { font-size: 1.0625rem; color: var(--ink); margin: 14px 0 8px; }
.passos ol, .passos ul { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; color: var(--ink-body); }

/* login */
.marca-check { display: flex; gap: 12px; align-items: center; font-size: 1rem; color: var(--ink-body); min-height: 44px; }
.marca-check input { width: 22px; height: 22px; accent-color: var(--accent); }
.esqueci { margin: 18px 0 0; font-size: 1rem; }
.esqueci a { color: var(--accent-deep); }
.campo input { min-height: 48px; font-size: 1rem; }
.btn { min-height: 48px; font-size: 1rem; }

/* suporte: verde e discreto */
.wa { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: var(--sh-2); padding: 5px 16px 5px 5px; font-size: .9375rem; min-height: 44px; }
.wa:hover { box-shadow: var(--sh-3); transform: translateY(-1px); }
.wa__ico { width: 34px; height: 34px; }
.wa-card { right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 56px); }
@media (max-width: 520px) { .wa__txt { display: none; } .wa { padding: 5px; width: 48px; height: 48px; justify-content: center; } .wa__ico { width: 36px; height: 36px; } }

/* leitura no celular */
@media (max-width: 520px) {
  .hero .marca { min-width: 76px; height: 76px; }
  .lead { padding: 22px 20px 18px; }
  .kpi { padding: 16px 16px; }
  .kpi .label { min-height: 0; }
  .brand { gap: 8px; }
  .toolbar { gap: 14px; }
  .seg button { padding: 0 14px; }
}
@media (hover: none) { .bar:hover, .seg button:hover { background: transparent; } .seg button[aria-pressed=true]:hover { background: var(--navy-800); } }

/* impressão / salvar como PDF */
@media print {
  @page { margin: 14mm; }
  body { background: var(--n-0); font-size: 11pt; }
  body::before, .toolbar, .atualiza, .wa, .wa-card, .help, .canais, .aviso-erro, .aviso-velho, .faixa-admin, .reset, .mais summary, .toggle, #tip, .tip { display: none !important; }
  .mais > section { display: grid !important; }
  .card, .lead { box-shadow: none !important; break-inside: avoid; border: 1px solid var(--rule); }
  .lead { background: var(--n-0) !important; color: var(--ink) !important; }
  .lead b, .lead2 b { color: var(--ink) !important; }
  .lead small, .lead .lead2 { color: var(--ink-muted) !important; }
  .kpis { grid-template-columns: repeat(3, 1fr) !important; }
  .g2, .g2e { grid-template-columns: 1fr 1fr !important; }
}

.dica-instalar { position: fixed; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 64px); z-index: 39; display: flex; gap: 8px; align-items: center; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); box-shadow: var(--sh-4); padding: 12px 8px 12px 16px; font-size: 1rem; max-width: 520px; margin: 0 auto; }
.dica-instalar .x { flex: none; border: 0; background: transparent; font-size: 1.6rem; min-width: 44px; min-height: 44px; color: var(--ink-muted); cursor: pointer; }
.btn-instalar { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: var(--navy-800); color: var(--on-navy); font-size: 1rem; cursor: pointer; }
@media print { .dica-instalar { display: none !important; } }

.yl { white-space: nowrap; }
@media (min-width: 860px) { .g2 > .card:last-child { display: flex; flex-direction: column; } .g2 > .card:last-child .cols { flex: 1; min-height: 230px; } }

.wa-card__close { width: 44px; height: 44px; top: 4px; right: 4px; }
/* celular: comparativo mensal em barras deitadas (cabe sempre e lê melhor) */
@media (max-width: 640px) {
  .cols { flex-direction: column; height: auto; gap: 14px; align-items: stretch; }
  .col { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; height: auto; flex: none; }
  .col span { order: 1; text-align: left; font-size: .9375rem; }
  .col .stick { order: 2; height: 16px !important; width: var(--w); max-width: none; border-radius: var(--r-pill); }
  .col b { order: 3; font-size: 1rem; }
  .g2 > .card:last-child .cols { min-height: 0; }
}

.lg { align-items: center; }
.lg .lt { display: grid; gap: 2px; }
.lg .lt b { font-weight: 600; color: var(--ink); }
.lg .lt span { color: var(--ink-muted); font-size: .9375rem; }
.lg i { flex: none; }
.g2e { align-items: start; }
/* celular: os botões quebram em linhas (nada escondido para rolar de lado) */
@media (max-width: 640px) {
  .seg { flex-wrap: wrap; overflow: visible; border-radius: var(--r-lg); -webkit-mask-image: none; mask-image: none; padding: 6px; }
  .seg button { flex: 0 1 auto; }
}
.kpi .delta { line-height: 1.4; }

@media (max-width: 380px) { .kpi .value { font-size: 1.5rem; } .kpi { padding: 14px 14px; } }

/* =====================================================================
   v5 · pente fino: escala de espaço, filtros em folha, cartões que nunca vazam,
   gráfico com leitura fixa, balões por toque, login estático.
   Escala de espaço: 4 · 8 · 12 · 16 · 24 · 32 · 48.
   Camadas (z-index): conteúdo 0 · botão de suporte 40 · cartão de suporte 41 · balão 55 · folha de opções 60 · aviso 70.
   ===================================================================== */
:root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --rule-navy: rgba(255,255,255,.16); --sh-3: 0 10px 24px -12px rgba(10,31,59,.25), 0 0 0 1px rgba(10,31,59,.06); }
html { touch-action: manipulation; }   /* sem zoom por toque duplo; a pinça (dois dedos) continua livre */
body.trava { overflow: hidden; }
.wrap { --gutter: 20px; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .wrap { --gutter: 24px; } }
@media (min-width: 860px) { .wrap { padding-left: 24px; padding-right: 24px; } }

/* topo: logo à esquerda, ações à direita, sempre na mesma linha */
.brand { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: max(var(--s4), env(safe-area-inset-top)) 0 var(--s3); }
.logo-lupin { height: 26px; width: auto; flex: none; }
.atualiza { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s1); margin-left: auto; flex: none; }
.btn-atualiza { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; padding: 0 var(--s4); }
.btn-atualiza svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-sair { white-space: nowrap; }

/* cliente em destaque */
.hero { display: flex; align-items: center; gap: var(--s4); margin: var(--s3) 0 var(--s5); }
.hero .marca { flex: none; width: 72px; min-width: 72px; height: 72px; padding: 10px; border-radius: var(--r-lg); }
.hero .marca.mono { width: 72px; font-size: 2rem; }
.hero .marca img { max-height: 52px; max-width: 100%; }
@media (min-width: 600px) { .hero { gap: var(--s5); } .hero .marca { width: auto; min-width: 96px; max-width: 220px; height: 96px; padding: 14px 20px; } .hero .marca.mono { width: 96px; font-size: 2.6rem; } .hero .marca img { max-height: 64px; } }
.hero h1 { font-size: clamp(1.5rem, 6.6vw, 2.75rem); line-height: 1.1; margin: var(--s1) 0 0; text-wrap: balance; overflow-wrap: anywhere; }
.hero-sub { margin-top: var(--s2); }
.toast { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + var(--s3)); max-width: calc(100vw - 32px); background: var(--navy-900); color: var(--on-navy); border-radius: var(--r-pill); padding: var(--s3) var(--s5); font-size: 1rem; box-shadow: var(--sh-4); margin: 0; }
.toast[hidden] { display: none; }

/* filtros: uma pergunta por vez */
.filtros { display: grid; gap: var(--s5); margin: 0 0 var(--s5); counter-reset: f; }
.filtro { display: grid; gap: var(--s2); }
.filtro[hidden] { display: none; }
.ft { display: flex; align-items: center; gap: var(--s2); font-size: 1.125rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.ft::before { counter-increment: f; content: counter(f); flex: none; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--navy-800); color: var(--on-navy); font-size: .8125rem; font-weight: 600; display: grid; place-items: center; }
.campo-f { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 56px; padding: 0 var(--s4); border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font-size: 1.0625rem; text-align: left; cursor: pointer; box-shadow: var(--sh-2); }
.campo-f:hover { border-color: var(--accent); }
.campo-f .vf { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campo-f svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 700px) { .filtros { grid-template-columns: repeat(3, 1fr); align-items: start; gap: var(--s4); } }
.custom { grid-column: 1 / -1; display: none; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: 0; }
.custom.on { display: grid; }
.custom label { display: grid; gap: var(--s1); font-size: .9375rem; color: var(--ink-muted); }
.custom input { width: 100%; min-height: 48px; font-size: 1rem; padding: 0 var(--s3); }

/* folha de opções (celular: sobe de baixo; computador: caixa no centro) */
.folha { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.folha[hidden] { display: none; }
.folha-fundo { position: absolute; inset: 0; background: rgba(10,31,59,.5); }
.folha-caixa { position: relative; width: 100%; max-width: 520px; max-height: min(82vh, 640px); max-height: min(82dvh, 640px); display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-4); padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 600px) { .folha { align-items: center; } .folha-caixa { border-radius: var(--r-lg); } }
.folha-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s5); border-bottom: 1px solid var(--rule); flex: none; }
.folha-topo h2 { font-size: 1.1875rem; color: var(--ink); }
.folha-x { width: 48px; height: 48px; border: 0; background: transparent; font-size: 1.75rem; line-height: 1; color: var(--ink-muted); border-radius: var(--r-pill); cursor: pointer; }
.folha-x:hover { background: var(--n-100); }
.folha-lista { overflow-y: auto; overscroll-behavior: contain; padding: var(--s2) var(--s3) var(--s4); display: grid; gap: var(--s1); }
.opcao { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s3); border: 0; background: transparent; text-align: left; border-radius: var(--r-md); cursor: pointer; }
.opcao:hover { background: var(--paper-2); }
.opcao .o-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.opcao .o-t { color: var(--ink); font-size: 1.0625rem; overflow-wrap: anywhere; }
.opcao .o-d { color: var(--ink-muted); font-size: .9375rem; }
.opcao .o-ck { flex: none; width: 24px; height: 24px; border-radius: var(--r-pill); border: 2px solid var(--rule-strong); }
.opcao[aria-checked=true] { background: var(--navy-50); }
.opcao[aria-checked=true] .o-ck { background: var(--navy-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--navy-800); }

/* cartões: o conteúdo nunca passa do padding */
.kpis { gap: var(--s3); }
@media (min-width: 600px) { .kpis { gap: var(--s4); } }
.kpi { display: flex; flex-direction: column; gap: 0; padding: var(--s4); overflow: hidden; min-width: 0; }
.kpi .label { font-size: .9375rem; line-height: 1.3; min-height: 0; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 859px) { .kpi .label { min-height: 2.6em; } }
.kpi .value { display: block; max-width: 100%; font-size: clamp(1.5rem, 6.2vw, 2.25rem); margin: var(--s1) 0 var(--s2); line-height: 1.1; white-space: nowrap; }
.kpi .apoio { display: grid; gap: 2px; font-size: .9375rem; line-height: 1.35; color: var(--ink-muted); margin-top: auto; }
.kpi .apoio .l { display: block; overflow-wrap: anywhere; }
.kpi .apoio .delta { display: block; }
@media (min-width: 600px) { .kpi { padding: var(--s5); } }
.card { overflow-wrap: anywhere; }
.lead { margin-bottom: var(--s4); }
.grid { gap: var(--s4); margin-bottom: var(--s4); }

/* gráfico: leitura fixa acima (não cobre nada) */
.head { display: grid; gap: var(--s3); margin-bottom: var(--s3); }
@media (min-width: 600px) { .head { grid-template-columns: 1fr auto; align-items: start; } }
.toggle { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
@media (min-width: 600px) { .toggle { width: auto; } }
.toggle button { min-height: 44px; padding: 0 var(--s4); text-align: center; white-space: nowrap; }
.legend { display: grid; gap: var(--s1); margin: 0 0 var(--s3); }
.lg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); font-size: .9375rem; }
.lg i { align-self: center; width: 22px; flex: none; }
.lg b { color: var(--ink); }
.lg span { color: var(--ink-muted); }
.leitura { min-height: 120px; display: grid; align-content: center; gap: 2px; padding: var(--s3) var(--s4); margin: 0 0 var(--s3); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-md); }
.leitura[hidden] { display: none; }
.l-dia { font-size: .9375rem; color: var(--ink-muted); }
.l-val { font-size: 1.75rem; font-weight: 600; color: var(--ink); line-height: 1.15; }
.l-ant { font-size: .9375rem; color: var(--ink-muted); }
.l-ok { font-size: .9375rem; color: var(--good-ink); }
.l-dica { font-size: 1rem; color: var(--ink-muted); }
.plot { padding-left: 40px; margin-top: 0; }
.plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); }
.plot svg { height: 200px; }
.yl { width: 34px; font-size: .8125rem; }
.axis { position: relative; display: block; height: 24px; margin: var(--s2) 0 0 40px; }
.axis span { position: absolute; top: 0; white-space: nowrap; font-size: .8125rem; }
.vline { top: 0; bottom: auto; height: 200px; }

/* balões */
.tip { z-index: 55; max-width: min(290px, calc(100vw - 16px)); }
.tip.toque { pointer-events: auto; }
[data-tip] { -webkit-tap-highlight-color: transparent; }

/* ajuda e instalar */
.help { margin-top: var(--s5); }
.foot { margin-top: var(--s6); }
.instalar { margin-top: var(--s5); display: grid; gap: var(--s3); }
.instalar[hidden] { display: none; }
.instalar h2 { font-size: 1.1875rem; color: var(--ink); }
.instalar ol { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s2); color: var(--ink-body); }
.instalar .btn-instalar { justify-self: start; min-height: 48px; }
.instalar .ic { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em; fill: none; stroke: var(--accent-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* suporte: sai da frente ao rolar para baixo */
.wa { transition: opacity var(--dur), transform var(--dur); }
.wa.recolhe { opacity: 0; transform: translateY(24px); pointer-events: none; }

/* login, primeiro acesso, esqueci a senha: firmes, sem movimento */
.caixa, .caixa * { transition: none !important; animation: none !important; }
.caixa .btn:active { transform: none; }
.caixa { padding-top: max(var(--s7), env(safe-area-inset-top)); padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom)); }
.com-ver input { padding-right: 56px; }
.ver { right: 4px; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; background: transparent; border-radius: var(--r-pill); color: var(--ink-muted); }
.ver:hover { background: var(--navy-50); color: var(--ink); }
.ver svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ver .o-fecha { display: none; }
.ver[aria-pressed=true] .o-fecha { display: block; }
.ver[aria-pressed=true] .o-abre { display: none; }
.esqueci a { display: inline-block; padding: var(--s2) 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { .filtros .campo-f svg, .folha, .toast, .instalar { display: none !important; } }


.sair-form { display: contents; }
.foot { align-items: center; }
.foot .btn-sair { min-height: 44px; padding: 0 var(--s2); color: var(--ink-muted); text-decoration: underline; border: 0; background: transparent; cursor: pointer; font-size: .9375rem; }
/* barras de idade/gênero: nunca passam do padding do cartão */
.bar { width: 100%; margin: 0; padding: var(--s2) 0; }
.bar:hover { background: transparent; }
/* seletor do gráfico: cabe em qualquer largura */
.toggle { min-width: 0; }
.toggle button { min-width: 0; white-space: normal; line-height: 1.2; padding: var(--s2) var(--s3); }
.head > div { min-width: 0; }

/* os 3 filtros formam a "primeira dobra" do relatório: uma seção própria */
.filtros { padding: var(--s5) var(--s4); margin-bottom: var(--s6); background: linear-gradient(180deg, var(--navy-50), var(--paper-2)); border: 1px solid var(--navy-100); border-radius: var(--r-lg); box-shadow: var(--surface-glass-shadow); }
@media (min-width: 600px) { .filtros { padding: var(--s5); } }
.pf-topo { grid-column: 1 / -1; display: grid; gap: var(--s1); }
.pf-tit { font-size: 1.375rem; font-weight: 600; color: var(--ink); line-height: 1.2; letter-spacing: -.01em; }
.pf-sub { font-size: 1rem; color: var(--ink-muted); line-height: 1.4; max-width: 60ch; text-wrap: pretty; }
.custom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.custom label, .custom input { min-width: 0; }
@media (max-width: 440px) { .custom { grid-template-columns: minmax(0, 1fr); } }

.kpis.etapas .label { min-height: 0; }
.lg { display: grid; grid-template-columns: 22px 1fr; column-gap: var(--s2); align-items: start; }
.lg i { margin-top: .7em; }
.lg .lt { display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.foot .btn-sair { padding-left: 0; }

/* páginas de entrada (login, primeiro acesso, esqueci a senha, painel do dono): tudo centralizado */
body.caixa-pg { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-start; }
.caixa { width: 100%; text-align: center; }
.caixa img.logo { margin-left: auto; margin-right: auto; }
.caixa .sub { margin-left: auto; margin-right: auto; max-width: 36ch; }
.caixa .form { text-align: left; }
.caixa .aviso { text-align: center; }
.caixa .btn { width: 100%; }
.caixa .marca-check { justify-content: center; }
.caixa .esqueci { text-align: center; }
.caixa .qr { margin-left: auto; margin-right: auto; }
@media (min-width: 600px) { body.caixa-pg { justify-content: center; } .caixa { padding-top: var(--s5); padding-bottom: var(--s5); } }

/* leitura do gráfico: altura fixa, nada se mexe quando o mouse ou o dedo passa */
.leitura { height: 140px; min-height: 0; align-content: start; overflow: hidden; }
.leitura > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.l-val { display: flex; align-items: baseline; gap: var(--s3); }
.l-val .l-ok { font-size: .9375rem; color: var(--good-ink); font-weight: 400; }
.leitura .l-dica { white-space: normal; }

/* "atualizado há..." pequeno, embaixo do botão */
.acao { display: grid; justify-items: end; gap: var(--s1); flex: none; }
.quando { font-size: .8125rem; line-height: 1.2; color: var(--ink-muted); white-space: nowrap; }
@media (max-width: 380px) { .logo-lupin { height: 22px; } }

/* o card do cliente é o próprio logo */
.hero .marca { width: auto; min-width: 72px; height: 72px; max-width: min(240px, 46vw); padding: 0; overflow: hidden; display: block; background: var(--paper); }
.hero .marca img { display: block; width: auto; height: 100%; max-width: 100%; max-height: none; object-fit: contain; }
.hero .marca.respiro { padding: 10px; }
.hero .marca.respiro img { max-height: 100%; }
.hero .marca.mono { display: flex; width: 72px; }
@media (min-width: 600px) { .hero .marca { min-width: 96px; height: 96px; max-width: 260px; } .hero .marca.respiro { padding: 14px; } .hero .marca.mono { width: 96px; } }

/* o card É o logo: mesma proporção da imagem, sem faixas */
.hero { --lh: 72px; --lmax: min(240px, 46vw); }
@media (min-width: 600px) { .hero { --lh: 96px; --lmax: 260px; } }
.hero .marca { width: auto; height: auto; min-width: 0; max-width: none; display: block; }
.hero .marca img { --r: 1; aspect-ratio: var(--r); width: min(calc(var(--lh) * var(--r)), var(--lmax)); height: auto; max-width: none; max-height: none; object-fit: cover; display: block; }
.hero .marca[style] img { --r: inherit; }
.hero .marca.respiro img { width: min(calc((var(--lh) - 20px) * var(--r)), calc(var(--lmax) - 20px)); height: auto; max-height: none; object-fit: contain; }
.hero .marca.mono { width: var(--lh); height: var(--lh); }
/* logo largo: o nome do cliente vai para baixo dele, em vez de ser espremido */
.hero.larga { flex-direction: column; align-items: flex-start; gap: var(--s3); }
.hero.larga { --lmax: min(300px, calc(100vw - 40px)); }
@media (min-width: 600px) { .hero.larga { flex-direction: row; align-items: center; gap: var(--s5); --lmax: 300px; } }

/* padrão final do logo: card quadrado; logos de outra proporção se encaixam dentro, sem passar do tamanho máximo */
.hero .marca { width: var(--lh); height: var(--lh); min-width: 0; max-width: none; padding: 0; display: grid; place-items: center; overflow: hidden; }
.hero .marca img, .hero .marca[style] img { width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; object-fit: contain; display: block; }
.hero .marca.respiro { padding: 10px; }
@media (min-width: 600px) { .hero .marca.respiro { padding: 14px; } }
.hero.larga { flex-direction: row; align-items: center; gap: var(--s4); }
@media (min-width: 600px) { .hero.larga { gap: var(--s5); } }

/* aviso de atenção no "Como ler" */
.tag-atencao { display: inline-block; margin-left: var(--s2); padding: 2px 10px; border-radius: var(--r-pill); background: var(--navy-800); color: var(--on-navy); font-size: .8125rem; line-height: 1.5; }
.atencao { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s2) 0 var(--s4); padding: var(--s4); background: var(--navy-50); border: 1px solid var(--navy-100); border-left: 4px solid var(--navy-800); border-radius: var(--r-md); color: var(--ink-body); }
.atencao p { margin: 0; line-height: 1.5; }
.atencao__tit { color: var(--ink); font-weight: 600; margin-bottom: var(--s1) !important; }
.atencao__ico { flex: none; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--navy-800); color: var(--on-navy); display: grid; place-items: center; font-weight: 700; }
.help[open] { padding-bottom: var(--s2); }

/* instalar no celular: botão grande e direto */
.instalar .btn-instalar { width: 100%; justify-self: stretch; min-height: 52px; font-size: 1.0625rem; }
.inst-aviso { margin: 0; color: var(--ink-muted); font-size: .9375rem; line-height: 1.4; }
.inst-aviso:empty { display: none; }
.inst-manual summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--accent-deep); font-size: .9375rem; }
.inst-manual ol { margin: var(--s2) 0 0; padding-left: 1.3em; display: grid; gap: var(--s2); color: var(--ink-body); }

/* REGRA DO CABEÇALHO (como o menu de uma landing page):
   1) logo e botão ficam sempre no MESMO eixo horizontal (centralizados na mesma linha);
   2) a linha tem altura fixa, definida pelo botão (44px);
   3) informação secundária ("Atualizado há...") fica pendurada embaixo e NUNCA entra no cálculo do alinhamento;
   4) espaço depois do cabeçalho: 32px (inclui a folga para a informação pendurada). */
.brand { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; padding: max(var(--s4), env(safe-area-inset-top)) 0 0; margin: 0 0 var(--s6); box-sizing: content-box; }
.brand .logo-lupin { align-self: center; display: block; }
.acao { position: relative; display: block; flex: none; }
.atualiza { display: block; margin: 0; }
.quando { position: absolute; right: 0; top: calc(100% + 4px); }
.hero { margin-top: 0; }