/*
 * NUBO_GOALS_COMPACT_NEXT_STEP_V2
 * Alcance exclusivo: página Metas.
 */


/* ==========================================================
   TARJETA PRINCIPAL CON ALTURA NATURAL
   ========================================================== */

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

  align-content:
    start !important;

  gap:
    14px !important;

  width:
    100% !important;

  min-width:
    0 !important;

  height:
    auto !important;

  min-height:
    0 !important;

  padding:
    20px !important;

  overflow:
    visible !important;

  box-sizing:
    border-box !important;
}


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

#app
.nubo-goals-page
.nubo-goal-card-wrap {
  height:
    auto !important;

  min-height:
    0 !important;

  align-self:
    start !important;
}


/* ==========================================================
   SIGUIENTE PASO
   ========================================================== */

#app
.nubo-goals-page
.nubo-goal-next-step {
  display:
    grid !important;

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

  align-items:
    center !important;

  gap:
    13px !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    14px 15px !important;

  border:
    1px solid
    rgba(181, 211, 196, 0.78) !important;

  border-radius:
    16px !important;

  background:
    linear-gradient(
      135deg,
      #f5fcf8,
      #edf8f2
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.9) !important;

  box-sizing:
    border-box !important;
}


#app
.nubo-goals-page
.nubo-goal-next-step__icon {
  display:
    grid !important;

  place-items:
    center !important;

  width:
    46px !important;

  min-width:
    46px !important;

  height:
    46px !important;

  border-radius:
    14px !important;

  color:
    #168f64 !important;

  background:
    #def5e9 !important;
}


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

  height:
    25px !important;
}


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


#app
.nubo-goals-page
.nubo-goal-next-step__copy
> span {
  display:
    block !important;

  color:
    #74847b !important;

  font-size:
    9.5px !important;

  font-weight:
    650 !important;

  line-height:
    1.3 !important;
}


#app
.nubo-goals-page
.nubo-goal-next-step__copy
> strong {
  display:
    block !important;

  margin-top:
    3px !important;

  color:
    #173b2c !important;

  font-size:
    12.5px !important;

  font-weight:
    790 !important;

  line-height:
    1.3 !important;
}


#app
.nubo-goals-page
.nubo-goal-next-step__copy
> p {
  margin:
    4px 0 0 !important;

  color:
    #63776c !important;

  font-size:
    10px !important;

  line-height:
    1.45 !important;

  overflow-wrap:
    anywhere !important;
}


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

  justify-items:
    end !important;

  min-width:
    max-content !important;

  padding-left:
    14px !important;

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

  text-align:
    right !important;
}


#app
.nubo-goals-page
.nubo-goal-next-step__metric
> span {
  color:
    #7a8b81 !important;

  font-size:
    8.5px !important;

  font-weight:
    620 !important;
}


#app
.nubo-goals-page
.nubo-goal-next-step__metric
> strong {
  margin-top:
    4px !important;

  color:
    #167b58 !important;

  font-size:
    12px !important;

  font-weight:
    810 !important;

  white-space:
    nowrap !important;
}


/* ==========================================================
   ACCIONES
   ========================================================== */

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

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

  align-items:
    center !important;

  flex-wrap:
    wrap !important;

  gap:
    8px !important;

  height:
    auto !important;

  min-height:
    0 !important;

  margin-top:
    0 !important;

  padding-top:
    13px !important;
}


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


/* ==========================================================
   TABLET Y MÓVIL
   ========================================================== */

@media (max-width: 1040px) {
  #app
  .nubo-goals-page {
    padding-bottom:
      calc(
        132px +
        env(safe-area-inset-bottom)
      ) !important;
  }
}


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

    padding:
      15px !important;

    border-radius:
      18px !important;
  }


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

    gap:
      10px !important;

    padding:
      12px !important;

    border-radius:
      14px !important;
  }


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

    min-width:
      42px !important;

    height:
      42px !important;

    border-radius:
      13px !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;

    width:
      100% !important;

    min-width:
      0 !important;

    margin-top:
      3px !important;

    padding:
      9px 0 0 !important;

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

    border-left:
      0 !important;

    text-align:
      left !important;
  }


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

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


@media (max-width: 390px) {
  #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] {
    width:
      100% !important;

    min-width:
      0 !important;
  }
}


/* ==========================================================
   MODO OSCURO
   ========================================================== */

html[data-theme="dark"]
#app
.nubo-goals-page
.nubo-goal-next-step {
  border-color:
    rgba(82, 119, 99, 0.62) !important;

  background:
    linear-gradient(
      135deg,
      rgba(31, 47, 39, 0.96),
      rgba(27, 42, 34, 0.96)
    ) !important;
}


html[data-theme="dark"]
#app
.nubo-goals-page
.nubo-goal-next-step__copy
> strong {
  color:
    #e5f3eb !important;
}


html[data-theme="dark"]
#app
.nubo-goals-page
.nubo-goal-next-step__copy
> p {
  color:
    #adc0b5 !important;
}