/* El gráfico de bandas (ficha C12; js/vista/grafico.js): la tarjeta «Bandas salariales» y su lienzo SVG. Los estilos
   en línea de graficos/GraficoBandasLienzo y GraficoBandas de la maqueta (_ds_bundle.js, líneas 4119-4818), pasados a
   clases que leen los valores de tokens.css. Las reglas del lienzo solo nombran clases de dentro del SVG. */

/* ---- La tarjeta ---- */

.tarjeta-grafico {
  min-width: 0;
}

.tarjeta-grafico__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: 10px 14px 8px;
}

.tarjeta-grafico__titulos {
  flex: 1;
  min-width: 200px;
}

.tarjeta-grafico__titulo {
  margin: 0;
  font-size: var(--texto-l);
  font-weight: var(--peso-fuerte);
}

.tarjeta-grafico__subtitulo {
  margin-top: 1px;
  color: var(--texto-tenue);
  font-size: var(--texto-s);
}

.tarjeta-grafico__modos {
  display: flex;
  gap: 3px;
}

.tarjeta-grafico__leyenda {
  padding: 0 14px 8px;
}

.tarjeta-grafico__cuerpo {
  padding: 0 8px 8px;
}

/* ---- El lienzo en pantalla y su tooltip ---- */

.grafico-lienzo {
  position: relative;
  width: 100%;
  min-height: 120px;
}

.grafico__tooltip {
  position: absolute;
  z-index: 10;
  padding: 6px 9px;
  border-radius: var(--radio-chip);
  background: var(--tooltip-fondo);
  box-shadow: var(--sombra-flotante);
  color: var(--tooltip-texto);
  font-size: var(--texto-s);
  font-variant-numeric: var(--cifras);
  line-height: 1.45;
  white-space: nowrap;
  pointer-events: none;
}

.grafico__tooltip-titulo {
  margin-bottom: 2px;
  font-weight: var(--peso-fuerte);
}

/* ---- Acercar (T44): arriba a la derecha, el rótulo con «Vista completa», o la pista ---- */

.grafico-lienzo--arrastrando .lienzo-bandas {
  cursor: crosshair;
}

.grafico__acercado {
  position: absolute;
  top: 2px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 2px 0 2px var(--esp-2);
  border-radius: var(--radio-control);
  background: var(--superficie);
}

.grafico__acercado-texto {
  color: var(--texto-tenue);
  font-size: var(--texto-s);
  white-space: nowrap;
}

.grafico__pista {
  position: absolute;
  top: 4px;
  right: 24px;
  color: var(--texto-tenue);
  font-size: var(--texto-xs);
  pointer-events: none;
}

/* ---- El SVG: ejes ---- */

.lienzo-bandas {
  display: block;
  font-family: var(--fuente-interfaz);
  user-select: none;
  touch-action: none;
}

.lienzo-bandas__fondo {
  fill: var(--superficie);
  pointer-events: none;
}

.lienzo-bandas__rejilla {
  stroke: var(--borde);
}

.lienzo-bandas__eje {
  stroke: var(--borde-fuerte);
}

.lienzo-bandas__marca-y {
  fill: var(--texto-tenue);
  font-size: var(--texto-xs);
  font-variant-numeric: var(--cifras);
  text-anchor: end;
}

.lienzo-bandas__marca-x {
  fill: var(--texto-secundario);
  font-size: var(--texto-s);
  font-variant-numeric: var(--cifras);
  text-anchor: middle;
}

.lienzo-bandas__titulo-eje {
  fill: var(--texto-secundario);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.06em;
  text-anchor: middle;
}

/* ---- Capa 1: rectángulos de banda. Ingreso y Promoción sin relleno, pero con superficie de hover (regla 3);
   Crecimiento y Madurez comparten el gris claro y Mercado se distingue (regla 2). ---- */

.banda {
  stroke: none;
  pointer-events: all;
}

.banda--ninguno {
  fill: transparent;
}

.banda--clara {
  fill: var(--banda-clara);
}

.banda--mercado {
  fill: var(--banda-mercado);
}

.banda.banda--activa {
  stroke: var(--bigote);
  stroke-width: 1;
}

.banda--ninguno.banda--activa {
  fill: var(--superficie-hover);
}

/* ---- Capa 2: bigotes, de Ingreso Min a Promoción Max, con sus topes ---- */

.bigote {
  stroke: var(--bigote);
  stroke-width: var(--bigote-grosor);
  pointer-events: none;
}

/* ---- Capa 3: rombos. Relleno semitransparente para ver la acumulación y borde opaco del mismo tono, que da el 3:1
   de una marca (regla 4, P-195) ---- */

.rombo {
  stroke-width: 1;
}

.rombo--empleado {
  fill: var(--rombo-empleado);
  fill-opacity: var(--rombo-opacidad);
  stroke: var(--rombo-empleado);
}

.rombo--convencionado {
  fill: var(--rombo-convencionado);
  fill-opacity: var(--rombo-opacidad);
  stroke: var(--rombo-convencionado);
}

.rombo.rombo--activo {
  fill-opacity: 1;
  stroke: var(--texto);
}

/* ---- Capas 4 y 5: el P50 es un marcador suelto (continuo); P25 y P75, líneas discontinuas que unen los grados, sin
   tooltip propio (regla 5, HU-003.CA-21) ---- */

.mercado-p50 {
  stroke: var(--mercado-marcador);
  stroke-width: 2.5;
  pointer-events: none;
}

.mercado-p50.mercado-p50--activo {
  stroke-width: 3.5;
}

.mercado-p50__zona {
  fill: transparent;
  pointer-events: all;
}

.mercado-linea {
  fill: none;
  stroke: var(--mercado-marcador);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  pointer-events: none;
}

/* ---- El rectángulo del arrastre para acercar (T44) ---- */

.lienzo-bandas__seleccion {
  fill: var(--primario);
  fill-opacity: 0.08;
  stroke: var(--primario);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}