/* Tarjetas de Odoo (sitio/tarjetas.js). Tokens en index.html.
   Siguen al ancla de su sección (pista exportada con el video). Cian solo en el pulso «en vivo»;
   ámbar solo para «pendiente de confirmar». */
#tarjetas { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.tarjeta {
  position: absolute; left: 0; top: 0; width: 224px; box-sizing: border-box;
  padding: 12px 14px 13px; border-radius: 14px;
  background: rgba(18, 45, 77, .95); border: 1px solid var(--nv-border);
  box-shadow: 0 6px 16px rgba(10, 30, 58, .4);
  font-family: var(--sw-font-body); opacity: 0; will-change: transform, opacity;
}
.tarjeta header { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-ink-soft); }
.pulso { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nv-blue); }
.tarjeta.en-vivo .pulso { background: var(--nv-cyan); animation: pulso 1.1s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, .55); } 50% { box-shadow: 0 0 0 6px rgba(6, 182, 212, 0); } }
.tarjeta strong { display: block; margin-top: 6px; font-family: var(--sw-font-display); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--sw-ink); font-variant-numeric: tabular-nums; }
.tarjeta p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--sw-ink-soft); }

/* Estados: solo se ve el activo; el que entra cae como un sello */
.tarjeta__estado { display: none; }
.tarjeta__estado.activo { display: block; }
.tarjeta__estado--entra strong { animation: sello .5s cubic-bezier(.2, .9, .3, 1.3) both; transform-origin: 0 50%; }
.tarjeta__estado--entra header, .tarjeta__estado--entra p { animation: aparece .4s ease-out both; }
@keyframes sello { from { opacity: 0; transform: scale(1.18); } }
@keyframes aparece { from { opacity: 0; } }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 9px 3px 8px; border-radius: 999px; background: var(--sw-bg); font-size: 11px; font-weight: 600; font-style: normal; }
.etiqueta--pendiente { color: var(--nv-ambar); }
.etiqueta--pendiente::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nv-ambar); }

/* «Datos ilustrativos» siempre legible, también sobre el cielo de día */
.nota { position: fixed; z-index: 30; right: 16px; bottom: calc(10px + env(safe-area-inset-bottom)); margin: 0; padding: 4px 8px; border-radius: 999px; background: rgba(10, 30, 58, .78); font: 500 11px/1 var(--sw-font-body); color: var(--nv-blue100); }

/* Celular: una tarjeta como chip bajo el copy (tarjetas.js la pone ahí con transform) */
@media (max-width: 860px) {
  #tarjetas.apilada .tarjeta, #tarjetas.fija-movil .tarjeta { width: auto; max-width: calc(100vw - 36px); padding: 7px 12px 7px 10px; border-radius: 999px; }
  #tarjetas.apilada .tarjeta__estado.activo, #tarjetas.apilada .tarjeta:not(:has(.tarjeta__estado)),
  #tarjetas.fija-movil .tarjeta__estado.activo, #tarjetas.fija-movil .tarjeta:not(:has(.tarjeta__estado)) { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
  #tarjetas.apilada .tarjeta header, #tarjetas.fija-movil .tarjeta header { font-size: 10px; letter-spacing: .1em; }
  #tarjetas.apilada .tarjeta strong, #tarjetas.fija-movil .tarjeta strong { margin: 0; font-size: 16px; }
  #tarjetas.apilada .tarjeta p, #tarjetas.apilada .etiqueta, #tarjetas.fija-movil .tarjeta p, #tarjetas.fija-movil .etiqueta { display: none; }
  .nota { right: 12px; bottom: calc(3px + env(safe-area-inset-bottom)); padding: 3px 7px; font-size: 10.5px; }
}
/* Movimiento reducido: no hay video; las tarjetas de la sección se apilan a la derecha, en su estado final */
#tarjetas.fija { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: flex-end; padding: 0 clamp(16px, 5vw, 64px); }
#tarjetas.fija .tarjeta { position: relative; transform: none !important; }
#tarjetas.fija .tarjeta[hidden] { display: none; }
#tarjetas.fija.fija-movil { justify-content: flex-start; align-items: flex-start; gap: 8px; padding: calc(var(--copy-abajo, 330px) + 10px) clamp(18px, 5vw, 64px) 0; }
@media (prefers-reduced-motion: reduce) {
  .tarjeta.en-vivo .pulso { animation: none; }
  .tarjeta__estado--entra strong, .tarjeta__estado--entra header, .tarjeta__estado--entra p { animation: none; }
}