/* base.css: fontes, tipografia, foco visivel e os componentes do docs/contexto/design.md.
   Cor, letra e medida vem das variaveis do tokens.css (carregue o tokens.css antes deste arquivo).
   Nenhuma cor escrita por extenso aqui: o ferramentas/marca/conferir_marca.py confere.
   As classes de estado (.estado-passar, .estado-pressionado, .estado-foco) existem para a pagina de referencia
   mostrar cada estado parado; no site e no sistema quem manda e o mouse, o toque e o teclado. */

/* Fontes servidas de marca/fontes/, com a licenca ao lado (subconjunto latino, que cobre o portugues). */
@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/permanent-marker/permanent-marker-400-latino.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/poppins/poppins-400-latino.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fontes/poppins/poppins-600-latino.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fontes/inter/inter-400-600-latino.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- base */

:root {
  color-scheme: light; /* sem modo escuro no v1 */
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-texto);
  font-weight: var(--peso-regular);
  line-height: var(--altura-linha-texto);
  color: var(--uso-texto);
  background-color: var(--uso-fundo);
}

img {
  max-width: 100%;
  height: auto;
}

p {
  margin: 0 0 var(--espaco-16);
}

/* ---------------------------------------------------------------- tipografia */

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--espaco-16);
  line-height: var(--altura-linha-titulo);
  color: inherit;
}

/* titulos em Poppins SemiBold (600), como o "21" do logotipo */
h1,
.titulo-1 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-seminegrito);
  font-size: var(--tamanho-titulo-1);
}

h2,
.titulo-2 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-seminegrito);
  font-size: var(--tamanho-titulo-2);
}

h3,
.titulo-3 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-seminegrito);
  font-size: var(--tamanho-titulo-3);
}

/* subtitulo (20 px): a fonte do texto em 600 */
h4,
.subtitulo {
  font-family: var(--fonte-texto);
  font-weight: var(--peso-seminegrito);
  font-size: var(--tamanho-subtitulo);
}

.titulo-destaque {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-seminegrito);
  font-size: clamp(var(--tamanho-titulo-1), 9vw, var(--tamanho-destaque));
  line-height: var(--altura-linha-titulo);
}

.texto-corrido {
  max-width: 70ch;
}

.texto-secundario {
  color: var(--uso-texto-secundario);
}

.texto-pequeno {
  font-size: var(--tamanho-pequeno);
}

.legenda {
  font-size: var(--tamanho-legenda);
  color: var(--uso-texto-secundario);
}

.numeros {
  font-variant-numeric: tabular-nums;
}

/* no maximo uma frase da marca por tela ou por peca */
.frase-marca {
  font-family: var(--fonte-frase);
  font-weight: var(--peso-regular);
  font-size: var(--tamanho-titulo-3);
  line-height: var(--altura-linha-titulo);
}

/* a marca no site e no sistema e o SVG do logotipo 021 (marca/logotipo/), num <img> com alt; nao ha nome composto */

/* ---------------------------------------------------------------- links e foco */

/* O link e o foco seguem o fundo pelas variaveis --link-cor e --foco-cor: mar profundo no claro; turquesa na secao
   escura e na barra lateral; de volta ao mar profundo dentro de cartao; na cor do texto na faixa e no alerta. Os
   componentes com cor propria (botao, item de menu) nao herdam a do link, porque a regra do "a" e a mais fraca. */
a {
  color: var(--link-cor, var(--uso-link));
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover,
a.estado-passar {
  text-decoration-thickness: 2px;
}

/* link fora de frase (sozinho na linha, em menu ou indice): area de toque de 44 por 44 px; o link no meio da frase
   segue a linha do texto */
.link-solto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--toque-minimo);
  min-height: var(--toque-minimo);
}

/* foco visivel: 2 px afastado 2 px, na cor que o fundo pede */
:focus-visible,
.estado-foco {
  outline: var(--foco-largura) solid var(--foco-cor, var(--uso-foco));
  outline-offset: var(--foco-afastamento);
}

.secao-escura,
.barra-lateral {
  --link-cor: var(--uso-link-escuro);
  --foco-cor: var(--uso-foco-escuro);
}

.pular-para-conteudo {
  position: absolute;
  left: var(--espaco-16);
  top: calc(-1 * var(--espaco-96));
  z-index: 10;
  padding: var(--espaco-12) var(--espaco-16);
  border-radius: var(--raio-controle);
  background-color: var(--uso-fundo-cartao);
  color: var(--uso-link);
  font-weight: var(--peso-seminegrito);
}

.pular-para-conteudo:focus {
  top: var(--espaco-16);
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- pagina, grade e secoes */

.pagina {
  width: 100%;
  max-width: var(--grade-largura-max);
  margin-inline: auto;
  padding-inline: var(--grade-calha-celular);
}

.grade {
  display: grid;
  grid-template-columns: repeat(var(--grade-colunas), minmax(0, 1fr));
  gap: var(--grade-calha-celular);
}

.grade > * {
  grid-column: 1 / -1;
}

.secao {
  padding-block: var(--espaco-48);
}

/* na secao escura vao texto, link, botao primario (em button ou em a), nome da marca e frase; o resto vai dentro de
   um cartao, que volta o link e o foco ao padrao do fundo claro */
.secao-escura {
  background-color: var(--uso-fundo-escuro);
  color: var(--uso-texto-inverso);
}

/* sobre a areia, o mar profundo nao chega a 4,5 como texto: link e foco na cor do texto */
.faixa-destaque {
  --link-cor: var(--uso-texto);
  --foco-cor: var(--uso-texto);
  background-color: var(--uso-fundo-destaque);
  color: var(--uso-texto);
}

/* os pontos de quebra repetem o tokens.json (quebra.*): o @media nao le variavel */
@media (min-width: 640px) {
  .pagina {
    padding-inline: var(--grade-calha);
  }

  .grade {
    gap: var(--grade-calha);
  }

  .grade > .ocupa-3,
  .grade > .ocupa-4,
  .grade > .ocupa-6 {
    grid-column: span 6;
  }
}

@media (min-width: 960px) {
  .secao {
    padding-block: var(--espaco-64);
  }

  .grade > .ocupa-3 {
    grid-column: span 3;
  }

  .grade > .ocupa-4 {
    grid-column: span 4;
  }

  .grade > .ocupa-8 {
    grid-column: span 8;
  }
}

/* ---------------------------------------------------------------- botoes */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-8);
  min-height: var(--controle-altura);
  min-width: var(--toque-minimo);
  padding: 0 var(--espaco-24);
  border: 2px solid transparent; /* aparece no modo de alto contraste do Windows */
  border-radius: var(--raio-controle);
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-texto);
  font-weight: var(--peso-seminegrito);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--movimento-rapido) var(--movimento-curva),
    box-shadow var(--movimento-rapido) var(--movimento-curva),
    transform var(--movimento-rapido) var(--movimento-curva);
}

.botao-primario {
  background-color: var(--uso-botao-primario-fundo);
  color: var(--uso-botao-primario-texto);
}

.botao-primario:hover:not(:disabled, [aria-disabled="true"]),
.botao-primario.estado-passar {
  background-color: var(--uso-botao-primario-fundo-passar);
}

/* pressionado: o tom mais escuro de laranja reprovaria o texto (4,28), entao fica o do mouse com sombra interna */
.botao-primario:active:not(:disabled, [aria-disabled="true"]),
.botao-primario.estado-pressionado {
  background-color: var(--uso-botao-primario-fundo-passar);
  box-shadow: var(--sombra-pressionado);
  transform: translateY(1px);
}

.botao-secundario {
  background-color: var(--uso-botao-secundario-fundo);
  color: var(--uso-botao-secundario-texto);
}

.botao-secundario:hover:not(:disabled, [aria-disabled="true"]),
.botao-secundario.estado-passar {
  background-color: var(--uso-botao-secundario-fundo-passar);
}

.botao-secundario:active:not(:disabled, [aria-disabled="true"]),
.botao-secundario.estado-pressionado {
  background-color: var(--uso-botao-secundario-fundo-pressionado);
  box-shadow: var(--sombra-pressionado);
  transform: translateY(1px);
}

/* fantasma: so sobre fundo claro (areia clara ou branco) */
.botao-fantasma {
  background-color: transparent;
  border-color: var(--uso-botao-fantasma-borda);
  color: var(--uso-botao-fantasma-texto);
}

.botao-fantasma:hover:not(:disabled, [aria-disabled="true"]),
.botao-fantasma.estado-passar {
  background-color: var(--uso-botao-fantasma-fundo-passar);
}

.botao-fantasma:active:not(:disabled, [aria-disabled="true"]),
.botao-fantasma.estado-pressionado {
  background-color: var(--uso-botao-fantasma-fundo-pressionado);
  transform: translateY(1px);
}

.botao:disabled,
.botao[aria-disabled="true"] {
  opacity: var(--opacidade-desabilitado);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- campo de formulario */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  margin-bottom: var(--espaco-16);
}

.campo-rotulo {
  font-family: var(--fonte-texto);
  font-size: var(--tamanho-pequeno);
  font-weight: var(--peso-seminegrito);
  color: var(--uso-texto);
}

.campo-entrada {
  width: 100%;
  min-height: var(--controle-altura);
  padding: var(--espaco-12) var(--espaco-16);
  border: 1px solid var(--uso-borda-campo);
  border-radius: var(--raio-controle);
  background-color: var(--uso-fundo-cartao);
  color: var(--uso-texto);
  font-family: inherit;
  font-size: var(--tamanho-texto); /* 16 px: o celular nao amplia a tela ao tocar no campo */
  line-height: var(--altura-linha-texto);
  transition: border-color var(--movimento-rapido) var(--movimento-curva);
}

.campo-entrada::placeholder {
  color: var(--uso-texto-secundario);
  opacity: 1;
}

.campo-entrada:hover:not(:disabled),
.campo-entrada.estado-passar {
  border-color: var(--uso-texto);
}

.campo-entrada[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--uso-erro-texto);
  padding: calc(var(--espaco-12) - 1px) calc(var(--espaco-16) - 1px);
}

.campo-entrada:disabled {
  opacity: var(--opacidade-desabilitado);
  cursor: not-allowed;
}

textarea.campo-entrada {
  min-height: calc(2 * var(--controle-altura));
  resize: vertical;
}

.campo-ajuda {
  margin: 0;
  font-size: var(--tamanho-pequeno);
  color: var(--uso-texto-secundario);
}

/* o erro diz o problema e o que fazer, com icone e texto, nunca so cor */
.campo-erro {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-8);
  margin: 0;
  font-size: var(--tamanho-pequeno);
  font-weight: var(--peso-seminegrito);
  color: var(--uso-erro-texto);
}

/* ---------------------------------------------------------------- cartoes */

.cartao {
  --link-cor: var(--uso-link);
  --foco-cor: var(--uso-foco);
  padding: var(--espaco-24);
  border-radius: var(--raio-cartao);
  background-color: var(--uso-fundo-cartao);
  color: var(--uso-texto);
  box-shadow: var(--sombra-cartao);
}

.cartao-sabor {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-12);
  padding: var(--espaco-16);
}

/* foto quadrada recortada sobre areia clara; ate a Etapa 2, o espaco reservado */
.cartao-sabor-foto {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  padding: var(--espaco-16);
  border-radius: var(--raio-controle);
  background-color: var(--uso-fundo);
  color: var(--uso-texto-secundario);
  font-size: var(--tamanho-pequeno);
  text-align: center;
}

.cartao-sabor-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cartao-sabor-nome {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-seminegrito);
  font-size: var(--tamanho-titulo-3);
  line-height: var(--altura-linha-titulo);
}

.cartao-sabor-descricao {
  margin: 0;
}

.cartao-sabor-preco {
  margin: 0;
  font-weight: var(--peso-seminegrito);
  font-variant-numeric: tabular-nums;
  color: var(--uso-texto-forte);
}

.selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------- pilulas e selos */

.pilula {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-8);
  padding: var(--espaco-4) var(--espaco-12);
  border: 1px solid transparent; /* aparece no modo de alto contraste do Windows */
  border-radius: var(--raio-pilula);
  font-size: var(--tamanho-pequeno);
  font-weight: var(--peso-seminegrito);
  line-height: 1.2;
  white-space: nowrap;
}

.selo-alergeno {
  background-color: var(--uso-alergeno-fundo);
  color: var(--uso-alergeno-texto);
}

/* estado do pedido: sempre com o texto do estado; o ponto e so enfeite */
.pilula-estado::before {
  content: "";
  width: var(--espaco-8);
  height: var(--espaco-8);
  border-radius: var(--raio-pilula);
  background-color: currentColor;
}

.pilula-novo {
  background-color: var(--uso-pilula-novo-fundo);
  color: var(--uso-pilula-novo-texto);
}

.pilula-pago {
  background-color: var(--uso-pilula-pago-fundo);
  color: var(--uso-pilula-pago-texto);
}

.pilula-em-producao {
  background-color: var(--uso-pilula-em-producao-fundo);
  color: var(--uso-pilula-em-producao-texto);
}

.pilula-pronto {
  background-color: var(--uso-pilula-pronto-fundo);
  color: var(--uso-pilula-pronto-texto);
}

.pilula-saiu {
  background-color: var(--uso-pilula-saiu-fundo);
  color: var(--uso-pilula-saiu-texto);
}

.pilula-entregue {
  background-color: var(--uso-pilula-entregue-fundo);
  color: var(--uso-pilula-entregue-texto);
}

.pilula-cancelado {
  background-color: var(--uso-pilula-cancelado-fundo);
  color: var(--uso-pilula-cancelado-texto);
}

.pilula-risco-baixo {
  background-color: var(--uso-sucesso-fundo);
  color: var(--uso-sucesso-texto);
}

.pilula-risco-medio {
  background-color: var(--uso-aviso-fundo);
  color: var(--uso-aviso-texto);
}

.pilula-risco-alto {
  background-color: var(--uso-erro-fundo);
  color: var(--uso-erro-texto);
}

/* ---------------------------------------------------------------- sistema interno */

.sistema {
  font-family: var(--fonte-sistema);
  background-color: var(--uso-fundo-cartao);
  color: var(--uso-texto);
}

.sistema h1,
.sistema h2,
.sistema h3 {
  font-family: var(--fonte-sistema);
  font-weight: var(--peso-seminegrito);
}

.cartao-indicador {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  font-family: var(--fonte-sistema);
}

.indicador-rotulo {
  margin: 0;
  font-size: var(--tamanho-pequeno);
  font-weight: var(--peso-medio);
  color: var(--uso-texto-secundario);
}

.indicador-valor {
  margin: 0;
  font-size: var(--tamanho-titulo-2);
  font-weight: var(--peso-seminegrito);
  line-height: var(--altura-linha-titulo);
  font-variant-numeric: tabular-nums;
  color: var(--uso-texto-forte);
}

/* tendencia: seta e texto, nunca so cor; sem classe, neutra */
.indicador-tendencia {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-4);
  margin: 0;
  font-size: var(--tamanho-pequeno);
  font-weight: var(--peso-medio);
  color: var(--uso-texto-secundario);
}

.tendencia-boa {
  color: var(--uso-tendencia-boa);
}

.tendencia-ruim {
  color: var(--uso-tendencia-ruim);
}

.tabela-rolagem {
  overflow-x: auto;
  border-radius: var(--raio-cartao);
  background-color: var(--uso-fundo-cartao);
  box-shadow: var(--sombra-cartao);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fonte-sistema);
  font-size: var(--tamanho-pequeno);
  color: var(--uso-texto);
  background-color: var(--uso-fundo-cartao);
}

.tabela th,
.tabela td {
  height: var(--tabela-linha);
  padding: var(--espaco-8) var(--espaco-12);
  border-bottom: 1px solid var(--uso-divisoria);
  text-align: left;
  vertical-align: middle;
}

.tabela th {
  font-weight: var(--peso-seminegrito);
  background-color: var(--uso-fundo);
}

.tabela tbody tr:last-child td {
  border-bottom: 0;
}

.tabela tbody tr:hover,
.tabela tbody tr.estado-passar {
  background-color: var(--uso-fundo);
}

.tabela .tabela-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* cartao de aprovacao: o que, por que, dados, risco e prazo; so o clique do Thiago aprova (Etapa 3) */
.cartao-aprovacao {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-16);
  font-family: var(--fonte-sistema);
}

.aprovacao-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-8);
}

.aprovacao-titulo {
  margin: 0;
  font-family: var(--fonte-sistema);
  font-size: var(--tamanho-subtitulo);
  font-weight: var(--peso-seminegrito);
  line-height: var(--altura-linha-titulo);
  color: var(--uso-texto-forte);
}

.aprovacao-dados {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--espaco-8) var(--espaco-16);
  margin: 0;
}

.aprovacao-dados dt {
  font-weight: var(--peso-seminegrito);
  color: var(--uso-texto-secundario);
}

.aprovacao-dados dd {
  margin: 0;
}

.aprovacao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-12);
}

/* barra lateral no computador (a partir de 960 px) e barra de abas embaixo no celular: quem posiciona e o
   layout do sistema na Etapa 3 */
.barra-lateral {
  padding: var(--espaco-16);
  background-color: var(--uso-barra-lateral-fundo);
  color: var(--uso-barra-lateral-texto);
  font-family: var(--fonte-sistema);
}

.barra-lateral-lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.barra-lateral-item {
  display: flex;
  align-items: center;
  gap: var(--espaco-12);
  min-height: var(--toque-minimo);
  padding: var(--espaco-8) var(--espaco-12);
  border-radius: var(--raio-controle);
  color: var(--uso-barra-lateral-texto);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background-color var(--movimento-rapido) var(--movimento-curva);
}

.barra-lateral-item:hover,
.barra-lateral-item.estado-passar {
  background-color: var(--uso-barra-lateral-fundo-passar);
}

/* depois do :hover, para o item atual nao perder o contraste com o mouse em cima */
.barra-lateral-item[aria-current="page"] {
  background-color: var(--uso-barra-lateral-fundo-ativo);
  color: var(--uso-barra-lateral-texto-ativo);
  font-weight: var(--peso-seminegrito);
}

.barra-abas {
  display: flex;
  gap: var(--espaco-4);
  padding: var(--espaco-4) var(--espaco-8);
  border-top: 1px solid var(--uso-barra-abas-borda);
  background-color: var(--uso-barra-abas-fundo);
  font-family: var(--fonte-sistema);
}

.barra-abas-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-4);
  min-width: var(--toque-minimo);
  min-height: var(--toque-minimo);
  padding: var(--espaco-4);
  border-radius: var(--raio-controle);
  color: var(--uso-barra-abas-texto);
  font-size: var(--tamanho-legenda);
  font-weight: var(--peso-medio);
  text-decoration: none;
}

.barra-abas-item:hover,
.barra-abas-item.estado-passar {
  color: var(--uso-barra-abas-texto-ativo);
}

.barra-abas-item[aria-current="page"] {
  color: var(--uso-barra-abas-texto-ativo);
  font-weight: var(--peso-seminegrito);
  box-shadow: inset 0 3px 0 var(--uso-barra-abas-texto-ativo);
}

/* ---------------------------------------------------------------- alertas e icones */

/* alerta: icone, titulo e texto, nunca so cor */
.alerta {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-12);
  margin: 0 0 var(--espaco-16);
  padding: var(--espaco-16);
  border-left: 4px solid currentColor;
  border-radius: var(--raio-controle);
  animation: entrada-alerta var(--movimento-normal) var(--movimento-curva);
}

.alerta-titulo {
  margin: 0 0 var(--espaco-4);
  font-weight: var(--peso-seminegrito);
}

.alerta p {
  margin: 0;
}

.alerta-icone {
  margin-top: 2px;
}

/* dentro do alerta, link e foco na cor do texto dele (sublinhado, para nao depender so da cor) */
.alerta-sucesso {
  --link-cor: var(--uso-sucesso-texto);
  --foco-cor: var(--uso-sucesso-texto);
  background-color: var(--uso-sucesso-fundo);
  color: var(--uso-sucesso-texto);
}

.alerta-erro {
  --link-cor: var(--uso-erro-texto);
  --foco-cor: var(--uso-erro-texto);
  background-color: var(--uso-erro-fundo);
  color: var(--uso-erro-texto);
}

.alerta-aviso {
  --link-cor: var(--uso-aviso-texto);
  --foco-cor: var(--uso-aviso-texto);
  background-color: var(--uso-aviso-fundo);
  color: var(--uso-aviso-texto);
}

.alerta-informacao {
  --link-cor: var(--uso-informacao-texto);
  --foco-cor: var(--uso-informacao-texto);
  background-color: var(--uso-informacao-fundo);
  color: var(--uso-informacao-texto);
}

@keyframes entrada-alerta {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* icone de traco de 2 px e cantos redondos, na cor do texto; a biblioteca de icones e do plano da Etapa 2 */
.icone {
  flex: none;
  width: var(--espaco-24);
  height: var(--espaco-24);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- movimento */

@media (prefers-reduced-motion: reduce) {
  :root {
    --movimento-rapido: 0ms;
    --movimento-normal: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}