/* ============================================================
   FASE98A — Responsive foundation
   Solo estructura base; no rediseña módulos.
   ============================================================ */

/* Breakpoints de referencia (documentación operativa):
   --bp-xs: 375px
   --bp-sm: 768px
   --bp-md: 1024px
   --bp-lg: 1366px
   --bp-xl: 1440px
   --bp-2xl: 1920px
*/

:root {
  --bp-xs: 375px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1366px;
  --bp-xl: 1440px;
  --bp-2xl: 1920px;
}

/* Controles táctiles: evita zoom iOS en inputs */
@media (max-width: 480px) {
  .form-control,
  .ui-form-control,
  .form-group input,
  .form-group select,
  .form-group textarea,
  .ui-money-field input {
    font-size: 16px;
  }

  .toast-container {
    right: 12px;
    left: 12px;
    max-width: none;
    width: auto;
  }
}

@media (max-width: 767px) {
  .ui-confirm__actions {
    flex-direction: column-reverse;
  }

  .ui-confirm__actions .btn {
    width: 100%;
  }

  .form-grid,
  .ui-form-grid {
    grid-template-columns: 1fr;
  }

  .modal-panel--lg,
  .modal-panel--wide {
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .form-grid,
  .ui-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .form-grid--3,
  .ui-form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}