@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/fonts/dm-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Lovelace Brand';src:url('/fonts/lovelace-bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --ink:#3e5c62;--ink-dark:#263f44;--paper:#faf7f2;--white:#fffdf9;--terracotta:#c66f5f;
  --pink:#f4cebd;--mint:#c0c3ad;--caramel:#d3a670;--muted:#637174;--line:#dcded5;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-synthesis:none;line-height:1.5}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.045em;line-height:1;margin:0;color:var(--ink-dark)}
em{font-style:italic;color:var(--terracotta)}
a{color:var(--ink)}
button{font:inherit;color:inherit;cursor:pointer}

.faixa{background:var(--ink);color:var(--white);font-size:10px;letter-spacing:.06em;padding:9px clamp(18px,5vw,92px)}
.topo{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px clamp(18px,5vw,92px);background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
.marca{display:flex;align-items:center;gap:14px}
.palavra{font-family:'Lovelace Brand',var(--serif);font-weight:700;font-style:italic;font-synthesis:style;font-size:30px;line-height:1;color:var(--ink);letter-spacing:-.02em}
.divisor{width:1px;height:28px;background:var(--ink);opacity:.5}
.rotulo{margin-left:10px;font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);border-left:1px solid var(--line);padding-left:14px}
.periodos{display:flex;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:4px}
.periodos button{border:0;background:none;padding:9px 16px;font-size:12px;font-weight:500;border-radius:2px;color:var(--muted);transition:background .2s,color .2s}
.periodos button:hover{color:var(--ink)}
.periodos button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.periodos button:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
.sair{margin:0}
.sair button{border:1px solid var(--line);background:none;padding:10px 16px;font-size:12px;font-weight:500;border-radius:2px;color:var(--muted);transition:border-color .2s,color .2s}
.sair button:hover{border-color:var(--ink);color:var(--ink)}
.sair button:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}

main{padding:0 clamp(18px,5vw,92px) 40px;max-width:1440px;margin:0 auto}
.eyebrow{font-size:10px;letter-spacing:.19em;font-weight:600;text-transform:uppercase;margin:0 0 10px;color:var(--muted)}
.abertura{padding:46px 0 30px}
.abertura h1{font-size:clamp(40px,5vw,64px)}
.sub{margin:16px 0 0;color:var(--muted);font-size:13px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.kpi{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:24px 24px 22px}
.kpi strong{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(44px,4.4vw,60px);letter-spacing:-.04em;line-height:1;color:var(--ink-dark)}
.kpi span{display:block;margin-top:10px;font-size:12px;color:var(--muted);min-height:18px}
.kpi.destaque{background:var(--ink);border-color:var(--ink)}
.kpi.destaque .eyebrow,.kpi.destaque span{color:var(--pink)}
.kpi.destaque strong{color:var(--white)}

.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cartao{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:24px;min-width:0}
.cartao.largo{grid-column:span 2}
.cartao header{margin-bottom:20px}
.cartao h2{font-size:30px}

.grafico{height:220px;position:relative}
.grafico svg{width:100%;height:100%;display:block;overflow:visible}
.grafico .eixo{font-size:10px;fill:var(--muted);font-family:var(--sans)}
.grafico .grade-linha{stroke:var(--line);stroke-width:1}
.grafico .barra{fill:var(--ink)}
.grafico .linha{fill:none;stroke:var(--terracotta);stroke-width:2;stroke-linejoin:round}
.grafico .vazio{font-size:13px;fill:var(--muted)}
.legenda{display:flex;gap:16px;align-items:center;margin:14px 0 0;font-size:12px;color:var(--muted)}
.ponto{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:-8px}
.ponto.tinta{background:var(--ink)}.ponto.terracota{background:var(--terracotta)}

.saude{list-style:none;margin:0;padding:0}
.saude li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.saude li:last-child{border-bottom:0}
.saude .status{width:10px;height:10px;border-radius:50%;background:var(--mint)}
.saude .ok .status{background:#5f9a7c;box-shadow:0 0 0 4px #5f9a7c22}
.saude .falha .status{background:var(--terracotta);box-shadow:0 0 0 4px #c66f5f33}
.saude .nome{font-size:13px;font-weight:500}
.saude .valor{font-size:12px;color:var(--muted);text-align:right}
.saude .historico{grid-column:2/4;display:flex;gap:2px;height:14px}
.saude .historico i{flex:1;background:#5f9a7c;opacity:.55;border-radius:1px}
.saude .historico i.f{background:var(--terracotta);opacity:1}
.nota{font-size:12px;color:var(--muted);margin:12px 0 0}

.barras{list-style:none;margin:0;padding:0}
.barras li{position:relative;display:flex;justify-content:space-between;gap:12px;padding:9px 10px;font-size:13px;border-radius:2px;overflow:hidden}
.barras li::before{content:'';position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--pink);opacity:.45;z-index:0}
.barras li>*{position:relative;z-index:1}
.barras li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barras li b{font-weight:600;color:var(--ink-dark)}
.barras.discreta{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.barras.discreta li::before{background:var(--mint)}
.barras .vazio{color:var(--muted);font-size:12px}
.barras .vazio::before{display:none}

.rodape{padding:28px clamp(18px,5vw,92px) 40px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.rodape p{margin:0}

.carregando strong,.carregando .barras{opacity:.4;transition:opacity .2s}
.erro{color:var(--terracotta)}

@media (max-width:1080px){.kpis{grid-template-columns:repeat(2,1fr)}.grade{grid-template-columns:repeat(2,1fr)}.cartao.largo{grid-column:span 2}}
@media (max-width:680px){.kpis,.grade{grid-template-columns:1fr}.cartao.largo{grid-column:auto}.topo{position:static}.rotulo{display:none}.periodos{width:100%}.periodos button{flex:1;padding:9px 6px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}