/* =============================================================================
 * IFHA Pagos — sistema visual del centro de pagos
 * -----------------------------------------------------------------------------
 * POR QUE EXISTE: el prototipo aprobado (design_handoff_centro_pagos_ifha/
 * "Centro de pagos IFHA.dc.html") no usa una sola clase: cada elemento lleva sus
 * estilos en linea. Ese archivo es la verdad visual, pero no se puede publicar
 * asi en WordPress, donde el marcado lo arma PHP y el CSS tiene que convivir con
 * Astra Pro, Elementor y UAE. Este archivo traduce ese prototipo, valor por
 * valor, a un sistema de clases con prefijo `.ifha-p-`. Si el prototipo dice
 * `padding:18px 20px`, aca dice `18px 20px`: no se redondea a rem ni se
 * "mejora" ninguna medida. La lista completa de clases, con el marcado esperado
 * de cada una, esta en docs/CONTRATO-diseno.md — los demas agentes escriben el
 * HTML leyendo ese documento, no este archivo.
 *
 * CUATRO DECISIONES QUE NO HAY QUE DESHACER:
 *
 * 1. Los tokens se declaran en `.ifha-p`, no en `:root`. Todo el marcado del
 *    plugin cuelga de un contenedor `.ifha-p`, asi que las variables llegan a
 *    donde hacen falta sin ensuciar el ambito global del sitio (que ya define
 *    --blue-600, --line-300, etc. desde el sistema de diseño) ni exponerse a
 *    que UCSS se lleve puesto un bloque `:root` suelto. Los valores salen de
 *    _ds/.../tokens/*.css, copiados a mano con prefijo --ifha-.
 *
 * 2. Cada regla arranca con `.ifha-p` (o con `body.ifha-pagos`). Astra estila
 *    `button:hover` con especificidad (0,1,1) y le gana a una clase sola: el
 *    texto del boton desaparece al pasar el mouse. Con `.ifha-p .ifha-p-btn`
 *    quedamos en (0,2,1) y no hace falta un solo `!important` para los
 *    componentes. Los `!important` que hay abajo son unicamente para tapar
 *    estilos en linea de terceros (el boton flotante de WhatsApp, el footer) o
 *    del propio parcial de correo, que viaja con estilos en linea.
 *
 * 3. Los estados se leen del atributo ARIA cuando existe
 *    (`[aria-checked="true"]`, `[aria-current="step"]`, `[aria-invalid="true"]`)
 *    y ademas de una clase `.is-*`. Asi el marcado accesible y el marcado
 *    server-side pintan igual sin que nadie tenga que acordarse de poner las
 *    dos cosas. Las reglas con `:has()` van SIEMPRE en un bloque aparte: un
 *    selector que el navegador no entiende invalida toda la lista de selectores
 *    donde aparece, y se llevaria puesto el estado seleccionado en navegadores
 *    viejos.
 *
 * 4. Un solo punto de quiebre propio del prototipo: 900 px, donde aparece el
 *    panel lateral "Tu pago" y desaparece la fila de total de celular. Los
 *    otros tres (480 / 600 / 900) existen para el marcado de tablas que se
 *    comparte con los correos, que no puede usar flexbox.
 *
 * Mobile-first, ancho maximo 960 px, objetivos tactiles >= 44 px, foco visible
 * de 2 px con offset 2 px, transiciones de 120-180 ms e importes con
 * tabular-nums. Probado a 390 / 768 / 900 / 1280 / 1366 / 1440 px.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Tokens portados del sistema de diseño
 * -------------------------------------------------------------------------- */

.ifha-p {
	/* Azules institucionales */
	--ifha-blue-900: #14345F;
	--ifha-blue-800: #1B4682;
	--ifha-blue-600: #245CA9;
	--ifha-blue-100: #CFDDF2;
	--ifha-blue-50: #F0F5FC;

	/* Verdes (acento y CTA) */
	--ifha-green-900: #2A3D14;
	--ifha-green-800: #476E23;
	--ifha-green-700: #5B8C2D;
	--ifha-green-600: #6EA837;
	--ifha-green-500: #92D050;
	--ifha-green-50: #EBF5DD;

	/* Neutros */
	--ifha-ink: #2A2E34;
	--ifha-gray-600: #5A6470;
	--ifha-gray-400: #9AA7B2;
	--ifha-line-300: #D4D9DE;
	--ifha-line-200: #E2E7EC;
	--ifha-surface-100: #F1F4F7;
	--ifha-surface-50: #F5F9FF;
	--ifha-white: #FFFFFF;

	/* Semanticos */
	--ifha-red-500: #D64C4C;
	--ifha-amber-500: #E09B2B;
	--ifha-teal-500: #1FBDA0;

	/* Tipografia: Roboto ya la carga el sitio; el stack de respaldo es el del
	   sistema operativo para que nada dependa de una webfont que puede fallar.
	   Este archivo NO carga webfonts. */
	--ifha-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--ifha-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Espaciado */
	--ifha-space-1: 4px;
	--ifha-space-2: 8px;
	--ifha-space-3: 12px;
	--ifha-space-4: 16px;
	--ifha-space-5: 24px;
	--ifha-space-6: 32px;
	--ifha-space-7: 48px;

	/* Radios */
	--ifha-radius-sm: 8px;
	--ifha-radius-md: 14px;
	--ifha-radius-pill: 999px;

	/* Movimiento: colores y estados en 120 ms, bloques revelados en 180 ms.
	   Sin rebotes (el material de origen no tiene animacion). */
	--ifha-dur-fast: 120ms;
	--ifha-dur-base: 180ms;
	--ifha-ease-out: cubic-bezier(.2, .8, .3, 1);
	--ifha-transition: color var(--ifha-dur-fast) var(--ifha-ease-out), background-color var(--ifha-dur-fast) var(--ifha-ease-out), border-color var(--ifha-dur-fast) var(--ifha-ease-out);

	/* Medidas */
	--ifha-max: 960px;
	--ifha-aside: 300px;
	--ifha-hit: 44px;
	--ifha-focus: #6EA837;
}

/* -----------------------------------------------------------------------------
 * 2. Contenedor raiz
 * -------------------------------------------------------------------------- */

.ifha-p {
	box-sizing: border-box;
	max-width: var(--ifha-max);
	margin: 0 auto;
	padding: var(--ifha-space-5) var(--ifha-space-4) var(--ifha-space-7);
	font-family: var(--ifha-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ifha-ink);
	-webkit-font-smoothing: antialiased;
}

.ifha-p *,
.ifha-p *::before,
.ifha-p *::after {
	box-sizing: border-box;
}

/* Astra reserva `display` en algunos elementos: el atributo `hidden` tiene que
   ganar siempre, porque es con lo que el JS del paso 1 muestra y esconde los
   bloques condicionales (edicion, otros pagos, alumno, factura). */
.ifha-p [hidden] {
	display: none !important;
}

/* -----------------------------------------------------------------------------
 * 3. Neutralizacion de Astra dentro del contenedor
 *
 * Astra pinta `button`, `input`, `select` y sobre todo `button:hover` con color
 * de fondo y de texto propios: sin esto, el texto del boton desaparece al pasar
 * el mouse. Se apaga todo aca y cada componente vuelve a pintar lo suyo con mas
 * especificidad (`.ifha-p .ifha-p-btn--primary:hover` = (0,3,1) le gana a
 * `.ifha-p button:hover` = (0,2,1)).
 * -------------------------------------------------------------------------- */

.ifha-p button,
.ifha-p input,
.ifha-p select,
.ifha-p textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	max-width: 100%;
}

.ifha-p button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}

.ifha-p button:hover,
.ifha-p button:focus,
.ifha-p button:active {
	background: none;
	color: inherit;
	box-shadow: none;
	text-decoration: none;
}

/* El select tiene que conservar la flecha nativa: Astra le pone
   `appearance:none` y dibuja la suya con una imagen de fondo que aca se apaga.
   Sin `appearance:auto` el campo queda sin ninguna flecha. */
.ifha-p select {
	-webkit-appearance: auto;
	appearance: auto;
	background-image: none;
	box-shadow: none;
}

.ifha-p input[type="checkbox"],
.ifha-p input[type="radio"] {
	-webkit-appearance: auto;
	appearance: auto;
	box-shadow: none;
}

.ifha-p ::-webkit-input-placeholder {
	color: var(--ifha-gray-400);
}

.ifha-p ::placeholder {
	color: var(--ifha-gray-400);
	opacity: 1;
}

/* Reset de tablas: Astra le dibuja borde a `table`, `th` y `td`, y las tablas
   de este plugin son de maquetado (tienen que verse igual en un correo, donde
   no hay hoja de estilos). Se apaga aca y cada componente pinta su propia
   linea despues, con mas especificidad. */
.ifha-p table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}

.ifha-p th,
.ifha-p td {
	border: 0;
	background: none;
}

.ifha-p a {
	color: var(--ifha-blue-600);
	text-decoration: none;
}

.ifha-p a:hover,
.ifha-p a:focus {
	color: var(--ifha-blue-800);
	text-decoration: underline;
}

/* Foco visible unico para todo lo interactivo (README seccion 5). No se le toca
   el radio: el contorno sigue la forma real del elemento (pildora o rectangulo). */
.ifha-p a:focus-visible,
.ifha-p button:focus-visible,
.ifha-p input:focus-visible,
.ifha-p select:focus-visible,
.ifha-p textarea:focus-visible,
.ifha-p [tabindex]:focus-visible {
	outline: 2px solid var(--ifha-focus);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
 * 4. Estructura de pagina
 *
 * `.ifha-p-flow` es la columna unica (pantallas de instrucciones y resultado).
 * `.ifha-p-layout` es la fila de dos columnas de los pasos 1 y 2: contenido a la
 * izquierda y panel "Tu pago" pegajoso a la derecha desde 900 px.
 *
 * OJO: `gap:20px` es el valor del prototipo y el CSS critico en linea
 * (class-templates.php::css_critico) declara EXACTAMENTE el mismo. Esta regla es
 * (0,2,0) y la del critico (0,1,0), asi que esta gana igual; pero mientras la
 * hoja viaja asincrona (UCSS) el primer pintado usa el critico, y si los dos
 * numeros no coinciden la pantalla salta. Si cambia uno, cambian los dos.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-flow,
.ifha-p .ifha-p-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ifha-p .ifha-p-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--ifha-space-5);
}

.ifha-p .ifha-p-col {
	flex: 1 1 380px;
	min-width: 0;
}

/* -----------------------------------------------------------------------------
 * 5. Tipografia
 * -------------------------------------------------------------------------- */

/* El `!important` del tamaño es obligatorio y es el unico de esta seccion: el
   parcial templates/emails/partials/instrucciones.php se comparte con el correo
   y lleva `font-size:26px` en linea (un correo mide 600 px de ancho). En la web
   el titulo va a 30 px como en el prototipo, y un estilo en linea solo se tapa
   con !important. */
.ifha-p .ifha-p-h1 {
	margin: 0 0 6px;
	font-family: var(--ifha-font);
	font-size: 30px !important;
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: -.01em;
	color: var(--ifha-ink);
	text-wrap: pretty;
}

.ifha-p .ifha-p-h2 {
	margin: 0;
	font-family: var(--ifha-font);
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ifha-ink);
}

.ifha-p .ifha-p-lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

/* Kicker chico: etiquetas de campo y rotulos de tarjeta. 12 px, 700,
   mayusculas, tracking .08em (token del sistema). */
.ifha-p .ifha-p-kicker,
.ifha-p .ifha-p-label {
	display: block;
	margin: 0;
	font-family: var(--ifha-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ifha-gray-600);
}

/* Kicker grande: titulo de seccion suelta ("Programa o concepto", "Medio de
   pago", "Proximos pasos", "Tu pago"). Mismo peso y tracking, 14 px. */
.ifha-p .ifha-p-kicker--lg {
	font-size: 14px;
}

/* "(opcional)" dentro de una etiqueta: vuelve a peso normal y caja baja. */
.ifha-p .ifha-p-label__opt {
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ifha-gray-400);
}

.ifha-p .ifha-p-fineprint {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ifha-gray-400);
}

/* Parrafo explicativo (notas de cotizacion, aclaracion de pago parcial). */
.ifha-p .ifha-p-nota {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

/* Los bloques que en el prototipo llevan `margin:-8px 0 0` para pegarse al
   bloque anterior sin romper el ritmo de 20 px de la columna. */
.ifha-p .ifha-p-nota--pegada,
.ifha-p .ifha-p-note--pegada {
	margin-top: -8px;
}

/* Todo importe con cifras de ancho fijo: las columnas no bailan al actualizar. */
.ifha-p .ifha-p-num {
	font-variant-numeric: tabular-nums;
}

/* La referencia del pedido va monoespaciada en todas las pantallas: es lo que
   la persona compara caracter por caracter contra su comprobante. */
.ifha-p .ifha-p-ref {
	font-family: var(--ifha-mono);
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Solo para lectores de pantalla. */
.ifha-p .ifha-p-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -----------------------------------------------------------------------------
 * 6. Pilas (utilidades de columna)
 *
 * El prototipo apila casi todo con `display:flex;flex-direction:column` y un
 * gap distinto por bloque. En vez de repetir eso en cada componente, se declara
 * una vez y se combina: `class="ifha-p-card ifha-p-pila"`.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-pila {
	display: flex;
	flex-direction: column;
	gap: var(--ifha-space-3);
}

.ifha-p .ifha-p-pila--xs {
	gap: 6px;
}

.ifha-p .ifha-p-pila--sm {
	gap: var(--ifha-space-2);
}

.ifha-p .ifha-p-pila--md {
	gap: 14px;
}

.ifha-p .ifha-p-pila--lg {
	gap: var(--ifha-space-4);
}

.ifha-p .ifha-p-pila--xl {
	gap: 20px;
}

/* El bloque "Proximos pasos" de la pantalla de resultado: 10 px entre el titulo
   y la lista. Es el unico gap de 10 px del prototipo y no entra en la escala de
   arriba; sin esta clase se usaba `--sm` (8 px), que es el valor correcto para
   el envoltorio de cada medio de pago del paso 3 y no para este. */
.ifha-p .ifha-p-pila--proximos {
	gap: 10px;
}

/* -----------------------------------------------------------------------------
 * 7. Indicador de progreso (3 pasos)
 *
 * Barra de 4 px con radio 2 px + rotulo de 12 px en mayusculas. Hecho = verde
 * con ✓, actual = azul, pendiente = gris. El estado se lee de la clase
 * modificadora o de `aria-current="step"`.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-pasos {
	display: flex;
	gap: var(--ifha-space-2);
	margin: 0 0 var(--ifha-space-5);
	padding: 0;
	list-style: none;
}

.ifha-p .ifha-p-pasos__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--ifha-space-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ifha-p .ifha-p-pasos__item::marker {
	content: none;
}

.ifha-p .ifha-p-pasos__barra {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--ifha-line-300);
}

.ifha-p .ifha-p-pasos__label {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--ifha-gray-400);
}

.ifha-p .ifha-p-pasos__glifo {
	flex: none;
}

/* A 390 px el tercer rotulo ("Revisar y pagar") no entra. El prototipo lo corta
   a cuchillo; aca se corta con puntos suspensivos, que es lo mismo de ancho y
   se lee como texto recortado y no como texto roto. */
.ifha-p .ifha-p-pasos__texto {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ifha-p .ifha-p-pasos__item--hecho .ifha-p-pasos__barra {
	background: var(--ifha-green-500);
}

.ifha-p .ifha-p-pasos__item--hecho .ifha-p-pasos__label {
	color: var(--ifha-green-700);
}

.ifha-p .ifha-p-pasos__item--actual .ifha-p-pasos__barra,
.ifha-p .ifha-p-pasos__item[aria-current="step"] .ifha-p-pasos__barra {
	background: var(--ifha-blue-600);
}

.ifha-p .ifha-p-pasos__item--actual .ifha-p-pasos__label,
.ifha-p .ifha-p-pasos__item[aria-current="step"] .ifha-p-pasos__label {
	color: var(--ifha-blue-600);
}

/* -----------------------------------------------------------------------------
 * 8. Encabezado de pantalla y secciones
 * -------------------------------------------------------------------------- */

/* H1 + bajada. No lleva gap propio: el h1 ya trae `margin-bottom:6px`. */
.ifha-p .ifha-p-hero {
	margin: 0;
}

.ifha-p .ifha-p-seccion {
	display: flex;
	flex-direction: column;
	gap: var(--ifha-space-3);
}

.ifha-p .ifha-p-seccion__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ifha-space-3);
}

.ifha-p .ifha-p-seccion__meta {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ifha-gray-600);
}

/* -----------------------------------------------------------------------------
 * 9. Tarjetas
 *
 * Blancas, radio 14 px, borde 1 px #D4D9DE. Nunca borde + sombra fuerte a la
 * vez (README seccion 5): son planas y se apoyan solo en el hairline.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-card {
	background: var(--ifha-white);
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-md);
	padding: 20px;
}

/* Tarjeta-fila: rotulo + ayuda a la izquierda, segmentado a la derecha
   ("Pagas desde", "¿Ya sos alumno?"). */
.ifha-p .ifha-p-card--fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ifha-space-3) 20px;
	padding: var(--ifha-space-4) 20px;
}

/* La mitad izquierda de la tarjeta-fila. */
.ifha-p .ifha-p-card__texto {
	flex: 1 1 200px;
	min-width: 0;
}

.ifha-p .ifha-p-card__hint {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

/* Reserva de alto para la ayuda que llega por JavaScript ("Detectamos que estas
   en Argentina…"). La pagina /pagos/ se cachea, asi que el servidor NO puede
   escribir ese texto sin afirmarle a alguien de Uruguay que esta en Argentina:
   se imprime vacia y la completa el catalogo. Sin reserva, la tarjeta crece de
   golpe y empuja todo lo de abajo en la primera vista, que es el unico salto de
   layout de la pantalla. Tres lineas es lo que mide la frase de 900 px para
   arriba, donde la tarjeta es una fila; en celular sigue creciendo, pero menos. */
.ifha-p .ifha-p-card__hint--reserva {
	min-height: calc(1.5em * 3);
}

/* Tarjeta de datos: el ultimo bloque es una fila de tabla que ya trae su propio
   aire abajo, asi que el padding inferior baja a 4 px. */
.ifha-p .ifha-p-card--flush {
	padding: var(--ifha-space-4) 20px var(--ifha-space-1);
}

/* Tarjeta de resumen (paso 3): las filas ponen su propio padding vertical. */
.ifha-p .ifha-p-card--filas {
	padding: var(--ifha-space-1) 20px;
}

.ifha-p .ifha-p-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ifha-space-2) var(--ifha-space-3);
	padding-bottom: var(--ifha-space-2);
}

.ifha-p .ifha-p-card__sub {
	font-size: 12.5px;
	color: var(--ifha-gray-600);
}

/* Sub-panel gris dentro de una tarjeta (datos del alumno, datos de facturacion,
   importe libre). */
.ifha-p .ifha-p-subpanel {
	padding: var(--ifha-space-4);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-surface-100);
}

.ifha-p .ifha-p-subpanel--campo {
	padding: 14px var(--ifha-space-4);
}

/* -----------------------------------------------------------------------------
 * 10. Segmentado (pildoras "Pagas desde" y "¿Ya sos alumno?")
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-seg {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: var(--ifha-space-2);
}

.ifha-p .ifha-p-seg__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ifha-hit);
	padding: 10px 18px;
	border: 1.5px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-pill);
	background: var(--ifha-white);
	color: var(--ifha-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-seg__btn:hover,
.ifha-p .ifha-p-seg__btn:focus {
	border-color: var(--ifha-gray-400);
	background: var(--ifha-white);
	color: var(--ifha-ink);
}

.ifha-p .ifha-p-seg__btn.is-activo,
.ifha-p .ifha-p-seg__btn[aria-checked="true"],
.ifha-p .ifha-p-seg__btn[aria-pressed="true"] {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-600);
	color: var(--ifha-white);
}

.ifha-p .ifha-p-seg__btn.is-activo:hover,
.ifha-p .ifha-p-seg__btn[aria-checked="true"]:hover,
.ifha-p .ifha-p-seg__btn[aria-pressed="true"]:hover {
	border-color: var(--ifha-blue-800);
	background: var(--ifha-blue-800);
	color: var(--ifha-white);
}

.ifha-p .ifha-p-seg__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Variante con radio real (sin JS): la pildora es un <label> con el radio
   escondido adentro. Va en un bloque aparte porque `:has()` invalida TODA la
   lista de selectores donde aparece en los navegadores que no lo soportan, y se
   llevaria puesto el estado seleccionado de la variante con boton. Por lo mismo
   el foco se lee de `:has(:focus-visible)` y no de `:focus-within`: este ultimo
   tambien se enciende al hacer clic con el mouse. */
.ifha-p .ifha-p-seg__btn:has(> .ifha-p-seg__input:checked) {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-600);
	color: var(--ifha-white);
}

.ifha-p .ifha-p-seg__btn:has(> .ifha-p-seg__input:focus-visible) {
	outline: 2px solid var(--ifha-focus);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
 * 11. Radio-cards (programa, tipo de abono, medio de pago)
 *
 * Tarjeta clicable con un punto de radio dibujado a mano: circulo de 20 px,
 * borde de 2 px del color del estado, relleno del mismo color y un anillo
 * blanco de 3 px por dentro (box-shadow inset). Sin seleccionar, el relleno es
 * blanco y el borde gris.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-radios {
	display: grid;
	gap: 10px;
}

.ifha-p .ifha-p-radios--sm {
	gap: var(--ifha-space-2);
}

/* El grupo "Tipo de abono" arranca 8 px mas abajo que el select de edicion. */
.ifha-p .ifha-p-radios--sep {
	margin-top: var(--ifha-space-2);
}

.ifha-p .ifha-p-radio {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 64px;
	padding: var(--ifha-space-4) 18px;
	border: 1.5px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-md);
	background: var(--ifha-white);
	color: var(--ifha-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-radio:hover,
.ifha-p .ifha-p-radio:focus {
	border-color: var(--ifha-gray-400);
	background: var(--ifha-white);
	color: var(--ifha-ink);
}

/* Variante chica: tipo de abono. Radio 8 px, alto minimo 56 px. */
.ifha-p .ifha-p-radio--sm {
	min-height: 56px;
	padding: var(--ifha-space-3) 14px;
	border-radius: var(--ifha-radius-sm);
}

.ifha-p .ifha-p-radio__dot {
	flex: none;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border: 2px solid var(--ifha-gray-400);
	border-radius: 50%;
	background: var(--ifha-white);
	box-shadow: inset 0 0 0 3px #fff;
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-radio__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Linea del titulo: nombre + etiquetas. */
.ifha-p .ifha-p-radio__linea {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ifha-space-2);
}

.ifha-p .ifha-p-radio__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.ifha-p .ifha-p-radio--sm .ifha-p-radio__title {
	font-size: 15px;
}

.ifha-p .ifha-p-radio__meta {
	font-size: 13px;
	line-height: 1.4;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-radio__amount {
	flex: none;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Estado seleccionado: borde y punto azules, fondo con el tinte #F0F5FC. */
.ifha-p .ifha-p-radio.is-activo,
.ifha-p .ifha-p-radio[aria-checked="true"] {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-50);
}

.ifha-p .ifha-p-radio.is-activo:hover,
.ifha-p .ifha-p-radio[aria-checked="true"]:hover {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-50);
}

.ifha-p .ifha-p-radio.is-activo .ifha-p-radio__dot,
.ifha-p .ifha-p-radio[aria-checked="true"] .ifha-p-radio__dot {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-600);
}

.ifha-p .ifha-p-radio__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Variante con radio real (sin JS). Bloque aparte por lo mismo que en el
   segmentado: un `:has()` desconocido invalida toda la lista de selectores. */
.ifha-p .ifha-p-radio:has(> .ifha-p-radio__input:checked) {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-50);
}

.ifha-p .ifha-p-radio:has(> .ifha-p-radio__input:checked) .ifha-p-radio__dot {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-600);
}

.ifha-p .ifha-p-radio:has(> .ifha-p-radio__input:focus-visible) {
	outline: 2px solid var(--ifha-focus);
	outline-offset: 2px;
}

/* Deshabilitada (Masterclass en suspenso). */
.ifha-p .ifha-p-radio[disabled],
.ifha-p .ifha-p-radio[aria-disabled="true"] {
	background: var(--ifha-surface-100);
	border-color: var(--ifha-line-200);
	color: var(--ifha-gray-400);
	cursor: not-allowed;
}

.ifha-p .ifha-p-radio[disabled] .ifha-p-radio__meta,
.ifha-p .ifha-p-radio[aria-disabled="true"] .ifha-p-radio__meta {
	color: var(--ifha-gray-400);
}

/* -----------------------------------------------------------------------------
 * 12. Etiquetas de radio-card y chips
 *
 * `.ifha-p-tag` es la etiqueta chica de 10,5 px que va dentro de una radio-card
 * (comision, tipo de confirmacion, "Pago parcial"). `.ifha-p-chip` es el chip de
 * 12 px que usan los correos y la pagina de gracias.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px var(--ifha-space-2);
	border-radius: var(--ifha-radius-pill);
	background: var(--ifha-surface-100);
	color: var(--ifha-gray-600);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Sin comision. */
.ifha-p .ifha-p-tag--ok {
	background: var(--ifha-green-50);
	color: var(--ifha-green-800);
}

/* Confirmacion inmediata / "Pago parcial". */
.ifha-p .ifha-p-tag--info {
	background: var(--ifha-blue-100);
	color: var(--ifha-blue-900);
}

.ifha-p .ifha-p-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ifha-space-1);
	padding: var(--ifha-space-1) var(--ifha-space-3);
	border-radius: var(--ifha-radius-pill);
	background: var(--ifha-blue-100);
	color: var(--ifha-blue-900);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.ifha-p .ifha-p-chip--neutral {
	background: var(--ifha-surface-100);
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-chip--ok {
	background: var(--ifha-green-50);
	color: var(--ifha-green-800);
}

/* -----------------------------------------------------------------------------
 * 13. Campos: select, texto, importe en USD, telefono, casillas
 * -------------------------------------------------------------------------- */

/* Rejilla del formulario del paso 2: dos columnas desde 240 px de ancho util,
   una sola abajo de eso. `min()` evita el desborde a 390 px. */
.ifha-p .ifha-p-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--ifha-space-4);
}

.ifha-p .ifha-p-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* Ocupa la fila entera de la rejilla. */
.ifha-p .ifha-p-campo--full,
.ifha-p .ifha-p-full {
	grid-column: 1 / -1;
}

.ifha-p .ifha-p-input,
.ifha-p .ifha-p-select {
	width: 100%;
	box-sizing: border-box;
	min-height: var(--ifha-hit);
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-white);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ifha-ink);
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-input {
	padding: 11px 14px;
}

.ifha-p .ifha-p-select {
	padding: 10px 14px;
}

.ifha-p .ifha-p-input:hover,
.ifha-p .ifha-p-select:hover {
	border-color: var(--ifha-gray-400);
}

.ifha-p .ifha-p-input:focus,
.ifha-p .ifha-p-select:focus {
	border-color: var(--ifha-blue-600);
}

/* Error: borde rojo. Se lee de `aria-invalid="true"` (que es lo que ya pone el
   marcado accesible) o de la clase. */
.ifha-p .ifha-p-input[aria-invalid="true"],
.ifha-p .ifha-p-select[aria-invalid="true"],
.ifha-p .ifha-p-input.is-error,
.ifha-p .ifha-p-select.is-error,
.ifha-p .ifha-p-usd.is-error,
.ifha-p .ifha-p-usd[data-error="1"] {
	border-color: var(--ifha-red-500);
}

.ifha-p .ifha-p-error {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ifha-red-500);
}

/* Ayuda bajo el campo. */
.ifha-p .ifha-p-hint {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ifha-gray-400);
}

/* Aviso de que cambio la zona al elegir otro pais. */
.ifha-p .ifha-p-hint--info {
	color: var(--ifha-blue-800);
}

/* Campo de importe con prefijo USD pegado. El borde lo dibuja el contenedor,
   nunca el input: si no, se ven dos lineas. */
.ifha-p .ifha-p-usd {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-white);
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-usd:focus-within {
	border-color: var(--ifha-blue-600);
}

.ifha-p .ifha-p-usd__pre {
	display: flex;
	flex: none;
	align-items: center;
	padding: 0 14px;
	border-right: 1px solid var(--ifha-line-300);
	background: var(--ifha-surface-100);
	font-size: 15px;
	font-weight: 700;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-usd__input {
	flex: 1;
	min-width: 0;
	min-height: var(--ifha-hit);
	padding: 11px 14px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	color: var(--ifha-ink);
	font-variant-numeric: tabular-nums;
}

.ifha-p .ifha-p-usd__input:focus,
.ifha-p .ifha-p-usd__input:focus-visible {
	outline: 0;
}

/* Equivalente en ARS debajo del importe. */
.ifha-p .ifha-p-equiv {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ifha-ink);
	font-variant-numeric: tabular-nums;
}

/* Telefono: prefijo internacional de 84 px + numero. */
.ifha-p .ifha-p-tel {
	display: flex;
	gap: var(--ifha-space-2);
}

.ifha-p .ifha-p-tel__pre {
	width: 84px;
	flex: none;
	padding: 11px var(--ifha-space-3);
	text-align: center;
}

.ifha-p .ifha-p-tel__num {
	flex: 1;
	min-width: 0;
}

/* Casilla + texto. El objetivo tactil lo da el alto de la linea de texto mas el
   padding: la casilla sola mide 20 px, pero el area clicable es toda la fila. */
.ifha-p .ifha-p-check {
	display: flex;
	align-items: flex-start;
	gap: var(--ifha-space-3);
	min-height: var(--ifha-hit);
	margin: 0;
	cursor: pointer;
}

.ifha-p .ifha-p-check--sep {
	padding-top: var(--ifha-space-1);
}

.ifha-p .ifha-p-check__box {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--ifha-blue-600);
	cursor: pointer;
}

.ifha-p .ifha-p-check__text {
	font-size: 15px;
	line-height: 1.4;
}

.ifha-p .ifha-p-check__muted {
	color: var(--ifha-gray-600);
}

/* -----------------------------------------------------------------------------
 * 14. Fila de total en celular (pasos 1 y 2, abajo de 900 px)
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-total-movil {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ifha-space-3);
	padding: var(--ifha-space-3) var(--ifha-space-4);
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-white);
}

.ifha-p .ifha-p-total-movil__k {
	font-size: 13px;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-total-movil__v {
	font-size: 18px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
 * 15. Panel lateral "Tu pago"
 *
 * Solo desde 900 px. Abajo de eso no se renderiza visualmente (queda oculto) y
 * su lugar lo toma la fila de total de celular. Pegajoso a 24 px del borde.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-aside {
	display: none;
	flex: 0 1 var(--ifha-aside);
	flex-direction: column;
	gap: var(--ifha-space-3);
	align-self: flex-start;
	min-width: 260px;
	padding: 20px;
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-md);
	background: var(--ifha-white);
}

.ifha-p .ifha-p-aside__fila {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--ifha-space-2) 0;
	border-bottom: 1px solid var(--ifha-line-200);
}

.ifha-p .ifha-p-aside__k {
	font-size: 12px;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-aside__v {
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.ifha-p .ifha-p-aside__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ifha-space-3);
	padding-top: 6px;
}

.ifha-p .ifha-p-aside__total-k {
	font-size: 14px;
	font-weight: 700;
}

.ifha-p .ifha-p-aside__total-v {
	font-size: 20px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

.ifha-p .ifha-p-aside__vacio {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-aside__pie {
	margin: var(--ifha-space-1) 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ifha-gray-400);
}

/* -----------------------------------------------------------------------------
 * 16. Resumen de filas clave/valor (paso 3 y resultado, marcado con div)
 *
 * La version en tabla, que se comparte con los correos, esta en la seccion 18.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-resumen__fila {
	display: flex;
	justify-content: space-between;
	gap: var(--ifha-space-4);
	padding: 14px 0;
	border-bottom: 1px solid var(--ifha-line-200);
}

.ifha-p .ifha-p-resumen__k {
	flex: none;
	font-size: 14px;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-resumen__v {
	min-width: 0;
	font-size: 15px;
	font-weight: 500;
	text-align: right;
	overflow-wrap: anywhere;
}

.ifha-p .ifha-p-resumen__v--num {
	font-variant-numeric: tabular-nums;
}

/* Nota de cotizacion: ocupa la fila entera y no tiene columna de valor. */
.ifha-p .ifha-p-resumen__nota {
	padding: var(--ifha-space-3) 0;
	border-bottom: 1px solid var(--ifha-line-200);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-resumen__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ifha-space-4);
	padding: var(--ifha-space-4) 0 14px;
}

.ifha-p .ifha-p-resumen__total-k {
	font-size: 15px;
	font-weight: 700;
}

.ifha-p .ifha-p-resumen__total-v {
	font-size: 24px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

/* En la pantalla de resultado el total es mas chico (20 px) y las filas tienen
   12 px de padding. */
.ifha-p .ifha-p-resumen--res .ifha-p-resumen__fila {
	padding: var(--ifha-space-3) 0;
}

.ifha-p .ifha-p-resumen--res .ifha-p-resumen__total {
	padding: 14px 0;
}

.ifha-p .ifha-p-resumen--res .ifha-p-resumen__total-v {
	font-size: 20px;
}

/* -----------------------------------------------------------------------------
 * 17. Banda azul de instrucciones (importe exacto + referencia)
 *
 * Dos marcados posibles, mismo resultado:
 *  · TABLA — la que usa templates/emails/partials/instrucciones.php, que se
 *    comparte con el correo y por eso no puede usar flexbox.
 *  · DIV/FLEX con `.ifha-p-band__col` — para pantallas que se arman solo para la
 *    web (por ejemplo la pagina de comprobante).
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-band {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ifha-blue-600);
	color: var(--ifha-white);
	border-radius: var(--ifha-radius-md);
	overflow: hidden;
}

/* Version div: fila flexible con las dos mitades separadas a los extremos. */
.ifha-p div.ifha-p-band {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ifha-space-3) var(--ifha-space-5);
	padding: 18px 20px;
}

.ifha-p .ifha-p-band td {
	padding: 18px 20px;
	vertical-align: top;
	text-align: left;
}

.ifha-p .ifha-p-band__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.ifha-p .ifha-p-band__k {
	display: block;
	margin-bottom: var(--ifha-space-1);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ifha-white);
	opacity: .85;
}

.ifha-p .ifha-p-band__col .ifha-p-band__k {
	margin-bottom: 0;
}

.ifha-p .ifha-p-band__amount {
	display: block;
	font-size: 26px;
	font-weight: 900;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.ifha-p .ifha-p-band__ref {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	text-align: left;
}

.ifha-p .ifha-p-band__ref code,
.ifha-p .ifha-p-band__ref .ifha-p-ref {
	font-family: var(--ifha-mono);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ifha-white);
	background: none;
	padding: 0;
	overflow-wrap: anywhere;
}

/* Boton Copiar: pildora de contorno verde sobre el azul. El prototipo lo dibuja
   de 32 px de alto; aca va a 44 px porque el sistema pide ese objetivo tactil
   minimo y este boton se usa desde el celular, con la mano, mientras la persona
   tiene el homebanking abierto. Es la unica medida que se aparta del prototipo
   a proposito: el padding es el suyo (4px 12px), porque con 44 px de alto el
   vertical ya no manda y ensanchar la pildora le roba lugar a la referencia
   monoespaciada justo a 390 px, que es donde menos hay. */
.ifha-p .ifha-p-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ifha-hit);
	padding: var(--ifha-space-1) var(--ifha-space-3);
	border: 1.5px solid var(--ifha-green-500);
	border-radius: var(--ifha-radius-pill);
	background: transparent;
	color: var(--ifha-white);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-copy:hover,
.ifha-p .ifha-p-copy:focus {
	background: var(--ifha-green-500);
	color: var(--ifha-green-900);
}

/* El bloque de instrucciones trae sus propios margenes (los necesita para el
   correo): se le saca el ultimo para que no sume al gap del contenedor.

   POR QUE LLEVA `!important`, que en el resto de la hoja esta prohibido: el
   ultimo hijo de `.ifha-p-instr` es casi siempre la ultima
   `<table class="ifha-p-instr__card">` del parcial compartido con el correo, y
   ese marcado trae `style="…margin:0 0 16px…"` EN LINEA porque Gmail y Outlook
   no leen hojas externas. Un estilo en linea le gana a cualquier selector, asi
   que sin el `!important` esta regla no hacia absolutamente nada y quedaban 16
   px de sobra debajo de la ultima tarjeta de banco, sumados al gap de 20 px de
   la columna. Es el mismo caso —y la misma salida— que el bloque de 599 px de
   la seccion 25, que tambien tiene que pisar los estilos en linea del parcial.
   No es licencia para usarlo en otro lado: solo aplica donde el marcado que se
   comparte con el correo obliga. */
.ifha-p .ifha-p-instr > :last-child {
	margin-bottom: 0 !important;
}

/* Tarjeta de datos bancarios del parcial compartido con el correo. Ahi viaja con
   todos sus estilos en linea; esta regla existe para que en la web se vea igual
   aunque algun dia se rendericen sin ellos, y para que el reset de tablas de la
   seccion 3 no le borre el fondo y el borde. */
.ifha-p table.ifha-p-instr__card {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ifha-white);
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-md);
}

/* -----------------------------------------------------------------------------
 * 18. Filas de datos en tabla (cuentas bancarias, resumen del correo)
 *
 * Todas las filas llevan linea arriba, incluida la primera: en el prototipo hay
 * un hairline entre el encabezado de la tarjeta ("Banco BBVA · Cuenta en pesos")
 * y el primer dato.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-datos {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.ifha-p .ifha-p-datos td {
	padding: var(--ifha-space-3) 0;
	border-top: 1px solid var(--ifha-line-200);
	vertical-align: top;
}

/* El selector lleva `td` a proposito: `.ifha-p .ifha-p-datos td` es (0,2,1) y su
   atajo `padding` pisa cualquier `padding-right` declarado con (0,2,0). Con
   `td.ifha-p-datos__k` quedamos en (0,3,1) y el aire de 16 px entre la etiqueta
   y el valor (el `gap` de la fila flexible del prototipo) sobrevive. */
.ifha-p .ifha-p-datos td.ifha-p-datos__k,
.ifha-p .ifha-p-datos__k {
	font-size: 14px;
	color: var(--ifha-gray-600);
	white-space: nowrap;
	padding-right: var(--ifha-space-4);
}

.ifha-p .ifha-p-datos__v {
	font-size: 15px;
	font-weight: 500;
	text-align: right;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
	/* El CBU y el alias se copian a mano: un clic selecciona el valor entero. */
	-webkit-user-select: all;
	user-select: all;
}

/* Fila de total: mas peso, sin linea inferior. El aire de abajo son los 14 px
   del prototipo (`padding:14px 0` en la ultima fila de la tarjeta de resultado):
   sin el, el importe queda pegado al titulo "Proximos pasos" que viene despues. */
.ifha-p .ifha-p-datos__total td {
	border-top: 1px solid var(--ifha-line-200);
	padding-top: var(--ifha-space-4);
	padding-bottom: 14px;
}

/* La excepcion es la tarjeta de datos bancarios, que ya aporta sus propios 4 px
   abajo (`.ifha-p-card--flush`): ahi el total cierra la tarjeta y 14 px mas
   serian un hueco. */
.ifha-p .ifha-p-card--flush .ifha-p-datos__total td {
	padding-bottom: 0;
}

.ifha-p .ifha-p-datos__total .ifha-p-datos__k {
	font-size: 15px;
	font-weight: 700;
	color: var(--ifha-ink);
}

.ifha-p .ifha-p-datos__total .ifha-p-datos__v {
	font-size: 20px;
	font-weight: 900;
	-webkit-user-select: auto;
	user-select: auto;
}

/* -----------------------------------------------------------------------------
 * 19. Nota destacada
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-note {
	margin: 0;
	padding: 14px var(--ifha-space-4);
	border: 1px solid var(--ifha-blue-100);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-blue-50);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ifha-blue-900);
}

/* -----------------------------------------------------------------------------
 * 20. Tarjeta de comprobante
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-proof {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* El parrafo de 14 px es SOLO el del intro. La regla no puede alcanzar a toda la
   tarjeta: `.ifha-p .ifha-p-proof p` es (0,2,1) y le ganaba a
   `.ifha-p .ifha-p-fineprint` (0,2,0), asi que la letra chica del aviso ("Subir
   un comprobante no confirma el pago…") salia a 14 px gris-600 en vez de los
   12,5 px gris-400 del prototipo y competia con el parrafo principal. Acotada al
   envoltorio del intro, cualquier bloque nuevo que entre en la tarjeta conserva
   su propio estilo. */
.ifha-p .ifha-p-proof__intro p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-proof__intro {
	margin: 0;
}

.ifha-p .ifha-p-proof__intro .ifha-p-h2 {
	margin: 0 0 var(--ifha-space-1);
}

.ifha-p .ifha-p-proof strong {
	color: var(--ifha-ink);
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Caja punteada para adjuntar. Sirve igual como <label> con un input de archivo
   escondido adentro (fase b) o como <a> hacia la pagina de comprobante (fase a):
   las dos miden lo mismo, asi que cambiar una por otra no mueve un pixel. */
/* El numero de control de Western Union. Usa los mismos campos que el resto del
   centro de pagos; lo unico propio es el aire que lo separa del selector de
   archivo, para que se lean como dos pasos y no como un bloque. */
.ifha-p .ifha-p-proof__mtcn {
	margin: 0 0 16px;
}

.ifha-p .ifha-p-proof__file,
.ifha-p .ifha-p-proof__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 64px;
	padding: var(--ifha-space-4);
	overflow: hidden;
	border: 1.5px dashed var(--ifha-gray-400);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-surface-50);
	color: var(--ifha-blue-600);
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-proof__file:hover,
.ifha-p .ifha-p-proof__link:hover,
.ifha-p .ifha-p-proof__link:focus {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-50);
	text-decoration: none;
}

/* El input de archivo se esconde, no se elimina: sigue siendo el que recibe el
   foco del teclado, y por eso el contorno lo dibuja la caja. */
.ifha-p .ifha-p-proof__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.ifha-p .ifha-p-proof__file:focus-within {
	outline: 2px solid var(--ifha-focus);
	outline-offset: 2px;
	border-color: var(--ifha-blue-600);
}

/* -----------------------------------------------------------------------------
 * 21. Pantalla de resultado
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-res {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 28px 20px;
}

.ifha-p .ifha-p-res__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

/* Circulo con glifo. El color lo pone el modificador de estado; el gris es el
   valor por defecto para que un estado desconocido no quede sin color. */
.ifha-p .ifha-p-res__circle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 2px solid var(--ifha-gray-600);
	border-radius: 50%;
	color: var(--ifha-gray-600);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

.ifha-p .ifha-p-res__badge {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-res__title {
	margin: 0;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: -.01em;
	color: var(--ifha-ink);
	text-wrap: pretty;
}

.ifha-p .ifha-p-res__lead {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ifha-gray-600);
	overflow-wrap: anywhere;
}

/* Contenedor de la tabla del resultado: linea de arriba y nada mas. */
.ifha-p .ifha-p-res__tabla {
	border-top: 1px solid var(--ifha-line-200);
}

.ifha-p .ifha-p-res--aprobado .ifha-p-res__circle,
.ifha-p .ifha-p-res--aprobado .ifha-p-res__badge {
	border-color: var(--ifha-green-700);
	color: var(--ifha-green-700);
}

.ifha-p .ifha-p-res--pendiente .ifha-p-res__circle,
.ifha-p .ifha-p-res--pendiente .ifha-p-res__badge {
	border-color: var(--ifha-amber-500);
	color: var(--ifha-amber-500);
}

.ifha-p .ifha-p-res--transfer-pending .ifha-p-res__circle,
.ifha-p .ifha-p-res--transfer-pending .ifha-p-res__badge {
	border-color: var(--ifha-blue-600);
	color: var(--ifha-blue-600);
}

.ifha-p .ifha-p-res--rechazado .ifha-p-res__circle,
.ifha-p .ifha-p-res--rechazado .ifha-p-res__badge {
	border-color: var(--ifha-red-500);
	color: var(--ifha-red-500);
}

.ifha-p .ifha-p-res--cancelado .ifha-p-res__circle,
.ifha-p .ifha-p-res--cancelado .ifha-p-res__badge {
	border-color: var(--ifha-gray-600);
	color: var(--ifha-gray-600);
}

/* -----------------------------------------------------------------------------
 * 22. Proximos pasos
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-next {
	display: flex;
	flex-direction: column;
	gap: var(--ifha-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ifha-p .ifha-p-next li {
	display: flex;
	gap: 10px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
}

.ifha-p .ifha-p-next li::marker {
	content: none;
}

.ifha-p .ifha-p-next__glyph {
	flex: none;
	color: var(--ifha-green-600);
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
 * 23. Botones
 *
 * Primario: verde #92D050 con texto #2A3D14; al hover #6EA837 con texto blanco
 * (el unico par aprobado: blanco sobre el verde vivo no pasa contraste).
 * Secundario: contorno azul de 1,5 px. Los dos son pildora de 999 px y miden
 * 48 px de alto minimo.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: var(--ifha-space-3) 28px;
	border: 0;
	border-radius: var(--ifha-radius-pill);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-btn:hover,
.ifha-p .ifha-p-btn:focus {
	text-decoration: none;
}

.ifha-p .ifha-p-btn__glifo {
	flex: none;
}

.ifha-p .ifha-p-btn--primary,
.ifha-p a.ifha-p-btn--primary {
	background: var(--ifha-green-500);
	color: var(--ifha-green-900);
}

.ifha-p .ifha-p-btn--primary:hover,
.ifha-p .ifha-p-btn--primary:focus,
.ifha-p a.ifha-p-btn--primary:hover,
.ifha-p a.ifha-p-btn--primary:focus {
	background: var(--ifha-green-600);
	color: var(--ifha-white);
}

.ifha-p .ifha-p-btn--secondary,
.ifha-p a.ifha-p-btn--secondary {
	padding: var(--ifha-space-3) var(--ifha-space-5);
	border: 1.5px solid var(--ifha-blue-600);
	background: transparent;
	color: var(--ifha-blue-600);
}

.ifha-p .ifha-p-btn--secondary:hover,
.ifha-p .ifha-p-btn--secondary:focus,
.ifha-p a.ifha-p-btn--secondary:hover,
.ifha-p a.ifha-p-btn--secondary:focus {
	background: var(--ifha-blue-50);
	color: var(--ifha-blue-600);
}

/* El CTA del paso 3 crece hasta 400 px para que el importe entre completo. */
.ifha-p .ifha-p-btn--ancho {
	flex: 1 1 auto;
	max-width: 400px;
}

/* Procesando. El boton queda gris con cursor de espera; el secundario, en
   cambio, conserva su forma (en el prototipo tampoco cambia) y solo se apaga. */
.ifha-p .ifha-p-btn[disabled],
.ifha-p .ifha-p-btn[aria-disabled="true"],
.ifha-p .ifha-p-btn[aria-busy="true"] {
	cursor: wait;
}

.ifha-p .ifha-p-btn--primary[disabled],
.ifha-p .ifha-p-btn--primary[aria-disabled="true"],
.ifha-p .ifha-p-btn--primary[aria-busy="true"],
.ifha-p .ifha-p-btn--primary.is-procesando,
.ifha-p .ifha-p-btn--primary[disabled]:hover,
.ifha-p .ifha-p-btn--primary[aria-busy="true"]:hover,
.ifha-p .ifha-p-btn--primary.is-procesando:hover {
	background: var(--ifha-line-200);
	border-color: var(--ifha-line-200);
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-btn--secondary[disabled],
.ifha-p .ifha-p-btn--secondary[aria-disabled="true"] {
	opacity: .6;
}

/* Rueda de espera. La animacion se llama ifhaSpin igual que en el prototipo. */
.ifha-p .ifha-p-btn__spinner {
	display: inline-block;
	flex: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ifhaSpin .8s linear infinite;
}

@keyframes ifhaSpin {

	to {
		transform: rotate(360deg);
	}
}

/* Fila de acciones: en celular los botones se apilan a ancho completo; desde
   480 px vuelven a la linea, el secundario a la izquierda. */
.ifha-p .ifha-p-actions {
	display: flex;
	flex-direction: column;
	gap: var(--ifha-space-3);
}

.ifha-p .ifha-p-actions .ifha-p-btn {
	width: 100%;
}

/* Bloque de acciones + nota al pie del CTA (paso 3). */
.ifha-p .ifha-p-cta {
	display: flex;
	flex-direction: column;
	gap: var(--ifha-space-3);
}

.ifha-p .ifha-p-cta__nota {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ifha-gray-400);
	text-align: right;
}

/* -----------------------------------------------------------------------------
 * 24. Pie de ayuda por WhatsApp (va en todas las pantallas)
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-help {
	margin: 28px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
	text-align: center;
}

.ifha-p .ifha-p-help a {
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
 * 25. Puntos de quiebre
 * -------------------------------------------------------------------------- */

/* Hasta 599 px: la banda y las filas de datos EN TABLA se apilan. Sin esto, a
   390 px el CBU se parte en tres lineas contra una etiqueta pegada al borde.
   Los `!important` de este bloque son obligatorios: el mismo marcado viaja por
   correo con estilos en linea (ver templates/emails/partials/instrucciones.php)
   y un estilo en linea le gana a cualquier regla de hoja, incluso dentro de una
   media query. Es el unico lugar del plugin donde se usan asi. */
@media (max-width: 599px) {

	/* 16 px y no 15: por debajo de 16, Safari en iOS hace zoom solo al tocar
	   cualquier campo, y con diez campos por inscripcion son diez zooms. */
	.ifha-p .ifha-p-input,
	.ifha-p .ifha-p-select,
	.ifha-p .ifha-p-usd__input,
	.ifha-p textarea.ifha-p-input {
		font-size: 16px;
	}

	.ifha-p table.ifha-p-band,
	.ifha-p table.ifha-p-band tbody,
	.ifha-p table.ifha-p-band tr,
	.ifha-p table.ifha-p-band td {
		display: block !important;
		width: 100% !important;
	}

	.ifha-p table.ifha-p-band td {
		padding: var(--ifha-space-4) !important;
		text-align: left !important;
	}

	.ifha-p table.ifha-p-band td + td {
		padding-top: 0 !important;
	}

	.ifha-p .ifha-p-band__amount {
		font-size: 24px !important;
	}

	.ifha-p .ifha-p-datos,
	.ifha-p .ifha-p-datos tbody,
	.ifha-p .ifha-p-datos tr,
	.ifha-p .ifha-p-datos td {
		display: block !important;
		width: 100% !important;
	}

	.ifha-p .ifha-p-datos td {
		border-top: 0 !important;
		padding: 0 !important;
	}

	.ifha-p .ifha-p-datos tr {
		padding: var(--ifha-space-3) 0;
		border-top: 1px solid var(--ifha-line-200);
	}

	.ifha-p .ifha-p-datos__k {
		white-space: normal;
		margin-bottom: 2px;
	}

	.ifha-p .ifha-p-datos__v {
		text-align: left !important;
	}

	/* El total del resumen si conserva su linea de arriba: es el unico corte
	   que tiene que verse. */
	.ifha-p .ifha-p-datos__total {
		padding-top: var(--ifha-space-4);
	}

	/* Las filas clave/valor con marcado div tambien se apilan: a 390 px un CBU
	   de 22 cifras no entra al lado de su etiqueta. */
	.ifha-p .ifha-p-resumen__fila {
		flex-direction: column;
		gap: 2px;
	}

	.ifha-p .ifha-p-resumen__v {
		text-align: left;
	}
}

/* Desde 480 px los botones vuelven a una fila: el secundario a la izquierda,
   la accion principal a la derecha, como en el prototipo. */
@media (min-width: 480px) {

	.ifha-p .ifha-p-actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--ifha-space-3);
	}

	.ifha-p .ifha-p-actions .ifha-p-btn {
		width: auto;
	}

	.ifha-p .ifha-p-actions--start {
		justify-content: flex-start;
	}

	.ifha-p .ifha-p-actions--end {
		justify-content: flex-end;
	}
}

/* Desde 900 px aparece el panel lateral y se va la fila de total de celular.
   Es el unico punto de quiebre propio del prototipo (window.innerWidth >= 900
   en su script). */
@media (min-width: 900px) {

	.ifha-p .ifha-p-aside {
		display: flex;
		position: -webkit-sticky;
		position: sticky;
		top: var(--ifha-space-5);
	}

	.ifha-p .ifha-p-total-movil,
	.ifha-p .ifha-p-solo-movil {
		display: none;
	}
}

/* Sin animacion para quien la desactivo en el sistema operativo. La rueda de
   espera es la unica excepcion: congelada parece un boton roto, asi que gira
   mas lento en vez de quedarse quieta. */
@media (prefers-reduced-motion: reduce) {

	.ifha-p *,
	.ifha-p *::before,
	.ifha-p *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	.ifha-p .ifha-p-btn__spinner {
		animation-duration: 1.6s !important;
	}
}

/* -----------------------------------------------------------------------------
 * 26. Utilidades de pagina (body.ifha-pagos)
 *
 * El header y el footer del sitio se aplican tambien a order-pay y a la pagina
 * de gracias (plantillas 28865 / 28860, condicion include/general). El footer
 * trae bloques promocionales que contradicen la regla "sin promociones ni
 * ventas cruzadas" en una pantalla de pago, y el boton flotante de Click to
 * Chat (z-index 99999999) tapa el contenido en celular. Se ocultan solo en las
 * pantallas del plugin: el resto del sitio no se toca.
 *
 * Los !important de esta seccion son necesarios: los bloques del footer y el
 * boton flotante llegan con estilos en linea propios.
 * -------------------------------------------------------------------------- */

body.ifha-pagos {
	background: #F1F4F7;
}

/* CTA "Inscribite al Instituto" del footer. */
body.ifha-pagos .ifha-f__cta {
	display: none !important;
}

/* Tiles de fechas del footer (los chips de dia/mes de los dos programas). */
body.ifha-pagos .ifha-f__tile {
	display: none !important;
}

/* Boton flotante de WhatsApp (plugin Click to Chat). El pie de ayuda del
   centro de pagos ya ofrece el mismo canal, sin tapar el formulario. */
body.ifha-pagos #ht-ctc-chat {
	display: none !important;
}

/* PENDIENTE IFHA: falta el selector del bloque "cuotas sin interes y becas"
   del footer 28860 para ocultarlo tambien. Hay que leerlo del widget ifhaft02
   en produccion y agregar la regla aca; no se inventa un selector porque una
   clase equivocada no oculta nada y nadie se entera. */

/* -----------------------------------------------------------------------------
 * 27. `.ifha-p-pago` — la caja de campos de cada medio (paso 3)
 *
 * QUE ES: el `div.payment_box.payment_method_{id}` donde WooCommerce imprime
 * `payment_fields()`. Payway y PayPal lo buscan por ESAS clases exactas, asi que
 * el contenedor no se puede renombrar; `.ifha-p-pago` es el gancho de diseño que
 * se le agrega al lado y `.ifha-p-subpanel` el que le da el fondo gris.
 *
 * POR QUE ESTAS REGLAS VIVEN ACA Y NO EN LA PLANTILLA: woocommerce.css y
 * woocommerce-layout.css pintan `#payment` y `div.payment_box` con su caja gris
 * #dfdcde y su triangulito, y sus selectores llevan un id
 * (`.woocommerce-checkout #payment div.payment_box`), asi que ninguna clase de
 * esta hoja les gana. Hay que igualar la especificidad con otro id, y por eso
 * estos selectores llevan `#payment`. Estuvieron un tiempo en un `<style>` en
 * linea dentro de templates/checkout/form-pay.php, contra la regla 0.8 del
 * contrato de diseño: eran dos fuentes de verdad para la misma pantalla y el dia
 * que alguien borrara el bloque "porque el estilo va en la hoja", el paso 3
 * volvia a salir gris. Es apagado puro: ni un token ni un color nuevo.
 * -------------------------------------------------------------------------- */

body.ifha-pagos .ifha-p #payment {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* Las dos formas del mismo selector: `.ifha-p-pago` es la clase de diseño que
   pone la plantilla y `div.payment_box` cubre cualquier caja que imprima un
   gateway por su cuenta (PayPal arma la suya). Los dos suman (1,3,2) y le ganan
   a `.woocommerce-checkout #payment div.payment_box`, que es (1,2,1). */
body.ifha-pagos .ifha-p #payment div.ifha-p-pago,
body.ifha-pagos .ifha-p #payment div.payment_box {
	position: static;
	width: auto;
	margin: 0;
	padding: var(--ifha-space-4);
	border: 0;
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-surface-100);
	color: var(--ifha-ink);
	font-size: 14px;
	line-height: 1.5;
}

/* El triangulito que WooCommerce dibuja apuntando a la radio elegida. */
body.ifha-pagos .ifha-p #payment div.payment_box::before {
	content: none;
	display: none;
	border: 0;
}

/* Los gateways imprimen parrafos con margen propio: el primero y el ultimo se
   sacan para que el aire lo ponga el padding de la caja. */
body.ifha-pagos .ifha-p #payment div.payment_box p:first-child {
	margin-top: 0;
}

body.ifha-pagos .ifha-p #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

body.ifha-pagos .ifha-p #payment #place_order {
	float: none;
}

body.ifha-pagos .ifha-p #payment .wc_payment_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -----------------------------------------------------------------------------
 * 27b. El formulario de tarjeta de Payway
 *
 * QUE ES: el marcado lo imprime su plugin
 * (`wc-gateway-payway/template/html-payway-checkout-form.php`) y no se puede
 * tocar: sus propios scripts buscan esos ids y esas clases. Lo unico que se
 * puede hacer es vestirlo desde aca.
 *
 * DOS COSAS. La primera, que se vea como el resto del centro de pagos: sus
 * campos salen con el estilo por defecto de WooCommerce, al lado de los
 * nuestros, en la misma tarjeta. La segunda, que en escritorio no sea una
 * columna de doce campos: son doce filas, una abajo de la otra, y el bloque
 * quedaba larguisimo. En una grilla de seis columnas entra en la mitad de alto
 * sin apretar nada.
 *
 * POR QUE `nth-child` Y NO CLASES: sus `div.form-row` no tienen ninguna clase
 * que los distinga; el unico dato estable es el ORDEN de su plantilla, que es
 * fijo: 1 banco, 2 tarjeta, 3 cuotas, 4 numero, 5 mes, 6 anio, 7 CVV, 8
 * titular, 9 tipo de documento, 10 documento, 11 direccion, 12 altura. Si
 * manana cambian ese orden, lo que pasa es que los anchos quedan distintos: la
 * regla base los deja a media columna y no se rompe nada.
 * -------------------------------------------------------------------------- */

body.ifha-pagos .ifha-p #payment fieldset.wc-gateway-payway {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Su descripcion y sus dos rayas grises: la tarjeta de arriba ya explica el
   medio, y decirlo dos veces en la misma pantalla es peor que no decirlo. */
body.ifha-pagos .ifha-p #payment fieldset.wc-gateway-payway > hr,
body.ifha-pagos .ifha-p #payment fieldset.wc-gateway-payway .fieldset-description {
	display: none;
}

body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row {
	margin: 0;
	padding: 0;
}

/* Rotulos con la forma de `.ifha-p-label`. */
body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row > label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--ifha-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ifha-gray-600);
}

body.ifha-pagos .ifha-p #payment .fields-wrapper .required {
	color: var(--ifha-red-500);
	text-decoration: none;
	border: 0;
}

/* Campos con la forma de `.ifha-p-input` y `.ifha-p-select`. */
body.ifha-pagos .ifha-p #payment .fields-wrapper input.input-text,
body.ifha-pagos .ifha-p #payment .fields-wrapper select {
	box-sizing: border-box;
	width: 100%;
	/* El tema le pone `max-width: 300px` a los campos de texto: sin esto,
	   el numero de tarjeta y el titular quedaban a un tercio de su celda. */
	max-width: 100%;
	min-height: var(--ifha-hit);
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-white);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ifha-ink);
	transition: var(--ifha-transition);
}

body.ifha-pagos .ifha-p #payment .fields-wrapper select {
	padding: 10px 14px;
}

/* 16 px en celular, por lo mismo que el resto de los campos: por debajo de
   16, Safari en iOS hace zoom solo al tocar cualquiera. Va aca y no en el
   bloque de arriba porque estas reglas son posteriores en el archivo y le
   ganarian por orden. */
@media (max-width: 599px) {

	body.ifha-pagos .ifha-p #payment .fields-wrapper input.input-text,
	body.ifha-pagos .ifha-p #payment .fields-wrapper select {
		font-size: 16px;
	}
}

body.ifha-pagos .ifha-p #payment .fields-wrapper input.input-text:hover,
body.ifha-pagos .ifha-p #payment .fields-wrapper select:hover {
	border-color: var(--ifha-gray-400);
}

body.ifha-pagos .ifha-p #payment .fields-wrapper input.input-text:focus,
body.ifha-pagos .ifha-p #payment .fields-wrapper select:focus {
	border-color: var(--ifha-blue-600);
}

/* El rojo del campo que su validador marca (y que el nuestro le saca al
   escribir). Antes no se veia: la clase la pone en la fila, no en el campo. */
body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row.woocommerce-invalid input.input-text,
body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row.woocommerce-invalid select {
	border-color: var(--ifha-red-500);
}

/* Su contenedor de errores, con el aire y el color de los nuestros. */
body.ifha-pagos .ifha-p #payment #error_container:not(:empty) {
	margin: 0 0 var(--ifha-space-4);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ifha-red-500);
}

body.ifha-pagos .ifha-p #payment .fields-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ifha-space-4);
}

@media (min-width: 720px) {

	body.ifha-pagos .ifha-p #payment .fields-wrapper {
		grid-template-columns: repeat(6, 1fr);
	}

	/* Base: media fila. Si su plantilla cambia, esto es lo que queda. */
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row {
		grid-column: span 3;
	}

	/* 3 cuotas y 4 numero de tarjeta: fila entera. */
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(3),
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(4) {
		grid-column: span 6;
	}

	/* 5 mes, 6 anio y 7 CVV: los tres en una fila. */
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(5),
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(6),
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(7) {
		grid-column: span 2;
	}

	/* 8 titular: fila entera (los nombres largos no entran en media). */
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(8) {
		grid-column: span 6;
	}

	/* 9 tipo de documento (angosto) y 10 numero de documento. */
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(9) {
		grid-column: span 2;
	}

	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(10) {
		grid-column: span 4;
	}

	/* 11 direccion (ancha) y 12 altura (angosta), como en cualquier domicilio. */
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(11) {
		grid-column: span 4;
	}

	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(12) {
		grid-column: span 2;
	}

	/* Los ocultos del token no ocupan celda. */
	body.ifha-pagos .ifha-p #payment .fields-wrapper > input[type="hidden"] {
		display: none;
	}
}

/* El bloque de domicilio que agrega el plugin va DESPUES del formulario de
   Payway y es otra cosa: se separa con una linea, como en la caja del
   pedido en el escritorio. */
body.ifha-pagos .ifha-p #payment [data-ifha-pw-domicilio] {
	margin-top: var(--ifha-space-5);
	padding-top: var(--ifha-space-4);
	border-top: 1px solid var(--ifha-line-200);
}

/* woocommerce.css centra los parrafos dentro de `div.payment_box`. Nuestra
   ayuda se lee al pie de un campo: va alineada con el campo. */
body.ifha-pagos .ifha-p #payment div.payment_box .ifha-p-help,
body.ifha-pagos .ifha-p #payment div.payment_box .ifha-p-error,
body.ifha-pagos .ifha-p #payment div.payment_box .ifha-p-hint {
	text-align: left;
}


/*
 * Ganchos de pagina.
 *
 * No pintan nada: existen para que el CSS y el JS puedan apuntar a una pantalla
 * concreta sin depender de la URL. `.ifha-p--gracias` la lleva el contenedor de
 * templates/checkout/thankyou.php (instrucciones y resultado); si algun dia hay
 * que separar un estilo de esa pantalla del de los pasos 1 y 2, el gancho ya
 * esta puesto y no hay que tocar el marcado.
 */
.ifha-p.ifha-p--gracias {
	/* Sin reglas a proposito. */
}