/* ------------------------------------------------------------------
   Formulario de suscripcion (WPForms 309 "Newsletter PP Malaga").
   Vive en Footer Global, siempre sobre el azul PP #21599e.
   Contrastes verificados sobre ese azul y sobre el blanco de los campos.
   Ambito: .cutom-wpform, clase propia de ese formulario (el otro
   formulario del sitio, 338, no la lleva y no se ve afectado).
   ------------------------------------------------------------------ */

.wpforms-container.cutom-wpform {
	--pp-azul:          #21599e;  /* fondo del bloque */
	--pp-sobre-azul:    #ffffff;  /* 7.03:1  AAA */
	--pp-apoyo:         #dbe7f5;  /* 5.61:1  AA  */
	--pp-alerta:        #ffd7d7;  /* 5.34:1  AA  */
	--pp-foco:          #ffd166;  /* 4.88:1  AA  */
	--pp-texto-campo:   #2d3b48;  /* 11.47:1 AAA sobre blanco */
	--pp-pista:         #767676;  /* 4.54:1  AA  sobre blanco. Para AAA: #595959 */
	--pp-error-borde:   #b3261e;  /* 6.54:1  AA  sobre blanco */

	/* WPForms pinta los mensajes de error desde esta variable propia.
	   Sobrescribirla es mas fiable que competir en especificidad. */
	--wpforms-label-error-color: #ffffff;
}

/* --- Texto general y etiquetas ------------------------------------ */

.wpforms-container.cutom-wpform,
.wpforms-container.cutom-wpform .wpforms-field-label,
.wpforms-container.cutom-wpform .wpforms-field-label-inline {
	color: var(--pp-sobre-azul);
}

.wpforms-container.cutom-wpform .wpforms-field-description,
.wpforms-container.cutom-wpform .wpforms-field-sublabel {
	color: var(--pp-apoyo);
}

/* El asterisco marca que campos son obligatorios: tiene que leerse. */
.wpforms-container.cutom-wpform .wpforms-required-label {
	color: var(--pp-alerta);
}

/* --- Campos ------------------------------------------------------- */

.wpforms-container.cutom-wpform input[type="text"],
.wpforms-container.cutom-wpform input[type="email"],
.wpforms-container.cutom-wpform input[type="tel"],
.wpforms-container.cutom-wpform input[type="url"],
.wpforms-container.cutom-wpform input[type="number"],
.wpforms-container.cutom-wpform textarea,
.wpforms-container.cutom-wpform select {
	background-color: #ffffff;
	color: var(--pp-texto-campo);
	border: 1px solid var(--pp-sobre-azul);
}

/* Firefox aclara el placeholder por su cuenta: sin opacity:1 el
   contraste real queda por debajo del calculado. */
.wpforms-container.cutom-wpform ::placeholder {
	color: var(--pp-pista);
	opacity: 1;
}

/* --- Foco visible ------------------------------------------------- */

/* El anillo va por fuera del campo, sobre el azul, donde da 4.88:1.
   Sin outline-offset caeria sobre el blanco del campo (~1.6:1). */
.wpforms-container.cutom-wpform input:focus-visible,
.wpforms-container.cutom-wpform textarea:focus-visible,
.wpforms-container.cutom-wpform select:focus-visible,
.wpforms-container.cutom-wpform button:focus-visible,
.wpforms-container.cutom-wpform a:focus-visible {
	outline: 3px solid var(--pp-foco);
	outline-offset: 2px;
}

/* --- Errores ------------------------------------------------------ */

/* Especificidad por encima de la de WPForms (0,3,2): 4 clases + elemento. */
.wpforms-container.cutom-wpform .wpforms-form label.wpforms-error,
.wpforms-container.cutom-wpform .wpforms-form em.wpforms-error,
.wpforms-container.cutom-wpform .wpforms-form .wpforms-error-container {
	color: #ffffff;   /* 7.03:1 sobre el azul PP */
	font-weight: 600;
}

.wpforms-container.cutom-wpform input.wpforms-error,
.wpforms-container.cutom-wpform textarea.wpforms-error,
.wpforms-container.cutom-wpform select.wpforms-error {
	border: 2px solid var(--pp-error-borde);
}

/* --- Casilla de consentimiento ------------------------------------ */

/* La casilla NO se personaliza, a proposito.
   WPForms la dibuja con appearance:none y dos pseudoelementos: ::before es
   la caja (blanca, borde #21599E, radio 3px) y ::after la marca. Sobre el
   azul se ve de sobra: blanco sobre #21599E son 7.03:1, muy por encima del
   3:1 que pide un control de interfaz.
   Lo que habia aqui antes no servia: la propiedad de color de acento no
   tiene efecto cuando appearance vale none, y el outline dibujaba un marco
   blanco suelto alrededor de la caja.
   El foco de teclado ya lo cubre la regla :focus-visible de arriba. */

.wpforms-container.cutom-wpform a {
	color: var(--pp-sobre-azul);
	text-decoration: underline;
}

/* --- Boton -------------------------------------------------------- */

/* Ya cumplia (7.03:1). Solo se asegura que el hover no lo empeore. */
.wpforms-container.cutom-wpform .wpforms-submit {
	background-color: var(--pp-azul);
	color: var(--pp-sobre-azul);
	border: 2px solid var(--pp-sobre-azul);
}

.wpforms-container.cutom-wpform .wpforms-submit:hover {
	background-color: var(--pp-sobre-azul);
	color: var(--pp-azul);
}

/* --- Confirmacion ------------------------------------------------- */

.wpforms-confirmation-container-full,
.wpforms-confirmation-container-full p {
	color: var(--pp-texto-campo);
	background-color: #ffffff;
	border: 1px solid var(--pp-azul);
}