/* ============================================
   SIGA Landing — Camada futurista (aditiva)
   Complementa main.css: hero 3D, "Como Funciona",
   scroll-progress, tilt de cards e refinamentos.
   ============================================ */

/* --- Barra de progresso de scroll --- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: var(--z-tooltip);
  background: var(--gradient-primary);
  box-shadow: 0 0 12px var(--color-cyan-glow);
  transition: width 80ms linear;
  pointer-events: none;
}

/* --- Hero: cena 3D + grid de perspectiva --- */
.hero { position: relative; overflow: hidden; }

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 45%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 70% 45%, #000 40%, transparent 100%);
}

.hero-grid {
  position: absolute;
  inset: auto 0 -2px 0;
  height: 45%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(0, 245, 255, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 245, 255, 0.09) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(420px) rotateX(62deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 90%);
          mask-image: linear-gradient(to top, #000 0%, transparent 90%);
  animation: gridflow 8s linear infinite;
}
@keyframes gridflow { from { background-position: 0 0; } to { background-position: 0 44px; } }

.hero .container { position: relative; z-index: 1; }

/* dica de scroll */
.hero-scroll-hint {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-full);
  z-index: 1;
  display: flex; justify-content: center;
}
.hero-scroll-hint span {
  width: 4px; height: 8px; margin-top: 7px;
  border-radius: var(--radius-full);
  background: var(--color-cyan);
  box-shadow: 0 0 8px var(--color-cyan-glow);
  animation: scrolldot 1.8s ease-in-out infinite;
}
@keyframes scrolldot { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(12px); opacity: .3; } }

/* --- Tilt 3D em cards (JS aplica --rx/--ry) --- */
.tilt {
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transform-style: preserve-3d;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms ease, border-color 200ms ease;
  will-change: transform;
}
.tilt:hover { box-shadow: var(--shadow-lg), var(--shadow-glow-cyan); }

/* --- Seção "Como funciona" (fluxo) --- */
.flow {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
}
.flow-step {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  backdrop-filter: var(--glass-blur);
  padding: var(--space-8) var(--space-6) var(--space-6);
  overflow: hidden;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.flow-step::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--gradient-primary);
  opacity: .5;
}
.flow-step:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 245, 255, 0.35);
  box-shadow: var(--shadow-md), var(--shadow-glow-cyan);
}
.flow-num {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: .2em;
  color: var(--color-cyan);
  opacity: .8;
}
.flow-icon {
  width: 52px; height: 52px;
  margin: var(--space-3) 0 var(--space-4);
  display: grid; place-items: center;
  border-radius: var(--radius-xl);
  background: rgba(0, 245, 255, 0.08);
  border: 1px solid rgba(0, 245, 255, 0.2);
  color: var(--color-cyan);
}
.flow-icon svg { width: 26px; height: 26px; }
.flow-title { font-size: var(--font-size-xl); font-weight: 700; margin-bottom: var(--space-2); }
.flow-desc { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.6; }

.flow-arrow {
  align-self: center;
  width: 44px; height: 2px;
  background: linear-gradient(to right, transparent, var(--color-cyan), transparent);
  position: relative;
}
.flow-arrow::after {
  content: "";
  position: absolute; right: -1px; top: -3px;
  border: 4px solid transparent;
  border-left-color: var(--color-cyan);
}
.flow-arrow::before {
  content: "";
  position: absolute; left: 0; top: 0; height: 100%; width: 30%;
  background: var(--color-cyan);
  filter: blur(1px);
  animation: dash 2.2s linear infinite;
}
@keyframes dash { from { left: -30%; } to { left: 100%; } }

@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { justify-self: center; width: 2px; height: 30px; background: linear-gradient(to bottom, transparent, var(--color-cyan), transparent); }
  .flow-arrow::after { right: -3px; top: auto; bottom: -1px; border: 4px solid transparent; border-top-color: var(--color-cyan); border-left-color: transparent; }
  .flow-arrow::before { width: 100%; height: 30%; left: 0; animation: dashv 2.2s linear infinite; }
  @keyframes dashv { from { top: -30%; } to { top: 100%; } }
}

/* --- Realce do gradiente animado no título --- */
.text-gradient {
  background: linear-gradient(100deg, var(--color-cyan), var(--color-violet), var(--color-cyan));
  background-size: 220% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { to { background-position: 220% center; } }

/* --- Acessibilidade / performance --- */
@media (prefers-reduced-motion: reduce) {
  .hero-grid, .hero-scroll-hint span, .flow-arrow::before, .text-gradient { animation: none !important; }
  .scroll-progress { transition: none; }
  .tilt { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================
   Painel (dashboard preview) — versão realista
   ============================================ */
.dash-toolbar {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  padding-bottom: var(--space-4); margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--glass-border);
}
.dash-search {
  display: flex; align-items: center; gap: var(--space-2);
  flex: 1 1 260px; min-width: 200px;
  padding: var(--space-2) var(--space-3);
  background: rgba(0,0,0,.35);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
}
.dash-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.dash-search input {
  background: transparent; border: 0; outline: 0; width: 100%;
  color: var(--color-text-secondary); font-size: var(--font-size-sm);
  font-family: var(--font-family);
}
.dash-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs); font-weight: 500;
  color: var(--color-text-secondary);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  cursor: default;
}
.chip b { font-family: var(--font-mono); opacity: .7; font-weight: 600; }
.chip.active {
  color: var(--color-cyan);
  border-color: rgba(0,245,255,.4);
  background: rgba(0,245,255,.08);
}
.dash-live {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-left: auto;
  font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-emerald);
}
.dash-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-emerald); box-shadow: 0 0 8px var(--color-emerald);
  animation: livepulse 1.6s ease-in-out infinite;
}
@keyframes livepulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .5; } }

.dash-kpis { grid-template-columns: repeat(4, 1fr); }
.kpi-row { display: flex; align-items: baseline; gap: var(--space-3); }
.dashboard-kpi-value.amber { color: var(--color-amber); }
.kpi-delta { font-size: var(--font-size-xs); font-family: var(--font-mono); color: var(--color-text-muted); }
.kpi-delta.up { color: var(--color-emerald); }
.kpi-delta.down { color: var(--color-cyan); }

.dash-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-4); }
.dash-panel {
  background: rgba(0,0,0,.28);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.dash-panel-title {
  font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-text-muted); margin-bottom: var(--space-4);
  display: flex; align-items: baseline; gap: var(--space-2);
}
.dash-panel-sub { text-transform: none; letter-spacing: 0; color: var(--color-text-muted); opacity: .6; font-size: 10px; }

/* Distribuição por tipo */
.dist-bars { display: flex; flex-direction: column; gap: var(--space-3); }
.dist-row { display: grid; grid-template-columns: 68px 1fr 34px; align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); }
.dist-name { color: var(--color-text-secondary); }
.dist-track { height: 7px; border-radius: var(--radius-full); background: rgba(255,255,255,.06); overflow: hidden; }
.dist-fill { height: 100%; border-radius: var(--radius-full); background: var(--gradient-primary); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.dist-pct { font-family: var(--font-mono); color: var(--color-text-muted); text-align: right; }

/* Tabela de dispositivos */
.dash-table-wrap { overflow-x: auto; }
.dash-table td { white-space: nowrap; }
.dash-table .mono { font-family: var(--font-mono); font-size: var(--font-size-xs); }
.dev-row { transition: background-color .5s ease; }
.dev-row.flash { background: rgba(0,245,255,.10); }
.cell-muted { color: var(--color-text-secondary); }

/* Sinal (barras) */
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sig i { width: 3px; background: var(--color-text-muted); opacity: .35; border-radius: 1px; }
.sig i:nth-child(1){ height: 5px; } .sig i:nth-child(2){ height: 8px; }
.sig i:nth-child(3){ height: 11px; } .sig i:nth-child(4){ height: 14px; }
.sig.on i { background: var(--color-emerald); opacity: 1; }
.sig .off { background: var(--color-text-muted) !important; opacity: .3 !important; }

/* Bateria */
.batt { display: inline-flex; align-items: center; gap: var(--space-2); }
.batt-track { width: 34px; height: 7px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.batt-fill { height: 100%; border-radius: 3px; }
.batt-num { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); }
.batt-fill.ok { background: var(--color-emerald); }
.batt-fill.mid { background: var(--color-amber); }
.batt-fill.low { background: var(--color-rose); }

/* Status extra */
.status-badge.idle { background: rgba(148,163,184,.18); color: #94a3b8; }
.status-badge.updating { background: rgba(59,130,246,.18); color: var(--color-blue); }
.status-badge.updating .status-dot { animation: livepulse 1.2s ease-in-out infinite; }
.status-badge.alert { background: rgba(245,158,11,.18); color: var(--color-amber); }

/* Feed de telemetria */
.telemetry-feed { max-height: 210px; overflow-y: auto; background: rgba(0,0,0,.28); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); }
.feed-item { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px dashed var(--glass-border); animation: fadeInUp .3s ease; }
.feed-item:last-child { border-bottom: none; }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.feed-dot.online { background: var(--color-emerald); box-shadow: 0 0 8px var(--color-emerald); }
.feed-dot.offline { background: var(--color-rose); box-shadow: 0 0 8px var(--color-rose); }
.feed-dot.updating { background: var(--color-blue); box-shadow: 0 0 8px var(--color-blue); }
.feed-main { flex: 1; min-width: 0; }
.feed-top { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.feed-id { font-family: var(--font-mono); font-size: var(--font-size-sm); }
.feed-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.feed-data { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-cyan); opacity: .85; }
.feed-time { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); opacity: .6; flex-shrink: 0; }

@media (max-width: 900px) {
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-split { grid-template-columns: 1fr; }
}

/* --- Fix de redimensionamento do painel (evita overflow horizontal) --- */
.dashboard-preview { max-width: 100%; }
.dashboard-content, .dash-devices, .dash-dist, .dashboard-kpi { min-width: 0; }
.dashboard-kpi-value { min-width: 0; overflow-wrap: anywhere; }
.kpi-row { flex-wrap: wrap; }
/* sparkline: ocupa a largura do card (o <canvas> tem 300px por padrão e estourava) */
.sparkline { width: 100%; display: block; height: 40px; margin-top: var(--space-2); }
/* a tabela larga rola dentro do próprio wrapper, não empurra o painel */
.dash-table-wrap { overflow-x: auto; max-width: 100%; }