/* ================= tela do atendente ================= */
body.tela-atendente { min-height: 100vh; overflow-y: auto; }
.at-topo {
  position: sticky; top: 0; z-index: 20; height: 72px; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--borda); backdrop-filter: blur(10px);
}
.at-topo .logo { height: auto; border: 0; margin: 0; }
.logo-icone.verde { background: var(--g-verde); box-shadow: 0 6px 16px rgba(0, 176, 155, .3); }
.at-selo { padding: 4px 11px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: #047857; background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .3); }
.at-topo-dir { display: flex; align-items: center; gap: 14px; min-width: 0; }
.at-conexao { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #047857; }
.at-conexao i { font-size: 8px; }
.at-conexao.erro { color: var(--vermelho); }
.at-conexao.erro i { animation: piscar 1s infinite; }
@keyframes piscar { 50% { opacity: .2; } }
.at-campanha { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-radius: 8px; background: var(--input);
  border: 1px solid var(--borda); }
.at-campanha i { color: var(--azul); }
.at-campanha { padding: 9px 14px 9px 12px; font-weight: 700; font-size: 13.5px; cursor: default; white-space: nowrap; }
#manual-campanha { font-size: 13px; padding: 8px 10px; }
.at-quem { display: flex; align-items: center; gap: 9px; font-size: 14px; white-space: nowrap; }
.at-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--fonte-titulo);
  color: #fff; background: var(--g-primario); }

/* área de trabalho */
.at-trabalho { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; padding: 26px 28px 40px;
  max-width: 1420px; margin: 0 auto; align-items: start; }
.at-lado { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 94px; }
.at-centro { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.at-status { --cor: #94a3b8; --fundo: rgba(148, 163, 184, .12); padding: 22px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--sombra-cartao), inset 0 4px 0 var(--cor); }
.at-status.verde { --cor: #10b981; --fundo: rgba(16, 185, 129, .12); }
.at-status.azul { --cor: #0050f0; --fundo: rgba(0, 80, 240, .1); }
.at-status.laranja { --cor: #f59e0b; --fundo: rgba(245, 158, 11, .14); }
.at-status-topo { display: flex; align-items: center; gap: 14px; }
.at-status-icone { width: 54px; height: 54px; border-radius: 8px; display: grid; place-items: center; font-size: 22px;
  color: var(--cor); background: var(--fundo); }
.at-status-topo small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-3); }
.at-status-topo b { display: block; font: 800 22px var(--fonte-titulo); color: var(--texto-1); line-height: 1.2; }
.at-status-topo div > span { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.at-relogio { font: 800 40px var(--fonte-titulo); font-variant-numeric: tabular-nums; color: var(--cor); letter-spacing: -1px; }
.at-btn-grande { padding: 16px 20px; font-size: 14px; }
.at-btn-grande.ativo:disabled { opacity: 1; cursor: default; box-shadow: 0 0 0 4px rgba(16, 185, 129, .18); }
.at-pausa { position: relative; }
.at-status { position: relative; z-index: 6; }  /* o menu de pausa abre por cima dos cartões de baixo */
.at-pausa-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10; padding: 6px; border-radius: 8px;
  background: #fff; border: 1px solid var(--borda); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
.at-pausa-menu button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.at-pausa-menu button:hover { background: var(--hover); }
.at-pausa-menu i { color: var(--texto-3); }

.at-status.roxo { --cor: #0050f0; --fundo: rgba(0, 80, 240, .1); }
/* pausa com tempo máximo: quanto falta; passou do limite = cartão vermelho */
.at-limite { margin-top: -6px; padding: 8px 12px; border-radius: 8px; background: var(--fundo); font-size: 12.5px; color: var(--texto-2); line-height: 1.5; }
.at-limite i { color: var(--cor); margin-right: 4px; }
.at-limite b { color: var(--texto-1); font-variant-numeric: tabular-nums; }
.at-limite small { display: block; font-size: 11.5px; color: var(--texto-3); }
.at-status.estourou { --cor: #dc2626; --fundo: rgba(220, 38, 38, .1); box-shadow: inset 0 0 0 2px rgba(220, 38, 38, .35); }
.at-status.estourou .at-limite { color: #b91c1c; font-weight: 700; }
.at-status.estourou .at-limite b { color: #b91c1c; }
.at-pausa-menu button span { flex: 1; }
.at-pausa-menu button em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--texto-3); }
/* botão "Ligação manual" no topo e o teclado suspenso */
.at-btn-manual { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 8px; font-weight: 800; font-size: 13.5px; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, #0050f0, #00a8f0); box-shadow: 0 6px 16px rgba(0, 80, 240, .28); transition: filter .15s, box-shadow .15s; }
.at-btn-manual:hover { filter: brightness(1.07); }
.at-btn-manual.ativo { box-shadow: 0 0 0 3px rgba(0, 80, 240, .25), 0 6px 16px rgba(0, 80, 240, .28); }
.at-btn-manual:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; filter: none; }
.teclado { position: fixed; top: 82px; right: 24px; z-index: 40; width: 330px; max-height: calc(100vh - 100px); overflow-y: auto;
  padding: 18px 20px 20px; border-radius: 8px; background: #fff; border: 1px solid var(--borda);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22); display: flex; flex-direction: column; gap: 10px; }
.tec-topo { display: flex; align-items: center; justify-content: space-between; }
.tec-topo b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.tec-topo b i { color: #0050f0; }
.tec-fechar { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--input); color: var(--texto-2); }
.tec-fechar:hover { background: var(--hover); color: var(--texto-1); }
.tec-aviso { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; padding: 8px 10px; border-radius: 8px;
  background: rgba(0, 80, 240, .07); color: #0039b8; }
.tec-aviso i { margin-top: 2px; }
.teclado .tec-visor { text-align: center; font: 800 26px var(--fonte-titulo); letter-spacing: 1px; padding: 12px 10px; border-radius: 8px; }
.teclado .tec-nome { text-align: center; font-size: 13.5px; padding: 9px 12px; }
.tec-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.tec-grade button { all: unset; box-sizing: border-box; cursor: pointer; height: 58px; border-radius: 8px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; background: var(--input); user-select: none;
  transition: background .12s, transform .08s; }
.tec-grade button:hover { background: var(--hover); }
.tec-grade button:active { transform: scale(.96); background: rgba(0, 80, 240, .12); }
.tec-grade b { font: 700 22px var(--fonte-titulo); line-height: 1; }
.tec-grade small { font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px; color: var(--texto-3); margin-top: 3px; }
.tec-grade i { font-size: 18px; color: var(--texto-2); }
.tec-ligar { all: unset; box-sizing: border-box; cursor: pointer; margin-top: 6px; height: 56px; border-radius: 99px; display: flex;
  align-items: center; justify-content: center; gap: 10px; font-weight: 800; font-size: 15px; letter-spacing: .5px;
  text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #10b981, #22c55e); box-shadow: 0 10px 22px rgba(16, 185, 129, .3); }
.tec-ligar:disabled { cursor: not-allowed; opacity: .4; box-shadow: none; }
.at-ao-vivo.chamando { color: #b45309; }
.at-ao-vivo.chamando i { animation: piscar .8s infinite; }
.at-selo-manual { margin-left: 8px; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: #0050f0; background: rgba(0, 80, 240, .1); }
.at-selo-manual.retorno { color: #b45309; background: rgba(245, 158, 11, .14); }
/* meus retornos: agenda dos retornos privados */
.at-retornos { padding: 14px 14px 12px 18px; display: flex; flex-direction: column; gap: 8px; }
.at-retornos .at-clientes-titulo em { font-style: normal; margin-left: auto; min-width: 20px; padding: 0 7px; border-radius: 99px;
  background: var(--azul); color: #fff; font-size: 11px; text-align: center; }
.at-retornos .at-clientes-titulo em:empty { display: none; }
.at-ret-lista { display: grid; gap: 6px; max-height: 210px; overflow-y: auto; }
.at-ret { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--input); }
.at-ret-hora { font-weight: 800; font-size: 13px; color: #003fbf; }
.at-ret.atrasado .at-ret-hora { color: #c2410c; }
.at-ret-quem { min-width: 0; font-size: 13px; }
.at-ret-quem b, .at-ret-quem small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-ret-quem small { color: var(--texto-3); font-size: 11.5px; }
.at-audio { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.at-audio-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.at-audio-topo b { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.at-audio-topo b i { color: var(--azul); }
.at-mic-estado { font-size: 11.5px; font-weight: 700; color: var(--texto-3); }
.at-mic-estado.ok { color: #047857; }
.at-mic-estado.mudo { color: var(--vermelho); }
.at-mic-estado.alerta { color: #c2410c; }
.at-btn-ativar-mic { width: 100%; justify-content: center; padding: 11px 14px; font-weight: 800; color: #fff; border: 0;
  background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 8px 18px rgba(249, 115, 22, .28); }
.at-btn-ativar-mic:hover { filter: brightness(1.05); }
.at-espera-mic { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; max-width: 560px;
  margin-top: 10px; padding: 12px 16px; border-radius: 8px; text-align: left; font-size: 14px; line-height: 1.4;
  background: rgba(249, 115, 22, .1); border: 1px solid rgba(249, 115, 22, .35); color: #9a3412; }
.at-espera-mic i { font-size: 20px; color: #ea580c; }
.at-espera-mic:hover { background: rgba(249, 115, 22, .16); }
.at-medidor { height: 6px; border-radius: 99px; background: var(--input); overflow: hidden; }
.at-medidor span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #10b981, #34d399 70%, #f59e0b);
  transition: width .1s linear; }
.at-audio-botoes { display: flex; align-items: center; gap: 8px; }
.at-audio-botoes .btn { flex: none; }
.at-audio-botoes .at-volume { flex: 1; min-width: 0; padding-left: 4px; }
.at-audio-botoes .at-volume input { width: 100%; }
#btn-mudo.ativo { background: var(--g-vermelho); color: #fff; border-color: transparent; }
#btn-mudo.ativo i { color: #fff; }
.at-volume { display: flex; align-items: center; gap: 10px; color: var(--texto-3); }
.at-volume input { padding: 0; accent-color: var(--azul); background: none; border: 0; }
/* clientes atendidos: na coluna da esquerda, cresce com a lista até o fim da tela e rola por dentro */
.at-lado > .cartao { flex-shrink: 0; }
.at-clientes { padding: 16px 12px 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.at-clientes-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-right: 6px; }
.at-cli-lupa { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; background: var(--input); color: var(--texto-2); }
.at-cli-lupa:hover, .at-cli-lupa.ativo { background: rgba(0, 80, 240, .1); color: var(--azul); }
.at-clientes-titulo { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.at-clientes-titulo i { color: var(--azul); }
.at-clientes .busca-icone { min-width: 0; flex: none; margin-right: 6px; }
.at-clientes .busca-icone input { padding: 8px 0; font-size: 13px; }
.at-clientes-rolagem { height: 262px; overflow-y: auto;  /* a altura certa vem do ajustarLista() (mínimo 4 clientes) */ padding-right: 6px; display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .35) transparent; }
.at-clientes-rolagem::-webkit-scrollbar { width: 6px; }
.at-clientes-rolagem::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .35); border-radius: 99px; }
.at-clientes-lista { display: flex; flex-direction: column; gap: 6px; }
.at-cli { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-areas: "av quem quando" "av selos selos"; column-gap: 9px; row-gap: 3px; align-items: center; padding: 6px 9px; line-height: 1.2;
  border-radius: 8px; border: 1px solid var(--borda); background: #fff; transition: background .15s, border-color .15s; }
.at-cli:hover, .at-cli:focus-visible { background: rgba(0, 80, 240, .04); border-color: rgba(0, 80, 240, .3); }
.at-cli-av { grid-area: av; align-self: start; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font: 800 12px var(--fonte-titulo); color: #fff; background: linear-gradient(135deg, #0050f0, #00a8f0); }
.at-cli-av.manual { background: linear-gradient(135deg, #0050f0, #00a8f0); }
.at-cli-quem { grid-area: quem; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.at-cli-quem b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-cli-quem small, .at-cli-quando small { font-size: 11px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-cli-quando { grid-area: quando; align-self: start; display: flex; flex-direction: column; gap: 1px; text-align: right;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.at-cli-selos { grid-area: selos; display: flex; align-items: center; gap: 6px; min-width: 0; }
.selo-origem { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 99px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.selo-origem.manual { background: rgba(0, 80, 240, .1); color: #0050f0; }
.selo-origem.campanha { background: rgba(0, 80, 240, .08); color: #003fbf; }
.selo-qual { min-width: 0; padding: 1px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 700;
  background: rgba(148, 163, 184, .16); color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selo-qual.bom { background: rgba(16, 185, 129, .12); color: #047857; }
.selo-qual.retorno { background: rgba(245, 158, 11, .14); color: #92400e; }
.selo-qual.pendente { background: rgba(239, 68, 68, .08); color: #b91c1c; }
.at-cli-vazio { padding: 16px 12px; text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--texto-2); border-radius: 8px; background: var(--input); }
#cli-mais { align-self: center; flex-shrink: 0; }
/* card suspenso do cliente */
.at-cli-caixa { max-width: 680px; padding: 26px 28px; }
.cli-cab { display: flex; align-items: center; gap: 16px; padding-right: 40px; }
.cli-cab .at-cli-av { align-self: center; width: 58px; height: 58px; border-radius: 8px; font-size: 19px; }
.cli-cab h2 { font: 800 22px var(--fonte-titulo); line-height: 1.2; }
.cli-cab-tel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 14px; color: var(--texto-2); }
.cli-cab-tel button { all: unset; cursor: pointer; color: var(--texto-3); font-size: 13px; }
.cli-cab-tel button:hover { color: var(--azul); }
.cli-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 18px 0 4px; }
.cli-info div { padding: 9px 12px; border-radius: 8px; background: var(--input); min-width: 0; }
.cli-info dt { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--texto-3); }
.cli-info dd { font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }
.cli-obs { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: rgba(245, 158, 11, .08); font-size: 13px; color: #78350f; }
.cli-obs b { display: block; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: #92400e; margin-bottom: 2px; }
.cli-secao { margin-top: 18px; }
.cli-secao h3 { font-size: 13px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cli-secao h3 i { color: var(--azul); }
.cli-rodape { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borda); }
.cli-rodape .btn { padding: 13px 22px; font-size: 14px; }
.cli-rodape small { font-size: 12.5px; color: var(--texto-2); line-height: 1.4; flex: 1; min-width: 200px; }

/* aguardando */
.at-espera { padding: 64px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.at-espera h2 { font: 800 24px var(--fonte-titulo); margin-top: 14px; }
.at-espera p { max-width: 520px; font-size: 15px; }
.at-espera-anim { width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; font-size: 42px;
  color: var(--texto-3); background: var(--input); position: relative; }
.at-espera.verde .at-espera-anim { color: #fff; background: var(--g-verde); box-shadow: 0 18px 40px rgba(0, 176, 155, .35); }
.at-espera.roxo .at-espera-anim { color: #fff; background: linear-gradient(135deg, #0050f0, #0050f0); box-shadow: 0 18px 40px rgba(0, 80, 240, .3); }
.at-espera-anim.pulsando::before, .at-espera-anim.pulsando::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(16, 185, 129, .45); animation: onda 2.2s ease-out infinite; }
.at-espera-anim.pulsando::after { animation-delay: 1.1s; }
@keyframes onda { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

/* ficha do cliente */
.at-ficha { height: auto; max-height: none; padding: 0; overflow: hidden; animation: entrar .3s ease; }
.at-ficha-topo { display: flex; align-items: center; gap: 18px; padding: 24px 26px; border-bottom: 1px solid var(--borda);
  background: linear-gradient(135deg, rgba(0, 80, 240, .06), rgba(0, 168, 240, .02)); }
.at-ficha-avatar { width: 66px; height: 66px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
  font: 800 22px var(--fonte-titulo); color: #fff; background: var(--g-primario); box-shadow: 0 10px 24px rgba(0, 80, 240, .28); }
.at-ficha-quem { flex: 1; min-width: 0; }
.at-ficha-quem small { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--texto-3); }
.at-ficha-quem h2 { font: 800 27px var(--fonte-titulo); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-ficha-quem > span { font-size: 16px; font-weight: 600; color: var(--texto-2); }
.at-ficha-quem > span i { color: var(--azul); font-size: 13px; margin-right: 4px; }
.at-fila { margin-left: 8px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: #b45309;
  background: rgba(245, 158, 11, .12); }
.at-alo { margin-left: 8px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: #047857;
  background: rgba(16, 185, 129, .13); }
.at-alo.calado { color: #475569; background: rgba(100, 116, 139, .14); }
.at-ficha-tempo { text-align: right; }
.at-ficha-tempo b { display: block; font: 800 32px var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.at-ao-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: #dc2626; }
.at-ao-vivo i { font-size: 8px; animation: piscar 1.2s infinite; }
.at-ao-vivo.encerrada { color: var(--texto-2); }
.at-ao-vivo.encerrada i { animation: none; font-size: 11px; }
.at-ficha-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 22px 26px; min-width: 0; overflow: visible; }
.at-ficha-corpo > div { min-width: 0; }
.at-ficha-corpo h3 { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #666; margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px; }
.at-ficha-corpo h3 i { color: var(--azul); }
.at-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); grid-auto-flow: row; gap: 8px; }
.at-dados div { padding: 9px 12px; border-radius: 8px; background: var(--input); min-width: 0; overflow-wrap: anywhere; }
.at-dados dt { min-width: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--texto-3); overflow-wrap: anywhere; }
.at-dados dd { min-width: 0; font-weight: 700; overflow-wrap: anywhere; word-break: break-word; }
.at-dado-vazio { color: var(--texto-3); font-weight: 500; }
.at-ura { margin-top: 16px; }
.at-ura ol { list-style: none; display: flex; flex-direction: column; gap: 6px; counter-reset: passo; }
.at-ura li { counter-increment: passo; display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 8px;
  background: rgba(0, 80, 240, .07); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.at-ura li::before { content: counter(passo); flex: 0 0 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: #0050f0; color: #fff; font-size: 11px; font-weight: 800; }
.at-ura li.dica { font-weight: 400; }
.at-ura li.dica::before { display: none; }
.at-historico { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.at-hist { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--borda); font-size: 13px; }
.at-hist span { color: var(--texto-3); font-size: 12px; margin-right: 6px; }
.at-hist small { color: var(--texto-2); margin-left: 4px; }
.at-hist p { color: var(--texto-2); font-size: 12.5px; margin-top: 3px; }
.at-obs { padding: 0 26px 22px; }

/* qualificação */
.at-qualificar { padding: 22px 26px; animation: entrar .3s ease; box-shadow: var(--sombra-cartao), inset 4px 0 0 #f59e0b; }
.at-qualificar-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.at-qualificar-topo .numero { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 6px 16px rgba(245, 158, 11, .35); }
.at-qualificar-topo h3 { font: 800 19px var(--fonte-titulo); }
.at-qualificar-topo p { font-size: 13px; color: var(--texto-2); }
.at-qual-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; }
.at-qual { all: unset; box-sizing: border-box; cursor: pointer; padding: 15px 14px; border-radius: 8px; text-align: center;
  font-weight: 700; font-size: 14px; background: #fff; border: 2px solid var(--borda); transition: .15s; }
.at-qual:hover { border-color: rgba(0, 80, 240, .4); transform: translateY(-1px); }
.at-qual.verde { border-color: rgba(16, 185, 129, .35); color: #047857; }
.at-qual.vermelho { border-color: rgba(239, 68, 68, .3); color: #b91c1c; }
.at-qual.amarelo { border-color: rgba(245, 158, 11, .4); color: #b45309; }
.at-qual.escolhida { color: #fff; border-color: transparent; background: var(--g-primario); box-shadow: 0 10px 22px rgba(0, 80, 240, .3); }
.at-qual.verde.escolhida { background: var(--g-verde); box-shadow: 0 10px 22px rgba(0, 176, 155, .3); }
.at-qual.vermelho.escolhida { background: var(--g-vermelho); box-shadow: 0 10px 22px rgba(231, 56, 39, .3); }
.at-qual.amarelo.escolhida { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 10px 22px rgba(245, 158, 11, .3); }
.at-qual-retorno { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px;
  border-radius: 8px; background: rgba(245, 158, 11, .07); border: 1px solid rgba(245, 158, 11, .25); }
.at-qual-retorno .campo { width: 240px; }
.at-atalhos-retorno { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; }
/* quem liga de volta: retorno privado (eu mesmo) ou qualquer atendente */
.at-qual-quem { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.at-qual-quem:empty { display: none; }
.at-qual-quem .dica { font-size: 13px; color: var(--texto-2); }
.at-seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: 8px; background: rgba(0, 0, 0, .06); }
.at-seg button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: 600 13px var(--fonte); color: var(--texto-2); cursor: pointer; }
.at-seg button.on { background: #fff; color: var(--texto-1); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.at-qual-acoes { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.at-qual-acoes select { width: auto; min-width: 180px; }

/* campanha parada (pausada/terminada) */
.at-espera.laranja .at-espera-anim { color: #fff; background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 18px 40px rgba(245, 158, 11, .3); }

/* ================= supervisor ================= */
.at-selo.supervisor { color: #0050f0; background: rgba(0, 80, 240, .1); border-color: rgba(0, 80, 240, .3); }
.sup { max-width: 1420px; margin: 0 auto; padding: 26px 28px 40px; display: flex; flex-direction: column; gap: 18px; }
.sup-topo small { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #b91c1c; }
.sup-topo h1 { font: 800 30px var(--fonte-titulo); letter-spacing: -.5px; }
.sup-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.sup-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 8px; background: #fff;
  border: 1px solid var(--borda-azul); box-shadow: var(--sombra-cartao), inset 0 3px 0 var(--cor); --cor: #94a3b8; }
.sup-tile i { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--cor); }
.sup-tile b { display: block; font: 800 24px var(--fonte-titulo); line-height: 1.1; }
.sup-tile small { font-size: 12px; color: var(--texto-2); }
.sup-tile.verde { --cor: #10b981; } .sup-tile.azul { --cor: #0050f0; } .sup-tile.roxo { --cor: #0050f0; }
.sup-tile.laranja { --cor: #f59e0b; } .sup-tile.ouro { --cor: #d97706; }
.sup-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sup-bloco { padding: 18px 20px; }
.sup-bloco-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.sup-bloco-topo h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.sup-bloco-topo h3 i { color: var(--azul); }
.sup-atendentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.sup-atend { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; border-radius: 8px; background: #fff;
  border: 1px solid var(--borda); box-shadow: inset 0 3px 0 var(--cor); --cor: #cbd5e1; }
.sup-atend.disponivel { --cor: #10b981; } .sup-atend.em_ligacao { --cor: #0050f0; } .sup-atend.qualificando { --cor: #f59e0b; }
.sup-atend.manual { --cor: #0050f0; } .sup-atend.pausa { --cor: #94a3b8; }
.sup-atend.fora { opacity: .55; }
.sup-atend.alerta { background: rgba(245, 158, 11, .07); border-color: rgba(245, 158, 11, .45); }
.sup-atend header { display: flex; align-items: center; gap: 10px; }
.sup-atend header b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-atend .tempo { font: 800 16px var(--fonte-titulo); color: var(--cor); font-variant-numeric: tabular-nums; }
.sup-atend p { font-size: 12.5px; color: var(--texto-2); }
.sup-atend p b { color: var(--texto-1); }
.sup-atend .alerta-txt { color: #b45309; font-weight: 700; }
.sup-acao { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 3px;
  padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; transition: filter .15s; }
.sup-acao:hover { filter: brightness(.95); }
.sup-acao:disabled { opacity: .5; cursor: default; }
.sup-acao.verde { background: rgba(16, 185, 129, .12); color: #047857; }
.sup-acao.perigo { background: rgba(239, 68, 68, .1); color: #b91c1c; }
.sup-av { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
  font: 800 12px var(--fonte-titulo); color: #fff; background: var(--g-primario); }
.sup-estado { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--cor) 13%, #fff); color: color-mix(in srgb, var(--cor) 75%, #000); }
.sup-chamadas { display: flex; flex-direction: column; gap: 8px; }
.sup-lig { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--borda); }
.sup-lig > i { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--g-verde); }
.sup-lig.chamando > i { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.sup-lig div { flex: 1; min-width: 0; }
.sup-lig div b { display: block; }
.sup-lig small { font-size: 12px; color: var(--texto-2); }
.sup-lig .tempo { font: 800 15px var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.sup-vazio { padding: 26px 10px; text-align: center; color: var(--texto-3); font-size: 13px; }
.sup-tabela td small { display: block; font-size: 11.5px; color: var(--texto-2); }
.sup-tabela .barra-ocupacao { width: 100px; height: 7px; border-radius: 99px; background: var(--input); overflow: hidden; margin-top: 4px; }
.sup-tabela .barra-ocupacao span { display: block; height: 100%; background: var(--g-primario); }

@media (max-width: 1000px) {
  .sup-grade { grid-template-columns: 1fr; }
  .sup { padding: 16px; }
  .at-trabalho { grid-template-columns: 1fr; padding: 16px; }
  .at-lado { position: static; }
  .at-ficha-corpo { grid-template-columns: 1fr; }
  .at-ficha-topo { flex-wrap: wrap; }
  .at-topo { padding: 0 16px; height: auto; min-height: 64px; flex-wrap: wrap; }
  .at-topo-dir { flex-wrap: wrap; padding: 8px 0; }
  .at-campanha select { min-width: 0; }
  .teclado { top: auto; bottom: 0; right: 0; left: 0; width: auto; max-height: calc(100vh - 12px); border-radius: 8px 22px 0 0; gap: 8px; }
  .tec-grade { gap: 8px; }
  .tec-grade button { height: 50px; }
  .tec-ligar { height: 52px; flex-shrink: 0; }
  .at-clientes-rolagem { height: auto; max-height: 400px; }
}

/* ================= visual novo (modelo 2): caixas brancas de canto reto, títulos em maiúsculas, cores sólidas ================= */
.at-topo { height: 60px; padding: 0 24px; background: #fff; backdrop-filter: none; border-bottom-color: #e4e7ec; }
.at-topo .logo-icone.verde { box-shadow: none; }
.at-selo { padding: 2px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: #067647; background: #ecfdf3; border-color: #abefc6; }
.at-topo-dir { gap: 12px; }
.at-btn-manual { height: 38px; padding: 0 14px; border-radius: 8px; font-weight: 700; font-size: 12.5px; background: #0050f0; box-shadow: none; }
.at-btn-manual.ativo { box-shadow: 0 0 0 3px rgba(0, 80, 240, .25); }
.at-conexao { font-weight: 600; font-size: 12.5px; color: #067647; }
.at-campanha { height: 34px; padding: 0 12px; border-radius: 8px; background: #f9fafb; border-color: #e4e7ec; font-weight: 600; font-size: 12.5px; }
.at-quem { font-size: 13px; }
.at-avatar { width: 32px; height: 32px; font-size: 11.5px; background: #0050f0; }
.at-topo .btn, .at-trabalho .btn { text-transform: none; letter-spacing: 0; font-weight: 700; border-radius: 8px; box-shadow: none; }
.at-topo .btn-pequeno, .at-trabalho .btn-pequeno { height: 30px; padding: 0 10px; font-size: 12px; }
.at-topo .btn-claro, .at-trabalho .btn-claro { border-color: #d0d5dd; color: #344054; }
.at-trabalho .btn-verde { background: #12b76a; }
.at-trabalho .btn-vermelho { background: #d92d20; }
.teclado { top: 70px; }

/* área de trabalho e caixas */
.at-trabalho { grid-template-columns: 310px minmax(0, 1fr); gap: 18px; padding: 18px 24px 28px; }
.at-lado { gap: 14px; top: 78px; }
.at-centro { gap: 18px; }
.at-trabalho .cartao { border-radius: 0; background: #fff; border-color: #e4e7ec; box-shadow: none; backdrop-filter: none; }

/* você está: faixa de cor em cima, relógio na cor do estado */
.at-status { --cor: #98a2b3; --fundo: #f2f4f7; padding: 16px; gap: 12px; border-top: 3px solid var(--cor); }
.at-status.verde { --cor: #12b76a; --fundo: #ecfdf3; }
.at-status.azul { --cor: #0050f0; --fundo: #eff8ff; }
.at-status.laranja { --cor: #f79009; --fundo: #fffaeb; }
.at-status.roxo { --cor: #0050f0; --fundo: #eaf2ff; }
.at-status.estourou { --cor: #d92d20; --fundo: #fef3f2; }
.at-trabalho .at-status.estourou { box-shadow: inset 0 0 0 2px rgba(217, 45, 32, .35); }
.at-status-topo { gap: 12px; }
.at-status-icone { width: 44px; height: 44px; border-radius: 8px; font-size: 17px; }
.at-status-topo small { font-size: 10.5px; letter-spacing: .5px; color: #667085; }
.at-status-topo b { font-size: 19px; }
.at-status-topo div > span { font-size: 12.5px; }
.at-relogio { font-size: 34px; line-height: 1.1; letter-spacing: -.5px; }
.at-btn-grande { height: 42px; padding: 0 16px; font-size: 13px; }
.at-limite { margin-top: -4px; border-radius: 8px; }
.at-pausa-menu { border-radius: 8px; }

/* áudio */
.at-audio { padding: 14px 16px; }
.at-audio-topo b { font-size: 13px; }
.at-medidor { background: #eef1f6; }

/* meus retornos e clientes atendidos: título em cima com linha, itens em linhas */
.at-trabalho .at-clientes-titulo { gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #101828; }
.at-retornos { padding: 0; gap: 0; }
.at-retornos .at-clientes-titulo { padding: 12px 16px; border-bottom: 1px solid #e4e7ec; }
.at-retornos .at-clientes-titulo em { margin-left: 0; background: #eaf1ff; color: var(--azul); letter-spacing: 0; }
.at-ret-lista { gap: 0; }
.at-ret { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; padding: 9px 16px; border-radius: 0; background: none; border-bottom: 1px solid #f0f2f5; }
.at-ret:last-child { border-bottom: 0; }
.at-ret-hora { font-size: 12px; font-weight: 700; color: #003fbf; }
.at-ret-quem small { color: #667085; }
.at-ret.atrasado .at-ret-hora, .at-ret.atrasado .at-ret-quem small { color: #d92d20; }
.at-trabalho .at-cli-vazio { margin: 12px 16px; border-radius: 0; background: #f9fafb; border: 1px solid #f0f2f5; color: #475467; }
.at-clientes { padding: 0; gap: 0; }
.at-clientes-topo { min-height: 44px; margin: 0; padding: 8px 12px 8px 16px; border-bottom: 1px solid #e4e7ec; }
.at-cli-lupa { width: 28px; height: 28px; border-radius: 8px; background: #fff; border: 1px solid #e4e7ec; color: #667085; font-size: 12px; }
.at-cli-lupa:hover, .at-cli-lupa.ativo { background: #eaf1ff; border-color: rgba(0, 80, 240, .35); color: var(--azul); }
.at-clientes .busca-icone { margin: 10px 16px 4px; background: #fff; border-color: #d0d5dd; border-radius: 8px; }
.at-clientes-rolagem { padding-right: 0; gap: 0; }
.at-clientes-lista { gap: 0; }
.at-cli { grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; padding: 9px 16px; line-height: 1.25;
  border: 0; border-bottom: 1px solid #f0f2f5; border-radius: 0; }
.at-cli:hover, .at-cli:focus-visible { background: #f5f8ff; border-color: #f0f2f5; }
.at-clientes .at-cli-av { align-self: center; width: 32px; height: 32px; border-radius: 50%; font-size: 11px; color: #0050f0; background: #eaf1ff; }
.at-clientes .at-cli-av.manual { color: #0050f0; background: #eaf2ff; }
.at-cli-quem small, .at-cli-quando small { font-size: 11.5px; color: #667085; }
.at-cli-quando { color: #344054; }
.at-cli-quando small { font-weight: 500; color: #98a2b3; }
.selo-origem, .selo-qual { padding: 0 8px; line-height: 18px; font-size: 11px; font-weight: 600; border: 1px solid #e4e7ec; }
.selo-origem.manual { color: #0050f0; background: #eaf2ff; border-color: #b2ddff; }
.selo-origem.campanha { color: #003fbf; background: #eff8ff; border-color: #b2ddff; }
.selo-qual { color: #475467; background: #f9fafb; }
.selo-qual.bom { color: #067647; background: #ecfdf3; border-color: #abefc6; }
.selo-qual.retorno { color: #b54708; background: #fffaeb; border-color: #fedf89; }
.selo-qual.pendente { color: #b42318; background: #fef3f2; border-color: #fecdca; }
#cli-mais { margin: 10px auto; }

/* aguardando / pausa */
.at-espera { padding: 56px 30px; }
.at-espera h2 { font-size: 22px; }
.at-espera p { font-size: 14px; color: #475467; }

/* ficha do cliente: faixa azul clara em cima, dados em caixinhas, URA em passos, histórico em linha do tempo */
.at-ficha-topo { gap: 14px; padding: 16px 18px; border-bottom-color: #e4e7ec; background: linear-gradient(90deg, #eff5ff, #fff); }
.at-ficha-avatar { width: 52px; height: 52px; border-radius: 8px; font-size: 17px; background: linear-gradient(135deg, #0050f0, #00a8f0); box-shadow: none; }
.at-ficha-quem small { font-size: 11px; letter-spacing: .5px; color: #667085; }
.at-ficha-quem h2 { font-size: 22px; line-height: 1.2; }
.at-ficha-quem > span { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 3px; font-size: 13px; font-weight: 500; color: #344054; }
.at-ficha-quem > span > i { margin-right: 0; font-size: 11px; color: #98a2b3; }
.at-fila { margin-left: 0; padding: 0 9px; line-height: 20px; font-weight: 600; color: #475467; background: #f2f4f7; }
.at-alo { margin-left: 0; padding: 0 9px; line-height: 20px; font-weight: 600; color: #067647; background: #ecfdf3; }
.at-alo.calado { color: #475467; background: #f2f4f7; }
.at-ficha-quem .at-alo i, .at-ficha-quem .at-fila i { margin-right: 4px; font-size: 10px; color: inherit; }
.at-ficha-tempo b { font-size: 26px; line-height: 1.1; }
.at-ao-vivo { font-size: 11px; }
#btn-desligar { height: 42px; padding: 0 18px; }
.at-ficha-corpo { gap: 24px; padding: 18px; }
.at-ficha-corpo h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .5px; color: #101828; }
.at-dados { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.at-dados div { padding: 7px 10px; border-radius: 0; background: #f9fafb; border: 1px solid #f0f2f5; }
.at-dados dt { font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #667085; }
.at-dados dd { font-size: 13px; font-weight: 600; }
.at-ura { margin-top: 18px; }
.at-ura ol { gap: 7px; }
.at-ura li { align-items: center; gap: 8px; padding: 0; border-radius: 0; background: none; font-size: 12.5px; font-weight: 500; }
.at-ura li::before { background: #eaf1ff; color: var(--azul); font-weight: 700; }
.at-historico { gap: 0; }
.at-hist { position: relative; margin-left: 7px; padding: 0 0 12px 18px; border: 0; border-left: 2px solid #e4e7ec; border-radius: 0; }
.at-hist:last-child { padding-bottom: 0; }
.at-hist::before { content: ""; position: absolute; left: -7px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid #98a2b3; }
.at-hist span { display: block; margin: 0; font-size: 11.5px; color: #667085; }
.at-hist b { display: block; }
.at-hist small { display: block; margin: 0; font-size: 11.5px; color: #667085; }
.at-hist p { margin-top: 4px; padding: 6px 8px; font-size: 12.5px; color: #344054; background: #f9fafb; border: 1px solid #f0f2f5; }
.at-obs { padding: 0 18px 18px; }
.at-obs > span:first-child { font-weight: 700; letter-spacing: .5px; color: #667085; }
.at-obs textarea { background: #fff; border-color: #d0d5dd; border-radius: 8px; }

/* qualificação: título em cima com linha, opções com a bolinha da cor, retorno numa caixinha cinza */
.at-qualificar { padding: 0; }
.at-qualificar-topo { gap: 8px; margin: 0; padding: 12px 16px; border-bottom: 1px solid #e4e7ec; }
.at-qualificar-topo .numero { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: #f79009; font-size: 12px; }
.at-qualificar-topo > div { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.at-qualificar-topo h3 { font: 700 11.5px var(--fonte); letter-spacing: .5px; text-transform: uppercase; }
.at-qualificar-topo p { margin-left: auto; font-size: 12.5px; color: #667085; }
.at-qual-opcoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0; }
.at-qual { --q: #98a2b3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; border: 1px solid #d0d5dd;
  font-size: 13px; color: #344054; text-align: left; }
.at-qual::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--q); flex-shrink: 0; }
.at-qual.verde { --q: #12b76a; } .at-qual.amarelo { --q: #f79009; } .at-qual.vermelho { --q: #f04438; }
.at-qual.verde, .at-qual.amarelo, .at-qual.vermelho { border-color: #d0d5dd; color: #344054; }
.at-qual:hover { border-color: var(--q); transform: none; }
.at-qual.escolhida:not(.verde):not(.amarelo):not(.vermelho) { --q: #0050f0; }
.at-qual.escolhida, .at-qual.verde.escolhida, .at-qual.amarelo.escolhida, .at-qual.vermelho.escolhida { border-color: var(--q);
  background: color-mix(in srgb, var(--q) 9%, #fff); color: color-mix(in srgb, var(--q) 65%, #101828);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--q) 18%, transparent); }
.at-qual-retorno { align-items: center; gap: 10px 12px; margin: 12px 16px 0; padding: 12px 14px; border-radius: 0; background: #f9fafb; border: 1px solid #f0f2f5; }
.at-qual-retorno .campo { width: auto; flex-direction: row; align-items: center; gap: 10px; }
.at-qual-retorno .campo > span:first-child, .at-qual-quem > b { min-width: 128px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #667085; }
.at-qual-retorno .campo input { width: 215px; height: 36px; padding: 0 10px; background: #fff; border-color: #d0d5dd; border-radius: 8px; font-weight: 600; }
.at-atalhos-retorno { padding-bottom: 0; }
.at-atalhos-retorno .chip { padding: 4px 10px; background: #fff; border-color: #d0d5dd; color: #344054; font-weight: 600; }
.at-qual-quem { font-size: 13px; }
.at-seg { gap: 2px; background: #fff; border: 1px solid #d0d5dd; }
.at-seg button { padding: 5px 12px; font-size: 12.5px; color: #344054; }
.at-seg button.on { background: #eaf1ff; color: var(--azul); box-shadow: inset 0 0 0 1px rgba(0, 80, 240, .35); }
.at-qual-acoes { gap: 8px; margin-top: 0; padding: 14px 16px 16px; }
.at-qual-acoes .btn, .at-qual-acoes select { height: 42px; }
.at-qual-acoes .btn { padding: 0 18px; }

@media (max-width: 1000px) {
  .at-trabalho { grid-template-columns: 1fr; padding: 16px; }
  .at-topo { height: auto; min-height: 60px; padding: 0 16px; }
  .teclado { top: auto; }
  .at-qualificar-topo p { margin-left: 0; }
  .at-ficha-quem { flex-basis: calc(100% - 70px); }  /* no celular: nome ao lado da foto; tempo e Desligar embaixo */
  .at-ficha-tempo { text-align: left; }
}