/*
 * NUBO_GOALS_CARD_SURGICAL_FIX_V1
 *
 * Alcance exclusivo:
 * dashboard > tarjeta Metas.
 *
 * No modifica:
 * - otras cards;
 * - página completa de Metas;
 * - Análisis;
 * - Deudas;
 * - Reportes;
 * - Nubo IA.
 */


/* El ancho se evalúa respecto a la card Metas,
   no respecto a toda la ventana. */
#app .finvia-v2-goals-card {
  container-type:
    inline-size;
}


/* Contenedor de las metas. */
#app .finvia-v2-goals-card
.finvia-v2-goals {
  display:
    grid !important;

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

  align-items:
    stretch !important;

  gap:
    14px !important;
}


/* Tarjeta individual. */
#app .finvia-v2-goals-card
.finvia-v2-goal {
  display:
    flex !important;

  flex-direction:
    column !important;

  min-width:
    0 !important;

  min-height:
    190px !important;

  padding:
    16px !important;

  overflow:
    hidden !important;
}


/* Cabecera:
   icono | información | porcentaje */
#app .finvia-v2-goals-card
.nubo-goal-primary {
  position:
    static !important;

  display:
    grid !important;

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

  align-items:
    start !important;

  column-gap:
    10px !important;

  min-width:
    0 !important;
}


/* Icono con tamaño estable. */
#app .finvia-v2-goals-card
.finvia-v2-goal__icon {
  position:
    static !important;

  width:
    44px !important;

  min-width:
    44px !important;

  height:
    44px !important;

  margin:
    0 !important;
}


/* Bloque de texto flexible. */
#app .finvia-v2-goals-card
.nubo-goal-title {
  min-width:
    0 !important;

  width:
    auto !important;
}


/* Nombre de la meta:
   máximo dos líneas, sin puntos suspensivos prematuros. */
#app .finvia-v2-goals-card
.nubo-goal-title > strong {
  display:
    -webkit-box !important;

  min-width:
    0 !important;

  overflow:
    hidden !important;

  white-space:
    normal !important;

  text-overflow:
    clip !important;

  overflow-wrap:
    anywhere !important;

  -webkit-box-orient:
    vertical !important;

  -webkit-line-clamp:
    2 !important;

  line-height:
    1.25 !important;
}


/* Cantidad ahorrada y objetivo. */
#app .finvia-v2-goals-card
.nubo-goal-title > small {
  display:
    block !important;

  position:
    static !important;

  width:
    auto !important;

  margin-top:
    5px !important;

  overflow:
    visible !important;

  white-space:
    normal !important;

  text-overflow:
    clip !important;

  overflow-wrap:
    anywhere !important;

  line-height:
    1.35 !important;
}


/* Porcentaje independiente del texto. */
#app .finvia-v2-goals-card
.nubo-goal-percent {
  position:
    static !important;

  inset:
    auto !important;

  align-self:
    start !important;

  flex:
    none !important;

  min-width:
    max-content !important;

  margin:
    0 !important;

  white-space:
    nowrap !important;
}


/* Barra en el flujo normal. */
#app .finvia-v2-goals-card
.finvia-v2-progress {
  position:
    static !important;

  inset:
    auto !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    14px 0 12px !important;
}


/* Pie sin superposición. */
#app .finvia-v2-goals-card
.nubo-goal-foot {
  position:
    static !important;

  inset:
    auto !important;

  display:
    flex !important;

  flex-wrap:
    wrap !important;

  align-items:
    flex-end !important;

  justify-content:
    space-between !important;

  gap:
    7px 10px !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  margin:
    auto 0 0 !important;

  padding:
    0 !important;
}


/* Monto pendiente. */
#app .finvia-v2-goals-card
.nubo-goal-foot > span {
  position:
    static !important;

  display:
    flex !important;

  flex:
    1 1 105px !important;

  flex-direction:
    column !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  line-height:
    1.25 !important;
}


#app .finvia-v2-goals-card
.nubo-goal-foot > span > strong {
  display:
    block !important;

  position:
    static !important;

  margin:
    0 !important;

  white-space:
    nowrap !important;
}


/* Estado de la meta. */
#app .finvia-v2-goals-card
.nubo-goal-foot > small {
  position:
    static !important;

  inset:
    auto !important;

  flex:
    0 1 auto !important;

  max-width:
    100% !important;

  margin:
    0 0 0 auto !important;

  text-align:
    right !important;

  white-space:
    normal !important;

  overflow-wrap:
    anywhere !important;

  line-height:
    1.25 !important;
}


/* Cuando la card completa no tiene ancho suficiente,
   cada meta ocupa una fila. */
@container (max-width: 520px) {
  #app .finvia-v2-goals-card
  .finvia-v2-goals {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }


  #app .finvia-v2-goals-card
  .finvia-v2-goal {
    min-height:
      170px !important;
  }


  #app .finvia-v2-goals-card
  .nubo-goal-foot {
    display:
      grid !important;

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

    align-items:
      end !important;
  }
}


/* Ajuste para teléfonos muy estrechos. */
@container (max-width: 350px) {
  #app .finvia-v2-goals-card
  .nubo-goal-primary {
    grid-template-columns:
      40px minmax(0, 1fr) !important;
  }


  #app .finvia-v2-goals-card
  .nubo-goal-percent {
    grid-column:
      2 !important;

    justify-self:
      start !important;

    margin-top:
      7px !important;
  }


  #app .finvia-v2-goals-card
  .nubo-goal-foot {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }


  #app .finvia-v2-goals-card
  .nubo-goal-foot > small {
    margin-left:
      0 !important;

    text-align:
      left !important;
  }
}