/* Tablero · Resumen. Solo tokens de :root (estilos.css); cada mezcla lleva antes un respaldo con el token puro. */

/* ---------- Contenedor ---------- */
.rs { display: flex; flex-direction: column; gap: var(--e-3); margin-top: var(--e-4); }
.rs-cab { display: flex; flex-direction: column; gap: var(--e-1); }
.rs-cab h2 { margin: 0; font-family: var(--fuente-titulos); font-size: 22px; line-height: 1.2; color: var(--texto); }
.rs-cab p { margin: 0; font-size: 16px; color: var(--texto-suave); }
.rs-conclusion { margin: 0; font-family: var(--fuente-titulos); font-size: 20px; line-height: 1.25; color: var(--texto); }
.rs-nota { margin: 0; font-size: 16px; color: var(--texto-suave); }

/* ---------- KPIs ---------- */
.rs-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
@media (min-width: 720px) { .rs-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); } }
.rs-kpi {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1);
  min-height: var(--toque); min-width: 0; padding: var(--e-3);
  text-align: left; font: inherit; color: var(--texto);
  background: var(--tarjeta); border: 1px solid var(--borde-suave); border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-1); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-corta) var(--ease), box-shadow var(--dur-corta) var(--ease);
}
.rs-kpi:active { transform: scale(.97); box-shadow: var(--sombra-2); }
.rs-kpi:focus-visible { outline: 3px solid var(--color-secundario); outline-offset: 2px; }
.rs-kpi-titulo { font-size: 14px; line-height: 1.2; color: var(--texto-suave); }
.rs-kpi-valor {
  max-width: 100%; font-family: var(--fuente-numeros); font-variant-numeric: tabular-nums;
  font-size: clamp(16px, 5.2vw, 22px); font-weight: 700; line-height: 1.15; color: var(--texto);
  overflow-wrap: anywhere;
}
.rs-kpi-nota { font-size: 14px; line-height: 1.25; color: var(--texto-suave); }
.rs-flecha { font-weight: 700; color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-flecha.malo { color: var(--error); }
.rs-flecha.bueno { color: var(--color-primario); }
.rs-flecha.bueno { color: color-mix(in srgb, var(--color-primario) 80%, var(--exito-texto)); }
.rs-flecha.neutro { color: var(--texto-suave); }

/* Minigráfica (en el KPI) */
.minigrafica { display: block; width: 100%; max-width: 120px; height: 32px; }
.g-mini-linea { fill: none; stroke: var(--texto-suave); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.g-mini-area { fill: var(--pista); stroke: none; }
.g-mini-area { fill: color-mix(in srgb, var(--texto-suave) 15%, transparent); }
.g-mini-punto { fill: var(--texto-suave); stroke: var(--tarjeta); stroke-width: 1; }
.mini-malo .g-mini-linea { stroke: var(--error); }
.mini-malo .g-mini-punto { fill: var(--error); }
.mini-malo .g-mini-area { fill: var(--error-fondo); }
.mini-malo .g-mini-area { fill: color-mix(in srgb, var(--error) 14%, transparent); }
.mini-bueno .g-mini-linea { stroke: var(--color-primario); }
.mini-bueno .g-mini-punto { fill: var(--color-primario); }
.mini-bueno .g-mini-area { fill: var(--exito-fondo); }
.mini-bueno .g-mini-area { fill: color-mix(in srgb, var(--color-primario) 14%, transparent); }
.mini-neutro .g-mini-linea { stroke: var(--texto-suave); }
.mini-neutro .g-mini-punto { fill: var(--texto-suave); }

/* ---------- Gráfica de líneas ---------- */
.rs-grafica {
  position: relative; min-width: 0; padding: var(--e-3);
  background: var(--tarjeta); border: 1px solid var(--borde-suave); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-1);
}
.rs-grafica-desliza { overflow-x: auto; overflow-y: hidden; max-width: 100%; -webkit-overflow-scrolling: touch; }
.g-resumen { max-width: none; }
.g-rejilla { stroke: var(--borde-suave); stroke-width: 1; }
.g-linea-real { fill: none; stroke: var(--color-primario); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g-linea-ppto { fill: none; stroke: var(--color-secundario); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.g-punto-real { fill: var(--tarjeta); stroke: var(--color-primario); stroke-width: 2; }
.g-punto-ppto { fill: var(--color-secundario); }
.g-area-real { fill: var(--pista); stroke: none; }
.g-area-real { fill: color-mix(in srgb, var(--color-primario) 10%, transparent); }
.rs-grafica .g-proyeccion { fill: none; stroke: var(--color-primario); stroke-width: 3; stroke-dasharray: 6 5; stroke-linecap: round; }
.rs-grafica .g-proyeccion-punto { fill: var(--tarjeta); stroke: var(--color-primario); stroke-width: 2.5; }
.g-linea-fondo {
  fill: var(--texto-suave); stroke: var(--borde-medio); stroke-width: 1.25; opacity: .8; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke-width var(--dur-corta) var(--ease), opacity var(--dur-corta) var(--ease);
}
polyline.g-linea-fondo { fill: none; }
.g-linea-fondo { stroke: color-mix(in srgb, var(--texto-suave) 45%, transparent); }
.g-linea-fondo.iluminada, .g-linea-fondo.g-linea-activa { stroke: var(--texto-suave); stroke-width: 2.5; opacity: 1; }
.rs-trazo-0 { stroke: var(--color-primario); fill: var(--color-primario); }
.rs-trazo-1 { stroke: var(--color-primario); fill: var(--color-primario); }
.rs-trazo-1 { stroke: color-mix(in srgb, var(--color-primario) 70%, var(--tarjeta)); fill: color-mix(in srgb, var(--color-primario) 70%, var(--tarjeta)); }
.rs-trazo-2 { stroke: var(--color-secundario); fill: var(--color-secundario); }
.rs-trazo-3 { stroke: var(--color-primario); fill: var(--color-primario); }
.rs-trazo-3 { stroke: color-mix(in srgb, var(--color-primario) 45%, var(--tarjeta)); fill: color-mix(in srgb, var(--color-primario) 45%, var(--tarjeta)); }
.rs-trazo-4 { stroke: var(--color-secundario); fill: var(--color-secundario); }
.rs-trazo-4 { stroke: color-mix(in srgb, var(--color-secundario) 65%, var(--tarjeta)); fill: color-mix(in srgb, var(--color-secundario) 65%, var(--tarjeta)); }
.rs-trazo-5 { stroke: var(--color-primario); fill: var(--color-primario); }
.rs-trazo-5 { stroke: color-mix(in srgb, var(--color-primario) 25%, var(--tarjeta)); fill: color-mix(in srgb, var(--color-primario) 25%, var(--tarjeta)); }
.rs-trazo-6 { stroke: var(--color-secundario); fill: var(--color-secundario); }
.rs-trazo-6 { stroke: color-mix(in srgb, var(--color-secundario) 35%, var(--tarjeta)); fill: color-mix(in srgb, var(--color-secundario) 35%, var(--tarjeta)); }
polyline[class*="rs-trazo-"] { fill: none; }
.g-linea-fondo[class*="rs-trazo-"] { stroke-width: 2; opacity: 1; }
.g-linea-fondo[class*="rs-trazo-"].iluminada, .g-linea-fondo[class*="rs-trazo-"].g-linea-activa { stroke-width: 3.5; }
.g-linea-toque { fill: none; stroke: transparent; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; cursor: pointer; }
.g-linea-toque:focus-visible { outline: 3px solid var(--color-secundario); outline-offset: 2px; }
.g-columna-mes { fill: transparent; cursor: pointer; transition: fill var(--dur-corta) var(--ease); }
.g-columna-mes:hover, .g-columna-mes:focus { fill: var(--relleno); outline: none; }
.g-columna-mes:hover, .g-columna-mes:focus { fill: color-mix(in srgb, var(--color-primario) 6%, transparent); }
.g-columna-mes:focus-visible { stroke: var(--color-secundario); stroke-width: 3; }

/* ---------- Dónde se va ---------- */
.g-fila-donde { cursor: pointer; outline: none; }
.rs-grafica .g-fila-donde.g-quieta { cursor: default; }
.rs-grafica .g-fila-donde:hover .g-zona, .rs-grafica .g-fila-donde:focus .g-zona { fill: var(--relleno); }
.rs-grafica .g-fila-donde:focus-visible .g-zona { stroke: var(--color-secundario); stroke-width: 3; }
.g-barra-donde { fill: var(--color-primario); transition: fill var(--dur-corta) var(--ease); }
.g-fila-activa .g-barra-donde { fill: var(--color-secundario); }

/* ---------- Interruptores y chips ---------- */
.rs-interruptor { display: inline-flex; max-width: 100%; border: 1px solid var(--borde-medio); border-radius: var(--r-pildora); background: var(--relleno); padding: 2px; gap: 2px; }
.rs-interruptor button {
  min-height: var(--toque); padding: 0 var(--e-4); font: inherit; font-size: 16px; white-space: nowrap;
  color: var(--texto); background: transparent; border: 0; border-radius: var(--r-pildora); cursor: pointer;
  transition: background var(--dur-corta) var(--ease), transform var(--dur-corta) var(--ease);
}
.rs-interruptor button:active { transform: scale(.97); }
.rs-interruptor button[aria-pressed="true"], .rs-interruptor button.activo { background: var(--color-primario); color: var(--sobre-primario); box-shadow: var(--sombra-1); }
.rs-interruptor button:focus-visible { outline: 3px solid var(--color-secundario); outline-offset: 2px; }
.rs-chips { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); }
.rs-chip {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--h-chip); max-width: 100%; padding: 0 var(--e-4);
  font: inherit; font-size: 16px; white-space: nowrap; text-align: left; color: var(--texto);
  background: var(--tarjeta); border: 1px solid var(--borde-medio); border-radius: var(--r-pildora); cursor: pointer;
  transition: background var(--dur-corta) var(--ease), transform var(--dur-corta) var(--ease), box-shadow var(--dur-corta) var(--ease);
}
.rs-chip-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-chip:active { transform: scale(.97); box-shadow: var(--sombra-2); }
.rs-chip:focus-visible { outline: 3px solid var(--color-secundario); outline-offset: 2px; }
.rs-chip-activa { background: var(--color-primario); color: var(--sobre-primario); border-color: var(--color-primario); box-shadow: var(--sombra-1); }
.rs-muestra { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 4px; background: var(--texto-suave); }
.rs-muestra-0 { background: var(--color-primario); }
.rs-muestra-1 { background: var(--color-primario); }
.rs-muestra-1 { background: color-mix(in srgb, var(--color-primario) 70%, var(--tarjeta)); }
.rs-muestra-2 { background: var(--color-secundario); }
.rs-muestra-3 { background: var(--color-primario); }
.rs-muestra-3 { background: color-mix(in srgb, var(--color-primario) 45%, var(--tarjeta)); }
.rs-muestra-4 { background: var(--color-secundario); }
.rs-muestra-4 { background: color-mix(in srgb, var(--color-secundario) 65%, var(--tarjeta)); }
.rs-muestra-5 { background: var(--color-primario); }
.rs-muestra-5 { background: color-mix(in srgb, var(--color-primario) 25%, var(--tarjeta)); }
.rs-muestra-6 { background: var(--color-secundario); }
.rs-muestra-6 { background: color-mix(in srgb, var(--color-secundario) 35%, var(--tarjeta)); }

/* ---------- Lectura y filtro ---------- */
.rs-lectura { min-height: 48px; margin: 0; font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--texto); }
.rs-filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.rs-filtro {
  display: inline-block; min-height: var(--h-chip); max-width: 100%; padding: 0 var(--e-4);
  font: inherit; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
  color: var(--texto); background: var(--tarjeta); border: 1px solid var(--color-secundario); border-radius: var(--r-pildora); cursor: pointer;
  transition: transform var(--dur-corta) var(--ease), box-shadow var(--dur-corta) var(--ease);
}
.rs-filtro:active { transform: scale(.97); box-shadow: var(--sombra-2); }
.rs-filtro:focus-visible { outline: 3px solid var(--color-secundario); outline-offset: 2px; }

/* ---------- Plegado en teléfono ---------- */
.rs-vermas {
  width: 100%; min-height: var(--toque); font: inherit; font-size: 16px; color: var(--color-primario);
  background: var(--tarjeta); border: 1px solid var(--borde-medio); border-radius: var(--r-tarjeta); cursor: pointer;
  transition: transform var(--dur-corta) var(--ease);
}
.rs-vermas:active { transform: scale(.97); }
.rs-vermas:focus-visible { outline: 3px solid var(--color-secundario); outline-offset: 2px; }
@media (min-width: 720px) { .rs-vermas { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .rs-kpi, .rs-chip, .rs-filtro, .rs-vermas, .rs-interruptor button, .g-linea-fondo, .g-columna-mes, .g-barra-donde { transition: none; }
  .rs-kpi:active, .rs-chip:active, .rs-filtro:active, .rs-vermas:active, .rs-interruptor button:active { transform: none; }
}

/* ---------- Leyenda y encabezado del detalle ---------- */
.rs-leyenda { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); font-size: 14px; color: var(--texto-suave); }
.rs-ley::before { content: ''; display: inline-block; width: 18px; margin-right: var(--e-1); vertical-align: middle; border-top: 3px solid var(--color-primario); }
.rs-ley-ppto::before { border-top-color: var(--color-secundario); }
.rs-ley-proy::before { border-top-style: dashed; }
.rs-detalle { margin: 0; font-family: var(--fuente-titulos); font-size: 22px; line-height: 1.2; color: var(--texto); }
.rs-plegable { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
@media (max-width: 719.98px) { .rs-plegable:not(.abierto) { display: none; } }

/* ---------- Ronda 3: proporciones (cada cuadro mide lo que su contenido necesita) ---------- */
/* El cuadro se arma en rejilla: título y valor a la izquierda; la minigráfica (solo en pantalla ancha) a su derecha. La flecha puede bajar de renglón dentro del cuadro. */
.rs-kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: start; gap: 2px var(--e-2); padding: var(--e-3); }
.rs-kpi > * { grid-column: 1 / -1; min-width: 0; }
.rs-kpi .rs-kpi-titulo, .rs-kpi .rs-kpi-valor { grid-column: 1; }
.rs-kpi .rs-flecha { white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.25; }
.rs-kpi .minigrafica { display: none; }
@media (min-width: 1100px) {
  .rs-kpi .minigrafica { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: end; width: 72px; max-width: 72px; height: 24px; }
  .rs-kpi .rs-flecha { font-size: 14px; }
}