/* =========================================================================
   Mastercoip 2026 — formas de pago dentro de la tarjeta de compra.

   El desplegable es el del artboard (40 px de alto, borde de 1 px, radio de
   20 px y la flecha del AGC a 21 px del borde). Lo que cuelga de él —el
   calendario de pagos y los dos avisos— no está dibujado en el diseño: se
   resuelve con la misma tipografía pequeña de la tarjeta y con el mismo aire
   de 20 px entre bloques, de modo que la tarjeta sigue leyéndose igual.

   El calendario sólo existe para los plazos —el pago único es un cobro y ya
   se lee el precio encima— y aparece sin JavaScript: `:has()` mira qué opción
   está elegida. Donde no haya `:has()` se ve siempre, que es la información
   completa en el peor de los casos.
   ========================================================================= */

.coip-pago {
	--coip-pago-borde: #29255c;
	--coip-pago-fs: 16px;
	--coip-pago-lh: 19px;

	display: block;
	margin-top: 20px;
	color: var(--coip-ink);
	font-size: var(--coip-pago-fs);
	line-height: var(--coip-pago-lh);
}

/* -------------------------------------------------------------------------
   Desplegable
   ---------------------------------------------------------------------- */

.coip-pago__campo {
	position: relative;
	color: var(--coip-pago-borde);
}

.coip-pago__select {
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding-inline: 18px 44px;
	font-family: inherit;
	font-size: var(--coip-pago-fs);
	font-weight: 300;
	line-height: var(--coip-pago-lh);
	color: var(--coip-ink);
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--coip-radius);
	appearance: none;
	cursor: pointer;
	transition:
		background-color var(--coip-dur-rapida) var(--coip-ease),
		border-color var(--coip-dur-rapida) var(--coip-ease),
		box-shadow var(--coip-dur-rapida) var(--coip-ease);
}

/* Mientras no corre assets/js/pago.js, éste es el mando de verdad y no tenía
   ninguna respuesta al ratón. Mismo gesto 2 (rellenar) que el botón propio de
   más abajo, para que el campo se comporte igual haya JavaScript o no. */
@media (hover: hover) and (pointer: fine) {
	.coip-pago__select:hover {
		background: rgba(157, 154, 255, 0.1);
		border-color: var(--coip-pago-borde);
		box-shadow: 0 0 0 3px rgba(157, 154, 255, 0.3);
	}
}

.coip-pago__flecha {
	position: absolute;
	top: 50%;
	right: 21px;
	width: 11px;
	height: 9px;
	margin-top: -4.5px;
	--coipm-ic: url("../svg/coipm-icon-select.svg");
	pointer-events: none;
	transition: transform var(--coip-dur) var(--coip-ease);
}

/* La máscara de .coipm-ic sólo se declara en la hoja de COIP Method; en las
   páginas de curso el icono tiene que valerse solo. */
.coip-pago__flecha {
	background-color: currentColor;
	-webkit-mask: var(--coipm-ic) no-repeat center / contain;
	mask: var(--coipm-ic) no-repeat center / contain;
}

/* -------------------------------------------------------------------------
   Desplegable propio

   El de arriba es el <select> del navegador, que es el que se ve mientras no
   corre assets/js/pago.js. Cuando corre, el script marca el campo como
   `--propio`, aparta el <select> —sigue ahí: es quien envía el formulario y
   quien contesta al `:has(option:checked)` de más abajo— y pone en su sitio un
   botón con la misma pinta y un panel que sí se puede vestir. La lista de un
   <select> la dibuja el sistema operativo y no admite ni un estilo.
   ---------------------------------------------------------------------- */

/* Fuera de la vista, pero dentro del formulario. */
.coip-pago__select--sordo {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* El botón calca al desplegable: mismo alto, mismo borde, mismo radio. */
.coip-pago__boton {
	display: flex;
	align-items: center;
	width: 100%;
	height: 40px;
	margin: 0;
	padding-inline: 18px 44px;
	font-family: inherit;
	font-size: var(--coip-pago-fs);
	font-weight: 300;
	line-height: var(--coip-pago-lh);
	text-align: left;
	color: var(--coip-ink);
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--coip-radius);
	cursor: pointer;
	transition:
		background-color var(--coip-dur-rapida) var(--coip-ease),
		border-color var(--coip-dur-rapida) var(--coip-ease),
		box-shadow var(--coip-dur-rapida) var(--coip-ease);
}

/* Abierto: el halo dice qué campo está desplegado. Es un estado, no un hover,
   así que va fuera del guardia y se queda mientras la lista esté abierta. */
.coip-pago__campo.is-abierto .coip-pago__boton {
	box-shadow: 0 0 0 3px rgba(157, 154, 255, 0.3);
	border-color: var(--coip-pago-borde);
}

/* Gesto 2 (rellenar): además del halo, el campo se tiñe de lila y el borde pasa
   al violeta del bloque. Sólo con el halo, el mando que decide entre pagar de
   una vez o a plazos —la decisión de dinero de la tarjeta— casi no cambiaba al
   apuntarlo, y encima tardaba 0,3 s en hacerlo. Ni se mueve ni cambia de
   tamaño: es un campo de formulario dentro de una tarjeta apretada. */
.coip-pago__boton:focus-visible {
	outline: 2px solid var(--coip-pago-borde);
	outline-offset: 2px;
	background: rgba(157, 154, 255, 0.1);
	border-color: var(--coip-pago-borde);
}

@media (hover: hover) and (pointer: fine) {
	.coip-pago__boton:hover {
		background: rgba(157, 154, 255, 0.1);
		box-shadow: 0 0 0 3px rgba(157, 154, 255, 0.3);
		border-color: var(--coip-pago-borde);
	}
}

.coip-pago__valor {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.coip-pago__campo.is-abierto .coip-pago__flecha {
	transform: rotate(180deg);
}

.coip-pago__lista {
	position: absolute;
	z-index: 20;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--coip-white);
	border: 1px solid rgba(41, 37, 92, 0.14);
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(41, 37, 92, 0.18);

	/* Se despliega desde el borde del botón, no de golpe. El «visibility» se
	   apaga al final de la animación y se enciende al principio: así el panel
	   cerrado no roba clics ni sale en el tabulador. */
	transform-origin: top center;
	transform: translateY(-6px) scale(0.98);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.18s ease,
		transform 0.18s cubic-bezier(0.2, 0.85, 0.3, 1.15),
		visibility 0s linear 0.18s;
}

/* Cuando no cabe debajo —la tarjeta de compra recorta— sale hacia arriba. */
.coip-pago__campo.is-arriba .coip-pago__lista {
	top: auto;
	bottom: calc(100% + 8px);
	transform-origin: bottom center;
	transform: translateY(6px) scale(0.98);
}

.coip-pago__campo.is-abierto .coip-pago__lista {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.18s ease,
		transform 0.18s cubic-bezier(0.2, 0.85, 0.3, 1.15),
		visibility 0s;
}

.coip-pago__lista:focus {
	outline: none; /* el foco se ve en la opción resaltada */
}

.coip-pago__opcion {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 38px;
	padding: 8px 38px 8px 14px;
	border-radius: 13px;
	font-weight: 300;
	color: var(--coip-ink);
	cursor: pointer;
	transition: background-color var(--coip-dur-rapida) var(--coip-ease), color var(--coip-dur-rapida) var(--coip-ease);
}

/* -----------------------------------------------------------------------
   Elegida y apuntada son dos cosas distintas

   Aquí se decide entre pagar de una vez o a plazos, así que confundir «la que
   tengo elegida» con «la que estoy apuntando» es confundir cuánto se va a
   cobrar. Antes sólo había un relleno lila, el de apuntar, y la elegida se
   distinguía por el peso de la letra y la marca de verificación: al pasar el
   ratón por la otra opción, la única fila con fondo era la que NO estaba
   elegida.

   Ahora son dos señales que no se pisan:
     · Elegida  fondo lila muy tenue, siempre puesto, con la marca y el peso
                de letra. Es un estado: no se va cuando el ratón se marcha.
     · Apuntada relleno lila claramente más fuerte y la letra en violeta. Es
                un gesto 2 (rellenar) y sigue al puntero o al teclado.

   No lleva `:hover` de CSS a propósito: `.is-activa` la pone assets/js/pago.js
   con el ratón y con el teclado —así el resalte del teclado es el mismo, sin
   duplicar reglas— y se borra al cerrar la lista, con lo que en móvil no se
   queda nada pegado.
   -------------------------------------------------------------------- */

.coip-pago__opcion[aria-selected="true"] {
	font-weight: 500;
	background: rgba(157, 154, 255, 0.13);
}

.coip-pago__opcion.is-activa {
	background: rgba(157, 154, 255, 0.32);
	color: var(--coip-pago-borde);
}

/* Marca de la opción elegida: los dos lados de una caja girada 45°. */
.coip-pago__opcion[aria-selected="true"]::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 10px;
	height: 5.5px;
	margin-top: -4px;
	border-left: 2px solid var(--coip-pago-borde);
	border-bottom: 2px solid var(--coip-pago-borde);
	border-radius: 1px;
	transform: rotate(-45deg);
}

/* Se apagan las dos cosas que se mueven: el panel que se despliega y la flecha
   que gira. El resalte de las opciones ya no está en la lista: es sólo un
   cambio de color, que es justo lo que el movimiento reducido deja pasar. */
@media (prefers-reduced-motion: reduce) {
	.coip-pago__lista,
	.coip-pago__flecha {
		transition-duration: 0.01ms;
	}
}

/* -------------------------------------------------------------------------
   Calendario de pagos
   ---------------------------------------------------------------------- */

.coip-pago__detalle {
	margin-top: 15px;
}

.coip-pago__cuotas {
	margin: 0;
	padding: 0;
	list-style: none;
}

.coip-pago__cuota,
.coip-pago__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 7px 0;
	font-weight: 300;
}

.coip-pago__cuota + .coip-pago__cuota {
	border-top: 1px solid rgba(41, 37, 92, 0.15);
}

.coip-pago__importe {
	font-weight: 500;
	white-space: nowrap;
}

.coip-pago__total {
	margin-top: 2px;
	padding-top: 9px;
	border-top: 1px solid var(--coip-pago-borde);
	font-weight: 500;
}

/* -------------------------------------------------------------------------
   Avisos
   ---------------------------------------------------------------------- */

.coip-pago__aviso {
	margin-top: 15px;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 300;
	color: var(--coip-charcoal);
}

.coip-pago__aviso--plazos {
	margin-top: 8px;
	font-weight: 500;
}

/* -------------------------------------------------------------------------
   Qué se enseña de cada modalidad

   Con pago único basta con el aviso de arriba: el segundo sólo habla de los
   plazos y estorbaría a quien no los ha elegido.
   ---------------------------------------------------------------------- */

.coip-pago__detalle,
.coip-pago__aviso--plazos {
	display: none;
}

.coip-pago:has(option[value="payment-plans"]:checked) [data-coip-pago-detalle="payment-plans"],
.coip-pago:has(option[value="payment-plans"]:checked) .coip-pago__aviso--plazos {
	display: block;
}

@supports not selector(:has(*)) {
	.coip-pago__detalle,
	.coip-pago__aviso--plazos {
		display: block;
	}
}

/* -------------------------------------------------------------------------
   Botón

   La tarjeta separa el botón del bloque anterior con 30 px en COIP Method y
   con 25 px en las páginas de curso; al meterlo dentro del formulario hay que
   repetir ese aire aquí, porque las reglas de la tarjeta miran a sus hijos
   directos.
   ---------------------------------------------------------------------- */

.coip-pago .coipm-cta {
	margin-top: 25px;
}

.coip-pago .coip-cta {
	margin-top: 25px;
}

/* -------------------------------------------------------------------------
   Dentro de la hoja de la barra de compra de móvil la tarjeta se repite; el
   bloque no necesita cambiar, sólo dejar sitio al pulgar.
   ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.coip-pago__aviso {
		font-size: 15px;
	}
}