/*
 * NODO · estilos de los formularios del plugin (clases nodo-form / nodo-campo).
 * El marcado es del plugin; acá solo se presenta. Campos de 48 px, etiquetas persistentes,
 * borde con contraste ≥ 3:1, foco con anillo, estados de error, carga y éxito.
 */

.nodo-form { max-width: 720px; }
.nodo-form__form { display: flex; flex-direction: column; gap: 28px; }
.nodo-form__grupo { display: flex; flex-direction: column; gap: 22px; min-width: 0; margin: 0; padding: 0; border: 0; }
.nodo-form__proyecto {
	padding: 0 0 4px;
	font: var(--fw-black) var(--text-h3)/var(--lh-snug) var(--font-display);
	letter-spacing: -0.01em;
	color: var(--text-strong);
}
.nodo-form__nota { font-size: 14px; color: var(--text-subtle); }

/* ── Campo ─────────────────────────────────────────────────────────── */
.nodo-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.nodo-campo__label {
	display: block;
	padding: 0;
	font: var(--fw-semibold) 15px/1.35 var(--font-body);
	color: var(--text-strong);
}
.nodo-campo__obligatorio { margin-left: 3px; color: var(--rosa-600); }
.nodo-campo__opcional { margin-left: 6px; font-weight: var(--fw-regular); font-size: 14px; color: var(--text-subtle); }
.nodo-campo__ayuda { font-size: 14px; line-height: 1.45; color: var(--text-subtle); }

.nodo-campo input[type="text"],
.nodo-campo input[type="email"],
.nodo-campo input[type="tel"],
.nodo-campo select,
.nodo-campo textarea {
	width: 100%;
	min-height: var(--control-h-field);
	padding: 0 14px;
	border: 1.5px solid var(--border-input);
	border-radius: var(--radius-md);
	background: var(--neutral-0);
	color: var(--text-strong);
	font: var(--fw-regular) 16px/1.4 var(--font-body); /* 16px evita el zoom automático en iOS */
	transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.nodo-campo textarea { min-height: 128px; padding: 12px 14px; resize: vertical; }
.nodo-campo select {
	appearance: none;
	padding-right: 44px;
	background: var(--neutral-0) no-repeat right 14px center / 18px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2330264E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	cursor: pointer;
}
.nodo-campo input::placeholder,
.nodo-campo textarea::placeholder { color: var(--neutral-600); }
.nodo-campo input:hover,
.nodo-campo select:hover,
.nodo-campo textarea:hover { border-color: var(--nodo-tinta); }
.nodo-campo input:focus-visible,
.nodo-campo select:focus-visible,
.nodo-campo textarea:focus-visible,
.nodo-campo input:focus,
.nodo-campo select:focus,
.nodo-campo textarea:focus { outline: none; border-color: var(--rosa-500); box-shadow: var(--focus-ring); }

/* Botones de opción: nativos, más grandes y con el color de acción. */
.nodo-campo--radio .nodo-campo__label { margin-bottom: 4px; }
.nodo-campo__opciones { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.nodo-campo__opcion {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 16px 0 12px;
	border: 1.5px solid var(--border-input);
	border-radius: var(--radius-pill);
	background: var(--neutral-0);
	cursor: pointer;
}
.nodo-campo__opcion:hover { border-color: var(--nodo-tinta); }
.nodo-campo__opcion:has(input:checked) { border-color: var(--action-primary); background: var(--rosa-50); }
.nodo-campo__opcion input { width: 20px; height: 20px; margin: 0; accent-color: var(--action-primary); cursor: pointer; }
.nodo-campo__opcion input:focus-visible { box-shadow: var(--focus-ring); border-radius: 50%; }
.nodo-campo__opcion label { font-size: 15px; color: var(--text-body); cursor: pointer; }

/* Casilla (consentimiento de privacidad, cuando exista el texto: D5) */
.nodo-campo--casilla { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.nodo-campo--casilla input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--action-primary); flex: none; }
.nodo-campo--casilla label { flex: 1; font-size: 15px; }
.nodo-campo--casilla .nodo-campo__error { flex-basis: 100%; }

/* ── Error ─────────────────────────────────────────────────────────── */
.nodo-campo--error input,
.nodo-campo--error select,
.nodo-campo--error textarea,
.nodo-campo--error .nodo-campo__opcion { border-color: var(--error-500); }
.nodo-campo__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font: var(--fw-medium) 14px/1.4 var(--font-body);
	color: var(--error-700);
}
.nodo-campo__error::before,
.nodo-form__errores-titulo::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nodo-form__errores {
	margin-bottom: 28px;
	padding: 18px 20px;
	border: 1.5px solid var(--error-500);
	border-radius: var(--radius-md);
	background: var(--error-50);
	color: var(--error-700);
}
.nodo-form__errores:focus { outline: none; box-shadow: var(--focus-ring); }
.nodo-form__errores-titulo { display: flex; gap: 8px; font-weight: var(--fw-semibold); color: var(--error-700); }
.nodo-form__errores-titulo::before { width: 20px; height: 20px; margin-top: 1px; }
.nodo-form__errores-lista { margin: 10px 0 0; padding-left: 28px; }
.nodo-form__errores-lista li + li { margin-top: 4px; }
.nodo-form__errores-lista a { color: var(--error-700); font-weight: var(--fw-medium); }

/* ── Envío ─────────────────────────────────────────────────────────── */
.nodo-form__enviar {
	/* mismo aspecto que .nd-btn--primary.nd-btn--lg */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: var(--control-h-lg);
	padding: 0 28px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--action-primary);
	color: var(--text-on-accent);
	font: var(--fw-semibold) 17px/1.15 var(--font-body);
	cursor: pointer;
	transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nodo-form__enviar:hover { background: var(--action-primary-hover); box-shadow: var(--shadow-rosa); }
.nodo-form__enviar:active { background: var(--action-primary-press); transform: scale(.97); box-shadow: none; }
.nodo-form__enviar:focus-visible { box-shadow: var(--focus-ring); }
.nodo-form__enviar.is-cargando { cursor: progress; pointer-events: none; background: var(--action-primary-hover); }
.nodo-form__enviar.is-cargando::after {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	animation: nd-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.nodo-form__enviar.is-cargando::after { animation: none; border-right-color: currentColor; opacity: .6; }
}
@media (min-width: 720px) {
	.nodo-form__enviar { width: auto; align-self: flex-start; }
}

/* ── Éxito y avisos ────────────────────────────────────────────────── */
.nodo-form__resultado {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border-radius: var(--radius-lg);
	font-size: var(--text-lead);
	color: var(--text-strong);
}
.nodo-form__resultado:focus { outline: none; box-shadow: var(--focus-ring); }
.nodo-form__resultado--exito { background: var(--success-50); border: 1.5px solid var(--success-500); }
.nodo-form__resultado--exito p { display: flex; gap: 12px; }
.nodo-form__resultado--exito p::before {
	content: "";
	flex: none;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	background: var(--success-700);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nodo-form__resultado--aviso { background: var(--surface-sunken); }
.nodo-form__enlace {
	/* mismo aspecto que .nd-btn--secondary */
	display: inline-flex;
	align-items: center;
	min-height: var(--control-h-md);
	padding: 0 22px;
	border-radius: var(--radius-pill);
	background: var(--action-secondary);
	color: var(--text-on-inverse);
	font: var(--fw-semibold) 16px/1.15 var(--font-body);
	text-decoration: none;
}
.nodo-form__enlace:hover { background: var(--action-secondary-hover); color: var(--text-on-inverse); }

/* ── Páginas de formularios ────────────────────────────────────────── */
/* «Quiero sumarme»: el título de la página ya dice «Sumate a «…».»; la leyenda del grupo queda para lectores. */
.nodo-pagina--sumarse .nodo-form__proyecto {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.nodo-pagina__siguiente { margin-top: 28px; }
.nodo-acciones-pagina { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 719px) { .nodo-acciones-pagina .nd-btn { width: 100%; } }