/* =======================================================================
   Termômetro CTD — folha de estilo única
   Tokens em :root (claro), redefinidos para escuro pelo SO e pelo
   atributo data-theme, para que o botão de tema vença nos dois sentidos.
   ======================================================================= */

:root{
  color-scheme: light;

  --plane:#f6f4ef;        /* fundo da página */
  --surface:#fffefb;      /* cartões */
  --surface-2:#eeebe3;    /* trilhos, hover */
  --ink:#16150f;
  --ink-2:#56534a;
  --ink-3:#8b877b;
  --line:#e1ddd2;
  --line-2:#c9c4b5;

  --accent:#c41e2e;       /* vermelho Triunfante */
  --accent-ink:#8b0000;   /* vermelho escuro */
  --accent-soft:#f5e5e5;  /* rosa claro */

  --s1:#c41e2e;           /* série única dos gráficos — vermelho */
  --pole-a:#5a7f97;       /* divergente: polo frio — cinza */
  --pole-b:#c41e2e;       /* divergente: polo quente — vermelho */
  --good:#0ca30c;
  --base:#c9c4b5;         /* linha de base dos eixos */

  --shadow:0 1px 2px rgba(22,21,15,.05), 0 1px 1px rgba(22,21,15,.03);
  --shadow-2:0 4px 16px rgba(22,21,15,.07);
  --r:12px;
  --gut:clamp(16px, 4vw, 30px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --plane:#100f0d; --surface:#1a1916; --surface-2:#252420;
    --ink:#f7f4ec; --ink-2:#bdb8ab; --ink-3:#8c887d;
    --line:#2c2a26; --line-2:#3d3a34;
    --accent:#e85563; --accent-ink:#f5a5b0; --accent-soft:#3a1a20;
    --s1:#e85563; --pole-a:#7a9cb5; --pole-b:#e85563;
    --base:#3a3832;
    --shadow:0 1px 2px rgba(0,0,0,.34);
    --shadow-2:0 6px 20px rgba(0,0,0,.42);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --plane:#100f0d; --surface:#1a1916; --surface-2:#252420;
  --ink:#f7f4ec; --ink-2:#bdb8ab; --ink-3:#8c887d;
  --line:#2c2a26; --line-2:#3d3a34;
  --accent:#e85563; --accent-ink:#f5a5b0; --accent-soft:#3a1a20;
  --s1:#e85563; --pole-a:#7a9cb5; --pole-b:#e85563;
  --base:#3a3832;
  --shadow:0 1px 2px rgba(0,0,0,.34);
  --shadow-2:0 6px 20px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--plane); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{margin:0; font-family:Archivo,system-ui,sans-serif; letter-spacing:-.018em; text-wrap:balance}
p{margin:0}
img,svg{max-width:100%}
a{color:var(--accent-ink); text-underline-offset:3px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:5px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------------------------------------------------------- estrutura */
.wrap{width:100%; max-width:720px; margin-inline:auto; padding-inline:var(--gut)}
.wrap.wide{max-width:1180px}
.stage{padding-block:28px 56px}

.topbar{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:40;
  background:var(--plane); border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1180px; margin-inline:auto; padding:11px var(--gut);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.logo{flex:none; width:34px; height:34px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.logo img{display:block; width:100%; height:100%; max-width:34px; max-height:34px; object-fit:contain}
@media(max-width:520px){ .logo{width:28px; height:28px} .logo img{max-width:28px; max-height:28px} }

.brand{display:flex; align-items:baseline; gap:10px; margin-right:auto; min-width:0}
.brand b{font-family:Archivo,sans-serif; font-weight:700; font-size:15px; letter-spacing:-.012em; white-space:nowrap}
.brand span{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
@media(max-width:520px){ .brand span{display:none} }
.navbtn{
  font:500 13px/1 "IBM Plex Sans",sans-serif; color:var(--ink-2);
  background:transparent; border:1px solid transparent;
  padding:8px 12px; border-radius:8px; cursor:pointer;
}
a.navbtn, a.btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none}
.navbtn:hover{background:var(--surface-2); color:var(--ink)}
.navbtn[aria-current="page"]{
  background:var(--surface); border-color:var(--line-2); color:var(--ink); box-shadow:var(--shadow);
}
.icobtn{
  width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:8px; color:var(--ink-2); font-size:15px;
}
.icobtn:hover{background:var(--surface-2); color:var(--ink)}

.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent-ink);
}
.lede{color:var(--ink-2); max-width:56ch}

/* ---------------------------------------------------------- formulário */
.progress{display:flex; gap:3px; margin-bottom:24px}
.progress i{flex:1; height:4px; border-radius:2px; background:var(--line); transition:background .25s}
.progress i.done{background:var(--accent)}
.progress i.now{background:var(--accent); opacity:.4}

.qmeta{display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:12px}
.qnum{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); letter-spacing:.07em; flex:none}

.qcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:clamp(20px,4vw,30px);
}
.qtext{
  font-family:Archivo,sans-serif; font-weight:600;
  font-size:clamp(20px,3.6vw,27px); line-height:1.24; letter-spacing:-.02em;
}
.qhint{color:var(--ink-2); font-size:14.5px; margin-top:10px; max-width:52ch}
.fields{margin-top:24px; display:flex; flex-direction:column; gap:20px}
.fld{display:block; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-2); margin-bottom:8px}

input[type=text], textarea{
  display:block; width:100%; color:var(--ink); background:var(--plane);
  font:400 16px/1.55 "IBM Plex Sans",sans-serif;
  border:1px solid var(--line-2); border-radius:9px; padding:11px 13px;
  transition:border-color .15s, background .15s;
}
input[type=text]:focus, textarea:focus{background:var(--surface); border-color:var(--accent)}
textarea{min-height:112px; resize:vertical}
::placeholder{color:var(--ink-3)}

.choices{display:grid; gap:9px}
.choices.two{grid-template-columns:1fr 1fr}
@media(max-width:600px){ .choices.two{grid-template-columns:1fr} }
.choice{
  display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  padding:13px 14px; font-size:15.5px; line-height:1.4;
  background:var(--plane); border:1px solid var(--line-2); border-radius:9px;
  transition:border-color .15s, background .15s;
}
.choice:hover{border-color:var(--ink-3)}
.choice input{flex:none; margin:3px 0 0; accent-color:var(--accent)}
.choice.on{border-color:var(--accent); background:var(--accent-soft)}
.choice.on span{color:var(--ink)}

.scale{display:flex; gap:5px}
.scale button{
  flex:1; min-width:0; aspect-ratio:1/1; cursor:pointer;
  font:500 15px/1 "IBM Plex Mono",monospace; color:var(--ink-2);
  background:var(--plane); border:1px solid var(--line-2); border-radius:8px;
  transition:background .15s, color .15s, border-color .15s;
}
.scale button:hover{border-color:var(--ink-3)}
.scale button.on{background:var(--accent); border-color:var(--accent); color:#fff}
.scale-ends{display:flex; justify-content:space-between; gap:12px; margin-top:9px; font-size:12px; color:var(--ink-3)}

.nav{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:28px; padding-top:22px; border-top:1px solid var(--line)}
.btn{
  font:600 15px/1 "IBM Plex Sans",sans-serif; cursor:pointer;
  padding:13px 22px; border-radius:9px;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  transition:filter .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45; cursor:not-allowed; filter:none}
.btn.ghost{background:transparent; color:var(--ink-2); border-color:var(--line-2)}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn.sm{font-size:13px; padding:9px 14px}
.hintkey{margin-left:auto; font-size:12.5px; color:var(--ink-3)}
.hintkey kbd{
  font-family:"IBM Plex Mono",monospace; font-size:11px; padding:2px 5px;
  border:1px solid var(--line-2); border-radius:4px; background:var(--surface-2); color:var(--ink-2);
}
@media(max-width:600px){ .hintkey{display:none} }

/* ---------------------------------------------------------- tela de QR */
.qrgrid{
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(24px,5vw,48px); align-items:center; padding-block:clamp(24px,5vw,48px);
}
@media(max-width:820px){ .qrgrid{grid-template-columns:1fr} }
.qrbox{
  background:#fff; padding:18px; border-radius:16px;
  border:1px solid var(--line-2); box-shadow:var(--shadow-2);
}
.qrbox svg{display:block; width:100%; height:auto}
.qrbox svg rect{shape-rendering:crispEdges}
.linkline{
  display:flex; gap:8px; align-items:center; margin-top:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:8px 8px 8px 13px;
}
.linkline code{
  flex:1; min-width:0; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bigcount{
  font-family:Archivo,sans-serif; font-weight:700; line-height:.92;
  font-size:clamp(52px,10vw,96px); letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.caplabel{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-top:6px;
}
.steps{display:flex; flex-direction:column; gap:10px; margin:24px 0 0; padding:0; list-style:none; max-width:44ch}
.steps li{display:flex; gap:11px; font-size:14.5px; color:var(--ink-2); line-height:1.45}
.steps b{
  flex:none; width:21px; height:21px; margin-top:1px; display:grid; place-items:center;
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  color:var(--accent-ink); background:var(--accent-soft); border-radius:50%;
}

/* modo projeção: uma tela só, alto contraste, sem cromo */
body.projecao{background:#0c0b0a; color:#f7f4ec}
body.projecao .topbar{display:none}
body.projecao .qrgrid{min-height:100svh; align-content:center; padding-block:clamp(20px,4vh,60px)}
body.projecao .lede, body.projecao .steps li{color:#c8c3b6}
body.projecao .eyebrow{color:#f0855a}
body.projecao .linkline{background:#191713; border-color:#312e28}
body.projecao .linkline code{color:#c8c3b6}
body.projecao .caplabel{color:#8c887d}
body.projecao .steps b{color:#f0855a; background:#2c1c14}

/* ---------------------------------------------------------- painel */
.paineltop{
  display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:22px;
}
.live{
  display:inline-flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--good); flex:none; animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.toolbar{display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:22px}
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 19px; box-shadow:var(--shadow);
}
.kpi .k{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.kpi .v{font-family:Archivo,sans-serif; font-weight:700; font-size:44px; line-height:1.05; letter-spacing:-.035em; margin-top:8px}
.kpi .v small{font-size:19px; font-weight:600; color:var(--ink-3); letter-spacing:0}
.kpi .n{font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.4}

/* align-items:start — cada cartão tem a altura do próprio conteúdo,
   em vez de esticar até a altura do vizinho mais alto da linha. */
.charts{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:14px; align-items:start}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 20px 18px; box-shadow:var(--shadow);
}
.card h3{font-size:15.5px; font-weight:600; letter-spacing:-.008em}
.card .sub{font-size:12.5px; color:var(--ink-3); margin:5px 0 18px; line-height:1.45; max-width:46ch}

.bars{display:flex; flex-direction:column; gap:12px}
.bar-row{display:flex; flex-direction:column; gap:5px}
.bar-lab{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; color:var(--ink-2)}
.bar-lab b{flex:none; font-family:"IBM Plex Mono",monospace; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.track{height:10px; background:var(--surface-2); border-radius:5px; overflow:hidden}
.fill{height:100%; min-width:3px; border-radius:0 5px 5px 0; background:var(--s1); transition:width .4s cubic-bezier(.22,.61,.36,1)}

.hist{display:flex; align-items:flex-end; gap:3px; height:160px; margin-bottom:8px}
.hcol{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; height:100%}
.hcol i{display:block; width:100%; min-height:2px; background:var(--s1); border-radius:4px 4px 0 0; transition:height .4s cubic-bezier(.22,.61,.36,1)}
.hcol em{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3)}
.hcol b{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500; color:var(--ink-2); min-height:15px}
.axis{display:flex; justify-content:space-between; gap:12px; font-size:11.5px; color:var(--ink-3); border-top:1px solid var(--base); padding-top:7px}

.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2); margin-top:14px}
.legend span{display:inline-flex; gap:7px; align-items:center}
.swatch{width:10px; height:10px; border-radius:3px; flex:none}
.empty{color:var(--ink-3); font-size:13.5px; font-style:italic; padding:6px 0}
.zeros{margin-top:12px; padding-top:11px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3); line-height:1.5}
.zeros b{font-weight:600; color:var(--ink-2)}

.sec-head{display:flex; align-items:baseline; gap:14px; margin:36px 0 14px}
.sec-head h2{font-size:20px; font-weight:600}
.sec-head .rule{flex:1; height:1px; background:var(--line)}

.qa{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); margin-bottom:10px; overflow:hidden;
}
.qa>summary{
  display:flex; gap:13px; align-items:baseline; cursor:pointer; list-style:none;
  padding:16px 18px; font-weight:600; font-size:15px; line-height:1.4;
}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary:hover{background:var(--surface-2)}
.qa .idx{flex:none; font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500; color:var(--accent-ink)}
.qa .cnt{flex:none; margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500; color:var(--ink-3)}
.quotes{padding:0 18px 18px; display:flex; flex-direction:column}
.quote{border-top:1px solid var(--line); padding:13px 0 3px}
.quote p{font-size:15px; line-height:1.55; margin-bottom:6px}
.quote .who{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); letter-spacing:.02em}

.note{
  font-size:13px; color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--line); border-radius:9px; padding:12px 14px; line-height:1.5;
}
.erro{background:#fdecec; border-color:#f0b9b9; color:#8a1f1f}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .erro{background:#2a1414; border-color:#5a2626; color:#f3b4b4}
}
:root[data-theme="dark"] .erro{background:#2a1414; border-color:#5a2626; color:#f3b4b4}
.erro .mono{color:inherit}

.tip{
  position:fixed; left:0; top:0; z-index:70; pointer-events:none; opacity:0;
  background:var(--ink); color:var(--plane); font-size:12.5px; line-height:1.35;
  padding:7px 10px; border-radius:7px; max-width:240px; transition:opacity .12s;
}
.center{text-align:center}