/* ==========================================================================
   Atendimento CSA — tema escuro (helpdesk). Reskin 03/07/2026.
   - Admin (index/login): escuro por padrao; --acento vem da paleta por agente
     (app.js grava em localStorage e seta --acento no :root).
   - body.tema-claro  -> modo claro do admin (mesmas variaveis, valores claros).
   - body.pesquisa-body -> pagina do CLIENTE: SEMPRE clara/branded (redefine as
     variaveis para valores claros e usa acento fixo CAREL).
   ========================================================================== */
:root {
  --bg:#0e1016; --surface:#171a22; --surface-2:#1e222c; --surface-3:#252b37;
  --texto:#e6e8ee; --texto-dim:#98a0b3; --borda:#2a2f3c;
  --acento:#e2001a; --acento-2:#ff2740; --acento-soft:rgba(226,0,26,.15);
  --ok:#37b26a;  --ok-bg:rgba(55,178,106,.16);
  --warn:#e0a92e; --warn-bg:rgba(224,169,46,.16);
  --err:#e2495a; --err-bg:rgba(226,73,90,.16);
  --info:#3e86f5; --info-bg:rgba(62,134,245,.16);
  --raio:12px; --sombra:0 8px 30px rgba(0,0,0,.25);
}
body.tema-claro {
  --bg:#eef1f6; --surface:#ffffff; --surface-2:#f4f6fb; --surface-3:#e9edf5;
  --texto:#1c2230; --texto-dim:#5b6577; --borda:#dde2ec;
  --sombra:0 8px 30px rgba(20,30,60,.10);
}

* { box-sizing:border-box; }
body {
  margin:0; font-family:'Segoe UI',system-ui,Arial,Helvetica,sans-serif;
  color:var(--texto); background:var(--bg);
}
a { color:var(--acento-2); }

/* ============================ SHELL ============================ */
.app-shell { display:grid; grid-template-columns:var(--sidebar-w,238px) 1fr; min-height:100vh; }

.sidebar {
  background:var(--surface); border-right:1px solid var(--borda);
  display:flex; flex-direction:column; padding:16px 12px; gap:4px;
  /* Fixa a barra: ela acompanha a rolagem em vez de sumir no fim de paginas longas
     (ex.: Configuracoes). align-self:start impede o grid de estica-la ate o rodape. */
  position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
}
/* alca para redimensionar a sidebar (mesmo padrao do drawer de casos) */
.sb-resizer { position:absolute; right:0; top:0; width:7px; height:100%; cursor:ew-resize; z-index:5; }
.sb-resizer:hover { background:var(--acento-soft); }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; padding:6px 8px 16px; }
.logo .mark { width:30px; height:30px; border-radius:8px; background:var(--acento); color:#fff;
  display:grid; place-items:center; font-size:.82rem; flex:0 0 30px; }

.nav { display:flex; flex-direction:column; gap:3px; }
.aba {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  border:none; background:none; color:var(--texto-dim); cursor:pointer;
  padding:11px 12px; border-radius:9px; font-size:.92rem;
}
.aba svg { width:18px; height:18px; flex:0 0 18px; }
.aba:hover { background:var(--surface-2); color:var(--texto); }
.aba.ativa { background:var(--acento); color:#fff; font-weight:600; box-shadow:0 4px 14px var(--acento-soft); }
.nav-txt { flex:1; }

.badge-contador {
  background:var(--err); color:#fff; border-radius:10px; padding:0 7px;
  font-size:.7rem; font-weight:700; margin-left:auto;
}
.badge-contador:empty { display:none; }
.aba.ativa .badge-contador { background:#fff; color:var(--acento); }

/* rodape da sidebar */
.sidebar-foot { margin-top:auto; padding-top:12px; border-top:1px solid var(--borda);
  display:flex; flex-direction:column; gap:10px; }
.rodape-linha { display:flex; align-items:center; gap:8px; }
.usuario-box { display:flex; align-items:center; gap:9px; font-size:.85rem; flex:1; min-width:0; }
.usuario-box .nav-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar-mini { width:30px; height:30px; border-radius:50%; flex:0 0 30px;
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:.72rem; background:var(--info); }
.icone-btn { width:34px; height:34px; flex:0 0 34px; border-radius:8px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--borda); color:var(--texto-dim);
  display:grid; place-items:center; }
.icone-btn svg { width:17px; height:17px; }
.icone-btn:hover { color:var(--texto); border-color:var(--acento); }

/* modo de envio (kill switch) */
.envio-modo-box { display:flex; align-items:center; gap:8px; font-size:.82rem;
  border:1px solid var(--borda); border-radius:9px; padding:7px 10px; background:var(--surface-2); }
.envio-modo-box label { color:var(--texto-dim); }
.envio-modo-box select { flex:1; background:var(--surface-3); color:var(--texto);
  border:1px solid var(--borda); border-radius:6px; padding:4px 6px; font-size:.82rem; }
.envio-modo-box.modo-real { background:var(--ok-bg); border-color:var(--ok); }
.envio-modo-box.modo-real label { color:var(--ok); }
.envio-modo-box.modo-simulacao { background:var(--warn-bg); border-color:var(--warn); }
.envio-modo-box.modo-simulacao label { color:var(--warn); }
.envio-modo-box.modo-pausado { background:var(--err-bg); border-color:var(--err); font-weight:700; }
.envio-modo-box.modo-pausado label { color:var(--err); }

/* popover de aparencia (cor + tema) — escondido por padrao */
.aparencia-pop { position:absolute; left:12px; right:12px; bottom:118px;
  background:var(--surface-2); border:1px solid var(--borda); border-radius:12px;
  padding:12px; box-shadow:var(--sombra); z-index:20; }
.ap-lbl { font-size:.72rem; color:var(--texto-dim); text-transform:uppercase;
  letter-spacing:.5px; margin:2px 0 8px; }
.swatches { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.sw { width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.sw:hover { transform:scale(1.12); }
.sw.sel { border-color:var(--texto); box-shadow:0 0 0 2px var(--surface-2),0 0 0 4px var(--texto); }
.tema-toggle { display:flex; gap:6px; }
.tema-toggle button { flex:1; background:var(--surface-3); border:1px solid var(--borda);
  color:var(--texto-dim); border-radius:7px; padding:6px; font-size:.78rem; cursor:pointer; }
.tema-toggle button.sel { background:var(--acento); color:#fff; border-color:var(--acento); }

/* ============================ CONTEUDO ============================ */
.conteudo { display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; gap:16px; padding:16px 26px;
  border-bottom:1px solid var(--borda); background:var(--surface); }
.crumb { color:var(--texto-dim); font-size:.8rem; }
.crumb #crumb-secao { color:var(--acento-2); }
#titulo-secao { font-size:1.35rem; font-weight:700; margin:2px 0 0; }
.topbar-dir { margin-left:auto; display:flex; align-items:center; gap:14px; }

.status-integracoes { display:flex; gap:10px; flex-wrap:wrap; }
.badge { font-size:.76rem; padding:5px 10px; border-radius:20px; color:var(--texto-dim);
  background:var(--surface-2); border:1px solid var(--borda);
  display:inline-flex; align-items:center; gap:7px; }
.badge::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--texto-dim); }
.badge.ok::before { background:var(--ok); }
.badge.off::before { background:var(--err); }

main { padding:24px 26px; overflow:auto; flex:1; }
.painel { display:none; }
.painel.ativo { display:block; }

.rodape { text-align:center; padding:16px; color:var(--texto-dim); font-size:.8rem; }

/* barra de ferramentas */
.barra-ferramentas { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.barra-ferramentas input[type="search"] { flex:1 1 300px; padding:10px 12px;
  border:1px solid var(--borda); border-radius:9px; font-size:.9rem;
  background:var(--surface-2); color:var(--texto); }
.barra-ferramentas select, .barra-ferramentas button,
.barra-ferramentas a { padding:9px 14px; border:1px solid var(--borda); border-radius:9px;
  background:var(--surface-2); color:var(--texto); cursor:pointer; font-size:.86rem;
  text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.barra-ferramentas button:hover, .barra-ferramentas a:hover { border-color:var(--acento); }
.contador { color:var(--texto-dim); font-size:.82rem; margin-left:auto; }

/* ============================ CARTOES / FORM ============================ */
.cartao { background:var(--surface); border:1px solid var(--borda); border-radius:var(--raio);
  padding:18px; margin-bottom:16px; display:flex; flex-direction:column; gap:12px; }
.cartao h3 { margin:0; font-size:1rem; }
/* cartao em linha (ex.: status do WhatsApp): rotulo + tag + botao pequeno a direita */
.cartao-linha { flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px; }
.cartao-linha #wpp-status { flex:0 0 auto; }
.cartao-linha .btn-sm { margin-left:auto; }
.btn-sm { padding:7px 14px; border:1px solid var(--borda); border-radius:8px;
  background:var(--surface-2); color:var(--texto); cursor:pointer; font-size:.84rem; }
.btn-sm:hover { border-color:var(--acento); }
.dica { color:var(--texto-dim); font-size:.82rem; margin:0; }
.placeholder { background:var(--surface-2); border:1px dashed var(--borda); padding:16px;
  border-radius:10px; color:var(--texto-dim); }

.campo { display:flex; flex-direction:column; gap:5px; }
.campo label { font-size:.84rem; color:var(--texto-dim); }
.campo input, .campo textarea, .grade-2 input {
  padding:10px 12px; border:1px solid var(--borda); border-radius:9px; font-size:.9rem;
  font-family:inherit; background:var(--surface-2); color:var(--texto); }
.campo input::placeholder, .campo textarea::placeholder { color:var(--texto-dim); }
.grade-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.linha-copiar { display:flex; gap:8px; }
.linha-copiar input { flex:1; }

.botao-primario { align-self:flex-start; background:var(--acento); color:#fff; border:none;
  padding:11px 18px; border-radius:9px; cursor:pointer; font-size:.9rem; font-weight:600; }
.botao-primario:hover { background:var(--acento-2); }
.botao-primario:disabled { opacity:.55; cursor:default; }

.resultado { font-size:.9rem; padding:4px 0; }
.resultado.sucesso { color:var(--ok); }
.resultado.erro { color:var(--err); }
.erro { background:var(--err-bg); border:1px solid var(--err); color:var(--err);
  padding:12px; border-radius:10px; }

/* ============================ TABELA ============================ */
.tabela { width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; font-size:.88rem; }
.tabela th, .tabela td { text-align:left; padding:13px 15px; border-bottom:1px solid var(--borda);
  vertical-align:middle; }
.tabela thead th { background:var(--surface-2); color:var(--texto-dim); font-weight:600;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.4px; position:sticky; top:0; }
.tabela tbody tr:last-child td { border-bottom:none; }
.tabela tbody tr:hover { background:var(--surface-2); }

/* pills de status */
.tag { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:20px;
  font-size:.76rem; font-weight:600; white-space:nowrap; color:var(--texto-dim); background:var(--surface-3); }
.tag::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.tag-ok { color:var(--ok); background:var(--ok-bg); }
.tag-warn, .tag-aberto { color:var(--warn); background:var(--warn-bg); }
.tag-err { color:var(--err); background:var(--err-bg); }
.tag-info { color:var(--info); background:var(--info-bg); }
.tag-muted { color:var(--texto-dim); background:var(--surface-3); }

/* tabela de casos: colunas customizaveis (largura/ordem/mostrar) */
.tabela-casos { table-layout:fixed; }
.tabela-casos th { position:relative; }
/* titulos centralizados e com enfase (mais claros + negrito) */
.tabela-casos thead th { text-align:center; color:var(--texto); font-weight:700;
  letter-spacing:.6px; }
.tabela-casos th .col-lbl { display:block; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; cursor:grab; padding:0 4px; text-align:center;
  container-type:inline-size; }
.col-lbl .lbl-abrev { display:none; } /* titulo curto so quando a coluna estreita */
@container (max-width:58px) {
  .col-lbl .lbl-full { display:none; }
  .col-lbl .lbl-abrev { display:inline; }
}
/* padding lateral menor: permite estreitar ate sobrar so a bolinha */
.tabela-casos th, .tabela-casos td { padding-left:10px; padding-right:10px; }
.tabela-casos th.arrastando { opacity:.5; }
.tabela-casos th.drop-alvo { box-shadow:inset 2px 0 0 var(--acento); }
/* gatilho de resize: area clicavel larga e centrada na linha de grade;
   o traco vermelho e fino (2px) e fica no centro, sobre a borda. */
.col-resize { position:absolute; top:0; right:-7px; width:14px; height:100%;
  cursor:col-resize; z-index:3; }
.col-resize::after { content:""; position:absolute; left:50%; top:0;
  transform:translateX(-50%); width:2px; height:100%; background:transparent; }
.col-resize:hover::after { background:var(--acento); }
/* A tabela pode ser mais larga/alta que a tela: a caixa rola nos dois eixos e a
   altura e limitada a janela, mantendo a barra horizontal SEMPRE visivel embaixo
   (senao ela ficaria no fim de 30+ linhas, fora da tela). */
#casos-conteudo { overflow:auto; max-height:calc(100vh - 210px); }
.tabela-casos td { overflow:hidden; }
/* dados centralizados por padrao; Cliente e Numero ficam alinhados a esquerda */
.tabela-casos tbody td { text-align:center; }
.tabela-casos tbody td[data-key="cliente"], .tabela-casos tbody td[data-key="numero"] { text-align:left; }
.tabela-casos thead th[data-key="cliente"] .col-lbl,
.tabela-casos thead th[data-key="numero"] .col-lbl { text-align:left; }
/* cada celula e um container: o conteudo acompanha a largura da coluna.
   texto: corta com reticencias; pill de status: compacta para so a bolinha. */
.tabela-casos .cel { container-type:inline-size; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
/* coluna estreita: pill de status vira so a bolinha centralizada */
@container (max-width:78px) {
  .tabela-casos .cel .tag-lbl { display:none; }
  .tabela-casos .cel .tag { display:flex; width:max-content; margin:0 auto; padding:5px; }
  .tabela-casos .cel .tag::before { margin:0; }
}
/* linhas de grade (opcional, por agente) */
.tabela-casos.grade th, .tabela-casos.grade td { border-right:1px solid var(--borda); }
.tabela-casos.grade th:last-child, .tabela-casos.grade td:last-child { border-right:none; }
.cel-txt { min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.cel-elip { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.col-menu { background:var(--surface); border:1px solid var(--borda); border-radius:10px;
  padding:12px 14px; margin-bottom:14px; display:flex; flex-wrap:wrap; gap:9px 18px;
  align-items:center; box-shadow:var(--sombra); }
.col-menu[hidden] { display:none; } /* atributo hidden vence o display:flex */
.col-menu label { display:flex; align-items:center; gap:7px; font-size:.85rem;
  color:var(--texto); cursor:pointer; }
.col-menu input[type="checkbox"] { accent-color:var(--acento); }
.col-menu .col-menu-sep { flex-basis:100%; height:1px; background:var(--borda); margin:2px 0; }
.col-menu .col-grade-opt { font-weight:600; }
.col-menu .col-reset { margin-left:auto; }

/* avatar de iniciais (cliente nas tabelas) */
.cliente { display:flex; align-items:center; gap:11px; min-width:0; }
.cliente > .cel-txt { min-width:0; }
.cliente .sub { color:var(--texto-dim); font-size:.78rem; }
.avatar { width:34px; height:34px; border-radius:50%; flex:0 0 34px; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:.76rem; }

/* ============================ METRICAS ============================ */
.cards-resumo { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.card-num { flex:1 1 140px; background:var(--surface); border:1px solid var(--borda);
  border-top:3px solid var(--acento); border-radius:var(--raio); padding:16px 18px;
  display:flex; flex-direction:column; gap:4px; }
.card-num .num { font-size:1.8rem; font-weight:800; color:var(--texto); }
.card-num .rotulo { font-size:.8rem; color:var(--texto-dim); }

.barra-linha { display:grid; grid-template-columns:200px 1fr 44px; align-items:center; gap:10px; margin:8px 0; }
.barra-rotulo { font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.barra-trilho { background:var(--surface-3); border-radius:6px; height:15px; overflow:hidden; }
.barra-fill { display:block; height:100%; background:var(--acento); border-radius:6px; }
.barra-valor { font-size:.82rem; text-align:right; color:var(--texto-dim); }

/* ============================ NOVOS (cards) — compacto ============================ */
.card-msg { background:var(--surface); border:1px solid var(--borda);
  border-left:3px solid var(--acento); border-radius:10px; padding:12px 14px; margin-bottom:9px; }
.card-msg-cab { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.card-msg-cab .num { color:var(--texto-dim); font-size:.8rem; }
.card-msg-texto { background:var(--surface-2); border-radius:8px; padding:8px 11px;
  margin-bottom:8px; font-size:.88rem; }
/* Padrao 2 colunas (Empresa|Motivo; Produto e botao ocupam a linha) - cabe bem na
   largura de abertura da janela. So vira 4 colunas em telas largas (>=1400px). */
.card-msg-form { display:grid; grid-template-columns:1fr 1fr; gap:9px; align-items:center; }
.card-msg-form select, .card-msg-form button { grid-column:1 / -1; }
.card-msg-form input, .card-msg-form select { padding:10px 11px; border:1px solid var(--borda);
  border-radius:9px; font-size:.86rem; background:var(--surface-2); color:var(--texto); }
.card-msg-form input::placeholder { color:var(--texto-dim); }

.cab-dir { display:flex; align-items:center; gap:10px; margin-left:auto; }
.link-ignorar { background:none; border:none; color:var(--err); cursor:pointer; font-size:.82rem;
  text-decoration:underline; padding:2px 4px; }
.link-ignorar:hover { color:var(--acento-2); }

.card-msg-anexos { margin:6px 0 4px; padding-left:10px; border-left:3px solid var(--surface-3); }
.card-msg-anexo { color:var(--texto-dim); font-size:.92em; padding:2px 0; }

.linha-ignorado { display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:8px 0; border-bottom:1px solid var(--borda); font-size:.88rem; }
.linha-ignorado:last-child { border-bottom:none; }

.linha-atend { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
  gap:10px; padding:10px 0; border-bottom:1px solid var(--borda); }
.linha-atend:last-child { border-bottom:none; }
.atend-info { flex:1; min-width:200px; }
.atend-acoes { display:flex; gap:10px; align-items:flex-start; }
.atend-form { flex-basis:100%; margin-top:8px; }

/* ============================ LOGIN (escuro) ============================ */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--bg); padding:20px; }
.login-box { background:var(--surface); border:1px solid var(--borda); border-top:4px solid var(--acento);
  border-radius:14px; padding:30px 28px; width:100%; max-width:350px;
  display:flex; flex-direction:column; gap:14px; box-shadow:var(--sombra); }
.login-box h1 { margin:0; font-size:1.4rem; text-align:center; }
.login-sub { margin:0; text-align:center; color:var(--texto-dim); font-size:.9rem; }
.login-alt { margin:0; text-align:center; font-size:.85rem; color:var(--texto-dim); }
.link-btn { background:none; border:none; padding:0; margin:0; cursor:pointer;
  color:var(--acento); font:inherit; font-weight:600; text-decoration:underline; }
.link-btn:hover { color:var(--acento-2); }

/* ---------- Botao "i" de ajuda + popover (reutilizavel) ---------- */
.ajuda-i { display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:5px; border-radius:50%; cursor:pointer;
  background:var(--acento-soft); color:var(--acento); border:1px solid var(--acento);
  font-size:.7rem; font-weight:700; font-style:normal; line-height:1;
  vertical-align:middle; user-select:none; }
.ajuda-i:hover { background:var(--acento); color:#fff; }

/* Selecao de texto: liberar para o usuario copiar (Ctrl+C) numeros, nomes e mensagens.
   Botoes/tags/icones ficam FORA da selecao para nao atrapalhar o clique. */
body { -webkit-user-select: text; user-select: text; }
button, a.link-ignorar, .tag, .badge, .ajuda-i, svg { -webkit-user-select: none; user-select: none; }
.ajuda-pop { position:relative; display:block; margin:6px 0 2px; padding:9px 11px;
  background:var(--surface-2); color:var(--texto); border:1px solid var(--borda);
  border-left:3px solid var(--acento); border-radius:8px; font-size:.82rem;
  font-weight:400; line-height:1.4; max-width:340px; box-shadow:var(--sombra); }

/* ======================================================================
   PAGINA DO CLIENTE (pesquisa) — SEMPRE clara/branded.
   Redefine as variaveis para valores claros e fixa o acento CAREL.
   ====================================================================== */
body.pesquisa-body {
  --bg:#e9edf3; --surface:#ffffff; --surface-2:#f4f6fb; --surface-3:#eef1f6;
  --texto:#20242c; --texto-dim:#6b7280; --borda:#e3e6ec;
  --acento:#e2001a; --acento-2:#b30015;
  background:var(--bg);
}
.pesquisa-wrap { max-width:440px; margin:0 auto; padding:26px 14px 40px; }
.pesquisa-card { background:#fff; border:1px solid var(--borda); border-radius:16px;
  overflow:hidden; box-shadow:0 10px 40px rgba(20,30,60,.14); padding:0; }
.pesquisa-cab { background:linear-gradient(135deg,var(--acento),var(--acento-2)); color:#fff;
  padding:22px 22px 18px; }
.pesquisa-cab h1 { color:#fff; font-size:1.35rem; margin:0; }
.pesquisa-cab h2 { color:#fff; opacity:.92; font-size:.95rem; margin:4px 0 0; font-weight:600; }
#pesquisa-conteudo { padding:20px 22px 24px; }
/* a intro fica DENTRO do cabecalho vermelho (pesquisa.js) -> caixa translucida branca */
.pesquisa-intro { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32);
  color:#fff; border-radius:10px; padding:11px 13px; font-weight:500; font-size:.9rem; margin:14px 0 0; }
.pesquisa-rodape { text-align:center; color:#9aa2b1; font-size:.76rem; margin-top:16px; }

.pergunta { margin:22px 0; }
.pergunta-enunciado { font-weight:600; margin:0 0 11px; }
.obrig { color:var(--acento); }

.escala { display:flex; flex-wrap:wrap; gap:6px; }
.escala-btn { flex:1 1 auto; min-width:34px; padding:11px 0; border:1px solid var(--borda);
  background:#fff; border-radius:8px; cursor:pointer; font-size:.95rem; color:var(--texto); }
.escala-btn:hover { border-color:var(--acento); }
.escala-btn.sel { background:var(--acento); color:#fff; border-color:var(--acento); font-weight:700; }
.escala-labels { display:flex; justify-content:space-between; font-size:.76rem; color:var(--texto-dim); margin-top:5px; }

.estrelas { display:flex; gap:10px; justify-content:flex-start; }
.estrela-btn { background:none; border:none; cursor:pointer; font-size:2rem; line-height:1;
  color:#d6dae2; padding:0; }
.estrela-btn.sel, .estrela-btn:hover { color:#f5b301; }

.opcoes { display:flex; gap:10px; }
.opcoes label { flex:1; display:flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--borda); border-radius:10px; padding:12px 14px; font-size:.95rem; }
.opcoes input { accent-color:var(--acento); }

.pergunta textarea { width:100%; padding:12px; border:1px solid var(--borda); border-radius:10px;
  font-family:inherit; font-size:.95rem; }

.pesquisa-msg { text-align:center; padding:30px 12px; font-size:1.05rem; color:var(--texto-dim); }
.pesquisa-msg.ok { color:#2e9e5b; font-weight:700; }

/* ==================== BLOCOS RECOLHIVEIS (aba Pesquisas) ====================
   Visual leve: cada bloco e um <details>. Fechado = so o cabecalho (titulo +
   subtitulo). Aberto = expande na propria tela, sem popup. */
.bloco-rec { padding:0; }                     /* o padding vai no summary/corpo */
.bloco-rec > summary { list-style:none; cursor:pointer; padding:13px 16px;
  display:flex; flex-direction:column; gap:2px; position:relative; }
.bloco-rec > summary::-webkit-details-marker { display:none; }
.bloco-rec > summary::after { content:"⌄"; position:absolute; right:16px; top:11px;
  font-size:1.15rem; color:var(--texto-dim); transition:transform .18s; }
.bloco-rec[open] > summary::after { transform:rotate(180deg); }
.bloco-rec > summary:hover { background:var(--surface-2); }
.bloco-tit { font-size:1rem; font-weight:700; color:var(--texto);
  display:flex; align-items:center; gap:8px; padding-right:24px; }
.bloco-tit .contador { margin-left:0; }
.bloco-sub { font-size:.8rem; color:var(--texto-dim); padding-right:24px; }
.bloco-corpo { padding:12px 16px 16px; border-top:1px solid var(--borda);
  display:flex; flex-direction:column; gap:12px; }
.sub-titulo { margin:4px 0 0; font-size:.9rem; color:var(--texto); }

/* visao agregada por pergunta (estilo Forms) */
.agg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.agg-card { background:var(--surface-2); border:1px solid var(--borda); border-radius:10px;
  padding:12px 14px; margin:0; }
.agg-card h4 { margin:0 0 8px; font-size:.85rem; font-weight:600; color:var(--texto); }
.agg-card .donut { width:112px; height:112px; flex:0 0 112px; }
.agg-card .donut-wrap { gap:12px; }
.agg-card .donut-leg { min-width:90px; }
.agg-nota { display:flex; align-items:baseline; gap:8px; }
.agg-num { font-size:1.5rem; font-weight:800; color:var(--texto); }
.agg-estrelas { letter-spacing:2px; font-size:1rem; }
.agg-estrela { color:var(--surface-3); }         /* estrela vazia */
.agg-estrela.cheia { color:var(--warn); }         /* estrela preenchida (ambar) */
.agg-comentarios { margin:8px 0 0; padding-left:16px; display:flex; flex-direction:column;
  gap:5px; max-height:180px; overflow:auto; }
.agg-comentarios li { font-size:.84rem; color:var(--texto); }
#pesquisa-enviar { width:100%; padding:15px; font-size:1.05rem; margin-top:10px;
  background:var(--acento); color:#fff; border:none; border-radius:12px; font-weight:700; cursor:pointer; }
#pesquisa-enviar:hover { background:var(--acento-2); }

/* ============================ METRICAS (dashboard) ============================ */
.metricas-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:16px; margin-bottom:18px; }
.metrica-card { margin:0; display:flex; flex-direction:column; }
.metrica-cab { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.metrica-cab h3 { margin:0; flex:1; font-size:1rem; }
.btn-tipo-grafico { width:30px; height:30px; flex:0 0 30px; border-radius:8px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--borda); color:var(--texto-dim);
  font-size:.95rem; line-height:1; display:grid; place-items:center; }
.btn-tipo-grafico:hover { color:var(--texto); border-color:var(--acento); }
.metrica-corpo { flex:1; }

/* donut (pizza) */
.donut-wrap { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.donut { width:150px; height:150px; flex:0 0 150px; }
.donut-total { text-anchor:middle; dominant-baseline:central; fill:var(--texto);
  font-size:30px; font-weight:800; }
.donut-leg { list-style:none; margin:0; padding:0; flex:1; min-width:150px;
  display:flex; flex-direction:column; gap:6px; }
.donut-leg li { display:flex; align-items:center; gap:8px; font-size:.82rem; }
.leg-cor { width:11px; height:11px; border-radius:3px; flex:0 0 11px; }
.leg-rot { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--texto-dim); }
.leg-val { font-weight:700; color:var(--texto); white-space:nowrap; }
.leg-val small { color:var(--texto-dim); font-weight:600; margin-left:4px; }

/* linha (serie semanal) */
.linha-graf { width:100%; height:auto; display:block; }
.ln-linha { fill:none; stroke:var(--acento); stroke-width:2; }
.ln-dot { fill:var(--acento); }
.ln-val { fill:var(--texto); font-size:11px; font-weight:700; text-anchor:middle; }
.ln-rot { fill:var(--texto-dim); font-size:10px; text-anchor:middle; }

/* ===================== DRAWER: detalhe do caso ===================== */
.linha-caso { cursor:pointer; }
.linha-caso:hover td { background:var(--acento-soft); }
/* o atributo hidden precisa vencer o display do drawer/overlay, senao nao fecha */
.caso-drawer[hidden], .caso-overlay[hidden] { display:none !important; }
.caso-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; }
.caso-drawer { position:fixed; top:0; right:0; height:100vh; width:420px; min-width:340px; max-width:min(94vw,900px);
  background:var(--surface); border-left:1px solid var(--borda); z-index:41;
  display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(0,0,0,.35);
  animation:cd-slide .16s ease-out; }
.cd-resizer { position:absolute; left:0; top:0; width:7px; height:100%; cursor:ew-resize; z-index:3; }
.cd-resizer:hover { background:var(--acento-soft); }
@keyframes cd-slide { from { transform:translateX(24px); opacity:.4; } to { transform:none; opacity:1; } }
.caso-drawer-cab { display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding:16px 18px; border-bottom:1px solid var(--borda); }
.cd-tit { display:flex; flex-direction:column; gap:8px; min-width:0; }
.cd-tit h3 { margin:0; font-size:1.02rem; word-break:break-word; }
.caso-drawer-corpo { padding:16px 18px; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:16px; }
.cd-resultado { position:sticky; top:0; z-index:2; font-size:.9rem; font-weight:600; padding:10px 12px;
  border-radius:9px; border:1px solid var(--borda); background:var(--surface-2); color:var(--texto); }
.cd-resultado[hidden] { display:none; }
.cd-resultado.sucesso { color:var(--ok); background:var(--ok-bg); border-color:transparent; }
.cd-resultado.erro { color:var(--err); background:var(--err-bg); border-color:transparent; }
.cd-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:0; }
.cd-meta dt { font-size:.74rem; color:var(--texto-dim); text-transform:uppercase; letter-spacing:.3px; }
.cd-meta dd { margin:2px 0 0; font-size:.9rem; word-break:break-word; }
.cd-secao { border-top:1px solid var(--borda); padding-top:14px; display:flex; flex-direction:column; gap:10px; }
.cd-acoes { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.caso-drawer .campo { min-width:0; }
.caso-drawer .campo select { width:100%; max-width:100%; padding:10px 12px; border:1px solid var(--borda); border-radius:9px;
  font-size:.9rem; font-family:inherit; background:var(--surface-2); color:var(--texto); }
.btn-link { color:var(--acento); text-decoration:none; font-size:.86rem; border:1px solid var(--borda);
  padding:8px 12px; border-radius:8px; background:var(--surface-2); }
.btn-link:hover { border-color:var(--acento); }

/* ---------- Contas / Agentes (Configuracoes) ---------- */
.dica.sucesso { color:var(--ok); }
.dica.erro { color:var(--err); }
.sub-titulo { margin:16px 0 8px; font-size:.9rem; color:var(--texto-dim); }
.agente-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; align-items:center; }
.agente-form input[type="text"], .agente-form input[type="password"] { width:100%; }
.ag-check { display:flex; align-items:center; gap:6px; font-size:.88rem; white-space:nowrap; }
/* botoes da area de contas herdam o tema (senao o navegador desenha um botao branco full) */
#minha-conta-box button, #agentes-box button {
  border:1px solid var(--borda); border-radius:9px; background:var(--surface-2);
  color:var(--texto); cursor:pointer; font-size:.86rem; font-weight:600; padding:9px 16px; }
#minha-conta-box button:hover, #agentes-box button:hover { border-color:var(--acento); }
#senha-trocar { align-self:flex-start; }             /* nao ocupa a largura toda */
#ag-criar { background:var(--acento); color:#fff; border-color:transparent; }  /* acao principal */
#ag-criar:hover { background:var(--acento-2); }
/* sub-bloco "Criar novo agente" destacado do restante do cartao */
.agente-nova { border-top:1px solid var(--borda); margin-top:6px; padding-top:12px;
  display:flex; flex-direction:column; gap:8px; }
.tabela-scroll { overflow-x:auto; }
/* a tabela de agentes usa layout automatico (a de casos e fixed com larguras via JS) */
.tabela-agentes { table-layout:auto; width:100%; }
.tabela-agentes .ag-inst { width:100%; min-width:120px; }
.tabela-agentes td.ag-c { text-align:center; }
.tabela-agentes td.ag-acoes { white-space:nowrap; }
.tabela-agentes td, .tabela-agentes th { padding:8px 10px; }
.tabela-agentes tr.ag-pendente td { background:var(--warn-bg); }
/* Lista de instancias buscadas no servidor (Minha conta) */
.inst-lista { margin-top:8px; }
.inst-opcoes { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.inst-opcao { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--borda); border-radius:9px; background:var(--surface-2);
  color:var(--texto); font-size:.85rem; font-weight:600; padding:7px 12px; }
.inst-opcao:hover { border-color:var(--acento); }

/* ---------- Selecao em lote de casos ---------- */
.lote-barra { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:-8px 0 16px; padding:10px 14px; background:var(--surface-2);
  border:1px solid var(--borda); border-radius:10px; }
.lote-barra[hidden] { display:none; }
#casos-lote-info { font-weight:600; font-size:.9rem; }
#casos-lote-concluir { background:var(--acento); color:#fff; border:1px solid transparent;
  border-radius:9px; padding:9px 16px; font-weight:600; font-size:.86rem; cursor:pointer; }
#casos-lote-concluir:hover:not(:disabled) { background:var(--acento-2); }
#casos-lote-concluir:disabled { opacity:.5; cursor:default; }
/* checkbox desenhado na 1a celula (sem adicionar coluna, para nao mexer no resize) */
#casos-conteudo.sel-on tbody td:first-child { position:relative; padding-left:38px; }
#casos-conteudo.sel-on tbody td:first-child::before { content:""; position:absolute;
  left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px;
  border:2px solid var(--texto-dim); border-radius:4px; background:var(--surface);
  box-sizing:border-box; }
#casos-conteudo.sel-on tr.sel td:first-child::before { background:var(--acento); border-color:var(--acento); }
#casos-conteudo.sel-on tr.sel td:first-child::after { content:""; position:absolute;
  left:19px; top:calc(50% - 1px); width:4px; height:9px; border:solid #fff;
  border-width:0 2px 2px 0; transform:translateY(-55%) rotate(45deg); }
#casos-conteudo.sel-on tr.sel td { background:var(--acento-soft); }

/* ============================ RESPONSIVO ============================ */
/* Telas largas: o formulario dos cards Novos volta a 4 colunas (ha espaco de sobra). */
@media (min-width:1400px) {
  .card-msg-form { grid-template-columns:1fr 1.3fr 1.2fr auto; }
  .card-msg-form select { grid-column:auto; }
  .card-msg-form button { grid-column:auto; }
}
@media (max-width:860px) {
  .app-shell { grid-template-columns:66px 1fr; }
  .sb-resizer { display:none; }
  .logo .logo-txt, .nav-txt, .usuario-box .nav-txt, .envio-modo-box label { display:none; }
  .envio-modo-box { justify-content:center; }
  .card-msg-form, .grade-2 { grid-template-columns:1fr; }
  .aparencia-pop { left:8px; right:auto; width:210px; }
  .metricas-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .topbar { flex-direction:column; align-items:flex-start; gap:10px; }
  .barra-linha { grid-template-columns:120px 1fr 36px; }
  main { padding:16px; }
}