/* © 2026 Jose Carvalho. Nova Ceasa - ERP interno. Obra protegida (Lei 9.610/98 e
   9.609/98). Sem licenca de uso, copia ou obra derivada: ver LICENSE. NCE-F0A8E8 */
/* ============================================================
   Dashboard editorial — Nova Ceasa Piauí
   Padrão Portal da Transparência. Prefixo de classe: nc-
   Vive em cima de assets/styles.css (tokens --forest, --green*, etc.)
   ============================================================ */

#dash.dash {
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--paper);
}
body:not(.tab-dashboard) #dash.dash { display: none; }

.nc-dash { font-family: var(--body); color: var(--ink); }

.nc-mono {
  font-family: var(--mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}

/* Aviso vermelho: no tema escuro o fundo rosa claro com texto vinho ficava uma
   mancha de pagina clara no meio do painel escuro. Tres fichas, uma por tema. */
:root {
  --dash-alerta-fundo: #fbe3e0;
  --dash-alerta-borda: #8f2a1f;
  --dash-alerta-texto: #6f2018;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --dash-alerta-fundo: #3a1512;
    --dash-alerta-borda: #e8897c;
    --dash-alerta-texto: #f3ccc6;
  }
}
:root[data-tema="escuro"] {
  --dash-alerta-fundo: #3a1512;
  --dash-alerta-borda: #e8897c;
  --dash-alerta-texto: #f3ccc6;
}

/* ---------- banda de abertura ---------- */
/* Faixa de topo do dashboard, no desenho do shadcn: fundo do proprio painel,
   titulo curto e uma linha de apoio a esquerda, controles a direita, tudo na
   altura de um cabecalho. Antes era uma banda verde-escura de pagina editorial
   com 40px de recuo, titulo de 40px e um paragrafo de abertura: cerca de 300px
   de tela antes do primeiro numero, todo dia, para quem abre isto justamente
   para ver numero. */
.nc-band {
  background: transparent;
  border-bottom: 1px solid var(--line);
  padding: 20px 0 18px;
}
.nc-band-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.nc-band-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.nc-band-left {
  max-width: 62ch;
  min-width: 0;
}
/* titulo e descricao da faixa: o CABECALHO DE TELA de assets/composicao.css
   (secao 5), o mesmo do ERP: Satoshi 20/700 e a linha de apoio de 14px */
.nc-h1 {
  margin-bottom: 2px;
}
.nc-lede {
  max-width: 62ch;
}
.nc-segwrap { padding-top: 0; }
/* Segmentado do shadcn: trilho na cor de apoio, item ativo em branco com sombra
   fina. Antes o trilho era branco e o item ativo verde-escuro, o que num fundo
   claro faz o filtro competir com o titulo. */
.nc-seg {
  display: inline-flex;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}
.nc-seg-btn {
  font-family: var(--body);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--green-900);
  background: transparent;
  /* borda de 1px sempre reservada (transparente): o hover so pinta a cor dela,
     sem mudar o tamanho. 6px x 11px + 1 de borda = os 7px x 12px de antes */
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transicao-controle);
}
/* Hover em todo item, inclusive no escolhido: contorno e texto trocam na hora,
   fundo desliza (regua, secao 5). Antes o escolhido era o unico sem resposta ao
   ponteiro -- a regra dele vencia a do hover -- e e o primeiro em que o olho para. */
.nc-seg-btn:hover { background: var(--card); border-color: var(--border); color: var(--foreground); }
.nc-seg-btn[aria-pressed="true"] {
  background: var(--card);
  color: var(--green-900);
  box-shadow: 0 1px 2px rgba(10, 40, 25, 0.08);
}
.nc-seg-btn[aria-pressed="true"]:hover { border-color: var(--green-300); color: var(--foreground); }
/* anel da regua (--ring, 3px): o lima era o foco do cabecalho escuro, e esta faixa e clara */
.nc-seg-btn:focus-visible { outline: var(--anel-largura) solid var(--ring); outline-offset: 1px; }

/* tiles cruzando a borda da banda */
.nc-tiles {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  /* "repeat(4, 1fr)" parece dividir igual, mas 1fr tem minimo automatico de
     min-content: um titulo comprido estica a coluna e a grade passa da tela.
     Medido em 932x430 com a barra lateral aberta: as quatro colunas davam 122,
     143, 164 e 164, somando 13px a mais do que cabia. Com auto-fit a grade
     escolhe quantas colunas cabem, e minmax(...,1fr) tira o minimo automatico. */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  /* o vao entre cartoes da regua: 24px, 16 no celular (composicao.css) */
  gap: var(--vao-cartoes);
  margin-top: var(--vao-cartoes);
}
/* Monitor grande: o auto-fit acima conta quantas colunas de 210px cabem e, num
   container de 1200px, a conta da CINCO — a quinta fica vazia, encolhe para 0 e
   ainda cobra o vao dela. Medido em 1697px de tela: quatro cartoes de 270px
   somando 1080 dentro de 1200, com 120px sobrando a direita e os cartoes
   encostados uns nos outros. Daqui para cima sao sempre quatro metricas e as
   quatro cabem numa linha, entao a grade passa a ser fixa (minmax(0,1fr) e o
   que evita o minimo de min-content que motivou o auto-fit). Abaixo de 1280 o
   auto-fit continua
   mandando, porque ele e quem enxerga a barra lateral aberta e cai para duas
   colunas sozinho — media query nao ve largura de container. */
@media (min-width: 1280px) {
  .nc-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* era 32px (o gap-8 do shadcn em tela larga); a regua fecha o vao entre
       cartoes em 24px em toda largura de computador, e o painel segue */
  }
}
/* Os cartoes de metrica sao o INDICADOR unico (.erp-kpi, assets/composicao.css,
   secao 3). O .nc-tile e a .nc-pill que moravam aqui eram o terceiro desenho de
   indicador do sistema e sairam. */

/* ---------- conteúdo geral ---------- */
/* O padding de cima e o respiro entre a faixa das quatro metricas e o primeiro
   cartao do conteudo: e vao entre cartoes, entao e o da regua (24px, 16 no
   celular), e nao os 32 de antes (o salto de 44px fica reservado para titulo de
   secao). */
.nc-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--vao-cartoes) 24px 40px;
}
/* Cabecalho de cartao, e nao de capitulo: titulo do tamanho do texto forte e uma
   linha de apoio em cinza, como CardTitle mais CardDescription no shadcn. */
/* 44px acima do titulo separa uma secao da anterior mais do que os 24px que
   separam cartoes dentro da mesma secao. Sem essa diferenca, tudo no painel
   parece uma lista so. */
.nc-sectionhead { max-width: 70ch; margin: 44px 0 16px; }
.nc-h2 {
  font-family: var(--display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-17);
  color: var(--green-900);
  margin: 0 0 4px;
  line-height: 1.25;
}
.nc-p { font-size: var(--fs-13); line-height: 1.6; color: var(--muted-foreground); margin: 0; max-width: 62ch; }

/* 7 e 5 de 12 colunas, a divisao que o dashboard-01 usa entre o grafico grande
   e o cartao de apoio ao lado. */
div.nc-row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  /* o vao entre cartoes da regua (composicao.css): o mesmo entre colunas e
     entre linhas, para o painel ter um ritmo so */
  gap: var(--vao-cartoes);
  align-items: stretch;
  margin-bottom: var(--vao-cartoes);
}

/* O cartao do painel e o CARTAO unico do sistema (.erp-cartao, em
   composicao.css, secao 2): raio 12, borda 1px, sem sombra, 24px. A classe
   nc-card continua no elemento so como gancho de teste. Aqui fica o que e do
   painel: o cartao largo que ocupa a linha inteira, e o rodape de duas linhas. */
.erp-cartao.wide { grid-column: 1 / -1; }
.nc-dash .erp-cartao { position: relative; }
/* Rodape do Card (CardFooter, a parte opcional do cartao da regua): uma linha
   que diz o que mudou e uma que diz de onde vem o numero. Escopado ao rodape:
   nos indicadores as mesmas classes sao so gancho de teste das linhas de
   contexto e apoio, que o componente desenha. */
.nc-card-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--texto-controle);
  line-height: 1.45;
  margin-top: auto;
  padding-top: 12px;
}
.nc-card-foot > .nc-card-foot-forte {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--peso-controle);
  color: var(--foreground);
}
.nc-card-foot .nc-card-foot-fraco { color: var(--muted-foreground); }
.nc-card-body { position: relative; }
.nc-chart { display: block; width: 100%; height: auto; }
/* redesenhado ao mudar de largura (naLarguraReal, dashboard.js): sem entrar de novo */
.nc-chart.nc-refeito * { animation: none !important; }
.nc-chart text {
  font-family: var(--body);
  font-size: 12px;
  fill: var(--ink);
}
.nc-chart text.nc-axis-lbl { fill: var(--muted-foreground); }
.nc-chart text.nc-strong,
.nc-chart .nc-mono { font-family: var(--mono); font-size: 11px; }
.nc-chart .nc-hit { fill: transparent; cursor: pointer; }
.nc-chart .nc-hit:hover ~ * ,
.nc-row:has(.nc-hit:hover) path { filter: brightness(1.08); }

/* O botao "Tabela / Grafico" e o botao de contorno pequeno da regua
   (sistema.css); a tabela que ele mostra e a TABELA unica (composicao.css). */
.nc-toggle { align-self: flex-start; }

/* donut + legenda */
.nc-donut-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.nc-donut-wrap { position: relative; flex: none; }
.nc-donut { width: 140px; height: 140px; display: block; }
.nc-donut circle { cursor: pointer; }
.nc-donut-n {
  font-family: var(--sora);
  font-weight: var(--fw-black);
  font-size: var(--fs-26); /* era 24 — normalizado pra escala fechada mesmo sendo SVG */
  fill: var(--green-900);
}
.nc-donut-lbl { font-size: 11px; fill: var(--muted-foreground); }
.nc-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 180px; }
/* .nc-legend-row e .nc-legend-sw sao o item e a amostra da LEGENDA unica
   (composicao.css, secao 8): o desenho mora la. */
.nc-legend-name { flex: 1; }
.nc-legend-pct { color: var(--muted-foreground); } /* tamanho vem de .nc-mono (valor: 12px/500) */

/* aside escuro (meta) */
.nc-aside {
  background: var(--forest);
  border-radius: var(--r-cartao);
  padding: var(--pad-cartao);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nc-aside .nc-aside-desc + .nc-meta-val { margin-top: -4px; }
.nc-meta-val {
  font-family: var(--sora);
  font-weight: var(--fw-black);
  font-size: var(--fs-30);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.nc-progress { background: rgba(255, 255, 255, 0.14); border-radius: 99px; height: 8px; overflow: hidden; }
.nc-progress-fill { background: var(--lime); height: 100%; border-radius: 99px; }
.nc-aside-note { font-size: var(--fs-13); line-height: 1.6; color: #c8dccb; margin: 0; }
.nc-aside-note b { color: #fff; }

.nc-callout {
  border-radius: 10px;
  padding: 14px 16px;
  border-left: 3px solid;
  font-size: var(--fs-13);
  line-height: 1.6;
}
.nc-callout p { margin: 0; }
.nc-callout.danger {
  background: var(--dash-alerta-fundo);
  border-color: var(--dash-alerta-borda);
  color: var(--dash-alerta-texto);
}
/* ".erp-cartao p" (composicao.css) pinta o <p> direto com --muted-foreground e vence a
   heranca: o aviso saia com 4,36:1 sobre o rosa. Mais especifico, ganha em qualquer ordem
   de carga: 9,1:1 no claro, 11:1 no escuro. */
.nc-callout.danger p { color: var(--dash-alerta-texto); }
.nc-callout.danger b { color: var(--dash-alerta-borda); }

/* manutenção */
.nc-stack { display: flex; flex-direction: column; gap: 16px; }
.nc-urgent-list { display: flex; flex-direction: column; gap: 6px; }
.nc-urgent-row { font-size: var(--fs-12); color: var(--muted-foreground); }
.nc-empty { font-size: var(--fs-13); color: var(--muted-foreground); padding: 8px 0; }

/* citações */
.nc-quotes { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.nc-quote {
  background: var(--paper-2);
  border-left: 3px solid var(--green-300);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: var(--fs-12);
  line-height: 1.6;
  font-style: italic;
  color: var(--ink);
}
/* status da tabela: a etiqueta (.tag) de sistema.css, com texto */

/* tooltip */
.nc-tip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--green-900);
  color: #fff;
  font-size: var(--fs-12);
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  z-index: 5;
}
.nc-tip b {
  font-family: var(--mono);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.nc-tip.on { opacity: 1; }

/* Nota de rodape em frase normal. Era mono, caixa alta e espacada: uma linha
   dificil de ler dizendo justamente o que mais importa, que o dado e mock. */
.nc-foot {
  font-size: var(--fs-13);
  color: var(--muted-foreground);
  text-align: center;
  padding: 28px 0 8px;
}

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .nc-band { padding: 18px 0 16px; }
  .nc-band-inner, .nc-tiles, .nc-content { padding-left: 16px; padding-right: 16px; }
  /* filtro de fila: faixa rolável, nunca quebra em 2 linhas */
  .nc-segwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nc-segwrap::-webkit-scrollbar { display: none; }
  .nc-seg { flex-wrap: nowrap; }
  .nc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  div.nc-row { grid-template-columns: 1fr; }
  .nc-sectionhead { margin: 28px 0 14px; }
  /* a tabbar e fixa no rodape: sem esta reserva o ultimo bloco do dashboard
     fica preso atras dela e nao ha rolagem que o traga para cima. */
  body.tab-dashboard .dash { padding-bottom: calc(var(--tabbar-h) + 16px); }
}

/* O donut nunca estica alem do tamanho natural (o bug das barras gigantes, do tempo
   em que as barras tambem so escalavam). As barras e a area agora ocupam a largura do
   cartao porque sao redesenhadas nela (naLarguraReal, dashboard.js). */
.nc-chart, .nc-donut { max-width: 100%; height: auto; display: block; }

/* Celular estreito: "R$ 437,5 mil" em 26px precisa de ~150px de linha. Em duas
   colunas num aparelho de 390px sobram 118px por cartao e o numero quebrava em
   tres linhas. Uma coluna so, e o numero fica inteiro. */
@media (max-width: 560px) {
  .nc-tiles { grid-template-columns: 1fr; }
}

/* Piso de 12px tambem no texto dentro do SVG. O ERP redefine --fs-11 para 12px
   em body.erp, mas estes tres tinham o 11px escrito na mao e escapavam. */
body.erp .nc-chart text.nc-strong,
body.erp .nc-chart .nc-mono,
body.erp .nc-chart text.nc-mono,
body.erp .nc-donut-lbl {
  font-size: 12px;
}

/* Piso de toque pelo aparelho, nao pela largura: um iPad tem de 768 a 1366px de
   largura e continua sendo dedo. O piso de 44px do erp.css nao chega aqui porque
   o CSS de modulo e injetado depois dele. */

/* ---------- cartao de metrica e cartao pequeno de manutencao ----------
   Os dois sao o INDICADOR unico (composicao.css, secao 3). O desenho que
   morava aqui (numero em 26/600, gradiente, pilula mono) era o paralelo e
   saiu. Fica o empilhamento dos tres pequenos, com o vao da regua. */
.nc-stack { display: flex; flex-direction: column; gap: var(--vao-cartoes); }
.nc-stack > * { flex: 1; }
.nc-stack .nc-card-body:empty { display: none; }

/* ---------- faixa de periodo ----------
   .nc-toggrupo e .nc-tog sao o SELETOR DE PERIODO unico do cartao de grafico
   (composicao.css, secao 8), com o toque de 44px la tambem. */

/* ---------- grafico de area ---------- */
.nc-area { width: 100%; height: auto; }
.nc-area .nc-grid { stroke: var(--line-soft); stroke-width: 1; }
.nc-area-linha { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nc-area-cursor { stroke: var(--muted-foreground); stroke-width: 1; stroke-dasharray: 3 3; }
/* .nc-area-leg e a LEGENDA unica (composicao.css, secao 8) */
/* o ponto de hoje no grafico de area e na legenda: o periodo atual em destaque */
.nc-area-hoje { stroke: var(--card); stroke-width: 2; }
/* dois nomes de classe: a amostra da legenda (.nc-legend-sw) mora em composicao.css, que carrega
   depois deste arquivo, e com um nome so o raio de 3px dela ganharia do circulo */
.nc-legend-sw.nc-legend-ponto { border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--green); }

/* ---------- abas da tabela (DataTable do dashboard-01) ---------- */
.nc-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  background: var(--paper-2);
  border-radius: 10px;
  padding: 4px;
  margin: 4px 0 14px;
}
.nc-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--body);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid transparent; /* reservada: o hover so pinta a cor */
  border-radius: 7px;
  padding: 6px 11px;
  transition: var(--transicao-controle);
  cursor: pointer;
  white-space: nowrap;
}
.nc-tab[aria-selected="true"] {
  background: var(--card);
  color: var(--green-900);
  box-shadow: 0 1px 2px rgba(10, 40, 25, 0.08);
}
/* hover em toda aba, inclusive na aberta (que antes nao respondia) */
.nc-tab:hover { color: var(--foreground); border-color: var(--border); }
.nc-tab[aria-selected="true"]:hover { border-color: var(--green-300); color: var(--foreground); }
.nc-tab:focus-visible { outline: var(--anel-largura) solid var(--ring); outline-offset: 1px; }
/* A contagem herdava --muted da aba e dava 4,02:1 sobre a pastilha, abaixo do
   minimo de 4,5. --green tambem nao passa (4,01 sobre a aba nao selecionada,
   que e --paper-2 com 7% de tinta por cima); --green-700 da 7,45. */
.nc-tab-n {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-12);
  color: var(--green-700);
  background: var(--paper-3, rgba(10, 40, 25, 0.07));
  border-radius: 99px;
  padding: 1px 7px;
}
.nc-tab[aria-selected="true"] .nc-tab-n { background: var(--paper-2); }

/* ---------- tabela de dados ----------
   A TABELA unica (composicao.css, secao 4). A classe nc-dt continua no
   elemento so como gancho de teste. O que e do painel: a caixa dela dentro do
   cartao ganha contorno (o cartao aqui tem abas e rodape, e a tabela precisa
   de borda propria) e a coluna de apoio em cinza, que some em tela estreita. */
.nc-dash .erp-cartao .nc-dt-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); }
.nc-dt td { white-space: nowrap; }
.nc-dt .fraco { color: var(--muted-foreground); }
/* Em tela estreita a coluna de apoio sai da tabela, para o valor (a ultima
   coluna, e a razao de olhar a lista) caber sem precisar rolar de lado. */
@media (max-width: 900px) {
  .nc-dt .fraco { display: none; }
}

/* ---------- meta do ano ---------- */
.nc-aside-title {
  font-family: var(--display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-17);
  color: #fff;
  margin: 0;
}
.nc-aside-desc { font-size: var(--fs-13); line-height: 1.5; color: #c8dccb; margin: 4px 0 0; }

/* ---------- telas menores ---------- */
/* Em tablet e celular a divisao 7/5 nao existe: os cartoes empilham. A tabela
   com abas continua rolando na horizontal dentro do proprio quadro. */
@media (max-width: 860px) {
  div.nc-row { grid-template-columns: 1fr; }
  /* No cartao de grafico o canto de acao desce para debaixo do titulo, porque
     uma faixa de periodo nao cabe ao lado num celular. */
  .nc-dash .erp-cartao-cabecalho { grid-template-columns: minmax(0, 1fr); }
  .nc-dash .erp-cartao-acao { grid-column: 1; grid-row: auto; justify-self: start; }
  .nc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nc-tabs::-webkit-scrollbar { display: none; }
}

/* ---------- paginacao da tabela ---------- */
.nc-pag-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.nc-pag { display: flex; align-items: center; gap: 8px; }
.nc-pag-txt { font-size: var(--fs-13); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
/* os botoes da paginacao sao o botao de contorno pequeno de sistema.css */

/* ---------- piso de toque: ULTIMA PALAVRA DO ARQUIVO ---------- */
/* Em dedo, todo controle tem 44px de altura util (WCAG 2.5.5). Fica no fim do
   arquivo de proposito: @media nao soma especificidade, entao qualquer regra de
   padding escrita depois deste bloco venceria por ordem e derrubaria o piso.
   Este bloco ja se perdeu uma vez numa limpeza de regra morta — o teste
   scripts/testar-toque.mjs e quem avisou. */
@media (pointer: coarse) {
  .nc-tab,
  .nc-seg-btn {
    min-height: 44px;
  }
}

/* ============================================================
   MOVIMENTO DO PAINEL

   O painel nao tinha nenhuma animacao propria: zero @keyframes neste arquivo,
   zero SVG animado. Os graficos apareciam prontos, e o dono comparou com o
   dashboard do shadcn, onde o grafico se desenha. A comparacao e justa.

   Regra que vale para tudo aqui: o movimento serve para mostrar como o numero
   foi construido, nunca para enfeitar. Grafico se desenha da esquerda para a
   direita porque o tempo anda para a direita; barra cresce do chao porque
   quantidade cresce de baixo; rosca preenche no sentido do relogio.
   ============================================================ */

/* A cortina que desenha a area, igual ao gesto do ChartAreaInteractive. 900ms
   com saida suave: rapido o bastante para nao atrasar a leitura, lento o
   bastante para o olho acompanhar o tracado. */
@keyframes ncCortina {
  from {
    width: 0;
  }
}
.nc-cortina {
  animation: ncCortina 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* A rosca de segmentos preenche no sentido do relogio, em vez de nascer inteira.
   Cada fatia entra depois da anterior (--nc-i), entao o olho segue a ordem da
   legenda. */
@keyframes ncFatia {
  from {
    stroke-dasharray: 0 var(--nc-c, 360);
  }
}
.nc-donut circle[data-fatia] {
  animation: ncFatia 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--nc-i, 0) * 90ms);
}

/* As barras deste painel sao HORIZONTAIS, entao crescem da esquerda, que e de
   onde a linha do rotulo parte. transform-origin na esquerda porque barra que
   cresce do meio para os dois lados nao existe no mundo real. */
@keyframes ncBarra {
  from {
    transform: scaleX(0);
  }
}
.nc-bar-fill {
  transform-box: fill-box;
  transform-origin: left;
  animation: ncBarra 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--nc-i, 0) * 45ms);
}

/* ULTIMA PALAVRA: quem pediu menos movimento ve o estado final, direto. */
@media (prefers-reduced-motion: reduce) {
  .nc-cortina,
  .nc-donut circle[data-fatia],
  .nc-bar-fill {
    animation: none !important;
  }
}