/* layout.css
   Casca do sistema: topo, menu lateral (computador e tablet), barra inferior (celular) e conteudo.
   Computador: a partir de 1024 px. Tablet: 768 a 1023 px (menu so com icones). Celular: ate 767 px. */

:root {
  --altura-topo: 64px;
  --altura-topo-celular: 56px;
  --largura-menu: 248px;
  --largura-menu-recolhido: 72px;
  --altura-barra: 64px;
}

.casca {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fundo-bloco);
}

/* ---------- Topo ---------- */
.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: var(--e4);
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}

.topo-computador {
  height: calc(var(--altura-topo) + var(--seguro-topo));
  padding: var(--seguro-topo) var(--e5) 0;
}

.topo-celular {
  display: none;
  height: calc(var(--altura-topo-celular) + var(--seguro-topo));
  padding: var(--seguro-topo) var(--e3) 0;
}

.topo-marca {
  display: flex;
  align-items: center;
  padding: var(--e1);
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--raio-pequeno);
}

.topo-logo {
  width: 150px;
}

.topo-logo-cj {
  width: 34px;
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: var(--e1);
  margin-left: auto;
}

/* Seletor da festa aberta */
.seletor-evento {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0 auto;
  max-width: 420px;
  min-width: 0;
  padding: var(--e2) var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-botao);
  background: var(--fundo);
  color: var(--texto);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--rapido) ease, background var(--rapido) ease;
}

.seletor-evento:hover {
  border-color: var(--laranja-borda);
  background: var(--laranja-suave);
}

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

.seletor-textos strong {
  font-family: var(--fonte-titulo);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seletor-textos span {
  font-size: 12px;
  color: var(--texto-suave);
  white-space: nowrap;
}

.seletor-celular {
  display: flex;
  align-items: center;
  gap: var(--e1);
  min-width: 0;
  flex: 1;
  padding: var(--e2);
  border: 0;
  background: none;
  color: var(--texto);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}

.seletor-celular-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Menu lateral ---------- */
.menu-lateral {
  position: fixed;
  top: calc(var(--altura-topo) + var(--seguro-topo));
  bottom: 0;
  left: 0;
  z-index: 200;
  width: var(--largura-menu);
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  border-right: 1px solid var(--borda);
  transition: width var(--medio) ease;
}

.menu-lateral .menu-lista {
  flex: 1;
  overflow-y: auto;
  padding: var(--e3) var(--e3) var(--e4);
}

.menu-grupo + .menu-grupo {
  margin-top: var(--e3);
}

.menu-grupo-titulo {
  margin: 0 0 var(--e1);
  padding: 0 var(--e3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  white-space: nowrap;
}

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--e3);
  border: 0;
  border-radius: var(--raio-pequeno);
  background: none;
  color: var(--texto);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--rapido) ease, color var(--rapido) ease;
}

.menu-item:hover {
  background: var(--fundo-bloco);
}

.menu-item .icone {
  flex-shrink: 0;
  color: var(--texto-suave);
}

.menu-item-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-item-ativo {
  background: var(--laranja-suave);
  color: var(--laranja-escuro);
  font-weight: 600;
}

.menu-item-ativo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--degrade);
}

.menu-item-ativo .icone {
  color: var(--laranja);
}

.menu-lateral-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e2) var(--e3) calc(var(--e2) + var(--seguro-baixo));
  border-top: 1px solid var(--fundo-separacao);
}

.menu-versao {
  font-size: 12px;
  color: var(--texto-fraco);
}

/* Menu recolhido: so os icones */
.casca-recolhida .menu-lateral {
  width: var(--largura-menu-recolhido);
}

.casca-recolhida .menu-grupo-titulo,
.casca-recolhida .menu-item-nome,
.casca-recolhida .menu-versao {
  display: none;
}

.casca-recolhida .menu-item {
  justify-content: center;
  padding: 0;
}

.casca-recolhida .menu-lateral-rodape {
  justify-content: center;
}

/* ---------- Conteudo ---------- */
.conteudo {
  min-height: 100vh;
  padding: calc(var(--altura-topo) + var(--seguro-topo) + var(--e5)) var(--e6) var(--e7);
  margin-left: var(--largura-menu);
  transition: margin-left var(--medio) ease;
  outline: none;
}

.casca-recolhida .conteudo {
  margin-left: var(--largura-menu-recolhido);
}

.conteudo > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.conteudo-entrando {
  animation: aparecer var(--medio) ease;
}

/* ---------- Barra inferior do celular ---------- */
.barra-celular {
  display: none;
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) and (min-width: 768px) {
  .menu-lateral {
    width: var(--largura-menu-recolhido);
  }
  .menu-grupo-titulo,
  .menu-item-nome,
  .menu-versao,
  .menu-recolher {
    display: none;
  }
  .menu-item {
    justify-content: center;
    padding: 0;
  }
  .menu-lateral-rodape {
    justify-content: center;
  }
  .conteudo,
  .casca-recolhida .conteudo {
    margin-left: var(--largura-menu-recolhido);
    padding-left: var(--e5);
    padding-right: var(--e5);
  }
  .topo-logo {
    width: 120px;
  }
}

/* ---------- Celular ---------- */
@media (max-width: 767px) {
  .topo-computador,
  .menu-lateral {
    display: none;
  }
  .topo-celular {
    display: flex;
    gap: var(--e2);
  }
  .conteudo,
  .casca-recolhida .conteudo {
    margin-left: 0;
    padding: calc(var(--altura-topo-celular) + var(--seguro-topo) + var(--e4)) var(--e4) calc(var(--altura-barra) + var(--seguro-baixo) + var(--e6));
  }
  .barra-celular {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: calc(var(--altura-barra) + var(--seguro-baixo));
    padding-bottom: var(--seguro-baixo);
    background: var(--fundo);
    border-top: 1px solid var(--borda);
  }
}

.barra-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.barra-item-ativo {
  color: var(--laranja-escuro);
}

.barra-central {
  justify-self: center;
  width: 56px;
  height: 56px;
  margin-top: -22px;
  border-radius: 50%;
  background: var(--degrade);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(225, 65, 1, 0.35);
  transition: transform var(--rapido) ease;
}

.barra-central:active {
  transform: scale(0.94);
}

.barra-central .icone {
  width: 28px;
  height: 28px;
}

.menu-celular-conta {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
}