/* ================================================================================================
   OMC V19 - A38 - MODO IMERSAO / LEITURA EXPANDIDA

   Regras:
   - usa o DOM existente
   - nao clona qcard
   - nao altera readerState
   - lightbox legado (z-index 120) permanece acima
   ================================================================================================ */

body.omcImmersionOpen{
  overflow:hidden !important;
  overscroll-behavior:none;
}

#questionLayout.omcImmersionMode{
  position:fixed !important;
  inset:0 !important;
  z-index:110 !important;

  display:block !important;

  width:100vw !important;
  max-width:none !important;
  height:100dvh !important;

  margin:0 !important;
  padding:0 18px 32px !important;

  overflow-x:hidden !important;
  overflow-y:auto !important;

  overscroll-behavior:contain;

  background:#f3f6f8;
}

#questionLayout.omcImmersionMode .arsenalFilters{
  display:none !important;
}

#questionLayout.omcImmersionMode .readerColumn{
  width:min(1280px,100%) !important;
  max-width:none !important;
  min-width:0 !important;

  margin:0 auto !important;
  padding:0 !important;
}

#questionLayout.omcImmersionMode .readerToolbar{
  position:sticky !important;
  top:0 !important;
  z-index:112 !important;

  width:100% !important;

  margin:0 0 14px !important;

  border-radius:0 0 16px 16px !important;

  box-shadow:
    0 8px 28px rgba(7,24,39,.10);
}

#questionLayout.omcImmersionMode #qcard{
  width:100% !important;
  max-width:none !important;

  margin:0 auto !important;

  overflow:visible !important;

  border-radius:18px !important;

  box-shadow:
    0 18px 50px rgba(7,24,39,.10);
}

/*
 * Na imersao o enunciado deve aparecer completo,
 * sem alterar expandedStatements.
 */
#questionLayout.omcImmersionMode #qstatement.isCollapsed{
  display:block !important;

  max-height:none !important;
  height:auto !important;

  overflow:visible !important;

  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;

  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/*
 * O toggle mobile deixa de ser necessario enquanto
 * a questao inteira esta em modo imersivo.
 */
#questionLayout.omcImmersionMode .statementExpand{
  display:none !important;
}

/* Mais espaco para leitura */
#questionLayout.omcImmersionMode .examPaper{
  width:100%;
}

#questionLayout.omcImmersionMode .questionBody{
  width:100%;
}

#questionLayout.omcImmersionMode .qstatement,
#questionLayout.omcImmersionMode .qcommand,
#questionLayout.omcImmersionMode .feedbackComment{
  max-width:none !important;
}

#questionLayout.omcImmersionMode .examOptions{
  display:grid;
  gap:14px;
}

#questionLayout.omcImmersionMode .optionRow{
  width:100%;
}

/*
 * Tabelas nunca devem ser comprimidas.
 */
#questionLayout.omcImmersionMode .qRichTableWrap{
  width:100%;
  max-width:100%;

  overflow-x:auto;

  -webkit-overflow-scrolling:touch;
}

/*
 * Imagens ganham area maior.
 * O clique continua abrindo o lightbox legado.
 */
#questionLayout.omcImmersionMode .questionImages{
  width:100%;
}

#questionLayout.omcImmersionMode .questionImageButton img{
  width:100%;
  max-width:100%;
  max-height:72vh !important;

  object-fit:contain;
}

/*
 * O lightbox atual usa z-index 120.
 * A imersao fica em 110, portanto o zoom continua acima.
 */
.imageLightbox{
  z-index:120;
}

/* Botao A38 */
.immersionBtnV19{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  white-space:nowrap;
}

.immersionBtnV19 svg{
  width:17px;
  height:17px;

  flex:0 0 auto;
}

.immersionBtnV19.active{
  border-color:#516f83;
  background:#e7f0f6;
}

/*
 * Tema escuro:
 * o card continua sendo controlado pelo readerState existente.
 * A camada de fundo acompanha visualmente sem alterar localStorage.
 */
body.omcImmersionOpen:has(#qcard.readerDark)
#questionLayout.omcImmersionMode{
  background:#07121a;
}

/* Desktop amplo */
@media (min-width:1400px){

  #questionLayout.omcImmersionMode .readerColumn{
    width:min(1380px,100%) !important;
  }

  #questionLayout.omcImmersionMode #qcard{
    padding:
      clamp(28px,3vw,48px) !important;
  }
}

/* Tablet */
@media (max-width:900px){

  #questionLayout.omcImmersionMode{
    padding:
      0 12px 24px !important;
  }

  #questionLayout.omcImmersionMode .readerToolbar{
    top:0 !important;
  }

  #questionLayout.omcImmersionMode #qcard{
    border-radius:14px !important;
  }
}

/* Mobile */
@media (max-width:560px){

  #questionLayout.omcImmersionMode{
    padding:
      0 8px 18px !important;
  }

  #questionLayout.omcImmersionMode .readerToolbar{
    border-radius:
      0 0 12px 12px !important;
  }

  #questionLayout.omcImmersionMode #qcard{
    padding:
      18px 14px !important;

    border-radius:
      12px !important;
  }

  .immersionBtnV19{
    min-width:38px;
    padding:
      7px 9px !important;
  }

  .immersionBtnV19 span{
    display:none;
  }

  .immersionBtnV19 svg{
    width:19px;
    height:19px;
  }

  #questionLayout.omcImmersionMode .questionActions{
    padding-bottom:
      max(
        10px,
        env(safe-area-inset-bottom)
      );
  }
}

/* ================================================================================================
   OMC V19 A38-R5.1 VISUAL REBALANCE
   Somente Modo Imersao.
   ================================================================================================ */

/* -----------------------------------------------------------------------------------------------
   1. CANVAS GERAL
   Reduz os enormes vazios laterais vistos em monitores largos.
   ----------------------------------------------------------------------------------------------- */

#questionLayout.omcImmersionMode{
  padding:
    10px
    clamp(18px,2.4vw,46px)
    34px !important;
}

#questionLayout.omcImmersionMode .readerColumn{
  width:min(1540px,100%) !important;
  max-width:1540px !important;
  margin:0 auto !important;
}

/* -----------------------------------------------------------------------------------------------
   2. TOOLBAR SUPERIOR
   Mais compacta e melhor distribuida.
   ----------------------------------------------------------------------------------------------- */

#questionLayout.omcImmersionMode .readerToolbar{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  gap:18px !important;

  padding:8px 12px !important;
  margin:0 auto 12px !important;

  min-height:54px !important;

  border-radius:0 0 14px 14px !important;
}

#questionLayout.omcImmersionMode .readerToolbarLeft{
  min-width:0 !important;
}

#questionLayout.omcImmersionMode .readerControls{
  min-width:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:7px !important;
}

/* -----------------------------------------------------------------------------------------------
   3. CARD PRINCIPAL
   ----------------------------------------------------------------------------------------------- */

#questionLayout.omcImmersionMode #qcard{
  width:100% !important;
  max-width:none !important;

  margin:0 auto !important;

  border-radius:16px !important;
}

/* Cabeçalho um pouco mais compacto */

#questionLayout.omcImmersionMode .examQuestionTop{
  padding:
    18px
    clamp(24px,2.2vw,36px)
    14px !important;
}

#questionLayout.omcImmersionMode .examMeta{
  padding:
    8px
    clamp(24px,2.2vw,36px) !important;

  flex-wrap:wrap !important;
}

/* -----------------------------------------------------------------------------------------------
   4. ORGANIZE SEU ESTUDO
   No desktop largo deixa de ocupar duas grandes faixas.
   ----------------------------------------------------------------------------------------------- */

#questionLayout.omcImmersionMode .qPersonalTools{
  display:grid !important;

  grid-template-columns:
    minmax(300px,.72fr)
    minmax(0,1.65fr) !important;

  align-items:center !important;

  gap:18px !important;

  padding:
    10px
    clamp(20px,2vw,32px)
    11px !important;
}

#questionLayout.omcImmersionMode .qPersonalToolsHead{
  margin:0 !important;
  min-width:0 !important;
}

#questionLayout.omcImmersionMode .qPersonalToolsHead > div{
  min-width:0 !important;
}

#questionLayout.omcImmersionMode .qPersonalToolsHead small{
  display:none !important;
}

#questionLayout.omcImmersionMode .qPersonalToolsHeadActions{
  gap:7px !important;
}

#questionLayout.omcImmersionMode .qPersonalToolsGrid{
  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  gap:8px !important;
}

#questionLayout.omcImmersionMode .qPersonalAction{
  min-height:42px !important;

  padding:7px 10px !important;

  border-radius:10px !important;
}

/* -----------------------------------------------------------------------------------------------
   5. QUESTAO - LAYOUT AMPLO
   Desktop largo:
      esquerda = enunciado
      direita  = instrução / alternativas / confirmação
   ----------------------------------------------------------------------------------------------- */

@media (min-width:1181px){

  #questionLayout.omcImmersionMode .examPaper{
    display:grid !important;

    grid-template-columns:
      minmax(0,1.06fr)
      minmax(480px,.94fr) !important;

    grid-template-areas:
      "question instruction"
      "question options"
      "question decision" !important;

    column-gap:
      clamp(28px,2.6vw,46px) !important;

    row-gap:12px !important;

    align-items:start !important;

    padding:
      28px
      clamp(30px,3vw,52px)
      32px !important;
  }

  #questionLayout.omcImmersionMode .questionBody{
    grid-area:question !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    padding-right:
      clamp(24px,2vw,38px) !important;

    border-right:
      1px solid #e1e7eb !important;
  }

  #questionLayout.omcImmersionMode .answerInstruction{
    grid-area:instruction !important;

    width:100% !important;
    max-width:none !important;

    margin:0 0 3px !important;
  }

  #questionLayout.omcImmersionMode .examOptions{
    grid-area:options !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    gap:10px !important;
  }

  #questionLayout.omcImmersionMode .answerDecision{
    grid-area:decision !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;
  }

  #questionLayout.omcImmersionMode .qcommand{
    width:100% !important;
    max-width:none !important;

    margin:
      22px
      0
      8px !important;
  }

  #questionLayout.omcImmersionMode .questionImages{
    width:100% !important;
    max-width:none !important;

    margin-left:0 !important;
    margin-right:0 !important;
  }

  #questionLayout.omcImmersionMode .optionRow .option{
    min-height:62px !important;

    padding:
      13px
      15px !important;
  }

  /*
   * Questao com tabela ou imagem:
   * preserva largura integral do material.
   */
  #questionLayout.omcImmersionMode
  .examPaper:has(.qRichTableWrap),

  #questionLayout.omcImmersionMode
  .examPaper:has(.questionImages){
    grid-template-columns:1fr !important;

    grid-template-areas:
      "question"
      "instruction"
      "options"
      "decision" !important;
  }

  #questionLayout.omcImmersionMode
  .examPaper:has(.qRichTableWrap)
  .questionBody,

  #questionLayout.omcImmersionMode
  .examPaper:has(.questionImages)
  .questionBody{
    padding-right:0 !important;

    border-right:0 !important;
  }

  #questionLayout.omcImmersionMode
  .examPaper:has(.qRichTableWrap)
  .answerInstruction,

  #questionLayout.omcImmersionMode
  .examPaper:has(.qRichTableWrap)
  .examOptions,

  #questionLayout.omcImmersionMode
  .examPaper:has(.qRichTableWrap)
  .answerDecision,

  #questionLayout.omcImmersionMode
  .examPaper:has(.questionImages)
  .answerInstruction,

  #questionLayout.omcImmersionMode
  .examPaper:has(.questionImages)
  .examOptions,

  #questionLayout.omcImmersionMode
  .examPaper:has(.questionImages)
  .answerDecision{
    width:min(1000px,100%) !important;

    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* -----------------------------------------------------------------------------------------------
   6. LEGIBILIDADE
   ----------------------------------------------------------------------------------------------- */

#questionLayout.omcImmersionMode .qstatement{
  line-height:1.68 !important;
}

#questionLayout.omcImmersionMode .optionRow .optionText{
  line-height:1.58 !important;
}

#questionLayout.omcImmersionMode .answerInstruction{
  border-color:#dbe2e7 !important;
}

/* Dark mode */

#questionLayout.omcImmersionMode
#qcard.readerDark
.questionBody{
  border-right-color:#31424e !important;
}

/* -----------------------------------------------------------------------------------------------
   7. NAVEGACAO
   Mais clara visualmente no rodape.
   ----------------------------------------------------------------------------------------------- */

#questionLayout.omcImmersionMode .questionActions{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;

  gap:14px !important;

  padding:
    15px
    clamp(24px,2.5vw,40px) !important;
}

#questionLayout.omcImmersionMode .questionActions .btn{
  min-width:150px !important;
}

/* -----------------------------------------------------------------------------------------------
   8. TABLET / NOTEBOOK
   Uma coluna tradicional.
   ----------------------------------------------------------------------------------------------- */

@media (max-width:1180px){

  #questionLayout.omcImmersionMode .readerColumn{
    width:min(1080px,100%) !important;
  }

  #questionLayout.omcImmersionMode .examPaper{
    display:block !important;

    padding:
      26px
      clamp(18px,3vw,34px)
      28px !important;
  }

  #questionLayout.omcImmersionMode .questionBody,
  #questionLayout.omcImmersionMode .qcommand,
  #questionLayout.omcImmersionMode .answerInstruction,
  #questionLayout.omcImmersionMode .examOptions,
  #questionLayout.omcImmersionMode .answerDecision,
  #questionLayout.omcImmersionMode .questionImages{
    width:min(900px,100%) !important;
    max-width:none !important;

    margin-left:auto !important;
    margin-right:auto !important;
  }

  #questionLayout.omcImmersionMode .qPersonalTools{
    display:block !important;
  }

  #questionLayout.omcImmersionMode .qPersonalToolsHead{
    margin-bottom:9px !important;
  }
}

/* -----------------------------------------------------------------------------------------------
   9. MOBILE
   Mantem a experiência já homologada.
   ----------------------------------------------------------------------------------------------- */

@media (max-width:700px){

  #questionLayout.omcImmersionMode{
    padding:
      0
      8px
      18px !important;
  }

  #questionLayout.omcImmersionMode .readerToolbar{
    display:flex !important;

    gap:7px !important;

    padding:
      7px
      8px !important;
  }

  #questionLayout.omcImmersionMode .readerControls{
    justify-content:flex-start !important;

    overflow-x:auto !important;

    flex-wrap:nowrap !important;
  }

  #questionLayout.omcImmersionMode .qPersonalTools{
    display:block !important;

    padding:
      10px
      10px
      12px !important;
  }

  #questionLayout.omcImmersionMode .qPersonalToolsHead small{
    display:none !important;
  }

  #questionLayout.omcImmersionMode .qPersonalToolsGrid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  #questionLayout.omcImmersionMode .examPaper{
    padding:
      22px
      14px
      22px !important;
  }

  #questionLayout.omcImmersionMode .questionActions{
    flex-direction:column-reverse !important;

    padding:
      14px
      14px
      max(14px,env(safe-area-inset-bottom)) !important;
  }

  #questionLayout.omcImmersionMode .questionActions .btn{
    width:100% !important;
    min-width:0 !important;
  }
}

/* END OMC V19 A38-R5.1 VISUAL REBALANCE */

/* ================================================================================================
   OMC V19 A38-R5.2 FINAL DISTRIBUTION

   Refinamento após QA visual:
   - remove a divisao rigida de duas colunas
   - aproveita a largura sem criar grandes vazios
   - preserva leitura vertical natural de prova
   ================================================================================================ */

/* ------------------------------------------------------------------------------------------------
   FERRAMENTAS PESSOAIS RECOLHIDAS
   ------------------------------------------------------------------------------------------------ */

#questionLayout.omcImmersionMode
.qPersonalTools.isCollapsed{
  display:block !important;

  padding:
    9px
    clamp(22px,2.4vw,38px) !important;
}

#questionLayout.omcImmersionMode
.qPersonalTools.isCollapsed
.qPersonalToolsHead{
  width:100% !important;

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  gap:18px !important;

  margin:0 !important;
}

#questionLayout.omcImmersionMode
.qPersonalTools.isCollapsed
.qPersonalToolsHead > div{
  flex:1 1 auto !important;
}

#questionLayout.omcImmersionMode
.qPersonalTools.isCollapsed
.qPersonalToolsHeadActions{
  flex:0 0 auto !important;

  display:flex !important;

  align-items:center !important;

  justify-content:flex-end !important;

  gap:9px !important;

  margin-left:auto !important;
}

#questionLayout.omcImmersionMode
.qPersonalTools.isCollapsed
.qPersonalToolsGrid{
  display:none !important;
}

/* ------------------------------------------------------------------------------------------------
   DESKTOP / NOTEBOOK GRANDE

   A questao volta a um fluxo vertical amplo:
     enunciado
     comando
     instrucao
     alternativas
     confirmacao
   ------------------------------------------------------------------------------------------------ */

@media (min-width:1181px){

  #questionLayout.omcImmersionMode .examPaper{
    display:block !important;

    padding:
      26px
      clamp(34px,4vw,68px)
      32px !important;
  }

  /*
   * Texto principal.
   *
   * Sai do antigo limite de 82ch, mas nao vira
   * uma linha gigantesca de ponta a ponta.
   */
  #questionLayout.omcImmersionMode .questionBody{
    width:min(1180px,100%) !important;
    max-width:none !important;

    margin:
      0
      auto !important;

    padding:0 !important;

    border-right:0 !important;
  }

  #questionLayout.omcImmersionMode .qstatement{
    width:100% !important;
    max-width:none !important;

    margin-left:auto !important;
    margin-right:auto !important;
  }

  #questionLayout.omcImmersionMode .qcommand{
    width:min(1180px,100%) !important;
    max-width:none !important;

    margin:
      22px
      auto
      8px !important;
  }

  #questionLayout.omcImmersionMode .questionImages{
    width:min(1180px,100%) !important;
    max-width:none !important;

    margin-left:auto !important;
    margin-right:auto !important;
  }

  /*
   * Área de resposta.
   *
   * Mais larga que o layout legado 82ch,
   * mas ligeiramente menor que o enunciado
   * para criar hierarquia visual.
   */
  #questionLayout.omcImmersionMode .answerInstruction{
    width:min(1080px,100%) !important;
    max-width:none !important;

    margin:
      24px
      auto
      12px !important;

    padding:
      11px
      15px !important;
  }

  #questionLayout.omcImmersionMode .examOptions{
    width:min(1080px,100%) !important;
    max-width:none !important;

    margin:
      0
      auto
      20px !important;

    gap:9px !important;
  }

  #questionLayout.omcImmersionMode .answerDecision{
    width:min(1080px,100%) !important;
    max-width:none !important;

    margin:
      0
      auto !important;
  }

  #questionLayout.omcImmersionMode .optionRow{
    width:100% !important;
  }

  #questionLayout.omcImmersionMode .optionRow .option{
    min-height:58px !important;

    padding:
      12px
      15px !important;
  }

  /*
   * Questao com tabela ou imagem recebe ainda
   * mais largura para o material visual.
   */
  #questionLayout.omcImmersionMode
  .examPaper:has(.qRichTableWrap)
  .questionBody,

  #questionLayout.omcImmersionMode
  .examPaper:has(.questionImages)
  .questionBody,

  #questionLayout.omcImmersionMode
  .examPaper:has(.qRichTableWrap)
  .questionImages,

  #questionLayout.omcImmersionMode
  .examPaper:has(.questionImages)
  .questionImages{
    width:min(1320px,100%) !important;
  }

  #questionLayout.omcImmersionMode
  .examPaper:has(.qRichTableWrap)
  .answerInstruction,

  #questionLayout.omcImmersionMode
  .examPaper:has(.qRichTableWrap)
  .examOptions,

  #questionLayout.omcImmersionMode
  .examPaper:has(.qRichTableWrap)
  .answerDecision,

  #questionLayout.omcImmersionMode
  .examPaper:has(.questionImages)
  .answerInstruction,

  #questionLayout.omcImmersionMode
  .examPaper:has(.questionImages)
  .examOptions,

  #questionLayout.omcImmersionMode
  .examPaper:has(.questionImages)
  .answerDecision{
    width:min(1180px,100%) !important;
  }
}

/* ------------------------------------------------------------------------------------------------
   ALTERNATIVAS
   ------------------------------------------------------------------------------------------------ */

#questionLayout.omcImmersionMode .examOptions{
  position:relative;
}

#questionLayout.omcImmersionMode .optionRow{
  align-items:stretch !important;
}

#questionLayout.omcImmersionMode .optionRow .option{
  border-radius:10px !important;
}

#questionLayout.omcImmersionMode .eliminateOption{
  border-radius:10px !important;
}

/* ------------------------------------------------------------------------------------------------
   INSTRUCAO
   Menos caixa pesada, mais integracao com as alternativas.
   ------------------------------------------------------------------------------------------------ */

#questionLayout.omcImmersionMode .answerInstruction{
  background:#f8fafb !important;

  border-color:#dce3e8 !important;

  border-radius:10px !important;
}

/* ------------------------------------------------------------------------------------------------
   RODAPE / NAVEGACAO
   ------------------------------------------------------------------------------------------------ */

#questionLayout.omcImmersionMode .questionActions{
  width:100% !important;

  display:flex !important;

  align-items:center !important;

  justify-content:space-between !important;

  gap:16px !important;

  padding:
    14px
    clamp(30px,4vw,66px)
    16px !important;
}

/* ------------------------------------------------------------------------------------------------
   MOBILE / TABLET
   Mantem o contrato já homologado.
   ------------------------------------------------------------------------------------------------ */

@media (max-width:1180px){

  #questionLayout.omcImmersionMode .examPaper{
    display:block !important;
  }

  #questionLayout.omcImmersionMode .questionBody,
  #questionLayout.omcImmersionMode .qcommand,
  #questionLayout.omcImmersionMode .questionImages,
  #questionLayout.omcImmersionMode .answerInstruction,
  #questionLayout.omcImmersionMode .examOptions,
  #questionLayout.omcImmersionMode .answerDecision{
    max-width:none !important;
  }
}

@media (max-width:700px){

  #questionLayout.omcImmersionMode
  .qPersonalTools.isCollapsed{
    padding:
      9px
      10px !important;
  }

  #questionLayout.omcImmersionMode
  .qPersonalTools.isCollapsed
  .qPersonalToolsHead{
    gap:8px !important;
  }

  #questionLayout.omcImmersionMode
  .qPersonalTools.isCollapsed
  .qPersonalToolsHeadActions{
    gap:6px !important;
  }
}

/* END OMC V19 A38-R5.2 FINAL DISTRIBUTION */