/* Visual do discador sobre o Ligna UI (static/vendor/ligna-ui/ligna-ui.css): os tokens --lg-* são a fonte; aqui ficam os papéis do discador */
@font-face { font-family: "Exo 2"; src: url("../fonts/exo2-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  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: "Exo 2"; src: url("../fonts/exo2-latin-ext.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap;
  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"; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap;
  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: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); font-weight: 400 600; font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* marca (white-label troca só --lg-accent* e --lg-brand*): primária = azul Ligna da ação, secundária = noite da base */
  --primaria: var(--lg-accent);
  --primaria-forte: var(--lg-accent-hover);
  --primaria-claro: var(--lg-accent-soft);
  --primaria-texto: var(--lg-accent-text);
  --secundaria: var(--lg-brand);
  --secundaria-forte: var(--lg-brand-text);
  --secundaria-claro: var(--lg-brand-soft);
  --acao: var(--primaria);
  --acao-forte: var(--primaria-forte);
  --acao-claro: var(--primaria-claro);
  --acao-texto: var(--primaria-texto);
  /* texto sobre o azul da ação: branco nos dois temas, como o Ligna */
  --sobre-cor: var(--lg-on-accent);
  /* texto sobre preenchimento de estado (erro, atenção, sucesso): branco no claro, tinta noite no escuro */
  --sobre-estado: #ffffff;
  --ia: var(--lg-ai);
  --ia-forte: var(--lg-ai-hover);
  --ia-claro: var(--lg-ai-soft);
  --ia-texto: var(--lg-ai-text);
  --sinal: var(--lg-ciano-400);
  --gradiente: var(--lg-gradient);
  /* base */
  --fundo: var(--lg-bg);
  --superficie: var(--lg-surface);
  --superficie-2: var(--lg-surface-2);
  --linha: var(--lg-border);
  --linha-forte: var(--lg-border-strong);
  --texto: var(--lg-text);
  --suave: var(--lg-text-2);
  --foco: var(--lg-focus);
  /* estados */
  /* sucesso do Ligna um tom abaixo no claro: #17804a sobre o fundo suave dá 4,35:1 em selo de 12 px */
  --ok: #136b3e;
  --ok-claro: var(--lg-success-bg);
  --toque: var(--lg-warning);
  --toque-claro: var(--lg-warning-bg);
  --erro: var(--lg-danger);
  --erro-claro: var(--lg-danger-bg);
  --pausa: var(--lg-info);
  --pausa-claro: var(--lg-info-bg);
  /* menu lateral e faixa da chamada: noite da marca */
  --lateral: var(--lg-brand);
  --lateral-hover: rgb(255 255 255 / .08);
  --lateral-ativo: rgb(255 255 255 / .13);
  --lateral-texto: #dfe5f0;
  --lateral-grupo: #a9b5cc;
  --lateral-destaque: #8ab3ff;
  --faixa: var(--lg-noite-800);
  --faixa-2: rgb(255 255 255 / .1);
  --faixa-texto: #c8d1e2;
  --sombra: var(--lg-shadow-sm);
  --sombra-media: var(--lg-shadow-md);
  --sombra-alta: var(--lg-shadow-lg);
  --veu: var(--lg-overlay);
  /* blocos dos editores de fluxo, jornada e roteiro */
  --bloco-roxo: #145be0;
  --bloco-azul: #006a92;
  --bloco-ambar: #b4500a;
  --bloco-verde: #17804a;
  --bloco-violeta: #7a3df0;
  --bloco-vermelho: #c42b2b;
  --bloco-petroleo: #4a5e85;
  --raio: var(--lg-radius-lg);
  --raio-m: var(--lg-radius-md);
  --raio-p: var(--lg-radius-sm);
  --fonte: var(--lg-font-body);
  --fonte-titulo: var(--lg-font-display);
  --fonte-mono: var(--lg-font-mono);
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --sobre-estado: var(--lg-noite-950);
  --ok: var(--lg-success);
  --lateral: #0a1428;
  --lateral-hover: rgb(255 255 255 / .06);
  --lateral-ativo: rgb(138 179 255 / .14);
  --faixa: #102341;
  --faixa-2: rgb(255 255 255 / .08);
  --bloco-roxo: #5590ff;
  --bloco-azul: #5cd8ff;
  --bloco-ambar: #f39256;
  --bloco-verde: #4cc383;
  --bloco-violeta: #b898fa;
  --bloco-vermelho: #f07070;
  --bloco-petroleo: #9fadc8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font: 400 14px/1.55 var(--fonte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
.trocando-tema, .trocando-tema *, .trocando-tema *::before, .trocando-tema *::after { transition: none !important; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-family: var(--fonte-titulo); color: var(--texto); text-wrap: balance; }
h1 { font-size: 23px; font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: 16.5px; font-weight: 600; letter-spacing: -.005em; }
h3 { font-size: 14.5px; font-weight: 600; }
p { margin: 0; }
a { color: var(--acao-texto); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-color: var(--acao); }
code, kbd, samp { font-family: var(--fonte-mono); font-size: .92em; }
.suave { color: var(--suave); }
.pequeno { font-size: 12.5px; }
.num, .tabela td.direita, .numeros strong, .status-operador .tempo, .wa-dur { font-variant-numeric: tabular-nums; }
::selection { background: color-mix(in srgb, var(--acao) 28%, transparent); }

/* ---------- controles ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
  width: 100%; min-height: 38px;
  background: var(--superficie);
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--raio-m);
  padding: 7px 12px;
  transition: border-color var(--lg-dur), box-shadow var(--lg-dur);
}
:where(input, select, textarea):hover:not(:disabled, :focus) { border-color: var(--suave); }
:where(input, select, textarea)::placeholder { color: var(--suave); opacity: .8; }
:where(input, select, textarea):disabled { background: var(--superficie-2); color: var(--suave); cursor: not-allowed; border-style: dashed; }
:where(input[readonly]) { background: var(--superficie-2); }
:where(select) {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7690' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
:where(select[multiple]) { background-image: none; padding-right: 12px; }
:where(input[type="color"]) { width: 44px; height: 38px; padding: 3px; border: 1.5px solid var(--linha-forte); border-radius: var(--raio-m); background: var(--superficie); cursor: pointer; }
:where(input[type="file"]) { font-size: 13px; color: var(--suave); }
:where(input[type="file"])::file-selector-button {
  margin-right: 10px; padding: 7px 14px; border: 1.5px solid var(--linha-forte); border-radius: var(--raio-m);
  background: var(--superficie); color: var(--secundaria-forte); font: 600 13px var(--fonte-titulo); cursor: pointer;
}
:where(input[type="range"]) { width: 100%; accent-color: var(--acao); }
/* caixa e rádio do Ligna */
:where(input[type="checkbox"], input[type="radio"]) {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; vertical-align: -4px;
  border: 1.5px solid var(--linha-forte); border-radius: 5px; background: var(--superficie) center/13px no-repeat; cursor: pointer;
  transition: background-color var(--lg-dur), border-color var(--lg-dur);
}
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"]):hover:not(:disabled) { border-color: var(--acao); }
:where(input[type="checkbox"]):checked {
  background-color: var(--acao); border-color: var(--acao);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
:where(input[type="checkbox"]):indeterminate {
  background-color: var(--acao); border-color: var(--acao);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
:where(input[type="radio"]):checked { background: var(--acao); border-color: var(--acao); box-shadow: inset 0 0 0 3.5px var(--superficie); }
:where(input[type="checkbox"], input[type="radio"]):disabled { opacity: .5; cursor: not-allowed; }
/* interruptor: <input type="checkbox" class="interruptor"> */
input[type="checkbox"].interruptor {
  position: relative; width: 38px; height: 22px; border: 0; border-radius: 999px; background: var(--linha-forte); background-image: none;
}
input[type="checkbox"].interruptor::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform var(--lg-dur) var(--lg-ease);
}
input[type="checkbox"].interruptor:checked { background: var(--acao); }
input[type="checkbox"].interruptor:checked::after { transform: translateX(16px); }
textarea { resize: vertical; line-height: 1.5; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
:where(input, select, textarea):focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acao) 30%, transparent); }
:where(input[type="checkbox"], input[type="radio"]):focus { box-shadow: none; }
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
:where(input[type="radio"]):checked:focus-visible { box-shadow: inset 0 0 0 3.5px var(--superficie); }
:where(input, select, textarea)[aria-invalid="true"] { border-color: var(--erro); }

.btn {
  --_bg: var(--superficie); --_fg: var(--secundaria-forte); --_bd: var(--linha-forte); --_bg-h: var(--secundaria-claro); --_bd-h: var(--linha-forte);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px;
  border: 1.5px solid var(--_bd); background: var(--_bg); color: var(--_fg); border-radius: var(--raio-m);
  padding: 0 16px; cursor: pointer; white-space: nowrap; text-decoration: none; position: relative;
  font: 600 14px/1 var(--fonte-titulo); letter-spacing: .005em;
  transition: background var(--lg-dur) var(--lg-ease), border-color var(--lg-dur), color var(--lg-dur), transform var(--lg-dur), box-shadow var(--lg-dur);
}
.btn:hover { background: var(--_bg-h); border-color: var(--_bd-h); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primario { --_bg: var(--acao); --_fg: var(--sobre-cor); --_bd: var(--acao); --_bg-h: var(--acao-forte); --_bd-h: var(--acao-forte); box-shadow: 0 1px 2px color-mix(in srgb, var(--acao) 30%, transparent); }
.btn.secundario { --_bg: var(--lg-brand); --_fg: var(--lg-on-brand); --_bd: var(--lg-brand); --_bg-h: var(--lg-brand-hover); --_bd-h: var(--lg-brand-hover); }
.btn.ia { --_bg: var(--ia); --_fg: var(--lg-on-ai); --_bd: var(--ia); --_bg-h: var(--ia-forte); --_bd-h: var(--ia-forte); }
.btn.perigo { --_bg: var(--erro); --_fg: var(--sobre-estado); --_bd: var(--erro); --_bg-h: var(--lg-danger-hover); --_bd-h: var(--lg-danger-hover); }
.btn.discreto { --_bg: transparent; --_bd: transparent; --_fg: var(--suave); --_bg-h: var(--secundaria-claro); --_bd-h: transparent; }
.btn.discreto:hover { color: var(--texto); }
.btn.mini { min-height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: var(--raio-p); gap: 5px; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.mini svg { width: 14px; height: 14px; }

.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-width: 0; }
.campo > span { color: var(--texto); font-weight: 600; font-size: 13px; }
.campo .ajuda { color: var(--suave); font-weight: 400; font-size: 12px; line-height: 1.4; }
label:has(> input[type="checkbox"], > input[type="radio"]) { cursor: pointer; }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.linha.fim { justify-content: flex-end; }
.linha.entre { justify-content: space-between; }
.espaco { flex: 1; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* sem isto uma tabela larga alarga a coluna da grade e a página inteira rola de lado no celular */
.grade-2 > *, .grade-3 > * { min-width: 0; }
fieldset { min-width: 0; border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 12px 14px 14px; margin: 0; }
legend { padding: 0 6px; font: 600 13px var(--fonte-titulo); color: var(--texto); }
hr { border: 0; border-top: 1px solid var(--linha); margin: 6px 0; }

/* selo (Ligna badge): sempre cor + texto */
.etiqueta {
  --_c: var(--suave); --_bg: var(--superficie-2);
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  background: var(--_bg); color: var(--_c); border: 1px solid color-mix(in srgb, var(--_c) 20%, transparent);
  font: 600 12px/1.6 var(--fonte-titulo); white-space: nowrap; letter-spacing: .01em;
}
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.etiqueta.sem-ponto::before { display: none; }
.e-ok, .e-conectado, .e-ativa, .e-disponivel, .e-finalizado-ok { --_bg: var(--ok-claro); --_c: var(--ok); }
.e-toque, .e-tocando, .e-chamando, .e-conectando, .e-aguardando_qr, .e-reconectando, .e-iniciando, .e-pendente, .e-retornar, .e-pausada { --_bg: var(--toque-claro); --_c: var(--toque); }
.e-erro, .e-encerrada, .e-banido, .e-deslogado, .e-qr_expirado, .e-offline-alerta, .e-bloqueado { --_bg: var(--erro-claro); --_c: var(--erro); }
.e-pausa { --_bg: var(--pausa-claro); --_c: var(--pausa); }
.e-em_ligacao { --_bg: var(--acao-claro); --_c: var(--acao-texto); }
.e-em_atendimento, .e-em_conversa { --_bg: var(--ia-claro); --_c: var(--ia-texto); }
.e-em_ligacao::before { animation: pulso-ponto 1.6s var(--lg-ease) infinite; }
@keyframes pulso-ponto { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 5px transparent; } }

/* ---------- login: o visual-chave da marca (noite com brilho de gradiente nas bordas) e o cartão de entrada ---------- */
.tela-login {
  min-height: 100%; display: grid; grid-template-columns: minmax(360px, 480px) minmax(0, 1fr); align-items: center; gap: 24px;
  padding: 32px clamp(24px, 5vw, 72px); position: relative; color-scheme: dark;
  background: radial-gradient(55% 85% at 100% 0%, rgb(122 61 240 / .5), transparent 62%),
              radial-gradient(50% 80% at 0% 100%, rgb(0 194 255 / .3), transparent 62%), var(--lg-noite-900);
}
.login-form {
  background: var(--superficie); color: var(--texto); padding: 44px 44px 36px; border-radius: var(--lg-radius-xl);
  display: flex; flex-direction: column; justify-content: center; gap: 20px; box-shadow: 0 30px 70px -20px rgb(2 6 16 / .6);
  color-scheme: light;
}
:root[data-tema="escuro"] .login-form { color-scheme: dark; border: 1px solid var(--linha); }
.login-form h1 { font-size: 28px; letter-spacing: -.02em; }
.login-form .btn.primario { min-height: 46px; font-size: 15px; }
.marca.marca-login { padding: 0 0 4px; }
.marca-login .logo-plataforma { height: 40px; width: auto; }
.marca-login .logo-cliente { height: 40px; width: auto; max-width: 180px; object-fit: contain; }
.marca-login .marca-nome { font-size: 20px; }
.login-feito { display: none; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--suave); }
.login-feito img { height: 18px; width: auto; }
:root[data-marca="cliente"] .login-feito { display: flex; }
.login-lado { color: #c8d1e2; padding: 24px clamp(8px, 3vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 18px; min-width: 0; }
.login-chamada { color: #fff; font: italic 800 clamp(34px, 3.6vw, 52px)/1.05 var(--fonte-titulo); max-width: 15ch; letter-spacing: -.02em; text-wrap: balance; }
.login-lado p { max-width: 44ch; font-size: 16px; line-height: 1.55; }
.login-canais { list-style: none; margin: 14px 0 0; padding: 0; max-width: 620px; }
.login-canais .lg-canal { cursor: default; font-family: var(--fonte-titulo); }
.login-canais .lg-canal:hover { transform: none; }
.login-tema { position: absolute; top: 20px; right: 24px; z-index: 2; background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .16);
  --suave: #c8d1e2; --texto: #fff; }
.login-tema button[aria-checked="true"] { background: #fff; color: var(--lg-noite-900); }
.so-escuro { display: none !important; }
:root[data-tema="escuro"] .so-escuro { display: inline-block !important; }
:root[data-tema="escuro"] .so-claro { display: none !important; }

/* ---------- estrutura ---------- */
.app { display: grid; grid-template-columns: 256px 1fr; min-height: 100%; }
/* menu lateral: sempre escuro (noite da marca no claro), com os tokens do tema escuro por dentro */
.lateral {
  --texto: #ffffff; --suave: var(--lateral-grupo); --linha: rgb(255 255 255 / .1); --linha-forte: rgb(255 255 255 / .18);
  --superficie: rgb(255 255 255 / .06); --superficie-2: rgb(255 255 255 / .07); --acao: var(--lateral-destaque); --acao-texto: var(--lateral-destaque);
  --acao-claro: var(--lateral-ativo); --secundaria-forte: #ffffff; --secundaria-claro: rgb(255 255 255 / .1); --foco: var(--lateral-destaque);
  --toque: #f39256; --sobre-estado: var(--lg-noite-950);
  background: var(--lateral); color: var(--lateral-texto); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; color-scheme: dark;
}
/* marca: logo horizontal da Ligna na plataforma; no white-label, o logo (ou o nome) do cliente no lugar */
.marca { display: flex; align-items: center; gap: 11px; padding: 20px 18px 16px; color: var(--texto); font: 700 16.5px/1.2 var(--fonte-titulo); letter-spacing: -.005em; }
.marca img { display: block; flex: none; }
.marca .logo-plataforma { height: 28px; width: auto; }
.marca .logo-simbolo { display: none; height: 25px; width: auto; }
.marca .logo-cliente { height: 28px; width: auto; max-width: 132px; object-fit: contain; }
.marca[data-logo="plataforma"] { flex-direction: column; align-items: flex-start; gap: 8px; }
.marca[data-logo="plataforma"] .marca-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.marca:not([data-logo="plataforma"]) :is(.logo-plataforma, .logo-simbolo) { display: none !important; }
.marca-texto { display: flex; flex-direction: column; min-width: 0; }
.marca-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca small { display: block; font: 400 12px/1.3 var(--fonte); color: var(--suave); letter-spacing: 0; margin-top: 2px; }
.marca small:empty { display: none; }
.menu { flex: 1; overflow-y: auto; padding: 4px 10px 14px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .18) transparent; }
/* busca rápida: a peça que se destaca no menu; o resto fica quieto */
.menu-busca { display: flex; gap: 6px; margin: 0 12px 8px; }
.menu-busca-campo { position: relative; flex: 1; min-width: 0; }
.menu-recolher {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--linha);
  border-radius: var(--raio-m); background: var(--superficie-2); color: var(--lateral-grupo); cursor: pointer;
}
.menu-recolher svg { width: 16px; height: 16px; }
.menu-recolher:hover { color: var(--texto); background: var(--lateral-hover); }
.menu-recolher:focus-visible { outline: 2px solid var(--foco); outline-offset: -1px; }
.menu-busca-campo svg { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--lateral-grupo); pointer-events: none; }
.menu-busca-campo input {
  width: 100%; height: 36px; min-height: 36px; padding: 0 58px 0 33px; border: 1px solid var(--linha); border-radius: var(--raio-m);
  background: var(--superficie-2); color: var(--texto); font: inherit; font-size: 13.5px;
}
.menu-busca-campo input::placeholder { color: var(--lateral-grupo); opacity: 1; }
.menu-busca-campo input:focus { outline: 2px solid var(--foco); outline-offset: -1px; box-shadow: none; border-color: transparent; background: rgb(255 255 255 / .1); }
.menu-busca-campo input::-webkit-search-cancel-button { display: none; }
.menu-busca-campo kbd {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font: 500 10.5px/1 var(--fonte-mono); color: var(--lateral-grupo);
  border: 1px solid var(--linha-forte); border-radius: 5px; padding: 3px 5px; background: transparent; pointer-events: none;
}
.menu-busca-campo input:focus ~ kbd { display: none; }
.menu-resultados a small { margin-left: auto; font-size: 11.5px; color: var(--lateral-grupo); white-space: nowrap; }
.menu-resultados a[aria-selected="true"] { background: var(--lateral-ativo); color: var(--texto); box-shadow: inset 3px 0 0 var(--lateral-destaque); }
.menu-vazio { padding: 10px; font-size: 13px; color: var(--suave); }
/* grupos recolhíveis */
.menu-grupo, .menu-config { margin-top: 4px; }
.menu-itens { padding-bottom: 6px; }
.menu-grupo-titulo {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 10px 5px; border: 0; background: none; cursor: pointer;
  font: 600 12px/1.3 var(--fonte-titulo); letter-spacing: .02em; color: var(--lateral-grupo); text-align: left; border-radius: var(--raio-p);
}
.menu-grupo-titulo:hover { color: var(--texto); }
.menu-grupo-titulo:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.menu-grupo-titulo > span { flex: 1; }
.menu-grupo-titulo > svg:last-child { width: 13px; height: 13px; flex: none; transition: transform .15s; }
.menu-grupo-titulo[aria-expanded="true"] > svg:last-child { transform: rotate(90deg); }
.menu-grupo[data-aberto="true"] [data-soma] { display: none; }
.menu-rotulo { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px 5px; font: 600 12px var(--fonte-titulo); letter-spacing: .02em; color: var(--lateral-grupo); }
.menu-rotulo svg { width: 13px; height: 13px; }
/* Configurar: separada do trabalho do dia a dia, abaixo de uma linha */
.menu-config { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--linha); }
.menu-config-titulo svg:first-child { width: 15px; height: 15px; }
.menu-subgrupo { margin: 0; padding: 10px 10px 3px; font-size: 11.5px; font-weight: 600; color: var(--lateral-grupo); }
/* favoritos: a estrela aparece ao passar o mouse ou com foco; marcada fica cheia */
.menu-item { position: relative; }
.menu-estrela {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; border-radius: var(--raio-p); background: var(--lateral); color: var(--lateral-grupo); cursor: pointer; opacity: 0;
}
.menu-estrela svg { width: 15px; height: 15px; }
.menu-item:hover .menu-estrela, .menu-estrela:focus-visible { opacity: 1; }
.menu-estrela:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.menu-estrela:hover { color: var(--texto); }
.menu-estrela[aria-pressed="true"] { color: #f7b955; }
.menu-estrela[aria-pressed="true"] svg { fill: currentColor; }
.menu-item a.ativo + .menu-estrela { background: transparent; }
@media (hover: none) { .menu-estrela { opacity: 1; background: transparent; } .menu-estrela[aria-pressed="false"] { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .menu-grupo-titulo > svg:last-child { transition: none; } }
/* menu retraído: só os ícones dos grupos abertos e dos favoritos; ao passar o mouse ou com foco, expande por cima */
.menu-retrair svg { width: 18px; height: 18px; }
@media (min-width: 861px) {
  body.menu-retraido .app { grid-template-columns: 64px 1fr; }
  body.menu-retraido .lateral { width: 64px; z-index: 35; transition: width .14s ease .12s, box-shadow .14s ease .12s; }
  body.menu-retraido .lateral:hover, body.menu-retraido .lateral:focus-within { width: 256px; box-shadow: var(--sombra-alta); }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) :is(.marca > div, .menu-busca, .menu a > span, .menu-grupo-titulo,
    .menu-rotulo, .menu-subgrupo, .menu-estrela, .status-texto, .tempo) { display: none; }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) .marca { padding: 20px 18px 16px; }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) .marca .logo-plataforma { display: none; }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) .marca[data-logo="plataforma"] .logo-simbolo { display: block; }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) .marca .logo-cliente { max-width: 28px; }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) .menu { padding: 4px 8px 12px; scrollbar-width: none; }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) .menu a { justify-content: center; padding: 10px 0; position: relative; }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) .menu a .contador {
    position: absolute; top: 2px; right: 3px; margin: 0; padding: 0 5px; font-size: 10px; }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) :is(.menu-grupo, .menu-config) { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--linha); }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) .menu > :first-child { border-top: 0; }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) :is(.menu-grupo, .menu-config)[data-aberto="false"] { display: none; }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) .status-operador { padding: 12px 8px; }
  body.menu-retraido .lateral:not(:hover):not(:focus-within) .status-operador .btn { justify-content: center; padding-inline: 0; }
}
@media (max-width: 860px) { .menu-retrair { display: none; } }
@media (prefers-reduced-motion: reduce) { body.menu-retraido .lateral { transition: none; } }
.menu a {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--raio-m);
  color: var(--lateral-texto); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background var(--lg-dur), color var(--lg-dur);
}
.menu a svg { width: 18px; height: 18px; opacity: .78; flex: none; }
.menu a:hover { background: var(--lateral-hover); color: var(--texto); }
.menu a:hover svg { opacity: 1; }
.menu a.ativo { background: var(--lateral-ativo); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--lateral-destaque); }
.menu a.ativo svg { opacity: 1; color: var(--lateral-destaque); }
.menu a .contador { margin-left: auto; background: var(--toque); color: var(--sobre-estado); font: 700 11px/18px var(--fonte-titulo); padding: 0 7px; border-radius: 999px; min-width: 20px; text-align: center; }
.status-operador { border-top: 1px solid var(--linha); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.status-operador .btn { width: 100%; justify-content: flex-start; min-height: 42px; color: var(--texto); background: var(--superficie-2); border-color: var(--linha); }
.status-operador .btn:hover { background: var(--lateral-hover); }
.status-operador .btn .tempo { margin-left: auto; font: 500 12.5px var(--fonte-mono); opacity: .85; }
.status-ponto { width: 9px; height: 9px; border-radius: 50%; background: #8592ac; flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
.status-ponto.disponivel { background: #4cc383; box-shadow: 0 0 0 3px rgb(76 195 131 / .22); }
.status-ponto.pausa { background: #5cd8ff; box-shadow: 0 0 0 3px rgb(92 216 255 / .2); }
.status-ponto.em_ligacao { background: #8ab3ff; box-shadow: 0 0 0 3px rgb(138 179 255 / .25); }

.principal { min-width: 0; display: flex; flex-direction: column; }
/* topo: uma linha só no notebook. Trilha do grupo + título à esquerda; ferramentas da sessão à direita, todas com 36 px */
.topo {
  display: flex; align-items: center; gap: 16px; padding: 12px 24px 12px 20px; min-height: 70px;
  background: color-mix(in srgb, var(--superficie) 86%, transparent); border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 5; backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.topo > .btn.discreto { width: 36px; min-height: 36px; padding: 0; flex: none; }
.topo .titulo { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.topo-linha { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.topo-trilha { flex: none; font: 500 13px/1.2 var(--fonte); color: var(--suave); white-space: nowrap; }
.topo-trilha::after { content: "/"; margin-left: 9px; color: var(--linha-forte); }
.topo .titulo h1 { font-size: 21px; line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo .titulo p {
  color: var(--suave); font-size: 13px; line-height: 1.4; max-width: 80ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.topo .titulo p:empty { display: none; }
.topo .acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.seletor {
  display: flex; align-items: center; gap: 4px; border: 1px solid var(--linha-forte); border-radius: var(--raio-m);
  padding: 0 2px 0 12px; background: var(--superficie); height: 36px; transition: border-color var(--lg-dur);
}
.seletor:hover { border-color: var(--suave); }
.seletor:focus-within { border-color: var(--acao); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acao) 30%, transparent); }
.seletor > span, .seletor > label { color: var(--suave); font-size: 12px; }
.seletor select { border: 0; min-height: 32px; height: 32px; padding: 0 28px 0 4px; width: auto; max-width: 200px; background-color: transparent; font-weight: 600; background-position: right 8px center; }
.seletor select:focus { outline: none; box-shadow: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--linha-forte); background: var(--superficie);
  border-radius: 999px; padding: 0 14px; min-height: 36px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; color: var(--texto);
  transition: border-color var(--lg-dur), background var(--lg-dur);
}
.chip:hover { border-color: var(--acao); }
.chip[aria-pressed="true"] { background: var(--acao-claro); border-color: var(--acao); color: var(--acao-texto); font-weight: 600; }
.chip .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--suave); }
.chip .ponto.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.chip .ponto.espera { background: var(--toque); }
.chip .ponto.falha { background: var(--erro); }
.chip.mudo { background: var(--erro-claro); color: var(--erro); border-color: color-mix(in srgb, var(--erro) 30%, transparent); }
.chip svg { width: 15px; height: 15px; flex: none; }
.usuario { display: flex; align-items: center; gap: 8px; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--linha); height: 36px; }
.usuario .btn.discreto { width: 36px; min-height: 36px; padding: 0; border-radius: var(--raio-m); }
.usuario .btn.discreto svg { width: 18px; height: 18px; }
/* seletor de tema: controle segmentado do Ligna */
.tema-seletor { display: flex; padding: 3px; gap: 2px; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie-2); }
.tema-seletor button {
  display: grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--suave); cursor: pointer; transition: background var(--lg-dur), color var(--lg-dur);
}
.tema-seletor button svg { width: 16px; height: 16px; }
.tema-seletor button:hover { color: var(--texto); }
.tema-seletor button[aria-checked="true"] { background: var(--lg-brand); color: var(--lg-on-brand); box-shadow: var(--sombra); }
.tema-seletor button:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.usuario .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--secundaria-claro); color: var(--secundaria-forte); display: grid; place-items: center; font: 700 13px var(--fonte-titulo); flex: none; }
.usuario div { display: flex; flex-direction: column; line-height: 1.25; max-width: 180px; margin-right: 4px; }
.usuario div > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario div > :first-child { font-weight: 600; font-size: 13.5px; }
.usuario small { color: var(--suave); font-size: 12px; }
/* notebook: o nome sai do topo (fica no título do bloco) e o título ganha espaço; mais estreito, as ferramentas descem */
@media (max-width: 1439px) { .usuario div { display: none; } }
@media (max-width: 1180px) and (min-width: 861px) {
  .topo { flex-wrap: wrap; row-gap: 10px; }
  .topo .acoes { width: 100%; justify-content: flex-end; }
}
.menu-movel { display: none; }

.conteudo { padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- blocos (Ligna card) ---------- */
.painel { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); min-width: 0; }
.painel > header { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.painel > header h2 { margin-right: auto; }
.painel > header h2:has(+ p) { margin-right: 0; }
.painel > header p { color: var(--suave); font-size: 13px; }
.painel > .corpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.painel > .corpo.sem-padding { padding: 0; }
.painel > .corpo.sem-padding > .tabela-wrap:last-child { border-radius: 0 0 var(--raio) var(--raio); }
.vazio { padding: 40px 20px; text-align: center; color: var(--suave); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.vazio::before {
  content: ""; width: 44px; height: 44px; border-radius: 14px; background: var(--acao-claro);
  -webkit-mask: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acao) 18%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235590FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l2 3h4l2-3h4M5.5 6.5 4 13v5a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-5l-1.5-6.5A2 2 0 0 0 16.6 5H7.4a2 2 0 0 0-1.9 1.5Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 22px;
}
.vazio.sem-icone::before, td .vazio::before, .tabela .vazio::before { display: none; }

/* indicadores (Ligna stat): rótulo em cima, número grande embaixo */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); overflow: hidden; box-shadow: var(--sombra); }
/* divisórias por sombra: quando a grade quebra linha, a linha de baixo também fica separada (o excesso é cortado pela borda) */
.numeros > div { padding: 16px 20px 18px; box-shadow: 1px 0 0 var(--linha), 0 1px 0 var(--linha); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.numeros strong { order: 2; font: 700 28px/1.1 var(--fonte-titulo); letter-spacing: -.02em; color: var(--texto); }
.numeros span { order: 1; color: var(--suave); font-size: 13px; }
.numeros small { order: 3; }

/* abas (Ligna tabs) */
/* no celular as abas que não cabem rolam dentro da faixa, não a página */
.abas { display: flex; gap: 2px; box-shadow: inset 0 -1px 0 var(--linha); overflow-x: auto; scrollbar-width: none; }
.abas button {
  position: relative; flex: none; white-space: nowrap; border: 0; background: none; padding: 10px 14px; cursor: pointer;
  color: var(--suave); font: 600 14px var(--fonte-titulo);
}
.abas button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background var(--lg-dur); }
.abas button:hover { color: var(--texto); }
.abas button.ativa, .abas button[aria-selected="true"] { color: var(--texto); }
.abas button.ativa::after, .abas button[aria-selected="true"]::after { background: var(--acao); }
.abas button:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; border-radius: 8px; }

/* tabelas (Ligna table) */
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th {
  text-align: left; font: 600 11.5px/1.3 var(--fonte-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--suave);
  padding: 11px 16px; border-bottom: 1px solid var(--linha); background: var(--superficie-2); white-space: nowrap;
}
.tabela th .ajuda-btn { text-transform: none; }
.tabela td { padding: 11px 16px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr { transition: background var(--lg-dur); }
.tabela tbody tr:hover td { background: color-mix(in srgb, var(--superficie-2) 70%, transparent); }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: var(--superficie-2); }
.tabela td.direita, .tabela th.direita { text-align: right; }
.tabela .acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }
.barra { height: 6px; background: var(--linha); border-radius: 99px; overflow: hidden; min-width: 80px; }
.barra i { display: block; height: 100%; background: var(--acao); border-radius: inherit; }

.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.filtros > * { flex: 0 1 190px; }
.filtros > .busca { flex: 1 1 240px; }

/* ---------- atendimento ---------- */
.atendimento { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 20px; align-items: start; }
/* faixa da chamada (Ligna callbar): noite, nome em Exo 2, cronômetro em mono ciano; a linha de baixo diz o estado */
.faixa-chamada {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: center;
  padding: 24px 26px 26px; border-radius: var(--raio); color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(80% 140% at 100% 0%, rgb(30 111 255 / .28), transparent 60%), var(--faixa);
  box-shadow: var(--sombra-media);
  --texto: #fff; --suave: var(--faixa-texto); --foco: #8ab3ff; --linha-forte: rgb(255 255 255 / .28);
}
.faixa-chamada::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--gradiente); }
.faixa-chamada.chamando::after, .faixa-chamada.tocando::after { background: #f39256; animation: pulsar 1.2s ease-in-out infinite; }
.faixa-chamada.ativa::after, .faixa-chamada.conectando::after { background: #4cc383; }
.faixa-chamada.encerrada::after { background: #f07070; }
@keyframes pulsar { 50% { opacity: .35; } }
.faixa-chamada .nome { font: 700 30px/1.1 var(--fonte-titulo); letter-spacing: -.02em; }
.faixa-chamada .tel { color: var(--faixa-texto); font-size: 16px; font-variant-numeric: tabular-nums; }
.faixa-chamada .estado { color: var(--faixa-texto); font-size: 13.5px; }
.faixa-chamada .relogio { font: 500 44px/1 var(--fonte-mono); letter-spacing: -.04em; text-align: right; grid-row: span 2; color: #5cd8ff; font-variant-numeric: tabular-nums; }
.faixa-chamada .controles { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.faixa-chamada .btn { --_bg: var(--faixa-2); --_fg: #fff; --_bd: rgb(255 255 255 / .22); --_bg-h: rgb(255 255 255 / .16); --_bd-h: rgb(255 255 255 / .34); }
.faixa-chamada .btn.primario { --_bg: var(--lg-accent); --_fg: var(--lg-on-accent); --_bd: var(--lg-accent); --_bg-h: var(--lg-accent-hover); --_bd-h: var(--lg-accent-hover); box-shadow: 0 4px 14px -4px rgb(30 111 255 / .7); }
.faixa-chamada .btn.perigo { --_bg: #c42b2b; --_fg: #fff; --_bd: #c42b2b; --_bg-h: #a82222; --_bd-h: #a82222; }
.faixa-chamada .btn:disabled { opacity: .55; }
.faixa-chamada select { width: auto; background-color: var(--faixa-2); border-color: rgb(255 255 255 / .22); color: #fff; color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C8D1E2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.faixa-chamada select option { background: var(--lg-noite-900); color: #fff; }
.faixa-chamada :where(input[type="checkbox"]) { border-color: rgb(255 255 255 / .5); background-color: transparent; }
.faixa-chamada :where(input[type="checkbox"]):checked { background-color: var(--lg-accent); border-color: var(--lg-accent); }
.faixa-chamada .btn.contando { --_bg: #f39256; --_fg: var(--lg-noite-950); --_bd: #f39256; --_bg-h: #f5a372; --_bd-h: #f5a372; }
.dados-contato { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 14px; }
.dados-contato dt { color: var(--suave); }
.dados-contato dd { margin: 0; font-weight: 500; }
.resultados { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 8px; }
.resultados button {
  border: 1.5px solid var(--linha); background: var(--superficie); border-radius: var(--raio-m); padding: 11px 13px; text-align: left; cursor: pointer;
  font: 600 13.5px/1.3 var(--fonte-titulo); color: var(--texto); transition: border-color var(--lg-dur), background var(--lg-dur), transform var(--lg-dur);
}
.resultados button:hover { border-color: var(--acao); background: var(--acao-claro); }
.resultados button:active { transform: translateY(1px); }
.resultados button.sugerido { border-color: var(--ia); background: var(--ia-claro); }
.historico { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.historico li { padding: 9px 0 9px 16px; border-left: 2px solid var(--linha); position: relative; font-size: 13.5px; }
.historico li::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--linha-forte); }
.historico li.ligacao::before { border-color: var(--acao); }
.historico li.mensagem::before { border-color: var(--sinal); }
.historico li.erro::before { border-color: var(--erro); }
.historico li.resultado::before { border-color: var(--ok); background: var(--ok); }
.historico .quando { color: var(--suave); font-size: 12px; }
.previa { white-space: pre-wrap; font-size: 14px; background: var(--acao-claro); border-radius: 12px 12px 12px 3px; padding: 10px 13px; }

/* ---------- conversas ---------- */
.conversas { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 160px); min-height: 420px; }
.conversas .lista { border-right: 1px solid var(--linha); overflow-y: auto; }
.conversas .item { padding: 12px 16px; border-bottom: 1px solid var(--linha); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.conversas .item:hover { background: var(--superficie-2); }
.conversas .item.ativo { background: var(--acao-claro); box-shadow: inset 3px 0 0 var(--acao); }
.conversas .item .topo-item { display: flex; justify-content: space-between; gap: 8px; }
.conversas .item .ultima { color: var(--suave); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversas .badge { background: var(--acao); color: var(--sobre-cor); border-radius: 999px; font: 700 11px/18px var(--fonte-titulo); padding: 0 7px; }
.conversas .chat { display: flex; flex-direction: column; min-width: 0; }
.conversas .mensagens { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; background: var(--superficie-2); }
.bolha { max-width: 70%; padding: 9px 13px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linha); font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.bolha.minha { align-self: flex-end; background: var(--acao-claro); border-color: transparent; border-bottom-right-radius: 4px; }
.bolha small { display: block; color: var(--suave); font-size: 11px; margin-top: 3px; }
.conversas .responder { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--linha); }

/* ---------- receptivo ---------- */
.receptivo { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.chamada-entrada { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: inset 4px 0 0 var(--toque), var(--sombra); }
.chamada-entrada.ativa { box-shadow: inset 4px 0 0 var(--ok), var(--sombra); }
.chamada-entrada .quem { font: 700 20px var(--fonte-titulo); }

/* ---------- gráficos simples ---------- */
.colunas { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 8px; }
.colunas > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; height: 100%; justify-content: flex-end; }
.colunas .barra-v { width: 100%; max-width: 34px; background: color-mix(in srgb, var(--acao) 38%, var(--superficie)); border-radius: 6px 6px 2px 2px; position: relative; overflow: hidden; }
.colunas .barra-v i { position: absolute; inset: auto 0 0 0; background: var(--acao); border-radius: 6px 6px 0 0; }
.colunas span { font-size: 11px; color: var(--suave); font-variant-numeric: tabular-nums; }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--suave); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---------- canais ---------- */
.qr { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.qr img { width: 210px; height: 210px; background: #fff; border-radius: 10px; padding: 6px; }
.qr ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.codigo-pareamento { font: 600 24px var(--fonte-mono); letter-spacing: .14em; color: var(--acao-texto); }

/* ---------- diálogos e avisos (Ligna modal, alert e toast) ---------- */
dialog {
  border: 1px solid var(--linha); border-radius: var(--lg-radius-xl); padding: 0; background: var(--superficie); color: var(--texto);
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); box-shadow: var(--sombra-alta);
}
dialog[open] { animation: surgir .2s var(--lg-ease); }
dialog.largo { width: min(860px, calc(100vw - 32px)); }
dialog::backdrop { background: var(--veu); backdrop-filter: blur(2px); }
dialog > form { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 14px; border-bottom: 1px solid var(--linha); }
dialog header h2 { font-size: 18px; font-weight: 700; }
dialog .corpo { padding: 18px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
dialog footer { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 24px 20px; border-top: 1px solid var(--linha); background: var(--superficie-2); border-radius: 0 0 var(--lg-radius-xl) var(--lg-radius-xl); }
@keyframes surgir { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
.aviso {
  --_c: var(--toque); --_bg: var(--toque-claro);
  background: var(--_bg); color: var(--texto); border: 1px solid color-mix(in srgb, var(--_c) 30%, transparent);
  border-radius: var(--raio-m); padding: 11px 14px 11px 40px; font-size: 13.5px; position: relative;
}
.aviso::before {
  content: ""; position: absolute; left: 14px; top: 12px; width: 17px; height: 17px; background: var(--_c);
  -webkit-mask: var(--_icone) center/contain no-repeat; mask: var(--_icone) center/contain no-repeat;
  --_icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3Zm0 6v5m0 3v.01'/%3E%3C/svg%3E");
}
.aviso.erro { --_c: var(--erro); --_bg: var(--erro-claro); }
.aviso.erro::before { --_icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6m0 4v.01'/%3E%3C/svg%3E"); }
.aviso.ok { --_c: var(--ok); --_bg: var(--ok-claro); }
.aviso.ok::before { --_icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16 9.5'/%3E%3C/svg%3E"); }
.aviso.info { --_c: var(--pausa); --_bg: var(--pausa-claro); }
.aviso.ia { --_c: var(--ia-texto); --_bg: var(--ia-claro); }
.aviso.ia::before { --_icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10.5l-6.3 2.2L12 19l-2.2-6.3L3.5 10.5l6.3-2.2z'/%3E%3C/svg%3E"); }
.aviso :is(strong, b):first-child { color: var(--texto); }
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 50; width: min(400px, calc(100vw - 36px)); }
.toast {
  --_c: var(--acao); position: relative; padding: 13px 16px 13px 44px; border-radius: var(--raio); background: var(--superficie); color: var(--texto);
  border: 1px solid var(--linha); box-shadow: var(--sombra-alta); font-size: 14px; line-height: 1.45; animation: entrar .25s var(--lg-ease);
}
.toast::before { content: ""; position: absolute; left: 16px; top: 15px; width: 16px; height: 16px; border-radius: 50%; background: var(--_c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--_c) 18%, transparent); }
.toast.ok { --_c: var(--ok); }
.toast.erro { --_c: var(--erro); border-color: color-mix(in srgb, var(--erro) 35%, var(--linha)); }
.toast.aviso-toast, .toast.toque { --_c: var(--toque); }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }
.carregando { color: var(--suave); padding: 24px; display: flex; flex-direction: column; gap: 14px; animation: aparecer .2s .2s both; }
.carregando-texto { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- confirmação, alerta e pergunta (dialogos.js) ---------- */
dialog.dialogo-aviso { width: min(460px, calc(100vw - 32px)); }
dialog.dialogo-aviso.perigo { border-top: 4px solid var(--erro); }
.dialogo-msg { white-space: pre-line; color: var(--suave); }
.dialogo-opcoes { display: flex; flex-direction: column; gap: 6px; }
.btn.dialogo-opcao { flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; white-space: normal; padding: 11px 14px; min-height: 0; line-height: 1.3; color: var(--texto); }
.btn.dialogo-opcao small { color: var(--suave); font: 400 12.5px var(--fonte); }
.btn.dialogo-opcao:hover, .btn.dialogo-opcao:focus-visible { border-color: var(--acao); background: var(--acao-claro); }

/* ---------- esperas (carregando.js): barra do topo, botão ocupado, girador e esqueleto ---------- */
.barra-carregando { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; overflow: hidden; background: color-mix(in srgb, var(--acao) 18%, transparent); pointer-events: none; }
.barra-carregando::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--gradiente); animation: barra-andar 1.1s ease-in-out infinite; }
.btn.ocupado { cursor: progress; }
.btn.ocupado::before { content: ""; width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .7s linear infinite; }
.btn.ocupado svg { display: none; }
.girador { display: inline-block; flex: none; width: 16px; height: 16px; border: 2px solid var(--linha); border-top-color: var(--acao); border-radius: 50%; animation: girar .8s linear infinite; }
.esqueleto { display: flex; flex-direction: column; gap: 10px; }
.esqueleto-linha { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--superficie-2) 25%, var(--linha) 50%, var(--superficie-2) 75%); background-size: 200% 100%; animation: brilho 1.4s ease-in-out infinite; }
.esqueleto-linha:nth-child(3n+1) { width: 92%; }
.esqueleto-linha:nth-child(3n+2) { width: 76%; }
.esqueleto-linha:nth-child(3n) { width: 58%; }
@keyframes barra-andar { to { left: 100%; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes aparecer { from { opacity: 0; } }
.dias { display: flex; gap: 4px; flex-wrap: wrap; }
.dias label { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid var(--linha); border-radius: var(--raio-p); padding: 4px 9px; font-size: 13px; font-weight: 500; cursor: pointer; }
.dias label:has(input:checked) { background: var(--acao-claro); border-color: var(--acao); }
.transcricao { white-space: pre-wrap; font-size: 14px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 12px 14px; max-height: 260px; overflow-y: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .barra-carregando::before { left: 0; width: 100%; opacity: .75; }
}

@media (max-width: 1100px) {
  .atendimento { grid-template-columns: minmax(0, 1fr); }
  .grade-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 276px; z-index: 30; transform: translateX(-100%); transition: transform .2s; }
  body.menu-aberto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgb(7 18 38 / .5); }
  .menu-movel { display: inline-flex; }
  .topo { padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
  .topo .acoes { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .topo-trilha { display: none; }
  .conteudo { padding: 16px; }
  .grade-2, .grade-3 { grid-template-columns: 1fr; }
  .conversas { grid-template-columns: 1fr; height: auto; }
  .conversas .lista { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .tela-login { grid-template-columns: 1fr; padding: 72px 16px 24px; align-content: start; }
  .login-lado { display: none; }
  .login-form { padding: 32px 24px; }
  .login-tema { top: 16px; right: 16px; }
  .usuario div { display: none; }
  .faixa-chamada { padding: 20px; }
  .faixa-chamada .nome { font-size: 24px; }
  .faixa-chamada .relogio { font-size: 32px; }
}

/* ---------- ajuda contextual ("?" e balão; static/js/ajuda.js) ---------- */
.ajuda-btn {
  position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px; margin: 0 0 0 4px; padding: 0;
  border: 0; border-radius: 50%; background: var(--acao-claro); color: var(--acao-texto); vertical-align: 1px;
  font: 700 11px/1 var(--fonte-titulo); cursor: help; flex: none; text-transform: none; letter-spacing: 0;
}
/* área de toque de 27 px sem aumentar o círculo */
.ajuda-btn::after { content: ""; position: absolute; inset: -5px; }
.ajuda-btn:hover, .ajuda-btn[aria-expanded="true"] { background: var(--acao); color: var(--sobre-cor); }
.ajuda-btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.faixa-chamada .ajuda-btn { background: rgb(255 255 255 / .18); color: #fff; }
.ajuda-balao {
  position: fixed; inset: auto; margin: 0; z-index: 60; width: max-content; max-width: min(320px, calc(100vw - 16px));
  padding: 12px 14px; border: 1px solid var(--linha); border-top: 3px solid var(--acao); border-radius: var(--raio-m);
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta);
  font: 400 13px/1.5 var(--fonte); text-align: left; white-space: normal; overflow: visible; text-transform: none; letter-spacing: 0;
}
.ajuda-balao::before {
  content: ""; position: absolute; top: -8px; left: calc(var(--seta, 20px) - 5px);
  border: 5px solid transparent; border-bottom-color: var(--acao);
}
.ajuda-balao.acima { border-top-width: 1px; border-bottom: 3px solid var(--acao); }
.ajuda-balao.acima::before { top: auto; bottom: -8px; border-bottom-color: transparent; border-top-color: var(--acao); }
.ajuda-balao p { margin: 0; }
.ajuda-balao p + p { margin-top: 6px; }
.ajuda-titulo { display: block; margin-bottom: 3px; font: 600 13.5px var(--fonte-titulo); color: var(--acao-texto); }
.ajuda-exemplo, .ajuda-manual { color: var(--suave); }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* glossário */
.glossario { display: flex; flex-direction: column; gap: 0; }
.glossario article { padding: 14px 20px; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 4px; }
.glossario article:last-child { border-bottom: 0; }
.glossario h3 { color: var(--acao-texto); }
.glossario .letra { padding: 8px 20px; background: var(--superficie-2); font: 700 13px var(--fonte-titulo); color: var(--suave); border-bottom: 1px solid var(--linha); }

/* ---------- assistente de ajuda com IA (static/js/ajuda-ia.js): violeta, a cor da IA ---------- */
.ajuda-ia-botao {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; min-height: 40px; border: 0; border-radius: 999px;
  background: var(--ia); color: var(--lg-on-ai); font: 600 14px var(--fonte-titulo); box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--ia) 70%, transparent); cursor: pointer;
}
.ajuda-ia-botao::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10.5l-6.3 2.2L12 19l-2.2-6.3L3.5 10.5l6.3-2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10.5l-6.3 2.2L12 19l-2.2-6.3L3.5 10.5l6.3-2.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ajuda-ia-botao:hover { background: var(--ia-forte); }
.ajuda-ia-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ajuda-ia-painel {
  position: fixed; right: 16px; bottom: 66px; z-index: 45; width: min(380px, calc(100vw - 32px)); max-height: min(520px, calc(100vh - 96px));
  display: flex; flex-direction: column; background: var(--superficie); color: var(--texto); border: 1px solid var(--linha);
  border-top: 3px solid var(--ia); border-radius: var(--raio); box-shadow: var(--sombra-alta);
}
.ajuda-ia-painel[hidden] { display: none; }
.ajuda-ia-painel header { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--linha); }
.ajuda-ia-painel header :is(h2, strong) { color: var(--ia-texto); }
.ajuda-ia-msgs { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ajuda-ia-msg { padding: 9px 12px; border-radius: var(--raio-m); max-width: 92%; display: flex; flex-direction: column; gap: 4px; }
.ajuda-ia-msg.usuario { align-self: flex-end; background: var(--acao-claro); }
.ajuda-ia-msg.assistente { align-self: flex-start; background: var(--ia-claro); border: 1px solid color-mix(in srgb, var(--ia) 20%, transparent); }
.ajuda-ia-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--linha); align-items: flex-end; }
.ajuda-ia-form textarea { flex: 1; resize: vertical; min-height: 40px; }
.ajuda-balao [data-perguntar-ia] { margin-top: 8px; }

/* frente seguranca-acesso: título de seção dentro de um diálogo longo */
.secao-dialogo { margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--linha); display: flex; align-items: center; gap: 6px; }