/*
 * Los estilos del formulario de Kubo Mail en la web.
 *
 * Solo se carga cuando un formulario los pide (un estilo que no es «Tema», la
 * disposición en línea o un tamaño de letra para el bloque): con «Tema», el
 * formulario lleva el aspecto del tema y esta hoja no sale en la página.
 *
 * Los colores salen del texto de alrededor (`currentColor`), nunca escritos
 * aquí: así valen en un tema claro y en uno oscuro, y lo que se elija en el
 * bloque (color de texto, de fondo, borde) manda sobre esto. Primero un gris
 * que vale para todos y después la mezcla con `color-mix()`, que lo sustituye
 * donde el navegador la entiende.
 */

/* ── Lo común a los estilos ─────────────────────────────────────────────── */

.kubo-mail.is-style-card .kubo-mail-campo input,
.kubo-mail.is-style-minimal .kubo-mail-campo input,
.kubo-mail.kubo-mail-en-linea .kubo-mail-campo input {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	font: inherit;
}

/* La etiqueta encima del campo y la casilla junto a su texto los pone la
   disposición mínima (`kubo-mail-base`, en línea, que va con todos los
   estilos, también «Tema»); aquí, solo lo que cambia con cada estilo. */
.kubo-mail.is-style-card .kubo-mail-consentimiento input,
.kubo-mail.is-style-minimal .kubo-mail-consentimiento input,
.kubo-mail.kubo-mail-en-linea .kubo-mail-consentimiento input {
	width: 1.15em;
	height: 1.15em;
	margin: 0.2em 0 0;
}

/* El foco, siempre a la vista y del color del texto (con el ratón, el
   teclado o un lector de pantalla). */
.kubo-mail.is-style-card input:focus-visible,
.kubo-mail.is-style-card button:focus-visible,
.kubo-mail.is-style-minimal input:focus-visible,
.kubo-mail.is-style-minimal button:focus-visible,
.kubo-mail.kubo-mail-en-linea input:focus-visible,
.kubo-mail.kubo-mail-en-linea button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.kubo-mail .kubo-mail-resultado p {
	margin: 0 0 0.4em;
}

/* ── Tarjeta ────────────────────────────────────────────────────────────── */

.kubo-mail.is-style-card {
	box-sizing: border-box;
	padding: 1.5em;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 8px;
	background-color: rgba(128, 128, 128, 0.06);
	background-color: color-mix(in srgb, currentColor 4%, transparent);
}

.kubo-mail.is-style-card > :first-child {
	margin-top: 0;
}

.kubo-mail.is-style-card .kubo-mail-formulario > p,
.kubo-mail.is-style-card .kubo-mail-formulario > .kubo-mail-fila {
	margin: 0 0 1em;
}

.kubo-mail.is-style-card .kubo-mail-formulario > :last-child {
	margin-bottom: 0;
}

/* El borde del campo, a un 60 % del texto: llega al 3 a 1 de contraste que
   pide un control (WCAG 1.4.11) en un fondo claro y en uno oscuro. */
.kubo-mail.is-style-card .kubo-mail-campo input {
	padding: 0.6em 0.75em;
	border: 1px solid rgba(128, 128, 128, 0.9);
	border: 1px solid color-mix(in srgb, currentColor 60%, transparent);
	border-radius: 6px;
	background-color: transparent;
	color: inherit;
}

/* ── Mínimo ─────────────────────────────────────────────────────────────── */

.kubo-mail.is-style-minimal .kubo-mail-formulario > p,
.kubo-mail.is-style-minimal .kubo-mail-formulario > .kubo-mail-fila {
	margin: 0 0 0.8em;
}

.kubo-mail.is-style-minimal .kubo-mail-campo label {
	font-size: 0.875em;
}

/* Solo la raya de abajo, del color del texto entero. */
.kubo-mail.is-style-minimal .kubo-mail-campo input {
	padding: 0.4em 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background-color: transparent;
	color: inherit;
}

/* ── En línea: el nombre, el correo y el botón en una fila ──────────────── */

.kubo-mail.kubo-mail-en-linea .kubo-mail-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75em;
	margin: 0 0 1em;
}

.kubo-mail.kubo-mail-en-linea .kubo-mail-fila > p {
	margin: 0;
}

/* Cada campo, al menos 12 caracteres: en un móvil el botón baja a su línea. */
.kubo-mail.kubo-mail-en-linea .kubo-mail-fila .kubo-mail-campo {
	flex: 1 1 12em;
	min-width: 0;
}

.kubo-mail.kubo-mail-en-linea .kubo-mail-fila .kubo-mail-enviar {
	flex: 0 0 auto;
}

/* ── La letra del bloque, también en los campos y el botón ──────────────── */

.kubo-mail.kubo-mail-tipografia input,
.kubo-mail.kubo-mail-tipografia label,
.kubo-mail.kubo-mail-tipografia button {
	font-size: inherit;
	line-height: inherit;
}