/* ==========================================================================
   Niwwi · Luces (2026-10-21)
   A visual layer on top of mova-rediseno.css. Same screens, same buttons,
   same places; what changes is light, colour, symbols and feel.

   Idea: Niwwi is her desk at night. Every concept has its own light colour
   (Personal violet, Helion pink, Virtuality blue, income mint, spending
   coral, debts amber, savings lilac) and shows it as a small lit key
   (icon chip). By day the keys are tinted; at night they glow softly.

   Loaded last. Only active when <html data-luces> is set by
   mova-boot-theme.js, so removing that attribute brings back the previous
   look instantly (localStorage "niwwi.luces" = "off").
   Only transform/opacity animate. Nothing loops forever.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

html[data-luces] {
  --lz-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --lz-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --lz-press: 140ms;
  --lz-r-key: 12px;
  --lz-r-card: 18px;
  --lz-r-btn: 13px;
  --lz-r-pill: 999px;
}

/* Formal · día */
html[data-luces][data-theme="light"]:not([data-appearance="kawaii"]) {
  --nw-bg: #F4F2FA;
  --nw-side: #FBFAFE;
  --nw-surface: #FFFFFF;
  --nw-surface-2: #F3F0FA;
  --nw-surface-3: #E8E3F6;
  --nw-line: #E6E1F1;
  --nw-line-strong: #D0C7E6;
  --nw-ink: #2A2446;
  --lz-title: #3A2A99;
  --nw-muted: #645E7E;
  --nw-accent: #6246EA;
  --nw-accent-ink: #FFFFFF;
  --nw-accent-soft: #EEEAFD;
  --nw-accent-text: #4F33D2;
  --nw-pos: #0B7F5C;
  --nw-warn: #9A5B00;
  --nw-neg: #C9304A;
  --nw-pos-soft: #E1F4EC;
  --nw-warn-soft: #FBEFD9;
  --nw-neg-soft: #FCE7EA;
  --nw-helion: #C02A78;
  --nw-virtuality: #1F5FD9;
  --nw-shadow: 0 1px 2px rgba(40, 28, 90, 0.05), 0 6px 18px -12px rgba(40, 28, 90, 0.18);
  --nw-shadow-pop: 0 18px 44px -14px rgba(40, 28, 90, 0.3);
  --nw-title-grad: linear-gradient(100deg, #2E1A8F 0%, #6246EA 50%, #B42F86 100%);
  --nw-hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(255, 150, 215, 0.24) 0%, transparent 46%), linear-gradient(140deg, #24137A 0%, #4A2FD0 50%, #6E3AD6 100%);
  --nw-hero-neg: radial-gradient(120% 140% at 100% 0%, rgba(255, 170, 120, 0.3) 0%, transparent 46%), linear-gradient(140deg, #6A1530 0%, #A8243F 55%, #C7445A 100%);
  --nw-hero-of: #FFD6EE;
  --nw-glow: rgba(98, 70, 234, 0.42);
  --lz-key-depth: 0 1px 0 rgba(40, 28, 90, 0.06);
  --lz-glow-k: 0;
  --lz-violet: #6246EA;
  --lz-pink: #D02F7F;
  --lz-blue: #2563EB;
  --lz-mint: #0E9470;
  --lz-coral: #E0433F;
  --lz-amber: #D17B00;
  --lz-lilac: #8B5CF6;
  --lz-slate: #5E5A7A;
  --lz-sky: #0B86C9;
}

/* Formal · noche */
html[data-luces][data-theme="dark"]:not([data-appearance="kawaii"]) {
  --nw-bg: #0E0C1B;
  --nw-side: #110F21;
  --nw-surface: #17142A;
  --nw-surface-2: #1F1B36;
  --nw-surface-3: #2A2547;
  --nw-line: #29253F;
  --nw-line-strong: #3D375E;
  --nw-ink: #F2EFFC;
  --lz-title: #D2C8FF;
  --nw-muted: #A6A0C4;
  --nw-accent: #9D88FF;
  --nw-accent-ink: #120F26;
  --nw-accent-soft: #241F48;
  --nw-accent-text: #BCAEFF;
  --nw-pos: #4FDBA5;
  --nw-warn: #F7C55E;
  --nw-neg: #FF8D9B;
  --nw-pos-soft: #12302A;
  --nw-warn-soft: #342A17;
  --nw-neg-soft: #3A1B2A;
  --nw-helion: #FF8FC9;
  --nw-virtuality: #82B6FF;
  --nw-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  --nw-shadow-pop: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  --nw-title-grad: linear-gradient(100deg, #F4F0FF 0%, #BCAEFF 48%, #FF9CD2 100%);
  --nw-hero-bg: radial-gradient(120% 140% at 100% 0%, rgba(255, 130, 205, 0.2) 0%, transparent 46%), linear-gradient(140deg, #24136F 0%, #4A2DCC 52%, #7036CE 100%);
  --nw-hero-neg: radial-gradient(120% 140% at 100% 0%, rgba(255, 150, 110, 0.26) 0%, transparent 46%), linear-gradient(140deg, #5A1129 0%, #93203A 55%, #B23B53 100%);
  --nw-hero-of: #FFD3EC;
  --nw-glow: rgba(157, 136, 255, 0.55);
  --lz-key-depth: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --lz-glow-k: 1;
  --lz-violet: #A893FF;
  --lz-pink: #FF8FC9;
  --lz-blue: #7FB0FF;
  --lz-mint: #4FDBA5;
  --lz-coral: #FF8D86;
  --lz-amber: #F7C55E;
  --lz-lilac: #C3A6FF;
  --lz-slate: #B3AECF;
  --lz-sky: #6CCBFF;
}

/* Gamer cute · cuarto de día */
html[data-luces][data-appearance="kawaii"][data-theme="light"] {
  --nw-font-label: var(--nw-font);
  --nw-bg: #FAF5FD;
  --nw-grid: transparent;
  --nw-side: #FFFCFF;
  --nw-surface: #FFFFFF;
  --nw-surface-2: #F8F0FC;
  --nw-surface-3: #F0E3F8;
  --nw-line: #EEE1F6;
  --nw-line-strong: #DCC7EC;
  --nw-ink: #352A56;
  --lz-title: #5A2BC2;
  --nw-muted: #6B6087;
  --nw-accent: #7A45FF;
  --nw-accent-ink: #FFFFFF;
  --nw-accent-soft: #F1E9FF;
  --nw-accent-text: #6131EE;
  --nw-led: #FF5CB6;
  --nw-led-ink: #FFFFFF;
  --nw-pos: #0B8461;
  --nw-warn: #9C5A00;
  --nw-neg: #CF2F5E;
  --nw-pos-soft: #E0F5EC;
  --nw-warn-soft: #FCEFD8;
  --nw-neg-soft: #FDE6EE;
  --nw-helion: #CC2C7D;
  --nw-virtuality: #2667E8;
  --nw-shadow: 0 1px 0 rgba(122, 69, 255, 0.06), 0 10px 24px -16px rgba(122, 69, 255, 0.35);
  --nw-shadow-pop: 0 22px 50px -18px rgba(90, 40, 170, 0.34);
  --nw-title-grad: linear-gradient(100deg, #5B25E0 0%, #9A3CF0 45%, #F0479E 100%);
  --nw-hero-bg: radial-gradient(110% 130% at 100% 0%, rgba(255, 150, 220, 0.55) 0%, transparent 50%), radial-gradient(90% 120% at 0% 100%, rgba(120, 190, 255, 0.4) 0%, transparent 55%), linear-gradient(140deg, #5A28E6 0%, #8B3EEA 52%, #D84AA6 100%);
  --nw-hero-neg: radial-gradient(110% 130% at 100% 0%, rgba(255, 180, 140, 0.4) 0%, transparent 50%), linear-gradient(140deg, #7A1943 0%, #B12A5D 55%, #D3487A 100%);
  --nw-hero-of: #FFE3F4;
  --nw-glow: rgba(240, 90, 190, 0.42);
  --nw-led-a: #FF5CB6;
  --nw-led-b: #7CC4FF;
  --nw-led-idle: 1;
  --nw-r-card: 18px;
  --lz-key-depth: 0 2px 0 rgba(122, 69, 255, 0.1);
  --lz-glow-k: 0;
  --lz-r-card: 20px;
  --lz-violet: #7A45FF;
  --lz-pink: #E63A93;
  --lz-blue: #2F7BF0;
  --lz-mint: #0E9A72;
  --lz-coral: #EE4A63;
  --lz-amber: #D88100;
  --lz-lilac: #A35BFF;
  --lz-slate: #6B6087;
  --lz-sky: #1C9AE0;
}

/* Gamer cute · cuarto de noche (the lights stay on) */
html[data-luces][data-appearance="kawaii"][data-theme="dark"] {
  --nw-font-label: var(--nw-font);
  --nw-bg: #0F0B22;
  --nw-haze: transparent;
  --nw-side: #120E28;
  --nw-surface: #191433;
  --nw-surface-2: #221B43;
  --nw-surface-3: #2D2454;
  --nw-line: #2F2758;
  --nw-line-strong: #463B7C;
  --nw-ink: #F7F2FF;
  --lz-title: #EBD9FF;
  --nw-muted: #B2A8D8;
  --nw-accent: #B79CFF;
  --nw-accent-ink: #120D2A;
  --nw-accent-soft: #2A2158;
  --nw-accent-text: #CDBBFF;
  --nw-led: #FF8AD0;
  --nw-led-ink: #1B0F2E;
  --nw-pos: #6FF0C1;
  --nw-warn: #FFD27A;
  --nw-neg: #FF92B4;
  --nw-pos-soft: #143A35;
  --nw-warn-soft: #3A3122;
  --nw-neg-soft: #3F1F3F;
  --nw-helion: #FF9AD6;
  --nw-virtuality: #8FC8FF;
  --nw-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(183, 156, 255, 0.04), 0 14px 34px -20px rgba(0, 0, 0, 0.9);
  --nw-shadow-pop: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 26px 60px -20px rgba(0, 0, 0, 0.9);
  --nw-title-grad: linear-gradient(100deg, #FFF6FF 0%, #D2BEFF 42%, #FF9AD6 78%, #8FC8FF 100%);
  --nw-hero-bg: radial-gradient(110% 130% at 100% 0%, rgba(255, 130, 210, 0.5) 0%, transparent 50%), radial-gradient(90% 120% at 0% 100%, rgba(110, 180, 255, 0.35) 0%, transparent 55%), linear-gradient(140deg, #3B1DB0 0%, #6E35DE 50%, #B13FB4 100%);
  --nw-hero-neg: radial-gradient(110% 130% at 100% 0%, rgba(255, 160, 120, 0.32) 0%, transparent 50%), linear-gradient(140deg, #5B1238 0%, #8F2251 55%, #B23C6B 100%);
  --nw-hero-of: #FFE0F2;
  --nw-glow: rgba(255, 138, 208, 0.5);
  --nw-led-a: #FF8AD0;
  --nw-led-b: #8FC8FF;
  --nw-led-idle: 1;
  --nw-r-card: 18px;
  --lz-key-depth: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --lz-glow-k: 1;
  --lz-r-card: 20px;
  --lz-violet: #BBA2FF;
  --lz-pink: #FF8AD0;
  --lz-blue: #8FC8FF;
  --lz-mint: #6FF0C1;
  --lz-coral: #FF9A9A;
  --lz-amber: #FFD27A;
  --lz-lilac: #D3A8FF;
  --lz-slate: #BDB4E0;
  --lz-sky: #7AD8FF;
}

/* ------------------------------------------------------------ base ground */

html[data-luces] body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html[data-luces] ::selection { background: color-mix(in srgb, var(--nw-accent) 28%, transparent); }

/* The grid-paper and haze grounds give way to clean light. The room's lamps
   and stars are painted on the page ground itself (static, no extra layer). */
html[data-luces][data-theme] body #app,
html[data-luces][data-theme] body .main,
html[data-luces][data-theme] body .app-shell { background: transparent !important; background-image: none !important; }
html[data-luces][data-theme] { background: var(--nw-bg) !important; }
html[data-luces][data-theme] body { background: var(--lz-ground, none), var(--nw-bg) !important; background-attachment: fixed !important; background-repeat: no-repeat !important; }
@media (max-width: 760px) { html[data-luces][data-theme] body { background-attachment: scroll !important; background-size: 100% 100vh !important; } }

/* Formal at night: one cool lamp in the corner. */
html[data-luces][data-theme="dark"]:not([data-appearance="kawaii"]) {
  --lz-ground: radial-gradient(60vmax 40vmax at 100% -10%, rgba(120, 95, 255, 0.13), transparent 70%);
}
/* Gamer cute by day: two soft lamps in the corners of the room. */
html[data-luces][data-appearance="kawaii"][data-theme="light"] {
  --lz-ground:
    radial-gradient(48vmax 36vmax at 102% -6%, rgba(255, 120, 200, 0.16), transparent 70%),
    radial-gradient(44vmax 34vmax at -8% 22%, rgba(130, 190, 255, 0.16), transparent 70%);
}
/* Gamer cute at night: lights off, a few stars and the lamps still glowing. */
html[data-luces][data-appearance="kawaii"][data-theme="dark"] {
  --lz-ground:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 64%, rgba(255, 220, 245, 0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 47% 9%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.1px 1.1px at 63% 41%, rgba(200, 225, 255, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 81% 22%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 71%, rgba(255, 210, 240, 0.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 7% 86%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 38% 92%, rgba(210, 230, 255, 0.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 88%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1px 1px at 55% 58%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(50vmax 38vmax at 104% -8%, rgba(255, 110, 200, 0.16), transparent 70%),
    radial-gradient(46vmax 36vmax at -10% 30%, rgba(110, 160, 255, 0.14), transparent 70%);
}

/* ------------------------------------------------------------- typography */

/* Labels in sentence case: calmer and easier to read than tracked capitals. */
html[data-luces][data-theme] body #app :is(#page .kpi-label, #page .section-label, #page .eyebrow, .sidebar .nav-label,
  #page .nw-inicio-kicker, #page .nw-inicio-label, #page .debt-position-overview article > span, #page .debt-summary-grid article > span,
  #page .registry-kpi > span, #page .history-kpi > span, #page .revolving-metrics small, #page .revolving-primary > span,
  #page .debt-period-box > span, #page .accounts-current-summary > span, #page .accounts-current-summary small,
  #page .simple-kpi > span:not(.niwwi-kpi-emblem)) {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--nw-font) !important;
}
html[data-luces][data-theme] body #app :is(#page .kpi-label, #page .eyebrow, #page .section-label) {
  font-weight: 700 !important;
  font-size: 12.5px !important;
}
html[data-luces][data-theme] body #app .sidebar .nav-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: color-mix(in srgb, var(--nw-muted) 80%, transparent) !important;
}
/* Older layers set many labels in capitals by CSS ("Ingresos del mes" shown as INGRESOS DEL MES):
   Luces reads them as written. Labels written in capitals are handled above and by mova-luces.js. */
html[data-luces][data-theme] body :is(#app #page, #app .sidebar, #app .topbar, .mova-mobile-bottom-nav, #modal, .mova-mobile-register-sheet) * {
  text-transform: none !important;
}

/* Numbers: one family, tabular, tight. */
html[data-luces][data-theme] body #app :is(#page, .sidebar) :is(.simple-value, .account-balance, .kpi-value, .money-value, strong, b, .nw-inicio-big, td) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* Section titles: no extra bar under every heading. */
html[data-luces][data-theme][data-theme] body #app #page :is(.simple-section-head, .section-title-row, .history-section-head, .analysis-card-head, .section-heading, .preference-section-head, .settings-section-head) h2::after {
  display: none !important;
}
html[data-luces][data-theme] body #app #page :is(h2, h3) { letter-spacing: -0.015em; }
/* Some words in colour, not all: section titles take the deep violet of the
   room (light pink-lilac at night), the small labels over a figure lean
   to violet, and the body text is a soft ink instead of near black. */
html[data-luces][data-theme][data-theme] body #app #page :is(.card, section) > h2,
html[data-luces][data-theme][data-theme] body #app #page :is(.simple-section-head, .section-title-row, .history-section-head, .analysis-card-head, .section-heading, .preference-section-head, .settings-section-head) h2 {
  color: var(--lz-title) !important;
}
html[data-luces][data-theme][data-theme] body #app #page :is(.kpi-label, .section-label, .eyebrow, .simple-kpi > span:not(.niwwi-kpi-emblem), .registry-kpi > small, .history-kpi > small, .debt-summary-grid article > span) {
  color: color-mix(in srgb, var(--lz-title) 42%, var(--nw-muted)) !important;
}

/* -------------------------------------------------------- the lit keys */

/* Icon chips take the colour of what they mean. The colour lives in
   --lz-hue, set per element below; the chip tints itself from it. */
html[data-luces][data-theme] body #app :is(.nav-icon, .niwwi-title-symbol, .niwwi-kpi-emblem, .nw-inicio-q-icon, .lz-key) {
  --lz-hue: var(--lz-violet);
}
html[data-luces][data-theme][data-theme] body #app :is(.niwwi-kpi-emblem, .nw-inicio-q-icon, .lz-key) {
  display: inline-grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: var(--lz-r-key) !important;
  color: var(--lz-hue) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lz-hue) 20%, var(--nw-surface)) 0%, color-mix(in srgb, var(--lz-hue) 11%, var(--nw-surface)) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--lz-hue) 22%, transparent) !important;
  box-shadow: var(--lz-key-depth), 0 0 calc(var(--lz-glow-k) * 18px) calc(var(--lz-glow-k) * -4px) color-mix(in srgb, var(--lz-hue) 55%, transparent) !important;
}
html[data-luces][data-theme][data-theme] body #app :is(.niwwi-kpi-emblem, .nw-inicio-q-icon, .lz-key) .mova-icon {
  width: 20px !important;
  height: 20px !important;
}
html[data-luces][data-theme] body #app .nw-inicio-q-icon.tone-neg { --lz-hue: var(--lz-coral); }
html[data-luces][data-theme] body #app .nw-inicio-q-icon.tone-warn { --lz-hue: var(--lz-amber); }
html[data-luces][data-theme] body #app .nw-inicio-q-icon.tone-acc { --lz-hue: var(--lz-violet); }
html[data-luces][data-theme] body #app .nw-inicio-q-icon.tone-hel { --lz-hue: var(--lz-pink); }
html[data-luces][data-theme] body #app .nw-inicio-q-icon.tone-pos { --lz-hue: var(--lz-mint); }
html[data-luces][data-theme] body #app .nw-inicio-q-icon.tone-blue { --lz-hue: var(--lz-blue); }
html[data-luces][data-theme] body #app li:nth-child(3) > .nw-inicio-q .nw-inicio-q-icon.tone-acc { --lz-hue: var(--lz-blue); }

/* Inicio KPI emblems by card. */
html[data-luces][data-theme] body #app #page .account-balance-kpi .niwwi-kpi-emblem { --lz-hue: var(--lz-violet); }
html[data-luces][data-theme] body #app #page .niwwi-spendable-kpi .niwwi-kpi-emblem { --lz-hue: #FFFFFF; }
html[data-luces][data-theme] body #app #page .actual-flow-kpi .niwwi-kpi-emblem { --lz-hue: var(--lz-mint); }
html[data-luces][data-theme] body #app #page .simple-kpi.negative .niwwi-kpi-emblem { --lz-hue: var(--lz-coral); }
html[data-luces][data-theme] body #app #page .simple-kpi.debt .niwwi-kpi-emblem { --lz-hue: var(--lz-amber); }
html[data-luces][data-theme] body #app #page .simple-kpi.positive:not(.niwwi-spendable-kpi) .niwwi-kpi-emblem { --lz-hue: var(--lz-mint); }
html[data-luces][data-theme][data-theme] body #app #page .niwwi-spendable-kpi .niwwi-kpi-emblem {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* ------------------------------------------------------------ top bar */

html[data-luces][data-theme] body .topbar {
  /* Opaque, the same colour as the page ground: the phone status bar (theme-color) continues it seamlessly. */
  background: var(--nw-bg) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--nw-line) 70%, transparent) !important;
}
/* The light strip: a fairy-light line under the bar. */
html[data-luces][data-theme] body .topbar::after {
  height: 2px;
  background: linear-gradient(90deg, var(--lz-pink), var(--lz-violet) 45%, var(--lz-blue));
  opacity: 0.55;
}
html[data-luces][data-appearance="kawaii"] body .topbar::after { height: 2.5px; opacity: 0.95; box-shadow: 0 0 calc(var(--lz-glow-k) * 12px) color-mix(in srgb, var(--lz-pink) 70%, transparent); }
html[data-luces][data-theme] body .topbar :is(.icon-button, .niwwi-theme-toggle, .nw-inicio-bell, .nw-inicio-month) {
  border-radius: 14px !important;
  background: var(--nw-surface) !important;
  border: 1px solid var(--nw-line) !important;
  box-shadow: var(--lz-key-depth) !important;
  transition: transform var(--lz-press) var(--lz-ease-out), background-color 160ms ease;
}
html[data-luces][data-theme] body .topbar :is(.icon-button, .niwwi-theme-toggle, .nw-inicio-bell):active { transform: scale(0.94); }
html[data-luces][data-theme] body .topbar .nw-inicio-bell-count,
html[data-luces][data-theme] body .sidebar [data-fv-notification-count] {
  background: linear-gradient(135deg, var(--lz-coral), var(--lz-pink)) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--nw-bg) !important;
  font-weight: 800 !important;
}
html[data-luces][data-theme] body .niwwi-theme-toggle { color: var(--lz-amber) !important; }
html[data-luces][data-theme="dark"] body .niwwi-theme-toggle { color: var(--lz-lilac) !important; }

/* --------------------------------------------------------------- sidebar */

html[data-luces][data-theme] body #app .sidebar {
  background: var(--nw-side) !important;
  border-right: 1px solid var(--nw-line) !important;
}
html[data-luces][data-theme][data-theme] body #app .sidebar .nav-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 10px !important;
  color: var(--lz-hue) !important;
  background: color-mix(in srgb, var(--lz-hue) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--lz-hue) 16%, transparent) !important;
  transition: transform 160ms var(--lz-ease-out), background-color 160ms ease;
}
html[data-luces][data-theme][data-theme] body #app .sidebar .nav-icon .mova-icon { width: 17px; height: 17px; }
html[data-luces][data-theme] body #app .sidebar [data-page="dashboard"] .nav-icon { --lz-hue: var(--lz-violet); }
html[data-luces][data-theme] body #app .sidebar [data-page="registro-visualizador"] .nav-icon { --lz-hue: var(--lz-blue); }
html[data-luces][data-theme] body #app .sidebar [data-page="historial"] .nav-icon { --lz-hue: var(--lz-lilac); }
html[data-luces][data-theme] body #app .sidebar [data-registry-menu] .nav-icon { --lz-hue: var(--lz-amber); }
html[data-luces][data-theme] body #app .sidebar [data-page="movimientos"] .nav-icon { --lz-hue: var(--lz-sky); }
html[data-luces][data-theme] body #app .sidebar [data-page="deudas"] .nav-icon { --lz-hue: var(--lz-coral); }
html[data-luces][data-theme] body #app .sidebar [data-page="ahorros"] .nav-icon { --lz-hue: var(--lz-mint); }
html[data-luces][data-theme] body #app .sidebar [data-page="calendar"] .nav-icon { --lz-hue: var(--lz-amber); }
html[data-luces][data-theme] body #app .sidebar [data-page="cuentas"] .nav-icon { --lz-hue: var(--lz-violet); }
html[data-luces][data-theme] body #app .sidebar [data-page="analisis"] .nav-icon { --lz-hue: var(--lz-pink); }
html[data-luces][data-theme] body #app .sidebar [data-config-menu] .nav-icon { --lz-hue: var(--lz-slate); }
html[data-luces][data-theme][data-theme] body #app .sidebar :is(.nav-item, .nav-subitem) {
  border-radius: 12px !important;
  transition: background-color 160ms ease, transform var(--lz-press) var(--lz-ease-out);
}
html[data-luces][data-theme][data-theme] body #app .sidebar :is(.nav-item, .nav-subitem):active { transform: scale(0.98); }
html[data-luces][data-theme][data-theme] body #app .sidebar :is(.nav-item, .nav-subitem).active {
  background: var(--nw-surface) !important;
  color: var(--nw-ink) !important;
  border-color: var(--nw-line) !important;
  box-shadow: var(--nw-shadow) !important;
}
html[data-luces][data-theme][data-theme] body #app .sidebar .nav-item.active .nav-icon {
  color: #FFFFFF !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lz-hue) 88%, #FFFFFF), var(--lz-hue)) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--lz-hue) 80%, transparent) !important;
}
html[data-luces][data-theme="dark"][data-theme] body #app .sidebar .nav-item.active .nav-icon { color: var(--nw-accent-ink) !important; }
html[data-luces][data-theme="dark"][data-theme] body #app .sidebar :is(.nav-item, .nav-subitem).active {
  background: var(--nw-surface-2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 22px -10px var(--nw-glow) !important;
}
html[data-luces][data-theme][data-theme] body #app .sidebar .nav-subitem.active { color: var(--nw-accent-text) !important; box-shadow: none !important; background: var(--nw-accent-soft) !important; border-color: transparent !important; }
@media (hover: hover) and (pointer: fine) {
  html[data-luces][data-theme][data-theme] body #app .sidebar .nav-item:not(.active):hover .nav-icon { transform: translateY(-1px); background: color-mix(in srgb, var(--lz-hue) 20%, transparent) !important; }
}
/* The brand: the N mark gets a soft lamp behind it. */
html[data-luces][data-theme] body #app .sidebar .brand-mark { filter: drop-shadow(0 6px 12px var(--nw-glow)); }

/* Sync status in the sidebar foot: the three sources as lit dots. */
html[data-luces][data-theme] body .sync-source[data-state] b::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--lz-amber);
  box-shadow: 0 0 calc(var(--lz-glow-k) * 8px) var(--lz-amber);
}
html[data-luces][data-theme] body .sync-source:is([data-state="fresh"], [data-state="ok"], [data-state="current"], [data-state="success"]) b::before { background: var(--lz-mint); box-shadow: 0 0 calc(var(--lz-glow-k) * 8px) var(--lz-mint); }
html[data-luces][data-theme] body .sync-source:is([data-state="error"], [data-state="failed"], [data-state="stale"]) b::before { background: var(--lz-coral); box-shadow: 0 0 calc(var(--lz-glow-k) * 8px) var(--lz-coral); }

/* ------------------------------------------------------- phone bottom dock */

@media (max-width: 760px) {
  html[data-luces][data-theme] body .mova-mobile-bottom-nav {
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--nw-side) 90%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--nw-line-strong) 60%, transparent) !important;
    box-shadow: var(--nw-shadow-pop), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }
  @supports (backdrop-filter: blur(1px)) {
    html[data-luces][data-theme] body .mova-mobile-bottom-nav {
      background: color-mix(in srgb, var(--nw-side) 76%, transparent) !important;
      -webkit-backdrop-filter: saturate(1.7) blur(18px) !important;
      backdrop-filter: saturate(1.7) blur(18px) !important;
    }
  }
  html[data-luces][data-theme] body .mova-mobile-bottom-nav::before {
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--nw-accent) 14%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nw-accent) 22%, transparent), 0 0 calc(var(--lz-glow-k) * 20px) calc(var(--lz-glow-k) * -6px) var(--nw-glow) !important;
  }
  html[data-luces][data-theme] body .mova-mobile-bottom-nav button { transition: transform var(--lz-press) var(--lz-ease-out), color 160ms ease; }
  html[data-luces][data-theme] body .mova-mobile-bottom-nav button:active { transform: scale(0.92); }
  html[data-luces][data-theme] body .mova-mobile-bottom-nav button.active { color: var(--nw-accent-text) !important; font-weight: 800 !important; box-shadow: none !important; }
  html[data-luces][data-theme] body .mova-mobile-bottom-nav button.active .mova-icon { transform: translateY(-1px); }
  /* Registrar: the one lit key. */
  html[data-luces][data-theme] body .mova-mobile-bottom-nav [data-mobile-register] > span:first-child {
    width: 40px !important;
    height: 34px !important;
    border-radius: 13px !important;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, var(--lz-pink) 0%, var(--nw-accent) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 18px -8px var(--nw-glow) !important;
  }
}

/* ---------------------------------------------------------- page header */

html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}
html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header::before,
html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header::after { display: none !important; }
html[data-luces][data-theme][data-theme] body #app #page .niwwi-title-symbol {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
  background: radial-gradient(120% 120% at 100% 0%, rgba(255, 160, 220, 0.6), transparent 55%), linear-gradient(140deg, var(--nw-accent), color-mix(in srgb, var(--nw-accent) 60%, var(--lz-pink))) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 22px -10px var(--nw-glow) !important;
}
html[data-luces][data-theme="dark"][data-theme] body #app #page .niwwi-title-symbol { color: #FFFFFF !important; }
html[data-luces][data-theme][data-theme] body #app #page .niwwi-title-symbol .mova-icon { width: 22px !important; height: 22px !important; }
html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-title { gap: 12px !important; }
html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header h1 { letter-spacing: -0.035em !important; font-weight: 800 !important; }
html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header p { color: var(--nw-muted) !important; }
@media (max-width: 760px) {
  html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header { padding-top: 4px !important; padding-bottom: 0 !important; margin-bottom: 2px !important; min-height: 0 !important; }
  html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header h1 { font-size: 26px !important; line-height: 1.1 !important; }
  html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header > div > p { display: none !important; }
  html[data-luces][data-theme][data-theme] body #app #page .niwwi-title-symbol { width: 38px !important; height: 38px !important; min-width: 38px !important; border-radius: 12px !important; }
  html[data-luces][data-theme][data-theme] body #app #page .niwwi-title-symbol .mova-icon { width: 20px !important; height: 20px !important; }
}

/* ----------------------------------------------------------------- cards */

html[data-luces][data-theme][data-theme] body #app #page :is(.card, .simple-kpi, .registry-kpi, .history-kpi, .account-card, .debt-account-card,
  .saving-goal-card, .catalog-card, .settings-account-card, .recurring-subscription-card, .accounts-current-summary, .registry-type-card,
  .registry-business-panel, .dashboard-platform-activity, .debt-position-overview article, .debt-summary-grid > article, .analysis-toolbar, .movement-filter-shell,
  .nw-inicio-questions):not(.settings-credit-card, .company-theme-card, .niwwi-spendable-kpi, .accounts-current-summary, :is(.card, .simple-kpi) :is(.card, .simple-kpi)) {
  border-radius: var(--lz-r-card) !important;
  border: 1px solid var(--nw-line) !important;
  background: var(--nw-surface) !important;
  box-shadow: var(--nw-shadow) !important;
}
/* Gamer cute: the window strip on top of every card goes; a hairline of light instead. */
html[data-luces][data-appearance="kawaii"][data-theme] body #app #page :is(.card, .simple-kpi, .account-card, .debt-account-card, .saving-goal-card,
  .catalog-card, .settings-account-card, .recurring-subscription-card, .registry-type-card, .registry-business-panel,
  .dashboard-platform-activity):not(.settings-credit-card, .company-theme-card, .accounts-current-summary, .niwwi-spendable-kpi, :is(.card, .simple-kpi) :is(.card, .simple-kpi)) {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--lz-pink) 50%, transparent) 30%, color-mix(in srgb, var(--lz-blue) 50%, transparent) 70%, transparent) top / 100% 1px no-repeat,
    var(--nw-surface) !important;
}
html[data-luces][data-appearance="kawaii"][data-theme] body #app #page .niwwi-page-header { background: transparent !important; }
/* Boxes inside a card: one quiet step down. */
html[data-luces][data-theme][data-theme] body #app #page :is(.card, .simple-kpi) :is(.card, .simple-kpi, .money-summary-detail, .debt-period-box, .niwwi-spendable-detail) {
  border-radius: 14px !important;
}

/* --------------------------------------------------------------- buttons */

/* Primary: a lit key. */
html[data-luces][data-theme][data-theme] body :is(#app, #modal, .modal, .mova-mobile-register-sheet) :is(.primary-action, .action-btn.primary-action, .registry-save, button.primary, .registry-ai-action) {
  border: 0 !important;
  border-radius: var(--lz-r-btn) !important;
  color: #FFFFFF !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nw-accent) 82%, #FFFFFF) -40%, var(--nw-accent) 60%, color-mix(in srgb, var(--nw-accent) 80%, var(--lz-pink)) 140%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 1px 2px rgba(30, 10, 80, 0.2), 0 10px 22px -12px var(--nw-glow) !important;
  font-weight: 750 !important;
  letter-spacing: -0.005em !important;
  transition: transform var(--lz-press) var(--lz-ease-out), box-shadow 200ms ease, filter 160ms ease !important;
}
html[data-luces][data-theme="dark"][data-theme] body :is(#app, #modal, .modal, .mova-mobile-register-sheet) :is(.primary-action, .action-btn.primary-action, .registry-save, button.primary, .registry-ai-action) {
  color: var(--nw-accent-ink) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nw-accent) 70%, #FFFFFF) -30%, var(--nw-accent) 55%, color-mix(in srgb, var(--nw-accent) 75%, var(--lz-pink)) 140%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 26px -8px var(--nw-glow) !important;
}
/* Secondary: a quiet key with a lit edge on hover. */
html[data-luces][data-theme][data-theme] body :is(#app, #modal, .modal) :is(button.secondary, .action-btn:not(.primary-action), .subtle-button, .text-button.boxed, .link-btn) {
  border-radius: var(--lz-r-btn) !important;
  border: 1px solid var(--nw-line-strong) !important;
  background: var(--nw-surface) !important;
  color: var(--nw-ink) !important;
  box-shadow: var(--lz-key-depth) !important;
  font-weight: 700 !important;
  transition: transform var(--lz-press) var(--lz-ease-out), border-color 160ms ease, background-color 160ms ease, color 160ms ease !important;
}
html[data-luces][data-theme][data-theme] body #app #page .niwwi-spendable-kpi .subtle-button {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  color: #FFFFFF !important;
}
html[data-luces][data-theme][data-theme] body :is(#app, #modal, .modal) button.danger {
  border-radius: var(--lz-r-btn) !important;
  border: 1px solid color-mix(in srgb, var(--nw-neg) 35%, transparent) !important;
  background: var(--nw-neg-soft) !important;
  color: var(--nw-neg) !important;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  html[data-luces][data-theme][data-theme] body :is(#app, #modal, .modal) :is(button.secondary, .action-btn:not(.primary-action), .subtle-button):not(:disabled):hover {
    border-color: color-mix(in srgb, var(--nw-accent) 45%, var(--nw-line-strong)) !important;
    color: var(--nw-accent-text) !important;
  }
  html[data-luces][data-theme][data-theme] body :is(#app, #modal, .modal) :is(.primary-action, .registry-save, button.primary):not(:disabled):hover { filter: brightness(1.06) saturate(1.05); }
}
/* Every press is felt. */
html[data-luces][data-theme][data-theme] body :is(#app, #modal, .modal) :is(button, summary, [role="button"]):not(:disabled):active {
  transform: scale(0.97);
}
html[data-luces][data-theme][data-theme] body :is(#app, #modal, .modal) :is(button, summary, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}
html[data-luces][data-theme][data-theme] body #app #page :is(.nw-inicio-q, .nw-inicio-hero-main, .nw-inicio-duo > button) {
  transition: transform var(--lz-press) var(--lz-ease-out), background-color 160ms ease !important;
}
html[data-luces][data-theme][data-theme] body #app #page :is(.nw-inicio-q, .nw-inicio-hero-main, .nw-inicio-duo > button):not(:disabled):active { transform: scale(0.98) !important; }
/* Focus is a ring of light, never lost. */
html[data-luces] body :is(button, a, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--nw-accent) 80%, transparent) !important;
  outline-offset: 2px !important;
}

/* Icons that mova-luces.js places in buttons. */
html[data-luces] .lz-bi { display: inline-grid; place-items: center; flex: none; margin-right: 7px; vertical-align: -3px; line-height: 0; }
html[data-luces] .lz-bi .mova-icon { width: 17px; height: 17px; }
html[data-luces] .lz-with-bi { display: inline-flex; align-items: center; justify-content: center; }

/* ----------------------------------------------------- tabs and switches */

html[data-luces][data-theme][data-theme] body #app #page :is(.segmented, .dashboard-mode, .registry-visual-tabs, .debt-filter-bar, .history-quick-ranges,
  .analysis-business-switcher, .analysis-view-tabs, .forecast-scenario-switch, .calendar-focus-switch, .analysis-period-switcher, .business-context-switcher) {
  border-radius: 15px !important;
  background: var(--nw-surface-2) !important;
  border: 1px solid var(--nw-line) !important;
  box-shadow: inset 0 1px 2px rgba(20, 10, 60, 0.04) !important;
}
html[data-luces][data-theme][data-theme] body #app #page :is(.segmented, .dashboard-mode, .registry-visual-tabs, .debt-filter-bar, .history-quick-ranges,
  .analysis-business-switcher, .analysis-view-tabs, .forecast-scenario-switch, .calendar-focus-switch, .analysis-period-switcher, .business-context-switcher) > button {
  border-radius: 11px !important;
  transition: background-color 180ms ease, color 180ms ease, transform var(--lz-press) var(--lz-ease-out) !important;
}
html[data-luces][data-theme][data-theme] body #app #page :is(.segmented, .dashboard-mode, .registry-visual-tabs, .debt-filter-bar, .history-quick-ranges,
  .analysis-business-switcher, .analysis-view-tabs, .forecast-scenario-switch, .calendar-focus-switch, .analysis-period-switcher, .business-context-switcher) > button:is(.active, [aria-pressed="true"], [aria-selected="true"]) {
  background: var(--nw-surface) !important;
  color: var(--nw-accent-text) !important;
  border-color: transparent !important;
  box-shadow: 0 1px 2px rgba(30, 10, 80, 0.08), 0 4px 12px -6px rgba(30, 10, 80, 0.18) !important;
}
html[data-luces][data-theme="dark"][data-theme] body #app #page :is(.segmented, .dashboard-mode, .registry-visual-tabs, .debt-filter-bar, .history-quick-ranges,
  .analysis-business-switcher, .analysis-view-tabs, .forecast-scenario-switch, .calendar-focus-switch, .analysis-period-switcher, .business-context-switcher) > button:is(.active, [aria-pressed="true"], [aria-selected="true"]) {
  background: var(--nw-surface-3) !important;
  color: var(--nw-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 18px -8px var(--nw-glow) !important;
}
/* Business switch: each business keeps its colour on its dot. */
html[data-luces][data-theme] body #app #page .business-context-switcher > button[data-page="dashboard"] { --selector-accent: var(--lz-violet); }
html[data-luces][data-theme] body #app #page .business-context-switcher > button[data-page="business-personal"] { --selector-accent: var(--lz-sky); }
html[data-luces][data-theme] body #app #page .business-context-switcher > button[data-page="helion"] { --selector-accent: var(--lz-pink); }
html[data-luces][data-theme] body #app #page .business-context-switcher > button[data-page="virtuality"] { --selector-accent: var(--lz-blue); }
html[data-luces][data-theme] body #app #page .business-context-switcher > button::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--selector-accent, var(--lz-violet));
  box-shadow: 0 0 calc(var(--lz-glow-k) * 8px) var(--selector-accent, var(--lz-violet));
  vertical-align: 1px;
  order: -1;
}
html[data-luces][data-theme] body #app #page .business-context-switcher > button { display: inline-flex !important; align-items: center !important; gap: 7px !important; flex-direction: row !important; }
html[data-luces][data-theme] body #app #page .business-context-switcher > button::after { margin-left: 0; order: -1; }

/* Phone scope chips on Inicio. */
@media (max-width: 760px) {
  html[data-luces][data-theme][data-theme] body #app #page.nw-inicio-scope .dashboard-switcher {
    background: none !important; border: 0 !important; box-shadow: none !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page.nw-inicio-scope .dashboard-switcher > button::before {
    border-radius: 14px !important;
    background: var(--nw-surface) !important;
    border-color: var(--nw-line) !important;
    box-shadow: var(--lz-key-depth) !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page.nw-inicio-scope .dashboard-switcher > button.active { color: var(--nw-ink) !important; font-weight: 750 !important; }
  html[data-luces][data-theme][data-theme] body #app #page.nw-inicio-scope .dashboard-switcher > button.active::before {
    background: color-mix(in srgb, var(--selector-accent, var(--lz-violet)) 14%, var(--nw-surface)) !important;
    border-color: color-mix(in srgb, var(--selector-accent, var(--lz-violet)) 50%, transparent) !important;
    box-shadow: 0 0 calc(var(--lz-glow-k) * 16px) calc(var(--lz-glow-k) * -6px) var(--selector-accent, var(--lz-violet)) !important;
  }
}

/* ------------------------------------------------------- forms and inputs */

html[data-luces][data-theme][data-theme] body :is(#app, #modal, .modal) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea) {
  border-radius: 12px !important;
  border: 1px solid var(--nw-line-strong) !important;
  background: var(--nw-surface) !important;
  color: var(--nw-ink) !important;
  box-shadow: inset 0 1px 2px rgba(20, 10, 60, 0.04) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}
html[data-luces][data-theme][data-theme] body :is(#app, #modal, .modal) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea):focus {
  border-color: var(--nw-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nw-accent) 18%, transparent) !important;
  outline: none !important;
}
html[data-luces][data-theme] body :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--nw-accent); }
@media (max-width: 760px) {
  /* Safari zooms the whole page when a field under 16 px is tapped. */
  html[data-luces][data-theme] body :is(#app, #modal, .modal) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea) { font-size: 16px !important; }
}

/* ----------------------------------------------------------------- Inicio */

/* Hero: the lamp of the room. Bigger figure, the peso sign smaller and lighter. */
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-hero {
  border-radius: 24px !important;
  padding: 16px 18px 12px !important;
  background: var(--nw-hero-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 22px 44px -22px var(--nw-glow), 0 2px 6px -2px rgba(40, 10, 90, 0.25) !important;
  overflow: hidden !important;
}
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-hero.is-negative { background: var(--nw-hero-neg) !important; }
/* A thin ring of light around the lamp. */
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-kicker {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font: 700 13.5px/1.2 var(--nw-font) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #A8FFD9;
  box-shadow: 0 0 10px #A8FFD9;
}
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-hero.is-negative .nw-inicio-kicker::before { background: #FFD0A0; box-shadow: 0 0 10px #FFD0A0; }
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-big {
  font: 800 clamp(36px, 11.6vw, 46px)/1.02 var(--nw-font) !important;
  letter-spacing: -0.045em !important;
  text-shadow: 0 2px 18px rgba(30, 0, 80, 0.25);
}
html[data-luces][data-theme][data-theme] body #app #page :is(.nw-inicio-big, .accounts-current-summary > strong, .niwwi-spendable-kpi .niwwi-monthly-stages strong)::first-letter {
  font-size: 0.56em;
  font-weight: 700;
  vertical-align: 0.62em;
  margin-right: 0.04em;
  opacity: 0.8;
}
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-sub { color: rgba(255, 255, 255, 0.88) !important; font-weight: 600 !important; }
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-duo { border-top-color: rgba(255, 255, 255, 0.18) !important; gap: 0; margin-top: 9px !important; padding-top: 9px !important; }
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-duo small { color: rgba(255, 255, 255, 0.82) !important; }
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-duo b { font-size: 20px !important; letter-spacing: -0.02em !important; }

/* «Tus preguntas»: a stack of lit keys. */
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-label {
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font: 800 16px/1.2 var(--nw-font) !important;
  color: var(--nw-ink) !important;
  margin: 12px 4px 6px !important;
}
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-questions {
  border-radius: 20px !important;
  padding: 2px !important;
}
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-questions > li + li { border-top: 0 !important; }
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-q {
  min-height: 54px !important;
  border-radius: 16px !important;
  padding: 0 10px 0 9px !important;
  gap: 12px !important;
}
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-questions > li + li .nw-inicio-q { box-shadow: 0 -1px 0 0 color-mix(in srgb, var(--nw-line) 80%, transparent) !important; }
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-q-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 12px !important; }
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-q-icon .mova-icon { width: 21px !important; height: 21px !important; }
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-q-text b { font-size: 15px !important; }
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-q-value { font-size: 16px !important; letter-spacing: -0.015em; }
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-verdict {
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  border: 1px solid transparent;
}
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-verdict[data-nw-inicio-verdict="yes"] { border-color: color-mix(in srgb, var(--nw-pos) 30%, transparent); box-shadow: 0 0 calc(var(--lz-glow-k) * 14px) calc(var(--lz-glow-k) * -4px) var(--nw-pos); }
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-verdict[data-nw-inicio-verdict="no"] { border-color: color-mix(in srgb, var(--nw-neg) 30%, transparent); box-shadow: 0 0 calc(var(--lz-glow-k) * 14px) calc(var(--lz-glow-k) * -4px) var(--nw-neg); }
html[data-luces][data-theme][data-theme] body #app #page .nw-inicio-more {
  border-radius: 16px !important;
  min-height: 44px !important;
  background: var(--nw-surface) !important;
  border-style: dashed !important;
  border-color: var(--nw-line-strong) !important;
}

/* Desktop Inicio: the three money cards. */
html[data-luces][data-theme][data-theme] body #app #page.general-dashboard-page .money-overview-kpis > article.niwwi-spendable-kpi {
  border-radius: var(--lz-r-card) !important;
  background: var(--nw-hero-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 24px 50px -26px var(--nw-glow) !important;
}
html[data-luces][data-theme][data-theme] body #app #page.general-dashboard-page .money-overview-kpis > article.niwwi-spendable-kpi.negative { background: var(--nw-hero-neg) !important; }
html[data-luces][data-theme][data-theme] body #app #page .money-overview-kpis .account-balance-kpi > .simple-value {
  background: var(--nw-title-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
html[data-luces][data-theme][data-theme] body #app #page .money-overview-kpis .simple-value { letter-spacing: -0.04em !important; }

/* Money that means something keeps its colour everywhere. */
html[data-luces][data-theme][data-theme] body #app #page :is(.simple-kpi.positive:not(.niwwi-spendable-kpi), .registry-kpi.positive, .history-kpi.positive) :is(.simple-value, strong, b) { color: var(--nw-pos) !important; }
html[data-luces][data-theme][data-theme] body #app #page :is(.simple-kpi.negative:not(.niwwi-spendable-kpi), .registry-kpi.negative, .history-kpi.negative) :is(.simple-value, strong, b) { color: var(--nw-neg) !important; }

/* --------------------------------------------------- other screens (light) */

/* Cuentas / Ahorros: the main total is a small lamp too. */
html[data-luces][data-theme][data-theme] body #app #page :is(.accounts-current-summary, .savings-summary-grid > article.total) {
  border-radius: var(--lz-r-card) !important;
  background: var(--nw-hero-bg) !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 22px 44px -24px var(--nw-glow) !important;
}
/* Deudas: what she owes in each block gets its colour. */
html[data-luces][data-theme][data-theme] body #app #page .debt-position-overview article.owed strong { color: var(--nw-neg) !important; }
html[data-luces][data-theme][data-theme] body #app #page .debt-position-overview article.receivable strong { color: var(--nw-pos) !important; }
html[data-luces][data-theme][data-theme] body #app #page .debt-position-overview article { position: relative; overflow: hidden; }
html[data-luces][data-theme][data-theme] body #app #page .debt-position-overview article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--nw-neg);
  box-shadow: 0 0 calc(var(--lz-glow-k) * 10px) var(--nw-neg);
}
html[data-luces][data-theme][data-theme] body #app #page .debt-position-overview article.receivable::before { background: var(--nw-pos); box-shadow: 0 0 calc(var(--lz-glow-k) * 10px) var(--nw-pos); }

/* Progress bars: a lit tube. */
html[data-luces][data-theme][data-theme] body #app #page :is(.debt-progress, .progress, .saving-progress, .goal-progress, .month-progress) > i {
  background: linear-gradient(90deg, var(--lz-violet), var(--lz-pink)) !important;
  box-shadow: 0 0 calc(var(--lz-glow-k) * 10px) color-mix(in srgb, var(--lz-pink) 60%, transparent) !important;
  border-radius: 999px !important;
}

/* Chevrons in disclosures turn smoothly. */
html[data-luces] details > summary .mova-icon { transition: transform 200ms var(--lz-ease-out); }

/* -------------------------------------------------------- modals / sheets */

html[data-luces][data-theme] .modal { border-radius: 24px !important; }
@media (max-width: 760px) {
  html[data-luces][data-theme] body .mova-mobile-register-sheet {
    border-radius: 24px !important;
    background: var(--nw-surface) !important;
    border: 1px solid var(--nw-line) !important;
    box-shadow: var(--nw-shadow-pop) !important;
  }
  html[data-luces][data-theme] body .mova-mobile-register-sheet > span { text-transform: none !important; letter-spacing: 0 !important; font-weight: 800 !important; color: var(--nw-ink) !important; }
  html[data-luces][data-theme] body .mova-mobile-register-sheet > button[data-page] {
    border-radius: 16px !important;
    min-height: 64px !important;
    background: var(--nw-surface-2) !important;
    border: 1px solid var(--nw-line) !important;
    font-weight: 750 !important;
    color: var(--nw-ink) !important;
  }
}

/* ------------------------------------------------- less text on the phone */

@media (max-width: 760px) {
  /* Explanations that repeat what the screen already shows: available on the
     computer, quiet on the phone. */
  html[data-luces][data-theme] body #app #page :is(.debt-security-note, .registry-explainer, .registry-help-copy, .agenda-explainer, .fv-explainer, .section-note-long) { display: none !important; }
}

/* ----------------------------------------------------------------- motion */

/* One moment only: when Niwwi opens, the lamp (Inicio's main card) turns
   on. Changing screens is instant: it happens many times a day, and an
   entrance there would only make the app feel slower. */
@keyframes lz-lamp-on {
  from { opacity: 0.35; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}
html[data-luces].lz-boot body #app #page :is(.nw-inicio-hero, .money-overview-kpis > article.niwwi-spendable-kpi) {
  animation: lz-lamp-on 420ms var(--lz-ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  html[data-luces].lz-boot body #app #page :is(.nw-inicio-hero, .money-overview-kpis > article.niwwi-spendable-kpi) { animation: none !important; }
  html[data-luces] body :is(button, summary, [role="button"]):active { transform: none !important; }
}

/* Notes written for the record (Codex notes, explanations) wait behind a
   small «Nota» chip; the arrow turns when it opens. */
html[data-luces][data-theme] body #app #page .debt-demand-note { margin: 8px 0 0; }
html[data-luces][data-theme] body #app #page .debt-demand-note > summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  font: 700 12.5px/1.2 var(--nw-font); color: var(--nw-accent-text);
  padding: 6px 11px; border-radius: 999px; background: var(--nw-accent-soft);
  transition: transform 140ms var(--lz-ease-out);
}
html[data-luces][data-theme] body #app #page .debt-demand-note > summary::-webkit-details-marker { display: none; }
html[data-luces][data-theme] body #app #page .debt-demand-note > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform 180ms var(--lz-ease-out);
}
html[data-luces][data-theme] body #app #page .debt-demand-note[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
html[data-luces][data-theme] body #app #page .debt-demand-note > summary:active { transform: scale(0.96); }
html[data-luces][data-theme] body #app #page .debt-demand-note > p { margin: 8px 2px 0; font-size: 13px; line-height: 1.45; color: var(--nw-muted); }

/* Notificaciones: «¿Ya se pagó?» Sí / No, and the «Todavía no» choices.
   Layout works with or without Luces; Luces adds its colours. */
.obligation-yes-no { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.obligation-yes-no > .action-btn:last-child { min-width: 64px; }
.obligation-no-choices { display: grid; gap: 10px; margin-top: 6px; }
.obligation-no-choice { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; text-align: left; width: 100%;
  padding: 14px; border-radius: 16px; border: 1px solid var(--nw-line, #2b2930); background: var(--nw-surface, transparent); color: inherit; font: inherit; }
button.obligation-no-choice { cursor: pointer; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms ease; }
button.obligation-no-choice:active { transform: scale(0.98); }
.obligation-no-choice b { display: block; font-size: 15px; }
.obligation-no-choice small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--nw-muted, #8d8a96); }
.obligation-no-choice label { display: grid; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 700; }
.obligation-no-choice .action-btn { margin-top: 10px; }
.obligation-no-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--nw-accent-soft, #241d2e); color: var(--nw-accent-text, #c4a0f3); }
.obligation-no-icon svg { width: 20px; height: 20px; }
html[data-luces][data-theme] body button.obligation-no-choice:hover { border-color: color-mix(in srgb, var(--nw-accent) 40%, var(--nw-line)); }
html[data-luces][data-theme] body .obligation-no-choice:first-child .obligation-no-icon { background: var(--nw-neg-soft); color: var(--nw-neg); }
html[data-luces][data-theme] body .obligation-no-later .obligation-no-icon { background: var(--nw-warn-soft); color: var(--nw-warn); }
/* Registrar · «¿Es el pago de alguno de estos?»: every pending item is an equal choice. */
html[data-luces][data-theme] body .registry-autolink-choices .obligation-no-choice:first-child .obligation-no-icon { background: var(--nw-accent-soft, #241d2e); color: var(--nw-accent-text, #c4a0f3); }

/* Real · «Revisar uno por uno»: the start key and the progress bar on top
   of each form (1 de 73, a thin light that fills, Saltar). */
.pending-queue-start { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 12px; min-height: 42px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--nw-line-strong, #3a3442); background: var(--nw-accent-soft, #241d2e); color: var(--nw-accent-text, #c4a0f3); font: 700 14px/1 var(--nw-font, inherit); cursor: pointer;
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.pending-queue-start:active { transform: scale(0.97); }
.pending-queue-start > span { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: var(--nw-accent, #8d5cf6); color: var(--nw-accent-ink, #fff); font-size: 12px; text-align: center; }
.pending-queue-bar { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 13px; color: var(--nw-muted, #8d8a96); }
.pending-queue-bar b { color: var(--nw-ink, inherit); }
.pending-queue-bar > i { height: 4px; border-radius: 999px; background: var(--nw-line, #2b2930); position: relative; overflow: hidden; }
.pending-queue-bar > i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--nw-accent, #8d5cf6), var(--lz-pink, #ff5cb6)); transition: width 260ms cubic-bezier(0.23, 1, 0.32, 1); }
.pending-queue-bar > button { min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--nw-line-strong, #3a3442); background: transparent; color: inherit; font: 700 13px/1 var(--nw-font, inherit); cursor: pointer; }
.pending-queue-bar > button:active { transform: scale(0.96); }

/* Gestures (installed app): the pull light at the top and the edge arrow. */
.nw-pull { position: fixed; z-index: 90; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px); display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--nw-surface, #17142a); color: var(--nw-ink, #fff);
  box-shadow: 0 10px 28px -12px rgba(30, 10, 80, 0.45); border: 1px solid var(--nw-line, rgba(255,255,255,.1));
  transform: translate(-50%, -64px); opacity: 0; pointer-events: none; transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), opacity 180ms ease; }
.nw-pull b { font: 700 13px/1 var(--nw-font, system-ui); white-space: nowrap; }
.nw-pull b:empty { display: none; }
.nw-pull-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--nw-accent, #7a45ff), var(--lz-pink, #ff5cb6)); }
.nw-pull-dot svg { transform: rotate(var(--turn, 0deg)); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.nw-pull.is-busy .nw-pull-dot svg { animation: nw-pull-spin 700ms linear infinite; }
.nw-pull.is-done .nw-pull-dot { background: var(--nw-pos, #2fb27c); }
.nw-pull.is-done .nw-pull-dot svg path:first-child { d: path("M6.5 12.5 10.5 16.5 17.5 8.5"); }
.nw-pull.is-done .nw-pull-dot svg path:last-child { display: none; }
@keyframes nw-pull-spin { to { transform: rotate(360deg); } }
.nw-edge { position: fixed; z-index: 90; left: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nw-surface, #17142a); color: var(--nw-accent-text, #c4a0f3); border: 1px solid var(--nw-line, rgba(255,255,255,.1));
  box-shadow: 0 8px 24px -10px rgba(30, 10, 80, 0.5); opacity: 0; pointer-events: none; transition: opacity 140ms ease, background-color 140ms ease; }
.nw-edge.is-forward { left: auto; right: 0; }
.nw-edge.is-ready { background: var(--nw-accent, #7a45ff); color: #fff; }
@media (prefers-reduced-motion: reduce) { .nw-pull, .nw-pull-dot svg { transition: opacity 120ms ease; } .nw-pull.is-busy .nw-pull-dot svg { animation-duration: 1400ms; } }

/* ------------------------------------------------- Gamer cute character */

/* Same screens, more play: every key has a coloured lip under it and goes
   down when pressed, the questions are separate keys, and the lamp (hero)
   wears an RGB ring. Formal keeps all of this flat. */
html[data-luces][data-appearance="kawaii"] { --lz-r-btn: 14px; }
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body #app :is(.niwwi-kpi-emblem, .nw-inicio-q-icon, .lz-key) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 0 color-mix(in srgb, var(--lz-hue) 30%, var(--nw-surface)), 0 0 calc(var(--lz-glow-k) * 18px) calc(var(--lz-glow-k) * -4px) color-mix(in srgb, var(--lz-hue) 60%, transparent) !important;
}
html[data-luces][data-appearance="kawaii"][data-theme="dark"][data-theme] body #app :is(.niwwi-kpi-emblem, .nw-inicio-q-icon, .lz-key) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 3px 0 color-mix(in srgb, var(--lz-hue) 22%, #07051A), 0 0 18px -4px color-mix(in srgb, var(--lz-hue) 55%, transparent) !important;
}
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body :is(#app, #modal, .modal, .mova-mobile-register-sheet) :is(.primary-action, .action-btn.primary-action, .registry-save, button.primary, .registry-ai-action) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--nw-accent) 78%, #FFFFFF) -20%, var(--nw-accent) 55%, color-mix(in srgb, var(--nw-accent) 60%, var(--lz-pink)) 130%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 3px 0 color-mix(in srgb, var(--nw-accent) 55%, #1A0B3D), 0 12px 24px -12px var(--nw-glow) !important;
}
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body :is(#app, #modal, .modal, .mova-mobile-register-sheet) :is(.primary-action, .action-btn.primary-action, .registry-save, button.primary, .registry-ai-action):not(:disabled):active {
  transform: translateY(2px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 color-mix(in srgb, var(--nw-accent) 55%, #1A0B3D), 0 6px 14px -10px var(--nw-glow) !important;
}
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body :is(#app, #modal, .modal) :is(button.secondary, .action-btn:not(.primary-action), .subtle-button) {
  box-shadow: 0 2px 0 var(--nw-line-strong) !important;
}
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body :is(#app, #modal, .modal) :is(button.secondary, .action-btn:not(.primary-action), .subtle-button):not(:disabled):active {
  transform: translateY(2px) !important;
  box-shadow: 0 0 0 var(--nw-line-strong) !important;
}
/* «Tus preguntas»: five separate keys. */
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body #app #page .nw-inicio-questions {
  display: grid !important;
  /* One column that never grows past the screen: a long one-line answer is cut with «…» instead of pushing the keys out. */
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body #app #page .nw-inicio-questions > li + li .nw-inicio-q,
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body #app #page .nw-inicio-q {
  background: var(--nw-surface) !important;
  border: 1px solid var(--nw-line) !important;
  box-shadow: 0 3px 0 var(--nw-line-strong), 0 10px 22px -18px rgba(90, 40, 170, 0.5) !important;
}
html[data-luces][data-appearance="kawaii"][data-theme="dark"][data-theme] body #app #page .nw-inicio-questions > li + li .nw-inicio-q,
html[data-luces][data-appearance="kawaii"][data-theme="dark"][data-theme] body #app #page .nw-inicio-q {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 3px 0 #0A0720 !important;
}
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body #app #page .nw-inicio-q:not(:disabled):active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--nw-line-strong) !important;
}
/* The RGB ring around the lamp. */
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body #app #page :is(.nw-inicio-hero, .money-overview-kpis > article.niwwi-spendable-kpi)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 0;
  padding: 1.5px;
  background: linear-gradient(120deg, #FFB3E0, #C9A8FF 35%, #8FD0FF 65%, #FFB3E0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.85;
}
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body #app #page .money-overview-kpis > article.niwwi-spendable-kpi { position: relative; }
html[data-luces][data-appearance="kawaii"][data-theme="dark"][data-theme] body #app #page :is(.nw-inicio-big, .niwwi-spendable-kpi .niwwi-monthly-stages strong) {
  text-shadow: 0 0 22px rgba(255, 190, 235, 0.45), 0 2px 12px rgba(30, 0, 80, 0.4) !important;
}
/* Active place in the menu: a short RGB light on its left. */
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body #app .sidebar .nav-item.active { position: relative; }
html[data-luces][data-appearance="kawaii"][data-theme][data-theme] body #app .sidebar .nav-item.active::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--lz-pink), var(--lz-violet), var(--lz-blue));
  box-shadow: 0 0 calc(var(--lz-glow-k) * 10px) var(--lz-pink);
}
/* The dock: the chosen key wears the same RGB light underneath. */
@media (max-width: 760px) {
  html[data-luces][data-appearance="kawaii"][data-theme] body .mova-mobile-bottom-nav::before {
    background:
      linear-gradient(90deg, var(--lz-pink), var(--lz-violet), var(--lz-blue)) bottom / 60% 2.5px no-repeat,
      color-mix(in srgb, var(--nw-accent) 13%, transparent) !important;
  }
}

/* ------------------------------------------------ phone: tighter screens */

@media (max-width: 760px) {
  /* Header actions: the main action stays full width; the others become
     small keys in a row, symbol on top, so the screen starts sooner. */
  html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header .head-actions[data-lz-multi] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header .head-actions[data-lz-multi] > .primary-action:first-child { grid-column: 1 / -1 !important; min-height: 48px !important; }
  html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header .head-actions[data-lz-many] > :not(.primary-action) {
    flex-direction: column !important;
    gap: 6px !important;
    min-height: 74px !important;
    height: auto !important;
    max-height: none !important;
    justify-content: flex-start !important;
    padding: 10px 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header .head-actions[data-lz-many] > :not(.primary-action) > :is(.lz-bi, svg) {
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    display: grid !important;
    place-items: center !important;
    background: var(--nw-accent-soft) !important;
    color: var(--nw-accent-text) !important;
    padding: 6px !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .niwwi-page-header .head-actions[data-lz-many] > :not(.primary-action) > .lz-bi .mova-icon { width: 19px !important; height: 19px !important; }

  /* Cuentas: one tidy row per account (symbol, name, balance; Ajustar under it). */
  html[data-luces][data-theme][data-theme] body #app #page .account-card.live-account {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    align-items: center !important;
    padding: 14px 14px 12px !important;
    min-height: 0 !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .account-card.live-account .account-head { display: contents !important; }
  html[data-luces][data-theme][data-theme] body #app #page .account-card.live-account .account-head > .source-logo {
    grid-column: 1; grid-row: 1 / span 2; width: 42px !important; height: 42px !important; border-radius: 13px !important; margin: 0 !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .account-card.live-account .account-identity { grid-column: 2; grid-row: 1 / span 2; min-width: 0; margin: 0 !important; }
  html[data-luces][data-theme][data-theme] body #app #page .account-card.live-account .account-identity h2 { font-size: 16px !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-luces][data-theme][data-theme] body #app #page .account-card.live-account .account-identity span { font-size: 12.5px !important; color: var(--nw-muted) !important; }
  html[data-luces][data-theme][data-theme] body #app #page .account-card.live-account .account-balance {
    grid-column: 3 / span 2; grid-row: 1; justify-self: end; text-align: right; margin: 0 !important; font-size: 19px !important; letter-spacing: -0.02em !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .account-card.live-account .account-currency { grid-column: 3; grid-row: 2; justify-self: end; margin: 0 !important; font-size: 11px !important; }
  html[data-luces][data-theme][data-theme] body #app #page .account-card.live-account .account-adjust-chip {
    grid-column: 4; grid-row: 2; justify-self: end; min-height: 32px !important; height: 32px !important; padding: 0 10px !important; font-size: 12.5px !important; margin: 0 !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .account-card.live-account .account-adjust-chip .lz-bi { margin-right: 5px; }
  html[data-luces][data-theme][data-theme] body #app #page .account-card.live-account > :not(.account-head, .account-identity, .account-balance) { grid-column: 2 / -1; justify-self: end; text-align: right; font-size: 12.5px !important; margin: 0 !important; }

  /* Movimientos: two lines per movement instead of five. */
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row {
    display: grid !important;
    grid-template-columns: 38px auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    align-items: center !important;
    padding: 11px 6px !important;
    min-height: 0 !important;
    text-align: left !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > .movement-kind { display: contents !important; }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > .movement-kind > i {
    grid-column: 1; grid-row: 1 / span 2; display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; border-radius: 12px !important;
    color: var(--lz-hue, var(--lz-violet)) !important; background: color-mix(in srgb, var(--lz-hue, var(--lz-violet)) 14%, var(--nw-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--lz-hue, var(--lz-violet)) 20%, transparent) !important; margin: 0 !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > .movement-kind > i .mova-icon { width: 20px !important; height: 20px !important; }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > .movement-kind.income { --lz-hue: var(--lz-mint); }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > .movement-kind.expense { --lz-hue: var(--lz-coral); }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > .movement-kind:is(.debt, .debt-payment) { --lz-hue: var(--lz-amber); }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > .movement-kind:is(.transfer, .withdrawal) { --lz-hue: var(--lz-blue); }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > .movement-kind:is(.saving, .savings) { --lz-hue: var(--lz-lilac); }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > .movement-kind > b {
    grid-column: 2 / span 2; grid-row: 1; font-size: 15px !important; font-weight: 700 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > .movement-kind > small { display: none !important; }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > time {
    grid-column: 2; grid-row: 2; font-size: 12.5px !important; color: var(--nw-muted) !important; white-space: nowrap; margin: 0 !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > span:not(.movement-kind) { display: none !important; }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > span:not(.movement-kind):nth-of-type(2) {
    display: block !important; grid-column: 3; grid-row: 2; min-width: 0; font-size: 12.5px !important; color: var(--nw-muted) !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > span:not(.movement-kind):nth-of-type(2) > b { font-weight: 600 !important; color: var(--nw-muted) !important; font-size: inherit !important; }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > span:not(.movement-kind):nth-of-type(2) > b::before { content: "· "; }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > span:not(.movement-kind):nth-of-type(2) > small { display: none !important; }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > strong {
    grid-column: 4; grid-row: 1 / span 2; justify-self: end; text-align: right; font-size: 15.5px !important; letter-spacing: -0.01em; display: flex !important; flex-direction: column; align-items: flex-end; gap: 1px;
  }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > strong .fv-gross-note { display: none !important; }
  html[data-luces][data-theme][data-theme] body #app #page .movement-ledger .movement-ledger-row > strong .fv-share-chunk { display: none !important; }

  /* Agenda de pagos: the amount and a small pay key, not a wall of purple buttons. */
  html[data-luces][data-theme][data-theme] body #app #page .payment-notification-card {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    align-items: center !important;
    padding: 12px !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .payment-notification-card > .payment-notification-icon { grid-column: 1; grid-row: 1; width: 38px !important; height: 38px !important; border-radius: 12px !important; }
  html[data-luces][data-theme][data-theme] body #app #page .payment-notification-card > div { grid-column: 2; grid-row: 1; min-width: 0; }
  html[data-luces][data-theme][data-theme] body #app #page .payment-notification-card > div > p { display: none !important; }
  html[data-luces][data-theme][data-theme] body #app #page .payment-notification-card > div > h3 { font-size: 15px !important; margin: 1px 0 0 !important; }
  html[data-luces][data-theme][data-theme] body #app #page .payment-notification-card > strong { grid-column: 3; grid-row: 1; font-size: 16px !important; justify-self: end; }
  html[data-luces][data-theme][data-theme] body #app #page .payment-notification-card > button {
    grid-column: 2 / span 2; grid-row: 2; justify-self: end; width: auto !important; min-height: 36px !important; height: 36px !important; padding: 0 14px !important; font-size: 13px !important;
    background: var(--nw-accent-soft) !important; color: var(--nw-accent-text) !important; box-shadow: none !important; border: 1px solid color-mix(in srgb, var(--nw-accent) 25%, transparent) !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .payment-notification-card.overdue > div > small { color: var(--nw-neg) !important; }
  html[data-luces][data-theme][data-theme] body #app #page .payment-notification-card > .obligation-yes-no { grid-column: 2 / span 2; grid-row: 2; justify-self: end; flex-wrap: nowrap; }
  html[data-luces][data-theme][data-theme] body #app #page .payment-notification-card > .obligation-yes-no > button {
    width: auto !important; min-height: 36px !important; height: 36px !important; padding: 0 14px !important; font-size: 13px !important; box-shadow: none !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .payment-notification-card > .obligation-yes-no > button.primary-action {
    background: var(--nw-accent-soft) !important; color: var(--nw-accent-text) !important; border: 1px solid color-mix(in srgb, var(--nw-accent) 25%, transparent) !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .payment-notification-card > .obligation-yes-no > button:not(.primary-action) {
    background: transparent !important; color: var(--nw-muted) !important; border: 1px solid var(--nw-line-strong) !important;
  }

  /* Real · pendientes: same compact row. */
  html[data-luces][data-theme][data-theme] body #app #page .registry-pending-item {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    align-items: center !important;
    padding: 12px !important;
  }
  html[data-luces][data-theme][data-theme] body #app #page .registry-pending-item > span:first-child { grid-row: 1 / span 2; }
  html[data-luces][data-theme][data-theme] body #app #page .registry-pending-item > button {
    grid-column: 3; grid-row: 2; justify-self: end; min-height: 34px !important; height: 34px !important; padding: 0 14px !important; font-size: 13px !important;
  }
}

/* Labels that mova-luces.js turned to sentence case lose the tracking that capitals needed. */
html[data-luces] .lz-calm { letter-spacing: 0 !important; text-transform: none !important; }

/* ------------------------------------------------------------ login */

html[data-luces][data-theme] #login.login-view {
  background: var(--lz-ground, none), var(--nw-bg) !important;
}
html[data-luces][data-theme] #login .login-glow { opacity: 0.55; }
html[data-luces][data-theme] #login .login-card {
  border-radius: 26px !important;
  background: var(--nw-surface) !important;
  border: 1px solid var(--nw-line) !important;
  box-shadow: var(--nw-shadow-pop), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  position: relative;
}
html[data-luces][data-theme] #login .login-card::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lz-pink), var(--lz-violet), var(--lz-blue));
  box-shadow: 0 0 14px color-mix(in srgb, var(--lz-pink) 60%, transparent);
}
html[data-luces][data-theme] #login .login-card h2 { letter-spacing: -0.03em !important; font-weight: 800 !important; }
html[data-luces][data-theme] #login .input-wrap {
  border-radius: 14px !important;
  border: 1px solid var(--nw-line-strong) !important;
  background: var(--nw-surface) !important;
}
html[data-luces][data-theme] #login .input-wrap:focus-within { border-color: var(--nw-accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--nw-accent) 16%, transparent) !important; }
html[data-luces][data-theme] #login .input-wrap input { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html[data-luces][data-theme] #login .login-button {
  min-height: 52px !important;
  border-radius: 15px !important;
  color: #FFFFFF !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nw-accent) 80%, #FFFFFF) -30%, var(--nw-accent) 55%, color-mix(in srgb, var(--nw-accent) 70%, var(--lz-pink)) 140%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 28px -14px var(--nw-glow) !important;
  font-weight: 800 !important;
  transition: transform var(--lz-press) var(--lz-ease-out) !important;
}
html[data-luces][data-theme] #login .login-button:active { transform: scale(0.97); }
html[data-luces][data-theme] #login .story-copy h1 em {
  font-style: normal;
  background: var(--nw-title-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-luces][data-theme] #login .eyebrow { text-transform: none !important; letter-spacing: 0 !important; }

/* ------------------------------------------------------------ Niwwi AI */

html[data-luces][data-theme] .mova-ai-chat-panel {
  border-radius: 26px !important;
  background: var(--nw-surface) !important;
  border: 1px solid var(--nw-line) !important;
  box-shadow: var(--nw-shadow-pop) !important;
  overflow: hidden !important;
}
html[data-luces][data-theme] .mova-ai-chat-head {
  background:
    radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--lz-pink) 16%, transparent), transparent 55%),
    radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--lz-blue) 12%, transparent), transparent 60%),
    var(--nw-surface) !important;
  border-bottom: 1px solid var(--nw-line) !important;
  position: relative;
}
html[data-luces][data-theme] .mova-ai-chat-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--lz-pink), var(--lz-violet), var(--lz-blue));
  opacity: 0.7;
}
html[data-luces][data-theme] .mova-ai-chat-avatar {
  border-radius: 14px !important;
  color: #FFFFFF !important;
  background: radial-gradient(120% 120% at 100% 0%, rgba(255, 160, 220, 0.6), transparent 55%), linear-gradient(140deg, var(--nw-accent), color-mix(in srgb, var(--nw-accent) 60%, var(--lz-pink))) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 22px -10px var(--nw-glow) !important;
}
html[data-luces][data-theme] .mova-ai-quick-prompts button {
  border-radius: 15px !important;
  min-height: 48px !important;
  background: var(--nw-surface) !important;
  border: 1px solid var(--nw-line) !important;
  box-shadow: var(--lz-key-depth) !important;
  font-weight: 650 !important;
  transition: transform var(--lz-press) var(--lz-ease-out), border-color 160ms ease !important;
}
html[data-luces][data-theme] .mova-ai-quick-prompts button:active { transform: scale(0.98); }
html[data-luces][data-theme] .mova-ai-message-body { border-radius: 18px !important; }
html[data-luces][data-theme] .mova-ai-message.assistant .mova-ai-message-body {
  background: var(--nw-surface-2) !important;
  border: 1px solid var(--nw-line) !important;
  border-top-left-radius: 6px !important;
}
html[data-luces][data-theme] .mova-ai-message.user .mova-ai-message-body {
  background: linear-gradient(140deg, var(--nw-accent), color-mix(in srgb, var(--nw-accent) 70%, var(--lz-pink))) !important;
  color: #FFFFFF !important;
  border-top-right-radius: 6px !important;
  box-shadow: 0 10px 22px -14px var(--nw-glow) !important;
}
html[data-luces][data-theme="dark"] .mova-ai-message.user .mova-ai-message-body { color: var(--nw-accent-ink) !important; }
html[data-luces][data-theme] body .mova-ai-chat-composer {
  border-radius: 20px !important;
  background: var(--nw-surface) !important;
  border: 1px solid var(--nw-line-strong) !important;
}
html[data-luces][data-theme] body .mova-ai-chat-composer:focus-within { border-color: var(--nw-accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--nw-accent) 14%, transparent) !important; }
html[data-luces][data-theme] body .mova-ai-chat-send:not(:disabled) {
  color: #FFFFFF !important;
  background: linear-gradient(140deg, var(--nw-accent), color-mix(in srgb, var(--nw-accent) 65%, var(--lz-pink))) !important;
  box-shadow: 0 8px 18px -8px var(--nw-glow) !important;
  border-radius: 13px !important;
}
/* While the AI thinks, the light strip under the panel head runs once per second. */
html[data-luces][data-theme] .mova-ai-chat-panel:has(.mova-ai-typing) .mova-ai-chat-head::after {
  background: linear-gradient(90deg, transparent 0 30%, var(--lz-pink) 45%, var(--lz-blue) 55%, transparent 70% 100%) 0 0 / 300% 100%;
  animation: nw-led-run 1.1s linear infinite;
  opacity: 1;
}

/* ------------------------------------------------- Preferencias: style previews */

html[data-luces][data-theme] body #app #page .preference-style-option,
html[data-luces][data-theme] body #app #page [data-appearance-option] {
  border-radius: 18px !important;
  transition: transform var(--lz-press) var(--lz-ease-out), border-color 160ms ease !important;
}
html[data-luces][data-theme][data-theme] body #app #page .niwwi-style-preview {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 1.25fr 0.5fr 0.5fr !important;
  gap: 6px !important;
  padding: 10px !important;
  height: 92px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--nw-line) !important;
  background: #F4F2FA !important;
}
html[data-luces][data-theme][data-theme] body #app #page .niwwi-style-preview > i {
  display: block !important;
  width: auto !important;
  height: auto !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid #E6E1F1 !important;
  box-shadow: none !important;
  position: static !important;
  transform: none !important;
}
html[data-luces][data-theme][data-theme] body #app #page .niwwi-style-preview.general > i:first-child {
  border: 0 !important;
  background: linear-gradient(140deg, #24137A, #4A2FD0 50%, #6E3AD6) !important;
}
html[data-luces][data-theme][data-theme] body #app #page .niwwi-style-preview.kawaii {
  background:
    radial-gradient(1.2px 1.2px at 18% 22%, #FFFFFF, transparent 60%),
    radial-gradient(1px 1px at 72% 14%, #FFE3F4, transparent 60%),
    radial-gradient(1.2px 1.2px at 86% 64%, #FFFFFF, transparent 60%),
    radial-gradient(80% 80% at 100% 0%, rgba(255, 110, 200, 0.3), transparent 70%),
    #0F0B22 !important;
  border-color: #2F2758 !important;
}
html[data-luces][data-theme][data-theme] body #app #page .niwwi-style-preview.kawaii > i {
  background: #191433 !important;
  border-color: #2F2758 !important;
  box-shadow: 0 2px 0 #07051A !important;
}
html[data-luces][data-theme][data-theme] body #app #page .niwwi-style-preview.kawaii > i:first-child {
  border: 0 !important;
  background: linear-gradient(140deg, #3B1DB0, #6E35DE 50%, #B13FB4) !important;
  box-shadow: 0 0 0 1.5px rgba(255, 179, 224, 0.7), 0 0 16px -4px rgba(255, 138, 208, 0.8) !important;
}

/* ==========================================================================
   Remanente a futuro (mova-remanente.js) · Panorama, 2026-10-21
   Her sheet «Mi dinerito y ahorros» made app, with ¿Me alcanza? in the same
   place. Same tokens as the rest of Luces (--nw-*, --lz-* with fallbacks, so
   the zone also reads well with Luces off). No motion when the screen
   changes; only the bars, the waterfall and the chips move, ≤ 240 ms, and
   nothing moves with prefers-reduced-motion.
   ========================================================================== */

html body #app #page .nw-rem-view .nw-rem { display: grid; gap: 14px; margin-top: 14px; }
html body #app #page .nw-rem-view .nw-rem-card { display: grid; gap: 14px; padding: 16px; min-width: 0; }
html body #app #page .nw-rem-view .nw-rem-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
html body #app #page .nw-rem-view .nw-rem-head > div { min-width: 0; }
html body #app #page .nw-rem-view .nw-rem-head h2 { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--lz-title, var(--nw-ink)); }
html body #app #page .nw-rem-view .nw-rem-head p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--nw-muted); }
html body #app #page .nw-rem-view .nw-rem-key {
  width: 36px; height: 36px; border-radius: var(--lz-r-key, 12px); display: grid; place-items: center;
  color: var(--lz-mint, var(--nw-pos)); background: color-mix(in srgb, var(--lz-mint, var(--nw-pos)) 14%, var(--nw-surface));
  box-shadow: var(--lz-key-depth, none), 0 0 calc(var(--lz-glow-k, 0) * 14px) calc(var(--lz-glow-k, 0) * -4px) var(--lz-mint, var(--nw-pos));
}
html body #app #page .nw-rem-view .nw-rem-key.is-verdict { color: var(--nw-accent-text); background: var(--nw-accent-soft); box-shadow: var(--lz-key-depth, none), 0 0 calc(var(--lz-glow-k, 0) * 14px) calc(var(--lz-glow-k, 0) * -4px) var(--nw-accent); }
html body #app #page .nw-rem-view .nw-rem-key .mova-icon { width: 19px; height: 19px; }
html body #app #page .nw-rem-view :is(.nw-rem-note, .nw-rem-hint, .nw-rem-foot p) { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--nw-muted); }
html body #app #page .nw-rem-view .nw-rem-note b { color: var(--nw-ink); font-weight: 800; }

/* Scenario: one choice for the whole zone (and for ¿Me alcanza? everywhere). */
html body #app #page .nw-rem-view .nw-rem-seg {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px;
  border-radius: 15px; background: var(--nw-surface-2); border: 1px solid var(--nw-line);
}
html body #app #page .nw-rem-view .nw-rem-seg > button {
  appearance: none; border: 0; min-height: 40px; height: auto; padding: 6px 6px; border-radius: 11px; background: transparent;
  color: var(--nw-muted); font: 750 13px/1.15 var(--nw-font, inherit); white-space: normal; text-align: center; cursor: pointer;
  transition: transform var(--lz-press, 140ms) var(--lz-ease-out, ease-out), background-color 160ms ease, color 160ms ease;
}
html body #app #page .nw-rem-view .nw-rem-seg > button[aria-pressed="true"] {
  background: var(--nw-surface); color: var(--nw-accent-text);
  box-shadow: 0 1px 2px rgba(30, 10, 80, 0.08), 0 4px 12px -6px rgba(30, 10, 80, 0.18);
}
html[data-theme="dark"] body #app #page .nw-rem-view .nw-rem-seg > button[aria-pressed="true"] { background: var(--nw-surface-3); color: var(--nw-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 18px -8px var(--nw-glow, transparent); }
html body #app #page .nw-rem-view .nw-rem-seg > button:active { transform: scale(0.96); }
html body #app #page .nw-rem-view .nw-rem-seg.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* «Con modelos»: three estimate levels, each with what the models bring at the end of the horizon. */
html body #app #page .nw-rem-view .nw-rem-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: -4px; }
html body #app #page .nw-rem-view .nw-rem-levels > button {
  appearance: none; display: grid; gap: 2px; justify-items: center; min-height: 44px; padding: 6px 4px; border-radius: 12px;
  border: 1px solid var(--nw-line); background: var(--nw-surface); color: var(--nw-ink); cursor: pointer; font: inherit;
  transition: transform var(--lz-press, 140ms) var(--lz-ease-out, ease-out), border-color 160ms ease, background-color 160ms ease;
}
html body #app #page .nw-rem-view .nw-rem-levels > button b { font-size: 12.5px; font-weight: 800; }
html body #app #page .nw-rem-view .nw-rem-levels > button small { font-size: 11px; font-weight: 700; color: var(--nw-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
html body #app #page .nw-rem-view .nw-rem-levels > button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--lz-pink, var(--nw-helion)) 55%, var(--nw-line)); background: color-mix(in srgb, var(--lz-pink, var(--nw-helion)) 10%, var(--nw-surface)); }
html body #app #page .nw-rem-view .nw-rem-levels > button[aria-pressed="true"] b { color: var(--lz-pink, var(--nw-helion)); }
html body #app #page .nw-rem-view .nw-rem-levels > button:active { transform: scale(0.96); }

/* The big answer: «En marzo tendrías $X». */
html body #app #page .nw-rem-view .nw-rem-big { display: grid; gap: 3px; }
html body #app #page .nw-rem-view .nw-rem-big small { font-size: 13px; font-weight: 700; color: var(--nw-muted); line-height: 1.4; }
html body #app #page .nw-rem-view .nw-rem-big strong { font-size: clamp(30px, 9vw, 40px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--nw-ink); }
html body #app #page .nw-rem-view .nw-rem-big strong.is-neg { color: var(--nw-neg); }
html body #app #page .nw-rem-view .nw-rem-big strong.is-unknown { font-size: 26px; color: var(--nw-muted); letter-spacing: -0.02em; }
html body #app #page .nw-rem-view .nw-rem-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
html body #app #page .nw-rem-view .nw-rem-big small.nw-rem-models { color: var(--lz-pink, var(--nw-helion)); }
html body #app #page .nw-rem-view .nw-rem-tag { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; color: var(--nw-accent-text); background: var(--nw-accent-soft); }

/* Six months of remanente. */
html body #app #page .nw-rem-view .nw-rem-bars {
  list-style: none; margin: 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px; align-items: end; height: 176px;
}
html body #app #page .nw-rem-view .nw-rem-bar { display: grid; grid-template-rows: auto 1fr auto; gap: 4px; height: 100%; min-width: 0; text-align: center; }
html body #app #page .nw-rem-view .nw-rem-bar > b { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--nw-ink); }
html body #app #page .nw-rem-view .nw-rem-bar > span[aria-hidden] { font-size: 12px; font-weight: 700; color: var(--nw-muted); }
html body #app #page .nw-rem-view .nw-rem-bar > i {
  display: block; align-self: end; min-height: 4px; border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lz-mint, var(--nw-pos)) 62%, #FFFFFF), var(--lz-mint, var(--nw-pos)));
  box-shadow: 0 8px 18px -12px var(--lz-mint, var(--nw-pos));
  transition: height 240ms var(--lz-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
html body #app #page .nw-rem-view .nw-rem-bar > i.is-neg { background: linear-gradient(180deg, color-mix(in srgb, var(--nw-neg) 62%, #FFFFFF), var(--nw-neg)); box-shadow: 0 8px 18px -12px var(--nw-neg); }
html body #app #page .nw-rem-view .nw-rem-bar > i.is-goal { outline: 2px solid var(--lz-amber, var(--nw-warn)); outline-offset: 2px; }
html body #app #page .nw-rem-view .nw-rem-bar.is-unknown > i { background: transparent; box-shadow: none; border: 1.5px dashed var(--nw-line-strong); }
html body #app #page .nw-rem-view .nw-rem-bar.is-unknown > b { font-size: 9.5px; line-height: 1.1; white-space: normal; color: var(--nw-muted); }
/* A figure the engine could not complete: «≈ $X», what is registered only, never drawn as exact. */
html body #app #page .nw-rem-view .nw-rem-big strong.is-partial { color: var(--nw-muted); }
html body #app #page .nw-rem-view .nw-rem-big strong.is-partial.is-neg { color: color-mix(in srgb, var(--nw-neg) 70%, var(--nw-muted)); }
html body #app #page .nw-rem-view .nw-rem-tag.is-missing { color: var(--nw-warn); background: var(--nw-warn-soft); }
html body #app #page .nw-rem-view .nw-rem-big small.nw-rem-missing { color: var(--nw-warn); font-weight: 700; }
html body #app #page .nw-rem-view .nw-rem-bar.is-partial > i { opacity: 0.45; border: 1.5px dashed currentColor; color: var(--nw-line-strong); }
html body #app #page .nw-rem-view .nw-rem-bar.is-partial > b { color: var(--nw-muted); }
html body #app #page .nw-rem-view .nw-rem-sheet-list > li.is-partial { outline: 1px dashed var(--nw-line-strong); outline-offset: -1px; }
html body #app #page .nw-rem-view .nw-rem-fall-row > em.is-partial { color: var(--nw-muted); }
html body #app #page .nw-rem-view .nw-rem-fall-row.is-partial .nw-rem-track > i { opacity: 0.45; }
html body #app #page .nw-rem-view .nw-rem-money-note { margin: 8px 0 2px; }
html body #app #page .nw-rem-view .nw-rem-foot { display: grid; gap: 4px; }
html body #app #page .nw-rem-view .nw-rem-foot:empty { display: none; }

/* ¿Y si…? */
html body #app #page .nw-rem-view .nw-rem-whatif { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--nw-line); }
html body #app #page .nw-rem-view :is(.nw-rem-whatif h3, .nw-rem-sub) { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--nw-ink); }
html body #app #page .nw-rem-view .nw-rem-sub { margin-top: 4px; }
html body #app #page .nw-rem-view .nw-rem-row { display: grid; gap: 8px; }
html body #app #page .nw-rem-view .nw-rem-row > label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 800; color: var(--nw-ink); }
html body #app #page .nw-rem-view .nw-rem-row > label span { font-weight: 700; color: var(--nw-muted); font-variant-numeric: tabular-nums; }
html body #app #page .nw-rem-view .nw-rem-inline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
html body #app #page .nw-rem-view .nw-rem-inline :is(input, select) { width: 100%; height: 44px; min-height: 44px; padding: 0 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
html body #app #page .nw-rem-view .nw-rem-row input[type="range"] { width: 100%; height: 28px; margin: 0; accent-color: var(--nw-accent); }
html body #app #page .nw-rem-view .nw-rem-answer { margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; color: var(--nw-ink); background: var(--nw-accent-soft); }
html body #app #page .nw-rem-view .nw-rem-answer b { color: var(--nw-accent-text); }
html body #app #page .nw-rem-view .nw-rem-answer.is-bad { background: var(--nw-neg-soft); }
html body #app #page .nw-rem-view .nw-rem-answer.is-bad b { color: var(--nw-neg); }

/* Disclosures: her sheet, more payments, what money counts. */
html body #app #page .nw-rem-view .nw-rem-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--nw-accent-text); padding: 4px 0; }
html body #app #page .nw-rem-view .nw-rem-more > summary::-webkit-details-marker { display: none; }
html body #app #page .nw-rem-view .nw-rem-more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 180ms var(--lz-ease-out, ease-out); }
html body #app #page .nw-rem-view .nw-rem-more[open] > summary::before { transform: rotate(45deg); }
html body #app #page .nw-rem-view .nw-rem-sheet-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
html body #app #page .nw-rem-view .nw-rem-sheet-list > li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--nw-surface-2); }
html body #app #page .nw-rem-view .nw-rem-sheet-list b { font-size: 13.5px; color: var(--nw-ink); }
html body #app #page .nw-rem-view .nw-rem-sheet-list span { font-size: 12.5px; line-height: 1.5; color: var(--nw-muted); font-variant-numeric: tabular-nums; }
html body #app #page .nw-rem-view .nw-rem-sheet-list strong { color: var(--nw-ink); font-weight: 800; }
html body #app #page .nw-rem-view .nw-rem-sheet-list small { font-size: 11.5px; color: var(--nw-muted); }

/* ¿Me alcanza? */
html body #app #page .nw-rem-view .nw-rem-verdict { margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; color: var(--nw-ink); background: var(--nw-surface-2); }
html body #app #page .nw-rem-view .nw-rem-verdict[data-rem-verdict="yes"] { background: var(--nw-pos-soft); }
html body #app #page .nw-rem-view .nw-rem-verdict[data-rem-verdict="yes"] b { color: var(--nw-pos); }
html body #app #page .nw-rem-view .nw-rem-verdict[data-rem-verdict="no"] { background: var(--nw-neg-soft); }
html body #app #page .nw-rem-view .nw-rem-verdict[data-rem-verdict="no"] b { color: var(--nw-neg); }
html body #app #page .nw-rem-view .nw-rem-fall { display: grid; gap: 10px; }
html body #app #page .nw-rem-view .nw-rem-fall-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
html body #app #page .nw-rem-view .nw-rem-fall-row > span { font-weight: 800; color: var(--nw-ink); line-height: 1.2; }
html body #app #page .nw-rem-view .nw-rem-fall-row > span small { display: block; font-size: 11.5px; font-weight: 700; color: var(--nw-muted); font-variant-numeric: tabular-nums; }
html body #app #page .nw-rem-view .nw-rem-track { position: relative; height: 12px; border-radius: 999px; overflow: hidden; background: var(--nw-surface-2); border: 1px solid var(--nw-line); }
html body #app #page .nw-rem-view .nw-rem-track > i { position: absolute; top: 0; bottom: 0; border-radius: 999px; transition: left 240ms var(--lz-ease-out, ease-out), width 240ms var(--lz-ease-out, ease-out); }
html body #app #page .nw-rem-view .nw-rem-fall-row > em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--nw-ink); }
html body #app #page .nw-rem-view .nw-rem-fall-row > em.is-good { color: var(--nw-pos); }
html body #app #page .nw-rem-view .nw-rem-fall-row > em.is-bad { color: var(--nw-neg); }
html body #app #page .nw-rem-view .nw-rem-fall-row > em.is-skip { color: var(--nw-muted); }
html body #app #page .nw-rem-view .nw-rem-fall-row.is-skipped .nw-rem-track > i { opacity: 0.35; }
html body #app #page .nw-rem-view .nw-rem-warn { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; color: var(--nw-warn); background: var(--nw-warn-soft); }

/* Priority chips: Siempre · Este mes sí · Opcional · No incluir. */
html body #app #page .nw-rem-view .nw-rem-tiers { list-style: none; margin: 0; padding: 0; display: grid; }
html body #app #page .nw-rem-view .nw-rem-tier { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--nw-line); }
html body #app #page .nw-rem-view .nw-rem-tier:last-child { border-bottom: 0; }
html body #app #page .nw-rem-view .nw-rem-tier > span { min-width: 0; display: grid; gap: 1px; }
html body #app #page .nw-rem-view .nw-rem-tier > span b { font-size: 14px; font-weight: 750; color: var(--nw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #app #page .nw-rem-view .nw-rem-tier > span small { font-size: 11.5px; color: var(--nw-muted); }
html body #app #page .nw-rem-view .nw-rem-tier > strong { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--nw-ink); }
html body #app #page .nw-rem-view .nw-rem-tier.is-skipped > :is(span, strong) { opacity: 0.6; }
html body #app #page .nw-rem-view .nw-rem-chip {
  appearance: none; min-width: 94px; height: 32px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent;
  font: 800 12px/1 var(--nw-font, inherit); cursor: pointer; white-space: nowrap;
  transition: transform var(--lz-press, 140ms) var(--lz-ease-out, ease-out), background-color 160ms ease, color 160ms ease;
}
html body #app #page .nw-rem-view .nw-rem-chip:not(:disabled):active { transform: scale(0.94); }
html body #app #page .nw-rem-view .nw-rem-chip[data-t="siempre"] { color: var(--nw-accent-text); background: var(--nw-accent-soft); }
html body #app #page .nw-rem-view .nw-rem-chip[data-t="mes"] { color: var(--nw-warn); background: var(--nw-warn-soft); }
html body #app #page .nw-rem-view .nw-rem-chip[data-t="opcional"] { color: var(--lz-sky, var(--nw-virtuality)); background: color-mix(in srgb, var(--lz-sky, var(--nw-virtuality)) 14%, var(--nw-surface)); }
html body #app #page .nw-rem-view .nw-rem-chip[data-t="no"] { color: var(--nw-muted); background: var(--nw-surface-2); border-color: var(--nw-line-strong); text-decoration: line-through; }
html body #app #page .nw-rem-view .nw-rem-chip:disabled { cursor: default; opacity: 0.7; }
html body #app #page .nw-rem-view .nw-rem-checks { display: grid; margin-top: 6px; }
html body #app #page .nw-rem-view .nw-rem-check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--nw-line); font-size: 13.5px; }
html body #app #page .nw-rem-view .nw-rem-check:last-child { border-bottom: 0; }
html body #app #page .nw-rem-view .nw-rem-check span { min-width: 0; display: grid; gap: 1px; }
html body #app #page .nw-rem-view .nw-rem-check small { font-size: 11.5px; color: var(--nw-muted); }
html body #app #page .nw-rem-view .nw-rem-check strong { font-weight: 800; font-variant-numeric: tabular-nums; }
html body #app #page .nw-rem-view .nw-rem-check.is-off { opacity: 0.6; }
html body #app #page .nw-rem-view .nw-rem-link { appearance: none; justify-self: start; padding: 6px 0; border: 0; background: none; box-shadow: none; color: var(--nw-accent-text); font: 800 13.5px/1.3 var(--nw-font, inherit); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* The tab: full name on the computer, «A futuro» on the phone. */
html body #app #page .nw-rem-tab .nw-rem-tab-short { display: none; }
@media (max-width: 760px) {
  /* Five Panorama tabs on one line: each as wide as its word, none cut. */
  html[data-theme] body #app #page .registry-visual-tabs > button { flex: 1 1 auto; min-width: 0; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
  html body #app #page .nw-rem-tab .nw-rem-tab-long { display: none; }
  html body #app #page .nw-rem-tab .nw-rem-tab-short { display: inline; }
  html body #app #page .nw-rem-view .nw-rem-card { padding: 14px; }
  html body #app #page .nw-rem-view .nw-rem-fall-row { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 8px; }
  html body #app #page .nw-rem-view .nw-rem-chip { min-width: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  html body #app #page .nw-rem-view :is(.nw-rem-bar > i, .nw-rem-track > i, .nw-rem-chip, .nw-rem-seg > button, .nw-rem-levels > button, .nw-rem-more > summary::before) { transition: none; }
}

/* ==========================================================================
   Luces · 22 oct: colour with a job, and motion that answers her.
   1. Each business keeps its colour on its own screens (Personal violet,
      Helion pink, Virtuality blue): title key, title, section titles and
      the OnlyFans block on Inicio. The primary buttons stay brand violet.
   2. Inicio's main figure settles in when Niwwi opens (CSS) and when its
      value changes on the same screen (mova-luces.js, Web Animations, so
      nothing is written into the page). Screen changes stay instant.
   3. «Actualizar»: turns on hover, a light passes while it works, and it
      ends with a check (or a warning if a source failed).
   4. Phone dock: «Registrar» sits on the same line as the other words.
   ========================================================================== */

/* 1 · Business colour. */
html[data-luces] body #app #page .fv-business-dashboard[data-lz-business="personal"] { --lz-biz: var(--lz-violet); }
html[data-luces] body #app #page .fv-business-dashboard[data-lz-business="helion"],
html[data-luces] body #app #page .dashboard-platform-activity { --lz-biz: var(--lz-pink); }
html[data-luces] body #app #page .fv-business-dashboard[data-lz-business="virtuality"] { --lz-biz: var(--lz-blue); }
html[data-luces][data-theme] body #app #page .fv-business-dashboard[data-lz-business]:not([data-lz-business="none"]) {
  --nw-title-grad: linear-gradient(100deg, color-mix(in srgb, var(--lz-biz) 70%, var(--nw-ink)) 0%, var(--lz-biz) 55%, color-mix(in srgb, var(--lz-biz) 65%, var(--nw-accent)) 100%);
  --lz-title: color-mix(in srgb, var(--lz-biz) 72%, var(--nw-ink));
}
html[data-luces][data-theme="dark"] body #app #page .fv-business-dashboard[data-lz-business]:not([data-lz-business="none"]) {
  --nw-title-grad: linear-gradient(100deg, color-mix(in srgb, var(--lz-biz) 45%, #FFFFFF) 0%, var(--lz-biz) 60%, color-mix(in srgb, var(--lz-biz) 70%, var(--nw-accent)) 100%);
  --lz-title: color-mix(in srgb, var(--lz-biz) 70%, #FFFFFF);
}
html[data-luces][data-theme][data-theme] body #app #page .fv-business-dashboard[data-lz-business]:not([data-lz-business="none"]) .niwwi-title-symbol {
  background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, 0.34), transparent 55%), linear-gradient(140deg, var(--lz-biz), color-mix(in srgb, var(--lz-biz) 58%, var(--nw-accent))) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 22px -10px color-mix(in srgb, var(--lz-biz) 70%, transparent) !important;
}
/* The OnlyFans block on Inicio is Helion's money: it wears Helion pink. */
html[data-luces][data-theme][data-theme] body #app #page .dashboard-platform-activity .niwwi-section-icon {
  color: var(--lz-biz) !important;
  background: color-mix(in srgb, var(--lz-biz) 12%, var(--nw-surface)) !important;
  border-color: color-mix(in srgb, var(--lz-biz) 30%, transparent) !important;
}
html[data-luces][data-theme][data-theme] body #app #page .dashboard-platform-activity h2 { color: color-mix(in srgb, var(--lz-biz) 75%, var(--nw-ink)) !important; }
html[data-luces][data-theme="dark"][data-theme] body #app #page .dashboard-platform-activity h2 { color: color-mix(in srgb, var(--lz-biz) 70%, #FFFFFF) !important; }
html[data-luces][data-theme][data-theme] body #app #page .dashboard-platform-activity .helion-platform-totals > article {
  background: color-mix(in srgb, var(--lz-biz) 6%, var(--nw-surface)) !important;
  border-color: color-mix(in srgb, var(--lz-biz) 22%, var(--nw-line)) !important;
}

/* 2 · The main figure settles in. Starts visible (faint, a step lower) and lands; nothing waits for it. */
@keyframes lz-figure-settle {
  from { opacity: 0.3; transform: translateY(8px); filter: blur(2.5px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes lz-fade-in { from { opacity: 0.45; } to { opacity: 1; } }
html[data-luces].lz-boot body #app #page .nw-inicio-big { animation: lz-figure-settle 560ms var(--lz-ease-out) 90ms both; }

/* 3 · «Actualizar». */
html[data-luces] body [data-fv-refresh-all] { position: relative; overflow: hidden; isolation: isolate; }
html[data-luces] body [data-fv-refresh-all] :is(.sidebar-refresh-icon, .lz-bi, :not(.sidebar-refresh-icon, .lz-bi) > .mova-icon) { transition: transform 420ms var(--lz-ease-out), opacity 160ms ease; }
@media (hover: hover) {
  html[data-luces] body [data-fv-refresh-all]:not(:disabled):hover :is(.sidebar-refresh-icon, .lz-bi, :not(.sidebar-refresh-icon, .lz-bi) > .mova-icon) { transform: rotate(180deg); }
  html[data-luces][data-theme] body [data-fv-refresh-all]:not(:disabled):hover { color: var(--nw-accent-text) !important; border-color: color-mix(in srgb, var(--nw-accent) 45%, var(--nw-line)) !important; }
}
html[data-luces] body [data-fv-refresh-all]:not(:disabled):active { transform: scale(0.97); }
html[data-luces] body [data-fv-refresh-all].is-syncing :is(.sidebar-refresh-icon, .lz-bi, :not(.sidebar-refresh-icon, .lz-bi) > .mova-icon) { animation: lz-turn 900ms linear infinite; }
html[data-luces] body [data-fv-refresh-all].is-syncing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--nw-accent) 20%, transparent) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: lz-sweep 1.15s var(--lz-ease-out) infinite;
}
@keyframes lz-turn { to { transform: rotate(360deg); } }
@keyframes lz-sweep { to { transform: translateX(100%); } }
@keyframes lz-pop { from { opacity: 0; transform: scale(0.55) rotate(-25deg); } to { opacity: 1; transform: none; } }
/* Finished: <html data-lz-synced="ok|warn"> for a moment; the icon gives way to a check or a warning. */
html[data-luces][data-lz-synced] body [data-fv-refresh-all]:not(.is-syncing) :is(.sidebar-refresh-icon, .lz-bi, :not(.sidebar-refresh-icon, .lz-bi) > .mova-icon) { display: none !important; }
html[data-luces][data-lz-synced] body [data-fv-refresh-all]:not(.is-syncing)::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: lz-pop 260ms var(--lz-ease-out) both;
}
html[data-luces][data-lz-synced="warn"] body [data-fv-refresh-all]:not(.is-syncing)::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 3 17.4a2 2 0 0 0 1.7 3h14.6a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5V14M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 3 17.4a2 2 0 0 0 1.7 3h14.6a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5V14M12 17h.01'/%3E%3C/svg%3E"); }
html[data-luces][data-lz-synced] body .sidebar-global-refresh[data-fv-refresh-all]::after { order: -1; }
html[data-luces][data-theme][data-lz-synced="ok"] body #app [data-fv-refresh-all]:not(.is-syncing):not(#lz) { color: var(--nw-pos) !important; border-color: color-mix(in srgb, var(--nw-pos) 45%, transparent) !important; }
html[data-luces][data-theme][data-lz-synced="warn"] body #app [data-fv-refresh-all]:not(.is-syncing):not(#lz) { color: var(--nw-warn) !important; border-color: color-mix(in srgb, var(--nw-warn) 45%, transparent) !important; }

/* 4 · Phone dock: «Registrar» on the same line as the rest. Its key rises instead of pushing its word down. */
@media (max-width: 760px) {
  html[data-luces][data-theme] body .mova-mobile-bottom-nav [data-mobile-register] > span:first-child { margin-top: -9px !important; }
  html[data-luces][data-theme] body .mova-mobile-bottom-nav .mova-ai-launcher-copy { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-luces].lz-boot body #app #page .nw-inicio-big { animation: lz-fade-in 200ms ease both; }
  html[data-luces] body [data-fv-refresh-all] :is(.sidebar-refresh-icon, .lz-bi, :not(.sidebar-refresh-icon, .lz-bi) > .mova-icon) { transition: none; }
  html[data-luces] body [data-fv-refresh-all]:not(:disabled):hover :is(.sidebar-refresh-icon, .lz-bi, :not(.sidebar-refresh-icon, .lz-bi) > .mova-icon) { transform: none; }
  html[data-luces] body [data-fv-refresh-all].is-syncing::after { animation: none; opacity: 0; }
  html[data-luces][data-lz-synced] body [data-fv-refresh-all]:not(.is-syncing)::after { animation: lz-fade-in 160ms ease both; }
}

/* Read-only economic spending versus calendar progress. */
html[data-theme] body #app #page .niwwi-spending-pace { display:grid; gap:12px; min-width:0; margin-block:18px; padding:20px; }
html[data-theme] body #app #page .niwwi-spending-pace header { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; }
html[data-theme] body #app #page .niwwi-spending-pace h2 { margin:0; font-size:17px; }
html[data-theme] body #app #page .niwwi-spending-pace :is(p,small) { margin:0; color:var(--muted); line-height:1.5; }
html[data-theme] body #app #page .niwwi-pace-line { display:grid; grid-template-columns:42px minmax(30px,1fr) auto; align-items:center; gap:10px; font-size:13px; }
html[data-theme] body #app #page .niwwi-pace-line [role=meter] { overflow:hidden; background:var(--surface-2,#eee9f7); border-radius:999px; height:8px; }
html[data-theme] body #app #page .niwwi-pace-line i { display:block; height:100%; background:var(--purple,#7c3aed); border-radius:inherit; }
html[data-theme] body #app #page .niwwi-pace-line + .niwwi-pace-line i { background:var(--muted,#8b8399); }
html[data-theme] body #app #page .niwwi-spending-pace button { justify-self:start; white-space:normal; text-align:left; min-height:44px; }