/* =========================================================
   MLA Guardia SAE — sae-form.css
   Formulario independiente de alerta de emergencia.
   ========================================================= */

.mla-sae {
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 32px;
}
.mla-sae__head { text-align: center; margin-bottom: 32px; }
.mla-sae__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(231,76,60,0.14);
	border: 1px solid rgba(231,76,60,0.4);
	color: #E74C3C;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 1.5px;
	padding: 8px 18px;
	border-radius: 100px;
	margin-bottom: 18px;
}
.mla-sae__title {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	color: var(--mla-text-strong, #fff);
	margin: 0;
}
.mla-sae__subtitle {
	font-size: 15.5px;
	color: var(--mla-text-muted, #AEB4D9);
	margin: 14px 0 0;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.mla-sae__form {
	border: 1px solid rgba(231,76,60,0.3);
	border-radius: 10px;
	padding: 32px;
	background: rgba(231,76,60,0.05);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.mla-sae__row { display: flex; flex-direction: column; gap: 8px; }
.mla-sae__row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mla-sae__field { display: flex; flex-direction: column; gap: 8px; }
.mla-sae__row label, .mla-sae__field label {
	font-size: 13px;
	color: #9CA3CE;
	font-weight: 600;
}
.mla-sae__field input,
.mla-sae__field select,
.mla-sae__row input,
.mla-sae__row select,
.mla-sae__row textarea {
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 4px;
	padding: 12px 14px;
	font-size: 15px;
	font-family: inherit;
	background: rgba(6,8,34,0.5);
	color: #ECEEFA;
}
.mla-sae__row textarea { resize: vertical; }
.mla-sae__field input:focus,
.mla-sae__field select:focus,
.mla-sae__row input:focus,
.mla-sae__row select:focus,
.mla-sae__row textarea:focus {
	outline: 2px solid #E74C3C;
	outline-offset: 1px;
}
.mla-sae-hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.mla-sae__error { font-size: 13.5px; color: #FF8A80; }

.mla-btn--sae {
	background: #E74C3C;
	color: #fff;
	align-self: flex-start;
	padding: 15px 32px;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.mla-btn--sae:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(231,76,60,0.35); filter: brightness(1.05); }
.mla-btn--sae:disabled { opacity: .65; cursor: default; }

.mla-sae__success {
	border: 1px solid rgba(69,192,110,0.4);
	background: rgba(69,192,110,0.08);
	border-radius: 10px;
	padding: 32px;
	text-align: center;
}
.mla-sae__success h3 { color: #45C06E; font-size: 20px; margin: 0 0 12px; }
.mla-sae__success p { color: #C7CBEA; font-size: 14.5px; margin: 0 0 16px; line-height: 1.6; }

@media (max-width: 640px) {
	.mla-sae { padding: 36px 20px; }
	.mla-sae__row--2col { grid-template-columns: 1fr; }
	.mla-sae__form { padding: 22px; }
}