@import url("/css/style.css?v=20260916-shell-ready1");
@import url("/css/home.css?v=20260824-sidebar2");

/* ================================================================
   PAGINA DE SUPORTE — GUIA RAPIDO
   Este arquivo mexe apenas em classes terminadas em -v2. Assim voce pode
   alterar esta pagina sem arriscar o mapa, os grupos ou o FurSync.
   ================================================================ */

/* Este bloco controla a largura e o espacamento de toda a pagina. */
.support-main-v2 {
  display: grid;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 34px;
}

/* No computador, este bloco deixa um respiro real entre o menu e o conteudo. */
@media (min-width: 901px) {
  .home-redesign.has-nav-side .support-main-v2 {
    width: min(1500px, calc(100vw - 326px));
    max-width: 1500px;
    margin-right: auto;
    margin-left: calc(262px + max(32px, (100vw - 1762px) / 2));
  }
}

/* Este bloco faz o titulo e os dois textos do topo. */
.support-intro-v2 h1 {
  margin: 4px 0 7px;
  font-size: clamp(28px, 3vw, 39px);
  line-height: 1.08;
}

.support-intro-v2 p {
  max-width: 960px;
  margin: 3px 0;
  color: #d6d9e8;
  line-height: 1.55;
}

.support-eyebrow-v2 {
  color: #f472b6 !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

/* Este aviso aparece somente quando a pessoa ainda nao entrou na conta. */
.support-login-v2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(251, 191, 36, .48);
  border-radius: 14px;
  background: rgba(120, 53, 15, .22);
}

.support-login-v2 > span { font-size: 28px; }
.support-login-v2 p { margin: 4px 0 0; color: #d7d6e3; }

/* Este grid coloca Denuncia e Feedback lado a lado no computador. */
.support-forms-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

/* Este bloco desenha os dois cartoes principais. */
.support-card-v2 {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, .45);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(23, 28, 47, .96), rgba(8, 13, 29, .98));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .27);
}

.support-card-v2--report { border-color: rgba(245, 158, 11, .68); }

/* Este bloco faz o cabecalho colorido de cada cartao. */
.support-card-head-v2 {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(139, 92, 246, .34);
  background: linear-gradient(135deg, rgba(76, 29, 149, .2), rgba(236, 72, 153, .06));
}

.support-card-v2--report .support-card-head-v2 {
  border-color: rgba(245, 158, 11, .55);
  background: linear-gradient(135deg, rgba(120, 53, 15, .36), rgba(245, 158, 11, .04));
}

.support-card-head-v2 h2,
.support-card-head-v2 p { margin: 0; }
.support-card-head-v2 h2 { font-size: 21px; }
.support-card-head-v2 p { margin-top: 4px; color: #e0deea; }

.support-card-icon-v2 {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border: 2px solid #a855f7;
  border-radius: 50%;
  color: #c084fc;
  font-size: 20px;
  font-weight: 950;
  box-shadow: 0 0 26px rgba(168, 85, 247, .24);
}

.support-card-v2--report .support-card-icon-v2 {
  border-color: #fbbf24;
  color: #fbbf24;
  box-shadow: 0 0 26px rgba(251, 191, 36, .22);
}

/* Este bloco organiza os campos e os textos de ajuda do formulario. */
.support-form-v2 {
  display: grid;
  gap: 7px;
  padding: 18px 20px 20px;
}

.support-form-v2 label {
  margin-top: 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 850;
}

.support-form-v2 label b { color: #fb7185; }

.support-form-v2 input,
.support-form-v2 select,
.support-form-v2 textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 8px;
  outline: 0;
  background: rgba(255, 255, 255, .055);
  color: #fff;
}

.support-form-v2 input,
.support-form-v2 select { min-height: 45px; padding: 0 13px; }
.support-form-v2 textarea { min-height: 124px; padding: 12px 13px; resize: vertical; line-height: 1.45; }
.support-form-v2 option { background: #111827; color: #fff; }

.support-form-v2 input:focus,
.support-form-v2 select:focus,
.support-form-v2 textarea:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .14);
}

.support-card-v2--report .support-form-v2 input:focus,
.support-card-v2--report .support-form-v2 select:focus,
.support-card-v2--report .support-form-v2 textarea:focus { border-color: #fbbf24; }

.support-form-v2 > small { color: #98a2ba; line-height: 1.35; }

/* Este bloco coloca o contador 0/1000 na mesma linha do titulo. */
.support-label-row-v2 {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.support-label-row-v2 output { color: #aeb7cb; font-size: 12px; }

/* Este bloco desenha as duas caixas de anexos. */
.support-upload-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 9px;
}

.support-upload-v2 {
  min-height: 112px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 12px;
  border: 1px dashed rgba(251, 191, 36, .65);
  border-radius: 10px;
  background: rgba(0, 0, 0, .14);
  text-align: center;
  cursor: pointer;
}

.support-upload-v2 > span { color: #fbbf24; font-size: 24px; }
.support-upload-v2 small { color: #aeb7cb; }
.support-upload-v2 input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.support-file-status-v2 { min-height: 20px; margin: 0; color: #c8d0e0; font-size: 12px; }

/* Este bloco faz os botoes grandes Enviar. */
.support-submit-v2 {
  width: 100%;
  min-height: 51px;
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-weight: 950;
  box-shadow: 0 14px 34px rgba(126, 34, 206, .28);
}

.support-submit-v2--report {
  color: #211200;
  background: linear-gradient(180deg, #ffd84d, #ffad16);
  box-shadow: 0 14px 34px rgba(245, 158, 11, .28);
}

.support-submit-v2--feedback { background: linear-gradient(100deg, #7c3aed, #f43f9c); }
.support-submit-v2:disabled { opacity: .55; cursor: not-allowed; }

.support-form-status-v2 { min-height: 20px; margin: 0; text-align: center; font-weight: 750; }
.support-form-status-v2.ok { color: #4ade80; }
.support-form-status-v2.error { color: #fb7185; }

/* Este rodape interno exibe o recado de privacidade. */
.support-card-foot-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 18px 18px;
  padding: 13px 15px;
  border: 1px solid rgba(139, 92, 246, .28);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
}

.support-card-foot-v2 > span { font-size: 25px; }
.support-card-foot-v2 p { margin: 0; color: #cfd4e3; font-size: 13px; line-height: 1.4; }
.support-card-foot-v2 strong { display: block; color: #fff; }

/* Estes tres cartoes formam a faixa final do computador. */
.support-values-v2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 15px 20px;
  border: 1px solid rgba(116, 95, 214, .28);
  border-radius: 15px;
  background: rgba(7, 13, 29, .78);
}

.support-values-v2 article { display: flex; gap: 12px; align-items: center; min-width: 0; }
.support-values-v2 article > span { color: #f472b6; font-size: 31px; }
.support-values-v2 strong { color: #f0abfc; }
.support-values-v2 p { margin: 3px 0 0; color: #c9cede; font-size: 12px; line-height: 1.4; }

/* No computador nao precisamos dos botoes de aba. */
.support-mobile-tabs-v2 { display: none; }

/* ================================================================
   CELULAR E TABLET
   Abaixo as duas colunas viram abas. Somente um formulario aparece por vez.
   ================================================================ */
@media (max-width: 720px) {
  .support-main-v2 { gap: 12px; padding: 18px 10px 104px; }
  .support-intro-v2 h1 { font-size: 26px; }
  .support-intro-v2 p { font-size: 14px; }

  .support-login-v2 { grid-template-columns: auto 1fr; }
  .support-login-v2 .btn { grid-column: 1 / -1; width: 100%; }

  .support-mobile-tabs-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, .38);
    border-radius: 9px;
    background: rgba(9, 13, 29, .92);
  }

  .support-mobile-tabs-v2 button {
    min-height: 48px;
    padding: 7px;
    border: 0;
    background: transparent;
    color: #c4b5fd;
    font-size: 12px;
    font-weight: 900;
  }

  .support-mobile-tabs-v2 button.active {
    color: #fff3b0;
    background: rgba(245, 158, 11, .13);
    box-shadow: inset 0 -2px #fbbf24;
  }

  .support-forms-v2 { display: block; }
  .support-card-v2 { display: none; border-radius: 11px; }
  .support-card-v2.active { display: block; }
  .support-card-head-v2 { min-height: 76px; padding: 14px; }
  .support-card-head-v2 h2 { font-size: 18px; }
  .support-card-head-v2 p { font-size: 12px; }
  .support-card-icon-v2 { width: 46px; height: 46px; flex-basis: 46px; }
  .support-form-v2 { padding: 13px; }
  .support-form-v2 textarea { min-height: 112px; }
  .support-upload-grid-v2 { grid-template-columns: 1fr; }
  .support-upload-v2 { min-height: 96px; }
  .support-card-foot-v2 { margin: 0 13px 13px; }
  .support-values-v2 { grid-template-columns: 1fr; padding: 14px; }
}

/* Em telas muito estreitas reduz somente espacos, nunca os campos de toque. */
@media (max-width: 360px) {
  .support-main-v2 { padding-inline: 7px; }
  .support-mobile-tabs-v2 button { font-size: 11px; }
  .support-form-v2 { padding-inline: 10px; }
}