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

/* CONTROLES NATIVOS EN OSCURO (28-sep-2026).
   Sin esto el navegador dibuja TODO widget nativo en modo claro sobre nuestra
   UI Ink: el icono del calendario de <input type="date"> queda gris oscuro
   sobre #0B0E0D y es practicamente invisible, asi que la fecha parece no ser
   editable (reportado por Dario: "no levanta el calendario"). El campo siempre
   funciono; lo que no se veia era por donde entrar.
   `color-scheme: dark` tambien hace que el calendario desplegable, la lista de
   los <select>, las barras de scroll y el autocompletado salgan oscuros, que
   es lo coherente con la marca. La app no tiene tema claro, asi que es fijo. */
:root { color-scheme: dark; }

* { 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;
  /* v97: pill solo tiene sentido en una linea; con white-space normal un
     mensaje largo se vuelve bloque y el pill lo deforma en elipse. */
  border-radius: 14px;
  text-align: center;
  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;
  /* Por ENCIMA de todos los overlays (sheets 300, modales 2001, lightbox 9000):
     el toast es el canal de error de los modales; debajo de un overlay = errores mudos (caso b0169ccc) */
  z-index: 9500;
  /* v97: nowrap sin max-width desbordaba a 773px en viewport de 360 con los
     mensajes largos de validación; el toast es la mitigación para errores
     bajo el fold, así que tiene que caber entero. width: max-content para
     que mande el max-width y no el hueco que deja left:50% (180px a 360). */
  width: max-content;
  max-width: min(92vw, 520px);
  white-space: normal;
}
#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;
  /* f268: vertical compacto — el login debe caber SIN scroll en un viewport de
     celular (sensación de app). El aire grande vivía acá y en los gaps de abajo. */
  padding: 14px 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-4);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.auth-apex {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  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-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* f268: pantallas bajas (APK en teléfonos chicos, teclado cerrado) — comprimir
   otro escalón para que el login siga entrando sin scroll. */
@media (max-height: 760px) {
  .auth-screen { padding-top: 10px; padding-bottom: 10px; }
  .auth-box { gap: var(--sp-3); }
  .auth-brand { gap: 6px; }
  .auth-apex { width: 48px; height: 48px; border-radius: 15px; }
  .auth-apex svg { width: 30px; height: 30px; }
  .auth-card { gap: 10px; padding: var(--sp-4) var(--sp-5); }
}
/* Último escalón: hardware muy chico (≤660px de alto). El tagline cede primero. */
@media (max-height: 660px) {
  .auth-tagline { display: none; }
  .auth-apex { width: 40px; height: 40px; border-radius: 12px; }
  .auth-apex svg { width: 26px; height: 26px; }
}

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

/* Widget de Cloudflare Turnstile (CAPTCHA) — size:"flexible" llena el ancho
   del contenedor; el propio auth-card ya aporta el gap vertical (flex+gap). */
.auth-turnstile { width: 100%; }
.auth-turnstile-degradado,
.auth-turnstile-cargando {
  font-size: .72rem;
  color: var(--tx-mute);
  text-align: center;
  padding: 2px 4px;
  line-height: 1.45;
}

/* 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;
}
/* Sin esto, `hidden` NO oculta nada: el display:flex de arriba es una regla de
   autor y le gana al [hidden]{display:none} de la hoja del navegador. Se veían
   dos botones de Google juntos en el login. */
.btn-google[hidden] { display: none; }

/* Botón oficial de Google (GIS). Google lo dibuja dentro de un iframe propio
   y solo acepta radios fijos (4px o píldora), así que el radio de la marca se
   aplica acá afuera con overflow oculto. El alto queda reservado para que la
   tarjeta de login no salte mientras carga el script de Google. */
.gis-box {
  display: flex;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--r-btn);
  overflow: hidden;
}
.gis-box:empty { min-height: 0; }
.gis-box iframe { border-radius: var(--r-btn) !important; }
.gis-box--cargando {
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--raised);
  opacity: .5;
  animation: gisPulso 1.2s ease-in-out infinite;
}
@keyframes gisPulso {
  0%, 100% { opacity: .35; }
  50%      { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .gis-box--cargando { animation: none; }
}

/* ══════════════════════════════════════════
   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); }

/* Spinner del onboarding de cero fricción ("Preparando tu hogar…") */
.ob-cero-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto var(--sp-4);
  border: 3px solid rgba(52,200,138,.18);
  border-top-color: var(--jade);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ══════════════════════════════════════════
   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;
  /* NO heredar el min-height:100vh de la base (línea ~15): en Chrome Android 100vh =
     viewport GRANDE (incluye la barra del navegador retraída) y en algunos devices mide
     ~57px MÁS que el área visible real → el body se estira, el #app (flex:1) lo llena y
     el tab-bar queda clipeado fuera de pantalla (no se ve el menú, no se puede navegar).
     svh/dvh dan el área visible real; el body queda igual que el #app (100svh). */
  min-height: 100dvh;
  min-height: 100svh;
}
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;
  /* LA BANDA DE LOS FLOTANTES.
     Los FAB (chat, sincronizar) son position:fixed, así que no ocupan lugar en
     el flujo: el contenido se dibuja debajo creyendo que la pantalla llega hasta
     el fondo, y el último bloque de cada pantalla queda comido. Medido en un
     S25 (384px CSS): tapaba el final de la frase de una suscripción y el avatar
     de una miembro del hogar.
     La tab-bar NO entra en esta cuenta y es la parte que se suele calcular de
     más: es position:relative y flex:none, o sea que YA ocupa su lugar.
     Solo hay que compensar lo que los FAB sobresalen POR ENCIMA de ella:
       FAB: bottom 84px + alto 44px = llega a 128px del fondo del viewport
       tab-bar: 68px
       128 - 68 = 60px que invaden, + 12px de respiro = 72px.
     Tampoco hace falta sumar el safe-area: el FAB ya lo lleva en su bottom, así
     que sube junto con la barra y la diferencia se mantiene constante. */
  padding-bottom: var(--banda-flotante, 72px);
  scrollbar-width: thin;
  scrollbar-color: #2A3133 transparent;
  /* f267: reserva el gutter del scrollbar siempre → el cluster del shell cae al
     mismo pixel haya o no scroll (solo afecta desktop angosto; en móvil es overlay). */
  scrollbar-gutter: stable;
}
.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); }

/* Sincronizar, móvil (f377) — vive DENTRO del cluster del header (.pg-mobile-actions),
   no flotando. Hasta f376 era .mob-sync-fab: un position:fixed abajo-derecha que se
   montaba sobre la columna de los montos (medido en el S25: tapaba el saldo de una
   cuenta y los importes de la lista de movimientos). En escritorio este botón YA vivía
   en la topbar, así que esto iguala el móvil al escritorio en vez de inventar nada.
   Mismo tamaño y forma que la campana (40x40, radio 12): son pares del cluster. */
.pg-mob-sync {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(52,200,138,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #34C88A;
  padding: 0;
  flex: none;
  transition: background .15s, border-color .15s, transform .1s;
}
.pg-mob-sync:active { background: var(--raised); transform: scale(.93); }
.pg-mob-sync:disabled { opacity: .45; cursor: default; }
@media (min-width: 1024px) {
  .pg-mob-sync { display: none; }
}
.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); }

/* Grupos colapsables de #mas */
.mas-grp-head {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.mas-grp-head-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.mas-grp-count {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  color: var(--tx-mute);
  margin-left: var(--sp-2);
}
.mas-grp-chevron {
  color: var(--tx-mute);
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  transition: transform .2s ease;
  flex: none;
}
.mas-grp-head.is-exp .mas-grp-chevron { transform: rotate(90deg); }
.mas-grp-head-sub {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--tx-mute);
  margin-top: 2px;
}
.mas-grp-body.mas-grp-collapsed { display: none; }

/* 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);
}
/* Headers de lista (Suscripciones / Cobros / Novedades) que son el primer
   elemento visible en móvil → necesitan bajar el botón ‹ debajo de la barra
   de estado. Wealth principal NO lleva esta clase: su .wl-wrap ya maneja
   el safe-area-inset-top en el padding del contenedor. */
.wl-header--lista {
  padding-top: max(24px, calc(var(--sp-3) + env(safe-area-inset-top, 0px)));
}
.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;
  /* Era #5E6863: 3.07:1 medido, debajo del minimo AA de 4.5. Es la UNICA
     instruccion del input centavos-primero, y en la guia de inicio es lo
     primero que lee un usuario nuevo: si no se lee, no entiende como teclear. */
  color: var(--tx-mute);
  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); }

/* El boton del calendario: el color lo resuelve `color-scheme: dark` del :root,
   asi que aca NO va ningun filter (invertir encima lo devolveria a negro).

   El margen es por AIRE, no por area de toque (de eso se encarga el listener de
   showPicker en vertex-core.js, que abre el calendario tocando el campo entero).
   Sin el, el boton queda pegado al texto de la fecha y al borde del campo, y en
   un campo angosto llega a comerse el ultimo digito del anio. Reportado por
   Dario el 29-sep-2026: "quedo muy a la derecha, no tiene aire a la derecha".

   OJO AL PONERLE MAS: agrandar este pseudo-elemento agranda el min-content del
   input, y una fila de DOS fechas desborda el modal en pantallas angostas. Por
   eso una version anterior con `padding:6px` fue bloqueada en el gate de UI.
   Hoy no desborda porque las filas de dos fechas usan .nm-row-2 (o .cd-row-2 en
   certificados) y se apilan abajo de 430px. Medido a 360 y 390px: 0 de
   desborde. Si algun dia se agrega una fila de dos fechas SIN esa clase, este
   margen la va a desbordar. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .9;
  margin-left: 10px;
  margin-right: 2px;
}

/* Fila de dos campos en modales (espejo de .cd-row-2, que ya resolvio esto en
   certificados en f394). Un <input type=date> tiene un min-content de ~164px
   que no baja, asi que dos en fila dentro de un sheet angosto desbordan y
   cortan el icono del segundo: 20px de sobra a 360px, que es el ancho de
   muchos Android reales. `min-width:0` deja que encojan y abajo de 430px se
   apilan. Medido en el gate de UI del 28-sep-2026 sobre el modal de
   presupuesto, donde el defecto ya existia desde antes. */
.nm-row-2 { display: flex; gap: 12px; }
.nm-row-2 > * { flex: 1; min-width: 0; }
@media (max-width: 430px) {
  .nm-row-2 { flex-wrap: wrap; }
  .nm-row-2 > .nm-field { flex: 1 1 100%; }
}
.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;
  /* Pegado al fondo del sheet mientras haya contenido por scrollear. Era el
     ultimo bloque del formulario: en pantallas chicas quedaba fuera de vista
     justo cuando el usuario ya decidio y solo queria confirmar. Si el contenido
     entra sin scroll, sticky no cambia nada.
     El spread del color del sheet tapa lo que pasaria por los costados; la
     sombra de arriba lo despega del contenido que corre por debajo. */
  position: sticky;
  bottom: 0;
  box-shadow: 0 0 0 6px #14191A, 0 -10px 14px -6px rgba(8, 17, 12, .6);
  /* El color vive en una variable para que el estado deshabilitado pueda
     apagarlo SIN opacity (ver abajo) y las variantes por vertical lo cambien
     en un solo lugar. */
  --nm-btn-bg: #34C88A;
  --nm-btn-fg: #08110C;
  background: var(--nm-btn-bg);
  color: var(--nm-btn-fg);
  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); }
/* Deshabilitado SIN opacity: al ser sticky, un botón semitransparente deja ver
   el formulario corriendo por debajo (se veía la tarjeta de la cuenta a través
   del botón). Se apaga mezclando el color contra el fondo del sheet, que da el
   mismo gris pero opaco. */
.nm-guardar-dis,
.nm-guardar:disabled {
  background: color-mix(in srgb, var(--nm-btn-bg) 45%, #14191A);
  color: color-mix(in srgb, var(--nm-btn-fg) 45%, #14191A);
  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;
  /* top sp-1: en movil la .pg-mob-bar + .wrap ya aportan ~22px; alinea el gap al patron de Hogar (~26px) */
  padding: var(--sp-1) 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: 8px; /* f267: mismo gap que .pg-mobile-actions (spec del cluster unificado) */
}

.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;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cd-card-left {
  min-width: 0;
  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);
}

/* Grilla de accesos Wealth (movil) */
.wl-acc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.wl-acc-tile {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px 10px;
  cursor: pointer;
  gap: 6px;
  text-align: center;
  touch-action: manipulation;
  transition: border-color .15s;
}
.wl-acc-tile:active { opacity: .7; }
.wl-acc-tile:hover { border-color: rgba(52,200,138,.28); }
.wl-acc-label {
  font-size: 11px;
  color: var(--tx-soft);
  font-family: var(--font-ui);
  letter-spacing: .01em;
  line-height: 1.2;
}
/* Secciones colapsable (movil) */
.wl-acc-head { cursor: pointer; justify-content: space-between; touch-action: manipulation; }
.wl-acc-chevron { color: var(--tx-mute); font-size: 20px; line-height: 1; display: inline-block; transition: transform .2s ease; }
.wl-acc-head.is-exp .wl-acc-chevron { transform: rotate(90deg); }
.wl-acc-grid.wl-acc-collapsed { display: none; }

/* 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; min-width: 0; }
/* f394: dos <input type=date> con min-content ~164px c/u desbordan el modal
   (max-width 448px, padding 24px) en pantallas <=430px. Solo los .cd-field
   (las fechas del wizard Renovar) pasan a apilarse; el plazo (input+chips)
   sigue en fila porque no usa .cd-field como hijo directo de .cd-row-2. */
@media (max-width: 430px) {
  .cd-row-2 { flex-wrap: wrap; }
  .cd-row-2 > .cd-field { flex: 1 1 100%; }
}

/* 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 + Eliminar). flex-wrap en .cd-card-top +
   margin-left:auto aca: si los 3 botones no entran junto al nombre, esta fila
   pasa a una segunda linea (debajo) en vez de solaparse con las metricas,
   y queda alineada a la derecha igual que cuando comparte linea (f258). */
.cd-card-actions {
  display: flex;
  gap: 6px;
  flex: none;
  margin-left: auto;
}
.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; }
.cd-btn-eliminar {
  background: transparent;
  border: 1px solid rgba(216,113,76,.35);
  color: #D8714C;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s;
}
.cd-btn-eliminar:hover { border-color: rgba(216,113,76,.7); background: rgba(216,113,76,.1); }

/* Modal "Eliminar certificado" */
.cd-warn-box {
  background: rgba(216,113,76,.08);
  border: 1px solid rgba(216,113,76,.25);
  border-radius: 11px;
  padding: 13px 14px;
  font-size: 12.5px;
  color: #ECECE6;
  line-height: 1.55;
  margin-bottom: 16px;
}
.cd-radio-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cd-radio-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 11px 13px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--tx-soft);
  line-height: 1.45;
  transition: border-color .15s;
}
.cd-radio-opt:hover { border-color: rgba(255,255,255,.22); }
.cd-radio-opt input[type="radio"] {
  margin-top: 2px;
  accent-color: #34C88A;
  flex: none;
  cursor: pointer;
}

/* 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);
}

/* ── f394: ciclo de vida del CD (vencido / próximo a vencer / histórico) ── */
.cd-badge-vencido {
  color: #E0B252;
  background: rgba(224,178,82,.14);
}
.cd-badge-terminal {
  color: var(--tx-mute);
  background: rgba(255,255,255,.06);
}
.cd-venc-banner {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.5;
}
.cd-venc-banner-urgente {
  background: rgba(224,178,82,.09);
  border: 1px solid rgba(224,178,82,.28);
}
.cd-venc-banner-text { color: #ECECE6; }
.cd-venc-banner-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.cd-btn-renovar, .cd-btn-liquidar {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition: filter .15s;
}
.cd-btn-renovar { background: #E0B252; color: #211802; }
.cd-btn-liquidar {
  background: transparent;
  border: 1px solid rgba(224,178,82,.5);
  color: #E0B252;
}
.cd-btn-renovar:hover, .cd-btn-liquidar:hover { filter: brightness(1.08); }
.cd-venc-banner-soft {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--tx-mute);
}

/* Segmented option deshabilitada (sin cuentas en la moneda del CD) */
.cd-seg-btn-disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Tarjeta atenuada del histórico (renovado/liquidado/cancelado) */
.cd-card-terminal {
  opacity: .55;
}

/* Sección colapsable "Histórico" — mismo patrón visual que wl-acc-head */
.cd-historico { margin-top: 22px; }
.cd-historico-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 2px;
  touch-action: manipulation;
}
.cd-historico-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx-mute);
}
.cd-historico-chevron {
  color: var(--tx-mute);
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease;
}
.cd-historico-head.is-exp .cd-historico-chevron { transform: rotate(90deg); }
.cd-historico-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.cd-historico-list.cd-historico-collapsed { display: none; }

/* ══════════════════════════════════════════
   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-top sin env(safe-area-inset-top): ya lo reserva .pg-mobile-actions
     (fila de la campana) que precede a este wrap en mobile (f263). En desktop
     el override de abajo (@media min-width:1024) pisa este valor igual. */
  padding: var(--sp-5);
}
/* f392: el DETALLE de miembro (y su fallback de error) renderizan .fam-wrap
   SIN la fila de header que reserva el safe-area (ver comentario de arriba):
   en el APK edge-to-edge el "‹ Volver a la familia" quedaba pegado a la barra
   de estado (reportado por Darío con screenshot). En web env() es 0 y el
   padding queda igual que siempre. */
.fam-wrap.fam-wrap-sinheader {
  padding-top: calc(var(--sp-5) + env(safe-area-inset-top, 0px));
}

@media (max-width: 540px) {
  /* Aire arriba en Hogar (feedback del dueno: quedaba pegado al borde en el APK). */
  .fam-wrap { padding: var(--sp-4); padding-top: 20px; }
  /* La variante sin header suma el inset del sistema también en móvil (f392). */
  .fam-wrap.fam-wrap-sinheader { padding-top: calc(20px + 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;
}

/* Aviso "N sin tasa": movimientos excluidos de un total convertido porque
   falta la tasa FX. Reutilizado en detalle de plan y tarjeta "Tu mes". */
.nota-sintasa {
  font-size: 11.5px;
  color: #7E8783;
  line-height: 1.5;
  margin: 6px 0 4px;
}

/* 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 */
/* Tres columnas: contenido | montos | boton quitar. La tercera existe porque el
   boton x tenia asignada la MISMA celda que la barra de progreso (fila 2), y como
   la barra ocupa todas las columnas, el x se dibujaba encima del porcentaje: se
   leia un "78%" con una cruz montada. Ahora cada uno tiene su celda. */
.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 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 {
  /* 1/3 y no 1/-1: la tercera columna es del boton quitar. */
  grid-column: 1 / 3;
  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: 3;
  grid-row: 1 / -1;
  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;
}
/* Crear una categoría sin salir del modal. Sticky, porque con una lista larga
   el usuario que no encuentra la suya scrollea, y es ahí donde tiene que
   seguir viendo la salida. El fondo es opaco a propósito: sobre uno
   translúcido se leen las opciones pasando por debajo. */
.cp-picker-nueva {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 14px;
  background: #223029;
  border-bottom: 1px solid var(--line);
  color: var(--jade);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.cp-picker-nueva:hover,
.cp-picker-nueva:focus { background: #294036; outline: none; }

/* Franja "te queda por repartir" del modal de linea de presupuesto. */
.al-restante {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.al-restante-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.al-restante-lbl { font-size: 12px; color: var(--tx-mute); }
.al-restante-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--champagne);
  font-variant-numeric: tabular-nums;
}
.al-restante-barra {
  height: 4px;
  border-radius: 999px;
  background: var(--ink);
  margin-top: 10px;
  overflow: hidden;
}
.al-restante-barra > div {
  height: 100%;
  background: var(--jade);
  border-radius: 999px;
}
.al-restante-pie {
  margin-top: 7px;
  font-size: 10.5px;
  /* El mockup traia #5E6863, que sobre esta superficie da 2.77:1 y no llega
     al minimo de 4.5:1. Es texto de DINERO en el tamano mas chico de la
     pantalla: se lee o no sirve. --tx-mute da 4.6:1 y mantiene la jerarquia. */
  color: var(--tx-mute);
}
.al-restante-pie .num { font-variant-numeric: tabular-nums; }
/* Aviso de reemplazo (la categoria elegida ya tenia monto). Con su propia
   regla [hidden]: si manana se le agrega un display de autor, `hidden` deja
   de ocultarlo en silencio (paso con .btn-google). */
.al-restante-aviso {
  display: block;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.45;
  color: var(--tx-mute);
}
.al-restante-aviso[hidden] { display: none; }
.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(--warn); }
.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);
}

/* f382: se fueron las reglas .wl-archivo-* junto con la tarjeta que estilaban.
   Nadie mas las usa (verificado por grep en js/ y css/). */

/* 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(--warn); }
.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); }

/* ── Hub tarjeta "Tu mes" (sin presupuesto activo) ── */
.hub-mes-empty {
  text-align: center;
  padding: 24px 12px 16px;
}
.hub-mes-empty-txt {
  font-size: 13px;
  color: var(--tx-mute);
  margin-bottom: 14px;
  line-height: 1.5;
}
.hub-mes-empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(52,200,138,.35);
  border-radius: 9px;
  color: var(--jade);
  font-size: 13px;
  font-weight: 600;
  /* 44px de alto minimo: medido en 37px, bajo el minimo de hit target, y es el
     boton con el que un usuario nuevo arranca todo. */
  padding: 12px 18px;
  min-height: 44px;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s;
}
.hub-mes-empty-cta:active { background: rgba(52,200,138,.1); }

.hub-mes-total {
  font-size: 13px;
  color: var(--tx-mute);
  margin-bottom: 14px;
  line-height: 1.4;
}
.hub-mes-total-monto {
  color: var(--tx-soft);
  font-weight: 600;
}
.hub-mes-cats {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 16px;
}
.hub-mes-cat-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 10px;
}
.hub-mes-cat-nombre {
  font-size: 12.5px;
  color: var(--tx-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-mes-cat-bar-wrap {
  height: 5px;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  overflow: hidden;
}
.hub-mes-cat-bar {
  height: 100%;
  background: var(--jade);
  border-radius: 99px;
  transition: width .35s ease;
}
.hub-mes-cat-monto {
  font-size: 12px;
  color: var(--tx-mute);
  white-space: nowrap;
}
.hub-mes-presup-link {
  display: block;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--tx-mute);
  cursor: pointer;
  padding: 0;
  text-align: left;
  margin-top: 4px;
  transition: color .18s;
}
.hub-mes-presup-link:hover,
.hub-mes-presup-link:active { color: var(--jade); }

/* Presupuesto empty state mas amigable */
.pb-empty-invitante {
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

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

/* Cerrar sesion accesible arriba, junto al perfil (pedido del dueno: estaba
   enterrado al fondo de Mas). Discreto pero visible sin scroll. */
.mas-logout-top {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.mas-logout-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #7E8783;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.mas-logout-top-btn:hover,
.mas-logout-top-btn:active {
  color: #D8714C;
  background: rgba(216, 113, 76, .08);
}

/* ── 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;
}

/* ══════════════════════════════════════════
   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);
}

/* ── Resumen de Movimientos (f211) ── */
.mov-resumen-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.mov-resumen-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  gap: 5px;
  min-width: 0;
}
.mov-resumen-label {
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tx-mute);
  font-family: var(--font-ui);
  white-space: nowrap;
}
.mov-resumen-valor {
  font-family: var(--font-ui);
  font-size: clamp(13px, 3vw, 18px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  text-align: center;
}
.mov-resumen-div {
  width: 1px;
  background: var(--line);
  align-self: stretch;
}

/* ══════════════════════════════════════════
   f219 — Desglose por tipo/categoria en Movimientos y Hub
══════════════════════════════════════════ */

/* Hub — separador de seccion "Por categoria" */
.hub-mes-sep-cats {
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tx-mute);
  margin: 16px 0 8px;
}

/* Hub — bloque de grupos por tipo */
.desglose-grupos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
.desglose-g-row {
  display: grid;
  grid-template-columns: 90px 1fr 32px auto;
  align-items: center;
  gap: 8px;
}
.desglose-g-nombre {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desglose-g-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  overflow: hidden;
}
.desglose-g-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .35s ease;
}
.desglose-g-pct {
  font-size: 11px;
  color: var(--tx-mute);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.desglose-g-monto {
  font-size: 12px;
  color: var(--tx-mute);
  white-space: nowrap;
  text-align: right;
}

/* Movimientos — contenedor del desglose con tabs */
.mov-desglose-wrap {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.mov-desglose-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.mov-desglose-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--tx-mute);
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 10px 8px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.mov-desglose-tab.activo {
  color: var(--jade);
  background: rgba(52,200,138,.06);
}
.mov-desglose-tab:not(.activo):hover {
  color: var(--tx-soft);
}
.mov-desglose-lista {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 14px;
}
.mov-desglose-row {
  display: grid;
  grid-template-columns: 100px 1fr 34px auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.mov-desglose-row:last-child { border-bottom: none; }
.mov-desglose-nombre {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mov-desglose-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  overflow: hidden;
}
.mov-desglose-bar {
  height: 100%;
  background: var(--jade);
  border-radius: 99px;
  transition: width .3s ease;
}
.mov-desglose-pct {
  font-size: 11px;
  color: var(--tx-mute);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mov-desglose-monto {
  font-size: 12px;
  color: var(--tx-mute);
  white-space: nowrap;
  text-align: right;
}
.mov-desglose-vacio {
  font-size: 12px;
  color: var(--tx-mute);
  padding: 14px;
  text-align: center;
}

/* ══════════════════════════════════════════
   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;
  flex-wrap: wrap;   /* para que .pt-prog-acciones baje a su propio renglón completo */
  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);
}
/* Acciones de cada ingreso programado (Ya me lo pagaron / Editar / Cancelar).
   La clase se venía usando en el markup SIN existir en el CSS: con 2 botones
   funcionaba de casualidad, y al sumar el tercero envolvían y "Cancelar" —la
   acción destructiva, en rojo— quedaba sola en su renglón a 390px.
   El padding también levanta el área tocable: son botones que mueven dinero. */
/* Las acciones son hijo directo de .pt-prog-row (no van dentro de .pt-prog-info)
   y ocupan el renglón completo: adentro del info solo tenían 159px y los tres
   botones necesitan 217px, así que "Cancelar" caía sola a la fila de abajo.
   A ancho completo hay 315px útiles y entran holgadas en una línea.
   El gap es UNIFORME a propósito: con 4px verticales, un pulgar que apuntaba a
   "Ya me lo pagaron" (mueve dinero) y erraba por poco caía en "Cancelar", que
   es irreversible. */
.pt-prog-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex-basis: 100%;
  margin-top: 2px;
}
.pt-prog-acciones > button {
  padding: 7px 6px 6px;
  min-height: 32px;
}

/* ══════════════════════════════════════════
   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;
}

/* Wrapper del gráfico de evolución: ancla el tooltip flotante absoluto */
.dash-grafico-wrap {
  position: relative;
}

/* f324. Mobile angosto: el SVG (viewBox fijo 3.5:1) queda demasiado bajo
   para que el tooltip haga flip arriba/abajo del punto sin taparlo (más aún
   si el punto cae en el centro horizontal, sin espacio para escapar de
   costado). Solución de fondo: reservar una franja MUERTA arriba del SVG,
   fuera del área de ploteo, donde el tooltip vive siempre. _dashWireEvolucion
   en app.js detecta este padding-top vía getComputedStyle y posiciona ahí el
   tooltip: cero solape por construcción, sin tocar el viewBox compartido
   con desktop/tablet (que usan el flip vertical, tambien nuevo en f324). */
@media (max-width: 540px) {
  .dash-grafico-wrap--tip {
    padding-top: 90px;
  }
}

/* Crosshair + punto resaltado del gráfico interactivo (hover/tap) */
.dash-crosshair {
  stroke: rgba(111, 227, 176, .38);
  stroke-width: 1;
  stroke-dasharray: 3, 3;
  pointer-events: none;
  display: none;
}
.dash-crosshair.is-on {
  display: inline;
}
/* Halo exterior del punto resaltado: aro jade translúcido que "salta" sobre la línea */
.dash-highlight-ring {
  stroke: rgba(52, 200, 138, .55);
  stroke-width: 1.5;
  fill: rgba(52, 200, 138, .12);
  pointer-events: none;
  display: none;
}
.dash-highlight-ring.is-on {
  display: inline;
}
.dash-highlight {
  stroke: #0B0E0D;
  stroke-width: 2;
  pointer-events: none;
  display: none;
}
.dash-highlight.is-on {
  display: inline;
}

/* Tooltip flotante del gráfico interactivo */
/* top/left son fallback: mostrar(i) en app.js los sobreescribe siempre en línea
   (flip vertical según la posición del punto, para no taparlo con el tooltip). */
.dash-svg-tip {
  position: absolute;
  top: 2px;
  left: 0;
  transform: translateX(-50%);
  background: var(--raised, #1E2426);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  padding: 7px 11px;
  font-family: var(--font-ui, 'Hanken Grotesk', sans-serif);
  font-size: 11.5px;
  color: var(--tx, #ECECE6);
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
  display: none;
}
.dash-svg-tip.is-on {
  display: block;
}

/* 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: 38px;
    height: 38px;
    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; }

  /* El ojito movil de Presupuesto muere cuando aparece el de la topbar, o quedan
     dos botones identicos haciendo lo mismo en la misma pantalla. Mismo patron que
     .deu-mob-header y .inv-mobile-header, que ya se ocultan aca. */
  .pb-priv-mob { display: none; }

  /* ── Topbar de escritorio ─────────────────────── */
  /* f377: el FAB móvil de sync ya no existe (.mob-sync-fab). El botón vive en el
     cluster del header y se oculta con .pg-mob-sync, junto al resto del cluster. */

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

  /* 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: 1.5fr 130px 150px 150px 150px 210px;
    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; }

  /* Ultima columna (acciones) subida de 160px a 210px (f258): con los 3 botones
     Editar/Ajustar/Eliminar no entraban en 160px y la fila se solapaba con la
     celda "Al vencimiento". El nombre (1.5fr, antes 2fr) cede ese espacio;
     tiene ellipsis y sigue legible. Debe coincidir con .cd-dsk-table-header. */
  .cd-dsk-row {
    display: grid;
    grid-template-columns: 1.5fr 130px 150px 150px 150px 210px;
    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; flex-wrap: wrap; 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; }
  .cd-dsk-nota-retencion { font-size: 11px; color: #E0B252; grid-column: 1 / -1; padding-top: 4px; text-align: left; line-height: 1.45; }

  /* ─── 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;
  }
  /* La variante sin header debe re-ganar en desktop: el selector doble (0,2,0)
     le gana al override de arriba y sin esta línea el detalle perdía 4px de
     padding-top en escritorio (gate f392). env() = 0 acá, queda 28px. */
  .fam-wrap.fam-wrap-sinheader { padding-top: calc(28px + env(safe-area-inset-top, 0px)); }

  /* .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;
}
/* f378: sin el título repetido, la fila solo sostiene el botón: va a la derecha. */
.apd-header--solo-accion { justify-content: flex-end; padding-top: 4px; }
.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; }

/* Próximos cobros: tarjeta que SOLO existe en escritorio. */
.hub-dsk-cobros-card { display: none; }

/* Movimientos de hoy: la LISTA (#hub-txns) vive dentro de esta tarjeta, así que
   ocultarla entera en móvil dejaba el celular sin movimientos y sin siquiera el
   texto de "sin movimientos hoy", que también está adentro. Eso fue exactamente
   lo que pasó al matar el título duplicado con un display:none.
   La tarjeta se muestra en móvil SIN su marco ni su header (el header es lo que
   duplicaba el título; en móvil ese rol lo cumple .hub-txns-header-mobile). */
.hub-dsk-txns-card .hub-dsk-card-header { 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; }
  /* En escritorio la tarjeta recupera su header (contador + ojito); el título
     de móvil se va, para que no queden los dos. */
  .hub-dsk-txns-card .hub-dsk-card-header { display: flex; }

  /* En escritorio no hay tab-bar, así que el FAB no tiene nada que lo levante:
     está a 32px del fondo y mide 52px. Sobresale 84px sobre el contenido. */
  :root { --banda-flotante: 96px; }
}

/* ── 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;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.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);
}

/* Sub-nav dentro de una seccion (ej. Analitica: Activacion/Retencion/Engagement/Riesgo) */
.adm-subnav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.adm-subnav-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--tx-mute);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background .13s, border-color .13s, color .13s;
}
.adm-subnav-btn:hover {
  background: var(--raised);
  color: var(--tx-soft);
}
.adm-subnav-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);
}
.dl-link-sideload {
  font-size: .78rem;
  color: var(--tx-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: center;
  margin-top: 2px;
}
.dl-link-sideload:hover {
  color: var(--tx);
}
.dl-note-soon {
  font-size: .78rem;
  color: var(--tx-mute);
  text-align: center;
  margin-top: 2px;
  opacity: .8;
}

/* 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;
}
/* v92: bajo el costo total proyectado, en que se reparte entre interes y cargos.
   Deliberadamente discreto: el numero que manda es el total. */
.deu-proy-sub {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.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; }
/* v97 (f): Liquidar cancela el préstamo entero; con el outline neutro de
   .deu-btn-editar se leía como una edición más. Champagne = acción mayor. */
.deu-btn-liquidar {
  background: rgba(200,169,106,.08);
  border: 1px solid rgba(200,169,106,.45);
  border-radius: var(--r-btn);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #C8A96A;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.deu-btn-liquidar:hover { background: rgba(200,169,106,.14); border-color: #C8A96A; }
.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;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   VERTEX Herramientas — calculadoras financieras client-side (.herr-*)
   ════════════════════════════════════════════════════════════════════════ */
.herr-wrap {
  /* padding-top holgado en mobile: la campana flotante de Novedades (44px,
     arriba a la derecha) no debe montarse sobre la intro. */
  padding: calc(64px + env(safe-area-inset-top, 0px)) var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
  max-width: 880px;
}

.herr-intro {
  font-size: 13px;
  color: var(--tx-mute);
  line-height: 1.5;
  margin-bottom: var(--sp-5);
  max-width: 520px;
}

.herr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.herr-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-card);
  padding: 18px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-family: inherit;
}
.herr-card:hover { border-color: rgba(255,255,255,.16); background: var(--raised); }

.herr-card-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.herr-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.herr-card-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
}

.herr-card-sub {
  font-size: 12.5px;
  color: var(--tx-mute);
  line-height: 1.45;
}

.herr-card-arrow {
  flex: none;
  color: var(--tx-mute);
  font-size: 18px;
  align-self: center;
}

@media (min-width: 640px) {
  .herr-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .herr-wrap { padding: 28px 40px 40px; max-width: 1100px; }
}

/* ── Sheets de calculadora: formulario + resultados + visualizaciones ── */
.herr-sheet-sub {
  font-size: 12.5px;
  color: var(--tx-mute);
  line-height: 1.5;
  margin: -4px 0 16px;
}

.herr-tabs {
  display: flex;
  gap: 6px;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  padding: 5px;
  margin-bottom: 14px;
}
.herr-tab {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--tx-mute);
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  text-align: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.herr-tab-active { background: var(--jade); color: var(--on-jade); }

.herr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.herr-result {
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 4px;
}

.herr-result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.herr-result-row:last-child { border-bottom: none; }

.herr-result-label {
  font-size: 12.5px;
  color: var(--tx-mute);
}

.herr-result-val {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.herr-result-val.pos { color: var(--jade); }
.herr-result-val.neg { color: var(--neg); }

.herr-alert-box {
  background: rgba(224,178,82,.09);
  border: 1px solid rgba(224,178,82,.28);
  border-radius: 14px;
  padding: 16px;
  margin-top: 14px;
}
.herr-alert-box .herr-result-label { color: #C99A4A; }
.herr-alert-box .herr-result-val { color: var(--warn); }
.herr-alert-titulo {
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--warn);
  margin-bottom: 8px;
}

.herr-jade-box {
  background: rgba(52,200,138,.09);
  border: 1px solid rgba(52,200,138,.28);
  border-radius: 14px;
  padding: 16px;
  margin-top: 12px;
}
.herr-jade-box .herr-result-val { color: var(--jade); }
.herr-jade-titulo {
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--jade);
  margin-bottom: 8px;
}

.herr-warn-strong {
  font-size: 13px;
  color: var(--warn);
  line-height: 1.5;
  font-weight: 600;
  margin: 0;
}

/* Barras por año (proyección de ahorro) */
.herr-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.herr-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.herr-bar-anio {
  flex: none;
  width: 48px;
  font-size: 11.5px;
  color: var(--tx-mute);
  font-variant-numeric: tabular-nums;
}
.herr-bar-track {
  flex: 1;
  height: 16px;
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
  display: flex;
}
.herr-bar-seg-aporte { background: rgba(255,255,255,.20); height: 100%; }
.herr-bar-seg-interes { background: var(--jade); height: 100%; }
.herr-bar-val {
  flex: none;
  width: 88px;
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.herr-bar-leyenda {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--tx-mute);
}
.herr-bar-leyenda span { display: flex; align-items: center; gap: 5px; }
.herr-bar-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* Regla 50/30/20 */
.herr-503020-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.07);
  margin-bottom: 10px;
}
.herr-503020-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.herr-503020-body { flex: 1; min-width: 0; }
.herr-503020-titulo { font-size: 13.5px; font-weight: 700; color: var(--tx); }
.herr-503020-desc { font-size: 11.5px; color: var(--tx-mute); margin-top: 2px; line-height: 1.4; }
.herr-503020-monto { flex: none; text-align: right; font-size: 15px; font-weight: 700; color: var(--tx); font-variant-numeric: tabular-nums; }
.herr-503020-pct { flex: none; font-size: 11px; color: var(--tx-mute); }

/* ════════════════════════════════════════════════════════════════════════
   VERTEX Premium — paywall completo (.pw-*) + candado contextual (.pwc-*)
   Fuente de diseno: material/design/portal_v2/paywall_premium.html (aprobado).
   Ambos reusan .nm-overlay/.nm-sheet (con su max-height:92dvh + scroll interno
   ya resuelto) en vez del layout de pagina completa del prototipo standalone.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Paywall completo ── */
.pw-sheet { position: relative; padding-top: 26px; }
.pw-close {
  position: absolute; top: 6px; right: 14px;
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255,255,255,.06); border: none;
  color: var(--tx-mute); font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s;
}
.pw-close:hover { background: rgba(255,255,255,.12); color: var(--tx); }

.pw-hero { text-align: center; padding: 6px 6px 0; }
.pw-apex { width: 34px; height: 28px; margin: 0 auto 14px; display: block; }
.pw-apex path { stroke: var(--champagne); stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pw-eyebrow {
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
  font-weight: 700; color: var(--champagne); margin-bottom: 12px;
}
.pw-titulo {
  font-family: var(--font-display); font-weight: 500; line-height: 1.15;
  color: var(--tx); font-size: clamp(24px, 7vw, 32px);
  letter-spacing: -.01em; margin-bottom: 12px;
}
.pw-titulo em { font-style: italic; color: var(--champagne); }
.pw-sub {
  font-size: 13.5px; line-height: 1.6; color: var(--tx-mute);
  max-width: 40ch; margin: 0 auto;
}
.pw-trial-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 8px 15px 8px 13px;
  background: rgba(200,169,106,.1); border: 1px solid rgba(200,169,106,.32);
  border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--champagne);
}
.pw-trial-pill svg { width: 14px; height: 14px; flex: none; }
.pw-trial-pill svg path, .pw-trial-pill svg circle { stroke: var(--champagne); }

.pw-beneficios { margin-top: 26px; display: flex; flex-direction: column; gap: 2px; }
.pw-bene { display: flex; align-items: flex-start; gap: 13px; padding: 11px 2px; border-bottom: 1px solid rgba(255,255,255,.06); }
.pw-bene:last-child { border-bottom: none; }
.pw-bene-icono {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(200,169,106,.1); border: 1px solid rgba(200,169,106,.25);
  display: flex; align-items: center; justify-content: center;
}
.pw-bene-icono svg { width: 17px; height: 17px; }
.pw-bene-icono svg path, .pw-bene-icono svg circle, .pw-bene-icono svg rect { stroke: var(--champagne); }
.pw-bene-txt { flex: 1; padding-top: 1px; min-width: 0; }
.pw-bene-titulo { font-size: 13.5px; font-weight: 700; color: var(--tx); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pw-bene-desc { font-size: 12px; color: var(--tx-mute); line-height: 1.5; margin-top: 2px; }
.pw-badge-pronto {
  font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800;
  color: var(--warn); background: rgba(224,178,82,.14); border: 1px solid rgba(224,178,82,.3);
  padding: 2px 7px; border-radius: 999px;
}

.pw-planes { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.pw-plan {
  position: relative; display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1.5px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 14px 15px; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.pw-plan:hover { border-color: rgba(255,255,255,.2); }
.pw-plan.activo { border-color: var(--jade); background: rgba(52,200,138,.06); }
.pw-plan-badge {
  position: absolute; top: -9px; right: 14px;
  font-size: 9px; letter-spacing: .06em; text-transform: uppercase; font-weight: 800;
  padding: 3px 9px; border-radius: 999px; background: var(--jade); color: var(--on-jade);
}
.pw-plan-radio {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s;
}
.pw-plan.activo .pw-plan-radio { border-color: var(--jade); }
.pw-plan-radio::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--jade); transform: scale(0); transition: transform .18s cubic-bezier(.22,.9,.3,1);
}
.pw-plan.activo .pw-plan-radio::after { transform: scale(1); }
.pw-plan-info { flex: 1; min-width: 0; }
.pw-plan-nombre { font-size: 14px; font-weight: 700; color: var(--tx); }
.pw-plan-sub { font-size: 11.5px; color: var(--tx-mute); margin-top: 2px; }
.pw-plan-precio { flex: none; text-align: right; }
.pw-plan-precio .monto { font-size: 17px; font-weight: 800; color: var(--tx); }
.pw-plan-precio .periodo { font-size: 11px; color: var(--tx-mute); font-weight: 600; }

.pw-cta {
  width: 100%; margin-top: 22px; padding: 16px 20px; border-radius: 12px; border: none;
  background: var(--jade); color: var(--on-jade); font-size: 15.5px; font-weight: 800;
  letter-spacing: .01em; font-family: inherit; cursor: pointer; transition: filter .18s;
}
.pw-cta:hover { filter: brightness(1.08); }
.pw-cta:disabled { opacity: .6; cursor: not-allowed; }
.pw-legal { margin-top: 13px; font-size: 11px; line-height: 1.6; color: var(--tx-mute); text-align: center; }
.pw-restaurar {
  display: block; margin: 12px auto 0; background: none; border: none;
  color: var(--tx-mute); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(126,135,131,.4); text-underline-offset: 3px;
}
.pw-restaurar:hover { color: var(--tx); }

@media (min-width: 720px) {
  .pw-sheet { max-width: 560px; }
}

/* ── Candado contextual (bottom sheet compacto) ── */
.pwc-sheet { padding-top: 6px; }
.pwc-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pwc-icono {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  background: rgba(200,169,106,.12); border: 1px solid rgba(200,169,106,.35);
  display: flex; align-items: center; justify-content: center;
}
.pwc-icono svg { width: 21px; height: 21px; }
.pwc-icono svg path, .pwc-icono svg circle, .pwc-icono svg rect { stroke: var(--champagne); }
.pwc-close {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: rgba(255,255,255,.06); border: none; color: var(--tx-mute);
  font-size: 17px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
.pwc-close:hover { background: rgba(255,255,255,.12); }
.pwc-ojal { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--champagne); margin-top: 13px; }
.pwc-titulo { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--tx); line-height: 1.2; margin-top: 6px; }
.pwc-bullets { margin-top: 15px; display: flex; flex-direction: column; gap: 9px; }
.pwc-bullet { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--tx-soft); line-height: 1.5; }
.pwc-bullet svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.pwc-bullet svg path { stroke: var(--jade); }
.pwc-precio {
  margin-top: 17px; padding: 11px 14px;
  background: rgba(52,200,138,.06); border: 1px solid rgba(52,200,138,.2);
  border-radius: 11px; display: flex; align-items: baseline; justify-content: space-between;
}
.pwc-precio .k { font-size: 12px; color: var(--tx-mute); }
.pwc-precio .v { font-size: 14.5px; font-weight: 800; color: var(--jade); }
.pwc-btn-primario {
  width: 100%; margin-top: 17px; padding: 14px 20px; border-radius: 12px; border: none;
  background: var(--jade); color: var(--on-jade); font-size: 14.5px; font-weight: 800;
  font-family: inherit; cursor: pointer; transition: filter .18s;
}
.pwc-btn-primario:hover { filter: brightness(1.08); }
.pwc-btn-secundario {
  width: 100%; margin-top: 6px; padding: 12px 20px; border-radius: 12px;
  background: none; border: none; color: var(--tx-mute); font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.pwc-btn-secundario:hover { color: var(--tx); }

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

/* ── Evolucion de la cartera (grafico) ───────────────────────────────
   Caso a4a4487e (Jorge): linea de tiempo del valor, con el costo invertido
   por debajo y las fechas de compra marcadas en el eje. */
.inv-gr-card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin-bottom: 16px;
}
.inv-gr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.inv-gr-titulo {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tx-mute);
  margin-bottom: 4px;
}
.inv-gr-valor-actual {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.inv-gr-sub {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 12.5px;
  font-family: var(--font-ui);
}
.inv-gr-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-gr-gan { font-variant-numeric: tabular-nums; }
.inv-gr-pct.pos, .inv-gr-gan.pos { color: var(--pos); }
.inv-gr-pct.neg, .inv-gr-gan.neg { color: var(--neg); }
.inv-gr-periodo-lbl { color: var(--tx-mute); font-size: 11.5px; }

.inv-gr-tabs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.inv-gr-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--tx-mute);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 7px;
  cursor: pointer;
  min-height: 30px;
}
.inv-gr-tab:hover { color: var(--tx); background: rgba(255,255,255,.04); }
.inv-gr-tab.active {
  color: var(--jade);
  background: rgba(52,200,138,.12);
  border-color: rgba(52,200,138,.28);
}

.inv-gr-plot {
  position: relative;
  height: 170px;
  touch-action: pan-y;   /* el recorrido horizontal no debe secuestrar el scroll */
  cursor: crosshair;
}
.inv-gr-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.inv-gr-valor {
  fill: none;
  stroke: var(--jade);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;   /* el viewBox se estira; el trazo no */
}
.inv-gr-valor.neg { stroke: var(--neg); }
.inv-gr-costo {
  fill: none;
  stroke: var(--tx-mute);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
  opacity: .7;
  vector-effect: non-scaling-stroke;
}
.inv-gr-marca { fill: var(--champagne); }
.inv-gr-marca.neg { fill: var(--warn); }
.inv-gr-cursor {
  stroke: var(--tx-mute);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}
.inv-gr-punto { fill: var(--jade); stroke: var(--raised); stroke-width: 2; }
.inv-gr-tip {
  position: absolute;
  top: -2px;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--tx);
  font-family: var(--font-ui);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}
.inv-gr-eje {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--tx-mute);
  margin-top: 2px;
}
.inv-gr-leyenda {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--tx-mute);
}
.inv-gr-lg { display: inline-flex; align-items: center; gap: 6px; }
.inv-gr-lg i { width: 12px; height: 2px; border-radius: 2px; display: inline-block; }
.inv-gr-lg i.lg-valor { background: var(--jade); }
.inv-gr-lg i.lg-costo {
  background: transparent;
  border-top: 2px dashed var(--tx-mute);
  height: 0;
}
.inv-gr-lg i.lg-marca {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--champagne);
}
.inv-gr-vacio, .inv-gr-aviso {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--tx-mute);
  line-height: 1.5;
}
.inv-gr-aviso {
  margin-top: 8px;
  color: var(--warn);
  font-size: 11.5px;
}
@media (max-width: 560px) {
  .inv-gr-head { gap: 8px; }
  .inv-gr-tabs { width: 100%; justify-content: space-between; }
  .inv-gr-valor-actual { font-size: 1.45rem; }
  .inv-gr-plot { height: 150px; }
}
.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;
}
.inv-lote-acciones {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.inv-lote-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--tx-mute);
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 7px 12px;
  min-height: 34px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.inv-lote-btn:hover { color: var(--tx); border-color: rgba(255,255,255,.28); }
.inv-lote-btn-elim {
  border-color: rgba(216,113,76,.22);
  color: #D8714C;
}
.inv-lote-btn-elim:hover { background: rgba(216,113,76,.08); }

/* ─────────────────────────────────────────
   .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;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cso-card:hover { border-color: rgba(52,200,138,.32); }
.cso-card:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}

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

/* Chip "Responder" en la fila superior de la tarjeta cuando el caso quedo
   resuelto y todavia falta la confirmacion del usuario (el prompt en si
   ahora vive DENTRO del hilo, ver .hilo-cierre). */
.cso-badge-accion {
  font-size: 11px;
  font-weight: 700;
  color: var(--warn);
  background: rgba(224, 178, 82, .12);
  border: 1px solid rgba(224, 178, 82, .4);
  border-radius: 5px;
  padding: 2px 7px;
}

/* Pie visual, no interactivo, que insinua que la tarjeta abre el hilo */
.cso-abrir-hint {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--jade-light);
  pointer-events: none;
  align-self: center;
}

/* Botones de confirmacion "se resolvio?" — reusados dentro de .hilo-cierre */
.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;
}

/* ── cso-atn-* — panel admin: bandeja "Necesitan respuesta" (Soporte/Casos).
   Casos donde el usuario hablo ultimo en el hilo y sigue sin respuesta del
   equipo (contar_casos_atencion / casos_necesitan_atencion). Urgencia via
   #D8714C (mismo tono que usan _estadoBadge/_respuestaBadge para "reabierto"
   / "dijo que no" en este panel, no un color nuevo). ── */
.cso-atn-card {
  border-color: rgba(216, 113, 76, .3);
  background: rgba(216, 113, 76, .05);
  margin-bottom: 16px;
}
.cso-atn-titulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #D8714C;
  margin-bottom: 10px;
}
.cso-atn-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.cso-atn-row:last-of-type { border-bottom: none; }
.cso-atn-main { flex: 1; min-width: 0; }
.cso-atn-asunto {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.4;
}
.cso-atn-meta {
  font-size: 11px;
  color: var(--tx-mute);
  margin-top: 2px;
}
.cso-atn-extracto {
  font-size: 12px;
  color: var(--tx-soft);
  margin-top: 5px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cso-atn-ver {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  background: rgba(216, 113, 76, .12);
  border: 1px solid rgba(216, 113, 76, .35);
  color: #D8714C;
  cursor: pointer;
  font-family: inherit;
}
.cso-atn-ver:hover { background: rgba(216, 113, 76, .2); }

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

/* ── Tarjeta de credito: chips de disponible / limite / corte / pago ── */
.pt-tc-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.pt-tc-chip {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  line-height: 1.5;
}
.pt-tc-disp {
  background: rgba(52,200,138,.12);
  color: var(--pos);
}
.pt-tc-lim {
  background: rgba(255,255,255,.06);
  color: var(--tx-mute);
}
.pt-tc-fecha {
  background: rgba(255,255,255,.04);
  color: var(--tx-mute);
  font-weight: 500;
}
/* v90/04 — Desglose de la proxima cuota en el detalle de la deuda.
   Es lo que hace visible a donde va cada parte de lo que pagas: sin esto el
   usuario veia el interes y asumia que todo el resto era capital. */
.deu-cargos-desglose {
  margin-top: 14px;
  padding: 12px;
  background: rgba(200,169,106,.06);
  border: 1px solid rgba(200,169,106,.16);
  border-radius: 10px;
}
.deu-cargos-desglose-tit {
  font-size: 11px;
  font-weight: 700;
  color: var(--champagne);
  margin-bottom: 8px;
}
.deu-cargos-linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  color: var(--tx-mute);
  line-height: 1.8;
}
.deu-cargos-linea .num { color: var(--tx-soft); font-variant-numeric: tabular-nums; }
.deu-cargos-total {
  border-top: 1px solid rgba(200,169,106,.2);
  margin-top: 5px;
  padding-top: 5px;
  font-weight: 700;
}
.deu-cargos-total .num { color: var(--champagne); }

/* v90 — Cargos de la cuota en el alta/edicion de una deuda (FECI, seguros,
   comisiones). Agrupados en una caja para que se lean como un bloque opcional
   y no como dos campos sueltos mas. */
.deu-cargos-box {
  margin: 14px 0 4px;
  padding: 12px;
  background: rgba(200,169,106,.05);
  border: 1px solid rgba(200,169,106,.15);
  border-radius: 10px;
}
.deu-cargos-tit {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--champagne);
  margin-bottom: 8px;
  letter-spacing: .02em;
}
.deu-cargos-box .nm-label { margin-top: 8px; }
.deu-cargos-nota {
  margin-top: 9px;
  font-size: 10.5px;
  color: var(--tx-mute);
  line-height: 1.5;
}

/* v88/05 — Interés devengado y no acreditado de un certificado retirable.
   Es el numero que hace que la app cuadre con el saldo que muestra el banco. */
.cd-devengado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(200,169,106,.07);
  border: 1px solid rgba(200,169,106,.16);
  border-radius: 9px;
}
.cd-devengado-lbl {
  font-size: 11px;
  color: var(--tx-mute);
  font-weight: 600;
}
.cd-devengado-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--champagne);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.cd-devengado-nota {
  flex-basis: 100%;
  font-size: 10.5px;
  color: var(--tx-mute);
  line-height: 1.45;
}

/* v88/02 — Desglose dentro del modal "Ajustar saldo" de una tarjeta con cuotas.
   Sirve para que el usuario vea que el total del banco NO es lo que va en el campo. */
.pt-aj-fin {
  background: rgba(200,169,106,.07);
  border: 1px solid rgba(200,169,106,.18);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.pt-aj-fin-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  color: var(--tx-mute);
  line-height: 1.7;
}
.pt-aj-fin-fila .num { font-variant-numeric: tabular-nums; color: var(--tx-soft); }
.pt-aj-fin-total {
  border-top: 1px solid rgba(200,169,106,.2);
  margin-top: 5px;
  padding-top: 5px;
  font-weight: 700;
}
.pt-aj-fin-total .num { color: var(--champagne); }
.pt-aj-fin-nota {
  margin-top: 8px;
  font-size: 11px;
  color: var(--champagne);
  line-height: 1.5;
}

/* v87/02 — Financiamientos que viven DENTRO de la tarjeta (extrafinanciamientos).
   El saldo grande de la tarjeta es el del periodo; esta linea muestra lo que
   falta en cuotas y el total real con el banco. */
.pt-tc-fin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.5;
}
.pt-tc-fin-lbl {
  color: var(--tx-mute);
  font-weight: 500;
}
.pt-tc-fin-val {
  color: var(--champagne);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pt-tc-fin-sep {
  color: var(--line);
}
.pt-tc-fin-detalle {
  margin-top: 2px;
  font-size: 10px;
  color: var(--tx-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pt-tc-cfg-hint {
  display: inline-block;
  margin-top: 2px;
  /* v111: font-size y padding subidos. Antes media 14px de alto, muy por
     debajo de cualquier area tocable razonable, y con v111 este boton pasa
     a ser el CTA que desbloquea los avisos de vencimiento de tarjeta: es lo
     que hay que acertar con el pulgar, no un detalle decorativo. */
  font-size: 11.5px;
  font-weight: 600;
  color: var(--champagne);
  background: none;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  font-family: var(--font-ui);
  opacity: .75;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .12s;
}
.pt-tc-cfg-hint:hover { opacity: 1; }

/* ── Modal cuotas de tarjeta (mCuotasTarjeta) ── */
.cc-info-nota {
  font-size: 11.5px;
  color: var(--tx-mute);
  line-height: 1.5;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(58,67,71,.4);
  margin-bottom: 16px;
}
.cc-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 55vh;
}
.cc-plan-card {
  background: var(--surface);
  border: 1px solid rgba(58,67,71,.5);
  border-radius: 12px;
  padding: 14px 16px;
}
.cc-plan-dim {
  opacity: .5;
}
.cc-plan-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.cc-plan-desc {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx-soft);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-plan-cuota-lbl {
  font-size: 13px;
  font-weight: 700;
  color: var(--pos);
  flex: none;
}
.cc-plan-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--tx-mute);
  margin-bottom: 10px;
}
.cc-plan-badge-cerrada {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  color: var(--tx-mute);
}
.cc-plan-progreso-wrap {
  height: 4px;
  background: rgba(255,255,255,.07);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 7px;
}
.cc-plan-progreso-bar {
  height: 100%;
  background: var(--jade);
  border-radius: 2px;
  transition: width .3s ease;
}
.cc-plan-progreso-txt {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--tx-mute);
}
.cc-plan-progreso-txt strong {
  color: var(--tx-soft);
}
.cc-plan-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(58,67,71,.35);
}
.cc-btn {
  background: none;
  border: none;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  padding: 2px 0;
  transition: opacity .12s;
}
.cc-btn:hover { opacity: .75; }
.cc-btn-pago    { color: var(--jade); }
.cc-btn-editar  { color: var(--tx-mute); }
.cc-btn-eliminar{ color: var(--neg); }
.cc-sep-cerradas {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-mute);
  padding: 8px 0 2px;
}
/* v92: las deudas que se pagan con la tarjeta, dentro del modal de Cuotas.
   Antes este modal solo miraba compra_cuotas y dejaba invisible lo que de
   verdad pesa sobre la tarjeta. */
.cc-grupo-tit {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-mute);
  padding: 10px 0 6px;
}
.cc-deuda-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.cc-deuda-nom {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx);
}
.cc-deuda-acr {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-top: 2px;
}
.cc-deuda-montos {
  text-align: right;
  flex-shrink: 0;
}
.cc-deuda-saldo {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--neg);
  font-variant-numeric: tabular-nums;
}
.cc-deuda-cuota {
  font-size: 11.5px;
  color: var(--tx-mute);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.cc-ver-deudas {
  width: 100%;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  color: var(--champagne);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 4px;
}
.cc-ver-deudas:hover { border-color: var(--champagne); }
.cc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  text-align: center;
}
.cc-cuota-preview {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--jade);
  min-height: 22px;
  margin-bottom: 4px;
  transition: opacity .2s;
}

/* ── Inbox: campana de novedades (f200; re-arquitecturada f263) ──
   Antes era un FAB position:fixed (right:68px adivinado) que flotaba ENCIMA
   del contenido y se cruzaba con el avatar del Hub y el divisor de Hogar
   (prototipo aprobado: material/design/portal_v2/shell_topbar_v2.html).
   Ahora es una caja de flujo (hija del row del header, ver .pg-mobile-actions
   y .hub-hoy-actions): mismo tamano/forma (40x40, radio 12, cuadrado-redondeado;
   el avatar es la unica excepcion circular), pero NUNCA se superpone al
   contenido ni requiere offsets adivinados por pantalla. */
.vx-inbox-fab {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(52,200,138,.25);
  background: var(--surface);
  color: var(--tx-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  padding: 0;
  position: relative; /* f267: ancla del .inb-badge (antes se anclaba al ancestro posicionado) */
  flex: none;
}
.vx-inbox-fab:active { background: var(--raised); }
@media (min-width: 1024px) {
  .vx-inbox-fab { display: none; }
}
/* ── Barra móvil unificada del shell (f267, prototipo shell_topbar_v2.html) ──
   Izquierda: título/crumb opcional de la pantalla. Derecha: cluster de acciones
   [campana][avatar] EN FLUJO, mismo tamaño (40x40) y posición en toda ruta.
   El padding con safe-area vive UNA sola vez acá, no por control. */
.pg-mob-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* f269: MISMA fórmula de altura que .hub-hoy-header — el cluster cae al mismo
     Y en Hoy/Wealth/Hogar/Más (feedback de Darío: quedaba más arriba que el Hub). */
  padding: max(28px, calc(var(--sp-3) + env(safe-area-inset-top, 0px))) var(--sp-5) 6px;
}
.pg-mob-left { min-width: 0; }
/* f378: el crumb como botón de volver. Reemplaza el "‹" suelto que Cobros,
   Novedades, Suscripciones, Ingresos y Apartados dibujaban pegado al borde
   izquierdo (fuera del margen) con el título centrado al lado. Acá el destino
   va escrito, así que además de alinearse dice A DÓNDE vuelve. */
.pg-mob-crumb-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  display: block;
  text-align: left;
}
.pg-mob-crumb-btn:active { opacity: .6; }
.pg-mob-crumb {
  font-size: 11px;
  color: var(--tx-mute);
  letter-spacing: .03em;
}
.pg-mob-titulo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--tx);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* f378: títulos de más de 12 caracteres bajan de cuerpo para no terminar cortados
   por el cluster (caso real: "Suscripciones" salía "Suscripc..."). */
.pg-mob-titulo--largo { font-size: 1.08rem; }
/* El botón nuevo del cuerpo de Suscripciones es el reemplazo del "+" del cluster:
   en escritorio esa acción ya vive en la topbar, así que acá sobra. */
@media (min-width: 1024px) {
  .sus-btn-nuevo-mob { display: none !important; }
}
/* Cluster de acciones (derecha). Vive dentro de .pg-mob-bar; se mantiene la clase
   para los shells que la usan directo. Sin padding propio: lo pone la barra. */
.pg-mobile-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
}
/* Avatar del cluster: única excepción de forma (círculo = identidad, no acción).
   Siempre el último, más cerca del borde derecho. */
.vxa-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34C88A, #1C7E57);
  border: none;
  color: #08110C;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  padding: 0;
}
@media (min-width: 1024px) {
  .pg-mob-bar, .pg-mobile-actions { display: none; }
}

/* f377: las pantallas con encabezado propio (Patrimonio, Dashboard, Detalle del plan)
   reservaban ellas mismas la safe-area superior, porque antes NO tenían la barra del
   cluster arriba (pasaban sinCampanaMobile y el sync les llegaba por el FAB global).
   Ahora que la barra las precede, esa reserva quedaría duplicada: la barra ya la puso.
   Mismo criterio que .fam-wrap en f263. Solo aplica cuando la barra está presente. */
.pg-mob-bar + .pt-wrap .pt-header,
.pg-mob-bar + .dash-wrap .dash-header {
  padding-top: 4px;
}
.pg-mob-bar + .pb-wrap {
  padding-top: var(--sp-3);
}

/* Acción propia de la pantalla dentro del cluster (f378) — el "+" de Suscripciones,
   el ojito de Ingresos programados. Antes vivían en una segunda fila (.wl-header)
   que existía casi solo para sostenerlos y se llevaba alto de la pantalla. Outline,
   nunca jade sólido: el relleno es de Vex y del pill, que son las acciones fuertes. */
.pg-mob-accion {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--tx-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex: none;
  font-family: inherit;
  font-size: 19px;
  line-height: 1;
  transition: background .15s, border-color .15s, transform .1s;
}
.pg-mob-accion:active { background: var(--raised); transform: scale(.93); }
@media (min-width: 1024px) {
  .pg-mob-accion { display: none; }
}

/* Vex en el cluster (f377) — el ápex de VERTEX en jade sólido. Es el ÚNICO relleno
   permanente de la fila, y esa es toda la jerarquía que necesita: al lado de la
   campana y el sincronizar (outline) se distingue sin ser más grande. Mismo símbolo
   que su panel y que su imagen de Telegram; por eso "Hoy" pasó al reloj (ver
   _ICON_HOY): dos cosas distintas no pueden compartir el símbolo de la marca. */
.pg-mob-vex {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #34C88A;
  color: #08110C;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex: none;
  box-shadow: 0 4px 14px rgba(52,200,138,.28);
  transition: filter .15s, transform .1s;
}
.pg-mob-vex:active { filter: brightness(1.08); transform: scale(.93); }
@media (min-width: 1024px) {
  .pg-mob-vex { display: none; }
}
/* En móvil el FAB flotante de Vex desaparece: su lugar es el cluster. En escritorio
   sigue como estaba (abajo a la derecha), donde no compite con ningún monto. */
@media (max-width: 1023px) {
  .vx-vex-fab { display: none !important; }
}

/* Pill "Actualizar" (f377) — primero del cluster, jade sólido porque es la única
   acción del header que pide algo del usuario. Hasta f376 era position:fixed sobre
   el body: no se movía al scrollear, así que el texto que tapaba no había forma de
   leerlo (caso real: "Se debitarán $ ... USD de tu" y ahí moría). Va solo con ícono:
   con la palabra "Actualizar" la fila llegaba a 247px de 384 y partía la fecha del
   Hub en dos líneas. El aria-label y el title conservan el texto completo. */
/* f381: champagne, no jade. Vex tambien es un bloque relleno y estaban pegados: dos
   jades seguidos se leian como una sola pieza. El champagne (#C8A96A, el color que
   la marca reserva para lo destacado) separa de un vistazo "esto es tuyo de todos
   los dias" (Vex) de "aparecio algo nuevo" (update), sin agrandar nada. */
.vx-update-pill {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #C8A96A;
  color: #08110C;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex: none;
  box-shadow: 0 4px 14px rgba(200,169,106,.32);
  transition: filter .15s, transform .1s;
}
.vx-update-pill:active { filter: brightness(1.08); transform: scale(.93); }
/* En la topbar de escritorio el cluster móvil está oculto: el pill se muestra ahí
   para que la tablet en horizontal (1024px, layout escritorio) no quede sin aviso. */
.vx-update-pill-dsk { width: 34px; height: 34px; border-radius: 10px; }
@media (min-width: 1024px) {
  .vx-update-pill:not(.vx-update-pill-dsk) { display: none; }
}
@media (max-width: 1023px) {
  .vx-update-pill-dsk { display: none; }
}
.inb-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--jade);
  color: #08110C;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
}
.mas-item .inb-badge {
  position: static;
  margin-left: auto;
  margin-right: 6px;
  align-self: center;
}
.dsk-topbar-bell {
  position: relative;
  /* 38/9 para igualar al ojo y al sync del mismo topbar (antes 32/8, descuadrada). */
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: none;
  background: none;
  color: var(--tx-mute);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s;
  padding: 0;
  flex-shrink: 0;
}
.dsk-topbar-bell:hover { background: rgba(255,255,255,.06); color: var(--tx-soft); }
@media (min-width: 1024px) {
  .dsk-topbar-bell { display: flex; }
}
.inb-wrap {
  padding: 0 20px 40px;
  max-width: 680px;
}
@media (min-width: 1024px) {
  .inb-wrap { padding: 0 40px 40px; }
}
.inb-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 16px;
}
.inb-count {
  font-size: 12px;
  color: var(--tx-mute);
  font-family: var(--font-ui);
}
.inb-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inb-card {
  background: var(--surface);
  border: 1px solid rgba(58,67,71,.5);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inb-card-unread {
  border-color: rgba(52,200,138,.25);
  background: rgba(52,200,138,.04);
}
.inb-card-fijado {
  border-color: rgba(200,169,106,.3);
}
.inb-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inb-chip {
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  letter-spacing: .04em;
  border-radius: 5px;
  padding: 2px 7px;
}
.inb-chip-novedad  { color: #34C88A; background: rgba(52,200,138,.12); border: 1px solid rgba(52,200,138,.3); }
.inb-chip-aviso    { color: #C8A96A; background: rgba(200,169,106,.1); border: 1px solid rgba(200,169,106,.3); }
.inb-chip-mant     { color: #E0B252; background: rgba(224,178,82,.1);  border: 1px solid rgba(224,178,82,.3); }
/* v111: avisos del propio dinero (tarjeta, suscripciones, gastos, canjes).
   Info y NO champagne a proposito: el champagne es de los anuncios del
   equipo y del lenguaje premium, asi que un cobro de Netflix se veia igual
   que un anuncio legal de VERTEX. Ademas separa de un vistazo "esto es tuyo"
   de "esto lo publico VERTEX". */
.inb-chip-notif    { color: #6FA8E3; background: rgba(111,168,227,.1); border: 1px solid rgba(111,168,227,.3); }
.inb-pin {
  font-size: 10.5px;
  color: var(--champagne);
  font-family: var(--font-ui);
  font-weight: 600;
}
.inb-fecha {
  font-size: 11.5px;
  color: var(--tx-mute);
  font-family: var(--font-ui);
}
.inb-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-soft);
  font-family: var(--font-ui);
  line-height: 1.3;
}
.inb-cuerpo {
  font-size: 13.5px;
  color: var(--tx-mute);
  font-family: var(--font-ui);
  line-height: 1.55;
  white-space: pre-wrap;
  /* v112: los avisos llevan dinero en el cuerpo (montos de cobros, gastos,
     presupuesto), asi que la columna de cifras tiene que alinear como en el
     resto de la app. Regla del proyecto para todo lo que sea dinero. */
  font-variant-numeric: tabular-nums;
}
.inb-cta-row { margin-top: 4px; }
.inb-cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--jade);
  font-family: var(--font-ui);
  background: none;
  border: 1px solid rgba(52,200,138,.4);
  border-radius: 8px;
  /* v112: subido de 6px a 10px. Antes habia 0 o 1 boton "Ver" en toda la
     campana; ahora hay uno por aviso y es el gesto principal de la pantalla.
     A 31px de alto se falla seguido con el pulgar, y el target primario de
     la app es movil. */
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s;
}
.inb-cta:hover { background: rgba(52,200,138,.08); }
.inb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 16px 40px;
  text-align: center;
  gap: 12px;
}
.inb-empty-titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--tx-soft);
  font-family: var(--font-ui);
}
.inb-empty-sub {
  font-size: 13px;
  color: var(--tx-mute);
  font-family: var(--font-ui);
  max-width: 280px;
  line-height: 1.5;
}
/* admin anuncios */
.inb-adm-lista { padding: 0; }
.inb-adm-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(58,67,71,.35);
}
.inb-adm-row:last-child { border-bottom: none; }
.inb-adm-info { flex: 1; min-width: 0; }
.inb-adm-titulo {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tx-soft);
  font-family: var(--font-ui);
  margin-bottom: 5px;
}
.inb-adm-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inb-adm-lecturas {
  font-size: 11.5px;
  color: var(--tx-mute);
  font-family: var(--font-ui);
}
.inb-adm-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}
/* inbox: bloque de seguimiento de caso */
.inb-card-seg {
  border-color: rgba(224,178,82,.35);
  background: rgba(224,178,82,.04);
}
.inb-seg-row {
  border-top: 1px solid rgba(224,178,82,.2);
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inb-seg-prompt {
  font-size: 13px;
  color: var(--tx-mute);
  margin: 0;
  line-height: 1.5;
  font-family: var(--font-ui);
}
.inb-seg-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.inb-seg-si,
.inb-seg-no {
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  transition: opacity .12s;
  border: none;
}
.inb-seg-si {
  background: #34C88A;
  color: #08110C;
}
.inb-seg-no {
  background: rgba(216,113,76,.12);
  border: 1px solid rgba(216,113,76,.35);
  color: #D8714C;
}
.inb-seg-si:disabled,
.inb-seg-no:disabled { opacity: .5; cursor: not-allowed; }

/* ══════════════════════════════════════════
   f210 — Sugerencia de presupuesto (mSugerirPresupuesto)
══════════════════════════════════════════ */

/* Hub: dos opciones bajo "Tu mes" */
.hub-mes-presup-acciones {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.hub-mes-presup-ai {
  font-weight: 600;
  color: var(--jade) !important;
  font-size: 12.5px !important;
}

/* rPresupuesto — empty state con CTA de sugerencia */
.pb-sugerir-wrap {
  padding: 12px 0 8px;
}
.pb-sugerir-cta {
  background: linear-gradient(135deg, rgba(52,200,138,.07) 0%, rgba(30,36,38,.0) 100%);
  border: 1px solid rgba(52,200,138,.18);
  border-radius: 14px;
  padding: 28px 20px 20px;
  text-align: center;
  max-width: 440px;
  margin: 0 auto;
}
.pb-sugerir-icono {
  font-size: 22px;
  color: var(--jade);
  margin-bottom: 10px;
  line-height: 1;
}
.pb-sugerir-titulo {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 6px;
}
.pb-sugerir-sub {
  font-size: 13px;
  color: var(--tx-mute);
  line-height: 1.55;
  margin-bottom: 18px;
}
.pb-btn-sugerir {
  display: block;
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  background: var(--jade);
  border: none;
  color: #08110C;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: center;
  transition: opacity .15s;
  margin-bottom: 10px;
}
.pb-btn-sugerir:hover { opacity: .88; }
.pb-empty-manual-link {
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--tx-mute);
  cursor: pointer;
  padding: 4px 0;
  transition: color .15s;
}
.pb-empty-manual-link:hover { color: var(--jade); }

/* Modal sg — loading */
.sg-loading {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-loading::after {
  content: '';
  width: 28px;
  height: 28px;
  border: 2.5px solid rgba(52,200,138,.2);
  border-top-color: var(--jade);
  border-radius: 50%;
  animation: sg-spin .75s linear infinite;
}
@keyframes sg-spin { to { transform: rotate(360deg); } }

/* Modal sg — sin datos suficientes */
.sg-no-data {
  padding: 24px 20px 28px;
  text-align: center;
}
.sg-no-data-icono {
  margin-bottom: 14px;
  color: var(--tx-mute);
}
.sg-no-data-msg {
  font-size: 14px;
  color: var(--tx-mute);
  line-height: 1.6;
  margin: 0 0 20px;
}

/* Modal sg — contenido con datos */
.sg-content {
  padding: 0 20px 24px;
  overflow-y: auto;
  max-height: 72vh;
}
.sg-sub {
  font-size: 13px;
  color: var(--tx-mute);
  margin: 2px 0 16px;
  text-align: center;
}
.sg-total-block {
  background: rgba(52,200,138,.08);
  border: 1px solid rgba(52,200,138,.16);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-bottom: 20px;
}
.sg-total-label {
  font-size: 11.5px;
  color: var(--tx-mute);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.sg-total-monto {
  font-size: 28px;
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.sg-cats-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.sg-cat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 3px 8px;
  align-items: center;
}
.sg-cat-sin-id { opacity: .5; }
.sg-cat-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  grid-column: 1;
}
.sg-cat-nombre {
  font-size: 13px;
  color: var(--tx);
  font-weight: 500;
}
.sg-sin-cat-nota {
  font-size: 11px;
  color: var(--tx-mute);
  font-weight: 400;
}
.sg-grupo-chip {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}
.sg-cat-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  grid-column: 1;
  overflow: hidden;
}
.sg-cat-bar {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}
.sg-cat-monto {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  text-align: right;
  grid-column: 2;
  grid-row: 1 / 3;
  white-space: nowrap;
}
/* Distribucion 50/30/20 */
.sg-distrib {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
}
.sg-distrib-titulo {
  font-size: 11px;
  color: var(--tx-mute);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.sg-distrib-barras {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  gap: 1px;
  margin-bottom: 8px;
}
.sg-distrib-barra {
  border-radius: 3px;
  transition: width .4s ease;
}
.sg-distrib-leyenda {
  display: flex;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 600;
  flex-wrap: wrap;
}
/* Acciones del modal */
.sg-acciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.sg-btn-crear {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  background: var(--jade);
  border: none;
  color: #08110C;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: center;
  transition: opacity .15s;
}
.sg-btn-crear:hover:not(:disabled)  { opacity: .88; }
.sg-btn-crear:disabled { opacity: .45; cursor: not-allowed; }
.sg-btn-ajustar {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--tx-mute);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: center;
  transition: background .15s, color .15s;
}
.sg-btn-ajustar:hover { background: rgba(255,255,255,.1); color: var(--tx); }

/* ── Adjuntos de imagenes a casos (.adj-*) ───────────────────────────────── */

/* Zona de carga (drag-drop + browse) */
.adj-zone {
  border: 1.5px dashed rgba(255, 255, 255, .18);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  transition: border-color .15s, background .15s;
}

.adj-zone.adj-over {
  border-color: var(--jade);
  background: rgba(52, 200, 138, .05);
}

.adj-zone-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.adj-zone-btn {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(52, 200, 138, .35);
  background: rgba(52, 200, 138, .1);
  color: var(--jade);
  cursor: pointer;
  transition: opacity .15s;
}

.adj-zone-btn:hover { opacity: .8; }
.adj-zone-btn:disabled { opacity: .4; cursor: not-allowed; }

.adj-zone-hint {
  font-size: 11px;
  color: var(--tx-mute);
}

/* Previews de imagenes en cola */
.adj-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.adj-preview-item {
  position: relative;
  width: 64px;
}

.adj-preview-item img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .1);
  display: block;
}

.adj-preview-rm {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(216, 113, 76, .9);
  color: #fff;
  border: none;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--font-ui);
  transition: background .1s;
}

.adj-preview-rm:hover { background: #D8714C; }

.adj-preview-size {
  font-size: 9px;
  color: var(--tx-mute);
  text-align: center;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

/* Informacion en modal de adjuntar a caso existente */
.adj-modal-info {
  font-size: 12.5px;
  color: var(--tx-mute);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Galeria de thumbnails (vista de casos + panel admin) */
.adj-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.adj-thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  padding: 0;
  transition: opacity .15s;
  flex-shrink: 0;
}

.adj-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.adj-thumb:hover { opacity: .78; }

.adj-thumb-err {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tx-mute);
  font-size: 18px;
  cursor: default;
}

.adj-cargando,
.adj-empty {
  font-size: 12px;
  color: var(--tx-mute);
  padding: 4px 0;
}

.adj-error {
  font-size: 12px;
  color: var(--neg);
  padding: 4px 0;
}

/* Footer de las tarjetas de casos (botones Imagenes / Adjuntar) */
.cso-card-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

/* ══════════════════════════════════════════
   Hilo de caso — conversacion two-way (mHiloCaso, js/inbox.js)
   Overlay a pantalla completa: topbar fija + hilo con scroll + composer fijo.
   Fidelidad al prototipo proto_caso_hilo.html.
   ══════════════════════════════════════════ */
.hilo-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  animation: hilo-fade-in .2s ease both;
}
.hilo-overlay-out { animation: hilo-fade-out .2s ease both; }
@keyframes hilo-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hilo-fade-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(10px); }
}

.hilo-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0; /* imprescindible para que .hilo-thread pueda scrollear dentro del flex */
}

.hilo-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 13px;
  background: linear-gradient(var(--surface), rgba(20, 25, 26, .86));
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.hilo-back {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--tx-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.hilo-back:hover { background: rgba(255, 255, 255, .08); }
.hilo-back:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

.hilo-topbar-mid { flex: 1; min-width: 0; }
.hilo-crumb {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-mute);
}
.hilo-asunto {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
  margin-top: 2px;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hilo-pill {
  flex: 0 0 auto;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hilo-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Fila colapsable para ver adjuntos existentes sin salir del hilo (reusa _adjRenderGaleria) */
.hilo-adj-row {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.hilo-adj-toggle {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 16px;
  background: transparent;
  border: none;
  color: var(--tx-mute);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.hilo-adj-toggle::before { content: "\25B8\00a0"; }
.hilo-adj-toggle-open::before { content: "\25BE\00a0"; }
.hilo-adj-toggle:hover { color: var(--tx-soft); }
.hilo-adj-panel { padding: 0 16px 12px; }

.hilo-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 18px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: radial-gradient(600px 300px at 100% 0%, rgba(28, 126, 87, .08), transparent 70%);
}
.hilo-loading,
.hilo-error {
  align-self: center;
  color: var(--tx-mute);
  font-size: 13px;
  padding: 20px 0;
}
.hilo-error { color: var(--neg); }

.hilo-daysep {
  align-self: center;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tx-mute);
  background: var(--raised);
  border: 1px solid var(--line);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin: 2px 0;
}

.hilo-msg {
  max-width: 84%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hilo-msg-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  color: var(--tx-mute);
}
.hilo-bubble {
  padding: 11px 13px;
  border-radius: 15px;
  font-size: .92rem;
  line-height: 1.48;
  border: 1px solid;
  white-space: pre-wrap;
  word-break: break-word;
}
.hilo-msg-time { font-variant-numeric: tabular-nums; }

/* Soporte / equipo — izquierda */
.hilo-msg-team { align-self: flex-start; }
.hilo-msg-team .hilo-bubble {
  background: var(--raised);
  border-color: var(--line);
  color: var(--tx-soft);
  border-top-left-radius: 5px;
}
.hilo-avatar {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(52, 200, 138, .14);
  border: 1px solid rgba(52, 200, 138, .4);
}
.hilo-who { color: var(--jade); }

/* Tag junto al nombre cuando el actor de soporte es un agente (IA) vs humano,
   ver listar_hilo_caso.actor_tipo. Usado solo en el hilo del panel admin. */
.hilo-actor-tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--champagne);
  background: rgba(200, 169, 106, .14);
  border: 1px solid rgba(200, 169, 106, .35);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Variante del hilo embebida en el detalle de caso del panel admin: no vive
   dentro de .hilo-panel (flex de altura fija) sino en un modal que scrollea
   como documento, asi que se le da altura propia acotada + scroll interno
   para no volver gigante el sheet cuando la conversacion es larga. */
.hilo-thread--admin {
  flex: none;
  max-height: 360px;
  min-height: 64px;
  border-radius: var(--r-card);
  background: var(--raised);
  border: 1px solid var(--line);
}

/* Usuario — derecha */
.hilo-msg-me { align-self: flex-end; align-items: flex-end; }
.hilo-msg-me .hilo-bubble {
  background: rgba(52, 200, 138, .12);
  border-color: rgba(52, 200, 138, .32);
  color: var(--tx);
  border-top-right-radius: 5px;
}

/* Bloque de cierre "pudiste solucionarlo?" integrado al final del hilo */
.hilo-cierre {
  align-self: stretch;
  margin: 6px 2px 2px;
  background: var(--raised);
  border: 1px solid rgba(52, 200, 138, .28);
  border-radius: var(--r-card);
  padding: 14px;
}
.hilo-cierre-t {
  font-size: .9rem;
  color: var(--tx-soft);
  line-height: 1.45;
  margin-bottom: 11px;
}
.hilo-cierre-acc { display: flex; gap: 9px; }
.hilo-cierre-acc .cso-btn-si,
.hilo-cierre-acc .cso-btn-no { flex: 1; }

.hilo-composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 11px 12px calc(11px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: flex-end;
  gap: 9px;
}
.hilo-attach-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--tx-mute);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.hilo-attach-btn:hover { color: var(--tx-soft); }
.hilo-attach-btn:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

.hilo-field {
  flex: 1;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--tx);
  font-family: inherit;
  font-size: .92rem;
  line-height: 1.4;
  padding: 10px 13px;
  resize: none;
  max-height: 96px;
}
.hilo-field::placeholder { color: var(--tx-mute); }
.hilo-field:focus { outline: none; border-color: var(--jade-dark); }

.hilo-send-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  background: var(--jade);
  color: var(--on-jade);
  display: grid;
  place-items: center;
}
.hilo-send-btn:hover:not(:disabled) { filter: brightness(1.07); }
.hilo-send-btn:disabled { opacity: .4; cursor: default; }
.hilo-send-btn:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

/* Desktop: panel centrado tipo dialogo, no full-bleed */
@media (min-width: 720px) {
  .hilo-overlay {
    background: var(--overlay);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    align-items: center;
    justify-content: center;
    padding: var(--sp-5);
  }
  .hilo-panel {
    width: 100%;
    max-width: 560px;
    height: 82vh;
    max-height: 780px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
}

/* Lightbox fullscreen */
.adj-lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(6, 8, 7, .92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: _adj-lb-in .18s ease;
}

@keyframes _adj-lb-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.adj-lb-out {
  animation: _adj-lb-out .18s ease forwards;
}

@keyframes _adj-lb-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.adj-lb-img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 10px;
  object-fit: contain;
  display: block;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}

.adj-lb-cerrar {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--tx);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2001;
  font-family: var(--font-ui);
  transition: background .15s;
}

/* ── Topbar de pantallas de lista (Inbox / Suscripciones / Cobros) ──────── */
.wl-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-btn);
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--tx);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.wl-back:hover { background: rgba(255, 255, 255, .08); }

/* Boton "+" del header movil de lista (ej. Suscripciones). Accion primaria:
   acento jade como su gemelo desktop .dsk-topbar-btn-primary; 44px tap-target. */
.wl-btn-nuevo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-btn);
  background: var(--jade);
  border: none;
  color: #08110C;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: opacity .14s;
  flex-shrink: 0;
}
.wl-btn-nuevo:hover { opacity: .88; }

.wl-titulo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--tx);
}

/* ════════════════════════════════════════════════════════════════════════
   CIERRE CEREMONIAL — journey fullscreen "Wrapped" (8 laminas) + acta.
   Fuente de diseno: material/design/portal_v2/cierre_ceremonial.html.
   Namespace cm2- para no chocar con el viejo modal .cm-*. Hereda tokens
   de tokens.css (--ink, --surface, --raised, --line, --jade, --champagne...).
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --cm2-dur: .55s;
  --cm2-ease: cubic-bezier(.22,.9,.3,1);
}

.cm2-overlay {
  position: fixed;
  inset: 0;
  z-index: 9400;
  background: var(--ink);
  color: var(--tx-soft);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.cm2-overlay .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.cm2-overlay button { font-family: var(--font-ui); cursor: pointer; }
.cm2-overlay input { font-family: var(--font-ui); }

.cm2-escenario { position: fixed; inset: 0; height: 100vh; height: 100dvh; overflow: hidden; }

.cm2-fondo {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.cm2-fondo.on { opacity: 1; }
.cm2-fondo-jade   { background: radial-gradient(ellipse 90% 55% at 50% -12%, rgba(52,200,138,.13), transparent 62%); }
.cm2-fondo-champ  { background: radial-gradient(ellipse 90% 60% at 50% -10%, rgba(200,169,106,.16), transparent 64%); }
.cm2-fondo-neutro { background: radial-gradient(ellipse 85% 50% at 50% -14%, rgba(236,236,230,.05), transparent 60%); }
.cm2-fondo-info   { background: radial-gradient(ellipse 90% 55% at 50% -12%, rgba(111,168,227,.10), transparent 62%); }

.cm2-grano {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cabecera: progreso tipo historias + salir */
.cm2-cabecera {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 40;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 10px;
  background: linear-gradient(to bottom, rgba(11,14,13,.92), rgba(11,14,13,0));
}
.cm2-progreso { display: flex; gap: 5px; max-width: 560px; margin: 0 auto; }
.cm2-seg {
  flex: 1; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.13);
  overflow: hidden; position: relative;
}
.cm2-seg::after {
  content: ""; position: absolute; inset: 0;
  background: var(--jade);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--cm2-ease);
}
.cm2-seg.hecha::after { transform: scaleX(1); }
.cm2-seg.hecha.champ::after { background: var(--champagne); }
.cm2-cab-fila { display: flex; align-items: center; justify-content: space-between; max-width: 560px; margin: 10px auto 0; }
.cm2-cab-etiqueta { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--tx-mute); font-weight: 700; }
.cm2-btn-salir {
  background: none; border: none; color: var(--tx-mute);
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  padding: 6px 2px 6px 12px;
  transition: color .2s;
}
.cm2-btn-salir:hover { color: var(--tx-soft); }

/* Laminas */
.cm2-lamina {
  position: absolute; inset: 0;
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(34px) scale(.985);
  transition: opacity var(--cm2-dur) var(--cm2-ease), transform var(--cm2-dur) var(--cm2-ease);
  pointer-events: none;
  visibility: hidden;
}
.cm2-lamina.activa { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; visibility: visible; }
.cm2-lamina.saliendo { opacity: 0; transform: translateY(-26px) scale(.99); visibility: visible; }
.cm2-lamina-inner {
  width: 100%; max-width: 560px;
  margin: 0 auto;
  padding: calc(86px + env(safe-area-inset-top, 0px)) 24px calc(128px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100%;
}
.cm2-rv { opacity: 0; transform: translateY(16px); }
.cm2-lamina.activa .cm2-rv { opacity: 1; transform: translateY(0); transition: opacity .65s var(--cm2-ease), transform .65s var(--cm2-ease); }

/* Tipografia ceremonial */
.cm2-ojal { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: var(--tx-mute); margin-bottom: 18px; }
.cm2-ojal.jade  { color: var(--jade); }
.cm2-ojal.champ { color: var(--champagne); }
.cm2-titulo {
  font-family: var(--font-display);
  font-weight: 500; line-height: 1.08;
  color: var(--tx);
  font-size: clamp(30px, 8vw, 44px);
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.cm2-titulo em { font-style: italic; color: var(--jade); }
.cm2-titulo .cm2-champ-em { font-style: italic; color: var(--champagne); }
.cm2-parrafo { font-size: 15px; line-height: 1.65; color: var(--tx-mute); max-width: 44ch; }
.cm2-heroe {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(58px, 17vw, 112px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--tx);
  margin: 10px 0 8px;
}
.cm2-heroe.jade { color: var(--jade); }
.cm2-heroe .cm2-cent { font-size: .45em; vertical-align: baseline; color: inherit; opacity: .75; }
.cm2-subheroe { font-size: 14px; color: var(--tx-mute); line-height: 1.6; }
.cm2-subheroe b { color: var(--tx-soft); font-weight: 600; }

/* Lamina 1 · Apertura */
#cm2-l-apertura .cm2-lamina-inner { text-align: center; align-items: center; }
.cm2-apex { width: 54px; height: 44px; margin-bottom: 26px; }
.cm2-apex path { stroke: var(--jade); stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 90; stroke-dashoffset: 90; }
.cm2-lamina.activa .cm2-apex path { animation: cm2-trazo 1.4s .25s var(--cm2-ease) forwards; }
@keyframes cm2-trazo { to { stroke-dashoffset: 0; } }
.cm2-apertura-mes {
  font-family: var(--font-display);
  font-style: italic; font-weight: 500;
  font-size: clamp(64px, 20vw, 128px);
  line-height: .95; letter-spacing: -.02em;
  color: var(--tx);
}
.cm2-apertura-anio { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 7vw, 40px); color: var(--tx-mute); margin-top: 6px; letter-spacing: .12em; }
.cm2-apertura-plan {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; color: var(--tx-mute); letter-spacing: .04em;
}
.cm2-apertura-plan .cm2-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--jade); }
.cm2-apertura-copy { margin-top: 26px; font-size: 15px; color: var(--tx-mute); line-height: 1.7; max-width: 40ch; }
.cm2-pista {
  margin-top: 34px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #4A5450; font-weight: 700;
  animation: cm2-latido 2.6s ease-in-out infinite;
}
@keyframes cm2-latido { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* Lamina 2 · Ajuste de cuentas */
.cm2-aj-lista { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.cm2-aj-cuenta {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 15px 16px 14px;
  transition: border-color .25s;
}
.cm2-aj-cuenta.tocada { border-color: rgba(52,200,138,.4); }
.cm2-aj-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cm2-aj-nombre { font-size: 14px; font-weight: 600; color: var(--tx-soft); }
.cm2-aj-banco { font-size: 11px; color: var(--tx-mute); margin-top: 1px; }
.cm2-aj-sistema { text-align: right; flex: none; }
.cm2-aj-sistema .lbl { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-mute); }
.cm2-aj-sistema .val { font-size: 15px; font-weight: 700; color: var(--tx-soft); }
.cm2-aj-sistema .val.neg { color: var(--neg); }
.cm2-aj-input-fila { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cm2-aj-input-wrap {
  flex: 1; display: flex; align-items: center;
  background: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 0 12px;
  transition: border-color .2s;
}
.cm2-aj-input-wrap:focus-within { border-color: var(--jade-dark); }
.cm2-aj-input-wrap .pre { color: var(--tx-mute); font-size: 14px; }
.cm2-aj-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--tx-soft); font-size: 15px; font-weight: 600;
  padding: 10px 6px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.cm2-aj-input::placeholder { color: #4A5450; font-weight: 400; }
.cm2-aj-diff { flex: 1 1 100%; min-width: 0; text-align: right; font-size: 12px; font-weight: 700; color: var(--tx-mute); }
.cm2-aj-diff:empty { display: none; }
.cm2-aj-diff.pos { color: var(--pos); }
.cm2-aj-diff.neg { color: var(--neg); }
.cm2-aj-diff .sub { font-size: 10.5px; font-weight: 600; color: var(--tx-mute); letter-spacing: .03em; }
.cm2-aj-resumen {
  margin-top: 18px; font-size: 13px; color: var(--tx-mute);
  border-left: 2px solid var(--line); padding-left: 12px;
  line-height: 1.6; min-height: 20px;
}
.cm2-aj-resumen b { color: var(--tx-soft); }
.cm2-aj-resumen.con-ajustes { border-left-color: var(--jade-dark); }

/* Lamina 3 · El mes en numeros */
.cm2-stats-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cm2-stats-grid.cm2-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cm2-stat { background: var(--surface); border: 1px solid rgba(255,255,255,.07); border-radius: 13px; padding: 14px 13px 13px; }
.cm2-stat .lbl { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-mute); font-weight: 700; }
.cm2-stat .val { font-family: var(--font-display); font-size: 23px; color: var(--tx); margin-top: 7px; line-height: 1.1; }
.cm2-stat .sub { font-size: 11px; color: var(--tx-mute); margin-top: 4px; }
.cm2-stat .val .mini { font-size: 14px; color: var(--tx-mute); }
.cm2-consumo-wrap { margin-top: 26px; }
.cm2-consumo-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,.09); overflow: hidden; }
.cm2-consumo-fill { height: 100%; border-radius: 3px; background: var(--jade); width: 0; transition: width 1.3s .3s var(--cm2-ease); }
.cm2-lamina.activa .cm2-consumo-fill { width: var(--w); }
.cm2-consumo-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--tx-mute); margin-top: 8px; }
.cm2-consumo-meta b { color: var(--jade); }
.cm2-nota-sintasa { margin-top: 18px; font-size: 11.5px; color: var(--tx-mute); line-height: 1.5; }

/* Lamina 4 · Comportamientos */
.cm2-cat-lista { margin-top: 28px; display: flex; flex-direction: column; gap: 15px; }
.cm2-cat-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 10px; }
.cm2-cat-nombre { font-size: 13.5px; font-weight: 600; color: var(--tx-soft); }
.cm2-cat-monto { font-size: 13px; font-weight: 700; color: var(--tx-soft); flex: none; }
.cm2-cat-monto .vs { font-size: 11px; font-weight: 500; color: var(--tx-mute); }
.cm2-cat-track { height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); position: relative; overflow: visible; }
.cm2-cat-fill { height: 100%; border-radius: 4px; background: var(--jade); width: 0; transition: width 1.1s var(--cm2-ease); position: relative; }
.cm2-cat-fill.excede { background: var(--neg); }
.cm2-lamina.activa .cm2-cat-fill { width: var(--w); }
.cm2-cat-plan-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(244,242,236,.5); border-radius: 1px; left: var(--tick); }
.cm2-cat-delta { font-size: 11px; margin-top: 5px; font-weight: 600; }
.cm2-cat-delta.pos { color: var(--pos); }
.cm2-cat-delta.neg { color: var(--neg); }
.cm2-mejor-frente {
  margin-top: 26px;
  background: rgba(52,200,138,.07);
  border: 1px solid rgba(52,200,138,.22);
  border-radius: 13px;
  padding: 14px 16px;
  font-size: 13.5px; line-height: 1.6; color: var(--tx-soft);
}
.cm2-mejor-frente b { color: var(--jade); }

/* Lamina 5 · Comercios */
.cm2-com-lista { margin-top: 30px; display: flex; flex-direction: column; }
.cm2-com-fila { display: flex; align-items: center; gap: 16px; padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.07); }
.cm2-com-fila:last-child { border-bottom: none; }
.cm2-com-rank { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--tx-mute); width: 26px; flex: none; text-align: center; }
.cm2-com-fila:first-child .cm2-com-rank { color: var(--jade); }
.cm2-com-info { flex: 1; min-width: 0; }
.cm2-com-nombre { font-size: 14.5px; font-weight: 600; color: var(--tx-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm2-com-visitas { font-size: 11px; color: var(--tx-mute); margin-top: 1px; }
.cm2-com-monto { font-size: 15px; font-weight: 700; color: var(--tx); flex: none; }
.cm2-com-fila:first-child .cm2-com-nombre { color: var(--tx); }
.cm2-com-fila:first-child .cm2-com-monto { color: var(--jade); }

/* Lamina 6 · Split por grupo */
.cm2-split-barra { margin-top: 32px; display: flex; height: 52px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); }
.cm2-split-seg { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--ink); width: 0; transition: width 1.2s var(--cm2-ease); overflow: hidden; white-space: nowrap; }
.cm2-lamina.activa .cm2-split-seg { width: var(--w); }
.cm2-split-leyenda { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.cm2-split-item { display: flex; align-items: center; gap: 12px; }
.cm2-split-punto { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.cm2-split-item .nom { font-size: 14px; font-weight: 600; color: var(--tx-soft); flex: 1; }
.cm2-split-item .pct { font-size: 13px; color: var(--tx-mute); font-weight: 600; width: 44px; text-align: right; }
.cm2-split-item .mon { font-size: 14px; font-weight: 700; color: var(--tx); width: 96px; text-align: right; }
.cm2-split-frase { margin-top: 26px; font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--tx-mute); }
.cm2-split-frase b { color: var(--jade); font-weight: 500; }

/* Lamina 7 · Patrimonio */
#cm2-l-patrimonio .cm2-lamina-inner { text-align: center; align-items: center; }
.cm2-pat-de-a { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 15px; color: var(--tx-mute); margin-top: 4px; flex-wrap: wrap; }
.cm2-pat-de-a .val { font-weight: 700; color: var(--tx-soft); font-size: 17px; }
.cm2-pat-flecha { color: var(--jade); font-size: 17px; }
.cm2-pat-chart { width: min(320px, 78vw); height: 74px; margin: 26px auto 4px; overflow: visible; }
.cm2-pat-chart .linea { stroke: var(--jade); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.cm2-lamina.activa .cm2-pat-chart .linea { animation: cm2-trazo-pat 1.6s .4s var(--cm2-ease) forwards; }
@keyframes cm2-trazo-pat { to { stroke-dashoffset: 0; } }
.cm2-pat-chart .area { opacity: 0; transition: opacity 1s 1.4s; }
.cm2-lamina.activa .cm2-pat-chart .area { opacity: 1; }
.cm2-pat-chart circle { fill: var(--jade); opacity: 0; transition: opacity .4s 1.8s; }
.cm2-lamina.activa .cm2-pat-chart circle { opacity: 1; }
.cm2-pat-nota { margin-top: 22px; font-size: 12px; color: var(--tx-mute); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; display: inline-block; }
.cm2-pat-nota b { color: var(--tx-soft); }

/* Lamina 8 · El acta (reusada tambien en el modal de acta condensada read-only) */
.cm2-acta-doc {
  position: relative;
  background: linear-gradient(168deg, #191611 0%, #131110 55%, #14191A 130%);
  border: 1px solid rgba(200,169,106,.38);
  border-radius: 16px;
  padding: 30px 26px 26px;
  margin-top: 22px;
  overflow: hidden;
}
.cm2-acta-doc::before {
  content: "";
  position: absolute; inset: 7px;
  border: 1px solid rgba(200,169,106,.16);
  border-radius: 11px;
  pointer-events: none;
}
.cm2-acta-marca {
  position: absolute; right: -30px; top: -22px;
  font-family: var(--font-display); font-style: italic;
  font-size: 150px; line-height: 1; color: rgba(200,169,106,.05);
  pointer-events: none; user-select: none;
}
.cm2-acta-cab { text-align: center; margin-bottom: 22px; }
.cm2-acta-apex { width: 34px; height: 28px; margin-bottom: 12px; }
.cm2-acta-apex path { stroke: var(--champagne); stroke-width: 3.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cm2-acta-titulo { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--champagne); font-weight: 700; }
.cm2-acta-periodo { font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--tx); margin-top: 9px; }
.cm2-acta-fechas { font-size: 11.5px; color: var(--tx-mute); margin-top: 4px; letter-spacing: .05em; }
.cm2-acta-sep { border: none; height: 1px; margin: 18px 0; background: linear-gradient(to right, transparent, rgba(200,169,106,.3), transparent); }
.cm2-acta-fila { display: flex; justify-content: space-between; align-items: baseline; padding: 7.5px 0; gap: 14px; }
.cm2-acta-fila .k { font-size: 12.5px; color: var(--tx-mute); }
.cm2-acta-fila .v { font-size: 14.5px; font-weight: 700; color: var(--tx); text-align: right; }
.cm2-acta-fila .v.jade { color: var(--jade); }
.cm2-acta-fila .v.champ { color: var(--champagne); }
.cm2-acta-fila.destacada .k { color: var(--tx-soft); font-weight: 600; }
.cm2-acta-fila.destacada .v { font-size: 17px; }
.cm2-acta-firma { margin-top: 20px; text-align: center; }
.cm2-acta-firma .nombre { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--tx-soft); }
.cm2-acta-firma .linea-firma { width: 170px; height: 1px; background: rgba(200,169,106,.35); margin: 8px auto 7px; }
.cm2-acta-firma .rol { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tx-mute); }
.cm2-acta-sello {
  position: absolute;
  right: 14px; bottom: 10px;
  width: 108px; height: 108px;
  border: 2px solid var(--champagne);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transform: rotate(-11deg) scale(2.4);
  opacity: 0;
  pointer-events: none;
}
.cm2-acta-sello::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(200,169,106,.55); border-radius: 50%; }
.cm2-acta-sello .txt { font-size: 12px; letter-spacing: .3em; font-weight: 800; color: var(--champagne); text-indent: .3em; }
.cm2-acta-sello .fecha { font-size: 8.5px; letter-spacing: .16em; color: var(--champagne-dark); font-weight: 700; }
.cm2-acta-sello .apex-mini { width: 17px; height: 14px; }
.cm2-acta-sello .apex-mini path { stroke: var(--champagne); stroke-width: 3.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* .visible: ya sellado (acta historica / modal read-only), sin animacion de entrada */
.cm2-acta-sello.visible { opacity: .96; transform: rotate(-11deg) scale(1); }
/* .animar: se acaba de firmar en el journey — juega la animacion de estampado */
.cm2-acta-sello.animar { animation: cm2-estampar .55s cubic-bezier(.2,1.6,.35,1) forwards; }
@keyframes cm2-estampar {
  0%   { opacity: 0; transform: rotate(-11deg) scale(2.4); }
  62%  { opacity: 1; transform: rotate(-11deg) scale(.92); }
  100% { opacity: .96; transform: rotate(-11deg) scale(1); }
}
.cm2-acta-doc.temblor { animation: cm2-temblor .3s .28s ease; }
@keyframes cm2-temblor {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(2px); }
  70% { transform: translateY(-1px); }
}
.cm2-btn-firmar {
  width: 100%;
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px solid rgba(200,169,106,.5);
  background: linear-gradient(160deg, rgba(200,169,106,.2), rgba(200,169,106,.1));
  color: var(--champagne);
  font-size: 15px; font-weight: 700; letter-spacing: .04em;
  transition: filter .2s, opacity .3s;
}
.cm2-btn-firmar:hover { filter: brightness(1.15); }
.cm2-btn-firmar:disabled { cursor: default; opacity: .7; }
.cm2-btn-firmar.hecho { border-color: rgba(52,200,138,.4); background: rgba(52,200,138,.1); color: var(--jade); }
.cm2-acta-aviso { margin-top: 12px; text-align: center; font-size: 11.5px; color: var(--tx-mute); line-height: 1.6; }
.cm2-acta-acciones { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cm2-btn-compartir, .cm2-btn-volver {
  flex: 1; min-width: 140px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: filter .2s, border-color .2s;
}
.cm2-btn-compartir { background: none; border: 1px solid rgba(200,169,106,.4); color: var(--champagne); }
.cm2-btn-compartir:hover { border-color: rgba(200,169,106,.7); }
.cm2-btn-volver { background: var(--jade); border: none; color: var(--on-jade); }
.cm2-btn-volver:hover { filter: brightness(1.08); }

/* Footer de navegacion */
.cm2-pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 34px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(11,14,13,.96) 45%, rgba(11,14,13,0));
  transition: opacity .4s, transform .4s;
}
.cm2-pie.oculto { opacity: 0; pointer-events: none; transform: translateY(12px); }
.cm2-pie-inner { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.cm2-btn-atras {
  flex: none; width: 48px; height: 50px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: transparent; color: var(--tx-soft);
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, opacity .3s;
}
.cm2-btn-atras:hover { border-color: rgba(255,255,255,.35); }
.cm2-btn-atras.oculto { opacity: 0; pointer-events: none; }
.cm2-btn-avanzar {
  flex: 1; height: 50px;
  border-radius: 12px;
  border: none;
  background: var(--jade);
  color: var(--on-jade);
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  transition: filter .2s, opacity .3s;
}
.cm2-btn-avanzar:hover { filter: brightness(1.08); }
.cm2-btn-avanzar:disabled { opacity: .6; cursor: default; }
.cm2-pie-saltar { display: none; text-align: center; margin-top: 11px; }
.cm2-pie.con-saltar .cm2-pie-saltar { display: block; }
.cm2-btn-saltar {
  background: none; border: none;
  color: var(--tx-mute); font-size: 12.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(126,135,131,.4);
  padding: 4px 10px;
  transition: color .2s;
}
.cm2-btn-saltar:hover { color: var(--tx-soft); }

/* Modal de acta condensada (read-only, planes cerrados): reusa .cm-overlay/.cm-sheet
   del shell existente; el acta-doc va dentro de #cm-contenido. */
.cm2-acta-modal-wrap { padding-bottom: 4px; }

/* Desktop: respiro */
@media (min-width: 760px) {
  .cm2-lamina-inner { max-width: 620px; }
  .cm2-progreso, .cm2-cab-fila, .cm2-pie-inner { max-width: 620px; }
  .cm2-parrafo { font-size: 16px; }
  .cm2-stats-grid { gap: 14px; }
  .cm2-stat { padding: 18px 17px 16px; }
  .cm2-stat .val { font-size: 27px; }
  .cm2-acta-doc { padding: 38px 40px 32px; }
  .cm2-acta-sello { right: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm2-overlay *, .cm2-overlay *::before, .cm2-overlay *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Deuda: eliminar pago (historial "Pagos recientes") ── */
.deu-pago-fila { position: relative; padding-right: 26px; }
.deu-pago-del {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--tx-mute);
  font-size: 15px; line-height: 1; cursor: pointer;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.deu-pago-del:hover { color: #D8714C; background: rgba(216,113,76,.1); }

/* ══════════════════════════════════════════════════════════════════════
   Amigos + gasto compartido (split) - js/amigos.js. Namespace am-.
   Fuente de diseño: material/design/portal_v2/amigos_split.html
   ══════════════════════════════════════════════════════════════════════ */
.am-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: 640px;
}

/* Header móvil */
.am-mob-header { margin-bottom: var(--sp-2); }
.am-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;
}
.am-titulo-blk { display: flex; align-items: center; gap: 10px; }
.am-mob-titulo {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--tx); flex: 1; min-width: 0;
}

/* Hero */
.am-hero { padding: 4px 2px 4px; }
.am-eyebrow { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; font-weight: 800; color: var(--jade); }
.am-hero-titulo {
  font-family: var(--font-display); font-weight: 500; line-height: 1.14;
  color: var(--tx); font-size: clamp(23px, 6vw, 28px); margin-top: 9px;
}
.am-hero-titulo em { font-style: italic; color: var(--jade); }
.am-sub { font-size: 13px; line-height: 1.6; color: var(--tx-mute); margin-top: 9px; max-width: 46ch; }

/* Resumen */
.am-resumen {
  margin: 16px 0 0; display: flex; align-items: center;
  background: var(--surface); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-card); padding: 15px 8px;
}
.am-resumen + .am-resumen { margin-top: 8px; }
.am-resumen-vacio {
  margin: 16px 0 0; text-align: center; padding: 16px;
  background: var(--surface); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-card); color: var(--tx-mute); font-size: 13px;
}
.am-resumen-col { flex: 1; text-align: center; min-width: 0; }
.am-resumen-col .k { font-size: 10.5px; color: var(--tx-mute); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.am-resumen-col .v { font-size: 15.5px; font-weight: 800; margin-top: 5px; font-variant-numeric: tabular-nums; }
.am-resumen-div { width: 1px; align-self: stretch; background: rgba(255,255,255,.08); }

/* Acciones */
.am-acciones-fila { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.am-btn-outline {
  flex: 1; min-width: 140px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 14px; border-radius: var(--r-btn); font-size: 12.5px; font-weight: 700;
  background: rgba(52,200,138,.08); border: 1px solid rgba(52,200,138,.4); color: var(--jade-light);
  font-family: inherit; cursor: pointer; transition: background .15s;
}
.am-btn-outline:hover { background: rgba(52,200,138,.16); }

/* Secciones y lista */
.am-seccion-tit {
  padding: 20px 2px 9px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tx-mute); font-weight: 700; display: flex; justify-content: space-between; align-items: center;
}
.am-lista { display: flex; flex-direction: column; gap: 8px; }
.am-amigo {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-card); padding: 13px 14px;
  transition: border-color .18s, transform .12s;
  text-align: left; width: 100%; color: inherit; font-family: inherit;
}
.am-clicable { cursor: pointer; }
.am-clicable:hover { border-color: rgba(255,255,255,.2); transform: translateY(-1px); }
.am-pendiente { opacity: .72; }
.am-info-txt { flex: 1; min-width: 0; }
.am-nombre { font-size: 14px; font-weight: 700; color: var(--tx); }
.am-handle { font-size: 11.5px; color: var(--tx-mute); margin-top: 1px; }
.am-balance { flex: none; text-align: right; }
.am-balance .v { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.am-balance .k { font-size: 10.5px; color: var(--tx-mute); margin-top: 1px; }
.am-chev { flex: none; width: 15px; height: 15px; opacity: .5; }

/* Solicitud pendiente: borde jade sutil para distinguirla de un amigo aceptado. */
.am-solicitud { border-color: rgba(52,200,138,.28); }
.am-solicitud-acciones { flex: none; display: flex; gap: 6px; }

.am-empty { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.am-empty-titulo { font-size: 15px; font-weight: 700; color: var(--tx); }
.am-empty-sub { font-size: 12.5px; color: var(--tx-mute); line-height: 1.5; max-width: 300px; }
.am-empty-mini { color: var(--tx-mute); font-size: 12.5px; padding: 12px 0; }

.am-nota-fx { font-size: 11px; color: var(--tx-mute); opacity: .7; margin-top: 20px; padding: 0 2px; line-height: 1.5; }

/* Avatares */
.am-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--tx);
}
.am-avatar-chico { width: 28px; height: 28px; font-size: 10.5px; }
.am-avatar-grande { width: 56px; height: 56px; font-size: 19px; margin: 0 auto 10px; }
.am-av-jade  { background: rgba(52,200,138,.18); color: var(--jade-light); }
.am-av-info  { background: rgba(111,168,227,.18); color: var(--info); }
.am-av-champ { background: rgba(200,169,106,.2);  color: var(--champagne); }
.am-av-gris  { background: rgba(255,255,255,.08); color: var(--tx-mute); }

/* Badges y botones mini (usados en solicitudes y liquidaciones pendientes) */
.am-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 800;
  padding: 3px 9px; border-radius: var(--r-pill);
}
.am-badge-alerta { background: rgba(224,178,82,.14); border: 1px solid rgba(224,178,82,.32); color: var(--warn); }
.am-badge-jade   { background: rgba(52,200,138,.14); border: 1px solid rgba(52,200,138,.32); color: var(--jade-light); }
.am-badge-gris   { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--tx-mute); }
.am-badge-champ  { background: rgba(200,169,106,.14); border: 1px solid rgba(200,169,106,.32); color: var(--champagne); }

.am-btn-mini {
  padding: 7px 12px; border-radius: 8px; font-size: 11.5px; font-weight: 700;
  background: none; border: 1px solid rgba(255,255,255,.16); color: var(--tx);
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.am-btn-mini:hover { border-color: rgba(255,255,255,.3); }
.am-btn-mini-jade { background: var(--jade); border-color: var(--jade); color: var(--on-jade); }
.am-btn-mini-jade:hover { filter: brightness(1.06); }

/* Sheet · Agregar amigo */
.am-codigo-caja {
  border: 1.5px dashed rgba(52,200,138,.4); border-radius: 14px;
  background: rgba(52,200,138,.06); padding: 18px 16px; text-align: center;
}
.am-codigo-lbl { font-size: 10.5px; color: var(--tx-mute); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.am-codigo-valor { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: .08em; color: var(--jade-light); margin-top: 8px; }
.am-codigo-acciones { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.am-icobtn {
  padding: 9px 13px; border-radius: 9px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12); color: var(--tx); font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.am-icobtn:hover { background: rgba(255,255,255,.11); }
.am-o {
  display: flex; align-items: center; gap: 10px; margin: 18px 0;
  color: var(--tx-mute); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.am-o::before, .am-o::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.09); }

/* Sheet · Nuevo gasto compartido */
.am-gc-part-fila { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; }
.am-part {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 4px 6px; border-radius: 12px; width: 62px;
  border: 1.5px solid transparent; background: none; color: var(--tx); position: relative; cursor: pointer;
}
.am-part span { font-size: 10.5px; color: var(--tx-mute); font-weight: 600; text-align: center; line-height: 1.2; }
.am-part-activo { border-color: var(--jade); background: rgba(52,200,138,.07); }
.am-part-activo span { color: var(--tx); }
.am-part-check {
  position: absolute; top: 2px; right: 6px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--jade); display: none; align-items: center; justify-content: center;
}
.am-part-activo .am-part-check { display: flex; }

.am-tab-activo.nm-tab { background: var(--jade); color: var(--on-jade); }

.am-gc-repartir-lista { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.am-gc-fila { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--ink); border: 1px solid rgba(255,255,255,.07); border-radius: 11px; }
.am-gc-nom { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-gc-monto-in { flex: none; width: 92px; }
.am-gc-monto-in input {
  width: 100%; text-align: right; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 9px; color: var(--tx); font-weight: 700; font-size: 13px; font-family: inherit;
}
.am-gc-monto-in input:disabled { color: var(--tx-mute); background: rgba(255,255,255,.02); }

.am-suma-check {
  margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; font-size: 12px; gap: 8px;
}
.am-suma-check .k { color: var(--tx-mute); font-weight: 600; }
.am-suma-check .v { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.am-suma-check.am-suma-ok { background: rgba(52,200,138,.06); border-color: rgba(52,200,138,.22); }
.am-suma-check.am-suma-ok .v { color: var(--jade-light); }
.am-suma-check.am-suma-mal .v { color: #D8714C; }

.am-callout {
  margin-top: 14px; padding: 12px 13px; border-radius: 11px; font-size: 12px; line-height: 1.55; color: var(--tx);
}
.am-callout-info  { background: rgba(111,168,227,.08); border: 1px solid rgba(111,168,227,.24); }
.am-callout-champ { background: rgba(200,169,106,.08); border: 1px solid rgba(200,169,106,.26); }

/* Sheet · Detalle de amigo */
.am-dd-header { text-align: center; padding: 6px 2px 4px; }
.am-dd-neto { margin-top: 4px; }
.am-dd-neto .v { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 8vw, 32px); }
.am-dd-neto .k { font-size: 11.5px; color: var(--tx-mute); margin-top: 2px; }
.am-dd-neto + .am-dd-neto { margin-top: 12px; }

.am-dd-cta-fila { padding: 16px 0 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.am-cta-primario {
  flex: 1; min-width: 140px; padding: 13px 16px; border-radius: var(--r-btn); border: none;
  background: var(--jade); color: var(--on-jade); font-size: 13.5px; font-weight: 800; font-family: inherit; cursor: pointer;
}
.am-cta-primario:hover { filter: brightness(1.06); }
.am-cta-outline {
  flex: none; padding: 13px 16px; border-radius: var(--r-btn);
  background: none; border: 1px solid rgba(255,255,255,.16); color: var(--tx);
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.am-cta-outline:hover { border-color: rgba(255,255,255,.3); }
/* Cuentas por cobrar: 3 CTAs en la misma fila (Cobrar/Ajustar/Cancelar) se
   parten feo a 320px porque .am-cta-outline no crece; acá sí debe repartirse
   el ancho como el primario. */
.am-dd-cta-fila .am-cta-outline { flex: 1 1 auto; min-width: 0; }

.am-dd-seccion-tit { padding: 18px 0 8px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-mute); font-weight: 700; }
.am-dd-lista { display: flex; flex-direction: column; gap: 8px; }
.am-dd-item { display: flex; align-items: center; gap: 12px; background: var(--ink); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 11px 13px; }
.am-dd-item-txt { flex: 1; min-width: 0; }
.am-dd-item-concepto { font-size: 13px; font-weight: 700; color: var(--tx); }
.am-dd-item-detalle { font-size: 11px; color: var(--tx-mute); margin-top: 2px; line-height: 1.4; }
.am-dd-item-monto { flex: none; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.am-dd-item-acciones { flex: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.am-dd-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.am-link-mini { background: none; border: none; color: var(--tx-mute); font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 4px; }
.am-link-mini:hover { color: var(--tx); }
.am-link-danger:hover { color: #D8714C; }

@media (min-width: 1024px) {
  .am-wrap { padding: 28px 40px 40px; max-width: 760px; }
  .am-mob-header { display: none; }
  .am-lista#am-lista-amigos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.adj-lb-cerrar:hover { background: rgba(255, 255, 255, .22); }

/* ══════════════════════════════════════════════════════════════════════
   VERTEX Health — segunda vertical del paraguas (js/health.js). Namespace hl-.
   Fuente de diseño: material/design/health/health_home.html (sandbox)
   Acento propio: coral, reservado para Health en VERTEX Plataforma.dc.html.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --health: #E8765A;
  --health-dk: #B5573D;
  --health-lt: #F3A184;
  --health-soft: rgba(232,118,90,.13);
  --health-border: rgba(232,118,90,.30);
}

.hl-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: 640px;
}

/* Header móvil */
.hl-mob-header { margin-bottom: var(--sp-2); }
.hl-back {
  background: none; border: none; color: var(--health);
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; padding: 8px 0; margin: -8px 0 2px; display: block;
}
.hl-titulo-blk { display: flex; align-items: center; gap: 10px; }
.hl-mob-titulo {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--tx); flex: 1; min-width: 0;
}

/* Hero */
.hl-hero {
  margin-top: 4px; border-radius: 18px;
  background: linear-gradient(150deg, #211712, #14191A 60%);
  border: 1px solid var(--health-border);
  padding: 20px 18px 16px;
}
.hl-eyebrow { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--health-lt); }
.hl-hero-num { font-size: 34px; font-weight: 700; color: var(--tx-hi, var(--tx)); letter-spacing: -.02em; margin-top: 8px; }
.hl-hero-sub { font-size: 12px; color: var(--tx-mute); margin-top: 7px; }
.hl-chip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.hl-chip-mini {
  background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 11px 12px; display: flex; align-items: center; gap: 10px;
}
.hl-chip-mini .glyph { font-size: 17px; line-height: 1; flex: none; width: 24px; text-align: center; }
.hl-chip-mini .lbl { font-size: 10px; color: var(--tx-mute); letter-spacing: .02em; font-weight: 700; }
.hl-chip-mini .val { font-size: 12.5px; font-weight: 700; color: var(--tx); margin-top: 2px; }

.hl-unit-toggle {
  flex: none; padding: 5px 10px; border-radius: 999px; margin-top: 1px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: var(--tx-mute); font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.hl-unit-toggle:hover { background: rgba(255,255,255,.12); color: var(--tx); }

/* CTA check-in */
.hl-cta-checkin {
  width: 100%; margin-top: 13px; border-radius: 14px; padding: 15px 17px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--health); border: none; cursor: pointer; font-family: inherit; text-align: left;
}
.hl-cta-checkin .t1 { font-size: 13.5px; font-weight: 700; color: #FFFFFF; }
.hl-cta-checkin .t2 { font-size: 11px; color: rgba(255,255,255,.82); margin-top: 2px; }
.hl-cta-checkin .arrow { color: #FFFFFF; font-size: 18px; font-weight: 700; flex: none; }
.hl-cta-checkin.hecho { background: var(--surface); border: 1px solid rgba(255,255,255,.08); }
.hl-cta-checkin.hecho .t1 { color: var(--tx); }
.hl-cta-checkin.hecho .t2 { color: var(--tx-mute); }
.hl-cta-checkin.hecho .arrow { color: var(--tx-mute); }

/* Secciones y cards */
.hl-seccion-tit {
  padding: 20px 2px 9px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tx-mute); font-weight: 700; display: flex; justify-content: space-between; align-items: center;
}
.hl-card {
  background: var(--surface); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-card); padding: 16px;
}
.hl-plan-vacio { font-size: 12.5px; color: var(--tx-mute); line-height: 1.55; margin-top: 6px; }
.hl-perfil-check {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 10.5px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  color: var(--health-lt); background: var(--health-soft);
  border: 1px solid var(--health-border); border-radius: 999px; padding: 3px 9px 3px 7px;
  font-family: inherit; cursor: pointer;
}
.hl-perfil-check .ico { font-size: 11px; }

/* Resumen compacto y editable del perfil ("Masculino · 174 cm · ..."). */
.hl-perfil-resumen {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; margin-top: 10px; padding: 9px 11px;
  background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.07); border-radius: 10px;
  font-family: inherit; cursor: pointer; text-align: left; transition: background .15s;
}
.hl-perfil-resumen:hover { background: rgba(0,0,0,.26); }
.hl-perfil-resumen .txt { font-size: 12px; color: var(--tx-mute); line-height: 1.4; }
.hl-perfil-resumen .edit { font-size: 11px; font-weight: 700; color: var(--health-lt); flex: none; white-space: nowrap; }

/* Preferencias de unidades (peso/altura, dos selectores independientes). */
.hl-pref-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.hl-pref-col { flex: 1; min-width: 128px; }
.hl-pref-col-lbl { font-size: 10.5px; color: var(--tx-mute); font-weight: 700; margin-bottom: 6px; letter-spacing: .02em; }
.hl-chip-sel.hl-chip-sm { padding: 7px 11px; font-size: 11.5px; }
.hl-plan-kcal { font-size: 26px; font-weight: 700; color: var(--tx); margin-top: 6px; }
.hl-plan-meta-sub { font-size: 11.5px; color: var(--tx-mute); margin-top: 10px; }
.hl-plan-acciones { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

.hl-macro-row { display: flex; gap: 8px; margin-top: 12px; }
.hl-macro-pill { flex: 1; background: rgba(0,0,0,.18); border-radius: 12px; padding: 11px 8px; text-align: center; }
.hl-macro-pill .n { font-size: 14px; font-weight: 700; color: var(--tx); }
.hl-macro-pill .l { font-size: 9.5px; color: var(--tx-mute); margin-top: 3px; font-weight: 700; letter-spacing: .02em; }
.hl-macro-pill i { display: block; width: 8px; height: 8px; border-radius: 50%; margin: 0 auto 6px; }

.hl-formula { margin-top: 14px; }
.hl-formula summary { font-size: 12px; color: var(--health-lt); font-weight: 700; cursor: pointer; list-style: none; }
.hl-formula summary::-webkit-details-marker { display: none; }
.hl-formula summary::before { content: "+ "; }
.hl-formula[open] summary::before { content: "\2212 "; }
.hl-formula .cuerpo { font-size: 12px; color: var(--tx-mute); line-height: 1.6; margin-top: 9px; }
.hl-formula .cuerpo b { color: var(--tx); }

.hl-btn-outline {
  margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 14px; border-radius: var(--r-btn); font-size: 12.5px; font-weight: 700;
  background: var(--health-soft); border: 1px solid var(--health-border); color: var(--health-lt);
  font-family: inherit; cursor: pointer; transition: background .15s;
}
.hl-btn-outline:hover { background: rgba(232,118,90,.2); }

.hl-link {
  background: none; border: none; color: var(--health-lt); font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer; padding: 8px 0; margin: -8px 0; min-height: 44px;
  display: inline-flex; align-items: center;
}
.hl-link:hover { filter: brightness(1.1); }
.hl-link-danger { color: #D8714C !important; }

/* Input de peso: cifras alineadas al tabular (el resto de .nm-input no lo necesita). */
.hl-input-peso { font-variant-numeric: tabular-nums; }

/* Listas (historial de check-ins / ejercicio) */
.hl-hist-lista { display: flex; flex-direction: column; gap: 8px; }
.hl-hist-item {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 11px 13px;
}
.hl-hist-em { font-size: 18px; flex: none; width: 20px; text-align: center; }
.hl-hist-txt { flex: 1; min-width: 0; }
.hl-hist-tit { font-size: 12.5px; font-weight: 700; color: var(--tx); }
.hl-hist-sub { font-size: 11.5px; color: var(--tx-mute); margin-top: 2px; line-height: 1.4; }
.hl-empty-mini { color: var(--tx-mute); font-size: 12.5px; padding: 10px 2px; }

.hl-nota-privacidad { font-size: 11px; color: var(--tx-mute); opacity: .7; margin-top: 20px; padding: 0 2px; line-height: 1.5; }

/* Sheets: check-in / ejercicio / perfil / meta */
.hl-sheet-hint { font-size: 12px; color: var(--tx-mute); line-height: 1.5; margin-top: -4px; }
/* Health pinta su propio color por variable, así el estado deshabilitado lo
   apaga solo (ver .nm-guardar:disabled) en vez de caer al jade de Wealth. */
.hl-guardar.nm-guardar { --nm-btn-bg: var(--health); --nm-btn-fg: #FFFFFF; }

.hl-mood-row { display: flex; justify-content: space-between; margin-top: 8px; gap: 6px; }
.hl-mood-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--ink); border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 10px 3px; font-family: inherit; color: var(--tx-mute); cursor: pointer;
}
.hl-mood-btn .em { font-size: 19px; line-height: 1; }
.hl-mood-btn .lb { font-size: 9px; font-weight: 700; text-align: center; line-height: 1.2; }
.hl-mood-btn.sel { background: var(--health-soft); border-color: var(--health-border); color: var(--tx); }

.hl-chips-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.hl-chip-sel {
  padding: 9px 13px; border-radius: 9px; border: 1px solid rgba(255,255,255,.1);
  background: var(--ink); color: var(--tx-mute); font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.hl-chip-sel.sel { background: var(--health); border-color: var(--health); color: #1A0D08; }

@media (min-width: 1024px) {
  .hl-wrap { padding: 28px 40px 40px; max-width: 760px; }
  .hl-mob-header { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   VERTEX Mascota Junior "Mochi" (js/mascota.js). Namespace msc-.
   Solo para miembros con rol Junior. Tamagotchi educativo del ahorro:
   REFLEJA el progreso real de la meta de wallet (sql/v71), nunca mueve dinero.
   Fuente de diseño: material/design/portal_v2/mascota_junior.html + mochis.html
   (voz corregida). Reusa .nm-overlay/.nm-sheet/.nm-input/.nm-chip/.nm-tab del
   sistema de modales existente para los sheets (onboarding, vestir, jugar, menú).
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --msc-rosa: #E39BB0;
  --msc-champ-lt: #E4CE9C;
  --msc-rebote: cubic-bezier(.2,1.5,.4,1);
}

.msc-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: 480px;
}
.msc-mob-header { margin-bottom: var(--sp-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.msc-back {
  background: none; border: none; color: var(--jade);
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; padding: 8px 0; margin: -8px 0 2px; display: block;
}
.msc-titulo-blk { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: space-between; }
.msc-mob-titulo { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--tx); }

/* ── Escena de la mascota ── */
.msc-escena {
  position: relative; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(52,200,138,.16), transparent 55%),
    linear-gradient(178deg, #12201C 0%, #101A1B 46%, #0E1416 100%);
  border: 1px solid rgba(255,255,255,.06);
  padding: 16px 16px 18px;
  margin-top: 8px;
}
.msc-escena-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msc-etapa-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(11,14,13,.5); border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: 5px 12px;
}
.msc-etapa-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 8px var(--jade); }
.msc-etapa-badge.cumbre .dot { background: var(--champagne); box-shadow: 0 0 8px var(--champagne); }
.msc-etapa-badge .et-nom { font-size: 12.5px; font-weight: 700; color: var(--tx); }
.msc-etapa-badge .et-sub { font-size: 10px; color: var(--tx-mute); letter-spacing: .04em; }
.msc-escena-acciones { display: flex; align-items: center; gap: 8px; }
.msc-racha-chip {
  display: flex; align-items: center; gap: 5px;
  background: rgba(200,169,106,.14); border: 1px solid rgba(200,169,106,.3);
  border-radius: 999px; padding: 5px 10px;
  font-size: 12px; font-weight: 700; color: var(--msc-champ-lt);
}
.msc-ic-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(11,14,13,.5); border: 1px solid rgba(255,255,255,.1);
  color: var(--tx-mute); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, border-color .2s;
}
.msc-ic-btn:hover { color: var(--tx); border-color: rgba(255,255,255,.25); }
.msc-ic-btn.mudo { opacity: .8; }

.msc-escena-centro {
  position: relative; z-index: 3; min-height: 250px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 6px; padding-bottom: 4px;
}
.msc-globo {
  position: relative; max-width: 260px;
  background: var(--cream); color: #1A1E1C;
  font-size: 13.5px; line-height: 1.42; font-weight: 500; text-align: center;
  padding: 10px 15px; border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  transition: opacity .3s, transform .3s;
}
.msc-globo.oculto { opacity: 0; transform: translateY(6px) scale(.96); pointer-events: none; }
.msc-globo::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 9px solid var(--cream);
}
.msc-globo b { color: var(--jade-dark); font-weight: 700; }

.msc-mascota-wrap {
  width: 180px; height: 180px;
  display: flex; align-items: flex-end; justify-content: center;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.msc-mascota-svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 88%; animation: msc-respira 3.8s ease-in-out infinite; }
@keyframes msc-respira { 0%,100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.028) translateY(-3px); } }
.msc-mascota-wrap.saltando .msc-mascota-svg { animation: msc-salto .6s var(--msc-rebote); }
@keyframes msc-salto {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-26px) scale(1.06,.95); }
  60% { transform: translateY(4px) scale(.97,1.04); }
  100% { transform: translateY(0) scale(1); }
}
.msc-mascota-wrap.mimo .msc-mascota-svg { animation: msc-mimo .5s ease-in-out; }
@keyframes msc-mimo { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.msc-mascota-wrap.evolucion .msc-mascota-svg { animation: msc-evol 1.1s var(--msc-rebote); }
@keyframes msc-evol {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(.4) rotate(-8deg); filter: brightness(3); }
  55% { transform: scale(1.28) rotate(6deg); filter: brightness(2.4); }
  100% { transform: scale(1) rotate(0); filter: brightness(1); }
}

/* .msc-cuerpo/.msc-brazo/.msc-aura pintan con el fill INLINE del SVG (gradiente
   por instancia rootId-gc/-ga). NO poner fill acá: url(#mscGCuerpo) era del
   prototipo y pisaba el gradiente dinámico — el color del cuerpo nunca cambiaba. */
.msc-panza { fill: rgba(230,255,244,.35); }
.msc-pie { fill: #24996C; }
.msc-ojo-blanco { fill: #F7FBF8; }
.msc-pupila { fill: #10251C; }
.msc-brillo { fill: #FFFFFF; }
.msc-cachete { fill: rgba(227,155,176,.55); }
.msc-ojos { transform-box: fill-box; transform-origin: center; animation: msc-parpadeo 4.4s infinite; }
@keyframes msc-parpadeo { 0%,95%,100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
.msc-boca { fill: none; stroke: #123227; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; display: none; }
.msc-mascota-svg.feliz .msc-boca-feliz { display: block; }
.msc-mascota-svg.neutral .msc-boca-neutral { display: block; }
.msc-mascota-svg.triste .msc-boca-triste { display: block; }
.msc-solo-1, .msc-desde-2, .msc-solo-3 { transition: opacity .3s; }
.msc-mascota-svg[data-etapa="1"] .msc-desde-2 { display: none; }
.msc-mascota-svg[data-etapa="1"] .msc-solo-3 { display: none; }
.msc-mascota-svg[data-etapa="2"] .msc-solo-1 { display: none; }
.msc-mascota-svg[data-etapa="2"] .msc-solo-3 { display: none; }
.msc-mascota-svg[data-etapa="3"] .msc-solo-1 { display: none; }
.msc-tallo { stroke: #24996C; stroke-width: 5; fill: none; stroke-linecap: round; }
.msc-hoja { fill: var(--jade-light); }
.msc-bolsa { fill: #B99655; }
.msc-bolsa-tapa { fill: #8F7440; }
.msc-bolsa-moneda { fill: var(--msc-champ-lt); }
.msc-aura { animation: msc-latir 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes msc-latir { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .85; transform: scale(1.08); } }
.msc-corona path { stroke: var(--msc-champ-lt); stroke-width: 5.5; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(200,169,106,.7)); }
.msc-chispa { fill: var(--msc-champ-lt); animation: msc-chispea 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.msc-chispa.c2 { animation-delay: .7s; }
.msc-chispa.c3 { animation-delay: 1.3s; }
@keyframes msc-chispea { 0%,100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
.msc-ojo-arco { fill: none; stroke: #10251C; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.msc-pestana { fill: none; stroke: #10251C; stroke-width: 3; stroke-linecap: round; }
.msc-ojo-estrella { fill: var(--msc-champ-lt); stroke: var(--champagne); stroke-width: 1.4; }
.msc-ojo-corazon { fill: #E56B7B; }
.msc-boca-l { fill: none; stroke: #123227; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.msc-boca-o { fill: #123227; }
.msc-lengua { fill: #E56B7B; stroke: #123227; stroke-width: 2; stroke-linejoin: round; }

.msc-corazon-fx {
  position: absolute; bottom: 60px; left: 50%; font-size: 20px; pointer-events: none;
  animation: msc-sube 1.1s ease-out forwards;
}
@keyframes msc-sube {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -100px) scale(1.1); }
}

/* ── Barras tamagotchi ── */
.msc-barras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.msc-barra { background: var(--surface); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 11px 13px; }
.msc-barra .cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.msc-barra .ico { width: 18px; height: 18px; flex: none; }
.msc-barra .nom { font-size: 12px; font-weight: 700; color: var(--tx); flex: 1; }
.msc-barra .pct { font-size: 11.5px; font-weight: 700; color: var(--tx-mute); }
.msc-barra .track { height: 8px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.msc-barra .fill { height: 100%; border-radius: 5px; width: 50%; transition: width .55s var(--ease, ease), background-color .4s; }
.msc-barra .fill.baja { background: var(--warn) !important; }
.msc-f-hambre { background: var(--jade); }
.msc-f-energia { background: var(--info); }
.msc-f-felicidad { background: var(--msc-rosa); }
.msc-f-limpieza { background: var(--jade-light); }

/* ── Meta de ahorro (real, reflejada) ── */
.msc-meta {
  background: linear-gradient(165deg, rgba(200,169,106,.1), rgba(30,36,38,.6));
  border: 1px solid rgba(200,169,106,.3); border-radius: 18px;
  padding: 15px 16px 16px; margin-top: 14px;
}
.msc-meta .m-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.msc-meta .m-tit { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--champagne); }
.msc-meta .m-monto { font-family: var(--font-display); font-size: 14.5px; color: var(--tx-soft); }
.msc-meta .m-frase { font-size: 12.5px; color: var(--tx-mute); line-height: 1.45; margin-bottom: 12px; }
.msc-meta .cordillera { position: relative; height: 30px; margin-bottom: 8px; }
.msc-meta .m-track { position: absolute; left: 0; right: 0; top: 11px; height: 9px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.msc-meta .m-fill { height: 100%; border-radius: 6px; width: 0; background: linear-gradient(90deg, var(--jade), var(--champagne)); transition: width .7s var(--ease, ease); }
.msc-meta .cima-marca { position: absolute; right: -3px; top: -2px; width: 30px; height: 26px; opacity: .5; transition: opacity .4s, transform .4s; }
.msc-meta .cima-marca path { stroke: var(--champagne); stroke-width: 3.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.msc-meta.completa .cima-marca { opacity: 1; transform: scale(1.15); }
.msc-meta .m-hitos { display: flex; justify-content: space-between; font-size: 10px; color: var(--tx-mute); font-weight: 600; }
.msc-meta .m-hitos span.on { color: var(--jade-light); }
.msc-meta .m-hitos span.on-c { color: var(--msc-champ-lt); }

/* ── Acciones ── */
.msc-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.msc-btn-alimentar {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 18px; border-radius: 15px; background: var(--jade); color: var(--on-jade);
  font-size: 15px; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(52,200,138,.22);
  transition: transform .12s var(--msc-rebote), filter .2s, opacity .3s;
  border: none; font-family: inherit; cursor: pointer;
}
.msc-btn-alimentar:hover { filter: brightness(1.06); }
.msc-btn-alimentar:active { transform: scale(.97); }
.msc-btn-alimentar:disabled { opacity: .6; cursor: default; }
.msc-acciones-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.msc-acc-sec {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border-radius: 15px; background: var(--raised);
  border: 1px solid rgba(255,255,255,.07); font-family: inherit; cursor: pointer;
  transition: transform .12s var(--msc-rebote), border-color .2s, background-color .2s;
}
.msc-acc-sec:hover { border-color: rgba(255,255,255,.2); background: #232A2C; }
.msc-acc-sec:active { transform: scale(.95); }
.msc-acc-sec:disabled { opacity: .6; cursor: default; }
.msc-acc-sec .ai { width: 22px; height: 22px; }
.msc-acc-sec .al { font-size: 11.5px; font-weight: 700; color: var(--tx); }

.msc-nota { font-size: 11px; color: var(--tx-mute); opacity: .8; margin-top: 20px; padding: 0 2px; line-height: 1.5; }

/* ── Elegir mochi (onboarding) ── */
.msc-elegir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.msc-elegir-op {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line);
  font-family: inherit; cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .12s var(--msc-rebote);
}
.msc-elegir-op:active { transform: scale(.96); }
.msc-elegir-op.sel { border-color: var(--jade); background: rgba(52,200,138,.13); }
.msc-elegir-op .mini { width: 82px; height: 82px; }
.msc-elegir-op .lbl { font-size: 12.5px; font-weight: 700; color: var(--tx); }

/* ── Personalizar (carita/ropa) ── */
.msc-pz-tabs { display: flex; gap: 6px; margin-bottom: 14px; background: var(--ink); padding: 5px; border-radius: 13px; }
.msc-tab-activo.nm-tab { background: var(--jade); color: var(--on-jade); }
.msc-pz-sec-tit { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--jade); margin: 4px 2px 10px; }
.msc-pz-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.msc-pz-op {
  width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 4px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line);
  font-family: inherit; cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .12s var(--msc-rebote);
}
.msc-pz-op:active { transform: scale(.95); }
.msc-pz-op.sel { border-color: var(--jade); background: rgba(52,200,138,.13); }
.msc-pz-op .mini { width: 44px; height: 30px; }
.msc-pz-op .swatch { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); }
.msc-pz-op .lbl { font-size: 10.5px; font-weight: 700; color: var(--tx-mute); text-align: center; line-height: 1.2; }
.msc-pz-op.sel .lbl { color: var(--tx); }
.msc-pz-nota { font-size: 12.5px; line-height: 1.5; color: var(--msc-champ-lt); background: rgba(200,169,106,.1); border: 1px solid rgba(200,169,106,.28); border-radius: 12px; padding: 11px 13px; margin-bottom: 14px; }
.msc-ropa-op {
  position: relative; width: 86px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 6px 9px; border-radius: 15px; background: var(--surface); border: 1.5px solid var(--line);
  font-family: inherit; cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .12s var(--msc-rebote);
}
.msc-ropa-op:active { transform: scale(.96); }
.msc-ropa-op .r-emoji { font-size: 26px; line-height: 1; }
.msc-ropa-op .r-nom { font-size: 11px; font-weight: 700; color: var(--tx); text-align: center; line-height: 1.2; }
.msc-ropa-op.puesto { border-color: var(--jade); background: rgba(52,200,138,.13); }
.msc-ropa-op.puesto::after { content: "\2713"; position: absolute; top: 6px; right: 9px; font-size: 12px; font-weight: 800; color: var(--jade-light); }
.msc-ropa-op.bloqueada { cursor: default; }
.msc-ropa-op.bloqueada .r-emoji { filter: grayscale(1) brightness(.6); opacity: .5; }
.msc-ropa-op.bloqueada .r-nom { color: var(--tx-mute); }
.msc-ropa-op .r-lock { position: absolute; top: 5px; right: 7px; font-size: 11px; }
.msc-ropa-op .r-cond { font-size: 9.5px; font-weight: 700; color: var(--champagne); text-align: center; line-height: 1.25; margin-top: 1px; }
.msc-pv-preview { display: flex; justify-content: center; margin: 4px 0 12px; }
.msc-pv-preview .msc-mascota-svg-wrap { width: 140px; height: 140px; }

/* ── Adivinanzas ("Jugar") ── */
.msc-lec-emoji { font-size: 36px; text-align: center; margin-bottom: 10px; }
.msc-pista { font-size: 14px; line-height: 1.5; color: var(--tx); background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 10px 13px; margin-bottom: 8px; }
.msc-pista.nueva { border-color: rgba(52,200,138,.4); animation: msc-pista-entra .4s var(--msc-rebote); }
@keyframes msc-pista-entra { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
.msc-lec-preg-final { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--tx-soft); text-align: center; margin: 10px 0 14px; }
.msc-lec-ops { display: flex; flex-direction: column; gap: 9px; }
.msc-lec-op {
  width: 100%; text-align: left; padding: 13px 15px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--tx);
  display: flex; align-items: center; gap: 11px; font-family: inherit; cursor: pointer;
  transition: transform .12s var(--msc-rebote), border-color .2s, background-color .2s;
}
.msc-lec-op:hover { border-color: rgba(255,255,255,.28); }
.msc-lec-op:active { transform: scale(.98); }
.msc-lec-op .op-ico { font-size: 20px; flex: none; }
.msc-lec-op.buena { border-color: var(--jade); background: rgba(52,200,138,.12); color: var(--jade-light); }
.msc-lec-op.suave { opacity: .5; }
.msc-lec-feedback {
  margin-top: 14px; background: rgba(52,200,138,.09); border: 1px solid rgba(52,200,138,.28);
  border-radius: 14px; padding: 14px 15px; font-size: 14px; line-height: 1.5; color: var(--tx);
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s;
}
.msc-lec-feedback.on { opacity: 1; transform: translateY(0); }
.msc-lec-feedback b { color: var(--jade); }

/* ── Fiesta (evolución) ── */
.msc-fiesta-svg { width: 120px; height: 120px; margin: 4px auto 10px; }
.msc-fiesta-central { margin: 14px 0 4px; font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.5; color: var(--msc-champ-lt); text-align: center; }

/* ── Menú (ajustes de la mascota) ── */
.msc-menu-lista { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.msc-menu-item {
  width: 100%; text-align: left; padding: 14px 6px; font-size: 14.5px; font-weight: 600; color: var(--tx);
  border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 12px;
  background: none; border-left: none; border-right: none; border-top: none; font-family: inherit; cursor: pointer;
}
.msc-menu-item:last-of-type { border-bottom: none; }
.msc-menu-item.peligro { color: var(--warn); }
.msc-menu-nota { font-size: 11.5px; color: var(--tx-mute); line-height: 1.5; margin-top: 12px; padding: 11px 13px; background: var(--ink); border-radius: 12px; }

/* ── Confeti ── */
.msc-confeti { position: fixed; inset: 0; z-index: 620; pointer-events: none; overflow: hidden; }
.msc-conf { position: absolute; top: -20px; width: 9px; height: 13px; border-radius: 2px; animation: msc-caeconf linear forwards; }
@keyframes msc-caeconf {
  0% { transform: translateY(-20px) rotate(0); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: .9; }
}

/* ── Mochi v2: puntos, cuestionario, dormir ── */
.msc-racha-chip.puntos { border-color: rgba(200,169,106,.35); background: rgba(200,169,106,.1); color: var(--msc-champ-lt); }
.msc-qz-prog { display: flex; gap: 7px; justify-content: center; margin: 2px 0 14px; }
.msc-qz-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: background-color .25s, transform .25s; }
.msc-qz-dot.actual { background: var(--jade); transform: scale(1.25); }
.msc-qz-dot.hecha { background: var(--jade-dark, #1C7E57); }
.msc-qz-preg { font-family: var(--font-display); font-size: 19px; font-weight: 500; line-height: 1.4; color: var(--tx-soft); text-align: center; margin: 6px 0 16px; }
.msc-qz-premio { text-align: center; margin: 8px 0 4px; }
.msc-qz-premio .pts { font-family: var(--font-display); font-size: 34px; color: var(--msc-champ-lt); }
.msc-qz-premio .sub { font-size: 13px; color: var(--tx-mute); margin-top: 6px; line-height: 1.5; }
.msc-noche { position: relative; border-radius: 18px; background: radial-gradient(120% 100% at 50% 0%, #101B2A 0%, #0A111C 70%); border: 1px solid rgba(111,168,227,.18); padding: 26px 16px 20px; margin: 6px 0 14px; overflow: hidden; }
.msc-noche .estrella { position: absolute; color: #BFD8F2; opacity: .7; animation: msc-titila 2.6s ease-in-out infinite; font-size: 11px; }
@keyframes msc-titila { 0%,100% { opacity: .25; } 50% { opacity: .9; } }
.msc-noche .msc-mascota-svg-wrap { width: 130px; height: 130px; margin: 0 auto; }
.msc-noche .msc-mascota-svg { animation-duration: 5.6s; }
.msc-zzz { position: absolute; left: 58%; top: 22%; font-size: 18px; font-weight: 800; color: #BFD8F2; opacity: 0; animation: msc-zzz-sube 2.8s ease-out infinite; pointer-events: none; }
.msc-zzz.z2 { animation-delay: .9s; font-size: 14px; left: 63%; }
.msc-zzz.z3 { animation-delay: 1.8s; font-size: 11px; left: 67%; }
@keyframes msc-zzz-sube { 0% { opacity: 0; transform: translateY(6px) rotate(-6deg); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-34px) rotate(10deg); } }

@media (prefers-reduced-motion: reduce) {
  .msc-mascota-svg, .msc-ojos, .msc-aura, .msc-corona, .msc-chispa, .msc-zzz, .msc-noche .estrella { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (min-width: 1024px) {
  .msc-wrap { padding: 28px 40px 40px; max-width: 640px; }
  .msc-mob-header { display: none; }
}

/* ── Fix iOS Safari auto-zoom (caso adb97bc9, reporte de Mike) ──
   Safari en iPhone hace zoom automatico al enfocar cualquier control con
   font-size < 16px, y la pagina queda ampliada tapando elementos (chat Vex
   y otros). En viewports tactiles/moviles TODOS los controles enfocables
   suben a 16px. NO usar maximum-scale/user-scalable=no (rompe el pinch-zoom
   de accesibilidad). Las clases listadas pisan sus tamanos compactos (13-15px)
   solo en movil; el desktop conserva la densidad original. */
@media (max-width: 1023px) {
  input, textarea, select,
  .input, .nm-input, .nm-select, .cd-input, .gc-input, .ob-input,
  .cmd-input, .adm-search, .inv-search, .vx-vex-input {
    font-size: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   VERTEX — Activación "Gasto primero" (js/activacion.js)
   Fuente de diseño: material/design/portal_v2/activacion_primera_cuenta.html
   Checklist de primeros pasos + tarjeta "¿Ordenamos tu casa?" (Hub) y el
   flujo guiado "Ordená tu casa" (4 pasos). El chrome de sheet (overlay,
   handle, header, campos, chips, botón guardar) reusa .nm-* ya existente;
   estas clases cubren SOLO lo nuevo (checklist, tarjeta champagne, progreso
   del wizard, celebración final).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Checklist "Primeros pasos" ── */
.act-check-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-card);
  padding: 16px 18px;
  margin-top: 14px;
}
.act-check-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-mute);
}
.act-check-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.act-check-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  font-size: 13.5px;
  color: var(--tx-mute);
}
.act-check-item.act-hecho { color: var(--tx); }
.act-check-item.act-sig   { color: var(--tx-soft); font-weight: 600; }
.act-check-extra { color: var(--tx-mute); font-weight: 400; margin-left: 4px; }  /* #5E6863 daba 3.36:1 */
.act-check-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--on-jade); font-weight: 800;
  transition: all .3s ease;
}
.act-check-item.act-hecho .act-check-dot { background: var(--jade); border-color: var(--jade); }
.act-check-item.act-sig .act-check-dot   { border-color: var(--jade); }

/* ── Tarjeta champagne "¿Ordenamos tu casa?" ── */
.act-orden-card {
  background: linear-gradient(160deg, rgba(200,169,106,.09), rgba(20,25,26,.7) 55%);
  border: 1px solid rgba(200,169,106,.35);
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
  margin-top: 14px;
}
.act-orden-titulo {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--tx);
}
.act-orden-titulo em { font-style: italic; color: var(--champagne); }
.act-orden-sub { font-size: 13px; color: var(--tx-mute); margin-top: 9px; line-height: 1.5; }
.act-orden-btn {
  width: 100%;
  background: var(--jade);
  border: none;
  border-radius: var(--r-btn);
  color: var(--on-jade);
  font-size: 14.5px;
  font-weight: 800;
  font-family: var(--font-ui);
  padding: 14px;
  margin-top: 16px;
  cursor: pointer;
  transition: filter .15s ease;
}
.act-orden-btn:hover { filter: brightness(1.07); }

/* ── Wizard "Ordená tu casa": progreso, títulos, botón secundario ── */
.act-wz-dots { display: flex; gap: 6px; justify-content: center; margin: 4px 0 14px; }
.act-wz-dot {
  width: 24px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.13);
  transition: background .3s ease;
}
.act-wz-dot-done { background: var(--jade); }
.act-wz-dot-act  { background: var(--jade-light); }
.act-wz-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jade);
  margin-bottom: 8px;
}
.act-wz-titulo {
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 27px);
  font-weight: 500;
  line-height: 1.18;
  color: var(--tx);
  margin: 0 0 8px;
}
.act-wz-titulo em { font-style: italic; color: var(--jade-light); }
.act-wz-sub { font-size: 13.5px; line-height: 1.55; color: var(--tx-mute); margin-bottom: 6px; }
.act-wz-despues {
  width: 100%;
  background: none;
  border: none;
  color: var(--tx-mute);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 12px;
  min-height: 44px;   /* medido en 42px: el unico hit target corto del recorrido */
  margin-top: 4px;
  cursor: pointer;
}
.act-wz-despues:hover { color: var(--tx); }

/* ── Paso 2: repaso de gastos ── */
.act-gasto-item {
  background: var(--raised);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 13px 14px 14px;
  margin-bottom: 10px;
}
.act-gasto-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.act-gasto-desc { font-size: 13.5px; font-weight: 600; color: var(--tx); }
.act-gasto-monto { font-size: 13.5px; font-weight: 700; }
.act-gasto-sub { font-size: 11.5px; color: var(--tx-mute); margin-top: 2px; }
.act-gasto-listo {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(52,200,138,.4);
  border-radius: var(--r-btn);
  color: var(--jade-light);
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  padding: 9px;
  margin-top: 4px;
  cursor: pointer;
}
.act-gasto-listo:hover { background: rgba(52,200,138,.1); }

/* ── Paso 4: celebración (se gana con datos reales, no en el minuto 1) ── */
.act-cel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 6px 6px;
}
.act-cel-apex { margin-bottom: 18px; }
.act-cel-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--champagne);
}
.act-cel-cifra {
  font-family: var(--font-display);
  font-size: clamp(38px, 11vw, 50px);
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--tx);
  margin-top: 12px;
}
.act-cel-cifra.act-cel-neg { color: var(--neg); }
.act-cel-sym { font-size: .42em; color: var(--tx-mute); font-family: var(--font-ui); font-weight: 600; }
.act-cel-sub { margin-top: 10px; font-size: 13.5px; color: var(--tx-mute); }
.act-cel-linea {
  margin-top: 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  color: var(--jade-light);
  max-width: 26ch;
  line-height: 1.5;
}

/* ── Confeti (mismo patrón que .msc-confeti, clases propias act-) ── */
.act-confeti { position: fixed; inset: 0; z-index: 620; pointer-events: none; overflow: hidden; }
.act-conf { position: absolute; top: -20px; width: 9px; height: 13px; border-radius: 2px; animation: act-caeconf linear forwards; }
@keyframes act-caeconf {
  0%   { transform: translateY(-20px) rotate(0); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .act-conf { animation-duration: .01ms !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   VERTEX — Hub progresivo (js/activacion.js + rHub en js/app.js)
   Fuente de diseño: material/design/portal_v2/hub_progresivo.html
   "El hub se gana su complejidad": estado 1..4 según madura el hogar.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tarjeta de invitación reutilizable (cola de UNA por vez, estados 2-3).
   Generaliza el lenguaje visual de .act-orden-card + variante jade. ── */
.act-inv-card {
  background: linear-gradient(160deg, rgba(200,169,106,.09), rgba(20,25,26,.7) 55%);
  border: 1px solid rgba(200,169,106,.35);
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
  margin-top: 14px;
}
.act-inv-card.jade {
  background: linear-gradient(160deg, rgba(52,200,138,.1), rgba(20,25,26,.7) 55%);
  border-color: rgba(52,200,138,.35);
}
.act-inv-titulo {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--tx);
}
.act-inv-titulo em { font-style: italic; color: var(--champagne); }
.act-inv-card.jade .act-inv-titulo em { color: var(--jade-light); }
.act-inv-sub { font-size: 13px; color: var(--tx-mute); margin-top: 9px; line-height: 1.55; }
.act-inv-btn {
  width: 100%;
  background: var(--jade);
  border: none;
  border-radius: var(--r-btn);
  color: var(--on-jade);
  font-size: 14.5px;
  font-weight: 800;
  font-family: var(--font-ui);
  padding: 14px;
  margin-top: 16px;
  cursor: pointer;
  transition: filter .15s ease;
}
.act-inv-btn:hover { filter: brightness(1.07); }
.act-inv-luego {
  background: none;
  border: none;
  color: var(--tx-mute);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  padding: 11px;
  width: 100%;
  margin-top: 2px;
  cursor: pointer;
}
.act-inv-luego:hover { color: var(--tx); }

/* ── Módulo "Familia" embebido (estado 3+, dispara con miembros>1). Lista
   liviana de miembros + rol; NO reusa fam-member-card de Hogar (esa trae
   wallet/transferir, demasiado pesada para el Hub). ── */
.act-fam-card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-card);
  padding: 16px 18px;
  margin-top: 14px;
}
.act-fam-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-mute);
}
.act-fam-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.act-fam-fila:last-of-type { border-bottom: none; }
.act-fam-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  background: var(--raised); border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--jade-light);
}
.act-fam-nombre {
  flex: 1; font-size: 13.5px; font-weight: 600; color: var(--tx);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.act-fam-rol {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid; border-radius: 999px; padding: 3px 9px; flex: 0 0 auto;
}
.act-fam-link {
  display: block;
  background: none; border: none; color: var(--jade);
  font-size: 12.5px; font-weight: 700; font-family: var(--font-ui);
  padding: 12px 0 0; cursor: pointer;
}
.act-fam-link:hover { filter: brightness(1.1); }

/* ── Gating por estado: [data-hub-min="N"] se oculta mientras el hogar no
   llegó al estado N. hub-estado-1..4 lo agrega rHub en el elemento raíz del
   Hub tras resolver estadoHogar(). Matriz completa en hub_progresivo.html. ── */
.hub-estado-1 [data-hub-min="2"],
.hub-estado-1 [data-hub-min="3"],
.hub-estado-1 [data-hub-min="4"],
.hub-estado-2 [data-hub-min="3"],
.hub-estado-2 [data-hub-min="4"],
.hub-estado-3 [data-hub-min="4"] {
  display: none !important;
}
@media (min-width: 1024px) {
  /* Estado 1: sin patrimonio (col derecha), la col de presupuesto/"Tu mes"
     ocupa el ancho completo en vez de dejar una columna vacía. */
  .hub-estado-1 .hub-dsk-grid-main { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   Ruta VERTEX Joven — js/educacion_joven.js. Fiel a
   material/design/portal_v2/educacion_joven.html. Tema cosmético via
   [data-ej-tema] sobre .ej-wrap. Modales reusan .nm-overlay/.nm-sheet.
   ══════════════════════════════════════════════════════════════════════ */
.ej-wrap {
  --ej-acc: var(--jade); --ej-acc-lt: var(--jade-light);
  --ej-acc-grad: linear-gradient(90deg, var(--jade), var(--jade-light));
  padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px));
  max-width: 480px;
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.ej-wrap[data-ej-tema="champan"] { --ej-acc: var(--champagne); --ej-acc-lt: var(--champagne-dark); --ej-acc-grad: linear-gradient(90deg, var(--champagne), #E4CE9C); }
.ej-wrap[data-ej-tema="aurora"]  { --ej-acc: var(--jade); --ej-acc-lt: var(--info); --ej-acc-grad: linear-gradient(90deg, var(--jade), var(--info), var(--champagne)); }
@media (min-width: 1024px) { .ej-wrap { padding: 28px 40px 40px; max-width: 640px; } }

/* ── Hero ── */
.ej-hero {
  position: relative; overflow: hidden; border-radius: 24px;
  border: 1px solid rgba(255,255,255,.07);
  background: radial-gradient(ellipse 120% 90% at 50% -10%, rgba(52,200,138,.16), transparent 58%),
              linear-gradient(174deg, #12201C 0%, #101A1B 52%, #0E1416 100%);
  padding: 20px 20px 18px;
}
.ej-hero-ojal { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--ej-acc); margin-bottom: 9px; }
.ej-hero-nivel { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.ej-hero-nombre { font-family: var(--font-display); font-weight: 500; font-size: 27px; line-height: 1.06; color: var(--tx); letter-spacing: -.01em; }
.ej-hero-nombre em { font-style: italic; color: var(--ej-acc-lt); }
.ej-hero-tramo-lbl { font-size: 12px; font-weight: 700; color: var(--champagne); }
.ej-hero-sub { font-size: 13.5px; line-height: 1.5; color: var(--tx-mute); margin-top: 6px; max-width: 34ch; }
.ej-hero-prog { margin-top: 16px; }
.ej-hero-prog-cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.ej-hero-prog-lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--tx-mute); }
.ej-hero-prog-n { font-size: 12.5px; font-weight: 700; color: var(--tx-soft); }
.ej-hero-prog-n b { color: var(--ej-acc-lt); }
.ej-track { height: 8px; border-radius: 5px; background: rgba(255,255,255,.09); overflow: hidden; }
.ej-fill { height: 100%; border-radius: 5px; width: 0; background: var(--ej-acc-grad); transition: width .8s cubic-bezier(.22,.9,.3,1); }
.ej-hero-sub2 { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 11.5px; color: var(--tx-mute); font-weight: 600; }
.ej-hero-sub2 b { color: var(--tx-soft); font-weight: 700; }
.ej-hero-chips { display: flex; gap: 8px; margin-top: 14px; }
.ej-chip { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--tx-soft); }
.ej-chip.racha { border-color: rgba(200,169,106,.28); }
.ej-chip .ic { font-size: 13px; }
.ej-chip.xp .num { color: var(--ej-acc-lt); }
.ej-chip.racha .num { color: var(--champagne-dark); }
.ej-chip .lbl { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-mute); font-weight: 700; }

/* ── Aviso fecha de nacimiento faltante ── */
.ej-aviso { background: var(--surface); border: 1px solid rgba(111,168,227,.26); border-radius: 18px; padding: 15px 16px 16px; }
.ej-aviso-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.ej-aviso-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); box-shadow: 0 0 8px var(--info); flex: none; }
.ej-aviso-tit { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--info); }
.ej-aviso-nota { font-size: 12.5px; line-height: 1.55; color: var(--tx-mute); margin-bottom: 13px; }
.ej-btn-fantasma { width: 100%; padding: 13px; border-radius: 12px; background: transparent; border: 1px solid var(--line); color: var(--tx-soft); font-size: 13.5px; font-weight: 700; font-family: var(--font-ui); cursor: pointer; transition: border-color .2s, color .2s; }
.ej-btn-fantasma:hover { border-color: var(--info); color: var(--info); }

/* ── Ruta (tramos + módulos) ── */
.ej-ruta { display: flex; flex-direction: column; gap: 4px; }
.ej-tramo-cab { display: flex; align-items: center; gap: 11px; padding: 10px 4px 12px; }
.ej-tc-num { width: 30px; height: 30px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 15px; font-weight: 600; background: var(--raised); border: 1px solid var(--line); color: var(--tx-mute); }
.ej-tramo.abierto .ej-tc-num { color: var(--ej-acc-lt); border-color: rgba(52,200,138,.45); background: rgba(52,200,138,.1); }
.ej-tramo.maestria .ej-tc-num { color: var(--champagne); border-color: rgba(200,169,106,.5); background: rgba(200,169,106,.12); }
.ej-tc-tit { flex: 1; }
.ej-tc-nom { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--tx); line-height: 1.1; }
.ej-tc-meta { font-size: 11.5px; color: var(--tx-mute); margin-top: 2px; }
.ej-tc-meta b { color: var(--champagne); font-weight: 700; }
.ej-tc-lock { font-size: 11px; font-weight: 700; color: var(--warn); background: rgba(224,178,82,.1); border: 1px solid rgba(224,178,82,.3); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }

.ej-tramo-mods { position: relative; padding-left: 4px; }
.ej-mod { position: relative; display: flex; align-items: stretch; gap: 14px; padding: 3px 0 14px 0; }
.ej-rail { position: relative; width: 30px; flex: none; display: flex; justify-content: center; }
.ej-rail::before { content: ""; position: absolute; top: 0; bottom: -14px; left: 50%; width: 2px; background: var(--line); transform: translateX(-50%); }
.ej-mod:last-child .ej-rail::before { display: none; }
.ej-nodo { position: relative; z-index: 2; margin-top: 15px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--tx-mute); }
.ej-mod.done .ej-nodo { background: var(--jade); border-color: var(--jade); color: var(--on-jade); box-shadow: 0 0 0 4px rgba(52,200,138,.14); }
.ej-mod.done.sabio .ej-nodo { background: var(--champagne); border-color: var(--champagne); color: #1E1710; box-shadow: 0 0 0 4px rgba(200,169,106,.16); }
.ej-mod-card { flex: 1; text-align: left; background: var(--surface); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 14px 15px; font-family: var(--font-ui); cursor: pointer; transition: border-color .2s, background-color .2s, transform .12s cubic-bezier(.2,1.5,.4,1); }
.ej-mod-card:hover { border-color: rgba(255,255,255,.2); background: #181E1F; }
.ej-mod-card:active { transform: scale(.985); }
.ej-mod.done .ej-mod-card { border-color: rgba(52,200,138,.24); }
.ej-mod.done.sabio .ej-mod-card { border-color: rgba(200,169,106,.28); }
.ej-mc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.ej-mc-ojal { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--jade); }
.ej-mod-card.champ .ej-mc-ojal { color: var(--champagne); }
.ej-mc-dur { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--tx-mute); }
.ej-mc-tit { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--tx); line-height: 1.18; letter-spacing: -.01em; }
.ej-mc-desc { font-size: 12.5px; line-height: 1.5; color: var(--tx-mute); margin-top: 5px; }
.ej-mc-estado { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; font-weight: 700; }
.ej-mc-estado.pend { color: var(--ej-acc-lt); }
.ej-mc-estado.hecho { color: var(--jade); }
.ej-mc-estado.hecho-s { color: var(--champagne); }

/* ── Logros ── */
.ej-logros { background: var(--surface); border: 1px solid rgba(200,169,106,.2); border-radius: 20px; padding: 17px 18px 18px; }
.ej-l-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.ej-l-tit { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--champagne); }
.ej-l-cont { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--tx-mute); }
.ej-l-cont b { color: var(--champagne); }
.ej-l-frase { font-size: 12.5px; line-height: 1.5; color: var(--tx-mute); margin-bottom: 14px; }
.ej-logros-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.ej-logro { aspect-ratio: 1; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--ink); border: 1px solid rgba(255,255,255,.06); font-family: var(--font-ui); cursor: pointer; transition: transform .12s cubic-bezier(.2,1.5,.4,1), border-color .2s; }
.ej-logro:active { transform: scale(.95); }
.ej-lg-ico { font-size: 21px; line-height: 1; filter: grayscale(1) opacity(.3); }
.ej-lg-nom { font-size: 8.5px; font-weight: 700; color: var(--tx-mute); text-align: center; line-height: 1.1; padding: 0 3px; }
.ej-logro.on { border-color: rgba(200,169,106,.4); background: linear-gradient(165deg, rgba(200,169,106,.12), var(--ink)); }
.ej-logro.on .ej-lg-ico { filter: none; }
.ej-logro.on .ej-lg-nom { color: var(--champagne); }
@media (max-width: 380px) { .ej-logros-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Reflejo ── */
.ej-reflejo { background: linear-gradient(165deg, rgba(52,200,138,.07), rgba(30,36,38,.55)); border: 1px solid rgba(52,200,138,.24); border-radius: 20px; padding: 17px 18px 18px; }
.ej-r-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ej-r-tit { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--jade); }
.ej-r-badge { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--tx-mute); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; }
.ej-r-frase { font-size: 12.5px; line-height: 1.5; color: var(--tx-mute); margin: 4px 0 14px; }
.ej-r-vacio { font-size: 13px; line-height: 1.55; color: var(--tx-mute); }
.ej-r-saldo-lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-mute); font-weight: 700; }
.ej-r-saldo { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--tx); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ej-r-stats { display: flex; gap: 10px; margin-top: 14px; }
.ej-r-stat { flex: 1; background: rgba(0,0,0,.18); border-radius: 12px; padding: 10px 12px; }
.ej-r-stat .lbl { display: block; font-size: 10.5px; color: var(--tx-mute); font-weight: 700; margin-bottom: 4px; }
/* tabular-nums: regla de oro del dinero; el split de 3 columnas compara
   "Te quedó" contra "El mes pasado" y los dígitos deben alinearse (f391). */
.ej-r-stat .val { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* A 360px las 3 celdas quedan de ~90px y el monto envolvía a 2 líneas. */
@media (max-width: 420px) {
  .ej-r-split3 { gap: 7px; }
  .ej-r-split3 .ej-r-stat { padding: 9px 8px; }
  .ej-r-split3 .val { font-size: 11.5px; }
}
.ej-r-stat .val.pos { color: var(--pos); }
.ej-r-stat .val.neg { color: var(--neg); }
.ej-r-meta { margin-top: 16px; }
.ej-r-meta-cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; font-size: 12.5px; font-weight: 700; color: var(--tx-soft); }
.ej-r-meta-fecha { font-size: 11px; color: var(--tx-mute); margin-top: 6px; }
.ej-r-insight { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-display); font-style: italic; font-size: 14px; line-height: 1.45; color: var(--champagne); }
.ej-r-insight .ico { font-style: normal; font-size: 15px; flex: none; }

/* ── Pie ── */
.ej-pie { display: flex; gap: 10px; }
.ej-pie-btn { flex: 1; padding: 13px 8px; border-radius: 14px; text-align: center; background: var(--raised); border: 1px solid rgba(255,255,255,.07); font-size: 12.5px; font-weight: 700; color: var(--tx-mute); display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-ui); cursor: pointer; transition: border-color .2s, color .2s, transform .12s cubic-bezier(.2,1.5,.4,1); }
.ej-pie-btn:hover { border-color: rgba(255,255,255,.2); color: var(--tx); }
.ej-pie-btn:active { transform: scale(.97); }

/* ── Modales (reusa .nm-overlay/.nm-sheet) ── */
.ej-sheet { max-height: 92dvh; }
.ej-m-ojal { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--jade); margin-bottom: 9px; }
.ej-m-ojal.champ { color: var(--champagne); }
.ej-m-h2 { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.14; color: var(--tx); margin-bottom: 10px; letter-spacing: -.01em; }

.ej-lec-lead { font-size: 15px; line-height: 1.6; color: var(--tx-soft); margin-bottom: 14px; }
.ej-lec-lead b { color: var(--jade-light); font-weight: 700; }
.ej-lec-clave { display: flex; gap: 12px; align-items: flex-start; background: rgba(52,200,138,.08); border: 1px solid rgba(52,200,138,.24); border-radius: 14px; padding: 13px 15px; margin-bottom: 20px; font-size: 13.5px; line-height: 1.5; color: var(--tx-soft); }
.ej-lec-clave b { color: var(--jade-light); font-weight: 700; }
.ej-lec-clave .ico { font-size: 19px; line-height: 1.3; flex: none; }

.ej-sim-ojal { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--champagne); margin-bottom: 10px; }
.ej-sim-situacion { font-size: 15.5px; line-height: 1.55; color: var(--tx); font-weight: 500; margin-bottom: 4px; }
.ej-sim-contexto { font-size: 13px; line-height: 1.5; color: var(--tx-mute); margin-bottom: 16px; }
.ej-sim-ops { display: flex; flex-direction: column; gap: 10px; }
.ej-sim-op { width: 100%; text-align: left; position: relative; padding: 15px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-family: var(--font-ui); cursor: pointer; transition: transform .12s cubic-bezier(.2,1.5,.4,1), border-color .2s, background-color .2s; }
.ej-sim-op:not(:disabled):hover { border-color: rgba(255,255,255,.28); }
.ej-sim-op .ej-so-txt { font-size: 14.5px; font-weight: 600; color: var(--tx-soft); line-height: 1.4; }
.ej-sim-op .ej-so-conse { display: none; margin-top: 11px; padding-top: 11px; border-top: 1px dashed rgba(255,255,255,.14); font-size: 13px; line-height: 1.5; color: var(--tx-mute); }
.ej-sim-op.revelada .ej-so-conse { display: block; }
.ej-sim-op.sabio { border-color: var(--jade); background: rgba(52,200,138,.1); }
.ej-sim-op.sabio .ej-so-txt { color: var(--jade-light); }
.ej-sim-op.sabio .ej-so-conse b { color: var(--jade-light); }
.ej-sim-op.pobre { border-color: rgba(216,113,76,.5); background: rgba(216,113,76,.07); }
.ej-sim-op.pobre .ej-so-conse b { color: var(--neg); }
.ej-sim-op.media { border-color: rgba(224,178,82,.45); background: rgba(224,178,82,.06); }
.ej-sim-op.media .ej-so-conse b { color: var(--warn); }
.ej-sim-op.atenuada { opacity: .5; }
.ej-sim-op .ej-so-tag { position: absolute; top: 13px; right: 14px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; display: none; }
.ej-sim-op.revelada.sabio .ej-so-tag { display: block; color: var(--jade); }
.ej-sim-op.revelada.media .ej-so-tag { display: block; color: var(--warn); }
.ej-sim-op.revelada.pobre .ej-so-tag { display: block; color: var(--neg); }

.ej-sim-cierre { margin-top: 18px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.ej-sim-cierre.on { opacity: 1; transform: translateY(0); }
.ej-sc-refl { font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.5; color: var(--champagne); margin-bottom: 4px; }
.ej-sc-xp { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--jade); background: rgba(52,200,138,.1); border: 1px solid rgba(52,200,138,.28); border-radius: 999px; padding: 6px 13px; }

.ej-btn-modal { width: 100%; margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--jade); color: var(--on-jade); font-size: 15px; font-weight: 800; font-family: var(--font-ui); cursor: pointer; transition: filter .2s, transform .12s cubic-bezier(.2,1.5,.4,1); }
.ej-btn-modal:hover { filter: brightness(1.07); }
.ej-btn-modal.champ { background: var(--champagne); color: #1E1710; }
.ej-btn-modal.fantasma { background: transparent; border: 1px solid var(--line); color: var(--tx-mute); margin-top: 10px; font-weight: 700; }
.ej-btn-modal.fantasma:hover { color: var(--tx); border-color: var(--tx-mute); }

.ej-practica-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 8px; }
.ej-practica-tally { font-size: 12px; font-weight: 700; color: var(--tx-mute); }
.ej-practica-tally b { color: var(--jade-light); }
.ej-practica-tema { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--champagne); border: 1px solid rgba(200,169,106,.3); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }

.ej-quiz-preg { font-size: 17px; line-height: 1.4; color: var(--tx); font-weight: 500; font-family: var(--font-display); margin-bottom: 16px; }
.ej-quiz-ops { display: flex; flex-direction: column; gap: 9px; }
.ej-quiz-op { width: 100%; text-align: left; padding: 14px 15px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--tx-soft); line-height: 1.4; display: flex; align-items: center; gap: 11px; font-family: var(--font-ui); cursor: pointer; transition: transform .12s cubic-bezier(.2,1.5,.4,1), border-color .2s, background-color .2s; }
.ej-quiz-op:not(:disabled):hover { border-color: rgba(255,255,255,.28); }
.ej-qo-mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.ej-quiz-op.ok { border-color: var(--jade); background: rgba(52,200,138,.1); color: var(--jade-light); }
.ej-quiz-op.ok .ej-qo-mark { border-color: var(--jade); background: var(--jade); color: var(--on-jade); }
.ej-quiz-op.mal { border-color: rgba(216,113,76,.5); background: rgba(216,113,76,.07); color: var(--neg); }
.ej-quiz-op.mal .ej-qo-mark { border-color: var(--neg); color: var(--neg); }
.ej-quiz-op.atenuada { opacity: .45; }
.ej-quiz-porque { margin-top: 15px; font-size: 13.5px; line-height: 1.55; color: var(--tx-soft); background: var(--ink); border-radius: 13px; padding: 13px 15px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.ej-quiz-porque.on { opacity: 1; transform: translateY(0); }
.ej-quiz-porque b { color: var(--jade-light); font-weight: 700; }

/* ── Menú / temas ── */
.ej-temas-tit { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--champagne); margin: 4px 0 10px; }
.ej-temas-fila { display: flex; gap: 9px; }
.ej-tema-op { flex: 1; padding: 12px 6px; border-radius: 13px; text-align: center; position: relative; background: var(--ink); border: 1px solid var(--line); font-family: var(--font-ui); cursor: pointer; transition: transform .12s cubic-bezier(.2,1.5,.4,1), border-color .2s; }
.ej-tema-op:active { transform: scale(.95); }
.ej-to-swatch { width: 30px; height: 30px; border-radius: 9px; margin: 0 auto 7px; }
.ej-to-nom { font-size: 11px; font-weight: 700; color: var(--tx-soft); }
.ej-to-lock { font-size: 9.5px; font-weight: 700; color: var(--tx-mute); margin-top: 2px; }
.ej-tema-op.sel { border-color: var(--champagne); box-shadow: inset 0 0 0 1px rgba(200,169,106,.4); }
.ej-tema-op.locked { opacity: .5; }
.ej-menu-nota { font-size: 12px; color: var(--tx-mute); line-height: 1.55; margin-top: 16px; padding: 13px 15px; background: var(--ink); border-radius: 13px; }

/* ── Confeti (mismo patrón que .msc-confeti, clases propias ej-) ── */
.ej-confeti { position: fixed; inset: 0; z-index: 620; pointer-events: none; overflow: hidden; }
.ej-conf { position: absolute; top: -20px; width: 9px; height: 13px; border-radius: 2px; animation: ej-caeconf linear forwards; }
@keyframes ej-caeconf {
  0%   { transform: translateY(-20px) rotate(0); opacity: 1; }
  100% { transform: translateY(106vh) rotate(700deg); opacity: .9; }
}

/* ══════════════════════════════════════════════════════════════════════
   GUÍA DE INICIO (js/activacion.js) — mockup material/design/mockups/
   activacion-guia/. La pregunta del Hub, el paso 2 y el paso 1 guiado del
   modal de movimiento. Reusa .act-inv-card/.act-check-*/.act-wz-dots: acá
   solo va lo que esas piezas no cubren.
   ══════════════════════════════════════════════════════════════════════ */

/* La pregunta y el paso 2 viven pegados al saludo, no al final de la página. */
.act-guia-card { margin-top: 22px; }
/* En escritorio la tarjeta se estiraba a 950px y su boton a 908: un primario de
   ese ancho rompe el tono editorial. No hay artboard de escritorio, pero la app
   se usa ahi. */
@media (min-width: 1024px) {
  .act-guia-card { max-width: 560px; margin-inline: auto; }
}

/* Encabezado de la lista de pasos, dentro de la tarjeta centrada: el texto va
   a la izquierda porque es una lista, no un título. */
.act-guia-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-mute);
  text-align: left;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.act-guia-card .act-check-list { text-align: left; }
/* Numeritos 1-2-3 en vez del tilde: acá los pasos todavía no están hechos. */
.act-guia-num { color: var(--tx-mute); }
.act-check-item.act-sig .act-guia-num { color: var(--jade); }

/* "Prefiero ver todo": segunda opción, con el mismo peso visual que un botón
   secundario. 44px mínimos de alto (hit target). */
.act-guia-todo {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px 14px;
  min-height: 44px;
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-btn);
  font-family: var(--font-ui);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease;
}
.act-guia-todo:hover { border-color: rgba(255,255,255,.24); }
.act-guia-todo-t { display: block; font-size: 14px; font-weight: 700; color: var(--tx-soft); }
.act-guia-todo-s { display: block; font-size: 12px; color: var(--tx-mute); margin-top: 3px; line-height: 1.45; }

.act-guia-paso { font-size: 11px; font-weight: 600; color: var(--tx-mute); margin: 0 0 8px; }
.act-guia-sheet-pasos { margin-bottom: 18px; }

/* Señal sobre el ojito de "Tu mes": se SEÑALA, no se destapa solo. */
.act-guia-ojo {
  position: relative;
  color: var(--jade);
  border-color: rgba(52,200,138,.45);
}
.act-guia-ojo::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 11px;
  border: 1.5px solid var(--jade);
  animation: act-guia-pulso 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes act-guia-pulso {
  0%   { opacity: .9; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.22); }
  100% { opacity: 0;  transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .act-guia-ojo::after { animation: none; opacity: .9; }
}

/* "Tu mes" antes del primer gasto: muestra la FORMA de lo que va a aparecer,
   en vez de pedir un gasto por cuarta vez. */
.hub-mes-anticipo { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 0; }
.hub-mes-anticipo-row { display: flex; align-items: center; gap: 10px; }
.hub-mes-anticipo-row > span { height: 9px; border-radius: 5px; background: rgba(255,255,255,.06); flex: none; }
.hub-mes-anticipo-row > div { flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,.04); }
.hub-mes-anticipo-row > div > i { display: block; height: 6px; border-radius: 4px; background: rgba(52,200,138,.16); }
.hub-mes-anticipo-txt {
  font-size: 12px;
  color: var(--tx-mute);
  text-align: center;
  margin-top: 12px;
  line-height: 1.45;
}

/* Paso 1 guiado del modal de movimiento: salida a la experiencia completa y
   la nota de cierre. */
.nm-ver-todos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--jade);
  cursor: pointer;
}
.nm-ver-todos:hover { color: var(--jade-light); }
.nm-chips-guia .nm-chip { min-height: 44px; }

/* ── El porque de una sugerencia (v122, HAX G11) ──
   La app decidia por el usuario y no se lo decia. Sin el motivo, cuando el dato
   propuesto no es el que esperaba no sabe si corregirlo o desconfiar de la app.
   Va como nota, no como alerta: informa, no interrumpe. */
.nm-porque {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(111,168,227,.08);
  border: 1px solid rgba(111,168,227,.22);
  color: var(--tx-soft);
  font-size: 12.5px;
  line-height: 1.45;
}
.nm-porque svg { flex: none; margin-top: 1px; color: var(--info); }
.nm-porque-campo {
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--tx-mute);
  line-height: 1.4;
}
/* A 320px el banner agregaba 90px y dejaba 18px visibles del selector de cuenta
   sobre el boton sticky: la pieza que pide revisar tapaba lo que hay que
   revisar. Medido en el gate. */
@media (max-width: 360px) {
  .nm-porque { padding: 8px 10px; margin-bottom: 10px; font-size: 12px; gap: 6px; }
}
.nm-guia-destino {
  font-size: 12.5px;
  color: var(--tx-soft);
  text-align: center;
  margin: -6px 0 14px;
  line-height: 1.45;
}
.nm-guia-destino strong { color: var(--tx); font-weight: 700; }
.nm-guia-nota {
  font-size: 12px;
  color: var(--tx-mute);
  text-align: center;
  margin-top: 12px;
  line-height: 1.45;
}