/* NUBO_BOTTOM_CARDS_BALANCE_V1_START */

/* ----------------------------------
   CONTENEDOR GENERAL
---------------------------------- */

.finvia-v2-bottom {
  align-items: stretch !important;
}

.finvia-v2-category-card,
.finvia-v2-recent-card,
.finvia-v2-insights-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: 22px 20px 18px;
}

/* ----------------------------------
   HEADER CONSISTENTE
---------------------------------- */

.finvia-v2-category-card .finvia-v2-card-head,
.finvia-v2-recent-card .finvia-v2-card-head,
.finvia-v2-insights-card .finvia-v2-card-head {
  margin-bottom: 14px;
  flex: 0 0 auto;
}

.finvia-v2-category-card .finvia-v2-card-head h3,
.finvia-v2-recent-card .finvia-v2-card-head h3,
.finvia-v2-insights-card .finvia-v2-card-head h3 {
  font-size: 1.18rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.finvia-v2-category-card .finvia-v2-link,
.finvia-v2-recent-card .finvia-v2-link,
.finvia-v2-insights-card .finvia-v2-link {
  font-size: 0.92rem;
  font-weight: 700;
}

/* ----------------------------------
   CARD 1: GASTOS POR CATEGORÍA
---------------------------------- */

.finvia-v2-category-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 0;
}

.finvia-v2-category-content > * {
  width: 100%;
}

.finvia-v2-category-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.finvia-v2-category-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}

.finvia-v2-category-row span {
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 700;
}

.finvia-v2-category-row strong {
  font-size: 0.98rem;
  line-height: 1.25;
  font-weight: 800;
  white-space: nowrap;
}

.finvia-v2-category-row small {
  font-size: 0.86rem;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  color: #70819d;
}

/* ----------------------------------
   CARD 2: ACTIVIDAD RECIENTE
---------------------------------- */

.finvia-v2-recent {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
  min-height: 0;
}

.finvia-v2-recent-row {
  min-height: 76px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.finvia-v2-recent-row strong {
  font-size: 1rem !important;
}

.finvia-v2-recent-row small {
  font-size: 0.9rem !important;
}

.finvia-v2-recent-row > b,
.finvia-v2-recent-row > span:last-child {
  font-size: 0.98rem !important;
}

/* ----------------------------------
   CARD 3: INSIGHTS
---------------------------------- */

.finvia-v2-insights {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
}

.finvia-v2-insight {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
}

.finvia-v2-insight > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.finvia-v2-insight .icon,
.finvia-v2-insight svg {
  width: 18px !important;
  height: 18px !important;
}

.finvia-v2-insight strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.98rem;
  line-height: 1.2;
  font-weight: 800;
}

.finvia-v2-insight p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ----------------------------------
   ALTURAS MÁS NATURALES
---------------------------------- */

.finvia-v2-category-card,
.finvia-v2-recent-card,
.finvia-v2-insights-card {
  border-radius: 24px;
}

@media (min-width: 1100px) {
  .finvia-v2-category-card,
.finvia-v2-recent-card,
.finvia-v2-insights-card {
    min-height: 360px;
  }
}

@media (max-width: 980px) {
  .finvia-v2-category-card,
.finvia-v2-recent-card,
.finvia-v2-insights-card {
    min-height: auto;
  }

  .finvia-v2-category-content,
.finvia-v2-recent,
.finvia-v2-insights {
    gap: 14px;
  }

  .finvia-v2-insight {
    flex: 0 0 auto;
  }
}

/* NUBO_BOTTOM_CARDS_BALANCE_V1_END */


/* NUBO_RECENT_RICH_LIST_V3_START */

/*
 * La actividad reciente mantiene una lista natural.
 * Nunca distribuye las filas con space-between.
 */

.finvia-v2-bottom
.finvia-v2-recent-card
.finvia-v2-recent {
  flex: 0 0 auto !important;

  justify-content: flex-start !important;
  align-content: start !important;

  gap: 0 !important;
}

.finvia-v2-bottom
.finvia-v2-recent-card
.finvia-v2-recent-row {
  flex: 0 0 auto !important;

  min-height: 63px !important;
}

/* NUBO_RECENT_RICH_LIST_V3_END */


/* NUBO_BOTTOM_RICH_HEADERS_V4C_START */

.finvia-v9-category-card,
.finvia-v2-insights-card {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nubo-rich-card-head {
  flex: 0 0 auto;
  min-height: 82px;
  padding: 20px 24px 15px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
}

.nubo-rich-card-head__copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.nubo-rich-card-head h3 {
  margin: 0;
  color: #142c50;
  font-size: 16px;
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.nubo-rich-card-head p {
  max-width: 270px;
  margin: 0;
  color: #7b889d;
  font-size: 11.5px;
  font-weight: 520;
  line-height: 1.35;
}

.nubo-rich-card-link {
  flex: 0 0 auto;
  padding: 3px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: #6078ed;
  font: inherit;
  font-size: 11.5px;
  font-weight: 740;
  cursor: pointer;
}

.nubo-rich-card-link .icon {
  width: 14px;
  height: 14px;
}

.nubo-rich-insights-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nubo-rich-insights-title .icon {
  width: 15px;
  height: 15px;
  color: #667cff;
}

/* Categorías */

.finvia-v9-category-card .finvia-v9-category-content {
  flex: 1 1 auto;
  padding: 14px 24px 18px !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 14px !important;
}

.finvia-v9-category-card .finvia-v9-category-summary {
  flex: 0 0 auto;
  min-height: 78px;
  margin: 0;
}

.finvia-v9-category-card .finvia-v9-category-list {
  flex: 1 1 auto;
  display: grid !important;
  grid-auto-rows: minmax(61px, 1fr);
  align-content: stretch !important;
  gap: 0 !important;
}

.finvia-v9-category-card .finvia-v9-category-item {
  min-height: 61px;
  padding: 11px 2px 12px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid rgba(148, 163, 184, .20);
}

.finvia-v9-category-card .finvia-v9-category-item:last-child {
  border-bottom-color: transparent;
}

/* Insights */

.finvia-v2-insights-card .finvia-v2-insights {
  flex: 1 1 auto;
  padding: 12px 22px 18px !important;
  display: grid !important;
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch !important;
  gap: 10px !important;
}

.finvia-v2-insights-card .finvia-v2-insight {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 13px 15px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border-radius: 15px;
}

.finvia-v2-insights-card .finvia-v2-insight strong {
  margin: 0 0 5px;
  font-size: 12.5px;
  line-height: 1.25;
}

.finvia-v2-insights-card .finvia-v2-insight p {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

@media (max-width: 640px) {
  .nubo-rich-card-head {
    min-height: 76px;
    padding: 18px 18px 13px;
  }

  .finvia-v9-category-card .finvia-v9-category-content,
.finvia-v2-insights-card .finvia-v2-insights {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .finvia-v2-insights-card .finvia-v2-insight {
    height: auto;
    min-height: 88px;
  }
}

/* NUBO_BOTTOM_RICH_HEADERS_V4C_END */


/* NUBO_NUBO_AI_INSIGHTS_NO_SCROLL_V1_START */

/*
 * Tres insights completos.
 * La card no posee scroll interno ni recorta el texto.
 */

.finvia-v2-insights-card {
  height: auto !important;

  max-height: none !important;

  overflow: hidden !important;
}

.finvia-v2-insights-card
.finvia-v2-insights {
  height: auto !important;

  max-height: none !important;

  flex: 0 0 auto !important;

  display: grid !important;

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

  grid-auto-rows:
    auto !important;

  align-content:
    start !important;

  gap: 10px !important;

  overflow: visible !important;
  overflow-y: visible !important;

  scrollbar-width: none !important;
}

.finvia-v2-insights-card
.finvia-v2-insights::-webkit-scrollbar {
  display: none !important;
}

.finvia-v2-insights-card
.finvia-v2-insight {
  width: 100% !important;
  height: auto !important;

  min-height: 88px !important;
  max-height: none !important;

  flex: 0 0 auto !important;

  align-items: start !important;

  overflow: visible !important;
}

.finvia-v2-insights-card
.finvia-v2-insight > div {
  overflow: visible !important;
}

.finvia-v2-insights-card
.finvia-v2-insight p {
  display: block !important;

  height: auto !important;
  max-height: none !important;

  overflow: visible !important;

  -webkit-box-orient:
    initial !important;

  -webkit-line-clamp:
    unset !important;

  line-clamp:
    unset !important;
}


/* Tablet: tres columnas, sin scroll interno */

@media (
  min-width: 761px
) and (
  max-width: 1120px
) {
  .finvia-v2-insights-card
  .finvia-v2-insights {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      ) !important;
  }

  .finvia-v2-insights-card
  .finvia-v2-insight {
    min-height: 122px !important;
  }
}


/* Móvil: una columna y altura natural */

@media (max-width: 760px) {
  .finvia-v2-insights-card
  .finvia-v2-insights {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .finvia-v2-insights-card
  .finvia-v2-insight {
    min-height: 0 !important;
  }
}

/* NUBO_NUBO_AI_INSIGHTS_NO_SCROLL_V1_END */


/* NUBO_NUBO_AI_INSIGHTS_FRIENDLY_V4_START */

/* ========================================================
   CONTENEDOR PRINCIPAL
   ======================================================== */

.finvia-v2-insights-card {
  border-color:
    #e1e7ef
    !important;

  background:
    linear-gradient(
      155deg,
      #ffffff 0%,
      #fcfdff 100%
    );

  box-shadow:
    0 11px 30px
    rgba(42, 58, 84, 0.055)
    !important;
}


/* ========================================================
   ENCABEZADO NUBO_AI IA
   ======================================================== */

.finvia-v2-insights-card
.nubo-ai-card-head {
  min-height: 72px;

  padding:
    15px
    18px
    14px;

  display: flex;
  align-items: center;

  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(99, 102, 241, 0.07),
      transparent 34%
    ),
    #ffffff;
}

.nubo-ai-card-title {
  display: flex;
  align-items: center;
  gap: 11px;
}

.nubo-ai-card-title__icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex:
    0
    0
    38px;

  border:
    1px solid
    #d9ddff;

  border-radius: 13px;

  color: #6674ee;

  background:
    linear-gradient(
      145deg,
      #f2f3ff,
      #e9ebff
    );

  box-shadow:
    0 6px 16px
    rgba(91, 102, 225, 0.12);
}

.nubo-ai-card-title__icon .icon,
.nubo-ai-card-title__icon svg {
  width: 18px;
  height: 18px;
}

.nubo-ai-card-title > div {
  min-width: 0;
}

.nubo-ai-card-title h3 {
  margin: 0;

  color: #17233c;

  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.nubo-ai-card-title p {
  margin:
    4px
    0
    0;

  color: #728097;

  font-size: 11.75px;
  font-weight: 520;
  line-height: 1.3;
}


/* ========================================================
   LISTA DE RECOMENDACIONES
   ======================================================== */

.finvia-v2-insights-card
.finvia-v2-insights {
  padding:
    13px
    16px
    16px
    !important;

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

  grid-auto-rows:
    auto
    !important;

  align-content:
    start
    !important;

  gap:
    10px
    !important;
}


/* ========================================================
   CARD INDIVIDUAL
   ======================================================== */

.finvia-v2-insights-card
.finvia-v2-insight {
  --nubo-ai-accent: #12a780;
  --nubo-ai-soft: #e8f8f3;
  --nubo-ai-border: #d5eee6;
  --nubo-ai-glow: rgba(18, 167, 128, 0.09);

  position: relative;

  width: 100% !important;
  height: auto !important;

  min-width: 0;
  min-height: 0 !important;
  max-height: none !important;

  padding:
    14px
    14px
    14px
    13px
    !important;

  display: grid !important;

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

  align-items:
    start
    !important;

  gap:
    11px
    !important;

  overflow: hidden !important;

  border:
    1px solid
    var(--nubo-ai-border);

  border-radius:
    17px
    !important;

  background:
    radial-gradient(
      circle at 4% 12%,
      var(--nubo-ai-glow),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      var(--nubo-ai-soft) 145%
    )
    !important;

  box-shadow:
    0 7px 20px
    rgba(40, 57, 82, 0.045);

  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    border-color 170ms ease;
}

.finvia-v2-insights-card
.finvia-v2-insight:nth-child(1) {
  --nubo-ai-accent: #0fa880;
  --nubo-ai-soft: #eaf8f4;
  --nubo-ai-border: #d3eee5;
  --nubo-ai-glow: rgba(15, 168, 128, 0.10);
}

.finvia-v2-insights-card
.finvia-v2-insight:nth-child(2) {
  --nubo-ai-accent: #df9b22;
  --nubo-ai-soft: #fff8e9;
  --nubo-ai-border: #f2e2bc;
  --nubo-ai-glow: rgba(223, 155, 34, 0.10);
}

.finvia-v2-insights-card
.finvia-v2-insight:nth-child(3) {
  --nubo-ai-accent: #6875ed;
  --nubo-ai-soft: #f0f1ff;
  --nubo-ai-border: #dadeff;
  --nubo-ai-glow: rgba(104, 117, 237, 0.10);
}

.finvia-v2-insights-card
.finvia-v2-insight::after {
  content: "";

  position: absolute;

  width: 78px;
  height: 78px;

  top: -49px;
  right: -35px;

  border-radius: 50%;

  background:
    var(--nubo-ai-glow);

  pointer-events: none;
}

.finvia-v2-insights-card
.finvia-v2-insight:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 11px 25px
    rgba(40, 57, 82, 0.075);
}


/* ========================================================
   ICONO
   ======================================================== */

.finvia-v2-insights-card
.finvia-v2-insight > span {
  position: relative;
  z-index: 1;

  width: 36px;
  height: 36px;

  margin: 0 !important;

  display: grid;
  place-items: center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--nubo-ai-accent) 18%,
      transparent
    );

  border-radius: 12px;

  color:
    var(--nubo-ai-accent)
    !important;

  background:
    color-mix(
      in srgb,
      var(--nubo-ai-soft) 82%,
      #ffffff
    );

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

.finvia-v2-insights-card
.finvia-v2-insight > span .icon,
.finvia-v2-insights-card
.finvia-v2-insight > span svg {
  width: 17px;
  height: 17px;
}


/* ========================================================
   TEXTO A TODO EL ANCHO
   ======================================================== */

.finvia-v2-insights-card
.finvia-v2-insight > div {
  position: relative;
  z-index: 1;

  min-width: 0;
  width: 100%;

  overflow: visible !important;
}

.finvia-v2-insights-card
.finvia-v2-insight strong {
  display: block;

  margin:
    0
    0
    5px
    !important;

  color:
    color-mix(
      in srgb,
      var(--nubo-ai-accent) 82%,
      #25334b
    )
    !important;

  font-size:
    12.75px
    !important;

  font-weight: 790;
  line-height:
    1.3
    !important;
}

.finvia-v2-insights-card
.finvia-v2-insight p {
  display:
    block
    !important;

  width:
    100%
    !important;

  max-width:
    none
    !important;

  height:
    auto
    !important;

  max-height:
    none
    !important;

  margin:
    0
    !important;

  overflow:
    visible
    !important;

  color:
    #5e6e84;

  font-size:
    11.25px
    !important;

  line-height:
    1.5
    !important;

  text-align:
    left;

  text-wrap:
    pretty;

  overflow-wrap:
    anywhere;

  -webkit-box-orient:
    initial
    !important;

  -webkit-line-clamp:
    unset
    !important;

  line-clamp:
    unset
    !important;
}


/* ========================================================
   TABLET
   ======================================================== */

@media (
  min-width: 761px
) and (
  max-width: 1120px
) {
  .finvia-v2-insights-card
  .finvia-v2-insights {
    grid-template-columns:
      minmax(0, 1fr)
      !important;
  }

  .finvia-v2-insights-card
  .finvia-v2-insight {
    min-height:
      0
      !important;
  }
}


/* ========================================================
   MÓVIL
   ======================================================== */

@media (max-width: 520px) {
  .finvia-v2-insights-card
  .nubo-ai-card-head {
    padding:
      14px
      15px
      13px;
  }

  .nubo-ai-card-title__icon {
    width: 35px;
    height: 35px;

    flex-basis: 35px;
  }

  .finvia-v2-insights-card
  .finvia-v2-insights {
    padding:
      12px
      13px
      14px
      !important;
  }

  .finvia-v2-insights-card
  .finvia-v2-insight {
    grid-template-columns:
      33px
      minmax(0, 1fr)
      !important;

    padding:
      13px
      12px
      !important;

    gap:
      10px
      !important;
  }

  .finvia-v2-insights-card
  .finvia-v2-insight > span {
    width: 33px;
    height: 33px;
  }
}

/* NUBO_NUBO_AI_INSIGHTS_FRIENDLY_V4_END */


/* NUBO_MOVEMENTS_REDESIGN_V1_START */

/* ========================================================
   PÁGINA
   ======================================================== */

.nubo-movements-page {
  display: grid;
  gap: 16px;
}


/* ========================================================
   CABECERA
   ======================================================== */

.nubo-movements-hero {
  position: relative;

  overflow: hidden;

  padding:
    21px
    22px
    19px;

  border:
    1px solid
    #dbe7ef;

  border-radius:
    22px;

  background:
    radial-gradient(
      circle at 91% 3%,
      rgba(69, 137, 207, 0.045),
      transparent 30%
    ),
    radial-gradient(
      circle at 7% 100%,
      rgba(31, 165, 151, 0.035),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fafcff 58%,
      #f8fcfb 100%
    );

  box-shadow:
    0 10px 27px
    rgba(40, 76, 105, 0.052);
}

.nubo-movements-hero::after {
  content: "";

  position: absolute;

  width: 120px;
  height: 120px;

  top: -90px;
  right: 8%;

  border-radius: 50%;

  background:
    rgba(100, 111, 230, 0.018);

  pointer-events: none;
}

.nubo-movements-hero__top {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.nubo-movements-eyebrow {
  display: inline-flex;
  align-items: center;

  min-height: 25px;

  padding:
    0
    10px;

  border:
    1px solid
    #d8e7f7;

  border-radius: 999px;

  color: #397ebd;
  background: rgba(237, 246, 255, 0.88);

  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.nubo-movements-hero h1 {
  margin:
    10px
    0
    0;

  color: #172d46;

  font-size: 29px;
  font-weight: 830;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.nubo-movements-hero__copy p {
  max-width: 620px;

  margin:
    8px
    0
    0;

  color: #63788d;

  font-size: 13px;
  line-height: 1.5;
}

.nubo-movement-new-btn {
  min-height: 44px;

  border-radius: 14px !important;

  background:
    linear-gradient(
      135deg,
      #398bdc,
      #1aa9a2
    )
    !important;

  box-shadow:
    0 10px 23px
    rgba(43, 132, 193, 0.20)
    !important;
}


/* ========================================================
   MÉTRICAS
   ======================================================== */

.nubo-movements-summary {
  position: relative;
  z-index: 1;

  margin-top: 18px;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;
}

.nubo-movement-stat {
  min-width: 0;

  padding:
    11px
    12px;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr);

  align-items: center;
  gap: 10px;

  border:
    1px solid
    rgba(220, 229, 237, 0.90);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.76);

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.86);
}

.nubo-movement-stat__icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;
}

.nubo-movement-stat__icon .icon,
.nubo-movement-stat__icon svg {
  width: 18px;
  height: 18px;
}

.nubo-movement-stat.is-count
.nubo-movement-stat__icon {
  color: #3d83d5;
  background: #e9f3ff;
}

.nubo-movement-stat.is-income
.nubo-movement-stat__icon {
  color: #0da678;
  background: #e2f7ef;
}

.nubo-movement-stat.is-expense
.nubo-movement-stat__icon {
  color: #e46f65;
  background: #fff0ed;
}

.nubo-movement-stat.is-balance
.nubo-movement-stat__icon {
  color: #7969d2;
  background: #f0edff;
}

.nubo-movement-stat small {
  display: block;

  color: #77889b;

  font-size: 10.5px;
  line-height: 1.25;
}

.nubo-movement-stat strong {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color: #213b56;

  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-movement-stat.is-positive strong {
  color: #0c9169;
}

.nubo-movement-stat.is-negative strong {
  color: #df665c;
}


/* ========================================================
   FILTROS
   ======================================================== */

.nubo-movement-filters {
  padding:
    14px
    15px;

  display: grid;

  grid-template-columns:
    minmax(190px, 0.36fr)
    minmax(0, 1fr);

  align-items: center;
  gap: 16px;

  border:
    1px solid
    #e0e8ef;

  border-radius: 17px;

  background:
    rgba(255, 255, 255, 0.90);

  box-shadow:
    0 8px 23px
    rgba(43, 69, 93, 0.045);
}

.nubo-movement-filters__head {
  min-width: 0;
}

.nubo-movement-filters__head span {
  display: block;

  color: #74869a;

  font-size: 10.5px;
  font-weight: 690;
}

.nubo-movement-filters__head strong {
  display: block;

  margin-top: 3px;

  color: #243d58;

  font-size: 13.5px;
  font-weight: 780;
}

.nubo-movement-filters__head small {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color: #8a98a8;

  font-size: 10.5px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-movement-filter-controls {
  display: grid;

  grid-template-columns:
    minmax(240px, 1fr)
    minmax(125px, 0.25fr)
    minmax(145px, 0.3fr);

  gap: 9px;
}

.nubo-movement-search {
  position: relative;
}

.nubo-movement-search .icon,
.nubo-movement-search > svg {
  position: absolute;

  top: 50%;
  left: 13px;

  width: 17px;
  height: 17px;

  transform: translateY(-50%);

  color: #4a8acb;
}

.nubo-movement-search input,
.nubo-movement-select select {
  width: 100%;
  height: 44px;

  border:
    1px solid
    #dce5ed;

  border-radius: 12px;

  color: #2b4057;
  background: #fbfdff;

  outline: none;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.nubo-movement-search input {
  padding:
    0
    14px
    0
    41px;
}

.nubo-movement-search input:focus,
.nubo-movement-select select:focus {
  border-color: #85b7e7;

  background: #ffffff;

  box-shadow:
    0 0 0 4px
    rgba(70, 139, 207, 0.10);
}

.nubo-movement-select {
  position: relative;
}

.nubo-movement-select > span {
  position: absolute;
  z-index: 1;

  top: -6px;
  left: 10px;

  padding:
    0
    4px;

  color: #72869b;
  background: #ffffff;

  font-size: 9px;
  font-weight: 740;
}

.nubo-movement-select select {
  padding:
    0
    34px
    0
    12px;
}


/* ========================================================
   TABLA
   ======================================================== */

.nubo-movements-table-card {
  overflow: hidden;

  border-color: #dfe7ee !important;

  border-radius: 19px !important;

  box-shadow:
    0 10px 28px
    rgba(41, 65, 89, 0.055)
    !important;
}

.nubo-movements-table-head {
  min-height: 70px;

  padding:
    15px
    18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  border-bottom:
    1px solid
    #e2e9ef;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f8fbfd
    );
}

.nubo-movements-table-head span {
  display: block;

  color: #4383bd;

  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.nubo-movements-table-head h2 {
  margin:
    4px
    0
    0;

  color: #20384f;

  font-size: 16px;
  font-weight: 790;
}

.nubo-movements-table-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nubo-movements-table-meta span,
.nubo-movements-table-meta strong {
  min-height: 27px;

  padding:
    0
    9px;

  display: inline-flex;
  align-items: center;

  border-radius: 999px;

  font-size: 10.5px;
  font-weight: 740;
  text-transform: none;
  letter-spacing: 0;
}

.nubo-movements-table-meta span {
  color: #62788e;
  background: #edf3f7;
}

.nubo-movements-table-meta strong {
  color: #367ebc;
  background: #eaf4fd;
}

.nubo-movements-table-wrap {
  overflow-x: auto;
}

.nubo-movements-table {
  width: 100%;

  min-width: 850px;

  table-layout: fixed;

  border-collapse: separate;
  border-spacing: 0;
}

.nubo-movements-table col.is-main {
  width: 35%;
}

.nubo-movements-table col.is-category {
  width: 17%;
}

.nubo-movements-table col.is-method {
  width: 13%;
}

.nubo-movements-table col.is-date {
  width: 14%;
}

.nubo-movements-table col.is-amount {
  width: 13%;
}

.nubo-movements-table col.is-actions {
  width: 8%;
}

.nubo-movements-table thead {
  background:
    #f3f8fb;
}

.nubo-movements-table th {
  height: 42px;

  padding:
    0
    15px;

  border-bottom:
    1px solid
    #dde7ed;

  color: #5d7488;

  font-size: 10px;
  font-weight: 790;
  letter-spacing: 0.035em;
  text-align: left;
  text-transform: uppercase;
}

.nubo-movements-table th:nth-child(5) {
  text-align: right;
}

.nubo-movement-row {
  background: #ffffff;

  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

.nubo-movement-row:hover {
  background:
    #f9fcfe;
}

.nubo-movement-cell {
  height: 68px;

  padding:
    10px
    15px;

  border-bottom:
    1px solid
    #e7edf1;

  color: #44596c;

  font-size: 11.75px;
  vertical-align: middle;
}

.nubo-movement-row:last-child
.nubo-movement-cell {
  border-bottom: 0;
}


/* ========================================================
   IDENTIDAD DE MOVIMIENTO
   ======================================================== */

.nubo-movement-identity {
  min-width: 0;

  display: grid;

  grid-template-columns:
    40px
    minmax(0, 1fr);

  align-items: center;
  gap: 11px;
}

.nubo-movement-icon {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 13px;
}

.nubo-movement-icon.is-income {
  color: #0b9f73;
  background: #e3f7ef;
}

.nubo-movement-icon.is-expense {
  color: #e16c62;
  background: #fff0ed;
}

.nubo-movement-icon .icon,
.nubo-movement-icon svg {
  width: 18px;
  height: 18px;
}

.nubo-movement-identity > div {
  min-width: 0;
}

.nubo-movement-identity strong {
  display: block;

  overflow: hidden;

  color: #243b50;

  font-size: 12.5px;
  font-weight: 780;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-movement-identity small {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color: #7a8b9b;

  font-size: 10.5px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ========================================================
   CHIPS
   ======================================================== */

.nubo-category-chip,
.nubo-method-chip {
  max-width: 100%;

  min-height: 27px;

  padding:
    0
    9px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  overflow: hidden;

  border:
    1px solid
    #e0e6eb;

  border-radius: 999px;

  color: #617284;
  background: #f3f6f8;

  font-size: 10.5px;
  font-weight: 710;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-category-chip i,
.nubo-method-chip i {
  width: 6px;
  height: 6px;

  flex:
    0
    0
    6px;

  border-radius: 50%;

  background: currentColor;

  opacity: 0.72;
}

.nubo-category-chip.is-food {
  border-color: #f5d8dc;
  color: #db6372;
  background: #fff0f2;
}

.nubo-category-chip.is-transport {
  border-color: #d6e5fa;
  color: #4384d5;
  background: #edf5ff;
}

.nubo-category-chip.is-home {
  border-color: #e1daf7;
  color: #7868d1;
  background: #f2efff;
}

.nubo-category-chip.is-income {
  border-color: #cee9de;
  color: #12946c;
  background: #eaf7f2;
}

.nubo-category-chip.is-health {
  border-color: #d3ece9;
  color: #159a94;
  background: #eaf8f7;
}

.nubo-method-chip {
  color: #5c7185;
  background: #f7f9fb;
}

.nubo-method-chip i {
  color: #8d6fd2;
}


/* NUBO_MOVEMENTS_METHODS_POLISH_V2_START */

/* Yape: morado */
.nubo-method-chip.is-yape {
  border-color: #e2d6fa;

  color: #7454bd;

  background:
    linear-gradient(
      145deg,
      #f7f2ff,
      #efe7ff
    );
}

.nubo-method-chip.is-yape i {
  color: #7d55ca;
}


/* Plin: azul y verde */
.nubo-method-chip.is-plin {
  border-color: #cfe8ea;

  color: #2579a8;

  background:
    linear-gradient(
      105deg,
      #eaf5ff 0%,
      #eaf5ff 52%,
      #e6f8ef 52%,
      #e6f8ef 100%
    );
}

.nubo-method-chip.is-plin i {
  background:
    linear-gradient(
      135deg,
      #3189dc 0%,
      #3189dc 48%,
      #19aa78 52%,
      #19aa78 100%
    );

  opacity: 1;
}


/* Tarjeta: amarillo */
.nubo-method-chip.is-card {
  border-color: #f0dda0;

  color: #a37116;

  background:
    linear-gradient(
      145deg,
      #fffaf0,
      #fff3c9
    );
}

.nubo-method-chip.is-card i {
  color: #d49b25;
}


/* Transferencia: violeta */
.nubo-method-chip.is-transfer {
  border-color: #ddd7f6;

  color: #6f61be;

  background:
    linear-gradient(
      145deg,
      #f6f3ff,
      #eeebff
    );
}

.nubo-method-chip.is-transfer i {
  color: #7764d0;
}


/* Efectivo: rosado */
.nubo-method-chip.is-cash {
  border-color: #f1d4e1;

  color: #c15f88;

  background:
    linear-gradient(
      145deg,
      #fff6fa,
      #ffeaf3
    );
}

.nubo-method-chip.is-cash i {
  color: #d36c98;
}


/* Método antiguo o personalizado */
.nubo-method-chip.is-other {
  border-color: #dfe5ea;

  color: #687b8d;

  background: #f5f7f9;
}


/* NUBO_MOVEMENTS_METHODS_POLISH_V2_END */


/* ========================================================
   FECHA, MONTO Y ACCIONES
   ======================================================== */

.nubo-movement-date {
  color: #607386;

  font-size: 11px;
  white-space: nowrap;
}

.nubo-movement-amount {
  font-size: 12.75px;
  font-weight: 830;
  text-align: right;
  white-space: nowrap;
}

.nubo-movement-amount.is-income {
  color: #0a9c70;
}

.nubo-movement-amount.is-expense {
  color: #e1655b;
}

.nubo-movement-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;

  opacity: 0.42;

  transition: opacity 160ms ease;
}

.nubo-movement-row:hover
.nubo-movement-actions,
.nubo-movement-actions:focus-within {
  opacity: 1;
}

.nubo-movement-action {
  width: 32px !important;
  height: 32px !important;

  border:
    1px solid
    transparent
    !important;

  border-radius:
    10px
    !important;

  box-shadow:
    none
    !important;
}

.nubo-movement-action.is-edit {
  color: #4c82b5;
  background: #edf5fc;
}

.nubo-movement-action.is-delete {
  color: #d76b65;
  background: #fff0ee;
}

.nubo-movement-action:hover {
  transform: translateY(-1px);

  border-color:
    currentColor
    !important;
}


/* ========================================================
   TABLET
   ======================================================== */

@media (max-width: 980px) {
  .nubo-movements-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .nubo-movement-filters {
    grid-template-columns:
      1fr;
  }
}


/* ========================================================
   MÓVIL
   ======================================================== */

@media (max-width: 760px) {
  .nubo-movements-page {
    gap: 13px;
  }

  .nubo-movements-hero {
    padding:
      18px
      16px
      16px;

    border-radius: 18px;
  }

  .nubo-movements-hero__top {
    align-items: stretch;
    flex-direction: column;
    gap: 15px;
  }

  .nubo-movements-hero h1 {
    font-size: 25px;
  }

  .nubo-movement-new-btn {
    width: 100%;
  }

  .nubo-movements-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    margin-top: 15px;
  }

  .nubo-movement-filter-controls {
    grid-template-columns:
      1fr;
  }

  .nubo-movement-filters {
    padding:
      13px;

    gap: 13px;
  }

  .nubo-movement-filters__head small {
    white-space: normal;
  }

  .nubo-movements-table-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .nubo-movements-table-wrap {
    overflow: visible;
  }

  .nubo-movements-table {
    min-width: 0 !important;

    display: block;

    border-collapse: separate;
  }

  .nubo-movements-table colgroup,
.nubo-movements-table thead {
    display: none;
  }

  .nubo-movements-table tbody {
    padding:
      12px;

    display: grid;
    gap: 10px;
  }

  .nubo-movement-row {
    padding:
      13px;

    display: grid;

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

    gap:
      10px
      14px;

    border:
      1px solid
      #e0e8ee;

    border-radius:
      15px;

    box-shadow:
      0 6px 17px
      rgba(42, 67, 89, 0.045);
  }

  .nubo-movement-cell {
    width: auto;
    height: auto;

    padding: 0;

    display: block;

    border: 0;

    font-size: 11px;
  }

  .nubo-movement-cell--main {
    grid-column:
      1;
  }

  .nubo-movement-amount {
    grid-column:
      2;

    grid-row:
      1;

    align-self: center;

    font-size: 13px;
  }

  .nubo-movement-cell[data-label="Categoría"],
.nubo-movement-cell[data-label="Método"],
.nubo-movement-cell[data-label="Fecha"] {
    grid-column:
      1;
  }

  .nubo-movement-cell--actions {
    grid-column:
      2;

    grid-row:
      2 / span 3;

    align-self: end;
  }

  .nubo-movement-actions {
    opacity: 1;
  }

  
}

@media (max-width: 480px) {
  .nubo-movements-summary {
    grid-template-columns: 1fr;
  }

  .nubo-movements-table-meta {
    flex-wrap: wrap;
  }
}

/* NUBO_MOVEMENTS_REDESIGN_V1_END */


/* NUBO_DEBTS_PREMIUM_V1_START */

/* ========================================================
   PÁGINA
   ======================================================== */

.nubo-debts-page {
  display: grid;
  gap: 16px;
}


/* ========================================================
   HERO
   ======================================================== */

.nubo-debts-hero {
  position: relative;

  overflow: hidden;

  padding:
    21px
    22px
    18px;

  border:
    1px solid
    #eee2df;

  border-radius:
    22px;

  background:
    radial-gradient(
      circle at 92% 3%,
      rgba(230, 111, 92, 0.055),
      transparent 30%
    ),
    radial-gradient(
      circle at 7% 100%,
      rgba(225, 166, 66, 0.04),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fffafa 58%,
      #fffcf7 100%
    );

  box-shadow:
    0 11px 30px
    rgba(84, 58, 51, 0.055);
}

.nubo-debts-hero__top {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.nubo-debts-eyebrow {
  min-height: 25px;

  padding:
    0
    10px;

  display: inline-flex;
  align-items: center;

  border:
    1px solid
    #f0dcd7;

  border-radius: 999px;

  color: #c26355;
  background: #fff4f1;

  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.nubo-debts-hero h1 {
  margin:
    10px
    0
    0;

  color: #302c3d;

  font-size: 29px;
  font-weight: 830;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.nubo-debts-hero__copy p {
  max-width: 650px;

  margin:
    8px
    0
    0;

  color: #756f7d;

  font-size: 13px;
  line-height: 1.5;
}

.nubo-new-debt-btn {
  min-height: 44px;

  border: 0 !important;

  border-radius:
    14px
    !important;

  background:
    linear-gradient(
      135deg,
      #e06e60,
      #d99c3d
    )
    !important;

  box-shadow:
    0 10px 22px
    rgba(214, 112, 83, 0.18)
    !important;
}


/* ========================================================
   INDICADORES
   ======================================================== */

.nubo-debts-summary {
  position: relative;
  z-index: 1;

  margin-top: 18px;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 10px;
}

.nubo-debt-stat {
  --stat-accent: #806bd0;
  --stat-soft: #f1effc;

  min-width: 0;

  padding:
    11px
    12px;

  display: grid;

  grid-template-columns:
    39px
    minmax(0, 1fr);

  align-items: center;
  gap: 10px;

  border:
    1px solid
    rgba(231, 226, 225, 0.92);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.78);
}

.nubo-debt-stat.is-pending {
  --stat-accent: #dc6b60;
  --stat-soft: #fff0ed;
}

.nubo-debt-stat.is-paid {
  --stat-accent: #159c72;
  --stat-soft: #e6f7f0;
}

.nubo-debt-stat.is-active {
  --stat-accent: #7869cb;
  --stat-soft: #f0edff;
}

.nubo-debt-stat.is-progress {
  --stat-accent: #c28a27;
  --stat-soft: #fff6e5;
}

.nubo-debt-stat__icon {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: var(--stat-accent);
  background: var(--stat-soft);
}

.nubo-debt-stat__icon .icon,
.nubo-debt-stat__icon svg {
  width: 18px;
  height: 18px;
}

.nubo-debt-stat small {
  display: block;

  color: #847c82;

  font-size: 10.5px;
  line-height: 1.25;
}

.nubo-debt-stat strong {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color: #302f3a;

  font-size: 14px;
  font-weight: 810;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-debts-global-progress {
  height: 4px;

  margin-top: 15px;

  overflow: hidden;

  border-radius: 999px;

  background: rgba(224, 226, 226, 0.72);
}

.nubo-debts-global-progress > span {
  display: block;

  width: var(--global-progress);
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #e27565,
      #dda442,
      #41ad83
    );

  animation:
    nubo-debt-progress-in
    560ms
    ease-out
    both;
}


/* ========================================================
   FILTRO
   ======================================================== */

.nubo-debt-toolbar {
  padding:
    13px
    15px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  border:
    1px solid
    #e6e5e8;

  border-radius: 17px;

  background:
    rgba(255, 255, 255, 0.91);

  box-shadow:
    0 7px 21px
    rgba(62, 54, 67, 0.04);
}

.nubo-debt-toolbar__copy span {
  display: block;

  color: #9a685f;

  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nubo-debt-toolbar__copy strong {
  display: block;

  margin-top: 3px;

  color: #37313e;

  font-size: 13.5px;
  font-weight: 790;
}

.nubo-debt-toolbar__copy small {
  display: block;

  margin-top: 4px;

  color: #8a838c;

  font-size: 10.5px;
}

.nubo-debt-segmented {
  padding: 4px;

  display: inline-flex;
  gap: 4px;

  border:
    1px solid
    #e4e1e2;

  border-radius: 12px;

  background: #f7f5f5;
}

.nubo-debt-segmented button {
  min-height: 35px;

  padding:
    0
    11px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  border: 0;

  border-radius: 9px;

  color: #817880;
  background: transparent;

  font-size: 11.5px;
  font-weight: 740;

  cursor: pointer;

  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.nubo-debt-segmented button span {
  min-width: 22px;
  height: 22px;

  padding:
    0
    6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: rgba(129, 120, 128, 0.10);

  font-size: 9.5px;
}

.nubo-debt-segmented button.is-active {
  color: #c05f53;

  background: #ffffff;

  box-shadow:
    0 4px 12px
    rgba(87, 65, 62, 0.08);
}

.nubo-debt-segmented
button.is-active span {
  color: #bf5d51;
  background: #fff0ed;
}


/* ========================================================
   CUADRÍCULA
   ======================================================== */

.nubo-debt-grid {
  display: grid;

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

  align-items: start;
  gap: 14px;
}


/* ========================================================
   CARD DE DEUDA
   ======================================================== */

.nubo-debt-card {
  --debt-accent: #df6f62;
  --debt-soft: #fff1ee;
  --debt-border: #efdcd8;

  min-width: 0;

  padding:
    18px;

  position: relative;

  overflow: hidden;

  border:
    1px solid
    var(--debt-border);

  border-radius: 19px;

  background:
    linear-gradient(
      150deg,
      #ffffff 0%,
      #fffefe 68%,
      var(--debt-soft) 155%
    );

  box-shadow:
    0 9px 25px
    rgba(55, 45, 52, 0.055);

  animation:
    nubo-debt-card-in
    360ms
    ease-out
    both;

  animation-delay:
    calc(
      var(--debt-index) * 55ms
    );

  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    border-color 170ms ease;
}

.nubo-debt-card.is-medium {
  --debt-accent: #d79a2e;
  --debt-soft: #fff8e7;
  --debt-border: #eedfb9;
}

.nubo-debt-card.is-high {
  --debt-accent: #259d78;
  --debt-soft: #eaf8f2;
  --debt-border: #cfe9df;
}

.nubo-debt-card.is-paid {
  --debt-accent: #128d69;
  --debt-soft: #e7f7f0;
  --debt-border: #c6e7da;
}

.nubo-debt-card:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--debt-accent);

  box-shadow:
    0 14px 32px
    rgba(55, 45, 52, 0.085);
}

.nubo-debt-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.nubo-debt-identity {
  min-width: 0;

  display: grid;

  grid-template-columns:
    43px
    minmax(0, 1fr);

  align-items: center;
  gap: 11px;
}

.nubo-debt-identity__icon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  color: var(--debt-accent);
  background: var(--debt-soft);
}

.nubo-debt-identity__icon .icon,
.nubo-debt-identity__icon svg {
  width: 19px;
  height: 19px;
}

.nubo-debt-identity > div {
  min-width: 0;
}

.nubo-debt-identity strong {
  display: block;

  overflow: hidden;

  color: #302f39;

  font-size: 15px;
  font-weight: 800;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-debt-identity small {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color: #817b84;

  font-size: 10.75px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-debt-status {
  min-height: 29px;

  padding:
    0
    10px;

  display: inline-flex;
  align-items: center;

  border:
    1px solid
    var(--debt-border);

  border-radius: 999px;

  color: var(--debt-accent);
  background: var(--debt-soft);

  font-size: 10.25px;
  font-weight: 780;
  white-space: nowrap;
}


/* ========================================================
   VENCIMIENTO
   ======================================================== */

.nubo-debt-meta {
  margin-top: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nubo-debt-meta > small {
  color: #8b848c;

  font-size: 10px;
}

.nubo-debt-meta > small strong {
  color: #524c55;
}

.nubo-debt-due {
  min-height: 26px;

  padding:
    0
    9px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  border-radius: 999px;

  color: #697982;
  background: #f1f5f6;

  font-size: 10px;
  font-weight: 690;
}

.nubo-debt-due i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: currentColor;
}

.nubo-debt-due.is-overdue {
  color: #d4544e;
  background: #fff0ee;
}

.nubo-debt-due.is-soon {
  color: #bd801c;
  background: #fff6df;
}

.nubo-debt-due.is-scheduled {
  color: #597ca4;
  background: #edf5fc;
}

.nubo-debt-due.is-completed {
  color: #138761;
  background: #e8f7f0;
}


/* ========================================================
   PROGRESO
   ======================================================== */

.nubo-debt-progress-section {
  margin-top: 14px;
}

.nubo-debt-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 10px;

  color: #837b83;

  font-size: 10.5px;
}

.nubo-debt-progress-copy strong {
  color: var(--debt-accent);
  font-weight: 800;
}

.nubo-debt-progress {
  height: 9px;

  margin-top: 7px;

  overflow: hidden;

  border-radius: 999px;

  background: #ecefee;
}

.nubo-debt-progress > span {
  display: block;

  width:
    var(--debt-progress);

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--debt-accent),
      color-mix(
        in srgb,
        var(--debt-accent) 65%,
        #ffffff
      )
    );

  animation:
    nubo-debt-progress-in
    560ms
    ease-out
    both;
}


/* ========================================================
   MONTOS
   ======================================================== */

.nubo-debt-amounts {
  margin-top: 15px;

  display: grid;

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

  gap: 8px;
}

.nubo-debt-amounts article {
  min-width: 0;

  padding:
    10px;

  border:
    1px solid
    #ece9ea;

  border-radius: 12px;

  background: #fafafa;
}

.nubo-debt-amounts
article.is-pending {
  background: #fff5f3;
}

.nubo-debt-amounts
article.is-paid {
  background: #eff9f5;
}

.nubo-debt-amounts
article.is-total {
  background: #f5f3fb;
}

.nubo-debt-amounts span {
  display: block;

  color: #8a828a;

  font-size: 9.5px;
}

.nubo-debt-amounts strong {
  display: block;

  margin-top: 5px;

  overflow: hidden;

  color: #35313a;

  font-size: 12.5px;
  font-weight: 800;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-debt-amounts
.is-pending strong {
  color: #c95f55;
}

.nubo-debt-amounts
.is-paid strong {
  color: #138863;
}


/* ========================================================
   DETALLE Y PIE
   ======================================================== */

.nubo-debt-detail {
  margin-top: 12px;

  padding:
    9px
    10px;

  border-radius: 11px;

  background: rgba(247, 247, 247, 0.82);
}

.nubo-debt-detail span {
  display: block;

  color: #978e96;

  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.nubo-debt-detail p {
  margin:
    4px
    0
    0;

  overflow: hidden;

  color: #6e6871;

  font-size: 10.5px;
  line-height: 1.4;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-debt-card__foot {
  margin-top: 14px;

  padding-top: 13px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  border-top:
    1px solid
    #ece8e9;
}

.nubo-debt-installment span {
  display: block;

  color: #918991;

  font-size: 9.5px;
}

.nubo-debt-installment strong {
  display: block;

  margin-top: 4px;

  color: #443e47;

  font-size: 12px;
  font-weight: 800;
}

.nubo-debt-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.nubo-debt-actions__primary,
.nubo-debt-actions__tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nubo-debt-pay,
.nubo-debt-finish {
  min-height: 34px;

  border-radius:
    10px
    !important;
}

.nubo-debt-pay {
  background:
    linear-gradient(
      135deg,
      #19a978,
      #108f68
    )
    !important;
}

.nubo-debt-finish {
  color:
    var(--debt-accent)
    !important;

  border-color:
    var(--debt-border)
    !important;

  background:
    var(--debt-soft)
    !important;
}

.nubo-debt-tool {
  width: 33px !important;
  height: 33px !important;

  border:
    1px solid
    transparent
    !important;

  border-radius:
    10px
    !important;
}

.nubo-debt-tool.is-edit {
  color: #5a79a0;
  background: #edf4fa;
}

.nubo-debt-tool.is-delete {
  color: #d1635c;
  background: #fff0ee;
}

.nubo-debt-completed {
  min-height: 30px;

  padding:
    0
    9px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  border-radius: 9px;

  color: #138761;
  background: #e8f7f0;

  font-size: 10.5px;
  font-weight: 750;
}


/* ========================================================
   ANIMACIONES
   ======================================================== */

@keyframes nubo-debt-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nubo-debt-progress-in {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }

  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}


/* ========================================================
   RESPONSIVE
   ======================================================== */

@media (max-width: 980px) {
  .nubo-debts-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .nubo-debt-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .nubo-debts-page {
    gap: 13px;
  }

  .nubo-debts-hero {
    padding:
      18px
      16px
      16px;

    border-radius: 18px;
  }

  .nubo-debts-hero__top {
    align-items: stretch;
    flex-direction: column;
    gap: 15px;
  }

  .nubo-debts-hero h1 {
    font-size: 25px;
  }

  .nubo-new-debt-btn {
    width: 100%;
  }

  .nubo-debt-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 13px;
  }

  .nubo-debt-segmented {
    width: 100%;
  }

  .nubo-debt-segmented button {
    flex: 1;
    justify-content: center;
  }

  .nubo-debt-card {
    padding: 16px;
  }

  .nubo-debt-card__foot {
    align-items: stretch;
    flex-direction: column;
  }

  .nubo-debt-actions {
    justify-content: space-between;
  }
}

@media (max-width: 520px) {
  .nubo-debts-summary {
    grid-template-columns: 1fr;
  }

  .nubo-debt-card__head {
    align-items: stretch;
    flex-direction: column;
  }

  .nubo-debt-status {
    align-self: flex-start;
  }

  .nubo-debt-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .nubo-debt-amounts {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .nubo-debt-amounts
  article.is-total {
    grid-column: 1 / -1;
  }

  .nubo-debt-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .nubo-debt-actions__primary {
    display: grid;

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

  .nubo-debt-actions__primary .btn {
    justify-content: center;
  }

  .nubo-debt-actions__tools {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nubo-debt-card,
.nubo-debt-progress > span,
.nubo-debts-global-progress > span {
    animation: none !important;
    transition: none !important;
  }
}

/* NUBO_DEBTS_PREMIUM_V1_END */


/* NUBO_ANALYSIS_PREMIUM_V1_START */

.nubo-analysis-page {
  --analysis-accent: #7868d8;
  --analysis-second: #4387dd;
  --analysis-soft: #f1efff;
  --analysis-border: #dfdcf4;

  display: grid;
  gap: 16px;
}

.nubo-analysis-page.is-income {
  --analysis-accent: #159f78;
  --analysis-second: #2c91c7;
  --analysis-soft: #eaf8f2;
  --analysis-border: #d0eae0;
}


/* ========================================================
   HERO
   ======================================================== */

.nubo-analysis-hero {
  padding: 21px 22px 18px;

  overflow: hidden;
  position: relative;

  border: 1px solid #e2e1ef;
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 91% 4%,
      rgba(116, 104, 216, 0.055),
      transparent 30%
    ),
    radial-gradient(
      circle at 7% 100%,
      rgba(67, 135, 221, 0.035),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfaff 58%,
      #f8fbff 100%
    );

  box-shadow:
    0 11px 30px
    rgba(57, 54, 84, 0.055);
}

.nubo-analysis-page.is-income
.nubo-analysis-hero {
  border-color: #dbe9e4;

  background:
    radial-gradient(
      circle at 91% 4%,
      rgba(21, 159, 120, 0.05),
      transparent 30%
    ),
    radial-gradient(
      circle at 7% 100%,
      rgba(44, 145, 199, 0.035),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f9fdfb 58%,
      #f8fbff 100%
    );
}

.nubo-analysis-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.nubo-analysis-eyebrow {
  min-height: 25px;

  padding: 0 10px;

  display: inline-flex;
  align-items: center;

  border: 1px solid var(--analysis-border);
  border-radius: 999px;

  color: var(--analysis-accent);
  background: var(--analysis-soft);

  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.nubo-analysis-hero h1 {
  margin: 10px 0 0;

  color: #252c43;

  font-size: 29px;
  font-weight: 830;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.nubo-analysis-hero__copy p {
  max-width: 650px;

  margin: 8px 0 0;

  color: #70788d;

  font-size: 13px;
  line-height: 1.5;
}

.nubo-analysis-context {
  min-width: 118px;

  padding: 11px 13px;

  border: 1px solid var(--analysis-border);
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.72);
}

.nubo-analysis-context span,
.nubo-analysis-context strong {
  display: block;
}

.nubo-analysis-context span {
  color: #858aa0;
  font-size: 10px;
}

.nubo-analysis-context strong {
  margin-top: 4px;

  color: var(--analysis-accent);

  font-size: 13px;
  font-weight: 800;
}


/* ========================================================
   MÉTRICAS
   ======================================================== */

.nubo-analysis-summary {
  margin-top: 18px;

  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.nubo-analysis-stat {
  --stat-color: var(--analysis-accent);
  --stat-soft: var(--analysis-soft);

  min-width: 0;

  padding: 11px 12px;

  display: grid;
  grid-template-columns:
    39px minmax(0, 1fr);
  align-items: center;
  gap: 10px;

  border: 1px solid rgba(224, 225, 235, 0.92);
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.78);
}

.nubo-analysis-stat.is-category {
  --stat-color: #4387dd;
  --stat-soft: #eaf3ff;
}

.nubo-analysis-stat.is-top {
  --stat-color: #dc8462;
  --stat-soft: #fff1eb;
}

.nubo-analysis-stat.is-average {
  --stat-color: #c18a2e;
  --stat-soft: #fff7e6;
}

.nubo-analysis-stat__icon {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: var(--stat-color);
  background: var(--stat-soft);
}

.nubo-analysis-stat__icon svg {
  width: 18px;
  height: 18px;
}

.nubo-analysis-stat small {
  display: block;

  color: #83899a;

  font-size: 10.5px;
  line-height: 1.25;
}

.nubo-analysis-stat strong {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color: #2a3147;

  font-size: 14px;
  font-weight: 810;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ========================================================
   FILTROS
   ======================================================== */

.nubo-analysis-toolbar {
  padding: 13px 15px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  border: 1px solid #e2e5ec;
  border-radius: 17px;

  background: rgba(255, 255, 255, 0.91);

  box-shadow:
    0 7px 21px
    rgba(47, 55, 79, 0.04);
}

.nubo-analysis-toolbar__copy span,
.nubo-analysis-toolbar__copy strong,
.nubo-analysis-toolbar__copy small {
  display: block;
}

.nubo-analysis-toolbar__copy span {
  color: var(--analysis-accent);

  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nubo-analysis-toolbar__copy strong {
  margin-top: 3px;

  color: #31384d;

  font-size: 13.5px;
  font-weight: 790;
}

.nubo-analysis-toolbar__copy small {
  margin-top: 4px;

  color: #898e9d;

  font-size: 10.5px;
}

.nubo-analysis-filters {
  display: flex;
  align-items: flex-end;
  gap: 11px;
}

.nubo-analysis-filter-group > span {
  display: block;

  margin: 0 0 5px 5px;

  color: #868b9b;

  font-size: 9.5px;
  font-weight: 700;
}

.nubo-analysis-segmented {
  padding: 4px;

  display: inline-flex;
  gap: 4px;

  border: 1px solid #e1e3e9;
  border-radius: 12px;

  background: #f6f7f9;
}

.nubo-analysis-segmented button {
  min-height: 35px;

  padding: 0 11px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  border: 0;
  border-radius: 9px;

  color: #7b8190;
  background: transparent;

  font-size: 11.5px;
  font-weight: 740;

  cursor: pointer;

  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.nubo-analysis-segmented button:hover {
  color: var(--analysis-accent);
}

.nubo-analysis-segmented button.is-active {
  color: var(--analysis-accent);
  background: #ffffff;

  box-shadow:
    0 4px 12px
    rgba(62, 65, 91, 0.08);
}

.nubo-analysis-segmented button svg {
  width: 14px;
  height: 14px;
}


/* ========================================================
   CONTENIDO PRINCIPAL
   ======================================================== */

.nubo-analysis-main-grid {
  display: grid;
  grid-template-columns:
    minmax(310px, 0.82fr)
    minmax(0, 1.55fr);
  align-items: stretch;
  gap: 14px;
}

.nubo-analysis-donut-card,
.nubo-analysis-ranking-card {
  min-width: 0;

  overflow: hidden;

  border: 1px solid #e1e4ec;
  border-radius: 19px;

  background: #ffffff;

  box-shadow:
    0 9px 26px
    rgba(45, 51, 73, 0.05);
}

.nubo-analysis-card-head {
  min-height: 69px;

  padding: 14px 17px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  border-bottom: 1px solid #e8e9ef;
}

.nubo-analysis-card-head span,
.nubo-analysis-card-head h2 {
  display: block;
}

.nubo-analysis-card-head span {
  color: var(--analysis-accent);

  font-size: 9.5px;
  font-weight: 780;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nubo-analysis-card-head h2 {
  margin: 4px 0 0;

  color: #2d3449;

  font-size: 15.5px;
  font-weight: 790;
}

.nubo-analysis-card-head small {
  color: #8b90a0;

  font-size: 10px;
}


/* ========================================================
   DONUT
   ======================================================== */

.nubo-analysis-donut-body {
  padding: 20px 18px;

  display: grid;
  grid-template-columns:
    minmax(190px, 1fr)
    minmax(130px, 0.72fr);
  align-items: center;
  gap: 16px;
}

.nubo-analysis-donut {
  width: min(225px, 100%);
  aspect-ratio: 1;

  margin: auto;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(var(--segments));

  box-shadow:
    0 13px 28px
    rgba(58, 62, 91, 0.10);

  animation:
    nubo-analysis-donut-in
    520ms
    ease-out
    both;
}

.nubo-analysis-donut::before {
  content: "";

  width: 62%;
  height: 62%;

  border: 6px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 5px 18px
    rgba(58, 62, 91, 0.08);
}

.nubo-analysis-donut__center {
  position: absolute;

  width: 120px;

  text-align: center;
}

.nubo-analysis-donut__center span,
.nubo-analysis-donut__center strong,
.nubo-analysis-donut__center small {
  display: block;
}

.nubo-analysis-donut__center span {
  color: #8a8e9e;
  font-size: 9.5px;
}

.nubo-analysis-donut__center strong {
  margin-top: 4px;

  color: #273047;

  font-size: 20px;
  font-weight: 830;
}

.nubo-analysis-donut__center small {
  margin-top: 4px;

  color: var(--analysis-accent);

  font-size: 9.5px;
  font-weight: 720;
}

.nubo-analysis-legend {
  display: grid;
  gap: 9px;
}

.nubo-analysis-legend__item {
  min-width: 0;

  display: grid;
  grid-template-columns:
    8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.nubo-analysis-legend__item i {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--legend-color);
}

.nubo-analysis-legend__item span {
  overflow: hidden;

  color: #6f7587;

  font-size: 10.5px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-analysis-legend__item strong {
  color: #3b4358;

  font-size: 10.5px;
  font-weight: 780;
}

.nubo-analysis-donut-foot {
  padding: 11px 16px;

  display: flex;
  justify-content: space-between;
  gap: 10px;

  border-top: 1px solid #e8e9ef;

  background: #fafafd;
}

.nubo-analysis-donut-foot span {
  color: #8b8f9f;
  font-size: 10px;
}

.nubo-analysis-donut-foot strong {
  color: var(--analysis-accent);

  font-size: 10.5px;
  font-weight: 780;
}


/* ========================================================
   RANKING
   ======================================================== */

.nubo-analysis-ranking {
  padding: 6px 17px 15px;

  display: grid;
}

.nubo-analysis-row {
  padding: 13px 0;

  display: grid;
  grid-template-columns:
    30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;

  border-bottom: 1px solid #eceef2;

  animation:
    nubo-analysis-row-in
    360ms
    ease-out
    both;

  animation-delay:
    calc(var(--analysis-index) * 55ms);
}

.nubo-analysis-row:last-child {
  border-bottom: 0;
}

.nubo-analysis-row__rank {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  color:
    color-mix(
      in srgb,
      var(--analysis-color) 78%,
      #273047
    );

  background:
    color-mix(
      in srgb,
      var(--analysis-color) 12%,
      #ffffff
    );

  font-size: 10px;
  font-weight: 800;
}

.nubo-analysis-row__content {
  min-width: 0;
}

.nubo-analysis-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.nubo-analysis-row__head > div {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 7px;
}

.nubo-analysis-row__head > div:last-child {
  flex: 0 0 auto;
}

.nubo-analysis-row__head i {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: var(--analysis-color);
}

.nubo-analysis-row__head strong {
  color: #343b50;

  font-size: 11.5px;
  font-weight: 760;
}

.nubo-analysis-row__head > div:first-child strong {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-analysis-row__head span {
  color: var(--analysis-color);

  font-size: 10.5px;
  font-weight: 780;
}

.nubo-analysis-row__head
> div:last-child strong {
  min-width: 74px;

  text-align: right;
}

.nubo-analysis-bar {
  height: 7px;

  margin-top: 8px;

  overflow: hidden;

  border-radius: 999px;

  background: #eef0f4;
}

.nubo-analysis-bar span {
  display: block;

  width: var(--analysis-width);
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--analysis-color),
      color-mix(
        in srgb,
        var(--analysis-color) 62%,
        #ffffff
      )
    );

  animation:
    nubo-analysis-bar-in
    580ms
    ease-out
    both;
}


/* ========================================================
   LECTURA RÁPIDA
   ======================================================== */

.nubo-analysis-insights {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.nubo-analysis-insights article {
  min-width: 0;

  padding: 13px 14px;

  border: 1px solid #e2e4eb;
  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fafafd
    );
}

.nubo-analysis-insights span,
.nubo-analysis-insights strong,
.nubo-analysis-insights small {
  display: block;
}

.nubo-analysis-insights span {
  color: #898e9e;

  font-size: 9.5px;
  font-weight: 700;
}

.nubo-analysis-insights strong {
  margin-top: 5px;

  overflow: hidden;

  color: var(--analysis-accent);

  font-size: 13px;
  font-weight: 800;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-analysis-insights small {
  margin-top: 4px;

  color: #777d8e;

  font-size: 10px;
  line-height: 1.4;
}


/* ========================================================
   ANIMACIONES
   ======================================================== */

@keyframes nubo-analysis-donut-in {
  from {
    opacity: 0;
    transform: scale(0.92) rotate(-7deg);
  }

  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes nubo-analysis-row-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nubo-analysis-bar-in {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }

  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}


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


/* ========================================================
   RESPONSIVE
   ======================================================== */

@media (max-width: 1040px) {
  .nubo-analysis-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .nubo-analysis-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .nubo-analysis-filters {
    justify-content: space-between;
  }

  .nubo-analysis-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .nubo-analysis-page {
    gap: 13px;
  }

  .nubo-analysis-hero {
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  .nubo-analysis-hero__top {
    align-items: stretch;
    flex-direction: column;
    gap: 13px;
  }

  .nubo-analysis-context {
    align-self: flex-start;
  }

  .nubo-analysis-hero h1 {
    font-size: 25px;
  }

  .nubo-analysis-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .nubo-analysis-segmented {
    width: 100%;
  }

  .nubo-analysis-segmented button {
    flex: 1;
    justify-content: center;
  }

  .nubo-analysis-donut-body {
    grid-template-columns: 1fr;
  }

  .nubo-analysis-legend {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .nubo-analysis-insights {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .nubo-analysis-summary {
    grid-template-columns: 1fr;
  }

  .nubo-analysis-toolbar {
    padding: 13px;
  }

  .nubo-analysis-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .nubo-analysis-donut {
    width: min(210px, 100%);
  }

  .nubo-analysis-legend {
    grid-template-columns: 1fr;
  }

  .nubo-analysis-row__head {
    align-items: flex-start;
  }

  .nubo-analysis-row__head
  > div:last-child {
    align-items: flex-end;
    flex-direction: column;
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nubo-analysis-donut,
.nubo-analysis-row,
.nubo-analysis-bar span {
    animation: none !important;
    transition: none !important;
  }
}

/* NUBO_ANALYSIS_PREMIUM_V1_END */


/* NUBO_GOALS_PAGE_PREMIUM_V1_START */

.nubo-goals-page {
  display: grid;
  gap: 16px;
}


/* ========================================================
   HERO
   ======================================================== */

.nubo-goals-hero {
  position: relative;

  overflow: hidden;

  padding: 22px 22px 19px;

  border: 1px solid #dce8e3;
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 88% 6%,
      rgba(47, 170, 124, 0.055),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f9fdfb 60%,
      #fbfcf8
    );

  box-shadow:
    0 11px 30px
    rgba(43, 70, 61, 0.055);
}

.nubo-goals-hero__visual {
  position: absolute;
  inset: 0;

  overflow: hidden;

  pointer-events: none;
}

.nubo-goals-hero__visual
.is-hill-one,
.nubo-goals-hero__visual
.is-hill-two {
  position: absolute;

  border-radius:
    60% 60% 0 0;

  opacity: 0.32;
}

.nubo-goals-hero__visual
.is-hill-one {
  width: 250px;
  height: 105px;

  right: 130px;
  bottom: -64px;

  background:
    linear-gradient(
      145deg,
      #bde8cd,
      #83c9a1
    );
}

.nubo-goals-hero__visual
.is-hill-two {
  width: 170px;
  height: 78px;

  right: 30px;
  bottom: -48px;

  background:
    linear-gradient(
      145deg,
      #e5efc7,
      #b8d99b
    );
}

.nubo-goals-hero__visual > i {
  position: absolute;

  width: 2px;
  height: 42px;

  right: 180px;
  bottom: 34px;

  background: #309d70;
}

.nubo-goals-hero__visual > i::after {
  content: "";

  position: absolute;

  width: 24px;
  height: 14px;

  top: 0;
  left: 2px;

  border-radius:
    2px 9px 9px 2px;

  background:
    linear-gradient(
      135deg,
      #42bd85,
      #1e9d69
    );
}

.nubo-goals-hero__top {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.nubo-goals-eyebrow {
  min-height: 25px;

  padding: 0 10px;

  display: inline-flex;
  align-items: center;

  border: 1px solid #cfe9de;
  border-radius: 999px;

  color: #168d68;
  background: #eaf8f2;

  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.nubo-goals-hero h1 {
  margin: 10px 0 0;

  color: #17382e;

  font-size: 29px;
  font-weight: 840;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.nubo-goals-hero__copy p {
  max-width: 610px;

  margin: 8px 0 0;

  color: #687d75;

  font-size: 13px;
  line-height: 1.5;
}

.nubo-new-goal-btn {
  min-height: 44px;

  border: 0 !important;
  border-radius: 14px !important;

  background:
    linear-gradient(
      135deg,
      #1cb777,
      #0b9867
    )
    !important;

  box-shadow:
    0 10px 23px
    rgba(19, 158, 105, 0.20)
    !important;
}


/* ========================================================
   RESUMEN
   ======================================================== */

.nubo-goals-summary {
  position: relative;
  z-index: 1;

  margin-top: 18px;

  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.nubo-goal-stat {
  --stat-color: #14986d;
  --stat-soft: #e8f7f0;

  min-width: 0;

  padding: 12px;

  display: grid;
  grid-template-columns:
    43px minmax(0, 1fr);
  align-items: center;
  gap: 11px;

  border: 1px solid rgba(218, 230, 225, 0.94);
  border-radius: 15px;

  background: rgba(255, 255, 255, 0.80);
}

.nubo-goal-stat.is-achieved {
  --stat-color: #4385d0;
  --stat-soft: #eaf3ff;
}

.nubo-goal-stat.is-contributed {
  --stat-color: #bc8725;
  --stat-soft: #fff6e3;
}

.nubo-goal-stat__icon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  color: var(--stat-color);
  background: var(--stat-soft);
}

.nubo-goal-stat__icon svg {
  width: 19px;
  height: 19px;
}

.nubo-goal-stat small,
.nubo-goal-stat strong,
.nubo-goal-stat div > span {
  display: block;
}

.nubo-goal-stat small {
  color: #74877f;
  font-size: 10.5px;
}

.nubo-goal-stat strong {
  margin-top: 3px;

  color: #183a30;

  font-size: 17px;
  font-weight: 830;
}

.nubo-goal-stat div > span {
  margin-top: 4px;

  color: #8a9993;

  font-size: 9.5px;
}


/* ========================================================
   TOOLBAR
   ======================================================== */

.nubo-goal-toolbar {
  padding: 5px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  border-bottom: 1px solid #e1e9e5;
}

.nubo-goal-segmented {
  padding: 4px;

  display: inline-flex;
  gap: 4px;

  border: 1px solid #dfe7e3;
  border-radius: 13px;

  background: #f6f9f7;
}

.nubo-goal-segmented button {
  min-height: 36px;

  padding: 0 12px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  border: 0;
  border-radius: 9px;

  color: #788a83;
  background: transparent;

  font-size: 11.5px;
  font-weight: 750;

  cursor: pointer;

  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.nubo-goal-segmented button > i {
  width: 7px;
  height: 7px;

  border: 1px solid currentColor;
  border-radius: 50%;
}

.nubo-goal-segmented button > span {
  min-width: 21px;
  height: 21px;

  padding: 0 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: rgba(91, 118, 107, 0.09);

  font-size: 9px;
}

.nubo-goal-segmented
button.is-active {
  color: #138b64;
  background: #ffffff;

  box-shadow:
    0 4px 12px
    rgba(43, 82, 67, 0.08);
}

.nubo-goal-segmented
button.is-active > i {
  border-color: #15a274;
  background: #15a274;
}

.nubo-goal-segmented
button.is-active > span {
  color: #138b64;
  background: #e8f7f0;
}

.nubo-goal-toolbar__progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nubo-goal-toolbar__progress span {
  color: #84948e;
  font-size: 10px;
}

.nubo-goal-toolbar__progress strong {
  color: #168d68;
  font-size: 11.5px;
}


/* ========================================================
   LISTA
   ======================================================== */

.nubo-goal-list {
  display: grid;
  gap: 15px;
}

.nubo-goal-workspace {
  display: grid;
  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(310px, 0.92fr);
  align-items: stretch;
  gap: 14px;

  animation:
    nubo-goal-card-in
    380ms
    ease-out
    both;

  animation-delay:
    calc(var(--goal-index) * 55ms);
}


/* ========================================================
   CARD PRINCIPAL
   ======================================================== */

.nubo-goal-detail-card,
.nubo-goal-guidance-card {
  min-width: 0;

  border: 1px solid #dfe8e4;
  border-radius: 19px;

  background: #ffffff;

  box-shadow:
    0 9px 26px
    rgba(43, 65, 57, 0.05);
}

.nubo-goal-detail-card {
  padding: 18px;
}

.nubo-goal-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nubo-goal-identity {
  min-width: 0;

  display: grid;
  grid-template-columns:
    53px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.nubo-goal-identity__icon {
  width: 53px;
  height: 53px;

  display: grid;
  place-items: center;

  border-radius: 17px;

  color: #15996e;
  background:
    linear-gradient(
      145deg,
      #e9f8f1,
      #daf2e7
    );
}

.nubo-goal-identity__icon svg {
  width: 23px;
  height: 23px;
}

.nubo-goal-identity > div {
  min-width: 0;
}

.nubo-goal-identity > div > strong {
  display: block;

  overflow: hidden;

  color: #17382e;

  font-size: 17px;
  font-weight: 820;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-goal-due {
  min-height: 26px;

  margin-top: 7px;
  padding: 0 9px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  border-radius: 999px;

  color: #70847c;
  background: #f1f5f3;

  font-size: 10px;
}

.nubo-goal-due i {
  width: 6px;
  height: 6px;

  border-radius: 50%;
  background: currentColor;
}

.nubo-goal-due.is-scheduled {
  color: #4f7d9d;
  background: #edf5fb;
}

.nubo-goal-due.is-soon {
  color: #b17c23;
  background: #fff6df;
}

.nubo-goal-due.is-overdue {
  color: #d05c56;
  background: #fff0ee;
}

.nubo-goal-due.is-completed {
  color: #138761;
  background: #e7f7f0;
}


/* ========================================================
   ANILLO Y BARRA
   ======================================================== */

.nubo-goal-progress-ring {
  width: 72px;
  height: 72px;

  flex: 0 0 72px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      #19a873
      var(--goal-progress),
      #edf1ef
      0
    );
}

.nubo-goal-progress-ring::before {
  content: "";

  width: 56px;
  height: 56px;

  border-radius: 50%;
  background: #ffffff;
}

.nubo-goal-progress-ring > div {
  position: absolute;
  text-align: center;
}

.nubo-goal-progress-ring strong,
.nubo-goal-progress-ring small {
  display: block;
}

.nubo-goal-progress-ring strong {
  color: #17382e;

  font-size: 17px;
  font-weight: 830;
}

.nubo-goal-progress-ring small {
  margin-top: 2px;

  color: #84948e;

  font-size: 8px;
}

.nubo-goal-main-progress {
  height: 8px;

  margin-top: 17px;

  overflow: hidden;

  border-radius: 999px;

  background: #eaf0ed;
}

.nubo-goal-main-progress span {
  display: block;

  width: var(--goal-progress);
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #25bb82,
      #0d9969
    );

  animation:
    nubo-goal-progress-in
    580ms
    ease-out
    both;
}

.nubo-goal-progress-message {
  margin: 7px 0 0;

  color: #758880;

  font-size: 10px;
}


/* ========================================================
   MONTOS
   ======================================================== */

.nubo-goal-amount-grid {
  margin-top: 15px;

  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.nubo-goal-amount-grid article {
  min-width: 0;

  padding: 11px;

  border: 1px solid #e7ece9;
  border-radius: 13px;

  background: #fafcfb;
}

.nubo-goal-amount-grid
article.is-saved {
  background: #eff9f5;
}

.nubo-goal-amount-grid
article.is-pending {
  background: #fff7ee;
}

.nubo-goal-amount-grid
article.is-target {
  background: #f3f7f5;
}

.nubo-goal-amount-grid span,
.nubo-goal-amount-grid strong,
.nubo-goal-amount-grid small {
  display: block;
}

.nubo-goal-amount-grid span {
  color: #82928c;
  font-size: 9.5px;
}

.nubo-goal-amount-grid strong {
  margin-top: 5px;

  overflow: hidden;

  color: #263d35;

  font-size: 13px;
  font-weight: 810;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-goal-amount-grid
.is-saved strong {
  color: #138761;
}

.nubo-goal-amount-grid
.is-pending strong {
  color: #c17b28;
}

.nubo-goal-amount-grid small {
  margin-top: 4px;

  color: #98a39e;
  font-size: 8.5px;
}


/* ========================================================
   PLAN
   ======================================================== */

.nubo-goal-plan {
  margin-top: 13px;
  padding: 11px;

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;

  border: 1px dashed #d9e4df;
  border-radius: 13px;

  background: #fcfdfc;
}

.nubo-goal-plan article {
  min-width: 0;

  display: grid;
  grid-template-columns:
    32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.nubo-goal-plan article + article {
  padding-left: 10px;

  border-left: 1px solid #e4eae7;
}

.nubo-goal-plan__icon {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  color: #168d68;
  background: #e9f7f1;
}

.nubo-goal-plan small,
.nubo-goal-plan strong {
  display: block;
}

.nubo-goal-plan small {
  color: #899790;
  font-size: 9px;
}

.nubo-goal-plan strong {
  margin-top: 4px;

  overflow: hidden;

  color: #284139;

  font-size: 11.5px;
  font-weight: 780;

  text-overflow: ellipsis;
  white-space: nowrap;
}


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

.nubo-goal-detail-foot {
  margin-top: 15px;
  padding-top: 13px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  border-top: 1px solid #e7ece9;
}

.nubo-goal-primary-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.nubo-goal-primary-actions .btn {
  min-height: 36px;

  border-radius: 10px !important;
}

.nubo-goal-contribute {
  background:
    linear-gradient(
      135deg,
      #1bb177,
      #0b9565
    )
    !important;
}

.nubo-goal-complete {
  color: #198564 !important;
  border-color: #cee7dd !important;
  background: #eef9f4 !important;
}

.nubo-goal-edit {
  color: #527266 !important;
}

.nubo-goal-delete {
  width: 36px !important;
  height: 36px !important;

  border: 1px solid #f0d9d6 !important;
  border-radius: 11px !important;

  color: #cf625b !important;
  background: #fff2f0 !important;
}

.nubo-goal-achieved-label {
  min-height: 34px;

  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  border-radius: 10px;

  color: #12825f;
  background: #e7f7f0;

  font-size: 10.5px;
  font-weight: 750;
}


/* ========================================================
   RECOMENDACIONES
   ======================================================== */

.nubo-goal-guidance-card {
  padding: 16px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fafdfb
    );
}

.nubo-goal-guidance-card > header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nubo-goal-guidance-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: #168f69;
  background: #e8f7f0;
}

.nubo-goal-guidance-card
> header span,
.nubo-goal-guidance-card
> header strong {
  display: block;
}

.nubo-goal-guidance-card
> header div > span {
  color: #7d8e87;
  font-size: 9.5px;
}

.nubo-goal-guidance-card
> header strong {
  margin-top: 3px;

  color: #233d34;

  font-size: 13.5px;
  font-weight: 790;
}

.nubo-goal-recommendation {
  margin-top: 13px;
  padding: 12px;

  display: grid;
  grid-template-columns:
    38px minmax(0, 1fr);
  gap: 10px;

  border: 1px solid #dceae4;
  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      #f5fbf8,
      #fbfdfc
    );
}

.nubo-goal-recommendation__icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: #16966c;
  background: #e2f5ed;
}

.nubo-goal-recommendation strong {
  color: #284239;

  font-size: 11.5px;
  font-weight: 780;
}

.nubo-goal-recommendation p {
  margin: 5px 0 0;

  color: #71857d;

  font-size: 9.75px;
  line-height: 1.45;
}


/* ========================================================
   HITOS
   ======================================================== */

.nubo-goal-milestones {
  margin-top: 14px;
}

.nubo-goal-milestones__title {
  margin-bottom: 8px;

  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.nubo-goal-milestones__title span {
  color: #354b43;

  font-size: 10.5px;
  font-weight: 760;
}

.nubo-goal-milestones__title small {
  color: #919e98;
  font-size: 8.5px;
}

.nubo-goal-milestone {
  min-width: 0;

  padding: 8px 9px;

  display: grid;
  grid-template-columns:
    34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;

  border: 1px solid #e6ebe8;
  border-radius: 11px;

  background: #ffffff;
}

.nubo-goal-milestone
+ .nubo-goal-milestone {
  margin-top: 7px;
}

.nubo-goal-milestone__ring {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      #1aa674
      var(--milestone-progress),
      #edf1ef
      0
    );
}

.nubo-goal-milestone__ring::before {
  content: "";

  width: 27px;
  height: 27px;

  border-radius: 50%;
  background: #ffffff;
}

.nubo-goal-milestone__ring strong {
  position: absolute;

  color: #507067;

  font-size: 7.5px;
  font-weight: 800;
}

.nubo-goal-milestone > div {
  min-width: 0;
}

.nubo-goal-milestone
> div strong,
.nubo-goal-milestone
> div small {
  display: block;
}

.nubo-goal-milestone
> div strong {
  overflow: hidden;

  color: #3a4c46;

  font-size: 9.75px;
  font-weight: 740;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-goal-milestone
> div small {
  margin-top: 2px;

  color: #98a39f;
  font-size: 8px;
}

.nubo-goal-milestone > b {
  color: #536a62;

  font-size: 9.5px;
  font-weight: 760;
  white-space: nowrap;
}

.nubo-goal-milestone.is-reached {
  border-color: #cfe9de;
  background: #f3fbf7;
}

.nubo-goal-milestone.is-reached
> div strong,
.nubo-goal-milestone.is-reached > b {
  color: #14805f;
}


/* ========================================================
   TIP
   ======================================================== */

.nubo-goal-tip {
  padding: 12px 15px;

  display: grid;
  grid-template-columns:
    38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;

  border: 1px solid #dce8e3;
  border-radius: 15px;

  background:
    linear-gradient(
      90deg,
      #f5fbf8,
      #fafcfb
    );
}

.nubo-goal-tip__icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: #168f68;
  background: #e5f6ee;
}

.nubo-goal-tip strong {
  color: #244038;

  font-size: 11.5px;
}

.nubo-goal-tip p {
  margin: 3px 0 0;

  color: #75867f;

  font-size: 10px;
}


/* ========================================================
   ANIMACIONES
   ======================================================== */

@keyframes nubo-goal-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nubo-goal-progress-in {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }

  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}


/* ========================================================
   RESPONSIVE
   ======================================================== */

@media (max-width: 1050px) {
  .nubo-goal-workspace {
    grid-template-columns: 1fr;
  }

  .nubo-goals-summary {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .nubo-goal-guidance-card {
    display: grid;
    grid-template-columns:
      minmax(210px, 0.75fr)
      minmax(0, 1.25fr);
    gap: 14px;
  }

  .nubo-goal-guidance-card
  > header,
.nubo-goal-recommendation {
    grid-column: 1;
  }

  .nubo-goal-milestones {
    grid-column: 2;
    grid-row: 1 / span 2;

    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .nubo-goals-page {
    gap: 13px;
  }

  .nubo-goals-hero {
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  .nubo-goals-hero__visual {
    opacity: 0.55;
  }

  .nubo-goals-hero__top {
    align-items: stretch;
    flex-direction: column;
    gap: 15px;
  }

  .nubo-goals-hero h1 {
    font-size: 25px;
  }

  .nubo-new-goal-btn {
    width: 100%;
  }

  .nubo-goals-summary {
    grid-template-columns: 1fr;
  }

  .nubo-goal-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .nubo-goal-segmented {
    width: 100%;
  }

  .nubo-goal-segmented button {
    flex: 1;
    justify-content: center;
  }

  .nubo-goal-toolbar__progress {
    justify-content: space-between;
  }

  .nubo-goal-guidance-card {
    display: block;
  }

  .nubo-goal-milestones {
    margin-top: 14px;
  }
}

@media (max-width: 560px) {
  .nubo-goal-detail-card,
.nubo-goal-guidance-card {
    padding: 15px;
  }

  .nubo-goal-detail-head {
    align-items: flex-start;
  }

  .nubo-goal-identity {
    grid-template-columns:
      43px minmax(0, 1fr);
  }

  .nubo-goal-identity__icon {
    width: 43px;
    height: 43px;
  }

  .nubo-goal-progress-ring {
    width: 62px;
    height: 62px;

    flex-basis: 62px;
  }

  .nubo-goal-progress-ring::before {
    width: 48px;
    height: 48px;
  }

  .nubo-goal-progress-ring strong {
    font-size: 14px;
  }

  .nubo-goal-amount-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .nubo-goal-amount-grid
  article.is-target {
    grid-column: 1 / -1;
  }

  .nubo-goal-plan {
    grid-template-columns: 1fr;
  }

  .nubo-goal-plan article + article {
    padding:
      10px 0 0;

    border-top: 1px solid #e4eae7;
    border-left: 0;
  }

  .nubo-goal-detail-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .nubo-goal-primary-actions {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .nubo-goal-primary-actions .btn {
    justify-content: center;
  }

  .nubo-goal-delete {
    align-self: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nubo-goal-workspace,
.nubo-goal-main-progress span {
    animation: none !important;
    transition: none !important;
  }
}

/* NUBO_GOALS_PAGE_PREMIUM_V1_END */


/* NUBO_REPORTS_PREMIUM_V1_START */

.nubo-reports-page {
  display: grid;
  gap: 16px;
}


/* ========================================================
   HERO
   ======================================================== */

.nubo-reports-hero {
  position: relative;

  overflow: hidden;

  padding: 21px 22px 18px;

  border: 1px solid #ebe5d8;
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 91% 3%,
      rgba(215, 158, 47, 0.05),
      transparent 30%
    ),
    radial-gradient(
      circle at 7% 100%,
      rgba(68, 135, 210, 0.035),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fffdf8 58%,
      #f9fcff 100%
    );

  box-shadow:
    0 11px 30px
    rgba(67, 61, 48, 0.055);
}

.nubo-reports-hero__top {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.nubo-reports-eyebrow {
  min-height: 25px;

  padding: 0 10px;

  display: inline-flex;
  align-items: center;

  border: 1px solid #efdfb9;
  border-radius: 999px;

  color: #aa7720;
  background: #fff7e5;

  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.nubo-reports-hero h1 {
  margin: 10px 0 0;

  color: #303342;

  font-size: 29px;
  font-weight: 835;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.nubo-reports-hero__copy p {
  max-width: 650px;

  margin: 8px 0 0;

  color: #737888;

  font-size: 13px;
  line-height: 1.5;
}

.nubo-reports-hero__actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.nubo-reports-period-badge {
  min-width: 128px;

  padding: 10px 12px;

  border: 1px solid #e7e2d9;
  border-radius: 13px;

  background: rgba(255, 255, 255, 0.78);
}

.nubo-reports-period-badge span,
.nubo-reports-period-badge strong {
  display: block;
}

.nubo-reports-period-badge span {
  color: #90919a;
  font-size: 9.5px;
}

.nubo-reports-period-badge strong {
  margin-top: 4px;

  color: #aa7720;

  font-size: 12.5px;
  font-weight: 790;
}

.nubo-reports-refresh {
  min-height: 42px;

  border-radius: 12px !important;
}


/* ========================================================
   INDICADORES
   ======================================================== */

.nubo-reports-summary {
  position: relative;
  z-index: 1;

  margin-top: 18px;

  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.nubo-report-stat {
  --stat-color: #4b83c8;
  --stat-soft: #ebf4ff;

  min-width: 0;

  padding: 11px 12px;

  display: grid;
  grid-template-columns:
    39px minmax(0, 1fr);
  align-items: center;
  gap: 10px;

  border: 1px solid rgba(229, 226, 219, 0.92);
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.80);
}

.nubo-report-stat.is-income {
  --stat-color: #159b73;
  --stat-soft: #e7f7f0;
}

.nubo-report-stat.is-expense {
  --stat-color: #df6e64;
  --stat-soft: #fff0ed;
}

.nubo-report-stat.is-balance {
  --stat-color: #7768cf;
  --stat-soft: #f0edff;
}

.nubo-report-stat.is-saving {
  --stat-color: #bc8424;
  --stat-soft: #fff6e3;
}

.nubo-report-stat__icon {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: var(--stat-color);
  background: var(--stat-soft);
}

.nubo-report-stat__icon svg {
  width: 18px;
  height: 18px;
}

.nubo-report-stat small,
.nubo-report-stat strong,
.nubo-report-stat div > span {
  display: block;
}

.nubo-report-stat small {
  color: #858791;
  font-size: 10px;
}

.nubo-report-stat strong {
  margin-top: 4px;

  overflow: hidden;

  color: #303442;

  font-size: 14px;
  font-weight: 810;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-report-stat div > span {
  margin-top: 4px;

  overflow: hidden;

  color: #9698a0;

  font-size: 8.75px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-report-stat.is-positive strong {
  color: #168863;
}

.nubo-report-stat.is-negative strong {
  color: #d75f58;
}


/* ========================================================
   SELECTOR DE PERIODO
   ======================================================== */

.nubo-reports-toolbar {
  padding: 13px 15px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  border: 1px solid #e4e5e9;
  border-radius: 17px;

  background: rgba(255, 255, 255, 0.92);

  box-shadow:
    0 7px 21px
    rgba(52, 56, 73, 0.04);
}

.nubo-reports-toolbar__copy span,
.nubo-reports-toolbar__copy strong,
.nubo-reports-toolbar__copy small {
  display: block;
}

.nubo-reports-toolbar__copy span {
  color: #ad7a22;

  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nubo-reports-toolbar__copy strong {
  margin-top: 3px;

  color: #343744;

  font-size: 13.5px;
  font-weight: 790;
}

.nubo-reports-toolbar__copy small {
  margin-top: 4px;

  color: #8c8f99;

  font-size: 10.5px;
}

.nubo-reports-periods {
  padding: 4px;

  display: inline-flex;
  gap: 4px;

  border: 1px solid #e3e3e6;
  border-radius: 12px;

  background: #f7f7f8;
}

.nubo-reports-periods button {
  min-height: 35px;

  padding: 0 13px;

  border: 0;
  border-radius: 9px;

  color: #7d808a;
  background: transparent;

  font-size: 11.5px;
  font-weight: 740;

  cursor: pointer;

  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.nubo-reports-periods button:hover {
  color: #aa7720;
}

.nubo-reports-periods button.is-active {
  color: #a87319;
  background: #ffffff;

  box-shadow:
    0 4px 12px
    rgba(77, 67, 47, 0.08);
}


/* ========================================================
   EXPORTACIONES
   ======================================================== */

.nubo-export-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}

.nubo-export-card {
  --export-color: #d6605a;
  --export-soft: #fff0ee;
  --export-border: #efd8d5;

  min-width: 0;

  padding: 18px;

  overflow: hidden;
  position: relative;

  border: 1px solid var(--export-border);
  border-radius: 19px;

  background:
    linear-gradient(
      150deg,
      #ffffff 0%,
      #fffefe 68%,
      var(--export-soft) 165%
    );

  box-shadow:
    0 10px 27px
    rgba(50, 52, 68, 0.055);

  animation:
    nubo-report-card-in
    380ms
    ease-out
    both;

  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    border-color 170ms ease;
}

.nubo-export-card.is-excel {
  --export-color: #159b6d;
  --export-soft: #e9f8f1;
  --export-border: #cee8dd;

  animation-delay: 70ms;
}

.nubo-export-card:hover {
  transform: translateY(-2px);

  border-color: var(--export-color);

  box-shadow:
    0 15px 34px
    rgba(50, 52, 68, 0.085);
}

.nubo-export-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nubo-export-card__icon {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  color: var(--export-color);
  background: var(--export-soft);
}

.nubo-export-card__icon svg {
  width: 23px;
  height: 23px;
}

.nubo-export-format {
  min-height: 26px;

  padding: 0 9px;

  display: inline-flex;
  align-items: center;

  border: 1px solid var(--export-border);
  border-radius: 999px;

  color: var(--export-color);
  background: var(--export-soft);

  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.nubo-export-card__copy {
  margin-top: 14px;
}

.nubo-export-card__copy > span {
  color: var(--export-color);

  font-size: 9.5px;
  font-weight: 770;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nubo-export-card__copy h2 {
  margin: 5px 0 0;

  color: #303440;

  font-size: 18px;
  font-weight: 820;
}

.nubo-export-card__copy p {
  max-width: 560px;

  margin: 7px 0 0;

  color: #747986;

  font-size: 11.5px;
  line-height: 1.5;
}


/* ========================================================
   VISTA PREVIA
   ======================================================== */

.nubo-export-preview {
  margin-top: 15px;
  padding: 12px;

  display: grid;
  grid-template-columns:
    90px minmax(0, 1fr);
  align-items: center;
  gap: 13px;

  border: 1px solid #e8e7e8;
  border-radius: 14px;

  background: rgba(250, 250, 250, 0.80);
}

.nubo-export-preview__page {
  height: 91px;

  padding: 11px;

  border: 1px solid var(--export-border);
  border-radius: 9px;

  background: #ffffff;

  box-shadow:
    0 6px 15px
    rgba(51, 54, 68, 0.06);
}

.nubo-export-preview__page > span {
  display: block;

  height: 5px;

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--export-color) 18%,
      #edf0f2
    );
}

.nubo-export-preview__page
> span + span {
  margin-top: 6px;
}

.nubo-export-preview__page
> span:nth-child(2) {
  width: 76%;
}

.nubo-export-preview__page
> span:nth-child(3) {
  width: 54%;
}

.nubo-export-preview__page > div {
  height: 32px;

  margin-top: 11px;

  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.nubo-export-preview__page i {
  flex: 1;

  border-radius: 3px 3px 1px 1px;

  background: var(--export-color);

  opacity: 0.72;
}

.nubo-export-preview__page i:nth-child(1) {
  height: 42%;
}

.nubo-export-preview__page i:nth-child(2) {
  height: 76%;
}

.nubo-export-preview__page i:nth-child(3) {
  height: 58%;
}

.nubo-export-preview__page.is-spreadsheet
> div {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  align-items: stretch;
  gap: 3px;
}

.nubo-export-preview__page.is-spreadsheet i {
  height: 100%;

  border-radius: 2px;

  background:
    linear-gradient(
      180deg,
      var(--export-soft),
      var(--export-border)
    );
}

.nubo-export-preview__details strong,
.nubo-export-preview__details span {
  display: block;
}

.nubo-export-preview__details strong {
  color: #4b4e59;

  font-size: 10px;
  font-weight: 770;
}

.nubo-export-preview__details span {
  margin: 3px 0 9px;

  color: #898c96;

  font-size: 9.5px;
}

.nubo-export-preview__details
span:last-child {
  margin-bottom: 0;
}


/* ========================================================
   CARACTERÍSTICAS Y DESCARGA
   ======================================================== */

.nubo-export-features {
  margin-top: 13px;

  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.nubo-export-features span {
  min-height: 27px;

  padding: 0 9px;

  display: inline-flex;
  align-items: center;
  gap: 5px;

  border-radius: 999px;

  color: #6e737e;
  background: #f3f5f5;

  font-size: 9.5px;
}

.nubo-export-features svg {
  width: 12px;
  height: 12px;

  color: var(--export-color);
}

.nubo-export-card__foot {
  margin-top: 15px;
  padding-top: 13px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  border-top: 1px solid #e8e7e8;
}

.nubo-export-card__foot small,
.nubo-export-card__foot strong {
  display: block;
}

.nubo-export-card__foot small {
  color: #9799a0;
  font-size: 9px;
}

.nubo-export-card__foot strong {
  margin-top: 4px;

  color: #494c57;

  font-size: 10.5px;
  font-weight: 760;
}

.nubo-export-button {
  min-height: 39px;

  color: #ffffff !important;
  background: var(--export-color) !important;

  border: 0 !important;
  border-radius: 11px !important;

  box-shadow:
    0 8px 18px
    color-mix(
      in srgb,
      var(--export-color) 20%,
      transparent
    )
    !important;
}


/* ========================================================
   GARANTÍA
   ======================================================== */

.nubo-report-assurance {
  padding: 12px 14px;

  display: grid;
  grid-template-columns:
    38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;

  border: 1px solid #dfe7e3;
  border-radius: 15px;

  background:
    linear-gradient(
      90deg,
      #f7fbf9,
      #fbfbfa
    );
}

.nubo-report-assurance__icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  color: #168b66;
  background: #e6f6ef;
}

.nubo-report-assurance strong {
  color: #334a41;

  font-size: 11.5px;
}

.nubo-report-assurance p {
  margin: 3px 0 0;

  color: #78877f;

  font-size: 10px;
}

.nubo-report-assurance__period {
  min-height: 28px;

  padding: 0 10px;

  display: inline-flex;
  align-items: center;

  border-radius: 999px;

  color: #aa7720;
  background: #fff5df;

  font-size: 10px;
  font-weight: 760;
}


/* ========================================================
   ANIMACIONES
   ======================================================== */

@keyframes nubo-report-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ========================================================
   RESPONSIVE
   ======================================================== */

@media (max-width: 1000px) {
  .nubo-reports-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .nubo-reports-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .nubo-reports-page {
    gap: 13px;
  }

  .nubo-reports-hero {
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  .nubo-reports-hero__top {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .nubo-reports-hero h1 {
    font-size: 25px;
  }

  .nubo-reports-hero__actions {
    align-items: stretch;
  }

  .nubo-reports-period-badge,
.nubo-reports-refresh {
    flex: 1;
  }

  .nubo-export-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .nubo-reports-summary {
    grid-template-columns: 1fr;
  }

  .nubo-reports-hero__actions {
    flex-direction: column;
  }

  .nubo-reports-periods {
    width: 100%;
  }

  .nubo-reports-periods button {
    flex: 1;
  }

  .nubo-export-preview {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .nubo-export-card__foot {
    align-items: stretch;
    flex-direction: column;
  }

  .nubo-export-button {
    justify-content: center;
  }

  .nubo-report-assurance {
    grid-template-columns:
      38px minmax(0, 1fr);
  }

  .nubo-report-assurance__period {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nubo-export-card {
    animation: none !important;
    transition: none !important;
  }
}

/* NUBO_REPORTS_PREMIUM_V1_END */


/* NUBO_SETTINGS_EXPERIENCE_V1_START */

.nubo-settings-page {
  display: grid;
  gap: 16px;
}


/* ========================================================
   HERO
   ======================================================== */

.nubo-settings-hero {
  position: relative;

  overflow: hidden;

  padding: 22px;

  border: 1px solid #dfe5f0;
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 91% 4%,
      rgba(112, 98, 205, 0.055),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 100%,
      rgba(60, 137, 190, 0.035),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #fbfaff 58%,
      #f9fcff
    );

  box-shadow:
    0 11px 30px
    rgba(55, 59, 84, 0.055);
}

.nubo-settings-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.nubo-settings-eyebrow {
  min-height: 25px;

  padding: 0 10px;

  display: inline-flex;
  align-items: center;

  border: 1px solid #ded9f5;
  border-radius: 999px;

  color: #7364c6;
  background: #f3f0ff;

  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.nubo-settings-hero h1 {
  margin: 10px 0 0;

  color: #283047;

  font-size: 29px;
  font-weight: 835;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.nubo-settings-hero__copy p {
  max-width: 620px;

  margin: 8px 0 0;

  color: #737b8e;

  font-size: 13px;
  line-height: 1.5;
}

.nubo-settings-hero__icon {
  width: 51px;
  height: 51px;

  display: grid;
  place-items: center;

  border-radius: 16px;

  color: #7062c4;
  background: #f1eeff;

  box-shadow:
    0 8px 20px
    rgba(102, 87, 181, 0.11);
}

.nubo-settings-hero__icon svg {
  width: 23px;
  height: 23px;
}

.nubo-settings-hero__summary {
  margin-top: 18px;

  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.nubo-settings-hero__summary article {
  min-width: 0;

  padding: 11px 12px;

  border: 1px solid rgba(225, 226, 236, 0.9);
  border-radius: 13px;

  background: rgba(255, 255, 255, 0.78);
}

.nubo-settings-hero__summary span,
.nubo-settings-hero__summary strong {
  display: block;
}

.nubo-settings-hero__summary span {
  color: #8c91a1;
  font-size: 9.5px;
}

.nubo-settings-hero__summary strong {
  margin-top: 4px;

  overflow: hidden;

  color: #373d52;

  font-size: 12px;
  font-weight: 780;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ========================================================
   DISTRIBUCIÓN
   ======================================================== */

.nubo-settings-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(280px, 0.72fr);
  align-items: start;
  gap: 15px;
}

.nubo-settings-main,
.nubo-settings-side {
  display: grid;
  gap: 13px;
}

.nubo-settings-card,
.nubo-ai-settings-card,
.nubo-session-card,
.nubo-reset-card,
.nubo-settings-save {
  min-width: 0;

  border: 1px solid #e1e5ec;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 8px 24px
    rgba(48, 53, 72, 0.045);
}

.nubo-settings-card {
  padding: 17px;

  animation:
    nubo-settings-card-in
    360ms
    ease-out
    both;
}

.nubo-settings-card:nth-child(2) {
  animation-delay: 45ms;
}

.nubo-settings-card:nth-child(3) {
  animation-delay: 90ms;
}

.nubo-settings-card:nth-child(4) {
  animation-delay: 135ms;
}


/* ========================================================
   CABECERAS DE CARD
   ======================================================== */

.nubo-settings-card__head {
  display: grid;
  grid-template-columns:
    42px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
}

.nubo-settings-card__icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  color: #7164c4;
  background: #f1efff;
}

.nubo-settings-card.is-profile
.nubo-settings-card__icon {
  color: #2687b2;
  background: #eaf6fb;
}

.nubo-settings-card.is-appearance
.nubo-settings-card__icon {
  color: #7767cb;
  background: #f1eeff;
}

.nubo-settings-card.is-experience
.nubo-settings-card__icon {
  color: #16936b;
  background: #e9f7f1;
}

.nubo-settings-card.is-integrations
.nubo-settings-card__icon {
  color: #b27b24;
  background: #fff5e2;
}

.nubo-settings-card__icon svg {
  width: 18px;
  height: 18px;
}

.nubo-settings-card__head span,
.nubo-settings-card__head h2,
.nubo-settings-card__head p {
  display: block;
}

.nubo-settings-card__head div > span {
  color: #7870b5;

  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nubo-settings-card__head h2 {
  margin: 4px 0 0;

  color: #303649;

  font-size: 15px;
  font-weight: 800;
}

.nubo-settings-card__head p {
  margin: 5px 0 0;

  color: #858a99;

  font-size: 10.5px;
  line-height: 1.4;
}


/* ========================================================
   PERFIL
   ======================================================== */

.nubo-profile-overview {
  margin-top: 15px;
  padding: 12px;

  display: grid;
  grid-template-columns:
    50px minmax(0, 1fr);
  align-items: center;
  gap: 11px;

  border: 1px solid #dfebef;
  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      #f6fbfd,
      #fbfdfd
    );
}

.nubo-profile-avatar {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  border-radius: 16px;

  color: #247e9f;
  background: #def1f7;

  font-size: 17px;
  font-weight: 800;
}

.nubo-profile-overview strong,
.nubo-profile-overview div > span,
.nubo-profile-overview small {
  display: block;
}

.nubo-profile-overview strong {
  color: #30434b;

  font-size: 13px;
  font-weight: 790;
}

.nubo-profile-overview div > span {
  margin-top: 3px;

  overflow: hidden;

  color: #778990;

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-profile-overview small {
  width: fit-content;

  margin-top: 6px;
  padding: 3px 7px;

  border-radius: 999px;

  color: #397689;
  background: #e7f3f6;

  font-size: 8.5px;
}


/* ========================================================
   CAMPOS
   ======================================================== */

.nubo-setting-field {
  margin-top: 14px;

  display: block;
}

.nubo-setting-field > span,
.nubo-setting-field > small {
  display: block;
}

.nubo-setting-field > span {
  margin-bottom: 6px;

  color: #4e5669;

  font-size: 10.5px;
  font-weight: 740;
}

.nubo-setting-field input,
.nubo-setting-field select {
  width: 100%;
  min-height: 42px;

  padding: 0 12px;

  border: 1px solid #dfe3eb;
  border-radius: 11px;

  color: #374052;
  background: #fbfcfd;

  font: inherit;
  font-size: 11.5px;

  outline: none;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.nubo-setting-field input:focus,
.nubo-setting-field select:focus {
  border-color: #9083db;

  background: #ffffff;

  box-shadow:
    0 0 0 3px
    rgba(125, 108, 205, 0.10);
}

.nubo-setting-field > small {
  margin-top: 6px;

  color: #9297a4;

  font-size: 9px;
  line-height: 1.4;
}

.nubo-settings-fields-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 11px;
}


/* ========================================================
   TEMA
   ======================================================== */


/* ========================================================
   INTEGRACIONES
   ======================================================== */

.nubo-integrations {
  margin-top: 15px;

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.nubo-integration {
  min-width: 0;

  padding: 11px;

  display: grid;
  grid-template-columns:
    39px minmax(0, 1fr);
  align-items: center;
  gap: 9px;

  border: 1px solid #e5e6e9;
  border-radius: 13px;

  background: #fbfbfc;
}

.nubo-integration__logo {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  font-size: 13px;
  font-weight: 840;
}

.nubo-integration__logo.is-whatsapp {
  color: #16895f;
  background: #e5f7ee;
}

.nubo-integration__logo.is-drive {
  color: #477bb8;
  background:
    linear-gradient(
      145deg,
      #eaf3ff,
      #fff4dd
    );
}

.nubo-integration strong,
.nubo-integration div > span,
.nubo-integration b {
  display: block;
}

.nubo-integration strong {
  color: #3e4555;

  font-size: 11px;
  font-weight: 770;
}

.nubo-integration div > span {
  margin-top: 3px;

  color: #8b909c;

  font-size: 8.75px;
  line-height: 1.35;
}

.nubo-integration b {
  grid-column: 2;

  width: fit-content;

  margin-top: 5px;
  padding: 3px 7px;

  border-radius: 999px;

  color: #9b782d;
  background: #fff4db;

  font-size: 8px;
  font-weight: 750;
}


/* ========================================================
   GUARDAR
   ======================================================== */

.nubo-settings-save {
  padding: 13px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  background:
    linear-gradient(
      90deg,
      #f7faf9,
      #fbfbfd
    );
}

.nubo-settings-save strong,
.nubo-settings-save span {
  display: block;
}

.nubo-settings-save strong {
  color: #3d4b46;

  font-size: 11.5px;
}

.nubo-settings-save span {
  margin-top: 3px;

  color: #8a9691;

  font-size: 9.5px;
}


/* ========================================================
   NUBO_AI
   ======================================================== */

.nubo-ai-settings-card {
  position: relative;

  overflow: hidden;

  padding: 19px;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(255, 255, 255, 0.20),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #7466c8,
      #546fc3 58%,
      #3f83b8
    );

  border-color:
    rgba(87, 97, 176, 0.45);
}

.nubo-ai-settings-card__icon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.17);
}

.nubo-ai-settings-card__status {
  position: absolute;

  top: 17px;
  right: 17px;

  padding: 4px 8px;

  border-radius: 999px;

  color: #e8fff5;
  background: rgba(21, 78, 69, 0.28);

  font-size: 8.5px;
  font-weight: 750;
}

.nubo-ai-settings-card h2 {
  margin: 15px 0 0;

  font-size: 19px;
  font-weight: 820;
}

.nubo-ai-settings-card > strong {
  display: block;

  margin-top: 4px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 10px;
}

.nubo-ai-settings-card p {
  margin: 11px 0 15px;

  color: rgba(255, 255, 255, 0.78);

  font-size: 10.5px;
  line-height: 1.5;
}

.nubo-ai-settings-card .btn {
  width: 100%;

  justify-content: center;

  color: #5867b5 !important;
  border-color: transparent !important;
  background: #ffffff !important;
}


/* ========================================================
   SESIÓN Y RESTABLECIMIENTO
   ======================================================== */

.nubo-session-card,
.nubo-reset-card {
  padding: 16px;
}

.nubo-session-card header {
  display: grid;
  grid-template-columns:
    36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.nubo-session-card header > span {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  color: #57768b;
  background: #edf4f7;
}

.nubo-session-card header strong,
.nubo-session-card header small {
  display: block;
}

.nubo-session-card header strong {
  color: #3d4a50;
  font-size: 11.5px;
}

.nubo-session-card header small {
  margin-top: 3px;

  color: #8b989d;

  font-size: 8.75px;
}

.nubo-session-user {
  margin: 13px 0;
  padding: 10px;

  border: 1px solid #e7eaeb;
  border-radius: 11px;

  background: #fafbfb;
}

.nubo-session-user strong,
.nubo-session-user span {
  display: block;
}

.nubo-session-user strong {
  color: #465358;

  font-size: 10.5px;
}

.nubo-session-user span {
  margin-top: 3px;

  overflow: hidden;

  color: #8b969a;

  font-size: 8.75px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.nubo-session-card > .btn {
  width: 100%;
  justify-content: center;
}

.nubo-reset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  border-color: #eee4df;
  background: #fffdfc;
}

.nubo-reset-card strong {
  color: #695955;

  font-size: 10.5px;
}

.nubo-reset-card p {
  margin: 4px 0 0;

  color: #988b87;

  font-size: 8.75px;
  line-height: 1.4;
}


/* ========================================================
   DENSIDAD COMPACTA GLOBAL
   ======================================================== */

html[data-density="compact"]
.nubo-movements-page,
html[data-density="compact"]
.nubo-debts-page,
html[data-density="compact"]
.nubo-goals-page,
html[data-density="compact"]
.nubo-analysis-page,
html[data-density="compact"]
.nubo-reports-page,
html[data-density="compact"]
.nubo-settings-page {
  gap: 12px;
}

html[data-density="compact"]
.nubo-movement-table td {
  padding-top: 9px;
  padding-bottom: 9px;
}

html[data-density="compact"]
.nubo-debt-card,
html[data-density="compact"]
.nubo-goal-detail-card,
html[data-density="compact"]
.nubo-export-card,
html[data-density="compact"]
.nubo-settings-card {
  padding: 14px;
}


/* ========================================================
   RESPONSIVE
   ======================================================== */

@media (max-width: 980px) {
  .nubo-settings-layout {
    grid-template-columns: 1fr;
  }

  .nubo-settings-side {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .nubo-ai-settings-card {
    grid-row: span 2;
  }
}

@media (max-width: 760px) {
  .nubo-settings-page {
    gap: 13px;
  }

  .nubo-settings-hero {
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  .nubo-settings-hero h1 {
    font-size: 25px;
  }

  .nubo-settings-hero__summary {
    grid-template-columns: 1fr;
  }

  .nubo-settings-fields-grid,
.nubo-integrations,
.nubo-settings-side {
    grid-template-columns: 1fr;
  }

  .nubo-ai-settings-card {
    grid-row: auto;
  }

  .nubo-settings-save {
    align-items: stretch;
    flex-direction: column;
  }

  .nubo-settings-save .btn {
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .nubo-settings-hero__icon {
    width: 43px;
    height: 43px;
  }

  .nubo-settings-card {
    padding: 15px;
  }

  

  

  .nubo-reset-card {
    align-items: stretch;
    flex-direction: column;
  }
}

@keyframes nubo-settings-card-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nubo-settings-card {
    animation: none !important;
    transition: none !important;
  }
}

/* NUBO_SETTINGS_EXPERIENCE_V1_END */


/* NUBO_SETTINGS_BALANCE_V2_START */

/* ========================================================
   CONTENEDOR CENTRADO
   ======================================================== */

.nubo-settings-page {
  width:
    min(100%, 1240px);

  margin-inline:
    auto;

  gap:
    14px;
}


/* ========================================================
   CABECERA MÁS COMPACTA
   ======================================================== */

.nubo-settings-hero {
  padding:
    19px
    20px
    17px;

  border-radius:
    20px;
}

.nubo-settings-hero__top {
  align-items:
    center;
}

.nubo-settings-hero__icon {
  width:
    46px;

  height:
    46px;

  flex:
    0
    0
    46px;

  border-radius:
    14px;

  box-shadow:
    0 7px 17px
    rgba(102, 87, 181, 0.09);
}

.nubo-settings-hero__icon svg {
  width:
    20px;

  height:
    20px;
}

.nubo-settings-hero__summary {
  margin-top:
    14px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}

.nubo-settings-hero__summary article {
  min-width:
    160px;

  min-height:
    42px;

  padding:
    8px
    11px;

  flex:
    1
    1
    180px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  border-radius:
    12px;
}

.nubo-settings-hero__summary strong {
  margin-top:
    0;

  text-align:
    right;
}


/* ========================================================
   GRID EQUILIBRADO
   ======================================================== */

.nubo-settings-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.34fr)
    minmax(320px, 0.76fr);

  grid-template-areas:
    "profile nubo-ai"
    "appearance session"
    "experience integrations"
    "experience reset"
    "save save";

  align-items:
    start;

  gap:
    14px;
}

.nubo-settings-main,
.nubo-settings-side {
  display:
    contents;
}

.nubo-settings-card.is-profile {
  grid-area:
    profile;
}

.nubo-settings-card.is-appearance {
  grid-area:
    appearance;
}

.nubo-settings-card.is-experience {
  grid-area:
    experience;

  align-self:
    stretch;
}

.nubo-settings-card.is-integrations {
  grid-area:
    integrations;
}

.nubo-ai-settings-card {
  grid-area:
    nubo-ai;
}

.nubo-session-card {
  grid-area:
    session;
}

.nubo-reset-card {
  grid-area:
    reset;
}

.nubo-settings-save {
  grid-area:
    save;
}


/* ========================================================
   CARDS MÁS LIMPIAS
   ======================================================== */

.nubo-settings-card,
.nubo-ai-settings-card,
.nubo-session-card,
.nubo-reset-card,
.nubo-settings-save {
  border-radius:
    16px;

  box-shadow:
    0 7px 20px
    rgba(48, 53, 72, 0.04);
}

.nubo-settings-card {
  padding:
    15px;
}

.nubo-settings-card__head {
  grid-template-columns:
    39px
    minmax(0, 1fr);

  gap:
    10px;
}

.nubo-settings-card__icon {
  width:
    39px;

  height:
    39px;

  border-radius:
    12px;
}

.nubo-profile-overview {
  margin-top:
    12px;

  padding:
    10px;
}

.nubo-setting-field {
  margin-top:
    12px;
}

.nubo-setting-field input,
.nubo-setting-field select {
  min-height:
    40px;
}


/* ========================================================
   APARIENCIA
   ======================================================== */


/* ========================================================
   PREFERENCIAS GENERALES
   ======================================================== */

.nubo-settings-card.is-experience
.nubo-settings-fields-grid {
  margin-top:
    4px;

  grid-template-columns:
    1fr;
}

.nubo-settings-card.is-experience
.nubo-setting-field {
  padding:
    11px;

  border:
    1px solid
    #e5e7ed;

  border-radius:
    12px;

  background:
    #fafbfd;
}


/* ========================================================
   INTEGRACIONES EN COLUMNA DERECHA
   ======================================================== */

.nubo-integrations {
  margin-top:
    12px;

  grid-template-columns:
    1fr;

  gap:
    8px;
}

.nubo-integration {
  padding:
    10px;

  grid-template-columns:
    37px
    minmax(0, 1fr)
    auto;

  gap:
    9px;
}

.nubo-integration__logo {
  width:
    37px;

  height:
    37px;

  border-radius:
    11px;
}

.nubo-integration b {
  grid-column:
    auto;

  margin-top:
    0;

  white-space:
    nowrap;
}


/* ========================================================
   NUBO_AI MÁS SUAVE Y COMPACTO
   ======================================================== */

.nubo-ai-settings-card {
  min-height:
    0;

  padding:
    17px;

  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(255, 255, 255, 0.14),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #726ac1,
      #5b73bd 58%,
      #4c83b2
    );

  box-shadow:
    0 11px 25px
    rgba(76, 91, 169, 0.14);
}

.nubo-ai-settings-card__icon {
  width:
    39px;

  height:
    39px;

  border-radius:
    12px;
}

.nubo-ai-settings-card h2 {
  margin-top:
    12px;

  font-size:
    17px;
}

.nubo-ai-settings-card p {
  margin:
    9px
    0
    12px;

  line-height:
    1.45;
}

.nubo-ai-settings-card .btn {
  min-height:
    37px;
}


/* ========================================================
   SESIÓN Y RESTABLECER
   ======================================================== */

.nubo-session-card,
.nubo-reset-card {
  padding:
    14px;
}

.nubo-session-user {
  margin:
    11px
    0;

  padding:
    9px;
}

.nubo-reset-card {
  align-items:
    flex-start;

  flex-direction:
    column;
}

.nubo-reset-card .btn {
  align-self:
    flex-end;
}


/* ========================================================
   BARRA GLOBAL DE GUARDADO
   ======================================================== */

.nubo-settings-save {
  position:
    sticky;

  z-index:
    8;

  bottom:
    12px;

  min-height:
    66px;

  padding:
    11px
    13px;

  border:
    1px solid
    rgba(216, 225, 221, 0.92);

  background:
    rgba(250, 252, 251, 0.88);

  box-shadow:
    0 13px 30px
    rgba(40, 61, 53, 0.10);

  backdrop-filter:
    blur(16px)
    saturate(130%);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(130%);

  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.nubo-settings-save.is-dirty {
  border-color:
    #b9dfcf;

  background:
    rgba(241, 250, 246, 0.94);

  box-shadow:
    0 14px 32px
    rgba(25, 128, 91, 0.13);
}

.nubo-settings-save.is-dirty strong {
  color:
    #157e5e;
}

.nubo-settings-save
.btn:disabled {
  opacity:
    0.46;

  cursor:
    not-allowed;

  transform:
    none !important;

  box-shadow:
    none !important;
}


/* ========================================================
   TABLET
   ======================================================== */

@media (max-width: 1060px) {
  .nubo-settings-page {
    width:
      100%;
  }

  .nubo-settings-layout {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-areas:
      "profile appearance"
      "experience nubo-ai"
      "integrations session"
      "reset reset"
      "save save";
  }

  .nubo-settings-card.is-experience {
    align-self:
      start;
  }

  .nubo-reset-card {
    align-items:
      center;

    flex-direction:
      row;
  }
}


/* ========================================================
   MÓVIL
   ======================================================== */

@media (max-width: 760px) {
  .nubo-settings-layout {
    grid-template-columns:
      1fr;

    grid-template-areas:
      "profile"
      "appearance"
      "experience"
      "nubo-ai"
      "integrations"
      "session"
      "reset"
      "save";

    gap:
      12px;
  }

  .nubo-settings-hero__summary article {
    flex-basis:
      100%;
  }

  .nubo-settings-save {
    position:
      static;

    align-items:
      stretch;

    flex-direction:
      column;
  }

  .nubo-settings-save .btn {
    width:
      100%;

    justify-content:
      center;
  }

  .nubo-reset-card {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .nubo-reset-card .btn {
    width:
      100%;

    align-self:
      stretch;

    justify-content:
      center;
  }
}


/* ========================================================
   PANTALLAS PEQUEÑAS
   ======================================================== */

@media (max-width: 520px) {
  .nubo-settings-hero {
    padding:
      16px
      14px;
  }

  .nubo-settings-hero__top {
    align-items:
      flex-start;
  }

  .nubo-settings-card,
.nubo-ai-settings-card,
.nubo-session-card,
.nubo-reset-card {
    padding:
      14px;
  }

  .nubo-integration {
    grid-template-columns:
      36px
      minmax(0, 1fr);
  }

  .nubo-integration b {
    grid-column:
      2;

    justify-self:
      start;
  }
}

/* NUBO_SETTINGS_BALANCE_V2_END */


/* NUBO_SETTINGS_LUCIDE_ICONS_V1_START */

.nubo-settings-card__icon .icon,
.nubo-settings-card__icon svg {
  width: 18px;
  height: 18px;

  display: block;

  stroke-width: 1.8;
}

.nubo-integration__logo {
  font-size: 0;
}

.nubo-integration__logo .icon,
.nubo-integration__logo svg {
  width: 18px;
  height: 18px;

  display: block;

  stroke-width: 1.8;
}

.nubo-integration__logo.is-whatsapp {
  color: #15986a;
}

.nubo-integration__logo.is-drive {
  color: #4b7fbd;
}

/* NUBO_SETTINGS_LUCIDE_ICONS_V1_END */


/* NUBO_SETTINGS_ICON_ALIGNMENT_V2_START */

/* ========================================================
   CENTRADO REAL DE ICONOS
   ======================================================== */

.nubo-settings-card__icon,
.nubo-integration__logo,
.nubo-settings-hero__icon,
.nubo-ai-settings-card__icon,
.nubo-session-card header > span,
.nubo-profile-avatar {
  position: relative;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;

  line-height: 0 !important;

  text-align: center;
  vertical-align: middle;
}


/* SVG LUCIDE */
.nubo-settings-card__icon > svg,
.nubo-settings-card__icon > .icon,
.nubo-integration__logo > svg,
.nubo-integration__logo > .icon,
.nubo-settings-hero__icon > svg,
.nubo-settings-hero__icon > .icon,
.nubo-ai-settings-card__icon > svg,
.nubo-ai-settings-card__icon > .icon,
.nubo-session-card header > span > svg,
.nubo-session-card header > span > .icon {
  position: static !important;

  width: 18px !important;
  height: 18px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  flex: 0 0 18px;

  transform: none !important;

  overflow: visible;

  stroke-width: 1.9;
}


/* CABECERA DE CADA SECCIÓN */
.nubo-settings-card__head {
  align-items: center !important;
}

.nubo-settings-card__icon {
  align-self: center !important;
}


/* INTEGRACIONES */
.nubo-integration {
  align-items: center !important;
}

.nubo-integration__logo {
  align-self: center !important;
}


/* EVITAR DESPLAZAMIENTO POR BASELINE */
.nubo-settings-card__icon::before,
.nubo-settings-card__icon::after,
.nubo-integration__logo::before,
.nubo-integration__logo::after {
  line-height: 0;
}


/* NUBO_SETTINGS_ICON_ALIGNMENT_V2_END */


/* NUBO_SETTINGS_REAL_ICONS_V2_START */

/* SVG LUCIDE DE SECCIONES */
.nubo-settings-real-icon {
  width: 19px !important;
  height: 19px !important;

  display: block !important;

  flex: 0 0 19px;

  margin: 0 !important;

  transform: none !important;

  overflow: visible;
}


/* LOGOS DE MARCAS */
.nubo-settings-brand-icon {
  width: 19px;
  height: 19px;

  display: block;

  flex: 0 0 19px;

  object-fit: contain;

  margin: 0;
}


/* CENTRADO EXACTO */
.nubo-settings-card__icon,
.nubo-integration__logo {
  display: grid !important;

  place-items: center !important;

  padding: 0 !important;

  line-height: 0 !important;
}


/* WHATSAPP */
.nubo-integration__logo.is-whatsapp {
  background:
    rgba(37, 211, 102, 0.12);
}


/* GOOGLE DRIVE */
.nubo-integration__logo.is-drive {
  background:
    rgba(66, 133, 244, 0.10);
}


/* NUBO_SETTINGS_REAL_ICONS_V2_END */