/**
 * "Mi convenio" — solo lo propio de este plugin.
 *
 * El resto del diseño lo aportan las clases wmc-* del plugin de Mi Cuenta, que
 * ya están cargadas en esta pantalla: duplicarlas aquí haría que el día que se
 * retoque aquel diseño, esta pestaña se quedara descolgada. Por eso todo lo de
 * abajo se apoya en SUS tokens (--ink, --line, --wash, --radius…), con un valor
 * de reserva por si el CSS de Mi Cuenta no estuviera presente.
 *
 * ÍNDICE
 *   0. Ritmo y orden de la pantalla  4. Bloque de campos del método
 *   0.bis Selector de institución    5. Envío y estados
 *   1. Formulario y campos           6. Carrito y checkout
 *   2. Ficha de la institución
 *   3. Elección de método
 */

/* ============ 0. RITMO Y ORDEN DE LA PANTALLA ============
 *
 * Un único contenedor con 'gap' como ÚNICO separador entre bloques. Antes
 * cada bloque llevaba su propio margen suelto (wmc-mb16, 16px) y el
 * formulario no llevaba ninguno: por eso quedaba pegado a las dos tarjetas
 * de arriba, sin aire que dijera dónde acaba una sección y empieza otra.
 * Es el criterio que mi-cuenta.css ya documenta en .wmc-auth ("que el
 * único espaciador sea el gap, igual que con todo lo demás").
 *
 * El aire entre bloques (32px) es mayor que el que hay dentro de cada
 * tarjeta (su padding, --sp5 = 24px). Ese contraste es el que hace que
 * cada tarjeta se lea como una unidad y no como una lista continua; con
 * los 16px de antes pasaba justo lo contrario.
 */

.wconv-pantalla {
	display: flex;
	flex-direction: column;
	gap: var(--sp6, 32px);
}

/* ============ 0.bis SELECTOR DE INSTITUCIÓN (selectWoo) ============
 *
 * cuenta.js monta selectWoo sobre <select id="wconv-select-convenio"> —es
 * el select2 que WooCommerce ya carga solo en toda /perfil/, el mismo que
 * mi-cuenta.css deja con la cara de la marca en las direcciones de "Mi
 * perfil". La caja cerrada usa el texto plano por defecto (ver el porqué
 * en cuenta.js); lo único que se toca aquí es la LISTA desplegada: nombre
 * en negrita + público debajo —mismo patrón que ya usan
 * .wmc-resumen-nombre/.wmc-resumen-publico en la ficha de arriba— y el
 * resaltado de fábrica de selectWoo (azul), cambiado por el mismo gris
 * (--wash) que usa el resto de la pantalla.
 *
 * Todo bajo .wconv-select2-dropdown (nombre que cuenta.js pasa como
 * dropdownCssClass) para no tocar el select2 de las direcciones, que vive
 * en otra pantalla. Si selectWoo no llegara a cargar, el <select> nativo
 * de la sección 1 de más abajo sigue ahí, visible y usable con su propio
 * estilo.
 */

.wconv-opcion-nombre {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink, #0A0A0A);
}

.wconv-opcion-publico {
	display: block;
	margin-top: 1px;
	font-size: 12.5px;
	color: var(--muted, #6F6F6C);
}

.wconv-opcion-publico:empty {
	display: none;
}

.wconv-select2-dropdown .select2-results__option {
	padding: 10px 11px;
}

/* select2 trae azul de fábrica para resaltado/seleccionado; se reemplaza
   por el mismo gris de fondo (--wash) que usa el resto de la pantalla. */
.wconv-select2-dropdown .select2-results__option--highlighted[aria-selected],
.wconv-select2-dropdown .select2-results__option[aria-selected="true"] {
	background: var(--wash, #F5F5F3) !important;
	color: inherit !important;
}

/* ============ 1. FORMULARIO Y CAMPOS ============ */

.wconv-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 520px;
}

.wconv-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wconv-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--ink, #0A0A0A);
}

.wconv-opcional {
	font-weight: 400;
	color: var(--faint, #9C9C99);
}

.wconv-input,
.wconv-select {
	width: 100%;
	padding: 12px 13px;
	border: 1px solid var(--line-2, #DCDCD9);
	border-radius: var(--radius-sm, 11px);
	font: inherit;
	font-size: 15px; /* 15px o más: por debajo de 16, iOS hace zoom al enfocar. */
	color: var(--ink, #0A0A0A);
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.wconv-input::placeholder {
	color: var(--faint, #9C9C99);
}

.wconv-select {
	/* Chevron propio: el nativo cambia de forma en cada sistema operativo y
	   rompe la coherencia con el resto de Mi Cuenta. */
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6F6C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 17px;
	cursor: pointer;
}

.wconv-input:hover,
.wconv-select:hover {
	border-color: var(--line-strong, #C6C6C2);
}

.wconv-input:focus,
.wconv-select:focus,
.wconv-file:focus {
	outline: none;
	border-color: var(--ink, #0A0A0A);
	box-shadow: 0 0 0 3px rgba(10, 10, 10, .08);
}

/* Solo tras intentar enviar: marcar en rojo mientras la persona todavía
   escribe es la forma más rápida de que se sienta regañada. */
.wconv-input:user-invalid {
	border-color: var(--danger, #B3392F);
}

.wconv-ayuda {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--muted, #6F6F6C);
}

.wconv-espera {
	margin: 0;
	padding: 14px 16px;
	border: 1px dashed var(--line-2, #DCDCD9);
	border-radius: var(--radius-sm, 11px);
	background: var(--wash, #F5F5F3);
	font-size: 13px;
	color: var(--muted, #6F6F6C);
}

/* ============ 2. FICHA DE LA INSTITUCIÓN ============ */

/* Es un <fieldset>: se le quita todo el cromado que trae por defecto y se
   queda solo con el comportamiento útil (disabled desactiva lo de dentro). */
.wconv-ficha,
.wconv-campos {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.wconv-ficha {
	display: flex;
	flex-direction: column;
	gap: 18px;
	animation: wconvEntrada .28s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes wconvEntrada {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.wconv-resumen {
	position: relative;
	padding: 16px 18px;
	border: 1px solid var(--line, #E7E7E5);
	border-radius: var(--radius, 16px);
	background: var(--wash, #F5F5F3);
	overflow: hidden;
}

/* Filo con el color del convenio: identifica la institución de un vistazo
   sin teñir toda la tarjeta, que sería ilegible con colores oscuros. */
.wconv-resumen::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--wconv-color, #1F4E79);
}

.wconv-resumen-head {
	display: flex;
	align-items: center;
	gap: 13px;
}

.wconv-logo-wrap {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--line, #E7E7E5);
	overflow: hidden;
}

.wconv-logo-wrap img,
.wconv-logo-wrap .wconv-logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.wconv-monograma {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--wconv-color, #1F4E79);
	background: color-mix(in srgb, var(--wconv-color, #1F4E79) 10%, #fff);
	border-color: transparent;
}

.wconv-resumen-txt { min-width: 0; }

.wconv-resumen-nombre {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink, #0A0A0A);
}

.wconv-resumen-publico {
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--muted, #6F6F6C);
}

.wconv-beneficios {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.wconv-beneficios li {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--radius-pill, 100px);
	background: #fff;
	border: 1px solid var(--line, #E7E7E5);
}

.wconv-beneficio-pct {
	font-size: 14px;
	font-weight: 700;
	color: var(--wconv-color, #1F4E79);
	white-space: nowrap;
}

.wconv-beneficio-cat {
	font-size: 12px;
	color: var(--muted, #6F6F6C);
}

.wconv-resumen-nota {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--muted, #6F6F6C);
}

/* ============ 3. ELECCIÓN DE MÉTODO ============ */

.wconv-metodos {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wconv-metodos-lista {
	display: grid;
	gap: 8px;
}

.wconv-metodo {
	display: block;
	cursor: pointer;
}

/* El radio nativo se oculta pero sigue existiendo: el teclado y los lectores
   de pantalla lo siguen usando, y el foco se pinta sobre la tarjeta. */
.wconv-metodo input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wconv-metodo-box {
	display: block;
	padding: 12px 14px 12px 40px;
	position: relative;
	border: 1px solid var(--line-2, #DCDCD9);
	border-radius: var(--radius-sm, 11px);
	background: #fff;
	transition: border-color .15s ease, background .15s ease;
}

.wconv-metodo-box::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 15px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1.5px solid var(--line-strong, #C6C6C2);
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.wconv-metodo:hover .wconv-metodo-box {
	border-color: var(--line-strong, #C6C6C2);
}

.wconv-metodo input:checked + .wconv-metodo-box {
	border-color: var(--ink, #0A0A0A);
	background: var(--wash, #F5F5F3);
}

.wconv-metodo input:checked + .wconv-metodo-box::before {
	border-color: var(--ink, #0A0A0A);
	box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 10px var(--ink, #0A0A0A);
}

.wconv-metodo input:focus-visible + .wconv-metodo-box {
	outline: 2px solid var(--ink, #0A0A0A);
	outline-offset: 2px;
}

.wconv-metodo-t {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink, #0A0A0A);
}

.wconv-metodo-d {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--muted, #6F6F6C);
}

/* ============ 4. BLOQUE DE CAMPOS DEL MÉTODO ============ */

.wconv-campos {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wconv-instrucciones {
	margin: 0;
	padding: 11px 13px;
	border-radius: var(--radius-sm, 11px);
	background: color-mix(in srgb, var(--wconv-color, #1F4E79) 7%, #fff);
	border: 1px solid color-mix(in srgb, var(--wconv-color, #1F4E79) 16%, #fff);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-2, #171716);
}

.wconv-instrucciones:empty { display: none; }

/* Reserva para navegadores sin color-mix (Safari < 16.2): sin esto, el bloque
   de instrucciones y el monograma se quedarían sin fondo ni borde. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
	.wconv-instrucciones {
		background: rgba(31, 78, 121, .07);
		border-color: rgba(31, 78, 121, .18);
	}
	.wconv-monograma {
		background: rgba(31, 78, 121, .1);
	}
}

/* El selector de archivo nativo es distinto en cada navegador y en ninguno se
   parece al resto del formulario. Se le da la misma caja que a un input. */
.wconv-file {
	width: 100%;
	padding: 10px 12px;
	border: 1px dashed var(--line-strong, #C6C6C2);
	border-radius: var(--radius-sm, 11px);
	background: #fff;
	font: inherit;
	font-size: 13.5px;
	color: var(--muted, #6F6F6C);
	cursor: pointer;
}

.wconv-file::file-selector-button {
	margin-right: 12px;
	padding: 7px 13px;
	border: 0;
	border-radius: var(--radius-pill, 100px);
	background: var(--ink, #0A0A0A);
	color: #fff;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.wconv-file:hover {
	border-color: var(--ink, #0A0A0A);
}

/* ============ 5. ENVÍO Y ESTADOS ============ */

.wconv-enviar {
	align-self: flex-start;
}

.wconv-enviar[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

.wconv-enviar.is-enviando::after {
	content: "…";
}

.wconv-legal {
	margin: 0;
	line-height: 1.45;
}

/* Estados del beneficiario (en proceso / no activo) y aviso interno. */
.wconv-estado {
	border-left: 3px solid var(--line-strong, #C6C6C2);
}

.wconv-estado--espera { border-left-color: var(--warn, #8A6100); }
.wconv-estado--alto   { border-left-color: var(--danger, #B3392F); }

.wconv-aviso-admin {
	border: 1px dashed var(--line-strong, #C6C6C2);
	background: var(--wash, #F5F5F3);
}

.wconv-aviso-lista {
	margin: 0 0 8px;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--muted, #6F6F6C);
}

/* ============ 6. CARRITO Y CHECKOUT ============ */

.wconv-fila-descuento th,
.wconv-fila-descuento td {
	color: #1a7f37;
	font-weight: 600;
}

.wconv-precio {
	text-decoration: none;
	font-weight: 700;
}

.wconv-pct {
	margin-left: 4px;
	color: #1a7f37;
	font-weight: 700;
	white-space: nowrap;
}

.wconv-resumen-pedido {
	margin-top: 12px;
	font-weight: 600;
	color: #1a7f37;
}

/* ============ RESPONSIVE Y MOVIMIENTO ============ */

/* 900px es el ancho en el que mi-cuenta.css ya colapsa .wmc-grid2 a una
 * columna y convierte el menú lateral en pestañas: a partir de aquí todo
 * es una sola columna, así que es el punto donde cambia el ORDEN.
 *
 * Apilado, las dos tarjetas explicativas empujan el formulario fuera de
 * pantalla y obligan a desplazarse para hacer lo único a lo que se vino:
 * elegir la institución. En escritorio no pasa porque ese texto va al
 * lado y se abarca de un vistazo. Así que en móvil la acción sube y la
 * explicación queda debajo, de consulta.
 *
 * Se hace con 'order' y no reordenando el HTML a propósito: el documento
 * conserva su orden natural para lectores de pantalla que siguen el DOM,
 * para la impresión y para el caso en que el CSS no cargue. */
@media (max-width: 900px) {
	.wconv-pantalla { gap: var(--sp5, 24px); }

	/* El comodín deja cualquier bloque que se añada más adelante al final,
	   nunca por delante del estado del convenio. */
	.wconv-pantalla > *                  { order: 5; }
	.wconv-pantalla > .wmc-convenio-card,
	.wconv-pantalla > .wconv-estado      { order: 1; }
	.wconv-pantalla > .wconv-validar,
	.wconv-pantalla > .wmc-empty         { order: 2; }
	.wconv-pantalla > .wmc-grid2         { order: 3; }
	.wconv-pantalla > .wconv-aviso-admin { order: 4; }

	/* El formulario ya quedó ENCIMA de esta tarjeta, así que su atajo
	   llevaría hacia arriba, a algo que la persona acaba de pasar: sobra.
	   El texto de la tarjeta, que es lo que informa, se queda. */
	.wconv-pantalla .wconv-ir-validar { display: none; }
}

@media (max-width: 640px) {
	.wconv-form { max-width: none; }
	.wconv-enviar { align-self: stretch; text-align: center; }
	.wconv-resumen { padding: 14px 15px; }
	.wconv-beneficios { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.wconv-ficha { animation: none; }
	.wconv-input,
	.wconv-select,
	.wconv-metodo-box,
	.wconv-metodo-box::before { transition: none; }
}