/* =====================================================================
   assets/ui/atendente.css — TELA DO ATENDENTE no padrão "premium" (2026-09-29, fase 2)
   ---------------------------------------------------------------------
   Carregado pelo index.php logo depois do seu <style>. Não troca nenhum ID nem função:
   só a aparência. Base neutra (branco, cinzas, "tinta" quase preta), cor só quando
   significa algo (âmbar = chamando, azul = em atendimento, vermelho = prioridade/erro).
   Seletores com "html body" para vencer o <style> da própria tela; !important só contra
   style="" escrito direto no HTML ou no JavaScript.
   ===================================================================== */
@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; }

:root {
  --ui-bg: #fafafa; --ui-panel: #fff; --ui-hover: #f4f4f5; --ui-line: #ebebeb; --ui-line-2: #e4e4e7;
  --ui-t1: #09090b; --ui-t2: #52525b; --ui-t3: #a1a1aa; --ui-ink: #18181b; --ui-ink-2: #27272a;
  --ui-acc: #4f46e5;
  --ui-ok: #15803d; --ui-ok-s: #f0fdf4; --ui-ok-l: #bbf7d0;
  --ui-warn: #b45309; --ui-warn-s: #fffbeb; --ui-warn-l: #fde68a;
  --ui-bad: #b91c1c; --ui-bad-s: #fef2f2; --ui-bad-l: #fecaca;
  --ui-info: #1d4ed8; --ui-info-s: #eff6ff; --ui-info-l: #bfdbfe;
  --ui-r: 14px; --ui-r-sm: 9px;
  --ui-sh: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
  --ui-sh-md: 0 6px 24px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --ui-sh-lg: 0 16px 48px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.05);
  --ui-ease: cubic-bezier(.2,.8,.2,1);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
html body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: var(--ui-bg) !important; color: var(--ui-t1);
  letter-spacing: -.006em;
}
html body ::selection { background: #e0e7ff; }
html body :focus-visible { outline: 2px solid var(--ui-acc); outline-offset: 2px; }
html body .text-muted { color: var(--ui-t2) !important; }
.ui-kbd, html body .atalhos-legenda .tecla, html body .aa-btn small {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 5px; font: 600 11px/1 "Inter", system-ui, sans-serif !important;
  letter-spacing: 0; opacity: 1 !important; vertical-align: 1px;
  background: var(--ui-panel); color: var(--ui-t2); border: 1px solid var(--ui-line-2);
  box-shadow: 0 1px 0 var(--ui-line-2);
}

/* ---------- Faixa da licença: fina e discreta ---------- */
html body .alerta-licenca {
  background: var(--ui-panel) !important; color: var(--ui-t2) !important;
  border-bottom: 1px solid var(--ui-line); font-size: 12px; font-weight: 500; padding: 6px 16px;
}
html body .alerta-licenca > i:first-child { color: var(--ui-alerta, var(--ui-ok)); }
html body .alerta-licenca:hover { color: var(--ui-t1) !important; }

/* ---------- Barra de cima ---------- */
html body .navbar-premium {
  background: rgba(255,255,255,.82) !important; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ui-line); box-shadow: none; min-height: 56px; padding: 0 20px;
}
html body .navbar-premium .navbar-brand { color: var(--ui-t1) !important; font-size: 15px; font-weight: 650; letter-spacing: -.015em; display: inline-flex; align-items: center; gap: 10px; }
html body .navbar-premium .navbar-brand > i { display: none; }
html body .navbar-premium .navbar-brand .ui-marca {
  width: 28px; height: 28px; border-radius: 8px; background: var(--ui-ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
html body .navbar-premium .navbar-brand .ui-sep { color: var(--ui-line-2); font-weight: 400; }
html body .navbar-premium .navbar-brand .ui-dep { color: var(--ui-t2); font-weight: 500; }
html body .navbar-premium .btn-outline-light,
html body .navbar-premium .btn-light {
  background: var(--ui-panel) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line-2) !important;
  border-radius: 9px !important; font-weight: 550; font-size: 13px; height: 34px; display: inline-flex; align-items: center; gap: 7px;
  box-shadow: var(--ui-sh); transform: none !important;
}
html body .navbar-premium .btn-outline-light:hover, html body .navbar-premium .btn-light:hover { background: var(--ui-hover) !important; }
html body .navbar-premium .btn-outline-light i { color: var(--ui-t2); }
html body .navbar-premium .dropdown-menu, html body .dropdown-menu {
  border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: var(--ui-sh-lg); padding: 6px; font-size: 13.5px;
}
html body .dropdown-item { border-radius: 7px; padding: 7px 10px; }
html body .dropdown-item:hover { background: var(--ui-hover); }
html body .dropdown-item i { width: 18px; color: var(--ui-t3); }
html body .dropdown-item.text-danger i { color: inherit; }

/* Faixa vertical do departamento: vira uma etiqueta discreta */
html body .depto-vertical {
  background: var(--ui-panel) !important; color: var(--ui-t2) !important; border: 1px solid var(--ui-line);
  border-left: none; box-shadow: var(--ui-sh); font-weight: 600; font-size: 11.5px; letter-spacing: .02em; padding: 14px 6px;
}
html body .depto-vertical i { color: var(--ui-t3); }

html body .main-content { max-width: 1440px; margin: 0 auto; width: 100%; }

/* ---------- Seleção de balcão ---------- */
html body .card-selecao-premium { border: 1px solid var(--ui-line); border-radius: 20px; box-shadow: var(--ui-sh-md); padding: 44px 40px; }
html body .card-selecao-premium > .mb-4 > i { color: var(--ui-ink) !important; font-size: 2.6rem !important; }
html body .card-selecao-premium h3 { font-weight: 700; letter-spacing: -.025em; }
html body .card-selecao-premium .form-select { border-radius: 12px !important; border-color: var(--ui-line-2); font-size: 15px !important; height: 50px; }
html body .card-selecao-premium .btn-primary { background: var(--ui-ink) !important; border-radius: 12px !important; font-weight: 600; }

/* ---------- Cartão do atendente (quem está no balcão) ---------- */
html body .guiche-info-premium {
  background: var(--ui-panel) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line);
  border-radius: var(--ui-r); box-shadow: var(--ui-sh); padding: 14px 18px !important; margin-bottom: 14px;
}
html body .guiche-info-premium .operador-avatar { background: var(--ui-ink) !important; width: 40px; height: 40px; font-size: 15px; }
html body .guiche-info-premium .small.text-muted { font-size: 12.5px; }
html body .heartbeat-status {
  background: var(--ui-ok-s) !important; color: var(--ui-ok) !important; border: 1px solid var(--ui-ok-l);
  font-weight: 600; font-size: 11.5px; padding: 3px 10px;
}
html body .heartbeat-status i { color: #22c55e !important; animation: uiRespira 2.4s ease-in-out infinite; }
@keyframes uiRespira { 50% { opacity: .35; } }
html body .guiche-badge-premium {
  background: var(--ui-ink) !important; color: #fff !important; border-radius: 10px !important;
  padding: 8px 14px !important; font-weight: 650; font-size: 14px; gap: 8px !important;
}
html body .guiche-badge-premium i { opacity: .6; font-size: 12px; }
html body .btn-trocar-premium {
  background: var(--ui-panel) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line-2) !important;
  border-radius: 10px !important; padding: 8px 14px !important; font-weight: 550; font-size: 13.5px; box-shadow: var(--ui-sh); transform: none !important;
}
html body .btn-trocar-premium:hover { background: var(--ui-hover) !important; }
html body .btn-trocar-premium i { color: var(--ui-t3); }

/* ---------- Botões de ação do atendimento (base comum) ---------- */
html body .aa-btn {
  border-radius: 11px !important; font-weight: 600 !important; font-size: 14.5px !important; padding: 11px 18px !important;
  display: inline-flex; align-items: center; gap: 8px; letter-spacing: -.01em; line-height: 1.2;
  background: var(--ui-panel) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line-2) !important;
  box-shadow: var(--ui-sh); transition: background .15s, transform .08s, box-shadow .15s !important; filter: none !important;
}
html body .aa-btn:hover { background: var(--ui-hover) !important; }
html body .aa-btn:active { transform: scale(.97); }
html body .aa-btn i { font-size: 13px; color: var(--ui-t2); }
html body .aa-btn small { margin-left: 2px; }
/* principal = tinta */
html body .aa-btn.aa-btn-concluir, html body #btnChamarProx, html body #btnAtenderChamado {
  background: var(--ui-ink) !important; color: #fff !important; border-color: var(--ui-ink) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08);
}
html body .aa-btn.aa-btn-concluir:hover, html body #btnChamarProx:hover, html body #btnAtenderChamado:hover { background: var(--ui-ink-2) !important; }
html body .aa-btn.aa-btn-concluir i, html body #btnChamarProx i, html body #btnAtenderChamado i { color: #fff; opacity: .75; }
html body .aa-btn.aa-btn-concluir small, html body #btnChamarProx small, html body #btnAtenderChamado small {
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.18); box-shadow: none;
}
html body #btnChamarProx { padding: 14px 26px !important; font-size: 15.5px !important; }
/* perigo = texto vermelho */
html body .aa-btn.aa-btn-cancelar, html body #btnExcluirChamado { color: var(--ui-bad) !important; }
html body .aa-btn.aa-btn-cancelar i, html body #btnExcluirChamado i { color: var(--ui-bad); }
html body .aa-btn.aa-btn-cancelar:hover, html body #btnExcluirChamado:hover { background: var(--ui-bad-s) !important; border-color: var(--ui-bad-l) !important; }
html body #btnRechamarUltima i { color: var(--ui-warn); }
html body .aa-extras-badge { background: var(--ui-ink) !important; color: #fff !important; }

/* ---------- "Atendendo agora" (cartão principal) ---------- */
html body #atendimentoAtual.atendimento-atual {
  background: var(--ui-panel) !important; color: var(--ui-t1) !important;
  border: 1px solid var(--ui-line); border-radius: 18px; box-shadow: var(--ui-sh-md);
  padding: 22px 24px !important; position: relative; overflow: hidden; gap: 18px 24px;
}
html body #atendimentoAtual.atendimento-atual::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ui-info);
}
html body #atendimentoAtual .aa-esq { gap: 22px; align-items: center; }
html body #atendimentoAtual .aa-senha {
  font-size: clamp(2.8rem, 5vw, 4.2rem) !important; font-weight: 750 !important; letter-spacing: -.045em !important;
  line-height: .95; color: var(--ui-t1); font-variant-numeric: tabular-nums;
}
html body .aa-senha.ui-entrou { animation: uiEntrou .5s var(--ui-ease); }
@keyframes uiEntrou { from { opacity: 0; transform: translateY(8px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
html body #atendimentoAtual .aa-info .aa-label {
  display: inline-flex; align-items: center; gap: 7px; opacity: 1; color: var(--ui-info);
  font-size: 11px; font-weight: 650; letter-spacing: .07em; margin-bottom: 3px;
}
html body #atendimentoAtual .aa-info .aa-label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
html body #atendimentoAtual .aa-cliente { font-size: 19px !important; font-weight: 650 !important; letter-spacing: -.02em; color: var(--ui-t1); }
html body #atendimentoAtual .aa-servico { color: var(--ui-t2); opacity: 1 !important; font-weight: 500 !important; font-size: 14px !important; margin-top: 2px; }
html body #atendimentoAtual .aa-tempo { color: var(--ui-t3); opacity: 1; font-size: 13px; margin-top: 4px; font-variant-numeric: tabular-nums; }
html body #atendimentoAtual .aa-tempo i { color: var(--ui-t3); }
html body #atendimentoAtual .aa-motivo {
  display: inline-flex; align-items: center; gap: 6px; color: var(--ui-bad) !important; background: var(--ui-bad-s);
  border: 1px solid var(--ui-bad-l); border-radius: 999px; padding: 2px 10px; font-size: 12px !important; font-weight: 600 !important; margin: 4px 0 2px !important;
}
html body #atendimentoAtual .aa-motivo[style*="none"] { display: none !important; }
html body #atendimentoAtual .aa-recado {
  background: var(--ui-info-s) !important; color: var(--ui-info); border: 1px solid var(--ui-info-l); border-radius: 10px;
}
html body #atendimentoAtual .aa-obs { border-top: 1px solid var(--ui-line); padding-top: 14px; margin-top: 2px; }
html body #atendimentoAtual .aa-obs label { color: var(--ui-t3); opacity: 1; font-size: 11px; font-weight: 600; letter-spacing: .06em; }
html body #atendimentoAtual .aa-obs textarea {
  background: var(--ui-bg) !important; border: 1px solid var(--ui-line-2) !important; color: var(--ui-t1) !important;
  border-radius: 10px !important; font: 14px/1.45 "Inter", system-ui, sans-serif !important; padding: 10px 12px !important;
}
html body #atendimentoAtual .aa-obs textarea::placeholder { color: var(--ui-t3) !important; }
html body #atendimentoAtual .aa-obs textarea:focus { background: #fff !important; border-color: var(--ui-t3) !important; box-shadow: 0 0 0 3px rgba(24,24,27,.06); }

/* ---------- Barra de ação: "Pronto para o próximo" / "Chamando agora" ---------- */
html body #acaoChamar.atendimento-atual {
  background: var(--ui-panel) !important; color: var(--ui-t1) !important;
  border: 1px solid var(--ui-line); border-radius: 18px; box-shadow: var(--ui-sh-md);
  padding: 18px 20px 18px 22px !important; gap: 16px 20px; transition: border-color .3s, box-shadow .3s, background .3s;
}
html body #acaoChamar #acaoIcone {
  color: var(--ui-t1) !important; font-size: 18px !important; width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--ui-hover); border: 1px solid var(--ui-line);
}
html body #acaoChamar .aa-cliente { color: var(--ui-t1) !important; font-size: 18px !important; font-weight: 650 !important; letter-spacing: -.02em; }
html body #acaoChamar .aa-tempo { color: var(--ui-t2) !important; font-size: 13.5px; opacity: 1; }
html body #acaoChamar #acaoLabel {
  color: var(--ui-warn) !important; font-weight: 650; font-size: 11px; letter-spacing: .07em; opacity: 1;
  display: inline-flex; align-items: center; gap: 7px;
}
html body #acaoChamar #acaoLabel[style*="none"] { display: none !important; }
html body #acaoChamar #acaoLabel::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; animation: uiPulso 1.6s ease-out infinite;
}
@keyframes uiPulso { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); } 100% { box-shadow: 0 0 0 9px rgba(245,158,11,0); } }
/* chamando: sem piscar o fundo inteiro — anel âmbar suave */
html body #acaoChamar.chamando-pulse {
  animation: uiChamando 2s ease-in-out infinite !important; background: #fffdf7 !important; border-color: var(--ui-warn-l);
}
@keyframes uiChamando { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.0), var(--ui-sh-md); } 50% { box-shadow: 0 0 0 5px rgba(245,158,11,.14), var(--ui-sh-md); } }
html body #acaoChamar.chamando-pulse #acaoIcone { background: var(--ui-warn-s); border-color: var(--ui-warn-l); color: var(--ui-warn) !important; }

/* cronômetro da chamada */
html body .chamado-timer-pill {
  background: var(--ui-panel) !important; border: 1px solid var(--ui-line-2) !important; color: var(--ui-t1) !important;
  font: 650 26px/1 "Inter", system-ui, sans-serif !important; letter-spacing: -.02em !important; font-variant-numeric: tabular-nums;
  border-radius: 12px !important; padding: 9px 14px !important; min-width: 108px; box-shadow: var(--ui-sh);
}
html body .chamado-timer-pill i { color: var(--ui-t3) !important; font-size: 14px !important; }
html body .chamado-timer-pill.urgente { background: var(--ui-bad-s) !important; border-color: var(--ui-bad-l) !important; color: var(--ui-bad) !important; animation: none !important; }
html body .chamado-timer-pill.urgente i { color: var(--ui-bad) !important; }

/* legenda de atalhos */
html body .atalhos-legenda { color: var(--ui-t3) !important; font-size: 12px !important; background: none !important; border: none !important; padding: 2px 4px 14px !important; }
html body .atalhos-legenda > i { color: var(--ui-t3); }
html body .atalhos-legenda .tecla { margin: 0 3px 0 10px; }

/* ---------- Números do dia ---------- */
html body .cards-resumo-cab {
  background: var(--ui-panel) !important; border: 1px solid var(--ui-line) !important; border-radius: 12px !important;
  color: var(--ui-t1) !important; font-weight: 600 !important; font-size: 14px !important; box-shadow: var(--ui-sh); padding: 11px 16px !important;
}
html body .cards-resumo-cab i:not(.seta) { color: var(--ui-t3); }
html body .stat-card-premium {
  background: var(--ui-panel) !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r) !important;
  box-shadow: var(--ui-sh) !important; transform: none !important; text-align: left; padding: 16px 18px !important;
}
html body .stat-card-premium::before { display: none !important; }
html body .stat-card-premium .value { color: var(--ui-t1) !important; font-weight: 700 !important; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
html body .stat-card-premium .label { color: var(--ui-t2) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 13px !important; }
html body .stat-card-premium .label i { color: var(--ui-t3); }
html body .stat-card-premium .icon { opacity: .07 !important; color: var(--ui-t1) !important; }
html body .stat-card-premium.meu { border: 1px solid var(--ui-line) !important; background: linear-gradient(180deg, #fff, #fcfcfd) !important; }
html body .meta-progresso-barra { background: var(--ui-hover) !important; }

/* ---------- Cartões e lista de fichas ---------- */
html body .card-premium, html body .card-collapsible, html body .main-content .card {
  background: var(--ui-panel); border: 1px solid var(--ui-line) !important; border-radius: var(--ui-r) !important;
  box-shadow: var(--ui-sh) !important; overflow: hidden;
}
html body .card-premium .card-header, html body .main-content .card > .card-header {
  background: var(--ui-panel) !important; color: var(--ui-t1) !important; border-bottom: 1px solid var(--ui-line) !important;
  font-weight: 650 !important; font-size: 14.5px !important; letter-spacing: -.01em; padding: 12px 16px !important;
}
html body .card-premium .card-header:hover { background: var(--ui-panel) !important; }
html body .card-premium .card-header > span > i, html body .main-content .card > .card-header > span > i { color: var(--ui-t3) !important; margin-right: 4px; }
html body .main-content .card-collapsible > .card-header .fa-chevron-up, html body .main-content .card-collapsible > .card-header .fa-chevron-down { color: var(--ui-t3) !important; }
html body .main-content .card-collapsible.collapsed > .card-header { border-bottom: none !important; }
html body .main-content .card-body[style*="f8fafc"] { background: var(--ui-bg) !important; }

html body .lista-busca input {
  border: 1px solid var(--ui-line-2) !important; border-radius: 9px !important; height: 34px; font-size: 13.5px !important;
  background: var(--ui-bg); transition: border-color .15s, box-shadow .15s, background .15s;
}
html body .lista-busca input:focus { background: #fff; border-color: var(--ui-t3) !important; box-shadow: 0 0 0 3px rgba(24,24,27,.06); }
html body .lista-busca i { color: var(--ui-t3) !important; }
html body .main-content .btn-success, html body .main-content .btn-primary {
  background: var(--ui-ink) !important; border-color: var(--ui-ink) !important; color: #fff !important;
  border-radius: 9px !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
html body .main-content .btn-success:hover, html body .main-content .btn-primary:hover { background: var(--ui-ink-2) !important; }
html body .main-content .card-premium .card-header .btn-success { height: 34px; display: inline-flex; align-items: center; gap: 6px; }

/* legenda de cores da lista (chips) */
html body .card-premium > .px-3.pt-2 { border-bottom: 1px solid var(--ui-line) !important; padding: 10px 16px !important; gap: 6px !important; align-items: center; }
html body .card-premium > .px-3.pt-2 > .badge {
  background: transparent !important; color: var(--ui-t2) !important; border: 1px solid var(--ui-line-2);
  font-weight: 500 !important; font-size: 12px !important; padding: 3px 9px !important; border-radius: 999px !important;
  display: inline-flex; align-items: center; gap: 6px;
}
.ui-ponto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
html body #listaContador { font-size: 12px; color: var(--ui-t3) !important; font-variant-numeric: tabular-nums; }

html body .regra-bar {
  background: var(--ui-bg) !important; color: var(--ui-t2) !important; border-bottom: 1px solid var(--ui-line) !important;
  font-size: 12.5px !important; padding: 8px 16px !important; border-top: none !important;
}
html body .regra-bar i { color: var(--ui-t3) !important; }
html body .regra-bar .btn-link { color: var(--ui-t2) !important; }

html body .table-senhas { font-size: 14px; }
html body .table-senhas thead th {
  background: var(--ui-panel) !important; color: var(--ui-t3) !important; font-size: 11.5px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important; border-bottom: 1px solid var(--ui-line) !important; padding: 10px 12px !important;
  position: sticky; top: 0; z-index: 1;
}
html body .table-senhas tbody tr { border-bottom: 1px solid #f1f1f2 !important; transition: background .12s; }
html body .table-senhas tbody tr:hover { background: #fafafa !important; }
html body .table-senhas td { padding: 11px 12px !important; color: var(--ui-t2); vertical-align: middle; font-variant-numeric: tabular-nums; }
html body .table-senhas .senha-destaque {
  color: var(--ui-t1) !important; font-weight: 700 !important; letter-spacing: -.01em; font-size: 15px !important;
  background: none !important; padding: 0 !important; -webkit-text-fill-color: currentColor !important;
  font-family: inherit !important;
}
html body .main-content .row.g-4 { margin-bottom: 14px; }
html body .main-content .btn-success i, html body .main-content .btn-primary i { color: #fff !important; opacity: .8; }
/* linhas por estado: fundo quase branco + filete à esquerda */
html body .linha-prioritario { background: #fffafa !important; border-left: none !important; box-shadow: inset 3px 0 0 #ef4444; }
html body .linha-chamado     { background: #fffdf5 !important; border-left: none !important; box-shadow: inset 3px 0 0 #f59e0b; }
html body .linha-atendimento { background: #f8fbff !important; border-left: none !important; box-shadow: inset 3px 0 0 #3b82f6; }
html body .badge-status {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px !important; padding: 3px 10px !important;
  font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; animation: none !important; border: 1px solid transparent;
}
html body .badge-status i { font-size: 10px; }
html body .badge-aguardando { background: var(--ui-hover) !important; color: var(--ui-t2) !important; border-color: var(--ui-line-2); }
html body .badge-chamado    { background: var(--ui-warn-s) !important; color: var(--ui-warn) !important; border-color: var(--ui-warn-l); }
html body .badge-atendimento{ background: var(--ui-info-s) !important; color: var(--ui-info) !important; border-color: var(--ui-info-l); }
html body .table-senhas .badge.bg-info {
  background: var(--ui-ink) !important; color: #fff !important; font-weight: 600 !important; font-size: 11px; border-radius: 6px; padding: 3px 7px;
}
html body .table-senhas .badge.bg-secondary {
  background: var(--ui-hover) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line-2); font-weight: 600; border-radius: 6px;
}
html body .table-senhas small[style*="dc2626"] { color: var(--ui-bad) !important; font-weight: 550 !important; }
html body .table-senhas small[style*="64748b"] { color: var(--ui-t2) !important; font-weight: 500 !important; }
html body .btn-action {
  border-radius: 8px !important; font-weight: 550 !important; font-size: 12.5px !important; padding: 5px 11px !important;
  text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; transform: none !important;
}
html body .btn-action.btn-secondary { background: var(--ui-hover) !important; color: var(--ui-t3) !important; border: 1px solid var(--ui-line) !important; opacity: 1; }
html body .btn-atender, html body .btn-chamar-action { background: var(--ui-ink) !important; color: #fff !important; }
html body .btn-concluir { background: var(--ui-panel) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line-2) !important; }
html body .btn-excluir { background: var(--ui-panel) !important; color: var(--ui-bad) !important; border: 1px solid var(--ui-bad-l) !important; }
html body .drag-handle { color: var(--ui-line-2) !important; }
html body tr:hover .drag-handle { color: var(--ui-t3) !important; }
html body .prioridade-limite-badge { border-radius: 999px; font-weight: 600; }

/* balcões em operação */
html body .guiche-card-premium {
  background: var(--ui-panel) !important; border: 1px solid var(--ui-line) !important; border-radius: 12px !important;
  box-shadow: var(--ui-sh) !important; transform: none !important;
}
html body .guiche-card-premium .guiche-numero { color: var(--ui-t1) !important; font-weight: 700; letter-spacing: -.02em; }
html body .guiche-card-premium .guiche-senha { color: var(--ui-t1) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html body .btn-copiar-premium { background: var(--ui-ink) !important; border-radius: 9px !important; font-weight: 600; transform: none !important; }
html body .qr-code-container #qrcode { border: 1px solid var(--ui-line); box-shadow: var(--ui-sh) !important; border-radius: 14px !important; }

/* meus atendimentos */
html body .meu-atend-pill { background: var(--ui-panel) !important; border: 1px solid var(--ui-line-2) !important; color: var(--ui-t2) !important; }
html body .meu-atend-pill .qtd { background: var(--ui-ink) !important; }
html body .meu-atend-card { background: var(--ui-panel) !important; border: 1px solid var(--ui-line) !important; border-left: 3px solid var(--ui-ok) !important; border-radius: 10px !important; box-shadow: none !important; }
html body .meu-atend-card.cancelado { border-left-color: var(--ui-bad) !important; }
html body .meu-atend-search, html body .meu-atend-ordem { border-radius: 9px !important; border-color: var(--ui-line-2) !important; }
html body .meu-atend-paginacao button { border-radius: 8px !important; }
html body .meu-atend-paginacao button:hover:not(:disabled) { background: var(--ui-ink) !important; border-color: var(--ui-ink) !important; }

/* ---------- Janelas (modais) ---------- */
html body .modal-content { border: none !important; border-radius: 18px !important; box-shadow: var(--ui-sh-lg) !important; overflow: hidden; }
html body .modal-header, html body .modal-header[style] {
  background: var(--ui-panel) !important; color: var(--ui-t1) !important; border-bottom: 1px solid var(--ui-line) !important;
  border-radius: 0 !important; padding: 16px 20px !important;
}
html body .modal-header .modal-title { font-weight: 650; font-size: 16px; letter-spacing: -.015em; }
html body .modal-header .modal-title i { color: var(--ui-t3); }
html body .modal-header .btn-close-white { filter: none !important; }
html body .modal-footer { border-top: 1px solid var(--ui-line) !important; background: var(--ui-bg); }
html body .modal .btn-primary, html body .modal .btn-success { background: var(--ui-ink) !important; border-color: var(--ui-ink) !important; color: #fff !important; border-radius: 9px !important; font-weight: 600; }
html body .modal .btn-secondary, html body .modal .btn-light, html body .modal .btn-outline-secondary {
  background: var(--ui-panel) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line-2) !important; border-radius: 9px !important; font-weight: 550;
}
html body .form-control, html body .form-select { border-color: var(--ui-line-2); border-radius: 9px; }
html body .form-control:focus, html body .form-select:focus { border-color: var(--ui-t3); box-shadow: 0 0 0 3px rgba(24,24,27,.06); }
html body .form-check-input:checked { background-color: var(--ui-ink); border-color: var(--ui-ink); }
html body .enc-dep, html body .enc-card { border: 1px solid var(--ui-line-2) !important; background: var(--ui-panel) !important; border-radius: 12px !important; }
html body .enc-dep:hover, html body .enc-card:hover { border-color: var(--ui-t3) !important; background: var(--ui-bg) !important; }
html body .enc-card.sel { border-color: var(--ui-ink) !important; box-shadow: 0 0 0 1px var(--ui-ink) !important; background: var(--ui-panel) !important; }
html body .enc-voltar { background: var(--ui-hover) !important; color: var(--ui-t1) !important; border-radius: 8px !important; }

/* SweetAlert2 */
html body .swal2-popup { font-family: "Inter", system-ui, sans-serif !important; border-radius: 18px !important; padding: 1.6em 1.4em 1.4em; }
html body .swal2-title { font-weight: 650 !important; letter-spacing: -.02em; color: var(--ui-t1) !important; font-size: 1.35em !important; }
html body .swal2-html-container { color: var(--ui-t2) !important; font-size: 1em !important; }
html body .swal2-styled { border-radius: 10px !important; font-weight: 600 !important; box-shadow: none !important; }
html body .swal2-styled.swal2-cancel { background: var(--ui-panel) !important; color: var(--ui-t1) !important; border: 1px solid var(--ui-line-2) !important; }

/* aviso rápido do rodapé */
html body .toast-notificacao {
  background: var(--ui-ink) !important; color: #fff !important; border-radius: 12px !important; font-size: 13.5px !important; font-weight: 500;
  padding: 11px 16px !important; box-shadow: var(--ui-sh-lg) !important; border: 1px solid rgba(255,255,255,.08);
}

/* rodapé */
html body .footer-premium { background: transparent !important; color: var(--ui-t3) !important; border-top: 1px solid var(--ui-line); font-size: 12px !important; }
html body .footer-premium a { color: var(--ui-t2) !important; }

/* movimento suave ao entrar */
@media (prefers-reduced-motion: no-preference) {
  html body .animate-fade-in { animation: uiSobe .45s var(--ui-ease) both !important; }
  @keyframes uiSobe { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 768px) {
  html body .navbar-premium { padding: 0 12px; }
  html body .navbar-premium .navbar-brand .ui-sep, html body .navbar-premium .navbar-brand .ui-dep { display: none; }
  html body .guiche-info-premium { text-align: left !important; align-items: stretch !important; }
  html body #atendimentoAtual .aa-senha { font-size: 2.6rem !important; }
}

/* retoques após o teste (2026-09-29) */
html body .stat-card-premium .icon, html body .stat-card-premium .icon i { opacity: 1 !important; color: #f1f1f2 !important; }
html body .main-content .card-collapsible > .card-header { display: flex !important; align-items: center; justify-content: space-between; }
html body .guiche-card-premium .guiche-numero { font-size: 16px !important; }
html body .guiche-card-premium .guiche-numero i { color: var(--ui-t3); font-size: 14px; }
html body .guiche-card-premium .guiche-senha { font-family: inherit !important; font-weight: 700 !important; font-size: 20px !important; letter-spacing: -.02em; }
html body .guiche-card-premium .guiche-status { color: var(--ui-t2) !important; font-size: 12px !important; }

/* =====================================================================
   DEFINIÇÃO + COR DA MARCA + COR DA BARRA (2026-09-29, v2.4.5 / v2.4.6)
   Mais contraste, barra de cima com a mesma cor do menu lateral do Admin e a cor da marca
   só nos detalhes. Valores abaixo = padrão; o index.php coloca por cima as cores calculadas
   por includes/ui_tema.php. Para voltar ao visual anterior: apagar este bloco (até o fim).
   ===================================================================== */
:root {
  --ui-bg: #e9ebef; --ui-line: #dcdfe5; --ui-line-2: #cfd3da; --ui-t2: #3f3f46; --ui-t3: #8a8a94;
  --ui-sh: 0 1px 2px rgba(16,24,40,.07), 0 3px 10px rgba(16,24,40,.05);
  --ui-sh-md: 0 1px 3px rgba(16,24,40,.08), 0 10px 28px rgba(16,24,40,.07);
  --ui-acc: #4f46e5; --ui-acc-rgb: 79,70,229; --ui-acc-s: #eef0ff; --ui-acc-t: #3730a3; --ui-acc-l: #818cf8; --ui-acc-b: #dfe3ff;
  --ui-sb-bg: #111114; --ui-sb-hover: #1c1c20; --ui-sb-line: #26262b; --ui-sb-t1: #fafafa; --ui-sb-t2: #a1a1aa; --ui-sb-t3: #6b6b75;
  --ui-sb-filete: #818cf8; --ui-sb-mk: #4f46e5; --ui-sb-mk-t: #ffffff;
}
html body .card-premium .card-header, html body .main-content .card > .card-header { background: #fafbfc !important; }
html body .stat-card-premium .value { font-weight: 700 !important; }
/* barra de cima e faixa da licença com a cor do menu */
html body nav.navbar-premium { background: var(--ui-sb-bg) !important; border-bottom-color: var(--ui-sb-line) !important; backdrop-filter: none; }
html body .navbar-premium .navbar-brand { color: var(--ui-sb-t1) !important; }
html body .navbar-premium .navbar-brand .ui-sep { color: var(--ui-sb-t3) !important; }
html body .navbar-premium .navbar-brand .ui-dep { color: var(--ui-sb-t2) !important; }
html body .navbar-premium .btn-outline-light, html body .navbar-premium .btn-light { background: var(--ui-sb-hover) !important; color: var(--ui-sb-t1) !important; border-color: var(--ui-sb-line) !important; box-shadow: none !important; }
html body .navbar-premium .btn-outline-light:hover, html body .navbar-premium .btn-light:hover { filter: brightness(1.08); }
html body .navbar-premium .btn-outline-light i { color: var(--ui-sb-t2) !important; }
html body .alerta-licenca { background: var(--ui-sb-bg) !important; color: var(--ui-sb-t2) !important; border-bottom-color: var(--ui-sb-line) !important; }
html body .alerta-licenca:hover { color: var(--ui-sb-t1) !important; }
html body .depto-vertical { background: var(--ui-sb-bg) !important; color: var(--ui-sb-t1) !important; border-color: var(--ui-sb-bg) !important; }
html body .depto-vertical i { color: var(--ui-sb-filete) !important; }
html body .navbar-premium .navbar-brand .ui-marca { background: var(--ui-sb-mk) !important; color: var(--ui-sb-mk-t) !important; }
/* cor da marca nos detalhes */
html body .guiche-badge-premium { background: var(--ui-acc) !important; }
html body .cards-resumo-cab i:not(.seta), html body .card-premium .card-header > span > i, html body .main-content .card > .card-header > span > i { color: var(--ui-acc) !important; }
html body .table-senhas .badge.bg-info { background: var(--ui-acc) !important; }
html body #acaoChamar:not(.chamando-pulse) #acaoIcone { background: var(--ui-acc-s) !important; border-color: var(--ui-acc-b) !important; color: var(--ui-acc) !important; }
html body .lista-busca input:focus, html body #atendimentoAtual .aa-obs textarea:focus, html body .form-control:focus, html body .form-select:focus { border-color: var(--ui-acc-l) !important; box-shadow: 0 0 0 3px rgba(var(--ui-acc-rgb),.14) !important; }
html body .form-check-input:checked { background-color: var(--ui-acc) !important; border-color: var(--ui-acc) !important; }