/*
 * zenth-support-form — SOLO mecánica/estructura (rejilla de filas, reset de
 * controles nativos, honeypot fuera de pantalla, ganchos de estado). Sin
 * colores de marca, tipografías, tamaños ni espaciados de página: esa piel
 * vive en el tema hijo (arrayanes-child/seeds/style-header.css, bloque
 * "SE PARTE DONANTES", selectores anidados bajo .arr-dapo). Ver la tabla de
 * contrato en specs/donantes/SPEC.md §3.3 y §6.3 para el reparto exacto.
 */

.zenth-sform,
.zenth-sform *,
.zenth-sform *::before,
.zenth-sform *::after {
	box-sizing: border-box;
}

/* Reset de tipografía/caja heredada en los controles nativos: la piel del
   tema pone tamaño, familia y color reales encima de esto. */
.zenth-sform input,
.zenth-sform select,
.zenth-sform textarea,
.zenth-sform button {
	font: inherit;
	color: inherit;
	margin: 0;
}

/* Filas: dos columnas iguales por defecto. El tema puede reescribir
   grid-template-columns con las proporciones/gaps exactos del mockup
   mediante un selector más específico (anidado bajo .arr-dapo). */
.zenth-sform__row {
	display: grid;
}

.zenth-sform__row--top,
.zenth-sform__row--contact {
	grid-template-columns: 1fr 1fr;
}

/* Grupo teléfono: el selector de indicativo ocupa solo lo que necesita su
   contenido, el input de teléfono se reparte el resto. Mismo patrón que las
   reglas de oro de Elementor programático para hijos flex (flex:0 0 auto en
   el elemento de ancho fijo, el resto libre). */
.zenth-sform__phone {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.zenth-sform__phone .zenth-sform__field--code {
	flex: 0 0 auto;
}

.zenth-sform__phone .zenth-sform__field--outline {
	flex: 1 1 auto;
	min-width: 0;
}

/* Wrapper de campo: contexto de posicionamiento para que la piel del tema
   pueda colgar iconos/chevrones con ::after sin marcado adicional. Es una
   <p> (ver el contrato de marcado): el reset de Hello Elementor pone
   p{margin-block-end:.9rem} SOLO en <p>, así que el reset de "margin:0" de
   más arriba (que cubre input/select/textarea/button) no lo alcanzaba y
   cada fila salía ~14px más alta de lo debido (~35px de separación entre
   filas en vez de los 20px de la piel). */
.zenth-sform__field {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	margin: 0;
	transition: box-shadow 150ms ease, border-color 150ms ease;
}

/* Reset de controles nativos: sin borde/fondo propios (la piel del tema los
   pone), sin flecha nativa del <select> (appearance:none — el chevron lo
   dibuja el tema con una máscara CSS), sin redimensionado del textarea. */
.zenth-sform__input,
.zenth-sform__select,
.zenth-sform__textarea {
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.zenth-sform__code {
	width: auto;
	border: 0;
	outline: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.zenth-sform__select::-ms-expand,
.zenth-sform__code::-ms-expand {
	display: none;
}

.zenth-sform__textarea {
	resize: none;
}

/*
 * El reset nativo de Hello Elementor (hello-elementor/assets/css/reset.css)
 * pone border/border-radius/padding/transition directamente en
 * input[type=text|email|tel|...]/select/textarea. Contra un input real, ese
 * selector (elemento+atributo, especificidad 0,1,1) empata o vence a una
 * sola clase nuestra (0,1,0); contra select/textarea (elemento solo, 0,0,1)
 * ya ganábamos por especificidad, pero nunca reseteábamos padding/radio, así
 * que quedaban puestos igual. Resultado: una "caja doble" (el borde/relleno
 * de Hello dentro de la caja ya vestida por .zenth-sform__field). Un
 * selector ancestro+tipo+clase (0,2,1) anula TODA propiedad de caja de
 * Hello en los cuatro controles, sin !important.
 */
.zenth-sform input.zenth-sform__input,
.zenth-sform select.zenth-sform__select,
.zenth-sform select.zenth-sform__code,
.zenth-sform textarea.zenth-sform__textarea {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	transition: none;
}

/* Honeypot: fuera de pantalla pero presente y enfocable-saltable (no
   display:none, para que un lector de pantalla que ignore aria-hidden en el
   contenedor no lo anuncie igualmente; tabindex="-1" en el input ya lo saca
   del orden de tabulación). */
.zenth-sform__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Fallback de accesibilidad: si el tema activo no trae ya esta clase
   utilitaria (WordPress core la incluye normalmente en el theme, pero este
   widget no debe depender de ello), la definimos aquí también, con el mismo
   patrón "clip" ya usado en el honeypot de arriba. */
.zenth-sform .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

.zenth-sform__legal {
	position: relative;
}

/* Botón: sin relleno/borde propios (piel del tema); solo el estado
   "enviando" es mecánica — deshabilitado y sin cursor de interacción. El
   color/opacidad de ese estado los pone el tema (clase .is-sending en el
   <form>). */
.zenth-sform__submit {
	border: 0;
	cursor: pointer;
	background: transparent;
}

.zenth-sform__submit:disabled {
	cursor: not-allowed;
}

/* Región de estado: colapsada mientras no tiene mensaje, para no reservar
   espacio/borde antes de que exista un resultado que anunciar. */
.zenth-sform__status:empty {
	display: none;
}

/*
 * Campo de archivo (dropzone, extensión "Beneficiario" — ver
 * specs/beneficiario/SPEC.md §4). SOLO mecánica aquí también: el color, el
 * borde punteado, el padding y las dimensiones reales de esta zona son
 * PIEL de página (bloque "SE PARTE BENEFICIARIO" de
 * seeds/style-header.css, fuera del alcance de este widget) — lo de aquí
 * es layout estructural y los ganchos de estado (is-dragging/has-file/
 * is-invalid) que esa piel consume.
 */
.zenth-sform__field--file {
	display: flex;
	flex-direction: column;
}

/*
 * El <label for="…"> asociado es la zona clicable/de arrastre completa
 * (clic en cualquier parte abre el selector nativo por la asociación
 * for/id con el <input> — ver el marcado en class-zenth-support-form.php).
 * Estructura en columna centrada para acomodar texto + ayuda + nombre de
 * archivo; el resto (colores, borde punteado, radios) los define la piel.
 */
.zenth-sform__file-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	transition: box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.zenth-sform__file-name {
	display: block;
}

/* Colapsado mientras no hay archivo elegido: no reserva espacio de más
   (mismo criterio que .zenth-sform__status:empty de arriba). */
.zenth-sform__file-name:empty {
	display: none;
}

/*
 * El <input type="file"> real NUNCA lleva display:none (lo sacaría por
 * completo del árbol de accesibilidad y de la navegación por teclado):
 * se oculta VISUALMENTE con la misma técnica "clip" que ya usa el
 * honeypot/.screen-reader-text de más arriba en este mismo archivo, así
 * que sigue siendo enfocable y anunciado por lectores de pantalla. El
 * <label> asociado (tabindex="0" en el marcado) es la superficie visible
 * de interacción.
 */
.zenth-sform__file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Anillo de foco mínimo por defecto (accesibilidad de base: nunca 0),
   tanto si el foco real está en el <label> (clic/Tab) como si un
   navegador antiguo llegara a posarlo en el propio <input> oculto. El
   grosor/color/offset "de marca" del anillo los redefine la piel del
   tema con un selector más específico. */
.zenth-sform__file-drop:focus-visible,
.zenth-sform__file-input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}