/*
 * NUBO_GOALS_NATIVE_GRID_V2
 *
 * Usa directamente los wrappers reales generados
 * por la plantilla:
 *
 * .nubo-goal-workspace
 *   > .nubo-goal-detail-card
 *
 * No mueve nodos y no modifica JavaScript.
 */


/* ==========================================================
   CONTENEDOR REAL DE LA LISTA
   ========================================================== */

/*
 * Solo selecciona el elemento que contiene directamente
 * las tarjetas completas de cada meta.
 */

#app
.nubo-goals-page
:where(
  section,
  main,
  div
):has(
  > .nubo-goal-workspace
) {
  grid-column:
    1 / -1 !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  align-items:
    stretch !important;

  gap:
    18px !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  height:
    auto !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/*
 * Cualquier elemento adicional del contenedor,
 * como encabezados o Tip Nubo, conserva todo el ancho.
 */

#app
.nubo-goals-page
:where(
  section,
  main,
  div
):has(
  > .nubo-goal-workspace
)
> :not(
  .nubo-goal-workspace
) {
  grid-column:
    1 / -1 !important;
}


/* ==========================================================
   WRAPPER COMPLETO DE CADA META
   ========================================================== */

#app
.nubo-goals-page
.nubo-goal-workspace {
  container-type:
    inline-size !important;

  display:
    flex !important;

  grid-template-columns:
    minmax(0, 1fr) !important;

  align-self:
    stretch !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  height:
    100% !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* ==========================================================
   CARD COMPLETA
   ========================================================== */

#app
.nubo-goals-page
.nubo-goal-workspace
> .nubo-goal-detail-card {
  display:
    flex !important;

  flex-direction:
    column !important;

  align-self:
    stretch !important;

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  height:
    100% !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;
}


/* Las acciones quedan alineadas al final de cada fila. */

#app
.nubo-goals-page
.nubo-goal-workspace
.nubo-goal-actions,

#app
.nubo-goals-page
.nubo-goal-workspace
.nubo-goal-detail-actions {
  margin-top:
    auto !important;
}


/* ==========================================================
   CARD ESTRECHA DENTRO DE LA CUADRÍCULA
   ========================================================== */

@container (max-width: 430px) {
  #app
  .nubo-goals-page
  .nubo-goal-detail-card {
    gap:
      12px !important;

    padding:
      15px !important;
  }


  /* Título e indicador de progreso. */

  #app
  .nubo-goals-page
  .nubo-goal-detail-head {
    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1fr) auto !important;

    align-items:
      start !important;

    gap:
      10px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-identity {
    min-width:
      0 !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-identity
  > div {
    min-width:
      0 !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-identity
  > div
  > strong {
    display:
      -webkit-box !important;

    overflow:
      hidden !important;

    white-space:
      normal !important;

    overflow-wrap:
      anywhere !important;

    -webkit-box-orient:
      vertical !important;

    -webkit-line-clamp:
      2 !important;
  }


  /* Tres importes conservan una fila compacta. */

  #app
  .nubo-goals-page
  .nubo-goal-amount-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      ) !important;

    gap:
      7px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-amount-grid
  > article {
    min-width:
      0 !important;

    padding:
      10px 8px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-amount-grid
  strong {
    font-size:
      12px !important;

    overflow-wrap:
      anywhere !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-amount-grid
  span,

  #app
  .nubo-goals-page
  .nubo-goal-amount-grid
  small {
    font-size:
      8px !important;
  }


  /* Aporte sugerido y plazo conservan dos columnas. */

  #app
  .nubo-goals-page
  .nubo-goal-plan {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap:
      7px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-plan
  > article {
    min-width:
      0 !important;

    padding:
      10px !important;
  }


  /* Siguiente paso en estructura vertical ordenada. */

  #app
  .nubo-goals-page
  .nubo-goal-next-step {
    grid-template-columns:
      40px minmax(0, 1fr) !important;

    gap:
      10px !important;

    padding:
      11px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-next-step__icon {
    width:
      40px !important;

    min-width:
      40px !important;

    height:
      40px !important;

    border-radius:
      12px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-next-step__metric {
    grid-column:
      2 !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      8px !important;

    width:
      100% !important;

    min-width:
      0 !important;

    margin-top:
      3px !important;

    padding:
      8px 0 0 !important;

    border-top:
      1px solid
      rgba(178, 207, 193, 0.58) !important;

    border-left:
      0 !important;

    text-align:
      left !important;
  }


  /* Acciones: aportar arriba y restantes debajo. */

  #app
  .nubo-goals-page
  .nubo-goal-actions,

  #app
  .nubo-goals-page
  .nubo-goal-detail-actions {
    display:
      grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap:
      7px !important;

    width:
      100% !important;
  }


  #app
  .nubo-goals-page
  [data-action="contribute-goal"] {
    grid-column:
      1 / -1 !important;
  }


  #app
  .nubo-goals-page
  [data-action="delete-goal"] {
    margin-left:
      0 !important;
  }
}


/* ==========================================================
   TABLET: DOS METAS POR FILA
   ========================================================== */

@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;
  }
}


/* ==========================================================
   MÓVIL: UNA META POR FILA
   ========================================================== */

@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;
  }


  #app
  .nubo-goals-page
  .nubo-goal-workspace,

  #app
  .nubo-goals-page
  .nubo-goal-workspace
  > .nubo-goal-detail-card {
    height:
      auto !important;
  }
}


/* Móviles extremadamente estrechos. */

@media (max-width: 390px) {
  #app
  .nubo-goals-page
  .nubo-goal-amount-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-plan {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-actions,

  #app
  .nubo-goals-page
  .nubo-goal-detail-actions {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }


  #app
  .nubo-goals-page
  [data-action] {
    grid-column:
      auto !important;

    width:
      100% !important;
  }
}