/* Estilo público del formulario MYEM (lo que ve un visitante en la página real).
   A propósito NO fija una tipografía propia con @font-face: hereda la del
   tema del sitio (font-family: inherit), que en MYEM ya es Montserrat gracias
   al child theme de Astra Pro (ver CLAUDE.md 3.7) — así no hay que cargar
   ninguna fuente aparte ni depender de un CDN. Solo aporta la estructura de
   filas/anchos y el acento de marca (#ffaa00). */

.myem-formulario {
	max-width: 640px;
}

/* Cabecera opcional (logo/título/subtítulo, ver CLAUDE.md 3.6). Si no hay
   nada que mostrar, el PHP no pinta ni siquiera el <div> — este CSS solo se
   aplica cuando de verdad existe. */
.myem-cabecera {
	margin-bottom: 20px;
}

.myem-cabecera-logo {
	display: inline-block;
	overflow: hidden;
}

.myem-cabecera-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* Escala el logo sin deformarlo, aunque no sea exactamente cuadrado. */
}

.myem-cabecera-titulo {
	margin: 8px 0 4px;
	font-size: 20px;
	font-weight: 600;
}

.myem-cabecera-subtitulo {
	margin: 0 0 8px;
	color: #666;
	font-size: 14px;
}

.myem-formulario-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.myem-fila {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.myem-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
}

/* Campo oculto por la lógica condicional (CLAUDE.md 3.8): el atributo nativo
   "hidden" ya oculta cualquier elemento, pero aquí hace falta esta regla más
   específica porque, si no, la línea ".myem-campo { display: flex }" de
   arriba (con la misma especificidad CSS) ganaría y el campo seguiría viéndose. */
.myem-campo[hidden] {
	display: none;
}

.myem-ancho-completo {
	flex-basis: 100%;
}

.myem-ancho-mitad {
	flex-basis: calc(50% - 8px);
	min-width: 180px;
}

.myem-etiqueta {
	font-weight: 600;
	font-size: 15px;
}

.myem-obligatorio {
	color: #ffaa00;
}

.myem-formulario input,
.myem-formulario select,
.myem-formulario textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: inherit;
	font-size: 15px;
}

.myem-formulario input:focus,
.myem-formulario select:focus,
.myem-formulario textarea:focus {
	outline: none;
	border-color: #ffaa00;
	box-shadow: 0 0 0 2px rgba(255, 170, 0, 0.2);
}

.myem-opciones {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.myem-opcion {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 15px;
}

.myem-firma-envoltorio {
	position: relative;
	border: 1px dashed #ccc;
	border-radius: 4px;
	background: #fff;
}

.myem-firma-canvas {
	display: block;
	width: 100%;
	height: 150px;
	touch-action: none; /* Evita que el navegador haga scroll/zoom de la página mientras se dibuja con el dedo. */
	cursor: crosshair;
}

.myem-firma-borrar {
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 12px;
	padding: 4px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}

.myem-firma-ayuda {
	margin: 4px 0 0;
	font-size: 12px;
	color: #888;
}

.myem-boton-enviar {
	align-self: flex-start;
	padding: 10px 28px;
	border: none;
	border-radius: 4px;
	background: #ffaa00;
	color: #1d2327;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

.myem-boton-enviar:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Campo teléfono con selector de país (intl-tel-input, ver CLAUDE.md 3.5):
   la librería envuelve el input real en un <div class="iti">, que por
   defecto ocupa solo el ancho de su contenido — lo forzamos a comportarse
   como el resto de campos (ancho completo, mismo alto de línea). */
.myem-campo-telefono .iti {
	display: block;
	width: 100%;
}

.myem-formulario-vacio {
	color: #888;
	font-style: italic;
}

/* Campo trampa anti-spam (honeypot, ver CLAUDE.md 3.2): escondido con CSS
   (fuera de la pantalla), nunca con display:none ni type="hidden" — algunos
   robots ya saben ignorar esas dos formas más obvias de ocultar un campo. */
.myem-campo-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.myem-mensaje-envio {
	font-size: 14px;
	min-height: 1em; /* Reserva un poco de espacio aunque todavía no haya ningún mensaje, para que el formulario no "salte" al mostrarlo. */
}

.myem-mensaje-envio-info {
	color: #666;
}

.myem-mensaje-envio-exito {
	color: #1a7a1a;
	font-weight: 600;
	font-size: 16px;
}

.myem-mensaje-envio-error {
	color: #c3392e;
	font-weight: 600;
}

/* Firma abajo del formulario (0.15.0, regla común MYEM). Tamaño, opacidad y
   alineación los pone cada formulario en el atributo style (sección «Firma»
   del editor). */
.myem-formulario .myem-firma {
	margin: 12px 0 0;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.4;
	color: #555555;
}
/* Blindaje frente al tema: el tema pinta los enlaces al pasar el ratón o
   tocarlos; aquí se mantiene el color de la firma en todos los estados. */
.myem-formulario .myem-firma a,
.myem-formulario .myem-firma a:visited,
.myem-formulario .myem-firma a:hover,
.myem-formulario .myem-firma a:focus,
.myem-formulario .myem-firma a:active {
	color: inherit;
	text-decoration: none;
	background: none;
	box-shadow: none;
	border: 0;
}