/* Inicio escritorio claro — material óptico Zenit.
   Derivado de material-preview.html: blur + saturación, highlight superior,
   sombra de contacto y sombra ambiental. El media query mantiene esta capa
   fuera de móvil y el selector de vista evita afectar otras secciones. */
@media (min-width: 769px) {
  :root[data-resolved-theme='light'] body[data-v2-view='overview'] {
    --overview-desktop-material: layered;
    --overview-light-bg: #eef2ef;
    --overview-light-border: rgba(255, 255, 255, 0.88);
    --overview-light-surface:
      radial-gradient(135% 100% at 14% -24%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 55%),
      linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(246, 249, 247, 0.62));
    --overview-light-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 0 0 1px rgba(20, 32, 24, 0.018),
      0 1px 2px rgba(26, 41, 31, 0.075), 0 14px 30px -19px rgba(26, 41, 31, 0.23),
      0 34px 66px -42px rgba(26, 41, 31, 0.3);
    background: var(--overview-light-bg);
  }

  :root[data-resolved-theme='light'] body[data-v2-view='overview'] .mv7-app {
    border-color: rgba(255, 255, 255, 0.76);
    background: rgba(247, 250, 247, 0.68);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      0 30px 90px -48px rgba(25, 39, 29, 0.34);
  }

  :root[data-resolved-theme='light'] body[data-v2-view='overview'] .mv7-workspace {
    background:
      radial-gradient(circle at 4% 1%, rgba(39, 177, 126, 0.075), transparent 33rem),
      radial-gradient(circle at 96% 24%, rgba(91, 125, 219, 0.052), transparent 28rem),
      linear-gradient(180deg, #f9fbf9 0%, #f3f6f3 54%, #eef2ef 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  :root[data-resolved-theme='light'] body[data-v2-view='overview'] .mv7-sidebar {
    border-right-color: rgba(255, 255, 255, 0.78);
    background: rgba(250, 252, 250, 0.82);
    box-shadow:
      inset -1px 0 0 rgba(24, 37, 28, 0.035),
      14px 0 34px -30px rgba(24, 37, 28, 0.28);
    backdrop-filter: blur(28px) saturate(1.38);
    -webkit-backdrop-filter: blur(28px) saturate(1.38);
  }

  :root[data-resolved-theme='light'] body[data-v2-view='overview'] .mv7-topbar {
    border-bottom-color: rgba(255, 255, 255, 0.76);
    background: rgba(248, 251, 248, 0.72);
    box-shadow:
      inset 0 -1px 0 rgba(25, 39, 29, 0.03),
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 12px 32px -29px rgba(25, 39, 29, 0.34);
    backdrop-filter: blur(28px) saturate(1.48);
    -webkit-backdrop-filter: blur(28px) saturate(1.48);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    :is(.mv7-page-icon, .mv7-topbar .mv7-icon-button, .mv7-topbar .mv7-avatar) {
    border-color: var(--overview-light-border);
    background: var(--overview-light-surface);
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 0 0 1px rgba(20, 32, 24, 0.02),
      0 1px 2px rgba(26, 41, 31, 0.06),
      0 9px 20px -14px rgba(26, 41, 31, 0.28);
    backdrop-filter: blur(22px) saturate(1.42);
    -webkit-backdrop-filter: blur(22px) saturate(1.42);
  }

  :root[data-resolved-theme='light'] body[data-v2-view='overview'] .mv7-live-pill {
    border-color: rgba(34, 157, 111, 0.12);
    background: linear-gradient(155deg, rgba(46, 179, 130, 0.13), rgba(46, 179, 130, 0.065));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      0 6px 14px -11px rgba(30, 139, 99, 0.46);
  }

  :root[data-resolved-theme='light'] body[data-v2-view='overview'] .mv7-period-control {
    border-color: rgba(255, 255, 255, 0.86);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(236, 241, 237, 0.62));
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 0 0 1px rgba(24, 37, 28, 0.025),
      0 8px 20px -16px rgba(24, 37, 28, 0.34);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
  }

  :root[data-resolved-theme='light'] body[data-v2-view='overview'] .mv7-period-thumb {
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
      inset 0 1px 0 #fff,
      0 1px 2px rgba(27, 40, 31, 0.09),
      0 5px 12px -8px rgba(27, 40, 31, 0.32);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    :is(.mv7-metric, .mv7-panel, .mv7-overview-insight) {
    isolation: isolate;
    border-color: var(--overview-light-border);
    background: var(--overview-light-surface);
    box-shadow: var(--overview-light-shadow);
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    :is(.mv7-metric, .mv7-panel)::before {
    background: radial-gradient(130% 90% at 18% -20%, rgba(255, 255, 255, 0.92), transparent 55%);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    .mv7-metric-primary {
    background:
      radial-gradient(circle at 12% -24%, rgba(64, 188, 142, 0.12), transparent 55%),
      var(--overview-light-surface);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    .mv7-metric-income {
    background:
      radial-gradient(circle at 10% -18%, rgba(45, 190, 137, 0.14), transparent 56%),
      var(--overview-light-surface);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    .mv7-metric-expense {
    background:
      radial-gradient(circle at 10% -18%, rgba(226, 142, 66, 0.14), transparent 56%),
      var(--overview-light-surface);
  }

  :root[data-resolved-theme='light'] body[data-v2-view='overview'] #overview-view .mv7-metric-icon {
    border: 1px solid rgba(255, 255, 255, 0.84);
    background: linear-gradient(
      155deg,
      color-mix(in srgb, var(--icon-color) 17%, white),
      rgba(255, 255, 255, 0.48)
    );
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 0 0 1px color-mix(in srgb, var(--icon-color) 6%, transparent),
      0 8px 18px -13px color-mix(in srgb, var(--icon-color) 42%, transparent);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    :is(.mv7-chart-wrap, .mv7-panel-stats, .mv7-account-total) {
    border-color: rgba(255, 255, 255, 0.78);
    background:
      radial-gradient(120% 90% at 16% -25%, rgba(255, 255, 255, 0.9), transparent 58%),
      rgba(242, 247, 244, 0.54);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 0 0 1px rgba(25, 40, 30, 0.02),
      0 8px 22px -18px rgba(25, 40, 30, 0.22);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    :is(.mv7-account-item, .mv7-transaction-row) {
    border-color: rgba(27, 42, 31, 0.055);
    transition:
      background 150ms ease,
      box-shadow 150ms ease,
      transform 150ms ease;
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    :is(.mv7-account-item, .mv7-transaction-row):hover {
    background: rgba(255, 255, 255, 0.58);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 7px 18px -15px rgba(25, 40, 30, 0.3);
    transform: translateY(-1px);
  }

  :root[data-resolved-theme='light'] body[data-v2-view='overview'] #overview-view #widget-cashflow {
    border-color: var(--overview-light-border);
    background:
      radial-gradient(circle at 8% -20%, rgba(42, 181, 129, 0.105), transparent 48%),
      var(--overview-light-surface);
    box-shadow: var(--overview-light-shadow);
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    #widget-cashflow
    :is(.mv7-panel-header, .mv7-panel-stats) {
    border-color: rgba(29, 44, 35, 0.065);
    background: rgba(255, 255, 255, 0.22);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    #widget-cashflow
    .mv7-chart-wrap {
    border-color: rgba(255, 255, 255, 0.9);
    background:
      radial-gradient(circle at 12% 18%, rgba(24, 180, 118, 0.085), transparent 34%),
      radial-gradient(120% 95% at 18% -18%, rgba(255, 255, 255, 0.95), transparent 58%),
      rgba(235, 244, 239, 0.4);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 0 0 1px rgba(28, 43, 33, 0.018),
      inset 0 -28px 54px rgba(35, 54, 48, 0.018),
      0 1px 2px rgba(35, 54, 48, 0.055),
      0 14px 30px -24px rgba(35, 54, 48, 0.24);
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    #widget-cashflow
    .mv7-cashflow-view-control {
    border-color: rgba(255, 255, 255, 0.82);
    background: rgba(232, 238, 234, 0.56);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 7px 16px -14px rgba(27, 42, 31, 0.28);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    #widget-cashflow
    .mv7-cashflow-view-control
    button.is-active {
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
      inset 0 1px 0 #fff,
      0 1px 2px rgba(27, 42, 31, 0.08),
      0 5px 12px -9px rgba(27, 42, 31, 0.3);
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    .mv7-heading-tools
    .mv7-primary-button {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(165deg, #1c211e, #090c0a);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 0 0 1px rgba(0, 0, 0, 0.22),
      0 1px 2px rgba(21, 31, 24, 0.2),
      0 12px 26px -15px rgba(21, 31, 24, 0.48);
    color: #fff;
  }

  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    :is(.mv7-metric, .mv7-panel, .mv7-overview-insight, .mv7-chart-wrap) {
    transform: translateZ(0);
  }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  :root[data-resolved-theme='light']
    body[data-v2-view='overview']
    #overview-view
    :is(.mv7-account-item, .mv7-transaction-row) {
    transition: none;
  }
}