/* =============================================
   ESTILO CRISTAL (preferencia de apariencia; se combina con el tema de color)
   Se activa con <html data-style="glass"> desde js/design-style.js.
   Cada tema (classic / neon / dark) tiene su propio degradado, siempre el mismo.
============================================= */

:root[data-style="glass"] {
  /* Clásico: azul → violeta */
  --gl-c1: #2563eb;
  --gl-c2: #7c3aed;
  --gl-card: color-mix(in srgb, var(--bg-card) 66%, transparent);
  --gl-card-solid: color-mix(in srgb, var(--bg-card) 86%, transparent);
  --gl-line: color-mix(in srgb, var(--text-main) 9%, transparent);
  --gl-hi: rgba(255, 255, 255, 0.7);
  --gl-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.07);
  --gl-blob-a: 16%;
  --gl-blob-b: 12%;
}
/* Neón: verde lima oscuro → verde azulado (legible sobre blanco) */
:root[data-style="glass"][data-theme="neon"] {
  --gl-c1: #65a30d;
  --gl-c2: #0d9488;
  --gl-blob-a: 22%;
  --gl-blob-b: 12%;
}
/* Oscuro: lima → cian */
:root[data-style="glass"][data-theme="dark"] {
  --gl-c1: #bef264;
  --gl-c2: #22d3ee;
  --gl-card: color-mix(in srgb, var(--bg-card) 72%, transparent);
  --gl-card-solid: color-mix(in srgb, var(--bg-card) 92%, transparent);
  --gl-line: rgba(255, 255, 255, 0.07);
  --gl-hi: rgba(255, 255, 255, 0.06);
  --gl-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
  --gl-blob-a: 9%;
  --gl-blob-b: 8%;
}
:root[data-style="glass"] { --gl-grad: linear-gradient(120deg, var(--gl-c1), var(--gl-c2)); }

/* Fondo con dos manchas de luz de los colores del degradado */
:root[data-style="glass"] #app-content {
  background:
    radial-gradient(1000px 540px at -5% -10%, color-mix(in srgb, var(--gl-c1) var(--gl-blob-a), transparent), transparent 62%),
    radial-gradient(900px 520px at 105% 0%, color-mix(in srgb, var(--gl-c2) var(--gl-blob-b), transparent), transparent 58%),
    var(--bg-main);
  background-attachment: fixed;
  min-height: 100vh;
}

:root[data-style="glass"] #app-content h1 { font-weight: 800; letter-spacing: -0.03em; }

/* Tarjetas de cristal */
:root[data-style="glass"] #app-content .card {
  background: var(--gl-card) !important;
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--gl-line) !important;
  border-radius: 20px !important;
  box-shadow: var(--gl-shadow), inset 0 1px 0 var(--gl-hi) !important;
}
:root[data-style="glass"] #app-content .card:hover { transform: none; }

/* KPIs en degradado (mismo degradado en todo el tema) */
:root[data-style="glass"] #app-content .kpi-value {
  background: var(--gl-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums; letter-spacing: -0.035em;
}
:root[data-style="glass"] #app-content .dashboard-grid .kpi-value { font-size: clamp(1.5rem, 2.4vw, 2.15rem) !important; }
:root[data-style="glass"] #app-content #card-ingreso,
:root[data-style="glass"] #app-content #card-bruto,
:root[data-style="glass"] #app-content #card-neto,
:root[data-style="glass"] #app-content #card-final { border-top: 1px solid var(--gl-line) !important; }
:root[data-style="glass"] #app-content .dashboard-grid .card { position: relative; overflow: hidden; }
:root[data-style="glass"] #app-content .dashboard-grid .card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gl-grad); opacity: 0.85;
}
:root[data-style="glass"] #app-content .dashboard-grid .card h3 { letter-spacing: 0.05em !important; font-weight: 700; }

/* Bloques de medias / pendientes: cristal y cifras en degradado */
:root[data-style="glass"] #app-content [style*="background: #f8fafc"] {
  background: var(--gl-card-solid) !important; border: 1px solid var(--gl-line) !important; border-left-width: 1px !important; border-radius: 14px !important;
}
:root[data-style="glass"] #app-content #dash-pending-amount,
:root[data-style="glass"] #app-content #dash-avg-income,
:root[data-style="glass"] #app-content #dash-avg-expense {
  background: var(--gl-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums; display: inline-block;
}
:root[data-style="glass"] #app-content #dash-month-label { color: var(--gl-c1) !important; }

/* Controles */
:root[data-style="glass"] #app-content .filter-chip-group { background: var(--gl-card-solid) !important; border: 1px solid var(--gl-line); border-radius: 999px !important; padding: 3px !important; }
:root[data-style="glass"] #app-content .filter-chip { border-radius: 999px !important; }
:root[data-style="glass"] #app-content .filter-chip.active,
:root[data-style="glass"] #app-content .chip.active { background: var(--gl-grad) !important; color: #fff !important; border-color: transparent !important; }
:root[data-style="glass"][data-theme="dark"] #app-content .filter-chip.active,
:root[data-style="glass"][data-theme="dark"] #app-content .chip.active { color: #0a0a12 !important; }
:root[data-style="glass"] #app-content .premium-select,
:root[data-style="glass"] #app-content .card select {
  background-color: var(--gl-card-solid) !important; color: var(--text-main) !important; border: 1px solid var(--gl-line) !important; border-radius: 12px !important; box-shadow: none !important;
}
:root[data-style="glass"] #app-content .card [style*="background: white"] { background: var(--gl-card-solid) !important; color: var(--text-main) !important; border-color: var(--gl-line) !important; }
:root[data-style="glass"] #app-content .btn-primary { background: var(--gl-grad) !important; border: none !important; }
:root[data-style="glass"][data-theme="dark"] #app-content .btn-primary { color: #0a0a12 !important; }

/* Contactos: tabla y tarjetas también en cristal */
:root[data-style="glass"] #app-content .cx-table-wrap,
:root[data-style="glass"] #app-content .contact-card,
:root[data-style="glass"] #app-content .cx-search,
:root[data-style="glass"] #app-content .cf-pill {
  background: var(--gl-card) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--gl-line) !important;
}
:root[data-style="glass"] #app-content .cx-thead { background: transparent; }

@supports not (backdrop-filter: blur(1px)) {
  :root[data-style="glass"] #app-content .card { background: var(--bg-card) !important; }
}

/* Selector de apariencia (Editar perfil) */
.pref-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-main); }
.pref-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0.55rem 0.5rem; border: none; border-radius: 9px; background: transparent; color: var(--text-muted); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.pref-seg button:hover { color: var(--text-main); }
.pref-seg button.on { background: var(--bg-card); color: var(--text-main); box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.pref-swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.pref-swatch.sw-classic { background: linear-gradient(135deg, #3b82f6 50%, #1e293b 50%); }
.pref-swatch.sw-neon { background: linear-gradient(135deg, #bef264 50%, #ffffff 50%); }
.pref-swatch.sw-dark { background: linear-gradient(135deg, #bef264 50%, #0a0a12 50%); }