/* Cuarto Kawaii: illustrated room, lit surfaces and stationery details.
   Everything here is presentation-only and scoped to the optional appearance. */
html[data-appearance="kawaii"][data-theme="light"] {
  --bg: #fbf0fa; --side: #f8edfc; --surface: #fffafd; --surface2: #f3eafa;
  --surface3: #ebdef6; --line: #ddc9ed; --text: #482369; --muted: #735987;
  --purple: #8550c4; --pink: #b93985; --cyan: #197f90;
  --green: #137a61; --coral: #b93763; --yellow: #956019;
  --room-wallpaper: url('assets/illustrations/niwwi-room-wallpaper-day.webp');
  --room-panel: #fffafbf2; --room-panel-low: #f7effbe8;
  --room-nav: #f4e8f8ed; --room-edge: #ffffffde; --room-shadow: #7045901c;
  --room-lilac: #a780df; --room-pink: #dc92c4; --room-blue: #82b9da;
  --room-warm: #edbd82; --room-cloud: #dac6f34d;
  --room-halo: 14%; --room-icon-bg: #ffffff70;
  --niwwi-scroll: #bd94ce; --niwwi-glow: #bd8fea38;
  --niwwi-action-gradient: linear-gradient(115deg,#8050bd,#ab548f);
}
html[data-appearance="kawaii"][data-theme="dark"] {
  --bg: #211d37; --side: #272139; --surface: #2c2642; --surface2: #39304e;
  --surface3: #47385e; --line: #67537e; --text: #f8edff; --muted: #d0bedf;
  --purple: #d3b0ff; --pink: #ffafd5; --cyan: #9adcec;
  --green: #94e5ce; --coral: #ffaccb; --yellow: #ffcf99;
  --room-wallpaper: url('assets/illustrations/niwwi-room-wallpaper-night.webp');
  --room-panel: #2b2640f2; --room-panel-low: #251f38eb;
  --room-nav: #29223eea; --room-edge: #ffe2fb50; --room-shadow: #08041650;
  --room-lilac: #ba94ed; --room-pink: #ed8bbf; --room-blue: #81bfdc;
  --room-warm: #ffc18b; --room-cloud: #63538440;
  --room-halo: 22%; --room-icon-bg: #b48ce91c;
  --niwwi-scroll: #916899; --niwwi-glow: #e3b0ff2b;
  --niwwi-action-gradient: linear-gradient(115deg,#8054b5,#a3508b);
}
html[data-appearance="kawaii"] body { background: var(--bg); }
html[data-appearance="kawaii"] body::before,
html[data-appearance="kawaii"] body::after { display: none; }
html[data-appearance="kawaii"] #app .main { isolation: isolate; background: transparent; }
html[data-appearance="kawaii"] #app .main::before {
  content: ''; position: fixed; inset: 0 0 0 244px; z-index: -1; pointer-events: none;
  background: var(--room-wallpaper) center top / 100% 100% no-repeat, var(--bg);
}
html[data-appearance="kawaii"] #app .sidebar.collapsed ~ .main::before { left: 76px; }
html[data-appearance="kawaii"] body #app #page {
  padding: 24px clamp(24px,4.4vw,76px) 112px; background: transparent;
}

/* The same room frames all pages. The title remains on a quiet opaque surface. */
html[data-appearance="kawaii"][data-theme] body #app #page .niwwi-page-header {
  min-height: 162px; padding: 26px 30px; gap: 20px; overflow: hidden;
  border: 1px solid var(--room-edge); border-radius: 26px;
  background: linear-gradient(100deg,var(--room-panel) 4%,var(--room-panel-low) 55%,transparent 95%),var(--room-wallpaper) right 9% / 100% auto no-repeat;
  box-shadow: inset 0 1px 0 var(--room-edge),0 8px 25px var(--room-shadow),0 0 18px color-mix(in srgb,var(--room-pink) 12%,transparent);
}
html[data-appearance="kawaii"][data-theme] body #app #page .niwwi-page-header::after { display: none; }
html[data-appearance="kawaii"] #page .niwwi-page-header > * { position: relative; z-index: 1; }
html[data-appearance="kawaii"] #page .niwwi-page-title { color: var(--text); text-shadow: none; }
html[data-appearance="kawaii"] #page .niwwi-page-header p { max-width: 48ch; color: var(--muted); }
html[data-appearance="kawaii"] #page .niwwi-title-symbol {
  background: linear-gradient(135deg,var(--room-icon-bg),color-mix(in srgb,var(--room-lilac) 20%,var(--surface)));
  border-color: color-mix(in srgb,var(--room-lilac) 65%,var(--line));
  box-shadow: inset 0 1px 0 var(--room-edge),0 0 20px color-mix(in srgb,var(--room-lilac) 22%,transparent);
}
html[data-appearance="kawaii"][data-theme="dark"] #page .niwwi-title-symbol {
  color: #fff2ff; text-shadow: 0 0 10px #f7d2ff;
}

/* Layered panels catch the room's light without putting art behind the figures. */
html[data-appearance="kawaii"][data-theme] body #app #page :is(.card,.catalog-card,.settings-account-card,.personal-account-card,.saving-goal-card,.movement-summary-strip article,.debt-summary-grid article,.savings-summary-grid article,.analysis-kpis article,.calendar-month-insights article,.history-kpi) {
  background: radial-gradient(ellipse 240px 180px at 100% 0,color-mix(in srgb,var(--room-card-light,var(--room-lilac)) var(--room-halo),transparent),transparent 85%),linear-gradient(145deg,var(--room-panel),var(--room-panel-low)) !important;
  border: 1px solid color-mix(in srgb,var(--room-card-light,var(--room-lilac)) 48%,var(--line)) !important;
  box-shadow: inset 0 1px 0 var(--room-edge),0 7px 22px var(--room-shadow),0 0 14px color-mix(in srgb,var(--room-card-light,var(--room-lilac)) 7%,transparent) !important;
}
html[data-appearance="kawaii"] #page :is(.card,.catalog-card,.settings-account-card,.personal-account-card)::after {
  width: 48px; height: 36px; top: 10px; right: 12px;
  background: var(--room-star) 1px 17px/9px 9px no-repeat,var(--room-star) 24px 2px/15px 15px no-repeat;
  opacity: .9; filter: drop-shadow(0 0 6px color-mix(in srgb,var(--room-card-light,var(--room-warm)) 75%,transparent));
}
.niwwi-kpi-emblem { display: none; }
html[data-appearance="kawaii"] #page .niwwi-kpi-emblem {
  display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; margin-bottom: 3px;
  color: var(--room-metric-ink,var(--purple)); border: 1px solid color-mix(in srgb,var(--room-card-light) 50%,var(--line));
  border-radius: 13px; background: linear-gradient(140deg,var(--room-icon-bg),color-mix(in srgb,var(--room-card-light) 14%,var(--surface)));
  box-shadow: inset 0 1px 0 var(--room-edge),0 0 12px color-mix(in srgb,var(--room-card-light) 12%,transparent);
  pointer-events: none;
}
html[data-appearance="kawaii"] #page .niwwi-kpi-emblem svg { width: 23px; height: 23px; }
.niwwi-room-ornament,.niwwi-card-sparkles,.niwwi-label-spark { display: none; }
html[data-appearance="kawaii"] #page .niwwi-room-decorated { position: relative; isolation: isolate; }
/* Native SVG adornments replace the older CSS stars and clock on these cards. */
html[data-appearance="kawaii"][data-theme] body #app #page .niwwi-room-decorated:has(> .niwwi-card-sparkles)::after { content: none; display: none; }
html[data-appearance="kawaii"][data-theme] body #app #page .money-overview-kpis > .receivable-kpi.niwwi-room-decorated::before { content: none; display: none; }
html[data-appearance="kawaii"] #page .niwwi-room-ornament {
  display: grid; place-items: center; position: absolute; right: 20px; top: 28px; width: 110px; height: 110px;
  border-radius: 50%; z-index: -1; pointer-events: none; opacity: .1;
  color: var(--room-card-light,var(--purple));
  background: radial-gradient(circle,color-mix(in srgb,currentColor 35%,transparent),transparent 72%);
  transform: rotate(-12deg); filter: drop-shadow(0 0 8px currentColor);
}
html[data-appearance="kawaii"] #page .niwwi-room-ornament svg { width: 88px; height: 88px; stroke-width: 1.1; }
html[data-appearance="kawaii"] #page .niwwi-room-decorated:nth-child(3n+2) > .niwwi-room-ornament { transform: rotate(11deg); top: 40px; }
html[data-appearance="kawaii"][data-theme="dark"] #page .niwwi-room-ornament { opacity: .13; }
html[data-appearance="kawaii"] #page .niwwi-card-sparkles {
  display: block; position: absolute; top: 8px; right: 10px; width: 40px; height: 35px;
  color: var(--room-card-light,var(--room-lilac)); pointer-events: none; z-index: -1;
}
html[data-appearance="kawaii"] #page .niwwi-card-sparkles svg { width: 100%; height: 100%; overflow: visible; }
html[data-appearance="kawaii"] #page .niwwi-card-sparkles path { fill: color-mix(in srgb,currentColor 40%,var(--surface)); stroke: currentColor; stroke-width: 1; }
html[data-appearance="kawaii"] #page .niwwi-card-sparkles circle { fill: currentColor; }
html[data-appearance="kawaii"][data-theme="dark"] #page .niwwi-card-sparkles { color: var(--room-warm); filter: drop-shadow(0 0 5px #ffbc91a0); }
html[data-appearance="kawaii"][data-theme="dark"] #page .niwwi-card-sparkles path { fill: #fff0c6; stroke: #ffd2a6; }
html[data-appearance="kawaii"] #page .simple-kpi:has(> .niwwi-metric-plus) > .niwwi-card-sparkles { right: 48px; }
/* Keep card-header badges, disclosure arrows and actions clear of the glints. */
html[data-appearance="kawaii"] #page :is(.account-card,.settings-account-card,.debt-account-card,.personal-account-card,.saving-goal-card) > .niwwi-card-sparkles { top: 3px; right: 12px; width: 20px; height: 17px; }
html[data-appearance="kawaii"][data-theme] body #app #page .money-overview-kpis > .simple-kpi:first-child > .kpi-label::after { display: none !important; }
html[data-appearance="kawaii"] #page .niwwi-label-spark {
  display: inline-flex; vertical-align: middle; width: 23px; height: 23px; margin-left: 7px;
  color: var(--purple); filter: drop-shadow(0 0 4px color-mix(in srgb,var(--purple) 50%,transparent)); pointer-events: none;
}
html[data-appearance="kawaii"] #page .niwwi-label-spark svg { width: 100%; height: 100%; fill: color-mix(in srgb,var(--purple) 35%,transparent); stroke-width: 1; }
html[data-appearance="kawaii"][data-theme="dark"] #page .niwwi-label-spark { color: #ffe5b7; filter: drop-shadow(0 0 5px #ffd28b90); }
html[data-appearance="kawaii"][data-theme="dark"] #page .niwwi-label-spark svg { fill: #fff1c6; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  html[data-appearance="kawaii"] #page :is(.niwwi-room-ornament,.niwwi-kpi-emblem) { transition: opacity .3s,filter .3s,box-shadow .3s; }
  html[data-appearance="kawaii"] #page .niwwi-room-decorated:hover > .niwwi-room-ornament { opacity: .2; filter: drop-shadow(0 0 12px currentColor); }
  html[data-appearance="kawaii"] #page .niwwi-room-decorated:hover > .niwwi-kpi-emblem { box-shadow: inset 0 0 12px color-mix(in srgb,var(--room-card-light) 22%,transparent),0 0 18px color-mix(in srgb,var(--room-card-light) 32%,transparent); }
  html[data-appearance="kawaii"] #page .niwwi-room-decorated:hover > .niwwi-card-sparkles .room-glint-main { animation: room-star-breathe 2.8s ease-in-out infinite; transform-origin: 28px 14px; }
  html[data-appearance="kawaii"] #page .niwwi-room-decorated:hover > .niwwi-card-sparkles .room-glint-small { animation: room-star-breathe 2.8s .8s ease-in-out infinite; transform-origin: 9px 27px; }
  html[data-appearance="kawaii"] #page .account-balance-kpi:hover .niwwi-label-spark { animation: room-star-breathe 3.4s ease-in-out infinite; }
}
@keyframes room-star-breathe { 0%,100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.12); } }
html[data-appearance="kawaii"][data-theme] body #app #page .dashboard-kpis > .simple-kpi { --room-card-light: var(--room-lilac); --room-metric-ink: var(--purple); }
html[data-appearance="kawaii"][data-theme] body #app #page .dashboard-kpis > .simple-kpi.positive { --room-card-light: var(--green); --room-metric-ink: var(--green); }
html[data-appearance="kawaii"][data-theme] body #app #page .dashboard-kpis > .simple-kpi.negative { --room-card-light: var(--room-pink); --room-metric-ink: var(--coral); }
html[data-appearance="kawaii"][data-theme] body #app #page .dashboard-kpis > .simple-kpi:is(.debt,.receivable-kpi) { --room-card-light: var(--room-warm); --room-metric-ink: var(--yellow); }
html[data-appearance="kawaii"][data-theme] body #app #page .dashboard-kpis > .simple-kpi.neutral { --room-card-light: var(--room-blue); --room-metric-ink: var(--cyan); }
html[data-appearance="kawaii"][data-theme] body #app #page .dashboard-kpis > .simple-kpi.niwwi-spendable-kpi:not(.negative) { --room-card-light: var(--room-lilac); --room-metric-ink: var(--purple); }
html[data-appearance="kawaii"][data-theme] body #app #page .dashboard-kpis > .simple-kpi:has(> .niwwi-metric-plus[aria-label*="PAGOS DE DEUDA" i]) { --room-card-light: var(--room-warm); --room-metric-ink: var(--yellow); }
html[data-appearance="kawaii"][data-theme] body #app #page .money-overview-kpis > .account-balance-kpi::before { display: none; }
html[data-appearance="kawaii"][data-theme] body #app #page .dashboard-kpis > .simple-kpi:not(.account-balance-kpi) > :is(.simple-value,.kpi-label) { color: var(--room-metric-ink) !important; }
html[data-appearance="kawaii"][data-theme] body #app #page .dashboard-kpis > .account-balance-kpi > :is(.simple-value,.kpi-label) { color: var(--text) !important; }
html[data-appearance="kawaii"] #page .dashboard-kpis .kpi-label { font-size: 11px; letter-spacing: .055em; }
html[data-appearance="kawaii"] #page .dashboard-kpis .simple-value { line-height: 1.18; }
html[data-appearance="kawaii"] #page .money-overview-kpis .niwwi-monthly-stages strong { font-size: clamp(24px,2.2vw,30px); }
html[data-appearance="kawaii"][data-theme] body #app #page .actual-flow-split > div {
  background: color-mix(in srgb,var(--surface) 85%,transparent); border-color: var(--line);
}
html[data-appearance="kawaii"][data-theme] body #app #page .actual-flow-split > div:first-child { border-color: color-mix(in srgb,var(--green) 30%,var(--line)); }
html[data-appearance="kawaii"][data-theme] body #app #page .actual-flow-split > div:last-child { border-color: color-mix(in srgb,var(--coral) 30%,var(--line)); }
html[data-appearance="kawaii"] #page .dashboard-remainder-reconciliation .remainder-part {
  border-color: transparent; background: transparent;
}
html[data-appearance="kawaii"] #page .dashboard-remainder-reconciliation .remainder-part small { font-size: 10px; letter-spacing: .06em; color: var(--muted); }
html[data-appearance="kawaii"] #page .dashboard-remainder-reconciliation .remainder-part span { font-size: 12px; }
html[data-appearance="kawaii"] #page .dashboard-remainder-reconciliation .remainder-part.accumulated {
  background: radial-gradient(ellipse 90px 70px at 100% 100%,var(--room-cloud) 98%,transparent),radial-gradient(ellipse 70px 50px at 75% 120%,var(--room-cloud) 98%,transparent),color-mix(in srgb,var(--room-blue) 8%,var(--surface));
  border-color: color-mix(in srgb,var(--room-blue) 25%,var(--line));
}

/* Pearly menu and controls: the lit edges continue outside the content column. */
html[data-appearance="kawaii"][data-theme] body #app .sidebar {
  background: radial-gradient(ellipse 250px 290px at 5% 0,color-mix(in srgb,var(--room-lilac) 23%,transparent),transparent),radial-gradient(ellipse 250px 280px at 100% 100%,color-mix(in srgb,var(--room-pink) 18%,transparent),transparent),var(--room-nav) !important;
  border-right-color: var(--line); box-shadow: inset -1px 0 0 var(--room-edge),6px 0 25px var(--room-shadow);
}
html[data-appearance="kawaii"][data-theme] .sidebar .nav-item.active {
  background: linear-gradient(110deg,color-mix(in srgb,var(--room-pink) 22%,var(--surface)),color-mix(in srgb,var(--room-lilac) 28%,var(--surface))) !important;
  box-shadow: inset 0 1px 0 var(--room-edge),0 0 18px color-mix(in srgb,var(--room-pink) 23%,transparent);
}
html[data-appearance="kawaii"][data-theme="dark"] .sidebar .nav-item.active { color: #fff0fc; }
html[data-appearance="kawaii"][data-theme="dark"] .sidebar .nav-item.active .nav-icon { color: #fff; background: linear-gradient(130deg,#ae78c5,#8d5c9e); box-shadow: 0 0 14px #f6b6e560; }
html[data-appearance="kawaii"] .sidebar .nav-icon { background: var(--room-icon-bg); box-shadow: inset 0 1px 0 var(--room-edge); }
html[data-appearance="kawaii"][data-theme] .topbar {
  background: color-mix(in srgb,var(--room-nav) 88%,transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb,var(--line) 50%,transparent); box-shadow: none;
}
html[data-appearance="kawaii"] .niwwi-utilities { border: 1px solid var(--room-edge); background: var(--room-panel-low); border-radius: 18px; padding: 3px 4px 3px 12px; box-shadow: 0 0 16px var(--niwwi-glow); }
html[data-appearance="kawaii"][data-theme] body #app #page :is(.dashboard-switcher,.dashboard-mode,.analysis-toolbar,.movement-filters,.registry-toolbar,.smart-calendar-toolbar) {
  background: var(--room-panel); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--room-edge),0 4px 18px var(--room-shadow);
}
html[data-appearance="kawaii"][data-theme] body #app #page :is(.dashboard-switcher,.dashboard-mode) button.active {
  background: linear-gradient(135deg,color-mix(in srgb,var(--room-lilac) 24%,var(--surface)),color-mix(in srgb,var(--room-pink) 18%,var(--surface)));
  border-color: var(--room-edge); box-shadow: inset 0 1px 0 var(--room-edge),0 0 13px var(--niwwi-glow);
}
html[data-appearance="kawaii"][data-theme] body :is(.secondary,.action-btn,.sidebar-global-refresh,.niwwi-metric-plus) {
  box-shadow: inset 0 1px 0 var(--room-edge),0 3px 12px var(--room-shadow);
}
html[data-appearance="kawaii"][data-theme] #modalContent {
  background: radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--room-pink) 13%,transparent),transparent 45%),var(--surface);
  border-color: color-mix(in srgb,var(--room-lilac) 70%,var(--line));
  box-shadow: inset 0 1px 0 var(--room-edge),0 0 40px var(--niwwi-glow),0 24px 100px #11082160;
}
html[data-appearance="kawaii"] #page .niwwi-style-preview.kawaii { background: var(--room-wallpaper) center / cover no-repeat; }
@media(hover:hover) {
  html[data-appearance="kawaii"][data-theme] body #app #page :is(.card,.catalog-card,.settings-account-card,.personal-account-card):hover {
    border-color: color-mix(in srgb,var(--room-card-light,var(--room-lilac)) 80%,var(--line)) !important;
    box-shadow: inset 0 1px 0 var(--room-edge),0 0 26px color-mix(in srgb,var(--room-card-light,var(--room-lilac)) 23%,transparent),0 8px 24px var(--room-shadow) !important;
  }
}
@media(min-width:1280px) {
  html[data-appearance="kawaii"] body #app #page.general-dashboard-page .niwwi-page-header { flex-direction: row; align-items: center; }
  html[data-appearance="kawaii"] body #app #page.general-dashboard-page .niwwi-page-header .head-actions { width: auto; margin-left: auto; margin-right: min(13vw,190px); }
}
@media(max-width:760px) {
  html[data-appearance="kawaii"] #app .main::before,
  html[data-appearance="kawaii"] #app .sidebar.collapsed ~ .main::before { left: 0; background-size: auto 100%; background-position: right top; }
  html[data-appearance="kawaii"] body #app #page { padding: 18px 14px 115px; }
  html[data-appearance="kawaii"][data-theme] body #app #page .niwwi-page-header,
  html[data-appearance="kawaii"] body #app #page.general-dashboard-page .page-head.niwwi-page-header {
    min-height: 158px; padding: 20px 18px !important; border-radius: 22px;
    background: linear-gradient(95deg,var(--room-panel) 15%,var(--room-panel-low) 70%,transparent),var(--room-wallpaper) right top / auto 250px no-repeat;
  }
  html[data-appearance="kawaii"] body #app #page.general-dashboard-page .niwwi-page-header > div:first-child { padding-right: 0; min-height: 0; }
  html[data-appearance="kawaii"] #page .niwwi-kpi-emblem { width: 34px; height: 34px; border-radius: 11px; }
  html[data-appearance="kawaii"] #page .niwwi-kpi-emblem svg { width: 20px; height: 20px; }
  html[data-appearance="kawaii"] #page .niwwi-room-ornament { width: 80px; height: 80px; right: 16px; top: 30px; }
  html[data-appearance="kawaii"] #page .niwwi-room-ornament svg { width: 65px; height: 65px; }
  html[data-appearance="kawaii"] .niwwi-utilities { padding: 0; border: 0; background: transparent; box-shadow: none; }
  html[data-appearance="kawaii"][data-theme] :is(.mova-mobile-bottom-nav,.mova-mobile-topbar) { background: var(--room-nav) !important; backdrop-filter: blur(14px); }
}
@media(forced-colors:active) {
  html[data-appearance="kawaii"] #app .main::before { display: none; }
  html[data-appearance="kawaii"] #page .niwwi-kpi-emblem { border-color: CanvasText; }
}