/* =========================================================================
   Mastercoip 2026 — campo «País en el que trabajas».

   Un <select> de verdad (inc/pais.php, assets/js/pais.js) vestido para que
   haga pareja con el teléfono, que va a su lado en la misma fila: la bandera
   del país elegido a la izquierda, la misma flecha y, en escritorio, la misma
   lista desplegada que el selector de prefijo (tel.css).

   La caja —alto, borde, radio, letra, color— NO se pinta aquí: la pone la
   hoja de cada página con la misma regla que a sus <input>, porque cada
   formulario tiene la suya (tinta sobre crema en los cursos, crema sobre lila
   en COIP Experts). Aquí sólo va lo que es propio de un desplegable.

   Las reglas llevan dos clases (`.coip-pais .coip-pais__caja select`) para
   ganarle al relleno de las hojas de página —`.coip-curso__campos select`,
   `.coipm-field select`…— sin depender del orden en que se encolen.
   ========================================================================= */

.coip-pais__caja {
	position: relative;
	display: block;
}

.coip-pais .coip-pais__caja select {
	display: block;
	width: 100%;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;

	/*
	 * A la izquierda, el aire de los demás campos (20 px), para que el rótulo
	 * vacío quede alineado con «Nombre*» y «E-mail*». A la derecha, la flecha.
	 * Medido: en la rejilla de dos columnas el campo tiene 213 px y
	 * «País en el que trabajas*» ocupa 155; con 20 + 34 de relleno caben con
	 * 4 px de sobra. Si se tocan, medir: el asterisco no puede caer en la
	 * elipsis.
	 */
	padding-left: 20px;
	padding-right: 34px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
}

/* Con un país elegido entra su bandera, en el mismo sitio que la del teléfono
   (11 px del borde), y el nombre se aparta. */
.coip-pais.is-elegido .coip-pais__caja select {
	padding-left: 42px;
}

.coip-pais__bandera {
	position: absolute;
	top: 50%;
	left: 11px;
	display: none;
	margin: 0;
	transform: translateY(-50%);
	pointer-events: none;
}

.coip-pais.is-elegido .coip-pais__bandera {
	display: block;
}

/* La flecha del teléfono: un cuadrado girado 45° al que sólo se le ven dos
   lados (tel.css, `.iti__arrow`). En currentColor, así vale igual en tinta
   que en crema. */
.coip-pais__caja::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	pointer-events: none;
	transition:
		transform var(--coip-dur-rapida) var(--coip-ease),
		margin-top var(--coip-dur-rapida) var(--coip-ease);
}

/* La lista del sistema de Firefox y del Chrome antiguo pinta sus filas con los
   colores del campo: en COIP Experts salían en crema sobre blanco. */
.coip-pais select option {
	color: var(--coip-ink);
	background: var(--coip-white);
}

/* -------------------------------------------------------------------------
   Lista desplegada, en escritorio

   Con `appearance: base-select` (Chrome y Edge desde la 135) la lista la
   dibuja el propio <select> y se puede vestir: aquí se calca el panel del
   selector de prefijo del teléfono —borde, sombra, filas con bandera, resalte
   lila— para que los dos desplegables de la fila sean el mismo.

   Sólo con ratón. En el móvil la lista del sistema (la rueda de iOS, la hoja
   de Android) es mejor que cualquier panel dentro de la página, y los
   navegadores que no conocen `base-select` se quedan con la suya: el campo
   cerrado se ve igual en todos.

   El panel vive en la capa superior del documento, así que ninguna tarjeta
   transformada por las animaciones de entrada lo puede recortar (el problema
   que tuvo el del teléfono; ver tel.js, `dropdownParent`).
   ---------------------------------------------------------------------- */

@supports (appearance: base-select) {
	@media (hover: hover) and (pointer: fine) {
		.coip-pais .coip-pais__caja select,
		.coip-pais .coip-pais__caja select::picker(select) {
			appearance: base-select;
		}

		/* En este modo el navegador le pone al campo 4 px de relleno arriba y
		   abajo y deja el texto pegado arriba; centrado, queda a la altura del
		   «Phone*» de al lado. */
		.coip-pais .coip-pais__caja select {
			display: flex;
			align-items: center;
			padding-block: 0;
		}

		/* La flecha es la de arriba, que además gira al abrir. */
		.coip-pais .coip-pais__caja select::picker-icon {
			display: none;
		}

		.coip-pais__caja:has(select:open)::after {
			margin-top: -1px;
			transform: rotate(225deg);
		}

		.coip-pais .coip-pais__caja select::picker(select) {
			/* Tan ancho como el campo y, si un nombre no cabe, más: una fila
			   partida en dos descuadra la lista (tel.js, `matchDropdownWidth`). */
			min-width: anchor-size(width);

			/*
			 * Ocho filas exactas. Cada país mide 37 px y lleva 2 px de margen
			 * (que entre filas se funden en uno), y el panel 8 de relleno y 1
			 * de borde por lado: 8 × 39 + 20. Con un alto cualquiera la última
			 * fila salía partida y el panel parecía cortado (lo mismo que
			 * corrige tel.js, `encajarLista`, en el del teléfono).
			 */
			box-sizing: border-box;
			max-height: calc(8 * 39px + 20px);
			margin-block: 6px;
			padding: 8px;
			overflow-y: auto;
			background: var(--coip-white);
			border: 1px solid var(--coip-charcoal);
			border-radius: var(--coip-radius-sm);
			box-shadow: 0 16px 32px rgba(41, 37, 92, 0.16);
			font-family: "RNS Sanz", "Helvetica Neue", Arial, sans-serif;
			font-size: var(--coip-fs-ui);
			line-height: var(--coip-lh-ui);
			color: var(--coip-ink);
			scrollbar-width: thin;
			scrollbar-color: rgba(41, 43, 50, 0.25) transparent;

			/* Entra desde el borde del campo, como el selector de pago. */
			opacity: 0;
			transform: translateY(-4px);
			transition:
				opacity 0.16s ease,
				transform 0.16s cubic-bezier(0.2, 0.85, 0.3, 1.15),
				overlay 0.16s allow-discrete,
				display 0.16s allow-discrete;
		}

		.coip-pais .coip-pais__caja select:open::picker(select) {
			opacity: 1;
			transform: none;
		}

		@starting-style {
			.coip-pais .coip-pais__caja select:open::picker(select) {
				opacity: 0;
				transform: translateY(-4px);
			}
		}

		/* `:not([hidden])`: la opción vacía («País en el que trabajas*») va
		   oculta en la lista, y un `display` aquí le ganaría al atributo. */
		.coip-pais .coip-pais__caja select option:not([hidden]) {
			display: flex;
			align-items: center;
			gap: 10px;
			margin: 2px 0;
			padding: 9px 12px 9px 10px;
			white-space: nowrap;
			border-radius: var(--coip-radius-sm);
			cursor: pointer;
			transition:
				background-color var(--coip-dur-rapida) var(--coip-ease),
				color var(--coip-dur-rapida) var(--coip-ease);
		}

		/* La bandera de la fila: la de intl-tel-input trae su propio margen. */
		.coip-pais .coip-pais__op-bandera {
			flex: none;
			margin: 0;
		}

		/* La elegida lleva la marca al final de la fila y la letra un punto
		   más firme; es un estado y no se va al mover el ratón. */
		.coip-pais .coip-pais__caja select option:checked {
			font-weight: 500;
		}

		.coip-pais .coip-pais__caja select option::checkmark {
			order: 1;
			margin-inline-start: auto;
			padding-inline-start: 12px;
			font-size: 0.85em;
		}

		/* Apuntada, con el ratón o con el teclado: el lila del teléfono. */
		.coip-pais .coip-pais__caja select option:hover,
		.coip-pais .coip-pais__caja select option:focus-visible {
			outline: none;
			background: var(--coip-lilac);
			color: var(--coip-white);
		}

		/* Va aquí dentro y no abajo: un navegador que no conoce ::picker
		   tira la regla entera, y con ella la de la flecha. */
		@media (prefers-reduced-motion: reduce) {
			.coip-pais .coip-pais__caja select::picker(select) {
				transition-duration: 0.01ms;
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.coip-pais__caja::after {
		transition-duration: 0.01ms;
	}
}