.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

:root,
:root[data-theme="dark"] {
  --cor1: #ff007f;
  --cor2: #fff;
  --cor3: #27a4d9;
  --cor4: #daa520;
  --cor5: #139b1d;
  --cor6: #ca0065;
  --cor7: #ff4d4d;
  --cor8: #c1cbe6;
  --cor9: #2e2e2e;
  --cor10: #1f1f1f;
  --cor11: #171926;
  --cor12: #0a0c14;
  --cor13: #000;
  --cor14: #0b0c14;
  --cor15: #fff;
  --cor16: #171926;
  --cor17: #fff;
  --cor18: #ff007f;
  --cor19: #fff;
  --cor20: #ff007f;
  --cor21: rgba(0, 0, 0, 0.7);
  --cor22: #da0000;
  --cor23: rgba(10, 12, 20, 0.9);
}

:root[data-theme="light"] {
  --cor1: #8f06d1;
  --cor2: #222327;
  --cor3: #27a4d9;
  --cor4: #daa520;
  --cor5: #139b1d;
  --cor6: #5a0085;
  --cor7: #ff4d4d;
  --cor8: #757697;
  --cor9: #dcdcdc;
  --cor10: #cbcbcb;
  --cor11: #f8f8f9;
  --cor12: #edeff3;
  --cor13: #000;
  --cor14: #feffff;
  --cor15: #8f06d1;
  --cor16: #fff;
  --cor17: #e4e3ea;
  --cor18: #4b4c69;
  --cor19: #fff;
  --cor20: #dcdcdc;
  --cor21: rgba(187, 187, 187, 0.7);
  --cor22: #da0000;
  --cor23: rgba(10, 12, 20, 0.9);
}

/* Para navegadores baseados em Webkit (Chrome, Edge, Safari, Opera) */
* {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--cor8) var(--cor10);
}

::-webkit-scrollbar {
  width: 8px; /* Largura da barra */
  height: 8px; /* Altura para scroll horizontal */
}

::-webkit-scrollbar-track {
  background: #222; /* Fundo da barra */
}

::-webkit-scrollbar-thumb {
  background: #555; /* Cor do thumb (barra que arrasta) */
  border-radius: 4px; /* Bordas arredondadas */
}

::-webkit-scrollbar-thumb:hover {
  background: #777; /* Cor no hover */
}

/* INPUT */
input::-webkit-input-placeholder {
  color: var(--cor8);
  opacity: 0.5;
}

input::-moz-placeholder {
  color: var(--cor8);
  opacity: 0.5;
}

input:-ms-input-placeholder {
  color: var(--cor8);
  opacity: 0.5;
}

input::placeholder {
  color: var(--cor8);
  opacity: 0.5;
}

/* TEXTAREA */
textarea::-webkit-input-placeholder {
  color: var(--cor8);
  opacity: 0.5;
}

textarea::-moz-placeholder {
  color: var(--cor8);
  opacity: 0.5;
}

textarea:-ms-input-placeholder {
  color: var(--cor8);
  opacity: 0.5;
}

textarea::placeholder {
  color: var(--cor8);
  opacity: 0.5;
}

/* SELECT - "placeholder fake" */
select {
  color: var(--cor8);
}

select option[disabled][selected] {
  color: var(--cor8);
  opacity: 0.5;
}

.oculta {
  display: none;
}

#chat-premium {
  display: none;
}

.mTop0 {
  margin-top: 0 !important;
}

.mTop10 {
  margin-top: 10px;
}

.mTop20 {
  margin-top: 20px;
}

.esp30 {
  padding: 30px;
}

.validacao {
  padding: 0;
  color: var(--cor2);
}

.validacao p {
  display: flex;
  align-items: center;
  gap: 8px;
  /* espaço entre ícone e texto */
  margin: 8px 0;
}

.validacao svg {
  font-size: 18px;
  min-width: 18px;
}

.menu-fixo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: var(--cor12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.usuarios-grid {
  padding: 10px;
  position: relative;
  z-index: 1;
  display: flex;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--cor14);
  padding-bottom: 82px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.scroll-bloqueado {
  overflow: hidden !important;
}

.coroa {
  color: var(--cor4);
}

.verificado {
  color: var(--cor3);
}

.dourado,
.icone-coroa {
  color: var(--cor4);
}

.azul,
.icone-verificado {
  color: var(--cor3);
}

hr.divisor {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: var(--cor11);
}

input,
select,
textarea,
button {
  font-family: "Poppins", sans-serif;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 0;
}

textarea {
  resize: none;
  min-height: 120px;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
}

textarea::-webkit-scrollbar {
  width: 6px;
}

textarea::-webkit-scrollbar-track {
  background: var(--cor12);
  border-radius: 4px;
}

textarea::-webkit-scrollbar-thumb {
  background-color: var(--cor1);
  border-radius: 4px;
  border: 1px solid var(--cor12);
}

/* INÍCIO DO MODAL SWIPER */
#modalSwiper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  z-index: 99999;
  overflow: hidden;
}

#modalSwiper .swiper-slide p {
  color: var(--cor19) !important;
  padding: 20px;
}

#modalSwiper .modal-content {
  display: flex;
  height: 100%;
  width: 100%;
}

#modalSwiper .swiper-box {
  width: 65%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#modalSwiper .swiper {
  width: 90%;
  height: 80%;
}

#modalSwiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor13);
}

#modalSwiper .swiper-slide img,
#modalSwiper .swiper-slide video {
  max-height: 90%;
  max-width: 100%;
  object-fit: contain;
}

#modalSwiper .comentarios-box {
  width: 35%;
  background: var(--cor12);
  color: var(--cor2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}

#modalSwiper .comentarios-box .close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--cor8);
  cursor: pointer;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 10px;
  right: 30px;
}

#modalSwiper .comentarios-box .close-btn:hover {
  color: var(--cor2);
}

#modalSwiper .comentarios-box h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

#modalSwiper .perfil-box {
  display: flex;
  align-items: center;
  padding: 10px 0;
  color: var(--cor8);
}

#modalSwiper .perfil-box .avatar-wrapper {
  position: relative;
  margin-right: 12px;
}

#modalSwiper .perfil-box .avatar-wrapper .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  /* border: 2px solid var(--cor8);*/
}

#modalSwiper .perfil-box .avatar-wrapper .status-online {
  position: absolute;
  bottom: 4px;
  right: 10px;
  width: 12px;
  height: 12px;
  background-color: var(--cor5);
  border: 2px solid var(--cor11);
  border-radius: 50%;
}

#modalSwiper .perfil-box .perfil-info .username {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
  font-size: 14px;
  color: var(--cor2);
  line-height: 1;
}

#modalSwiper .perfil-box .perfil-info svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  display: inline-block;
}

#modalSwiper .perfil-box .perfil-info .local {
  font-size: 13px;
  color: var(--cor8);
}

#modalSwiper .comentarios-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

#modalSwiper .comentarios-content .comentarios-lista {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  margin-top: 10px;
}

#modalSwiper .comentarios-content .comentarios-lista .comentario-card {
  display: flex;
  align-items: center;
  background-color: var(--cor11);
  border-radius: 18px;
  padding: 8px 12px;
  margin-bottom: 8px;
  gap: 10px;
  position: relative;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .comentario-avatar-wrapper {
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .comentario-avatar-wrapper
  .comentario-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .comentario-avatar-wrapper
  .status-online {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: var(--cor5);
  border: 2px solid var(--cor9);
  border-radius: 50%;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .comentario-avatar-wrapper
  .comentario-conteudo {
  display: flex;
  flex-direction: column;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .comentario-conteudo
  .linha-nome
  svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  vertical-align: middle;
  height: 1em;
  width: 1em;
  margin-left: 5px;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .comentario-conteudo
  .linha-nome {
  display: flex;
  align-items: center;
  gap: 5px;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .comentario-conteudo
  .comentario-nome {
  font-weight: 700;
  font-size: 14px;
  color: var(--cor8);
  line-height: 1;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .comentario-conteudo
  .comentario-texto {
  font-size: 13px;
  color: var(--cor8);
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper
  .menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor8);
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper
  .menu-toggle:hover {
  color: var(--cor2);
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper
  .menu-toggle
  i {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  color: var(--cor8);
  display: block;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper
  .menu-icon {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
  color: var(--cinza8);
  display: block;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper
  .flame-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper
  .menu-dropdown {
  display: none;
  position: absolute;
  top: 28px;
  right: 0;
  background-color: var(--cor11);
  border: 1px solid var(--cor9);
  border-radius: 6px;
  min-width: 120px;
  padding: 0;
  list-style: none;
  z-index: 99;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper
  .menu-dropdown.ativo,
#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper
  .menu-wrapper.aberto
  .menu-dropdown {
  display: block !important;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper
  .menu-dropdown
  li {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--cor8);
  font-size: 14px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper
  .menu-dropdown
  li
  i,
#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper
  .menu-dropdown
  li
  svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  flex-shrink: 0;
}

#modalSwiper
  .comentarios-content
  .comentarios-lista
  .comentario-card
  .menu-wrapper
  .menu-dropdown
  li:hover {
  background-color: var(--cor11);
}

.curtido {
  stroke: var(--cor1);
  transition: color 0.2s ease;
}

#modalSwiper .comentarios-content .comentario-footer {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
}

#modalSwiper .comentarios-content .comentario-footer .comentario-input {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  background-color: var(--cor11);
  color: var(--cor2);
}

#modalSwiper .comentarios-content .comentario-footer #frmComentario {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding-right: 10px;
}

#modalSwiper
  .comentarios-content
  .comentario-footer
  #frmComentario
  #modalSwiper
  .comentarios-content
  .comentario-footer
  #frmComentario
  .mensagem-erro {
  color: red;
  font-size: 13px;
  margin-top: 4px;
  display: none;
}

#modalSwiper
  .comentarios-content
  .comentario-footer
  #frmComentario
  .campo-erro {
  border: 1px solid var(--cor7) !important;
}

#modalSwiper .comentarios-content .comentario-footer .comentario-btn {
  background-color: var(--cor1);
  padding: 7px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#modalSwiper .comentarios-content .comentario-footer .comentario-btn:hover {
  background-color: var(--cor6);
}

.comentarios-lista::-webkit-scrollbar {
  width: 6px;
}

.comentarios-lista::-webkit-scrollbar-thumb {
  background-color: var(--cor9);
  border-radius: 4px;
}

#modalSwiper .comentarios-box .comentario-acoes {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--cor11);
  border-bottom: 1px solid var(--cor11);
  padding: 8px 0;
  margin-top: 10px;
}

#modalSwiper .comentarios-box .comentario-acoes svg,
#modalSwiper .comentarios-box .comentario-acoes i {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: middle;
}

#modalSwiper .comentarios-box .comentario-acoes button {
  background: none;
  border: none;
  color: var(--cor8);
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#modalSwiper .comentarios-box .comentario-acoes .contador {
  font-size: 13px;
  color: var(--cor8);
}

/* === RESPONSIVO === */
/* === RESPONSIVO === */
@media (max-width: 768px) {
  #modalSwiper .swiper-slide {
    padding: 30px;
  }

  #modalSwiper .comentarios-box .close-btn {
    right: 10px;
  }

  #modalSwiper .comentarios-content .comentario-footer #frmComentario {
    padding-right: 0;
  }

  #modalSwiper .modal-content {
    flex-direction: column;
  }

  #modalSwiper .swiper-box {
    width: 100%;
    height: 60%; /* imagem em cima */
    order: 1;
  }

  #modalSwiper .comentarios-box {
    width: 100%;
    height: 40%; /* comentários embaixo */
    order: 2;
    padding: 12px;
    overflow: hidden;
  }

  #modalSwiper .swiper {
    width: 100%;
    height: 100%;
  }

  #modalSwiper .swiper-slide img,
  #modalSwiper .swiper-slide video {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  #modalSwiper .comentarios-content {
    overflow-y: auto;
  }
}

/* FINAL DO MODAL SWIPER */

/* INÍCIO DO TOPO */
header .topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background-color: var(--cor12);
  font-size: 14px;
  border-bottom: 1px solid var(--cor9);
}

header .topbar .logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}

header .topbar .titulo {
  font-weight: 700;
}

header .topbar .icone-notif {
  font-size: 18px;
  color: var(--cor8);
}

header .topbar a.icone-notif:hover {
  color: var(--cor15);
}

/* TÉRMINO DO TOPO */

/* INÍCIO DO RODAPÉ */
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 82px; /* Adicione a altura real do footer */
  background-color: var(--cor23);
  z-index: 10;
  border-top: 1px solid var(--cor9);
}

footer .menu {
  display: flex;
  justify-content: space-around;
  padding: 12px 0;
  font-size: 12px;
  color: var(--cor2);
}

footer .menu a {
  color: var(--cor8);
  text-decoration: none;
  text-align: center;
}

/* footer .menu a.ativo > svg {
    stroke: var(--cor1);
} */

footer .menu a.ativo svg {
  stroke: var(--cor1);
}

footer .menu a:hover {
  color: var(--cor15);
}

.menu-notificacao {
  position: relative;
  display: inline-block;
}

.icone-notificacao {
  position: relative;
  display: inline-block;
}

.badge-not {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--cor1);
  color: var(--cor2);
  font-size: 12px;
  font-weight: bold;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  padding: 0 6px;
  z-index: 10;
}

/* TÉRMINO DO RODAPÉ */

/* INÍCIO DAS ABAS */
.abas {
  display: flex;
  justify-content: center;
  background-color: var(--cor11);
  border-bottom: 1px solid var(--cor9);
  padding: 10px;
}

.aba {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--cor8);
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.aba.ativo {
  color: var(--cor2);
  font-weight: bold;
}

.aba:hover {
  color: var(--cor2);
  font-weight: 700;
}

.aba.ativo::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--cor1);
}

.aba-conteudo {
  display: none;
}

.aba-conteudo.ativo {
  display: block;
}

.abas.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 998;
  /*background-color: var(--cor11);*/
  background-color: var(--cor23);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: top 0.3s ease;
  margin-top: 0 !important;
}

/* TÉRMINO DAS ABAS */

/* INÍCIO DO PAINEL DO USUÁRIO */
#perfilPanel {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background-color: var(--cor11);
  color: var(--cor8);
  display: none;
  flex-direction: column;
  z-index: 9998;
  box-shadow: -4px 0 12px var(--cor21);
}

#perfilPanel .perfil-header {
  background-color: var(--cor12);
  padding: 10px;
  color: var(--cor2);
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  border-bottom: 1px solid var(--cor9);
}

#perfilPanel .perfil-header .perfil-premium {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cor4);
  font-weight: bold;
  font-size: 16px;
  height: 25px;
}

#perfilPanel .perfil-header .perfil-premium i {
  font-size: 18px;
  vertical-align: middle;
}

#perfilPanel .perfil-close {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 18px;
  color: var(--cor2);
  cursor: pointer;
}

#perfilPanel .perfil-close:hover {
  color: var(--cor1);
}

#perfilPanel .perfil-opcoes {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 6px;
  overflow-y: auto;
}

#perfilPanel .perfil-opcoes a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  text-decoration: none;
  color: var(--cor8);
  border-radius: 6px;
  transition: background 0.2s;
  font-size: 14px;
}

#perfilPanel .perfil-opcoes a .texto {
  flex: 1; /* ocupa espaço e empurra o badge */
}

#perfilPanel .perfil-opcoes a .badge {
  margin-left: auto; /* joga pro lado direito */
  background: var(--cor12);
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: bold;
  min-width: 24px;
  text-align: center;
}

#perfilPanel .perfil-opcoes a:hover > .badge {
  background: var(--cor1);
}

#perfilPanel .perfil-opcoes a:hover svg {
  stroke: var(--cor1);
}

#perfilPanel .perfil-opcoes a:hover {
  background-color: var(--cor12);
}

#perfilPanel .perfil-opcoes a.ativo {
  background-color: var(--cor12);
}

#perfilPanel .perfil-opcoes a.ativo > svg {
  stroke: var(--cor1);
}

#perfilPanel .perfil-menu-avatar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px;
  border-bottom: 1px solid var(--cor9);
  background-color: var(--cor12);
  height: 69px;
}

/* Container geral centralizado */
.tema-toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 20px;
  flex-wrap: wrap;
}

/* Label de texto */
.tema-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--cor-texto);
}

/* Estilo base dos botões */
.tema-btn {
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ícones */
.tema-btn svg {
  width: 12px;
  height: 12px;
}

/* Botão claro */
.tema-claro-btn {
  background-color: var(--cor2);
  color: var(--cor12);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Botão escuro */
.tema-escuro-btn {
  background-color: var(--cor11);
  color: var(--cor2);
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}

/* Destaque no botão ativo */
.tema-btn.ativo {
  outline: 1px solid var(--cor1);
  transform: scale(1.05);
}

#perfilPanel .perfil-avatar-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
}

#perfilPanel .perfil-avatar-wrapper {
  border-radius: 50%;
}

#perfilPanel .perfil-avatar-wrapper .perfil-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

#perfilPanel .perfil-avatar-wrapper .perfil-online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background-color: var(--cor5);
  border: 2px solid var(--cor14);
  border-radius: 50%;
}

#perfilPanel .perfil-avatar-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#perfilPanel .perfil-avatar-info .perfil-nome-linha {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: var(--cor2);
}

#perfilPanel .perfil-avatar-info .perfil-nome-linha svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  vertical-align: middle;
  height: 1em;
  width: 1em;
}

#perfilPanel .perfil-avatar-info .perfil-nome-usuario {
  font-weight: bold;
  font-size: 14px;
  color: var(--cor2);
}

.skeleton {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  border-radius: 8px;
  color: transparent !important;
  animation: skeleton-loading 1.2s infinite linear;
  margin-bottom: 5px;
}

/* Animação shimmer */
@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

#perfilPanel .perfil-avatar-info .perfil-status-online {
  font-size: 12px;
  color: var(--cor5);
}

/* TÉRMINO DO PAINEL DO USUÁRIO */

/* INÍCIO DO MODAL PADRÃO */
.modalPadrao {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  z-index: 99999;
  padding: 20px;
}

.modalPadrao .modalPadrao-conteudo {
  background: var(--cor12);
  color: var(--cor2);
  width: 95%;
  max-width: 940px;
  border-radius: 12px;
  max-height: 90vh;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.modalPadrao .modalPadrao-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--cor12);
  z-index: 2;
  padding: 24px;
  border-bottom: 1px solid var(--cor9);
}

.modalPadrao .modalPadrao-cabecalho h6 {
  font-size: 20px;
  color: var(--cor2);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modalPadrao .modalPadrao-cabecalho h6 i,
.modalPadrao .modalPadrao-cabecalho h6 svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.modalPadrao .modalPadrao-cabecalho .close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 20px;
  cursor: pointer;
  color: var(--cor8);
  font-weight: bold;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

.modalPadrao .modalPadrao-cabecalho .close-btn:hover {
  color: var(--cor15);
}

/* SCROLL CENTRAL */
.modalPadrao .scroll-area {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
}

.modalPadrao .scroll-area {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
}

.modalPadrao .scroll-area {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
}

.modalPadrao .scroll-area {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
}

.modalPadrao .scroll-area {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
}

.modalPadrao .scroll-area {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
}

.modalPadrao .scroll-area {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
}

/* BOTÃO FIXO */
.modalPadrao .btn-postar {
  position: sticky;
  bottom: 0;
  background: var(--cor1);
  color: var(--cor19);
  font-weight: bold;
  padding: 16px;
  border: none;
  cursor: pointer;
  z-index: 2;
  width: 100%;
  text-align: center;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 0 0 12px 12px;
}

/* CAMPOS */
.modalPadrao .modalPadrao-conteudo textarea {
  background: var(--cor11);
  color: var(--cor2);
  border: 1px solid var(--cor9);
  border-radius: 8px;
  font-size: 14px;
}

.modalPadrao-conteudo select,
.modalPadrao .inputfile-wrapper span {
  background: var(--cor11);
  color: var(--cor2);
  border: 1px solid var(--cor9);
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
}

/* TÉRMINO DO MODAL PADRÃO */

/* INÍCIO DO UPLOAD PADRÃO */
.upload-area {
  border: 1px dashed var(--cor9);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
  color: var(--cor8);
  margin: 0;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-area:hover {
  background-color: var(--cor11);
}

.upload-area input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.upload-area p {
  margin: 0;
  z-index: 1;
}

/* .preview {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview img,
.preview video {
  width: auto;
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  object-fit: cover;
} */

/* TÉRMINO DO UPLOAD PADRÃO */

/* FORMULÁRIOS */
.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  width: 100%;
}

.form-group input {
  width: 100%;
  box-sizing: border-box;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.form-group label {
  padding: 10px 0;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--cor11);
  color: var(--cor2);
  border: 1px solid var(--cor9);
  border-radius: 5px;
  padding: 8px;
  font-size: 14px;
  resize: none;
}

.campo-senha {
  position: relative;
  display: flex;
  align-items: center;
}

.campo-senha input {
  width: 100%;
  padding: 10px 40px 10px 10px;
  background-color: var(--cor11);
  border: 1px solid var(--cor9);
  border-radius: 6px;
  color: var(--cor2);
  font-size: 14px;
}

.toggle-senha {
  position: absolute;
  right: 10px;
  cursor: pointer;
  color: var(--cor8);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-postar {
  background: var(--cor1);
  color: var(--cor2);
  padding: 10px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* espaçamento entre ícone e texto */
  font-size: 14px;
  width: 100%;
}

.btn-postar i,
.btn-postar svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-postar:hover {
  background: var(--cor6);
}

.campo-erro {
  border: 2px solid red !important;
}

.mensagem-erro {
  color: red;
  font-size: 13px;
  margin-top: 4px;
  display: none;
}

.perfil-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.perfil-form small {
  text-align: right;
  font-size: 12px;
  color: var(--cor8);
  padding-top: 10px;
}

#abaCasal .categoria-item {
  background-color: var(--cor11) !important;
}

#abaCasal .slider {
  background-color: var(--cor12) !important;
}

#abaCasal .switch input:checked + .slider {
  background-color: var(--cor1) !important;
}

.categoria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* ← agora são 3 colunas */
  gap: 10px;
  padding: 0;
}

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

.categoria-item {
  background: var(--cor12);
  padding: 10px;
  border-radius: 8px;
  color: var(--cor2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  border: 1px solid var(--cor9);
  margin-bottom: 5px;
}

.switch-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--cor11);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--cor8);
  margin-bottom: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--cor16);
  transition: 0.4s;
  border-radius: 34px;
}

.slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--cor17);
  transition: 0.4s;
  border-radius: 50%;
}

.switch input:checked + .slider {
  background-color: var(--cor18);
}

.switch input:checked + .slider::before {
  transform: translateX(18px);
}

/* FORMULÁRIOS */

/* ABAS INTERNAS */
.tabs {
  display: flex;
  gap: 10px;
  /*margin-bottom: 15px;*/
  border-bottom: 1px solid var(--cor9);
  padding: 0 0 10px;
}

.tab-button {
  background: none;
  border: none;
  padding: 10px 15px;
  color: var(--cor2);
  font-weight: bold;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  /* distância entre ícone e texto */
  font-size: 14px;
}

.tab-button i,
.tab-button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.tab-button.active {
  background-color: var(--cor1);
  color: var(--cor19);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ABAS INTERNAS */

/* TABELAS GERAIS */
.tabela-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background-color: var(--cor11);
  padding: 0;
}

.tabela-planos caption {
  display: table-caption; /* mantém semântica */
  caption-side: top; /* fica no topo */
  text-align: center; /* ou center, se quiser */
  width: 100%; /* força ocupar a largura toda */

  /* estilo visual */
  background: var(--cor16); /* fundo */
  color: var(--cor2); /* texto */
  font-weight: 700;
  padding: 10px;
}

.tabela-planos caption svg {
  margin-right: 8px; /* espaço entre ícone e texto */
  vertical-align: middle; /* garante alinhamento */
}

.tabela-plano {
  width: 100%;
  border-collapse: collapse;
  color: var(--cor2);
}

.tabela-plano th {
  background-color: var(--cor12);
  color: var(--cor2);
  padding: 12px;
  font-size: 14px;
  text-align: center;
  font-weight: 700;
}

.tabela-plano td {
  padding: 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--cor9);
  word-break: break-word;
  text-align: center;
}

.tabela-plano td a {
  color: var(--cor2);
  text-decoration: none;
}

.tabela-plano td a:hover {
  text-decoration: underline;
}

.tabela-plano tbody tr:nth-child(even) {
  background-color: var(--cor12);
  /* linha escura */
}

.tabela-plano tbody tr:nth-child(odd) {
  background-color: var(--cor12);
}

.valida-padrao {
  display: inline-block;
  border: 1px solid var(--cor2);
  color: var(--cor2);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
}

.valida-padrao-menor {
  display: inline-block;
  border: 1px solid var(--cor2);
  color: var(--cor2);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
}

.valida-erro {
  display: inline-block;
  border: 1px solid var(--cor7);
  color: var(--cor7);
  border-radius: 8px;
  font-weight: 700;
  padding: 5px 10px;
  font-size: 12px;
}

.valida-ok {
  display: inline-block;
  border: 1px solid var(--cor5);
  color: var(--cor5);
  border-radius: 8px;
  font-weight: 700;
  padding: 5px 10px;
  font-size: 12px;
}

.valida-pendente {
  display: inline-block;
  border: 1px solid var(--cor4);
  color: var(--cor4);
  border-radius: 8px;
  font-weight: 700;
  padding: 5px 10px;
  font-size: 12px;
}

.valida-sucesso {
  display: inline-block;
  border: 1px solid var(--cor3);
  color: var(--cor3);
  border-radius: 8px;
  font-weight: 700;
  padding: 5px 10px;
  font-size: 12px;
}

.icone-pagamento {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 5px;
}

@media (max-width: 768px) {
  .tabela-plano thead {
    display: none;
  }

  .tabela-plano,
  .tabela-plano tbody,
  .tabela-plano tr,
  .tabela-plano td {
    display: block;
    width: 100%;
  }

  .tabela-plano tr {
    margin-bottom: 20px;
    background-color: var(--cor12);
    border-radius: 10px;
    padding: 12px;
  }

  .tabela-plano td {
    position: relative;
    padding-left: 110px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: none;
    font-size: 14px;
  }

  .tabela-plano td::before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: var(--cinza8);
    font-size: 13px;
    white-space: nowrap;
  }
}

/* ESTATÍSTICAS */
.grid-visitas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 0;
}

.card-visita {
  display: flex;
  align-items: center;
  border: 2px solid var(--cor20);
  border-radius: 12px;
  padding: 16px;
  gap: 12px;
  color: var(--cor1);
  transition: 0.2s ease;
  background-color: var(--cor11);
}

.card-visita-icone {
  font-size: 28px;
  color: var(--cor1);
}

.card-visita-info {
  display: flex;
  flex-direction: column;
}

.card-visita-titulo {
  font-size: 14px;
  color: var(--cor8);
}

.card-visita-numero {
  font-size: 18px;
  font-weight: bold;
  color: var(--cor1);
}

/* ESTATÍSTICAS */

/* VALIDAR PERFIL */
.container-esquerdo,
.container-direito {
  flex: 1;

  /* Para stackar em mobile */
  background-color: var(--cor11);
  border: 1px solid var(--cor9);
  border-radius: 8px;
  padding: 10px;
  color: var(--cor2);
}

.linha-containers {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.passo {
  display: none;
}

.passo.ativo {
  display: block;
}

.lista {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--cor2);
  font-size: 15px;
  padding: 15px 20px;
  line-height: 1.6;
}

.lista li {
  padding: 8px 0;
  border-bottom: 1px solid var(--cor11);

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 0;
  border-bottom: 1px solid var(--cor11);
}

.lista li i,
.lista li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.lista li:last-child {
  border-bottom: none;
}

.lista strong {
  color: var(--cor1);
  font-weight: 600;
}

.exemplo-img {
  width: 100%;
  margin: 20px 0;
  border-radius: 10px;
}

#previewFoto img {
  width: 100%;
  border-radius: 10px;
  margin-top: 12px;
}

button {
  background-color: var(--cor1);
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  color: var(--cor19);
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.botoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.botoes button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* espaço entre ícone e texto */
  background-color: var(--cor11);
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  color: var(--cor2);
  font-weight: bold;
  cursor: pointer;
}

.botoes button:hover {
  background-color: var(--cor1);
}

.botoes button:first-child {
  background-color: var(--cor1);
}

.botoes button:first-child:hover {
  background-color: var(--cor6);
}

/* VALIDAR PERFIL */

/* TEXTOS GERAIS*/
.textosGeral {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
}

.textosGeral p {
  color: var(--cor2);
  line-height: 1.6;
}

.textos {
  padding: 10px;
  border: 1px solid var(--cor9);
  border-radius: 20px;
  margin-bottom: 10px;
  background-color: var(--cor11);
}

.textos p {
  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--cor2);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.textos p i,
.textos p svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.textos p:last-child {
  margin-bottom: 0 !important;
}

/* TEXTOS GERAIS*/

/* CHAT */
.chat-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  /*height: calc(100vh - 81px);*/
  height: 100vh;
  /* respeita o menu de 71px */
  background-color: var(--cor11);
  z-index: 99;
  display: none;
  flex-direction: row;
  transition: all 0.3s ease;
  z-index: 999;
}

.digitando-status {
  display: none; /* começa escondido */
  font-size: 13px;
  color: var(--cor8);
  font-style: italic;
  margin: 5px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* bolinhas animadas */
.digitando-status::after {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--cor8);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 1s infinite;
  margin-left: 2px;
}

.digitando-status::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--cor8);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 1s infinite 0.2s;
  margin-right: 2px;
}

.digitando-status span {
  width: 4px;
  height: 4px;
  background: var(--cor8);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 1s infinite 0.4s;
}

/* animação das bolinhas */
@keyframes pulse {
  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.4;
  }
  40% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.chat-user.ativo {
  border-left: 3px solid var(--cor1);
  border-right: 3px solid var(--cor1);
}

.btn-delete-chat svg {
  color: var(--cor2);
  font-size: 1em;
  height: 1em;
  width: 1em;
}

#chat-nome {
  color: var(--cor2);
  padding-left: 10px;
}

.chat-users {
  background: var(--cor12);
  border-right: 1px solid var(--cor9);
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
  overflow-y: auto;
  padding: 10px;
}

/* Scroll bonito para Chrome, Edge, Safari */
.chat-users::-webkit-scrollbar {
  width: 8px;
}

.chat-users::-webkit-scrollbar-track {
  background: var(--cor10);
  border-radius: 4px;
}

.chat-users::-webkit-scrollbar-thumb {
  background-color: var(--cor8);
  border-radius: 6px;
  border: 2px solid var(--cor10);
  transition: background 0.2s ease;
}

.chat-users::-webkit-scrollbar-thumb:hover {
  background-color: var(--cor8);
}

@media (min-width: 769px) {
  .chat-users {
    flex: 0 0 30%;
    max-width: 360px;
  }
}

.chat-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  position: relative;
  cursor: pointer;
  margin-bottom: 10px;
  background-color: var(--cor11);
  border-radius: 8px;
}

.chat-user:hover {
  background-color: var(--cor12);
}

.user-info svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  vertical-align: middle;
  height: 1em;
  width: 1em;
}

.avatar-chat-wrapper {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.avatar-chat-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.chat-user .status-online {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--cor5);
  border-radius: 50%;
  bottom: 0;
  right: 0;
  border: 2px solid var(--cor10);
  /* borda para destacar sobre imagem */
}

.user-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.user-info strong {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--cor2);
}

.user-info small {
  font-size: 13px;
  color: var(--cor8);
}

.badge-notificacao {
  background-color: var(--cor1);
  /* ou a cor que quiser */
  color: var(--cor2);
  font-size: 12px;
  font-weight: bold;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  padding: 0 6px;
}

.chat-box {
  background: var(--cor11);
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}

.chat-header {
  padding: 5px;
  background: var(--cor12);
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--cor9);
}

.chat-header .btn-voltar {
  background: none;
  border: none;
  color: var(--cor2);
  font-size: 18px;
  cursor: pointer;
  display: none;
}

.btn-fechar-chat {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--cor8);
  cursor: pointer;
  margin-left: auto;
}

.btn-fechar-chat:hover {
  color: var(--cor2);
}

.chat-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.msg {
  max-width: 70%;
  padding: 10px;
  border-radius: 8px;
}

.msg-recebida {
  background: var(--cor12);
  align-self: flex-start;
  color: var(--cor2);
}

.msg-enviada {
  background: var(--cor1);
  color: var(--cor19);
  align-self: flex-end;
}

#chat-footer {
  display: none;
  width: 100%;
  padding: 10px;
  background: var(--cor12);
  border-top: 1px solid var(--cor9);
  border-bottom: 1px solid var(--cor9);
}

.chat-footer form {
  width: 100%;
}

.chat-panel {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
   display: none; /* 👈 fica invisível até ser chamado */
}

.chat-users-header {
  display: none;
  align-items: center;
  justify-content: space-between; /* 👈 joga o botão pra direita */
  padding: 15px;
  background-color: var(--cor11);
  border-bottom: 1px solid var(--cor8);
  color: var(--cor2);
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 10;
}

.chat-users-header button {
  background: none;
  border: none;
  color: var(--cor2);
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 18px;
}

@media (max-width: 768px) {
  .chat-users-header {
    display: flex;
  }
}

/* Botão voltar */
.chat-users-header .btn-voltar-lista {
  background: none;
  border: none;
  color: var(--cor2);
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* MOBILE */
@media (max-width: 768px) {
  .chat-panel {
    flex-direction: column;
  }

  .chat-users-header {
    display: flex;
  }

  .chat-users {
    flex: 1;
  }

  .chat-box {
    display: none; /* só mostra quando abre a conversa */
  }
}


.input-group {
  display: flex;
  align-items: flex-start;
  /* alinha input e botões no topo */
  gap: 10px;
  width: 100%;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group input[type="text"] {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--cor11);
  color: var(--cor2);
  font-size: 14px;
  border: 1px solid var(--cor9);
}

.form-group input.erro {
  border-color: red;
}

.mensagem-erro {
  color: red;
  font-size: 13px;
  margin-top: 4px;
  display: none;
}

.mensagem-erro.ativa {
  display: block;
}

.btn-anexo {
  cursor: pointer;
  color: var(--cor8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.btn-enviar {
  background-color: var(--cor1);
  color: var(--cor19);
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-anexo {
  background: none;
  border: none;
  color: var(--cor8);
  font-size: 20px;
  cursor: pointer;
  padding: 10px;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-anexo:hover {
  background-color: var(--cor11);
  color: var(--cor2);
}

.upload-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  background: var(--cor12);
  padding: 10px;
  border-radius: 8px;
  color: var(--cor2);
  font-size: 14px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: var(--cor9);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--cor1, var(--cor1));
  width: 0%;
  transition: width 0.2s ease;
}

.input-file {
  display: none;
}

#chatBody {
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: var(--cor8) var(--cor10);
  /* thumb e track para Firefox */

  /* Já deve ter isso, mas por segurança */
  overflow-y: auto;
}

/* Scroll bonito para Chrome, Edge, Safari */
#chatBody::-webkit-scrollbar {
  width: 8px;
}

#chatBody::-webkit-scrollbar-track {
  background: var(--cor10);
  border-radius: 4px;
}

#chatBody::-webkit-scrollbar-thumb {
  background-color: var(--cor8);
  border-radius: 6px;
  border: 2px solid var(--cor10);
  transition: background 0.2s ease;
}

#chatBody::-webkit-scrollbar-thumb:hover {
  background-color: var(--cor8);
}

.chat-user.placeholder {
  background: var(--cor12);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.4;
  animation: pulse 1.2s infinite;
}

.chat-user.placeholder .avatar-chat-wrapper {
  width: 42px;
  height: 42px;
  background: var(--cor9);
  border-radius: 50%;
}

.chat-user.placeholder .user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-user.placeholder .user-info div {
  height: 12px;
  background: var(--cor9);
  border-radius: 4px;
}

.chat-user.placeholder .user-info div:nth-child(1) {
  width: 50%;
}

.chat-user.placeholder .user-info div:nth-child(2) {
  width: 30%;
}

@keyframes pulse {
  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.9;
  }

  100% {
    opacity: 0.4;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .chat-users {
    width: 100%;
  }

  .chat-box {
    display: none;
    width: 100%;
  }

  .chat-panel {
    height: calc(100vh - 82px);
  }

  .chat-panel.conversa-ativa .chat-box {
    display: flex;
  }

  .chat-panel.conversa-ativa .chat-users {
    display: none;
  }

  .chat-header .btn-voltar {
    display: inline-block;
  }
}

/* DESKTOP */
@media (min-width: 769px) {
  .chat-header .btn-voltar {
    display: none;
  }
}

/* INÍCIO DO PAINEL DE NOTIFICAÇÕES */
.notificacoes-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background-color: var(--cor12);
  color: var(--cor2);
  display: none;
  flex-direction: column;
  z-index: 9999;
  box-shadow: -4px 0 10px var(--cor21);
}

.notificacoes-panel .notificacoes-header {
  background-color: var(--cor11);
  padding: 10px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--cor9);
}

.notificacoes-panel .notificacoes-header i,
.notificacoes-panel .notificacoes-header svg {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
}

.notificacoes-panel .notificacoes-close {
  font-size: 18px;
  cursor: pointer;
  color: var(--cor2);
}

.notificacoes-panel .notificacoes-close:hover {
  color: var(--cor1);
}

.notificacoes-panel .notificacoes-body {
  padding: 5px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
  overflow-y: auto;
}

/* Scroll bonito para Chrome, Edge, Safari */
.notificacoes-panel .notificacoes-body::-webkit-scrollbar {
  width: 8px;
}

.notificacoes-panel .notificacoes-body::-webkit-scrollbar-track {
  background: var(--cor10);
  border-radius: 4px;
}

.notificacoes-panel .notificacoes-body::-webkit-scrollbar-thumb {
  background-color: var(--cor8);
  border-radius: 6px;
  border: 2px solid var(--cor10);
  transition: background 0.2s ease;
}

.notificacoes-panel .notificacoes-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--cor8);
}

.notificacoes-panel .notificacao {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background-color: var(--cor11);
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
  position: relative;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.notificacoes-panel .notificacao:hover {
  background-color: var(--cor12);
}

.notificacoes-panel .notificacao.nova::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--cor1);
  border-radius: 50%;
  position: absolute;
  top: 6px;
  right: 6px;
}

/* avatar com bullet fixo */
.notificacoes-panel .avatar-wrapper {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.notificacoes-panel .avatar-notificacao {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.notificacoes-panel .status-online-bullet {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: var(--cor5);
  /* verde online */
  border: 2px solid var(--cor11);
  /* borda do fundo do card */
  border-radius: 50%;
  z-index: 2;
}

/* conteúdo do lado direito */
.notificacoes-panel .conteudo-notificacao {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.notificacoes-panel .linha-usuario {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.notificacoes-panel .notificacoes-nome {
  font-weight: 700;
  color: var(--cor2);
}

.notificacoes-panel .conteudo-notificacao p {
  margin: 0;
  line-height: 1.4;
  color: var(--cor8);
  font-size: 13px;
}

.linha-usuario svg {
  font-size: 1em;
  height: 1em;
  width: 1em;
}

.notificacoes-panel .icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
  /* opcional: afasta do texto */
}

.notificacoes-panel .icone i,
.notificacoes-panel .icone svg {
  width: 16px;
  height: 16px;
  stroke: var(--cor1);
  display: block;
}

.notificacoes-panel .tempo {
  font-size: 11px;
  color: var(--cor8);
  margin-top: 4px;
}

/* TÉRMINO DO PAINEL DE NOTIFICAÇÕES */

/* INÍCIO DO PAINEL DE BUSCA */
#filtroPanel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background-color: var(--cor12);
  color: var(--cor2);
  display: none;
  flex-direction: column;
  z-index: 9997;
  box-shadow: -4px 0 10px var(--cor21);
}

#filtroPanel .filtro-header {
  background-color: var(--cor11);
  padding: 10px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--cor9);
  flex-shrink: 0;
}

.filtro-header svg {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  stroke: var(--cor8);
}

#filtroPanel .filtro-header .filtro-close {
  cursor: pointer;
}

#filtroPanel .filtro-header .filtro-close svg:hover {
  stroke: var(--cor2);
}

#filtroPanel .filtro-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#filtroPanel .filtro-scroll::-webkit-scrollbar {
  display: none;
}

#filtroPanel .filtro-scroll label {
  font-size: 14px;
  color: var(--cor8);
}

#filtroPanel .filtro-scroll input[type="text"],
#filtroPanel .filtro-scroll select {
  padding: 8px;
  background: var(--cor12);
  color: var(--cor2);
  border: none;
  border-radius: 6px;
  border: 1px solid var(--cor11);
}

#filtroPanel .filtro-scroll input[type="range"] {
  width: 100%;
  accent-color: var(--cor1);
  cursor: pointer;
}

#filtroPanel .filtro-botoes {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  background-color: var(--cor11);
  border-top: 1px solid var(--cor11);
  flex-shrink: 0;
}

#filtroPanel .filtro-botoes button {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background-color: var(--cor12);
  color: var(--cor2);
  font-weight: 700;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--cor11);
}

#filtroPanel .filtro-botoes button:hover {
  background-color: var(--cor8);
  color: var(--cor12) !important;
}

#filtroPanel .filtro-botoes .buscar {
  background-color: var(--cor1);
  color: var(--cor19);
}

#filtroPanel .filtro-botoes .buscar:hover {
  background: var(--cor6);
}

/* TÉRMINO DO PAINEL DE BUSCA */

/* INÍCIO DO FEED EM GRID */
.feed-grid {
  padding: 10px;
  position: relative;
  z-index: 1;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

#mUsuarios {
  padding: 10px;
  display: none;
}

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1100px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

/* INÍCIO DOS POSTS */
.post {
  background-color: var(--cor11);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--cor9);
}

.post .post-content {
  flex: 1; /* ocupa o espaço disponível */
  display: flex;
  flex-direction: column;
}

.post .post-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 0 8px;
  position: relative;
  flex-wrap: nowrap;
}

.post .post-header .user-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  position: relative;
}

.post .post-header .user-avatar .st-online {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: var(--cor5);
  border: 2px solid var(--cor14);
  border-radius: 50%;
}

.post .post-header .user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.post .post-header .user-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.nome-linha {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nome-linha a {
  font-weight: bold;
  font-size: 14px;
  color: var(--cor2);
  text-decoration: none;
  white-space: nowrap;
}

.nome-linha a:hover {
  text-decoration: underline;
}

.nome-linha .user {
  font-weight: bold;
  font-size: 14px;
  color: var(--cor2);
  text-decoration: none;
  white-space: nowrap;
}

.icone-coroa,
.icone-verificado {
  display: flex;
  align-items: center;
  font-size: 0;
}

.icone-coroa svg,
.icone-verificado svg {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: middle;
}

.post .post-header .user-info .local {
  font-size: 12px;
  color: var(--cor8);
  line-height: 1.2;
}

.post .texto {
  padding: 8px;
  font-size: 13px;
  color: var(--cor2);
  border-bottom: 1px solid var(--cor11);
}

.post .historico {
  font-size: 13px;
  color: var(--cor8) 0;
  text-align: left;
}

.post .post-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between; /* texto à esquerda, ícones à direita */
  align-items: center; /* centraliza verticalmente com base na altura do texto */
  font-size: 13px;
  padding: 8px 0 0;
  color: var(--cor8);
}

.post .post-footer .texto {
  flex: 1;
  margin: 0;
  padding: 0;
}

.post .post-footer .icons {
  display: flex;
  align-items: center; /* centraliza verticalmente com base na altura da linha */
  gap: 8px;
}

.post .post-footer .icons svg,
.post .post-footer .icons i {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: middle;
}

.post .post-footer a.ver-curtidas {
  text-decoration: none;
  font-size: 13px;
  color: var(--cor8);
}

.post .post-footer a.ver-curtidas:hover svg {
  color: var(--cor1);
}

.post .post-footer .ver-curtidas svg,
.post .post-footer .ver-curtidas i {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: middle;
}

.post .img-post {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--cor12);
  position: relative;
  display: flex;
}

.post .img-post-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.post .img-post-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.img-post {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--cor13);
  position: relative;
}

.img-post-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.img-post-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Ícone de play para vídeos */
.img-post .video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-post:hover .video-play {
  background-color: var(--cor1) !important;
}

.img-post:hover .video-play svg {
  stroke: var(--cor2) !important;
}

.img-post .video-play svg {
  width: 32px;
  height: 32px;
  stroke: var(--cor11);
}

.img-post.sem-img .img-post-slide p {
  font-size: 14px;
  color: var(--cor8);

  padding: 0 12px;
  line-height: 1.5;
}

.post .menu-pontinhos {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  cursor: pointer;
  margin-top: 5px;
}

.post .menu-pontinhos .tempo-postagem {
  font-size: 12px;
  color: var(--cor8);
}

.post .menu-pontinhos svg {
  pointer-events: none;
  stroke: var(--cor2);
  font-size: 1em;
  height: 1em;
  width: 1em;
}

.post .dropdown-menu {
  position: absolute;
  top: 24px;
  right: 0;
  background-color: var(--cor11);
  border: 1px solid var(--cor11);
  border-radius: 6px;
  padding: 0;
  display: none;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.post .dropdown-menu li {
  list-style: none;
}

.post .dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--cor2);
  text-decoration: none;
  font-size: 13px;
  min-width: 200px;
}

.post .dropdown-menu a:hover {
  background-color: var(--cor12);
}

.post .dropdown-menu a:first-child:hover {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.post .dropdown-menu a:last-child:hover {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* TÉRMINO DOS POSTS */

/* INÍCIO DA LISTA DE USUÁRIOS */
.user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: visible; /* garante que menus não sejam cortados */
}

.user-card {
  display: flex;
  align-items: center;
  background-color: var(--cor11);
  padding: 5px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--cor11);
  transition: transform 0.2s;
  position: relative;
  z-index: 0; /* neutro por padrão */
}

.user-card.is-open {
  z-index: 1000; /* sobe acima dos outros cards quando o menu está aberto */
}

.user-card-avatar {
  position: relative;
  margin-right: 14px;
  flex-shrink: 0;
}

.user-card-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.user-card-status-online {
  position: absolute;
  bottom: 13px;
  right: 0;
  width: 12px;
  height: 12px;
  background-color: var(--cor5);
  border: 2px solid var(--cor12);
  border-radius: 50%;
}

.user-card-user-info {
  flex-grow: 1;
  overflow: hidden;
}

.user-card-user {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--cor2);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.user-card-user a {
  color: inherit;
  text-decoration: none;
}

.user-card-user a:hover {
  text-decoration: underline;
}

.user-card-icone-coroa svg,
.user-card-icone-verificado svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.user-card-location,
.user-card-last-seen {
  font-size: 12px;
  color: var(--cor8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-card .menu-pontinhos {
  position: absolute;
  cursor: pointer;
  top: 10px;
  right: 10px;
}

.user-card .menu-pontinhos .tempo-postagem {
  font-size: 12px;
  color: var(--cor8);
}

.user-card .menu-pontinhos svg {
  pointer-events: none;
  stroke: var(--cor2);
  font-size: 1em;
  height: 1em;
  width: 1em;
}

.user-card .dropdown-menu {
  position: absolute;
  top: 24px;
  right: 0;
  background-color: var(--cor11);
  border: 1px solid var(--cor11);
  border-radius: 6px;
  padding: 0;
  display: none;
  z-index: 1001; /* acima do card */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.user-card .dropdown-menu li {
  list-style: none;
}

.user-card .dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: var(--cor2);
  text-decoration: none;
  font-size: 13px;
  min-width: 200px;
}

.user-card .dropdown-menu a:hover {
  background-color: var(--cor12);
}

.user-card .dropdown-menu a:first-child:hover {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.user-card .dropdown-menu a:last-child:hover {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.badge-seguindo {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: var(--cor1); /* vermelho */
  color: var(--cor2);
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
}

.badge-seguindo svg {
  width: 9px;
  height: 9px;
}

/* Responsivo */
@media (max-width: 1024px) {
  .user-card-user-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 600px) {
  .user-card-user-grid {
    grid-template-columns: 1fr;
  }
}

/* PERFIL COMPLETO */
.usuario-perfil {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background-color: var(--cor11);
  overflow: hidden;
  padding: 0;
  flex: 1;
  min-height: calc(100vh - 82px); /* 82px é a altura do footer fixo */
  display: flex;
  flex-direction: column;
}

.usuario-capa {
  position: relative;
  height: 200px;
  display: flex;
}

.capa-fotos {
  display: flex;
  width: 100%;
  background-color: var(--cor12);
}

.capa-fotos img {
  flex: 1;
  height: 200px;
  object-fit: cover;
}

.usuario-acoes {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.usuario-perfil .linha-usuario {
  text-align: center;
}

.botao-seguir {
  background-color: var(--cor9);
  color: var(--cor2);
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 20px;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.botao-opcoes {
  background: none;
  border: none;
  color: var(--cor2);
  font-size: 20px;
  cursor: pointer;
}

.menu-opcoes {
  display: none;
  position: absolute;
  top: 42px;
  right: 12px;
  background-color: var(--cor12);
  border: 1px solid var(--cor11);
  border-radius: 6px;
  overflow: hidden;
  z-index: 3;
}

.menu-opcoes a {
  display: block;
  padding: 10px 16px;
  color: var(--cor2);
  text-decoration: none;
}

.menu-opcoes a:hover {
  background-color: var(--cor11);
}

.usuario-avatar {
  display: flex;
  justify-content: center;
  margin-top: -70px;
  position: relative;
  z-index: 2;
}

.avatar-imagem {
  position: relative;
  width: 160px;
  height: 160px;
}

.status-online {
  position: absolute;
  bottom: 8px;
  right: 30px;
  width: 15px;
  height: 15px;
  background-color: var(--cor5);
  border: 2px solid var(--cor14);
  border-radius: 50%;
}

.avatar-imagem img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 4px solid var(--cor11);
  object-fit: cover;
}

.usuario-infos {
  padding: 10px 0 0;
}

.usuario-nome {
  font-size: 22px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cor2);
}

.icone-coroa svg,
.icone-verificado svg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  position: relative;
  top: 1px;
  /* esse aqui é o toque mágico */
}

.usuario-metricas {
  display: flex;
  justify-content: space-around;
  margin: 18px 0 0;
  border-top: 1px solid var(--cor9);
  border-bottom: 1px solid var(--cor9);
  padding: 10px 0;
}

.usuario-metricas svg {
  stroke: var(--cor1);
}

.usuario-metricas div {
  text-align: center;
  color: var(--cor2);
}

.usuario-metricas strong {
  font-size: 18px;
  display: block;
}

.usuario-metricas span {
  font-size: 13px;
  color: var(--cor8);
}

.usuario-detalhes {
  font-size: 14px;
  color: var(--cor8);
  padding: 0 16px;
  display: flex;
  justify-content: center;
}

.usuario-detalhes p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.usuario-detalhes svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  top: 1px;
}

.usuario-bio {
  background-color: var(--cor12);
  padding: 16px;
  font-size: 14px;
  color: var(--cor8);
  border: 1px solid var(--cor11);
  margin: 0 20px;
  border-radius: 6px;
}

.usuario-bloco {
  margin: 0 20px 20px;
}

.usuario-bio p {
  line-height: 1.6;
}

.usuario-bio .ver-mais {
  display: inline-block;
  margin-top: 8px;
  color: var(--cor6);
  font-weight: 500;
  text-decoration: none;
}

.usuario-bio .ver-mais:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .usuario-capa {
    height: 200px;
    flex-direction: row;
  }

  .capa-fotos {
    flex-direction: row;
  }

  .capa-fotos img:nth-child(n + 2) {
    display: none;
  }

  .usuario-nome {
    font-size: 18px;
  }

  .usuario-metricas strong {
    font-size: 16px;
  }

  .usuario-detalhes {
    font-size: 13px;
  }
}

/* .linha-usuario {
    display: inline-flex;
    align-items: center;
    gap: 6px;
} */

.container-cidades {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--cor11);
  margin: 20px 0 0;
}

#infoTabs {
  margin: 0 20px;
}

.cidade-card {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: var(--cor12);
  color: var(--cor2);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin: 5px;
}

.nome-usuario {
  font-weight: bold;
  font-size: 18px;
  color: var(--cor2, var(--cor2));
}

.icone-coroa svg,
.icone-verificado svg {
  width: 16px;
  height: 16px;
  display: block;
}

.usuario-bloco .usuario-titulo {
  background-color: var(--cor1);
  color: var(--cor19);
  margin: 0;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: bold;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-top: 10px;
}

.usuario-linha {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #333;
  align-items: center;
  color: #fff;
}

.usuario-linha:last-child {
  border-bottom: none;
}

.usuario-campo {
  font-weight: bold;
  color: #bbb;
}

.usuario-linha.uma-coluna {
  grid-template-columns: 150px 1fr; /* quando só há um valor */
}

.usuario-valores {
  display: contents; /* mantém as colunas lado a lado no grid */
}

.usuario-valores div {
  background: var(--cor12);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
}

.usuario-nome {
  font-weight: bold;
  font-size: 1.1em;
  background: transparent !important;
}

/* Badge número (caso use com abas ou métricas) */
.badge-numeros {
  background-color: var(--cor11);
  color: var(--cor2);
  font-size: 12px;
  font-weight: bold;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  z-index: 5;
}

/* Responsivo */
@media (max-width: 600px) {
  .usuario-valores div {
    text-align: center;
  }
  [data-label]:before {
    content: attr(data-label);
    display: block;
    font-size: 0.8em;
    font-weight: bold;
    color: #aaa;
    margin-bottom: 2px;
  }
}

/* Galeria estilo instagram */
.galeria-insta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  padding: 6px 0;
}

.galeria-item {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

.galeria-item img.thumb-galeria {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.galeria-item:hover img.thumb-galeria {
  transform: scale(1.03);
}

.icone-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centraliza */
  background: rgba(0, 0, 0, 0.6);
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icone-video i,
.icone-video svg {
  width: 28px; /* maiorzinho pra destacar */
  height: 28px;
  color: var(--cor2);
  pointer-events: none;
}

.galeria-item:hover .icone-video {
  background-color: var(--cor1) !important;
}

.galeria-item:hover .icone-video svg {
  stroke: var(--cor2) !important;
}

#topoPerfil {
  display: none;
}

.topo-perfil {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--cor12);
  padding: 12px 16px;
  border-bottom: 1px solid var(--cor11);
}

.topo-perfil-bloqueio {
  text-align: center;
  background-color: var(--cor22);
  padding: 12px 16px;
  border-bottom: 1px solid var(--cor11);
}

.topo-esquerda {
  display: flex;
  align-items: center;
  gap: 12px;
}

.segue {
  padding: 5px;
  background-color: var(--cor1);
  text-align: center;
  display: none;
}

.segue p {
  text-align: center;
  color: var(--cor19);
  font-size: 13px;
}

.segueAmigo {
  padding: 5px;
  background-color: var(--cor8);
  text-align: center;
  display: none;
}

.segueAmigo p {
  text-align: center;
  color: var(--cor11);
  font-size: 13px;
}

.bloqueado {
  padding: 5px;
  background-color: var(--cor22);
  text-align: center;
  display: none;
}

.bloqueado p {
  text-align: center;
  color: var(--cor2);
  font-size: 13px;
}

.btn-voltar {
  background: none;
  border: none;
  color: var(--cor2);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  padding: 0;
}

.topo-nome {
  color: var(--cor2);
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap;
}

.topo-direita {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-seguir {
  background-color: var(--cor11);
  color: var(--cor2);
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 20px;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.seguindo {
  background-color: var(--cor1) !important;
  color: var(--cor19) !important;
}

.btn-chat,
.btn-menu {
  background: none;
  border: none;
  color: var(--cor2);
  font-size: 20px;
  cursor: pointer;
}

.menu-dropdown-wrapper {
  position: relative;
}

.menu-dropdown {
  position: absolute;
  top: 36px;
  right: 0;
  background: var(--cor11);
  border: 1px solid var(--cor11);
  border-radius: 6px;
  padding: 0;
  display: none;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.menu-dropdown svg {
  pointer-events: none;
  stroke: var(--cor2);
  font-size: 1em;
  height: 1em;
  width: 1em;
}

.menu-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: var(--cor2);
  text-decoration: none;
  font-size: 14px;
  min-width: 180px;
}

.menu-dropdown a:hover {
  background: var(--cor12);
}

.menu-dropdown a:first-child:hover {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.menu-dropdown a:last-child:hover {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Loader adaptado para grid */
.loader-wrapper {
  grid-column: 1 / -1;
  /* ocupa todas as colunas da grid */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}

.loader {
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-top: 5px solid var(--cor1);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.loader-text {
  font-size: 14px;
  color: var(--cor8);
  opacity: 0.8;
  animation: pulse 1.5s infinite;
  text-align: center;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.4;
  }
}

.autocomplete {
  position: absolute;
  top: 100%;
  /* encosta abaixo do input */
  left: 0;
  right: 0;
  background: var(--cor12);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
}

.autocomplete::-webkit-scrollbar {
  width: 8px;
}

.autocomplete::-webkit-scrollbar-track {
  background: var(--cor10);
  border-radius: 4px;
}

.autocomplete::-webkit-scrollbar-thumb {
  background-color: var(--cor8);
  border-radius: 6px;
  border: 2px solid var(--cor10);
  transition: background 0.2s ease;
}

.autocomplete::-webkit-scrollbar-thumb:hover {
  background-color: var(--cor8);
}

.autocomplete li {
  padding: 8px;
  cursor: pointer;
}

.autocomplete li:hover {
  background: var(--cor11);
}

#alertas-container {
  position: fixed;
  bottom: 85px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-width: 90%;
}

.alerta {
  background-color: var(--cor8);
  color: var(--cor2);
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(100%);
  animation: slideIn 0.3s ease forwards;
  min-width: 250px;
  max-width: 100%;
  font-size: 15px;
  font-weight: 500;
}

/* Conteúdo: ícone, texto, botão */
.alerta-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.alerta-conteudo i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.alerta-texto {
  flex: 1;
  text-align: left;
  line-height: 1.4;
  word-break: break-word;
}

/* Botão fechar */
.alerta-fechar {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 24px;
  height: 24px;
}

/* Cores por tipo */
.alerta.ok {
  background-color: var(--cor5);
}

.alerta.aviso {
  background-color: var(--cor4);
  color: var(--cor13);
}

.alerta.erro {
  background-color: var(--cor7);
}

/* Mobile responsivo */
@media (max-width: 600px) {
  #alertas-container {
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 10px;
    align-items: center;
  }

  .alerta {
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
  }
}

/* Animação */
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mural de recados*/
.mural-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 0 0;
}

#listaComentariosPerfil .mural-post,
#listaCurtidasPerfil .mural-post,
#listaComentario .mural-post,
#listaComentarioMural .mural-post,
#listaCurtidaComentario .mural-post,
#listaRecRecusadas .mural-post,
#listaRecAceitas .mural-post {
  background-color: var(--cor11) !important;
}

#listaRecPendentes .mural-post,
#listaRecPendentes .mural-post {
  background-color: var(--cor11) !important;
}

#listaRecFeitas .mural-post,
#listaRecFeitas .mural-post {
  background-color: var(--cor11) !important;
}

#listaComentariosPerfilNot .mural-post,
#listaComentariosPerfilNot .mural-post {
  background-color: var(--cor11) !important;
}

#listaMural .mural-post,
#listaMural .mural-post {
  background-color: var(--cor11) !important;
}

#listaMural {
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
  display: none;
  width: 100%;
}

/* Scroll bonito para Chrome, Edge, Safari */
#listaMural ::-webkit-scrollbar {
  width: 8px;
}

#listaMural ::-webkit-scrollbar-track {
  background: var(--cor10);
  border-radius: 4px;
}

#listaMural ::-webkit-scrollbar-thumb {
  background-color: var(--cor8);
  border-radius: 6px;
  border: 2px solid var(--cor10);
  transition: background 0.2s ease;
}

#listaMural ::-webkit-scrollbar-thumb:hover {
  background-color: var(--cor8);
}

#listaCurtidasPerfil {
  margin: 0 20px;
}

.mural-post {
  background-color: var(--cor12);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  margin-bottom: 10px;
}

.mural-post:not(:last-child) {
  margin-bottom: 0 !important;
}

.mural-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mural-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mural-avatar-wrapper {
  position: relative;
  width: 42px;
  height: 42px;
}

.mural-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /*border: 2px solid var(--cor8);*/
}

.mural-online {
  position: absolute;
  bottom: 2px;
  right: 0;
  width: 10px;
  height: 10px;
  background-color: var(--cor5);
  border: 2px solid var(--cor12);
  border-radius: 50%;
}

.mural-user-details {
  display: flex;
  flex-direction: column;
}

.mural-nome-linha {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mural-nome {
  font-weight: bold;
  color: var(--cor2);
}

.mural-nome a {
  color: var(--cor2);
  text-decoration: none;
  font-size: 14px;
}

.mural-nome a:hover {
  text-decoration: underline;
}

.mural-cidade {
  font-size: 12px;
  color: var(--cor8);
}

.mural-data {
  font-size: 12px;
  color: var(--cor8);
}

.mural-icon {
  color: var(--cor4);
  width: 16px;
  height: 16px;
}

.mural-icon.verificado {
  color: var(--cor3);
}

.mural-texto {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cor2);
}

.mural-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-size: 14px;
  color: var(--cor8);
}

.mural-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  /* espaço ENTRE os blocos de ícone + número */
}

.mural-icons span {
  display: flex;
  align-items: center;
  gap: 2px;
  /* espaço ENTRE ícone e número */
  font-size: 14px;
  color: var(--cor8);
}

.mural-icons svg {
  vertical-align: middle;
  margin-right: 4px;
  font-size: 1em;
  height: 1em;
  width: 1em;
  cursor: pointer;
}

.mural-curtidas {
  cursor: pointer;
  color: var(--cor1);
  text-decoration: none;
  display: flex;
  align-items: center;
  /* Alinha verticalmente */
  gap: 6px;
  /* Espaço entre ícone e texto */
  font-size: 13px;
}

.mural-curtidas svg {
  font-size: 1em;
  height: 1em;
  width: 1em;
  display: inline-block;
}

.mural-curtidas:hover {
  text-decoration: underline;
}

.mural-menu-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mural-opcoes-btn {
  background: none;
  border: none;
  color: var(--cor8);
  cursor: pointer;
  font-size: 20px;
  padding: 0 8px;
}

.mural-menu {
  position: absolute;
  right: 0;
  top: 36px;
  background: var(--cor11);
  border: 1px solid var(--cor11);
  border-radius: 6px;
  padding: 0;
  width: 150px;
  display: none;
  z-index: 999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.mural-menu:first-child:hover {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.mural-menu:last-child:hover {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.mural-menu.active {
  display: block;
}

.mural-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* espaço entre o ícone e o texto */
  padding: 10px 16px;
  font-size: 13px;
  color: var(--cor8);
  cursor: pointer;
  transition: background 0.2s;
}

.mural-menu-item svg {
  font-size: 1em;
  height: 1em;
  width: 1em;
}

.mural-menu-item:hover {
  background-color: var(--cor11);
}

#modalRecomendacoes .mural-menu-item:hover,
#listaPostagens .mural-menu-item:hover,
#listaRecomendacoes .mural-menu-item:hover {
  background-color: var(--cor12);
}

#listaComentariosPerfilNot {
  height: 400px;
  overflow-y: auto;
  padding: 0px 10px 0px 0px;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
  display: none;
  width: 100%;
}

/* Scroll bonito para Chrome, Edge, Safari */
#listaComentariosPerfilNot ::-webkit-scrollbar {
  width: 8px;
}

#listaComentariosPerfilNot ::-webkit-scrollbar-track {
  background: var(--cor10);
  border-radius: 4px;
}

#listaComentariosPerfilNot ::-webkit-scrollbar-thumb {
  background-color: var(--cor8);
  border-radius: 6px;
  border: 2px solid var(--cor10);
  transition: background 0.2s ease;
}

#listaComentariosPerfilNot ::-webkit-scrollbar-thumb:hover {
  background-color: var(--cor8);
}

#listaComentariosPerfil {
  height: 200px;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--cor8) var(--cor10);
  display: none;
  width: 100%;
}

/* Scroll bonito para Chrome, Edge, Safari */
#listaComentariosPerfil ::-webkit-scrollbar {
  width: 8px;
}

#listaComentariosPerfil ::-webkit-scrollbar-track {
  background: var(--cor10);
  border-radius: 4px;
}

#listaComentariosPerfil ::-webkit-scrollbar-thumb {
  background-color: var(--cor8);
  border-radius: 6px;
  border: 2px solid var(--cor10);
  transition: background 0.2s ease;
}

#listaComentariosPerfil ::-webkit-scrollbar-thumb:hover {
  background-color: var(--cor8);
}

p.nenhum {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: var(--cor2);
}

p.nenhum strong {
  font-weight: 700;
}

.avatar-container {
  position: relative;
  width: 256px;
  height: 256px;
  margin: auto;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid var(--cor8);
}

.icon-btn {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.icon-btn svg {
  font-size: 1em;

  height: 1em;
  width: 1em;
}

.icon-btn:hover {
  background-color: rgba(233, 30, 99, 0.8);
}

.icon-camera {
  bottom: 28px;
  right: 18px;
}

.icon-trash {
  bottom: 28px;
  left: 18px;
}

.avatar-container input[type="file"] {
  display: none;
}

.perfil-wrapper {
  display: flex;
  gap: 30px;
  /* espaçamento entre avatar e form */
  align-items: flex-start;
  flex-wrap: wrap;
  /* empilha no mobile */
  margin-top: 20px;
  width: 100%;
  /* <-- ESSENCIAL */
}

@media (max-width: 768px) {
  .perfil-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .form-area {
    width: 100%;
  }

  .form-row {
    flex-direction: column;
    width: 100%;
    gap: 16px;
  }

  .form-group {
    width: 100% !important;
  }

  .form-group input {
    width: 100%;
  }
}

.form-box {
  border: 1px solid var(--cor9);
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  background: var(--cor12);
  color: var(--cor2);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  /* deixa o ícone branco */
  cursor: pointer;
}

.form-box legend {
  display: flex;
  align-items: center;
  gap: 6px;
  /* espaço entre ícone e texto */

  font-size: 14px;
  font-weight: bold;
  padding: 0 12px;
  color: var(--cor8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#idadeValor {
  color: var(--cor1);
}

.form-box legend i,
.form-box legend svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.barra-upload-container {
  display: none;
  margin-top: 10px;
}

.barra-upload-externa {
  width: 100%;
  background-color: var(--cor11);
  border-radius: 6px;
  overflow: hidden;
  height: 24px;
}

.barra-upload-preenchida {
  width: 0%;
  height: 100%;
  background-color: var(--cor1);
  color: white;
  text-align: center;
  line-height: 24px;
  font-weight: bold;
  transition: width 0.3s ease;
}

.caixaAlta {
  text-transform: uppercase;
}

.validacao-ok {
  display: inline-block;
  border: 1px solid var(--cor5);
  color: var(--cor18);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: bold;
}

.validacao-analise {
  display: inline-block;
  background: var(--cor4);
  color: var(--cor11);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: bold;
}

.validacao-cancelado {
  display: inline-block;
  background: var(--cor7);
  color: var(--cor2);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: bold;
}

/* Cartão */
.checkout-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  justify-content: center;
}

.checkout-container .card-wrapper {
  perspective: 1200px;
  width: 360px;
  margin-top: 11px;
}

.checkout-container .credit-card {
  width: 100%;
  height: 210px;
  border-radius: 20px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s ease-in-out;
  margin-top: 6px;
}

.checkout-container .card-front,
.checkout-container .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 20px;
  padding: 20px;
  background: var(--cor11);
  backdrop-filter: blur(6px);
}

.checkout-container .card-back {
  transform: rotateY(180deg);
}

.checkout-container .card-logo {
  height: 40px;
  margin-bottom: 10px;
}

.checkout-container .card-number,
.checkout-container .card-name {
  margin: 12px 0;
  font-size: 18px;
  letter-spacing: 1.5px;
}

.checkout-container .card-details-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 18px;
  letter-spacing: 1.5px;
}

.checkout-container .cvv-box {
  margin-top: 70px;
  font-size: 18px;
  background: var(--cor2);
  color: var(--cor13);
  padding: 10px;
  border-radius: 6px;
  width: 90px;
  float: right;
}

.checkout-container .flipped {
  transform: rotateY(180deg);
}

.checkout-container .form-container {
  flex: 1;
  min-width: 300px;
}

#dadosCompra,
#dadosTroca {
  display: none;
}

/* Planos */
#pagamentoTabs,
#btAdesao {
  display: none;
}

.planos-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 16px;
}

.plano {
  flex: 1;
  min-width: 280px;
  max-width: 320px;
  background-color: var(--cor11);
  border: 1px solid var(--cor9);
  border-radius: 16px;
  padding: 30px 24px;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Título do plano */
.plano .titulo {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Preço */
.plano .preco {
  font-size: 28px;
  color: var(--cor1);
  margin: 16px 0;
  font-weight: 700;
}

/* Lista de recursos */
.plano ul {
  list-style: none;
  text-align: left;
  margin: 20px 0;
  flex-grow: 1;
}

.plano ul li {
  padding-left: 20px;
  margin-bottom: 12px;
  position: relative;
  color: var(--cor8);
}

.plano ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--cor1);
  font-weight: bold;
}

/* Botão */
.plano button {
  padding: 12px 20px;
  background-color: var(--cor1);
  color: var(--cor19);
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.3s ease;
  display: inline-flex;
  /* Alinha ícone e texto lado a lado */
  align-items: center;
  /* Centraliza verticalmente */
  justify-content: center;
  gap: 6px;
}

.plano button svg {
  font-size: 1em;
  height: 1em;
  width: 1em;
}

.plano button:hover {
  background-color: var(--cor6);
}

/* Badge de destaque */
.badge-recomendado {
  position: absolute;
  top: -17px;
  right: 12px;
  background: var(--cor4);
  color: var(--cor13);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 20px;
  z-index: 1;
}

.btEscolha.selecionado {
  border: 2px solid var(--cor8);
  background-color: var(--cor8);
  color: var(--cor12);
}

.btEscolha.selecionado .btn-plano {
  background-color: var(--cor8);
}

/* Responsivo */
@media (max-width: 768px) {
  .planos-container {
    flex-direction: column;
    align-items: center;
  }

  .plano {
    width: 100%;
    max-width: 360px;
  }
}

/*Pix*/
.pix-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  background-color: var(--cor11);
  padding: 20px;
  border-radius: 12px;
}

.pix-qr img {
  width: 160px;
  height: 160px;
  border-radius: 8px;
  margin-top: 10px;
}

.pix-dados {
  flex: 1;
  min-width: 250px;
}

.linha-copia {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.linha-copia input {
  flex: 1;
  background: var(--cor111);
  color: var(--cor2);
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  border: 1px solid var(--cor8);
}

.linha-copia button {
  background-color: var(--cor1);
  color: var(--cor2) fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}

.linha-copia button:hover {
  background-color: var(--cor1);
}

.pix-dados ul {
  margin-top: 10px;
  color: var(--cor8);
  list-style: none;
}

.pix-dados ul li {
  margin-bottom: 8px;
  line-height: 1.4;
}

.destaque {
  color: var(--cor4);
}

.subtitulo {
  text-align: center;
  color: var(--cor8);
  margin-bottom: 20px;
}

.premium {
  color: var(--cor1);
}

.vitrine {
  color: var(--cor1);
  font-weight: bold;
}

/* ---------- TABELA DESKTOP ---------- */
.tabela-planos {
  width: 100%;
  border-collapse: collapse;
}

.tabela-planos th {
  background-color: var(--cor1);
  color: white;
  padding: 12px;
  font-size: 14px;
  text-align: center;
}

.tabela-planos td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid var(--cor11);
  font-size: 15px;
  border-left: 1px solid var(--cor10);
  border-right: 1px solid var(--cor10);
  color: var(--cor8);
}

.tabela-planos td a {
  color: var(--cor8);
  text-decoration: none;
}

.tabela-planos td a:hover {
  text-decoration: underline;
}

.tabela-planos tbody tr:nth-child(odd) {
  background-color: var(--cor11);
}

.tabela-planos tbody tr:nth-child(even) {
  background-color: var(--cor12);
}

/* Ícones Lucide alinhados */
.tabela-planos td svg,
.tabela-planos th svg {
  vertical-align: middle;
  margin-right: 8px;
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.tabela-planos td img {
  vertical-align: middle;
  margin-right: 8px;
  width: 18px;
}

/* ---------- ALERTA ---------- */
.alerta {
  background-color: var(--cor12);
  padding: 20px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--cor2);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ---------- BOTÃO ---------- */
.btn-area {
  text-align: center;
}

.botao-premium {
  background-color: transparent;
  border: 2px solid var(--cor1);
  color: var(--cor2);
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.botao-premium:hover {
  background-color: var(--cor1);
  color: white;
}

/* ---------- RESPONSIVO COM DATA-LABEL E ZEBRA MOBILE ---------- */
@media screen and (max-width: 768px) {
  .tabela-planos thead {
    display: none;
  }

  .tabela-planos,
  .tabela-planos tbody,
  .tabela-planos tr,
  .tabela-planos td {
    display: block;
    width: 100%;
  }

  .tabela-planos tr {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--cor8);
    padding-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
  }

  /* Zebra mobile */
  .tabela-planos tr:nth-of-type(odd) {
    background-color: var(--cor10);
  }

  .tabela-planos tr:nth-of-type(even) {
    background-color: var(--cor12);
  }

  .tabela-planos td {
    text-align: left;
    padding-left: 50%;
    position: relative;
    font-size: 14px;
    border: none;
    border-bottom: 1px solid var(--cor11);
  }

  .tabela-planos td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 10px;
    font-weight: bold;
    color: var(--cor8);
    text-transform: uppercase;
    font-size: 12px;
  }

  .tabela-planos td i[data-lucide],
  .tabela-planos td svg {
    margin-left: 4px;
  }
}

.box-texto {
  background-color: var(--cor11);
  color: var(--cor2);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--cor9);
  font-size: 15px;
  line-height: 1.6;
}

.box-texto .linha {
  display: flex;
  align-items: center;
  /* trocado de flex-start para center */
  gap: 10px;
  margin-bottom: 10px;
}

.box-texto .linha:last-child {
  margin-bottom: 0 !important;
}

.box-texto .linha i {
  font-size: 18px;
  margin-top: 2px;
  /* se quiser dar uma afinada no alinhamento */
  flex-shrink: 0;
  color: var(--cor2);
  /* opcional: define uma cor para os ícones */
}

/* Se estiver usando SVG, pode usar isso também */
.box-texto .linha svg {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--cor2);
}

.box-texto .linha p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  flex: 1;
  color: var(--cor8);
}

.btn-premium {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background-color: var(--cor1);
  border: none;
  border-radius: 8px;
  color: var(--cor19);
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  /* impede quebrar o botão em duas linhas */
}

.btn-premium svg {
  stroke: var(--cor19);
}

.btn-premium:hover {
  background-color: var(--cor6);
}

.btn-premium svg {
  display: inline-block;
  font-size: 1em;

  height: 1em;
  width: 1em;
}

.box-texto p:last-child {
  margin-bottom: 0 !important;
}

.box-texto svg {
  color: var(--cor8);
  margin-top: 2px;
  flex-shrink: 0;
}

.box-texto .premium {
  color: var(--cor1);
  font-weight: bold;
}

.box-texto .vitrine {
  color: var(--cor1);
  font-weight: bold;
}

.verde {
  color: var(--cor5);
}

.ico-verde {
  stroke: var(--cor5);
}
.vermelho {
  color: var(--cor7);
}

#loadingOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99999999999999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--cor2);
  font-size: 18px;
}

.loading-spinner {
  margin-bottom: 15px;
  width: 40px;
  height: 40px;
  border: 4px solid var(--cor2);
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 99999;
}

.preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  width: 100%;
}

.thumb-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Mantém quadrado */
  border-radius: 6px;
  overflow: hidden;
  background-color: #111;
}

.thumb-container img,
.thumb-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.preview-validar {
  width: 256px;
  height: 256px;
  margin: auto;
}

.preview-validar:empty {
  display: none;
}

.thumb-container-validar {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Mantém quadrado */
  border-radius: 6px;
  overflow: hidden;
  background-color: #111;
}

.thumb-container-validar img,
.thumb-container-validar video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.btn-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #000000aa;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  padding: 10px;
  line-height: 1;
  z-index: 10;
}

.btn-delete:hover {
  background-color: var(--cor1);
}

.btn-delete svg {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  display: inline-block;
}

#perfil {
  margin-bottom: 10px;
}

/* imagem centralizada e proporcional, limitada a 70% da tela */
#modalImagens img {
  display: block;
  margin: 20px;
  width: auto;
  height: auto;
  max-width: 70vw; /* não passa de 70% da largura da tela */
  max-height: 70vh; /* não passa de 70% da altura da tela */
  object-fit: contain; /* garante proporção */
}

.navegacao {
  position: relative;
  display: flex;
  justify-content: center; /* centraliza horizontal */
  align-items: center; /* centraliza vertical */
  width: 100%;
  height: 100%;
}

/* imagem centralizada e limitada */
.navegacao img {
  max-width: 70vw;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto;
}

/* botões nas laterais, sobrepostos */
.navegacao .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  cursor: pointer;
  width: 48px; /* largura fixa */
  height: 48px; /* altura igual à largura */
  border-radius: 50%; /* deixa 100% redondo */
  display: flex; /* centraliza o ícone */
  justify-content: center;
  align-items: center;
  transition: background 0.2s ease;
}
.navegacao .nav-btn svg {
  width: 28px; /* aumenta a largura do ícone */
  height: 28px; /* aumenta a altura do ícone */
}

.navegacao .nav-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

.navegacao .nav-prev {
  left: 20px;
  z-index: 500000;
}
.navegacao .nav-next {
  right: 20px;
  z-index: 500000;
}

.trava {
  pointer-events: none; /* bloqueia clique */
  opacity: 0.5; /* visual de desabilitado */
  cursor: not-allowed;
}

#modalImagens .loader-wrapper {
  display: none; /* começa escondido */
}

.msg-video {
  max-width: 400px;
  max-height: 400px;
  border-radius: 6px; /* opcional, pra ficar bonitinho */
}

.msg {
  position: relative;
  display: inline-block;
  margin: 8px;
}

.msg-texto {
  margin-top: 20px;
  word-wrap: break-word;
}

/* botão delete */

.msg-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #000000aa;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
  z-index: 10;
}

.msg-delete svg {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  display: inline-block;
}

.msg-horario {
  display: block;
  font-size: 11px;
  color: #aaa;
  margin-top: 4px;
  text-align: right;
}

.msg-recebida .msg-horario {
  color: var(--cor2) !important;
}

.msg-status {
  margin-left: 4px;
  font-size: 12px;
}

.msg-status.enviada {
  color: var(--cor8); /* cinza */
}

.msg-status.lida {
  color: var(--cor3); /* azul tipo WhatsApp */
}

.msg-status.lida svg,
.msg-status.enviada svg {
  width: 12px; /* aumenta a largura do ícone */
  height: 12px; /* aumenta a altura do ícone */
}

.msg-apagada-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #eee;
  color: #666;
  padding: 20px;
  border-radius: 10px;
  max-width: 250px;
  text-align: center;
  font-size: 14px;
}
.msg-apagada-thumb i {
  width: 32px;
  height: 32px;
  margin-bottom: 5px;
}

/* CAIXA DECISÃO */
.caixaDecisao {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.caixaDecisao-conteudo {
  background: #1e1e2f;
  color: #fff;
  padding: 25px;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.25s ease;
}

.caixaDecisao-conteudo h2 {
  margin-bottom: 10px;
  font-size: 22px;
}

.caixaDecisao-conteudo p {
  font-size: 15px;
  color: #ccc;
  margin-bottom: 20px;
}

/* BOTÕES */
.caixaDecisao-botoes {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.caixaDecisao-botoes button {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 15px;
  transition: transform 0.2s, background 0.2s;

  /* 👇 alinhamento do ícone com o texto */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* espaço entre ícone e texto */
}

.caixaDecisao-botoes button i {
  font-size: 18px; /* deixa o ícone proporcional */
}

.btn-sim {
  background: #27a745;
  color: #fff;
}
.btn-sim:hover {
  background: #1e7e34;
}

.btn-nao {
  background: #dc3545;
  color: #fff;
}
.btn-nao:hover {
  background: #a71d2a;
}

.titulo-scroll {
  grid-column: 1 / -1; /* ocupa todas as colunas */
  display: none;
}

#tabelaPlanosExibe,
#vPlano,
#nenhumPagamento {
  display: none;
}

.accordion {
  background-color: transparent;
  border: 1px solid var(--cor11);
  color: var(--cor8);
  cursor: pointer;
  padding: 12px 14px;
  line-height: 1.2;
  width: 100%;
  text-align: left;
  outline: none;
  text-transform: uppercase;
  display: grid;
  grid-template-columns: 1fr auto; /* texto | ícone */
  align-items: center;
  gap: 12px;
  transition: background-color 0.2s ease, color 0.2s ease;
  border-radius: 8px;
}
.accordion:hover,
.accordion.abaAtiva {
  background: var(--cor11);
  color: var(--cor2);
}

.acc-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  transition: transform 0.25s ease, color 0.2s ease, opacity 0.2s ease;
  opacity: 0.9;
}
/* gira o chevron quando abre */
.accordion.abaAtiva .acc-icon {
  transform: rotate(180deg);
  opacity: 1;
}

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.panel > .panel-inner {
  padding: 10px 0 14px 0;
}

/* foco acessível */
.accordion:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.45);
  outline-offset: 2px;
}

/* Páginas */
.page {
  display: none;
  padding: 10px;
  position: relative;
  padding-bottom: 71px;
}

.page.ativo {
  display: grid;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modalPadrao.ativo {
  display: flex;
}

#perfilPanel.ativo {
  display: block;
}

.uOpcoes {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.uOpcoes li {
  margin: 5px 0;
}

.uOpcoes p {
  color: #aaa;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.uOpcoes p.ok {
  color: #3ddc97; /* Verde sucesso */
}

.uOpcoes p.erro {
  color: #ff4f4f; /* Vermelho */
}

.uOpcoes p i {
  transition: color 0.2s ease, transform 0.2s ease;
}

.menu-inferior {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transition: transform 0.3s ease;
}

.menu-oculto {
  transform: translateY(100%);
}