/*
 * A ordem das camadas de CSS (Vuetify 4, guia de atualização: *Layers* e *CSS reset*). Fica fora do
 * bundle, ligada no index.html antes de tudo, para a ordem valer seja qual for a ordem do build.
 *
 * `app` é o CSS do próprio sistema (App.vue e o <style> de cada tela), que o vite.config.js põe nessa
 * camada: vence o dos componentes do Vuetify e perde para as classes utilitárias (d-none, text-center,
 * text-body-small...), como no Vuetify 3, em que as utilitárias tinham !important. Sem a camada, o CSS
 * do app ficaria fora de todas e passaria por cima delas — o d-none do rodapé deixou de esconder o
 * site no celular, e a página rolou de lado.
 */
@layer vuetify-core;
@layer vuetify-components;
@layer vuetify-overrides;
@layer app;
@layer vuetify-utilities;
@layer vuetify-final;

/* O reset do Vuetify 3 zerava a margem de tudo; o 4 deixa a do navegador. As telas foram feitas sem
   ela. */
@layer vuetify-core.reset {
  ul, ol, figure, details, summary {
    padding: 0;
    margin: 0;
  }

  h1, h2, h3, h4, h5, h6, p {
    margin: 0;
  }

  /* O 3 também tirava a borda e o fundo do botão; sem isso, os atalhos da FolhaAcoes (o único <button>
     escrito à mão) saíam com o cinza e a borda do navegador. */
  button {
    background-color: transparent;
    border-style: none;
  }
}
