/* Formularios de CloudNetwork: contacto y cobertura. Usa los colores del tema si existen. */
.cn-form, .cn-coverage {
	--cnf-navy: var(--wp--preset--color--navy, #0b2545);
	--cnf-action: var(--wp--preset--color--action, #0077b6);
	--cnf-line: var(--wp--preset--color--line, #dde3ea);
	--cnf-muted: var(--wp--preset--color--muted, #52606d);
	--cnf-brand-50: var(--wp--preset--color--brand-50, #eaf7fd);
	--cnf-danger: #d64545;
	--cnf-success: var(--wp--preset--color--success, #1e9e62);
}
.cn-form { display: grid; gap: 2.5rem; }
.cn-form [hidden], .cn-coverage [hidden], .cn-form-success[hidden] { display: none !important; }
.cn-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.cn-step > legend { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; font-family: var(--wp--preset--font-family--display, inherit); font-weight: 800; font-size: 1.25rem; color: var(--cnf-navy); }
.cn-step > legend span { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cnf-brand-50); color: var(--cnf-action); font-size: 0.875rem; }
.cn-grid2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cn-grid2 + .cn-grid2 { margin-top: 1.25rem; }
@media (max-width: 640px) { .cn-grid2 { grid-template-columns: 1fr; } }
.cn-field.is-wide, .cn-choices.is-wide, .cf-turnstile.is-wide { grid-column: 1 / -1; }
.cn-field label, .cn-choices legend { display: block; margin-bottom: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--cnf-navy); }
.cn-field input:not([type="checkbox"]):not([type="radio"]), .cn-field select, .cn-field textarea {
	width: 100%; box-sizing: border-box;
	padding: 0.75rem 1rem;
	border: 1px solid var(--cnf-line); border-radius: 0.75rem;
	background: #fff; color: inherit; font: inherit;
}
.cn-field input:focus, .cn-field select:focus, .cn-field textarea:focus { border-color: var(--cnf-action); outline: 2px solid var(--cnf-brand-50); }
.cn-field [aria-invalid="true"] { border-color: var(--cnf-danger) !important; }
.cn-field__hint { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--cnf-muted); }
.cn-field__error { margin: 0.3rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--cnf-danger); }
.cn-choices { border: 0; padding: 0; margin: 0; min-width: 0; }
.cn-choices > div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cn-choice { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--cnf-line); border-radius: 999px; cursor: pointer; }
.cn-choice:has(:checked) { border-color: var(--cnf-action); background: var(--cnf-brand-50); }
.cn-choice input { accent-color: var(--cnf-action); }
.cn-consent label { display: flex; gap: 0.75rem; font-size: 1rem; font-weight: 400; color: inherit; }
.cn-consent input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; flex: none; accent-color: var(--cnf-action); }
.cn-trap { position: absolute; left: -9999px; }
.cn-form-error { margin: 0; padding: 1rem; border-radius: 0.75rem; background: rgb(214 69 69 / 0.1); color: var(--cnf-danger); font-weight: 600; }
.cn-submit { justify-self: start; cursor: pointer; border: 0; font-size: 1.1rem; padding: 0.9rem 2rem; }
.cn-submit:disabled { opacity: 0.7; cursor: wait; }
.cn-form-success { padding: 2rem; border-radius: 1rem; background: rgb(30 158 98 / 0.1); border: 1px solid rgb(30 158 98 / 0.3); text-align: center; }
.cn-form-success__title { font-family: var(--wp--preset--font-family--display, inherit); font-weight: 800; font-size: 1.5rem; color: var(--wp--preset--color--navy, #0b2545); margin: 0 0 0.5rem; }

/* Cobertura */
.cn-coverage { background: #fff; border: 1px solid var(--cnf-line); border-radius: 1rem; padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 10px 30px -12px rgb(11 37 69 / 0.25); }
.cn-coverage__form { display: grid; gap: 1rem; grid-template-columns: 1fr 2fr auto; align-items: end; }
@media (max-width: 720px) { .cn-coverage__form { grid-template-columns: 1fr; } }
.cn-coverage__form .cn-submit { justify-self: stretch; }
.cn-coverage__result { margin-top: 1.5rem; padding: 1.25rem; border-radius: 0.75rem; background: var(--cnf-brand-50); }
.cn-coverage__result.is-available { background: rgb(30 158 98 / 0.1); }
.cn-coverage__message { margin: 0 0 0.5rem; font-weight: 600; color: var(--cnf-navy); }
.cn-coverage__next { font-weight: 600; color: var(--cnf-action); }