/* ==========================================================================
   Fajardos Cotizaciones — formulario
   Los colores salen de las variables del tema, con reserva propia por si
   el formulario acaba en otro tema.
   ========================================================================== */

.fc-form { margin: 0 0 8px; }

.fc-campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
}
.fc-campo--ancho { grid-column: 1 / -1; }

@media (max-width: 640px) {
	.fc-campos { grid-template-columns: 1fr; }
}

.fc-label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--fj-primary, #1c2c4c);
}

.fc-req { color: var(--fj-accent, #8b1e2d); }

.fc-control {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--fj-text, #2b2b2b);
	background: var(--fj-content-bg, #fff);
	border: 1px solid var(--fj-border, #dcdfe4);
	border-radius: var(--fj-btn-radius, 3px);
	transition: border-color .16s ease, box-shadow .16s ease;
}
.fc-control:focus {
	outline: none;
	border-color: var(--fj-primary, #1c2c4c);
	box-shadow: 0 0 0 3px rgba(28, 44, 76, .12);
}
.fc-control--file { padding: 9px 11px; background: var(--fj-body-bg, #f4f4f4); }

textarea.fc-control { resize: vertical; min-height: 120px; }

.fc-ayuda {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--fj-muted, #6b7280);
}

/* Opciones ---------------------------------------------------------------- */

.fc-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
@media (max-width: 640px) { .fc-opciones { grid-template-columns: 1fr; } }

.fc-opcion {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14.5px;
	line-height: 1.45;
	cursor: pointer;
}
.fc-opcion input { margin: 3px 0 0; flex: 0 0 auto; }
.fc-opcion--consent {
	padding: 14px 16px;
	background: var(--fj-body-bg, #f4f4f4);
	border-left: 3px solid var(--fj-accent, #8b1e2d);
	font-size: 14px;
}

/* La trampa antispam. Fuera de la pantalla en vez de display:none, porque
   algunos bots saltan lo que está oculto con display. */
.fc-trampa {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

/* Envío ------------------------------------------------------------------- */

.fc-envio {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.fc-boton {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 26px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--fj-primary, #1c2c4c);
	border: 0;
	border-radius: var(--fj-btn-radius, 3px);
	cursor: pointer;
	transition: background .16s ease, opacity .16s ease;
}
.fc-boton:hover { background: var(--fj-primary-dark, #121d33); }
.fc-boton:focus-visible { outline: 3px solid var(--fj-accent, #8b1e2d); outline-offset: 2px; }
.fc-boton[disabled] { opacity: .6; cursor: progress; }

.fc-boton::after {
	content: "";
	width: 15px; height: 15px;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	display: none;
	animation: fc-gira .7s linear infinite;
}
.fc-boton.fc-enviando::after { display: block; }

@keyframes fc-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fc-boton::after { animation: none; } }

.fc-obligatorios { margin: 0; font-size: 12.5px; color: var(--fj-muted, #6b7280); }

/* Avisos ------------------------------------------------------------------ */

.fc-aviso {
	padding: 18px 20px;
	margin: 0 0 22px;
	border-radius: var(--fj-card-radius, 4px);
	font-size: 14.5px;
	line-height: 1.6;
}
.fc-aviso ul { margin: 8px 0 0; padding-left: 20px; }
.fc-aviso p { margin: 0; }

.fc-aviso--error {
	background: #fdf0f1;
	border-left: 3px solid var(--fj-accent, #8b1e2d);
	color: #6d1622;
}
.fc-aviso--ok {
	background: #eef5f0;
	border-left: 3px solid var(--fj-success, #4a7c59);
	color: #24402e;
}
.fc-aviso--ok h3 { margin: 0 0 8px; font-size: var(--fj-fs-h4, 20px); color: inherit; }
.fc-aviso--ok h3::after { content: none; }

.fc-error {
	display: none;
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--fj-accent, #8b1e2d);
}
.fc-campo--mal .fc-error { display: block; }
.fc-campo--mal .fc-control { border-color: var(--fj-accent, #8b1e2d); }

.fc-resultado:empty { display: none; }
.fc-resultado { margin-top: 20px; }

/* Pista de obligatoriedad -------------------------------------------------- */
/* Los campos obligatorios llevan un velo del rojo de marca al 5 %; los
   opcionales, uno azul. El asterisco sigue siendo la señal accesible: el
   color solo la refuerza, nunca la sustituye. */

.fc-form {
	--fc-req-bg: rgba(139, 30, 45, .05);
	--fc-req-bd: rgba(139, 30, 45, .28);
	--fc-opt-bg: rgba(31, 92, 168, .05);
	--fc-opt-bd: rgba(31, 92, 168, .28);
}

.fc-control:required { background: var(--fc-req-bg); border-color: var(--fc-req-bd); }
.fc-control:optional { background: var(--fc-opt-bg); border-color: var(--fc-opt-bd); }

/* El adjunto conserva su fondo gris; solo se le tiñe el borde. */
.fc-control--file:optional { background: var(--fj-body-bg, #f4f4f4); border-color: var(--fc-opt-bd); }

/* Las casillas no son .fc-control, así que se tiñe su contenedor. */
.fc-campo--checkboxes .fc-opciones {
	padding: 12px 14px;
	background: var(--fc-opt-bg);
	border: 1px solid var(--fc-opt-bd);
	border-radius: var(--fj-btn-radius, 3px);
}
.fc-opcion--consent { background: var(--fc-req-bg); }

/* El foco vuelve a mandar sobre el borde teñido. */
.fc-control:focus { border-color: var(--fj-primary, #1c2c4c); }

/* Y el error manda sobre todo lo anterior. El velo va al 14 %, no al 5 %:
   con el mismo tono que la pista de obligatorio, un campo en error no se
   distinguiría de uno simplemente obligatorio. */
.fc-campo--mal .fc-control {
	background: rgba(139, 30, 45, .14);
	border-color: var(--fj-accent, #8b1e2d);
	box-shadow: inset 3px 0 0 var(--fj-accent, #8b1e2d);
}

/* Quien pide contraste alto no quiere velos de color. */
@media (prefers-contrast: more) {
	.fc-control:required,
	.fc-control:optional,
	.fc-campo--checkboxes .fc-opciones,
	.fc-opcion--consent { background: var(--fj-content-bg, #fff); }
}

/* ===================================================================
   Movimiento
   Criterio: skill «movimiento-fajardos».
   El propósito aquí es indicación de estado y evitar un salto brusco:
   un aviso que aparece de golpe se lee como que algo se rompió.
   =================================================================== */

.fc-form { --fc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* El botón responde al presionar, no al soltar. */
.fc-boton { transition: background-color .16s ease, transform .1s var(--fc-ease-out); }
.fc-boton:active:not([disabled]) { transform: scale(.97); }

/* El aviso entra desde arriba, que es de donde viene: se inserta como
   primer hijo del formulario. Transición y no keyframes, porque se puede
   disparar dos veces seguidas y debe reapuntar desde el valor actual. */
.fc-aviso {
	transition: opacity .2s var(--fc-ease-out), transform .2s var(--fc-ease-out);
}
@starting-style {
	.fc-aviso { opacity: 0; transform: translateY(-6px); }
}

/* El error de campo aparece con el mismo criterio. allow-discrete permite
   animar aunque el cambio sea de display:none a display:block. */
.fc-campo--mal .fc-error {
	transition: opacity .16s var(--fc-ease-out), transform .16s var(--fc-ease-out);
}
@starting-style {
	.fc-campo--mal .fc-error { opacity: 0; transform: translateY(-3px); }
}

/* El velo del campo en error se atenúa en vez de aparecer de golpe. */
.fc-control { transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }

@media (prefers-reduced-motion: reduce) {
	/* Se conserva el fundido, se quita el desplazamiento. */
	.fc-boton:active:not([disabled]) { transform: none; }
	@starting-style {
		.fc-aviso { transform: none; }
		.fc-campo--mal .fc-error { transform: none; }
	}
}