/**
 * SemiConecta — Formularios públicos (avisos y solicitudes de alta).
 *
 * Se usan en dos sitios muy distintos: encajado en la columna lateral
 * estrecha de la ficha de socio, y a ancho completo en una página propia.
 * Por eso todo el layout es fluido y no asume ancho mínimo.
 */

/* Honeypot: invisible para personas, presente para bots.
   No se usa display:none porque algunos bots lo detectan. */
.sc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sc-form-wrap { margin: 0; }

/* --- Plegable --- */
.sc-form-details {
	border-top: 1px solid var(--gray-200);
	padding-top: 12px;
}
.sc-form-wrap--alta .sc-form-details { border-top: 0; padding-top: 0; }

.sc-form-summary {
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}
.sc-form-summary::-webkit-details-marker { display: none; }
.sc-form-summary::before {
	content: "+";
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--yellow);
	color: var(--ink);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
}
.sc-form-details[open] .sc-form-summary::before { content: "−"; }
.sc-form-summary:hover { color: var(--yellow-dark); }
.sc-form-summary:focus-visible {
	outline: 3px solid var(--yellow);
	outline-offset: 3px;
}

.sc-form-titulo {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	margin: 0 0 8px;
}

/* --- Formulario --- */
.sc-form { margin-top: 14px; display: grid; gap: 14px; }

.sc-form-intro {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--gray-600);
}
.sc-form-wrap--alta .sc-form-intro { font-size: 15px; max-width: 65ch; }

.sc-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
}

.sc-form-field { display: block; }
.sc-form-field > span {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--gray-600);
	margin-bottom: 5px;
}
.sc-form-field em {
	font-style: normal;
	color: var(--danger);
}

.sc-form-field input,
.sc-form-field textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--gray-300);
	border-radius: var(--radius-xs);
	padding: 10px 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sc-form-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

.sc-form-field input:focus,
.sc-form-field textarea:focus {
	outline: none;
	border-color: var(--ink-strong);
	box-shadow: 0 0 0 3px var(--yellow-soft);
}
.sc-form-field input::placeholder,
.sc-form-field textarea::placeholder { color: var(--gray-400); }

/* --- Consentimiento --- */
.sc-form-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray-700);
}
.sc-form-consent input {
	margin-top: 3px;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	accent-color: var(--ink-strong);
}
.sc-form-consent a { color: var(--ink); text-decoration: underline; }
.sc-form-consent em { font-style: normal; color: #B3261E; font-weight: 700; }

/* Bloque de consentimiento del módulo Legal: la casilla más el resumen de
   quién trata los datos y para qué. Sirve igual en los formularios públicos
   que en el registro, por eso vive aquí y no en auth.css. */
.sc-legal-consent {
	display: grid;
	gap: 8px;
	padding: 14px 16px;
	border: 1px solid var(--gray-200, #E4E4E8);
	border-left: 3px solid var(--yellow);
	border-radius: 6px;
	background: var(--gray-50, #FAFAFB);
}
.sc-legal-nota {
	margin: 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--gray-600, #6A6A75);
}

/* Sobre fondo oscuro (el registro va sobre negro en algunas páginas). */
.sc-auth-form .sc-legal-consent,
.site-dark .sc-legal-consent {
	border-color: rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .04);
}
.sc-auth-form .sc-legal-nota,
.site-dark .sc-legal-nota { color: rgba(255, 255, 255, .62); }

.sc-form button[type="submit"] { justify-self: start; }

/* --- Resultado del envío --- */
.sc-form-aviso {
	margin: 0 0 14px;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	line-height: 1.5;
	border-left: 4px solid;
}
.sc-form-aviso--ok {
	background: #DDF0E7;
	border-color: #267153;
	color: #14503A;
}
.sc-form-aviso--error {
	background: #F7DFE3;
	border-color: var(--danger);
	color: #711623;
}

/* --- Página de alta a ancho completo --- */
.sc-form-wrap--alta {
	background: var(--gray-50);
	border: 1px solid var(--gray-200);
	border-top: 4px solid var(--yellow);
	border-radius: var(--radius-md);
	padding: 28px 30px;
}

@media (max-width: 640px) {
	.sc-form-wrap--alta { padding: 20px 18px; }
	.sc-form-row { grid-template-columns: 1fr; }
	.sc-form button[type="submit"] { justify-self: stretch; width: 100%; }
}