/* Reset curto, tipografia e nada mais. Componente vive em components.css. */

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* CRITICO: sem isto, form cai em Arial no Windows e em -apple-system no Mac.
   Estes quatro elementos nao herdam font-family do body por default. */
button, input, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-titulo);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--texto);
  line-height: 1.2;
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--accent-texto);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Foco de teclado sempre visivel. Piso de acessibilidade, nao enfeite. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Icone: tamanho e cor por classe, nunca por style inline */
.icon { font-size: 1.1rem; line-height: 1; display: inline-flex; vertical-align: middle; }
.icon-sm { font-size: .9rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.75rem; }
.icon-xl { font-size: 2.5rem; }

.icon-accent { color: var(--accent); }
.icon-success { color: var(--success); }
.icon-danger { color: var(--danger); }
.icon-muted { color: var(--muted); }


/* ============================================================
   hidden E hidden
   ============================================================ */

/* O atributo `hidden` do HTML so esconde porque a folha PADRAO do navegador
   traz [hidden] { display: none }. Qualquer regra NOSSA que declare display
   ganha dela, porque folha de autor vence folha de navegador. Entao
   `.aviso { display: flex }` e `.vz { display: flex }` faziam esses elementos
   ficarem visiveis para sempre, mesmo com hidden no HTML e mesmo com o
   JavaScript escrevendo elemento.hidden = true.
   Sintoma disso na tela de Ordens: uma tarja amarela vazia embaixo do titulo,
   e o recado "nenhuma ordem foi aberta" aparecendo logo abaixo da tabela cheia
   de ordens. Nao era logica errada, era CSS engolindo o hidden.
   Uma linha, e vale para toda tela que ja existe e toda que ainda vai nascer. */
[hidden] { display: none !important; }