/* Selector de teléfono internacional (bandera + código), sobre
   intl-tel-input v29.5.3 (CDN, versión fija) — reskineado con la
   paleta y el modo claro/oscuro del proyecto en vez de sus colores por
   defecto. Ver docs/guia-de-estilo.md para los tokens (--campo,
   --vidrio-borde, --superficie, --texto-v2, etc.) y
   cliente/js/selector-telefono.js para el JS.

   Reutilizable: cualquier <input class="campo" data-selector-telefono>
   se convierte solo, en cualquier pantalla que cargue estos 2 archivos
   más los 2 <script>/<link> de intl-tel-input, en ese orden — ver el
   comentario de cabecera de selector-telefono.js. */

.iti {
  display: block;
  width: 100%;
  /* Variables propias de intl-tel-input, redefinidas con los tokens del
     proyecto: así el widget entero sigue el tema claro/oscuro solo, sin
     duplicar reglas de color por cada parte (botón, buscador, lista). */
  --iti-border-color: var(--vidrio-borde);
  --iti-hover-color: rgba(var(--acento-texto), 0.1);
  --iti-country-selector-bg: transparent;
  --iti-icon-color: var(--texto-v2-suave);
}

.iti__tel-input {
  width: 100%;
}

/* Botón de bandera + código, cerrado: sin fondo ni borde propios (usa
   el fondo/borde del .campo que tiene detrás) — solo redondea la
   esquina izquierda para no salirse del óvalo del campo. */
.iti__country-container {
  border-radius: 12px 0 0 12px;
  overflow: hidden;
}
.iti__selected-country-primary:hover,
.iti__selected-country[aria-expanded='true'] .iti__selected-country-primary {
  background-color: var(--iti-hover-color);
}
.iti__selected-dial-code {
  color: var(--texto-v2);
  font-weight: 700;
}
.iti__arrow {
  border-color: var(--iti-icon-color);
}

/* Panel desplegado (buscador + lista de países): es una capa flotante
   sobre el resto de la página, así que acá sí necesita un fondo sólido
   y legible — a diferencia del botón cerrado, que va transparente. */
.iti__country-selector {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(20, 20, 40, 0.22);
}
.iti--inline-country-selector .iti__country-selector {
  background: var(--superficie);
  border-color: var(--vidrio-borde);
}
.iti__search-input-wrapper {
  border-color: var(--vidrio-borde);
}
.iti__search-input {
  background: var(--superficie-2);
  color: var(--texto-v2);
  font-size: 0.95rem;
}
.iti__search-input::placeholder {
  color: var(--texto-v2-tenue);
}
.iti__country-list {
  background: var(--superficie);
  max-height: 220px;
}
.iti__country {
  color: var(--texto-v2);
}
.iti__country-name {
  font-size: 0.92rem;
}
.iti__no-results {
  color: var(--texto-v2-suave);
}
/* Línea divisoria bajo el grupo de países fijados arriba (Cuba, Estados
   Unidos, España, Uruguay, México — ver countryOrder en
   selector-telefono.js), antes de que siga el resto en orden
   alfabético. "mx" es a propósito el último del grupo. */
.iti__country-selector:has(.iti__search-input:placeholder-shown) .iti__country[data-iso2='mx'] {
  border-bottom: 1px solid var(--iti-border-color);
}

/* Lista a pantalla completa en móvil (la abre la propia librería en
   pantallas angostas): mismo fondo oscurecido que ya usan las ventanas
   modales del proyecto (.ventana-fondo, ver guía §3). */
.iti--fullscreen-popup.iti--detached-country-selector {
  background-color: rgba(6, 6, 10, 0.72);
}

/* Estado de error: lo activa el formulario que use este componente
   (ej. contacto.js) agregando aria-invalid="true" al input cuando el
   número no es válido para el país elegido — mismo criterio que
   .campo[aria-invalid="true"] del resto del proyecto. */
.iti__tel-input[aria-invalid='true'] {
  border-color: rgba(var(--peligro), 0.7) !important;
}