/* Cajas (tarjetas de cifras) con accion, para el ERP y el portal de clientes.
   Una caja con la clase "kpi-link" (o "mini-kpi") reacciona al mouse y al teclado: sube un poco,
   brilla con el color principal y muestra "Ver detalle →". Al hacer clic abre su detalle:
   lleva a su pantalla, con el filtro ya puesto cuando aplica (ver web/js/cajas.js).
   "activa" marca la caja cuyo filtro esta puesto ahora. Solo usa las variables de tokens.css. */

.kpi-link,.mini-kpi{
  cursor:pointer;text-decoration:none;color:inherit;
  outline:2px solid transparent;outline-offset:2px;
  transition:transform .15s ease,box-shadow .15s ease,outline-color .15s ease;
}
a.kpi-link{display:block}
.kpi-link:hover,.mini-kpi:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent),0 18px 34px -16px color-mix(in srgb,var(--accent) 55%,transparent);
}
.kpi-link:focus-visible,.mini-kpi:focus-visible{outline-color:var(--accent)}
.kpi-link.activa{outline-color:var(--accent)}
.kpi-link:active,.mini-kpi:active{transform:translateY(0)}

/* la pista "Ver detalle →" (cada caja puede cambiar el texto con data-ver="Ver tickets") */
.kpi-link::after{
  content:"Ver detalle →";display:block;margin-top:8px;font-size:11.5px;font-weight:600;color:var(--detail);
  opacity:.75;transition:opacity .15s ease,transform .15s ease;
}
.kpi-link[data-ver]::after{content:attr(data-ver) " →"}
.kpi-link:hover::after{opacity:1;transform:translateX(3px)}
.kpi.hero.kpi-link::after{color:var(--hero-ink)}

@media (prefers-reduced-motion:reduce){
  .kpi-link,.mini-kpi,.kpi-link::after{transition:none}
  .kpi-link:hover,.mini-kpi:hover{transform:none}
  .kpi-link:hover::after{transform:none}
}

/* aviso "Mostrando: ..." cuando una caja dejo un filtro puesto en la lista */
.filtro-chip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:8px 14px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:12px;font-size:12.5px}
.filtro-chip button{border:0;background:transparent;color:var(--accent-ink);font-weight:700;cursor:pointer;font-size:12.5px;margin-left:auto;font-family:inherit}
.filtro-chip button:hover{text-decoration:underline}

/* destello para "llevar la vista" a una tarjeta o tabla */
@keyframes resalta{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}40%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 35%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.resalta{animation:resalta 1.8s ease-out 1}
@media (prefers-reduced-motion:reduce){.resalta{animation:none;outline:2px solid var(--accent)}}