:root {
  --brand: #2c7a4b;
  --brand-dark: #1f5c38;
  --brand-light: #eaf5ee;
  --ingreso: #27ae60;
  --ingreso-rgb: 39, 174, 96;
  --gasto: #e74c3c;
  --gasto-rgb: 231, 76, 60;
  --radius: 1rem;
  --radius-sm: 0.65rem;
  --shadow: 0 2px 10px rgba(15, 40, 25, 0.06);
  --shadow-hover: 0 10px 24px rgba(15, 40, 25, 0.12);
  --bg: #f4f6f5;
  --surface: #ffffff;
  --text: #26332c;
  --muted: #6c757d;
  --border: #eef1ee;
  --input-bg: #ffffff;
}

[data-theme="dark"] {
  --brand-light: #1c3b2b;
  --bg: #12171a;
  --surface: #1c2226;
  --text: #e5e9e7;
  --muted: #9aa6a0;
  --border: #2b3338;
  --input-bg: #232a2f;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

body {
  background-color: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.text-brand { color: var(--brand) !important; }

a { text-underline-offset: 0.16em; }
:focus-visible {
  outline: 3px solid rgba(44, 122, 75, 0.35);
  outline-offset: 2px;
}

.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.eyebrow {
  display: block;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

/* ── Navbar ─────────────────────────────────────────────── */
.app-navbar {
  background: linear-gradient(100deg, var(--brand-dark), var(--brand) 130%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.app-navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-navbar .nav-link {
  color: rgba(255, 255, 255, 0.82) !important;
  border-radius: 999px;
  padding: 0.4rem 0.9rem !important;
  margin: 0 0.1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-navbar .nav-link:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.1);
}

.app-navbar .nav-link.active {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.18);
  font-weight: 600;
}

.app-navbar .quick-add {
  background: rgba(255, 255, 255, 0.16);
  color: #fff !important;
  font-weight: 700;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background-color: var(--surface);
  color: var(--text);
}

.card-summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.card-summary .value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.stat-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.stat-icon.ingreso { background: rgba(39, 174, 96, 0.12); color: var(--ingreso); }
.stat-icon.gasto   { background: rgba(231, 76, 60, 0.12); color: var(--gasto); }
.stat-icon.balance { background: var(--brand-light); color: var(--brand); }

/* ── Botones ────────────────────────────────────────────── */
.btn-brand {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  box-shadow: 0 2px 8px rgba(44, 122, 75, 0.25);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-brand:hover {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  box-shadow: 0 4px 14px rgba(44, 122, 75, 0.35);
}

.btn-brand:active { transform: translateY(1px); }

.btn-outline-secondary, .btn-outline-danger {
  border-radius: 999px;
}

/* ── Icono de categoría / fondo ─────────────────────────── */
.cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.cat-icon.cat-icon-sm {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.8rem;
}

.cat-icon.cat-icon-lg {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.25rem;
}

.cat-row {
  display: inline-flex;
  align-items: center;
}

.badge-color-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: 0.4rem;
}

/* ── Selector de iconos ─────────────────────────────────── */
.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.icon-picker input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.icon-picker label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.6rem;
  border: 1px solid #dfe6e2;
  color: #6c8578;
  cursor: pointer;
  transition: all 0.12s ease;
  font-size: 1.05rem;
}

.icon-picker label:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.icon-picker input[type="radio"]:checked + label {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ── Progreso ───────────────────────────────────────────── */
.progress {
  height: 0.65rem;
  border-radius: 999px;
  background-color: #e9ede9;
}

.progress-bar {
  border-radius: 999px;
}

/* ── Tablas ─────────────────────────────────────────────── */
.table > :not(caption) > * > * {
  border-bottom-color: #eef1ee;
}

.table-hover > tbody > tr:hover > * {
  background-color: #f7faf8;
}

/* ── Estado vacío ───────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: #8a978f;
}

.empty-state i {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 0.6rem;
  opacity: 0.6;
}

/* ── Login / Registro ───────────────────────────────────── */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 40%),
              linear-gradient(135deg, var(--brand-dark), var(--brand));
  position: relative;
  overflow: hidden;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  border-radius: 1.25rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 1;
}

.auth-brand {
  width: 4rem;
  height: 4rem;
  border-radius: 1.2rem;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  box-shadow: 0 10px 30px rgba(31, 92, 56, 0.3);
  font-size: 1.8rem;
}

.auth-privacy {
  color: var(--muted);
  text-align: center;
  font-size: 0.75rem;
  margin: 1.25rem 0 0;
}

.password-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.auth-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 0.75rem;
}

/* ── Fondos: tarjeta compacta ───────────────────────────── */
.fondo-chip {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  height: 100%;
}

/* ── Modo oscuro ────────────────────────────────────────── */
[data-theme="dark"] .table {
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  color: var(--text);
}
[data-theme="dark"] .table > :not(caption) > * > * {
  border-bottom-color: var(--border);
  background-color: transparent;
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--input-bg);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--muted); }
[data-theme="dark"] .input-group-text {
  background-color: var(--input-bg) !important;
  border-color: var(--border);
  color: var(--muted);
}
[data-theme="dark"] .dropdown-menu {
  background-color: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .dropdown-item { color: var(--text); }
[data-theme="dark"] .dropdown-item:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--text); }
[data-theme="dark"] .text-muted { color: var(--muted) !important; }
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom { border-color: var(--border) !important; }
[data-theme="dark"] .badge.bg-light { background-color: var(--input-bg) !important; color: var(--text) !important; }
[data-theme="dark"] .btn-outline-secondary { color: var(--muted); border-color: var(--border); }
[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--input-bg); color: var(--text); }
[data-theme="dark"] .auth-card { background-color: var(--surface); }
[data-theme="dark"] .alert-info { background-color: #163043; color: #cfe6f5; border-color: #1d4763; }

.theme-toggle {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
}
.theme-toggle:hover { color: #fff; }

.mobile-nav { display: none; }

@media (max-width: 991.98px) {
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  footer { padding-bottom: 1rem !important; }
  .app-navbar .navbar-collapse { padding: 0.75rem 0 0.5rem; }
  .app-navbar .nav-link { border-radius: 0.65rem; margin: 0.12rem 0; }
  .mobile-nav {
    position: fixed;
    z-index: 1035;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(4.1rem + env(safe-area-inset-bottom));
    padding: 0.38rem max(0.45rem, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(0.45rem, env(safe-area-inset-right));
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 30px rgba(15, 40, 25, 0.1);
    backdrop-filter: blur(14px);
  }
  .mobile-nav a {
    color: var(--muted);
    text-decoration: none;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    align-items: center;
  }
  .mobile-nav a i { font-size: 1.15rem; }
  .mobile-nav a.active { color: var(--brand); }
  .mobile-nav .mobile-add {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    justify-self: center;
    justify-content: center;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 7px 20px rgba(44, 122, 75, 0.35);
    transform: translateY(-0.55rem);
  }
  .mobile-nav .mobile-add i { font-size: 1.45rem; }
  .card-summary .value { font-size: 1.35rem; }
  .table-responsive { border-radius: var(--radius-sm); }
}

@media (max-width: 575.98px) {
  main.container { padding-left: 0.85rem; padding-right: 0.85rem; }
  .auth-card { margin: 0.75rem; padding: 1rem !important; }
  .card { border-radius: 0.85rem; }
  .page-heading .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Transacciones: resumen, filtros y lista visual */
.transaction-summary-grid,
.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}

.transaction-summary-card {
  min-height: 106px;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
}

.transaction-summary-card .metric-label,
.metric-card .metric-label {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 760;
}

.transaction-summary-card .metric-value {
  display: block;
  margin-top: .2rem;
  font-size: 1.25rem;
  font-weight: 820;
  letter-spacing: -.04em;
}

.transaction-summary-card small {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: .18rem;
  color: var(--muted);
  font-size: .66rem;
}

.mini-icon.success { color: var(--ingreso); background: color-mix(in srgb, var(--ingreso) 12%, transparent); }
.mini-icon.danger { color: var(--gasto); background: color-mix(in srgb, var(--gasto) 12%, transparent); }
.mini-icon.warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 13%, transparent); }

.cat-icon.cat-icon-xs {
  width: 1.15rem;
  height: 1.15rem;
  margin-right: .25rem;
  font-size: .58rem;
}

.transaction-form-card {
  position: sticky;
  top: 88px;
}

.transaction-list-card {
  min-height: 520px;
}

.transaction-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.transaction-toolbar h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -.035em;
}

.transaction-toolbar p {
  margin: .28rem 0 0;
  color: var(--muted);
  font-size: .72rem;
}

.transaction-filters {
  display: grid;
  grid-template-columns: minmax(120px, .75fr) minmax(92px, .55fr) minmax(116px, .75fr) minmax(160px, 1fr) minmax(220px, 1.4fr);
  gap: .65rem;
  align-items: end;
  margin-bottom: 1rem;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: var(--surface-subtle);
}

.transaction-filters .form-label {
  margin-bottom: .22rem;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.transaction-filters .form-control,
.transaction-filters .form-select {
  min-height: 2.35rem;
  font-size: .78rem;
}

.transaction-filters .filter-search {
  min-width: 0;
}

.transaction-filters .filter-clear {
  align-self: end;
}

.movement-list {
  display: grid;
  gap: .65rem;
}

.movement-item {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr) minmax(140px, auto);
  gap: .9rem;
  align-items: stretch;
  padding: .82rem;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: .95rem;
  background: var(--surface);
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.movement-item.is-income { border-left-color: var(--ingreso); }
.movement-item.is-expense { border-left-color: var(--gasto); }
.movement-item:hover {
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  background: color-mix(in srgb, var(--surface-subtle) 72%, var(--surface));
  box-shadow: 0 10px 24px rgba(16, 43, 31, .06);
  transform: translateY(-1px);
}

.movement-date {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 4.55rem;
  border-radius: .78rem;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
}

.movement-date strong {
  font-size: 1.08rem;
  line-height: 1;
  letter-spacing: -.03em;
}

.movement-date span,
.movement-date small {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 760;
  text-transform: uppercase;
}

.movement-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .45rem;
}

.movement-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.movement-category {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .2rem;
}

.movement-category strong,
.movement-category span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.movement-category strong {
  font-size: .88rem;
}

.movement-category span {
  color: var(--muted);
  font-size: .68rem;
}

.movement-description {
  margin: 0;
  color: color-mix(in srgb, var(--text) 84%, var(--muted));
  font-size: .86rem;
  line-height: 1.35;
}

.movement-description.is-empty {
  color: var(--muted);
  font-style: italic;
}

.movement-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.movement-chip {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  max-width: 100%;
  padding: .25rem .45rem;
  border-radius: 99px;
  color: var(--muted);
  background: var(--surface-subtle);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-size: .64rem;
  font-weight: 700;
  text-decoration: none;
}

.movement-chip:hover {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
}

.movement-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: .55rem;
  text-align: right;
}

.movement-side > strong {
  font-size: 1rem;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.movement-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.movement-actions form {
  display: inline-flex;
  margin: 0;
}

.action-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .65rem;
  box-shadow: none;
}

.action-icon.danger {
  color: var(--gasto);
}

.action-icon.danger:hover {
  color: #fff;
  border-color: var(--gasto);
  background: var(--gasto);
}

/* Reportes ampliados */
.report-period-form {
  display: flex;
  gap: .55rem;
  align-items: center;
}

.report-period-form .form-select {
  min-width: 8.5rem;
}

.insight-list,
.budget-list {
  display: grid;
  gap: .55rem;
}

.insight-row {
  display: flex;
  justify-content: space-between;
  gap: .9rem;
  align-items: center;
  padding: .72rem;
  border: 1px solid var(--border);
  border-radius: .82rem;
  background: var(--surface-subtle);
}

.insight-row div {
  min-width: 0;
}

.insight-row strong,
.insight-row span {
  display: block;
}

.insight-row div strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-row span,
.budget-row small {
  color: var(--muted);
  font-size: .66rem;
}

.budget-row {
  display: grid;
  gap: .42rem;
  padding: .72rem;
  border: 1px solid var(--border);
  border-radius: .82rem;
  background: var(--surface-subtle);
}

.report-progress {
  height: .52rem;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--border) 76%, transparent);
}

.report-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.report-progress .success { background: var(--ingreso); }
.report-progress .warning { background: var(--warning); }
.report-progress .danger { background: var(--gasto); }

/* Flujo de caja: dashboard anual y tabla alineada */
.cashflow-heading {
  align-items: flex-start;
}

.cashflow-actions {
  display: flex;
  gap: .55rem;
  align-items: center;
  flex-wrap: wrap;
}

.cashflow-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}

.cashflow-month-card {
  padding: .85rem;
}

.cashflow-month-strip {
  display: grid;
  grid-template-columns: repeat(12, minmax(8.3rem, 1fr));
  gap: .55rem;
  overflow-x: auto;
  padding-bottom: .15rem;
  scrollbar-width: thin;
}

.cashflow-month-pill {
  min-width: 8.3rem;
  padding: .72rem .78rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: var(--surface-subtle);
  font-variant-numeric: tabular-nums;
}

.cashflow-month-pill span,
.cashflow-month-pill small {
  display: block;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cashflow-month-pill strong {
  display: block;
  margin: .22rem 0 .08rem;
  font-size: .9rem;
  letter-spacing: -.03em;
}

.cashflow-month-pill.is-positive {
  border-color: color-mix(in srgb, var(--ingreso) 24%, var(--border));
  background: color-mix(in srgb, var(--ingreso) 8%, var(--surface));
}

.cashflow-month-pill.is-positive strong { color: var(--ingreso); }

.cashflow-month-pill.is-negative {
  border-color: color-mix(in srgb, var(--gasto) 24%, var(--border));
  background: color-mix(in srgb, var(--gasto) 7%, var(--surface));
}

.cashflow-month-pill.is-negative strong { color: var(--gasto); }

.cashflow-chart-box {
  height: 320px;
}

.cashflow-card {
  padding: 0;
}

.cashflow-card-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.cashflow-card-head h2 {
  margin: .1rem 0 .22rem;
  font-size: 1.05rem;
  letter-spacing: -.035em;
}

.cashflow-card-head p {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
}

.cashflow-table-wrap {
  overflow: auto;
  max-height: 68vh;
  border-radius: 0 0 var(--radius) var(--radius);
}

.cashflow-table {
  min-width: 1320px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .78rem;
}

.cashflow-table th,
.cashflow-table td {
  white-space: nowrap;
  vertical-align: middle;
}

.cashflow-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-subtle);
  box-shadow: inset 0 -1px 0 var(--border);
}

.cashflow-table thead th:first-child,
.cashflow-table .fc-row > td:first-child,
.cashflow-table .fc-total-row > td:first-child,
.cashflow-table .fc-net-row > td:first-child,
.cashflow-table .fc-balance-row > td:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
  min-width: 300px;
  max-width: 380px;
  background: var(--surface);
  box-shadow: 8px 0 16px rgba(16, 43, 31, .045);
}

.cashflow-table thead th:first-child {
  z-index: 7;
  background: var(--surface-subtle);
}

.cashflow-table thead th:last-child,
.cashflow-table .fc-row > td:last-child,
.cashflow-table .fc-total-row > td:last-child,
.cashflow-table .fc-net-row > td:last-child,
.cashflow-table .fc-balance-row > td:last-child {
  position: sticky;
  right: 0;
  z-index: 4;
  min-width: 7.7rem;
  background: var(--surface);
  box-shadow: -8px 0 16px rgba(16, 43, 31, .045);
}

.cashflow-table thead th:last-child {
  z-index: 7;
  background: var(--surface-subtle);
}

.fc-money {
  min-width: 6.7rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fc-zero {
  color: color-mix(in srgb, var(--muted) 48%, transparent);
}

.fc-concept-cell {
  white-space: normal !important;
}

.fc-concept {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  line-height: 1.25;
}

.fc-concept .cat-icon {
  margin-right: 0;
}

.fc-concept-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fc-subconcept {
  padding-left: 1.2rem;
  color: var(--muted);
}

.fc-chevron {
  color: var(--muted);
  font-size: .7rem;
  transition: transform .16s ease;
}

.fc-fila {
  cursor: pointer;
}

.fc-fila:hover > td,
.fc-fila.is-open > td {
  background: color-mix(in srgb, var(--brand) 5%, var(--surface)) !important;
}

.fc-fila:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent);
  outline-offset: -2px;
}

.fc-section-row td {
  padding: .95rem .8rem !important;
  border-top: 1px solid var(--border);
  background: var(--surface-subtle);
  font-weight: 820;
  letter-spacing: -.015em;
}

.fc-section-row.is-income td { color: var(--ingreso); }
.fc-section-row.is-expense td { color: var(--gasto); }

.fc-total-row > td {
  background: color-mix(in srgb, var(--surface-subtle) 72%, var(--surface));
  border-top: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
}

.fc-net-row > td {
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  border-top: 2px solid color-mix(in srgb, var(--brand) 24%, var(--border));
}

.fc-balance-row > td {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.fc-detail-panel {
  margin: .35rem 0 .55rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: var(--surface-subtle);
}

.fc-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: .55rem;
  color: var(--muted);
  font-size: .68rem;
}

.fc-detail-head strong {
  color: var(--text);
}

.fc-detail-table-wrap {
  overflow-x: auto;
}

.fc-detail-table-wrap .table {
  font-size: .75rem;
}

.cashflow-footnote {
  padding: .75rem 1.1rem 1rem;
  color: var(--muted);
  font-size: .7rem;
}

[data-theme="dark"] .movement-item,
[data-theme="dark"] .insight-row,
[data-theme="dark"] .budget-row {
  background: color-mix(in srgb, var(--surface) 90%, #000);
}

[data-theme="dark"] .movement-date,
[data-theme="dark"] .transaction-filters {
  background: var(--surface-subtle);
}

[data-theme="dark"] .cashflow-table thead th,
[data-theme="dark"] .cashflow-table .fc-row > td:first-child,
[data-theme="dark"] .cashflow-table .fc-row > td:last-child,
[data-theme="dark"] .cashflow-table .fc-total-row > td:first-child,
[data-theme="dark"] .cashflow-table .fc-total-row > td:last-child,
[data-theme="dark"] .cashflow-table .fc-net-row > td:first-child,
[data-theme="dark"] .cashflow-table .fc-net-row > td:last-child,
[data-theme="dark"] .cashflow-table .fc-balance-row > td:first-child,
[data-theme="dark"] .cashflow-table .fc-balance-row > td:last-child,
[data-theme="dark"] .fc-detail-panel {
  background: var(--surface-subtle);
}

@media (max-width: 1199.98px) {
  .transaction-summary-grid,
  .report-kpi-grid,
  .cashflow-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .transaction-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .transaction-filters .filter-search {
    grid-column: 1 / -1;
  }
  .transaction-form-card {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .transaction-toolbar,
  .movement-title-row {
    flex-direction: column;
    align-items: stretch;
  }
  .movement-item {
    grid-template-columns: 3.8rem minmax(0, 1fr);
  }
  .movement-side {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding-top: .65rem;
    border-top: 1px solid var(--border);
  }
  .cashflow-card-head,
  .cashflow-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cashflow-table {
    min-width: 1120px;
  }
  .cashflow-table thead th:first-child,
  .cashflow-table .fc-row > td:first-child,
  .cashflow-table .fc-total-row > td:first-child,
  .cashflow-table .fc-net-row > td:first-child,
  .cashflow-table .fc-balance-row > td:first-child {
    min-width: 230px;
    max-width: 260px;
  }
}

/* ============================================================
   Mis Gastos v32 — onboarding, informe imprimible y resiliencia
   ============================================================ */
.setup-progress-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, .34fr);
  align-items: center;
  gap: 1.4rem;
  padding: clamp(1rem, 2.8vw, 1.6rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--border));
  background:
    radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-light) 54%, var(--surface)), var(--surface));
}

.setup-progress-card::after {
  content: "";
  position: absolute;
  inset: auto -6rem -7rem auto;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  pointer-events: none;
}

.setup-progress-ring {
  position: relative;
  width: 7.6rem;
  height: 7.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(var(--brand) var(--score), color-mix(in srgb, var(--brand) 10%, var(--border)) 0);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent), var(--shadow);
}

.setup-progress-ring::before {
  content: "";
  position: absolute;
  inset: .62rem;
  border-radius: inherit;
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.setup-progress-ring strong,
.setup-progress-ring span {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}

.setup-progress-ring strong {
  font-size: 1.7rem;
  letter-spacing: -.06em;
  line-height: 1;
}

.setup-progress-ring span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.setup-progress-copy h2 {
  margin: 0 0 .35rem;
  font-size: clamp(1.25rem, 3vw, 1.8rem);
  letter-spacing: -.04em;
}

.setup-progress-copy p {
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
}

.setup-progress-actions,
.setup-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1rem;
}

.setup-mini-list span {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 2rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 72%, var(--surface-subtle, #f8fafc));
  color: var(--muted);
  font-size: .74rem;
  font-weight: 750;
}

.setup-mini-list span.is-done {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
  background: color-mix(in srgb, var(--brand-light) 72%, var(--surface));
}

.setup-progress-side {
  display: grid;
  gap: .6rem;
  position: relative;
  z-index: 1;
}

.setup-progress-side > div {
  padding: .75rem .85rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  background: rgba(255,255,255,.55);
}

.setup-progress-side small,
.setup-step-card small,
.onboarding-track-card p,
.safe-use-grid span,
.maintenance-step-card small {
  display: block;
  color: var(--muted);
  line-height: 1.4;
}

.setup-progress-side strong {
  display: block;
  margin-top: .1rem;
  line-height: 1.15;
}

.setup-roadmap-grid,
.setup-next-grid,
.onboarding-track-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.setup-next-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-step-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  min-height: 6.2rem;
  padding: .95rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 1.2rem;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.setup-step-card:hover {
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
}

.setup-step-card.is-next {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-light) 72%, var(--surface)), var(--surface));
}

.setup-step-card.is-done {
  opacity: .86;
}

.setup-step-card.is-done .setup-step-icon {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
  color: var(--brand);
}

.setup-step-icon {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, var(--surface)), color-mix(in srgb, var(--brand-light) 82%, var(--surface)));
  color: var(--brand);
  font-size: 1.08rem;
}

.setup-step-card strong {
  display: block;
  line-height: 1.18;
}

.setup-step-card em {
  display: inline-block;
  margin-top: .35rem;
  color: var(--brand);
  font-style: normal;
  font-size: .72rem;
  font-weight: 850;
}

.setup-step-card b {
  color: var(--muted);
  font-size: .72rem;
  white-space: nowrap;
}

.onboarding-track-card {
  padding: 1.15rem;
}

.onboarding-track-card h2 {
  margin: .75rem 0 .35rem;
  font-size: 1.02rem;
}

.onboarding-track-card a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .4rem;
  color: var(--brand);
  font-weight: 800;
  text-decoration: none;
}

.safe-use-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.safe-use-grid.compact {
  grid-template-columns: 1fr;
}

.safe-use-grid > div {
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-subtle, #f8fafc) 76%, var(--surface));
}

.safe-use-grid i {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: .65rem;
  border-radius: .8rem;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand-light) 76%, var(--surface));
}

.safe-use-grid strong {
  display: block;
  margin-bottom: .2rem;
}

.print-report-card {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(340px, 1fr);
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--ems-blue, var(--brand)) 16%, var(--border));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand) 12%, transparent), transparent 34%),
    var(--surface);
}

.print-report-cover {
  display: grid;
  align-content: center;
  min-height: 13rem;
  padding: 1.25rem;
  color: #fff;
  border-radius: 1.25rem;
  background:
    linear-gradient(135deg, rgba(18,55,42,.96), rgba(22,115,74,.9)),
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.24), transparent 32%);
  overflow: hidden;
}

.print-report-cover .eyebrow {
  color: rgba(255,255,255,.72);
}

.print-report-cover h2 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: .95;
  letter-spacing: -.07em;
  margin: .3rem 0 .7rem;
}

.print-report-cover p {
  max-width: 36ch;
  margin: 0;
  color: rgba(255,255,255,.78);
}

.print-report-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.print-report-kpis > div {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-subtle, #f8fafc) 72%, var(--surface));
}

.print-report-kpis small {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.print-report-kpis strong {
  display: block;
  margin-top: .35rem;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  letter-spacing: -.04em;
}

.report-action-list,
.report-close-list,
.print-ranking-list {
  display: grid;
  gap: .65rem;
}

.report-action-list a,
.report-close-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .78rem;
  border-radius: 1rem;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-subtle, #f8fafc) 74%, var(--surface));
}

.report-action-list a:hover,
.report-close-list a:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
}

.report-action-list small,
.report-close-list small {
  display: block;
  color: var(--muted);
}

.report-close-list a.warning i,
.report-close-list a.warning em {
  color: var(--warning);
}

.report-close-list a.danger i,
.report-close-list a.danger em {
  color: var(--gasto);
}

.report-close-list a.success i,
.report-close-list a.success em {
  color: var(--brand);
}

.report-close-list em {
  font-style: normal;
  font-weight: 900;
}

.print-ranking-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem .75rem;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
}

.print-ranking-list > div:last-child {
  border-bottom: 0;
}

.print-ranking-list strong {
  white-space: nowrap;
}

.print-ranking-list em {
  grid-column: 1 / -1;
  height: .38rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 8%, var(--border));
}

.print-ranking-list em span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 68%, #f59e0b));
}

.maintenance-hero {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(360px, 1fr);
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--border));
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand) 12%, transparent), transparent 36%),
    var(--surface);
}

.maintenance-hero-copy {
  display: grid;
  align-content: center;
  padding: .5rem;
}

.maintenance-hero-copy h2 {
  margin: .6rem 0 .4rem;
  font-size: clamp(1.65rem, 4vw, 2.55rem);
  line-height: 1;
  letter-spacing: -.07em;
}

.maintenance-hero-copy p {
  margin: 0;
  color: var(--muted);
  max-width: 52ch;
}

.maintenance-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.maintenance-step-card {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--surface-subtle, #f8fafc) 74%, var(--surface));
}

.maintenance-step-card span {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: .75rem;
  border-radius: 999px;
  color: #fff;
  background: var(--brand);
  font-weight: 900;
}

.maintenance-step-card strong {
  display: block;
  margin-bottom: .25rem;
}

.maintenance-form .form-control {
  min-height: 3rem;
  border-radius: .95rem;
}

[data-theme="dark"] .setup-progress-side > div,
[data-theme="dark"] .setup-mini-list span,
[data-theme="dark"] .setup-step-card,
[data-theme="dark"] .safe-use-grid > div,
[data-theme="dark"] .print-report-kpis > div,
[data-theme="dark"] .report-action-list a,
[data-theme="dark"] .report-close-list a,
[data-theme="dark"] .maintenance-step-card {
  background: color-mix(in srgb, var(--surface-subtle, #101827) 66%, #020617);
}

@media (max-width: 1199.98px) {
  .setup-progress-card,
  .print-report-card,
  .maintenance-hero {
    grid-template-columns: 1fr;
  }

  .setup-roadmap-grid,
  .onboarding-track-grid,
  .safe-use-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .setup-progress-card {
    text-align: left;
  }

  .setup-progress-ring {
    width: 6.6rem;
    height: 6.6rem;
  }

  .setup-roadmap-grid,
  .setup-next-grid,
  .onboarding-track-grid,
  .safe-use-grid,
  .maintenance-step-grid,
  .print-report-kpis {
    grid-template-columns: 1fr;
  }

  .setup-step-card,
  .report-action-list a,
  .report-close-list a {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .setup-step-card > b,
  .report-close-list em {
    grid-column: 2;
    justify-self: start;
  }
}

@media print {
  body {
    background: #fff !important;
    color: #111827 !important;
  }

  .app-sidebar,
  .sidebar-backdrop,
  .app-topbar,
  .app-footer,
  .mobile-nav,
  .report-print-toolbar .btn,
  .skip-link {
    display: none !important;
  }

  .app-shell,
  .app-content,
  .app-container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #d8dee4 !important;
    break-inside: avoid;
  }

  .page-heading {
    margin-bottom: 14px !important;
  }

  .print-report-card,
  .monthly-report-lines > div,
  .report-action-list a,
  .report-close-list a,
  .print-ranking-list > div {
    background: #fff !important;
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }
}

@media (max-width: 575.98px) {
  .transaction-summary-grid,
  .report-kpi-grid,
  .cashflow-kpi-grid,
  .transaction-filters {
    grid-template-columns: 1fr;
  }
  .report-period-form {
    width: 100%;
  }
  .report-period-form .form-select {
    min-width: 0;
    flex: 1;
  }
  .movement-item {
    grid-template-columns: 1fr;
  }
  .movement-date {
    display: flex;
    justify-content: flex-start;
    gap: .35rem;
    min-height: auto;
    padding: .55rem .65rem;
  }
}

/* ============================================================
   Mis Gastos v21 — sistema visual y shell de aplicación
   ============================================================ */

:root {
  --brand: #16734a;
  --brand-dark: #103d2c;
  --brand-deep: #0b2b20;
  --brand-light: #e6f4ec;
  --accent: #d89d48;
  --accent-soft: #fff4df;
  --ingreso: #168755;
  --gasto: #d65353;
  --warning: #cf862d;
  --info: #3f72b5;
  --bg: #f2f4f1;
  --surface: #ffffff;
  --surface-subtle: #f7f9f7;
  --text: #19251f;
  --muted: #6d7b73;
  --border: #e1e7e2;
  --input-bg: #ffffff;
  --radius: 1.15rem;
  --radius-sm: 0.8rem;
  --shadow: 0 1px 2px rgba(16, 43, 31, .04), 0 8px 28px rgba(16, 43, 31, .055);
  --shadow-hover: 0 16px 42px rgba(16, 43, 31, .11);
  --sidebar-width: 268px;
}

[data-theme="dark"] {
  --brand: #42b97d;
  --brand-dark: #173f30;
  --brand-deep: #0c2119;
  --brand-light: #173c2c;
  --accent: #e4ad60;
  --accent-soft: #3d301e;
  --bg: #101613;
  --surface: #18201c;
  --surface-subtle: #1d2722;
  --text: #edf4ef;
  --muted: #9ba9a1;
  --border: #2a3730;
  --input-bg: #202a25;
  --shadow: 0 12px 32px rgba(0, 0, 0, .22);
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(circle at 92% 0%, rgba(22, 115, 74, .055), transparent 28rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.005em;
}

.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 2000;
  padding: .65rem 1rem;
  border-radius: .65rem;
  background: var(--surface);
  color: var(--text);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.app-shell { min-height: 100vh; }
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  color: rgba(255,255,255,.82);
  background:
    radial-gradient(circle at 0 0, rgba(216,157,72,.16), transparent 18rem),
    linear-gradient(180deg, var(--brand-deep), #0c3325 70%, #0a291e);
  border-right: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}

.sidebar-brand { height: 78px; padding: 1rem 1.05rem; display: flex; align-items: center; justify-content: space-between; }
.sidebar-brand > a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brand-mark { width: 2.55rem; height: 2.55rem; display: grid; place-items: center; border-radius: .82rem; background: linear-gradient(145deg, var(--accent), #b9772c); box-shadow: 0 8px 22px rgba(0,0,0,.2); font-size: 1.2rem; }
.sidebar-brand strong { display: block; line-height: 1.1; font-size: .98rem; }
.sidebar-brand small { display: block; color: rgba(255,255,255,.52); font-size: .68rem; margin-top: .2rem; }
.sidebar-close { color: #fff; border: 0; background: transparent; width: 2.25rem; height: 2.25rem; border-radius: .65rem; }

.sidebar-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .35rem .78rem 1rem; scrollbar-width: thin; }
.sidebar-label { display: block; padding: .55rem .7rem .35rem; color: rgba(255,255,255,.38); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-section-spaced { margin-top: .7rem; }
.sidebar-link {
  min-height: 2.55rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .08rem 0;
  padding: .58rem .7rem;
  border-radius: .68rem;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 580;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.sidebar-link > i { width: 1.1rem; font-size: .98rem; text-align: center; }
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.075); transform: translateX(2px); }
.sidebar-link.active { color: #fff; background: linear-gradient(90deg, rgba(66,185,125,.28), rgba(66,185,125,.12)); box-shadow: inset 3px 0 0 #55c88e; }
.sidebar-badge { margin-left: auto; min-width: 1.28rem; height: 1.28rem; display: inline-grid; place-items: center; padding: 0 .28rem; border-radius: 99px; color: #fff; background: #d65353; font-size: .64rem; font-weight: 800; }

.sidebar-group { margin: .15rem 0; }
.sidebar-group summary { list-style: none; min-height: 2.6rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .7rem; border-radius: .68rem; color: rgba(255,255,255,.76); cursor: pointer; font-size: .84rem; font-weight: 680; }
.sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar-group summary > span { display: flex; align-items: center; gap: .7rem; }
.sidebar-group summary > span i { width: 1.1rem; text-align: center; }
.sidebar-group summary:hover { color: #fff; background: rgba(255,255,255,.055); }
.group-chevron { font-size: .7rem; transition: transform .18s ease; }
.sidebar-group[open] .group-chevron { transform: rotate(180deg); }
.sidebar-group > div { padding-left: .45rem; }
.sidebar-group > div .sidebar-link { font-size: .8rem; min-height: 2.32rem; }

.sidebar-profile { padding: .75rem; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.08); }
.profile-link { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; padding: .48rem; border-radius: .75rem; }
.profile-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.avatar { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: .72rem; background: rgba(255,255,255,.13); color: #fff; font-weight: 800; }
.profile-copy { min-width: 0; flex: 1; }
.profile-copy strong, .profile-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy strong { font-size: .78rem; }
.profile-copy small { color: rgba(255,255,255,.48); font-size: .65rem; }
.profile-link > i { color: rgba(255,255,255,.4); font-size: .72rem; }

.app-content { min-height: 100vh; margin-left: var(--sidebar-width); display: flex; flex-direction: column; }
.app-topbar { position: sticky; top: 0; z-index: 1020; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 clamp(1rem, 2.6vw, 2.25rem); background: color-mix(in srgb, var(--bg) 87%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent); backdrop-filter: blur(18px); }
.topbar-leading, .topbar-actions { display: flex; align-items: center; gap: .6rem; }
.topbar-title span { display: block; font-weight: 780; line-height: 1.1; }
.topbar-title small { display: block; margin-top: .23rem; color: var(--muted); font-size: .68rem; }
.icon-button { width: 2.55rem; height: 2.55rem; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: .78rem; background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.025); }
.icon-button:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 38%, var(--border)); background: var(--surface-subtle); }
.topbar-add { min-height: 2.55rem; display: inline-flex; align-items: center; gap: .45rem; padding: .58rem .92rem; border-radius: .78rem; color: #fff; background: var(--brand); text-decoration: none; font-size: .78rem; font-weight: 750; box-shadow: 0 7px 18px rgba(22,115,74,.2); }
.topbar-add:hover { color: #fff; background: color-mix(in srgb, var(--brand) 86%, #000); transform: translateY(-1px); }
.notification-dot { position: absolute; top: -.28rem; right: -.28rem; min-width: 1.15rem; height: 1.15rem; display: grid; place-items: center; padding: 0 .18rem; border-radius: 99px; color: #fff; background: #d65353; border: 2px solid var(--bg); font-size: .55rem; font-weight: 850; }

.app-container { width: 100%; max-width: 1540px; margin: 0 auto; padding: clamp(1.1rem, 2.7vw, 2.2rem); flex: 1; }
.app-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 2.6vw, 2.25rem) 1.6rem; color: var(--muted); font-size: .68rem; }

.page-heading { align-items: center; margin-bottom: 1.4rem !important; }
.page-heading h1, .page-heading .h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.035em; }
.eyebrow { color: var(--brand); font-size: .65rem; letter-spacing: .15em; }
.text-brand { color: var(--brand) !important; }

.card { border: 1px solid color-mix(in srgb, var(--border) 76%, transparent); box-shadow: var(--shadow); overflow: hidden; }
.card:hover { border-color: color-mix(in srgb, var(--brand) 13%, var(--border)); }
.card-summary { min-height: 108px; padding: 1.05rem !important; }
.card-summary .value { font-size: clamp(1.32rem, 2vw, 1.72rem); letter-spacing: -.04em; }
.stat-icon { width: 2.85rem; height: 2.85rem; border-radius: .82rem; }
.fondo-chip { background: var(--surface-subtle); }

.btn { font-weight: 680; }
.btn-brand { border-radius: .72rem; padding: .58rem 1rem; box-shadow: 0 6px 15px rgba(22,115,74,.17); }
.btn-outline-secondary, .btn-outline-danger, .btn-primary, .btn-success { border-radius: .68rem; }
.form-control, .form-select, .input-group-text { min-height: 2.7rem; border-color: var(--border); border-radius: .68rem; }
.form-control:focus, .form-select:focus { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--brand) 12%, transparent); }
.form-label { font-size: .78rem; font-weight: 700; color: color-mix(in srgb, var(--text) 86%, var(--muted)); }

.table { --bs-table-bg: transparent; --bs-table-color: var(--text); margin-bottom: 0; }
.table thead th { color: var(--muted); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; padding-top: .75rem; padding-bottom: .75rem; }
.table > :not(caption) > * > * { border-bottom-color: var(--border); padding: .78rem .65rem; }
.table-hover > tbody > tr:hover > * { background: var(--surface-subtle); }
.badge { letter-spacing: .01em; }
.alert { border: 0; border-radius: .85rem; }
.progress { height: .48rem; background: color-mix(in srgb, var(--border) 70%, transparent); }
.empty-state { border: 1px dashed var(--border); border-radius: .9rem; background: var(--surface-subtle); }

.hero-panel { position: relative; overflow: hidden; min-height: 250px; padding: clamp(1.4rem, 3vw, 2.15rem); border-radius: 1.35rem; color: #fff; background: radial-gradient(circle at 88% 12%, rgba(216,157,72,.36), transparent 20rem), linear-gradient(135deg, #103d2c, #176945 62%, #20845a); box-shadow: 0 20px 45px rgba(16,61,44,.18); }
.hero-panel::after { content: ""; position: absolute; width: 16rem; height: 16rem; right: -6rem; bottom: -8rem; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 2.5rem rgba(255,255,255,.035), 0 0 0 5rem rgba(255,255,255,.025); }
.hero-panel > * { position: relative; z-index: 1; }
.hero-kicker { color: rgba(255,255,255,.64); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hero-balance { margin: .45rem 0 .18rem; font-size: clamp(2.2rem, 4.8vw, 3.7rem); font-weight: 780; letter-spacing: -.065em; }
.hero-meta { color: rgba(255,255,255,.66); font-size: .78rem; }
.hero-metrics { display: flex; gap: clamp(1.25rem, 4vw, 3.4rem); flex-wrap: wrap; margin-top: 2rem; }
.hero-metric small { display: block; color: rgba(255,255,255,.58); font-size: .66rem; }
.hero-metric strong { display: block; margin-top: .2rem; font-size: 1.05rem; }
.hero-health { position: absolute; z-index: 2; top: 1.4rem; right: 1.4rem; display: flex; align-items: center; gap: .65rem; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.13); border-radius: .85rem; background: rgba(255,255,255,.09); backdrop-filter: blur(8px); }
.health-ring { --score: 0; width: 2.65rem; height: 2.65rem; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#f1c47d calc(var(--score) * 1%), rgba(255,255,255,.14) 0); }
.health-ring::before { content: ""; grid-area: 1/1; width: 2.08rem; height: 2.08rem; border-radius: 50%; background: #176145; }
.health-ring strong { grid-area: 1/1; position: relative; font-size: .7rem; }
.hero-health small, .hero-health span { display: block; }
.hero-health small { color: rgba(255,255,255,.58); font-size: .58rem; }
.hero-health span { font-size: .72rem; font-weight: 720; }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; }
.quick-action { min-height: 94px; display: flex; flex-direction: column; justify-content: space-between; padding: .9rem; border: 1px solid var(--border); border-radius: .9rem; color: var(--text); background: var(--surface); text-decoration: none; }
.quick-action:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow); }
.quick-action i { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .62rem; background: var(--brand-light); color: var(--brand); }
.quick-action span { font-size: .72rem; font-weight: 740; }

.section-title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.section-title h2, .section-title h3 { margin: 0; font-size: .9rem; }
.section-title a { font-size: .7rem; font-weight: 700; text-decoration: none; }
.status-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .55rem; border-radius: 99px; font-size: .65rem; font-weight: 750; background: var(--surface-subtle); color: var(--muted); }
.status-pill.success { background: color-mix(in srgb, var(--ingreso) 12%, transparent); color: var(--ingreso); }
.status-pill.warning { background: color-mix(in srgb, var(--warning) 13%, transparent); color: var(--warning); }
.status-pill.danger { background: color-mix(in srgb, var(--gasto) 12%, transparent); color: var(--gasto); }

.metric-card { height: 100%; padding: 1.1rem; }
.metric-card .metric-top { display: flex; justify-content: space-between; align-items: start; }
.metric-card .metric-label { color: var(--muted); font-size: .7rem; font-weight: 680; }
.metric-card .metric-value { margin-top: .42rem; font-size: 1.45rem; font-weight: 780; letter-spacing: -.04em; }
.metric-card .metric-note { margin-top: .45rem; color: var(--muted); font-size: .66rem; }
.mini-icon { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: .65rem; color: var(--brand); background: var(--brand-light); }

.alert-item { display: flex; align-items: start; gap: .85rem; padding: .9rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--surface); }
.alert-item + .alert-item { margin-top: .55rem; }
.alert-item.unread { border-left: 3px solid var(--brand); }
.alert-icon { width: 2.35rem; height: 2.35rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .7rem; }
.alert-icon.info { background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); }
.alert-icon.advertencia { background: color-mix(in srgb, var(--warning) 13%, transparent); color: var(--warning); }
.alert-icon.critica { background: color-mix(in srgb, var(--gasto) 12%, transparent); color: var(--gasto); }
.alert-icon.exito { background: color-mix(in srgb, var(--ingreso) 12%, transparent); color: var(--ingreso); }

.credit-card-visual { position: relative; overflow: hidden; min-height: 190px; padding: 1.2rem; border-radius: 1.1rem; color: #fff; background: linear-gradient(145deg, var(--card-color, #155e42), color-mix(in srgb, var(--card-color, #155e42) 58%, #101c17)); box-shadow: 0 16px 32px color-mix(in srgb, var(--card-color, #155e42) 20%, transparent); }
.credit-card-visual::after { content: ""; position: absolute; width: 12rem; height: 12rem; border-radius: 50%; right: -4rem; top: -5rem; background: rgba(255,255,255,.08); box-shadow: -4rem 7rem 0 rgba(255,255,255,.045); }
.credit-card-visual > * { position: relative; z-index: 1; }
.card-chip { width: 2.2rem; height: 1.65rem; border-radius: .35rem; background: linear-gradient(135deg, #f4d38d, #b98a39); }
.card-digits { margin-top: 1.5rem; letter-spacing: .22em; font-size: .82rem; }
.card-usage { margin-top: 1.35rem; }
.card-usage .progress { background: rgba(255,255,255,.16); }
.card-usage .progress-bar { background: #f4cf89; }

.reconcile-row { transition: opacity .15s ease, background .15s ease; }
.reconcile-row.is-checked { opacity: .62; background: color-mix(in srgb, var(--ingreso) 5%, transparent); }
.reconcile-check { width: 1.15rem; height: 1.15rem; accent-color: var(--brand); }
.difference-box { padding: 1rem; border-radius: .9rem; background: var(--surface-subtle); border: 1px solid var(--border); }
.difference-box strong { font-size: 1.5rem; letter-spacing: -.04em; }

.code-input { letter-spacing: .35em; font-weight: 800; }
.security-card { padding: 1.2rem; }
.security-state { display: flex; align-items: center; gap: .8rem; }
.security-state > i { width: 2.7rem; height: 2.7rem; display: grid; place-items: center; border-radius: .8rem; background: var(--brand-light); color: var(--brand); font-size: 1.2rem; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; padding: 1rem; border-radius: .8rem; background: var(--surface-subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }

.health-check { display: flex; align-items: center; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.health-check:last-child { border-bottom: 0; }
.health-check > i { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .65rem; }
.health-check.ok > i { color: var(--ingreso); background: color-mix(in srgb, var(--ingreso) 11%, transparent); }
.health-check.warning > i { color: var(--warning); background: color-mix(in srgb, var(--warning) 11%, transparent); }

.sidebar-backdrop { display: none; }
.mobile-nav button { border: 0; background: transparent; }
.modal-content { color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-hover); }
.modal-header, .modal-footer { border-color: var(--border); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }

.auth-wrapper {
  background:
    radial-gradient(circle at 15% 20%, rgba(216,157,72,.24), transparent 23rem),
    radial-gradient(circle at 85% 82%, rgba(66,185,125,.2), transparent 26rem),
    linear-gradient(145deg, #0a281d, #124a35 56%, #176945);
}
.auth-wrapper::before, .auth-wrapper::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); pointer-events: none; }
.auth-wrapper::before { width: 28rem; height: 28rem; left: -13rem; bottom: -15rem; box-shadow: 0 0 0 4rem rgba(255,255,255,.025), 0 0 0 8rem rgba(255,255,255,.018); }
.auth-wrapper::after { width: 18rem; height: 18rem; right: -8rem; top: -9rem; box-shadow: 0 0 0 3rem rgba(255,255,255,.025); }
.auth-card { border: 1px solid rgba(255,255,255,.12); box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.auth-card .card-body { padding: .35rem; }
.auth-brand { background: linear-gradient(145deg, var(--brand), var(--brand-dark)); box-shadow: 0 12px 28px rgba(16,61,44,.26); }

@media (max-width: 1199.98px) {
  :root { --sidebar-width: 244px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991.98px) {
  body { padding-bottom: calc(4.8rem + env(safe-area-inset-bottom)); }
  .app-sidebar { width: min(86vw, 294px); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 20px 0 50px rgba(0,0,0,.25); }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 1035; background: rgba(6,19,13,.56); backdrop-filter: blur(3px); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .app-content { margin-left: 0; }
  .app-topbar { height: 64px; }
  .app-footer { padding-bottom: 1rem; }
  .mobile-nav { height: calc(4.25rem + env(safe-area-inset-bottom)); }
  .mobile-nav a, .mobile-nav button { color: var(--muted); text-decoration: none; text-align: center; font-size: .62rem; font-weight: 650; display: flex; flex-direction: column; gap: .08rem; align-items: center; }
  .mobile-nav button i { font-size: 1.15rem; }
  .hero-health { position: static; width: fit-content; margin-bottom: 1.1rem; }
}

@media (max-width: 575.98px) {
  .app-container { padding: 1rem .82rem 1.3rem; }
  .app-topbar { padding: 0 .82rem; }
  .topbar-title small { display: none; }
  .app-footer { flex-direction: column; padding-left: .9rem; padding-right: .9rem; }
  .hero-panel { min-height: 310px; padding: 1.2rem; }
  .hero-balance { font-size: 2.35rem; }
  .hero-metrics { gap: 1.25rem; }
  .hero-metric { min-width: calc(50% - .7rem); }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-action { min-height: 84px; }
  .recovery-codes { grid-template-columns: 1fr; }
  .card { border-radius: .95rem; }
  .page-heading .btn { width: auto; }
  .table-responsive { margin-left: -.5rem; margin-right: -.5rem; padding: 0 .5rem; }
}

/* ============================================================
   Mis Gastos v25 — pulido visual inspirado en componentes modernos
   ============================================================ */
:root {
  --brand: #147a50;
  --brand-rgb: 20, 122, 80;
  --brand-dark: #0d3f2b;
  --brand-deep: #08291d;
  --brand-light: #e8f7ef;
  --accent: #dfa34c;
  --accent-rgb: 223, 163, 76;
  --ingreso-rgb: 20, 122, 80;
  --gasto-rgb: 214, 83, 83;
  --surface-glass: color-mix(in srgb, var(--surface) 88%, transparent);
  --premium-shadow: 0 1px 2px rgba(10, 34, 23, .04), 0 18px 48px rgba(10, 34, 23, .08);
  --premium-shadow-hover: 0 1px 2px rgba(10, 34, 23, .04), 0 24px 62px rgba(10, 34, 23, .13);
  --spring: cubic-bezier(.2,.85,.2,1);
}

[data-theme="dark"] {
  --surface-glass: color-mix(in srgb, var(--surface) 86%, transparent);
  --premium-shadow: 0 14px 36px rgba(0, 0, 0, .25);
  --premium-shadow-hover: 0 20px 54px rgba(0, 0, 0, .34);
}

html {
  scroll-behavior: smooth;
}

.app-body {
  background:
    radial-gradient(circle at 82% -6%, rgba(var(--brand-rgb), .13), transparent 26rem),
    radial-gradient(circle at 14% 18%, rgba(var(--accent-rgb), .09), transparent 24rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, #fff), var(--bg));
}

.app-content {
  position: relative;
  isolation: isolate;
}

.app-content::before {
  content: "";
  position: fixed;
  inset: 0 0 auto var(--sidebar-width);
  height: 18rem;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 12%, rgba(var(--brand-rgb), .12), transparent 22rem),
    linear-gradient(180deg, rgba(255,255,255,.28), transparent);
  opacity: .9;
}

.app-topbar {
  box-shadow: 0 10px 28px rgba(11, 44, 30, .035);
}

.brand-mark,
.cat-icon,
.stat-icon,
.mini-icon,
.alert-icon,
.quick-action i,
.security-state > i,
.auth-brand {
  border: 2px solid rgba(255,255,255,.72);
  box-shadow: 0 10px 24px rgba(13, 63, 43, .12);
}

.brand-mark,
.cat-icon,
.mini-icon,
.quick-action i,
.alert-icon {
  transform: translateZ(0);
}

.sidebar-link,
.topbar-add,
.icon-button,
.btn,
.quick-action,
.card,
.movement-item,
.insight-row,
.budget-row,
.cashflow-month-pill,
.fondo-chip,
.alert-item {
  transition:
    transform .18s var(--spring),
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    opacity .18s ease;
}

.card,
.metric-card,
.transaction-summary-card,
.transaction-form-card,
.transaction-list-card,
.cashflow-card,
.cashflow-month-card,
.cashflow-chart-card {
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface));
  box-shadow: var(--premium-shadow);
}

.card:hover,
.metric-card:hover,
.transaction-summary-card:hover,
.cashflow-month-card:hover {
  border-color: color-mix(in srgb, var(--brand) 20%, var(--border));
  box-shadow: var(--premium-shadow-hover);
}

.metric-card,
.transaction-summary-card,
.quick-action,
.movement-item,
.insight-row,
.budget-row,
.cashflow-month-pill,
.fondo-chip,
.alert-item {
  position: relative;
  overflow: hidden;
}

.metric-card::after,
.transaction-summary-card::after,
.quick-action::after,
.cashflow-month-pill::after,
.fondo-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.28), transparent 35%, rgba(255,255,255,.12));
  opacity: 0;
  transition: opacity .2s ease;
}

.metric-card:hover::after,
.transaction-summary-card:hover::after,
.quick-action:hover::after,
.cashflow-month-pill:hover::after,
.fondo-chip:hover::after {
  opacity: 1;
}

.metric-card:hover,
.transaction-summary-card:hover,
.quick-action:hover,
.movement-item:hover,
.insight-row:hover,
.budget-row:hover,
.cashflow-month-pill:hover,
.fondo-chip:hover,
.alert-item:hover {
  transform: translateY(-2px);
}

.btn,
.icon-button,
.topbar-add,
.quick-action,
.sidebar-link,
.mobile-nav a,
.mobile-nav button {
  position: relative;
  overflow: hidden;
}

.btn-brand,
.topbar-add,
.mobile-nav .mobile-add {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand-dark));
  border-color: color-mix(in srgb, var(--brand) 90%, #000);
}

.btn-brand:hover,
.topbar-add:hover,
.mobile-nav .mobile-add:hover {
  box-shadow: 0 16px 34px rgba(var(--brand-rgb), .24);
}

.btn:active,
.icon-button:active,
.topbar-add:active,
.quick-action:active,
.mobile-nav a:active,
.mobile-nav button:active {
  transform: translateY(1px) scale(.985);
}

.ok-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  background: currentColor;
  opacity: .16;
  animation: ok-ripple .58s ease-out forwards;
}

.sidebar-link .ok-ripple,
.topbar-add .ok-ripple,
.mobile-add .ok-ripple {
  background: #fff;
  opacity: .24;
}

@keyframes ok-ripple {
  to { opacity: 0; transform: translate(-50%, -50%) scale(26); }
}

.ui-ready .app-container > .page-heading,
.ui-ready .app-container > .card,
.ui-ready .app-container > .row,
.ui-ready .transaction-summary-card,
.ui-ready .metric-card,
.ui-ready .movement-item,
.ui-ready .cashflow-month-card,
.ui-ready .cashflow-chart-card,
.ui-ready .cashflow-card {
  animation: ok-rise .42s var(--spring) both;
  animation-delay: calc(var(--reveal-order, 0) * 34ms);
}

@keyframes ok-rise {
  from { opacity: 0; transform: translateY(10px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.empty-state {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px dashed color-mix(in srgb, var(--brand) 22%, var(--border));
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--brand-rgb), .08), transparent 16rem),
    var(--surface-subtle);
}

.empty-state i {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  margin: 0 auto .75rem;
  border-radius: .9rem;
  color: var(--brand);
  background: var(--brand-light);
  border: 2px solid rgba(255,255,255,.72);
  opacity: 1;
  box-shadow: 0 12px 26px rgba(var(--brand-rgb), .12);
}

.form-control,
.form-select,
.input-group-text {
  background: color-mix(in srgb, var(--input-bg) 96%, #fff);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}

.form-control:hover,
.form-select:hover {
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
}

.form-control:focus,
.form-select:focus {
  transform: translateY(-1px);
}

.status-pill,
.movement-chip,
.badge,
.sidebar-badge,
.notification-dot {
  box-shadow: 0 8px 18px rgba(15, 43, 29, .055);
}

.hero-panel {
  background:
    radial-gradient(circle at 86% 10%, rgba(255,255,255,.18), transparent 10rem),
    radial-gradient(circle at 82% 18%, rgba(var(--accent-rgb), .45), transparent 22rem),
    linear-gradient(135deg, var(--brand-deep), var(--brand) 64%, #25a96d);
  box-shadow: 0 26px 62px rgba(12, 61, 42, .22);
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    linear-gradient(110deg, transparent 42%, rgba(255,255,255,.12), transparent 58%);
  transform: translateX(-42%);
  animation: ok-sheen 7s ease-in-out infinite;
}

@keyframes ok-sheen {
  0%, 45% { transform: translateX(-42%) rotate(0deg); opacity: 0; }
  58% { opacity: 1; }
  72%, 100% { transform: translateX(42%) rotate(0deg); opacity: 0; }
}

.credit-card-visual {
  transform-style: preserve-3d;
  transition: transform .2s var(--spring), box-shadow .2s ease;
}

.credit-card-visual:hover {
  transform: perspective(900px) rotateX(1.2deg) rotateY(-2deg) translateY(-3px);
}

.credit-card-visual::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: linear-gradient(115deg, transparent 43%, rgba(255,255,255,.24), transparent 56%);
  transform: translateX(-35%);
  transition: transform .45s ease;
}

.credit-card-visual:hover::before {
  transform: translateX(35%);
}

.movement-date,
.cashflow-month-pill,
.health-ring,
.report-progress,
.progress {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.movement-item {
  border-left-width: 5px;
}

.movement-item.is-income {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ingreso) 4%, transparent), transparent 32%),
    var(--surface);
}

.movement-item.is-expense {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gasto) 4%, transparent), transparent 32%),
    var(--surface);
}

.cashflow-table-wrap,
.table-responsive {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--brand) 42%, var(--border)) transparent;
}

.cashflow-table-wrap::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.cashflow-month-strip::-webkit-scrollbar {
  height: .62rem;
  width: .62rem;
}

.cashflow-table-wrap::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.cashflow-month-strip::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 40%, var(--border));
}

.alert {
  border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
  box-shadow: 0 14px 34px rgba(12, 44, 30, .06);
}

.alert-success {
  color: color-mix(in srgb, var(--ingreso) 78%, #0b2418);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ingreso) 10%, transparent), transparent 34%),
    color-mix(in srgb, var(--ingreso) 8%, var(--surface));
}

.alert-warning {
  color: color-mix(in srgb, var(--warning) 72%, #3f2510);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--warning) 12%, transparent), transparent 34%),
    color-mix(in srgb, var(--warning) 9%, var(--surface));
}

.alert-danger {
  color: color-mix(in srgb, var(--gasto) 78%, #3f1111);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gasto) 10%, transparent), transparent 34%),
    color-mix(in srgb, var(--gasto) 8%, var(--surface));
}

.auth-wrapper {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.12), transparent 18rem),
    radial-gradient(circle at 85% 78%, rgba(var(--accent-rgb), .24), transparent 22rem),
    radial-gradient(circle at 50% 110%, rgba(66,185,125,.26), transparent 26rem),
    linear-gradient(145deg, #061d15, #0e3f2d 52%, #16734a);
}

.auth-card {
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

[data-theme="dark"] .card,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .transaction-summary-card,
[data-theme="dark"] .transaction-form-card,
[data-theme="dark"] .transaction-list-card,
[data-theme="dark"] .cashflow-card,
[data-theme="dark"] .cashflow-month-card,
[data-theme="dark"] .cashflow-chart-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #fff 2%), var(--surface));
}

[data-theme="dark"] .movement-item.is-income,
[data-theme="dark"] .movement-item.is-expense {
  background: var(--surface);
}

@media (max-width: 991.98px) {
  .app-content::before {
    left: 0;
    height: 14rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-ready .app-container > .page-heading,
  .ui-ready .app-container > .card,
  .ui-ready .app-container > .row,
  .ui-ready .transaction-summary-card,
  .ui-ready .metric-card,
  .ui-ready .movement-item,
  .ui-ready .cashflow-month-card,
  .ui-ready .cashflow-chart-card,
  .ui-ready .cashflow-card,
  .hero-panel::before,
  .ok-ripple {
    animation: none !important;
  }
}

/* ============================================================
   Mis Gastos v27 — iconografía premium y sección suscripciones
   ============================================================ */
:root {
  --icon-shadow: 0 10px 22px rgba(10, 34, 23, .10);
  --icon-shadow-strong: 0 14px 32px rgba(10, 34, 23, .18);
}

.sidebar-link > i {
  width: 1.85rem;
  height: 1.85rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 1.85rem;
  border-radius: .72rem;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.sidebar-link:hover > i,
.sidebar-link.active > i {
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.18);
}

.sidebar-group summary > span > i {
  width: 1.65rem;
  height: 1.65rem;
  display: inline-grid;
  place-items: center;
  border-radius: .62rem;
  background: rgba(255,255,255,.06);
}

.section-title h2 > i,
.page-heading .btn i,
.btn i,
.status-pill i,
.movement-chip i {
  vertical-align: -.12em;
}

.cat-icon,
.mini-icon,
.stat-icon,
.alert-icon,
.quick-action i {
  border-radius: .82rem;
  box-shadow: var(--icon-shadow);
}

.cat-icon.cat-icon-sm {
  border-radius: .62rem;
}

.cat-icon.cat-icon-xs {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: .52rem;
  font-size: .68rem;
  margin-right: .35rem;
}

.icon-button,
.action-icon {
  backdrop-filter: blur(10px);
}

.icon-picker {
  gap: .55rem;
}

.icon-picker label {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: .88rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface));
  box-shadow: 0 8px 20px rgba(12, 44, 30, .055);
}

.icon-picker label:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(var(--brand-rgb), .14);
}

.icon-picker input[type="radio"]:checked + label {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 16px 34px rgba(var(--brand-rgb), .24);
}

.service-logo {
  width: 2.85rem;
  height: 2.85rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 2.85rem;
  border-radius: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #12372a, #1b7a52);
  border: 2px solid rgba(255,255,255,.72);
  box-shadow: var(--icon-shadow-strong);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.service-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.34), transparent 36%);
}

.service-logo i {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1;
}

.service-logo span {
  font-weight: 950;
  font-size: .92rem;
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: none;
}

.service-logo-lg {
  width: 3.45rem;
  height: 3.45rem;
  flex-basis: 3.45rem;
  border-radius: 1.1rem;
}

.service-logo-lg i {
  font-size: 1.55rem;
}

.service-logo-sm {
  width: 2.45rem;
  height: 2.45rem;
  flex-basis: 2.45rem;
  border-radius: .86rem;
}

.service-logo-xs {
  width: 2rem;
  height: 2rem;
  flex-basis: 2rem;
  border-radius: .72rem;
  font-size: .78rem;
  box-shadow: 0 8px 18px rgba(10, 34, 23, .10);
}

.service-logo-xs i {
  font-size: 1rem;
}

.service-netflix { background: linear-gradient(135deg, #111, #e50914); }
.service-netflix span { color: #fff; font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif; font-size: 1.18rem; letter-spacing: .02em; }
.service-amazon { background: linear-gradient(135deg, #111827, #232f3e 72%, #ff9900); }
.service-spotify { background: linear-gradient(135deg, #1db954, #0f6d36); color: #06170c; }
.service-youtube { background: linear-gradient(135deg, #ff0033, #b20710); }
.service-disney { background: linear-gradient(135deg, #061d52, #113ccf 72%, #7dd3fc); }
.service-disney span { font-size: .88rem; letter-spacing: -.08em; }
.service-max { background: linear-gradient(135deg, #050816, #312e81 65%, #60a5fa); }
.service-max span { font-size: .66rem; text-transform: uppercase; letter-spacing: -.03em; }
.service-paramount { background: linear-gradient(135deg, #053c9b, #0ea5e9); }
.service-crunchyroll { background: linear-gradient(135deg, #f97316, #c2410c); }
.service-apple { background: linear-gradient(135deg, #111827, #6b7280); }
.service-google { background: conic-gradient(from 210deg, #4285f4, #34a853, #fbbc05, #ea4335, #4285f4); }
.service-microsoft { background: conic-gradient(from 45deg, #7fba00, #00a4ef, #f25022, #ffb900, #7fba00); }
.service-dropbox { background: linear-gradient(135deg, #0061ff, #60a5fa); }
.service-adobe { background: linear-gradient(135deg, #111, #fa0f00); }
.service-canva { background: linear-gradient(135deg, #00c4cc, #7d2ae8); }
.service-chatgpt { background: linear-gradient(135deg, #0f766e, #111827); }
.service-notion { background: linear-gradient(135deg, #fff, #e5e7eb); color: #111; }
.service-github { background: linear-gradient(135deg, #0d1117, #30363d); }
.service-zoom { background: linear-gradient(135deg, #0b5cff, #38bdf8); }
.service-twitch { background: linear-gradient(135deg, #6441a5, #9146ff); }
.service-discord { background: linear-gradient(135deg, #5865f2, #2b2d7f); }
.service-steam { background: linear-gradient(135deg, #171a21, #1b6ca8); }
.service-playstation { background: linear-gradient(135deg, #003087, #006fcd); }
.service-paypal { background: linear-gradient(135deg, #003087, #009cde); }
.service-generic { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); }

.subscription-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, .95fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.2rem, 3vw, 2rem);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 85% 12%, rgba(var(--accent-rgb), .20), transparent 18rem),
    radial-gradient(circle at 16% 0%, rgba(var(--brand-rgb), .14), transparent 18rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #fff), var(--surface));
}

.subscription-hero::before {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  right: -5rem;
  bottom: -8rem;
  border-radius: 999px;
  border: 3rem solid rgba(var(--brand-rgb), .055);
  pointer-events: none;
}

.subscription-hero-copy,
.subscription-brand-cloud {
  position: relative;
  z-index: 1;
}

.subscription-hero-copy h2 {
  max-width: 42rem;
  margin: .8rem 0 .5rem;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.subscription-hero-copy p {
  max-width: 38rem;
  color: var(--muted);
  margin: 0;
}

.subscription-brand-cloud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  align-content: center;
}

.brand-cloud-item {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem;
  border-radius: 1rem;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  box-shadow: 0 12px 28px rgba(12, 44, 30, .06);
  text-decoration: none;
  transition: transform .18s var(--spring), border-color .18s ease, box-shadow .18s ease;
}

.brand-cloud-item:hover {
  color: var(--text);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  box-shadow: 0 16px 34px rgba(var(--brand-rgb), .12);
}

.brand-cloud-item > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 750;
}

.subscription-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}

.subscription-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .75rem;
  align-items: center;
  padding: 1rem;
  border-radius: 1.05rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface));
  box-shadow: var(--premium-shadow);
}

.subscription-stat .mini-icon {
  grid-row: span 2;
}

.subscription-stat small {
  color: var(--muted);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: .66rem;
}

.subscription-stat strong {
  font-size: 1.12rem;
  letter-spacing: -.03em;
}

.subscription-panel {
  position: relative;
}

.quick-subscription-form {
  scroll-margin-top: 6.5rem;
  background:
    radial-gradient(circle at 90% 0%, rgba(var(--accent-rgb), .14), transparent 11rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, #fff), var(--surface));
}

.quick-selected-service {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .78rem;
  border-radius: 1.08rem;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}

.quick-selected-service small,
.quick-selected-service span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
}

.quick-selected-service strong {
  display: block;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.quick-service-strip {
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: .18rem .1rem .5rem;
  scrollbar-width: thin;
}

.quick-service-option {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: .24rem;
  border-radius: .92rem;
  border: 1px solid transparent;
  text-decoration: none;
  background: transparent;
  transition: transform .18s var(--spring), border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.quick-service-option:hover,
.quick-service-option.is-selected {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  box-shadow: 0 10px 22px rgba(var(--brand-rgb), .10);
}

.quick-service-option.has-active::after {
  content: "";
  position: absolute;
  right: .18rem;
  top: .18rem;
  width: .56rem;
  height: .56rem;
  border-radius: 999px;
  background: var(--ingreso);
  border: 2px solid var(--surface);
  box-shadow: 0 4px 10px rgba(0,0,0,.14);
}

.subscription-list,
.subscription-candidates {
  display: grid;
  gap: .78rem;
}

.subscription-card,
.subscription-candidate-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .92rem;
  border-radius: 1.08rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background:
    linear-gradient(90deg, rgba(var(--brand-rgb), .035), transparent 34%),
    color-mix(in srgb, var(--surface) 96%, #fff);
  box-shadow: 0 10px 26px rgba(12, 44, 30, .045);
  transition: transform .18s var(--spring), box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}

.subscription-card:hover,
.subscription-candidate-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
  box-shadow: var(--premium-shadow-hover);
}

.subscription-card.is-paused,
.subscription-candidate-card.is-converted {
  opacity: .66;
}

.subscription-card-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .85rem;
}

.subscription-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
}

.subscription-name strong {
  min-width: 0;
  font-size: .98rem;
  letter-spacing: -.015em;
}

.subscription-card p,
.subscription-candidate-card p {
  margin: .18rem 0 .36rem;
  color: var(--muted);
  font-size: .86rem;
  overflow-wrap: anywhere;
}

.subscription-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .72rem;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 650;
}

.subscription-meta span {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
}

.subscription-meta i {
  color: color-mix(in srgb, var(--brand) 72%, var(--muted));
}

.subscription-amount {
  min-width: 8.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  text-align: right;
}

.subscription-amount strong {
  color: var(--gasto);
  font-size: 1rem;
  letter-spacing: -.02em;
}

.subscription-amount small {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
}

.service-catalog {
  display: grid;
  gap: .55rem;
}

.service-catalog-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .62rem;
  border-radius: .95rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface-subtle) 70%, var(--surface));
  transition: transform .18s var(--spring), border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.service-catalog-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 20%, var(--border));
  box-shadow: 0 12px 26px rgba(12, 44, 30, .06);
}

.service-catalog-item.has-active {
  border-color: color-mix(in srgb, var(--ingreso) 22%, var(--border));
  background: linear-gradient(90deg, color-mix(in srgb, var(--ingreso) 8%, transparent), color-mix(in srgb, var(--surface-subtle) 70%, var(--surface)));
}

.service-catalog-copy {
  min-width: 0;
  margin-right: auto;
}

.service-catalog-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
}

.service-catalog-action {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  padding: .42rem .56rem;
  border-radius: .75rem;
  color: var(--brand-dark);
  font-size: .72rem;
  font-weight: 850;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}

.service-catalog-action:hover {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

.service-catalog-item strong,
.service-catalog-item small {
  display: block;
  line-height: 1.15;
}

.service-catalog-item strong {
  font-size: .82rem;
}

.service-catalog-item small {
  color: var(--muted);
  font-size: .68rem;
  margin-top: .15rem;
}

.impact-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem .9rem;
  border-radius: .92rem;
  background: color-mix(in srgb, var(--ingreso) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ingreso) 18%, var(--border));
  margin-bottom: .65rem;
}

.impact-box.warning {
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 20%, var(--border));
}

.impact-box.neutral {
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 18%, var(--border));
}

.impact-box span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 750;
}

.impact-box strong {
  font-size: 1rem;
  letter-spacing: -.02em;
}

.upcoming-subscription-list {
  display: grid;
  gap: .62rem;
}

.upcoming-subscription-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .72rem;
  padding: .7rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-subtle) 72%, var(--surface));
}

.upcoming-date-pill {
  width: 3rem;
  height: 3.15rem;
  display: grid;
  place-items: center;
  border-radius: .92rem;
  color: var(--brand-dark);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, #fff), var(--surface));
}

.upcoming-date-pill strong,
.upcoming-date-pill span {
  line-height: 1;
}

.upcoming-date-pill strong {
  font-size: 1rem;
  letter-spacing: -.03em;
}

.upcoming-date-pill span {
  color: var(--muted);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.upcoming-subscription-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

.upcoming-subscription-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .86rem;
}

.upcoming-subscription-item small {
  display: block;
  margin-top: .12rem;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
}

.upcoming-amount {
  color: var(--gasto);
  font-size: .82rem;
  text-align: right;
  white-space: nowrap;
}

.ui-ready .subscription-hero,
.ui-ready .subscription-stat,
.ui-ready .subscription-card,
.ui-ready .subscription-candidate-card,
.ui-ready .service-catalog-item,
.ui-ready .quick-subscription-form,
.ui-ready .upcoming-subscription-item {
  animation: ok-rise .42s var(--spring) both;
  animation-delay: calc(var(--reveal-order, 0) * 28ms);
}

[data-theme="dark"] .brand-cloud-item,
[data-theme="dark"] .service-catalog-item,
[data-theme="dark"] .subscription-card,
[data-theme="dark"] .subscription-candidate-card,
[data-theme="dark"] .subscription-stat,
[data-theme="dark"] .quick-selected-service,
[data-theme="dark"] .upcoming-subscription-item,
[data-theme="dark"] .upcoming-date-pill {
  background: color-mix(in srgb, var(--surface) 94%, #fff 2%);
}

@media (max-width: 1199.98px) {
  .subscription-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .subscription-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subscription-brand-cloud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subscription-card,
  .subscription-candidate-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .subscription-amount {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }

  .service-catalog-item {
    align-items: flex-start;
  }

  .service-catalog-actions {
    flex-direction: column;
    align-items: flex-end;
  }

  .upcoming-subscription-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .upcoming-amount {
    grid-column: 2;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .subscription-stats,
  .subscription-brand-cloud {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-ready .subscription-hero,
  .ui-ready .subscription-stat,
  .ui-ready .subscription-card,
  .ui-ready .subscription-candidate-card,
  .ui-ready .service-catalog-item,
  .ui-ready .quick-subscription-form,
  .ui-ready .upcoming-subscription-item {
    animation: none !important;
  }
}

/* ============================================================
   Mis Gastos v28 — integración bancaria segura
   ============================================================ */
.bank-heading {
  align-items: flex-start;
}

.bank-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.25rem, 3vw, 2.15rem);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(var(--brand-rgb), .18), transparent 17rem),
    radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), .14), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface));
}

.bank-hero::after {
  content: "";
  position: absolute;
  inset: auto -4rem -7rem auto;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  border: 3rem solid rgba(var(--brand-rgb), .06);
  pointer-events: none;
}

.bank-hero-copy,
.bank-flow {
  position: relative;
  z-index: 1;
}

.bank-hero h2 {
  max-width: 42rem;
  margin: .85rem 0 .55rem;
  font-size: clamp(1.6rem, 3vw, 2.45rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.bank-hero p {
  max-width: 39rem;
  color: var(--muted);
  margin: 0;
}

.bank-flow {
  display: grid;
  gap: .72rem;
  align-content: center;
}

.bank-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .12rem .72rem;
  align-items: center;
  padding: .78rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: 0 12px 28px rgba(12, 44, 30, .055);
}

.bank-step > span {
  grid-row: span 2;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-grid;
  place-items: center;
  border-radius: .78rem;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: var(--icon-shadow);
}

.bank-step strong {
  line-height: 1.1;
}

.bank-step small {
  color: var(--muted);
  font-weight: 650;
}

.bank-panel {
  position: relative;
}

.bank-readiness-grid,
.bank-connection-list {
  display: grid;
  gap: .78rem;
}

.bank-provider-card,
.bank-connection-card {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .92rem;
  border-radius: 1.08rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background:
    linear-gradient(90deg, rgba(var(--brand-rgb), .035), transparent 38%),
    color-mix(in srgb, var(--surface) 96%, #fff);
  box-shadow: 0 10px 26px rgba(12, 44, 30, .045);
  transition: transform .18s var(--spring), border-color .18s ease, box-shadow .18s ease;
}

.bank-provider-card:hover,
.bank-connection-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
  box-shadow: var(--premium-shadow-hover);
}

.bank-provider-card.is-selected {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface) 96%, #fff);
}

.bank-provider-card p {
  margin: .34rem 0 0;
  color: var(--muted);
  font-size: .84rem;
}

.bank-card-icon,
.bank-logo,
.bank-mini-logo {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: var(--icon-shadow);
}

.bank-card-icon {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: .95rem;
  font-size: 1.18rem;
}

.bank-logo {
  width: 3.05rem;
  height: 3.05rem;
  border-radius: 1.05rem;
  font-size: 1.3rem;
}

.bank-mini-logo {
  width: 2rem;
  height: 2rem;
  border-radius: .72rem;
  font-size: .95rem;
}

.bank-connection-card {
  justify-content: space-between;
}

.bank-connection-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .85rem;
}

.bank-connection-main p {
  margin: .18rem 0 .38rem;
  color: var(--muted);
  font-size: .86rem;
}

.bank-connection-actions {
  display: flex;
  gap: .35rem;
  flex: 0 0 auto;
}

.bank-sync-list {
  display: grid;
  gap: .55rem;
}

.bank-sync-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
  padding: .68rem .75rem;
  border-radius: .92rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface-subtle) 74%, var(--surface));
}

.bank-sync-item strong,
.bank-sync-item small {
  display: block;
  line-height: 1.16;
}

.bank-sync-item small {
  color: var(--muted);
  font-size: .72rem;
  margin-top: .12rem;
}

#nuevaConexion {
  scroll-margin-top: 6.5rem;
}

.bank-supported-list {
  display: grid;
  gap: .5rem;
}

.bank-supported-item {
  display: flex;
  align-items: center;
  gap: .62rem;
  padding: .62rem;
  border-radius: .92rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface-subtle) 70%, var(--surface));
}

.bank-supported-item strong,
.bank-supported-item small {
  display: block;
  line-height: 1.15;
}

.bank-supported-item strong {
  font-size: .82rem;
}

.bank-supported-item small {
  color: var(--muted);
  font-size: .68rem;
  margin-top: .16rem;
}

.bank-checklist li {
  margin-bottom: .52rem;
}

.bank-safety-callout {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.18), transparent 8rem),
    linear-gradient(135deg, var(--brand), var(--brand-dark));
}

.bank-safety-callout > i {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-grid;
  place-items: center;
  border-radius: .9rem;
  background: rgba(255,255,255,.16);
}

.bank-safety-callout p {
  margin: .18rem 0 0;
  color: rgba(255,255,255,.78);
  font-size: .82rem;
}

.ui-ready .bank-hero,
.ui-ready .bank-provider-card,
.ui-ready .bank-connection-card,
.ui-ready .bank-step,
.ui-ready .bank-supported-item,
.ui-ready .bank-sync-item {
  animation: ok-rise .42s var(--spring) both;
  animation-delay: calc(var(--reveal-order, 0) * 28ms);
}

[data-theme="dark"] .bank-step,
[data-theme="dark"] .bank-provider-card,
[data-theme="dark"] .bank-connection-card,
[data-theme="dark"] .bank-sync-item,
[data-theme="dark"] .bank-supported-item {
  background: color-mix(in srgb, var(--surface) 94%, #fff 2%);
}

@media (max-width: 1199.98px) {
  .bank-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .bank-connection-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .bank-connection-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .bank-sync-item {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-ready .bank-hero,
  .ui-ready .bank-provider-card,
  .ui-ready .bank-connection-card,
  .ui-ready .bank-step,
  .ui-ready .bank-supported-item,
  .ui-ready .bank-sync-item {
    animation: none !important;
  }
}

/* ============================================================
   Mis Gastos v29 — experiencia guiada e intuitiva
   ============================================================ */
html,
body,
.app-body,
.auth-wrapper {
  max-width: 100%;
  overflow-x: hidden;
}

.auth-wrapper::before {
  left: 0;
  transform: translate(-45%, 52%);
}

.auth-wrapper::after {
  right: 0;
  transform: translate(45%, -50%);
}

.today-guide,
.insight-command,
.workflow-strip,
.bank-onboarding {
  position: relative;
}

.today-guide,
.insight-command,
.bank-onboarding {
  padding: clamp(1rem, 2.4vw, 1.45rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 95% 0%, rgba(var(--accent-rgb), .12), transparent 12rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, #fff), var(--surface));
}

.today-guide::before,
.insight-command::before,
.bank-onboarding::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent), transparent);
}

.today-guide-head,
.insight-command-head,
.bank-onboarding-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.today-guide h2,
.insight-command h2,
.bank-onboarding h2 {
  margin: .15rem 0 .2rem;
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.today-guide p,
.insight-command p,
.bank-onboarding p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.today-action-grid,
.insight-command-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.today-action,
.insight-command-item,
.workflow-step,
.bank-onboarding-step,
.bank-choice-card {
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface-subtle) 72%, var(--surface));
  box-shadow: 0 10px 24px rgba(12, 44, 30, .045);
}

.today-action {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .72rem;
  padding: .78rem;
  color: var(--text);
  border-radius: 1rem;
  text-decoration: none;
  transition: transform .18s var(--spring), border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.today-action:hover {
  color: var(--text);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 26%, var(--border));
  box-shadow: var(--premium-shadow-hover);
}

.today-action-icon,
.workflow-step > span {
  width: 2.45rem;
  height: 2.45rem;
  display: inline-grid;
  place-items: center;
  border-radius: .88rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: var(--icon-shadow);
}

.today-action.warning .today-action-icon { background: linear-gradient(135deg, #f59e0b, #b45309); }
.today-action.danger .today-action-icon { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.today-action.success .today-action-icon { background: linear-gradient(135deg, #10b981, #047857); }

.today-action strong,
.workflow-step strong,
.insight-command-item strong,
.bank-onboarding-step strong,
.bank-choice-card strong {
  display: block;
  color: var(--text);
  line-height: 1.1;
  font-size: .88rem;
}

.today-action small,
.workflow-step small,
.insight-command-item small,
.bank-onboarding-step small,
.bank-choice-card small {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.25;
  margin-top: .16rem;
}

.today-action > .bi-chevron-right {
  color: var(--muted);
  transition: transform .18s var(--spring), color .18s ease;
}

.today-action:hover > .bi-chevron-right {
  color: var(--brand);
  transform: translateX(2px);
}

.workflow-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .78rem;
}

.workflow-step {
  display: flex;
  align-items: center;
  gap: .72rem;
  min-width: 0;
  padding: .78rem;
  border-radius: 1rem;
  color: var(--text);
  text-decoration: none;
  transition: transform .18s var(--spring), border-color .18s ease, box-shadow .18s ease;
}

.workflow-step:hover {
  color: var(--text);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  box-shadow: var(--premium-shadow-hover);
}

.workflow-step.is-primary {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 9%, transparent), transparent),
    color-mix(in srgb, var(--surface) 96%, #fff);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
}

.insight-command-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.insight-command-item {
  display: flex;
  align-items: center;
  gap: .72rem;
  padding: .82rem;
  border-radius: 1rem;
}

.bank-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .78rem;
}

.bank-onboarding-step {
  position: relative;
  min-height: 8rem;
  padding: .9rem;
  border-radius: 1.05rem;
  overflow: hidden;
}

.bank-onboarding-step > span {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-grid;
  place-items: center;
  border-radius: .76rem;
  color: var(--brand-dark);
  font-weight: 900;
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  margin-bottom: .72rem;
}

.bank-onboarding-step.is-done {
  border-color: color-mix(in srgb, var(--ingreso) 28%, var(--border));
}

.bank-onboarding-step.is-done > span {
  color: #fff;
  background: var(--ingreso);
}

.bank-onboarding-step.is-active {
  border-color: color-mix(in srgb, var(--brand) 36%, var(--border));
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .14), transparent 8rem),
    color-mix(in srgb, var(--surface) 96%, #fff);
}

.bank-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  max-height: 18rem;
  overflow: auto;
  padding-right: .15rem;
}

.bank-choice-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bank-choice-card {
  display: flex;
  align-items: center;
  gap: .58rem;
  min-width: 0;
  padding: .65rem;
  border-radius: .95rem;
  cursor: pointer;
  transition: transform .18s var(--spring), border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.bank-choice-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
}

.bank-choice-input:checked + .bank-choice-card {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent),
    color-mix(in srgb, var(--surface) 96%, #fff);
  box-shadow: 0 14px 28px rgba(var(--brand-rgb), .12);
}

.bank-choice-input:focus-visible + .bank-choice-card {
  outline: 3px solid color-mix(in srgb, var(--brand) 32%, transparent);
  outline-offset: 2px;
}

.bank-choice-card .bank-mini-logo {
  flex-basis: 2rem;
}

.ui-ready .today-guide,
.ui-ready .today-action,
.ui-ready .workflow-step,
.ui-ready .insight-command,
.ui-ready .insight-command-item,
.ui-ready .bank-onboarding,
.ui-ready .bank-onboarding-step,
.ui-ready .bank-choice-card {
  animation: ok-rise .42s var(--spring) both;
  animation-delay: calc(var(--reveal-order, 0) * 28ms);
}

[data-theme="dark"] .today-action,
[data-theme="dark"] .workflow-step,
[data-theme="dark"] .insight-command-item,
[data-theme="dark"] .bank-onboarding-step,
[data-theme="dark"] .bank-choice-card {
  background: color-mix(in srgb, var(--surface) 94%, #fff 2%);
}

@media (max-width: 1199.98px) {
  .today-action-grid,
  .workflow-strip,
  .bank-onboarding-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .today-guide-head,
  .insight-command-head,
  .bank-onboarding-head {
    flex-direction: column;
  }

  .today-action-grid,
  .workflow-strip,
  .insight-command-grid,
  .bank-onboarding-steps,
  .bank-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-ready .today-guide,
  .ui-ready .today-action,
  .ui-ready .workflow-step,
  .ui-ready .insight-command,
  .ui-ready .insight-command-item,
  .ui-ready .bank-onboarding,
  .ui-ready .bank-onboarding-step,
  .ui-ready .bank-choice-card {
    animation: none !important;
  }
}

/* ============================================================
   Mis Gastos v30 — paleta corporativa EMS + finanzas personales
   ============================================================ */
:root {
  --ems-navy: #071d35;
  --ems-ink: #0b2036;
  --ems-blue: #1468b8;
  --ems-sky: #edf6ff;
  --ems-slate: #53677c;
  --brand: #147a50;
  --brand-rgb: 20, 122, 80;
  --brand-dark: #0d3f2b;
  --brand-deep: #071d35;
  --brand-light: #e8f7ef;
  --accent: #dfa34c;
  --accent-rgb: 223, 163, 76;
  --accent-soft: #fff4df;
  --ingreso: #147a50;
  --ingreso-rgb: 20, 122, 80;
  --gasto: #d65353;
  --gasto-rgb: 214, 83, 83;
  --warning: #cf862d;
  --info: #1468b8;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-subtle: #f4f7fa;
  --surface-glass: color-mix(in srgb, var(--surface) 86%, transparent);
  --text: #0b2036;
  --muted: #53677c;
  --border: #d7e2ee;
  --input-bg: #ffffff;
  --shadow: 0 1px 2px rgba(7, 29, 53, .04), 0 14px 34px rgba(7, 29, 53, .07);
  --shadow-hover: 0 18px 48px rgba(7, 29, 53, .12);
  --premium-shadow: 0 1px 2px rgba(7, 29, 53, .04), 0 18px 48px rgba(7, 29, 53, .08);
  --premium-shadow-hover: 0 1px 2px rgba(7, 29, 53, .04), 0 26px 64px rgba(7, 29, 53, .14);
}

[data-theme="dark"] {
  --ems-navy: #071d35;
  --ems-ink: #edf6ff;
  --ems-blue: #80d6ff;
  --ems-sky: #102944;
  --ems-slate: #a9b8c8;
  --brand: #42b97d;
  --brand-rgb: 66, 185, 125;
  --brand-dark: #147a50;
  --brand-deep: #06172a;
  --brand-light: #123827;
  --accent: #e4ad60;
  --accent-rgb: 228, 173, 96;
  --accent-soft: #3d301e;
  --ingreso: #42b97d;
  --ingreso-rgb: 66, 185, 125;
  --gasto: #ff6b6b;
  --gasto-rgb: 255, 107, 107;
  --warning: #e4ad60;
  --info: #80d6ff;
  --bg: #07111f;
  --surface: #0b2036;
  --surface-subtle: #102944;
  --surface-glass: color-mix(in srgb, var(--surface) 82%, transparent);
  --text: #edf6ff;
  --muted: #a9b8c8;
  --border: #1e3a56;
  --input-bg: #102944;
  --shadow: 0 14px 36px rgba(0, 0, 0, .28);
  --shadow-hover: 0 22px 58px rgba(0, 0, 0, .38);
  --premium-shadow: 0 14px 36px rgba(0, 0, 0, .28);
  --premium-shadow-hover: 0 22px 58px rgba(0, 0, 0, .38);
}

body {
  background:
    radial-gradient(circle at 82% -8%, rgba(20, 104, 184, .11), transparent 28rem),
    radial-gradient(circle at 14% 8%, rgba(var(--brand-rgb), .065), transparent 24rem),
    var(--bg);
  font-family: Aptos, "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
}

.app-body {
  background:
    radial-gradient(circle at 84% -7%, rgba(20, 104, 184, .14), transparent 28rem),
    radial-gradient(circle at 16% 14%, rgba(var(--accent-rgb), .075), transparent 24rem),
    linear-gradient(180deg, #fff 0%, var(--bg) 42%, color-mix(in srgb, var(--bg) 94%, var(--ems-sky)) 100%);
}

[data-theme="dark"] .app-body {
  background:
    radial-gradient(circle at 84% -7%, rgba(128, 214, 255, .13), transparent 26rem),
    radial-gradient(circle at 18% 12%, rgba(var(--brand-rgb), .13), transparent 24rem),
    linear-gradient(180deg, #06111f 0%, var(--bg) 54%, #081928 100%);
}

.app-content::before {
  background:
    radial-gradient(circle at 72% 10%, rgba(20, 104, 184, .13), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 255, .34), transparent);
}

.app-sidebar {
  background:
    radial-gradient(circle at 0 0, rgba(var(--accent-rgb), .18), transparent 17rem),
    radial-gradient(circle at 85% 22%, rgba(20, 104, 184, .18), transparent 16rem),
    linear-gradient(180deg, #071d35 0%, #0b2036 54%, #0d3f2b 100%);
  border-right-color: rgba(237, 246, 255, .1);
}

.sidebar-brand small,
.sidebar-section-title {
  color: rgba(237, 246, 255, .62);
}

.brand-mark,
.auth-brand {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, .18), transparent 1.2rem),
    linear-gradient(145deg, var(--ems-blue), var(--ems-navy) 54%, var(--brand-dark));
  box-shadow: 0 12px 28px rgba(7, 29, 53, .24);
}

.sidebar-link {
  color: rgba(237, 246, 255, .78);
}

.sidebar-link:hover {
  color: #fff;
  background: rgba(237, 246, 255, .085);
}

.sidebar-link.active {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(var(--brand-rgb), .32), rgba(20, 104, 184, .16));
  box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-link > i {
  background: rgba(237, 246, 255, .085);
  color: rgba(237, 246, 255, .82);
}

.sidebar-link:hover > i,
.sidebar-link.active > i {
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb), .55), rgba(20, 104, 184, .28));
  color: #fff;
}

.app-topbar {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  border-bottom-color: color-mix(in srgb, var(--border) 78%, transparent);
  box-shadow: 0 12px 34px rgba(7, 29, 53, .055);
}

.page-heading h1,
.section-title h2,
.card-title {
  color: var(--ems-ink);
}

.text-brand,
a {
  color: var(--brand);
}

a:hover {
  color: color-mix(in srgb, var(--brand-dark) 82%, var(--ems-blue));
}

.btn-brand,
.btn-primary,
.btn-success,
.topbar-add,
.mobile-nav .mobile-add {
  color: #fff;
  border-color: var(--brand-dark);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 92%, #fff), var(--brand-dark));
  box-shadow: 0 12px 26px rgba(var(--brand-rgb), .22);
}

.btn-brand:hover,
.btn-primary:hover,
.btn-success:hover,
.topbar-add:hover,
.mobile-nav .mobile-add:hover {
  color: #fff;
  border-color: var(--brand-dark);
  background:
    linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand-dark) 82%, #000));
  box-shadow: 0 16px 36px rgba(var(--brand-rgb), .28);
}

.btn-outline-secondary {
  border-color: var(--border);
  color: var(--ems-ink);
  background: var(--surface);
}

.btn-outline-secondary:hover {
  color: var(--ems-navy);
  border-color: color-mix(in srgb, var(--ems-blue) 34%, var(--border));
  background: var(--ems-sky);
}

.icon-button {
  border-color: var(--border);
  background: var(--surface);
  color: var(--ems-ink);
}

.icon-button:hover {
  color: var(--ems-blue);
  border-color: color-mix(in srgb, var(--ems-blue) 42%, var(--border));
  background: var(--ems-sky);
}

.card,
.metric-card,
.transaction-summary-card,
.transaction-form-card,
.transaction-list-card,
.cashflow-card,
.cashflow-month-card,
.cashflow-chart-card {
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, var(--ems-sky)), var(--surface));
  box-shadow: var(--premium-shadow);
}

.card:hover,
.metric-card:hover,
.transaction-summary-card:hover,
.cashflow-month-card:hover {
  border-color: color-mix(in srgb, var(--ems-blue) 18%, var(--border));
  box-shadow: var(--premium-shadow-hover);
}

.metric-card::after,
.transaction-summary-card::after,
.quick-action::after,
.cashflow-month-pill::after,
.fondo-chip::after {
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .3), transparent 36%, rgba(237, 246, 255, .2));
}

.mini-icon,
.stat-icon.balance,
.quick-action i,
.security-state > i,
.today-action-icon,
.workflow-step > span {
  color: var(--brand);
  background:
    linear-gradient(145deg, var(--brand-light), color-mix(in srgb, var(--ems-sky) 66%, #fff));
  border-color: rgba(255, 255, 255, .86);
}

.cat-icon,
.stat-icon,
.alert-icon {
  box-shadow: 0 10px 24px rgba(7, 29, 53, .11);
}

.hero-panel {
  background:
    radial-gradient(circle at 84% 8%, rgba(var(--accent-rgb), .48), transparent 21rem),
    radial-gradient(circle at 12% 0%, rgba(128, 214, 255, .18), transparent 18rem),
    linear-gradient(135deg, var(--ems-navy) 0%, var(--ems-ink) 42%, var(--brand-dark) 100%);
  box-shadow: 0 28px 66px rgba(7, 29, 53, .24);
}

.hero-panel::after {
  border-color: rgba(237, 246, 255, .18);
  box-shadow:
    0 0 0 2.5rem rgba(237, 246, 255, .04),
    0 0 0 5rem rgba(20, 104, 184, .035);
}

.credit-card-visual {
  background:
    radial-gradient(circle at 90% 0%, rgba(var(--accent-rgb), .34), transparent 10rem),
    linear-gradient(135deg, #071d35, #0b3868 52%, #147a50);
}

.auth-wrapper {
  background:
    radial-gradient(circle at 13% 18%, rgba(var(--accent-rgb), .24), transparent 23rem),
    radial-gradient(circle at 85% 82%, rgba(20, 104, 184, .26), transparent 26rem),
    linear-gradient(145deg, #071d35, #0b2036 54%, #0d3f2b);
}

.auth-card {
  border-color: rgba(237, 246, 255, .16);
  box-shadow: 0 30px 86px rgba(7, 29, 53, .38);
}

.auth-card .form-control,
.auth-card .form-select,
.auth-card .input-group-text {
  border-color: var(--border);
}

.auth-privacy {
  color: color-mix(in srgb, var(--muted) 78%, #fff);
}

.today-guide,
.insight-command,
.bank-onboarding {
  background:
    radial-gradient(circle at 96% 0%, rgba(var(--accent-rgb), .13), transparent 13rem),
    radial-gradient(circle at 0% 100%, rgba(20, 104, 184, .06), transparent 16rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, var(--ems-sky)), var(--surface));
}

.today-guide::before,
.insight-command::before,
.bank-onboarding::before {
  background: linear-gradient(90deg, var(--ems-blue), var(--brand), var(--accent), transparent);
}

.today-action,
.insight-command-item,
.workflow-step,
.bank-onboarding-step,
.bank-choice-card {
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-subtle) 78%, #fff), var(--surface));
  box-shadow: 0 10px 24px rgba(7, 29, 53, .05);
}

.today-action:hover,
.workflow-step:hover,
.bank-choice-card:hover {
  border-color: color-mix(in srgb, var(--ems-blue) 28%, var(--border));
  box-shadow: 0 16px 36px rgba(7, 29, 53, .1);
}

.bank-choice-input:checked + .bank-choice-card,
.bank-onboarding-step.is-active {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--border));
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .14), transparent 8rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--ems-sky)), var(--surface));
}

.cashflow-table thead th {
  color: var(--ems-ink);
  background: color-mix(in srgb, var(--ems-sky) 64%, var(--surface));
}

.cashflow-table .fc-total-row,
.cashflow-table .fc-net-row,
.cashflow-table .fc-balance-row {
  background: color-mix(in srgb, var(--ems-sky) 50%, var(--surface));
}

.mobile-nav {
  border-top-color: color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.mobile-nav a.active,
.mobile-nav button.active {
  color: var(--brand);
}

/* ============================================================
   Mis Gastos v31 — decisión diaria, informes y suscripciones 2.0
   ============================================================ */

.dashboard-heading-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dashboard-customizer {
  padding: 1.1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.dashboard-customizer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--ems-blue), var(--brand), var(--accent));
}

.dashboard-customizer h2,
.spendable-card h2,
.review-inbox-card h2,
.financial-calendar-card h2,
.review-command h2,
.monthly-report-card h2,
.cashflow-command h2,
.rule-command h2 {
  margin: .1rem 0 .35rem;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 900;
  letter-spacing: -.04em;
}

.dashboard-customizer p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.dashboard-toggle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(8rem, 1fr));
  gap: .55rem;
}

.dashboard-toggle-grid label {
  display: flex;
  gap: .45rem;
  align-items: center;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: color-mix(in srgb, var(--surface-subtle) 78%, var(--surface));
  font-size: .78rem;
  font-weight: 800;
  color: var(--text);
}

.dashboard-toggle-grid input {
  accent-color: var(--brand);
}

.monthly-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 1rem;
}

.spendable-card {
  padding: clamp(1.15rem, 3vw, 1.65rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, .36fr);
  gap: 1.25rem;
  overflow: hidden;
  position: relative;
  border-left: 5px solid var(--brand);
}

.spendable-card::before {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  right: -8rem;
  top: -10rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--brand-rgb), .16), transparent 66%);
  pointer-events: none;
}

.spendable-card.warning { border-left-color: var(--warning); }
.spendable-card.danger { border-left-color: var(--gasto); }

.spendable-copy p {
  margin: 0 0 1rem;
  color: var(--muted);
}

.spendable-amount {
  font-size: clamp(2rem, 5vw, 3.45rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.075em;
}

.spendable-progress {
  height: .75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 64%, transparent);
  overflow: hidden;
  margin: 1rem 0 .55rem;
}

.spendable-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--ems-blue)));
}

.spendable-progress span.warning { background: linear-gradient(90deg, #f59e0b, #d97706); }
.spendable-progress span.danger { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.mini-icon.info { color: var(--ems-blue); background: color-mix(in srgb, var(--ems-blue) 12%, transparent); }

.spendable-copy > small {
  color: var(--muted);
  font-weight: 750;
}

.spendable-side {
  display: grid;
  gap: .7rem;
  align-content: center;
}

.spendable-side > div,
.review-plan-metrics > div {
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-subtle) 82%, var(--surface));
}

.spendable-side small,
.review-plan-metrics small {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.spendable-side strong,
.review-plan-metrics strong {
  display: block;
  margin-top: .18rem;
  font-size: 1.02rem;
  letter-spacing: -.04em;
  color: var(--ems-ink);
}

.monthly-report-mini {
  padding: 1.1rem;
}

.monthly-report-mini > strong {
  display: block;
  font-size: 1.15rem;
  letter-spacing: -.04em;
  margin-bottom: .65rem;
  color: var(--ems-ink);
}

.monthly-report-mini ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: .86rem;
}

.monthly-report-mini li + li {
  margin-top: .42rem;
}

.review-inbox-card,
.financial-calendar-card,
.review-panel {
  padding: 1.05rem;
}

.review-inbox-list,
.financial-calendar-list,
.review-task-list,
.review-movement-list,
.review-duplicate-list,
.rule-suggestion-list {
  display: grid;
  gap: .7rem;
}

.review-inbox-item,
.financial-calendar-item,
.review-task-card,
.review-movement-item,
.review-duplicate-item,
.rule-suggestion-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-subtle) 78%, var(--surface));
  color: var(--text);
  text-decoration: none;
}

.review-inbox-item:hover,
.financial-calendar-item:hover,
.review-task-card:hover,
.review-movement-item:hover,
.review-duplicate-item:hover,
.rule-suggestion-card:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--ems-blue) 28%, var(--border));
  box-shadow: 0 14px 32px rgba(7, 29, 53, .08);
  transform: translateY(-1px);
}

.review-inbox-item strong,
.financial-calendar-item strong,
.review-task-card strong,
.review-movement-item strong,
.review-duplicate-item strong,
.rule-suggestion-card strong {
  display: block;
  font-size: .9rem;
  color: var(--ems-ink);
  line-height: 1.2;
}

.review-inbox-item small,
.financial-calendar-item small,
.review-task-card small,
.review-movement-item small,
.review-duplicate-item small,
.rule-suggestion-card small {
  display: block;
  margin-top: .2rem;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.35;
}

.review-inbox-item em,
.financial-calendar-item em,
.review-task-count,
.review-movement-item em,
.review-duplicate-item em {
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.review-inbox-item.danger,
.review-task-card.danger {
  border-color: color-mix(in srgb, var(--gasto) 24%, var(--border));
}

.review-inbox-item.warning,
.review-task-card.warning {
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
}

.calendar-day {
  width: 3rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: .95rem;
  background: color-mix(in srgb, var(--ems-sky) 72%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ems-blue) 16%, var(--border));
}

.calendar-day strong {
  font-size: 1.05rem;
  line-height: 1;
}

.calendar-day small {
  margin: -.25rem 0 0;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.financial-calendar-item.ingreso em { color: var(--ingreso); }
.financial-calendar-item.gasto em { color: var(--gasto); }

.financial-calendar-list.compact {
  grid-template-columns: repeat(5, minmax(12rem, 1fr));
  overflow-x: auto;
  padding-bottom: .25rem;
}

.financial-calendar-list.compact .financial-calendar-item {
  min-width: 12rem;
}

.review-command,
.cashflow-command,
.rule-command,
.monthly-report-card {
  padding: clamp(1.15rem, 3vw, 1.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr);
  gap: 1.25rem;
  align-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .14), transparent 14rem),
    radial-gradient(circle at 0% 100%, rgba(20, 104, 184, .08), transparent 18rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, var(--ems-sky)), var(--surface));
}

.review-command::before,
.cashflow-command::before,
.rule-command::before,
.monthly-report-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--ems-blue), var(--brand), var(--accent));
}

.review-command p,
.cashflow-command p,
.rule-command p,
.monthly-report-card p {
  margin: 0;
  color: var(--muted);
}

.review-command-score {
  padding: 1rem;
  border-radius: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border));
  background: color-mix(in srgb, var(--brand-light) 48%, var(--surface));
}

.review-command-score.warning {
  border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}

.review-command-score.danger {
  border-color: color-mix(in srgb, var(--gasto) 24%, var(--border));
  background: color-mix(in srgb, var(--gasto) 8%, var(--surface));
}

.review-command-score small,
.review-command-score span {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.review-command-score strong {
  display: block;
  margin: .2rem 0;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  letter-spacing: -.07em;
}

.review-routine-grid,
.cashflow-command-grid,
.rule-command-stats,
.subscription-insight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

.review-routine-step,
.cashflow-command-grid > div,
.rule-command-stats > div,
.subscription-insight-card {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  background: color-mix(in srgb, var(--surface-subtle) 82%, var(--surface));
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(7, 29, 53, .055);
}

.review-routine-step {
  display: grid;
  gap: .35rem;
}

.review-routine-step span {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: .75rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font-weight: 950;
}

.review-routine-step strong,
.cashflow-command-grid strong,
.rule-command-stats strong,
.subscription-insight-card strong {
  display: block;
  color: var(--ems-ink);
  font-size: 1rem;
  letter-spacing: -.035em;
}

.review-routine-step small,
.cashflow-command-grid small,
.rule-command-stats small,
.subscription-insight-card small,
.subscription-insight-card p {
  display: block;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.35;
}

.review-routine-step:hover {
  color: var(--text);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
}

.review-plan-box {
  padding: 1rem;
  border-radius: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border));
  background: color-mix(in srgb, var(--brand-light) 42%, var(--surface));
}

.review-plan-box.warning {
  border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}

.review-plan-box.danger {
  border-color: color-mix(in srgb, var(--gasto) 24%, var(--border));
  background: color-mix(in srgb, var(--gasto) 8%, var(--surface));
}

.review-plan-box > span,
.review-plan-box > small {
  display: block;
  color: var(--muted);
  font-size: .78rem;
}

.review-plan-box > strong {
  display: block;
  margin-top: .2rem;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  letter-spacing: -.07em;
}

.review-plan-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin-top: .75rem;
}

.review-duplicate-item {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.rule-suggestion-card {
  width: 100%;
  text-align: left;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.rule-suggestion-card .btn {
  white-space: nowrap;
}

.monthly-report-card {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
}

.monthly-report-lines {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
}

.monthly-report-lines > div {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  padding: .65rem .75rem;
  border-radius: .9rem;
  background: color-mix(in srgb, var(--surface-subtle) 78%, var(--surface));
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .88rem;
}

.monthly-report-lines i {
  color: var(--brand);
}

.monthly-report-note {
  display: grid;
  gap: .75rem;
  justify-items: stretch;
}

.report-paper {
  margin: 0;
  min-height: 11rem;
  white-space: pre-wrap;
  padding: 1rem;
  border-radius: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--ems-blue) 18%, var(--border));
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.92)),
    repeating-linear-gradient(to bottom, transparent 0 1.55rem, rgba(20, 104, 184, .08) 1.55rem 1.6rem);
  color: var(--ems-ink);
  font: 750 .84rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cashflow-command-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cashflow-command-grid > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .7rem;
  align-items: center;
}

.cashflow-command-grid > div small,
.cashflow-command-grid > div strong {
  grid-column: 2;
}

.cashflow-command-grid .mini-icon {
  grid-row: 1 / span 2;
}

.rule-command-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rule-command-stats > div {
  text-align: center;
}

.subscription-insight-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.subscription-insight-card {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}

.subscription-insight-card p {
  margin: .2rem 0 0;
}

.service-mercadolibre { background: linear-gradient(135deg, #fff159, #3483fa); color: #17315c; }
.service-uber { background: linear-gradient(135deg, #000, #333); }
.service-cabify { background: linear-gradient(135deg, #5b21b6, #111827); }
.service-rappi { background: linear-gradient(135deg, #ff441f, #ff7a00); }
.service-pedidosya { background: linear-gradient(135deg, #e60012, #ff6b6b); }
.service-entel { background: linear-gradient(135deg, #005baa, #00a6e8); }
.service-movistar { background: linear-gradient(135deg, #00a9e0, #5cc500); }
.service-wom { background: linear-gradient(135deg, #7f1dff, #ff2bbb); }
.service-claro { background: linear-gradient(135deg, #d60000, #f97316); }
.service-vtr { background: linear-gradient(135deg, #ef4444, #111827); }
.service-slack { background: conic-gradient(from 45deg, #36c5f0, #2eb67d, #ecb22e, #e01e5a, #36c5f0); }
.service-linkedin { background: linear-gradient(135deg, #0a66c2, #004182); }

[data-theme="dark"] .dashboard-toggle-grid label,
[data-theme="dark"] .spendable-side > div,
[data-theme="dark"] .review-plan-metrics > div,
[data-theme="dark"] .review-inbox-item,
[data-theme="dark"] .financial-calendar-item,
[data-theme="dark"] .review-task-card,
[data-theme="dark"] .review-movement-item,
[data-theme="dark"] .review-duplicate-item,
[data-theme="dark"] .rule-suggestion-card,
[data-theme="dark"] .review-routine-step,
[data-theme="dark"] .cashflow-command-grid > div,
[data-theme="dark"] .rule-command-stats > div,
[data-theme="dark"] .subscription-insight-card,
[data-theme="dark"] .monthly-report-lines > div {
  background: color-mix(in srgb, var(--surface-subtle) 68%, #020617);
}

[data-theme="dark"] .report-paper {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(17, 24, 39, .92)),
    repeating-linear-gradient(to bottom, transparent 0 1.55rem, rgba(125, 211, 252, .08) 1.55rem 1.6rem);
  color: color-mix(in srgb, var(--text) 92%, #fff);
}

@media (max-width: 1199.98px) {
  .monthly-plan-grid,
  .spendable-card,
  .review-command,
  .cashflow-command,
  .rule-command,
  .monthly-report-card {
    grid-template-columns: 1fr;
  }

  .dashboard-toggle-grid,
  .review-routine-grid,
  .subscription-insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .dashboard-heading-actions {
    justify-content: stretch;
    width: 100%;
  }

  .dashboard-heading-actions .btn,
  .dashboard-heading-actions form {
    width: 100%;
  }

  .dashboard-heading-actions form {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-customizer {
    grid-template-columns: 1fr;
  }

  .dashboard-toggle-grid,
  .review-routine-grid,
  .cashflow-command-grid,
  .rule-command-stats,
  .subscription-insight-grid,
  .review-plan-metrics {
    grid-template-columns: 1fr;
  }

  .spendable-card {
    padding: 1rem;
  }

  .review-inbox-item,
  .financial-calendar-item,
  .review-task-card,
  .review-movement-item,
  .review-duplicate-item,
  .rule-suggestion-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .review-inbox-item em,
  .financial-calendar-item em,
  .review-task-count,
  .review-movement-item em,
  .review-duplicate-item em,
  .rule-suggestion-card .btn {
    grid-column: 2;
    justify-self: start;
  }
}

/* ============================================================
   Mis Gastos v33 — radar financiero y experiencia guiada
   ============================================================ */
.radar-hero,
.radar-dashboard-card,
.radar-report-strip,
.import-coach {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--brand-light) 42%, var(--surface)), var(--surface));
}

.radar-hero::after,
.radar-dashboard-card::after,
.import-coach::after {
  content: "";
  position: absolute;
  inset: auto -5rem -6rem auto;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ems-blue, var(--brand)) 10%, transparent);
  pointer-events: none;
}

.radar-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(1rem, 3vw, 1.6rem);
}

.radar-dashboard-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, .34fr);
  align-items: center;
  gap: 1.2rem;
  padding: clamp(1rem, 2.6vw, 1.45rem);
}

.radar-score-ring {
  position: relative;
  width: 7.35rem;
  height: 7.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(var(--brand) var(--score), color-mix(in srgb, var(--brand) 10%, var(--border)) 0);
  box-shadow: var(--shadow);
}

.radar-hero.warning .radar-score-ring,
.radar-dashboard-card.warning .radar-score-ring {
  background: conic-gradient(var(--warning) var(--score), color-mix(in srgb, var(--warning) 10%, var(--border)) 0);
}

.radar-hero.danger .radar-score-ring,
.radar-dashboard-card.danger .radar-score-ring {
  background: conic-gradient(var(--gasto) var(--score), color-mix(in srgb, var(--gasto) 10%, var(--border)) 0);
}

.radar-score-ring::before {
  content: "";
  position: absolute;
  inset: .58rem;
  border-radius: inherit;
  background: var(--surface);
}

.radar-score-ring strong,
.radar-score-ring span {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}

.radar-score-ring strong {
  font-size: 1.9rem;
  line-height: .96;
  letter-spacing: -.07em;
}

.radar-score-ring span {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.radar-hero-copy h2,
.radar-dashboard-copy h2,
.radar-report-head h2,
.import-coach-copy h2 {
  margin: 0 0 .35rem;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.05;
  letter-spacing: -.055em;
}

.radar-hero-copy p,
.radar-dashboard-copy p,
.radar-report-head p,
.import-coach-copy p {
  margin: 0;
  color: var(--muted);
  max-width: 64ch;
}

.radar-hero-meta,
.radar-dashboard-signals {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .95rem;
}

.radar-hero-meta span,
.radar-dashboard-signals a {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 2rem;
  padding: .34rem .62rem;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 76%, var(--surface-subtle));
  font-size: .74rem;
  font-weight: 780;
  text-decoration: none;
}

.radar-dashboard-signals a.warning,
.radar-dashboard-signals a.warning i { color: var(--warning); }
.radar-dashboard-signals a.danger,
.radar-dashboard-signals a.danger i { color: var(--gasto); }
.radar-dashboard-signals a.success,
.radar-dashboard-signals a.success i { color: var(--brand); }

.radar-hero-actions,
.radar-dashboard-side {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .62rem;
}

.radar-dashboard-side > div {
  padding: .72rem .82rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  background: rgba(255,255,255,.55);
}

.radar-dashboard-side small,
.radar-kpi-card small,
.radar-signal-card small,
.radar-change-list small,
.radar-unusual-list small,
.import-coach-grid small {
  display: block;
  color: var(--muted);
  line-height: 1.38;
}

.radar-dashboard-side strong {
  display: block;
  margin-top: .12rem;
}

.radar-signal-grid,
.radar-kpi-grid,
.radar-report-grid,
.import-coach-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}

.radar-signal-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radar-signal-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .78rem;
  align-items: flex-start;
  padding: 1rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 1.18rem;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.radar-signal-card:hover {
  transform: translateY(-2px);
  color: var(--text);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--brand) 26%, var(--border));
}

.radar-signal-card > em {
  grid-column: 2;
  color: var(--brand);
  font-style: normal;
  font-size: .72rem;
  font-weight: 900;
}

.radar-signal-card.warning {
  border-color: color-mix(in srgb, var(--warning) 24%, var(--border));
}

.radar-signal-card.danger {
  border-color: color-mix(in srgb, var(--gasto) 24%, var(--border));
}

.radar-kpi-card,
.radar-report-grid > div {
  padding: 1rem;
  border-radius: 1.12rem;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.radar-kpi-card strong,
.radar-report-grid strong {
  display: block;
  margin: .25rem 0;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  letter-spacing: -.045em;
}

.radar-kpi-card span {
  color: var(--muted);
  font-size: .78rem;
}

.radar-change-list,
.radar-unusual-list {
  display: grid;
  gap: .65rem;
}

.radar-change-list a,
.radar-unusual-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .72rem;
  padding: .78rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-subtle) 74%, var(--surface));
}

.radar-change-list a:hover,
.radar-unusual-list a:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 22%, var(--border));
}

.radar-change-list em,
.radar-unusual-list em {
  color: var(--gasto);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.radar-change-list.is-good em {
  color: var(--brand);
}

.radar-report-strip {
  padding: 1rem;
}

.radar-report-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.import-coach {
  display: grid;
  grid-template-columns: minmax(0, .52fr) minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1rem, 2.6vw, 1.4rem);
}

.import-coach-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.import-coach-grid a {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .35rem;
  padding: .9rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-subtle) 74%, var(--surface));
}

.import-coach-grid a i {
  color: var(--warning);
  font-size: 1.25rem;
}

.import-coach-grid a.is-ready i {
  color: var(--brand);
}

.import-coach-next {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  color: var(--brand);
  font-weight: 850;
  text-decoration: none;
}

.cashflow-table-wrap {
  border-radius: 1.15rem;
}

.cashflow-table {
  font-variant-numeric: tabular-nums;
}

.cashflow-table .fc-money {
  min-width: 4.7rem;
}

[data-theme="dark"] .radar-dashboard-side > div,
[data-theme="dark"] .radar-hero-meta span,
[data-theme="dark"] .radar-dashboard-signals a,
[data-theme="dark"] .radar-signal-card,
[data-theme="dark"] .radar-kpi-card,
[data-theme="dark"] .radar-report-grid > div,
[data-theme="dark"] .radar-change-list a,
[data-theme="dark"] .radar-unusual-list a,
[data-theme="dark"] .import-coach-grid a {
  background: color-mix(in srgb, var(--surface-subtle) 68%, #020617);
}

@media (max-width: 1199.98px) {
  .radar-hero,
  .radar-dashboard-card,
  .import-coach {
    grid-template-columns: 1fr;
  }

  .radar-signal-grid,
  .radar-kpi-grid,
  .radar-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .radar-hero,
  .radar-dashboard-card,
  .radar-report-head {
    align-items: stretch;
  }

  .radar-report-head {
    flex-direction: column;
  }

  .radar-score-ring {
    width: 6.4rem;
    height: 6.4rem;
  }

  .radar-signal-grid,
  .radar-signal-grid.compact,
  .radar-kpi-grid,
  .radar-report-grid,
  .import-coach,
  .import-coach-grid {
    grid-template-columns: 1fr;
  }

  .radar-change-list a,
  .radar-unusual-list a {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .radar-change-list em,
  .radar-unusual-list em {
    grid-column: 2;
    justify-self: start;
  }

  .transaction-list-card {
    padding: .85rem !important;
  }

  .movement-item {
    border-radius: 1.05rem;
  }

  .movement-side {
    align-items: flex-start;
  }

  .movement-actions {
    justify-content: flex-start;
  }

  .cashflow-table-wrap {
    margin-inline: -.75rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .cashflow-table th,
  .cashflow-table td {
    padding-inline: .55rem;
  }
}

/* ============================================================
   Mis Gastos v34 — estabilidad visual y carga inmediata
   ============================================================ */
.ui-ready .app-container > .page-heading,
.ui-ready .app-container > .card,
.ui-ready .app-container > .row,
.ui-ready .transaction-summary-card,
.ui-ready .metric-card,
.ui-ready .movement-item,
.ui-ready .cashflow-month-card,
.ui-ready .cashflow-chart-card,
.ui-ready .cashflow-card,
.ui-ready .subscription-hero,
.ui-ready .subscription-stat,
.ui-ready .subscription-card,
.ui-ready .subscription-candidate-card,
.ui-ready .service-catalog-item,
.ui-ready .quick-subscription-form,
.ui-ready .upcoming-subscription-item,
.ui-ready .bank-hero,
.ui-ready .bank-provider-card,
.ui-ready .bank-connection-card,
.ui-ready .bank-step,
.ui-ready .bank-supported-item,
.ui-ready .bank-sync-item,
.ui-ready .today-guide,
.ui-ready .today-action,
.ui-ready .workflow-step,
.ui-ready .insight-command,
.ui-ready .insight-command-item,
.ui-ready .bank-onboarding,
.ui-ready .bank-onboarding-step,
.ui-ready .bank-choice-card,
.ui-ready .spendable-card,
.ui-ready .monthly-report-mini,
.ui-ready .review-inbox-card,
.ui-ready .financial-calendar-card,
.ui-ready .review-command,
.ui-ready .review-routine-step,
.ui-ready .review-panel,
.ui-ready .monthly-report-card,
.ui-ready .cashflow-command,
.ui-ready .rule-command,
.ui-ready .subscription-insight-card,
.ui-ready .setup-progress-card,
.ui-ready .setup-step-card,
.ui-ready .onboarding-track-card,
.ui-ready .print-report-card,
.ui-ready .maintenance-step-card,
.ui-ready .radar-hero,
.ui-ready .radar-dashboard-card,
.ui-ready .radar-signal-card,
.ui-ready .radar-kpi-card,
.ui-ready .import-coach {
  animation: none !important;
  opacity: 1 !important;
}

.app-container > .page-heading,
.app-container > .card,
.app-container > .row,
.transaction-summary-card,
.metric-card,
.movement-item,
.cashflow-month-card,
.cashflow-chart-card,
.cashflow-card,
.radar-hero,
.radar-dashboard-card,
.radar-signal-card,
.radar-kpi-card,
.import-coach {
  opacity: 1;
}

.radar-hero,
.cashflow-command,
.insight-command,
.today-guide {
  border-top-width: 4px;
  box-shadow:
    0 18px 44px rgba(12, 39, 29, .09),
    0 1px 0 rgba(255,255,255,.82) inset;
}

.radar-dashboard-card {
  min-height: 0;
  padding-block: clamp(1.1rem, 2.3vw, 1.7rem);
}

.radar-dashboard-card .radar-score-ring {
  box-shadow: 0 14px 30px rgba(12, 39, 29, .10);
}

.transaction-summary-card {
  min-height: 142px;
}

.transaction-list-card {
  overflow: hidden;
}

.movement-item {
  border-left-width: 5px;
}

.cashflow-table-wrap {
  border-radius: 1.2rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.26)),
    color-mix(in srgb, var(--surface-subtle) 78%, #fff);
}

.cashflow-table {
  min-width: 1120px;
}

.cashflow-table th,
.cashflow-table td {
  vertical-align: middle;
}

.cashflow-table th:first-child,
.cashflow-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--surface) 96%, #fff);
}

.cashflow-table thead th:first-child {
  z-index: 3;
}

@media (max-width: 767.98px) {
  .page-heading {
    gap: .35rem;
  }

  .radar-hero,
  .cashflow-command,
  .insight-command,
  .today-guide,
  .radar-dashboard-card {
    border-radius: 1.35rem;
  }

  .transaction-summary-card {
    min-height: 128px;
    text-align: center;
  }

  .movement-item {
    border-left-width: 4px;
  }

  .cashflow-table-wrap {
    margin-inline: -.35rem;
    border-radius: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cashflow-table th:first-child,
  .cashflow-table td:first-child {
    min-width: 156px;
    box-shadow: 12px 0 18px rgba(12, 39, 29, .06);
  }
}

/* ============================================================
   Mis Gastos v35 — laboratorio de hábitos
   ============================================================ */
.habit-lab {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.35rem);
  background:
    radial-gradient(circle at 4% 6%, rgba(var(--brand-rgb), .13), transparent 15rem),
    radial-gradient(circle at 96% 0%, rgba(212, 151, 49, .13), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 95%, #fff), color-mix(in srgb, var(--surface-subtle) 88%, #fff));
}

.habit-lab::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -7rem;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .08);
  pointer-events: none;
}

.habit-lab-head,
.habit-lab-grid,
.habit-panel,
.habit-print-grid,
.habit-print-list {
  position: relative;
  z-index: 1;
}

.habit-lab-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .34fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

.habit-lab-head h2 {
  margin: .2rem 0 .35rem;
  color: var(--text);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: -.04em;
}

.habit-lab-head p {
  max-width: 64rem;
  color: var(--text-muted);
  margin: 0;
}

.habit-save-card,
.habit-print-grid > div {
  display: grid;
  align-content: center;
  gap: .25rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
  border-radius: 1.05rem;
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 32px rgba(12, 39, 29, .07);
}

.habit-save-card small,
.habit-print-grid small {
  color: var(--text-muted);
  font-weight: 760;
}

.habit-save-card strong,
.habit-print-grid strong {
  color: var(--brand);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  letter-spacing: -.035em;
}

.habit-save-card span,
.habit-print-grid span {
  color: var(--text-muted);
  font-size: .86rem;
}

.habit-lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr);
  gap: 1rem;
}

.habit-panel {
  padding: clamp(.9rem, 1.8vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 1.2rem;
  background: color-mix(in srgb, var(--surface) 93%, #fff);
  box-shadow: 0 12px 28px rgba(12, 39, 29, .055);
}

.habit-list,
.weekly-pulse-list,
.habit-print-list {
  display: grid;
  gap: .65rem;
}

.habit-list a,
.habit-print-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .78rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 1rem;
  background: rgba(255,255,255,.76);
  color: var(--text);
  text-decoration: none;
}

.habit-list a:hover {
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  box-shadow: 0 14px 30px rgba(12, 39, 29, .08);
  transform: translateY(-1px);
}

.habit-list strong,
.habit-print-list strong {
  display: block;
  line-height: 1.2;
}

.habit-list small,
.habit-print-list small {
  display: block;
  color: var(--text-muted);
  font-size: .8rem;
  margin-top: .18rem;
}

.habit-list em,
.habit-print-list em {
  color: var(--gasto);
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.weekly-pulse-row {
  display: grid;
  grid-template-columns: 6.8rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .65rem .2rem;
}

.weekly-pulse-row + .weekly-pulse-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.weekly-pulse-row strong {
  display: block;
}

.weekly-pulse-row small {
  color: var(--text-muted);
  font-size: .78rem;
}

.weekly-pulse-row em {
  font-style: normal;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.weekly-pulse-bar {
  position: relative;
  height: .62rem;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--brand-light) 48%, #eef4f1);
}

.weekly-pulse-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.weekly-pulse-row.is-peak .weekly-pulse-bar i {
  background: linear-gradient(90deg, #d49731, var(--brand));
}

.habit-tip {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin: .95rem 0 0;
  padding: .78rem .85rem;
  border-radius: 1rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--brand-light) 54%, #fff);
}

.habit-tip i {
  color: var(--brand);
  margin-top: .15rem;
}

.habit-print-panel {
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb), .055), rgba(212,151,49,.055)),
    var(--surface);
}

.habit-print-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: .95rem;
}

[data-theme="dark"] .habit-save-card,
[data-theme="dark"] .habit-panel,
[data-theme="dark"] .habit-list a,
[data-theme="dark"] .habit-print-grid > div,
[data-theme="dark"] .habit-print-list > div {
  background: color-mix(in srgb, var(--surface-subtle) 70%, #020617);
}

@media (max-width: 991.98px) {
  .habit-lab-head,
  .habit-lab-grid,
  .habit-print-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .habit-list a,
  .habit-print-list > div,
  .weekly-pulse-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .habit-list em,
  .habit-print-list em,
  .weekly-pulse-row em {
    grid-column: 2;
    justify-self: start;
  }

  .weekly-pulse-bar {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   Mis Gastos v36 — plan de acción priorizado
   ============================================================ */
.action-plan-card,
.action-plan-strip {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.35rem);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .14), transparent 14rem),
    radial-gradient(circle at 100% 20%, rgba(212, 151, 49, .12), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, #fff), color-mix(in srgb, var(--surface-subtle) 92%, #fff));
}

.action-plan-card::after,
.action-plan-strip::after {
  content: "";
  position: absolute;
  inset: auto -4rem -6rem auto;
  width: 17rem;
  height: 17rem;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .075);
  pointer-events: none;
}

.action-plan-card.warning,
.action-plan-strip.warning {
  background:
    radial-gradient(circle at 0% 0%, rgba(212, 151, 49, .16), transparent 14rem),
    radial-gradient(circle at 100% 20%, rgba(var(--brand-rgb), .1), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 95%, #fff), color-mix(in srgb, #fff8ea 38%, var(--surface)));
}

.action-plan-card.danger,
.action-plan-strip.danger {
  background:
    radial-gradient(circle at 0% 0%, rgba(214, 83, 83, .16), transparent 14rem),
    radial-gradient(circle at 100% 20%, rgba(212, 151, 49, .11), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 95%, #fff), color-mix(in srgb, #fff1f1 36%, var(--surface)));
}

.action-plan-head,
.action-plan-strip-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, .26fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

.action-plan-head h2,
.action-plan-strip-head h2 {
  margin: .18rem 0 .35rem;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  letter-spacing: -.04em;
}

.action-plan-head p,
.action-plan-strip-head p {
  color: var(--text-muted);
  margin: 0;
  max-width: 58rem;
}

.action-plan-impact {
  display: grid;
  align-content: center;
  gap: .2rem;
  padding: .95rem 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 15%, var(--border));
  border-radius: 1.05rem;
  background: rgba(255,255,255,.76);
  box-shadow: 0 14px 30px rgba(12, 39, 29, .065);
}

.action-plan-impact.compact {
  min-width: 12rem;
}

.action-plan-impact small {
  color: var(--text-muted);
  font-weight: 780;
}

.action-plan-impact strong {
  color: var(--brand);
  font-size: clamp(1.18rem, 2vw, 1.65rem);
  letter-spacing: -.035em;
}

.action-plan-steps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .72rem;
}

.action-plan-steps.compact {
  gap: .62rem;
}

.action-plan-step {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) minmax(8rem, auto) auto;
  gap: .75rem;
  align-items: center;
  padding: .82rem .88rem;
  color: var(--text);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 1rem;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 28px rgba(12, 39, 29, .052);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.action-plan-step:hover {
  color: var(--text);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  box-shadow: 0 16px 34px rgba(12, 39, 29, .08);
}

.action-plan-number {
  display: grid;
  place-items: center;
  width: 2.05rem;
  height: 2.05rem;
  border-radius: .75rem;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand-light) 58%, #fff);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.action-plan-step.warning .action-plan-number {
  color: #9b6a05;
  background: rgba(212, 151, 49, .14);
}

.action-plan-step.danger .action-plan-number {
  color: var(--gasto);
  background: rgba(214, 83, 83, .12);
}

.action-plan-copy strong {
  display: block;
  line-height: 1.15;
}

.action-plan-copy small {
  display: block;
  margin-top: .18rem;
  color: var(--text-muted);
  font-size: .82rem;
}

.action-plan-metric {
  display: grid;
  justify-items: end;
  line-height: 1.1;
}

.action-plan-metric small {
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.action-plan-metric strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.action-plan-step em,
.report-action-list a em {
  color: var(--brand);
  font-style: normal;
  font-size: .78rem;
  font-weight: 850;
  white-space: nowrap;
}

.action-plan-step.warning em,
.action-plan-step.warning .action-plan-metric strong {
  color: #9b6a05;
}

.action-plan-step.danger em,
.action-plan-step.danger .action-plan-metric strong {
  color: var(--gasto);
}

.report-action-list a {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

[data-theme="dark"] .action-plan-card,
[data-theme="dark"] .action-plan-strip {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .16), transparent 14rem),
    radial-gradient(circle at 100% 20%, rgba(212, 151, 49, .1), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #020617), color-mix(in srgb, var(--surface-subtle) 82%, #020617));
}

[data-theme="dark"] .action-plan-impact,
[data-theme="dark"] .action-plan-step {
  background: color-mix(in srgb, var(--surface-subtle) 70%, #020617);
}

@media (max-width: 991.98px) {
  .action-plan-head,
  .action-plan-strip-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .action-plan-step {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .action-plan-metric,
  .action-plan-step em {
    grid-column: 3;
    justify-self: start;
  }

  .action-plan-metric {
    justify-items: start;
  }
}

@media (max-width: 575.98px) {
  .action-plan-card,
  .action-plan-strip {
    padding: .95rem;
    border-radius: 1.15rem;
  }

  .action-plan-step {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .action-plan-number {
    display: none;
  }

  .action-plan-metric,
  .action-plan-step em {
    grid-column: 2;
  }
}

/* ============================================================
   Mis Gastos v37 — mapa visual del mes
   ============================================================ */
.month-heatmap-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.35rem);
  background:
    radial-gradient(circle at 4% 0%, rgba(var(--brand-rgb), .14), transparent 14rem),
    radial-gradient(circle at 96% 12%, rgba(212, 151, 49, .12), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, #fff), color-mix(in srgb, var(--surface-subtle) 88%, #fff));
}

.month-heatmap-card::after {
  content: "";
  position: absolute;
  right: -6rem;
  bottom: -8rem;
  width: 19rem;
  height: 19rem;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .07);
  pointer-events: none;
}

.month-heatmap-head,
.month-heatmap-grid,
.month-heatmap-panel,
.month-heatmap-impact,
.month-heatmap-print-panel {
  position: relative;
  z-index: 1;
}

.month-heatmap-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .34fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

.month-heatmap-head h2 {
  margin: .2rem 0 .35rem;
  color: var(--text);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: -.045em;
}

.month-heatmap-head p {
  margin: 0;
  max-width: 62rem;
  color: var(--text-muted);
}

.month-heatmap-impact,
.month-heatmap-print-grid > div {
  display: grid;
  align-content: center;
  gap: .25rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 15%, var(--border));
  border-radius: 1.05rem;
  background: rgba(255,255,255,.76);
  box-shadow: 0 14px 32px rgba(12, 39, 29, .065);
}

.month-heatmap-impact small,
.month-heatmap-print-grid small {
  color: var(--text-muted);
  font-weight: 780;
}

.month-heatmap-impact strong,
.month-heatmap-print-grid strong {
  color: var(--brand);
  font-size: clamp(1.2rem, 2.2vw, 1.85rem);
  letter-spacing: -.04em;
}

.month-heatmap-impact span,
.month-heatmap-print-grid span {
  color: var(--text-muted);
  font-size: .86rem;
}

.month-heatmap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr);
  gap: 1rem;
}

.month-heatmap-panel {
  padding: clamp(.9rem, 1.8vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 1.2rem;
  background: color-mix(in srgb, var(--surface) 93%, #fff);
  box-shadow: 0 12px 28px rgba(12, 39, 29, .055);
}

.month-heatmap-panel.emphasis {
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb), .06), rgba(212, 151, 49, .055)),
    color-mix(in srgb, var(--surface) 93%, #fff);
}

.heatmap-calendar {
  display: grid;
  gap: .45rem;
}

.heatmap-weekdays,
.heatmap-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .42rem;
}

.heatmap-weekdays span {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.heatmap-weeks {
  display: grid;
  gap: .42rem;
}

.heatmap-day {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: 4.85rem;
  padding: .55rem;
  color: var(--text);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: .9rem;
  background: rgba(255,255,255,.72);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.heatmap-day::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  width: var(--heat, 0%);
  height: .23rem;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, var(--brand), #d49731);
}

.heatmap-day:hover {
  color: var(--text);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
  box-shadow: 0 16px 30px rgba(12, 39, 29, .085);
}

.heatmap-day strong {
  position: relative;
  z-index: 1;
  font-size: .86rem;
  line-height: 1;
}

.heatmap-day small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: .5rem;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.15;
  word-break: break-word;
}

.heatmap-day.is-empty {
  visibility: hidden;
  pointer-events: none;
}

.heatmap-day.level-0 {
  color: color-mix(in srgb, var(--text-muted) 72%, var(--text));
  background: color-mix(in srgb, var(--surface-subtle) 70%, #fff);
}

.heatmap-day.level-1 {
  background: color-mix(in srgb, var(--brand-light) 54%, #fff);
}

.heatmap-day.level-2 {
  background: color-mix(in srgb, var(--brand-light) 42%, rgba(var(--brand-rgb), .16));
  border-color: color-mix(in srgb, var(--brand) 18%, var(--border));
}

.heatmap-day.level-3 {
  background: linear-gradient(135deg, color-mix(in srgb, rgba(var(--brand-rgb), .22) 58%, #fff), color-mix(in srgb, rgba(212, 151, 49, .18) 46%, #fff));
  border-color: color-mix(in srgb, var(--brand) 26%, var(--border));
}

.heatmap-day.level-4 {
  background:
    radial-gradient(circle at 80% 8%, rgba(255,255,255,.36), transparent 2.4rem),
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 28%, #fff), color-mix(in srgb, #d49731 22%, #fff));
  border-color: color-mix(in srgb, #d49731 40%, var(--brand));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}

.heatmap-day.is-peak {
  outline: 2px solid color-mix(in srgb, #d49731 72%, var(--brand));
  outline-offset: 2px;
}

.heatmap-legend {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .32rem;
  margin-top: .75rem;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 760;
}

.heatmap-legend i {
  width: 1.05rem;
  height: .58rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.heatmap-legend .level-1 { background: color-mix(in srgb, var(--brand-light) 54%, #fff); }
.heatmap-legend .level-2 { background: color-mix(in srgb, var(--brand-light) 42%, rgba(var(--brand-rgb), .16)); }
.heatmap-legend .level-3 { background: color-mix(in srgb, var(--brand) 20%, #fff); }
.heatmap-legend .level-4 { background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 36%, #fff), color-mix(in srgb, #d49731 32%, #fff)); }

.month-heatmap-ranking,
.month-heatmap-print-list {
  display: grid;
  gap: .65rem;
}

.month-heatmap-ranking a,
.month-heatmap-print-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .78rem;
  color: var(--text);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 1rem;
  background: rgba(255,255,255,.76);
}

.month-heatmap-ranking a:hover {
  color: var(--text);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  box-shadow: 0 14px 30px rgba(12, 39, 29, .08);
}

.heatmap-rank {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .75rem;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand-light) 60%, #fff);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.month-heatmap-ranking strong,
.month-heatmap-print-list strong {
  display: block;
  line-height: 1.15;
}

.month-heatmap-ranking small,
.month-heatmap-print-list small {
  display: block;
  color: var(--text-muted);
  font-size: .8rem;
  margin-top: .18rem;
}

.month-heatmap-ranking em,
.month-heatmap-print-list em {
  color: var(--gasto);
  font-style: normal;
  font-weight: 860;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.month-heatmap-tip {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin: .95rem 0 0;
  padding: .78rem .85rem;
  border-radius: 1rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--brand-light) 54%, #fff);
}

.month-heatmap-tip i {
  color: var(--brand);
  margin-top: .15rem;
}

.month-heatmap-print-panel {
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb), .055), rgba(212,151,49,.055)),
    var(--surface);
}

.month-heatmap-print-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: .95rem;
}

[data-theme="dark"] .month-heatmap-card {
  background:
    radial-gradient(circle at 4% 0%, rgba(var(--brand-rgb), .16), transparent 14rem),
    radial-gradient(circle at 96% 12%, rgba(212, 151, 49, .1), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #020617), color-mix(in srgb, var(--surface-subtle) 82%, #020617));
}

[data-theme="dark"] .month-heatmap-impact,
[data-theme="dark"] .month-heatmap-panel,
[data-theme="dark"] .month-heatmap-ranking a,
[data-theme="dark"] .month-heatmap-print-grid > div,
[data-theme="dark"] .month-heatmap-print-list > div,
[data-theme="dark"] .heatmap-day {
  background: color-mix(in srgb, var(--surface-subtle) 70%, #020617);
}

[data-theme="dark"] .heatmap-day.level-1 {
  background: color-mix(in srgb, var(--brand) 12%, #020617);
}

[data-theme="dark"] .heatmap-day.level-2 {
  background: color-mix(in srgb, var(--brand) 18%, #020617);
}

[data-theme="dark"] .heatmap-day.level-3 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 24%, #020617), color-mix(in srgb, #d49731 15%, #020617));
}

[data-theme="dark"] .heatmap-day.level-4 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 36%, #020617), color-mix(in srgb, #d49731 22%, #020617));
}

@media (max-width: 991.98px) {
  .month-heatmap-head,
  .month-heatmap-grid {
    grid-template-columns: 1fr;
  }

  .month-heatmap-print-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .month-heatmap-card {
    padding: .95rem;
    border-radius: 1.15rem;
  }

  .month-heatmap-panel {
    padding: .75rem;
  }

  .heatmap-weekdays,
  .heatmap-week {
    gap: .28rem;
  }

  .heatmap-day {
    min-height: 2.75rem;
    padding: .42rem .28rem;
    border-radius: .72rem;
    text-align: center;
  }

  .heatmap-day small {
    display: none;
  }

  .month-heatmap-ranking a,
  .month-heatmap-print-list > div {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .month-heatmap-ranking em,
  .month-heatmap-print-list em {
    grid-column: 2;
    justify-self: start;
  }
}

@media print {
  .month-heatmap-card,
  .month-heatmap-panel,
  .month-heatmap-impact,
  .month-heatmap-print-panel,
  .month-heatmap-print-grid > div,
  .month-heatmap-ranking a,
  .month-heatmap-print-list > div,
  .heatmap-day {
    background: #fff !important;
    box-shadow: none !important;
  }

  .heatmap-day {
    min-height: 2.4rem;
  }

  .heatmap-day small {
    display: none !important;
  }
}

/* ============================================================
   Mis Gastos v38 — matriz de salud por categoría
   ============================================================ */
.category-health-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.35rem);
  background:
    radial-gradient(circle at 2% 0%, rgba(var(--brand-rgb), .13), transparent 14rem),
    radial-gradient(circle at 96% 12%, rgba(14, 165, 233, .09), transparent 17rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, #fff), color-mix(in srgb, var(--surface-subtle) 90%, #fff));
}

.category-health-card::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -7rem;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .065);
  pointer-events: none;
}

.category-health-head,
.category-health-summary,
.category-health-grid,
.category-health-print-panel {
  position: relative;
  z-index: 1;
}

.category-health-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .34fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

.category-health-head h2 {
  margin: .2rem 0 .35rem;
  color: var(--text);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: -.045em;
}

.category-health-head p {
  margin: 0;
  max-width: 62rem;
  color: var(--text-muted);
}

.category-health-impact,
.category-health-summary > div,
.category-health-print-summary > div {
  display: grid;
  align-content: center;
  gap: .25rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
  border-radius: 1.05rem;
  background: rgba(255,255,255,.76);
  box-shadow: 0 14px 32px rgba(12, 39, 29, .06);
}

.category-health-impact.warning,
.category-health-impact.danger {
  border-color: color-mix(in srgb, var(--warning) 30%, var(--border));
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,248,234,.74));
}

.category-health-impact.danger {
  border-color: color-mix(in srgb, var(--gasto) 30%, var(--border));
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,241,241,.78));
}

.category-health-impact small,
.category-health-summary small,
.category-health-print-summary small {
  color: var(--text-muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.category-health-impact strong,
.category-health-summary strong,
.category-health-print-summary strong {
  color: var(--brand);
  font-size: clamp(1.16rem, 2vw, 1.6rem);
  letter-spacing: -.035em;
}

.category-health-impact.warning strong,
.category-health-item.warning .category-health-metrics strong,
.category-health-print-list > div.warning strong {
  color: #9b6a05;
}

.category-health-impact.danger strong,
.category-health-item.danger .category-health-metrics strong,
.category-health-print-list > div.danger strong {
  color: var(--gasto);
}

.category-health-impact span,
.category-health-print-summary span {
  color: var(--text-muted);
  font-size: .86rem;
}

.category-health-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: .95rem;
}

.category-health-grid {
  display: grid;
  gap: .72rem;
}

.category-health-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(12rem, auto) auto;
  gap: .78rem;
  align-items: center;
  padding: .84rem .9rem;
  color: var(--text);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 1.05rem;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 28px rgba(12, 39, 29, .052);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.category-health-item:hover {
  color: var(--text);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 26%, var(--border));
  box-shadow: 0 16px 34px rgba(12, 39, 29, .08);
}

.category-health-item.warning {
  border-color: color-mix(in srgb, var(--warning) 22%, var(--border));
}

.category-health-item.danger {
  border-color: color-mix(in srgb, var(--gasto) 24%, var(--border));
}

.category-health-copy strong,
.category-health-metrics strong {
  display: block;
  line-height: 1.15;
}

.category-health-copy small,
.category-health-metrics small {
  display: block;
  margin-top: .18rem;
  color: var(--text-muted);
  font-size: .82rem;
}

.category-health-metrics {
  justify-self: end;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.category-health-bar {
  grid-column: 2 / 4;
  height: .48rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-light) 48%, #eef4f1);
}

.category-health-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.category-health-item.warning .category-health-bar i {
  background: linear-gradient(90deg, #f59e0b, #d49731);
}

.category-health-item.danger .category-health-bar i {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
}

.category-health-item em {
  color: var(--brand);
  font-style: normal;
  font-size: .78rem;
  font-weight: 850;
  white-space: nowrap;
}

.category-health-item.warning em {
  color: #9b6a05;
}

.category-health-item.danger em {
  color: var(--gasto);
}

.category-health-print-panel {
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb), .055), rgba(14,165,233,.045)),
    var(--surface);
}

.category-health-print-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: .95rem;
}

.category-health-print-list {
  display: grid;
  gap: .65rem;
}

.category-health-print-list > div {
  display: grid;
  grid-template-columns: minmax(12rem, .8fr) minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .76rem;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 1rem;
  background: rgba(255,255,255,.76);
}

.category-health-print-list small {
  display: block;
  color: var(--text-muted);
  font-size: .8rem;
  margin-top: .18rem;
}

.category-health-print-list em {
  color: var(--gasto);
  font-style: normal;
  font-weight: 860;
  white-space: nowrap;
}

[data-theme="dark"] .category-health-card {
  background:
    radial-gradient(circle at 2% 0%, rgba(var(--brand-rgb), .16), transparent 14rem),
    radial-gradient(circle at 96% 12%, rgba(14, 165, 233, .08), transparent 17rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #020617), color-mix(in srgb, var(--surface-subtle) 82%, #020617));
}

[data-theme="dark"] .category-health-impact,
[data-theme="dark"] .category-health-summary > div,
[data-theme="dark"] .category-health-item,
[data-theme="dark"] .category-health-print-summary > div,
[data-theme="dark"] .category-health-print-list > div {
  background: color-mix(in srgb, var(--surface-subtle) 70%, #020617);
}

@media (max-width: 991.98px) {
  .category-health-head,
  .category-health-summary,
  .category-health-print-summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .category-health-item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .category-health-metrics,
  .category-health-bar,
  .category-health-item em {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .category-health-bar {
    width: 100%;
  }

  .category-health-print-list > div {
    grid-template-columns: 1fr;
  }
}

@media print {
  .category-health-card,
  .category-health-impact,
  .category-health-summary > div,
  .category-health-item,
  .category-health-print-panel,
  .category-health-print-summary > div,
  .category-health-print-list > div {
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   Mis Gastos v39 — presupuestos sugeridos
   ============================================================ */
.budget-suggestions-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.35rem);
  background:
    radial-gradient(circle at 3% 0%, rgba(var(--brand-rgb), .15), transparent 15rem),
    radial-gradient(circle at 96% 8%, rgba(212, 151, 49, .13), transparent 17rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, #fff), color-mix(in srgb, var(--surface-subtle) 89%, #fff));
}

.budget-suggestions-card::after {
  content: "";
  position: absolute;
  right: -6rem;
  bottom: -8rem;
  width: 19rem;
  height: 19rem;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .07);
  pointer-events: none;
}

.budget-suggestions-head,
.budget-suggestions-grid,
.budget-suggestions-impact,
.budget-suggestion-item {
  position: relative;
  z-index: 1;
}

.budget-suggestions-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .32fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

.budget-suggestions-head h2 {
  margin: .2rem 0 .35rem;
  color: var(--text);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: -.045em;
}

.budget-suggestions-head p {
  margin: 0;
  max-width: 62rem;
  color: var(--text-muted);
}

.budget-suggestions-impact,
.budget-suggestion-metrics > div {
  display: grid;
  align-content: center;
  gap: .22rem;
  padding: .95rem 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
  border-radius: 1.05rem;
  background: rgba(255,255,255,.76);
  box-shadow: 0 14px 32px rgba(12, 39, 29, .06);
}

.budget-suggestions-impact small,
.budget-suggestion-metrics small {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.budget-suggestions-impact strong,
.budget-suggestion-metrics strong {
  color: var(--brand);
  font-size: clamp(1.16rem, 2vw, 1.62rem);
  letter-spacing: -.035em;
}

.budget-suggestions-impact span {
  color: var(--text-muted);
  font-size: .86rem;
}

.budget-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.budget-suggestion-item {
  display: grid;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 1.2rem;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 30px rgba(12, 39, 29, .055);
}

.budget-suggestion-item.warning {
  border-color: color-mix(in srgb, var(--warning) 24%, var(--border));
}

.budget-suggestion-item.danger {
  border-color: color-mix(in srgb, var(--gasto) 24%, var(--border));
}

.budget-suggestion-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .72rem;
  align-items: center;
}

.budget-suggestion-title strong {
  display: block;
  line-height: 1.18;
}

.budget-suggestion-title small {
  display: block;
  margin-top: .18rem;
  color: var(--text-muted);
  font-size: .84rem;
}

.budget-suggestion-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}

.budget-suggestion-note {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin: 0;
  padding: .72rem .8rem;
  border-radius: .95rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--brand-light) 52%, #fff);
  font-size: .86rem;
}

.budget-suggestion-note i {
  color: var(--brand);
  margin-top: .14rem;
}

.budget-suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.budget-suggestion-actions form {
  display: inline-flex;
}

[data-theme="dark"] .budget-suggestions-card {
  background:
    radial-gradient(circle at 3% 0%, rgba(var(--brand-rgb), .16), transparent 15rem),
    radial-gradient(circle at 96% 8%, rgba(212, 151, 49, .1), transparent 17rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #020617), color-mix(in srgb, var(--surface-subtle) 82%, #020617));
}

[data-theme="dark"] .budget-suggestions-impact,
[data-theme="dark"] .budget-suggestion-item,
[data-theme="dark"] .budget-suggestion-metrics > div {
  background: color-mix(in srgb, var(--surface-subtle) 70%, #020617);
}

@media (max-width: 991.98px) {
  .budget-suggestions-head,
  .budget-suggestions-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .budget-suggestions-card {
    padding: .95rem;
    border-radius: 1.15rem;
  }

  .budget-suggestion-metrics {
    grid-template-columns: 1fr;
  }

  .budget-suggestion-actions .btn,
  .budget-suggestion-actions form,
  .budget-suggestion-actions button {
    width: 100%;
  }
}

@media print {
  .budget-suggestions-card,
  .budget-suggestions-impact,
  .budget-suggestion-item,
  .budget-suggestion-metrics > div {
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* Mis Gastos v40 — proyección de cierre */
.closing-forecast-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.05rem, 2.4vw, 1.55rem);
  border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--border));
  background:
    radial-gradient(circle at 5% 8%, rgba(var(--brand-rgb), .14), transparent 17rem),
    radial-gradient(circle at 94% 0%, rgba(212, 151, 49, .13), transparent 18rem),
    linear-gradient(135deg, #fff, color-mix(in srgb, var(--brand-light) 48%, #fff));
}

.closing-forecast-card::after {
  content: "";
  position: absolute;
  inset: auto -8rem -10rem auto;
  width: 20rem;
  height: 20rem;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .08);
  pointer-events: none;
}

.closing-forecast-card.warning {
  border-color: color-mix(in srgb, var(--warning) 22%, var(--border));
}

.closing-forecast-card.danger {
  border-color: color-mix(in srgb, var(--gasto) 22%, var(--border));
}

.closing-forecast-head,
.closing-forecast-grid,
.closing-scenario-grid,
.closing-forecast-tip,
.closing-forecast-print-panel {
  position: relative;
  z-index: 1;
}

.closing-forecast-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, .34fr);
  gap: 1rem;
  align-items: stretch;
}

.closing-forecast-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}

.closing-forecast-head p {
  margin: .35rem 0 0;
  max-width: 52rem;
  color: var(--text-muted);
}

.closing-forecast-impact,
.closing-forecast-kpi,
.closing-scenario-card,
.closing-forecast-print-grid > div,
.closing-scenario-print-list > div {
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.82);
  box-shadow: 0 14px 32px rgba(12, 39, 29, .06);
}

.closing-forecast-impact {
  display: grid;
  gap: .24rem;
  align-content: center;
  padding: 1rem;
}

.closing-forecast-impact.warning,
.closing-forecast-kpi.warning,
.closing-scenario-card.warning,
.closing-scenario-print-list > div.warning {
  border-color: color-mix(in srgb, var(--warning) 26%, var(--border));
}

.closing-forecast-impact.danger,
.closing-forecast-kpi.danger,
.closing-scenario-card.danger,
.closing-scenario-print-list > div.danger {
  border-color: color-mix(in srgb, var(--gasto) 26%, var(--border));
}

.closing-forecast-impact small,
.closing-forecast-kpi small,
.closing-scenario-card small,
.closing-forecast-print-grid small {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.closing-forecast-impact strong {
  font-size: clamp(1.35rem, 2.8vw, 2.05rem);
  letter-spacing: -.04em;
}

.closing-forecast-impact span,
.closing-forecast-kpi span,
.closing-scenario-card span,
.closing-forecast-print-grid span {
  color: var(--text-muted);
  font-size: .86rem;
}

.closing-forecast-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin-top: 1rem;
}

.closing-forecast-kpi {
  display: grid;
  gap: .28rem;
  padding: .95rem;
}

.closing-forecast-kpi .mini-icon {
  margin-bottom: .15rem;
}

.closing-forecast-kpi strong,
.closing-scenario-card strong,
.closing-forecast-print-grid strong {
  color: var(--text);
  font-size: clamp(1.05rem, 1.7vw, 1.34rem);
  letter-spacing: -.025em;
}

.closing-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  margin-top: .85rem;
}

.closing-scenario-card {
  display: grid;
  gap: .25rem;
  padding: .95rem;
}

.closing-scenario-card.success strong {
  color: var(--brand);
}

.closing-scenario-card.warning strong {
  color: #a66a00;
}

.closing-scenario-card.danger strong {
  color: var(--gasto);
}

.closing-forecast-tip {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin: .95rem 0 0;
  padding: .82rem .9rem;
  border-radius: 1rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--brand-light) 58%, #fff);
}

.closing-forecast-tip i {
  color: var(--brand);
}

.closing-forecast-tip a {
  color: var(--brand);
  font-weight: 800;
  text-decoration: none;
}

.closing-forecast-tip a:hover {
  text-decoration: underline;
}

.closing-forecast-print-panel {
  overflow: hidden;
}

.closing-forecast-print-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.closing-forecast-print-grid > div {
  display: grid;
  gap: .22rem;
  padding: .95rem;
}

.closing-scenario-print-list {
  display: grid;
  gap: .6rem;
  margin-top: .85rem;
}

.closing-scenario-print-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
  align-items: center;
  padding: .82rem .95rem;
}

.closing-scenario-print-list strong,
.closing-scenario-print-list small {
  display: block;
}

.closing-scenario-print-list small {
  color: var(--text-muted);
}

.closing-scenario-print-list em {
  color: var(--brand);
  font-style: normal;
  font-weight: 900;
}

.closing-scenario-print-list > div.danger em {
  color: var(--gasto);
}

.closing-scenario-print-list > div.warning em {
  color: #a66a00;
}

[data-theme="dark"] .closing-forecast-card {
  background:
    radial-gradient(circle at 5% 8%, rgba(var(--brand-rgb), .16), transparent 17rem),
    radial-gradient(circle at 94% 0%, rgba(212, 151, 49, .09), transparent 18rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #020617), color-mix(in srgb, var(--surface-subtle) 82%, #020617));
}

[data-theme="dark"] .closing-forecast-impact,
[data-theme="dark"] .closing-forecast-kpi,
[data-theme="dark"] .closing-scenario-card,
[data-theme="dark"] .closing-forecast-print-grid > div,
[data-theme="dark"] .closing-scenario-print-list > div {
  background: color-mix(in srgb, var(--surface-subtle) 70%, #020617);
}

@media (max-width: 1199.98px) {
  .closing-forecast-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .closing-forecast-head,
  .closing-scenario-grid,
  .closing-forecast-print-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .closing-forecast-card {
    padding: .95rem;
    border-radius: 1.15rem;
  }

  .closing-forecast-grid {
    grid-template-columns: 1fr;
  }

  .closing-scenario-print-list > div {
    grid-template-columns: 1fr;
  }
}

@media print {
  .closing-forecast-card,
  .closing-forecast-impact,
  .closing-forecast-kpi,
  .closing-scenario-card,
  .closing-forecast-print-panel,
  .closing-forecast-print-grid > div,
  .closing-scenario-print-list > div {
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* Mis Gastos v41 — decisión de margen */
.margin-decision-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.05rem, 2.4vw, 1.55rem);
  border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--border));
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .14), transparent 16rem),
    radial-gradient(circle at 100% 12%, rgba(15, 23, 42, .06), transparent 18rem),
    linear-gradient(135deg, #fff, color-mix(in srgb, var(--brand-light) 42%, #fff));
}

.margin-decision-card.warning {
  border-color: color-mix(in srgb, var(--warning) 24%, var(--border));
}

.margin-decision-card.danger {
  border-color: color-mix(in srgb, var(--gasto) 24%, var(--border));
}

.margin-decision-card::after {
  content: "";
  position: absolute;
  inset: auto auto -9rem -8rem;
  width: 20rem;
  height: 20rem;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .07);
  pointer-events: none;
}

.margin-decision-head,
.margin-decision-grid,
.margin-allocation-bar,
.margin-decision-tip,
.margin-decision-print-panel {
  position: relative;
  z-index: 1;
}

.margin-decision-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, .32fr);
  gap: 1rem;
  align-items: stretch;
}

.margin-decision-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.22rem, 2.1vw, 1.68rem);
}

.margin-decision-head p {
  margin: .35rem 0 0;
  max-width: 52rem;
  color: var(--text-muted);
}

.margin-decision-impact,
.margin-decision-item,
.margin-decision-print-grid > div {
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.84);
  box-shadow: 0 14px 32px rgba(12, 39, 29, .06);
}

.margin-decision-impact {
  display: grid;
  gap: .22rem;
  align-content: center;
  padding: 1rem;
}

.margin-decision-impact.warning,
.margin-decision-item.warning,
.margin-decision-print-grid > div.warning {
  border-color: color-mix(in srgb, var(--warning) 26%, var(--border));
}

.margin-decision-impact.danger,
.margin-decision-item.danger,
.margin-decision-print-grid > div.danger {
  border-color: color-mix(in srgb, var(--gasto) 26%, var(--border));
}

.margin-decision-impact small,
.margin-decision-copy small,
.margin-decision-print-grid small {
  color: var(--text-muted);
}

.margin-decision-impact small {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.margin-decision-impact strong {
  font-size: clamp(1.35rem, 2.8vw, 2.05rem);
  letter-spacing: -.04em;
}

.margin-decision-impact span {
  color: var(--text-muted);
  font-size: .86rem;
}

.margin-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  margin-top: 1rem;
}

.margin-decision-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .72rem;
  align-items: start;
  padding: .95rem;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.margin-decision-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(12, 39, 29, .11);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
}

.margin-decision-copy strong {
  display: block;
  line-height: 1.18;
}

.margin-decision-copy small {
  display: block;
  margin-top: .22rem;
  font-size: .84rem;
}

.margin-decision-amount {
  grid-column: 1 / -1;
  color: var(--brand);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 900;
  letter-spacing: -.035em;
}

.margin-decision-item.warning .margin-decision-amount {
  color: #a66a00;
}

.margin-decision-item.danger .margin-decision-amount {
  color: var(--gasto);
}

.margin-decision-item em {
  grid-column: 1 / -1;
  justify-self: start;
  color: var(--brand);
  font-size: .78rem;
  font-style: normal;
  font-weight: 900;
}

.margin-allocation-bar {
  display: flex;
  gap: .25rem;
  height: .8rem;
  margin-top: .95rem;
  padding: .12rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 72%, transparent);
}

.margin-allocation-bar span {
  min-width: .5rem;
  border-radius: 999px;
  background: var(--brand);
}

.margin-allocation-bar span.warning {
  background: #d49731;
}

.margin-allocation-bar span.danger {
  background: var(--gasto);
}

.margin-allocation-bar span.info {
  background: #5c6f82;
}

.margin-decision-tip {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin: .95rem 0 0;
  padding: .78rem .9rem;
  border-radius: 1rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--brand-light) 56%, #fff);
  font-size: .86rem;
}

.margin-decision-tip i {
  color: var(--brand);
  margin-top: .12rem;
}

.margin-decision-print-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.margin-decision-print-grid > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .72rem;
  align-items: center;
  padding: .86rem .95rem;
}

.margin-decision-print-grid strong,
.margin-decision-print-grid small {
  display: block;
}

.margin-decision-print-grid em {
  color: var(--brand);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.margin-decision-print-grid > div.warning em {
  color: #a66a00;
}

.margin-decision-print-grid > div.danger em {
  color: var(--gasto);
}

[data-theme="dark"] .margin-decision-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .16), transparent 16rem),
    radial-gradient(circle at 100% 12%, rgba(255, 255, 255, .06), transparent 18rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #020617), color-mix(in srgb, var(--surface-subtle) 82%, #020617));
}

[data-theme="dark"] .margin-decision-impact,
[data-theme="dark"] .margin-decision-item,
[data-theme="dark"] .margin-decision-print-grid > div {
  background: color-mix(in srgb, var(--surface-subtle) 70%, #020617);
}

@media (max-width: 1199.98px) {
  .margin-decision-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991.98px) {
  .margin-decision-head,
  .margin-decision-print-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .margin-decision-card {
    padding: .95rem;
    border-radius: 1.15rem;
  }

  .margin-decision-item,
  .margin-decision-print-grid > div {
    grid-template-columns: 1fr;
  }

  .margin-decision-item .mini-icon {
    margin-bottom: .15rem;
  }
}

@media print {
  .margin-decision-card,
  .margin-decision-impact,
  .margin-decision-item,
  .margin-decision-print-panel,
  .margin-decision-print-grid > div {
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* Mis Gastos v42 — agenda de cierre */
.closing-agenda-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.05rem, 2.4vw, 1.55rem);
  border: 1px solid color-mix(in srgb, var(--brand) 11%, var(--border));
  background:
    radial-gradient(circle at 2% 0%, rgba(var(--brand-rgb), .14), transparent 17rem),
    radial-gradient(circle at 96% 10%, rgba(212, 151, 49, .12), transparent 19rem),
    linear-gradient(135deg, #fff, color-mix(in srgb, var(--brand-light) 38%, #fff));
}

.closing-agenda-card.warning {
  border-color: color-mix(in srgb, var(--warning) 24%, var(--border));
}

.closing-agenda-card.danger {
  border-color: color-mix(in srgb, var(--gasto) 24%, var(--border));
}

.closing-agenda-card::after {
  content: "";
  position: absolute;
  inset: -7rem -7rem auto auto;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .08);
  pointer-events: none;
}

.closing-agenda-head,
.closing-agenda-summary,
.closing-agenda-grid,
.closing-agenda-tip,
.closing-agenda-print-panel {
  position: relative;
  z-index: 1;
}

.closing-agenda-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, .32fr);
  gap: 1rem;
  align-items: stretch;
}

.closing-agenda-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.22rem, 2.1vw, 1.68rem);
}

.closing-agenda-head p {
  margin: .35rem 0 0;
  max-width: 52rem;
  color: var(--text-muted);
}

.closing-agenda-impact,
.closing-agenda-summary > div,
.closing-agenda-day,
.closing-agenda-print-grid > div {
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 32px rgba(12, 39, 29, .06);
}

.closing-agenda-impact {
  display: grid;
  gap: .22rem;
  align-content: center;
  padding: 1rem;
}

.closing-agenda-impact.warning,
.closing-agenda-day.warning,
.closing-agenda-print-grid > div.warning {
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
}

.closing-agenda-impact.danger,
.closing-agenda-day.danger,
.closing-agenda-print-grid > div.danger {
  border-color: color-mix(in srgb, var(--gasto) 28%, var(--border));
}

.closing-agenda-impact small,
.closing-agenda-summary small,
.closing-agenda-copy small,
.closing-agenda-net small,
.closing-agenda-print-grid small {
  color: var(--text-muted);
}

.closing-agenda-impact small,
.closing-agenda-summary small {
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.closing-agenda-impact strong {
  font-size: clamp(1.35rem, 2.8vw, 2.05rem);
  letter-spacing: -.04em;
}

.closing-agenda-impact span {
  color: var(--text-muted);
  font-size: .86rem;
}

.closing-agenda-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.closing-agenda-summary > div {
  display: grid;
  gap: .2rem;
  padding: .85rem .95rem;
}

.closing-agenda-summary strong {
  color: var(--text);
  font-size: 1.08rem;
}

.closing-agenda-grid {
  display: grid;
  gap: .85rem;
  margin-top: 1rem;
}

.closing-agenda-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.closing-agenda-grid.compact .closing-agenda-day {
  grid-template-columns: 1fr;
  align-content: start;
  min-height: 12.5rem;
}

.closing-agenda-grid.compact .closing-agenda-date {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .42rem;
  min-width: 0;
}

.closing-agenda-grid.compact .closing-agenda-date strong {
  font-size: 1.35rem;
}

.closing-agenda-grid.compact .closing-agenda-net {
  justify-items: start;
}

.closing-agenda-day {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
  padding: .92rem;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

a.closing-agenda-day:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(12, 39, 29, .11);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
}

.closing-agenda-date {
  display: grid;
  place-items: center;
  min-width: 4.25rem;
  padding: .62rem .52rem;
  border-radius: 1rem;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand-light) 70%, #fff);
}

.closing-agenda-date small,
.closing-agenda-date em {
  color: var(--text-muted);
  font-size: .68rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.closing-agenda-date strong {
  font-size: 1.55rem;
  letter-spacing: -.06em;
  line-height: .98;
}

.closing-agenda-day.warning .closing-agenda-date {
  color: #a66a00;
  background: color-mix(in srgb, var(--warning) 16%, #fff);
}

.closing-agenda-day.danger .closing-agenda-date {
  color: var(--gasto);
  background: color-mix(in srgb, var(--gasto) 12%, #fff);
}

.closing-agenda-copy strong {
  display: block;
  color: var(--text);
  line-height: 1.15;
}

.closing-agenda-copy small {
  display: block;
  margin-top: .25rem;
  font-size: .84rem;
}

.closing-agenda-net {
  display: grid;
  justify-items: end;
  color: var(--text);
  font-weight: 900;
  white-space: nowrap;
}

.closing-agenda-net.positive {
  color: var(--ingreso);
}

.closing-agenda-net.negative {
  color: var(--gasto);
}

.closing-agenda-events {
  display: grid;
  gap: .42rem;
  margin-top: .65rem;
}

.closing-agenda-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .45rem;
  align-items: center;
  padding: .48rem .55rem;
  border-radius: .85rem;
  color: inherit;
  text-decoration: none;
  background: color-mix(in srgb, var(--surface-subtle) 72%, #fff);
}

.closing-agenda-event:hover {
  color: var(--brand);
}

.closing-agenda-event i {
  color: var(--brand);
}

.closing-agenda-event.gasto i,
.closing-agenda-event.gasto em {
  color: var(--gasto);
}

.closing-agenda-event.ingreso i,
.closing-agenda-event.ingreso em {
  color: var(--ingreso);
}

.closing-agenda-event span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.closing-agenda-event em,
.closing-agenda-empty {
  color: var(--text-muted);
  font-size: .78rem;
  font-style: normal;
  font-weight: 850;
}

.closing-agenda-empty {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  margin-top: .58rem;
}

.closing-agenda-empty i {
  color: var(--brand);
}

.closing-agenda-tip {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin: .95rem 0 0;
  padding: .78rem .9rem;
  border-radius: 1rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--brand-light) 56%, #fff);
  font-size: .86rem;
}

.closing-agenda-tip i {
  color: var(--brand);
  margin-top: .12rem;
}

.closing-agenda-print-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.closing-agenda-print-grid > div {
  display: grid;
  grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr) auto;
  gap: .72rem;
  align-items: center;
  padding: .86rem .95rem;
}

.closing-agenda-print-date strong,
.closing-agenda-print-date small,
.closing-agenda-print-grid strong,
.closing-agenda-print-grid small {
  display: block;
}

.closing-agenda-print-grid em {
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

[data-theme="dark"] .closing-agenda-card {
  background:
    radial-gradient(circle at 2% 0%, rgba(var(--brand-rgb), .16), transparent 17rem),
    radial-gradient(circle at 96% 10%, rgba(212, 151, 49, .08), transparent 19rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #020617), color-mix(in srgb, var(--surface-subtle) 82%, #020617));
}

[data-theme="dark"] .closing-agenda-impact,
[data-theme="dark"] .closing-agenda-summary > div,
[data-theme="dark"] .closing-agenda-day,
[data-theme="dark"] .closing-agenda-event,
[data-theme="dark"] .closing-agenda-print-grid > div {
  background: color-mix(in srgb, var(--surface-subtle) 70%, #020617);
}

@media (max-width: 1199.98px) {
  .closing-agenda-grid.compact,
  .closing-agenda-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .closing-agenda-head,
  .closing-agenda-print-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .closing-agenda-card {
    padding: .95rem;
    border-radius: 1.15rem;
  }

  .closing-agenda-grid.compact,
  .closing-agenda-summary {
    grid-template-columns: 1fr;
  }

  .closing-agenda-day,
  .closing-agenda-print-grid > div {
    grid-template-columns: 1fr;
  }

  .closing-agenda-date {
    justify-items: start;
    place-items: initial;
    min-width: 0;
  }

  .closing-agenda-net {
    justify-items: start;
  }
}

@media print {
  .closing-agenda-card,
  .closing-agenda-impact,
  .closing-agenda-summary > div,
  .closing-agenda-day,
  .closing-agenda-event,
  .closing-agenda-tip,
  .closing-agenda-print-panel,
  .closing-agenda-print-grid > div {
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* Mis Gastos v43 — cierre mensual guiado */
.monthly-close-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.05rem, 2.4vw, 1.55rem);
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  background:
    radial-gradient(circle at 0% 100%, rgba(var(--brand-rgb), .13), transparent 17rem),
    radial-gradient(circle at 100% 0%, rgba(212, 151, 49, .11), transparent 17rem),
    linear-gradient(135deg, #fff, color-mix(in srgb, var(--brand-light) 34%, #fff));
}

.monthly-close-card.warning {
  border-color: color-mix(in srgb, var(--warning) 26%, var(--border));
}

.monthly-close-card.danger {
  border-color: color-mix(in srgb, var(--gasto) 24%, var(--border));
}

.monthly-close-card::after {
  content: "";
  position: absolute;
  inset: -6rem auto auto -7rem;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .07);
  pointer-events: none;
}

.monthly-close-head,
.monthly-close-primary,
.monthly-close-grid,
.monthly-close-print-panel {
  position: relative;
  z-index: 1;
}

.monthly-close-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}

.monthly-close-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.22rem, 2.1vw, 1.68rem);
}

.monthly-close-head p {
  margin: .35rem 0 0;
  color: var(--text-muted);
}

.monthly-close-score {
  --score: 0%;
  display: grid;
  place-items: center;
  width: 5.15rem;
  height: 5.15rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--surface) 57%, transparent 58%),
    conic-gradient(var(--brand) var(--score), color-mix(in srgb, var(--border) 75%, transparent) 0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.68), 0 16px 34px rgba(12, 39, 29, .12);
}

.monthly-close-score strong {
  color: var(--text);
  font-size: 1.32rem;
  line-height: 1;
}

.monthly-close-score span {
  margin-top: -1.05rem;
  color: var(--text-muted);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.monthly-close-card.warning .monthly-close-score,
.monthly-close-print-panel.warning .monthly-close-score {
  background:
    radial-gradient(circle, var(--surface) 57%, transparent 58%),
    conic-gradient(var(--warning) var(--score), color-mix(in srgb, var(--border) 75%, transparent) 0);
}

.monthly-close-card.danger .monthly-close-score,
.monthly-close-print-panel.danger .monthly-close-score {
  background:
    radial-gradient(circle, var(--surface) 57%, transparent 58%),
    conic-gradient(var(--gasto) var(--score), color-mix(in srgb, var(--border) 75%, transparent) 0);
}

.monthly-close-mini,
.monthly-close-primary,
.monthly-close-item,
.monthly-close-print-score,
.monthly-close-print-grid > div {
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.86);
  box-shadow: 0 14px 32px rgba(12, 39, 29, .06);
}

.monthly-close-mini {
  display: grid;
  gap: .2rem;
  min-width: 12rem;
  padding: .9rem 1rem;
}

.monthly-close-mini small,
.monthly-close-primary small,
.monthly-close-item small,
.monthly-close-print-score small,
.monthly-close-print-grid small {
  color: var(--text-muted);
}

.monthly-close-mini small,
.monthly-close-primary em small {
  display: block;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.monthly-close-mini strong {
  color: var(--text);
  font-size: 1.55rem;
  line-height: 1;
}

.monthly-close-mini span {
  color: var(--text-muted);
  font-size: .84rem;
}

.monthly-close-primary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: .78rem;
  align-items: center;
  margin-top: 1rem;
  padding: .95rem;
}

.monthly-close-primary strong,
.monthly-close-primary small {
  display: block;
}

.monthly-close-primary em {
  color: var(--brand);
  font-style: normal;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.monthly-close-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  margin-top: .95rem;
}

.monthly-close-grid.detailed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monthly-close-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .62rem;
  align-items: center;
  padding: .82rem;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.monthly-close-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(12, 39, 29, .11);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
}

.monthly-close-grid.detailed .monthly-close-item {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.monthly-close-item strong,
.monthly-close-item small {
  display: block;
}

.monthly-close-item small {
  margin-top: .12rem;
  font-size: .78rem;
}

.monthly-close-item em {
  color: var(--brand);
  font-size: .84rem;
  font-style: normal;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.monthly-close-item.warning,
.monthly-close-print-grid > div.warning {
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
}

.monthly-close-item.danger,
.monthly-close-print-grid > div.danger {
  border-color: color-mix(in srgb, var(--gasto) 28%, var(--border));
}

.monthly-close-state {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .78rem;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand-light) 70%, #fff);
  font-weight: 900;
}

.monthly-close-item.warning .monthly-close-state,
.monthly-close-print-grid > div.warning .monthly-close-state {
  color: #a66a00;
  background: color-mix(in srgb, var(--warning) 16%, #fff);
}

.monthly-close-item.danger .monthly-close-state,
.monthly-close-print-grid > div.danger .monthly-close-state {
  color: var(--gasto);
  background: color-mix(in srgb, var(--gasto) 12%, #fff);
}

.monthly-close-item.hecho .monthly-close-state,
.monthly-close-print-grid > div.hecho .monthly-close-state {
  color: var(--ingreso);
  background: color-mix(in srgb, var(--ingreso) 12%, #fff);
}

.monthly-close-print-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: center;
  padding: .95rem;
  margin-bottom: .85rem;
}

.monthly-close-print-score strong,
.monthly-close-print-score span {
  display: block;
}

.monthly-close-print-score em {
  color: var(--brand);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.monthly-close-print-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.monthly-close-print-grid > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
  padding: .84rem .92rem;
}

.monthly-close-print-grid strong,
.monthly-close-print-grid small {
  display: block;
}

.monthly-close-print-grid em {
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

[data-theme="dark"] .monthly-close-card {
  background:
    radial-gradient(circle at 0% 100%, rgba(var(--brand-rgb), .16), transparent 17rem),
    radial-gradient(circle at 100% 0%, rgba(212, 151, 49, .08), transparent 17rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #020617), color-mix(in srgb, var(--surface-subtle) 82%, #020617));
}

[data-theme="dark"] .monthly-close-score {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--surface-subtle) 70%, #020617) 57%, transparent 58%),
    conic-gradient(var(--brand) var(--score), rgba(255,255,255,.10) 0);
}

[data-theme="dark"] .monthly-close-mini,
[data-theme="dark"] .monthly-close-primary,
[data-theme="dark"] .monthly-close-item,
[data-theme="dark"] .monthly-close-print-score,
[data-theme="dark"] .monthly-close-print-grid > div {
  background: color-mix(in srgb, var(--surface-subtle) 70%, #020617);
}

@media (max-width: 1199.98px) {
  .monthly-close-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .monthly-close-head,
  .monthly-close-primary,
  .monthly-close-grid.detailed,
  .monthly-close-print-score,
  .monthly-close-print-grid {
    grid-template-columns: 1fr;
  }

  .monthly-close-primary em,
  .monthly-close-item em,
  .monthly-close-print-score em {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .monthly-close-card {
    padding: .95rem;
    border-radius: 1.15rem;
  }

  .monthly-close-grid,
  .monthly-close-grid.detailed {
    grid-template-columns: 1fr;
  }

  .monthly-close-score {
    width: 4.8rem;
    height: 4.8rem;
  }
}

@media print {
  .monthly-close-card,
  .monthly-close-mini,
  .monthly-close-primary,
  .monthly-close-item,
  .monthly-close-print-panel,
  .monthly-close-print-score,
  .monthly-close-print-grid > div {
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* Mis Gastos v44 — semana inteligente */
.weekly-intelligence-card {
  position: relative;
  overflow: hidden;
  padding: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--border));
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .12), transparent 16rem),
    radial-gradient(circle at 100% 100%, rgba(212, 151, 49, .12), transparent 17rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--brand-light)), var(--surface));
}

.weekly-intelligence-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.36), transparent 38%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.46), transparent 19rem);
}

.weekly-intelligence-card > * {
  position: relative;
  z-index: 1;
}

.weekly-intelligence-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}

.weekly-intelligence-head h2 {
  margin: .1rem 0 .25rem;
  font-size: clamp(1.18rem, 2vw, 1.62rem);
  letter-spacing: -.03em;
}

.weekly-intelligence-head p {
  max-width: 58rem;
  margin: 0;
  color: var(--text-muted);
}

.weekly-score {
  --score: 0%;
  display: inline-grid;
  place-items: center;
  width: 5.35rem;
  height: 5.35rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 57%, transparent 58%),
    conic-gradient(var(--brand) var(--score), color-mix(in srgb, var(--border) 82%, transparent) 0);
  box-shadow: 0 18px 38px rgba(var(--brand-rgb), .14);
  color: var(--text);
}

.weekly-score strong,
.weekly-score span {
  grid-area: 1 / 1;
}

.weekly-score strong {
  transform: translateY(-.32rem);
  font-size: 1.35rem;
  font-weight: 950;
  letter-spacing: -.05em;
}

.weekly-score span {
  transform: translateY(1rem);
  color: var(--text-muted);
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.weekly-intelligence-card.warning .weekly-score {
  background:
    radial-gradient(circle, #fff 57%, transparent 58%),
    conic-gradient(var(--warning) var(--score), color-mix(in srgb, var(--border) 82%, transparent) 0);
}

.weekly-intelligence-card.danger .weekly-score {
  background:
    radial-gradient(circle, #fff 57%, transparent 58%),
    conic-gradient(var(--gasto) var(--score), color-mix(in srgb, var(--border) 82%, transparent) 0);
}

.weekly-date-range,
.weekly-next-action,
.weekly-pocket-grid > div,
.weekly-day,
.weekly-day-card,
.weekly-print-summary,
.weekly-print-grid > div,
.weekly-print-days > div {
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  background: color-mix(in srgb, var(--surface) 88%, #fff);
  box-shadow: 0 18px 48px rgba(12, 39, 29, .07);
}

.weekly-date-range {
  min-width: 10.5rem;
  padding: .82rem .92rem;
  text-align: right;
}

.weekly-date-range small,
.weekly-date-range span,
.weekly-next-action small,
.weekly-next-action em,
.weekly-pocket-grid small,
.weekly-day em,
.weekly-day-date small,
.weekly-day-date em,
.weekly-day-copy small,
.weekly-day-numbers small,
.weekly-print-summary small,
.weekly-print-summary span,
.weekly-print-grid small,
.weekly-print-days small {
  color: var(--text-muted);
}

.weekly-date-range small,
.weekly-next-action small,
.weekly-pocket-grid small,
.weekly-day-date small,
.weekly-day-numbers small,
.weekly-print-summary small,
.weekly-print-grid small {
  display: block;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.weekly-date-range strong {
  display: block;
  font-size: 1rem;
}

.weekly-date-range span {
  display: block;
  font-size: .82rem;
}

.weekly-intelligence-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
  gap: .9rem;
  margin-top: 1rem;
}

.weekly-intelligence-card.detailed .weekly-intelligence-body {
  grid-template-columns: minmax(0, 1fr);
}

.weekly-next-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .78rem;
  align-items: center;
  padding: .95rem;
}

.weekly-intelligence-card.detailed .weekly-next-action {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.weekly-next-action strong,
.weekly-next-action em {
  display: block;
}

.weekly-next-action em {
  font-style: normal;
  font-size: .86rem;
}

.weekly-next-metric {
  color: var(--brand) !important;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

.weekly-pocket-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .72rem;
}

.weekly-intelligence-card.detailed .weekly-pocket-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.weekly-pocket-grid > div {
  padding: .84rem .92rem;
}

.weekly-pocket-grid strong {
  display: block;
  margin-top: .1rem;
  font-size: 1.02rem;
  letter-spacing: -.03em;
}

.weekly-days-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr));
  gap: .72rem;
  margin-top: .9rem;
}

.weekly-day {
  position: relative;
  display: grid;
  min-height: 7.2rem;
  padding: .78rem;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.weekly-day:hover,
.weekly-day-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  box-shadow: 0 18px 42px rgba(12, 39, 29, .12);
}

.weekly-day span,
.weekly-day em {
  position: relative;
  z-index: 1;
}

.weekly-day small,
.weekly-day strong,
.weekly-day em {
  display: block;
}

.weekly-day strong {
  font-size: 1.35rem;
  line-height: 1;
}

.weekly-day em {
  align-self: end;
  font-style: normal;
  font-weight: 850;
  word-break: break-word;
}

.weekly-day > i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: .4rem;
  border-radius: 0 0 1.15rem 1.15rem;
  background: color-mix(in srgb, var(--brand) 18%, transparent);
}

.weekly-day.warning > i,
.weekly-day-card.warning .weekly-pressure i {
  background: color-mix(in srgb, var(--warning) 45%, transparent);
}

.weekly-day.danger > i,
.weekly-day-card.danger .weekly-pressure i {
  background: color-mix(in srgb, var(--gasto) 40%, transparent);
}

.weekly-day.success > i,
.weekly-day-card.success .weekly-pressure i {
  background: color-mix(in srgb, var(--ingreso) 36%, transparent);
}

.weekly-day.warning,
.weekly-day-card.warning,
.weekly-print-days > div.warning {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
}

.weekly-day.danger,
.weekly-day-card.danger,
.weekly-print-days > div.danger {
  border-color: color-mix(in srgb, var(--gasto) 34%, var(--border));
}

.weekly-days-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .78rem;
  margin-top: .95rem;
}

.weekly-day-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .78rem;
  align-items: center;
  padding: .88rem;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.weekly-day-date {
  display: grid;
  place-items: center;
  width: 3.5rem;
  min-height: 4.05rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--brand-light) 72%, #fff);
}

.weekly-day-date strong {
  font-size: 1.35rem;
  line-height: 1;
}

.weekly-day-date em {
  font-size: .66rem;
  font-style: normal;
  font-weight: 850;
}

.weekly-day-copy strong,
.weekly-day-copy small,
.weekly-day-numbers strong,
.weekly-day-numbers em {
  display: block;
}

.weekly-day-copy small {
  margin-top: .12rem;
}

.weekly-pressure {
  display: block;
  width: 100%;
  height: .42rem;
  margin-top: .62rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}

.weekly-pressure i {
  display: block;
  height: 100%;
  min-width: .4rem;
  border-radius: inherit;
  background: color-mix(in srgb, var(--brand) 38%, transparent);
}

.weekly-day-numbers {
  text-align: right;
  white-space: nowrap;
}

.weekly-day-numbers strong {
  color: var(--gasto);
  font-size: .98rem;
}

.weekly-day-numbers em {
  font-style: normal;
  font-weight: 850;
}

.weekly-print-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: center;
  padding: .95rem;
  margin-bottom: .85rem;
}

.weekly-print-summary strong,
.weekly-print-summary span {
  display: block;
}

.weekly-print-summary em {
  color: var(--brand);
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.weekly-print-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  margin-bottom: .85rem;
}

.weekly-print-grid > div {
  padding: .82rem .9rem;
}

.weekly-print-grid strong {
  display: block;
  font-size: 1rem;
}

.weekly-print-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .5rem;
}

.weekly-print-days > div {
  padding: .72rem;
}

.weekly-print-days strong,
.weekly-print-days small,
.weekly-print-days em {
  display: block;
}

.weekly-print-days em {
  margin-top: .35rem;
  color: var(--gasto);
  font-style: normal;
  font-weight: 900;
}

[data-theme="dark"] .weekly-intelligence-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .16), transparent 16rem),
    radial-gradient(circle at 100% 100%, rgba(212, 151, 49, .08), transparent 17rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #020617), color-mix(in srgb, var(--surface-subtle) 82%, #020617));
}

[data-theme="dark"] .weekly-score {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--surface-subtle) 70%, #020617) 57%, transparent 58%),
    conic-gradient(var(--brand) var(--score), rgba(255,255,255,.10) 0);
}

[data-theme="dark"] .weekly-intelligence-card.warning .weekly-score {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--surface-subtle) 70%, #020617) 57%, transparent 58%),
    conic-gradient(var(--warning) var(--score), rgba(255,255,255,.10) 0);
}

[data-theme="dark"] .weekly-intelligence-card.danger .weekly-score {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--surface-subtle) 70%, #020617) 57%, transparent 58%),
    conic-gradient(var(--gasto) var(--score), rgba(255,255,255,.10) 0);
}

[data-theme="dark"] .weekly-date-range,
[data-theme="dark"] .weekly-next-action,
[data-theme="dark"] .weekly-pocket-grid > div,
[data-theme="dark"] .weekly-day,
[data-theme="dark"] .weekly-day-card,
[data-theme="dark"] .weekly-print-summary,
[data-theme="dark"] .weekly-print-grid > div,
[data-theme="dark"] .weekly-print-days > div {
  background: color-mix(in srgb, var(--surface-subtle) 72%, #020617);
}

@media (max-width: 1199.98px) {
  .weekly-intelligence-card.detailed .weekly-pocket-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .weekly-print-days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .weekly-intelligence-head,
  .weekly-intelligence-body,
  .weekly-intelligence-card.detailed .weekly-next-action,
  .weekly-days-detail,
  .weekly-print-summary,
  .weekly-print-grid {
    grid-template-columns: 1fr;
  }

  .weekly-date-range,
  .weekly-next-metric,
  .weekly-day-numbers {
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .weekly-intelligence-card {
    padding: .95rem;
    border-radius: 1.15rem;
  }

  .weekly-score {
    width: 4.8rem;
    height: 4.8rem;
  }

  .weekly-pocket-grid,
  .weekly-intelligence-card.detailed .weekly-pocket-grid,
  .weekly-days-row {
    grid-template-columns: 1fr;
  }

  .weekly-day {
    min-height: 5.9rem;
  }

  .weekly-day-card {
    grid-template-columns: 1fr;
  }

  .weekly-day-date {
    justify-items: start;
    width: 100%;
    min-height: auto;
    grid-template-columns: auto auto auto;
    gap: .45rem;
    padding: .65rem .75rem;
  }

  .weekly-print-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media print {
  .weekly-intelligence-card,
  .weekly-date-range,
  .weekly-next-action,
  .weekly-pocket-grid > div,
  .weekly-day,
  .weekly-day-card,
  .weekly-print-panel,
  .weekly-print-summary,
  .weekly-print-grid > div,
  .weekly-print-days > div {
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* Mis Gastos v45 — coach de ahorro */
.savings-coach-card {
  position: relative;
  overflow: hidden;
  padding: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--brand-rgb), .12), transparent 14rem),
    radial-gradient(circle at 100% 0%, rgba(212, 151, 49, .13), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 97%, #fff), color-mix(in srgb, var(--brand-light) 42%, var(--surface)));
  box-shadow: 0 24px 56px rgba(12, 39, 29, .10);
}

.savings-coach-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: .32rem;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--ingreso));
}

.savings-coach-card.warning {
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
}

.savings-coach-card.danger {
  border-color: color-mix(in srgb, var(--gasto) 24%, var(--border));
}

.savings-coach-head,
.savings-coach-primary {
  display: grid;
  align-items: center;
  gap: .95rem;
}

.savings-coach-head {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: .95rem;
}

.savings-coach-head h2 {
  margin-bottom: .2rem;
  letter-spacing: -.045em;
}

.savings-coach-head p,
.savings-coach-primary em,
.savings-coach-copy small,
.savings-subscription-strip small,
.savings-print-summary span,
.savings-print-grid small {
  color: var(--text-muted);
}

.savings-coach-impact,
.savings-coach-primary,
.savings-coach-summary > div,
.savings-coach-item,
.savings-subscription-strip,
.savings-subscription-chip,
.savings-print-summary > div,
.savings-print-grid > div {
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, rgba(255,255,255,.72));
  box-shadow: 0 14px 34px rgba(12, 39, 29, .075);
}

.savings-coach-impact {
  min-width: 13.5rem;
  padding: .95rem 1rem;
  border-radius: 1.25rem;
  text-align: right;
}

.savings-coach-impact strong {
  display: block;
  color: var(--brand);
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.savings-coach-impact.warning strong {
  color: var(--warning);
}

.savings-coach-impact.danger strong {
  color: var(--gasto);
}

.savings-coach-primary {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: .95rem;
  border-radius: 1.2rem;
  margin-bottom: .85rem;
}

.savings-coach-card.detailed .savings-coach-primary {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.savings-coach-primary strong,
.savings-coach-primary small,
.savings-coach-primary em,
.savings-coach-copy strong,
.savings-coach-copy small,
.savings-coach-metric small,
.savings-coach-metric strong,
.savings-primary-metric small,
.savings-subscription-chip strong,
.savings-subscription-chip small,
.savings-print-summary small,
.savings-print-summary strong,
.savings-print-summary span {
  display: block;
}

.savings-coach-primary em,
.savings-coach-item em,
.savings-primary-metric {
  font-style: normal;
}

.savings-primary-metric {
  color: var(--brand);
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

.savings-coach-summary,
.savings-coach-grid {
  display: grid;
  gap: .75rem;
}

.savings-coach-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: .85rem;
}

.savings-coach-summary > div {
  padding: .9rem .95rem;
  border-radius: 1.15rem;
}

.savings-coach-summary strong {
  display: block;
  color: var(--brand);
  font-size: 1.22rem;
  letter-spacing: -.04em;
}

.savings-coach-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.savings-coach-grid.detailed {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.savings-coach-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: .78rem;
  align-items: center;
  min-height: 5.4rem;
  padding: .88rem;
  border-radius: 1.15rem;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.savings-coach-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  box-shadow: 0 20px 44px rgba(12, 39, 29, .13);
}

.savings-coach-icon {
  width: 2.55rem;
  height: 2.55rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 2.55rem;
  border-radius: .95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: var(--icon-shadow);
}

.savings-coach-icon.warning {
  background: linear-gradient(135deg, var(--warning), #b7791f);
}

.savings-coach-icon.danger {
  background: linear-gradient(135deg, var(--gasto), #9f1239);
}

.savings-coach-icon.success {
  background: linear-gradient(135deg, var(--ingreso), #047857);
}

.savings-coach-metric {
  text-align: right;
  white-space: nowrap;
}

.savings-coach-metric strong {
  color: var(--brand);
  font-size: .98rem;
}

.savings-coach-item.warning .savings-coach-metric strong {
  color: var(--warning);
}

.savings-coach-item.danger .savings-coach-metric strong {
  color: var(--gasto);
}

.savings-coach-item em {
  color: var(--brand);
  font-weight: 850;
  white-space: nowrap;
}

.savings-subscription-strip {
  display: grid;
  grid-template-columns: minmax(15rem, .8fr) minmax(0, 1fr);
  gap: .9rem;
  align-items: center;
  padding: .95rem;
  border-radius: 1.18rem;
  margin-top: .95rem;
}

.savings-subscription-strip > div:first-child strong {
  display: block;
  letter-spacing: -.03em;
}

.savings-subscription-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
}

.savings-subscription-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: min(100%, 13.5rem);
  padding: .55rem .68rem;
  border-radius: 1rem;
  color: inherit;
  text-decoration: none;
}

.savings-print-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .72rem;
  margin-bottom: .85rem;
}

.savings-print-summary > div {
  padding: .85rem .9rem;
  border-radius: 1.1rem;
}

.savings-print-summary strong {
  color: var(--brand);
  font-size: 1.02rem;
  letter-spacing: -.035em;
}

.savings-print-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .68rem;
}

.savings-print-grid > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .72rem;
  align-items: center;
  padding: .8rem;
  border-radius: 1.05rem;
}

.savings-print-grid em {
  color: var(--brand);
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

[data-theme="dark"] .savings-coach-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--brand-rgb), .18), transparent 14rem),
    radial-gradient(circle at 100% 0%, rgba(212, 151, 49, .08), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #020617), color-mix(in srgb, var(--surface-subtle) 82%, #020617));
}

[data-theme="dark"] .savings-coach-impact,
[data-theme="dark"] .savings-coach-primary,
[data-theme="dark"] .savings-coach-summary > div,
[data-theme="dark"] .savings-coach-item,
[data-theme="dark"] .savings-subscription-strip,
[data-theme="dark"] .savings-subscription-chip,
[data-theme="dark"] .savings-print-summary > div,
[data-theme="dark"] .savings-print-grid > div {
  background: color-mix(in srgb, var(--surface-subtle) 74%, #020617);
}

@media (max-width: 1199.98px) {
  .savings-coach-grid.detailed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .savings-coach-head,
  .savings-coach-card.detailed .savings-coach-primary,
  .savings-subscription-strip,
  .savings-print-summary,
  .savings-print-grid {
    grid-template-columns: 1fr;
  }

  .savings-coach-impact,
  .savings-primary-metric,
  .savings-coach-metric {
    text-align: left;
  }

  .savings-subscription-list {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  .savings-coach-card {
    padding: .95rem;
    border-radius: 1.15rem;
  }

  .savings-coach-primary,
  .savings-coach-summary,
  .savings-coach-grid,
  .savings-coach-grid.detailed,
  .savings-coach-item,
  .savings-print-grid > div {
    grid-template-columns: 1fr;
  }

  .savings-coach-impact {
    min-width: 0;
  }

  .savings-coach-item {
    align-items: start;
  }
}

@media print {
  .savings-coach-card,
  .savings-coach-impact,
  .savings-coach-primary,
  .savings-coach-summary > div,
  .savings-coach-item,
  .savings-subscription-strip,
  .savings-subscription-chip,
  .savings-print-panel,
  .savings-print-summary > div,
  .savings-print-grid > div {
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* Mis Gastos v46 — confianza de datos */
.data-trust-card {
  position: relative;
  overflow: hidden;
  padding: 1.05rem;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .10), transparent 14rem),
    radial-gradient(circle at 100% 20%, rgba(59, 130, 246, .09), transparent 15rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 97%, #fff), color-mix(in srgb, var(--surface-subtle) 90%, var(--brand-light)));
  box-shadow: 0 20px 46px rgba(12, 39, 29, .085);
}

.data-trust-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: .28rem;
  background: linear-gradient(90deg, var(--brand), #38bdf8, var(--ingreso));
}

.data-trust-card.warning {
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
}

.data-trust-card.danger {
  border-color: color-mix(in srgb, var(--gasto) 22%, var(--border));
}

.data-trust-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .95rem;
  align-items: center;
  margin-bottom: .85rem;
}

.data-trust-head h2 {
  margin-bottom: .18rem;
  letter-spacing: -.045em;
}

.data-trust-head p,
.data-trust-metrics span,
.data-trust-item small,
.data-trust-print-summary span,
.data-trust-print-list small {
  color: var(--text-muted);
}

.data-trust-score {
  --score-color: var(--brand);
  width: 5.2rem;
  height: 5.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--surface) 57%, transparent 58%),
    conic-gradient(var(--score-color) var(--score), color-mix(in srgb, var(--border) 72%, transparent) 0);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent), 0 16px 36px rgba(12, 39, 29, .10);
}

.data-trust-card.warning .data-trust-score {
  --score-color: var(--warning);
}

.data-trust-card.danger .data-trust-score {
  --score-color: var(--gasto);
}

.data-trust-score strong,
.data-trust-score span {
  display: block;
  text-align: center;
}

.data-trust-score strong {
  color: var(--score-color);
  font-size: 1.4rem;
  letter-spacing: -.06em;
  line-height: 1;
}

.data-trust-score span {
  max-width: 4.2rem;
  color: var(--text-muted);
  font-size: .62rem;
  font-weight: 850;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.data-trust-metrics,
.data-trust-items,
.data-trust-print-summary,
.data-trust-print-list {
  display: grid;
  gap: .68rem;
}

.data-trust-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: .78rem;
}

.data-trust-metrics.detailed {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.data-trust-metrics > div,
.data-trust-item,
.data-trust-print-summary > div,
.data-trust-print-list > div {
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, rgba(255,255,255,.72));
  box-shadow: 0 12px 28px rgba(12, 39, 29, .065);
}

.data-trust-metrics > div,
.data-trust-print-summary > div {
  padding: .78rem .86rem;
  border-radius: 1rem;
}

.data-trust-metrics strong,
.data-trust-print-summary strong {
  display: block;
  color: var(--brand);
  font-size: 1.1rem;
  letter-spacing: -.04em;
}

.data-trust-metrics span,
.data-trust-print-summary span {
  display: block;
  margin-top: .08rem;
  font-size: .78rem;
}

.data-trust-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.data-trust-items.detailed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-trust-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .72rem;
  align-items: center;
  padding: .82rem;
  border-radius: 1.05rem;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.data-trust-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
  box-shadow: 0 18px 38px rgba(12, 39, 29, .12);
}

.data-trust-item strong,
.data-trust-item small,
.data-trust-item em,
.data-trust-print-list strong,
.data-trust-print-list small {
  display: block;
}

.data-trust-item em {
  grid-column: 2;
  color: var(--brand);
  font-style: normal;
  font-size: .78rem;
  font-weight: 900;
}

.data-trust-item.danger em {
  color: var(--gasto);
}

.data-trust-item.warning em {
  color: var(--warning);
}

.data-trust-print-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: .8rem;
}

.data-trust-print-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-trust-print-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .72rem;
  align-items: center;
  padding: .8rem;
  border-radius: 1rem;
}

.data-trust-print-list em {
  color: var(--brand);
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

[data-theme="dark"] .data-trust-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .16), transparent 14rem),
    radial-gradient(circle at 100% 20%, rgba(59, 130, 246, .07), transparent 15rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, #020617), color-mix(in srgb, var(--surface-subtle) 82%, #020617));
}

[data-theme="dark"] .data-trust-score {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--surface-subtle) 74%, #020617) 57%, transparent 58%),
    conic-gradient(var(--score-color) var(--score), rgba(255,255,255,.10) 0);
}

[data-theme="dark"] .data-trust-metrics > div,
[data-theme="dark"] .data-trust-item,
[data-theme="dark"] .data-trust-print-summary > div,
[data-theme="dark"] .data-trust-print-list > div {
  background: color-mix(in srgb, var(--surface-subtle) 74%, #020617);
}

@media (max-width: 1199.98px) {
  .data-trust-metrics.detailed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .data-trust-head,
  .data-trust-items,
  .data-trust-items.detailed,
  .data-trust-print-summary,
  .data-trust-print-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .data-trust-card {
    padding: .95rem;
    border-radius: 1.15rem;
  }

  .data-trust-metrics,
  .data-trust-metrics.detailed,
  .data-trust-print-list > div {
    grid-template-columns: 1fr;
  }

  .data-trust-item em {
    grid-column: 1;
  }
}

@media print {
  .data-trust-card,
  .data-trust-score,
  .data-trust-metrics > div,
  .data-trust-item,
  .data-trust-print-panel,
  .data-trust-print-summary > div,
  .data-trust-print-list > div {
    background: #fff !important;
    box-shadow: none !important;
  }
}

/* Mis Gastos v47 — transacciones como bandeja diaria */
.transaction-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

.transaction-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  margin-top: .7rem;
}

.transaction-active-chip,
.transaction-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  text-decoration: none;
}

.transaction-active-chip {
  max-width: 100%;
  padding: .32rem .52rem;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 99px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  font-size: .68rem;
  font-weight: 820;
}

.transaction-active-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-quick-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.7rem, 1fr));
  gap: .58rem;
  margin-bottom: .82rem;
}

.transaction-filter-chip {
  min-height: 3.1rem;
  padding: .68rem .78rem;
  border: 1px solid var(--border);
  border-radius: .95rem;
  color: var(--text);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, #fff), color-mix(in srgb, var(--surface-subtle) 84%, #fff));
  box-shadow: 0 10px 22px rgba(12, 39, 29, .04);
  transition: transform .18s var(--spring), box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.transaction-filter-chip i {
  display: grid;
  place-items: center;
  flex: 0 0 1.9rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: .72rem;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.transaction-filter-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .76rem;
  font-weight: 850;
}

.transaction-filter-chip strong {
  margin-left: auto;
  padding: .18rem .44rem;
  border-radius: 99px;
  color: var(--muted);
  background: color-mix(in srgb, var(--border) 45%, transparent);
  font-size: .68rem;
}

.transaction-filter-chip:hover,
.transaction-filter-chip.active {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 38%, var(--border));
  background:
    radial-gradient(circle at 8% 20%, rgba(var(--brand-rgb), .11), transparent 7rem),
    var(--surface);
  box-shadow: 0 16px 34px rgba(12, 39, 29, .09);
  transform: translateY(-1px);
}

.transaction-filter-chip.active strong {
  color: #fff;
  background: var(--brand);
}

.transaction-reading-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  gap: .75rem;
  align-items: center;
  margin-bottom: .9rem;
  padding: .86rem;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
  border-radius: 1rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .10), transparent 10rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, #fff), color-mix(in srgb, var(--surface-subtle) 88%, #fff));
}

.transaction-reading-card > div:first-child {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .7rem;
}

.transaction-reading-card strong,
.transaction-reading-card small {
  display: block;
}

.transaction-reading-card small {
  color: var(--muted);
  font-size: .72rem;
}

.transaction-reading-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.transaction-reading-metrics span {
  min-width: 0;
  padding: .62rem .66rem;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: .82rem;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.transaction-reading-metrics small,
.transaction-reading-metrics strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-reading-metrics strong {
  margin-top: .12rem;
  font-size: .82rem;
}

.transaction-filters {
  grid-template-columns: repeat(auto-fit, minmax(8.8rem, 1fr));
}

.transaction-filters .filter-search {
  grid-column: span 2;
}

.movement-list {
  gap: .82rem;
}

.movement-day-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .2rem;
  padding: .62rem .72rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: .9rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 8%, var(--surface-subtle)), var(--surface));
}

.movement-day-title {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  align-items: baseline;
  gap: .38rem .55rem;
}

.movement-day-title span {
  color: var(--brand);
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.movement-day-title strong {
  font-size: .88rem;
  letter-spacing: -.025em;
}

.movement-day-title small {
  color: var(--muted);
  font-size: .67rem;
  font-weight: 760;
}

.movement-day-total {
  display: inline-flex;
  align-items: baseline;
  gap: .36rem;
  flex: 0 0 auto;
  padding: .34rem .55rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--surface-subtle) 80%, transparent);
  font-weight: 900;
}

.movement-day-total small {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 760;
}

.movement-day-total.success strong {
  color: var(--ingreso);
}

.movement-day-total.danger strong {
  color: var(--gasto);
}

.transaction-empty-state {
  display: grid;
  gap: .7rem;
  justify-items: center;
  padding-block: 2rem;
}

.transaction-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

[data-theme="dark"] .transaction-filter-chip,
[data-theme="dark"] .transaction-reading-card,
[data-theme="dark"] .movement-day-divider {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .12), transparent 8rem),
    color-mix(in srgb, var(--surface-subtle) 82%, #020617);
}

[data-theme="dark"] .transaction-reading-metrics span,
[data-theme="dark"] .transaction-active-chip {
  background: color-mix(in srgb, var(--surface-subtle) 78%, #020617);
}

@media (max-width: 991.98px) {
  .transaction-toolbar {
    flex-direction: column;
  }

  .transaction-toolbar-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .transaction-reading-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .transaction-quick-filters,
  .transaction-reading-metrics {
    grid-template-columns: 1fr;
  }

  .transaction-filters .filter-search {
    grid-column: auto;
  }

  .movement-day-divider {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================
   Mis Gastos v48 — biblioteca guiada de informes
   ========================================================================== */

.report-library {
  position: relative;
  overflow: hidden;
  padding: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  background:
    radial-gradient(circle at 4% 0%, rgba(var(--brand-rgb), .12), transparent 14rem),
    radial-gradient(circle at 96% 12%, rgba(216, 156, 54, .10), transparent 13rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, #fff), color-mix(in srgb, var(--surface-subtle) 86%, #fff));
}

.report-library::after {
  position: absolute;
  inset: auto -5rem -7rem auto;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: rgba(var(--brand-rgb), .08);
  content: "";
  pointer-events: none;
}

.report-library-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .95rem;
}

.report-library-head h2 {
  margin: .12rem 0 .25rem;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  letter-spacing: -.045em;
}

.report-library-head p {
  max-width: 46rem;
  margin: 0;
  color: var(--muted);
}

.report-library-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .72rem;
}

.report-library-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon copy"
    "metric metric";
  gap: .72rem;
  min-height: 10.7rem;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 1.05rem;
  color: var(--text);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 96%, #fff), color-mix(in srgb, var(--surface-subtle) 82%, #fff));
  box-shadow: 0 14px 32px rgba(12, 39, 29, .055);
  text-decoration: none;
  transition: transform .2s var(--spring), border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.report-library-item:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--border));
  box-shadow: 0 22px 46px rgba(12, 39, 29, .10);
  transform: translateY(-2px);
}

.report-library-item .mini-icon {
  grid-area: icon;
}

.report-library-copy {
  grid-area: copy;
  min-width: 0;
}

.report-library-copy strong,
.report-library-copy small,
.report-library-item em b,
.report-library-item em small {
  display: block;
}

.report-library-copy strong {
  margin-bottom: .22rem;
  font-size: .92rem;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.report-library-copy small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}

.report-library-item em {
  grid-area: metric;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .7rem;
  margin-top: .2rem;
  padding-top: .72rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  font-style: normal;
}

.report-library-item em b {
  overflow: hidden;
  max-width: 100%;
  color: var(--brand);
  font-size: clamp(.95rem, 1.7vw, 1.2rem);
  font-weight: 950;
  letter-spacing: -.045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-library-item em small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.report-library-item.success em b,
.report-library-item.ok em b {
  color: var(--ingreso);
}

.report-library-item.warning em b {
  color: #b56a05;
}

.report-library-item.danger em b,
.report-library-item.risk em b {
  color: var(--gasto);
}

.report-library-item.neutral em b {
  color: var(--text);
}

.ui-ready .report-library,
.ui-ready .report-library-item {
  animation: softReveal .52s var(--spring) both;
  animation-delay: calc(var(--reveal-order, 0) * 32ms);
}

[data-theme="dark"] .report-library {
  background:
    radial-gradient(circle at 4% 0%, rgba(var(--brand-rgb), .17), transparent 14rem),
    radial-gradient(circle at 96% 12%, rgba(216, 156, 54, .13), transparent 13rem),
    color-mix(in srgb, var(--surface-subtle) 82%, #020617);
}

[data-theme="dark"] .report-library-item {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-subtle) 86%, #020617), color-mix(in srgb, var(--surface) 74%, #020617));
}

@media (max-width: 1199.98px) {
  .report-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .report-library-head {
    flex-direction: column;
  }

  .report-library-grid {
    grid-template-columns: 1fr;
  }

  .report-library-item {
    min-height: auto;
  }
}

/* ==========================================================================
   Mis Gastos v49 — máquina del tiempo financiero
   ========================================================================== */

.time-machine-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.1rem, 2.2vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, .13);
  color: #eefbf4;
  background:
    radial-gradient(circle at 8% 0%, rgba(77, 219, 151, .34), transparent 18rem),
    radial-gradient(circle at 82% 4%, rgba(216, 156, 54, .26), transparent 17rem),
    radial-gradient(circle at 52% 112%, rgba(14, 165, 233, .14), transparent 21rem),
    linear-gradient(135deg, #062419, #0c3929 48%, #082216);
  box-shadow: 0 30px 70px rgba(6, 36, 25, .28);
}

.time-machine-card::before,
.time-machine-card::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.time-machine-card::before {
  inset: 0;
  opacity: .34;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(115deg, rgba(0, 0, 0, .95), transparent 68%);
}

.time-machine-card::after {
  right: -6rem;
  bottom: -8rem;
  width: 21rem;
  height: 21rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .11), transparent 58%),
    conic-gradient(from 180deg, rgba(77, 219, 151, .24), rgba(216, 156, 54, .2), rgba(14, 165, 233, .16), rgba(77, 219, 151, .24));
  filter: blur(.1px);
}

.time-machine-bg {
  position: absolute;
  inset: 1rem;
  z-index: -1;
  border-radius: 1.5rem;
  opacity: .55;
  background:
    linear-gradient(120deg, transparent 0 41%, rgba(255, 255, 255, .06) 42%, transparent 43% 100%),
    radial-gradient(circle at 26% 52%, rgba(255, 255, 255, .12), transparent 9rem);
}

.time-machine-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.time-machine-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: #f7d694;
}

.live-dot {
  display: inline-block;
  width: .52rem;
  height: .52rem;
  border-radius: 50%;
  background: #58f0a4;
  box-shadow: 0 0 0 .35rem rgba(88, 240, 164, .13), 0 0 1.4rem rgba(88, 240, 164, .72);
}

.time-machine-head h2 {
  margin: .1rem 0 .35rem;
  color: #fff;
  font-size: clamp(1.45rem, 3.1vw, 2.35rem);
  font-weight: 950;
  letter-spacing: -.07em;
}

.time-machine-head p {
  max-width: 52rem;
  margin: 0;
  color: rgba(238, 251, 244, .77);
  font-size: clamp(.95rem, 1.35vw, 1.08rem);
}

.time-machine-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

.time-machine-actions .btn {
  border-radius: 999px;
  font-weight: 850;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .16);
}

.time-machine-actions .btn-light {
  border-color: transparent;
  color: #073524;
  background: linear-gradient(135deg, #ffffff, #dff7eb);
}

.time-machine-actions .btn-outline-light {
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.time-machine-grid {
  display: grid;
  grid-template-columns: minmax(18rem, .88fr) minmax(0, 1.12fr);
  gap: 1rem;
  align-items: stretch;
}

.time-machine-stage {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr);
  gap: .85rem;
}

.time-machine-orb {
  position: relative;
  display: grid;
  min-height: 19rem;
  place-items: center;
  padding: 1.2rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1.65rem;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .18), transparent 9.4rem),
    linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 18px 46px rgba(0, 0, 0, .22);
}

.time-machine-orb::before {
  position: absolute;
  width: min(15.5rem, 70%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #0b3424 0 48%, transparent 49%),
    conic-gradient(from 145deg, #57f0a3, #f2c96e, #38bdf8, #57f0a3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .11), 0 0 4rem rgba(88, 240, 164, .22);
  content: "";
}

.time-machine-orb.warning::before {
  background:
    radial-gradient(circle at 50% 50%, #3b2a0d 0 48%, transparent 49%),
    conic-gradient(from 145deg, #f59e0b, #f8d57d, #38bdf8, #f59e0b);
}

.time-machine-orb.danger::before {
  background:
    radial-gradient(circle at 50% 50%, #3c1010 0 48%, transparent 49%),
    conic-gradient(from 145deg, #fb7185, #f97316, #facc15, #fb7185);
}

.time-machine-orb span,
.time-machine-orb strong,
.time-machine-orb em {
  position: relative;
  z-index: 1;
  display: block;
}

.time-machine-orb span {
  margin-bottom: .25rem;
  color: rgba(238, 251, 244, .72);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.time-machine-orb strong {
  max-width: 100%;
  color: #fff;
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  font-weight: 1000;
  letter-spacing: -.075em;
  line-height: 1.02;
  overflow-wrap: anywhere;
  text-shadow: 0 10px 26px rgba(0, 0, 0, .26);
}

.time-machine-orb em {
  margin-top: .48rem;
  padding: .38rem .72rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: #d9ffee;
  background: rgba(255, 255, 255, .09);
  font-size: .72rem;
  font-style: normal;
  font-weight: 850;
}

.time-machine-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .62rem;
}

.time-machine-metrics div {
  padding: .85rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1.05rem;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.time-machine-metrics small,
.time-machine-metrics strong,
.time-machine-metrics span {
  display: block;
}

.time-machine-metrics small {
  color: rgba(238, 251, 244, .62);
  font-size: .63rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.time-machine-metrics strong {
  margin: .22rem 0 .16rem;
  color: #fff;
  font-size: clamp(.95rem, 1.55vw, 1.25rem);
  font-weight: 950;
  letter-spacing: -.045em;
}

.time-machine-metrics span {
  color: rgba(238, 251, 244, .66);
  font-size: .72rem;
  line-height: 1.25;
}

.time-machine-levers {
  display: grid;
  gap: .75rem;
}

.time-lever {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(6.2rem, auto);
  gap: .82rem;
  align-items: center;
  min-height: 6.1rem;
  padding: .82rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1.15rem;
  color: #eefbf4;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .055)),
    radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--lever-color, #58f0a4) 20%, transparent), transparent 11rem);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .2s var(--spring), border-color .2s ease, background .2s ease, opacity .2s ease;
}

.time-lever:hover {
  border-color: color-mix(in srgb, var(--lever-color, #58f0a4) 48%, rgba(255, 255, 255, .18));
  transform: translateY(-1px);
}

.time-lever.is-disabled {
  opacity: .52;
  cursor: default;
}

.time-lever.is-disabled:hover {
  transform: none;
}

.time-lever .mini-icon {
  color: #062419;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .72), transparent 1.8rem),
    var(--lever-color, #58f0a4);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--lever-color, #58f0a4) 28%, transparent);
}

.time-lever-copy strong,
.time-lever-copy small,
.time-lever-side output,
.time-lever-side em {
  display: block;
}

.time-lever-copy strong {
  color: #fff;
  font-size: .98rem;
  font-weight: 930;
  letter-spacing: -.035em;
}

.time-lever-copy small {
  max-width: 38rem;
  margin-top: .12rem;
  color: rgba(238, 251, 244, .68);
  font-size: .76rem;
  line-height: 1.35;
}

.time-lever-track {
  display: block;
  margin-top: .62rem;
}

.time-lever input[type="range"] {
  width: 100%;
  height: .58rem;
  appearance: none;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--lever-color, #58f0a4) var(--lever-fill, 0%), rgba(255, 255, 255, .15) var(--lever-fill, 0%));
  cursor: ew-resize;
  outline: none;
}

.time-lever input[type="range"]::-webkit-slider-thumb {
  width: 1.22rem;
  height: 1.22rem;
  appearance: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--lever-color, #58f0a4);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

.time-lever input[type="range"]::-moz-range-thumb {
  width: 1.05rem;
  height: 1.05rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--lever-color, #58f0a4);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

.time-lever input[type="range"]:disabled {
  cursor: not-allowed;
}

.time-lever-side {
  text-align: right;
}

.time-lever-side output {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 1000;
  letter-spacing: -.06em;
}

.time-lever-side em {
  margin-top: .18rem;
  color: rgba(238, 251, 244, .62);
  font-size: .68rem;
  font-style: normal;
  font-weight: 800;
}

.time-machine-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 1rem;
}

.time-machine-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .22rem .64rem;
  padding: .78rem .85rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .075);
}

.time-machine-step span {
  grid-row: span 2;
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: .72rem;
  color: #073524;
  background: #f7d694;
  font-size: .74rem;
  font-weight: 1000;
}

.time-machine-step strong {
  color: #fff;
  font-size: .86rem;
  line-height: 1.15;
}

.time-machine-step small {
  color: rgba(238, 251, 244, .64);
  font-size: .72rem;
}

.ui-ready .time-machine-card,
.ui-ready .time-lever,
.ui-ready .time-machine-step {
  animation: softReveal .52s var(--spring) both;
  animation-delay: calc(var(--reveal-order, 0) * 32ms);
}

@media (max-width: 1199.98px) {
  .time-machine-grid {
    grid-template-columns: 1fr;
  }

  .time-machine-stage {
    grid-template-columns: minmax(15rem, .9fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 991.98px) {
  .time-machine-head {
    flex-direction: column;
  }

  .time-machine-actions {
    justify-content: flex-start;
  }

  .time-machine-stage {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .time-machine-card {
    padding: 1rem;
    border-radius: 1.25rem;
  }

  .time-machine-actions,
  .time-machine-actions .btn {
    width: 100%;
  }

  .time-machine-actions .btn {
    justify-content: center;
  }

  .time-machine-orb {
    min-height: 15rem;
  }

  .time-machine-metrics,
  .time-machine-sequence {
    grid-template-columns: 1fr;
  }

  .time-lever {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .time-lever-side {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    text-align: left;
  }
}

@media print {
  .time-machine-card {
    color: #111827 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .time-machine-card::before,
  .time-machine-card::after,
  .time-machine-bg,
  .time-machine-actions,
  .time-lever input[type="range"] {
    display: none !important;
  }

  .time-machine-head h2,
  .time-machine-orb strong,
  .time-machine-metrics strong,
  .time-lever-copy strong,
  .time-lever-side output,
  .time-machine-step strong {
    color: #111827 !important;
  }

  .time-machine-head p,
  .time-machine-orb span,
  .time-machine-orb em,
  .time-machine-metrics small,
  .time-machine-metrics span,
  .time-lever-copy small,
  .time-lever-side em,
  .time-machine-step small {
    color: #4b5563 !important;
  }
}

/* ==========================================================================
   Mis Gastos v50 — antídoto de arrepentimiento en transacciones
   ========================================================================== */

.decision-guard-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .78rem;
  overflow: hidden;
  padding: .86rem;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 1rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .15), transparent 9rem),
    radial-gradient(circle at 100% 10%, rgba(216, 156, 54, .13), transparent 8rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 97%, #fff), color-mix(in srgb, var(--surface-subtle) 88%, #fff));
  box-shadow: 0 18px 40px rgba(12, 39, 29, .08);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s var(--spring);
}

.decision-guard-card::after {
  position: absolute;
  inset: auto -3rem -4rem auto;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--guard-color, var(--brand)) 18%, transparent);
  content: "";
  pointer-events: none;
}

.decision-guard-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 46px rgba(12, 39, 29, .12);
}

.decision-guard-card.is-idle { --guard-color: #64748b; }
.decision-guard-card.is-success { --guard-color: var(--ingreso); }
.decision-guard-card.is-warning { --guard-color: #d89c36; }
.decision-guard-card.is-danger { --guard-color: var(--gasto); }

.decision-guard-orb {
  position: relative;
  display: grid;
  width: 5.25rem;
  min-height: 5.25rem;
  place-items: center;
  align-content: center;
  padding: .45rem;
  border-radius: 1.05rem;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, .42), transparent 2.1rem),
    linear-gradient(145deg, color-mix(in srgb, var(--guard-color) 92%, #111827), color-mix(in srgb, var(--guard-color) 72%, #020617));
  box-shadow: 0 16px 30px color-mix(in srgb, var(--guard-color) 24%, transparent);
}

.decision-guard-orb span,
.decision-guard-orb strong,
.decision-guard-orb em {
  display: block;
  max-width: 100%;
}

.decision-guard-orb span {
  color: rgba(255, 255, 255, .66);
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.05;
  text-transform: uppercase;
}

.decision-guard-orb strong {
  margin-top: .14rem;
  font-size: .93rem;
  font-weight: 1000;
  letter-spacing: -.05em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.decision-guard-orb em {
  margin-top: .14rem;
  color: rgba(255, 255, 255, .78);
  font-size: .52rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.05;
}

.decision-guard-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.decision-guard-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  color: color-mix(in srgb, var(--guard-color) 88%, var(--brand));
  font-size: .58rem;
}

.decision-guard-copy h3 {
  margin: .1rem 0 .2rem;
  font-size: .98rem;
  font-weight: 950;
  letter-spacing: -.045em;
}

.decision-guard-copy p {
  margin: 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.34;
}

.decision-guard-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .42rem;
  margin-top: .65rem;
}

.decision-guard-metrics span {
  min-width: 0;
  padding: .5rem;
  border: 1px solid color-mix(in srgb, var(--guard-color) 14%, var(--border));
  border-radius: .78rem;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.decision-guard-metrics small,
.decision-guard-metrics strong {
  display: block;
}

.decision-guard-metrics small {
  color: var(--muted);
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.decision-guard-metrics strong {
  margin-top: .12rem;
  color: color-mix(in srgb, var(--guard-color) 86%, var(--text));
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: -.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decision-guard-script {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-top: .58rem;
  padding: .54rem .62rem;
  border-radius: .8rem;
  color: color-mix(in srgb, var(--guard-color) 82%, var(--text));
  background: color-mix(in srgb, var(--guard-color) 10%, transparent);
  font-size: .7rem;
  font-weight: 760;
  line-height: 1.3;
}

.decision-guard-script i {
  flex: 0 0 auto;
  margin-top: .03rem;
}

.ui-ready .decision-guard-card {
  animation: softReveal .52s var(--spring) both;
  animation-delay: calc(var(--reveal-order, 0) * 32ms);
}

[data-theme="dark"] .decision-guard-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .18), transparent 9rem),
    radial-gradient(circle at 100% 10%, rgba(216, 156, 54, .15), transparent 8rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-subtle) 82%, #020617), color-mix(in srgb, var(--surface) 70%, #020617));
}

[data-theme="dark"] .decision-guard-metrics span {
  background: rgba(255, 255, 255, .045);
}

@media (max-width: 1399.98px) {
  .decision-guard-card {
    grid-template-columns: 1fr;
  }

  .decision-guard-orb {
    width: 100%;
    min-height: 4.5rem;
  }
}

@media (max-width: 575.98px) {
  .decision-guard-metrics {
    grid-template-columns: 1fr;
  }

  .decision-guard-metrics strong {
    white-space: normal;
  }
}

/* Mis Gastos v51 — entrada mágica inspirada en apps financieras modernas */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 .18rem rgba(var(--brand-rgb), .10), 0 8px 18px rgba(var(--brand-rgb), .18); }
  50% { box-shadow: 0 0 0 .36rem rgba(var(--brand-rgb), .20), 0 12px 26px rgba(var(--brand-rgb), .24); }
}

.magic-entry-card {
  position: relative;
  overflow: hidden;
  padding: .95rem;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--brand-rgb), .15), transparent 9rem),
    linear-gradient(145deg, color-mix(in srgb, #fff 92%, var(--brand) 8%), #fff);
  box-shadow: 0 20px 45px rgba(12, 39, 29, .09);
}

.magic-entry-card::before {
  content: "";
  position: absolute;
  inset: -45% auto auto 55%;
  width: 12rem;
  height: 12rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, .85), transparent 68%);
  pointer-events: none;
}

.magic-entry-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: flex-start;
  margin-bottom: .8rem;
}

.magic-entry-icon {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 1rem;
  color: #fff;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .34), transparent 32%),
    linear-gradient(145deg, var(--brand), var(--brand-dark));
  box-shadow: 0 13px 25px rgba(var(--brand-rgb), .24);
}

.magic-entry-head h3 {
  margin: .08rem 0 .18rem;
  font-size: 1rem;
  line-height: 1.18;
}

.magic-entry-head p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.magic-entry-box {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .55rem;
}

.magic-entry-box textarea.form-control {
  min-height: 4.55rem;
  resize: vertical;
  border-radius: 1rem;
  padding: .88rem .95rem;
  background: rgba(255, 255, 255, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.magic-entry-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
}

.magic-voice-button {
  min-width: 2.65rem;
  border-radius: .85rem;
}

.magic-entry-card.is-listening .magic-voice-button {
  color: #fff;
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .14);
  animation: pulseGlow 1.05s ease-in-out infinite;
}

.magic-entry-examples {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
  margin-top: .72rem;
}

.magic-entry-examples button,
.magic-entry-chips span {
  display: inline-flex;
  align-items: center;
  gap: .36rem;
  border-radius: 999px;
}

.magic-entry-examples button {
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--border));
  padding: .34rem .54rem;
  color: color-mix(in srgb, var(--text) 76%, var(--brand));
  background: rgba(255, 255, 255, .72);
  font-size: .68rem;
  font-weight: 760;
}

.magic-entry-examples button:hover {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 38%, var(--border));
  transform: translateY(-1px);
}

.magic-entry-result {
  position: relative;
  z-index: 1;
  margin-top: .8rem;
  padding: .72rem;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  border-radius: 1rem;
  background: rgba(255, 255, 255, .65);
}

.magic-entry-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
}

.magic-entry-chips span {
  max-width: 100%;
  padding: .38rem .55rem;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  color: var(--text);
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  font-size: .66rem;
  font-weight: 760;
}

.magic-entry-chips i {
  color: var(--brand);
}

.magic-entry-chips small {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.magic-entry-chips strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.magic-entry-result p {
  margin: .58rem 0 0;
  color: var(--muted);
  font-size: .72rem;
}

.magic-entry-card.is-success .magic-entry-result {
  border-color: color-mix(in srgb, var(--ingreso) 22%, var(--border));
  background: color-mix(in srgb, var(--ingreso) 7%, #fff);
}

.magic-entry-card.is-warning .magic-entry-result {
  border-color: color-mix(in srgb, var(--warning) 22%, var(--border));
  background: color-mix(in srgb, var(--warning) 7%, #fff);
}

.ui-ready .magic-entry-card {
  animation: softReveal .52s var(--spring) both;
  animation-delay: calc(var(--reveal-order, 0) * 32ms);
}

[data-theme="dark"] .magic-entry-card {
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--brand-rgb), .22), transparent 9rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 76%, #020617), color-mix(in srgb, var(--surface-subtle) 82%, #020617));
  box-shadow: 0 22px 48px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .magic-entry-box textarea.form-control,
[data-theme="dark"] .magic-entry-examples button,
[data-theme="dark"] .magic-entry-result {
  background: rgba(255, 255, 255, .045);
}

[data-theme="dark"] .magic-entry-chips span {
  background: color-mix(in srgb, var(--brand) 13%, rgba(255, 255, 255, .045));
}

@media (max-width: 575.98px) {
  .magic-entry-head {
    grid-template-columns: 1fr;
  }

  .magic-entry-actions {
    grid-template-columns: 1fr;
  }

  .magic-voice-button {
    width: 100%;
  }
}

/* Mis Gastos v52 — Copiloto financiero: 9 mejoras en una vista premium */
.copilot-heading {
  align-items: flex-end;
}

.copilot-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.45rem;
  align-items: center;
  overflow: hidden;
  padding: clamp(1.15rem, 2.6vw, 1.85rem);
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  background:
    radial-gradient(circle at 7% 8%, rgba(var(--brand-rgb), .18), transparent 14rem),
    radial-gradient(circle at 87% 6%, rgba(216, 156, 54, .18), transparent 16rem),
    linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--brand-light) 45%, #fff) 100%);
  box-shadow: 0 28px 70px rgba(12, 39, 29, .10);
}

.copilot-hero::before {
  content: "";
  position: absolute;
  inset: auto -5rem -7rem auto;
  width: 17rem;
  height: 17rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, .78), transparent 68%);
  pointer-events: none;
}

.copilot-orb {
  --orb-tone: var(--brand);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(7.4rem, 13vw, 9rem);
  height: clamp(7.4rem, 13vw, 9rem);
  border-radius: 2.35rem;
  color: var(--text);
  background:
    radial-gradient(circle at center, var(--surface) 0 57%, transparent 58%),
    conic-gradient(var(--orb-tone) var(--score), rgba(255, 255, 255, .68) 0);
  box-shadow:
    inset 0 0 0 .55rem rgba(255, 255, 255, .70),
    0 24px 48px rgba(12, 39, 29, .16);
}

.copilot-hero.success .copilot-orb { --orb-tone: var(--ingreso); }
.copilot-hero.warning .copilot-orb { --orb-tone: #d89c36; }
.copilot-hero.danger .copilot-orb { --orb-tone: var(--gasto); }

.copilot-orb strong {
  display: block;
  font-size: clamp(2.05rem, 5vw, 3rem);
  line-height: .9;
  letter-spacing: -.08em;
}

.copilot-orb span {
  display: block;
  margin-top: .15rem;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.copilot-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.copilot-hero-copy h2 {
  margin: .55rem 0 .35rem;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  letter-spacing: -.045em;
}

.copilot-hero-copy p {
  max-width: 54rem;
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.55;
}

.copilot-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 1.15rem;
}

.copilot-hero-metrics span,
.copilot-close-card span,
.copilot-mini-metric {
  display: grid;
  gap: .1rem;
  min-width: 0;
  padding: .82rem .9rem;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 1.05rem;
  background: rgba(255, 255, 255, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.copilot-hero-metrics small,
.copilot-close-card small,
.copilot-mini-metric small {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.copilot-hero-metrics strong,
.copilot-close-card strong,
.copilot-mini-metric strong {
  overflow: hidden;
  font-size: 1.06rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copilot-hero-actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .65rem;
  min-width: 10.5rem;
}

.copilot-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr));
  gap: .75rem;
}

.copilot-module-card {
  position: relative;
  display: grid;
  gap: .32rem;
  min-height: 8.4rem;
  padding: .9rem;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--border));
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .10), transparent 7rem),
    var(--surface);
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.copilot-module-card:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.copilot-module-card span {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: .65rem;
  color: var(--brand);
  background: var(--brand-light);
  font-size: .72rem;
  font-weight: 900;
}

.copilot-module-card i {
  position: absolute;
  right: .78rem;
  top: .78rem;
  color: color-mix(in srgb, var(--brand) 80%, #fff);
  font-size: 1.25rem;
}

.copilot-module-card strong {
  align-self: end;
  margin-top: 1.2rem;
  font-size: .92rem;
  line-height: 1.15;
}

.copilot-module-card small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}

.copilot-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 8%, var(--border));
}

.copilot-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: .22rem;
  background: linear-gradient(90deg, var(--brand), #6ec59a, #d89c36);
  opacity: .75;
}

.copilot-panel:target {
  box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .12), var(--shadow-hover);
}

.copilot-ask-layout {
  display: grid;
  grid-template-columns: minmax(13rem, .72fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.copilot-question-list {
  display: grid;
  gap: .55rem;
}

.copilot-question-list button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .62rem;
  align-items: center;
  width: 100%;
  padding: .78rem .86rem;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.copilot-question-list button i {
  display: inline-grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: .82rem;
  color: var(--brand);
  background: var(--brand-light);
}

.copilot-question-list button span {
  min-width: 0;
  overflow: hidden;
  font-size: .84rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copilot-question-list button.active,
.copilot-question-list button:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
  background: color-mix(in srgb, var(--brand-light) 72%, #fff);
  transform: translateY(-1px);
}

.copilot-question-list input {
  min-height: 2.65rem;
  border-radius: 1rem;
}

.copilot-answer-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  min-height: 100%;
  padding: 1.1rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .14), transparent 10rem),
    linear-gradient(145deg, color-mix(in srgb, #fff 92%, var(--brand-light) 8%), #fff);
}

.copilot-answer-card h3 {
  margin: .1rem 0 .35rem;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.copilot-answer-card p {
  color: var(--muted);
  line-height: 1.55;
}

.copilot-answer-card > div {
  min-width: 0;
}

.copilot-answer-card > div > small {
  color: var(--brand);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.copilot-answer-metric {
  display: inline-grid;
  gap: .1rem;
  min-width: 12rem;
  margin: .15rem 0 .85rem;
  padding: .72rem .9rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .76);
}

.copilot-answer-metric small {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.copilot-answer-metric strong {
  font-size: 1.2rem;
}

.copilot-inbox-list,
.copilot-budget-list,
.copilot-subscription-list,
.copilot-agenda-list,
.copilot-capture-list,
.copilot-suggestion-grid {
  display: grid;
  gap: .68rem;
}

.copilot-task,
.copilot-budget-row,
.copilot-subscription,
.copilot-suggestion,
.copilot-capture-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  min-width: 0;
  padding: .78rem;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--brand-light) 8%);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.copilot-task:hover,
.copilot-budget-row:hover,
.copilot-subscription:hover,
.copilot-suggestion:hover,
.copilot-capture-list a:hover,
.copilot-agenda-day:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
  box-shadow: 0 12px 24px rgba(12, 39, 29, .08);
  transform: translateY(-2px);
}

.copilot-task strong,
.copilot-budget-row strong,
.copilot-subscription strong,
.copilot-suggestion strong,
.copilot-capture-list strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copilot-task small,
.copilot-budget-row small,
.copilot-subscription small,
.copilot-suggestion small,
.copilot-capture-list small {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.35;
}

.copilot-task em,
.copilot-budget-row em,
.copilot-subscription em,
.copilot-suggestion em {
  color: var(--text);
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.copilot-task.warning { border-color: color-mix(in srgb, #d89c36 28%, var(--border)); }
.copilot-task.danger { border-color: color-mix(in srgb, var(--gasto) 28%, var(--border)); }
.copilot-task.success { border-color: color-mix(in srgb, var(--ingreso) 25%, var(--border)); }

.copilot-budget-main {
  position: relative;
  display: grid;
  gap: .35rem;
  margin-bottom: .9rem;
  padding: 1.05rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .16), transparent 10rem),
    color-mix(in srgb, var(--brand-light) 55%, #fff);
}

.copilot-budget-main small {
  color: var(--brand);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.copilot-budget-main > strong {
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  letter-spacing: -.045em;
}

.copilot-budget-main > span {
  color: var(--muted);
}

.copilot-budget-row.danger {
  background: color-mix(in srgb, var(--gasto) 7%, var(--surface));
}

.copilot-budget-row.warning {
  background: color-mix(in srgb, #d89c36 8%, var(--surface));
}

.copilot-budget-row.success {
  background: color-mix(in srgb, var(--ingreso) 7%, var(--surface));
}

.copilot-close-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  padding: .85rem;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .12), transparent 11rem),
    color-mix(in srgb, var(--brand-light) 40%, #fff);
}

.copilot-close-card.danger {
  background: color-mix(in srgb, var(--gasto) 8%, #fff);
}

.copilot-close-card.warning {
  background: color-mix(in srgb, #d89c36 10%, #fff);
}

.copilot-agenda-list {
  margin-top: .85rem;
}

.copilot-agenda-day {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .72rem;
  align-items: center;
  padding: .78rem;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.copilot-agenda-day > span {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  color: var(--brand);
  background: var(--brand-light);
}

.copilot-agenda-day > span strong {
  line-height: 1;
}

.copilot-agenda-day > span small {
  color: inherit;
  font-size: .62rem;
  font-weight: 850;
  text-transform: uppercase;
}

.copilot-mini-metric {
  min-height: 9rem;
  align-content: center;
  border-color: color-mix(in srgb, var(--brand) 14%, var(--border));
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .12), transparent 8rem),
    color-mix(in srgb, var(--brand-light) 38%, #fff);
}

.copilot-mini-metric strong {
  font-size: clamp(1.45rem, 3vw, 2.05rem);
}

.copilot-mini-metric span {
  color: var(--muted);
  line-height: 1.45;
}

.copilot-mini-metric.success {
  border-color: color-mix(in srgb, var(--ingreso) 20%, var(--border));
}

.copilot-mini-metric.warning {
  border-color: color-mix(in srgb, #d89c36 26%, var(--border));
}

.copilot-bank-steps {
  display: grid;
  gap: .5rem;
  margin-top: .85rem;
}

.copilot-bank-steps span {
  padding: .54rem .7rem;
  border: 1px dashed color-mix(in srgb, var(--muted) 34%, var(--border));
  border-radius: .85rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
}

.copilot-bank-steps span.done {
  color: var(--brand);
  border-style: solid;
  border-color: color-mix(in srgb, var(--brand) 24%, var(--border));
  background: var(--brand-light);
}

.copilot-capture-list a {
  grid-template-columns: auto minmax(0, 1fr);
}

.copilot-capture-list i {
  display: inline-grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: .9rem;
  color: #fff;
  background: linear-gradient(145deg, var(--brand), var(--brand-dark));
  box-shadow: 0 10px 20px rgba(var(--brand-rgb), .16);
}

.copilot-capture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .8rem;
}

.copilot-suggestion-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.copilot-suggestion {
  min-height: 4.6rem;
}

.ui-ready .copilot-hero,
.ui-ready .copilot-module-card,
.ui-ready .copilot-panel {
  animation: softReveal .52s var(--spring) both;
  animation-delay: calc(var(--reveal-order, 0) * 32ms);
}

[data-theme="dark"] .copilot-hero {
  background:
    radial-gradient(circle at 7% 8%, rgba(var(--brand-rgb), .20), transparent 14rem),
    radial-gradient(circle at 87% 6%, rgba(216, 156, 54, .14), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 86%, #020617), color-mix(in srgb, var(--surface-subtle) 72%, #020617));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .32);
}

[data-theme="dark"] .copilot-orb {
  background:
    radial-gradient(circle at center, var(--surface) 0 57%, transparent 58%),
    conic-gradient(var(--orb-tone) var(--score), rgba(255, 255, 255, .10) 0);
  box-shadow:
    inset 0 0 0 .55rem rgba(255, 255, 255, .045),
    0 24px 48px rgba(0, 0, 0, .34);
}

[data-theme="dark"] .copilot-hero-metrics span,
[data-theme="dark"] .copilot-close-card span,
[data-theme="dark"] .copilot-mini-metric,
[data-theme="dark"] .copilot-answer-metric {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .045);
}

[data-theme="dark"] .copilot-module-card,
[data-theme="dark"] .copilot-question-list button,
[data-theme="dark"] .copilot-answer-card,
[data-theme="dark"] .copilot-task,
[data-theme="dark"] .copilot-budget-row,
[data-theme="dark"] .copilot-subscription,
[data-theme="dark"] .copilot-suggestion,
[data-theme="dark"] .copilot-capture-list a,
[data-theme="dark"] .copilot-agenda-day {
  background: color-mix(in srgb, var(--surface) 86%, #020617);
}

[data-theme="dark"] .copilot-question-list button.active,
[data-theme="dark"] .copilot-question-list button:hover,
[data-theme="dark"] .copilot-budget-main,
[data-theme="dark"] .copilot-close-card,
[data-theme="dark"] .copilot-mini-metric {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
}

@media (max-width: 1499.98px) {
  .copilot-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .copilot-hero {
    grid-template-columns: 1fr;
  }

  .copilot-orb {
    width: 100%;
    height: auto;
    min-height: 7.5rem;
  }

  .copilot-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .copilot-ask-layout,
  .copilot-suggestion-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .copilot-hero-metrics,
  .copilot-close-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .copilot-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .copilot-hero {
    padding: 1rem;
  }

  .copilot-hero-metrics,
  .copilot-close-card,
  .copilot-hero-actions {
    grid-template-columns: 1fr;
  }

  .copilot-module-grid {
    grid-template-columns: 1fr;
  }

  .copilot-answer-card,
  .copilot-task,
  .copilot-budget-row,
  .copilot-subscription,
  .copilot-suggestion {
    grid-template-columns: 1fr;
  }
}

/* Mis Gastos v53 — Laboratorio de decisiones */
.intention-card {
  display: grid;
  gap: .7rem;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .12), transparent 8rem),
    color-mix(in srgb, var(--brand-light) 42%, #fff);
}

.intention-card strong {
  display: block;
  margin-bottom: .12rem;
  font-size: .94rem;
}

.intention-card small {
  display: block;
  color: var(--muted);
  font-size: .74rem;
}

.intention-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
}

.intention-tags button,
.decision-tag-preview span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border));
  border-radius: 999px;
  padding: .43rem .62rem;
  color: color-mix(in srgb, var(--text) 76%, var(--brand));
  background: rgba(255, 255, 255, .72);
  font-size: .72rem;
  font-weight: 820;
}

.intention-tags button.active,
.intention-tags button:hover {
  color: #fff;
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  transform: translateY(-1px);
}

.decision-lab-heading {
  align-items: flex-end;
}

.decision-lab-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(19rem, .72fr);
  gap: 1.25rem;
  align-items: stretch;
  overflow: hidden;
  padding: clamp(1.1rem, 2.5vw, 1.8rem);
  border: 1px solid color-mix(in srgb, var(--brand) 13%, var(--border));
  background:
    radial-gradient(circle at 5% 0%, rgba(var(--brand-rgb), .18), transparent 15rem),
    radial-gradient(circle at 80% 0%, rgba(216, 156, 54, .19), transparent 17rem),
    linear-gradient(135deg, #fff, color-mix(in srgb, var(--brand-light) 52%, #fff));
  box-shadow: 0 30px 72px rgba(12, 39, 29, .11);
}

.decision-lab-hero::before {
  content: "";
  position: absolute;
  inset: auto -6rem -7rem auto;
  width: 19rem;
  height: 19rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, .74), transparent 68%);
  pointer-events: none;
}

.decision-lab-score {
  --decision-tone: var(--brand);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-self: center;
  width: clamp(7.2rem, 12vw, 8.8rem);
  height: clamp(7.2rem, 12vw, 8.8rem);
  border-radius: 2.25rem;
  background:
    radial-gradient(circle at center, var(--surface) 0 57%, transparent 58%),
    conic-gradient(var(--decision-tone) var(--score), rgba(255,255,255,.7) 0);
  box-shadow:
    inset 0 0 0 .52rem rgba(255,255,255,.72),
    0 24px 48px rgba(12, 39, 29, .16);
}

.decision-lab-hero.success .decision-lab-score { --decision-tone: var(--ingreso); }
.decision-lab-hero.warning .decision-lab-score { --decision-tone: #d89c36; }
.decision-lab-hero.danger .decision-lab-score { --decision-tone: var(--gasto); }

.decision-lab-score strong {
  font-size: clamp(2.05rem, 5vw, 3rem);
  line-height: .9;
  letter-spacing: -.08em;
}

.decision-lab-score span {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.decision-lab-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.decision-lab-hero-copy h2 {
  margin: .55rem 0 .4rem;
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  letter-spacing: -.05em;
}

.decision-lab-hero-copy p {
  max-width: 50rem;
  color: var(--muted);
  line-height: 1.55;
}

.decision-purchase-form {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(8rem, .7fr) minmax(8rem, .7fr);
  gap: .6rem;
  margin-top: 1rem;
}

.decision-purchase-form .form-control,
.decision-purchase-form .form-select {
  min-height: 3rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .82);
}

.decision-purchase-result {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .65rem;
  align-content: center;
  min-height: 100%;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

.decision-purchase-result small {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.decision-purchase-result > strong {
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing: -.045em;
}

.decision-purchase-result > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.decision-purchase-result > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.decision-purchase-result > div span {
  display: grid;
  gap: .08rem;
  min-width: 0;
  padding: .58rem .65rem;
  border-radius: .85rem;
  background: rgba(255,255,255,.72);
}

.decision-purchase-result b {
  overflow: hidden;
  font-size: .9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decision-purchase-result.is-success { border-color: color-mix(in srgb, var(--ingreso) 30%, rgba(255,255,255,.66)); }
.decision-purchase-result.is-warning { border-color: color-mix(in srgb, #d89c36 38%, rgba(255,255,255,.66)); }
.decision-purchase-result.is-danger { border-color: color-mix(in srgb, var(--gasto) 34%, rgba(255,255,255,.66)); }
.decision-purchase-result.is-success > strong { color: var(--ingreso); }
.decision-purchase-result.is-warning > strong { color: #b87914; }
.decision-purchase-result.is-danger > strong { color: var(--gasto); }

.decision-module-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(6.9rem, 1fr));
  gap: .72rem;
}

.decision-module-card {
  position: relative;
  display: grid;
  gap: .28rem;
  min-height: 8.15rem;
  padding: .88rem;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--border));
  border-radius: 1.18rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .10), transparent 7rem),
    var(--surface);
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.decision-module-card:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.decision-module-card span {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: .65rem;
  color: var(--brand);
  background: var(--brand-light);
  font-size: .7rem;
  font-weight: 950;
}

.decision-module-card i {
  position: absolute;
  top: .76rem;
  right: .76rem;
  color: color-mix(in srgb, var(--brand) 82%, #fff);
  font-size: 1.2rem;
}

.decision-module-card strong {
  align-self: end;
  margin-top: 1.1rem;
  font-size: .88rem;
  line-height: 1.12;
}

.decision-module-card small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.32;
}

.decision-panel {
  position: relative;
  overflow: hidden;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--brand) 8%, var(--border));
}

.decision-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: .22rem;
  background: linear-gradient(90deg, var(--brand), #67c494, #d89c36);
  opacity: .72;
}

.decision-panel:target {
  box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .12), var(--shadow-hover);
}

.decision-panel.success::before { background: linear-gradient(90deg, var(--ingreso), var(--brand)); }
.decision-panel.warning::before { background: linear-gradient(90deg, #d89c36, var(--brand)); }
.decision-panel.danger::before { background: linear-gradient(90deg, var(--gasto), #d89c36); }

.decision-daily-orbit,
.decision-lifestyle {
  display: grid;
  gap: .15rem;
  min-height: 9rem;
  align-content: center;
  margin-bottom: .8rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
  border-radius: 1.18rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .14), transparent 8rem),
    color-mix(in srgb, var(--brand-light) 44%, #fff);
}

.decision-daily-orbit strong,
.decision-lifestyle strong {
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  letter-spacing: -.055em;
}

.decision-daily-orbit span,
.decision-lifestyle span {
  color: var(--muted);
  line-height: 1.42;
}

.decision-lifestyle small {
  color: var(--brand);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.decision-tag-preview {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
}

.decision-list {
  display: grid;
  gap: .62rem;
}

.decision-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .72rem;
  align-items: center;
  min-width: 0;
  padding: .78rem;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--brand-light) 8%);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.decision-row:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  box-shadow: 0 12px 24px rgba(12, 39, 29, .08);
  transform: translateY(-2px);
}

.decision-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decision-row small {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.35;
}

.decision-row em {
  color: var(--text);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.decision-row.success { border-color: color-mix(in srgb, var(--ingreso) 24%, var(--border)); }
.decision-row.warning { border-color: color-mix(in srgb, #d89c36 30%, var(--border)); }
.decision-row.danger { border-color: color-mix(in srgb, var(--gasto) 28%, var(--border)); }
.decision-row.info { border-color: color-mix(in srgb, var(--brand) 18%, var(--border)); }

.emotion-map {
  display: grid;
  gap: .72rem;
}

.emotion-track {
  display: grid;
  gap: .3rem;
  padding: .78rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--brand-light) 8%);
}

.emotion-track span {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 850;
}

.emotion-track strong {
  font-size: 1.05rem;
}

.emotion-track > div {
  height: .5rem;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
}

.emotion-track > div i {
  display: block;
  height: 100%;
  min-width: .35rem;
  border-radius: inherit;
  background: var(--brand);
}

.emotion-track.success > div i { background: var(--ingreso); }
.emotion-track.warning > div i { background: #d89c36; }
.emotion-track.danger > div i { background: var(--gasto); }
.emotion-track.muted > div i { background: var(--muted); }

.emotion-track small {
  color: var(--muted);
  font-size: .72rem;
}

.story-shell {
  position: relative;
  min-height: 20.2rem;
}

.story-card {
  display: none;
  min-height: 17rem;
  overflow: hidden;
  padding: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--border));
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .16), transparent 12rem),
    radial-gradient(circle at 100% 0%, rgba(216, 156, 54, .16), transparent 12rem),
    linear-gradient(145deg, color-mix(in srgb, #fff 92%, var(--brand-light) 8%), #fff);
}

.story-card.active {
  display: grid;
  align-content: center;
  gap: .55rem;
  animation: softReveal .28s ease both;
}

.story-card .story-count {
  width: max-content;
  padding: .28rem .52rem;
  border-radius: 999px;
  color: var(--brand);
  background: var(--brand-light);
  font-size: .68rem;
  font-weight: 900;
}

.story-card > i {
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 1.1rem;
  color: #fff;
  background: linear-gradient(145deg, var(--brand), var(--brand-dark));
  box-shadow: 0 15px 30px rgba(var(--brand-rgb), .18);
  font-size: 1.35rem;
}

.story-card h3 {
  max-width: 32rem;
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  letter-spacing: -.045em;
}

.story-card p {
  max-width: 40rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.story-card > strong {
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  letter-spacing: -.06em;
}

.story-controls {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .75rem;
}

.mission-row {
  cursor: pointer;
}

.mission-row input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--brand);
}

.mission-row.is-done {
  opacity: .72;
  background: color-mix(in srgb, var(--ingreso) 8%, var(--surface));
}

.mission-row.is-done strong,
.mission-row.is-done small {
  text-decoration: line-through;
}

.ui-ready .decision-lab-hero,
.ui-ready .decision-module-card,
.ui-ready .decision-panel,
.ui-ready .intention-card {
  animation: softReveal .52s var(--spring) both;
  animation-delay: calc(var(--reveal-order, 0) * 32ms);
}

[data-theme="dark"] .intention-card,
[data-theme="dark"] .decision-lab-hero {
  background:
    radial-gradient(circle at 5% 0%, rgba(var(--brand-rgb), .20), transparent 15rem),
    radial-gradient(circle at 80% 0%, rgba(216, 156, 54, .13), transparent 17rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 86%, #020617), color-mix(in srgb, var(--surface-subtle) 72%, #020617));
}

[data-theme="dark"] .decision-lab-score {
  background:
    radial-gradient(circle at center, var(--surface) 0 57%, transparent 58%),
    conic-gradient(var(--decision-tone) var(--score), rgba(255,255,255,.10) 0);
  box-shadow:
    inset 0 0 0 .52rem rgba(255,255,255,.045),
    0 24px 48px rgba(0, 0, 0, .34);
}

[data-theme="dark"] .decision-purchase-form .form-control,
[data-theme="dark"] .decision-purchase-form .form-select,
[data-theme="dark"] .decision-purchase-result,
[data-theme="dark"] .decision-purchase-result > div span,
[data-theme="dark"] .intention-tags button,
[data-theme="dark"] .decision-tag-preview span {
  background: rgba(255, 255, 255, .045);
}

[data-theme="dark"] .decision-module-card,
[data-theme="dark"] .decision-daily-orbit,
[data-theme="dark"] .decision-lifestyle,
[data-theme="dark"] .decision-row,
[data-theme="dark"] .emotion-track,
[data-theme="dark"] .story-card {
  background: color-mix(in srgb, var(--surface) 86%, #020617);
}

@media (max-width: 1499.98px) {
  .decision-module-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1199.98px) {
  .decision-lab-hero {
    grid-template-columns: 1fr;
  }

  .decision-lab-score {
    width: 100%;
    height: auto;
    min-height: 7.3rem;
  }
}

@media (max-width: 991.98px) {
  .decision-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decision-purchase-form,
  .decision-purchase-result > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .decision-lab-hero {
    padding: 1rem;
  }

  .decision-module-grid,
  .decision-row {
    grid-template-columns: 1fr;
  }

  .story-card {
    min-height: 19rem;
  }
}

/* Mis Gastos v55 — Centro vivo: períodos y movimientos editables */
.living-heading {
  align-items: flex-end;
}

.living-heading-actions {
  display: grid;
  justify-items: end;
  gap: .55rem;
}

.living-period-nav {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, var(--brand-light) 12%);
  box-shadow: var(--shadow);
}

.living-period-nav a {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  min-height: 2.15rem;
  padding: .38rem .7rem;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: .74rem;
  font-weight: 850;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.living-period-nav a:hover {
  color: var(--brand);
  background: var(--surface);
  transform: translateY(-1px);
}

.living-period-form {
  display: flex;
  justify-content: flex-end;
  gap: .45rem;
}

.living-period-form .form-select {
  min-width: 7.7rem;
}

.living-hero {
  --living-tone: var(--brand);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.35rem;
  align-items: center;
  overflow: hidden;
  padding: clamp(1.15rem, 2.8vw, 1.95rem);
  border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--border));
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--brand-rgb), .20), transparent 15rem),
    radial-gradient(circle at 88% 0%, rgba(216, 156, 54, .20), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, #fff 90%, var(--brand-light) 10%), #fff);
  box-shadow: 0 30px 70px rgba(12, 39, 29, .11);
}

.living-hero::before,
.living-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

.living-hero::before {
  inset: -7rem auto auto -5rem;
  width: 18rem;
  height: 18rem;
  background: radial-gradient(circle, rgba(var(--brand-rgb), .14), transparent 66%);
}

.living-hero::after {
  right: -4.5rem;
  bottom: -8rem;
  width: 20rem;
  height: 20rem;
  border: 1px solid rgba(var(--brand-rgb), .12);
  box-shadow: 0 0 0 3rem rgba(var(--brand-rgb), .035), 0 0 0 6rem rgba(216, 156, 54, .035);
}

.living-hero.success { --living-tone: var(--ingreso); }
.living-hero.warning { --living-tone: #d89c36; }
.living-hero.danger { --living-tone: var(--gasto); }

.living-orb,
.living-close-score,
.living-bank-score > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 2rem;
  color: var(--text);
  background:
    radial-gradient(circle at center, var(--surface) 0 58%, transparent 59%),
    conic-gradient(var(--living-tone, var(--brand)) var(--score), rgba(255, 255, 255, .70) 0);
  box-shadow:
    inset 0 0 0 .55rem rgba(255, 255, 255, .70),
    0 24px 50px rgba(12, 39, 29, .15);
}

.living-orb {
  width: clamp(7.3rem, 13vw, 9rem);
  height: clamp(7.3rem, 13vw, 9rem);
}

.living-orb strong,
.living-close-score strong,
.living-bank-score strong {
  display: block;
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: .9;
  letter-spacing: -.08em;
}

.living-orb span,
.living-close-score small,
.living-bank-score small {
  display: block;
  margin-top: .16rem;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.living-hero-copy,
.living-hero-actions {
  position: relative;
  z-index: 1;
}

.living-hero-copy h2 {
  margin: .55rem 0 .35rem;
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  letter-spacing: -.055em;
}

.living-hero-copy p {
  max-width: 58rem;
  margin: 0;
  color: var(--muted);
  font-size: .99rem;
  line-height: 1.55;
}

.living-kpi-strip,
.living-calendar-summary,
.living-rule-head,
.living-habit-total,
.living-editable-summary,
.living-report-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 1.1rem;
}

.living-kpi-strip span,
.living-calendar-summary span,
.living-rule-head span,
.living-habit-total span,
.living-editable-summary span,
.living-report-kpis span {
  display: grid;
  gap: .12rem;
  min-width: 0;
  padding: .82rem .9rem;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.living-kpi-strip small,
.living-calendar-summary small,
.living-rule-head small,
.living-habit-total small,
.living-editable-summary small,
.living-report-kpis small {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.living-kpi-strip strong,
.living-calendar-summary strong,
.living-rule-head strong,
.living-habit-total strong,
.living-editable-summary strong,
.living-report-kpis strong {
  overflow: hidden;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.living-hero-actions {
  display: grid;
  gap: .65rem;
  min-width: 11.5rem;
}

.living-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr));
  gap: .75rem;
}

.living-module-card {
  position: relative;
  display: grid;
  gap: .32rem;
  min-height: 8.4rem;
  padding: .92rem;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--brand) 10%, var(--border));
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .11), transparent 7rem),
    linear-gradient(145deg, #fff, color-mix(in srgb, var(--brand-light) 30%, #fff));
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.living-module-card:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.living-module-card span {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: .65rem;
  color: var(--brand);
  background: var(--brand-light);
  font-size: .72rem;
  font-weight: 950;
}

.living-module-card i {
  position: absolute;
  right: .82rem;
  top: .82rem;
  color: color-mix(in srgb, var(--brand) 82%, #fff);
  font-size: 1.3rem;
}

.living-module-card strong {
  align-self: end;
  margin-top: 1.2rem;
  font-size: .93rem;
  line-height: 1.14;
}

.living-module-card small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}

.living-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 8%, var(--border));
  scroll-margin-top: 6.5rem;
}

.living-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: .22rem;
  background: linear-gradient(90deg, var(--brand), #6ec59a, #d89c36);
  opacity: .72;
}

.living-focus-pulse {
  animation: livingPulse .9s ease both;
}

@keyframes livingPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .24), var(--shadow); }
  55% { box-shadow: 0 0 0 .42rem rgba(var(--brand-rgb), .12), var(--shadow-hover); }
  100% { box-shadow: var(--shadow); }
}

.living-calendar-summary,
.living-rule-head,
.living-habit-total,
.living-editable-summary,
.living-report-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 .9rem;
}

.living-timeline,
.living-charge-list,
.living-rule-list,
.living-close-checklist,
.living-habit-list,
.living-alert-list {
  display: grid;
  gap: .65rem;
}

.living-editable-list {
  display: grid;
  gap: .65rem;
}

.living-timeline-item,
.living-charge-card,
.living-rule-row,
.living-check-item,
.living-habit-row,
.living-editable-row,
.living-alert-item,
.living-service-card {
  position: relative;
  display: grid;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  padding: .82rem;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 94%, var(--brand-light) 6%);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.living-timeline-item:hover,
.living-charge-card:hover,
.living-rule-row:hover,
.living-check-item:hover,
.living-habit-row:hover,
.living-alert-item:hover,
.living-editable-row:hover,
.living-service-card:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.living-timeline-item {
  grid-template-columns: 3.25rem 2.6rem minmax(0, 1fr) auto;
}

.living-timeline-item time {
  display: grid;
  place-items: center;
  min-height: 3.05rem;
  border-radius: .88rem;
  background: var(--surface);
  border: 1px solid var(--border);
}

.living-timeline-item time strong {
  font-size: 1.12rem;
  line-height: 1;
}

.living-timeline-item time small {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.living-event-icon {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: .86rem;
  color: #fff;
  background: var(--event-color, var(--brand));
}

.living-event-icon .service-logo {
  width: 2.45rem;
  height: 2.45rem;
  box-shadow: none;
}

.living-timeline-item strong,
.living-charge-card strong,
.living-rule-row strong,
.living-check-item strong,
.living-habit-row strong,
.living-editable-row strong,
.living-alert-item strong,
.living-service-card strong {
  display: block;
  overflow: hidden;
  font-size: .92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.living-timeline-item small,
.living-charge-card small,
.living-rule-row small,
.living-check-item small,
.living-habit-row small,
.living-editable-row small,
.living-alert-item small,
.living-service-card small {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}

.living-timeline-item em,
.living-charge-card em,
.living-rule-row em,
.living-check-item em,
.living-habit-row em,
.living-editable-row em,
.living-service-card em {
  color: var(--text);
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.living-timeline-item.success em { color: var(--ingreso); }
.living-timeline-item.danger em { color: var(--gasto); }

.living-charge-card,
.living-rule-row,
.living-check-item,
.living-habit-row,
.living-service-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.living-editable-row {
  grid-template-columns: 3.2rem auto minmax(0, 1fr) auto auto;
}

.living-editable-row time {
  display: grid;
  place-items: center;
  min-height: 3rem;
  border-radius: .86rem;
  border: 1px solid var(--border);
  background: var(--surface);
}

.living-editable-row time strong {
  font-size: 1.08rem;
  line-height: 1;
}

.living-editable-row time small {
  color: var(--muted);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.living-editable-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.living-editable-actions form {
  margin: 0;
}

.living-charge-card.danger,
.living-alert-item.danger,
.living-check-item.danger,
.living-habit-row.danger,
.living-editable-row.danger {
  border-color: color-mix(in srgb, var(--gasto) 28%, var(--border));
}

.living-charge-card.warning,
.living-alert-item.warning,
.living-check-item.warning,
.living-habit-row.warning,
.living-editable-row.warning {
  border-color: color-mix(in srgb, #d89c36 32%, var(--border));
}

.living-charge-card.success,
.living-alert-item.success,
.living-check-item.success,
.living-habit-row.success,
.living-editable-row.success {
  border-color: color-mix(in srgb, var(--ingreso) 25%, var(--border));
}

.living-close-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  margin-bottom: .8rem;
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .13), transparent 12rem),
    var(--surface-subtle);
}

.living-close-hero.success { --living-tone: var(--ingreso); }
.living-close-hero.warning { --living-tone: #d89c36; }
.living-close-hero.danger { --living-tone: var(--gasto); }

.living-close-score,
.living-bank-score > span {
  width: 5.8rem;
  height: 5.8rem;
  border-radius: 1.55rem;
}

.living-close-score strong,
.living-bank-score strong {
  font-size: 1.65rem;
}

.living-close-hero h3,
.living-report-card h3 {
  margin: 0 0 .25rem;
  font-size: 1.25rem;
  letter-spacing: -.04em;
}

.living-close-hero p,
.living-report-card p,
.living-bank-score p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.living-rank {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .78rem;
  color: #fff;
  background: linear-gradient(145deg, var(--brand), var(--brand-dark));
  font-size: .82rem;
  font-weight: 950;
  box-shadow: 0 10px 20px rgba(var(--brand-rgb), .18);
}

.living-projection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}

.living-projection-card {
  display: grid;
  gap: .42rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .10), transparent 9rem),
    var(--surface-subtle);
}

.living-projection-card span {
  width: max-content;
  padding: .25rem .5rem;
  border-radius: 999px;
  color: var(--brand);
  background: var(--brand-light);
  font-size: .68rem;
  font-weight: 900;
}

.living-projection-card strong {
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -.06em;
}

.living-projection-card small,
.living-projection-card em {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}

.living-projection-card div {
  display: grid;
  gap: .25rem;
  margin-top: .35rem;
}

.living-projection-card em {
  font-style: normal;
}

.living-projection-card.danger { border-color: color-mix(in srgb, var(--gasto) 28%, var(--border)); }
.living-projection-card.warning { border-color: color-mix(in srgb, #d89c36 32%, var(--border)); }
.living-projection-card.success { border-color: color-mix(in srgb, var(--ingreso) 25%, var(--border)); }

.living-projection-note {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin-top: .9rem;
  padding: .78rem .86rem;
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border));
  border-radius: 1rem;
  color: var(--muted);
  background: var(--brand-light);
  font-size: .78rem;
}

.living-projection-note i {
  color: var(--brand);
}

.living-alert-item {
  grid-template-columns: auto minmax(0, 1fr);
}

.living-bank-score {
  --living-tone: var(--brand);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: center;
  padding: .95rem;
  border-radius: 1.15rem;
  background: var(--surface-subtle);
}

.living-bank-score.success { --living-tone: var(--ingreso); }
.living-bank-score.warning { --living-tone: #d89c36; }
.living-bank-score.info { --living-tone: var(--brand); }

.living-bank-score small {
  display: block;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.living-bank-score > div > strong {
  display: block;
  margin: .12rem 0 .2rem;
  font-size: 1.18rem;
}

.living-bank-steps {
  display: grid;
  gap: .45rem;
  margin-top: .75rem;
}

.living-bank-steps span {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .65rem;
  border-radius: .8rem;
  color: var(--muted);
  background: var(--surface-subtle);
  font-size: .76rem;
  font-weight: 800;
}

.living-bank-steps span.done {
  color: var(--ingreso);
  background: color-mix(in srgb, var(--ingreso) 10%, var(--surface));
}

.living-report-card {
  padding: 1rem;
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(216, 156, 54, .18), transparent 10rem),
    linear-gradient(145deg, color-mix(in srgb, #fff 92%, var(--brand-light) 8%), #fff);
}

.living-report-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: .9rem;
}

.living-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .9rem;
}

.living-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .7rem;
}

.living-service-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.ui-ready .living-heading,
.ui-ready .living-hero,
.ui-ready .living-module-card,
.ui-ready .living-panel,
.ui-ready .living-timeline-item,
.ui-ready .living-charge-card,
.ui-ready .living-rule-row,
.ui-ready .living-check-item,
.ui-ready .living-habit-row,
.ui-ready .living-editable-row,
.ui-ready .living-projection-card,
.ui-ready .living-alert-item,
.ui-ready .living-service-card {
  animation: softReveal .52s var(--spring) both;
  animation-delay: calc(var(--reveal-order, 0) * 30ms);
}

[data-theme="dark"] .living-hero {
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--brand-rgb), .18), transparent 15rem),
    radial-gradient(circle at 88% 0%, rgba(216, 156, 54, .14), transparent 16rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, #020617), color-mix(in srgb, var(--surface-subtle) 78%, #020617));
}

[data-theme="dark"] .living-orb,
[data-theme="dark"] .living-close-score,
[data-theme="dark"] .living-bank-score > span {
  background:
    radial-gradient(circle at center, var(--surface) 0 58%, transparent 59%),
    conic-gradient(var(--living-tone, var(--brand)) var(--score), rgba(255,255,255,.10) 0);
  box-shadow:
    inset 0 0 0 .55rem rgba(255,255,255,.045),
    0 24px 50px rgba(0, 0, 0, .34);
}

[data-theme="dark"] .living-kpi-strip span,
[data-theme="dark"] .living-period-nav,
[data-theme="dark"] .living-calendar-summary span,
[data-theme="dark"] .living-rule-head span,
[data-theme="dark"] .living-habit-total span,
[data-theme="dark"] .living-editable-summary span,
[data-theme="dark"] .living-report-kpis span,
[data-theme="dark"] .living-module-card,
[data-theme="dark"] .living-timeline-item,
[data-theme="dark"] .living-charge-card,
[data-theme="dark"] .living-rule-row,
[data-theme="dark"] .living-check-item,
[data-theme="dark"] .living-habit-row,
[data-theme="dark"] .living-editable-row,
[data-theme="dark"] .living-alert-item,
[data-theme="dark"] .living-service-card,
[data-theme="dark"] .living-close-hero,
[data-theme="dark"] .living-projection-card,
[data-theme="dark"] .living-bank-score,
[data-theme="dark"] .living-report-card {
  background: color-mix(in srgb, var(--surface) 88%, #020617);
  border-color: color-mix(in srgb, var(--border) 80%, rgba(255,255,255,.08));
}

[data-theme="dark"] .living-projection-note {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}

@media (max-width: 1199.98px) {
  .living-hero {
    grid-template-columns: 1fr;
  }

  .living-hero-actions {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}

@media (max-width: 991.98px) {
  .living-kpi-strip,
  .living-projection-grid {
    grid-template-columns: 1fr;
  }

  .living-calendar-summary,
  .living-rule-head,
  .living-habit-total,
  .living-editable-summary,
  .living-report-kpis {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .living-hero {
    padding: 1rem;
  }

  .living-hero-actions,
  .living-timeline-item,
  .living-charge-card,
  .living-rule-row,
  .living-check-item,
  .living-habit-row,
  .living-editable-row,
  .living-alert-item,
  .living-service-card,
  .living-close-hero,
  .living-bank-score {
    grid-template-columns: 1fr;
  }

  .living-timeline-item em,
  .living-charge-card em,
  .living-rule-row em,
  .living-check-item em,
  .living-habit-row em,
  .living-editable-row em,
  .living-service-card em {
    white-space: normal;
  }
}

@media (max-width: 767.98px) {
  .living-heading-actions,
  .transaction-period-actions {
    width: 100%;
    justify-items: stretch;
  }

  .living-period-nav,
  .living-period-form {
    width: 100%;
  }

  .living-period-nav {
    justify-content: space-between;
  }

  .living-period-nav a {
    justify-content: center;
    flex: 1 1 0;
    padding-inline: .42rem;
  }

  .living-period-nav a span {
    display: none;
  }

  .living-period-form .form-select {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* v56: pantallas administrativas más guiadas y consistentes */
.legacy-hero {
  padding: clamp(1rem, 2.5vw, 1.45rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 1rem;
  align-items: stretch;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 95% 0%, rgba(var(--accent-rgb), .16), transparent 16rem),
    radial-gradient(circle at 0% 100%, rgba(var(--brand-rgb), .10), transparent 18rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--brand-light)), var(--surface));
}

.legacy-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--ems-blue), var(--brand), var(--accent));
}

.legacy-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
}

.legacy-hero-copy h1 {
  margin-top: .25rem;
  letter-spacing: -.055em;
}

.legacy-hero-copy p {
  max-width: 58ch;
  margin: .35rem 0 0;
  color: var(--muted);
}

.legacy-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.legacy-hero-grid > div {
  min-height: 6.25rem;
  display: grid;
  align-content: space-between;
  gap: .35rem;
  padding: .85rem;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 1rem;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.legacy-hero-grid small {
  color: var(--muted);
  font-size: .62rem;
  font-weight: 880;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.legacy-hero-grid strong {
  color: var(--ems-ink);
  font-size: clamp(1rem, 2vw, 1.28rem);
  font-weight: 860;
  letter-spacing: -.045em;
}

.legacy-period-form {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  align-items: center;
  padding-top: .15rem;
}

.legacy-period-form .form-select {
  width: auto;
  min-width: 9rem;
}

.legacy-form-card .section-title h2,
.card > .section-title h2 {
  line-height: 1.2;
}

.list-mode-banner {
  padding: 1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: center;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .12), transparent 12rem),
    var(--surface);
}

.list-mode-banner h2 {
  margin: .15rem 0 .2rem;
  font-size: 1.05rem;
  letter-spacing: -.035em;
}

.list-mode-banner p {
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
}

.transaction-list-mode .transaction-list-card {
  min-height: 70vh;
}

.living-period-nav a.active {
  color: #fff;
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 12px 26px rgba(var(--brand-rgb), .20);
}

.cashflow-mobile-card-list {
  display: none;
  padding: 0;
  overflow: hidden;
}

.cashflow-mobile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  padding: 1rem;
}

.cashflow-mobile-month {
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface-subtle);
}

.cashflow-mobile-month.is-positive {
  border-color: color-mix(in srgb, var(--ingreso) 26%, var(--border));
  background: color-mix(in srgb, var(--ingreso) 8%, var(--surface));
}

.cashflow-mobile-month.is-negative {
  border-color: color-mix(in srgb, var(--gasto) 24%, var(--border));
  background: color-mix(in srgb, var(--gasto) 7%, var(--surface));
}

.cashflow-mobile-month-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: .75rem;
}

.cashflow-mobile-month-head small {
  display: block;
  color: var(--muted);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cashflow-mobile-month-head strong {
  display: block;
  margin-top: .12rem;
  font-size: 1rem;
}

.cashflow-mobile-month-head em {
  font-style: normal;
  font-weight: 880;
  letter-spacing: -.035em;
  color: var(--brand);
  text-align: right;
}

.cashflow-mobile-month.is-positive .cashflow-mobile-month-head em { color: var(--ingreso); }
.cashflow-mobile-month.is-negative .cashflow-mobile-month-head em { color: var(--gasto); }

.cashflow-mobile-lines {
  display: grid;
  gap: .42rem;
}

.cashflow-mobile-lines span {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .42rem .5rem;
  border-radius: .68rem;
  background: rgba(255,255,255,.58);
  font-variant-numeric: tabular-nums;
}

.cashflow-mobile-lines small {
  color: var(--muted);
  font-size: .63rem;
  font-weight: 820;
}

.cashflow-mobile-lines strong {
  font-size: .76rem;
}

.cashflow-mobile-month a {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-top: .75rem;
  color: var(--brand);
  font-size: .72rem;
  font-weight: 820;
  text-decoration: none;
}

.sidebar-nav {
  scrollbar-color: rgba(255,255,255,.18) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: .42rem;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.sidebar-nav:hover::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.28);
}

[data-theme="dark"] .legacy-hero,
[data-theme="dark"] .list-mode-banner {
  background:
    radial-gradient(circle at 95% 0%, rgba(var(--accent-rgb), .12), transparent 16rem),
    radial-gradient(circle at 0% 100%, rgba(var(--brand-rgb), .12), transparent 18rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, #020617), var(--surface));
}

[data-theme="dark"] .legacy-hero-grid > div,
[data-theme="dark"] .cashflow-mobile-lines span,
[data-theme="dark"] .cashflow-mobile-month {
  background: color-mix(in srgb, var(--surface-subtle) 82%, #020617);
  border-color: color-mix(in srgb, var(--border) 80%, rgba(255,255,255,.08));
}

[data-theme="dark"] .legacy-hero-grid strong {
  color: var(--text);
}

@media (max-width: 991.98px) {
  .legacy-hero {
    grid-template-columns: 1fr;
  }

  .legacy-hero-grid,
  .cashflow-mobile-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cashflow-mobile-card-list {
    display: block;
  }

  .cashflow-card {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .list-mode-banner {
    grid-template-columns: 1fr;
  }

  .list-mode-banner .mini-icon {
    width: 2.35rem;
    height: 2.35rem;
  }

  .legacy-period-form {
    justify-content: stretch;
  }

  .legacy-period-form .form-select {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (max-width: 575.98px) {
  .legacy-hero-grid,
  .cashflow-mobile-grid {
    grid-template-columns: 1fr;
  }

  .legacy-hero-grid > div {
    min-height: auto;
  }
}

/* v57: Transacciones con más aire y acciones masivas */
.transaction-form-card .decision-guard-card {
  grid-template-columns: 1fr;
  gap: .68rem;
  padding: .82rem;
  border-radius: 1.05rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--brand-rgb), .11), transparent 9rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 97%, #fff), color-mix(in srgb, var(--surface-subtle) 88%, #fff));
}

.transaction-form-card .decision-guard-orb {
  width: 100%;
  min-height: 3.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .68rem .78rem;
  border-radius: .95rem;
  text-align: left;
}

.transaction-form-card .decision-guard-orb span,
.transaction-form-card .decision-guard-orb strong,
.transaction-form-card .decision-guard-orb em {
  margin: 0;
}

.transaction-form-card .decision-guard-orb strong {
  flex: 1 1 auto;
  font-size: clamp(1rem, 1.8vw, 1.22rem);
  text-align: center;
}

.transaction-form-card .decision-guard-orb em {
  max-width: 6.8rem;
  text-align: right;
}

.transaction-form-card .decision-guard-copy .eyebrow {
  margin-bottom: .18rem;
  font-size: .55rem;
  letter-spacing: .105em;
}

.transaction-form-card .decision-guard-copy h3 {
  margin-bottom: .16rem;
  font-size: .98rem;
  line-height: 1.13;
}

.transaction-form-card .decision-guard-copy p {
  font-size: .74rem;
  line-height: 1.42;
}

.transaction-form-card .decision-guard-metrics {
  grid-template-columns: 1fr;
  gap: .42rem;
  margin-top: .72rem;
}

.transaction-form-card .decision-guard-metrics span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  min-height: auto;
  padding: .44rem .58rem;
}

.transaction-form-card .decision-guard-metrics small {
  line-height: 1.15;
  white-space: normal;
}

.transaction-form-card .decision-guard-metrics strong {
  flex: 0 0 auto;
  text-align: right;
}

.transaction-form-card .decision-guard-script {
  align-items: flex-start;
  padding: .6rem .65rem;
  border-radius: .82rem;
}

.transaction-bulk-bar {
  position: sticky;
  z-index: 5;
  top: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  margin: .95rem 0 1rem;
  padding: .72rem;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .08), transparent 10rem),
    color-mix(in srgb, var(--surface) 94%, var(--surface-subtle));
  box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.transaction-bulk-bar.has-selection {
  border-color: color-mix(in srgb, var(--gasto) 34%, var(--border));
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--gasto-rgb), .10), transparent 10rem),
    color-mix(in srgb, var(--surface) 96%, #fff1f2);
  box-shadow: 0 18px 38px rgba(var(--gasto-rgb), .10);
}

.bulk-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
}

.bulk-copy strong,
.bulk-copy small {
  display: block;
}

.bulk-copy strong {
  color: var(--ems-ink);
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: -.025em;
}

.bulk-copy small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.25;
}

.bulk-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
}

.movement-item {
  grid-template-columns: 2.35rem 4.25rem minmax(0, 1fr) minmax(145px, auto);
  gap: 1rem;
  align-items: center;
  padding: .92rem .96rem .92rem .72rem;
}

.movement-select {
  align-self: center;
  display: inline-grid;
  place-items: center;
  margin: 0;
  cursor: pointer;
}

.movement-select input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.movement-select span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: .72rem;
  color: transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), transparent),
    color-mix(in srgb, var(--surface-subtle) 80%, #fff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  transition: transform .18s var(--spring), border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

.movement-select:hover span,
.movement-select input:focus-visible + span {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
  color: var(--brand);
  transform: scale(1.03);
}

.movement-select input:checked + span {
  color: #fff;
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  box-shadow: 0 12px 22px rgba(var(--brand-rgb), .18);
}

.movement-item.is-selected {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--border));
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .09), transparent 11rem),
    color-mix(in srgb, var(--surface) 95%, var(--brand-light));
  box-shadow: 0 16px 34px rgba(var(--brand-rgb), .10);
}

.movement-item.is-selected .movement-date {
  border-color: color-mix(in srgb, var(--brand) 36%, var(--border));
  background: color-mix(in srgb, var(--brand-light) 58%, var(--surface));
}

.transaction-flash {
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: .9rem;
}

[data-theme="dark"] .transaction-bulk-bar,
[data-theme="dark"] .movement-select span {
  background: color-mix(in srgb, var(--surface-subtle) 82%, #020617);
  border-color: color-mix(in srgb, var(--border) 80%, rgba(255,255,255,.08));
}

[data-theme="dark"] .transaction-bulk-bar.has-selection,
[data-theme="dark"] .movement-item.is-selected {
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), .14), transparent 11rem),
    color-mix(in srgb, var(--surface) 88%, #020617);
}

[data-theme="dark"] .bulk-copy strong {
  color: var(--text);
}

@media (min-width: 1400px) {
  .transaction-form-card .decision-guard-card {
    padding: 1rem;
  }
}

@media (max-width: 1199.98px) {
  .transaction-bulk-bar {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .transaction-bulk-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .bulk-actions {
    justify-content: stretch;
  }

  .bulk-actions .btn {
    flex: 1 1 100%;
  }

  .movement-item {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .movement-date {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    justify-content: center;
    gap: .35rem;
    min-height: auto;
    padding: .45rem;
  }

  .movement-select {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    padding-top: .1rem;
  }

  .movement-main,
  .movement-side {
    grid-column: 2;
  }

  .movement-side {
    align-items: flex-start;
    text-align: left;
  }

  .transaction-form-card .decision-guard-orb {
    align-items: flex-start;
    flex-direction: column;
  }

  .transaction-form-card .decision-guard-orb strong,
  .transaction-form-card .decision-guard-orb em {
    text-align: left;
  }
}

/* v58: Antídoto más compacto y modo selección con mejor respiración */
.transaction-form-card .decision-guard-card {
  gap: .55rem;
  padding: .72rem;
}

.transaction-form-card .decision-guard-orb {
  min-height: 3.25rem;
  padding: .56rem .66rem;
  box-shadow: 0 12px 22px color-mix(in srgb, var(--guard-color) 19%, transparent);
}

.transaction-form-card .decision-guard-orb span {
  max-width: 4.6rem;
  font-size: .48rem;
}

.transaction-form-card .decision-guard-orb em {
  max-width: 5.8rem;
  font-size: .5rem;
}

.transaction-form-card .decision-guard-copy p {
  display: none;
}

.transaction-form-card .decision-guard-metrics {
  gap: .34rem;
  margin-top: .46rem;
}

.transaction-form-card .decision-guard-metrics span {
  padding: .38rem .5rem;
  border-radius: .68rem;
}

.transaction-form-card .decision-guard-metrics small {
  font-size: .49rem;
  letter-spacing: .07em;
}

.transaction-form-card .decision-guard-metrics strong {
  font-size: .72rem;
}

.transaction-form-card .decision-guard-script {
  margin-top: .44rem;
  padding: .46rem .52rem;
  font-size: .64rem;
  line-height: 1.22;
}

.transaction-bulk-bar {
  padding: .78rem .86rem;
}

.movement-item {
  min-height: 6.2rem;
}

.movement-title-row {
  align-items: center;
}

.movement-category {
  gap: .55rem;
}

.movement-side {
  gap: .62rem;
}

@media (min-width: 1700px) {
  .transaction-form-card .decision-guard-copy p {
    display: block;
  }
}

/* v59: Revisar hoy, buscador universal y flujo sin fricción */
.command-k-button {
  width: auto;
  min-width: 3rem;
  gap: .48rem;
  padding: 0 .82rem;
}

.command-k-button kbd,
.command-search kbd {
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface-subtle) 86%, transparent);
  color: var(--muted);
  border-radius: .48rem;
  padding: .12rem .36rem;
  font-size: .66rem;
  font-weight: 800;
  box-shadow: none;
}

.command-palette[hidden] {
  display: none !important;
}

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: start center;
  padding: clamp(1rem, 8vh, 5rem) 1rem 1rem;
}

.command-open {
  overflow: hidden;
}

.command-backdrop {
  position: fixed;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, #081b14 54%, transparent);
  backdrop-filter: blur(10px);
}

.command-dialog {
  position: relative;
  width: min(720px, 100%);
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 1.45rem;
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 34%),
    var(--card);
  box-shadow: 0 36px 90px color-mix(in srgb, #071610 34%, transparent);
  overflow: hidden;
}

.command-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border);
}

.command-search i {
  color: var(--brand);
  font-size: 1.15rem;
}

.command-search input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  min-width: 0;
}

.command-dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem .35rem;
}

.command-dialog-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.command-dialog-head small,
.command-foot {
  color: var(--muted);
  font-size: .78rem;
}

.command-results {
  display: grid;
  gap: .42rem;
  padding: .75rem;
  max-height: min(58vh, 520px);
  overflow: auto;
}

.command-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  padding: .72rem .82rem;
  color: var(--text);
  text-decoration: none;
  background: color-mix(in srgb, var(--surface-subtle) 58%, transparent);
}

.command-result:hover,
.command-result.is-first {
  border-color: color-mix(in srgb, var(--brand) 26%, var(--border));
  background: color-mix(in srgb, var(--brand) 9%, var(--card));
  transform: translateY(-1px);
}

.command-result span:not(.mini-icon) {
  min-width: 0;
}

.command-result strong,
.command-result small {
  display: block;
}

.command-result small {
  color: var(--muted);
  font-size: .78rem;
}

.command-result em {
  color: var(--muted);
  font-style: normal;
  font-size: .72rem;
  font-weight: 800;
}

.command-empty {
  display: grid;
  place-items: center;
  gap: .25rem;
  padding: 2.2rem 1rem;
  color: var(--muted);
  text-align: center;
}

.command-empty i {
  color: var(--brand);
  font-size: 1.55rem;
}

.command-empty strong,
.command-empty small {
  display: block;
}

.command-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem 1rem;
  border-top: 1px solid var(--border);
}

.daily-simple-banner,
.review-today-hero {
  display: grid;
  align-items: center;
  gap: 1rem;
  border: 0;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-subtle) 78%, transparent), var(--card));
}

.daily-simple-banner {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 1rem 1.1rem;
}

.daily-simple-banner h2 {
  margin: 0;
  font-size: clamp(1.02rem, 1.6vw, 1.35rem);
}

.daily-simple-banner p {
  margin: .15rem 0 0;
  color: var(--muted);
}

.review-today-hero {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  padding: clamp(1rem, 2.3vw, 1.65rem);
  overflow: hidden;
}

.review-today-copy h2 {
  margin: .55rem 0 .35rem;
  font-size: clamp(1.55rem, 4vw, 3rem);
  letter-spacing: -.05em;
}

.review-today-copy h2 strong {
  color: var(--brand);
  white-space: nowrap;
}

.review-today-copy p {
  max-width: 62ch;
  color: var(--muted);
  margin-bottom: 1rem;
}

.review-today-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.review-today-score {
  display: grid;
  place-items: center;
  min-height: 12rem;
  border-radius: 1.35rem;
  padding: 1rem;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.2), transparent 38%),
    linear-gradient(145deg, var(--brand), #0b3f2c);
  box-shadow: 0 22px 50px color-mix(in srgb, var(--brand) 22%, transparent);
}

.review-today-score.warning {
  background: linear-gradient(145deg, #c9851f, #74430c);
}

.review-today-score.danger {
  background: linear-gradient(145deg, #dc4f5b, #84222f);
}

.review-today-score small,
.review-today-score span {
  opacity: .86;
  font-weight: 800;
}

.review-today-score strong {
  font-size: 3.4rem;
  letter-spacing: -.08em;
  line-height: 1;
}

.review-life-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
}

.review-life-card {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.review-life-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.review-life-card strong,
.review-life-card small,
.review-life-card p {
  display: block;
}

.review-life-card small {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
}

.review-life-card strong {
  margin: .18rem 0 .24rem;
  font-size: 1.05rem;
}

.review-life-card p {
  color: var(--muted);
  margin: 0;
  font-size: .82rem;
}

.programmable-list,
.predictive-alert-list,
.closing-checklist {
  display: grid;
  gap: .72rem;
}

.programmable-card {
  display: grid;
  grid-template-columns: 4.35rem minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
  padding: .9rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: 1.05rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 5%, transparent), var(--card) 36%);
}

.programmable-card.overdue {
  border-left-color: var(--danger);
}

.programmable-card.soon {
  border-left-color: #f59e0b;
}

.programmable-date {
  display: grid;
  place-items: center;
  min-height: 4.15rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-subtle) 82%, transparent);
  border: 1px solid var(--border);
}

.programmable-date strong {
  font-size: 1.35rem;
  line-height: 1;
}

.programmable-date small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}

.programmable-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.programmable-title strong {
  font-size: 1rem;
}

.programmable-main p {
  margin: .35rem 0 .1rem;
  color: var(--text);
}

.programmable-main small {
  color: var(--muted);
}

.programmable-actions {
  display: grid;
  justify-items: end;
  gap: .42rem;
  min-width: 9.6rem;
}

.programmable-actions form {
  margin: 0;
}

.programmable-actions .btn {
  width: 100%;
  justify-content: center;
}

.predictive-alert,
.closing-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .72rem;
  padding: .78rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  color: var(--text);
  text-decoration: none;
  background: color-mix(in srgb, var(--surface-subtle) 58%, transparent);
}

.predictive-alert:hover,
.closing-check:hover {
  background: color-mix(in srgb, var(--brand) 8%, var(--card));
}

.predictive-alert strong,
.predictive-alert small,
.closing-check strong,
.closing-check small {
  display: block;
}

.predictive-alert small,
.closing-check small {
  color: var(--muted);
  font-size: .78rem;
}

.predictive-alert em,
.closing-check em {
  color: var(--brand);
  font-style: normal;
  font-weight: 900;
  font-size: .76rem;
}

.capture-mail-grid,
.capture-mail-import-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.capture-mail-card,
.capture-screenshot-card {
  display: grid;
  gap: .32rem;
  align-content: start;
  min-height: 8.5rem;
  padding: .95rem;
  border: 1px solid var(--border);
  border-radius: 1.05rem;
  background: color-mix(in srgb, var(--brand) 6%, var(--card));
  color: var(--text);
  text-decoration: none;
}

.capture-mail-card i,
.capture-screenshot-card i {
  color: var(--brand);
  font-size: 1.5rem;
}

.capture-mail-card small,
.capture-screenshot-card small {
  color: var(--muted);
}

.capture-mail-import {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.35rem);
}

.capture-mail-import h2 {
  margin: .25rem 0;
}

.capture-mail-import p {
  color: var(--muted);
  margin: 0;
}

.capture-mail-form {
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: .9rem;
  background: var(--card);
}

.monthly-close-box {
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: .8rem;
  background: color-mix(in srgb, var(--brand) 9%, var(--card));
}

.monthly-close-box.warning {
  background: color-mix(in srgb, #f59e0b 12%, var(--card));
}

.monthly-close-box.danger {
  background: color-mix(in srgb, var(--danger) 10%, var(--card));
}

.monthly-close-box strong,
.monthly-close-box p {
  display: block;
}

.monthly-close-box p {
  margin: .3rem 0 0;
  color: var(--muted);
}

.closing-check > span {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: .85rem;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.closing-check.hecho > span {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}

.collab-mode-card {
  display: flex;
  gap: .85rem;
  padding: .95rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, transparent), var(--card));
}

.collab-mode-card p {
  margin: .25rem 0 .75rem;
  color: var(--muted);
}

.collab-mode-actions,
.subscription-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.collab-mode-actions a,
.subscription-action-row a {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .62rem;
  color: var(--text);
  text-decoration: none;
  background: var(--card);
  font-size: .76rem;
  font-weight: 800;
}

.collab-mode-actions a:hover,
.subscription-action-row a:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--border));
  color: var(--brand);
}

.learning-rule-card {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, transparent), var(--card));
}

.learning-rule-main {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.learning-rule-main h2 {
  margin: .1rem 0 .15rem;
  font-size: 1.1rem;
}

.learning-rule-main p {
  margin: 0;
  color: var(--muted);
}

.learning-rule-actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.subscription-action-row {
  margin-top: .7rem;
}

.subscription-advice {
  margin-top: .65rem;
  border: 1px dashed color-mix(in srgb, var(--brand) 26%, var(--border));
  border-radius: .9rem;
  padding: .62rem .75rem;
  background: color-mix(in srgb, var(--surface-subtle) 58%, transparent);
}

.subscription-advice summary {
  cursor: pointer;
  color: var(--brand);
  font-weight: 900;
  font-size: .78rem;
}

.subscription-advice p {
  margin: .55rem 0 .35rem;
  color: var(--text);
}

.subscription-advice small {
  color: var(--muted);
}

@media (max-width: 1199.98px) {
  .review-life-grid,
  .review-today-hero,
  .daily-simple-banner,
  .capture-mail-import {
    grid-template-columns: 1fr;
  }

  .daily-simple-banner {
    align-items: flex-start;
  }
}

@media (max-width: 767.98px) {
  .command-dialog {
    border-radius: 1.1rem;
  }

  .command-foot {
    flex-direction: column;
    gap: .35rem;
  }

  .programmable-card,
  .predictive-alert,
  .closing-check,
  .learning-rule-card {
    grid-template-columns: 1fr;
  }

  .programmable-card {
    align-items: flex-start;
  }

  .programmable-actions {
    width: 100%;
    justify-items: stretch;
  }

  .programmable-actions strong {
    justify-self: start;
  }

  .capture-mail-grid,
  .capture-mail-import-actions {
    grid-template-columns: 1fr;
  }

  .learning-rule-card,
  .learning-rule-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .learning-rule-actions,
  .learning-rule-actions .btn {
    width: 100%;
  }
}