/* ============================================================
   NA — Pagina «Solicitar factura» (/facturacion/)
   CMP · Septiembre 2026
   ============================================================

   QUE PIDIO EL USUARIO
   Que esta pagina luzca como la de Rastrear Ordenes. Y con una condicion
   explicita: SOLO CSS. No se envuelve nada, no se toca Elementor, no se cambia
   ni un nodo del marcado. Todo lo de aqui es apariencia.

   ESTE FICHERO ES UN DIALECTO DE `na-rastreo.css`, NO UN SISTEMA NUEVO
   Mismos tokens (`--e-global-color-*` con respaldo literal), misma tarjeta
   centrada, mismo radio 14px / 10px de campo, misma sombra doble, mismo foco
   verde con halo, mismo boton verde a ancho completo, mismo corte de 600px para
   pasar de una a dos columnas, mismo `prefers-reduced-motion`. Si algun dia se
   unifican, este es el fichero que sobra: los valores salieron de alli.

   QUE HAY DE VERDAD EN LA PAGINA (medido con playwright-cli en produccion)
   El formulario NO es de WooCommerce ni de Contact Form 7: es el widget `form`
   de Elementor PRO. Marcado real:

     form#form_factura.elementor-form
       > div.elementor-form-fields-wrapper.elementor-labels-above
           > div.elementor-field-group.elementor-field-group-<ID>.elementor-col-100
               > label.elementor-field-label
               > input.elementor-field.elementor-field-textual   (o select, o file)
           > div.elementor-field-group.elementor-field-type-submit.e-form__buttons
               > div.elementor-turnstile-field.cf-turnstile
               > button.elementor-button

   Campos, por su `<ID>` de Elementor (de ahi los nombres de clase raros, que son
   los que hay): `orden` (number), `email`, `RazonSocial`, `RFC`, `CFDI`
   (select), `Constancia` (upload) y `AceptaTerminos` (checkbox).

   DE DONDE CUELGA TODO — LAS DOS RAICES, Y POR QUE SON DOS
   1. `body.na-facturacion`: la clase la pone `includes/ux/na-facturacion.php`
      via `body_class`. NO se usa `page-id-47284` porque los IDs de este sitio no
      coinciden entre dev y produccion.
   2. `#form_factura`: hace falta ademas del body porque el PIE del sitio monta
      otro widget `form` de Elementor (la suscripcion), que tambien vive dentro
      de este mismo `<body>`. Cualquier regla del tipo
      `body.na-facturacion .elementor-field-textual` le llegaria tambien. El id
      del formulario es lo unico que separa uno de otro sin numeros a fuego.

   POR ESO NO HAY NI UN `!important` EN TODO EL FICHERO
   Lo mas especifico que pisa un campo aqui es
   `.elementor-47284 .elementor-element.elementor-element-7ec5c3b4
   .elementor-field-group .elementor-field:not(.elementor-select-wrapper)`
   (0-5-0, medido en la pagina). Un selector con el id del formulario es 1-x-0 y
   gana a cualquier cadena de clases por larga que sea. Es el motivo de anclar en
   `#form_factura` y no en la clase del widget: quita la batalla de especificidad
   de en medio antes de empezar.

   COLOR
   El unico relleno solido con texto blanco es `na28600a` (#28600A, 7,59:1).
   `vamtam_accent_1` (#8dbd2f) es color de ACENTO —bordes, focos, filetes—: con
   texto blanco encima da 2,3:1 y falla WCAG AA, asi que nunca va de fondo bajo
   texto.
   ============================================================ */


/* ------------------------------------------------------------
   Tokens locales
   ------------------------------------------------------------
   En la raiz del modulo y no en `:root`, para que vivan y mueran con la pagina y
   no puedan colisionar con los de otro modulo de na-core. Los nombres se
   mantienen con el prefijo `--nar-` de `na-rastreo.css` a proposito: son el
   MISMO sistema, y renombrarlos solo haria mas dificil ver que lo son. */
body.na-facturacion {
	--nar-marino: var( --e-global-color-vamtam_accent_2, #002842 );
	/* Verde de BOTON. `na28600a` es el token que usan de verdad todos los botones
	   del sitio; `vamtam_accent_1` se reserva para focos y bordes, donde no hay
	   texto encima. */
	--nar-verde: var( --e-global-color-na28600a, #28600a );
	--nar-verde-acento: var( --e-global-color-vamtam_accent_1, #8dbd2f );
	--nar-texto: var( --e-global-color-vamtam_accent_3, #59606d );
	--nar-borde: var( --e-global-color-vamtam_accent_7, #e6e6e6 );
	--nar-superficie: var( --e-global-color-vamtam_accent_8, #f5f5f5 );
	--nar-blanco: var( --e-global-color-vamtam_accent_5, #fff );

	--nar-radio: 14px;
	/* Los campos llevan un radio menor a proposito: anidar dos rectangulos con el
	   MISMO radio hace que el interior parezca desbordar al exterior. */
	--nar-radio-campo: 10px;

	/* Ancho de la tarjeta. 680px y no los 620px de rastreo: alli el formulario
	   tiene DOS campos; aqui hay siete mas un Turnstile de Cloudflare, cuyo
	   recuadro mide 300px fijos y no se puede encoger. Con 680px las dos columnas
	   quedan a ~310px cada una, que es lo minimo para que «Correo electronico» y
	   «Razon Social» no se partan en la etiqueta. Por debajo de eso la tarjeta
	   estrangula el formulario; por encima, las etiquetas quedan flotando lejos de
	   su campo. */
	--nar-ancho: 680px;
}


/* ------------------------------------------------------------
   La tarjeta
   ------------------------------------------------------------
   No se crea ningun envoltorio: la tarjeta ES el widget del formulario. Se
   selecciona por `:has( #form_factura )` —y no por su clase de elemento
   `.elementor-element-7ec5c3b4`— para no dejar un id de Elementor a fuego, que
   es lo que se rompe cuando el contenedor se recrea. `:has()` tiene soporte
   universal desde 2023; si un navegador viejo la ignorase, la regla se descarta
   entera y la pagina se ve como se ve hoy: sin tarjeta, no rota.

   El borde de 1px define la tarjeta; la sombra solo la separa del fondo, corta y
   muy suave. Una sombra grande sobre una tarjeta que ya tiene borde es lo que
   hace que un diseno se vea de 2014. */
body.na-facturacion .elementor-widget-form:has( #form_factura ) {
	box-sizing: border-box;
	max-width: min( var( --nar-ancho ), 100% );
	margin-inline: auto;
	padding: clamp( 1.5rem, 5vw, 2.75rem );

	background-color: var( --nar-blanco );
	border: 1px solid var( --nar-borde );
	border-radius: var( --nar-radio );
	box-shadow: 0 1px 2px rgba( 0, 40, 66, 0.04 ), 0 8px 24px -12px rgba( 0, 40, 66, 0.1 );
}


/* ------------------------------------------------------------
   Entradilla y aviso
   ------------------------------------------------------------
   La pagina no tiene `h1` (`na-page-header.php` retira la franja de titulo del
   tema en todo `post_type=page`). Lo que hay es un `h5` de entradilla antes del
   formulario y un `h6` de aviso despues. No se anade ningun titulo desde aqui
   —seria marcado, y el encargo es solo CSS—: se les da el ancho de la tarjeta y
   se centran, que es lo que hace que los tres bloques se lean como una pieza en
   vez de como tres anchos distintos apilados.

   OJO AL `.page-content`, NO ES DECORATIVO: en esta pagina hay NUEVE widgets
   `heading` (medido), y solo DOS son de la pagina; los otros siete estan en la
   cabecera y el pie, que se montan tambien con Elementor y comparten el mismo
   `<body>`. Sin ese ancestro, esta regla centraria y encogeria titulos del pie
   en toda la pagina. */
body.na-facturacion .page-content .elementor-widget-heading .elementor-heading-title {
	max-width: min( var( --nar-ancho ), 100% );
	margin-inline: auto;
	color: var( --nar-texto );
	font-size: 1rem;
	line-height: 1.6;
	text-align: center;
}

/* El aviso posterior («asegurate de que los datos sean correctos») es una nota
   al pie, no un mensaje al mismo nivel que la entradilla: baja un paso de tamano
   y se acota a los `h6`, que es como esta marcado. */
body.na-facturacion .page-content .elementor-widget-heading h6.elementor-heading-title {
	font-size: 0.875rem;
}


/* ------------------------------------------------------------
   El formulario: rejilla
   ------------------------------------------------------------
   Elementor maqueta esto con flex y `elementor-col-100` (todos los campos a
   ancho completo, uno por fila). Se sustituye por grid: en movil sigue siendo
   una columna, y a partir de 600px los cuatro campos cortos se emparejan. No se
   cambia ningun nodo, solo el modo de reparto.

   Movil primero. `gap` en lugar de los margenes de Elementor: con margenes, un
   campo oculto o vacio deja el hueco puesto. */
body.na-facturacion #form_factura .elementor-form-fields-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.125rem;
	margin: 0;
}

/* Los grupos de campo son ahora celdas: se les retira el ancho en porcentaje y
   los margenes que traen de fabrica. El `flex` interior alinea los campos por su
   BORDE INFERIOR, que es lo que los deja a la misma altura cuando una etiqueta
   ocupa una linea y la de al lado dos («RFC» frente a «Correo electronico»).
   Es preferible a un `min-height` en la etiqueta, que se rompe en cuanto cambia
   el texto. */
body.na-facturacion #form_factura .elementor-field-group {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;

	display: flex;
	flex-direction: column;
	/* `nowrap` NO ES DECORATIVO, ES EL ARREGLO DE UN FALLO REAL (medido):
	   Elementor declara `flex-wrap: wrap` en `.elementor-field-group`. Al pasar el
	   grupo a `flex-direction: column` dentro de una celda de grid, la celda le
	   impone una ALTURA (la de la fila) y un contenedor column+wrap con altura
	   limitada envuelve a una SEGUNDA COLUMNA: la etiqueta quedaba a la izquierda
	   y el campo a su derecha, desbordando la tarjeta. Se vio en captura antes de
	   corregirlo. Con `nowrap` la etiqueta y el campo vuelven a apilarse. */
	flex-wrap: nowrap;
	/* MEDIDO tambien: el grupo llega con `align-items: center`. En un flex de
	   columna eso encoge la etiqueta a su ancho de texto y la CENTRA sobre el
	   campo (se vio: «RFC» a 38px de ancho, centrado en una celda de 287px). Un
	   `text-align` no lo arregla, porque el que esta descolocado es el propio
	   item, no su texto. `stretch` devuelve etiqueta y campo al margen izquierdo
	   y es tambien lo que hace que el campo ocupe el ancho de la celda. */
	align-items: stretch;
	text-align: start;
}

@media ( min-width: 600px ) {
	body.na-facturacion #form_factura .elementor-form-fields-wrapper {
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
	}

	/* A ancho completo lo que no admite media columna: el desplegable de CFDI
	   (sus opciones son frases largas), el subidor de la constancia (el nombre
	   del fichero no cabe), la casilla de terminos (una linea de texto que se
	   partiria en cuatro) y el grupo del boton, que ademas contiene el Turnstile
	   de 300px fijos. Se nombran por su clase de campo —`-CFDI`, `-Constancia`,
	   `-AceptaTerminos`—, que sale del ID del campo en Elementor y es estable
	   mientras no se renombre el campo en el editor. */
	body.na-facturacion #form_factura .elementor-field-group-CFDI,
	body.na-facturacion #form_factura .elementor-field-group-Constancia,
	body.na-facturacion #form_factura .elementor-field-group-AceptaTerminos,
	body.na-facturacion #form_factura .elementor-field-type-submit {
		grid-column: 1 / -1;
	}
}


/* ------------------------------------------------------------
   Etiquetas y campos
   ------------------------------------------------------------ */
body.na-facturacion #form_factura .elementor-field-label {
	display: block;
	margin-bottom: 0.4rem;
	/* MEDIDO: el contenedor de Elementor centra el texto, y las etiquetas salian
	   centradas sobre su campo — que es lo que hace que un formulario parezca un
	   folleto. `start` y no `left` para que siga funcionando si el sitio se sirve
	   algun dia en un idioma RTL. */
	text-align: start;
	color: var( --nar-marino );
	/* Baja de los 16px que pone el kit: una etiqueta no debe competir con el valor
	   que escribe el usuario. La jerarquia la da el peso y la versalita suave, no
	   el tamano. */
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* El asterisco de obligatorio, en gris: es una marca, no un aviso. */
body.na-facturacion #form_factura .elementor-mark-required .elementor-field-label::after {
	color: var( --nar-texto );
}

/* Los campos de texto, el numero y el `<select>` comparten la clase
   `.elementor-field-textual`, asi que una sola regla los cubre.
   Lo que habia: borde de 2px negro, radio 12px y 14px de letra. El borde negro
   es lo que hacia que la pagina se leyera como un formulario de administracion;
   se cambia por el filete gris del sistema. */
body.na-facturacion #form_factura .elementor-field-textual {
	box-sizing: border-box;
	width: 100%;
	/* Alto por padding y no por `height`, para que el campo crezca si el usuario
	   tiene subido el zoom de texto. `min-height` a 0 desactiva los 40px de
	   Elementor, que ya no hacen falta. */
	min-height: 0;
	padding: 0.8rem 0.95rem;

	/* Empuja el campo al fondo de su celda para que los dos de la fila queden
	   alineados aunque sus etiquetas ocupen distinto numero de lineas. */
	margin-top: auto;

	color: var( --nar-marino );
	background-color: var( --nar-superficie );
	border: 1px solid var( --nar-borde );
	border-radius: var( --nar-radio-campo );

	/* 16px exactos, no menos: iOS Safari hace zoom automatico al enfocar un campo
	   con tipografia menor de 16px y ese zoom descoloca la pagina entera. Es la
	   razon de que este valor NO se baje aunque estilisticamente encajara — y el
	   defecto concreto que tenia la pagina, que servia 14px. */
	font-size: 1rem;
	line-height: 1.4;

	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

body.na-facturacion #form_factura .elementor-field-textual::placeholder {
	color: var( --nar-texto );
	opacity: 0.65;
}

/* El campo enfocado pasa a blanco y se rodea de un halo verde. El halo va con
   `box-shadow` y no con un `outline` engordado porque respeta el radio del
   campo; y NO se quita el outline del navegador sin sustituirlo, que es el error
   de accesibilidad clasico. */
body.na-facturacion #form_factura .elementor-field-textual:focus {
	background-color: var( --nar-blanco );
	border-color: var( --nar-verde-acento );
	box-shadow: 0 0 0 3px rgba( 141, 189, 47, 0.22 );
	outline: none;
}

/* El `<select>` de Elementor va dentro de `.elementor-select-wrapper`, que lleva
   ademas un `div.select-caret-down-wrapper` con la flechita en posicion
   absoluta. El envoltorio se deja transparente y sin borde: el aspecto de campo
   lo pone el `<select>` de dentro por la regla de arriba, y si se estilaran los
   dos se veria un doble recuadro. */
body.na-facturacion #form_factura .elementor-select-wrapper {
	background-color: transparent;
	border: 0;
	margin-top: auto;
}

/* Hueco a la derecha para la flechita, que va superpuesta y taparia el final de
   una opcion larga («Gastos en general», «Por definir»). */
body.na-facturacion #form_factura .elementor-select-wrapper select.elementor-field-textual {
	padding-right: 2.5rem;
}


/* ------------------------------------------------------------
   El subidor de la constancia fiscal
   ------------------------------------------------------------
   `input[type=file]` no admite `padding` fiable ni se puede reestilar el boton
   nativo de forma portable sin sustituir el marcado (y aqui el marcado no se
   toca). Se hace lo que si es seguro: darle la caja del sistema —fondo, borde y
   radio de campo— y dejar que el navegador pinte su propio boton dentro. */
body.na-facturacion #form_factura .elementor-upload-field {
	box-sizing: border-box;
	width: 100%;
	margin-top: auto;
	padding: 0.65rem 0.75rem;

	color: var( --nar-marino );
	background-color: var( --nar-superficie );
	border: 1px dashed var( --nar-borde );
	border-radius: var( --nar-radio-campo );

	font-size: 0.9375rem;
	line-height: 1.4;
	cursor: pointer;
}

body.na-facturacion #form_factura .elementor-upload-field:focus-visible {
	border-color: var( --nar-verde-acento );
	border-style: solid;
	box-shadow: 0 0 0 3px rgba( 141, 189, 47, 0.22 );
	outline: none;
}


/* ------------------------------------------------------------
   La casilla de terminos
   ------------------------------------------------------------
   Marcado: `.elementor-field-subgroup > span.elementor-field-option >
   input[type=checkbox] + label`. Se maqueta como fila con la casilla arriba
   (`align-items: flex-start`) para que un texto de dos lineas no descentre el
   cuadrito. */
body.na-facturacion #form_factura .elementor-field-type-acceptance .elementor-field-subgroup {
	display: flex;
	/* Mismo motivo que la etiqueta: sin esto la casilla y su texto quedaban
	   centrados en la tarjeta, desalineados de todos los campos. */
	justify-content: flex-start;
	text-align: start;
}

body.na-facturacion #form_factura .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	text-align: start;
}

body.na-facturacion #form_factura .elementor-acceptance-field {
	/* `flex: none` evita que el flex encoja el cuadrito a nada cuando el texto es
	   largo, que es como se queda en una raya de 2px. */
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.15rem 0 0;
	/* Tine el check nativo con el verde de marca: una linea en vez de replicar la
	   casilla con pseudoelementos, que es lo que rompe el estado indeterminado y
	   el modo de alto contraste. */
	accent-color: var( --nar-verde );
	cursor: pointer;
}

body.na-facturacion #form_factura .elementor-field-type-acceptance label {
	margin: 0;
	color: var( --nar-texto );
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}


/* ------------------------------------------------------------
   El Turnstile
   ------------------------------------------------------------
   Vive DENTRO del grupo del boton y mide 300px fijos: no se le cambia el tamano
   (romperia el widget de Cloudflare), solo se le da aire por debajo para que no
   quede pegado al boton. */
body.na-facturacion #form_factura .elementor-turnstile-field {
	margin-bottom: 0.9rem;
}


/* ------------------------------------------------------------
   El boton
   ------------------------------------------------------------
   Verde de accion, ancho completo. Ya venia en `na28600a`; lo que cambia es la
   forma: el radio de 100px lo hacia una pastilla, ajena al resto de la tarjeta.
   Pasa al radio de campo (10px) para que boton y campos se lean como una pieza,
   igual que en rastreo. */
body.na-facturacion #form_factura button.elementor-button {
	width: 100%;
	margin: 0;
	padding: 0.9rem 1.25rem;

	color: var( --nar-blanco );
	background-color: var( --nar-verde );
	border: 1px solid var( --nar-verde );
	border-radius: var( --nar-radio-campo );

	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.01em;

	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

/* `color-mix` oscurece el verde sin fijar un segundo hexadecimal a mano: si el
   kit cambia el verde, el hover se recalcula solo. El respaldo con `filter` va
   aislado en un `@supports not` para que los navegadores que entienden las dos
   se queden con `color-mix`. */
body.na-facturacion #form_factura button.elementor-button:hover,
body.na-facturacion #form_factura button.elementor-button:focus-visible {
	background-color: color-mix( in srgb, var( --nar-verde ) 88%, #000 );
	border-color: color-mix( in srgb, var( --nar-verde ) 88%, #000 );
	box-shadow: 0 4px 12px -4px rgba( 141, 189, 47, 0.5 );
}

@supports not ( background-color: color-mix( in srgb, red 50%, #000 ) ) {
	body.na-facturacion #form_factura button.elementor-button:hover,
	body.na-facturacion #form_factura button.elementor-button:focus-visible {
		filter: brightness( 0.88 );
	}
}

body.na-facturacion #form_factura button.elementor-button:focus-visible {
	outline: 2px solid var( --nar-marino );
	outline-offset: 2px;
}

/* Hundimiento de 1px al pulsar: el unico feedback tactil que se puede dar en la
   web, y el que hace que un boton se sienta «solido». */
body.na-facturacion #form_factura button.elementor-button:active {
	transform: translateY( 1px );
	box-shadow: none;
}


/* ------------------------------------------------------------
   Mensajes de validacion y de envio
   ------------------------------------------------------------
   Elementor emite `.elementor-message-danger` / `.elementor-message-success`
   tras enviar, y `.elementor-field-group.elementor-error` en el campo que falla.
   Mismo lenguaje que los avisos de rastreo: barra lateral de color, sin icono y
   sin un segundo fondo.

   NO VERIFICADO EN NAVEGADOR: para ver estos estados hay que ENVIAR el
   formulario, y eso generaria una solicitud de factura real. El marcado sale de
   las clases que emite Elementor Pro, no de una captura. Es la parte de esta
   hoja que queda por confirmar; el formulario en reposo si se ha medido. */
body.na-facturacion #form_factura .elementor-message {
	margin: 0.75rem 0 0;
	padding: 0.9rem 1.1rem;

	background-color: var( --nar-superficie );
	border-left: 3px solid var( --nar-verde );
	border-radius: 0 var( --nar-radio-campo ) var( --nar-radio-campo ) 0;

	color: var( --nar-marino );
	font-size: 0.9375rem;
}

body.na-facturacion #form_factura .elementor-message-danger {
	border-left-color: #c1272d;
}

body.na-facturacion #form_factura .elementor-error .elementor-field-textual {
	border-color: #c1272d;
}


/* ------------------------------------------------------------
   Movimiento reducido
   ------------------------------------------------------------
   Quien lo haya pedido en su sistema no recibe ni transiciones ni el
   hundimiento del boton. Es una preferencia declarada del usuario, no una
   opcion. */
@media ( prefers-reduced-motion: reduce ) {
	body.na-facturacion #form_factura .elementor-field-textual,
	body.na-facturacion #form_factura button.elementor-button {
		transition: none;
	}

	body.na-facturacion #form_factura button.elementor-button:active {
		transform: none;
	}
}