/* ==========================================================================
   EL CAMPO DE TELÉFONO GUIADO (components/telefono.js)
   El selector de país pegado a la izquierda del campo, dentro del mismo borde: es UN dato
   —el número entero— y se lee de un tirón, «VE +58 (412) 123-4567».
   ========================================================================== */

.tel-campo {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  transition: border-color var(--dur-hover, .12s) ease, box-shadow var(--dur-hover, .12s) ease;
}
.tel-campo:focus-within { border-color: var(--accent); }

.tel-pais {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 7px 0 0 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--dur-hover, .12s) ease;
}
.tel-pais:hover { background: var(--bg-hover); }
.tel-pais:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tel-pais > svg {
  width: 14px;
  height: 14px;
  color: var(--text-dim);
  transition: transform var(--dur-hover, .12s) ease;
}
.tel-pais[aria-expanded="true"] > svg { transform: rotate(180deg); }
/* EL PAÍS SE DICE CON SU CÓDIGO y no con bandera: en Windows los emojis de bandera salen
   como dos letras sueltas, y una imagen de bandera dependería de un servidor de fuera. */
.tel-iso {
  display: inline-block;
  min-width: 24px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-align: center;
}
.tel-pref { font-variant-numeric: tabular-nums; }

.tel-campo .tel-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 13px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* LA TECLA QUE NO ENTRA da un tirón corto (mando del prototipo): sin él parece que el teclado
   se colgó. */
.tel-campo.tel-rechazo { animation: tel-rechazo .14s ease; }
@keyframes tel-rechazo {
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* --- El menú de países: EL MENÚ DE LA CONSOLA (.msg-menu-wrap) con un buscador encima.
   Va fijo sobre todo y lo coloca positionFloating según el espacio; aquí solo su forma. */
.tel-pop { width: min(300px, calc(100vw - 16px)); }
.tel-pop .msg-menu {
  min-width: 0;
  width: 100%;
  /* La lista es larga (casi 200 países): scrollea dentro del menú, que es un desplegable y
     no una página. El tope deja sitio para abrir arriba o abajo del campo. */
  max-height: min(300px, 45vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tel-pop .msg-menu-item > span:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.tel-pop .msg-menu-item.tel-actual { font-weight: 700; }
/* El buscador es la cabecera de la MISMA tarjeta (presence-pop-wrap), separada por una línea. */
.tel-menu-buscar { padding: 8px; border-bottom: 1px solid var(--border); }
.tel-menu-buscar input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.tel-menu-buscar input:focus { outline: 0; border-color: var(--accent); }
.tel-menu-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-menu-pref { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tel-menu-vacio { margin: 8px 2px 0; color: var(--text-dim); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .tel-campo,
  .tel-pais,
  .tel-pais > svg { transition: none; }
  .tel-campo.tel-rechazo { animation: none; }
}