/* campoTelefone.css — modo internacional (comPaises) da gaveta campo-telefone 1.2.0, card logiccos_library#269.
 * ESQUELETO estrutural sobre os tokens --ag-* (sem cor nova). A lapidação visual é do Gemini (estava fora do ar
 * na entrega: gemini-design.js "indisponivel: rede") — pendência registrada no card. */
.kit-campo-telefone-grupo {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 2.5rem;
  border: 1px solid var(--ag-borda, #dfe3ea);
  border-radius: 8px;
  background: var(--ag-superficie, #fff);
  color: var(--ag-text, #111827);
}
.kit-campo-telefone-grupo:focus-within { outline: 2px solid var(--ag-acento, #7dc242); outline-offset: 1px; }
.kit-campo-telefone-pais {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  white-space: nowrap;
  flex: none;
  border: 0;
  border-right: 1px solid var(--ag-borda, #dfe3ea);
  border-radius: 8px 0 0 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.kit-campo-telefone-pais:disabled { cursor: default; }
/* 1.4.0 (card logiccos_library#504): bandeira IMAGEM 22x16 e seta ▼, mesmas medidas do Agendou (agenda_f .pi-flag/.pi-caret). */
.kit-campo-telefone-bandeira { display: block; flex: none; width: 22px; height: 16px; object-fit: cover; border-radius: 2px; }
.kit-campo-telefone-bandeira--texto { width: auto; height: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; line-height: 16px; }
.kit-campo-telefone-seta { font-size: 9px; line-height: 1; opacity: 0.6; }
.kit-campo-telefone-pais:disabled .kit-campo-telefone-seta { display: none; }
.kit-campo-telefone-item { display: flex; align-items: center; gap: 8px; }
.kit-campo-telefone-ddi { font-size: 0.875rem; color: var(--ag-text-sec, #5f6368); }
.kit-campo-telefone-grupo > .kit-campo-telefone {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0 0.6rem;
}
.kit-campo-telefone-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  box-sizing: border-box;
  width: 100%;
  min-width: 16rem;
  max-height: 16rem;
  overflow: auto;
  border: 1px solid var(--ag-borda, #dfe3ea);
  border-radius: 8px;
  background: var(--ag-superficie, #fff);
}
.kit-campo-telefone-lista[hidden] { display: none; }
.kit-campo-telefone-busca {
  box-sizing: border-box;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-bottom: 1px solid var(--ag-borda, #dfe3ea);
  background: transparent;
  color: inherit;
  font: inherit;
  /* 1.5.0 (card #548): a busca fica grudada no topo enquanto a lista rola */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ag-superficie, #fff);
}
.kit-campo-telefone-lista ul { margin: 0; padding: 0; list-style: none; }
.kit-campo-telefone-item { padding: 0.55rem 0.7rem; cursor: pointer; }
.kit-campo-telefone-item:hover,
.kit-campo-telefone-item[aria-selected="true"] { background: color-mix(in srgb, var(--ag-acento, #7dc242) 16%, transparent); }
/* 1.5.0 (card logiccos_library#548): país do "pular ao digitar"/setas, separador depois dos fixos (Brasil) e marca no atual */
.kit-campo-telefone-item { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.kit-campo-telefone-item[data-ativo="true"] { background: color-mix(in srgb, currentColor 10%, transparent); }
.kit-campo-telefone-item[aria-selected="true"] { font-weight: 600; }
.kit-campo-telefone-item[aria-selected="true"][data-ativo="true"] { background: color-mix(in srgb, var(--ag-acento, #7dc242) 24%, transparent); }
.kit-campo-telefone-separador { height: 0; margin: 4px 0; border-top: 1px solid var(--ag-borda, #dfe3ea); list-style: none; }
.kit-campo-telefone-busca[aria-invalid="true"] { color: var(--md-sys-color-error, #b3261e); }
.kit-campo-telefone--ok { color: var(--md-sys-color-tertiary, #386a20); }
.kit-campo-telefone--erro { color: var(--md-sys-color-error, #b3261e); }
.kit-campo-telefone-status { margin: 4px 0 0; font-size: 0.75rem; }

/* Tema escuro (card monitor_balcao#179): usa os tokens do tema (--cor-* / --ag-*), sem fundo branco; o tema claro fica inalterado. */
:root[data-theme="escuro"] .kit-campo-telefone-grupo {
  background: var(--cor-campo-fundo, var(--ag-surface));
  border-color: var(--cor-campo-contorno, var(--ag-border));
  color: var(--cor-campo-texto, var(--cor-texto, var(--ag-text)));
}
:root[data-theme="escuro"] .kit-campo-telefone-pais {
  background: var(--cor-campo-fundo, var(--ag-surface));
  border-right-color: var(--cor-campo-contorno, var(--ag-border));
  color: var(--cor-campo-texto, var(--cor-texto, var(--ag-text)));
}
:root[data-theme="escuro"] .kit-campo-telefone-ddi {
  color: var(--cor-texto-secundario, var(--ag-text-secondary));
}
:root[data-theme="escuro"] .kit-campo-telefone-lista {
  background: var(--cor-superficie-flutuante, var(--ag-overlay-bg, var(--ag-surface)));
  border-color: var(--cor-campo-contorno, var(--ag-border));
  color: var(--cor-texto, var(--ag-text));
}
:root[data-theme="escuro"] .kit-campo-telefone-busca {
  border-bottom-color: var(--cor-divisor, var(--ag-divider, var(--ag-border)));
  background: var(--cor-superficie-flutuante, var(--ag-overlay-bg, var(--ag-surface)));
}
:root[data-theme="escuro"] .kit-campo-telefone-separador {
  border-top-color: var(--cor-divisor, var(--ag-divider, var(--ag-border)));
}
:root[data-theme="escuro"] .kit-campo-telefone-busca[aria-invalid="true"] { color: #f2b8b5; }

/* 1.3.0 (card logiccos_library#392): selos "tem WhatsApp" / "tem Telegram" — pílulas pequenas abaixo do campo; cor por
 * estado só em tokens existentes (texto nunca depende só da cor: o texto do selo diz sim/não/não conferido). */
.kit-campo-telefone-selos { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 4px 0 0; }
.kit-campo-telefone-selo {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px;
  border: 1px solid var(--ag-borda, #dfe3ea); font-size: 0.75rem; font-weight: 600; line-height: 1.2;
  color: var(--ag-text-sec, #5f6368); background: transparent;
}
.kit-campo-telefone-selo--sim { color: var(--md-sys-color-tertiary, #386a20); border-color: currentColor; }
.kit-campo-telefone-selo--nao { color: var(--md-sys-color-error, #b3261e); border-color: currentColor; }
:root[data-theme="escuro"] .kit-campo-telefone-selo { color: var(--cor-texto-secundario, var(--ag-text-secondary)); }
:root[data-theme="escuro"] .kit-campo-telefone-selo--sim { color: #8bd36b; }
:root[data-theme="escuro"] .kit-campo-telefone-selo--nao { color: #f2b8b5; }