/* Ajustes de distribución para pantallas pequeñas. No altera la estética de escritorio. */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, canvas { max-width: 100%; height: auto; }
  .container { width: 100% !important; max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }
  .contenido { width: 100% !important; max-width: 100% !important; }
  .content-width-main, .content-width-submain { width: calc(100% - 28px) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
  .ui-panelgrid, .ui-panelgrid-content, .ui-grid, .ui-g, form { max-width: 100%; }
  .ui-inputfield, .ui-selectonemenu, .ui-calendar, select, textarea { width: 100% !important; max-width: 100% !important; }
  .ui-selectonemenu-panel, .ui-datepicker { max-width: calc(100vw - 24px) !important; }
  .ui-dialog { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
  .ui-dialog-content { max-width: 100%; overflow-wrap: anywhere; }
  .ui-button, button, a { max-width: 100%; }
  .texto-seleccionado, .texto-no-seleccionado { font-size: clamp(.68rem, 2.8vw, .9rem) !important; overflow-wrap: anywhere; }
  .navbar-brand img { max-width: min(72vw, 260px); }
  .container-card, .screnSizeCard, .creditcard, .form-container, .my-bodyForm { width: 100% !important; max-width: 100% !important; }
  .container-card { padding-left: 14px !important; padding-right: 14px !important; }
  .form-container { margin-left: auto !important; margin-right: auto !important; }
  .row { margin-left: 0 !important; margin-right: 0 !important; }
}

@media (max-width: 480px) {
  .content-width-main, .content-width-submain { width: calc(100% - 20px) !important; }
  .ui-panelgrid-cell { min-width: 0; }
  .ui-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
  h1, h2, h3, label, p, span { overflow-wrap: anywhere; }
}