/* ══ Softphone EvoTalks ═══════════════════════════════════════════════════════
   O discador do EvoTalks redesenhado na linguagem do site: mesma moldura, mesma
   paleta, tipografia daqui. Nao e print da tela real, e a MESMA interface (ramal,
   tres abas, status, visor, teclado, botao verde) traduzida.

   MORA AQUI, e nao no hero-orbital.css, porque aparece em DOIS lugares: no painel
   "Telefonia VoIP" do orbital da home e no hero de /solucoes/voip. Enquanto estava
   junto do orbital, a LP nao tinha como usar sem carregar 3 mil linhas de CSS que
   nao servem pra ela. Arquivo unico tambem evita o pior: as duas copias divergirem
   e o mesmo produto aparecer diferente em duas paginas do mesmo site.

   Tamanho base = o do orbital (aparelho de 182px). A LP usa o modificador .pn-vo--lg
   la embaixo, que so aumenta escala; a estrutura e a mesma.

   ATENCAO ao mexer nos .ico daqui: quem gera o markup NAO pode injetar width/height
   inline, senao o tamanho inline vence estas regras e os icones saem todos do mesmo
   tamanho. Ver assets/js/softphone.js.
   ────────────────────────────────────────────────────────────────────────── */
.pn-vo { display: flex; gap: 14px; align-items: stretch; }

/* ── o aparelho ── */
.pn-vo-fone {
  flex: 0 0 182px;
  background: #fff;
  border: 1px solid rgba(15, 22, 38, 0.10);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Sombra discreta e neutra, no mesmo tom dos cards do painel do CRM. */
  box-shadow: 0 1px 2px rgba(30, 32, 38, 0.04);
}
.pn-vo-top {
  display: flex; align-items: center; justify-content: space-between;
  background: #1e2026;
  padding: 7px 9px;
}
.pn-vo-ramal { font-size: 10px; font-weight: 600; color: #fff; letter-spacing: .01em; }
/* O X é desenhado com duas linhas em vez de virar mais um arquivo de ícone:
   é decoração de 8px, não vale um request. */
.pn-vo-x { position: relative; width: 9px; height: 9px; opacity: .75; }
.pn-vo-x::before, .pn-vo-x::after {
  content: ''; position: absolute; top: 4px; left: 0;
  width: 9px; height: 1.2px; background: #fff; border-radius: 1px;
}
.pn-vo-x::before { transform: rotate(45deg); }
.pn-vo-x::after  { transform: rotate(-45deg); }

.pn-vo-tabs { display: flex; background: #1e2026; padding: 0 4px; }
.pn-vo-tab {
  flex: 1; display: grid; place-items: center;
  padding: 5px 0 6px;
  color: rgba(255, 255, 255, .45);
  border-bottom: 2px solid transparent;
}
.pn-vo-tab .ico { width: 13px; height: 13px; background-color: currentColor; }
.pn-vo-tab.is-on { color: #fff; border-bottom-color: var(--evo-green, #1bbf5d); }

.pn-vo-corpo { padding: 8px; display: flex; flex-direction: column; gap: 6px; }

.pn-vo-status {
  display: flex; align-items: center; gap: 6px;
  background: var(--evo-off-white, #eff2f7);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 10px; font-weight: 500; color: #5b606b;
  transition: background .3s ease, color .3s ease;
}
.pn-vo-status .bola {
  width: 6px; height: 6px; border-radius: 50%;
  background: #8a8f99; flex: 0 0 6px;
  transition: background .3s ease;
}
/* Chamando e falando mudam a cor do bloco inteiro: é o sinal de estado que a
   pessoa percebe de longe, sem precisar ler. */
.pn-vo[data-estado="chamando"] .pn-vo-status { background: #fef3c7; color: #92400e; }
.pn-vo[data-estado="chamando"] .pn-vo-status .bola { background: #d97706; }
.pn-vo[data-estado="falando"]  .pn-vo-status { background: var(--evo-green-soft, #d8f5e6); color: #16a34a; }
.pn-vo[data-estado="falando"]  .pn-vo-status .bola { background: var(--evo-green, #1bbf5d); }

.pn-vo-visor {
  display: flex; align-items: center; gap: 1px;
  min-height: 24px;
  border: 1px solid rgba(15, 22, 38, 0.10);
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 14px; font-weight: 600; color: #1e2026;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;   /* número não "dança" enquanto é digitado */
  /* NUNCA quebra linha: com o aparelho estreito o número virava "(47) 3516-" numa
     linha e "5005" na outra, e o visor crescia no meio da digitação. */
  white-space: nowrap; overflow: hidden;
}
.pn-vo-cursor {
  width: 1.5px; height: 13px; background: var(--evo-green, #1bbf5d);
  animation: pnVoCursor 1s steps(1) infinite;
}
@keyframes pnVoCursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.pn-vo-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pn-vo-key {
  appearance: none; border: 0; cursor: default;
  background: var(--evo-off-white, #eff2f7);
  border-radius: 999px;
  /* Levemente OVAL (5:4), como teclado de telefone de verdade. Quadrada, alargar o
     aparelho aumentaria a altura na mesma proporcao e a coluna voltaria a ficar mais
     alta que a lista do lado , que era o problema anterior. */
  aspect-ratio: 1.25;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  font-family: inherit;
  color: #1e2026;
  animation: pnVoIn .4s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards;
  transition: background .12s ease, transform .12s ease;
}
.pn-vo-key .n { font-size: 13px; font-weight: 600; line-height: 1; }
.pn-vo-key .l { font-size: 6px; font-weight: 600; letter-spacing: .06em; color: #8a8f99; line-height: 1.4; }
/* Tecla "apertada" pelo laço de demonstração. Volta sozinha quando o JS tira a classe. */
.pn-vo-key.is-hit {
  background: var(--evo-green-soft, #d8f5e6);
  transform: scale(.9);
}

.pn-vo-call {
  appearance: none; border: 0; cursor: default;
  align-self: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--evo-green, #1bbf5d);
  color: #fff;
  display: grid; place-items: center;
  animation: pnVoIn .4s cubic-bezier(.16, 1, .3, 1) .36s backwards;
}
.pn-vo-call .ico { width: 15px; height: 15px; background-color: currentColor; }
/* Anel que sai do botão enquanto chama. Só existe nesse estado, então não fica
   pulsando sozinho na tela o tempo todo. */
.pn-vo[data-estado="chamando"] .pn-vo-call::after {
  content: ''; position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--evo-green, #1bbf5d);
  animation: pnVoRing 1.2s ease-out infinite;
}
.pn-vo-call { position: relative; }
@keyframes pnVoRing {
  from { transform: scale(1);   opacity: .55; }
  to   { transform: scale(1.9); opacity: 0; }
}

/* ── a lista do lado ── */
/* UM BLOCO SO, e nao cinco cartoes soltos. Com cinco caixas separadas, cada uma com
   borda e sombra, e vaos grandes entre elas, o lado direito ficava espalhado e competia
   com o telefone, que e um objeto unico e solido. Agora e objeto contra objeto.
   Como ele estica (align-items:stretch no pai), a altura casa com a do aparelho
   sozinha, sem eu precisar acertar numero de itens na mao. */
.pn-vo-lado {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-around;
  background: #fff;
  border: 1px solid rgba(15, 22, 38, 0.10);
  border-radius: 12px;
  padding: 4px 12px;
  box-shadow: 0 1px 2px rgba(30, 32, 38, 0.04);
}
/* Linha, nao cartao: a caixa e o bloco pai. O fio separa sem fechar cada item numa
   moldura propria, que era o que deixava tudo picotado. */
.pn-vo-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 0;
  animation: pnVoIn .45s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) backwards;
}
.pn-vo-item + .pn-vo-item { border-top: 1px solid rgba(15, 22, 38, 0.07); }
.pn-vo-item .ico { width: 15px; height: 15px; background-color: #2b6be2; flex: 0 0 15px; }
.pn-vo-item div { min-width: 0; display: flex; flex-direction: column; }
.pn-vo-item strong { font-size: 11px; font-weight: 600; color: #1e2026; line-height: 1.25; }
.pn-vo-item span { font-size: 10px; color: #8a8f99; line-height: 1.3; }

@keyframes pnVoIn {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pn-vo-key, .pn-vo-call, .pn-vo-item { animation: none; }
  .pn-vo-cursor { animation: none; opacity: 1; }
  .pn-vo[data-estado="chamando"] .pn-vo-call::after { animation: none; opacity: 0; }
  .pn-vo-key.is-hit { transform: none; }
}

/* ══ EMPILHA NO CELULAR ═══════════════════════════════════════════════════════
   Ate aqui o componente nao tinha NENHUMA media query de layout: era sempre uma
   linha, com o aparelho travado em 182px e a lista no que sobrasse. Numa tela de
   390px sobram ~114px uteis pra lista, e "Click-to-call no card" em 11px semibold
   quebra em tres linhas. Como o pai e align-items:stretch, o aparelho era esticado
   junto e ficava com um vao branco enorme embaixo do teclado.

   Empilhado, o aparelho fica no tamanho dele e a lista pega a largura toda.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .pn-vo { flex-direction: column; align-items: stretch; gap: 12px; }
  .pn-vo-fone { flex: 0 0 auto; width: 182px; align-self: center; }
  /* Empilhado a lista nao precisa mais esticar pra casar altura com o aparelho, e
     o space-around so espalharia as cinco linhas. */
  .pn-vo-lado { justify-content: flex-start; padding: 2px 14px; }
}

/* ══ .pn-vo--lg — a variante da LP /solucoes/voip ═════════════════════════════
   O tamanho base foi calibrado pro painel do orbital (~396px uteis). No hero da LP
   a coluna da ~535px, entao no tamanho base o discador ficaria perdido no meio de
   um bloco grande. Aqui e SO escala: nenhuma regra de estrutura muda, pra os dois
   continuarem sendo visivelmente o mesmo objeto.
   ────────────────────────────────────────────────────────────────────────── */
.pn-vo--lg { gap: 16px; }
.pn-vo--lg .pn-vo-fone { flex: 0 0 214px; border-radius: 14px; }
.pn-vo--lg .pn-vo-top { padding: 9px 11px; }
.pn-vo--lg .pn-vo-ramal { font-size: 11.5px; }
.pn-vo--lg .pn-vo-tab { padding: 6px 0 7px; }
.pn-vo--lg .pn-vo-tab .ico { width: 15px; height: 15px; }
.pn-vo--lg .pn-vo-corpo { padding: 10px; gap: 8px; }
.pn-vo--lg .pn-vo-status { font-size: 11.5px; padding: 5px 10px; }
.pn-vo--lg .pn-vo-visor { min-height: 30px; font-size: 17px; padding: 5px 10px; }
.pn-vo--lg .pn-vo-cursor { height: 16px; }
.pn-vo--lg .pn-vo-keys { gap: 5px; }
.pn-vo--lg .pn-vo-key .n { font-size: 15.5px; }
.pn-vo--lg .pn-vo-key .l { font-size: 7px; }
.pn-vo--lg .pn-vo-call { width: 40px; height: 40px; }
.pn-vo--lg .pn-vo-call .ico { width: 18px; height: 18px; }
.pn-vo--lg .pn-vo-lado { border-radius: 14px; padding: 4px 16px; }
.pn-vo--lg .pn-vo-item { gap: 11px; padding: 11px 0; }
.pn-vo--lg .pn-vo-item .ico { width: 18px; height: 18px; flex: 0 0 18px; }
.pn-vo--lg .pn-vo-item strong { font-size: 13px; }
.pn-vo--lg .pn-vo-item span { font-size: 11.5px; }

@media (max-width: 560px) {
  .pn-vo--lg .pn-vo-fone { flex: 0 0 auto; width: 214px; }
}