/* Estilos de _spark.html: era su <style> en línea. Se carga con un <link> en el mismo sitio. */
/* La celda de tendencia: estrecha y fija, para que la columna no baile entre
   filas ni le robe ancho a los importes, que son lo que se lee. */
th.tend-col, td.tend-col { width:76px; min-width:76px; text-align:center;
  padding-left:4px; padding-right:8px; }
th.tend-col { font-weight:600; white-space:nowrap; }

.spark { display:inline-block; line-height:0; cursor:pointer; border-radius:4px;
  padding:1px 2px; vertical-align:middle; }
.spark:hover, .spark:focus-visible { background:var(--hover); outline:none; }
.spark:focus-visible { box-shadow:var(--ring); }
/* Un color, no una paleta: la línea identifica una sola serie, así que va en el
   tono de de-énfasis y el acento se reserva para el mes que se está mirando. */
.spark .sp-l { fill:none; stroke:var(--muted); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; }
/* Mes todavía no cerrado: el trazo lo dice, no un asterisco en una nota al pie. */
.spark .sp-l.sp-abierto { stroke-dasharray:2.4 1.8; }
.spark .sp-cero { stroke:var(--line); stroke-width:.7; }
.spark .sp-p { fill:var(--chart-now); stroke:none; }
.spark .sp-p-abierto { fill:var(--card); stroke:var(--chart-now); stroke-width:1.3; }
/* El sentido del último mes, con la polaridad de la fila (ver el tag `spark`).
   Tono de TEXTO y no el pastel: a 2,4px de radio el pastel desaparece. */
.spark .sp-p.sp-p-bien { fill:var(--pos); }
.spark .sp-p.sp-p-mal { fill:var(--neg); }
.spark .sp-p-abierto.sp-p-bien { fill:var(--card); stroke:var(--pos); }
.spark .sp-p-abierto.sp-p-mal { fill:var(--card); stroke:var(--neg); }
/* En la barra del mes la línea cierra la fila de la variación, empujada a la
   derecha: acompaña a la cifra sin competir con ella. */
.pm-c-sp { margin-left:auto; line-height:0; }

/* --- Desglose de la ventana (uno, compartido) --- */
.sp-pop { position:absolute; z-index:85; background:var(--card); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--sombra); padding:11px 13px 9px; display:none; }
.sp-pop.abierto { display:block; }
.sp-pop-t { font-size:12px; font-weight:700; color:var(--ink); margin-bottom:1px;
  max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-pop-s { font-size:10.5px; color:var(--muted); margin-bottom:9px; }
/* Tres filas alineadas con la misma rejilla —importes, barras, meses— en vez de
   poner el importe dentro de cada columna: así los números se leen en una línea
   y una columna negativa no manda su etiqueta al otro extremo. */
.sp-vals, .sp-bars, .sp-labs { display:flex; gap:7px; }
.sp-vals > *, .sp-bars > *, .sp-labs > * { width:32px; }
.sp-b-v { font-size:10px; color:var(--pardo); text-align:center; white-space:nowrap;
  font-variant-numeric:tabular-nums; margin-bottom:4px; }
.sp-b-v.es-ult { color:var(--ink); font-weight:700; }
.sp-b { display:flex; flex-direction:column; }
.sp-b-p { display:flex; align-items:flex-end; }
.sp-b-n { display:flex; align-items:flex-start; }
.sp-b-r { width:100%; background:var(--muted); opacity:.42; border-radius:3px 3px 0 0; }
.sp-b-n .sp-b-r { border-radius:0 0 3px 3px; }
/* El mes que se está mirando lleva el acento; los anteriores son contexto. */
.sp-b.es-ult .sp-b-r { background:var(--chart-now); opacity:1; }
/* Mes abierto: contorno en vez de relleno — todavía puede moverse. */
.sp-b.es-abierto .sp-b-r { background:transparent; border:1.3px dashed var(--chart-now);
  opacity:1; }
.sp-cero-l { border:0; border-top:1px solid var(--line); margin:0; }
.sp-labs { margin-top:5px; }
.sp-lab { text-align:center; font-size:10px; color:var(--muted); }
.sp-lab.es-ult { color:var(--ink); font-weight:700; }
.sp-pop-n { font-size:10.5px; color:var(--muted); margin:8px 0 0; max-width:260px;
  line-height:1.35; }