/* ===================== Tarjetas KPI «v2» (08-oct-2026) =====================
   Pedido de Jose: «una mejora en todos los cards de las opciones, puedes replicar lo de HFC que están muy buenos».
   Copia de /opt/hfc/css/kpi-v2.css (solo la parte de tarjetas). Se aplica con la clase .kpi-v2 en las tiras
   .kpi-strip de Diario, Intervalos, Supervisores, Asesores, Horas y Reporte Cliente › Agentes.
   Cada tarjeta va suelta con borde, franja de color a la izquierda y un ícono de línea en recuadro (kpiIco(), 02-engine.js).
   Toma el color de su estado (en meta / atención / fuera de meta). Al pasar el mouse sube, el borde toma su color, la cifra
   crece y las demás se atenúan. «Reducir movimiento» apaga el desplazamiento. */
.kpi-strip.kpi-v2{
  gap:12px;background:transparent;border:0;border-radius:0;overflow:visible;
  grid-template-columns:repeat(auto-fill,minmax(205px,1fr));
}
.kpi-v2 .kpi-card{
  --kc:var(--accent2-ink);
  position:relative;overflow:hidden;min-width:0;cursor:default;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:13px 15px 12px 18px;box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease, background .18s ease;
}
.kpi-v2 .kpi-card:has(.kv.v), .kpi-v2 .kpi-card:has(.kv.verde){--kc:var(--good)}
.kpi-v2 .kpi-card:has(.kv.a){--kc:var(--warn)}
.kpi-v2 .kpi-card:has(.kv.r), .kpi-v2 .kpi-card:has(.kv.rojo){--kc:var(--bad)}
.kpi-v2 .kpi-card:has(.kv.cat){--kc:var(--accent-ink)}
.kpi-v2 .kpi-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc);transition:width .18s ease;
}
.kpi-v2 .kpi-card:hover{
  transform:translateY(-4px);z-index:2;background:var(--surface);
  border-color:color-mix(in srgb,var(--kc) 60%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--kc) 16%,transparent), 0 14px 30px rgba(0,0,0,.28);
}
body.day .kpi-v2 .kpi-card{box-shadow:0 1px 2px rgba(30,30,30,.06)}
body.day .kpi-v2 .kpi-card:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--kc) 16%,transparent), 0 14px 30px rgba(30,30,30,.12)}
.kpi-v2 .kpi-card:hover::before{width:5px}
.kpi-v2:hover .kpi-card:not(:hover){opacity:.6}

/* encabezado: ícono en recuadro + rótulo en tipografía normal (antes mono y mayúsculas) */
.kpi-v2 .kpi-card .kl{
  font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.005em;text-transform:none;
  color:var(--text);margin-bottom:8px;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi-v2 .kpi-card .ico{
  width:26px;height:26px;border-radius:8px;flex:0 0 26px;display:grid;place-items:center;opacity:1;font-size:13px;
  background:color-mix(in srgb,var(--kc) 16%,transparent);color:var(--kc);
}
.kpi-v2 .kpi-card .ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* cifra: sans con números tabulares; crece al pasar el mouse (se redibuja nítida, no se escala) */
.kpi-v2 .kpi-card .kv{
  font-family:var(--sans);font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1.1;
  font-variant-numeric:tabular-nums;transition:font-size .18s ease, text-shadow .18s ease;
}
.kpi-v2 .kpi-card:hover .kv{font-size:28.5px;text-shadow:0 0 18px color-mix(in srgb,var(--kc) 35%,transparent)}
.kpi-v2 .kpi-card .ks{font-family:var(--sans);font-size:11.5px;margin-top:4px}

@media (prefers-reduced-motion:reduce){ .kpi-v2 .kpi-card,.kpi-v2 .kpi-card:hover{transform:none} }
@media (max-width:640px){ .kpi-strip.kpi-v2{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .kpi-v2 .kpi-card .kv{font-size:22px} .kpi-v2 .kpi-card:hover .kv{font-size:22px} }

/* Modo TV: las tarjetas conservan su tamaño de cifra grande */
body.tv-on .kpi-v2 .kpi-card .kv{font-size:30px}

/* Alto parejo (08-oct-2026). Jose: «los cards se ven desalineados; cuando pongo todas parece que aumentan su tamaño, si elijo una
   fecha parece que se achica». Todas las tarjetas de una tira miden lo mismo (la fila más alta manda), el minigráfico de Diario
   va siempre al pie (no baja cuando el texto ocupa 2 líneas) y % Retención reserva sus 4 líneas aunque diga «Sin datos», para
   que la tira no crezca ni se achique al cambiar la fecha. */
.kpi-strip.kpi-v2{grid-auto-rows:1fr}
.kpi-v2 .kpi-card{display:flex;flex-direction:column}
.kpi-v2 .kpi-card .spk-row{margin-top:auto;padding-top:8px}
.kpi-v2 .kpi-card.kpi-reten .ks{min-height:calc(4 * 1.4em)}
@media (max-width:640px){ .kpi-v2 .kpi-card.kpi-reten .ks{min-height:calc(5 * 1.4em)} }

/* ===================== Retenciones y Reporte Cliente › Resumen (08-oct-2026) =====================
   Jose: «aplica las tarjetas kpi-v2 también en Retenciones y Resumen». Las tarjetas siguen siendo .ret-tile (la usan los
   minigráficos y «Compartir»), pero dentro de .ret-tiles.kpi-v2 toman el aspecto kpi-v2: dejan el bloque de color sólido y
   llevan su color de siempre en la franja, el ícono y la cifra. El minigráfico toma el color de la cifra (spkFila, 04-diario.js). */
.ret-tiles.kpi-v2{gap:12px;grid-auto-rows:1fr}
.kpi-v2 .ret-tile{
  --kc:#4e9bd8;
  position:relative;overflow:hidden;min-width:0;display:flex;flex-direction:column;
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;
  padding:13px 15px 12px 18px;box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}
.kpi-v2 .ret-tile:is(.cant,.vol){--kc:#4e9bd8}
.kpi-v2 .ret-tile.ret{--kc:#38b887}
.kpi-v2 .ret-tile:is(.noret,.alerta){--kc:#e5675c}
.kpi-v2 .ret-tile.tipif{--kc:#a38bda}
.kpi-v2 .ret-tile.tiempo{--kc:#dca452}
.kpi-v2 .ret-tile.retencion{--kc:#d982a2}
.kpi-v2 .ret-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc);transition:width .18s ease}
.kpi-v2 .ret-tile:hover{
  transform:translateY(-4px);z-index:2;
  border-color:color-mix(in srgb,var(--kc) 60%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--kc) 16%,transparent), 0 14px 30px rgba(0,0,0,.28);
}
.kpi-v2 .ret-tile:hover::before{width:5px}
.ret-tiles.kpi-v2:hover .ret-tile:not(:hover){opacity:.6}
body.day .kpi-v2 .ret-tile{box-shadow:0 1px 2px rgba(30,30,30,.06)}
body.day .kpi-v2 .ret-tile:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--kc) 16%,transparent), 0 14px 30px rgba(30,30,30,.12)}

.kpi-v2 .ret-tile .rt-l{
  font-family:var(--sans);font-size:12.5px;font-weight:650;letter-spacing:.005em;text-transform:none;opacity:1;
  color:var(--text);margin-bottom:8px;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi-v2 .ret-tile .rt-ico{
  width:26px;height:26px;border-radius:8px;flex:0 0 26px;display:grid;place-items:center;font-size:13px;
  background:color-mix(in srgb,var(--kc) 16%,transparent);color:var(--kc);
}
.kpi-v2 .ret-tile .rt-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kpi-v2 .ret-tile .rt-v{
  font-family:var(--sans);font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1.1;color:var(--kc);
  font-variant-numeric:tabular-nums;transition:font-size .18s ease, text-shadow .18s ease;
}
body.day .kpi-v2 .ret-tile .rt-v{color:color-mix(in srgb,var(--kc) 70%,#000)}
.kpi-v2 .ret-tile:hover .rt-v{font-size:28.5px;text-shadow:0 0 18px color-mix(in srgb,var(--kc) 35%,transparent)}
.kpi-v2 .ret-tile .rt-p{font-family:var(--sans);font-size:14px;font-weight:700;opacity:1;color:var(--text);margin-top:2px}
.kpi-v2 .ret-tile .rt-proy{font-family:var(--sans);font-size:11.5px;font-weight:500;opacity:1;color:var(--muted);margin-top:5px}
.kpi-v2 .ret-tile .rt-proy b{color:var(--text);font-weight:700}
/* minigráfico al pie y chip de variación con los colores normales (verde / rojo / gris), ya no la píldora oscura */
.kpi-v2 .ret-tile .spk-row{margin-top:auto;padding-top:8px}
.kpi-v2 .ret-tile .spk-delta{font-size:9.5px;padding:2px 6px}
.kpi-v2 .ret-tile .spk-delta.spk-up{color:var(--good);background:var(--good-bg)}
.kpi-v2 .ret-tile .spk-delta.spk-down{color:var(--bad);background:var(--bad-bg)}
.kpi-v2 .ret-tile .spk-delta.spk-neutro{color:var(--muted);background:var(--surface3)}
@media (prefers-reduced-motion:reduce){ .kpi-v2 .ret-tile,.kpi-v2 .ret-tile:hover{transform:none} }
@media (max-width:640px){ .ret-tiles.kpi-v2{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .kpi-v2 .ret-tile .rt-v,.kpi-v2 .ret-tile:hover .rt-v{font-size:22px} }

/* ===================== Tarjeta compacta en una sola fila (08-oct-2026) =====================
   Jose: «no me gusta, pusiste los cards en dos filas; era achicar el espacio y el card mismo para que entren todos en una
   misma fila» → eligió «tarjeta compacta en una sola fila» (cifra más chica, sin el texto de abajo, que pasa al tooltip).
   Toda tira kpi-v2 va en UNA fila (grid-auto-flow:column, cada tarjeta 1fr). En la tarjeta: rótulo en 2 líneas como máximo,
   cifra que se adapta al ancho (unidades de contenedor cqi), minigráfico al pie; se ocultan el texto de abajo (.ks, .rt-p,
   .rt-proy) y el chip de variación: js/26-kpi-compactas.js los pone en el title (al pasar el mouse).
   Celular (≤ 640 px): 2 por fila con la tarjeta completa. «Compartir» saca la tarjeta completa (clase .kpi-captura, 24-compartir.js). */
.kpi-strip.kpi-v2,.ret-tiles.kpi-v2{
  grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;grid-auto-rows:auto;gap:6px;
}
.kpi-v2 :is(.kpi-card,.ret-tile){container-type:inline-size;padding:10px 10px 9px 13px;border-radius:12px;min-height:0}
.kpi-v2 .kpi-card .kl,.kpi-v2 .ret-tile .rt-l{
  display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:6px;margin-bottom:6px;
  font-size:11px;line-height:1.2;white-space:normal;text-overflow:clip;max-height:calc(2.4em + 2px);overflow:hidden;
}
.kpi-v2 .kpi-card .ico,.kpi-v2 .ret-tile .rt-ico{width:20px;height:20px;flex:none;border-radius:6px}
.kpi-v2 :is(.kpi-card .ico,.ret-tile .rt-ico) svg{width:12px;height:12px}
.kpi-v2 .kpi-card .kv,.kpi-v2 .ret-tile .rt-v,
.kpi-v2 .kpi-card:hover .kv,.kpi-v2 .ret-tile:hover .rt-v{
  font-size:clamp(12px,17cqi,22px);letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:clip;
}
/* Tarjeta muy angosta (≈ 10 tarjetas en una PC de 1280–1366 px): sin ícono, el rótulo usa todo el ancho. La franja de
   color sigue indicando el estado. */
@container (max-width:110px){
  .kpi-v2 .kpi-card .kl,.kpi-v2 .ret-tile .rt-l{grid-template-columns:minmax(0,1fr)}
  .kpi-v2 .kpi-card .ico,.kpi-v2 .ret-tile .rt-ico{display:none}
}
.kpi-v2 .kpi-card .ks,.kpi-v2 .ret-tile :is(.rt-p,.rt-proy),.kpi-v2 .spk-delta{display:none}
.kpi-v2 :is(.kpi-card,.ret-tile) .spk-row{margin-top:auto;padding-top:6px}
.kpi-v2 :is(.kpi-card,.ret-tile) .spk{height:20px}
body.tv-on .kpi-v2 .kpi-card .kv{font-size:clamp(16px,20cqi,30px)}

/* Formato HFC dentro de la fila (08-oct-2026). Jose: «que sean muy parecidas a las etiquetas de HFC, quizá más pegadas uno del
   otro para que entren todos». Espacio 8 → 6 px. Cuando la tarjeta tiene ≥ 112 px de ancho útil (~135 px por fuera) (pantallas anchas o tiras con
   pocas tarjetas) vuelve lo que muestra HFC: ícono en recuadro, cifra más grande, el texto de abajo (hasta 3 líneas) y la
   variación junto al minigráfico. Más angosta sigue compacta (detalle en el tooltip). */
@container (min-width:112px){
  .kpi-v2 .kpi-card .kl,.kpi-v2 .ret-tile .rt-l{grid-template-columns:24px minmax(0,1fr);font-size:12px;gap:7px}
  .kpi-v2 .kpi-card .ico,.kpi-v2 .ret-tile .rt-ico{width:24px;height:24px;border-radius:7px}
  .kpi-v2 :is(.kpi-card .ico,.ret-tile .rt-ico) svg{width:14px;height:14px}
  .kpi-v2 .kpi-card .kv,.kpi-v2 .ret-tile .rt-v,
  .kpi-v2 .kpi-card:hover .kv,.kpi-v2 .ret-tile:hover .rt-v{font-size:clamp(16px,16cqi,26px)}
  .kpi-v2 .kpi-card .ks,.kpi-v2 .ret-tile .rt-proy{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
    font-size:10.5px;line-height:1.35;margin-top:3px;
  }
  .kpi-v2 .ret-tile .rt-p{display:block;font-size:12px;margin-top:1px}
  .kpi-v2 .spk-delta{display:inline-block;font-size:9px;padding:1px 4px}
}
/* Celular: 2 por fila con la tarjeta completa (como antes) */
@media (max-width:640px){
  .kpi-strip.kpi-v2,.ret-tiles.kpi-v2{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto}
  .kpi-v2 .kpi-card .ks,.kpi-v2 .ret-tile :is(.rt-p,.rt-proy),.kpi-v2 .spk-delta{display:revert}
}
/* «Compartir» (24-compartir.js agrega .kpi-captura al documento clonado): tarjeta completa en varias filas */
.kpi-captura :is(.kpi-strip.kpi-v2,.ret-tiles.kpi-v2){grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));grid-auto-columns:auto}
.kpi-captura .kpi-v2 :is(.kpi-card .kl,.ret-tile .rt-l){max-height:none;white-space:nowrap}
.kpi-captura .kpi-v2 :is(.kpi-card .kv,.ret-tile .rt-v){font-size:26px;letter-spacing:-.5px;white-space:normal;overflow:visible;font-variant-numeric:normal}
.kpi-captura .kpi-v2 :is(.kpi-card,.ret-tile){container-type:normal;padding:13px 15px 12px 18px}
.kpi-captura .kpi-v2 .kpi-card .ks,.kpi-captura .kpi-v2 .ret-tile :is(.rt-p,.rt-proy),.kpi-captura .kpi-v2 .spk-delta{display:revert}