/* ========================================
   SECCIONES — design system del dashboard v2 aplicado al resto de la app

   Dos capas:
     .mv2-page  → lo macro: fondo, padding, tipografía del header, tarjetas,
                  botones y tablas. Va en Transacciones, Archivos, Conexiones
                  y Configuración, para que todas respiren igual.
     .mv2-tx    → lo propio de Transacciones (filtros, chips, categorías).

   El scope no es opcional: nombres como .data-table, .btn-primary o
   .section-header los usa media app, incluidas pantallas que siguen con el
   estilo viejo. Sin acotar, este archivo se les metería encima.

   Los tokens se redeclaran acá en vez de importarse de dashboard-v2.css porque
   aquel los define bajo .mv2, un scope al que estas secciones no pertenecen.
   ======================================== */

.mv2-page {
  --mv2-ink: #0A2540;
  --mv2-ink-soft: #425466;
  --mv2-ink-mute: #8792A2;
  --mv2-violet: #5B4FE9;
  --mv2-violet-deep: #453BC7;
  --mv2-violet-tint: #EFEDFD;
  --mv2-bg: #F6F7FB;
  --mv2-surface: #FFFFFF;
  --mv2-border: #E7E9F1;
  --mv2-green: #0FA968;
  --mv2-green-tint: #E7F8F0;
  --mv2-red: #E5484D;
  --mv2-red-tint: #FCEBEC;
  --mv2-amber: #D98A1B;
  --mv2-amber-tint: #FCF3E3;
  --mv2-radius-sm: 8px;
  --mv2-radius-md: 14px;
  --mv2-radius-lg: 20px;
  --mv2-shadow-card: 0 1px 2px rgba(10, 37, 64, .04), 0 8px 24px rgba(10, 37, 64, .05);
  --mv2-shadow-pop: 0 12px 32px rgba(10, 37, 64, .10);

  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--mv2-bg);
  color: var(--mv2-ink);
  -webkit-font-smoothing: antialiased;

  /* Mismo truco que el canvas del dashboard v2: .main-content ya mete
     1rem 1.5rem de padding, así que lo cancelamos con margen negativo para que
     el fondo llegue al borde, y volvemos a aplicar el espaciado propio.
     El width tiene que crecer lo mismo que sacan los márgenes (2 * 1.5rem):
     sin eso, el width:100% heredado de .content-section deja el bloque del
     ancho viejo y sólo lo corre a la izquierda. */
  margin: -1rem -1.5rem;
  padding: 32px 40px 64px;
  min-height: calc(100vh - 2rem);
}

/* El ancho va en un selector con id porque .content-section aplica al mismo
   elemento width:100% Y max-width:100%; sin levantar el max-width, el calc()
   se recorta de vuelta y quedan 48px muertos contra el borde derecho. */
#section-dashboards.mv2-page,
#section-transacciones.mv2-page,
#section-archivos.mv2-page,
#section-conexiones.mv2-page,
#section-ajustes.mv2-page {
  width: calc(100% + 3rem);
  max-width: none;
}

.mv2-page *,
.mv2-page *::before,
.mv2-page *::after { box-sizing: border-box; }

/* ---------- ENCABEZADO ---------- */
.mv2-page .section-header { margin-bottom: 20px; }
.mv2-page .section-header h1 {
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--mv2-ink);
}
.mv2-page .section-header p {
  font-size: 14px; color: var(--mv2-ink-soft); margin-top: 4px;
}

/* ---------- SUPERFICIES ---------- */
/* Los paneles de cada sección pasan todos a la misma tarjeta. */
.mv2-page .files-table-section,
.mv2-page .connection-card,
.mv2-page .settings-section,
.mv2-page .dashboard-filters,
.mv2-page .dashboard-grouped-data,
.mv2-page .summary-card {
  background: var(--mv2-surface);
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-lg);
  box-shadow: var(--mv2-shadow-card);
}

.mv2-page .settings-section { padding: 22px; margin-bottom: 16px; }
.mv2-page .dashboard-filters { padding: 20px 22px; margin-bottom: 16px; }
.mv2-page .dashboard-grouped-data { padding: 22px; }
.mv2-page .summary-card { padding: 18px; }

/* En Configuración cada bloque es .settings-section > .*-card. Las dos capas
   tenían fondo, borde y sombra propios, y se veía como una caja adentro de
   otra. La tarjeta la pone el contenedor; la interna queda plana y sólo
   aporta el espaciado. */
.mv2-page .categories-card,
.mv2-page .api-tokens-card,
.mv2-page .email-upload-card,
.mv2-page .currency-preference-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
  overflow: visible;
}

/* La barra de "N categorías + Nueva categoría" era una franja gris con borde
   dentro de la caja interna. Sin esa caja, la franja no tiene dónde apoyarse:
   pasa a ser una fila normal sobre el fondo blanco de la sección. */
.mv2-page .categories-header,
.mv2-page .api-tokens-header {
  background: transparent;
  border-bottom: none;
  padding: 0;
  margin: 16px 0 12px;
  align-items: center;
}
.mv2-page .categories-count { font-size: 13px; color: var(--mv2-ink-mute); font-weight: 500; }

.mv2-page .connection-card { padding: 20px; }
.mv2-page .connection-card:hover { box-shadow: var(--mv2-shadow-pop); }

/* La zona de drag&drop mantiene el punteado, con los tokens nuevos. */
.mv2-page .upload-area {
  background: var(--mv2-surface);
  border: 2px dashed var(--mv2-border);
  border-radius: var(--mv2-radius-lg);
  padding: 40px 24px;
  transition: border-color .15s ease, background .15s ease;
}
.mv2-page .upload-area:hover,
.mv2-page .upload-area.dragover {
  border-color: var(--mv2-violet);
  background: var(--mv2-violet-tint);
}

/* Títulos de bloque dentro de cada sección. */
.mv2-page .settings-section-title,
.mv2-page .connections-subsection-title {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--mv2-ink);
}
.mv2-page .settings-section-description {
  font-size: 12.5px; color: var(--mv2-ink-mute); margin-top: 2px;
}

/* ---------- CONFIGURACIÓN ---------- */
/* El título de bloque lleva ícono: lo alineamos y le bajamos el peso visual
   del SVG, que venía en el azul viejo. */
.mv2-page .settings-section-title {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 2px;
}
.mv2-page .settings-section-title svg {
  width: 18px; height: 18px;
  color: var(--mv2-ink-mute);
  flex-shrink: 0;
}
.mv2-page .settings-section-description { margin-bottom: 4px; line-height: 1.5; }

/* Tabla de categorías: mismo lenguaje que .data-table, pero es una tabla
   aparte con sus propias clases. */
.mv2-page .categories-table { font-size: 13.5px; }
.mv2-page .categories-table thead { background: var(--mv2-bg); }
.mv2-page .categories-table th {
  padding: 11px 14px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--mv2-ink-mute);
  border-bottom: 1px solid var(--mv2-border);
}
.mv2-page .categories-table td {
  padding: 11px 14px;
  color: var(--mv2-ink);
  border-bottom: 1px solid var(--mv2-border);
}
.mv2-page .categories-table tbody tr:hover { background: var(--mv2-bg); }
.mv2-page .categories-table tbody tr:last-child td { border-bottom: none; }
.mv2-page .category-name-cell { font-weight: 600; }
.mv2-page .category-description-cell { color: var(--mv2-ink-soft); }
.mv2-page .category-color-dot {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block; border: none;
}

/* La tabla vuelve a necesitar un marco propio: quedó suelta al aplanar la
   card que la contenía. Un borde simple alcanza, sin sombra (ya la pone la
   sección). */
.mv2-page .categories-list,
.mv2-page .api-tokens-list:not(:empty) {
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-md);
  overflow: hidden;
}

/* Botones de acción de cada fila. */
.mv2-page .action-btn {
  border: none; background: transparent;
  color: var(--mv2-ink-mute);
  border-radius: var(--mv2-radius-sm);
  padding: 6px;
  transition: background .15s ease, color .15s ease;
}
.mv2-page .action-btn:hover { background: var(--mv2-bg); color: var(--mv2-ink); }
.mv2-page .action-btn.delete-btn:hover { background: var(--mv2-red-tint); color: var(--mv2-red); }

/* Bloque de carga por email. */
.mv2-page .email-upload-address label {
  font-size: 12.5px; font-weight: 600; color: var(--mv2-ink-soft);
  display: block; margin-bottom: 6px;
}
.mv2-page .email-address-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--mv2-bg);
  color: var(--mv2-ink);
}
.mv2-page .btn-copy {
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-md);
  background: var(--mv2-surface);
  color: var(--mv2-ink-soft);
  padding: 9px;
  transition: background .15s ease, color .15s ease;
}
.mv2-page .btn-copy:hover { background: var(--mv2-bg); color: var(--mv2-violet); }

.mv2-page .email-upload-instructions h4,
.mv2-page .api-tokens-docs h4 {
  font-size: 13px; font-weight: 700; color: var(--mv2-ink);
  margin-bottom: 8px;
}
.mv2-page .email-upload-instructions ol { color: var(--mv2-ink-soft); font-size: 13.5px; line-height: 1.7; }
.mv2-page .email-supported-formats { font-size: 12.5px; color: var(--mv2-ink-mute); }

/* Bloques de código: fondo tinta, como el snippet del dashboard. */
.mv2-page .api-tokens-docs pre {
  background: var(--mv2-ink);
  color: #E8ECF3;
  border-radius: var(--mv2-radius-md);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
}
.mv2-page .api-tokens-docs code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- BOTONES ---------- */
.mv2-page .btn-primary,
.mv2-page .select-file-btn,
.mv2-page .btn-connection {
  font-family: inherit;
  font-size: 13.5px; font-weight: 600;
  border-radius: var(--mv2-radius-sm);
  padding: 10px 18px;
  border: 1px solid transparent;
  background: var(--mv2-violet);
  color: #fff;
  box-shadow: 0 1px 2px rgba(91, 79, 233, .15), 0 4px 10px rgba(91, 79, 233, .22);
  transition: background .15s ease;
}
.mv2-page .btn-primary:hover,
.mv2-page .select-file-btn:hover,
.mv2-page .btn-connection:hover { background: var(--mv2-violet-deep); }

.mv2-page .btn-secondary {
  font-family: inherit;
  font-size: 13.5px; font-weight: 600;
  border-radius: var(--mv2-radius-sm);
  padding: 10px 18px;
  background: var(--mv2-surface);
  color: var(--mv2-ink-soft);
  border: 1px solid var(--mv2-border);
  box-shadow: none;
  transition: background .15s ease, color .15s ease;
}
.mv2-page .btn-secondary:hover { background: var(--mv2-bg); color: var(--mv2-ink); }

/* ---------- TABLAS (Archivos y Transacciones comparten .data-table) ---------- */
.mv2-page .data-table thead { background: var(--mv2-bg); }
.mv2-page .data-table th {
  padding: 13px 16px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--mv2-ink-mute);
  border-bottom: 1px solid var(--mv2-border);
}
.mv2-page .data-table th:hover { background: rgba(10, 37, 64, .03); }
.mv2-page .data-table td {
  padding: 13px 16px;
  color: var(--mv2-ink);
  border-bottom: 1px solid var(--mv2-border);
}
.mv2-page .data-table tbody tr:last-child td { border-bottom: none; }
.mv2-page .data-table tbody tr:hover { background: var(--mv2-bg); }
.mv2-page .data-table .sort-icon { color: var(--mv2-ink-mute); }

/* ---------- ESTADOS VACÍOS / CARGA ---------- */
.mv2-page .files-empty,
.mv2-page .files-loading,
.mv2-page .categories-empty,
.mv2-page .api-tokens-empty,
.mv2-page .categories-loading,
.mv2-page .api-tokens-loading {
  color: var(--mv2-ink-mute);
  font-size: 13.5px;
}
.mv2-page .files-empty svg { color: var(--mv2-border); }

@media (max-width: 640px) {
  .mv2-page { padding: 20px 16px 48px; }
  .mv2-page .section-header h1 { font-size: 22px; }
  .mv2-page .settings-section,
  .mv2-page .categories-card,
  .mv2-page .api-tokens-card { padding: 16px; border-radius: var(--mv2-radius-md); }
}

/* ========================================
   DASHBOARD (/app) — lo específico de la sección

   Sacamos .manni-page del EJS: su ::before pintaba un gradiente radial
   violeta/azul de 520px sobre el tope de la página — el "fondo raro". El
   canvas plano de .mv2-page lo reemplaza. Las piezas manni-* que quedan
   (hero y gráfico) se reskinean acá para que convivan con los tokens nuevos.
   ======================================== */

/* El hero es la superficie principal: misma tarjeta que el resto, pero sin la
   sombra gigante de --manni-shadow-card (30px de blur, se comía la sección). */
.mv2-dash .manni-hero {
  background: var(--mv2-surface);
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-lg);
  box-shadow: var(--mv2-shadow-card);
  padding: 22px;
  margin-bottom: 16px;
}
.mv2-dash .manni-hero__title { font-size: 13px; font-weight: 700; color: var(--mv2-ink); }
.mv2-dash .manni-hero__label { font-size: 12.5px; color: var(--mv2-ink-mute); }
.mv2-dash .manni-hero__value {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--mv2-ink);
}
.mv2-dash .manni-hero__legend-item { font-size: 12px; color: var(--mv2-ink-soft); }

/* Tarjetas de resumen: mismo lenguaje que las stat cards del dashboard v2. */
.mv2-dash .summary-label {
  font-size: 12.5px; color: var(--mv2-ink-soft); font-weight: 500;
}
/* Sin `color` a propósito: style.css pinta el valor según la tarjeta
   (.summary-card.income en verde, .expense en rojo) y eso tiene que seguir
   ganando. Acá sólo tocamos el tamaño y el peso. */
.mv2-dash .summary-value {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
}
/* El de balance/count no tiene color propio, así que lo alineamos al tinta. */
.mv2-dash .summary-card.balance .summary-value,
.mv2-dash .summary-card.count .summary-value { color: var(--mv2-ink); }
.mv2-dash .summary-icon { border-radius: var(--mv2-radius-md); }

/* Los filtros comparten clases con Transacciones (.filter-group, .filter-select,
   .date-picker-trigger), así que repetimos la misma forma acá. */
.mv2-dash .filter-group label {
  font-size: 12.5px; font-weight: 600; color: var(--mv2-ink-soft);
  letter-spacing: -0.01em;
}
.mv2-dash .filter-select,
.mv2-dash .date-picker-trigger {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--mv2-ink);
  background: var(--mv2-surface);
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-md);
  padding: 10px 13px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mv2-dash .filter-select:focus,
.mv2-dash .date-picker-trigger:focus-visible {
  outline: none;
  border-color: var(--mv2-violet);
  box-shadow: 0 0 0 3px var(--mv2-violet-tint);
}
.mv2-dash .date-picker-trigger:hover { background: var(--mv2-bg); }
.mv2-dash .date-picker-trigger svg { color: var(--mv2-ink-mute); }
.mv2-dash .date-picker-trigger span { color: var(--mv2-ink-mute); }

/* Título de la tabla agrupada. */
.mv2-dash .grouped-data-header h3 {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--mv2-ink);
}

/* La tabla agrupada usa clases propias, no .data-table. */
.mv2-dash .grouped-data-table { font-size: 13.5px; }
.mv2-dash .grouped-data-table thead { background: var(--mv2-bg); }
.mv2-dash .grouped-data-table th {
  padding: 11px 14px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--mv2-ink-mute);
  border-bottom: 1px solid var(--mv2-border);
}
.mv2-dash .grouped-data-table td {
  padding: 11px 14px;
  color: var(--mv2-ink);
  border-bottom: 1px solid var(--mv2-border);
}
.mv2-dash .grouped-data-table tbody tr:hover { background: var(--mv2-bg); }
.mv2-dash .grouped-data-table tbody tr:last-child td { border-bottom: none; }
.mv2-dash .grouped-data-table-wrapper {
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-md);
  overflow: auto;
}

.mv2-dash .chart-loading,
.mv2-dash .chart-empty { color: var(--mv2-ink-mute); font-size: 13.5px; }

/* ========================================
   TRANSACCIONES — lo específico de la sección
   ======================================== */

/* ---------- PANEL DE FILTROS ---------- */
.mv2-tx .filters-container {
  background: var(--mv2-surface);
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-lg);
  box-shadow: var(--mv2-shadow-card);
  padding: 20px 22px;
  margin-bottom: 18px;
  gap: 14px;
}

.mv2-tx .filter-group label,
.mv2-tx .filter-amount-input-group label {
  font-size: 12.5px; font-weight: 600; color: var(--mv2-ink-soft);
  letter-spacing: -0.01em;
}

/* Inputs, el trigger del datepicker y los botones de filtro comparten forma:
   si no, el panel se ve como tres controles de librerías distintas. */
.mv2-tx .filter-input,
.mv2-tx .date-picker-trigger,
.mv2-tx .filter-dropdown-btn,
.mv2-tx .filter-amount-input-group input {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--mv2-ink);
  background: var(--mv2-surface);
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-md);
  padding: 10px 13px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.mv2-tx .filter-input::placeholder,
.mv2-tx .filter-amount-input-group input::placeholder { color: var(--mv2-ink-mute); }

.mv2-tx .filter-input:focus,
.mv2-tx .filter-amount-input-group input:focus,
.mv2-tx .date-picker-trigger:focus-visible {
  outline: none;
  border-color: var(--mv2-violet);
  box-shadow: 0 0 0 3px var(--mv2-violet-tint);
}

.mv2-tx .date-picker-trigger:hover,
.mv2-tx .filter-dropdown-btn:hover { background: var(--mv2-bg); }
.mv2-tx .date-picker-trigger svg,
.mv2-tx .filter-dropdown-btn svg { color: var(--mv2-ink-mute); }
.mv2-tx .date-picker-trigger span { color: var(--mv2-ink-mute); }

/* Los botones de filtro van en píldora, como los chips del dashboard. */
.mv2-tx .filter-dropdown-btn {
  border-radius: 100px;
  font-weight: 500;
  gap: 7px;
  white-space: nowrap;
}
.mv2-tx .filter-dropdown-btn.active {
  background: var(--mv2-violet-tint);
  border-color: var(--mv2-violet);
  color: var(--mv2-violet-deep);
}
.mv2-tx .filter-dropdown-btn.active svg { color: var(--mv2-violet); }

.mv2-tx .filter-dropdown-menu {
  background: var(--mv2-surface);
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-md);
  box-shadow: var(--mv2-shadow-pop);
  padding: 6px;
  margin-top: 6px;
}
.mv2-tx .filter-dropdown-option {
  font-size: 13.5px;
  border-radius: var(--mv2-radius-sm);
  padding: 8px 10px;
  color: var(--mv2-ink);
}
.mv2-tx .filter-dropdown-option:hover { background: var(--mv2-bg); }
.mv2-tx .filter-dropdown-option input { accent-color: var(--mv2-violet); }
.mv2-tx .filter-dropdown-search input {
  font-family: inherit;
  font-size: 13.5px;
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-sm);
  padding: 8px 10px;
}
.mv2-tx .filter-dropdown-search input:focus {
  outline: none; border-color: var(--mv2-violet);
  box-shadow: 0 0 0 3px var(--mv2-violet-tint);
}
.mv2-tx .filter-dropdown-divider { background: var(--mv2-border); }

.mv2-tx .checkbox-label {
  font-size: 13.5px; color: var(--mv2-ink-soft); gap: 8px;
}
.mv2-tx .checkbox-label input { accent-color: var(--mv2-violet); }

/* ---------- ACCIONES DEL PANEL ---------- */
.mv2-tx .filter-actions { gap: 10px; }
.mv2-tx .filter-actions .btn-primary,
.mv2-tx .filter-actions .btn-secondary {
  font-family: inherit;
  font-size: 13.5px; font-weight: 600;
  border-radius: var(--mv2-radius-sm);
  padding: 10px 18px;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.mv2-tx .filter-actions .btn-primary {
  background: var(--mv2-violet); color: #fff;
  box-shadow: 0 1px 2px rgba(91, 79, 233, .15), 0 4px 10px rgba(91, 79, 233, .22);
}
.mv2-tx .filter-actions .btn-primary:hover { background: var(--mv2-violet-deep); }
.mv2-tx .filter-actions .btn-secondary {
  background: var(--mv2-surface); color: var(--mv2-ink-soft);
  border-color: var(--mv2-border); box-shadow: none;
}
.mv2-tx .filter-actions .btn-secondary:hover { background: var(--mv2-bg); color: var(--mv2-ink); }

/* Pills de filtros activos */
.mv2-tx .active-filters-label { font-size: 12.5px; color: var(--mv2-ink-mute); font-weight: 600; }
.mv2-tx .filter-pill {
  background: var(--mv2-violet-tint);
  color: var(--mv2-violet-deep);
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 12px; font-weight: 600;
  padding: 5px 11px;
}
.mv2-tx .filter-pill:hover {
  background: var(--mv2-violet-tint);
  border-color: var(--mv2-violet);
}
.mv2-tx .filter-pill-remove { color: var(--mv2-violet-deep); opacity: .65; }
.mv2-tx .filter-pill-remove:hover { color: var(--mv2-violet-deep); opacity: 1; }

/* ---------- BARRA DE ACCIONES ---------- */
.mv2-tx .transactions-actions-bar { padding: 0 0 14px !important; margin-bottom: 0 !important; }
.mv2-tx .column-selector .filter-dropdown-btn { border-radius: var(--mv2-radius-sm); }
.mv2-tx #export-transactions-btn {
  font-family: inherit;
  font-size: 13.5px; font-weight: 600;
  border-radius: var(--mv2-radius-sm) !important;
  border: 1px solid var(--mv2-border);
  background: var(--mv2-surface);
  color: var(--mv2-ink);
  padding: 9px 15px !important;
}
.mv2-tx #export-transactions-btn:hover { background: var(--mv2-bg); }

/* ---------- TABLA ---------- */
/* La tabla vive en una tarjeta: bordes redondeados afuera, sin líneas sueltas. */
.mv2-tx .transactions-container {
  background: var(--mv2-surface);
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-lg);
  box-shadow: var(--mv2-shadow-card);
  overflow: hidden;
}

/* Hay que igualar la especificidad de `.transactions-table table.data-table`
   (0,2,1) de style.css, si no el font-size viejo sigue ganando. */
.mv2-tx .transactions-table table.data-table { font-size: 13.5px; }
/* Las reglas de .data-table viven en la capa .mv2-page. */

/* Montos: el signo ya distingue, el color lo refuerza. */
.mv2-tx .amount-positive { color: var(--mv2-green); font-weight: 600; }
.mv2-tx .amount-negative { color: var(--mv2-red); font-weight: 600; }

/* La categoría es un dropdown editable. Le sacamos el marco para que se lea
   como el "• Nombre" del dashboard, pero sigue siendo un botón: el borde
   reaparece en hover para que no se pierda la pista de que es clickeable. */
.mv2-tx .category-btn {
  border-color: transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--mv2-ink);
  padding: 5px 8px;
  border-radius: var(--mv2-radius-sm);
  gap: 7px;
}
.mv2-tx .category-btn:hover {
  background: var(--mv2-surface);
  border-color: var(--mv2-border);
}
.mv2-tx .category-btn .dropdown-arrow { color: var(--mv2-ink-mute); }
.mv2-tx .category-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.mv2-tx .category-options {
  background: var(--mv2-surface);
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-md);
  box-shadow: var(--mv2-shadow-pop);
  padding: 6px;
}
.mv2-tx .category-option {
  font-size: 13px;
  border-radius: var(--mv2-radius-sm);
  padding: 8px 10px;
  gap: 8px;
}
.mv2-tx .category-option:hover { background: var(--mv2-bg); }
.mv2-tx .category-option.selected { background: var(--mv2-violet-tint); color: var(--mv2-violet-deep); }

/* Chips de tipo y de pago vinculado. */
.mv2-tx .tx-type-chip,
.mv2-tx .tx-payment-badge {
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
}
.mv2-tx .tx-payment-linked { background: var(--mv2-violet-tint); color: var(--mv2-violet-deep); }
.mv2-tx .tx-payment-none,
.mv2-tx .tx-empty-cell { color: var(--mv2-ink-mute); background: transparent; }

.mv2-tx .split-badge {
  background: var(--mv2-violet-tint); color: var(--mv2-violet-deep);
  border-radius: 100px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; margin-left: 8px;
}

.mv2-tx .transactions-empty,
.mv2-tx .table-empty { color: var(--mv2-ink-mute); padding: 44px 20px; }
.mv2-tx .transactions-empty svg,
.mv2-tx .table-empty svg { color: var(--mv2-border); }
.mv2-tx .transactions-empty p,
.mv2-tx .table-empty p,
.mv2-tx .transactions-cards-container .table-empty p {
  font-size: 15px; font-weight: 600; color: var(--mv2-ink); margin-top: 12px;
}
.mv2-tx .transactions-cards-container .table-empty svg { color: var(--mv2-border); }
.mv2-tx .transactions-cards-container .table-empty span { color: var(--mv2-ink-mute); }

/* ---------- PAGINACIÓN ---------- */
.mv2-tx .pagination-controls {
  border-top: 1px solid var(--mv2-border);
  padding: 13px 16px;
  font-size: 13px; color: var(--mv2-ink-soft);
}
.mv2-tx .pagination-btn {
  font-family: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-sm);
  background: var(--mv2-surface);
  color: var(--mv2-ink);
  padding: 7px 12px;
}
/* style.css usa .pagination-btn:hover:not(:disabled) — (0,4,0). Repetimos la
   misma forma para poder pisarle el azul viejo del hover. */
.mv2-tx .pagination-btn:hover:not(:disabled) {
  background: var(--mv2-bg);
  border-color: var(--mv2-border);
  color: var(--mv2-ink);
}
.mv2-tx .pagination-btn.active {
  background: var(--mv2-violet); border-color: var(--mv2-violet); color: #fff;
}

/* ---------- MOBILE ---------- */
.mv2-tx .mobile-search-input,
.mv2-tx .filter-toggle-btn {
  font-family: inherit;
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-md);
  background: var(--mv2-surface);
  color: var(--mv2-ink);
}
.mv2-tx .mobile-search-input:focus {
  outline: none; border-color: var(--mv2-violet);
  box-shadow: 0 0 0 3px var(--mv2-violet-tint);
}
.mv2-tx .transaction-card {
  background: var(--mv2-surface);
  border: 1px solid var(--mv2-border);
  border-radius: var(--mv2-radius-md);
  box-shadow: var(--mv2-shadow-card);
}
.mv2-tx .transaction-card-description { font-size: 13.5px; font-weight: 600; color: var(--mv2-ink); }
.mv2-tx .transaction-card-meta { font-size: 12px; color: var(--mv2-ink-mute); }
.mv2-tx .transaction-card-amount { font-size: 14px; font-weight: 700; }
.mv2-tx .transaction-card-category { font-size: 11.5px; color: var(--mv2-ink-mute); }

@media (max-width: 640px) {
  .mv2-tx .filters-container { padding: 16px; border-radius: var(--mv2-radius-md); }
  /* En mobile la tarjeta de la tabla estorba: las cards ya tienen la suya. */
  .mv2-tx .transactions-container {
    background: transparent; border: none; box-shadow: none; overflow: visible;
  }
}