/* ==========================================================================
   Container Query Grid (cq-grid)
   --------------------------------------------------------------------------
   Sistema de columnas tipo Bootstrap, pero basado en el ancho del
   CONTENEDOR (CSS Container Queries) en lugar del viewport del navegador.
   Pensado para paneles de DxSplitter u otros contenedores cuyo ancho
   cambia dinámicamente sin que cambie el tamaño de la ventana.

   Basado en CSS Grid: el `gap` se resta automáticamente del ancho de
   las pistas, así que agregar o quitar espaciado nunca rompe las cuentas
   (a diferencia de un sistema de `width: %` sobre flexbox).

   Mapa de breakpoints (ancho del CONTENEDOR, no del viewport):
     sm  >= 480px
     md  >= 640px
     lg  >= 900px
     xl  >= 1200px
     xxl >= 1600px
   Ajusta estos valores en los bloques @container de abajo según tu caso.

   Piezas del sistema:
     .cq-container   -> Solo declara el contenedor consultable (container-type).
                         Úsalo cuando necesites contexto de @container sin
                         que el elemento sea además una grilla de 12 columnas
                         (p. ej. para adaptar un DxToolbar por su cuenta).
     .cq-grid        -> Contenedor consultable + grilla explícita de 12
                         columnas. Es la pieza principal para formularios.
     .col-{bp}-{1-12}-> Ancho de un campo dentro de un .cq-grid, expresado
                         en fracciones de 12, a partir del breakpoint {bp}.
     .col-full       -> Fuerza ancho completo sin importar otras clases
                         col-* que tenga el elemento.
     .cq-auto        -> Alternativa sin breakpoints manuales: cada campo
                         mide entre --cq-min y --cq-max, y la grilla decide
                         sola cuántos caben por fila (ideal para campos
                         de tamaño uniforme, como varios DxTextBox cortos).
     .cq-flow        -> Para cuando NO controlas el DOM entre el contenedor
                         y el campo (p. ej. DxFormLayout, que mete su propia
                         estructura interna entre <DxFormLayout> y cada
                         DxFormLayoutItem/DxFormLayoutGroup) o el contenedor
                         ya tiene su propio motor de layout (flexbox propio
                         del componente) que no puedes ni quieres reemplazar.
                         No declara `display`, usa selector DESCENDIENTE
                         (no de hijo directo) y reparte ancho con `width: %`
                         en vez de `grid-column`, así que no pelea con el
                         layout interno del componente. Las clases col-*
                         y col-full son las mismas de .cq-grid/.cq-auto.

   Anidamiento: puedes anidar cuantos .cq-grid / .cq-auto quieras dentro
   de una celda; cada uno consulta SU PROPIO ancho automáticamente, sin
   configuración adicional (así funcionan los container queries sin nombre).

   ¿.cq-grid o .cq-flow? Usa .cq-grid cuando el elemento con `col-*` es
   HIJO DIRECTO del contenedor `.cq-grid` (tú armas ese HTML). Usa .cq-flow
   cuando ese elemento queda anidado dentro del árbol de render de un
   componente de terceros (DevExpress, etc.) que tú no controlas.
   ========================================================================== */

/* -- Utilidades base -------------------------------------------------- */

.cq-container {
    container-type: inline-size;
}

.cq-grid,
.cq-auto {
    container-type: inline-size;
    box-sizing: border-box;
    gap: var(--cq-gap, 1rem);
}

.cq-grid *,
.cq-auto * {
    box-sizing: border-box;
}

/* -- .cq-grid: 12 columnas explícitas, mobile-first -------------------- */

.cq-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

/* Por defecto (sin ninguna clase col-*), cada campo ocupa el 100% del
   ancho disponible. Solo agrega clases col-{bp}-{n} a los campos que
   necesiten compartir fila con otros. */
.cq-grid > * {
    grid-column: span 12;
}

/* sm >= 480px */
@container (min-width: 480px) {
    .cq-grid > .col-sm-1  { grid-column: span 1; }
    .cq-grid > .col-sm-2  { grid-column: span 2; }
    .cq-grid > .col-sm-3  { grid-column: span 3; }
    .cq-grid > .col-sm-4  { grid-column: span 4; }
    .cq-grid > .col-sm-5  { grid-column: span 5; }
    .cq-grid > .col-sm-6  { grid-column: span 6; }
    .cq-grid > .col-sm-7  { grid-column: span 7; }
    .cq-grid > .col-sm-8  { grid-column: span 8; }
    .cq-grid > .col-sm-9  { grid-column: span 9; }
    .cq-grid > .col-sm-10 { grid-column: span 10; }
    .cq-grid > .col-sm-11 { grid-column: span 11; }
    .cq-grid > .col-sm-12 { grid-column: span 12; }
}

/* md >= 640px */
@container (min-width: 640px) {
    .cq-grid > .col-md-1  { grid-column: span 1; }
    .cq-grid > .col-md-2  { grid-column: span 2; }
    .cq-grid > .col-md-3  { grid-column: span 3; }
    .cq-grid > .col-md-4  { grid-column: span 4; }
    .cq-grid > .col-md-5  { grid-column: span 5; }
    .cq-grid > .col-md-6  { grid-column: span 6; }
    .cq-grid > .col-md-7  { grid-column: span 7; }
    .cq-grid > .col-md-8  { grid-column: span 8; }
    .cq-grid > .col-md-9  { grid-column: span 9; }
    .cq-grid > .col-md-10 { grid-column: span 10; }
    .cq-grid > .col-md-11 { grid-column: span 11; }
    .cq-grid > .col-md-12 { grid-column: span 12; }
}

/* lg >= 900px */
@container (min-width: 900px) {
    .cq-grid > .col-lg-1  { grid-column: span 1; }
    .cq-grid > .col-lg-2  { grid-column: span 2; }
    .cq-grid > .col-lg-3  { grid-column: span 3; }
    .cq-grid > .col-lg-4  { grid-column: span 4; }
    .cq-grid > .col-lg-5  { grid-column: span 5; }
    .cq-grid > .col-lg-6  { grid-column: span 6; }
    .cq-grid > .col-lg-7  { grid-column: span 7; }
    .cq-grid > .col-lg-8  { grid-column: span 8; }
    .cq-grid > .col-lg-9  { grid-column: span 9; }
    .cq-grid > .col-lg-10 { grid-column: span 10; }
    .cq-grid > .col-lg-11 { grid-column: span 11; }
    .cq-grid > .col-lg-12 { grid-column: span 12; }
}

/* xl >= 1200px */
@container (min-width: 1200px) {
    .cq-grid > .col-xl-1  { grid-column: span 1; }
    .cq-grid > .col-xl-2  { grid-column: span 2; }
    .cq-grid > .col-xl-3  { grid-column: span 3; }
    .cq-grid > .col-xl-4  { grid-column: span 4; }
    .cq-grid > .col-xl-5  { grid-column: span 5; }
    .cq-grid > .col-xl-6  { grid-column: span 6; }
    .cq-grid > .col-xl-7  { grid-column: span 7; }
    .cq-grid > .col-xl-8  { grid-column: span 8; }
    .cq-grid > .col-xl-9  { grid-column: span 9; }
    .cq-grid > .col-xl-10 { grid-column: span 10; }
    .cq-grid > .col-xl-11 { grid-column: span 11; }
    .cq-grid > .col-xl-12 { grid-column: span 12; }
}

/* xxl >= 1600px (paneles muy anchos: pantallas 4K / ultrawide) */
@container (min-width: 1600px) {
    .cq-grid > .col-xxl-1  { grid-column: span 1; }
    .cq-grid > .col-xxl-2  { grid-column: span 2; }
    .cq-grid > .col-xxl-3  { grid-column: span 3; }
    .cq-grid > .col-xxl-4  { grid-column: span 4; }
    .cq-grid > .col-xxl-5  { grid-column: span 5; }
    .cq-grid > .col-xxl-6  { grid-column: span 6; }
    .cq-grid > .col-xxl-7  { grid-column: span 7; }
    .cq-grid > .col-xxl-8  { grid-column: span 8; }
    .cq-grid > .col-xxl-9  { grid-column: span 9; }
    .cq-grid > .col-xxl-10 { grid-column: span 10; }
    .cq-grid > .col-xxl-11 { grid-column: span 11; }
    .cq-grid > .col-xxl-12 { grid-column: span 12; }
}

/* Fuerza ancho completo sin importar otras clases col-* combinadas.
   Declarada al final para ganar el empate de especificidad. */
.cq-grid > .col-full {
    grid-column: 1 / -1 !important;
}

/* -- .cq-auto: filas que se autoajustan sin breakpoints manuales ------- */
/* Cada campo mide entre --cq-min y --cq-max; la grilla decide sola
   cuántos caben por fila según el ancho real del contenedor.
   Personaliza por instancia, ej: style="--cq-min:180px; --cq-max:260px" */
.cq-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--cq-min, 220px), var(--cq-max, 320px)));
    justify-content: start;
}

.cq-auto > .col-full {
    grid-column: 1 / -1;
}

/* -- .cq-flow: columnas por ancho de contenedor SIN imponer un modelo de
   caja propio (no toca `display`) ---------------------------------------
   Úsalo cuando el elemento con las clases col-* no es hijo directo del
   contenedor consultable (p. ej. queda anidado dentro del DOM interno que
   arma un componente de terceros, como DxFormLayout), o cuando ese
   contenedor ya tiene su propio motor de layout que no debe alterarse.

   Marca el contenedor consultable con .cq-flow (equivale a declarar
   container-type: inline-size ahí) y usa las mismas clases
   col-{bp}-{1-12} / col-full en los campos, sin importar cuántos niveles
   de DOM propio del componente haya de por medio: el selector es
   DESCENDIENTE, no de hijo directo. */

.cq-flow {
    container-type: inline-size;
}

.cq-flow .col-sm-1, .cq-flow .col-sm-2, .cq-flow .col-sm-3,
.cq-flow .col-sm-4, .cq-flow .col-sm-5, .cq-flow .col-sm-6,
.cq-flow .col-sm-7, .cq-flow .col-sm-8, .cq-flow .col-sm-9,
.cq-flow .col-sm-10, .cq-flow .col-sm-11, .cq-flow .col-sm-12,
.cq-flow .col-md-1, .cq-flow .col-md-2, .cq-flow .col-md-3,
.cq-flow .col-md-4, .cq-flow .col-md-5, .cq-flow .col-md-6,
.cq-flow .col-md-7, .cq-flow .col-md-8, .cq-flow .col-md-9,
.cq-flow .col-md-10, .cq-flow .col-md-11, .cq-flow .col-md-12,
.cq-flow .col-lg-1, .cq-flow .col-lg-2, .cq-flow .col-lg-3,
.cq-flow .col-lg-4, .cq-flow .col-lg-5, .cq-flow .col-lg-6,
.cq-flow .col-lg-7, .cq-flow .col-lg-8, .cq-flow .col-lg-9,
.cq-flow .col-lg-10, .cq-flow .col-lg-11, .cq-flow .col-lg-12,
.cq-flow .col-xl-1, .cq-flow .col-xl-2, .cq-flow .col-xl-3,
.cq-flow .col-xl-4, .cq-flow .col-xl-5, .cq-flow .col-xl-6,
.cq-flow .col-xl-7, .cq-flow .col-xl-8, .cq-flow .col-xl-9,
.cq-flow .col-xl-10, .cq-flow .col-xl-11, .cq-flow .col-xl-12,
.cq-flow .col-xxl-1, .cq-flow .col-xxl-2, .cq-flow .col-xxl-3,
.cq-flow .col-xxl-4, .cq-flow .col-xxl-5, .cq-flow .col-xxl-6,
.cq-flow .col-xxl-7, .cq-flow .col-xxl-8, .cq-flow .col-xxl-9,
.cq-flow .col-xxl-10, .cq-flow .col-xxl-11, .cq-flow .col-xxl-12 {
    /* flex-basis + max-width (patrón Bootstrap) además de width: algunos
       componentes de terceros (p. ej. DxFormLayout) miden sus items por
       flex-basis, no por width. !important es necesario porque los temas
       de DevExpress traen reglas predefinidas de mayor especificidad
       (selectores de 2+ clases) que le ganan a una regla de una sola
       clase de terceros; así lo documenta DevExpress. */
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* sm >= 480px */
@container (min-width: 480px) {
    .cq-flow .col-sm-1  { flex-basis: 8.33333333%  !important; max-width: 8.33333333%  !important; width: 8.33333333%  !important; }
    .cq-flow .col-sm-2  { flex-basis: 16.66666667% !important; max-width: 16.66666667% !important; width: 16.66666667% !important; }
    .cq-flow .col-sm-3  { flex-basis: 25%          !important; max-width: 25%          !important; width: 25%          !important; }
    .cq-flow .col-sm-4  { flex-basis: 33.33333333% !important; max-width: 33.33333333% !important; width: 33.33333333% !important; }
    .cq-flow .col-sm-5  { flex-basis: 41.66666667% !important; max-width: 41.66666667% !important; width: 41.66666667% !important; }
    .cq-flow .col-sm-6  { flex-basis: 50%          !important; max-width: 50%          !important; width: 50%          !important; }
    .cq-flow .col-sm-7  { flex-basis: 58.33333333% !important; max-width: 58.33333333% !important; width: 58.33333333% !important; }
    .cq-flow .col-sm-8  { flex-basis: 66.66666667% !important; max-width: 66.66666667% !important; width: 66.66666667% !important; }
    .cq-flow .col-sm-9  { flex-basis: 75%          !important; max-width: 75%          !important; width: 75%          !important; }
    .cq-flow .col-sm-10 { flex-basis: 83.33333333% !important; max-width: 83.33333333% !important; width: 83.33333333% !important; }
    .cq-flow .col-sm-11 { flex-basis: 91.66666667% !important; max-width: 91.66666667% !important; width: 91.66666667% !important; }
    .cq-flow .col-sm-12 { flex-basis: 100%         !important; max-width: 100%         !important; width: 100%         !important; }
}

/* md >= 640px */
@container (min-width: 640px) {
    .cq-flow .col-md-1  { flex-basis: 8.33333333%  !important; max-width: 8.33333333%  !important; width: 8.33333333%  !important; }
    .cq-flow .col-md-2  { flex-basis: 16.66666667% !important; max-width: 16.66666667% !important; width: 16.66666667% !important; }
    .cq-flow .col-md-3  { flex-basis: 25%          !important; max-width: 25%          !important; width: 25%          !important; }
    .cq-flow .col-md-4  { flex-basis: 33.33333333% !important; max-width: 33.33333333% !important; width: 33.33333333% !important; }
    .cq-flow .col-md-5  { flex-basis: 41.66666667% !important; max-width: 41.66666667% !important; width: 41.66666667% !important; }
    .cq-flow .col-md-6  { flex-basis: 50%          !important; max-width: 50%          !important; width: 50%          !important; }
    .cq-flow .col-md-7  { flex-basis: 58.33333333% !important; max-width: 58.33333333% !important; width: 58.33333333% !important; }
    .cq-flow .col-md-8  { flex-basis: 66.66666667% !important; max-width: 66.66666667% !important; width: 66.66666667% !important; }
    .cq-flow .col-md-9  { flex-basis: 75%          !important; max-width: 75%          !important; width: 75%          !important; }
    .cq-flow .col-md-10 { flex-basis: 83.33333333% !important; max-width: 83.33333333% !important; width: 83.33333333% !important; }
    .cq-flow .col-md-11 { flex-basis: 91.66666667% !important; max-width: 91.66666667% !important; width: 91.66666667% !important; }
    .cq-flow .col-md-12 { flex-basis: 100%         !important; max-width: 100%         !important; width: 100%         !important; }
}

/* lg >= 900px */
@container (min-width: 900px) {
    .cq-flow .col-lg-1  { flex-basis: 8.33333333%  !important; max-width: 8.33333333%  !important; width: 8.33333333%  !important; }
    .cq-flow .col-lg-2  { flex-basis: 16.66666667% !important; max-width: 16.66666667% !important; width: 16.66666667% !important; }
    .cq-flow .col-lg-3  { flex-basis: 25%          !important; max-width: 25%          !important; width: 25%          !important; }
    .cq-flow .col-lg-4  { flex-basis: 33.33333333% !important; max-width: 33.33333333% !important; width: 33.33333333% !important; }
    .cq-flow .col-lg-5  { flex-basis: 41.66666667% !important; max-width: 41.66666667% !important; width: 41.66666667% !important; }
    .cq-flow .col-lg-6  { flex-basis: 50%          !important; max-width: 50%          !important; width: 50%          !important; }
    .cq-flow .col-lg-7  { flex-basis: 58.33333333% !important; max-width: 58.33333333% !important; width: 58.33333333% !important; }
    .cq-flow .col-lg-8  { flex-basis: 66.66666667% !important; max-width: 66.66666667% !important; width: 66.66666667% !important; }
    .cq-flow .col-lg-9  { flex-basis: 75%          !important; max-width: 75%          !important; width: 75%          !important; }
    .cq-flow .col-lg-10 { flex-basis: 83.33333333% !important; max-width: 83.33333333% !important; width: 83.33333333% !important; }
    .cq-flow .col-lg-11 { flex-basis: 91.66666667% !important; max-width: 91.66666667% !important; width: 91.66666667% !important; }
    .cq-flow .col-lg-12 { flex-basis: 100%         !important; max-width: 100%         !important; width: 100%         !important; }
}

/* xl >= 1200px */
@container (min-width: 1200px) {
    .cq-flow .col-xl-1  { flex-basis: 8.33333333%  !important; max-width: 8.33333333%  !important; width: 8.33333333%  !important; }
    .cq-flow .col-xl-2  { flex-basis: 16.66666667% !important; max-width: 16.66666667% !important; width: 16.66666667% !important; }
    .cq-flow .col-xl-3  { flex-basis: 25%          !important; max-width: 25%          !important; width: 25%          !important; }
    .cq-flow .col-xl-4  { flex-basis: 33.33333333% !important; max-width: 33.33333333% !important; width: 33.33333333% !important; }
    .cq-flow .col-xl-5  { flex-basis: 41.66666667% !important; max-width: 41.66666667% !important; width: 41.66666667% !important; }
    .cq-flow .col-xl-6  { flex-basis: 50%          !important; max-width: 50%          !important; width: 50%          !important; }
    .cq-flow .col-xl-7  { flex-basis: 58.33333333% !important; max-width: 58.33333333% !important; width: 58.33333333% !important; }
    .cq-flow .col-xl-8  { flex-basis: 66.66666667% !important; max-width: 66.66666667% !important; width: 66.66666667% !important; }
    .cq-flow .col-xl-9  { flex-basis: 75%          !important; max-width: 75%          !important; width: 75%          !important; }
    .cq-flow .col-xl-10 { flex-basis: 83.33333333% !important; max-width: 83.33333333% !important; width: 83.33333333% !important; }
    .cq-flow .col-xl-11 { flex-basis: 91.66666667% !important; max-width: 91.66666667% !important; width: 91.66666667% !important; }
    .cq-flow .col-xl-12 { flex-basis: 100%         !important; max-width: 100%         !important; width: 100%         !important; }
}

/* xxl >= 1600px (paneles muy anchos: pantallas 4K / ultrawide) */
@container (min-width: 1600px) {
    .cq-flow .col-xxl-1  { flex-basis: 8.33333333%  !important; max-width: 8.33333333%  !important; width: 8.33333333%  !important; }
    .cq-flow .col-xxl-2  { flex-basis: 16.66666667% !important; max-width: 16.66666667% !important; width: 16.66666667% !important; }
    .cq-flow .col-xxl-3  { flex-basis: 25%          !important; max-width: 25%          !important; width: 25%          !important; }
    .cq-flow .col-xxl-4  { flex-basis: 33.33333333% !important; max-width: 33.33333333% !important; width: 33.33333333% !important; }
    .cq-flow .col-xxl-5  { flex-basis: 41.66666667% !important; max-width: 41.66666667% !important; width: 41.66666667% !important; }
    .cq-flow .col-xxl-6  { flex-basis: 50%          !important; max-width: 50%          !important; width: 50%          !important; }
    .cq-flow .col-xxl-7  { flex-basis: 58.33333333% !important; max-width: 58.33333333% !important; width: 58.33333333% !important; }
    .cq-flow .col-xxl-8  { flex-basis: 66.66666667% !important; max-width: 66.66666667% !important; width: 66.66666667% !important; }
    .cq-flow .col-xxl-9  { flex-basis: 75%          !important; max-width: 75%          !important; width: 75%          !important; }
    .cq-flow .col-xxl-10 { flex-basis: 83.33333333% !important; max-width: 83.33333333% !important; width: 83.33333333% !important; }
    .cq-flow .col-xxl-11 { flex-basis: 91.66666667% !important; max-width: 91.66666667% !important; width: 91.66666667% !important; }
    .cq-flow .col-xxl-12 { flex-basis: 100%         !important; max-width: 100%         !important; width: 100%         !important; }
}

/* Fuerza ancho completo sin importar otras clases col-* combinadas
   (equivalente a .cq-grid > .col-full, pero como selector descendiente). */
.cq-flow .col-full {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}