/* Estrutura, tipografia, navegação e acessibilidade do painel. */
:root {
  --fundo: #151515;

  --superficie: #1d1d1d;

  --linha: #3a3a3a;

  --texto: #f7f7f5;

  --muted: #c2c2bc;

  --amarelo: #ffbb34;

  --erro: #ffaaaa;

  --raio: 8px;

}
* {
  box-sizing: border-box;

}
html {
  background: var(--fundo);

  color: var(--texto);

  font: 16px/1.5 "Inter", system-ui, sans-serif;

  scroll-padding-top: 96px;

}
body {
  margin: 0;

  min-width: 320px;

}
button, input, select, textarea {
  font: inherit;

  min-height: 44px;

}
button {
  cursor: pointer;

}
a {
  color: inherit;

  display: inline-flex;

  align-items: center;

  min-height: 44px;

}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--amarelo);

  outline-offset: 3px;

}
.pular {
  position: fixed;

  top: -80px;

  left: 12px;

  z-index: 80;

  padding: 10px;

  background: var(--amarelo);

  color: #111;

}
.pular:focus {
  top: 12px;

}
.faixas {
  position: sticky;

  top: 0;

  z-index: 30;

}
.faixa {
  min-height: 31px;

  padding: 5px 16px;

  background: var(--amarelo);

  color: #17120a;

  font-size: 13px;

  font-weight: 700;

  text-align: center;

}
.lateral {
  position: fixed;

  inset: 31px auto 0 0;

  z-index: 20;

  display: flex;

  flex-direction: column;

  width: 232px;

  padding: 20px 12px;

  background: #111;

  border-right: 1px solid var(--linha);

}
.marca {
  display: flex;

  align-items: center;

  gap: 10px;

  min-height: 44px;

  text-decoration: none;

  font: 600 17px "Poppins", "Inter", system-ui, sans-serif;

}
.marca span {
  display: grid;

  width: 32px;

  height: 32px;

  place-items: center;

  border: 1px solid var(--amarelo);

  color: var(--amarelo);

}
.nav-principal {
  display: grid;

  gap: 4px;

  margin-top: 22px;

}
.nav-principal a, .nav-inferior a {
  display: flex;

  align-items: center;

  gap: 8px;

  padding: 8px 12px;

  text-decoration: none;

  color: var(--muted);

  border-radius: var(--raio);

}
.nav-principal a[aria-current="page"], .nav-inferior a[aria-current="page"] {
  background: #292929;

  color: var(--texto);

}
.nav-rodape {
  margin-top: auto;

}
.nav-rodape a {
  display: flex;

  align-items: center;

  padding: 8px 12px;

  color: var(--muted);

}
.contador {
  margin-left: auto;

  color: var(--amarelo);

}
.topo {
  position: sticky;

  top: 31px;

  z-index: 15;

  display: flex;

  height: 56px;

  margin-left: 232px;

  padding: 6px 36px;

  align-items: center;

  justify-content: space-between;

  background: #111;

  border-bottom: 1px solid var(--linha);

}
.marca-movel {
  display: none;

}
.botao-menu {
  display: none;

}
.titulo-rota {
  font: 600 17px "Poppins", "Inter", system-ui, sans-serif;

}
.conteudo {
  min-height: calc(100dvh - 87px);

  max-width: 1440px;

  margin-left: 232px;

  padding: 36px;

  scroll-margin-top: 96px;

}
.nav-inferior {
  display: none;

}
.cabecalho-pagina {
  display: flex;

  align-items: flex-start;

  gap: 16px;

  justify-content: space-between;

  margin-bottom: 28px;

}
h1, h2 {
  font-family: "Poppins", "Inter", system-ui, sans-serif;

}
h1 {
  margin: 0;

  font-size: 26px;

} h2 {
  font-size: 18px;

}
.cabecalho-pagina p, .meta {
  color: var(--muted);

}
.cartao, .vazio, .erro, .status-global {
  padding: 20px;

  border: 1px solid var(--linha);

  border-radius: var(--raio);

  background: var(--superficie);

}
.cartao p, .janela p {
  overflow-wrap: anywhere;

}
.status-global {
  margin: 0 0 16px;

  border-color: var(--amarelo);

  color: #fff0c5;

}
.grade {
  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 16px;

}
.col-5 {
  grid-column: span 5;

}
.col-7 {
  grid-column: span 7;

}
.linha {
  display: flex;

  min-height: 64px;

  gap: 12px;

  align-items: center;

  justify-content: space-between;

  padding: 10px 0;

  border-top: 1px solid var(--linha);

}
.linha:first-child {
  border-top: 0;

}
.linha-texto {
  min-width: 0;

  overflow-wrap: anywhere;

}
.link-linha {
  display: grid;

  text-decoration: none;

}
.acoes {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}
.etiqueta {
  padding: 3px 7px;

  border: 1px solid var(--linha);

  border-radius: 4px;

  color: var(--muted);

  white-space: nowrap;

}
.primario, .secundario, .perigo {
  padding: 8px 14px;

  border-radius: 6px;

  font-weight: 700;

}
.primario {
  border: 1px solid var(--amarelo);

  background: var(--amarelo);

  color: #17120a;

}
.secundario {
  border: 1px solid var(--linha);

  background: transparent;

  color: var(--texto);

}
.perigo {
  border: 1px solid #9a4444;

  background: transparent;

  color: var(--erro);

}
.texto-exato {
  padding: 15px;
  min-width: 0;


  overflow-wrap: anywhere;

  border: 1px solid var(--linha);

  background: #111;

  white-space: pre-wrap;

}
input, textarea {
  width: 100%;

  padding: 9px;

  border: 1px solid #777;

  border-radius: 6px;

  background: #111;

  color: var(--texto);

}
textarea {
  min-height: 96px;

}
.erro-campo {
  color: var(--erro);

}
.modal {
  position: fixed;

  inset: 0;

  display: grid;

  place-items: center;

  padding: 16px;

  background: rgb(0 0 0 / .7);

}
.janela {
  width: min(560px, 100%);

  max-height: 90dvh;

  overflow: auto;

  padding: 24px;

  border: 1px solid var(--linha);

  border-radius: var(--raio);

  background: var(--superficie);

}
@media (max-width: 767px) {
  .lateral {
    display: none;

  }
.topo {
    margin-left: 0;

    padding: 6px 16px;

  }
.marca-movel, .botao-menu {
    display: flex;

  }
.botao-menu {
    align-items: center;

    border: 1px solid var(--linha);

    background: transparent;

    color: var(--texto);

  }
.lateral.aberta {
    display: flex;

    width: 100%;

  }
.conteudo {
    margin-left: 0;

    padding: 24px 16px 100px;

  }
.nav-inferior {
    position: fixed;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 20;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    background: #111;

    border-top: 1px solid var(--linha);

  }
.nav-inferior a {
    min-height: 56px;

    justify-content: center;

    padding: 4px;

    font-size: 11px;

    text-align: center;

  }
.grade {
    grid-template-columns: 1fr;

  }
.col-5, .col-7 {
    grid-column: 1;

  }
.cabecalho-pagina {
    display: block;

  }
.cabecalho-pagina .acoes {
    margin-top: 16px;

  }
}