/* Ecofyx V167 — mobile width normalization
 * Objetivo: aproveitar quase toda a largura útil no celular sem alterar o desktop
 * nem remover o respiro interno de cards, campos e modais.
 */
@media (max-width: 760px) {
  html, body {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Wrappers externos mais usados no Ecofyx. Apenas largura/gutter lateral. */
  body > :where(.wrap,.container,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  body > main:where(.wrap,.container,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  body > main > :where(.wrap,.container,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  main > :where(.wrap,.container,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  .app > main > .container,
  .app > header > .container,
  main > section > :where(.container,.wrap),
  .site-header > :where(.container,.wrap),
  header > :where(.container,.wrap),
  footer > :where(.container,.wrap),
  .nav > .container,
  .efx-header-inner,
  .efx-footer-wrap {
    box-sizing: border-box !important;
    width: calc(100% - 12px) !important;
    max-width: none !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
  }

  /* Quando o wrapper também traz padding lateral próprio, reduz apenas esse excesso. */
  body > :where(.wrap,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  body > main:where(.wrap,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  body > main > :where(.wrap,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  main > :where(.wrap,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell) {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Containers editoriais normalmente não têm fundo próprio: 8–12 px totais bastam. */
  main > section > .container,
  .site-header > .container,
  header > .container,
  footer > .container,
  .nav > .container {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  /* Capas e cabeçalhos operacionais: preserva composição, mas evita 18–24 px por lado. */
  :where(.cover-inner,.results-cover-inner,.header-inner,.hero-inner,.top-inner) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Páginas simples que centralizam um card diretamente no body. */
  body:has(> .card),
  body:has(> main.box),
  body:has(> .box) {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  body > main.box,
  body > .box,
  body > .card {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Impede que grids/flex e iframes recriem largura maior que a viewport. */
  :where(main,section,article,.wrap,.container,.w,.shell,.page,.card,.panel,.box,.grid,.row) {
    min-width: 0;
  }
  iframe, img, video, canvas, svg {
    max-width: 100%;
  }
  input, select, textarea, button {
    max-width: 100%;
  }

  /* URLs e textos técnicos não devem forçar rolagem horizontal. */
  :where(a,p,span,small,strong,b,code,pre,td,th) {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {

  body:has(> .card),
  body:has(> main.box),
  body:has(> .box) {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  body > :where(.wrap,.container,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  body > main:where(.wrap,.container,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  body > main > :where(.wrap,.container,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  main > :where(.wrap,.container,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  .app > main > .container,
  .app > header > .container,
  main > section > :where(.container,.wrap),
  .site-header > :where(.container,.wrap),
  header > :where(.container,.wrap),
  footer > :where(.container,.wrap),
  .nav > .container,
  .efx-header-inner,
  .efx-footer-wrap {
    width: calc(100% - 8px) !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }

  body > :where(.wrap,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  body > main:where(.wrap,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  body > main > :where(.wrap,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell),
  main > :where(.wrap,.w,.shell,.page,.page-wrap,.content-wrap,.app-shell) {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

@media (max-width: 760px) {
  /* Estados/fluxos simples que usam o próprio card como moldura externa. */
  body > .error-wrap,
  body > main.error-wrap {
    box-sizing: border-box !important;
    width: calc(100% - 12px) !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
  }

  /* Ferramentas visuais do criador também devem aproveitar a viewport no celular. */
  :where(.preview-lock,.eco-edit-card,.eco-draw-card) {
    max-width: none !important;
    width: calc(100% - 12px) !important;
  }
}

@media (max-width: 420px) {
  body > .error-wrap,
  body > main.error-wrap,
  :where(.preview-lock,.eco-edit-card,.eco-draw-card) {
    width: calc(100% - 8px) !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  .preview-lock {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Páginas operacionais antigas usam !important local de 12–18px; normaliza com
 * especificidade equivalente/maior para que a regra global realmente prevaleça. */
@media (max-width: 760px) {
  body.ecofyx-mobile-menu-only .w,
  body.results-central .wrap {
    box-sizing: border-box !important;
    width: calc(100% - 12px) !important;
    max-width: none !important;
    margin-left: 6px !important;
    margin-right: 6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}
@media (max-width: 420px) {
  body.ecofyx-mobile-menu-only .w,
  body.results-central .wrap {
    width: calc(100% - 8px) !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}