/* ══════════ FINANZAS — con el sistema visual común (29/09/2026) ══════════
   Tablero «Prueba · Finanzas con el sistema» del lienzo. Lo común (banda,
   pestañas, filtros, cajas, cifras, botones, vacíos) sale de 16-sistema.css;
   aquí solo va lo propio: la franja de 12 meses (la pieza del área), el
   ranking de categorías que se abre, la fila de movimiento con sus
   correcciones y las piezas de Inversiones y Patrimonio.

   Colores: el azul del área solo como var(--area) / var(--area-suave), y los
   importes SIEMPRE con signo, positivo en --ok y negativo en --error (antes
   lo positivo salía a veces azul y a veces verde). El gris de texto tenue es
   --tx3: el #8A93A6 de antes no llegaba al contraste mínimo. La letra de
   texto es la común (Instrument); Bricolage, solo en títulos y cifras. */

.fin{ position:relative; color:var(--tx); font-family:var(--f-txt) }
/* 11-escritorio.css le daba relleno de tarjeta a .fin: ya no es una tarjeta
   (div.fin gana por especificidad sin tocar ese archivo común). */
div.fin{ margin:0; padding:0; background:none; border:0 }

/* El lienzo de la pestaña: pestañas, filtros y contenido en una caja blanca,
   como en el tablero; la columna derecha va aparte (.sis-dos / .sis-col). */
.fin-lienzo{ background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:4px 20px 20px; min-width:0; box-sizing:border-box }
.fin-lienzo > .sis-pestanas{ margin-bottom:14px }
@media (max-width:899px){
  /* En el móvil no hay sitio para una caja dentro de la página. */
  .fin-lienzo{ background:none; border:0; border-radius:0; padding:0 }
}

/* La banda en el móvil enseña tres cifras; los importes en euros son anchos,
   así que en vez del ahorro del año (el más largo) sale el gasto frente a la
   media, que cabe. */
@media (max-width:899px){
  .fin .sis-banda-cifras > .sis-cifra:nth-child(3){ display:none }
  .fin .sis-banda-cifras > .sis-cifra:nth-child(4){ display:flex }
}

/* ── Barra de filtros: el periodo «‹ 2026 ›» ── */
.fin-periodo{ display:inline-flex; align-items:center; gap:4px }
.fin-periodo .sis-btn-icono{ width:var(--h-s); height:var(--h-s) }
.fin-periodo .sis-btn-icono:disabled{ opacity:.35; cursor:default }
.fin-periodo b{ font-family:var(--f-tit); font-weight:800; font-size:16px; padding:0 6px; font-variant-numeric:tabular-nums }

/* ── La franja del año (pieza propia) ── */
.fin-franja{ margin:4px 0 18px }
.fin-franja-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; min-height:32px }
.fin-franja-leyenda{ display:inline-flex; align-items:center; gap:6px }
.fin-franja-leyenda i{ width:10px; height:10px; border-radius:3px; display:inline-block }
.fin-franja-leyenda i.ingreso{ background:var(--area) }
.fin-franja-leyenda i.gasto{ background:var(--tx2); margin-left:8px }

.fin-meses-tira{ display:flex; align-items:flex-end; gap:4px; padding:0 2px 2px; border-bottom:1px solid var(--borde); overflow-x:auto }
.fin-mes-barra{
  flex:1; min-width:26px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  background:none; border:0; padding:4px 0 6px; border-radius:var(--r-s); color:var(--tx3);
}
.fin-mes-barra:hover{ background:var(--sup2) }
.fin-mes-barra .neto{ font-family:var(--f-mono); font-size:9.5px; font-weight:600; height:12px; white-space:nowrap; color:var(--tx3) }
.fin-mes-barra .neto.pos{ color:var(--ok) }
.fin-mes-barra .neto.neg{ color:var(--error) }
.fin-mes-barra .pista{ height:130px; display:flex; align-items:flex-end; justify-content:center; gap:3px }
.fin-mes-barra .pista i{ display:block; width:12px; border-radius:3px 3px 0 0 }
/* Los meses sin elegir, en claro; el elegido (o el año entero), en su color. */
.fin-mes-barra .pista i.ingreso, .fin-mes-barra .pista i.cat{ background:var(--area); opacity:.38 }
.fin-mes-barra .pista i.gasto{ background:var(--borde) }
.fin-mes-barra.on .pista i.ingreso, .fin-mes-barra.on .pista i.cat,
.fin-meses-tira.todo .pista i.ingreso, .fin-meses-tira.todo .pista i.cat{ opacity:1 }
.fin-mes-barra.on .pista i.gasto, .fin-meses-tira.todo .pista i.gasto{ background:var(--tx2) }
.fin-mes-barra .mes{ font-family:var(--f-mono); font-size:11px; font-weight:500; color:var(--tx3) }
.fin-mes-barra.on .mes{ color:var(--tx); font-weight:600 }
.fin-mes-barra.futuro .mes{ opacity:.4 }
@media (max-width:899px){
  .fin-meses-tira{ gap:2px }
  .fin-mes-barra{ min-width:22px }
  .fin-mes-barra .pista{ height:110px; gap:2px }
  .fin-mes-barra .pista i{ width:7px }
  .fin-mes-barra .neto{ font-size:8.5px }
}
/* En un teléfono estrecho los doce netos se pisan: el del mes elegido sigue
   en la caja del periodo (Neto). */
@media (max-width:480px){ .fin-mes-barra .neto{ visibility:hidden } }
/* La línea de estado del filtro de mes, pegada bajo la franja. */
.fin-mes-filtro{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; font-size:12.5px; color:var(--tx2) }
.fin-mes-filtro span{ display:inline-block }
.fin-mes-filtro span::first-letter{ text-transform:uppercase }

/* ── Categorías: el conmutador y el ranking a dos columnas ── */
.fin-cats-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:0 0 12px }
.fin-ranking{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px 28px }
@media (min-width:900px){ .fin-ranking{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.fin-rk{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(48px,90px) auto; align-items:center; gap:10px;
  width:100%; min-height:36px; padding:4px 8px; margin:0 -8px; box-sizing:content-box;
  background:none; border:0; border-radius:var(--r-s); cursor:pointer; text-align:left; color:var(--tx); font-size:14px;
}
.fin-rk:hover{ background:var(--sup2) }
/* Seleccionado: borde de 2 px en tinta (regla común de resaltes). */
.fin-rk.on{ box-shadow:inset 0 0 0 2px var(--tx) }
.fin-rk .nom{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fin-rk .nom small{ margin-left:6px; font-family:var(--f-mono); font-size:10.5px; color:var(--tx3) }
.fin-rk .pista{ height:8px; border-radius:4px; background:var(--neutro-suave); overflow:hidden; display:block }
.fin-rk .pista i{ display:block; height:100%; border-radius:4px; background:var(--area) }
.fin-rk b{ font-family:var(--f-mono); font-size:12px; font-weight:600; text-align:right; white-space:nowrap }

/* El detalle de la categoría abierta, debajo y a todo el ancho. */
.fin-ranking > .fin-cat-detalle{ grid-column:1 / -1; margin:6px 0 12px }
.fin-cat-detalle{ margin:14px 0 4px; padding:12px 14px; border:1px solid var(--borde-s); border-top:3px solid var(--area); border-radius:var(--r-m); background:var(--sup) }
.fin-cat-detalle-cab{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px }
.fin-cat-detalle-cab b{ font-family:var(--f-tit); font-weight:800; font-size:16px }
.fin-cat-detalle-cab span{ flex:1; font-family:var(--f-mono); font-size:11px; color:var(--tx3) }
.fin-subcat-resumen{ display:flex; flex-wrap:wrap; gap:6px; padding:0 0 10px }
.fin-subcat-chip{ font-size:12px; color:var(--tx2); background:var(--sup2); border:1px solid var(--borde-s); border-radius:var(--r-pill); padding:3px 10px; white-space:nowrap }
.fin-subcat-chip b{ color:var(--tx); font-family:var(--f-mono); font-weight:600; margin-left:2px }

/* Al abrir una categoría que se subdivide: primero la parte, y sus
   movimientos dentro (segundo nivel del acordeón). */
.fin-subgrupo{ margin:0 0 6px }
.fin-subgrupo-cab{
  display:flex; align-items:baseline; gap:8px; width:100%; padding:8px 6px 7px;
  border:0; border-bottom:1px solid var(--borde-s); background:none; color:inherit; text-align:left; cursor:pointer;
  border-radius:var(--r-s) var(--r-s) 0 0;
}
.fin-subgrupo-cab:hover, .fin-subgrupo.abierta > .fin-subgrupo-cab{ background:var(--sup2) }
.fin-subgrupo-flecha{ font-style:normal; font-size:11px; color:var(--tx3); width:10px; flex-shrink:0 }
.fin-subgrupo-cab b{ font-size:14px; font-weight:600; flex:1; min-width:0 }
.fin-subgrupo-cab span{ font-family:var(--f-mono); font-size:11px; color:var(--tx3); flex-shrink:0 }
.fin-subgrupo-cab em{ font-style:normal; font-family:var(--f-mono); font-weight:600; font-size:12.5px; flex-shrink:0 }

/* ── La columna derecha ── */
.fin-lat-cifras{ display:flex; flex-wrap:wrap; gap:10px 24px }
.fin-lat-cifras .sis-cifra-v b{ font-size:22px }
.fin-gastado{ display:flex; align-items:center; gap:10px }
.fin-gastado .pista{ flex:1; height:6px; border-radius:3px; background:var(--neutro-suave); overflow:hidden; display:block }
.fin-gastado .pista i{ display:block; height:100%; background:var(--area) }
.fin-gastado b{ font-family:var(--f-mono); font-size:12px; font-weight:600; white-space:nowrap }
.fin-lat-fila{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:14px; padding-top:8px; border-top:1px solid var(--borde-s) }
.fin-lat-fila span{ min-width:0 }
.fin-lat-fila small{ display:block; font-family:var(--f-mono); font-size:11px; color:var(--tx3); margin-top:1px }
.fin-lat-fila b{ font-family:var(--f-mono); font-size:13px; font-weight:600; white-space:nowrap }
.fin-lat-fila.tenue{ font-size:12.5px; color:var(--tx2) }
.fin-lat-fila b.pos, .fin-ultimo .imp.pos{ color:var(--ok) }
.fin-lat-fila b.neg, .fin-ultimo .imp.neg{ color:var(--error) }
.fin-ultimos{ display:flex; flex-direction:column }
.fin-ultimo{ display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--borde-s) }
.fin-ultimo:last-child{ border-bottom:0 }
.fin-ultimo > div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.fin-ultimo b{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fin-ultimo > div > span{ font-size:12px; color:var(--tx2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fin-ultimo .imp{ font-family:var(--f-mono); font-size:13px; font-weight:600; white-space:nowrap }

/* ── La fila de un movimiento y sus correcciones ── */
.fin-movs{ display:flex; flex-direction:column }
.fin-mov{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--borde-s) }
.fin-mov .fecha{ font-family:var(--f-mono); font-size:11.5px; color:var(--tx3); width:44px; flex-shrink:0 }
/* La fecha es un botón: abre el selector de la fecha real. */
.fin-mov button.fecha{ text-align:left; background:none; border:0; padding:2px 3px; margin:-2px -3px; border-radius:var(--r-s); cursor:pointer }
.fin-mov button.fecha:hover{ background:var(--sup2); color:var(--tx) }
.fin-mov .txt{ flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:baseline }
.fin-concepto-input{
  flex:1; min-width:0; font-size:14px; color:var(--tx);
  background:transparent; border:0; border-radius:var(--r-s); padding:2px 3px; margin:-2px -3px;
}
.fin-concepto-input:hover, .fin-concepto-input:focus{ background:var(--sup2); outline:none }
.fin-viaje-tag{ font-style:normal; color:var(--info); font-size:11.5px; white-space:nowrap }
.fin-viaje-enlace{ background:none; border:0; padding:0; margin-left:4px; cursor:pointer; text-decoration:underline; text-underline-offset:2px }
.fin-viaje-enlace:hover{ color:var(--tx) }
/* Los puentes v61: la etiqueta del neteo. */
.fin-tag-neteo{ color:var(--ok); margin-left:4px }
.fin-mov .imp{ font-family:var(--f-mono); font-weight:600; font-size:12.5px; min-width:72px; text-align:right; flex-shrink:0; white-space:nowrap }
.fin-mov .imp.neg{ color:var(--error) }
.fin-mov .imp.pos{ color:var(--ok) }

/* Los controles pequeños de la fila (categoría, tipo, dividir, comida,
   neteo, borrar): la forma de los campos del sistema, en pequeño. */
.fin-mov select.fin-catsel, .fin-catsel-dividido, .fin-tiposel{
  height:28px; box-sizing:border-box; font-size:12px; background:var(--sup); color:var(--tx);
  border:1.5px solid var(--borde); border-radius:var(--r-s); padding:0 4px; flex-shrink:0; cursor:pointer;
}
.fin-mov select.fin-catsel{ max-width:120px }
.fin-catsel-dividido{ max-width:120px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fin-tiposel{ max-width:104px; color:var(--tx2) }
.fin-tiposel.manual{ border-color:var(--tx); color:var(--tx); font-weight:600 }
.fin-btn-dividir, .fin-btn-borrar, .fin-btn-nocomputable{
  width:28px; height:28px; padding:0; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1; background:var(--sup); border:1.5px solid var(--borde); border-radius:var(--r-s);
  flex-shrink:0; cursor:pointer;
}
.fin-btn-dividir{ width:auto; min-width:28px; padding:0 4px }
.fin-btn-dividir:hover{ border-color:var(--tx) }
.fin-btn-borrar{ opacity:.6 }
.fin-btn-borrar:hover{ opacity:1; border-color:var(--error) }
.fin-btn-nocomputable{ opacity:.75 }
.fin-btn-nocomputable:hover, .fin-btn-nocomputable.on{ opacity:1; border-color:var(--error) }
.fin-btn-nocomputable.on{ background:var(--error-suave) }
@media (max-width:899px){
  /* En el móvil la fila va justa: los desplegables, más estrechos. */
  .fin-mov{ gap:6px }
  .fin-mov select.fin-catsel, .fin-catsel-dividido{ max-width:96px }
  .fin-tiposel{ max-width:84px }
  .fin-mov .imp{ min-width:60px }
}

/* Las correcciones que se abren debajo de la fila. */
.fin-mov-viaje{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:0 0 8px 52px; font-size:12px; color:var(--tx2) }
.fin-mov-viaje select, .fin-mov-viaje input[type="date"], .fin-panel-puente input{
  height:30px; box-sizing:border-box; font-size:12.5px; background:var(--sup); color:var(--tx);
  border:1.5px solid var(--borde); border-radius:var(--r-s); padding:0 6px; flex:1; max-width:220px;
}
.fin-mov-viaje input[type="date"]{ flex:0 0 auto }
.fin-panel-puente input{ min-width:110px; max-width:none }
.fin-panel-puente select{ max-width:none }
.fin-nota-hipoteca{ padding:0 0 8px 52px; margin:0 }
@media (max-width:899px){ .fin-mov-viaje, .fin-nota-hipoteca{ padding-left:0 } }

/* ── Dividir un movimiento en varias categorías (esquema v36) ── */
.fin-division{ padding:10px 12px; margin:0 0 10px 52px; background:var(--sup2); border:1px solid var(--borde-s); border-radius:var(--r-m) }
@media (max-width:899px){ .fin-division{ margin-left:0 } }
.fin-division-fila{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:6px }
.fin-division-fila select, .fin-division-importe, .fin-division-sub{
  height:32px; box-sizing:border-box; font-size:13px; background:var(--sup); color:var(--tx);
  border:1.5px solid var(--borde); border-radius:var(--r-s); padding:0 6px;
}
.fin-division-fila select{ flex:1; min-width:0 }
.fin-division-importe{ width:76px; flex-shrink:0; text-align:right; font-family:var(--f-mono) }
.fin-division-eur{ font-size:12px; color:var(--tx3); flex-shrink:0 }
.fin-division-quitar{ background:none; border:0; color:var(--tx3); font-size:18px; line-height:1; cursor:pointer; flex-shrink:0; padding:2px 4px }
/* El desglose de una parte, debajo de su fila. */
.fin-division-sub{ flex-basis:100%; height:30px; font-size:12px }
.fin-division-pie{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px }
.fin-division-suma{ font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--tx2) }
.fin-division-suma.mal{ color:var(--error) }
.fin-division-btns{ margin-top:8px }
.fin-division-quitar-todo{ margin-right:auto }

/* ── El alta manual de un movimiento ── */
.fin-alta-mov{ display:grid; gap:10px; background:var(--sup2); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:14px 16px; margin:0 0 14px }
.fin-alta-tit{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.fin-alta-tit i{ font-style:normal; font-size:12.5px; color:var(--tx2) }
.fin-alta-fila{ display:flex; gap:8px; flex-wrap:wrap }
.fin-alta-fila input, .fin-alta-fila select{
  flex:1; min-width:120px; height:var(--h-m); box-sizing:border-box; font-size:14px; padding:0 12px;
  background:var(--sup); color:var(--tx); border:1.5px solid var(--borde); border-radius:var(--r-m);
}
.fin-alta-fila input:focus, .fin-alta-fila select:focus{ border-color:var(--tx); outline:none }

/* ── Textos de apoyo, error y vacíos ── */
.fin-nota{ font-size:12.5px; color:var(--tx3); line-height:1.6; padding:10px 0 2px; margin:0 }
.fin-error{ font-size:13px; color:var(--error); background:var(--error-suave); border-radius:var(--r-m); padding:10px 12px; margin:0 0 12px }
/* Los vacíos que quedan con la clase de siempre (dentro de secciones), con
   la forma del vacío común. */
.fin .vacio{ text-align:left; font-family:var(--f-txt); font-size:13px; line-height:1.5; color:var(--tx2); background:transparent; border:1.5px dashed var(--borde); border-radius:var(--r-l); padding:14px 16px }

/* ── Reglas aprendidas ── */
.fin-reglas{ margin-top:16px; background:var(--sup2); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:12px 14px }
.fin-reglas summary{ cursor:pointer; font-weight:600; font-size:14px }
.fin-regla{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto; gap:10px; align-items:baseline;
  padding:7px 0; border-bottom:1px solid var(--borde-s); font-size:13px;
}
.fin-regla:last-of-type{ border-bottom:0 }
.fin-regla-firma{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fin-regla-firma i{ font-style:normal; font-weight:400; font-size:11px; color:var(--tx3); margin-left:4px }
.fin-regla-destino{ display:flex; flex-wrap:wrap; gap:4px 10px }
.fin-regla-destino b{ font-weight:600; color:var(--tx) }
.fin-regla-destino em{ font-style:normal; font-family:var(--f-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--tx3); margin-right:3px }
.fin-regla-uso{ font-family:var(--f-mono); font-size:11px; color:var(--tx3); white-space:nowrap; font-variant-numeric:tabular-nums }
@media (max-width:560px){
  .fin-regla{ grid-template-columns:1fr auto }
  .fin-regla-destino{ grid-column:1 / -1; order:3 }
}

/* ── El cerrojo ── */
.fin-candado{ display:flex; align-items:center; justify-content:center; min-height:360px; padding:24px 0 }
.fin-candado-caja{ width:100%; max-width:360px; align-items:center; text-align:center; padding:26px 24px }
.fin-candado-ico{ margin:0; color:var(--area) }
.fin-candado-caja h3{ font-family:var(--f-tit); font-weight:800; font-size:20px; letter-spacing:-.01em; margin:0 }
.fin-candado-caja .fin-nota{ padding:0 }
.fin-candado-caja form{ display:flex; flex-direction:column; gap:8px; width:100% }
.fin-candado-caja input{
  height:var(--h-l); box-sizing:border-box; font-size:15px; text-align:center; padding:0 12px;
  background:var(--sup); color:var(--tx); border:1.5px solid var(--borde); border-radius:var(--r-m);
}
.fin-candado-caja input:focus{ border-color:var(--tx); outline:none }
.fin-candado-caja .fin-error{ margin:0 }

/* ── Inversiones y Patrimonio ── */
/* En escritorio ancho, las secciones van a dos columnas; lo que necesita el
   ancho (tablas, importar) ocupa las dos. */
.fin-patri{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:start }
.fin-patri > *{ grid-column:1 / -1; min-width:0 }
@media (min-width:1200px){
  .fin-patri{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .fin-patri > .fin-seccion:not(.fin-ancha){ grid-column:auto }
}
.fin-seccion{ background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:16px 18px; min-width:0; box-sizing:border-box }
/* Dentro del lienzo blanco, las secciones no llevan otra caja encima. */
.fin-lienzo .fin-seccion{ background:var(--sup2) }
@media (max-width:899px){ .fin-lienzo .fin-seccion{ background:var(--sup) } }
/* El título de cada sección, como el de una caja del sistema (rótulo). */
.fin-seccion h3{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx2); margin:0 0 12px }
.fin-subtitulo{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); margin:12px 0 6px }
/* El conmutador de rango de cada gráfico (Este año · Todo), a la derecha. */
.sis-conmutador.fin-rango{ display:flex; width:max-content; margin:-4px 0 8px auto }

/* Las cifras de arriba: cada una como una cifra del sistema en su caja. */
.fin-cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px }
.fin-cards-inv{ grid-template-columns:repeat(2, minmax(0,1fr)) }
@media (min-width:700px){ .fin-cards-inv{ grid-template-columns:repeat(4, minmax(0,1fr)) } }
.fin-dd-cards{ margin-bottom:10px }
.fin-card{ background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-m); padding:12px 14px; display:flex; flex-direction:column; gap:3px; min-width:0 }
.fin-card b{ font-family:var(--f-tit); font-weight:800; font-size:20px; line-height:1.1; color:var(--tx); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fin-card span{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3) }
.fin-card.pos b{ color:var(--ok) }
.fin-card.neg b, .fin-card b.neg{ color:var(--error) }
.fin-card-total{ padding:16px 18px }
.fin-card-total b{ font-size:30px }
@media (max-width:899px){ .fin-card b{ font-size:17px } .fin-card-total b{ font-size:26px } }

.fin-donut-envoltura{ display:flex; align-items:center; gap:18px; background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-l); padding:14px 16px }
.fin-donut{ width:100px; height:100px; flex-shrink:0 }
.fin-donut circle{ transition:stroke-dasharray .3s }
.fin-donut-leyenda{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--tx2) }
.fin-donut-leyenda i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:7px }
.fin-donut-leyenda b{ color:var(--tx); font-family:var(--f-mono); font-size:12px; font-weight:600; margin-left:4px }

.fin-cuenta{ background:var(--sup); border:1px solid var(--borde-s); border-radius:var(--r-m); padding:10px 12px; margin-bottom:8px }
.fin-cuenta-cab{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.fin-cuenta-cab > div:first-child{ flex:1; min-width:0; display:flex; flex-direction:column }
.fin-cuenta-cab b{ font-size:14px; font-weight:600 }
.fin-cuenta-cab span{ font-size:12px; color:var(--tx3); margin-top:2px }
.fin-cuenta-saldo{ text-align:right; display:flex; flex-direction:column; flex-shrink:0 }
.fin-cuenta-saldo b{ font-family:var(--f-mono); font-weight:600; font-size:14px }
.fin-cuenta-saldo span{ font-size:11.5px; color:var(--tx3) }
.fin-cuenta-desglose{ font-size:11px; margin-top:2px; max-width:260px }
.fin-cuenta .borrar{ background:none; border:0; color:var(--tx3); font-size:18px; line-height:1; cursor:pointer; flex-shrink:0; padding:2px 4px }
.fin-cuenta .borrar:hover{ color:var(--error) }
/* Saldos en negativo, con su signo y en rojo. */
.fin-patri b.neg, .fin-cuenta-saldo b.neg{ color:var(--error) }
/* Los enlaces de acción de las secciones, como el botón «enlace» común. */
.fin-link{
  display:inline-flex; align-items:center; min-height:var(--h-s); padding:0 4px; background:none; border:0; cursor:pointer;
  color:var(--tx); font-weight:600; font-size:13px; text-decoration:underline; text-underline-offset:3px;
}
.fin-link:disabled{ opacity:.55; cursor:default }
/* Cuentas archivadas: plegadas y apagadas (55 %, la regla común). */
.fin-archivadas{ margin-top:10px }
.fin-archivadas summary{ font-size:13px; font-weight:600; color:var(--tx2); cursor:pointer; padding:4px 0 }
.fin-archivadas .fin-cuenta{ opacity:.55; margin-top:8px }

/* Los formularios pequeños de las secciones (saldo, cuenta, vivienda,
   hipoteca, inversión): campos del sistema y .sis-acciones al pie. */
.fin-mini-form{ display:flex; flex-direction:column; gap:8px; margin-top:8px }
.fin-mini-form strong{ font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tx2) }
.fin-mini-form input, .fin-mini-form select, .fin-nombre-cuenta{
  width:100%; height:var(--h-m); box-sizing:border-box; font-size:14px; padding:0 12px;
  background:var(--sup); color:var(--tx); border:1.5px solid var(--borde); border-radius:var(--r-m);
}
.fin-mini-form input:focus, .fin-mini-form select:focus, .fin-nombre-cuenta:focus{ border-color:var(--tx); outline:none }
.fin-nombre-cuenta{ display:block; margin-bottom:8px }
.fin-resultado-busqueda{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; cursor:pointer;
  background:var(--sup); border:1.5px solid var(--borde-s); border-radius:var(--r-m); padding:8px 12px; color:var(--tx);
}
.fin-resultado-busqueda:hover{ border-color:var(--tx) }
.fin-resultado-busqueda b{ font-size:14px }
.fin-resultado-busqueda span{ font-size:12px; color:var(--tx3) }

/* ── Importar ── */
/* Herramientas de Inversiones: plegadas, al final. */
.fin-herramientas{ margin-top:6px; padding:10px 14px; border:1px dashed var(--borde); border-radius:var(--r-m) }
.fin-herramientas summary{ cursor:pointer; font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tx2) }
.fin-herramientas .fin-btn-archivo{ display:inline-flex; margin-top:6px }
.fin-herramientas .fin-btn-archivo input{ display:none }
.fin-importar .fin-btn-archivo,.fin-herramientas .fin-btn-archivo{
  display:block; text-align:center; font-size:13px; font-weight:600; cursor:pointer;
  background:transparent; border:1.5px dashed var(--borde); border-radius:var(--r-m); color:var(--tx); padding:12px; margin-bottom:14px;
}
.fin-importar .fin-btn-archivo:hover{ border-color:var(--tx) }
.fin-importar .fin-btn-archivo input{ display:none }

/* ── Inversiones: tabla de posiciones ── */
.fin-inv-tabla-envoltura{ overflow-x:auto; margin-bottom:6px }
.fin-inv-tabla{ width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap }
.fin-inv-tabla th{
  text-align:right; font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--tx3);
  padding:6px 8px; border-bottom:1px solid var(--borde); font-weight:600;
}
.fin-inv-tabla th:first-child, .fin-inv-tabla td:first-child{ text-align:left }
.fin-inv-tabla td{ padding:8px; text-align:right; border-bottom:1px solid var(--borde-s); font-variant-numeric:tabular-nums }
.fin-inv-tabla td.pos{ color:var(--ok) }
.fin-inv-tabla td.neg{ color:var(--error) }
.fin-inv-tabla .borrar{ background:none; border:0; color:var(--tx3); cursor:pointer; margin-left:4px }
/* La tabla resumida en el móvil: las columnas .esc (símbolo, precio medio,
   precio actual) solo aparecen con sitio de escritorio. */
.fin-inv-tabla .esc{ display:none }
@media (min-width:760px){ .fin-inv-tabla .esc{ display:table-cell } }

/* ── Gráfico de barras (B/P mensual) ── */
.fin-grafico-barras{ display:flex; align-items:flex-end; gap:6px; height:130px; padding:0 2px }
.fin-grafico-barras .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0 }
.fin-grafico-barras .col .neto{ font-family:var(--f-mono); font-size:9.5px; font-weight:600; white-space:nowrap }
.fin-grafico-barras .col .neto.pos{ color:var(--ok) }
.fin-grafico-barras .col .neto.neg{ color:var(--error) }
.fin-grafico-barras .col .pista{ width:100%; display:flex; align-items:flex-end; justify-content:center; height:90px }
.fin-grafico-barras .col .pista i{ display:block; width:60%; border-radius:3px 3px 0 0 }
.fin-grafico-barras .col .pista i.pos{ background:var(--ok) }
.fin-grafico-barras .col .pista i.neg{ background:var(--error); border-radius:0 0 3px 3px; align-self:flex-start }
.fin-grafico-barras .col span:last-child{ font-family:var(--f-mono); font-size:10px; color:var(--tx3) }

/* ── Las líneas de Inversiones (v62–v63): la serie en el azul del área ── */
.fin-evo svg{ width:100%; height:auto; display:block; touch-action:pan-y }
.fin-evo-guia{ stroke:var(--tx3); stroke-width:1; stroke-dasharray:2 2; vector-effect:non-scaling-stroke }
.fin-evo-cero{ stroke:var(--borde); stroke-width:1; stroke-dasharray:3 3 }
.fin-evo-linea{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke }
.fin-evo-linea.azul{ stroke:var(--area) }
.fin-evo-punto.azul{ fill:var(--area); stroke:var(--area) }
.fin-evo-linea.oro{ stroke:var(--aviso-tx); stroke-width:2.5 }
.fin-evo-punto.oro{ fill:var(--aviso-tx); stroke:var(--aviso-tx) }
.fin-evo-linea.tenue{ stroke:var(--tx3) }
.fin-evo-linea.roja{ stroke:var(--error); stroke-width:1.8 }
.fin-evo-linea.invisible{ stroke:none }
.fin-evo-linea.discont{ stroke-dasharray:5 4 }
.fin-banda-oro{ fill:var(--aviso-suave) }
.fin-banda-azul{ fill:var(--area-suave) }
.fin-banda-roja{ fill:var(--error-suave) }
.fin-evo-pie{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-family:var(--f-mono); font-size:11px; color:var(--tx3); margin-top:4px }
.fin-evo-pie b{ font-size:14px }
.fin-evo-pie b.pos{ color:var(--ok) }
.fin-evo-pie b.neg{ color:var(--error) }
.fin-leyenda{ display:flex; flex-wrap:wrap; gap:5px 14px; font-size:12px; color:var(--tx2); margin-top:6px }
.fin-leyenda i{ display:inline-block; vertical-align:middle; margin-right:5px }
.fin-leyenda i.linea{ width:14px; height:0; border-top:2.5px solid; border-radius:2px }
.fin-leyenda i.linea.azul{ border-color:var(--area) }
.fin-leyenda i.linea.oro{ border-color:var(--aviso-tx) }
.fin-leyenda i.linea.tenue{ border-color:var(--tx3) }
.fin-leyenda i.linea.discont{ border-top-style:dashed }
.fin-leyenda i.banda{ width:14px; height:8px; border-radius:2px }
.fin-leyenda i.banda.oro{ background:var(--aviso-suave) }
.fin-leyenda i.banda.azul{ background:var(--area-suave) }
/* Quién te lo ha dado (y quitado): barras a los dos lados de un eje. */
.fin-contrib{ display:flex; flex-direction:column; gap:7px; margin-top:8px }
.fin-contrib .fila{ display:grid; grid-template-columns:minmax(88px,130px) 1fr 84px; gap:8px; align-items:center; font-size:13px }
.fin-contrib .nombre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600 }
.fin-contrib .pista{ position:relative; height:12px; background:var(--neutro-suave); border-radius:6px; overflow:hidden }
.fin-contrib .pista i{ position:absolute; top:0; bottom:0; border-radius:6px }
.fin-contrib .pista i.p{ left:28%; background:var(--ok) }
.fin-contrib .pista i.n{ right:72%; background:var(--error) }
.fin-contrib .pista i.eje{ left:28%; width:1px; background:var(--borde); border-radius:0 }
.fin-contrib .imp{ font-family:var(--f-mono); font-weight:600; font-size:12px; text-align:right }
.fin-contrib .imp.pos{ color:var(--ok) }
.fin-contrib .imp.neg{ color:var(--error) }
.fin-contrib .puntos{ color:var(--tx3); text-align:center; letter-spacing:.2em }
.fin-tabla-anios{ width:100%; border-collapse:collapse; font-size:13px; margin-top:6px }
.fin-tabla-anios th{ font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--tx3); font-weight:600; text-align:right; padding:4px 4px 6px }
.fin-tabla-anios th:first-child, .fin-tabla-anios td:first-child{ text-align:left }
.fin-tabla-anios td{ padding:6px 4px; border-top:1px solid var(--borde-s); text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap }
.fin-tabla-anios td:first-child{ font-family:var(--f-tit); font-weight:800 }
.fin-tabla-anios td.pos{ color:var(--ok) }
.fin-tabla-anios td.neg{ color:var(--error) }
/* «mejor» / «peor» que el índice: etiquetas de estado del sistema. */
.fin-chip{ height:18px; padding:0 6px; border-radius:var(--r-s); margin-left:4px; display:inline-flex; align-items:center; font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase }
.fin-chip.mejor{ background:var(--ok-suave); color:var(--ok) }
.fin-chip.peor{ background:var(--error-suave); color:var(--error) }

/* ── Cartera de MyInvestor: la comparación antes de guardar ── */
.fin-mi-revision{ margin-top:14px; display:grid; gap:10px }
.fin-mi-revision td small.fin-mi-nota{ display:block; font-size:11px; color:var(--tx3); margin-top:2px }
.fin-mi-revision tr.fin-mi-nueva td:last-child{ color:var(--ok); font-weight:600 }
.fin-mi-revision tr.fin-mi-distinta td:last-child, .fin-mi-revision tr.fin-mi-vendida td:last-child{ color:var(--error); font-weight:600 }
.fin-mi-revision tr.fin-mi-igual td, .fin-mi-revision tr.fin-mi-cerrada td{ opacity:.55 }
.fin-mi-botones{ align-items:center }

/* ── Bancos conectados (PSD2, Bancos.tsx; aparcado y oculto desde el
   28/09/2026). Se deja su forma, ya con los colores del sistema. ── */
.fin-bancos-lista{ display:flex; flex-direction:column; gap:8px; margin:8px 0 10px }
.fin-banco{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--borde-s); border-radius:var(--r-m); background:var(--sup2) }
.fin-banco b{ display:block; font-size:14px }
.fin-banco span{ display:block; font-size:12px; color:var(--tx3) }
.fin-bancos .fin-btn{
  min-height:36px; padding:0 14px; border-radius:var(--r-m); border:1.5px solid var(--tx); background:var(--sup);
  color:var(--tx); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.fin-bancos .fin-btn:disabled{ opacity:.55; cursor:wait }
.fin-bancos .fin-btn-principal{ background:var(--acento); border-color:var(--acento); color:#FFF; width:100%; min-height:42px }
.fin-bancos-ok{ color:var(--ok) }
.fin-bancos-revision{ margin-top:12px }
.fin-bancos-cuenta{ margin-bottom:12px }
.fin-bancos-cuenta .fin-subtitulo b{ color:var(--tx); text-transform:none; letter-spacing:0 }
.fin-bancos-movs{ list-style:none; margin:0; padding:0; max-height:420px; overflow:auto; border:1px solid var(--borde-s); border-radius:var(--r-m) }
.fin-bancos-movs li + li{ border-top:1px solid var(--borde-s) }
.fin-bancos-movs label{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px 10px; font-size:13px; cursor:pointer }
.fin-bancos-fecha{ color:var(--tx3); font-variant-numeric:tabular-nums; white-space:nowrap }
.fin-bancos-concepto{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fin-bancos-importe{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--ok); white-space:nowrap }
.fin-bancos-importe.neg{ color:var(--error) }
.fin-bancos-botones{ display:flex; gap:8px }
.fin-bancos-botones .fin-btn-principal{ flex:1 }

/* ── Lo nuevo del banco, arriba de Finanzas (RevisionBanco.tsx) ── */
.fin-banco-nuevos{ display:flex; flex-direction:column; gap:8px; margin:0 0 14px }
.fin-banco-nuevos .sis-aviso{ margin:0 }
.fin-banco-franja{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--borde-s); border-left:3px solid var(--area); border-radius:var(--r-m); background:var(--sup); font-size:14px }
.fin-banco-nuevos .fin-bancos-revision{ margin-top:4px }
.fin-banco-mov{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto minmax(0,150px); align-items:center; gap:8px; padding:6px 10px; font-size:13px }
.fin-banco-cat{ min-width:0; height:30px; padding:0 6px; border:1.5px solid var(--borde); border-radius:var(--r-s); background:var(--sup); color:var(--tx); font:inherit; font-size:12.5px }
.fin-banco-cat.sin{ color:var(--tx3) }
span.fin-banco-cat{ display:flex; align-items:center; border-style:dashed }
.fin-banco-pendientes{ margin-top:8px; opacity:.7 }
@media (max-width:899px){
  .fin-banco-mov{ grid-template-columns:auto auto minmax(0,1fr) auto; row-gap:4px }
  .fin-banco-cat{ grid-column:3 / -1 }
}

.fin-banco-cuentas{ display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:6px }
.fin-banco-cuentas label{ display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--tx); cursor:pointer; min-height:32px }
.fin-banco-cuentas label.fuera{ color:var(--tx3); text-decoration:line-through }

/* ── El patrimonio mes a mes (HistoricoPatrimonio.tsx) ── */
.fin-hist .neg{ color:var(--error) } .fin-hist .pos{ color:var(--ok) }
.fin-hist-leyenda{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--tx2); margin:6px 0 4px }
.fin-hist-leyenda span{ display:inline-flex; align-items:center; gap:6px }
.fin-hist-leyenda i{ width:10px; height:10px; border-radius:2px; display:inline-block }
.fin-hist-leyenda i.total{ width:14px; height:0; border-top:2px solid var(--tx); border-radius:0 }
.fin-hist-dato{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; min-height:22px; font-size:13px; color:var(--tx2) }
.fin-hist-dato b{ color:var(--tx); font-variant-numeric:tabular-nums }
.fin-hist-dato > b:first-child{ min-width:52px; font-family:var(--f-mono); font-size:12px; text-transform:uppercase }
.fin-hist-svg{ display:block; width:100%; height:auto; touch-action:pan-y; margin-top:4px }
.fin-hist-svg .guia{ stroke:var(--borde-s); stroke-width:1 }
.fin-hist-svg .cero{ stroke:var(--borde); stroke-width:1 }
.fin-hist-svg .eje{ font-family:var(--f-mono); font-size:10px; fill:var(--tx3) }
.fin-hist-svg g.activo rect[fill]:not([fill="transparent"]){ filter:brightness(1.08) }
.fin-hist-total{ fill:none; stroke:var(--tx); stroke-width:2; stroke-linejoin:round; pointer-events:none }
.fin-hist-punto{ fill:var(--tx); stroke:var(--sup); stroke-width:2; pointer-events:none }
.fin-hist-ver{ margin-top:8px }
.fin-hist-tabla{ max-height:360px }
.fin-hist-tabla th.num{ text-align:right }

/* ── Los traspasos de 300 € que se perdió Fintonic (TraspasosPerdidos.tsx) ── */

/* ══ Previsión (Finanzas.tsx · vPrevision, prevision.ts) ══ */
.fin-prev{ display:flex; flex-direction:column; gap:14px }
.fin-prev-dos{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px }
@media (min-width:900px){ .fin-prev-dos{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
.fin-prev-dia{ font-family:var(--f-mono); font-size:11px; color:var(--tx3) }
.fin-prev-cifras{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px }
.fin-prev-cifras > div{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.fin-prev-cifras small{ font-size:12px; color:var(--tx3) }
.fin-prev-cifras .pos .sis-cifra-v b{ color:var(--ok) }
.fin-prev-cifras .neg .sis-cifra-v b{ color:var(--error) }
.fin-prev-avance{ height:6px; border-radius:3px; background:var(--sup2); overflow:hidden; margin-top:4px }
.fin-prev-avance i{ display:block; height:100%; background:var(--area); border-radius:3px }
.fin-prev-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.fin-prev-lista + .fin-prev-lista{ margin-top:6px; padding-top:6px; border-top:1px dashed var(--borde-s) }
.fin-prev-pend{ display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:10px; align-items:center; padding:7px 0 }
.fin-prev-pend + .fin-prev-pend{ border-top:1px solid var(--borde-s) }
.fin-prev-pend .dia{ display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--sup2); font:600 13px var(--f-mono); color:var(--tx2) }
.fin-prev-pend .dia.mes{ font-size:10.5px; text-transform:uppercase }
.fin-prev-pend.tarde .dia{ background:var(--aviso-suave); color:var(--aviso-tx) }
.fin-prev-pend .txt{ min-width:0 }
.fin-prev-pend .txt b{ display:block; font-weight:500; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fin-prev-pend .txt small{ font-size:12px; color:var(--tx3) }
.fin-prev-pend em, .fin-prev-resto em{ font-style:normal; font-family:var(--f-mono); font-weight:600; font-size:13px; white-space:nowrap }
.fin-prev em.pos{ color:var(--ok) }
.fin-prev em.neg{ color:var(--tx) }
.fin-prev-resto{ display:flex; justify-content:space-between; gap:10px; margin:8px 0 0; padding-top:8px; border-top:1px dashed var(--borde-s); font-size:13px; color:var(--tx2) }
.fin-prev-cats{ display:flex; flex-direction:column; gap:8px }
.fin-prev-cat{ display:grid; grid-template-columns:minmax(0,9em) minmax(0,1fr) auto; gap:10px; align-items:center }
.fin-prev-cat .nom{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fin-prev-cat .pista{ position:relative; height:10px; border-radius:5px; background:var(--sup2) }
.fin-prev-cat .pista i{ position:absolute; left:0; top:0; bottom:0; border-radius:5px }
.fin-prev-cat .pista i.previsto{ background:var(--area); opacity:.25 }
.fin-prev-cat .pista i.real{ background:var(--area) }
.fin-prev-cat b{ font-family:var(--f-mono); font-size:12px; font-weight:600; white-space:nowrap }
.fin-prev-cat b small{ font-weight:500; color:var(--tx3) }
/* El año: los meses previstos, más claros y con la barra rayada. */
.fin-prev-tira{ margin-top:12px; cursor:default }
.fin-prev-tira .fin-mes-barra{ cursor:default }
.fin-prev-tira .fin-mes-barra.prev .pista i{ opacity:.45; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px) }
.fin-prev-tira .fin-mes-barra.prev .mes{ opacity:.7 }
.fin-prev-tira .mes sup{ color:var(--acento); margin-left:1px }
.fin-franja-leyenda i.prev{ background:var(--tx2); opacity:.45; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.6) 0 2px, transparent 2px 4px); margin-left:8px }
.fin-prev-notas{ list-style:none; margin:10px 0 0; padding:0; font-size:12.5px; color:var(--tx2); display:flex; flex-direction:column; gap:3px }
@media (max-width:599px){ .fin-prev-cifras{ grid-template-columns:repeat(2, minmax(0,1fr)) } .fin-prev-cifras > div:last-child{ grid-column:1 / -1 } }

.fin-prev-pend:has(.fin-prev-x){ grid-template-columns:34px minmax(0,1fr) auto 26px }
.fin-prev-x{ width:26px; height:26px; border:0; border-radius:50%; background:none; color:var(--tx3); cursor:pointer; font-size:13px; opacity:.55 }
.fin-prev-x:hover, .fin-prev-x:focus-visible{ opacity:1; background:var(--sup2); color:var(--error) }
.fin-prev-viajes{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--borde-s) }
.fin-prev-viajes p{ margin:0 0 8px; font-size:13px; color:var(--tx2) }
.fin-prev-viajes-meses{ display:flex; flex-wrap:wrap; gap:8px }
.fin-prev-viajes-meses label{ display:flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid var(--borde-s); border-radius:10px; background:var(--sup) }
.fin-prev-viajes-meses span{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; color:var(--tx3) }
.fin-prev-viajes-meses input{ width:72px; height:28px; border:0; background:transparent; font:600 14px var(--f-mono); color:var(--tx); text-align:right }
.fin-prev-viajes-meses small{ color:var(--tx3) }
.fin-prev-nueva{ grid-template-columns:34px minmax(0,1fr) auto }
.fin-prev-anadir{ display:flex; align-items:center; gap:6px }
.fin-prev-anadir input{ width:52px; height:30px; border:1px solid var(--borde); border-radius:8px; text-align:center; font:600 13px var(--f-mono) }
.fin-prev-anadir small{ font-size:12px; color:var(--tx3) }
@media (max-width:599px){ .fin-prev-nueva{ grid-template-columns:34px minmax(0,1fr) } .fin-prev-anadir{ grid-column:2 } }
.fin-prev-alta{ display:grid; grid-template-columns:minmax(0,1fr) 100px 80px; gap:8px; margin-top:10px }
.fin-prev-alta input{ height:36px; border:1px solid var(--borde); border-radius:8px; padding:0 10px; font:inherit; font-size:14px }
.fin-prev-alta .sis-acciones{ grid-column:1 / -1; justify-content:flex-end }
@media (max-width:599px){ .fin-prev-alta{ grid-template-columns:1fr 1fr } .fin-prev-alta input:first-child{ grid-column:1 / -1 } }

/* Previsión, reorganizada (20/10/2026): el año arriba, el mes elegido debajo */
.fin-prev-tira .fin-mes-barra{ cursor:pointer }
.fin-prev-tira .fin-mes-barra.on{ background:var(--sup2) }
.fin-prev-tira .fin-mes-barra.on .mes{ color:var(--tx); font-weight:700 }
.fin-prev-tira .fin-mes-barra.on .pista i.gasto{ background:var(--tx2) }
.fin-prev-tira .fin-mes-barra:not(.on) .pista i{ opacity:.55 }
.fin-prev-aviso{ margin:8px 0 0; font-size:13px; color:var(--tx2) }
.fin-prev-cats{ margin-top:12px }
.fin-prev-cats-cab{ display:grid; grid-template-columns:minmax(0,9em) minmax(0,1fr) auto; gap:10px; font-family:var(--f-mono); font-size:10.5px; color:var(--tx3); text-align:right }
.fin-prev-cat.viajes{ padding:4px 0 }
.fin-prev-rango{ -webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; margin:0; cursor:pointer }
.fin-prev-rango::-webkit-slider-runnable-track{ height:10px; border-radius:5px; background:linear-gradient(to right, var(--acento) 0 var(--lleno, 0%), var(--sup2) var(--lleno, 0%) 100%); border:1px solid var(--borde-s) }
.fin-prev-rango::-moz-range-track{ height:10px; border-radius:5px; background:var(--sup2); border:1px solid var(--borde-s) }
.fin-prev-rango::-moz-range-progress{ height:10px; border-radius:5px; background:var(--acento) }
.fin-prev-rango::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px; margin-top:-7px; border-radius:50%; background:#fff; border:2px solid var(--acento); box-shadow:0 2px 6px rgba(27,42,65,.25) }
.fin-prev-rango::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--acento); box-shadow:0 2px 6px rgba(27,42,65,.25) }
.fin-prev-rango:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; border-radius:6px }
.fin-prev-origen{ border:1px solid var(--borde-s); border-radius:var(--r-l); background:var(--sup); padding:10px 16px }
.fin-prev-origen > summary{ cursor:pointer; font-size:13px; color:var(--tx2); padding:4px 0 }
.fin-prev-origen[open] > summary{ margin-bottom:10px }
.fin-prev-origen .fin-prev-dos{ margin-bottom:8px }