/* responsive-iphone.css — ajustes finais de responsividade p/ iPhone.
   Carregado por ÚLTIMO (vence por ordem de fonte). Complementa o bloco
   @media(max-width:768px) que já existe no app.css. */

@media (max-width: 768px) {
  html, body { max-width: 100%; }

  /* Conteúdo mais justo no celular */
  .content { padding: 16px 12px 56px; }

  /* Imagens nunca estouram a largura da tela */
  .content img { max-width: 100%; height: auto; }

  /* Menu de período (time picker) tinha 540px fixo -> estourava no iPhone */
  .tp-panel {
    min-width: 0 !important;
    width: calc(100vw - 20px) !important;
    left: 10px !important; right: 10px;
  }
  .tp-body { flex-direction: column; min-height: 0; }
  .tp-left {
    width: 100% !important;
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  /* Painéis/modais com largura mínima fixa de desktop -> cabem na tela */
  .modal-card { width: 100% !important; max-width: 100vw; }
  .com-modal  { min-width: 0 !important; width: 100% !important; max-width: 100vw; }
}

@media (max-width: 380px) {
  .content { padding: 14px 10px 52px; }
}