/**
 * "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       7. Retirar convenio
 *   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;
	/* Texto sobre un fondo casi blanco (10% del color): con un color oscuro
	   (el azul por defecto) da igual, pero un amarillo claro de logo real
	   como texto sería casi invisible sobre su propia versión pastel. Por
	   eso el texto usa --wconv-color-legible (ya oscurecido si hace falta,
	   ver wconv_color_legible en funciones.php) y no el color crudo. */
	color: var(--wconv-color-legible, 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-legible, 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; }

	/* ============ FICHA DE INSTITUCIÓN: menos cajas, más ancho ============
	 * Reportado en vivo con captura: en tablet/móvil se contaban hasta 3-4
	 * contenedores metidos uno dentro de otro —la tarjeta gris de "Valida tu
	 * convenio" (.wmc-card), adentro la ficha de la institución con SU
	 * PROPIO fondo y borde (.wconv-resumen), y adentro cada beneficio en su
	 * propia píldora blanca con borde (.wconv-beneficios li)— y el resultado
	 * se veía comprimido: cada caja le resta ancho útil a la siguiente antes
	 * de llegar al texto real.
	 *
	 * En escritorio esas cajas sí caben con aire de sobra (se deja intacto:
	 * "el de desktop ya quedó"). En pantallas angostas se aplana a DOS
	 * niveles en vez de tres: la ficha pierde su fondo/borde propio y queda
	 * como una franja con el acento de color de siempre (mismo ::before),
	 * fundida en la superficie de la tarjeta que la contiene; y los
	 * beneficios dejan de ser píldoras con borde para pasar a ser
	 * número + etiqueta en limpio, en grilla de 2 columnas — el mismo
	 * lenguaje visual que ya usa la tarjeta "Convenio activo" cuando el
	 * beneficio YA está validado (.wmc-pct/.wmc-cat), así la ficha de
	 * "antes de validar" y la de "ya validado" comunican lo mismo en vez de
	 * verse como dos componentes distintos. */
	.wconv-resumen {
		padding: 2px 0 2px 16px;
		border: 0;
		background: transparent;
		border-radius: 0;
	}
	.wconv-logo-wrap { width: 42px; height: 42px; }

	.wconv-beneficios {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px 12px;
		margin: 18px 0 0;
	}
	.wconv-beneficios li {
		display: block;
		padding: 0;
		border: 0;
		background: transparent;
		border-radius: 0;
	}
	.wconv-beneficio-pct {
		display: block;
		font-family: var(--wmc-head, inherit);
		font-weight: var(--w-wt-heavy, 800);
		text-transform: uppercase;
		font-size: 20px;
		line-height: 1;
	}
	.wconv-beneficio-cat {
		display: block;
		margin-top: 4px;
		font-size: 10.5px;
		font-weight: var(--w-wt-bold, 700);
		letter-spacing: .05em;
		text-transform: uppercase;
	}

	/* ============ UN NIVEL MENOS: las tarjetas de esta pantalla ============
	 * Lo de arriba aplanó la ficha de la institución; esto aplana el nivel
	 * que la envuelve. Contando cajas reales: .wmc-content (el marco blanco
	 * de Mi Cuenta, compartido por los 4 módulos — ese se queda igual, es lo
	 * que da consistencia entre Inicio/Pedidos/Mi convenio/Mi perfil) →
	 * .wconv-validar / .wconv-estado / cada .wmc-card de .wmc-grid2, todas
	 * con SU PROPIO fondo, borde y padding → la ficha de dentro. Eran 3-4
	 * niveles reales de padding acumulado; quedan 2: el marco de Mi Cuenta,
	 * y el acento de color de la ficha (ya sin caja tampoco). El contenido
	 * pasa a apoyarse directo sobre el único padding real, ganando todo ese
	 * ancho de vuelta.
	 *
	 * Que quede "ordenado" y no texto suelto es cosa del propio sistema, no
	 * de una caja nueva: el mismo hairline que .wmc-sec-head ya usa en el
	 * resto de Mi Cuenta para separar encabezado de contenido marca aquí
	 * dónde termina la intro y empieza la acción — se reutiliza el patrón
	 * en vez de inventar uno. El color del borde-izquierdo de .wconv-estado
	 * (gris/ámbar/rojo, ya definido arriba) se conserva intacto: sigue
	 * siendo la única señal de estado que existe en la pantalla. */
	.wconv-pantalla > .wconv-validar,
	.wconv-pantalla > .wmc-empty {
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 0;
	}
	.wconv-validar > .wmc-p13.wmc-mb12 {
		padding-bottom: var(--sp5, 20px);
		border-bottom: 1px solid var(--line, #E7E7E5);
	}
	.wconv-pantalla > .wconv-estado {
		background: transparent;
		border-top: 0;
		border-right: 0;
		border-bottom: 0;
		border-radius: 0;
		padding: 2px 0 2px 16px;
	}
	.wconv-pantalla .wmc-grid2 {
		gap: var(--sp6, 26px);
	}
	.wconv-pantalla .wmc-grid2 > .wmc-card {
		background: transparent;
		border: 0;
		border-radius: 0;
		border-top: 1px solid var(--line, #E7E7E5);
		padding: var(--sp5, 20px) 0 0;
	}
}

@media (max-width: 640px) {
	.wconv-form { max-width: none; }
	.wconv-enviar { align-self: stretch; text-align: center; }
}

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

/* ============ 7. RETIRAR CONVENIO ============
 * Vive debajo de "Validar otro convenio", en la misma tarjeta: son las dos
 * caras de la misma pregunta ("¿ya no quieres ESTE convenio?"). .wmc-danger
 * no existía en mi-cuenta.css (ahí solo está el token --danger, usado en
 * pills/errores) — se agrega acá porque es el único botón "destructivo" de
 * toda la pantalla de Mi Cuenta. Con !important porque .wmc-ghost ya lo usa
 * para fijar su color base; sin igualar esa especificidad, este no ganaría.
 */
.wconv-form-retirar {
	margin-top: 10px;
}

.wmc-btn.wmc-danger {
	border-color: var(--danger, #B3392F) !important;
	color: var(--danger, #B3392F) !important;
}

.wmc-btn.wmc-danger:hover {
	background: var(--danger, #B3392F) !important;
	border-color: var(--danger, #B3392F) !important;
	color: #fff !important;
}