/* AS CONEXÕES DO PAINEL (23/10/2026), comportamento em painel-conexoes.js.

   Só tela: toda cor, raio e sombra sai das variáveis do painel (styles.css), então claro, escuro e a marca de
   outra casa seguem valendo. Dois tipos de peça:
   - as que DIZEM alguma coisa (a tabela de acessos, a busca de cliente, o assunto, o mapa ao vivo e o pulso de cada
     chamada) valem em toda instalação;
   - o DESENHO do Alê MCP (os fios das trilhas nos marcos e nos passos, as trilhas no canto oposto, o brilho da aba,
     o fundo pulsando junto) só vale com a classe cx-trilhas no body, que o script não liga quando a instalação veste
     a marca de outra casa (data-marca, a Lab), do mesmo jeito que o fundo já sai lá (trilhas-de-fundo.css). */

/* ===================== CABEÇALHO DOS CARTÕES NOVOS ===================== */
.cx-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cx-cab h2 { margin: 0 0 4px; }
.cx-cab .sub { margin: 0; }

/* ===================== OS SEUS ACESSOS (Início) ===================== */
.cx-filtro { margin-top: 16px; flex-wrap: wrap; }
.cx-filtro .pnl-seg-btn b { margin-left: 4px; font-weight: 700; opacity: 0.7; }
.cx-tabela-wrap { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-x: auto; }
.cx-tabela { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cx-tabela th {
  padding: 10px 14px; text-align: left; white-space: nowrap;
  font-size: 0.74rem; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2);
}
.cx-tabela td { padding: 12px 14px; border-top: 1px solid var(--border); vertical-align: top; }
.cx-tabela td:first-child, .cx-tabela td:nth-child(3) { white-space: nowrap; }
.cx-tabela td strong { font-weight: 620; }
.cx-tabela .cx-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.84rem; }
.cx-tabela .cx-detalhe { min-width: 220px; line-height: 1.45; color: var(--muted); }
.cx-tabela tr.cx-recem td { background: var(--primary-soft); }
.cx-vazio { margin: 0; padding: 18px; text-align: center; color: var(--muted); }

/* A conexão de cada linha: fio inteiro (liberado), tracejado (esperando), cortado (não aprovado). */
.cx-situacao { display: inline-flex; align-items: center; gap: 8px; }
.cx-con { flex: none; width: 40px; height: 12px; overflow: visible; }
.cx-con .fio { fill: none; stroke-width: 2; stroke-linecap: round; }
.cx-con circle { stroke-width: 1.8; }
.cx-con.liberado .fio { stroke: var(--success); }
.cx-con.liberado circle { fill: var(--success); stroke: var(--success); }
.cx-con.pendente .fio { stroke: var(--warn); stroke-dasharray: 3 4; }
.cx-con.pendente .ponta-a { fill: var(--warn); stroke: var(--warn); }
.cx-con.pendente .ponta-b { fill: none; stroke: var(--warn); animation: cx-espera 2.4s ease-in-out infinite; }
.cx-con.recusado .fio { stroke: var(--danger); opacity: 0.7; }
.cx-con.recusado circle { fill: none; stroke: var(--danger); opacity: 0.7; }
@keyframes cx-espera { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* Pedido aprovado agora: o fio da linha se desenha e as pontas encaixam. */
.cx-con.cx-encaixe .fio { stroke-dasharray: 26; stroke-dashoffset: 26; animation: cx-nasce 0.9s ease-out forwards; }
.cx-con.cx-encaixe circle { transform-box: fill-box; transform-origin: center; animation: cx-encaixe 0.45s ease-out 0.75s both; }
@keyframes cx-nasce { to { stroke-dashoffset: 0; } }
@keyframes cx-encaixe { from { transform: scale(0.2); } 60% { transform: scale(1.35); } }

/* No celular a tabela vira um cartão por acesso: seis colunas não cabem em 390 px. */
@media (max-width: 640px) {
  .cx-tabela-wrap { border: 0; overflow: visible; }
  .cx-tabela thead { display: none; }
  .cx-tabela, .cx-tabela tbody, .cx-tabela tr, .cx-tabela td { display: block; width: 100%; }
  .cx-tabela tr { margin-bottom: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .cx-tabela td { display: flex; gap: 10px; padding: 4px 0; border: 0; }
  .cx-tabela td:first-child, .cx-tabela td:nth-child(3) { white-space: normal; }
  .cx-tabela td::before {
    content: attr(data-rotulo); flex: 0 0 92px; padding-top: 2px;
    font-size: 0.7rem; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted);
  }
  .cx-tabela .cx-detalhe { min-width: 0; }
  .cx-filtro { border-radius: var(--radius-sm); }
}

/* ===================== A SUA CONEXÃO AGORA (Início) ===================== */
.cx-estado { display: inline-flex; align-items: center; gap: 7px; }
.cx-batimento { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cx-em-uso .cx-batimento { animation: cx-batimento 1.6s ease-out infinite; }
@keyframes cx-batimento {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 8px transparent; }
}

.cx-mapa {
  position: relative; display: grid; align-items: center; gap: 64px;
  grid-template-columns: minmax(150px, 1fr) 150px minmax(190px, 1.25fr);
  margin: 22px 0 6px; padding: 6px 0;
}
.cx-no {
  position: relative; z-index: 2; padding: 11px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.cx-no b { display: block; font-size: 0.9rem; font-weight: 640; }
.cx-no span { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--muted); }
.cx-no.cx-aceso { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.cx-no.esperando { border-style: dashed; opacity: 0.75; }
.cx-no.esperando span { color: var(--warn); }
.cx-sistemas { position: relative; z-index: 2; display: grid; gap: 12px; }
.cx-mais { margin: 4px 0 0; text-align: right; }

.cx-no-centro { position: relative; z-index: 2; display: grid; justify-items: center; gap: 6px; }
.cx-no-centro b { font-size: 0.84rem; font-weight: 700; color: var(--muted); letter-spacing: 0.01em; }
.cx-plugue { width: 120px; height: 54px; overflow: visible; }
.cx-plugue .plugue { fill: var(--surface); stroke: var(--primary); stroke-width: 5; }
.cx-plugue .fenda { fill: var(--primary); opacity: 0.45; }
.cx-plugue.cx-bate .fenda { animation: cx-fenda 0.6s ease-out; }
.cx-plugue.cx-bate .plugue { animation: cx-plugue 0.6s ease-out; }
@keyframes cx-fenda { 0% { opacity: 0.45; } 25% { opacity: 1; } 100% { opacity: 0.45; } }
@keyframes cx-plugue { 25% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--primary) 70%, transparent)); } }
/* Com a marca de outra casa o plugue (desenho do Alê MCP) sai, e o centro vira uma caixa como as outras. */
:root[data-marca] .cx-plugue { display: none; }
:root[data-marca] .cx-no-centro b {
  padding: 11px 16px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--primary); border-radius: var(--radius-sm);
}
:root[data-marca] .cx-no-centro b.cx-bate { box-shadow: 0 0 0 4px var(--primary-soft); }

.cx-fios { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cx-fios .fio { fill: none; stroke: color-mix(in srgb, var(--primary) 30%, transparent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cx-fios .fio.esperando { stroke: color-mix(in srgb, var(--warn) 60%, transparent); stroke-dasharray: 4 6; }
.cx-fios .fio.nasce { stroke-dasharray: 100; stroke-dashoffset: 100; animation: cx-nasce 1.1s ease-out forwards; }
.cx-fios .ponta { fill: var(--surface); stroke: color-mix(in srgb, var(--primary) 50%, transparent); stroke-width: 2.5; }
.cx-fios .pulso {
  fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 22 200; stroke-dashoffset: 22;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--primary) 75%, transparent));
}

/* O batimento: as chamadas percebidas em cada conferência de 20 s, nos últimos 10 minutos. Tracejado é o tempo
   antes de o painel abrir, que ele não viu. */
.cx-batimentos { margin: 16px 0 0; }
.cx-ecg { display: block; width: 100%; height: 40px; overflow: visible; }
.cx-ecg path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cx-ecg .cx-ecg-antes { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 5; }
.cx-ecg .cx-ecg-linha { stroke: var(--primary); stroke-width: 2; }
.cx-ecg .cx-ecg-ponta { stroke: var(--primary); stroke-width: 6; }
.cx-ecg-legenda { display: flex; justify-content: space-between; margin-top: 2px; font-size: 0.72rem; color: var(--muted); }

.cx-resumo { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 0.84rem; color: var(--muted); }
.cx-resumo b { color: var(--text); font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .cx-mapa { grid-template-columns: 1fr; gap: 40px; justify-items: stretch; }
  .cx-no-ia { justify-self: center; text-align: center; }
  .cx-sistemas { grid-template-columns: repeat(var(--cx-n, 2), minmax(0, 1fr)); gap: 8px; }
  .cx-sistemas .cx-no { padding: 9px 10px; text-align: center; }
  .cx-mais { text-align: center; }
}

/* Um pulso que corre pela barra de abas até a aba que ganhou novidade, e o número que salta. */
.cx-nav-pulso {
  position: absolute; bottom: -1px; left: 0; z-index: 3; width: 34px; height: 3px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
}
.pnl-badge.cx-pop { animation: cx-pop 0.5s ease-out; }
@keyframes cx-pop { 40% { transform: scale(1.45); } }

/* ===================== BUSCA DE CLIENTE (Instalação, passo 1) ===================== */
.cx-combo { position: relative; }
.cx-combo input[type="text"] { padding-right: 46px; }
.cx-combo-abre {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.cx-combo-abre svg { width: 18px; height: 18px; }
.cx-combo-abre:hover { background: var(--primary-soft); color: var(--primary); }
.cx-combo-lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 300px; margin: 0; padding: 6px; overflow-y: auto; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.cx-combo-lista li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 0.92rem; }
.cx-combo-lista li.ativo { background: var(--primary-soft); }
.cx-combo-lista li[aria-selected="true"] { font-weight: 650; }
.cx-combo-lista li mark { background: none; color: var(--primary); font-weight: 700; }
.cx-combo-lista li small { margin-left: auto; color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.cx-ini {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary); font-size: 0.78rem; font-weight: 700;
}
.cx-combo-lista li.cx-fora-da-lista { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; color: var(--primary); font-weight: 600; }
.cx-combo-lista li.cx-nada { color: var(--muted); cursor: default; }

/* ===================== O ASSUNTO DA MENSAGEM (Suporte) ===================== */
.cx-assuntos-wrap { margin: 0 0 10px; }
.cx-rotulo { display: block; margin-bottom: 6px; font-size: 0.8rem; font-weight: 650; color: var(--muted); }
.cx-assuntos { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-assunto {
  padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.84rem; cursor: pointer;
}
.cx-assunto:hover { border-color: var(--primary); color: var(--primary); }
.cx-assunto[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }
#diag-suporte { margin-top: 14px; }

/* ===================== O DESENHO DO ALÊ MCP (só com cx-trilhas) ===================== */
/* Os três marcos do Início ligados por um fio, com o pulso correndo de um para o outro. */
.cx-trilhas .pnl-steps { gap: 30px; }
.cx-trilhas .pnl-step { position: relative; --cx-fio: var(--border-strong); }
.cx-trilhas .pnl-step.done { --cx-fio: var(--success); }
.cx-trilhas .pnl-step:not(:last-child)::after,
.cx-trilhas .pnl-step:not(:last-child)::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: 50%; left: 100%; width: 30px; height: 10px; margin-top: -5px;
}
.cx-trilhas .pnl-step:not(:last-child)::after {
  background:
    radial-gradient(circle at 4px 50%, var(--cx-fio) 0 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 4px) 50%, var(--cx-fio) 0 3px, transparent 3.6px),
    linear-gradient(var(--cx-fio), var(--cx-fio)) center / calc(100% - 8px) 2px no-repeat;
}
.cx-trilhas .pnl-step:not(:last-child)::before {
  z-index: 2;
  background: linear-gradient(90deg, transparent, var(--primary) 50%, transparent) no-repeat;
  background-size: 14px 2px; background-position: -14px 50%;
  animation: cx-fio-x 4s linear infinite;
}
.cx-trilhas .pnl-step:nth-child(2)::before { animation-delay: 1.2s; }
@keyframes cx-fio-x { 0% { background-position: -14px 50%; } 25%, 100% { background-position: 30px 50%; } }
@media (min-width: 761px) { .cx-trilhas .pnl-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .cx-trilhas .pnl-steps { grid-template-columns: 1fr; gap: 26px; }
  .cx-trilhas .pnl-step:not(:last-child)::after,
  .cx-trilhas .pnl-step:not(:last-child)::before { top: 100%; left: 19px; width: 10px; height: 26px; margin: 0; }
  .cx-trilhas .pnl-step:not(:last-child)::after {
    background:
      radial-gradient(circle at 50% 4px, var(--cx-fio) 0 3px, transparent 3.6px),
      radial-gradient(circle at 50% calc(100% - 4px), var(--cx-fio) 0 3px, transparent 3.6px),
      linear-gradient(var(--cx-fio), var(--cx-fio)) center / 2px calc(100% - 8px) no-repeat;
  }
  .cx-trilhas .pnl-step:not(:last-child)::before {
    background: linear-gradient(180deg, transparent, var(--primary) 50%, transparent) no-repeat;
    background-size: 2px 12px; background-position: 50% -12px;
    animation-name: cx-fio-y;
  }
}
@keyframes cx-fio-y { 0% { background-position: 50% -12px; } 25%, 100% { background-position: 50% 26px; } }

/* Os números dos passos da Instalação ligados por um fio (desenhado pelo script, porque a altura de cada passo
   muda com o que a pessoa abre). O pulso desce de um passo para o outro e acende o número quando chega. */
.cx-trilhas #passos { position: relative; }
.cx-fios-passos { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.cx-fios-passos .fio { fill: none; stroke: color-mix(in srgb, var(--primary) 32%, transparent); stroke-width: 2.5; stroke-linecap: round; }
.cx-fios-passos .ponta { fill: var(--surface); stroke: color-mix(in srgb, var(--primary) 45%, transparent); stroke-width: 2.5; }
.cx-fios-passos .pulso {
  fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 10 200; stroke-dashoffset: 10; animation: cx-passo-pulso 7.2s linear infinite;
}
@keyframes cx-passo-pulso { 0% { stroke-dashoffset: 10; } 14%, 100% { stroke-dashoffset: -100; } }
.cx-trilhas .pnl-passo-n.cx-acende { animation: cx-numero 7.2s ease-out infinite; }
@keyframes cx-numero {
  0%, 12% { box-shadow: 0 0 0 0 transparent; }
  15% { box-shadow: 0 0 0 6px var(--primary-soft); }
  30%, 100% { box-shadow: 0 0 0 0 transparent; }
}

/* As trilhas de fundo também no canto de cima à esquerda, espelhadas, com os pulsos meio ciclo depois dos do
   canto de baixo. Só em tela larga, onde sobra margem dos dois lados do conteúdo. */
.cx-fundo-2 { display: none; }
@media (min-width: 1180px) {
  .cx-trilhas .cx-fundo-2 { display: block; right: auto; bottom: auto; left: -8vmin; top: 64px; width: clamp(260px, 42vmin, 470px); transform: scale(-1, -1); }
}
.cx-fundo-2 .f1 { animation-delay: 4s; }
.cx-fundo-2 .f2 { animation-delay: 5s; }
.cx-fundo-2 .f3 { animation-delay: 6s; }
.cx-fundo-2 .f4 { animation-delay: 7s; }
.cx-fundo-2 .f5 { animation-delay: 8s; }
.cx-fundo-2 .f6 { animation-delay: 9s; }
.cx-fundo-2 .f7 { animation-delay: 10s; }
.cx-fundo-2 .f8 { animation-delay: 11s; }
/* O fundo bate junto com a primeira chamada de uma leva, no máximo uma vez a cada 12 s (o script segura). */
.cx-trilhas .ale-fundo.cx-rajada .pulso { animation: cx-rajada 1.4s linear 1 !important; stroke: color-mix(in srgb, var(--primary) 70%, transparent); }
@keyframes cx-rajada { from { stroke-dashoffset: 10; } to { stroke-dashoffset: -100; } }

/* A aba escolhida: um brilho curto corre pelo sublinhado, uma vez, como o plugue encaixando. */
.cx-trilhas .pnl-tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 50%, transparent) no-repeat;
  background-size: 45% 100%; background-position: -60% 0;
  animation: cx-aba 0.7s ease-out 1 both;
}
@keyframes cx-aba { to { background-position: 160% 0; } }

/* ===================== MENOS MOVIMENTO ===================== */
/* Quem pediu menos movimento ao sistema vê os fios parados e o painel sem pulso; os números continuam vivos. */
@media (prefers-reduced-motion: reduce) {
  .cx-trilhas .pnl-step::before, .cx-fios-passos .pulso, .cx-trilhas .pnl-tab.active::after { display: none; }
  .cx-con.pendente .ponta-b, .cx-trilhas .pnl-passo-n.cx-acende, .cx-em-uso .cx-batimento,
  .cx-plugue.cx-bate .fenda, .cx-plugue.cx-bate .plugue, .pnl-badge.cx-pop { animation: none; }
  .cx-fios .fio.nasce, .cx-con.cx-encaixe .fio, .cx-con.cx-encaixe circle { animation: none; stroke-dashoffset: 0; }
}
@media print {
  .cx-fundo-2, .cx-fios-passos { display: none; }
}