/*
 * NUBO_GOALS_GRID_LEFT_FLOW_V4
 *
 * Escritorio:
 * 3 columnas desde la izquierda.
 *
 * Tablet:
 * 2 columnas desde la izquierda.
 *
 * Móvil:
 * 1 columna.
 */


/* ==========================================================
   ESCRITORIO · FLUJO NATURAL DE IZQUIERDA A DERECHA
   ========================================================== */

#app
.nubo-goals-page
:where(
  section,
  main,
  div
):has(
  > .nubo-goal-workspace
) {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  grid-auto-flow:
    row !important;

  justify-content:
    start !important;

  justify-items:
    stretch !important;

  align-items:
    stretch !important;

  width:
    min(
      100%,
      1180px
    ) !important;

  max-width:
    1180px !important;

  margin-left:
    0 !important;

  margin-right:
    auto !important;
}


/*
 * Cada meta conserva una celda completa.
 * Una sola meta ocupa la primera columna.
 */

#app
.nubo-goals-page
.nubo-goal-workspace {
  justify-self:
    stretch !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;
}


/* ==========================================================
   TABLET · DOS COLUMNAS DESDE LA IZQUIERDA
   ========================================================== */

@media (max-width: 1180px) {
  #app
  .nubo-goals-page
  :where(
    section,
    main,
    div
  ):has(
    > .nubo-goal-workspace
  ) {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    width:
      100% !important;

    max-width:
      none !important;

    margin-left:
      0 !important;

    margin-right:
      0 !important;
  }
}


/* ==========================================================
   MÓVIL · UNA COLUMNA
   ========================================================== */

@media (max-width: 720px) {
  #app
  .nubo-goals-page
  :where(
    section,
    main,
    div
  ):has(
    > .nubo-goal-workspace
  ) {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      14px !important;
  }
}