/* El campo de teléfono/WhatsApp (Club 1.9.2, GRI_Telefono): [bandera +57 ▾][número] en un
   solo control, con buscador de país. Sirve igual en wp-admin (.gri-wrap) y en el front
   (.gri-reg / panel del socio). Canon de marca JPI: sus tokens van sobre su clase raíz
   (.gri-tel-campo), sin valores de reserva. */

.gri-tel-campo {
	--gri-tel-navy: #091146;
	--gri-tel-naranja: #ff7a00;
	--gri-tel-tinta-suave: #091146b3;
	--gri-tel-borde: #0911461f;
	--gri-tel-borde-campo: #09114640;
	--gri-tel-gris: #f5f5f7;
	--gri-tel-intermedia: #ececf1;
	--gri-tel-crema: #ffedd1;
	--gri-tel-texto-crema: #8a4b00;
	--gri-tel-foco: 0 0 0 2px #ff7a0033;
	--gri-tel-sombra: 0 12px 32px #0911461a;

	display: flex;
	flex-direction: column;
	gap: .375rem;
	min-width: 0;
	margin: 0 0 1rem;
}
.gri-form-grid > .gri-tel-campo { margin: 0; gap: .25rem; }
.gri-tel__rotulo { font-weight: 600; font-size: .875rem; color: var(--gri-tel-navy); }
.gri-form-grid .gri-tel__rotulo { font-size: .75rem; }
.gri-tel__ayuda { font-weight: 400; color: var(--gri-tel-tinta-suave); }

.gri-tel {
	position: relative;
	display: flex;
	align-items: stretch;
	min-height: 2.75rem;
	border: 1px solid var(--gri-tel-borde-campo);
	border-radius: .5rem;
	background: #fff;
	box-sizing: border-box;
}
.gri-tel:focus-within { border-color: var(--gri-tel-naranja); box-shadow: var(--gri-tel-foco); }

/* Sin JavaScript: el selector nativo, pegado al número. */
.gri-tel .gri-tel__pais {
	flex: 0 1 auto;
	max-width: 46%;
	margin: 0 !important;
	padding: 0 .5rem 0 .625rem !important;
	border: 0 !important;
	border-right: 1px solid var(--gri-tel-borde) !important;
	border-radius: .5rem 0 0 .5rem !important;
	background-color: var(--gri-tel-gris) !important;
	box-shadow: none !important;
	color: var(--gri-tel-navy);
	font-family: inherit;
	font-size: .875rem;
	min-height: 0 !important;
	height: auto !important;
}
/* Con JavaScript el selector queda para el formulario y el botón lo reemplaza a la vista. */
.gri-tel.is-mejorado .gri-tel__pais { position: absolute; width: 1px; height: 1px !important; opacity: 0; pointer-events: none; }

.gri-tel__boton {
	display: flex;
	align-items: center;
	gap: .375rem;
	flex: 0 0 auto;
	padding: 0 .625rem 0 .75rem;
	border: 0;
	border-right: 1px solid var(--gri-tel-borde);
	border-radius: .5rem 0 0 .5rem;
	background: var(--gri-tel-gris);
	color: var(--gri-tel-navy);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.gri-tel__boton:hover { background: var(--gri-tel-intermedia); }
.gri-tel__boton:focus-visible { outline: 2px solid var(--gri-tel-naranja); outline-offset: -2px; }
.gri-tel__bandera { font-size: 1.125rem; line-height: 1; }
.gri-tel__flecha { font-size: .6875rem; color: var(--gri-tel-tinta-suave); }

.gri-tel .gri-tel__num {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	margin: 0 !important;
	padding: .625rem .75rem !important;
	border: 0 !important;
	border-radius: 0 .5rem .5rem 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font-family: inherit;
	font-size: .9375rem;
	color: var(--gri-tel-navy);
	min-height: 0 !important;
	height: auto !important;
}

/* El buscador. */
.gri-tel__lista-caja {
	position: absolute;
	z-index: 1000;
	top: calc(100% + .375rem);
	left: 0;
	width: 100%;
	min-width: 17.5rem;
	max-width: 23.75rem;
	padding: .5rem;
	border: 1px solid var(--gri-tel-borde);
	border-radius: 1rem;
	background: #fff;
	box-shadow: var(--gri-tel-sombra);
	box-sizing: border-box;
}
.gri-tel__lista-caja[hidden] { display: none; }
.gri-tel .gri-tel__buscar {
	width: 100% !important;
	margin: 0 !important;
	padding: .5625rem .75rem !important;
	border: 1px solid var(--gri-tel-borde-campo) !important;
	border-radius: .5rem !important;
	font-family: inherit;
	font-size: .9375rem;
	color: var(--gri-tel-navy);
	box-sizing: border-box;
	box-shadow: none !important;
}
.gri-tel .gri-tel__buscar:focus { border-color: var(--gri-tel-naranja) !important; box-shadow: var(--gri-tel-foco) !important; outline: none; }
.gri-tel__opciones { list-style: none; margin: .375rem 0 0; padding: 0; max-height: 17.5rem; overflow-y: auto; }
.gri-tel__grupo { margin: 0; padding: .5rem .5rem .25rem; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gri-tel-tinta-suave); }
.gri-tel__opcion { display: flex; align-items: center; gap: .625rem; margin: 0; padding: .5rem; border-radius: .5rem; cursor: pointer; color: var(--gri-tel-navy); font-size: .875rem; }
.gri-tel__opcion.is-activa { background: var(--gri-tel-crema); color: var(--gri-tel-texto-crema); }
.gri-tel__opcion.is-activa .gri-tel__opcion-ind { color: var(--gri-tel-texto-crema); }
.gri-tel__opcion[aria-selected="true"] { font-weight: 700; }
.gri-tel__opcion .gri-tel__opcion-ind { margin-left: auto; color: var(--gri-tel-tinta-suave); font-variant-numeric: tabular-nums; }
.gri-tel__vacio { padding: .625rem .5rem; color: var(--gri-tel-tinta-suave); font-size: .875rem; }

@media (max-width: 560px) {
	.gri-tel__lista-caja { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	.gri-tel *, .gri-tel { transition: none !important; }
}