/* ==========================================================================
   Fieldix — Capa de interactividad y movimiento
   Se carga DESPUÉS de styles.css. Todo lo que se anima depende de clases que
   agrega js/interactivo.js (prefijo fx-), así que sin JavaScript la página se
   ve exactamente igual que antes. El bloque @media (prefers-reduced-motion)
   de styles.css ya apaga duraciones; además el JS no arranca bucles en ese modo.
   ========================================================================== */

/* ---- Navegación: barra de progreso y encogimiento al hacer scroll -------- */
.fx-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--color-accent), #00C2D9);
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}
.nav { transition: box-shadow 250ms ease; }
.nav .nav__inner { transition: padding 250ms ease; }
.nav.is-scrolled { box-shadow: 0 6px 24px -12px rgba(15, 23, 42, 0.25); }
@media (min-width: 861px) {
  .nav.is-scrolled .nav__inner { padding-block: 0.6rem; }
}

/* ---- Hero: subrayado que se dibuja bajo el titular ------------------------ */
.fx-mark {
  background-image: linear-gradient(120deg, rgba(0, 194, 217, 0.35), rgba(3, 105, 161, 0.28));
  background-repeat: no-repeat;
  background-size: 0% 0.32em;
  background-position: 0 88%;
  transition: background-size 900ms cubic-bezier(0.65, 0, 0.35, 1) 350ms;
}
.fx-ready .fx-mark { background-size: 100% 0.32em; }

/* Entrada escalonada de los textos del hero (el h1 no se oculta, para no
   retrasar el pintado principal de la página) */
@keyframes fx-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fx-enter { animation: fx-up 650ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ---- Hero: tablero de despacho "en vivo" ---------------------------------- */
.fx-tilt-wrap { perspective: 1200px; }
.fx-tilt { transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); transform-style: preserve-3d; will-change: transform; }

.fx-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-success);
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5);
  animation: fx-ping 1.8s ease-out infinite;
}
@keyframes fx-ping {
  0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55); }
  80%, 100% { box-shadow: 0 0 0 7px rgba(5, 150, 105, 0); }
}

/* Barras tipo "skeleton" con un brillo que pasa */
.fx-shimmer .device-mock__bar { position: relative; overflow: hidden; }
.fx-shimmer .device-mock__bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: translateX(-100%);
  animation: fx-shimmer 2.6s ease-in-out infinite;
}
@keyframes fx-shimmer { 60%, 100% { transform: translateX(100%); } }

/* Cambio de estado de un técnico */
.fx-badge { transition: background 300ms ease, color 300ms ease; min-width: 92px; justify-content: center; }
.fx-badge.is-flipping { animation: fx-flip 520ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes fx-flip {
  0% { transform: rotateX(0); }
  45% { transform: rotateX(90deg); }
  55% { transform: rotateX(-90deg); }
  100% { transform: rotateX(0); }
}
.device-mock__row { transition: background 400ms ease; border-radius: 10px; }
.device-mock__row.is-highlight { background: rgba(3, 105, 161, 0.06); }

/* Tarjetas flotantes que "respiran" */
.fx-bob { animation: fx-bob 5s ease-in-out infinite; }
.fx-bob--late { animation-delay: -2.5s; }
@keyframes fx-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

.fx-spin { animation: fx-spin 1s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* Firma que se dibuja */
.fx-sign-path { stroke-dasharray: 120; stroke-dashoffset: 120; }
.fx-sign-path.is-drawing { animation: fx-draw 1.6s ease forwards; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }

/* ---- Demo sin conexión (sección oscura) ----------------------------------- */
.fx-offline { background: #0B1220; border-color: #1E293B; color: #E2E8F0; }
.fx-offline .device-mock__top { gap: 0.5rem; flex-wrap: wrap; }
.fx-net {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--fs-xs); font-weight: 600; padding: 0.3rem 0.75rem; border-radius: var(--radius-full);
  background: #1E293B; color: #94A3B8; transition: background 300ms ease, color 300ms ease;
}
.fx-net__dot { width: 8px; height: 8px; border-radius: 50%; background: #64748B; transition: background 300ms ease; }
.fx-offline.is-online .fx-net { background: rgba(5, 150, 105, 0.18); color: #6EE7B7; }
.fx-offline.is-online .fx-net__dot { background: #10B981; }

.fx-pending {
  font-size: var(--fs-xs); font-weight: 700; padding: 0.3rem 0.75rem; border-radius: var(--radius-full);
  background: rgba(234, 88, 12, 0.18); color: #FDBA74; transition: background 300ms ease, color 300ms ease;
  font-variant-numeric: tabular-nums;
}
.fx-pending.is-zero { background: rgba(5, 150, 105, 0.18); color: #6EE7B7; }

.fx-queue { margin-top: 0.25rem; }
.fx-queue__item {
  display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.25rem;
  border-top: 1px solid #1E293B;
}
.fx-queue__item:first-child { border-top: none; }
.fx-queue__icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #1E293B; color: #CBD5E1;
}
.fx-queue__icon svg { width: 18px; height: 18px; }
.fx-queue__text { flex: 1; min-width: 0; }
.fx-queue__title { display: block; font-size: var(--fs-sm); font-weight: 600; color: #F1F5F9; line-height: 1.3; }
.fx-queue__sub { display: block; font-size: var(--fs-xs); color: #64748B; }
.fx-queue__state {
  display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0;
  font-size: var(--fs-xs); font-weight: 600; padding: 0.25rem 0.6rem; border-radius: var(--radius-full);
  background: rgba(234, 88, 12, 0.15); color: #FDBA74;
}
.fx-queue__state svg { width: 13px; height: 13px; }
.fx-queue__item[data-state="sending"] .fx-queue__state { background: rgba(3, 105, 161, 0.25); color: #7DD3FC; }
.fx-queue__item[data-state="sent"] .fx-queue__state { background: rgba(5, 150, 105, 0.18); color: #6EE7B7; animation: fx-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fx-pop { 0% { transform: scale(0.7); } 100% { transform: scale(1); } }

.fx-switch {
  margin-top: var(--space-3); width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: #111A2E; border: 1px solid #1E293B; border-radius: var(--radius-md);
  padding: 0.85rem 1rem; color: #E2E8F0; font-size: var(--fs-sm); font-weight: 600; text-align: left;
  transition: border-color 200ms ease, background 200ms ease;
}
.fx-switch:hover { border-color: #334155; background: #142038; }
.fx-switch:focus-visible { outline: 2px solid #38BDF8; outline-offset: 2px; }
.fx-switch__track {
  position: relative; width: 48px; height: 28px; border-radius: 999px; flex-shrink: 0;
  background: #334155; transition: background 250ms ease;
}
.fx-switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fx-switch[aria-checked="true"] .fx-switch__track { background: #10B981; }
.fx-switch[aria-checked="true"] .fx-switch__thumb { transform: translateX(20px); }
.fx-switch.is-hint .fx-switch__track { animation: fx-hint 1.6s ease-in-out infinite; }
@keyframes fx-hint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.0); }
  50% { box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.25); }
}
.fx-offline .device-mock__float { background: #0B1220; border-color: #1E293B; color: #fff; transition: color 300ms ease; }

/* ---- Contadores ------------------------------------------------------------ */
.stat__value { font-variant-numeric: tabular-nums; }

/* ---- Pasos con línea de progreso ------------------------------------------ */
.fx-steps { position: relative; }
.fx-steps .step { padding-top: 0; }
.fx-steps .step::before {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); background: var(--color-surface);
  border: 2px solid var(--color-border); color: var(--color-muted-foreground);
  margin-bottom: var(--space-2); position: relative; z-index: 1;
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fx-steps .step.is-active::before {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: scale(1.08);
  box-shadow: 0 0 0 6px var(--color-accent-soft);
}
.fx-steps .step h4, .fx-steps .step p { transition: opacity 300ms ease; }
.fx-steps .step:not(.is-active) h4, .fx-steps .step:not(.is-active) p { opacity: 0.55; }
.fx-steps__track { position: absolute; background: var(--color-border); border-radius: 2px; z-index: 0; }
.fx-steps__fill {
  position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), #00C2D9);
  transform-origin: 0 0;
}
@media (max-width: 900px) {
  .fx-steps .step { padding-left: 64px; min-height: 46px; }
  .fx-steps .step::before { position: absolute; left: 0; top: 0; margin: 0; }
  .fx-steps__fill { background: linear-gradient(180deg, var(--color-accent), #00C2D9); }
}

/* ---- Botones --------------------------------------------------------------- */
.btn-primary, .btn-on-dark { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg); transition: left 0s;
}
.btn-primary:hover::after { left: 130%; transition: left 700ms ease; }
.btn:active { transform: translateY(0) scale(0.97); }
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: rgba(255, 255, 255, 0.45); transform: scale(0); animation: fx-ripple 600ms ease-out forwards;
}
.btn-secondary .fx-ripple, .btn-ghost .fx-ripple { background: rgba(3, 105, 161, 0.18); }
.btn-secondary, .btn-ghost { position: relative; overflow: hidden; isolation: isolate; }
@keyframes fx-ripple { to { transform: scale(2.6); opacity: 0; } }

.fx-arrow { display: inline-block; transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.btn:hover .fx-arrow { transform: translateX(4px); }

/* ---- Tarjetas: inclinación 3D + foco de luz que sigue el cursor ----------- */
.fx-card { position: relative; isolation: isolate; will-change: transform; }
.fx-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 194, 217, 0.12), transparent 45%);
  opacity: 0; transition: opacity 300ms ease;
}
.fx-card:hover::before { opacity: 1; }
.fx-card:hover { border-color: rgba(3, 105, 161, 0.35); }
.fx-card .card__icon { transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), background 300ms ease, color 300ms ease; }
.fx-card:hover .card__icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); background: var(--color-accent); color: #fff; }

/* Foto con leve zoom al pasar */
.industry-photo img { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.industry-photo:hover img { transform: scale(1.04); }

/* ---- Movimiento reducido: todo quieto, todo funcional --------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-bob, .fx-live-dot, .fx-spin, .fx-switch.is-hint .fx-switch__track,
  .fx-shimmer .device-mock__bar::after { animation: none !important; }
  .fx-sign-path { stroke-dashoffset: 0; }
  .fx-mark { background-size: 100% 0.32em; }
}

.fx-offline.is-online .fx-float-icon { stroke: #10B981; }