/* =====================================================================
 * LinkComm dentro do Teams
 *
 * Segue a identidade da LINK, mas respeita o tema do Teams: a aba pode
 * abrir em claro, escuro ou alto contraste, e o Teams avisa qual é.
 * A classe do tema entra no <html> pelo app.js.
 * ===================================================================== */

:root {
  --coluna: 460px;

  /* Tema claro (padrão do Teams) */
  --fundo: #ffffff;
  --fundo-2: #f5f5f5;
  --fundo-3: #ebebeb;
  --linha: #d1d1d1;
  --texto: #242424;
  --texto-fraco: #616161;
  --marca: #c62128;
  --marca-suave: #fdf2f2;
  --verde: #107c10;
  --vermelho: #c4314b;
  --amarelo: #f8a800;
  --raio: 6px;
  --sombra: 0 1px 3px rgba(0,0,0,.10);

  /* A tela de chamada acompanha o tema do Teams: clara no claro, escura
     no escuro (a escura fica nos blocos de html.escuro, logo abaixo). */
  --fundo-chamada: #f5f5f5;
  --texto-chamada: #242424;
  --texto-chamada-fraco: #616161;
  --linha-chamada: #e0e0e0;
  --verde-chamada: #107c10;
  --vermelho-chamada: #c4314b;
  --cartao-chamada: #ffffff;
  --passar-chamada: rgba(0, 0, 0, .06);

  /* Fundos dos avatares de iniciais. Tons dessaturados para o nome ser
     lido em cima deles, e variados para dar para distinguir pessoas de
     relance numa lista. */
  --av1: #d6d3ef; --av2: #cfe3d8; --av3: #f2dcd0;
  --av4: #d3e2f2; --av5: #ead3e6; --av6: #e6e3cf;
  --av-texto: #23233a;
}

html.escuro {
  --fundo: #1f1f1f;
  --fundo-2: #2b2b2b;
  --fundo-3: #333333;
  --linha: #414141;
  --texto: #ffffff;
  --texto-fraco: #adadad;
  --marca: #e8555f;
  --marca-suave: #3a1e22;
  --verde: #6ccb5f;
  --vermelho: #e8555f;
  --sombra: 0 1px 3px rgba(0,0,0,.4);
  /* No escuro a tela de chamada fica um pouco mais escura que os
     painéis, para dar profundidade sem virar preto. */
  --fundo-chamada: #17161a;
  --texto-chamada: #ffffff;
  --texto-chamada-fraco: #b9b7c2;
  --linha-chamada: #3b3945;
  --verde-chamada: #6ccb5f;
  --vermelho-chamada: #f0707e;
  --cartao-chamada: rgba(255, 255, 255, .06);
  --passar-chamada: rgba(255, 255, 255, .10);
}

html.contraste {
  --fundo: #000000;
  --fundo-2: #000000;
  --fundo-3: #1aebff;
  --linha: #ffffff;
  --texto: #ffffff;
  --texto-fraco: #ffffff;
  --marca: #ffff01;
  --verde: #1aebff;
  --vermelho: #ffff01;
  /* Alto contraste é um pedido de acessibilidade, não um tema bonito:
     aqui a tela de chamada segue a regra do sistema, preto puro e
     branco puro, mesmo perdendo o ar do Teams. */
  --fundo-chamada: #000000;
  --texto-chamada: #ffffff;
  --texto-chamada-fraco: #ffffff;
  --linha-chamada: #ffffff;
  --verde-chamada: #1aebff;
  --vermelho-chamada: #ffff01;
  --cartao-chamada: #000000;
  --passar-chamada: #1aebff33;
  --av1: #000; --av2: #000; --av3: #000;
  --av4: #000; --av5: #000; --av6: #000;
  --av-texto: #ffff01;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  overflow: hidden;
}

body { display: flex; flex-direction: column; }

.hidden { display: none !important; }

/* ---------------- Barra do topo ---------------- */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--linha);
  background: var(--fundo-2);
}
.marca { height: 22px; width: auto; }
.barra-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }

.estado-conexao {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--texto-fraco);
  min-width: 0;
}
.estado-conexao span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ponto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--texto-fraco); flex: none;
}
.ponto.ligado { background: var(--verde); }
.ponto.erro { background: var(--vermelho); }
.ponto.procurando { background: var(--amarelo); animation: pisca 1s infinite; }
@keyframes pisca { 50% { opacity: .3; } }

/* ---------------- Aviso / pareamento ---------------- */
.aviso {
  margin: 14px auto;
  padding: 16px;
  width: 100%;
  max-width: var(--coluna);
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--marca);
  border-radius: var(--raio);
}
.aviso h2 { margin: 0 0 6px; font-size: 15px; }
.aviso p { margin: 0 0 12px; font-size: 13px; color: var(--texto-fraco); }
.aviso-botoes { display: flex; flex-wrap: wrap; gap: 8px; }

.ajuda { margin-top: 12px; font-size: 12px; color: var(--texto-fraco); }
.ajuda summary { cursor: pointer; }
.ajuda ol { margin: 8px 0 0; padding-left: 20px; }
.ajuda li { margin-bottom: 5px; }

/* ---------------- Botões ---------------- */
.btn {
  padding: 7px 14px;
  background: var(--fundo-3);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: 13px;
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--linha); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.principal { background: var(--marca); border-color: var(--marca); color: #fff; }
/* O fundo vermelho fica no hover (o .btn:hover deixava cinza com letra branca) */
.btn.principal:hover:not(:disabled) { background: var(--marca); filter: brightness(1.1); }

/* ---------------- Chamadas ---------------- */
/* A tela de chamada toma tudo, como no Teams.
 *
 * `position: fixed` em vez de um bloco no fluxo: durante a ligação, o
 * discador e o histórico não desaparecem do documento, só ficam por
 * baixo. Quando a chamada acaba, a tela volta exatamente como estava —
 * inclusive o que a pessoa tinha digitado no campo do número. */
.painel-chamada {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--fundo-chamada);
  color: var(--texto-chamada);
}

.chamada-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--linha-chamada);
  flex: none;
}
.chamada-quem {
  display: flex; align-items: baseline; gap: 12px;
  min-width: 0; flex: 1;
}
.chamada-relogio {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--texto-chamada-fraco);
  flex: none;
}
.chamada-titulo {
  font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.chamada-palco {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
}
.avatar-grande {
  width: 168px; height: 168px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 54px; font-weight: 600; letter-spacing: 1px;
  color: var(--av-texto);
  background: var(--av1);
  flex: none;
}
.palco-nome { font-size: 20px; font-weight: 600; text-align: center; }
.palco-estado {
  font-size: 14px;
  color: var(--texto-chamada-fraco);
  display: flex; align-items: center; gap: 7px;
}
/* O pontinho pisca enquanto chama, e para quando atende. Movimento só
   onde ele quer dizer alguma coisa. */
.palco-estado.chamando::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--marca);
  animation: pisca 1.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .palco-estado.chamando::before { animation: none; }
}

.linhas {
  display: flex; gap: 8px;
  padding: 0 14px 14px;
  flex: none;
  overflow-x: auto;
}
.linhas:empty, .linhas.hidden { display: none; }

.linha-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px;
  min-width: 190px;
  background: var(--cartao-chamada);
  border: 1px solid var(--linha-chamada);
  border-left: 3px solid var(--texto-chamada-fraco);
  border-radius: var(--raio);
  color: var(--texto-chamada);
  cursor: pointer;
}
.linha-card.selecionada { border-color: var(--marca); background: rgba(198,33,40,.18); }
.linha-card.ringing { border-left-color: var(--amarelo); animation: pisca 1.2s infinite; }
.linha-card.active { border-left-color: var(--verde); }
.linha-card.held { border-left-color: var(--amarelo); opacity: .75; }
.linha-card.connecting { border-left-color: var(--marca); }

.linha-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-meta { font-size: 11px; color: var(--texto-chamada-fraco); }
.linha-tempo { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* A barra de ações da chamada: uma fileira no topo, ícone em cima e
   rótulo embaixo — a mesma leitura da barra do Teams. Em tela estreita
   ela rola de lado em vez de quebrar em várias linhas, para o palco não
   ser espremido por uma barra de três andares. */
.acoes {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.acoes::-webkit-scrollbar { display: none; }

.acao {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  min-width: 62px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio);
  color: var(--texto-chamada);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.acao svg { width: 17px; height: 17px; fill: currentColor; }

/* A ordem visual da barra: ações à esquerda, e o grupo de encerrar e
   atender à direita, que é onde a mão procura o botão vermelho. */
.espaco-acoes { flex: 1; order: 8; min-width: 12px; }
#btnAtender  { order: 9; }
#btnRecusar  { order: 10; }
#btnDesligar { order: 11; }
.acao:hover { background: var(--passar-chamada); }
/* Atender é o único botão cheio da barra.
 *
 * O Teams deixa todos iguais, mas o Teams não é um telefone tocando: com
 * a chamada entrando, a pessoa procura o botão verde com pressa, muitas
 * vezes no celular, com uma mão. Um ícone do mesmo tamanho dos outros
 * seis não se acha nesse momento. É a única liberdade que tomei em
 * relação à barra do Teams, e é a favor de quem atende. */
.acao.verde {
  background: var(--verde);
  color: #fff;
  border-radius: 999px;
  padding: 6px 18px;
}
.acao.verde:hover { filter: brightness(1.12); background: var(--verde); }
.acao.vermelha { color: var(--vermelho-chamada); }
.acao.vermelha:hover { background: rgba(196,49,75,.22); }
.acao.ligada { background: var(--marca); border-color: var(--marca); color: #fff; }
.acao[aria-expanded="true"] { background: var(--passar-chamada); border-color: var(--linha-chamada); }

/* Teclado da chamada (URA). Fica solto embaixo da barra, alinhado ao
   botão "Teclado" (o app.js calcula a posição), por cima do palco. */
.teclado-chamada {
  position: absolute;
  z-index: 5;
  width: 232px;
  padding: 12px;
  background: var(--cartao-chamada);
  border: 1px solid var(--linha-chamada);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.teclado-chamada.hidden { display: none; }
.teclado-visor {
  height: 34px;
  margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  color: var(--texto-chamada);
  border-bottom: 1px solid var(--linha-chamada);
}
/* Sem nada digitado, só o teclado; o visor aparece com a primeira tecla. */
.teclado-visor:empty { display: none; }
.teclado-chamada-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.teclado-chamada-grade button {
  height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  background: transparent;
  border: 1px solid var(--linha-chamada);
  border-radius: 8px;
  color: var(--texto-chamada);
  cursor: pointer;
}
.teclado-chamada-grade button:hover { background: var(--passar-chamada); }
.teclado-chamada-grade button:active { transform: scale(.97); }
.teclado-chamada-grade button:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.teclado-chamada-grade b { font-size: 19px; font-weight: 500; line-height: 1.1; }
.teclado-chamada-grade i {
  font-style: normal; font-size: 9px; letter-spacing: .08em;
  color: var(--texto-chamada-fraco);
}
@media (prefers-reduced-motion: reduce) {
  .teclado-chamada-grade button:active { transform: none; }
}

.caixa-transferir {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 14px 14px;
  padding: 12px;
  background: var(--cartao-chamada);
  border: 1px solid var(--linha-chamada);
  border-radius: var(--raio);
  flex: none;
}
.caixa-transferir label, .caixa-transferir .dica { color: var(--texto-chamada); }
.caixa-transferir input { flex: 1 1 140px; min-width: 0; }

/* ---------------- Abas ---------------- */
.abas {
  display: flex;
  justify-content: center;
  background: var(--fundo-2);
  border-bottom: 1px solid var(--linha);
}
.aba {
  flex: 1 1 auto;
  max-width: calc(var(--coluna) / 3);
  padding: 9px 4px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--texto-fraco);
  font-size: 13px;
  cursor: pointer;
}
.aba:hover { color: var(--texto); }
.aba.ativa { color: var(--texto); border-bottom-color: var(--marca); }

/* ------------------------------------------------------------------ *
 * O menu no celular
 *
 * O TAMANHO DO ÍCONE só existia dentro do bloco do computador. No
 * celular o SVG ficava sem largura nem altura e o navegador desenhava
 * no tamanho padrão dele — daí a estrela ocupando um quarto da tela.
 * Um defeito de uma linha que estragava a primeira impressão inteira.
 * ------------------------------------------------------------------ */
@media (max-width: 899px) {
  .abas { padding: 0; }
  .aba {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    max-width: none;
    padding: 8px 2px 7px;
    min-height: 56px;
  }
  .aba svg { width: 20px; height: 20px; flex: none; }
  /* Rótulo curto não pode quebrar em duas linhas e empurrar os vizinhos
   * para alturas diferentes: todos os botões ficam do mesmo tamanho. */
  .aba span {
    font-size: 10.5px;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .conteudo { padding: 10px 12px; }
  /* No celular o estado da conexão brigava com o nome do aplicativo e
   * sobrava reticências. Ele vale mais que a marca aqui. */
  .barra { padding: 7px 12px; gap: 8px; }
  .barra-marca .nome-app { font-size: 14px; }
  .estado-conexao { font-size: 11px; max-width: 58%; }
}

/* ---------------- Conteúdo ----------------
 *
 * Duas formas, uma folha de estilo só:
 *
 *   estreito  (celular, aba do Teams espremida) — uma coluna por vez,
 *             trocada pelas abas de cima. É como sempre foi.
 *
 *   largo     (computador) — as três colunas lado a lado, como o app de
 *             Chamadas do Teams: discar à esquerda, histórico no meio,
 *             contatos à direita. As abas somem, porque não há o que
 *             trocar quando tudo está visível.
 *
 * As abas continuam no HTML nos dois casos. Escondê-las por CSS em vez
 * de tirá-las do documento mantém o mesmo caminho de código nas duas
 * larguras — e o `.ativo` continua valendo, só não muda nada no largo. */
.conteudo {
  flex: 1;
  min-height: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.painel { display: none; width: 100%; max-width: var(--coluna); }
.painel.ativo { display: block; }

/* O nome do app na barra de cima, ao lado do logo — o mesmo lugar onde
   o Teams escreve "Chamadas". */
.nome-app { font-size: 15px; font-weight: 600; }

.titulo-coluna {
  display: none;               /* só aparece no formato de três colunas */
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}

#aba-discar.ativo {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  height: 100%;
  overflow-y: auto;
}

@media (min-width: 900px) {
  /* No computador o desenho é o do Callbox: uma coluna estreita à
     esquerda com o menu e o teclado, e o resto da tela para o conteúdo.
     No celular nada disso vale — lá as abas continuam em cima e o
     conteúdo ocupa a largura toda. */
  .conteudo {
    display: grid;
    grid-template-columns: 290px 1fr;
    grid-template-areas: "lado principal";
    padding: 0;
    max-width: none;
    align-items: stretch;
  }

  /* O menu sai de cima e vira a lista da coluna da esquerda. */
  .abas {
    grid-area: lado;
    flex-direction: column;
    justify-content: flex-start;
    align-self: start;
    border-bottom: 0;
    background: transparent;
    padding: 10px 8px 4px;
  }
  .aba {
    display: flex; align-items: center; gap: 10px;
    max-width: none;
    padding: 8px 10px;
    border-bottom: 0;
    border-radius: var(--raio);
    text-align: left;
  }
  .aba svg { width: 16px; height: 16px; flex: none; }
  .aba.ativa { background: var(--fundo-3); border-bottom-color: transparent; }
  .aba:hover { background: var(--fundo-3); }

  /* O teclado deixa de ser um painel que se troca: mora na coluna da
     esquerda e fica sempre à mão, que é o ponto de um softphone. */
  /* Menu e teclado dividem a mesma coluna: o menu ancorado em cima, o
     teclado embaixo. Sem número mágico de margem — se um dia entrar um
     item novo no menu, nada encosta em nada. */
  #aba-discar, #aba-discar.ativo {
    grid-area: lado;
    align-self: end;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    max-width: none;
    padding: 0 14px 14px;
    overflow: visible;
  }
  /* Na coluna estreita o teclado precisa caber sem empurrar nada. */
  #aba-discar .teclado { max-width: 100%; }
  /* O botão Teclado do menu só faz sentido no celular, onde o teclado é
     uma tela à parte. Aqui ele está sempre visível. */
  .aba[data-aba="discar"] { display: none; }

  .conteudo > .painel:not(#aba-discar) {
    grid-area: principal;
    max-width: none;
    padding: 16px 20px;
    overflow-y: auto;
    border-left: 1px solid var(--linha);
  }
  /* Sem isto o painel escondido some do grid mas ainda reserva a área. */
  .conteudo > .painel:not(#aba-discar):not(.ativo) { display: none; }

  .titulo-coluna { display: block; font-size: 17px; margin-bottom: 14px; }

  body { background: var(--fundo-2); }
  .conteudo > .painel:not(#aba-discar) { background: var(--fundo); }
}

/* ---------------- Tabela do histórico ---------------- */
.tabela-envolve { overflow-x: auto; }
.tabela-historico {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tabela-historico th {
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  color: var(--texto-fraco);
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
.tabela-historico th.direita, .tabela-historico td.direita { text-align: right; }
.tabela-historico td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}
.tabela-historico tbody tr:hover { background: var(--fundo-2); }
.tabela-historico .col-nome {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.tabela-historico .nome-texto {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabela-historico td.duracao { font-variant-numeric: tabular-nums; }
.tabela-historico td.quando { white-space: nowrap; color: var(--texto-fraco); }
.tabela-historico tr.perdida .direcao { color: var(--vermelho); }

/* As ações aparecem no lugar da data quando o ponteiro passa pela linha,
   como no Callbox: a tabela fica limpa de botões, e a data — que é o que
   se lê ao correr os olhos — não divide espaço com nada.
   Onde não existe "passar o ponteiro" (celular, tela sensível ao toque)
   elas ficam sempre visíveis, embaixo da data. */
.acoes-linha { display: flex; gap: 4px; justify-content: flex-end; }

@media (hover: hover) and (min-width: 900px) {
  .tabela-historico td.quando { position: relative; }
  .acoes-linha {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    visibility: hidden;
    padding-left: 10px;
    background: var(--fundo);
  }
  .tabela-historico tr:hover .acoes-linha,
  .tabela-historico tr:focus-within .acoes-linha {
    visibility: visible;
    /* Precisa acompanhar o fundo da linha sob o ponteiro, senão os
       botões flutuam num retângulo de cor diferente. */
    background: var(--fundo-2);
  }
  .tabela-historico tr:hover .botao-linha { background: var(--fundo); }
}
.botao-linha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--texto);
  cursor: pointer;
}
.botao-linha svg { width: 14px; height: 14px; fill: currentColor; }
.botao-linha:hover { background: var(--fundo-3); }

.caixa-player { margin: 10px 0 14px; }
.caixa-player audio { width: 100%; height: 36px; color-scheme: light dark; }

/* O ramal de quem está usando, no pé da coluna do teclado. */
.meu-ramal {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--texto-fraco);
  text-align: center;
}
.meu-ramal b { color: var(--texto); font-weight: 600; }

/* ---------------- Tela de entrada: as duas opções ---------------- */
.entrada-opcoes { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.opcao-entrada {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.opcao-entrada:hover:not(:disabled) { border-color: var(--marca); background: var(--fundo-2); }
.opcao-entrada.desligada { opacity: .55; cursor: not-allowed; }
.opcao-entrada svg { flex: none; }
.opcao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcao-texto strong { font-size: 14px; font-weight: 600; }
.opcao-texto small { font-size: 12px; color: var(--texto-fraco); }

.segundo-ramal {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 10px 12px;
  margin: 4px 0 2px;
}
.segundo-ramal summary { cursor: pointer; font-size: 13px; }
.segundo-ramal[open] summary { margin-bottom: 6px; }

/* ---------------- Discador ---------------- */
/* O campo do número ocupa a largura toda da coluna, e o "apagar" fica
   dentro dele, à direita — sobra espaço para ler o texto inteiro. */
.campo-numero { position: relative; display: block; flex: none; }

input[type="text"], input[type="search"], input[type="email"], select {
  width: 100%;
  padding: 9px 12px;
  background: var(--fundo);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  font-size: 14px;
  font-family: inherit;
}
#numero {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 14px;
  font-size: 16px;
  letter-spacing: .3px;
  text-overflow: ellipsis;
}
#numero::placeholder { font-size: 14px; letter-spacing: 0; }
#btnApagar {
  position: absolute;
  top: 50%; right: 5px;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
#btnApagar svg { width: 19px; height: 19px; }
input:focus, select:focus { outline: none; border-color: var(--marca); }

.icone {
  background: transparent; border: 0; color: var(--texto-fraco);
  font-size: 17px; cursor: pointer; padding: 4px 7px; border-radius: var(--raio);
}
.icone:hover { background: var(--fundo-3); color: var(--texto); }

.sugestoes {
  margin-top: 4px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  max-height: 130px;
  overflow-y: auto;
}
.sugestoes div { padding: 7px 10px; cursor: pointer; font-size: 13px; }
.sugestoes div:hover { background: var(--fundo-3); }

.teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 12px;
  flex: 0 1 auto;
  min-height: 124px;
  max-height: 320px;
  grid-auto-rows: minmax(0, 1fr);
}
.teclado button {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--texto);
  padding: clamp(3px, 1.3vh, 12px) 0;
  min-height: 28px;
  overflow: hidden;
  cursor: pointer;
  line-height: 1.1;
}
.teclado button:hover { background: var(--fundo-3); }
.teclado button:active { background: var(--marca); color: #fff; }
.teclado b { display: block; font-size: clamp(15px, 2.2vh, 20px); font-weight: 500; }
.teclado i {
  display: block; font-style: normal; letter-spacing: 1px;
  font-size: 9px; color: var(--texto-fraco);
  height: clamp(0px, 1.1vh, 11px); overflow: hidden;
}

.linha-chamar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; flex: none; }
.conta-discagem { flex: 0 1 132px; min-width: 0; padding: 0 8px; font-size: 12px; }
.chamar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1 1 140px;
  width: auto;
  min-width: 0;
  padding: clamp(8px, 1.6vh, 13px);
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.chamar svg { fill: currentColor; }
/* O fundo verde fica também no hover: no iPhone o hover "gruda" depois
   do toque, e o .btn:hover deixava o Chamar cinza com letra branca. */
.chamar:hover:not(:disabled) { background: var(--verde); filter: brightness(1.1); }

@media (max-width: 380px) {
  .conta-discagem { flex: 1 1 100%; padding: 7px 8px; }
}

/* ---------------- Listas ---------------- */
.lista { list-style: none; margin: 10px 0 0; padding: 0; }
.lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
}
.lista li:hover { background: var(--fundo-2); border-color: var(--linha); }
/* O disquinho com as iniciais. É o detalhe que mais faz a lista parecer
   a do Teams, e de quebra dá um ponto de fixação para o olho correr a
   lista sem ler nome por nome. */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  color: var(--av-texto);
  background: var(--av1);
  flex: none;
}
.avatar.c2 { background: var(--av2); }
.avatar.c3 { background: var(--av3); }
.avatar.c4 { background: var(--av4); }
.avatar.c5 { background: var(--av5); }
.avatar.c6 { background: var(--av6); }
.avatar-grande.c2 { background: var(--av2); }
.avatar-grande.c3 { background: var(--av3); }
.avatar-grande.c4 { background: var(--av4); }
.avatar-grande.c5 { background: var(--av5); }
.avatar-grande.c6 { background: var(--av6); }

/* Data à direita, como no Teams: a coluna fixa deixa as datas alinhadas
   e o olho encontra "ontem" sem varrer a linha inteira. */
.item-quando {
  text-align: right;
  font-size: 11px;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.item-quando b { display: block; font-weight: 400; }

/* A setinha de entrada/saída junto do rótulo, igual ao Teams. */
.direcao { display: inline-flex; align-items: center; gap: 5px; }
.direcao svg { width: 13px; height: 13px; fill: currentColor; }
.perdida .direcao { color: var(--vermelho); }

.item-titulo { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { font-size: 11px; color: var(--texto-fraco); }
/* A coluna do meio é a que pode crescer; sem isto o nome empurra a data
   para fora e a lista fica com as datas desalinhadas. */
.item-info { flex: 1; min-width: 0; }
.item-acao {
  padding: 4px 10px;
  background: var(--fundo-3);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  color: var(--texto);
  font-size: 12px;
  cursor: pointer;
  flex: none;
}
.vazio { padding: 20px 4px; text-align: center; color: var(--texto-fraco); font-size: 13px; }
.perdida .item-titulo { color: var(--vermelho); }

/* ---------------- Histórico da central ----------------
 *
 * O item aqui tem duas alturas: a linha da chamada e, quando alguém
 * aperta Ouvir, o player embaixo. Por isso este li quebra o padrão de
 * linha única das outras listas — a coluna é o que deixa o player
 * crescer sem espremer o nome de quem ligou. */
.lista li[data-chamada] {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  cursor: default;
}
.linha-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 0;
}
.linha-item > div:first-child { min-width: 0; cursor: pointer; }
.item-botoes { display: flex; gap: 6px; flex: none; }
.caixa-audio:empty { display: none; }
.player {
  width: 100%;
  height: 34px;
  /* O player nativo do navegador vem claro por padrão; isto pede a
     versão que combina com o tema em uso, sem recriar os controles. */
  color-scheme: light dark;
}

/* ---------------- Recado ---------------- */
.recado {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(20px);
  padding: 9px 16px;
  background: var(--texto);
  color: var(--fundo);
  border-radius: 20px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  max-width: 90%;
  text-align: center;
}
.recado.aparece { opacity: 1; transform: translateX(-50%) translateY(0); }
.recado.erro { background: var(--vermelho); color: #fff; }

/* =====================================================================
 * Contatos: as duas abas e o convite para entrar
 * ===================================================================== */
.seg-contatos {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 2px 0 10px;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 10px;
}
.seg-contatos.hidden { display: none; }
.seg {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--texto-fraco);
  font: inherit; font-size: 13px;
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
}
.seg svg { width: 17px; height: 17px; flex: none; }
.seg:hover { color: var(--texto); }
.seg.ativo {
  background: var(--fundo);
  color: var(--texto);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 1px var(--linha);
}
.seg.ativo svg { color: var(--marca); }
.seg-conta {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--fundo-3);
  color: var(--texto-fraco);
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.seg-conta:empty { display: none; }
.seg.ativo .seg-conta { background: var(--marca-suave); color: var(--marca); }

.cartao-entrar {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 10px 0 12px;
  padding: 16px 18px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 10px;
  box-shadow: var(--sombra);
}
.cartao-entrar.hidden { display: none; }
.cartao-entrar-icone {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--marca-suave);
  color: var(--marca);
}
.cartao-entrar-icone svg { width: 22px; height: 22px; }
.cartao-entrar-texto { min-width: 0; }
.cartao-entrar-texto strong { display: block; font-size: 14px; margin-bottom: 3px; }
.cartao-entrar-texto p { margin: 0 0 12px; font-size: 13px; color: var(--texto-fraco); line-height: 1.5; max-width: 60ch; }
.cartao-entrar-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cartao-entrar-acoes .link-discreto { display: inline; width: auto; margin: 0; padding: 0; font-size: 12px; }

/* =====================================================================
 * Agenda do Microsoft 365
 * ===================================================================== */
.fontes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}
.chip {
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--texto-fraco);
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { color: var(--texto); }
.chip.ativo {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}

.aviso-agenda {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.aviso-agenda strong { display: block; margin-bottom: 4px; font-size: 13px; }
.aviso-agenda p { margin: 0 0 10px; font-size: 12px; color: var(--texto-fraco); line-height: 1.5; }
.aviso-agenda label { display: block; font-size: 12px; color: var(--texto-fraco); margin-bottom: 8px; }
.aviso-agenda input { width: 100%; margin-top: 4px; }
.aviso-agenda .dica { margin: 8px 0 0; font-size: 11px; }
.aviso-agenda code {
  display: inline-block;
  margin-top: 3px;
  padding: 3px 6px;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 4px;
  font-size: 11px;
  word-break: break-all;
  user-select: all;
}
.linha-botoes { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------------ *
 * Dedo em vez de mouse
 *
 * `pointer: coarse` é o navegador dizendo que quem aponta é um dedo, e
 * não uma seta. Aí os alvos pequenos — a engrenagem, o apagar, o × da
 * faixa — precisam crescer: com 21px de altura, errar o toque é o
 * comportamento normal, não o azar.
 *
 * A régua de 44px é da Apple e o Google recomenda 48dp; 40px é o mínimo
 * que cabe sem espremer o resto da tela num aparelho pequeno.
 * ------------------------------------------------------------------ */
@media (pointer: coarse) {
  button, .btn, .aba, .chip, .btn-aba {
    min-height: 40px;
  }
  .icone-barra, .fechar-faixa, #btnApagar, .pastilha .x {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* O teclado é onde o dedo mais erra: cada tecla ganha altura. */
  #tab-dial .keypad button { min-height: 46px; }
  /* Campos com menos de 16px fazem o iPhone dar zoom sozinho ao tocar. */
  input, select, textarea { font-size: 16px; }
}

/* ------------------------------------------------------------------ *
 * Convite para instalar no aparelho
 * ------------------------------------------------------------------ */
/* Duas faixas empilhadas em fundo vermelho comiam um terço da tela do
 * celular e faziam o aplicativo parecer uma tela de erro. O recado
 * continua o mesmo; o que muda é o peso visual: fundo neutro, um filete
 * da marca à esquerda, e altura de aviso e não de alerta. */
.faixa-instalar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--fundo-2);
  border-bottom: 1px solid var(--linha);
  border-left: 3px solid var(--marca);
}
.faixa-icone { width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto; }
.faixa-texto { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.4; }
.faixa-texto strong { display: block; font-weight: 600; }
.faixa-texto .dica { display: block; color: var(--texto-fraco); font-size: 11.5px; }

/* Os três passos do iPhone viravam três linhas numeradas — meia tela
 * para uma instrução que cabe numa frase. */
/* Um link no meio do texto, sem virar botão. Serve para "prove-me
 * errado": em vez de discutir se o microfone abre, a pessoa clica e o
 * próprio aparelho responde. */
.link-dica {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--marca);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.passos-ios {
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
  color: var(--texto-fraco);
  font-size: 11.5px;
}
.passos-ios li { display: inline; }
.passos-ios li + li::before { content: " › "; opacity: .6; }
.fechar-faixa {
  flex: 0 0 auto;
  padding: 4px 6px;
  font-size: 13px;
  line-height: 1;
  color: var(--texto-fraco);
  background: none;
  border: 0;
  cursor: pointer;
}
.fechar-faixa:hover { color: var(--texto); }

/* Instalado, a barra do sistema fica por cima no iPhone: o recorte
 * seguro do aparelho é quem diz onde a nossa barra pode começar. */
html.instalado .barra { padding-top: calc(10px + env(safe-area-inset-top)); }
html.instalado body { padding-bottom: env(safe-area-inset-bottom); }

/* ------------------------------------------------------------------ *
 * Configurações do softphone web
 * ------------------------------------------------------------------ */
.icone-barra {
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 5px;
  line-height: 0;
  color: var(--texto-fraco);
  background: none;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.icone-barra:hover { color: var(--texto); background: var(--fundo-3); }

.tela-config {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  background: var(--fundo);
  overflow-y: auto;
}
.config-caixa { width: 100%; max-width: var(--coluna, 520px); }
.config-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.config-topo h2 { margin: 0; font-size: 16px; font-weight: 600; }

.painel-config label {
  display: block;
  margin-bottom: 11px;
  font-size: 12px;
  color: var(--texto-fraco);
}
.painel-config label.check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.painel-config label.check input { width: auto; margin: 0; }
.painel-config select,
.painel-config input[type="text"],
.painel-config input[type="number"],
.painel-config input[type="range"] { width: 100%; margin-top: 4px; }

.linha-arquivo { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.linha-arquivo input[type="text"] { flex: 1 1 auto; min-width: 0; }
.linha-arquivo input[type="number"] { flex: 0 0 62px; }
.linha-arquivo select { flex: 1 1 auto; min-width: 0; }
.linha-arquivo .sufixo { font-size: 11px; color: var(--texto-fraco); }

.lista-ramais { margin: 8px 0 12px; padding: 0; list-style: none; }
.lista-ramais li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 5px;
  font-size: 12px;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 6px;
}
.lista-ramais .situacao { font-size: 11px; color: var(--texto-fraco); }
.lista-ramais .situacao.ok { color: #2e7d32; }
.lista-ramais .situacao.ruim { color: var(--marca); }

.config-rodape {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.config-rodape .btn { width: 100%; }

/* ------------------------------------------------------------------ *
 * Tela de entrada do softphone web
 * ------------------------------------------------------------------ */
.tela-entrada {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--fundo);
  overflow-y: auto;
}
.entrada-caixa {
  width: 100%;
  max-width: 380px;
  text-align: center;
}
.entrada-marca { height: 34px; margin-bottom: 18px; }
.entrada-caixa h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.entrada-sub { margin: 0 0 24px; font-size: 13px; color: var(--texto-fraco); }

.btn.grande {
  width: 100%;
  padding: 11px 16px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn.grande svg { flex: 0 0 auto; }

.entrada-aviso {
  margin: 12px 0 0;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  color: var(--texto);
  background: var(--marca-suave);
  border: 1px solid var(--marca);
  border-radius: 6px;
}

.link-discreto {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 4px;
  font-size: 12px;
  color: var(--texto-fraco);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}
.link-discreto:hover { color: var(--texto); }

.entrada-ramal {
  margin-top: 14px;
  padding: 14px;
  text-align: left;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 8px;
}
.entrada-ramal label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  color: var(--texto-fraco);
}
.entrada-ramal input { width: 100%; margin-top: 4px; }
.entrada-ramal .btn { width: 100%; margin-top: 4px; }
.entrada-ramal .dica { font-size: 11px; opacity: .8; }

/* Abas da caixa de configuração: ramal direto / Microsoft / app instalado */
.abas-config {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--linha);
  padding-bottom: 8px;
}
.btn-aba {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--texto-fraco);
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-aba:hover { color: var(--texto); }
.btn-aba.ativa {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
}
.painel-config .dica { display: inline; font-size: 11px; opacity: .8; }
.painel-config p.dica { display: block; margin: 8px 0 10px; }

.problema {
  font-size: 12px;
  color: var(--vermelho);
  line-height: 1.5;
  padding: 2px 0;
}
/* Não é erro: é só o que falta para ver mais gente */
.problema.info { color: var(--texto-fraco); }
.aviso-agenda .problema strong { display: inline; margin: 0; font-size: inherit; color: var(--texto); }
.problema .link-discreto {
  display: inline; width: auto; margin: 0 0 0 4px; padding: 0;
  font-size: 12px; text-align: left;
}

/* Etiqueta da origem de cada pessoa */
.etiqueta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  vertical-align: middle;
  border: 1px solid var(--linha);
  color: var(--texto-fraco);
}
.etiqueta.frequentes { border-color: var(--marca); color: var(--marca); }
.etiqueta.diretorio { border-color: #4a7ebb; color: #4a7ebb; }
.etiqueta.pessoais { border-color: #6b8e4e; color: #6b8e4e; }

.item-info { min-width: 0; flex: 1; }
.item-botoes { display: flex; align-items: center; gap: 4px; flex: none; }
.item-editar {
  background: transparent;
  border: 0;
  color: var(--texto-fraco);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
}
.item-editar:hover { background: var(--fundo-3); color: var(--texto); }
.item-acao.secundaria {
  background: transparent;
  border: 1px dashed var(--linha);
  color: var(--texto-fraco);
}
.item-acao.secundaria:hover { border-style: solid; color: var(--texto); }

/* Caixa de definir ramal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.modal-caixa {
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 18px;
  width: 100%;
  max-width: 340px;
}
.modal-caixa h3 { margin: 0 0 6px; font-size: 15px; }
.modal-caixa .dica { margin: 0 0 12px; font-size: 12px; color: var(--texto-fraco); line-height: 1.5; }
.modal-caixa input { width: 100%; margin-bottom: 12px; }

/* Pista embaixo de um campo: diz o que o programa vai completar sozinho.
   Discreta de propósito — quem já sabe o endereço não precisa ler. */
.pista {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  opacity: .72;
}

/* Seletor de saída dentro da chamada: cabe na largura do painel e o
   dedo alcança sem mirar (o celular é o caso de uso principal). */
#caixaOndeOuvir label { display: block; font-size: 12px; }
#caixaOndeOuvir select { width: 100%; margin-top: 4px; }

/* ---- Aviso pelo Teams (ajustes) ------------------------------------ */
.cartao-aviso-teams {
  border: 1px solid var(--borda, #333);
  border-left: 3px solid var(--marca, #C62128);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 0 14px;
  background: var(--fundo-2, rgba(255,255,255,.03));
}
.cartao-aviso-teams strong { display: block; margin-bottom: 4px; }
.cartao-aviso-teams p {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: .8;
}
.cartao-aviso-teams .check { margin-bottom: 10px; }
.resultado-aviso {
  margin: 10px 0 0 !important;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 1 !important;
  /* Mensagem crua da Microsoft cabe aqui sem estourar a coluna. */
  overflow-wrap: anywhere;
}
.resultado-aviso.bom  { color: #4ec37a; }
.resultado-aviso.ruim { color: #e5776b; }

/* ---- Teste do aviso na tela de entrada ----------------------------- */
.entrada-teste {
  margin: 10px 0 0;
  text-align: center;
}
.entrada-teste .resultado-aviso { text-align: left; }

/* Versão da aba: discreta, só para suporte */
.versao-aba {
  margin: 2px 0 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--texto-fraco);
  opacity: .7;
  user-select: none;
}

/* =====================================================================
 * Celular: a ligação sai pelo app SIP do aparelho (Groundwire, Linphone)
 * ===================================================================== */
/* O modo não é "no ar" nem "fora": quem registra o ramal é o app do
   celular. Sem bolinha, o texto diz por onde sai a ligação. */
.ponto.celular { display: none; }

.app-celular {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 10px;
  flex: none;
  font-size: 12px;
  color: var(--texto-fraco);
}
.app-celular-rotulo { flex: none; }
.app-celular-opcoes {
  flex: 1 1 100%;
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--fundo-2);
  border: 1px solid var(--linha);
  border-radius: 10px;
}
.app-celular-opcoes button {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--texto-fraco);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.app-celular-opcoes button.ativo {
  background: var(--fundo);
  color: var(--texto);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 1px var(--linha);
}
.app-celular-opcoes button:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.app-celular.destaque .app-celular-opcoes { animation: destaque-app 1.4s ease-out; }
@keyframes destaque-app {
  0%   { box-shadow: 0 0 0 3px var(--marca); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* O cartão que aparece depois do Chamar */
.abrir-app {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--fundo);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
}
.abrir-app-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.abrir-app-titulo { font-size: 12px; color: var(--texto-fraco); }
.abrir-app-numero {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.abrir-app-dica { font-size: 12px; color: var(--texto-fraco); }
.abrir-app-botoes { display: flex; align-items: center; gap: 8px; }
.abrir-app-botoes .btn {
  flex: 1 1 auto;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.abrir-app-botoes .icone { flex: none; }
/* O recado sobe para não ficar por baixo do cartão */
.abrir-app:not(.hidden) ~ .recado { bottom: 200px; }

@media (prefers-reduced-motion: reduce) {
  .app-celular.destaque .app-celular-opcoes { animation: none; }
}

/* Celular: o histórico cabe na tela sem rolar de lado. A duração some
   (no celular quem sabe quanto durou é o app que ligou) e o tipo fica só
   na seta; o texto continua lá para leitor de tela. */
@media (max-width: 560px) {
  .tabela-historico th:nth-child(3),
  .tabela-historico td.duracao { display: none; }
  .tabela-historico th:nth-child(2) { font-size: 0; }
  .tabela-historico .direcao { font-size: 0; gap: 0; }
  .tabela-historico .direcao svg { width: 15px; height: 15px; }
  .tabela-historico td { padding: 7px 6px; }
  .tabela-historico td.quando .texto-quando { display: block; font-size: 12px; margin-bottom: 4px; }
}

/* =====================================================================
 * Contatos v12: Empresa / Outros, ficha, escolha do número, Favoritos
 * ===================================================================== */
.lista li.contato { padding: 7px 10px; }
.lista li.contato:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.contato .item-titulo { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.item-nome { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O cargo cede espaço antes do nome */
.item-cargo {
  flex: 0 1000 auto;
  font-size: 12px;
  color: var(--texto-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.lista li.contato .item-sub { font-variant-numeric: tabular-nums; }

/* Separador A, B, C… numa lista longa */
.lista li.letra {
  display: block;
  padding: 12px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--texto-fraco);
  border: 0;
  border-bottom: 1px solid var(--linha);
  border-radius: 0;
  cursor: default;
}
.lista li.letra:hover { background: transparent; border-color: var(--linha); }

/* A estrela dos Favoritos */
.estrela {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--raio);
  color: var(--texto-fraco);
  cursor: pointer;
}
.estrela svg { width: 18px; height: 18px; }
.estrela:hover { background: var(--fundo-3); color: var(--texto); }
.estrela.ligada { color: var(--amarelo); }
.estrela:focus-visible, .item-acao:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

.item-acao.ligar { display: inline-flex; align-items: center; gap: 2px; }
.item-acao .setinha { width: 16px; height: 16px; margin-right: -4px; }

/* ---- Ficha do contato ---- */
#aba-ficha > * { max-width: 680px; }
.voltar {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 14px -6px;
  padding: 5px 8px;
  background: transparent;
  border: 0;
  border-radius: var(--raio);
  color: var(--texto-fraco);
  font: inherit; font-size: 13px;
  cursor: pointer;
}
.voltar:hover { background: var(--fundo-3); color: var(--texto); }
.ficha-topo { display: flex; align-items: center; gap: 16px; }
.ficha .avatar-grande { width: 64px; height: 64px; font-size: 22px; letter-spacing: 0; }
.ficha-quem { min-width: 0; }
.ficha-nome {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.ficha-cargo { margin-top: 2px; font-size: 13px; color: var(--texto-fraco); }
.ficha-email { margin-top: 2px; font-size: 13px; color: var(--texto-fraco); overflow-wrap: anywhere; user-select: text; }
.ficha-grupo {
  display: inline-block;
  margin-top: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--fundo-3);
  color: var(--texto-fraco);
  font-size: 11px;
}
.ficha-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.btn-estrela { display: inline-flex; align-items: center; gap: 6px; }
.btn-estrela svg { width: 16px; height: 16px; }
.btn-estrela.ligada svg { color: var(--amarelo); }
.ficha-secao {
  margin: 20px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.ficha-tels { list-style: none; margin: 0; padding: 0; }
.ficha-tels li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
}
.ficha-tels li.vazio { display: block; text-align: left; border-bottom: 0; }
.tel-info { display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; row-gap: 1px; min-width: 0; }
.tel-tipo { font-size: 12px; color: var(--texto-fraco); align-self: center; }
.tel-num { font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tel-origem { grid-column: 2; font-size: 11px; color: var(--texto-fraco); }
.tel-remover { padding: 6px; }

.ficha-novo { margin-top: 18px; }
.ficha-novo-rotulo { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.ficha-novo-campos { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-novo-campos select { width: auto; flex: 0 0 130px; }
.ficha-novo-campos input { flex: 1 1 180px; width: auto; min-width: 0; }
.ficha-novo .dica { margin: 8px 0 0; font-size: 12px; color: var(--texto-fraco); }

/* ---- Escolha do número (Ligar com mais de um telefone) ---- */
.escolha {
  position: fixed;
  z-index: 70;
  min-width: 240px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  background: var(--fundo);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.escolha-titulo {
  padding: 6px 10px 8px;
  font-size: 12px;
  color: var(--texto-fraco);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.escolha-lista { display: flex; flex-direction: column; }
.escolha-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--texto);
  font: inherit; font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.escolha-item:hover, .escolha-item:focus-visible { background: var(--fundo-3); outline: none; }
.escolha-tipo { font-size: 12px; color: var(--texto-fraco); }
.escolha-num { font-variant-numeric: tabular-nums; }
@media (max-width: 599px) {
  /* No celular a escolha sobe de baixo, com dedo de folga */
  .escolha {
    left: 8px; right: 8px; top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    min-width: 0;
  }
  .escolha-item { padding: 13px 12px; font-size: 15px; }
}

/* =====================================================================
 * Contatos v13: editar no Microsoft 365, novo contato, contas escondidas
 * ===================================================================== */
.linha-busca { display: flex; gap: 8px; align-items: stretch; }
.linha-busca input { flex: 1 1 auto; min-width: 0; }
#btnNovoContato { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; }
#btnNovoContato.hidden { display: none; }
@media (max-width: 480px) {
  #btnNovoContato span { display: none; }   /* no celular, só o ícone */
}

.link-acao {
  padding: 2px 4px;
  background: transparent;
  border: 0;
  color: var(--marca);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
}
.link-acao:hover { text-decoration: underline; }
.link-acao:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }

.lista li.apagado .item-titulo, .lista li.apagado .item-sub { opacity: .6; }
.rodape-ocultos { font-size: 12px; }

.btn-editar { display: inline-flex; align-items: center; gap: 6px; }

.ficha-editar { margin-top: 16px; }
.ficha-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.ficha-campos label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto-fraco); }
.ficha-campos input { width: 100%; }
@media (max-width: 560px) { .ficha-campos { grid-template-columns: 1fr; } }

.linhas-tel { display: flex; flex-direction: column; gap: 8px; }
.linha-tel { display: flex; align-items: center; gap: 8px; }
.linha-tel select { flex: 0 0 132px; width: auto; }
.linha-tel input { flex: 1 1 auto; width: auto; min-width: 0; font-variant-numeric: tabular-nums; }
.linha-tel input:disabled, .linha-tel select:disabled { opacity: .65; }
.linha-tel-nota { flex: none; font-size: 11px; color: var(--texto-fraco); width: 86px; }
.linha-tel .icone { flex: none; padding: 6px; }
#btnMaisTel { margin-top: 8px; }
.ficha-editar .dica { margin: 12px 0; font-size: 12px; color: var(--texto-fraco); line-height: 1.5; max-width: 70ch; }
.ficha-editar .linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* O ícone de telefone no lugar das iniciais (contato novo) */
.ficha .avatar-grande svg { width: 26px; height: 26px; fill: currentColor; }

/* Foto da pessoa (Microsoft 365) no lugar das iniciais */
.avatar.com-foto, .avatar-grande.com-foto { background: var(--fundo-3); overflow: hidden; }
.avatar img, .avatar-grande img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Sugestões de contato no campo de transferir: acima do campo, porque a
   caixa fica no pé da tela de chamada */
.caixa-transferir .sugestoes {
  flex: 1 1 100%;
  order: -1;
  margin: 0 0 4px;
  max-height: 200px;
  background: var(--cartao-chamada);
  color: var(--texto-chamada);
  border-color: var(--linha-chamada);
}
.caixa-transferir .sugestoes div:hover { background: var(--passar-chamada); }