/* =========================================================================
   mobile-fixes.css — Camada global de correção mobile do Sumidos PB.
   Injetada em TODAS as páginas via Apache (mod_substitute), antes de </head>.
   Objetivo: eliminar os bugs universais de mobile (scroll horizontal, tabelas
   e imagens estourando a tela) SEM alterar o layout desktop.
   Regras agressivas ficam sob @media (max-width:768px) para não afetar o desktop.
   ========================================================================= */

/* 1. Nunca deixar a página rolar horizontalmente (o bug nº1 no celular). */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2. Mídia nunca ultrapassa a largura da tela. */
img, video, canvas, svg, iframe, embed, object, picture {
  max-width: 100%;
}
img, video { height: auto; }

@media (max-width: 768px) {

  /* 3. Palavras/links/URLs longas quebram em vez de empurrar a largura. */
  body {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* 4. Tabelas largas passam a rolar dentro de si mesmas (não empurram o layout). */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 5. Blocos de código/pré-formatados não estouram. */
  pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* 6. Containers com largura fixa em px passam a ser fluidos.
        Cobre os .container/.wrap/.card antigos feitos com largura fixa. */
  .container, .wrap, .wrapper, .content, .card, .box, .panel, .modal-content, .form, form {
    max-width: 100% !important;
  }

  /* 7. Elementos com largura fixa inline (style="width:NNNpx") não estouram. */
  [style*="width:"][style*="px"] {
    max-width: 100% !important;
  }

  /* 8. Grids/flex de colunas fixas podem quebrar linha em telas estreitas. */
  [style*="grid-template-columns"],
  [style*="display:flex"], [style*="display: flex"] {
    flex-wrap: wrap;
  }
}