/* ==================== VARIABLES ==================== */
/* Los colores viven aquí como tokens semánticos; el tema oscuro solo los
   redefine en el bloque [data-theme="dark"] de abajo. Ninguna regla del resto
   del archivo debe traer un color literal salvo los de marca (instituciones). */
:root {
  color-scheme: light;

  /* ── Medidas (no cambian con el tema) ── */
  --sidebar-w:      240px;
  --sidebar-coll:   64px;
  --bottom-nav-h:   60px;
  --header-h:       52px;
  --radius:         12px;
  --radius-sm:      8px;

  /* ── Escala tipográfica de etiquetas diminutas ──
     Existen como token porque viajan en atributos `style` dentro del HTML de
     los módulos, donde una media query no las alcanza. Aquí el valor de
     escritorio es el original; el bloque de densidad móvil les pone suelo. */
  --fs-micro: 0.58rem;
  --fs-nano:  0.60rem;
  --fs-tiny:  0.62rem;
  --fs-mini:  0.65rem;
  --fs-small: 0.68rem;

  /* ── Marca ── */
  --primary:        #1a237e;   /* superficie de marca: header de card, FAB, chip activo */
  --primary-light:  #1565c0;   /* relleno de botón primario */
  --primary-dark:   #0d1a6e;
  --accent:         #1565c0;   /* azul de texto/borde interactivo */
  --accent-strong:  #1a237e;   /* su variante más oscura (tabs, links activos) */
  --success:        #2e7d32;
  --success-light:  #66bb6a;
  --warning:        #e65100;
  --danger:         #c62828;

  /* ── Superficies ── */
  --bg:             #f0f2f5;
  --card-bg:        #ffffff;
  --surface-2:      #f8f9fa;   /* thead, tfoot, franjas dentro de una card */
  --surface-3:      #f7f8fa;   /* bloques sutiles: chips neutros, ejemplos */
  --surface-accent: #e8edf5;   /* realce azulado: acordeón abierto, fila elegida */
  --track:          #e9ecef;   /* fondo de barras de progreso */

  /* ── Texto ── */
  --text:           #212121;
  --text-soft:      #555555;
  --text-muted:     #757575;
  --text-faint:     #9e9e9e;

  /* ── Bordes y estados ── */
  --border:         #e0e0e0;
  --border-strong:  #b0b9c6;
  --border-soft:    #f3f3f3;
  --input-border:   #dde1e7;   /* el fondo de los inputs lo pone data-bs-theme */
  --focus-ring:     rgba(21,101,192,0.12);
  --row-alt:        rgba(0,0,0,.018);
  --row-hover:      #eef2ff;
  --row-best:       #f0fdf4;
  --row-highlight:  #fffde7;   /* fila señalada, ej. la mensualidad recién pagada */
  --hover-soft:     #f5f5f5;
  --shadow:         0 2px 8px rgba(0,0,0,0.08);

  /* ── Navegación ── */
  --sidebar-bg:        var(--primary);
  --sidebar-active-bd: #64b5f6;

  /* ── Plástico de las tarjetas (wallet) ── */
  --wcard-back-bg:  #1e1e2e;
  --stripe:         #111111;

  /* ── Tintes: fondo suave + su color de texto ── */
  --tint-info:      #e3f2fd;  --on-tint-info:    #1565c0;
  --tint-success:   #e8f5e9;  --on-tint-success: #2e7d32;
  --tint-warn:      #fff3e0;  --on-tint-warn:    #e65100;
  --tint-warn-alt:  #fff8e1;
  --tint-danger:    #ffebee;  --on-tint-danger:  #c62828;
  --tint-purple:    #f3e5f5;  --on-tint-purple:  #6a1b9a;
  --tint-indigo:    #e8eaf6;  --on-tint-indigo:  #283593;
  --tint-neutral:   #e0e0e0;  --on-tint-neutral: #424242;

  /* ── Chips de institución (color de marca sobre fondo tintado) ── */
  --bank-rojo-bg:   #ffeaec;  --bank-rojo-fg:   #b71c1c;
  --bank-bbva-bg:   #e3f2fd;  --bank-bbva-fg:   #004481;
  --bank-mp-bg:     #e3f5fc;  --bank-mp-fg:     #006fa6;
  --bank-nu-bg:     #f3e5f5;  --bank-nu-fg:     #6a0dad;
  --bank-rappi-bg:  #fbe9e7;  --bank-rappi-fg:  #bf360c;
  --bank-revo-bg:   #e8eaf6;  --bank-revo-fg:   #1a237e;
}

/* ==================== TEMA OSCURO ==================== */
/* data-theme lo estampa el script inline de index.html antes del primer
   pintado; data-bs-theme (mismo script) se encarga de los componentes nativos
   de Bootstrap. Los colores de institución no se tocan: son dato, no tema. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* El azul de marca NO se redefine aquí: login, sidebar, header móvil, header
     de las data cards, chip de filtro activo y FAB conservan el mismo azul en
     ambos temas. Solo se aclaran --accent/--accent-strong, que son el azul
     usado como TEXTO o borde y que sobre fondo oscuro sería ilegible. */
  --accent:         #7aa2f7;
  --accent-strong:  #93b4ff;
  --success:        #66bb6a;
  --success-light:  #81c995;
  --warning:        #ffa726;
  --danger:         #ef5350;

  --bg:             #12151c;
  --card-bg:        #1a1f29;
  --surface-2:      #212734;
  --surface-3:      #232a36;
  --surface-accent: #232a3a;
  --track:          #2b313c;

  --text:           #e4e6eb;
  --text-soft:      #b8c0cc;
  --text-muted:     #9aa4b2;
  --text-faint:     #6b7684;

  --border:         #2e3541;
  --border-strong:  #4a5364;
  --border-soft:    #262c37;
  --input-border:   #39414f;
  --focus-ring:     rgba(122,162,247,0.25);
  --row-alt:        rgba(255,255,255,.025);
  --row-hover:      #232a3a;
  --row-best:       #16301f;
  --row-highlight:  #2e2a12;
  --hover-soft:     #262c39;
  --shadow:         0 2px 8px rgba(0,0,0,0.45);

  /* --sidebar-bg, --wcard-back-bg y --stripe tampoco cambian: el sidebar es
     azul de marca y el plástico de las tarjetas es una superficie propia. */

  --tint-info:      #16233a;  --on-tint-info:    #8ab4f8;
  --tint-success:   #16301f;  --on-tint-success: #81c995;
  --tint-warn:      #33240f;  --on-tint-warn:    #fdba4d;
  --tint-warn-alt:  #33290f;
  --tint-danger:    #3a1a1c;  --on-tint-danger:  #f28b82;
  --tint-purple:    #2a1b38;  --on-tint-purple:  #d0a9f5;
  --tint-indigo:    #1c2038;  --on-tint-indigo:  #9fa8f0;
  --tint-neutral:   #2b313c;  --on-tint-neutral: #c4cad3;

  --bank-rojo-bg:   #3a1a1e;  --bank-rojo-fg:   #ff8a80;
  --bank-bbva-bg:   #12263d;  --bank-bbva-fg:   #79b8ff;
  --bank-mp-bg:     #0f2733;  --bank-mp-fg:     #6fc9ec;
  --bank-nu-bg:     #2a1738;  --bank-nu-fg:     #cf9bee;
  --bank-rappi-bg:  #3a1e17;  --bank-rappi-fg:  #ff9d7a;
  --bank-revo-bg:   #1b1f3a;  --bank-revo-fg:   #a3adf5;
}

/* ==================== BASE ==================== */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  overflow-x: hidden;
  font-size: 0.9rem;
}
a { text-decoration: none; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; }

/* ==================== AUTH ==================== */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 24px;
  padding: 48px 40px;
  text-align: center;
  color: white;
  max-width: 360px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.auth-logo {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 2rem;
}
.auth-card h1 {
  font-size: 1.8rem;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.auth-card p {
  color: rgba(255,255,255,0.65);
  margin-bottom: 32px;
  font-size: 0.9rem;
}
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: white;
  color: #3c4043;
  border: none;
  border-radius: 12px;
  padding: 12px 28px;
  font-size: 0.95rem;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.btn-google:hover {
  background: #f8f8f8;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.auth-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  margin-top: 20px;
  margin-bottom: 0;
}

/* ==================== LAYOUT ==================== */
#app-layout {
  display: flex;
  min-height: 100vh;
}

/* ==================== SIDEBAR ==================== */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: white;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 1000;
  transition: width 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}
.sidebar.collapsed { width: var(--sidebar-coll); }

.sidebar-header {
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 64px;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.sidebar-logo { font-size: 1.4rem; flex-shrink: 0; }
.sidebar-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  white-space: nowrap;
  flex: 1;
}
.sidebar-toggle {
  color: rgba(255,255,255,0.6);
  padding: 4px 6px;
  line-height: 1;
  flex-shrink: 0;
  order: -1;
}
.sidebar-toggle:hover { color: white; }

.sidebar-section-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.35);
  padding: 14px 16px 4px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sidebar-section-settings i {
  font-size: 0.7rem;
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-nav .nav-link,
.sidebar-footer .nav-link,
.sidebar-footer button.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: rgba(255,255,255,0.7);
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
}
.sidebar-nav .nav-link i,
.sidebar-footer .nav-link i,
.sidebar-footer button.nav-link i {
  font-size: 1.05rem;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.sidebar-nav .nav-link:hover,
.sidebar-footer .nav-link:hover,
.sidebar-footer button.nav-link:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}
.sidebar-nav .nav-link.active {
  background: rgba(255,255,255,0.15);
  color: white;
  border-right: 3px solid var(--sidebar-active-bd);
}

/* Collapsed state */
/* Colapsar es una preferencia de ESCRITORIO, y se recuerda en localStorage. En
   móvil el sidebar no se colapsa: es un cajón que entra a ancho completo. Sin
   este @media, quien lo dejara colapsado en la compu abría el cajón en el
   teléfono y lo encontraba a ancho completo pero con los iconos centrados y
   sin una sola etiqueta — la clase seguía puesta y solo el `width` estaba
   contrarrestado (ver la sección RESPONSIVE). */
@media (min-width: 992px) {
  .sidebar.collapsed .sidebar-logo { display: none; }
  .sidebar.collapsed .sidebar-title { display: none; }

  .sidebar.collapsed .nav-link span,
  .sidebar.collapsed .sidebar-footer span { display: none; }

  .sidebar.collapsed .sidebar-section-label {
    height: 1px;
    background: rgba(255,255,255,.12);
    padding: 0;
    margin: 6px 10px;
    overflow: hidden;
    font-size: 0;
    gap: 0;
  }
  .sidebar.collapsed .sidebar-section-settings {
    height: auto;
    background: transparent;
    padding: 10px 0 2px;
    margin: 0;
    font-size: 0;
    justify-content: center;
  }
  .sidebar.collapsed .sidebar-section-settings i {
    font-size: 0.8rem;
    color: rgba(255,255,255,.3);
  }

  .sidebar.collapsed .sidebar-nav .nav-link,
  .sidebar.collapsed .sidebar-footer .nav-link,
  .sidebar.collapsed .sidebar-footer button.nav-link {
    justify-content: center;
    padding: 11px;
    gap: 0;
  }
  .sidebar.collapsed .sidebar-primary-label { display: none !important; }
  .sidebar.collapsed .sidebar-version { display: none; }
}

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 8px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.sidebar-version {
  font-size: 0.68rem;
  color: rgba(255,255,255,.25);
  padding: 4px 16px 2px;
  letter-spacing: .04em;
}
.sidebar-footer .nav-link,
.sidebar-footer button.nav-link {
  width: 100%;
  text-align: left;
}

/* ==================== MAIN CONTENT ==================== */
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  transition: margin-left 0.25s ease;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.sidebar.collapsed ~ .main-content { margin-left: var(--sidebar-coll); }

.content-area {
  flex: 1;
  padding: 28px 28px 40px;
}

/* ==================== MOBILE HEADER ==================== */
.mobile-header {
  background: var(--sidebar-bg);
  height: var(--header-h);
  position: sticky;
  top: 0;
  z-index: 500;
  flex-shrink: 0;
}

/* ==================== BOTTOM NAV ==================== */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-h);
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.6rem;
  gap: 2px;
  padding: 6px 0;
  transition: color 0.15s;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.bottom-nav-item span { display: none; }
.bottom-nav-item i { font-size: 1.4rem; }
.bottom-nav-item.active { color: var(--accent-strong); }
.bottom-nav-item:hover { color: var(--accent); }

/* ==================== SIDEBAR OVERLAY ==================== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 999;
}
.sidebar-overlay.show { display: block; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w) !important;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    padding-bottom: var(--bottom-nav-h);
  }
  .main-content {
    margin-left: 0 !important;
    padding-bottom: var(--bottom-nav-h);
  }
  .content-area { padding: 16px 16px 24px; }
  .sidebar-toggle { display: none; }

  /* Hide sidebar items already accessible via bottom nav */
  .sidebar-nav li[data-hide-mobile] { display: none; }
  .sidebar-section-primary { display: none; }

  /* Wallet cards centered on mobile */
  .wallet-grid { justify-content: center; }

  /* ── Stack mode (Opción C) ── */
  .wallet-grid.wallet-stack {
    flex-direction: column;
    align-items: center;
    gap: 0;
    justify-content: flex-start;
  }
  .wallet-stack .wcard-shell {
    width: 100%;
    max-width: 360px;
    height: 52px;
    overflow: hidden;
    border-radius: 0;
    position: relative;
    margin-top: -14px;
    box-shadow: 0 4px 10px rgba(0,0,0,.22);
    transition: height .38s cubic-bezier(.4,0,.2,1),
                box-shadow .38s,
                border-radius .38s,
                margin .38s;
    cursor: pointer;
    flex-shrink: 0;
  }
  .wallet-stack .wcard-shell:first-child { margin-top: 0; }
  .wallet-stack .wcard-shell.stack-active {
    height: 176px;
    overflow: visible;
    box-shadow: 0 8px 28px rgba(0,0,0,.3);
    margin-top: 12px;
    margin-bottom: 12px;
    border-radius: 12px;
  }
  .wallet-stack .wcard-shell:first-child.stack-active { margin-top: 0; }
  .wallet-stack .wcard-shell:last-child.stack-active  { margin-bottom: 0; }
  .wallet-stack .wcard-wrap {
    width: 100%;
    height: 176px;
    border-radius: 12px;
  }
  .wallet-stack .wcard-shell:not(.stack-active) .wcard-front,
  .wallet-stack .wcard-shell:not(.stack-active) .wcard-back {
    border-radius: 0;
    box-shadow: none;
  }
  .wallet-stack .wcard-shell:not(.stack-active) .wcard-front {
    padding-top: 0;
  }
  .wallet-stack .wcard-shell:not(.stack-active) .wcard-top {
    height: 38px;
    align-items: center;
  }
  .wallet-stack .wcard-shell.stack-active .wcard-front,
  .wallet-stack .wcard-shell.stack-active .wcard-back {
    border-radius: 12px;
  }
  /* Institution + Alias en la misma fila al estar colapsada */
  .wallet-stack .wcard-shell:not(.stack-active) .wcard-top > div {
    display: flex;
    align-items: baseline;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    margin-right: 8px;
  }
  .wallet-stack .wcard-shell:not(.stack-active) .wcard-inst {
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: 0;
    font-size: 0.78rem;
  }
  .wallet-stack .wcard-shell:not(.stack-active) .wcard-inst::after {
    content: '\00b7';
    padding: 0 5px;
    opacity: .55;
  }
  .wallet-stack .wcard-shell:not(.stack-active) .wcard-name {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }
}

/* ==================== PAGE HEADER ==================== */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}
.page-header-text h2 {
  font-size: 1.35rem;
  margin: 0 0 2px;
}
.page-header-text p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

/* ==================== METRIC CARDS ==================== */
.metric-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
/* Tintes reutilizables: el fondo va en el contenedor y el icono hereda el color.
   Sustituyen a los `style="background:#..."` que antes viajaban en el HTML de
   cada módulo, que no podían responder al tema. */
.tint-info    { background: var(--tint-info);     color: var(--on-tint-info); }
.tint-success { background: var(--tint-success);  color: var(--on-tint-success); }
.tint-warn    { background: var(--tint-warn);     color: var(--on-tint-warn); }
.tint-warn-alt{ background: var(--tint-warn-alt); color: var(--on-tint-warn); }
.tint-danger  { background: var(--tint-danger);   color: var(--on-tint-danger); }
.tint-purple  { background: var(--tint-purple);   color: var(--on-tint-purple); }
.tint-indigo  { background: var(--tint-indigo);   color: var(--on-tint-indigo); }
.tint-neutral { background: var(--tint-neutral);  color: var(--on-tint-neutral); }

/* Divisor vertical entre las dos mitades de una metric card partida */
.metric-divider       { width: 1px; background: var(--border); margin: 2px 10px; }
.metric-divider.tight { margin: 2px 8px; }

/* Fila señalada dentro de una tabla */
.row-highlight { background: var(--row-highlight); }

.metric-info { flex: 1; min-width: 0; }
.metric-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-top: 2px; }

/* ==================== DATA CARDS ==================== */
.data-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 20px;
}
.data-card-header {
  background: var(--primary);
  color: white;
  padding: 14px 20px;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.data-card-header i { font-size: 1rem; }
.data-card-body { padding: 20px; }

/* ==================== TABLES ==================== */
.table-wrapper { overflow-x: auto; }
.table {
  margin-bottom: 0;
  font-size: 0.85rem;
  /* Por defecto Bootstrap pinta cada celda con --bs-body-bg. Al dejarlo
     transparente el fondo lo aporta la card que contiene la tabla, que ya
     responde al tema; así ninguna fila puede quedarse en blanco. */
  --bs-table-bg:           transparent;
  --bs-table-color:        var(--text);
  --bs-table-border-color: var(--border-soft);
}
.table thead th {
  background: var(--surface-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-top: none;
  padding: 6px 10px;
  white-space: nowrap;
  font-weight: 600;
}
.table tbody td {
  padding: 6px 10px;
  vertical-align: middle;
  border-color: var(--border-soft);
}
.table tbody tr:nth-child(even) > td,
.table tbody tr:nth-child(even) > th {
  --bs-table-accent-bg: var(--row-alt);
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.table tbody tr:hover > td,
.table tbody tr:hover > th { background-color: var(--row-hover) !important; }
.table tfoot td {
  font-weight: 700;
  background: var(--surface-2);
  border-top: 2px solid var(--border);
  padding: 10px 14px;
}

/* Variantes contextuales de fila (.table-success en pagados/liquidados,
   .table-warning en compras diferidas, .table-secondary en el pie del
   Impacto). Bootstrap las genera con hexes claros fijos que NO responden a
   data-bs-theme, así que en oscuro hay que redefinirlas a mano. */
:root[data-theme="dark"] .table-success {
  --bs-table-bg: var(--tint-success);  --bs-table-color: var(--on-tint-success);
}
:root[data-theme="dark"] .table-warning {
  --bs-table-bg: var(--tint-warn-alt); --bs-table-color: var(--on-tint-warn);
}
:root[data-theme="dark"] .table-danger {
  --bs-table-bg: var(--tint-danger);   --bs-table-color: var(--on-tint-danger);
}
:root[data-theme="dark"] .table-info {
  --bs-table-bg: var(--tint-info);     --bs-table-color: var(--on-tint-info);
}
:root[data-theme="dark"] .table-secondary,
:root[data-theme="dark"] .table-light,
:root[data-theme="dark"] .table-active {
  --bs-table-bg: var(--surface-2);     --bs-table-color: var(--text);
}
:root[data-theme="dark"] .table-success,
:root[data-theme="dark"] .table-warning,
:root[data-theme="dark"] .table-danger,
:root[data-theme="dark"] .table-info,
:root[data-theme="dark"] .table-secondary,
:root[data-theme="dark"] .table-light,
:root[data-theme="dark"] .table-active {
  --bs-table-border-color: var(--border);
  color: var(--bs-table-color);
}

/* ==================== BADGES ==================== */
.badge-tipo {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-credito  { background: var(--tint-info);     color: var(--on-tint-info); }
.badge-debito   { background: var(--tint-success);  color: var(--on-tint-success); }
.badge-fisica    { background: var(--tint-purple);  color: var(--on-tint-purple); }
.badge-digital   { background: var(--tint-indigo);  color: var(--on-tint-indigo); }
.badge-prestamo  { background: var(--tint-warn);    color: var(--on-tint-warn); }
.badge-pagado   { background: var(--tint-success);  color: var(--on-tint-success); }
.badge-pendiente{ background: var(--tint-warn-alt); color: var(--on-tint-warn); }
.badge-vencido  { background: var(--tint-danger);   color: var(--on-tint-danger); }

/* ==================== BANK CHIPS ==================== */
.bank-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}
.bank-banamex    { background:var(--bank-rojo-bg);  color:var(--bank-rojo-fg); }
.bank-banorte    { background:var(--bank-rojo-bg);  color:var(--bank-rojo-fg); }
.bank-bbva       { background:var(--bank-bbva-bg);  color:var(--bank-bbva-fg); }
.bank-mercadopago{ background:var(--bank-mp-bg);    color:var(--bank-mp-fg); }
.bank-nu         { background:var(--bank-nu-bg);    color:var(--bank-nu-fg); }
.bank-rappi      { background:var(--bank-rappi-bg); color:var(--bank-rappi-fg); }
.bank-revolut    { background:var(--bank-revo-bg);  color:var(--bank-revo-fg); }
.bank-santander  { background:var(--bank-rojo-bg);  color:var(--bank-rojo-fg); }

/* ==================== PROGRESS BAR ==================== */
.progress { height: 6px; border-radius: 3px; background: var(--track); }
.progress-bar { border-radius: 3px; }

/* ==================== FORMS ==================== */
.form-label { font-size: 0.82rem; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--input-border);
  font-size: 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-text { font-size: 0.75rem; color: var(--text-muted); }

/* ==================== BUTTONS ==================== */
.btn-primary   { background: var(--primary-light); border-color: var(--primary-light); }
.btn-primary:hover { background: var(--primary); border-color: var(--primary); }
.btn-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.btn-icon:hover { border-color: var(--border-strong); color: var(--text); background: var(--hover-soft); }
.btn-icon.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--tint-danger); }

/* ==================== MODALS ==================== */
.modal-header { border-bottom: 1px solid var(--border); padding: 16px 20px; }
.modal-title { font-size: 1rem; font-weight: 700; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--border); padding: 12px 20px; }

/* ==================== ACCORDION ==================== */
.accordion-button { font-weight: 600; font-size: 0.9rem; }
.accordion-button:not(.collapsed) { background: var(--surface-accent); color: var(--accent-strong); box-shadow: none; }
.accordion-button:focus { box-shadow: none; }
.accordion-item { border-color: var(--border); margin-bottom: 8px; border-radius: var(--radius-sm) !important; overflow: hidden; }

/* ==================== EMPTY STATE ==================== */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}
.empty-state i { font-size: 2.5rem; opacity: 0.25; display: block; margin-bottom: 12px; }
.empty-state p { font-size: 0.875rem; margin: 0; }

/* ==================== LOADING ==================== */
.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* ==================== TABS ==================== */
.nav-tabs { border-bottom: 2px solid var(--border); }
.nav-tabs .nav-link {
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 10px 18px;
  font-weight: 500;
  font-size: 0.875rem;
  transition: color 0.15s;
}
.nav-tabs .nav-link:hover { color: var(--text); border-color: transparent; }
.nav-tabs .nav-link.active { color: var(--accent-strong); border-bottom-color: var(--accent-strong); font-weight: 700; }

/* ==================== MONTH SELECTOR ==================== */
.month-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-weight: 600;
  font-size: 0.875rem;
}
.month-selector button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.month-selector button:hover { color: var(--accent-strong); }

/* ==================== ALERT BOXES ==================== */
.alert-restante {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
}
.alert-restante.positivo { background: var(--tint-success); color: var(--on-tint-success); }
.alert-restante.negativo { background: var(--tint-danger);  color: var(--on-tint-danger); }

/* ==================== EVENTO CARDS ==================== */
.evento-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.evento-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.evento-card-header {
  height: 6px;
}
.evento-card-body { padding: 18px 20px; }
.evento-card-title { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.evento-card-dates { font-size: 0.78rem; color: var(--text-muted); }

/* ==================== COMPARISON TABLE ==================== */
.comparison-row.best-option {
  background: var(--row-best) !important;
}
.comparison-row.best-option td:first-child {
  border-left: 3px solid var(--success);
}
.best-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--tint-success);
  color: var(--on-tint-success);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
}
.selected-option {
  background: var(--surface-accent) !important;
}
.selected-option td:first-child {
  border-left: 3px solid var(--accent-strong);
}

/* ==================== CARD NUMBER ==================== */
.card-number {
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  font-size: 0.8rem;
}
.card-number.masked { color: var(--text-muted); }

/* ==================== TARJETAS UX ==================== */
.inst-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
}
.inst-meta-label { color: var(--text-muted); white-space: nowrap; }
.inst-meta-value { flex: 1; letter-spacing: 0.5px; }

.inst-cards-body { padding: 12px 16px; }

/* Card section (per tarjeta within institution) */
.card-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.card-section:last-of-type { border-bottom: none; }

.card-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

/* Bank card tiles */
.bank-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.bank-card-tile {
  width: 240px;
  min-height: 110px;
  border-radius: 10px;
  color: #fff;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.1);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.bank-card-tile::before {
  content: '';
  position: absolute;
  top: -24px; right: -24px;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.bank-card-tile::after {
  content: '';
  position: absolute;
  top: 14px; right: 26px;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  pointer-events: none;
}
.bct-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bct-net {
  display: block;
  flex-shrink: 0;
  height: 16px;
  width: auto;
}
.bct-numeros {
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  z-index: 1;
}
.bct-num-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bct-num-label {
  font-size: 0.6rem;
  opacity: .65;
  text-transform: uppercase;
  letter-spacing: .5px;
  width: 38px;
  flex-shrink: 0;
}
.bct-num-main {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.bct-num-text {
  font-family: 'Courier New', monospace;
  font-size: 0.84rem;
  letter-spacing: 1.5px;
}
.bct-no-num { opacity: .4; }
.bct-venc {
  font-size: 0.65rem;
  font-family: 'Courier New', monospace;
  opacity: .75;
  flex-shrink: 0;
}
.bct-fechas {
  display: flex;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.25);
  font-size: 0.67rem;
  opacity: .9;
  position: relative;
  z-index: 1;
  letter-spacing: .3px;
}

/* Copy button inside tile — hidden until hover */
.bct-copy {
  opacity: 0;
  color: rgba(255,255,255,.9) !important;
  transition: opacity .15s;
}
.bct-copy:hover { background: rgba(255,255,255,.2) !important; }
.bct-copy.copied { color: #a5d6a7 !important; opacity: 1; }
.bank-card-tile:hover .bct-copy { opacity: 1; }

/* Card section info row (CLABE, chips) */
.card-section-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.card-number-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-3);
  border-radius: 6px;
  padding: 3px 8px 3px 6px;
  font-size: 0.8rem;
}
.card-number-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.card-row-credit {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
}
.credit-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  color: var(--on-tint-info);
  background: var(--tint-info);
  border-radius: 20px;
  padding: 2px 9px;
  font-weight: 500;
}
.credit-chip.prestamo-chip { color: var(--on-tint-warn); background: var(--tint-warn); }

.btn-copy-data {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.78rem;
  transition: color .15s, background .15s;
}
.btn-copy-data:hover { color: var(--accent-strong); background: var(--tint-info); }
.btn-copy-data.copied { color: var(--on-tint-success); background: var(--tint-success); }

/* ==================== MSI PROGRESS ==================== */
.msi-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.msi-item:last-child { border-bottom: none; }
.msi-item-info { flex: 1; min-width: 0; }
.msi-item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msi-item-dates { font-size: 0.72rem; color: var(--text-muted); }
.msi-item-amount { text-align: right; flex-shrink: 0; }
.msi-item-monthly { font-weight: 700; font-size: 0.9rem; }
.msi-item-remaining { font-size: 0.72rem; color: var(--text-muted); }

/* ==================== GASTOS PENDIENTES DE CONFIRMAR ==================== */
/* En escritorio la fila es una sola línea (las utilidades de Bootstrap del
   markup bastan). En móvil esa línea pedía ~420px sobre ~356 disponibles: el
   nombre se estrujaba a una palabra por renglón y los botones se salían de la
   card. Aquí se reparte en tres renglones. */
@media (max-width: 575.98px) {
  .gasto-pend {
    flex-wrap: wrap;
    gap: 8px 10px !important;   /* gana a la utilidad .gap-3 */
  }
  /* Nombre y subtítulo ocupan el renglón completo */
  .gasto-pend-info { flex: 1 0 100%; }

  /* "Cobro" y la fecha pasan a una sola línea, alineados a la izquierda */
  .gasto-pend-cobro {
    min-width: 0 !important;
    text-align: left !important;
    display: flex;
    align-items: baseline;
    gap: 5px;
  }

  /* El importe cierra ese mismo renglón por la derecha */
  .gasto-pend-importe {
    min-width: 0 !important;
    margin-left: auto;
  }

  /* Los botones abajo, con Confirmar ocupando el ancho sobrante */
  .gasto-pend-acciones { flex: 1 0 100%; }
  .gasto-pend-acciones .btn-confirmar-gasto { flex: 1; }
}

/* ==================== MIGRATION ==================== */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--card-bg);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--primary-light);
  background: var(--surface-accent);
}
.upload-zone i { font-size: 2.5rem; color: var(--text-muted); margin-bottom: 12px; display: block; }

/* ==================== FILTER BAR ==================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  line-height: 1.3;
}
.filter-chip:hover {
  border-color: var(--primary-light);
  color: var(--primary-light);
}
.filter-chip.active                  { background: var(--primary);  border-color: var(--primary);  color: #fff; }
.filter-chip[data-tipo="debito"].active   { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.filter-chip[data-tipo="credito"].active  { background: #1565c0; border-color: #1565c0; color: #fff; }
.filter-chip[data-tipo="prestamo"].active { background: #e65100; border-color: #e65100; color: #fff; }

.filter-select {
  padding: 6px 32px 6px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23757575' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .15s;
  min-width: 180px;
  height: 34px;
}
.filter-select:focus {
  outline: none;
  border-color: var(--primary-light);
}
/* La flecha va embebida como SVG: hay que reemplazarla para aclararla en oscuro */
:root[data-theme="dark"] .filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa4b2' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==================== WALLET CARDS ==================== */
.wallet-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.wcard-shell {
  width: 280px;
  height: 176px;
  flex-shrink: 0;
}
.wcard-wrap {
  width: 280px;
  height: 176px;
  perspective: 1000px;
  cursor: pointer;
}
.wcard-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.4,0,.2,1);
}
.wcard-wrap.flipped .wcard-inner { transform: rotateY(180deg); }
.wcard-front,
.wcard-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
}
.wcard-front {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  color: var(--on-color, #fff);
}
.wcard-back {
  transform: rotateY(180deg);
  background: var(--wcard-back-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
}
.wcard-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.wcard-inst {
  font-size: 0.62rem;
  opacity: .75;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 2px;
}
.wcard-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .3px;
}
.wcard-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
}
.wcard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
  align-items: flex-end;
}
.wcard-chip {
  font-size: 0.65rem;
  background: rgba(0,0,0,.22);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.bct-net { margin-left: 6px; flex-shrink: 0; }
.wcard-stripe {
  height: 38px;
  background: var(--stripe);
  margin-top: 18px;
  flex-shrink: 0;
}
.wcard-back-body {
  flex: 1;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.wcard-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}
.wcard-field-label {
  font-size: 0.58rem;
  opacity: .55;
  text-transform: uppercase;
  letter-spacing: .5px;
  width: 40px;
  flex-shrink: 0;
}
.wcard-venc {
  font-size: 0.65rem;
  font-family: 'Courier New', monospace;
  opacity: .65;
  margin-left: auto;
}

/* Admin inst header */
.admin-inst-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  color: var(--on-color, #fff);
}
.admin-inst-header .btn-copy-data { color: rgba(var(--on-color-rgb, 255,255,255), .65); }
.admin-inst-header .btn-copy-data:hover { color: var(--on-color, #fff); background: rgba(var(--on-color-rgb, 255,255,255), .15); }
.admin-inst-header .btn-copy-data.copied { color: #a5d6a7; background: rgba(var(--on-color-rgb, 255,255,255), .1); }
.admin-inst-header .btn-outline-light {
  color: var(--on-color, #fff);
  border-color: rgba(var(--on-color-rgb, 255,255,255), .5);
}
.admin-inst-header .btn-outline-light:hover {
  color: rgba(var(--on-color-inv-rgb, 0,0,0), 1);
  background: rgba(var(--on-color-rgb, 255,255,255), .9);
  border-color: rgba(var(--on-color-rgb, 255,255,255), .9);
}

.admin-client-num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,.18);
  font-size: 0.78rem;
  color: rgba(var(--on-color-rgb, 255,255,255), .9);
}

.admin-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
}
.admin-num-badge.fisica  { background: var(--tint-neutral); color: var(--on-tint-neutral); }
.admin-num-badge.digital { background: var(--tint-info);    color: var(--on-tint-info); }

/* ==================== RENDIMIENTOS ==================== */

/* Línea auxiliar bajo el label de una metric card */
.metric-sub {
  font-size: 0.68rem;
  color: var(--text-faint);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tarjeta de cuenta de inversión ── */
.inv-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.inv-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }

.inv-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  color: var(--on-color, #fff);
  /* Alto fijo para que el cuerpo alinee entre tarjetas con y sin alias */
  min-height: 53px;
}
.inv-head-txt { min-width: 0; flex: 1; }
.inv-inst {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  opacity: 0.8;
  line-height: 1.2;
}
.inv-name {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inv-head-actions { display: flex; gap: 3px; flex-shrink: 0; }
.btn-inv-act {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(var(--on-color-rgb, 255,255,255), 0.15);
  color: rgba(var(--on-color-rgb, 255,255,255), 0.9);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-inv-act:hover { background: rgba(var(--on-color-rgb, 255,255,255), 0.3); color: var(--on-color, #fff); }

/* Menú de acciones poco frecuentes (editar / eliminar). Se monta en el <body>,
   no dentro de .inv-card: esa recorta con overflow:hidden para redondear el
   encabezado de color, y aquí el menú quedaría cortado. Por debajo del backdrop
   de los modales (1050) — si se abre uno, el menú ya se cerró. */
.inv-menu {
  position: absolute;
  z-index: 1030;
  min-width: 184px;
  padding: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.inv-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}
.inv-menu-item:hover { background: var(--hover-soft); }
.inv-menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.inv-menu-item.danger { color: var(--danger); }
.inv-menu-item.danger:hover { background: var(--tint-danger); }

/* ── Saldo protagonista ── */
.inv-saldo { text-align: center; padding: 16px 14px 14px; }
.inv-saldo-lbl {
  font-size: 0.64rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.inv-saldo-val {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  margin-top: 3px;
  letter-spacing: -0.5px;
}
/* Tasa anual del saldo actual, con acceso al desglose cuando es ponderada */
.inv-tasa {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.inv-tasa-lbl {
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.inv-tasa-val { font-size: 1rem; font-weight: 700; color: var(--primary-light); }

/* Lo ganado, descriptivo y en una sola línea bajo el saldo */
.inv-saldo-rend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
}
.inv-saldo-rend strong { color: var(--success); font-weight: 600; }
.inv-saldo-pto { color: var(--border); }
.inv-hist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--success-light);
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.inv-hist-btn:hover { background: var(--tint-success); color: var(--on-tint-success); }
.inv-hist-btn:focus-visible { outline: 2px solid var(--success); outline-offset: 1px; }

/* ── Fila de rendimientos: un bloque con divisores, sin cajas sueltas ── */
.inv-yields {
  display: flex;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.inv-y {
  flex: 1;
  min-width: 0;
  padding: 9px 6px;
  text-align: center;
}
.inv-y + .inv-y { border-left: 1px solid var(--border); }
.inv-y-lbl {
  display: block;
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  line-height: 1.25;
  /* Dos renglones reservados: sin esto los importes de las celdas con
     subtítulo (30 d / 365 d) quedan más abajo que los de las otras */
  min-height: 2.4em;
}
.inv-y-lbl small { display: block; font-size: 0.9em; opacity: 0.65; letter-spacing: 0; }
.inv-y-val {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Etiqueta compacta para selects secundarios */
.form-label-sm {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 3px;
}

/* Desglose bruto → ISR → neto del interés diario */

.inv-detalle-btn {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--primary-light);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  /* Anclado abajo: mantiene alineados los botones de tarjetas de distinto alto */
  margin-top: auto;
  transition: background 0.15s;
}
.inv-detalle-btn:hover { background: var(--surface-accent); }

/* ── Reparto por tramos: barra + desglose ── */
.inv-tr-bar {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--track);
}
.inv-tr-seg { display: block; height: 100%; }
.inv-tr-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 10px;
  font-size: 0.74rem;
  color: var(--text-muted);
}
.inv-tr-leg-item { display: inline-flex; align-items: center; gap: 5px; }
.inv-tr-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 2px;
  vertical-align: baseline;
}
.inv-tr-tabla { font-size: 0.8rem; }
.inv-tr-tabla tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--border);
  background: var(--surface-2);
}
.inv-tr-vacio { color: var(--text-muted); opacity: 0.5; }
.inv-tr-marg {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 20px;
  background: var(--tint-info);
  color: var(--on-tint-info);
  font-size: 0.62rem;
  font-weight: 600;
  vertical-align: middle;
}
.inv-tr-nota { font-size: 0.74rem; color: var(--text-muted); margin: 10px 0 0; }

/* ── Aritmética del día ── */
.inv-op { font-size: 0.82rem; }
.inv-op-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.inv-op-row:last-child { border-bottom: none; }
.inv-op-row > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-op-formula { color: var(--text-muted); }
.inv-op-formula sup { font-size: 0.7em; }
.inv-op-base { font-weight: 600; }
.inv-op-sub { font-weight: 600; border-top: 1px solid var(--border); }
.inv-op-neg > span:last-child { color: var(--danger); }
.inv-op-total {
  font-weight: 700;
  font-size: 0.95rem;
  border-top: 2px solid var(--border);
  padding-top: 8px;
}
.inv-op-total > span:last-child { color: var(--success); }

/* ── Secciones del modal Detalle ── */
.inv-det-sec + .inv-det-sec { margin-top: 20px; }
.inv-det-tit {
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
  margin-bottom: 10px;
}

/* ── Configuración ── */
.inv-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.inv-cfg-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.inv-cfg-lbl { color: var(--text-muted); }
.inv-cfg-val { font-weight: 600; text-align: right; }
.inv-cfg-nota { display: block; font-weight: 400; font-size: 0.72rem; color: var(--text-muted); }

/* ── Botón "i" de ayuda contextual ── */
.btn-ayuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--primary-light);
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s;
}
.btn-ayuda:hover { background: var(--tint-info); color: var(--accent-strong); }
.btn-ayuda:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 1px; }

.inv-ayuda-body { font-size: 0.86rem; line-height: 1.55; }
.inv-ayuda-body p { margin-bottom: 10px; }
.inv-ayuda-body p:last-child { margin-bottom: 0; }
.inv-ayuda-body h6 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin: 16px 0 8px;
}
.inv-ayuda-ej {
  background: var(--surface-3);
  border-left: 3px solid var(--primary-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px;
  font-size: 0.8rem;
  color: var(--text-soft);
}

/* ── Historial diario ── */
.inv-hist-tabla { max-height: 55vh; overflow-y: auto; }
.inv-hist-tabla thead th { position: sticky; top: 0; z-index: 1; }
.inv-hist-tabla tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--border);
  background: var(--surface-2);
  position: sticky;
  bottom: 0;
}
.inv-hist-ayer { background: var(--tint-success); }

/* Separadores de la sección Avanzado del modal */
.inv-adv-sep {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  margin-top: 6px;
}

/* ── Calculadora entre 2 fechas ── */
.inv-calc {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.inv-calc-head {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.inv-calc-val { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.inv-calc-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.inv-calc-meta { font-size: 0.8rem; color: var(--text-soft); line-height: 1.7; }
.inv-calc-msg { font-size: 0.78rem; margin-top: 8px; }

/* ── Editor de tramos (modal) ── */
.inv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.inv-row .t-desde {
  flex: 0 0 96px;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}
.inv-row-sep { font-size: 0.75rem; color: var(--text-muted); }
.inv-row-hasta   { flex: 1 1 120px; }
.inv-row-abierto {
  flex: 1 1 120px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}
.inv-row-tasa { flex: 0 0 140px; }
.inv-row .btn-icon { width: 30px; height: 30px; }

@media (max-width: 575.98px) {
  /* Cada tramo se agrupa en un bloque de 2 líneas: rango arriba, tasa abajo */
  .inv-row {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 8px;
    background: var(--surface-3);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
  }
  .inv-row .t-desde { flex: 0 0 auto; text-align: left; }
  .inv-row-hasta   { flex: 1 1 100px; }
  .inv-row-abierto { flex: 1 1 100px; }
  .inv-row-tasa    { flex: 1 1 calc(100% - 42px); }
}

/* ── Modal actualizar monto ── */
.inv-upd-est {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.inv-upd-est-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.inv-upd-est-val { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.inv-upd-delta { font-size: 0.78rem; margin-top: 10px; min-height: 1.2em; }

/* ==================== NOTIFICACIONES ==================== */
/* Una sola línea por pendiente en escritorio: monto, comercio, insignias,
   asunto y los datos del cargo. Apilarlos desperdiciaba todo el ancho de la
   card para cuatro renglones cortos. */
.noti-item {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background .12s;
}
.noti-item:last-child { border-bottom: 0; }
.noti-item:hover { background: var(--row-hover); }

.noti-monto {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;   /* montos alineados entre filas */
  flex-shrink: 0;
  min-width: 96px;
}
.noti-comercio {
  font-size: 0.92rem;
  font-weight: 600;
  flex: 0 1 auto;
  max-width: 28%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El asunto absorbe el ancho sobrante: es el campo largo y el primero que
   conviene recortar cuando falta espacio. */
.noti-asunto {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-small);
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.noti-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.noti-item > .badge-tipo { flex-shrink: 0; }

/* Terminación de la tarjeta, teñida con el color de su institución (el color
   inline lo pone el JS, junto con el texto legible sobre él). */
.noti-tarjeta {
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 1px 9px;
  font-variant-numeric: tabular-nums;
}
/* Terminación que no casó con ninguna tarjeta registrada: el dato sigue siendo
   útil, pero no hay institución de la cual sacar un color. */
.noti-tarjeta-nd { background: var(--tint-neutral); color: var(--on-tint-neutral); }

/* Recordatorios (corte, gastoFijo, rendimiento): fila más simple que la de
   compra — ícono + título/cuerpo, sin monto ni insignias. */
.noti-recordatorio-texto { flex: 1; min-width: 0; }
.noti-recordatorio-titulo {
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.noti-recordatorio-cuerpo {
  font-size: var(--fs-small);
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Móvil: dos renglones exactos. Arriba todo lo que identifica el cargo —monto,
   comercio, insignias, fecha/hora y la terminación—; abajo el asunto, que es lo
   único realmente largo. Cabe porque el año se oculta (estas detecciones nunca
   pasan de 30 días) y porque el comercio es el que cede espacio.
   El asunto baja con `order`, no reordenando el HTML: en escritorio tiene que
   ir en medio, absorbiendo el ancho sobrante. */
@media (max-width: 575.98px) {
  .noti-item {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    padding-right: 42px;   /* la columna que ocupa la × */
  }
  .noti-monto    { flex: 0 0 auto; min-width: 0; font-size: 1.05rem; }
  .noti-comercio { flex: 0 1 auto; max-width: 100%; }   /* el que cede al apretarse */
  /* La fecha se va al borde derecho: el renglón ocupa el ancho completo en vez
     de dejar un hueco muerto al final. La terminación se queda pegada al
     comercio, que es a lo que pertenece. */
  .noti-meta     { flex: 0 0 auto; margin-left: auto; }
  .noti-anio     { display: none; }
  .noti-asunto   { order: 9; flex: 1 0 100%; }
  /* Centrada contra los dos renglones, no pegada al primero */
  .noti-item > .btn-icon {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
  }
}

/* Contador de pendientes en el enlace del sidebar. */
.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-mini);
  font-weight: 700;
  line-height: 1.5;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 20px;
  text-align: center;
}

/* Colapsado no cabe el número, pero sí la señal: el badge se convierte en un
   punto sobre la campana. Sin esto se lo llevaba la regla que oculta todos los
   <span> del sidebar colapsado, y no quedaba ningún indicio de pendientes.
   Va dentro del mismo @media de escritorio que el resto del colapso: en el
   cajón móvil el sidebar nunca está colapsado y el badge se ve completo.
   El selector lleva `span.nav-badge` a propósito: necesita más especificidad
   que la regla que oculta los <span>, y el `:not([hidden])` conserva el
   ocultamiento cuando el contador está en cero. */
@media (min-width: 992px) {
  .sidebar.collapsed .sidebar-nav .nav-link { position: relative; }
  .sidebar.collapsed .sidebar-nav .nav-link span.nav-badge:not([hidden]) {
    display: block;
    position: absolute;
    top: 7px;
    right: 13px;
    width: 10px;
    height: 10px;
    min-width: 0;
    padding: 0;
    margin: 0;
    font-size: 0;          /* el número no cabe; queda solo el punto */
    line-height: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--sidebar-bg);   /* lo despega del ícono */
  }
}

/* Campana flotante en móvil. La sección no cabe en la bottom nav, así que sin
   esto habría que abrir el cajón para enterarse de que hay pendientes. Además
   de avisar, lleva a la sección de un toque. Solo existe si hay algo que
   atender: es una alerta, no un elemento de navegación permanente.
   Sin fondo propio — el color lo pone el contador, que es lo que debe saltar.
   Queda fija sobre el header, que es `sticky` y por lo tanto nunca se va: por
   eso el ícono puede ser blanco sin riesgo de perderse sobre el contenido. */
#noti-bubble { display: none; }
#noti-bubble:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  /* Centrada en el header móvil: (52 - 40) / 2. Los 40px son área táctil, no
     un recuadro visible. */
  top: calc((var(--header-h) - 40px) / 2);
  right: 8px;
  z-index: 600;            /* sobre el header sticky (500), bajo el cajón (999) */
  width: 40px;
  height: 40px;
  color: #fff;
  text-decoration: none;
}
/* Campaneo: quieta la mayor parte del ciclo y un repique corto al final. Una
   oscilación continua en algo que vive fijo en pantalla cansa a los diez
   segundos; así llama la atención sin volverse ruido. Pivota desde el asa, que
   es como se mueve una campana de verdad. */
@keyframes noti-campaneo {
  0%, 80%, 100% { transform: rotate(0deg); }
  83% { transform: rotate(14deg); }
  86% { transform: rotate(-12deg); }
  89% { transform: rotate(9deg); }
  92% { transform: rotate(-6deg); }
  95% { transform: rotate(3deg); }
}
#noti-bubble i {
  font-size: 1.35rem;
  transform-origin: 50% 10%;
  animation: noti-campaneo 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #noti-bubble i { animation: none; }
}
#noti-bubble .noti-bubble-count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-mini);
  font-weight: 700;
  line-height: 18px;
  box-shadow: 0 0 0 2px var(--sidebar-bg);   /* lo despega de la campana */
}

/* ==================== UTILITIES ==================== */
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.fw-mono { font-family: 'Courier New', monospace; }
.gap-2 { gap: 8px; }
.cursor-pointer { cursor: pointer; }
.border-start-primary { border-left: 3px solid var(--accent-strong) !important; }

/* ==================== DENSIDAD MÓVIL ==================== */
/* Objetivo: menos scroll sin perder legibilidad.
   Medido a 390px antes de este bloque: de 1483px de alto en Rendimientos, 752px
   eran padding + margen. El aire, no el texto, era lo que alargaba las vistas.
   Por eso aquí se hacen tres cosas distintas:
     1. SUBIR el suelo tipográfico — había texto a 8.6-10.4px, ilegible en mano.
     2. BAJAR el techo con clamp(), que era desproporcionado en pantalla chica.
     3. RECORTAR el aire, que es de donde sale la reducción de verdad.
   Las tarjetas del wallet (.wcard-*, .bct-*) quedan fuera: viven en un lienzo de
   280x176 fijo y subirles la fuente rompe su composición. */
@media (max-width: 575.98px) {

  /* ── 1. Suelo de legibilidad: nada por debajo de ~11px ── */
  :root {
    --fs-micro: 0.70rem;   /* 9.3px -> 11.2px */
    --fs-nano:  0.70rem;   /* 9.6px -> 11.2px */
    --fs-tiny:  0.70rem;   /* 9.9px -> 11.2px */
    --fs-mini:  0.70rem;   /* 10.4px -> 11.2px */
    --fs-small: 0.72rem;   /* 10.9px -> 11.5px */
  }
  .metric-sub,
  .inv-saldo-lbl,
  .inv-tasa-lbl,
  .inv-y-lbl,
  .inv-calc-lbl,
  .inv-upd-est-lbl,
  .card-number-label,
  .inv-inst,
  .best-badge      { font-size: 0.7rem; }
  /* En absoluto, no en em: encadenado al padre volvía a caer bajo 11px.
     La jerarquía la sigue dando la opacidad, no el tamaño. */
  .inv-y-lbl small { font-size: 0.7rem; }

  /* ── 2. Techo fluido entre 320 y 576px ── */
  .page-header-text h2 { font-size: clamp(1.05rem, 0.87rem + 0.90vw, 1.20rem); }
  .metric-value        { font-size: clamp(1.00rem, 0.85rem + 0.75vw, 1.15rem); }
  .inv-saldo-val       { font-size: clamp(1.35rem, 1.10rem + 1.25vw, 1.60rem); }
  .inv-calc-val        { font-size: clamp(1.15rem, 0.95rem + 1.00vw, 1.35rem); }
  .inv-upd-est-val     { font-size: clamp(1.10rem, 0.95rem + 0.75vw, 1.25rem); }

  /* ── 3. Recorte de aire: de aquí sale la reducción ── */
  .content-area          { padding: 12px 12px 16px; }
  .page-header           { margin-bottom: 14px; }
  .filter-bar            { margin-bottom: 12px; }

  .metric-card           { padding: 10px 12px; gap: 10px; }
  .metric-icon           { width: 34px; height: 34px; font-size: 1rem; }
  /* A media anchura el subtexto no cabe en una línea. Preferimos que ocupe dos
     a recortarlo con elipsis: es la explicación del importe, no un adorno.
     El importe sí sigue en una línea — un número partido no se lee. */
  .metric-sub            { white-space: normal; overflow: visible; text-overflow: clip; }

  .data-card             { margin-bottom: 14px; }
  .data-card-header      { padding: 10px 14px; }
  .data-card-body        { padding: 14px; }

  .table tbody td        { padding: 5px 8px; }
  .table thead th        { padding: 5px 8px; }
  .table tfoot td        { padding: 8px 10px; }

  .inv-saldo             { padding: 10px 12px; }
  .inv-saldo-rend        { margin-top: 4px; }
  .inv-tasa              { margin-top: 6px; padding-top: 6px; }
  .inv-y                 { padding: 7px 5px; }
  .inv-y-lbl             { min-height: 2.2em; }
  .inv-detalle-btn       { padding: 7px 12px; }

  .empty-state           { padding: 28px 16px; }
  .empty-state i         { font-size: 2rem; margin-bottom: 8px; }
}

/* ==================== FLOATING ACTION BUTTON ==================== */
#quick-add-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
@media (max-width: 991px) {
  #quick-add-fab { bottom: calc(var(--bottom-nav-h) + 12px); }
}
#fab-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
#fab-btn:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
#fab-btn.open { transform: rotate(45deg); }
#fab-menu { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
#fab-menu[hidden] { display: none !important; }
.fab-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 7px 16px 7px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: var(--text);
  transition: box-shadow 0.15s, transform 0.15s;
}
.fab-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.2); transform: translateX(-2px); }

input[type="time"] { cursor: pointer; }
input[type="time"]::-webkit-calendar-picker-indicator { display: none; }