/* A folha da BIBLIOTECA (`design-system/`). 12/09/2026.

   Duas metades, e a divisão é deliberada:

   1. os TOKENS que o `mca.css` ainda não tinha — os papéis semânticos
      (`--texto-principal`, `--superficie-cartao`…), a régua de espaço, a
      escala de tipo, os raios nomeados e o bloco escuro da repaginação.
      Nenhum deles REDECLARA um token do `mca.css`: os 47 que já existem lá
      continuam nascendo lá, e aqui só entram os que faltavam. Dois lugares
      declarando a mesma cor é o começo de duas paletas.
   2. as classes `ds-*` dos componentes que o app ainda não desenha em
      nenhuma tela (o bloco de saldo, o painel, a rosca, a barra de
      qualidade, a busca global). O que o app JÁ desenha — botão, chip,
      pílula, etiqueta, recado, nota, faixa de KPI, tabela, menu — a
      biblioteca reaproveita do `mca.css`, sem segunda cópia.

   Esta folha entra só nas telas que pedem (`{% block estilos %}`), a
   começar pelo mostruário em `/design-system`. Nenhuma tela existente
   muda de aparência por ela existir. */

:root{
  /* papéis semânticos — prefira estes ao escrever tela nova */
  --texto-principal:var(--tinta); --texto-secundario:var(--tinta-fraca);
  --texto-marca:var(--azul); --texto-positivo:var(--verde); --texto-negativo:var(--vermelho);
  --texto-atencao:var(--ambar); --texto-sugestao:var(--roxo);
  --superficie-pagina:var(--fundo); --superficie-cartao:var(--cartao);
  --superficie-secao:var(--fundo-secao); --superficie-zebra:var(--zebra);
  --superficie-menu:var(--cartao); --superficie-selecao:var(--tint-azul);
  --linha:var(--borda); --linha-campo:var(--borda-campo); --linha-marca:var(--borda-azul);
  --acao-fundo:var(--azul-solido); --acao-texto:var(--sobre-azul); --acao-fundo-hover:var(--azul-escuro);

  /* o bloco sólido de destaque: um por tela */
  --marca-profundo:#0B3B36; --sobre-profundo:#FFFFFF; --marca-viva:#5BC4B4;
  --profundo-linha:rgba(255,255,255,.16); --profundo-fraco:rgba(255,255,255,.10);
  --sobre-profundo-fraco:rgba(255,255,255,.72);
  --superficie-destaque:var(--marca-profundo); --texto-sobre-destaque:var(--sobre-profundo);

  /* régua de espaço e larguras da casca */
  --esp-xs:0.35rem; --esp-sm:0.5rem; --esp-md:0.75rem; --esp-lg:1rem; --esp-xl:1.25rem; --esp-2xl:2rem;
  --padding-cartao:0.9rem 1rem; --padding-painel:1.2rem;
  --padding-botao-bloco:0.45rem; --padding-botao:var(--padding-botao-bloco) 0.9rem; --padding-campo:0.55rem 0.7rem;
  --padding-celula:0.55rem 0.8rem; --padding-celula-ar:0.85rem 1rem; --padding-pilula:0.1rem 0.5rem;
  --padding-bloco:1.35rem 1.5rem;
  --largura-menu:224px; --largura-menu-recolhido:56px; --largura-conteudo:1400px;
  --alvo-toque:44px; --alvo-wcag:24px;   /* WCAG 2.5.8: o menor alvo aceito */
  --alvo-minimo:var(--alvo-wcag);   /* o piso de todo alvo; no celular, o de toque (abaixo) */
  --alvo-icone:calc(var(--alvo-wcag) + var(--esp-xs));   /* o botão só de ícone (30 px); 44 até 900 px (mca.css) */
  /* as duas quebras, escritas para consulta: @media não lê var() */
  --quebra-menu:900px; --quebra-estreito:600px;

  /* tipo */
  --fonte-base:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-numero:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texto-display:1.75rem; --texto-titulo-tela:1.25rem; --texto-secao:1.125rem; --texto-titulo:1rem;
  --texto-corpo:1rem; --texto-botao:0.9375rem; --texto-tabela:0.875rem;
  --texto-rotulo:0.8125rem; --texto-chip:0.75rem;
  --peso-normal:400; --peso-medio:500; --peso-semi:600; --peso-forte:700;
  --altura-corpo:1.5; --altura-titulo:1.25;
  --tracking-display:-0.02em; --tracking-numero:-0.02em; --numero-tabular:tabular-nums;

  /* forma, camadas e movimento */
  --raio-chip:4px; --raio-campo:6px; --raio-menu:8px;   /* o --raio (10px) nasce no mca.css */
  --raio-painel:12px; --raio-bloco:16px; --raio-pilula:999px; --borda-largura:1px;
  --sombra-bloco:0 10px 24px rgba(11,59,54,.18);
  --faixa-atrasada:inset 4px 0 var(--vermelho);
  --z-cabecalho-tabela:10; --z-painel:20; --z-popover:30; --z-balao:40; --z-pular:50;
  --transicao-cor:120ms; --transicao-menu:150ms;
  --foco-anel:2px; --foco-deslocamento:-1px;
}
:root[data-tema="escuro"]{
  --marca-profundo:#0A2F2C; --sobre-profundo:#E6EAF0; --marca-viva:#5EC4B8;
  --sombra-bloco:0 10px 24px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --marca-profundo:#0A2F2C; --sobre-profundo:#E6EAF0; --marca-viva:#5EC4B8;
    --sombra-bloco:0 10px 24px rgba(0,0,0,.5);
  }
}
/* 07/10 (P2-6): no celular o piso de todo alvo é o de toque. Quem já usa o
   token (cabeçalho que ordena, `summary`, link de célula, chip, campo,
   `select`, botão-link) sobe junto, sem número solto por peça. Mora aqui, e
   não no mca.css: esta folha vem depois e o token nasce nela. */
@media (max-width: 900px){
  :root{--alvo-icone:var(--alvo-toque)}
}
@media (max-width: 600px){
  :root{--alvo-minimo:var(--alvo-toque)}
}

/* ── o número ───────────────────────────────────────────────────────── */
.ds-valor{font-variant-numeric:var(--numero-tabular);white-space:nowrap}
.ds-valor-forte{font-weight:var(--peso-semi)}
.ds-icone{display:inline-flex}

/* ── o bloco escuro de saldo: a única superfície sólida do tema claro ── */
.ds-bloco-saldo{background:var(--superficie-destaque);color:var(--texto-sobre-destaque);
  border-radius:var(--raio-bloco);padding:var(--padding-bloco);box-shadow:var(--sombra-bloco);
  margin:0 0 var(--esp-lg)}
.ds-bloco-rotulo{margin:0;font-size:var(--texto-rotulo);color:var(--marca-viva)}
.ds-bloco-valor{margin:var(--esp-xs) 0 0;font-size:var(--texto-display);font-weight:var(--peso-forte);
  letter-spacing:var(--tracking-display);font-variant-numeric:var(--numero-tabular)}
.ds-bloco-nota{margin:var(--esp-xs) 0 0;font-size:var(--texto-rotulo);color:var(--sobre-profundo-fraco)}
.ds-bloco-acoes{display:flex;gap:var(--esp-sm);margin-top:var(--esp-md);flex-wrap:wrap}

/* ── painel: a superfície comum das telas repaginadas ───────────────── */
.ds-painel{background:var(--superficie-cartao);border:var(--borda-largura) solid var(--linha);
  border-radius:var(--raio-painel);padding:var(--padding-painel);margin:0 0 var(--esp-lg)}
.ds-painel-topo{display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-sm)}
.ds-painel-topo h2{margin:0;font-size:var(--texto-secao);font-weight:var(--peso-semi)}
.ds-painel-acao{font-size:var(--texto-rotulo)}

/* ── resumo do celular ──────────────────────────────────────────────── */
.ds-resumo-movel{background:var(--superficie-destaque);color:var(--texto-sobre-destaque);
  border-radius:var(--raio-bloco);padding:var(--padding-cartao);margin:0 0 var(--esp-lg)}
.ds-resumo-rotulo{margin:0;font-size:var(--texto-rotulo);color:var(--marca-viva)}
/* 01/10: o tom da nota mora na PEÇA — só no vg.css, o mostruário saía 1,2:1 */
.ds-resumo-movel .nota{color:var(--sobre-profundo-fraco)}
.ds-resumo-valor{margin:.15rem 0 0;font-size:var(--texto-display);font-weight:var(--peso-forte);
  font-variant-numeric:var(--numero-tabular)}
/* 01/10: quebra a linha em vez de rolar — a 375 px o 4º chip saía cortado
   e nada dizia que dava para arrastar */
.ds-resumo-atalhos{display:flex;flex-wrap:wrap;gap:var(--esp-xs);margin-top:var(--esp-sm)}
.ds-resumo-atalhos .chip{white-space:nowrap;text-decoration:none}

/* ── barra de qualidade: mede trabalho, não mérito ──────────────────── */
.ds-qualidade{margin:0 0 var(--esp-md)}
.ds-qualidade-topo{display:flex;justify-content:space-between;gap:var(--esp-sm);margin:0 0 var(--esp-xs);
  font-size:var(--texto-rotulo)}
.ds-qualidade-trilho{background:var(--superficie-secao);border-radius:var(--raio-pilula);
  height:8px;overflow:hidden}
.ds-qualidade-cheio{display:block;height:100%;background:var(--azul);border-radius:var(--raio-pilula)}
.ds-pct-0{width:0}       .ds-pct-5{width:5%}    .ds-pct-10{width:10%}  .ds-pct-15{width:15%}
.ds-pct-20{width:20%}    .ds-pct-25{width:25%}  .ds-pct-30{width:30%}  .ds-pct-35{width:35%}
.ds-pct-40{width:40%}    .ds-pct-45{width:45%}  .ds-pct-50{width:50%}  .ds-pct-55{width:55%}
.ds-pct-60{width:60%}    .ds-pct-65{width:65%}  .ds-pct-70{width:70%}  .ds-pct-75{width:75%}
.ds-pct-80{width:80%}    .ds-pct-85{width:85%}  .ds-pct-90{width:90%}  .ds-pct-95{width:95%}
.ds-pct-100{width:100%}

/* ── tabela da biblioteca: a mesma régua da lista do app ────────────── */
.ds-tabela{width:100%;border-collapse:collapse;font-size:var(--texto-tabela)}
.ds-tabela caption{text-align:left;font-size:var(--texto-rotulo);color:var(--texto-secundario);
  padding-bottom:var(--esp-xs)}
.ds-tabela th,.ds-tabela td{padding:var(--padding-celula);border-bottom:1px solid var(--linha);
  text-align:left}
.ds-tabela.ar th,.ds-tabela.ar td{padding:var(--padding-celula-ar);font-size:var(--texto-botao)}
.ds-tabela th{background:var(--superficie-secao);font-weight:var(--peso-semi)}
.ds-tabela .n{text-align:right;font-variant-numeric:var(--numero-tabular);white-space:nowrap}
.ds-tabela tbody tr:hover{background:var(--linha-hover)}
.ds-tabela tr.atrasada td:first-child{box-shadow:var(--faixa-atrasada)}
.ds-tabela tr.apagada{color:var(--texto-secundario)}
.ds-tabela tfoot.totais td{font-weight:var(--peso-semi);border-top:2px solid var(--linha)}

/* ── a rosca (barras e linha: vg.css) ──────────────────────────────── */
.ds-svg{width:100%;height:auto;max-width:100%}
.ds-rosca{margin:0;max-width:220px}
.ds-fatia{fill:none;stroke-width:5}
/* 19/10 (N3, P-1): a série sem verde nem vermelho; "Outras" cinza */
.serie-0{--serie:var(--azul)}.serie-1{--serie:var(--ambar)}.serie-2{--serie:var(--anil)}
.serie-3{--serie:var(--roxo)}.serie-4{--serie:var(--ceu)}.serie-5{--serie:var(--magenta)}
.serie-outras{--serie:var(--tinta-fraca)}
.ds-fatia,.grafico.evolucao .linha{stroke:var(--serie)}
.chip[class*=serie-]{color:var(--serie);background:color-mix(in srgb,var(--serie) 12%,var(--cartao))}
.ds-legenda{list-style:none;padding:0;margin:var(--esp-sm) 0 0;display:grid;gap:var(--esp-xs);
  font-size:var(--texto-rotulo)}

/* ── vazio, recado e sugestões ──────────────────────────────────────── */
.ds-vazio{border:1px dashed var(--linha);border-radius:var(--raio);padding:var(--esp-xl);
  text-align:center;color:var(--texto-secundario)}
.ds-vazio h3{margin:var(--esp-xs) 0;font-size:var(--texto-titulo);color:var(--texto-principal)}
.ds-vazio-icone{color:var(--texto-secundario)}
:is(dialog,table,.vg-painel,.conc-titulos) .ds-vazio{border:0}
.ds-vazio-acao{margin-top:var(--esp-sm)}
/* 07/10: o link da saída é alvo (24 px no computador, 44 no celular) */
.ds-vazio-acao a{display:inline-flex;align-items:center;min-height:var(--alvo-minimo)}
.ds-recado-acao{margin-left:var(--esp-xs)}
.ds-sugestoes{list-style:none;padding:0;margin:0 0 var(--esp-sm);display:grid;gap:var(--esp-xs)}

/* ── campo, seletor e busca ─────────────────────────────────────────── */
.ds-campo{display:grid;gap:.2rem;margin:0 0 var(--esp-sm)}
.ds-campo label{font-size:var(--texto-rotulo);font-weight:var(--peso-semi)}
.ds-campo input,.ds-campo select{padding:var(--padding-campo);border-radius:var(--raio-campo);
  border:1px solid var(--linha-campo);background:var(--superficie-cartao);color:var(--texto-principal);
  font:inherit}
.ds-campo input:focus-visible,.ds-campo select:focus-visible{outline:var(--foco-anel) solid var(--azul);
  outline-offset:var(--foco-deslocamento);box-shadow:var(--sombra-foco)}
.ds-campo input:disabled,.ds-campo select:disabled{background:var(--superficie-pagina);
  color:var(--texto-secundario);cursor:not-allowed}
.ds-campo.embutido{display:inline-grid;margin:0}
.ds-campo.tem-erro input{border-color:var(--vermelho)}
.ds-campo-erro{margin:.15rem 0 0;font-size:var(--texto-rotulo);color:var(--vermelho)}
.ds-busca{position:relative;max-width:24rem}
.ds-busca input{width:100%;padding:var(--padding-campo);padding-left:var(--esp-2xl);
  border-radius:var(--raio-campo);border:1px solid var(--linha-campo);
  background:var(--superficie-cartao);color:var(--texto-principal);font:inherit}
.ds-busca-icone{position:absolute;left:.5rem;top:.45rem;color:var(--texto-secundario)}
.ds-busca-achados{list-style:none;margin:var(--esp-xs) 0 0;padding:0;border:1px solid var(--linha);
  border-radius:var(--raio);background:var(--superficie-cartao);box-shadow:var(--sombra-alta)}
.ds-busca-achados a{display:flex;gap:var(--esp-xs);justify-content:space-between;
  padding:var(--esp-xs) var(--esp-sm);text-decoration:none;color:var(--texto-principal)}
.ds-busca-achados a:hover{background:var(--linha-hover)}
.ds-busca-valor{font-variant-numeric:var(--numero-tabular)}
.ds-popover-esquerda > .painel{left:0;right:auto}

/* ── o ⓘ (02/10): a explicação que o `title=` escondia do celular ───── */
.ds-info{position:relative;display:inline-block;vertical-align:middle}
/* 24 px visíveis (WCAG 2.5.8) e 44 de toque pelo ::before, sem engordar a linha */
.ds-info-botao{position:relative;display:inline-grid;place-items:center;
  width:var(--alvo-wcag);height:var(--alvo-wcag);margin:calc(var(--esp-xs) * -1) 0;padding:0;
  border:0;border-radius:var(--raio-pilula);background:none;color:var(--texto-marca);
  font-size:var(--texto-titulo);font-weight:var(--peso-normal);line-height:1;cursor:help}
.ds-info-botao::before{content:"";position:absolute;
  inset:calc((var(--alvo-wcag) - var(--alvo-toque)) / 2)}
.ds-info-botao:hover{color:var(--texto-principal)}
.ds-info-texto{margin:0;padding:var(--esp-sm) var(--esp-md);
  border:1px solid var(--linha);border-radius:var(--raio-menu);box-shadow:var(--sombra-alta);
  background:var(--superficie-cartao);color:var(--texto-principal);
  font-size:var(--texto-rotulo);font-weight:var(--peso-normal);line-height:var(--altura-corpo);
  text-align:left;white-space:normal;max-width:min(22rem, calc(100vw - var(--esp-2xl)))}
/* aberto pelo toque/clique: folha presa ao pé da tela, larga para o polegar */
.ds-info-texto:popover-open{position:fixed;inset:auto var(--esp-lg) var(--esp-lg);
  margin:0 auto;width:auto;max-width:32rem}
/* hover (computador) e foco do teclado: o mesmo texto, preso ao ⓘ */
.ds-info-botao:focus-visible + .ds-info-texto:not(:popover-open){display:block;
  position:absolute;inset:calc(100% + var(--esp-xs)) auto auto 0;width:max-content;
  z-index:var(--z-popover)}
@media (hover: hover){
  .ds-info:hover > .ds-info-texto:not(:popover-open){display:block;
    position:absolute;inset:calc(100% + var(--esp-xs)) auto auto 0;width:max-content;
    z-index:var(--z-popover)}
}
/* U-3: o atalhos.js empurra a dica para dentro da janela (`--dica-dx`) e
   acima do "☰ Mais" (`--dica-dy`) — pela margem: o translate rolava de lado
   no Chrome 156 (DEP-21). Na tabela (`overflow:clip`), a última coluna abre
   para a esquerda e a última linha para cima */
.ds-info-botao:focus-visible + .ds-info-texto:not(:popover-open),
.ds-info:hover > .ds-info-texto:not(:popover-open){margin:var(--dica-dy,0px)
  calc(-1*var(--dica-dx,0px)) calc(-1*var(--dica-dy,0px)) var(--dica-dx,0px)}
td:last-child .ds-info:is(:hover, :has(:focus-visible)) > .ds-info-texto:not(:popover-open){
  left:auto;right:0}
tbody tr:last-child .ds-info:is(:hover, :has(:focus-visible)) > .ds-info-texto:not(:popover-open){
  top:auto;bottom:calc(100% + var(--esp-xs))}
/* Esc dispensa a dica sem tirar o foco (WCAG 1.4.13); a classe é do atalhos.js */
.ds-info.dispensada > .ds-info-texto:not(:popover-open){display:none}

/* ── 12/10: Trilha e Interruptor (proposta CoreUI) ─────────────────── */
.trilha ol{list-style:none;margin:0 0 var(--esp-sm);padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--esp-xs);font-size:var(--texto-tabela)}
.trilha li{display:flex;align-items:center;gap:var(--esp-xs)}
.trilha li + li::before{content:"›";color:var(--texto-secundario)}
.trilha a{display:inline-flex;align-items:center;min-height:var(--alvo-minimo);text-decoration:none}
.trilha a:hover{text-decoration:underline}
.trilha [aria-current]{color:var(--texto-secundario)}
/* [type]: vence o `input{width:100%}` das telas */
input.interruptor[type=checkbox]{appearance:none;position:relative;flex:none;width:2.75rem;height:1.5rem;margin:0;
  border:var(--borda-largura) solid var(--linha-campo);border-radius:var(--raio-pilula);
  background:var(--superficie-secao);cursor:pointer;transition:background-color var(--transicao-cor)}
input.interruptor::before{content:"";position:absolute;top:2px;left:2px;width:1.125rem;height:1.125rem;
  border-radius:var(--raio-pilula);background:var(--texto-secundario);transition:translate var(--transicao-cor)}
input.interruptor:checked{background:var(--acao-fundo);border-color:var(--acao-fundo)}
input.interruptor:checked::before{background:var(--acao-texto);translate:1.25rem 0}
input.interruptor:focus-visible{outline:var(--foco-anel) solid var(--azul);outline-offset:2px}
input.interruptor:disabled{opacity:.5;cursor:not-allowed}
label.interruptor-linha{display:inline-flex;align-items:center;gap:var(--esp-sm);
  min-height:var(--alvo-minimo);color:var(--texto-principal);cursor:pointer}
label.interruptor-linha[hidden]{display:none}

/* ── o mostruário ───────────────────────────────────────────────────── */
.ds-secao{margin:0 0 var(--esp-2xl)}
.ds-secao > h2{font-size:var(--texto-secao);border-bottom:1px solid var(--linha);
  padding-bottom:var(--esp-xs)}
.ds-peca{border:1px solid var(--linha);border-radius:var(--raio);padding:var(--esp-lg);
  margin:0 0 var(--esp-lg);background:var(--superficie-cartao)}
.ds-peca > h3{margin:0;font-size:var(--texto-titulo)}
.ds-peca > .nota{margin:.15rem 0 var(--esp-sm)}
.ds-estados{display:flex;flex-wrap:wrap;gap:var(--esp-sm);align-items:center}
.ds-estado{border:1px dashed var(--linha);border-radius:var(--raio-campo);padding:var(--esp-sm);
  min-width:12rem}
.ds-estado > .nota{margin:0 0 var(--esp-xs)}
.ds-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--esp-lg)}
.ds-amostra-cor{display:flex;align-items:center;gap:var(--esp-xs);font-size:var(--texto-rotulo)}
.ds-tinta{display:inline-block;width:1.5rem;height:1.5rem;border-radius:var(--raio-chip);
  border:1px solid var(--linha)}
.ds-tinta-azul{background:var(--azul)}
.ds-tinta-profundo{background:var(--marca-profundo)}
.ds-tinta-verde{background:var(--verde)}
.ds-tinta-vermelho{background:var(--vermelho)}
.ds-tinta-ambar{background:var(--ambar)}
.ds-tinta-roxo{background:var(--roxo)}
.ds-tinta-tinta{background:var(--tinta)}