/* ============================================================================
   Juicy — Dashboard Design System · GRID
   ----------------------------------------------------------------------------
   Reemplazo de `bootstrap-grid.min.css` (56 KB). F6b, quitar Bootstrap.

   Reproduce el grid de 12 columnas de Bootstrap 5 EXACTAMENTE — misma mecánica de
   gutters (la `.row` mete márgenes negativos, la `.col` los compensa con padding),
   mismos valores — para que el markup existente (`.row`/`.col*`/`.g-*`) no mueva
   un pixel. NO es un rediseño del grid: es traer a casa lo que era un framework.

   Diferencias deliberadas con Bootstrap:
     · Las variables de gutter se llaman `--juicy-gutter-*`, no `--bs-*` (medido:
       NADIE en el producto lee `--bs-*`, así que no se hereda esa marca).
     · Solo se generan los breakpoints EN USO por algún consumidor del DS:
       `md` (768), `lg` (992) y `xl` (1200). El `xl` lo trae el Hub (`.col-xl-4`
       en su dashboard); juicy-core no lo usa pero es barato y unifica la fuente.
       `sm`/`xxl` no los usa nadie (censo). Añadir uno es un `@media`.
     · `.container` trae solo la base (ancho + centrado); su `padding:0` y
       `max-width:1640` los pone main.css (que carga después y gana), igual que
       cuando Bootstrap cargaba antes de main. 1 solo uso en el producto.

   Alcance = UNIÓN de los consumidores del DS (juicy-core + gw-fields + Hub):
   `.row`, `.col`, `.col-{1..12}`, `.col-{md,lg,xl}-*`, `.g/gx/gy-*`, `.row-cols-*`.
   Se generan los sets completos (col 1-12, gutters 0-5) aunque el uso sea parcial:
   es barato y evita un hueco silencioso cuando alguien añada un `.col-7`. La regla
   de "solo lo usado" aplica a la unión, no a un repo — un `--bs-*` fantasma en un
   consumidor (p.ej. el Hub) es tan real como uno propio (lección F6b).
   ============================================================================ */

/* ---- Contenedor -----------------------------------------------------------
   SIN padding lateral y con tope de 1640. Estos dos valores estaban en main.css
   como un override (2026-07-26 se reconciliaron aquí): el contenedor traía el
   padding de gutter que hereda de Bootstrap y el producto nunca lo quiso, así que
   lo declaraba y acto seguido lo anulaba en otro archivo.
   El front nuevo no carga main.css, así que allá SÍ se aplicaba el padding: la
   pantalla entera salía 24px más estrecha que la de PHP. Se veía como "los
   espaciados no coinciden" y era esta línea. */
.container {
  width: 100%;
  max-width: 1640px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}

/* ---- Row: el gutter vive aquí y lo consumen las columnas ------------------- */
.row {
  --juicy-gutter-x: 1.5rem;
  --juicy-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--juicy-gutter-y));
  margin-right: calc(-0.5 * var(--juicy-gutter-x));
  margin-left: calc(-0.5 * var(--juicy-gutter-x));
}

.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--juicy-gutter-x) * 0.5);
  padding-left: calc(var(--juicy-gutter-x) * 0.5);
  margin-top: var(--juicy-gutter-y);
}

/* ---- Columnas ------------------------------------------------------------- */
.col {
  flex: 1 0 0%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1  { flex: 0 0 auto; width: 8.33333333%; }
.col-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* ---- Row-cols: reparte los hijos en N columnas iguales -------------------- */
.row-cols-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-3 > * { flex: 0 0 auto; width: 33.3333333333%; }
.row-cols-4 > * { flex: 0 0 auto; width: 25%; }
.row-cols-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-6 > * { flex: 0 0 auto; width: 16.6666666667%; }

/* ---- Gutters: el `.g-*` fija ambos ejes; `.gx-*`/`.gy-*` uno solo ---------- */
.g-0, .gx-0 { --juicy-gutter-x: 0; }
.g-0, .gy-0 { --juicy-gutter-y: 0; }
.g-1, .gx-1 { --juicy-gutter-x: 0.25rem; }
.g-1, .gy-1 { --juicy-gutter-y: 0.25rem; }
.g-2, .gx-2 { --juicy-gutter-x: 0.5rem; }
.g-2, .gy-2 { --juicy-gutter-y: 0.5rem; }
.g-3, .gx-3 { --juicy-gutter-x: 1rem; }
.g-3, .gy-3 { --juicy-gutter-y: 1rem; }
.g-4, .gx-4 { --juicy-gutter-x: 1.5rem; }
.g-4, .gy-4 { --juicy-gutter-y: 1.5rem; }
.g-5, .gx-5 { --juicy-gutter-x: 3rem; }
.g-5, .gy-5 { --juicy-gutter-y: 3rem; }

/* ---- Breakpoint md (≥768) ------------------------------------------------- */
@media (min-width: 768px) {
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1  { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-2  { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3  { flex: 0 0 auto; width: 25%; }
  .col-md-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-5  { flex: 0 0 auto; width: 41.66666667%; }
  .col-md-6  { flex: 0 0 auto; width: 50%; }
  .col-md-7  { flex: 0 0 auto; width: 58.33333333%; }
  .col-md-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-9  { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
  .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-md-3 > * { flex: 0 0 auto; width: 33.3333333333%; }
}

/* ---- Breakpoint lg (≥992) ------------------------------------------------- */
@media (min-width: 992px) {
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1  { flex: 0 0 auto; width: 8.33333333%; }
  .col-lg-2  { flex: 0 0 auto; width: 16.66666667%; }
  .col-lg-3  { flex: 0 0 auto; width: 25%; }
  .col-lg-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5  { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6  { flex: 0 0 auto; width: 50%; }
  .col-lg-7  { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-lg-9  { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
  .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.3333333333%; }
}

/* ---- Breakpoint xl (≥1200) — lo usa el Hub (.col-xl-4) -------------------- */
@media (min-width: 1200px) {
  .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1  { flex: 0 0 auto; width: 8.33333333%; }
  .col-xl-2  { flex: 0 0 auto; width: 16.66666667%; }
  .col-xl-3  { flex: 0 0 auto; width: 25%; }
  .col-xl-4  { flex: 0 0 auto; width: 33.33333333%; }
  .col-xl-5  { flex: 0 0 auto; width: 41.66666667%; }
  .col-xl-6  { flex: 0 0 auto; width: 50%; }
  .col-xl-7  { flex: 0 0 auto; width: 58.33333333%; }
  .col-xl-8  { flex: 0 0 auto; width: 66.66666667%; }
  .col-xl-9  { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
}