/* Interface 2 (LAB2, INTERFACE2=1): desenho fiel às fotos de referência (/home/rbm/chat-novo), uso interno.
   Carrega depois do style.css; tudo aqui vale só com <html class="v2">. Cores lidas dos pixels das fotos. */

html.v2 {
  font-size: 14px;
  color-scheme: light;
  --v2-topo: #363636;
  --v2-filete: linear-gradient(90deg, #2c4fd7 0%, #3b7be0 35%, #f08a24 75%, #f26b0f 100%);  /* azul puxando para o laranja (pedido do usuário) */
  --v2-azul: #2c4fd7; --v2-azul-claro: #ecf3fe; --v2-azul-texto: #3950a1;
  --v2-escuro: #2c334f; --v2-avatar: #5f5f61; --v2-icone: #4a4f5c;
  --v2-borda: #dcdedf; --v2-borda-cartao: #e5e7e9; --v2-campo: #9aa0a6; --v2-pilula: #c4c7cc;
  --topo-h: 48px;
  --cor: #2c4fd7; --cor-escura: #2c334f; --sobre-cor: #ffffff;
  --texto: #222222; --texto-2: #3c3c3c; --mudo: #6b6b6f; --borda: #e2e3e5;
  --fundo: #f3f3f5; --cartao: #ffffff; --campo: #ffffff; --superficie-2: #f7f7f8; --linha-par: #fafafa;
  --hover: #f5f5f6; --hover-sec: #f3f3f3; --topo: #363636;
  --tag-neutro: #eeeef0; --tag-tipo: #ecf3fe; --tag-tipo-texto: #3950a1; --destaque-sombra: rgba(44, 79, 215, .12);
  --ok: #1f893c; --ok-fundo: #e6f7e6; --ok-borda: #b7dfc2;
  --erro: #c5402b; --erro-fundo: #fdecea; --erro-borda: #f3c0bd;
  --trilho: #ffffff; --trilho-texto: #4a4f5c; --trilho-mudo: #6b6b6f; --trilho-forte: #222222; --trilho-hover: #f3f3f5;
  --trilho-ativo-fundo: #ebebed; --trilho-ativo-texto: #222222; --trilho-borda: #e2e3e5; --trilho-topo: transparent;
  --trilho-avatar-fundo: #5f5f61; --trilho-avatar-texto: #ffffff;
  --wa-verde: #1f893c; --wa-fundo-chat: #f3f3f5;
  --wa-bolha-cliente: #ffffff; --wa-bolha-cliente-borda: #dcdedf;
  --wa-bolha-equipe: #eef1fd; --wa-bolha-equipe-borda: #c8d0f3; --wa-bolha-bot: #ffffff;
  --wa-avatar: #5f5f61; --wa-avatar-texto: #ffffff;
}
html.v2 body { font-family: "Nunito Sans", system-ui, sans-serif; font-size: 14px; background: var(--fundo); color: var(--texto); }
html.v2 :is(strong, b, h1, h2, h3) { font-weight: 700; }
html.v2 :is(input, select, textarea):not([type=radio]):not([type=checkbox]) { border-color: var(--v2-campo); border-radius: 4px; font-size: 14px; }
html.v2 :is(.btn, .btn-p, .btn-mini) { border-radius: 4px; }
html.v2 .mono { font-family: inherit; }

/* ================= Barra de cima: #363636 + filete em degradê azul → magenta → roxo ================= */
.v2-topo { display: none; }
html.v2 .v2-topo { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 48px; display: flex; align-items: center; gap: 12px;
  padding: 0 18px 14px 20px; background: var(--v2-topo); color: #fff; }
/* Faixa de 14 px igual à do ETAdirect (pedido do usuário; antes degradê de 7 px). */
html.v2 .v2-topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='10' preserveAspectRatio='none'%3E%3Crect width='760' height='10' fill='%239c9c9c'/%3E%3Cpath d='M83.0 10L87.0 0H104.0L100.0 10z' fill='%235c4a8f'/%3E%3Cpath d='M100.0 10L104.0 0H120.0L116.0 10z' fill='%23d9b31c'/%3E%3Cpath d='M116.0 10L120.0 0H127.0L123.0 10z' fill='%235c4a8f'/%3E%3Cpath d='M123.0 10L127.0 0H154.0L150.0 10z' fill='%23d9b31c'/%3E%3Cpath d='M150.0 10L154.0 0H180.0L176.0 10z' fill='%235c4a8f'/%3E%3Cpath d='M176.0 10L180.0 0H197.0L193.0 10z' fill='%23a99bd4'/%3E%3Cpath d='M193.0 10L197.0 0H217.0L213.0 10z' fill='%23cfc6e8'/%3E%3Cpath d='M213.0 10L217.0 0H242.0L238.0 10z' fill='%23a99bd4'/%3E%3Cpath d='M238.0 10L242.0 0H260.0L256.0 10z' fill='%235c4a8f'/%3E%3Cpath d='M256.0 10L260.0 0H282.0L278.0 10z' fill='%23cfc6e8'/%3E%3Cpath d='M278.0 10L282.0 0H307.0L303.0 10z' fill='%23a99bd4'/%3E%3Cpath d='M303.0 10L307.0 0H347.0L343.0 10z' fill='%232d2d2f'/%3E%3Cpath d='M498.0 10L502.0 0H522.0L518.0 10z' fill='%235c4a8f'/%3E%3Cpath d='M518.0 10L522.0 0H537.0L533.0 10z' fill='%23d9b31c'/%3E%3Cpath d='M533.0 10L537.0 0H557.0L553.0 10z' fill='%235c4a8f'/%3E%3Cpath d='M553.0 10L557.0 0H565.0L561.0 10z' fill='%23d9b31c'/%3E%3Cpath d='M561.0 10L565.0 0H592.0L588.0 10z' fill='%235c4a8f'/%3E%3Cpath d='M588.0 10L592.0 0H607.0L603.0 10z' fill='%232d2d2f'/%3E%3Cpath d='M603.0 10L607.0 0H614.0L610.0 10z' fill='%23cfcfcf'/%3E%3Cpath d='M610.0 10L614.0 0H652.0L648.0 10z' fill='%232d2d2f'/%3E%3Cpath d='M648.0 10L652.0 0H662.0L658.0 10z' fill='%23cfc6e8'/%3E%3Cpath d='M658.0 10L662.0 0H762.0L758.0 10z' fill='%23a99bd4'/%3E%3Cpath d='M8 7c3-6 7-6 8-2s5 4 7-2' fill='none' stroke='%23b4b4b4' stroke-width='1'/%3E%3Cpath d='M30 7c3-6 7-6 8-2s5 4 7-2' fill='none' stroke='%23b4b4b4' stroke-width='1'/%3E%3Cpath d='M52 7c3-6 7-6 8-2s5 4 7-2' fill='none' stroke='%23b4b4b4' stroke-width='1'/%3E%3Cpath d='M74 7c3-6 7-6 8-2s5 4 7-2' fill='none' stroke='%23b4b4b4' stroke-width='1'/%3E%3Cpath d='M352 7c3-6 7-6 8-2s5 4 7-2' fill='none' stroke='%23b4b4b4' stroke-width='1'/%3E%3Cpath d='M374 7c3-6 7-6 8-2s5 4 7-2' fill='none' stroke='%23b4b4b4' stroke-width='1'/%3E%3Cpath d='M396 7c3-6 7-6 8-2s5 4 7-2' fill='none' stroke='%23b4b4b4' stroke-width='1'/%3E%3Cpath d='M418 7c3-6 7-6 8-2s5 4 7-2' fill='none' stroke='%23b4b4b4' stroke-width='1'/%3E%3Cpath d='M440 7c3-6 7-6 8-2s5 4 7-2' fill='none' stroke='%23b4b4b4' stroke-width='1'/%3E%3Cpath d='M462 7c3-6 7-6 8-2s5 4 7-2' fill='none' stroke='%23b4b4b4' stroke-width='1'/%3E%3Cpath d='M484 7c3-6 7-6 8-2s5 4 7-2' fill='none' stroke='%23b4b4b4' stroke-width='1'/%3E%3Cpath d='M668 8l3-6' stroke='%235c4a8f' stroke-width='.8' opacity='.5'/%3E%3Cpath d='M680 8l3-6' stroke='%235c4a8f' stroke-width='.8' opacity='.5'/%3E%3Cpath d='M692 8l3-6' stroke='%235c4a8f' stroke-width='.8' opacity='.5'/%3E%3Cpath d='M704 8l3-6' stroke='%235c4a8f' stroke-width='.8' opacity='.5'/%3E%3Cpath d='M716 8l3-6' stroke='%235c4a8f' stroke-width='.8' opacity='.5'/%3E%3Cpath d='M728 8l3-6' stroke='%235c4a8f' stroke-width='.8' opacity='.5'/%3E%3Cpath d='M740 8l3-6' stroke='%235c4a8f' stroke-width='.8' opacity='.5'/%3E%3Cpath d='M752 8l3-6' stroke='%235c4a8f' stroke-width='.8' opacity='.5'/%3E%3C/svg%3E") 0 0 / 1064px 14px repeat-x; }
.v2-marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.v2-sigla { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff; border-radius: 3px; font-weight: 800; font-size: 12px; }
.v2-sigla-img { object-fit: contain; padding: 2px; background: #fff; }
.v2-nome { font-size: 13.5px; font-weight: 400; letter-spacing: .18em; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.v2-direita { margin-left: auto; display: flex; align-items: center; gap: 18px; }
/* Botão da conta (mockup A, 27/10): pílula com avatar + nome + empresa · papel; menu com o topo grafite e a linha colorida. */
html.v2 .v2-conta .menu-usuario > summary.v2-conta-botao { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 10px 0 3px; border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; background: rgba(255,255,255,.06); color: #fff; opacity: 1; list-style: none; cursor: pointer; }
html.v2 .v2-conta .menu-usuario > summary::-webkit-details-marker { display: none; }
html.v2 .v2-conta .menu-usuario > summary.v2-conta-botao:hover, html.v2 .v2-conta .menu-usuario[open] > summary.v2-conta-botao { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); }
.v2-conta-rotulo { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; max-width: 220px; }
.v2-conta-rotulo strong { font-size: 12.5px; font-weight: 700; }
.v2-conta-rotulo small { font-size: 10.5px; color: #c9c9c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-conta-seta { flex: none; opacity: .8; transition: transform .15s; }
.v2-conta details[open] .v2-conta-seta { transform: rotate(180deg); }
html.v2 .v2-conta .trilho-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--v2-azul); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; overflow: hidden; }
html.v2 .v2-conta .trilho-avatar .av-foto { width: 100%; height: 100%; object-fit: cover; }

html.v2 .v2-conta .menu-config-lista.v2-conta-menu { top: calc(100% + 8px); width: 330px; min-width: 0; padding: 0; border: 1px solid var(--v2-borda-cartao); border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0,0,0,.18); overflow: hidden; color: var(--texto); background: #fff; }
.v2-conta-topo { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--v2-topo); color: #fff; }
html.v2 .v2-conta .v2-conta-topo .trilho-avatar { width: 44px; height: 44px; font-size: 15px; box-shadow: 0 0 0 2px #fff; }
.v2-conta-topo > div { min-width: 0; display: flex; flex-direction: column; }
.v2-conta-topo strong { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-conta-topo span { font-size: 12.5px; color: #c9c9c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-conta-topo em { align-self: flex-start; margin-top: 5px; padding: 0 8px; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; font-style: normal; font-size: 11px; font-weight: 700; }
.v2-conta-filete { height: 5px; background: var(--v2-filete); }
.v2-conta-sec { padding: 8px; }
.v2-conta-sec + .v2-conta-sec { border-top: 1px solid #eeeef0; padding: 6px 8px; }
.v2-conta-sec form { margin: 0; }
.v2-conta-titulo { margin: 2px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--mudo); }
html.v2 .v2-conta .v2-conta-outra { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 6px; background: none;
  text-align: left; font: inherit; color: var(--texto); text-decoration: none; cursor: pointer; }
html.v2 .v2-conta .v2-conta-outra:hover { background: var(--hover-sec, #f3f3f3); }
html.v2 .v2-conta .v2-conta-outra .trilho-avatar { background: var(--v2-avatar); }
html.v2 .v2-conta .v2-conta-outra > .ic { flex: none; color: var(--v2-campo); }
.v2-conta-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.v2-conta-quem strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-conta-quem small { font-size: 12px; color: var(--mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .v2-conta a.v2-conta-add { color: var(--v2-azul); font-weight: 600; font-size: 13.5px; }
.v2-conta-mais { flex: none; width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%; border: 1.5px dashed var(--v2-campo); color: var(--mudo); display: flex; align-items: center; justify-content: center; }
html.v2 .v2-conta a.v2-conta-item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px; border-radius: 6px; color: var(--texto); text-decoration: none; }
html.v2 .v2-conta a.v2-conta-item:hover { background: var(--hover-sec, #f3f3f3); }
html.v2 .v2-conta a.v2-conta-item .ic { color: var(--v2-icone); }
.v2-conta-rodape { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px; border-top: 1px solid #eeeef0; background: #fafafa; }
.v2-conta-rodape form { margin: 0; }
html.v2 .v2-conta .v2-conta-rodape button { display: flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--texto-2); cursor: pointer; }
html.v2 .v2-conta .v2-conta-rodape button:hover { text-decoration: underline; }
html.v2 .v2-conta .v2-conta-rodape button.v2-conta-todas { color: var(--erro); }
html.v2 body.com-trilho { padding-top: 48px; }

/* ================= Menu lateral: branco, 68 px, ícones de 23 px; escolhido em cinza com o traço azul na borda ================= */
html.v2 .trilho, html.v2[data-trilho="aberto"] .trilho { top: 48px; height: calc(100vh - 48px); height: calc(100dvh - 48px); flex: 0 0 68px; width: 68px; padding: 14px 0;
  background: #fff; border-right: 1px solid var(--borda); }
html.v2 .trilho-topo, html.v2 .trilho :is(.trilho-titulo, .trilho-grupo, .trilho-online, .trilho-rotulo, .trilho-fila, .wa-som, a.trilho-item[href$="/conta"]) { display: none; }
html.v2 .trilho :is(.trilho-nav, .trilho-rodape) { align-items: center; gap: 8px; }
html.v2 .trilho-item { width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 6px; color: var(--v2-icone); }
html.v2 .trilho-item:hover { background: var(--trilho-hover); color: var(--texto); }
html.v2 .trilho-item.ativo { background: var(--trilho-ativo-fundo); color: var(--texto); }
html.v2 .trilho-item.ativo::before { content: ''; position: absolute; left: -11px; top: 0; bottom: 0; width: 4px; border-radius: 0 3px 3px 0; background: var(--v2-azul); }
html.v2 .trilho-item svg { width: 23px; height: 23px; stroke-width: 1.6; }
html.v2 .trilho-ponto { top: 7px; right: 7px; background: #e40784; }
html.v2 .trilho-rodape { border-top: 1px solid var(--borda); padding-top: 12px; margin: 0; width: 100%; }

/* ================= Atendimento ================= */
html.v2 body.com-trilho .wa { height: calc(100vh - 48px); height: calc(100dvh - 48px); grid-template-columns: 370px minmax(0, 1fr) 300px; background: #fff; }
html.v2 body.com-trilho .wa.sem-lateral { grid-template-columns: 370px minmax(0, 1fr) 28px; }
html.v2 body.com-trilho .wa.com-tel { grid-template-columns: 370px minmax(0, 1fr) 300px; }
html.v2 body.com-trilho .wa.com-tel.com-conversa { grid-template-columns: 370px minmax(0, 1fr) 300px 300px; }
html.v2 body.com-trilho .wa.com-tel.sem-lateral { grid-template-columns: 370px minmax(0, 1fr) 300px 28px; }
/* Tela do atendimento presa na janela: só a conversa rola. O aviso de cima (flash) flutua e some, sem empurrar a caixa de digitação. */
@media (min-width: 861px) {
  html.v2 body.com-trilho > main.wa-largo { height: calc(100vh - 48px); height: calc(100dvh - 48px); overflow: hidden; }
  html.v2 body.com-trilho > main.wa-largo .wa { height: 100%; grid-template-rows: minmax(0, 1fr); }
  html.v2 .wa-col-conversa { min-height: 0; overflow: hidden; }
  html.v2 .wa-col-conversa > .wa-escrever { flex: none; }
  html.v2 body.com-trilho > main.wa-largo > .alerta { position: fixed; z-index: 60; top: 60px; left: 50%; transform: translateX(-50%); margin: 0; max-width: min(560px, calc(100% - 32px));
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14); animation: v2-alerta-some .4s ease 5s forwards; }
}
@keyframes v2-alerta-some { to { opacity: 0; visibility: hidden; } }
/* Até 1280 px o painel do contato some (style.css): a coluna dele não fica reservada vazia. */
@media (min-width: 861px) and (max-width: 1280px) {
  html.v2 body.com-trilho :is(.wa, .wa.sem-lateral) { grid-template-columns: 370px minmax(0, 1fr); }
  html.v2 body.com-trilho :is(.wa.com-tel, .wa.com-tel.com-conversa, .wa.com-tel.sem-lateral) { grid-template-columns: 370px minmax(0, 1fr) 300px; }
}
html.v2 .wa-col-lista { background: #fff; border-right: 1px solid var(--borda); }
html.v2 .wa-lista-dentro { width: 370px; }
/* Topo: "Caixa de atendimento", ícone de nova conversa e o botão verde. */
html.v2 .wa-lista-topo { display: flex; align-items: center; gap: 10px; padding: 18px 14px 14px 18px; }
html.v2 .wa-lista-topo h1 { flex: 1; margin: 0; font-size: 22px; font-weight: 600; letter-spacing: 0; }
html.v2 .v2-icone-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 6px; background: none; color: var(--v2-icone); cursor: pointer; list-style: none; }
html.v2 .v2-icone-btn::-webkit-details-marker { display: none; }
html.v2 .v2-icone-btn:hover, html.v2 .wa-nova[open] > .v2-icone-btn { background: var(--hover-sec); color: var(--texto); }
html.v2 .v2-disponivel { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px; border: 2px solid #1f893c; border-radius: 999px; background: #e6f7e6; color: #14532d; cursor: pointer; }
html.v2 .v2-disp-ponto { width: 16px; height: 16px; border-radius: 50%; background: #1f893c; }
html.wa-som-mudo .v2-disponivel { border-color: #9aa0a6; background: #f1f1f2; color: #5f5f61; }
html.wa-som-mudo .v2-disponivel .v2-disp-ponto { background: #9aa0a6; }
/* Faixa grafite das abas: a escolhida branca. */
html.v2 .wa .wa-abas { margin: 0; padding: 6px 8px; gap: 4px; border: 0; border-radius: 0; background: var(--v2-topo); flex-wrap: nowrap; }
html.v2 .wa .wa-aba { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; height: 32px; padding: 0 12px; gap: 4px; border: 0; border-radius: 3px; background: transparent; color: #fff; font-size: 15px; font-weight: 700; }
html.v2 .wa .wa-aba:hover { background: rgba(255, 255, 255, .1); color: #fff; }
html.v2 .wa .wa-aba .wa-qtd { min-width: 0; padding: 0; background: none; color: inherit; font-size: 15px; font-weight: 700; }
html.v2 .wa .wa-aba .wa-qtd::before { content: '('; }
html.v2 .wa .wa-aba .wa-qtd::after { content: ')'; }
html.v2 .wa .wa-aba.ativo, html.v2 .wa .wa-aba.ativo:hover { background: #fff; color: var(--texto); }
html.v2 .wa .wa-aba.ativo .wa-qtd { background: none; color: var(--texto); }
/* Pílulas Abertos / Fechados. */
html.v2 .v2-filtros { display: flex; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--borda); }
html.v2 .v2-pilula { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--v2-pilula); border-radius: 999px; color: var(--texto); font-size: 15px; text-decoration: none; }
html.v2 .v2-pilula:hover { border-color: var(--v2-escuro); text-decoration: none; }
html.v2 .v2-pilula.ativo { background: var(--v2-escuro); border-color: var(--v2-escuro); color: #fff; }
/* Grupos de atendimento + busca. */
html.v2 .v2-grupos { padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--borda); }
html.v2 .v2-grupos label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 400; color: var(--texto-2); }
html.v2 .v2-grupos-linha { display: flex; align-items: center; gap: 10px; }
html.v2 .v2-grupos select { flex: 1; min-width: 0; height: 38px; margin: 0; padding: 0 10px; border: 1px solid var(--v2-campo); border-radius: 4px; background: #fff; font-size: 15px; }
html.v2 .wa-busca { padding: 10px 14px 10px 18px; border-bottom: 1px solid var(--borda); }
html.v2 .wa-busca[hidden] { display: none; }
html.v2 .wa-busca-campo { height: 36px; padding: 0 10px; border: 1px solid var(--v2-campo); border-radius: 4px; background: #fff; }
/* Itens da lista. */
html.v2 .wa #wa-lista { padding: 0; }
html.v2 .wa .wa-item.v2-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 16px 14px 18px; border-radius: 0; border-bottom: 1px solid #ececee; box-shadow: none; background: #fff; color: var(--texto); text-decoration: none; }
html.v2 .wa .wa-item.v2-item:hover { background: #fafafa; }
html.v2 .wa .wa-item.v2-item.ativo { background: #f3f3f3; box-shadow: inset 4px 0 0 var(--v2-azul); }
html.v2 .v2-item .wa-avatar { flex: none; width: 52px; height: 52px; font-size: 24px; font-weight: 600; background: var(--v2-avatar); color: #fff; }
html.v2 .v2-item-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
html.v2 .v2-item-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
html.v2 .v2-item-l1 strong { font-size: 16px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .v2-item-l2 { display: flex; align-items: center; gap: 6px; color: var(--mudo); font-size: 14px; min-width: 0; }
html.v2 .v2-item-l2 svg { flex: none; }
html.v2 .v2-previa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.v2 .v2-item-l3 { display: flex; flex-wrap: wrap; gap: 6px; }
html.v2 .v2-item-l3:empty { display: none; }
html.v2 .v2-item-dir { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
html.v2 .v2-hora { font-size: 12.5px; color: var(--mudo); }
html.v2 .v2-item-badge { display: flex; align-items: center; gap: 6px; color: var(--texto-2); }
html.v2 .v2-item .wa-nao-lidas { min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--v2-azul); color: #fff; font-size: 12.5px; font-weight: 700; }
/* Selo do grupo (pílula clara com contorno) e etiquetas (pílula com o ícone). */
.v2-selo { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid var(--v2-azul-texto); border-radius: 999px; background: var(--v2-azul-claro); color: var(--v2-azul-texto); font-size: 13.5px; white-space: nowrap; }
.v2-selo:is(.cor-laranja, .cor-amarelo) { border-color: #b98a3c; background: #fee9d0; color: #806624; }
.v2-selo.cor-verde { border-color: #2f8f4e; background: #e6f4ea; color: #1d5e33; }
.v2-selo.cor-vermelho { border-color: #c5402b; background: #fdecea; color: #a1301f; }
.v2-selo.cor-roxo { border-color: #8a23bf; background: #f3e8fc; color: #6f1a9a; }
.v2-selo.cor-cinza { border-color: #8a8f99; background: #f1f1f2; color: #4a4f5c; }
.v2-etiqueta { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border: 1px solid #8a23bf; border-radius: 999px; background: #e7d3f7; color: #6f1a9a; font-size: 13.5px; }
.v2-etiqueta.cor-vermelho { border-color: #c5402b; background: #fff; color: #a1301f; }
.v2-etiqueta.cor-azul { border-color: #3950a1; background: #ecf3fe; color: #3950a1; }
.v2-etiqueta.cor-verde { border-color: #2f8f4e; background: #e6f4ea; color: #1d5e33; }
.v2-etiqueta:is(.cor-laranja, .cor-amarelo) { border-color: #b98a3c; background: #fee9d0; color: #806624; }
.v2-etiqueta.cor-cinza { border-color: #8a8f99; background: #f1f1f2; color: #4a4f5c; }
.v2-estado { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: #eeeef0; color: var(--texto-2); font-size: 12.5px; }
.v2-estado.fila { background: #fff4dc; color: #806624; }

/* Cabeçalho da conversa: fundo cinza-claro, avatar 56 px, nome 19 px com "Etiquetas", ações à direita. */
html.v2 .wa-conv-topo { min-height: 96px; padding: 14px 18px 14px 22px; gap: 14px; border-bottom: 1px solid var(--borda); background: #f3f3f3; align-items: center; }
html.v2 .wa-conv-topo > .wa-avatar { display: flex; width: 56px; height: 56px; font-size: 26px; font-weight: 600; background: var(--v2-avatar); color: #fff; }
html.v2 .wa-conv-quem { gap: 4px; }
html.v2 .v2-conv-l1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
html.v2 .v2-conv-l1 > strong { font-size: 19px; font-weight: 400; }
html.v2 .v2-etiquetas-btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid #5f5f61; border-radius: 999px; background: #fff; color: var(--texto); font-size: 14px; cursor: pointer; list-style: none; }
html.v2 .v2-etiquetas-btn::-webkit-details-marker { display: none; }
html.v2 .wa-tag-menu[open] > .v2-etiquetas-btn, html.v2 .v2-etiquetas-btn:hover { border-color: var(--v2-azul); color: var(--v2-azul); }
html.v2 .wa-conv-info { font-size: 14px; color: var(--mudo); }
html.v2 .wa-conv-info .bolinha { display: none; }
html.v2 .wa-conv-tags { display: none; }
html.v2 .wa-conv-acoes { gap: 6px; align-items: center; }
html.v2 .v2-acao-ic { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--v2-icone); cursor: pointer; }
html.v2 .v2-acao-ic:hover { background: #e5e5e7; color: var(--texto); }
/* Encerrar (os dois tiques): vermelho no mouse, no foco do teclado e no clique, para não confundir com as outras ações. */
html.v2 .v2-acao-ic.wa-btn-encerrar:is(:hover, :focus-visible, :active) { background: #fdecea; color: #c5402b; }
html.v2 .v2-transferir { order: -1; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--texto); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
html.v2 .v2-transferir span { text-decoration: underline; text-underline-offset: 3px; }
html.v2 .v2-transferir:hover { background: #e5e5e7; }
html.v2 .wa-conv-acoes > form.inline:has(.wa-btn-encerrar) { order: 1; }
html.v2 .wa-conv-acoes > [data-tarefas] { order: 2; }  /* Tarefas entre o Encerrar e o Ligar */
html.v2 .wa-conv-acoes > [data-ligar] { order: 3; }
html.v2 .wa-conv-acoes > form.inline:has(.wa-btn-assumir) { order: 4; }
html.v2 .wa-conv-acoes .btn-p { height: 36px; padding: 0 12px; border-radius: 4px; font-size: 14px; font-weight: 600; }
html.v2 .btn-p.sec { background: #fff; border-color: var(--v2-campo); color: var(--texto-2); }
html.v2 .btn-p.sec:hover { border-color: var(--v2-escuro); color: var(--texto); background: #fff; }
html.v2 :is(.btn-p, .btn):not(.sec) { background: var(--v2-azul); border-color: var(--v2-azul); color: #fff; }
html.v2 .wa-btn-assumir.btn-p { background: var(--v2-escuro); border-color: var(--v2-escuro); }

/* Conversa: fundo #f3f3f5 com desenho leve, cartões e balões brancos com contorno, equipe em azul bem claro. */
html.v2 .wa-msgs { padding: 20px 22px; gap: 14px; background-color: var(--wa-fundo-chat);
  background-image: radial-gradient(#e2e3e6 1.2px, transparent 1.2px); background-size: 22px 22px; }
html.v2 .wa.layout-novo .wa-msg, html.v2 .wa-msg { max-width: min(560px, 62%); border-radius: 4px; box-shadow: none; padding: 10px 14px 8px; font-size: 15px; line-height: 1.45; }
html.v2 .wa.layout-novo .wa-msg.cliente, html.v2 .wa-msg.cliente { background: #fff; border: 1px solid var(--v2-borda); }
html.v2 .wa.layout-novo .wa-msg.atendente, html.v2 .wa-msg.atendente { background: var(--wa-bolha-equipe); color: var(--texto); border: 1px solid var(--wa-bolha-equipe-borda); }
html.v2 .wa.layout-novo .wa-msg.atendente :is(b, .wa-hora, a) { color: var(--mudo); }
html.v2 .wa.layout-novo .wa-msg.bot, html.v2 .wa-msg.bot { background: #fff; color: var(--texto); border: 1px solid var(--v2-borda-cartao); border-radius: 6px; }
html.v2 .wa.layout-novo .wa-msg > b { font-size: 13px; font-weight: 700; color: var(--texto); opacity: 1; }
html.v2 .wa.layout-novo .wa-msg .wa-hora { font-family: inherit; font-size: 12px; color: var(--mudo); opacity: 1; }
html.v2 .wa.layout-novo .wa-msg .wa-autor-av { display: none; }
html.v2 .wa-evento::before, html.v2 .wa-evento::after { display: none; }
html.v2 .wa.layout-novo .wa-evento span, html.v2 .wa-evento span { display: inline-block; padding: 9px 22px; border: 1px solid var(--v2-borda-cartao); border-radius: 999px; background: #fff; color: var(--texto-2); font-size: 14.5px; }

/* Caixa de escrever: (+) escuro redondo, clipe, campo com contorno, microfone e a seta de enviar. */
html.v2 .wa-escrever { padding: 10px 18px 14px; border-top: 1px solid var(--borda); background: #fff; }
html.v2 .wa-modo { margin-bottom: 8px; gap: 16px; }
html.v2 .wa-modo label { font-size: 13px; }
html.v2 .wa-caixa { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; box-shadow: none; }
html.v2 .wa-caixa:focus-within { box-shadow: none; }
html.v2 .wa-ferramentas { display: contents; }
html.v2 .wa-ferramentas-meio { display: none; }
html.v2 .wa-caixa #wa-rapidas-abrir { order: 1; }
html.v2 .wa-caixa .wa-clipe { order: 2; }
html.v2 .wa-caixa textarea { order: 3; flex: 1; min-width: 0; height: 46px; min-height: 46px; max-height: 30vh; padding: 12px 14px; border: 1px solid var(--v2-campo); border-radius: 4px; font-size: 15px; background: #fff; }
html.v2 .wa-caixa textarea:focus { outline: 2px solid #c8d0f3; outline-offset: 0; border-color: var(--v2-azul); }
html.v2 .wa-caixa .wa-gravando { order: 3; flex: 1; }
html.v2 .wa-caixa .wa-microfone { order: 4; }
html.v2 .wa-caixa .wa-enviar { order: 5; }
html.v2 :is(.wa-clipe, .wa-microfone, .wa-ferramenta) { width: 40px; height: 40px; margin: 0; padding: 0; border-radius: 50%; color: var(--v2-icone); display: inline-flex; align-items: center; justify-content: center; gap: 0; font-size: 0; }
html.v2 :is(.wa-clipe, .wa-microfone) svg { width: 22px; height: 22px; }
html.v2 .v2-mais { background: #414962; color: #fff; width: 44px; height: 44px; }
html.v2 .v2-mais:hover, html.v2 .v2-mais[aria-expanded="true"] { background: var(--v2-escuro); color: #fff; }
html.v2 .wa-enviar { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #3e435d; font-size: 0; display: inline-flex; align-items: center; justify-content: center; }
html.v2 .wa-enviar svg { width: 24px; height: 24px; }
html.v2 .wa-enviar:hover { background: #ecf3fe; color: var(--v2-azul); }
html.v2 .wa-dica { display: none; }

/* Painel da direita (300 px), no jeito do painel de Ticket: título, rótulos e valores em caixas. */
html.v2 .wa.layout-novo .wa-lateral, html.v2 .wa-lateral { background: #fff; border-left: 1px solid var(--borda); padding: 16px 16px 24px; font-size: 14px; }
html.v2 .wa-ln-cabeca { flex-direction: row; align-items: center; text-align: left; gap: 10px; padding-bottom: 12px; }
html.v2 .wa-ln-cabeca > .wa-avatar { width: 40px; height: 40px; font-size: 17px; background: var(--v2-avatar); color: #fff; font-weight: 600; }
html.v2 .wa-ln-cabeca > strong { font-size: 20px; font-weight: 700; }
html.v2 .wa-ln-titulo { margin: 18px 0 8px; font-size: 15px; font-weight: 700; color: var(--texto); }
html.v2 .wa-ln-dados { display: block; }
html.v2 .wa-ln-dados dt { margin: 10px 0 4px; font-size: 14px; color: var(--texto); }
html.v2 .wa-ln-dados dd { display: flex; align-items: center; gap: 6px; min-height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--v2-campo); border-radius: 4px; font-size: 15px; }
html.v2 .wa-ln-item { border: 1px solid var(--v2-borda-cartao); border-radius: 4px; padding: 10px 12px; }

/* ================= Páginas: conteúdo centralizado, cartões brancos discretos, tabela fina ================= */
html.v2 body.com-trilho > main.wrap:not(.wa-largo) { max-width: 1120px; margin: 0 auto; padding: 32px 40px 48px; }
html.v2 main h1 { font-size: 26px; font-weight: 600; letter-spacing: 0; }
html.v2 :is(.cfg-bloco, .cartao, .caixa) { background: #fff; border: 1px solid var(--v2-borda-cartao); border-radius: 4px; box-shadow: none; }
html.v2 table { font-size: 14px; }
html.v2 table th { font-size: 14px; font-weight: 700; color: var(--texto); }
html.v2 table td { border-bottom-color: #ececee; }
html.v2 main a:not(.btn):not(.btn-p):not(.btn-mini):not(.wa-item):not(.wa-aba):not(.trilho-item):not(.v2-pilula) { color: var(--v2-azul); }

/* Discador (painel ao lado). */
html.v2 body.tel { font-family: "Nunito Sans", system-ui, sans-serif; font-size: 14px; }

/* ================= Celular: sem a barra de cima, o menu volta ao topo de sempre ================= */
@media (max-width: 860px) {
  html.v2 { --topo-h: 0px; }
  html.v2 .v2-topo { display: none; }
  html.v2 body.com-trilho { padding-top: 0; }
  html.v2 body.com-trilho :is(.wa, .wa.sem-lateral, .wa.com-tel, .wa.com-tel.com-conversa, .wa.com-tel.sem-lateral) { height: calc(100dvh - 52px); grid-template-columns: minmax(0, 1fr); }
  html.v2 .trilho, html.v2[data-trilho="aberto"] .trilho { top: 0; width: 100%; height: auto; flex: none; padding: 8px 12px; }
  html.v2 .trilho-topo { display: flex; background: var(--v2-topo); }
  html.v2 .trilho .trilho-nome { display: inline; color: #fff; }
  html.v2 .trilho .trilho-rotulo { display: inline; }
  html.v2 .trilho-abrir-movel { color: #fff; border-color: #5f6266; }
  html.v2 .trilho-item { width: 100%; justify-content: flex-start; padding: 0 11px; }
  html.v2 .wa-lista-dentro { width: auto; }
}
/* v1.73.1: abas numa linha só (como nas fotos) e valores do painel da direita alinhados à esquerda. */
html.v2 .wa .wa-abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html.v2 .wa .wa-aba { flex: 1 0 auto; padding: 0 8px; font-size: 14.5px; }
html.v2 .wa .wa-aba .wa-qtd { font-size: 14.5px; }
html.v2 .wa-ln-dados dd { justify-content: flex-start; text-align: left; color: var(--texto); font-size: 15px; }
html.v2 .wa-ln-dados dd .mudo { color: var(--mudo); font-size: 15px; }

/* v1.73.5: o item da lista não passa para a coluna da conversa (nome longo + selo encolhem e cortam com "…");
   a linha entre a lista e a conversa fica sempre visível. */
html.v2 .wa-col-lista { position: relative; z-index: 1; overflow: hidden; border-right: 1px solid var(--borda); }
html.v2 .wa-lista-dentro, html.v2 #wa-lista { max-width: 100%; overflow-x: hidden; }
html.v2 .wa .wa-item.v2-item { min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
html.v2 .v2-item-corpo { overflow: hidden; }
html.v2 .v2-item-l1 strong { flex: 0 1 auto; min-width: 0; }
html.v2 .v2-item-l1 .v2-selo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.v2 .v2-item-l3 { overflow: hidden; }
html.v2 .v2-item-l3 > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v1.73.8: menu abre com o mouse (por cima da tela, com sombra) e "Fixar menu" no rodapé deixa aberto empurrando a tela. */
html.v2 .trilho { overflow: visible; }
html.v2 .trilho .trilho-alternar { display: flex; }
html.v2[data-trilho="aberto"] .trilho { flex-basis: 220px; width: 220px; padding: 14px 10px; }
html.v2[data-trilho="aberto"] .trilho :is(.trilho-nav, .trilho-rodape) { align-items: stretch; }
html.v2[data-trilho="aberto"] .trilho-item { width: 100%; height: 40px; justify-content: flex-start; gap: 12px; padding: 0 12px; font-size: 14px; }
html.v2[data-trilho="aberto"] .trilho .trilho-item .trilho-rotulo { display: inline; }
html.v2[data-trilho="aberto"] .trilho-item svg { width: 20px; height: 20px; }
html.v2[data-trilho="aberto"] .trilho-item.ativo::before { left: -10px; }
html.v2 .trilho-alternar svg { width: 18px; height: 18px; }
/* Aberto só pelo mouse: por cima, sem empurrar (a vaga de 68 px continua). */
html.v2[data-trilho-flutua] body.com-trilho { padding-left: 68px; }
html.v2[data-trilho-flutua] .trilho { position: fixed; left: 0; top: 48px; z-index: 35; box-shadow: 6px 0 18px rgba(0, 0, 0, .12); }
@media (max-width: 860px) { html.v2[data-trilho-flutua] body.com-trilho { padding-left: 0; } html.v2[data-trilho-flutua] .trilho { position: sticky; top: 0; box-shadow: none; } }
/* v1.73.7: faixa grafite das abas da caixa de atendimento mais fina (36 px). */
html.v2 .wa .wa-abas { padding: 4px 8px; gap: 2px; }
html.v2 .wa .wa-aba { height: 28px; padding: 0 9px; font-size: 13.5px; }
html.v2 .wa .wa-aba .wa-qtd { font-size: 13.5px; }

/* v1.73.8: título e botão verde menores e mais suaves. */
html.v2 .wa-lista-topo { padding: 14px 12px 10px 18px; gap: 6px; }
html.v2 .wa-lista-topo h1 { font-size: 18px; font-weight: 600; color: #2b2b2e; }
html.v2 .v2-icone-btn { width: 32px; height: 32px; }
html.v2 .wa-lista-topo .v2-icone-btn svg { width: 19px; height: 19px; }
html.v2 .v2-disponivel { height: 28px; gap: 6px; padding: 0 8px; border-width: 1px; border-color: #7cc492; background: #eef8f0; color: #2e7a46; }
html.v2 .v2-disp-ponto { width: 11px; height: 11px; background: #34a853; }
html.v2 .v2-disponivel svg { width: 14px; height: 14px; }
html.wa-som-mudo .v2-disponivel { border-color: #c4c7cc; background: #f4f4f5; color: #6b6b6f; }

/* ================= v1.74.0: páginas no jeito das fotos (Regras de segmentação, Performance dos envios, Envio) ================= */
html.v2 body.com-trilho > main.wrap:not(.wa-largo) { max-width: 1060px; padding: 26px 40px 48px; }
.v2-caminho { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: 13px; color: var(--mudo); }
html.v2 main .v2-caminho a { color: var(--texto-2); text-decoration: none; }
html.v2 main .v2-caminho a:hover { text-decoration: underline; }
.v2-pagina-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 0 0 22px; }
html.v2 .v2-pagina-topo h1 { margin: 0 0 6px; font-size: 24px; font-weight: 600; }
.v2-sub { margin: 0; font-size: 13.5px; color: var(--mudo); max-width: 640px; }
.v2-btn-primario { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: 3px; background: #2a43c8; color: #fff !important;
  font: inherit; font-size: 14px; font-weight: 700; text-decoration: none !important; cursor: pointer; }
.v2-btn-primario:hover { background: #2238ad; }
.v2-link-acao { padding: 0; border: 0; background: none; color: var(--v2-azul) !important; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.v2-link-acao:hover { text-decoration: underline; }
/* Busca e contagem. */
.v2-barra-busca, .v2-pilulas-linha { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 12px; }
.v2-busca-pagina { position: relative; display: flex; align-items: center; width: 300px; max-width: 100%; margin: 0; }
.v2-busca-pagina svg { position: absolute; left: 10px; color: var(--mudo); pointer-events: none; }
html.v2 .v2-busca-pagina input { width: 100%; height: 34px; margin: 0; padding: 0 10px 0 32px; border: 1px solid #8f949b; border-radius: 3px; background: #fff; font-size: 14px; }
.v2-busca-larga { flex: 1; width: auto; }
.v2-contagem { font-size: 12.5px; color: var(--mudo); white-space: nowrap; }
.v2-filtros-linha { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
html.v2 .v2-filtros-linha select { height: 34px; margin: 0; min-width: 220px; border: 1px solid #8f949b; border-radius: 3px; background: #fff; font-size: 14px; }
.v2-pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
html.v2 .v2-pilulas .v2-pilula { height: 26px; padding: 0 10px; font-size: 13px; }
/* Tabela fina: cabeçalho em negrito, linhas brancas com divisória clara, ações à direita. */
.v2-tabela-caixa { background: #fff; border: 1px solid var(--v2-borda-cartao); border-radius: 3px; overflow-x: auto; }
html.v2 table.v2-tabela { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: #fff; font-size: 13.5px; box-shadow: none; border-radius: 0; }
html.v2 .v2-tabela th { padding: 12px 14px; border-bottom: 1px solid #d6d9de; background: #fff; font-size: 13.5px; font-weight: 700; color: var(--texto); text-align: left; text-transform: none; letter-spacing: 0; }
html.v2 .v2-tabela td { padding: 11px 14px; border-bottom: 1px solid #ececee; background: #fff; vertical-align: middle; color: var(--texto); }
html.v2 .v2-tabela tbody tr:nth-child(even) td { background: #fff; }
html.v2 .v2-tabela tbody tr:hover td { background: #fafafb; }
html.v2 .v2-tabela tbody tr:last-child td { border-bottom: 0; }
html.v2 .v2-tabela .num { text-align: right; }
html.v2 .v2-tabela .acoes { width: 1%; white-space: nowrap; text-align: right; }
html.v2 .v2-tabela td strong { font-weight: 600; }
html.v2 main table.v2-tabela:not(.v2-tabela-caixa table) { border: 1px solid var(--v2-borda-cartao); border-radius: 3px; }
.v2-tabela .acoes form.inline { display: inline; margin-right: 10px; }
.v2-link-nome { color: var(--v2-azul) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.v2-linha2 { display: block; margin-top: 2px; font-size: 12px; color: var(--mudo); }
/* Menu ⋮ de cada linha. */
.v2-mais-acoes { position: relative; display: inline-block; vertical-align: middle; }
.v2-mais-acoes > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #3c3c3c; cursor: pointer; }
.v2-mais-acoes > summary::-webkit-details-marker { display: none; }
.v2-mais-acoes > summary:hover, .v2-mais-acoes[open] > summary { background: #ececee; }
.v2-mais-lista { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 170px; padding: 6px 0; background: #fff; border: 1px solid var(--v2-borda-cartao); border-radius: 4px; box-shadow: 0 8px 22px rgba(0, 0, 0, .14); text-align: left; }
.v2-mais-lista form { margin: 0; }
.v2-mais-lista :is(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; border: 0; background: none; color: var(--texto) !important; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; text-align: left; }
.v2-mais-lista :is(a, button):hover { background: #f3f3f5; }
.v2-mais-lista .perigo { color: #a1301f !important; }
/* Cartões (Performance): grade de 2, número grande, linhas com seta, caixas cinza. */
.v2-grade-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; margin: 0 0 26px; }
.v2-cartao { background: #fff; border: 1px solid var(--v2-borda-cartao); border-radius: 3px; padding: 18px 20px; }
html.v2 .v2-cartao h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
html.v2 .v2-cartao h2 small { font-size: 12.5px; font-weight: 400; margin-left: 6px; }
.v2-cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.v2-cartao-topo small { font-size: 12px; color: var(--mudo); }
.v2-numero-grande { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 8px; }
.v2-numero-grande strong { font-size: 26px; font-weight: 400; }
.v2-numero-grande span { font-size: 12.5px; color: var(--mudo); }
.v2-linhas { list-style: none; margin: 0; padding: 0; }
.v2-linhas a { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed #d6d9de; color: var(--texto) !important; font-size: 13.5px; text-decoration: none; }
.v2-linhas a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-linhas a b { font-weight: 700; }
.v2-linhas a svg { color: var(--v2-azul); }
.v2-linhas a:hover span, .v2-linhas a.ativo span { color: var(--v2-azul); }
.v2-rodape-cartao { margin: 10px 0 0; font-size: 12px; color: var(--mudo); }
.v2-caixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.v2-caixa { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: #f8f9fa; border: 1px solid #d6d9de; border-radius: 3px; }
.v2-caixa span { font-size: 13.5px; }
.v2-caixa strong { font-size: 26px; font-weight: 400; }
.v2-caixa small { font-size: 12px; color: var(--mudo); }
.v2-secao-topo { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; }
html.v2 .v2-secao-topo h2 { margin: 0; font-size: 16px; font-weight: 600; }
.v2-secao-topo small { font-size: 12px; color: var(--mudo); }
.v2-vazio { padding: 18px 20px; }
.v2-nota { margin-top: 10px; font-size: 12.5px; }
.v2-cartao-form { margin: 0 0 18px; padding: 18px 20px; }
/* Configurações: cartões com linhas clicáveis. */
.v2-cfg { max-width: 760px; }
.v2-cfg-cartao { margin: 0 0 16px; padding: 16px 0 6px; }
html.v2 .v2-cfg-cartao h2 { margin: 0 20px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mudo); }
.v2-cfg-lista { display: flex; flex-direction: column; }
.v2-cfg-linha { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid #ececee; color: var(--texto) !important; text-decoration: none !important; }
.v2-cfg-linha:hover { background: #fafafb; }
button.v2-cfg-tema { width: 100%; background: none; border: 0; border-top: 1px solid #ececee; font: inherit; text-align: left; cursor: pointer; }
button.v2-cfg-tema.ativo { background: #eef2fd; box-shadow: inset 3px 0 0 #2c4fd7; }
.v2-cfg-linha > svg { color: #8a8f99; }
.v2-cfg-ico { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #ecf3fe; color: var(--v2-azul); }
.v2-cfg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-cfg-txt strong { font-size: 14.5px; font-weight: 600; }
.v2-cfg-txt small { font-size: 12.5px; color: var(--mudo); }
@media (max-width: 860px) {
  html.v2 body.com-trilho > main.wrap:not(.wa-largo) { padding: 18px 14px 40px; }
  .v2-pagina-topo, .v2-barra-busca, .v2-filtros-linha, .v2-pilulas-linha { flex-direction: column; align-items: stretch; }
  .v2-grade-2 { grid-template-columns: minmax(0, 1fr); }
  .v2-busca-pagina { width: 100%; }
}
/* v1.74.1: busca dos Relatórios com espaço (o seletor fica do tamanho dele); Configurações com menos espaço entre os cartões. */
html.v2 .v2-filtros-linha .v2-busca-larga { flex: 1 1 auto; min-width: 260px; width: auto; }
html.v2 .v2-filtros-linha select { flex: 0 0 auto; width: auto; max-width: 280px; }
html.v2 .v2-cfg > section.v2-cfg-cartao { margin: 0 0 14px; }
html.v2 .v2-cfg .v2-pagina-topo { margin-bottom: 18px; }
html.v2 .v2-cfg .v2-caminho { margin-top: 0; }
html.v2 .v2-filtros-linha select { padding: 0 30px 0 10px; line-height: 32px; }
html.v2 .wa-btn-encerrar svg { width: 24px; height: 24px; }

/* v1.74.6: discador na beirada direita (fora da tela de conversa) sempre ABAIXO da barra de cima; o chat ocupa a largura toda e abre espaço à direita. */
@media (min-width: 761px) {
  html.v2 body.tel-painel .tel-lado:not(.encaixado):not(.recolhido) { position: fixed; top: 48px; right: 0; bottom: 0; height: auto; width: 320px; z-index: 30; border-left: 1px solid var(--borda); }
  html.v2.v2-com-discador body.com-trilho { padding-right: 320px; }
}

/* ================= v1.75.0: telas de entrada (opção B do mockup): barra grafite do sistema em cima, cartão branco no centro ================= */
html.v2 body:has(main.v2-entrada) { background: #f3f3f5; }
html.v2 body:has(main.v2-entrada)::before { display: none; }
html.v2 body:has(main.v2-entrada) > .topo { display: none; }
html.v2 main.wrap.v2-entrada { max-width: none; margin: 0; padding: 0; }
.v2e { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; font-family: "Nunito Sans", system-ui, sans-serif; background: #f3f3f5; }
.v2e-topo { position: relative; flex: none; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 20px 5px; background: #363636; color: #fff; }
.v2e-topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, #2c4fd7, #3b7be0 35%, #f08a24 75%, #f26b0f); }
.v2e-sigla { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff; border-radius: 3px; font-weight: 800; font-size: 11px; }
.v2e-nome { font-size: 13.5px; letter-spacing: .18em; white-space: pre; }
.v2e-produto { margin-left: auto; font-size: 12.5px; color: #b9b9b9; }
.v2e-centro { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 16px; }
.v2e-cartao { width: 100%; max-width: 420px; box-sizing: border-box; padding: 36px 40px 32px; background: #fff; border: 1px solid #e5e7e9; border-radius: 4px; color: #222; }
.v2e-rodape { margin: 0; font-size: 12.5px; color: #6b6b6f; text-align: center; }
.v2e-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
html.v2 .v2e-form h1 { margin: 0; font-size: 24px; font-weight: 600; }
.v2e-sub { margin: -8px 0 0; font-size: 14px; color: #5f6064; }
html.v2 .v2e-form label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; color: #222; }
html.v2 .v2e-form input:not([type=checkbox]) { width: 100%; height: 42px; margin: 0; padding: 0 12px; border: 1px solid #8f949b; border-radius: 3px; background: #fff; font: inherit; font-weight: 400; font-size: 15px; box-sizing: border-box; }
html.v2 .v2e-form input:not([type=checkbox]):focus { outline: 2px solid #c8d0f3; border-color: #2a43c8; }
.v2e-senha { position: relative; display: flex; }
html.v2 .v2e-senha input { padding-right: 44px !important; }
.v2e-olho { position: absolute; right: 3px; top: 3px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: #4a4f5c; cursor: pointer; border-radius: 3px; }
.v2e-olho:hover { background: #f3f3f5; }
html.v2 .v2e-form label.v2e-marcar { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; color: #3c3c3c; }
html.v2 .v2e-marcar input { width: 18px; height: 18px; margin: 0; accent-color: #2a43c8; }
.v2e-botao { height: 44px; border: 0; border-radius: 3px; background: #2a43c8; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.v2e-botao:hover { background: #2238ad; }
.v2e-botao.sec { background: #fff; color: #222; border: 1px solid #8f949b; }
.v2e-pe { margin: 4px 0 0; padding-top: 16px; border-top: 1px solid #ececee; font-size: 13.5px; text-align: center; }
html.v2 .v2e-pe a, html.v2 .v2e-sub a { color: #2a43c8; }
.v2e-aviso { margin: 0 0 14px; }
.v2e-mais { margin-top: 16px; font-size: 13.5px; }
.v2e-mais summary { cursor: pointer; color: #2a43c8; }
.v2e-mais .v2e-form { margin-top: 12px; }
/* Login escuro (LOGIN_ENTERPRISE=escuro, opção C do mockup de 27/10): tela grafite inteira, linha colorida em cima,
   marca no centro e o formulário direto no fundo escuro (sem cartão). */
.v2e-escuro { background: #262628 radial-gradient(circle at 50% 38%, rgba(59,123,224,.10), transparent 55%); color: #f1f2f4; }
.v2e-filete { flex: none; height: 7px; background: linear-gradient(90deg, #2c4fd7, #3b7be0 35%, #f08a24 75%, #f26b0f); }
.v2e-escuro .v2e-centro { gap: 30px; }
.v2e-marca { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.v2e-escuro .v2e-marca .v2e-sigla { width: 52px; height: 52px; border: 3px solid #fff; border-radius: 10px; font-size: 19px; }
.v2e-escuro .v2e-marca .v2e-sigla:is(.v2e-sigla-3) { font-size: 16px; letter-spacing: -.02em; }
.v2e-sigla-3 { font-size: 10px; letter-spacing: -.03em; }
.v2e-escuro .v2e-marca .v2e-nome { font-size: 15px; font-weight: 700; letter-spacing: .32em; color: #fff; }
.v2e-escuro .v2e-marca .v2e-produto { margin: 0; font-size: 13px; color: #a9adb3; }
.v2e-escuro .v2e-cartao { max-width: 360px; padding: 0; background: none; border: 0; color: #f1f2f4; }
html.v2 .v2e-escuro .v2e-form h1 { font-size: 19px; font-weight: 700; text-align: center; color: #fff; }
.v2e-escuro .v2e-sub { margin: 0; color: #a9adb3; text-align: center; }
html.v2 .v2e-escuro .v2e-form label { color: #d4d6da; font-weight: 700; font-size: 13px; }
html.v2 .v2e-escuro .v2e-form input:not([type=checkbox]) { height: 46px; border-color: #4a4b4f; background: #303033; color: #fff; }
html.v2 .v2e-escuro .v2e-form input:not([type=checkbox])::placeholder { color: #8d9198; }
html.v2 .v2e-escuro .v2e-form input:not([type=checkbox]):focus { outline: 2px solid rgba(59,123,224,.45); border-color: #3b7be0; }
html.v2 .v2e-escuro .v2e-form input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #303033 inset; -webkit-text-fill-color: #fff; }
.v2e-escuro .v2e-olho { color: #a9adb3; }
.v2e-escuro .v2e-olho:hover { background: #3a3a3e; }
html.v2 .v2e-escuro .v2e-form label.v2e-marcar { color: #c9ccd1; font-weight: 400; font-size: 14px; }
html.v2 .v2e-escuro .v2e-marcar input { accent-color: #3b7be0; }
.v2e-escuro .v2e-botao { height: 48px; background: #2c4fd7; }
.v2e-escuro .v2e-botao:hover { background: #3b5fe6; }
.v2e-escuro .v2e-botao.sec { background: none; color: #f1f2f4; border-color: #4a4b4f; }
.v2e-escuro .v2e-pe { border-top: 0; padding-top: 0; }
html.v2 .v2e-escuro :is(.v2e-pe, .v2e-sub, .v2e-mais) a, .v2e-escuro .v2e-mais summary { color: #8fb0ff !important; text-decoration: none; }
html.v2 .v2e-escuro :is(.v2e-pe, .v2e-sub, .v2e-mais) a:hover { color: #b8ccff !important; text-decoration: underline; }
.v2e-escuro .v2e-aviso { border-radius: 4px; }
.v2e-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 16px 24px; font-size: 12px; color: #8d9198; border-top: 1px solid #333336; }
/* v1.97.0: LOGIN_ENTERPRISE=dividido (opção A do mockup de 27/10): painel grafite à esquerda, formulário no branco à direita. */
.v2e-dividido { flex-direction: row; flex-wrap: wrap; background: #fff; color: #1f2329; }
.v2e-painel { flex: 1 1 560px; position: relative; display: flex; flex-direction: column; min-height: 520px; padding: 40px 56px; box-sizing: border-box; background: #2f2f30 repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 22px); color: #fff; }
.v2e-painel::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 7px; background: linear-gradient(180deg, #2c4fd7, #3b7be0 35%, #f08a24 75%, #f26b0f); }
.v2e-painel-marca { display: flex; align-items: center; gap: 12px; }
.v2e-painel-marca .v2e-sigla { width: 34px; height: 34px; border-radius: 6px; font-size: 13px; }
.v2e-painel-marca .v2e-nome { font-size: 14px; font-weight: 700; letter-spacing: .28em; }
.v2e-painel-meio { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: 520px; padding: 48px 0; }
.v2e-chamada { margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #f08a24; }
html.v2 .v2e-frase { margin: 0; font-size: 38px; line-height: 1.15; font-weight: 800; color: #fff; }
.v2e-frase-sub { margin: 14px 0 0; font-size: 15.5px; line-height: 1.55; color: #c5c8cd; }
.v2e-mini { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; overflow: hidden; }
.v2e-mini-abas { display: flex; gap: 18px; padding: 10px 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12.5px; color: #c5c8cd; }
.v2e-mini-abas span { padding-bottom: 8px; }
.v2e-mini-abas .ativa { color: #fff; font-weight: 700; box-shadow: inset 0 -2px 0 #3b7be0; }
.v2e-mini-linha { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.v2e-mini-linha + .v2e-mini-linha { border-top: 1px solid rgba(255,255,255,.06); }
.v2e-mini-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #5f5f61; font-size: 11px; font-weight: 700; }
.v2e-mini-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.v2e-mini-txt small { font-size: 12.5px; color: #b9bdc3; }
.v2e-mini-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.12); color: #e2e4e7; }
.v2e-mini-tag.azul { background: rgba(59,123,224,.25); color: #c6d8fa; }
.v2e-mini-tag.laranja { background: rgba(240,138,36,.22); color: #fbd2a8; }
.v2e-painel-pe { font-size: 12px; color: #9a9ea5; }
.v2e-dividido .v2e-centro { flex: 1 1 480px; padding: 48px 24px; }
.v2e-dividido .v2e-cartao { max-width: 380px; padding: 0; background: none; border: 0; color: #1f2329; }
html.v2 .v2e-dividido .v2e-form h1 { font-size: 26px; font-weight: 800; }
.v2e-dividido .v2e-sub { margin-top: -10px; color: #5b616b; }
html.v2 .v2e-dividido .v2e-form label { font-size: 13px; font-weight: 700; }
html.v2 .v2e-dividido .v2e-form input:not([type=checkbox]) { height: 44px; border-color: #cfd4db; border-radius: 4px; font-size: 14px; }
.v2e-dividido .v2e-botao { height: 46px; border-radius: 4px; background: #2c4fd7; }
.v2e-dividido .v2e-botao:hover { background: #1e3aa8; }
.v2e-dividido .v2e-pe { border-top: 0; padding-top: 0; text-align: left; }
html.v2 .v2e-dividido :is(.v2e-pe, .v2e-sub, .v2e-mais) a { color: #2c4fd7; text-decoration: none; font-weight: 600; }
.v2e-cadeado { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: 12px; color: #6b717a; }
@media (max-width: 1100px) { .v2e-painel { padding: 32px 36px; } html.v2 .v2e-frase { font-size: 30px; } }
@media (max-width: 900px) {
  .v2e-painel { flex-basis: 100%; min-height: 0; padding: 22px 24px; }
  .v2e-painel::after { top: auto; left: 0; width: auto; height: 5px; background: linear-gradient(90deg, #2c4fd7, #3b7be0 35%, #f08a24 75%, #f26b0f); }
  .v2e-painel-meio, .v2e-painel-pe { display: none; }
  .v2e-dividido .v2e-centro { justify-content: flex-start; padding-top: 36px; }
}
/* v1.98.0: LOGIN_ENTERPRISE=sistema (opção B do mockup de 27/10): cartão com cabeçalho grafite por cima do sistema desfocado. */
.v2e-sistema { position: relative; overflow: hidden; background: #e9ebee; color: #1f2329; }
.v2e-fundo { position: absolute; inset: 0; display: flex; flex-direction: column; filter: blur(3px); opacity: .55; }
.v2e-fundo-barra { height: 51px; background: #363636; }
.v2e-fundo-filete, .v2e-cartao-filete { height: 7px; background: linear-gradient(90deg, #2c4fd7, #3b7be0 35%, #f08a24 75%, #f26b0f); }
.v2e-fundo-corpo { flex: 1; display: flex; }
.v2e-fundo-trilho { width: 64px; background: #fff; border-right: 1px solid #dcdfe3; }
.v2e-fundo-lista { width: 340px; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: #fff; border-right: 1px solid #dcdfe3; }
.v2e-fundo-lista i { height: 62px; border-radius: 6px; background: #f1f2f4; }
.v2e-fundo-lista i.cab { height: 30px; width: 60%; border-radius: 4px; background: #e3e5e8; }
.v2e-fundo-lista i.sel { background: #e8edfc; }
.v2e-fundo-conversa { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.v2e-fundo-conversa i { align-self: flex-start; width: 320px; height: 44px; border-radius: 8px; background: #fff; }
.v2e-fundo-conversa i.eq { align-self: flex-end; width: 260px; background: #c9d6f8; }
.v2e-fundo-conversa i.alta { width: 380px; height: 64px; }
.v2e-fundo-veu { position: absolute; inset: 0; background: rgba(38,40,44,.55); }
.v2e-sistema .v2e-centro { position: relative; gap: 20px; }
.v2e-sistema .v2e-cartao { max-width: 420px; padding: 0; overflow: hidden; border: 0; border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.v2e-cartao-topo { display: flex; align-items: center; gap: 12px; padding: 22px 32px; background: #363636; color: #fff; }
.v2e-cartao-topo .v2e-sigla { flex: none; width: 34px; height: 34px; border-radius: 6px; font-size: 13px; }
.v2e-cartao-topo > span:last-child { display: flex; flex-direction: column; }
.v2e-cartao-topo .v2e-nome { font-weight: 700; font-size: 14px; letter-spacing: .28em; }
.v2e-sistema .v2e-cartao-topo .v2e-produto { display: block; margin: 0; font-size: 12px; color: #c9c9c9; }
.v2e-cartao-corpo { padding: 28px 32px 30px; }
html.v2 .v2e-sistema .v2e-form h1 { font-size: 22px; font-weight: 800; }
html.v2 .v2e-sistema .v2e-form label { font-size: 13px; font-weight: 700; }
html.v2 .v2e-sistema .v2e-form input:not([type=checkbox]) { height: 44px; border-color: #cfd4db; border-radius: 4px; font-size: 14px; }
.v2e-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
html.v2 .v2e-linha a, html.v2 .v2e-sistema :is(.v2e-pe, .v2e-sub, .v2e-mais) a { color: #2c4fd7; font-size: 13px; font-weight: 600; text-decoration: none; }
.v2e-sistema .v2e-botao { height: 46px; border-radius: 4px; background: #2c4fd7; }
.v2e-sistema .v2e-botao:hover { background: #1e3aa8; }
.v2e-sistema .v2e-pe { border-top: 0; padding-top: 0; }
.v2e-sistema .v2e-rodape { color: #e6e8eb; }
@media (max-width: 600px) { .v2e-fundo-lista { width: 100%; } .v2e-fundo-trilho, .v2e-fundo-conversa { display: none; } .v2e-cartao-topo, .v2e-cartao-corpo { padding-left: 22px; padding-right: 22px; } }
@media (max-width: 600px) {
  .v2e-produto { display: none; }
  .v2e-cartao { padding: 26px 22px; }
}

/* Gaveta Tarefas do atendimento (regras no style.css): aqui só começa abaixo da barra de cima. */
html.v2 .v2-gaveta, html.v2 .v2-gaveta-veu { top: 48px; }
/* Discador na beirada direita (fica por cima da moldura do chat): a gaveta abre logo à esquerda dele. */
@media (min-width: 761px) { html.v2.v2-com-discador .v2-gaveta { right: 320px; } html.v2.v2-com-discador .v2-gaveta-veu { right: 320px; } }

/* Janela do Transferir no jeito do LAB2: letra 14 px, campos da altura do seletor de grupos, cantos de 4 px,
   lista sem as bolinhas de rádio (escolhido em azul claro com filete) e rodapé separado com os botões. */
html.v2 .wa-transf-janela { width: min(480px, calc(100vw - 32px)); padding: 0; gap: 0; border: 1px solid var(--v2-borda); border-radius: 6px; box-shadow: 0 18px 48px rgba(20, 24, 40, .22); }
html.v2 .wa-transf-janela::backdrop { background: rgba(20, 22, 30, .45); }
html.v2 .wa-transf-janela .wa-part-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--v2-borda); }
html.v2 .wa-transf-janela .wa-part-topo h3 { font-size: 17px; font-weight: 700; color: var(--texto); }
html.v2 .wa-transf-janela .wa-transf-caixa { gap: 6px; padding: 18px 20px 0; }
html.v2 .wa-transf-passo { margin: 6px 0 0; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--texto-2); }
html.v2 .wa-transf-passo:first-of-type { margin-top: 0; }
html.v2 .wa-transf-escolha { height: 40px; padding: 0 12px; border: 1px solid var(--v2-campo); border-radius: 4px; background: #fff; font-size: 15px; }
html.v2 .wa-transf-escolha:hover:not([disabled]) { border-color: var(--v2-escuro); }
html.v2 .wa-transf-escolha[aria-expanded="true"] { border-color: var(--v2-azul); box-shadow: 0 0 0 1px var(--v2-azul); }
html.v2 .wa-transf-escolha[disabled] { background: #f7f7f8; border-color: var(--v2-borda); cursor: default; }
html.v2 .wa-transf-seta { color: var(--v2-icone); }
html.v2 .wa-transf-menu-setor .wa-transf-suspenso { border: 1px solid var(--v2-borda); border-radius: 4px; box-shadow: 0 10px 28px rgba(20, 24, 40, .16); }
html.v2 .wa-transf-pessoas { border: 0; border-radius: 0; }
html.v2 :is(.wa-transf-setor, .wa-transf-pessoa) { gap: 12px; padding: 10px 14px; border: 0; border-left: 3px solid transparent; border-radius: 0; font-size: 15px; }
html.v2 :is(.wa-transf-setor, .wa-transf-pessoa) + :is(.wa-transf-setor, .wa-transf-pessoa) { border-top: 1px solid var(--v2-borda-cartao); }
html.v2 :is(.wa-transf-setor, .wa-transf-pessoa):hover { background: #f5f5f6; }
html.v2 :is(.wa-transf-setor, .wa-transf-pessoa):has(input:checked) { background: var(--v2-azul-claro); border-left-color: var(--v2-azul); }
html.v2 .wa-transf-pessoa input { position: absolute; opacity: 0; width: 1px; height: 1px; }
html.v2 .wa-transf-pessoa:has(input:focus-visible) { outline: 2px solid var(--v2-azul); outline-offset: -2px; }
html.v2 .wa-transf-av { width: 32px; height: 32px; background: var(--v2-avatar); color: #fff; font-size: 13px; }
html.v2 .wa-transf-quem { line-height: 1.3; }
html.v2 .wa-transf-quem strong, html.v2 .wa-transf-setor strong { font-weight: 600; color: var(--texto); }
html.v2 .wa-transf-quem small, html.v2 .wa-transf-setor small { font-size: 13px; color: var(--mudo); }
html.v2 .wa-transf-nota { gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--texto-2); }
html.v2 .wa-transf-nota small { font-size: 13px; }
html.v2 .wa-transf-nota textarea { min-height: 76px; padding: 8px 10px; font-size: 14px; }
html.v2 .wa-transf-botoes { gap: 10px; margin: 18px -20px 0; padding: 14px 20px; border-top: 1px solid var(--v2-borda); background: #fafafb; border-radius: 0 0 6px 6px; }
html.v2 .wa-transf-botoes .btn-p { height: 36px; padding: 0 18px; font-size: 14px; font-weight: 600; }
html.v2 .wa-transf-botoes .btn-p[disabled] { opacity: .45; cursor: default; }

/* v1.88.1: no celular o menu é a barra de cima com "☰ Menu" (abre a lista com os nomes). O "Fixar menu" do computador
   (data-trilho="aberto", guardado no navegador) não vale aqui: antes deixava o menu com 220 px no topo e empurrava a tela,
   e solto mostrava só os ícones, sem os nomes. Fica no fim para ganhar das regras do menu fixado/flutuante. */
@media (max-width: 860px) {
  html.v2 .trilho, html.v2[data-trilho="aberto"] .trilho, html.v2[data-trilho-flutua] .trilho {
    flex: none; flex-basis: auto; width: 100%; padding: 8px 12px; }
  html.v2 .trilho :is(.trilho-nav, .trilho-rodape), html.v2[data-trilho="aberto"] .trilho :is(.trilho-nav, .trilho-rodape) { align-items: stretch; }
  html.v2 .trilho .trilho-item, html.v2[data-trilho="aberto"] .trilho .trilho-item { width: 100%; height: 44px; justify-content: flex-start; gap: 12px; padding: 0 12px; font-size: 15px; }
  html.v2 .trilho .trilho-item .trilho-rotulo { display: inline !important; }  /* ganha do "esconde rótulos" do menu de ícones */
  html.v2 .trilho .trilho-alternar, html.v2[data-trilho="aberto"] .trilho .trilho-alternar { display: none; }
  html.v2 .trilho .trilho-item.ativo::before { left: -12px; }
  /* v1.88.3: menu aberto toma a tela toda, por cima da conversa; "Menu" de novo volta. */
  html.v2 .trilho.movel-aberto, html.v2[data-trilho="aberto"] .trilho.movel-aberto, html.v2[data-trilho-flutua] .trilho.movel-aberto {
    position: fixed; inset: 0; z-index: 70; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--trilho, #fff); }
  html.v2 .trilho.movel-aberto .trilho-corpo { max-height: none; overflow: visible; }
  /* A barra de cima (com o botão da conta) some no celular: o Minha conta volta para o menu. */
  html.v2 .trilho a.trilho-item[href$="/conta"] { display: flex !important; }
}