/* ===== Otimização para celular — v12 (04/11/2026) ===== */

/* iOS: fontes de campo em 16px impedem o zoom automático ao focar */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px; }
}

/* Barra de navegação inferior, estilo aplicativo */
@media (max-width: 760px) {
  .rail {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    background: var(--navy);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    display: block;
    box-shadow: 0 -3px 14px rgba(0, 30, 80, .35);
    border-radius: 0;
    z-index: 40;
  }
  .rail nav { display: flex; gap: 4px; margin: 0; }
  .rail nav button {
    flex: 1;
    text-align: center;
    border-radius: 10px;
    padding: 12px 4px 10px;
    font-size: 11.5px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .rail nav button.active { background: var(--blue); }
  .brand, .rail-label, .rail-foot { display: none; }

  /* Logo compacto no topo (no lugar da antiga faixa de texto) */
  .topbar { padding: 10px 14px; min-height: 56px; }
  .topbar::before {
    content: "";
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 9px;
    background: #fff url(/logo.png) center/contain no-repeat;
    border: 1px solid #e3eaf2;
  }

  /* Espaço para a barra inferior não cobrir o conteúdo */
  .workspace { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  footer { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }

  /* "Explorar demonstração" some no celular: evita o cliente tocar sem querer */
  #demo { display: none; }

  /* Diálogos em formato de folha (sobem de baixo, borda a borda) */
  dialog {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 92dvh;
    transform: none;
    overscroll-behavior: contain;
    padding: 20px 18px calc(16px + env(safe-area-inset-bottom));
  }
  .dialog-actions {
    position: sticky;
    bottom: 0;
    background: var(--white);
    margin: 14px -18px 0;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
  }
  .mq-dialog { width: 100vw; max-width: 100vw; border-radius: 18px 18px 0 0; }

  /* Alvos de toque maiores nas ações das linhas */
  .row-actions button { min-height: 42px; padding: 9px 12px; font-size: 12px; }
  .topbar button { min-height: 44px; }

  /* Máquinas: um cartão por linha, foto maior */
  .mq-grid { grid-template-columns: 1fr; }
  .mq-foto, .mq-foto-vazia { height: 190px; }
}