/* Base: reset, tipografia, numerais, hachura, selos, chips, vazios, foco.
 * Nada aqui conhece a casca nem os módulos — só primitivas reutilizadas. */

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font-family: var(--mono); font-size: .92em; }
[hidden] { display: none !important; }

/* Numerais alinhados em coluna, em qualquer tamanho. */
.num, .tabela td, .kpi-valor, .barra-valor, .destaque-valor, .item-dias,
.alerta-qtd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Ícone do sprite: herda a cor do texto. */
.ic { width: 1em; height: 1em; flex-shrink: 0; display: inline-block; vertical-align: -.15em; }

/* Hachura: marca visual de valor NÃO medido (derivado/estimado). O selo
   é o segundo canal — cor nunca é o único. */
.hachura {
  background-image: repeating-linear-gradient(
    45deg, transparent 0 var(--hachura-passo),
    var(--hachura-cor) var(--hachura-passo) calc(var(--hachura-passo) * 2));
}

/* ----------------------------------------------------------------- selo -- */
.selo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--raio-pill);
  font-family: var(--fonte);
  font-size: var(--selo-f);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.selo-derivado { background: var(--derivado-selo-fundo); color: var(--derivado-selo-texto); }
.selo-estimado { background: var(--estimado-selo-fundo); color: var(--estimado-selo-texto); }
/* severidade de alerta de cadastro (cores fixas: já são AA nos dois temas) */
.selo-sev { margin-left: 0; }
.sev-alta  .selo-sev { background: #fbe3e7; color: #8a1f33; }
.sev-media .selo-sev { background: #fdf3d2; color: #6b5510; }
.sev-baixa .selo-sev { background: #edebe7; color: #4a4740; }
/* "Protótipo" ao lado da marca */
.selo-proto { margin: 6px 0 0; border: 1px solid var(--amarelo); color: var(--amarelo); background: transparent; }
/* "PLANEJADO — FASE 2" nos placeholders */
.selo-planejado { margin: 0; background: var(--amarelo); color: var(--preto); padding: 3px 10px; }

/* ----------------------------------------------------------------- chip -- */
.chip {
  display: inline-flex;
  align-items: center;
  height: var(--chip-a);
  padding: var(--chip-pad);
  border-radius: var(--raio-pill);
  font-family: var(--fonte);
  font-size: var(--chip-f);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.chip-MATRIZ { background: var(--cor-matriz); color: var(--cor-matriz-tinta); }
.chip-FILIAL { background: var(--cor-filial); color: var(--cor-filial-tinta); }
.chip-outra  { background: var(--cor-unidade-2); color: var(--cor-unidade-2-tinta); }
.chip-demo   { background: var(--azul); color: #fff; }

/* ---------------------------------------------------------------- vazio -- */
/* Forma curta (<p class="vazio">) e forma rica (C.vazio com ícone + título). */
.vazio {
  padding: 26px;
  text-align: center;
  color: var(--tinta-3);
  font-size: 13px;
}
.vazio .ic, .vazio-icone { display: block; width: 28px; height: 28px; margin: 0 auto 10px; }
.vazio h3 { font-size: 14px; font-weight: 600; color: var(--tinta); }
.vazio p { margin-top: 4px; max-width: 60ch; margin-left: auto; margin-right: auto; }
.vazio code { display: inline-block; margin-top: 6px; padding: 2px 6px; background: var(--superficie); border-radius: var(--raio-p); color: var(--vermelho-texto); word-break: break-word; }
.vazio button, .vazio .btn, .vazio a.vazio-acao {
  display: inline-block; margin-top: 12px; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-p);
  background: transparent; font-size: 13px; font-weight: 600; text-decoration: none;
}
.vazio button:hover, .vazio .btn:hover, .vazio a.vazio-acao:hover { background: var(--tinta); color: var(--superficie); }
.vazio-ok .ic, .vazio-ok h3 { color: var(--verde-texto); }
.vazio-erro .ic, .vazio-erro h3 { color: var(--vermelho-texto); }
.vazio-ausente .ic { color: var(--tinta-3); }
.vazio-ausente h3 { color: var(--tinta-2); }
.vazio-planejado .ic { color: var(--tinta-3); }

/* ------------------------------------------------------- acessibilidade -- */
.pular {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  padding: 8px 12px; background: var(--amarelo); color: var(--preto);
  border-radius: var(--raio-p); font-weight: 600; text-decoration: none;
}
.pular:focus { top: 8px; }

.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Quem pediu menos movimento não ganha crossfade, piscada nem transição de
   progresso. O tv.css troca o fill por degraus; aqui zera o resto. */
@media (prefers-reduced-motion: reduce) {
  *:not(.tv-progresso-fill), *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}