/* ============================================================
   Finanzas Familiares — hoja de estilos centralizada
   ============================================================ */

/* ====== TOKENS DE DISEÑO ====== */
:root {
  --brand: #1e40af;
  --brand-dark: #12244f;
  --brand-grad: linear-gradient(135deg, #16a34a, #15803d);
  --ink: #0f213f;
  --ink-soft: #334155;
  --muted: #64748b;
  --line: #e5e9f1;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --bg: #eef2f7;
  --bg-wave: #eef2f7;
  --chart-border: #ffffff;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 3px rgba(15,35,80,0.05), 0 1px 2px rgba(15,35,80,0.04);
  --shadow: 0 6px 18px rgba(15,35,80,0.08);
  --shadow-lg: 0 14px 34px rgba(15,35,80,0.12);
  --ring: 0 0 0 4px rgba(30,64,175,0.14);
}

/* ====== TEMA OSCURO (automático según el sistema + override manual) ====== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f3f4f6;
    --ink-soft: #d1d5db;
    --muted: #9ca3af;
    --line: #2d3548;
    --surface: #1a2030;
    --surface-2: #222a3a;
    --bg: #0f1420;
    --bg-wave: #0f1420;
    --chart-border: #1a2030;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow: 0 6px 18px rgba(0,0,0,0.45);
    --shadow-lg: 0 14px 34px rgba(0,0,0,0.55);
  }
}

:root[data-theme="dark"] {
  --ink: #f3f4f6;
  --ink-soft: #d1d5db;
  --muted: #9ca3af;
  --line: #2d3548;
  --surface: #1a2030;
  --surface-2: #222a3a;
  --bg: #0f1420;
  --bg-wave: #0f1420;
  --chart-border: #1a2030;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow: 0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg: 0 14px 34px rgba(0,0,0,0.55);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(1200px 500px at 100% -10%, rgba(37,99,235,0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(99,102,241,0.07), transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Quita el flash gris al tocar elementos en móvil */
a, button, .cat-option, .chip-option, .action-card, .stat-list-item,
.bottom-nav-item, .tab-btn, .dropdown-btn {
  -webkit-tap-highlight-color: transparent;
}

/* Animación de entrada sutil para tarjetas (premium) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .card, .panel, .stat-card, .action-card, .hero-card {
    animation: fadeUp .35s ease both;
  }
}

/* ====== HERO CARD (tarjeta principal con ola, estilo apps fintech) ====== */
.hero-card {
  position: relative;
  border-radius: 22px;
  padding: 20px 20px 38px;
  margin-bottom: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 10px 24px rgba(37,99,235,0.25);
}

.hero-card.hero-negative {
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 10px 24px rgba(249,115,22,0.25);
}

.hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
}

.hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.hero-badges {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.hero-badge {
  background: rgba(255,255,255,0.18);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.hero-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.hero-amount {
  font-size: 32px;
  font-weight: 800;
}

.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 34px;
  display: block;
}

.hero-wave path {
  fill: var(--bg-wave);
}

/* Texto de estados vacíos (hereda el tema) */
.empty-hint {
  font-size: 14px;
  color: var(--muted);
}

/* ====== PILLS (estado financiero compacto) ====== */
.pill-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

@media (min-width: 480px) {
  .pill-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pill-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.pill-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.pill-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pill-label {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
}

.pill-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.pill-green  .pill-icon { background: #dcfce7; }
.pill-red    .pill-icon { background: #fee2e2; }
.pill-blue   .pill-icon { background: #dbeafe; }
.pill-purple .pill-icon { background: #f3e8ff; }
.pill-orange .pill-icon { background: #ffedd5; }

/* ====== TÍTULOS DE SECCIÓN (ícono + texto en mayúsculas) ====== */
.panel > h3 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ====== ACTIVIDAD RECIENTE ====== */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Lista scrollable: se muestran ~6 filas y el resto (hasta 20) se recorre con la barra */
  max-height: 340px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  overscroll-behavior: contain;
}
.activity-list::-webkit-scrollbar { width: 7px; }
.activity-list::-webkit-scrollbar-track { background: transparent; }
.activity-list::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px;
}
.activity-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* Pista visual de que hay más: degradado sutil al pie de la lista */
.panel-scroll { position: relative; }
.panel-scroll.has-more::after {
  content: "";
  position: absolute; left: 0; right: 6px; bottom: 0; height: 26px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none; border-radius: 0 0 12px 12px;
}
/* Contador junto al título del panel */
.panel-count {
  font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); border-radius: 999px; padding: 2px 9px; margin-left: auto;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.activity-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--line);
}

.activity-avatar.activity-green  { background: #dcfce7; }
.activity-avatar.activity-red    { background: #fee2e2; }
.activity-avatar.activity-purple { background: #f3e8ff; }
.activity-avatar.activity-orange { background: #ffedd5; }

.activity-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.activity-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.activity-sub {
  font-size: 11.5px;
  color: var(--muted);
}

.activity-amount {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.activity-amount.amount-pos { color: #16a34a; }
.activity-amount.amount-neg { color: #dc2626; }

/* ====== TABS (Inicio / Estadísticas) ====== */
.tab-switch {
  display: flex;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 18px;
}

.tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.tab-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ====== DONUT con texto centrado ====== */
.donut-wrap {
  position: relative;
  height: 240px;
  margin-bottom: 18px;
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}

.donut-center-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.donut-center-amount {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

/* ====== LISTA DE ESTADÍSTICAS (barra de color + monto + flecha) ====== */
.stat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 14px;
  border-left: 4px solid #ccc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  text-decoration: none;
  color: var(--ink);
}

.stat-list-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.stat-list-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.stat-list-name {
  font-size: 13px;
  font-weight: 600;
}

.stat-list-pct {
  font-size: 11px;
  color: var(--muted);
}

.stat-list-amount {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.stat-list-arrow {
  font-size: 18px;
  color: #9ca3af;
  flex-shrink: 0;
}

/* ====== TOPBAR ====== */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 24px;
  margin: 0;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 14px rgba(37,99,235,0.25);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-center {
  text-align: center;
}

.topbar-center h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/* ====== MENÚ ====== */
.menu-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-link {
  text-decoration: none;
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  position: relative;
}

.menu-link:hover {
  text-decoration: underline;
}

/* ====== USUARIO (ícono + dropdown) ====== */
.user-dropdown {
  flex-shrink: 0;
  justify-self: end;
}

.user-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.user-icon-btn .ic { width: 20px; height: 20px; }

.user-icon-btn:hover {
  background: rgba(255,255,255,0.3);
}

.user-dropdown .dropdown-menu {
  left: auto;
  right: 0;
  min-width: 170px;
}

.user-dropdown-name {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.dropdown-link {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--ink-soft);
  font-family: inherit;
}

.dropdown-link:hover {
  background: var(--surface-2);
}

.dropdown-theme-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
}

.dropdown-theme-btn:hover {
  background: var(--surface-2);
}

.dropdown-logout-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 14px;
  font-size: 14px;
  color: #b91c1c;
  cursor: pointer;
  font-family: inherit;
}

.dropdown-logout-btn:hover {
  background: var(--surface-2);
}

/* ====== DROPDOWN (click, funciona en touch y desktop) ====== */
.dropdown {
  position: relative;
}

.dropdown-btn {
  cursor: pointer;
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.dropdown-btn:hover {
  text-decoration: underline;
}

.dropdown-menu {
  position: absolute;
  top: 22px;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 6px 0;
  display: none;
  min-width: 160px;
  z-index: 30;
}

.dropdown-menu a {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
}

.dropdown-menu a:hover {
  background: var(--surface-2);
}

.dropdown.is-open .dropdown-menu {
  display: block;
}

/* ====== LAYOUT GENERAL ====== */
.main-container {
  max-width: 1100px;
  margin: 24px auto;
  padding: 0 16px 40px;
}

h1, h2, h3 {
  margin-top: 0;
  font-weight: 600;
  color: var(--ink);
}

h1 { font-size: 22px; margin-bottom: 16px; }
h2 { font-size: 20px; margin-bottom: 16px; }
h3 { font-size: 16px; margin-bottom: 8px; }

/* ====== GRIDS ====== */
.cards-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

@media (min-width: 680px) {
  .cards-summary {
    grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
    gap: 16px;
  }

  .stat-card {
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 12px;
  }

  .stat-icon {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .stat-label {
    font-size: 11.5px;
  }

  .stat-amount {
    font-size: 22px;
  }
}

@media (max-width: 380px) {
  .stat-amount {
    font-size: 12.5px;
  }

  .stat-label {
    font-size: 9px;
  }
}

.grid-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.grid-three {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 20px;
  margin-bottom: 24px;
}

/* ====== CARDS / PANELES ====== */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(16,24,40,0.04);
}

.card h2, .card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.big-amount {
  font-size: 26px;
  font-weight: 600;
}

/* ====== STAT CARDS (tarjetas de resumen tipo dashboard) ====== */
.stat-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border: 1px solid #eef0f2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stat-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.stat-amount {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  word-break: break-word;
}

.stat-green  .stat-icon { background: #dcfce7; }
.stat-red    .stat-icon { background: #fee2e2; }
.stat-blue   .stat-icon { background: #dbeafe; }
.stat-purple .stat-icon { background: #f3e8ff; }
.stat-orange .stat-icon { background: #ffedd5; }

.stat-card .card-muted {
  font-size: 11px;
  line-height: 1.3;
}

.chart-wrap {
  position: relative;
  height: 260px;
}

.card-muted {
  font-size: 13px;
  color: var(--muted);
}

.panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  border: 1px solid rgba(16,24,40,0.05);
}

/* ====== TABLAS ====== */
.table-scroll {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 8px;
}

th, td {
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
}

th {
  background: var(--surface-2);
  font-weight: 600;
}

/* ====== TABLAS → TARJETAS EN CELULAR ====== */
@media (max-width: 640px) {
  .table-cards thead {
    display: none;
  }

  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td {
    display: block;
    width: 100%;
    white-space: normal;
  }

  .table-cards tr {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 4px 12px;
    background: var(--surface);
  }

  .table-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    text-align: right;
  }

  .table-cards td:last-child {
    border-bottom: none;
  }

  .table-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    font-size: 12px;
    text-align: left;
    flex-shrink: 0;
  }

  .table-cards td.td-actions {
    justify-content: flex-end;
    gap: 12px;
  }

  .table-cards td.td-actions::before {
    content: none;
  }

  .table-cards td.td-empty {
    text-align: center;
    justify-content: center;
  }

  .table-cards td.td-empty::before {
    content: none;
  }
}

/* ====== FORMULARIOS ====== */
.form-basic {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-row-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.form-row-inline-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 24px;
}

.form-inline .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-inline input, .form-inline select {
  min-width: 140px;
}

.margin-label {
  font-size: 14px;
  font-weight: 500;
  margin-top: 4px;
}

label {
  font-size: 14px;
  font-weight: 500;
}

input, select, textarea {
  font-size: 14px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid #d1d5db;
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}

textarea {
  resize: vertical;
  min-height: 60px;
}

.hint, .help-text {
  font-size: 12px;
  color: var(--muted);
}

/* ====== BOTONES ====== */
.btn-primary {
  display: inline-block;
  margin-top: 4px;
  padding: 10px 18px;
  background: var(--brand-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 8px 20px rgba(22,163,74,0.26);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 10px 24px rgba(22,163,74,0.34);
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-secondary {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background: var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  text-align: center;
}

.btn-secondary:hover {
  background: #d1d5db;
}

.btn-secondary:active {
  transform: scale(0.97);
}

.cat-option:active,
.chip-option:active {
  transform: scale(0.97);
}

.btn-small {
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .12s ease, filter .15s ease;
}

.btn-small:active {
  transform: scale(0.96);
}

.btn-filter {
  background: #10b981;
  color: #fff;
}

.btn-filter:hover {
  background: #059669;
}

.btn-reset {
  background: var(--line);
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-reset:hover {
  background: #d1d5db;
}

.link-action {
  font-size: 13px;
  color: #1e40af;
  text-decoration: none;
  margin-right: 6px;
}

.link-action:hover {
  text-decoration: underline;
}

.link-danger {
  font-size: 13px;
  color: #b91c1c;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.link-danger:hover {
  text-decoration: underline;
}

/* ====== FILTROS ====== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
  align-items: flex-end;
  font-size: 13px;
}

.filters-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filters label {
  font-weight: 500;
}

.filters input,
.filters select {
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
}

.filters-bar {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

.filters-bar .filters {
  margin-bottom: 0;
}

.search-box {
  position: relative;
  flex: 1 1 220px;
}

.search-box .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #9ca3af;
  pointer-events: none;
}

.search-box input {
  width: 100%;
  padding: 7px 10px 7px 30px;
}

/* ====== STATS ROW (resumen rápido sobre listados) ====== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.stats-row .stat-card {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.stats-row .stat-icon {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.stats-row .stat-amount {
  font-size: 16px;
}

/* ====== SELECTOR DE CATEGORÍA (chips) ====== */
.cat-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (min-width: 480px) {
  .cat-picker {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cat-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 6px;
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  background: var(--surface);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  text-align: center;
}

.cat-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cat-option .cat-icon {
  font-size: 18px;
}

.cat-option:hover {
  border-color: #93c5fd;
}

.cat-option.is-checked {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

/* ====== CHIP PICKER genérico (cantidad variable de opciones, ej. persona) ====== */
.chip-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.chip-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 6px;
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  background: var(--surface);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  text-align: center;
}

.chip-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.chip-option .chip-icon {
  font-size: 18px;
}

.chip-option:hover {
  border-color: #93c5fd;
}

.chip-option.is-checked {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

/* ====== ACTION CARDS (botones grandes de acción, ej. Ahorros) ====== */
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

@media (min-width: 480px) {
  .action-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
  }
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border-radius: 16px;
  padding: 18px 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border: 1px solid #eef0f2;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.action-card:active {
  transform: scale(0.97);
}

.stat-list-item {
  transition: transform .12s ease, box-shadow .15s ease;
}

.stat-list-item:active {
  transform: scale(0.99);
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.action-title {
  font-weight: 700;
  font-size: 13px;
}

.action-sub {
  font-size: 10.5px;
  color: var(--muted);
}

@media (min-width: 480px) {
  .action-icon { width: 56px; height: 56px; font-size: 26px; }
  .action-title { font-size: 14px; }
  .action-sub { font-size: 11.5px; }
}

.action-icon { background: var(--surface-2); color: #3b82f6; }
.action-blue   .action-icon { background: #dbeafe; }
.action-green  .action-icon { background: #dcfce7; }
.action-purple .action-icon { background: #f3e8ff; }
.action-orange .action-icon { background: #ffedd5; }

/* ====== COMPARATIVA DE QUINCENAS ====== */
.quincena-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.quincena-block {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.quincena-block h4 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.quincena-margen {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
}

.quincena-total {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.quincena-total .quincena-margen {
  font-size: 22px;
  color: #1d4ed8;
}

/* ====== TAGS / BADGES ====== */
.tag-aporte, .tag-fijo-success {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #dcfce7;
  color: #166534;
}

.tag-retiro, .tag-fijo {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #fee2e2;
  color: #b91c1c;
}

.tag-no-fijo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: #e0f2fe;
  color: #1d4ed8;
}

.badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--line);
  color: var(--ink-soft);
}

.badge-green {
  background: #dcfce7;
  color: #166534;
}

.badge-red {
  background: #fee2e2;
  color: #b91c1c;
}

.badge-blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.badge-purple {
  background: #f3e8ff;
  color: #7e22ce;
}

.badge-orange {
  background: #ffedd5;
  color: #c2410c;
}

/* ====== METAS / PRÉSTAMOS (barras de progreso) ====== */
.goals-list, .loans-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ====== Tablas de Reportes ====== */
.rtable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
.rtable { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 340px; }
.rtable thead th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); padding: 6px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.rtable tbody td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink); }
.rtable tbody tr:last-child td { border-bottom: none; }
.rtable td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.rtable td.muted { color: var(--muted); font-weight: 500; }
.rtable .pos { color: #16a34a; }
.rtable .neg { color: #dc2626; }
.rtable td:first-child { font-weight: 600; }

/* ====== Toggle Inicio / Estadísticas ====== */
.view-switch {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 14px;
  background: var(--surface-2); border-radius: 14px; border: 1px solid var(--line);
}
.vs-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px; border-radius: 11px; font-size: 14px; font-weight: 700;
  color: var(--ink-soft); text-decoration: none; transition: background .15s ease, color .15s ease;
}
.vs-btn .ic { width: 17px; height: 17px; }
.vs-btn.is-active { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(30,64,175,.24); }

/* ====== Recordatorios en Inicio ====== */
.reminders-card {
  display: block; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, rgba(234,88,12,0.10), rgba(234,88,12,0.03));
  border: 1px solid rgba(234,88,12,0.28); border-radius: 16px; padding: 13px 15px; margin-bottom: 14px;
}
.reminders-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.reminders-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #c2410c; background: rgba(234,88,12,0.16); }
.reminders-ico .ic { width: 16px; height: 16px; }
.reminders-title { font-weight: 800; font-size: 14px; color: var(--ink); }
.reminders-count { margin-left: auto; font-size: 12px; font-weight: 800; color: #c2410c; background: rgba(234,88,12,0.16); border-radius: 999px; padding: 1px 9px; }
.reminders-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.reminders-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.rem-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.rem-dot.today { background: #ea580c; } .rem-dot.late { background: #dc2626; }
.rem-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rem-when { font-size: 11px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }

/* ====== Estadísticas: secciones + grilla de gráficos ====== */
.stats-section {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); margin: 20px 2px 10px;
}
.stats-section:first-of-type { margin-top: 4px; }
.stats-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-chart { display: flex; flex-direction: column; }
.stat-chart h3 { margin: 0 0 2px; font-size: 15px; }
.stat-chart .help-text { margin: 0 0 8px; }
.stat-chart .chart-box { margin-top: auto; }
.stat-chart .empty-hint { padding: 30px 0; text-align: center; }

/* ====== CONFIGURACIÓN: menú de botones + drill-in ====== */
.settings-menu { display: flex; flex-direction: column; gap: 10px; max-width: 620px; margin: 0 auto; }
.settings-menu-item {
  display: flex; align-items: center; gap: 13px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 15px;
  padding: 14px 15px; box-shadow: var(--shadow-sm); transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}
.settings-menu-item:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--brand); }
.smi-ico { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; }
.smi-ico .ic { width: 21px; height: 21px; }
.smi-ico.ico-blue { color: #2563eb; background: rgba(37,99,235,0.12); }
.smi-ico.ico-purple { color: #7c3aed; background: rgba(124,58,237,0.12); }
.smi-ico.ico-green { color: #16a34a; background: rgba(22,163,74,0.12); }
.smi-ico.ico-orange { color: #ea580c; background: rgba(234,88,12,0.12); }
.smi-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.smi-label { font-weight: 800; font-size: 15px; color: var(--ink); }
.smi-sub { font-size: 12px; color: var(--muted); }
.smi-chev { font-size: 22px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
/* Botón destacado (Planes) */
.settings-menu-item.is-featured {
  color: #fff; border: none;
  background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
  box-shadow: 0 12px 26px rgba(217,119,6,0.30);
}
.settings-menu-item.is-featured .smi-ico { background: rgba(255,255,255,0.20); color: #fff; }
.settings-menu-item.is-featured .smi-label { color: #fff; }
.settings-menu-item.is-featured .smi-sub { color: rgba(255,255,255,0.88); }
.settings-menu-item.is-featured .smi-chev { color: rgba(255,255,255,0.9); }

/* Volver + título de sección */
.settings-back {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: 14px; font-weight: 700; color: var(--brand); margin-bottom: 12px;
}
.settings-back span { font-size: 20px; line-height: 1; }
.settings-back:hover { text-decoration: underline; }
.settings-h { font-size: 20px; margin: 0 2px 12px; }

/* Selector de tema (Apariencia) */
.theme-picker { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.theme-opt {
  flex: 1 1 90px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface);
  color: var(--ink); transition: border-color .15s ease, transform .1s ease;
}
.theme-opt:hover { transform: translateY(-1px); }
.theme-opt.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30,64,175,.14); }
.theme-swatch { width: 100%; height: 34px; border-radius: 9px; border: 1px solid rgba(0,0,0,.08); }
.theme-swatch.light { background: linear-gradient(135deg, #ffffff, #e9eef7); }
.theme-swatch.dark { background: linear-gradient(135deg, #1a2030, #0f1420); }
.theme-swatch.auto { background: linear-gradient(135deg, #ffffff 0 50%, #0f1420 50% 100%); }

/* En móvil el sidebar sigue siendo VERTICAL (lista de botones), arriba del contenido */
@media (max-width: 640px) {
  .settings { flex-direction: column; gap: 14px; }
  .settings-nav {
    flex-direction: column; position: static; flex: 0 0 auto; width: 100%;
    gap: 6px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 8px;
  }
  .settings-navitem { width: 100%; padding: 12px 14px; font-size: 15px; }
  .settings-content { width: 100%; }
}

/* Enlace mini junto a una etiqueta de campo */
.link-mini { font-size: 12px; font-weight: 700; color: var(--brand); text-decoration: none; margin-left: 6px; }
.link-mini:hover { text-decoration: underline; }

/* ====== Administración de CATÁLOGO (categorías / conceptos) ====== */
.cat-section { margin-bottom: 16px; }
.cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cat-head h2 { margin: 0; font-size: 16px; }
.cat-head-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center;
}
.cat-head-ico .ic { width: 18px; height: 18px; }
.cat-head-ico.gasto { color: #b91c1c; background: rgba(220,38,38,0.12); }
.cat-head-ico.ingreso { color: #15803d; background: rgba(22,163,74,0.12); }
.cat-count { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 2px 10px; }

.cat-add { display: flex; gap: 8px; margin-bottom: 12px; }
.cat-add input { flex: 1 1 auto; }
.cat-add-btn { flex: 0 0 auto; width: 46px; padding: 0; display: grid; place-items: center; }
.cat-add-btn .ic { width: 20px; height: 20px; }

.cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cat-empty { font-size: 13px; color: var(--muted); padding: 6px 2px; }
.cat-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px 8px 6px 10px;
}
.cat-edit { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; margin: 0; }
.cat-edit input {
  flex: 1 1 auto; border: 1px solid transparent !important; background: transparent !important;
  padding: 6px 8px !important; font-weight: 600; color: var(--ink);
}
.cat-edit input:focus { border-color: var(--brand) !important; background: var(--surface) !important; }
.cat-icon-btn {
  flex: 0 0 auto; width: 34px; height: 34px; border: none; border-radius: 9px;
  cursor: pointer; display: grid; place-items: center; background: transparent;
  transition: background .15s ease, color .15s ease;
}
.cat-icon-btn .ic { width: 17px; height: 17px; }
.cat-save { color: #16a34a; }
.cat-save:hover { background: rgba(22,163,74,0.12); }
.cat-del { color: #dc2626; }
.cat-del:hover { background: rgba(220,38,38,0.12); }

/* ====== Formularios premium (nuevo préstamo, etc.) ====== */
.form-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-bottom: 14px;
  border-radius: 18px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #12244f 0%, #1e3a8a 55%, #0f2350 100%);
  box-shadow: 0 14px 30px rgba(15,35,80,0.24);
}
.form-hero-loan { background: linear-gradient(135deg, #7c2d12 0%, #c2410c 55%, #9a3412 100%); box-shadow: 0 14px 30px rgba(124,45,18,0.26); }
.fh-ico {
  width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.fh-ico .ic { width: 24px; height: 24px; color: #fff; }
.fh-title { margin: 0; font-size: 18px; font-weight: 800; }
.fh-sub { margin: 2px 0 0; font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.4; }

.premium-form { display: flex; flex-direction: column; }
.form-section { margin-bottom: 14px; }
.form-section-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.input-money { position: relative; display: flex; align-items: center; }
.input-money-sign {
  position: absolute; left: 13px; font-weight: 800; color: var(--muted); font-size: 15px; pointer-events: none;
}
.input-money input { padding-left: 28px !important; font-weight: 700; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-actions .btn-primary { flex: 1 1 auto; }

/* ====== AGENDA (recordatorios) ====== */
.agenda-count { font-size: 11px; font-weight: 800; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.agenda-list { display: flex; flex-direction: column; gap: 10px; }
.agenda-item {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px;
  box-shadow: var(--shadow-sm);
}
.agenda-item.late { border-left: 3px solid #dc2626; }
.agenda-item.today { border-left: 3px solid #ea580c; }
.agenda-item.next { border-left: 3px solid var(--brand); }
.agenda-item.is-done { opacity: .6; }
.agenda-item.is-done .agenda-title { text-decoration: line-through; }
.agenda-check-form { margin: 0; flex: 0 0 auto; }
.agenda-check {
  width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line);
  background: transparent; color: transparent; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.agenda-check .ic { width: 15px; height: 15px; }
.agenda-check.on { background: #16a34a; border-color: #16a34a; color: #fff; }
.agenda-body { flex: 1; min-width: 0; }
.agenda-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.agenda-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 3px; flex-wrap: wrap; }
.agenda-mini { width: 13px; height: 13px; }
.agenda-in { font-weight: 700; color: var(--ink-soft); }
.agenda-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; padding: 7px 9px; background: var(--surface-2); border-radius: 9px; }

/* ====== NOTAS (bloc de notas) ====== */
.notas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 480px) { .notas-grid { grid-template-columns: 1fr; } }
.nota-card {
  position: relative; border-radius: 14px; padding: 12px; border: 1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.nota-form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.nota-titulo, .nota-contenido {
  border: none !important; background: transparent !important; padding: 2px 0 !important;
  color: #26251c !important; -webkit-text-fill-color: #26251c; width: 100%; resize: vertical;
}
/* El fondo post-it siempre es claro → texto y placeholder SIEMPRE oscuros (también en dark) */
.nota-titulo::placeholder, .nota-contenido::placeholder { color: rgba(0,0,0,0.42) !important; -webkit-text-fill-color: rgba(0,0,0,0.42); }
.nota-titulo { font-weight: 800; font-size: 14px; }
.nota-contenido { font-size: 13px; line-height: 1.45; min-height: 70px; }
.nota-titulo:focus, .nota-contenido:focus { outline: none; }
.nota-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.08); }
.nota-fecha { font-size: 11px; color: rgba(0,0,0,0.45); }
.nota-del { position: absolute; top: 8px; right: 8px; margin: 0; }
.nota-del .cat-icon-btn { width: 28px; height: 28px; }
/* colores tipo post-it (mismos en claro/oscuro para el look de nota) */
.nota-amarillo { background: #fef9c3; } .nota-verde { background: #dcfce7; }
.nota-azul { background: #dbeafe; } .nota-rosa { background: #fce7f3; } .nota-gris { background: #e5e7eb; }
.nota-swatch { display: inline-block; width: 26px; height: 26px; border-radius: 8px; border: 2px solid rgba(0,0,0,0.12); cursor: pointer; }
.nota-colors { display: flex; gap: 10px; }
.nota-color-opt input { display: none; }
.nota-color-opt input:checked + .nota-swatch { box-shadow: 0 0 0 3px var(--brand); border-color: var(--brand); }

/* ====== Metas de ahorro premium ====== */
.metas-head { display: flex; align-items: center; gap: 10px; margin: 6px 2px 12px; }
.metas-head h2 { font-size: 17px; }
.metas-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.meta-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 16px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 11px;
}
.meta-card.is-done { border-color: rgba(22,163,74,0.45); }
.meta-card.is-late { border-color: rgba(220,38,38,0.40); }
.meta-card-top { display: flex; align-items: flex-start; gap: 12px; }
.meta-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center;
  color: #16a34a; background: rgba(22,163,74,0.12); box-shadow: inset 0 0 0 1px rgba(22,163,74,0.22);
}
.meta-ico .ic { width: 20px; height: 20px; }
.meta-title { flex: 1; min-width: 0; }
.meta-name { font-weight: 800; font-size: 15px; color: var(--ink); }
.meta-desc { font-size: 12px; color: var(--muted); margin-top: 1px; }
.meta-actions { display: flex; gap: 2px; flex: 0 0 auto; }
.meta-amounts { display: flex; align-items: baseline; gap: 6px; }
.meta-saved { font-size: 20px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.meta-of { font-size: 13px; color: var(--muted); }
.meta-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin-top: -3px; }
.meta-progress-row span:last-child { font-weight: 700; color: var(--ink-soft); }
.meta-plan {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.meta-plan-ico { font-size: 18px; line-height: 1.2; flex: 0 0 auto; }
.meta-plan-main { font-size: 14px; color: var(--ink); }
.meta-plan-main strong { color: #16a34a; }
.meta-plan-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.meta-plan-soft { align-items: center; }

/* ====== Vista de PRÉSTAMOS premium ====== */
.loans-hero {
  border-radius: 20px;
  padding: 20px 20px 16px;
  margin-bottom: 14px;
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(251,146,60,0.40), transparent 52%),
    linear-gradient(135deg, #7c2d12 0%, #c2410c 52%, #9a3412 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 18px 38px rgba(124,45,18,0.30);
}
.lh-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lh-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.78); }
.lh-amount { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.lh-stats { display: flex; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.18); }
.lh-stat { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lh-stat-label { font-size: 10.5px; color: rgba(255,255,255,0.72); white-space: nowrap; }
.lh-stat-val { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lh-stat-val.pos { color: #bbf7d0; }
.lh-stat-val.warn { color: #fde68a; }

.loan-card { display: flex; flex-direction: column; gap: 11px; }
.loan-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.loan-card-head-r { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.loan-card-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.loan-card-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: grid; place-items: center;
  color: #c2410c; background: rgba(234,88,12,0.12);
  box-shadow: inset 0 0 0 1px rgba(234,88,12,0.22);
}
.loan-card-ico .ic { width: 20px; height: 20px; }
.loan-card-name { font-weight: 800; font-size: 15px; color: var(--ink); }
.loan-card-dates { font-size: 12px; color: var(--muted); margin-top: 1px; }

.loan-card-pending { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.loan-card-pending-label { font-size: 12px; color: var(--muted); }
.loan-card-pending-val { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.loan-card-pending-val.neg { color: #dc2626; }
.loan-card-pending-val.pos { color: #16a34a; }

.loan-card-progress { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin-top: -4px; }
.loan-card-progress span:last-child { font-weight: 700; color: var(--ink-soft); }

.loan-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lcg-cell {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 11px;
  display: flex; flex-direction: column; gap: 2px;
}
.lcg-label { font-size: 11px; color: var(--muted); }
.lcg-val { font-size: 14px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.lcg-val.pos { color: #16a34a; }
.lcg-val.warn { color: #b45309; }
.loan-card-note {
  font-size: 12px; color: var(--muted); margin: 2px 0 0;
  padding: 8px 11px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--line);
}

/* ====== Panel de préstamos mejorado (Inicio) ====== */
.loan-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; margin-bottom: 11px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(220,38,38,0.08), rgba(220,38,38,0.03));
  border: 1px solid rgba(220,38,38,0.20);
}
.loan-summary-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.loan-summary-val { font-size: 18px; font-weight: 800; color: #dc2626; font-variant-numeric: tabular-nums; }
.loan-list { display: flex; flex-direction: column; gap: 10px; }
.loan-item .loan-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px;
}
.loan-item .loan-name { font-weight: 700; font-size: 14px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loan-pending {
  font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap; flex: 0 0 auto;
}
.loan-pending.is-debt { background: #fee2e2; color: #b91c1c; }
.loan-pending.is-clear { background: #dcfce7; color: #15803d; }
.progress-fill.is-full { background: #16a34a; }
.loan-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px;
}
.loan-paid { font-size: 12px; color: var(--muted); }
.loan-pct { font-size: 12px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }

.goal-item, .loan-item {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.goal-header, .loan-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.goal-name, .loan-name {
  font-weight: 600;
  font-size: 14px;
}

.goal-amounts {
  font-size: 13px;
  color: var(--ink-soft);
}

.goal-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.loan-dates {
  font-size: 12px;
  color: var(--muted);
}

.loan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 13px;
  margin-bottom: 3px;
}

.loan-row span strong {
  color: var(--ink);
}

.actions {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  font-size: 13px;
}

.progress-bar {
  position: relative;
  height: 9px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin-top: 4px;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1e40af, #16a34a);
  width: 0%;
  transition: width 0.4s ease;
}

.progress-label {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}

/* ====== BOTTOM NAV (estilo Instagram: ícono arriba, texto abajo) ====== */
.bottom-nav {
  display: none;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding: 7px 2px;
  border-radius: 14px;
  text-decoration: none;
  color: #9ca3af;
  transition: color .15s ease, background .15s ease, transform .12s ease;
}

.bottom-nav-item:active {
  transform: scale(0.92);
}

.bn-icon {
  font-size: 20px;
  line-height: 1;
}

.bn-label {
  font-size: 10px;
  font-weight: 600;
}

.bottom-nav-item.active {
  color: #1e40af;
  background: rgba(30,64,175,0.10);
}

/* ===== Barra inferior en MODO OSCURO ===== */
:root[data-theme="dark"] .bottom-nav {
  background: rgba(23,29,44,0.94);
  border-color: #303a4f;
  box-shadow: 0 8px 26px rgba(0,0,0,0.5);
}
:root[data-theme="dark"] .bottom-nav-item { color: #9aa4b5; }
:root[data-theme="dark"] .bottom-nav-item.active { color: #60a5fa; background: rgba(96,165,250,0.16); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bottom-nav {
    background: rgba(23,29,44,0.94);
    border-color: #303a4f;
    box-shadow: 0 8px 26px rgba(0,0,0,0.5);
  }
  :root:not([data-theme="light"]) .bottom-nav-item { color: #9aa4b5; }
  :root:not([data-theme="light"]) .bottom-nav-item.active { color: #60a5fa; background: rgba(96,165,250,0.16); }
}

/* ============================================================
   RESPONSIVE — adaptación a celular
   ============================================================ */
@media (max-width: 768px) {
  .menu-bar {
    display: none;
  }

  .bottom-nav {
    display: flex;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border: 1px solid #e5e9f1;
    border-radius: 22px;
    box-shadow: 0 8px 26px rgba(15,35,80,0.12);
    z-index: 50;
    padding: 8px 4px;
    justify-content: space-around;
  }

  body {
    padding-bottom: 78px;
  }

  .main-container {
    margin: 16px auto;
    padding: 0 12px 32px;
  }

  .big-amount {
    font-size: 22px;
  }

  .loan-row {
    flex-direction: column;
    gap: 2px;
  }
}

@media (max-width: 480px) {
  .topbar {
    padding: 12px 16px;
  }

  .topbar-center h1 {
    font-size: 16px;
  }

  .card, .panel {
    padding: 14px;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
  }

  .bn-icon {
    font-size: 18px;
  }

  .bn-label {
    font-size: 9px;
  }
}

/* ====== LOGIN (pantalla independiente, PREMIUM claro) ======
   Paleta: blanco, gris claro, azul oscuro (navy) y verde.
   Todo acotado bajo .login-body: SIEMPRE claro, sin tocar el resto de la app. */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 20px;
  background-color: #eef2f7;
  background-image:
    radial-gradient(760px 520px at 112% -10%, rgba(18,36,79,0.12), transparent 60%),
    radial-gradient(680px 520px at -12% 116%, rgba(22,163,74,0.12), transparent 60%),
    linear-gradient(180deg, #f5f8fc 0%, #e8eef6 100%);
}

.login-body .login-card {
  position: relative;
  overflow: hidden;
  max-width: 390px;
  width: 100%;
  border-radius: 22px;
  padding: 32px 28px 28px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(15,35,80,0.05),
    0 12px 30px rgba(15,35,80,0.10),
    0 32px 64px rgba(15,35,80,0.08);
  color: #334155;
}

/* Barra superior de acento navy -> verde (toque premium) */
.login-body .login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #12244f 0%, #1e40af 48%, #16a34a 100%);
}

/* Tipografía */
.login-body .login-card h2 {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.2px;
}

.login-body .login-card label {
  color: #475569;
  font-weight: 600;
}

.login-body .login-card .hint {
  color: #64748b;
}

/* Inputs claros con foco navy */
.login-body input {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 12px;
}

.login-body input::placeholder {
  color: #94a3b8;
}

.login-body input:focus {
  background: #ffffff;
  border-color: #1e40af;
  box-shadow: 0 0 0 4px rgba(30,64,175,0.12);
}

/* Chips de usuario (selección) */
.login-body .chip-option {
  background: var(--surface-2);
  border-color: #e2e8f0;
  color: #475569;
}

/* Ícono de usuario del chip en navy; verde al seleccionar */
.login-body .chip-icon {
  color: #1e40af;
  display: inline-flex;
}
.login-body .chip-option.is-checked .chip-icon {
  color: #16a34a;
}

.login-body .chip-option:hover {
  border-color: #1e40af;
  color: var(--ink);
}

.login-body .chip-option.is-checked {
  border-color: #1e40af;
  background: rgba(30,64,175,0.07);
  color: #12244f;
  box-shadow: 0 0 0 1px rgba(30,64,175,0.35), 0 6px 16px rgba(18,36,79,0.12);
}

/* Botón Entrar en VERDE premium */
.login-body .btn-primary {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(22,163,74,0.28);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.login-body .btn-primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 12px 30px rgba(22,163,74,0.38);
}

/* Caja de error: rojo claro */
.login-body .login-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

/* Caja de info/éxito: verde claro */
.login-body .login-info {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}

/* Fila "recordar sesión" + "¿olvidaste?" */
.login-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -2px 0 14px;
  flex-wrap: wrap;
}
.login-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--muted, #475569);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 4px 0;               /* área de toque más cómoda en móvil */
}
/* Ocultamos el checkbox nativo (se ve casi invisible en tema oscuro móvil)
   pero lo dejamos accesible: sigue enviando "recordar" y responde al foco. */
.login-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
/* Caja personalizada del checkbox */
.login-check-box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--line, #cbd5e1);
  background: var(--card, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;                  /* color del check (visible solo al marcar) */
  transition: background .15s ease, border-color .15s ease;
}
.login-check-box svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .12s ease, transform .12s ease;
}
/* Estado marcado */
.login-check input:checked + .login-check-box {
  background: #16a34a;
  border-color: #16a34a;
}
.login-check input:checked + .login-check-box svg {
  opacity: 1;
  transform: scale(1);
}
/* Foco accesible (teclado) */
.login-check input:focus-visible + .login-check-box {
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .3);
}
.login-check-label { line-height: 1.2; }
.login-link {
  font-size: 13px;
  color: #1e40af;
  text-decoration: none;
  font-weight: 600;
}
.login-link:hover { text-decoration: underline; }

/* Badge de ícono premium para pantallas de recuperación (navy -> verde) */
.auth-badge {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #12244f 0%, #16a34a 100%);
  box-shadow: 0 12px 26px rgba(18,36,79,0.28);
}
.auth-badge svg {
  width: 32px;
  height: 32px;
}

/* Indicador de pasos (2 barras) */
.auth-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
}
.auth-step {
  width: 26px;
  height: 5px;
  border-radius: 99px;
  background: #e2e8f0;
}
.auth-step.done {
  background: #16a34a;
}
.auth-step.active {
  background: linear-gradient(90deg, #1e40af, #16a34a);
}

/* Encabezado de sección en Configuración */
.config-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.flash-warn {
  background: rgba(245,158,11,0.14);
  border: 1px solid rgba(245,158,11,0.42);
  color: #fcd34d;
}
.flash-warn code {
  background: rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: 5px;
}

/* Logo (imagen) con resplandor eléctrico */
.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.login-logo-img {
  width: auto;
  max-width: 120px;
  max-height: 110px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(15,35,80,0.18));
}

/* Fallback si aún no se ha subido la imagen del logo */
.login-logo-fallback {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #ffffff;
  background: linear-gradient(135deg, #12244f, #16a34a);
  box-shadow: 0 10px 22px rgba(18,36,79,0.28);
}

/* ============================================================
   TEMA PREMIUM CLARO APP-WIDE (blanco, gris claro, navy, verde)
   .app-premium va en <main> (layout) → aplica a todas las vistas autenticadas.
   Re-tematiza los componentes vía tokens (cascada). Chrome navy (topbar/drawer),
   contenido claro, acciones verdes, acentos navy.
   ============================================================ */

/* Fondo claro de toda la página (cualquier vista con .app-premium) */
body:has(.app-premium) {
  background-color: #eef2f7;
  background-image:
    radial-gradient(760px 520px at 112% -6%, rgba(18,36,79,0.06), transparent 60%),
    radial-gradient(680px 520px at -12% 112%, rgba(22,163,74,0.06), transparent 60%),
    linear-gradient(180deg, #f5f8fc 0%, #e8eef6 100%);
}

/* Tokens claros locales: cada componente que use var(--surface/--ink/...) queda claro */
.app-premium {
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --ink: #0f213f;
  --ink-soft: #334155;
  --muted: #64748b;
  --line: #e5e9f1;
  --bg-wave: #eef2f7;
  --chart-border: #ffffff;
  color: var(--ink);
  color-scheme: light;
}

/* ===== MODO OSCURO: sobrescribe los tokens de .app-premium (texto e íconos claros) ===== */
:root[data-theme="dark"] .app-premium {
  --surface: #1a2030;
  --surface-2: #232c3f;
  --ink: #f3f4f6;
  --ink-soft: #d1d5db;
  --muted: #9aa4b5;
  --line: #303a4f;
  --bg-wave: #0f1420;
  --chart-border: #1a2030;
  color: var(--ink);
  color-scheme: dark;
}
:root[data-theme="dark"] body:has(.app-premium),
:root[data-theme="dark"].app-premium-bg {
  background-color: #0c111c;
  background-image:
    radial-gradient(760px 520px at 112% -6%, rgba(59,130,246,0.10), transparent 60%),
    radial-gradient(680px 520px at -12% 112%, rgba(22,163,74,0.08), transparent 60%),
    linear-gradient(180deg, #0d1320 0%, #0a0f19 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-premium {
    --surface: #1a2030;
    --surface-2: #232c3f;
    --ink: #f3f4f6;
    --ink-soft: #d1d5db;
    --muted: #9aa4b5;
    --line: #303a4f;
    --bg-wave: #0f1420;
    --chart-border: #1a2030;
    color: var(--ink);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) body:has(.app-premium) {
    background-color: #0c111c;
    background-image:
      radial-gradient(760px 520px at 112% -6%, rgba(59,130,246,0.10), transparent 60%),
      radial-gradient(680px 520px at -12% 112%, rgba(22,163,74,0.08), transparent 60%),
      linear-gradient(180deg, #0d1320 0%, #0a0f19 100%);
  }
}

/* Paneles blancos con sombra premium suave */
.app-premium .panel {
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(15,35,80,0.05),
    0 10px 26px rgba(15,35,80,0.07);
}

/* Pills con borde tenue */
.app-premium .pill-stat {
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,35,80,0.05), 0 6px 16px rgba(15,35,80,0.06);
}

/* Hero con sombra premium */
.app-premium .hero-card {
  box-shadow:
    0 1px 2px rgba(15,35,80,0.05),
    0 14px 34px rgba(15,35,80,0.12);
}

/* Tab switch claro; pestaña activa blanca con acento navy */
.app-premium .tab-switch {
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.app-premium .tab-btn.active {
  background: var(--surface);
  color: #1e40af;
  box-shadow: 0 0 0 1px rgba(30,64,175,0.25), 0 4px 12px rgba(15,35,80,0.10);
}

/* Items de metas/estadísticas con borde tenue */
.app-premium .stat-list-item,
.app-premium .goal-item {
  border-color: var(--line);
}

/* Tarjetas genéricas (.card) blancas con sombra premium */
.app-premium .card {
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(15,35,80,0.05),
    0 10px 26px rgba(15,35,80,0.07);
}

/* Inputs / selects / textarea claros con foco navy */
.app-premium input,
.app-premium select,
.app-premium textarea {
  background: var(--surface-2);
  border-color: #e2e8f0;
  color: var(--ink);
}

.app-premium input::placeholder,
.app-premium textarea::placeholder {
  color: #94a3b8;
}

.app-premium input:focus,
.app-premium select:focus,
.app-premium textarea:focus {
  background: var(--surface);
  border-color: #1e40af;
  box-shadow: 0 0 0 4px rgba(30,64,175,0.12);
}

/* Opciones tipo chip (categoría / persona) claras; seleccionada en navy */
.app-premium .cat-option,
.app-premium .chip-option {
  color: #475569;
  border-color: #e2e8f0;
  background: var(--surface-2);
}

.app-premium .cat-option:hover,
.app-premium .chip-option:hover {
  border-color: #1e40af;
  color: var(--ink);
}

.app-premium .cat-option.is-checked,
.app-premium .chip-option.is-checked {
  border-color: #1e40af;
  background: rgba(30,64,175,0.07);
  color: #12244f;
  box-shadow: 0 0 0 1px rgba(30,64,175,0.30), 0 6px 16px rgba(18,36,79,0.10);
}

/* Botón secundario claro */
.app-premium .btn-secondary {
  background: var(--surface-2);
  color: #334155;
}

/* Tablas: cabecera acorde al tema */
.app-premium th {
  color: #334155;
}

/* Acciones grandes (action-card) con sombra suave */
.app-premium .action-card {
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,35,80,0.05), 0 8px 20px rgba(15,35,80,0.07);
}

/* ====== FIX iOS: evita el zoom automático al enfocar inputs (font < 16px) ====== */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px;
  }

  .filters input,
  .filters select,
  .search-box input {
    font-size: 16px;
  }
}

/* ============================================================
   TOPBAR PREMIUM (logo + marca + hamburguesa)
   ============================================================ */
.topbar {
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(30,64,175,0.55), transparent 55%),
    linear-gradient(135deg, #0f2350 0%, #14306b 55%, #12244f 100%);
  box-shadow: 0 6px 22px rgba(15,35,80,0.30);
  border-bottom: 1px solid rgba(22,163,74,0.40);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
  min-width: 0;
}

.nav-toggle {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  border-radius: 11px;
  background: rgba(255,255,255,0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.nav-toggle:hover { background: rgba(255,255,255,0.26); }
.nav-toggle:active { transform: scale(0.92); }
.nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
}
.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 50%;
  padding: 2px;
  box-shadow: 0 0 0 1.5px rgba(212,175,55,0.55), 0 2px 8px rgba(0,0,0,0.30);
  flex-shrink: 0;
}
.brand-name {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-bar { justify-self: center; }

/* ============================================================
   SIDEBAR / DRAWER (oscuro eléctrico, deslizante)
   ============================================================ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,8,18,0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 60;
}
body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; }

.app-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 290px;
  max-width: 85vw;
  z-index: 70;
  display: flex;
  flex-direction: column;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
  color: #dbe4f2;
  background:
    radial-gradient(420px 300px at 20% -5%, rgba(30,64,175,0.35), transparent 60%),
    radial-gradient(360px 320px at 90% 105%, rgba(22,163,74,0.18), transparent 60%),
    linear-gradient(165deg, #14275a 0%, #0f2350 100%);
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: 6px 0 44px rgba(10,20,45,0.45), inset -1px 0 0 rgba(255,255,255,0.06);
  transform: translateX(-102%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
body.drawer-open .app-drawer { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 16px;
  border-bottom: 1px solid rgba(148,163,184,0.18);
  margin-bottom: 12px;
}
.drawer-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 50%;
  padding: 3px;
  box-shadow: 0 0 0 1.5px rgba(212,175,55,0.55), 0 3px 10px rgba(0,0,0,0.35);
}
.drawer-id { display: flex; flex-direction: column; min-width: 0; }
.drawer-title { font-weight: 700; font-size: 15px; color: #fff; }
.drawer-user { font-size: 12px; color: #94a3b8; margin-top: 1px; }
.drawer-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 9px;
  background: rgba(255,255,255,0.06);
  color: #cbd5e1;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
}
.drawer-close:hover { background: rgba(239,68,68,0.22); color: #fff; }

.drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.drawer-section {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 700;
  padding: 14px 12px 4px;
}
.drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, transform .12s ease, border-color .15s ease;
}
.drawer-link .dl-icon { font-size: 17px; width: 22px; text-align: center; }
.drawer-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  transform: translateX(3px);
}
.drawer-link.active {
  background: rgba(22,163,74,0.20);
  color: #fff;
  border-color: rgba(34,197,94,0.5);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.30);
}

.drawer-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(148,163,184,0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drawer-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 11px;
  padding: 11px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #cbd5e1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.drawer-action:hover { background: rgba(255,255,255,0.10); color: #fff; }
.drawer-logout { color: #fca5a5; }
.drawer-logout:hover { background: rgba(239,68,68,0.20); color: #fff; }

/* ============================================================
   BOTTOM-NAV: botón "Menú" (reset de <button>)
   ============================================================ */
.bottom-nav .bn-menu {
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* ============================================================
   TARJETA DE CRÉDITO (hero balance, realista)
   ============================================================ */
.credit-card {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 430px;
  aspect-ratio: 1.586 / 1;
  border-radius: 20px;
  padding: clamp(16px, 5%, 24px);
  margin: 6px 0 22px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(96,165,250,0.55), transparent 52%),
    radial-gradient(130% 170% at 100% 100%, rgba(67,56,202,0.7), transparent 55%),
    linear-gradient(135deg, #1d4ed8 0%, #2563eb 36%, #1e40af 66%, #312e81 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 0 0 1px rgba(96,165,250,0.20),
    0 18px 40px rgba(11,18,40,0.55),
    0 0 50px rgba(37,99,235,0.28);
}
.credit-card.is-negative {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(251,146,60,0.5), transparent 52%),
    radial-gradient(130% 170% at 100% 100%, rgba(127,29,29,0.72), transparent 55%),
    linear-gradient(135deg, #ea580c 0%, #dc2626 45%, #991b1b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 0 0 1px rgba(251,146,60,0.22),
    0 18px 40px rgba(40,11,11,0.55),
    0 0 50px rgba(239,68,68,0.28);
}
/* brillo diagonal tipo lámina */
.credit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(118deg, transparent 32%, rgba(255,255,255,0.20) 46%, rgba(255,255,255,0.03) 53%, transparent 62%);
  pointer-events: none;
}
/* halo holográfico esquina */
.credit-card::after {
  content: "";
  position: absolute;
  right: -28%;
  top: -42%;
  width: 78%;
  height: 120%;
  z-index: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 62%);
  pointer-events: none;
}
.credit-card > * { position: relative; z-index: 1; }

/* Tarjeta con imagen propia del usuario */
.credit-card.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

/* ====== PÁGINA: MI TARJETA ====== */
.card-editor-intro {
  font-size: 14px;
  color: var(--muted, #94a3b8);
  margin: 4px 2px 16px;
  line-height: 1.5;
}
.card-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}
.card-editor-actions form {
  margin: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.btn-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #dbeafe;
  background: rgba(37,99,235,0.16);
  border: 1px solid rgba(59,130,246,0.45);
  transition: background .15s ease, border-color .15s ease;
}
.btn-upload:hover {
  background: rgba(37,99,235,0.28);
  border-color: rgba(59,130,246,0.7);
}
.btn-upload-ico { font-size: 18px; }
.btn-ghost-danger {
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #fca5a5;
  background: transparent;
  border: 1px solid rgba(239,68,68,0.45);
  font-family: inherit;
  transition: background .15s ease;
}
.btn-ghost-danger:hover { background: rgba(239,68,68,0.14); }
#cc-save[disabled] { opacity: 0.45; cursor: not-allowed; }
.card-editor-hint {
  font-size: 12.5px;
  color: var(--muted, #94a3b8);
  margin-top: 14px;
  line-height: 1.5;
}
.flash {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 14px;
}
.flash-ok {
  background: rgba(22,163,74,0.14);
  border: 1px solid rgba(34,197,94,0.4);
  color: #86efac;
}
.flash-err {
  background: rgba(239,68,68,0.14);
  border: 1px solid rgba(239,68,68,0.4);
  color: #fca5a5;
}

.cc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cc-bank-name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  font-size: clamp(13px, 3.8cqi, 16px);
  letter-spacing: 0.3px;
}
.cc-bank-sub {
  display: block;
  font-size: 10px;
  opacity: 0.72;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}
.cc-brandmark { font-size: 20px; opacity: 0.92; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }

.cc-chip-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.cc-chip {
  width: 46px;
  height: 34px;
  border-radius: 7px;
  flex-shrink: 0;
  position: relative;
  background: linear-gradient(135deg, #f9e7a0 0%, #d8b24a 42%, #b8860b 56%, #f3d878 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.25);
}
.cc-chip::before {
  content: "";
  position: absolute;
  inset: 6px 5px;
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: 3px;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.22) 0 1px, transparent 1px 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.22) 0 1px, transparent 1px 100%);
  background-size: 34% 50%;
  background-position: center;
}
.cc-contactless { width: 20px; height: 22px; color: rgba(255,255,255,0.85); }

.cc-balance { margin-top: auto; }
.cc-balance-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.82;
  font-weight: 700;
}
.cc-balance-amount {
  display: block;
  font-weight: 800;
  font-size: 30px;
  font-size: clamp(22px, 8.2cqi, 36px);
  line-height: 1.04;
  margin-top: 2px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.28);
}

.cc-number {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 17px;
  font-size: clamp(13px, 4.7cqi, 19px);
  letter-spacing: 0.1em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.cc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 10px;
  gap: 8px;
}
.cc-field-label {
  display: block;
  font-size: 8px;
  letter-spacing: 0.14em;
  opacity: 0.66;
  text-transform: uppercase;
}
.cc-field-value {
  display: block;
  font-weight: 600;
  font-size: 13px;
  font-size: clamp(11px, 3.4cqi, 13px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cc-flows { display: flex; gap: 12px; }
.cc-flow { font-size: 11px; font-weight: 700; white-space: nowrap; }
.cc-in { color: #bbf7d0; }
.cc-out { color: #fecaca; }
.cc-network { display: flex; align-items: center; flex-shrink: 0; }
.cc-network span { width: 22px; height: 22px; border-radius: 50%; }
.cc-net-1 { background: rgba(239,68,68,0.92); }
.cc-net-2 { background: rgba(245,158,11,0.9); margin-left: -10px; mix-blend-mode: screen; }

/* Responsive: oculta el nombre de marca en pantallas muy chicas */
@media (max-width: 380px) {
  .brand-name { display: none; }
}

/* ============================================================
   CARTERA (pila estilo billetera)
   ============================================================ */
.wallet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 2px 2px 14px;
}
.wallet-head h2 { margin: 0; font-size: 18px; }
.wallet-count { font-size: 13px; color: var(--muted, #64748b); font-weight: 600; }

/* Botón "Nueva cuenta" (borde ámbar, estilo referencia) */
.wallet-new {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 15px 16px;
  border-radius: 16px;
  margin-bottom: 22px;
  color: var(--text, #0f213f);
  background: linear-gradient(180deg, rgba(245,158,11,0.10), rgba(245,158,11,0.03));
  border: 1.5px solid rgba(245,158,11,0.55);
  box-shadow: 0 6px 18px rgba(245,158,11,0.10);
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.wallet-new:hover {
  transform: translateY(-2px);
  border-color: rgba(245,158,11,0.9);
  box-shadow: 0 10px 26px rgba(245,158,11,0.18);
}
.wallet-new-plus {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #b45309;
  background: rgba(245,158,11,0.18);
  box-shadow: inset 0 0 0 1px rgba(245,158,11,0.35);
}
.wallet-new-plus .ic { width: 18px; height: 18px; }
.wallet-new-txt { font-weight: 700; font-size: 15px; flex: 1 1 auto; min-width: 0; }
.wallet-new-hint {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46%;
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: rgba(245,158,11,0.14);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) { .wallet-new-hint { display: none; } }

/* La pila: cada tarjeta se solapa con la anterior; la del frente va abajo y abierta */
.wallet-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 4px;
}
.wallet-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 1.586 / 1;
  border-radius: 20px;
  padding: 20px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  container-type: inline-size;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 16px 34px rgba(15,23,42,0.30);
  transition: transform .16s ease, box-shadow .2s ease;
}
/* Solape entre tarjetas: cada una mantiene su proporción de tarjeta real y
   la de abajo cubre ~la mitad inferior de la anterior (se ven como tarjetas completas). */
.wallet-card + .wallet-card { margin-top: -32%; }
.wallet-card.is-front { z-index: 3; }                 /* la del frente, siempre arriba */

/* Tarjeta del stack con imagen propia del usuario */
.wallet-card.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.wallet-card.has-photo .wc-glow { opacity: .35; }   /* atenúa el brillo sobre la foto */

/* Tarjetas apiladas detrás: se ven como tarjetas COMPLETAS (misma proporción),
   con la mitad superior visible (nombre, tipo y número). El saldo queda en la
   zona que cubre la siguiente tarjeta, por eso se oculta el pie. */
.wallet-card.is-peek .wc-num { margin-top: 12px; }   /* sube el número al área visible */
.wallet-card.is-peek .wc-foot { display: none; }
.wallet-card.is-peek::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  z-index: 2;
  background: linear-gradient(to bottom, transparent, rgba(2,6,23,0.28));
  pointer-events: none;
}
.wallet-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 22px 44px rgba(15,23,42,0.36); }

/* Brillo decorativo (círculos suaves como la referencia) */
.wc-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(140px 140px at 84% 22%, rgba(255,255,255,0.22), transparent 62%),
    radial-gradient(100px 100px at 98% 74%, rgba(255,255,255,0.13), transparent 60%),
    linear-gradient(118deg, transparent 34%, rgba(255,255,255,0.16) 47%, transparent 60%);
}
.wallet-card > *:not(.wc-glow) { position: relative; z-index: 1; }

.wc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.wc-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wc-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.wc-icon .ic { width: 18px; height: 18px; color: #fff; }
.wc-name {
  font-weight: 700;
  font-size: clamp(14px, 4cqi, 17px);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.wc-num {
  margin-top: auto;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(13px, 4.6cqi, 18px);
  letter-spacing: 0.14em;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.wc-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.wc-bal-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.82;
  font-weight: 700;
}
.wc-bal-amount {
  display: block;
  font-weight: 800;
  font-size: clamp(20px, 7.6cqi, 32px);
  line-height: 1.05;
  margin-top: 2px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}
.wc-tag {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.86;
  white-space: nowrap;
}

/* Variantes de color de la tarjeta de billetera */
.wallet-card.wc-navy {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(96,165,250,0.45), transparent 52%),
    linear-gradient(135deg, #12244f 0%, #1e3a8a 55%, #0f2350 100%);
}
.wallet-card.wc-green {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(134,239,172,0.42), transparent 52%),
    linear-gradient(135deg, #0f766e 0%, #16a34a 52%, #047857 100%);
}
.wallet-card.wc-purple {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(216,180,254,0.42), transparent 52%),
    linear-gradient(135deg, #4c1d95 0%, #7c3aed 55%, #5b21b6 100%);
}
.wallet-card.wc-slate {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(203,213,225,0.35), transparent 52%),
    linear-gradient(135deg, #0f172a 0%, #334155 55%, #1e293b 100%);
}
.wallet-card.wc-wine {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(253,164,175,0.38), transparent 52%),
    linear-gradient(135deg, #7f1d1d 0%, #be123c 55%, #881337 100%);
}

/* La tarjeta como enlace clickeable dentro del detalle */
a.credit-card {
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .18s ease;
}
a.credit-card:hover { transform: translateY(-3px); }

/* Variantes de color de tarjeta */
.credit-card.cc-navy {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(96,165,250,0.45), transparent 52%),
    linear-gradient(135deg, #12244f 0%, #1e3a8a 55%, #0f2350 100%);
}
.credit-card.cc-green {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(134,239,172,0.40), transparent 52%),
    linear-gradient(135deg, #14532d 0%, #16a34a 55%, #065f46 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 18px 40px rgba(6,40,25,0.5),
    0 0 46px rgba(22,163,74,0.28);
}
.credit-card.cc-purple {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(216,180,254,0.42), transparent 52%),
    linear-gradient(135deg, #4c1d95 0%, #7c3aed 55%, #5b21b6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 18px 40px rgba(30,12,60,0.5),
    0 0 46px rgba(124,58,237,0.30);
}
.credit-card.cc-slate {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(203,213,225,0.35), transparent 52%),
    linear-gradient(135deg, #0f172a 0%, #334155 55%, #1e293b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 18px 40px rgba(2,6,23,0.55),
    0 0 40px rgba(51,65,85,0.30);
}
.credit-card.cc-wine {
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(253,164,175,0.38), transparent 52%),
    linear-gradient(135deg, #7f1d1d 0%, #be123c 55%, #881337 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 18px 40px rgba(50,10,20,0.5),
    0 0 46px rgba(190,18,60,0.28);
}

/* Selector de color en el formulario */
.color-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.color-dot {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 2px 6px rgba(15,35,80,0.18);
  transition: transform .12s ease;
}
.color-dot:hover { transform: scale(1.08); }
.color-dot input { position: absolute; opacity: 0; width: 0; height: 0; }
.color-dot.is-checked {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(30,64,175,0.25);
}
.color-dot.color-navy   { background: linear-gradient(135deg, #1e3a8a, #12244f); }
.color-dot.color-green  { background: linear-gradient(135deg, #16a34a, #14532d); }
.color-dot.color-purple { background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.color-dot.color-slate  { background: linear-gradient(135deg, #334155, #0f172a); }
.color-dot.color-wine   { background: linear-gradient(135deg, #be123c, #7f1d1d); }

/* Filas de formulario en dos columnas */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 14px;
}
@media (min-width: 480px) {
  .form-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   SAAS: badge de plan, planes/pricing, presupuestos, charts
   ============================================================ */

/* Badge del plan (en el drawer) */
.plan-badge {
  align-self: flex-start;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
}
.plan-badge.plan-free    { background: #475569; }
.plan-badge.plan-pro     { background: linear-gradient(135deg, #1e40af, #12244f); }
.plan-badge.plan-premium { background: linear-gradient(135deg, #16a34a, #15803d); }

/* Etiqueta PRO en enlaces del drawer */
.dl-pro {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: rgba(34,197,94,0.22);
  color: #86efac;
  border: 1px solid rgba(34,197,94,0.4);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
}

/* ---- Página de Planes ---- */
.planes-intro { text-align: center; margin: 4px 0 18px; }
.planes-intro h2 { margin: 0 0 4px; }
.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .plan-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
}
.plan-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 1px 2px rgba(15,35,80,0.05), 0 10px 26px rgba(15,35,80,0.07);
  display: flex;
  flex-direction: column;
}
.plan-card.is-featured {
  border-color: rgba(30,64,175,0.5);
  box-shadow: 0 0 0 1px rgba(30,64,175,0.25), 0 16px 36px rgba(15,35,80,0.14);
}
@media (min-width: 720px) {
  .plan-card.is-featured { transform: translateY(-8px); }
}
.plan-card.is-current { border-color: rgba(22,163,74,0.55); }
.plan-tag {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #1e40af, #12244f);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-name { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: 0.04em; text-transform: uppercase; }
.plan-price { margin: 8px 0 2px; display: flex; align-items: baseline; gap: 4px; }
.plan-amount { font-size: 34px; font-weight: 800; color: var(--ink); }
.plan-per { font-size: 13px; color: #64748b; }
.plan-lema { font-size: 13px; color: #64748b; margin-bottom: 14px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; }
.plan-features li { font-size: 13.5px; color: #334155; display: flex; gap: 8px; align-items: flex-start; }
.pf-check { color: #16a34a; font-weight: 800; flex-shrink: 0; }
.btn-plan {
  margin-top: auto;
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 8px 20px rgba(22,163,74,0.26);
  transition: filter .15s ease, box-shadow .15s ease;
}
.plan-card.plan-navy .btn-plan { background: linear-gradient(135deg, #1e40af, #12244f); box-shadow: 0 8px 20px rgba(30,64,175,0.28); }
.plan-card.plan-slate .btn-plan { background: linear-gradient(135deg, #334155, #0f172a); box-shadow: 0 8px 20px rgba(15,23,42,0.24); }
.btn-plan:hover { filter: brightness(1.05); }
.btn-plan.is-current, .btn-plan[disabled] {
  background: var(--surface-2); color: #16a34a; box-shadow: none; cursor: default;
  border: 1px solid rgba(22,163,74,0.4);
}
.planes-nota {
  margin-top: 18px; font-size: 12.5px; color: #64748b; text-align: center; line-height: 1.5;
  background: var(--surface-2); border: 1px solid #e5e9f1; border-radius: 12px; padding: 12px 14px;
}

/* ---- Presupuestos ---- */
.presu-list { display: flex; flex-direction: column; gap: 12px; }
.presu-card.is-over { border-color: rgba(220,38,38,0.4); box-shadow: 0 0 0 1px rgba(220,38,38,0.18), 0 6px 18px rgba(15,35,80,0.06); }
.presu-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.presu-cat { font-weight: 700; color: var(--ink); font-size: 15px; }
.presu-ico { margin-right: 4px; }
.presu-nums { font-size: 14px; color: var(--ink); white-space: nowrap; }
.presu-de { color: #64748b; font-size: 12px; }
.presu-alert { color: #dc2626; font-weight: 700; }
.presu-form { display: flex; gap: 8px; margin-top: 12px; }
.presu-form input {
  flex: 1; min-width: 0; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink);
}
.presu-form input:focus { background: var(--surface); border-color: #1e40af; box-shadow: 0 0 0 3px rgba(30,64,175,0.12); outline: none; }
.progress-fill.over { background: #dc2626 !important; }

/* ---- Contenedores de gráficos ---- */
.chart-box { position: relative; height: 300px; }
.chart-box-donut { height: 280px; max-width: 420px; margin: 0 auto; }

/* ============================================================
   INICIO (hub): lanzador de módulos + encabezados de panel
   ============================================================ */
.section-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin: 22px 2px 12px;
}

/* Pills clicables */
a.pill-stat { text-decoration: none; color: inherit; }

/* Lanzador de módulos */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
@media (min-width: 560px) { .hub-grid { grid-template-columns: repeat(4, 1fr); } }

.hub-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15,35,80,0.05), 0 6px 16px rgba(15,35,80,0.06);
  transition: transform .14s ease, box-shadow .18s ease;
}
.hub-tile:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15,35,80,0.06), 0 12px 26px rgba(15,35,80,0.10); }
.hub-tile:active { transform: scale(0.98); }

.hub-ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 8px;
}
.hub-navy   { background: rgba(30,64,175,0.12); }
.hub-green  { background: rgba(22,163,74,0.14); }
.hub-red    { background: rgba(220,38,38,0.12); }
.hub-orange { background: rgba(234,88,12,0.14); }
.hub-teal   { background: rgba(13,148,136,0.14); }
.hub-purple { background: rgba(124,58,237,0.14); }
.hub-blue   { background: rgba(14,165,233,0.14); }
.hub-slate  { background: rgba(100,116,139,0.14); }

.hub-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.hub-sub  { font-size: 11.5px; color: var(--muted); }

/* Encabezado de panel con enlace */
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.panel-head h3 { margin: 0; }
.panel-link { font-size: 12.5px; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; }
.panel-link:hover { text-decoration: underline; }

/* ============================================================
   PLAN FAMILIAR (espacio compartido)
   ============================================================ */
/* Chip de contexto en el drawer */
.drawer-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ctx-chip {
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 9px; border-radius: 999px; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.16); color: #dbe4f2; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ctx-chip.ctx-familia { background: rgba(22,163,74,0.28); border-color: rgba(34,197,94,0.5); color: #bbf7d0; }
.ctx-chip.ctx-personal { background: rgba(255,255,255,0.08); }

/* Banner de modo familiar (app-wide) */
.ctx-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 16px;
  background: linear-gradient(135deg, #15803d, #16a34a);
  color: #fff; font-size: 13px;
}
.ctx-banner-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ctx-banner-btn {
  flex-shrink: 0; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  color: #fff; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35);
  padding: 5px 12px; border-radius: 999px;
}
.ctx-banner-btn:hover { background: rgba(255,255,255,0.28); }

/* Switch de contexto en /familia */
.ctx-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.ctx-panel-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.seg { display: flex; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin: 10px 0; }
.seg-btn {
  flex: 1; padding: 10px 8px; border: none; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: #475569; background: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg-btn.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(15,35,80,0.12); }
.ctx-panel-help { font-size: 13px; color: var(--muted); margin: 4px 0 0; }

/* Código de invitación */
.invite-box { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.invite-code {
  flex: 1; font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 24px; font-weight: 800; letter-spacing: 6px; color: var(--ink);
  background: var(--surface-2); border: 1px dashed #cbd5e1; border-radius: 12px;
  padding: 10px 14px; text-align: center;
}

/* Miembros */
.member-list { display: flex; flex-direction: column; gap: 8px; }
.member { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.member-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #1e40af, #12244f); font-size: 14px;
}
.member-name { font-weight: 600; color: var(--ink); flex: 1; }

/* ============================================================
   ÍCONOS DE LÍNEA (outline monocromo) — heredan currentColor
   ============================================================ */
.ic {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 22px;
  height: 22px;
}

/* Bottom nav */
.bn-icon { font-size: 0; line-height: 0; }
.bn-icon .ic { width: 23px; height: 23px; }

/* Drawer */
.drawer-link .dl-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; }
.drawer-link .dl-icon .ic { width: 20px; height: 20px; stroke-width: 1.7; }

/* Topbar (filtro) */
.ctx-btn .ic { width: 19px; height: 19px; }

/* Hub (lanzador) — chip neutro + ícono navy */
.hub-ico { background: var(--surface-2); color: #3b82f6; }
.hub-ico .ic { width: 24px; height: 24px; }

/* Pills del inicio — chip neutro + ícono navy */
.pill-icon { background: var(--surface-2); color: #3b82f6; }
.pill-icon .ic { width: 20px; height: 20px; }

/* Botones swipe (editar/eliminar): ícono blanco de línea */
.sa-ico { font-size: 0; line-height: 0; }
.sa-ico .ic { width: 18px; height: 18px; }

/* Acciones grandes (ahorros) e íconos de pickers */
.action-icon .ic { width: 26px; height: 26px; color: #1e40af; }
.cat-option .cat-icon { display: inline-flex; }
.cat-option .cat-icon .ic { width: 20px; height: 20px; }

/* Encabezados de panel con ícono de línea */
.panel > h3 .ic,
.panel-head h3 .ic {
  width: 18px; height: 18px; stroke-width: 1.8; margin-right: 6px;
  color: var(--muted); vertical-align: -3px;
}

/* ============================================================
   INICIO: tarjeta-resumen del mes + tarjetas de estado
   ============================================================ */
.home { display: flex; flex-direction: column; gap: 14px; }

/* Tarjeta hero del mes (métrica grande + gráfico integrado), en claro */
.month-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px 18px 15px;
  box-shadow:
    0 1px 2px rgba(15,35,80,0.05),
    0 18px 34px rgba(15,35,80,0.14),
    0 8px 16px rgba(15,35,80,0.08);
  /* Espaciado uniforme entre tarjetas del Inicio lo da el gap de .home */
}
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mc-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.mc-badge {
  font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; letter-spacing: .2px;
}
.mc-badge.pos { background: #dcfce7; color: #15803d; }
.mc-badge.neg { background: #fee2e2; color: #b91c1c; }
.mc-amount {
  font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em;
  margin: 6px 0 2px; font-variant-numeric: tabular-nums; line-height: 1.05;
}
.mc-chart { position: relative; height: 96px; margin: 8px -4px 8px; }
.mc-empty { color: var(--muted); font-size: 13px; padding: 26px 0 20px; text-align: center; }
.mc-caption { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.mc-cap b { font-weight: 800; }
.mc-cap b.pos { color: #16a34a; }
.mc-cap b.neg { color: #dc2626; }
.mc-sep { color: #cbd5e1; }
@media (max-width: 380px) { .mc-amount { font-size: 30px; } }

/* ====== Botón de ojo (ocultar/mostrar montos) ====== */
.eye-toggle {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; flex: 0 0 auto;
  border: none; border-radius: 9px; cursor: pointer;
  color: var(--muted); background: var(--surface-2);
  padding: 0; transition: background .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.eye-toggle:hover { color: var(--ink); background: var(--line); }
.eye-toggle .ic { width: 18px; height: 18px; }
.eye-toggle.eye-inline { width: 24px; height: 24px; vertical-align: -6px; margin-left: 4px; background: transparent; }
.eye-toggle.eye-inline .ic { width: 16px; height: 16px; }
.eye-toggle.eye-on-dark { background: rgba(255,255,255,0.16); color: #fff; }
.eye-toggle.eye-on-dark:hover { background: rgba(255,255,255,0.28); color: #fff; }

/* ====== INICIO: bloque de DISPONIBLE dentro de la tarjeta principal (.month-card) ====== */
.mc-avail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mc-avail-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.mc-avail { display: flex; gap: 12px; margin-bottom: 12px; }
.mc-avail-col { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-avail-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.mc-avail-val {
  font-size: 22px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mc-avail-val.credit { color: #16a34a; }
.mc-avail-val.debt { color: #dc2626; }
.mc-badge.accent { background: #dbeafe; color: #1e40af; }
.mc-cap b.accent { color: #1e40af; }

/* Barra de distribución del dinero líquido */
.mc-bar {
  display: flex; height: 9px; border-radius: 999px; overflow: hidden;
  background: var(--surface-2, #eef2f7); margin-top: 2px;
}
.mc-seg { height: 100%; }
.mc-seg + .mc-seg { box-shadow: -1px 0 0 rgba(255,255,255,0.65); }

/* Leyenda: origen de cada monto líquido disponible */
.mc-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mc-legend li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.mc-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.mc-leg-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-leg-type { color: var(--muted); font-size: 11px; margin-left: 2px; }
.mc-leg-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Separador entre disponible y estadísticas de gastos */
.mc-divider { height: 1px; background: var(--line); margin: 14px 0 12px; }
@media (max-width: 380px) { .mc-avail-val { font-size: 20px; } }

/* Tarjetas de estado (2x2) — emergen por detrás de la tarjeta principal */
.stat-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.stat-c {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 13px;
  box-shadow: 0 1px 2px rgba(15,35,80,0.05), 0 6px 16px rgba(15,35,80,0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-c-label { font-size: 11.5px; color: var(--muted); }
.stat-c-val { font-size: 17px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-c-val.pos { color: #16a34a; }
.stat-c-val.neg { color: #dc2626; }

/* ============================================================
   SPLASH / PRESENTACIÓN (al abrir y al iniciar sesión)
   ============================================================ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(130% 100% at 50% 28%, #17316f 0%, #0c1c44 46%, #050c1e 100%);
  opacity: 1;
  transition: opacity .55s ease, visibility .55s ease;
}
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-logo {
  width: min(66vw, 250px);
  height: auto;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.16), rgba(255,255,255,0.05) 45%, transparent 62%);
  filter: drop-shadow(0 12px 42px rgba(212,175,55,0.30));
  animation: splashLogo 1s cubic-bezier(.2,.7,.2,1) both;
}
.splash-title {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .4px;
  background: linear-gradient(180deg, #f7e9ad, #d4af37 55%, #b8860b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: splashFadeUp .7s .25s ease both;
}
.splash-sub {
  margin-top: 4px;
  font-size: 13px;
  color: #b9c6e6;
  letter-spacing: .3px;
  animation: splashFadeUp .7s .4s ease both;
}
.splash-bar {
  margin-top: 22px;
  width: 140px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  animation: splashFadeUp .7s .5s ease both;
}
.splash-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 45%;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  animation: splashBar 1.3s .2s ease-in-out infinite;
}
@keyframes splashLogo { from { opacity: 0; transform: scale(.86) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes splashFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes splashBar { 0% { transform: translateX(-130%); } 100% { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) {
  .splash-logo, .splash-title, .splash-sub, .splash-bar { animation: none; }
  .splash-bar::after { animation: none; opacity: .6; }
}

/* ============================================================
   APP HEADER: topbar + barra de contexto (pegados, sticky)
   ============================================================ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar {
  position: relative;
  top: auto;
  z-index: auto;
}

/* Acciones dinámicas dentro del topbar principal (filtro + agregar + usuario) */
.topbar-actions {
  grid-column: 3;        /* siempre en la última columna (derecha), aunque el menú esté oculto */
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

/* Título de la vista, dentro del topbar */
.topbar-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Botones del topbar (filtro / agregar) sobre el fondo navy */
.ctx-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: none;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  flex-shrink: 0;
  transition: background .15s ease, transform .12s ease, filter .15s ease;
}
.ctx-btn[hidden] { display: none; } /* respeta el atributo hidden (se muestra solo si la vista lo activa) */
.ctx-btn:hover { background: rgba(255,255,255,0.26); }
.ctx-btn:active { transform: scale(0.9); }
.ctx-btn.active,
.ctx-btn.has-active {
  background: rgba(255,255,255,0.30);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.55);
}
.ctx-add {
  font-size: 25px;
  font-weight: 400;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  box-shadow: 0 5px 14px rgba(22,163,74,0.45);
}
.ctx-add:hover { filter: brightness(1.06); background: linear-gradient(135deg, #16a34a, #15803d); }

/* Responsive: en móvil se ve el título de la vista; en escritorio, marca + menú */
.brand-name { display: none; }
.topbar-title { display: block; }
@media (min-width: 768px) {
  .brand-name { display: inline; }
  .topbar-title { display: none; }
}
@media (max-width: 480px) {
  .ctx-btn { width: 36px; height: 36px; }
  .topbar-title { font-size: 16px; }
}

/* ============================================================
   BARRA DE TOTALES (sin iconos, pegada bajo el header)
   ============================================================ */
.totals-bar {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 16px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15,35,80,0.05), 0 10px 26px rgba(15,35,80,0.07);
}
.total-cell {
  flex: 1 1 140px;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid #eef1f6;
}
.total-cell:last-child { border-right: none; }
.total-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.total-value {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.total-value.pos { color: #16a34a; }
.total-value.neg { color: #dc2626; }
.total-value.accent { color: #1e40af; }
@media (max-width: 480px) {
  .total-cell { padding: 11px 12px; }
  .total-value { font-size: 16px; }
}

/* ============================================================
   FILTROS COLAPSABLES (se abren desde el icono del header)
   ============================================================ */
.filters-bar {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 14px;
  margin-bottom: 0;
  border-width: 0;
  opacity: 0;
  transition: grid-template-rows .28s ease, opacity .22s ease, padding .28s ease, margin .28s ease;
}
.filters-bar > .filters { overflow: hidden; min-height: 0; }
.filters-bar.open {
  grid-template-rows: 1fr;
  padding: 14px;
  margin-bottom: 16px;
  border-width: 1px;
  opacity: 1;
}

/* ============================================================
   LISTA SWIPE: deslizar tarjeta para Editar / Eliminar
   ============================================================ */
.swipe-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.swipe-row {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  touch-action: pan-y;
}
.swipe-row-actions {
  position: absolute;
  inset: 0 0 0 auto;
  width: 132px;
  display: flex;
}
.swipe-row-actions form {
  margin: 0;
  flex: 1 1 0;
  display: flex;
}
.swipe-act {
  flex: 1 1 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.swipe-act .sa-ico { font-size: 18px; }
.swipe-edit { background: linear-gradient(135deg, #1e40af, #12244f); }
.swipe-delete { background: linear-gradient(135deg, #ef4444, #b91c1c); }

.swipe-row-content {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow: 0 1px 2px rgba(15,35,80,0.05), 0 6px 18px rgba(15,35,80,0.07);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}
.swipe-row.swipe-open .swipe-row-content {
  box-shadow: -8px 0 18px rgba(15,35,80,0.14);
}
.swipe-row-content::after {
  content: "‹";
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(100,116,139,0.45);
  font-size: 17px;
  pointer-events: none;
  transition: opacity .15s ease;
}
.swipe-row.swipe-open .swipe-row-content::after { opacity: 0; }

/* contenido de cada tarjeta swipe */
.swipe-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.swipe-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.swipe-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swipe-sub {
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swipe-amount {
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 8px;
}
.swipe-amount.pos { color: #16a34a; }
.swipe-amount.neg { color: #dc2626; }
.swipe-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 9px;
}
.swipe-empty {
  text-align: center;
  color: #64748b;
  font-size: 14px;
  padding: 22px 10px;
}

/* Fila de ledger estática (gastos/ingresos enlazados, sin swipe) */
.ledger-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow: 0 1px 2px rgba(15,35,80,0.05), 0 6px 18px rgba(15,35,80,0.07);
}