/*
 * NUBO_GOAL_PROGRESS_RING_MOBILE_FIX_V1
 *
 * Estabiliza el círculo de avance en navegadores
 * móviles y distintas escalas de pantalla.
 */


/* ==========================================================
   CONTENEDOR DEL CÍRCULO
   ========================================================== */

#app
.nubo-goals-page
.nubo-goal-progress-ring {
  position:
    relative !important;

  isolation:
    isolate !important;

  box-sizing:
    border-box !important;

  display:
    grid !important;

  place-items:
    center !important;

  width:
    72px !important;

  min-width:
    72px !important;

  max-width:
    72px !important;

  height:
    72px !important;

  min-height:
    72px !important;

  max-height:
    72px !important;

  flex:
    0 0 72px !important;

  aspect-ratio:
    1 / 1 !important;

  align-self:
    flex-start !important;

  justify-self:
    end !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  border-radius:
    50% !important;

  transform:
    none !important;

  vertical-align:
    top !important;
}


/* ==========================================================
   DISCO INTERIOR
   ========================================================== */

#app
.nubo-goals-page
.nubo-goal-progress-ring::before {
  content:
    "" !important;

  position:
    absolute !important;

  inset:
    8px !important;

  z-index:
    0 !important;

  display:
    block !important;

  width:
    auto !important;

  min-width:
    0 !important;

  max-width:
    none !important;

  height:
    auto !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  margin:
    0 !important;

  border-radius:
    50% !important;

  background:
    #ffffff !important;

  pointer-events:
    none !important;
}


/* ==========================================================
   PORCENTAJE Y ETIQUETA
   ========================================================== */

#app
.nubo-goals-page
.nubo-goal-progress-ring
> div {
  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    1 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    100% !important;

  min-width:
    0 !important;

  height:
    100% !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  text-align:
    center !important;

  transform:
    none !important;

  line-height:
    1 !important;

  pointer-events:
    none !important;
}


#app
.nubo-goals-page
.nubo-goal-progress-ring
strong {
  display:
    block !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  font-size:
    16px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  text-align:
    center !important;

  white-space:
    nowrap !important;

  font-variant-numeric:
    tabular-nums !important;

  transform:
    none !important;
}


#app
.nubo-goals-page
.nubo-goal-progress-ring
small {
  display:
    block !important;

  width:
    100% !important;

  margin:
    4px 0 0 !important;

  padding:
    0 !important;

  font-size:
    9px !important;

  font-weight:
    500 !important;

  line-height:
    1 !important;

  text-align:
    center !important;

  white-space:
    nowrap !important;

  transform:
    none !important;
}


/* ==========================================================
   ENCABEZADO
   ========================================================== */

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


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


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


/* ==========================================================
   MÓVILES Y CARDS ESTRECHAS
   ========================================================== */

@media (max-width: 560px) {
  #app
  .nubo-goals-page
  .nubo-goal-detail-head {
    display:
      grid !important;

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

    align-items:
      start !important;

    column-gap:
      10px !important;

    row-gap:
      8px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-progress-ring {
    width:
      62px !important;

    min-width:
      62px !important;

    max-width:
      62px !important;

    height:
      62px !important;

    min-height:
      62px !important;

    max-height:
      62px !important;

    flex:
      0 0 62px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-progress-ring::before {
    inset:
      7px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-progress-ring
  strong {
    font-size:
      14px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-progress-ring
  small {
    margin-top:
      3px !important;

    font-size:
      8px !important;
  }
}


/*
 * La card usa container queries en la cuadrícula.
 * Esta regla mantiene el mismo resultado aunque el
 * viewport sea grande pero la tarjeta sea estrecha.
 */

@container (max-width: 430px) {
  #app
  .nubo-goals-page
  .nubo-goal-detail-head {
    grid-template-columns:
      minmax(0, 1fr) 62px !important;

    align-items:
      start !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-progress-ring {
    width:
      62px !important;

    min-width:
      62px !important;

    max-width:
      62px !important;

    height:
      62px !important;

    min-height:
      62px !important;

    max-height:
      62px !important;

    flex:
      0 0 62px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-progress-ring::before {
    inset:
      7px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-progress-ring
  strong {
    font-size:
      14px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-progress-ring
  small {
    margin-top:
      3px !important;

    font-size:
      8px !important;
  }
}


/* Pantallas especialmente estrechas. */

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


  #app
  .nubo-goals-page
  .nubo-goal-progress-ring {
    width:
      58px !important;

    min-width:
      58px !important;

    max-width:
      58px !important;

    height:
      58px !important;

    min-height:
      58px !important;

    max-height:
      58px !important;

    flex:
      0 0 58px !important;
  }


  #app
  .nubo-goals-page
  .nubo-goal-progress-ring::before {
    inset:
      7px !important;
  }
}