/* Base element styles. Components live in their own files (see docs/frontend.md). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body-app);
  line-height: var(--lh-app);
}
.mono { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* On the brown top bars a brown ring would not show: yellow there (accessibility pass). */
.app-topo :focus-visible, .painel-topo :focus-visible { outline-color: var(--accent); }

/* Touch area of at least 44 x 44 px where the drawn control is smaller (style guide: "Alvo de
   toque mínimo de 44 × 44"; frontend.md). The visible size stays as drawn. */
.menu-acoes__gatilho, .painel-topo__sair, .tabela__arrastar, .filtro__opcao, .etapa, a.tabela__nome {
  position: relative;
}
.menu-acoes__gatilho::after, .painel-topo__sair::after, .tabela__arrastar::after,
.filtro__opcao::after, .etapa::after, a.tabela__nome::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: max(100%, var(--touch-min)); height: max(100%, var(--touch-min));
  transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
[x-cloak] { display: none !important; }

/* Text for screen readers only. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Information strip (W-06.4, W-07, W-09.2, P-08, P-13, P-14). */
.faixa {
  margin: 0; padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-field-panel); background: var(--surface-2); color: var(--ink-2);
}
.faixa--aviso { background: var(--accent-soft); color: var(--brand); }
.faixa a { color: inherit; font-weight: 600; }
.faixa--ok { background: var(--ok-soft); color: var(--ok); }
.faixa--erro { background: var(--danger-soft); color: var(--danger-text); font-weight: 600; }
.faixa__titulo { margin: 0; font-weight: 700; }
.faixa__texto { margin: var(--sp-1) 0 0; font-weight: 400; }
.faixa--feito { background: var(--ok); color: var(--on-brand); }
.faixa--fechado { background: var(--surface-2); color: var(--brand); border: 1px solid var(--border); }