/* ============================================================
   STYLE-MOBILE.CSS
   Versão otimizada para telas ≤ 770px (consolidada / sem duplicatas)
   ============================================================ */

/* Layout base: 1 coluna */
.container {
  display: block !important;
}
.main-content {
  width: 100% !important;
}

/* Editor ocupa o viewport inteiro (com respiro para topbar/toolbar/dock) */
.editor-textarea {
  padding: 16px !important;
  min-height: calc(100vh - 140px) !important;
}
.editor-textarea.folha {
  padding: 28px 18px !important;
  box-shadow: none;
  border-radius: 8px;
}

/* Sticky base (ajustado no @media) */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
}
.editor-toolbar {
  position: sticky;
  top: 52px;
  z-index: 20;
  flex-wrap: wrap;
  gap: 8px;
}
.editor-toolbar-esquerda,
.editor-toolbar-direita {
  width: 100% !important;
  justify-content: space-between;
}

/* Sidebar e painel direito viram drawers */
.sidebar,
.chatbot {
  position: fixed !important;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: 10010;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow-y: auto;
  padding-right: 12px;
  pointer-events: auto;
}

/* Sidebar (menu de seções) */
.sidebar {
  left: 0;
  width: 86vw;
  max-width: 420px;
  transform: translateX(-110%);
  transition: transform 0.25s ease;
}
.sidebar.is-open {
  transform: translateX(0);
}

/* Painel direito (refine) */
.chatbot {
  right: 0;
  width: 88vw;
  max-width: 420px;
  transform: translateX(110%);
  transition: transform 0.25s ease;
}
.chatbot.is-open {
  transform: translateX(0);
}

/* Backdrop (escurece fundo quando drawer aberto) */
#mobileBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10000;
}
#mobileBackdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Dock fixo no rodapé */
#mobileDock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 12px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  z-index: 10020;
}
#mobileDock .dock-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #dfe3e8;
  background: #f8f9fb;
  font-weight: 600;
}
#mobileDock .dock-btn:active {
  transform: translateY(1px);
}

/* Respiro para o dock (evita sobrepor texto final) */
.main-content,
.content,
.editor-container {
  padding-bottom: 72px !important;
}

/* Travar scroll quando drawer aberto */
body.drawer-open {
  overflow: hidden;
}

/* Ajustes tipográficos e folhas */
.editor-textarea h3 {
  font-size: 18px !important;
}
.editor-textarea ul {
  padding-left: 18px !important;
}

/* Wizard / modais adaptados */
.wizard-panel,
.wizard-card,
.selector-card {
  width: 96vw !important;
  max-width: 96vw !important;
  height: auto !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}
.modal-card {
  max-width: 96vw !important;
  width: 96vw !important;
  max-height: 90vh;
  overflow-y: auto;
}

/* Sidebar e chatbot escondidos quando fechados (mas ainda manipuláveis via JS) */
.sidebar:not(.is-open),
.chatbot:not(.is-open) {
  visibility: hidden;
}

/* Pequenas otimizações */
html,
body,
#app-content {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ============================================================
   MOBILE OVERRIDES (tudo consolidado aqui)
   ============================================================ */
@media (max-width: 770px) {

  /* Evitar “gap” inicial: NÃO empurrar container */
  .container {
    padding-top: 0 !important;
  }

  /* ===== Barra superior real (logo + créditos + user + sair) ===== */
  .barra-total-topo {
    position: sticky !important;
    top: 0 !important;
    z-index: 20005 !important; /* abaixo dos drawers/backdrop, acima do conteúdo */
    background: #eef5fb !important;

    height: 56px !important;
    align-items: center !important;
    padding: 0 10px !important;
    gap: 10px !important;
    flex: 0 0 auto !important;

    overflow: visible !important;
    margin: 0 !important;
  }

  .btt-logo {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .btt-logo img {
    max-width: 120px !important;
    margin: 0 !important;
    height: auto !important;
  }

  /* Esconde menu horizontal do topo no mobile (Suporte/Sobre/etc) */
  .btt-main {
    width: auto !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }
  .btt-esquerda {
    display: none !important;
  }

  /* Área do usuário no topo: manter só ícone */
  .btt-rigth-user {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .btt-user-profile span {
    display: none !important;
  }

  /* Container do botão de créditos */
  .btt-direita {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 92px !important;
  }

  /* Botão créditos (badge) */
  #btnAssinarProTop {
    width: auto !important;
    min-width: 92px !important;
    height: 34px !important;
    min-height: 34px !important;

    padding: 0 10px !important;
    border-radius: 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #btnAssinarProTop i {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* ===== Barra do nome do TCC/seção ===== */
  .topbar {
    display: flex !important;
    position: sticky !important;
    top: 56px !important;     /* logo abaixo da barra superior */
    z-index: 10045 !important;
    background: #fff !important;

    height: 44px !important;
    align-items: center !important;
    padding: 0 12px !important;
    margin: 0 !important;
  }

  /* ===== Toolbar do editor ===== */
  .editor-toolbar {
    position: sticky !important;
    top: 100px !important;    /* 56 + 44 */
    z-index: 10040 !important;

    padding: 6px 8px !important;
    gap: 6px !important;
    border-radius: 0 !important;
  }

  .editor-toolbar-esquerda {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .editor-toolbar button {
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-right: 1px solid #ddd !important;
  }

 /* .editor-tbar-direita,
  .editor-toolbar-direita {
    width: 100% !important;
    justify-content: stretch !important;
  }

  #btn-export-pdf {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
  }*/
.editor-tbar-direita,
.editor-toolbar-direita {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
   margin-top: 6px !important;   /* ← NOVO espaço acima */
}

#btn-new-tcc-mobile {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  font-size: 15px !important;

  border: 1px solid #dfe3e8 !important;
  border-radius: 10px !important;
  background: #f7f8f8 !important;
  color: #007bff !important;
  font-weight: 600 !important;
}

#btn-export-pdf {
  width: auto !important;
  flex: 1 1 0 !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  border-left: none !important;
  border: 1px solid #dfe3e8 !important;
  border-radius: 10px !important;
  background: #f8f9fb !important;
  color: #007bff !important;
}
#btn-export-pdf {
  background: #f8f9fb !important;
  border: 1px solid #dfe3e8 !important;
  color: #007bff !important;
}

  /* Remove empurrões visuais */
  .content {
    margin-top: 0 !important;
  }

  /* Editor: área útil no mobile */
  .editor-textarea {
    font-size: 16px !important;
    min-height: calc(100dvh - 56px - 44px - 52px - 72px) !important;
  }

  /* Evitar “vazamento” lateral */
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ===== Camadas (z-index) para drawers ===== */
  #mobileBackdrop {
    z-index: 20000 !important;
  }
  .sidebar,
  .chatbot {
    z-index: 20010 !important;
  }

  /* Dock sempre na frente dos drawers */
  #mobileDock {
    z-index: 30000 !important;
  }

  /* Scroll com sticky headers (âncoras/scrollIntoView) */
  html {
    scroll-padding-top: 110px !important; /* 56 + 44 + ~10 */
  }
}

/* ============================================================
   WIZARD / MODAL DE CRÉDITOS (CORRIGIDO)
   ============================================================ */

/* ============================================================
   WIZARD / MODAL DE CRÉDITOS (AJUSTADO)
   ============================================================ */

#creditWizard.modal-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 100000 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: none;
}

#creditWizard.modal-overlay:not(.hidden) {
    display: flex !important;
}

/* Card mais largo e com respiro interno para o botão */
#creditWizard .modal-card {
    width: 96vw !important; /* Aumentado para ocupar mais espaço lateral */
    max-width: 520px !important;
    max-height: 85dvh !important;
    background: #fff !important;
    border-radius: 16px !important;
    position: relative !important;
    margin: auto !important;
    padding: 20px 15px 15px 15px !important; /* Padding superior maior para o botão */
    
    /* Scroll e Trava de segurança */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    transform: none !important;
}

/* Botão de fechar posicionado no canto superior direito */
#creditWizard .fechar-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 50 !important;
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Ajuste do Grid interno para aproveitar a largura nova */
#pc-pricing-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    padding-top: 10px !important;
}

/* ============================================================
   AJUSTE WIZARD NOVO DOCUMENTO (Patch Mobile)
   ============================================================ */

@media (max-width: 770px) {
    /* Ajusta o container que envolve as ilustrações e os forms */
    #newTccFormContainer {
        display: none; 
        position: fixed !important;
        /* Preenchimento total absoluto */
        inset: 0 !important; 
        width: 100% !important;
        height: 100% !important;
        height: -webkit-fill-available !important; /* Altura real ignorando barras do navegador */
        z-index: 50000 !important;
        background: #fff !important;
        
        /* BLOQUEIO DE GESTO DE SISTEMA */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: none !important; /* Bloqueia o "pull-to-refresh" */
        overscroll-behavior: none !important;
        touch-action: pan-y !important; /* Impede que o navegador arraste o container inteiro */
    }

    /* Esconde a imagem lateral no mobile para dar espaço ao formulário */
    #newTccFormContainer .left-side {
        display: none !important;
    }

   /* Garante que o conteúdo interno não seja arrastado */
    .new-doc-form-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 60px 20px 30px 20px !important; /* Espaço para o botão fechar */
        box-shadow: none !important;
        min-height: 101%; /* Força o scroll a existir para o overscroll-behavior funcionar */
        display: flex;
        flex-direction: column;
    }

    /* Títulos dos passos do Wizard */
    .editor-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    /* Inputs e Textareas no mobile */
    .new-doc-form input, 
    .new-doc-form textarea, 
    .new-doc-form select {
        width: 100% !important;
        font-size: 16px !important; /* Evita zoom automático no iOS */
        margin-bottom: 15px !important;
        padding: 12px !important;
    }

    /* Botões do Wizard */
    .new-doc-form-wrapper .btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 14px !important;
        font-size: 16px !important;
    }

    /* Container de botões lado a lado (se houver) */
    .new-doc-form-wrapper div[style*="flex-direction: row"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Painel de Sugestões de Títulos */
    .sugestao-titulo {
        padding: 15px !important;
        font-size: 14px !important;
        margin-bottom: 10px !important;
        border-radius: 10px !important;
    }

    /* Botão fechar sempre fixo para não sumir ao rolar */
    #newTccFormContainer .fechar-btn {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 35001 !important;
        background: rgba(240, 240, 240, 0.9) !important;
        border-radius: 50% !important;
        width: 35px !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 24px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }

    /* Ajuste para o formulário específico de "Informações da Capa" */
    #capa-info .new-doc-form {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 770px) {
    /* Impede que o fundo se mova, eliminando o efeito elástico do navegador */
    .new-doc-form-wrapper {
        min-height: 100.5% !important; /* Força o motor de scroll a estar sempre ativo */
        padding-bottom: 80px !important;
    }

    /* Trava o Body de forma agressiva */
    body.wizard-open {
        overflow: hidden !important;
        height: 100vh !important;
        height: -webkit-fill-available !important;
    }

    /* O container do wizard preenche o espaço e não deixa o scroll vazar */
    #newTccFormContainer {
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }
}

@media (max-width: 770px) {
    /* Container principal: Agora atua como a camada fixa e centralizadora */
    #newTccFormContainer {
        display: none; 
        position: fixed !important;
        inset: 0 !important; 
        width: 100vw !important;
        height: 100dvh !important;
        z-index: 50000 !important;
        background: rgba(0, 0, 0, 0.6) !important; /* Fundo escurecido igual aos créditos */
        
        /* CENTRALIZAÇÃO IGUAL AO WIZARD DE CRÉDITOS */
        display: none; /* Alterado via JS */
        align-items: center !important;
        justify-content: center !important;
        touch-action: none; /* Bloqueia o arrastar do fundo */
    }

    /* Quando o JS ativa o formulário */
    #newTccFormContainer[style*="display: flex"],
    #newTccFormContainer[style*="display: flex"] {
        display: flex !important;
    }

    /* O Card Branco interno (onde estão os inputs) */
    .new-doc-form-wrapper {
        width: 96vw !important; /* Mesma largura dos créditos */
        max-width: 520px !important;
        max-height: 85dvh !important; /* Garante que o card nunca suma da tela */
        background: #fff !important;
        border-radius: 16px !important;
        position: relative !important;
        margin: auto !important;
        padding: 40px 20px 20px 20px !important;
        
        /* TRAVA DE ROLAGEM IGUAL AOS CRÉDITOS */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
    }

    /* Esconde a imagem lateral para o card não ficar "fino" */
    #newTccFormContainer .left-side {
        display: none !important;
    }

    /* Botão fechar (X) fixo no topo do card branco */
    #newTccFormContainer .fechar-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 50001 !important;
        background: #f8f9fa !important;
        border: 1px solid #ddd !important;
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/*****************MOBILE tela estatica***************************/

@media (max-width: 770px) {
    .wizard-mobile-full {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        background: #ffffff !important;
        z-index: 99999 !important;
        display: flex;
        flex-direction: column;
        overscroll-behavior: none !important; /* Bloqueia o arrasto de sistema */
    }

    .wm-header {
        height: 60px;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        border-bottom: 1px solid #eee;
    }

    .wm-title { font-weight: bold; color: #333; }
    .wm-close { font-size: 32px; border: none; background: none; color: #666; }

    .wm-content {
        flex: 1;
        overflow-y: auto;
        padding: 25px 20px;
        -webkit-overflow-scrolling: touch;
    }

    .wm-step.hidden { display: none; }
    
    .wm-step-title { font-size: 22px; color: #007bff; margin-bottom: 10px; }
    .wm-step-desc { color: #666; margin-bottom: 25px; font-size: 14px; }

    .wm-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: #444; }
    .wm-form input { 
        width: 100%; padding: 14px; margin-bottom: 20px; 
        border: 1px solid #ccc; border-radius: 8px; font-size: 16px; 
    }

    .wm-btn-full { width: 100% !important; padding: 16px !important; font-size: 16px !important; margin-bottom: 15px; }
    .btn-voltar-link { background: none; border: none; color: #dc3545; font-weight: 600; margin-top: 10px; width: 100%; }

    .cost-badge { font-size: 12px; display: block; margin-top: 4px; opacity: 0.9; }

    #loadingOverlay {
    z-index: 100001 !important; /* Um nível acima do Wizard Mobile (99999) */
    }

    .sugestoes-mobile{
      max-height: 80% !important;;
    }
}

/* Garante que o loading overlay fique acima do Wizard Mobile */
#loadingOverlay {
    z-index: 100001 !important; /* Um nível acima do Wizard Mobile (99999) */
}

/* Centralização do conteúdo de loading no mobile */
.loading-spinner {
    padding: 20px;
    text-align: center;
}

/* Garante que cada etapa wm-step possa ter seu próprio header se necessário */
.wm-step .wm-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 10;
    margin-bottom: 10px;
}
#m-resultados-intro .selector-card {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,123,255,0.2); /* Feedback visual de toque */
    position: relative;
}

/* Garante que o checkbox não bloqueie o clique no card inteiro */
#m-resultados-intro .selector-card input[type="checkbox"] {
    pointer-events: none; 
}

@media (max-width: 770px) {
    /* Faz o container movido ocupar o espaço corretamente */
    #m-resultados-intro #resultados-intro {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        background: transparent !important;
        padding: 0 !important;
    }

    /* Garante que os cards dentro do container movido sejam clicáveis */
    .selector-card {
        pointer-events: auto !important;
        user-select: none !important;
        margin-bottom: 12px !important;
    }
}

/* Garante que os cards de sugestão sejam clicáveis no mobile */
#m-sugestoes-objetivos .sugestao-card, 
#m-sugestoes-objetivos .selector-card {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
    -webkit-tap-highlight-color: rgba(0,123,255,0.1);
}

#m-sugestoes-objetivos .sugestao-card {
    pointer-events: auto !important;
    user-select: none;
    cursor: pointer;
}

/********************Metodologia *************************/
@media (max-width: 770px) {

  /* =========================
     METODOLOGIA (container movido para o wizard mobile)
     ========================= */

  /* 1) O wrapper do desktop NÃO pode ser 96vw aqui, senão estoura com o padding do .wm-content */
  #m-metodologia-host .new-doc-form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    /* Remove “card duplo”: o wizard mobile já é a tela */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    /* Evita travas de altura do card desktop */
    max-height: none !important;
    overflow: visible !important;

    /* Como o .wm-content já tem padding, zera aqui para não “somar” */
    padding: 0 !important;
  }

  /* 2) No wizard mobile já existe X no header; esconda o X interno do desktop */
  #m-metodologia-host .fechar-btn {
    display: none !important;
  }

  /* 3) Ajustes de tipografia/fluxo para caber bonito */
  #m-metodologia-host .editor-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    margin-bottom: 12px !important;
  }

  #m-metodologia-host p {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  #m-metodologia-host label {
    display: block !important;
    line-height: 1.35 !important;
  }

  /* 4) Inputs/botões sempre “encaixados” */
  #m-metodologia-host input,
  #m-metodologia-host textarea,
  #m-metodologia-host select {
    width: 100% !important;
    max-width: 100% !important;
  }

  #m-metodologia-host .btn {
    width: 100% !important;
  }
}

/*****************************ajuste metodologia********************************/

@media (max-width: 770px) {

  /* ===== Metodologia no Wizard Mobile ===== */

  /* 1) Não deixar quebrar largura/estourar pros lados */
  #wizardNovoMobile #wm-etapa-metodologia,
  #wizardNovoMobile #wm-etapa-metodologia * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 2) Layout correto: radio ao lado do texto (não em cima) */
  #wizardNovoMobile #wm-etapa-metodologia label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0;
    font-weight: 400;
    line-height: 1.35;
  }

  /* radio não pode herdar “width:100%” de inputs do form */
  #wizardNovoMobile #wm-etapa-metodologia input[type="radio"] {
    width: auto !important;
    padding: 0 !important;
    margin: 3px 0 0 0; /* alinhar com primeira linha */
    flex: 0 0 auto;
  }

  /* 3) Tirar os <br><br> do HTML (só no mobile da metodologia) */
  #wizardNovoMobile #wm-etapa-metodologia br {
    display: none;
  }

  /* 4) Botão sempre acessível: “sticky footer” */
  #wizardNovoMobile #wm-etapa-metodologia .btn.blue[id^="metod-"] {
    position: sticky;
    bottom: 12px;
    width: 100% !important;
    margin-top: 12px;
    z-index: 5;
  }

  /* Dá espaço pro botão sticky não cobrir o último item */
  #wizardNovoMobile #wm-etapa-metodologia {
    padding-bottom: 90px;
  }
}

/* host do referencial teórico no wizard */
#m-referencial-host {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* qualquer wrapper do desktop movido para dentro do wizard mobile */
#m-referencial-host .new-doc-form-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

@media (max-width: 770px) {
  #m-referencial-host,
  #m-referencial-host * {
    max-width: 100%;
    box-sizing: border-box;
  }

  #m-referencial-host .new-doc-form-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #m-referencial-host input,
  #m-referencial-host textarea,
  #m-referencial-host select {
    width: 100%;
  }

  /* no wizard mobile já existe botão fechar no header */
  #wizardNovoMobile #m-referencial-host .fechar-btn {
    display: none !important;
  }
}

/* layout correto radio + texto no referencial teorico */
@media (max-width:770px){

  #wizardNovoMobile #m-referencial-host label{
    display:flex;
    align-items:flex-start;
    gap:10px;
    line-height:1.35;
    margin:12px 0;
  }

  #wizardNovoMobile #m-referencial-host input[type="radio"]{
    width:auto !important;
    flex:0 0 auto;
    margin-top:4px;
  }

}

/* lista de artigos ocupar altura do celular */
/* Lista de artigos ocupar melhor a altura do celular */
@media (max-width: 770px) {

  /* passo 3 (artigos) */
  #wizardNovoMobile #m-referencial-host #lista-artigos,
  #wizardNovoMobile #m-referencial-host .lista-artigos{
    max-height: calc(100dvh - 320px) !important;
    min-height: 45dvh;
    overflow-y: auto;
    padding-right: 6px;
  }

  /* dá um respiro pro botão "Gerar texto" não esmagar a lista */
  #wizardNovoMobile #m-referencial-host #ref-pass-3{
    padding-bottom: 18px;
  }
}

@media (max-width:770px){

  #wizardNovoMobile #m-referencial-host .selector-card{
      padding:14px;
      border-radius:10px;
      margin-bottom:10px;
  }

}

/* Header do passo do Referencial Teórico (wm-step-header) */
@media (max-width: 770px) {
  #wizardNovoMobile .wm-step-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 60px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
  }

  /* garante que o X fique colado à direita */
  #wizardNovoMobile .wm-step-header .wm-close{
    margin-left: auto;
  }
}


/* ===== RESULTADOS (apenas dentro do wizard mobile) ===== */
#wizardNovoMobile #wm-etapa-resultados .new-doc-form-wrapper{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#wizardNovoMobile #wm-etapa-resultados label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
}

#wizardNovoMobile #wm-etapa-resultados label input{
  margin-top: 3px;
  flex: 0 0 auto;
}

/* ========= RESULTADOS (Mobile) ========= */
@media (max-width: 768px) {
  /* some com o X interno dos cards desktop quando estiver no wizard mobile */
  #wizardNovoMobile #wm-etapa-resultados .fechar-btn,
  #wizardNovoMobile #wm-etapa-resultados .close-btn,
  #wizardNovoMobile #wm-etapa-resultados .btn-fechar {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* garante que nada passe da largura da tela */
  #wizardNovoMobile #wm-etapa-resultados,
  #wizardNovoMobile #wm-etapa-resultados .wm-content,
  #wizardNovoMobile #wm-etapa-resultados .wm-host {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* força os "cards" desktop a virarem 100% largura no mobile */
  #wizardNovoMobile #wm-etapa-resultados #m-resultados-host > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* se seus passos usam wrapper padrão */
  #wizardNovoMobile #wm-etapa-resultados .new-doc-form-wrapper,
  #wizardNovoMobile #wm-etapa-resultados .wizard-card,
  #wizardNovoMobile #wm-etapa-resultados .selector-card,
  #wizardNovoMobile #wm-etapa-resultados .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}


/***************************** ajuste conclusao ********************************/
@media (max-width: 770px) {

  /* 1) trava tudo pra não estourar pros lados */
  #wizardNovoMobile #m-conclusao-host,
  #wizardNovoMobile #m-conclusao-host * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

    #wizardNovoMobile #m-conclusao-host .new-doc-form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    /* Remove “card duplo”: o wizard mobile já é a tela */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    /* Evita travas de altura do card desktop */
    max-height: none !important;
    overflow: visible !important;

    /* Como o .wm-content já tem padding, zera aqui para não “somar” */
    padding: 0 !important;
  }

  /* 3) no wizard mobile já existe X no header: esconda o X interno do desktop */
  #wizardNovoMobile #m-conclusao-host .fechar-btn {
    display: none !important;
  }

  /* 4) garante que botão e textos encaixem */
  #wizardNovoMobile #m-conclusao-host .btn {
    width: 100% !important;
  }

  #wizardNovoMobile #m-conclusao-host ul,
  #wizardNovoMobile #m-conclusao-host li,
  #wizardNovoMobile #m-conclusao-host p {
    width: 100% !important;
  }

  /* 5) checklist precisa aproveitar altura do celular (scroll interno) */
  #wizardNovoMobile #m-conclusao-host #checklist-conclusao-lista {
    max-height: calc(100dvh - 340px) !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
  }

  /* 6) dá espaço para o botão não “sumir” no final */
  #wizardNovoMobile #wm-etapa-conclusao {
    padding-bottom: 24px;
  }
}

@media (max-width: 770px) {
  #wizardNovoMobile #m-conclusao-host .selector-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

@media (max-width: 770px) {
  #wizardNovoMobile #m-conclusao-host > * {
    margin: 0 !important;
  }
}


@media (max-width: 770px) {
  #export-pass-select-tcc .export-tcc-list {
    max-height: calc(100dvh - 260px) !important;
    overflow-y: auto !important;
  }

  #export-pass-select-tcc .export-tcc-item {
    padding: 14px !important;
    border-radius: 10px !important;
  }

  #export-pass-select-tcc .export-tcc-item-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  #export-pass-select-tcc .export-tcc-item-sub {
    font-size: 12px !important;
  }

  #btn-continuar-export {
    width: 100% !important;
  }
}