:root {
  --fundo: #F4F5F7; --cartao: #FFFFFF; --borda: #E3E5E8; --texto: #1F2328; --suave: #5B6470;
  --cor: #13866F; --cor-escura: #0F5E57; --cor-clara: #E6F4F1; --balao-jova: #DDF3EE; --balao-equipe: #DCE7FB;
  --alerta: #B45309; --alerta-texto: #7A3E00; --alerta-fundo: #FFF1DE; --nota: #FFF8D6; --conversa: #EEF1F4;
  --campo: #FFFFFF; --campo-borda: #C9CED4; --linha: #EEF0F2; --item-ativo: #F1F8F7; --etiqueta: #EEF1F4;
  --resumo-fundo: #FFF8EC; --resumo-borda: #F3D9A8; --msg: #FFFFFF; --nota-borda: #D9C46A; --italico: #4A535E;
  --perigo: #B42318; --azul: #1D4ED8; --forte: #1F2328; --forte-texto: #FFFFFF;
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto);
}
/* Modo escuro: escolhido no botão da lua, ou o do aparelho quando ninguém escolheu */
:root[data-tema="escuro"] {
  --fundo: #0F1316; --cartao: #171C20; --borda: #2A3138; --texto: #E6E9EC; --suave: #9AA4AE;
  --cor: #15876F; --cor-escura: #6ED6BD; --cor-clara: #133029; --balao-jova: #15362F; --balao-equipe: #1B2A45;
  --alerta: #D9822B; --alerta-texto: #F5C38A; --alerta-fundo: #3A2A14; --nota: #36321A; --conversa: #0B0E11;
  --campo: #1E242A; --campo-borda: #3A434C; --linha: #232A31; --item-ativo: #14302A; --etiqueta: #262E35;
  --resumo-fundo: #2C2314; --resumo-borda: #5A4422; --msg: #1F262C; --nota-borda: #8A7A33; --italico: #B8C0C8;
  --perigo: #F97066; --azul: #8AB4F8; --forte: #E6E9EC; --forte-texto: #0F1316;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0F1316; --cartao: #171C20; --borda: #2A3138; --texto: #E6E9EC; --suave: #9AA4AE;
    --cor: #15876F; --cor-escura: #6ED6BD; --cor-clara: #133029; --balao-jova: #15362F; --balao-equipe: #1B2A45;
    --alerta: #D9822B; --alerta-texto: #F5C38A; --alerta-fundo: #3A2A14; --nota: #36321A; --conversa: #0B0E11;
    --campo: #1E242A; --campo-borda: #3A434C; --linha: #232A31; --item-ativo: #14302A; --etiqueta: #262E35;
    --resumo-fundo: #2C2314; --resumo-borda: #5A4422; --msg: #1F262C; --nota-borda: #8A7A33; --italico: #B8C0C8;
    --perigo: #F97066; --azul: #8AB4F8; --forte: #E6E9EC; --forte-texto: #0F1316;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body, #app { margin: 0; height: 100%; background: var(--fundo); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.carregando { padding: 32px; color: var(--suave); }
.escondido { position: absolute; left: -9999px; }

/* Login */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login form { width: 100%; max-width: 360px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.login h1 { margin: 0 0 4px; font-size: 22px; }
.login p { margin: 0; color: var(--suave); font-size: 14px; }
label.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--suave); }
label.campo input, label.campo textarea, label.campo select { height: 44px; border: 1px solid var(--campo-borda); border-radius: 8px; padding: 0 12px; font-size: 15px; color: var(--texto); background: var(--campo); }
label.campo textarea { height: 110px; padding: 10px 12px; resize: vertical; }
.erro { color: var(--perigo); font-size: 14px; min-height: 18px; }
.btn { height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--campo-borda); background: var(--campo); color: var(--texto); font-weight: 600; font-size: 14px; white-space: nowrap; }
.btn.primario { background: var(--cor); border-color: var(--cor); color: #fff; }
.btn.escuro { background: var(--forte); border-color: var(--forte); color: var(--forte-texto); }
.btn.perigo { color: var(--perigo); }
.btn:disabled { opacity: .5; cursor: default; }

/* Estrutura */
.app { height: 100%; display: flex; flex-direction: column; }
header.topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 16px; background: var(--cartao); border-bottom: 1px solid var(--borda); }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.marca img { width: 30px; height: 30px; }
.busca { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 0 12px; height: 40px; }
.busca input { border: 0; background: transparent; color: var(--texto); outline: none; flex: 1; font-size: 14px; min-width: 0; }
.usuario { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--suave); }
.corpo { flex: 1; min-height: 0; display: flex; }
nav.filas { width: 220px; flex-shrink: 0; padding: 12px; display: flex; flex-direction: column; gap: 4px; background: var(--cartao); border-right: 1px solid var(--borda); overflow: auto; }
nav.filas .titulo { font-size: 11px; font-weight: 600; color: var(--suave); letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px 6px; }
nav.filas button { display: flex; justify-content: space-between; align-items: center; min-height: 42px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; color: var(--texto); font-size: 14px; text-align: left; }
nav.filas button.ativa { background: var(--cor-clara); color: var(--cor-escura); font-weight: 600; }
nav.filas button.chamando { background: var(--alerta-fundo); color: var(--alerta-texto); font-weight: 600; }
nav.filas .num { font-size: 12px; font-weight: 600; color: var(--suave); }
nav.filas button.chamando .num { color: #fff; background: var(--alerta); border-radius: 999px; padding: 2px 8px; }
nav.filas hr { border: 0; height: 1px; background: var(--borda); margin: 10px 4px; width: auto; }

section.lista { width: 340px; flex-shrink: 0; background: var(--cartao); border-right: 1px solid var(--borda); display: flex; flex-direction: column; min-height: 0; }
section.lista h2 { margin: 0; padding: 14px 16px 8px; font-size: 15px; }
.itens { overflow: auto; flex: 1; }
.item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--linha); background: transparent; text-align: left; color: inherit; }
.item.ativo { background: var(--item-ativo); box-shadow: inset 3px 0 0 var(--cor); }
.item .linha1 { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 14px; }
.item .quando { font-weight: 500; font-size: 12px; color: var(--suave); white-space: nowrap; }
.item .quando.espera { color: var(--alerta); }
.item .ultima { font-size: 13px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .motivo { font-size: 12px; color: var(--cor-escura); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiqueta { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--etiqueta); color: var(--suave); margin-left: 6px; }
.vazio { padding: 24px 16px; color: var(--suave); font-size: 14px; }

main.conversa { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--conversa); }
.cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; background: var(--cartao); border-bottom: 1px solid var(--borda); }
.cabeca .quem { flex: 1 1 180px; min-width: 0; }
.cabeca .quem strong { display: block; font-size: 15px; }
.cabeca .quem span { font-size: 12px; color: var(--suave); }
.voltar { display: none; }
.resumo { margin: 12px 16px 0; padding: 10px 12px; border-radius: 10px; background: var(--resumo-fundo); border: 1px solid var(--resumo-borda); font-size: 13px; line-height: 1.5; }
.resumo strong { color: var(--alerta-texto); }
.mensagens { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: min(75%, 560px); border-radius: 10px; padding: 8px 11px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; background: var(--msg); align-self: flex-start; }
.msg.jova { align-self: flex-end; background: var(--balao-jova); }
.msg.atendente { align-self: flex-end; background: var(--balao-equipe); }
.msg.nota { align-self: center; background: var(--nota); border: 1px dashed var(--nota-borda); max-width: 90%; }
.msg.sistema { align-self: center; background: var(--alerta-fundo); color: var(--alerta-texto); border-radius: 999px; font-size: 12px; padding: 4px 12px; }
.msg .autor { font-size: 11px; font-weight: 600; color: var(--cor-escura); margin-bottom: 3px; }
.msg.atendente .autor { color: var(--azul); }
.msg .hora { font-size: 11px; color: var(--suave); margin-top: 3px; text-align: right; }
.msg img { display: block; max-width: min(260px, 100%); max-height: 260px; border-radius: 8px; margin-bottom: 4px; }
.msg audio { display: block; max-width: 260px; margin-bottom: 4px; }
.msg .transcricao { font-style: italic; color: var(--italico); }
.escrever { display: flex; gap: 8px; padding: 10px 16px; background: var(--cartao); border-top: 1px solid var(--borda); align-items: flex-end; }
.escrever textarea { flex: 1; min-height: 44px; max-height: 160px; border: 1px solid var(--campo-borda); background: var(--campo); color: var(--texto); border-radius: 8px; padding: 10px 12px; font-size: 14px; resize: none; }
.prontas { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 0; background: var(--cartao); }
.prontas button { border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); border-radius: 999px; padding: 4px 10px; font-size: 12px; min-height: 30px; }
.fechada { flex: 1; display: grid; place-items: center; color: var(--suave); padding: 24px; text-align: center; }

aside.ficha { width: 260px; flex-shrink: 0; background: var(--cartao); border-left: 1px solid var(--borda); padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; overflow: auto; }
aside.ficha h3 { margin: 0; font-size: 15px; }
aside.ficha .rotulo { color: var(--suave); font-size: 12px; }
aside.ficha .valor { font-weight: 600; word-wrap: break-word; }

/* Páginas do administrador */
.pagina { flex: 1; overflow: auto; padding: 20px; }
.pagina h2 { margin: 0 0 14px; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; }
.cartao .rotulo { font-size: 12px; color: var(--suave); }
.cartao .grande { font-size: 26px; font-weight: 700; margin-top: 4px; }
table.tabela { width: 100%; border-collapse: collapse; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; font-size: 14px; }
table.tabela th, table.tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); }
table.tabela th { font-size: 12px; color: var(--suave); font-weight: 600; }
.caixa-tabela { overflow-x: auto; margin-bottom: 20px; }
.formulario { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 16px; display: grid; gap: 12px; max-width: 560px; margin-bottom: 20px; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Telas menores: a ficha vira um painel que abre por cima; o menu das filas vira botão; no celular, uma coluna */
.so-pequena { display: none; }
@media (max-width: 1280px) {
  aside.ficha { display: none; }
  .app.ficha-aberta aside.ficha { display: flex; position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 90vw); z-index: 20; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .so-pequena { display: inline-flex; align-items: center; }
}
@media (max-width: 1100px) {
  .menu { display: inline-flex !important; }
  section.lista { width: 300px; }
}
@media (max-width: 760px) {
  section.lista { width: 100%; border-right: 0; }
  .app.com-conversa section.lista { display: none; }
  .app:not(.com-conversa) main.conversa { display: none; }
  .voltar { display: inline-flex; }
  .msg { max-width: 88%; }
  .marca span { display: none; }
  .usuario > span { display: none; }
  header.topo { gap: 8px; }
  .busca { order: 3; flex-basis: 100%; }
  .usuario { margin-left: auto; }
  .cabeca .btn { flex: 1 1 auto; }
}
.menu { display: none; }

/* Ícones de traço (filas e botão do tema) */
.icone { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
nav.filas .rotulo-fila { display: inline-flex; align-items: center; gap: 8px; }
.tema { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* Abas dos módulos (no alto) */
nav.abas { display: flex; gap: 4px; padding: 0 12px; background: var(--cartao); border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: thin; }
.aba { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--suave); font-size: 14px; font-weight: 600; white-space: nowrap; }
.aba.ativa { color: var(--cor-escura); border-bottom-color: var(--cor); }
.aba.desligada { opacity: .75; }
.aba .etiqueta { font-weight: 500; }
.modulo-vazio { display: grid; place-items: center; }
.modulo-vazio .cartao { max-width: 460px; text-align: center; padding: 28px; }
.modulo-vazio .cartao p { color: var(--suave); line-height: 1.5; }
.modulo-icone { display: inline-flex; color: var(--cor-escura); }
.modulo-icone .icone { width: 40px; height: 40px; stroke-width: 1.4; }
.busca-espaco { flex: 1; }

/* Mercado Livre */
.ml { display: flex; flex-direction: column; gap: 14px; }
.sub-abas { display: flex; flex-wrap: wrap; gap: 8px; }
.ml-conteudo { display: flex; flex-direction: column; gap: 12px; }
.ml .cartao.pergunta { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.ml .anuncio { display: flex; gap: 12px; align-items: center; }
.ml .anuncio img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #fff; }
.ml .anuncio a { color: var(--texto); font-weight: 600; text-decoration: none; }
.ml .texto-pergunta { font-size: 15px; line-height: 1.5; }
.ml textarea { width: 100%; border: 1px solid var(--campo-borda); background: var(--campo); color: var(--texto); border-radius: 8px; padding: 10px 12px; font-size: 14px; resize: vertical; }
.ml h3 { margin: 0; }
.ml table a { color: var(--texto); }
.ml .rotulo { color: var(--suave); font-size: 13px; }
.resumo-vendas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.ranking { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.ranking a { color: var(--texto); }

/* Soluções do mês */
.solucoes { display: flex; flex-direction: column; gap: 12px; }
.solucoes h2 { margin: 0; }
.analise { max-width: 860px; line-height: 1.6; font-size: 15px; }
.analise h3 { margin: 18px 0 6px; font-size: 18px; color: var(--cor-escura); }
.analise h4 { margin: 12px 0 4px; font-size: 15px; }
.analise p { margin: 6px 0; }
.analise ul, .analise ol { margin: 6px 0; padding-left: 22px; display: grid; gap: 4px; }

/* Produtos, Fornecedores, Relatórios */
.extras { display: flex; flex-direction: column; gap: 10px; }
.extras h2 { margin: 0; }
.extras h3 { margin: 14px 0 0; }
.extras h4 { margin: 6px 0; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.pendencias { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.ficha-cadastro { display: flex; flex-direction: column; gap: 8px; max-width: 860px; }
.ficha-cadastro .fotos { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha-cadastro .fotos img { width: 110px; height: 110px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--borda); }
.ficha-cadastro pre.descricao { white-space: pre-wrap; font-family: inherit; font-size: 14px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; padding: 10px; margin: 0; max-height: 320px; overflow: auto; }
.extras label.campo input { max-width: 560px; }

/* Relatórios: comparação e gráficos de barras */
.cartao .comparacao { font-size: 12px; color: var(--suave); margin-top: 4px; }
.grafico { margin: 4px 0 8px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 14px; }
.grafico figcaption { font-size: 14px; margin-bottom: 8px; }
.grafico .barras { display: flex; align-items: flex-end; gap: 2px; height: 140px; border-bottom: 1px solid var(--borda); }
.grafico .barra-caixa { flex: 1; height: 100%; display: flex; align-items: flex-end; position: relative; cursor: default; min-width: 0; outline: none; }
.grafico .barra { width: 100%; max-width: 28px; margin: 0 auto; background: var(--cor); border-radius: 4px 4px 0 0; }
.grafico .barra.zero { height: 0 !important; }
.grafico .barra-caixa:hover .barra, .grafico .barra-caixa:focus .barra { background: var(--cor-escura); }
.grafico .barra-caixa:hover::after, .grafico .barra-caixa:focus::after {
  content: attr(data-dica); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--forte); color: var(--forte-texto); font-size: 12px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 2; pointer-events: none;
}
.grafico .barra-caixa:first-child:hover::after, .grafico .barra-caixa:first-child:focus::after { left: 0; transform: none; }
.grafico .barra-caixa:last-child:hover::after, .grafico .barra-caixa:last-child:focus::after { left: auto; right: 0; transform: none; }
.grafico .eixo { display: flex; justify-content: space-between; font-size: 12px; color: var(--suave); margin-top: 4px; }

/* Fornecedores: pesquisa de fornecedores novos */
.pesquisa-fornecedor input { flex: 1; min-width: 220px; max-width: 560px; }
.fornecedores-novos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.fornecedor-novo { display: flex; flex-direction: column; gap: 6px; }
.fornecedor-novo .topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.fornecedor-novo p { margin: 0; font-size: 14px; line-height: 1.45; }
.fornecedor-novo a { color: var(--azul); }
.pesquisa-resultado { display: flex; flex-direction: column; gap: 8px; }
.historico summary { cursor: pointer; color: var(--suave); margin-bottom: 6px; }
.btn.pequeno { padding: 4px 10px; font-size: 13px; }

/* Produtos: prévia do anúncio */
details.previa summary { cursor: pointer; color: var(--cor-escura); font-weight: 600; }
.previa-anuncio { margin-top: 10px; border: 1px solid var(--borda); border-radius: 12px; padding: 14px; background: var(--campo); }
.previa-corpo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; margin-top: 8px; }
.previa-fotos .foto-principal, .previa-fotos .sem-foto { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--borda); display: grid; place-items: center; color: #5B6470; }
.previa-fotos .miniaturas { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.previa-fotos .miniaturas img { width: 56px; height: 56px; object-fit: contain; background: #fff; border: 1px solid var(--borda); border-radius: 6px; cursor: pointer; }
.previa-texto h3 { margin: 4px 0; font-size: 20px; font-weight: 500; line-height: 1.3; }
@media (max-width: 760px) { .previa-corpo { grid-template-columns: 1fr; } }
.pesquisa-resultado > .btn { align-self: flex-start; }
.extras p.erro:empty { display: none; }
.extras > .btn { align-self: flex-start; }
.grafico .vazio { height: 60px; display: grid; place-items: center; color: var(--suave); font-size: 14px; }

/* Fotos de perfil, contatos, anexos e gravação */
.avatar { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--cor-clara); color: var(--cor-escura); display: grid; place-items: center; font-size: 14px; font-weight: 700; overflow: hidden; }
.avatar.medio { width: 38px; height: 38px; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item.com-foto { flex-direction: row; align-items: center; gap: 12px; }
.item .item-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.btn.icone-so { padding: 0; width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.btn.icone-so svg, .gravando .btn svg { width: 20px; height: 20px; }
.gravando { align-items: center; }
.gravando .tempo { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 40px; }
.gravando .rotulo { flex: 1; color: var(--suave); font-size: 14px; }
.gravando .btn { display: inline-flex; align-items: center; gap: 6px; }
.ponto-gravando { width: 12px; height: 12px; border-radius: 50%; background: var(--perigo); animation: piscar 1s infinite; }
@keyframes piscar { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ponto-gravando { animation: none; } }
.anexo { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; background: var(--cartao); border-top: 1px solid var(--borda); }
.anexo img, .anexo video { max-width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid var(--borda); background: #000; object-fit: contain; }
.anexo audio { max-width: 260px; }
.anexo .arquivo { padding: 18px; border: 1px dashed var(--campo-borda); border-radius: 8px; font-size: 14px; }
.anexo-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.anexo-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg video { max-width: 280px; border-radius: 8px; display: block; }
.contatos { padding: 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.contatos-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.contatos-topo h2 { margin: 0; }
.contatos-topo .btn { margin-left: auto; }
.contatos input[type=search] { width: 100%; max-width: 480px; }
.lista-contatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.contato { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; }
.contato-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.contato-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
@media (max-width: 760px) { .anexo { flex-direction: column; } .anexo img, .anexo video { max-width: 100%; } }

/* Fornecedores no mapa 3D */
.secao-mapa { display: flex; flex-direction: column; gap: 10px; }
.pesquisa-mapa input { flex: 1 1 220px; min-width: 0; max-width: 420px; }
.filtros-mapa { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filtros-mapa .busca-lugar { flex: 1 1 180px; max-width: 280px; padding: 6px 10px; }
.mapa-e-lista { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 12px; height: 560px; }
.coluna-lista { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.lugares { overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; min-height: 0; flex: 1; }
.lugar { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.lugar:hover { border-color: var(--campo-borda); }
.lugar.ativo { border-color: var(--cor); box-shadow: 0 0 0 2px var(--cor-clara); }
.lugar:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; }
.lugar-topo { display: flex; align-items: center; gap: 8px; }
.lugar-topo strong { font-size: 14px; }
.bolinha { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lugar-dados { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.lugar .acoes { margin-top: 4px; gap: 6px; }
.lugar .btn.pequeno { text-decoration: none; }
.mapa-3d { border-radius: 14px; overflow: hidden; border: 1px solid var(--borda); background: #0b1a24; min-height: 0; }
.alfinete { width: 26px; height: 34px; border: 0; padding: 0; background: none; cursor: pointer; position: relative; }
.alfinete::before { content: ""; position: absolute; left: 3px; top: 0; width: 20px; height: 20px; background: var(--cor-alfinete); border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.alfinete:hover::before, .alfinete:focus-visible::before { transform: rotate(-45deg) scale(1.2); }
.popup-fornecedor { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #1F2328; }
.maplibregl-popup-content { border-radius: 10px; padding: 10px 12px; }
.aviso-chave p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; }
@media (max-width: 900px) { .mapa-e-lista { grid-template-columns: 1fr; height: auto; } .mapa-3d { height: 420px; order: -1; } .lugares { max-height: 480px; } }
.midia-antiga { font-size: 13px; color: var(--suave); font-style: italic; }

/* Relatórios por abas e Mudanças com IA */
.titulo-pagina { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sub-abas { display: inline-flex; gap: 4px; padding: 4px; background: var(--etiqueta); border-radius: 12px; align-self: flex-start; flex-wrap: wrap; }
.sub-abas button { border: 0; background: transparent; color: var(--suave); font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 9px; }
.sub-abas button.ativa { background: var(--cartao); color: var(--texto); box-shadow: var(--sombra-1); }
.rel-conteudo { display: flex; flex-direction: column; gap: 12px; }
.ranking { display: flex; flex-direction: column; gap: 8px; }
.linha-ranking { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.linha-ranking .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-ranking .trilho { height: 10px; background: var(--etiqueta); border-radius: 999px; overflow: hidden; }
.linha-ranking .barra-h { display: block; height: 100%; background: var(--cor); border-radius: 999px; }
.linha-ranking .valor { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texto); min-width: 32px; text-align: right; }
.cartoes.destaque .cartao:first-child { background: linear-gradient(135deg, var(--cor) 0%, var(--cor-escura-fixa) 100%); border-color: transparent; color: #fff; }
.cartoes.destaque .cartao:first-child .rotulo { color: rgba(255,255,255,.85); }



/* =====================================================================
   Visual 3 (2026-11-01): barra lateral, tons neutros, uma cor de destaque.
   Fica no fim do arquivo de propósito: vale por cima das regras de cima.
   ===================================================================== */
:root {
  --fundo: #F6F6F7; --lateral: #F1F1F3; --cartao: #FFFFFF; --borda: #E4E4E7; --linha: #EFEFF1;
  --texto: #18181B; --suave: #6B6B74; --fraco: #9A9AA3;
  --cor: #0D7C66; --cor-escura: #0A6453; --cor-clara: #E6F2EF; --cor-texto: #0A6453;
  --etiqueta: #EFEFF2; --campo: #FFFFFF; --campo-borda: #D8D8DE; --item-ativo: #F2F6F5;
  --conversa: #F8F8F9; --msg: #FFFFFF; --balao-jova: #E3F1EC; --balao-equipe: #E7EDFA;
  --forte: #18181B; --forte-texto: #FFFFFF; --azul: #2F5BD3;
  --sombra-1: 0 1px 2px rgba(24, 24, 27, .04); --sombra-2: 0 8px 24px rgba(24, 24, 27, .10), 0 2px 6px rgba(24, 24, 27, .06);
  --foco: 0 0 0 3px rgba(13, 124, 102, .22); --cor-escura-fixa: #0A5C4C;
  font-family: Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:root[data-tema="escuro"] {
  --fundo: #0E0E10; --lateral: #0A0A0C; --cartao: #151518; --borda: #26262B; --linha: #1E1E22;
  --texto: #ECECEE; --suave: #9898A1; --fraco: #6C6C75;
  --cor: #1F9C80; --cor-escura: #5CCFB3; --cor-clara: #132C26; --cor-texto: #6ED6BC;
  --etiqueta: #1E1E22; --campo: #18181B; --campo-borda: #313137; --item-ativo: #18211F;
  --conversa: #0F0F11; --msg: #1B1B1F; --balao-jova: #13302A; --balao-equipe: #1A2338;
  --forte: #ECECEE; --forte-texto: #0E0E10; --azul: #8FB0FF;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 10px 30px rgba(0, 0, 0, .55);
  --foco: 0 0 0 3px rgba(46, 179, 147, .3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0E0E10; --lateral: #0A0A0C; --cartao: #151518; --borda: #26262B; --linha: #1E1E22;
    --texto: #ECECEE; --suave: #9898A1; --fraco: #6C6C75;
    --cor: #1F9C80; --cor-escura: #5CCFB3; --cor-clara: #132C26; --cor-texto: #6ED6BC;
    --etiqueta: #1E1E22; --campo: #18181B; --campo-borda: #313137; --item-ativo: #18211F;
    --conversa: #0F0F11; --msg: #1B1B1F; --balao-jova: #13302A; --balao-equipe: #1A2338;
    --forte: #ECECEE; --forte-texto: #0E0E10; --azul: #8FB0FF;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 10px 30px rgba(0, 0, 0, .55);
    --foco: 0 0 0 3px rgba(46, 179, 147, .3);
  }
}
body { color: var(--texto); background: var(--fundo); line-height: 1.45; }
::selection { background: var(--cor-clara); }
:focus-visible { outline: none; box-shadow: var(--foco); }
* { scrollbar-width: thin; scrollbar-color: var(--campo-borda) transparent; }
.icone { width: 16px; height: 16px; stroke-width: 1.7; }

/* Estrutura: lateral fixa + área principal */
.app { flex-direction: row; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.corpo { flex: 1; min-height: 0; display: flex; }

aside.lateral { width: 244px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--lateral); border-right: 1px solid var(--borda); padding: 14px 10px 10px; gap: 14px; overflow: hidden; }
.lateral .marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 6px; }
.lateral .marca img { width: 30px; height: 30px; border-radius: 8px; }
.lateral .marca strong { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.lateral .marca span { display: block; font-size: 12px; color: var(--suave); }
nav.modulos { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; margin: 0 -2px; padding: 0 2px; }
.modulo { width: 100%; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--suave); font-size: 13.5px; font-weight: 500; text-align: left; transition: background .12s, color .12s; }
.modulo:hover { background: var(--etiqueta); color: var(--texto); }
.modulo.ativo { background: var(--cartao); color: var(--texto); box-shadow: 0 0 0 1px var(--borda), var(--sombra-1); font-weight: 600; }
.modulo.ativo .icone { color: var(--cor); }
.modulo .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modulo .cadeado { display: inline-flex; color: var(--fraco); }
.modulo .cadeado .icone { width: 14px; height: 14px; }
.modulo.trancado { color: var(--fraco); }

/* Filas do atendimento, dentro da lateral */
nav.filas { width: auto; display: flex; flex-direction: column; gap: 1px; padding: 4px 0 8px 12px; margin: 2px 0 6px 17px; background: transparent; border: 0; border-left: 1px solid var(--borda); border-radius: 0; overflow: visible; box-shadow: none; position: static; transform: none; }
nav.filas button { display: flex; justify-content: space-between; align-items: center; min-height: 30px; height: 30px; padding: 0 8px; border: 0; border-radius: 6px; font-size: 13px; color: var(--suave); background: transparent; box-shadow: none; text-align: left; }
nav.filas button:hover { background: var(--etiqueta); color: var(--texto); }
nav.filas button.ativa { background: var(--etiqueta); color: var(--texto); font-weight: 600; box-shadow: none; }
nav.filas .rotulo-fila { display: inline-flex; align-items: center; gap: 8px; }
nav.filas .rotulo-fila .icone { width: 15px; height: 15px; }
nav.filas .num { min-width: 20px; padding: 0 6px; border-radius: 999px; background: transparent; font-size: 11.5px; font-weight: 600; color: var(--fraco); text-align: right; font-variant-numeric: tabular-nums; }
nav.filas button.chamando { background: var(--alerta-fundo); color: var(--alerta-texto); }
nav.filas button.chamando .num { background: var(--alerta); color: #fff; text-align: center; }
nav.filas .separador { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fraco); padding: 12px 8px 4px; }

.lateral .conta { display: flex; align-items: center; gap: 10px; padding: 10px 6px 2px; border-top: 1px solid var(--borda); }
.avatar.pequeno { width: 30px; height: 30px; font-size: 12px; background: var(--cor-clara); color: var(--cor-texto); }
.quem-sou { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.quem-sou strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem-sou span { font-size: 11.5px; color: var(--suave); }
.btn.fantasma { border-color: transparent; background: transparent; box-shadow: none; color: var(--suave); width: 32px; height: 32px; }
.btn.fantasma:hover:not(:disabled) { background: var(--etiqueta); color: var(--texto); border-color: transparent; }

/* Barra do alto: título da tela e busca */
header.topo { min-height: 56px; padding: 0 24px; gap: 16px; background: var(--fundo); border-bottom: 1px solid var(--borda); box-shadow: none; flex-wrap: nowrap; }
.titulo-tela { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca { flex: 0 1 420px; margin-left: auto; height: 36px; border-radius: 8px; background: var(--cartao); border: 1px solid var(--borda); padding: 0 10px; gap: 8px; color: var(--fraco); box-shadow: var(--sombra-1); }
.busca:focus-within { border-color: var(--cor); box-shadow: var(--foco); }
.busca input { font-size: 13.5px; color: var(--texto); }
.menu { display: none !important; }
nav.abas { display: none; }

/* Botões e campos */
.btn { height: 34px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); font-size: 13px; font-weight: 600; box-shadow: var(--sombra-1); transition: background .12s, border-color .12s, color .12s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.btn:hover:not(:disabled) { background: var(--etiqueta); }
.btn.primario { background: var(--cor); border-color: var(--cor); color: #fff; }
.btn.primario:hover:not(:disabled) { background: var(--cor-escura-fixa); border-color: var(--cor-escura-fixa); }
.btn.escuro { background: var(--forte); border-color: var(--forte); color: var(--forte-texto); }
.btn.escuro:hover:not(:disabled) { opacity: .9; background: var(--forte); }
.btn.pequeno { height: 28px; padding: 0 9px; font-size: 12.5px; border-radius: 6px; }
.btn.icone-so { width: 34px; height: 34px; padding: 0; }
.btn.icone-so .icone { width: 17px; height: 17px; }
label.campo { font-size: 12.5px; font-weight: 500; color: var(--suave); }
label.campo input, label.campo textarea, label.campo select, .extras input[type=search], .contatos input[type=search], .pesquisa-mapa input, .pesquisa-fornecedor input, .busca-lugar {
  height: 36px; border: 1px solid var(--campo-borda); border-radius: 7px; background: var(--campo); color: var(--texto); padding: 0 11px; font-size: 13.5px; transition: border-color .12s, box-shadow .12s;
}
label.campo textarea { height: 110px; padding: 9px 11px; }
label.campo input:focus, label.campo textarea:focus, .extras input:focus, .contatos input:focus, .escrever textarea:focus, .busca-lugar:focus { outline: none; border-color: var(--cor); box-shadow: var(--foco); }
.etiqueta { border-radius: 5px; font-size: 11px; padding: 1px 6px; background: var(--etiqueta); color: var(--suave); }

/* Páginas */
.pagina { padding: 28px 32px; }
.pagina.extras { gap: 14px; max-width: 1320px; width: 100%; }
.pagina h2, .extras h2, .titulo-pagina h2, .contatos h2 { font-size: 20px; font-weight: 650; letter-spacing: -.015em; margin: 0; }
.extras h3 { font-size: 14.5px; font-weight: 650; margin: 18px 0 2px; }
.extras h4 { font-size: 13px; font-weight: 600; color: var(--suave); }
.rotulo { color: var(--suave); }
.extras > p.rotulo, .pagina > p.rotulo { font-size: 13px; margin: 0; }
.cartoes { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 4px; }
.cartao { border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; box-shadow: var(--sombra-1); background: var(--cartao); }
.cartao .rotulo { font-size: 12.5px; font-weight: 500; color: var(--suave); }
.cartao .grande { font-size: 26px; font-weight: 650; letter-spacing: -.025em; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cartao .comparacao { font-size: 12px; color: var(--fraco); margin-top: 6px; }
.cartoes.destaque .cartao:first-child { background: var(--cor); color: #fff; border-color: var(--cor); }
.cartoes.destaque .cartao:first-child .rotulo, .cartoes.destaque .cartao:first-child .comparacao { color: rgba(255, 255, 255, .8); }
.grafico { border: 1px solid var(--borda); border-radius: 10px; padding: 16px 18px; box-shadow: var(--sombra-1); background: var(--cartao); margin: 0; }
.grafico figcaption { font-size: 13px; margin-bottom: 12px; }
.grafico figcaption strong { font-weight: 600; }
.grafico .barras { height: 130px; gap: 3px; border-bottom-color: var(--borda); }
.grafico .barra { background: var(--cor); border-radius: 3px 3px 0 0; opacity: .9; }
.grafico .barra-caixa:hover .barra { opacity: 1; background: var(--cor-escura-fixa); }
.linha-ranking .trilho { height: 8px; }
.linha-ranking .barra-h { background: var(--cor); }
.sub-abas { background: var(--etiqueta); border-radius: 9px; padding: 3px; }
.sub-abas button { padding: 6px 12px; border-radius: 7px; font-size: 13px; }
.sub-abas button.ativa { background: var(--cartao); color: var(--texto); box-shadow: 0 0 0 1px var(--borda), var(--sombra-1); }
table.tabela { border-radius: 10px; font-size: 13.5px; }
table.tabela th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--fraco); background: var(--fundo); }
.caixa-tabela { border-radius: 10px; box-shadow: var(--sombra-1); }
.formulario { border-radius: 10px; box-shadow: var(--sombra-1); }
.lugar, .contato, .fornecedor-novo { border-radius: 10px; box-shadow: var(--sombra-1); }
.lugar:hover, .contato:hover { border-color: var(--campo-borda); }
.lugar.ativo { border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-clara); }
.mapa-3d { border-radius: 12px; box-shadow: var(--sombra-1); }
.analise { font-size: 14.5px; line-height: 1.65; }
.analise h3 { color: var(--texto); font-size: 15.5px; }

/* Lista de conversas */
section.lista { width: 330px; background: var(--cartao); border-right: 1px solid var(--borda); }
section.lista h2 { display: none; }
.item { padding: 11px 14px; border-top: 0; border-bottom: 1px solid var(--linha); gap: 12px; transition: background .12s; }
.item:hover { background: var(--item-ativo); }
.item.ativo { background: var(--item-ativo); box-shadow: inset 2px 0 0 var(--cor); }
.item .linha1 { font-size: 13.5px; }
.item .ultima { font-size: 12.5px; }
.avatar { width: 38px; height: 38px; font-size: 13px; font-weight: 650; background: var(--etiqueta); color: var(--suave); box-shadow: none; }

/* Conversa */
main.conversa { background: var(--conversa); }
.cabeca { min-height: 60px; padding: 10px 20px; gap: 10px; background: var(--cartao); border-bottom: 1px solid var(--borda); box-shadow: none; }
.cabeca .quem strong { font-size: 14.5px; font-weight: 650; }
.mensagens { padding: 18px 24px; gap: 6px; }
.msg { border-radius: 12px; padding: 8px 12px; font-size: 13.5px; box-shadow: 0 0 0 1px var(--linha); }
.msg.jova, .msg.atendente { box-shadow: none; }
.msg .autor { font-size: 11px; color: var(--cor-texto); }
.msg .hora { color: var(--fraco); }
.escrever { padding: 12px 20px; gap: 8px; background: var(--cartao); border-top: 1px solid var(--borda); align-items: center; }
.escrever textarea { min-height: 40px; border-radius: 8px; font-size: 13.5px; padding: 9px 12px; }
.prontas { padding: 8px 20px 0; }
.prontas button { border-radius: 6px; font-size: 12px; }
aside.ficha { width: 270px; padding: 20px; background: var(--cartao); }
.resumo { border-radius: 8px; margin: 12px 20px 0; }

/* Em construção: robô trabalhando */
.modulo-vazio { display: grid; place-items: center; }
.obra { max-width: 440px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; }
.obra h2 { font-size: 22px; }
.obra p { margin: 0; color: var(--suave); line-height: 1.55; }
.selo-obra { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--alerta-fundo); color: var(--alerta-texto); font-size: 12px; font-weight: 600; }
.selo-obra .icone { width: 13px; height: 13px; }
.robo-obra { width: 240px; height: auto; margin-bottom: 6px; fill: none; stroke: var(--texto); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.robo-obra .olho { fill: var(--cor); stroke: none; }
.robo-obra .chao { stroke: var(--borda); stroke-width: 2; }
.robo-obra .caixa-obra { stroke: var(--fraco); }
.robo-obra .engrenagem-grande, .robo-obra .engrenagem-pequena { stroke: var(--cor); }
.robo-obra .engrenagem-grande { transform-box: view-box; transform-origin: 172px 46px; animation: girar 6s linear infinite; }
.robo-obra .engrenagem-pequena { transform-box: view-box; transform-origin: 198px 74px; animation: girar 4s linear infinite reverse; }
.robo-obra .braco-martelo { transform-box: view-box; transform-origin: 116px 84px; animation: martelar 1.1s ease-in-out infinite; }
.robo-obra .faisca { stroke: var(--alerta); animation: faiscar 1.1s ease-in-out infinite; }
.robo-obra .robo-corpo { animation: respirar 2.2s ease-in-out infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes martelar { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } }
@keyframes faiscar { 0%, 40%, 100% { opacity: 0; } 55% { opacity: 1; } }
@keyframes respirar { 50% { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) { .robo-obra * { animation: none !important; } .robo-obra .faisca { opacity: 1; } }

/* Login */
.login { background: var(--fundo); }
.login form { max-width: 380px; border-radius: 12px; padding: 32px; box-shadow: var(--sombra-2); gap: 16px; }
.login h1 { font-size: 20px; font-weight: 650; letter-spacing: -.015em; }

/* Telas menores: a lateral vira gaveta */
.veu { display: none; }
@media (max-width: 1100px) {
  aside.lateral { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--sombra-2); }
  aside.lateral.aberta { transform: none; }
  .veu { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 29; }
  .menu { display: inline-flex !important; }
  header.topo { padding: 0 14px; }
  .pagina { padding: 20px 16px; }
}
@media (max-width: 760px) {
  header.topo { flex-wrap: wrap; padding: 8px 12px; min-height: 52px; }
  .busca { order: 3; flex: 1 1 100%; margin-left: 0; }
  .mensagens { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) { aside.lateral { transition: none; } }
/* O título da tela já aparece na barra do alto: sem repetir dentro da página */
.corpo .pagina > h2:first-child, .titulo-pagina > h2, .contatos-topo > h2 { display: none; }
.titulo-pagina { justify-content: flex-end; }
.contatos-topo .rotulo { margin-right: auto; }
.barra-relatorio { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ===== Acabamento (2026-11-01): fonte Inter, transições, carregando, telas vazias e entrada ===== */
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("vendor/inter/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("vendor/inter/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root { font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-feature-settings: "cv11", "ss01", "ss03"; letter-spacing: -.003em; }

/* Transições: a tela nova entra com um leve deslizar; a mensagem nova aparece devagar */
.entrando { animation: entrar .22s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg.nova { animation: chegar .28s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes chegar { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modulo, nav.filas button, .item, .btn, .lugar, .contato { transition-duration: .14s; }

/* Carregando: blocos no formato do conteúdo */
.esqueleto { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.osso { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--etiqueta) 0%, var(--linha) 40%, var(--etiqueta) 80%); background-size: 300% 100%; animation: piscar-osso 1.4s ease-in-out infinite; }
.osso-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.osso-cartao { height: 86px; border-radius: 10px; }
.osso-grafico { height: 170px; border-radius: 10px; }
.osso-t1 { height: 12px; width: 55%; }
.osso-t2 { height: 10px; width: 35%; }
.osso-t1.largo { width: 80%; }
.osso-t2.largo { width: 65%; }
.osso-linha { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.osso-bola { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.osso-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
@keyframes piscar-osso { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Telas vazias com desenho */
.estado-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 20px; color: var(--suave); }
.estado-vazio strong { color: var(--texto); font-size: 14.5px; font-weight: 600; margin-top: 4px; }
.estado-vazio p { margin: 0; font-size: 13px; max-width: 300px; line-height: 1.5; }
.desenho-vazio { width: 150px; height: auto; fill: none; stroke: var(--fraco); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.desenho-vazio .destaque { stroke: var(--cor); }
.desenho-vazio .ponto { fill: var(--cor); stroke: none; }
.fechada .estado-vazio { padding: 0; }

/* Entrada (login) */
.login { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; background: var(--fundo); }
.login-marca {
  display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 56px clamp(32px, 6vw, 88px);
  background-color: var(--lateral); border-right: 1px solid var(--borda);
  background-image: radial-gradient(circle at 1px 1px, var(--campo-borda) 1px, transparent 0); background-size: 22px 22px;
}
.login-marca img { width: 52px; height: 52px; border-radius: 14px; box-shadow: var(--sombra-2); }
.login-marca strong { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.login-marca p { margin: 0; max-width: 420px; color: var(--suave); font-size: 15.5px; line-height: 1.55; }
.login-marca ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--texto); font-size: 14px; }
.login-marca li { display: flex; align-items: center; gap: 10px; }
.login-marca li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--cor-clara) no-repeat center / 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2L9.5 3.6' fill='none' stroke='%230D7C66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.login-cartao { display: grid; place-items: center; padding: 32px 20px; }
.login form { width: 100%; max-width: 360px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 32px; box-shadow: var(--sombra-2); display: flex; flex-direction: column; gap: 16px; animation: entrar .3s cubic-bezier(.2, .7, .2, 1) both; }
.login h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.login form > p { margin: -8px 0 4px; color: var(--suave); font-size: 13.5px; }
.btn.grande { height: 40px; font-size: 14px; }
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-marca { padding: 36px 24px 8px; border-right: 0; background-image: none; background-color: transparent; align-items: center; text-align: center; }
  .login-marca ul, .login-marca p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .entrando, .msg.nova, .login form { animation: none; }
  .osso { animation: none; }
}
.login { place-items: stretch; align-items: stretch; height: 100%; }
nav.filas .rotulo-fila { min-width: 0; } nav.filas .rotulo-fila > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Relatórios e Fornecedores (2026-11-01, noite) ===== */
.dica { font-size: 12.5px; color: var(--fraco); margin: 0; }
nav.filas button.trancada { color: var(--fraco); }
nav.filas button.trancada .num .icone { width: 13px; height: 13px; }

/* Controle segmentado (período, filtros) */
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--etiqueta); border-radius: 9px; }
.segmentado button { border: 0; background: transparent; color: var(--suave); font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 7px; transition: background .12s, color .12s; }
.segmentado button:hover { color: var(--texto); }
.segmentado button.ativo { background: var(--cartao); color: var(--texto); box-shadow: 0 0 0 1px var(--borda), var(--sombra-1); }
.barra-relatorio { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.barra-relatorio > .rotulo { font-size: 12.5px; }
.barra-relatorio > .btn { margin-left: auto; }

/* Indicadores */
.cartoes.kpis { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cartao.kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; }
.kpi-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kpi-icone { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--cor-clara); color: var(--cor-texto); flex: none; }
.kpi-icone .icone { width: 16px; height: 16px; }
.kpi-icone.grande-icone { width: 40px; height: 40px; border-radius: 10px; }
.kpi-icone.grande-icone .icone { width: 20px; height: 20px; }
.cartao.kpi .grande { font-size: 28px; margin-top: 8px; }
.comparacao { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fraco); margin-top: 8px; }
.delta { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; background: var(--etiqueta); color: var(--suave); }
.delta.bom { background: #E3F4EC; color: #0B7A4E; }
.delta.ruim { background: #FCE8E6; color: #B42318; }
:root[data-tema="escuro"] .delta.bom { background: #12301F; color: #5FD49A; }
:root[data-tema="escuro"] .delta.ruim { background: #3A1715; color: #F7867D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .delta.bom { background: #12301F; color: #5FD49A; }
  :root:not([data-tema="claro"]) .delta.ruim { background: #3A1715; color: #F7867D; }
}

/* Gráfico com linhas de guia */
.grafico figcaption { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.grafico figcaption > div { display: flex; flex-direction: column; gap: 2px; }
.grafico figcaption .rotulo { font-size: 12px; }
.total-grafico { font-size: 12px; font-weight: 600; color: var(--suave); background: var(--etiqueta); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.area-grafico { position: relative; padding-left: 34px; }
.grade { position: absolute; inset: 0 0 0 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.linha-grade { position: relative; border-top: 1px dashed var(--linha); height: 0; }
.linha-grade:last-child { border-top: 1px solid var(--borda); }
.linha-grade span { position: absolute; left: 0; top: -8px; font-size: 11px; color: var(--fraco); font-variant-numeric: tabular-nums; }
.grafico .barras { position: relative; height: 170px; border-bottom: 0; gap: 4px; }
.grafico .barra { border-radius: 4px 4px 0 0; }
.grafico .eixo { padding-left: 34px; margin-top: 8px; }
.grafico .estado-vazio { padding: 18px; }

/* Grade principal do relatório: gráfico grande + cartão de resumo */
.grade-principal { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; }
.resumo-lado { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 20px; }
.resumo-lado > .rotulo:first-child { font-weight: 600; color: var(--texto); }
.resumo-lado p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.anel { --p: 0; width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--cor) calc(var(--p) * 1%), var(--etiqueta) 0); position: relative; }
.anel::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--cartao); }
.anel strong { position: relative; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.mini-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; padding-top: 10px; border-top: 1px solid var(--linha); }
.mini-numeros div { display: flex; flex-direction: column; }
.mini-numeros strong { font-size: 18px; font-weight: 650; }
.mini-numeros span { font-size: 11.5px; color: var(--suave); }
.titulo-secao { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.titulo-secao h3 { margin: 0 !important; }
.titulo-secao .rotulo { font-size: 12.5px; }
.ranking figcaption { display: flex; justify-content: space-between; }
.ranking figcaption .rotulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.linha-ranking { padding: 3px 0; }

/* Parte em construção (dentro de uma página) */
.obra-pequena { display: flex; align-items: center; gap: 24px; padding: 28px; }
.obra-pequena .robo-obra { width: 180px; flex: none; margin: 0; }
.obra-pequena h3 { margin: 10px 0 4px !important; font-size: 17px; }
.obra-pequena p { margin: 0; max-width: 420px; line-height: 1.55; }
.obra-pequena .selo-obra { padding: 3px 9px; }

/* Fornecedores: pesquisa com IA */
.faixa-aviso, .faixa-info { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 9px; font-size: 13px; }
.faixa-aviso { background: var(--alerta-fundo); color: var(--alerta-texto); border: 1px solid var(--resumo-borda); }
.faixa-info { background: var(--etiqueta); color: var(--suave); }
.faixa-info .icone { flex: none; }
.busca-ia { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; }
.busca-ia-titulo { display: flex; gap: 14px; align-items: flex-start; }
.busca-ia-titulo h3 { margin: 0 0 4px !important; font-size: 16px; }
.busca-ia-titulo p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 640px; }
.pesquisa-fornecedor { display: flex; gap: 8px; flex-wrap: wrap; }
.campo-busca { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 1px solid var(--campo-borda); border-radius: 9px; background: var(--campo); color: var(--fraco); transition: border-color .12s, box-shadow .12s; }
.campo-busca:focus-within { border-color: var(--cor); box-shadow: var(--foco); }
.campo-busca input, .pesquisa-fornecedor .campo-busca input { flex: 1; height: 100%; border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; outline: none; font-size: 14px; color: var(--texto); min-width: 0; }
.pesquisa-fornecedor .btn { height: 42px; padding: 0 20px; font-size: 13.5px; }
.pesquisa-grade { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.pesquisa-grade:has(> :only-child) { grid-template-columns: 1fr; }
.historico-pesquisas { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; }
.rotulo-secao { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fraco); padding: 4px 10px 6px; }
.historico-pesquisas button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--texto); }
.historico-pesquisas button:hover { background: var(--etiqueta); }
.historico-pesquisas button.ativa { background: var(--cartao); border-color: var(--borda); box-shadow: var(--sombra-1); }
.historico-pesquisas strong { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.historico-pesquisas span { font-size: 11.5px; color: var(--fraco); }
.pesquisa-principal { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cabeca-resultado { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cabeca-resultado h3 { margin: 0 0 3px !important; font-size: 17px; }
.cabeca-resultado .rotulo { font-size: 12.5px; }
.btn.fantasma-texto { background: transparent; box-shadow: none; border-color: transparent; color: var(--suave); }
.btn.fantasma-texto:hover:not(:disabled) { color: var(--perigo); background: transparent; }
.resumo-ia { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; background: var(--cor-clara); color: var(--texto); }
.resumo-ia .icone { color: var(--cor-texto); flex: none; margin-top: 2px; }
.resumo-ia p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.fornecedores-novos { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.fornecedor-novo { padding: 16px 18px; gap: 8px; }
.fornecedor-novo .topo strong { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.fornecedor-novo .etiqueta { text-transform: capitalize; flex: none; }
.fornecedor-novo .tipo-fabricante { background: var(--cor-clara); color: var(--cor-texto); }
.linha-icone { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--suave); }
.linha-icone .icone { width: 14px; height: 14px; flex: none; }
.fornecedor-novo .vende { font-size: 13px; line-height: 1.5; color: var(--texto); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fornecedor-novo .porque { font-size: 12.5px; line-height: 1.5; color: var(--suave); padding-left: 10px; border-left: 2px solid var(--borda); }
.fornecedor-novo .acoes { margin-top: auto; padding-top: 6px; }
.fornecedor-novo .acoes .icone { width: 14px; height: 14px; }
.pesquisando { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.pesquisando p { margin: 2px 0 0; }
.girando { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--etiqueta); border-top-color: var(--cor); animation: girar .8s linear infinite; flex: none; }

/* Fornecedores: catálogos e pendências */
.grade-catalogos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.catalogo { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.catalogo .topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.catalogo .topo strong { font-size: 14.5px; font-weight: 650; }
.numeros-catalogo { display: flex; gap: 22px; }
.numeros-catalogo div { display: flex; flex-direction: column; }
.numeros-catalogo strong { font-size: 20px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numeros-catalogo span { font-size: 11.5px; color: var(--suave); }
.medidor { display: flex; flex-direction: column; gap: 5px; }
.medidor-topo { display: flex; justify-content: space-between; font-size: 12px; color: var(--suave); }
.medidor-topo strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.medidor .trilho { display: block; height: 6px; border-radius: 999px; background: var(--etiqueta); overflow: hidden; }
.medidor .barra-h { display: block; height: 100%; border-radius: 999px; background: var(--cor); }
.lista-pendencias { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); box-shadow: var(--sombra-1); overflow: hidden; }
.pendencia { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.pendencia:last-child { border-bottom: 0; }
.pendencia code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 5px; background: var(--etiqueta); color: var(--texto); }
.pendencia p { margin: 0; flex: 1 1 260px; font-size: 13px; line-height: 1.45; }

@media (max-width: 1000px) {
  .grade-principal { grid-template-columns: 1fr; }
  .pesquisa-grade { grid-template-columns: 1fr; }
  .historico-pesquisas { position: static; flex-direction: row; overflow-x: auto; }
  .historico-pesquisas button { min-width: 180px; }
  .obra-pequena { flex-direction: column; text-align: center; }
}
/* Ajustes do atendimento (Equipe, Respostas prontas, Senha): formulário ao lado da lista */
.pagina:has(> .formulario) { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-content: start; align-items: start; }
.pagina:has(> .formulario) > .caixa-tabela { margin: 0; }
.formulario { gap: 14px; padding: 20px; margin: 0; }
.titulo-form { margin: 0 0 2px; font-size: 15px; font-weight: 650; }
.pessoa { display: inline-flex; align-items: center; gap: 10px; }
.pessoa .avatar { width: 28px; height: 28px; font-size: 11px; }
table.tabela td .estado-vazio { padding: 24px 12px; }
@media (max-width: 900px) { .pagina:has(> .formulario) { grid-template-columns: 1fr; } }
.lugar .acoes { flex-wrap: nowrap; } .lugar .acoes select { flex: 1; min-width: 0; } .btn.pequeno.icone-so { width: 28px; height: 28px; padding: 0; } .btn.pequeno.icone-so .icone { width: 14px; height: 14px; }
.cartoes.destaque .cartao:first-child .kpi-icone { background: rgba(255,255,255,.18); color: #fff; }

/* =====================================================================
   Visual 4 "Prisma" (2026-11-01): a marca é luz num prisma. Entrada escura com luz
   se mexendo, barra lateral sempre escura, verde-menta como luz de destaque.
   ===================================================================== */
:root {
  --menta: #5BE0BD; --menta-forte: #1FA585; --prisma: linear-gradient(135deg, #5BE0BD 0%, #1FA585 55%, #0D7C66 100%);
  --lat-fundo: #0B1312; --lat-borda: #1A2523; --lat-texto: #E9F0EE; --lat-suave: #93A6A1; --lat-fraco: #5F726D;
  --lat-hover: rgba(255, 255, 255, .05); --lat-ativo: rgba(91, 224, 189, .10);
  --fundo: #F4F6F5; --cartao: #FFFFFF; --borda: #E2E7E5; --linha: #EDF1EF; --etiqueta: #EEF2F0; --item-ativo: #EFF6F3;
  --conversa: #F6F8F7; --campo-borda: #D5DDDA;
}
:root[data-tema="escuro"] { --fundo: #090E0D; --cartao: #101716; --borda: #1E2927; --linha: #172120; --etiqueta: #18221F; --item-ativo: #13201D; --conversa: #0B1110; --campo: #121A19; --campo-borda: #2A3633; --msg: #16201E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --fundo: #090E0D; --cartao: #101716; --borda: #1E2927; --linha: #172120; --etiqueta: #18221F; --item-ativo: #13201D; --conversa: #0B1110; --campo: #121A19; --campo-borda: #2A3633; --msg: #16201E; }
}

/* ---------- Entrada ---------- */
.entrada { position: fixed; inset: 0; overflow: auto; background: #060B0A; color: #E9F0EE; display: grid; place-items: center; isolation: isolate; }
.luzes { position: fixed; inset: 0; z-index: -2; overflow: hidden; }
.luz { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.luz-1 { width: 620px; height: 620px; left: -160px; top: -200px; background: #1FA585; animation: flutuar-1 22s ease-in-out infinite alternate; }
.luz-2 { width: 520px; height: 520px; right: -140px; bottom: -180px; background: #0D5E4E; animation: flutuar-2 26s ease-in-out infinite alternate; }
.luz-3 { width: 340px; height: 340px; left: 55%; top: 18%; background: #3E6FD8; opacity: .18; animation: flutuar-3 30s ease-in-out infinite alternate; }
@keyframes flutuar-1 { to { transform: translate(140px, 90px) scale(1.08); } }
@keyframes flutuar-2 { to { transform: translate(-120px, -80px) scale(1.12); } }
@keyframes flutuar-3 { to { transform: translate(-160px, 120px); } }
.grade-entrada { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%); }
.centro-entrada { width: 100%; max-width: 420px; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 26px; animation: subir .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.marca-entrada { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.logo-brilho { position: relative; display: grid; place-items: center; margin-bottom: 10px; }
.logo-brilho::before { content: ""; position: absolute; inset: -18px; border-radius: 30px; background: radial-gradient(closest-side, rgba(91, 224, 189, .45), transparent); filter: blur(10px); animation: pulsar 4s ease-in-out infinite; }
.logo-brilho img { position: relative; width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.5); }
@keyframes pulsar { 50% { opacity: .55; transform: scale(.94); } }
.marca-entrada strong { font-size: 28px; font-weight: 700; letter-spacing: -.035em; color: #fff; }
.marca-entrada span { font-size: 13px; color: #8FA39E; letter-spacing: .01em; }
.vidro { width: 100%; padding: 1px; border-radius: 20px; background: linear-gradient(160deg, rgba(91, 224, 189, .35), rgba(255,255,255,.06) 40%, rgba(255,255,255,.04) 70%, rgba(91, 224, 189, .18)); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.form-entrada { display: flex; flex-direction: column; gap: 16px; padding: 30px 28px 28px; border-radius: 19px; background: rgba(13, 21, 20, .78); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }
.form-entrada h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.02em; color: #fff; }
.form-entrada .sub { margin: -10px 0 4px; font-size: 13.5px; color: #8FA39E; }
.campo-entrada { display: flex; flex-direction: column; gap: 7px; }
.rotulo-entrada { font-size: 12.5px; font-weight: 600; color: #B7C7C2; }
.caixa-entrada { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 12px 0 14px; border-radius: 11px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); color: #6F847E; transition: border-color .15s, box-shadow .15s, background .15s; }
.caixa-entrada:hover { border-color: rgba(255, 255, 255, .16); }
.caixa-entrada:focus-within { border-color: rgba(91, 224, 189, .7); background: rgba(91, 224, 189, .06); box-shadow: 0 0 0 4px rgba(91, 224, 189, .14); color: var(--menta); }
.caixa-entrada .icone { width: 17px; height: 17px; flex: none; }
.caixa-entrada input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; font-size: 14.5px; outline: none; }
.caixa-entrada input::placeholder { color: #55675F; }
.caixa-entrada input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }
.olho { border: 0; background: transparent; color: #6F847E; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; padding: 0; }
.olho:hover { color: #fff; background: rgba(255,255,255,.06); }
.caps { display: none; margin-top: 6px; font-size: 12px; color: #F5C38A; }
.caps.ligado { display: block; }
.form-entrada .erro { color: #F7867D; min-height: 0; font-size: 13px; }
.form-entrada .erro:empty { display: none; }
.btn.entrar { height: 48px; margin-top: 4px; border-radius: 12px; border: 0; background: var(--prisma); background-size: 160% 160%; color: #04211B; font-size: 15px; font-weight: 700; gap: 8px; box-shadow: 0 10px 30px rgba(31, 165, 133, .35), inset 0 1px 0 rgba(255,255,255,.35); transition: background-position .4s, transform .1s, box-shadow .2s; }
.btn.entrar:hover:not(:disabled) { background-position: 100% 100%; box-shadow: 0 14px 34px rgba(31, 165, 133, .45), inset 0 1px 0 rgba(255,255,255,.35); background-color: transparent; }
.btn.entrar .icone { width: 18px; height: 18px; transition: transform .2s; }
.btn.entrar:hover .icone { transform: translateX(3px); }
.btn.entrar.carregando span { opacity: .7; }
.btn.entrar.carregando .icone { animation: girar .8s linear infinite; }
.rodape-entrada { margin: 0; font-size: 12px; color: #5F726D; text-align: center; }
.balanca { animation: balancar .4s cubic-bezier(.36, .07, .19, .97); }
@keyframes balancar { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.entrada :focus-visible { box-shadow: 0 0 0 3px rgba(91, 224, 189, .35); }

/* ---------- Abertura depois de entrar ---------- */
.abertura { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #060B0A; transition: opacity .6s ease, transform .6s ease; }
.abertura.saindo { opacity: 0; transform: scale(1.03); pointer-events: none; }
.abertura-centro { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.logo-montando { width: 112px; height: 112px; overflow: visible; filter: drop-shadow(0 0 24px rgba(91, 224, 189, .35)); }
.logo-montando .face-esq { fill: #fff; animation: chegar-esq .75s cubic-bezier(.2, .8, .2, 1) both; }
.logo-montando .face-dir { fill: var(--menta); animation: chegar-dir .75s cubic-bezier(.2, .8, .2, 1) .08s both; }
@keyframes chegar-esq { from { opacity: 0; transform: translate(-60px, 30px); } to { opacity: 1; transform: none; } }
@keyframes chegar-dir { from { opacity: 0; transform: translate(60px, 30px); } to { opacity: 1; transform: none; } }
.abertura strong { color: #fff; font-size: 20px; font-weight: 600; letter-spacing: -.02em; animation: subir .6s cubic-bezier(.2, .7, .2, 1) .45s both; }

/* ---------- Barra lateral escura ---------- */
aside.lateral { background: var(--lat-fundo); border-right: 1px solid var(--lat-borda); color: var(--lat-texto); position: relative; }
aside.lateral::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 220px; background: radial-gradient(120% 100% at 0% 0%, rgba(91, 224, 189, .13), transparent 70%); pointer-events: none; }
.lateral > * { position: relative; }
.lateral .marca { padding: 6px 8px 10px; }
.lateral .marca img { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.4); }
.lateral .marca strong { color: #fff; font-size: 15px; }
.lateral .marca span { color: var(--lat-suave); }
.modulo { color: var(--lat-suave); position: relative; }
.modulo:hover { background: var(--lat-hover); color: #fff; }
.modulo.ativo { background: var(--lat-ativo); color: #fff; box-shadow: none; }
.modulo.ativo::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--menta); box-shadow: 0 0 12px rgba(91, 224, 189, .7); }
.modulo.ativo .icone { color: var(--menta); }
.modulo.trancado, .modulo .cadeado { color: var(--lat-fraco); }
.lateral nav.filas { border-left-color: var(--lat-borda); }
.lateral nav.filas button { color: var(--lat-suave); }
.lateral nav.filas button:hover { background: var(--lat-hover); color: #fff; }
.lateral nav.filas button.ativa { background: rgba(255,255,255,.07); color: #fff; }
.lateral nav.filas button.ativa .icone { color: var(--menta); }
.lateral nav.filas .num { color: var(--lat-fraco); }
.lateral nav.filas button.ativa .num { color: var(--lat-suave); }
.lateral nav.filas button.chamando { background: rgba(217, 130, 43, .16); color: #F5C38A; }
.lateral nav.filas .separador { color: var(--lat-fraco); }
.lateral nav.filas button.trancada { color: var(--lat-fraco); }
.lateral .conta { border-top-color: var(--lat-borda); }
.lateral .quem-sou strong { color: #fff; }
.lateral .quem-sou span { color: var(--lat-suave); }
.lateral .avatar.pequeno { background: var(--prisma); color: #04211B; font-weight: 700; }
.lateral .btn.fantasma { color: var(--lat-suave); }
.lateral .btn.fantasma:hover:not(:disabled) { background: var(--lat-hover); color: #fff; }
nav.modulos { scrollbar-color: #2A3633 transparent; }

/* ---------- Área principal ---------- */
.principal { position: relative; }
.principal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--menta), rgba(91, 224, 189, 0) 55%); z-index: 2; pointer-events: none; }
header.topo { background: color-mix(in srgb, var(--fundo) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); min-height: 60px; }
.titulo-tela { font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
.busca { border-radius: 10px; height: 38px; }

/* Botões */
.btn { border-radius: 9px; }
.btn.primario { background: linear-gradient(180deg, #17977D, #0D7C66); border-color: #0D7C66; box-shadow: 0 1px 2px rgba(13, 124, 102, .25), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.primario:hover:not(:disabled) { background: linear-gradient(180deg, #1AA387, #0E866E); border-color: #0E866E; }
.btn.escuro { box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }

/* Cartões e indicadores */
.cartao, .grafico, .caixa-tabela, .lista-pendencias, .formulario { border-radius: 14px; border-color: var(--borda); }
.cartao.kpi { transition: border-color .15s, transform .15s, box-shadow .15s; }
.cartao.kpi:hover { border-color: color-mix(in srgb, var(--cor) 35%, var(--borda)); box-shadow: 0 8px 24px rgba(16, 40, 34, .07); transform: translateY(-1px); }
.kpi-icone { background: linear-gradient(135deg, color-mix(in srgb, var(--menta) 28%, transparent), color-mix(in srgb, var(--menta-forte) 12%, transparent)); color: var(--cor-texto); border-radius: 9px; }
.cartoes.destaque .cartao:first-child { background: linear-gradient(140deg, #0F1A18 0%, #11453B 100%); border-color: #11453B; position: relative; overflow: hidden; }
.cartoes.destaque .cartao:first-child::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(91, 224, 189, .35), transparent); }
.cartoes.destaque .cartao:first-child .grande { color: #fff; }
.cartoes.destaque .cartao:first-child .kpi-icone { background: rgba(91, 224, 189, .18); color: var(--menta); }
.grafico .barra { background: linear-gradient(180deg, #2BB894, #0D7C66); opacity: 1; }
.grafico .barra-caixa:hover .barra { background: linear-gradient(180deg, #5BE0BD, #1FA585); }
.linha-ranking .barra-h, .medidor .barra-h { background: linear-gradient(90deg, #0D7C66, #2BB894); }
.anel { background: conic-gradient(from -90deg, #1FA585, #5BE0BD calc(var(--p) * 1%), var(--etiqueta) 0); }
.anel { transform: rotate(0deg); }
.segmentado button.ativo, .sub-abas button.ativa { color: var(--cor-texto); }
.resumo-ia { background: linear-gradient(135deg, color-mix(in srgb, var(--menta) 16%, var(--cartao)), var(--cartao)); border: 1px solid color-mix(in srgb, var(--menta) 30%, var(--borda)); }
.busca-ia { background: linear-gradient(160deg, color-mix(in srgb, var(--menta) 8%, var(--cartao)), var(--cartao) 45%); }

/* Conversas */
.item.ativo { box-shadow: inset 3px 0 0 var(--menta-forte); }
.msg.jova { background: linear-gradient(160deg, #DDF3EC, #E8F6F1); }
.msg.atendente { background: linear-gradient(160deg, #E3EAFB, #ECF1FC); }
:root[data-tema="escuro"] .msg.jova { background: linear-gradient(160deg, #123129, #102722); }
:root[data-tema="escuro"] .msg.atendente { background: linear-gradient(160deg, #1A2540, #172036); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .msg.jova { background: linear-gradient(160deg, #123129, #102722); }
  :root:not([data-tema="claro"]) .msg.atendente { background: linear-gradient(160deg, #1A2540, #172036); }
}
.escrever textarea { border-radius: 12px; }
.btn.escuro { background: #0F1A18; border-color: #0F1A18; color: #fff; }
:root[data-tema="escuro"] .btn.escuro { background: var(--menta); border-color: var(--menta); color: #04211B; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .btn.escuro { background: var(--menta); border-color: var(--menta); color: #04211B; } }

/* Em construção e telas vazias: o verde da marca */
.robo-obra .olho { fill: var(--menta-forte); }
.desenho-vazio .destaque { stroke: var(--menta-forte); }

@media (prefers-reduced-motion: reduce) {
  .luz, .logo-brilho::before, .centro-entrada, .abertura strong, .logo-montando path { animation: none !important; }
  .cartao.kpi:hover { transform: none; }
}
@media (max-width: 1100px) { .modulo.ativo::before { left: -6px; } }

/* Ficha do cliente */
aside.ficha { gap: 18px; position: relative; padding: 24px 20px; }
.fechar-ficha { position: absolute; top: 12px; right: 12px; }
.ficha-topo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--linha); }
.avatar.grande { width: 72px; height: 72px; font-size: 22px; box-shadow: 0 0 0 4px var(--cartao), 0 0 0 5px var(--borda); }
.ficha-topo strong { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.pilula { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--etiqueta); color: var(--suave); }
.pilula::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pilula.estado-jova { background: var(--cor-clara); color: var(--cor-texto); }
.pilula.estado-aguardando { background: var(--alerta-fundo); color: var(--alerta-texto); }
.pilula.estado-humano { background: color-mix(in srgb, var(--azul) 14%, transparent); color: var(--azul); }
.ficha-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ficha-numeros div { display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: 10px; background: var(--etiqueta); }
.ficha-numeros strong { font-size: 16px; font-weight: 650; }
.ficha-numeros span { font-size: 11.5px; color: var(--suave); }
.ficha-dados { display: flex; flex-direction: column; gap: 14px; }
.linha-ficha { display: flex; gap: 10px; align-items: flex-start; }
.linha-ficha > .icone { margin-top: 2px; color: var(--fraco); }
.linha-ficha .rotulo { font-size: 11.5px; }
.linha-ficha .valor { font-size: 13px; font-weight: 500; line-height: 1.45; }
.apagar-cliente { margin-top: auto; background: transparent; box-shadow: none; }
.apagar-cliente:hover:not(:disabled) { background: color-mix(in srgb, var(--perigo) 10%, transparent); }

/* Soluções do mês: a análise como um documento */
.pagina.solucoes { display: flex; flex-direction: column; gap: 16px; max-width: 980px; padding: 28px 32px; }
.cabeca-solucoes .acoes { align-items: center; }
.documento { max-width: none; padding: 28px 34px 32px; font-size: 14.5px; line-height: 1.7; }
.documento-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--linha); }
.documento h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 26px 0 8px; padding-top: 4px; }
.documento h3::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--prisma); flex: none; }
.documento h4 { font-size: 14.5px; color: var(--texto); }
.documento ul, .documento ol { padding-left: 22px; }
.documento li::marker { color: var(--menta-forte); font-weight: 700; }
.documento strong { color: var(--texto); font-weight: 650; }
.pagina.solucoes > .cartao:not(.documento):not(.busca-ia) { padding: 0; }
/* Celular/tablet: a lateral escura volta a ser gaveta (a regra do Prisma marcava position: relative) */
@media (max-width: 1100px) {
  aside.lateral { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; transform: translateX(-100%); }
  aside.lateral.aberta { transform: none; }
}
.obra { position: relative; }
.obra::before { content: ""; position: absolute; left: 50%; top: 10px; width: 280px; height: 200px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--menta) 18%, transparent), transparent); z-index: -1; }
@media (max-width: 760px) { section.lista { width: 100%; border-right: 0; } }
.ligar-maps { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; } .ligar-maps p { margin: 4px 0 0; } .ligar-maps form input { flex: 1 1 320px; height: 38px; border: 1px solid var(--campo-borda); border-radius: 9px; background: var(--campo); color: var(--texto); padding: 0 12px; }

/* =====================================================================
   Visual 5 (2026-11-01): moldura escura + folha de conteúdo flutuante, busca central (Ctrl+K),
   selo do WhatsApp, conversas com separador de dia e caixa de escrever flutuante, Configurações.
   ===================================================================== */
:root { --moldura: #0B1312; --folha-raio: 18px; --sombra-folha: 0 0 0 1px rgba(16, 32, 28, .06), 0 24px 60px rgba(4, 12, 10, .28); }
:root[data-tema="escuro"] { --moldura: #060A09; --sombra-folha: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .6); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --moldura: #060A09; --sombra-folha: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .6); } }

/* Moldura e folha */
html, body, #app { background: var(--moldura); }
.app { background: var(--moldura); }
aside.lateral { background: transparent; border-right: 0; }
aside.lateral::before { height: 320px; background: radial-gradient(110% 90% at 0% 0%, rgba(91, 224, 189, .16), transparent 70%); }
.principal { margin: 10px 10px 10px 0; border-radius: var(--folha-raio); background: var(--fundo); box-shadow: var(--sombra-folha); overflow: hidden; isolation: isolate; }
.principal::before { left: 24px; right: auto; width: 180px; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, var(--menta), rgba(91, 224, 189, 0)); }

/* Topo: título | busca no centro | situação */
header.topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 520px) minmax(0, 1fr); align-items: center; gap: 16px; min-height: 64px; padding: 0 22px; background: color-mix(in srgb, var(--fundo) 88%, transparent); }
.topo-esq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.titulo-tela { font-size: 16.5px; font-weight: 650; letter-spacing: -.022em; }
.topo-dir { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.busca-central { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 8px 0 14px; border-radius: 12px; border: 1px solid var(--borda); background: var(--cartao); color: var(--fraco); font-size: 13.5px; text-align: left; box-shadow: 0 1px 2px rgba(16, 32, 28, .05), inset 0 1px 0 rgba(255,255,255,.4); transition: border-color .15s, box-shadow .15s, transform .15s; }
.busca-central:hover { border-color: color-mix(in srgb, var(--menta-forte) 45%, var(--borda)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--menta) 14%, transparent); }
.busca-central .icone { width: 17px; height: 17px; color: var(--suave); }
.busca-texto { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
kbd { font-family: inherit; font-size: 11px; font-weight: 600; color: var(--suave); background: var(--etiqueta); border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; line-height: 1.5; }
.selo-wa { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--borda); background: var(--cartao); color: var(--suave); }
.selo-wa.on { color: var(--cor-texto); border-color: color-mix(in srgb, var(--menta-forte) 35%, var(--borda)); background: color-mix(in srgb, var(--menta) 10%, var(--cartao)); }
.selo-wa.off { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 35%, var(--borda)); }
.ponto-wa { width: 8px; height: 8px; border-radius: 50%; background: currentColor; position: relative; }
.selo-wa.on .ponto-wa { background: #1FBF8F; box-shadow: 0 0 0 0 rgba(31, 191, 143, .6); animation: batida 2.2s ease-out infinite; }
@keyframes batida { 70% { box-shadow: 0 0 0 7px rgba(31, 191, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 191, 143, 0); } }

/* Paleta de busca (Ctrl+K) */
.paleta { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: 11vh 16px 16px; background: rgba(4, 10, 9, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: aparecer .14s ease both; }
.paleta.saindo { animation: sumir .14s ease both; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes sumir { to { opacity: 0; } }
.paleta-caixa { width: 100%; max-width: 640px; max-height: 72vh; display: flex; flex-direction: column; border-radius: 18px; background: var(--cartao); border: 1px solid var(--borda); box-shadow: 0 40px 100px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255,255,255,.04); overflow: hidden; animation: subir-paleta .18s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes subir-paleta { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.paleta-campo { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; border-bottom: 1px solid var(--linha); color: var(--suave); }
.paleta-campo .icone { width: 20px; height: 20px; }
.paleta-campo input { flex: 1; border: 0; background: transparent; color: var(--texto); font-size: 16.5px; outline: none; min-width: 0; }
.paleta-campo input::placeholder { color: var(--fraco); }
.paleta-campo input::-webkit-search-cancel-button { display: none; }
.paleta-lista { overflow-y: auto; padding: 8px; flex: 1; }
.paleta-grupo + .paleta-grupo { margin-top: 6px; }
.paleta-titulo { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--fraco); padding: 8px 10px 6px; }
.paleta-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--texto); text-align: left; min-height: 50px; }
.paleta-item.marcado { background: var(--item-ativo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--menta-forte) 25%, transparent); }
.paleta-item .avatar { width: 34px; height: 34px; font-size: 12px; }
.paleta-icone { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--etiqueta); color: var(--suave); flex: none; }
.paleta-item.marcado .paleta-icone { color: var(--cor-texto); background: color-mix(in srgb, var(--menta) 18%, var(--etiqueta)); }
.paleta-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.paleta-textos strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-textos span { font-size: 12.5px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-enter { opacity: 0; color: var(--fraco); font-size: 14px; }
.paleta-item.marcado .paleta-enter { opacity: 1; }
.paleta-vazia { display: grid; place-items: center; padding: 30px 10px; }
.paleta-rodape { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--linha); font-size: 12px; color: var(--fraco); background: color-mix(in srgb, var(--etiqueta) 50%, var(--cartao)); }
.paleta-rodape span { display: inline-flex; align-items: center; gap: 4px; }

/* Lista de conversas */
section.lista { background: var(--cartao); border-right: 1px solid var(--linha); }
.lista-cabeca { display: flex; align-items: center; gap: 8px; padding: 16px 16px 10px; }
.lista-cabeca strong { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.contagem { font-size: 11.5px; font-weight: 650; color: var(--suave); background: var(--etiqueta); padding: 1px 8px; border-radius: 999px; }
.lista-cabeca .btn { margin-left: auto; }
.itens { padding: 0 8px 8px; }
.item { border-radius: 12px; border-bottom: 0; margin-bottom: 2px; padding: 10px; }
.item:hover { background: var(--etiqueta); }
.item.ativo { background: var(--item-ativo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--menta-forte) 28%, transparent); }
.item.estado-aguardando:not(.ativo) { background: color-mix(in srgb, var(--alerta-fundo) 55%, transparent); }
.avatar-com-ponto { position: relative; flex: none; display: inline-flex; }
.avatar-com-ponto .avatar { width: 42px; height: 42px; }
.ponto-estado { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--cartao); background: var(--fraco); }
.ponto-estado.estado-jova { background: #1FBF8F; }
.ponto-estado.estado-aguardando { background: #E8962E; }
.ponto-estado.estado-humano { background: #3E7BFA; }
.ponto-estado.estado-finalizada, .ponto-estado.estado-fora { background: #9AA6A2; }
.item .linha1 { font-size: 13.5px; }
.item .ultima { font-size: 12.5px; margin-top: 1px; }

/* Conversa */
main.conversa { background: var(--conversa); background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--texto) 5%, transparent) 1px, transparent 0); background-size: 22px 22px; }
.cabeca { min-height: 64px; padding: 10px 20px; background: color-mix(in srgb, var(--cartao) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.cabeca .avatar.medio { width: 40px; height: 40px; }
.mensagens { padding: 18px 28px 24px; gap: 4px; }
.separador-dia { display: flex; justify-content: center; margin: 14px 0 8px; position: sticky; top: 4px; z-index: 1; }
.separador-dia span { font-size: 11.5px; font-weight: 650; color: var(--suave); background: color-mix(in srgb, var(--cartao) 92%, transparent); border: 1px solid var(--linha); padding: 3px 12px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--sombra-1); }
.msg { max-width: min(72%, 560px); padding: 9px 13px 7px; border-radius: 16px; font-size: 13.8px; line-height: 1.5; box-shadow: 0 1px 1px rgba(16, 32, 28, .06), 0 0 0 1px var(--linha); }
.msg.cliente { border-top-left-radius: 5px; background: var(--msg); }
.msg.jova, .msg.atendente { border-top-right-radius: 5px; box-shadow: 0 1px 1px rgba(16, 32, 28, .06); }
.msg .autor { font-size: 11px; font-weight: 700; letter-spacing: .01em; margin-bottom: 2px; }
.msg .hora { font-size: 10.5px; margin-top: 2px; opacity: .85; }
.msg img, .msg video { border-radius: 11px; }
.msg.nota { border-radius: 12px; }
.escrever { margin: 0 16px 14px; padding: 8px; border: 1px solid var(--borda); border-radius: 18px; background: var(--cartao); box-shadow: 0 10px 30px rgba(16, 32, 28, .08); gap: 6px; }
.escrever textarea { border: 0; background: transparent; min-height: 40px; padding: 10px 8px; box-shadow: none !important; }
.escrever textarea:focus { border: 0; }
.escrever .btn { height: 38px; border-radius: 12px; }
.escrever .btn.icone-so { width: 38px; height: 38px; background: transparent; border-color: transparent; box-shadow: none; color: var(--suave); }
.escrever .btn.icone-so:hover { background: var(--etiqueta); color: var(--texto); }
.escrever.gravando { margin: 0 16px 14px; }
.prontas { background: transparent; padding: 8px 20px 6px; }
.prontas button { background: var(--cartao); box-shadow: var(--sombra-1); }
.anexo { margin: 0 16px 8px; border: 1px solid var(--borda); border-radius: 16px; }
.resumo { border-radius: 12px; margin: 12px 24px 0; }

/* Ficha */
aside.ficha { border-left: 1px solid var(--linha); }

/* Páginas */
.pagina { padding: 28px 32px 40px; }
.pagina.extras, .pagina.config { max-width: 1320px; }
.cartao { border-color: var(--linha); box-shadow: 0 1px 2px rgba(16, 32, 28, .04); }

/* Configurações */
.grade-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.config-cartao { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; }
.destaque-cartao { grid-column: 1 / -1; background: linear-gradient(160deg, color-mix(in srgb, var(--menta) 9%, var(--cartao)), var(--cartao) 50%); }
.config-cabeca { display: flex; gap: 14px; align-items: flex-start; }
.config-cabeca h3 { margin: 0 0 3px; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.config-cabeca p { margin: 0; font-size: 13px; line-height: 1.5; }
.config-cabeca > div { flex: 1; min-width: 0; }
.config-cabeca .pilula { flex: none; }
.config-form { display: flex; gap: 8px; flex-wrap: wrap; }
.config-form .campo-busca { flex: 1 1 320px; }
.config-form .btn { height: 42px; padding: 0 18px; }
.passos summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cor-texto); }
.passos ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--suave); }
.enderecos { display: flex; flex-direction: column; gap: 8px; }
.endereco { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: var(--etiqueta); }
.endereco code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; font-weight: 600; color: var(--texto); }
.config-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.config-dados div { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 10px; background: var(--etiqueta); }
.config-dados strong { font-size: 14px; }
.lateral .btn.fantasma.ativo { color: var(--menta); background: var(--lat-ativo); }

/* Telas menores */
@media (max-width: 1100px) {
  .principal { margin: 0; border-radius: 0; box-shadow: none; }
  header.topo { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 12px; gap: 10px; }
  .titulo-tela { font-size: 15px; }
  .grade-config { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  header.topo { grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 8px 12px 10px; row-gap: 8px; }
  .topo-esq { grid-column: 1; }
  .topo-dir { grid-column: 2; grid-row: 1; }
  .busca-central { grid-column: 1 / -1; grid-row: 2; }
  .busca-central kbd, .texto-wa { display: none; }
  .selo-wa { padding: 0 10px; }
  .mensagens { padding: 14px 12px; }
  .escrever { margin: 0 8px 8px; }
  .msg { max-width: 86%; }
  .paleta { padding-top: 6vh; }
}
@media (prefers-reduced-motion: reduce) {
  .selo-wa.on .ponto-wa, .paleta, .paleta-caixa { animation: none; }
}
.lateral .conta { gap: 6px; padding: 10px 2px 2px 4px; }
.lateral .conta .btn.fantasma { width: 28px; height: 28px; flex: none; }
.lateral .conta .btn.fantasma .icone { width: 16px; height: 16px; }
.quem-sou span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.config-cartao .erro:empty { display: none; } .config-cartao .erro { margin: -4px 0 0; font-size: 13px; }

/* =====================================================================
   Visual 6 "shadcn" (2026-11-02): só no COMPUTADOR (largura acima de 1100px). Paleta neutra zinco,
   lateral clara (#FAFAFA / #171717 no escuro) no estilo "inset" do shadcn/ui: itens de 32px, raio 6px,
   submenu com linha fina, contadores como etiquetas, área principal num cartão de raio 12px separado por 8px.
   Sem brilhos, gradientes nem fundo pontilhado. O verde da marca fica só no destaque (ícone ativo, botão
   principal, foco). Celular e tablet (até 1100px) continuam com o visual anterior.
   ===================================================================== */
@media (min-width: 1101px) {
  :root {
    --fundo: #FFFFFF; --lateral: #FAFAFA; --moldura: #FAFAFA; --cartao: #FFFFFF; --borda: #E4E4E7; --linha: #F4F4F5;
    --texto: #09090B; --suave: #71717A; --fraco: #A1A1AA; --etiqueta: #F4F4F5; --item-ativo: #F4F4F5;
    --conversa: #FFFFFF; --campo: #FFFFFF; --campo-borda: #E4E4E7; --msg: #F4F4F5;
    --balao-jova: #E6F3EF; --balao-equipe: #E8EFFB; --cor: #0D7C66; --cor-escura: #0A6453; --cor-clara: #E6F3EF; --cor-texto: #0A6453;
    --forte: #18181B; --forte-texto: #FAFAFA; --azul: #2F5BD3; --perigo: #DC2626;
    --alerta: #D97706; --alerta-texto: #92400E; --alerta-fundo: #FEF3C7; --resumo-fundo: #FFFBEB; --resumo-borda: #FDE68A;
    --lat-fundo: #FAFAFA; --lat-borda: #E4E4E7; --lat-texto: #09090B; --lat-suave: #71717A; --lat-fraco: #A1A1AA;
    --lat-hover: #F4F4F5; --lat-ativo: #F4F4F5; --menta: #0D7C66; --menta-forte: #0D7C66; --prisma: #0D7C66;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .05); --sombra-2: 0 4px 12px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .06);
    --sombra-folha: 0 0 0 1px var(--borda), 0 1px 2px rgba(0, 0, 0, .04);
    --foco: 0 0 0 3px rgba(13, 124, 102, .28); --folha-raio: 12px; --cor-escura-fixa: #0A6453;
    --ambar-fundo: #FEF3C7; --ambar-texto: #92400E; --ambar-num: #FDE68A; --ambar-num-texto: #78350F;
    letter-spacing: 0;
  }
  :root[data-tema="escuro"] {
    --fundo: #0A0A0A; --lateral: #171717; --moldura: #171717; --cartao: #171717; --borda: #262626; --linha: #1F1F1F;
    --texto: #FAFAFA; --suave: #A1A1AA; --fraco: #737373; --etiqueta: #262626; --item-ativo: #262626;
    --conversa: #0A0A0A; --campo: #171717; --campo-borda: #333333; --msg: #262626;
    --balao-jova: #0F2E27; --balao-equipe: #15213A; --cor: #1F9C80; --cor-escura: #5CCFB3; --cor-clara: #10302A; --cor-texto: #6ED6BC;
    --forte: #FAFAFA; --forte-texto: #0A0A0A; --azul: #8FB0FF; --perigo: #F87171;
    --alerta: #F59E0B; --alerta-texto: #FCD34D; --alerta-fundo: #2A1F0A; --resumo-fundo: #241B08; --resumo-borda: #4A3610;
    --lat-fundo: #171717; --lat-borda: #262626; --lat-texto: #FAFAFA; --lat-suave: #A1A1AA; --lat-fraco: #737373;
    --lat-hover: #262626; --lat-ativo: #262626; --menta: #1F9C80; --menta-forte: #1F9C80; --prisma: #1F9C80;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 4px 12px rgba(0, 0, 0, .4);
    --sombra-folha: 0 0 0 1px var(--borda);
    --foco: 0 0 0 3px rgba(31, 156, 128, .35);
    --ambar-fundo: #2A1F0A; --ambar-texto: #FCD34D; --ambar-num: #F59E0B; --ambar-num-texto: #1C1300;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
      --fundo: #0A0A0A; --lateral: #171717; --moldura: #171717; --cartao: #171717; --borda: #262626; --linha: #1F1F1F;
      --texto: #FAFAFA; --suave: #A1A1AA; --fraco: #737373; --etiqueta: #262626; --item-ativo: #262626;
      --conversa: #0A0A0A; --campo: #171717; --campo-borda: #333333; --msg: #262626;
      --balao-jova: #0F2E27; --balao-equipe: #15213A; --cor: #1F9C80; --cor-escura: #5CCFB3; --cor-clara: #10302A; --cor-texto: #6ED6BC;
      --forte: #FAFAFA; --forte-texto: #0A0A0A; --azul: #8FB0FF; --perigo: #F87171;
      --alerta: #F59E0B; --alerta-texto: #FCD34D; --alerta-fundo: #2A1F0A; --resumo-fundo: #241B08; --resumo-borda: #4A3610;
      --lat-fundo: #171717; --lat-borda: #262626; --lat-texto: #FAFAFA; --lat-suave: #A1A1AA; --lat-fraco: #737373;
      --lat-hover: #262626; --lat-ativo: #262626; --menta: #1F9C80; --menta-forte: #1F9C80; --prisma: #1F9C80;
      --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 4px 12px rgba(0, 0, 0, .4);
      --sombra-folha: 0 0 0 1px var(--borda);
      --foco: 0 0 0 3px rgba(31, 156, 128, .35);
      --ambar-fundo: #2A1F0A; --ambar-texto: #FCD34D; --ambar-num: #F59E0B; --ambar-num-texto: #1C1300;
    }
  }

  /* ---------- Moldura e folha (inset) ---------- */
  html, body, #app, .app { background: var(--moldura); }
  .principal { margin: 8px 8px 8px 0; border-radius: 12px; background: var(--fundo); box-shadow: var(--sombra-folha); }
  .principal::before { display: none; }
  .icone { stroke-width: 1.9; }

  /* ---------- Barra lateral ---------- */
  aside.lateral { width: 256px; padding: 8px; gap: 0; background: var(--lateral); color: var(--texto); border-right: 0; }
  aside.lateral::before { display: none; }
  .lateral .marca { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px; margin: 0 0 4px; border-radius: 8px; }
  .lateral .marca img { width: 32px; height: 32px; border-radius: 8px; box-shadow: none; }
  .lateral .marca strong { color: var(--texto); font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
  .lateral .marca span { color: var(--suave); font-size: 12px; line-height: 1.25; }
  nav.modulos { gap: 0; margin: 0; padding: 4px 0 8px; scrollbar-color: var(--borda) transparent; }
  .rotulo-grupo { display: flex; align-items: center; height: 32px; padding: 0 8px; font-size: 12px; font-weight: 500; color: var(--suave); }
  .grupo-modulo { display: flex; flex-direction: column; gap: 0; }
  .grupo-modulo + .grupo-modulo { margin-top: 2px; }
  .modulo { height: 32px; padding: 0 8px; gap: 8px; border-radius: 6px; font-size: 14px; font-weight: 400; color: var(--texto); box-shadow: none; }
  .modulo .icone { width: 16px; height: 16px; color: var(--suave); }
  .modulo:hover { background: var(--etiqueta); color: var(--texto); }
  .modulo:hover .icone { color: var(--texto); }
  .modulo.ativo { background: var(--etiqueta); color: var(--texto); font-weight: 500; box-shadow: none; }
  .modulo.ativo::before { display: none; }
  .modulo.ativo .icone { color: var(--cor); }
  .modulo.trancado, .modulo.trancado .icone, .modulo .cadeado { color: var(--fraco); }
  .modulo .cadeado .icone { width: 14px; height: 14px; }

  /* Submenu (filas e partes do módulo): linha fina à esquerda, como o SidebarMenuSub */
  .lateral nav.filas { margin: 2px 0 6px 15px; padding: 2px 0 2px 10px; gap: 1px; border-left: 1px solid var(--borda); }
  .lateral nav.filas button { height: 28px; min-height: 28px; padding: 0 8px; border-radius: 6px; font-size: 13.5px; font-weight: 400; color: var(--texto); }
  .lateral nav.filas .rotulo-fila { gap: 8px; }
  .lateral nav.filas .rotulo-fila .icone { width: 15px; height: 15px; color: var(--suave); }
  .lateral nav.filas button:hover { background: var(--etiqueta); color: var(--texto); }
  .lateral nav.filas button.ativa { background: var(--etiqueta); color: var(--texto); font-weight: 500; }
  .lateral nav.filas button.ativa .icone { color: var(--cor); }
  .lateral nav.filas .num { height: 20px; min-width: 20px; padding: 0 5px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--suave); text-align: center; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
  .lateral nav.filas button.ativa .num { color: var(--texto); }
  .lateral nav.filas button.chamando { background: var(--ambar-fundo); color: var(--ambar-texto); font-weight: 500; }
  .lateral nav.filas button.chamando .icone { color: var(--ambar-texto); }
  .lateral nav.filas button.chamando .num { background: var(--ambar-num); color: var(--ambar-num-texto); }
  .lateral nav.filas .separador { padding: 12px 8px 4px; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--suave); }
  .lateral nav.filas button.trancada, .lateral nav.filas button.trancada .icone { color: var(--fraco); }

  /* Rodapé: cartão do usuário */
  .lateral .conta { margin-top: auto; padding: 6px 6px 6px 8px; gap: 6px; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao); box-shadow: var(--sombra-1); }
  .lateral .avatar.pequeno { width: 32px; height: 32px; border-radius: 8px; background: var(--cor); color: #FFFFFF; font-size: 12px; font-weight: 600; }
  .lateral .quem-sou strong { color: var(--texto); font-size: 13px; font-weight: 500; }
  .lateral .quem-sou span { color: var(--suave); font-size: 11.5px; }
  .lateral .conta .btn.fantasma { width: 28px; height: 28px; border-radius: 6px; color: var(--suave); }
  .lateral .conta .btn.fantasma:hover:not(:disabled) { background: var(--etiqueta); color: var(--texto); }
  .lateral .btn.fantasma.ativo { color: var(--cor); background: var(--etiqueta); }

  /* ---------- Topo ---------- */
  header.topo { min-height: 56px; padding: 0 16px; gap: 16px; background: var(--fundo); border-bottom: 1px solid var(--borda); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .titulo-tela { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
  .busca-central { height: 36px; max-width: 460px; margin: 0 auto; padding: 0 6px 0 12px; border-radius: 6px; border: 1px solid var(--borda); background: var(--etiqueta); color: var(--suave); font-size: 13.5px; box-shadow: none; }
  .busca-central:hover { border-color: var(--campo-borda); background: var(--etiqueta); color: var(--texto); box-shadow: none; }
  .busca-central:focus-visible { box-shadow: var(--foco); }
  .busca-central .icone { width: 16px; height: 16px; }
  kbd { font-size: 10.5px; font-weight: 500; color: var(--suave); background: var(--cartao); border: 1px solid var(--borda); border-bottom-width: 1px; border-radius: 4px; padding: 1px 5px; }
  .selo-wa { height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--borda); background: transparent; color: var(--texto); }
  .selo-wa.on { color: var(--texto); border-color: var(--borda); background: transparent; }
  .selo-wa.off { color: var(--perigo); border-color: var(--borda); }
  .selo-wa .ponto-wa { width: 8px; height: 8px; }
  .selo-wa.on .ponto-wa { background: #16A34A; animation: none; box-shadow: none; }
  .selo-wa.off .ponto-wa { background: var(--perigo); }

  /* ---------- Botões, campos, etiquetas ---------- */
  .btn { height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); font-size: 13.5px; font-weight: 500; box-shadow: var(--sombra-1); }
  .btn:hover:not(:disabled) { background: var(--etiqueta); }
  .btn.primario { background: var(--cor); border-color: var(--cor); color: #FFFFFF; box-shadow: var(--sombra-1); }
  .btn.primario:hover:not(:disabled) { background: var(--cor-escura-fixa); border-color: var(--cor-escura-fixa); }
  .btn.escuro, :root[data-tema="escuro"] .btn.escuro { background: var(--forte); border-color: var(--forte); color: var(--forte-texto); box-shadow: var(--sombra-1); }
  .btn.escuro:hover:not(:disabled) { opacity: .9; }
  .btn.perigo { color: var(--perigo); }
  .btn.pequeno { height: 32px; padding: 0 10px; font-size: 13px; border-radius: 6px; }
  .btn.icone-so { width: 36px; height: 36px; padding: 0; }
  .btn.pequeno.icone-so { width: 28px; height: 28px; }
  .btn.fantasma, .btn.fantasma-texto { background: transparent; border-color: transparent; box-shadow: none; }
  .btn.grande { height: 40px; }
  label.campo { font-size: 13px; font-weight: 500; color: var(--texto); }
  label.campo input, label.campo textarea, label.campo select, .extras input[type=search], .contatos input[type=search], .pesquisa-mapa input, .pesquisa-fornecedor input, .busca-lugar, .ligar-maps form input {
    height: 36px; border: 1px solid var(--campo-borda); border-radius: 6px; background: var(--campo); color: var(--texto); font-size: 14px; box-shadow: var(--sombra-1);
  }
  label.campo textarea { height: 110px; }
  label.campo input:focus, label.campo textarea:focus, label.campo select:focus, .extras input:focus, .contatos input:focus, .busca-lugar:focus, .ligar-maps form input:focus { border-color: var(--cor); box-shadow: var(--foco); }
  .campo-busca { height: 40px; border-radius: 6px; border-color: var(--campo-borda); box-shadow: var(--sombra-1); }
  .campo-busca:focus-within { border-color: var(--cor); box-shadow: var(--foco); }
  .pesquisa-fornecedor .btn, .config-form .btn { height: 40px; border-radius: 6px; }
  .etiqueta { border-radius: 6px; font-size: 11.5px; font-weight: 500; padding: 1px 7px; background: var(--etiqueta); color: var(--texto); }
  .contagem { border-radius: 6px; font-size: 11.5px; font-weight: 500; color: var(--texto); background: var(--etiqueta); padding: 1px 7px; }
  .pilula { height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; }
  .pilula.estado-jova { background: var(--cor-clara); color: var(--cor-texto); }
  .pilula.estado-aguardando { background: var(--ambar-fundo); color: var(--ambar-texto); }
  .segmentado, .sub-abas { background: var(--etiqueta); border-radius: 8px; padding: 3px; }
  .segmentado button, .sub-abas button { border-radius: 6px; font-size: 13.5px; font-weight: 500; padding: 5px 12px; }
  .segmentado button.ativo, .sub-abas button.ativa { background: var(--cartao); color: var(--texto); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--borda); }
  .prontas button { border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); border-radius: 6px; font-size: 12.5px; font-weight: 500; box-shadow: var(--sombra-1); }
  .prontas button:hover { background: var(--etiqueta); }

  /* ---------- Cartões, gráficos e tabelas ---------- */
  .cartao, .grafico, .caixa-tabela, .lista-pendencias, .formulario, .lugar, .contato, .fornecedor-novo { border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-1); background: var(--cartao); }
  .cartao.kpi:hover { transform: none; box-shadow: var(--sombra-1); border-color: var(--borda); }
  .kpi-icone { background: var(--etiqueta); color: var(--texto); border-radius: 8px; }
  .cartoes.destaque .cartao:first-child { background: var(--cor); border-color: var(--cor); color: #FFFFFF; }
  .cartoes.destaque .cartao:first-child::after { display: none; }
  .cartoes.destaque .cartao:first-child .kpi-icone { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
  .cartoes.destaque .cartao:first-child .rotulo, .cartoes.destaque .cartao:first-child .comparacao { color: rgba(255, 255, 255, .82); }
  .grafico .barra { background: var(--cor); border-radius: 4px 4px 0 0; }
  .grafico .barra-caixa:hover .barra { background: var(--cor-escura-fixa); }
  .grafico .barra-caixa:hover::after { background: var(--forte); color: var(--forte-texto); border-radius: 6px; }
  .linha-ranking .barra-h, .medidor .barra-h { background: var(--cor); }
  .anel { background: conic-gradient(var(--cor) calc(var(--p) * 1%), var(--etiqueta) 0); }
  .total-grafico { border-radius: 6px; }
  .delta { border-radius: 6px; }
  .resumo-ia { background: var(--etiqueta); border: 1px solid var(--borda); border-radius: 8px; }
  .busca-ia, .destaque-cartao { background: var(--cartao); }
  table.tabela { border-radius: 12px; border-color: var(--borda); font-size: 13.5px; }
  table.tabela th { font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--suave); background: transparent; height: 40px; padding: 0 12px; }
  table.tabela td { padding: 10px 12px; border-bottom-color: var(--borda); }
  table.tabela tr:last-child td { border-bottom: 0; }
  .caixa-tabela { overflow: hidden; }
  .caixa-tabela table.tabela { border: 0; border-radius: 0; }
  .pendencia { border-bottom-color: var(--borda); }
  .pendencia code { border-radius: 4px; }
  .historico-pesquisas button { border-radius: 6px; }
  .historico-pesquisas button.ativa { background: var(--etiqueta); border-color: transparent; box-shadow: none; }
  .endereco, .config-dados div, .ficha-numeros div { border-radius: 8px; }
  .faixa-aviso { background: var(--ambar-fundo); color: var(--ambar-texto); border-color: var(--resumo-borda); border-radius: 8px; }
  .faixa-info { border-radius: 8px; border: 1px solid var(--borda); }
  .documento h3::before { background: var(--cor); }
  .documento li::marker { color: var(--cor); }
  .obra::before { display: none; }
  .robo-obra .olho { fill: var(--cor); }
  .desenho-vazio .destaque { stroke: var(--cor); }
  .selo-obra { background: var(--ambar-fundo); color: var(--ambar-texto); border-radius: 6px; }
  .pagina h2, .extras h2, .titulo-pagina h2, .contatos h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
  .mapa-3d { border-radius: 12px; border-color: var(--borda); }
  .lugar.ativo { border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-clara); }
  .osso { border-radius: 6px; }

  /* ---------- Lista de conversas ---------- */
  section.lista { width: 320px; background: var(--fundo); border-right: 1px solid var(--borda); }
  .lista-cabeca { padding: 14px 16px 8px; }
  .lista-cabeca strong { font-size: 14px; font-weight: 600; }
  .itens { padding: 0 8px 8px; }
  .item { border-radius: 8px; padding: 10px; margin-bottom: 1px; }
  .item:hover { background: var(--etiqueta); }
  .item.ativo { background: var(--etiqueta); box-shadow: none; }
  .item.estado-aguardando:not(.ativo) { background: transparent; }
  .item.estado-aguardando:not(.ativo):hover { background: var(--etiqueta); }
  .item .linha1 { font-size: 13.5px; font-weight: 500; align-items: baseline; }
  .item .linha1 > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .item .ultima { font-size: 12.5px; color: var(--suave); }
  .item .motivo { color: var(--cor-texto); }
  .item .quando.espera { color: var(--alerta-texto); }
  .avatar { background: var(--etiqueta); color: var(--texto); font-weight: 500; }
  .avatar-com-ponto .avatar { width: 40px; height: 40px; border-radius: 8px; }
  .avatar-com-ponto .avatar img { border-radius: 8px; }
  .ponto-estado { border-color: var(--fundo); width: 11px; height: 11px; right: -3px; bottom: -3px; }
  .item.ativo .ponto-estado, .item:hover .ponto-estado { border-color: var(--etiqueta); }
  .ponto-estado.estado-jova { background: #16A34A; }
  .ponto-estado.estado-aguardando { background: #F59E0B; }
  .ponto-estado.estado-humano { background: #3B82F6; }
  .ponto-estado.estado-finalizada, .ponto-estado.estado-fora { background: var(--fraco); }

  /* ---------- Conversa ---------- */
  main.conversa { background: var(--conversa); background-image: none; }
  .cabeca { min-height: 56px; padding: 8px 16px; background: var(--fundo); border-bottom: 1px solid var(--borda); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cabeca .avatar.medio { width: 36px; height: 36px; border-radius: 8px; }
  .cabeca .avatar.medio img { border-radius: 8px; }
  .cabeca .quem strong { font-size: 14px; font-weight: 600; }
  .cabeca .quem span { font-size: 12.5px; }
  .cabeca .btn { height: 32px; padding: 0 10px; font-size: 13px; }
  .cabeca .btn.voltar { width: 32px; padding: 0; }
  .mensagens { padding: 20px 24px; gap: 6px; }
  .separador-dia span { font-size: 11.5px; font-weight: 500; color: var(--suave); background: var(--fundo); border: 1px solid var(--borda); border-radius: 6px; padding: 2px 10px; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .msg { max-width: min(70%, 560px); padding: 8px 12px; border-radius: 10px; font-size: 14px; line-height: 1.5; box-shadow: none; border: 1px solid transparent; }
  .msg.cliente { background: var(--msg); border-color: transparent; border-top-left-radius: 10px; }
  .msg.jova, :root[data-tema="escuro"] .msg.jova { background: var(--balao-jova); border-top-right-radius: 10px; box-shadow: none; }
  .msg.atendente, :root[data-tema="escuro"] .msg.atendente { background: var(--balao-equipe); border-top-right-radius: 10px; box-shadow: none; }
  .msg.nota { border-radius: 10px; border: 1px dashed var(--resumo-borda); background: var(--resumo-fundo); }
  .msg.sistema { border-radius: 6px; background: var(--etiqueta); color: var(--suave); font-weight: 500; }
  .msg .autor { font-size: 11.5px; font-weight: 600; color: var(--cor-texto); }
  .msg.atendente .autor { color: var(--azul); }
  .msg .hora { font-size: 11px; color: var(--suave); opacity: 1; }
  .msg img, .msg video { border-radius: 8px; }
  .resumo { border-radius: 8px; margin: 12px 24px 0; background: var(--resumo-fundo); border-color: var(--resumo-borda); }
  .resumo strong { color: var(--ambar-texto); }
  .escrever { margin: 0 16px 16px; padding: 6px 6px 6px 8px; border: 1px solid var(--borda); border-radius: 10px; background: var(--cartao); box-shadow: var(--sombra-1); gap: 4px; }
  .escrever:focus-within { border-color: var(--cor); box-shadow: var(--foco); }
  .escrever textarea { border-radius: 6px; font-size: 14px; padding: 9px 6px; }
  .escrever .btn { height: 34px; border-radius: 6px; }
  .escrever .btn.icone-so { width: 34px; height: 34px; }
  .escrever.gravando { margin: 0 16px 16px; }
  .prontas { padding: 8px 16px 4px; }
  .anexo { margin: 0 16px 8px; border-radius: 10px; }

  /* ---------- Ficha do cliente ---------- */
  aside.ficha { width: 280px; padding: 20px; background: var(--fundo); border-left: 1px solid var(--borda); gap: 16px; }
  .ficha-topo { border-bottom-color: var(--borda); }
  .avatar.grande { border-radius: 14px; box-shadow: 0 0 0 1px var(--borda); background: var(--etiqueta); color: var(--texto); font-weight: 600; }
  .avatar.grande img { border-radius: 14px; }
  .ficha-topo strong { font-size: 15px; font-weight: 600; }
  .ficha-numeros div { background: var(--etiqueta); }
  .ficha-numeros strong { font-weight: 600; }
  .linha-ficha > .icone { color: var(--suave); }
  .fechar-ficha { top: 10px; right: 10px; }

  /* ---------- Paleta de busca (Ctrl+K) ---------- */
  .paleta { background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: 14vh; }
  .paleta-caixa { max-width: 600px; border-radius: 12px; border: 1px solid var(--borda); background: var(--cartao); box-shadow: 0 16px 48px rgba(0, 0, 0, .25); }
  .paleta-campo { height: 48px; padding: 0 14px; gap: 10px; border-bottom-color: var(--borda); }
  .paleta-campo .icone { width: 16px; height: 16px; }
  .paleta-campo input { font-size: 14.5px; }
  .paleta-campo input:focus-visible { box-shadow: none; }
  .paleta-lista { padding: 6px; }
  .paleta-titulo { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--suave); padding: 8px 8px 4px; }
  .paleta-item { min-height: 40px; padding: 6px 8px; border-radius: 6px; gap: 10px; }
  .paleta-item.marcado { background: var(--etiqueta); box-shadow: none; }
  .paleta-item .avatar { width: 28px; height: 28px; border-radius: 6px; font-size: 11px; }
  .paleta-icone { width: 28px; height: 28px; border-radius: 6px; background: transparent; color: var(--suave); }
  .paleta-item.marcado .paleta-icone { background: transparent; color: var(--texto); }
  .paleta-textos strong { font-size: 13.5px; font-weight: 500; }
  .paleta-textos span { font-size: 12px; }
  .paleta-rodape { background: var(--etiqueta); border-top-color: var(--borda); padding: 8px 14px; }

  /* ---------- Páginas ---------- */
  .pagina { padding: 24px 28px 36px; }
  .pagina.solucoes { padding: 24px 28px 36px; }
  .documento { padding: 24px 28px 28px; }
  .config-cartao { padding: 18px 20px; }
  .config-cabeca h3 { font-weight: 600; }
  .busca-ia { padding: 20px 22px; }
  .modulo-vazio .cartao { box-shadow: var(--sombra-1); }
  .delta.bom { background: #DCFCE7; color: #166534; }
  .delta.ruim { background: #FEE2E2; color: #991B1B; }
  :root[data-tema="escuro"] .delta.bom { background: #14532D; color: #86EFAC; }
  :root[data-tema="escuro"] .delta.ruim { background: #7F1D1D; color: #FCA5A5; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .msg.jova { background: var(--balao-jova); }
    :root:not([data-tema="claro"]) .msg.atendente { background: var(--balao-equipe); }
    :root:not([data-tema="claro"]) .btn.escuro { background: var(--forte); border-color: var(--forte); color: var(--forte-texto); }
    :root:not([data-tema="claro"]) .delta.bom { background: #14532D; color: #86EFAC; }
    :root:not([data-tema="claro"]) .delta.ruim { background: #7F1D1D; color: #FCA5A5; }
  }
}
/* Fora do computador o rótulo de grupo da lateral não aparece (o celular continua com o visual anterior) */
@media (max-width: 1100px) { .rotulo-grupo { display: none; } }
/* Cabeçalho da conversa numa linha só (com a ficha aberta os botões quebravam em duas linhas) */
@media (min-width: 1101px) {
  .cabeca { flex-wrap: nowrap; gap: 6px; }
  .cabeca .quem { flex: 1 1 0; min-width: 0; }
  .cabeca .quem > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cabeca .btn { flex: none; padding: 0 10px; font-size: 13px; }
}

/* =====================================================================
   Visual 7 — modelo C "WhatsApp moderno e amigável" (2026-11-02), escolhido pelo Luis ("o C, mas no modo
   ESCURO fica mais legal"). Só no COMPUTADOR (acima de 1100px); celular e tablet continuam com o visual anterior.
   Cantos de 20px, folhas flutuando numa moldura, lateral com os ícones dos módulos em quadradinhos coloridos
   (uma cor por módulo, pelo data-modulo do botão), faixa "resumo do dia" com saudação e cartões das filas,
   lista com avatares grandes e etiquetas pastel, conversa com papel de parede estilo WhatsApp e balões com
   "rabinho", botão de enviar redondo verde. Tema ESCURO é o padrão (tema.js): fundo grafite-azulado profundo
   (#0B1014 / #111B21, como o WhatsApp escuro), folhas com leve elevação, balões do Jova #005C4B, do cliente
   #202C33 e da equipe azul-escuro, contraste AA. Tudo por variáveis: as regras valem para os dois temas; só os
   blocos de variáveis mudam. (Google Fonts é bloqueado pela CSP do painel: segue com a Inter.)
   ===================================================================== */
.resumo-dia { display: none; } /* a faixa do dia só existe no computador */
@media (min-width: 1101px) {
  :root {
    --fundo: #FFFFFF; --moldura: #EEF2F6; --lateral: #FFFFFF; --cartao: #FFFFFF; --borda: #E3E8EE; --linha: #EEF1F5;
    --texto: #111B21; --suave: #667781; --fraco: #9AA6AE; --etiqueta: #F0F3F7; --etiqueta-forte: #E4E9EE; --item-ativo: #E7F8EF;
    --conversa: #E7F0E9; --campo: #FFFFFF; --campo-borda: #DEE4EA; --msg: #FFFFFF;
    --balao-cliente: #FFFFFF; --balao-cliente-texto: #111B21; --balao-jova: #D9FDD3; --balao-jova-texto: #0B2A1C; --balao-equipe: #DCEBFF; --balao-equipe-texto: #0B1F3A;
    --balao-sombra: 0 1px 1.5px rgba(17, 27, 33, .12); --autor-jova: #128C7E; --autor-equipe: #1D4ED8; --hora: #667781;
    --sistema-fundo: rgba(255, 255, 255, .9); --nota-fundo: #FFF8E8; --nota-borda: #FFE2A6;
    --zap: #25D366; --zap-hover: #1FC45C; --zap-escuro: #128C7E; --zap-pastel: #E7F8EF; --zap-texto: #0B6B4F; --zap-sobre: #FFFFFF;
    --cor: #1DAA5A; --cor-escura: #128C7E; --cor-clara: #E7F8EF; --cor-texto: #0B6B4F; --cor-escura-fixa: #169C50;
    --menta: #1DAA5A; --menta-forte: #128C7E; --prisma: #1DAA5A;
    --azul: #2E6BF0; --azul-fundo: #E8F0FF; --azul-texto: #1D4ED8;
    --ambar: #F59E0B; --ambar-fundo: #FFF3DB; --ambar-texto: #9A5B00; --ambar-num: #FFB020; --ambar-num-texto: #3B1F00;
    --alerta: #D97706; --alerta-texto: #9A5B00; --alerta-fundo: #FFF3DB; --resumo-fundo: #FFF8E8; --resumo-borda: #FFE2A6;
    --roxo-fundo: #F0E9FF; --roxo-texto: #6D28D9; --rosa-fundo: #FFE9F0; --rosa-texto: #BE185D; --laranja-fundo: #FFEDE0; --laranja-texto: #C2410C; --ciano-fundo: #E0F7FA; --ciano-texto: #0E7490;
    --perigo: #C0392B; --perigo-fundo: #FFF0EE; --perigo-fundo-hover: #FFE2DE;
    --forte: #25D366; --forte-texto: #FFFFFF; --folha-raio: 20px; --folha-borda: #FFFFFF;
    --sombra-1: 0 1px 2px rgba(17, 27, 33, .04); --sombra-2: 0 10px 30px rgba(17, 27, 33, .08);
    --sombra-folha: 0 2px 4px rgba(17, 27, 33, .03), 0 20px 60px rgba(37, 211, 102, .10);
    --sombra-escrever: 0 12px 30px rgba(17, 27, 33, .10); --sombra-enviar: 0 8px 20px rgba(37, 211, 102, .4);
    --sombra-marca: 0 6px 16px rgba(37, 211, 102, .25); --sombra-icone-ativo: 0 6px 14px rgba(29, 170, 90, .35);
    --foco: 0 0 0 4px rgba(37, 211, 102, .22); --veu-paleta: rgba(17, 27, 33, .45);
    --anel-avatar: #FFFFFF; --delta-bom-fundo: #DCFCE7; --delta-bom-texto: #166534; --delta-ruim-fundo: #FEE2E2; --delta-ruim-texto: #991B1B;
    --av1-fundo: #E7F8EF; --av1-texto: #0B6B4F; --av2-fundo: #FFF3DB; --av2-texto: #9A5B00; --av3-fundo: #F0E9FF; --av3-texto: #6D28D9; --av4-fundo: #FFE9F0; --av4-texto: #BE185D;
    --mod-cinza: #94A3B8;
    --mod-atendimento: linear-gradient(135deg, #34E27A, #1DAA5A); --mod-mercadolivre: linear-gradient(135deg, #FFD54F, #F5A623);
    --mod-produtos: linear-gradient(135deg, #B388FF, #7C3AED); --mod-fornecedores: linear-gradient(135deg, #5B9DFF, #2E6BF0);
    --mod-relatorios: linear-gradient(135deg, #FF8FB1, #E0356E); --mod-solucoes: linear-gradient(135deg, #FFB46B, #F0762E); --mod-evolucao: linear-gradient(135deg, #4DD0E1, #0E8FA3);
    --grad-conta: linear-gradient(135deg, #34E27A, #128C7E); --selo-off-fundo: #FFE9E7; --selo-off-texto: #C0392B; --destaque-kpi: #128C7E;
    letter-spacing: 0;
  }
  :root[data-tema="escuro"] {
    --fundo: #111B21; --moldura: #0B1014; --lateral: #121C23; --cartao: #1A252D; --borda: #26343D; --linha: #1F2B33;
    --texto: #E9EDEF; --suave: #8E9DA6; --fraco: #667781; --etiqueta: #202C33; --etiqueta-forte: #2A3942; --item-ativo: #15302A;
    --conversa: #0B141A; --campo: #202C33; --campo-borda: #33434D; --msg: #202C33;
    --balao-cliente: #202C33; --balao-cliente-texto: #E9EDEF; --balao-jova: #005C4B; --balao-jova-texto: #E9FFF4; --balao-equipe: #1F3B63; --balao-equipe-texto: #E6F0FF;
    --balao-sombra: 0 1px 1.5px rgba(0, 0, 0, .35); --autor-jova: #7FE3B4; --autor-equipe: #A9C6FF; --hora: rgba(233, 237, 239, .62);
    --sistema-fundo: rgba(26, 37, 45, .92); --nota-fundo: #2B2412; --nota-borda: #5A4A1E;
    --zap: #00A884; --zap-hover: #06BF98; --zap-escuro: #7FE3B4; --zap-pastel: #0F2E26; --zap-texto: #6EE7A8; --zap-sobre: #04211B;
    --cor: #00A884; --cor-escura: #6EE7A8; --cor-clara: #0F2E26; --cor-texto: #6EE7A8; --cor-escura-fixa: #06BF98;
    --menta: #00A884; --menta-forte: #6EE7A8; --prisma: #00A884;
    --azul: #5B9DFF; --azul-fundo: #182C48; --azul-texto: #9DBEFF;
    --ambar: #F5B22B; --ambar-fundo: #3A2A0E; --ambar-texto: #FCD34D; --ambar-num: #F5B22B; --ambar-num-texto: #2A1A00;
    --alerta: #F5B22B; --alerta-texto: #FCD34D; --alerta-fundo: #3A2A0E; --resumo-fundo: #2B2412; --resumo-borda: #5A4A1E;
    --roxo-fundo: #2B2150; --roxo-texto: #C9B8FF; --rosa-fundo: #40192B; --rosa-texto: #FBA7CF; --laranja-fundo: #40230F; --laranja-texto: #FDB97A; --ciano-fundo: #0E2F36; --ciano-texto: #7BE4F5;
    --perigo: #FF8A80; --perigo-fundo: #3C1E1C; --perigo-fundo-hover: #4B2522;
    --forte: #00A884; --forte-texto: #04211B; --folha-raio: 20px; --folha-borda: rgba(255, 255, 255, .055);
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 10px 30px rgba(0, 0, 0, .35);
    --sombra-folha: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 2px 4px rgba(0, 0, 0, .25), 0 24px 60px rgba(0, 0, 0, .45);
    --sombra-escrever: 0 12px 30px rgba(0, 0, 0, .4); --sombra-enviar: 0 8px 20px rgba(0, 168, 132, .4);
    --sombra-marca: 0 6px 16px rgba(0, 168, 132, .3); --sombra-icone-ativo: 0 6px 14px rgba(0, 168, 132, .35);
    --foco: 0 0 0 4px rgba(0, 168, 132, .3); --veu-paleta: rgba(5, 9, 12, .7);
    --anel-avatar: #111B21; --delta-bom-fundo: #0F2E26; --delta-bom-texto: #6EE7A8; --delta-ruim-fundo: #3C1E1C; --delta-ruim-texto: #FF8A80;
    --av1-fundo: #0F2E26; --av1-texto: #6EE7A8; --av2-fundo: #3A2A0E; --av2-texto: #FCD34D; --av3-fundo: #2B2150; --av3-texto: #C9B8FF; --av4-fundo: #40192B; --av4-texto: #FBA7CF;
    --mod-cinza: #4C5C66;
    --mod-atendimento: linear-gradient(135deg, #2FD37A, #0E9C5E); --mod-mercadolivre: linear-gradient(135deg, #F7C948, #D98A12);
    --mod-produtos: linear-gradient(135deg, #A47CFF, #6A2FD6); --mod-fornecedores: linear-gradient(135deg, #4F93FF, #2458D1);
    --mod-relatorios: linear-gradient(135deg, #FF7FA6, #C72A5E); --mod-solucoes: linear-gradient(135deg, #FFA45C, #D6621F); --mod-evolucao: linear-gradient(135deg, #3FC6D8, #0B7A8C);
    --grad-conta: linear-gradient(135deg, #2FD37A, #0E7F6B); --selo-off-fundo: #3C1E1C; --selo-off-texto: #FF8A80; --destaque-kpi: #005C4B;
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
      --fundo: #111B21; --moldura: #0B1014; --lateral: #121C23; --cartao: #1A252D; --borda: #26343D; --linha: #1F2B33;
      --texto: #E9EDEF; --suave: #8E9DA6; --fraco: #667781; --etiqueta: #202C33; --etiqueta-forte: #2A3942; --item-ativo: #15302A;
      --conversa: #0B141A; --campo: #202C33; --campo-borda: #33434D; --msg: #202C33;
      --balao-cliente: #202C33; --balao-cliente-texto: #E9EDEF; --balao-jova: #005C4B; --balao-jova-texto: #E9FFF4; --balao-equipe: #1F3B63; --balao-equipe-texto: #E6F0FF;
      --balao-sombra: 0 1px 1.5px rgba(0, 0, 0, .35); --autor-jova: #7FE3B4; --autor-equipe: #A9C6FF; --hora: rgba(233, 237, 239, .62);
      --sistema-fundo: rgba(26, 37, 45, .92); --nota-fundo: #2B2412; --nota-borda: #5A4A1E;
      --zap: #00A884; --zap-hover: #06BF98; --zap-escuro: #7FE3B4; --zap-pastel: #0F2E26; --zap-texto: #6EE7A8; --zap-sobre: #04211B;
      --cor: #00A884; --cor-escura: #6EE7A8; --cor-clara: #0F2E26; --cor-texto: #6EE7A8; --cor-escura-fixa: #06BF98;
      --menta: #00A884; --menta-forte: #6EE7A8; --prisma: #00A884;
      --azul: #5B9DFF; --azul-fundo: #182C48; --azul-texto: #9DBEFF;
      --ambar: #F5B22B; --ambar-fundo: #3A2A0E; --ambar-texto: #FCD34D; --ambar-num: #F5B22B; --ambar-num-texto: #2A1A00;
      --alerta: #F5B22B; --alerta-texto: #FCD34D; --alerta-fundo: #3A2A0E; --resumo-fundo: #2B2412; --resumo-borda: #5A4A1E;
      --roxo-fundo: #2B2150; --roxo-texto: #C9B8FF; --rosa-fundo: #40192B; --rosa-texto: #FBA7CF; --laranja-fundo: #40230F; --laranja-texto: #FDB97A; --ciano-fundo: #0E2F36; --ciano-texto: #7BE4F5;
      --perigo: #FF8A80; --perigo-fundo: #3C1E1C; --perigo-fundo-hover: #4B2522;
      --forte: #00A884; --forte-texto: #04211B; --folha-raio: 20px; --folha-borda: rgba(255, 255, 255, .055);
      --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 10px 30px rgba(0, 0, 0, .35);
      --sombra-folha: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 2px 4px rgba(0, 0, 0, .25), 0 24px 60px rgba(0, 0, 0, .45);
      --sombra-escrever: 0 12px 30px rgba(0, 0, 0, .4); --sombra-enviar: 0 8px 20px rgba(0, 168, 132, .4);
      --sombra-marca: 0 6px 16px rgba(0, 168, 132, .3); --sombra-icone-ativo: 0 6px 14px rgba(0, 168, 132, .35);
      --foco: 0 0 0 4px rgba(0, 168, 132, .3); --veu-paleta: rgba(5, 9, 12, .7);
      --anel-avatar: #111B21; --delta-bom-fundo: #0F2E26; --delta-bom-texto: #6EE7A8; --delta-ruim-fundo: #3C1E1C; --delta-ruim-texto: #FF8A80;
      --av1-fundo: #0F2E26; --av1-texto: #6EE7A8; --av2-fundo: #3A2A0E; --av2-texto: #FCD34D; --av3-fundo: #2B2150; --av3-texto: #C9B8FF; --av4-fundo: #40192B; --av4-texto: #FBA7CF;
      --mod-cinza: #4C5C66;
      --mod-atendimento: linear-gradient(135deg, #2FD37A, #0E9C5E); --mod-mercadolivre: linear-gradient(135deg, #F7C948, #D98A12);
      --mod-produtos: linear-gradient(135deg, #A47CFF, #6A2FD6); --mod-fornecedores: linear-gradient(135deg, #4F93FF, #2458D1);
      --mod-relatorios: linear-gradient(135deg, #FF7FA6, #C72A5E); --mod-solucoes: linear-gradient(135deg, #FFA45C, #D6621F); --mod-evolucao: linear-gradient(135deg, #3FC6D8, #0B7A8C);
      --grad-conta: linear-gradient(135deg, #2FD37A, #0E7F6B); --selo-off-fundo: #3C1E1C; --selo-off-texto: #FF8A80; --destaque-kpi: #005C4B;
      color-scheme: dark;
    }
  }

  /* No computador a ficha fica sempre aberta: esconde "voltar", "Ficha" e o "x" (no estilo.css o .btn ganhava deles) */
  .cabeca .btn.voltar, .cabeca .btn.so-pequena, .fechar-ficha.so-pequena { display: none; }

  /* ---------- Moldura: tudo flutuando em folhas de cantos 20px ---------- */
  html, body, #app, .app { background: var(--moldura); }
  .app { gap: 0; padding: 12px; box-sizing: border-box; }
  aside.lateral { margin-right: 12px; border-radius: 20px; }
  .principal { margin: 0; border-radius: 20px; background: var(--fundo); box-shadow: var(--sombra-folha); border: 1px solid var(--folha-borda); overflow: hidden; }
  .principal::before, aside.lateral::before { display: none; }

  /* ---------- Lateral com ícones em quadradinhos coloridos ---------- */
  aside.lateral { width: 256px; padding: 16px 12px 12px; background: var(--lateral); color: var(--texto); box-shadow: var(--sombra-folha); border: 1px solid var(--folha-borda); }
  .lateral .marca { height: 48px; padding: 0 6px; margin: 0 0 6px; }
  .lateral .marca img { width: 38px; height: 38px; border-radius: 12px; background: var(--cartao); box-shadow: var(--sombra-marca); }
  .lateral .marca strong { color: var(--texto); font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
  .lateral .marca span { color: var(--suave); font-size: 12px; }
  .rotulo-grupo { color: var(--fraco); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 0 10px; height: 28px; }
  .modulo { height: 38px; padding: 0 6px; gap: 10px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--suave); transition: background .15s, color .15s; }
  .modulo .icone { box-sizing: border-box; width: 28px; height: 28px; padding: 6.5px; border-radius: 8px; color: #FFFFFF; stroke-width: 2.1; background: var(--mod-cinza); flex: none; }
  .modulo:hover { background: var(--etiqueta); color: var(--texto); }
  .modulo:hover .icone { color: #FFFFFF; }
  .modulo.ativo { background: var(--zap-pastel); color: var(--zap-texto); font-weight: 700; }
  .modulo.ativo:hover { background: var(--zap-pastel); }
  .modulo.ativo::before { display: none; }
  /* uma cor por módulo (data-modulo vem do app.js, não depende da ordem das abas) */
  .modulo[data-modulo="atendimento"] .icone { background: var(--mod-atendimento); }
  .modulo[data-modulo="mercadolivre"] .icone { background: var(--mod-mercadolivre); }
  .modulo[data-modulo="produtos"] .icone { background: var(--mod-produtos); }
  .modulo[data-modulo="fornecedores"] .icone { background: var(--mod-fornecedores); }
  .modulo[data-modulo="relatorios"] .icone { background: var(--mod-relatorios); }
  .modulo[data-modulo="solucoes"] .icone { background: var(--mod-solucoes); }
  .modulo[data-modulo="evolucao"] .icone { background: var(--mod-evolucao); }
  .modulo.ativo .icone, .modulo.ativo:hover .icone { color: #FFFFFF; box-shadow: var(--sombra-icone-ativo); }
  .modulo.trancado { color: var(--fraco); }
  .modulo.trancado .icone { opacity: .5; }
  .modulo .cadeado { color: var(--fraco); }
  .modulo .cadeado .icone { width: 14px; height: 14px; padding: 0; background: none !important; color: var(--fraco); box-shadow: none; opacity: 1; }
  .grupo-modulo + .grupo-modulo { margin-top: 2px; }
  .lateral nav.filas { margin: 4px 0 8px 18px; padding: 2px 0 2px 10px; gap: 2px; border-left: 2px solid var(--zap-pastel); }
  .lateral nav.filas button { height: 31px; min-height: 31px; padding: 0 8px 0 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--suave); }
  .lateral nav.filas .rotulo-fila .icone { color: var(--fraco); }
  .lateral nav.filas button:hover { background: var(--etiqueta); color: var(--texto); }
  .lateral nav.filas button.ativa { background: var(--zap-pastel); color: var(--zap-texto); font-weight: 700; }
  .lateral nav.filas button.ativa .icone { color: var(--zap-texto); }
  .lateral nav.filas .num { height: 20px; min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--etiqueta); color: var(--suave); font-size: 11.5px; font-weight: 700; }
  .lateral nav.filas button.ativa .num { background: var(--cartao); color: var(--zap-texto); }
  .lateral nav.filas button.chamando { background: var(--ambar-fundo); color: var(--ambar-texto); font-weight: 700; }
  .lateral nav.filas button.chamando .icone { color: var(--ambar-texto); }
  .lateral nav.filas button.chamando .num { background: var(--ambar-num); color: var(--ambar-num-texto); }
  .lateral nav.filas .separador { color: var(--fraco); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px 2px; }
  .lateral nav.filas button.trancada, .lateral nav.filas button.trancada .icone { color: var(--fraco); }
  .lateral .conta { padding: 8px; gap: 6px; border: 0; border-radius: 16px; background: var(--etiqueta); box-shadow: none; }
  .lateral .avatar.pequeno { width: 36px; height: 36px; border-radius: 50%; background: var(--grad-conta); color: #FFFFFF; font-weight: 700; }
  .lateral .quem-sou strong { color: var(--texto); font-weight: 700; }
  .lateral .quem-sou span { color: var(--suave); }
  .lateral .conta .btn.fantasma { width: 26px; height: 26px; border-radius: 8px; color: var(--suave); }
  .lateral .conta .btn.fantasma:hover:not(:disabled) { background: var(--cartao); color: var(--texto); }
  .lateral .btn.fantasma.ativo { color: var(--zap-texto); background: var(--cartao); }

  /* ---------- Topo ---------- */
  header.topo { min-height: 68px; padding: 0 24px; background: var(--fundo); border-bottom: 1px solid var(--linha); }
  .titulo-tela { font-size: 20px; font-weight: 800; letter-spacing: -.025em; }
  .busca-central { height: 42px; max-width: 480px; border-radius: 999px; border: 0; background: var(--etiqueta); color: var(--suave); padding: 0 8px 0 16px; box-shadow: none; }
  .busca-central:hover { background: var(--etiqueta-forte); border-color: transparent; color: var(--texto); box-shadow: none; }
  .busca-central .icone { color: var(--cor); }
  kbd { border-radius: 999px; background: var(--cartao); border: 1px solid var(--borda); padding: 2px 8px; color: var(--suave); }
  .selo-wa { height: 34px; padding: 0 14px 0 10px; border-radius: 999px; border: 0; background: var(--zap-pastel); color: var(--zap-texto); font-weight: 700; }
  .selo-wa.on { background: var(--zap-pastel); color: var(--zap-texto); border: 0; }
  .selo-wa.on .ponto-wa { background: var(--zap); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zap) 25%, transparent); }
  .selo-wa.off { background: var(--selo-off-fundo); color: var(--selo-off-texto); border: 0; }
  .selo-wa.off .ponto-wa { background: var(--selo-off-texto); }

  /* ---------- Resumo do dia: saudação + cartões das filas (montado pelo app.js, números reais do servidor) ---------- */
  .resumo-dia { display: flex; align-items: center; gap: 24px; padding: 18px 24px 16px; border-bottom: 1px solid var(--linha); background: var(--fundo); }
  .rd-saudacao { display: flex; flex-direction: column; gap: 3px; min-width: 210px; }
  .rd-saudacao strong { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--texto); }
  .rd-saudacao > span { font-size: 13px; color: var(--suave); font-weight: 500; }
  .rd-aceno { display: inline-block; font-weight: 400; animation: v7-aceno 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
  @keyframes v7-aceno { 0%, 60%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
  .rd-cartoes { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .rd-cartao { display: flex; align-items: center; gap: 10px; height: 62px; padding: 0 12px; border: 0; border-radius: 18px; text-align: left; color: inherit; font: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
  .rd-cartao:hover { transform: translateY(-2px); }
  .rd-cartao.fixo { cursor: default; }
  .rd-cartao.fixo:hover { transform: none; box-shadow: none; }
  .rd-icone { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--cartao); }
  .rd-icone .icone { width: 18px; height: 18px; stroke-width: 2; }
  .rd-textos { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
  .rd-num { font-size: 21px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .rd-rotulo { font-size: 11.5px; font-weight: 600; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rd-cartao.ambar { background: var(--ambar-fundo); color: var(--ambar-texto); } .rd-cartao.ambar:hover { box-shadow: 0 10px 24px rgba(245, 158, 11, .22); }
  .rd-cartao.azul { background: var(--azul-fundo); color: var(--azul-texto); } .rd-cartao.azul:hover { box-shadow: 0 10px 24px rgba(46, 107, 240, .2); }
  .rd-cartao.verde { background: var(--zap-pastel); color: var(--zap-texto); } .rd-cartao.verde:hover { box-shadow: 0 10px 24px rgba(37, 211, 102, .22); }
  .rd-cartao.roxo { background: var(--roxo-fundo); color: var(--roxo-texto); }
  .rd-cartao.cinza { background: var(--etiqueta); color: var(--texto); }
  .rd-cartao.cinza .rd-rotulo { color: var(--suave); opacity: 1; }
  @media (max-width: 1380px) { .rd-saudacao { min-width: 170px; } .rd-saudacao strong { font-size: 19px; } .rd-cartao { padding: 0 10px; gap: 8px; } .rd-icone { width: 34px; height: 34px; } .rd-num { font-size: 19px; } }

  /* ---------- Botões, campos, etiquetas ---------- */
  .btn { height: 38px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--etiqueta); color: var(--texto); font-weight: 700; box-shadow: none; }
  .btn:hover:not(:disabled) { background: var(--etiqueta-forte); }
  .btn.primario { background: var(--zap); border-color: var(--zap); color: var(--zap-sobre); box-shadow: 0 8px 20px color-mix(in srgb, var(--zap) 32%, transparent); }
  .btn.primario:hover:not(:disabled) { background: var(--zap-hover); border-color: var(--zap-hover); }
  .btn.escuro, :root[data-tema="escuro"] .btn.escuro { background: var(--zap); border-color: var(--zap); color: var(--zap-sobre); box-shadow: none; }
  .btn.escuro:hover:not(:disabled) { background: var(--zap-hover); opacity: 1; }
  .btn.pequeno { height: 32px; border-radius: 999px; }
  .btn.icone-so { border-radius: 999px; }
  .btn.perigo { color: var(--perigo); background: var(--perigo-fundo); }
  .btn.perigo:hover:not(:disabled) { background: var(--perigo-fundo-hover); }
  .btn.fantasma, .btn.fantasma-texto { background: transparent; }
  .btn.fantasma:hover:not(:disabled), .btn.fantasma-texto:hover:not(:disabled) { background: var(--etiqueta); }
  .etiqueta, .contagem { border-radius: 999px; font-weight: 700; }
  .contagem { background: var(--zap-pastel); color: var(--zap-texto); }
  label.campo input, label.campo textarea, label.campo select, .extras input[type=search], .contatos input[type=search], .pesquisa-mapa input, .pesquisa-fornecedor input, .busca-lugar, .ligar-maps form input { border-radius: 12px; border-color: var(--campo-borda); background: var(--campo); box-shadow: none; }
  label.campo textarea { border-radius: 14px; }
  .campo-busca { border-radius: 999px; border-color: var(--campo-borda); box-shadow: none; }
  .pesquisa-fornecedor .btn, .config-form .btn { border-radius: 999px; }
  .segmentado, .sub-abas { background: var(--etiqueta); border-radius: 999px; padding: 3px; }
  .segmentado button, .sub-abas button { border-radius: 999px; font-weight: 700; color: var(--suave); }
  .segmentado button.ativo, .sub-abas button.ativa { background: var(--cartao); color: var(--texto); box-shadow: var(--sombra-1); }
  .pilula { height: 26px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
  .pilula.estado-jova { background: var(--zap-pastel); color: var(--zap-texto); }
  .pilula.estado-aguardando { background: var(--ambar-fundo); color: var(--ambar-texto); }
  .pilula.estado-humano { background: var(--azul-fundo); color: var(--azul-texto); }

  /* ---------- Lista de conversas: avatares grandes, etiquetas pastel ---------- */
  section.lista { width: 312px; background: var(--fundo); border-right: 1px solid var(--linha); }
  .lista-cabeca { padding: 16px 20px 10px; }
  .lista-cabeca strong { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
  .itens { padding: 0 10px 10px; }
  .item { padding: 12px; border-radius: 18px; margin-bottom: 2px; gap: 14px; transition: background .15s, box-shadow .15s; }
  .item:hover { background: var(--etiqueta); }
  .item.ativo { background: var(--zap-pastel); box-shadow: none; }
  .item.estado-aguardando:not(.ativo) { background: transparent; }
  .item.estado-aguardando:not(.ativo):hover { background: var(--etiqueta); }
  .item .linha1 { font-size: 14.5px; font-weight: 700; }
  .item .linha1 > span:first-child { flex: 1 1 auto; }
  .item.estado-aguardando .linha1 { flex-wrap: wrap; row-gap: 4px; }
  .item .ultima { font-size: 13px; color: var(--suave); }
  .item .quando { font-size: 12px; color: var(--fraco); font-weight: 500; }
  .item .motivo { display: block; box-sizing: border-box; width: fit-content; max-width: 100%; height: 22px; line-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .item .quando.espera { display: inline-flex; align-items: center; background: var(--ambar-fundo); color: var(--ambar-texto); flex: none; margin-top: 0; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
  .item .motivo { background: var(--zap-pastel); color: var(--zap-texto); }
  .item.ativo .motivo { background: var(--cartao); }
  .item.estado-humano .motivo { background: var(--azul-fundo); color: var(--azul-texto); }
  .item .etiqueta { background: var(--etiqueta-forte); color: var(--suave); }
  .avatar { background: var(--azul-fundo); color: var(--azul-texto); font-weight: 800; }
  .avatar-com-ponto .avatar { width: 52px; height: 52px; border-radius: 50%; font-size: 16px; }
  .avatar-com-ponto .avatar img { border-radius: 50%; }
  .item:nth-child(4n+1) .avatar { background: var(--av1-fundo); color: var(--av1-texto); }
  .item:nth-child(4n+2) .avatar { background: var(--av2-fundo); color: var(--av2-texto); }
  .item:nth-child(4n+3) .avatar { background: var(--av3-fundo); color: var(--av3-texto); }
  .item:nth-child(4n+4) .avatar { background: var(--av4-fundo); color: var(--av4-texto); }
  .ponto-estado { width: 14px; height: 14px; right: -1px; bottom: -1px; border-width: 2.5px; border-color: var(--fundo); }
  .item.ativo .ponto-estado { border-color: var(--zap-pastel); }
  .item:hover .ponto-estado { border-color: var(--etiqueta); }
  .ponto-estado.estado-jova { background: var(--zap); }
  .ponto-estado.estado-aguardando { background: var(--ambar); }
  .ponto-estado.estado-humano { background: var(--azul); }
  .ponto-estado.estado-finalizada, .ponto-estado.estado-fora { background: var(--fraco); }

  /* ---------- Conversa: papel de parede estilo WhatsApp e balões com rabinho ---------- */
  main.conversa {
    background-color: var(--conversa);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%23128C7E' stroke-opacity='0.07' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='26' cy='28' r='9'/><path d='M88 18h22a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6h-9l-8 6v-6h-5a6 6 0 0 1-6-6V24a6 6 0 0 1 6-6z'/><path d='M130 70l4 10 10 4-10 4-4 10-4-10-10-4 10-4z'/><path d='M14 96h30a5 5 0 0 1 5 5v12a5 5 0 0 1-5 5H29l-7 5v-5h-8a5 5 0 0 1-5-5v-12a5 5 0 0 1 5-5z'/><circle cx='100' cy='120' r='6'/><path d='M60 130l6 6 10-12'/><path d='M138 136h12M144 130v12'/><circle cx='64' cy='66' r='3'/><path d='M120 148a7 7 0 1 0 14 0'/><path d='M40 10l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z'/></svg>");
    background-size: 136px 136px;
  }
  :root[data-tema="escuro"] main.conversa {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%238FA3AD' stroke-opacity='0.075' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='26' cy='28' r='9'/><path d='M88 18h22a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6h-9l-8 6v-6h-5a6 6 0 0 1-6-6V24a6 6 0 0 1 6-6z'/><path d='M130 70l4 10 10 4-10 4-4 10-4-10-10-4 10-4z'/><path d='M14 96h30a5 5 0 0 1 5 5v12a5 5 0 0 1-5 5H29l-7 5v-5h-8a5 5 0 0 1-5-5v-12a5 5 0 0 1 5-5z'/><circle cx='100' cy='120' r='6'/><path d='M60 130l6 6 10-12'/><path d='M138 136h12M144 130v12'/><circle cx='64' cy='66' r='3'/><path d='M120 148a7 7 0 1 0 14 0'/><path d='M40 10l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z'/></svg>");
  }
  .cabeca { min-height: 70px; padding: 12px 18px; gap: 8px; background: var(--fundo); border-bottom: 1px solid var(--linha); }
  .cabeca .avatar.medio { width: 46px; height: 46px; border-radius: 50%; background: var(--av1-fundo); color: var(--av1-texto); font-size: 15px; }
  /* cor da situação (lida na pílula da ficha, sempre aberta no computador) */
  .app:has(.pilula.estado-aguardando) .cabeca .avatar.medio { background: var(--ambar-fundo); color: var(--ambar-texto); }
  .app:has(.pilula.estado-humano) .cabeca .avatar.medio { background: var(--azul-fundo); color: var(--azul-texto); }
  .app:has(.pilula.estado-aguardando) .cabeca .quem span { color: var(--ambar-texto); }
  .app:has(.pilula.estado-humano) .cabeca .quem span { color: var(--azul-texto); }
  .app:has(.pilula.estado-jova) .cabeca .quem span { color: var(--zap-texto); }
  .cabeca .avatar.medio img { border-radius: 50%; }
  .cabeca .quem strong { font-size: 16px; font-weight: 800; letter-spacing: -.015em; }
  .cabeca .quem span { font-size: 13px; color: var(--suave); font-weight: 600; }
  .cabeca .btn { height: 36px; padding: 0 12px; font-size: 12.5px; }
  .mensagens { padding: 22px 24px; gap: 10px; }
  .separador-dia span { border-radius: 999px; background: var(--sistema-fundo); border: 0; color: var(--suave); font-weight: 700; padding: 4px 12px; box-shadow: var(--balao-sombra); }
  .msg { position: relative; max-width: min(72%, 540px); padding: 9px 13px 8px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; border: 0; box-shadow: var(--balao-sombra); }
  .msg::before { content: ""; position: absolute; top: 0; width: 0; height: 0; border-style: solid; }
  .msg.cliente { background: var(--balao-cliente); color: var(--balao-cliente-texto); border-top-left-radius: 2px; margin-left: 10px; }
  .msg.cliente::before { left: -9px; border-width: 0 10px 12px 0; border-color: transparent var(--balao-cliente) transparent transparent; }
  .msg.jova, :root[data-tema="escuro"] .msg.jova { background: var(--balao-jova); color: var(--balao-jova-texto); border-top-right-radius: 2px; margin-right: 10px; box-shadow: var(--balao-sombra); }
  .msg.jova::before { right: -9px; border-width: 12px 10px 0 0; border-color: var(--balao-jova) transparent transparent transparent; }
  .msg.atendente, :root[data-tema="escuro"] .msg.atendente { background: var(--balao-equipe); color: var(--balao-equipe-texto); border-top-right-radius: 2px; margin-right: 10px; box-shadow: var(--balao-sombra); }
  .msg.atendente::before { right: -9px; border-width: 12px 10px 0 0; border-color: var(--balao-equipe) transparent transparent transparent; }
  .msg .autor { font-size: 12px; font-weight: 800; color: var(--autor-jova); }
  .msg.atendente .autor { color: var(--autor-equipe); }
  .msg .hora { font-size: 11px; color: var(--hora); margin-top: 2px; opacity: 1; }
  .msg.nota { border-radius: 14px; border: 1px dashed var(--nota-borda); background: var(--nota-fundo); color: var(--texto); box-shadow: none; }
  .msg.nota::before, .msg.sistema::before { display: none; }
  .msg.sistema { border-radius: 999px; background: var(--sistema-fundo); color: var(--suave); box-shadow: var(--balao-sombra); }
  .msg img, .msg video { border-radius: 10px; }
  .resumo { margin: 14px 24px 0; padding: 12px 16px; border-radius: 16px; background: var(--cartao); border: 0; box-shadow: 0 6px 20px rgba(245, 158, 11, .14); }
  .resumo strong { color: var(--ambar-texto); }
  .escrever { margin: 0 18px 18px; padding: 6px 6px 6px 8px; border: 0; border-radius: 999px; background: var(--cartao); box-shadow: var(--sombra-escrever); gap: 4px; }
  .escrever:focus-within { border-color: transparent; box-shadow: var(--sombra-escrever), var(--foco); }
  .escrever.gravando { margin: 0 18px 18px; }
  .escrever textarea { font-size: 14px; padding: 10px 6px; background: transparent; color: var(--texto); }
  .escrever .btn { height: 38px; padding: 0 13px; border-radius: 999px; background: var(--etiqueta); }
  .escrever .btn.icone-so { width: 36px; height: 36px; background: transparent; color: var(--suave); }
  .escrever .btn.icone-so:hover:not(:disabled) { background: var(--etiqueta); color: var(--texto); }
  /* Enviar vira um botão redondo verde com o avião de papel */
  .escrever .btn.escuro, :root[data-tema="escuro"] .escrever .btn.escuro { width: 44px; height: 44px; padding: 0; font-size: 0; color: transparent; border-radius: 50%; background: var(--zap) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2L11 13'/><path d='M22 2l-7 20-4-9-9-4z'/></svg>") center / 20px 20px no-repeat; box-shadow: var(--sombra-enviar); transition: transform .15s, box-shadow .15s; }
  .escrever .btn.escuro:hover:not(:disabled) { transform: scale(1.06); background-color: var(--zap-hover); opacity: 1; }
  .prontas { padding: 10px 24px 4px; }
  .prontas button { border-radius: 999px; border: 0; background: var(--sistema-fundo); color: var(--zap-texto); font-weight: 700; box-shadow: var(--balao-sombra); }
  .prontas button:hover { background: var(--cartao); }
  .anexo { margin: 0 18px 8px; border-radius: 16px; background: var(--cartao); border-color: var(--borda); }

  /* ---------- Ficha do cliente ---------- */
  aside.ficha { width: 272px; padding: 24px 18px; background: var(--fundo); border-left: 1px solid var(--linha); gap: 18px; }
  .ficha-topo { padding-bottom: 20px; border-bottom-color: var(--linha); }
  .avatar.grande { width: 92px; height: 92px; border-radius: 50%; font-size: 28px; font-weight: 800; background: var(--av1-fundo); color: var(--av1-texto); box-shadow: 0 0 0 4px var(--anel-avatar), 0 0 0 7px var(--zap-pastel), 0 16px 32px rgba(37, 211, 102, .18); }
  .ficha-topo:has(.pilula.estado-aguardando) .avatar.grande { background: var(--ambar-fundo); color: var(--ambar-texto); box-shadow: 0 0 0 4px var(--anel-avatar), 0 0 0 7px var(--ambar-fundo), 0 16px 32px rgba(245, 158, 11, .2); }
  .ficha-topo:has(.pilula.estado-humano) .avatar.grande { background: var(--azul-fundo); color: var(--azul-texto); box-shadow: 0 0 0 4px var(--anel-avatar), 0 0 0 7px var(--azul-fundo), 0 16px 32px rgba(46, 107, 240, .2); }
  .avatar.grande img { border-radius: 50%; }
  .ficha-topo strong { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
  .ficha-numeros { gap: 10px; }
  .ficha-numeros div { border-radius: 18px; padding: 14px 10px; }
  .ficha-numeros div:first-child { background: var(--zap-pastel); }
  .ficha-numeros div:first-child strong { color: var(--zap-texto); }
  .ficha-numeros div:last-child { background: var(--azul-fundo); }
  .ficha-numeros div:last-child strong { color: var(--azul-texto); }
  .ficha-numeros strong { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
  .ficha-numeros span { font-weight: 600; }
  .linha-ficha > .icone { box-sizing: border-box; width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--etiqueta); color: var(--zap-texto); margin-top: 0; }
  .linha-ficha .rotulo { font-weight: 600; }
  .linha-ficha .valor { font-weight: 700; }
  .btn.perigo.apagar-cliente { border-radius: 999px; }

  /* ---------- Paleta Ctrl+K ---------- */
  .paleta { background: var(--veu-paleta); }
  .paleta-caixa { border-radius: 20px; border: 1px solid var(--folha-borda); background: var(--cartao); box-shadow: var(--sombra-2); }
  .paleta-campo { border-bottom-color: var(--linha); }
  .paleta-campo .icone { color: var(--cor); }
  .paleta-item { border-radius: 12px; }
  .paleta-item.marcado { background: var(--zap-pastel); box-shadow: none; }
  .paleta-item.marcado .paleta-textos strong { color: var(--zap-texto); }
  .paleta-item .avatar { border-radius: 50%; }
  .paleta-icone { border-radius: 50%; background: var(--etiqueta); color: var(--suave); }
  .paleta-item.marcado .paleta-icone { background: var(--cartao); color: var(--zap-texto); }
  .paleta-rodape { background: var(--etiqueta); border-top-color: var(--linha); }

  /* ---------- Cartões, gráficos e tabelas das outras telas ---------- */
  .cartao, .grafico, .caixa-tabela, .lista-pendencias, .formulario, .lugar, .contato, .fornecedor-novo, .config-cartao { border: 1px solid var(--folha-borda); border-radius: 20px; box-shadow: var(--sombra-2); background: var(--cartao); }
  .cartao.kpi:hover { transform: none; box-shadow: var(--sombra-2); border-color: var(--folha-borda); }
  .kpi-icone { background: var(--zap-pastel); color: var(--zap-texto); border-radius: 50%; }
  .cartoes.destaque .cartao:first-child { background: var(--destaque-kpi); border-color: transparent; color: #FFFFFF; }
  .cartoes.destaque .cartao:first-child::after { display: none; }
  .cartoes.destaque .cartao:first-child .kpi-icone { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
  .cartoes.destaque .cartao:first-child .rotulo, .cartoes.destaque .cartao:first-child .comparacao { color: rgba(255, 255, 255, .85); }
  .grafico .barra { background: var(--zap); border-radius: 6px 6px 0 0; opacity: 1; }
  .grafico .barra-caixa:hover .barra { background: var(--zap-hover); }
  .grafico .barra-caixa:hover::after { background: var(--texto); color: var(--fundo); border-radius: 10px; }
  .grafico .barras { border-bottom-color: var(--linha); }
  .linha-ranking .barra-h, .medidor .barra-h { background: var(--zap); border-radius: 999px; }
  .anel { background: conic-gradient(var(--zap) calc(var(--p) * 1%), var(--etiqueta) 0); }
  .total-grafico { border-radius: 999px; }
  .delta { border-radius: 999px; }
  .delta.bom, :root[data-tema="escuro"] .delta.bom { background: var(--delta-bom-fundo); color: var(--delta-bom-texto); }
  .delta.ruim, :root[data-tema="escuro"] .delta.ruim { background: var(--delta-ruim-fundo); color: var(--delta-ruim-texto); }
  .resumo-ia { background: var(--zap-pastel); border: 0; border-radius: 16px; }
  .busca-ia, .destaque-cartao { background: var(--cartao); }
  table.tabela { border-radius: 20px; border-color: var(--linha); font-size: 13.5px; }
  table.tabela th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); background: var(--etiqueta); height: 40px; padding: 0 14px; }
  table.tabela td { padding: 10px 14px; border-bottom-color: var(--linha); }
  table.tabela tr:last-child td { border-bottom: 0; }
  .caixa-tabela { overflow: hidden; }
  .caixa-tabela table.tabela { border: 0; border-radius: 0; }
  .pendencia { border-bottom-color: var(--linha); }
  .pendencia code { border-radius: 6px; background: var(--etiqueta); }
  .historico-pesquisas button { border-radius: 999px; }
  .historico-pesquisas button.ativa { background: var(--zap-pastel); color: var(--zap-texto); border-color: transparent; box-shadow: none; }
  .endereco, .config-dados div, .ficha-numeros div { border-radius: 14px; background: var(--etiqueta); }
  .faixa-aviso { background: var(--ambar-fundo); color: var(--ambar-texto); border: 0; border-radius: 14px; }
  .faixa-info { border-radius: 14px; border: 0; background: var(--azul-fundo); color: var(--azul-texto); }
  .documento h3::before { background: var(--zap); }
  .documento li::marker { color: var(--zap-texto); }
  .obra::before { display: none; }
  .robo-obra .olho { fill: var(--zap); }
  .desenho-vazio .destaque { stroke: var(--zap); }
  .desenho-vazio .ponto { fill: var(--zap); }
  .selo-obra { background: var(--ambar-fundo); color: var(--ambar-texto); border-radius: 999px; }
  .pagina h2, .extras h2, .titulo-pagina h2, .contatos h2 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
  .mapa-3d { border-radius: 20px; border-color: var(--folha-borda); }
  .lugar.ativo { border-color: var(--zap); box-shadow: 0 0 0 3px var(--zap-pastel); }
  .osso { border-radius: 10px; }
  .modulo-vazio .cartao { box-shadow: var(--sombra-2); }
  .config-cabeca h3 { font-weight: 800; }
  .lista-contatos .contato { border-radius: 18px; }
  .contato .avatar { border-radius: 50%; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) main.conversa {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%238FA3AD' stroke-opacity='0.075' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='26' cy='28' r='9'/><path d='M88 18h22a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6h-9l-8 6v-6h-5a6 6 0 0 1-6-6V24a6 6 0 0 1 6-6z'/><path d='M130 70l4 10 10 4-10 4-4 10-4-10-10-4 10-4z'/><path d='M14 96h30a5 5 0 0 1 5 5v12a5 5 0 0 1-5 5H29l-7 5v-5h-8a5 5 0 0 1-5-5v-12a5 5 0 0 1 5-5z'/><circle cx='100' cy='120' r='6'/><path d='M60 130l6 6 10-12'/><path d='M138 136h12M144 130v12'/><circle cx='64' cy='66' r='3'/><path d='M120 148a7 7 0 1 0 14 0'/><path d='M40 10l3 6 6 1-4 4 1 6-6-3-6 3 1-6-4-4 6-1z'/></svg>");
    }
    :root:not([data-tema="claro"]) .msg.jova { background: var(--balao-jova); color: var(--balao-jova-texto); }
    :root:not([data-tema="claro"]) .msg.atendente { background: var(--balao-equipe); color: var(--balao-equipe-texto); }
    :root:not([data-tema="claro"]) .btn.escuro { background: var(--zap); border-color: var(--zap); color: var(--zap-sobre); }
    :root:not([data-tema="claro"]) .escrever .btn.escuro { color: transparent; background: var(--zap) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2L11 13'/><path d='M22 2l-7 20-4-9-9-4z'/></svg>") center / 20px 20px no-repeat; }
    :root:not([data-tema="claro"]) .delta.bom { background: var(--delta-bom-fundo); color: var(--delta-bom-texto); }
    :root:not([data-tema="claro"]) .delta.ruim { background: var(--delta-ruim-fundo); color: var(--delta-ruim-texto); }
  }
  @media (prefers-reduced-motion: reduce) { .rd-aceno { animation: none; } .rd-cartao { transition: none; } }
}
/* Contatos (2026-11-02): cartões mais largos no computador (com 5 colunas o nome ficava cortado) e o botão
   "Mostrar mais" no fim da lista, que também carrega sozinho ao rolar */
@media (min-width: 1101px) {
  .lista-contatos { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}
.mais-contatos-caixa { display: flex; justify-content: center; padding: 16px 0 8px; }
.mais-contatos { min-width: 260px; }

/* Avisos de "passou para você" e chips de quem está com cada cliente (2026-11-04) */
.avisos-tela { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; max-width: min(420px, calc(100vw - 32px)); }
.aviso-tela { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--cartao, #1f2c33); color: var(--texto, #e9edef); border: 1px solid var(--borda, rgba(255,255,255,.12)); box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 14px; animation: aviso-entra .2s ease-out; }
.aviso-tela > span { flex: 1; }
.aviso-tela.destaque { border-color: #0d7c66; box-shadow: 0 0 0 2px rgba(13,124,102,.35), 0 6px 24px rgba(0,0,0,.25); }
.aviso-tela .fechar-aviso { background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; opacity: .7; }
@keyframes aviso-entra { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.equipe-agora { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 8px; }
.chip-pessoa { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(127,127,127,.15); }
.chip-pessoa.eu { background: rgba(13,124,102,.25); }

/* Cliente sem resposta: tempo na lista; 3 h no horário de atendimento = vermelho (2026-11-04) */
.item .sem-resposta { display: inline-block; font-size: 12px; color: #d9a400; margin-top: 2px; }
.item .sem-resposta.atrasada { color: #fff; background: #c62828; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.item.atrasada { box-shadow: inset 3px 0 0 #e53935; background: rgba(229,57,53,.08); }

/* Lembretes de retorno (2026-11-04) */
.janela-lembrete { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: grid; place-items: center; z-index: 9998; padding: 16px; }
.janela-lembrete .cartao { width: min(460px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: var(--cartao, #1f2c33); }
.janela-lembrete input { width: 100%; }
.atalhos-lembrete { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-lembretes { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.linha-lembrete { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.linha-lembrete > span { flex: 1; }
.linha-lembrete .fechar-aviso { background: none; border: 0; color: inherit; cursor: pointer; font-size: 16px; opacity: .7; }

/* Pedidos do Bling na ficha (2026-11-04) */
.ficha-pedidos { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.linha-pedido { display: flex; flex-direction: column; font-size: 13px; padding: 6px 8px; border-radius: 10px; background: rgba(127,127,127,.1); }
.linha-pedido span { opacity: .8; }

/* Setinha da mensagem: responder, copiar, editar, apagar (2026-11-04) */
.msg { position: relative; }
.msg .seta-msg { position: absolute; top: 2px; right: 4px; border: 0; background: rgba(0,0,0,.25); color: inherit; border-radius: 999px; width: 22px; height: 22px; line-height: 18px; cursor: pointer; opacity: 0; transition: opacity .15s; font-size: 14px; }
.msg:hover .seta-msg, .msg .seta-msg:focus-visible { opacity: 1; }
@media (hover: none) { .msg .seta-msg { opacity: .7; } }
.menu-msg { position: fixed; z-index: 10000; display: flex; flex-direction: column; min-width: 180px; padding: 6px; border-radius: 12px; background: var(--cartao, #233138); color: var(--texto, #e9edef); box-shadow: 0 8px 28px rgba(0,0,0,.35); border: 1px solid var(--borda, rgba(255,255,255,.1)); }
.menu-msg button { text-align: left; background: none; border: 0; color: inherit; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.menu-msg button:hover:not(:disabled) { background: rgba(127,127,127,.18); }
.menu-msg button:disabled { opacity: .55; cursor: default; }
.citacao { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; margin: 2px 0 6px; border-left: 3px solid #0d7c66; border-radius: 6px; background: rgba(0,0,0,.18); font-size: 13px; }
.citacao.de-cliente { border-left-color: #53bdeb; }
.citacao span { opacity: .85; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.texto-apagado { font-style: italic; opacity: .7; }
.respondendo { display: flex; align-items: center; gap: 8px; padding: 6px 12px; }
.respondendo .citacao { flex: 1; margin: 0; }
.respondendo .fechar-aviso { background: none; border: 0; color: inherit; font-size: 20px; cursor: pointer; }

/* Mercado Livre: relatório do dia (2026-11-05) */
.topo-ml { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.etq-ml { font-size: 13px; color: var(--texto-2, #667); }
.etq-ml.rodando { color: #0D7C66; font-weight: 600; }
.etq-ml.erro { color: #C0392B; }
.acoes-ml { display: flex; flex-wrap: wrap; gap: 8px; }
.acoes-ml a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.nums-ml { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.num-ml { border: 1px solid var(--borda, #dfe5e3); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; background: var(--fundo-2, transparent); }
.num-ml .t { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
.num-ml strong { font-size: 22px; }
.num-ml .s { font-size: 12px; opacity: .75; }
.num-ml.bom strong { color: #10a37f; }
.num-ml.ruim strong { color: #d9534f; }
iframe.relatorio-ml { width: 100%; height: 78vh; min-height: 520px; border: 1px solid var(--borda, #dfe5e3); border-radius: 14px; background: #fff; }

/* Mercado Livre: relatório com gráficos e aba Anúncios (2026-11-05, visual 2) */
.secoes-ml { display: grid; gap: 14px; }
.secao-ml { background: var(--cartao); border: 1px solid var(--borda); border-radius: 18px; padding: 18px 20px; color: var(--texto); }
.secao-ml-topo h3 { margin: 0 0 4px; font-size: 17px; }
.secao-ml-topo p { margin: 0 0 12px; color: var(--suave); font-size: 13.5px; line-height: 1.45; max-width: 860px; }
.secao-ml h4 { margin: 16px 0 6px; font-size: 13.5px; color: var(--suave); font-weight: 600; }
.graf-ml { width: 100%; height: auto; display: block; color: var(--texto); overflow: visible; }
.num-ml.clicavel { cursor: pointer; text-align: left; font: inherit; color: inherit; transition: transform .12s, border-color .12s; }
.num-ml.clicavel:hover { transform: translateY(-2px); border-color: var(--cor); }
.nums-ml.pequenos { margin: 14px 0 4px; }
.nums-ml.pequenos .num-ml strong { font-size: 18px; }
.partes-ml .barra-partes { display: flex; height: 34px; border-radius: 10px; overflow: hidden; gap: 2px; }
.partes-ml .barra-partes span { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; min-width: 3px; }
.legenda-ml { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; }
.item-leg { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; color: var(--texto); background: none; border: 1px solid transparent; border-radius: 10px; padding: 4px 8px; }
button.item-leg { cursor: pointer; border-color: var(--borda); }
button.item-leg:hover { border-color: var(--cor); }
.item-leg i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.seta-leg { color: var(--cor-escura); font-size: 12px; }
.nota-ml { font-size: 12.5px; color: var(--suave); margin: 10px 0 0; }
.ads-topo { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; margin-bottom: 12px; }
.ads-verba { background: var(--cor-clara); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.ads-verba span { font-size: 12.5px; color: var(--suave); }
.ads-verba strong { font-size: 26px; color: var(--cor-escura); }
.ads-info p { margin: 2px 0 6px; font-size: 13.5px; }
.tabela-ml-rolagem { overflow-x: auto; }
.tabela-ml { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-ml th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); padding: 8px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela-ml td { padding: 9px 8px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela-ml td.num { text-align: right; white-space: nowrap; }
.tabela-ml tr:hover td { background: var(--item-ativo); }
.nome-ml { font-weight: 600; color: var(--texto); text-decoration: none; display: block; }
a.nome-ml:hover { color: var(--cor-escura); text-decoration: underline; }
.cod-ml { font-size: 12px; color: var(--suave); margin-top: 2px; }
.acoes-lista-ml { display: grid; gap: 10px; }
.acao-ml { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px; }
.acao-ml > strong { font-size: 24px; text-align: center; color: var(--cor-escura); }
.acao-ml.ruim > strong { color: #E5534B; }
.acao-ml p { margin: 2px 0 0; font-size: 13px; color: var(--suave); }
.topo-an { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.topo-an input { flex: 1; min-width: 220px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--campo-borda); background: var(--campo); color: var(--texto); font: inherit; }
.chips-ml { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip-ml { font: inherit; font-size: 13px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); border-radius: 999px; padding: 6px 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.chip-ml span { font-size: 11.5px; color: var(--suave); }
.chip-ml.ativo { background: var(--cor); border-color: var(--cor); color: #fff; }
.chip-ml.ativo span { color: rgba(255, 255, 255, .85); }
.foto-an img { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; background: #fff; }
.marcas-an { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.etq-an { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--etiqueta); color: var(--suave); }
.etq-an.bom { background: var(--cor-clara); color: var(--cor-escura); }
.etq-an.ruim { background: rgba(229, 83, 75, .14); color: #E5534B; }
.etq-an.alerta { background: rgba(224, 161, 0, .16); color: #B98500; }
.mais-ml { display: flex; justify-content: center; margin: 12px 0; }
@media (max-width: 760px) { .ads-topo { grid-template-columns: 1fr; } .acao-ml { grid-template-columns: 52px 1fr; } .acao-ml .btn { grid-column: 1 / -1; } .foto-an { display: none; } }

/* Soluções do mês: abas e tópicos para crescer (2026-11-05) */
.abas-solucoes { display: flex; gap: 6px; margin: 4px 0 12px; border-bottom: 1px solid var(--borda); }
.aba-sol { font: inherit; font-size: 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--suave); padding: 8px 14px; cursor: pointer; margin-bottom: -1px; }
.aba-sol.ativa { color: var(--texto); border-bottom-color: var(--cor); font-weight: 600; }
.topicos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 8px; }
.topico { background: var(--cartao); border: 1px solid var(--borda); border-left: 4px solid var(--cor); border-radius: 16px; padding: 14px 16px; color: var(--texto); }
.topico.prioridade-alta { border-left-color: #E5534B; }
.topico.prioridade-baixa { border-left-color: #8A8F98; }
.topico-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); }
.topico-num { width: 24px; height: 24px; border-radius: 50%; background: var(--cor); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.topico-prio, .topico-esforco { padding: 2px 8px; border-radius: 999px; background: var(--etiqueta); }
.topico.prioridade-alta .topico-prio { background: rgba(229, 83, 75, .14); color: #E5534B; }
.topico h4 { margin: 10px 0 6px; font-size: 15.5px; line-height: 1.35; }
.topico p { margin: 6px 0; font-size: 13.5px; line-height: 1.45; }
.topico-porque { color: var(--suave); }
.topico-passos { margin: 6px 0; padding-left: 20px; font-size: 13.5px; line-height: 1.45; }
.topico-resultado { background: var(--cor-clara); border-radius: 10px; padding: 8px 10px; }
.acao-ml.alerta > strong { color: #E0A100; }

/* ---- Mercado Livre: ideia "ganhar o Comprar sem perder dinheiro" ---- */
.etq-ml.ideia { display: inline-block; margin-bottom: 12px; background: rgba(224, 161, 0, .14); color: #b07d00; border-color: rgba(224, 161, 0, .35); }
[data-tema="escuro"] .etq-ml.ideia { color: #f0c24b; }
.passos-ideia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.passo-ideia { display: flex; gap: 10px; border: 1px solid var(--borda); border-radius: 14px; padding: 12px; }
.passo-ideia .num-passo { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cor); color: #fff; font-weight: 700; font-size: 13px; }
.passo-ideia p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--suave); }
.exemplos-ideia { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.exemplo-ideia { border: 1px solid var(--borda); border-left: 4px solid #1F9C80; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.exemplo-ideia.nao-vale { border-left-color: #E5534B; }
.exemplo-topo { display: flex; flex-direction: column; gap: 3px; }
.etq-exemplo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: #1F9C80; }
.nao-vale .etq-exemplo { color: #E5534B; }
.precos-ideia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.precos-ideia > div { background: var(--item-ativo, rgba(0,0,0,.04)); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.precos-ideia span { font-size: 11.5px; color: var(--suave); }
.precos-ideia strong { font-size: 16px; }
.precos-ideia small { font-size: 11.5px; color: var(--suave); }
.precos-ideia .alvo strong { color: #1F9C80; }
.nao-vale .precos-ideia .alvo strong { color: #E5534B; }
.conta-ideia tr.total td { font-weight: 700; border-bottom: none; }
.vale .conta-ideia tr.total td:last-child { color: #1F9C80; }
.nao-vale .conta-ideia tr.total td:last-child { color: #E5534B; }
.conclusao-ideia { margin: 0; font-size: 13.5px; line-height: 1.45; font-weight: 600; }
.falta-ideia { margin: 0; font-size: 12.5px; color: var(--suave); }
.botao-futuro { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--borda); }
.botao-futuro p { margin: 0; font-size: 13px; color: var(--suave); line-height: 1.45; }
.botao-futuro .btn[disabled] { opacity: .6; cursor: not-allowed; white-space: nowrap; }
@media (max-width: 700px) { .precos-ideia { grid-template-columns: 1fr; } .botao-futuro { flex-direction: column; align-items: flex-start; } }

/* ---- Mercado Livre: aba Preços (ganhar o "Comprar") ---- */
.aviso-precos { border: 1px solid rgba(224, 161, 0, .4); background: rgba(224, 161, 0, .1); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; margin-bottom: 12px; }
.aviso-precos.ligado { border-color: rgba(31, 156, 128, .4); background: rgba(31, 156, 128, .1); }
.lista-precos { display: grid; gap: 12px; margin: 12px 0; }
.cartao-preco { background: var(--cartao); border: 1px solid var(--borda); border-left: 4px solid var(--borda); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; color: var(--texto); }
.cartao-preco.vale { border-left-color: #1F9C80; }
.cartao-preco.naoVale { border-left-color: #E5534B; }
.topo-preco { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.acao-preco { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; max-width: 260px; text-align: right; }
.acao-preco small { font-size: 11.5px; color: var(--suave); }
.acao-preco .btn[disabled] { opacity: .55; cursor: not-allowed; }
.precos-ideia.quatro { grid-template-columns: repeat(4, 1fr); }
.precos-ideia .trava strong { color: #B98500; }
.conta-curta { margin: 0; font-size: 13px; color: var(--suave); }
.conta-curta b { color: var(--texto); }
.conta-curta b.bom { color: #1F9C80; }
.conta-curta b.ruim { color: #E5534B; }
.rivais-precos summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.rivais-precos table { margin-top: 8px; }
@media (max-width: 900px) { .precos-ideia.quatro { grid-template-columns: repeat(2, 1fr); } .topo-preco { flex-direction: column; } .acao-preco { align-items: flex-start; text-align: left; max-width: none; } }
.exemplo-ideia.sem-custo { border-left-color: #E0A100; }
.sem-custo .etq-exemplo { color: #B98500; }
.sem-custo .precos-ideia .alvo strong { color: #B98500; }
.exemplo-ideia.para-nos { border-left-color: #8A8F98; }
.para-nos .etq-exemplo { color: var(--suave); }
/* Rótulo do cartão do resumo pode quebrar em 2 linhas ("cliente esperando" cortava) */
.resumo-dia .rd-cartao .rd-rotulo { white-space: normal; overflow: visible; line-height: 1.15; }

/* Manter conectado (tela de entrada) */
.lembrar-entrada { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 13.5px; cursor: pointer; user-select: none; opacity: .9; }
.lembrar-entrada input { width: 17px; height: 17px; accent-color: #10b981; margin: 0; cursor: pointer; }

/* ---------- Atendimento simples (2026-11-06): uma lista, etiquetas, aviso de quem espera, faixa na conversa ---------- */
.aviso-esperando { display: flex; align-items: center; gap: 8px; width: calc(100% - 24px); margin: 2px 12px 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid #a16207; background: #3a2a08; color: #fcd34d; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.aviso-esperando b { color: #fde68a; }
.aviso-esperando svg { width: 16px; height: 16px; flex: none; }
.aviso-esperando .ver { margin-left: auto; font-weight: 700; font-size: 12.5px; }
:root[data-tema="claro"] .aviso-esperando { background: #fef3c7; color: #92400e; border-color: #f59e0b; }
:root[data-tema="claro"] .aviso-esperando b { color: #78350f; }
.filtros-conv { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.filtro-conv { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; background: var(--fundo-suave, rgba(127,127,127,.12)); color: inherit; opacity: .85; }
.filtro-conv.ativo { background: #0D7C66; color: #fff; opacity: 1; font-weight: 600; }
.filtro-conv .n { background: #f59e0b; color: #1b1300; border-radius: 999px; padding: 0 6px; font-size: 11px; font-weight: 700; }
.linha-etq { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.etq-conv { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.5; }
.etq-conv svg { width: 12px; height: 12px; }
.etq-conv.ia, .faixa-quem.ia { background: rgba(16,185,129,.15); color: #34d399; }
.etq-conv.eq, .faixa-quem.eq { background: rgba(59,130,246,.16); color: #93c5fd; }
.etq-conv.esp, .faixa-quem.esp { background: rgba(245,158,11,.16); color: #fbbf24; }
.etq-conv.fim, .faixa-quem.fim, .etq-conv.fora, .faixa-quem.fora { background: rgba(148,163,184,.14); color: #a3aeb8; }
:root[data-tema="claro"] .etq-conv.ia, :root[data-tema="claro"] .faixa-quem.ia { color: #047857; }
:root[data-tema="claro"] .etq-conv.eq, :root[data-tema="claro"] .faixa-quem.eq { color: #1d4ed8; }
:root[data-tema="claro"] .etq-conv.esp, :root[data-tema="claro"] .faixa-quem.esp { color: #b45309; }
:root[data-tema="claro"] .etq-conv.fim, :root[data-tema="claro"] .faixa-quem.fim, :root[data-tema="claro"] .etq-conv.fora, :root[data-tema="claro"] .faixa-quem.fora { color: #475569; }
.faixa-quem { display: flex; align-items: center; gap: 8px; padding: 9px 18px; font-size: 13px; line-height: 1.35; }
.faixa-quem svg { width: 15px; height: 15px; flex: none; }
.faixa-quem b { margin-right: 2px; }
.filtros-conv { flex-wrap: nowrap; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.filtro-conv { padding: 5px 10px; font-size: 12px; flex: none; }
@media (min-width: 1101px) { section.lista { width: 350px; } }
@media (min-width: 1101px) { .conversa .cabeca .quem { min-width: 140px; flex: 1 1 auto; } .conversa .cabeca { flex-wrap: nowrap; } }

/* Engrenagem com abas (2026-11-06): Geral, Equipe, Números e custos, Minha senha */
.pagina-ajustes { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: auto; }
.abas-ajustes { display: flex; gap: 6px; padding: 16px 20px 4px; flex-wrap: wrap; }
.abas-ajustes button { border: 0; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13.5px; cursor: pointer; background: var(--fundo-suave, rgba(127,127,127,.12)); color: inherit; }
.abas-ajustes button.ativa { background: #0D7C66; color: #fff; font-weight: 600; }

/* Número verde de mensagens não lidas (como no WhatsApp) */
.canto-item { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; margin-left: 8px; }
.quando.nova { color: #25D366 !important; font-weight: 600; }
.nao-lidas { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #25D366; color: #06210f; font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }

/* ---------- Trilho estilo Teams (2026-11-06, pedido do Luis): só no computador ----------
   Menu da esquerda vira uma coluna estreita de ícones grandes com o nome curto embaixo; as partes do módulo
   (Conversas, Contatos, Respostas prontas; abas dos Relatórios, Fornecedores, Mercado Livre) vão para abas no alto.
   Sobra espaço para a lista de conversas e para a conversa. */
.subabas { display: none; }
.nome-curto { display: none; }
@media (min-width: 1101px) {
  aside.lateral { width: 84px !important; min-width: 84px; padding: 12px 6px !important; align-items: center; }
  aside.lateral .marca { justify-content: center; padding: 4px 0 10px !important; }
  aside.lateral .marca > div, aside.lateral .rotulo-grupo { display: none !important; }
  aside.lateral .marca img { width: 34px; height: 34px; }
  aside.lateral nav.modulos { width: 100%; gap: 4px; }
  aside.lateral .grupo-modulo > nav.filas { display: none !important; }
  aside.lateral button.modulo { flex-direction: column !important; justify-content: center; gap: 5px !important; width: 100%; height: auto !important; min-height: 62px; padding: 9px 2px !important; border-radius: 14px !important; text-align: center; position: relative; }
  aside.lateral button.modulo > svg, aside.lateral button.modulo .icone, aside.lateral button.modulo > span:first-child:not(.nome):not(.nome-curto) { width: 26px !important; height: 26px !important; }
  aside.lateral button.modulo svg { width: 22px; height: 22px; }
  aside.lateral button.modulo .nome { display: none !important; }
  aside.lateral button.modulo .nome-curto { display: block; font-size: 11px; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 76px; }
  aside.lateral button.modulo .cadeado { position: absolute; top: 6px; right: 8px; margin: 0 !important; }
  aside.lateral button.modulo .cadeado svg { width: 11px; height: 11px; }
  aside.lateral .conta { flex-direction: column !important; gap: 6px !important; padding: 10px 0 !important; align-items: center; width: 100%; }
  aside.lateral .conta .quem-sou { display: none !important; }
  .subabas { display: block; padding: 6px 20px 0; }
  .subabas nav.filas { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 6px; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
  .subabas nav.filas::before { display: none !important; }
  .subabas nav.filas .separador { display: none !important; }
  .subabas nav.filas button { width: auto !important; padding: 8px 14px !important; border-radius: 999px !important; font-size: 13.5px; gap: 8px; }
  .subabas nav.filas button .rotulo-fila { gap: 7px; }
  .subabas nav.filas button .num { position: static !important; margin-left: 6px; }
  section.lista { width: 400px !important; }
}
@media (min-width: 1101px) {
  aside.lateral button.modulo .icone { width: 40px !important; height: 40px !important; padding: 9px !important; border-radius: 12px !important; }
  aside.lateral button.modulo.trancado { opacity: .55; }
  aside.lateral button.modulo .cadeado { top: 4px; right: 6px; background: var(--cartao); border-radius: 999px; padding: 2px; display: grid; }
  aside.lateral .conta .avatar.pequeno { width: 40px; height: 40px; }
  aside.lateral .conta .btn.icone-so { width: 40px; height: 40px; }
  aside.lateral .conta .btn.icone-so svg { width: 20px; height: 20px; }
}
@media (min-width: 1101px) {
  aside.lateral button.modulo .cadeado { width: 18px !important; height: 18px !important; padding: 3px !important; top: 2px !important; right: 4px !important; }
  aside.lateral button.modulo .cadeado svg { width: 12px !important; height: 12px !important; padding: 0 !important; background: none !important; }
}

.linha2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.linha2 .ultima { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha2 .nao-lidas { flex: none; }

/* Trilho: só o ícone; o nome aparece num balão ao passar o mouse. Dados do cliente só ao clicar (2026-11-06) */
@media (min-width: 1101px) {
  aside.lateral { overflow: visible !important; z-index: 30; }
  aside.lateral nav.modulos { overflow: visible !important; }
  aside.lateral button.modulo { min-height: 54px; padding: 7px 2px !important; }
  aside.lateral button.modulo .nome-curto { display: none !important; }
  aside.lateral button.modulo::after {
    content: attr(data-nome); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-4px);
    background: #1f2a30; color: #fff; font-size: 13px; font-weight: 600; padding: 7px 11px; border-radius: 9px; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 60;
  }
  aside.lateral button.modulo:hover::after, aside.lateral button.modulo:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }
  aside.ficha { display: none !important; }
  .app.ficha-aberta aside.ficha { display: flex !important; }
  .cabeca .btn.botao-ficha { display: inline-flex !important; align-items: center; gap: 6px; }
  .cabeca .btn.botao-ficha svg { width: 16px; height: 16px; }
  .cabeca .btn.botao-ficha.ativo { background: #0D7C66; color: #fff; }
  .fechar-ficha.so-pequena { display: inline-flex !important; position: absolute; top: 10px; right: 10px; }
}
@media (min-width: 1101px) {
  .conversa .cabeca select.btn { width: auto !important; max-width: 160px; flex: none; }
  .conversa .cabeca .btn { flex: none; }
  .app.ficha-aberta .cabeca .btn.botao-ficha span { display: none; }
}
@media (min-width: 1101px) {
  .conversa .cabeca { gap: 6px !important; }
  .conversa .cabeca select.btn { max-width: 125px; }
  .app.ficha-aberta .conversa .cabeca .quem { min-width: 90px; }
}
.filtros-conv { flex-wrap: wrap !important; overflow: visible !important; }
.filtro-conv .n { background: rgba(127,127,127,.25); color: inherit; }
.filtro-conv.ativo .n { background: rgba(255,255,255,.25); color: #fff; }
.filtro-conv.urgente .n { background: #f59e0b; color: #1b1300; }