/* Fechamento CDT — "instrumento de fechamento semanal"
   Bricolage Grotesque (rótulos/veredito) · IBM Plex Sans (texto) · IBM Plex Mono (números) */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..48,500;12..48,600;12..48,700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --ink: #182534;
  --ink-2: #59616c;
  --ground: #e9ebee;
  --panel: #fdfdfc;
  --line: #dedcd4;
  --brass: #8c6a3d;
  --ok: #1f6e45;   --ok-bg: #e7f0ea;
  --attn: #a25b12;  --attn-bg: #f6ecdf;
  --off: #a62b26;  --off-bg: #f6e6e4;
  --neutral-bg: #eef0f2;
  --shadow: 0 1px 0 rgba(24,37,52,.04), 0 8px 24px -18px rgba(24,37,52,.28);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 15px/1.55 "IBM Plex Sans", system-ui, sans-serif;
  font-feature-settings: "ss01";
}
a { color: inherit; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ---------- barra superior ---------- */
.top {
  background: var(--ink);
  color: #eef0f2;
  padding: 14px clamp(16px, 4vw, 40px);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  border-bottom: 3px solid var(--brass);
}
.top .marca {
  font: 600 10.5px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass);
  margin-bottom: 6px;
}
.top .unidade {
  font: 700 clamp(20px, 4.4vw, 30px)/1 "Bricolage Grotesque", sans-serif;
  letter-spacing: -.01em; text-transform: uppercase;
}
.top .controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.top .quem { font-size: 12.5px; color: #aeb6bf; }

select, .btn {
  font: 500 13px/1 "IBM Plex Sans", sans-serif;
  color: #eef0f2; background: #24344a;
  border: 1px solid #34465f; border-radius: 2px;
  padding: 8px 10px; cursor: pointer; text-decoration: none;
  display: inline-block; appearance: none; -webkit-appearance: none;
}
select { padding-right: 26px; background-image:
  linear-gradient(45deg, transparent 50%, #9fb0c3 50%),
  linear-gradient(135deg, #9fb0c3 50%, transparent 50%);
  background-position: calc(100% - 14px) center, calc(100% - 9px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.btn:hover, select:hover { border-color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- veredito (assinatura) ---------- */
.veredito {
  padding: 18px clamp(16px, 4vw, 40px);
  border-left: 6px solid var(--ink-2);
  background: var(--neutral-bg);
}
.veredito.ok   { border-color: var(--ok);   background: var(--ok-bg); }
.veredito.attn { border-color: var(--attn); background: var(--attn-bg); }
.veredito.off  { border-color: var(--off);  background: var(--off-bg); }
.veredito .frase {
  font: 600 clamp(18px, 3.6vw, 25px)/1.22 "Bricolage Grotesque", sans-serif;
  letter-spacing: -.01em; max-width: 42ch;
  animation: revela .34s ease both;
}
.veredito.ok .frase   { color: #14512f; }
.veredito.attn .frase { color: #7a430c; }
.veredito.off .frase  { color: #7d1f1b; }
.veredito .meta { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
@keyframes revela { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .veredito .frase { animation: none; } }

/* ---------- corpo ---------- */
.corpo { max-width: 940px; margin: 0 auto; padding: clamp(16px, 4vw, 32px); }
main.admin { max-width: 1040px; margin: 0 auto; padding: clamp(16px, 4vw, 32px); }

.instrumentos {
  display: grid; gap: 1px; background: var(--line);
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line); margin-bottom: 26px;
}
.instrumentos.dois { grid-template-columns: repeat(2, 1fr); }
.gauge { background: var(--panel); padding: 16px 16px 14px; border-top: 2px solid var(--brass); }
.gauge .rot { font: 600 10.5px/1 "IBM Plex Sans"; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
.gauge .val { font: 500 clamp(22px, 4.4vw, 30px)/1.1 "IBM Plex Mono"; margin: 8px 0 4px; letter-spacing: -.02em; }
.gauge .ctx { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: baseline; gap: 6px; }
.gauge .ctx .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; translate: 0 -1px; }
.dot.ok { background: var(--ok); } .dot.attn { background: var(--attn); } .dot.off { background: var(--off); }
.gauge .nota { margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }

section.bloco { margin: 26px 0; }
.bloco > h2 {
  font: 600 13px/1.2 "Bricolage Grotesque", sans-serif;
  text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 10px; padding-top: 10px; border-top: 1px solid var(--ink);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.bloco > h2 .fonte {
  margin-left: auto;
  font: 500 10px/1.3 "IBM Plex Mono"; letter-spacing: .03em;
  color: var(--brass); text-transform: none;
}
.bloco .exp { font-size: 12.5px; color: var(--ink-2); margin: -2px 0 12px; max-width: 66ch; }

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
thead th {
  font: 600 10.5px/1 "IBM Plex Sans"; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); text-align: left; padding: 6px 10px 8px; border-bottom: 1px solid var(--line);
}
tbody td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-family: "IBM Plex Mono"; font-variant-numeric: tabular-nums; }
td.pos { color: var(--off); }   /* pago acima do previsto */
td.neg { color: var(--ok); }

.microbar { position: relative; height: 6px; background: #edece6; min-width: 60px; }
.microbar > span { position: absolute; inset: 0 auto 0 0; background: var(--ink-2); }
.microbar > span.ok { background: var(--ok); }
.microbar > span.attn { background: var(--attn); }
.microbar > span.off { background: var(--off); }

/* equação de caixa */
.equacao { font-family: "IBM Plex Mono"; font-size: 13px; line-height: 1.9; color: var(--ink); }
.equacao b { font-weight: 600; }
.equacao small { color: var(--ink-2); }

/* waterfall */
.wfall { display: flex; gap: 10px; margin: 8px 0 14px; }
.wfall .col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.wfall .plot { height: 92px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.wfall .barra { width: 100%; max-width: 60px; background: var(--ink-2); }
.wfall .barra.ent { background: var(--ok); }
.wfall .barra.sai { background: var(--off); }
.wfall .barra.saldo { background: var(--ink); }
.wfall .cap { margin-top: 6px; font: 500 9px/1.3 "IBM Plex Sans"; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); text-align: center; }
.wfall .cap b { display: block; font-family: "IBM Plex Mono"; font-size: 10.5px; letter-spacing: -.02em; color: var(--ink); margin-top: 2px; }

.rodape { color: var(--ink-2); font-size: 11.5px; text-align: center; padding: 22px 16px 30px; }

.aviso {
  background: var(--attn-bg); border-left: 4px solid var(--attn);
  padding: 9px 12px; margin: 8px 0; font-size: 13px; color: #7a430c;
}
.vazio { color: var(--ink-2); font-size: 13.5px; padding: 4px 0; }

/* ---------- login ---------- */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 380px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.login-card .cab { background: var(--ink); color: #eef0f2; padding: 22px 24px; border-bottom: 3px solid var(--brass); }
.login-card .cab .marca { font: 600 10.5px/1 "IBM Plex Sans"; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.login-card .cab h1 { font: 700 21px/1.1 "Bricolage Grotesque", sans-serif; margin: 8px 0 0; text-transform: uppercase; }
.login-card form { padding: 22px 24px 26px; }
.login-card p.sub { color: var(--ink-2); font-size: 13px; margin: 0 0 16px; }
label { display: block; font: 600 11px/1 "IBM Plex Sans"; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 14px 0 5px; }
input {
  width: 100%; padding: 10px 12px; font: 400 15px/1 "IBM Plex Sans"; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
}
input:focus { border-color: var(--brass); outline: none; box-shadow: 0 0 0 3px rgba(140,106,61,.15); }
button.primario {
  margin-top: 20px; width: 100%; padding: 12px; cursor: pointer;
  font: 600 13px/1 "IBM Plex Sans"; letter-spacing: .04em; text-transform: uppercase;
  color: #fdfdfc; background: var(--ink); border: 0; border-radius: 2px;
}
button.primario:hover { background: #22384d; }
.erro { color: var(--off); font-size: 13px; margin-top: 12px; min-height: 1.2em; }

/* ---------- admin ---------- */
.pills { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); flex-wrap: wrap; margin-bottom: 22px; }
.pills button {
  flex: 1; min-width: 120px; padding: 9px 12px; cursor: pointer;
  font: 500 12px/1 "IBM Plex Sans"; letter-spacing: .02em;
  background: var(--panel); color: var(--ink-2); border: 0; border-top: 2px solid transparent;
}
.pills button[aria-current="true"] { color: var(--ink); border-top-color: var(--brass); font-weight: 600; }

@media (max-width: 620px) {
  .instrumentos, .instrumentos.dois { grid-template-columns: 1fr; }
  .top { align-items: flex-start; }
  .equacao { font-size: 11.5px; line-height: 1.85; }
  .wfall .plot { height: 72px; }
  .wfall .cap { font-size: 8px; }
  .wfall .cap b { font-size: 9.5px; }
  .bloco > h2 .fonte { margin-left: 0; flex-basis: 100%; }
}