:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f8f9fd;
  --surface-3: #eef2fb;
  --text: #10204a;
  --muted: #68758c;
  --soft: #8b97aa;
  --line: #e5eaf3;
  --line-strong: #d8dfeb;
  --primary: #5b6ff8;
  --primary-strong: #4259ef;
  --primary-soft: #eef0ff;
  --success: #17a978;
  --success-soft: #e8f8f2;
  --danger: #f46f58;
  --danger-soft: #fff0ec;
  --warning: #e7a22b;
  --warning-soft: #fff6df;
  --violet: #8b78f6;
  --violet-soft: #f1efff;
  --sky: #4ea9d9;
  --sky-soft: #eaf7fc;
  --shadow-sm: 0 4px 18px rgba(30, 47, 93, .06);
  --shadow-md: 0 16px 45px rgba(30, 47, 93, .10);
  --shadow-lg: 0 28px 80px rgba(30, 47, 93, .16);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --header-h: 78px;
  --toolbar-h: 72px;
  --max: 1680px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}


* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); overflow-x: hidden; }
button,
input,
select,
textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img,
svg { display: block; }
[hidden] { display: none !important; }

.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 26px; height: 26px; }

.loading-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.loading-card {
  width: min(420px, 100%);
  padding: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 24px; letter-spacing: -.04em; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  color: white;
  background: linear-gradient(145deg, #6f83ff, #4157ea);
  box-shadow: 0 10px 24px rgba(91,111,248,.28);
}
.brand-mark .icon { width: 25px; height: 25px; stroke-width: 2.4; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 26px auto 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); background: var(--surface); }
.auth-visual {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 80px);
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.18), transparent 22%),
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.14), transparent 18%),
    linear-gradient(145deg, #5268f5 0%, #6d7ef8 45%, #7f77ed 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.auth-visual::before,
.auth-visual::after {
  content: ""; position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
}
.auth-visual::before { width: 520px; height: 520px; right: -160px; bottom: -120px; }
.auth-visual::after { width: 270px; height: 270px; right: 30px; bottom: 8px; }
.auth-copy { position: relative; z-index: 1; max-width: 680px; margin: auto 0; }
.auth-copy h1 { margin: 0 0 18px; font-size: clamp(42px, 5vw, 76px); line-height: .98; letter-spacing: -.055em; }
.auth-copy p { margin: 0; max-width: 570px; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.6; color: rgba(255,255,255,.86); }
.auth-preview { position: relative; z-index: 1; margin-top: 42px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.auth-preview article { padding: 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: rgba(255,255,255,.12); backdrop-filter: blur(18px); }
.auth-preview span { display:block; color: rgba(255,255,255,.72); font-size: 13px; }
.auth-preview strong { display:block; margin-top: 8px; font-size: 21px; }
.auth-panel { display: grid; place-items: center; padding: 36px; background: var(--surface); }
.auth-card { width: min(460px, 100%); }
.auth-card__head { margin-bottom: 28px; }
.auth-card__eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-weight:700; font-size:12px; }
.auth-card h2 { margin: 18px 0 8px; font-size: 34px; letter-spacing: -.04em; }
.auth-card__head p { margin: 0; color: var(--muted); line-height:1.6; }
.auth-tabs { display:flex; padding:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; margin-bottom:24px; }
.auth-tabs button { flex:1; border:0; border-radius:9px; padding:11px 14px; background:transparent; color:var(--muted); font-weight:700; cursor:pointer; }
.auth-tabs button.is-active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.form-stack { display:grid; gap:16px; }
.field { display:grid; gap:8px; }
.field > span { font-size:13px; font-weight:700; color:var(--text); }
.field-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.input-wrap { position:relative; }
.input-wrap .icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--soft); }
.input-wrap input { padding-left:44px; }
.input-wrap .password-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); }
input,
select,
textarea {
  width:100%; min-width:0; border:1px solid var(--line-strong); background:var(--surface); color:var(--text);
  border-radius:12px; padding:12px 13px; outline:none; transition:border-color .18s, box-shadow .18s, background .18s;
}
textarea { min-height:96px; resize:vertical; line-height:1.5; }
input:focus,
select:focus,
textarea:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(91,111,248,.12); }
input::placeholder,
textarea::placeholder { color:var(--soft); }
.field-hint { font-size:12px; color:var(--muted); }
.form-error { min-height:20px; color:var(--danger); font-size:13px; font-weight:600; }

.btn {
  border:0; border-radius:11px; min-height:42px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:750; cursor:pointer; transition:transform .16s, box-shadow .16s, background .16s, color .16s, border-color .16s;
  white-space:nowrap;
}
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.btn--primary { color:#fff; background:linear-gradient(135deg, var(--primary), var(--primary-strong)); box-shadow:0 9px 22px rgba(91,111,248,.22); }
.btn--secondary { color:var(--primary); background:var(--primary-soft); }
.btn--ghost { color:var(--text); background:var(--surface); border:1px solid var(--line); }
.btn--danger { color:var(--danger); background:var(--danger-soft); }
.btn--success { color:var(--success); background:var(--success-soft); }
.btn--block { width:100%; }
.btn--sm { min-height:34px; padding:0 11px; font-size:12px; }
.btn--icon { width:42px; padding:0; border-radius:50%; }


/* NUBO_REDESIGN_HEADER_V1_START */

.app-shell {
  min-height: 100vh;
}

.app-header {
  position: sticky;
  z-index: 70;
  top: 0;
  height: 78px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  width: 100%;
  max-width: 1600px;
  height: 100%;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.header-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.045em;
  cursor: pointer;
}

.header-brand .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  box-shadow:
    0 9px 22px rgba(91, 111, 248, 0.22);
}

.desktop-nav {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
}

.nav-link {
  position: relative;
  min-width: 0;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 160ms ease,
    opacity 160ms ease;
}

.nav-link .icon {
  display: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 0;
  left: 4px;
  height: 3px;
  border-radius: 4px 4px 0 0;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.nav-link:hover {
  color: var(--text);
}

.nav-link.is-active {
  color: var(--primary);
}

.nav-link.is-active::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.header-actions > .btn--icon {
  width: 42px;
  height: 42px;
  background: transparent;
  border-color: transparent;
}

.header-actions > .btn--icon:hover {
  background: var(--surface-2);
  border-color: var(--line);
}

.profile-button {
  min-width: 0;
  padding: 5px 4px 5px 7px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.profile-button:hover {
  background: var(--surface-2);
}

.avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
}

.profile-meta {
  min-width: 0;
  text-align: left;
  line-height: 1.15;
}

.profile-meta strong {
  display: block;
  max-width: 130px;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-meta span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

/* NUBO_REDESIGN_HEADER_V1_END */

.app-toolbar { min-height:var(--toolbar-h); background:var(--surface); border-bottom:1px solid var(--line); }
.toolbar-inner { max-width:var(--max); margin:0 auto; padding:14px 28px; display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.global-search { position:relative; width:min(400px, 38vw); }
.global-search .icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--soft); }
.global-search input { height:44px; padding-left:43px; background:var(--surface-2); border-color:var(--line); }
.search-results { position:absolute; z-index:40; left:0; right:0; top:calc(100% + 8px); max-height:420px; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:7px; }
.search-result { width:100%; border:0; background:transparent; padding:11px; border-radius:10px; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; text-align:left; cursor:pointer; }
.search-result:hover { background:var(--surface-2); }
.search-result__icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--primary-soft); color:var(--primary); }
.search-result strong { display:block; font-size:13px; }
.search-result small { display:block; margin-top:3px; color:var(--muted); }
.search-result__value { font-size:12px; font-weight:800; }
.quick-add-wrap { position:relative; }
.quick-menu { position:absolute; z-index:45; top:calc(100% + 8px); right:0; width:225px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; }
.quick-menu button { width:100%; border:0; background:transparent; padding:11px; border-radius:10px; display:flex; align-items:center; gap:10px; text-align:left; font-weight:700; cursor:pointer; }
.quick-menu button:hover { background:var(--surface-2); }

.main-content { max-width:var(--max); margin:0 auto; padding:26px 28px 52px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; }
.page-head h1 { margin:0; font-size:28px; letter-spacing:-.04em; }
.page-head p { margin:7px 0 0; color:var(--muted); }
.page-actions { display:flex; flex-wrap:wrap; gap:9px; justify-content:flex-end; }

.card { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-head { padding:19px 21px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.card-head h2,
.card-head h3 { margin:0; font-size:16px; letter-spacing:-.02em; }
.card-head p { margin:6px 0 0; color:var(--muted); font-size:13px; }
.card-body { padding:20px 21px; }
.card-link { border:0; background:transparent; color:var(--primary); font-weight:750; cursor:pointer; padding:3px; }

.kpi-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-bottom:16px; overflow:hidden; }
.kpi-item { min-width:0; padding:22px 24px; display:grid; grid-template-columns:52px minmax(0,1fr); gap:14px; align-items:center; border-right:1px solid var(--line); }
.kpi-item:last-child { border-right:0; }
.kpi-icon { width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--primary-soft); color:var(--primary); }
.kpi-icon.is-income { background:var(--success-soft); color:var(--success); }
.kpi-icon.is-expense { background:var(--danger-soft); color:var(--danger); }
.kpi-icon.is-saving { background:var(--violet-soft); color:var(--violet); }
.kpi-icon.is-activity { background:var(--sky-soft); color:var(--sky); }
.kpi-copy { min-width:0; }
.kpi-label { color:var(--muted); font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.kpi-value { margin-top:5px; font-size:clamp(19px,1.55vw,28px); font-weight:850; letter-spacing:-.035em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi-foot { margin-top:7px; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; }
.kpi-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }

.dashboard-top { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(310px,.9fr); gap:16px; margin-bottom:16px; }
.dashboard-bottom { display:grid; grid-template-columns:1.2fr 1fr 1fr .9fr; gap:16px; }
.chart-card { min-height:330px; }
.segmented { display:inline-flex; padding:3px; border:1px solid var(--line); background:var(--surface-2); border-radius:10px; }
.segmented button { border:0; background:transparent; color:var(--muted); padding:7px 11px; border-radius:7px; font-size:12px; font-weight:750; cursor:pointer; }
.segmented button.is-active { background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm); }
.chart-legend { display:flex; justify-content:flex-end; gap:18px; color:var(--muted); font-size:12px; margin-bottom:10px; }
.legend-dot { width:8px; height:8px; display:inline-block; border-radius:50%; margin-right:6px; }
.chart-wrap { width:100%; height:235px; }
.chart-wrap svg { width:100%; height:100%; overflow:visible; }
.chart-grid line { stroke:var(--line); stroke-dasharray:4 5; }
.chart-label { fill:var(--muted); font-size:11px; }

.summary-ring { display:grid; place-items:center; margin:4px auto 18px; width:170px; height:170px; border-radius:50%; background:conic-gradient(var(--success) var(--ring, 0%), var(--surface-3) 0); position:relative; }
.summary-ring::after { content:""; position:absolute; inset:17px; border-radius:50%; background:var(--surface); }
.summary-ring__content { position:relative; z-index:1; text-align:center; }
.summary-ring__content strong { display:block; font-size:34px; color:var(--success); letter-spacing:-.04em; }
.summary-ring__content span { display:block; color:var(--muted); font-size:12px; }
.summary-list { display:grid; gap:0; }
.summary-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-top:1px solid var(--line); font-size:13px; }
.summary-row span { color:var(--muted); }
.summary-row strong.is-income { color:var(--success); }
.summary-row strong.is-expense { color:var(--danger); }

.category-layout { display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px; align-items:center; }
.category-donut { width:145px; height:145px; border-radius:50%; background:conic-gradient(var(--segments, var(--surface-3) 0 100%)); position:relative; }
.category-donut::after { content:""; position:absolute; inset:31px; border-radius:50%; background:var(--surface); }
.category-donut__center { position:absolute; inset:0; z-index:1; display:grid; place-content:center; text-align:center; }
.category-donut__center strong { font-size:17px; }
.category-donut__center span { margin-top:2px; color:var(--muted); font-size:10px; }
.category-legend { display:grid; gap:10px; min-width:0; }
.category-line { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center; min-width:0; }
.category-line__dot { width:10px; height:10px; border-radius:3px; }
.category-line__name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--muted); }
.category-line strong { font-size:11px; }

.mini-list { display:grid; gap:10px; }
.mini-item { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px; border:1px solid var(--line); border-radius:12px; }
.mini-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--primary-soft); color:var(--primary); }
.mini-icon.is-income { background:var(--success-soft); color:var(--success); }
.mini-icon.is-expense { background:var(--danger-soft); color:var(--danger); }
.mini-main { min-width:0; }
.mini-main strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.mini-main small { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
.mini-value { font-size:11px; font-weight:850; white-space:nowrap; }
.mini-value.is-income { color:var(--success); }
.mini-value.is-expense { color:var(--danger); }
.goal-mini { padding:12px; border:1px solid var(--line); border-radius:12px; }
.goal-mini__head { display:flex; justify-content:space-between; gap:10px; font-size:12px; }
.goal-mini__head strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.goal-mini__head span { color:var(--success); font-weight:850; }
.progress { height:7px; border-radius:999px; background:var(--surface-3); overflow:hidden; margin:10px 0 6px; }
.progress span { display:block; height:100%; width:var(--progress,0%); background:linear-gradient(90deg,var(--primary),var(--success)); border-radius:inherit; }
.goal-mini small { color:var(--muted); font-size:10px; }
.insight-list { display:grid; gap:10px; }
.insight { padding:12px; border-radius:12px; background:var(--success-soft); color:var(--success); }
.insight.is-tip { background:var(--warning-soft); color:var(--warning); }
.insight.is-trend { background:var(--primary-soft); color:var(--primary); }
.insight strong { display:block; font-size:11px; }
.insight p { margin:5px 0 0; color:var(--text); font-size:11px; line-height:1.5; }

.filters-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.filters-bar .search-field { flex:1 1 260px; position:relative; }
.filters-bar .search-field .icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--soft); }
.filters-bar .search-field input { padding-left:40px; }
.filters-bar select { width:auto; min-width:150px; }

.table-card { overflow:hidden; }
.table-wrap { width:100%; overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th { padding:13px 18px; background:var(--surface-2); color:var(--muted); text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line); }
td { padding:15px 18px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--surface-2); }
.cell-main { display:flex; align-items:center; gap:11px; min-width:0; }
.cell-main__icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--primary-soft); color:var(--primary); }
.cell-main__icon.is-income { background:var(--success-soft); color:var(--success); }
.cell-main__icon.is-expense { background:var(--danger-soft); color:var(--danger); }
.cell-main strong { display:block; }
.cell-main small { display:block; color:var(--muted); margin-top:3px; }
.amount { font-weight:850; white-space:nowrap; }
.amount.is-income { color:var(--success); }
.amount.is-expense { color:var(--danger); }
.badge { display:inline-flex; align-items:center; min-height:26px; padding:0 9px; border-radius:999px; background:var(--surface-3); color:var(--muted); font-size:11px; font-weight:750; }
.badge.is-success { background:var(--success-soft); color:var(--success); }
.badge.is-danger { background:var(--danger-soft); color:var(--danger); }
.row-actions { display:flex; justify-content:flex-end; gap:6px; }
.action-btn { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--muted); cursor:pointer; }
.action-btn:hover { color:var(--primary); border-color:var(--primary); }
.action-btn.is-danger:hover { color:var(--danger); border-color:var(--danger); }

.summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.summary-tile { padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.summary-tile span { color:var(--muted); font-size:12px; }
.summary-tile strong { display:block; margin-top:5px; font-size:23px; letter-spacing:-.03em; }
.summary-tile__icon { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; background:var(--primary-soft); color:var(--primary); }

.cards-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.entity-card { padding:19px; }
.entity-card__head { display:flex; justify-content:space-between; gap:12px; }
.entity-card__title { min-width:0; }
.entity-card__title strong { display:block; font-size:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.entity-card__title span { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.entity-card__amounts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.entity-card__amounts div { padding:11px; background:var(--surface-2); border-radius:11px; }
.entity-card__amounts span { display:block; color:var(--muted); font-size:10px; }
.entity-card__amounts strong { display:block; margin-top:4px; font-size:13px; }
.entity-card__foot { margin-top:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.entity-actions { display:flex; flex-wrap:wrap; gap:7px; }

.analysis-grid { display:grid; grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr); gap:16px; }
.analysis-donut-card { min-height:420px; display:grid; place-items:center; }
.big-donut { width:245px; height:245px; border-radius:50%; background:conic-gradient(var(--segments, var(--surface-3) 0 100%)); position:relative; }
.big-donut::after { content:""; position:absolute; inset:50px; border-radius:50%; background:var(--surface); }
.big-donut__center { position:absolute; z-index:1; inset:0; display:grid; place-content:center; text-align:center; }
.big-donut__center strong { font-size:24px; }
.big-donut__center span { color:var(--muted); font-size:12px; margin-top:4px; }
.analysis-list { display:grid; gap:12px; }
.analysis-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.analysis-row__head { display:flex; justify-content:space-between; gap:12px; font-size:12px; }
.analysis-row__head span { color:var(--muted); }
.bar { height:8px; background:var(--surface-3); border-radius:999px; overflow:hidden; margin-top:7px; }
.bar span { display:block; width:var(--width,0%); height:100%; background:var(--bar,var(--primary)); border-radius:inherit; }

.report-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.report-card { padding:24px; display:flex; gap:18px; align-items:flex-start; }
.report-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:16px; background:var(--primary-soft); color:var(--primary); }
.report-card h3 { margin:0; }
.report-card p { margin:8px 0 18px; color:var(--muted); line-height:1.55; }

.settings-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:16px; }
.settings-section { padding:21px; }
.settings-section h2 { margin:0 0 5px; font-size:16px; }
.settings-section > p { margin:0 0 20px; color:var(--muted); font-size:13px; }
.settings-row { padding:15px 0; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.settings-row:first-of-type { border-top:0; }
.settings-row__main { min-width:0; }
.settings-row__main strong { display:block; font-size:13px; }
.settings-row__main span { display:block; color:var(--muted); margin-top:4px; font-size:11px; }
.status-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--success); box-shadow:0 0 0 4px var(--success-soft); margin-right:8px; }

.empty-state { min-height:220px; display:grid; place-items:center; padding:32px; text-align:center; }
.empty-state__icon { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:var(--primary-soft); color:var(--primary); margin:0 auto 14px; }
.empty-state h3 { margin:0; }
.empty-state p { margin:8px auto 18px; max-width:420px; color:var(--muted); line-height:1.55; }

.profile-menu { position:fixed; z-index:90; width:250px; background:var(--surface); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow-lg); padding:8px; }
.profile-menu__head { padding:12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.profile-menu__head strong { display:block; }
.profile-menu__head span { display:block; margin-top:4px; color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; }
.profile-menu button { width:100%; border:0; background:transparent; padding:11px; border-radius:9px; display:flex; align-items:center; gap:10px; text-align:left; font-weight:700; cursor:pointer; }
.profile-menu button:hover { background:var(--surface-2); }
.profile-menu button.is-danger { color:var(--danger); }

.modal-backdrop { position:fixed; z-index:100; inset:0; background:rgba(8,17,38,.55); display:grid; place-items:center; padding:20px; backdrop-filter:blur(5px); }
.modal { width:min(680px,100%); max-height:min(86vh,820px); display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden; }
.modal--sm { width:min(460px,100%); }
.modal-head { padding:18px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.modal-head h2 { margin:0; font-size:18px; }
.modal-body { padding:20px; overflow:auto; }
.modal-foot { padding:14px 20px; display:flex; justify-content:flex-end; gap:9px; border-top:1px solid var(--line); background:var(--surface-2); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.form-grid .full { grid-column:1/-1; }
.ai-helper { grid-column:1/-1; padding:14px; border:1px solid rgba(91,111,248,.24); background:var(--primary-soft); border-radius:13px; }
.ai-helper__row { display:flex; gap:8px; align-items:flex-end; }
.ai-helper .field { flex:1; }
.ai-helper small { display:block; margin-top:8px; color:var(--muted); }
.confirm-copy { text-align:center; padding:8px 4px; }
.confirm-copy__icon { width:64px; height:64px; margin:0 auto 16px; display:grid; place-items:center; border-radius:50%; background:var(--danger-soft); color:var(--danger); }
.confirm-copy h3 { margin:0; }
.confirm-copy p { margin:10px 0 0; color:var(--muted); line-height:1.6; }
body.is-locked { overflow:hidden; }

.chat-backdrop { position:fixed; z-index:95; inset:0; background:rgba(8,17,38,.34); }
.chat-drawer { position:fixed; z-index:96; top:0; right:0; width:min(440px,100%); height:100dvh; background:var(--surface); border-left:1px solid var(--line); box-shadow:var(--shadow-lg); display:grid; grid-template-rows:auto 1fr auto; }
.chat-head { padding:18px 18px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }
.chat-identity { display:flex; align-items:center; gap:11px; }
.chat-avatar { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,var(--primary-soft),var(--violet-soft)); color:var(--primary); }
.chat-identity strong { display:block; }
.chat-identity span { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.chat-messages { padding:18px; overflow:auto; display:flex; flex-direction:column; gap:12px; }
.chat-welcome { padding:16px; border-radius:15px; background:var(--primary-soft); }
.chat-welcome strong { display:block; }
.chat-welcome p { margin:7px 0 0; color:var(--muted); line-height:1.55; font-size:13px; }
.chat-bubble { max-width:86%; padding:12px 14px; border-radius:15px; line-height:1.55; font-size:13px; white-space:pre-wrap; word-break:break-word; }
.chat-bubble.is-user { align-self:flex-end; background:var(--primary); color:white; border-bottom-right-radius:5px; }
.chat-bubble.is-nubo-ai { align-self:flex-start; background:var(--surface-2); border:1px solid var(--line); border-bottom-left-radius:5px; }
.chat-bubble.is-loading { color:var(--muted); }
.chat-form { padding:14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; border-top:1px solid var(--line); background:var(--surface); }
.chat-form textarea { min-height:46px; max-height:130px; resize:none; }

.toast-root { position:fixed; z-index:150; right:20px; bottom:20px; display:grid; gap:10px; width:min(360px,calc(100% - 40px)); }
.toast { padding:13px 15px; border-radius:12px; background:var(--text); color:var(--surface); box-shadow:var(--shadow-md); font-size:13px; font-weight:650; animation:toastIn .2s ease both; }
.toast.is-error { background:var(--danger); color:#fff; }
.toast.is-success { background:var(--success); color:#fff; }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } }

.mobile-nav { display:none; }
.mobile-menu-button { display:none; }

@media (max-width: 1320px) {
  .header-inner { gap:18px; padding-inline:20px; }
  .nav-link { padding-inline:10px; font-size:13px; }
  .nav-link .icon { display:none; }
  .profile-meta { display:none; }
  .main-content,
.toolbar-inner { padding-inline:20px; }
  .kpi-item { padding:18px; grid-template-columns:44px minmax(0,1fr); }
  .kpi-icon { width:44px; height:44px; }
  .dashboard-bottom { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 1040px) {
  :root { --header-h: 70px; }
  .desktop-nav { display:none; }
  .mobile-menu-button { display:inline-flex; }
  .header-inner { grid-template-columns:auto 1fr auto; }
  .header-actions { justify-self:end; }
  .toolbar-inner { justify-content:stretch; }
  .global-search { width:auto; flex:1; }
  .kpi-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi-item { border-bottom:1px solid var(--line); }
  .kpi-item:nth-child(2n) { border-right:0; }
  .kpi-item:last-child { grid-column:1/-1; border-bottom:0; }
  .dashboard-top { grid-template-columns:1fr; }
  .cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .analysis-grid,
.settings-grid { grid-template-columns:1fr; }
  .auth-page { grid-template-columns:1fr; }
  .auth-visual { display:none; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; --toolbar-h: auto; }
  body { padding-bottom:74px; }
  .app-header { height:var(--header-h); }
  .header-inner { padding-inline:16px; }
  .header-brand span:last-child { font-size:20px; }
  .header-brand .brand-mark { width:38px; height:38px; }
  .mobile-menu-button,
.header-actions .header-search-toggle,
.header-actions .notification-btn { display:none; }
  .profile-button { padding:0; }
  .app-toolbar { min-height:0; }
  .toolbar-inner { padding:10px 14px; gap:8px; }
  .global-search { display:none; }
  .toolbar-inner .btn--secondary { display:none; }
  .toolbar-inner .btn--primary { flex:1; }
  .main-content { padding:18px 14px 28px; }
  .page-head { align-items:center; margin-bottom:14px; }
  .page-head h1 { font-size:23px; }
  .page-head p { font-size:12px; }
  .page-actions .btn:not(.keep-mobile) { display:none; }
  .kpi-strip { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:14px; scrollbar-width:none; }
  .kpi-strip::-webkit-scrollbar { display:none; }
  .kpi-item { flex:0 0 82%; grid-template-columns:48px minmax(0,1fr); scroll-snap-align:start; border-bottom:0; border-right:1px solid var(--line) !important; }
  .kpi-item:last-child { grid-column:auto; border-right:0 !important; }
  .dashboard-bottom { grid-template-columns:1fr; }
  .chart-card { min-height:300px; }
  .chart-wrap { height:210px; }
  .category-layout { grid-template-columns:120px minmax(0,1fr); }
  .category-donut { width:118px; height:118px; }
  .category-donut::after { inset:25px; }
  .summary-grid,
.cards-grid,
.report-grid { grid-template-columns:1fr; }
  .summary-tile { padding:15px 17px; }
  .filters-bar select { flex:1; min-width:130px; }
  .table-card { border-radius:14px; }
  table { min-width:700px; }
  .form-grid,
.field-row { grid-template-columns:1fr; }
  .form-grid .full { grid-column:auto; }
  .modal-backdrop { align-items:end; padding:0; }
  .modal,
.modal--sm { width:100%; max-height:92dvh; border-radius:20px 20px 0 0; border-bottom:0; }
  .modal-body { padding:17px 16px; }
  .modal-head,
.modal-foot { padding-inline:16px; }
  .chat-drawer { width:100%; }
  .auth-panel { padding:22px; }
  .auth-card h2 { font-size:29px; }
  .mobile-nav { position:fixed; z-index:80; left:0; right:0; bottom:0; height:calc(64px + env(safe-area-inset-bottom)); padding:6px 8px env(safe-area-inset-bottom); display:grid; grid-template-columns:repeat(5,1fr); background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 30px rgba(30,47,93,.08); }
  .mobile-nav button { min-width:0; border:0; background:transparent; color:var(--muted); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:9px; font-weight:750; cursor:pointer; }
  .mobile-nav button.is-active { color:var(--primary); }
  .mobile-nav .mobile-add { width:48px; height:48px; justify-self:center; align-self:center; border-radius:16px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-strong)); transform:translateY(-13px); box-shadow:0 10px 24px rgba(91,111,248,.28); }
  .mobile-nav .mobile-add span { display:none; }
  .toast-root { bottom:82px; left:14px; right:14px; width:auto; }
}

@media (max-width: 430px) {
  
  .kpi-item { flex-basis:88%; }
  .category-layout { grid-template-columns:1fr; justify-items:center; }
  .category-legend { width:100%; }
  .analysis-donut-card { min-height:350px; }
  .big-donut { width:210px; height:210px; }
  .big-donut::after { inset:43px; }
}


/* NUBO_REDESIGN_HEADER_TOOLS_V1_START */

.app-toolbar {
  display: none !important;
}

.header-actions {
  position: relative;
  gap: 5px;
}

.header-tool {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.header-tool:hover {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--primary);
}

.header-tool:active {
  transform: scale(0.96);
}

.header-tool .icon {
  width: 20px;
  height: 20px;
}

.header-search-wrap,
.header-quick-wrap {
  position: relative;
}

.header-search-panel {
  position: absolute;
  z-index: 100;
  top: calc(100% + 13px);
  right: 0;
  width: min(420px, calc(100vw - 32px));
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.header-search-panel[hidden] {
  display: none !important;
}

.header-search-panel .global-search {
  width: 100%;
}

.header-search-panel .global-search input {
  width: 100%;
  height: 46px;
  padding-right: 14px;
  background: var(--surface-2);
}

.header-search-panel .search-results {
  top: calc(100% + 9px);
}

.header-quick-wrap .quick-menu {
  top: calc(100% + 13px);
}

.header-nubo-ai-tool {
  color: var(--primary);
}

.header-nubo-ai-tool:hover {
  background: var(--primary-soft);
  border-color: transparent;
}

@media (max-width: 1320px) {
  .header-actions {
    gap: 3px;
  }

  .header-tool {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}

@media (max-width: 760px) {
  .header-quick-wrap,
.header-nubo-ai-tool {
    display: none;
  }

  .header-search-panel {
    position: fixed;
    top: 72px;
    right: 14px;
    left: 14px;
    width: auto;
  }

  .header-actions {
    gap: 2px;
  }

  .header-tool {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
  }
}

/* NUBO_REDESIGN_HEADER_TOOLS_V1_END */


/* NUBO_REDESIGN_KPI_V1_START */

.kpi-strip {
  min-height: 142px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow:
    0 8px 24px
    rgba(25, 39, 75, 0.045);
}

.kpi-item {
  min-width: 0;
  padding: 27px 25px;
  display: grid;
  grid-template-columns:
    62px
    minmax(0, 1fr);
  align-items: center;
  gap: 17px;
  border-right:
    1px solid var(--line);
}

.kpi-item:last-child {
  border-right: 0;
}

.kpi-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
}

.kpi-icon .icon {
  width: 27px;
  height: 27px;
}

.kpi-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.kpi-value {
  margin-top: 7px;
  color: var(--text);
  font-size:
    clamp(
      22px,
      1.55vw,
      29px
    );
  font-weight: 820;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.kpi-foot {
  min-height: 18px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 550;
  line-height: 1.25;
}

.kpi-foot.is-positive {
  color: var(--success);
}

.kpi-foot.is-negative {
  color: var(--danger);
}

.kpi-foot.is-neutral {
  color: var(--muted);
}

.kpi-trend-arrow {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 850;
}

.kpi-dot {
  display: none;
}


@media (max-width: 1240px) {
  .kpi-item {
    padding: 23px 18px;
    grid-template-columns:
      52px
      minmax(0, 1fr);
    gap: 13px;
  }

  .kpi-icon {
    width: 52px;
    height: 52px;
  }

  .kpi-value {
    font-size:
      clamp(
        19px,
        1.55vw,
        25px
      );
  }
}


@media (max-width: 900px) {
  .kpi-strip {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .kpi-item {
    border-bottom:
      1px solid var(--line);
  }

  .kpi-item:nth-child(2n) {
    border-right: 0;
  }

  .kpi-item:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }
}


@media (max-width: 620px) {
  .kpi-strip {
    min-height: 0;
    display: flex;
    overflow-x: auto;
    scroll-snap-type:
      x mandatory;
    scrollbar-width: none;
  }

  .kpi-strip::-webkit-scrollbar {
    display: none;
  }

  .kpi-item {
    flex: 0 0 86%;
    padding: 22px 20px;
    grid-template-columns:
      54px
      minmax(0, 1fr);
    border-right:
      1px solid var(--line)
      !important;
    border-bottom: 0;
    scroll-snap-align: start;
  }

  .kpi-item:last-child {
    grid-column: auto;
    border-right: 0 !important;
  }
}

/* NUBO_REDESIGN_KPI_V1_END */

/* NUBO_FLOATING_HEADER_V1_START */

/*
 * Encabezado flotante inspirado en la referencia:
 * una sola barra, navegación en cápsulas y acciones compactas.
 */

.app-header {
  position: sticky;
  z-index: 80;
  top: 0;
  height: auto;
  padding: 18px 24px 0;
  border: 0;
  background: transparent;
}

.header-inner {
  width: 100%;
  max-width: 1600px;
  min-height: 80px;
  height: auto;
  margin: 0 auto;
  padding: 14px 18px;

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

  border: 1px solid
    color-mix(
      in srgb,
      var(--line) 75%,
      transparent
    );

  border-radius: 26px;

  background:
    color-mix(
      in srgb,
      var(--surface) 92%,
      transparent
    );

  box-shadow:
    0 18px 42px
      rgba(25, 39, 75, 0.07),
    0 4px 14px
      rgba(25, 39, 75, 0.035);

  -webkit-backdrop-filter:
    blur(16px);

  backdrop-filter:
    blur(16px);
}


/* Marca */

.header-brand {
  gap: 13px;
  padding: 0 4px;
  font-size: 22px;
  letter-spacing: -0.04em;
}

.header-brand .brand-mark {
  width: 44px;
  height: 44px;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #9ca8ff 0%,
      #806df5 48%,
      #6177ff 100%
    );

  box-shadow:
    0 10px 20px
      rgba(119, 103, 240, 0.24);
}


/* Navegación central */

.desktop-nav {
  height: auto;
  justify-content: center;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

.nav-link {
  position: relative;

  min-height: 46px;
  padding: 0 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--line) 82%,
      transparent
    );

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--surface) 88%,
      transparent
    );

  color: var(--muted);

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

  box-shadow:
    0 3px 10px
      rgba(25, 39, 75, 0.02);

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

.nav-link .icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 18px;
}

.nav-link::after {
  display: none;
}

.nav-link:hover {
  color: var(--text);

  border-color:
    color-mix(
      in srgb,
      var(--primary) 20%,
      var(--line)
    );

  transform:
    translateY(-1px);

  box-shadow:
    0 8px 18px
      rgba(25, 39, 75, 0.055);
}

.nav-link.is-active {
  border-color: transparent;

  background:
    linear-gradient(
      135deg,
      #776af0 0%,
      #925fff 100%
    );

  color: #ffffff;

  box-shadow:
    0 10px 22px
      rgba(123, 101, 241, 0.25);
}

.nav-link.is-active:hover {
  color: #ffffff;
}


/* Acciones derechas */

.header-actions {
  position: relative;

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

.header-tool,
.header-actions > .btn--icon {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;

  border:
    1px solid transparent;

  border-radius: 50%;

  background: transparent;
  color: var(--text);

  box-shadow: none;
}

.header-tool:hover,
.header-actions > .btn--icon:hover {
  border-color:
    color-mix(
      in srgb,
      var(--line) 86%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--surface-2) 88%,
      transparent
    );

  color: var(--primary);

  box-shadow:
    0 7px 16px
      rgba(25, 39, 75, 0.05);

  transform:
    translateY(-1px);
}

.header-nubo-ai-tool {
  color: #7868ef;
}


/* Perfil */

.profile-button {
  min-width: 0;
  padding: 4px 6px 4px 5px;
  gap: 10px;

  border:
    1px solid transparent;

  border-radius: 16px;

  background: transparent;
}

.profile-button:hover {
  border-color:
    color-mix(
      in srgb,
      var(--line) 82%,
      transparent
    );

  background:
    color-mix(
      in srgb,
      var(--surface-2) 84%,
      transparent
    );
}

.avatar {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;

  background:
    linear-gradient(
      135deg,
      #ece9ff 0%,
      #ded9ff 100%
    );

  color: #7565e9;

  box-shadow:
    inset 0 0 0 1px
      rgba(117, 101, 233, 0.06);
}

.profile-meta strong {
  max-width: 115px;
  font-size: 13px;
}

.profile-meta span {
  margin-top: 3px;
  font-size: 10.5px;
}


/* Panel de búsqueda */

.header-search-panel {
  top: calc(100% + 18px);

  width:
    min(
      420px,
      calc(100vw - 40px)
    );

  padding: 9px;

  border-radius: 18px;

  box-shadow:
    0 18px 40px
      rgba(25, 39, 75, 0.11);
}


/* Ajuste del contenido bajo el header */

.main-content {
  padding-top: 24px;
}


/* Escritorio intermedio */

@media (max-width: 1380px) {
  .header-inner {
    grid-template-columns:
      150px
      minmax(0, 1fr)
      auto;

    gap: 14px;
  }

  .desktop-nav {
    gap: 8px;
  }

  .nav-link {
    min-height: 43px;
    padding: 0 15px;
    font-size: 12px;
  }

  .nav-link .icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .header-tool,
.header-actions > .btn--icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}


/* Tablet */

@media (max-width: 1080px) {
  .app-header {
    padding:
      14px
      16px
      0;
  }

  .header-inner {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;

    min-height: 72px;

    padding: 11px 14px;

    border-radius: 22px;
  }

  .header-brand {
    font-size: 20px;
  }

  .desktop-nav {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .desktop-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    flex: 0 0 auto;
  }

  .profile-meta {
    display: none;
  }
}


/* Móvil */

@media (max-width: 760px) {
  .app-header {
    padding:
      10px
      12px
      0;
  }

  .header-inner {
    min-height: 64px;

    grid-template-columns:
      auto
      1fr;

    padding: 9px 11px;

    border-radius: 19px;
  }

  .header-brand .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .desktop-nav {
    display: none;
  }

  .header-actions {
    justify-self: end;
  }

  .header-search-wrap,
.header-quick-wrap,
.header-nubo-ai-tool {
    display: none;
  }

  .header-tool,
.header-actions > .btn--icon {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
  }

  .avatar {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
  }

  .profile-button {
    padding: 2px;
  }

  .main-content {
    padding-top: 18px;
  }
}

/* NUBO_FLOATING_HEADER_V1_END */

/* NUBO_GREEN_PALETTE_V1_START */

/*
 * Paleta principal:
 *
 * 50  #EFFEF5
 * 100 #DAFEE9
 * 200 #B6FCD3
 * 300 #7EF7B2
 * 400 #3FE988
 * 500 #18E772
 * 600 #0BAE52
 * 700 #0D8843
 * 800 #106B39
 * 900 #0F5831
 * 950 #023119
 */

:root {
  color-scheme: light;

  --green-50: #EFFEF5;
  --green-100: #DAFEE9;
  --green-200: #B6FCD3;
  --green-300: #7EF7B2;
  --green-400: #3FE988;
  --green-500: #18E772;
  --green-600: #0BAE52;
  --green-700: #0D8843;
  --green-800: #106B39;
  --green-900: #0F5831;
  --green-950: #023119;

  --primary: #0BAE52;
  --primary-hover: #0D8843;
  --primary-strong: #0D8843;
  --primary-soft: #DAFEE9;

  --success: #0BAE52;
  --success-soft: #DAFEE9;

  --violet: #0D8843;
  --violet-soft: #EFFEF5;

  --sky: #18E772;
  --sky-soft: #EFFEF5;

  --text: #023119;
  --muted: #527061;
  --soft: #799589;

  --surface: #FFFFFF;
  --surface-2: #F6FCF8;
  --surface-3: #EFFEF5;

  --line: rgba(15, 88, 49, 0.11);

  --shadow-sm:
    0 4px 14px rgba(2, 49, 25, 0.035);

  --shadow-lg:
    0 22px 50px rgba(2, 49, 25, 0.10);

  accent-color: #0BAE52;
}


/* Fondo global */

html,
body {
  background:
    linear-gradient(
      180deg,
      #FAFDFB 0%,
      #F3FAF6 100%
    );

  color: var(--text);
}


/* Selección de texto */

::selection {
  background: #B6FCD3;
  color: #023119;
}


/* Logo principal */

.header-brand .brand-mark {
  background:
    linear-gradient(
      135deg,
      #3FE988 0%,
      #18E772 42%,
      #0BAE52 100%
    );

  box-shadow:
    0 10px 22px
      rgba(11, 174, 82, 0.24);
}


/* Navegación activa */

.nav-link.is-active {
  border-color: transparent;

  background:
    linear-gradient(
      135deg,
      #18E772 0%,
      #0BAE52 54%,
      #0D8843 100%
    );

  color: #FFFFFF;

  box-shadow:
    0 10px 23px
      rgba(11, 174, 82, 0.24);
}

.nav-link.is-active:hover {
  color: #FFFFFF;

  box-shadow:
    0 12px 27px
      rgba(11, 174, 82, 0.30);
}


/* Acciones del header */

.header-tool:hover,
.header-actions > .btn--icon:hover {
  border-color:
    rgba(11, 174, 82, 0.15);

  background: #EFFEF5;
  color: #0D8843;

  box-shadow:
    0 7px 17px
      rgba(2, 49, 25, 0.06);
}

.header-nubo-ai-tool {
  color: #0BAE52;
}


/* Perfil */

.avatar {
  background:
    linear-gradient(
      135deg,
      #EFFEF5,
      #DAFEE9
    );

  color: #0D8843;

  box-shadow:
    inset 0 0 0 1px
      rgba(11, 174, 82, 0.08);
}


/* Botones */

.btn--primary,
.finance-hero__button {
  border-color: transparent;

  background:
    linear-gradient(
      135deg,
      #18E772 0%,
      #0BAE52 58%,
      #0D8843 100%
    );

  color: #FFFFFF;

  box-shadow:
    0 10px 22px
      rgba(11, 174, 82, 0.22);
}

.btn--primary:hover,
.finance-hero__button:hover {
  background:
    linear-gradient(
      135deg,
      #0BAE52,
      #0D8843
    );

  box-shadow:
    0 13px 27px
      rgba(11, 174, 82, 0.29);
}

.btn--secondary {
  border-color:
    rgba(11, 174, 82, 0.15);

  background: #EFFEF5;
  color: #0D8843;
}

.btn--success {
  background: #0BAE52;
  color: #FFFFFF;
}


/* Enlaces y controles activos */

.card-link,
a:not(.btn) {
  color: #0D8843;
}

.segmented button.is-active {
  background: #FFFFFF;
  color: #0D8843;

  box-shadow:
    0 5px 13px
      rgba(2, 49, 25, 0.07);
}

.action-btn:hover {
  border-color: #0BAE52;
  color: #0BAE52;
}


/* Tarjetas */

.card,
.finance-metric,
.filters-bar,
.table-card {
  border-color:
    rgba(15, 88, 49, 0.10);

  box-shadow:
    0 10px 27px
      rgba(2, 49, 25, 0.04);
}


/* Hero financiero */

.finance-hero {
  border-color:
    rgba(11, 174, 82, 0.10);

  background:
    linear-gradient(
      112deg,
      #FFFFFF 0%,
      #F8FDF9 40%,
      #EFFEF5 100%
    );

  box-shadow:
    0 18px 44px
      rgba(2, 49, 25, 0.07);
}

.finance-hero::before {
  background:
    radial-gradient(
      circle,
      rgba(126, 247, 178, 0.18),
      transparent 70%
    );
}

.finance-hero::after {
  background:
    radial-gradient(
      circle,
      rgba(24, 231, 114, 0.14),
      transparent 69%
    );
}

.finance-hero__trend.is-positive {
  color: #0D8843;
}

.finance-hero__chart stop {
  stop-color: #18E772 !important;
}

.finance-hero__chart polyline {
  stroke: #0D8843 !important;
}

.finance-hero__chart circle {
  stroke: #0D8843 !important;
}


/* Patrimonio y anillo */

.finance-wallet__ring {
  background:
    conic-gradient(
      #18E772 0 72%,
      #DAFEE9 72% 100%
    );

  box-shadow:
    0 13px 31px
      rgba(11, 174, 82, 0.13);
}

.finance-wallet__ring::before {
  background:
    rgba(255, 255, 255, 0.90);

  box-shadow:
    inset 0 0 0 1px
      rgba(11, 174, 82, 0.08);
}

.finance-wallet__ring span {
  background:
    linear-gradient(
      145deg,
      #18E772,
      #0BAE52 54%,
      #0D8843
    );

  box-shadow:
    0 10px 23px
      rgba(11, 174, 82, 0.23);
}


/* Iconos de indicadores */

.kpi-icon,
.finance-metric__icon,
.summary-tile__icon,
.report-icon,
.cell-main__icon,
.mini-icon {
  background: #EFFEF5;
  color: #0D8843;
}

.kpi-icon.is-income,
.finance-metric__icon.is-income,
.mini-icon.is-income,
.cell-main__icon.is-income {
  background: #DAFEE9;
  color: #0BAE52;
}

.kpi-icon.is-saving,
.kpi-icon.is-activity,
.finance-metric__icon.is-saving,
.finance-metric__icon.is-goals {
  background: #EFFEF5;
  color: #0D8843;
}


/* Barras de progreso */

.progress {
  background: #EFFEF5;
}

.progress span {
  background:
    linear-gradient(
      90deg,
      #3FE988,
      #18E772,
      #0BAE52
    );
}


/* Gráficos */

.chart-wrap polyline:first-of-type {
  stroke: #0BAE52;
}

.summary-ring {
  background:
    conic-gradient(
      #0BAE52 var(--ring, 0%),
      #EFFEF5 0
    );
}

.summary-ring__content strong {
  color: #0D8843;
}


/* Insights */

.insight {
  background: #EFFEF5;
  color: #0D8843;
}

.insight.is-trend {
  background: #DAFEE9;
  color: #0BAE52;
}


/* Estados y badges */

.badge.is-success {
  background: #DAFEE9;
  color: #0D8843;
}

.status-dot {
  background: #18E772;

  box-shadow:
    0 0 0 4px
      rgba(24, 231, 114, 0.13);
}


/* Campos */

input:focus,
select:focus,
textarea:focus {
  border-color: #0BAE52;

  box-shadow:
    0 0 0 4px
      rgba(11, 174, 82, 0.10);
}


/* Buscador flotante */

.header-search-panel {
  border-color:
    rgba(11, 174, 82, 0.13);

  box-shadow:
    0 20px 44px
      rgba(2, 49, 25, 0.12);
}


/* Scrollbar */

* {
  scrollbar-color:
    #B6FCD3
    transparent;
}

*::-webkit-scrollbar-thumb {
  background: #B6FCD3;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #7EF7B2;
}


/* NUBO_GREEN_PALETTE_V1_END */


/* NUBO_FINVIA_DASHBOARD_V2_START */

/*
  Todo el rediseño queda aislado dentro de .finvia-v2.
  La barra superior actual de Nubo no se modifica.
*/

.finvia-v2 {
  width: 100%;
  margin-top: 18px;

  color: #172a4c;
}


/* ========================================================
   TARJETAS GENERALES
   ======================================================== */

.finvia-v2 > .card,
.finvia-v2 .finvia-v2-main > .card,
.finvia-v2 .finvia-v2-bottom > .card {
  border: 1px solid #e4e9f2;
  border-radius: 17px;

  background: #ffffff;

  box-shadow:
    0 8px 25px
    rgba(39, 57, 91, .045);
}

.finvia-v2-card-head {
  min-height: 58px;

  padding: 19px 22px 13px;

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

.finvia-v2-card-head h2,
.finvia-v2-card-head h3 {
  margin: 0;

  color: #15294c;

  font-size: 14px;
  font-weight: 790;
  line-height: 1.25;
}

.finvia-v2-card-head h2 {
  font-size: 15px;
}

.finvia-v2-link {
  flex: 0 0 auto;

  padding: 0;

  border: 0;

  background: transparent;

  color: #4e72f2;

  font-size: 11px;
  font-weight: 730;

  cursor: pointer;
}

.finvia-v2-link:hover {
  color: #3159e4;
}


/* ========================================================
   FILA SUPERIOR DE CINCO INDICADORES
   ======================================================== */

.finvia-v2-kpis {
  margin-bottom: 16px;

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

  overflow: hidden;

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

  background: #ffffff;

  box-shadow:
    0 8px 26px
    rgba(36, 53, 84, .045);
}

.finvia-v2-kpi {
  position: relative;

  min-width: 0;
  min-height: 112px;

  padding: 20px 21px;

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

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

.finvia-v2-kpi + .finvia-v2-kpi::before {
  content: "";

  position: absolute;

  top: 25px;
  bottom: 25px;
  left: 0;

  width: 1px;

  background: #e3e8f0;
}

.finvia-v2-kpi__icon {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border-radius: 50%;
}

.finvia-v2-kpi__icon .icon {
  width: 25px;
  height: 25px;
}

.finvia-v2-kpi__icon.is-blue {
  background: #edf2ff;
  color: #5274f5;
}

.finvia-v2-kpi__icon.is-green {
  background: #eaf8f3;
  color: #10a377;
}

.finvia-v2-kpi__icon.is-orange {
  background: #fff0e9;
  color: #f4794f;
}

.finvia-v2-kpi__icon.is-mint {
  background: #eaf8f5;
  color: #219f8b;
}

.finvia-v2-kpi__icon.is-indigo {
  background: #eef1ff;
  color: #607ef5;
}

.finvia-v2-kpi__copy {
  min-width: 0;
}

.finvia-v2-kpi__label {
  display: block;

  overflow: hidden;

  color: #627087;

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

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

.finvia-v2-kpi__value {
  display: block;

  margin-top: 7px;

  overflow: hidden;

  color: #172f59;

  font-size:
    clamp(
      18px,
      1.55vw,
      23px
    );

  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -.025em;

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

.finvia-v2-kpi__trend {
  margin-top: 8px;

  display: flex;
  align-items: center;
  gap: 4px;

  overflow: hidden;

  color: #7b8798;

  font-size: 9.5px;
  font-weight: 580;

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

.finvia-v2-kpi__trend b {
  color: #13a77a;
  font-weight: 800;
}

.finvia-v2-kpi__trend.is-negative b,
.finvia-v2-kpi__trend.is-negative {
  color: #ef7653;
}

.finvia-v2-kpi__trend.is-positive b {
  color: #13a77a;
}


/* ========================================================
   BLOQUE PRINCIPAL
   ======================================================== */

.finvia-v2-main {
margin-bottom: 20px;

  display: grid;
  grid-template-columns:
    minmax(0, 1.72fr)
    minmax(410px, .95fr);

  align-items: stretch;
  gap: 20px;
}

.finvia-v2-spending,
.finvia-v2-budget {
  min-width: 0;
  min-height: 320px;

  overflow: hidden;
}


/* Selector de periodo */

.finvia-v2-periods {
  display: inline-flex;

  overflow: hidden;

  border: 1px solid #e5e9f1;
  border-radius: 5px;

  background: #ffffff;
}

.finvia-v2-periods button {
  min-width: 52px;
  min-height: 27px;

  padding: 0 12px;

  border: 0;
  border-right: 1px solid #e5e9f1;

  background: transparent;

  color: #67758b;

  font-size: 10px;
  font-weight: 650;

  cursor: pointer;
}

.finvia-v2-periods button:last-child {
  border-right: 0;
}

.finvia-v2-periods button.is-active {
  background: #edf2ff;
  color: #4169ef;

  box-shadow:
    inset 0 0 0 1px
    #bfd0ff;
}


/* ========================================================
   GRÁFICO AZUL
   ======================================================== */

.finvia-v2-spending__body {
min-height: 282px;

  padding:
    12px
    28px
    27px;

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

  align-items: stretch;
  gap: 30px;
}

.finvia-v2-spending__summary {
min-width: 0;

  padding:
    8px
    4px
    4px
    0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.finvia-v2-month-selector {
min-height: 30px;

  padding: 0;

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

  border: 0;

  background: transparent;

  color: #40506a;

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

  cursor: default;
}

.finvia-v2-month-selector span {
  font-size: 12px;
}

.finvia-v2-spending__label {
margin-top: 31px;

  color: #6b788e;

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

.finvia-v2-spending__amount {
margin-top: 10px;

  color: #172c54;

  font-size: 27px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: -.035em;
}

.finvia-v2-spending__trend {
min-height: 25px;

  margin-top: 13px;
  padding: 5px 9px;

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

  border-radius: 999px;

  background: #fff2ee;
  color: #d96c53;

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

.finvia-v2-spending__trend b {
  font-weight: 800;
}

.finvia-v2-chart-legend {
margin-top: auto;
  padding-top: 31px;

  display: grid;
  gap: 14px;
}

.finvia-v2-chart-legend span {
  display: flex;
  align-items: center;
  gap: 9px;

  color: #58667d;

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

.finvia-v2-chart-legend i {
  width: 28px;
  height: 3px;

  display: block;

  border-radius: 999px;
}

.finvia-v2-chart-legend i.is-current {
  background: #5f82f8;
}

.finvia-v2-chart-legend i.is-previous {
  height: 0;

  border-top:
    3px dotted
    #86a3ff;

  border-radius: 0;

  background: transparent;
}

.finvia-v2-chart-wrap {
min-width: 0;
  height: 265px;

  padding:
    9px
    0
    0;

  border-radius: 12px;

  overflow: visible;
}

.finvia-v2-chart {
  width: 100%;
  height: 100%;

  overflow: visible;
}

.finvia-v2-chart__grid line {
  stroke: #dde4ef;
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.finvia-v2-chart__grid text,
.finvia-v2-chart__dates text {
  fill: #768398;

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

.finvia-v2-chart__area {
  fill:
    rgba(91, 126, 247, .055);
}

.finvia-v2-chart__current {
  stroke: #5e82f7;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.finvia-v2-chart__previous {
  stroke: #88a5ff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3 7;
}


/* ========================================================
   RESUMEN DEL PRESUPUESTO
   ======================================================== */

.finvia-v2-budget__body {
padding:
    12px
    27px
    24px;
}

.finvia-v2-budget__overview {
min-height: 207px;

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

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

.finvia-v2-budget-ring {
position: relative;

  width: 166px;
  height: 166px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      #5cc2a8
      0 var(--budget),
      #e8ecf2
      var(--budget) 100%
    );
}

.finvia-v2-budget-ring::before {
  content: "";

  position: absolute;
  inset: 16px;

  border-radius: 50%;

  background: #ffffff;
}

.finvia-v2-budget-ring > div {
  position: relative;
  z-index: 1;

  width: 88px;

  display: grid;
  place-items: center;

  text-align: center;
}

.finvia-v2-budget-ring strong {
  color: #14977b;

  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.finvia-v2-budget-ring span {
  margin-top: 6px;

  color: #66738a;

  font-size: 9px;
  line-height: 1.35;
}

.finvia-v2-budget__stats {
  min-width: 0;

  display: grid;
}

.finvia-v2-budget__stats > div {
min-height: 51px;

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

  border-bottom:
    1px solid #e7ebf1;
}

.finvia-v2-budget__stats > div:last-child {
  border-bottom: 0;
}

.finvia-v2-budget__stats span {
  color: #536078;

  font-size: 10.5px;
}

.finvia-v2-budget__stats strong {
  color: #1c3157;

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

.finvia-v2-budget__stats strong.is-expense {
  color: #f27753;
}

.finvia-v2-budget__stats strong.is-income {
  color: #12a87c;
}

.finvia-v2-budget__note {
min-height: 68px;

  margin-top: 17px;
  padding: 14px 16px;

  display: grid;
  grid-template-columns:
    29px
    minmax(0, 1fr)
    17px;

  align-items: center;
  gap: 12px;

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #eef9f6,
      #f7fbfa
    );
}

.finvia-v2-budget__check {
  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  border: 2px solid #1aa583;
  border-radius: 50%;

  color: #1aa583;

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

.finvia-v2-budget__note strong {
  display: block;

  color: #148c72;

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

.finvia-v2-budget__note p {
  margin: 3px 0 0;

  color: #657287;

  font-size: 9.3px;
  line-height: 1.35;
}

.finvia-v2-budget__arrow {
  color: #159f7e;

  font-size: 24px;
  line-height: 1;
}


/* ========================================================
   FILA INFERIOR
   ======================================================== */

.finvia-v2-bottom {
  display: grid;
  grid-template-columns:
    minmax(270px, 1.15fr)
    minmax(280px, 1fr)
    minmax(265px, .92fr)
    minmax(240px, .78fr);

  gap: 16px;
}

.finvia-v2-bottom > .card {
  min-width: 0;
  min-height: 304px;

  overflow: hidden;
}


/* ========================================================
   CATEGORÍAS
   ======================================================== */

.finvia-v2-category-content {
  min-height: 235px;

  padding:
    7px
    20px
    20px;

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

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

.finvia-v2-donut {
  width: 158px;
  height: 158px;
}

.finvia-v2-donut::after {
  inset: 43px;
}

.finvia-v2-donut
.category-donut__center strong {
  color: #22375c;

  font-size: 15px;
}

.finvia-v2-donut
.category-donut__center span {
  color: #788498;

  font-size: 9px;
}

.finvia-v2-category-list {
  min-width: 0;

  display: grid;
  gap: 12px;
}

.finvia-v2-category-row {
  min-width: 0;

  display: grid;
  grid-template-columns:
    9px
    minmax(70px, 1fr)
    auto
    28px;

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

.finvia-v2-category-row i {
  width: 9px;
  height: 9px;

  border-radius: 3px;
}

.finvia-v2-category-row span {
  overflow: hidden;

  color: #4d5b73;

  font-size: 9.5px;

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

.finvia-v2-category-row strong {
  color: #273b5d;

  font-size: 9.5px;
  font-weight: 650;

  white-space: nowrap;
}

.finvia-v2-category-row small {
  color: #69768a;

  font-size: 9px;
  text-align: right;
}


/* ========================================================
   METAS
   ======================================================== */

.finvia-v2-goals {
  padding:
    6px
    13px
    16px;

  display: grid;
  gap: 9px;
}

.finvia-v2-goal {
  min-height: 67px;

  padding: 10px 12px;

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

  align-items: center;
  gap: 11px;

  border: 1px solid #e7ebf2;
  border-radius: 9px;

  background: #ffffff;
}

.finvia-v2-goal__icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;
}

.finvia-v2-goal__icon .icon {
  width: 20px;
  height: 20px;
}

.finvia-v2-goal.is-green
.finvia-v2-goal__icon {
  background: #ddf5ed;
  color: #16a17b;
}

.finvia-v2-goal.is-violet
.finvia-v2-goal__icon {
  background: #eee9ff;
  color: #8069dc;
}

.finvia-v2-goal.is-orange
.finvia-v2-goal__icon {
  background: #fff0e9;
  color: #f47b54;
}

.finvia-v2-goal__main {
  min-width: 0;
}

.finvia-v2-goal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
}

.finvia-v2-goal__head strong {
  display: block;

  overflow: hidden;

  color: #253957;

  font-size: 10px;
  font-weight: 720;

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

.finvia-v2-goal__head small {
  display: block;

  margin-top: 3px;

  color: #788498;

  font-size: 8.5px;
}

.finvia-v2-goal__head b {
  color: #1daf82;

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

.finvia-v2-goal.is-violet
.finvia-v2-goal__head b {
  color: #8b74e4;
}

.finvia-v2-goal.is-orange
.finvia-v2-goal__head b {
  color: #f27d57;
}

.finvia-v2-progress {
  position: relative;

  height: 5px;

  margin-top: 7px;

  overflow: hidden;

  border-radius: 999px;

  background: #edf0f5;
}

.finvia-v2-progress span {
  display: block;

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

  border-radius: inherit;

  background: #4fc3a1;
}

.finvia-v2-goal.is-violet
.finvia-v2-progress span {
  background: #9a85ec;
}

.finvia-v2-goal.is-orange
.finvia-v2-progress span {
  background: #f18a67;
}

.finvia-v2-goal em {
  display: block;

  margin-top: 5px;

  color: #68758a;

  font-size: 8.4px;
  font-style: normal;
  text-align: right;
}


/* ========================================================
   ACTIVIDAD RECIENTE
   ======================================================== */

.finvia-v2-recent {
  padding:
    6px
    16px
    16px;

  display: grid;
}

.finvia-v2-recent-row {
  min-height: 56px;

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

  align-items: center;
  gap: 11px;

  border-bottom: 1px solid #e9edf3;
}

.finvia-v2-recent-row:last-child {
  border-bottom: 0;
}

.finvia-v2-recent-row__icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;
}

.finvia-v2-recent-row__icon .icon {
  width: 19px;
  height: 19px;
}

.finvia-v2-recent-row__icon.is-income {
  background: #dcf4ec;
  color: #159f79;
}

.finvia-v2-recent-row__icon.is-expense {
  background: #fff0e9;
  color: #f17750;
}

.finvia-v2-recent-row > div {
  min-width: 0;
}

.finvia-v2-recent-row strong {
  display: block;

  overflow: hidden;

  color: #2b3f5e;

  font-size: 9.8px;
  font-weight: 680;

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

.finvia-v2-recent-row small {
  display: block;

  margin-top: 4px;

  color: #7a8698;

  font-size: 8.5px;
}

.finvia-v2-recent-row > b {
  font-size: 9.8px;
  font-weight: 730;

  white-space: nowrap;
}

.finvia-v2-recent-row > b.is-income {
  color: #12a77b;
}

.finvia-v2-recent-row > b.is-expense {
  color: #f17650;
}


/* ========================================================
   INSIGHTS
   ======================================================== */

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

.finvia-v2-insights-title > span {
  color: #617ff2;

  font-size: 16px;
}

.finvia-v2-insights {
  padding:
    6px
    13px
    16px;

  display: grid;
  gap: 9px;
}

.finvia-v2-insight {
  min-height: 68px;

  padding: 10px 11px;

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

  align-items: center;
  gap: 10px;

  border-radius: 7px;

  background: #eef8f5;
}

.finvia-v2-insight > span {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  color: #18a17c;
}

.finvia-v2-insight > span .icon {
  width: 22px;
  height: 22px;
}

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

  color: #168f72;

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

.finvia-v2-insight p {
  margin: 4px 0 0;

  color: #53657a;

  font-size: 8.4px;
  line-height: 1.45;
}

.finvia-v2-insight.is-tip {
  background: #fff8ed;
}

.finvia-v2-insight.is-tip > span,
.finvia-v2-insight.is-tip strong {
  color: #e9a126;
}

.finvia-v2-insight.is-trend {
  background: #f1f4ff;
}

.finvia-v2-insight.is-trend > span,
.finvia-v2-insight.is-trend strong {
  color: #5276ef;
}


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


@media (max-width: 1250px) {
  .finvia-v2-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .finvia-v2-kpi + .finvia-v2-kpi::before {
    display: none;
  }

  .finvia-v2-kpi {
    border-bottom:
      1px solid #e7ebf2;
  }

  .finvia-v2-main {
    grid-template-columns: 1fr;
  }

  .finvia-v2-bottom {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 800px) {
  .finvia-v2 {
    margin-top: 12px;
  }

  .finvia-v2-kpis {
    grid-template-columns: 1fr;
  }

  .finvia-v2-kpi {
    min-height: 96px;
  }

  .finvia-v2-spending__body {
    grid-template-columns: 1fr;
  }

  .finvia-v2-spending__summary {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 9px;
  }

  .finvia-v2-chart-legend {
    margin-top: 10px;
  }

  .finvia-v2-budget__overview {
    grid-template-columns: 1fr;
  }

  .finvia-v2-budget-ring {
    margin: 0 auto;
  }

  .finvia-v2-bottom {
    grid-template-columns: 1fr;
  }

  .finvia-v2-category-content {
    grid-template-columns: 1fr;
  }

  .finvia-v2-donut {
    margin: 0 auto;
  }
}

/* NUBO_FINVIA_DASHBOARD_V2_END */


/* NUBO_KPI_INTERACTIVE_V3_START */

.finvia-v2-kpi--interactive {
  --kpi-accent: #5274f5;
  --kpi-soft: #edf2ff;
  --kpi-hover: #f8faff;

  appearance: none;

  width: 100%;
  min-height: 132px;

  padding:
    18px
    20px;

  border: 0;

  background: #ffffff;

  color: inherit;
  font: inherit;
  text-align: left;

  cursor: pointer;

  overflow: hidden;

  transition:
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.finvia-v2-kpi--interactive.is-blue {
  --kpi-accent: #5274f5;
  --kpi-soft: #edf2ff;
  --kpi-hover: #f7f9ff;
}

.finvia-v2-kpi--interactive.is-green {
  --kpi-accent: #10a377;
  --kpi-soft: #e8f8f3;
  --kpi-hover: #f6fcf9;
}

.finvia-v2-kpi--interactive.is-orange {
  --kpi-accent: #f4794f;
  --kpi-soft: #fff0e9;
  --kpi-hover: #fff9f6;
}

.finvia-v2-kpi--interactive.is-mint {
  --kpi-accent: #219f8b;
  --kpi-soft: #e8f7f4;
  --kpi-hover: #f6fcfa;
}

.finvia-v2-kpi--interactive.is-indigo {
  --kpi-accent: #607ef5;
  --kpi-soft: #eef1ff;
  --kpi-hover: #f8f9ff;
}

.finvia-v2-kpi--interactive:hover {
  z-index: 2;

  transform: translateY(-2px);

  background:
    var(--kpi-hover);

  box-shadow:
    0 12px 25px
    rgba(36, 53, 84, .08),
    inset 0 -3px 0
    var(--kpi-accent);
}

.finvia-v2-kpi--interactive:focus-visible {
  z-index: 2;

  outline:
    2px solid
    var(--kpi-accent);

  outline-offset: -3px;

  background:
    var(--kpi-hover);
}

.finvia-v2-kpi--interactive
.finvia-v2-kpi__icon {
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.finvia-v2-kpi--interactive:hover
.finvia-v2-kpi__icon {
  transform:
    scale(1.07)
    rotate(-2deg);

  box-shadow:
    0 8px 18px
    rgba(47, 68, 109, .10);
}

.finvia-v2-kpi__label-row {
  min-width: 0;

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

.finvia-v2-kpi__arrow {
  color:
    var(--kpi-accent);

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

  opacity: 0;

  transform:
    translateX(-5px);

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.finvia-v2-kpi--interactive:hover
.finvia-v2-kpi__arrow,
.finvia-v2-kpi--interactive:focus-visible
.finvia-v2-kpi__arrow {
  opacity: 1;

  transform:
    translateX(0);
}


/* Cápsula de variación */

.finvia-v2-kpi__meta {
  margin-top: 9px;

  display: flex;
  align-items: center;
  gap: 9px;

  white-space: nowrap;
}

.finvia-v2-kpi__badge {
  min-height: 23px;

  padding: 3px 9px;

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

  border:
    1px solid
    #d8e0e8;

  border-radius: 999px;

  background: #f3f6f8;

  color: #718094;

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

.finvia-v2-kpi__badge b {
  font-size: 11px;
  font-weight: 850;
}

.finvia-v2-kpi__badge.is-positive {
  border-color: #bce8da;

  background: #e8f8f3;

  color: #149d77;
}

.finvia-v2-kpi__badge.is-negative {
  border-color: #ffc9c3;

  background: #fff0ee;

  color: #ee6658;
}

.finvia-v2-kpi__badge.is-neutral {
  border-color: #dce3e9;

  background: #f3f6f8;

  color: #748195;
}

.finvia-v2-kpi__compare {
  overflow: hidden;

  color: #6e7b91;

  font-size: 9.5px;
  font-weight: 570;

  text-overflow: ellipsis;
}


/* Estado contextual */

.finvia-v2-kpi__status {
  margin-top: 10px;

  display: flex;
  align-items: center;
  gap: 8px;

  color: #67758b;

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

.finvia-v2-kpi__status i {
  position: relative;

  width: 19px;
  height: 19px;

  flex: 0 0 19px;

  display: block;

  border-radius: 50%;

  background:
    var(--kpi-soft);
}

.finvia-v2-kpi__status i::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--kpi-accent);

  transform:
    translate(-50%, -50%);
}

.finvia-v2-kpi__status span {
  overflow: hidden;

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

@media (max-width: 1250px) {
  .finvia-v2-kpi--interactive {
    min-height: 126px;
  }
}

/* NUBO_KPI_INTERACTIVE_V3_END */


/* NUBO_MONTHLY_BARS_HEALTH_V1_START */


/* Tipografía general del dashboard */

.finvia-v2 {
  font-size: 14px;
}

.finvia-v2-kpi__label {
  font-size: 12.5px;
}

.finvia-v2-kpi__value {
  font-size: 22px;
}

.finvia-v2-kpi__badge,
.finvia-v2-kpi__compare,
.finvia-v2-kpi__status {
  font-size: 10.5px;
}


/* Fila principal */

.finvia-v4-main {
  margin-bottom: 20px;

  display: grid;
  grid-template-columns:
    minmax(0, 1.62fr)
    minmax(390px, .92fr);

  align-items: stretch;
  gap: 20px;
}

.finvia-v4-main > .card {
  min-width: 0;
  min-height: 430px;

  overflow: hidden;

  border: 1px solid #e4e9f2;
  border-radius: 18px;

  background: #ffffff;

  box-shadow:
    0 9px 26px
    rgba(35, 52, 82, .05);
}

.finvia-v4-card-head {
  min-height: 76px;

  padding:
    23px
    24px
    14px;

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

.finvia-v4-card-head h2 {
  margin: 0;

  color: #172c54;

  font-size: 18px;
  font-weight: 780;
  line-height: 1.25;
}

.finvia-v4-card-head p {
  margin: 6px 0 0;

  color: #748198;

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


/* Leyenda */

.finvia-v4-legend {
  display: flex;
  align-items: center;
  gap: 17px;

  padding-top: 2px;
}

.finvia-v4-legend span {
  display: flex;
  align-items: center;
  gap: 7px;

  color: #5f6e85;

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

.finvia-v4-legend i {
  width: 10px;
  height: 10px;

  display: block;

  border-radius: 3px;
}

.finvia-v4-legend i.is-income {
  background: #58bca4;
}

.finvia-v4-legend i.is-expense {
  background: #7188ee;
}


/* Resumen sobre el gráfico */

.finvia-v4-cashflow-stats {
  margin:
    0
    24px
    18px;

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

  overflow: hidden;

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

  background: #fafbfd;
}

.finvia-v4-cashflow-stats > div {
  position: relative;

  min-width: 0;
  min-height: 67px;

  padding: 13px 17px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.finvia-v4-cashflow-stats > div + div::before {
  content: "";

  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 0;

  width: 1px;

  background: #e4e9f1;
}

.finvia-v4-cashflow-stats span {
  color: #77849a;

  font-size: 11.5px;
}

.finvia-v4-cashflow-stats strong {
  overflow: hidden;

  color: #1c3156;

  font-size: 18px;
  font-weight: 770;

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

.finvia-v4-cashflow-stats strong.is-income {
  color: #4e9f87;
}

.finvia-v4-cashflow-stats strong.is-expense {
  color: #657fe9;
}


/* Gráfico de barras */

.finvia-v4-chart-wrap {
  height: 262px;

  padding:
    4px
    24px
    23px;
}

.finvia-v4-bars-chart {
  width: 100%;
  height: 100%;

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

  gap: 12px;
}

.finvia-v4-bars-chart__scale {
  padding-bottom: 25px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  color: #8490a3;

  font-size: 9.5px;
  text-align: right;
}

.finvia-v4-bars-chart__canvas {
  position: relative;

  min-width: 0;
  min-height: 0;
}

.finvia-v4-bars-chart__grid {
  position: absolute;
  inset:
    0
    0
    25px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  pointer-events: none;
}

.finvia-v4-bars-chart__grid span {
  width: 100%;

  border-top:
    1px dashed
    #e1e7f0;
}

.finvia-v4-bars-chart__groups {
  position: absolute;
  inset: 0;

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

  gap: 13px;
}

.finvia-v4-bars-chart__group {
  min-width: 0;

  display: grid;
  grid-template-rows:
    minmax(0, 1fr)
    25px;

  gap: 0;
}

.finvia-v4-bars-chart__pair {
  min-height: 0;

  padding:
    0
    8px;

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

.finvia-v4-bars-chart__group > strong {
  align-self: end;

  color: #758298;

  font-size: 10.5px;
  font-weight: 620;
  text-align: center;
  text-transform: capitalize;
}

.finvia-v4-bar {
  position: relative;

  width: min(22px, 38%);

  height: var(--bar-height);

  min-height: 0;

  display: block;

  border-radius:
    7px
    7px
    3px
    3px;

  cursor: default;

  transform-origin: bottom;

  animation:
    finvia-v4-bar-enter
    .58s
    cubic-bezier(.4, 0, .2, 1)
    both;

  transition:
    transform .16s ease,
    filter .16s ease;
}

.finvia-v4-bar.is-income {
  background: #58bca4;
}

.finvia-v4-bar.is-expense {
  background: #7188ee;
}

.finvia-v4-bar:hover {
  z-index: 4;

  transform:
    translateY(-3px);

  filter:
    saturate(1.08);
}

.finvia-v4-bar:hover::after {
  content:
    attr(data-value);

  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;

  padding:
    5px
    7px;

  border: 1px solid #e1e6ee;
  border-radius: 7px;

  background: #ffffff;

  color: #263b5e;

  box-shadow:
    0 7px 18px
    rgba(27, 42, 70, .12);

  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;

  transform:
    translateX(-50%);
}

@keyframes finvia-v4-bar-enter {
  from {
    opacity: 0;
    transform: scaleY(.15);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}


/* Salud financiera */

.finvia-v4-health-card {
  padding-bottom: 20px;
}

.finvia-v4-health-overview {
  padding:
    3px
    24px
    21px;

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

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

.finvia-v4-health-ring {
  width: 132px;
  height: 132px;

  padding: 14px;

  border-radius: 50%;

  background:
    conic-gradient(
      #f0b34c 0 25%,
      #58bca4 25% 50%,
      #7188ee 50% 75%,
      #9278d4 75% 100%
    );
}

.finvia-v4-health-ring > div {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    inset 0 0 0 1px
    #edf0f5;

  text-align: center;
}

.finvia-v4-health-ring strong {
  display: block;

  color: #172c54;

  font-size: 31px;
  font-weight: 800;
  line-height: 1;
}

.finvia-v4-health-ring span {
  display: block;

  max-width: 75px;

  margin-top: 5px;

  color: #768398;

  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.25;
}

.finvia-v4-health-copy strong {
  display: block;

  color: #1d3155;

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

.finvia-v4-health-copy p {
  margin: 8px 0 0;

  color: #748198;

  font-size: 12px;
  line-height: 1.55;
}

.finvia-v4-health-metrics {
  padding:
    0
    24px;

  display: grid;
  gap: 15px;
}

.finvia-v4-health-metrics article > div:first-child {
  margin-bottom: 7px;

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

.finvia-v4-health-metrics span {
  color: #53627a;

  font-size: 12px;
}

.finvia-v4-health-metrics strong {
  color: #1e3357;

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

.finvia-v4-health-track {
  height: 8px;

  overflow: hidden;

  border-radius: 999px;

  background: #edf1f6;
}

.finvia-v4-health-track span {
  width: var(--progress);
  height: 100%;

  display: block;

  border-radius: inherit;
}

.finvia-v4-health-track.is-green span {
  background: #58bca4;
}

.finvia-v4-health-track.is-blue span {
  background: #7188ee;
}

.finvia-v4-health-track.is-orange span {
  background: #e3a24d;
}

.finvia-v4-health-track.is-violet span {
  background: #9278d4;
}


/* Más respiración en las tarjetas inferiores */

.finvia-v2-bottom {
  gap: 18px;
}

.finvia-v2-bottom > .card {
  min-height: 323px;
}

.finvia-v2-bottom
.finvia-v2-card-head {
  min-height: 66px;

  padding:
    21px
    20px
    13px;
}

.finvia-v2-bottom
.finvia-v2-card-head h3 {
  font-size: 15px;
}

.finvia-v2-bottom
.finvia-v2-card-head p {
  font-size: 11.5px;
}


/* Responsive */

@media (max-width: 1180px) {
  .finvia-v4-main {
    grid-template-columns: 1fr;
  }

  .finvia-v4-main > .card {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .finvia-v4-card-head {
    flex-direction: column;
  }

  .finvia-v4-cashflow-stats {
    grid-template-columns: 1fr;
  }

  .finvia-v4-cashflow-stats > div + div::before {
    top: 0;
    right: 15px;
    bottom: auto;
    left: 15px;

    width: auto;
    height: 1px;
  }

  .finvia-v4-chart-wrap {
    height: 235px;

    padding-right: 13px;
    padding-left: 13px;
  }

  .finvia-v4-bars-chart {
    grid-template-columns:
      41px
      minmax(0, 1fr);
  }

  .finvia-v4-bars-chart__pair {
    padding:
      0
      3px;

    gap: 4px;
  }

  .finvia-v4-health-overview {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .finvia-v4-health-ring {
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .finvia-v4-bar {
    animation: none;
  }
}

/* NUBO_MONTHLY_BARS_HEALTH_V1_END */


/* NUBO_FINANCIAL_HEALTH_REFINED_V1_START */


/* Centro compacto del indicador */

.finvia-v4-health-ring {
  --health-score: 0%;
  --health-color: #62c6a3;

  background:
    conic-gradient(
      var(--health-color)
      0
      var(--health-score),

      #e9edf3
      var(--health-score)
      100%
    ) !important;

  transition:
    background .28s ease;
}

.finvia-v4-health-ring > div {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 2px !important;

  padding: 0 !important;
}

.finvia-v4-health-ring strong {
  margin: 0 !important;

  color: var(--health-color) !important;

  font-size: 32px !important;
  font-weight: 820 !important;
  line-height: .95 !important;
}

.finvia-v4-health-ring span {
  max-width: 88px !important;

  margin: 1px 0 0 !important;

  color: var(--health-color) !important;

  font-size: 9.5px !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;

  text-align: center;
}


/* Estados dinámicos */

.finvia-v4-health-ring.is-high,
.finvia-v4-health-card.is-high {
  --health-color: #45ad89;
}

.finvia-v4-health-ring.is-medium,
.finvia-v4-health-card.is-medium {
  --health-color: #df9c35;
}

.finvia-v4-health-ring.is-low,
.finvia-v4-health-card.is-low {
  --health-color: #dc625c;
}

.finvia-v4-health-card
.finvia-v4-health-copy > strong {
  color: var(--health-color) !important;

  transition:
    color .2s ease;
}

.finvia-v4-health-card.is-high {
  border-top-color:
    rgba(69, 173, 137, .38);
}

.finvia-v4-health-card.is-medium {
  border-top-color:
    rgba(223, 156, 53, .42);
}

.finvia-v4-health-card.is-low {
  border-top-color:
    rgba(220, 98, 92, .42);
}


/* Mejor alineación del bloque superior */

.finvia-v4-health-overview {
  grid-template-columns:
    137px
    minmax(0, 1fr) !important;

  gap: 18px !important;
}

.finvia-v4-health-copy {
  min-width: 0;
}

.finvia-v4-health-copy p {
  max-width: 270px;
}


/* Colores semánticos solicitados */

.finvia-v4-health-track.is-saving span {
  background: #71cfad !important;
}

.finvia-v4-health-track.is-expense-ratio span {
  background: #e66d64 !important;
}

.finvia-v4-health-track.is-categorized span {
  background: #e8b64c !important;
}

.finvia-v4-health-track.is-goals span {
  background: #a45d98 !important;
}


/* Transiciones suaves cuando cambian los datos */

.finvia-v4-health-track span {
  transition:
    width .35s ease,
    background .2s ease;
}

.finvia-v4-health-ring,
.finvia-v4-health-copy > strong {
  transition:
    color .2s ease,
    background .28s ease;
}


/* Responsive */

@media (max-width: 720px) {
  .finvia-v4-health-overview {
    grid-template-columns: 1fr !important;

    text-align: center;
  }

  .finvia-v4-health-copy p {
    max-width: 360px;

    margin-right: auto;
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .finvia-v4-health-track span,
.finvia-v4-health-ring,
.finvia-v4-health-copy > strong {
    transition: none;
  }
}

/* NUBO_FINANCIAL_HEALTH_REFINED_V1_END */


/* NUBO_BOTTOM_CARDS_BREATH_V1_START */


/* ========================================================
   ESTRUCTURA GENERAL
   ======================================================== */

.finvia-v2-bottom {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 1fr)
    minmax(320px, .92fr) !important;

  grid-template-areas:
    "category recent insights"
    "goals goals goals";

  align-items: stretch;

  gap: 22px !important;
}

.finvia-v2-category-card {
  grid-area: category;
}

.finvia-v2-recent-card {
  grid-area: recent;
}

.finvia-v2-insights-card {
  grid-area: insights;
}

.finvia-v2-goals-card {
  grid-area: goals;
}


/* ========================================================
   SUPERFICIE DE LAS TARJETAS
   ======================================================== */

.finvia-v2-bottom > .card {
  min-width: 0;
  min-height: 0 !important;

  overflow: hidden;

  border:
    1px solid
    #e6ebf2 !important;

  border-radius:
    20px !important;

  background:
    #ffffff !important;

  box-shadow:
    0 10px 28px
    rgba(34, 51, 81, .045) !important;
}

.finvia-v2-category-card,
.finvia-v2-recent-card,
.finvia-v2-insights-card {
  min-height: 362px !important;
}

.finvia-v2-goals-card {
  min-height: 168px !important;
}


/* ========================================================
   CABECERAS
   ======================================================== */

.finvia-v2-bottom
.finvia-v2-card-head {
  min-height: auto !important;

  margin: 0 !important;

  padding:
    23px
    23px
    17px !important;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 16px;
}

.finvia-v2-bottom
.finvia-v2-card-head h3 {
  margin: 0;

  color: #152b51;

  font-size: 16.5px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
}

.finvia-v2-bottom
.finvia-v2-card-head p {
  margin: 5px 0 0;

  color: #77849a;

  font-size: 12px !important;
  line-height: 1.45;
}

.finvia-v2-bottom
.finvia-v2-link {
  flex: 0 0 auto;

  padding: 2px 0 !important;

  color: #6179db !important;

  font-size: 12.5px !important;
  font-weight: 680 !important;
  line-height: 1.4;

  opacity: .92;

  transition:
    opacity .16s ease,
    transform .16s ease;
}

.finvia-v2-bottom
.finvia-v2-link:hover {
  opacity: 1;

  transform:
    translateX(2px);
}


/* ========================================================
   GASTOS POR CATEGORÍA
   ======================================================== */

.finvia-v2-category-content {
  min-height: 276px;

  padding:
    6px
    23px
    24px !important;

  display: grid !important;

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

  align-items: center;

  gap: 21px !important;
}

.finvia-v2-donut {
  width: 150px !important;
  height: 150px !important;

  margin: 0 auto;
}

.finvia-v2-donut
.category-donut__center {
  width: 88px !important;
  height: 88px !important;
}

.finvia-v2-donut
.category-donut__center strong {
  font-size: 19px !important;
  line-height: 1.05 !important;
}

.finvia-v2-donut
.category-donut__center span {
  margin-top: 4px;

  font-size: 11px !important;
}

.finvia-v2-category-list {
  min-width: 0;

  display: grid !important;

  gap: 13px !important;
}

.finvia-v2-category-row {
  min-width: 0;

  display: grid !important;

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

  align-items: center;

  gap: 9px !important;

  color: #5d6b81;

  font-size: 12.5px !important;
  line-height: 1.35;
}

.finvia-v2-category-row > span:first-child {
  min-width: 0;

  overflow: hidden;

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

.finvia-v2-category-row strong {
  color: #1b3155;

  font-size: 12.5px !important;
  font-weight: 730;
}

.finvia-v2-category-row > span:last-child {
  color: #748198;

  font-size: 11.5px !important;
  text-align: right;
}


/* ========================================================
   ACTIVIDAD RECIENTE
   ======================================================== */

.finvia-v2-recent {
  padding:
    0
    23px
    21px !important;
}

.finvia-v2-recent-row {
  min-height: 59px !important;

  padding:
    9px
    0 !important;

  display: grid !important;

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

  align-items: center;

  gap: 12px !important;

  border-bottom:
    1px solid
    #edf0f5 !important;
}

.finvia-v2-recent-row:last-child {
  border-bottom: 0 !important;
}

.finvia-v2-recent-row__icon {
  width: 42px !important;
  height: 42px !important;

  border-radius: 50% !important;
}

.finvia-v2-recent-row > div {
  min-width: 0;
}

.finvia-v2-recent-row strong {
  display: block;

  overflow: hidden;

  color: #1b3155;

  font-size: 13.5px !important;
  font-weight: 690 !important;
  line-height: 1.3;

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

.finvia-v2-recent-row small {
  display: block;

  margin-top: 4px;

  color: #8792a4;

  font-size: 11.5px !important;
  line-height: 1.25;
}

.finvia-v2-recent-row > span:last-child {
  color: #df685d;

  font-size: 13px !important;
  font-weight: 730 !important;
  white-space: nowrap;
}


/* ========================================================
   INSIGHTS
   ======================================================== */

.finvia-v2-insights-card
.finvia-v2-card-head {
  padding-bottom:
    15px !important;
}

.finvia-v2-insights {
  padding:
    0
    18px
    18px !important;

  display: grid !important;

  gap: 11px !important;
}

.finvia-v2-insight {
  min-height: 78px;

  padding:
    13px
    14px !important;

  display: grid !important;

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

  align-items: center;

  gap: 12px !important;

  border-radius:
    14px !important;
}

.finvia-v2-insight > span {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 10px;
}

.finvia-v2-insight > div {
  min-width: 0;
}

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

  margin: 0 0 5px !important;

  color: #213759;

  font-size: 13px !important;
  font-weight: 720 !important;
  line-height: 1.3;
}

.finvia-v2-insight p {
  margin: 0 !important;

  overflow: hidden;

  color: #69778d;

  font-size: 11.75px !important;
  line-height: 1.48 !important;

  display: -webkit-box;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}


/* ========================================================
   METAS HORIZONTALES
   ======================================================== */

.finvia-v2-goals-card
.finvia-v2-card-head {
  padding-bottom:
    13px !important;
}

.finvia-v2-goals {
  padding:
    0
    23px
    23px !important;

  display: flex !important;
  flex-wrap: wrap;

  gap: 15px !important;
}

.finvia-v2-goal {
  min-width: 280px;
  min-height: 92px;

  flex:
    1
    1
    320px;

  padding:
    15px
    17px !important;

  border:
    1px solid
    #e6ebf2 !important;

  border-radius:
    15px !important;

  background:
    #fbfcfe !important;
}

.finvia-v2-goal__head {
  margin-bottom: 9px !important;

  align-items: center !important;

  gap: 13px !important;
}

.finvia-v2-goal__main {
  min-width: 0;
}

.finvia-v2-goal__main strong {
  display: block;

  overflow: hidden;

  color: #1a3054;

  font-size: 13.5px !important;
  font-weight: 720 !important;
  line-height: 1.3;

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

.finvia-v2-goal__main small {
  display: block;

  margin-top: 4px;

  color: #77849a;

  font-size: 11.5px !important;
}

.finvia-v2-goal__icon {
  width: 42px !important;
  height: 42px !important;

  flex:
    0
    0
    42px;
}

.finvia-v2-goal__head > strong {
  color: #31a77d;

  font-size: 19px !important;
  font-weight: 780 !important;
}

.finvia-v2-progress {
  height: 8px !important;

  margin-top: 8px !important;

  border-radius: 999px;
}

.finvia-v2-goal > small {
  display: block;

  margin-top: 8px;

  color: #7d899c;

  font-size: 11.5px !important;
  text-align: right;
}


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

@media (max-width: 1120px) {
  .finvia-v2-bottom {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-areas:
      "category recent"
      "insights insights"
      "goals goals";
  }

  .finvia-v2-insights {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }

  .finvia-v2-insight {
    grid-template-columns: 1fr !important;

    align-items: start;

    text-align: left;
  }
}


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

@media (max-width: 760px) {
  .finvia-v2-bottom {
    grid-template-columns:
      1fr !important;

    grid-template-areas:
      "category"
      "recent"
      "insights"
      "goals";
  }

  .finvia-v2-category-card,
.finvia-v2-recent-card,
.finvia-v2-insights-card {
    min-height: auto !important;
  }

  .finvia-v2-category-content {
    grid-template-columns:
      1fr !important;
  }

  .finvia-v2-category-list {
    width: 100%;
  }

  .finvia-v2-insights {
    grid-template-columns:
      1fr !important;
  }

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

  .finvia-v2-goal {
    min-width: 0;
    flex-basis: 100%;
  }
}


/* NUBO_BOTTOM_CARDS_BREATH_V1_END */


/* NUBO_CATEGORY_DONUT_REFINED_V1_START */

:root {
  --category-alimentacion: #ff5d73;
  --category-transporte: #3b82f6;
  --category-vivienda: #8b5cf6;
  --category-servicios: #06b6d4;
  --category-salud: #22c55e;
  --category-educacion: #f2b705;
  --category-entretenimiento: #ec4899;
  --category-compras: #f97316;
  --category-deudas: #dc2626;
  --category-ahorro: #14b8a6;
  --category-inversion: #6366f1;
  --category-otros: #64748b;
}


/* Distribución de la tarjeta */

.finvia-v2-category-content {
  min-height: 278px;

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

  gap: 27px !important;

  padding:
    9px
    25px
    26px !important;
}


/* Dona principal */

.finvia-v2-donut {
  position: relative;

  width: 172px !important;
  height: 172px !important;

  flex: 0 0 172px;

  border:
    6px solid
    #ffffff;

  border-radius: 50%;

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

  box-shadow:
    0 0 0 1px rgba(32, 48, 76, .07),
    0 14px 30px rgba(35, 52, 83, .12) !important;

  transform:
    rotate(-1deg);

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.finvia-v2-donut:hover {
  transform:
    rotate(-1deg)
    scale(1.025);

  box-shadow:
    0 0 0 1px rgba(32, 48, 76, .08),
    0 18px 35px rgba(35, 52, 83, .16) !important;
}

.finvia-v2-donut::after {
  content: "";

  position: absolute;
  inset: 4px;

  border:
    1px solid
    rgba(255, 255, 255, .72);

  border-radius: 50%;

  pointer-events: none;
}


/* Centro de la dona */

.finvia-v2-donut
.category-donut__center {
  position: absolute;
  inset: 50% auto auto 50%;

  width: 104px !important;
  height: 104px !important;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 4px;

  border:
    1px solid
    #e9edf4;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #fafbfd
    ) !important;

  box-shadow:
    0 7px 20px
    rgba(31, 47, 74, .10);

  transform:
    translate(-50%, -50%);
}

.finvia-v2-donut
.category-donut__center strong {
  margin: 0;

  color: #172d52;

  font-size: 21px !important;
  font-weight: 800;
  line-height: 1 !important;

  letter-spacing: -.025em;
}

.finvia-v2-donut
.category-donut__center span {
  margin: 0 !important;

  color: #77849a;

  font-size: 11.5px !important;
  font-weight: 650;
  line-height: 1.1;
}


/* Leyenda estable:
   indicador + categoría + monto + porcentaje */

.finvia-v2-category-list {
  align-content: center;

  gap: 11px !important;
}

.finvia-v2-category-row {
  min-height: 38px;

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

  gap: 10px !important;

  padding:
    6px
    7px;

  border-radius: 10px;

  transition:
    background .16s ease,
    transform .16s ease;
}

.finvia-v2-category-row:hover {
  background: #f8f9fc;

  transform:
    translateX(2px);
}

.finvia-v2-category-row > i {
  width: 12px;
  height: 12px;

  display: block;

  border:
    2px solid
    rgba(255, 255, 255, .92);

  border-radius: 4px;

  box-shadow:
    0 0 0 1px
    rgba(28, 43, 70, .10);
}

.finvia-v2-category-row > span {
  min-width: 0;

  overflow: hidden;

  color: #40516b;

  font-size: 13.5px !important;
  font-weight: 630;
  line-height: 1.3;

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

.finvia-v2-category-row > strong {
  color: #172d52;

  font-size: 13px !important;
  font-weight: 750;

  white-space: nowrap;
}

.finvia-v2-category-row > small {
  min-width: 39px;

  padding:
    4px
    6px;

  border:
    1px solid
    #e7ebf2;

  border-radius: 999px;

  background: #f5f7fb;

  color: #68768c;

  font-size: 11px !important;
  font-weight: 700;
  line-height: 1;

  text-align: center;
}


/* Pantalla de análisis */

.big-donut {
  border:
    7px solid
    #ffffff;

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

  box-shadow:
    0 0 0 1px rgba(32, 48, 76, .07),
    0 17px 38px rgba(35, 52, 83, .12);
}

.analysis-row
.bar > span {
  background:
    var(--bar) !important;
}


/* Responsive */

@media (max-width: 760px) {
  .finvia-v2-category-content {
    grid-template-columns:
      1fr !important;

    gap: 23px !important;
  }

  .finvia-v2-donut {
    margin:
      4px
      auto
      0;
  }

  .finvia-v2-category-list {
    width: 100%;
  }
}

/* NUBO_CATEGORY_DONUT_REFINED_V1_END */


/* NUBO_CATEGORY_LEGEND_BELOW_V2_START */


/* Dona arriba y leyenda debajo */

.finvia-v2-category-content {
  min-height: 0 !important;

  padding:
    8px
    24px
    25px !important;

  display: grid !important;
  grid-template-columns: 1fr !important;

  justify-items: center;
  align-content: start;

  gap: 20px !important;
}


/* Dona centrada */

.finvia-v2-category-content
.finvia-v2-donut {
  margin:
    2px
    auto
    0 !important;
}


/* Leyenda debajo, usando todo el ancho */

.finvia-v2-category-content
.finvia-v2-category-list {
  width: 100%;
  max-width: 470px;

  margin: 0 auto;

  display: grid !important;
  grid-template-columns: 1fr !important;

  gap: 8px !important;
}


/* Cada categoría en una fila limpia */

.finvia-v2-category-content
.finvia-v2-category-row {
  width: 100%;
  min-height: 42px;

  padding:
    8px
    10px !important;

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

  align-items: center;

  gap: 10px !important;

  border:
    1px solid
    #edf0f5;

  border-radius: 12px;

  background:
    #fbfcfe;

  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.finvia-v2-category-content
.finvia-v2-category-row:hover {
  border-color:
    #dfe5ee;

  background:
    #ffffff;

  transform:
    translateY(-1px);
}


/* Indicador de color */

.finvia-v2-category-content
.finvia-v2-category-row > i {
  width: 12px;
  height: 12px;

  display: block;

  border:
    2px solid
    rgba(255, 255, 255, .95);

  border-radius: 4px;

  box-shadow:
    0 0 0 1px
    rgba(30, 45, 72, .12);
}


/* Nombre de categoría */

.finvia-v2-category-content
.finvia-v2-category-row > span {
  min-width: 0;

  overflow: hidden;

  color: #40516a;

  font-size: 13px !important;
  font-weight: 650;
  line-height: 1.3;

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


/* Monto */

.finvia-v2-category-content
.finvia-v2-category-row > strong {
  color: #172d52;

  font-size: 13px !important;
  font-weight: 760;

  white-space: nowrap;
}


/* Porcentaje */

.finvia-v2-category-content
.finvia-v2-category-row > small {
  min-width: 42px;

  padding:
    4px
    6px;

  border:
    1px solid
    #e4e9f1;

  border-radius: 999px;

  background:
    #f3f6fa;

  color: #65748a;

  font-size: 10.5px !important;
  font-weight: 720;
  line-height: 1;

  text-align: center;
}


/* Evitar un alto excesivo o vacío artificial */

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

.finvia-v2-category-card
.finvia-v2-card-head {
  padding-bottom:
    14px !important;
}


/* Móvil */

@media (max-width: 760px) {
  .finvia-v2-category-content {
    padding-right:
      18px !important;

    padding-left:
      18px !important;
  }

  .finvia-v2-category-content
  .finvia-v2-category-row {
    grid-template-columns:
      14px
      minmax(0, 1fr)
      auto !important;
  }

  .finvia-v2-category-content
  .finvia-v2-category-row > small {
    grid-column:
      2 / -1;

    justify-self: start;

    margin-top: -2px;
  }
}

/* NUBO_CATEGORY_LEGEND_BELOW_V2_END */


/* NUBO_SIMPLE_CATEGORY_DONUT_V1_START */

/* Dona de categorías más simple y limpia */

.finvia-v2-category-card .finvia-v2-donut,
.finvia-v2-category-card .category-donut.finvia-v2-donut {
  --donut-size: 158px;
  --donut-thickness: 18px;

  position: relative;
  width: var(--donut-size) !important;
  min-width: var(--donut-size) !important;
  height: var(--donut-size) !important;
  border-radius: 50%;

  margin: 4px auto 6px !important;

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

  border: none !important;
  outline: none !important;
  box-shadow:
    inset 0 0 0 1px #e9eef5,
    0 8px 18px rgba(19, 36, 63, 0.05) !important;

  isolation: isolate;
}

/* Anula adornos viejos si existían */
.finvia-v2-category-card .finvia-v2-donut::after,
.finvia-v2-category-card .category-donut.finvia-v2-donut::after {
  content: none !important;
  display: none !important;
}

/* Centro blanco limpio */
.finvia-v2-category-card .finvia-v2-donut::before,
.finvia-v2-category-card .category-donut.finvia-v2-donut::before {
  content: "";
  position: absolute;
  inset: var(--donut-thickness);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #eef2f7;
  z-index: 1;
}

/* Texto del centro mejor alineado */
.finvia-v2-category-card .category-donut__center {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;

  text-align: center;
  padding: 0 12px;
}

.finvia-v2-category-card .category-donut__center strong {
  margin: 0;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: #172d52 !important;
}

.finvia-v2-category-card .category-donut__center span {
  margin: 0;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #6d7b90 !important;
}

/* Un poco más de aire arriba */
.finvia-v2-category-card .finvia-v2-category-content {
  gap: 18px !important;
}

/* Responsive */
@media (max-width: 760px) {
  .finvia-v2-category-card .finvia-v2-donut,
.finvia-v2-category-card .category-donut.finvia-v2-donut {
    --donut-size: 150px;
    --donut-thickness: 17px;
  }

  .finvia-v2-category-card .category-donut__center strong {
    font-size: 16px !important;
  }
}

/* NUBO_SIMPLE_CATEGORY_DONUT_V1_END */


/* NUBO_CATEGORY_PROGRESS_ONLY_V1_START */


.finvia-v9-category-card {
  min-height: 0 !important;
}


/* Contenido */

.finvia-v9-category-content {
  width: 100%;

  padding:
    2px
    23px
    24px;

  display: grid;

  align-content: start;

  gap: 18px;
}


/* Resumen superior */

.finvia-v9-category-summary {
  min-height: 78px;

  padding:
    15px
    16px;

  display: grid;

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

  align-items: center;

  gap: 18px;

  border:
    1px solid
    #e7ecf3;

  border-radius: 15px;

  background:
    #f8fafc;
}

.finvia-v9-category-summary__total {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 6px;
}

.finvia-v9-category-summary__total > span {
  color: #718096;

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

.finvia-v9-category-summary__total > strong {
  color: #173156;

  font-size: 21px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: -.025em;
}

.finvia-v9-category-summary__meta {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 7px;

  text-align: right;
}

.finvia-v9-category-summary__meta > span {
  padding:
    5px
    9px;

  border:
    1px solid
    #e3e9f1;

  border-radius: 999px;

  background: #ffffff;

  color: #5f6f86;

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

.finvia-v9-category-summary__meta > small {
  max-width: 160px;

  overflow: hidden;

  color: #7a8799;

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

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

.finvia-v9-category-summary__meta > small strong {
  color: #40526c;

  font-weight: 720;
}


/* Lista */

.finvia-v9-category-list {
  width: 100%;

  display: grid;

  gap: 4px;
}

.finvia-v9-category-item {
  padding:
    11px
    2px
    12px;

  border-bottom:
    1px solid
    #edf1f6;
}

.finvia-v9-category-item:last-child {
  border-bottom: 0;
}


/* Encabezado de cada categoría */

.finvia-v9-category-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;
}

.finvia-v9-category-item__identity {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;
}

.finvia-v9-category-item__identity > i {
  width: 11px;
  height: 11px;

  display: block;

  flex:
    0
    0
    11px;

  border-radius: 4px;

  background:
    var(--category-color);

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--category-color) 15%,
      transparent
    );
}

.finvia-v9-category-item__identity > strong {
  min-width: 0;

  overflow: hidden;

  color: #29415f;

  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;

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

.finvia-v9-category-item__values {
  flex:
    0
    0
    auto;

  display: flex;
  align-items: center;

  gap: 9px;
}

.finvia-v9-category-item__values > b {
  color: #173156;

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

  white-space: nowrap;
}

.finvia-v9-category-item__values > small {
  min-width: 41px;

  padding:
    4px
    6px;

  border:
    1px solid
    #e3e9f1;

  border-radius: 999px;

  background: #f5f7fa;

  color: #6d7c92;

  font-size: 10.5px;
  font-weight: 720;
  line-height: 1;

  text-align: center;
}


/* Barra de progreso */

.finvia-v9-category-progress {
  height: 8px;

  margin:
    10px
    0
    0
    21px;

  overflow: hidden;

  border-radius: 999px;

  background: #edf1f6;
}

.finvia-v9-category-progress > span {
  width:
    var(--category-progress);

  height: 100%;

  display: block;

  border-radius: inherit;

  background:
    var(--category-color);

  transform-origin: left;

  animation:
    nubo-category-progress-only-enter
    .52s
    cubic-bezier(.4, 0, .2, 1)
    both;
}

@keyframes nubo-category-progress-only-enter {
  from {
    opacity: .35;

    transform:
      scaleX(0);
  }

  to {
    opacity: 1;

    transform:
      scaleX(1);
  }
}


/* Responsive */

@media (max-width: 640px) {
  .finvia-v9-category-content {
    padding-right: 18px;
    padding-left: 18px;
  }

  .finvia-v9-category-summary {
    grid-template-columns: 1fr;
  }

  .finvia-v9-category-summary__meta {
    align-items: flex-start;

    text-align: left;
  }

  .finvia-v9-category-summary__meta > small {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .finvia-v9-category-progress > span {
    animation: none;
  }
}

/* NUBO_CATEGORY_PROGRESS_ONLY_V1_END */


/* NUBO_DASHBOARD_GOALS_ACHIEVEMENTS_V2_START */

/* --------------------------------------------------------
   DISTRIBUCIÓN
   -------------------------------------------------------- */

.finvia-v2-bottom {
  grid-template-areas:
    "category recent insights"
    "goals goals goals"
    "achievements achievements achievements"
    !important;
}

.nubo-achievements-card {
  grid-area: achievements;
  overflow: hidden;
}


/* --------------------------------------------------------
   CABECERAS
   -------------------------------------------------------- */

.nubo-goals-head,
.nubo-achievements-head {
  min-height: 68px;

  padding:
    16px
    22px
    14px;

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

  border-bottom:
    1px solid
    #e5eaf1;
}

.nubo-goals-head__copy,
.nubo-achievements-head > div {
  min-width: 0;
}

.nubo-goals-head h3,
.nubo-achievements-head h3 {
  margin: 0;

  color: #14213a;

  font-size: 16px;
  font-weight: 780;
  line-height: 1.25;
}

.nubo-goals-head p,
.nubo-achievements-head p {
  margin:
    5px
    0
    0;

  color: #718097;

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

.nubo-achievements-summary {
  min-width: 42px;
  height: 28px;

  padding:
    0
    10px;

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

  border-radius: 999px;

  color: #0b9d70;
  background: #e2f7f0;

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


/* --------------------------------------------------------
   METAS
   -------------------------------------------------------- */

.finvia-v2-goals {
  padding:
    16px
    22px
    20px
    !important;

  display: grid !important;

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

  justify-content: start;

  gap: 14px !important;
}

.finvia-v2-goals.is-single {
  grid-template-columns:
    minmax(0, 700px)
    !important;
}

.finvia-v2-goal {
  min-width: 0 !important;
  min-height: 118px !important;

  padding:
    16px
    17px
    14px
    !important;

  display: block !important;

  border:
    1px solid
    #dfe7ee
    !important;

  border-radius:
    15px
    !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f9fcfb 100%
    )
    !important;

  box-shadow:
    0 7px 20px
    rgba(35, 63, 93, 0.04);

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

.finvia-v2-goal:hover {
  transform: translateY(-1px);

  border-color:
    #c5ddd5
    !important;

  box-shadow:
    0 10px 26px
    rgba(35, 63, 93, 0.07);
}

.nubo-goal-primary {
  display: grid;

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

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

.finvia-v2-goal__icon {
  width: 44px !important;
  height: 44px !important;

  display: grid;
  place-items: center;

  border-radius: 50%;
}

.finvia-v2-goal__icon .icon {
  width: 20px;
  height: 20px;
}

.nubo-goal-title {
  min-width: 0;
}

.nubo-goal-title strong {
  display: block;

  overflow: hidden;

  color: #192b47;

  font-size: 14.5px;
  font-weight: 760;
  line-height: 1.3;

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

.nubo-goal-title small {
  display: block;

  margin-top: 4px;

  color: #748298;

  font-size: 11.75px;
  line-height: 1.35;
}

.nubo-goal-percent {
  color: #0ba775;

  font-size: 20px;
  font-weight: 810;
  line-height: 1;
}

.finvia-v2-goal
.finvia-v2-progress {
  height: 9px !important;

  margin-top:
    15px
    !important;

  border-radius: 999px;

  background:
    #e9eef2
    !important;
}

.finvia-v2-goal
.finvia-v2-progress span {
  min-width: 5px;

  background:
    linear-gradient(
      90deg,
      #50c59f,
      #1aaa7a
    )
    !important;

  animation:
    nubo-goal-progress-v2
    520ms
    ease-out
    both;
}

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

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

.nubo-goal-foot {
  margin-top: 9px;

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

  color: #748196;

  font-size: 11.5px;
  line-height: 1.35;
}

.nubo-goal-foot span {
  min-width: 0;
}

.nubo-goal-foot span strong {
  color: #324860;

  font-weight: 750;
}

.nubo-goal-foot small {
  color: #4c6078;

  font-size: inherit;
  font-weight: 690;
  white-space: nowrap;
}


/* --------------------------------------------------------
   LOGROS
   -------------------------------------------------------- */

.nubo-achievements-grid {
  padding:
    16px
    20px
    20px;

  display: grid;

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

  gap: 11px;
}

.nubo-achievement {
  min-width: 0;
  min-height: 102px;

  padding:
    14px
    14px;

  display: grid;

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

  align-items: center;
  gap: 11px;

  position: relative;

  border:
    1px solid
    #e0e6ed;

  border-radius: 14px;

  background:
    #ffffff;

  box-shadow:
    0 5px 16px
    rgba(35, 63, 93, 0.035);

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

.nubo-achievement.is-unlocked {
  border-color: #b8e7d9;

  box-shadow:
    inset 3px 0 0 #2ab285,
    0 5px 16px rgba(35, 63, 93, 0.035);
}

.nubo-achievement.is-pending {
  border-color: #e2e7ed;

  background:
    #fafbfd;
}

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

  box-shadow:
    0 9px 23px
    rgba(35, 63, 93, 0.07);
}

.nubo-achievement__icon {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 50%;
}

.nubo-achievement.is-unlocked
.nubo-achievement__icon {
  color: #0ba775;

  background:
    #dcf6ed;
}

.nubo-achievement.is-pending
.nubo-achievement__icon {
  color: #8895a5;

  background:
    #edf0f4;
}

.nubo-achievement__icon svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nubo-achievement__copy {
  min-width: 0;

  padding-right: 68px;
}

.nubo-achievement__copy strong {
  display: block;

  overflow: hidden;

  color: #1f2d42;

  font-size: 13.75px;
  font-weight: 760;
  line-height: 1.3;

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

.nubo-achievement__copy p {
  margin:
    5px
    0
    0;

  color: #718097;

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

.nubo-achievement__status {
  position: absolute;

  top: 13px;
  right: 13px;

  padding:
    5px
    9px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.nubo-achievement.is-unlocked
.nubo-achievement__status {
  color: #078f66;

  background: #d8f4ea;
}

.nubo-achievement.is-pending
.nubo-achievement__status {
  color: #778598;

  background: #e9edf2;
}


/* --------------------------------------------------------
   TABLET
   -------------------------------------------------------- */

@media (max-width: 1120px) {
  .finvia-v2-bottom {
    grid-template-areas:
      "category recent"
      "insights insights"
      "goals goals"
      "achievements achievements"
      !important;
  }

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


/* --------------------------------------------------------
   MÓVIL
   -------------------------------------------------------- */

@media (max-width: 760px) {
  .finvia-v2-bottom {
    grid-template-areas:
      "category"
      "recent"
      "insights"
      "goals"
      "achievements"
      !important;
  }

  .nubo-goals-head,
.nubo-achievements-head {
    min-height: 0;

    padding:
      16px
      15px
      13px;
  }

  .finvia-v2-goals,
.finvia-v2-goals.is-single {
    padding:
      14px
      14px
      17px
      !important;

    grid-template-columns:
      1fr
      !important;
  }

  .nubo-achievements-grid {
    padding:
      14px
      14px
      17px;

    grid-template-columns:
      1fr;
  }
}

@media (max-width: 520px) {
  .finvia-v2-goal {
    padding:
      15px
      14px
      14px
      !important;
  }

  .nubo-goal-primary {
    grid-template-columns:
      40px
      minmax(0, 1fr)
      auto;

    gap: 10px;
  }

  .finvia-v2-goal__icon {
    width: 40px !important;
    height: 40px !important;
  }

  .nubo-goal-percent {
    font-size: 18px;
  }

  .nubo-goal-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .nubo-achievement__copy {
    padding-right: 0;
  }

  .nubo-achievement__status {
    position: static;

    grid-column: 2;

    justify-self: start;

    margin-top: 2px;
  }

  .nubo-achievement {
    align-items: start;
  }
}

/* NUBO_DASHBOARD_GOALS_ACHIEVEMENTS_V2_END */


/* NUBO_GOALS_ACHIEVEMENTS_SIDE_V3_START */

/* Escritorio: Metas 1/3 y Logros 2/3 */
@media (min-width: 1121px) {
  .finvia-v2-bottom {
    grid-template-areas:
      "category recent insights"
      "goals achievements achievements"
      !important;
  }

  .finvia-v2-goals-card,
.nubo-achievements-card {
    align-self: start;
    min-height: 0 !important;
  }

  .finvia-v2-goals.is-single {
    grid-template-columns:
      minmax(0, 1fr)
      !important;
  }

  .finvia-v2-goals {
    padding:
      16px
      16px
      18px
      !important;
  }

  .finvia-v2-goal {
    width: 100%;
    min-height: 122px !important;
  }

  .nubo-achievements-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .nubo-achievement {
    min-height: 100px;
    padding:
      13px
      12px;
  }

  .nubo-achievement__copy {
    padding-right: 0;
  }

  .nubo-achievement__status {
    position: static;

    grid-column:
      2;

    justify-self:
      start;

    margin-top:
      2px;
  }
}

/* Tablet: vuelven a ocupar una fila completa */
@media (min-width: 761px) and (max-width: 1120px) {
  .finvia-v2-bottom {
    grid-template-areas:
      "category recent"
      "insights insights"
      "goals goals"
      "achievements achievements"
      !important;
  }

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

/* NUBO_GOALS_ACHIEVEMENTS_SIDE_V3_END */


/* NUBO_GOALS_ACHIEVEMENTS_FRIENDLY_V4_START */

/* ========================================================
   META PRINCIPAL
   ======================================================== */

.finvia-v2-goals-card,
.nubo-achievements-card {
  border-color: #e2e9e6 !important;

  box-shadow:
    0 12px 32px
    rgba(38, 67, 62, 0.055)
    !important;
}

.finvia-v2-goal {
  position: relative;

  overflow: hidden;

  min-height: 132px !important;

  padding:
    17px
    18px
    15px
    !important;

  border:
    1px solid
    #dbe9e4
    !important;

  border-radius:
    18px
    !important;

  background:
    radial-gradient(
      circle at 5% 12%,
      rgba(59, 196, 151, 0.10),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfefd 64%,
      #f3fbf8 100%
    )
    !important;

  box-shadow:
    0 9px 24px
    rgba(34, 73, 64, 0.06)
    !important;
}

.finvia-v2-goal::after {
  content: "";

  position: absolute;

  width: 108px;
  height: 108px;

  top: -66px;
  right: -48px;

  border-radius: 50%;

  background:
    rgba(42, 181, 137, 0.065);

  pointer-events: none;
}

.finvia-v2-goal:hover {
  transform:
    translateY(-2px);

  border-color:
    #bfe0d5
    !important;

  box-shadow:
    0 14px 32px
    rgba(34, 73, 64, 0.095)
    !important;
}

.finvia-v2-goal__icon {
  position: relative;

  width: 46px !important;
  height: 46px !important;

  color: #0ca978 !important;

  background:
    linear-gradient(
      145deg,
      #d9f7ec,
      #c8f0e3
    )
    !important;

  box-shadow:
    0 0 0 6px
    rgba(31, 183, 136, 0.075);
}

.finvia-v2-goal__icon::after {
  content: "";

  position: absolute;

  inset: 5px;

  border:
    1px solid
    rgba(15, 165, 118, 0.18);

  border-radius: inherit;
}

.nubo-goal-title strong {
  color: #18382f;

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

.nubo-goal-title small {
  margin-top: 5px;

  color: #71877f;

  font-size: 12px;
}

.nubo-goal-percent {
  min-width: 52px;
  height: 32px;

  padding:
    0
    11px;

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

  border:
    1px solid
    #c8ebdf;

  border-radius: 999px;

  color: #079c6d;

  background:
    rgba(226, 248, 241, 0.92);

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

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

.finvia-v2-goal
.finvia-v2-progress {
  position: relative;

  height: 10px !important;

  margin-top:
    17px
    !important;

  overflow: visible;

  border:
    1px solid
    #e1ebe7;

  background:
    #edf3f1
    !important;

  box-shadow:
    inset 0 1px 2px
    rgba(35, 69, 62, 0.045);
}

.finvia-v2-goal
.finvia-v2-progress span {
  position: relative;

  min-width: 7px;

  background:
    linear-gradient(
      90deg,
      #45c69b,
      #16a979
    )
    !important;

  box-shadow:
    0 2px 7px
    rgba(16, 169, 121, 0.22);
}

.finvia-v2-goal
.finvia-v2-progress span::after {
  content: "";

  position: absolute;

  width: 10px;
  height: 10px;

  top: 50%;
  right: -4px;

  transform:
    translateY(-50%);

  border:
    2px solid
    #ffffff;

  border-radius: 50%;

  background:
    #0ea675;

  box-shadow:
    0 2px 7px
    rgba(16, 159, 114, 0.28);
}

.nubo-goal-foot {
  margin-top: 11px;

  padding:
    9px
    11px;

  border-radius: 10px;

  background:
    rgba(241, 247, 245, 0.9);
}

.nubo-goal-foot span {
  color: #687e76;
}

.nubo-goal-foot span strong {
  color: #274b40;
}

.nubo-goal-foot small {
  color: #43806c;

  font-weight: 730;
}


/* ========================================================
   LOGROS AMIGABLES
   ======================================================== */

.nubo-achievements-grid {
  gap: 12px;
}

.nubo-achievement {
  --achievement-accent: #20ae7f;
  --achievement-soft: #dcf6ed;
  --achievement-glow: rgba(32, 174, 127, 0.11);

  position: relative;

  overflow: hidden;

  min-height: 116px;

  padding:
    15px
    14px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--achievement-accent) 24%,
      #e5ebe9
    );

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 8% 12%,
      var(--achievement-glow),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfdfc 100%
    );

  box-shadow:
    0 8px 22px
    rgba(40, 69, 63, 0.05);

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

.nubo-achievement::after {
  content: "";

  position: absolute;

  width: 74px;
  height: 74px;

  top: -45px;
  right: -34px;

  border-radius: 50%;

  background:
    var(--achievement-glow);

  pointer-events: none;
}

.nubo-achievement.is-unlocked {
  border-color:
    color-mix(
      in srgb,
      var(--achievement-accent) 28%,
      #e5ebe9
    );

  box-shadow:
    0 8px 22px
    rgba(40, 69, 63, 0.05);
}

.nubo-achievement.is-pending {
  --achievement-accent: #8d99a8;
  --achievement-soft: #edf0f4;
  --achievement-glow: rgba(126, 140, 156, 0.08);

  opacity: 0.82;
}

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

  border-color:
    color-mix(
      in srgb,
      var(--achievement-accent) 42%,
      #dce5e2
    );

  box-shadow:
    0 13px 30px
    rgba(40, 69, 63, 0.09);
}

.nubo-achievement:nth-child(1) {
  --achievement-accent: #12a99a;
  --achievement-soft: #d9f5f1;
  --achievement-glow: rgba(18, 169, 154, 0.11);
}

.nubo-achievement:nth-child(2) {
  --achievement-accent: #18a86e;
  --achievement-soft: #dcf6e9;
  --achievement-glow: rgba(24, 168, 110, 0.11);
}

.nubo-achievement:nth-child(3) {
  --achievement-accent: #ee7c67;
  --achievement-soft: #ffebe7;
  --achievement-glow: rgba(238, 124, 103, 0.11);
}

.nubo-achievement:nth-child(4) {
  --achievement-accent: #528ce5;
  --achievement-soft: #e7effd;
  --achievement-glow: rgba(82, 140, 229, 0.11);
}

.nubo-achievement:nth-child(5) {
  --achievement-accent: #826cdb;
  --achievement-soft: #eeeafd;
  --achievement-glow: rgba(130, 108, 219, 0.11);
}

.nubo-achievement:nth-child(6) {
  --achievement-accent: #dda432;
  --achievement-soft: #fff3d9;
  --achievement-glow: rgba(221, 164, 50, 0.12);
}

.nubo-achievement__icon {
  position: relative;

  width: 46px;
  height: 46px;

  color:
    var(--achievement-accent)
    !important;

  background:
    var(--achievement-soft)
    !important;

  box-shadow:
    0 0 0 5px
    color-mix(
      in srgb,
      var(--achievement-soft) 54%,
      transparent
    );
}

.nubo-achievement__icon::after {
  content: "";

  position: absolute;

  inset: 5px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--achievement-accent) 20%,
      transparent
    );

  border-radius: inherit;
}

.nubo-achievement__icon svg {
  width: 21px;
  height: 21px;

  stroke-width: 1.75;
}

.nubo-achievement__copy strong {
  color: #24372f;

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

.nubo-achievement__copy p {
  margin-top: 6px;

  color: #73847e;

  font-size: 11.8px;
  line-height: 1.42;
}

.nubo-achievement__status {
  min-height: 24px;

  padding:
    0
    10px;

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

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

  color:
    color-mix(
      in srgb,
      var(--achievement-accent) 88%,
      #263e36
    )
    !important;

  background:
    color-mix(
      in srgb,
      var(--achievement-soft) 84%,
      #ffffff
    )
    !important;

  font-size: 10.25px;
  font-weight: 760;

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

.nubo-achievements-summary {
  border:
    1px solid
    #cdece1;

  color: #078d64;

  background:
    linear-gradient(
      145deg,
      #e8faf4,
      #dff6ee
    );

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


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

@media (max-width: 1120px) {
  .nubo-achievement {
    min-height: 108px;
  }
}

@media (max-width: 520px) {
  .nubo-goal-percent {
    min-width: 46px;
    height: 30px;

    font-size: 16px;
  }

  .nubo-goal-foot {
    width: 100%;
  }
}

/* NUBO_GOALS_ACHIEVEMENTS_FRIENDLY_V4_END */


/* NUBO_REMOVE_ACHIEVEMENT_CORNERS_V1_START */

.nubo-achievement::after {
  display: none !important;
  content: none !important;
}

/* NUBO_REMOVE_ACHIEVEMENT_CORNERS_V1_END */


/* NUBO_GOAL_CARD_MINIMAL_V5_START */

.finvia-v2-goal {
  min-height: 124px !important;

  padding:
    16px
    17px
    14px
    !important;

  border:
    1px solid
    #dfe8e4
    !important;

  border-radius:
    16px
    !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f9fcfb 100%
    )
    !important;

  box-shadow:
    0 6px 18px
    rgba(37, 71, 63, 0.045)
    !important;
}

.finvia-v2-goal::after {
  display: none !important;
  content: none !important;
}

.finvia-v2-goal:hover {
  transform:
    translateY(-1px);

  border-color:
    #c9ddd6
    !important;

  box-shadow:
    0 9px 22px
    rgba(37, 71, 63, 0.065)
    !important;
}

.finvia-v2-goal__icon {
  width: 43px !important;
  height: 43px !important;

  color: #0ba476 !important;

  background:
    #e5f7f1
    !important;

  box-shadow:
    none
    !important;
}

.finvia-v2-goal__icon::after {
  display: none !important;
  content: none !important;
}

.nubo-goal-title strong {
  color: #18382f;

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

.nubo-goal-title small {
  color: #72837d;

  font-size: 11.75px;
}

.nubo-goal-percent {
  min-width: 48px;
  height: 30px;

  padding:
    0
    10px;

  border:
    1px solid
    #cfe9df;

  color: #07986a;

  background:
    #edf9f5;

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

  box-shadow:
    none;
}

.finvia-v2-goal
.finvia-v2-progress {
  height: 8px !important;

  margin-top:
    14px
    !important;

  overflow: hidden;

  border:
    0;

  background:
    #ebf1ef
    !important;

  box-shadow:
    none;
}

.finvia-v2-goal
.finvia-v2-progress span {
  min-width: 6px;

  box-shadow:
    none;
}

.finvia-v2-goal
.finvia-v2-progress span::after {
  display: none !important;
  content: none !important;
}

.nubo-goal-foot {
  margin-top: 9px;

  padding:
    8px
    10px;

  border:
    1px solid
    #edf1ef;

  border-radius: 9px;

  background:
    #f7faf9;
}

.nubo-goal-foot span {
  color: #6d7e78;
}

.nubo-goal-foot span strong {
  color: #28483e;
}

.nubo-goal-foot small {
  color: #3d7865;

  font-weight: 700;
}

/* NUBO_GOAL_CARD_MINIMAL_V5_END */


/* NUBO_TOPBAR_COLORFUL_V2_START */

/* ========================================================
   CONTENEDOR
   Mantiene altura, sticky y estructura actuales.
   ======================================================== */

.app-header {
  position: sticky;
  top: 0;
  height: 78px;

  border-bottom:
    1px solid
    rgba(214, 226, 221, 0.9)
    !important;

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(16, 185, 129, 0.055),
      transparent 27%
    ),
    radial-gradient(
      circle at 58% 0%,
      rgba(99, 102, 241, 0.035),
      transparent 25%
    ),
    rgba(255, 255, 255, 0.94)
    !important;

  box-shadow:
    0 9px 30px
    rgba(27, 62, 51, 0.065);

  backdrop-filter:
    blur(18px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(145%);
}

.app-header::before {
  content: "";

  position: absolute;
  z-index: 2;

  top: 0;
  right: 0;
  left: 0;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      #18b981 0%,
      #19a9a0 19%,
      #4f8be8 39%,
      #806ddd 59%,
      #e2a63c 79%,
      #ed7d68 100%
    );

  opacity: 0.72;

  pointer-events: none;
}

.header-inner {
  grid-template-columns:
    165px
    minmax(0, 1fr)
    auto
    !important;

  gap:
    18px
    !important;
}


/* ========================================================
   MARCA
   ======================================================== */

.header-brand {
  gap:
    11px
    !important;

  color:
    #103d30
    !important;

  font-size:
    22px
    !important;

  transition:
    transform 170ms ease;
}

.header-brand:hover {
  transform:
    translateY(-1px);
}

.header-brand .brand-mark {
  position: relative;

  width:
    44px
    !important;

  height:
    44px
    !important;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.72);

  border-radius:
    14px
    !important;

  color:
    #ffffff
    !important;

  background:
    linear-gradient(
      145deg,
      #22d988 0%,
      #10b981 52%,
      #0b9f91 100%
    )
    !important;

  box-shadow:
    0 11px 24px
    rgba(16, 185, 129, 0.23),
    inset 0 1px 0
    rgba(255, 255, 255, 0.32)
    !important;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.header-brand:hover
.brand-mark {
  transform:
    rotate(-2deg)
    translateY(-1px);

  box-shadow:
    0 14px 28px
    rgba(16, 185, 129, 0.28),
    inset 0 1px 0
    rgba(255, 255, 255, 0.38)
    !important;
}

.header-brand
.brand-mark::after {
  content: "";

  position: absolute;

  width: 28px;
  height: 28px;

  top: -13px;
  right: -10px;

  border-radius: 50%;

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

  pointer-events: none;
}


/* ========================================================
   NAVEGACIÓN
   ======================================================== */

.desktop-nav {
  align-items:
    center
    !important;

  justify-content:
    center;

  gap:
    6px
    !important;
}

.nav-link {
  --nav-accent: #149f75;
  --nav-soft: #eaf7f2;
  --nav-border: #d4ebe3;

  height: 42px;

  padding:
    0
    11px
    !important;

  gap:
    7px
    !important;

  border:
    1px solid
    transparent
    !important;

  border-radius:
    13px;

  color:
    #5e7069
    !important;

  background:
    transparent
    !important;

  font-size:
    12.5px
    !important;

  font-weight:
    720
    !important;

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

.nav-link[data-route="dashboard"] {
  --nav-accent: #159b70;
  --nav-soft: #e9f7f1;
  --nav-border: #cee9df;
}

.nav-link[data-route="movements"] {
  --nav-accent: #4185dc;
  --nav-soft: #edf5ff;
  --nav-border: #d8e7fa;
}

.nav-link[data-route="debts"] {
  --nav-accent: #e36f65;
  --nav-soft: #fff0ed;
  --nav-border: #f5d9d4;
}

.nav-link[data-route="analysis"] {
  --nav-accent: #8069d6;
  --nav-soft: #f1effc;
  --nav-border: #e0dcf5;
}

.nav-link[data-route="goals"] {
  --nav-accent: #139e9b;
  --nav-soft: #eaf8f7;
  --nav-border: #d1ecea;
}

.nav-link[data-route="reports"] {
  --nav-accent: #cb9025;
  --nav-soft: #fff7e6;
  --nav-border: #f1e1bc;
}

.nav-link[data-route="settings"] {
  --nav-accent: #65758d;
  --nav-soft: #f0f3f7;
  --nav-border: #dde3ea;
}

.nav-link .icon,
.nav-link svg {
  display:
    block
    !important;

  width:
    15px
    !important;

  height:
    15px
    !important;

  flex:
    0
    0
    15px;

  color:
    var(--nav-accent);

  stroke-width:
    1.9;

  transition:
    transform 170ms ease;
}

.nav-link:hover {
  color:
    var(--nav-accent)
    !important;

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

  background:
    var(--nav-soft)
    !important;

  transform:
    translateY(-1px);
}

.nav-link:hover .icon,
.nav-link:hover svg {
  transform:
    scale(1.06);
}

.nav-link.is-active {
  color:
    var(--nav-accent)
    !important;

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

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      var(--nav-soft) 100%
    )
    !important;

  box-shadow:
    0 7px 17px
    color-mix(
      in srgb,
      var(--nav-accent) 10%,
      transparent
    ),
    inset 0 1px 0
    rgba(255, 255, 255, 0.86);
}

.nav-link::after {
  right:
    auto
    !important;

  bottom:
    3px
    !important;

  left:
    50%
    !important;

  width:
    17px
    !important;

  height:
    2px
    !important;

  border-radius:
    999px
    !important;

  background:
    var(--nav-accent)
    !important;

  transform:
    translateX(-50%)
    scaleX(0)
    !important;

  transform-origin:
    center;

  transition:
    transform 180ms ease
    !important;
}

.nav-link.is-active::after {
  transform:
    translateX(-50%)
    scaleX(1)
    !important;
}


/* ========================================================
   ACCIONES RÁPIDAS
   ======================================================== */

.header-actions {
  gap:
    7px
    !important;
}

.header-tool {
  --tool-accent: #52677a;
  --tool-soft: #f2f5f7;
  --tool-border: #e1e7eb;

  width: 38px;
  height: 38px;

  padding: 0;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--tool-border)
    !important;

  border-radius:
    12px;

  color:
    var(--tool-accent)
    !important;

  background:
    var(--tool-soft)
    !important;

  cursor: pointer;

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

.header-search-wrap
.header-tool {
  --tool-accent: #3e82d8;
  --tool-soft: #edf5ff;
  --tool-border: #dae8f8;
}

.header-quick-wrap
.header-tool {
  --tool-accent: #139c70;
  --tool-soft: #eaf7f2;
  --tool-border: #d4ebe2;
}

.header-nubo-ai-tool {
  --tool-accent: #7568d7;
  --tool-soft: #f0effc;
  --tool-border: #dedbf4;
}


.header-tool:hover {
  transform:
    translateY(-2px);

  border-color:
    color-mix(
      in srgb,
      var(--tool-accent) 28%,
      var(--tool-border)
    )
    !important;

  background:
    color-mix(
      in srgb,
      var(--tool-soft) 78%,
      #ffffff
    )
    !important;

  box-shadow:
    0 8px 18px
    color-mix(
      in srgb,
      var(--tool-accent) 13%,
      transparent
    );
}

.header-tool .icon,
.header-tool svg {
  width:
    17px;

  height:
    17px;

  stroke-width:
    1.9;
}


/* ========================================================
   PERFIL
   ======================================================== */

.profile-button {
  min-height: 48px;

  padding:
    4px
    9px
    4px
    5px
    !important;

  border:
    1px solid
    #e0e8e4
    !important;

  border-radius:
    15px
    !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f5faf7 100%
    )
    !important;

  box-shadow:
    0 6px 18px
    rgba(35, 68, 58, 0.045);

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

.profile-button:hover {
  transform:
    translateY(-1px);

  border-color:
    #cfe0d9
    !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #eef8f3 100%
    )
    !important;

  box-shadow:
    0 9px 22px
    rgba(35, 68, 58, 0.075);
}

.profile-button .avatar {
  width:
    40px
    !important;

  height:
    40px
    !important;

  flex-basis:
    40px
    !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.75);

  color:
    #16775b
    !important;

  background:
    linear-gradient(
      145deg,
      #e0f4ec,
      #d5ebe4
    )
    !important;

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

.profile-meta strong {
  color:
    #17382e
    !important;
}

.profile-meta span {
  color:
    #718179
    !important;
}

.profile-button > .icon,
.profile-button > svg {
  color:
    #64776f;
}


/* ========================================================
   ESCRITORIO MEDIO
   ======================================================== */

@media (max-width: 1240px) {
  .header-inner {
    grid-template-columns:
      145px
      minmax(0, 1fr)
      auto
      !important;

    gap:
      12px
      !important;
  }

  .desktop-nav {
    gap:
      3px
      !important;
  }

  .nav-link {
    padding:
      0
      8px
      !important;

    gap:
      5px
      !important;

    font-size:
      11.75px
      !important;
  }

  .nav-link .icon,
.nav-link svg {
    width:
      14px
      !important;

    height:
      14px
      !important;
  }

  .header-actions {
    gap:
      5px
      !important;
  }
}


/* NUBO_TOPBAR_NATURAL_GLASS_V4_START */

/* ========================================================
   CAPA EXTERIOR TRANSPARENTE
   Elimina la franja blanca o negra detrás de la barra.
   ======================================================== */

.app-header {
  position: sticky;
  top: 0;
  height: 78px;

  border:
    0
    !important;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;

  backdrop-filter:
    none
    !important;

  -webkit-backdrop-filter:
    none
    !important;
}

.app-header::before {
  opacity:
    0.38
    !important;
}


/* ========================================================
   ÚNICA SUPERFICIE DE VIDRIO
   ======================================================== */

.header-inner {
  width:
    calc(100% - 40px)
    !important;

  max-width:
    1600px
    !important;

  height:
    calc(100% - 14px)
    !important;

  margin:
    7px
    auto
    0
    !important;

  padding:
    0
    18px
    !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.74)
    !important;

  border-radius:
    22px
    !important;

  background:
    rgba(255, 255, 255, 0.66)
    !important;

  box-shadow:
    0 12px 34px
    rgba(28, 65, 53, 0.08),
    inset 0 1px 0
    rgba(255, 255, 255, 0.76)
    !important;

  backdrop-filter:
    blur(20px)
    saturate(150%)
    !important;

  -webkit-backdrop-filter:
    blur(20px)
    saturate(150%)
    !important;
}


/* ========================================================
   NAVEGACIÓN NATURAL
   ======================================================== */

.nav-link {
  color:
    #596b64
    !important;

  border-color:
    transparent
    !important;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;
}

.nav-link:hover {
  color:
    var(--nav-accent)
    !important;

  border-color:
    color-mix(
      in srgb,
      var(--nav-accent) 16%,
      transparent
    )
    !important;

  background:
    color-mix(
      in srgb,
      var(--nav-soft) 68%,
      transparent
    )
    !important;

  box-shadow:
    none
    !important;
}

.nav-link.is-active {
  color:
    var(--nav-accent)
    !important;

  border-color:
    color-mix(
      in srgb,
      var(--nav-accent) 18%,
      transparent
    )
    !important;

  background:
    color-mix(
      in srgb,
      var(--nav-soft) 72%,
      rgba(255, 255, 255, 0.66)
    )
    !important;

  box-shadow:
    0 4px 12px
    color-mix(
      in srgb,
      var(--nav-accent) 8%,
      transparent
    )
    !important;
}

.nav-link.is-active .icon,
.nav-link.is-active svg {
  color:
    var(--nav-accent)
    !important;
}

.nav-link::after,
.nav-link.is-active::after {
  display:
    none
    !important;

  content:
    none
    !important;
}


/* ========================================================
   PERFIL SIN CÁPSULA
   ======================================================== */

.profile-button {
  min-height:
    46px;

  padding:
    3px
    2px
    3px
    4px
    !important;

  border:
    0
    !important;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;
}

.profile-button:hover {
  transform:
    none;

  border:
    0
    !important;

  background:
    rgba(220, 239, 231, 0.38)
    !important;

  box-shadow:
    none
    !important;
}

.profile-button .avatar {
  border:
    0
    !important;

  color:
    #16775b
    !important;

  background:
    rgba(215, 239, 230, 0.82)
    !important;

  box-shadow:
    none
    !important;
}

.profile-meta strong {
  color:
    #17382e
    !important;
}

.profile-meta span {
  color:
    #708078
    !important;
}


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

@media (max-width: 760px) {
  .header-inner {
    width:
      100%
      !important;

    height:
      100%
      !important;

    margin:
      0
      auto
      !important;

    border:
      0
      !important;

    border-radius:
      0
      !important;

    background:
      rgba(255, 255, 255, 0.78)
      !important;

    box-shadow:
      none
      !important;
  }

  
}

/* NUBO_TOPBAR_NATURAL_GLASS_V4_END */

/* NUBO_TOPBAR_COLORFUL_V2_END */

/* NUBO_REMOVE_TOPBAR_COLOR_LINE_V1_START */

/*
  Elimina exclusivamente la línea multicolor.
  La barra flotante mantiene su diseño y sticky.
*/

.app-header::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: none !important;
}

/* NUBO_REMOVE_TOPBAR_COLOR_LINE_V1_END */

/* NUBO_AI_CHAT_PREMIUM_V1_CSS_START */

/* ========================================================
   BOTÓN NUBO IA — TOPBAR
   ======================================================== */

.header-nubo-ai-tool {
  position: relative;

  overflow: visible;

  border-color:
    #d7ebe3
    !important;

  border-radius:
    50%
    !important;

  color:
    #177d61
    !important;

  background:
    linear-gradient(
      145deg,
      #f5fff9 0%,
      #f0fbf7 55%,
      #f3f1ff 100%
    )
    !important;

  box-shadow:
    0 5px 15px
    rgba(30, 110, 83, 0.08),
    inset 0 1px 0
    rgba(255, 255, 255, 0.92)
    !important;
}

.header-nubo-ai-tool::after {
  content: "";

  position: absolute;

  width: 7px;
  height: 7px;

  top: 4px;
  right: 3px;

  border:
    2px solid
    #ffffff;

  border-radius:
    50%;

  background:
    #22b987;

  box-shadow:
    0 0 0 2px
    rgba(34, 185, 135, 0.10);
}

.header-nubo-ai-tool .icon {
  width: 18px;
  height: 18px;

  transition:
    transform 200ms ease;
}

.header-nubo-ai-tool:hover {
  color:
    #116d53
    !important;

  border-color:
    #bfe1d4
    !important;

  background:
    linear-gradient(
      145deg,
      #ecfff6,
      #eef9f5 58%,
      #eeebff
    )
    !important;

  box-shadow:
    0 8px 20px
    rgba(24, 120, 86, 0.13)
    !important;
}

.header-nubo-ai-tool:hover .icon {
  transform:
    rotate(-7deg)
    scale(1.08);
}


/* ========================================================
   CAPA Y PANEL
   ======================================================== */

#nubo-ai-layer .chat-backdrop {
  background:
    rgba(17, 39, 32, 0.25);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

  animation:
    nubo-ai-backdrop-in
    180ms ease-out both;
}

#nubo-ai-layer .chat-drawer {
  width:
    min(480px, 100%);

  height:
    100vh;

  height:
    100dvh;

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

  overflow:
    hidden;

  border-left:
    1px solid
    rgba(57, 103, 86, 0.16);

  border-radius:
    26px 0 0 26px;

  background:
    #fbfdfc;

  box-shadow:
    -22px 0 70px
    rgba(21, 50, 41, 0.17);

  animation:
    nubo-ai-drawer-in
    280ms
    cubic-bezier(.22, .8, .28, 1)
    both;
}


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

#nubo-ai-layer .chat-head {
  min-height:
    82px;

  padding:
    16px
    18px;

  border-bottom:
    1px solid
    rgba(69, 111, 95, 0.12);

  background:
    radial-gradient(
      circle at 85% 0%,
      rgba(119, 104, 239, 0.09),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #fbfffd 0%,
      #f1fbf7 58%,
      #f7f4ff 100%
    );
}

#nubo-ai-layer .chat-identity {
  min-width:
    0;

  gap:
    12px;
}

#nubo-ai-layer .chat-avatar {
  width:
    48px;

  height:
    48px;

  flex:
    0 0 48px;

  display:
    grid;

  place-items:
    center;

  margin:
    0;

  border:
    1px solid
    rgba(53, 156, 119, 0.17);

  border-radius:
    16px;

  color:
    #147b5d;

  background:
    linear-gradient(
      145deg,
      #e8fff5,
      #e3f8f0 58%,
      #efedff
    );

  box-shadow:
    0 9px 22px
    rgba(34, 120, 88, 0.11),
    inset 0 1px 0
    #ffffff;
}

#nubo-ai-layer .chat-avatar .icon {
  width:
    23px;

  height:
    23px;
}

.nubo-ai-chat__identity {
  min-width:
    0;
}

#nubo-ai-layer
.nubo-ai-chat__eyebrow {
  display:
    block;

  margin:
    0 0 2px;

  color:
    #8a78de;

  font-size:
    9px;

  font-weight:
    820;

  letter-spacing:
    .11em;
}

#nubo-ai-layer
.chat-identity strong {
  display:
    block;

  color:
    #193b31;

  font-size:
    16px;

  font-weight:
    820;

  line-height:
    1.2;
}

#nubo-ai-layer
.nubo-ai-chat__status {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  margin-top:
    5px;

  color:
    #71847d;

  font-size:
    10.5px;

  line-height:
    1.2;
}

.nubo-ai-chat__status i {
  width:
    7px;

  height:
    7px;

  flex:
    0 0 7px;

  border-radius:
    50%;

  background:
    #27b887;

  box-shadow:
    0 0 0 4px
    rgba(39, 184, 135, 0.10);

  animation:
    nubo-ai-status-pulse
    2.4s ease-in-out infinite;
}

.nubo-ai-chat__head-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}

.nubo-ai-chat__head-button {
  width:
    36px;

  height:
    36px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(64, 104, 89, 0.13);

  border-radius:
    12px;

  color:
    #667b73;

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

  cursor:
    pointer;

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

.nubo-ai-chat__head-button:hover {
  transform:
    translateY(-1px);

  color:
    #147b5d;

  border-color:
    #c6e1d7;

  background:
    #f2fbf7;
}

.nubo-ai-chat__head-button .icon {
  width:
    17px;

  height:
    17px;
}


/* ========================================================
   CONTEXTO
   ======================================================== */

.nubo-ai-chat__context {
  min-width:
    0;

  padding:
    10px
    17px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  overflow-x:
    auto;

  border-bottom:
    1px solid
    rgba(69, 111, 95, 0.10);

  background:
    #ffffff;

  scrollbar-width:
    none;
}

.nubo-ai-chat__context::-webkit-scrollbar {
  display:
    none;
}

.nubo-ai-chat__context > span {
  flex:
    0 0 auto;

  min-height:
    29px;

  padding:
    0 10px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  border:
    1px solid
    #e2eee9;

  border-radius:
    999px;

  color:
    #61766e;

  background:
    #f7faf9;

  font-size:
    10px;

  font-weight:
    700;
}

.nubo-ai-chat__context .icon {
  width:
    13px;

  height:
    13px;

  color:
    #259571;
}


/* ========================================================
   ÁREA DE MENSAJES
   ======================================================== */

#nubo-ai-layer .chat-messages {
  min-height:
    0;

  padding:
    20px
    18px
    24px;

  gap:
    14px;

  overflow-y:
    auto;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(119, 104, 239, 0.045),
      transparent 34%
    ),
    radial-gradient(
      circle at 0% 18%,
      rgba(45, 180, 143, 0.055),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #fbfdfc,
      #f7faf8
    );

  scrollbar-color:
    #cfe4dc
    transparent;
}

#nubo-ai-layer
.chat-messages::-webkit-scrollbar {
  width:
    8px;
}

#nubo-ai-layer
.chat-messages::-webkit-scrollbar-thumb {
  border:
    2px solid
    transparent;

  border-radius:
    999px;

  background:
    #cfe4dc;

  background-clip:
    padding-box;
}


/* ========================================================
   BIENVENIDA
   ======================================================== */

.nubo-ai-welcome {
  position:
    relative;

  overflow:
    hidden;

  padding:
    21px;

  border:
    1px solid
    rgba(49, 163, 124, 0.15);

  border-radius:
    22px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(119, 104, 239, 0.12),
      transparent 38%
    ),
    radial-gradient(
      circle at 4% 100%,
      rgba(44, 181, 142, 0.13),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      #f1fff8 0%,
      #f7fffb 57%,
      #f8f6ff 100%
    );

  box-shadow:
    0 12px 32px
    rgba(39, 91, 72, 0.08);

  animation:
    nubo-ai-card-in
    300ms ease-out both;
}

.nubo-ai-welcome__icon {
  width:
    43px;

  height:
    43px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    15px;

  border:
    1px solid
    rgba(38, 159, 116, 0.15);

  border-radius:
    14px;

  color:
    #16815f;

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

  box-shadow:
    0 7px 18px
    rgba(35, 124, 91, 0.09);
}

.nubo-ai-welcome__icon .icon {
  width:
    21px;

  height:
    21px;
}

.nubo-ai-welcome__eyebrow {
  display:
    block;

  color:
    #7d6bd1;

  font-size:
    9px;

  font-weight:
    820;

  letter-spacing:
    .10em;
}

.nubo-ai-welcome h2 {
  margin:
    6px 0 0;

  color:
    #173c31;

  font-size:
    20px;

  font-weight:
    830;

  letter-spacing:
    -.02em;
}

.nubo-ai-welcome p {
  margin:
    9px 0 0;

  max-width:
    370px;

  color:
    #60766d;

  font-size:
    12.5px;

  line-height:
    1.6;
}

.nubo-ai-capabilities {
  margin-top:
    14px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;
}

.nubo-ai-capabilities span {
  padding:
    5px 9px;

  border-radius:
    999px;

  color:
    #337864;

  background:
    rgba(220, 247, 236, 0.78);

  font-size:
    9.5px;

  font-weight:
    720;
}

.nubo-ai-prompts {
  margin-top:
    17px;

  display:
    grid;

  gap:
    8px;
}

.nubo-ai-prompts button {
  width:
    100%;

  min-height:
    42px;

  padding:
    9px 11px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  border:
    1px solid
    rgba(67, 111, 94, 0.13);

  border-radius:
    12px;

  color:
    #365e51;

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

  font: inherit;

  font-size:
    11px;

  font-weight:
    720;

  text-align:
    left;

  cursor:
    pointer;

  box-shadow:
    0 4px 11px
    rgba(47, 91, 75, 0.035);

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

.nubo-ai-prompts button:hover {
  transform:
    translateX(3px);

  border-color:
    #bcded1;

  background:
    #ffffff;

  box-shadow:
    0 7px 16px
    rgba(34, 111, 82, 0.075);
}

.nubo-ai-prompts .icon {
  width:
    16px;

  height:
    16px;

  flex:
    0 0 16px;

  color:
    #228f6b;
}


/* ========================================================
   MENSAJES
   ======================================================== */

.nubo-ai-message {
  width:
    100%;

  display:
    flex;

  align-items:
    flex-end;

  gap:
    8px;

  animation:
    nubo-ai-message-in
    240ms ease-out both;

  animation-delay:
    calc(
      min(
        var(--message-index, 0),
        8
      ) * 22ms
    );
}

.nubo-ai-message.is-user {
  justify-content:
    flex-end;
}

.nubo-ai-message__avatar {
  width:
    29px;

  height:
    29px;

  flex:
    0 0 29px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    #d8ebe3;

  border-radius:
    10px;

  color:
    #19805f;

  background:
    #edf9f4;
}

.nubo-ai-message__avatar .icon {
  width:
    14px;

  height:
    14px;
}

.nubo-ai-message__body {
  max-width:
    84%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}

.nubo-ai-message.is-user
.nubo-ai-message__body {
  align-items:
    flex-end;
}

.nubo-ai-message__author {
  padding-inline:
    3px;

  color:
    #83928c;

  font-size:
    9.5px;

  font-weight:
    700;
}

#nubo-ai-layer .chat-bubble {
  max-width:
    none;

  padding:
    11px
    13px;

  border-radius:
    15px;

  font-size:
    12.5px;

  line-height:
    1.58;

  box-shadow:
    0 5px 15px
    rgba(30, 68, 54, 0.055);
}

#nubo-ai-layer
.chat-bubble.is-nubo-ai {
  border:
    1px solid
    #e0ebe7;

  border-bottom-left-radius:
    5px;

  color:
    #3c534b;

  background:
    #ffffff;
}

#nubo-ai-layer
.chat-bubble.is-user {
  border:
    1px solid
    rgba(12, 132, 91, 0.16);

  border-bottom-right-radius:
    5px;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #1ba77b,
      #168c69
    );

  box-shadow:
    0 7px 18px
    rgba(19, 139, 101, 0.17);
}


/* ========================================================
   INDICADOR DE ESCRITURA
   ======================================================== */

#nubo-ai-layer
.chat-bubble.is-loading {
  min-height:
    39px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  color:
    #6d8279;
}

.nubo-ai-typing {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;
}

.nubo-ai-typing i {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    #38a582;

  animation:
    nubo-ai-typing-dot
    1.05s ease-in-out infinite;
}

.nubo-ai-typing i:nth-child(2) {
  animation-delay:
    130ms;
}

.nubo-ai-typing i:nth-child(3) {
  animation-delay:
    260ms;
}


/* ========================================================
   COMPOSITOR
   ======================================================== */

#nubo-ai-layer .chat-form {
  padding:
    13px
    15px
    max(
      14px,
      env(safe-area-inset-bottom)
    );

  display:
    block;

  border-top:
    1px solid
    rgba(59, 102, 86, 0.12);

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

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.nubo-ai-composer {
  min-height:
    54px;

  padding:
    5px
    5px
    5px
    14px;

  display:
    grid;

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

  align-items:
    end;

  gap:
    7px;

  border:
    1px solid
    #d6e5df;

  border-radius:
    16px;

  background:
    #ffffff;

  box-shadow:
    0 6px 19px
    rgba(37, 75, 61, 0.07);

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

.nubo-ai-composer:focus-within {
  border-color:
    #9dd4c0;

  box-shadow:
    0 0 0 4px
    rgba(41, 166, 124, 0.09),
    0 8px 22px
    rgba(37, 75, 61, 0.08);
}

#nubo-ai-layer
.chat-form textarea {
  width:
    100%;

  min-height:
    42px;

  max-height:
    144px;

  padding:
    11px 0
    8px;

  overflow-y:
    auto;

  resize:
    none;

  border:
    0;

  outline:
    0;

  color:
    #334d44;

  background:
    transparent;

  font:
    inherit;

  font-size:
    12.5px;

  line-height:
    1.45;
}

#nubo-ai-layer
.chat-form textarea::placeholder {
  color:
    #91a099;
}

.nubo-ai-send {
  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    14px;

  color:
    #ffffff;

  background:
    linear-gradient(
      145deg,
      #2db48a,
      #168c69
    );

  box-shadow:
    0 8px 17px
    rgba(22, 140, 105, 0.22);

  cursor:
    pointer;

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

.nubo-ai-send:hover {
  transform:
    translateY(-2px)
    scale(1.02);

  filter:
    saturate(1.06);

  box-shadow:
    0 11px 23px
    rgba(22, 140, 105, 0.28);
}

.nubo-ai-send:active {
  transform:
    translateY(0)
    scale(.97);
}

.nubo-ai-send .icon {
  width:
    18px;

  height:
    18px;
}

.nubo-ai-form-meta {
  margin-top:
    7px;

  padding-inline:
    3px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;

  color:
    #93a19b;

  font-size:
    8.5px;

  line-height:
    1.3;
}


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

@keyframes nubo-ai-backdrop-in {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}

@keyframes nubo-ai-drawer-in {
  from {
    opacity:
      0;

    transform:
      translateX(42px);
  }

  to {
    opacity:
      1;

    transform:
      translateX(0);
  }
}

@keyframes nubo-ai-card-in {
  from {
    opacity:
      0;

    transform:
      translateY(9px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }
}

@keyframes nubo-ai-message-in {
  from {
    opacity:
      0;

    transform:
      translateY(7px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }
}

@keyframes nubo-ai-status-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 4px
      rgba(39, 184, 135, 0.10);
  }

  50% {
    box-shadow:
      0 0 0 7px
      rgba(39, 184, 135, 0.02);
  }
}

@keyframes nubo-ai-typing-dot {
  0%,
  60%,
  100% {
    opacity:
      .35;

    transform:
      translateY(0);
  }

  30% {
    opacity:
      1;

    transform:
      translateY(-3px);
  }
}


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

@media (max-width: 760px) {
  #nubo-ai-layer .chat-drawer {
    width:
      100%;

    border:
      0;

    border-radius:
      0;

    box-shadow:
      none;
  }

  #nubo-ai-layer .chat-head {
    min-height:
      76px;

    padding:
      calc(
        12px +
        env(safe-area-inset-top)
      )
      14px
      12px;
  }

  #nubo-ai-layer .chat-avatar {
    width:
      44px;

    height:
      44px;

    flex-basis:
      44px;

    border-radius:
      14px;
  }

  .nubo-ai-chat__context {
    padding-inline:
      13px;
  }

  #nubo-ai-layer .chat-messages {
    padding:
      16px
      14px
      20px;
  }

  .nubo-ai-welcome {
    padding:
      18px;

    border-radius:
      19px;
  }

  .nubo-ai-message__body {
    max-width:
      87%;
  }

  .nubo-ai-form-meta {
    display:
      none;
  }

  #nubo-ai-layer .chat-form {
    padding:
      11px
      12px
      max(
        12px,
        env(safe-area-inset-bottom)
      );
  }
}

@media (max-width: 390px) {
  .nubo-ai-chat__head-button {
    width:
      33px;

    height:
      33px;
  }

  .nubo-ai-welcome h2 {
    font-size:
      18px;
  }

  .nubo-ai-prompts button {
    min-height:
      40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nubo-ai-layer *,
  .header-nubo-ai-tool * {
    animation:
      none
      !important;

    transition-duration:
      0.01ms
      !important;
  }
}

/* NUBO_AI_CHAT_PREMIUM_V1_CSS_END */



/* NUBO_AI_HOTFIX_V1_CSS_START */

/* Mostrar únicamente dos accesos rápidos */
.nubo-ai-prompts button:nth-child(n + 3) {
  display: none !important;
}

.nubo-ai-prompts {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.nubo-ai-prompts button {
  min-width: 0;
  min-height: 52px !important;
  padding: 11px 12px !important;
}

/* Burbujas más naturales */
.nubo-ai-message__body {
  max-width: min(82%, 365px) !important;
}

.nubo-ai-message.is-user .nubo-ai-message__body {
  max-width: min(76%, 335px) !important;
}

#nubo-ai-layer .chat-bubble {
  max-width: none !important;
  padding: 12px 15px !important;
  border-radius: 18px !important;
  font-size: 12.5px !important;
  line-height: 1.62 !important;
  text-align: left !important;
}

#nubo-ai-layer .chat-bubble.is-user {
  border-bottom-right-radius: 6px !important;
  background: linear-gradient(145deg, #24aa82, #168f6b) !important;
  box-shadow: 0 10px 24px rgba(17, 137, 98, 0.16) !important;
}

#nubo-ai-layer .chat-bubble.is-nubo-ai {
  border: 1px solid rgba(67, 107, 91, 0.14) !important;
  border-bottom-left-radius: 6px !important;
  color: #40574f !important;
  background: linear-gradient(145deg, #ffffff, #fbfdfc) !important;
  box-shadow: 0 8px 22px rgba(34, 74, 59, 0.065) !important;
}

#nubo-ai-layer .chat-bubble.is-error {
  border-color: #ead9bd !important;
  color: #70552d !important;
  background: linear-gradient(145deg, #fffdf8, #fff9ed) !important;
}

@media (max-width: 420px) {
  .nubo-ai-prompts {
    grid-template-columns: 1fr !important;
  }

  .nubo-ai-message__body,
  .nubo-ai-message.is-user .nubo-ai-message__body {
    max-width: 86% !important;
  }
}

/* NUBO_AI_HOTFIX_V1_CSS_END */

/* NUBO_AI_BALLOON_V2_START */

/*
  Burbujas aisladas del antiguo sistema chat-bubble.
  Tamaño determinado por el contenido.
*/

#nubo-ai-layer .nubo-ai-message {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;

  display: flex !important;
  align-items: flex-end !important;

  gap: 8px !important;
}

#nubo-ai-layer
.nubo-ai-message.is-user {
  justify-content: flex-end !important;
}

#nubo-ai-layer
.nubo-ai-message__body {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;

  max-width: min(80%, 360px) !important;

  display: inline-flex !important;
  flex: 0 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  gap: 3px !important;
}

#nubo-ai-layer
.nubo-ai-message.is-user
.nubo-ai-message__body {
  max-width: min(76%, 340px) !important;

  align-items: flex-end !important;
}

#nubo-ai-layer
.nubo-ai-message__author {
  margin: 0 !important;
  padding: 0 3px !important;

  color: #82938c !important;

  font-size: 9.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

#nubo-ai-layer
.nubo-ai-balloon {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;

  max-width: 100% !important;

  display: inline-block !important;

  margin: 0 !important;
  padding: 9px 12px !important;

  border-radius: 16px !important;

  font-size: 12.5px !important;
  line-height: 1.46 !important;
  text-align: left !important;

  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;

  box-sizing: border-box !important;
}

#nubo-ai-layer
.nubo-ai-balloon.is-user {
  margin-left: auto !important;

  border:
    1px solid
    rgba(13, 135, 96, 0.13)
    !important;

  border-bottom-right-radius:
    5px
    !important;

  color:
    #ffffff
    !important;

  background:
    linear-gradient(
      145deg,
      #24aa82,
      #168f6b
    )
    !important;

  box-shadow:
    0 7px 19px
    rgba(17, 137, 98, 0.14)
    !important;
}

#nubo-ai-layer
.nubo-ai-balloon.is-nubo-ai {
  border:
    1px solid
    rgba(70, 109, 94, 0.14)
    !important;

  border-bottom-left-radius:
    5px
    !important;

  color:
    #40574f
    !important;

  background:
    #ffffff
    !important;

  box-shadow:
    0 6px 18px
    rgba(34, 74, 59, 0.055)
    !important;
}

#nubo-ai-layer
.nubo-ai-balloon.is-error {
  border-color:
    #ead9bd
    !important;

  color:
    #70552d
    !important;

  background:
    #fffaf1
    !important;
}

#nubo-ai-layer
.nubo-ai-balloon.is-loading {
  min-height: 34px !important;

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

  gap: 8px !important;
}

@media (max-width: 420px) {
  #nubo-ai-layer
  .nubo-ai-message__body {
    max-width: 87% !important;
  }

  #nubo-ai-layer
  .nubo-ai-message.is-user
  .nubo-ai-message__body {
    max-width: 82% !important;
  }

  #nubo-ai-layer
  .nubo-ai-balloon {
    padding: 8px 11px !important;

    font-size: 12.25px !important;
  }
}

/* NUBO_AI_BALLOON_V2_END */


/* NUBO_AI_BALLOON_SPACING_V3_START */

/*
  Corrige los espacios producidos por los saltos
  e indentaciones de las plantillas HTML.
*/

#nubo-ai-layer .nubo-ai-balloon {
  white-space: normal !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;

  padding: 9px 12px !important;

  line-height: 1.45 !important;

  vertical-align: top !important;
}

#nubo-ai-layer .nubo-ai-message__body {
  min-height: 0 !important;
  height: auto !important;
}

#nubo-ai-layer .nubo-ai-balloon.is-user {
  max-width: 100% !important;
}

#nubo-ai-layer .nubo-ai-balloon.is-nubo-ai {
  max-width: 100% !important;
}

/* NUBO_AI_BALLOON_SPACING_V3_END */


/* NUBO_AI_MESSAGE_UX_V1_CSS_START */

/* Respuesta con ancho cómodo y estructura legible */

#nubo-ai-layer
.nubo-ai-message.is-nubo-ai
.nubo-ai-message__body {
  width: min(88%, 380px) !important;
  max-width: min(88%, 380px) !important;
}

#nubo-ai-layer
.nubo-ai-balloon.is-nubo-ai {
  width: 100% !important;
  padding: 13px 15px !important;
}

#nubo-ai-layer
.nubo-ai-balloon p {
  margin: 0 !important;
}

#nubo-ai-layer
.nubo-ai-balloon p + p {
  margin-top: 8px !important;
}

#nubo-ai-layer
.nubo-ai-balloon h4 {
  margin: 13px 0 5px !important;

  color: #167a5c;

  font-size: 11.5px;
  font-weight: 820;
  line-height: 1.3;
}

#nubo-ai-layer
.nubo-ai-balloon h4:first-child {
  margin-top: 0 !important;
}

#nubo-ai-layer
.nubo-ai-balloon strong {
  color: #245d4c;
  font-weight: 800;
}

#nubo-ai-layer
.nubo-ai-balloon.is-user strong {
  color: inherit;
}

.nubo-ai-answer-list {
  margin: 8px 0 0;
  padding-left: 18px;
}

.nubo-ai-answer-list li {
  padding-left: 2px;
}

.nubo-ai-answer-list li + li {
  margin-top: 5px;
}

.nubo-ai-answer-list li::marker {
  color: #23a37b;
}

/* Datos que llegan separados mediante | */

.nubo-ai-fact {
  display: grid;

  grid-template-columns:
    minmax(92px, .8fr)
    minmax(0, 1.2fr);

  gap: 10px;

  padding: 8px 0;

  border-bottom:
    1px solid
    rgba(54, 101, 84, 0.10);
}

.nubo-ai-fact:last-child {
  border-bottom: 0;
}

.nubo-ai-fact strong {
  color: #1a7659 !important;
  font-size: 11px;
}

.nubo-ai-fact span {
  color: #526860;
}


/* Scroll sin barra visible */

#nubo-ai-layer .chat-messages {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;

  cursor: grab;

  touch-action: pan-y;
  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;
}

#nubo-ai-layer
.chat-messages::-webkit-scrollbar {
  display: none !important;

  width: 0 !important;
  height: 0 !important;
}

#nubo-ai-layer
.chat-messages.is-dragging {
  cursor: grabbing;
  user-select: none;
}


/* Móvil */

@media (max-width: 420px) {
  #nubo-ai-layer
  .nubo-ai-message.is-nubo-ai
  .nubo-ai-message__body {
    width: 89% !important;
    max-width: 89% !important;
  }

  .nubo-ai-fact {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* NUBO_AI_MESSAGE_UX_V1_CSS_END */


/* NUBO_AI_MESSAGE_SPACING_V1_START */

/*
  Separa las filas completas del chat.
  Evita que la respuesta invada el mensaje anterior.
*/

#nubo-ai-layer .chat-messages {
  gap: 0 !important;
}

#nubo-ai-layer .nubo-ai-message {
  position: relative !important;

  flex:
    0 0 auto
    !important;

  min-height:
    0
    !important;

  margin:
    0
    !important;

  overflow:
    visible
    !important;
}

#nubo-ai-layer
.nubo-ai-message + .nubo-ai-message {
  margin-top:
    14px
    !important;
}

#nubo-ai-layer
.nubo-ai-message.is-user +
.nubo-ai-message.is-nubo-ai {
  margin-top:
    18px
    !important;
}

#nubo-ai-layer
.nubo-ai-message__body {
  position:
    relative
    !important;
}

#nubo-ai-layer
.nubo-ai-message__author {
  position:
    static
    !important;

  display:
    block
    !important;
}

/* NUBO_AI_MESSAGE_SPACING_V1_END */


/* NUBO_AI_DRAG_COPY_V1_CSS_START */

/*
  El fondo del chat puede arrastrarse.
  Los mensajes conservan selección y copiado.
*/

#nubo-ai-layer .chat-messages {
  cursor: grab !important;
}

#nubo-ai-layer
.chat-messages.is-dragging {
  cursor: grabbing !important;
  user-select: none !important;
}

#nubo-ai-layer
.nubo-ai-message__body,
#nubo-ai-layer
.nubo-ai-balloon,
#nubo-ai-layer
.nubo-ai-message__author {
  cursor: text !important;

  user-select: text !important;
  -webkit-user-select: text !important;
}

#nubo-ai-layer
.nubo-ai-balloon * {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* NUBO_AI_DRAG_COPY_V1_CSS_END */

/* NUBO_INTEGRATIONS_PREMIUM_V1_CSS_START */

.nubo-settings-integrations-entry__body {
  margin-top: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #e3ede8;
  border-radius: 15px;
  background: linear-gradient(145deg, #f8fcfa, #f7f8ff);
}

.nubo-settings-integrations-entry__logos {
  display: flex;
  align-items: center;
}

.nubo-settings-integrations-entry__logos span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-left: -7px;
  border: 2px solid #fff;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(38, 79, 63, .09);
}

.nubo-settings-integrations-entry__logos span:first-child {
  margin-left: 0;
}

.nubo-settings-integrations-entry__logos img {
  width: 18px;
  height: 18px;
}

.nubo-settings-integrations-entry__body strong {
  display: block;
  color: #213d34;
  font-size: 12px;
}

.nubo-settings-integrations-entry__body p {
  margin: 4px 0 0;
  color: #75877f;
  font-size: 10.5px;
  line-height: 1.45;
}

.nubo-settings-integrations-entry__button {
  width: 100%;
  margin-top: 11px;
  justify-content: space-between;
}

.nubo-integrations-page {
  width: min(1160px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.nubo-integrations-hero {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid #dcebe4;
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 10%, rgba(119,104,239,.11), transparent 31%),
    radial-gradient(circle at 4% 100%, rgba(34,183,135,.12), transparent 34%),
    linear-gradient(145deg, #f9fffc, #f7f6ff);
  box-shadow: 0 16px 38px rgba(32, 74, 58, .08);
}

.nubo-integrations-back {
  padding: 0;
  border: 0;
  color: #527068;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.nubo-integrations-hero__main {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.nubo-integrations-hero__icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border: 1px solid #cfe8dd;
  border-radius: 17px;
  color: #168463;
  background: rgba(255,255,255,.82);
  box-shadow: 0 9px 22px rgba(36, 117, 86, .11);
}

.nubo-integrations-hero__icon .icon {
  width: 23px;
  height: 23px;
}

.nubo-integrations-eyebrow,
.nubo-integrations-section > header > span {
  color: #7867d4;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
}

.nubo-integrations-hero h1 {
  margin: 5px 0 0;
  color: #173a30;
  font-size: 29px;
  letter-spacing: -.035em;
}

.nubo-integrations-hero p {
  max-width: 700px;
  margin: 8px 0 0;
  color: #647970;
  font-size: 12.5px;
  line-height: 1.6;
}

.nubo-integrations-stats {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.nubo-integrations-stats article {
  padding: 11px 13px;
  border: 1px solid rgba(73, 111, 96, .12);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}

.nubo-integrations-stats strong,
.nubo-integrations-stats span {
  display: block;
}

.nubo-integrations-stats strong {
  color: #245f4d;
  font-size: 13px;
}

.nubo-integrations-stats span {
  margin-top: 2px;
  color: #7a8b84;
  font-size: 9.5px;
}

.nubo-integrations-stats .is-secure strong {
  color: #7b68d5;
}

.nubo-integrations-section {
  padding: 21px;
  border: 1px solid #e0e9e5;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(40, 72, 60, .055);
}

.nubo-integrations-section > header h2 {
  margin: 5px 0 0;
  color: #203c33;
  font-size: 18px;
}

.nubo-integrations-section > header p {
  margin: 6px 0 0;
  color: #7b8b85;
  font-size: 11px;
}

.nubo-integrations-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.nubo-integration-premium {
  position: relative;
  overflow: hidden;
  min-height: 205px;
  padding: 17px;
  border: 1px solid #e1ebe6;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #fafcfb);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.nubo-integration-premium::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -62px;
  bottom: -70px;
  border-radius: 50%;
  background: var(--integration-glow, rgba(39, 173, 129, .08));
}

.nubo-integration-premium:hover {
  transform: translateY(-3px);
  border-color: #cae3d9;
  box-shadow: 0 15px 30px rgba(31, 83, 63, .09);
}

.nubo-integration-premium__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.nubo-integration-premium__logo,
.nubo-integration-premium__generic,
.nubo-integration-premium__brand-pair i {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid #e1ece7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(39, 79, 63, .07);
}

.nubo-integration-premium__logo img,
.nubo-integration-premium__brand-pair img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.nubo-integration-premium__generic {
  color: #198765;
}

.nubo-integration-premium__generic .icon {
  width: 20px;
  height: 20px;
}

.nubo-integration-premium__brand-pair {
  display: flex;
}

.nubo-integration-premium__brand-pair i + i {
  margin-left: -8px;
}

.nubo-integration-premium__top b {
  padding: 5px 8px;
  border: 1px solid #f0dfbd;
  border-radius: 999px;
  color: #a06b18;
  background: #fff8e9;
  font-size: 8.5px;
  font-weight: 800;
}

.nubo-integration-premium h3 {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  color: #1f3e34;
  font-size: 15px;
}

.nubo-integration-premium p {
  position: relative;
  z-index: 1;
  margin: 7px 0 0;
  color: #6f827a;
  font-size: 11px;
  line-height: 1.55;
}

.nubo-integration-premium small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 12px;
  color: #8a9993;
  font-size: 9.5px;
}

.nubo-integration-premium.is-whatsapp { --integration-glow: rgba(37,211,102,.12); }
.nubo-integration-premium.is-email { --integration-glow: rgba(66,133,244,.11); }
.nubo-integration-premium.is-banks { --integration-glow: rgba(40,166,118,.11); }
.nubo-integration-premium.is-import { --integration-glow: rgba(31,167,178,.10); }
.nubo-integration-premium.is-drive { --integration-glow: rgba(66,133,244,.10); }
.nubo-integration-premium.is-learning { --integration-glow: rgba(119,104,239,.12); }

.nubo-bank-logos {
  position: relative;
  z-index: 1;
  margin-top: 15px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 7px;
  border: 1px solid #e5ece9;
  border-radius: 13px;
  background: rgba(255,255,255,.78);
}

.nubo-bank-logos img {
  width: 100%;
  height: 24px;
  object-fit: contain;
  filter: saturate(.92);
}

.nubo-integrations-security {
  padding: 17px 18px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #d8e9e1;
  border-radius: 18px;
  background: linear-gradient(145deg, #f3fcf8, #f8f7ff);
}

.nubo-integrations-security > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #198664;
  background: #fff;
}

.nubo-integrations-security strong {
  color: #24483c;
  font-size: 12px;
}

.nubo-integrations-security p {
  margin: 4px 0 0;
  color: #71847c;
  font-size: 10px;
  line-height: 1.5;
}

.nubo-integrations-security > b {
  padding: 6px 9px;
  border-radius: 999px;
  color: #7968ce;
  background: #f0edff;
  font-size: 9px;
}

@media (max-width: 760px) {
  .nubo-integrations-hero,
  .nubo-integrations-section {
    padding: 17px;
    border-radius: 19px;
  }

  .nubo-integrations-hero__main {
    align-items: flex-start;
  }

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

  .nubo-integrations-stats,
  .nubo-integrations-grid {
    grid-template-columns: 1fr;
  }

  .nubo-integration-premium {
    min-height: 0;
  }

  .nubo-integrations-security {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .nubo-integrations-security > b {
    grid-column: 2;
    justify-self: start;
  }

  .nubo-bank-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .nubo-integration-premium {
    transition: none;
  }
}

/* NUBO_INTEGRATIONS_PREMIUM_V1_CSS_END */