/* V18_HELP_SOCIAL_CSS
   Extensao da Central de Ajuda existente.
   Escopo visual exclusivo das secoes sociais/rankings.
*/

.v18HelpNewEntry{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:10px 0 4px;
  padding:9px 12px;
  border:1px solid #c9dcf3;
  border-radius:9px;
  background:#eef6ff;
  color:#0b5fc5;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}

.v18HelpNewEntry:hover{
  border-color:#0b63cc;
  background:#e6f2ff;
}

.v18HelpSocial{
  margin-top:28px;
}

.v18HelpSocialHero{
  padding:24px;
  border:1px solid #d8e5f2;
  border-radius:16px;
  background:
    linear-gradient(
      135deg,
      #f4f9ff,
      #ffffff
    );
}

.v18HelpSocialEyebrow{
  display:inline-flex;
  margin-bottom:7px;
  padding:5px 8px;
  border-radius:999px;
  background:#e8f3ff;
  color:#0b61c6;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
}

.v18HelpSocialHero h2{
  margin:0 0 8px;
}

.v18HelpSocialHero p{
  margin:0;
  color:#62768a;
  line-height:1.6;
}

.v18HelpSocialNav{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:16px;
}

.v18HelpSocialNav a{
  padding:8px 10px;
  border:1px solid #d3dfec;
  border-radius:8px;
  background:#fff;
  color:#315d88;
  text-decoration:none;
  font-size:12px;
  font-weight:750;
}

.v18HelpSocialBlock{
  margin-top:15px;
  padding:21px;
  border:1px solid #dfe7ef;
  border-radius:13px;
  background:#fff;
}

.v18HelpSocialBlock h2{
  margin:0 0 9px;
}

.v18HelpSocialBlock h3{
  margin:17px 0 7px;
  color:#235787;
}

.v18HelpSocialBlock p,
.v18HelpSocialBlock li{
  color:#62768a;
  line-height:1.65;
}

.v18HelpSteps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:15px;
}

.v18HelpStep{
  padding:13px;
  border:1px solid #dde7f0;
  border-radius:10px;
  background:#f9fbfd;
}

.v18HelpStep strong{
  display:block;
  margin-bottom:5px;
  color:#0d61c5;
}

.v18HelpNotice{
  margin-top:13px;
  padding:13px 14px;
  border:1px solid #d5e4f4;
  border-radius:10px;
  background:#f5f9fe;
}

.v18HelpNotice strong{
  color:#265d90;
}

.v18HelpNotice p{
  margin:5px 0 0;
}

.v18HelpNotice.safe{
  border-color:#cbe8d8;
  background:#f3fbf7;
}

.v18HelpNotice.safe strong{
  color:#347657;
}

.v18HelpNotice.warning{
  border-color:#eadca8;
  background:#fffaf0;
}

.v18HelpNotice.warning strong{
  color:#88651d;
}

.v18HelpNotice.danger{
  border-color:#eccbd0;
  background:#fff6f7;
}

.v18HelpNotice.danger strong{
  color:#a34350;
}

.v18HelpGuidelines{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:14px;
}

.v18HelpGuideline{
  padding:14px;
  border-left:3px solid #0b63cc;
  border-radius:8px;
  background:#f8fbff;
}

.v18HelpGuideline strong{
  display:block;
  margin-bottom:4px;
  color:#255a8b;
}

.v18HelpFaq{
  display:grid;
  gap:8px;
  margin-top:14px;
}

.v18HelpFaq details{
  padding:12px 14px;
  border:1px solid #dde6ef;
  border-radius:9px;
  background:#fff;
}

.v18HelpFaq summary{
  cursor:pointer;
  color:#285985;
  font-weight:800;
}

.v18HelpFaq p{
  margin:9px 0 0;
}

@media(max-width:760px){

  .v18HelpSteps{
    grid-template-columns:1fr;
  }

  .v18HelpGuidelines{
    grid-template-columns:1fr;
  }

  .v18HelpSocialHero,
  .v18HelpSocialBlock{
    padding:17px;
  }
}

/* V18_HELP_LAYOUT_FIX_R4_START */

/*
 * Corrige o auto-placement do grid da Central de Ajuda.
 * Os tutoriais devem ocupar a coluna principal, nunca a lateral.
 */

.v18HelpSocial,
#conta,
#compras,
#materiais,
#arsenal-help,
#simulados-help,
#drive-help,
#musica-help,
#suporte{
  width:100%;
  max-width:none;
  min-width:0;

  grid-column:2 / -1;
}

/* O bloco V18 deve obedecer a largura da coluna principal. */
.v18HelpSocial{
  align-self:start;
}

/* Remove qualquer limitação acidental de largura. */
.v18HelpSocialHero,
.v18HelpSocialBlock{
  width:100%;
  max-width:none;
  min-width:0;
}

/* Espaçamento melhor entre os módulos. */
.v18HelpSocialBlock{
  margin-top:18px;
}

/* Navegação interna mais organizada. */
.v18HelpSocialNav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  width:100%;
}

/* Tutorial em duas colunas no desktop.
   Quatro cards lado a lado estavam excessivamente comprimidos. */
.v18HelpSteps{
  grid-template-columns:
    repeat(2,minmax(0,1fr));
}

/* Diretrizes em duas colunas, com cards equilibrados. */
.v18HelpGuidelines{
  grid-template-columns:
    repeat(2,minmax(0,1fr));
}

/* Previne overflow de textos/links. */
.v18HelpSocial,
.v18HelpSocial *{
  overflow-wrap:anywhere;
}

/* Melhora navegação por âncoras com o header fixo. */
#omc-social-help,
#perfil-privacidade-help,
#feed-social-help,
#usuarios-social-help,
#conexoes-social-help,
#comunidades-social-help,
#seguranca-social-help,
#rankings-help,
#diretrizes-social-help,
#faq-social-help{
  scroll-margin-top:90px;
}

/* Botão de entrada para as novas áreas. */
.v18HelpNewEntry{
  width:100%;
  justify-content:flex-start;
  margin-top:10px;
}

/* Tablets */
@media(max-width:980px){

  .v18HelpSocial,
  #conta,
  #compras,
  #materiais,
  #arsenal-help,
  #simulados-help,
  #drive-help,
  #musica-help,
  #suporte{
    grid-column:1 / -1;
  }

  .v18HelpSteps{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

/* Celulares */
@media(max-width:680px){

  .v18HelpSteps,
  .v18HelpGuidelines{
    grid-template-columns:1fr;
  }

  .v18HelpSocialNav{
    display:grid;
    grid-template-columns:1fr;
  }

  .v18HelpSocialNav a{
    width:100%;
  }

  .v18HelpSocialHero,
  .v18HelpSocialBlock{
    padding:16px;
  }
}

/* V18_HELP_LAYOUT_FIX_R4_END */