/* VERTEX — base + shell. Scaffold inicial; la app Wealth se construye sobre esto. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--ink);
  color: var(--tx);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; min-height: 100vh; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.2; }
h1 { font-size: 2rem; }
em, i { font-style: italic; }

a { color: var(--jade); text-decoration: none; }

.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* ── Botones ── */
button { font-family: var(--font-ui); cursor: pointer; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 11px 18px; border-radius: var(--r-btn); border: 1px solid transparent;
  font-size: .95rem; font-weight: 600; transition: filter .15s, background .15s;
}
.btn-pri { background: var(--jade); color: var(--on-jade); }
.btn-pri:hover { filter: brightness(1.07); }
.btn-sec { background: transparent; color: var(--tx); border-color: rgba(255,255,255,.18); }
.btn-sec:hover { border-color: rgba(255,255,255,.34); }
.btn-premium { background: rgba(200,169,106,.12); color: var(--champagne); border-color: rgba(200,169,106,.34); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Inputs ── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.field label { font-size: .82rem; color: var(--tx-mute); }
.input {
  background: var(--surface); border: 1px solid var(--line); color: var(--tx);
  border-radius: var(--r-input); padding: 11px 13px; font-size: .95rem; font-family: var(--font-ui);
}
.input:focus { outline: none; border-color: var(--jade-dark); }

/* ── Cards ── */
.card {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--sp-5);
}

/* ── Layout shell ── */
#app { flex: 1; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 920px; margin: 0 auto; padding: var(--sp-5); }

.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .04em; }
.brand img { width: 30px; height: 30px; }
.brand b { font-weight: 600; }
/* Wordmark unificado con el del login: VERTEX claro + Wealth itálica jade */
.brand .brand-vertex { font-family: var(--font-ui); font-weight: 600; letter-spacing: .2em; color: var(--tx-soft); font-size: .92rem; }
.brand .brand-wealth { font-family: var(--font-display); font-style: italic; color: var(--jade); font-size: 1.08rem; line-height: 1; }
.brand .tag { font-family: var(--font-ui); font-size: .7rem; color: var(--tx-mute); letter-spacing: .12em; text-transform: uppercase; padding-top: 3px; }

/* ── Pantalla de conexión / centrada ── */
.center { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }
.panel { width: 100%; max-width: 420px; }
.panel .lead { color: var(--tx-mute); margin-bottom: var(--sp-5); }
.panel h1 { margin-bottom: var(--sp-2); }

/* ── Hub placeholder ── */
.hero { text-align: center; padding: var(--sp-7) var(--sp-5); }
.hero .apex { width: 72px; height: 72px; margin-bottom: var(--sp-4); }
.hero h1 { font-size: 2.4rem; margin-bottom: var(--sp-2); }
.hero h1 em { color: var(--jade); }
.hero p { color: var(--tx-mute); max-width: 460px; margin: 0 auto; }

.verticals { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
.vcard { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-5); }
.vcard h3 { margin-bottom: 6px; }
.vcard.active { border-color: var(--jade-dark); }
.vcard .state { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-mute); }
.vcard.active .state { color: var(--jade); }

/* ── Toast ── */
#toast {
  position: fixed;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--cream);
  color: #1a1a18;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--shadow);
  /* opacity+visibility garantizan invisibilidad real, independiente del bottom */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease, transform .28s ease;
  z-index: 200;
  white-space: nowrap;
}
#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

/* Cuando hay tab bar, el toast sube por encima de ella */
body.has-nav #toast {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 720px) {
  body.has-nav #toast {
    bottom: 22px;
  }
}

.muted { color: var(--tx-mute); font-size: .85rem; }

@media (max-width: 540px) {
  .wrap { padding: var(--sp-4); }
  .hero h1 { font-size: 1.9rem; }
}

/* ── Banner de nueva version: #vx-sw-banner (web SW) y #vx-update-banner (APK nativo) ── */
#vx-sw-banner,
#vx-update-banner {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
  left: 12px;
  right: 12px;
  background: var(--raised);
  border: 1px solid rgba(52, 200, 138, 0.32);
  border-radius: var(--r-card);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.48);
  z-index: 190;
  animation: vx-banner-in .28s cubic-bezier(.22,1,.36,1) both;
}
#vx-sw-banner.vx-banner-out,
#vx-update-banner.vx-banner-out {
  animation: vx-banner-out .22s ease-in both;
}
@keyframes vx-banner-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vx-banner-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}
.vx-banner-ico {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: rgba(52, 200, 138, 0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vx-banner-body {
  flex: 1;
  min-width: 0;
}
.vx-banner-titulo {
  font-size: .88rem;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 2px;
}
.vx-banner-sub {
  font-size: .8rem;
  color: var(--tx-mute);
  line-height: 1.4;
}
.vx-banner-version {
  font-size: .75rem;
  color: var(--jade);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.vx-banner-acciones {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.vx-banner-btn-pri {
  flex: 1;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--jade);
  border: none;
  color: #08110C;
  font-size: .82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.vx-banner-btn-sec {
  padding: 8px 14px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--tx-mute);
  font-size: .82rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
/* En desktop (sin tab bar), el banner baja al margen del safe-area */
@media (min-width: 720px) {
  #vx-sw-banner,
  #vx-update-banner {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    left: auto;
    right: 20px;
    width: 340px;
  }
}

/* ══════════════════════════════════════════
   VERTEX ID — pantalla de auth
══════════════════════════════════════════ */
.auth-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: var(--ink);
  background-image: radial-gradient(900px 500px at 50% -10%, rgba(52,200,138,.06), transparent 60%);
  /* 100dvh: dynamic viewport — descuenta la barra de navegación en móvil (100vh la incluye y causa scroll) */
  min-height: 100dvh;
}

.auth-box {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}

.auth-apex {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: linear-gradient(160deg, #16201B, #0C100E);
  border: 1px solid rgba(52,200,138,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 44px rgba(52,200,138,.14);
}

.auth-wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
}

.auth-wordmark span {
  font-size: 18px;
  letter-spacing: .28em;
  font-weight: 600;
  color: var(--tx);
  font-family: var(--font-ui);
}

.auth-wordmark em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--jade);
}

/* Tagline integrado en la pantalla de login — reemplaza el antiguo paso 0 del onboarding */
.auth-tagline {
  font-family: var(--font-display);
  font-size: clamp(13px, 3.5vw, 15px);
  font-style: italic;
  color: var(--tx-mute);
  text-align: center;
  margin-top: 2px;
  letter-spacing: .01em;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.auth-tabs {
  display: flex;
  background: var(--raised);
  border-radius: var(--r-btn);
  padding: 3px;
  gap: 3px;
}

.auth-tab {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius: 7px;
  font-size: .88rem;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background .15s, color .15s;
  color: var(--tx-mute);
  background: transparent;
}

.auth-tab.active {
  background: var(--surface);
  color: var(--tx);
}

.auth-confirm {
  background: rgba(52,200,138,.08);
  border: 1px solid rgba(52,200,138,.22);
  border-radius: 12px;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.auth-confirm p {
  font-size: .88rem;
  color: var(--tx-mute);
  line-height: 1.5;
}

.auth-confirm strong {
  font-size: .95rem;
  color: var(--jade);
}

/* Botón de acceso con Google — solo web (oculto en nativo hasta Fase 2) */
.btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--tx);
  font-family: var(--font-ui);
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-google:hover:not(:disabled) {
  background: #252D2F;
  border-color: #5A6367;
}
.btn-google:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════
   Onboarding — pantalla completa responsive
══════════════════════════════════════════ */
.ob-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center; /* centra .ob-page-inner horizontalmente en desktop */
  min-height: 100dvh;
  background: var(--ink);
  background-image: radial-gradient(900px 500px at 50% -10%, rgba(52,200,138,.05), transparent 60%);
}

/* Columna centrada para desktop: el onboarding no se estira a 2000px */
.ob-page-inner {
  width: 100%;
  max-width: 480px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* chrome (barra superior con progreso) */
.ob-chrome {
  flex: none;
  padding: var(--sp-3) var(--sp-5) 0;
}

.ob-chrome-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ob-back {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--tx-mute);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  flex: none;
  line-height: 1;
}

/* Placeholder invisible del mismo ancho que ob-back para step 1 (sin botón atrás) */
.ob-back-placeholder {
  width: 36px;
  height: 36px;
  flex: none;
}

.ob-progress-track {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.ob-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--jade);
  transition: width .3s ease;
}

.ob-step-label {
  font-size: 12px;
  color: #67716C;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* cuerpo scrolleable */
.ob-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--sp-5);
  scrollbar-width: none;
}
.ob-body::-webkit-scrollbar { display: none; }

/* espaciador inferior para que el contenido no quede bajo el footer */
.ob-spacer { height: 160px; flex: none; }

/* footer fijo */
.ob-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
  background: linear-gradient(180deg, rgba(11,14,13,0) 0%, var(--ink) 32%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* animación vxup */
@keyframes vxup {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.ob-step { animation: vxup .3s ease both; }

/* step 0 (bienvenida) eliminado — el tagline vive ahora en .auth-tagline dentro de #auth */

/* pasos 1-4 comunes */
.ob-step-content { padding-top: 26px; }

.ob-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(52,200,138,.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ob-step-content h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 27px);
  color: var(--tx);
  margin: 18px 0 0;
  font-weight: 400;
}

.ob-step-content p.ob-desc {
  font-size: 13.5px;
  color: #8A938F;
  margin: 8px 0 0;
  line-height: 1.55;
}

/* inputs inline del onboarding */
.ob-input {
  width: 100%;
  margin-top: 7px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 15px 16px;
  color: var(--tx-soft);
  font-size: 15px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color .15s;
}
.ob-input:focus { border-color: var(--jade-dark); }

.ob-label {
  font-size: 11.5px;
  color: var(--tx-mute);
  font-weight: 600;
}

.ob-field { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }

/* opción de moneda */
.ob-cur-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.07);
  background: var(--surface);
  transition: background .15s, border-color .15s;
}
.ob-cur-option.sel {
  background: rgba(52,200,138,.1);
  border-color: rgba(52,200,138,.45);
}

.ob-cur-sym {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  flex: none;
}

.ob-cur-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
  color: var(--on-jade);
  background: transparent;
  transition: background .15s;
}
.ob-cur-option.sel .ob-cur-check { background: var(--jade); }

/* opción de banco */
.ob-bank-option {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: 13px;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  transition: background .15s, border-color .15s;
}
.ob-bank-option.sel {
  background: rgba(52,200,138,.08);
  border-color: rgba(52,200,138,.4);
}

.ob-bank-letter {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  flex: none;
}

.ob-bank-check {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
  color: var(--on-jade);
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  transition: background .15s, border-color .15s;
}
.ob-bank-option.sel .ob-bank-check {
  background: var(--jade);
  border-color: var(--jade);
}

/* miembro "Tú" en step 2 */
.ob-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 13px;
  padding: 14px;
  margin-top: 18px;
}

.ob-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--jade), var(--jade-dark));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  color: #08110C;
  letter-spacing: .01em;
}

.ob-member-badge {
  font-size: 10.5px;
  color: var(--jade);
  background: rgba(52,200,138,.12);
  padding: 4px 9px;
  border-radius: 12px;
  font-weight: 600;
}

/* resumen step 5 */
.ob-summary {
  margin-top: 26px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 6px 18px;
  text-align: left;
}

.ob-summary-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ob-summary-row:last-child { border-bottom: none; }

.ob-summary-row .ob-k {
  font-size: 13px;
  color: var(--tx-mute);
  width: 90px;
  flex: none;
}
.ob-summary-row .ob-v {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
}
.ob-summary-row .ob-v.jade { color: var(--jade); }

/* step 5 — icono check */
.ob-done-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(52,200,138,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* botón primario onboarding */
.ob-btn-pri {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  color: var(--on-jade);
  background: var(--jade);
  transition: filter .15s;
}
.ob-btn-pri:hover:not(:disabled) { filter: brightness(1.07); }
.ob-btn-pri:disabled {
  cursor: not-allowed;
  color: #5E6863;
  background: var(--raised);
}

.ob-btn-skip {
  width: 100%;
  background: transparent;
  border: none;
  color: #9AA39E;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 10px;
}

/* Hub — ajustes para la versión con hogar real */
.hub-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.hub-logout {
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--tx-mute);
  font-size: .8rem;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--r-btn);
  transition: border-color .15s, color .15s;
}
.hub-logout:hover { border-color: rgba(255,255,255,.3); color: var(--tx); }

/* ══════════════════════════════════════════
   Onboarding — select de país (ob-select)
══════════════════════════════════════════ */
.ob-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237E8783' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.ob-select option { background: #14191A; color: #ECECE6; }

/* ══════════════════════════════════════════
   Pantalla Unirse — invitación entrante
══════════════════════════════════════════ */
.unirse-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: var(--ink);
  background-image: radial-gradient(900px 500px at 50% -10%, rgba(52,200,138,.06), transparent 60%);
  min-height: 100dvh;
}

.unirse-box {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.unirse-apex {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: linear-gradient(160deg, #16201B, #0C100E);
  border: 1px solid rgba(52,200,138,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 44px rgba(52,200,138,.14);
}

.unirse-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
}

.unirse-badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jade);
  background: rgba(52,200,138,.1);
  border: 1px solid rgba(52,200,138,.25);
  border-radius: 8px;
  padding: 4px 10px;
  margin-bottom: var(--sp-4);
}

.unirse-titulo {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 27px);
  font-weight: 400;
  color: var(--tx);
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}

.unirse-titulo em {
  color: var(--jade);
  font-style: italic;
}

.unirse-sub {
  font-size: 13.5px;
  color: var(--tx-mute);
  margin-bottom: 0;
}

.unirse-link {
  background: transparent;
  border: none;
  color: var(--tx-mute);
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 12px 0 0;
  text-align: center;
  transition: color .15s;
}
.unirse-link:hover { color: var(--tx); }

/* ══════════════════════════════════════════
   Hub — sección de invitar pareja
══════════════════════════════════════════ */
.hub-invite-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5);
}

.hub-invite-header {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;
}

.hub-invite-header span {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-soft);
}

.hub-invite-toggle {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--raised);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--tx-mute);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background .15s;
}
.hub-invite-toggle:hover { background: rgba(255,255,255,.06); }

.hub-invite-body {
  padding-top: var(--sp-4);
}

.hub-invite-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.hub-inv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--raised);
  border-radius: 10px;
  margin-bottom: 6px;
}

.hub-inv-email {
  flex: 1;
  font-size: 13px;
  color: var(--tx-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-inv-badge {
  font-size: 10.5px;
  color: var(--warn);
  background: rgba(224,178,82,.1);
  border: 1px solid rgba(224,178,82,.25);
  border-radius: 8px;
  padding: 3px 8px;
  font-weight: 600;
  flex: none;
}

/* ══════════════════════════════════════════
   Safe areas — móvil (barra de estado / notch / barra de navegación)
   El WebView va edge-to-edge (viewport-fit=cover + Android 15 full-screen).
   Estos insets evitan que headers y footers queden bajo las barras del sistema.
   En desktop/web los env() valen 0px → sin efecto.
══════════════════════════════════════════ */

/* Headers: bajan su contenido debajo de la barra de estado (el fondo Ink llega al borde) */
.topbar,
.hub-header-row {
  padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
  padding-left: calc(var(--sp-5) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--sp-5) + env(safe-area-inset-right, 0px));
}

/* Onboarding: respeta la barra de estado arriba y la de navegación abajo */
.ob-screen { padding-top: env(safe-area-inset-top, 0px); }
.ob-footer {
  /* Android suele reportar inset-bottom=0; piso fijo de 44px libra la barra de navegación */
  padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(var(--sp-5) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--sp-5) + env(safe-area-inset-right, 0px));
}

/* Contenido del hub: el final no queda bajo la barra de navegación */
.wrap { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); }

/* Pantallas centradas (auth / connect / unirse): respetan ambos extremos */
.auth-screen,
.unirse-screen,
.center {
  padding-top: calc(var(--sp-5) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
}

/* ══════════════════════════════════════════
   Definir / cambiar contraseña (#clave)
══════════════════════════════════════════ */
.clave-titulo {
  font-family: var(--font-display);
  font-size: clamp(20px, 5vw, 24px);
  font-weight: 400;
  color: var(--tx);
  line-height: 1.2;
  margin-bottom: 2px;
}

/* Link discreto "¿Olvidaste tu contraseña?" en rAuth */
.auth-olvide {
  background: transparent;
  border: none;
  color: var(--tx-mute);
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 6px 0 0;
  text-align: center;
  width: 100%;
  transition: color .15s;
}
.auth-olvide:hover { color: var(--jade); }
.auth-olvide:disabled { opacity: .5; cursor: default; }

/* Hub — grupo de acciones en el header */
.hub-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Botón discreto "Cambiar contraseña" en el hub */
.hub-clave-link {
  background: transparent;
  border: none;
  color: var(--tx-mute);
  font-size: .78rem;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--r-btn);
  transition: color .15s;
}
.hub-clave-link:hover { color: var(--jade); }

/* Acciones de invitaciones pendientes (reenviar / cancelar) */
.hub-inv-actions { display: flex; gap: 8px; flex: none; }
.hub-inv-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--tx-soft);
  font-size: .72rem;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 5px 10px;
  border-radius: var(--r-btn);
  transition: border-color .15s, color .15s;
}
.hub-inv-btn:hover { border-color: var(--jade); color: var(--jade-light); }
.hub-inv-btn:disabled { opacity: .5; cursor: default; }
.hub-inv-btn-cancel:hover { border-color: var(--neg); color: var(--neg); }

/* Ojito sutil de ver/ocultar contraseña */
.pwd-wrap { position: relative; display: block; }
.pwd-wrap > .input { width: 100%; padding-right: 42px; }
.pwd-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--tx-mute); cursor: pointer;
  padding: 6px; display: flex; align-items: center; border-radius: 8px;
  transition: color .15s;
}
.pwd-eye:hover { color: var(--tx-soft); }

/* ══════════════════════════════════════════
   Tab bar inferior — móvil-first
   En desktop (≥720px) se reemplaza por el rail vertical izquierdo.
══════════════════════════════════════════ */

/* Shell principal cuando hay tab bar: ocupa toda la pantalla */
body.has-nav { overflow: hidden; }
body.has-nav #app {
  /* iOS Safari: con body sin scroll, 100dvh/100vh incluyen el área detrás de la
     barra inferior del navegador → el tab-bar (relativo, al fondo del shell)
     queda OCULTO bajo esa barra. 100svh = altura con las barras del navegador
     visibles → el tab-bar siempre queda por encima. Fallback a dvh donde no haya svh. */
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Contenedor de la vista activa (scrolleable) */
.nav-view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #2A3133 transparent;
}
.nav-view::-webkit-scrollbar { width: 6px; }
.nav-view::-webkit-scrollbar-thumb { background: #2A3133; border-radius: 3px; }

/* ── Bottom tab bar (móvil) ── */
.tab-bar {
  flex: none;
  position: relative;
  height: calc(68px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(11,14,13,0) 0%, #0B0E0D 36%);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 10px 16px 0;
  padding-bottom: env(safe-area-inset-bottom, 10px);
  z-index: 50;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 54px;
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  transition: opacity .15s;
  color: #67716C;
  font-family: var(--font-ui);
}
.tab-btn:active { opacity: .7; }

.tab-btn svg { flex: none; }

.tab-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: inherit;
}

.tab-btn.active { color: #34C88A; }
.tab-btn.active .tab-label { color: #34C88A; }

/* FAB central — botón redondo jade elevado */
.tab-fab {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 54px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-top: -10px;
}

.tab-fab-inner {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: #34C88A;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(52,200,138,0.35);
  transition: filter .15s, transform .1s;
}
.tab-fab:active .tab-fab-inner { filter: brightness(1.08); transform: scale(.96); }

/* FAB sync movil — fijo esquina inferior derecha, sobre el bottom-nav,
   solo visible en <1024px. Anclado abajo para no chocar con los headers
   (ojito, + Nuevo, avatar/campana) que viven arriba-derecha. */
.mob-sync-fab {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1E2426;
  border: 1px solid rgba(52,200,138,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #34C88A;
  z-index: 40;
  box-shadow: 0 2px 12px rgba(0,0,0,0.38);
  transition: background .15s, border-color .15s, transform .1s;
}
.mob-sync-fab:hover  { background: #222C2A; border-color: rgba(52,200,138,0.42); }
.mob-sync-fab:active { transform: scale(.93); }
.mob-sync-fab:disabled { opacity: .45; cursor: default; }
.mob-sync-icon { display: block; flex: none; }
@keyframes vtx-spin-mob {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.mob-sync-spinning .mob-sync-icon {
  animation: vtx-spin-mob .7s linear infinite;
}

/* El rail no existe en móvil: oculto por defecto, visible solo en ≥720px */
.nav-rail { display: none; }

/* ── Rail vertical (desktop ≥720px) ── */
@media (min-width: 720px) {
  /* body scrollea normalmente; el rail queda fijo con position:fixed */
  body.has-nav { overflow: auto; }
  body.has-nav #app {
    height: auto;
    flex-direction: row;
    min-height: 100dvh;
    overflow: visible;
  }

  .nav-rail {
    display: flex;
    width: 74px;
    flex: none;
    background: #0B0E0D;
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: 20px 0;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    /* fixed: el rail no scrollea con el contenido */
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 50;
  }

  .nav-rail-logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
  }

  .rail-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
    color: #67716C;
    position: relative;
  }
  .rail-btn:hover { background: rgba(255,255,255,0.08); }
  .rail-btn.active {
    background: rgba(52,200,138,0.14);
    border: 1px solid rgba(52,200,138,0.4);
    color: #34C88A;
  }

  /* FAB en rail: cuadrado redondeado jade */
  .rail-fab {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #34C88A;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(52,200,138,0.3);
    transition: filter .15s;
    color: #08110C;
  }
  .rail-fab:hover { filter: brightness(1.07); }

  /* Avatar de usuario en la parte inferior del rail — botón con iniciales */
  .rail-avatar {
    margin-top: auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34C88A, #1C7E57);
    flex: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-ui);
    color: #08110C;
    letter-spacing: .01em;
    transition: filter .15s, transform .1s;
  }
  .rail-avatar:hover { filter: brightness(1.1); transform: scale(1.05); }

  /* Ocultar tab bar inferior en desktop */
  .tab-bar { display: none; }

  /* El contenido de la vista ocupa el resto; margin-left compensa el rail fijo */
  .nav-view {
    flex: 1;
    min-width: 0;
    height: auto;
    overflow: visible;
    overflow-x: visible;
    margin-left: 74px;
  }
}

/* ── Pantallas placeholder de verticales ── */
.placeholder-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70dvh;
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  gap: var(--sp-4);
}

.placeholder-apex {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: linear-gradient(160deg, #16201B, #0C100E);
  border: 1px solid rgba(52,200,138,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 44px rgba(52,200,138,.1);
}

.placeholder-screen h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 400;
  color: var(--tx);
  margin-top: var(--sp-2);
}

.placeholder-screen h2 em { color: var(--jade); }

.placeholder-screen p {
  font-size: 14px;
  color: var(--tx-mute);
  max-width: 300px;
  line-height: 1.6;
}

.placeholder-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--champagne);
  background: rgba(200,169,106,.1);
  border: 1px solid rgba(200,169,106,.28);
  border-radius: 8px;
  padding: 5px 12px;
}

/* Título editorial reutilizable: Newsreader, em jade itálica — igual que .hero h1 */
.screen-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 2rem);
  color: var(--tx);
  line-height: 1.2;
  margin-bottom: var(--sp-2);
}
.screen-title em {
  font-style: italic;
  color: var(--jade);
}

/* Sección de acciones en #mas */
.mas-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.mas-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-ui);
  color: var(--tx);
  transition: background .15s;
}
.mas-item:last-child { border-bottom: none; }
.mas-item:hover { background: rgba(255,255,255,.03); }

.mas-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.mas-item-body { flex: 1; min-width: 0; }
.mas-item-title { font-size: 14px; font-weight: 600; color: var(--tx-soft); }
.mas-item-sub { font-size: 12px; color: var(--tx-mute); margin-top: 2px; }
.mas-item-arrow { color: var(--tx-mute); font-size: 18px; }

.mas-item.danger .mas-item-title { color: var(--neg); }
.mas-item.danger { --item-icon-bg: rgba(216,113,76,.1); }

/* Hub: eliminar header de acciones (pasan a #mas) */
.hub-header-actions { display: none; }

/* Ajustar el .wrap del hub para considerar la tab bar inferior */
@media (max-width: 719px) {
  .nav-view .wrap { padding-bottom: var(--sp-5); }
}

/* ══════════════════════════════════════════
   WEALTH — pantalla de finanzas real
   Clases prefijadas wl- para no colisionar.
══════════════════════════════════════════ */

/* Contenedor principal — respeta tab bar y padding seguro */
.wl-wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
  padding-top: calc(var(--sp-4) + env(safe-area-inset-top, 0px));
}
@media (min-width: 720px) {
  .wl-wrap { padding: var(--sp-5) var(--sp-6) var(--sp-7); }
}

/* Encabezado Wealth */
.wl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
}
.wl-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wl-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--jade);
  line-height: 1;
}
.wl-mes-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--tx-mute);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  align-self: center;
}

/* Tarjeta héroe — patrimonio */
.wl-hero-card {
  background: linear-gradient(160deg, #16201B, #0E1211);
  border: 1px solid rgba(52,200,138,.20);
  border-radius: 18px;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-5);
  position: relative;
  overflow: hidden;
}
.wl-hero-label {
  font-size: 12.5px;
  color: #9AA39E;
  margin-bottom: var(--sp-2);
}
.wl-hero-amount {
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.wl-hero-amount.neg { color: var(--neg); }
.wl-hero-amount.pos { color: var(--tx); }
.wl-hero-note {
  font-size: 11.5px;
  color: #7E8783;
  margin-top: var(--sp-2);
  line-height: 1.5;
}
/* .wl-hero-spark eliminado en f25 — sparkline sin ejes reemplazada por desglose numérico */

/* Secciones */
.wl-section {
  margin-bottom: var(--sp-5);
}
.wl-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.wl-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-soft);
}
.wl-section-title em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--jade);
}
.wl-section-sub {
  font-size: 11.5px;
  color: var(--tx-mute);
  font-variant-numeric: tabular-nums;
}

/* Card base reutilizable en Wealth */
.wl-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

/* Cuentas */
.wl-cuentas-list {}
.wl-cuenta-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.wl-cuenta-row:last-child { border-bottom: none; }
.wl-cuenta-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(52,200,138,.1);
  color: var(--jade);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex: none;
}
.wl-cuenta-info { flex: 1; min-width: 0; }
.wl-cuenta-nombre {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-cuenta-banco {
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 2px;
}
.wl-cuenta-saldo {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  text-align: right;
  flex: none;
}
.wl-cuenta-saldo.neg { color: var(--neg); }

/* Presupuesto 50/30/20 */
.wl-presup-grupo {
  padding: var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.wl-presup-grupo:last-child { border-bottom: none; }
.wl-presup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.wl-presup-dot {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}
.wl-presup-nombre {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx-soft);
  flex: none;
}
.wl-presup-meta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(255,255,255,.05);
  border-radius: var(--r-pill);
  padding: 2px 7px;
  flex: none;
}
.wl-presup-nums {
  margin-left: auto;
  font-size: 12px;
  text-align: right;
}
.wl-presup-sep {
  color: var(--line);
  margin: 0 3px;
}
.wl-presup-bar-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
  margin-top: 6px;
}
.wl-presup-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.wl-presup-alerta {
  font-size: 11px;
  color: var(--neg);
  margin-top: 5px;
}

/* Movimientos */
.wl-mov-list {}
.wl-mov-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.wl-mov-row:last-child { border-bottom: none; }
.wl-mov-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: none;
}
.wl-mov-info { flex: 1; min-width: 0; }
.wl-mov-desc {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-mov-sub {
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-mov-fecha { color: #5E6863; }
.wl-mov-monto {
  font-size: 13.5px;
  font-weight: 700;
  flex: none;
  text-align: right;
}

/* Ver más */
.wl-ver-mas {
  display: block;
  width: 100%;
  margin-top: var(--sp-3);
  padding: 13px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--jade);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.wl-ver-mas:hover:not(:disabled) {
  background: rgba(52,200,138,.07);
  border-color: rgba(52,200,138,.35);
}
.wl-ver-mas:disabled {
  color: var(--tx-mute);
  cursor: default;
  border-color: rgba(255,255,255,.06);
}

/* Empty states */
.wl-empty {
  font-size: 13px;
  color: var(--tx-mute);
  padding: var(--sp-4);
  text-align: center;
}

/* Skeleton de carga */
.wl-loading { padding: var(--sp-4); }
@keyframes wlpulse {
  0%, 100% { opacity: .35; }
  50%       { opacity: .7; }
}
.wl-skeleton {
  background: var(--raised);
  border-radius: var(--r-card);
  animation: wlpulse 1.6s ease infinite;
}
.wl-sk-hero  { height: 130px; }
.wl-sk-bar   { height: 18px; width: 100%; border-radius: 6px; }

/* ══════════════════════════════════════════
   Modal "Nuevo movimiento" — bottom-sheet
   Fiel a VERTEX Wealth Móvil.dc.html
══════════════════════════════════════════ */
@keyframes nm-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes nm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes nm-slide-down {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}
@keyframes nm-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.nm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,8,7,.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  animation: nm-fade-in .2s ease both;
}
.nm-overlay-out .nm-sheet {
  animation: nm-slide-down .22s ease both;
}

.nm-sheet {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: #14191A;
  border-top: 1px solid rgba(255,255,255,.10);
  border-radius: 26px 26px 0 0;
  padding: 10px 22px calc(28px + env(safe-area-inset-bottom, 0px));
  animation: nm-slide-up .26s cubic-bezier(.32,.74,.5,1) both;
  outline: none;
  /* scroll interno si el contenido es mayor que la pantalla */
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* momentum scroll en iOS */
  overscroll-behavior: contain;
}

.nm-handle {
  width: 40px;
  height: 4px;
  border-radius: 3px;
  background: #3A4347;
  margin: 6px auto 16px;
}

.nm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.nm-titulo {
  font-size: 16px;
  font-weight: 700;
  color: #F4F2EC;
}
.nm-close {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  border: none;
  color: #9AA39E;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.nm-close:hover { background: rgba(255,255,255,.12); }

/* Tabs tipo: Gasto / Ingreso */
.nm-tabs {
  display: flex;
  gap: 6px;
  background: #0B0E0D;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  padding: 5px;
  margin-bottom: 16px;
}
.nm-tab {
  flex: 1;
  padding: 11px;
  border-radius: 8px;
  border: none;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  text-align: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}

/* Display de monto grande — centavos primero */
.nm-monto-wrap {
  text-align: center;
  margin-bottom: 16px;
  padding: 6px 0;
  position: relative; /* necesario para el input invisible de teclado móvil */
}

/* Input invisible que levanta el teclado numérico en móvil */
input[data-cp-hidden] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 16px; /* evita zoom en iOS */
  border: none;
  background: transparent;
  caret-color: transparent;
}
.nm-monto {
  font-size: 40px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  cursor: text;
  outline: none;
  border-bottom: 2px solid rgba(255,255,255,.10);
  padding-bottom: 6px;
  display: block;
  /* El color se setea inline desde JS según tipo */
  transition: color .15s;
  user-select: none;
  -webkit-user-select: none;
}
.nm-monto:focus {
  border-color: rgba(52,200,138,.4);
}
.nm-monto-hint {
  font-size: 11px;
  color: #5E6863;
  margin-top: 6px;
}

/* Campos del formulario */
.nm-field {
  margin-bottom: 12px;
}
.nm-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #7E8783;
  margin-bottom: 6px;
}
.nm-select {
  width: 100%;
  background: #0B0E0D;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px 16px;
  color: #ECECE6;
  font-size: 14px;
  font-family: var(--font-ui);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s;
}
.nm-select:focus { border-color: rgba(52,200,138,.4); }

/* Inputs de texto/numero/fecha en modales (espejo de .nm-select) */
.nm-input {
  width: 100%;
  background: #0B0E0D;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px 16px;
  color: #ECECE6;
  font-size: 14px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color .15s;
}
.nm-input:focus { border-color: rgba(52,200,138,.4); }
.nm-input::placeholder { color: #7E8783; }

/* Mensaje de error inline en modales */
.nm-error {
  color: #D8714C;
  font-size: 13px;
  line-height: 1.4;
  margin: 4px 0 2px;
}

/* Chips de categoría */
.nm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.nm-chip {
  padding: 8px 13px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: transparent;
  color: #9AA39E;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.nm-chip:hover { border-color: rgba(255,255,255,.22); color: #ECECE6; }
.nm-chip-active {
  border-color: rgba(52,200,138,.4);
  color: #34C88A;
  background: rgba(52,200,138,.12);
}

/* Botón guardar */
.nm-guardar {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 16px;
  background: #34C88A;
  color: #08110C;
  border: none;
  border-radius: var(--r-btn);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.nm-guardar:hover:not(:disabled) { filter: brightness(1.07); }
.nm-guardar-dis,
.nm-guardar:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: none;
}

/* Boton escanear factura */
.nm-scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(52,200,138,.35);
  border-radius: 8px;
  color: #6FE3B0;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s;
}
.nm-scan-btn:hover:not(:disabled) {
  background: rgba(52,200,138,.08);
  border-color: rgba(52,200,138,.6);
}
.nm-scan-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.nm-scan-btn svg {
  flex-shrink: 0;
}

/* Fila de botones de ayuda al monto (Escanear + Dictar) */
.nm-scan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.nm-scan-row .nm-scan-btn {
  margin-top: 0;
}

/* Desktop: el sheet no ocupa toda la pantalla sino que flota centrado */
@media (min-width: 720px) {
  .nm-overlay { align-items: center; padding: var(--sp-5); }
  .nm-sheet {
    border-radius: 20px;
    max-height: 88vh;
    padding: 24px 28px 28px;
    border: 1px solid rgba(255,255,255,.10);
  }
  .nm-handle { display: none; }
}

/* ══════════════════════════════════════════
   Perfil / #mas — header con avatar de iniciales
══════════════════════════════════════════ */
.mas-perfil-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: var(--sp-4) 0 var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: var(--sp-5);
}

.mas-perfil-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34C88A, #1C7E57);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-ui);
  color: #08110C;
  letter-spacing: .01em;
  flex: none;
}

.mas-perfil-nombre {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx-soft);
  line-height: 1.3;
}

.mas-perfil-alias {
  font-size: 12px;
  color: var(--jade);
  margin-top: 1px;
}

.mas-perfil-email {
  font-size: 12px;
  color: var(--tx-mute);
  margin-top: 2px;
}

/* ══════════════════════════════════════════
   Hub — Hoy (pantalla real)
══════════════════════════════════════════ */

/* Header del hub */
.hub-hoy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  /* En web móvil safe-area=0; garantizamos un mínimo para que el avatar no se pegue arriba. En APK el safe-area (mayor) manda. */
  padding-top: max(28px, calc(var(--sp-3) + env(safe-area-inset-top, 0px)));
}

.hub-hoy-fecha {
  font-size: 11px;
  color: var(--tx-mute);
  letter-spacing: .04em;
  text-transform: capitalize;
}

.hub-hoy-titulo {
  font-size: 19px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.05;
}

.hub-hoy-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hub-hoy-notif {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #9AA39E;
  transition: background .15s;
}
.hub-hoy-notif:hover { background: var(--raised); }

.hub-hoy-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34C88A, #1C7E57);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  color: #08110C;
  letter-spacing: .01em;
  cursor: pointer;
  flex: none;
  border: none;
  transition: filter .15s;
}
.hub-hoy-avatar:hover { filter: brightness(1.08); }

/* Saludo editorial */
.hub-saludo {
  font-family: var(--font-display);
  font-size: clamp(20px, 5.5vw, 26px);
  color: var(--tx);
  line-height: 1.18;
  font-weight: 400;
}
.hub-saludo em {
  font-style: italic;
  color: var(--jade);
}
.hub-saludo-sub {
  font-size: 13.5px;
  color: #8A938F;
  margin-top: 5px;
  line-height: 1.45;
}

/* Hero — Patrimonio */
.hub-pulse {
  background: linear-gradient(160deg, #16201B, #0E1211);
  border: 1px solid rgba(52,200,138,.2);
  border-radius: 20px;
  padding: 22px;
  animation: vxup .35s ease both;
}

.hub-pulse-label {
  font-size: 12.5px;
  color: #9AA39E;
}

.hub-pulse-valor {
  font-size: clamp(28px, 8vw, 38px);
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -0.02em;
  margin-top: 6px;
  line-height: 1.1;
}
.hub-pulse-valor.cargando {
  color: var(--tx-mute);
  font-size: 22px;
}
.hub-pulse-valor.neg-val { color: var(--neg); }

.hub-pulse-sublabel {
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 3px;
}

.hub-pulse-mini {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.hub-pulse-chip {
  flex: 1;
  background: rgba(255,255,255,.04);
  border-radius: 11px;
  padding: 11px 13px;
}
.hub-pulse-chip-label {
  font-size: 10.5px;
  color: #7E8783;
}
.hub-pulse-chip-val {
  font-size: 14px;
  font-weight: 700;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* Feed "Para ti hoy" */
.hub-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 26px 0 12px;
}
.hub-feed-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-soft);
}
.hub-feed-count {
  font-size: 11.5px;
  color: #67716C;
  font-variant-numeric: tabular-nums;
}

.hub-insight {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  gap: 13px;
  animation: vxup .3s ease both;
}
.hub-insight + .hub-insight { margin-top: 11px; }

.hub-insight-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.hub-insight-body { flex: 1; min-width: 0; }

.hub-insight-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.hub-insight-titulo {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tx-soft);
  line-height: 1.3;
}

.hub-insight-dismiss {
  background: none;
  border: none;
  color: #5E6863;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex: none;
  font-family: var(--font-ui);
  transition: color .15s;
}
.hub-insight-dismiss:hover { color: var(--tx-mute); }

.hub-insight-texto {
  font-size: 12.5px;
  color: #9AA39E;
  margin-top: 4px;
  line-height: 1.5;
}

.hub-insight-cta {
  font-size: 12px;
  font-weight: 700;
  margin-top: 9px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  transition: opacity .15s;
}
.hub-insight-cta:hover { opacity: .8; }

/* Estado vacío de insights */
.hub-insight-empty {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  animation: vxup .3s ease both;
}
.hub-insight-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(52,200,138,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.hub-insight-empty-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-soft);
}
.hub-insight-empty-sub {
  font-size: 12.5px;
  color: #8A938F;
  margin-top: 5px;
}

/* Verticales */
.hub-verticales-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-soft);
  margin: 26px 0 12px;
}

.hub-verticales-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-top: 11px;
}

/* Aire en movil entre "Tus verticales" y "Movimientos de hoy" (en desktop el grid lo maneja). */
.hub-sec-right { margin-top: 24px; }

/* Tarjeta uniforme para las 3 verticales */
.hub-vcard {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0; /* permite que el contenido se encoja: columnas 1/3 iguales (no empuja ancho) */
  cursor: default;
  text-align: left;
  animation: vxup .3s ease both;
}

/* Wealth: botón activo con borde jade */
button.hub-vcard {
  cursor: pointer;
  background: linear-gradient(150deg, #11201A, #0E1211);
  border-color: rgba(52,200,138,.28);
  transition: border-color .15s, filter .15s;
}
button.hub-vcard:hover { border-color: rgba(52,200,138,.5); filter: brightness(1.04); }

/* "Próximamente": opacidad reducida */
.hub-vcard-dim { opacity: .72; }

.hub-vcard-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.hub-vcard-nombre {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  margin-top: 12px;
}

.hub-vcard-sub {
  font-size: 11.5px;
  color: #8FB7A4;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.hub-vcard-pronto-badge {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 3px;
}

/* Movimientos de hoy */
.hub-txns-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 26px 0 8px;
}
.hub-txns-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-soft);
}
.hub-txns-count {
  font-size: 11.5px;
  color: #67716C;
  font-variant-numeric: tabular-nums;
}

.hub-txn-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.hub-txn-row:last-child { border-bottom: none; }

.hub-txn-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 15px;
}

.hub-txn-info { flex: 1; min-width: 0; }
.hub-txn-desc {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-txn-sub {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-top: 1px;
}
.hub-txn-monto {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.hub-txns-empty {
  font-size: 13px;
  color: var(--tx-mute);
  padding: 16px 0;
  text-align: center;
}

/* Skeleton de carga */
@keyframes vxup { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.hub-sk {
  background: linear-gradient(90deg, var(--raised) 25%, #262E30 50%, var(--raised) 75%);
  background-size: 200% 100%;
  animation: hub-shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes hub-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Desktop: hub en columna centrada con max-width */
@media (min-width: 720px) {
  .hub-hoy-header { max-width: 680px; margin: 0 auto; }
  .hub-hoy-body   { max-width: 680px; margin: 0 auto; }
}

/* ══════════════════════════════════════════
   Certificados de depósito — Renta fija
══════════════════════════════════════════ */
/* Shells de render certificados: movil visible por defecto, desktop oculto */
.cd-mob-shell { display: block; }
.cd-dsk-shell { display: none; }

.cd-wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
  padding-top: calc(var(--sp-4) + env(safe-area-inset-top, 0px));
}

/* Breadcrumb */
.cd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.cd-breadcrumb-back {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--tx-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.cd-breadcrumb-back svg { display: block; }
.cd-breadcrumb-label {
  font-size: 13px;
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--tx-soft);
}
.cd-breadcrumb-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.12);
}
.cd-breadcrumb-sub {
  font-size: 13.5px;
  color: var(--tx-mute);
  font-weight: 600;
}

/* Header */
.cd-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.cd-header-info {
  display: flex;
  flex-direction: column;
}
.cd-header-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 7vw, 32px);
  font-weight: 400;
  color: #F4F2EC;
  line-height: 1.1;
}
.cd-header-sub {
  font-size: 13px;
  color: #8A938F;
  margin-top: 5px;
  line-height: 1.45;
}
@media (min-width: 541px) {
  .cd-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
}
.cd-btn-nuevo {
  background: var(--jade);
  color: #08110C;
  border: none;
  border-radius: 9px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: filter .15s;
}
.cd-btn-nuevo:hover { filter: brightness(1.08); }

/* Tarjetas resumen */
.cd-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 540px) {
  .cd-summary { grid-template-columns: 1fr; gap: 8px; }
}
.cd-sum-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  padding: 18px;
}
.cd-sum-label {
  font-size: 12px;
  color: var(--tx-mute);
}
.cd-sum-value {
  font-size: 22px;
  font-weight: 700;
  margin-top: 7px;
  font-variant-numeric: tabular-nums;
}

/* Banner info */
.cd-banner {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  background: rgba(52,200,138,.06);
  border: 1px solid rgba(52,200,138,.18);
  border-radius: 13px;
  margin-bottom: 16px;
}
.cd-banner-text {
  font-size: 12px;
  color: #9AA39E;
  line-height: 1.55;
}
.cd-banner-text strong { color: var(--tx-soft); }
.cd-banner-text a { color: var(--jade); font-weight: 600; text-decoration: none; cursor: default; }

/* Estado vacío */
.cd-empty {
  text-align: center;
  padding: 52px 20px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}
.cd-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(52,200,138,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.cd-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-soft);
  margin-bottom: 6px;
}
.cd-empty-sub {
  font-size: 13px;
  color: var(--tx-mute);
  line-height: 1.5;
}

/* Lista de certificados */
.cd-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cd-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 18px 20px;
}

.cd-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cd-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cd-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.cd-card-nombre {
  font-size: 15px;
  font-weight: 700;
  color: #F4F2EC;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cd-badge {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
}
.cd-card-meta {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.cd-btn-ajustar {
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: var(--tx);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  transition: border-color .15s;
}
.cd-btn-ajustar:hover { border-color: rgba(255,255,255,.32); }

/* .cd-metrics redefinido en bloque f38 más abajo con 4 columnas */
.cd-metric-label {
  font-size: 11px;
  color: var(--tx-mute);
}
.cd-metric-value {
  font-size: 17px;
  font-weight: 700;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* Barra de progreso */
.cd-progress-wrap { margin-top: 14px; }
.cd-progress-track {
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.cd-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
  min-width: 4px;
}
.cd-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #67716C;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.cd-ajuste-nota {
  font-size: 11px;
  color: #DEC79A;
  margin-top: 9px;
}

/* Sección Renta fija en Wealth */
.wl-rf-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  transition: border-color .15s;
  text-decoration: none;
}
.wl-rf-card:hover { border-color: rgba(52,200,138,.32); }
.wl-rf-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(200,169,106,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.wl-rf-body { flex: 1; min-width: 0; }
.wl-rf-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx-soft);
}
.wl-rf-sub {
  font-size: 12px;
  color: var(--tx-mute);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.wl-rf-arrow {
  font-size: 18px;
  color: var(--tx-mute);
}

/* Modal certificados */
.cd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,8,7,.72);
  backdrop-filter: blur(5px);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cd-modal {
  width: 100%;
  max-width: 448px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  max-height: 92dvh;
  overflow-y: auto;
}
.cd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cd-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: #F4F2EC;
}
.cd-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: none;
  color: var(--tx-mute);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  line-height: 1;
}

/* Campos del modal */
.cd-field { margin-bottom: 14px; }
.cd-label {
  font-size: 11px;
  color: var(--tx-mute);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  display: block;
  margin-bottom: 7px;
}
.cd-input {
  width: 100%;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--tx);
  font-size: 14px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color .15s;
}
.cd-input:focus { border-color: var(--jade-dark); }
.cd-select { appearance: none; cursor: pointer; }

/* Segmented control (tipo / plazo) */
.cd-seg {
  display: flex;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.cd-seg-btn {
  flex: 1;
  padding: 9px 6px;
  border: none;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: center;
  transition: background .15s, color .15s;
  color: var(--tx-mute);
  background: transparent;
}
.cd-seg-btn.active {
  background: var(--jade);
  color: #08110C;
}

/* Input de capital centavos-primero */
.cd-monto-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 0 13px;
  transition: border-color .15s;
  position: relative; /* necesario para el input invisible de teclado móvil */
}
.cd-monto-wrap:focus-within { border-color: var(--jade-dark); }
.cd-monto-sym {
  color: var(--tx-mute);
  font-weight: 700;
  font-size: 16px;
  flex: none;
}
.cd-monto-display {
  flex: 1;
  padding: 13px 0;
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: #F4F2EC;
  cursor: text;
  outline: none;
  user-select: none;
}
.cd-monto-hint {
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 4px;
}

/* Fila de dos campos */
.cd-row-2 {
  display: flex;
  gap: 12px;
}
.cd-row-2 > * { flex: 1; }

/* Botones del modal */
.cd-modal-footer {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.cd-btn-cancel {
  padding: 13px 18px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--tx-mute);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
}
.cd-btn-save {
  flex: 1;
  padding: 13px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: filter .15s;
}
.cd-btn-save:not(:disabled):hover { filter: brightness(1.08); }
.cd-btn-save:disabled { cursor: not-allowed; }

@media (min-width: 720px) {
  .cd-wrap { padding-top: calc(var(--sp-5) + env(safe-area-inset-top, 0px)); }
}

/* ── f38: header con dos botones ── */
.cd-header-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: none;
}
/* Botón secundario "Registrar interés" */
.cd-btn-interes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(200,169,106,.38);
  color: #C8A96A;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.cd-btn-interes:hover { background: rgba(200,169,106,.08); border-color: rgba(200,169,106,.6); }
.cd-btn-interes:disabled { opacity: .55; cursor: not-allowed; }

/* Acciones por card (Editar + Estado) */
.cd-card-actions {
  display: flex;
  gap: 6px;
  flex: none;
}
.cd-btn-editar {
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: var(--tx-mute);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.cd-btn-editar:hover { border-color: rgba(52,200,138,.45); color: #34C88A; }

/* Descripción breve del tipo debajo del nombre */
.cd-tipo-desc {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-top: 10px;
  line-height: 1.45;
}

/* Cuatro métricas en la card */
.cd-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 540px) {
  .cd-metrics { grid-template-columns: 1fr 1fr; }
}

/* Nota de cuenta destino */
.cd-destino-nota {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #C8A96A;
  margin-top: 10px;
  line-height: 1.4;
}
.cd-destino-nota strong { color: #DEC79A; }
.cd-destino-sin {
  color: var(--tx-mute);
}

/* ══════════════════════════════════════════
   Selector de moneda FX — chip compacto
   Aparece dentro de Hub (hub-pulse) y Wealth (wl-hero-card).
══════════════════════════════════════════ */
.fx-selector {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  padding: 4px 26px 4px 10px;
  color: #ECECE6;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  outline: none;
  letter-spacing: .04em;
  /* flecha discreta */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ECECE6' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: background-color .15s, border-color .15s;
}
.fx-selector:hover {
  background-color: rgba(255,255,255,.12);
  border-color: rgba(52,200,138,.4);
}
.fx-selector option {
  background: #14191A;
  color: #ECECE6;
  font-weight: 600;
}

/* ══════════════════════════════════════════
   Familia — pantalla Hogar (f19)
══════════════════════════════════════════ */

.fam-wrap {
  max-width: 860px;
  margin: 0;
  padding: var(--sp-5);
  padding-top: calc(var(--sp-5) + env(safe-area-inset-top, 0px));
}

@media (max-width: 540px) {
  .fam-wrap { padding: var(--sp-4); padding-top: calc(var(--sp-4) + env(safe-area-inset-top, 0px)); }
}

/* Tarjeta miembro: hover sutil en kids */
.fam-kid-card:hover {
  border-color: rgba(255,255,255,0.14);
  transition: border-color .15s;
}

/* Tab bar hijo (solo 2 tabs — centrado sin FAB) */
body.has-nav .tab-bar:has(#tab-miwallet) {
  justify-content: center;
  gap: 40px;
}

/* ══════════════════════════════════════════
   Presupuesto — pantalla #presupuesto (f24)
══════════════════════════════════════════ */

.pb-wrap {
  max-width: 860px;
  margin: 0;
  padding: var(--sp-5);
  padding-top: calc(var(--sp-5) + env(safe-area-inset-top, 0px));
}

@media (max-width: 540px) {
  .pb-wrap { padding: var(--sp-4); padding-top: calc(var(--sp-4) + env(safe-area-inset-top, 0px)); }
}

/* Encabezado con navegación de mes */
.pb-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--sp-5);
}

.pb-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 400;
  color: var(--tx-soft);
  margin: 0;
  line-height: 1.1;
}

.pb-title em {
  font-style: italic;
  color: var(--jade);
}

.pb-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Selector mes/año */
.pb-mes-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
}

.pb-mes-btn {
  background: none;
  border: none;
  color: var(--tx-mute);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background .12s;
}

.pb-mes-btn:hover { background: rgba(255,255,255,.07); }

.pb-mes-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  min-width: 80px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Botón back */
.pb-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--tx-mute);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 4px;
  font-family: var(--font-ui);
}

.pb-back:hover { color: var(--tx); }

/* Botón "Categorías" */
.pb-btn-cats {
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  color: var(--tx-mute);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
  font-family: var(--font-ui);
  white-space: nowrap;
  transition: border-color .12s, color .12s;
}

.pb-btn-cats:hover {
  border-color: rgba(255,255,255,.3);
  color: var(--tx);
}

/* Totales resumen */
.pb-totales {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 16px 18px;
  margin-bottom: var(--sp-4);
  display: flex;
  gap: 0;
}

.pb-total-col {
  flex: 1;
  text-align: center;
  padding: 0 8px;
}

.pb-total-col + .pb-total-col {
  border-left: 1px solid var(--line);
}

.pb-total-label {
  font-size: 11px;
  color: var(--tx-mute);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}

.pb-total-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}

/* Copiar mes anterior */
.pb-btn-copiar {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--tx-mute);
  font-size: 13px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  margin-bottom: var(--sp-4);
  transition: background .12s, border-color .12s;
}

.pb-btn-copiar:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.22);
  color: var(--tx);
}

/* Sección de grupo */
.pb-grupo-section {
  margin-bottom: var(--sp-4);
}

.pb-grupo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pb-grupo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pb-grupo-nombre {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tx-mute);
  flex: 1;
}

.pb-grupo-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-mute);
}

.pb-grupo-resumen {
  font-size: 12px;
  color: var(--tx-mute);
  font-variant-numeric: tabular-nums;
}

/* Fila de categoría en presupuesto */
.pb-cat-row {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
}

@media (max-width: 480px) {
  .pb-cat-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.pb-cat-nombre {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
}

.pb-cat-gasto {
  font-size: 12px;
  color: var(--tx-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pb-cat-gasto.excede {
  color: var(--neg);
  font-weight: 600;
}

/* Input monto presupuesto centavos-primero */
.pb-monto-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 10px;
  cursor: text;
  min-width: 120px;
  justify-content: flex-end;
  transition: border-color .12s;
}

.pb-monto-wrap:focus-within {
  border-color: var(--jade-dark);
}

.pb-monto-display {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tx);
  outline: none;
  min-width: 60px;
  text-align: right;
}

.pb-monto-guardar {
  background: var(--jade);
  color: var(--on-jade);
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
  font-family: var(--font-ui);
  display: none;
  white-space: nowrap;
  transition: filter .12s;
}

.pb-monto-guardar:hover { filter: brightness(1.08); }
.pb-monto-guardar.visible { display: inline-block; }

/* Barra de progreso por categoría */
.pb-cat-bar-track {
  grid-column: 1 / -1;
  height: 3px;
  background: rgba(255,255,255,.07);
  border-radius: 2px;
  margin-top: 2px;
  overflow: hidden;
}

.pb-cat-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s ease;
}

/* Estado vacío */
.pb-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--tx-mute);
  font-size: 13px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════
   f36 — Toggle de privacidad (ojito global)
══════════════════════════════════════════ */
.priv-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #7E8783;
  cursor: pointer;
  transition: background .15s, color .15s;
  flex: none;
}
.priv-toggle:hover {
  background: rgba(255,255,255,.12);
  color: var(--tx-soft);
}

/* ══════════════════════════════════════════
   f36 — Dashboard de detalle de presupuesto
══════════════════════════════════════════ */

/* Wrapper del detalle — hereda .pb-wrap */
.pbd-wrap {
  padding-top: calc(var(--sp-5) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

/* Header */
.pbd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.pbd-header-info { flex: 1; min-width: 0; }

/* Hero burn-rate */
.pbd-hero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px 16px;
  margin-bottom: 16px;
  animation: vxup .3s ease both;
}
.pbd-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.pbd-hero-label {
  font-size: 11px;
  color: var(--tx-mute);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 3px;
}
.pbd-hero-valor {
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Barra de burn en el hero */
.pbd-bar-track {
  position: relative;
  height: 10px;
  background: rgba(255,255,255,.07);
  border-radius: 6px;
  overflow: visible;
}
.pbd-bar-fill {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  transition: width .4s ease;
  max-width: 100%;
}
.pbd-bar-marca {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 18px;
  background: rgba(255,255,255,.55);
  border-radius: 2px;
  transform: translateX(-50%);
  z-index: 1;
}
.pbd-bar-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 11.5px;
  color: #7E8783;
  font-variant-numeric: tabular-nums;
}
.pbd-proy-cierre {
  font-size: 12px;
  color: #8A938F;
  margin-top: 10px;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 10px;
}

/* Títulos de sección */
.pbd-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #7E8783;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 20px 0 10px;
  display: block;
}
.pbd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 10px;
}

/* Insights */
.pbd-insights { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.pbd-insight-item {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: #BDCAC5;
  line-height: 1.55;
}

/* Gráfico acumulado (área SVG) */
.pbd-acum-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px 10px;
  margin-bottom: 4px;
  overflow: hidden;
}
.pbd-acum-leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 11px;
  color: #7E8783;
  font-variant-numeric: tabular-nums;
}
.pbd-acum-leyenda strong { color: #ECECE6; font-weight: 600; }
.pbd-acum-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  flex-shrink: 0;
}
.pbd-acum-sep { color: #3A4347; }

/* Gráfico de barras por día (período completo) */
.pbd-dia-scroll-wrap {
  position: relative;
  margin-bottom: 16px;
}
/* Fades + chevrons de overflow en mobile */
@media (max-width: 1023px) {
  .pbd-dia-scroll-wrap::before,
  .pbd-dia-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    z-index: 2;
    transition: opacity .2s;
  }
  .pbd-dia-scroll-wrap::before {
    left: 0;
    background: linear-gradient(to right, #0B0E0D 10%, transparent);
  }
  .pbd-dia-scroll-wrap::after {
    right: 0;
    background: linear-gradient(to left, #0B0E0D 10%, transparent);
  }
  .pbd-dia-scroll-wrap.pbd-dia-at-start::before { opacity: 0; }
  .pbd-dia-scroll-wrap.pbd-dia-at-end::after   { opacity: 0; }
}
.pbd-dia-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.pbd-dia-chart--full {
  /* en períodos largos las columnas se comprimen más */
  gap: 2px;
}
.pbd-dia-chart::-webkit-scrollbar { display: none; }
.pbd-dia-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 14px;
  max-width: 36px;
  height: 100%;
  justify-content: flex-end;
  gap: 2px;
  cursor: default;
}
.pbd-dia-col.hoy .pbd-dia-bar { box-shadow: 0 0 0 1.5px rgba(111,227,176,.5); }
.pbd-dia-col.futuro { opacity: .7; }
.pbd-dia-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  position: relative;
}
.pbd-dia-outlier {
  font-size: 8px;
  color: #E0B252;
  line-height: 1;
  position: absolute;
  top: 0;
}
.pbd-dia-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: #34C88A;
  min-height: 2px;
  transition: height .25s ease;
}
.pbd-dia-label {
  font-size: 8px;
  color: #5E6863;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: center;
  min-height: 10px;
}

/* Fila de categoría en el dashboard */
.pbd-cat-row {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  align-items: start;
}
.pbd-cat-row.excedida { border-color: rgba(216,113,76,.35); }
.pbd-cat-info { grid-column: 1; grid-row: 1; }
.pbd-cat-nombre {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx-soft);
  line-height: 1.3;
}
.pbd-cat-over {
  font-size: 10px;
  font-weight: 700;
  color: #D8714C;
  background: rgba(216,113,76,.12);
  border-radius: 5px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.pbd-cat-grupo {
  font-size: 11px;
  color: #7E8783;
  margin-top: 1px;
}
.pbd-cat-montos {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.pbd-cat-bar-wrap {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pbd-cat-bar-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,.07);
  border-radius: 3px;
  overflow: hidden;
}
.pbd-cat-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}
.pbd-cat-pct {
  font-size: 10.5px;
  font-weight: 700;
  min-width: 32px;
  text-align: right;
}
/* Botón × de quitar línea dentro de pbd-cat-row */
.pbd-cat-row .pb-linea-quitar {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
}

/* Acciones del detalle */
.pbd-acciones {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pbd-btn-registrar {
  background: var(--jade);
  color: #08110C;
  border: none;
  border-radius: var(--r-btn);
  padding: 14px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: filter .15s;
}
.pbd-btn-registrar:hover:not(:disabled) { filter: brightness(1.07); }
.pbd-btn-estado {
  padding: 12px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  width: 100%;
}
.pbd-btn-estado:disabled { opacity: .5; cursor: not-allowed; }

/* ══════════════════════════════════════════
   Modal gestión de categorías (f24)
══════════════════════════════════════════ */

.gc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,8,7,.72);
  backdrop-filter: blur(5px);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 600px) {
  .gc-overlay { align-items: center; }
}

.gc-sheet {
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 32px;
  max-height: 88dvh;
  overflow-y: auto;
}

@media (min-width: 600px) {
  .gc-sheet {
    border-radius: 18px;
    max-height: 80dvh;
    margin: 24px;
  }
}

.gc-handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  margin: 0 auto 20px;
}

@media (min-width: 600px) { .gc-handle { display: none; } }

.gc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.gc-titulo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--tx-soft);
}

.gc-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: none;
  color: var(--tx-mute);
  font-size: 18px;
  cursor: pointer;
  font-family: var(--font-ui);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.gc-close:hover { background: rgba(255,255,255,.1); }

.gc-desc {
  font-size: 12.5px;
  color: var(--tx-mute);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Lista de categorías en el modal */
.gc-cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  margin-bottom: 6px;
}

.gc-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gc-cat-info {
  flex: 1;
  min-width: 0;
}

.gc-cat-nombre {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
}

.gc-cat-meta {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-top: 1px;
}

.gc-cat-edit {
  background: none;
  border: none;
  color: var(--tx-mute);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--font-ui);
  transition: background .12s;
}

.gc-cat-edit:hover { background: rgba(255,255,255,.06); color: var(--tx); }

.gc-cat-del {
  background: none;
  border: none;
  color: #D8714C44;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-family: var(--font-ui);
  transition: color .12s;
}

.gc-cat-del:hover { color: var(--neg); }

/* Formulario de nueva/editar categoría */
.gc-form {
  background: rgba(52,200,138,.04);
  border: 1px solid rgba(52,200,138,.15);
  border-radius: 13px;
  padding: 16px;
  margin-top: 14px;
}

.gc-form-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--jade);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.gc-field {
  margin-bottom: 12px;
}

.gc-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-mute);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

.gc-input {
  width: 100%;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--tx);
  font-size: 14px;
  font-family: var(--font-ui);
  outline: none;
}

.gc-input:focus { border-color: var(--jade-dark); }

.gc-seg {
  display: flex;
  gap: 6px;
}

.gc-seg-btn {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: var(--tx-mute);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all .12s;
}

.gc-seg-btn.active {
  background: rgba(52,200,138,.13);
  border-color: rgba(52,200,138,.35);
  color: var(--jade);
}

.gc-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.gc-btn-cancel {
  flex: none;
  padding: 12px 18px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--tx-mute);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
}

.gc-btn-save {
  flex: 1;
  padding: 12px;
  border-radius: 9px;
  border: none;
  background: var(--jade);
  color: var(--on-jade);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: filter .12s;
}

.gc-btn-save:hover { filter: brightness(1.07); }
.gc-btn-save:disabled { opacity: .5; cursor: not-allowed; filter: none; }

.gc-btn-nueva {
  width: 100%;
  background: transparent;
  border: 1px dashed rgba(52,200,138,.3);
  border-radius: 10px;
  color: var(--jade);
  font-size: 13px;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  margin-top: 10px;
  transition: background .12s, border-color .12s;
}

.gc-btn-nueva:hover {
  background: rgba(52,200,138,.06);
  border-color: rgba(52,200,138,.5);
}

/* ── Panel de asignacion de presupuesto (barra champagne) ── */
.pbd-asig-panel {
  background: rgba(200,169,106,.06);
  border: 1px solid rgba(200,169,106,.18);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.pbd-asig-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.pbd-asig-label {
  font-size: 12px;
  color: var(--tx-mute);
}
.pbd-asig-val {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tx);
}
.pbd-asig-bar-track {
  height: 5px;
  background: rgba(200,169,106,.15);
  border-radius: 3px;
  overflow: hidden;
  margin: 8px 0 4px;
}
.pbd-asig-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease;
}
.pbd-asig-meta {
  font-size: 11.5px;
  text-align: right;
}

/* ── Custom picker de categorias ── */
.cp-picker {
  position: relative;
  width: 100%;
}
.cp-picker-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--tx);
  font-size: 14px;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: left;
  transition: border-color .12s;
}
.cp-picker-trigger:hover,
.cp-picker-trigger:focus {
  border-color: rgba(52,200,138,.4);
  outline: none;
}
.cp-picker-val {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-picker-arrow {
  font-size: 10px;
  color: var(--tx-mute);
  margin-left: 8px;
  flex-shrink: 0;
}
.cp-picker-list {
  background: #1E2426;
  border: 1px solid var(--line);
  border-radius: 10px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.cp-picker-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 0;
  transition: background .1s;
  outline: none;
}
.cp-picker-opt:first-child { border-radius: 10px 10px 0 0; }
.cp-picker-opt:last-child  { border-radius: 0 0 10px 10px; }
.cp-picker-opt:hover,
.cp-picker-opt:focus {
  background: rgba(52,200,138,.1);
}
.cp-picker-opt--sel {
  background: rgba(52,200,138,.08);
}
.cp-picker-opt-nombre {
  flex: 1;
  font-size: 13.5px;
  color: var(--tx);
}
.cp-picker-opt-grupo {
  font-size: 11px;
  color: var(--tx-mute);
  flex-shrink: 0;
}
.cp-picker-opt-check {
  font-size: 12px;
  color: var(--jade);
  flex-shrink: 0;
}

/* En iOS/Safari no existe :has() — fallback neutro: el space-around ya centra 2 tabs */

/* ── f25: Hero patrimonio neto — desglose activos/pasivos ── */

/* Sublabel directo del hero (reemplaza la nota genérica) */
.wl-hero-sub {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-top: 3px;
  line-height: 1.5;
}

/* Desglose activos · pasivos · renta fija en Wealth */
.wl-hero-desglose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 10px;
}
.wl-desglose-item {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.wl-desglose-item.pos  { color: var(--pos); }
.wl-desglose-item.mute { color: var(--tx-mute); }
.wl-desglose-item.champ { color: var(--champagne); }
.wl-desglose-item.warn  { color: var(--alerta); }
.wl-desglose-sep {
  font-size: 10px;
  color: var(--line);
}

/* Botón CTA empty state */
.wl-cta-agregar {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 11px 16px;
  background: transparent;
  border: 1px dashed rgba(52,200,138,.35);
  border-radius: 10px;
  color: var(--jade);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.wl-cta-agregar:hover {
  background: rgba(52,200,138,.06);
  border-color: rgba(52,200,138,.55);
}

/* Tarjeta archivo histórico Delta Horizon */
.wl-archivo-card {
  margin: 0 var(--sp-4) var(--sp-4);
  padding: 12px 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(58,67,71,.6);
  border-radius: 12px;
}
.wl-archivo-encabezado {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.wl-archivo-titulo {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tx-mute);
  letter-spacing: .01em;
}
.wl-archivo-badge {
  font-size: 10px;
  color: #5E6863;
  background: rgba(255,255,255,.05);
  border-radius: 6px;
  padding: 2px 7px;
  margin-left: auto;
}
.wl-archivo-nota {
  font-size: 11px;
  color: #5E6863;
  line-height: 1.5;
}

/* Desglose activos/pasivos en Hub */
.hub-patrim-desglose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 6px;
}
.hub-desglose-item {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.hub-desglose-item.pos   { color: var(--pos); }
.hub-desglose-item.mute  { color: var(--tx-mute); }
.hub-desglose-item.champ { color: var(--champagne); }
.hub-desglose-item.warn  { color: var(--alerta); }
.hub-desglose-sep {
  font-size: 10px;
  color: var(--line);
}

/* ═══════════════════════════════════════════════════════════════
   f35 — Hub budget-first: presupuestos protagonistas + patrimonio secundario
   ═══════════════════════════════════════════════════════════════ */

/* Cabecera de sección presupuestos */
.hub-budget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hub-budget-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-soft);
}
.hub-budget-link {
  background: none;
  border: none;
  color: var(--jade);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  letter-spacing: .01em;
}

/* Tarjeta de plan activo */
.hub-budget-card {
  background: var(--surface);
  border: 1px solid rgba(52,200,138,.18);
  border-radius: 14px;
  padding: 16px 18px 14px;
  cursor: pointer;
  transition: border-color .18s;
  animation: vxup .3s ease both;
}
.hub-budget-card + .hub-budget-card { margin-top: 10px; }
.hub-budget-card:active { border-color: var(--jade); }

.hub-budget-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.hub-budget-card-nombre {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
}
.hub-budget-card-ventana {
  font-size: 11px;
  color: var(--tx-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Barra de burn rate con marca de tiempo */
.hub-budget-bar-wrap { margin: 10px 0 4px; }
.hub-budget-bar-track {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  overflow: visible;
}
.hub-budget-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;
}
/* Marca de tiempo (línea vertical sobre la barra) */
.hub-budget-bar-marca {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: rgba(255,255,255,.45);
  border-radius: 1px;
  transform: translateX(-50%);
}
/* Barra de la misma clase en wl-presup (Wealth) */
.wl-presup-bar-track {
  position: relative;
  height: 5px;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  overflow: visible;
}
.wl-presup-bar-marca {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 11px;
  background: rgba(255,255,255,.4);
  border-radius: 1px;
  transform: translateX(-50%);
}

.hub-budget-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.hub-budget-dias {
  font-size: 11.5px;
  color: var(--tx-mute);
}
.hub-budget-montos {
  font-size: 12px;
  color: var(--tx-soft);
}
.hub-budget-card-estado {
  margin-top: 3px;
}
.hub-budget-pct {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.hub-budget-sin-monto {
  font-size: 11.5px;
  color: var(--tx-mute);
}

/* Empty state presupuestos */
.hub-budget-empty {
  background: var(--surface);
  border: 1px dashed rgba(52,200,138,.2);
  border-radius: 14px;
  padding: 22px 20px;
  text-align: center;
}
.hub-budget-empty-txt {
  font-size: 13px;
  color: var(--tx-mute);
  margin-bottom: 12px;
}
.hub-budget-empty-cta {
  display: inline-block;
  background: none;
  border: 1px solid rgba(52,200,138,.35);
  border-radius: 9px;
  color: var(--jade);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s;
}
.hub-budget-empty-cta:active { background: rgba(52,200,138,.1); }

/* Tarjeta patrimonio secundaria (compacta) */
.hub-patrim-card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 14px;
  margin-top: 20px;
  animation: vxup .3s ease .1s both;
}
.hub-patrim-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.hub-patrim-card-label {
  font-size: 11.5px;
  color: var(--tx-mute);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hub-patrim-card-valor {
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hub-patrim-card-valor.cargando {
  color: var(--tx-mute);
  font-size: 18px;
}
.hub-patrim-card-sub {
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 2px;
}
.hub-patrim-card-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--jade);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 0 0;
  text-align: left;
  letter-spacing: .01em;
}

/* Presupuesto empty en Wealth */
.wl-presup-empty {
  padding: 16px;
  text-align: center;
}
.wl-presup-empty-txt {
  font-size: 13px;
  color: var(--tx-mute);
}

/* ═══════════════════════════════════════════════════════════════
   f26 — Gestión de Patrimonio (#patrimonio)
   Entidades (bancos/personas) → Productos (cuentas, créditos, etc.)
   ═══════════════════════════════════════════════════════════════ */

/* ── Pantalla patrimonio: wrap general ── */
.pt-wrap {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* ── Encabezado ── */
.pt-header {
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pt-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pt-back {
  background: none;
  border: none;
  color: var(--tx-mute);
  font-size: 22px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.pt-back:hover { color: var(--tx); }
.pt-titulo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--tx-soft);
}
.pt-titulo em {
  color: var(--jade);
}
.pt-btn-nueva {
  background: rgba(52,200,138,.12);
  border: 1px solid rgba(52,200,138,.28);
  color: var(--jade);
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.pt-btn-nueva:hover {
  background: rgba(52,200,138,.2);
  border-color: rgba(52,200,138,.5);
}

/* ── Bloque resumen neto ── */
.pt-resumen {
  margin: 0 16px 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.pt-resumen-label {
  font-size: 11px;
  color: var(--tx-mute);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}
.pt-resumen-valor {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--tx-soft);
  line-height: 1.15;
}
.pt-resumen-valor.neg { color: var(--neg); }
.pt-resumen-valor.pos { color: var(--tx-soft); }
.pt-resumen-desglose {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 8px;
}
.pt-desglose-chip {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 3px 9px;
  border-radius: 20px;
}
.pt-desglose-chip.activo {
  background: rgba(52,200,138,.1);
  color: var(--pos);
}
.pt-desglose-chip.pasivo {
  background: rgba(216,113,76,.08);
  color: var(--neg);
}

/* ── Separador sección activos / pasivos ── */
.pt-section-sep {
  margin: 4px 16px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pt-section-sep-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pt-section-sep-label.activos { color: var(--pos); }
.pt-section-sep-label.pasivos { color: var(--neg); }
.pt-section-sep-line {
  flex: 1;
  height: 1px;
  background: var(--line);
  opacity: .5;
}

/* ── Tarjeta de entidad (banco/persona) ── */
.pt-entidad-card {
  margin: 0 16px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
}

/* Encabezado de entidad */
.pt-entidad-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(58,67,71,.5);
}
.pt-entidad-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  flex: none;
  color: #08110C;
}
.pt-entidad-icon.bancaria { background: linear-gradient(135deg,#34C88A,#1C7E57); }
.pt-entidad-icon.persona  { background: linear-gradient(135deg,#6FA8E3,#3A6FAF); }
.pt-entidad-icon.comercio { background: linear-gradient(135deg,#C8A96A,#8A6F38); }
.pt-entidad-icon.otro     { background: linear-gradient(135deg,#9AA39E,#5E6863); }
.pt-entidad-nombre {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tx-soft);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-entidad-tipo-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 14px;
  white-space: nowrap;
}
.pt-entidad-tipo-badge.bancaria { color: var(--jade); background: rgba(52,200,138,.1); }
.pt-entidad-tipo-badge.persona  { color: #6FA8E3; background: rgba(111,168,227,.1); }
.pt-entidad-tipo-badge.comercio { color: var(--champagne); background: rgba(200,169,106,.1); }
.pt-entidad-tipo-badge.otro     { color: var(--tx-mute); background: rgba(255,255,255,.06); }
.pt-entidad-btn-add {
  background: none;
  border: none;
  color: var(--tx-mute);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  transition: color .12s;
}
.pt-entidad-btn-add:hover { color: var(--jade); }

/* ── Producto (cuenta) dentro de la entidad ── */
.pt-producto-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(58,67,71,.35);
  transition: background .1s;
}
.pt-producto-row:last-child { border-bottom: none; }
.pt-producto-row:hover { background: rgba(255,255,255,.025); }

.pt-producto-tipo-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 13px;
}
/* Activos en verde tenue; pasivos en naranja tenue */
.pt-producto-tipo-icon.activo { background: rgba(52,200,138,.1); color: var(--pos); }
.pt-producto-tipo-icon.pasivo { background: rgba(216,113,76,.08); color: var(--neg); }

.pt-producto-info {
  flex: 1;
  min-width: 0;
}
.pt-producto-nombre {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-producto-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.pt-producto-tipo-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-mute);
}
.pt-producto-tasa {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--champagne);
  background: rgba(200,169,106,.08);
  padding: 1px 6px;
  border-radius: 10px;
}

.pt-producto-saldo-col {
  text-align: right;
  flex: none;
}
.pt-producto-saldo {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.pt-producto-saldo.activo { color: var(--tx-soft); }
.pt-producto-saldo.pasivo { color: var(--neg); }
.pt-producto-btn-ajustar {
  display: block;
  margin-top: 3px;
  background: none;
  border: none;
  font-size: 10.5px;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--tx-mute);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .12s;
}
.pt-producto-btn-ajustar:hover { color: var(--jade); }

/* Cuenta Delta excluida: atenuada */
.pt-producto-row.excluida {
  opacity: .45;
}
.pt-producto-row.excluida .pt-producto-nombre::after {
  content: ' · archivo';
  font-size: 10px;
  color: var(--tx-mute);
  font-weight: 400;
}

/* Cuenta archivada: atenuada con badge */
.pt-producto-row.pt-producto-archivada {
  opacity: .5;
}
.pt-badge-archivada {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(200,169,106,.15);
  color: #C8A96A;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  vertical-align: middle;
}

/* ── Estado vacío de entidades ── */
.pt-empty {
  margin: 32px 16px;
  text-align: center;
  color: var(--tx-mute);
  font-size: 13.5px;
  line-height: 1.6;
}
.pt-empty strong {
  display: block;
  color: var(--tx-soft);
  font-size: 15px;
  margin-bottom: 6px;
}

/* ── Modal de entidad / producto: reutiliza .nm-overlay + .nm-sheet ── */
/* solo overrides específicos para los modales de patrimonio */

.pt-modal-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-mute);
  margin: 16px 0 8px;
}

.pt-tipo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.pt-tipo-btn {
  background: var(--raised);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  font-family: var(--font-ui);
}
.pt-tipo-btn .pt-tipo-icon {
  font-size: 18px;
  margin-bottom: 4px;
}
.pt-tipo-btn .pt-tipo-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tx-mute);
  line-height: 1.3;
}
.pt-tipo-btn.sel {
  border-color: var(--jade);
  background: rgba(52,200,138,.08);
}
.pt-tipo-btn.sel .pt-tipo-label { color: var(--jade); }
.pt-tipo-btn.sel-pasivo {
  border-color: var(--neg);
  background: rgba(216,113,76,.07);
}
.pt-tipo-btn.sel-pasivo .pt-tipo-label { color: var(--neg); }

.pt-hint {
  font-size: 11.5px;
  color: var(--tx-mute);
  line-height: 1.5;
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  border-left: 2px solid var(--line);
}

/* Acceso a certificados desde la sección de patrimonio */
.pt-cert-link {
  margin: 0 16px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(200,169,106,.06);
  border: 1px solid rgba(200,169,106,.22);
  border-radius: 13px;
  cursor: pointer;
  transition: background .12s;
  text-decoration: none;
}
.pt-cert-link:hover { background: rgba(200,169,106,.1); }
.pt-cert-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(200,169,106,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pt-cert-link-body { flex: 1; min-width: 0; }
.pt-cert-link-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--champagne);
}
.pt-cert-link-sub {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-top: 2px;
}
.pt-cert-link-arrow {
  font-size: 18px;
  color: var(--champagne);
  opacity: .7;
}

/* ── f27: empty state cuentas en Wealth ── */
.wl-empty-cuentas {
  text-align: center;
  padding: 8px 0 4px;
}
.wl-cta-primera-cuenta {
  display: inline-block;
  margin-top: 4px;
  padding: 10px 20px;
  background: var(--jade);
  color: #08110C;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: opacity .12s;
}
.wl-cta-primera-cuenta:hover { opacity: .88; }

/* ── f27: badge + botón de período presupuestario ── */
.pb-periodo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.pb-periodo-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.pb-periodo-btn {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  color: var(--tx-soft);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pb-periodo-btn:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); }
.pb-periodo-btn:disabled { opacity: .5; cursor: default; }
.pb-periodo-hint {
  font-size: 11px;
  color: var(--tx-mute);
  flex: 1;
  min-width: 0;
}

/* Botón "Gestionar cuentas" en #wealth sección cuentas */
.wl-gestionar-cuentas-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid rgba(52,200,138,.22);
  border-radius: 9px;
  color: var(--jade);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: center;
  transition: background .12s, border-color .12s;
}
.wl-gestionar-cuentas-btn:hover {
  background: rgba(52,200,138,.07);
  border-color: rgba(52,200,138,.45);
}

/* ── f32: selector de periodicidad de tasa (mensual / anual) ── */
.tasa-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.tasa-row input {
  flex: 1;
  min-width: 0;
}
/* Segmented mensual/anual — compacto, reutiliza paleta nm- y cd- */
.tasa-per-seg {
  display: flex;
  background: #0B0E0D;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  flex: none;
}
.tasa-per-btn {
  padding: 0 11px;
  border: none;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  color: var(--tx-mute);
  background: transparent;
  transition: background .14s, color .14s;
  white-space: nowrap;
}
.tasa-per-btn.active {
  background: rgba(52,200,138,.18);
  color: var(--jade);
}
/* Feedback de conversión debajo del input de tasa */
.tasa-feedback {
  margin-top: 6px;
  font-size: 11.5px;
  color: #5E6863;
  line-height: 1.45;
  min-height: 16px;
}
.tasa-feedback strong {
  color: var(--tx-mute);
  font-weight: 600;
}

/* ══════════════════════════════════════════
   Presupuesto v08 — planes nombrados (f34)
══════════════════════════════════════════ */

/* Lista de planes */
.pb-planes-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pb-plan-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
  transition: border-color .14s, background .14s;
}
.pb-plan-card:hover, .pb-plan-card:focus {
  border-color: rgba(52,200,138,.22);
  background: rgba(52,200,138,.04);
  outline: none;
}
.pb-plan-card:active { background: rgba(52,200,138,.07); }

.pb-plan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.pb-plan-nombre {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--tx-soft);
  line-height: 1.2;
}

.pb-plan-fechas {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-bottom: 10px;
}

.pb-plan-arrow {
  position: absolute;
  right: 16px;
  bottom: 14px;
  color: var(--tx-mute);
  font-size: 18px;
  line-height: 1;
}

/* Badges Activo / Cerrado */
.pb-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.pb-badge-activo {
  background: rgba(52,200,138,.18);
  color: var(--jade);
}
.pb-badge-cerrado {
  background: rgba(255,255,255,.07);
  color: var(--tx-mute);
}

/* Burn rate barra */
.pb-burn-wrap {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.pb-burn-bar-track {
  position: relative;
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: visible;
  margin-bottom: 6px;
}
.pb-burn-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .3s;
}
/* Marca vertical de % tiempo transcurrido */
.pb-burn-tiempo-mark {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 11px;
  background: rgba(255,255,255,.35);
  border-radius: 2px;
  transform: translateX(-50%);
}
.pb-burn-texto {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--tx-mute);
  margin-bottom: 4px;
}
.pb-burn-montos {
  display: flex;
  gap: 12px;
  font-size: 11.5px;
  color: var(--tx-mute);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}

/* Botón + Nuevo plan */
.pb-btn-nuevo {
  background: rgba(52,200,138,.14);
  color: var(--jade);
  border: 1px solid rgba(52,200,138,.28);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  flex-shrink: 0;
  white-space: nowrap;
}
.pb-btn-nuevo:hover {
  background: rgba(52,200,138,.22);
  border-color: rgba(52,200,138,.45);
}

/* Detalle: filas de línea */
.pb-linea-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pb-linea-row:last-child { border-bottom: none; }
.pb-linea-info { flex: 1; min-width: 0; }
.pb-linea-cat {
  font-size: 14px;
  color: var(--tx-soft);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-linea-grupo {
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 2px;
}
.pb-linea-monto {
  font-size: 13.5px;
  color: var(--tx-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.pb-linea-quitar {
  background: transparent;
  border: none;
  color: var(--tx-mute);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}
.pb-linea-quitar:hover {
  color: #D8714C;
  background: rgba(216,113,76,.1);
}
.pb-linea-quitar:disabled { opacity: .4; cursor: default; }

/* mNuevoMovimiento: sin presupuesto activo */
.nm-sin-presupuesto {
  font-size: 13px;
  color: var(--tx-mute);
  line-height: 1.5;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 12px 14px;
}
.nm-link-presupuesto {
  background: none;
  border: none;
  color: var(--jade);
  font-size: 13px;
  font-family: var(--font-ui);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  display: inline;
}

/* ── Hint de campo en modales ── */
.nm-campo-hint {
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Perfil editable en #mas ── */
.mas-perfil-header-btn {
  width: 100%;
  background: none;
  border: none;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background .15s;
  border-radius: var(--r-card);
}
.mas-perfil-header-btn:hover { background: rgba(255,255,255,.03); }

.mas-perfil-edit-hint {
  font-size: 12px;
  color: var(--jade);
  flex: none;
  white-space: nowrap;
  opacity: .8;
}

/* ── Chips visuales de cuenta en mNuevoMovimiento ── */
.nm-cuenta-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.nm-cuenta-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: border-color .15s, background .15s;
  color: var(--tx);
}
.nm-cuenta-chip:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.03); }

.nm-cuenta-chip-active,
.nm-cuenta-chip-active:hover {
  border-color: var(--jade);
  background: rgba(52,200,138,.16);
  box-shadow: inset 0 0 0 1px rgba(52,200,138,.35);
}

.nm-cuenta-chip-nombre {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-soft);
  line-height: 1.2;
}

.nm-cuenta-chip-banco {
  font-size: 11px;
  color: var(--tx-mute);
  line-height: 1.2;
}

.nm-cuenta-chip-saldo {
  font-size: 13px;
  color: var(--tx);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.nm-cuenta-chip-mon {
  font-size: 11px;
  color: var(--tx-mute);
}

/* ══════════════════════════════════════════
   f48 — Botones de acción en Wealth (Transferir / Pagar tarjeta)
══════════════════════════════════════════ */
.wl-cuentas-acciones {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.wl-accion-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  color: var(--tx-mute);
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color .14s, color .14s;
}
.wl-accion-btn:hover {
  border-color: rgba(255,255,255,.28);
  color: var(--tx-soft);
}

/* ══════════════════════════════════════════
   f48 — Pantalla #movimientos
══════════════════════════════════════════ */

/* ── f80: fix header móvil de Movimientos por cuenta ──
   En <1024px el .mov-mobile-header muestra back + título.
   Usamos flex-direction:column para evitar solapamientos
   cuando el título tiene el badge "estado de cuenta". */
.mov-mobile-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding-top: env(safe-area-inset-top, 0px);
}
.mov-mobile-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mov-filtros-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mov-tipos-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mov-tipo-btn {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.13);
  background: transparent;
  color: var(--tx-mute);
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.mov-tipo-btn:hover {
  border-color: rgba(255,255,255,.28);
  color: var(--tx);
}
.mov-tipo-active {
  background: var(--jade);
  color: #08110C;
  border-color: var(--jade);
}

.mov-selects-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mov-select {
  flex: 1;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--tx);
  border-radius: var(--r-input);
  padding: 9px 11px;
  font-size: .82rem;
  font-family: var(--font-ui);
}
.mov-select:focus {
  outline: none;
  border-color: var(--jade-dark);
}

/* ══════════════════════════════════════════
   f48 — Menú FAB expandido
══════════════════════════════════════════ */
.fab-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 16px;
  background: transparent;
  border: none;
  color: var(--tx-soft);
  font-size: .88rem;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.fab-menu-item:hover {
  background: rgba(255,255,255,.05);
}

/* ══════════════════════════════════════════
   f49 — Activos no-financieros + renta recurrente + programados
══════════════════════════════════════════ */

/* Tarjeta de ingresos programados en #patrimonio */
.pt-prog-section {
  margin: 0 16px 16px;
}
.pt-prog-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
  margin-bottom: 10px;
}
.pt-prog-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(58,67,71,.5);
}
.pt-prog-row:last-child {
  border-bottom: none;
}
.pt-prog-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(52,200,138,.1);
  color: var(--jade);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.pt-prog-info {
  flex: 1;
  min-width: 0;
}
.pt-prog-desc {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-prog-meta {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-top: 2px;
}
.pt-prog-monto {
  font-size: 13.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.pt-prog-monto.pos { color: var(--jade); }
.pt-prog-empty {
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--tx-mute);
}

/* ══════════════════════════════════════════
   CIERRE DE MES — flujo ceremonial (f53)
   ══════════════════════════════════════════ */

/* Botón "Cerrar mes" en acciones del detalle */
.pbd-btn-cerrar-mes {
  padding: 13px 18px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: 1.5px solid rgba(200,169,106,.5);
  color: #C8A96A;
  letter-spacing: .02em;
  transition: background .15s, border-color .15s;
}
.pbd-btn-cerrar-mes:hover:not(:disabled) {
  background: rgba(200,169,106,.08);
  border-color: rgba(200,169,106,.75);
}
.pbd-btn-cerrar-mes:disabled { opacity: .45; cursor: not-allowed; }

/* ── Modal de cierre ── */
.cm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(6,8,7,.78);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: flex-end;
  animation: nm-overlay-in .22s ease both;
}
.cm-overlay.cm-overlay-out {
  animation: nm-overlay-out .2s ease both;
}
.cm-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--line);
  width: 100%;
  max-height: 92svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px));
  animation: nm-sheet-up .25s cubic-bezier(.22,1,.36,1) both;
}
.cm-overlay.cm-overlay-out .cm-sheet {
  animation: nm-sheet-down .2s ease both;
}
.cm-handle {
  width: 36px;
  height: 4px;
  background: var(--line);
  border-radius: 4px;
  margin: 12px auto 6px;
  flex-shrink: 0;
}
.cm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 14px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.cm-titulo {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--tx);
  flex: 1;
  min-width: 0;
}
.cm-close {
  background: none;
  border: none;
  color: var(--tx-mute);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

/* Cuerpo del modal */
.cm-body { padding: 20px 20px 0; }

/* Totales hero */
.cm-totales {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 18px 16px;
  margin-bottom: 16px;
}
.cm-totales-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.cm-totales-label {
  font-size: 12px;
  color: var(--tx-mute);
  font-weight: 500;
}
.cm-totales-valor {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tx);
  text-align: right;
}
.cm-totales-row + .cm-totales-row { margin-top: 10px; }
.cm-totales-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 12px 0;
}

/* Barra de consumo */
.cm-bar-wrap { margin: 14px 0 4px; }
.cm-bar-track {
  height: 8px;
  background: rgba(255,255,255,.08);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.cm-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .35s ease;
}
.cm-bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

/* Sobrante / Exceso */
.cm-sobrante {
  text-align: center;
  padding: 10px 0 4px;
}
.cm-sobrante-num {
  font-size: clamp(20px,6vw,28px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-ui);
}
.cm-sobrante-label {
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 2px;
}

/* Sección title */
.cm-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-mute);
  margin: 18px 0 10px;
}

/* Líneas por categoría */
.cm-lineas { display: flex; flex-direction: column; gap: 6px; }
.cm-linea-row {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px 8px;
  align-items: start;
}
.cm-linea-row.excedida { border-color: rgba(216,113,76,.4); }
.cm-linea-nombre {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  grid-column: 1;
  grid-row: 1;
}
.cm-linea-badge-exc {
  font-size: 9px;
  font-weight: 700;
  background: rgba(216,113,76,.18);
  color: #D8714C;
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cm-linea-montos {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cm-linea-barra {
  grid-column: 1 / -1;
  grid-row: 2;
}
.cm-linea-bar-track {
  height: 3px;
  background: rgba(255,255,255,.07);
  border-radius: 3px;
  overflow: hidden;
}
.cm-linea-bar-fill {
  height: 100%;
  border-radius: 3px;
}

/* Movimientos por tipo */
.cm-movs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.cm-mov-chip {
  flex: 1;
  min-width: 80px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.cm-mov-num {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tx);
  display: block;
  line-height: 1.2;
}
.cm-mov-label {
  font-size: 10px;
  color: var(--tx-mute);
  margin-top: 3px;
  display: block;
}

/* Patrimonio al cierre */
.cm-patrimonio {
  background: linear-gradient(135deg, rgba(200,169,106,.08) 0%, rgba(14,20,18,.0) 100%);
  border: 1.5px solid rgba(200,169,106,.28);
  border-radius: 13px;
  padding: 18px 16px;
}
.cm-patrimonio-label {
  font-size: 11px;
  color: #C8A96A;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cm-patrimonio-valor {
  font-size: clamp(22px,7vw,30px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #C8A96A;
  line-height: 1.1;
}
.cm-patrimonio-sub {
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cm-patrimonio-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(200,169,106,.15);
  color: #C8A96A;
  border-radius: 5px;
  padding: 2px 6px;
  letter-spacing: .04em;
}

/* Aviso de peso */
.cm-aviso {
  background: rgba(14,20,18,.6);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 12px;
  color: var(--tx-mute);
  line-height: 1.6;
  margin: 16px 0;
}

/* Botón "Cerrar definitivamente" */
.cm-btn-confirmar {
  display: block;
  width: 100%;
  padding: 15px 18px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: .03em;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(200,169,106,.2) 0%, rgba(200,169,106,.1) 100%);
  border: 1.5px solid rgba(200,169,106,.6);
  color: #C8A96A;
  transition: filter .15s, opacity .15s;
  margin-top: 4px;
}
.cm-btn-confirmar:hover:not(:disabled) { filter: brightness(1.1); }
.cm-btn-confirmar:disabled { opacity: .45; cursor: not-allowed; }

/* Acta de cierre (read-only) */
.cm-acta-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cm-acta-sello {
  font-size: 11px;
  font-weight: 700;
  background: rgba(200,169,106,.15);
  color: #C8A96A;
  border-radius: 6px;
  padding: 3px 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cm-acta-fecha {
  font-size: 12px;
  color: var(--tx-mute);
}

/* Estado cargando */
.cm-cargando {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--tx-mute);
  font-size: 13px;
  gap: 10px;
}

/* Botón materializar */
.pt-btn-materializar {
  display: block;
  width: 100%;
  padding: 12px;
  background: rgba(52,200,138,.08);
  border: 1.5px solid rgba(52,200,138,.25);
  border-radius: 10px;
  color: var(--jade);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  letter-spacing: .01em;
  transition: background .12s, border-color .12s;
}
.pt-btn-materializar:hover {
  background: rgba(52,200,138,.14);
}
.pt-btn-materializar:disabled {
  opacity: .5;
  cursor: not-allowed;
}



/* Spinner global (modal de cierre de mes y otros loaders) */
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   f55 — Dashboard de patrimonio (#dashboard)
   ═══════════════════════════════════════════════════════════════ */

.dash-wrap {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* Encabezado */
.dash-header {
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-titulo {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  color: var(--tx-soft);
}
.dash-titulo em { color: var(--jade); }

/* Cards de sección */
.dash-hero-card,
.dash-section-card {
  margin: 0 16px 14px;
  background: var(--surface);
  border-radius: 14px;
  padding: 20px 18px;
  border: 1px solid rgba(255,255,255,.06);
}

/* Hero */
.dash-hero-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx-mute);
  margin-bottom: 8px;
}
.dash-hero-valor {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  margin-bottom: 14px;
}
.dash-hero-valor.pos { color: var(--tx-soft); }
.dash-hero-valor.neg { color: var(--neg); }

.dash-hero-desglose {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.dash-chip {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
}
.dash-chip.pos   { background: rgba(52,200,138,.10); color: var(--jade); }
.dash-chip.neg   { background: rgba(216,113,76,.10); color: var(--neg); }
.dash-chip.champ { background: rgba(200,169,106,.10); color: var(--champ); }

.dash-link-entidades {
  background: none;
  border: none;
  color: var(--tx-mute);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.dash-link-entidades:hover { color: var(--tx); }

/* Títulos de sección */
.dash-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx-soft);
  letter-spacing: .01em;
  margin-bottom: 14px;
  display: block;
}
.dash-section-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.dash-badge-estimado {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--champ);
  background: rgba(200,169,106,.12);
  border-radius: 6px;
  padding: 2px 7px;
}

/* SVG de gráfico */
.dash-svg {
  overflow: visible;
}

/* Estados vacíos del gráfico */
.dash-grafico-empty {
  text-align: center;
  color: var(--tx-mute);
  font-size: 13px;
  padding: 24px 0 12px;
  line-height: 1.5;
}
.dash-grafico-empty-sub {
  font-size: 11.5px;
  color: var(--tx-mute);
  display: block;
  margin-top: 4px;
}
.dash-grafico-single {
  text-align: center;
  padding: 12px 0 8px;
}
.dash-grafico-single-valor {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--jade);
  font-weight: 600;
  margin-bottom: 6px;
}
.dash-grafico-single-fecha {
  font-size: 11px;
  color: var(--tx-mute);
}

/* Selector de horizonte */
.dash-horizonte-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.dash-horizonte-btn {
  flex: 1;
  padding: 8px 0;
  background: var(--raised);
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: var(--tx-mute);
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.dash-horizonte-btn.active {
  background: rgba(200,169,106,.14);
  border-color: rgba(200,169,106,.40);
  color: var(--champ);
}
.dash-horizonte-btn:hover:not(.active) {
  background: rgba(255,255,255,.06);
  color: var(--tx);
}

/* Loading inline */
.dash-loading-inline {
  text-align: center;
  color: var(--tx-mute);
  font-size: 12.5px;
  padding: 20px 0;
}
.dash-proy-error {
  text-align: center;
  color: var(--neg);
  font-size: 12.5px;
  padding: 12px 0;
}

/* Hitos de proyección */
.dash-hitos-row {
  display: flex;
  gap: 8px;
  margin: 14px 0 18px;
  flex-wrap: wrap;
}
.dash-hito {
  flex: 1;
  min-width: 70px;
  background: var(--raised);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.06);
}
.dash-hito.pos { border-color: rgba(52,200,138,.15); }
.dash-hito.neg { border-color: rgba(216,113,76,.15); }
.dash-hito-valor {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.dash-hito.pos .dash-hito-valor { color: var(--jade); }
.dash-hito.neg .dash-hito-valor { color: var(--neg); }
.dash-hito-label {
  font-size: 10px;
  color: var(--tx-mute);
  font-weight: 600;
}

/* Componentes de flujo */
.dash-flujo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dash-flujo-item {
  background: var(--raised);
  border-radius: 10px;
  padding: 12px 12px 10px;
  border: 1px solid rgba(255,255,255,.06);
}
.dash-flujo-item.flujo-neto {
  border-color: rgba(52,200,138,.15);
}
.dash-flujo-valor {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
  font-variant-numeric: tabular-nums;
}
.dash-flujo-valor.pos   { color: var(--pos); }
.dash-flujo-valor.neg   { color: var(--neg); }
.dash-flujo-valor.champ { color: var(--champ); }
.dash-flujo-label {
  font-size: 10.5px;
  color: var(--tx-mute);
  line-height: 1.35;
}

/* Aviso de ingresos */
.dash-aviso-ingresos {
  display: flex;
  gap: 12px;
  background: rgba(224,178,82,.07);
  border: 1px solid rgba(224,178,82,.20);
  border-radius: 10px;
  padding: 14px 14px;
  margin-top: 16px;
  align-items: flex-start;
}
.dash-aviso-icon {
  font-size: 16px;
  color: var(--alerta, #E0B252);
  flex-shrink: 0;
  margin-top: 1px;
}
.dash-aviso-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-aviso-body strong {
  font-size: 12.5px;
  color: var(--tx);
  font-weight: 700;
}
.dash-aviso-body span {
  font-size: 11.5px;
  color: var(--tx-mute);
  line-height: 1.45;
}
.dash-aviso-cta {
  background: none;
  border: none;
  color: var(--alerta, #E0B252);
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  margin-top: 4px;
}

/* Error / sin acceso */
.dash-error {
  text-align: center;
  padding: 48px 24px;
}
.dash-error-icon {
  font-size: 36px;
  margin-bottom: 14px;
}
.dash-error-msg {
  color: var(--tx-mute);
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.dash-error-btn {
  background: var(--raised);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--tx);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 10px 22px;
  border-radius: 8px;
  cursor: pointer;
}

/* Botón Dashboard en header de patrimonio */
.pt-btn-dashboard {
  background: rgba(200,169,106,.10);
  border: 1px solid rgba(200,169,106,.25);
  color: var(--champ);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-ui);
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.pt-btn-dashboard:hover { background: rgba(200,169,106,.18); }


/* ─── Presupuesto: clases base (móvil) ─── */
.pb-lista-desktop { display: none; }
.pb-lista-mobile  { display: flex; }

/* ─── Dashboard: layout base (una columna, móvil) ─── */
.dash-dsk-layout { display: flex; flex-direction: column; }
.dash-dsk-col-left,
.dash-dsk-col-right { display: contents; }

/* Card activo desktop (oculta en móvil; sólo se muestra en ≥1024px) */
.pb-plan-activo-card { display: none; }
.pb-cerrados-titulo  { display: none; }
.pb-cerrados-grilla  { display: none; }

/* Elementos de escritorio: ocultos en móvil, visibles solo en ≥1024px */
.dsk-sidebar { display: none; }
.dsk-topbar  { display: none; }
.pg-header   { display: none; }

/* Shells de render Wealth: móvil visible por defecto, desktop oculto */
.wl-mobile-shell  { display: block; }
.wl-desktop-shell { display: none; }

/* ── adm-wrap base (movil/tablet <1024px) ── */
.adm-wrap {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 720px) {
  .adm-wrap { padding: var(--sp-5) var(--sp-6) var(--sp-7); }
}

/* ═══════════════════════════════════════════════════════════
   SHELL DE ESCRITORIO ≥1024px — sidebar 240px
   TODO lo que sigue aplica SOLO en ≥1024px.
   <1024px: sin cambios (tab bar + columna — intacto).
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* Ocultar rail de íconos y tab bar en desktop */
  .nav-rail { display: none !important; }
  .tab-bar  { display: none !important; }

  /* Layout raíz: flex row, altura completa */
  body.has-nav #app {
    flex-direction: row;
    height: 100dvh;
    overflow: hidden;
  }

  /* ── Sidebar ──────────────────────────────────── */
  .dsk-sidebar {
    width: 240px;
    flex: none;
    background: #0B0E0D;
    border-right: 1px solid rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    overflow: hidden;
  }

  /* Bloque de marca */
  .dsk-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 16px 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    flex: none;
  }
  .dsk-brand-apex {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(52,200,138,.12);
    border: 1px solid rgba(52,200,138,.28);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .dsk-brand-text { flex: 1; min-width: 0; }
  .dsk-brand-name {
    font-size: 12.5px;
    letter-spacing: .2em;
    font-weight: 600;
    color: #ECECE6;
  }
  .dsk-brand-name-accent {
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-size: 13px;
    color: #34C88A;
    margin-left: 5px;
  }
  .dsk-brand-hogar {
    font-size: 11px;
    color: #67716C;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Área de nav scrollable */
  .dsk-nav {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
  }

  /* Etiqueta de grupo */
  .dsk-nav-label {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #4F5854;
    font-weight: 700;
    padding: 4px 10px 8px;
  }
  .dsk-nav-label.mt { padding-top: 18px; }

  /* Ítem de nav */
  .dsk-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    color: #C7CFCB;
    background: transparent;
    border: none;
    font-family: 'Hanken Grotesk', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    text-align: left;
    transition: background .1s;
  }
  .dsk-nav-item:hover { background: rgba(255,255,255,.04); }
  .dsk-nav-item.active {
    background: rgba(52,200,138,.10);
    color: #34C88A;
    font-weight: 700;
  }
  .dsk-nav-item.dim { opacity: .55; cursor: default; }
  .dsk-nav-item .dsk-nav-arrow { color: #5E6863; font-size: 15px; margin-left: auto; }
  .dsk-nav-item .dsk-nav-pronto {
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    margin-left: auto;
  }

  /* Sub-ítem (ej. Certificados bajo Renta fija) */
  .dsk-nav-subitem {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 11px 8px 16px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: #9AA39E;
    font-size: 13px;
    font-weight: 500;
    transition: background .1s, color .1s;
    width: 100%;
    text-align: left;
  }
  .dsk-nav-subitem:hover { background: rgba(255,255,255,.04); color: #ECECE6; }
  .dsk-nav-subitem.active {
    color: #34C88A;
    background: rgba(52,200,138,.08);
    outline: none;
  }
  .dsk-nav-subitem.active .dsk-sub-dot { background: #34C88A; }
  .dsk-nav-subitem .dsk-sub-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3A4347;
    flex: none;
    transition: background .1s;
  }

  /* Fila de usuario al pie */
  .dsk-user-row {
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,.05);
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
  }
  .dsk-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg,#34C88A,#1C7E57);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #06140D;
  }
  .dsk-user-info { min-width: 0; flex: 1; }
  .dsk-user-nombre {
    font-size: 12.5px;
    color: #ECECE6;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dsk-user-sub {
    font-size: 10.5px;
    color: #67716C;
  }
  .dsk-user-kebab {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #67716C;
    display: flex;
    align-items: center;
  }

  /* ── Área de contenido ───────────────────────── */
  .nav-view {
    margin-left: 240px;
    flex: 1;
    min-width: 0;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
  }

  /* ── Sidebar y topbar: visibles en desktop ──────── */
  .dsk-sidebar { display: flex; }
  .dsk-topbar  { display: flex; }

  /* ── Topbar de escritorio ─────────────────────── */
  /* En desktop (topbar con su propio boton de sync) ocultamos el FAB movil.
     Se oculta recien a >=1024px para que cubra todo 0-1023px sin zona muerta. */
  .mob-sync-fab { display: none !important; }

  .dsk-topbar {
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    height: 60px;
    flex: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: #0B0E0D;
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .dsk-topbar-left {
    display: flex;
    align-items: center;
    gap: 11px;
  }
  .dsk-topbar-title {
    font-size: 18px;
    font-weight: 700;
    color: #F4F2EC;
    letter-spacing: -.01em;
  }
  .dsk-topbar-fecha {
    font-size: 12.5px;
    color: #5E6863;
  }
  .dsk-topbar-breadcrumb-parent {
    font-size: 13px;
    color: #5E6863;
  }
  .dsk-topbar-breadcrumb-sep {
    font-size: 12px;
    color: #3A4347;
  }
  .dsk-topbar-breadcrumb-current {
    font-size: 14px;
    font-weight: 700;
    color: #F4F2EC;
  }
  .dsk-topbar-right {
    display: flex;
    align-items: center;
    gap: 11px;
  }
  .dsk-topbar-eye {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #14191A;
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #9AA39E;
  }
  .dsk-topbar-eye:hover { background: #1A2122; }
  .dsk-topbar-fx {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    background: #14191A;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
  }
  .dsk-topbar-fx-label {
    font-size: 10.5px;
    letter-spacing: .06em;
    color: #5E6863;
  }
  .dsk-topbar-fx-val {
    font-size: 12px;
    color: #C7CFCB;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .dsk-topbar-currencies {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #14191A;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 3px;
  }
  .dsk-topbar-cur-label {
    font-size: 10px;
    color: #5E6863;
    padding: 0 5px 0 7px;
    letter-spacing: .08em;
  }
  .dsk-topbar-btn-mov {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #34C88A;
    color: #08110C;
    border: none;
    border-radius: 8px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Hanken Grotesk', -apple-system, sans-serif;
    cursor: pointer;
  }
  .dsk-topbar-btn-mov:hover { background: #42d699; }

  /* ── Boton de accion primaria de topbar (compartido: Deudas, Certs, Suscripciones, Inversiones) ── */
  .dsk-topbar-btn-primary {
    display: inline-flex;
    align-items: center;
    background: var(--jade);
    color: #08110C;
    border: none;
    border-radius: 8px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-ui);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .14s;
  }
  .dsk-topbar-btn-primary:hover { opacity: .88; }

  /* ── Boton sync topbar ──────────────────────── */
  .dsk-topbar-sync {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #7E8783;
    transition: background .15s, color .15s;
  }
  .dsk-topbar-sync:hover { background: #1A2122; color: #34C88A; }
  .dsk-topbar-sync:active { background: #1E2426; }
  .dsk-topbar-sync:disabled { opacity: .45; cursor: default; }
  .dsk-sync-icon { display: block; flex: none; }
  @keyframes vtx-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .dsk-sync-spinning .dsk-sync-icon {
    animation: vtx-spin .7s linear infinite;
  }

  /* ── Hub Web desktop ─────────────────────────── */

  /* Ocultar header móvil del hub en desktop */
  .hub-hoy-header { display: none; }

  /* Ocultar el header de txns duplicado (sólo para mobile layout) */
  .hub-txns-header-mobile { display: none; }

  /* Ancho de contenido — alineado al estandar desktop (28px arriba, 40px izq igual que .wrap) */
  .hub-hoy-body {
    max-width: 1280px;
    margin: 0;
    padding: 28px 40px 64px !important;
  }
  /* El bloque saludo no necesita margin-top en desktop: el hub-hoy-body ya tiene padding-top:28px */
  .hub-saludo-blk { margin-top: 0 !important; }

  /* Grid presupuesto (1.7fr) + patrimonio (1fr) */
  .hub-dsk-grid-main {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 18px;
    align-items: start;
    min-width: 1000px;
  }

  /* Grid insights + movimientos/cobros — MISMO template que grid-main (1.7fr 1fr)
     para que movimientos y proximos cobros se alineen bajo la card de patrimonio. */
  .hub-dsk-grid-secondary {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 18px;
    align-items: start;
    min-width: 1000px;
    margin-top: 18px;
  }
  .hub-sec-right { margin-top: 0; }

  /* Card de patrimonio desktop */
  .hub-patrim-card {
    background: linear-gradient(155deg,#11201A,#0E1211);
    border: 1px solid rgba(52,200,138,.18);
    border-radius: 14px;
    padding: 22px 24px;
    margin-top: 0 !important;
  }
  .hub-patrim-card-label {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7E8783;
    font-weight: 600;
  }
  .hub-patrim-card-valor {
    font-size: 32px;
    font-weight: 700;
    color: #F4F2EC;
    letter-spacing: -.025em;
    margin-top: 12px;
    font-variant-numeric: tabular-nums;
  }
  .hub-patrim-card-sub {
    font-size: 12px;
    color: #7E8783;
    margin-top: 4px;
  }
  .hub-patrim-desglose {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px;
  }
  .hub-patrim-desglose-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .hub-patrim-desglose-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #9AA39E;
  }
  .hub-patrim-desglose-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }
  .hub-patrim-desglose-val {
    font-size: 12.5px;
    font-weight: 700;
    color: #ECECE6;
    font-variant-numeric: tabular-nums;
  }
  .hub-patrim-card-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 12.5px;
    font-weight: 700;
    color: #34C88A;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Hanken Grotesk', -apple-system, sans-serif;
    padding: 0;
  }

  /* Presupuestos en desktop: borde 14px, sin restricción de ancho */
  .hub-budget-card-dsk {
    background: #14191A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 22px 24px;
  }

  /* Grid verticales 3-col en desktop */
  .hub-verticales-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Movimientos de hoy — card lista desktop */
  .hub-dsk-txns-card {
    background: #14191A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    overflow: hidden;
  }
  .hub-dsk-cobros-card {
    background: #14191A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 14px;
  }
  .hub-dsk-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .hub-dsk-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #ECECE6;
  }
  .hub-dsk-card-count {
    font-size: 11.5px;
    color: #67716C;
    font-variant-numeric: tabular-nums;
  }
  /* Filas con padding horizontal dentro de las cards desktop: el cuerpo no tiene
     un .wrap con padding (como en móvil), así que sin esto pegan contra el borde. */
  .hub-dsk-txns-card .hub-txn-row { padding-left: 18px; padding-right: 18px; }
  .hub-dsk-cobros-card .hub-cobro-row { padding-left: 18px; padding-right: 18px; }

  /* ── Wealth Web desktop ───────────────────────── */

  /* Ocultar header móvil de Wealth en desktop */
  .wl-header { display: none; }

  /* Contenido ancho, max 1480px, padding generoso */
  .wl-wrap {
    max-width: none;
    padding: 26px 32px 64px;
    min-width: 1180px;
  }

  /* Hero card: layout horizontal en desktop */
  .wl-hero-card {
    border-radius: 12px;
  }

  /* Intercambiar shells: en desktop mostrar layout tabla, ocultar columna móvil */
  .wl-mobile-shell  { display: none; }
  .wl-desktop-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .wl-dsk-content {
    flex: 1;
    overflow: auto;
    min-width: 1100px;
  }

  /* Sections sin restriccion de ancho */
  .wl-section { max-width: none; }

  /* Archivo card desktop */
  .wl-archivo-card { max-width: none; }

  /* Grid cuentas desktop: tabla + panel derecho */
  .wl-dsk-cuentas-grid {
    display: grid;
    grid-template-columns: 1fr 312px;
    gap: 18px;
    align-items: start;
  }

  /* Tabla de cuentas desktop — columnas CUENTA / INSTITUCIÓN / MONEDA / SALDO */
  .wl-dsk-tabla-header {
    display: grid;
    grid-template-columns: 1.5fr 1fr 84px 160px;
    padding: 13px 18px;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5E6863;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .wl-dsk-tabla-header span:last-child { text-align: right; }

  .wl-dsk-cuenta-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 84px 160px;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    cursor: pointer;
    transition: background .1s;
  }
  .wl-dsk-cuenta-row:hover { background: rgba(255,255,255,.025); }
  .wl-dsk-cuenta-nombre-wrap {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
  }
  .wl-dsk-cuenta-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex: none;
  }
  .wl-dsk-cuenta-nombre {
    font-size: 14px;
    font-weight: 600;
    color: #ECECE6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wl-dsk-cuenta-banco {
    font-size: 12.5px;
    color: #9AA39E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wl-dsk-cuenta-cur-pill {
    display: inline-flex;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 13px;
    letter-spacing: .04em;
    justify-self: start;
  }
  .wl-dsk-cuenta-saldo-wrap { text-align: right; }
  .wl-dsk-cuenta-saldo-main {
    font-size: 15px;
    font-weight: 700;
    color: #ECECE6;
    font-variant-numeric: tabular-nums;
  }
  .wl-dsk-cuenta-saldo-nat {
    font-size: 11.5px;
    color: #67716C;
    font-variant-numeric: tabular-nums;
  }

  /* Panel derecho en cuentas desktop */
  .wl-dsk-tasas-card {
    background: #14191A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 18px;
  }
  .wl-dsk-dist-card {
    background: linear-gradient(155deg,#11201A,#0E1211);
    border: 1px solid rgba(52,200,138,.2);
    border-radius: 12px;
    padding: 18px;
    margin-top: 14px;
  }

  /* KPI grid 5 columnas (Resumen) */
  .wl-dsk-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 12px;
  }
  .wl-dsk-kpi-card {
    background: #14191A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    padding: 16px 17px;
  }
  .wl-dsk-kpi-label {
    font-size: 11px;
    color: #7E8783;
  }
  .wl-dsk-kpi-val {
    font-size: 22px;
    font-weight: 700;
    color: #F4F2EC;
    letter-spacing: -.02em;
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
  }
  .wl-dsk-kpi-sub {
    font-size: 11.5px;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
  }

  /* Grid movimientos + cuentas en Wealth Resumen desktop */
  .wl-dsk-bottom-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 16px;
    align-items: start;
    margin-top: 16px;
  }

  /* Card contenedor genérico desktop */
  .wl-dsk-card {
    background: #14191A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    overflow: hidden;
  }
  .wl-dsk-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .wl-dsk-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #ECECE6;
  }
  .wl-dsk-card-link {
    font-size: 12px;
    color: #34C88A;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    font-weight: 600;
  }

  /* Fila mov compacta desktop */
  .wl-dsk-mov-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .1s;
  }
  .wl-dsk-mov-row:hover { background: rgba(255,255,255,.025); }
  .wl-dsk-mov-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 13px;
  }
  .wl-dsk-mov-info { flex: 1; min-width: 0; }
  .wl-dsk-mov-desc {
    font-size: 12.5px;
    font-weight: 600;
    color: #ECECE6;
  }
  .wl-dsk-mov-sub {
    font-size: 11px;
    color: #7E8783;
  }
  .wl-dsk-mov-monto {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* ─── Certificados desktop ─────────────────────────── */
  /* En movil: cd-mob-shell visible, cd-dsk-shell oculto */
  .cd-mob-shell  { display: none; }
  .cd-dsk-shell  { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }

  .cd-dsk-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    height: 60px;
    flex: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: #0B0E0D;
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .cd-dsk-topbar-left  { display: flex; align-items: center; gap: 11px; }
  .cd-dsk-topbar-right { display: flex; align-items: center; gap: 11px; }
  .cd-dsk-bc-parent { font-size: 13px; color: #5E6863; }
  .cd-dsk-bc-sep    { font-size: 12px; color: #3A4347; }
  .cd-dsk-bc-cur    { font-size: 14px; font-weight: 700; color: #F4F2EC; }

  .cd-dsk-scroll {
    flex: 1;
    overflow: auto;
    padding: 26px 32px 56px;
  }
  .cd-dsk-inner {
    min-width: 900px;
    max-width: 1140px;
  }
  .cd-dsk-hdr {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
  }
  .cd-dsk-hdr-title {
    font-family: 'Newsreader', serif;
    font-size: 32px;
    font-weight: 400;
    color: #F4F2EC;
    margin: 0;
    line-height: 1.1;
  }
  .cd-dsk-hdr-sub  { font-size: 14px; color: #8A938F; margin: 8px 0 0; }
  .cd-dsk-hdr-actions { display: flex; align-items: center; gap: 10px; }

  .cd-dsk-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px;
  }
  .cd-dsk-sum-card {
    background: #14191A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    padding: 20px;
  }
  .cd-dsk-sum-label { font-size: 12.5px; color: #7E8783; }
  .cd-dsk-sum-value {
    font-size: 24px; font-weight: 700; color: #ECECE6;
    margin-top: 8px; font-variant-numeric: tabular-nums;
  }

  .cd-dsk-banner {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 18px;
    background: rgba(52,200,138,.06);
    border: 1px solid rgba(52,200,138,.18);
    border-radius: 13px;
    margin-bottom: 16px;
  }
  .cd-dsk-banner-text { font-size: 12.5px; color: #9AA39E; line-height: 1.5; }
  .cd-dsk-banner-text strong { color: #ECECE6; }

  .cd-dsk-table-wrap {
    background: #14191A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    overflow: hidden;
  }
  .cd-dsk-table-header {
    display: grid;
    grid-template-columns: 2fr 130px 150px 150px 150px 160px;
    padding: 11px 20px;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5E6863;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .cd-dsk-table-header span:nth-child(n+3) { text-align: right; }

  .cd-dsk-row {
    display: grid;
    grid-template-columns: 2fr 130px 150px 150px 150px 160px;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .1s;
  }
  .cd-dsk-row:last-child  { border-bottom: none; }
  .cd-dsk-row:hover { background: rgba(255,255,255,.02); }

  .cd-dsk-row-name-wrap { display: flex; align-items: center; gap: 13px; min-width: 0; }
  .cd-dsk-row-icon {
    width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; flex: none;
  }
  .cd-dsk-row-nombre {
    font-size: 14.5px; font-weight: 700; color: #F4F2EC;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cd-dsk-row-meta { font-size: 11.5px; color: #7E8783; margin-top: 3px; font-variant-numeric: tabular-nums; }
  .cd-dsk-row-badge {
    display: inline-block; font-size: 10px; letter-spacing: .06em;
    text-transform: uppercase; font-weight: 700; padding: 3px 8px; border-radius: 12px;
    margin-top: 4px;
  }
  .cd-dsk-cell { text-align: right; }
  .cd-dsk-cell-val { font-size: 14.5px; font-weight: 700; color: #ECECE6; font-variant-numeric: tabular-nums; }
  .cd-dsk-cell-sub { font-size: 11px; color: #7E8783; margin-top: 2px; font-variant-numeric: tabular-nums; }

  .cd-dsk-progress-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 6px; }
  .cd-dsk-progress-fill  { height: 100%; border-radius: 2px; }

  .cd-dsk-actions { display: flex; gap: 6px; justify-content: flex-end; }
  .cd-dsk-btn-edit {
    padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
    border: 1px solid rgba(255,255,255,.14); background: transparent; color: #9AA39E;
    cursor: pointer; font-family: inherit; white-space: nowrap;
  }
  .cd-dsk-btn-edit:hover { border-color: rgba(52,200,138,.45); color: #34C88A; }
  .cd-dsk-btn-adj {
    padding: 7px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
    border: 1px solid rgba(255,255,255,.14); background: transparent; color: #9AA39E;
    cursor: pointer; font-family: inherit; white-space: nowrap;
  }
  .cd-dsk-btn-adj:hover { border-color: rgba(255,255,255,.32); }

  .cd-dsk-btn-nuevo {
    background: #34C88A; color: #08110C; border: none; border-radius: 9px;
    padding: 11px 18px; font-size: 13.5px; font-weight: 700;
    font-family: inherit; cursor: pointer;
  }
  .cd-dsk-btn-nuevo:hover { filter: brightness(1.08); }

  .cd-dsk-btn-interes {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
    border: 1px solid rgba(200,169,106,.35); background: rgba(200,169,106,.07);
    color: #C8A96A; cursor: pointer; font-family: inherit;
  }
  .cd-dsk-btn-interes:hover  { background: rgba(200,169,106,.12); }
  .cd-dsk-btn-interes:disabled { opacity: .55; cursor: not-allowed; }

  .cd-dsk-eye {
    width: 36px; height: 36px; border-radius: 9px;
    background: #14191A; border: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #9AA39E;
  }
  .cd-dsk-eye:hover { background: #1A2122; }

  .cd-dsk-nota-ajuste { font-size: 11px; color: #DEC79A; grid-column: 1 / -1; padding-top: 4px; text-align: right; }
  .cd-dsk-nota-tasa   { font-size: 11px; color: #E0B252;  grid-column: 1 / -1; padding-top: 4px; text-align: right; }

  /* ─── Onboarding desktop ────────────────────────── */
  /* JS renderiza solo uno u otro segun window.innerWidth.
     Estas reglas ajustan dimensiones del layout dos paneles en desktop. */
  .ob-dsk-layout {
    flex: 1;
    display: flex;
    min-height: 100dvh;
    overflow: hidden;
    background: #0B0E0D;
  }

  .ob-dsk-left {
    width: 360px;
    flex: none;
    background: linear-gradient(165deg,#11201A,#0B0E0D 70%);
    border-right: 1px solid rgba(255,255,255,.06);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .ob-dsk-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .ob-dsk-brand { display: flex; align-items: center; gap: 11px; }
  .ob-dsk-brand-apex {
    width: 40px; height: 40px; border-radius: 12px;
    background: rgba(52,200,138,.12); border: 1px solid rgba(52,200,138,.3);
    display: flex; align-items: center; justify-content: center; flex: none;
  }
  .ob-dsk-brand-name {
    font-size: 14px; letter-spacing: .24em; font-weight: 600; color: #F4F2EC;
  }
  .ob-dsk-brand-accent {
    font-family: 'Newsreader', serif; font-style: italic; font-size: 15px; color: #34C88A;
    margin-left: 4px;
  }
  .ob-dsk-tagline  { margin-top: 54px; }
  .ob-dsk-tagline h1 {
    font-family: 'Newsreader', serif; font-size: 34px; font-weight: 400;
    color: #F4F2EC; margin: 0; line-height: 1.12;
  }
  .ob-dsk-tagline p {
    font-size: 14px; color: #8A938F; margin: 14px 0 0; line-height: 1.6; max-width: 270px;
  }
  .ob-dsk-stepper { margin-top: 44px; display: flex; flex-direction: column; gap: 4px; }
  .ob-dsk-step    { display: flex; align-items: center; gap: 13px; padding: 9px 0; }
  .ob-dsk-step-dot {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex: none;
  }
  .ob-dsk-step-dot.done   { background: rgba(52,200,138,.18); color: #34C88A; border: 1px solid rgba(52,200,138,.5); }
  .ob-dsk-step-dot.active { background: #34C88A; color: #08110C; }
  .ob-dsk-step-dot.todo   { background: rgba(255,255,255,.05); color: #67716C; border: 1px solid rgba(255,255,255,.1); }
  .ob-dsk-step-label {
    font-size: 13.5px; font-weight: 600;
  }
  .ob-dsk-step-label.done   { color: #ECECE6; }
  .ob-dsk-step-label.active { color: #ECECE6; }
  .ob-dsk-step-label.todo   { color: #67716C; }
  .ob-dsk-footer-text {
    margin-top: auto;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: #4A524E; font-weight: 600;
  }
  /* Panel derecho: header con atrás + paso N/4, cuerpo scrollable, footer */
  .ob-dsk-right-header {
    height: 64px; flex: none; display: flex; align-items: center; padding: 0 40px;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }
  .ob-dsk-right-body {
    flex: 1; overflow-y: auto;
    display: flex; align-items: center; justify-content: center;
    padding: 24px 40px;
  }
  .ob-dsk-right-body-inner { width: 100%; max-width: 480px; }
  .ob-dsk-right-footer {
    flex: none; padding: 18px 40px 30px;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .ob-dsk-right-footer-inner {
    max-width: 480px; margin: 0 auto;
    display: flex; align-items: center; gap: 14px;
  }
  .ob-dsk-back-btn {
    display: flex; align-items: center; gap: 7px;
    background: transparent; border: none; color: #9AA39E;
    font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 0;
  }
  .ob-dsk-back-btn:hover { color: #ECECE6; }
  .ob-dsk-step-counter { font-size: 12px; color: #67716C; font-weight: 600; font-variant-numeric: tabular-nums; }

  /* ─── Topbar unificada premium (f66) ─────────────────── */

  /* Bloque de marca del sidebar: misma altura que la topbar para alinear la línea horizontal */
  .dsk-brand {
    height: 60px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Breadcrumb premium: segmentos + activo jade cursiva */
  .dsk-topbar-bc {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .dsk-topbar-bc-seg {
    font-size: 13px;
    color: #5E6863;
    font-weight: 500;
  }
  .dsk-topbar-bc-arrow {
    font-size: 12px;
    color: #3A4347;
    line-height: 1;
  }
  .dsk-topbar-bc-active {
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-size: 14px;
    color: #34C88A;
    font-weight: 400;
  }

  /* Titulo + subtitulo editorial debajo del breadcrumb */
  .dsk-topbar-page {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .dsk-topbar-page-title {
    font-family: 'Newsreader', serif;
    font-size: 20px;
    font-weight: 400;
    color: #F4F2EC;
    line-height: 1.1;
    letter-spacing: -.01em;
  }
  .dsk-topbar-page-sub {
    font-size: 11.5px;
    color: #5E6863;
    font-weight: 400;
    line-height: 1;
  }

  /* Layout izquierda: breadcrumb encima, titulo debajo */
  .dsk-topbar-left-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
  }

  /* Campo de busqueda en la topbar */
  .dsk-topbar-search-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    min-width: 220px;
    max-width: 280px;
  }
  .dsk-topbar-search-trigger:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.14);
  }
  .dsk-topbar-search-label {
    flex: 1;
    font-size: 12.5px;
    color: #5E6863;
    font-family: 'Hanken Grotesk', -apple-system, sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dsk-topbar-search-chip {
    font-size: 10.5px;
    font-weight: 700;
    color: #3A4347;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 5px;
    padding: 2px 6px;
    letter-spacing: .03em;
    flex: none;
  }

  /* ─── Command Palette ────────────────────────────────── */
  .cmd-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6,8,7,.68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    animation: cmd-fade-in .15s ease both;
  }
  @keyframes cmd-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .cmd-box {
    width: 100%;
    max-width: 560px;
    background: #14191A;
    border: 1px solid #3A4347;
    border-radius: 16px;
    box-shadow: 0 32px 80px rgba(0,0,0,.65);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 68vh;
    animation: cmd-slide-in .16s cubic-bezier(.32,.74,.5,1) both;
  }
  @keyframes cmd-slide-in {
    from { transform: translateY(-10px); opacity: .6; }
    to   { transform: translateY(0);     opacity: 1; }
  }

  .cmd-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex: none;
  }
  .cmd-input-icon {
    color: #5E6863;
    flex: none;
    display: flex;
    align-items: center;
  }
  .cmd-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ECECE6;
    font-size: 15px;
    font-family: 'Hanken Grotesk', -apple-system, sans-serif;
    caret-color: #34C88A;
  }
  .cmd-input::placeholder { color: #5E6863; }
  .cmd-esc-hint {
    font-size: 10.5px;
    color: #3A4347;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 5px;
    padding: 3px 7px;
    flex: none;
    font-family: inherit;
  }

  .cmd-results {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #2A3133 transparent;
  }
  .cmd-results::-webkit-scrollbar { width: 4px; }
  .cmd-results::-webkit-scrollbar-thumb { background: #2A3133; border-radius: 2px; }

  .cmd-group-label {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #4F5854;
    font-weight: 700;
    padding: 12px 16px 5px;
  }

  .cmd-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 16px;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: 'Hanken Grotesk', -apple-system, sans-serif;
    color: #ECECE6;
    transition: background .1s;
  }
  .cmd-item:hover,
  .cmd-item.cmd-focused {
    background: rgba(52,200,138,.1);
  }
  .cmd-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 14px;
  }
  .cmd-item-label {
    flex: 1;
    font-size: 13.5px;
    font-weight: 500;
    color: #ECECE6;
  }
  .cmd-item-hint {
    font-size: 11.5px;
    color: #5E6863;
  }

  .cmd-empty {
    padding: 36px 24px;
    text-align: center;
    color: #5E6863;
    font-size: 13.5px;
  }

  .cmd-separator {
    height: 1px;
    background: rgba(255,255,255,.05);
    margin: 4px 0;
  }

  /* ═══════════════════════════════════════════
     f68 — Presupuesto desktop
     ═══════════════════════════════════════════ */

  /* Ocultar lista lineal móvil; mostrar layout desktop */
  .pb-lista-mobile  { display: none; }
  .pb-lista-desktop { display: block; }

  /* Card activo destacado */
  .pb-plan-activo-card {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid rgba(52,200,138,.22);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    cursor: pointer;
    transition: border-color .14s, background .14s;
  }
  .pb-plan-activo-card:hover { border-color: rgba(52,200,138,.38); background: rgba(52,200,138,.03); }
  .pb-plan-activo-left  { flex: 1; min-width: 0; }
  .pb-plan-activo-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    flex: none;
  }
  .pb-plan-activo-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
  }
  .pb-plan-activo-stat { text-align: right; }
  .pb-plan-activo-stat-val {
    font-size: 17px;
    font-weight: 700;
    color: var(--tx-soft);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .pb-plan-activo-stat-label {
    font-size: 10.5px;
    color: var(--tx-mute);
    margin-top: 2px;
  }
  .pb-plan-activo-det-btn {
    background: rgba(52,200,138,.12);
    border: 1px solid rgba(52,200,138,.28);
    color: var(--jade);
    font-size: 12.5px;
    font-weight: 700;
    font-family: var(--font-ui);
    padding: 9px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
  }
  .pb-plan-activo-det-btn:hover { background: rgba(52,200,138,.20); }

  /* Título y grilla de cerrados */
  .pb-cerrados-titulo {
    display: block;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx-mute);
    font-weight: 700;
    margin-bottom: 12px;
    padding-left: 2px;
  }
  .pb-cerrados-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
  }

  /* ═══════════════════════════════════════════
     f68 — Dashboard desktop (2 columnas)
     ═══════════════════════════════════════════ */

  .dash-dsk-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    gap: 0;
    align-items: start;
    padding: 0 8px 24px;
  }

  .dash-dsk-col-left,
  .dash-dsk-col-right {
    display: block;
    padding: 0 8px;
  }

  /* En desktop las cards no necesitan margen horizontal propio */
  .dash-dsk-col-left .dash-hero-card,
  .dash-dsk-col-left .dash-section-card,
  .dash-dsk-col-right .dash-hero-card,
  .dash-dsk-col-right .dash-section-card {
    margin: 0 0 14px;
  }

  /* El SVG del gráfico puede usar todo el ancho de la columna */
  .dash-svg { max-width: none; }

  /* ─── Page header: breadcrumb + titulo + subtitulo en el cuerpo ──
     Solo visible en desktop (este bloque ya esta dentro del @media).
     En movil <1024px: display:none (regla base fuera del media). */
  .pg-header {
    display: block;
    padding: 24px 40px 20px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    margin-bottom: 0;
  }
  .pg-bc {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }
  .pg-bc-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 12.5px;
    color: #9AA39E;
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 500;
    line-height: 1;
    transition: color .15s;
    text-decoration: none;
  }
  .pg-bc-btn:hover { color: #ECECE6; }
  .pg-bc-sep {
    font-size: 12px;
    color: #3A4347;
    line-height: 1;
    user-select: none;
  }
  .pg-bc-active {
    font-family: 'Newsreader', serif;
    font-style: italic;
    font-size: 13.5px;
    color: #34C88A;
    font-weight: 400;
    line-height: 1;
  }
  .pg-title {
    font-family: 'Newsreader', serif;
    font-size: 26px;
    font-weight: 400;
    color: #F4F2EC;
    line-height: 1.1;
    letter-spacing: -.015em;
    margin: 0 0 4px;
  }
  .pg-subtitle {
    font-size: 12px;
    color: #5E6863;
    font-weight: 400;
    line-height: 1;
  }

  /* La topbar en desktop, sin stack izquierdo, muestra el buscador a la izquierda */
  .dsk-topbar-left { gap: 0; }

  /* ── f76: Fix layout desktop — todos los wrappers arrancan pegados a la sidebar ──
     Regla robusta: margin:0 garantiza que ningún wrapper quede centrado en ≥1024px.
     El padding horizontal unificado (40px) alinea breadcrumb y cuerpo de página. */

  /* .wrap (Monedas, Ajustes/Mas, Movimientos) */
  .wrap {
    max-width: 1280px;
    margin: 0;
    padding: 28px 40px;
  }
  /* Div interno de Mas/Notificaciones: en desktop el .wrap ya provee 28px de top, sin agregar mas */
  .wrap-content-top { padding-top: 0 !important; }
  /* El .pg-header + .wrap ya proveen el tope; el padding-top propio del header de perfil
     sumaba aire extra en desktop. Lo anulamos para pegar el avatar al header. */
  .mas-perfil-header { padding-top: 0; }

  /* .pb-wrap (Presupuesto lista + detalle)
     padding-top reducido a 16px: el .pg-header ya provee el espaciado superior;
     el .pt-header/.dash-header internos tienen su propio padding-top que sumaba aire extra */
  .pb-wrap {
    max-width: 1280px;
    margin: 0;
    padding: 16px 40px 28px;
  }

  /* .pbd-wrap — detalle de presupuesto hereda .pb-wrap */
  .pbd-wrap {
    padding-top: 16px;
    padding-bottom: 60px;
  }

  /* .pt-wrap (Patrimonio)
     padding-top reducido a 0: el .pt-header ya tiene padding-top:18px; el .pg-header provee el tope */
  .pt-wrap {
    margin: 0;
    padding: 0 40px 60px;
  }
  /* .pt-header en desktop: quitar safe-area-inset-top (siempre 0 en desktop) y padding horizontal
     ya cubierto por .pt-wrap. Solo conservar el top 18px y el bottom 14px. */
  .pt-header {
    padding: 18px 0 14px;
  }

  /* .dash-wrap (Dashboard patrimonio)
     idem Patrimonio */
  .dash-wrap {
    margin: 0;
    padding: 0 40px 60px;
  }
  .dash-header {
    padding: 18px 0 14px;
  }

  /* .fam-wrap (Familia + MiWallet) */
  .fam-wrap {
    max-width: 1280px;
    margin: 0;
    padding: 28px 40px;
  }

  /* .sus-wrap (Suscripciones) */
  .sus-wrap {
    max-width: 1280px;
    margin: 0;
    padding: 28px 40px;
  }

  /* .mov-mobile-header — back + H2 de Movimientos, solo visible en móvil */
  .mov-mobile-header { display: none !important; }

  /* .adm-wrap — admin panel: flush-left igual que .wrap */
  .adm-wrap {
    max-width: 1280px;
    margin: 0;
    padding: 28px 40px;
  }

} /* fin @media (min-width: 1024px) */

/* ─────────────────────────────────────────────
   f71 — Apartados: señal de tipo + barra de progreso + vista dedicada
   ───────────────────────────────────────────── */

/* Bloque contenedor de apartados bajo un producto */
.apt-bloque {
  padding: 10px 14px 6px;
  border-top: 1px solid rgba(111,227,176,0.1);
  margin-top: 4px;
}
.apt-bloque-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.apt-bloque-label {
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #4BA97A;
  font-weight: 700;
}
.apt-ver-mas {
  background: none;
  border: none;
  color: var(--jade);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 2px 0;
}
.apt-ver-mas:hover { opacity: .8; }

/* Fila individual de apartado */
.apt-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #0B0E0D;
  border-radius: 9px;
  margin-bottom: 5px;
}
.apt-fila-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 15px;
  background: rgba(52,200,138,.1);
}
.apt-fila-icon.persona {
  background: rgba(111,168,227,.12);
  font-size: 13px;
}
.apt-fila-body { flex: 1; min-width: 0; }
.apt-fila-label {
  font-size: 12.5px;
  color: #ECECE6;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apt-fila-tag {
  font-size: 10.5px;
  color: #7E8783;
  margin-top: 1px;
}
.apt-fila-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: none;
}
.apt-fila-saldo {
  font-size: 12.5px;
  font-weight: 700;
  color: #6FE3B0;
  font-variant-numeric: tabular-nums;
}
.apt-fila-acciones {
  display: flex;
  gap: 6px;
}
.apt-btn-accion {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 1px 0;
  color: #7E8783;
}
.apt-btn-accion:hover { color: var(--tx-soft); }
.apt-btn-accion.jade { color: var(--jade); }

/* Barra de progreso hacia meta */
.apt-progreso {
  margin-top: 5px;
}
.apt-progreso-track {
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}
.apt-progreso-fill {
  height: 100%;
  background: linear-gradient(90deg, #34C88A, #6FE3B0);
  border-radius: 3px;
  transition: width .3s;
}
.apt-progreso-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3px;
  font-size: 10px;
  color: #7E8783;
}
.apt-progreso-pct { color: #6FE3B0; font-weight: 600; }

/* Strip resumen total/apartado/disponible */
.apt-resumen-strip {
  display: flex;
  gap: 18px;
  margin-bottom: 9px;
  font-size: 11.5px;
}

/* Vista dedicada de apartados (#apartados) */
.apd-wrap {
  padding: 0 0 80px;
}
.apd-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}
.apd-back {
  background: none;
  border: none;
  color: #7E8783;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px 2px 0;
}
.apd-back:hover { color: var(--tx); }
.apd-titulo {
  font-family: 'Newsreader', serif;
  font-size: 19px;
  font-weight: 400;
  color: #F4F2EC;
  flex: 1;
}
.apd-btn-nuevo {
  background: none;
  border: 1px solid rgba(52,200,138,.35);
  border-radius: 8px;
  color: var(--jade);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-ui);
  padding: 6px 14px;
  cursor: pointer;
}
.apd-btn-nuevo:hover { background: rgba(52,200,138,.08); }
.apd-cuenta-info {
  padding: 0 16px 14px;
  font-size: 12px;
  color: #7E8783;
}
.apd-lista {
  padding: 0 16px;
}
.apd-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--tx-mute);
  font-size: 13.5px;
}

/* Selector de objetivos en modal crear sobre */
.apt-obj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.apt-obj-btn {
  background: var(--raised);
  border: 1.5px solid var(--line);
  border-radius: 9px;
  padding: 8px 4px 6px;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: border-color .12s, background .12s;
}
.apt-obj-btn .apt-obj-icono { font-size: 17px; }
.apt-obj-btn .apt-obj-label {
  font-size: 9.5px;
  color: var(--tx-mute);
  margin-top: 3px;
  line-height: 1.2;
  font-weight: 600;
}
.apt-obj-btn.sel {
  border-color: var(--jade);
  background: rgba(52,200,138,.08);
}
.apt-obj-btn.sel .apt-obj-label { color: var(--jade); }

@media (min-width: 1024px) {
  .apt-obj-grid { grid-template-columns: repeat(4, 1fr); }
  /* padding-top: 0 — .apd-header ya tiene padding-top:14px; el .pg-header provee el tope */
  .apd-wrap { margin: 0; padding: 0 40px 60px; max-width: 1280px; }
  .apd-header { padding: 14px 0 10px; }
}

/* ── Suscripciones ─────────────────────────────────────────────────── */
.sus-wrap {
  padding: var(--sp-4) var(--sp-5) var(--sp-7);
  max-width: 720px;
}
.sus-seccion-titulo {
  font-size: 12.5px;
  font-weight: 700;
  color: #7E8783;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 20px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sus-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.07);
  color: #9AA39E;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 7px;
  min-width: 22px;
}
.sus-empty {
  color: #7E8783;
  font-size: 13.5px;
  padding: 14px 0 4px;
}
.sus-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: #14191A;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  transition: border-color .12s;
}
.sus-row:hover { border-color: rgba(255,255,255,.14); }
.sus-row-pausada { opacity: .55; }
.sus-row-icono {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tx-mute);
  font-size: 13px;
  font-weight: 700;
  flex: none;
  flex-shrink: 0;
  user-select: none;
}
.sus-row-main { flex: 1; min-width: 0; }
.sus-row-nombre {
  font-size: 14px;
  font-weight: 600;
  color: #F4F2EC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sus-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.sus-badge-frec {
  font-size: 11px;
  font-weight: 700;
  color: #34C88A;
  background: rgba(52,200,138,.12);
  border-radius: 5px;
  padding: 1px 6px;
}
.sus-badge-warn {
  font-size: 11px;
  font-weight: 700;
  color: #E0B252;
  background: rgba(224,178,82,.12);
  border-radius: 5px;
  padding: 1px 6px;
}
.sus-row-cuenta { font-size: 12px; color: #7E8783; }
.sus-row-cat    { font-size: 12px; color: #7E8783; }
.sus-row-proxima {
  font-size: 12px;
  color: #7E8783;
  margin-top: 6px;
}
.sus-row-proxima strong { color: #ECECE6; }
.sus-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.sus-row-monto {
  font-size: 15px;
  font-weight: 700;
  color: #ECECE6;
  font-variant-numeric: tabular-nums;
}
.sus-row-acciones {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sus-btn-editar,
.sus-btn-toggle {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: none;
  color: #7E8783;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sus-btn-editar:hover  { background: rgba(255,255,255,.10); color: #ECECE6; }
.sus-btn-toggle:hover  { background: rgba(255,255,255,.10); }

/* Materializar bar */
.sus-materializar-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(200,169,106,.08);
  border: 1px solid rgba(200,169,106,.2);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.sus-mat-label {
  font-size: 12.5px;
  color: #9AA39E;
  flex: 1;
}
.sus-btn-materializar {
  background: rgba(200,169,106,.15);
  border: 1px solid rgba(200,169,106,.35);
  border-radius: 8px;
  color: #C8A96A;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  padding: 8px 14px;
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}
.sus-btn-materializar:hover   { background: rgba(200,169,106,.25); }
.sus-btn-materializar:disabled { opacity: .5; cursor: default; }

/* Proximos cobros (lista en #suscripciones) */
.sus-cobros-lista  { display: flex; flex-direction: column; gap: 0; }
.sus-cobros-empty  { color: #7E8783; font-size: 13px; padding: 10px 0; }
.sus-cobro-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  transition: background .1s;
}
.sus-cobro-row:hover { background: rgba(255,255,255,.03); }
.sus-cobro-fecha  { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 60px; }
.sus-cobro-nombre { flex: 1; font-size: 13.5px; color: #ECECE6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sus-cobro-monto  { font-size: 13.5px; font-weight: 600; color: #ECECE6; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Hub desktop: tarjeta próximos cobros */
.hub-dsk-cobros-card { display: none; }
.hub-cobro-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.hub-cobro-row:last-child { border-bottom: none; }
.hub-cobro-fecha  { font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 50px; }
.hub-cobro-nombre { flex: 1; font-size: 12.5px; color: #ECECE6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-cobro-monto  { font-size: 12px; font-weight: 600; color: #ECECE6; font-variant-numeric: tabular-nums; }
.hub-cobro-total  { border-top: 1px solid rgba(255,255,255,.10); border-bottom: none; margin-top: 2px; }
.hub-cobro-total .hub-cobro-nombre { color: #ECECE6; }
.hub-cobro-total .hub-cobro-monto  { color: #ECECE6; }
.hub-cobro-divider { height: 1px; background: rgba(255,255,255,.06); margin: 0 12px; }
.hub-dsk-card-link {
  background: none;
  border: none;
  color: #34C88A;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 0;
}
.hub-dsk-card-link:hover { text-decoration: underline; }

@media (min-width: 1024px) {
  .sus-wrap { padding: 28px 40px 40px; max-width: 1280px; }
  .hub-dsk-cobros-card { display: block; }
}

/* ── f77 ─────────────────────────────────────── */
.wl-error {
  color: #D8714C;
  background: rgba(216,113,76,.08);
  border: 1px solid rgba(216,113,76,.25);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
}

/* ── f78 ─────────────────────────────────────── */

/* FIX 2 — Patrimonio móvil: filas de producto sin encimado en 360px.
   En móvil la columna de saldo + acciones hace wrap debajo del nombre. */
@media (max-width: 767px) {
  .pt-producto-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  /* El icono de tipo no participa en el wrap */
  .pt-producto-tipo-icon {
    flex: none;
    margin-top: 2px;
  }
  /* Info (nombre + tipo-badge) ocupa todo el ancho restante */
  .pt-producto-info {
    flex: 1;
    min-width: 0;
  }
  /* La columna saldo + acciones baja a una línea propia y ocupa 100% */
  .pt-producto-saldo-col {
    flex: 0 0 100%;
    text-align: left;
    padding-left: 42px; /* alinea con el nombre (icono 30px + gap 12px) */
    margin-top: 4px;
  }
  /* Acciones en wrap para que nunca desborden */
  .pt-producto-saldo-col > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px 14px !important;
  }
  /* Área táctil accesible en móvil: los botones de acción de Patrimonio traen
     padding inline 2px (≈19px de alto), por debajo del mínimo táctil. Subimos el
     blanco vertical (vence el inline con !important) sin cambiar el look del texto.
     Aplica a acciones de producto y a Editar/Eliminar de entidad; NO al "+" (add). */
  .pt-producto-saldo-col > div[style*="display:flex"] > button,
  .pt-entidad-btn-editar,
  .pt-entidad-btn-eliminar {
    min-height: 40px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    display: inline-flex;
    align-items: center;
  }
  /* Apartados: visibles en móvil sin restricción */
  .apt-bloque {
    display: block;
  }
}

/* FIX 3 — Hub verticales: los 3 cards con altura uniforme.
   align-items:stretch en el grid + flex column en el card para que
   Wealth (con monto) no quede más alto que Health/Engine. */
.hub-verticales-grid {
  align-items: stretch;
}
.hub-vcard {
  justify-content: space-between;
}

/* Botón "Ver todas" en el feed de insights */
.hub-feed-ver-todas {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 0;
  background: none;
  border: 1px solid rgba(200,169,106,.28);
  border-radius: 10px;
  color: #C8A96A;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: center;
  transition: background .12s, border-color .12s;
}
.hub-feed-ver-todas:hover {
  background: rgba(200,169,106,.08);
  border-color: rgba(200,169,106,.5);
}

/* ══════════════════════════════════════════
   Panel de administracion de plataforma (#admin)
   Herramienta interna — solo super-admin.
══════════════════════════════════════════ */

/* Skeleton de carga del panel */
.adm-loading {
  padding: var(--sp-4) 0;
}

/* Titulo de seccion */
.adm-sec-titulo {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-soft);
  margin-bottom: var(--sp-4);
}

/* Mensaje de error */
.adm-error {
  font-size: 13px;
  color: var(--neg);
  padding: var(--sp-4) 0;
}

/* Mensaje vacio */
.adm-empty {
  font-size: 13px;
  color: var(--tx-mute);
  padding: var(--sp-4) 0;
  text-align: center;
}

/* Card generica del admin */
.adm-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-4);
}

/* Nav por secciones */
.adm-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.adm-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--tx-mute);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.adm-nav-btn:hover {
  background: var(--raised);
  color: var(--tx-soft);
}
.adm-nav-btn.active {
  background: rgba(200,169,106,.12);
  border-color: rgba(200,169,106,.4);
  color: var(--champagne);
}

/* Area de la seccion activa */
.adm-seccion {
  animation: vxup .22s ease both;
}

/* Grid de KPIs */
.adm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

.adm-kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  text-align: center;
}
.adm-kpi-warn {
  border-color: rgba(224,178,82,.3);
  background: rgba(224,178,82,.05);
}

.adm-kpi-val {
  font-size: 28px;
  font-weight: 700;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.adm-kpi-warn .adm-kpi-val {
  color: var(--warn);
}

.adm-kpi-label {
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 4px;
  line-height: 1.3;
}

/* Toggle interruptor (signup abierto) */
.adm-toggle {
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--raised);
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  flex: none;
  transition: background .18s, border-color .18s;
  padding: 0;
}
.adm-toggle.on {
  background: var(--jade);
  border-color: var(--jade);
}
.adm-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tx-mute);
  transition: transform .18s, background .18s;
}
.adm-toggle.on .adm-toggle-thumb {
  transform: translateX(20px);
  background: #0B0E0D;
}

/* Tabla de usuarios / hogares */
.adm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.adm-table th {
  background: var(--surface);
  color: var(--tx-mute);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.adm-table td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--tx-soft);
  vertical-align: middle;
}

.adm-table tbody tr:last-child td {
  border-bottom: none;
}

.adm-table tbody tr:hover td {
  background: rgba(255,255,255,.02);
}

/* Campo de busqueda */
.adm-search {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  padding: 8px 12px;
  color: var(--tx);
  font-size: 13px;
  font-family: var(--font-ui);
  outline: none;
  width: 200px;
  max-width: 100%;
  transition: border-color .14s;
}
.adm-search:focus {
  border-color: var(--jade-dark);
}

/* Botones de filtro */
.adm-filter-btn {
  padding: 6px 12px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--tx-mute);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
  text-transform: capitalize;
}
.adm-filter-btn:hover {
  background: var(--raised);
  color: var(--tx-soft);
}
.adm-filter-btn.active {
  background: rgba(52,200,138,.1);
  border-color: rgba(52,200,138,.35);
  color: var(--jade);
}

@media (max-width: 540px) {
  .adm-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .adm-nav-btn span {
    display: none;
  }
  .adm-nav-btn {
    padding: 9px 12px;
  }
}

/* ── f89 — Vista calendario de cobros (#cobros) ──────────── */
.cbr-wrap {
  padding: var(--sp-4) var(--sp-5) var(--sp-7);
  max-width: 720px;
}

/* Barra de navegacion de mes */
.cbr-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.cbr-nav-titulo {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: #F4F2EC;
  text-align: center;
}
.cbr-nav-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #ECECE6;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background .12s, border-color .12s;
  flex: none;
}
.cbr-nav-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }

/* Total del mes */
.cbr-total-mes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.cbr-total-chip {
  background: rgba(52,200,138,.1);
  border: 1px solid rgba(52,200,138,.22);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #34C88A;
  font-variant-numeric: tabular-nums;
}
.cbr-total-chip-label {
  font-weight: 400;
  color: #7E8783;
  margin-right: 6px;
}

/* Calendario mobile: lista agrupada por dia */
.cbr-lista { display: flex; flex-direction: column; gap: 6px; }
.cbr-dia-grupo {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
}
.cbr-dia-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #14191A;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.cbr-dia-num {
  font-size: 22px;
  font-weight: 700;
  color: #ECECE6;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 28px;
  text-align: right;
}
.cbr-dia-num.cbr-hoy { color: #34C88A; }
.cbr-dia-num.cbr-pasado { color: #7E8783; }
.cbr-dia-etiqueta {
  font-size: 11.5px;
  color: #7E8783;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cbr-dia-badge-hoy {
  background: rgba(52,200,138,.15);
  color: #34C88A;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  letter-spacing: .03em;
}
.cbr-dia-badge-pasado {
  background: rgba(255,255,255,.06);
  color: #7E8783;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  letter-spacing: .03em;
}
.cbr-cobro-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #1E2426;
  cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.cbr-cobro-item:last-child { border-bottom: none; }
.cbr-cobro-item:hover { background: rgba(255,255,255,.04); }
.cbr-cobro-icono {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: none;
}
.cbr-cobro-info { flex: 1; min-width: 0; }
.cbr-cobro-nombre {
  font-size: 13.5px;
  font-weight: 600;
  color: #F4F2EC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cbr-cobro-meta {
  font-size: 11.5px;
  color: #7E8783;
  margin-top: 2px;
}
.cbr-cobro-monto {
  font-size: 13.5px;
  font-weight: 600;
  color: #ECECE6;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cbr-cobro-monto.cbr-pasado { color: #7E8783; }

/* Calendario desktop: grilla tipo mes */
.cbr-cal-grid-wrap { display: none; }

/* Empty state */
.cbr-empty {
  text-align: center;
  padding: 48px 24px;
  color: #7E8783;
  font-size: 14px;
  line-height: 1.6;
}
.cbr-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: .5;
}

/* Skeleton */
.cbr-sk {
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  height: 72px;
  margin-bottom: 8px;
  animation: cbr-pulse 1.4s ease-in-out infinite;
}
@keyframes cbr-pulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* ── Desktop: grilla calendario real ── */
@media (min-width: 1024px) {
  .cbr-wrap {
    padding: 28px 40px 40px;
    max-width: 1280px;
  }
  /* En desktop, ocultar lista y mostrar grilla */
  .cbr-lista { display: none; }
  .cbr-cal-grid-wrap { display: block; }

  .cbr-cal-dias-semana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
  }
  .cbr-cal-dia-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #7E8783;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 6px 0;
  }

  .cbr-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
  }
  .cbr-cal-celda {
    min-height: 88px;
    background: #14191A;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: 8px 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
  }
  .cbr-cal-celda.cbr-cal-hoy {
    border-color: rgba(52,200,138,.35);
    background: rgba(52,200,138,.05);
  }
  .cbr-cal-celda.cbr-cal-otro-mes {
    opacity: .3;
    pointer-events: none;
  }
  .cbr-cal-celda-num {
    font-size: 12px;
    font-weight: 700;
    color: #7E8783;
    line-height: 1;
    margin-bottom: 3px;
  }
  .cbr-cal-celda.cbr-cal-hoy .cbr-cal-celda-num { color: #34C88A; }
  .cbr-cal-chip {
    background: rgba(52,200,138,.12);
    border: 1px solid rgba(52,200,138,.2);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 10.5px;
    color: #6FE3B0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background .1s;
    font-variant-numeric: tabular-nums;
  }
  .cbr-cal-chip:hover { background: rgba(52,200,138,.22); }
  .cbr-cal-chip.cbr-cal-chip-pasado {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    color: #7E8783;
  }
  .cbr-cal-chip.cbr-cal-chip-pasado:hover { background: rgba(255,255,255,.1); }
  .cbr-cal-mas {
    font-size: 10px;
    color: #7E8783;
    cursor: pointer;
  }
}

/* ── Notificaciones: preferencias push (#notificaciones) ── */
.nf-master-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px var(--sp-5);
}
.nf-master-body { flex: 1; min-width: 0; }
.nf-master-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tx-soft);
  line-height: 1.3;
}
.nf-master-desc {
  font-size: 12px;
  color: var(--tx-mute);
  margin-top: 3px;
  line-height: 1.45;
}

.nf-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: opacity .18s;
}
.nf-item:last-child { border-bottom: none; }
.nf-item-body { flex: 1; min-width: 0; }
.nf-item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx-soft);
  line-height: 1.3;
}
.nf-item-desc {
  font-size: 12px;
  color: var(--tx-mute);
  margin-top: 2px;
  line-height: 1.45;
}
.nf-item-dis .nf-item-title,
.nf-item-dis .nf-item-desc { color: var(--tx-mute); }

.nf-error {
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
  color: var(--tx-mute);
  font-size: 13.5px;
}

/* ══════════════════════════════════════════
   Pagina de descarga #descargar — landing publica
══════════════════════════════════════════ */
.dl-page {
  min-height: 100vh;
  background: var(--ink);
  background-image:
    radial-gradient(900px 500px at 50% -60px, rgba(52,200,138,.07), transparent 70%),
    radial-gradient(600px 400px at 90% 80%, rgba(200,169,106,.04), transparent 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-ui);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
}

/* cabecera minimalista de la landing */
.dl-nav {
  width: 100%;
  max-width: 760px;
  padding: 28px 24px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dl-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.dl-nav-wordmark {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .22em;
  font-size: .88rem;
  color: var(--tx-soft);
}
.dl-nav-back {
  font-size: .82rem;
  color: var(--tx-mute);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  transition: color .15s;
  font-family: var(--font-ui);
}
.dl-nav-back:hover { color: var(--jade); }

/* hero */
.dl-hero {
  width: 100%;
  max-width: 760px;
  padding: 56px 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.dl-hero-apex {
  margin-bottom: 24px;
  filter: drop-shadow(0 0 28px rgba(52,200,138,.18));
}
.dl-hero-eyebrow {
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--jade);
  font-weight: 600;
  margin-bottom: 18px;
}
.dl-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--tx);
  margin-bottom: 18px;
}
.dl-hero-title em {
  font-style: italic;
  color: var(--jade);
}
.dl-hero-sub {
  font-size: 1.05rem;
  color: var(--tx-mute);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 40px;
}

/* boton principal de descarga */
.dl-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 340px;
}
.dl-btn-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 28px;
  background: var(--jade);
  color: var(--on-jade);
  border: none;
  border-radius: var(--r-btn);
  font-family: var(--font-ui);
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s, box-shadow .15s;
  box-shadow: 0 4px 24px rgba(52,200,138,.22);
}
.dl-btn-main:hover {
  filter: brightness(1.07);
  box-shadow: 0 6px 30px rgba(52,200,138,.32);
  color: var(--on-jade);
}
.dl-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.dl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--tx-mute);
  background: rgba(255,255,255,.04);
}
.dl-chip-jade {
  border-color: rgba(52,200,138,.28);
  color: var(--jade-light);
  background: rgba(52,200,138,.07);
}

/* divisor */
.dl-divider {
  width: 100%;
  max-width: 680px;
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 0 24px;
}

/* pasos de instalacion */
.dl-steps {
  width: 100%;
  max-width: 680px;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dl-steps-label {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tx-mute);
  font-weight: 600;
  margin-bottom: 20px;
}
.dl-step-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dl-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 10px;
  transition: background .15s;
}
.dl-step:hover { background: rgba(255,255,255,.025); }
.dl-step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(52,200,138,.1);
  border: 1px solid rgba(52,200,138,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--jade);
  margin-top: 1px;
}
.dl-step-body { flex: 1; }
.dl-step-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--tx-soft);
  margin-bottom: 3px;
  line-height: 1.35;
}
.dl-step-desc {
  font-size: .84rem;
  color: var(--tx-mute);
  line-height: 1.55;
}
.dl-step-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 18px;
  background: rgba(200,169,106,.06);
  border: 1px solid rgba(200,169,106,.18);
  border-radius: 10px;
  color: var(--champagne);
  font-size: .84rem;
  line-height: 1.55;
}

/* seccion beta */
.dl-beta {
  width: 100%;
  max-width: 680px;
  padding: 0 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.dl-beta-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.dl-beta-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--tx);
  font-style: italic;
}
.dl-beta-desc {
  font-size: .88rem;
  color: var(--tx-mute);
  line-height: 1.55;
  max-width: 380px;
}
.dl-btn-beta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-btn);
  color: var(--tx);
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  transition: border-color .15s, color .15s;
}
.dl-btn-beta:hover {
  border-color: rgba(52,200,138,.4);
  color: var(--jade-light);
}

/* footer */
.dl-footer {
  width: 100%;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: auto;
}
.dl-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tx-mute);
  font-size: .8rem;
  letter-spacing: .08em;
}
.dl-footer-sep { color: rgba(255,255,255,.12); }
.dl-footer-copy {
  font-size: .78rem;
  color: rgba(255,255,255,.2);
}

/* desktop: aerar mas */
@media (min-width: 720px) {
  .dl-hero {
    padding: 72px 40px 48px;
  }
  .dl-step-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }
  .dl-step {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 22px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .dl-step:hover {
    background: var(--raised);
    border-color: rgba(52,200,138,.18);
  }
  .dl-beta-card {
    padding: 36px 32px;
  }
  .dl-nav { padding: 32px 40px 0; }
  .dl-steps { padding: 44px 40px; }
  .dl-beta { padding: 0 40px 64px; }
}

/* ── f102 — Modulo de Deudas (#deudas) ──────────────────── */
.deu-wrap {
  padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
  max-width: 720px;
}

/* Header movil */
.deu-mob-header {
  margin-bottom: var(--sp-4);
}
.deu-back {
  background: none;
  border: none;
  color: var(--jade);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
  display: block;
}
.deu-titulo-blk {
  display: flex;
  align-items: center;
  gap: 10px;
}
.deu-titulo {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--tx);
  flex: 1;
}

/* Boton nuevo */
.deu-btn-nuevo {
  background: var(--jade);
  color: #08110C;
  border: none;
  border-radius: var(--r-btn);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: opacity .14s;
}
.deu-btn-nuevo:hover { opacity: .88; }

/* Tarjeta de oportunidad */
.deu-opors-wrap {
  margin-bottom: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.deu-oportunidad {
  background: rgba(224,178,82,.07);
  border: 1px solid rgba(224,178,82,.25);
  border-radius: var(--r-card);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.deu-opor-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(224,178,82,.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.deu-opor-body { flex: 1; min-width: 0; }
.deu-opor-titulo {
  font-size: 13px;
  font-weight: 700;
  color: #E0B252;
  margin-bottom: 4px;
}
.deu-opor-texto {
  font-size: 12.5px;
  color: var(--tx-mute);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Lista de deudas */
.deu-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Card de deuda */
.deu-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px;
  cursor: pointer;
  transition: border-color .14s;
}
.deu-card:hover { border-color: rgba(216,113,76,.3); }
.deu-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.deu-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.deu-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(216,113,76,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.deu-card-nombre {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.deu-card-meta {
  font-size: 12px;
  color: var(--tx-mute);
  margin-top: 2px;
}
.deu-card-saldo {
  font-size: 16px;
  font-weight: 700;
  flex: none;
}

/* Badges */
.deu-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.deu-badge-activa {
  background: rgba(216,113,76,.12);
  color: #D8714C;
}
.deu-badge-saldada {
  background: rgba(52,200,138,.12);
  color: var(--jade);
}

/* Empty state */
.deu-empty {
  text-align: center;
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.deu-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(216,113,76,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.deu-empty-titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--tx-soft);
}
.deu-empty-sub {
  font-size: 13px;
  color: var(--tx-mute);
  line-height: 1.55;
  max-width: 280px;
}

/* Proyeccion en detalle */
.deu-proy-loading {
  font-size: 13px;
  color: var(--tx-mute);
  padding: 12px 0;
}
.deu-proy-vacio {
  font-size: 13px;
  color: var(--tx-mute);
  padding: 12px 0;
}
.deu-proy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.deu-proy-item {
  background: var(--raised);
  border-radius: 10px;
  padding: 12px 14px;
}
.deu-proy-item-wide {
  grid-column: 1 / -1;
}
.deu-proy-label {
  font-size: 11px;
  color: var(--tx-mute);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  margin-bottom: 4px;
}
.deu-proy-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-soft);
}

/* Pagos recientes */
.deu-pagos-titulo {
  font-size: 12px;
  font-weight: 700;
  color: var(--tx-mute);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.deu-pago-fila {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.deu-pago-fila:last-child { border-bottom: none; }
.deu-pago-fecha {
  font-size: 12px;
  color: var(--tx-mute);
  flex: none;
  width: 80px;
}
.deu-pago-total {
  font-size: 13px;
  font-weight: 700;
  flex: none;
}
.deu-pago-det {
  font-size: 11.5px;
  color: var(--tx-mute);
  flex: 1;
}

/* Botones de accion en detalle */
.deu-btn-pago {
  background: var(--jade);
  color: #08110C;
  border: none;
  border-radius: var(--r-btn);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: opacity .14s;
}
.deu-btn-pago:hover { opacity: .88; }
.deu-btn-editar {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-soft);
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color .14s;
}
.deu-btn-editar:hover { border-color: rgba(255,255,255,.25); }
.deu-btn-eliminar {
  background: none;
  border: 1px solid rgba(216,113,76,.3);
  border-radius: var(--r-btn);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #D8714C;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.deu-btn-eliminar:hover { background: rgba(216,113,76,.08); border-color: rgba(216,113,76,.5); }

/* Nota en modal de pago */
.deu-pago-nota {
  font-size: 12px;
  color: var(--tx-mute);
  line-height: 1.5;
  margin-top: 8px;
  margin-bottom: 14px;
}

/* Boton nuevo en topbar desktop */
.deu-dsk-btn-nuevo {
  background: var(--jade);
  color: #08110C;
  border: none;
  border-radius: var(--r-btn);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: opacity .14s;
}
.deu-dsk-btn-nuevo:hover { opacity: .88; }

@media (min-width: 1024px) {
  .deu-wrap {
    padding: 28px 40px 40px;
    max-width: 1280px;
  }
  .deu-mob-header { display: none; }
  .deu-proy-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ══════════════════════════════════════════
   Telegram — seccion de vinculo (#telegram)
══════════════════════════════════════════ */
.tg-wrap {
  padding: 0 var(--sp-5) var(--sp-6);
}

/* Estado: no conectado */
.tg-desc {
  font-size: 13.5px;
  color: var(--tx-mute);
  line-height: 1.6;
  margin-bottom: var(--sp-5);
}

/* Bloque de codigo generado */
.tg-codigo-blk {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 18px 18px;
  margin-bottom: var(--sp-5);
}

.tg-codigo-label {
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--tx-mute);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tg-codigo-valor {
  font-family: 'Hanken Grotesk', monospace;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--jade);
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
  word-break: break-all;
}

.tg-instruccion {
  font-size: 13px;
  color: var(--tx-soft);
  line-height: 1.55;
  margin-bottom: 12px;
}

.tg-cmd {
  display: block;
  background: rgba(52,200,138,.08);
  border: 1px solid rgba(52,200,138,.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Hanken Grotesk', monospace;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--jade);
  letter-spacing: .04em;
  word-break: break-all;
  cursor: pointer;
  margin-bottom: 12px;
  text-align: left;
  width: 100%;
  transition: background .15s;
}
.tg-cmd:hover { background: rgba(52,200,138,.14); }

/* Countdown */
.tg-countdown {
  font-size: 12px;
  color: var(--tx-mute);
  margin-top: 2px;
}
.tg-countdown.expirando { color: #E0B252; }
.tg-countdown.expirado  { color: var(--neg); }

/* Estado: conectado */
.tg-conectado-blk {
  background: var(--raised);
  border: 1px solid rgba(52,200,138,.25);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--sp-5);
}

.tg-conectado-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(52,200,138,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tg-conectado-body { flex: 1; min-width: 0; }

.tg-conectado-titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--jade);
  margin-bottom: 3px;
}

.tg-conectado-fecha {
  font-size: 12px;
  color: var(--tx-mute);
}

/* Botones de accion Telegram */
.tg-btn-primario {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: var(--jade);
  border: none;
  color: #08110C;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s;
  margin-bottom: var(--sp-3);
}
.tg-btn-primario:hover   { opacity: .88; }
.tg-btn-primario:disabled { opacity: .42; cursor: default; }

.tg-btn-secundario {
  display: block;
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--tx-soft);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background .15s;
  margin-bottom: var(--sp-3);
}
.tg-btn-secundario:hover   { background: rgba(255,255,255,.04); }
.tg-btn-secundario:disabled { opacity: .4; cursor: default; }

.tg-btn-peligro {
  display: block;
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(216,113,76,.3);
  color: #D8714C;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background .15s;
}
.tg-btn-peligro:hover { background: rgba(216,113,76,.07); }

@media (min-width: 1024px) {
  .tg-wrap {
    max-width: 560px;
  }
}

/* ── f103: Autocomplete de comercio en mNuevoMovimiento ──────────── */
.nm-comercio-wrap {
  position: relative;
}

.nm-comercio-sel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid rgba(52,200,138,.35);
  border-radius: 10px;
  padding: 10px 12px;
  gap: 8px;
}

.nm-comercio-nom {
  font-size: 14px;
  font-weight: 600;
  color: var(--jade);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nm-comercio-clear {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.08);
  color: var(--tx-mute);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.nm-comercio-clear:hover { background: rgba(255,255,255,.15); color: var(--tx-base); }

.nm-comercio-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 120;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}

.nm-com-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--tx-base);
  font-size: 13.5px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  gap: 8px;
  transition: background .12s;
}
.nm-com-opt:last-child { border-bottom: none; }
.nm-com-opt:hover { background: rgba(255,255,255,.04); }

.nm-com-opt-nom {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nm-com-opt-cat {
  flex: none;
  font-size: 11px;
  color: var(--tx-mute);
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

.nm-com-crear {
  color: var(--jade);
  font-weight: 700;
  font-style: italic;
}
.nm-com-crear:hover { background: rgba(52,200,138,.07); }
.nm-com-crear:disabled { opacity: .5; cursor: default; }

.nm-com-empty {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--tx-mute);
}

/* ── f103: Pantalla #comercios ───────────────────────────────────── */
.com-wrap {
  padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
  max-width: 720px;
}

/* Header movil */
.com-mob-header {
  margin-bottom: var(--sp-4);
}

.com-back {
  background: none;
  border: none;
  color: var(--jade);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
  display: block;
}

.com-titulo-blk {
  display: flex;
  align-items: center;
  gap: 10px;
}

.com-titulo {
  font-family: 'Newsreader', serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--tx-light);
  flex: 1;
  min-width: 0;
}

.com-btn-nuevo {
  background: var(--jade);
  color: #08110C;
  border: none;
  border-radius: 9px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.com-btn-nuevo:hover { opacity: .88; }

/* Insight */
.com-insight {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 18px;
}

.com-insight-titulo {
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-mute);
  font-weight: 700;
  margin-bottom: 12px;
}

.com-insight-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.com-top-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.com-top-pos {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--tx-mute);
  width: 18px;
  text-align: right;
}

.com-top-nom {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.com-top-monto {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--tx-light);
  font-variant-numeric: tabular-nums;
}

.com-insight-nota {
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 10px;
  opacity: .7;
}

/* Lista */
.com-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.com-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  padding: 14px 16px;
  transition: border-color .15s;
}
.com-card:hover { border-color: rgba(255,255,255,.14); }

.com-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.com-card-info {
  flex: 1;
  min-width: 0;
}

.com-card-nombre {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-light);
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.com-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--tx-mute);
}

.com-card-tag {
  background: rgba(52,200,138,.1);
  color: var(--jade);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

.com-card-right {
  flex: none;
  text-align: right;
}

.com-card-monto {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-light);
  font-variant-numeric: tabular-nums;
}

.com-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.05);
}

.com-btn-accion {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: none;
  color: var(--tx-mute);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  text-align: center;
}
.com-btn-accion:hover { background: rgba(255,255,255,.05); color: var(--tx-base); border-color: rgba(255,255,255,.18); }

.com-btn-arch:hover { background: rgba(216,113,76,.06); color: #D8714C; border-color: rgba(216,113,76,.25); }

/* Empty state */
.com-empty {
  text-align: center;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.com-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.com-empty-titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--tx-base);
}

.com-empty-sub {
  font-size: 13px;
  color: var(--tx-mute);
  line-height: 1.5;
  max-width: 300px;
}

.com-nota-fx {
  font-size: 11.5px;
  color: var(--tx-mute);
  opacity: .65;
  margin-top: 18px;
  padding: 0 2px;
  line-height: 1.5;
}

.com-dsk-btn-nuevo {
  background: var(--jade);
  color: #08110C;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}
.com-dsk-btn-nuevo:hover { opacity: .88; }

@media (min-width: 1024px) {
  .com-wrap {
    padding: 28px 40px 40px;
    max-width: 1280px;
  }
  .com-mob-header { display: none; }
  .com-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .com-insight {
    max-width: 560px;
  }
}

/* ── Premium upsell modal ── */
.prem-sheet {
  padding: 28px 24px 32px;
}
@media (min-width: 720px) {
  .prem-sheet { padding: 32px 36px 36px; }
}

/* Boton accion mini en tabla admin (Asignar plan) */
.adm-btn-xs {
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--champagne);
  background: rgba(200,169,106,.1);
  border: 1px solid rgba(200,169,106,.28);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.adm-btn-xs:hover { background: rgba(200,169,106,.18); }

/* ── Vex In-App: FAB + panel de chat (f104) ── */
.vx-vex-fab {
  position: fixed;
  /* Móvil: esquina inferior izquierda, sobre la tab bar. Evita el header (ojito/
     logout), el FAB de sync (abajo-derecha) y el tab-fab central. z-index por
     DEBAJO de los modales (.nm-overlay=300) para no flotar sobre ellos. */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  left: 16px;
  z-index: 280;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--jade);
  color: #08110C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(52,200,138,.4);
  transition: transform .15s, box-shadow .15s;
  padding: 0;
}
.vx-vex-fab:active { transform: scale(.9); }

@media (min-width: 1024px) {
  .vx-vex-fab {
    left: auto;
    bottom: 32px;
    right: 32px;
    width: 52px;
    height: 52px;
  }
}

.vx-vex-overlay {
  display: none;
}
@media (max-width: 1023px) {
  .vx-vex-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(6,8,7,.62);
    backdrop-filter: blur(4px);
    z-index: 284;
    opacity: 0;
    pointer-events: none;
    transition: opacity .26s;
  }
  .vx-vex-overlay.visible {
    opacity: 1;
    pointer-events: auto;
  }
}

.vx-vex-panel {
  position: fixed;
  z-index: 285;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72vh;
  max-height: 560px;
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.vx-vex-panel.abierto { transform: translateY(0); }

@media (min-width: 1024px) {
  .vx-vex-panel {
    left: auto;
    width: 360px;
    bottom: 96px;
    right: 32px;
    height: 480px;
    max-height: 480px;
    border-radius: 16px;
    transform: scale(.96) translateY(12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
  }
  .vx-vex-panel.abierto {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

.vx-vex-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.vx-vex-header-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(52,200,138,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vx-vex-header-info { flex: 1; min-width: 0; }
.vx-vex-header-nombre {
  font-family: 'Newsreader', serif;
  font-size: 16px;
  font-style: italic;
  color: var(--tx);
  line-height: 1.2;
}
.vx-vex-header-sub {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-top: 1px;
}
.vx-vex-cerrar {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--tx-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
  padding: 0;
}
.vx-vex-cerrar:hover { background: var(--raised); color: var(--tx); }

.vx-vex-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vx-vex-burbuja {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
}
.vx-vex-burbuja-bot {
  background: var(--raised);
  color: var(--tx);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.vx-vex-burbuja-user {
  background: var(--jade);
  color: #08110C;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.vx-vex-burbuja-error {
  background: rgba(216,113,76,.1);
  border: 1px solid rgba(216,113,76,.28);
  color: #D8714C;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.vx-vex-burbuja-cargando {
  color: var(--tx-mute);
  font-style: italic;
  font-size: 12.5px;
  align-self: flex-start;
}

.vx-vex-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.vx-vex-input {
  flex: 1;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 14px;
  font-family: inherit;
  color: var(--tx);
  resize: none;
  min-height: 38px;
  max-height: 100px;
  outline: none;
  line-height: 1.4;
}
.vx-vex-input:focus { border-color: var(--jade); }
.vx-vex-input::placeholder { color: var(--tx-mute); }
.vx-vex-btn-enviar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  background: var(--jade);
  color: #08110C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: opacity .15s;
  align-self: flex-end;
}
.vx-vex-btn-enviar:disabled { opacity: .38; cursor: not-allowed; }

/* ── Vex chat: fila de acciones para tipo='sugerencia' (f179) ── */
.vx-vex-accion-row {
  align-self: flex-start;
  display: flex;
  gap: 8px;
  padding: 2px 0 4px;
}
.vx-vex-btn-sug {
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
  line-height: 1;
}
.vx-vex-btn-sug:disabled { opacity: .45; cursor: not-allowed; }
.vx-vex-btn-sug-si {
  background: var(--jade);
  color: #08110C;
  font-weight: 600;
}
.vx-vex-btn-sug-si:not(:disabled):hover { opacity: .86; }
.vx-vex-btn-sug-no {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--tx-mute);
}
.vx-vex-btn-sug-no:not(:disabled):hover { color: var(--tx); }

/* ── BankNotifications opt-in card (f104) ── */
.vx-bank-card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-top: var(--sp-4);
}
.vx-bank-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.vx-bank-card-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(52,200,138,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vx-bank-card-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 3px;
}
.vx-bank-card-desc {
  font-size: 12.5px;
  color: var(--tx-mute);
  line-height: 1.5;
}
.vx-bank-card-priv {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--ink);
  border-radius: 8px;
  line-height: 1.45;
}
.vx-bank-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  gap: 10px;
}
.vx-bank-estado {
  font-size: 12.5px;
  color: var(--tx-mute);
}
.vx-bank-estado.activo {
  color: var(--jade);
  font-weight: 600;
}

/* ─────────────────────────────────────────────
   f167 — Inversiones en acciones
   ───────────────────────────────────────────── */
.inv-wrap {
  padding: 0 16px calc(80px + env(safe-area-inset-bottom, 0px));
}
.inv-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 0 14px;
}
.inv-mobile-titulo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--tx-soft);
}
.inv-acciones-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.inv-btn-agregar {
  background: rgba(52,200,138,.12);
  border: 1px solid rgba(52,200,138,.28);
  color: var(--jade);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}
.inv-btn-agregar:hover { background: rgba(52,200,138,.2); }
.inv-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.inv-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.inv-ticker {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  letter-spacing: .02em;
}
.inv-valuacion {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.inv-row-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}
.inv-nombre-cant {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12.5px;
  color: var(--tx-mute);
}
.inv-nombre { color: var(--tx-soft); }
.inv-sep    { color: var(--tx-mute); }
.inv-cantidad { color: var(--tx-mute); }
.inv-precio-val {
  font-size: 11.5px;
  color: var(--tx-mute);
  font-variant-numeric: tabular-nums;
}
.inv-chip-pendiente {
  font-size: 11px;
  background: rgba(224,178,82,.1);
  color: #E0B252;
  border: 1px solid rgba(224,178,82,.26);
  border-radius: 5px;
  padding: 1px 6px;
  font-weight: 600;
}
.inv-ganancia {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.inv-row-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.inv-btn-editar {
  background: none;
  border: 1px solid var(--line);
  color: var(--tx-mute);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 9px 12px;
  min-height: 36px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.inv-btn-editar:hover { color: var(--tx); border-color: rgba(255,255,255,.28); }
.inv-btn-elim {
  background: none;
  border: 1px solid rgba(216,113,76,.22);
  color: #D8714C;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 9px 12px;
  min-height: 36px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.inv-btn-elim:hover { background: rgba(216,113,76,.08); }
.inv-empty {
  text-align: center;
  padding: 52px 20px;
}
.inv-empty-icono { margin-bottom: 16px; }
.inv-empty-titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--tx-soft);
  margin-bottom: 8px;
}
.inv-empty-desc {
  font-size: 13.5px;
  color: var(--tx-mute);
  line-height: 1.55;
  max-width: 300px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .inv-mobile-header { display: none; }
  .inv-acciones-top  { display: none; }
  .inv-wrap {
    max-width: 1280px;
    margin: 0;
    padding: 28px 40px 60px;
  }
}

/* Caret parpadeante para los campos de monto/tasa custom (div con teclado de
   centavos, sin cursor nativo). Aparece al enfocar el campo: "aqui estoy". */
.nm-monto:focus { outline: none; }
.nm-monto:focus::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  background: var(--jade, #34C88A);
  border-radius: 1px;
  animation: cp-caret-blink 1.06s steps(1) infinite;
}
@keyframes cp-caret-blink {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Inversiones: controles (pestañas por tipo + buscador) y grupos por tipo. */
.inv-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.inv-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.inv-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--tx-soft);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}
.inv-tab:hover { color: var(--tx); border-color: rgba(255,255,255,.22); }
.inv-tab.active {
  background: rgba(52,200,138,.12);
  border-color: rgba(52,200,138,.34);
  color: var(--jade);
}
.inv-tab-count {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  color: var(--tx-mute);
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}
.inv-tab.active .inv-tab-count { color: var(--jade); background: rgba(52,200,138,.16); }
.inv-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 200px;
  max-width: 280px;
}
.inv-search-icon {
  position: absolute;
  left: 11px;
  pointer-events: none;
}
.inv-search {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--tx);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 8px 12px 8px 32px;
  outline: none;
  transition: border-color .14s;
}
.inv-search::placeholder { color: var(--tx-mute); }
.inv-search:focus { border-color: rgba(52,200,138,.4); }
.inv-grupo { margin-bottom: 18px; }
.inv-grupo-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 2px 9px;
}
.inv-grupo-titulo {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-soft);
}
.inv-grupo-count {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  color: var(--tx-mute);
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  padding: 1px 7px;
}
.inv-grupo-riesgo {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--alerta, #E0B252);
  background: rgba(224,178,82,.1);
  border: 1px solid rgba(224,178,82,.24);
  border-radius: 999px;
  padding: 1px 8px;
}
.inv-grupo-subtotal {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.inv-empty-busqueda {
  text-align: center;
  color: var(--tx-mute);
  font-size: 13px;
  padding: 28px 18px;
}

/* Inversiones: costo promedio ponderado en la ficha */
.inv-costo-prom-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}
.inv-costo-prom-lbl {
  font-size: 11.5px;
  color: var(--tx-mute);
}
.inv-costo-prom-val {
  font-size: 11.5px;
  color: var(--tx-soft);
  font-variant-numeric: tabular-nums;
}

/* Inversiones: boton Comprar mas */
.inv-btn-comprar {
  background: rgba(52,200,138,.12);
  border: 1px solid rgba(52,200,138,.28);
  color: var(--jade);
  font-size: 12.5px;
  font-family: var(--font-ui);
  font-weight: 600;
  padding: 9px 12px;
  min-height: 36px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.inv-btn-comprar:hover { background: rgba(52,200,138,.2); }

/* Inversiones: boton Vender (champagne, indica accion premium/irreversible) */
.inv-btn-vender {
  background: none;
  border: 1px solid rgba(200,169,106,.3);
  color: #C8A96A;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 9px 12px;
  min-height: 36px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.inv-btn-vender:hover { background: rgba(200,169,106,.08); }

/* Inversiones: boton Historial (igual tono que Editar) */
.inv-btn-historial {
  background: none;
  border: 1px solid var(--line);
  color: var(--tx-mute);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 9px 12px;
  min-height: 36px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.inv-btn-historial:hover { color: var(--tx); border-color: rgba(255,255,255,.28); }

/* Inversiones: fila de posicion cerrada (cantidad=0 tras vender todo) */
.inv-row-cerrada {
  opacity: .65;
  border-color: rgba(58,67,71,.6);
}
.inv-ticker-cerrada { color: var(--tx-mute); }
.inv-badge-cerrada {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-mute);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 8px;
}

/* Modal vender: disponible + boton "Todo" */
.inv-vd-disponible {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--tx-soft);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.inv-vd-todo {
  background: none;
  border: 1px solid var(--line);
  color: var(--jade);
  font-size: 11.5px;
  font-family: var(--font-ui);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.inv-vd-todo:hover { background: rgba(52,200,138,.1); }

/* Modal vender: pantalla de resultado tras confirmar */
.inv-resultado-venta {
  text-align: center;
  padding: 16px 0 4px;
}
.inv-resultado-titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 8px;
}
.inv-resultado-cant {
  font-size: 13px;
  color: var(--tx-mute);
  margin-bottom: 18px;
}
.inv-resultado-ganancia {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}
.inv-resultado-ganancia strong { font-variant-numeric: tabular-nums; }
.inv-resultado-cerrada {
  font-size: 12px;
  color: var(--tx-mute);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 14px;
  display: inline-block;
  margin-top: 6px;
}
.inv-resultado-efectivo {
  font-size: 13px;
  color: var(--tx-soft);
  margin-top: 8px;
  line-height: 1.5;
}

/* Modal historial: estado vacio */
.inv-hl-empty {
  text-align: center;
  color: var(--tx-mute);
  font-size: 13.5px;
  padding: 36px 16px;
}

/* Modal historial: lista de lotes */
.inv-lotes-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-lote-row {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.inv-lote-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.inv-lote-chip-compra,
.inv-lote-chip-venta {
  font-size: 11px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.inv-lote-chip-compra {
  background: rgba(52,200,138,.12);
  color: var(--jade);
  border: 1px solid rgba(52,200,138,.26);
}
.inv-lote-chip-venta {
  background: rgba(200,169,106,.1);
  color: #C8A96A;
  border: 1px solid rgba(200,169,106,.28);
}
.inv-lote-fecha {
  font-size: 12px;
  color: var(--tx-mute);
}
.inv-lote-cant {
  font-size: 12.5px;
  color: var(--tx-soft);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.inv-lote-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.inv-lote-precio,
.inv-lote-prom {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.inv-lote-lbl { color: var(--tx-mute); }
.inv-lote-ganancia {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────
   .cso-* — Mis reportes / Soporte
   ───────────────────────────────────────── */
.cso-wrap {
  padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
  max-width: 720px;
}

.cso-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sp-4);
}

.cso-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cso-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 16px;
}

.cso-card-accion {
  border-color: rgba(224, 178, 82, .35);
  background: rgba(224, 178, 82, .04);
}

.cso-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.cso-badge {
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
  border-radius: 5px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, .05);
}

.cso-tipo {
  font-size: 11px;
  color: var(--tx-mute);
  background: rgba(255, 255, 255, .06);
  border-radius: 5px;
  padding: 2px 7px;
}

.cso-fecha {
  font-size: 11px;
  color: var(--tx-mute);
  margin-left: auto;
}

.cso-asunto {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 6px;
  line-height: 1.4;
}

.cso-narrativa {
  font-size: 12.5px;
  color: var(--tx-mute);
  line-height: 1.55;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cso-resolucion {
  font-size: 12px;
  color: var(--jade);
  margin-top: 8px;
}

.cso-prompt {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(224, 178, 82, .25);
}

.cso-prompt-titulo {
  font-size: 13px;
  color: #E0B252;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.45;
}

.cso-prompt-acciones {
  display: flex;
  gap: 8px;
}

.cso-btn-si {
  background: var(--jade);
  color: #08110C;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
}

.cso-btn-si:hover { opacity: .85; }
.cso-btn-si:disabled { opacity: .5; cursor: not-allowed; }

.cso-btn-no {
  background: transparent;
  color: var(--tx-mute);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s;
}

.cso-btn-no:hover { opacity: .75; }
.cso-btn-no:disabled { opacity: .5; cursor: not-allowed; }

.cso-empty {
  text-align: center;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cso-empty-titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--tx-soft);
}

.cso-empty-sub {
  font-size: 13px;
  color: var(--tx-mute);
  max-width: 280px;
  line-height: 1.5;
}

/* Desktop override */
@media (min-width: 1024px) {
  .cso-wrap {
    padding-top: 0;
    padding-left: 40px;
    padding-right: 40px;
  }
}