:root {
  --bg: #f4f5fb;
  --surface: #ffffff;
  --surface-2: #f7f7fc;
  --border: #e7e7f1;
  --text: #1c2230;
  --text-muted: #78808f;
  --primary: #4677d5;
  --primary-rgb: 70, 119, 213;
  --primary-2: #7293df;
  --primary-2-rgb: 114, 147, 223;
  --primary-dark: #2f5aad;
  --sidebar-bg: #14182b;
  --sidebar-text: #b8bfd6;
  --sidebar-text-active: #ffffff;
  --green: #16a34a;
  --green-bg: #e7f8ee;
  --red: #e0374a;
  --red-bg: #fde9eb;
  --amber: #b8860a;
  --amber-bg: #fff6e0;
  --blue: #2a63c7;
  --blue-bg: #e7f0fd;
  /* acentos para agrupar los accesos rapidos del Dashboard por "area" (Este
     mes / Hogar / Individual) — mismo espiritu que el primary pero para dar
     variedad visual sin salirse de una paleta prolija */
  --accent-hogar: #0d9488;
  --accent-hogar-2: #2dd4bf;
  --accent-hogar-rgb: 13, 148, 136;
  --accent-individual: #7c3aed;
  --accent-individual-2: #a78bfa;
  --accent-individual-rgb: 124, 58, 237;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(31, 20, 90, 0.05), 0 1px 10px rgba(31, 20, 90, 0.055);
  --shadow-hover: 0 6px 20px rgba(45, 30, 120, 0.12);
}

* { box-sizing: border-box; }

body {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }

/* ---------- layout: sidebar + content ---------- */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 15% 0%, rgba(var(--primary-2-rgb), .18), transparent 45%),
    linear-gradient(165deg, var(--sidebar-bg) 0%, #16233f 100%);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 1.25rem 1.3rem 1rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.sidebar .brand .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb),.18);
}

.month-widget {
  margin: .3rem 1rem 1rem;
  padding: .7rem .8rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
}
.month-widget .month-label {
  text-align: center;
  font-weight: 600;
  color: #fff;
  font-size: .92rem;
  text-transform: capitalize;
}
.month-widget .month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .45rem;
}
.month-widget .month-nav a {
  color: var(--sidebar-text);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.month-widget .month-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.month-widget .month-nav .today {
  font-size: .72rem;
  color: var(--sidebar-text);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  padding: .15rem .55rem;
  transition: border-color .15s, color .15s;
}
.month-widget .month-nav .today:hover { color: #fff; border-color: rgba(255,255,255,.4); }

.sidebar nav { flex: 1; padding: .4rem .7rem 1rem; }
.sidebar nav .nav-section {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #5b6280;
  margin: 1rem .6rem .35rem;
}
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .65rem;
  border-radius: 8px;
  color: var(--sidebar-text);
  font-size: .89rem;
  margin-bottom: .1rem;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.sidebar nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar nav a.active {
  background: linear-gradient(90deg, rgba(var(--primary-rgb),.28), rgba(var(--primary-2-rgb),.16));
  color: var(--sidebar-text-active);
  font-weight: 600;
  box-shadow: inset 1px 0 0 0 rgba(var(--primary-2-rgb),.4);
}
.sidebar nav a .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.sidebar nav a.active .ico { opacity: 1; }

.main-wrap { margin-left: 240px; flex: 1; min-width: 0; }
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.8rem 2rem 4rem;
}

.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 768px) {
  .mobile-topbar {
    display: block;
    background: linear-gradient(100deg, var(--sidebar-bg) 0%, #16233f 100%);
    color: #fff;
    padding: .6rem .9rem .55rem;
    position: sticky;
    top: 0;
    z-index: 200;
  }
  .mobile-topbar-row { display: flex; align-items: center; gap: .6rem; }
  .mobile-menu-btn { background: none; border: none; color: #fff; padding: .3rem; display: flex; cursor: pointer; flex-shrink: 0; margin-left: -.3rem; }
  .mobile-topbar-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; white-space: nowrap; flex: 1; }
  .mobile-topbar-brand .dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-2)); display: inline-block; flex-shrink: 0; }
  .mobile-topbar-today {
    font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
    padding: .25rem .6rem; flex-shrink: 0;
  }
  .mobile-topbar-today:hover { color: #fff; border-color: rgba(255,255,255,.5); }

  .mobile-month-switcher {
    display: flex; align-items: center; justify-content: center;
    gap: .3rem; margin-top: .5rem;
  }
  .mobile-month-switcher a {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: rgba(255,255,255,.07); color: #fff; flex-shrink: 0;
  }
  .mobile-month-switcher a:active { background: rgba(255,255,255,.16); }
  .mobile-month-label {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 700; font-size: .92rem; letter-spacing: -.005em;
    min-width: 148px; text-align: center;
  }

  .sidebar {
    width: 240px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 300;
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 25, .45);
    z-index: 250;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

  .main-wrap { margin-left: 0; }
  .app-shell { flex-direction: column; }
  main { padding: 1.1rem 1rem 3rem; }

  h1 { text-align: center; font-size: 1.42rem; }
  h1::after { left: 50%; transform: translateX(-50%); }
  main > h1 + p.muted { text-align: center; }
  .page-title-text h1 { text-align: left; }

  .reintegro-card-meta,
  .reintegro-card-bottom { margin-left: 0; }
  .reintegro-card-bottom { flex-wrap: nowrap; }
  .reintegro-card-bottom .pill-select { flex: 1 1 0; min-width: 0; text-align: center; }
  .reintegro-card-bottom .btn-eliminar-reintegro { flex-shrink: 0; }

  /* celdas de tabla con contenido compuesto (barra + texto): apilar en vez de comprimir */
  .table-wrap td.td-stack {
    display: block;
    text-align: left;
  }
  .table-wrap td.td-stack::before {
    display: block;
    margin-bottom: .4rem;
  }
}

/* ---------- typography ---------- */

h1 {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.65rem;
  margin: 0 0 .55rem;
  letter-spacing: -.02em;
  color: var(--text);
  position: relative;
  padding-bottom: .55rem;
}
h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
}
h2 {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.08rem;
  margin-top: 2.2rem;
  margin-bottom: .7rem;
  letter-spacing: -.01em;
  color: var(--text);
  padding-left: .65rem;
  border-left: 4px solid var(--primary);
}
h2:first-of-type { margin-top: 1.4rem; }
h2 .section-icon, .resumen-grupo-titulo .section-icon { margin-right: .4rem; }

/* ---------- titulo de pagina (icono + nombre + periodo) ---------- */

.page-title {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 .6rem;
}
.page-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), .28);
}
.page-title-icon .ico { width: 22px; height: 22px; color: #fff; }
.page-title-text { display: flex; flex-direction: column; gap: .3rem; }
.page-title h1 { margin: 0; padding-bottom: 0; }
.page-title h1::after { content: none; }
.page-title-periodo {
  display: inline-flex;
  align-self: flex-start;
  font-size: .72rem;
  font-weight: 700;
  color: var(--primary-dark);
  background: rgba(var(--primary-rgb), .1);
  padding: .15rem .6rem;
  border-radius: 999px;
  letter-spacing: .01em;
}
@media (max-width: 640px) {
  .page-title-icon { width: 36px; height: 36px; border-radius: 11px; }
  .page-title-icon .ico { width: 19px; height: 19px; }
  .page-title h1 { font-size: 1.35rem; }
}

/* ============================================================
   Sistema visual "e-banking" (2026-09-16/17) — probado primero solo en
   el Dashboard bajo .dashboard-modern, aprobado por el usuario y ahora
   graduado a estilo BASE de toda la app: .card/.cards/.feature-grid/
   .feature-tile/.stat-chip ya no necesitan ningun prefijo, se ven asi
   en cualquier vista que los use.
   ============================================================ */

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: stretch;
  gap: 1rem;
  margin: 1.3rem 0 .5rem;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 20px;
  padding: 1.05rem 1.1rem;
  box-shadow: 0 2px 10px rgba(31,20,90,.05), 0 10px 24px -12px rgba(31,20,90,.08);
  border: none;
  transition: box-shadow .18s ease, transform .18s ease;
  animation: fadeUp .35s ease both;
}
.card:hover { box-shadow: 0 4px 14px rgba(31,20,90,.06), 0 16px 32px -12px rgba(31,20,90,.16); transform: translateY(-1px); }
.card.tint-good, .stat-chip.tint-good { background: var(--green-bg); }
.card.tint-warn, .stat-chip.tint-warn { background: var(--amber-bg); }
.card.tint-bad, .stat-chip.tint-bad { background: var(--red-bg); }
.card .label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--text-muted);
  font-weight: 600;
}
.card .label .card-icon { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.card .value { font-size: 1.7rem; font-weight: 700; margin-top: .3rem; letter-spacing: -.02em; }
.value.positive { color: var(--green); }
.value.negative { color: var(--red); }
/* aclaracion chica debajo del valor de una .card (antes repetida como
   style="margin-top:...; font-size:..." suelto en cada vista) */
.card-note { margin-top: .25rem; font-size: .72rem; }
/* .positive/.negative sueltas (sin .value): saldos/diferencias en tablas
   (Presupuesto, Reportes, Fondo Anual, Facturación, etc.) — .value.positive
   de arriba sigue ganando por especificidad donde las dos clases coinciden */
.positive { color: var(--green); }
.negative { color: var(--red); }
.text-amber { color: var(--amber); }

/* fila "nombre : estado" dentro de una .card, para resumenes de varias
   cuentas/items en una sola tarjeta (ej. "ultima actualizacion" por cuenta
   en el Dashboard) */
.card-list-row { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .85rem; padding: .18rem 0; }
.card-list-row + .card-list-row { border-top: 1px dashed var(--border); }

/* boton "Detalles" al pie de una card/chip que lleva a la vista completa
   — reemplaza el viejo patron de texto suelto "Ver X →". Con
   margin-top:auto en el contenedor flex-column de .card, queda pegado
   siempre abajo del todo, alineado con el de las demas cards de la misma
   fila (todas quedan mismo alto por el grid) sin importar cuanto
   contenido tenga cada una arriba. */
.card-actions { margin-top: auto; padding-top: .85rem; display: flex; justify-content: flex-end; }
.card-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .42rem .95rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  background: rgba(var(--primary-rgb), .12);
  color: var(--primary-dark);
  white-space: nowrap;
  transition: background .18s ease;
}
.card-btn:hover { background: rgba(var(--primary-rgb), .2); }

/* <details> colapsable para el desglose completo de Presupuesto en el
   Dashboard (mismo look que un <h2>, pero clickeable para expandir) */
.presupuesto-detalle summary { cursor: pointer; font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800; font-size: 1.08rem; margin-top: 2.2rem; letter-spacing: -.01em; }
.presupuesto-detalle[open] summary { margin-bottom: .7rem; }

/* ---------- grilla de accesos rapidos (dashboard, facturacion, gestion andy, etc.) ----------
   Iconos circulares "flotando" (sin caja/borde), como la fila de acciones
   rapidas de una app bancaria — iconos grandes a proposito (feedback:
   "los iconos de los botones son muy chicos"). .feature-group/-label son
   opcionales: una pagina con pocos accesos puede usar .feature-grid solo,
   sin agrupar. */
.feature-group { margin: 0 0 1.5rem; }
.feature-group:last-child { margin-bottom: 0; }
.feature-group-label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin: 0 0 .8rem .1rem;
}
.feature-group-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.feature-group[data-accent="hogar"] .feature-group-label::before { background: var(--accent-hogar); }
.feature-group[data-accent="individual"] .feature-group-label::before { background: var(--accent-individual); }

.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem 1.7rem;
  margin: 1.3rem 0 1.6rem;
}
.feature-group .feature-grid { margin: 0; }
.feature-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  width: 92px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
}
.feature-tile-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--tile-rgb, var(--primary-rgb)), .13);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s ease, box-shadow .2s ease;
}
.feature-tile-icon .ico { width: 32px; height: 32px; color: var(--tile-c1, var(--primary)); stroke-width: 1.7; }
.feature-tile:hover .feature-tile-icon {
  transform: translateY(-3px) scale(1.06);
  background: rgba(var(--tile-rgb, var(--primary-rgb)), .22);
  box-shadow: 0 10px 22px -8px rgba(var(--tile-rgb, var(--primary-rgb)), .45);
}
.feature-tile-label { font-size: .8rem; font-weight: 700; letter-spacing: -.005em; }
.feature-tile[data-accent="hogar"] { --tile-c1: var(--accent-hogar); --tile-rgb: var(--accent-hogar-rgb); }
.feature-tile[data-accent="individual"] { --tile-c1: var(--accent-individual); --tile-rgb: var(--accent-individual-rgb); }

@media (max-width: 640px) {
  .feature-grid { gap: 1.1rem 0; }
  .feature-tile { width: 33.33%; }
  .feature-tile-icon { width: 60px; height: 60px; }
  .feature-tile-icon .ico { width: 28px; height: 28px; }
}

/* ---------- stat-chip (Reintegros, Dashboard) con el mismo tratamiento ---------- */

.stat-chip {
  border: none;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(31,20,90,.05), 0 10px 24px -12px rgba(31,20,90,.08);
  padding: 1rem 1.15rem;
}

/* ---- hero de saldo: el numero mas importante de la pagina, bien
   arriba y grande, estilo "balance" de un homebanking/app bancaria ---- */
.dm-hero {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 1.9rem 2rem;
  margin: 1.2rem 0 1.7rem;
  background: linear-gradient(135deg, #0d1830 0%, #1c3b7a 48%, #4677d5 100%);
  color: #fff;
  box-shadow: 0 18px 44px -14px rgba(13, 24, 48, .5);
}
.dm-hero::before, .dm-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.dm-hero::before { width: 300px; height: 300px; right: -90px; top: -130px; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); }
.dm-hero::after { width: 240px; height: 240px; left: -70px; bottom: -110px; background: radial-gradient(circle, rgba(114,147,223,.35), transparent 70%); }
.dm-hero-label { position: relative; z-index: 1; font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: rgba(255,255,255,.68); }
.dm-hero-value { position: relative; z-index: 1; font-family: 'Manrope', 'Inter', sans-serif; font-weight: 800; font-size: 2.6rem; letter-spacing: -.02em; margin: .25rem 0 .1rem; }
.dm-hero-note { position: relative; z-index: 1; font-size: .82rem; color: rgba(255,255,255,.62); }
.dm-hero-chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.dm-chip {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: .38rem .8rem;
  font-size: .76rem;
  font-weight: 600;
  color: rgba(255,255,255,.94);
}
.dm-chip .dm-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dm-chip.ok .dm-dot { background: #4ade80; }
.dm-chip.warn .dm-dot { background: #facc15; }
.dm-chip.bad .dm-dot { background: #f87171; }
@media (max-width: 640px) {
  .dm-hero { padding: 1.5rem 1.3rem; border-radius: 22px; }
  .dm-hero-value { font-size: 2.1rem; }
}

/* ---------- selector de vehiculo con foto (modal "Nuevo viaje") ---------- */

.vehiculo-picker { display: flex; gap: .8rem; }
.vehiculo-picker-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  flex: 1 1 0;
  min-width: 0;
  padding: .6rem .6rem .7rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vehiculo-picker-opt:hover { border-color: var(--primary-2); }
.vehiculo-picker-opt.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14); }
.vehiculo-picker-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vehiculo-picker-opt img { width: 100%; height: 92px; object-fit: contain; }
.vehiculo-picker-emoji { font-size: 2.4rem; line-height: 92px; }
.vehiculo-picker-nombre { font-size: .78rem; font-weight: 700; text-align: center; }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: 0 2px 10px rgba(31,20,90,.05), 0 10px 24px -12px rgba(31,20,90,.08); border: none; background: var(--surface); }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid rgba(0,0,0,.045); font-size: .87rem; }
th { background: var(--surface-2); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--surface-2); }

/* en mobile, cada fila de una tabla envuelta en .table-wrap se convierte en
   una tarjeta apilada (evita el scroll horizontal); el nombre de columna
   sale del atributo data-label de cada <td> */
@media (max-width: 640px) {
  .table-wrap { overflow-x: visible; box-shadow: none; border: none; background: none; }
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tfoot, .table-wrap th, .table-wrap tr {
    display: block;
    width: 100%;
  }
  .table-wrap thead { display: none; }
  .table-wrap tbody tr, .table-wrap tfoot tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .55rem .85rem;
    margin-bottom: .6rem;
  }
  .table-wrap tbody tr:hover { background: var(--surface); }
  .table-wrap td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4rem .8rem;
    padding: .4rem 0;
    border-bottom: 1px dashed var(--border);
    text-align: right;
  }
  .table-wrap td:last-child { border-bottom: none; }
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: .72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
    flex-shrink: 0;
  }
  .table-wrap td:not([data-label]) { justify-content: flex-start; }

  /* ningun input/boton individual dentro de una tarjeta mobile deberia
     poder forzar el ancho de la tarjeta entera, incluso si tiene un
     ancho fijo en px puesto para la vista de escritorio */
  .table-wrap td input, .table-wrap td select, .table-wrap td textarea {
    max-width: 58vw;
  }
  .table-wrap td form.inline { max-width: 100%; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
}

/* ---------- badges ---------- */

.badge { display: inline-block; padding: .22rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .01em; border: 1px solid transparent; }
.badge.pagado { background: var(--green-bg); color: var(--green); border-color: rgba(22,163,74,.15); }
.badge.pendiente { background: var(--red-bg); color: var(--red); border-color: rgba(224,55,74,.15); }
.badge.informativo { background: var(--blue-bg); color: var(--blue); border-color: rgba(42,99,199,.15); }
.badge.sin_movimiento { background: var(--surface-2); color: var(--text-muted); }
.badge.deficit { background: var(--red-bg); color: var(--red); }
.badge.superavit { background: var(--green-bg); color: var(--green); }
.badge.en_linea { background: var(--blue-bg); color: var(--blue); }

/* ---------- filas de presupuesto del dashboard, coloreadas por estado ---------- */
/* especificidad alta a proposito: tiene que ganarle a la regla mobile
   ".table-wrap tbody tr" que fuerza background:var(--surface) en las
   tarjetas apiladas */

.table-wrap tbody tr.fila-pendiente, .table-wrap tbody tr.fila-pendiente:hover { background: var(--amber-bg); }
.table-wrap tbody tr.fila-a_favor, .table-wrap tbody tr.fila-a_favor:hover { background: var(--green-bg); }
.table-wrap tbody tr.fila-se_paso, .table-wrap tbody tr.fila-se_paso:hover { background: var(--red-bg); }
.table-wrap tbody tr.fila-urgente, .table-wrap tbody tr.fila-urgente:hover { background: var(--red-bg); }
.table-wrap tbody tr.fila-reconocido, .table-wrap tbody tr.fila-reconocido:hover { background: var(--blue-bg); }

/* filas de relleno para que dos tablas lado a lado (ej. Ingresos/Obligaciones,
   Hitos/Costos en Facturacion) terminen a la misma altura aunque tengan
   distinta cantidad de datos cargados — sin resaltado al pasar el mouse, y
   ocultas en mobile porque ahi las columnas se apilan y no hace falta alinear */
.table-wrap tbody tr.fila-vacia, .table-wrap tbody tr.fila-vacia:hover { background: var(--surface); }
@media (max-width: 900px) {
  .fila-vacia { display: none; }
}

/* ---------- bank logos ---------- */

.bank-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: .28rem .55rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}
.bank-logo.bank-oca { background: linear-gradient(135deg, #4fc3f7, #0288d1); font-style: italic; font-weight: 800; }
.bank-logo.bank-itau { background: #FF6200; text-transform: lowercase; font-style: normal; font-weight: 800; }

/* ---------- table filter ---------- */

.table-filter { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.table-filter input {
  width: 100%;
  max-width: 280px;
  padding: .45rem .7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: .85rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}
.table-filter input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.table-filter-count { font-size: .78rem; color: var(--text-muted); }

/* ---------- misc blocks ---------- */

.category-block { margin-bottom: 1.3rem; animation: fadeUp .3s ease both; }
.category-block h3 { margin: 0 0 .5rem; font-size: .95rem; color: var(--text); font-weight: 700; }

form.inline { display: inline; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  border: none;
  padding: .6rem 1.15rem;
  border-radius: 12px;
  cursor: pointer;
  font-size: .87rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: 0 4px 12px -2px rgba(var(--primary-rgb),.4);
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 6px 18px -2px rgba(var(--primary-rgb),.48); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); filter: brightness(.98); }

/* fila de acciones compactas (guardar/eliminar) en tablas: botones cuadrados
   solo-icono, del mismo tamaño, uno al lado del otro sin envolver */
.row-actions { display: flex; gap: .35rem; flex-wrap: nowrap; }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 9px;
  font-size: .95rem;
  line-height: 1;
}
/* variantes de tamaño reusadas en toda la app (antes repetidas como
   style="padding:..."/"width:...;height:...;" sueltas en cada vista) */
.btn-sm { padding: .3rem .6rem; }
.btn-icon.btn-icon-sm { width: 22px; height: 22px; }
.btn.secondary { background: var(--surface); color: var(--text); box-shadow: 0 2px 8px rgba(31,20,90,.05); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--surface-2); box-shadow: 0 2px 8px rgba(31,20,90,.05); transform: translateY(-1px); }

textarea, input[type=text], input[type=number], input[type=date], input[type=password], input[type=email], select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  font-size: .87rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
textarea:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.15);
}

.field { margin-bottom: .9rem; max-width: 420px; }
.field label { display: block; font-size: .82rem; margin-bottom: .3rem; color: var(--text-muted); font-weight: 600; }

.pago-row { display: flex; align-items: flex-end; gap: .7rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.pago-row .field { margin-bottom: 0; flex: 1 1 120px; max-width: 160px; }
.pago-row .btn { flex-shrink: 0; }

.reintegros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 1.3rem;
  align-items: start;
}
.reintegros-grid-resumen { align-items: stretch; }
.reintegros-grid-resumen .stat-chip { height: 100%; }
.member-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem 1.3rem;
  min-width: 0;
}
.member-panel h2 { margin-top: 0; }
.member-panel .table-wrap { max-width: 100%; }

@media (max-width: 640px) {
  .reintegros-grid { grid-template-columns: 1fr; }
  .pago-row { flex-direction: column; align-items: stretch; }
  .pago-row .field { flex: 0 1 auto; max-width: none; }
  .pago-row .btn { width: 100%; justify-content: center; }
}

/* ---------- acordeon por categoria (Devoluciones) ---------- */

.categoria-acordeon-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.categoria-acordeon {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.categoria-acordeon:hover { box-shadow: var(--shadow); border-color: #d5d9e3; }
.categoria-acordeon-summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem .9rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.categoria-acordeon-summary::-webkit-details-marker { display: none; }
.categoria-acordeon-nombre { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.categoria-acordeon-cantidad { font-size: .76rem; color: var(--text-muted); white-space: nowrap; }
.categoria-acordeon-total { font-weight: 700; white-space: nowrap; }
.categoria-acordeon-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform .15s ease; }
.categoria-acordeon[open] .categoria-acordeon-chevron { transform: rotate(90deg); }
.categoria-acordeon-body { padding: 0 .9rem .9rem; border-top: 1px solid var(--border); }
.categoria-acordeon-body .reintegro-list { margin-top: .7rem; }

@media (max-width: 640px) {
  .categoria-acordeon-cantidad { display: none; }
}

/* ---------- reintegro cards ---------- */

.reintegro-list { display: flex; flex-direction: column; gap: .6rem; }
.reintegro-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: .65rem .8rem;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.reintegro-card:hover { box-shadow: var(--shadow); border-color: #d5d9e3; }

.reintegro-card-top { display: flex; align-items: center; gap: .55rem; }
.reintegro-icono { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.reintegro-concepto { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reintegro-monto { font-weight: 700; white-space: nowrap; }

.reintegro-card-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin: .3rem 0 .5rem 1.7rem;
  font-size: .76rem;
  color: var(--text-muted);
}

.reintegro-card-bottom {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-left: 1.7rem;
}
.reintegro-card-bottom .pill-select { width: auto; }
.reintegro-card-bottom .btn-eliminar-reintegro { margin-left: auto; padding: .3rem .55rem; }

.reintegro-editar-panel {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .6rem 0 0 1.7rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--border);
}
.reintegro-editar-panel .field { margin-bottom: 0; flex: 1 1 140px; min-width: 0; }

.pagos-registrados-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 1.1rem 0 .5rem; font-weight: 700; }
.pagos-registrados-list { display: flex; flex-direction: column; gap: .4rem; }
.pago-registrado-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .5rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: .85rem;
}
.pago-registrado-row > span:first-child { font-weight: 600; }
.pago-registrado-row form { margin-left: auto; }

.pago-items-detalle summary { cursor: pointer; font-size: .85rem; color: var(--text-muted); }
.pago-items-detalle[open] { flex-basis: 100%; }
.pago-items-lista { margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: .25rem; }
.pago-items-item { display: flex; justify-content: space-between; gap: .8rem; font-size: .8rem; }

/* ---------- checklist ---------- */

.checklist-icono { font-size: 1rem; line-height: 1; margin-right: .3rem; }

/* ---------- comprobantes (checklist y reintegros) ---------- */

.comprobantes-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin: .5rem 0 0 1.7rem;
}
.comprobante-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .74rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .2rem .65rem;
  color: var(--text);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comprobante-chip:hover { border-color: var(--primary); }
.comprobante-borrar {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .8rem;
  line-height: 1;
  padding: .2rem .3rem;
}
.comprobante-borrar:hover { color: var(--red); }
.comprobante-agregar {
  display: inline-flex;
  align-items: center;
  font-size: .74rem;
  color: var(--primary);
  cursor: pointer;
  padding: .2rem .65rem;
  border: 1px dashed var(--border);
  border-radius: 999px;
}
.comprobante-agregar:hover { border-color: var(--primary); }
.comprobante-agregar input[type=file] { display: none; }

/* ---------- calendario: tarjetas de vencimiento ---------- */

.vencimiento-list { display: flex; flex-direction: column; gap: .6rem; }
.vencimiento-card {
  border: none;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(31,20,90,.05), 0 10px 24px -12px rgba(31,20,90,.08);
  padding: .7rem .9rem;
  transition: box-shadow .15s ease;
}
.vencimiento-card:hover { box-shadow: 0 4px 14px rgba(31,20,90,.06), 0 16px 32px -12px rgba(31,20,90,.16); }
.vencimiento-card.fila-pendiente { background: var(--amber-bg); }
.vencimiento-card.fila-urgente { background: var(--red-bg); }

.vencimiento-card-top { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.vencimiento-icono { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
.vencimiento-concepto { font-weight: 600; flex: 1; min-width: 80px; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.vencimiento-monto { font-weight: 700; white-space: nowrap; flex-shrink: 0; }

.vencimiento-card-meta {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin: .35rem 0 0 1.7rem;
  font-size: .8rem;
  color: var(--text-muted);
}

.vencimiento-card-bottom {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .55rem 0 0 1.7rem;
}

/* ---------- modal ---------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 43, .5);
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  z-index: 1000;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 1.3rem 1.4rem;
  max-width: 480px;
  width: 100%;
  animation: fadeUp .2s ease both;
}
.modal-box-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.modal-box-header h2 { margin: 0; }
.modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
  padding: 0 .2rem;
}
.modal-close-btn:hover { color: var(--text); }

button.card {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
button.card:disabled { cursor: default; opacity: .6; }

.obligaciones-pendientes-list { display: flex; flex-direction: column; gap: .1rem; max-height: 60vh; overflow-y: auto; }
.obligacion-pendiente-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .2rem;
  border-bottom: 1px solid var(--border);
}
.obligacion-pendiente-item:last-child { border-bottom: none; }
.obligacion-pendiente-nombre { flex: 1; font-size: .88rem; font-weight: 600; }
.obligacion-pendiente-monto { font-size: .88rem; font-weight: 700; color: var(--text-muted); }

/* ---------- facturacion: grupos "promesa" (sin confirmar) vs "confirmado" (verde) ---------- */

.resumen-grupo-titulo {
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--primary);
  margin: 2.4rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--border);
}
.resumen-grupo-titulo:first-of-type { margin-top: 0; }
.card-promesa { border-left: 4px solid var(--amber); padding-left: calc(1.1rem - 3px); }
.card-confirmado { border-left: 4px solid var(--green); padding-left: calc(1.1rem - 3px); }

/* ---------- facturacion: desglose de "Facturado en el mes" ---------- */

.facturado-breakdown { margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: .3rem; }
.facturado-breakdown div { display: flex; justify-content: space-between; gap: .6rem; font-size: .8rem; }
.facturado-breakdown strong { font-weight: 700; }
.facturado-breakdown sup { cursor: help; color: var(--text-muted); margin-left: .15rem; }

/* ---------- facturacion: tarjetas de proyecto ---------- */

.proyecto-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .9rem;
}
.proyecto-card-wrap {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .18s ease, transform .18s ease;
}
.proyecto-card-wrap:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.proyecto-card {
  display: block;
  padding: .9rem 1rem .5rem;
  text-decoration: none;
  color: var(--text);
}
.proyecto-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.proyecto-card-nombre { font-weight: 700; font-size: .95rem; }
.proyecto-card-neto { font-weight: 700; font-size: .88rem; white-space: nowrap; }
.proyecto-card-meta { margin-top: .4rem; font-size: .74rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: .3rem; }
.proyecto-card-eliminar { display: flex; justify-content: flex-end; margin: 0; padding: 0 .6rem .6rem; }

/* ---------- modal, estilo splitwise ---------- */

.modal-box-sw { padding: 0; overflow: hidden; max-width: 440px; }
.modal-header-sw {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  padding: 1rem 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header-sw h2 { margin: 0; color: #fff; font-size: 1.15rem; }
.modal-close-btn-light { color: rgba(255, 255, 255, .85); }
.modal-close-btn-light:hover { color: #fff; }

.modal-body-sw { padding: 1.2rem 1.4rem 1.4rem; }

.sw-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 0;
  flex-wrap: wrap;
}
.sw-row:not(:first-child) { border-top: 1px dashed var(--border); }

.sw-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--text-muted);
}

.sw-input-dashed {
  border: none;
  background: none;
  font-size: 1rem;
  flex: 1;
  min-width: 120px;
  padding: .3rem 0;
  color: var(--text);
  font-family: inherit;
}
.sw-input-dashed:focus { outline: none; }
.sw-input-dashed::placeholder { color: var(--text-muted); }
.sw-amount { font-size: 1.5rem; font-weight: 700; }

.sw-label { font-size: .85rem; color: var(--text-muted); }

.pill-select {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .38rem .9rem;
  font-size: .83rem;
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
}

.modal-footer-sw {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding-top: 1.1rem;
  margin-top: .3rem;
  border-top: 1px solid var(--border);
}

/* ---------- stat chips ---------- */

.stat-chip {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .55rem .9rem;
  box-shadow: var(--shadow);
  min-width: 150px;
}
.stat-chip .stat-chip-name { font-size: .73rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat-chip .stat-chip-value { font-size: 1.05rem; font-weight: 700; }

.btn-usar-sugerencia {
  border: none;
  background: none;
  color: var(--primary);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.btn-usar-sugerencia:hover { color: var(--primary-dark); }

.import-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 1rem 1.1rem;
  cursor: pointer;
  max-width: 560px;
  transition: border-color .15s ease, background .15s ease;
}
.import-dropzone:hover { border-color: var(--primary); background: rgba(var(--primary-rgb), .06); }
.import-dropzone-icon { font-size: 1.4rem; flex-shrink: 0; }
.import-dropzone-text { font-size: .87rem; font-weight: 600; color: var(--text); }
.import-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.import-toggles { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .7rem; }
.import-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}
.import-toggle:hover { color: var(--primary-dark); }

.import-extra { display: none; max-width: 560px; margin-top: .8rem; }
.import-extra.open { display: block; animation: fadeUp .2s ease both; }

.import-avanzado { margin-top: 1rem; max-width: 560px; }
.import-avanzado summary { cursor: pointer; font-size: .8rem; color: var(--text-muted); }

.cuenta-picker { display: flex; gap: .8rem; }
.cuenta-picker-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  flex: 1 1 0;
  padding: 1.1rem .8rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cuenta-picker-opt:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .14); }

.ultima-importacion {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--border);
  font-size: .82rem;
}

/* ---------- categorias personales (cuenta personal, Movimientos) ---------- */

.categoria-personal-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin-bottom: .8rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.categoria-personal-header { display: flex; align-items: center; gap: .6rem; }
.categoria-personal-header input { flex: 1; font-weight: 700; min-width: 0; }
.categoria-personal-subs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.subcategoria-personal-chip {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .2rem .3rem .2rem .8rem;
}
.subcategoria-personal-chip input {
  border: none;
  background: none;
  width: 110px;
  font-size: .82rem;
  padding: .1rem 0;
}
.subcategoria-personal-chip input:focus { outline: none; }

/* ---------- tabs (movimientos: cuenta + sub-secciones) ---------- */

.tabs-cuentas {
  display: flex;
  gap: 1.3rem;
  margin-bottom: 1.3rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.tab-cuenta {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: .6rem .1rem .55rem;
  margin-bottom: -1px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.tab-cuenta:hover { color: var(--text); }
.tab-cuenta.active { color: var(--text); border-bottom-color: var(--primary); }

.cuenta-panel { display: none; }
.cuenta-panel.active { display: block; animation: fadeUp .25s ease both; }

.tabs-sub { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.tab-sub {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .4rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tab-sub:hover { border-color: var(--primary); }
.tab-sub.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: transparent;
  color: #fff;
}
.tab-count {
  background: rgba(0, 0, 0, .07);
  border-radius: 999px;
  padding: .05rem .45rem;
  font-size: .72rem;
  font-weight: 700;
}
.tab-sub.active .tab-count { background: rgba(255, 255, 255, .28); }

.sub-panel { display: none; }
.sub-panel.active { display: block; animation: fadeUp .2s ease both; }

@media (max-width: 640px) {
  .tabs-cuentas { gap: 1rem; }
  .tab-cuenta { font-size: .88rem; }
  .tabs-sub { gap: .35rem; }
  .tab-sub { padding: .35rem .7rem; font-size: .78rem; }
}

.otros-meses-detalle summary { cursor: pointer; }
.otros-meses-lista { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.otros-meses-item { display: flex; align-items: center; gap: .5rem; font-size: .78rem; }
.otros-meses-item .muted { flex-shrink: 0; font-size: .72rem; }
.otros-meses-concepto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otros-meses-monto { flex-shrink: 0; font-weight: 600; }
.otros-meses-item a { flex-shrink: 0; }

.muted { color: var(--text-muted); font-size: .85rem; }

.progress-track { background: var(--surface-2); border-radius: 6px; height: 8px; width: 100%; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 6px; transition: width .4s ease; }
.progress-fill.deficit { background: var(--red); }
.progress-fill.superavit { background: var(--green); }
.progress-fill.en_linea { background: var(--blue); }

/* ---------- autosave feedback ---------- */

.autosave-ok { box-shadow: 0 0 0 3px rgba(22,163,74,.35) !important; border-color: var(--green) !important; transition: box-shadow .25s ease, border-color .25s ease; }
.autosave-err { box-shadow: 0 0 0 3px rgba(224,55,74,.35) !important; border-color: var(--red) !important; }
.autosave-pending { opacity: .6; }

/* ---------- toasts ---------- */

#toast-stack {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  flex-direction: column-reverse;
  gap: .5rem;
  z-index: 999;
}
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-hover);
  border-radius: 9px;
  padding: .65rem .9rem;
  font-size: .85rem;
  min-width: 220px;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: .5rem;
  animation: toastIn .25s ease both;
  border-left: 3px solid var(--primary);
}
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.leaving { animation: toastOut .2s ease forwards; }

@keyframes toastIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* legacy flash banners (fallback for full-page-load messages) */
.flash-success, .flash-error { display: none; }

/* ---------- aviso global de vencimientos (todas las pantallas) ---------- */

.alerta-vencimientos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  background: var(--amber-bg);
  border: 1px solid rgba(184, 134, 10, .25);
  border-radius: var(--radius);
  padding: .6rem .9rem;
  margin: 0 0 1.2rem;
  font-size: .82rem;
  color: var(--text);
  text-decoration: none;
  transition: box-shadow .15s ease;
}
.alerta-vencimientos:hover { box-shadow: var(--shadow); }
.alerta-vencimientos-titulo { font-weight: 700; flex-shrink: 0; }
.alerta-vencimientos-item {
  display: inline-flex;
  align-items: center;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .78rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
.alerta-vencimientos-item.fila-urgente { background: var(--red-bg); color: var(--red); border-color: transparent; }
.alerta-vencimientos-item.fila-pendiente { background: var(--surface); color: var(--text); }
.alerta-vencimientos-link { margin-left: auto; font-weight: 600; color: var(--primary); flex-shrink: 0; }

.podio {
  display: flex;
  align-items: flex-end;
  gap: .8rem;
  margin: 0 0 1.5rem;
}
.podio-puesto {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem .8rem .9rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.podio-puesto-1 { order: 2; padding-top: 1.3rem; border-top: 3px solid #e5b400; }
.podio-puesto-2 { order: 1; border-top: 3px solid #9aa0ab; }
.podio-puesto-3 { order: 3; border-top: 3px solid #c97a3d; }
.podio-medalla { font-size: 1.8rem; line-height: 1; }
.podio-monto { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.podio-descripcion { font-size: .82rem; font-weight: 600; color: var(--text); }
.podio-meta { font-size: .72rem; color: var(--text-muted); }

/* Pagos realizados (Devoluciones): acordeon moderno por integrante, agrupado por mes de pago */
.pagos-acordeon {
  margin-top: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(22, 163, 74, .07), rgba(22, 163, 74, .02));
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.pagos-acordeon:hover { box-shadow: var(--shadow); }
.pagos-acordeon-summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .95rem;
  cursor: pointer;
  list-style: none;
}
.pagos-acordeon-summary::-webkit-details-marker { display: none; }
.pagos-acordeon-icono {
  width: 2.3rem; height: 2.3rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(22, 163, 74, .15);
  font-size: 1.1rem;
}
.pagos-acordeon-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pagos-acordeon-texto small { color: var(--text-muted); font-size: .74rem; }
.pagos-acordeon-total { font-weight: 800; color: var(--green, #16a34a); white-space: nowrap; }
.pagos-acordeon[open] > .pagos-acordeon-summary .categoria-acordeon-chevron { transform: rotate(90deg); }
.pagos-acordeon-body { padding: 0 .95rem .95rem; border-top: 1px solid var(--border); }
.pagos-mes { margin-top: .85rem; }
.pagos-mes-titulo {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: .45rem; padding-bottom: .3rem;
  border-bottom: 1px dashed var(--border);
}