/* --- Contenedor general de la cuadrícula --- */
.ui-g, .ui-g-nopad {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width:100%;
/*      --bs-gutter-x: 1.5rem; */
/*     --bs-gutter-y: 0; */
}

/* Cada columna usa flexbox para su contenido */
.ui-g > [class*="ui-g-"],
.ui-g > [class*="ui-sm"],
.ui-g > [class*="ui-md"],
.ui-g > [class*="ui-lg"],
.ui-g > [class*="ui-xl"]
 {
/*   display: flex; */
/*   display: flex; */

/*   flex-direction: column; */
    flex-shrink: 0;
/*  width: 100%; */
/*     max-width: 100%; */
  box-sizing: border-box;
  float:none;
/*    flex: 0 0 auto; */
/*   padding: 0.5rem; */
}

/* --- Tamaños base (desktop, 12 columnas) --- */
 [class*="ui-g-"],
[class*="ui-sm"],
[class*="ui-md"],
[class*="ui-lg"],
[class*="ui-xl"] {
  flex: 0 0 auto;
}

.ui-g > [class*="ui-g-"] > *,
.ui-g > [class*="ui-sm"] > *,
.ui-g > [class*="ui-md"] > *,
.ui-g > [class*="ui-lg"] > *,
.ui-g > [class*="ui-xl"] > * {
  width: 100%;
}

.ui-g-0  {display:none;}
.ui-g-1 { display:flex;  flex-basis: 8.3333%; max-width: 8.3333%; }
.ui-g-2 { display:flex; flex-basis: 16.6667%; max-width: 16.6667%; }
.ui-g-3 { display:flex; flex-basis: 25%;      max-width: 25%; }
.ui-g-4 { display:flex; flex-basis: 33.3333%; max-width: 33.3333%; }
.ui-g-5 { display:flex; flex-basis: 41.6667%; max-width: 41.6667%; }
.ui-g-6 { display:flex; flex-basis: 50%;      max-width: 50%; }
.ui-g-7 { display:flex; flex-basis: 58.3333%; max-width: 58.3333%; }
.ui-g-8 { display:flex; flex-basis: 66.6667%; max-width: 66.6667%; }
.ui-g-9 { display:flex; flex-basis: 75%;      max-width: 75%; }
.ui-g-10{ display:flex; flex-basis: 83.3333%; max-width: 83.3333%; }
.ui-g-11{ display:flex; flex-basis: 91.6667%; max-width: 91.6667%; }
.ui-g-12{ display:flex; flex-basis: 100%;     max-width: 100%; }

/* --- Responsivo: Small (>=576px) --- */
@media (max-width: 767px ){
	.ui-sm-0  {display:none;}
  .ui-sm-1 { display:flex; flex-basis: 8.3333%; max-width: 8.3333%; }
  .ui-sm-2 { display:flex; flex-basis: 16.6667%; max-width: 16.6667%; }
  .ui-sm-3 { display:flex; flex-basis: 25%;      max-width: 25%; }
  .ui-sm-4 { display:flex; flex-basis: 33.3333%; max-width: 33.3333%; }
  .ui-sm-5 { display:flex; flex-basis: 41.6667%; max-width: 41.6667%; }
  .ui-sm-6 { display:flex; flex-basis: 50%;      max-width: 50%; }
  .ui-sm-7 { display:flex; flex-basis: 58.3333%; max-width: 58.3333%; }
  .ui-sm-8 { display:flex; flex-basis: 66.6667%; max-width: 66.6667%; }
  .ui-sm-9 { display:flex; flex-basis: 75%;      max-width: 75%; }
  .ui-sm-10{ display:flex; flex-basis: 83.3333%; max-width: 83.3333%; }
  .ui-sm-11{ display:flex; flex-basis: 91.6667%; max-width: 91.6667%; }
  .ui-sm-12{ display:flex; flex-basis: 100%;     max-width: 100%; }
}

/* --- Medium (>=768px) --- */
@media (min-width: 768px) {
	.ui-md-0  {display:none;}
  .ui-md-1 { display:flex; flex-basis: 8.3333%; max-width: 8.3333%; }
  .ui-md-2 { display:flex; flex-basis: 16.6667%; max-width: 16.6667%; }
  .ui-md-3 { display:flex; flex-basis: 25%;      max-width: 25%; }
  .ui-md-4 { display:flex; flex-basis: 33.3333%; max-width: 33.3333%; }
  .ui-md-5 { display:flex; flex-basis: 41.6667%; max-width: 41.6667%; }
  .ui-md-6 { display:flex; flex-basis: 50%;      max-width: 50%; }
  .ui-md-7 { display:flex; flex-basis: 58.3333%; max-width: 58.3333%; }
  .ui-md-8 { display:flex; flex-basis: 66.6667%; max-width: 66.6667%; }
  .ui-md-9 { display:flex; flex-basis: 75%;      max-width: 75%; }
  .ui-md-10{ display:flex; flex-basis: 83.3333%; max-width: 83.3333%; }
  .ui-md-11{ flex-basis: 91.6667%; max-width: 91.6667%; }
  .ui-md-12{ flex-basis: 100%;     max-width: 100%; }
}

/* --- Large (>=992px) --- */
@media (min-width: 992px) {
	.ui-lg-0  {display:none;}
  .ui-lg-1 { display:flex; flex-basis: 8.3333%; max-width: 8.3333%; }
  .ui-lg-2 { display:flex; flex-basis: 16.6667%; max-width: 16.6667%; }
  .ui-lg-3 { display:flex; flex-basis: 25%;      max-width: 25%; }
  .ui-lg-4 { display:flex; flex-basis: 33.3333%; max-width: 33.3333%; }
  .ui-lg-5 { display:flex; flex-basis: 41.6667%; max-width: 41.6667%; }
  .ui-lg-6 { display:flex; flex-basis: 50%;      max-width: 50%; }
  .ui-lg-7 { display:flex; flex-basis: 58.3333%; max-width: 58.3333%; }
  .ui-lg-8 { display:flex; flex-basis: 66.6667%; max-width: 66.6667%; }
  .ui-lg-9 {  display:flex;flex-basis: 75%;      max-width: 75%; }
  .ui-lg-10{ display:flex; flex-basis: 83.3333%; max-width: 83.3333%; }
  .ui-lg-11{ display:flex; flex-basis: 91.6667%; max-width: 91.6667%; }
  .ui-lg-12{ display:flex; flex-basis: 100%;     max-width: 100%; }
}

/* --- Extra Large (>=1200px) --- */
@media (min-width: 1200px) {
	.ui-xl-0  {display:none;}
  .ui-xl-1 { display:flex; flex-basis: 8.3333%; max-width: 8.3333%; }
  .ui-xl-2 { display:flex; flex-basis: 16.6667%; max-width: 16.6667%; }
  .ui-xl-3 { display:flex; flex-basis: 25%;      max-width: 25%; }
  .ui-xl-4 { display:flex; flex-basis: 33.3333%; max-width: 33.3333%; }
  .ui-xl-5 { display:flex; flex-basis: 41.6667%; max-width: 41.6667%; }
  .ui-xl-6 { display:flex; flex-basis: 50%;      max-width: 50%; }
  .ui-xl-7 { display:flex; flex-basis: 58.3333%; max-width: 58.3333%; }
  .ui-xl-8 {  display:flex;flex-basis: 66.6667%; max-width: 66.6667%; }
  .ui-xl-9 {  display:flex;flex-basis: 75%;      max-width: 75%; }
  .ui-xl-10{ display:flex; flex-basis: 83.3333%; max-width: 83.3333%; }
  .ui-xl-11{ display:flex; flex-basis: 91.6667%; max-width: 91.6667%; }
  .ui-xl-12{ display:flex; flex-basis: 100%;     max-width: 100%; }
}