/* =====================================================================
   assets/ui/tv.css — TV (Painel do Cliente) no padrão "premium" (2026-09-29, fase 3)
   ---------------------------------------------------------------------
   Vale só quando o <html> tem a classe "tv-premium" (Configurações → TV → Geral da TV →
   Estilo da TV). "tv-claro" = versão clara. Estilo "Clássico" = nada daqui é aplicado e as
   cores personalizadas das outras abas voltam a valer.
   Os TAMANHOS (número, guichê, listas, quadros arrastados em "Ajustar layout") continuam
   vindo das configurações; aqui mudam só cores, fundos, bordas, fonte e animações.
   ===================================================================== */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html.tv-premium {
  --tv-bg: #09090b; --tv-bg-2: #0c0c0f; --tv-panel: #111114; --tv-panel-2: #18181b; --tv-line: #232329; --tv-line-2: #2e2e35;
  --tv-t1: #fafafa; --tv-t2: #a1a1aa; --tv-t3: #71717a;
  --tv-num-a: #ffffff; --tv-num-b: #a1a1aa;
  --tv-ok: #4ade80; --tv-ok-s: rgba(74,222,128,.10); --tv-ok-l: rgba(74,222,128,.28);
  --tv-warn: #fbbf24; --tv-warn-s: rgba(251,191,36,.10); --tv-warn-l: rgba(251,191,36,.30);
  --tv-bad: #f87171; --tv-bad-s: rgba(248,113,113,.10); --tv-bad-l: rgba(248,113,113,.30);
  --tv-glow: radial-gradient(1200px 600px at 70% -10%, rgba(var(--ui-acc-rgb, 99,102,241),.12), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgba(74,222,128,.05), transparent 60%);
  --tv-sh: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 60px rgba(0,0,0,.35);
}
html.tv-premium.tv-claro {
  --tv-bg: #f4f4f5; --tv-bg-2: #fafafa; --tv-panel: #ffffff; --tv-panel-2: #fafafa; --tv-line: #e4e4e7; --tv-line-2: #d4d4d8;
  --tv-t1: #09090b; --tv-t2: #52525b; --tv-t3: #a1a1aa;
  --tv-num-a: #09090b; --tv-num-b: #3f3f46;
  --tv-ok: #15803d; --tv-ok-s: #f0fdf4; --tv-ok-l: #bbf7d0;
  --tv-warn: #b45309; --tv-warn-s: #fffbeb; --tv-warn-l: #fde68a;
  --tv-bad: #b91c1c; --tv-bad-s: #fef2f2; --tv-bad-l: #fecaca;
  --tv-glow: radial-gradient(1200px 600px at 70% -10%, rgba(var(--ui-acc-rgb, 99,102,241),.07), transparent 60%);
  --tv-sh: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(0,0,0,.06);
}

/* ---------- Base ---------- */
html.tv-premium body {
  background-color: var(--tv-bg) !important; background-image: var(--tv-glow) !important; background-attachment: fixed !important;
  color: var(--tv-t1) !important;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased; letter-spacing: -.01em;
}
html.tv-premium body .card-premium, html.tv-premium body .chamada-carrossel, html.tv-premium body .guiche-card,
html.tv-premium body .item-senha, html.tv-premium body .historico-item, html.tv-premium body .card-header,
html.tv-premium body .chamada-numero, html.tv-premium body .chamada-status {
  font-family: "Inter", system-ui, sans-serif !important;
}
html.tv-premium body .text-muted { color: var(--tv-t3) !important; }

/* ---------- Barra de cima ---------- */
html.tv-premium body .navbar-premium {
  background: transparent !important; box-shadow: none !important; border: none !important;
  border-bottom: 1px solid var(--tv-line) !important; border-radius: 0 !important; opacity: 1 !important; padding: 14px 28px !important;
}
html.tv-premium body .navbar-premium .navbar-brand { color: var(--tv-t1) !important; font-weight: 650 !important; letter-spacing: -.02em; }
html.tv-premium body .navbar-premium .logo-icon { background: var(--tv-panel-2) !important; border: 1px solid var(--tv-line-2); }
html.tv-premium body .navbar-premium .logo-icon i { color: var(--tv-t1) !important; }
html.tv-premium body .subtitulo-sistema { color: var(--tv-t2) !important; opacity: 1 !important; font-weight: 450; }
html.tv-premium body .btn-admin {
  background: var(--tv-panel-2) !important; color: var(--tv-t1) !important; border: 1px solid var(--tv-line-2) !important;
  border-radius: 10px !important; font-weight: 550 !important; transform: none !important;
}
html.tv-premium body .btn-admin:hover { background: var(--tv-line) !important; }
html.tv-premium body .btn-admin[style*="ef4444"] { color: var(--tv-bad) !important; background: var(--tv-panel-2) !important; }
html.tv-premium body .relogio {
  background: none !important; box-shadow: none !important; color: var(--tv-t1) !important; padding: 0 6px !important;
  font: 600 1.6rem/1 "Inter", system-ui, sans-serif !important; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
html.tv-premium body .status-conexao {
  background: var(--tv-panel-2) !important; border: 1px solid var(--tv-line-2) !important; box-shadow: none !important; color: var(--tv-t2) !important;
}
html.tv-premium body .status-conexao.online i { color: var(--tv-ok) !important; }
html.tv-premium body .status-conexao.offline { color: var(--tv-bad) !important; border-color: var(--tv-bad-l) !important; }

/* ---------- Números ---------- */
html.tv-premium body .stat-card-premium {
  background: var(--tv-panel) !important; border: 1px solid var(--tv-line) !important; border-top: 1px solid var(--tv-line) !important;
  border-radius: 20px !important; box-shadow: var(--tv-sh) !important;
}
html.tv-premium body .stat-card-premium::before { display: none !important; }
html.tv-premium body .stat-card-premium .value { color: var(--tv-t1) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-weight: 700 !important; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
html.tv-premium body .stat-card-premium .label { color: var(--tv-t2) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }
html.tv-premium body .stat-card-premium .label i { color: var(--tv-t3) !important; }
html.tv-premium body .tempo-dep { border-color: var(--tv-line) !important; }
html.tv-premium body .tempo-dep-nome { color: var(--tv-t2) !important; }
html.tv-premium body .tempo-dep-valor { color: var(--tv-t1) !important; }

/* ---------- Faixa de avisos ---------- */
html.tv-premium body .info-carrossel { background: transparent !important; }
html.tv-premium body .info-item {
  background: var(--tv-panel) !important; color: var(--tv-t1) !important; border: 1px solid var(--tv-line) !important;
  box-shadow: none !important; font-family: "Inter", system-ui, sans-serif !important; font-weight: 550 !important; letter-spacing: -.02em !important;
}
html.tv-premium body .info-item i { color: var(--tv-t3) !important; }

/* ---------- Quadros (cards) ---------- */
html.tv-premium body .card-premium {
  background: var(--tv-panel) !important; border: 1px solid var(--tv-line) !important; border-radius: 22px !important; box-shadow: var(--tv-sh) !important;
}
html.tv-premium body .card-premium .card-header {
  background: transparent !important; color: var(--tv-t2) !important; border: none !important; border-left: none !important;
  border-bottom: 1px solid var(--tv-line) !important; font-weight: 600 !important; letter-spacing: .01em;
}
html.tv-premium body .card-premium .card-header:hover { background: transparent !important; }
html.tv-premium body .card-premium .card-header i { color: var(--tv-t3) !important; }
html.tv-premium body .card-premium .card-body { background: transparent !important; }

/* ---------- Chamada em destaque ---------- */
html.tv-premium body .chamada-carrossel {
  background: var(--tv-panel) !important; border: 1px solid var(--tv-line) !important; border-radius: 28px !important;
  box-shadow: var(--tv-sh) !important; overflow: hidden; isolation: isolate;
}
html.tv-premium body .chamada-carrossel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(600px 300px at 50% 0%, rgba(255,255,255,.05), transparent 70%);
}
html.tv-premium.tv-claro body .chamada-carrossel::before { background: radial-gradient(600px 300px at 50% 0%, rgba(0,0,0,.025), transparent 70%); }
/* aguardando */
html.tv-premium body #conteudoChamada > i.fa-3x { color: var(--tv-t3) !important; opacity: .45 !important; font-size: 2.2rem; }
html.tv-premium body .chamada-numero {
  color: var(--tv-t1) !important; letter-spacing: -.045em !important; line-height: .95; font-weight: 750 !important;
  font-variant-numeric: tabular-nums; margin: 18px 0 !important;
  background: linear-gradient(180deg, var(--tv-num-a) 30%, var(--tv-num-b)) !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; text-shadow: none !important;
}
html.tv-premium body .chamada-carrossel:not(.chamada-ativa) .chamada-numero { opacity: .35; }
html.tv-premium body .chamada-guiche { color: var(--tv-t1) !important; font-weight: 600 !important; letter-spacing: -.02em; }
html.tv-premium body .chamada-guiche i { color: var(--tv-t3) !important; margin-right: 4px; }
html.tv-premium body .chamada-status {
  display: inline-flex !important; align-items: center; gap: 10px; align-self: center;
  background: var(--tv-panel-2) !important; color: var(--tv-t2) !important; border: 1px solid var(--tv-line-2);
  border-radius: 999px !important; padding: 8px 18px !important; font-weight: 600 !important; font-size: .95rem;
  letter-spacing: .06em !important; animation: none !important;
}
html.tv-premium body .chamada-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tv-t3); }
html.tv-premium body .chamada-ativa .chamada-status { background: var(--tv-ok-s) !important; color: var(--tv-ok) !important; border-color: var(--tv-ok-l); }
html.tv-premium body .chamada-ativa .chamada-status::before { background: var(--tv-ok); animation: tvPonto 1.6s ease-out infinite; }
@keyframes tvPonto { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); } 100% { box-shadow: 0 0 0 12px rgba(74,222,128,0); } }
html.tv-premium body .sino-chamada i { color: var(--tv-ok) !important; font-size: 2rem; }
html.tv-premium body .chamada-nome { color: var(--tv-t2) !important; font-weight: 550 !important; }
html.tv-premium body .chamada-orgao { color: var(--tv-t2) !important; letter-spacing: .08em !important; font-weight: 650 !important; font-size: 1rem !important; }
html.tv-premium body .chamada-prioritaria-badge { background: var(--tv-bad-s) !important; color: var(--tv-bad) !important; border: 1px solid var(--tv-bad-l); font-weight: 650 !important; }
/* chegou uma chamada: anel verde + número entra com brilho (no lugar do fundo vermelho piscando) */
html.tv-premium body .chamada-carrossel.chamada-ativa {
  border-color: var(--tv-ok-l) !important; animation: tvAnel 2.4s ease-in-out infinite !important;
}
html.tv-premium body .chamada-carrossel.chamada-ativa.chamando { animation: tvChegou .9s ease-out 3, tvAnel 2.4s ease-in-out infinite !important; }
@keyframes tvAnel { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0), var(--tv-sh); } 50% { box-shadow: 0 0 0 8px rgba(74,222,128,.10), var(--tv-sh); } }
@keyframes tvChegou { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.45), var(--tv-sh); } 100% { box-shadow: 0 0 0 36px rgba(74,222,128,0), var(--tv-sh); } }
html.tv-premium body .chamada-carrossel.chamando .chamada-numero { animation: tvNumero .9s cubic-bezier(.2,.8,.2,1) both !important; }
@keyframes tvNumero { 0% { opacity: 0; transform: translateY(14px) scale(.94); filter: blur(10px); } 100% { opacity: 1; transform: none; filter: none; } }
html.tv-premium body .chamada-carrossel.chamando .fa-bell, html.tv-premium body .chamada-carrossel.chamando .fa-volume-up { animation: chamadaSacudir .5s ease-in-out 3; }
html.tv-premium body .nav-chamada { background: var(--tv-panel-2) !important; color: var(--tv-t1) !important; border: 1px solid var(--tv-line-2) !important; box-shadow: none !important; }
html.tv-premium body .indicador { background: var(--tv-line-2) !important; }
html.tv-premium body .indicador.ativo { background: var(--tv-t1) !important; }
html.tv-premium body .multi-chamadas { color: var(--tv-t2) !important; }
html.tv-premium body .badge-chamada { background: var(--tv-panel-2) !important; color: var(--tv-t1) !important; border: 1px solid var(--tv-line-2); }
html.tv-premium body .badge-chamada.ativa { background: var(--tv-t1) !important; color: var(--tv-bg) !important; }

/* ---------- Próximas fichas ---------- */
html.tv-premium body .item-senha {
  background: var(--tv-panel-2) !important; border: 1px solid var(--tv-line) !important; border-radius: 14px !important;
  box-shadow: none !important; transform: none !important;
}
html.tv-premium body .item-senha i { color: var(--tv-t3) !important; }
html.tv-premium body .item-senha .senha { color: var(--tv-t1) !important; font-family: inherit !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html.tv-premium body .item-senha .posicao { background: transparent !important; color: var(--tv-t3) !important; border: 1px solid var(--tv-line-2); font-weight: 600; }
html.tv-premium body .item-senha.prioritario { background: var(--tv-panel-2) !important; box-shadow: inset 3px 0 0 #ef4444 !important; border-left-color: var(--tv-line) !important; }
html.tv-premium body .fila-nome { color: var(--tv-t2) !important; }
html.tv-premium body .fila-departamento { color: var(--tv-t3) !important; letter-spacing: .04em; }
html.tv-premium body .motivo-fila { color: var(--tv-bad) !important; }

/* ---------- Últimas chamadas ---------- */
html.tv-premium body .historico-item { background: transparent !important; border-bottom: 1px solid var(--tv-line) !important; border-radius: 0 !important; }
html.tv-premium body .historico-item:hover { background: var(--tv-panel-2) !important; }
html.tv-premium body .historico-item:first-child .historico-senha { color: var(--tv-t1) !important; }
html.tv-premium body .historico-senha { color: var(--tv-t2) !important; font-family: inherit !important; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
html.tv-premium body .historico-item .historico-senha.prioritario { background: var(--tv-bad-s) !important; color: var(--tv-bad) !important; }
html.tv-premium body .historico-nome { color: var(--tv-t2) !important; }
html.tv-premium body .historico-guiche { background: var(--tv-panel-2) !important; color: var(--tv-t1) !important; border: 1px solid var(--tv-line-2); font-weight: 550; }
html.tv-premium body .historico-horario { color: var(--tv-t3) !important; font-variant-numeric: tabular-nums; }
html.tv-premium body .historico-status { font-weight: 550; }
html.tv-premium body .historico-departamento { color: var(--tv-t3) !important; }

/* ---------- Balcões ---------- */
html.tv-premium body .guiche-card, html.tv-premium body .guiche-card:has(.status-ocupado) {
  background: var(--tv-panel-2) !important; border: 1px solid var(--tv-line) !important; border-radius: 16px !important; box-shadow: none !important; transform: none !important;
}
html.tv-premium body .guiche-card:has(.status-ocupado) { box-shadow: inset 0 2px 0 var(--tv-ok) !important; }
html.tv-premium body .guiche-card .guiche-numero { color: var(--tv-t1) !important; letter-spacing: -.02em; }
html.tv-premium body .guiche-card .guiche-numero i { color: var(--tv-t3) !important; }
html.tv-premium body .guiche-card .guiche-senha { background: transparent !important; color: var(--tv-t1) !important; font-family: inherit !important; font-size: 1.3rem !important; letter-spacing: -.02em; }
html.tv-premium body .guiche-card .status-ocupado { color: var(--tv-ok) !important; }
html.tv-premium body .guiche-card .status-livre { color: var(--tv-t3) !important; }
html.tv-premium body .guiche-orgao { color: var(--tv-t3) !important; }
html.tv-premium body .guiche-atendente-nome { color: var(--tv-t2) !important; }
html.tv-premium body .guiche-atendente-foto { border-color: var(--tv-line-2) !important; background: var(--tv-line-2) !important; box-shadow: none !important; }
html.tv-premium body .guiche-card.guiche-chamando { border-color: var(--tv-ok-l) !important; animation: tvAnelPeq 1.6s ease-in-out infinite !important; }
@keyframes tvAnelPeq { 50% { box-shadow: 0 0 0 5px rgba(74,222,128,.12); } }

/* ---------- Vídeo ---------- */
html.tv-premium body .youtube-container .card-premium { background: #000 !important; border-color: var(--tv-line) !important; overflow: hidden; }

/* ---------- Rodapé e áudio ---------- */
html.tv-premium body .footer-painel { background: transparent !important; border-top: 1px solid var(--tv-line); box-shadow: none !important; }
html.tv-premium body .footer-painel, html.tv-premium body .footer-painel * { color: var(--tv-t3) !important; }
html.tv-premium body .footer-premium { background: transparent !important; color: var(--tv-t3) !important; }
html.tv-premium body .audio-menu-btn {
  background: var(--tv-panel-2) !important; color: var(--tv-t1) !important; border: 1px solid var(--tv-line-2) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) !important; border-radius: 12px !important; font-weight: 550;
}
html.tv-premium body .audio-dropdown { background: var(--tv-panel) !important; border: 1px solid var(--tv-line-2) !important; border-radius: 14px !important; box-shadow: 0 20px 50px rgba(0,0,0,.35) !important; }
html.tv-premium body .audio-dropdown-item { color: var(--tv-t1) !important; border-radius: 8px; }
html.tv-premium body .audio-dropdown-item:hover { background: var(--tv-panel-2) !important; }
html.tv-premium body .audio-dropdown-item i { color: var(--tv-t3) !important; }
html.tv-premium body .audio-dropdown-divider { background: var(--tv-line) !important; }

/* barras de rolagem discretas */
html.tv-premium body ::-webkit-scrollbar { width: 6px; height: 6px; }
html.tv-premium body ::-webkit-scrollbar-thumb { background: var(--tv-line-2); border-radius: 6px; }
html.tv-premium body ::-webkit-scrollbar-track { background: transparent; }
html.tv-premium body #avisoSom { background: var(--tv-panel-2) !important; color: var(--tv-t1) !important; border: 1px solid var(--tv-line-2); border-radius: 12px !important; font-weight: 550 !important; }
html.tv-premium body #avisoSom i { color: var(--tv-t3); }