/* Orbitalia — etiqueta flotante en los campos de formulario.
   El efecto es automatico: assets/js/floating-labels.js marca cada
   .elementor-field-group con .orb-float y calcula las medidas a partir del
   propio campo (tipografia, padding, borde), asi el efecto respeta siempre el
   Kit de Elementor. Todo se puede ajustar con las variables --orb-float-*.

   Opt-out por campo: anadir la clase CSS `orb-no-float` al campo en Elementor.
   Opt-out global:    add_filter( 'orbitalia/features', fn($f) => $f + array('floating_labels'=>false) ); */

.orb-float {
	position: relative;
}

/* La etiqueta flotante: o el <label> real de Elementor, o un ::before con el
   texto del placeholder cuando el formulario no muestra etiquetas. */
.orb-float > .elementor-field-label,
.orb-float.orb-float--pseudo::before {
	position: absolute;
	inset-inline-start: var(--orb-float-inset, 1em);
	top: var(--orb-float-top, 50%);
	transform: translateY(-50%);
	max-width: calc(100% - var(--orb-float-inset, 1em) - 0.5em);
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: var(--orb-float-size, 1em);
	line-height: 1;
	color: var(--orb-float-color, currentColor);
	opacity: var(--orb-float-opacity, 0.6);
	pointer-events: none;
	z-index: 1;
	transition:
		top var(--orb-float-speed, 0.18s) ease,
		font-size var(--orb-float-speed, 0.18s) ease,
		transform var(--orb-float-speed, 0.18s) ease,
		color var(--orb-float-speed, 0.18s) ease,
		opacity var(--orb-float-speed, 0.18s) ease;
}

.orb-float.orb-float--pseudo::before {
	content: attr(data-orb-label);
}

/* En un textarea la etiqueta descansa arriba, no centrada. */
.orb-float--textarea > .elementor-field-label,
.orb-float--textarea.orb-float--pseudo::before {
	transform: none;
}

/* La etiqueta sustituye visualmente al placeholder (el atributo sigue ahi:
   es lo que permite detectar "campo vacio" con :placeholder-shown). */
.orb-float input::placeholder,
.orb-float textarea::placeholder {
	color: transparent !important;
	opacity: 0 !important;
}

.orb-float input,
.orb-float textarea {
	transition:
		padding var(--orb-float-speed, 0.18s) ease,
		border-color var(--orb-float-speed, 0.18s) ease,
		box-shadow var(--orb-float-speed, 0.18s) ease;
}

.orb-float textarea {
	display: block;
}

/* --- Estado activo: hay foco o el campo tiene contenido ------------------- */

.orb-float:focus-within > .elementor-field-label,
.orb-float.is-filled > .elementor-field-label,
.orb-float:has(input:not(:placeholder-shown)) > .elementor-field-label,
.orb-float:has(textarea:not(:placeholder-shown)) > .elementor-field-label,
.orb-float.orb-float--pseudo:focus-within::before,
.orb-float.orb-float--pseudo.is-filled::before,
.orb-float.orb-float--pseudo:has(input:not(:placeholder-shown))::before,
.orb-float.orb-float--pseudo:has(textarea:not(:placeholder-shown))::before {
	top: var(--orb-float-top-active, 0.75em);
	transform: none;
	font-size: var(--orb-float-size-active, 0.75em);
	color: var(--orb-float-color-active, var(--orb-float-color, currentColor));
	opacity: var(--orb-float-opacity-active, 1);
}

.orb-float:focus-within input,
.orb-float.is-filled input,
.orb-float:has(input:not(:placeholder-shown)) input,
.orb-float:focus-within textarea,
.orb-float.is-filled textarea,
.orb-float:has(textarea:not(:placeholder-shown)) textarea {
	padding-top: var(--orb-float-pad-top, 1.7em);
	padding-bottom: var(--orb-float-pad-bottom, 0.45em);
}

/* Respetar la preferencia de movimiento reducido. */
@media ( prefers-reduced-motion: reduce ) {
	.orb-float > .elementor-field-label,
	.orb-float.orb-float--pseudo::before,
	.orb-float input,
	.orb-float textarea {
		transition: none;
	}
}