/* Liga Voz · LIGVOX — identidade visual e componentes do discador. */
:root {
  --bg: #f3f7fc;
  --cartao: #ffffff;
  --sidebar: #ffffff;
  --input: #f5f8fc;
  --hover: #eef4fb;
  --texto-1: #142438;
  --texto-2: #53657b;
  --texto-3: #7e90a6;
  --borda: rgba(20, 36, 56, 0.12);
  --borda-azul: rgba(0, 80, 240, 0.15);
  --foco: rgba(0, 168, 240, 0.34);
  --azul: #0050f0;
  --azul-2: #00a8f0;
  --azul-menu: #0050f0;
  --g-primario: linear-gradient(120deg, #0050f0 0%, #00a8f0 100%);
  --g-verde: linear-gradient(120deg, #00a884 0%, #12b76a 100%);
  --g-vermelho: linear-gradient(120deg, #d92d20 0%, #f04438 100%);
  --verde: #087c5b;
  --vermelho: #c73535;
  --laranja: #b86b00;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --fonte-titulo: 'Barlow Semi Condensed', sans-serif;
  --fonte: 'IBM Plex Sans', system-ui, sans-serif;
  --fonte-dados: 'IBM Plex Mono', ui-monospace, monospace;
  --sombra-cartao: 0 1px 3px rgba(0, 16, 32, 0.05), 0 0 0 1px rgba(0, 16, 32, 0.035);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font: 14px/1.5 var(--fonte);
  color: var(--texto-1);
  background-color: var(--bg);
  background-image: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
code { font-size: 12px; background: var(--input); padding: 1px 6px; border-radius: 6px; }
.oculto { display: none !important; }

.app { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; }

/* ================= menu lateral ================= */
.sidebar {
  position: sticky; top: 0; height: 100vh;
  background: var(--sidebar);
  border-right: 1px solid var(--borda);
  padding: 0 22px 22px;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;  /* tela baixa com os grupos abertos: o menu rola por dentro */
}
.sidebar > * { flex-shrink: 0; }  /* sem isto o logo encolhe e fica cortado quando falta altura */
.logo {
  display: flex; align-items: center; gap: 12px;
  height: 72px; border-bottom: 1px solid var(--borda); margin-bottom: 18px;  /* mesma altura da barra do topo */
}
.logo-icone {
  width: 40px; height: 40px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--g-primario); color: #fff; font-size: 18px;
  box-shadow: 0 6px 16px rgba(0, 80, 240, 0.3);
}
.logo-nome { font-family: var(--fonte-titulo); font-size: 19px; letter-spacing: 1.2px; white-space: nowrap; }
.logo-nome b { font-weight: 800; color: var(--texto-1); }
.logo-nome em {
  font-style: normal; font-weight: 700;
  background: linear-gradient(135deg, #00a8f0, #0050f0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--texto-3); padding: 16px 8px 8px;
}
.nav-label:first-child { padding-top: 4px; }
.nav-link {
  all: unset; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 500; color: var(--texto-2);
  border-left: 3px solid transparent;
  transition: background .2s, color .2s;
}
.nav-link i { width: 18px; text-align: center; font-size: 15px; color: var(--texto-2); }
.nav-link:hover { background: var(--hover); color: var(--texto-1); }
.nav-link.ativo {
  background: #eaf2ff;
  border-left-color: var(--azul-menu);
  color: var(--texto-1); font-weight: 600;
}
.nav-link.ativo i { color: var(--azul-menu); }
.nav-link .selo-vivo { font-style: normal; }
.nav-link .nav-externo { margin-left: auto; width: auto; font-size: 11px; opacity: .55; }
.nav-grupo .nav-seta { margin-left: auto; width: auto; font-size: 11px; transition: transform .2s; }
.nav-grupo[aria-expanded="true"] .nav-seta { transform: rotate(180deg); }
.nav-grupo.tem-ativo, .nav-grupo.tem-ativo i { color: var(--texto-1); font-weight: 600; }
.nav-grupo.tem-ativo > i:first-child { color: var(--azul-menu); }
.nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px 22px; padding-left: 8px; border-left: 2px solid var(--borda); }
.nav-sub.oculto { display: none; }
.nav-sub .nav-link { padding: 9px 14px; font-size: 13.5px; gap: 12px; }
.nav-sub .nav-link i { font-size: 13px; }
.rel-nota { display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; padding: 10px 14px; border-radius: 8px; font-size: 13px;
  background: rgba(0, 80, 240, .06); color: #0039b8; }
.rel-nota i { color: var(--azul); }
.selo-origem-rel { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.selo-origem-rel.manual { background: rgba(0, 80, 240, .1); color: #0050f0; }
.selo-origem-rel.fila { background: rgba(0, 80, 240, .08); color: #003fbf; }
.rel-fila-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.rel-fila-resumo div { padding: 10px 12px; border-radius: 8px; background: var(--input); }
.rel-fila-resumo small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--texto-3); }
.rel-fila-resumo b { font: 800 20px var(--fonte-titulo); }
.sidebar-status { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--borda); font-size: 12px; }
.sidebar-status div { display: flex; align-items: center; gap: 8px; }
.sidebar-status b { font-weight: 600; color: var(--texto-1); }
.sidebar-status small { display: block; color: var(--texto-3); margin-top: 4px; }
.ponto-status { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); flex-shrink: 0; }
.ponto-status.ok { background: #00b09b; box-shadow: 0 0 8px rgba(0, 176, 155, 0.6); }
.ponto-status.alerta { background: var(--laranja); box-shadow: 0 0 8px rgba(247, 151, 30, 0.6); }

/* ================= conteúdo ================= */
.conteudo { padding: 34px 40px 60px; min-width: 0; }
.aba { display: none; animation: entrar .35s ease; }  /* ocupa a largura toda (menu recolhido ou tela larga) */
.aba.ativa { display: block; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }

.pagina-topo {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--borda);
}
.titulo { font-family: var(--fonte-titulo); font-size: 32px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; }
.subtitulo { font-size: 15px; color: var(--texto-2); margin-top: 6px; max-width: 720px; }
.acoes { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.dica { font-size: 13px; color: var(--texto-2); }

/* ================= botões ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-md); border: 1px solid transparent;
  font-size: 13px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primario { background: var(--g-primario); color: #fff; box-shadow: 0 12px 28px rgba(0, 80, 240, 0.25); }
.btn-claro { background: #fff; color: var(--texto-1); border-color: var(--borda); box-shadow: 0 4px 12px rgba(0, 50, 150, 0.05); }
.btn-claro i { color: var(--azul); }
.btn-perigo { background: #fff; color: var(--vermelho); border-color: rgba(220, 38, 38, 0.25); }
.btn-perigo-cheio { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(220, 38, 38, .25); }
/* janelas do sistema (confirmar / digitar um nome), no lugar das do navegador */
.janela-fundo { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px;
  background: rgba(15, 23, 42, .38); backdrop-filter: blur(6px); animation: janela-fundo .15s ease; }
.janela { width: min(460px, 100%); padding: 22px 22px 18px; border-radius: 8px; background: #fff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .3); animation: janela-entrar .18s ease; }
.janela-topo { display: flex; align-items: flex-start; gap: 14px; }
.janela-icone { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; font-size: 17px;
  color: var(--azul); background: rgba(0, 80, 240, .1); }
.janela-icone.perigo { color: var(--vermelho); background: rgba(220, 38, 38, .1); }
.janela h3 { font: 700 17px var(--fonte-titulo); line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; }
.janela p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
.janela-campo { margin-top: 16px; }
.janela-campo.erro { border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.janela-botoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@keyframes janela-entrar { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes janela-fundo { from { opacity: 0; } }
.btn-verde { background: var(--g-verde); color: #fff; box-shadow: 0 12px 28px rgba(0, 176, 155, 0.28); }
.btn-vermelho { background: var(--g-vermelho); color: #fff; box-shadow: 0 12px 28px rgba(231, 56, 39, 0.25); }
.btn-pequeno { padding: 7px 13px; font-size: 11px; border-radius: 8px; }
.btn-largo { width: 100%; }

/* ================= cartões e etapas ================= */
.cartao, .etapa, .cartao-tabela, .stat {
  background: var(--cartao);
  border: 1px solid var(--borda-azul);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-cartao);
  backdrop-filter: blur(12px);
}
.etapas { display: flex; flex-direction: column; gap: 18px; }
.etapa { padding: 22px 26px; box-shadow: var(--sombra-cartao), inset 3px 0 0 rgba(0, 80, 240, 0.55); }
.etapa + .etapa { margin-top: 0; }
.etapa-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.numero {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--g-primario); color: #fff;
  font-size: 13px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 80, 240, 0.3);
}
.etapa-topo h3 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.etapa-topo h3 i { color: var(--azul); font-size: 14px; }
.etapa-topo p { font-size: 12.5px; color: var(--texto-2); margin-top: 2px; }
#aba-clientes > .etapa { margin-bottom: 18px; }

/* ================= campos ================= */
.grade { display: grid; gap: 16px 18px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.largo { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo > span:first-child, .rotulo {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #666;
}
.campo em { font-style: normal; font-weight: 600; letter-spacing: .5px; text-transform: none; color: var(--texto-3); }
.campo small { font-size: 12px; color: var(--texto-2); }
input:not([type=checkbox]), textarea, select {
  width: 100%;
  background: var(--input);
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 14px; color: var(--texto-1);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea { resize: vertical; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:focus, textarea:focus, select:focus {
  outline: none; background: #fff; border-color: var(--foco);
  box-shadow: 0 0 0 4px rgba(0, 80, 240, 0.12);
}
input:disabled { opacity: .6; }
.linha { display: flex; gap: 10px; }
.linha select { flex: 1; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--texto-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--azul); }

.documentos { margin-top: 16px; padding: 14px 16px; border: 1px dashed rgba(0, 80, 240, 0.25); border-radius: var(--r-md); background: rgba(0, 80, 240, 0.025); }
.doc-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.doc-topo small { display: block; font-size: 12px; color: var(--texto-2); margin-top: 2px; }
#lista-docs { list-style: none; display: flex; flex-direction: column; gap: 8px; }
#lista-docs:not(:empty) { margin-top: 12px; }
#lista-docs li { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px; }
#lista-docs li i { color: var(--azul); margin-right: 8px; }
#lista-docs li span { color: var(--texto-3); font-size: 12px; margin-left: 8px; }
#tamanho-treino { margin-top: 12px; }

/* ================= início ================= */
.hero {
  position: relative; overflow: hidden;
  border-radius: 8px; padding: 44px 48px;
  background: linear-gradient(120deg, #001020 0%, #062d73 68%, #0050f0 100%);
  color: #fff; box-shadow: 0 20px 50px rgba(15, 28, 51, 0.25);
}
.hero-nebula .nb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.nb-1 { width: 380px; height: 380px; background: #00a8f0; top: -160px; right: 8%; opacity: .35 !important; }
.nb-2 { width: 300px; height: 300px; background: #00a8f0; bottom: -170px; right: -60px; }
.nb-3 { width: 260px; height: 260px; background: #e24a8d; bottom: -190px; left: 30%; opacity: .25 !important; }
.hero-conteudo { position: relative; max-width: 640px; }
.hero-tags { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.tag-laranja { background: linear-gradient(135deg, #f7971e, #f05f3d); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; padding: 4px 11px; border-radius: 99px; }
.tag-versao { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; color: rgba(255, 255, 255, .6); }
.hero h1 { font-family: var(--fonte-titulo); font-size: 40px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.1; }
.hero-divisor { display: block; width: 48px; height: 3px; border-radius: 3px; background: var(--laranja); margin: 16px 0; }
.hero p { font-size: 15px; color: rgba(255, 255, 255, .82); }
.hero-mini { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 22px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.hero-mini i { color: #7cc4ff; margin-right: 6px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 20px 0 30px; }
.stat { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.stat small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--texto-2); }
.stat b { font-family: var(--fonte-titulo); font-size: 24px; font-weight: 700; line-height: 1.2; }
.stat-icone { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 16px; }
.stat-icone.azul { background: rgba(0, 80, 240, .1); color: var(--azul); }
.stat-icone.laranja { background: rgba(247, 151, 30, .14); color: #d97706; }
.stat-icone.roxo { background: rgba(0, 168, 240, .12); color: #0080c8; }
.stat-icone.verde { background: rgba(16, 185, 129, .12); color: var(--verde); }
.stat-icone.vermelho { background: rgba(220, 38, 38, .1); color: var(--vermelho); }
.stat-icone.cinza { background: var(--input); color: var(--texto-2); }

.secao-titulo { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--borda); }
.secao-titulo h2 { font-family: var(--fonte-titulo); font-size: 24px; font-weight: 800; letter-spacing: -0.4px; }
.secao-titulo p { color: var(--texto-2); font-size: 13px; margin-top: 2px; }
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.passo {
  all: unset; cursor: pointer; position: relative;
  padding: 22px 24px; border-radius: var(--r-lg);
  background: var(--cartao); border: 1px solid var(--borda-azul);
  box-shadow: var(--sombra-cartao), inset 3px 0 0 rgba(0, 80, 240, 0.55);
  transition: transform .2s, box-shadow .2s;
}
.passo:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 50, 150, 0.12), inset 3px 0 0 rgba(0, 80, 240, 0.55); }
.passo h3 { font-size: 16px; font-weight: 700; margin: 16px 0 6px; display: flex; align-items: center; gap: 8px; }
.passo h3 i { color: var(--azul); font-size: 14px; }
.passo p { font-size: 13px; color: var(--texto-2); }
.passo-status { position: absolute; top: 22px; right: 22px; }

/* ================= pílulas e etiquetas ================= */
.pilula {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
  background: rgba(0, 80, 240, 0.08); color: var(--azul); border: 1px solid rgba(0, 80, 240, 0.2);
}
.pilula:empty { display: none; }
.pilula-verde { background: rgba(16, 185, 129, 0.1); color: var(--verde); border-color: rgba(16, 185, 129, 0.35); }
.pilula-amarela { background: rgba(247, 151, 30, 0.12); color: #b45309; border-color: rgba(247, 151, 30, 0.35); }
.pilula-cinza { background: var(--input); color: var(--texto-2); border-color: var(--borda); }

.etiqueta { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--input); color: var(--texto-2); border: 1px solid var(--borda); }
.r-sucesso { background: rgba(16, 185, 129, .1); color: var(--verde); border-color: rgba(16, 185, 129, .3); }
.r-interessado { background: rgba(0, 80, 240, .08); color: var(--azul); border-color: rgba(0, 80, 240, .2); }
.r-retornar_depois, .r-em_ligacao { background: rgba(247, 151, 30, .12); color: #b45309; border-color: rgba(247, 151, 30, .3); }
.r-transferido { background: rgba(0, 168, 240, .1); color: #0080c8; border-color: rgba(0, 168, 240, .25); }
.r-sem_interesse, .r-nao_ligar_mais { background: rgba(220, 38, 38, .08); color: var(--vermelho); border-color: rgba(220, 38, 38, .22); }

/* ================= tabelas ================= */
.importar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.arquivo {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 16px; border-radius: var(--r-md); min-width: 280px;
  border: 1px dashed rgba(0, 80, 240, 0.35); background: rgba(0, 80, 240, 0.03);
  color: var(--texto-2); font-weight: 500;
}
.arquivo i { color: var(--azul); font-size: 17px; }
.arquivo:hover { background: rgba(0, 80, 240, 0.06); }
.cartao-tabela { overflow: hidden; }
.tabela-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--borda); }
.tabela-topo h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.tabela-topo h3 i { color: var(--azul); }
.tabela-rolagem { overflow: auto; max-height: 62vh; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  position: sticky; top: 0; z-index: 1; text-align: left;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #666;
  background: #f7f9fc; padding: 11px 22px; border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 13px 22px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover td { background: rgba(0, 80, 240, 0.025); }
.tabela tr.clicavel { cursor: pointer; }
.tabela td.nome { font-weight: 600; }
.tabela .vazio-linha { text-align: center; color: var(--texto-2); padding: 46px; }
.tabela .vazio-linha i { display: block; font-size: 26px; color: var(--texto-3); margin-bottom: 10px; }
.extras { color: var(--texto-2); font-size: 13px; }

/* ================= ligação ================= */
.ligacao-grade { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: stretch; }
.lig-lado { padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sombra-cartao), inset 3px 0 0 rgba(0, 80, 240, 0.55); }
.avatar { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--g-primario); color: #fff; font-size: 20px; box-shadow: 0 8px 20px rgba(0, 80, 240, .3); }
.lig-cliente { display: flex; flex-direction: column; gap: 10px; }
.lig-cliente.vazio { align-items: center; text-align: center; color: var(--texto-2); padding: 14px 0; }
.lig-cliente.vazio .avatar { background: var(--input); color: var(--texto-3); box-shadow: none; }
.lig-id { display: flex; align-items: center; gap: 14px; }
.lig-id .avatar { font-family: var(--fonte-titulo); font-size: 17px; font-weight: 700; }
.lig-cliente h2 { font-family: var(--fonte-titulo); font-size: 19px; font-weight: 700; line-height: 1.25; }
.lig-cliente .tel { color: var(--texto-2); font-size: 13px; }
.lig-cliente dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; padding: 12px 14px; background: var(--input); border-radius: var(--r-md); }
.lig-cliente dt { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #666; align-self: center; }
.lig-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lig-botoes .btn { padding: 13px; font-size: 14px; }

.estado { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-md); font-weight: 600; font-size: 13.5px; background: var(--input); color: var(--texto-2); border: 1px solid var(--borda); }
.estado .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--texto-3); flex-shrink: 0; }
.estado[data-estado=ouvindo] { background: rgba(16, 185, 129, .1); color: var(--verde); border-color: rgba(16, 185, 129, .3); }
.estado[data-estado=ouvindo] .ponto { background: #10b981; animation: pulsar 1.2s infinite; }
.estado[data-estado=pensando] { background: rgba(247, 151, 30, .1); color: #b45309; border-color: rgba(247, 151, 30, .3); }
.estado[data-estado=pensando] .ponto { background: var(--laranja); animation: pulsar .7s infinite; }
.estado[data-estado=falando] { background: rgba(0, 80, 240, .07); color: var(--azul); border-color: rgba(0, 80, 240, .2); }
.estado[data-estado=falando] .ponto { background: var(--azul); animation: pulsar .9s infinite; }
@keyframes pulsar { 50% { transform: scale(1.6); opacity: .45; } }

.lig-conversa { display: flex; flex-direction: column; min-height: 520px; overflow: hidden; }
.conversa-topo { padding: 15px 22px; border-bottom: 1px solid var(--borda); font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 9px; }
.conversa-topo i { color: var(--azul); }
.transcricao { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; max-height: 60vh; }
.bolha { max-width: 76%; padding: 10px 15px; border-radius: 8px; white-space: pre-wrap; font-size: 14px; }
.bolha small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: .65; margin-bottom: 3px; }
.bolha.agente { align-self: flex-start; background: #fff; border: 1px solid var(--borda-azul); border-bottom-left-radius: 5px; box-shadow: 0 4px 14px rgba(0, 50, 150, 0.05); }
.bolha.agente small { color: var(--azul); opacity: 1; }
.bolha.cliente { align-self: flex-end; background: var(--g-primario); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 6px 16px rgba(0, 80, 240, 0.22); }
.bolha.ao-vivo { opacity: .55; font-style: italic; }
.nota { align-self: center; text-align: center; color: var(--texto-2); font-size: 12.5px; background: var(--input); padding: 5px 14px; border-radius: 99px; }
.nota.erro { color: var(--vermelho); background: rgba(220, 38, 38, .07); }
.digitar { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--borda); }
.digitar .btn { padding: 10px 16px; }

.analise { margin-top: 18px; padding: 22px 26px; box-shadow: var(--sombra-cartao), inset 3px 0 0 rgba(16, 185, 129, 0.7); }
.analise h2 { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.analise > p { color: var(--texto-2); }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 16px 0; }
.campos .campo-valor { background: var(--input); border-radius: var(--r-md); padding: 10px 14px; font-weight: 600; }
.campos .campo-valor span { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #666; margin-bottom: 2px; }

/* ================= rota VoIP ================= */
.g4 { grid-template-columns: repeat(4, 1fr); }
.g-dois { grid-column: span 2; }
.etapa-topo .interruptor { margin-left: auto; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--texto-1); cursor: pointer; user-select: none; }
.interruptor input { display: none; }
.interruptor span { position: relative; width: 42px; height: 24px; border-radius: 99px; background: rgba(0, 0, 0, 0.15); transition: background .2s; flex-shrink: 0; }
.interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .2s; }
.interruptor input:checked + span { background: var(--g-primario); }
.interruptor input:checked + span::after { transform: translateX(18px); }
.grade .interruptor { align-self: end; padding-bottom: 10px; }

.opcoes-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.opcao { cursor: pointer; }
.opcao input { display: none; }
.opcao > span { display: block; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--borda); background: var(--input); transition: .2s; }
.opcao b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.opcao b i { color: var(--texto-3); }
.opcao small { display: block; font-size: 12.5px; color: var(--texto-2); margin-top: 3px; }
.opcao input:checked + span { background: rgba(0, 80, 240, .05); border-color: rgba(0, 80, 240, .45); box-shadow: 0 0 0 3px rgba(0, 80, 240, .08); }
.opcao input:checked + span b i { color: var(--azul); }
#campos-registro.desligado { opacity: .45; pointer-events: none; }
#previa-numero { color: var(--azul); font-weight: 600; }

.status-rota {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 16px 22px;
  border-radius: var(--r-lg); background: var(--cartao); border: 1px solid var(--borda); box-shadow: var(--sombra-cartao);
}
.status-rota-icone { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; font-size: 18px; background: var(--input); color: var(--texto-2); flex-shrink: 0; }
.status-rota small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--texto-2); }
.status-rota b { font-size: 15px; }
.status-rota #rota-status-ip { margin-left: 10px; font-size: 12px; color: var(--texto-3); }
.status-rota.ok { border-color: rgba(16, 185, 129, .35); box-shadow: var(--sombra-cartao), inset 3px 0 0 #10b981; }
.status-rota.ok .status-rota-icone { background: rgba(16, 185, 129, .12); color: var(--verde); }
.status-rota.erro { border-color: rgba(220, 38, 38, .3); box-shadow: var(--sombra-cartao), inset 3px 0 0 var(--vermelho); }
.status-rota.erro .status-rota-icone { background: rgba(220, 38, 38, .1); color: var(--vermelho); }

/* ================= discador ================= */
.disc-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.camp-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.camp-numeros div { background: var(--input); border-radius: var(--r-md); padding: 10px 14px; }
.camp-numeros small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #666; }
.camp-numeros b { font-family: var(--fonte-titulo); font-size: 22px; }
.disc-chamadas { padding: 18px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.disc-chamadas .vazio { grid-column: 1 / -1; text-align: center; color: var(--texto-2); padding: 26px; }
.disc-chamadas .vazio i { display: block; font-size: 26px; color: var(--texto-3); margin-bottom: 10px; }
.chamada-viva { border: 1px solid var(--borda-azul); border-radius: var(--r-md); background: #fff; overflow: hidden; }
.chamada-viva header { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--borda); }
.chamada-viva header .avatar { width: 38px; height: 38px; font-size: 13px; font-family: var(--fonte-titulo); font-weight: 700; }
.chamada-viva header div { flex: 1; min-width: 0; }
.chamada-viva header b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chamada-viva header small { color: var(--texto-2); font-size: 12px; }
.chamada-viva .falas { padding: 10px 14px; max-height: 230px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.chamada-viva .falas p b { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; margin-right: 6px; }
.chamada-viva .falas p.agente b { color: var(--azul); }
.chamada-viva .falas p.cliente b { color: #0080c8; }
.chamada-viva .falas .nada { color: var(--texto-3); font-style: italic; }
.estado-chamada { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.estado-chamada.discando, .estado-chamada.tocando, .estado-chamada.preparando { background: rgba(247, 151, 30, .12); color: #b45309; }
.estado-chamada.em-conversa { background: rgba(16, 185, 129, .12); color: var(--verde); }
.estado-chamada.analisando, .estado-chamada.encerrada { background: var(--input); color: var(--texto-2); }
.r-nao_atendeu { background: rgba(0, 0, 0, .04); color: var(--texto-2); }
.r-falha { background: rgba(220, 38, 38, .08); color: var(--vermelho); border-color: rgba(220, 38, 38, .22); }
.canal { font-size: 11px; color: var(--texto-3); margin-left: 6px; }
audio { width: 100%; margin-top: 10px; }

/* ================= campanhas, roteiros, rotas, bloqueios ================= */
.g5 { grid-template-columns: repeat(4, 1fr) auto; }
.alinhar-base { display: flex; align-items: flex-end; }
.espaco { margin-top: 18px; }
.empurrar { margin-left: auto; }
.voltar { all: unset; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--azul); display: inline-flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.voltar:hover { text-decoration: underline; }
.select-filtro { width: auto; min-width: 220px; }

.barra-escolha {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px; margin-bottom: 18px; border-radius: var(--r-lg);
  background: var(--cartao); border: 1px solid var(--borda-azul); box-shadow: var(--sombra-cartao);
}
.barra-escolha .campo { flex: 1; min-width: 260px; max-width: 460px; }

.aviso-caixa {
  display: flex; gap: 14px; align-items: flex-start; margin: 16px 0 4px; padding: 14px 18px;
  border-radius: 8px; background: #fff; border: 1px solid var(--borda);
  box-shadow: 0 4px 14px rgba(0, 50, 150, 0.05), inset 4px 0 0 #d4a106;
}
.aviso-caixa > i { color: #d4a106; font-size: 20px; margin-top: 2px; }
.aviso-caixa b { display: block; font-size: 15px; }
.aviso-caixa span { color: var(--texto-2); font-size: 13.5px; }
.aviso-caixa.info { box-shadow: 0 4px 14px rgba(0, 50, 150, 0.05), inset 4px 0 0 #2a9fb4; margin-bottom: 18px; }
.aviso-caixa.info > i { color: #2a9fb4; }

.opcoes-lista { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.opcoes-lista .interruptor { align-items: flex-start; }
.opcoes-lista .interruptor > span { margin-top: 2px; }
.opcoes-lista b { display: block; font-size: 14px; }
.opcoes-lista small { display: block; font-weight: 400; color: var(--texto-2); font-size: 12.5px; }
.opcoes-lista input:disabled + span { opacity: .55; }
.listas-escolha { display: flex; flex-wrap: wrap; gap: 8px; }
.listas-escolha label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--borda); background: var(--input); font-size: 13px; font-weight: 500; cursor: pointer; }
.listas-escolha label:has(input:checked) { background: rgba(0, 80, 240, .06); border-color: rgba(0, 80, 240, .35); color: var(--azul); }
.listas-escolha .vazio { color: var(--texto-3); font-size: 13px; }

.periodo { display: grid; grid-template-columns: auto 200px 200px; gap: 18px; align-items: end; margin-bottom: 18px; }
.periodo .interruptor { padding-bottom: 10px; }
.horarios { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.dia { border: 1px solid var(--borda); border-radius: var(--r-md); padding: 10px; background: var(--input); display: flex; flex-direction: column; gap: 8px; }
.dia.ligado { background: rgba(0, 80, 240, .05); border-color: rgba(0, 80, 240, .3); }
.dia label.check { font-weight: 700; color: var(--texto-1); }
.dia input[type=time] { padding: 6px 8px; font-size: 13px; }
.dia:not(.ligado) input[type=time] { opacity: .4; }
.dia small { font-size: 11px; color: var(--texto-2); text-align: center; }
.dia .pausa-check { font-weight: 600; font-size: 12px; color: var(--texto-2); padding-top: 6px; border-top: 1px dashed var(--borda); }
.dia:not(.ligado) .pausa-check, .dia:not(.ligado) .pausa-horas { display: none; }
.pausa-horas { display: none; flex-direction: column; gap: 6px; padding: 8px; margin: 0 -4px; border-radius: 8px; background: rgba(247, 151, 30, .1); }
.dia.com-pausa .pausa-horas { display: flex; }
.pausa-horas .btn-link { flex: none; text-align: center; font-size: 11.5px; padding: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.chip { all: unset; cursor: pointer; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 99px; background: var(--input); border: 1px solid var(--borda); color: var(--texto-2); }
.chip b { font-weight: 800; color: var(--texto-1); margin-left: 4px; }
.chip.ativo { background: var(--g-primario); color: #fff; border-color: transparent; }
.chip.ativo b { color: #fff; }
.filtro-linha { margin-bottom: 10px; max-width: 360px; }
.tabela-interna { border: 1px solid var(--borda); border-radius: var(--r-md); max-height: 520px; }
.paginacao { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 13px; color: var(--texto-2); }

.progresso { min-width: 160px; }
.progresso .barra { height: 8px; border-radius: 99px; background: var(--input); overflow: hidden; }
.progresso .barra span { display: block; height: 100%; border-radius: 99px; background: var(--g-primario); }
.progresso small { font-size: 11.5px; color: var(--texto-2); }
.situacao { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; max-width: 280px; }
.situacao::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); flex-shrink: 0; }
.situacao.rodando { color: var(--verde); }
.situacao.rodando::before { background: #10b981; animation: pulsar 1.2s infinite; }
.situacao.esperando { color: #b45309; }
.situacao.esperando::before { background: var(--laranja); }
.situacao.problema { color: var(--vermelho); }
.situacao.problema::before { background: var(--vermelho); }
.situacao.pausada { color: var(--texto-2); }
.situacao.concluida { color: var(--azul); }
.situacao.concluida::before { background: var(--azul); }
.tabela td small.sub { display: block; color: var(--texto-3); font-size: 12px; font-weight: 400; }

.rotas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.rota-cartao { all: unset; cursor: pointer; padding: 14px 16px; border-radius: var(--r-md); background: var(--cartao); border: 1px solid var(--borda); box-shadow: var(--sombra-cartao); display: flex; flex-direction: column; gap: 4px; }
.rota-cartao.escolhida { border-color: rgba(0, 80, 240, .5); box-shadow: var(--sombra-cartao), 0 0 0 3px rgba(0, 80, 240, .1); }
.rota-cartao b { font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.rota-cartao small { color: var(--texto-2); font-size: 12px; }

.listas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.lista-cartao { padding: 18px 20px; border-radius: var(--r-lg); background: var(--cartao); border: 1px solid var(--borda-azul); box-shadow: var(--sombra-cartao), inset 3px 0 0 rgba(220, 38, 38, .55); display: flex; flex-direction: column; gap: 12px; }
.lista-cartao header { display: flex; align-items: center; gap: 10px; }
.lista-cartao header h3 { font-size: 16px; flex: 1; }
.lista-cartao .qtd { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 800; }
.lista-cartao .linha input { flex: 1; }
.lista-cartao .numeros { max-height: 160px; overflow-y: auto; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.lista-cartao .numeros div { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; background: var(--input); border-radius: 6px; }
.lista-cartao .numeros button { all: unset; cursor: pointer; color: var(--texto-3); }
.lista-cartao .numeros button:hover { color: var(--vermelho); }

.simular-form { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.vazio-grande { text-align: center; padding: 50px 20px; color: var(--texto-2); }
.vazio-grande i { font-size: 34px; color: var(--texto-3); display: block; margin-bottom: 12px; }
.r-caixa_postal { background: rgba(0, 0, 0, .04); color: var(--texto-2); }

/* ================= painel de campanhas (contadores, progresso, detalhe) ================= */
.contadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; }
.contador {
  all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  padding: 14px 18px; border-radius: var(--r-lg); background: var(--cartao);
  border: 1px solid var(--borda); box-shadow: var(--sombra-cartao); border-bottom: 3px solid var(--cor, var(--borda));
}
.contador b { font-family: var(--fonte-titulo); font-size: 34px; font-weight: 800; color: var(--cor); line-height: 1; }
.contador span { font-size: 13px; font-weight: 600; color: var(--texto-2); line-height: 1.2; }
.contador.ativo { background: #fff; box-shadow: var(--sombra-cartao), 0 0 0 2px var(--cor); }
.contador:hover { transform: translateY(-1px); }
.hoje-linha { font-size: 13px; color: var(--texto-2); margin: 6px 2px 16px; }
.hoje-linha b { color: var(--texto-1); }
.busca-pequena { max-width: 260px; padding: 7px 12px; font-size: 13px; }

.status-pilula { display: inline-block; min-width: 108px; text-align: center; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.status-pilula.ativa { background: rgba(16, 185, 129, .14); color: var(--verde); }
.status-pilula.pausada { background: var(--input); color: var(--texto-2); }
.status-pilula.concluida { background: rgba(0, 80, 240, .1); color: var(--azul); }
.alerta-atencao { color: #e05252; font-size: 17px; cursor: help; position: relative; }
.detalhe-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 24px; padding-top: 14px; font-size: 13px; }
.detalhe-grade small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #777; margin-bottom: 2px; }
.detalhe-grade .problemas { grid-column: 1 / -1; color: #c0392b; }

.progresso-seg { position: relative; min-width: 190px; }
.progresso-seg .barra { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: #e7eaf0; }
.progresso-seg .barra span { display: block; height: 100%; }
.seg-finalizados { background: #34c38f; }
.seg-esgotados { background: #f06a6a; }
.seg-bloqueados { background: #2f3b52; }
.seg-pendentes { background: #c7cdd8; }
.progresso-seg small { font-size: 11.5px; color: var(--texto-2); }
@keyframes aparecer-dica { from { opacity: 0; } }

.menu-acoes { position: relative; }
.cartao-campanhas { overflow: visible; }
.menu-acoes .lista-menu {
  position: absolute; right: 0; top: 32px; z-index: 40; min-width: 168px; padding: 4px;
  background: #fff; border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
  display: none;
}
.menu-acoes.aberto .lista-menu { display: block; }
.menu-acoes.para-cima .lista-menu { top: auto; bottom: 32px; }
.lista-menu button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 9px; border-radius: 7px; font-size: 12.5px; white-space: nowrap; }
.lista-menu button:hover { background: var(--input); }
.lista-menu button i { width: 13px; font-size: 11.5px; text-align: center; color: var(--azul); }
.lista-menu button.perigo, .lista-menu button.perigo i { color: var(--vermelho); }

.meta-linha { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 16px; align-items: end; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--borda); }
.meta-linha > div:first-child b { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.meta-linha > div:first-child b i { color: var(--azul); }
.meta-linha small { color: var(--texto-2); font-size: 12.5px; }
.meta-progresso { font-size: 13px; color: var(--texto-2); padding-bottom: 10px; }
.meta-progresso .barra { height: 8px; border-radius: 99px; background: var(--input); overflow: hidden; margin-top: 4px; }
.meta-progresso .barra span { display: block; height: 100%; background: var(--g-verde); }

.historico { margin-top: 14px; }
.historico summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--texto-2); padding: 6px 0; }
.historico summary i { color: var(--azul); margin-right: 6px; }
.filtro-linha.duplo { display: grid; grid-template-columns: 220px 1fr; gap: 10px; max-width: 620px; }
.select-mini { width: auto; padding: 5px 8px; font-size: 12.5px; }
.telefones { display: flex; flex-wrap: wrap; gap: 4px; }
.tel { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--input); border: 1px solid var(--borda); white-space: nowrap; }
.tel.invalido, .tel.bloqueado { text-decoration: line-through; color: var(--vermelho); }
.tel.errado { text-decoration: line-through; color: #b45309; }
.tel b { font-weight: 700; color: var(--azul); }

.form-modal { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.form-modal h3 { font-size: 14px; margin-top: 4px; }
.caixas { display: flex; flex-wrap: wrap; gap: 8px; }
.caixas label { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--borda); background: var(--input); font-size: 13px; cursor: pointer; }
.caixas label:has(input:checked) { background: rgba(0, 80, 240, .07); border-color: rgba(0, 80, 240, .4); color: var(--azul); }
.atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.previa { padding: 12px 16px; border-radius: 8px; background: rgba(0, 80, 240, .06); color: var(--azul); font-weight: 700; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.massa-usuarios { display: flex; flex-direction: column; gap: 16px; }
.massa-usuarios .modal-cab { padding-right: 40px; }
.massa-explicacao { display: grid; grid-template-columns: minmax(260px, 1.25fr) minmax(260px, 1fr); gap: 14px; margin-top: 16px; }
.massa-bloco { min-width: 0; border: 1px solid var(--borda); border-radius: 8px; padding: 14px 16px; background: #fff; }
.massa-bloco h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.massa-bloco h3 i { color: var(--azul); }
.massa-bloco p, .massa-bloco li { color: var(--texto-2); font-size: 12.5px; line-height: 1.55; }
.massa-bloco ul { margin: 7px 0 0 18px; }
.massa-download-modelo { display: inline-flex; margin-top: 10px; }
.massa-arquivo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 16px; }
.massa-arquivo .campo { min-width: 0; }
.massa-mapeamento { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 10px 14px; }
.massa-mapeamento .campo { margin: 0; }
.massa-mapeamento .campo small { min-height: 16px; }
.massa-required { color: var(--vermelho); font-weight: 700; }
.massa-status { border-radius: 8px; border: 1px solid var(--borda); background: var(--fundo, #f6f8fb); padding: 12px 14px; }
.massa-status-topo { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; }
.massa-status-topo i { color: var(--azul); }
.massa-status p { margin-top: 5px; color: var(--texto-2); font-size: 12px; }
.massa-progresso { height: 8px; margin-top: 10px; border-radius: 99px; overflow: hidden; background: #e6ebf2; }
.massa-progresso span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--g-primario); transition: width .25s ease; }
.massa-tabela-rolagem { max-height: 300px; overflow: auto; border: 1px solid var(--borda); border-radius: 7px; }
.massa-tabela { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.massa-tabela th, .massa-tabela td { max-width: 240px; padding: 8px 10px; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.massa-tabela th { position: sticky; top: 0; z-index: 1; color: var(--texto-2); background: #f5f7fb; font-weight: 700; white-space: nowrap; }
.massa-tabela tr:last-child td { border-bottom: 0; }
.massa-tabela td.massa-senha { color: var(--texto-3); letter-spacing: .14em; }
.massa-aviso { border-radius: 7px; padding: 10px 12px; color: #8a4b08; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .24); font-size: 12.5px; line-height: 1.5; }
.massa-erros { max-height: 280px; overflow: auto; border: 1px solid rgba(220, 38, 38, .2); border-radius: 7px; }
.massa-erros .massa-tabela th { background: #fff5f5; }
.massa-erros tr:focus { outline: 2px solid var(--azul); outline-offset: -2px; }
.massa-cabecalho-secao { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.massa-cabecalho-secao h3 { margin: 0; font-size: 14px; }
.massa-cabecalho-secao .dica { text-align: right; }
.massa-pendente { color: var(--texto-3); font-size: 12.5px; padding: 12px 0; }
.ddds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ddd { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: rgba(220, 38, 38, .07); border: 1px solid rgba(220, 38, 38, .25); font-size: 13px; }
.ddd b { color: var(--vermelho); }
.ddd button { all: unset; cursor: pointer; color: var(--texto-3); }
.ddd button:hover { color: var(--vermelho); }

/* ================= ao vivo ================= */
.ponto-vivo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: vivo 1.6s infinite; vertical-align: middle; }
.ponto-vivo.grande { width: 14px; height: 14px; margin-right: 6px; }
@keyframes vivo { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.nav-grupo .selo-vivo { margin-left: auto; }
.nav-grupo .selo-vivo + .nav-seta { margin-left: 8px; }
/* ao vivo do discador: supervisão dos atendentes */
#aba-aovivo-discador { max-width: none; }  /* tabela larga de supervisão: usa a tela toda */
#aba-aovivo-discador .pagina-topo { align-items: center; }  /* só o título (sem subtítulo): os botões ficam no meio dele */
.supd-atualizado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: rgba(5, 150, 105, .08);
  font: 600 12px var(--fonte); letter-spacing: 0; color: #047857; white-space: nowrap; }
.supd-atualizado i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.supd-atualizado.parado { background: rgba(247, 151, 30, .12); color: #b45309; }
.supd-topo-acoes { align-items: center; flex-wrap: nowrap; }
.supd-metricas { font-size: 12.5px; font-weight: 600; color: var(--texto-3); white-space: nowrap; }
/* os números do topo: um cartão por número, com a cor em cima e o ícone no canto; clicar filtra a tabela */
.supd-kpis { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr) 1.25fr 1.4fr; gap: 12px; margin-bottom: 14px; }
.supd-kpi { position: relative; overflow: hidden; min-width: 0; padding: 14px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--borda);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05); transition: box-shadow .15s, border-color .15s; }
.supd-kpi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.supd-kpi[data-status-supd] { cursor: pointer; }
.supd-kpi[data-status-supd]:hover { box-shadow: 0 6px 18px rgba(16, 24, 40, .08); }
.supd-kpi.ativo { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.supd-kpi .ic { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  font-size: 14px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.supd-kpi small { display: block; padding-right: 40px; font-size: 12.5px; font-weight: 500; color: var(--texto-2); }
.supd-kpi > b { display: block; margin-top: 4px; font-size: 26px; font-weight: 650; letter-spacing: -.6px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.supd-kpi em { display: block; font-style: normal; font-size: 12px; color: var(--texto-3); }
.supd-kpi em b { color: var(--texto-2); }
.supd-kpi.alerta { border-color: #fedf89; background: linear-gradient(180deg, #fffaeb 0%, #fff 70%); }
.supd-kpi.alerta > b { color: #b54708; }
.supd-estados { display: flex; gap: 1px; height: 6px; margin: 10px 0 6px; border-radius: 99px; overflow: hidden; background: #f0f2f5; }
.supd-estados i { background: #94a3b8; }
.supd-estados i.disponivel { background: #10b981; } .supd-estados i.em_ligacao { background: #f97316; } .supd-estados i.qualificando { background: #0050f0; }
.supd-estados i.manual { background: #00a8f0; } .supd-estados i.pausa { background: #0050f0; }
.supd-duplo { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.supd-duplo > div + div { padding-left: 12px; border-left: 1px solid var(--borda); }
.supd-duplo em { font-size: 11.5px; }
.supd-duplo > div > b { display: block; font-size: 22px; font-weight: 650; letter-spacing: -.5px; line-height: 1.25; font-variant-numeric: tabular-nums; }
@media (max-width: 1380px) {  /* tela menor: 3 cartões por linha e os botões do topo embaixo do título */
  .supd-kpis { grid-template-columns: repeat(3, 1fr); }
  #aba-aovivo-discador .pagina-topo { flex-wrap: wrap; align-items: center; }
}
@media (max-width: 700px) { .supd-kpis { grid-template-columns: 1fr 1fr; } }
/* as campanhas rodando */
.supd-camps { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.supd-camp { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-radius: 8px; background: #fff; border: 1px solid var(--borda);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05); font-size: 12.5px; }
.supd-camp::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .16); }
.supd-camp:not(.ativa)::before { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .16); }
.supd-camp > div b { display: block; font-size: 13.5px; }
.supd-camp > div small { color: var(--texto-2); }
.supd-camp span { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--texto-2); }
.supd-camp span.alerta { color: var(--vermelho); }
/* URA ao vivo: os mesmos cartões e tabelas do discador ao vivo */
.supd-kpis.vivo-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1380px) { .supd-kpis.vivo-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .supd-kpis.vivo-kpis { grid-template-columns: 1fr 1fr; } }
.vivo-filtro { width: auto; min-width: 0; max-width: 260px; padding: 8px 12px; font-size: 13px; }
.supd-camp span.sim { color: #b45309; }
.vivo-painel-cab { padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.vivo-ritmo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px;
  background: #fffaeb; color: #b54708; font-size: 12px; font-weight: 600; white-space: nowrap; }
.vivo-ver { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--azul); text-decoration: none; }
.vivo-ver:hover { text-decoration: underline; }
.supd-pill.vivo-ura { color: #0e7490; background: #ecfeff; border-color: #a5f0fc; }
.supd-pill.vivo-respondeu { color: #003fbf; background: #eff8ff; border-color: #b2ddff; }
.supd-pill.vivo-fila { color: #c4320a; background: #fff6ed; border-color: #f9dbaf; }
.supd-pill.vivo-atendente { color: #0050f0; background: #eaf2ff; border-color: #b2ddff; }
.supd-avatar.vivo-ura::after { background: #00a8f0; } .supd-avatar.vivo-respondeu::after { background: #0050f0; }
.supd-avatar.vivo-fila::after { background: #f97316; } .supd-avatar.vivo-atendente::after { background: #0050f0; }
.vivo-passos { display: flex; gap: 3px; width: 96px; margin-top: 6px; }
.vivo-passos i { flex: 1; height: 4px; border-radius: 99px; background: #eaecf0; }
.vivo-passos i.feito { background: #12b76a; }
.vivo-tabela td.vivo-agora { white-space: normal; min-width: 170px; max-width: 280px; color: var(--texto-2); }
.vivo-tabela .acao-cliente { white-space: nowrap; }
.vivo-nada-ainda { color: var(--texto-3); }
.supd-acao.vivo-desligar { color: var(--vermelho); }
.supd-acao.vivo-desligar:hover { border-color: rgba(220, 38, 38, .4); color: var(--vermelho); background: #fef3f2; }
.vivo-tabela tbody tr:only-child td.vazio-linha { padding: 34px; }
.vivo-grade-baixo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 1000px) { .vivo-grade-baixo { grid-template-columns: 1fr; } }
.vivo-lista { display: flex; flex-direction: column; max-height: 330px; overflow-y: auto; }
.vivo-item { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #f0f2f5; font-size: 13px; }
.vivo-item:last-child { border-bottom: 0; }
.vivo-item.clicavel { cursor: pointer; } .vivo-item.clicavel:hover { background: #fafbff; }
.vivo-item-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 13px; }
.vivo-item-ic.chamando { background: #fff6ed; color: #f97316; }
.vivo-item-ic.sim { background: #fffaeb; color: #f59e0b; }
.vivo-item-txt { flex: 1; min-width: 0; }
.vivo-item-txt b { display: block; font-weight: 600; }
.vivo-item-txt small { display: block; color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vivo-hora { font-size: 12px; font-weight: 600; color: #b45309; }
.vivo-nada { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 26px 18px; color: var(--texto-3); font-size: 13px; }
.supd-cartao.vivo-falas { width: 500px; }
.vivo-falas header .supd-tempo { font-size: 13px; color: var(--texto-2); }
.vivo-falas-agora { font-size: 13px; color: var(--texto-2); }
.vivo-etapas { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 5px; padding: 0; margin: 0; font-size: 12px; color: var(--texto-3); }
.vivo-etapas li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vivo-etapas li + li::before { content: ''; width: 12px; height: 2px; border-radius: 2px; background: #eaecf0; }
.vivo-etapas li i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 8px; background: #f2f4f7; color: #d0d5dd; }
.vivo-etapas li.feito { color: var(--texto-2); }
.vivo-etapas li.feito i { background: #12b76a; color: #fff; }
.vivo-etapas li.feito + li::before { background: #12b76a; }
.vivo-etapas li.agora { color: var(--texto-1); font-weight: 600; }
.vivo-etapas li.agora i { background: #ecfdf3; color: #12b76a; box-shadow: 0 0 0 2px #abefc6; }
.vivo-falas .falas-vivo { max-height: 260px; overflow-y: auto; }
/* a tabela dos atendentes */
.supd-painel-cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; }
.supd-painel-cab b { font-size: 15px; font-weight: 600; }
.supd-painel-cab em { font-style: normal; font-size: 12.5px; color: var(--texto-3); }
.supd-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px 14px; border-bottom: 1px solid var(--borda); }
.supd-barra .busca-icone { min-width: 0; flex: 0 1 130px; }
.supd-barra select { width: auto; min-width: 0; max-width: 180px; padding: 8px 10px; font-size: 12.5px; }  /* nome muito comprido aparece inteiro ao abrir */
.supd-filtro { margin-left: auto; }
.supd-filtro .chip { padding: 5px 9px; font-size: 12.5px; }
.supd-filtro .chip em { font-style: normal; margin-left: 5px; font-weight: 600; color: var(--texto-3); }
.supd-filtro .chip.ativo em { color: var(--azul); }
.supd-tabela th { padding: 10px 6px; font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--texto-3); background: #fcfcfd; white-space: nowrap; }
.supd-tabela td { padding: 10px 6px; font-size: 13px; white-space: nowrap; background: #fff; }
.supd-tabela th:first-child, .supd-tabela td:first-child { padding-left: 18px; }
.supd-tabela th.num, .supd-tabela td.num { text-align: right; }
.supd-tabela td small { display: block; font-size: 11.5px; font-weight: 400; color: var(--texto-3); }
.supd-tabela .col-sel { width: 34px; padding-right: 0; }
.supd-tabela input[type=checkbox], #supd-todos { width: 16px; height: 16px; accent-color: var(--azul); cursor: pointer; }
.supd-tabela tbody tr:hover td { background: #fafbff; }
.supd-tabela tr.aberto td { background: #f2f6ff; }
.supd-tabela tr.ouvindo td { background: #f0f7ff; }
.supd-quem { display: flex; align-items: center; gap: 10px; }
.supd-quem b { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.supd-avatar { position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12.5px var(--fonte); color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); }
.supd-avatar::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: #94a3b8; }
.supd-avatar.disponivel::after { background: #10b981; } .supd-avatar.em_ligacao::after { background: #f97316; }
.supd-avatar.qualificando::after { background: #0050f0; } .supd-avatar.manual::after { background: #00a8f0; } .supd-avatar.pausa::after { background: #0050f0; }
.supd-tempo { font-variant-numeric: tabular-nums; font-weight: 700; }
.supd-sucesso { color: var(--verde); }
.supd-tabela td.supd-longa { color: var(--vermelho); font-weight: 700; }
.supd-tabela td small.supd-detalhe { max-width: 130px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
.supd-tabela td small.supd-detalhe.alerta { color: #b42318; font-weight: 600; }
.supd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; border: 1px solid; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.supd-pill i { font-size: 11px; }
.supd-pill.disponivel { color: #047857; background: #ecfdf3; border-color: #abefc6; }
.supd-pill.em_ligacao { color: #c4320a; background: #fff6ed; border-color: #f9dbaf; }
.supd-pill.qualificando { color: #003fbf; background: #eff8ff; border-color: #b2ddff; }
.supd-pill.manual { color: #0050f0; background: #eaf2ff; border-color: #b2ddff; }
.supd-pill.pausa { color: #0050f0; background: #eaf2ff; border-color: #b2ddff; }
.supd-pill.off { color: #475467; background: #f2f4f7; border-color: #e4e7ec; }
.supd-pill.estourou { color: #b42318; background: #fef3f2; border-color: #fecdca; animation: piscar-estouro 1.6s ease-in-out infinite; }
@keyframes piscar-estouro { 50% { opacity: .65; } }
/* as ações de cada atendente: ouvir e o menu com o resto; a coluna fica parada na direita */
.supd-tabela .col-acoes { position: sticky; right: 0; text-align: right; padding-right: 14px; }
.supd-tabela th.col-acoes { z-index: 2; }
.tabela-rolagem.rolando .supd-tabela .col-acoes { box-shadow: -10px 0 10px -10px rgba(16, 24, 40, .25); }
.supd-acoes-linha { display: inline-grid; grid-template-columns: repeat(2, 30px); gap: 4px; vertical-align: middle; }
.supd-acao { all: unset; box-sizing: border-box; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--borda); background: #fff; color: var(--texto-2); font-size: 12.5px; transition: background .15s, color .15s, border-color .15s; }
.supd-acao:hover:not(:disabled) { border-color: rgba(0, 80, 240, .4); color: var(--azul); }
.supd-acao:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.supd-acao:disabled { cursor: default; color: #d0d5dd; background: #f9fafb; }
.supd-acao.espera { color: var(--texto-3); }
.supd-acao.em-ligacao { color: var(--azul); border-color: rgba(0, 80, 240, .3); }
.supd-acao.ouvindo, .supd-acao.ouvindo:hover:not(:disabled) { background: var(--azul); border-color: var(--azul); color: #fff;
  box-shadow: 0 0 0 3px rgba(0, 80, 240, .18); animation: pulsar-ouvir 1.6s infinite; }
@keyframes pulsar-ouvir { 50% { box-shadow: 0 0 0 6px rgba(0, 80, 240, .06); } }
.supd-acao.aberto { background: #f2f4f7; color: var(--texto-1); }
.supd-menu { position: fixed; z-index: 46; width: 300px; padding: 6px; border-radius: 8px; background: #fff; border: 1px solid var(--borda);
  box-shadow: 0 16px 34px rgba(16, 24, 40, .16); }
.supd-menu button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--texto-1); }
.supd-menu button i { width: 16px; text-align: center; color: var(--texto-2); }
.supd-menu button span { white-space: nowrap; }
.supd-menu button small { margin-left: auto; font-size: 11px; color: var(--texto-3); white-space: nowrap; }
.supd-menu button:hover:not(:disabled), .supd-menu button:focus-visible { background: #f2f4f7; }
.supd-menu button:disabled { cursor: default; color: var(--texto-3); }
.supd-menu button:disabled i { color: #d0d5dd; }
.supd-menu button.perigo, .supd-menu button.perigo i { color: var(--vermelho); }
.supd-menu button.perigo:disabled, .supd-menu button.perigo:disabled i { color: #fda29b; }
.supd-menu hr { border: 0; border-top: 1px solid #f0f2f5; margin: 4px 0; }
.supd-pe { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 10px 18px;
  border-top: 1px solid var(--borda); background: #fcfcfd; font-size: 12px; color: var(--texto-3); }
.supd-legenda { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.supd-legenda i { margin-right: 4px; }
.ponto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: #94a3b8; }
.ponto.disponivel { background: #10b981; } .ponto.em_ligacao { background: #f97316; } .ponto.qualificando { background: #0050f0; }
.ponto.manual { background: #00a8f0; } .ponto.pausa { background: #0050f0; }
.supd-limite { font-size: 11.5px; color: var(--texto-3); margin-left: 4px; }
.supd-cartao { position: fixed; z-index: 45; width: 440px; max-width: calc(100vw - 32px); padding: 18px 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: 12px; }
.supd-cartao header { display: flex; align-items: center; gap: 12px; }
.supd-cartao header > div { flex: 1; min-width: 0; }
.supd-cartao header b { display: block; font-size: 16px; }
.supd-cartao header small { color: var(--texto-2); font-size: 12.5px; }
.supd-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.supd-fechar { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--input); color: var(--texto-2); }
.supd-dados { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--input); font-size: 13px; }
.supd-dados > div { display: flex; gap: 10px; align-items: center; }
.supd-dados dt { width: 120px; flex-shrink: 0; font-weight: 700; color: var(--texto-2); }
.supd-cartao h5 { font-size: 13px; display: flex; align-items: center; gap: 7px; }
.supd-cartao h5 i { color: var(--azul); }
.supd-cartao ul { list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; }
.supd-cartao li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.supd-cartao li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supd-cartao li em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: rgba(148, 163, 184, .18); color: #475569; }
.supd-cartao li em.ativa { background: rgba(16, 185, 129, .12); color: #047857; }
.supd-cartao-nums { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 10px; border-top: 1px solid var(--borda); font-size: 12.5px; color: var(--texto-2); }
.supd-cartao-nums b { color: var(--texto-1); }
/* barra da escuta: azul da marca, para destacar da página clara sem ser preta */
.escuta-barra { position: fixed; z-index: 60; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(1080px, calc(100vw - 32px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 14px 12px 16px; border-radius: 8px;
  background: linear-gradient(135deg, #0050f0 0%, #00a8f0 100%); color: #fff; box-shadow: 0 18px 44px rgba(0, 71, 224, .35); }
.escuta-barra.oculto { display: none; }
@media (min-width: 861px) {  /* com o menu lateral (270 px): centraliza na área da página, não na janela */
  .escuta-barra { left: calc(50% + 135px); width: min(1080px, calc(100vw - 270px - 32px)); }
}
body:has(#escuta-barra:not(.oculto)) .conteudo { padding-bottom: 150px; }  /* a barra não cobre o fim da tabela */
.escuta-icone { position: relative; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255, 255, 255, .2); }
.escuta-icone em { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: #ef4444;
  border: 2px solid #0050f0; animation: vivo 1.6s infinite; }
.escuta-txt { flex: 1; min-width: 0; }
.escuta-txt b { display: block; font-size: 14px; }
.escuta-txt small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escuta-nivel { width: 70px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; flex-shrink: 0; }
.escuta-nivel span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4ade80, #bef264); transition: width .1s linear; }
.escuta-vol { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .85); flex-shrink: 0; }
.escuta-vol input { width: 90px; padding: 0; border: 0; background: none; accent-color: #fff; }
.escuta-barra .btn { flex-shrink: 0; }
.escuta-modos { display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: rgba(255, 255, 255, .15); flex-shrink: 0; }
.escuta-modos.oculto { display: none; }
.escuta-modos button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 0; border-radius: 8px;
  background: transparent; color: rgba(255, 255, 255, .9); font: 600 12.5px var(--fonte); cursor: pointer; white-space: nowrap; }
.escuta-modos button:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.escuta-modos button.ativo { background: #fff; color: #0050f0; }
.escuta-barra.falando-atendente .escuta-modos button.ativo { background: #f59e0b; color: #1f1300; }
.escuta-barra.falando-todos .escuta-modos button.ativo { background: #ef4444; color: #fff; }
.escuta-barra.falando-atendente { box-shadow: 0 0 0 3px #f59e0b, 0 18px 44px rgba(0, 71, 224, .35); }
.escuta-barra.falando-todos { box-shadow: 0 0 0 3px #ef4444, 0 18px 44px rgba(0, 71, 224, .35); }
/* falando: segunda linha com o microfone em uso, o medidor da sua voz e o aviso quando não chega som */
.escuta-mic { display: none; flex-basis: 100%; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 12.5px; color: rgba(255, 255, 255, .88); min-width: 0; }
.escuta-barra.falando-atendente .escuta-mic, .escuta-barra.falando-todos .escuta-mic { display: flex; }
.escuta-mic > i { color: rgba(255, 255, 255, .85); }
.escuta-mic-nivel { width: 90px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; flex-shrink: 0; }
.escuta-mic-nivel span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4ade80, #bef264); transition: width .1s linear; }
.escuta-mic select { max-width: 300px; min-width: 0; padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .14); color: #fff; font: inherit; }
.escuta-mic select option { color: var(--texto-1); background: #fff; }
.escuta-mic small { flex: 1; min-width: 0; }
.escuta-mic small.alerta { color: #fde68a; font-weight: 600; }
.escuta-barra.falando-atendente .escuta-icone { background: linear-gradient(135deg, #d97706, #f59e0b); }
.escuta-barra.falando-todos .escuta-icone { background: linear-gradient(135deg, #dc2626, #ef4444); }
.selo-vivo { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.vivo-contadores { grid-template-columns: repeat(6, 1fr); margin-bottom: 18px; }
.vivo-contadores .contador { cursor: default; }
.vivo-contadores .contador:hover { transform: none; }
.vivo-grade { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
.vivo-grade .disc-chamadas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); min-height: 180px; }
.chamada-viva .tempo-vivo { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; color: var(--verde); min-width: 58px; text-align: right; }
.chamada-viva .campanha-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: rgba(0, 80, 240, .08); color: var(--azul); margin-top: 2px; }
.vivo-chamando { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 180px; }
.vivo-chamando .vazio { text-align: center; color: var(--texto-2); padding: 26px 10px; font-size: 13px; }
.vivo-chamando .vazio i { display: block; font-size: 22px; color: var(--texto-3); margin-bottom: 8px; }
.linha-chamando { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--borda); }
.linha-chamando .icone { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(247, 151, 30, .14); color: #d97706; flex-shrink: 0; }
.linha-chamando .icone i { animation: tocar 1s infinite; }
@keyframes tocar { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.linha-chamando div { flex: 1; min-width: 0; }
.linha-chamando b { display: block; font-size: 13.5px; }
.linha-chamando small { color: var(--texto-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.linha-chamando .tempo-vivo { font-weight: 700; font-size: 13px; color: #b45309; }
.chips.sem-margem { margin: 0; }
.tabela-vivo { max-height: 560px; }
.tabela-vivo tr.novo td { animation: entrou 2.5s ease; }
@keyframes entrou { from { background: rgba(0, 80, 240, .12); } to { background: transparent; } }
.aconteceu { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.aconteceu.atendida { background: rgba(16, 185, 129, .12); color: var(--verde); }
.aconteceu.sem_contato { background: rgba(247, 151, 30, .13); color: #b45309; }
.aconteceu.falha { background: rgba(220, 38, 38, .09); color: var(--vermelho); }
.aconteceu i { font-size: 11px; }

/* ================= modal e aviso ================= */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(8px); }
.modal-caixa { position: relative; width: 100%; max-width: 780px; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 8px; padding: 28px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25); }
.modal.modal-massa-usuarios { padding: 12px; }
.modal.modal-massa-usuarios .modal-caixa { width: min(1220px, 100%); max-width: none; max-height: calc(100dvh - 24px); padding: 24px; }
.modal-caixa .transcricao { max-height: none; padding: 16px 0 0; }
.modal-cab { padding-bottom: 16px; border-bottom: 1px solid var(--borda); }
.modal-cab h2 { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.modal-cab .dica { margin: 4px 0 10px; }
.modal-fechar { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--input); color: var(--texto-2); cursor: pointer; font-size: 15px; }
.modal-fechar:hover { background: var(--hover); color: var(--texto-1); }
.aviso {
  position: fixed; right: 26px; bottom: 26px; z-index: 60; max-width: 440px;
  padding: 13px 18px; border-radius: var(--r-md);
  background: #1c2333; color: #fff; font-weight: 500;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s;
}
.aviso.mostrar { opacity: 1; transform: none; }
.aviso.erro { background: var(--g-vermelho); }

/* ================= URA reversa: fluxos ================= */
.so-ia { display: contents; }
#transf-campos .interruptor { align-items: flex-start; align-self: center; padding-bottom: 0; }
#transf-campos .interruptor b { display: block; font-size: 13.5px; }
#transf-campos .interruptor small { display: block; font-weight: 400; color: var(--texto-2); font-size: 12px; }
.so-ia.oculto { display: none !important; }
.g-tres { grid-column: span 3; }
.btn-icone {
  width: 32px; height: 32px; border-radius: 8px; display: inline-grid; place-items: center; flex-shrink: 0;
  background: #fff; border: 1px solid var(--borda); color: var(--texto-2); cursor: pointer; transition: .15s;
}
.btn-icone:hover:not(:disabled) { border-color: rgba(0, 80, 240, .35); color: var(--azul); }
.btn-icone.perigo:hover:not(:disabled) { border-color: rgba(220, 38, 38, .35); color: var(--vermelho); }
.btn-icone:disabled { opacity: .35; cursor: default; }
.etapas-ura { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.etapa-ura {
  display: flex; flex-direction: column; gap: 16px; padding: 16px 18px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--borda); box-shadow: inset 3px 0 0 var(--azul);
}
.etapa-ura .etapa-topo { margin-bottom: 0; }
.etapa-ura .numero { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; box-shadow: none; }
.etapa-ura.tipo-menu { box-shadow: inset 3px 0 0 #0050f0; }
.etapa-ura.tipo-menu .numero { background: linear-gradient(135deg, #0050f0, #00a8f0); }
.etapa-ura.tipo-coletar { box-shadow: inset 3px 0 0 #0891b2; }
.etapa-ura.tipo-coletar .numero { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.etapa-ura.tipo-encerrar { box-shadow: inset 3px 0 0 #9aa6bb; }
.etapa-ura.tipo-encerrar .numero { background: #9aa6bb; }
.fluxo-rodape { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.teste-celular {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 14px 16px; border-radius: var(--r-md);
  background: rgba(16, 185, 129, .05); border: 1px solid rgba(16, 185, 129, .22);
}
.teste-celular .campo { flex: 1 1 200px; }
.teste-celular input { background: #fff; }
.teste-celular small { flex-basis: 100%; color: var(--texto-2); font-size: 12px; }
.audios-gravados { padding: 14px 16px; border-radius: var(--r-md); background: var(--input); }
.audios-gravados summary { cursor: pointer; font-weight: 700; font-size: 13.5px; }
.audios-gravados summary i { color: var(--azul); margin-right: 4px; }
.audios-gravados summary small { font-weight: 400; color: var(--texto-2); }
.audios-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
.audios-gravados .audio-item { background: #fff; }
.etapa-nome { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.etapa-nome input { font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px; background: transparent; border-color: transparent; padding: 4px 8px; margin-left: -8px; }
.etapa-nome input:hover { border-color: var(--borda); }
.tipo-etapa { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--azul); }
.tipo-menu .tipo-etapa { color: #0050f0; }
.tipo-coletar .tipo-etapa { color: #0891b2; }
.tipo-encerrar .tipo-etapa { color: var(--texto-2); }
.fala-etapa { display: grid; grid-template-columns: 1fr 260px; gap: 16px 18px; align-items: start; }
.fala-etapa .campo .btn { align-self: flex-start; }
.opcoes-ura { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-md); background: rgba(0, 80, 240, .04); border: 1px solid rgba(0, 80, 240, .14); }
.opcoes-ura > .btn { align-self: flex-start; }
.opcoes-cab, .opcao-ura { display: grid; grid-template-columns: 92px minmax(180px, 1fr) minmax(260px, 1.4fr) 32px; gap: 10px; align-items: start; }
.opcoes-cab span { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #666; }
.opcoes-cab em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--texto-3); }
.opcao-ura input, .opcao-ura select, .acao-ura input, .acao-ura select { background: #fff; padding: 8px 11px; font-size: 13.5px; }
.tecla-sel { font-family: var(--fonte-titulo); font-weight: 700; text-align: center; }
.acao-ura { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acao-ura > select:first-child { flex: 1 1 220px; }
.acao-ura > select:not(:first-child), .acao-ura > input:not(.acao-fala) { flex: 1 1 150px; width: auto; }
.fala-acao { flex: 1 1 100%; display: flex; gap: 6px; align-items: center; }
.fala-acao input { flex: 1; min-width: 0; }
.fala-acao select { flex: 0 0 170px; width: 170px; }
.fala-acao .btn-icone { width: 34px; height: 34px; }
label.btn-icone { cursor: pointer; }
.fala-acao.obrigatoria input { border-color: rgba(0, 80, 240, .35); background: #fff; }
.btn-link {
  flex: 1 1 100%; justify-self: start; text-align: left; background: none; border: 0; padding: 2px 0; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--azul);
}
.btn-link:hover { text-decoration: underline; }
.acao-ura > input.destino-atendente { flex: 1 1 200px; border-color: rgba(16, 185, 129, .45); }
.acao-ura > input.falha-atendente { flex: 1 1 100%; }
.acao-ura > .destino-campanha {
  flex: 1 1 260px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px;
  background: rgba(16, 185, 129, .08); border: 1px dashed rgba(16, 185, 129, .5); color: var(--texto-2);
  font-size: 13px; text-decoration: none; line-height: 1.35;
}
.acao-ura > .destino-campanha:hover { background: rgba(16, 185, 129, .14); }
.acao-ura > .destino-campanha > i { color: #059669; }
.acao-ura > .destino-campanha b { color: var(--texto-1); }
.acao-ura > .destino-campanha b.alerta-texto { color: #dc2626; }
#secao-atendimento.na-ura .ritmo-discador, #secao-atendimento.na-ura #disc-teste { display: none; }
#secao-atendimento { scroll-margin-top: 100px; }  /* o "Vai para o atendente" do fluxo rola até aqui sem ficar sob o topo */
#secao-atendimento.na-ura .acesso-campanha { margin-bottom: 18px; }
.acao-ura .mini { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); }
.acao-ura .mini input { width: 80px; }
.acao-ura small.dica { flex: 1 1 100%; font-size: 12px; }
.linha-acao { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; }
.linha-acao > .rotulo { padding-top: 10px; }
.adicionar-etapa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--r-lg); border: 1.5px dashed rgba(0, 80, 240, .25); background: rgba(255, 255, 255, .5); }
.adicionar-etapa .rotulo { margin-right: 6px; }
.lista-audios { display: flex; flex-direction: column; gap: 8px; }
.audio-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--input); }
.audio-item > i { color: var(--azul); }
.audio-item b { flex: 1; font-weight: 600; }
.audio-item small { color: var(--texto-2); }

/* teste no navegador */
.ura-teste { display: grid; grid-template-columns: 290px 1fr; gap: 18px; margin-top: 16px; }
.ura-fone { display: flex; flex-direction: column; gap: 12px; }
.ura-tela { padding: 14px 16px; border-radius: var(--r-md); background: #0f172a; color: #e2e8f0; min-height: 70px; }
.ura-tela small { display: block; font-size: 11px; color: #94a3b8; letter-spacing: .5px; }
.ura-tela b { font-family: var(--fonte-titulo); font-weight: 600; font-size: 15px; }
.ura-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ura-teclado button {
  height: 50px; border-radius: 8px; border: 1px solid var(--borda); background: #fff; cursor: pointer;
  font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; transition: .12s;
}
.ura-teclado button:hover { border-color: rgba(0, 80, 240, .4); color: var(--azul); }
.ura-teclado button:active { transform: scale(.95); background: rgba(0, 80, 240, .06); }
.ura-fone .digitar { padding: 0; border: 0; }
.ura-log { min-height: 380px; max-height: 60vh; overflow-y: auto; padding: 14px; border-radius: var(--r-md); background: var(--input); display: flex; flex-direction: column; gap: 8px; }

/* ao vivo e resultados */
.etapa-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; background: rgba(0, 80, 240, .1); color: #0050f0; }
.etapa-tag.atendente { background: rgba(16, 185, 129, .12); color: var(--verde); }
.chamada-viva .etapa-tag { white-space: nowrap; margin: 4px 0 0; }
.chamada-viva .falas p.ura b { color: #0050f0; }
.chamada-viva .falas p.sistema { font-size: 12px; color: var(--texto-2); font-style: italic; }
.caminho-ura { margin: 6px 0 12px 20px; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.r-entregue { background: rgba(0, 168, 240, .08); color: #0369a1; border-color: rgba(0, 168, 240, .22); }
.r-desligou { background: rgba(0, 0, 0, .04); color: var(--texto-2); }
.r-sem_conversa { background: rgba(0, 0, 0, .04); color: var(--texto-2); }

/* ================= relatório ================= */
.sem-margem { margin: 0; }
/* filtros dos relatórios: período em cima (seletor segmentado), campos alinhados em grade embaixo */
.rel-filtros { padding: 16px 20px 18px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 14px; }
.filtros-topo { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.periodo-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 8px; background: var(--input); border: 1px solid var(--borda);
  max-width: 100%; overflow-x: auto; }
.periodo-seg .chip { all: unset; cursor: pointer; white-space: nowrap; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--texto-2); transition: background .15s, color .15s; }
.periodo-seg .chip:hover { color: var(--texto-1); }
.periodo-seg .chip i { margin-right: 5px; font-size: 12px; }
.periodo-seg .chip.ativo { background: #fff; color: var(--azul); font-weight: 700; box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
.filtro-datas { display: flex; align-items: center; gap: 8px; }
.filtro-datas.oculto { display: none; }
.filtro-datas input { width: 150px; padding: 8px 10px; font-size: 13px; }
.filtro-datas span { font-size: 12.5px; color: var(--texto-2); }
.filtros-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.filtros-grade.ura { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); max-width: 760px; }
.filtro-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filtro-campo > span { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: #666; }
.filtro-campo > span i { color: var(--azul); font-size: 11px; }
.filtro-campo select { height: 42px; padding: 0 12px; font-size: 13.5px; }
.filtro-horario { display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 4px 0 8px; border-radius: var(--r-sm);
  background: var(--input); border: 1px solid var(--borda); }
.filtro-horario input { flex: 1; min-width: 0; height: 100%; padding: 0 4px; border: 0; background: transparent; font-size: 13.5px; }
.filtro-horario input:focus { box-shadow: none; background: transparent; }
.filtro-horario em { font-style: normal; font-size: 12px; color: var(--texto-3); }
.filtro-horario button { all: unset; cursor: pointer; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  color: var(--texto-3); font-size: 12px; }
.filtro-horario button:hover { background: #fff; color: var(--vermelho); }
.rel-resumo {
  display: flex; gap: 12px; align-items: center; padding: 16px 20px; margin-bottom: 18px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(0, 80, 240, .08), rgba(0, 80, 240, .08)); border: 1px solid var(--borda-azul);
  font-size: 15.5px; font-weight: 600;
}
.rel-resumo i { color: #f59e0b; font-size: 18px; }
.rel-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
/* resumo + números num cartão só */
.rel-numeros { padding: 14px 20px 16px; margin-bottom: 18px; }
.rel-numeros-resumo { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--texto-1);
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--borda); }
.rel-numeros-resumo i { color: #f59e0b; }
.rel-numeros-grade { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: 14px; }
.rel-num { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 0 14px; border-left: 1px solid var(--borda); }
.rel-num:first-child { padding-left: 0; border-left: 0; }
.rel-num small { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--texto-3); line-height: 1.25; }
.rel-num small i { font-size: 12px; }
.rel-num small i.azul { color: var(--azul); }
.rel-num small i.verde { color: var(--verde); }
.rel-num small i.roxo { color: #0080c8; }
.rel-num small i.laranja { color: #d97706; }
.rel-num small i.vermelho { color: var(--vermelho); }
.rel-num small i.cinza { color: var(--texto-2); }
.rel-num b { font: 800 22px var(--fonte-titulo); line-height: 1.15; }
.rel-num em { font-style: normal; font-size: 11.5px; color: var(--texto-2); line-height: 1.3; }
@media (max-width: 1500px) {
  .rel-numeros-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rel-num:nth-child(4n+1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
  .rel-numeros-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-num:nth-child(odd) { padding-left: 0; border-left: 0; }
}
.rel-kpi { padding: 16px 18px; }
.rel-kpi em { display: block; font-style: normal; font-size: 12px; color: var(--texto-2); line-height: 1.35; }
.rel-bloco { padding: 20px 22px; margin-bottom: 18px; }
.rel-bloco-tabela { margin-bottom: 18px; }
.rel-titulo { margin-bottom: 16px; }
.rel-titulo h3 { font-size: 16px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.rel-titulo h3 i { color: var(--azul); font-size: 14px; }
.rel-titulo p { font-size: 12.5px; color: var(--texto-2); margin-top: 3px; }
.rel-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.funil { display: flex; flex-direction: column; gap: 14px; }
.funil-linha { display: grid; grid-template-columns: 250px 1fr 120px 120px; gap: 16px; align-items: center; }
.funil-rotulo b { display: block; font-size: 14px; }
.funil-rotulo small { display: block; font-size: 12px; color: var(--texto-2); line-height: 1.35; }
.funil-trilho { height: 34px; border-radius: 8px; background: rgba(0, 0, 0, .045); overflow: hidden; }
.funil-trilho span { display: block; height: 100%; border-radius: 8px; transition: width .5s; }
.etapa-0 .funil-trilho span { background: linear-gradient(90deg, #0050f0, #00a8f0); }
.etapa-1 .funil-trilho span { background: linear-gradient(90deg, #059669, #34d399); }
.etapa-2 .funil-trilho span { background: linear-gradient(90deg, #0050f0, #0050f0); }
.etapa-3 .funil-trilho span { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.etapa-4 .funil-trilho span { background: linear-gradient(90deg, #10b981, #00a8f0); }
.funil-n { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; text-align: right; line-height: 1.1; }
.funil-n small, .funil-pct small { display: block; font-family: var(--fonte); font-size: 11.5px; font-weight: 500; color: var(--texto-2); }
.funil-pct { padding-left: 14px; border-left: 1px solid var(--borda); }
.funil-pct b { font-family: var(--fonte-titulo); font-size: 16px; }

.rel-barras { display: flex; flex-direction: column; gap: 11px; }
.rel-barra { display: grid; grid-template-columns: 190px 1fr 46px 54px; gap: 10px; align-items: center; font-size: 13.5px; }
.rel-barra.zero { opacity: .4; }
.rel-barra .nome { display: flex; align-items: center; gap: 8px; }
.rel-barra .nome i, .legenda i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.rel-barra .trilho { height: 12px; border-radius: 99px; background: rgba(0, 0, 0, .05); overflow: hidden; }
.rel-barra .trilho span { display: block; height: 100%; border-radius: 99px; }
.rel-barra b { text-align: right; font-family: var(--fonte-titulo); }
.rel-barra small { color: var(--texto-2); text-align: right; }

.rel-rosquinha { display: flex; align-items: center; gap: 24px; }
.rel-rosquinha svg { width: 170px; height: 170px; flex-shrink: 0; }
.rosca-n { font: 700 8px var(--fonte-titulo); fill: var(--texto-1); }
.rosca-r { font: 600 3.2px var(--fonte); fill: var(--texto-2); }
.legenda { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.legenda div { display: grid; grid-template-columns: 12px 1fr auto 52px; gap: 8px; align-items: center; font-size: 13.5px; }
.legenda div.zero { opacity: .4; }
.legenda b { font-family: var(--fonte-titulo); }
.legenda small { color: var(--texto-2); text-align: right; }

.rel-atendente { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rel-atendente div { background: var(--input); border-radius: var(--r-md); padding: 12px 14px; }
.rel-atendente small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #666; }
.rel-atendente b { display: block; font: 700 24px/1.2 var(--fonte-titulo); }
.rel-atendente span { font-size: 12px; color: var(--texto-2); }
.rel-motivos { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.rel-motivos li { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: var(--input); }

.rel-menu + .rel-menu { margin-top: 20px; }
.rel-menu h4 { font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.rel-menu h4 i { color: #0050f0; }
.rel-menu h4 small { font-weight: 500; color: var(--texto-2); font-size: 12px; }
.rel-tabela td small { margin-left: 6px; color: var(--texto-2); }
.rel-tabela tr.apagada td { color: var(--texto-2); font-style: italic; }
.mini-barra { display: inline-block; width: 120px; height: 8px; border-radius: 99px; background: rgba(0, 0, 0, .06); vertical-align: middle; overflow: hidden; }
.mini-barra span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0050f0, #00a8f0); }

.rel-horas { display: flex; align-items: flex-end; gap: 6px; height: 200px; padding-top: 6px; }
.hora-col { flex: 1; min-width: 24px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.hora-col small { font-size: 10.5px; font-weight: 700; color: var(--texto-2); }
.hora-col b { font-size: 11px; font-weight: 600; color: var(--texto-2); }
.hora-barra { width: 100%; max-width: 40px; min-height: 2px; display: flex; align-items: flex-end; overflow: hidden; border-radius: 7px 7px 0 0; background: #dfe5ee; }
.hora-barra span { width: 100%; background: linear-gradient(180deg, #34d399, #059669); }
.hora-col.melhor .hora-barra { box-shadow: 0 0 0 2px #f59e0b; }
.hora-col.melhor b, .hora-col.melhor small { color: #d97706; }
.legenda-horas { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 12px; color: var(--texto-2); }
.legenda-horas i.cinza, .legenda-horas i.verde { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.legenda-horas i.cinza { background: #dfe5ee; }
.legenda-horas i.verde { background: #10b981; }

.rel-lista-filtros { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; padding: 12px 22px; border-bottom: 1px solid var(--borda); }
.bolinha { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.bolinha::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor); }
.rel-mais { padding: 12px 22px; text-align: center; }
.rel-pagina-rodape { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 16px; color: var(--texto-2); font-size: 12px; }
.rel-paginacao { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; }
.rel-paginacao .btn.atual { color: #fff; border-color: var(--azul); background: var(--azul); }
.rel-paginacao .btn:disabled { opacity: .45; cursor: default; }
.rel-paginacao-pontos { padding: 0 3px; color: var(--texto-2); }
.rel-lista-tabela th, .rel-lista-tabela td { padding-left: 14px; padding-right: 14px; }
.rel-lista-tabela td:first-child, .rel-lista-tabela th:first-child { padding-left: 22px; white-space: nowrap; }

/* detalhe da ligação: resumo e linha do tempo */
/* log técnico da ligação: etiqueta com o código SIP e a seção para mandar à operadora */
.sip-flag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font: 700 11.5px var(--fonte); white-space: nowrap; cursor: help; }
.sip-flag.erro { background: rgba(220, 38, 38, .08); color: #b91c1c; border: 1px solid rgba(220, 38, 38, .25); }
.sip-flag.aviso { background: rgba(245, 158, 11, .1); color: #b45309; border: 1px solid rgba(245, 158, 11, .3); }
.sip-tec { margin-top: 18px; border: 1px solid var(--borda); border-radius: 8px; }
.sip-tec summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; }
.sip-tec summary::-webkit-details-marker { display: none; }
.sip-tec summary small { font-weight: 500; color: var(--texto-2); }
.sip-tec summary .seta { margin-left: auto; font-size: 11px; color: var(--texto-3); transition: transform .15s; }
.sip-tec[open] summary .seta { transform: rotate(180deg); }
.sip-corpo { padding: 2px 14px 14px; }
.sip-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 18px; margin-bottom: 14px; }
.sip-grade div { min-width: 0; }
.sip-grade span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--texto-3); }
.sip-grade b { font-size: 13px; overflow-wrap: anywhere; }
.sip-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sip-log { max-height: 340px; overflow: auto; margin: 6px 0 0; padding: 12px; border-radius: 8px; background: #0f172a; color: #e2e8f0;
  font: 11.5px/1.5 Consolas, "Courier New", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.lig-resumo { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.lig-resumo div { padding: 8px 14px; border-radius: 8px; background: var(--input); border-left: 4px solid var(--cor); }
.lig-resumo small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #666; }
.lig-resumo b { font-size: 13.5px; }
.linha-tempo { list-style: none; margin: 10px 0 0; padding: 0; position: relative; }
.linha-tempo::before { content: ""; position: absolute; left: 101px; top: 10px; bottom: 10px; width: 2px; background: var(--borda); }
.ev { display: grid; grid-template-columns: 74px 36px 1fr; gap: 10px; align-items: start; padding: 5px 0; }
.ev-hora { font-family: var(--fonte-titulo); font-weight: 700; font-size: 13px; text-align: right; padding-top: 5px; }
.ev-hora small { display: block; font: 500 10.5px var(--fonte); color: var(--texto-3); }
.ev-icone { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid currentColor; font-size: 13px; }
.ev.azul .ev-icone { color: var(--azul); }
.ev.verde .ev-icone { color: var(--verde); }
.ev.roxo .ev-icone { color: #0050f0; }
.ev.cinza .ev-icone { color: #94a3b8; }
.ev b { display: block; font-size: 13.5px; padding-top: 7px; }
.ev p { font-size: 13px; color: var(--texto-2); margin-top: 2px; white-space: pre-wrap; }

/* ================= relatório: horário, abas e sucessos ================= */
.rel-abas { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.rel-aba {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 8px;
  font-weight: 700; font-size: 14px; color: var(--texto-2); background: var(--cartao); border: 1px solid var(--borda-azul);
  box-shadow: var(--sombra-cartao); transition: .15s;
}
.rel-aba span { font-weight: 500; font-size: 12px; opacity: .8; }
.rel-aba:hover { color: var(--azul); }
.rel-aba.ativa { color: #fff; background: var(--g-primario); border-color: transparent; }
.rel-aba.aba-sucesso i { color: #f59e0b; }
.rel-aba.aba-sucesso.ativa { background: linear-gradient(135deg, #059669, #10b981 45%, #00a8f0); }
.rel-aba.aba-sucesso.ativa i { color: #fde68a; }
.rel-lista-filtros.sem-borda { border: 0; padding: 0 0 14px; }

.suc-hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: center;
  padding: 30px 34px; margin-bottom: 18px; border-radius: 8px; color: #fff;
  background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .25), transparent 40%),
    linear-gradient(135deg, #047857 0%, #10b981 45%, #00a8f0 100%);
  box-shadow: 0 18px 40px rgba(16, 185, 129, .35);
}
.suc-selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .2);
  font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.suc-selo i { color: #fde68a; }
.suc-numero { font: 800 84px/1 var(--fonte-titulo); margin-top: 14px; text-shadow: 0 6px 24px rgba(0, 0, 0, .15); }
.suc-hero h2 { font: 700 28px var(--fonte-titulo); margin-top: 2px; }
.suc-hero h2 b { color: #fde68a; letter-spacing: 1px; }
.suc-hero p { font-size: 15px; margin-top: 10px; max-width: 640px; opacity: .95; }
.suc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.suc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; background: rgba(255, 255, 255, .18);
  font-size: 12.5px; font-weight: 700; backdrop-filter: blur(4px); }
.suc-chip.sobe { background: #fde68a; color: #065f46; }
.suc-chip.desce { background: rgba(0, 0, 0, .2); }
.suc-hero-lado { position: relative; display: flex; flex-direction: column; gap: 10px; }
.trofeu { position: absolute; right: -10px; top: -70px; font-size: 150px; color: rgba(255, 255, 255, .16); transform: rotate(-10deg); pointer-events: none; }
.suc-mini { position: relative; padding: 14px 16px; border-radius: 8px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }
.suc-mini b { display: block; font: 800 30px/1.1 var(--fonte-titulo); }
.suc-mini span { font-size: 13px; opacity: .95; }
.confete { position: absolute; inset: 0; pointer-events: none; }
.confete i { position: absolute; top: -14px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: cair linear 1 forwards; }
@keyframes cair {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(330px) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) { .confete { display: none; } }

.suc-medalhas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.suc-medalha { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-lg); background: var(--cartao);
  border: 1px solid var(--borda-azul); box-shadow: var(--sombra-cartao), inset 0 3px 0 var(--cor); }
.suc-medalha .icone { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; color: #fff;
  font-size: 18px; background: var(--cor); box-shadow: 0 8px 18px color-mix(in srgb, var(--cor) 40%, transparent); }
.suc-medalha small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #666; }
.suc-medalha b { display: block; font: 700 18px/1.25 var(--fonte-titulo); }
.suc-medalha b em { font: 600 12px var(--fonte); color: var(--texto-2); font-style: normal; }
.suc-medalha span { font-size: 12px; color: var(--texto-2); }

.suc-dias { display: flex; align-items: flex-end; gap: 6px; height: 210px; overflow-x: auto; padding-top: 8px; }
.suc-dia { flex: 1; min-width: 34px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.suc-dia small { font: 700 12px var(--fonte-titulo); color: #047857; }
.suc-dia .barra { width: 100%; max-width: 46px; min-height: 3px; border-radius: 8px 8px 3px 3px; position: relative;
  background: linear-gradient(180deg, #34d399, #059669); display: grid; place-items: start center; }
.suc-dia.zero .barra { background: #e5eaf1; }
.suc-dia.melhor .barra { background: linear-gradient(180deg, #fbbf24, #f59e0b); box-shadow: 0 6px 16px rgba(245, 158, 11, .4); }
.suc-dia .barra i { color: #fff; font-size: 11px; margin-top: 5px; }
.suc-dia b { font-size: 11px; color: var(--texto-2); }
.suc-dia em { font-size: 10px; font-style: normal; color: var(--texto-3); }

.suc-split { display: flex; height: 18px; border-radius: 99px; overflow: hidden; background: #e5eaf1; }
.suc-split .tecla, .suc-split-legenda i.tecla { background: linear-gradient(90deg, #0050f0, #0050f0); }
.suc-split .voz, .suc-split-legenda i.voz { background: linear-gradient(90deg, #00a8f0, #0050f0); }
.suc-split-legenda { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin: 10px 0 16px; flex-wrap: wrap; }
.suc-split-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.suc-frases { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.suc-frases .frase, .suc-frases .tecla-sim { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; background: rgba(0, 80, 240, .08); color: #0039b8; }
.suc-frases .tecla-sim { background: rgba(0, 80, 240, .08); color: #003fbf; }
.suc-frases b { font-size: 12px; opacity: .7; }
.suc-quer .linha { display: grid; grid-template-columns: 200px 1fr 40px 54px; gap: 10px; align-items: center; font-size: 13.5px; margin-bottom: 10px; }
.suc-quer .nome i { color: #10b981; width: 18px; }
.suc-quer .trilho { height: 12px; border-radius: 99px; background: rgba(0, 0, 0, .05); overflow: hidden; }
.suc-quer .trilho span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #10b981, #00a8f0); }
.suc-quer b { text-align: right; font-family: var(--fonte-titulo); }
.suc-quer small { text-align: right; color: var(--texto-2); }

.podio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; max-width: 760px; margin: 0 auto; }
.podio-lugar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.podio-lugar b { font-size: 14px; }
.podio-lugar > small { font-size: 12px; color: var(--texto-2); }
.podio-n { font: 800 26px var(--fonte-titulo); }
.podio-n small { font: 600 12px var(--fonte); color: var(--texto-2); }
.medalha-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--fonte-titulo); color: #fff; }
.p1 .medalha-n { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 6px 16px rgba(245, 158, 11, .45); }
.p2 .medalha-n { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.p3 .medalha-n { background: linear-gradient(135deg, #fdba74, #c2410c); }
.degrau { width: 100%; border-radius: 8px 14px 0 0; margin-top: 8px; }
.p1 .degrau { height: 120px; background: linear-gradient(180deg, rgba(245, 158, 11, .35), rgba(245, 158, 11, .08)); }
.p2 .degrau { height: 84px; background: linear-gradient(180deg, rgba(148, 163, 184, .35), rgba(148, 163, 184, .08)); }
.p3 .degrau { height: 60px; background: linear-gradient(180deg, rgba(194, 65, 12, .25), rgba(194, 65, 12, .06)); }
.podio-resto { list-style: none; max-width: 760px; margin: 14px auto 0; display: flex; flex-direction: column; gap: 6px; }
.podio-resto li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: var(--input); font-size: 13.5px; }

.suc-mural-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.suc-mural { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.suc-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 8px; background: #fff;
  border: 1px solid rgba(16, 185, 129, .25); box-shadow: 0 8px 22px rgba(16, 185, 129, .08), inset 3px 0 0 #10b981; }
.suc-card .topo { display: flex; align-items: center; gap: 10px; }
.suc-card .topo > div { flex: 1; min-width: 0; }
.suc-card .topo b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suc-card .topo small { font-size: 12px; color: var(--texto-2); }
.suc-card .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #fff;
  font: 700 14px var(--fonte-titulo); background: linear-gradient(135deg, #10b981, #00a8f0); }
.suc-card p { font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; }
.suc-card p i { color: #10b981; width: 16px; }
.suc-card p.dados { flex-wrap: wrap; gap: 6px; }
.suc-card p.dados span { padding: 3px 8px; border-radius: 8px; background: var(--input); font-size: 12px; }
.suc-card .rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--borda); }
.suc-card .rodape .acoes { flex-wrap: nowrap; gap: 6px; }
.suc-vazio { text-align: center; padding: 50px 20px; border-radius: 8px; background: var(--cartao); border: 1px solid var(--borda-azul); }
.suc-vazio i { font-size: 44px; color: #10b981; }
.suc-vazio h2 { font: 700 22px var(--fonte-titulo); margin: 12px 0 6px; }
.suc-vazio p { color: var(--texto-2); }
.suc-vazio small { display: block; margin-top: 14px; color: var(--texto-3); }

/* ================= agressividade ================= */
.agressividade {
  padding: 18px 20px; margin-bottom: 18px; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(0, 80, 240, .05), rgba(247, 151, 30, .07)); border: 1px solid var(--borda-azul);
}
.agr-topo { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 14px; }
.agr-titulo b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.agr-titulo b i { color: #f97316; }
.agr-titulo small { display: block; font-size: 12.5px; color: var(--texto-2); max-width: 620px; margin-top: 2px; }
.agr-valor { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.agr-valor input { width: 92px; text-align: center; font: 700 30px var(--fonte-titulo); padding: 4px 6px; background: #fff; }
.agr-valor span { font-size: 12px; font-weight: 600; color: var(--texto-2); line-height: 1.25; }
#agr-barra {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px; padding: 0; border: 0; border-radius: 99px;
  background: linear-gradient(90deg, #0050f0, #f97316) 0 / var(--pct, 0%) 100% no-repeat, rgba(0, 0, 0, .08); cursor: pointer;
}
#agr-barra:focus { box-shadow: none; }
#agr-barra::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid #f97316;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
#agr-barra::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #f97316; }
.agr-niveis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.agr-dica { font-size: 12.5px; color: var(--texto-2); margin-top: 10px; line-height: 1.5; }
.agr-alerta { color: #b45309; font-weight: 600; }

/* URA ao vivo: a última resposta do cliente e a conversa (o resto da tela usa os estilos do discador ao vivo) */
.acao-cliente { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700;
  background: rgba(0, 80, 240, .1); color: #003fbf; }
.acao-cliente.voz { background: rgba(0, 80, 240, .1); color: #0050f0; }
.falas-vivo { max-height: 140px; overflow-y: auto; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.falas-vivo p b { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; margin-right: 6px; }
.falas-vivo p.ura b, .falas-vivo p.agente b { color: #0050f0; }
.falas-vivo p.cliente b { color: var(--azul); }
.falas-vivo p.sistema { color: var(--texto-2); font-style: italic; }
.falas-vivo .nada { color: var(--texto-3); font-style: italic; }
@keyframes tocar { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } 50% { transform: rotate(0); } }

/* ================= discador em cartões ================= */
.disc-filtros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.disc-filtro { --cor: #10b981; --cor2: #34d399; --texto: #047857;
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 8px; background: #fff; border: 1px solid color-mix(in srgb, var(--cor) 25%, transparent);
  box-shadow: inset 0 3px 0 var(--cor), 0 6px 18px rgba(0, 50, 150, .05); transition: .15s; }
.disc-filtro.verde { --cor: #10b981; --cor2: #34d399; --texto: #047857; }
.disc-filtro.cinza { --cor: #94a3b8; --cor2: #cbd5e1; --texto: #475569; }
.disc-filtro.azul { --cor: #0050f0; --cor2: #00a8f0; --texto: #003fbf; }
.disc-filtro.vermelho { --cor: #ef4444; --cor2: #f87171; --texto: #b91c1c; }
.disc-filtro:hover { transform: translateY(-2px); }
.disc-filtro.ativo { background: color-mix(in srgb, var(--cor) 10%, #fff); border-color: var(--cor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 18%, transparent); }
.disc-filtro.zero { opacity: .65; }
.disc-filtro .icone { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 16px;
  background: linear-gradient(135deg, var(--cor2), var(--cor)); }
.disc-filtro b { font: 800 30px/1 var(--fonte-titulo); color: var(--texto); }
.disc-filtro .nome-filtro { min-width: 0; font-size: 14px; font-weight: 700; color: var(--texto-1); line-height: 1.25; }
.disc-filtro .nome-filtro small { display: block; font-size: 11.5px; font-weight: 500; color: var(--texto-2); }
.disc-lista-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.disc-lista-topo h3 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.disc-lista-topo h3 i { color: var(--azul); }

.camp-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 99px; font-size: 12px; font-weight: 800;
  letter-spacing: .3px; background: var(--input); color: var(--texto-2); }
.camp-status.ativa { background: rgba(16, 185, 129, .12); color: #047857; }
.camp-status.concluida { background: rgba(0, 80, 240, .1); color: #003fbf; }
.camp-status .pulso { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); animation: pulso 1.6s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); } 100% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); } }
.camp-status { padding: 3px 10px; font-size: 11px; }
/* os contadores do topo do Discador: número grande colorido, o nome do lado e um traço embaixo; clicar filtra */
.disc-conts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 34px; margin: 2px 0 20px; }
.disc-cont { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: baseline; gap: 9px; padding: 0 4px 6px;
  border-bottom: 2px solid var(--linha); transition: border-color .15s; }
.disc-cont b { font: 400 44px/1 var(--fonte); color: var(--cor); font-variant-numeric: tabular-nums; }
.disc-cont span { font-size: 16px; color: var(--texto-2); }
.disc-cont:hover { border-bottom-color: var(--cor); }
.disc-cont.ativo { border-bottom: 3px solid var(--cor); }
.disc-cont.ativo span { color: var(--texto-1); font-weight: 600; }
.disc-cont:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; }
.disc-cont.verde { --cor: #34b38a; --linha: #c9ecdf; }
.disc-cont.cinza { --cor: #b8bec8; --linha: #e4e7ec; }
.disc-cont.azul { --cor: #0050f0; --linha: #cfe0f5; }
.disc-cont.vermelho { --cor: #f06b78; --linha: #fbd3d7; }
/* "Ao vivo" do Discador: abre a escolha entre URA e Discador */
.vivo-escolha .btn .fa-chevron-down { font-size: 10px; margin-left: 2px; color: var(--texto-3); transition: transform .15s; }
.vivo-escolha.aberto .btn .fa-chevron-down { transform: rotate(180deg); }
.vivo-escolha .lista-menu { top: calc(100% + 6px); min-width: 210px; padding: 6px; border-radius: 8px; box-shadow: 0 16px 34px rgba(16, 24, 40, .16); }
.vivo-escolha .lista-menu button { padding: 9px 10px; font-size: 13.5px; border-radius: 8px; }
.vivo-escolha .lista-menu button:hover { background: #f2f4f7; }
.vivo-escolha .lista-menu button i { width: 16px; }
/* o título, a busca e os filtros das campanhas ficam fora do quadro branco, direto no fundo da página */
.camp-topo .supd-painel-cab { padding: 0 2px; }
.camp-topo .supd-barra { padding: 10px 2px 14px; border-bottom: 0; }
.camp-topo .supd-painel-cab em { color: #667085; }
.camp-topo .busca-icone, .camp-topo .supd-barra select, .camp-topo .periodo-seg {
  background: #fff; border-color: #d0d5dd; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.camp-topo .busca-icone i, .camp-topo .busca-icone input::placeholder { color: #667085; }
.camp-topo .periodo-seg .chip { color: #344054; }
.camp-topo .periodo-seg .chip:hover { background: #f2f4f7; }
.camp-topo .periodo-seg .chip.ativo { background: #eaf1ff; color: var(--azul); box-shadow: inset 0 0 0 1px rgba(0, 80, 240, .35); }
.camp-topo .supd-filtro .chip em { color: #667085; }
.camp-topo .supd-filtro .chip.ativo em { color: var(--azul); }
/* a caixa da lista de campanhas: cantos retos e fundo branco liso (sem o desfoque do fundo, que prenderia os quadros
   fixos dentro dela) */
.cartao-tabela.cartao-campanhas { border-radius: 0; background: #fff; backdrop-filter: none; }
.camp-rolagem .cc-cab { position: sticky; top: 0; z-index: 2; }
/* a página fica parada e só a lista rola (como no Callix): a seção ocupa a altura da tela e a caixa encolhe até caber */
@media (min-width: 861px) and (min-height: 560px) {
  .conteudo:has(#aba-discador.ativa) { padding-bottom: 24px; }
  #aba-discador.ativa { display: flex; flex-direction: column; height: calc(100vh - 126px); }
  #aba-discador.ativa > * { flex-shrink: 0; }
  #aba-discador .cartao-campanhas { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #aba-discador .camp-rolagem { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
/* campanhas do Discador: uma linha por campanha (anel de progresso, nome e situação, os números e as ações), no visual
   das telas ao vivo; o cabeçalho tem as mesmas colunas */
.cc-cab, .cc { display: grid; grid-template-columns: 52px minmax(0, 1fr) repeat(4, 88px) 150px; align-items: center; gap: 12px; padding: 0 18px; }
.cc-cab { padding-top: 10px; padding-bottom: 10px; background: #fcfcfd; border-bottom: 1px solid var(--borda);
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--texto-1); }
/* os números e as ações ficam no meio da coluna, embaixo do título dela */
.cc-cab .num, .cc-num { text-align: center; }
.camp-linhas { min-height: 120px; }
.cc { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid #f0f2f5; background: #fff; transition: background .12s; }
.cc:last-child { border-bottom: 0; }
.cc:hover { background: #fafbff; }
.cc.ativa { box-shadow: inset 3px 0 0 #10b981; }
.cc.problema { box-shadow: inset 3px 0 0 #ef4444; }
.cc-progresso { position: relative; }
/* o detalhe do anel (ao passar o mouse): cartão claro com uma barrinha por situação; escondido de verdade (display: none),
   senão esticava a página no fim da lista */
.dica-anel { display: none; position: fixed; z-index: 30; width: 320px; padding: 14px 16px; border-radius: 8px;
  background: #fff; color: var(--texto-1); border: 1px solid #e4e7ec; box-shadow: 0 18px 38px rgba(16, 24, 40, .16); font-size: 13px; pointer-events: none; }
.dica-anel::before { content: ''; position: absolute; top: -7px; left: 26px; width: 12px; height: 12px; background: #fff;
  border-left: 1px solid #e4e7ec; border-top: 1px solid #e4e7ec; transform: rotate(45deg); }
.cc-progresso:hover .dica-anel { display: block; animation: aparecer-dica .15s; }
.cc-progresso.para-cima .dica-anel::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.cc-alerta.para-cima .cc-alerta-caixa::before { top: auto; bottom: -52px; }
.da-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.da-cab span { color: #667085; }
.da-cab b { font-size: 15px; font-variant-numeric: tabular-nums; }
.da-item { padding: 4px 0; }
.da-t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.da-t span { display: inline-flex; align-items: center; gap: 7px; color: #344054; }
.da-t span i { width: 8px; height: 8px; border-radius: 50%; }
.da-t b { font-variant-numeric: tabular-nums; }
.da-t em { margin-left: 4px; font-style: normal; font-size: 12px; color: #98a2b3; }
.da-barra { height: 6px; margin-top: 5px; border-radius: 99px; background: #f2f4f7; overflow: hidden; }
.da-barra i { display: block; height: 100%; border-radius: 99px; }
.da-sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.da-sub div { padding: 7px 8px; border-radius: 8px; background: #f9fafb; border: 1px solid #f0f2f5; }
.da-sub small { display: block; font-size: 11px; line-height: 1.25; color: #667085; }
.da-sub b { font-size: 15px; font-variant-numeric: tabular-nums; }
.cc-anel { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; cursor: help; }
.cc-anel b { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 700 11px var(--fonte); color: var(--texto-1); }
.cc-quem { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cc-quem-txt { flex: 1; min-width: 0; }
/* o que falta para discar: um ícone no fim da coluna do nome; a lista aparece ao passar o mouse */
.cc-alerta { position: relative; flex-shrink: 0; }
.cc-alerta-btn { position: relative; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(220, 38, 38, .28); background: rgba(220, 38, 38, .08); color: #dc2626; font-size: 15px; transition: background .15s; }
.cc-alerta:hover .cc-alerta-btn, .cc-alerta-btn:focus-visible { background: rgba(220, 38, 38, .16); }
.cc-alerta-btn em { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 8px;
  border: 2px solid #fff; background: #dc2626; color: #fff; font: normal 700 10.5px/15px var(--fonte); }
.cc-alerta-caixa { position: fixed; z-index: 30; width: 340px; max-width: 80vw; padding: 14px 16px;
  border-radius: 8px; background: #fff; color: var(--texto-1); border: 1px solid #e4e7ec; box-shadow: 0 18px 38px rgba(16, 24, 40, .16);
  font-size: 13px; display: none; }
/* ponte invisível do topo do ícone até a caixa: o mouse vai em diagonal até o "Resolver" sem ela sumir */
.cc-alerta-caixa::before { content: ''; position: absolute; left: 0; right: 0; top: -52px; height: 52px; }
.cc-alerta:hover .cc-alerta-caixa, .cc-alerta-btn:focus-visible + .cc-alerta-caixa, .cc-alerta-caixa:focus-within { display: block; animation: aparecer-dica .15s; }
@media (hover: none) { .cc-alerta:focus-within .cc-alerta-caixa { display: block; } }  /* celular: abre ao tocar */
.ca-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #b42318; }
.ca-cab b { font-size: 14px; color: var(--texto-1); }
.cc-alerta-caixa ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cc-alerta-caixa li { display: flex; gap: 10px; padding: 9px 11px; border-radius: 8px; background: #fef3f2; border: 1px solid #fee4e2;
  line-height: 1.45; color: #7a271a; }
.cc-alerta-caixa li i { margin-top: 2px; color: #f04438; }
.ca-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.ca-pe small { font-size: 12px; color: #667085; }
.cc-alerta-caixa a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; background: #101828; color: #fff;
  font-weight: 600; text-decoration: none; }
.cc-alerta-caixa a:hover { background: #344054; }
.cc-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-nome a { font: 700 15px var(--fonte-titulo); color: var(--texto-1); text-decoration: none; }
.cc-nome a:hover { color: var(--azul); }
.cc-sub { margin-top: 4px; font-size: 12.5px; color: var(--texto-2); }
.cc-agora { font-weight: 700; }
.cc-agora.rodando { color: #047857; } .cc-agora.esperando { color: #b45309; } .cc-agora.concluida { color: #003fbf; }
.cc-detalhes { color: var(--azul); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cc-detalhes i { font-size: 10px; }
.cc-num b { font: 650 15px var(--fonte); font-variant-numeric: tabular-nums; color: var(--texto-1); white-space: nowrap; }
.cc-num b small { font: 500 11.5px var(--fonte); color: var(--texto-3); }
.cc-num.no-ar b { color: #047857; }
.cc-num.sim b { color: #b45309; }
.cc-num.sim i { color: #f59e0b; font-size: 12px; }
.cc .acoes { display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: nowrap; }
.cc-botao { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: 8px; border: 1px solid; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background .15s; }
.cc-botao i { font-size: 11px; }
.cc-botao.iniciar { color: #067647; background: #ecfdf3; border-color: #abefc6; }
.cc-botao.iniciar:hover { background: #d1fadf; }
.cc-botao.pausar { color: var(--texto-2); background: #fff; border-color: var(--borda); }
.cc-botao.pausar:hover { background: #f2f4f7; }
.cc-botao:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.cc .lista-menu { position: fixed; right: auto; bottom: auto; min-width: 220px; padding: 6px; border-radius: 8px; box-shadow: 0 16px 34px rgba(16, 24, 40, .16); }
.cc .lista-menu button { padding: 8px 10px; font-size: 13px; border-radius: 8px; }
.cc .lista-menu button:hover { background: #f2f4f7; }
.cc .lista-menu button i { width: 16px; color: var(--texto-2); }
.cc .lista-menu button.perigo, .cc .lista-menu button.perigo i { color: var(--vermelho); }
.cc-detalhe { grid-column: 1 / -1; padding: 6px 4px 2px 66px; border-top: 1px dashed var(--borda); }
.camp-linhas > .vazio-linha { text-align: center; padding: 40px 10px; color: var(--texto-2); }
.camp-linhas > .vazio-linha i { display: block; font-size: 26px; color: var(--texto-3); margin-bottom: 10px; }
/* tela menor: os números descem para a linha de baixo, cada um com o nome em cima */
@media (max-width: 1100px) {
  .cc-cab { display: none; }
  .cc { grid-template-columns: 50px repeat(4, minmax(0, 1fr)) auto; row-gap: 8px; }
  .cc-quem { grid-column: 2 / 6; }
  .cc .acoes { grid-column: 6; grid-row: 1; }
  .cc-num { grid-row: 2; text-align: left; }
  .cc > .cc-num:nth-child(3) { grid-column: 2; } .cc > .cc-num:nth-child(4) { grid-column: 3; }
  .cc > .cc-num:nth-child(5) { grid-column: 4; } .cc > .cc-num:nth-child(6) { grid-column: 5; }
  .cc-num::before { content: attr(data-rotulo); display: block; font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--texto-3); }
  .cc-detalhe { padding-left: 4px; }
}

/* ================= listas de bloqueio ================= */
.disc-filtro.estatico { cursor: default; }
.disc-filtro.estatico:hover { transform: none; }
.disc-filtro.laranja { --cor: #f97316; --cor2: #fb923c; --texto: #c2410c; }
.disc-filtro.roxo { --cor: #0050f0; --cor2: #00a8f0; --texto: #0050f0; }
.bloq-consulta { display: grid; grid-template-columns: 260px 1fr; gap: 6px 20px; align-items: center; padding: 18px 22px; margin-bottom: 22px; }
.bloq-consulta-texto b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.bloq-consulta-texto b i { color: var(--azul); }
.bloq-consulta-texto small { display: block; font-size: 12.5px; color: var(--texto-2); }
.bloq-consulta-form { display: flex; gap: 10px; }
.bloq-consulta-form input { flex: 1; font-size: 15px; }
#consulta-resultado { grid-column: 1 / -1; }
.consulta-res { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 12px 16px; border-radius: 8px; font-size: 13.5px; }
.consulta-res > i { font-size: 20px; margin-top: 2px; }
.consulta-res b { display: block; font-size: 14.5px; }
.consulta-res span { color: var(--texto-2); }
.consulta-res ul { margin: 6px 0 0 18px; display: flex; flex-direction: column; gap: 4px; }
.consulta-res .btn-link { flex: none; font-size: 12px; margin-left: 6px; }
.consulta-res.bloqueado { background: rgba(239, 68, 68, .07); border: 1px solid rgba(239, 68, 68, .25); }
.consulta-res.bloqueado > i, .consulta-res.bloqueado b { color: #b91c1c; }
.consulta-res.livre { background: rgba(16, 185, 129, .08); border: 1px solid rgba(16, 185, 129, .3); }
.consulta-res.livre > i, .consulta-res.livre b { color: #047857; }
.consulta-res.aviso { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .3); }
.consulta-res.aviso > i { color: #b45309; }
.bloq-secao { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bloq-secao i { color: var(--azul); }
.bloq-listas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 22px; align-items: start; }
.bloq-listas .lista-cartao { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 8px; background: #fff;
  border: 1px solid var(--borda-azul); box-shadow: var(--sombra-cartao), inset 0 4px 0 #ef4444; }
.bloq-listas .lista-cartao.sistema { box-shadow: var(--sombra-cartao), inset 0 4px 0 #f97316; }
.bloq-listas .lista-cartao header { display: flex; align-items: center; gap: 12px; }
.bloq-listas .lista-cartao header > div { flex: 1; min-width: 0; }
.bloq-listas .lista-cartao h3 { font-size: 15.5px; }
.bloq-listas .lista-cartao header small { display: block; font-size: 12px; color: var(--texto-2); }
.bloq-listas .lista-cartao .icone { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; color: #fff;
  font-size: 16px; background: linear-gradient(135deg, #f87171, #ef4444); }
.bloq-listas .lista-cartao.sistema .icone { background: linear-gradient(135deg, #fb923c, #f97316); }
.bloq-qtd { font-size: 13.5px; color: var(--texto-2); }
.bloq-qtd b { font: 800 28px var(--fonte-titulo); color: var(--texto-1); margin-right: 4px; }
.bloq-adicionar { display: flex; gap: 8px; }
.bloq-adicionar input { flex: 1; min-width: 0; }
.bloq-adicionar .btn { flex-shrink: 0; }
.lista-cartao details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--azul); }
.lista-cartao details summary i { margin-right: 4px; }
.bloq-busca { margin: 10px 0 8px; padding: 7px 11px; font-size: 13px; }
.lista-cartao .numeros { max-height: 230px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.lista-cartao .numeros > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--input); }
.lista-cartao .numeros > div b { display: block; font-size: 13.5px; }
.lista-cartao .numeros > div small { font-size: 11.5px; color: var(--texto-2); }
.lista-cartao .numeros button { all: unset; cursor: pointer; color: var(--texto-3); padding: 4px; }
.lista-cartao .numeros button:hover { color: var(--vermelho); }
.bloq-listas .lista-cartao.promo { border-style: dashed; box-shadow: var(--sombra-cartao), inset 0 4px 0 #0050f0; }
.bloq-listas .lista-cartao.promo .icone { background: linear-gradient(135deg, #00a8f0, #0050f0); }
.bloq-listas .lista-cartao.promo .btn { align-self: flex-start; }
.bloq-listas .lista-cartao.nova { all: unset; box-sizing: border-box; cursor: pointer; min-height: 170px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 18px; border-radius: 8px; border: 2px dashed rgba(0, 80, 240, .3);
  color: var(--azul); text-align: center; transition: .15s; }
.bloq-listas .lista-cartao.nova:hover { background: rgba(0, 80, 240, .04); border-color: var(--azul); }
.bloq-listas .lista-cartao.nova i { font-size: 22px; }
.bloq-listas .lista-cartao.nova small { color: var(--texto-2); font-size: 12px; }
.bloq-ddds { padding: 20px 22px; }
.bloq-ddds-topo { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.bloq-ddds-topo .icone { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--g-primario); }
.bloq-ddds-topo h3 { font-size: 16px; }
.bloq-ddds-topo p { font-size: 12.5px; color: var(--texto-2); }
.bloq-ddds-forms { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.bloq-linha { display: flex; gap: 10px; align-items: flex-end; }
.bloq-linha .campo { flex: 0 0 100px; }
.bloq-linha .campo.motivo, #form-uf .campo { flex: 1; }
.bloq-linha .btn { flex-shrink: 0; }
.bloq-ddd-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ddd-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--input); }
.ddd-grupo .uf { font: 800 13px var(--fonte-titulo); min-width: 34px; }
.ddd-grupo .uf em { font: 600 11px var(--fonte); font-style: normal; color: #b91c1c; margin-left: 4px; }
.ddd-grupo .ddd { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 99px; background: #fff; border: 1px solid rgba(239, 68, 68, .3); }
.ddd-grupo .ddd b { color: #b91c1c; }
.ddd-grupo .ddd small { font-size: 11px; color: var(--texto-2); }
.ddd-grupo .ddd button { all: unset; cursor: pointer; color: var(--texto-3); padding: 0 4px; }
.ddd-grupo .ddd button:hover { color: var(--vermelho); }
.ddd-grupo .btn-link { flex: none; font-size: 12px; }

/* ================= discador com atendentes ================= */
.r-abandono { background: rgba(245, 158, 11, .1); color: #b45309; border-color: rgba(245, 158, 11, .3); }
.r-sem_qualificacao { background: rgba(0, 0, 0, .04); color: var(--texto-2); }
.tipo-camp { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 10.5px;
  font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #0080c8; background: rgba(0, 168, 240, .09);
  border: 1px solid rgba(0, 168, 240, .22); }
.tipo-camp.discador { color: #047857; background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .3); }
.tipos-campanha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 6px; }
.tipo-cartao { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 20px;
  border-radius: 8px; border: 2px solid var(--borda); background: #fff; transition: .15s; }
.tipo-cartao:hover { border-color: rgba(0, 80, 240, .35); }
.tipo-cartao i { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; font-size: 19px; color: #fff;
  background: linear-gradient(135deg, #0050f0, #0080c8); }
.tipo-cartao[data-modo="discador"] i { background: var(--g-verde); }
.tipo-cartao b { font: 800 17px var(--fonte-titulo); }
.tipo-cartao small { font-size: 13px; color: var(--texto-2); line-height: 1.45; }
.tipo-cartao.ativo { border-color: var(--azul); box-shadow: 0 10px 26px rgba(0, 80, 240, .15); background: rgba(0, 80, 240, .03); }
.qualificacoes-editor { display: flex; flex-direction: column; gap: 8px; }
.qual-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px; align-items: center; }
/* campanha: quando a ligação não chega no atendente (espera e limite por resultado) + retorno privado */
.regras-resultado { margin: 16px 0 6px; padding: 16px; border-radius: 8px; border: 1px solid var(--borda); background: rgba(0, 80, 240, .025); }
.rr-topo b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rr-topo b i { color: var(--azul); }
.rr-topo small { display: block; margin: 4px 0 10px; font-size: 12.5px; color: var(--texto-2); line-height: 1.45; }
.rr-rolagem { overflow-x: auto; }
.rr-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rr-tabela th { text-align: left; padding: 6px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-3); white-space: nowrap; }
.rr-tabela td { padding: 7px 8px; border-top: 1px solid var(--borda); white-space: nowrap; }
.rr-tabela td small { display: block; font-size: 11.5px; color: var(--texto-3); }
.rr-tabela input[type=number] { width: 78px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borda); background: #fff; font: inherit; text-align: center; }
.rr-tabela .interruptor { margin: 0; }
.rr-privado { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; font-size: 13.5px; color: var(--texto-2); }
.rr-privado b { display: inline-flex; align-items: center; gap: 7px; color: var(--texto-1); }
.rr-privado b i { color: var(--azul); }
.rr-privado select, .rr-privado input { width: auto; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--borda); background: #fff; font: inherit; }
.rr-privado input { width: 78px; text-align: center; }
.rr-min { display: inline-flex; align-items: center; gap: 8px; }
.rr-min.oculto { display: none; }
/* perfil de qualificação: cada uma num cartão com "conta como" e a ação (os campos mudam conforme a ação) */
#qp-quals { gap: 10px; }
#qp-quals .qual-linha { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 38px; gap: 4px 10px; align-items: end;
  padding: 12px 12px 12px 8px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
#qp-quals .qp-ordem { align-self: center; }
#qp-quals [data-q-tirar] { align-self: center; }
.ql-campo small { display: block; margin: 0 0 4px 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--texto-3); }
.ql-acao { grid-column: 2 / 4; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 6px; padding: 9px 12px;
  border-radius: 8px; background: #eaf2ff; font-size: 13.5px; }
.ql-acao > b { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #0039b8; }
.ql-acao select, .ql-acao input { width: auto; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .12); background: #fff; font: inherit; }
.ql-acao [data-q-acao] { min-width: 230px; font-weight: 600; }
.ql-acao input[type=number] { width: 84px; text-align: center; font-weight: 600; }
.ql-acao input[data-q-vezes], .rr-tabela input[data-r-vezes] { width: 108px; }
.ql-acao .dica { font-size: 12.5px; color: var(--texto-2); }
.ql-detalhe { display: contents; }
.qual-linha[data-acao=finalizar] .ql-acao { background: #ecfdf5; } .qual-linha[data-acao=finalizar] .ql-acao > b { color: #047857; }
.qual-linha[data-acao=ligar] .ql-acao { background: #eff6ff; } .qual-linha[data-acao=ligar] .ql-acao > b { color: #003fbf; }
.qual-linha[data-acao=agendar] .ql-acao { background: #fff7ed; } .qual-linha[data-acao=agendar] .ql-acao > b { color: #c2410c; }
.qual-linha[data-acao=bloquear] .ql-acao { background: #fef2f2; } .qual-linha[data-acao=bloquear] .ql-acao > b { color: #b91c1c; }
/* perfis de pausa: motivo, tempo máximo e o que acontece no estouro */
.pausa-linha, .pausa-cabeca { display: grid; grid-template-columns: 22px minmax(0, 1fr) 110px minmax(0, 1fr) 38px; gap: 8px; align-items: center; }
.pausa-cabeca { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-3); margin: 2px 0 -2px; }
.pausa-tempo { position: relative; display: block; }
.pausa-tempo input { padding-right: 40px; }
.pausa-tempo span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--texto-3); pointer-events: none; }
.equipe-pausas { display: block; margin-top: 3px; font-size: 11.5px; color: var(--texto-3); }
.rel-barra small .estouro, td small.estouro { font-style: normal; color: #b91c1c; font-weight: 700; }
td small.estouro { display: block; }
.qp-ordem { display: flex; flex-direction: column; }
.qp-ordem button { all: unset; cursor: pointer; width: 22px; height: 16px; display: grid; place-items: center; font-size: 10px; color: var(--texto-3); border-radius: 5px; }
.qp-ordem button:hover { background: var(--input); color: var(--azul); }
/* função que só vê uma parte do painel: os botões de editar dela somem */
body.so-ver-discador .edita-discador, body.so-ver-aovivo .edita-aovivo, body.so-ver-usuarios .edita-usuarios,
body.so-ver-qualificacoes .edita-qualificacoes, body.so-ver-pausas .edita-pausas, body.so-ver-bloqueios .edita-bloqueios,
body.so-ver-rotas .edita-rotas { display: none !important; }
.fn-grupo { display: flex; flex-direction: column; gap: 8px; }
.fn-modulo-campanha { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--fundo, #f8fafc); }
.fn-agressividade { display: flex; flex-direction: column; gap: 7px; }
.fn-grupo h4 { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-2); }
.fn-grupo h4 i { color: var(--azul); }
.fn-perm { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--borda); background: #fff; }
.fn-perm > div:first-child { flex: 1; min-width: 0; }
.fn-perm b { display: block; font-size: 14px; }
.fn-perm small { display: block; font-size: 12.5px; color: var(--texto-2); margin-top: 2px; line-height: 1.4; }
.fn-niveis { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--input); border: 1px solid var(--borda); flex-shrink: 0; }
.fn-niveis button { all: unset; cursor: pointer; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.fn-niveis button.ativo { background: #fff; color: var(--azul); font-weight: 700; box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
.fn-niveis button[data-nivel="0"].ativo { color: var(--texto-2); }
.fn-niveis button:disabled { cursor: default; }
.qp-selo.fabrica { background: rgba(0, 80, 240, .1); color: #003fbf; }
.qp-selo { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: rgba(245, 158, 11, .15); color: #b45309; }
.qp-uso { font-size: 13px; color: var(--texto-2); line-height: 1.8; padding: 10px 12px; border-radius: 8px; background: var(--input); }
.qp-uso > i { color: #f59e0b; }
/* Funções, Qualificações e Pausas: tabela com Editar/Duplicar/Excluir + página de editar um item */
.tabela-cfg td:first-child { min-width: 230px; }
.tabela-cfg td small { display: block; margin-top: 3px; font-size: 12px; color: var(--texto-3); }
.tabela-cfg .qp-selo { margin-left: 8px; vertical-align: 1px; }
.tabela-cfg .acoes { justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
.cfg-nome { font-weight: 700; color: var(--texto-1); text-decoration: none; }
.cfg-nome:hover { color: var(--azul); text-decoration: underline; }
.cfg-quem { display: flex; align-items: center; gap: 12px; }
.cfg-icone { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: rgba(0, 80, 240, .08); color: var(--azul); }
.cfg-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 620px; }
.cfg-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: var(--input);
  border: 1px solid var(--borda); font-size: 12px; font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.cfg-chip b { color: var(--texto-1); }
.cfg-chip em { font-style: normal; color: var(--texto-3); font-weight: 500; }
.cfg-chip i { font-size: 10px; color: var(--azul); }
.cfg-chip.mais { background: transparent; color: var(--texto-3); }
.cfg-voltar { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--azul); text-decoration: none; }
.cfg-voltar:hover { text-decoration: underline; }
.cfg-form { padding: 24px 26px; }
.cfg-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cfg-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.cfg-rodape .cfg-alterado { margin-right: auto; }
.cfg-alterado { font-size: 12.5px; font-weight: 600; color: #b45309; }
.cfg-alterado:empty { display: none; }
.qp-escolha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.qp-escolha select { width: auto; min-width: 280px; flex: 0 1 420px; }
.qp-previa { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.qp-previa:empty { display: none; }
.qp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600;
  background: var(--input); border: 1px solid var(--borda); }
.qp-chip i { width: 8px; height: 8px; border-radius: 50%; }
.ritmo-discador { margin: 18px 0; }
#aba-campanha.campanha-so-ver #form-campanha input:disabled,
#aba-campanha.campanha-so-ver #form-campanha select:disabled,
#aba-campanha.campanha-so-ver #form-campanha textarea:disabled { opacity: .82; cursor: default; }
.campo a { color: var(--azul); font-weight: 600; }

/* página Atendentes */
.tabela-atendentes td { vertical-align: middle; }
.atend-quem { display: flex; align-items: center; gap: 11px; }
.atend-avatar { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
  font: 800 13px var(--fonte-titulo); color: #fff; background: var(--g-primario); }
.atend-avatar.inativo { background: #cbd5e1; }
.atend-quem b { display: block; white-space: nowrap; }
.tabela-atendentes td:first-child { min-width: 190px; }
.tabela-atendentes td:nth-child(2) { white-space: nowrap; }
.tabela-atendentes td:nth-child(5) { max-width: 230px; }
.tabela-atendentes .atend-agora { min-width: 220px; }
.atend-quem small { color: var(--texto-3); }
.estado-atend { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700;
  background: var(--input); color: var(--texto-2); }
.estado-atend.disponivel { background: rgba(16, 185, 129, .12); color: #047857; }
.estado-atend.em_ligacao { background: rgba(0, 80, 240, .1); color: #003fbf; }
.estado-atend.qualificando { background: rgba(245, 158, 11, .14); color: #b45309; }
.estado-atend.pausa { background: rgba(148, 163, 184, .18); color: #475569; }
.estado-atend.manual { background: rgba(0, 80, 240, .1); color: #0050f0; }
.vivo-atend.manual { --cor: #0050f0; }
.estado-atend.desconectado { opacity: .6; }
.estado-atend.offline { background: transparent; color: var(--texto-3); padding-left: 0; }
.atend-agora small { display: block; font-size: 12px; color: var(--texto-2); margin-top: 3px; }
.atend-agora .tempo { font: 700 13px var(--fonte-titulo); margin-left: 6px; font-variant-numeric: tabular-nums; }
.atend-hoje { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.atend-hoje b { color: var(--texto-1); }
.atend-pausas { padding: 20px 22px; margin-top: 22px; }
.atend-pausas-topo { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.atend-pausas-topo .icone { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #94a3b8, #64748b); }
.atend-pausas-topo h3 { font-size: 16px; }
.atend-pausas-topo p { font-size: 12.5px; color: var(--texto-2); }
.atend-motivos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.atend-motivos span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 13px; border-radius: 99px;
  background: var(--input); border: 1px solid var(--borda); font-weight: 600; font-size: 13px; }
.atend-motivos button { all: unset; cursor: pointer; padding: 0 4px; color: var(--texto-3); }
.atend-motivos button:hover { color: var(--vermelho); }
.atend-motivo-novo { display: flex; gap: 8px; max-width: 420px; }

/* Login do painel: identidade Liga Voz com marca, hierarquia clara e formulário acessível. */
.login-admin {
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  min-height: 100vh; min-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: #fff;
}
.login-admin-vitrine {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  min-width: 0; min-height: 100%; padding: clamp(32px, 5vw, 76px) clamp(36px, 7vw, 108px) 30px;
  color: #fff; background: radial-gradient(ellipse at 12% 88%, rgba(0, 168, 240, .2), transparent 36%),
    linear-gradient(145deg, #0c1d33 0%, #102b4c 58%, #0b2341 100%);
}
.login-admin-vitrine::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .23;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: linear-gradient(135deg, #000, transparent 78%); }
.login-admin-marca { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 13px 17px;
  border: 1px solid rgba(255,255,255,.78); border-radius: 8px; background: #fff; }
.login-admin-marca img { display: block; width: min(196px, 48vw); height: 42px; object-fit: contain; }
.login-admin-copy { position: relative; z-index: 1; max-width: 580px; margin: auto 0; padding: 74px 0 110px; }
.login-admin-sobretitulo { display: inline-flex; align-items: center; gap: 9px; color: #8ddcff; font-size: 11px; font-weight: 700; letter-spacing: 1.35px; text-transform: uppercase; }
.login-admin-copy > .login-admin-sobretitulo > i { width: 8px; height: 8px; border-radius: 50%; background: #3bd6b1; box-shadow: 0 0 0 4px rgba(59,214,177,.12); }
.login-admin-copy h2 { margin: 20px 0 17px; font: 700 clamp(38px, 4.35vw, 62px)/1.02 var(--fonte-titulo); letter-spacing: -.8px; }
.login-admin-copy h2 span { color: #55caff; }
.login-admin-copy p { max-width: 470px; color: rgba(232,242,253,.76); font-size: 15px; line-height: 1.75; }
.login-admin-modulos { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 27px; }
.login-admin-modulos span { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 11px;
  border: 1px solid rgba(174,207,239,.2); border-radius: 5px; background: rgba(255,255,255,.055); color: #edf6ff; font-size: 12px; font-weight: 600; }
.login-admin-modulos i { color: #62caff; font-size: 12px; }
.login-admin-sinal { position: absolute; z-index: 0; right: -5%; bottom: -1%; width: 90%; height: auto; overflow: visible; opacity: .72; pointer-events: none; }
.login-admin-trilha, .login-admin-ligacao { stroke: #53caff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login-admin-ligacao { stroke: rgba(83,202,255,.62); stroke-dasharray: 5 8; }
.login-admin-grade { stroke: rgba(190,224,255,.11); stroke-width: 1; }
.login-admin-no { fill: #52d5be; stroke: #102b4c; stroke-width: 5; }
.login-admin-no-externo { stroke: rgba(82,213,190,.35); stroke-width: 1.5; }
.login-admin-ponto { fill: #62caff; }
.login-admin-rodape-vitrine { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: rgba(222,236,250,.66);
  font-size: 11px; letter-spacing: .3px; }
.login-admin-rodape-vitrine i { color: #62caff; font-style: normal; }
.login-admin-status { width: 7px; height: 7px; border-radius: 50%; background: #3bd6b1; box-shadow: 0 0 0 4px rgba(59,214,177,.12); }
.login-admin-main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 100vh;
  min-height: 100dvh; padding: 54px clamp(34px, 6vw, 92px); background: #fff; }
.login-admin-caixa { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 430px; text-align: left; }
.login-admin-sobretitulo-claro { gap: 8px; color: #52647b; letter-spacing: .85px; }
.login-admin-sobretitulo-claro i { color: var(--azul); font-size: 13px; }
.login-admin-cabecalho { margin: 19px 0 31px; }
.login-admin-cabecalho h1 { color: #142438; font: 700 36px/1.15 var(--fonte-titulo); letter-spacing: -.25px; }
.login-admin-cabecalho p { margin-top: 8px; color: #69798d; font-size: 14px; line-height: 1.65; }
.login-admin-caixa .login-admin-campo { gap: 8px; margin-bottom: 19px; text-align: left; }
.login-admin-campo > span:first-child { color: #34465b; font-size: 12px; font-weight: 600; letter-spacing: .1px; text-transform: none; }
.login-admin-input { display: flex; align-items: center; gap: 11px; min-width: 0; height: 52px; padding: 0 14px;
  border: 1px solid #d6dee8; border-radius: 6px; background: #fff; transition: border-color .18s, box-shadow .18s, background .18s; }
.login-admin-input:focus-within { border-color: #1686ee; background: #fff; box-shadow: 0 0 0 3px rgba(0,80,240,.12); }
.login-admin-input > i { flex: 0 0 16px; color: #8190a3; font-size: 14px; text-align: center; }
.login-admin-input input, .login-admin-input input:focus { min-width: 0; flex: 1; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: #142438; font-size: 14px; }
.login-admin-input input:-webkit-autofill, .login-admin-input input:-webkit-autofill:hover, .login-admin-input input:-webkit-autofill:focus {
  -webkit-text-fill-color: #142438; -webkit-box-shadow: 0 0 0 1000px #fff inset; transition: background-color 9999s ease-out; }
.login-admin-input input::placeholder { color: #97a4b3; }
.login-admin-submit { display: flex; align-items: center; justify-content: space-between; min-height: 50px; margin-top: 4px; padding: 0 17px;
  border: 0; border-radius: 6px; background: #0050f0; color: #fff; font-size: 14px; font-weight: 650; text-align: left; transition: background .18s, box-shadow .18s; }
.login-admin-submit:hover:not(:disabled) { transform: none; background: #003fca; filter: none; box-shadow: 0 7px 17px rgba(0,80,240,.2); }
.login-admin-submit i { color: rgba(255,255,255,.82); font-size: 13px; }
.login-admin-caixa a { color: #0050f0; font-size: 12px; font-weight: 650; line-height: 1.45; text-decoration: none; }
.login-admin-caixa a:hover { color: #003fbf; text-decoration: underline; text-underline-offset: 3px; }
.login-admin-erro { margin-top: 16px; padding: 11px 13px; border: 1px solid rgba(220,38,38,.24); border-radius: 6px;
  background: #fff4f3; color: #b42318; font-size: 13px; font-weight: 600; line-height: 1.5; }
.login-admin-rodape-main { margin-top: 38px; color: #98a3b2; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.login-admin-rodape-main span { padding: 0 4px; color: #00a8f0; }
.login-admin a:focus-visible, .login-admin button:focus-visible, .login-admin input:focus-visible { outline: 3px solid rgba(0,168,240,.5); outline-offset: 3px; }
@media (max-width: 900px) {
  .login-admin { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(270px, auto) minmax(510px, auto); }
  .login-admin-vitrine { min-height: 270px; padding: 27px clamp(28px, 7vw, 72px) 23px; }
  .login-admin-marca { padding: 9px 12px; }
  .login-admin-marca img { width: min(172px, 50vw); height: 34px; }
  .login-admin-copy { max-width: 630px; padding: 36px 0 18px; }
  .login-admin-copy h2 { margin: 11px 0 8px; font-size: clamp(32px, 5vw, 43px); }
  .login-admin-copy p { max-width: 560px; font-size: 13px; line-height: 1.55; }
  .login-admin-modulos { gap: 7px; margin-top: 13px; }
  .login-admin-modulos span { min-height: 30px; padding: 4px 9px; font-size: 11px; }
  .login-admin-sinal { right: -10%; bottom: -5%; width: 64%; opacity: .42; }
  .login-admin-rodape-vitrine { display: none; }
  .login-admin-main { min-height: 510px; padding: 48px 26px 34px; }
  .login-admin-rodape-main { margin-top: 30px; }
}
@media (max-width: 560px) {
  .login-admin { grid-template-rows: minmax(246px, auto) minmax(500px, auto); }
  .login-admin-vitrine { min-height: 246px; padding: 22px 22px 20px; }
  .login-admin-marca { padding: 8px 10px; }
  .login-admin-marca img { width: 152px; height: 30px; }
  .login-admin-copy { padding: 28px 0 12px; }
  .login-admin-copy > .login-admin-sobretitulo { font-size: 9px; }
  .login-admin-copy h2 { margin: 9px 0 7px; font-size: 34px; }
  .login-admin-copy p { max-width: 390px; font-size: 12px; }
  .login-admin-modulos { gap: 6px; margin-top: 11px; }
  .login-admin-modulos span { min-height: 27px; padding: 3px 7px; font-size: 10px; }
  .login-admin-modulos i { font-size: 10px; }
  .login-admin-sinal { right: -24%; bottom: -4%; width: 78%; opacity: .3; }
  .login-admin-main { min-height: 500px; padding: 42px 23px 28px; }
  .login-admin-cabecalho { margin: 16px 0 25px; }
  .login-admin-cabecalho h1 { font-size: 32px; }
  .login-admin-caixa .login-admin-campo { margin-bottom: 16px; }
  .login-admin-input { height: 49px; }
  .login-admin-rodape-main { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-admin *, .login-admin *::before, .login-admin *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* barra do topo: onde você está (esquerda) e quem está logado (direita) */
.topo-barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; height: 72px;
  margin: -34px -40px 30px; padding: 0 40px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda); }
.topo-caminho { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13.5px; color: var(--texto-2); }
.topo-caminho > i:first-child { color: var(--azul-menu); font-size: 15px; }
.topo-caminho .sep { font-size: 10px; color: var(--texto-3); }
.topo-caminho b { color: var(--texto-1); font-weight: 700; }
.topo-usuario { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.topo-usuario:empty { display: none; }
.topo-avatar { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0;
  font: 800 13px var(--fonte-titulo); color: #fff; background: var(--g-primario); }
.topo-quem { min-width: 0; }
.topo-quem b { display: block; font-size: 13.5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-quem small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--texto-3); }
.topo-usuario .btn { margin-left: 4px; }
.topo-usuario .aberto { padding: 8px 12px; border-radius: 8px; color: #92400e; background: rgba(245, 158, 11, .1);
  border: 1px solid rgba(245, 158, 11, .3); }
.topo-usuario .aberto a { color: #b45309; font-weight: 700; }
.atend-avatar.administrador { background: linear-gradient(135deg, #1e293b, #475569); }
.selo-papel.administrador { color: #1e293b; background: rgba(30, 41, 59, .1); }

/* equipes */
.equipes-cartao { padding: 20px 22px; margin-bottom: 22px; }
.equipes-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.equipes-topo .icone { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #0050f0, #0050f0); flex-shrink: 0; }
.equipes-topo h3 { font-size: 16px; }
.equipes-topo p { font-size: 12.5px; color: var(--texto-2); }
.equipes-topo .empurrar { margin-left: auto; }
.equipes-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.equipe-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 8px; background: #fff;
  border: 1px solid var(--borda); box-shadow: inset 0 3px 0 #0050f0; }
.equipe-item header { display: flex; align-items: center; gap: 8px; }
.equipe-item header b { flex: 1; font: 700 15px var(--fonte-titulo); }
.equipe-item p { font-size: 12.5px; color: var(--texto-2); }
.equipe-item p b { color: var(--texto-1); }
.equipe-item .sem-sup { color: #b45309; }
.equipes-vazio { font-size: 13px; color: var(--texto-3); }
.equipes-filtro { padding: 12px 18px 0; }
.selo-papel { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; color: #0050f0; background: rgba(0, 80, 240, .1); vertical-align: middle; }
.atend-avatar.supervisor { background: linear-gradient(135deg, #0050f0, #0050f0); }
.funcao-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.funcao-escolha label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; border: 2px solid var(--borda);
  cursor: pointer; background: #fff; }
.funcao-escolha label:has(input:checked) { border-color: var(--azul); background: rgba(0, 80, 240, .03); }
.funcao-escolha b { display: block; font-size: 14px; }
.funcao-escolha input { width: auto; flex: none; margin-top: 3px; padding: 0; }
.form-modal .interruptor div b, .form-modal .interruptor div small { display: block; }
.funcao-escolha small { font-size: 12px; color: var(--texto-2); }
.marcar-equipe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--texto-2); }

/* quem trabalha em cada campanha */
.acesso-campanha .interruptor { margin: 4px 0 6px; }
.acesso-campanha .interruptor div b, .acesso-campanha .interruptor div small { display: block; }
.acesso-escolha { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; padding: 14px 16px; border-radius: 8px;
  background: var(--input); border: 1px solid var(--borda); }
.acesso-escolha.desligado { opacity: .45; pointer-events: none; }
.acesso-escolha .rotulo { display: block; margin-bottom: 8px; }
.acesso-escolha small:not(.rotulo) { display: block; margin-top: 6px; font-size: 12px; color: var(--texto-2); }
.acesso-escolha .listas-escolha label { background: #fff; }
.listas-escolha label.pela-equipe { border-color: rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .06); }
.listas-escolha .via { font-style: normal; font-size: 11px; font-weight: 700; color: #047857; }
.acesso-resumo { margin-top: 8px; font-size: 13px; color: var(--texto-2); }
.acesso-resumo i { color: var(--azul); }
.acesso-resumo.alerta { color: #b45309; }
.acesso-resumo.alerta i { color: #f59e0b; }
.equipes-topo .icone.azul { background: var(--g-primario); }

/* página Atendentes: abas, filtros, páginas e editores */
.abas-sub { display: flex; gap: 6px; margin: 4px 0 16px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.abas-sub button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px;
  font-weight: 700; font-size: 14px; color: var(--texto-2); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.abas-sub button i { color: var(--texto-3); }
.abas-sub button em { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: var(--input); color: var(--texto-2); }
.abas-sub button:hover { color: var(--texto-1); }
.abas-sub button.ativo { color: var(--azul); border-bottom-color: var(--azul); }
.abas-sub button.ativo i { color: var(--azul); }
.abas-sub button.ativo em { background: rgba(0, 80, 240, .1); color: var(--azul); }
.barra-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--borda); }
.barra-filtros.sem-borda { padding: 0 0 12px; border: 0; }
.barra-filtros select { width: auto; min-width: 170px; padding: 8px 12px; font-size: 13px; }
.barra-filtros .empurrar { margin-left: auto; }
.barra-filtros .dica { font-size: 12.5px; }
.busca-icone { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r-sm); background: var(--input);
  border: 1px solid var(--borda); min-width: 260px; flex: 0 1 320px; }
.busca-icone i { color: var(--texto-3); font-size: 13px; }
.busca-icone input { border: 0; background: transparent; padding: 9px 0; font-size: 13.5px; }
.busca-icone input:focus { box-shadow: none; }
.barra-paginas { padding: 12px 18px; margin: 0; border-top: 1px solid var(--borda); }
.barra-paginas:empty { display: none; }
.barra-paginas .paginas { display: flex; align-items: center; gap: 10px; }
.chip-mini { display: inline-flex; align-items: center; gap: 5px; margin: 2px 4px 2px 0; padding: 3px 9px; border-radius: 99px;
  font-size: 12px; font-weight: 600; background: var(--input); border: 1px solid var(--borda); color: var(--texto-1); white-space: nowrap; }
.chip-mini.equipe { background: rgba(0, 80, 240, .07); border-color: rgba(0, 80, 240, .25); color: #0050f0; }
.chip-mini.avulso { background: rgba(0, 80, 240, .06); border-color: rgba(0, 80, 240, .2); color: #003fbf; }
.chip-mini.todos { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .3); color: #047857; }
.chip-mini.campanha { background: #fff; }
.chip-mini.mais { background: #fff; color: var(--texto-2); cursor: help; }
.chip-mini button { all: unset; cursor: pointer; color: var(--texto-3); padding: 0 2px; }
.chip-mini button:hover { color: var(--vermelho); }
.alerta-mini { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #b45309; }
.tabela-equipes .equipe-nome { font-size: 14.5px; white-space: nowrap; }
.tabela-equipes td:nth-child(3) a { white-space: nowrap; }
.tabela-equipes td:nth-child(4) { min-width: 320px; }
.tabela-equipes .acoes, .tabela-grupos .acoes { flex-wrap: nowrap; white-space: nowrap; }
.tabela-grupos .equipe-nome { font-size: 14.5px; white-space: nowrap; }
.tabela-grupos td:nth-child(2) { min-width: 300px; }
.editor-quem .barra-filtros .btn-link { display: inline-flex; width: auto; flex: none; }
.chip-mini.grupo { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .35); color: #b45309; }
/* grupos de campanha no cadastro da pessoa e no Editar equipe */
.grupos-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.grupo-opcao { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--borda); background: #fff; cursor: pointer; }
.grupo-opcao:hover { border-color: rgba(0, 80, 240, .35); }
.grupo-opcao:has(input:checked) { background: rgba(0, 80, 240, .06); border-color: rgba(0, 80, 240, .4); }
.grupo-opcao input { width: 17px; height: 17px; accent-color: var(--azul); flex-shrink: 0; }
.grupo-opcao span { min-width: 0; }
.grupo-opcao b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grupo-opcao small { font-size: 11.5px; color: var(--texto-2); }
.grupo-opcao.herdado small { color: #047857; font-weight: 600; }
.editor-quem .interruptor div b, .editor-quem .interruptor div small { display: block; }
.editor-quem-grade { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-top: 14px; }
.editor-quem-grade.desligado { opacity: .4; pointer-events: none; }
.editor-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.editor-col-topo { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.editor-col-topo b i { color: var(--azul); margin-right: 4px; }
.editor-col-topo span { font-size: 12px; color: var(--texto-2); }
.editor-col .busca-icone { min-width: 0; flex: 1; }
.editor-busca-linha { display: flex; gap: 10px; align-items: center; }
.check-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-2); white-space: nowrap; cursor: pointer; }
.editor-lista { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 4px;
  border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
.editor-lista.alta { max-height: 420px; }
.editor-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.editor-item:hover { background: var(--hover); }
.editor-item.sim { background: rgba(0, 80, 240, .06); }
.editor-item.inativo { opacity: .55; }
.editor-item input { width: 17px; height: 17px; accent-color: var(--azul); flex-shrink: 0; }
.editor-item span { flex: 1; min-width: 0; }
.editor-item b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-item small { font-size: 11.5px; color: var(--texto-2); }
.editor-item .via { font-style: normal; font-size: 11px; font-weight: 700; color: #047857; white-space: nowrap; }
.editor-marcados { display: flex; flex-wrap: wrap; min-height: 0; }
.editor-marcados:empty { display: none; }
.editor-resumo { margin-right: auto; font-size: 13px; color: var(--texto-2); }
.editor-resumo i { color: var(--azul); }
/* editor da equipe: duas listas, clique passa a pessoa de um lado para o outro */
.duas-listas { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
.duas-listas .editor-lista { height: 340px; max-height: none; }
.duas-listas-meio { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.editor-item.mover { width: 100%; box-sizing: border-box; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.editor-item.mover:hover { background: var(--hover); }
.editor-item.mover .seta { font-size: 12px; color: var(--azul); opacity: 0; transition: opacity .15s; }
.editor-item.mover:hover .seta { opacity: 1; }
.atend-avatar.mini { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px; font-size: 10.5px; }
.editor-item .marca { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; white-space: nowrap;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.marca.entra { background: rgba(16, 185, 129, .12); color: #047857; }
.marca.sai { background: rgba(239, 68, 68, .1); color: #b91c1c; }
.marca.aberta { background: rgba(0, 80, 240, .08); color: #003fbf; }
.editor-item .camp-ic { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 12px;
  background: rgba(148, 163, 184, .18); color: #475569; }
.editor-item .camp-ic.ativa { background: rgba(16, 185, 129, .12); color: #047857; }
.editor-item .camp-ic.concluida { background: rgba(0, 80, 240, .08); color: #003fbf; }
.acesso-cartao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 8px;
  background: var(--input); border: 1px solid var(--borda); }
.acesso-cartao-quem { flex: 1; display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
.acesso-n { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--texto-2); }
.acesso-n.zero { color: #b45309; }

/* ao vivo: atendentes */
.vivo-atend-resumo { font: 600 13px var(--fonte); color: var(--texto-2); margin-left: 8px; }
.vivo-atendentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.vivo-atend { display: flex; flex-direction: column; gap: 8px; 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, #cbd5e1); --cor: #94a3b8; }
.vivo-atend.disponivel { --cor: #10b981; }
.vivo-atend.em_ligacao { --cor: #0050f0; }
.vivo-atend.qualificando { --cor: #f59e0b; }
.vivo-atend header { display: flex; align-items: center; gap: 10px; }
.vivo-atend header b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vivo-atend .cronometro { font: 700 15px var(--fonte-titulo); color: var(--cor); font-variant-numeric: tabular-nums; }
.vivo-atend p { font-size: 12.5px; color: var(--texto-2); }
.vivo-atend p b { color: var(--texto-1); }

/* relatório: atendentes */
.rel-atendentes td { vertical-align: top; }
.rel-atendentes td small { display: block; font-size: 11.5px; color: var(--texto-2); }
.rel-atendentes .quals { display: flex; flex-wrap: wrap; gap: 4px; max-width: 340px; }
.barra-ocupacao { width: 110px; height: 7px; border-radius: 99px; background: var(--input); overflow: hidden; margin-top: 5px; }
.barra-ocupacao span { display: block; height: 100%; background: var(--g-primario); }
.rel-alerta { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 13px; color: #92400e;
  background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .3); }

/* ================= telas menores ================= */
@media (max-width: 1100px) {
  .g3, .g4, .g5 { grid-template-columns: repeat(2, 1fr); }
  .passos, .disc-grade { grid-template-columns: 1fr; }
  .horarios { grid-template-columns: repeat(4, 1fr); }
  .contadores, .detalhe-grade { grid-template-columns: repeat(2, 1fr); }
  .vivo-contadores { grid-template-columns: repeat(3, 1fr); }
  .vivo-grade { grid-template-columns: 1fr; }
  .meta-linha { grid-template-columns: 1fr 1fr; }
  .rel-kpis { grid-template-columns: repeat(2, 1fr); }
  .filtros-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros-grade.ura { grid-template-columns: 1fr 1fr; max-width: none; }
  .disc-filtros { grid-template-columns: repeat(2, 1fr); }
  .suc-hero { grid-template-columns: 1fr; }
  .suc-medalhas { grid-template-columns: repeat(2, 1fr); }
  .suc-quer .linha { grid-template-columns: 150px 1fr 36px 50px; }
  .rel-grade { grid-template-columns: 1fr; }
  .funil-linha { grid-template-columns: 1fr 100px 100px; }
  .funil-rotulo { grid-column: 1 / -1; }
  .rel-barra { grid-template-columns: 140px 1fr 40px 50px; }
  .fala-etapa, .ura-teste, .fluxo-rodape { grid-template-columns: 1fr; }
  .opcoes-cab { display: none; }
  .opcao-ura { grid-template-columns: 92px 1fr 32px; }
  .opcao-ura .acao-ura { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding-bottom: 12px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav-label { display: none; }
  .sidebar-status { display: none; }
  .conteudo { padding: 22px 16px 40px; }
  .topo-barra { margin: -22px -16px 22px; padding: 0 16px; height: 60px; }
  .topo-quem { display: none; }
  .pagina-topo { flex-direction: column; align-items: flex-start; }
  .g2, .g3, .g4, .g5, .ligacao-grade, .opcoes-auth, .periodo { grid-template-columns: 1fr; }
  .horarios { grid-template-columns: repeat(2, 1fr); }
  .detalhe-grade, .meta-linha, .filtro-linha.duplo { grid-template-columns: 1fr; }
  .g-dois, .g-tres { grid-column: auto; }
  .linha-acao { grid-template-columns: 1fr; }
  .rel-kpis { grid-template-columns: 1fr; }
  .filtros-grade, .filtros-grade.ura { grid-template-columns: 1fr; }
  .tipos-campanha, .qual-linha { grid-template-columns: 1fr; }
  .pausa-linha { grid-template-columns: 1fr 110px; padding: 10px 0; border-bottom: 1px solid var(--borda); }
  .pausa-linha .qp-ordem, .pausa-cabeca { display: none; }
  .pausa-linha select { grid-column: 1; }
  .qp-ordem { flex-direction: row; }
  .editor-quem-grade { grid-template-columns: 1fr; }
  .duas-listas { grid-template-columns: 1fr; }
  .duas-listas .editor-lista { height: 230px; }
  .duas-listas-meio { flex-direction: row; justify-content: center; }
  .duas-listas-meio i { transform: rotate(90deg); }
  .busca-icone { min-width: 0; flex: 1 1 100%; }
  .bloq-consulta, .bloq-ddds-forms { grid-template-columns: 1fr; }
  .bloq-linha { flex-wrap: wrap; }
  .disc-filtros { grid-template-columns: 1fr; }
  .suc-medalhas { grid-template-columns: 1fr; }
  .suc-numero { font-size: 64px; }
  .podio { gap: 8px; }
  .suc-mural-topo { flex-direction: column; }
  .rel-rosquinha { flex-direction: column; align-items: stretch; }
  .rel-rosquinha svg { align-self: center; }
  .hero { padding: 30px 24px; }
  .hero h1 { font-size: 30px; }
}

/* relatório de produtividade: o dia a dia de cada consultor e a linha do tempo do dia */
.tabela-prod td { vertical-align: middle; }
.tabela-prod td small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--texto-3); }
.tabela-prod td small.estouro { color: #b91c1c; font-weight: 700; }
.tabela-prod .prod-dia { white-space: nowrap; font-weight: 700; }
.tabela-prod .prod-dia small, .lt-dia small { display: inline; margin-left: 3px; font-weight: 600; text-transform: capitalize; }
.tabela-prod .prod-turno { white-space: nowrap; }
.tabela-prod td:nth-child(8) { min-width: 200px; }  /* pausas: o tempo de cada motivo cabe em uma ou duas linhas */
.tabela-prod td:nth-child(2) { min-width: 180px; }
.tabela-prod .prod-turno i { font-size: 10px; color: var(--texto-3); margin: 0 3px; }
.prod-agora { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: rgba(16, 185, 129, .12); color: #047857; }
.prod-ocs { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; }
.prod-oc { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700;
  white-space: nowrap; background: var(--input); color: var(--texto-2); }
.prod-oc.vermelho { background: rgba(220, 38, 38, .09); color: #b91c1c; }
.prod-oc.laranja { background: rgba(245, 158, 11, .12); color: #b45309; }
.lt-dia { font-size: 15px; font-weight: 700; color: var(--texto-2); margin-left: 6px; }
.lt-nums { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 14px 0 18px; }
.lt-num { padding: 10px 12px; border-radius: 8px; background: var(--input); min-width: 0; }
.lt-num small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--texto-3); }
.lt-num b { display: block; font: 800 17px var(--fonte-titulo); margin-top: 2px; }
.lt-num em { display: block; font-style: normal; font-size: 11px; color: var(--texto-2); }
.estouro { color: #b91c1c; font-weight: 700; }
.lt-faixa { position: relative; height: 26px; border-radius: 8px; background: #eef1f6; overflow: hidden; }
.lt-faixa > span { position: absolute; top: 0; bottom: 0; }
.lt-faixa > span.estourou { box-shadow: inset 0 -4px 0 #dc2626; }
.lt-marca { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1px; background: #1e293b; border-radius: 2px; }
.lt-marca.pausa_estourada, .lt-marca.ligacao_derrubada { background: #dc2626; }
.lt-horas { position: relative; height: 18px; margin-top: 4px; font-size: 10.5px; color: var(--texto-3); }
.lt-horas span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.lt-horas span:first-child { transform: none; }
.lt-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 16px; font-size: 11.5px; color: var(--texto-2); }
.lt-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lt-filtros { margin-bottom: 10px; }
.lt-lista { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 4px; }
.lt-item { display: grid; grid-template-columns: 46px 24px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; }
.lt-item:hover { background: var(--hover); }
.lt-item b { display: block; font-size: 13px; }
.lt-item small { display: block; font-size: 11.5px; color: var(--texto-2); }
.lt-hora { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--texto-2); }
.lt-ponto { width: 12px; height: 12px; border-radius: 50%; justify-self: center; }
.lt-icone { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; background: var(--input); color: var(--texto-2); }
.lt-item.evento.entrou .lt-icone { background: rgba(16, 185, 129, .14); color: #047857; }
.lt-item.ligacao .lt-icone { background: rgba(249, 115, 22, .12); color: #c2410c; }
.lt-item.ruim { background: rgba(220, 38, 38, .05); }
.lt-item.ruim .lt-icone { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.lt-item.ruim b { color: #b91c1c; }
.lt-item.estourou { background: rgba(220, 38, 38, .05); }
.lt-sucesso { font-style: normal; font-size: 11px; font-weight: 700; color: #b45309; margin-left: 6px; }
@media (max-width: 900px) {
  .lt-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Relatório do discador (funil no topo): caixas brancas de canto reto, filtros primeiro, o caminho das ligações
   em setas, abas num seletor só e a lista com a busca no cabeçalho ===== */
#aba-relatorio-discador .pagina-topo { align-items: center; }
#aba-relatorio-discador .cartao, #aba-relatorio-discador .cartao-tabela { border-radius: 0; background: #fff; border-color: #e4e7ec;
  box-shadow: none; backdrop-filter: none; }
#aba-relatorio-discador .rel-filtros { padding: 14px 16px; gap: 12px; }
#aba-relatorio-discador .filtros-topo { padding-bottom: 0; border-bottom: 0; }
#aba-relatorio-discador .periodo-seg { padding: 3px; border-radius: 8px; background: #fff; border-color: #d0d5dd; }
#aba-relatorio-discador .periodo-seg .chip { padding: 6px 12px; border-radius: 8px; color: #344054; }
#aba-relatorio-discador .periodo-seg .chip.ativo { background: #eaf1ff; color: var(--azul); box-shadow: inset 0 0 0 1px rgba(0, 80, 240, .35); }
#aba-relatorio-discador .filtro-campo > span { font-weight: 700; letter-spacing: .4px; color: #667085; }
#aba-relatorio-discador .filtro-campo select, #aba-relatorio-discador .filtro-horario { height: 38px; background-color: #fff; border-color: #d0d5dd; }
/* o caminho das ligações: 4 setas, da discagem ao sucesso; ao lado, a fila, o tempo falando e os retornos */
.reld-funil-cartao { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; padding: 18px 20px; margin-bottom: 12px;
  background: #fff; border: 1px solid #e4e7ec; }
.reld-funil-esq { display: flex; flex-direction: column; min-width: 0; }
.reld-funil-esq h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 700; }
.reld-funil-esq h3 i { color: #f79009; }
.reld-funil { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reld-etapa { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 12px 18px 14px 28px; color: #fff;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); }
.reld-etapa:first-child { padding-left: 16px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.reld-etapa.e0 { background: #0039b8; }
.reld-etapa.e1 { background: #0050f0; }
.reld-etapa.e2 { background: #00a8f0; }
.reld-etapa.e3 { background: #12b76a; }
.reld-etapa small { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; opacity: .9; line-height: 1.3; }
.reld-etapa b { font: 800 26px/1.15 var(--fonte-titulo); }
.reld-etapa em { font-style: normal; font-size: 12px; line-height: 1.35; opacity: .92; }
.reld-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: center; }
.reld-lado div { min-width: 0; padding: 10px 12px; border-radius: 8px; background: #f9fafb; border: 1px solid #f0f2f5; }
.reld-lado small { display: block; font-size: 11px; color: #667085; }
.reld-lado b { display: block; font: 700 18px/1.3 var(--fonte-titulo); }
.reld-lado b.vermelho { color: #d92d20; }
.reld-lado em { display: block; font-style: normal; font-size: 11.5px; color: #98a2b3; }
.reld-resumo { display: flex; align-items: center; gap: 10px; padding: 11px 16px; margin-bottom: 18px; background: #fffaeb;
  border: 1px solid #fedf89; color: #93370d; font-size: 13.5px; font-weight: 500; }
.reld-resumo i { color: #f79009; }
/* Ligações / Modo detalhe num seletor só */
#aba-relatorio-discador .rel-abas { width: fit-content; max-width: 100%; gap: 4px; padding: 4px; background: #fff; border: 1px solid #d0d5dd;
  border-radius: 8px; }
#aba-relatorio-discador .rel-aba { padding: 7px 14px; border-radius: 8px; font-size: 13px; color: #344054; background: transparent; border: 0;
  box-shadow: none; }
#aba-relatorio-discador .rel-aba:hover { color: var(--azul); }
#aba-relatorio-discador .rel-aba span { color: #98a2b3; opacity: 1; }
#aba-relatorio-discador .rel-aba.ativa { background: var(--azul); color: #fff; }
#aba-relatorio-discador .rel-aba.ativa span { color: rgba(255, 255, 255, .8); }
/* a lista: busca no cabeçalho, chips claros, cabeçalho das colunas em preto e o rodapé com a contagem */
.reld-lista .tabela-topo { padding: 12px 18px; }
.reld-lista .tabela-topo h3 { align-items: baseline; gap: 10px; }
.reld-lista .tabela-topo h3 em { font-style: normal; font-size: 12.5px; font-weight: 500; color: #98a2b3; }
.reld-busca { display: flex; align-items: center; gap: 8px; width: 260px; height: 36px; padding: 0 12px; border: 1px solid #d0d5dd;
  border-radius: 8px; background: #fff; color: #667085; cursor: text; }
.reld-busca:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 80, 240, .12); }
.reld-busca input { all: unset; flex: 1; min-width: 0; font-size: 13px; color: var(--texto-1); }
.reld-lista .rel-lista-filtros { padding: 12px 18px; }
#reld-chips .chip { padding: 5px 11px; background: #fff; border-color: #d0d5dd; color: #344054; font-size: 12.5px; font-weight: 600; }
#reld-chips .chip b { margin-left: 5px; font-weight: 600; color: #667085; }
#reld-chips .chip.ativo { background: #eaf1ff; border-color: rgba(0, 80, 240, .4); color: var(--azul); }
#reld-chips .chip.ativo b { color: var(--azul); }
#aba-relatorio-discador .rel-lista-tabela th { padding-top: 10px; padding-bottom: 10px; background: #fcfcfd; color: #101828; font-weight: 700;
  letter-spacing: .4px; }
#aba-relatorio-discador .rel-lista-tabela th, #aba-relatorio-discador .rel-lista-tabela td { padding-left: 10px; padding-right: 10px; }
#aba-relatorio-discador .rel-lista-tabela td { padding-top: 10px; padding-bottom: 10px; font-size: 13px; border-bottom-color: #f0f2f5;
  white-space: nowrap; }
#aba-relatorio-discador .rel-lista-tabela td:nth-child(3) { white-space: normal; min-width: 120px; }
#aba-relatorio-discador .rel-lista-tabela td:nth-child(9) { white-space: normal; min-width: 150px; }
#aba-relatorio-discador .rel-lista-tabela td:first-child, #aba-relatorio-discador .rel-lista-tabela th:first-child { padding-left: 18px; }
.reld-qual { display: inline-block; max-width: 260px; padding: 2px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.45;
  white-space: normal; color: color-mix(in srgb, var(--cor) 70%, #101828); background: color-mix(in srgb, var(--cor) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--cor) 32%, #fff); }
.reld-pe { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 46px; padding: 8px 18px;
  border-top: 1px solid #e4e7ec; background: #fcfcfd; color: #667085; font-size: 12px; }
@media (max-width: 760px) {
  .rel-pagina-rodape { justify-content: center; }
  .rel-pagina-rodape .rel-contagem-pagina { width: 100%; text-align: center; }
}
/* telas mais estreitas: as setas ocupam a largura toda e os 4 números ficam numa linha embaixo */
@media (max-width: 1280px) {
  .reld-funil-cartao { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .reld-lado { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .reld-funil { grid-template-columns: 1fr 1fr; gap: 6px; }
  .reld-etapa, .reld-etapa:first-child { padding: 12px 14px; border-radius: 8px; clip-path: none; }
  .reld-lado { grid-template-columns: 1fr 1fr; }
  .reld-lista .tabela-topo { flex-wrap: wrap; }
  .reld-busca { width: 100%; }
}

/* ================= menu lateral recolhido (só os ícones) ================= */
.app { transition: grid-template-columns .2s ease; }
.menu-recolher { position: fixed; top: 23px; left: 257px; z-index: 45; width: 26px; height: 26px; padding: 0; border-radius: 50%; display: grid;
  place-items: center; cursor: pointer; background: #fff; border: 1px solid #d0d5dd; color: #475467; font-size: 11px;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .12); transition: left .2s ease, color .15s, border-color .15s; }
.menu-recolher:hover { color: var(--azul); border-color: rgba(0, 80, 240, .45); }
.menu-recolher i { transition: transform .2s ease; }
@media (max-width: 860px) { .menu-recolher { display: none; } }

.equipes-multiselecionar { min-width: 0; border: 0; padding: 0; }
.equipes-multiselecionar legend { margin-bottom: 7px; font-weight: 600; }
.equipes-multiselecionar-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 7px; }
.equipes-multiselecionar-lista label { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 8px 10px;
  border: 1px solid var(--borda); border-radius: var(--r-md); background: var(--cartao); cursor: pointer; }
.equipes-multiselecionar-lista label:has(input:checked) { border-color: var(--azul); background: rgba(0, 80, 240, .045); }
.equipes-multiselecionar-lista input { accent-color: var(--azul); }
.equipes-multiselecionar > small { display: block; margin-top: 7px; color: var(--texto-3); }

@media (min-width: 861px) {
  body.menu-recolhido .app { grid-template-columns: 76px 1fr; }
  body.menu-recolhido .menu-recolher { left: 63px; }
  body.menu-recolhido .menu-recolher i { transform: rotate(180deg); }
  body.menu-recolhido .sidebar { z-index: 35; padding: 0 12px 16px; overflow: visible; }
  body.menu-recolhido .logo { justify-content: center; }
  body.menu-recolhido .logo-nome, body.menu-recolhido .nav-label, body.menu-recolhido .nav-seta,
  body.menu-recolhido .nav-externo { display: none; }
  body.menu-recolhido .nav { position: relative; }
  body.menu-recolhido .nav > .nav-link { position: relative; justify-content: center; gap: 0; padding: 12px 0; font-size: 0; }
  body.menu-recolhido .nav > .nav-link > i:first-child { width: auto; font-size: 17px; }
  body.menu-recolhido .nav > .nav-link .selo-vivo { position: absolute; top: 3px; right: 3px; min-width: 17px; padding: 0 5px; font-size: 10px; line-height: 16px; }
  body.menu-recolhido .nav-grupo.tem-ativo { background: linear-gradient(135deg, rgba(0, 168, 240, 0.10), rgba(0, 80, 240, 0.08)); border-left-color: var(--azul-menu); }
  /* o nome do item numa caixinha clara ao passar o mouse */
  body.menu-recolhido .nav > .nav-link:not(.nav-grupo):hover::after,
  body.menu-recolhido .sidebar-status div:hover b { content: attr(data-rotulo); position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%);
    z-index: 60; display: block; padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid #e4e7ec; box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
    font: 600 12.5px var(--fonte); color: #101828; white-space: nowrap; pointer-events: none; }
  /* Ao vivo / Relatório / Configurações: a lista abre ao lado do ícone */
  body.menu-recolhido .nav-sub { display: none !important; position: absolute; left: calc(100% + 14px); top: var(--topo, 0); z-index: 60; width: 220px;
    margin: 0; padding: 6px; gap: 2px; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .16); }
  body.menu-recolhido .nav-grupo:hover + .nav-sub, body.menu-recolhido .nav-sub:hover,
  body.menu-recolhido .nav-sub:focus-within { display: flex !important; }
  body.menu-recolhido .nav-sub::before { content: ""; position: absolute; left: -16px; top: 0; width: 16px; height: 46px; }  /* ponte: o mouse passa do ícone para a lista */
  body.menu-recolhido .nav-sub::after { content: attr(data-titulo); order: -1; padding: 4px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: #667085; }
  body.menu-recolhido .nav-sub .nav-link { padding: 9px 12px; }
  /* os avisos de baixo: só as bolinhas (o texto aparece ao passar o mouse) */
  body.menu-recolhido .sidebar-status { padding: 14px 0 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  body.menu-recolhido .sidebar-status div { position: relative; }
  body.menu-recolhido .sidebar-status b, body.menu-recolhido .sidebar-status small { display: none; }
  body.menu-recolhido .ponto-status { width: 10px; height: 10px; }
  body.menu-recolhido .escuta-barra { left: calc(50% + 38px); width: min(1080px, calc(100vw - 76px - 32px)); }
}

/* Exportação de dados e gravações */
.exportacao-escolha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 20px 0 10px; }
.exportacao-opcao { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 16px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; color: var(--texto-1); text-align: left; cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.exportacao-opcao:hover { border-color: var(--azul); background: rgba(0, 80, 240, .035); transform: translateY(-1px); }
.exportacao-opcao > i { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; background: rgba(0, 80, 240, .08); color: var(--azul); font-size: 18px; }
.exportacao-opcao span { display: grid; gap: 5px; }
.exportacao-opcao small { color: var(--texto-3); font-size: 12px; }
.exportacao-confirmacao { padding-top: 16px; }
.exportacao-confirmacao h3 { margin-bottom: 12px; }
.exportacao-filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
.exportacao-filtro { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; }
.exportacao-filtro span { color: var(--texto-3); font-size: 11px; }
.exportacao-filtro b { color: var(--texto-1); font-size: 13px; }
.exportacao-status { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 99px; background: var(--input); color: var(--texto-2); font-size: 11px; font-weight: 700; white-space: nowrap; }
.exportacao-status.fila { background: rgba(0, 80, 240, .08); color: var(--azul); }
.exportacao-status.processando { background: rgba(245, 158, 11, .12); color: #a16207; }
.exportacao-status.concluido { background: rgba(16, 185, 129, .12); color: #047857; }
.exportacao-status.falhou, .exportacao-status.expirado { background: rgba(100, 116, 139, .12); color: #64748b; }
.exportacao-etapa { display: block; margin-top: 4px; color: var(--texto-3); font-size: 11px; }
.exportacao-sem-arquivo { color: var(--texto-3); }
@media (max-width: 720px) {
  .modal.modal-massa-usuarios { padding: 6px; }
  .modal.modal-massa-usuarios .modal-caixa { max-height: calc(100dvh - 12px); padding: 18px 14px; }
  .massa-explicacao { grid-template-columns: 1fr; }
  .massa-arquivo { grid-template-columns: 1fr; }
  .massa-arquivo > .btn { width: 100%; justify-content: center; }
  .massa-cabecalho-secao { align-items: flex-start; flex-direction: column; }
  .massa-cabecalho-secao .dica { text-align: left; }
}
@media (max-width: 600px) {
  .exportacao-escolha, .exportacao-filtros { grid-template-columns: 1fr; }
  .exportacao-opcao { min-height: 72px; }
}