/* Campos del socio (Club 1.12.0, GRI_Campos / GRI_Foto): buscador de país, ciudad y profesión,
   fechas DD/MM/AAAA y la foto con cámara. Canon de marca JPI: tokens sobre las clases raíz de cada
   pieza, sin reservas; la letra la heredan del formulario (Outfit). */

.gri-combo,
.gri-fecha,
.gri-foto,
.gri-foto-modal,
.gri-campo-profesion {
	--gri-c-navy: #091146;
	--gri-c-naranja: #ff7a00;
	--gri-c-naranja-hover: #e66e00;
	--gri-c-blanco: #ffffff;
	--gri-c-tinta-suave: #091146b3;
	--gri-c-borde: #0911461f;
	--gri-c-borde-campo: #09114640;
	--gri-c-gris: #f5f5f7;
	--gri-c-intermedia: #ececf1;
	--gri-c-crema: #ffedd1;
	--gri-c-texto-crema: #8a4b00;
	--gri-c-ok: #0e6b47;
	--gri-c-rojo: #b32d2e;
	--gri-c-foco: 0 0 0 2px #ff7a0033;
	--gri-c-sombra: 0 12px 32px #0911461a;
}

.gri-combo [hidden],
.gri-foto [hidden],
.gri-foto-modal [hidden],
.gri-campo-profesion [hidden] { display: none !important; }

/* ── Buscador (país, ciudad, profesión) ─────────────────────────────── */
.gri-combo { position: relative; display: block; }
.gri-combo > input { width: 100%; padding-right: 2.5rem !important; }
.gri-combo__flecha {
	position: absolute;
	top: 50%;
	right: .75rem;
	display: grid;
	place-items: center;
	color: var(--gri-c-tinta-suave);
	transform: translateY(-50%);
	cursor: pointer;
	transition: transform .15s ease;
}
.gri-combo.is-abierta .gri-combo__flecha { transform: translateY(-50%) rotate(180deg); }
.gri-combo__lista {
	position: absolute;
	z-index: 60;
	top: calc(100% + .375rem);
	left: 0;
	right: 0;
	max-height: 17rem;
	margin: 0;
	padding: .375rem;
	overflow-y: auto;
	list-style: none;
	background: var(--gri-c-blanco);
	border: 1px solid var(--gri-c-borde);
	border-radius: 1rem;
	box-shadow: var(--gri-c-sombra);
	text-align: left;
}
.gri-combo__grupo {
	margin: 0;
	padding: .5rem .625rem .25rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gri-c-tinta-suave);
}
.gri-combo__opcion {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin: 0;
	padding: .5625rem .75rem;
	border-radius: .5rem;
	color: var(--gri-c-navy);
	font-size: .9375rem;
	cursor: pointer;
}
.gri-combo__opcion.is-activa { background: var(--gri-c-crema); color: var(--gri-c-texto-crema); }
.gri-combo__sub { flex: none; font-size: .8125rem; color: var(--gri-c-tinta-suave); }
.gri-combo__opcion.is-activa .gri-combo__sub { color: var(--gri-c-texto-crema); }
.gri-combo__opcion--accion { margin-top: .25rem; border-top: 1px solid var(--gri-c-borde); border-radius: 0 0 .5rem .5rem; font-weight: 600; }
.gri-combo__opcion--accion:first-child { margin-top: 0; border-top: 0; border-radius: .5rem; }
.gri-combo__vacio { padding: .625rem .75rem; font-size: .875rem; color: var(--gri-c-tinta-suave); }

/* Profesión: sin JavaScript, el select + "si no está, escríbela"; con él, solo el buscador. */
.gri-campo-profesion__nueva { display: block; margin-top: .5rem; }
.gri-campo-profesion__nueva label { font-size: .8125rem; }
.gri-campo-profesion.is-mejorado .gri-campo-profesion__nueva { display: none; }
.gri-campo-profesion__nota { display: block; margin-top: .375rem; color: var(--gri-c-texto-crema); font-size: .8125rem; }

/* ── Fechas DD/MM/AAAA ──────────────────────────────────────────────── */
.gri-fecha { position: relative; display: block; }
.gri-fecha > input[type="text"] { width: 100%; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.gri-fecha.con-calendario > input[type="text"] { padding-right: 2.75rem !important; }
.gri-fecha__nativa {
	position: absolute !important;
	right: 0;
	bottom: 0;
	width: 2.5rem !important;
	height: 100% !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0;
	pointer-events: none;
}
.gri-fecha__calendario {
	position: absolute;
	top: 50%;
	right: .375rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--gri-c-tinta-suave);
	transform: translateY(-50%);
	cursor: pointer;
}
.gri-fecha__calendario:hover { background: var(--gri-c-gris); color: var(--gri-c-navy); }
.gri-fecha__calendario:focus-visible { outline: none; box-shadow: var(--gri-c-foco); }

/* ── La foto ────────────────────────────────────────────────────────── */
.gri-foto { display: flex; align-items: center; gap: 1rem; margin: 0 0 .875rem; }
.gri-foto__vista { flex: none; }
.gri-foto__cuerpo { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.gri-foto__rotulo { font-size: .875rem; font-weight: 600; color: var(--gri-c-navy); }
.gri-foto__botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.gri-foto__boton {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	box-sizing: border-box;
	min-height: 2.5rem;
	margin: 0;
	padding: .5rem 1rem;
	border: 1px solid var(--gri-c-naranja);
	border-radius: 999px;
	background: var(--gri-c-naranja);
	color: var(--gri-c-blanco);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.gri-foto__boton:hover { background: var(--gri-c-naranja-hover); border-color: var(--gri-c-naranja-hover); }
.gri-foto__boton--suave { background: var(--gri-c-blanco); border-color: var(--gri-c-borde-campo); color: var(--gri-c-navy); }
.gri-foto__boton--suave:hover { background: var(--gri-c-gris); border-color: var(--gri-c-navy); }
.gri-foto__boton:focus-visible,
.gri-foto__archivo:focus-visible + .gri-foto__boton { outline: none; box-shadow: var(--gri-c-foco); }
.gri-foto__archivo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; }
.gri-foto__ayuda { font-size: .8125rem; color: var(--gri-c-tinta-suave); }
.gri-foto__ayuda.is-lista { color: var(--gri-c-ok); font-weight: 600; }

/* La ventana de la cámara web. */
.gri-foto-modal {
	width: min(28rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 0;
	border-radius: 1rem;
	background: var(--gri-c-blanco);
	color: var(--gri-c-navy);
	box-shadow: var(--gri-c-sombra);
}
.gri-foto-modal::backdrop { background: var(--gri-c-tinta-suave); }
.gri-foto-modal__caja { display: flex; flex-direction: column; gap: .875rem; padding: 1.5rem; }
.gri-foto-modal__titulo { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.gri-foto-modal__texto { margin: 0; font-size: .9375rem; color: var(--gri-c-tinta-suave); }
.gri-foto-modal__texto.is-error { color: var(--gri-c-rojo); font-weight: 600; }
.gri-foto-modal__visor { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 1rem; background: var(--gri-c-gris); }
.gri-foto-modal__visor video,
.gri-foto-modal__visor canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.gri-foto-modal__visor video { transform: scaleX(-1); }
.gri-foto-modal__guia {
	position: absolute;
	inset: 12%;
	border: 1px solid var(--gri-c-blanco);
	border-radius: 50%;
	box-shadow: 0 0 0 100vmax var(--gri-c-borde-campo);
	pointer-events: none;
}
.gri-foto-modal__visor canvas:not([hidden]) ~ .gri-foto-modal__guia { display: none; }
.gri-foto-modal__boton:disabled { opacity: .5; cursor: progress; }
.gri-foto-modal__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.gri-foto-modal__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: .625rem 1.25rem;
	border: 1px solid var(--gri-c-naranja);
	border-radius: 999px;
	background: var(--gri-c-naranja);
	color: var(--gri-c-blanco);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
}
.gri-foto-modal__boton:hover { background: var(--gri-c-naranja-hover); border-color: var(--gri-c-naranja-hover); }
.gri-foto-modal__boton--suave { background: var(--gri-c-blanco); border-color: var(--gri-c-borde-campo); color: var(--gri-c-navy); }
.gri-foto-modal__boton--suave:hover { background: var(--gri-c-gris); border-color: var(--gri-c-navy); }
.gri-foto-modal__cerrar {
	margin-left: auto;
	padding: .5rem .25rem;
	border: 0;
	background: none;
	color: var(--gri-c-navy);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.gri-foto-modal__boton:focus-visible,
.gri-foto-modal__cerrar:focus-visible { outline: none; box-shadow: var(--gri-c-foco); }

@media (max-width: 30rem) {
	.gri-foto { align-items: flex-start; }
	.gri-foto__boton { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.gri-combo__flecha,
	.gri-foto__boton { transition: none; }
}