/* UNRELEASED */

.unreleased {
  color: hsl(0, 100%, 90%);
  background-color: hsl(0, 100%, 30%);
  border: hsl(0, 100%, 50%) 1px solid;
  border-radius: 5px;
  padding: 0.5em;
  margin: 1em 0;
  font: 400 0.9rem/0.9 'IBM Plex Sans Condensed', sans-serif;
}

.unreleased a {
  color: inherit;
}

/* ALPHA */

.alpha {
  color: hsl(0, 0%, 85%);
  background-color: hsl(0, 0%, 15%);
  border: hsl(0, 0%, 50%) 1px solid;
  border-radius: 5px;
  padding: 0.5em;
  margin: 1em 0;
  font: 400 0.9rem/0.9 'IBM Plex Sans Condensed', sans-serif;
}

.alpha a {
  color: inherit;
}

/* BETA */

.beta {
  background-color: hsl(0, 0%, 75%);
  color: hsl(0, 0%, 25%);
  border: hsl(0, 0%, 50%) 1px solid;
  border-radius: 5px;
  padding: 0.5em;
  margin: 1em 0;
  font: 400 0.8rem/0.8 'IBM Plex Sans Condensed', sans-serif;
}

/* BOTÃO TEMA ESCURO */
/* #botao-tema {
  display: block;
  position: fixed;
  margin-left: -120px;
  margin-top: -40px;
  width: 240px;
  padding: 5px;
  left: 50%;
  font: 300 1.0rem/1.0 'PT Root UI Web VF', sans-serif;
  font-variation-settings: "wght" 300;
  color: white;
  background-color: hsl(0, 0%, 30%);
  border: 1px solid hsl(0, 0%, 70%);
  cursor: pointer;
  text-decoration: none;
  transition-duration: 0.20s;
  z-index: 99;
}

#botao-tema:hover {
  font-weight: bold;
  font-variation-settings: "wght" 700;
  background-color: hsl(0, 0%, 20%);
  box-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
}
*/

/* FALTA COISA */
.falta {
  border: 1px solid #808080;
  color: #808080;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  text-indent: 0;
  text-align: center;
  padding: 0.25em 0.5em;
  display: inline-block;
  margin: 0.25em;
  font-size: 90%;
}

.falta::before {
  content: "⚠  ";
  margin-right: 0.2em;
}

.falta::after {
  content: "  ⚠";
  margin-left: 0.2em;
}

/* BOTÕES DISLEXIA */
.atkinson {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}

.opendyslexic {
  font-family: 'OpenDyslexic', sans-serif !important;
}

.comicsans {
  font-family: 'Comic Sans MS', sans-serif !important;
}


/* NAV RODAPÉ */
/* Grid */
.nav-rodape {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 2fr 1fr;
  gap: 0;
  position: fixed;
  bottom: 0px;
  margin: auto;
  left: 1rem;
  right: 1rem;
  max-width: 720px;
  z-index: 99;
  text-align: center;
  font-size: 0.95rem;
  line-height: 0.95;
  font-family: 'PT Root UI Web VF', sans-serif;
  font-variation-settings: "wght" 400;
  height: 4rem;
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  --bordas-nav: 1px solid var(--cor-texto);
  border-top: var(--bordas-nav);
  border-left: var(--bordas-nav);
  border-right: var(--bordas-nav);
  box-shadow: /*inset*/ 0px 0px 10px 0px rgba(128, 128, 128, 0.35);
}

.nav-rodape-sumario {
  grid-template-rows: 100%;
  height: 1.5rem;
}

.linha-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-items: stretch;
  align-items: center;
}

.nav-rodape a.anterior,
.nav-rodape a.proximo,
.nav-rodape a.unidade,
.nav-rodape a.sumario,
.nav-rodape a.botao-tema {
  flex-grow: 1;
}

.nav-rodape a {
  text-decoration: none;
  background-color: inherit;
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  cursor: pointer;
  align-content: center;
  align-self: center;
  padding: 0.25em 0.75em;
  box-sizing: border-box;
}

.nav-rodape a:hover {
  font-variation-settings: "wght" 900;
  background-color: var(--cor-texto);
  color: var(--cor-fundo);
}

@media (max-width: 450px) {
  .nav-rodape {
    font-size: 0.9rem;
  }

  .nav-rodape a {
    padding: 0.25em 0.25em;
    hyphens: auto;
  }
}

.nav-rodape a.anterior,
.nav-rodape a.proximo,
.nav-rodape a.unidade {
  height: 2.5rem;
}
.nav-rodape a.sumario,
.nav-rodape a.botao-tema {
  height: 1.5rem;
}

.nav-rodape a.anterior,
.nav-rodape a.proximo {
  display: flex;
  width: 100%;
  text-align: left;
  gap: 0.25em;
  order: 1;
  justify-content: flex-start;
  text-wrap: balance;
}

.nav-rodape a.anterior {
  border-right: var(--bordas-nav);
  text-align: left;
  order: 1;
  justify-content: flex-start;
}

.nav-rodape a.proximo {
  text-align: right;
  order: 3;
  justify-content: flex-end;
}

.nome-anterior, .nome-proximo {
  align-content: center;
  text-overflow: ellipsis;
  display: block;
  max-height: 100%;
  max-width: 100%;
}

.nav-rodape .seta-anterior,
.nav-rodape .seta-proximo {
  flex-grow:  0;
  align-content: center;
  text-align:  center;
  float: left;
}
.nav-rodape .seta-anterior:before {
  content: "←";
}

.nav-rodape .seta-proximo:before {
  content: "→";
}

.nav-rodape a.unidade {
  border-right: var(--bordas-nav);
  width: 100%;
  order: 2;
  text-wrap: balance;
}

.nav-rodape a.unidade::before {
  content: "↑ ";
}

.nav-rodape a.sumario {
  border-top: var(--bordas-nav);
  border-right: var(--bordas-nav);
  float: left;
  bottom: 0;
  width: 100%;
  order: 1;
}

.nav-rodape a.sumario::before {
  content: "↑↑ ";
}

.nav-rodape a.botao-tema {
  border-top: var(--bordas-nav);
  float: left;
  bottom: 0;
  width: 100%;
  order: 2;
}
.nav-rodape a.botao-tema::before {
  content: "◑ ";
}
.nav-rodape-sumario a.botao-tema {
  border-top: none;
}

/* NAV BORDAS */
.nav-bordas a {
  text-decoration: none;
  background: none;
  text-shadow: none;
  color: hsl(0, 0%, 20%);
}

.nav-bordas a:hover {
  color: hsl(0, 0%, 50%);
  background-color: hsl(0, 0%, 70%);
}

a.anterior-borda,
a.proximo-borda {
  font-size: 1rem;
  text-align: center;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1em;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

a.anterior-borda .content,
a.proximo-borda .content {
  display: inline-block;
}

a.anterior-borda {
  left: 0;
}

a.proximo-borda {
  right: 0;
}

/* BACKUP NAV
/* NAV RODAPÉ
nav.nav-rodape {
  position: fixed;
  bottom: 0px;
  margin: auto;
  left: 1rem;
  right: 1rem;
  max-width: 720px;
  display: block;
  z-index: 99;
  background-color:  hsl(0, 0%, 95%);
  text-align: center;
  font: 400 0.95rem/0.95 'PT Root UI Web VF', sans-serif;
  font-variation-settings: "wght" 300;
}

nav.nav-rodape a {
  text-decoration: none;
  color: hsl(0, 0%, 20%);
  cursor: pointer;
  transition-duration: 0.20s;
}

nav.nav-rodape a:hover {
  font-weight: bold;
  font-variation-settings: "wght" 700;
  background-color: hsl(0, 0%, 10%);
  color: hsl(0, 0%, 90%);
}

nav.nav-rodape a.anterior,
nav.nav-rodape a.proximo,
nav.nav-rodape a.unidade,
nav.nav-rodape a.sumario {
  display: block;
  align-content: center;
  color: white;
  padding: 0.25em 0.75em;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 40px;
}

@media (max-width: 450px) {
  nav.nav-rodape a.anterior,
  nav.nav-rodape a.proximo,
  nav.nav-rodape a.unidade,
  nav.nav-rodape a.sumario {
    padding: 0.25em 0.25em;
    hyphens: auto;
  }
}

nav.nav-rodape a.anterior {
  background-color: hsl(0, 0%, 75%);
  color: hsl(0, 0%, 25%);
  border-right: hsl(0, 0%, 50%) 0.5px solid;
  width: calc(100%/3);
  float: left;
  text-align: left;
}

nav.nav-rodape a.proximo {
  background-color: hsl(0, 0%, 75%);
  color: hsl(0, 0%, 25%);
  border-left: hsl(0, 0%, 50%) 0.5px solid;
  width: calc(100%/3);
  float: right;
  text-align: right;
}

nav.nav-rodape a.anterior::before,
nav.nav-rodape a.proximo::before {
  height: 100%;
  align-content: center;
  align-self: center;
  width: 1em;
  text-align: center;
}

nav.nav-rodape a.anterior::before {
  content: "←";
  float: left;
  margin-right: 0.25em;
}

nav.nav-rodape a.proximo::before {
  content: "→";
  float: right;
  margin-left: 0.25em;
}

nav.nav-rodape a.unidade {
  background-color: hsl(0, 0%, 25%);
  color: hsl(0, 0%, 75%);
  float: left;
  bottom: 0;
  width: calc(100%/3);
}

nav.nav-rodape a.unidade::before {
  content: "↑ ";
}

nav.nav-rodape a.sumario {
  background-color: hsl(0, 0%, 15%);
  color: hsl(0, 0%, 85%);
  float: left;
  bottom: 0;
  width: 100%;
}
nav.nav-rodape a.sumario::before {
  content: "↑↑ ";
}

/* NAV BORDAS
nav.nav-bordas a {
  text-decoration: none;
  background: none;
  text-shadow: none;
  color: hsl(0, 0%, 20%);
}

nav.nav-bordas a:hover {
  color: hsl(0, 0%, 50%);
  background-color: hsl(0, 0%, 70%);
}

a.anterior-borda,
a.proximo-borda {
  font-size: 1rem;
  text-align: center;
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1em;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

a.anterior-borda .content,
a.proximo-borda .content {
  display: inline-block;
}

a.anterior-borda {
  left: 0;
}

a.proximo-borda {
  right: 0;
}
*/

/* FIGURA PROVISÓRIA */
.prov-fig {
  background-color: hsla(0, 0%, 0%, 0.20);
  margin: 0.5em 0;
  padding: 0.5em;
  font-size: 90%;
  line-height: 1.05;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  overflow-x: hidden;
}