/* ===================== SFV (escopado) ===================== */
.sfv-scope{
  /* Tema claro, elegante (contrasta em páginas escuras) */
  --sfv-surface: #ffffff; /* Cor Background Cliente */
  --sfv-surface-2: #f7fcf8;
  --sfv-surface-3: #68fc05; /* Cor Background wrap */
  --sfv-border: #e5e9f2;
  --sfv-text: #00040c;
  --sfv-text-1: #00040c;
  --sfv-text-admin:#ffffff;
  --sfv-muted: #5b6472;

  /* ações (tons base) */
  --sfv-primary: #0250f8;
  --sfv-success: #16a34a; 
  --sfv-danger:  #ef4444;
  --sfv-btn-time--ok: #f9fc58;
  --sfv-icon-up: #ffffff;
  --sfv-icon-down: #ffffff;
  --sfv-icon-ok: #ffffff;
  --sfv-icon-del: #ffffff;

  /* cards informativos (AGORA MAIS CHAMATIVOS) */
  --sfv-card-inicio-bg: #67e4b8; /* verde claro vibrante */
  --sfv-card-inicio-br: #3ed3a6;
  --sfv-card-enc-bg:    #ff8b8b; /* vermelho vibrante */
  --sfv-card-enc-br:    #ff5c5c;
  --sfv-card-alm-bg:    #ff8b8b; /* âmbar claro vibrante */
  --sfv-card-alm-br:    #ff5c5c;

  --sfv-radius: 14px;
  --sfv-gap: .9rem;
  --sfv-shadow: 0 10px 30px rgba(2, 6, 23, .12);
  --sfv-shadow-hover: 0 14px 36px rgba(2, 6, 23, .16);

  /* 🔥 duração global do glow (admin + pública + área do cliente) */
  --sfv-glow-ms: 5000ms;
}

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

/* ===== Cards (início/encerramento/almoco) – claros, ALTAMENTE visíveis ===== */
.sfv-scope .sfv-card{
  padding: 1rem 1.2rem;
  border-radius: var(--sfv-radius);
  background: var(--sfv-surface-2);
  border: 1px solid var(--sfv-border);
  color: var(--sfv-text);
  text-align:center; font-weight:700; letter-spacing:.2px;
  box-shadow: var(--sfv-shadow);
  text-transform: none;
  will-change: transform;
}
.sfv-scope .sfv-card--inicio{
  background: var(--sfv-card-inicio-bg);
  border-color: var(--sfv-card-inicio-br);
}
.sfv-scope .sfv-card--enc{
  background: var(--sfv-card-enc-bg);
  border-color: var(--sfv-card-enc-br);
  color:#000000;
}
.sfv-scope .sfv-card--alm{
  background: var(--sfv-card-alm-bg);
  border-color: var(--sfv-card-alm-br);
}

/* ===== Item cliente – cartão claro ===== */
.sfv-scope .sfv-cliente{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:1rem; align-items:center;
  padding: 0.5rem 1.1rem;
  border-radius: var(--sfv-radius);
  background: var(--sfv-surface);
  border: 1px solid var(--sfv-border);
  color: var(--sfv-text);
  box-shadow: var(--sfv-shadow);
  transition: transform .12s ease, box-shadow .12s ease;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.sfv-scope .sfv-cliente:hover{
  transform: translateY(-2px);
  box-shadow: var(--sfv-shadow-hover);
}

/* Selo “Em atendimento” (interno, opcional) */
.sfv-scope .sfv-cliente .sfv-badge-live{
  display:inline-block; margin-bottom:.35rem;
  background:#e8f7f1; color:#0f5132;
  font-weight:800; font-size:.82rem; padding:.18rem .55rem;
  border-radius:999px; border:1px solid #c4eabf;
}
.sfv-scope .sfv-cliente.is-first{ outline: 2px solid #bfead9; }

/* 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:#64748b; }
.sfv-scope .sfv-info{ color: var(--sfv-muted); font-size:.94rem; }

/* ===== Ações – (ATUALIZADO: cores VIVAS) ===== */
.sfv-scope .sfv-acoes{ display:inline-flex; gap:.45rem; }

/* neutraliza qualquer opacidade/filtro herdado */
.sfv-scope .sfv-acoes,
.sfv-scope .sfv-btn{
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.sfv-scope .sfv-btn{
  width:38px; height:38px; border-radius:12px; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:#e5e7eb; color:#111827;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .08);
  transition: transform .08s ease, filter .08s ease;
}
.sfv-scope .sfv-btn:hover{ transform: translateY(-1px); filter: brightness(1.05) saturate(1.05); }
.sfv-scope .sfv-btn svg{ width:18px; height:18px; fill: currentColor; }

/* Ícones dos botões de ação do wrap */
.sfv-scope .sfv-btn--icon{
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.35rem 0.55rem;
}
.sfv-scope .sfv-btn--icon::before{
  content: '';
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size: inherit;
  line-height: 1;
  color: inherit;
  font-weight: 600;
  font-family: 'Segoe UI Symbol','Noto Sans Symbols','Liberation Sans',sans-serif;
}

/* Ícones dos botões de ação de cada cliente */
.sfv-scope .sfv-cliente .sfv-btn--up::before{
  content: "↑";
  color: var(--sfv-icon-up, currentColor);
  font-size: 1.8rem;
  font-weight: 700;
  transform: scaleX(1.25);
  transform-origin: center;
}
.sfv-scope .sfv-cliente .sfv-btn--down::before{
  content: "↓";
  color: var(--sfv-icon-down, currentColor);
  font-size: 1.8rem;
  font-weight: 700;
  transform: scaleX(1.25);
  transform-origin: center;
}
.sfv-scope .sfv-cliente .sfv-btn--ok::before{
  content: "✔";
  color: var(--sfv-icon-ok, #ffffff);
}
.sfv-scope .sfv-cliente .sfv-btn--del::before{
  content: "✖";
  color: var(--sfv-icon-del, #ffffff);
}

/* variações (vivas) */
.sfv-scope .sfv-cliente .sfv-btn--up,
.sfv-scope .sfv-cliente .sfv-btn--down{
  background:#3b82f6 !important;   /* azul vivo */
  color:#ffffff !important;
}
.sfv-scope .sfv-btn-time--ok{
  background:var(--sfv-btn-time--ok) !important; /* verde vivo */
  color:#ffffff !important;
}
.sfv-scope .sfv-cliente .sfv-btn--ok{
  background:var(--sfv-success) !important; /* verde vivo */
  color:#ffffff !important;
}
.sfv-scope .sfv-cliente .sfv-btn--del{
  background:var(--sfv-danger) !important;  /* vermelho vivo */
  color:#ffffff !important;
}
.sfv-scope .sfv-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

/* ===== Destaque neon temporário (para itens movidos) ===== */
.sfv-scope .sfv-cliente.sfv-glow{
  position: relative;
  z-index: 3;
}
.sfv-scope .sfv-cliente.sfv-glow::before{
  content:'';
  position:absolute;
  top:-3px; left:-3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border-radius: calc(var(--sfv-radius) + 3px);
  background: linear-gradient(45deg,#ff0000,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,#ff0000);
  background-size: 400%;
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
  animation:
    sfv-glowing 40s linear infinite,
    sfv-glow-life var(--sfv-glow-ms) ease-out forwards;
}
@keyframes sfv-glowing{
  0%   { background-position:   0% 0; }
  50%  { background-position: 400% 0; }
  100% { background-position:   0% 0; }
}
@keyframes sfv-glow-life{
  0%   { opacity: 0;   }
  10%  { opacity: .85; }
  85%  { opacity: .85; }
  100% { opacity: 0;   }
}

/* ===== Estado vazio das filas (admin + pública) ===== */
.sfv-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  margin: 10px 0 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,.55);
  border: 1px dashed rgba(15,23,42,.25);
  border-radius: 12px;
  text-align:center;
  color:#0f172a;
}
.sfv-empty .sfv-empty-emoji{ font-size: 20px; line-height:1; }
.sfv-empty .sfv-empty-title{ font-weight:700; }
.sfv-empty .sfv-empty-sub{ opacity:.75; font-weight:600; }

/* =================== /SFV (escopado) =================== */

/* ===== [SFV PATCH] Wrap “Em Atendimento” – INÍCIO ===================== */
.sfv-scope{
  --sfv-wrap-gap: .9rem;
  --sfv-wrap-radius: 14px;
  --sfv-wrap-pad-y: 15px;
  --sfv-wrap-pad-x: 15px;
  --sfv-wrap-border: 2px;
  --sfv-wrap-shadow: 0 8px 24px rgba(2, 6, 23, .10);

  /* Config Título "Em Atendimento" */
  --sfv-wrap-bg: color-mix(in srgb, var(--sfv-surface-3) 40%, transparent);
  --sfv-wrap-border-color: var(--sfv-success);
  --sfv-wrap-title-size: 1.2rem;
  --sfv-wrap-title-weight: 700;
  --sfv-wrap-title-color: var(--sfv-text-1);

  /* Público */
  --sfv-wrap-timer-size: 1.4rem;
  --sfv-wrap-timer-weight: 700;
  --sfv-wrap-timer-color: var(--sfv-text-1);
  --sfv-wrap-timer-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Admin */
  --sfv-wrap-timer--admin-size: 4rem;
  --sfv-wrap-timer--admin-weight: 700;
  --sfv-wrap-timer--admin-color: var(--sfv-text-admin);
  --sfv-wrap-timer--admin-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sfv-wrap-halo-color: rgba(22, 163, 74, .25);
  --sfv-wrap-halo-width: 2px;
  --sfv-wrap-halo-offset: 2px;
}

/* Variações por turno */
.sfv-scope.sfv--matutino{  --sfv-wrap-border-color: #2aa96a; }
.sfv-scope.sfv--vespertino{--sfv-wrap-border-color: #4e7df2; }

/* A) Wrap como card */
.sfv-scope .sfv-wrap{
  display:block;
  border: var(--sfv-wrap-border) solid var(--sfv-wrap-border-color);
  border-radius: var(--sfv-wrap-radius);
  padding: var(--sfv-wrap-pad-y) var(--sfv-wrap-pad-x);
  margin-bottom: var(--sfv-wrap-gap);
  background: var(--sfv-wrap-bg);
  box-shadow: var(--sfv-wrap-shadow);  
}

/* B) Wrap real (envolve o #1) */
.sfv-scope .sfv-destaque-wrap{
  border: var(--sfv-wrap-border) solid var(--sfv-wrap-border-color);
  border-radius: var(--sfv-wrap-radius);
  padding: var(--sfv-wrap-pad-y) var(--sfv-wrap-pad-x);
  margin-bottom: var(--sfv-wrap-gap);
  background: var(--sfv-wrap-bg);
  box-shadow: var(--sfv-wrap-shadow);
  row-gap: var(--sfv-row-gap);
}

/* Espaço entre cabeçalho e corpo */
.sfv-scope{ --sfv-wrap-head-body-gap: 14px; }
.sfv-scope .sfv-destaque-wrap .sfv-wrap-body{ margin-top: var(--sfv-wrap-head-body-gap); }

/* Cabeçalho padrão (público) */
.sfv-scope .sfv-wrap-head{
  display:flex; align-items:center; gap:.6rem;
  margin-bottom:.5rem;
}
.sfv-scope .sfv-wrap-title{
  font-size: var(--sfv-wrap-title-size);
  font-weight: var(--sfv-wrap-title-weight);
  color: var(--sfv-wrap-title-color);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.sfv-scope .sfv-wrap-title::before{
  content: "✂️";
  font-size: 1rem;
  line-height: 1;
  opacity: .9;
}
.sfv-scope .sfv-wrap-timer{
  margin-left:auto;
  font-family: var(--sfv-wrap-timer-font);
  font-size: var(--sfv-wrap-timer-size);
  font-weight: var(--sfv-wrap-timer-weight);
  color: var(--sfv-wrap-timer-color);
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  white-space: nowrap;
}

/* Relógio administrativo com a MESMA base do público */
.sfv-scope .sfv-wrap-timer--admin{
  margin-left:auto;
  font-family: var(--sfv-wrap-timer--admin-font, var(--sfv-wrap-timer-font));
  font-size:   var(--sfv-wrap-timer--admin-size, var(--sfv-wrap-timer-size));
  font-weight: var(--sfv-wrap-timer--admin-weight, var(--sfv-wrap-timer-weight));
  color:       var(--sfv-wrap-timer--admin-color, var(--sfv-wrap-timer-color));
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  white-space: nowrap;
}

/* ===== [NOVO] Cabeçalho ADMIN empilhado e CENTRALIZADO ===== */
#sfv-admin-fila .sfv-destaque-wrap .sfv-wrap-head--admin{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  row-gap: .5rem;
  margin-bottom: .5rem;

  /* centralização */
  justify-items: center;
  align-items: center;
  text-align: center;
}
/* título (linha 1) */
#sfv-admin-fila .sfv-destaque-wrap .sfv-wrap-head--admin .sfv-wrap-title{
  order: 1;
  justify-self: center;
  margin-bottom: 15px;
}
/* relógio admin (linha 2) */
#sfv-admin-fila .sfv-destaque-wrap .sfv-wrap-head--admin .sfv-wrap-timer--admin{
  order: 2;
  justify-self: center;
  margin-left: 0;
  margin-bottom: 15px;
}
/* fallback: classe pública como relógio no admin */
#sfv-admin-fila .sfv-destaque-wrap .sfv-wrap-head--admin .sfv-wrap-timer{
  order: 2;
  justify-self: center;
  margin-left: 0;
}
/* botões (linha 3) */
#sfv-admin-fila .sfv-destaque-wrap .sfv-wrap-head--admin .sfv-wrap-actions{
  order: 3;
  justify-self: center;
  display: inline-flex;
  gap: .45rem;
  justify-content: center;
}

/* Halo no primeiro cliente dentro do wrap */
.sfv-scope .sfv-wrap-body .sfv-cliente:first-child{
  outline: var(--sfv-wrap-halo-width) solid var(--sfv-wrap-halo-color);
  outline-offset: var(--sfv-wrap-halo-offset);
  border-radius: calc(var(--sfv-radius) - 2px);
}

/* Modificadores prontos */
.sfv-scope .sfv-destaque-wrap.is-no-timer .sfv-wrap-timer{ display:none; }
.sfv-scope .sfv-wrap--compact{
  --sfv-wrap-gap: .6rem;
  --sfv-wrap-radius: 10px;
  --sfv-wrap-pad-y: 6px;
  --sfv-wrap-pad-x: 8px;
  --sfv-wrap-title-size: .95rem;
  --sfv-wrap-timer-size: 1rem;
}

/* Responsivo leve */
@media (max-width:480px){
  .sfv-scope .sfv-wrap-title{ font-size: calc(var(--sfv-wrap-title-size) - .06rem); }
  .sfv-scope .sfv-wrap-timer{ font-size: calc(var(--sfv-wrap-timer-size) - .06rem); }
  .sfv-scope .sfv-wrap-timer--admin{ font-size: calc(var(--sfv-wrap-timer--admin-size, var(--sfv-wrap-timer-size)) - .06rem); }
}
/* ===== [SFV PATCH] Wrap “Em Atendimento” – FIM ======================= */

/* ===== [SFV PATCH] Força visual “digital” do relógio (mais específico) ===== */
#sfv-admin-fila .sfv-destaque-wrap .sfv-wrap-head .sfv-wrap-timer,
#sfv-public-fila .sfv-destaque-wrap .sfv-wrap-head .sfv-wrap-timer,
#sfv-admin-fila .sfv-destaque-wrap .sfv-wrap-head .sfv-wrap-timer--admin{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1;
  letter-spacing: .03em;
  white-space: nowrap;
}

/* ===== Wrap fixo de horários (abaixo do formulário) ===== */
.sfv-scope #sfv-horarios-dia{
  margin:16px auto 0;
  max-width:760px;
  background:#c18056;
  border:1px solid #DFE6EE;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(2,6,23,.08);
  padding:16px 18px;
  font-size: 1rem;
  line-height: 1.35;
}
.sfv-scope #sfv-horarios-dia .sfv-hlist{
  list-style:none; 
  margin:0; 
  padding:0; 
  display:grid; 
  gap:8px;
}
/* rótulos + valores */
.sfv-scope #sfv-horarios-dia .sfv-hlist li{
  font-weight:600; 
  color:#0f172a;
  font-size: 1.0625rem;
}
/* valores (os spans .h) */
.sfv-scope #sfv-horarios-dia .sfv-hlist .h{
  color:#e11d48; 
  font-weight:800; 
  font-size: 1.1875rem;
}

.sfv-lista{
  display: flex;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  background-color: #f4f8fd;
  border-radius: 10px;
  justify-content: center;
  text-align: center;  
}

/* opcional: responsivo leve */
@media (max-width: 480px){
  .sfv-scope #sfv-horarios-dia .sfv-hlist li{ font-size: 1rem; }
  .sfv-scope #sfv-horarios-dia .sfv-hlist .h{ font-size: 1.125rem; }
}