/* ============================================================================
   Cards "Ticker" — carrusel continuo infinito de tarjetas de métricas (KPI) con estética Sci-Fi / glassmorphism.
   Tercer estilo de cards, complementario a Proyectos (proy-*) y Vitrina (vt-*).

   Markup (ver core/lib/ticker.php → ticker_render()):
     <div class="tk-stage" style="--tk-dur:40s">
       <div class="tk-track">
         <div class="tk-set">  <a|div class="tk-card"><span class="tk-label">Texto</span><span class="tk-val">1.234</span>…  </div>
         <div class="tk-set" aria-hidden="true">  …mismas tarjetas clonadas…  </div>
       </div>
     </div>
   El bucle es sin saltos: el track contiene DOS sets idénticos y se desplaza -50% (justo un set) con una animación lineal infinita.

   Variables (en .tk-stage o en un .tk-card): --tk-dur (duración del ciclo, 40s) · --tk-gap (16px) · --tk-w (138px) · --tk-h (184px)
   · --tk-skew (inclinación del corte, -8deg) · --tk-c (color de resplandor "r,g,b", por defecto cian 0,212,255).
   ============================================================================ */

.tk-stage {
  --tk-dur: 40s;
  --tk-gap: 16px;
  --tk-w: 138px;
  --tk-h: 184px;
  --tk-skew: -8deg;
  --tk-c: 0, 212, 255;
  position: relative;
  overflow: hidden;
  padding: 24px 0 30px;                                   /* aire para el resplandor y la elevación del hover */
  /* desvanecimiento gradual en los extremos: las tarjetas salen y reaparecen sin que se note el salto */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

.tk-track {
  display: flex;
  width: max-content;
  animation: tkScroll var(--tk-dur) linear infinite;      /* ritmo pausado y constante */
  will-change: transform;
}
.tk-stage.tk-rtl .tk-track { animation-direction: reverse; }   /* izquierda → derecha */
@keyframes tkScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* el movimiento se pausa al pasar el cursor (o al enfocar una tarjeta con teclado) */
.tk-stage:hover .tk-track,
.tk-stage:focus-within .tk-track,
.tk-stage:active .tk-track { animation-play-state: paused; }

.tk-set { display: flex; gap: var(--tk-gap); padding-right: var(--tk-gap); flex: 0 0 auto; }

/* ── Card: panel alto y esbelto con corte inclinado (paralelogramo) ── */
.tk-card {
  position: relative;
  flex: 0 0 var(--tk-w);
  height: var(--tk-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 16px 12px;
  text-align: center; text-decoration: none;
  color: #E0F2FE;
  border-radius: 14px;
  border: 1px solid rgba(var(--tk-c), .30);
  /* cristal azul oscuro + destello que sube desde el borde inferior */
  background:
    linear-gradient(0deg, rgba(var(--tk-c), .32) 0%, rgba(30, 107, 255, .14) 42%, transparent 78%),
    rgba(10, 25, 50, .60);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow:
    0 0 15px rgba(var(--tk-c), .18),
    0 14px 28px -18px rgba(0, 0, 0, .75),
    inset 0 -20px 32px -20px rgba(var(--tk-c), .38);
  transform: skewX(var(--tk-skew));
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
  -webkit-tap-highlight-color: transparent;
}
/* el contenido se contra-inclina para quedar derecho dentro del panel inclinado */
.tk-card > * { transform: skewX(calc(var(--tk-skew) * -1)); }
/* filo de luz superior */
.tk-card::before {
  content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--tk-c), .8), transparent); opacity: .6;
}

.tk-card:hover, .tk-card:focus-visible {
  transform: skewX(var(--tk-skew)) translateY(-5px);
  border-color: rgba(var(--tk-c), .78);
  background:
    linear-gradient(0deg, rgba(var(--tk-c), .50) 0%, rgba(30, 107, 255, .24) 46%, transparent 82%),
    rgba(10, 25, 50, .68);
  box-shadow:
    0 0 15px rgba(var(--tk-c), .45),
    0 0 36px rgba(var(--tk-c), .32),
    0 20px 34px -16px rgba(0, 0, 0, .7),
    inset 0 -24px 36px -18px rgba(var(--tk-c), .6);
  outline: none;
}

.tk-label {
  font-size: .68rem; font-weight: 700; line-height: 1.35;
  letter-spacing: .14em; text-transform: uppercase;
  color: #E0F2FE;
}
.tk-val {
  font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 0 18px rgba(var(--tk-c), .6);
  white-space: nowrap;
}
.tk-val--m  { font-size: 1.55rem; }
.tk-val--s  { font-size: 1.25rem; }
.tk-val--xs { font-size: 1rem; letter-spacing: -.03em; }
.tk-card { min-width: 0; }
.tk-sub { font-size: .68rem; line-height: 1.3; color: rgba(224, 242, 254, .62); }

/* ── Tema claro: cristal blanquecino, texto azul profundo ── */
[data-theme="light"] .tk-card {
  color: #0b2a66;
  border-color: rgba(var(--tk-c), .45);
  background:
    linear-gradient(0deg, rgba(var(--tk-c), .30) 0%, rgba(255, 255, 255, .55) 62%),
    rgba(255, 255, 255, .72);
  box-shadow: 0 0 14px rgba(var(--tk-c), .18), 0 14px 26px -18px rgba(30, 60, 120, .5), inset 0 -18px 28px -20px rgba(var(--tk-c), .4);
}
[data-theme="light"] .tk-card:hover, [data-theme="light"] .tk-card:focus-visible {
  background: linear-gradient(0deg, rgba(var(--tk-c), .45) 0%, rgba(255, 255, 255, .6) 66%), rgba(255, 255, 255, .8);
  box-shadow: 0 0 14px rgba(var(--tk-c), .4), 0 0 30px rgba(var(--tk-c), .28), 0 18px 30px -16px rgba(30, 60, 120, .5), inset 0 -22px 34px -18px rgba(var(--tk-c), .55);
}
[data-theme="light"] .tk-label { color: #1e3a8a; }
[data-theme="light"] .tk-val { color: #0b2a66; text-shadow: none; }
[data-theme="light"] .tk-sub { color: #51637a; }

@media (max-width: 640px) { .tk-stage { --tk-w: 122px; --tk-h: 168px; } .tk-val { font-size: 1.6rem; } }

/* Sin animación: lista desplazable a mano, sin clones */
@media (prefers-reduced-motion: reduce) {
  .tk-stage { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .tk-track { animation: none; }
  .tk-set[aria-hidden="true"] { display: none; }
}