/*
 * Painel: estrutura (menu lateral marinho, conteúdo), dashboard e gráfico.
 * Tokens e componentes vêm de nucleo/css/hub.css, carregado antes deste arquivo.
 */

:root {
  --largura-menu: 256px;
  --cor-menu-texto: #d5e0ea; /* 9,9:1 sobre o marinho */
  --cor-menu-suave: #9fb3c4; /* 6,1:1 sobre o marinho */
  --cor-grafico: #1c9aa0; /* série única, validada (3,4:1 contra o cartão) */
  --cor-grafico-destaque: #158287;
}

/* --- Estrutura ---------------------------------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--largura-menu) minmax(0, 1fr);
  min-height: 100vh;
}

.lateral {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 16px 12px 12px;
  overflow-y: auto;
  background: var(--cor-marinho);
  color: var(--cor-menu-texto);
  scrollbar-width: thin;
  scrollbar-color: #2f5170 transparent;
}

.lateral-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 8px 14px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.lateral-marca:hover {
  color: #ffffff;
}

.lateral-marca span {
  line-height: 1.2;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-grupo {
  margin: 14px 10px 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cor-menu-suave);
}

.menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 35px;
  padding: 0 10px;
  border-radius: var(--raio-controle);
  color: var(--cor-menu-texto);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.menu a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.menu a:focus-visible,
.lateral :focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 1px;
}

.menu a[aria-current="page"] {
  background: var(--cor-primaria);
  color: var(--cor-marinho);
}

.menu .icone {
  width: 18px;
  height: 18px;
}

.menu-contador {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: var(--raio-pilula);
  background: var(--cor-destaque);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
}

.lateral-rodape {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 12px 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ambiente-atual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
  font-size: 12.5px;
  color: var(--cor-menu-suave);
}

.selo-ambiente {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: var(--raio-pilula);
  background: rgba(103, 198, 203, 0.16);
  color: #bfe9eb;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.selo-ambiente::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cor-primaria);
}

.selo-ambiente-producao {
  background: rgba(217, 19, 138, 0.18);
  color: #ffd1ec;
}

.selo-ambiente-producao::before {
  background: var(--cor-destaque);
}

.usuario-atual {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: var(--raio-controle);
  color: #ffffff;
  text-decoration: none;
}

.usuario-atual:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: #2b4d6b;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.usuario-atual-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.usuario-atual-nome {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usuario-atual-email {
  overflow: hidden;
  font-size: 12px;
  color: var(--cor-menu-suave);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.botao-sair {
  width: 100%;
  justify-content: flex-start;
  min-height: 36px;
  padding: 0 10px;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--cor-menu-texto);
  font-weight: 500;
}

.botao-sair:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.conteudo {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 40px 56px;
}

/* Barra superior: só no celular/tablet, com o botão do menu. */
.barra-topo {
  display: none;
}

.veu {
  display: none;
}

@media (max-width: 960px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    width: min(288px, 86vw);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--sombra-elevada);
  }

  body[data-menu="aberto"] .lateral {
    transform: translateX(0);
  }

  body[data-menu="aberto"] .veu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(23, 50, 74, 0.45);
  }

  .barra-topo {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 12px;
    background: var(--cor-marinho);
    color: #ffffff;
  }

  .barra-topo .lateral-marca {
    padding: 0;
  }

  .botao-menu {
    min-width: 40px;
    padding: 0;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }

  .botao-menu:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }

  .barra-topo .selo-ambiente {
    margin-left: auto;
  }

  .conteudo {
    padding: 20px 16px 40px;
  }

  h1 {
    font-size: 26px;
  }
}

/* --- Cabeçalho das páginas ---------------------------------------------------------------------------------- */
.cabecalho-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
}

.cabecalho-pagina-texto {
  min-width: 0;
}

.cabecalho-pagina h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  overflow-wrap: anywhere;
}

.subtitulo {
  margin: 6px 0 0;
  max-width: 72ch;
  color: var(--cor-texto-suave);
  font-size: 15px;
}

.cabecalho-pagina-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.secao {
  margin-top: 32px;
}

.secao > h2,
.secao-titulo {
  margin-bottom: 12px;
  font-size: 18px;
}

/* --- Filtros (uma linha acima do conteúdo que filtram) ------------------------------------------------------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.filtros .campo {
  min-width: 180px;
}

.filtros .campo-busca {
  flex: 1 1 320px;
  max-width: 480px;
}

.campo-com-icone {
  position: relative;
}

.campo-com-icone > .icone {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--cor-texto-suave);
  pointer-events: none;
}

.campo-com-icone input {
  padding-left: 38px;
}

.filtros-acoes {
  display: flex;
  gap: 8px;
}

/* Abas por link (filtro de situação) */
.abas-link {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--cor-borda);
  overflow-x: auto;
}

.abas-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  color: var(--cor-texto-suave);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.abas-link a:hover {
  color: var(--cor-texto-forte);
}

.abas-link a[aria-current="page"] {
  border-bottom-color: var(--cor-primaria);
  color: var(--cor-texto-forte);
}

/* --- Dashboard ---------------------------------------------------------------------------------------------- */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.indicador-icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria-forte);
}

.indicador-icone .icone {
  width: 17px;
  height: 17px;
}

.indicador-alerta .indicador-icone {
  background: var(--cor-perigo-suave);
  color: var(--cor-perigo);
}

.indicador-ok .indicador-icone {
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso);
}

.indicador-pendente .indicador-icone {
  background: var(--cor-pendente-suave);
  color: var(--cor-pendente);
}

.indicador-valor-texto {
  font-size: 22px;
}

.lista-decisoes,
.lista-alertas,
.lista-acoes,
.lista-status,
.lista-simples {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-decisoes li,
.lista-alertas li,
.lista-acoes li,
.lista-status li,
.lista-simples li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--cor-linha);
}

.lista-decisoes li:first-child,
.lista-alertas li:first-child,
.lista-acoes li:first-child,
.lista-status li:first-child,
.lista-simples li:first-child {
  border-top: 0;
  padding-top: 0;
}

.lista-decisoes li:last-child,
.lista-alertas li:last-child,
.lista-acoes li:last-child,
.lista-status li:last-child,
.lista-simples li:last-child {
  padding-bottom: 0;
}

.item-texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.item-titulo {
  font-weight: 600;
  color: var(--cor-texto-forte);
  overflow-wrap: anywhere;
}

a.item-titulo {
  text-decoration: none;
}

a.item-titulo:hover {
  color: var(--cor-primaria-forte);
  text-decoration: underline;
}

.item-meta {
  font-size: 13px;
  color: var(--cor-texto-suave);
}

.ponto-status {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--cor-sucesso);
}

.ponto-status-falha {
  background: var(--cor-perigo);
}

.lista-status li {
  align-items: flex-start;
}

.lista-status .ponto-status {
  margin-top: 7px;
}

/* --- Gráfico de colunas (uma série) --------------------------------------------------------------------------- */
.grafico {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 200px auto;
  column-gap: 10px;
  margin-top: 8px;
}

.grafico-eixo-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 24px;
  font-size: 12px;
  color: var(--cor-texto-suave);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.grafico-eixo-y span {
  line-height: 0;
}

.grafico-area {
  position: relative;
  border-bottom: 1px solid #c9d0d8;
  background-image: linear-gradient(var(--cor-linha) 1px, transparent 1px);
  background-size: 100% 25%;
}

.grafico-colunas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.grafico-coluna {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.grafico-barra {
  display: block;
  width: 100%;
  max-width: 24px;
  border-radius: 4px 4px 0 0;
  background: var(--cor-grafico);
  transition: background-color 0.12s ease;
}

.grafico-coluna:hover .grafico-barra {
  background: var(--cor-grafico-destaque);
}

.grafico-coluna[data-dica]:hover::after {
  bottom: calc(100% + 6px);
}

.grafico-rotulos {
  grid-column: 2;
  display: flex;
  gap: 2px;
  padding-top: 8px;
  font-size: 12px;
  color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums;
}

.grafico-rotulos span {
  flex: 1;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}

.grafico-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-bottom: 4px;
}

.grafico-resumo strong {
  display: block;
  font-size: 22px;
  color: var(--cor-texto-forte);
  letter-spacing: -0.01em;
}

.detalhes-tabela {
  margin-top: 16px;
}

.detalhes-tabela summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cor-primaria-forte);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.detalhes-tabela[open] summary {
  margin-bottom: 12px;
}

.detalhes-tabela .tabela-rolavel {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

/* --- Aprovações: antes e depois ----------------------------------------------------------------------------- */
.comparacao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.comparacao-tabela td,
.comparacao-tabela th {
  vertical-align: top;
}

.comparacao-tabela .valor-novo {
  background: var(--cor-primaria-suave);
  font-weight: 600;
  color: var(--cor-texto-forte);
}

.comparacao-tabela .valor-antigo-mudou {
  color: var(--cor-texto-suave);
  text-decoration: line-through;
  text-decoration-color: #a0a8b3;
}

@media (max-width: 720px) {
  .comparacao {
    grid-template-columns: 1fr;
  }
}

.decisao {
  border-left: 3px solid var(--cor-primaria);
}

.acoes-formulario {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

/* --- Etapas (cadastro em duas etapas) ---------------------------------------------------------------------- */
.etapas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
}

.etapas li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cor-texto-suave);
  font-size: 14px;
  font-weight: 500;
  counter-increment: etapa;
}

.etapas li::before {
  content: counter(etapa);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--cor-borda-campo);
  border-radius: 50%;
  background: var(--cor-cartao);
  font-size: 13px;
  font-weight: 700;
}

.etapas li[aria-current="step"] {
  color: var(--cor-texto-forte);
  font-weight: 600;
}

.etapas li[aria-current="step"]::before {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
  color: var(--cor-marinho);
}

.etapas li.etapa-feita::before {
  content: "✓";
  border-color: var(--cor-sucesso);
  background: var(--cor-sucesso-suave);
  color: var(--cor-sucesso);
}

/* --- Interruptor de emergência e status de conta ------------------------------------------------------------- */
.interruptor-conta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.interruptor-estado {
  display: flex;
  align-items: center;
  gap: 12px;
}

.interruptor-visual {
  position: relative;
  width: 44px;
  height: 24px;
  flex: none;
  border-radius: var(--raio-pilula);
  background: #c3cbd3;
}

.interruptor-visual::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(23, 50, 74, 0.3);
}

.interruptor-visual-ligado {
  background: var(--cor-sucesso);
}

.interruptor-visual-ligado::after {
  transform: translateX(20px);
}

/* --- Segredos e identidade visual --------------------------------------------------------------------------- */
.segredo-caixa {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.segredo-caixa textarea {
  font-family: var(--fonte-mono);
  font-size: 13.5px;
  background: #f9fafb;
}

.previa-loja {
  --cor-previa: var(--cor-primaria);
  --cor-previa-texto: var(--cor-marinho);
  max-width: 340px;
  padding: 20px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
}

.previa-loja-cartao {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-cartao);
}

.previa-loja-nome {
  font-weight: 700;
  color: var(--cor-texto-forte);
}

.previa-loja-valor {
  font-size: 22px;
  font-weight: 700;
  color: var(--cor-texto-forte);
}

.previa-loja-botao {
  display: grid;
  place-items: center;
  min-height: 40px;
  border-radius: var(--raio-controle);
  background: var(--cor-previa);
  color: var(--cor-previa-texto);
  font-size: 14px;
  font-weight: 600;
}

.logo-previa {
  max-width: 180px;
  max-height: 56px;
  object-fit: contain;
}

/* --- Página de componentes ---------------------------------------------------------------------------------- */
.amostra-cores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.amostra-cor {
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-cartao);
  font-size: 13px;
}

.amostra-cor-faixa {
  height: 56px;
}

.amostra-cor p {
  margin: 0;
  padding: 8px 12px 10px;
}

.amostra-primaria {
  background: var(--cor-primaria);
}

.amostra-destaque {
  background: var(--cor-destaque);
}

.amostra-marinho {
  background: var(--cor-marinho);
}

.amostra-texto {
  background: var(--cor-texto);
}

.amostra-texto-suave {
  background: var(--cor-texto-suave);
}

.amostra-fundo {
  background: var(--cor-fundo);
}

.amostra-cartao {
  background: var(--cor-cartao);
  border-bottom: 1px solid var(--cor-borda);
}

.amostra-borda {
  background: var(--cor-borda);
}

.tipografia-exemplo p {
  margin: 0;
}

/* --- Login e telas simples --------------------------------------------------------------------------------- */
.simples {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.tela-simples {
  display: grid;
  flex: 1;
  place-items: center;
  padding: 32px 16px;
}

.tela-simples-cartao {
  width: min(440px, 100%);
  padding: 32px;
}

.tela-simples-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--cor-texto-forte);
  font-size: 15px;
  font-weight: 700;
}

.tela-simples-cartao h1 {
  margin-bottom: 8px;
  font-size: 24px;
}

.tela-simples-cartao .formulario {
  margin-top: 20px;
}

.erro-passkey:empty {
  display: none;
}

.rodape-simples {
  padding: 16px;
  font-size: 12.5px;
  color: var(--cor-texto-suave);
  text-align: center;
}

@media print {
  .lateral,
  .barra-topo,
  .veu {
    display: none !important;
  }

  .app {
    display: block;
  }
}

/* Alturas das colunas do gráfico, em %, como classes (a CSP do painel proíbe style inline). */
.altura-0 {
  height: 0%;
}

.altura-1 {
  height: 1%;
}

.altura-2 {
  height: 2%;
}

.altura-3 {
  height: 3%;
}

.altura-4 {
  height: 4%;
}

.altura-5 {
  height: 5%;
}

.altura-6 {
  height: 6%;
}

.altura-7 {
  height: 7%;
}

.altura-8 {
  height: 8%;
}

.altura-9 {
  height: 9%;
}

.altura-10 {
  height: 10%;
}

.altura-11 {
  height: 11%;
}

.altura-12 {
  height: 12%;
}

.altura-13 {
  height: 13%;
}

.altura-14 {
  height: 14%;
}

.altura-15 {
  height: 15%;
}

.altura-16 {
  height: 16%;
}

.altura-17 {
  height: 17%;
}

.altura-18 {
  height: 18%;
}

.altura-19 {
  height: 19%;
}

.altura-20 {
  height: 20%;
}

.altura-21 {
  height: 21%;
}

.altura-22 {
  height: 22%;
}

.altura-23 {
  height: 23%;
}

.altura-24 {
  height: 24%;
}

.altura-25 {
  height: 25%;
}

.altura-26 {
  height: 26%;
}

.altura-27 {
  height: 27%;
}

.altura-28 {
  height: 28%;
}

.altura-29 {
  height: 29%;
}

.altura-30 {
  height: 30%;
}

.altura-31 {
  height: 31%;
}

.altura-32 {
  height: 32%;
}

.altura-33 {
  height: 33%;
}

.altura-34 {
  height: 34%;
}

.altura-35 {
  height: 35%;
}

.altura-36 {
  height: 36%;
}

.altura-37 {
  height: 37%;
}

.altura-38 {
  height: 38%;
}

.altura-39 {
  height: 39%;
}

.altura-40 {
  height: 40%;
}

.altura-41 {
  height: 41%;
}

.altura-42 {
  height: 42%;
}

.altura-43 {
  height: 43%;
}

.altura-44 {
  height: 44%;
}

.altura-45 {
  height: 45%;
}

.altura-46 {
  height: 46%;
}

.altura-47 {
  height: 47%;
}

.altura-48 {
  height: 48%;
}

.altura-49 {
  height: 49%;
}

.altura-50 {
  height: 50%;
}

.altura-51 {
  height: 51%;
}

.altura-52 {
  height: 52%;
}

.altura-53 {
  height: 53%;
}

.altura-54 {
  height: 54%;
}

.altura-55 {
  height: 55%;
}

.altura-56 {
  height: 56%;
}

.altura-57 {
  height: 57%;
}

.altura-58 {
  height: 58%;
}

.altura-59 {
  height: 59%;
}

.altura-60 {
  height: 60%;
}

.altura-61 {
  height: 61%;
}

.altura-62 {
  height: 62%;
}

.altura-63 {
  height: 63%;
}

.altura-64 {
  height: 64%;
}

.altura-65 {
  height: 65%;
}

.altura-66 {
  height: 66%;
}

.altura-67 {
  height: 67%;
}

.altura-68 {
  height: 68%;
}

.altura-69 {
  height: 69%;
}

.altura-70 {
  height: 70%;
}

.altura-71 {
  height: 71%;
}

.altura-72 {
  height: 72%;
}

.altura-73 {
  height: 73%;
}

.altura-74 {
  height: 74%;
}

.altura-75 {
  height: 75%;
}

.altura-76 {
  height: 76%;
}

.altura-77 {
  height: 77%;
}

.altura-78 {
  height: 78%;
}

.altura-79 {
  height: 79%;
}

.altura-80 {
  height: 80%;
}

.altura-81 {
  height: 81%;
}

.altura-82 {
  height: 82%;
}

.altura-83 {
  height: 83%;
}

.altura-84 {
  height: 84%;
}

.altura-85 {
  height: 85%;
}

.altura-86 {
  height: 86%;
}

.altura-87 {
  height: 87%;
}

.altura-88 {
  height: 88%;
}

.altura-89 {
  height: 89%;
}

.altura-90 {
  height: 90%;
}

.altura-91 {
  height: 91%;
}

.altura-92 {
  height: 92%;
}

.altura-93 {
  height: 93%;
}

.altura-94 {
  height: 94%;
}

.altura-95 {
  height: 95%;
}

.altura-96 {
  height: 96%;
}

.altura-97 {
  height: 97%;
}

.altura-98 {
  height: 98%;
}

.altura-99 {
  height: 99%;
}

.altura-100 {
  height: 100%;
}