/**
 * ROOMING LIST — CSS proprio
 *
 * O resumo (Hóspedes / Leitos / Faltam) usa .pr-fin, que é 3 colunas fixas.
 * No celular isso esmaga. Aqui: 2 colunas no celular (o 3º fica embaixo) e
 * ajustes de toque, seguindo o padrao que o usuario aprovou no portal.
 */

@media (max-width: 720px) {
  /* resumo em 2 colunas — o "Faltam preencher" ocupa a linha inteira */
  .rooming-pg .pr-fin {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .rooming-pg .pr-fin-c:last-child { grid-column: 1 / -1; }

  /* cards e linhas mais justos */
  .rooming-pg .pr-card-bd { padding: 14px 15px; }
  .rooming-pg .sr-linha { padding: 11px 0; gap: 10px; }

  /* os botoes Editar/Remover viram linha propria, largura natural */
  .rooming-pg .sr-linha { flex-wrap: wrap; }
  .rooming-pg .sr-linha-dir {
    width: 100%;
    justify-content: flex-start;
    margin-top: 4px;
  }

  /* botoes da barra de acoes ocupam a largura toda */
  .rooming-pg .pr-card-bd > div[style*="display:flex"] > .pr-btn {
    flex: 1 1 auto;
    min-width: 140px;
  }

  /* inputs grandes o bastante para nao dar zoom no iOS */
  .rooming-pg input,
  .rooming-pg select,
  .rooming-pg textarea { font-size: 16px !important; }
}

/* telas muito estreitas: 1 coluna */
@media (max-width: 380px) {
  .rooming-pg .pr-fin { grid-template-columns: minmax(0, 1fr); }
  .rooming-pg .pr-fin-c:last-child { grid-column: auto; }
}


/* -------- barra de acoes no mobile: grade limpa -------- */
@media (max-width: 720px) {
  .rooming-pg .rooming-barra {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    align-items: stretch;
  }
  .rooming-pg .rooming-barra > .pr-btn {
    width: 100%;
    height: 46px;
    min-width: 0;
  }
  /* Enviar ao hotel ocupa a linha inteira */
  .rooming-pg .rooming-barra .rooming-enviar {
    grid-column: 1 / -1;
  }
  /* o wrapper que empurrava para a direita perde o margin */
  .rooming-pg .rooming-barra > div {
    margin-left: 0 !important;
    display: contents !important;
  }
}