/* =========================================  
   SFV » FILA SINC (escopo total)
   - Estrutura da lista
   - Item cliente (layout)
   - Posição
   - Glow de movimentação (sfv-glow)
   ========================================= */

.sfv-scope{
  /* Variáveis locais do componente (NÃO são tokens globais).
     Preferência: tokens em assets/css/core/sfv-tokens.css e skins. */
  --sfv-fila-radius: var(--sfv-r12, 14px);

  /* ✅ respira mais (sem parecer “buraco”) */
  --sfv-fila-gap: .65rem;

  /* ✅ devolve presença aos itens (sem aglomerar) */
  --sfv-fila-shadow: 0 6px 16px rgba(2, 6, 23, .10);
  --sfv-fila-shadow-hover: 0 10px 22px rgba(2, 6, 23, .14);

  /* ✅ defaults locais (SEM auto-referência) */
  --sfv-glow-ms: 2600ms; /* ✅ feedback curto (evita ficar “ligado” no polling) */

  /* ✅ sistema de linhas (consome tokens da skin; fallback seguro) */
  --sfv-fila-line-w: var(--sfv-line-w, 1px);
  --sfv-fila-line: var(--sfv-line, var(--sfv-border, #e5e9f2));
  --sfv-fila-divider: var(--sfv-divider, rgba(0,0,0,.08));
  --sfv-fila-divider-strong: var(--sfv-divider-strong, rgba(0,0,0,.14));
  --sfv-fila-divider-w: var(--sfv-divider-w, 1px);
}

/* Empilhamento */
.sfv-scope .sfv-fila{
  display:flex;
  flex-direction:column;
  gap:var(--sfv-fila-gap);
  perspective: 900px; /* ok manter para FLIP */
  transform-style: preserve-3d;
}

/* ===== Item cliente ===== */
.sfv-scope .sfv-cliente{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1rem;
  align-items:center;

  /* ✅ presença + conforto de leitura */
  padding: .85rem 1.1rem;

  /* ✅ item valorizado (sem virar “barulhento”) */
  border-radius: var(--sfv-fila-radius);
  background: color-mix(in srgb, var(--sfv-surface, #ffffff) 92%, transparent);

  /* ✅ padrão único de borda (sem "apagar" no color-mix) */
  border: var(--sfv-fila-line-w) solid var(--sfv-fila-line);

  color: var(--sfv-text, #0f172a);

  /* ✅ sombra sutil por item */
  box-shadow: var(--sfv-fila-shadow);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;

  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ✅ remove divisor “duro”: só mantém um respiro consistente */
.sfv-scope .sfv-cliente + .sfv-cliente{
  margin-top: .15rem;
}

/* Hover discreto (sem “pular demais”) */
.sfv-scope .sfv-cliente:hover{
  transform: translateY(-1px);
  box-shadow: var(--sfv-fila-shadow-hover);
}

/* Selo “Em atendimento” (interno, opcional) */
.sfv-scope .sfv-cliente .sfv-badge-live{
  display:inline-block;
  margin-bottom:.35rem;

  background: color-mix(in srgb, var(--sfv-success, #16a34a) 12%, #ffffff);
  color: color-mix(in srgb, var(--sfv-success, #16a34a) 75%, #0f172a);

  font-weight:800;
  font-size:.82rem;
  padding:.18rem .55rem;

  border-radius:999px;

  /* mantém funcional (verde) — não entra no sistema de linhas */
  border:1px solid color-mix(in srgb, var(--sfv-success, #16a34a) 25%, #ffffff);
}

.sfv-scope .sfv-cliente.is-first{
  outline: 2px solid color-mix(in srgb, var(--sfv-success, #16a34a) 28%, transparent);

  /* ✅ premium: primeiro item é o “carro-chefe” */
  box-shadow: 0 14px 30px rgba(2, 6, 23, .16);
}

/* Posição (pill) */
.sfv-scope .sfv-pos{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width: 38px;
  height: 38px;
  border-radius:12px;

  background: linear-gradient(180deg, #ffd78d 0%, #f59e0b 100%);
  color:#1f2937;

  font-weight:900;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}

/* Conteúdo textual */
.sfv-scope .sfv-body{
  display:grid;
  gap:.25rem;
}

.sfv-scope .sfv-nome{
  font-weight:500;
  line-height:1.2;
  display:flex;
  align-items:center;
  gap:.5rem;
}

.sfv-scope .sfv-nome svg{
  width:18px;
  height:18px;
  color: color-mix(in srgb, var(--sfv-muted, #64748b) 100%, transparent);
}

.sfv-scope .sfv-info{
  color: var(--sfv-muted, #5b6472);
  font-size:.94rem;
}

/* ===== Destaque (glow) temporário — AMBILIGHT SAFE (sem blur/gradiente animado) ===== */
.sfv-scope .sfv-cliente.sfv-glow{
  position: relative;
  z-index: 3;

  /* ✅ evita “lixo” de composição quando o polling re-renderiza */
  isolation: isolate;
}

/* Halo externo + ring fino (NÃO pinta o card / NÃO usa filter/blur) */
.sfv-scope .sfv-cliente.sfv-glow::before{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius: calc(var(--sfv-fila-radius) + 3px);

  background: transparent;

  /* ring elegante */
  outline: 2px solid color-mix(in srgb, var(--sfv-primary, #0250f8) 55%, transparent);

  /* ambilight externo via sombras (estável) */
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--sfv-primary, #0250f8) 14%, transparent),
    0 0 22px 7px color-mix(in srgb, var(--sfv-warning, #f59e0b) 20%, transparent),
    0 0 28px 11px color-mix(in srgb, var(--sfv-success, #16a34a) 16%, transparent);

  opacity: 0;
  transform: scale(.995);
  pointer-events: none;
  z-index: -1;

  animation: sfv-ambi-safe var(--sfv-glow-ms, 2600ms) cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes sfv-ambi-safe{
  0%   { opacity: 0;    transform: scale(.995); }
  18%  { opacity: 1;    transform: scale(1);    }
  65%  { opacity: .85;  transform: scale(1);    }
  100% { opacity: 0;    transform: scale(1.01); }
}