/* =========================================================
   OMC - HF TUTORIAIS 02
   Central de Ajuda - correcao de disposicao
   ========================================================= */

/* Desktop:
   o menu deixa de ocupar uma coluna inteira sozinho.
   Os atalhos ficam em uma barra superior e o conteudo usa
   toda a largura util da pagina. */
.helpLayout{
  display:block !important;
  width:100% !important;
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.helpNav{
  position:static !important;
  top:auto !important;
  width:100% !important;
  max-width:none !important;
  margin:0 0 24px !important;
  padding:18px !important;

  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  align-content:flex-start !important;
  gap:9px !important;
}

.helpNav h3{
  flex:0 0 100% !important;
  margin:0 0 6px !important;
}

.helpNav > a{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:10px 14px !important;
  border:1px solid rgba(148,163,184,.28);
  border-radius:12px !important;
  line-height:1.25 !important;
}

/* Area dos guias antigos.
   Em telas largas, usa duas colunas e elimina o grande vazio
   observado ao lado do menu. */
.helpContent{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:start !important;
  gap:20px !important;

  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

.helpContent > *{
  min-width:0 !important;
}

.helpArticle{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

.helpSupport{
  grid-column:1 / -1 !important;
}

/* Conteudo V18/OMC SOCIAL preservado e ocupando a largura correta. */
.helpContent > .v18LegacyTutorialHost,
.helpContent > .v18LegacyTutorialGrid,
.v18LegacyTutorialHost{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

.helpContent > .v18LegacyTutorialHost,
.helpContent > .v18LegacyTutorialGrid{
  grid-column:1 / -1 !important;
}

/* A Central de Tutoriais em video continua independente,
   mas recebe largura consistente com a Central de Ajuda. */
#video-tutoriais .container,
#video-tutoriais .tutShell{
  min-width:0 !important;
}

/* Tablet: uma coluna de conteudo para melhorar leitura. */
@media (max-width:1000px){
  .helpContent{
    grid-template-columns:1fr !important;
  }

  .helpSupport,
  .helpContent > .v18LegacyTutorialHost,
  .helpContent > .v18LegacyTutorialGrid{
    grid-column:auto !important;
  }
}

/* Mobile: atalhos em duas colunas. */
@media (max-width:760px){
  .helpNav{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    padding:14px !important;
    margin-bottom:18px !important;
  }

  .helpNav h3{
    grid-column:1 / -1 !important;
  }

  .helpNav > a{
    width:100% !important;
    min-height:44px;
    display:flex !important;
    align-items:center !important;
    white-space:normal !important;
  }

  .helpContent{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

/* Celulares estreitos: uma coluna de atalhos. */
@media (max-width:430px){
  .helpNav{
    grid-template-columns:1fr !important;
  }

  .helpNav h3{
    grid-column:auto !important;
  }
}