/* ==========================================================================
   GRAFICO — colunas, faixa de dias, barra de proporcao.
   Tudo em HTML/CSS: sem canvas, sem dependencia, sem observer de tamanho.
   ========================================================================== */

.gr { display: flex; flex-direction: column; gap: var(--e4); }

/* --------------------------------------------------------- legenda ------ */
/* legenda existe SEMPRE que houver 2+ series — a identidade nunca pode
   depender so da cor. Aqui ela usa o rotulo de territorio (.trl), porque as
   duas series SAO os dois orgaos. O `.gr__leg-i` continua para legenda que
   nao e de territorio (ex.: a barra de proporcao). */
.gr__leg { display: flex; align-items: center; gap: var(--e6); flex-wrap: wrap; }
.gr__leg-i { display: inline-flex; align-items: center; gap: var(--e2); font-size: 11.5px; color: var(--fg2); }
.gr__sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.gr__sw--s1 { background: var(--s1); }
.gr__sw--s2 { background: var(--s2); }

/* ------------------------------------------------------------ area ------ */
/* a altura reservada inclui a faixa de rotulos do eixo x — container que
   corta o eixo produz uma barrinha de rolagem interna, defeito classico. */
.gr__area { position: relative; padding: 16px 0 26px 56px; }

.gr__grade { position: absolute; top: 16px; bottom: 26px; left: 56px; right: 0; }
.gr__lin { position: absolute; left: 0; right: 0; height: 1px; background: var(--grade); }
.gr__lin:first-child { background: var(--eixo-cor); }        /* a linha de base pesa um pouco mais */
.gr__lin span {
  position: absolute; right: calc(100% + 10px); top: -.72em;
  font-family: var(--fm); font-size: 10px; color: var(--fg4); white-space: nowrap;
}

.gr__cols { position: relative; display: flex; align-items: flex-end; gap: 2px; height: var(--h); }

.gr__col {
  position: relative; flex: 1 1 0; height: 100%; min-width: 0;
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  transition: background var(--t1) var(--ease);
}
.gr__col:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.gr__col { transition: background calc(var(--t1) * var(--mo)) var(--suave); }

/* A COLUNA DESTACADA — a que leva o rotulo direto (`.gr__rotdir`).
   ⚠ ACHADO PELO `checar_classes.mjs` NA PRIMEIRA EXECUCAO DELE, em
   14/08/2026: `js/grafico.js:50` emitia `gr__col--dest` desde o prototipo 2
   e NUNCA existiu uma linha de folha para ela — a coluna destacada
   renderizava exatamente igual as outras, sem erro, sem 404 e sem console.
   E a familia do `class="faixa"`, e e literalmente o defeito que este linter
   nasceu para achar.
   O tratamento nao e inventado: e o MESMO do hover, em repouso — quem esta
   destacada ja esta no estado que o cursor produziria. */
.gr__col--dest { background: color-mix(in srgb, var(--fg) 4%, transparent); }

.gr__pilha {
  position: absolute; inset: 0 0 0 0;
  display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 2px;
  width: min(62%, 34px); margin: 0 auto;
}
.gr__s { display: block; width: 100%; min-height: 2px; }
.gr__s--s1 { background: var(--s1); }
.gr__s--s2 { background: var(--s2); }
/* canto arredondado so na PONTA DE DADOS; a base fica reta, colada no eixo */
.gr__pilha > .gr__s:last-child { border-radius: 3px 3px 0 0; }

.gr__xr {
  position: absolute; top: 100%; left: -2px; right: -2px; padding-top: 7px;
  font-size: 10px; color: var(--fg4); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gr__col:hover .gr__xr { color: var(--fg2); }

/* rotulo direto: SELETIVO. um numero em cada coluna vira ruido e ninguem le. */
.gr__rotdir {
  position: absolute; left: 50%; transform: translateX(-50%); margin-bottom: 5px;
  font-family: var(--fm); font-size: 10.5px; font-weight: 600; color: var(--fg);
  white-space: nowrap; pointer-events: none;
}

/* anotacao vertical: linha solida discreta + etiqueta. nao e grade. */
.gr__anot { position: absolute; top: 16px; bottom: 26px; width: 0; pointer-events: none; }
.gr__anot-l { position: absolute; inset: 0; width: 1px; background: var(--lin3); }
.gr__anot-t {
  position: absolute; top: -6px; left: 7px; white-space: nowrap;
  font-size: 10px; font-weight: 550; color: var(--fg3);
  background: var(--sup); padding: 0 5px; border-radius: var(--r-xs);
}

/* ------------------------------------------------------ faixa de dias --- */
/* a agenda de prazos: uma coluna por dia com prazo vivo. serie unica. */
/* as colunas comprimem em vez de estourar: barra de rolagem embaixo de um
   grafico parece defeito, e o dia continua legivel a 26px */
.fd { display: flex; align-items: flex-end; gap: 3px; }
.fd__d {
  flex: 1 1 26px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 4px 2px 6px; border-radius: var(--r-sm);
  transition: background var(--t1) var(--ease);
}
.fd__d:hover { background: var(--sup2); }
.fd__d.on { background: var(--b50); }
html[data-tema="escuro"] .fd__d.on { background: var(--b100); }
.fd__b { display: flex; align-items: flex-end; height: var(--h); width: 100%; }
.fd__b i { display: block; width: min(70%, 18px); margin: 0 auto; border-radius: 3px 3px 0 0; background: var(--s1); }
/* <=3 dias usa a escala do prazo, que e sua dona. --r2t e nao --r2: a barra e
   uma marca de dado e precisa de 3:1 contra o fundo — o caramelo puro da 2.48. */
.fd__d--u .fd__b i { background: var(--r2t); }
.fd__n { font-family: var(--fm); font-size: 11px; font-weight: 600; color: var(--fg); }
.fd__r { font-size: 9.5px; color: var(--fg4); text-align: center; line-height: 1.2;
         white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; }

/* --------------------------------------------------- barra proporcao ---- */
.prop { display: flex; flex-direction: column; gap: var(--e4); }
.prop__t { display: flex; height: 10px; border-radius: var(--pill); overflow: hidden; gap: 2px; background: var(--sup3); }
.prop__p { display: block; min-width: 3px; }
.prop__p--s1 { background: var(--s1); }
.prop__p--s2 { background: var(--s2); }
.prop__l { display: flex; gap: var(--e6); flex-wrap: wrap; }
.prop__li { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--fg2); }
.prop__li b { font-family: var(--fm); font-weight: 550; color: var(--fg); }

/* --------------------------------------------------------- mini tabela -- */
/* a mini tabela e gemea de figura, nao lista de trabalho: ela nao segue o
   dial de densidade — encolher a legenda de um grafico nao ajuda ninguem. */
.tb--mini td { height: 34px; font-size: 12px; }
.tb--mini thead th { height: 30px; }