/* Lotus no celular: ajustes comuns a todas as telas (carregado depois do estilo de cada página). */

/* itens de grade/flex podem encolher (sem isso, um conteúdo largo alarga a página inteira) */
.layout > *, .corpo > *, main > section, main > aside { min-width: 0; }
.m-rolar { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.m-voltar { display: none; }

@media (max-width: 760px) {
  /* cabeçalho em uma linha: título + voltar */
  header { padding: 6px 12px !important; gap: 10px !important; flex-wrap: nowrap !important; position: sticky; top: 0; z-index: 20; }
  header img { height: 36px !important; }
  header:not(:has(.sistema)):not(:has(.quem)) img { display: none; }   /* nas telas de aplicativo o "← Início" já volta */
  header .sep, header .sub, header .local { display: none !important; }
  header > div:not(.esp) { min-width: 0; }
  header h1 { font-size: 17px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  header a, header a.voltar { padding: 8px 6px !important; font-size: 14px !important; white-space: nowrap; }
  header button { padding: 7px 10px !important; font-size: 13px !important; white-space: nowrap; }
  header .sistema b { font-size: 18px !important; }
  header .sistema { padding-left: 10px !important; }

  /* espaço e cartões */
  .layout { padding: 10px !important; gap: 10px !important; }
  body > main, .layout > main { padding-left: 10px !important; padding-right: 10px !important; }
  .layout > main { padding: 0 !important; }
  .card { padding: 14px !important; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 12px 0 16px !important; }
  .kpi { padding: 10px 12px !important; }
  .kpi .v { font-size: 19px !important; }
  .kpi .r { font-size: 10.5px !important; }
  .kpi .s, .kpi .d { font-size: 11.5px !important; }

  /* campos com 16px: o iPhone não dá zoom ao tocar */
  input, select, textarea { font-size: 16px !important; }
  button, .btn, a.btn { min-height: 40px; }

  /* tabelas: rolam de lado dentro do cartão, sem quebrar nome e número em várias linhas */
  .m-rolar table th, .m-rolar table td { white-space: nowrap; }

  /* janelas (fornecedor, pagamento…) ocupam a tela */
  dialog { width: calc(100vw - 12px) !important; max-width: none !important; max-height: calc(100dvh - 12px) !important; margin: auto !important; }

  /* listas sem altura máxima (a página rola) */
  .lista { max-height: none !important; }

  /* lista → detalhe: ao escolher um casal/pedido, a lista sai e aparece "← Casais" */
  body.m-detalhe [data-m-lista], body:not(.m-detalhe) [data-m-detalhe] { display: none !important; }
  body.m-detalhe .m-voltar { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; font-size: 15px; color: #824634;
    background: #fff; border: 1px solid #eadcd4; border-radius: 10px; padding: 9px 14px; margin: 0 0 10px; cursor: pointer; }
  .detalhe { position: static !important; }

  /* filtros em uma linha que rola de lado */
  #filtros, #recFiltros { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  #filtros > *, #recFiltros > * { flex: 0 0 auto; }

  /* tarefas (Cronograma e Checklist): texto em cima; situação e observação lado a lado embaixo */
  .itens li, .tarefas li { grid-template-columns: 26px 150px minmax(0, 1fr) !important; row-gap: 6px !important; }
  .itens li > span:nth-child(2), .tarefas li > span:nth-child(2) { grid-column: 2 / 4; }
  .itens li > select, .tarefas li > select { grid-column: 2; min-width: 0; width: 100%; font-size: 14px !important; }
  .itens li > input, .tarefas li > input { grid-column: 3; min-width: 0; }

  /* tela inicial: aplicativos em 2 colunas, só ícone e nome */
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 22px !important; }
  .app { min-height: 0 !important; padding: 14px 12px !important; gap: 8px !important; }
  .app .d, .app .acao, .app:not(.breve) .selo { display: none !important; }
  .app .selo { top: 8px !important; right: 8px !important; font-size: 10px !important; }
  .app .ic { width: 38px !important; height: 38px !important; }
  .app .ic svg { width: 22px !important; height: 22px !important; }
  .app .t { font-size: 14.5px !important; line-height: 1.25; }
  .ola h1 { font-size: 22px !important; }
  .eventos li { grid-template-columns: 52px 1fr !important; gap: 10px !important; }
  .eventos .falta { grid-column: 2; text-align: left !important; }
}