/**
 * La bandera de Ecuador dentro del campo del celular.
 *
 * 🔑 **Es un distintivo, no un selector.** Los campos de teléfono con banderas
 * que se ven por ahí llevan un desplegable de países. Aquí no tendría sentido:
 * este campo solo acepta celular ecuatoriano —09 y ocho dígitos, decisión del
 * cliente del 21-ago—, así que un desplegable ofrecería doscientas opciones de
 * las que ciento noventa y nueve dan error al confirmar el pedido. La bandera
 * dice de qué país tiene que ser el número; el desplegable prometería elegir.
 *
 * 🔑 **Y por eso no hace falta ninguna librería.** `intl-tel-input` son unos
 * 40-50 KB entre guion, hoja y banderas, sobre los 163 KB de JavaScript que ya
 * carga el checkout — y sobre todo, es JavaScript que se ejecuta y que hay que
 * hacer convivir con el filtro de dígitos, con el campo espejo del paso de
 * entrega y con la normalización del servidor. Esto es una imagen de fondo: una
 * bandera que el navegador cachea y ni una línea que se ejecute.
 *
 * ⚠️ **La bandera va en SVG, no en emoji.** El 🇪🇨 se ve como las letras «EC» en
 * Windows, que no trae banderas en su fuente de emoji. Dibujada se ve igual en
 * todas partes.
 *
 * ⚠️ **No se escribe el +593.** El campo se rellena en forma nacional
 * —`0991234567`, que es como se dicta un número aquí— y poner el prefijo
 * delante haría dudar de si hay que teclear el cero. La bandera dice el país sin
 * cambiar cómo se escribe.
 */

:root {
	/**
	 * 🔴 **CON ESCUDO, Y NO ES UN ADORNO.** La bandera civil de Ecuador —las tres
	 * franjas a secas— es EXACTAMENTE la de Colombia: amarillo la mitad, azul y
	 * rojo un cuarto cada uno. Lo único que las separa es el escudo del centro.
	 * La primera versión de este archivo iba sin él y era, literalmente, la
	 * bandera de Colombia en el checkout de una tienda ecuatoriana. Lo cazó el
	 * cliente mirando el campo.
	 *
	 * ⚠️ **Y no se dibuja a mano.** Se intentó y salió una aproximación: un
	 * escudo con un cóndor, un barco y el Chimborazo no se hace de memoria. El
	 * archivo viene de `flag-icons` (MIT), servido desde aquí y no desde un CDN
	 * por lo mismo que la fuente: quien abre esto está comprando. Su licencia
	 * está al lado, en `bandera-ec.LICENCIA.txt`.
	 *
	 * ⚠️ La proporción es 4:3, la que usan todos los juegos de banderas de
	 * interfaz. La oficial de Ecuador es 2:1, pero recortar el dibujo para llegar
	 * ahí deformaría el escudo — y el escudo es justo lo que hay que ver.
	 */
	--tel-bandera-ancho: 20px;
	--tel-bandera-alto: 15px;

	/* 🔑 **El mismo token que usa el campo para su relleno**, no un número
	   parecido. Así la bandera arranca exactamente donde arrancaría el texto, y
	   el día que el sitio cambie el relleno de sus campos, la bandera se mueve
	   con él. El respaldo de 17.5px es por si esta hoja llegara sin la del tema. */
	--tel-bandera-x: var( --field-pad-x, 17.5px );
	--tel-hueco: 10px;
}

/**
 * 🔴 **LOS TRES SELECTORES SON EL ARREGLO, NO UNA REDUNDANCIA.**
 *
 * `main.css` da el relleno de los campos con
 * `.woocommerce form .form-row input.input-text`, que pesa más que cualquier
 * regla corta. La primera versión de esta hoja usaba solo
 * `.input-text[type="tel"]`: se aplicaba, aparecía en la cascada, y perdía — la
 * bandera no salía y el texto se quedaba en su sitio de siempre. Se vio
 * midiendo el campo en producción, no leyendo el CSS.
 *
 * Así que se repite la misma anidación que usa el tema y se le añade el tipo,
 * que es lo que hace ganar. La versión corta se queda para los campos que no
 * estén dentro de un formulario de WooCommerce.
 *
 * ⚠️ Está anotado en la memoria del proyecto: una clase suelta pierde contra
 * `input[type="text"]`; aquí hay que anidar.
 */
.input-text[type="tel"],
.woocommerce form .form-row input.input-text[type="tel"],
.woocommerce-page form .form-row input.input-text[type="tel"] {
	padding-left: calc( var(--tel-bandera-x) + var(--tel-bandera-ancho) + var(--tel-hueco) );
	background-image: url( "bandera-ec.svg" );
	background-repeat: no-repeat;
	background-position: left var(--tel-bandera-x) center;
	background-size: var(--tel-bandera-ancho) var(--tel-bandera-alto);
}