/**
 * Midacta — Arreglos visuales del flujo de compra (Amelia v3 + checkout de Woo).
 *
 * Cada bloque arregla UN defecto concreto, verificado en el CSS que publica Amelia
 * (`v3/public/assets/stepForm.644ad227.css`). No se toca ningún archivo del plugin.
 * Si una actualización de Amelia arregla alguno de estos, la regla queda inofensiva.
 *
 * ⚠️⚠️ CÓMO SE ESCRIBE UNA REGLA QUE LE GANE A AMELIA — leer antes de tocar nada
 * ------------------------------------------------------------------------------
 * **TODAS** las reglas del v3 de Amelia llevan un ID:
 *
 *     .amelia-v2-booking #amelia-container .am-fs__main-footer   →  (1,2,0)
 *
 * Un ID le gana a cualquier cantidad de clases. La versión 1.0.0 de esta hoja escribía
 * `.amelia-v2-booking .am-fs__main-footer` (0,2,0) y **NINGUNA de sus reglas se aplicó
 * jamás** — el cliente volvió a reportar los mismos defectos el 2026-08-21.
 *
 * Y empatar tampoco alcanza: Amelia carga `stepForm.*.css` como chunk de Vite, o sea que
 * su SPA la inyecta en runtime **después** de esta hoja. A igualdad de especificidad, gana
 * la última. Por eso las declaraciones que tienen que ganar llevan `!important`.
 *
 * Regla práctica: copiar el selector de Amelia tal cual (con `#amelia-container`) y marcar
 * `!important` sólo la declaración que se está corrigiendo. Nada más.
 */

/* ---------------------------------------------------------------------------
 * V1 · La barra de "Continuar" se comía el último campo.
 *
 * Amelia la define así:
 *     .amelia-v2-booking #amelia-container .am-fs__main-footer {
 *         position:absolute; bottom:0; background-color:transparent }
 * y el área que scrollea, `.am-fs__main-content`, tiene alto fijo (444px) SIN
 * padding inferior. O sea: la barra flota encima de los últimos ~56 px del
 * contenido, y encima es transparente, así que el texto se lee POR DEBAJO de
 * ella. En la captura del 2026-08-20 se ve la línea del footer cortando por la
 * mitad el textarea de "¿Qué necesitás trabajar?".
 *
 * Dos correcciones, cada una para una mitad del problema:
 *   a) fondo sólido → deja de transparentarse el contenido;
 *   b) espacio reservado abajo → el último campo se puede terminar de scrollear.
 * ------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .am-fs__main-footer {
	background-color: var(--am-c-main-bgr, #fff) !important;
}

/*
 * El hueco de abajo va SÓLO en la variante de alto fijo.
 *
 * Las otras cuatro ya resuelven su propio espacio y sumarles 64px dejaría un hueco muerto
 * o rompería su `height: calc(...)`. Se excluyen una por una en vez de usar un selector
 * más laxo, para que se vea exactamente cuáles son y por qué:
 *
 *   .am-cap           → height: calc(100% - 72px)    ya descuenta la barra
 *   .am-caep          → padding:0; height: calc(100% - 136px)
 *   .am-capi          → padding:0; height: calc(100% - 136px)
 *   .am-fs__congrats  → padding:16px; height: calc(100% - 56px)
 *
 * ⚠️ `am-capi` y `am-fs__congrats` NO estaban excluidas en la versión 1.0.0. Como esa
 * versión no ganaba la cascada, el error nunca se notó: al corregir la especificidad se
 * habría roto la pantalla de confirmación. Si aparece una variante nueva de
 * `.am-fs__main-content` con padding o height propios, hay que sumarla acá.
 */
.amelia-v2-booking #amelia-container .am-fs__main-content:not(.am-cap):not(.am-caep):not(.am-capi):not(.am-fs__congrats) {
	padding-bottom: 64px !important;
}

/* ---------------------------------------------------------------------------
 * V2 · La bandera del teléfono tapaba el rótulo "Teléfono:".
 *
 * Amelia posiciona la banderita con
 *     .amelia-v2-booking #amelia-container .m-phone-number-input__country-flag
 *         { bottom:14px; left:9px }
 * pero NUNCA le da tamaño: su única regla `.maz-flag` está limitada al desplegable
 * de países, no a la bandera suelta del campo. Sin ancho ni alto, crece hasta su
 * tamaño natural y se desborda hacia arriba, encima del label. En la captura se ve
 * la bandera argentina estirada tapando la "e" y la "l" de "Teléfono:".
 *
 * Se le fija una caja de 20x14 (proporción de bandera) y se recorta lo que sobre.
 * El `> *` cubre las tres formas en que estos componentes la dibujan —`<img>`,
 * `<svg>` o un emoji de texto— sin depender de cuál sea.
 * ------------------------------------------------------------------------- */
.amelia-v2-booking #amelia-container .m-phone-number-input__country-flag {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 20px !important;
	height: 14px !important;
	overflow: hidden !important;
	font-size: 14px;
	line-height: 14px;
}

.amelia-v2-booking #amelia-container .m-phone-number-input__country-flag > * {
	width: 20px !important;
	min-width: 20px !important;
	max-width: 20px !important;
	height: 14px !important;
	max-height: 14px !important;
	margin: 0 !important;
	object-fit: cover;
	border-radius: 2px;
}

/* ---------------------------------------------------------------------------
 * V5 · La burbuja del chat tapaba "Continuar" y los medios de pago en mobile.
 *
 * El launcher queda fijo abajo a la derecha, exactamente donde Amelia pone
 * "Continuar" y donde el checkout pone el radio de "Tarjeta de crédito y
 * débito". En estas pantallas el objetivo es comprar, así que se lo oculta.
 * Esta hoja SÓLO se carga en el perfil del profesor y en el checkout (lo decide
 * el PHP), así que en el resto del sitio el chat sigue igual.
 *
 * Los selectores arrancan con `html body` a propósito: Chatwoot inyecta su CSS
 * por JS DESPUÉS de esta hoja, y a igualdad de especificidad gana el suyo aunque
 * ambos lleven !important. Es la misma lección que dejó `midacta-ux-mobile.php`
 * —y la misma que hacía falta arriba para Amelia, donde no se aplicó a tiempo—.
 *
 * `:not(.woot--close)` es deliberado: si el visitante había dejado el chat
 * ABIERTO, ese mismo botón es el que lo cierra. Ocultarlo lo dejaría encerrado
 * sin forma de volver.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {

	html body button.woot-widget-bubble:not(.woot--close),
	html body .woot-widget-bubble:not(.woot--close) {
		display: none !important;
	}
}
