@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* ===== Escala do site: 100% em todas as telas (base 16px, sem zoom/transform) ===== */
html { font-size: 16px; }

/* ================= Cores do sistema ================= */
:root,
:root[data-tema="dourado"] {
  --zt-1: #ffd54a; --zt-2: #f5b700; --zt-3: #e6a400; --zt-4: #d99a00;
  --zt-5: #8a6000; --zt-6: #fff1c7; --zt-7: #fffaeb; --zt-8: #2d2000;
}
:root[data-tema="azul"] {
  --zt-1: #64b5f6; --zt-2: #1e88e5; --zt-3: #1976d2; --zt-4: #1565c0;
  --zt-5: #0d47a1; --zt-6: #e3f0fd; --zt-7: #f3f8fe; --zt-8: #ffffff;
}
:root[data-tema="verde"] {
  --zt-1: #5fd98a; --zt-2: #12a847; --zt-3: #0f9a40; --zt-4: #0b8f3a;
  --zt-5: #076628; --zt-6: #ddf5e5; --zt-7: #f2fbf5; --zt-8: #ffffff;
}
:root {
  --fundo: #f6f6f4;
  --superficie: #ffffff;
  --tinta: #1c1b18;
  --tinta-suave: #6b675f;
  --linha: #e7e5df;
  --perigo: #c2410c;
  --ok: #15803d;
  --raio: 1rem;
  --sombra: 0 1px 2px rgba(28, 27, 24, 0.05), 0 0.375rem 1.25rem rgba(28, 27, 24, 0.05);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tinta);
  background: var(--fundo);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-size: 0.875rem; line-height: 1.5; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--zt-2); outline-offset: 2px; }
.oculto { display: none !important; }
svg { flex: none; }

/* Barras de rolagem discretas (só aparecem dentro de listas longas) */
* { scrollbar-width: thin; scrollbar-color: #d6d3cb transparent; }
::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
::-webkit-scrollbar-thumb { background: #d6d3cb; border-radius: 0.5rem; }

/* ================= Botões e campos ================= */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 0; border-radius: 0.75rem; padding: 0.6875rem 1.25rem; cursor: pointer;
  font-weight: 600; font-size: 0.875rem; white-space: nowrap; transition: filter 0.15s, transform 0.15s;
}
.botao:hover { filter: brightness(1.04); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: 0.55; cursor: not-allowed; }
.botao-principal { background: var(--zt-2); color: var(--zt-8); }
.botao-secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--linha); }
.botao-pequeno { padding: 0.5rem 0.875rem; font-size: 0.8125rem; border-radius: 0.625rem; }
a.botao { text-decoration: none; }
.botao-texto { background: none; border: 0; color: var(--tinta-suave); cursor: pointer; padding: 0.375rem 0.5rem; font-size: 0.8125rem; }
.botao-texto:hover { color: var(--tinta); }
.botao-texto:disabled { opacity: 0.4; cursor: not-allowed; }
.botao-icone {
  border: 0; background: none; border-radius: 0.5rem; min-width: 2rem; height: 2rem; padding: 0 0.5rem; cursor: pointer;
  color: var(--tinta-suave); font-size: 0.9375rem; display: inline-grid; place-items: center;
}
.botao-icone:hover:not(:disabled) { background: var(--fundo); color: var(--tinta); }
.botao-icone:disabled { opacity: 0.35; cursor: not-allowed; }
.perigo { color: var(--perigo) !important; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border: 1px solid var(--linha); border-radius: 0.75rem; padding: 0.625rem 0.75rem;
  background: var(--superficie); color: var(--tinta); width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--zt-3); outline: none; box-shadow: 0 0 0 3px var(--zt-6); }
textarea { resize: vertical; line-height: 1.5; }
.seletor { cursor: pointer; }
.campo { display: grid; gap: 0.375rem; }
.campo label { font-weight: 600; font-size: 0.8125rem; }
.erro { color: var(--perigo); font-size: 0.8125rem; min-height: 1.2em; margin: 0; }
.dica { color: var(--tinta-suave); font-size: 0.75rem; margin: 0; }
.carregando { color: var(--tinta-suave); }
.linha-campos { display: flex; gap: 0.5rem; align-items: center; }
.linha-campos > select, .linha-campos > input { flex: 1; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; align-items: end; }
.campo-curto input[type="number"] { max-width: 8.75rem; }
.opcoes-tipo { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opcao-tipo {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5625rem 0.8125rem; border: 1px solid var(--linha);
  border-radius: 0.75rem; background: var(--superficie); cursor: pointer; font-weight: 500; font-size: 0.8125rem;
}
.opcao-tipo:has(input:checked) { border-color: var(--zt-3); background: var(--zt-7); }
.opcao-tipo:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.chave { display: inline-flex; align-items: center; gap: 0.625rem; cursor: pointer; font-weight: 500; font-size: 0.8125rem; }
.chave input { appearance: none; width: 2.5rem; height: 1.375rem; border-radius: 62.4375rem; background: #cfccc4; position: relative; cursor: pointer; transition: background 0.15s; flex: none; margin: 0; }
.chave input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.chave input:checked { background: var(--zt-2); }
.chave input:checked::after { transform: translateX(1.125rem); }

/* ================= Login ================= */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login-marca { background: var(--zt-7); border-right: 1px solid var(--linha); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 5vw, 3rem); gap: 1.5rem; }
.login-marca img { width: clamp(6.875rem, 14vw, 11.25rem); height: auto; }
.login-marca h1 { font-size: clamp(1.625rem, 3.2vw, 2.5rem); max-width: 14ch; }
.login-marca p { color: var(--tinta-suave); max-width: 40ch; margin: 0.75rem 0 0; }
.login-marca small { color: var(--tinta-suave); }
.login-form { display: grid; place-items: center; padding: 2rem; }
.login-form form { width: min(23.75rem, 100%); display: grid; gap: 1rem; }
.login-form h2 { font-size: 1.5rem; }
.login-form .subtitulo { color: var(--tinta-suave); margin: -0.5rem 0 0.25rem; }
.login-form input { padding: 0.75rem 0.875rem; }
@media (max-width: 800px) { .login { grid-template-columns: 1fr; } }

/* ================= Estrutura do painel ================= */
.app { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 15rem minmax(0, 1fr); overflow: hidden; }
.menu { background: #fafaf9; border-right: 1px solid var(--linha); display: flex; flex-direction: column; padding: 1.375rem 0.875rem 1rem; gap: 1.125rem; min-height: 0; overflow-y: auto; }
.menu-logo { display: block; padding: 0 0.625rem; }
.menu-logo img { width: min(8.125rem, 100%); height: auto; display: block; margin: 0 auto; }
.menu nav { display: grid; gap: 0.25rem; }
.menu nav a {
  position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.6875rem 0.875rem; border-radius: 0.75rem;
  color: var(--tinta); text-decoration: none; font-weight: 500; font-size: 0.875rem;
}
.menu nav a svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--tinta); }
.menu nav a svg.cheio { fill: currentColor; stroke: none; }
.menu nav a:hover { background: #f0efeb; }
.menu nav a[aria-current="page"] { background: var(--zt-6); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zt-2) 25%, transparent); }
.menu nav a[aria-current="page"] svg { color: var(--zt-3); }
.menu nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 0.25rem; border-radius: 0.25rem; background: var(--zt-2); }
.fundo-menu { display: none; }
.menu-cartao { margin-top: auto; display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.875rem; border-radius: 0.875rem; background: var(--zt-7); border: 1px solid var(--zt-6); }
.menu-cartao-icone { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--zt-2); flex: none; }
.menu-cartao strong { display: block; font-size: 0.8125rem; }
.menu-cartao small { display: block; color: var(--tinta-suave); font-size: 0.75rem; line-height: 1.4; }

.principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0.75rem clamp(0.75rem, 2vw, 1.375rem) clamp(0.75rem, 2vw, 1.25rem); gap: 0.75rem; }
.topo { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; flex: none; }
.botao-menu { display: none; margin-right: auto; border: 1px solid var(--linha); background: var(--superficie); border-radius: 0.75rem; width: 2.625rem; height: 2.625rem; cursor: pointer; place-items: center; }
.botao-menu svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.topo-direita { display: flex; align-items: center; gap: 0.625rem; }
.pilula {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 62.4375rem;
  font-size: 0.75rem; font-weight: 600; background: var(--zt-7); color: var(--tinta-suave); white-space: nowrap;
}
.pilula::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #a8a39a; }
.pilula[data-estado="conectado"] { background: #ecf8f0; color: var(--ok); }
.pilula[data-estado="conectado"]::before { background: var(--ok); }
.pilula[data-estado="aguardando_qr"]::before, .pilula[data-estado="conectando"]::before, .pilula[data-estado="reconectando"]::before { background: var(--zt-2); }
.conta { position: relative; }
.avatar { width: 2.625rem; height: 2.625rem; border-radius: 50%; border: 0; background: var(--zt-6); color: var(--zt-5); font-weight: 700; font-size: 1rem; cursor: pointer; }
.conta-menu { position: absolute; right: 0; top: 3.125rem; z-index: 30; background: var(--superficie); border: 1px solid var(--linha); border-radius: 0.875rem; box-shadow: var(--sombra); padding: 0.75rem; display: grid; gap: 0.5rem; min-width: 13.75rem; }
.conta-menu span { font-size: 0.75rem; color: var(--tinta-suave); overflow-wrap: anywhere; }
.conta-menu button { border: 1px solid var(--linha); background: var(--superficie); border-radius: 0.625rem; padding: 0.5rem; cursor: pointer; font-weight: 600; }

.painel-conteudo {
  flex: 1; min-height: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: 1.25rem;
  padding: clamp(1rem, 2.2vw, 1.75rem); display: flex; flex-direction: column; gap: clamp(0.75rem, 1.6vw, 1.25rem); overflow: hidden;
}
.cabecalho-pagina { flex: none; }
.cabecalho-pagina h1 { font-size: clamp(1.25rem, 2vw, 1.625rem); }
.cabecalho-pagina p { margin: 2px 0 0; color: var(--tinta-suave); font-size: 0.8125rem; }
.pagina { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(0.625rem, 1.4vw, 1rem); }
.vazio { border: 1px dashed var(--linha); border-radius: var(--raio); padding: 2.25rem; text-align: center; color: var(--tinta-suave); margin: auto 0; }
.vazio h2 { color: var(--tinta); font-size: 1.125rem; margin-bottom: 0.375rem; }
.rolavel { flex: 1; min-height: 0; overflow-y: auto; }

/* ================= Início ================= */
.inicio-topo { display: flex; gap: 0.875rem; align-items: stretch; flex: none; }
.conexao {
  flex: 1; display: flex; align-items: center; gap: 1.125rem; padding: 1rem 1.25rem; border-radius: var(--raio);
  background: var(--zt-7); border: 1px solid var(--zt-6); min-height: 0;
}
.conexao-texto { flex: 1; display: grid; gap: 0.375rem; min-width: 0; }
.conexao-texto h3 { font-size: 1rem; }
.conexao-texto p { margin: 0; color: var(--tinta-suave); font-size: 0.8125rem; }
.conexao-numero { font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: 700; }
.passos { margin: 0; padding-left: 1.125rem; color: var(--tinta-suave); font-size: 0.8125rem; }
.passos strong { color: var(--tinta); }
.conexao-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.conexao-visual { flex: none; display: grid; place-items: center; }
.qr-moldura { background: #fff; padding: 0.5rem; border-radius: 0.75rem; border: 2px solid var(--zt-3); }
.qr-moldura img { display: block; width: clamp(9.375rem, 22vh, 13.125rem); height: auto; aspect-ratio: 1; }
.selo { width: 5.25rem; height: 5.25rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; text-align: center; padding: 0.625rem; background: var(--superficie); border: 2px dashed var(--linha); color: var(--tinta-suave); }
.selo[data-estado="conectado"] { border: 3px solid var(--ok); color: var(--ok); }
.girando { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0.25rem solid var(--zt-6); border-top-color: var(--zt-2); animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation: none; } }

.periodo { display: flex; align-self: flex-start; border: 1px solid var(--linha); border-radius: 62.4375rem; padding: 3px; background: var(--superficie); }
.periodo button { border: 0; background: none; padding: 0.5rem 0.875rem; border-radius: 62.4375rem; cursor: pointer; font-weight: 500; font-size: 0.8125rem; color: var(--tinta-suave); white-space: nowrap; }
.periodo button.ativo { background: var(--zt-2); color: var(--zt-8); font-weight: 600; }

.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; flex: none; }
.indicador { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--linha); }
.indicador-icone { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--zt-6); color: var(--zt-5); display: grid; place-items: center; font-size: 1rem; flex: none; }
.indicador strong { display: block; font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.1; }
.indicador div span { font-size: 0.75rem; color: var(--tinta-suave); }

.inicio-baixo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.75rem; }
.quadro { min-height: 0; display: flex; flex-direction: column; gap: 0.625rem; padding: 1rem 1.125rem; border-radius: var(--raio); border: 1px solid var(--linha); border-top: 3px solid var(--zt-2); }
.quadro h2 { font-size: 0.9375rem; flex: none; }
.atividades { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; display: grid; align-content: start; gap: 2px; }
.atividades li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--fundo); font-size: 0.8125rem; }
.atividades li small { color: var(--tinta-suave); white-space: nowrap; }
.temperaturas { display: grid; gap: 0.75rem; align-content: start; overflow-y: auto; min-height: 0; }
.temperatura { display: grid; gap: 0.25rem; font-size: 0.8125rem; }
.temperatura div { display: flex; justify-content: space-between; }
.barra-fundo { height: 0.625rem; border-radius: 62.4375rem; background: var(--fundo); overflow: hidden; }
.barra-cheia { height: 100%; border-radius: 62.4375rem; background: var(--zt-2); }
.barra-cheia[data-t="quente"] { background: #e8590c; }
.barra-cheia[data-t="morno"] { background: var(--zt-2); }
.barra-cheia[data-t="frio"] { background: #4c8bd6; }
.barra-cheia[data-t="sem"] { background: #c9c5bc; }

/* ================= Barras e listas ================= */
.barra { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; flex: none; }
.barra .seletor { max-width: 15rem; }
.barra .busca { max-width: 17.5rem; }
.barra-texto { margin: 0; color: var(--tinta-suave); font-size: 0.8125rem; flex: 1; min-width: 12.5rem; }
.barra-espaco { flex: 1; }
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; overflow-y: auto; min-height: 0; flex: 1; align-content: start; }
.item { background: var(--superficie); padding: 0.875rem 1.125rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; border: 1px solid var(--linha); border-radius: 0.875rem; }
.item-texto { display: grid; gap: 2px; min-width: 0; }
.item-meta { font-size: 0.75rem; color: var(--tinta-suave); }
.item-previa { margin: 2px 0 0; color: var(--tinta-suave); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-acoes { display: flex; align-items: center; gap: 0.625rem; flex: none; }

/* ================= Mensagens ================= */
.grade-mensagens { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr)); gap: 0.875rem; align-content: start; padding: 2px; }
.cartao-mensagem { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.875rem; border: 1px solid var(--linha); border-radius: 1rem; background: var(--superficie); min-height: 0; }
.cartao-mensagem header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.cartao-mensagem h3 { font-size: 0.875rem; overflow-wrap: anywhere; }
.etiqueta { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 3px 0.5rem; border-radius: 62.4375rem; background: var(--zt-6); color: var(--zt-5); white-space: nowrap; }
.chat { background: #efeae2; border-radius: 0.75rem; padding: 0.625rem; flex: 1; }
.balao { background: #d9fdd3; border-radius: 0.625rem 0.625rem 2px 0.625rem; padding: 0.5rem 0.625rem; font-size: 0.8125rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); max-height: 7.5rem; overflow: hidden; margin-left: auto; width: fit-content; max-width: 100%; }
.balao code { font-family: ui-monospace, Consolas, monospace; background: rgba(0, 0, 0, 0.06); padding: 0 3px; border-radius: 0.25rem; }
.cartao-mensagem footer { display: flex; justify-content: flex-end; gap: 0.25rem; }

/* Janela (pop-up) */
.janela { border: 0; border-radius: 1.25rem; padding: 0; width: min(47.5rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); box-shadow: 0 1.875rem 5rem rgba(28, 27, 24, 0.3); }
.janela::backdrop { background: rgba(28, 27, 24, 0.45); }
.formulario { display: grid; gap: 0.875rem; padding: clamp(1.125rem, 3vw, 1.625rem); }
.formulario h2 { font-size: 1.125rem; }
.janela-acoes { display: flex; justify-content: flex-end; gap: 0.625rem; }

/* Editor de mensagem estilo WhatsApp */
.editor-msg { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; }
.editor-escrita { display: grid; gap: 0.5rem; align-content: start; }
.ferramentas { display: flex; flex-wrap: wrap; gap: 2px; padding: 0.25rem; border: 1px solid var(--linha); border-bottom: 0; border-radius: 0.75rem 0.75rem 0 0; background: #fafaf9; position: relative; }
.ferramentas button { border: 0; background: none; min-width: 2.125rem; height: 2rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem; color: var(--tinta); padding: 0 0.5rem; }
.ferramentas button:hover { background: var(--zt-6); }
.ferramentas .separador { width: 1px; background: var(--linha); margin: 0.25rem; }
.editor-escrita textarea { border-radius: 0 0 0.75rem 0.75rem; min-height: 11.25rem; }
.emojis { position: absolute; top: 2.5rem; left: 0; z-index: 10; width: min(20rem, 80vw); max-height: 13.75rem; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 0.5rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 0.75rem; box-shadow: var(--sombra); }
.emojis button { font-size: 1.25rem; height: 2.125rem; }
.previa-whatsapp { display: grid; gap: 0.375rem; align-content: start; }
.previa-whatsapp .chat { min-height: 11.25rem; max-height: 18.75rem; overflow-y: auto; background-color: #efeae2; }
.previa-whatsapp .balao { max-height: none; }

/* ================= Editor de funil ================= */
.editor-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; flex: none; }
.editor-titulo { flex: 1 1 15rem; font-size: 1rem; font-weight: 700; }
.editor-projeto { flex: 0 1 12.5rem; }
.editor-acoes { display: flex; gap: 0.5rem; margin-left: auto; }
.erro-topo:empty { display: none; }
.erro-topo { flex: none; padding: 0.5rem 0.75rem; border-radius: 0.625rem; background: #fff3ec; border: 1px solid #f1c4a8; }

.mapa {
  position: relative; overflow: hidden; flex: 1; min-height: 18.75rem;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background-color: #fbfbf9; background-image: radial-gradient(#d9d6ce 1px, transparent 1px); background-size: 1.375rem 1.375rem;
  cursor: grab; touch-action: none; user-select: none;
}
.mapa.movendo { cursor: grabbing; }
.mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 0.875rem; box-shadow: 0 1px 3px rgba(28, 27, 24, 0.08); }
.mundo .cartao { position: absolute; width: 20.625rem; cursor: move; user-select: none; }
.mundo .cartao-inicio { width: 15.625rem; border-top: 0.25rem solid var(--zt-2); }
.mundo .cartao.arrastando { box-shadow: 0 1rem 2.5rem rgba(28, 27, 24, 0.18); z-index: 5; }
.mundo .cartao input, .mundo .cartao select, .mundo .cartao textarea { cursor: auto; user-select: text; }
.mundo .cartao::after { content: ""; position: absolute; right: -0.4375rem; top: 1.4375rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--superficie); border: 2px solid var(--zt-3); }
.mundo .cartao:not(.cartao-inicio)::before { content: ""; position: absolute; left: -0.4375rem; top: 1.4375rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--zt-3); }
.linhas { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.linha { fill: none; stroke: var(--zt-3); stroke-width: 2.2; }
.linha-rotulo-fundo { fill: var(--zt-2); }
.linha-rotulo { fill: var(--zt-8); font-size: 0.6875rem; font-weight: 700; font-family: inherit; }
.mapa-ferramentas { position: absolute; right: 0.875rem; bottom: 0.875rem; display: flex; align-items: center; gap: 0.25rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 0.75rem; padding: 0.375rem; box-shadow: var(--sombra); cursor: default; }
.mapa-ferramentas .botao-icone { font-size: 1.125rem; font-weight: 600; }
.zoom-valor { min-width: 3rem; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--tinta-suave); }

.cartao-topo { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--linha); }
.cartao-inicio .cartao-topo strong { font-size: 0.9375rem; }
.cartao-icone { width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--zt-6); color: var(--zt-5); display: grid; place-items: center; font-size: 0.75rem; }
.etapa-numero { width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--zt-2); color: var(--zt-8); display: grid; place-items: center; font-weight: 700; flex: none; font-size: 0.8125rem; }
.cartao-nome { border: 1px solid transparent !important; font-weight: 600; padding: 0.375rem 0.5rem !important; }
.cartao-nome:hover { border-color: var(--linha) !important; }
.cartao-corpo { padding: 0.875rem; display: grid; gap: 0.75rem; }
.cartao-corpo > *, .cartao-secao > * { min-width: 0; }
.cartao-secao { display: grid; gap: 0.5rem; }
.cartao-rotulo { font-size: 0.75rem; font-weight: 600; color: var(--tinta-suave); }
.cartao-rodape { display: flex; justify-content: flex-end; gap: 0.25rem; padding: 0.5rem 0.625rem; border-top: 1px solid var(--linha); }
.cartao .linha-campos { gap: 0.375rem; font-size: 0.8125rem; }
.cartao .linha-campos > span { white-space: nowrap; color: var(--tinta-suave); }
.cartao select, .cartao input:not([type="checkbox"]):not([type="radio"]) { padding: 0.5rem 0.625rem; font-size: 0.8125rem; border-radius: 0.625rem; }
.numero-curto, .intervalo input { max-width: 4rem !important; flex: 0 0 4rem !important; }
.botao-bloco { width: 100%; display: grid; gap: 2px; text-align: left; padding: 0.75rem 0.875rem; border-radius: 0.75rem; cursor: pointer; border: 1px solid var(--zt-6); background: var(--zt-7); color: var(--tinta); }
.botao-bloco span { font-size: 0.75rem; color: var(--tinta-suave); }
.botao-bloco:hover { border-color: var(--zt-3); }
.botao-adicionar { justify-self: start; border: 1px dashed var(--linha); background: none; border-radius: 0.625rem; padding: 0.375rem 0.75rem; cursor: pointer; color: var(--zt-5); font-size: 0.8125rem; font-weight: 600; }
.botao-adicionar:hover { border-color: var(--zt-3); background: var(--zt-7); }
.segmentos { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linha); border-radius: 0.625rem; overflow: hidden; }
.segmentos button { border: 0; background: var(--superficie); padding: 0.5rem 0.25rem; cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--tinta-suave); }
.segmentos button + button { border-left: 1px solid var(--linha); }
.segmentos button.ativo { background: var(--zt-6); color: var(--zt-5); }
.respostas { display: grid; gap: 0.5rem; }
.resposta { display: grid; grid-template-columns: 1.625rem minmax(0, 1fr) 0.875rem minmax(0, 1fr) 1.75rem; gap: 0.375rem; align-items: center; }
.caminho-letra { width: 1.625rem; height: 1.625rem; border-radius: 0.5rem; background: var(--zt-6); color: var(--zt-5); display: grid; place-items: center; font-weight: 700; font-size: 0.75rem; }
.resposta .botao-icone { min-width: 1.75rem; padding: 0; }
.seta { color: var(--tinta-suave); text-align: center; }
.mais { border: 1px solid var(--linha); border-radius: 0.625rem; padding: 0.5rem 0.75rem; background: var(--fundo); }
.mais summary { cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--tinta-suave); }
.mais[open] summary { margin-bottom: 0.625rem; }
.mais-corpo { display: grid; gap: 0.5rem; }
.texto-antigo { flex: 1; font-size: 0.75rem; color: var(--tinta-suave); background: var(--superficie); border: 1px dashed var(--linha); border-radius: 0.625rem; padding: 0.5rem 0.625rem; overflow-wrap: anywhere; }

/* ================= Avisos ================= */
#avisos { position: fixed; right: 1.25rem; bottom: 1.25rem; display: grid; gap: 0.5rem; z-index: 50; }
.aviso { background: var(--tinta); color: #fff; padding: 0.75rem 1rem; border-radius: 0.75rem; box-shadow: var(--sombra); max-width: 22.5rem; font-size: 0.8125rem; }
.aviso-erro { background: var(--perigo); }

/* ================= Telas menores ================= */
@media (max-width: 1180px) {
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .app { grid-template-columns: 4.75rem minmax(0, 1fr); }
  .menu { padding: 1rem 0.625rem; align-items: center; }
  .menu-logo img { width: 3rem; }
  .menu nav a { padding: 0.6875rem; justify-content: center; }
  .menu nav a span, .menu-cartao { display: none; }
  .inicio-baixo { grid-template-columns: 1fr; }
  .inicio-baixo .quadro:last-child { display: none; }
  .editor-msg { grid-template-columns: 1fr; }
  .previa-whatsapp .chat { min-height: 5.625rem; }
}
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .menu { position: fixed; inset: 0 auto 0 0; width: 15.625rem; z-index: 40; align-items: stretch; transform: translateX(-105%); transition: transform 0.2s; }
  .menu nav a { justify-content: flex-start; }
  .menu nav a span { display: inline; }
  .menu-logo img { width: 6.875rem; }
  body.menu-aberto .menu { transform: none; box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.2); }
  .fundo-menu { display: none; }
  body.menu-aberto .fundo-menu { display: block; position: fixed; inset: 0; background: rgba(28, 27, 24, 0.35); z-index: 35; }
  .botao-menu { display: grid; }
  .pilula { font-size: 0.6875rem; padding: 0.375rem 0.625rem; }
  .inicio-topo { flex-direction: column; }
  .conexao { flex-direction: column; align-items: stretch; }
  .conexao-visual { order: -1; }
  .indicador { padding: 0.625rem 0.75rem; }
  .indicador-icone { width: 2rem; height: 2rem; }
  .grade-2 { grid-template-columns: 1fr; }
  .item { flex-direction: column; align-items: flex-start; }
  .painel-conteudo { overflow-y: auto; }
  .editor-acoes { width: 100%; }
  .editor-acoes .botao { flex: 1; }
}
@media (max-height: 700px) and (min-width: 721px) {
  .inicio-baixo .quadro { padding: 0.75rem 0.875rem; }
  .indicador { padding: 0.625rem 0.875rem; }
  .selo { width: 4rem; height: 4rem; }
}

/* ================= Peças das telas novas ================= */

/* Abas (Funis tradicionais: Funis / Em andamento / Histórico) */
.abas { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--linha); flex: none; overflow-x: auto; }
.aba { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; margin-bottom: -1px; text-decoration: none; color: var(--tinta-suave); font-weight: 600; font-size: 0.8125rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.aba:hover { color: var(--tinta); }
.aba.ativa { color: var(--tinta); border-bottom-color: var(--zt-2); }
.aba-selo { min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 62.4375rem; background: var(--zt-6); color: var(--zt-5); font-size: 0.6875rem; display: inline-grid; place-items: center; }
.aba-selo.alerta { background: #fde8e0; color: var(--perigo); }

/* Etiquetas coloridas */
.chip { display: inline-block; padding: 3px 0.625rem; border-radius: 62.4375rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.chip-azul, .chip-frio { background: #e6f0ff; color: #1d4ed8; }
.chip-amarelo, .chip-morno { background: var(--zt-6); color: var(--zt-5); }
.chip-vermelho { background: #fde8e0; color: var(--perigo); }
.chip-quente { background: #ffe8d6; color: #c2410c; }
.chip-cinza { background: #eeece7; color: var(--tinta-suave); }
.chip-verde { background: #e5f6ea; color: var(--ok); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* Tabelas (rolam por dentro, nunca a página) */
.tabela-moldura { border: 1px solid var(--linha); border-radius: var(--raio); overflow: auto; min-height: 0; flex: 1; }
.tabela-moldura.tabela-curta { flex: none; max-height: 21.25rem; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.tabela th { position: sticky; top: 0; z-index: 1; background: #fafaf9; text-align: left; font-size: 0.75rem; color: var(--tinta-suave); font-weight: 600; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--fundo); vertical-align: middle; }
.tabela td small { display: block; color: var(--tinta-suave); font-size: 0.75rem; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.linha-atencao td { background: #fff8f4; }
.acoes-tabela { white-space: nowrap; text-align: right; }
.nota-tabela { padding: 0.625rem 0.875rem; margin: 0; }

/* Linha do tempo de um atendimento */
.linha-tempo { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; }
.linha-tempo li { position: relative; display: flex; gap: 0.75rem; padding: 0.5rem 0; }
.linha-tempo li::before { content: ""; position: absolute; left: 0.8125rem; top: 2.25rem; bottom: -0.375rem; width: 2px; background: var(--linha); }
.linha-tempo li:last-child::before { display: none; }
.tempo-icone { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--fundo); display: grid; place-items: center; font-size: 0.8125rem; flex: none; }
.linha-tempo li.tempo-bom .tempo-icone { background: #e5f6ea; color: var(--ok); }
.linha-tempo li.tempo-ruim .tempo-icone { background: #fde8e0; color: var(--perigo); }
.linha-tempo small { display: block; color: var(--tinta-suave); font-size: 0.75rem; }
.lista-historico { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; max-height: 50vh; overflow-y: auto; }
.lista-historico li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--linha); border-radius: 0.75rem; }
.lista-historico small { display: block; color: var(--tinta-suave); font-size: 0.75rem; }

/* Sino de notificações e aviso do robô */
.sino { position: relative; }
.botao-sino { position: relative; width: 2.625rem; height: 2.625rem; border-radius: 50%; border: 1px solid var(--linha); background: var(--superficie); cursor: pointer; display: grid; place-items: center; color: var(--tinta); }
.botao-sino svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.botao-sino.com-alerta { border-color: var(--perigo); color: var(--perigo); }
.sino-contagem { position: absolute; top: -0.3125rem; right: -0.3125rem; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: 62.4375rem; background: var(--perigo); color: #fff; font-size: 0.6875rem; font-weight: 700; display: grid; place-items: center; }
.sino-painel { position: absolute; right: 0; top: 3.125rem; z-index: 30; width: min(23.75rem, calc(100vw - 1.5rem)); max-height: min(70vh, 32.5rem); background: var(--superficie); border: 1px solid var(--linha); border-radius: 1rem; box-shadow: 0 1.25rem 3.125rem rgba(28, 27, 24, 0.18); display: flex; flex-direction: column; overflow: hidden; }
.sino-painel > header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--linha); flex: none; }
.sino-lista { overflow-y: auto; min-height: 0; }
.sino-item { display: flex; gap: 0.625rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--fundo); }
.sino-item.lida { opacity: 0.7; }
.sino-item.aberta { background: #fff8f4; opacity: 1; }
.sino-item p { margin: 2px 0; font-size: 0.8125rem; color: var(--tinta-suave); }
.sino-item small { color: var(--tinta-suave); font-size: 0.75rem; display: block; }
.sino-icone { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.8125rem; flex: none; background: var(--fundo); }
.sino-problema .sino-icone { background: #fde8e0; color: var(--perigo); }
.sino-resolvido .sino-icone { background: #e5f6ea; color: var(--ok); }
.sino-link { display: inline-block; margin-top: 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--zt-5); }
.sino-vazio { padding: 1.25rem 1rem; margin: 0; }
.aviso-robo { flex: none; background: #fff3ec; border: 1px solid #f1c4a8; color: var(--perigo); border-radius: 0.75rem; padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-weight: 500; }

/* Projetos -> funis -> mensagens */
.grupos { display: grid; gap: 1rem; align-content: start; padding: 2px; }
.grupo-projeto { border: 1px solid var(--linha); border-radius: 1rem; padding: 1rem 1.125rem; display: grid; gap: 0.75rem; background: var(--superficie); }
.grupo-projeto-topo { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.grupo-projeto-topo h2 { font-size: 1.0625rem; }
.grupo-funil { border-left: 3px solid var(--zt-2); padding-left: 0.875rem; display: grid; gap: 0.5rem; }
.grupo-funil-topo { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.grupo-funil-topo h3 { font-size: 0.875rem; }
.grupo-vazio { margin: 0; }
.lista-funis, .lista-mensagens { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.linha-funil, .linha-mensagem { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0.875rem; border: 1px solid var(--linha); border-radius: 0.75rem; background: var(--superficie); }
.linha-funil-nome { font-weight: 600; color: var(--tinta); text-decoration: none; }
.linha-funil-nome:hover { color: var(--zt-5); }
.linha-mensagem-texto { display: grid; gap: 0.375rem; min-width: 0; flex: 1; }
.chat-curto { max-height: 5.25rem; overflow: hidden; padding: 0.5rem; }
.var-nome { background: rgba(0, 0, 0, 0.07); border-radius: 0.25rem; padding: 0 3px; }
.janela-estreita { width: min(28.75rem, calc(100vw - 1.5rem)); }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-items: start; }

/* Relatórios */
.relatorio { display: grid; gap: 0.875rem; align-content: start; }
.indicadores-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nota-indicador { display: block; color: var(--tinta-suave); font-size: 0.6875rem; }
.relatorio-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.quadro-largo { grid-column: 1 / -1; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.ranking li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--fundo); font-size: 0.8125rem; }
.etapas-relatorio { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.etapas-relatorio li { display: grid; grid-template-columns: minmax(6.875rem, 12.5rem) minmax(0, 1fr) 2.5rem; gap: 0.75rem; align-items: center; font-size: 0.8125rem; }
.etapa-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Configurações e Administração */
.config-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; align-content: start; }
.config-grade .quadro { align-content: start; }
.config-grade .botao { justify-self: start; }
.temas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.tema-opcao { display: grid; justify-items: center; gap: 0.375rem; padding: 0.75rem 0.5rem; border: 2px solid var(--linha); border-radius: 0.875rem; background: var(--superficie); cursor: pointer; font-size: 0.8125rem; }
.tema-opcao img { width: 4rem; height: 4rem; object-fit: contain; }
.tema-opcao.ativo { border-color: var(--zt-2); background: var(--zt-7); }
.pontos { display: flex; gap: 3px; }
.pontos i { width: 0.75rem; height: 0.75rem; border-radius: 50%; display: block; }
.plano-nome { font-size: 1.125rem; font-weight: 700; margin: 0; }
.admin-topo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; flex: none; }
.numero-curto-campo { max-width: 6.25rem !important; }

@media (max-width: 1024px) {
  .indicadores-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .config-grade, .relatorio-grade, .admin-topo, .grade-3 { grid-template-columns: 1fr; }
  .indicadores-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linha-funil, .linha-mensagem { flex-direction: column; align-items: flex-start; }
  .etapas-relatorio li { grid-template-columns: 1fr 2.5rem; }
  .etapas-relatorio .barra-fundo { grid-column: 1 / -1; order: 3; }
  .sino-painel { position: fixed; left: 0.75rem; right: 0.75rem; top: 4rem; width: auto; }
}
.editor-projeto-nome { display: inline-flex; flex-direction: column; line-height: 1.2; padding: 0 0.375rem; }
.editor-projeto-nome small { font-size: 0.6875rem; color: var(--tinta-suave); }

/* Lembrete "Você ainda está aí?" */
.janela { overflow-y: auto; }
.secao-lembrete { border: 1px solid var(--zt-6); background: var(--zt-7); border-radius: 0.875rem; padding: 0.875rem 1rem; display: grid; gap: 0.625rem; }
.secao-lembrete h3 { font-size: 0.875rem; }
.lembrete-etapa { border: 1px solid var(--zt-6); background: var(--zt-7); border-radius: 0.75rem; padding: 0.625rem 0.75rem; display: grid; gap: 0.5rem; }
.lembrete-etapa > strong { font-size: 0.75rem; }
.lembrete-campos { display: grid; gap: 0.5rem; }
.lembrete-campos textarea { min-height: 4.375rem; font-size: 0.8125rem; }
.linha-campos.quebra { flex-wrap: wrap; }
.barra .seletor { max-width: 12.5rem; }
.barra .busca { max-width: 15rem; flex: 1 1 11.25rem; }
.config-grade .botao { align-self: flex-start; }
.quadro .botao-pequeno, .quadro .linha-campos .botao { align-self: auto; }

/* Linhas do mapa: sem os círculos antigos nos cartões; alças para arrastar */
.mundo .cartao::after, .mundo .cartao:not(.cartao-inicio)::before { content: none; display: none; }
.linhas { z-index: 1; }
.linha { stroke-linejoin: round; stroke-linecap: round; }
.linha-ponto-saida { fill: var(--zt-3); }
.linha-alca { fill: var(--superficie); stroke: var(--zt-3); stroke-width: 2; cursor: grab; pointer-events: all; opacity: 0.9; transition: r 0.1s; }
.linha-alca:hover { fill: var(--zt-2); r: 8; }
.linha-alca.ajustada { fill: var(--zt-2); }
.mapa:active .linha-alca { cursor: grabbing; }
.mapa-ferramentas { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 1.75rem); }
.mapa-ferramentas .botao-texto-icone { font-size: 0.75rem; font-weight: 600; padding: 0 0.625rem; width: auto; white-space: nowrap; }
.mapa-ferramentas .botao-texto-icone.ativo { background: var(--zt-6); color: var(--zt-5); }
.separador-vertical { width: 1px; align-self: stretch; background: var(--linha); margin: 0.25rem 2px; }

/* Administração: um cartão por robô, com o consumo do servidor */
.admin-robos { display: grid; grid-template-columns: repeat(auto-fill, minmax(18.125rem, 1fr)); gap: 0.75rem; flex: none; }
.metricas { list-style: none; margin: 0; padding: 0; display: grid; }
.metricas li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.375rem 0; border-bottom: 1px solid var(--fundo); font-size: 0.8125rem; }
.metricas li:last-child { border-bottom: 0; }
.metricas strong { font-weight: 600; text-align: right; display: inline-flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; justify-content: flex-end; }

/* ================= Menu recolhível ================= */
.menu-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 0.25rem; }
.menu-recolher { width: 2rem; height: 2rem; border: 1px solid var(--linha); background: var(--superficie); border-radius: 0.625rem; cursor: pointer; display: grid; place-items: center; color: var(--tinta-suave); flex: none; }
.menu-recolher:hover { color: var(--tinta); background: var(--fundo); }
.menu-recolher svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.app { transition: grid-template-columns 0.2s ease; }
@media (min-width: 1025px) {
  body.menu-recolhido .app { grid-template-columns: 4.75rem minmax(0, 1fr); }
  body.menu-recolhido .menu { padding: 1rem 0.625rem; align-items: center; }
  body.menu-recolhido .menu-topo { flex-direction: column; gap: 0.625rem; padding: 0; }
  body.menu-recolhido .menu-logo { padding: 0; }
  body.menu-recolhido .menu-logo img { width: 2.75rem; }
  body.menu-recolhido .menu nav a { justify-content: center; padding: 0.6875rem; }
  body.menu-recolhido .menu nav a span, body.menu-recolhido .menu-cartao { display: none; }
  body.menu-recolhido .menu-recolher svg { transform: rotate(180deg); }
}
@media (max-width: 1024px) { .menu-recolher { display: none; } .menu-topo { justify-content: center; padding: 0; } }
.pilula[role="button"] { cursor: pointer; }
.pilula[role="button"]:hover { filter: brightness(0.97); }

/* ================= Faixa de alertas no topo ================= */
.aviso-robo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1.375rem; }
.aviso-robo.oculto { display: none; }
.alerta-item { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.625rem; }
.alerta-botao { border: 0; background: var(--perigo); color: #fff; padding: 3px 0.875rem; border-radius: 62.4375rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; text-decoration: none; }

/* ================= Início: conversas + resumo ================= */
.inicio { gap: 0.625rem; }
.inicio-alternar { display: none; flex: none; gap: 0.25rem; background: var(--fundo); padding: 3px; border-radius: 62.4375rem; align-self: flex-start; }
.inicio-alternar button { border: 0; background: none; border-radius: 62.4375rem; padding: 0.4375rem 1.125rem; font-weight: 600; font-size: 0.8125rem; color: var(--tinta-suave); cursor: pointer; }
.inicio-alternar button.ativa { background: var(--zt-2); color: var(--zt-8); }
.inicio-grade { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(20.625rem, 26.875rem) minmax(0, 1fr); gap: 0.875rem; }
.conversas, .resumo { min-height: 0; display: flex; flex-direction: column; }
.conversas { border: 1px solid var(--linha); border-radius: 1rem; background: var(--superficie); overflow: hidden; }
.conversas-topo { padding: 0.875rem 0.875rem 0.75rem; display: grid; gap: 0.625rem; flex: none; border-bottom: 1px solid var(--linha); }
.conversas-topo h2 { font-size: 1.0625rem; }
.abas-conversa { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--fundo); border-radius: 62.4375rem; padding: 3px; gap: 2px; }
.abas-conversa button { border: 0; background: none; padding: 0.4375rem 0.25rem; border-radius: 62.4375rem; font-size: 0.75rem; font-weight: 600; color: var(--tinta-suave); cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 0.375rem; white-space: nowrap; }
.abas-conversa button.ativa { background: var(--zt-2); color: var(--zt-8); }
.abas-conversa .contagem { min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: 62.4375rem; background: rgba(0, 0, 0, 0.1); font-size: 0.6875rem; display: inline-grid; place-items: center; }
.abas-conversa button.ativa .contagem { background: rgba(255, 255, 255, 0.4); }
.conversas-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.conversas-filtros .seletor, .conversas-topo .busca { padding: 0.5rem 0.625rem; font-size: 0.8125rem; max-width: none; }
.conversas-lista { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.conversa { width: 100%; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 0.875rem; border: 0; border-bottom: 1px solid var(--fundo); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.conversa:hover { background: var(--zt-7); }
.avatar-conversa { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--zt-6); color: var(--zt-5); display: grid; place-items: center; font-weight: 700; font-size: 0.875rem; }
.conversa-corpo { min-width: 0; display: grid; gap: 3px; }
.conversa-linha1 { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.conversa-linha1 small, .conversa-numero, .conversa-data { color: var(--tinta-suave); font-size: 0.75rem; }
.conversa-previa { margin: 0; font-size: 0.8125rem; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-etiquetas { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 2px; }
.conversa-etiquetas .chip { font-size: 0.6875rem; padding: 2px 0.5rem; }
.conversas-vazio { padding: 2rem 1.25rem; text-align: center; list-style: none; display: grid; gap: 0.25rem; }
.conversas-mais { list-style: none; padding: 0.75rem; text-align: center; }

.resumo { gap: 0.625rem; }
.resumo-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; flex: none; }
.resumo-topo .periodo { align-self: auto; flex-wrap: wrap; }
.periodo-datas { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.periodo-datas label { display: flex; gap: 0.375rem; align-items: center; font-size: 0.8125rem; font-weight: 600; }
.periodo-datas input { width: 9.375rem; padding: 0.4375rem 0.625rem; }
.periodo-rotulo { font-size: 0.8125rem; color: var(--tinta-suave); font-weight: 600; }
.periodo-aviso { flex: none; }
.periodo-aviso:empty { display: none; }
.resumo-corpo { display: grid; gap: 0.75rem; align-content: start; padding-right: 2px; }
.indicadores-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.graficos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); gap: 0.75rem; }
.quadro-grafico { align-content: start; }
.grafico-svg { width: 100%; height: auto; max-height: 11.5rem; display: block; }
.grafico-svg text { font-size: 0.625rem; fill: var(--tinta-suave); font-family: inherit; }
.grafico-grade { stroke: var(--linha); stroke-width: 1; }
.grafico-linha { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.grafico-legenda { display: flex; gap: 0.875rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--tinta-suave); }
.legenda-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.legenda-item i, .pizza-legenda i { width: 0.625rem; height: 0.625rem; border-radius: 50%; display: block; }
.pizza { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.875rem; align-items: center; }
.pizza-svg { width: 100%; max-width: 8.125rem; height: auto; }
.pizza-vazia { fill: none; stroke: var(--fundo); stroke-width: 22; }
.pizza-svg .pizza-total { font-size: 1.125rem; font-weight: 700; fill: var(--tinta); }
.pizza-svg .pizza-sub { font-size: 0.5rem; }
.pizza-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; font-size: 0.75rem; }
.pizza-legenda li { display: grid; grid-template-columns: 0.625rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.barras-h { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.barras-h li { display: grid; grid-template-columns: minmax(5rem, 34%) 1fr 2rem; gap: 0.625rem; align-items: center; font-size: 0.75rem; }
.barras-h-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras-h-trilha { height: 0.625rem; border-radius: 62.4375rem; background: var(--fundo); overflow: hidden; }
.barras-h-cheia { height: 100%; border-radius: 62.4375rem; }
.barras-h strong { text-align: right; }
.grafico-vazio { margin: auto; padding: 1.5rem 0; text-align: center; }

@media (max-width: 1180px) { .indicadores-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .inicio-alternar { display: flex; }
  .inicio-grade { grid-template-columns: minmax(0, 1fr); }
  .inicio[data-vista="conversas"] .resumo { display: none; }
  .inicio[data-vista="resumo"] .conversas { display: none; }
  .pizza { grid-template-columns: 6.25rem minmax(0, 1fr); }
}

/* ================= Pop-up de conexão do WhatsApp ================= */
.janela-conexao { width: min(53.75rem, calc(100vw - 1.5rem)); }
.conexao-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.125rem; align-items: stretch; }
.conexao-esq { background: var(--fundo); border-radius: 0.875rem; padding: 0.875rem 1rem; display: grid; gap: 0.75rem; align-content: start; }
.conexao-abas { display: flex; gap: 1.125rem; border-bottom: 1px solid var(--linha); }
.conexao-abas button { border: 0; background: none; padding: 0.375rem 0 0.625rem; font-weight: 600; color: var(--tinta-suave); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.conexao-abas button.ativa { color: var(--tinta); border-bottom-color: var(--zt-2); }
.conexao-esq .passos { display: grid; gap: 0.5rem; }
.conexao-esq .passos ul { margin: 0.375rem 0 0; padding-left: 1.125rem; }
.conexao-dir { display: grid; place-items: center; align-content: center; gap: 0.75rem; text-align: center; min-height: 16.25rem; }
.conexao-dir .qr-moldura img { width: min(14.375rem, 55vw); height: auto; }
.conexao-ok { display: grid; gap: 0.375rem; justify-items: center; }
.conexao-ok-icone { width: 4rem; height: 4rem; border-radius: 50%; background: #e5f6ea; color: var(--ok); display: grid; place-items: center; font-size: 1.875rem; font-weight: 700; }
.conexao-acoes { align-items: center; flex-wrap: wrap; }
.whats-corpo { display: grid; gap: 0.5rem; justify-items: start; }
@media (max-width: 720px) { .conexao-grade { grid-template-columns: 1fr; } }

/* Ajustes de largura (celular): nada passa da tela */
.inicio-grade > *, .conversas-topo, .conversas-topo > *, .resumo-topo, .resumo-corpo { min-width: 0; }
.abas-conversa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.abas-conversa button { min-width: 0; padding: 0.4375rem 2px; overflow: hidden; }
@media (max-width: 720px) {
  .abas-conversa button { font-size: 0.6875rem; gap: 3px; }
  .abas-conversa .contagem { min-width: 1rem; height: 1rem; font-size: 0.625rem; padding: 0 0.25rem; }
  .resumo-topo .periodo { max-width: 100%; }
  .periodo button { padding: 0.4375rem 0.625rem; }
}

/* ================= Ajuste de responsividade e compactação ================= */

/* Raiz do problema de cartões espremidos: grades com altura própria e cartões que podiam encolher a zero */
.quadro { min-height: auto; }
.config-grade, .relatorio, .resumo-corpo, .graficos-grade, .admin-robos, .grupos, .grade-mensagens { grid-auto-rows: max-content; }
.quadro > * { min-width: 0; }
.quadro input, .quadro select, .quadro textarea { max-width: 100%; }

/* Controles mais baixos */
input:not([type="checkbox"]):not([type="radio"]), select, textarea { padding: 0.5rem 0.75rem; border-radius: 0.625rem; font-size: 0.8438rem; }
.botao { padding: 0.5625rem 1rem; font-size: 0.8438rem; border-radius: 0.625rem; }
.botao-pequeno { padding: 0.375rem 0.75rem; font-size: 0.7812rem; }
.botao-menu, .botao-sino, .avatar { width: 2.5rem; height: 2.5rem; }
.barra { gap: 0.5rem; }
.barra .busca { flex: 2 1 15rem; max-width: 22.5rem; }
.painel-conteudo { padding: clamp(0.875rem, 1.8vw, 1.5rem); }

/* Barra do topo com a saudação do Início */
.topo { justify-content: space-between; }
.topo-direita { margin-left: auto; flex: none; }
.topo-saudacao { display: grid; min-width: 0; flex: 1 1 auto; padding-left: 0.25rem; }
.topo-saudacao strong { font-size: clamp(1.125rem, 1.8vw, 1.5rem); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-saudacao small { color: var(--tinta-suave); font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .topo-saudacao small { display: none; }
  .topo-saudacao strong { font-size: 1.0625rem; }
}
@media (max-width: 480px) {
  .pilula { font-size: 0; gap: 0; padding: 0.75rem; }
}

/* Início: conversas recolhíveis */
.conversas-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.conversas-mini { display: none; }
.inicio-grade { transition: grid-template-columns 0.2s ease; }
.inicio[data-conversas="recolhido"] .inicio-grade { grid-template-columns: 3.625rem minmax(0, 1fr); }
.inicio[data-conversas="recolhido"] .conversas-topo, .inicio[data-conversas="recolhido"] .conversas-lista { display: none; }
.inicio[data-conversas="recolhido"] .conversas-mini { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem 0; border: 0; background: none; cursor: pointer; color: var(--tinta-suave); font: inherit; }
.conversas-mini:hover { color: var(--tinta); background: var(--zt-7); }
.conversas-mini svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.conversas-mini .contagem { min-width: 1.375rem; height: 1.375rem; border-radius: 62.4375rem; background: var(--zt-2); color: var(--zt-8); font-size: 0.75rem; font-weight: 700; display: grid; place-items: center; padding: 0 0.375rem; }
.conversas-mini-texto { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.02em; }
@media (max-width: 900px) {
  .conversas-recolher, .conversas-mini { display: none !important; }
  .inicio[data-conversas="recolhido"] .inicio-grade { grid-template-columns: minmax(0, 1fr); }
  .inicio[data-conversas="recolhido"] .conversas-topo { display: grid; }
  .inicio[data-conversas="recolhido"] .conversas-lista { display: block; }
}

/* Início: filtros do resumo, cartões e gráficos que acompanham o espaço */
.resumo-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; flex: none; }
.resumo-filtros .seletor { flex: 1 1 9.375rem; max-width: 14.375rem; padding: 0.4375rem 0.625rem; font-size: 0.8125rem; }
.indicadores-3 { grid-template-columns: repeat(auto-fit, minmax(11.875rem, 1fr)); }
.graficos-grade { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
.grafico-area { width: 100%; min-width: 0; }
.grafico-svg { max-height: none; }
.quadro-grafico { container-type: inline-size; }
@container (max-width: 300px) {
  .pizza { grid-template-columns: 1fr; justify-items: center; }
  .pizza-legenda { width: 100%; }
  .barras-h li { grid-template-columns: minmax(4.375rem, 38%) 1fr 1.75rem; }
}
@container (min-width: 520px) {
  .pizza { grid-template-columns: 10.625rem minmax(0, 1fr); }
  .pizza-svg { max-width: 10.625rem; }
}
.whats-corpo p { margin: 0; }

/* ================= Melhorias: topo, animações, conversas, resumo e arquivos ================= */

/* ----- Topo: data e hora com segundos debaixo do WhatsApp ----- */
.whats-bloco { display: grid; justify-items: center; gap: 2px; }
.relogio { font-size: 0.6875rem; line-height: 1; color: var(--tinta-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) { .relogio { display: none; } }

/* ----- Animações de entrada (saudação) e do "WhatsApp conectado" ----- */
@keyframes entra-esquerda { from { opacity: 0; transform: translateX(-1.5rem); filter: blur(0.25rem); } to { opacity: 1; transform: none; filter: none; } }
@keyframes entra-cima { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: none; } }
@keyframes acenar { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.topo-saudacao.entrada strong { animation: entra-esquerda 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.topo-saudacao.entrada small { animation: entra-cima 0.7s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.aceno { display: inline-block; transform-origin: 70% 70%; }
.topo-saudacao.entrada .aceno { animation: acenar 1.8s 0.9s ease-in-out 2 both; }

@keyframes pilula-entra { 0% { transform: scale(0.55); opacity: 0; } 55% { transform: scale(1.14); opacity: 1; } 78% { transform: scale(0.97); } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulso-ponto-verde { 0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.6); } 70% { box-shadow: 0 0 0 0.625rem rgba(21, 128, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); } }
@keyframes brilho-pilula { 0%, 100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); } 50% { box-shadow: 0 0 1rem 3px rgba(21, 128, 61, 0.3); } }
@keyframes piscar { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.pilula { transition: background-color 0.3s, color 0.3s; }
.pilula[data-estado="conectado"] { animation: brilho-pilula 3s ease-in-out infinite; }
.pilula[data-estado="conectado"]::before { width: 0.625rem; height: 0.625rem; animation: pulso-ponto-verde 1.7s ease-out infinite; }
.pilula[data-estado="aguardando_qr"]::before, .pilula[data-estado="conectando"]::before, .pilula[data-estado="reconectando"]::before { animation: piscar 1s ease-in-out infinite; }
.pilula.troca { animation: pilula-entra 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@media (prefers-reduced-motion: reduce) {
  .topo-saudacao.entrada strong, .topo-saudacao.entrada small, .topo-saudacao.entrada .aceno, .pilula, .pilula::before, .pilula.troca { animation: none !important; }
}

/* ----- Conversas: fontes menores, busca e filtros na mesma linha, ações ----- */
.conversas { container-type: inline-size; container-name: conversas; }
.conversas-topo { padding: 0.625rem 0.75rem 0.5rem; gap: 0.5rem; }
.conversas-topo h2 { font-size: 0.9375rem; }
.abas-conversa { grid-template-columns: 1.45fr 1fr 1.15fr; padding: 3px; }
.abas-conversa button { font-size: 0.6875rem; padding: 0.375rem 0.25rem; gap: 0.25rem; }
.abas-conversa button:first-child { padding-left: 0.5rem; }
.abas-conversa .contagem { min-width: 1rem; height: 1rem; font-size: 0.625rem; padding: 0 0.25rem; }
.conversas-filtros { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 0.375rem; }
.conversas-filtros .seletor, .conversas-filtros .busca { padding: 0.375rem 0.5rem; font-size: 0.75rem; border-radius: 0.5625rem; min-width: 0; max-width: none; width: 100%; }
@container conversas (max-width: 340px) {
  .conversas-filtros { grid-template-columns: 1fr 1fr; }
  .conversas-filtros .busca { grid-column: 1 / -1; }
}
.conversa-item { border-bottom: 1px solid var(--fundo); list-style: none; }
.conversa { width: 100%; display: grid; grid-template-columns: 2.375rem minmax(0, 1fr); gap: 0.625rem; padding: 0.5625rem 0.75rem; cursor: pointer; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
.conversa:hover, .conversa:focus-visible { background: var(--zt-7); }
.avatar-conversa { width: 2.375rem; height: 2.375rem; font-size: 0.75rem; }
.conversa-corpo { gap: 2px; }
.conversa-linha1 strong { font-size: 0.7812rem; }
.conversa-linha1 small, .conversa-numero, .conversa-data { font-size: 0.6562rem; }
.conversa-previa { font-size: 0.7188rem; }
.conversa-etiquetas { gap: 3px; }
.conversa-etiquetas .chip { font-size: 0.5938rem; padding: 1px 0.4375rem; }
.conversa-acoes { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0 0.75rem 0.5625rem 3.75rem; }
.conversa-acao { border: 1px solid var(--linha); background: var(--superficie); border-radius: 62.4375rem; padding: 3px 0.6875rem; font-size: 0.6875rem; font-weight: 600; cursor: pointer; color: var(--tinta); }
.conversa-acao:hover { background: var(--fundo); }
.conversa-acao.perigo { color: var(--perigo); border-color: #f1c4a8; }
.conversa-acao.perigo:hover { background: #fff3ec; }
.conversa-acao:disabled { opacity: 0.55; cursor: progress; }
.conversas-vazio strong { font-size: 0.8125rem; }
.conversas-vazio .dica { font-size: 0.7188rem; }

/* ----- Resumo: período e filtros em menus suspensos, na mesma linha ----- */
.resumo { container-type: inline-size; container-name: resumo; }
.resumo-topo { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; flex: none; }
.resumo-topo .seletor { flex: 1 1 6.25rem; min-width: 6rem; max-width: 12.5rem; padding: 0.375rem 0.5rem; font-size: 0.75rem; border-radius: 0.5625rem; }
.resumo-topo .botao-texto { padding: 0.25rem 0.375rem; font-size: 0.75rem; }
.periodo-datas { display: flex; flex-wrap: nowrap; gap: 0.375rem; align-items: center; }
.periodo-datas label { font-size: 0.6875rem; gap: 0.25rem; }
.periodo-datas input { width: 7.375rem; padding: 0.3125rem 0.375rem; font-size: 0.75rem; }
.periodo-datas .botao { padding: 0.3125rem 0.625rem; }

/* ----- Cartões pequenos (6 na mesma linha) ----- */
.indicadores-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; }
.indicador-mini { display: grid; gap: 1px; padding: 0.4375rem 0.5625rem; border-radius: 0.75rem; align-content: center; min-width: 0; border: 1px solid var(--linha); background: var(--superficie); }
.indicador-linha { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.indicador-mini .indicador-icone { width: 1.5rem; height: 1.5rem; border-radius: 0.5rem; font-size: 0.6875rem; flex: none; }
.indicador-mini strong { font-size: 1.0625rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.indicador-rotulo { font-size: 0.6562rem; color: var(--tinta-suave); line-height: 1.15; }
@container resumo (max-width: 468.75px) { .indicadores-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container resumo (max-width: 300px) { .indicadores-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container resumo (min-width: 470px) and (max-width: 660px) { .indicador-mini .indicador-icone { display: none; } .indicador-mini { padding: 0.4375rem 0.5rem; } }

/* ----- Gráficos que preenchem o espaço disponível ----- */
.resumo-corpo { display: grid; grid-template-rows: auto minmax(var(--min-graficos, 18.75rem), 1fr); gap: 0.5rem; align-content: stretch; }
.graficos-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.5rem; min-height: 0; }
.quadro-grafico { min-height: 0; padding: 0.5rem 0.625rem; gap: 0.25rem; overflow: hidden; }
.quadro-grafico h2 { font-size: 0.7812rem; }
.grafico-area { flex: 1; min-height: 5rem; position: relative; }
.grafico-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
.barras-h { gap: 0.375rem; font-size: 0.6875rem; }
@container (max-width: 250px) {
  .barras-h li { grid-template-columns: minmax(0, 1fr) auto; }
  .barras-h-trilha { grid-column: 1 / -1; order: 3; }
}
@container resumo (max-width: 760px) {
  .resumo-corpo { --min-graficos: 28.125rem; }
  .graficos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
}
@container resumo (max-width: 460px) {
  .resumo-corpo { --min-graficos: 0px; }
  .graficos-grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(13.125rem, auto); }
}

/* ----- Mensagens com arquivo (áudio, imagem, vídeo, documento) ----- */
.zona-arquivo { display: grid; gap: 0.5rem; }
.envio-arquivo { display: grid; justify-items: center; gap: 0.375rem; padding: 1.125rem 0.75rem; border: 2px dashed var(--linha); border-radius: 0.875rem; text-align: center; background: var(--fundo); transition: border-color 0.15s, background 0.15s; }
.envio-arquivo:hover, .envio-arquivo.sobre, .envio-arquivo:focus-visible { border-color: var(--zt-3); background: var(--zt-7); }
.envio-icone { font-size: 1.375rem; }
.info-arquivo { margin: 0; overflow-wrap: anywhere; }
.caixa-voz { display: grid; gap: 0.25rem; }
.previa-img { display: block; max-width: 100%; max-height: 15rem; border-radius: 0.5rem; }
.previa-audio { width: 100%; max-width: 16.25rem; }
.midia-chip { display: flex; align-items: center; gap: 0.625rem; min-width: 10.625rem; }
.midia-icone { font-size: 1.625rem; flex: none; }
.midia-chip strong { display: block; font-size: 0.8125rem; }
.midia-chip small { display: block; color: #54656f; font-size: 0.6875rem; overflow-wrap: anywhere; }
.midia-legenda { margin-top: 0.375rem; }
.previa-whatsapp .balao { max-width: 100%; }

/* Lista de conversas um pouco mais estreita: sobra mais espaço para o resumo */
.inicio-grade { grid-template-columns: minmax(20rem, 25rem) minmax(0, 1fr); }

/* Editor de mensagem com arquivo: área mais compacta */
.envio-arquivo { padding: 0.75rem; gap: 0.25rem; }
.arquivo-linha { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; flex-wrap: wrap; }

/* ================= Início: cartões do topo na mesma linha + qualificação dos leads + tabela ================= */
.painel-cartoes { display: flex; gap: 0.625rem; align-items: flex-end; flex: none; }
.cartoes-kpi { flex: 5 1 0; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.qualificacao { flex: 4.6 1 0; min-width: 0; display: grid; gap: 0.3125rem; }
.qualificacao-cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.qualificacao-cab strong { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.7812rem; white-space: nowrap; }
.qualificacao-cab svg { width: 1rem; height: 1rem; fill: none; stroke: var(--ok); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.qualificacao-sub { color: var(--tinta-suave); font-size: 0.6562rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qualificacao-cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.qualif-card { background: var(--superficie); border: 1px solid var(--linha); border-left: 0.25rem solid var(--cor); border-radius: 0.75rem; padding: 0.4375rem 0.5625rem; display: grid; gap: 1px; min-width: 0; align-content: start; }
.qualif-rotulo { display: flex; align-items: center; gap: 0.25rem; font-size: 0.7188rem; font-weight: 700; line-height: 1.15; }
.qualif-emoji { font-size: 0.75rem; flex: none; }
.qualif-numero { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.qualif-sub { font-size: 0.625rem; color: var(--tinta-suave); }
@container resumo (max-width: 780px) {
  .painel-cartoes { flex-wrap: wrap; }
  .cartoes-kpi, .qualificacao { flex: 1 1 100%; }
}

/* Gráficos (3) + tabela resumida */
.resumo-corpo { grid-template-rows: auto minmax(var(--min-graficos, 27.5rem), 1fr); }
.graficos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1.25fr); }
.quadro-tabela { grid-column: 1 / -1; display: flex; flex-direction: column; min-height: 0; padding: 0.5rem 0.625rem; gap: 0.375rem; overflow: hidden; }
.quadro-tabela h2 { font-size: 0.7812rem; display: flex; align-items: baseline; gap: 0.375rem; }
.quadro-tabela h2 small { font-size: 0.6562rem; font-weight: 400; }
.tabela-resumo { flex: 1; min-height: 0; border: 1px solid var(--linha); border-radius: 0.625rem; overflow: auto; }
.tabela-resumo .tabela th { font-size: 0.6562rem; padding: 0.375rem 0.5625rem; }
.tabela-resumo .tabela td { font-size: 0.6875rem; padding: 0.375rem 0.5625rem; }
.tabela-resumo .tabela td small { font-size: 0.625rem; }
.tabela-resumo tbody tr { cursor: pointer; }
.tabela-resumo tbody tr:hover td { background: var(--zt-7); }
.tabela-resumo .chip { font-size: 0.625rem; padding: 1px 0.5rem; }
@container resumo (max-width: 760px) {
  .resumo-corpo { --min-graficos: 40rem; }
  .graficos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr); }
  .graficos-grade > .quadro-grafico:nth-child(3) { grid-column: 1 / -1; }
}
@container resumo (max-width: 460px) {
  .resumo-corpo { --min-graficos: 0px; }
  .graficos-grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: minmax(13.125rem, auto); }
  .graficos-grade > .quadro-grafico:nth-child(3) { grid-column: auto; }
  .quadro-tabela { min-height: 17.5rem; }
  .qualificacao-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartoes-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Tabela do Início: número, data, etapa, status e temperatura em uma linha só */
.tabela-resumo .tabela td:nth-child(-n+5) { white-space: nowrap; }
.tabela-resumo .tabela td .etiquetas { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* =====================================================================
   Início: layout do mockup (ícones nos títulos e filtros, cartões com comparação,
   quadro creme da qualificação, gráficos e tabela em cartões arredondados)
   ===================================================================== */
.icone-circulo { width: 2rem; height: 2rem; border-radius: 50%; background: var(--zt-6); color: var(--zt-3); display: inline-grid; place-items: center; flex: none; }
.icone-circulo.quadrado { border-radius: 0.625rem; }
.icone-circulo svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.icone-circulo svg.cheio { fill: currentColor; stroke: none; }

/* --- Conversas --- */
.conversas { border-radius: 1rem; box-shadow: 0 1px 3px rgba(28, 25, 20, 0.06); }
.titulo-com-icone { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.titulo-com-icone h2 { font-size: 1rem; }
.busca-caixa { position: relative; min-width: 0; }
.busca-caixa .busca { padding-right: 1.875rem; }
.busca-caixa > svg { position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); width: 0.875rem; height: 0.875rem; fill: none; stroke: var(--tinta-suave); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.conversas-topo { padding: 0.875rem 0.875rem 0.75rem; gap: 0.625rem; }
.conversa { grid-template-columns: 2.875rem minmax(0, 1fr); gap: 0.75rem; padding: 0.75rem 0.875rem; }
.avatar-conversa { width: 2.875rem; height: 2.875rem; font-size: 0.875rem; }
.conversa-linha1 strong { font-size: 0.875rem; }
.conversa-linha1 small { font-size: 0.7188rem; }
.conversa-numero { font-size: 0.75rem; }
.conversa-previa { font-size: 0.7812rem; color: var(--tinta); }
.conversa-etiquetas .chip { font-size: 0.6562rem; padding: 2px 0.5625rem; }
.conversa-data { font-size: 0.7188rem; }
.conversa-acoes { padding: 0 0.875rem 0.75rem 4.5rem; }
.conversa-acao { font-size: 0.75rem; padding: 0.3125rem 0.875rem; }
.conversa-acao.perigo { color: var(--perigo); border-color: #f4b9a0; }

/* --- Filtros com ícone --- */
.resumo-topo { gap: 0.625rem; }
.filtro-icone { position: relative; display: block; flex: 1 1 8.75rem; max-width: 12.5rem; min-width: 0; }
.filtro-icone > svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; fill: none; stroke: var(--zt-5); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.resumo-topo .filtro-icone .seletor { width: 100%; max-width: none; min-width: 0; flex: none; padding: 0.5625rem 0.75rem 0.5625rem 2.25rem; font-size: 0.8125rem; border-radius: 0.75rem; background-color: var(--superficie); }

/* --- Cartões do topo --- */
.painel-cartoes { align-items: stretch; gap: 0.75rem; }
.cartoes-kpi { gap: 0.625rem; }
.indicador-kpi { display: grid; gap: 0.25rem; align-content: center; padding: 0.75rem 0.875rem; border: 1px solid var(--linha); border-radius: 1rem; background: var(--superficie); min-width: 0; box-shadow: 0 1px 3px rgba(28, 25, 20, 0.05); }
.kpi-linha { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.kpi-linha strong { font-size: 1.5rem; line-height: 1; font-weight: 700; }
.kpi-rotulo { font-size: 0.7812rem; color: var(--tinta-suave); line-height: 1.2; }
.kpi-delta { font-size: 0.6875rem; font-weight: 600; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-delta.bom { color: var(--ok); }
.kpi-delta.ruim { color: var(--perigo); }
.qualificacao { background: var(--zt-7); border: 1px solid var(--zt-6); border-radius: 1rem; padding: 0.625rem 0.75rem; gap: 0.5rem; }
.qualificacao-cab strong { font-size: 0.8438rem; }
.qualificacao-sub { font-size: 0.6875rem; }
.qualif-card { border-radius: 0.75rem; padding: 0.5rem 0.625rem; gap: 2px; }
.qualif-rotulo { font-size: 0.75rem; }
.qualif-numero { font-size: 1.375rem; }
.qualif-sub { font-size: 0.6562rem; }

/* --- Gráficos e tabela --- */
.quadro-grafico, .quadro-tabela { border: 1px solid var(--linha); border-radius: 1rem; box-shadow: 0 1px 3px rgba(28, 25, 20, 0.05); padding: 0.75rem 0.875rem; gap: 0.5rem; }
.cartao-cab { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.cartao-cab h2 { font-size: 0.9062rem; display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.cartao-cab h2 small { font-size: 0.6875rem; font-weight: 400; }
.cartao-cab .ver-todos { margin-left: auto; flex: none; text-decoration: none; }
.quadro-tabela h2 { font-size: 0.9062rem; }
.tabela-resumo .tabela th { font-size: 0.6875rem; color: var(--tinta-suave); padding: 0.4375rem 0.625rem; }
.tabela-resumo .tabela td { font-size: 0.75rem; padding: 0.5rem 0.625rem; vertical-align: middle; }
.tabela-resumo .tabela td .etiquetas { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0.25rem; }
.tabela-resumo .chip { font-size: 0.6562rem; padding: 2px 0.5625rem; }

/* Telas mais estreitas: indicadores em uma linha e a qualificação logo abaixo (nada é cortado) */
@container resumo (max-width: 1500px) {
  .painel-cartoes { flex-wrap: wrap; }
  .cartoes-kpi, .qualificacao { flex: 1 1 100%; }
}
/* Legenda com 3 ou mais itens: 2 colunas, como no mockup */
.grafico-legenda:has(.legenda-item:nth-child(3)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 0.875rem; }
.grafico-legenda { font-size: 0.7188rem; }
.grafico-area { min-height: 6rem; }

/* =====================================================================
   Configurações, Administração e Contatos no mesmo padrão do Início
   (cartões arredondados, ícone redondo nos títulos, grade que usa a largura)
   ===================================================================== */
.config-area, .admin-area { flex: 1; min-height: 0; overflow-y: auto; container-type: inline-size; container-name: pagina; padding-right: 2px; }
.config-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-content: start; grid-auto-rows: max-content; }
.quadro-largo { grid-column: span 2; }
.config-grade > .quadro, .admin-robos > .quadro, .admin-contas { border: 1px solid var(--linha); border-top: 1px solid var(--linha); border-radius: 1rem; box-shadow: 0 1px 3px rgba(28, 25, 20, 0.05); padding: 0.875rem 1rem; gap: 0.625rem; }
.cartao-cab .cab-chip { margin-left: auto; flex: none; }
@container pagina (max-width: 1250px) {
  .config-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quadro-largo { grid-column: 1 / -1; }
}
@container pagina (max-width: 620px) {
  .config-grade { grid-template-columns: minmax(0, 1fr); }
  .quadro-largo { grid-column: auto; }
}

/* Administração */
.admin-area { display: flex; flex-direction: column; gap: 0.75rem; }
.admin-robos { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 23.75rem)); gap: 0.75rem; align-content: start; flex: none; }
.admin-contas { flex: 1; min-height: 16.25rem; display: flex; flex-direction: column; overflow: hidden; }
.admin-contas .tabela-moldura { flex: 1; min-height: 0; }

/* Tabelas compactas (Contatos e Administração) */
.tabela-compacta { border: 1px solid var(--linha); border-radius: 0.625rem; overflow: auto; }
.tabela-compacta .tabela th { font-size: 0.6875rem; color: var(--tinta-suave); padding: 0.4375rem 0.625rem; white-space: nowrap; }
.tabela-compacta .tabela td { font-size: 0.75rem; padding: 0.5rem 0.625rem; vertical-align: middle; }
.tabela-compacta .tabela td strong { font-size: 0.7812rem; }
.tabela-compacta .tabela td small { font-size: 0.6562rem; }
.tabela-compacta .chip { font-size: 0.6562rem; padding: 2px 0.5625rem; }
.tabela-compacta .acoes-tabela .botao-texto { font-size: 0.7188rem; }
.origem-funil { display: block; font-size: 0.7812rem; }
.etiquetas-linha { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 3px 0; }

/* Início: Exportar ao lado de "Ver todos" */
.cartao-acoes { margin-left: auto; display: flex; gap: 0.5rem; flex: none; align-items: center; }
.cartao-cab .ver-todos { margin-left: 0; }
.btn-exportar { display: inline-flex; align-items: center; gap: 0.375rem; }
.btn-exportar svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Cabeçalho de cartão: se faltar espaço, os botões descem para a linha de baixo */
.cartao-cab { flex-wrap: wrap; row-gap: 0.375rem; }
.cartao-cab h2 { flex: 1 1 auto; }

/* =====================================================================
   Tabelas centralizadas e compactas (o quadro acompanha o conteúdo e fica no meio do cartão)
   ===================================================================== */
/* Tabelas ocupam a largura do cartão (com a margem do próprio cartão); as colunas se distribuem sozinhas, em proporção ao conteúdo */
.tabela-moldura { width: 100%; max-width: 100%; min-width: 0; align-self: stretch; margin-inline: 0; }
.tabela { width: 100%; min-width: 100%; table-layout: auto; }
.tabela th, .tabela td { text-align: center; }
.tabela td small, .tabela td strong { text-align: center; }
.acoes-tabela { text-align: center; }
.etiquetas, .etiquetas-linha { justify-content: center; }
.tabela-resumo .tabela td .etiquetas { align-items: center; }
.tabela td .origem-funil { display: block; }

/* Etiqueta do tipo de conta "Master Black" */
.chip-black { background: #1c1b18; color: #ffffff; }

/* =====================================================================
   Administração: novos cadastros, valor das licenças e janela "Gerenciar"
   ===================================================================== */
.admin-topo-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0.75rem; flex: none; }
.admin-cadastros, .admin-licencas { border: 1px solid var(--linha); border-top: 1px solid var(--linha); border-radius: 1rem; box-shadow: 0 1px 3px rgba(28, 25, 20, 0.05); padding: 0.875rem 1rem; gap: 0.625rem; min-width: 0; }
.admin-grafico-corpo { height: 10.625rem; position: relative; min-width: 0; }
.admin-grafico-corpo .grafico-area { height: 100%; }
.cartao-cab .cab-seletor { margin-left: auto; width: auto; min-width: 0; max-width: 11.25rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; border-radius: 0.5625rem; }
.licenca-linha { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.licenca-valor { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.licenca-valor input { width: 100%; min-width: 0; }
.admin-licencas .botao { align-self: flex-start; }
@container pagina (max-width: 900px) {
  .admin-topo-grade { grid-template-columns: minmax(0, 1fr); }
}
.gerenciar-secao { display: grid; gap: 0.5rem; padding: 0.75rem 0; border-top: 1px solid var(--linha); }
.gerenciar-secao h3 { font-size: 0.8125rem; }
.gerenciar-secao .linha-campos { flex-wrap: wrap; }
.gerenciar-secao input[type="text"] { min-width: 13.75rem; flex: 1 1 13.75rem; }
.perigo-texto { color: var(--perigo); border-color: #f4b9a0; }
.numero-tabela { font-size: 0.875rem; }

/* =====================================================================
   Início no modelo novo: indicadores em cima e a qualificação dos leads logo abaixo
   ===================================================================== */
.painel-cartoes { flex-wrap: wrap; }
.cartoes-kpi, .qualificacao { flex: 1 1 100%; }
.cabeca-acoes { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex: none; }
.conversas-cabeca .btn-exportar { white-space: nowrap; }

/* Data e hora um pouco mais baixas, longe do "WhatsApp conectado" */
.whats-bloco { gap: 0.5625rem; }

/* =====================================================================
   Aviso de conversa nova (pop-up no canto de baixo, como o Messenger)
   ===================================================================== */
#avisos { right: auto; left: 50%; transform: translateX(-50%); justify-items: center; }
#popups-conversa { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; display: flex; flex-direction: column; gap: 0.625rem; width: min(21.25rem, calc(100vw - 1.5rem)); pointer-events: none; }
.popup-conversa { pointer-events: auto; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.875rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 1rem; box-shadow: 0 0.75rem 2rem rgba(28, 25, 20, 0.2); cursor: pointer; animation: popup-entra 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
.popup-conversa:hover { border-color: var(--zt-3); }
.popup-conversa.saindo { animation: popup-sai 0.26s ease forwards; }
@keyframes popup-entra { from { opacity: 0; transform: translateX(2.75rem) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes popup-sai { to { opacity: 0; transform: translateX(2.75rem); } }
.popup-avatar { width: 2.625rem; height: 2.625rem; border-radius: 50%; background: var(--zt-6); color: var(--zt-5); display: grid; place-items: center; font-weight: 700; font-size: 0.875rem; flex: none; }
.popup-corpo { min-width: 0; flex: 1; display: grid; gap: 1px; }
.popup-corpo strong { font-size: 0.8438rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popup-corpo p { margin: 0; font-size: 0.7812rem; color: var(--tinta-suave); line-height: 1.3; }
.popup-marca { font-size: 0.6562rem; font-weight: 700; color: var(--zt-3); text-transform: uppercase; letter-spacing: 0.04em; }
.popup-agora { font-size: 0.6562rem; color: var(--ok); font-weight: 600; }
.popup-fechar { border: 0; background: none; font-size: 1.25rem; line-height: 1; color: var(--tinta-suave); cursor: pointer; padding: 0 2px; flex: none; }
.popup-fechar:hover { color: var(--tinta); }
@media (prefers-reduced-motion: reduce) { .popup-conversa, .popup-conversa.saindo { animation: none; } }

/* Sino: conversas novas e convite para avisos do computador */
.sino-conversa .sino-icone { background: var(--zt-6); color: var(--zt-5); }
.sino-item.clicavel { cursor: pointer; }
.sino-item.clicavel:hover { background: var(--zt-7); }
.sino-pc { padding: 0.625rem 1rem 0.75rem; border-top: 1px solid var(--linha); display: grid; gap: 0.375rem; justify-items: start; flex: none; }
.sino-pc p { margin: 0; font-size: 0.75rem; color: var(--tinta-suave); }

/* =====================================================================
   Contatos: conversas e grupos do WhatsApp (abas, filtros, tabelas, sincronizar e exportar)
   ===================================================================== */
.contatos-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; flex: none; }
.contatos-abas { display: inline-flex; background: var(--fundo); border-radius: 62.4375rem; padding: 3px; gap: 2px; }
.contatos-abas button { border: 0; background: none; padding: 0.5rem 1rem; border-radius: 62.4375rem; font-weight: 600; font-size: 0.8125rem; color: var(--tinta-suave); cursor: pointer; white-space: nowrap; }
.contatos-abas button.ativa { background: var(--zt-2); color: var(--zt-8); }
.contatos-abas.pequeno button { padding: 0.3125rem 0.75rem; font-size: 0.75rem; }
.contatos-filtros { flex: none; gap: 0.5rem; align-items: center; }
.contatos-filtros .busca { flex: 2 1 13.75rem; max-width: 22.5rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
.contatos-filtros .seletor { flex: 0 1 12.5rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
.contatos-area { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.contatos-tabela { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.contatos-tabela .tabela-moldura { flex: 1; min-height: 0; }
.contatos-aviso { flex: none; font-size: 0.6875rem; text-align: center; margin: 0; }
.btn-sync { display: inline-flex; align-items: center; gap: 0.375rem; }
.btn-sync svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-sync:disabled svg { animation: giro-sync 1s linear infinite; }
@keyframes giro-sync { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-sync:disabled svg { animation: none; } }
.contatos-abas { max-width: 100%; }
.contatos-abas button { flex: 1 1 auto; }
@media (max-width: 480px) {
  .contatos-abas button { padding: 0.4375rem 0.75rem; font-size: 0.75rem; }
  .contatos-topo .dica { flex: 1 1 100%; order: 5; }
}

/* =====================================================================
   Início sem a tabela "Resumo dos leads": os 3 gráficos usam toda a altura que sobra
   ===================================================================== */
.resumo-corpo { grid-template-rows: auto minmax(var(--min-graficos, 17.5rem), 1fr); }
.graficos-grade { grid-template-rows: minmax(0, 1fr); }
@container resumo (max-width: 760px) {
  .resumo-corpo { --min-graficos: 32.5rem; }
  .graficos-grade { grid-template-rows: repeat(2, minmax(0, 1fr)); }
}
@container resumo (max-width: 460px) {
  .resumo-corpo { --min-graficos: 0px; }
  .graficos-grade { grid-template-rows: none; }
}

/* Tela alta e larga: em vez de 3 gráficos muito compridos, duas linhas
   (Iniciados largo + Temperatura em cima; Concluídos e sem resposta na largura toda embaixo) */
@media (min-height: 960px) and (min-width: 1500px) {
  .graficos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .graficos-grade > .quadro-grafico:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .graficos-grade > .quadro-grafico:nth-child(3) { grid-column: 3; grid-row: 1; }
  .graficos-grade > .quadro-grafico:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* =====================================================================
   Administração em guias (como as abas de uma planilha) + Dashboard
   ===================================================================== */
[hidden] { display: none !important; }
.admin-area { overflow: hidden; }
.guias { display: flex; gap: 0.25rem; flex: none; border-bottom: 1px solid var(--linha); overflow-x: auto; scrollbar-width: thin; padding: 0 0.25rem; }
.guia { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5625rem 1rem; border: 1px solid var(--linha); border-bottom: 0; border-radius: 0.75rem 0.75rem 0 0; background: var(--fundo); color: var(--tinta-suave); font-weight: 600; font-size: 0.8125rem; text-decoration: none; white-space: nowrap; margin-bottom: -1px; position: relative; }
.guia svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.guia:hover { color: var(--tinta); background: var(--zt-7); }
.guia.ativa { background: var(--superficie); color: var(--tinta); border-top: 3px solid var(--zt-2); border-bottom: 1px solid var(--superficie); padding-top: 0.4375rem; }
.guia-conteudo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem 2px 2px; }

.admin-evolucao, .admin-resumo-planos, .admin-planos, .admin-treinamentos, .treino-resumo, .treino-cartao { border: 1px solid var(--linha); border-top: 1px solid var(--linha); border-radius: 1rem; box-shadow: 0 1px 3px rgba(28, 25, 20, 0.05); padding: 0.875rem 1rem; gap: 0.625rem; min-width: 0; }
.kpis-admin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; flex: none; }
.kpi-admin { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border: 1px solid var(--linha); border-radius: 1rem; background: var(--superficie); box-shadow: 0 1px 3px rgba(28, 25, 20, 0.05); min-width: 0; }
.kpi-admin strong { display: block; font-size: 1.25rem; line-height: 1.15; }
.kpi-admin small { display: block; color: var(--tinta-suave); font-size: 0.75rem; }
.admin-dash-grade { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 0.75rem; align-items: start; flex: none; }
.admin-evolucao { grid-column: 1; grid-row: 1; }
.admin-resumo-planos { grid-column: 2; grid-row: 1 / span 2; }
.admin-cadastros { grid-column: 1; grid-row: 2; }
.admin-grafico-corpo.grande { height: 16.875rem; }
.cartao-cab .contatos-abas.pequeno { margin-left: auto; }
.cartao-cab .contatos-abas.pequeno + .cab-seletor { margin-left: 0; }
@container pagina (max-width: 900px) {
  .kpis-admin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-dash-grade { grid-template-columns: minmax(0, 1fr); }
  .admin-evolucao, .admin-resumo-planos, .admin-cadastros { grid-column: 1; grid-row: auto; }
}
@container pagina (max-width: 460px) {
  .kpis-admin { grid-template-columns: minmax(0, 1fr); }
}
.cartao-cab .cab-acao { flex: none; display: inline-flex; align-items: center; gap: 0.375rem; margin-left: auto; }
.cab-acao svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.historico-valores { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.75rem; }
.historico-valores li { display: flex; justify-content: space-between; gap: 0.625rem; border-bottom: 1px solid var(--linha); padding: 0.25rem 0; }
.descricao-curta { display: block; max-width: 36ch; margin-inline: auto; }
.arquivo-atual { font-size: 0.75rem; }
.gerenciar-corpo { max-height: min(62vh, 35rem); overflow-y: auto; padding-right: 0.375rem; }

/* =====================================================================
   Página Treinamentos (usuários)
   ===================================================================== */
.treino-area { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; }
.treino-resumo { display: grid; }
.treino-resumo p { margin: 0; font-size: 0.8125rem; }
.treino-barra { height: 0.625rem; background: var(--fundo); border: 1px solid var(--linha); border-radius: 62.4375rem; overflow: hidden; }
.treino-barra-cheia { height: 100%; background: var(--zt-2); border-radius: 62.4375rem; transition: width 0.4s ease; }
.treino-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21.25rem), 1fr)); gap: 0.75rem; align-items: start; }
.treino-cartao { display: grid; background: var(--superficie); }
.treino-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.625rem; }
.treino-cab h2 { font-size: 0.9375rem; margin: 0; }
.video-moldura { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 0.75rem; overflow: hidden; }
.video-moldura iframe, .video-moldura video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.treino-descricao { margin: 0; font-size: 0.8125rem; color: var(--tinta-suave); white-space: pre-wrap; }
.treino-datas { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; }
.treino-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.treino-acoes svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Contatos: descrição da origem e abas que se ajustam ao espaço */
.contatos-descricao { flex: none; margin: 0; }
.contatos-abas { flex-wrap: wrap; border-radius: 1.125rem; }

/* Tabelas: o mesmo respiro lateral em todas, proporcional à largura da tela */
.tabela-compacta .tabela th, .tabela-compacta .tabela td { padding-inline: clamp(0.625rem, 1.1vw, 1.375rem); }

/* Cartão de treinamento: o título encolhe e quebra linha, a etiqueta de status nunca sai do cartão */
.treino-cab h2 { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.treino-cab .chip { flex: none; }

/* Contatos do WhatsApp: aviso com o caminho para trazer a lista completa de conversas */
.contatos-importar { flex: none; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.625rem 0.875rem; border: 1px solid var(--zt-3); background: var(--zt-7); border-radius: 0.75rem; font-size: 0.7812rem; }
.contatos-importar p { margin: 0; flex: 1 1 20rem; }

/* Contatos do WhatsApp: importar com a extensão */
.contatos-importar-acoes { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex: none; }
.contatos-importar .botao { display: inline-flex; align-items: center; gap: 0.375rem; text-decoration: none; }
.contatos-importar .botao svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.passos-importar { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; font-size: 0.8125rem; }
.janela-acoes .botao { text-decoration: none; display: inline-flex; align-items: center; }
.contatos-importar-acoes { flex: 1 1 auto; min-width: 0; }
.contatos-importar .botao-texto { white-space: normal; text-align: left; }

/* =====================================================================
   Liberações por plano (funis, mídia, IA, proxy)
   ===================================================================== */
.trava-plano { margin-left: auto; font-size: 0.75rem; opacity: 0.85; }
.aviso-plano { margin: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--zt-3); background: var(--zt-7); border-radius: 0.625rem; font-size: 0.7812rem; flex: none; }
.lista-plano { list-style: none; margin: 0.25rem 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.7812rem; }
.lista-plano li { display: flex; gap: 0.5rem; align-items: baseline; }
.lista-plano li::before { content: "✔"; color: var(--ok); font-weight: 700; flex: none; }
.lista-plano li.nao { color: var(--tinta-suave); }
.lista-plano li.nao::before { content: "✖"; color: var(--perigo); }
.funil-ia-area { max-width: 48.75rem; display: grid; gap: 0.75rem; }
.funil-ia-area .quadro { border: 1px solid var(--linha); border-top: 1px solid var(--linha); border-radius: 1rem; box-shadow: 0 1px 3px rgba(28, 25, 20, 0.05); padding: 0.875rem 1rem; gap: 0.625rem; }
.funil-ia-area p { margin: 0; font-size: 0.8125rem; }
.quadro-bloqueado { border-style: dashed !important; }
.opcao-tipo.travada { opacity: 0.55; cursor: not-allowed; }
.bloco-limites { display: grid; gap: 0.5rem; padding: 0.625rem 0.75rem; border: 1px solid var(--linha); border-radius: 0.75rem; background: var(--fundo); }
.bloco-limites input[type="number"] { max-width: 8.125rem; }

/* Configurações responsiva: os cartões se ajustam sozinhos à largura da tela, sem cortar nada */
.config-grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21.25rem), 1fr)); }
.config-grade > * { min-width: 0; }
.config-grade > .quadro-largo { grid-column: 1 / -1; }
.config-grade > .quadro { overflow: hidden; }
.metricas li { flex-wrap: wrap; gap: 2px 0.625rem; }
.metricas li strong { min-width: 0; overflow-wrap: anywhere; margin-left: auto; }
.lista-plano li { overflow-wrap: anywhere; }
.config-grade { grid-auto-flow: dense; }

/* ===== Faixa de mensagens do Início ===== */
.faixa-inicio { flex: none; }
.faixa-inicio.oculto { display: none; }
.faixa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--linha); border-left: 4px solid var(--zt-2); border-radius: var(--raio); background: linear-gradient(100deg, var(--zt-7), var(--superficie)); padding: 0.625rem 0.875rem; gap: 0.375rem; }
.faixa-palco { position: relative; display: grid; min-height: 4.25rem; align-items: center; }
.faixa-slide { grid-area: 1 / 1; display: flex; align-items: center; gap: 0.75rem; opacity: 0; transform: translateX(1.25rem); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; visibility: hidden; }
.faixa-slide.ativa { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.faixa-icone { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--zt-6); font-size: 1.375rem; }
.faixa-texto { min-width: 0; flex: 1; }
.faixa-texto strong { display: block; font-size: 0.9375rem; }
.faixa-texto p { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--tinta-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.faixa-botao { flex: none; white-space: nowrap; }
.faixa-controles { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.faixa-pontos { display: flex; gap: 0.375rem; }
.faixa-ponto { width: 0.5rem; height: 0.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--linha); cursor: pointer; }
.faixa-ponto.ativo { background: var(--zt-2); width: 1.25rem; border-radius: 62.4375rem; }
.faixa-seta, .faixa-fechar { border: 0; background: none; cursor: pointer; font-size: 1.125rem; line-height: 1; color: var(--tinta-suave); padding: 0.125rem 0.375rem; border-radius: 0.5rem; }
.faixa-seta:hover, .faixa-fechar:hover { background: var(--fundo); color: var(--tinta); }
.faixa-fechar { position: absolute; top: 0.25rem; right: 0.375rem; }
@media (prefers-reduced-motion: reduce) { .faixa-slide { transition: none; transform: none; } }
@media (max-width: 720px) {
  .faixa-slide { flex-wrap: wrap; }
  .faixa-texto { flex-basis: calc(100% - 3.5rem); }
  .faixa-botao { margin-left: 3.25rem; }
  .faixa-palco { min-height: 8.5rem; }
  .faixa-texto p { -webkit-line-clamp: 3; }
}

/* ===== Configurações compacta ===== */
.config-grade { gap: 0.625rem; grid-auto-flow: dense; }
.config-grade > .quadro { padding: 0.75rem 0.875rem; gap: 0.5rem; }
.config-grade > .quadro h2 { font-size: 0.875rem; }
.config-grade input, .config-grade select { padding: 0.375rem 0.625rem; font-size: 0.8125rem; }
.config-grade .erro:empty { display: none; }

/* ===== Seleção em Contatos e envio em massa ===== */
.col-marcar, .tabela th:first-child:has(.marcar-todos) { width: 2.25rem; text-align: center; }
.marcar-linha, .marcar-todos { width: 1rem; height: 1rem; accent-color: var(--zt-2); cursor: pointer; }
.barra-selecao { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--zt-2); background: var(--zt-7); border-radius: var(--raio); }
.barra-selecao.oculto { display: none; }
.aviso-massa { border: 1px solid var(--perigo); background: #fff4ec; color: #7a2e0b; border-radius: 0.75rem; padding: 0.625rem 0.75rem; font-size: 0.8125rem; }
.aviso-massa p { margin: 0.25rem 0 0; }
.lotes-painel { border: 1px solid var(--linha); border-left: 4px solid var(--zt-2); border-radius: var(--raio); padding: 0.625rem 0.875rem; display: grid; gap: 0.5rem; flex: none; }
.lotes-painel.oculto { display: none; }
.lote-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.lote-linha small { display: block; color: var(--tinta-suave); }
.lote-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.lote-barra { height: 0.5rem; border-radius: 62.4375rem; background: var(--fundo); overflow: hidden; }
.lote-barra span { display: block; height: 100%; background: var(--zt-2); transition: width 0.4s ease; }

/* Início em telas baixas: a página rola em vez de cortar os gráficos */
.pagina.inicio { overflow-y: auto; overflow-x: hidden; }
.pagina.inicio .inicio-grade { flex: 1 0 auto; min-height: 38rem; }
.faixa { padding: 0.5rem 0.875rem; gap: 0.125rem; }
.faixa-palco { min-height: 3.5rem; }

/* ================= Funil com IA ================= */
.funil-ia-area { max-width: none; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.funil-ia-area > * { flex: none; }
.funil-ia-area .quadro-bloqueado { max-width: 48.75rem; }
.ia-pagina { flex: none; min-height: auto; }
.ia-ok { color: var(--ok); }
.ia-falha { color: var(--perigo); }
.ia-resultado { margin: 0; font-size: 0.8125rem; min-height: 1.25rem; overflow-wrap: anywhere; }
.ia-aviso-seguranca { background: var(--zt-7); border: 1px solid var(--zt-6); border-radius: 0.875rem; padding: 0.75rem 1rem; font-size: 0.8125rem; line-height: 1.5; }
.ia-aviso-seguranca a { color: var(--zt-5); font-weight: 600; }
.ia-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.625rem; }
.ia-kpis .indicador-kpi strong { font-size: 1.375rem; }
.ia-kpi-alerta { border-color: var(--perigo); background: #fff6f1; }
.ia-kpi-alerta strong { color: var(--perigo); }
.ia-estat { color: var(--tinta-suave); }
.ia-linha-funil .item-meta { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.ia-acoes { align-items: center; flex-wrap: wrap; }

/* conexões */
.ia-conexoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; align-items: start; }
.ia-conexao { border-top-width: 3px; }
.ia-conexao input:not([type="checkbox"]), .ia-conexao select { width: 100%; }
@media (max-width: 960px) { .ia-conexoes { grid-template-columns: minmax(0, 1fr); } }

/* escolha de IA (cartões) */
.ia-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.625rem; }
.ia-opcao { display: flex; align-items: center; gap: 0.625rem; border: 1px solid var(--linha); border-radius: 0.75rem; padding: 0.625rem 0.75rem; cursor: pointer; background: var(--superficie); }
.ia-opcao:hover { border-color: var(--zt-3); }
.ia-opcao.ativa, .ia-opcao:has(input:checked) { border-color: var(--zt-2); background: var(--zt-7); box-shadow: inset 0 0 0 1px var(--zt-2); }
.ia-opcao input { accent-color: var(--zt-2); flex: none; }
.ia-opcao-texto { display: grid; gap: 1px; min-width: 0; }
.ia-opcao-texto small { font-size: 0.75rem; }

/* editor */
.ia-editor { display: flex; flex-direction: column; gap: 0.75rem; }
.ia-editor-topo { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 3; background: var(--superficie); padding: 0.25rem 0 0.5rem; border-bottom: 1px solid var(--linha); }
.ia-editor-nome { flex: 1 1 12rem; min-width: 10rem; max-width: 22rem; }
.ia-editor-nome input { width: 100%; font-weight: 700; font-size: 1rem; }
.ia-editor-topo .seletor { width: auto; }
.ia-voltar-lista { text-decoration: none; white-space: nowrap; }
.ia-guias { flex-wrap: wrap; overflow-x: visible; gap: .2rem; }
.ia-guias .guia { padding: .4rem .65rem; gap: .4rem; font-size: .78rem; }
.ia-guias .guia.ativa { padding-top: .275rem; }
.guia-ponto { width: .6rem; height: .6rem; border-radius: 50%; background: #9ca3af; flex: none; }
.guia.st-ok .guia-ponto { background: #16a34a; }
.guia.st-atencao .guia-ponto { background: #eab308; }
.guia.st-erro .guia-ponto { background: #dc2626; box-shadow: 0 0 0 3px #dc262633; }
.guia.st-erro { color: #b91c1c; border-color: #fca5a5; }
.guia.st-atencao { border-color: #fde68a; }
.ia-editor .erro:empty { display: none; }
.ia-editor-corpo { display: grid; gap: 0.75rem; max-width: none; width: 100%; }
.ia-editor-corpo .quadro { border: 1px solid var(--linha); border-top: 1px solid var(--linha); border-radius: 1rem; padding: 0.875rem 1rem; gap: 0.75rem; box-shadow: 0 1px 3px rgba(28, 25, 20, 0.05); }
.ia-editor-corpo textarea, .ia-editor-corpo input[type="text"], .ia-editor-corpo select { width: 100%; }
.ia-editor-corpo textarea { resize: vertical; min-height: 3rem; }
.ia-sanfona { border: 1px solid var(--linha); border-radius: 0.875rem; padding: 0.25rem 0.875rem 0.75rem; background: var(--superficie); }
.ia-sanfona summary { cursor: pointer; font-weight: 700; padding: 0.625rem 0; display: flex; align-items: center; gap: 0.5rem; }
.ia-contador-linha { position: sticky; bottom: 0; background: var(--superficie); padding: 0.375rem 0; text-align: right; }
.ia-contador { color: var(--tinta-suave); font-size: 0.75rem; }

/* conversas ao vivo */
.ia-conversas { display: grid; grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); gap: 0.75rem; height: max(28rem, calc(100dvh - 15.5rem)); min-height: 0; }
.ia-coluna-lista { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; min-width: 0; }
.ia-filtros { display: grid; gap: 0.375rem; flex: none; }
.ia-busca, .ia-filtros .seletor { width: 100%; }
.ia-lista { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; border: 1px solid var(--linha); border-radius: 0.875rem; padding: 0.375rem; }
.ia-item { display: flex; gap: 0.625rem; align-items: flex-start; text-align: left; border: 1px solid transparent; background: none; border-radius: 0.75rem; padding: 0.5rem 0.625rem; cursor: pointer; width: 100%; color: inherit; }
.ia-item:hover { background: var(--fundo); }
.ia-item.ativa { background: var(--zt-7); border-color: var(--zt-2); }
.ia-item .avatar-conversa { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--zt-6); color: var(--zt-5); font-weight: 700; }
.ia-item-texto { display: grid; gap: 0.25rem; min-width: 0; flex: 1; }
.ia-item-linha { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; flex-wrap: wrap; }
.ia-item-linha strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ia-item-linha small { color: var(--tinta-suave); font-size: 0.6875rem; white-space: nowrap; }
.ia-item-funil { overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }
.ia-item .chip { font-size: 0.6562rem; padding: 1px 0.5rem; }
.ia-vazio { padding: 1rem; text-align: center; }
.ia-detalhe { border: 1px solid var(--linha); border-radius: 0.875rem; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; min-width: 0; overflow-y: auto; }
.ia-vazio-detalhe { margin: auto; text-align: center; color: var(--tinta-suave); }
.ia-detalhe-topo { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.ia-detalhe-titulo { display: grid; flex: 1; min-width: 0; }
.ia-detalhe-titulo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-detalhe-titulo small { color: var(--tinta-suave); font-size: 0.75rem; overflow-wrap: anywhere; }
.ia-voltar { display: none; }
.ia-resumo-linha { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.ia-acoes-conversa { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ia-lead { display: grid; grid-template-columns: auto 1fr; gap: 0.125rem 0.75rem; margin: 0; padding: 0.5rem 0.75rem; background: var(--fundo); border-radius: 0.75rem; font-size: 0.75rem; }
.ia-lead dt { color: var(--tinta-suave); font-weight: 600; }
.ia-lead dd { margin: 0; overflow-wrap: anywhere; }
.ia-chat { background: #efeae2; border-radius: 0.75rem; padding: 0.625rem; display: flex; flex-direction: column; gap: 0.375rem; flex: 1; min-height: 12rem; overflow-y: auto; }
.ia-msg { display: grid; gap: 1px; max-width: 82%; }
.ia-msg small { font-size: 0.625rem; color: var(--tinta-suave); padding: 0 0.25rem; }
.ia-balao { background: #fff; border-radius: 0.625rem 0.625rem 0.625rem 2px; padding: 0.4375rem 0.625rem; font-size: 0.8125rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
.ia-msg-ia { align-self: flex-end; text-align: right; }
.ia-msg-ia .ia-balao { background: #d9fdd3; border-radius: 0.625rem 0.625rem 2px 0.625rem; text-align: left; }
.ia-msg-sistema { align-self: center; max-width: 92%; text-align: center; }
.ia-msg-sistema .ia-balao { background: rgba(255, 255, 255, 0.7); font-size: 0.75rem; font-style: italic; color: var(--tinta-suave); border-radius: 0.625rem; }
.ia-pensando .ia-balao { opacity: 0.6; font-style: italic; }
@media (max-width: 900px) {
  .ia-conversas { grid-template-columns: minmax(0, 1fr); height: max(30rem, calc(100dvh - 14rem)); }
  .ia-conversas[data-vista="lista"] .ia-detalhe { display: none; }
  .ia-conversas[data-vista="detalhe"] .ia-coluna-lista { display: none; }
  .ia-voltar { display: inline-grid; }
  .ia-msg { max-width: 92%; }
}

/* testador */
.janela-teste { width: min(50rem, calc(100vw - 1.5rem)); }
.ia-teste { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(12rem, 1fr); gap: 0.75rem; }
.ia-teste-coluna { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.ia-chat-teste { height: 22rem; flex: none; }
.ia-teste-entrada { display: flex; gap: 0.5rem; align-items: flex-end; }
.ia-teste-campo { flex: 1; min-width: 0; resize: none; }
.ia-teste-estado { display: grid; gap: 0.5rem; align-content: start; background: var(--fundo); border-radius: 0.75rem; padding: 0.75rem; font-size: 0.8125rem; }
.ia-teste-aviso { margin: 0; }
@media (max-width: 720px) { .ia-teste { grid-template-columns: minmax(0, 1fr); } .ia-chat-teste { height: 16rem; } }

/* consumo */
.ia-consumo { display: grid; gap: 0.75rem; }
.ia-consumo .quadro { border: 1px solid var(--linha); border-top: 1px solid var(--linha); border-radius: 1rem; padding: 0.875rem 1rem; box-shadow: 0 1px 3px rgba(28, 25, 20, 0.05); }
.ia-consumo-tabelas { align-items: start; }
@media (max-width: 800px) { .ia-consumo-tabelas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .ia-editor-topo { position: static; }
  .ia-editor-nome { max-width: none; flex-basis: 100%; }
  .ia-editor-topo .botao { flex: 1 1 auto; }
}
.ia-subtitulo { font-size: 0.875rem; margin-top: 0.25rem; }
.ia-chat-historico { max-height: 18rem; flex: none; }

/* Fluxo da IA: mapa de etapas (usa o mesmo mapa do funil tradicional) */
.ia-corpo-largo { max-width: none; }
.ia-corpo-largo > .quadro { max-width: 56rem; }
.ia-fluxo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ia-fluxo-mapa { display: flex; height: calc(100vh - 21rem); min-height: 34rem; }
.ia-fluxo-mapa .mapa { flex: 1; min-width: 0; }
.ia-saidas { display: grid; gap: 0.5rem; }
.ia-saida { display: grid; gap: 0.375rem; padding: 0.5rem; border: 1px solid var(--linha); border-radius: 0.625rem; background: var(--fundo); }
.ia-saida-linha { display: grid; grid-template-columns: 1.625rem minmax(0, 1fr); gap: 0.375rem; align-items: center; }
.ia-saida-linha:last-child { grid-template-columns: 1.625rem minmax(0, 1fr) 1.75rem; }
.ia-saida .botao-icone { min-width: 1.75rem; padding: 0; }
.mundo .cartao textarea { width: 100%; min-height: 4.5rem; resize: vertical; font-size: 0.8125rem; line-height: 1.4; padding: 0.5rem 0.625rem; border-radius: 0.625rem; }
.mundo .cartao .chave { font-size: 0.8125rem; }
.mundo .cartao .mais-corpo .seletor, .mundo .cartao .ia-saida .seletor { width: 100%; }
@media (max-width: 48rem) {
  .ia-fluxo-mapa { height: 70vh; min-height: 26rem; }
}
.ia-fluxo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; padding: 0.625rem 0.875rem; border: 1px solid var(--linha); border-radius: 1rem; background: var(--superficie); }
.ia-fluxo-barra .dica { margin: 0; }
.ia-fluxo-barra .barra-espaco { flex: 1 1 0; }
.ia-fluxo-ajuda { flex: 1 1 100%; }
.ia-fluxo-ajuda summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--zt-5); }
.ia-fluxo-ajuda-corpo { display: grid; gap: 0.5rem; padding-top: 0.5rem; font-size: 0.8125rem; color: var(--tinta-suave); max-width: 56rem; }
.ia-fluxo-mapa { height: calc(100vh - 17.5rem); }
.mundo .ia-saida textarea { min-height: 2.75rem; height: 2.75rem; }
.ia-saida-linha:first-child { align-items: start; }
.ia-saida-linha:first-child .caminho-letra { margin-top: 0.25rem; }
.sino-dispensar { background: none; border: 0; padding: 0; margin-left: 0.5rem; cursor: pointer; font: inherit; font-size: 0.75rem; color: var(--zt-5); text-decoration: underline; }
.sino-dispensar-todas { margin: 0.5rem 0.75rem; }
.ia-fluxo-vazio { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); max-width: 24rem; text-align: center; font-size: 0.875rem; color: var(--tinta-suave); pointer-events: none; }
.ia-fluxo-mapa { position: relative; }

/* Funil com IA: banco de mídias */
.ia-midias-lista { display: grid; gap: 0.75rem; margin: 0.75rem 0; }
.ia-midia { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: start; padding: 0.75rem; border: 1px solid var(--borda, #d9dde3); border-radius: 0.5rem; background: var(--fundo-cartao, transparent); }
.ia-midia-icone { font-size: 1.5rem; line-height: 1; }
.ia-midia-corpo { display: grid; gap: 0.35rem; min-width: 0; }
.ia-midia-corpo textarea { width: 100%; }
.ia-midia-acoes { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-end; }
.ia-midias-novo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin: 0.75rem 0; }
.ia-etapa-midias { display: grid; gap: 0.25rem; margin-top: 0.5rem; }
@media (max-width: 40rem) { .ia-midia { grid-template-columns: auto 1fr; } .ia-midia-acoes { grid-column: 1 / -1; flex-direction: row; } }

/* Funil com IA: mensagens prontas e avanço automático dentro do cartão da etapa */
.ia-msg-lista { display: grid; gap: 0.4rem; margin: 0.4rem 0; }
.ia-msg-linha { display: grid; grid-template-columns: auto auto 1fr; gap: 0.25rem 0.5rem; align-items: center; padding: 0.4rem 0.5rem; border: 1px solid var(--borda, #d9dde3); border-radius: 0.5rem; }
.ia-msg-num { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--amarelo-claro, #fff3c4); font-size: 0.75rem; font-weight: 700; }
.ia-msg-texto { display: grid; min-width: 0; }
.ia-msg-texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-msg-texto strong { overflow-wrap: anywhere; }
.ia-msg-acoes { grid-column: 1 / -1; display: flex; gap: 0.15rem; justify-content: flex-end; }
.ia-msg-novo { display: grid; gap: 0.4rem; margin-top: 0.4rem; }
.ia-intervalo, .ia-avanco-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.ia-intervalo input, .ia-avanco-linha input { width: 4.5rem !important; flex: none; }
.ia-avanco-corpo { display: grid; gap: 0.4rem; margin: 0.4rem 0; }
.ia-avanco-linha .seletor { flex: 1; min-width: 8rem; }

/* ---------- Percurso de vendas ---------- */
.pc-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .6rem 0 1rem; padding: .6rem .8rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; }
.pc-passo { background: var(--pc-cor); color: #fff; font-size: .8rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; }
.pc-seta { color: var(--tinta); opacity: .5; }
.pc-faixa-nota { flex-basis: 100%; font-size: .8rem; opacity: .75; }
.pc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 1rem; align-items: start; }
.pc-trilho { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: .6rem; align-items: start; min-width: 0; }
.pc-cartao { min-width: 0; font-size: .78rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.pc-arrastando { opacity: .5; }
.pc-alvo { outline: 3px dashed var(--pc-cor, #888); outline-offset: 2px; }
.pc-topo { display: flex; align-items: flex-start; gap: .35rem; padding: .45rem .5rem; background: var(--pc-cor); color: #fff; height: 4.1rem; box-sizing: border-box; overflow: hidden; }
.pc-tit { flex: 1; min-width: 0; }
.pc-tit strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; line-height: 1.5rem; }
.pc-topo small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .68rem; line-height: 1.2; height: 2.4em; opacity: .9; }
.pc-alca { cursor: grab; opacity: .8; }
.pc-nome { width: 100%; box-sizing: border-box; height: 1.5rem; font: inherit; font-size: .8rem; font-weight: 700; background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 6px; padding: .1rem .3rem; }
.pc-mover { display: flex; gap: .15rem; flex: none; }
.pc-btn { border: 0; background: rgba(255,255,255,.25); color: #fff; width: 1.35rem; height: 1.35rem; padding: 0; line-height: 1; border-radius: 6px; cursor: pointer; font-size: .7rem; }
.pc-btn:disabled { opacity: .3; cursor: default; }
.pc-v { display: none; }
.pc-num { width: 1.3rem; height: 1.3rem; margin-top: .1rem; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.wa-rapido { display: inline-flex; gap: .25rem; align-items: center; font-size: .72rem; }
.pc-corpo { padding: .5rem; display: grid; gap: .45rem; }
.pc-corpo .ia-msg-linha { grid-template-columns: auto 1fr; padding: .3rem .4rem; }
.pc-corpo .ia-midia-icone { display: none; }
.pc-corpo .ia-msg-texto small { font-size: .68rem; }
.pc-corpo .ia-msg-tempo { font-size: .7rem; flex-wrap: wrap; }
.pc-corpo .ia-msg-tempo input { width: 3.6rem !important; padding: .15rem .3rem; }
.pc-corpo .cartao-rotulo, .pc-corpo .ia-intervalo, .pc-corpo .dica { font-size: .7rem; }
.pc-corpo .botao, .pc-corpo select { font-size: .72rem; }
.pc-corpo .ia-intervalo input { width: 3.4rem !important; }
.pc-rotulo { display: grid; gap: .25rem; font-size: .8rem; font-weight: 600; }
.pc-rotulo textarea { width: 100%; font: inherit; font-weight: 400; box-sizing: border-box; }
.pc-seguir { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .8rem; }
.pc-seguir input[type=number] { width: 4.2rem; }
.pc-novo { align-self: stretch; min-height: 7rem; display: grid; place-content: center; gap: .3rem; text-align: center; padding: 1rem; border: 2px dashed var(--linha); border-radius: 12px; background: transparent; color: var(--tinta); cursor: pointer; font: inherit; }
.pc-novo span { font-size: 1.8rem; }
.pc-novo small { font-size: .75rem; opacity: .7; }
.pc-novo:hover:not(:disabled) { border-color: var(--tinta); }
.pc-apoio { border: 2px dashed var(--linha); background: transparent; }
.pc-apoio .pc-topo { background: #6b7280; }
.pc-apoio-item { border: 1px solid var(--linha); border-radius: 8px; padding: .3rem .5rem; margin-bottom: .4rem; background: var(--superficie); }
.pc-apoio-item summary { cursor: pointer; display: flex; justify-content: space-between; gap: .4rem; font-size: .85rem; }
.pc-apoio-item em { font-size: .7rem; color: #16a34a; font-style: normal; }
.pc-apoio-campo { display: grid; gap: .4rem; margin-top: .4rem; }
.pc-apoio-campo textarea, .pc-apoio-t input { width: 100%; font: inherit; box-sizing: border-box; }
.pc-apoio-t { display: flex; gap: .3rem; }
.wa-telefone { position: sticky; top: 1rem; min-width: 0; }
.wa-titulo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .4rem; }
.wa-titulo h3 { margin: 0; font-size: .95rem; }
.pc-filtros { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.pc-filtro { display: inline-flex; gap: .25rem; align-items: center; font-size: .75rem; border: 1px solid var(--pc-cor); color: var(--tinta); padding: .1rem .5rem; border-radius: 999px; cursor: pointer; }
.wa-aparelho { border: 8px solid #1f2937; border-radius: 26px; overflow: hidden; background: #e5ddd5; display: flex; flex-direction: column; height: 520px; max-width: 360px; margin: 0 auto; }
.wa-cabeca { background: #075e54; color: #fff; display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; }
.wa-cabeca small { display: block; font-size: .7rem; opacity: .85; }
.wa-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: #fff3; display: grid; place-items: center; }
.wa-tela { flex: 1; overflow-y: auto; padding: .6rem; display: flex; flex-direction: column; gap: .35rem; }
.wa-bolha { align-self: flex-start; max-width: 85%; background: #fff; color: #111; padding: .4rem .6rem; border-radius: 0 10px 10px 10px; font-size: .82rem; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px #0002; }
.wa-midia { display: grid; gap: .1rem; }
.wa-audio { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-width: 9rem; }
.wa-onda { flex: 1; height: .9rem; min-width: 3rem; background: repeating-linear-gradient(90deg, #9ca3af 0 2px, transparent 2px 5px); border-radius: 2px; }
.wa-audio small { flex-basis: 100%; opacity: .7; }
.wa-digitando { font-style: italic; color: #555; }
.wa-pontos { display: inline-flex; gap: 3px; align-items: center; }
.wa-pontos i { width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; animation: wa-pulo 1s infinite ease-in-out; }
.wa-pontos i:nth-child(2) { animation-delay: .15s; } .wa-pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes wa-pulo { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.wa-cliente { align-self: flex-end; max-width: 85%; background: #dcf8c6; color: #111; padding: .4rem .6rem; border-radius: 10px 0 10px 10px; font-size: .82rem; }
.wa-chip { align-self: center; background: var(--pc-cor); color: #fff; font-size: .7rem; padding: .15rem .6rem; border-radius: 999px; margin-top: .3rem; text-align: center; }
.wa-vazio { align-self: center; font-size: .72rem; color: #555; font-style: italic; text-align: center; }
@media (max-width: 1100px) { .pc-layout { grid-template-columns: 1fr; } .wa-telefone { position: static; } }
@media (max-width: 700px) {
  .pc-trilho { grid-template-columns: 1fr; }
  .pc-novo { min-height: 5rem; }
  .pc-h { display: none; } .pc-v { display: inline; }
  .pc-alca { display: none; }
  .wa-aparelho { height: 440px; }
  .pc-faixa { padding: .5rem; }
}
.ia-msg-tempo { grid-column: 1 / -1; display: flex; align-items: center; gap: .35rem; font-size: .78rem; opacity: .85; }
.ia-msg-tempo input { width: 4.5rem !important; flex: none; }
.ia-msg-tempo span { white-space: nowrap; }

/* =====================================================================
   Início — redesenho (indicadores em faixa própria, conversas estilo WhatsApp Web,
   gráficos compactos e totalmente responsivo). Só estilo: nada de dados mudou.
   ===================================================================== */
.pagina.inicio { --ini-gap: 0.875rem; gap: var(--ini-gap); }
.kpi-faixa { flex: none; min-width: 0; }
.kpi-faixa .cartoes-kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ini-gap); }
.indicador-kpi { position: relative; overflow: hidden; align-content: start; gap: 0.1875rem; padding: 0.875rem 1rem 0.75rem; border-radius: 1rem; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; min-height: 6.5rem; }
.indicador-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08); border-color: var(--zt-6); }
.indicador-kpi .kpi-linha strong { font-size: 1.75rem; }
.kpi-rotulo { font-size: 0.8125rem; }
.kpi-tendencia { position: absolute; right: 0.75rem; bottom: 0.625rem; width: 34%; height: 1.5rem; opacity: 0.9; }
.kpi-tendencia polyline { fill: none; stroke: var(--zt-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kpi-esqueleto { min-height: 6.5rem; background: linear-gradient(100deg, var(--superficie) 30%, var(--fundo) 50%, var(--superficie) 70%); background-size: 200% 100%; animation: ini-brilho 1.4s ease-in-out infinite; }
@keyframes ini-brilho { to { background-position: -200% 0; } }
.indicador-kpi:nth-child(1) .icone-circulo { background: #e8f3ff; color: #1677f2; }
.indicador-kpi:nth-child(2) .icone-circulo { background: #e6f7ef; color: #16a765; }
.indicador-kpi:nth-child(3) .icone-circulo { background: #efeaff; color: #7c5cf0; }
.indicador-kpi:nth-child(4) .icone-circulo { background: #e8f3ff; color: #1677f2; }
.indicador-kpi:nth-child(5) .icone-circulo { background: #fff4de; color: #f59e0b; }

/* grade: conversas (≈33%) à esquerda e filtros + qualificação + gráficos à direita */
.inicio-grade { flex: 1 1 auto; min-height: 30rem; grid-template-columns: minmax(18rem, 1fr) minmax(0, 2fr); gap: var(--ini-gap); align-items: stretch; }
.resumo { gap: 0.75rem; min-height: 0; }
.resumo-corpo { overflow-y: auto; min-height: 0; flex: 1; gap: var(--ini-gap); padding-right: 4px; scrollbar-width: thin; }
.resumo-corpo .painel-cartoes { display: block; }
.resumo-topo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
.resumo-topo .filtro-icone { max-width: none; flex: none; }
.resumo-topo .periodo-datas, .resumo-topo .botao-texto { grid-column: 1 / -1; }
.resumo-topo .filtro-icone .seletor { height: 2.5rem; padding-left: 2.125rem; padding-right: 1.5rem; font-size: 0.78rem; text-overflow: ellipsis; transition: border-color 0.15s ease, box-shadow 0.15s ease; }

/* qualificação dos leads */
.qualificacao { padding: 0.75rem 0.875rem; gap: 0.625rem; }
.qualificacao-cartoes { gap: 0.625rem; }
.qualif-card { position: relative; gap: 0.125rem; padding: 0.625rem 0.75rem 0.75rem; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.qualif-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 24, 40, 0.07); }
.qualif-numero { font-size: 1.5rem; }
.qualif-barra { display: block; height: 0.3125rem; margin-top: 0.3125rem; border-radius: 62.4375rem; background: color-mix(in srgb, var(--cor) 16%, transparent); overflow: hidden; }
.qualif-barra i { display: block; height: 100%; border-radius: inherit; background: var(--cor); transition: width 0.6s ease; }

/* gráficos: três lado a lado, mais baixos */
.resumo-corpo .graficos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; gap: var(--ini-gap); }
.resumo-corpo .graficos-grade > .quadro-grafico { grid-column: auto !important; grid-row: auto !important; min-width: 0; }
.quadro-grafico { transition: box-shadow 0.18s ease; }
.quadro-grafico:hover { box-shadow: 0 6px 18px rgba(16, 24, 40, 0.07); }
.grafico-svg { max-height: 9.5rem; }
.quadro-grafico .pizza { grid-template-columns: minmax(5.5rem, 8rem) minmax(0, 1fr); }
.quadro-grafico .grafico-vazio { padding: 2rem 0; }

/* conversas no estilo WhatsApp Web */
.conversas { border-radius: 1rem; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05); }
.conversa-item { transition: background 0.15s ease; position: relative; }
.conversa-item .conversa { border-bottom: 1px solid var(--linha); transition: background 0.15s ease; }
.conversa-item:hover .conversa { background: var(--zt-7); }
.conversa-item.selecionada .conversa { background: var(--zt-6); box-shadow: inset 3px 0 0 var(--zt-2); }
.avatar-conversa { position: relative; font-size: 0.9375rem; }
.avatar-conversa::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 2px solid var(--superficie); background: #98a2b3; }
.conversa-item[data-cor="azul"] .avatar-conversa::after { background: #1677f2; }
.conversa-item[data-cor="amarelo"] .avatar-conversa::after { background: #f59e0b; }
.conversa-item[data-cor="vermelho"] .avatar-conversa::after { background: #ef4444; }
.conversa-item[data-cor="verde"] .avatar-conversa::after { background: #16a765; }
.conversa-linha1 strong { font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversa-previa { font-size: 0.8125rem; }
.abas-conversa button { transition: background 0.18s ease, color 0.18s ease; }
.conversas-lista { scrollbar-width: thin; }

/* banner */
.faixa { border-radius: 1rem; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05); }

/* tablet: indicadores quebram em 3 + 2, gráficos em 2 colunas */
@media (max-width: 1279px) {
  .kpi-faixa .cartoes-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resumo-corpo .graficos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumo-topo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .inicio-grade { grid-template-columns: minmax(16rem, 2fr) minmax(0, 3fr); }
}
/* celular e tablet pequeno: uma coluna, alternando Conversas / Resumo */
@media (max-width: 900px) {
  .inicio-grade { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .inicio[data-vista="conversas"] .kpi-faixa { display: none; }
  .conversas { min-height: 26rem; max-height: 70vh; }
  .resumo-corpo { overflow: visible; }
  .resumo-corpo .graficos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .kpi-faixa .cartoes-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
  .kpi-faixa .cartoes-kpi .indicador-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .indicador-kpi { padding: 0.75rem; min-height: 5.75rem; }
  .indicador-kpi .kpi-linha strong { font-size: 1.5rem; }
  .qualificacao-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumo-corpo .graficos-grade { grid-template-columns: minmax(0, 1fr); }
  .resumo-topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .resumo-topo { grid-template-columns: minmax(0, 1fr); }
}
/* movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .indicador-kpi, .qualif-card, .quadro-grafico, .conversa-item, .conversa-item .conversa, .qualif-barra i, .abas-conversa button { transition: none; }
  .indicador-kpi:hover, .qualif-card:hover { transform: none; }
  .kpi-esqueleto { animation: none; }
}
/* ajustes finos do Início */
.kpi-tendencia { top: 0.95rem; bottom: auto; right: 0.875rem; width: 28%; height: 1.375rem; }
.resumo-corpo .grafico-area { flex: none; height: 11rem; min-height: 0; }
.resumo-corpo .grafico-svg { max-height: none; }
.resumo-corpo .quadro-grafico .pizza { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0.5rem; }
.resumo-corpo .quadro-grafico .pizza-svg { max-width: 8rem; }
.resumo-corpo .quadro-grafico .pizza-legenda { width: 100%; }
@media (max-width: 640px) { .resumo-corpo .grafico-area { height: 10rem; } }
.resumo-corpo .cartao-cab { flex-wrap: nowrap; }
.resumo-corpo .cartao-cab h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ===== Início — fundo WhatsApp, itens compactos, banner e altura ===== */
.inicio-grade .conversas-lista{
  background-color:#efeae2 !important;
  background-image:var(--fundo-conversas,none) !important;
  background-size:56px;
}
.inicio-grade .conversas-lista .conversa-item{background:rgba(255,255,255,.72) !important;padding:.35rem .6rem !important;gap:.5rem !important;min-height:0 !important;backdrop-filter:blur(1px)}
.inicio-grade .conversas-lista .conversa-item:hover,.inicio-grade .conversas-lista .conversa-item.selecionada{background:rgba(255,255,255,.95) !important}
.conversa-item .conversa-numero,.conversa-item .conversa-previa,.conversa-item .conversa-nome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.conversa-item .conversa-etiquetas{flex-wrap:nowrap !important;overflow:hidden;gap:.25rem !important}
.conversa-item .conversa-etiquetas>*{flex:0 0 auto;max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversa-item .conversa-data{display:none !important}
.conversas-fundo{margin-right:.25rem}
.papel-menu{position:absolute;right:.5rem;top:2.6rem;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;padding:.5rem;background:#fff;border:1px solid #d9d9d9;border-radius:.6rem;box-shadow:0 6px 20px rgba(0,0,0,.18);width:min(19rem,92%)}
.papel-menu.oculto{display:none}
.papel-opcao{display:grid;gap:.15rem;justify-items:center;background:none;border:2px solid transparent;border-radius:.5rem;padding:.2rem;cursor:pointer;font:inherit}
.papel-opcao.ativa{border-color:#25d366}
.papel-previa{width:100%;aspect-ratio:1;border-radius:.4rem;background-color:#efeae2;background-size:60%;border:1px solid #e0dcd2}
.papel-opcao small{font-size:.65rem}
.conversas-cartao,.inicio-grade .cartao-conversas{position:relative}
/* banner mais baixo e controles sem sobreposição */
.faixa{padding:.3rem .75rem !important;gap:.5rem}
.faixa-palco{min-height:2.6rem !important}
.faixa-texto p{margin:0;font-size:.78rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.faixa-controles{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;position:static !important}
.faixa-pontos{display:flex;gap:.25rem}
/* sem barra de rolagem da página no desktop */
@media (min-width:901px){
  .pagina.inicio{overflow:hidden !important;display:flex;flex-direction:column;height:100%}
  .pagina.inicio .inicio-grade{flex:1 1 0 !important;min-height:0 !important}
  .pagina.inicio .inicio-grade>*{min-height:0}
}
@media (min-width:901px) and (max-height:640px){.pagina.inicio{overflow-y:auto !important}}

/* papel de parede: azulejo bem pequeno e quase transparente */
.papel-previa{background-size:70% !important}
/* gráficos: cabem na coluna sem rolagem (altura acompanha a tela) */
@media (min-width:901px){
  .pagina.inicio .resumo-corpo{overflow:hidden !important;display:flex !important;flex-direction:column;gap:.5rem}
  .pagina.inicio .resumo-corpo .graficos-grade{flex:1 1 0;min-height:0;grid-template-rows:minmax(0,1fr) !important}
  .pagina.inicio .resumo-corpo .graficos-grade>.quadro-grafico{min-height:0;overflow:hidden;display:flex;flex-direction:column}
  .pagina.inicio .resumo-corpo .grafico-area{flex:1 1 0 !important;height:auto !important;min-height:5rem}
  .pagina.inicio .resumo-corpo .quadro-grafico .legenda{max-height:none}
}

/* ===== Início — gráficos no novo layout ===== */
.quadro-grafico .gx-cab{gap:.6rem;align-items:center}
.gx-titulo{display:grid;min-width:0;flex:1}
.gx-titulo h2{margin:0;font-size:1rem}
.gx-titulo small{color:var(--tinta-suave);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-periodo{flex:none;font-size:.72rem;font-weight:600;padding:.2rem .6rem;border-radius:62rem;background:var(--fundo,#f3f4f6);color:var(--tinta-suave);border:1px solid var(--linha)}
.quadro-grafico .grafico-grade{stroke-dasharray:3 4}
.gx-rodape{display:grid;gap:.4rem;margin-top:.4rem;flex:none}
.gx-rodape-2{grid-template-columns:1fr 1fr}
.gx-rodape-4{grid-template-columns:1fr 1fr}
.gx-bloco{display:grid;gap:.1rem;padding:.35rem .55rem;border-radius:.6rem;background:rgba(255,255,255,.7);border:1px solid var(--linha);min-width:0}
.gx-bloco-nome{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-bloco-nome i{width:.55rem;height:.55rem;border-radius:50%;background:var(--cor);flex:none}
.gx-bloco-valor{display:flex;align-items:center;gap:.4rem}
.gx-bloco-valor strong{font-size:1.15rem;line-height:1.1}
.gx-delta{font-size:.68rem;font-weight:700;padding:.05rem .4rem;border-radius:62rem}
.gx-delta.bom{background:#e5f6ea;color:#15803d}.gx-delta.ruim{background:#fde8e8;color:#c62828}.gx-delta.igual{background:#eee;color:#666}
.quadro-grafico .pizza.pizza-cartoes{display:grid !important;grid-template-columns:minmax(5rem,9rem) minmax(0,1fr) !important;gap:.75rem;align-items:center;flex:1;min-height:0}
.pizza-cartoes .pizza-svg{max-width:none !important;width:100%}
.pizza-cards{display:grid;gap:.35rem;min-width:0}
.pizza-card{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n p" "v p";align-items:center;padding:.3rem .55rem;border-radius:.6rem;background:rgba(255,255,255,.75);border:1px solid var(--linha);min-width:0}
.pizza-card-nome{grid-area:n;display:flex;align-items:center;gap:.35rem;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pizza-card-nome i{width:.55rem;height:.55rem;border-radius:50%;flex:none}
.pizza-card strong{grid-area:v;font-size:1.05rem;line-height:1.1}
.pizza-pilula{grid-area:p;font-style:normal;font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:62rem;color:var(--cor);background:color-mix(in srgb,var(--cor) 14%,white)}
@media (max-width:1500px){.gx-rodape-4 .gx-bloco-nome{font-size:.66rem}.gx-periodo{display:none}}
@media (max-width:900px){.quadro-grafico .pizza.pizza-cartoes{grid-template-columns:minmax(5rem,8rem) minmax(0,1fr) !important}}
@media (min-width:901px){.pagina.inicio .resumo-corpo .grafico-area{min-height:4rem}}
.gx-titulo h2{font-size:.92rem !important}
.gx-periodo{padding:.15rem .45rem}
@media (max-width:1700px){.gx-periodo{display:none}}

/* telas menores / zoom do Windows: tudo diminui junto (todas as medidas são em rem) */
@media (min-width:901px){
  html{font-size:clamp(11px,min(1.05vw,1.9vh),16px)}
}
.quadro-grafico .pizza.pizza-cartoes{grid-template-columns:minmax(4rem,6.5rem) minmax(0,1fr) !important;gap:.5rem}
.pizza-card{grid-template-columns:minmax(0,1fr) auto;padding:.25rem .4rem}
.pizza-card-nome{white-space:normal;line-height:1.1;overflow:visible}
.pizza-pilula{padding:.1rem .35rem;font-size:.66rem}
.gx-bloco-nome{white-space:normal;line-height:1.1;overflow:visible;font-size:.68rem}
@media (max-width:1700px){.pizza-card-nome i{display:none}.gx-bloco{padding:.3rem .4rem}}

/* etiquetas da conversa: só o nome do funil encolhe (com "…"); as demais nunca são cortadas */
.conversa-item .conversa-etiquetas>*{max-width:none !important;overflow:visible !important;flex:0 0 auto}
.conversa-item .conversa-etiquetas>.chip-funil{flex:0 1 auto;min-width:3rem;overflow:hidden !important;text-overflow:ellipsis;max-width:9rem !important}
/* pop-up da linha do tempo: menor, com × e botão Fechar sempre visíveis */
.janela-linha{width:min(30rem,calc(100vw - 1.5rem)) !important;max-height:min(80dvh,38rem) !important;overflow:hidden !important}
.janela-linha[open]{display:flex;flex-direction:column}
.janela-linha>.formulario{flex:1;min-height:0;overflow-y:auto;padding:1rem 1.25rem .75rem;gap:.6rem}
.janela-linha h2{font-size:1.05rem;padding-right:2rem}
.janela-x{position:absolute;top:.5rem;right:.6rem;z-index:2;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--linha);background:var(--superficie,#fff);font-size:1.3rem;line-height:1;cursor:pointer}
.janela-x:hover{background:var(--fundo,#f3f4f6)}
.janela-linha .janela-acoes{position:sticky;bottom:0;background:var(--superficie,#fff);padding-top:.5rem}
.janela-linha .linha-tempo li{padding-block:.15rem}
.janela-linha .ia-chat-historico{max-height:11rem}
.conversa-item .conversa-etiquetas{flex-wrap:wrap !important;overflow:visible !important;row-gap:.2rem}
.conversa-item .conversa-etiquetas>.chip{white-space:nowrap}
.conversa-item .conversa-etiquetas>.chip-funil{max-width:100% !important;flex:0 1 auto}

/* =====================================================================
   Início — visual "vidro azul" (layout do modelo aprovado)
   As cores seguem o tema escolhido; no tema Azul fica idêntico ao modelo.
   ===================================================================== */
body .app{background:
  radial-gradient(60rem 30rem at 12% 8%,color-mix(in srgb,var(--zt-1) 22%,transparent),transparent 70%),
  radial-gradient(50rem 28rem at 92% 92%,color-mix(in srgb,var(--zt-2) 16%,transparent),transparent 70%),
  linear-gradient(135deg,color-mix(in srgb,var(--zt-6) 70%,white),color-mix(in srgb,var(--zt-7) 85%,white) 45%,color-mix(in srgb,var(--zt-6) 55%,white))}
body .menu{background:rgba(255,255,255,.55);backdrop-filter:blur(10px);border-right-color:rgba(255,255,255,.7)}
body .menu-logo{background:#fff;border-radius:1rem;padding:.35rem .5rem;box-shadow:0 2px 10px rgba(16,24,40,.08);justify-self:start}
body .menu-cartao{background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(16,24,40,.06)}
body .topo-saudacao,body .relogio{display:none}
body .topo{justify-content:flex-end}
body .pilula{background:rgba(255,255,255,.9);box-shadow:0 1px 6px rgba(16,24,40,.06);color:var(--tinta)}
body .botao-sino{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.9);box-shadow:0 1px 6px rgba(16,24,40,.06)}
body[data-rota="inicio"] .painel-conteudo{background:transparent;border:0;padding:0;gap:.75rem;overflow:hidden}
body .principal{padding-top:.6rem}

/* cartão de boas-vindas + dica */
.boas-vindas{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.25rem;align-items:center;padding:.9rem 1.25rem;border-radius:1.1rem;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 18px rgba(16,24,40,.06);backdrop-filter:blur(8px)}
.boas-vindas.oculto{display:none}
.bv-saudacao{display:grid;gap:.15rem;min-width:0}
.bv-saudacao strong{font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.15;display:flex;align-items:center;gap:.4rem}
.bv-saudacao strong::before{content:"👋";display:inline-block;transform:scaleX(-1)}
.bv-saudacao small{color:var(--tinta-suave);font-size:.85rem}
.boas-vindas .faixa-inicio{min-width:0}
.boas-vindas .faixa{border:1px solid color-mix(in srgb,var(--zt-2) 35%,white) !important;border-left:3px solid var(--zt-2) !important;border-radius:.9rem;background:color-mix(in srgb,var(--zt-6) 55%,white) !important;padding:.55rem .9rem !important}
.boas-vindas .faixa-icone{background:transparent;font-size:1.4rem;width:2rem}
.boas-vindas .faixa-texto strong{font-size:.85rem}
.boas-vindas .faixa-texto p{font-size:.74rem}
.boas-vindas .faixa-botao{background:var(--zt-2);border-color:var(--zt-2);color:#fff;border-radius:.6rem;font-weight:700;padding:.5rem 1rem}
.boas-vindas .faixa-botao:hover{background:var(--zt-3)}
.boas-vindas .faixa-controles{position:absolute;left:0;right:0;bottom:.12rem;justify-content:center;pointer-events:none}
.boas-vindas .faixa-controles>*{pointer-events:auto}
.boas-vindas .faixa-seta{display:none}
.boas-vindas .faixa-ponto{width:.35rem;height:.35rem}.boas-vindas .faixa-ponto.ativo{width:.9rem}
.boas-vindas .faixa-fechar{font-size:.9rem;top:.1rem;right:.2rem;opacity:.5}
@media (max-width:900px){.boas-vindas{grid-template-columns:1fr}}

/* cartões de vidro */
body[data-rota="inicio"] .indicador-kpi,
body[data-rota="inicio"] .conversas,
body[data-rota="inicio"] .quadro-grafico,
body[data-rota="inicio"] .qualificacao,
body[data-rota="inicio"] .resumo-topo .seletor{background:rgba(255,255,255,.78) !important;border:1px solid rgba(255,255,255,.9) !important;box-shadow:0 4px 18px rgba(16,24,40,.06) !important;backdrop-filter:blur(8px)}
body[data-rota="inicio"] .resumo-topo .seletor{box-shadow:0 2px 8px rgba(16,24,40,.05) !important}

/* indicadores: ícone grande à esquerda, número / rótulo / variação empilhados, sem mini-gráfico */
.kpi-faixa .indicador-kpi{display:grid !important;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic num" "ic rot" "ic del";column-gap:.85rem;align-items:center;padding:.8rem 1.1rem !important}
.kpi-faixa .kpi-linha{display:contents}
.kpi-faixa .kpi-linha .icone-circulo{grid-area:ic;width:3rem;height:3rem}
.kpi-faixa .kpi-linha strong{grid-area:num;font-size:1.7rem;line-height:1.05}
.kpi-faixa .kpi-rotulo{grid-area:rot;color:var(--tinta-suave);font-size:.8rem}
.kpi-faixa .kpi-delta{grid-area:del}
.kpi-faixa .kpi-tendencia{display:none !important}

/* conversas */
.conversas-atualizar svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.abas-conversa button .contagem{background:none !important;padding:0;min-width:0;font-weight:inherit;color:inherit}
.abas-conversa button .contagem::before{content:" ("}.abas-conversa button .contagem::after{content:")"}
.abas-conversa button:not(.ativa){background:transparent;color:var(--tinta-suave)}
.abas-conversa button.ativa{background:var(--zt-2);color:#fff}
.inicio-grade .conversas-lista{background-color:color-mix(in srgb,var(--zt-6) 40%,white) !important}
.conversas-vazio{display:grid;justify-items:center;align-content:center;gap:.4rem;text-align:center;padding:2rem 1rem;min-height:100%}
.conversas-vazio>svg{width:2.4rem;height:2.4rem;fill:none;stroke:color-mix(in srgb,var(--zt-2) 60%,#94a3b8);stroke-width:1.6;opacity:.8}
.conversas-vazio strong{font-size:.95rem}

/* qualificação: cartões brancos com contorno colorido fino */
.qualificacao{background:rgba(255,255,255,.55) !important}
.qualif-card{background:rgba(255,255,255,.92) !important;border:1.5px solid color-mix(in srgb,var(--cor) 45%,white) !important;box-shadow:none !important}
.qualif-card::before{display:none !important}

/* gráficos sem dados */
.vazio-icone{display:grid;justify-items:center;align-content:center;gap:.4rem;flex:1;color:var(--tinta-suave)}
.vazio-icone svg{width:3rem;height:3rem;fill:none;stroke:#cbd5e1;stroke-width:3.2;stroke-linecap:round}
.vazio-icone p{margin:0;font-size:.85rem}
.abas-conversa button{white-space:nowrap}
.abas-conversa button .contagem{display:inline !important;margin-left:.15rem}
/* compactação vertical para caber em telas baixas */
body[data-rota="inicio"] .boas-vindas{padding:.5rem 1.1rem}
.bv-saudacao strong{font-size:clamp(1.15rem,1.9vw,1.6rem)}
.kpi-faixa .indicador-kpi{padding:.5rem 1rem !important}
.kpi-faixa .kpi-linha .icone-circulo{width:2.5rem;height:2.5rem}
.kpi-faixa .kpi-linha strong{font-size:1.45rem}
.qualificacao{padding:.5rem .7rem !important}
.qualif-card{padding:.4rem .6rem !important}
.gx-bloco,.pizza-card{padding:.2rem .4rem}
.gx-rodape{gap:.3rem;margin-top:.25rem}
@media (min-width:901px){
  .pagina.inicio .resumo-corpo .grafico-area{min-height:6rem !important}
  .quadro-grafico .gx-cab{padding-bottom:0}
}
@media (max-height:800px){body[data-rota="inicio"] .aviso-robo{padding:.25rem .75rem;font-size:.75rem}}

/* ===== Todas as páginas: mesmo fundo, cartão de saudação e conteúdo em vidro ===== */
body .painel-conteudo{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 18px rgba(16,24,40,.06);backdrop-filter:blur(8px);padding:clamp(.75rem,1.6vw,1.25rem)}
body[data-rota="inicio"] .painel-conteudo{background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:0}
body .cabecalho-pagina{display:none !important}
/* o cartão de saudação fica fora do quadro de vidro: sobe para antes dele */
.principal{gap:.65rem}
.boas-vindas{margin:0}
.bv-pagina{text-align:right;min-width:0}
.bv-pagina h1{margin:0;font-size:clamp(1.05rem,1.7vw,1.4rem)}
.bv-pagina p{margin:.1rem 0 0;color:var(--tinta-suave);font-size:.8rem}
.boas-vindas.sem-faixa{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.boas-vindas.sem-faixa .faixa-inicio{display:none}
.boas-vindas:not(.sem-faixa) .bv-pagina{display:none}
@media (max-width:900px){.bv-pagina{text-align:left}.boas-vindas.sem-faixa{grid-template-columns:1fr;gap:.35rem}}

/* botão de recolher: à esquerda da logo, discreto */
.menu-topo{justify-content:flex-start;gap:.4rem}
.menu-topo .menu-recolher{order:-1;width:1.5rem;height:1.5rem;min-width:0;padding:0;border:0 !important;background:transparent !important;box-shadow:none !important;opacity:.45;border-radius:.4rem}
.menu-topo .menu-recolher:hover{opacity:1;background:rgba(0,0,0,.05) !important}
.menu-topo .menu-recolher svg{width:.95rem;height:.95rem}
.menu-topo .menu-logo{flex:1;min-width:0}
body.menu-recolhido .menu-topo{flex-direction:column-reverse}
body.menu-recolhido .menu-topo .menu-recolher{order:0}
body.menu-recolhido .menu-logo{width:100%}

/* Funil com IA: cartões modernos */
.ia-topo{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.ia-topo>div{flex:1 1 18rem;min-width:0}
.ia-topo h2{margin:0;font-size:1.15rem}
.ia-topo .dica{margin:.15rem 0 0}
.ia-projeto{display:grid;gap:.6rem}
.ia-projeto-topo{display:flex;align-items:center;gap:.6rem}
.ia-projeto-topo h3{margin:0;font-size:.95rem}
.ia-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:.8rem}
.ia-card{display:grid;gap:.55rem;align-content:start;padding:.9rem 1rem;border-radius:1rem;background:rgba(255,255,255,.92);border:1px solid var(--linha);box-shadow:0 3px 12px rgba(16,24,40,.05);position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.ia-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.28rem;background:var(--linha)}
.ia-card.ligado::before{background:var(--ok,#16a34a)}
.ia-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,24,40,.1)}
.ia-card-topo{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.ia-card-nome{font-weight:700;font-size:1rem;color:var(--tinta);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ia-card-nome:hover{text-decoration:underline}
.ia-card-gatilho{margin:0;color:var(--tinta-suave);font-size:.78rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ia-card-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.ia-card-num{display:grid;gap:0;padding:.4rem .5rem;border-radius:.7rem;background:var(--zt-7);text-align:center}
.ia-card-num strong{font-size:1.2rem;line-height:1.1}
.ia-card-num small{font-size:.66rem;color:var(--tinta-suave);line-height:1.15}
.ia-card-acoes{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.1rem}
.ia-card-acoes .botao-texto{margin-left:0}
.ia-card-acoes .perigo{margin-left:auto}

/* Treinamentos: módulos e capa */
.treino-modulos{display:flex;gap:.6rem;overflow-x:auto;padding:.1rem .1rem .4rem;scrollbar-width:thin}
.treino-modulo{flex:0 0 auto;min-width:9.5rem;display:grid;gap:.15rem;text-align:left;padding:.6rem .8rem;border-radius:.9rem;border:1px solid var(--linha);background:rgba(255,255,255,.92);cursor:pointer;font:inherit;transition:border-color .15s ease,box-shadow .15s ease}
.treino-modulo:hover{box-shadow:0 4px 14px rgba(16,24,40,.08)}
.treino-modulo.ativa{border-color:var(--zt-2);box-shadow:0 0 0 2px color-mix(in srgb,var(--zt-2) 30%,transparent)}
.treino-modulo strong{font-size:.85rem}.treino-modulo small{color:var(--tinta-suave);font-size:.7rem}
.treino-modulo-barra{height:.3rem;border-radius:62rem;background:var(--fundo,#eee);overflow:hidden;margin-top:.2rem}
.treino-modulo-barra i{display:block;height:100%;background:var(--zt-2)}
.treino-secao{display:grid;gap:.6rem}
.treino-secao-titulo{margin:.2rem 0 0;font-size:1rem;display:flex;align-items:baseline;gap:.6rem}
.treino-secao-titulo small{color:var(--tinta-suave);font-weight:400;font-size:.75rem}
.treino-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:.9rem}
.treino-cartao{display:grid;gap:.6rem;align-content:start;overflow:hidden}
.treino-capa{position:relative;aspect-ratio:16/9;border-radius:.8rem;overflow:hidden;background:#111}
.treino-capa img{width:100%;height:100%;object-fit:cover;display:block}
.treino-play{position:absolute;inset:0;border:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.35));cursor:pointer;display:grid;place-items:center}
.treino-play span{width:3.2rem;height:3.2rem;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;color:var(--zt-3);font-size:1.2rem;padding-left:.15rem;box-shadow:0 4px 16px rgba(0,0,0,.3);transition:transform .15s ease}
.treino-play:hover span{transform:scale(1.08)}
.treino-capa .video-moldura{position:absolute;inset:0;height:100%}
.campo-duplo{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:.6rem}
@media (max-width:520px){.campo-duplo{grid-template-columns:1fr}}
.treino-area{display:flex;flex-direction:column;gap:.8rem;min-height:0;overflow-y:auto}
.treino-area>*{flex:none}
.treino-modulos{flex:none}
body .menu-logo img{width:min(6.6rem,100%)}
body .menu-logo{padding:.2rem .35rem}

/* ===== Contatos — layout do modelo ===== */
.bv-extra{display:none}
body[data-rota="contatos"] .bv-pagina{display:none !important}
body[data-rota="contatos"] .bv-extra{display:flex;align-items:center;justify-content:flex-end;gap:1rem;min-width:0}
body[data-rota="contatos"] .boas-vindas.sem-faixa{grid-template-columns:minmax(0,1fr) auto;padding:.5rem .8rem}
.bv-ilustracao{display:flex;align-items:center;gap:.5rem;opacity:.95}
.bv-ilustracao svg{width:2.2rem;height:2.2rem;padding:.5rem;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.1);fill:none;stroke:var(--zt-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bv-ilustracao b{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:#25d366;box-shadow:0 4px 12px rgba(37,211,102,.4)}
.bv-ilustracao b svg{background:none;box-shadow:none;stroke:#fff;width:1.8rem;height:1.8rem}
.bv-total{display:flex;align-items:center;gap:.7rem;padding:.5rem .9rem;border-radius:.9rem;background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(16,24,40,.06)}
.bv-total-ic{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:color-mix(in srgb,var(--zt-2) 14%,white)}
.bv-total-ic svg{width:1.2rem;height:1.2rem;fill:none;stroke:var(--zt-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bv-total small{display:block;color:var(--tinta-suave);font-size:.72rem;line-height:1.2}
.bv-total strong{display:block;font-size:1.5rem;line-height:1.1}
.bv-atualizado{display:flex !important;align-items:center;gap:.3rem}
.bv-atualizado i{width:.4rem;height:.4rem;border-radius:50%;background:#22c55e;display:inline-block}
@media (max-width:900px){body[data-rota="contatos"] .bv-ilustracao{display:none}body[data-rota="contatos"] .boas-vindas.sem-faixa{grid-template-columns:1fr}body[data-rota="contatos"] .bv-extra{justify-content:flex-start}}

.contatos-descricao{display:none}
.contatos-topo{gap:.7rem}
.contatos-abas{background:rgba(255,255,255,.7);border:1px solid var(--linha)}
.contatos-abas button{display:inline-flex;align-items:center;gap:.4rem}
.contatos-abas button svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contatos-abas button.ativa{background:var(--zt-2);color:#fff;box-shadow:0 3px 10px color-mix(in srgb,var(--zt-2) 40%,transparent)}
.sync-info{display:inline-flex;align-items:center;gap:.35rem;color:var(--tinta-suave);font-size:.74rem}
.sync-info svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contatos-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;flex:none}
.contatos-kpi{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;border-radius:1rem;background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);box-shadow:0 3px 12px rgba(16,24,40,.05);min-width:0}
.contatos-kpi .kpi-ic{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;flex:none;background:var(--bg)}
.contatos-kpi .kpi-ic svg{width:1.4rem;height:1.4rem;fill:none;stroke:var(--cor);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contatos-kpi small{display:block;color:var(--tinta-suave);font-size:.74rem;line-height:1.25}
.contatos-kpi .kpi-valor{display:flex;align-items:center;gap:.5rem}
.contatos-kpi .kpi-valor strong{font-size:1.5rem;line-height:1.1}
.kpi-hoje{font-size:.68rem;font-weight:700;padding:.1rem .45rem;border-radius:62rem;background:#dcfce7;color:#15803d}
.k-azul{--cor:#2563eb;--bg:#dbeafe}.k-verde{--cor:#16a34a;--bg:#dcfce7}.k-roxo{--cor:#7c3aed;--bg:#ede9fe}.k-laranja{--cor:#ea8a0c;--bg:#ffedd5}
@media (max-width:1000px){.contatos-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.contatos-kpis{grid-template-columns:1fr 1fr;gap:.5rem}.contatos-kpi{padding:.5rem .6rem;gap:.5rem}.contatos-kpi .kpi-ic{width:2.2rem;height:2.2rem}.contatos-kpi .kpi-valor strong{font-size:1.2rem}}

/* faixa da extensão */
.contatos-importar{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding:.7rem 1rem;border-radius:1rem;background:color-mix(in srgb,var(--zt-6) 70%,white);border:1px solid color-mix(in srgb,var(--zt-2) 22%,white);flex:none}
.contatos-importar p{margin:0;flex:1 1 24rem;font-size:.78rem;line-height:1.35}
.importar-robo{position:relative;font-size:2.2rem;line-height:1;flex:none}
.importar-robo i{position:absolute;right:-.5rem;top:-.1rem;display:grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;background:#25d366}
.importar-robo i svg{width:.8rem;height:.8rem;fill:none;stroke:#fff;stroke-width:2.2}
.contatos-importar-acoes{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.contatos-importar-acoes svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-right:.3rem}
.importar-ou{color:var(--tinta-suave);font-size:.78rem}
.botao-reconectar{color:#15803d !important;border-color:#bbf7d0 !important;background:#f0fdf4 !important}

/* filtros */
.contatos-filtros{background:transparent !important;border:0 !important;padding:0 !important}
.campo-icone{position:relative;display:block;flex:1 1 11rem;max-width:20rem;margin:0}
.campo-icone>svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;fill:none;stroke:var(--zt-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.campo-icone .busca,.campo-icone .seletor{width:100%;max-width:none;padding-left:2.2rem !important;background-color:rgba(255,255,255,.92);border-radius:.8rem}
.contatos-filtros>.dica{margin-left:auto;font-size:.74rem}

/* tabela */
.contatos-tabela .tabela-moldura{background:rgba(255,255,255,.92);border-radius:1rem;border:1px solid rgba(255,255,255,.9);box-shadow:0 3px 12px rgba(16,24,40,.05)}
.contatos-tabela .tabela th,.contatos-tabela .tabela td{text-align:left}
.contatos-tabela .tabela td small,.contatos-tabela .tabela td strong{text-align:left}
.contatos-tabela .tabela th{background:color-mix(in srgb,var(--zt-6) 40%,#f8fafc);font-size:.74rem;padding:.6rem .8rem}
.contatos-tabela .tabela td{padding:.5rem .8rem}
.contatos-tabela .tabela tbody tr:hover td{background:color-mix(in srgb,var(--zt-6) 25%,white)}
.th-ordenar{display:inline-flex;align-items:center;gap:.25rem;border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0}
.th-ordenar svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:2;opacity:.5}
.th-ordenar.ativa{color:var(--tinta)}.th-ordenar.ativa svg{opacity:1}
.contato-celula{display:flex;align-items:center;gap:.65rem;min-width:0}
.contato-celula strong{display:block;font-size:.82rem}
.contato-celula small{display:block;color:var(--tinta-suave);font-size:.7rem}
.sem-nome-texto{font-weight:600}
.avatar-contato{display:grid;place-items:center;flex:none;width:2.3rem;height:2.3rem;border-radius:50%;font-weight:700;font-size:.95rem}
.avatar-contato.sem-nome{background:#e5e7eb;color:#6b7280}
.avatar-contato svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.tel-linha{display:inline-flex;align-items:center;gap:.4rem}
.tel-linha svg{width:1.1rem;height:1.1rem;fill:none;stroke:#16a34a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.chip-tel-oculto{display:inline-flex;align-items:center;gap:.3rem}
.chip-tel-oculto svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.8}
.chip-origem{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .65rem;border-radius:62rem;font-size:.72rem;font-weight:600;border:1px solid}
.chip-origem svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chip-origem-whats{color:#15803d;background:#f0fdf4;border-color:#bbf7d0}
.chip-origem-grupo{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}
.chip-origem-funil{color:#c2410c;background:#fff7ed;border-color:#fed7aa}
.acoes-linha{display:flex;align-items:center;justify-content:flex-end;gap:.4rem}
.botao-iniciar{display:inline-flex;align-items:center;gap:.35rem;border:0;border-radius:.6rem;padding:.4rem .7rem;font:inherit;font-size:.74rem;font-weight:600;cursor:pointer;color:var(--zt-4);background:color-mix(in srgb,var(--zt-2) 14%,white);white-space:nowrap}
.botao-iniciar:hover{background:color-mix(in srgb,var(--zt-2) 24%,white)}
.botao-iniciar svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.botao-mais{width:2rem;height:2rem;border-radius:.6rem;border:1px solid var(--linha);background:#fff;cursor:pointer;display:grid;place-items:center}
.botao-mais svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.menu-linha{position:fixed;z-index:60;min-width:11rem;background:#fff;border:1px solid var(--linha);border-radius:.8rem;box-shadow:0 10px 30px rgba(16,24,40,.18);padding:.3rem;display:grid}
.menu-linha button{border:0;background:none;text-align:left;font:inherit;font-size:.8rem;padding:.5rem .7rem;border-radius:.5rem;cursor:pointer}
.menu-linha button:hover{background:var(--fundo,#f3f4f6)}
.col-marcar{width:2.2rem}
@media (max-width:700px){.contatos-tabela .tabela-moldura{overflow-x:auto}.contatos-tabela .tabela{min-width:44rem}}
@media (max-width:700px){
  .contatos-abas{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;border-radius:62rem;scrollbar-width:none}
  .contatos-abas button{flex:0 0 auto;padding:.45rem .8rem;font-size:.74rem}
  .contatos-abas button svg{display:none}
  .contatos-topo .barra-espaco{display:none}
}

/* ===== Saudação das páginas: onda grande, nome em destaque, descrição clara ===== */
.bv-saudacao{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"w t" "w s";column-gap:.8rem;align-items:center}
.bv-saudacao strong{grid-area:t;display:block !important}
.bv-saudacao strong::before{content:none !important}
.bv-saudacao strong .aceno{position:absolute;left:0}
.bv-saudacao{position:relative}
.bv-saudacao strong{padding-left:3.3rem;font-size:clamp(1.4rem,2.4vw,2rem)}
.bv-saudacao strong .aceno{font-size:2.4rem;line-height:1;top:.1rem;transform-origin:70% 70%}
.bv-nome{color:var(--zt-3)}
.bv-saudacao small{grid-area:s;padding-left:3.3rem;display:grid;gap:.1rem}
.bv-descricao{color:var(--zt-5);font-size:.86rem;font-weight:700;line-height:1.3}
.bv-descricao2{color:var(--tinta-suave);font-size:.78rem}
.bv-pagina p{display:none}
.bv-pagina h1{font-size:clamp(1rem,1.6vw,1.3rem);color:var(--zt-5)}
@media (max-width:900px){.bv-saudacao strong,.bv-saudacao small{padding-left:2.8rem}.bv-saudacao strong .aceno{font-size:2rem}}

/* contatos: ilustração maior, sem cartão de total */
body[data-rota="contatos"] .bv-ilustracao{gap:.9rem;margin-right:2rem;position:relative}
.bv-ilustracao b{width:4.2rem;height:4.2rem;box-shadow:0 8px 20px rgba(37,211,102,.45)}
.bv-ilustracao b svg{width:2.5rem;height:2.5rem}
.bv-ilustracao i{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:.8rem;background:#fff;box-shadow:0 4px 12px rgba(16,24,40,.12);font-style:normal}
.bv-ilustracao i svg{width:1.3rem;height:1.3rem;padding:0;background:none;box-shadow:none;stroke:var(--zt-2)}
.bv-ilustracao .ilu-a{transform:translateY(-.6rem) rotate(-6deg)}
.bv-ilustracao .ilu-b{transform:translateY(.4rem) rotate(8deg)}
.bv-ilustracao .ilu-b svg{stroke:#ea8a0c}
.bv-ilustracao .ilu-c{background:#cffafe;transform:translateY(.9rem)}
.bv-ilustracao .ilu-c svg{stroke:#0e7490}
body[data-rota="contatos"] .boas-vindas.sem-faixa{grid-template-columns:minmax(0,1fr) auto}

/* cartões de resumo com onda decorativa */
.contatos-kpi{position:relative;overflow:hidden}
.contatos-kpi::after{content:"";position:absolute;right:0;bottom:0;width:48%;height:70%;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--cor) 22%,transparent),color-mix(in srgb,var(--cor) 4%,transparent));clip-path:polygon(0 100%,0 78%,18% 68%,36% 80%,56% 42%,76% 58%,100% 22%,100% 100%)}
.contatos-kpi>*{position:relative;z-index:1}

/* Início: botão Parar funil compacto, na mesma linha das etiquetas quando couber */
.conversa-acoes{padding:0 .75rem .4rem 3.75rem !important;gap:.3rem !important}
.conversa-acoes .botao,.conversa-acoes button{padding:.15rem .6rem !important;font-size:.68rem !important;min-height:0 !important;line-height:1.3}
.conversa-item{padding-bottom:.25rem}

/* ===== Padrão visual: saudação com fundo de ondas + cartões de resumo iguais (Início e Contatos) ===== */
.boas-vindas{background:#f6faff url("../img/fundo-saudacao.jpg") center/cover no-repeat !important;min-height:6.2rem;padding:.7rem 1.4rem !important;border:1px solid rgba(255,255,255,.9) !important}
.boas-vindas .faixa{background:rgba(255,255,255,.82) !important;backdrop-filter:blur(6px)}
.boas-vindas .faixa-fechar{display:none}
.kpi-faixa,.contatos-kpis{gap:.7rem !important}
.kpi-faixa .indicador-kpi,.contatos-kpi{min-height:5.6rem;padding:.7rem 1.1rem !important;border-radius:1rem}
.kpi-faixa .indicador-kpi{position:relative;overflow:hidden}
.kpi-faixa .indicador-kpi::after{content:"";position:absolute;right:0;bottom:0;width:48%;height:70%;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--cor) 22%,transparent),color-mix(in srgb,var(--cor) 4%,transparent));clip-path:polygon(0 100%,0 78%,18% 68%,36% 80%,56% 42%,76% 58%,100% 22%,100% 100%)}
.kpi-faixa .indicador-kpi>*{position:relative;z-index:1}
.kpi-faixa .indicador-kpi:nth-child(1){--cor:#2563eb}.kpi-faixa .indicador-kpi:nth-child(2){--cor:#16a34a}.kpi-faixa .indicador-kpi:nth-child(3){--cor:#7c3aed}.kpi-faixa .indicador-kpi:nth-child(4){--cor:#2563eb}.kpi-faixa .indicador-kpi:nth-child(5){--cor:#ea8a0c}
.kpi-faixa .kpi-linha .icone-circulo{width:2.8rem !important;height:2.8rem !important}
.kpi-faixa .kpi-linha strong{font-size:1.5rem !important}
.kpi-faixa .kpi-rotulo{font-size:.76rem !important}

/* ===== Ajustes: saudação legível, relógio, faixa, Configurações em folhas ===== */
.boas-vindas{background:linear-gradient(90deg,rgba(255,255,255,.96) 0,rgba(255,255,255,.82) 38%,rgba(255,255,255,0) 72%),#f6faff url("../img/fundo-saudacao.jpg") center/cover no-repeat !important;height:6.2rem !important;min-height:6.2rem !important;max-height:6.2rem !important;box-sizing:border-box;overflow:hidden}
.boas-vindas .bv-saudacao{min-width:0}
.bv-saudacao strong,.bv-descricao,.bv-descricao2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bv-saudacao small{min-width:0;overflow:hidden}
.bv-nome{color:var(--zt-5) !important}
.faixa{overflow:hidden}
.faixa-slide{min-width:0}
.faixa-texto{overflow:hidden}
.faixa-texto strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.faixa-texto p{overflow:hidden;overflow-wrap:anywhere;word-break:normal;-webkit-line-clamp:2 !important}
.topo-direita{display:grid !important;grid-template-columns:auto auto auto;grid-template-areas:"sino pil conta" "rel rel conta";align-items:center;column-gap:.625rem;row-gap:.15rem}
.topo-direita .sino{grid-area:sino;justify-self:center}
.topo-direita .whats-bloco{display:contents}
.topo-direita .pilula{grid-area:pil}
.topo-direita .conta{grid-area:conta}
body .relogio{display:block !important;grid-area:rel;justify-self:start;font-size:.68rem;color:var(--tinta-suave);line-height:1;margin:0}
@media (max-width:480px){body .relogio{display:none !important}.topo-direita{grid-template-areas:"sino pil conta"}}
.config-area{overflow:hidden !important;display:flex;flex-direction:column;gap:.7rem;padding-right:0}
.config-abas{gap:.4rem;border-bottom:0;flex:none}
.config-abas .aba{border:1px solid var(--linha);border-radius:999px;margin:0;padding:.4rem 1rem;background:rgba(255,255,255,.7);font-weight:600}
.config-abas .aba.ativa{background:var(--zt-3);color:#fff;border-color:var(--zt-3)}
.config-painel{flex:1;min-height:0;overflow:hidden}
.config-painel .config-grade{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));align-content:start}
.config-meta-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.5rem .8rem}
.config-meta-acoes{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.config-meta .campo{margin:0}
@media (max-width:900px){.config-area{overflow-y:auto !important}.config-painel{overflow:visible}}
.config-meta .botao-texto{font-size:.72rem;margin-left:.4rem;font-weight:600}
.config-meta-campos{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.config-meta .campo{align-content:start}
.config-meta .campo label{display:flex;justify-content:space-between;align-items:center;min-height:1.5rem;white-space:nowrap}

/* ===== Ajustes 2: Contatos com nome, relógio, saudação única ===== */
body[data-rota="contatos"] .bv-pagina{display:block !important}
body[data-rota="contatos"] .bv-extra,.bv-ilustracao{display:none !important}
.boas-vindas.sem-faixa,body[data-rota="contatos"] .boas-vindas.sem-faixa{grid-template-columns:minmax(0,1fr) auto !important}
.boas-vindas:not(.sem-faixa){grid-template-columns:minmax(0,1fr) minmax(0,27rem) !important;column-gap:1.2rem}
.bv-pagina h1{white-space:nowrap}
.bv-descricao{font-size:.82rem}
.boas-vindas .faixa-inicio{align-self:center;height:4.7rem;display:flex}
.boas-vindas .faixa-inicio .faixa{margin:0;flex:1;min-height:0;height:100%;align-content:center;padding-top:.2rem;padding-bottom:.9rem}
.boas-vindas .faixa-slide{align-items:center}
.topo-direita{grid-template-areas:"sino pil conta" "rel rel conta" !important;row-gap:.3rem}
body .relogio{justify-self:end !important;padding:.12rem .55rem;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--linha);font-size:.7rem !important;font-weight:600;color:var(--tinta) !important;letter-spacing:.01em;margin-right:0}
.boas-vindas:not(.sem-faixa){grid-template-columns:minmax(0,1fr) minmax(0,35rem) !important}
.boas-vindas .faixa-botao{padding:.45rem .8rem;font-size:.78rem;white-space:nowrap}
.boas-vindas .faixa-texto strong{font-size:.82rem}
.boas-vindas .faixa-texto strong{font-size:.74rem !important}.boas-vindas .faixa-botao{padding:.4rem .65rem}.boas-vindas .faixa-icone{width:1.6rem}
/* relógio na mesma linha, tudo alinhado ao centro */
.topo-direita{grid-template-columns:auto auto auto auto !important;grid-template-areas:"rel sino pil conta" !important;column-gap:.6rem !important;row-gap:0 !important;align-items:center !important}
body .relogio{justify-self:end !important;align-self:center;height:2.1rem;display:inline-flex !important;align-items:center;padding:0 .8rem !important;font-size:.74rem !important}
.topo-direita .conta,.topo-direita .sino{align-self:center}
@media (max-width:900px){body .relogio{display:none !important}.topo-direita{grid-template-areas:"sino pil conta" !important;grid-template-columns:auto auto auto !important}}

/* ===== Mensagens — layout do modelo ===== */
.msg-barra{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.7rem}
.msg-busca{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--linha);border-radius:.7rem;padding:0 .8rem;min-width:15rem;flex:0 1 20rem}
.msg-busca svg{width:1.05rem;height:1.05rem;fill:none;stroke:var(--zt-3);stroke-width:2;stroke-linecap:round;flex:none}
.msg-busca input{border:0 !important;background:transparent !important;box-shadow:none !important;padding:.55rem 0 !important;flex:1;min-width:0;outline:0}
.msg-barra .seletor{border-radius:.7rem;background:#fff}
.msg-total{display:inline-flex;align-items:center;gap:.4rem;background:color-mix(in srgb,var(--zt-6) 70%,white);color:var(--zt-5);border-radius:.7rem;padding:.5rem .8rem;font-weight:700;font-size:.8rem}
.msg-total svg,.msg-barra .botao svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.msg-barra .botao{display:inline-flex;align-items:center;gap:.4rem;border-radius:.7rem}
.msg-grupos{display:grid;gap:.8rem;align-content:start}
.msg-projeto{background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);border-radius:1.1rem;box-shadow:0 4px 18px rgba(16,24,40,.06);padding:.9rem 1rem;display:grid;gap:.7rem}
.msg-projeto-topo{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.msg-projeto-nome h2{margin:0;font-size:1.15rem}
.msg-projeto-nome small,.msg-funil-nome small{color:var(--tinta-suave);font-size:.78rem}
.msg-ic{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:.8rem;flex:none}
.msg-ic svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msg-ic.m-grande{width:3rem;height:3rem;border-radius:.9rem}.msg-ic.m-grande svg{width:1.5rem;height:1.5rem}
.m-azul{background:#e6f0ff;color:#2563eb}.m-roxo{background:#f1e8ff;color:#7c3aed}.m-laranja{background:#ffefdc;color:#ea7a0c}.m-verde{background:#dff7e8;color:#16a34a}.m-rosa{background:#ffe6ee;color:#e11d63}
.msg-btn{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--linha);border-radius:.6rem;padding:.42rem .8rem;font:600 .78rem inherit;font-family:inherit;color:var(--tinta);cursor:pointer;text-decoration:none;white-space:nowrap}
.msg-btn:hover{border-color:var(--zt-3)}
.msg-btn svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.msg-add{color:var(--zt-5)}.msg-perigo{color:#dc2626;background:#fff5f5;border-color:#fecaca}
.msg-btn-ic{padding:.42rem .5rem}
.msg-funil{border:1px solid var(--linha);border-radius:.9rem;background:rgba(255,255,255,.7)}
.msg-funil-topo{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem;cursor:pointer}
.msg-funil-nome{flex:1;min-width:0}
.msg-funil-nome>div{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.msg-funil-nome h3{margin:0;font-size:.98rem}
.msg-seta svg,.msg-seta-dir svg{width:1rem;height:1rem;fill:none;stroke:var(--tinta-suave);stroke-width:2.2;stroke-linecap:round;display:block;transition:transform .2s}
.msg-funil:not(.aberto) .msg-seta svg{transform:rotate(-90deg)}
.msg-funil.aberto .msg-seta-dir svg{transform:rotate(180deg)}
.msg-lista{list-style:none;margin:0;padding:.2rem .7rem .7rem;display:grid;gap:.5rem}
.msg-linha{display:grid;grid-template-columns:auto 11rem minmax(0,1fr) auto;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--linha);border-radius:.8rem;padding:.5rem .7rem}
.msg-info{display:grid;gap:.25rem;min-width:0}
.msg-info strong{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-tipo{justify-self:start;font-size:.68rem;font-weight:700;background:#e6f0ff;color:#1d4ed8;border-radius:.4rem;padding:.1rem .45rem}
.msg-previa{background:#efeae2;border-radius:.6rem;padding:.5rem .7rem;max-height:5.2rem;overflow:hidden;display:flex;justify-content:flex-end;min-width:0}
.msg-previa .balao{max-width:78%;font-size:.76rem;max-height:4.2rem;overflow:hidden}
.msg-acoes{display:flex;align-items:center;gap:.4rem}
.msg-pontos{position:relative}
.msg-menu{position:absolute;right:0;top:110%;z-index:20;background:#fff;border:1px solid var(--linha);border-radius:.6rem;box-shadow:0 8px 24px rgba(16,24,40,.15);padding:.25rem;min-width:8rem}
.msg-menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:.45rem .7rem;font:600 .78rem inherit;font-family:inherit;border-radius:.4rem;cursor:pointer}
.msg-menu button:hover{background:#f3f6fb}
@media (max-width:900px){.msg-linha{grid-template-columns:auto minmax(0,1fr)}.msg-previa,.msg-acoes{grid-column:1/-1}.msg-add span{display:none}.msg-busca{flex:1 1 100%}}
.msg-busca{min-width:11rem !important;flex:0 1 15rem !important}.msg-barra{flex-wrap:nowrap}@media (max-width:900px){.msg-barra{flex-wrap:wrap}}
.msg-subgrupos{display:grid;gap:.5rem;padding:.2rem .7rem .7rem}
.msg-sub{border:1px solid var(--linha);border-radius:.8rem;background:rgba(255,255,255,.85)}
.msg-sub:not(.aberto) .msg-seta svg{transform:rotate(-90deg)}
.msg-sub.aberto .msg-seta-dir svg{transform:rotate(180deg)}
.msg-sub .msg-lista{padding:.1rem .6rem .6rem}
.msg-sub .msg-funil-nome h3{font-size:.92rem}
.msg-funil.aberto .msg-seta-dir svg{transform:none}
.msg-funil.aberto>.msg-funil-topo .msg-seta-dir svg,.msg-sub.aberto>.msg-funil-topo .msg-seta-dir svg{transform:rotate(180deg)}
.msg-funil:not(.aberto)>.msg-funil-topo .msg-seta svg{transform:rotate(-90deg)}
.msg-funil.aberto .msg-sub:not(.aberto)>.msg-funil-topo .msg-seta svg{transform:rotate(-90deg)}
.msg-funil.aberto>.msg-funil-topo .msg-seta svg,.msg-sub.aberto>.msg-funil-topo .msg-seta svg{transform:none}
.msg-subgrupos{padding-left:2.2rem !important;padding-right:1rem !important;position:relative}
.msg-subgrupos::before{content:"";position:absolute;left:1.05rem;top:0;bottom:1rem;width:2px;background:color-mix(in srgb,var(--zt-3) 30%,white);border-radius:2px}
.editor-tempos{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;margin-top:.2rem}
.editor-tempos .ia-msg-tempo{grid-column:auto;opacity:1}
.editor-tempos input{width:4rem}

/* ===== Funil com IA › Percurso — mapa compacto + celular fixo ===== */
.pc-info{display:flex;align-items:center;gap:.6rem;background:#eef5ff;border:1px solid #d6e6fb;border-radius:.7rem;padding:.35rem .7rem;font-size:.74rem;color:var(--tinta);margin:.2rem 0 .5rem}
.pc-info span{flex:1;min-width:0}
.pc-info button{border:0;background:none;font-size:1.1rem;cursor:pointer;color:var(--tinta-suave);line-height:1}
.pc-faixa{margin:0 0 .5rem !important;padding:.35rem .6rem !important;flex-wrap:nowrap !important;overflow:hidden;gap:.3rem !important}
.pc-passo{font-size:.7rem !important;padding:.15rem .55rem !important;white-space:nowrap}
.pc-layout{display:grid !important;grid-template-columns:minmax(0,1fr) 19.5rem !important;gap:.8rem !important;align-items:stretch !important;height:calc(100vh - 28.5rem);min-height:21rem}
.pc-mapa{min-width:0;min-height:0;overflow:auto;scrollbar-width:none;cursor:grab;border:1px solid var(--linha);border-radius:.9rem;background:#fbfcff radial-gradient(circle,#d5deec 1px,transparent 1.2px) 0 0/18px 18px}
.pc-mapa::-webkit-scrollbar{display:none}
.pc-mapa.pc-pan{cursor:grabbing;user-select:none}
.pc-trilho{display:flex !important;gap:.7rem !important;align-items:flex-start !important;padding:.8rem;width:max-content;min-width:100%;min-height:100%;box-sizing:border-box}
.pc-trilho>.pc-cartao{flex:0 0 14rem;width:14rem;box-shadow:0 3px 12px rgba(16,24,40,.08)}
.pc-trilho>.pc-novo{flex:0 0 7rem;min-height:5rem;align-self:flex-start}
.pc-topo{height:3.4rem !important}
.pc-corpo{padding:.45rem !important;gap:.35rem !important}
.pc-rotulo textarea{min-height:0;resize:none}
.pc-apoio{background:var(--superficie) !important;border:1px solid var(--linha) !important}
.pc-apoio-item{margin-bottom:.25rem !important;padding:.2rem .45rem !important}
.wa-telefone{position:static !important;display:flex;flex-direction:column;min-height:0;height:100%}
.wa-telefone .wa-titulo{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.wa-telefone .wa-titulo h3{margin:0;font-size:.95rem;flex:1}
.wa-telefone .pc-filtros{display:none}
.wa-telefone .wa-aparelho{flex:1;height:auto !important;min-height:0;max-width:none;width:100%;margin:.4rem 0 0}
body.bv-ia .boas-vindas{}
@media (max-width:1100px){.pc-layout{grid-template-columns:1fr !important;height:auto}.pc-mapa{max-height:70vh}.wa-telefone{height:32rem}}
.pc-layout{height:calc(100vh - 30.5rem) !important;min-height:21rem !important}
.pc-info{margin:.1rem 0 .4rem !important;padding:.25rem .7rem !important}
.pc-faixa{margin-bottom:.4rem !important}
.pc-rotulo textarea{height:3.4rem;min-height:0}
.pc-seguir{font-size:.72rem !important;gap:.25rem !important}
.pc-seguir input[type=number]{width:3rem !important;padding:.1rem .3rem !important}
.pc-trilho>.pc-cartao{flex:0 0 13rem !important;width:13rem !important}
.pc-seguir{flex-wrap:nowrap !important;white-space:nowrap}
.pc-apoio .pc-corpo>.dica{display:none}
.wa-telefone .pc-filtros{display:flex !important;gap:.2rem;margin:.3rem 0 0}
.wa-telefone .pc-filtro{font-size:.6rem !important;padding:0 .35rem !important}

/* Percurso: textos proporcionais e legíveis, sem cortar */
.pc-trilho>.pc-cartao{flex:0 0 14.5rem !important;width:14.5rem !important}
.pc-cartao,.pc-corpo,.pc-corpo>*{min-width:0;box-sizing:border-box}
.pc-corpo{grid-template-columns:minmax(0,1fr) !important;font-size:.72rem}
.pc-rotulo{font-size:.72rem !important}
.pc-rotulo textarea{width:100% !important;font-size:.7rem !important;line-height:1.35;padding:.35rem .45rem !important;height:3.8rem !important}
.pc-corpo .ia-msg-linha{grid-template-columns:auto minmax(0,1fr) !important;gap:.2rem .4rem !important;padding:.3rem .4rem !important;min-width:0}
.pc-corpo .ia-msg-num{width:1.2rem;height:1.2rem;font-size:.66rem}
.pc-corpo .ia-msg-texto strong{font-size:.72rem;line-height:1.25;overflow-wrap:anywhere}
.pc-corpo .ia-msg-texto small{font-size:.64rem !important}
.pc-corpo .ia-msg-acoes{gap:.1rem}
.pc-corpo .botao-icone{min-width:1.4rem !important;width:1.4rem;height:1.4rem;padding:0 !important;font-size:.72rem}
.pc-corpo .botao,.pc-corpo select{font-size:.7rem !important;padding:.3rem .4rem !important;width:100%}
.pc-corpo .pc-seguir{font-size:.68rem !important}
.pc-topo{height:3.2rem !important}
.pc-tit strong{font-size:.76rem !important}
.pc-topo small{font-size:.64rem !important}
.pc-layout{height:calc(100vh - 27.5rem) !important;min-height:26rem !important}
.wa-telefone .wa-titulo{justify-content:space-between}
.wa-telefone .wa-titulo .botao{padding:.35rem .9rem !important;font-weight:700}
.wa-aparelho .wa-bolha,.wa-aparelho .wa-midia{font-size:.76rem}
.pc-topo{height:3.7rem !important}
.pc-tit strong{display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal !important;line-height:1.15 !important;font-size:.74rem !important;overflow:hidden}
.pc-topo small{display:block !important;-webkit-line-clamp:unset !important;height:auto !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3 !important;margin-top:.1rem}
.pc-corpo .pc-seguir input[type=number]{width:3.4rem !important;font-size:.7rem !important;padding:.15rem .25rem !important}
.pc-corpo .ia-intervalo,.pc-corpo .ia-intervalo label{font-size:.68rem !important}
.pc-corpo .ia-intervalo input{width:3.2rem !important;font-size:.7rem !important;padding:.15rem .3rem !important;height:auto !important}

/* ===== Funil com IA — lista no layout do modelo ===== */
.abas .aba-ic{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.8rem .8rem 0 0}
.abas .aba-ic svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.abas .aba-ic.ativa{background:color-mix(in srgb,var(--zt-6) 70%,white);color:var(--zt-5)}
.ia-topo{display:flex !important;align-items:center !important;gap:.8rem !important;flex-wrap:nowrap !important}
.ia-topo>div{flex:1 1 auto !important}
.ia-topo h2{font-size:1.4rem !important}
.ia-topo .botao{display:inline-flex;align-items:center;gap:.4rem;border-radius:.8rem;font-weight:700}
.ia-topo .botao svg,.ia-card-acoes .botao svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ia-grade{padding:.55rem .7rem !important}
.ia-projeto-topo h3{font-size:1.15rem !important}
.ia-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,26rem),1fr)) !important;gap:1rem !important}
.ia-cards.em-lista{grid-template-columns:1fr !important}
.ia-card{padding:1rem 1.1rem !important;gap:.7rem !important;border-radius:1.1rem !important;background:rgba(255,255,255,.92) !important}
.ia-card-topo{align-items:flex-start !important;justify-content:flex-start !important;gap:.8rem !important}
.ia-card-titulo{flex:1;min-width:0;display:grid;gap:.35rem}
.ia-card-nome{font-size:1.05rem !important;white-space:normal !important}
.ia-card .item-meta{display:flex;gap:.4rem;flex-wrap:wrap}
.ia-card .chip{display:inline-flex;align-items:center;gap:.3rem;font-weight:700}
.ia-card .chip svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.chip-ponto .ponto{width:.45rem;height:.45rem;border-radius:50%;background:currentColor;display:inline-block}
.ia-card-gatilho{font-size:.82rem !important}
.ia-card-nums{grid-template-columns:1fr 1fr !important;gap:.6rem !important}
.ia-tile{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:.8rem}
.ia-tile.t-azul{background:#eaf2ff}.ia-tile.t-laranja{background:#fff1e0}
.ia-tile-ic svg{width:1.6rem;height:1.6rem;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.t-azul .ia-tile-ic svg{stroke:#2563eb}.t-laranja .ia-tile-ic svg{stroke:#f59e0b}
.ia-tile strong{display:block;font-size:1.35rem;line-height:1.1}
.ia-tile small{font-size:.78rem;color:var(--tinta-suave)}
.ia-card-acoes{border-top:1px solid var(--linha);padding-top:.7rem;gap:.6rem !important}
.ia-card-acoes .botao{display:inline-flex;align-items:center;gap:.45rem;border-radius:.7rem;font-weight:700;padding:.55rem 1.1rem}
.ia-card .msg-pontos{margin-left:auto}
.msg-menu .perigo{color:#dc2626}
@media (max-width:700px){.ia-topo{flex-wrap:wrap !important}}

/* ===== Abas ("sheets") iguais em todas as páginas ===== */
.abas,.guias,.contatos-abas:not(.pequeno),.config-abas{display:flex !important;gap:.25rem !important;border:0 !important;border-bottom:1px solid var(--linha) !important;border-radius:0 !important;background:none !important;padding:0 !important;flex:none;overflow:visible !important;flex-wrap:nowrap !important}
.abas .aba,.guias .guia,.contatos-abas:not(.pequeno) button,.config-abas .aba{display:inline-flex !important;align-items:center;gap:.5rem;padding:.55rem 1rem !important;margin:0 0 -1px !important;border:0 !important;border-bottom:3px solid transparent !important;border-radius:.8rem .8rem 0 0 !important;background:none !important;color:var(--tinta-suave) !important;font-weight:600;font-size:.8125rem;white-space:nowrap;flex:0 0 auto !important;box-shadow:none !important;text-decoration:none}
.abas .aba:hover,.guias .guia:hover,.contatos-abas:not(.pequeno) button:hover,.config-abas .aba:hover{color:var(--tinta) !important;background:color-mix(in srgb,var(--zt-6) 35%,white) !important}
.abas .aba.ativa,.guias .guia.ativa,.contatos-abas:not(.pequeno) button.ativa,.config-abas .aba.ativa{background:color-mix(in srgb,var(--zt-6) 70%,white) !important;color:var(--zt-5) !important;border-bottom-color:var(--zt-2) !important}
.abas svg,.guias svg,.contatos-abas:not(.pequeno) svg,.config-abas svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.guia.st-erro{color:#b91c1c !important}
@media (max-width:700px){.abas,.guias,.contatos-abas:not(.pequeno),.config-abas{overflow-x:auto !important;overflow-y:hidden !important;scrollbar-width:none}.abas::-webkit-scrollbar,.guias::-webkit-scrollbar,.contatos-abas::-webkit-scrollbar,.config-abas::-webkit-scrollbar{display:none}}
/* títulos menores nos cards de funil */
.ia-card-nome{font-size:.9rem !important;line-height:1.25}
.ia-topo h2{font-size:1.2rem !important}
.ia-projeto-topo h3{font-size:1rem !important}

/* Conversas: botões dentro do card e card mais largo */
.conversa-acoes.dentro{padding:0 !important;margin-top:.35rem;display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
@media (min-width:1101px){.inicio-grade{grid-template-columns:minmax(20rem,1.2fr) minmax(0,2fr) !important}}

/* ===== Idiomas (tradução automática do funil) ===== */
.ia-idiomas{display:flex;flex-wrap:wrap;gap:.6rem;margin:.4rem 0 .8rem}
.ia-idioma{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border:1px solid var(--borda,rgba(255,255,255,.14));border-radius:999px;cursor:pointer;font-size:.95rem;background:transparent;transition:border-color .15s,background .15s}
.ia-idioma input{accent-color:var(--zt-1,#25d366)}
.ia-idioma.ativo{border-color:var(--zt-1,#25d366);background:color-mix(in srgb,var(--zt-1,#25d366) 14%,transparent)}
.ia-idioma-bandeira{font-size:1.15rem;line-height:1}
.gx-rodape-1{grid-template-columns:1fr !important}

/* =====================================================================
   Agenda e Agendamentos (página, aba do funil e cartão Agendar do Percurso)
   ===================================================================== */
.ag-pagina { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.ag-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.75rem 1rem; border-radius: var(--raio); background: var(--zt-6); border: 1px solid var(--linha); font-size: 0.8125rem; }
.ag-conteudo { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.ag-agendamentos, .ag-regras, .ag-conexao { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; }
.ag-indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.ag-ind { display: grid; gap: 0.125rem; padding: 0.75rem 1rem; border-radius: var(--raio); border: 1px solid var(--linha); border-top: 3px solid var(--zt-2); background: #fff; }
.ag-ind small { color: var(--tinta-suave); font-size: 0.75rem; font-weight: 600; }
.ag-ind strong { font-size: 1.5rem; line-height: 1.1; }
.ag-ind span { color: var(--tinta-suave); font-size: 0.75rem; }
.ag-ind-alerta { border-top-color: #d97706; background: #fffaf0; }
.ag-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.ag-nav { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.ag-titulo-mes { margin-left: 0.375rem; font-size: 0.9375rem; }
.ag-vistas { display: inline-flex; border: 1px solid var(--linha); border-radius: 0.625rem; overflow: hidden; background: #fff; }
.ag-vista { border: 0; background: transparent; padding: 0.4375rem 0.875rem; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--tinta-suave); cursor: pointer; }
.ag-vista.ativa { background: var(--zt-2); color: #fff; }
.ag-busca { flex: 1 1 12rem; min-width: 10rem; max-width: 20rem; padding: 0.5rem 0.75rem; border: 1px solid var(--linha); border-radius: 0.625rem; font: inherit; font-size: 0.8125rem; }
.ag-acoes-topo { display: flex; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }
.ag-corpo { min-width: 0; }

.ag-mes { border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; overflow: hidden; }
.ag-semana-cab { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #fafaf9; border-bottom: 1px solid var(--linha); }
.ag-semana-cab span { padding: 0.5rem; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--tinta-suave); }
.ag-grade-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-cel { min-height: 6.5rem; padding: 0.375rem; border-right: 1px solid var(--fundo); border-bottom: 1px solid var(--fundo); display: flex; flex-direction: column; gap: 0.1875rem; cursor: pointer; min-width: 0; }
.ag-cel:nth-child(7n) { border-right: 0; }
.ag-cel:hover { background: var(--zt-7); }
.ag-num { font-size: 0.75rem; font-weight: 600; color: var(--tinta-suave); }
.ag-fora { background: #fafaf9; opacity: 0.6; }
.ag-fechado .ag-num { opacity: 0.5; }
.ag-hoje .ag-num { display: inline-grid; place-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--zt-2); color: #fff; }
.ag-bloqueado { background: repeating-linear-gradient(45deg, #fafaf9, #fafaf9 6px, #f1efea 6px, #f1efea 12px); }
.ag-ev { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--zt-2); border-radius: 0.25rem; padding: 0.125rem 0.375rem; font: inherit; font-size: 0.6875rem; background: var(--zt-6); color: var(--tinta); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-ev.ag-confirmado, .ag-item.ag-confirmado { border-left-color: #16a34a; background: #e5f6ea; }
.ag-ev.ag-pendente, .ag-item.ag-pendente { border-left-color: #d97706; background: #fff4dd; }
.ag-ev.ag-cancelado, .ag-ev.ag-recusado, .ag-item.ag-cancelado, .ag-item.ag-recusado { border-left-color: #9ca3af; background: #f1efea; text-decoration: line-through; opacity: 0.7; }
.ag-ev.ag-concluido, .ag-item.ag-concluido { border-left-color: #2563eb; background: #e6f0ff; }
.ag-mais { color: var(--tinta-suave); font-size: 0.6875rem; }

.ag-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.ag-dia-vista .ag-col { max-width: 40rem; }
.ag-col { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.625rem; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; min-width: 0; }
.ag-col header { display: grid; gap: 0.125rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--fundo); }
.ag-col header small { color: var(--tinta-suave); font-size: 0.6875rem; }
.ag-col.ag-hoje { border-color: var(--zt-2); }
.ag-item { display: grid; gap: 0.125rem; text-align: left; width: 100%; border: 0; border-left: 3px solid var(--zt-2); border-radius: 0.375rem; padding: 0.4375rem 0.5rem; font: inherit; font-size: 0.75rem; background: var(--zt-6); color: var(--tinta); cursor: pointer; justify-items: start; }
.ag-item small { color: var(--tinta-suave); }

.ag-filtros { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.625rem; }
.ag-filtro { display: inline-flex; gap: 0.375rem; align-items: center; border: 1px solid var(--linha); background: #fff; border-radius: 62.4375rem; padding: 0.3125rem 0.75rem; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--tinta-suave); cursor: pointer; }
.ag-filtro small { font-weight: 700; }
.ag-filtro.ativa { background: var(--zt-2); border-color: var(--zt-2); color: #fff; }
.ag-vazio { padding: 1.5rem; text-align: center; border: 1px dashed var(--linha); border-radius: var(--raio); }

.ag-modal-fundo { position: fixed; inset: 0; z-index: 80; background: rgba(20, 20, 20, 0.45); display: grid; place-items: center; padding: 1rem; }
.ag-modal { width: min(32rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; background: #fff; border-radius: var(--raio); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25); }
.ag-modal > header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.875rem 1.125rem; border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: #fff; }
.ag-modal > header h2 { font-size: 1rem; }
.ag-modal-corpo { padding: 1rem 1.125rem 1.125rem; }
.ag-detalhe, .ag-form { display: grid; gap: 0.625rem; }
.ag-det { display: grid; gap: 0.0625rem; font-size: 0.8125rem; }
.ag-det small { color: var(--tinta-suave); font-weight: 600; }
.ag-form input[type="text"], .ag-form input[type="tel"], .ag-form input[type="date"], .ag-form input[type="time"], .ag-form input[type="number"], .ag-form textarea, .ag-novo-bloqueio input { padding: 0.5rem 0.625rem; border: 1px solid var(--linha); border-radius: 0.5rem; font: inherit; font-size: 0.8125rem; min-width: 0; }
.ag-linha-botoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.ag-remarcar { display: grid; gap: 0.375rem; padding: 0.625rem; border: 1px dashed var(--linha); border-radius: 0.625rem; }
.ag-novo-bloqueio { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.ag-dias { display: grid; gap: 0.5rem; }
.ag-dia { display: grid; grid-template-columns: 8rem 1fr; gap: 0.5rem 1rem; align-items: start; padding: 0.5rem 0; border-bottom: 1px solid var(--fundo); }
.ag-dia-off { opacity: 0.75; }
.ag-periodos { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ag-periodo { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; }
.ag-periodo input, .ag-linha input[type="text"], .ag-linha input[type="number"], .ag-regras textarea, .ag-regras .campo input[type="number"], .ag-lembretes input[type="number"] { padding: 0.4375rem 0.5rem; border: 1px solid var(--linha); border-radius: 0.5rem; font: inherit; font-size: 0.8125rem; min-width: 0; }
.ag-regras textarea { width: 100%; resize: vertical; }
.ag-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; }
.ag-linhas { display: grid; gap: 0.5rem; }
.ag-linha { display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 1.4fr) auto; gap: 0.5rem; align-items: center; }
.ag-linha.ag-bloqueio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; font-size: 0.8125rem; }
.ag-min { display: inline-flex; align-items: center; gap: 0.25rem; }
.ag-min input { width: 4.5rem; }
.ag-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.ag-lembretes-corpo { display: grid; gap: 0.625rem; }
.ag-rodape { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 0.625rem 0; background: linear-gradient(transparent, var(--fundo) 40%); }
.link-pequeno { justify-self: start; border: 0; background: none; padding: 0; color: var(--zt-2); font: inherit; font-size: 0.75rem; cursor: pointer; text-decoration: underline; }

.ag-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ag-passo { display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; align-items: start; }
.ag-passo > div { display: grid; gap: 0.5rem; min-width: 0; }
.ag-passo-n { display: grid; place-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--zt-2); color: #fff; font-weight: 700; font-size: 0.875rem; }
.ag-passo input[type="url"] { width: 100%; padding: 0.5rem 0.625rem; border: 1px solid var(--linha); border-radius: 0.5rem; font: inherit; font-size: 0.8125rem; }
.ag-codigo { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; line-height: 1.4; padding: 0.625rem; border: 1px solid var(--linha); border-radius: 0.5rem; background: #fafaf9; resize: vertical; }
.ag-resultado { margin: 0; padding: 0.625rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; background: var(--fundo); }
.ag-ok { background: #e5f6ea; color: var(--ok); }
.ag-falha { background: #fde8e0; color: var(--perigo); }
.ag-status h2 { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }

.ag-aba, .ag-aba-corpo { display: grid; gap: 0.875rem; }
.pc-agendar { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; padding: 0.3125rem 0.625rem; border: 1px dashed var(--linha); border-radius: 62.4375rem; width: fit-content; }
.pc-agendar.ativo { border-style: solid; border-color: var(--zt-2); background: var(--zt-6); }
.pc-novo-agendar span { font-size: 1.5rem; }

@media (max-width: 960px) {
  .ag-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-semana { grid-template-columns: 1fr; }
  .ag-acoes-topo { margin-left: 0; }
}
@media (max-width: 640px) {
  .ag-cel { min-height: 4.25rem; padding: 0.1875rem; }
  .ag-ev { font-size: 0; padding: 0; height: 0.375rem; border-radius: 62.4375rem; border-left-width: 0; background: var(--zt-2); }
  .ag-ev.ag-confirmado { background: #16a34a; }
  .ag-ev.ag-pendente { background: #d97706; }
  .ag-dia { grid-template-columns: 1fr; }
  .ag-linha { grid-template-columns: 1fr; }
  .ag-linha.ag-bloqueio { grid-template-columns: 1fr auto; }
  .ag-busca { max-width: none; }
  .ag-vistas { width: 100%; }
  .ag-vista { flex: 1; padding-inline: 0.375rem; }
}

/* Agenda: a página rola por dentro (como Configurações e Treinamentos) */
.ag-pagina { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.ag-conteudo { flex: none; }

/* Agenda › Profissionais */
.ag-perfis-topo { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1rem; }
.ag-perfis-topo h2 { margin: 0 0 0.25rem; }
.ag-perfis-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.ag-perfil-topo { display: flex; gap: 0.75rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.ag-perfil-topo h3 { margin: 0; }
.ag-perfil-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ag-perfil-off { opacity: 0.7; }
.ag-perfil-editor { margin-bottom: 1rem; }
.ag-perfil-form h3 { margin: 1.25rem 0 0.5rem; }
.ag-perfil-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1rem; }
.ag-perfil-form textarea, .ag-perfil-form input[type="text"] { width: 100%; }
@media (max-width: 700px) { .ag-perfil-grade, .ag-perfis-grade { grid-template-columns: 1fr; } }

/* Funis em lista (um abaixo do outro) */
@media (min-width: 900px) {
  .ia-cards.em-lista .ia-card { display: grid !important; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) auto auto; align-items: center; gap: 1rem !important; }
  .ia-cards.em-lista .ia-card-nums { display: flex; gap: 0.5rem; }
  .ia-cards.em-lista .ia-card-acoes { flex-wrap: nowrap; }
  .ia-cards.em-lista .ia-card-gatilho { margin: 0; }
}

/* Funil › Ver agendamentos */
.ag-funil-topo { display: flex; gap: 0.75rem 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ag-funil-titulo { flex: 1 1 14rem; min-width: 0; }
.ag-funil-titulo h2 { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.ag-funil-titulo p { margin: 0.15rem 0 0; }
.ag-funil-filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0.75rem 0; }
.ag-funil-filtro { display: grid; gap: 0.2rem; }
.ag-funil-filtro select { width: 100%; }
.ag-indicadores:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .ag-indicadores:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) { .ag-funil-filtros { grid-template-columns: 1fr; } }

/* Funis: lista com colunas e tamanhos padrão + Biblioteca */
.ia-card-acoes .botao[disabled] { opacity: 0.4; cursor: not-allowed; }
.botao-ic { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 2rem; padding: 0 0.5rem !important; border-radius: 0.6rem; background: #fff; border: 1px solid var(--linha); color: var(--tinta); cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.botao-ic:hover:not([disabled]) { background: var(--zt-7, #f1f5f9); }
.botao-ic.botao-principal { background: var(--amarelo, #f5b400); border-color: transparent; }
.botao-perigo-ic { background: #fdecec !important; color: #dc2626 !important; border: 1px solid #f7caca !important; }
.botao-perigo-ic:hover { background: #fbd9d9 !important; }
.ia-card { padding: 0.65rem 0.9rem !important; gap: 0.4rem !important; }
.ia-card-acoes { border-top: 0 !important; padding-top: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: nowrap; justify-content: flex-end; gap: 0.4rem !important; }
.botao-ic { width: auto !important; gap: 0.35rem; padding: 0 0.8rem !important; }
.botao-ic svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ia-card-titulo { gap: 0.15rem !important; }
.ia-card-linha1 { display: flex; align-items: center; gap: 0.4rem 0.6rem; flex-wrap: wrap; min-width: 0; }
.ia-card-nome { font-size: 0.98rem !important; }
.ia-card .chip { padding-top: 0.1rem; padding-bottom: 0.1rem; font-size: 0.7rem; }
.ia-card-gatilho { display: flex !important; align-items: center; gap: 0.4rem; font-size: 0.76rem !important; font-weight: 600; min-width: 0; margin: 0 !important; }
.ia-card-gatilho svg { flex: none; width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.ia-card-gatilho span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-cards.em-lista .ia-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "topo acoes"; align-items: center; gap: 0.4rem 1rem !important; }
.ia-cards.em-lista .ia-card-topo { grid-area: topo; min-width: 0; align-items: center !important; }
.ia-cards.em-lista .ia-card-acoes { grid-area: acoes; }
.ia-cards.em-lista .ia-card .msg-ic.m-grande { width: 2.3rem; height: 2.3rem; }
@media (max-width: 1099px) {
  .ia-cards.em-lista .ia-card { grid-template-columns: 1fr; grid-template-areas: "topo" "acoes"; }
  .ia-cards.em-lista .ia-card-acoes { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 599px) {
  .ia-cards.em-lista .ia-card-acoes .botao-ic { flex: 1 1 calc(50% - 0.4rem); justify-content: center; }
  .ia-card-gatilho span { white-space: normal; }
}
.aba-biblioteca { background: none; border: 0; border-bottom: 3px solid transparent; font-family: inherit; cursor: pointer; }
.janela-biblioteca { width: min(44rem, calc(100vw - 1.5rem)); max-height: 88vh; overflow-y: auto; }
.bib-lista { display: grid; gap: 0.75rem; margin: 0.75rem 0; }
.bib-item { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.9rem 1rem; border: 1px solid var(--linha); border-radius: 1rem; background: #fff; }
.bib-ic { width: 3rem; height: 3rem; border-radius: 0.9rem; background: #f1e9ff; display: grid; place-items: center; font-size: 1.5rem; }
.bib-texto { display: grid; gap: 0.3rem; min-width: 0; }
.bib-texto small { color: var(--tinta-suave); line-height: 1.35; }
.bib-form { padding: 0.9rem 1rem; border: 1px dashed var(--linha); border-radius: 1rem; background: #fafbff; display: grid; gap: 0.5rem; }
.bib-form h3 { margin: 0; font-size: 1rem; }
@media (max-width: 600px) { .bib-item { grid-template-columns: 3rem minmax(0, 1fr); } .bib-item .botao { grid-column: 1 / -1; } }
[data-acao="ligar-funil"] { min-width: 6.4rem; }

/* Editor do funil: guias fixas, guias bloqueadas (sem IA), sub-guias da Base detalhada */
.ia-editor .ia-guias { position: sticky; top: 0; z-index: 3; background: var(--superficie) !important; padding: 0.25rem 0 0 !important; margin: 0 !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
.ia-editor .ia-guias .guia { padding: 0.4rem 0.8rem !important; font-size: 0.78rem; }
.guia.guia-bloqueada, .guia[disabled] { opacity: 0.4; cursor: not-allowed; }
.guia.guia-bloqueada:hover { background: none !important; color: var(--tinta-suave) !important; }
.ia-subguias { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.ia-subguia { border: 1px solid var(--linha); background: #fff; border-radius: 999px; padding: 0.3rem 0.9rem; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--tinta-suave); cursor: pointer; }
.ia-subguia.ativa { background: color-mix(in srgb, var(--zt-6) 70%, white); color: var(--zt-5); border-color: transparent; }
.ia-desligada { opacity: 0.55; }
.ia-quadro-compacto { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
@media (max-width: 720px) { .ia-editor .ia-guias { top: 0; } }

/* Cartões do editor: cabeçalho com abrir/fechar e ligar/desligar; sempre na largura toda */
.ia-editor-corpo > .quadro { width: 100%; }
.ia-cartao { gap: 0 !important; padding: 0.5rem 0.9rem !important; }
.ia-cartao-cab { display: flex; align-items: center; gap: 0.6rem; min-height: 2.2rem; }
.ia-cartao-cab h2 { margin: 0; flex: 1; min-width: 0; font-size: 1rem; cursor: pointer; }
.ia-cartao-seta { flex: none; width: 1.9rem; height: 1.9rem; border: 1px solid var(--linha); border-radius: 0.6rem; background: #fff; color: var(--tinta); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; line-height: 1; padding: 0; }
.ia-cartao-seta span { display: inline-block; transition: transform 0.15s; }
.ia-cartao.fechado .ia-cartao-seta span { transform: rotate(-90deg); }
.ia-cartao-seta:hover { background: var(--zt-7, #f1f5f9); }
.ia-cartao-chave { flex: none; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; font-weight: 700; color: var(--tinta-suave); cursor: pointer; }
.ia-cartao-chave input { appearance: none; -webkit-appearance: none; width: 2.1rem; height: 1.2rem; border-radius: 999px; background: #cbd5e1; position: relative; cursor: pointer; margin: 0; transition: background 0.15s; }
.ia-cartao-chave input::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.ia-cartao-chave input:checked { background: #16a34a; }
.ia-cartao-chave input:checked::after { transform: translateX(0.9rem); }
.ia-cartao-corpo { display: grid; gap: 0.75rem; padding: 0.5rem 0 0.4rem; }
.ia-cartao-corpo[hidden] { display: none; }
.ia-cartao.desligado .ia-cartao-corpo { opacity: 0.5; }
.ia-cartao.desligado .ia-cartao-cab h2 { color: var(--tinta-suave); }
@media (max-width: 520px) { .ia-cartao-chave-txt { display: none; } }
.ia-subcartao { border: 1px solid var(--linha); border-radius: 0.8rem; background: #fff; }
.ia-subcartao .ia-cartao-cab h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }

/* Login com Google */
.botao-google { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.7rem 1rem; font-weight: 700; }
.botao-google[disabled] { opacity: 0.65; cursor: progress; }
.login-ou { display: flex; align-items: center; gap: 0.75rem; margin: 0; color: var(--tinta-suave); font-size: 0.8rem; }
.login-ou::before, .login-ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }