/* ==========================================================================
   LineOPS · WhatsApp — console de operação
   Direção: painel de instrumentos industrial. Grafite, grade de pontos,
   tipografia condensada de sinalização, verde só para ação e "ao vivo".
   Cada carteira tem cor de identidade fixa (8 slots validados p/ daltonismo).
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #0a0d0e;
  --s1: #101517;
  --s2: #151b1d;
  --s3: #1b2326;
  --s4: #222c2f;
  --linha: #1f282b;
  --linha-2: #2b3639;
  --tinta: #e6ecea;
  --tinta-2: #9ba8a5;
  --tinta-3: #66736f;
  --acao: #00a884;
  --acao-2: #06cf9c;
  --acao-tinta: #03130e;
  --vivo: #25d366;
  /* status (reservados: sempre com ícone + rótulo) */
  --bom: #0ca30c;
  --atencao: #fab219;
  --serio: #ec835a;
  --critico: #d03b3b;
  /* séries dos gráficos (validadas na superfície --s1) */
  --enviadas: #3987e5;
  --recebidas: #d95926;
  --cinza-carteira: #6b7672;
  /* WhatsApp */
  --wa-fundo: #0b141a;
  --wa-saida: #005c4b;
  --wa-entrada: #202c33;
  --wa-tinta: #e9edef;
  --wa-hora: #8696a0;
  --wa-cab: #202c33;
  --wa-faixa: #182229;
  --wa-faixa-borda: #263239;
  --wa-hora-bolha: rgba(233,237,239,.6);
  --wa-midia: #b9c6cc;
  /* superfícies e texto que dependem do tema */
  --pontilhado: rgba(255,255,255,.035);
  --sobre: rgba(255,255,255,.018);
  --listra: rgba(255,255,255,.05);
  --topo-bg: rgba(16,21,23,.92);
  --celula-bg: rgba(16,21,23,.6);
  --borda-hover: #3a4649;
  --t-critico: #ff7a7a;
  --t-bom: #5fd35f;
  --t-info: #8fc0ff;
  --dica-bg: #05080a;
  --sombra: rgba(0,0,0,.5);
  --sombra-forte: rgba(0,0,0,.6);
  --veu: rgba(4,6,7,.72);

  --f-sinal: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-texto: 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --raio: 6px;
  --raio-p: 4px;
  --trilho: 56px;
  --topo: 38px;
}

/* Tema claro: mesmos papéis, valores para fundo branco (texto de status escurecido p/ contraste) */
:root[data-tema="claro"] {
  color-scheme: light;
  --bg: #eef1f0;
  --s1: #ffffff;
  --s2: #f6f8f7;
  --s3: #edf1ef;
  --s4: #e2e8e5;
  --linha: #e1e6e4;
  --linha-2: #cdd6d2;
  --tinta: #16211d;
  --tinta-2: #4b5a55;
  --tinta-3: #66746f;
  --acao-2: #00805f;
  --vivo: #1db954;
  --bom: #0a8a0a;
  --atencao: #a86d00;
  --serio: #c2552a;
  --critico: #c62828;
  --cinza-carteira: #8a9692;
  --wa-fundo: #efeae2;
  --wa-saida: #d9fdd3;
  --wa-entrada: #ffffff;
  --wa-tinta: #111b21;
  --wa-hora: #667781;
  --wa-cab: #f0f2f5;
  --wa-faixa: #f7f8fa;
  --wa-faixa-borda: #e3e7ea;
  --wa-hora-bolha: #667781;
  --wa-midia: #54656f;
  --pontilhado: rgba(0,0,0,.045);
  --sobre: rgba(0,0,0,.025);
  --listra: rgba(0,0,0,.06);
  --topo-bg: rgba(255,255,255,.92);
  --celula-bg: rgba(255,255,255,.75);
  --borda-hover: #b4c0bc;
  --t-critico: #c62828;
  --t-bom: #0a7d0a;
  --t-info: #1f5fae;
  --dica-bg: #ffffff;
  --sombra: rgba(20,32,28,.12);
  --sombra-forte: rgba(20,32,28,.18);
  --veu: rgba(20,30,28,.35);
}
/* rótulos e grade dos gráficos SVG seguem o tema */
.g-grade { stroke: var(--linha); }
.g-rot { fill: var(--tinta-3); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(var(--pontilhado) 1px, transparent 1px);
  background-size: 18px 18px;
  color: var(--tinta);
  font: 12.5px/1.35 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acao-2); }
::selection { background: rgba(0,168,132,.35); }
:focus-visible { outline: 2px solid var(--acao-2); outline-offset: 1px; }
/* Ícone: tamanho padrão; contextos específicos (botão, trilho, vazio...) sobrescrevem */
.ic { width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.painel > header .ic { width: 15px; height: 15px; color: var(--tinta-3); }
.painel > header .pilula svg { width: 11px; height: 11px; color: inherit; }
.mono { font-family: var(--f-mono); font-feature-settings: 'tnum'; }
.sinal { font-family: var(--f-sinal); letter-spacing: .04em; text-transform: uppercase; }
.fraco { color: var(--tinta-2); }
.mudo { color: var(--tinta-3); }
.oculto { display: none !important; }
.elipse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-flex { display: flex; align-items: center; gap: 8px; }
.cresce { flex: 1; min-width: 0; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--s4); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   Casca: trilho lateral + topo com osciloscópio
   -------------------------------------------------------------------------- */
.casca { display: grid; grid-template-columns: var(--trilho) 1fr; grid-template-rows: var(--topo) 1fr; height: 100vh; }
.trilho {
  grid-row: 1 / 3; background: var(--s1); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; align-items: stretch; padding: 6px 0; gap: 2px;
}
.marca {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 0 6px; margin-bottom: 4px; border-bottom: 1px solid var(--linha);
  text-decoration: none; font: 700 11px/1 var(--f-sinal); letter-spacing: .06em; color: var(--tinta);
}
.marca img { width: 36px; height: 36px; display: block; border-radius: 8px; box-shadow: 0 2px 8px var(--sombra); transition: transform .15s ease; }
.marca:hover img { transform: scale(1.05); }
.marca span { display: inline-flex; align-items: baseline; gap: 1.5px; }
.marca b { color: var(--vivo); font-weight: 700; }
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px;
  color: var(--tinta-3); text-decoration: none; border-left: 2px solid transparent;
  font: 600 10px/1 var(--f-sinal); letter-spacing: .06em; text-transform: uppercase; position: relative;
}
.nav-item svg { width: 17px; height: 17px; }
.nav-item:hover { color: var(--tinta); background: var(--s2); }
.nav-item.ativo { color: var(--acao-2); border-left-color: var(--acao); background: linear-gradient(90deg, rgba(0,168,132,.12), transparent); }
.nav-item .pino {
  position: absolute; top: 5px; right: 12px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px;
  background: var(--critico); color: #fff; font: 600 9px/15px var(--f-mono); text-align: center;
}
.trilho .rodape { margin-top: auto; }

.topo {
  grid-column: 2; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: var(--topo-bg); border-bottom: 1px solid var(--linha); backdrop-filter: blur(6px);
}
.topo h1 { margin: 0; font: 700 15px/1 var(--f-sinal); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.osc { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-left: 1px solid var(--linha); border-right: 1px solid var(--linha); height: 100%; }
.osc svg { display: block; }
.osc .rotulo { font: 600 10px/1.1 var(--f-sinal); letter-spacing: .06em; color: var(--tinta-3); text-transform: uppercase; }
.osc .valor { font: 500 15px/1 var(--f-mono); }
.kpis-topo { display: flex; gap: 14px; align-items: center; }
.kpi-mini { display: flex; flex-direction: column; gap: 1px; }
.kpi-mini .r { font: 600 9.5px/1 var(--f-sinal); letter-spacing: .07em; color: var(--tinta-3); text-transform: uppercase; }
.kpi-mini .v { font: 500 13px/1.1 var(--f-mono); }
.vivo-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 0 rgba(37,211,102,.6); animation: pulso 2.2s infinite; display: inline-block; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 0 0 7px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--tinta-2); white-space: nowrap; }

.palco { grid-column: 2; overflow: auto; position: relative; }
.tela { padding: 8px 10px 12px; min-height: 100%; animation: entra .28s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tela-cheia { padding: 0; height: 100%; }

/* --------------------------------------------------------------------------
   Peças
   -------------------------------------------------------------------------- */
.painel { background: var(--s1); border: 1px solid var(--linha); border-radius: var(--raio); min-width: 0; }
.painel > header {
  display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-bottom: 1px solid var(--linha); min-height: 26px;
  font: 600 11.5px/1.2 var(--f-sinal); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2);
}
.painel > header .acoes { margin-left: auto; display: flex; gap: 6px; align-items: center; text-transform: none; letter-spacing: 0; font-family: var(--f-texto); font-weight: 400; }
.painel .corpo { padding: 8px; }
.painel .corpo.sem-pad { padding: 0; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--raio-p);
  border: 1px solid var(--linha-2); background: var(--s2); color: var(--tinta); cursor: pointer; white-space: nowrap;
  font-size: 12px; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--s3); border-color: var(--borda-hover); }
a.btn { text-decoration: none; }
.btn svg { width: 14px; height: 14px; }
.btn.prim { background: var(--acao); border-color: var(--acao); color: var(--acao-tinta); font-weight: 600; }
.btn.prim:hover { background: var(--acao-2); }
.btn.perigo { color: var(--t-critico); border-color: rgba(208,59,59,.45); }
.btn.perigo:hover { background: rgba(208,59,59,.15); }
.btn.mini { height: 22px; padding: 0 7px; font-size: 11px; }
.btn.icone { width: 26px; padding: 0; justify-content: center; }
.btn.mini.icone { width: 22px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.grupo-btn { display: inline-flex; }
.grupo-btn .btn { border-radius: 0; margin-left: -1px; }
.grupo-btn .btn:first-child { border-radius: var(--raio-p) 0 0 var(--raio-p); margin-left: 0; }
.grupo-btn .btn:last-child { border-radius: 0 var(--raio-p) var(--raio-p) 0; }
.grupo-btn .btn.ativo { background: rgba(0,168,132,.18); border-color: var(--acao); color: var(--acao-2); z-index: 1; }

.campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campo > span { font: 600 10.5px/1 var(--f-sinal); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); }
input[type=text], input[type=password], input[type=number], input[type=search], input[type=date],
input[type=time], input[type=datetime-local], select, textarea {
  height: 26px; padding: 0 7px; border-radius: var(--raio-p); border: 1px solid var(--linha-2);
  background: var(--s3); outline: none; min-width: 0; width: 100%;
}
textarea { height: auto; padding: 7px 8px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--acao); }
input[type=checkbox] { accent-color: var(--acao); width: 14px; height: 14px; margin: 0; }
select { padding-right: 4px; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 6px; border-radius: 3px;
  background: var(--s3); border: 1px solid var(--linha-2); font-size: 11px; color: var(--tinta-2); white-space: nowrap; max-width: 100%;
}
.etiqueta .cor { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.etiqueta.carteira { color: var(--tinta); }
.pilula { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 9px; font: 600 10.5px/1 var(--f-sinal); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.pilula svg { width: 11px; height: 11px; }
/* Ajustes → Operadores: sinais de duplicado quebram linha em vez de alargar a tabela */
.sinais-dup { max-width: 220px; }
.sinais-dup .pilula { white-space: normal; height: auto; line-height: 1.3; padding: 2px 7px; text-transform: none; letter-spacing: 0; }
.st-bom { color: var(--t-bom); background: rgba(12,163,12,.14); }
.st-atencao { color: var(--atencao); background: rgba(250,178,25,.13); }
.st-serio { color: var(--serio); background: rgba(236,131,90,.14); }
.st-critico { color: var(--t-critico); background: rgba(208,59,59,.17); }
.st-neutro { color: var(--tinta-2); background: var(--s3); }
.st-info { color: var(--t-info); background: rgba(57,135,229,.15); }

.ponto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.ponto.on { background: var(--vivo); box-shadow: 0 0 6px rgba(37,211,102,.7); }
.ponto.off { background: var(--tinta-3); }
.ponto.ok { background: var(--bom); }
.ponto.falha { background: var(--critico); }
.ponto.nt { background: transparent; border: 1px solid var(--tinta-3); }

/* tabelas densas */
.tabela { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabela th {
  position: sticky; top: 0; z-index: 1; background: var(--s2); text-align: left; padding: 4px 7px;
  font: 600 10.5px/1 var(--f-sinal); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3);
  border-bottom: 1px solid var(--linha-2); white-space: nowrap;
}
.tabela td { padding: 3px 7px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela .etiqueta { height: 16px; }
.tabela tr:hover td { background: var(--sobre); }
.tabela tr.sel td { background: rgba(0,168,132,.08); }
.tabela tr.apagada td { opacity: .78; }
.tabela tr.apagada td:nth-child(2) { opacity: 1; font-weight: 500; }
.tabela tr.apagada td:nth-child(3) { opacity: 1; }
:root[data-tema="claro"] .tabela tr.apagada td { opacity: .82; }
:root[data-tema="claro"] .tabela tr.apagada td:nth-child(2),
:root[data-tema="claro"] .tabela tr.apagada td:nth-child(3) { opacity: 1; color: var(--tinta); }
.tabela .num { text-align: right; font-family: var(--f-mono); font-feature-settings: 'tnum'; width: 1%; white-space: nowrap; }
.tabela th.num { font-family: var(--f-sinal); }
/* Tabela que ocupa só o necessário: % em célula faria o Chrome esticá-la até o container */
.tabela.compacta { width: auto; }
.tabela.compacta .num { width: auto; }
.rolagem { overflow: auto; }

/* medidor fino x/limite */
.medidor { display: flex; align-items: center; gap: 6px; min-width: 90px; }
.medidor .trilha { flex: 1; height: 4px; background: var(--s4); border-radius: 2px; overflow: hidden; }
.medidor .barra { height: 100%; background: var(--enviadas); border-radius: 2px; }
.medidor .barra.alto { background: var(--atencao); }
.medidor .barra.cheio { background: var(--critico); }
.medidor .txt { font: 11px var(--f-mono); color: var(--tinta-2); white-space: nowrap; }

/* KPIs: uma faixa única com divisórias, não cards soltos */
.kpis { display: flex; background: var(--s1); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 8px; overflow-x: auto; }
.kpi { flex: 1 1 0; min-width: 104px; padding: 4px 10px; border-left: 1px solid var(--linha); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: baseline; }
.kpi:first-child { border-left: 0; }
.kpi.destaque { box-shadow: inset 2px 0 0 var(--acao); }
.kpi .r { font: 600 9.5px/1.2 var(--f-sinal); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; grid-column: 1 / -1; }
.kpi .v { font: 500 17px/1.15 var(--f-mono); margin-top: 1px; font-feature-settings: 'tnum'; white-space: nowrap; }
.kpi .s { font-size: 10.5px; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.grade { display: grid; gap: 8px; }
.vazio { padding: 26px 14px; text-align: center; color: var(--tinta-3); }
.vazio svg { width: 28px; height: 28px; opacity: .5; display: block; margin: 0 auto 8px; }

/* toast, modal, dica */
.toasts { position: fixed; right: 14px; bottom: 14px; z-index: 50; display: flex; flex-direction: column; gap: 6px; }
.toast { background: var(--s2); border: 1px solid var(--linha-2); border-left: 3px solid var(--acao); padding: 8px 12px; border-radius: var(--raio-p); max-width: 420px; box-shadow: 0 8px 24px var(--sombra); animation: entra .2s; }
.toast.erro { border-left-color: var(--critico); }
.toast.aviso { border-left-color: var(--atencao); }
.veu { position: fixed; inset: 0; background: var(--veu); z-index: 40; display: grid; place-items: center; animation: entra .15s; }
.modal { background: var(--s1); border: 1px solid var(--linha-2); border-radius: 8px; width: min(560px, 94vw); max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px var(--sombra-forte); }
.modal > header { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--linha); font: 700 15px/1 var(--f-sinal); letter-spacing: .05em; text-transform: uppercase; }
.modal > header .btn { margin-left: auto; }
.modal .corpo { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.modal footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--linha); }
.dica { position: fixed; z-index: 60; pointer-events: none; background: var(--dica-bg); border: 1px solid var(--linha-2); border-radius: var(--raio-p); padding: 6px 8px; font-size: 11.5px; box-shadow: 0 6px 18px var(--sombra-forte); white-space: nowrap; }
.dica .t { font: 600 10.5px/1.3 var(--f-sinal); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.dica .l { display: flex; align-items: center; gap: 6px; font-family: var(--f-mono); }
.dica .l i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.login { height: 100vh; display: grid; place-items: center; }
.login form {
  width: 340px; background: var(--s1); border: 1px solid var(--linha-2); border-radius: 10px; padding: 22px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px var(--sombra-forte); position: relative; overflow: hidden;
}
.login form::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--acao), transparent 70%); }
.login-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.login-logo { width: 52px; height: 52px; flex: none; border-radius: 12px; box-shadow: 0 4px 16px var(--sombra); }
.login h1 { margin: 0; font: 700 26px/1 var(--f-sinal); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); }
.login h1 em { color: var(--vivo); font-style: normal; }
.login p { margin: 4px 0 0; color: var(--tinta-2); font: 500 10.5px/1.2 var(--f-sinal); letter-spacing: .14em; text-transform: uppercase; }
.login .erro { color: var(--t-critico); font-size: 12px; min-height: 16px; }
.login input { height: 34px; }
.login .btn { height: 34px; justify-content: center; }

/* --------------------------------------------------------------------------
   Painel (visão geral)
   -------------------------------------------------------------------------- */
.visao { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 8px; align-items: start; }
.multiplos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0; }
.mini-graf { border-right: 1px solid var(--linha); padding: 4px 8px 2px; position: relative; }
.mini-graf::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; background: var(--cor, var(--cinza-carteira)); border-radius: 2px; }
.mini-graf .cab { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; padding-left: 4px; }
.mini-graf .cab b { font: 600 13px/1.2 var(--f-sinal); letter-spacing: .04em; text-transform: uppercase; }
.mini-graf .cab .tot { margin-left: auto; font: 11px var(--f-mono); color: var(--tinta-2); }
.legenda { display: flex; gap: 12px; align-items: center; font-size: 11.5px; color: var(--tinta-2); }
.legenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.alerta-linha { display: flex; gap: 7px; padding: 2px 8px; border-bottom: 1px solid var(--linha); align-items: center; min-width: 0; }
.alerta-linha:last-child { border-bottom: 0; }
.alerta-linha .t { font-weight: 500; white-space: nowrap; }
.alerta-linha .d { font-size: 11px; color: var(--tinta-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* KPI e mini-gráfico clicáveis: abrem o detalhe do dia / a tela da carteira */
a.kpi, a.mini-graf { color: inherit; text-decoration: none; cursor: pointer; }
a.mini-graf { display: block; }
a.kpi:hover, a.mini-graf:hover { background: var(--sobre); }
a.kpi .r::after { content: ' ›'; color: var(--acao-2); }
.mini-graf .cab .ic { width: 12px; height: 12px; color: var(--tinta-3); align-self: center; }
.mini-graf .cab.sub { justify-content: space-between; margin: -3px 0 1px; font: 10.5px/1.2 var(--f-mono); color: var(--tinta-3); }
.mini-graf.total .cab b { color: var(--acao-2); }
.tabela tfoot td { font-weight: 600; background: var(--s2); border-top: 1px solid var(--linha-2); }
.tabela td a { color: inherit; text-decoration: none; }
.tabela td a:hover .etiqueta, .tabela td a:hover { color: var(--acao-2); }
/* conciliação: uma linha por conferência, texto pode quebrar */
.concilia .alerta-linha { align-items: baseline; flex-wrap: wrap; padding: 3px 8px; }
.concilia .alerta-linha .t { flex: none; min-width: 124px; }
.concilia .alerta-linha .d { flex: 1 1 320px; white-space: normal; overflow: visible; font-size: 11.5px; color: var(--tinta-2); }

/* --------------------------------------------------------------------------
   Conversas (multi-painel estilo WhatsApp)
   -------------------------------------------------------------------------- */
.conversas { display: grid; grid-template-columns: 300px 1fr; height: 100%; }
.lista-conv { border-right: 1px solid var(--linha); background: var(--s1); display: flex; flex-direction: column; min-height: 0; }
.lista-conv .filtros { padding: 6px; display: flex; flex-direction: column; gap: 5px; border-bottom: 1px solid var(--linha); }
.chips-cart { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.chip-cart {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; flex: none;
  border: 1px solid var(--linha-2); background: var(--s2); cursor: pointer; font-size: 11.5px; color: var(--tinta-2); white-space: nowrap;
}
.chip-cart.ativo { border-color: var(--cor, var(--acao)); color: var(--tinta); background: color-mix(in srgb, var(--cor, var(--acao)) 16%, var(--s2)); }
.chip-cart .cor { width: 7px; height: 7px; border-radius: 50%; background: var(--cor, var(--cinza-carteira)); }
.itens-conv { overflow-y: auto; flex: 1; }
.item-conv {
  display: grid; grid-template-columns: minmax(0, 1fr); padding: 3px 8px 3px 7px; cursor: pointer; align-items: center;
  border-bottom: 1px solid var(--linha); border-left: 3px solid var(--cor, transparent); position: relative;
}
.item-conv:hover { background: var(--s2); }
.item-conv.aberta { background: rgba(0,168,132,.07); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 600 12px/1 var(--f-sinal); letter-spacing: .03em; color: #fff;
  background: color-mix(in srgb, var(--cor, var(--cinza-carteira)) 55%, #0b0f10);
}
.item-conv .l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.item-conv .nome { font-weight: 500; }
.item-conv .hora { margin-left: auto; font-size: 10.5px; color: var(--tinta-3); white-space: nowrap; }
.item-conv .l2 { font-size: 11.5px; color: var(--tinta-2); }
.item-conv .tel { font: 10.5px var(--f-mono); color: var(--tinta-3); }
.item-conv .cont { font: 10px var(--f-mono); background: var(--s4); border-radius: 8px; padding: 1px 5px; color: var(--tinta-2); }
.item-conv .abrir-novo { position: absolute; right: 6px; bottom: 6px; opacity: 0; }
.item-conv:hover .abrir-novo { opacity: 1; }

.area-paineis { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.barra-paineis { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--linha); background: var(--s1); }
.paineis { flex: 1; display: grid; gap: 1px; background: var(--linha); min-height: 0; }
.paineis.c1 { grid-template-columns: 1fr; }
.paineis.c2 { grid-template-columns: 1fr 1fr; }
.paineis.c3 { grid-template-columns: 1fr 1fr 1fr; }
.paineis.c4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.paineis .maximizado { grid-column: 1 / -1; grid-row: 1 / -1; z-index: 2; }
.painel-wa { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--wa-fundo); }
.painel-wa header {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--wa-cab); min-height: 46px;
  border-top: 2px solid var(--cor, var(--cinza-carteira));
}
.painel-wa header .avatar { width: 30px; height: 30px; font-size: 12px; }
.painel-wa .quem { min-width: 0; flex: 1; }
.painel-wa .quem .n { font-weight: 500; color: var(--wa-tinta); }
.painel-wa .quem .s { font-size: 11px; color: var(--wa-hora); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.painel-wa .ficha {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 3px 12px; padding: 5px 10px;
  background: var(--wa-faixa); border-bottom: 1px solid var(--wa-faixa-borda); font-size: 11.5px;
}
.painel-wa .ficha div > span { display: block; font: 600 9.5px/1.2 var(--f-sinal); letter-spacing: .07em; text-transform: uppercase; color: var(--wa-hora); }
.painel-wa .ficha div > b { font-weight: 500; font-family: var(--f-mono); color: var(--wa-tinta); }
.mensagens {
  flex: 1; overflow-y: auto; padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 2px;
  background-color: var(--wa-fundo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.028' stroke-width='1.2'%3E%3Ccircle cx='18' cy='20' r='7'/%3E%3Cpath d='M70 14h16v12H70z'/%3E%3Cpath d='M30 70l10 10-10 10'/%3E%3Ccircle cx='96' cy='84' r='9'/%3E%3Cpath d='M58 100q8-10 16 0'/%3E%3Cpath d='M98 38l6 6m0-6l-6 6'/%3E%3C/g%3E%3C/svg%3E");
}
.paineis.c1 .mensagens, .paineis .maximizado .mensagens { padding: 10px 6% 14px; }
.sep-data { align-self: center; margin: 8px 0 4px; padding: 3px 9px; border-radius: 6px; background: var(--wa-faixa); color: var(--wa-hora); font-size: 11px; }
.bolha {
  max-width: 85%; padding: 5px 7px 4px 8px; border-radius: 7px; color: var(--wa-tinta); font-size: 13px; line-height: 1.38;
  white-space: pre-wrap; word-wrap: break-word; position: relative; box-shadow: 0 1px .5px rgba(0,0,0,.25);
}
.bolha.ent { align-self: flex-start; background: var(--wa-entrada); border-top-left-radius: 0; }
.bolha.sai { align-self: flex-end; background: var(--wa-saida); border-top-right-radius: 0; }
.bolha + .bolha.ent, .bolha + .bolha.sai { margin-top: 1px; }
.bolha.ent + .bolha.sai, .bolha.sai + .bolha.ent { margin-top: 6px; }
.bolha .h { float: right; margin: 6px 0 -3px 10px; font-size: 10.5px; color: var(--wa-hora-bolha); display: inline-flex; gap: 3px; align-items: center; }
.bolha .midia { display: inline-flex; align-items: center; gap: 6px; color: var(--wa-midia); font-style: italic; }
.bolha .midia svg { width: 14px; height: 14px; }
.vazio-paineis { display: grid; place-items: center; height: 100%; color: var(--tinta-3); text-align: center; padding: 20px; }
.vazio-paineis .grade-fantasma { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 120px; margin: 0 auto 12px; }
.vazio-paineis .grade-fantasma i { height: 52px; border: 1px dashed var(--linha-2); border-radius: 4px; }

/* --------------------------------------------------------------------------
   Ação em massa
   -------------------------------------------------------------------------- */
.massa { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(330px, .9fr); gap: 8px; align-items: start; }
.massa-col { display: grid; gap: 8px; min-width: 0; align-content: start; }
.passo { font: 700 22px/1 var(--f-mono); color: var(--acao); margin-right: 2px; }
.soltar {
  border: 1.5px dashed var(--linha-2); border-radius: var(--raio); padding: 16px; text-align: center; cursor: pointer;
  color: var(--tinta-2); transition: border-color .15s, background .15s;
}
.soltar.sobre, .soltar:hover { border-color: var(--acao); background: rgba(0,168,132,.06); }
.soltar svg { width: 24px; height: 24px; display: block; margin: 0 auto 6px; color: var(--acao-2); }
.soltar b { color: var(--tinta); }
.layout-arquivo { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.layout-arquivo code { font: 11px var(--f-mono); background: var(--s3); border: 1px solid var(--linha-2); padding: 1px 6px; border-radius: 3px; color: var(--tinta); }
.soltar:not(.carregado) { min-height: 200px; display: grid; place-content: center; }
.soltar.carregado { display: flex; align-items: center; gap: 8px; padding: 6px 10px; text-align: left; }
.soltar.carregado svg { width: 16px; height: 16px; margin: 0; }
.soltar.carregado .layout-arquivo { display: none; }
.mapa-colunas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.resumo-arquivo { display: flex; gap: 6px; flex-wrap: wrap; }
.vars { display: flex; gap: 4px; flex-wrap: wrap; }
.vars button { height: 22px; padding: 0 7px; border-radius: 3px; border: 1px solid var(--linha-2); background: var(--s3); cursor: pointer; font: 11px var(--f-mono); color: var(--acao-2); }
.vars button:hover { border-color: var(--acao); }
.previas { background: var(--wa-fundo); border-radius: var(--raio-p); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-height: 120px; }
.previas .bolha { max-width: 100%; }
.previas .para { font-size: 10.5px; color: var(--wa-hora); align-self: flex-end; font-family: var(--f-mono); }
.ops-sel { max-height: min(46vh, 420px); overflow: auto; border: 1px solid var(--linha); border-radius: var(--raio-p); }
.op-linha { display: grid; grid-template-columns: 16px 9px minmax(0, 1fr) auto; gap: 7px; align-items: start; padding: 5px 8px; border-bottom: 1px solid var(--linha); cursor: pointer; font-size: 12px; }
.op-linha > input, .op-linha > .ponto { margin-top: 3px; }
.op-linha .quem { font-weight: 500; overflow-wrap: anywhere; }
.op-linha .det { display: block; font: 400 11px/1.35 var(--f-texto); color: var(--tinta-3); }
.op-linha .pode { font: 11px var(--f-mono); color: var(--tinta-3); white-space: nowrap; }
.op-linha .pode b { color: var(--tinta); font-weight: 500; }
.op-linha.inativo { cursor: not-allowed; opacity: .6; }
.op-linha.inativo:hover { background: none; }
/* conferência do arquivo: faixa única com divisórias (mesmo padrão dos KPIs) */
.conferencia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio-p); overflow: hidden; }
.conferencia > div { background: var(--s2); padding: 4px 8px; min-width: 0; }
.conferencia span { display: block; font: 600 9.5px/1.2 var(--f-sinal); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conferencia b { font: 500 15px/1.25 var(--f-mono); font-feature-settings: 'tnum'; }
.conferencia .bom b { color: var(--t-bom); }
.conferencia .atencao b { color: var(--atencao); }
.conferencia .serio b { color: var(--serio); }
.conferencia .critico b { color: var(--t-critico); }
.aviso-linha { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: var(--raio-p); font-size: 12px; line-height: 1.35; }
.aviso-linha > svg { flex: none; }
.teste-campos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px; }
.op-linha:last-child { border-bottom: 0; }
.op-linha:hover { background: var(--s2); }
.estimativa { background: var(--s2); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 8px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.estimativa div span { display: block; font: 600 10px/1.2 var(--f-sinal); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); }
.estimativa div b { font: 500 14px var(--f-mono); }
.estimativa .largo { grid-column: 1 / -1; border-top: 1px solid var(--linha); padding-top: 6px; }
.estimativa .largo b { display: block; font-size: 13px; }
.estimativa .largo span { text-transform: none; letter-spacing: 0; font: 11px/1.35 var(--f-texto); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Programação (linha do tempo por carteira)
   -------------------------------------------------------------------------- */
.agenda { display: grid; grid-template-columns: 130px repeat(7, 1fr); font-size: 11px; border: 1px solid var(--linha); border-radius: var(--raio-p); overflow: hidden; }
.agenda .cab-dia { padding: 5px 6px; background: var(--s2); border-left: 1px solid var(--linha); font: 600 11px/1.2 var(--f-sinal); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.agenda .cab-dia.hoje { color: var(--acao-2); }
.agenda .faixa { padding: 3px 6px; border-top: 1px solid var(--linha); display: flex; align-items: center; gap: 6px; background: var(--s1); font-weight: 500; min-height: 26px; }
.agenda .celula { border-top: 1px solid var(--linha); border-left: 1px solid var(--linha); padding: 3px; display: flex; flex-direction: column; gap: 3px; min-height: 26px; background: var(--celula-bg); }
.bloco-ag { border-radius: 3px; padding: 2px 5px; background: color-mix(in srgb, var(--cor, var(--cinza-carteira)) 22%, var(--s2)); border-left: 2px solid var(--cor, var(--cinza-carteira)); cursor: pointer; line-height: 1.25; }
.bloco-ag b { font-family: var(--f-mono); font-weight: 500; }
.bloco-ag.pausada { opacity: .55; background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--listra) 5px 10px); }

/* --------------------------------------------------------------------------
   Motor
   -------------------------------------------------------------------------- */
.motor { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
.progresso { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--s4); gap: 1px; min-width: 120px; }
.progresso i { display: block; height: 100%; }

/* --------------------------------------------------------------------------
   Proxies (quadro com arrastar e soltar)
   -------------------------------------------------------------------------- */
.quadro { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.coluna {
  flex: 0 0 258px; background: var(--s1); border: 1px solid var(--linha); border-radius: var(--raio);
  display: flex; flex-direction: column; max-height: calc(100vh - 210px); border-top: 2px solid var(--cor, var(--linha-2));
}
.coluna.vazia { flex-basis: 170px; opacity: .75; }
.coluna.vazia > header .n { display: none; }
.coluna > header { padding: 7px 8px; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 4px; }
.coluna > header .t { display: flex; align-items: center; gap: 6px; font: 600 13px/1.2 var(--f-sinal); letter-spacing: .05em; text-transform: uppercase; }
.coluna > header .n { font: 11px var(--f-mono); color: var(--tinta-3); display: flex; gap: 8px; }
.coluna .corpo-col { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.zona { border: 1px dashed transparent; border-radius: var(--raio-p); padding: 4px; min-height: 30px; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; transition: background .12s, border-color .12s; }
.zona.sobre { border-color: var(--acao); background: rgba(0,168,132,.09); }
.zona-titulo { font: 600 10px/1 var(--f-sinal); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); padding: 2px 2px 0; }
.slot-op { border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 3px 6px; background: var(--s2); display: flex; flex-direction: column; gap: 3px; }
.slot-op .q { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.slot-op .q .v { margin-left: auto; font: 10px var(--f-mono); color: var(--tinta-3); }
.slot-op .zona { min-height: 28px; padding: 2px; border-color: var(--linha-2); }
.slot-op .zona:not(:empty):not(.sobre) { border-color: transparent; padding: 0; min-height: 0; }
.slot-op .zona:empty::after { content: 'sem proxy — solte aqui'; font-size: 10.5px; color: var(--tinta-3); padding: 4px; font-style: italic; }
.chip-px {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 6px; border-radius: 3px;
  background: var(--s3); border: 1px solid var(--linha-2); cursor: grab; font: 11px var(--f-mono); user-select: none; max-width: 100%;
}
.chip-px:active { cursor: grabbing; }
.chip-px.sel { border-color: var(--acao-2); background: rgba(0,168,132,.16); box-shadow: 0 0 0 1px var(--acao) inset; }
.chip-px .tp { font: 700 9px/1 var(--f-sinal); letter-spacing: .05em; padding: 2px 3px; border-radius: 2px; background: var(--s4); color: var(--tinta-2); }
.chip-px .lat { color: var(--tinta-3); }
.chip-px .aviso { color: var(--atencao); display: inline-flex; }
.chip-px .aviso.crit { color: var(--t-critico); }
.chip-px .aviso svg { width: 12px; height: 12px; }
.chip-px.inativa { opacity: .45; text-decoration: line-through; }

/* --------------------------------------------------------------------------
   Anti-ban
   -------------------------------------------------------------------------- */
.antiban { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 8px; align-items: start; }
.score { display: flex; align-items: center; gap: 7px; min-width: 120px; }
.score .trilha { flex: 1; height: 6px; background: var(--s4); border-radius: 3px; overflow: hidden; }
.score .trilha i { display: block; height: 100%; border-radius: 3px; }
.score b { font: 500 12px var(--f-mono); width: 24px; text-align: right; }
.fator { padding: 4px 8px; border-bottom: 1px solid var(--linha); display: grid; grid-template-columns: 16px 1fr; gap: 0 8px; }
.fator svg { width: 14px; height: 14px; margin-top: 2px; }
.fator .t { font-weight: 500; }
.fator .d { grid-column: 2; font-size: 11.5px; color: var(--tinta-2); }
.fator .r { grid-column: 2; font-size: 11.5px; color: var(--acao-2); }

/* --------------------------------------------------------------------------
   Configurações
   -------------------------------------------------------------------------- */
.cores { display: flex; gap: 3px; }
.cores button { width: 15px; height: 15px; border-radius: 3px; border: 1px solid transparent; cursor: pointer; padding: 0; }
.cores button.sel { border-color: #fff; box-shadow: 0 0 0 1px #000 inset; }
.dias { display: inline-flex; gap: 2px; }
.dias button { width: 19px; height: 20px; padding: 0; border-radius: 3px; border: 1px solid var(--linha-2); background: var(--s3); color: var(--tinta-3); cursor: pointer; font: 600 10px/1 var(--f-sinal); }
.dias button.on { background: rgba(0,168,132,.2); border-color: var(--acao); color: var(--acao-2); }
.tabela input[type=number] { width: 58px; height: 22px; text-align: right; font-family: var(--f-mono); }
.tabela input[type=time] { width: 96px; height: 22px; }
.tabela input[type=date] { width: 128px; height: 22px; }
.tabela input[type=text] { height: 22px; }

@media (max-width: 1280px) {
  .massa { grid-template-columns: 1fr 1fr; }
  .massa > :last-child { grid-column: 1 / -1; }
  .visao, .antiban { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
   Celular e tablet: menu vira barra inferior, uma coluna, rolagem lateral só
   DENTRO dos painéis (nunca a página inteira)
   -------------------------------------------------------------------------- */
.so-mobile { display: none !important; }
@media (max-width: 900px) {
  .so-mobile { display: inline-flex !important; }
  .so-desktop { display: none !important; }
  .casca { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--topo) minmax(0, 1fr) auto; height: 100vh; height: 100dvh; }
  .topo { grid-column: 1; padding: 0 10px; gap: 10px; }
  .kpis-topo, .osc { display: none; }
  .usuario span { display: none; }
  .palco { grid-column: 1; grid-row: 2; }
  .trilho {
    grid-row: 3; grid-column: 1; flex-direction: row; align-items: stretch; overflow-x: auto; overflow-y: hidden;
    padding: 0 0 env(safe-area-inset-bottom); gap: 0; border-right: 0; border-top: 1px solid var(--linha); scrollbar-width: none;
  }
  .trilho::-webkit-scrollbar { display: none; }
  .marca { display: none; }
  .nav-item { flex: 0 0 auto; min-width: 66px; padding: 7px 6px 6px; border-left: 0; border-top: 2px solid transparent; }
  .nav-item.ativo { border-left-color: transparent; border-top-color: var(--acao); background: linear-gradient(180deg, rgba(0,168,132,.14), transparent); }
  .nav-item .pino { top: 3px; right: 14px; }
  .trilho .rodape { margin-top: 0; margin-left: auto; display: flex; }
  .painel > header { flex-wrap: wrap; row-gap: 4px; }
  .painel > header .acoes { flex-wrap: wrap; justify-content: flex-end; }
  .tabela td, .tabela th { white-space: nowrap; }
  .tela .grade[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .visao, .antiban, .massa, .motor { grid-template-columns: minmax(0, 1fr); }
  .mapa-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teste-campos { grid-template-columns: minmax(0, 1fr); }
  .painel > .corpo { overflow-x: auto; }
  .agenda { grid-template-columns: 104px repeat(7, minmax(92px, 1fr)); overflow-x: auto; }
  .quadro .coluna { flex: 1 1 100%; max-height: none; }
  .quadro .coluna.vazia { flex: 1 1 calc(50% - 4px); }
  /* conversas: uma de cada vez; a lista some quando há conversa aberta */
  .conversas { grid-template-columns: minmax(0, 1fr); }
  .area-paineis { display: none; }
  .conversas.com-painel .lista-conv { display: none; }
  .conversas.com-painel .area-paineis { display: flex; }
  .barra-paineis { display: none; }
  .paineis.c2, .paineis.c3, .paineis.c4 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .mensagens, .paineis.c1 .mensagens { padding: 8px 10px 12px; }
  .bolha { max-width: 88%; }
  .tabela.empilha thead { display: none; }
  .tabela.empilha, .tabela.empilha tbody { display: block; }
  .tabela.empilha tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 10px; border-bottom: 1px solid var(--linha-2); }
  .tabela.empilha td { display: block; padding: 0; border: 0; white-space: normal; text-align: left; width: auto; }
  .tabela.empilha td.cab-cartao, .tabela.empilha td.largo { grid-column: 1 / -1; }
  .tabela.empilha td[data-r]::before { content: attr(data-r); display: block; margin-bottom: 3px; font: 600 9.5px/1.2 var(--f-sinal); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); }
  .tabela.empilha .cores { flex-wrap: wrap; }
  .tabela.empilha td.duplo { grid-column: span 2; }
  .tabela.empilha input[type=time] { width: 124px; }
  .tabela.empilha td.largo .btn { width: 100%; justify-content: center; }
}

/* Toque: alvo mínimo confortável e fonte de 16px nos campos (abaixo disso o iPhone dá zoom ao focar) */
@media (pointer: coarse) {
  .btn { height: 36px; padding: 0 12px; }
  .btn.mini { height: 32px; padding: 0 10px; font-size: 12px; }
  .btn.icone { width: 36px; }
  .btn.mini.icone { width: 32px; }
  input[type=text], input[type=password], input[type=number], input[type=search], input[type=date],
  input[type=time], input[type=datetime-local], select { height: 38px; font-size: 16px; }
  textarea { font-size: 16px; }
  .tabela input[type=number], .tabela input[type=time], .tabela input[type=date], .tabela input[type=text] { height: 34px; font-size: 16px; }
  .tabela input[type=number] { width: 70px; }
  .tabela input[type=time] { width: 104px; }
  .tabela input[type=date] { width: 150px; }
  input[type=checkbox] { width: 24px; height: 24px; }
  .chip-cart { height: 32px; padding: 0 12px; }
  .chip-px { height: 32px; padding: 0 8px; }
  .cores { gap: 6px; }
  .dias { gap: 4px; }
  .dias button { width: 30px; height: 32px; }
  .vars button { height: 32px; padding: 0 10px; }
  .item-conv { padding-top: 9px; padding-bottom: 9px; }
  .op-linha { padding: 9px 8px; grid-template-columns: 24px 9px minmax(0, 1fr) auto; }
  .op-linha > .ponto { margin-top: 8px; }
  .alerta-linha { padding: 7px 8px; }
  .tabela td { padding-top: 7px; padding-bottom: 7px; }
  .zona { min-height: 40px; }
  .quadro.selecionando .zona { border-color: rgba(6,207,156,.55); }
  .cores button { width: 30px; height: 30px; }
  .quadro.selecionando .slot-op { cursor: pointer; border-color: rgba(6,207,156,.35); }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* --------------------------------------------------------------------------
   Mídia Real nas Conversas (v1.8.0): Imagens, Áudios e Documentos
   -------------------------------------------------------------------------- */
.conteudo-midia { margin-top: 4px; margin-bottom: 4px; display: block; max-width: 100%; }
.midia-thumb { max-width: 260px; max-height: 260px; border-radius: 6px; cursor: pointer; object-fit: cover; display: block; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
.midia-thumb:hover { transform: scale(1.02); filter: brightness(1.05); }
.legenda-midia { font-size: 13px; margin-top: 4px; word-break: break-word; }
.midia-audio-player { width: 250px; height: 36px; border-radius: 20px; outline: none; margin-top: 2px; }
.doc-anexo-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px;
  background: rgba(0,0,0,.06); text-decoration: none; color: inherit; font-size: 12.5px;
  border: 1px solid rgba(0,0,0,.08); max-width: 100%; transition: background .15s;
}
.doc-anexo-link:hover { background: rgba(0,0,0,.12); }
.doc-nome { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.doc-btn-baixar { font-size: 11px; padding: 2px 6px; border-radius: 3px; background: var(--acao); color: #fff; font-weight: 600; }
.btn-ligar-wa { background: #00a884; color: #fff; font-weight: 600; border-color: transparent; }
.btn-ligar-wa:hover { background: #008f6f; color: #fff; }

/* Modal de Visualização de Imagem / Lightbox */
.modal-midia-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 99999;
  display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px);
}
.modal-midia-conteudo { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; }
.modal-midia-img { max-width: 100%; max-height: 82vh; border-radius: 8px; object-fit: contain; box-shadow: 0 4px 20px rgba(0,0,0,.5); }
.fechar-modal-midia {
  position: absolute; top: -38px; right: 0; background: none; border: none;
  color: #fff; font-size: 32px; cursor: pointer; line-height: 1; padding: 4px;
}
.modal-midia-acoes { margin-top: 10px; display: flex; gap: 10px; }

/* --------------------------------------------------------------------------
   Front-End Upgrade (v1.8.1): Painéis da Coluna Direita, Funil, Chamadas WebRTC
   -------------------------------------------------------------------------- */
.coluna-lateral {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Card Rollout da Extensão */
.card-rollout-ext {
  background: var(--s1);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 12px;
}
.rollout-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rollout-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.badge-v {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 168, 132, 0.14);
  color: #008f6f;
}
.badge-v.cand {
  background: rgba(230, 145, 56, 0.16);
  color: #b45f06;
}
.sub-rollout {
  font-size: 11.5px;
  color: var(--tinta-2);
  margin-top: 1px;
}
.rollout-progresso-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.barra-fundo {
  flex: 1;
  height: 6px;
  background: var(--s3, rgba(0,0,0,0.08));
  border-radius: 3px;
  overflow: hidden;
}
.barra-preenchida {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.pct-rollout {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--tinta-2);
  white-space: nowrap;
}

/* Widget Funil Anti-Ban */
.widget-funil {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
}
.funil-etapa {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.funil-rotulo {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
}
.funil-barra {
  height: 6px;
  background: var(--s3, rgba(0,0,0,0.08));
  border-radius: 3px;
  overflow: hidden;
}
.funil-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.funil-fill.ping { background: #3987e5; }
.funil-fill.apto { background: #00a884; }
.funil-fill.proposta { background: #d95926; }
.funil-sub {
  font-size: 11px;
  color: var(--tinta-3);
  line-height: 1.25;
}

/* Widget Últimas Chamadas */
.lista-chamadas-recentes {
  display: flex;
  flex-direction: column;
}
.item-chamada-recente {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.item-chamada-recente:last-child {
  border-bottom: none;
}
.chamada-rec-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.chamada-rec-tel {
  font-family: var(--f-mono);
  font-size: 12px;
}
.chamada-rec-dur {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.badge-cpc {
  background: rgba(0, 168, 132, 0.16);
  color: #008f6f;
  font-size: 9.5px;
  padding: 1px 4px;
  border-radius: 3px;
}
.chamada-rec-sub {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--tinta-2);
}
.chamada-rec-player {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.audio-mini {
  height: 28px;
  flex: 1;
}

/* Filtros da Tabela de Operadores */
.ops-filtros-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.input-busca-ops {
  width: 160px;
}
.aviso-filtro-ativo {
  background: rgba(57, 135, 229, 0.08);
  border-top: 1px solid var(--linha);
  padding: 4px 10px;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--acao);
}

/* Linha de alerta clicável */
.alerta-linha.clicavel {
  cursor: pointer;
  transition: background 0.15s ease;
}
.alerta-linha.clicavel:hover {
  background: rgba(0, 0, 0, 0.04);
}
:root[data-tema="escuro"] .alerta-linha.clicavel:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Card Destacado de Auditoria de Chamada WebRTC nas Conversas */
.card-chamada-auditoria {
  background: rgba(0, 168, 132, 0.06);
  border: 1px solid rgba(0, 168, 132, 0.35);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
}
.chamada-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.chamada-titulo-linha {
  display: flex;
  align-items: center;
  gap: 6px;
}
.icone-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 168, 132, 0.15);
  color: #008f6f;
  flex-shrink: 0;
}
.chamada-player-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chamada-audio {
  width: 100%;
  height: 32px;
  border-radius: 16px;
}
.chamada-velocidades {
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-speed {
  padding: 1px 6px;
  font-size: 10.5px;
  font-family: var(--f-mono);
  border-radius: 4px;
}
.btn-speed.ativo {
  background: var(--acao);
  color: #fff;
  border-color: transparent;
}
.btn-baixar-audio {
  font-size: 11px;
  padding: 2px 7px;
  margin-left: auto;
}

/* Badges e Chips das Conversas */
.badge-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-left: 3px;
}
.filtro-chips-secundario {
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--linha);
  background: var(--s2);
}
.chip-sec {
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 12px;
  font-size: 11px;
  padding: 2px 8px;
  color: var(--tinta-2);
  cursor: pointer;
  white-space: nowrap;
}
.chip-sec:hover {
  background: var(--s3);
  color: var(--tinta);
}
.chip-sec.ativo {
  background: var(--acao);
  color: #fff;
  border-color: transparent;
}

/* v2.0: complementos da Visão Geral e Conversas */
.painel > header:has(.ops-filtros-bar) { flex-wrap: wrap; row-gap: 6px; }
.ops-filtros-bar { flex-wrap: wrap; justify-content: flex-end; }
.ops-filtros-bar .grupo-btn .btn.ativo { background: var(--acao); color: #fff; border-color: transparent; }
.ops-filtros-bar select, .ops-filtros-bar input[type=search] { height: 24px; font-size: 11.5px; padding: 0 6px; }
.aviso-filtro-ativo .btn { margin-left: auto; }
.alerta-linha.clicavel.ativo { background: rgba(57, 135, 229, .12); box-shadow: inset 3px 0 0 var(--acao); }
.alerta-linha.clicavel .d { margin-left: auto; }
.funil-barra.split { display: flex; }
.funil-fill.retida { background: repeating-linear-gradient(45deg, rgba(201,133,0,.55) 0 4px, rgba(201,133,0,.25) 4px 8px); }
.funil-conv { font-family: var(--f-mono); font-size: 11px; color: var(--tinta-2); }
.rollout-corpo { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.rollout-linha { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rollout-linha .rot { width: 92px; flex: none; color: var(--tinta-2); }
.rollout-ok { font-size: 11.5px; color: var(--t-bom); display: flex; gap: 5px; align-items: center; }
.item-chamada-recente a.abrir-conv { font-size: 11px; white-space: nowrap; }
.chamada-rec-nome { font-weight: 500; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilula-estagio { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; white-space: nowrap; }
.pilula-estagio.liberada { background: rgba(0, 168, 132, .15); color: #00805f; border: 1px solid rgba(0, 168, 132, .4); }
.pilula-estagio.retida { background: rgba(201, 133, 0, .14); color: #9a6500; border: 1px solid rgba(201, 133, 0, .4); }
:root[data-tema="escuro"] .pilula-estagio.liberada { color: #3fd3a8; }
:root[data-tema="escuro"] .pilula-estagio.retida { color: #f0b440; }
.card-chamada-auditoria { border-left: 4px solid #00a884; background: linear-gradient(135deg, rgba(0,168,132,.08), rgba(57,135,229,.08)); }
.card-chamada-auditoria .chamada-meta { font-size: 11px; color: var(--tinta-2); }
.card-chamada-auditoria .chamada-titulo { font-weight: 600; font-size: 12.5px; }

/* --------------------------------------------------------------------------
   v1.9.0: regime anti-ban do chip, estratégias da ação em massa e Ligações
   -------------------------------------------------------------------------- */
.regimes { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.regime {
  display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 9px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; cursor: default;
}
.regime.rg-pos { color: var(--t-critico); background: rgba(208,59,59,.13); border-color: rgba(208,59,59,.35); }
.regime.rg-aquece { color: var(--t-bom); background: rgba(12,163,12,.12); border-color: rgba(12,163,12,.32); }
.regime.rg-disjuntor { color: var(--atencao); background: rgba(250,178,25,.13); border-color: rgba(250,178,25,.4); animation: pulso-regime 2.4s ease-in-out infinite; }
.regime.rg-receptivo { color: var(--t-info); background: rgba(57,135,229,.13); border-color: rgba(57,135,229,.35); }
.regime.rg-normal { color: var(--tinta-3); background: var(--s3); }
@keyframes pulso-regime { 50% { box-shadow: 0 0 0 3px rgba(250,178,25,.12); } }
@media (prefers-reduced-motion: reduce) { .regime.rg-disjuntor { animation: none; } }
.botoes-regime { display: flex; flex-wrap: wrap; gap: 4px; }
.botoes-regime.compacto .btn { width: 24px; padding: 0; justify-content: center; font-size: 12px; }
.regime-acoes { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 2px; border-top: 1px dashed var(--linha); font-size: 11.5px; }
.cel-regime { min-width: 150px; }
.cel-regime .regimes { margin-bottom: 3px; }

.layout-arquivo code.opcional { opacity: .65; border-style: dashed; }
.estrategia-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.estrategia {
  display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 7px 9px; border-radius: var(--raio-p);
  border: 1px solid var(--linha-2); background: var(--s2); color: var(--tinta); cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
}
.estrategia:hover { border-color: var(--borda-hover); background: var(--s3); }
.estrategia:active { transform: scale(.99); }
.estrategia b { font-size: 12px; }
.estrategia span { font-size: 10.5px; line-height: 1.35; color: var(--tinta-3); }
.estrategia.ativo { border-color: var(--acao); background: linear-gradient(135deg, rgba(0,168,132,.16), rgba(0,168,132,.04)); box-shadow: inset 0 0 0 1px var(--acao); }
.estrategia.ativo b { color: var(--acao-2); }
.estrategia-sticky { font-size: 11.5px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--s2); cursor: pointer; }
.estrategia-sticky input { margin-top: 2px; }
.distribuicao { display: flex; flex-direction: column; gap: 6px; padding: 7px 9px; border-radius: var(--raio-p); background: var(--s2); border: 1px solid var(--linha); font-size: 11.5px; }
.distribuicao .ic { width: 13px; height: 13px; vertical-align: -2px; color: var(--acao-2); }
.dist-lista { display: flex; flex-direction: column; gap: 3px; }
.dist-op { display: grid; grid-template-columns: minmax(0, 120px) 1fr auto; gap: 6px; align-items: center; font-size: 11px; }
.dist-op i { display: block; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--acao), var(--acao-2)); transition: width .3s ease; }

.chamadas-tela .kpis .v { font-size: 16px; }
.cham-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.cham-filtros .campo { min-width: 120px; }
.cham-filtros .campo.cresce { flex: 1 1 220px; }
.cham-filtros-acoes { display: flex; gap: 6px; margin-left: auto; }
.cham-tabela td { padding-top: 4px; padding-bottom: 4px; }
.cham-cliente { display: flex; flex-direction: column; min-width: 0; max-width: 220px; line-height: 1.25; }
.cham-cliente .mono { font-size: 11px; }
.cham-dir { font-size: 11.5px; font-weight: 500; }
.cham-dir.ativa { color: var(--acao-2); }
.cham-dir.receptiva { color: var(--t-info); }
.cham-player { min-width: 230px; }
.cham-audio { display: flex; flex-direction: column; gap: 3px; }
.cham-audio audio { width: 100%; height: 28px; }
.cham-acoes { white-space: nowrap; text-align: right; }
.cham-acoes .btn + .btn { margin-left: 3px; }
@media (max-width: 900px) {
  .estrategia-opcoes { grid-template-columns: 1fr; }
  .cham-filtros-acoes { margin-left: 0; width: 100%; }
}

/* ---- selos do usuário no topo (Admin / Somente leitura) ------------------ */
.usuario { gap: 6px; }
.usuario .eu { font: inherit; color: var(--tinta-2); }
.usuario .eu.link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted var(--linha-2); text-underline-offset: 3px; }
.usuario .eu.link:hover { color: var(--acao-2); }
.selo { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: 8px; font: 600 9.5px/1 var(--f-sinal); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.selo-admin { color: var(--acao-2); background: rgba(0,168,132,.14); }
.selo-ro { color: var(--tinta-2); background: var(--s3); }

/* ---- tela de usuários e permissões --------------------------------------- */
.usr-lista { display: grid; gap: 10px; padding: 10px; }
.usr-card { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--s1); padding: 10px 12px; display: grid; gap: 10px; }
.usr-card.inativo { opacity: .66; }
.usr-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.usr-ident { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 220px; }
.usr-ident .avatar { --cor: var(--acao); width: 34px; height: 34px; }
.usr-nome { min-width: 0; display: grid; gap: 2px; }
.usr-nome input[data-nome] { font: 500 13.5px/1.2 var(--f-texto); height: 24px; max-width: 240px; }
.usr-login { font-size: 11px; color: var(--tinta-3); display: flex; align-items: center; gap: 5px; }
.usr-estado { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.usr-controles { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.usr-campo { display: grid; gap: 4px; }
.usr-campo .rot, .usr-abas .rot { font: 600 9.5px/1 var(--f-sinal); letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-3); }
.usr-ativo .chave { display: inline-flex; align-items: center; gap: 6px; height: 26px; font-size: 12.5px; color: var(--tinta); cursor: pointer; }

/* toggle de duas opções (papel, permissão de criar) */
.toggle-dupla { display: inline-flex; border: 1px solid var(--linha-2); border-radius: var(--raio-p); overflow: hidden; }
.toggle-dupla button { font: 500 12px/1 var(--f-texto); padding: 0 10px; height: 26px; background: var(--s2); color: var(--tinta-2); border: 0; border-left: 1px solid var(--linha-2); cursor: pointer; white-space: nowrap; }
.toggle-dupla button:first-child { border-left: 0; }
.toggle-dupla button.on { background: rgba(0,168,132,.18); color: var(--acao-2); font-weight: 600; }
.toggle-dupla button:not(.on):hover { background: var(--s3); color: var(--tinta); }
.toggle-dupla.trava { opacity: .8; }
.toggle-dupla button:disabled { cursor: default; }

/* abas liberadas */
.usr-abas { display: grid; gap: 6px; border-top: 1px dashed var(--linha); padding-top: 9px; }
.usr-abas.trava { opacity: .72; }
.usr-abas-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.usr-atalhos { display: flex; gap: 5px; margin-left: auto; }
.usr-atalhos button { font: 600 10px/1 var(--f-sinal); letter-spacing: .05em; text-transform: uppercase; padding: 0 8px; height: 20px; background: none; border: 1px solid var(--linha-2); border-radius: 10px; color: var(--tinta-3); cursor: pointer; }
.usr-atalhos button:hover { color: var(--acao-2); border-color: var(--acao); }
.usr-pilulas { display: flex; flex-wrap: wrap; gap: 5px; }
.aba-pill { font: 500 11.5px/1 var(--f-texto); padding: 0 10px; height: 24px; border-radius: 12px; border: 1px solid var(--linha-2); background: var(--s2); color: var(--tinta-3); cursor: pointer; white-space: nowrap; }
.aba-pill:not(:disabled):hover { color: var(--tinta); border-color: var(--tinta-3); }
.aba-pill.on { background: rgba(0,168,132,.16); border-color: var(--acao); color: var(--acao-2); font-weight: 600; }
.aba-pill:disabled { cursor: default; }
.usr-acoes { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--linha); padding-top: 9px; }
.usr-acoes [data-senha] { margin-left: auto; }
.campo-chk { flex-direction: row; align-items: center; gap: 7px; }
.campo-chk span { font-size: 12.5px; color: var(--tinta); }

@media (max-width: 760px) {
  .usr-estado { margin-left: 0; width: 100%; }
  .usr-acoes [data-senha] { margin-left: 0; }
}