/* ================================================================
   EDITORS-MOBILE.CSS — DefesaExpress
   Responsividade segura para os editores grandes (defesa, cassacao, provisoria)
   Aplica-se APENAS via media queries — nunca quebra o layout desktop.
   NÃO toca em: #a4Preview, .a4-page, @print, JS/Firebase.
   ================================================================ */

/* ─────────────────────────────────────────────────────────────
   1. VIEWPORT & BASE
───────────────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   2. PROTEÇÃO CONTRA MODAIS FANTASMAS (todos os editores)
   Modais sem classe .open / .show / .active ficam invisíveis.
   EXCEÇÕES: .gerando-overlay (+ filhos), .preview-lock-overlay
───────────────────────────────────────────────────────────── */
.modal:not(.open):not(.show):not(.active):not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: grid"]):not([style*="display:grid"]),
.modal-overlay:not(.open):not(.show):not(.active),
.modal-backdrop:not(.open):not(.show):not(.active),
[class*="overlay"]:not(.open):not(.show):not(.active):not(.gerando-overlay):not(.gerando-overlay-texto):not(.preview-lock-overlay) {
  display: none !important;
  pointer-events: none !important;
}


/* ─────────────────────────────────────────────────────────────
   3. TABLET — 1024px
   Grids de 3/4 colunas → 2 colunas
───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Formulários de 3 ou 4 colunas ficam com 2 */
  .form-row-3,
  .form-row-4,
  .grid-3,
  .grid-4,
  [class*="col-3"],
  [class*="col-4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Layout lateral (form + preview) → empilha */
  .editor-layout,
  .editor-grid,
  .main-layout,
  [class*="editor-layout"],
  [class*="layout-2col"] {
    grid-template-columns: 1fr !important;
  }

  /* Painel de preview oculto em tablet (FAB substitui) */
  .preview-panel,
  [class*="preview-panel"] {
    display: none !important;
  }

  /* FAB de preview visível */
  .preview-fab,
  [class*="preview-fab"] {
    display: grid !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   4. MOBILE GRANDE — 768px
   Adaptações principais para smartphones grandes e tablets pequenos
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Padding geral do corpo do editor */
  .editor-main,
  .form-panel,
  .step-panel,
  [class*="form-panel"],
  [class*="step-panel"] {
    padding: 18px 14px !important;
  }

  /* Qualquer grid de formulário → 1 coluna */
  .form-row,
  .form-row-2,
  .form-row-3,
  .form-row-4,
  .grid-2,
  .grid-3,
  .grid-4,
  [class*="form-row"],
  [class*="grid-row"] {
    grid-template-columns: 1fr !important;
  }

  /* Campos: nunca espremidos */
  .field,
  .form-field,
  .input-group,
  [class*="field"]:not([class*="field-error"]):not([class*="field-icon"]):not([class*="field-valid"]):not([class*="field-input"]) {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Inputs, selects, textareas: fonte 16px para evitar zoom iOS */
  input:not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px !important;
  }

  /* Stepper (bolinhas de progresso): ocultar em mobile, exibir versão compacta */
  .stepper,
  [class*="stepper"]:not([class*="stepper-mobile"]) {
    display: none !important;
  }
  .stepper-mobile,
  [class*="stepper-mobile"] {
    display: block !important;
    text-align: center !important;
  }

  /* Steppers que usam bolinhas grandes → compactar */
  .step-circle,
  [class*="step-circle"] {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }
  .step-label,
  [class*="step-label"] {
    display: none !important;
  }
  .step-line,
  [class*="step-line"] {
    width: 14px !important;
    min-width: 14px !important;
  }

  /* Header do editor: compacto */
  .editor-header,
  .page-header,
  [class*="editor-header"] {
    padding: 10px 14px !important;
  }

  /* Títulos do editor não ficam cortados */
  .step-title,
  .page-title,
  [class*="step-title"],
  [class*="page-title"] {
    font-size: clamp(20px, 6vw, 28px) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Botões de ação → empilhar, 100% largura */
  .actions,
  .form-actions,
  .wizard-actions,
  .step-actions,
  [class*="btn-group"] {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .actions .btn,
  .form-actions .btn,
  .wizard-actions .btn,
  .step-actions .btn,
  [class*="btn-group"] .btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
  }

  /* Botões sim/não, opções de escolha → 100% */
  .option-btn,
  .choice-btn,
  [class*="option-btn"],
  [class*="choice-btn"] {
    width: 100% !important;
    min-height: 52px !important;
  }

  /* Toast (notificações) → na parte de baixo da tela em mobile */
  .toast-container,
  [class*="toast-container"] {
    top: auto !important;
    bottom: 20px !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
  }

  /* Modais → responsivos */
  .modal,
  [class*="modal-content"] {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    margin: 0 auto !important;
    border-radius: 6px !important;
    overflow-y: auto !important;
  }
  .modal-body,
  [class*="modal-body"] {
    max-height: calc(90vh - 130px) !important;
    overflow-y: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   5. MOBILE PEQUENO — 480px
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .editor-main,
  .form-panel,
  [class*="form-panel"] {
    padding: 14px 10px !important;
  }

  /* Badge/eyebrow do step */
  .step-eyebrow,
  [class*="step-eyebrow"],
  [class*="eyebrow"] {
    font-size: 10px !important;
    padding: 4px 10px !important;
    letter-spacing: .07em !important;
  }

  .step-title,
  [class*="step-title"] {
    font-size: clamp(18px, 7vw, 24px) !important;
  }

  .step-subtitle,
  [class*="step-subtitle"] {
    font-size: 13px !important;
  }

  /* Seção títulos menores */
  .section-title,
  [class*="section-title"] {
    font-size: 11px !important;
  }

  /* Cards de opção (tipo-card): padding reduzido */
  .tipo-card,
  .option-card,
  [class*="tipo-card"],
  [class*="option-card"] {
    padding: 14px 12px !important;
  }

  /* Textos de título dentro dos cards */
  .tipo-title,
  [class*="tipo-title"],
  [class*="option-title"] {
    font-size: 14px !important;
  }

  .tipo-desc,
  [class*="tipo-desc"],
  [class*="option-desc"] {
    font-size: 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. MUITO PEQUENO — 360px (iPhone SE, Galaxy A)
───────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .editor-main,
  .form-panel,
  [class*="form-panel"] {
    padding: 12px 8px !important;
  }

  .step-title,
  [class*="step-title"] {
    font-size: clamp(17px, 8vw, 22px) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   7. SAFE AREA iOS (notch / home indicator)
───────────────────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    body {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .actions,
    .form-actions,
    .wizard-actions {
      padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
    }
  }
}

/* ─────────────────────────────────────────────────────────────
   8. PROTEÇÃO DO LAYOUT DE IMPRESSÃO / PDF
   Garante que as regras mobile nunca afetem a impressão.
───────────────────────────────────────────────────────────── */
@media print {
  /* Reverter tudo que foi forçado acima para impressão */
  .stepper,
  [class*="stepper"] {
    display: flex !important;
  }
  .preview-panel,
  [class*="preview-panel"] {
    display: block !important;
  }
  .actions,
  .form-actions,
  [class*="btn-group"] {
    flex-direction: row !important;
  }
  /* O preview A4 nunca é tocado por mobile CSS — só confirmar */
  #a4Preview,
  .a4-page,
  [class*="a4-page"],
  [class*="preview-frame"] {
    /* mantém herança do preview-lock.css */
    all: revert !important;
  }
}