/*
 * NUBO_DASHBOARD_GOALS_LAYOUT_FIX_V2
 *
 * Alcance exclusivo:
 * dashboard > tarjeta Metas.
 */

#app .finvia-v2-goals-card {
  container-type:
    inline-size;
}


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


#app .finvia-v2-goals-card
.finvia-v2-goal {
  position:
    relative !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  min-width:
    0 !important;

  min-height:
    190px !important;

  padding:
    16px !important;

  overflow:
    hidden !important;
}


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


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


#app .finvia-v2-goals-card
.nubo-goal-title {
  min-width:
    0 !important;
}


#app .finvia-v2-goals-card
.nubo-goal-title > strong {
  display:
    -webkit-box !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;
}


#app .finvia-v2-goals-card
.nubo-goal-title > small {
  display:
    block !important;

  position:
    static !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;
}


#app .finvia-v2-goals-card
.nubo-goal-percent {
  position:
    static !important;

  inset:
    auto !important;

  align-self:
    start !important;

  min-width:
    max-content !important;

  margin:
    0 !important;

  white-space:
    nowrap !important;
}


#app .finvia-v2-goals-card
.finvia-v2-progress {
  position:
    static !important;

  inset:
    auto !important;

  width:
    100% !important;

  margin:
    14px 0 12px !important;
}


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

  inset:
    auto !important;

  display:
    grid !important;

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

  gap:
    5px !important;

  width:
    100% !important;

  margin:
    auto 0 0 !important;

  padding:
    0 !important;
}


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

  display:
    flex !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 {
  position:
    static !important;

  display:
    block !important;

  margin:
    0 !important;

  white-space:
    nowrap !important;
}


#app .finvia-v2-goals-card
.nubo-goal-foot > small {
  position:
    static !important;

  inset:
    auto !important;

  margin:
    0 !important;

  text-align:
    left !important;

  white-space:
    normal !important;

  overflow-wrap:
    anywhere !important;

  line-height:
    1.25 !important;
}


/* Cuando la sección es estrecha,
   conserva las dos metas pero una debajo de otra. */
@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;
  }
}