/* ════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE UNIVERSAL DE MODAIS — v4.37.141

   Aplica fixes responsivos em TODOS os modais (estáticos e dinâmicos),
   usando seletores baseados na estrutura padrão do app:

   .modal-bg > .modal > .modal-h + .modal-b + .modal-f

   E no padrão alternativo:
   div[id^="modal-"] (qualquer elemento com id começando em "modal-")

   Substitui regras anteriores específicas (Upsell/MGM/Oportunidades).
   Agora cobre TODOS os modais do app de uma vez.

   Problemas resolvidos:
   - Overflow horizontal (barra de scroll quebrando layout)
   - Texto cortado em descrições/títulos longos
   - Grids de 4/3 colunas que espremem em mobile
   - Botões com min-width que estouram a tela
   - Inputs/selects causando zoom no iOS (font<16px)
   - Padding lateral excessivo em telas pequenas
   - Modais largos sem ajuste mobile
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ESTILOS UNIVERSAIS (todas larguras)
   ════════════════════════════════════════════════════════════════════ */

/* Backdrop NUNCA pode passar de 100vw — evita scroll horizontal global */
.modal-bg {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* TODO modal respeita largura da tela */
.modal-bg .modal,
[id^="modal-"] .modal {
  box-sizing: border-box !important;
  max-width: min(100%, 920px) !important;
}

/* Body de modal: sem overflow-x e com word-wrap */
.modal-bg .modal-b,
[id^="modal-"] .modal-b {
  overflow-x: hidden !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  box-sizing: border-box !important;
}

/* Tabs internas com scroll horizontal: touch-friendly */
.modal-bg .modal-b > div[style*="overflow-x:auto"],
[id^="modal-"] .modal-b > div[style*="overflow-x:auto"] {
  -webkit-overflow-scrolling: touch !important;
}

/* Texto dentro do body: força quebrar palavras LONGAS apenas em block-level.
   IMPORTANTE: não aplicar em span — quebra texto por caractere quando o span
   é descendente de flex container com pouca largura. */
.modal-bg .modal-b > div,
.modal-bg .modal-b p,
[id^="modal-"] .modal-b > div,
[id^="modal-"] .modal-b p {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Quando QUALQUER modal-bg está aberto (display:flex), trava scroll horizontal global */
html:has(.modal-bg[style*="display: flex"]),
html:has(.modal-bg[style*="display:flex"]),
html:has([id^="modal-"][style*="display: flex"]),
html:has([id^="modal-"][style*="display:flex"]) {
  overflow-x: hidden !important;
}
body:has(.modal-bg[style*="display: flex"]),
body:has(.modal-bg[style*="display:flex"]),
body:has([id^="modal-"][style*="display: flex"]),
body:has([id^="modal-"][style*="display:flex"]) {
  overflow-x: hidden !important;
}


/* ════════════════════════════════════════════════════════════════════
   TABLET / MOBILE — ≤768px
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── MODAL: largura total ─── */
  .modal-bg .modal,
  [id^="modal-"] .modal {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ─── BODY: padding lateral reduzido ─── */
  .modal-bg .modal-b,
  [id^="modal-"] .modal-b {
    padding: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Proteção contra elementos com largura fixa que vazam.
     IMPORTANTE: aplicar apenas em elementos block-level (div, table, img, etc).
     NÃO usar em '*' porque isso esmaga spans inline com texto, fazendo
     cada caractere quebrar em linha (ex: "ASSISTÊNCIA" virar vertical). */
  .modal-bg .modal-b > div,
  .modal-bg .modal-b table,
  .modal-bg .modal-b img,
  .modal-bg .modal-b iframe,
  .modal-bg .modal-b pre,
  [id^="modal-"] .modal-b > div,
  [id^="modal-"] .modal-b table,
  [id^="modal-"] .modal-b img,
  [id^="modal-"] .modal-b iframe,
  [id^="modal-"] .modal-b pre {
    max-width: 100% !important;
  }

  /* Force divs filhos do body a NUNCA passarem da largura — sem width:auto agressivo */
  .modal-bg .modal-b > div,
  [id^="modal-"] .modal-b > div {
    box-sizing: border-box !important;
  }

  /* Inputs/selects/textarea: font 16px (anti-zoom iOS) */
  .modal-bg input[type="text"],
  .modal-bg input[type="number"],
  .modal-bg input[type="email"],
  .modal-bg input[type="tel"],
  .modal-bg input[type="search"],
  .modal-bg input[type="password"],
  .modal-bg input[type="url"],
  .modal-bg input[type="date"],
  .modal-bg input[type="datetime-local"],
  .modal-bg input[type="time"],
  .modal-bg select,
  .modal-bg textarea,
  [id^="modal-"] input[type="text"],
  [id^="modal-"] input[type="number"],
  [id^="modal-"] input[type="email"],
  [id^="modal-"] input[type="tel"],
  [id^="modal-"] input[type="search"],
  [id^="modal-"] input[type="password"],
  [id^="modal-"] input[type="url"],
  [id^="modal-"] input[type="date"],
  [id^="modal-"] input[type="datetime-local"],
  [id^="modal-"] input[type="time"],
  [id^="modal-"] select,
  [id^="modal-"] textarea {
    font-size: 16px !important;
  }

  /* ─── HEADER: permite quebrar título em 2 linhas ─── */
  .modal-bg .modal-h,
  [id^="modal-"] .modal-h {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .modal-bg .modal-h .modal-t,
  [id^="modal-"] .modal-h .modal-t {
    flex: 1 !important;
    min-width: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
    padding-right: 4px !important;
  }

  /* ─── FLD-ROW c2: vira 1 coluna no mobile ─── */
  .modal-bg .fld-row.c2,
  [id^="modal-"] .fld-row.c2 {
    grid-template-columns: 1fr !important;
  }

  /* ─── GRIDS de 4 colunas: 2 colunas no mobile ─── */
  .modal-bg .modal-b div[style*="grid-template-columns:repeat(4,1fr)"],
  .modal-bg .modal-b div[style*="grid-template-columns: repeat(4, 1fr)"],
  [id^="modal-"] .modal-b div[style*="grid-template-columns:repeat(4,1fr)"],
  [id^="modal-"] .modal-b div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* ─── GRIDS de 3 colunas: 2 colunas no mobile ─── */
  .modal-bg .modal-b div[style*="grid-template-columns:repeat(3,1fr)"],
  .modal-bg .modal-b div[style*="grid-template-columns: repeat(3, 1fr)"],
  [id^="modal-"] .modal-b div[style*="grid-template-columns:repeat(3,1fr)"],
  [id^="modal-"] .modal-b div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* ─── FOOTER: botões com flex-wrap ─── */
  .modal-bg .modal-f,
  [id^="modal-"] .modal-f {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Botões com min-width ≥120px viram 0 (deixa fluido) */
  .modal-bg button[style*="min-width:160px"],
  .modal-bg button[style*="min-width:200px"],
  .modal-bg button[style*="min-width:120px"],
  .modal-bg button[style*="min-width:140px"],
  [id^="modal-"] button[style*="min-width:160px"],
  [id^="modal-"] button[style*="min-width:200px"],
  [id^="modal-"] button[style*="min-width:120px"],
  [id^="modal-"] button[style*="min-width:140px"] {
    min-width: 0 !important;
  }

  /* ─── BLOCOS LATERAIS (text-align:right;flex-shrink:0) — NÃO mexer.
     Quando esses blocos estão em cards de lista (oportunidades, leads,
     contratos), forçar width:100% empurra o flex sibling pra 0px, fazendo
     texto quebrar em vertical. Cards com texto curto cabem normal — apenas
     em layout muito apertado precisaria, e isso é responsabilidade do JS
     fazer wrap. ─── */

  /* ─── TABS internas (Upsell, etc): scroll horizontal preservado ─── */
  .modal-bg .modal-b > div[style*="overflow-x:auto"][style*="display:flex"],
  [id^="modal-"] .modal-b > div[style*="overflow-x:auto"][style*="display:flex"] {
    margin-bottom: 12px !important;
  }
  .modal-bg .ups-aba,
  [id^="modal-"] .ups-aba {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   SMARTPHONE PEQUENO — ≤480px
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* Modal-bg: padding mínimo */
  .modal-bg {
    padding: 4px !important;
  }

  .modal-bg .modal,
  [id^="modal-"] .modal {
    max-height: 96vh !important;
    border-radius: 10px !important;
  }

  /* Padding ainda menor */
  .modal-bg .modal-b,
  [id^="modal-"] .modal-b {
    padding: 10px 12px !important;
  }

  .modal-bg .modal-h,
  [id^="modal-"] .modal-h {
    padding: 12px 14px !important;
  }
  .modal-bg .modal-h .modal-t,
  [id^="modal-"] .modal-h .modal-t {
    font-size: 14px !important;
  }

  /* Grids de 4 → continua 2 mas com gap menor */
  .modal-bg .modal-b div[style*="grid-template-columns:repeat(4,1fr)"],
  [id^="modal-"] .modal-b div[style*="grid-template-columns:repeat(4,1fr)"] {
    gap: 5px !important;
  }

  /* Cards de KPI dentro de grids: padding reduzido */
  .modal-bg .modal-b div[style*="grid-template-columns"] > div[style*="padding"],
  [id^="modal-"] .modal-b div[style*="grid-template-columns"] > div[style*="padding"] {
    padding: 8px 6px !important;
  }

  /* Numbers grandes dentro de modais: reduz */
  .modal-bg .modal-b div[style*="font-size:24px;font-weight:900"],
  .modal-bg .modal-b div[style*="font-size:22px;font-weight:800"],
  .modal-bg .modal-b div[style*="font-size:20px;font-weight:800"],
  [id^="modal-"] .modal-b div[style*="font-size:24px;font-weight:900"],
  [id^="modal-"] .modal-b div[style*="font-size:22px;font-weight:800"],
  [id^="modal-"] .modal-b div[style*="font-size:20px;font-weight:800"] {
    font-size: 16px !important;
  }
  .modal-bg .modal-b div[style*="font-size:18px;font-weight:800"],
  [id^="modal-"] .modal-b div[style*="font-size:18px;font-weight:800"] {
    font-size: 15px !important;
  }
  .modal-bg .modal-b div[style*="font-size:28px;font-weight:800"],
  [id^="modal-"] .modal-b div[style*="font-size:28px;font-weight:800"] {
    font-size: 22px !important;
  }
  .modal-bg .modal-b div[style*="font-size:16px;font-weight:900"],
  [id^="modal-"] .modal-b div[style*="font-size:16px;font-weight:900"] {
    font-size: 13px !important;
  }

  /* Badges/pílulas: reduz pra caber */
  .modal-bg .modal-b span[style*="font-size:9px"],
  [id^="modal-"] .modal-b span[style*="font-size:9px"] {
    font-size: 8.5px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   SMARTPHONE MUITO PEQUENO — ≤360px
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {

  /* Última camada — padding praticamente zero lateral */
  .modal-bg .modal-b,
  [id^="modal-"] .modal-b {
    padding: 8px 10px !important;
  }

  /* Tabs ainda menores */
  .modal-bg .ups-aba,
  [id^="modal-"] .ups-aba {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }

  /* Título do header: font menor */
  .modal-bg .modal-h .modal-t,
  [id^="modal-"] .modal-h .modal-t {
    font-size: 13px !important;
  }
}