/**
 * Botón de WhatsApp y avisos de los formularios.
 *
 * Se usan los colores de la marca y no el verde de WhatsApp: el botón es de la
 * clínica, no de WhatsApp. El icono ya dice de sobra a dónde lleva.
 */

/* --------------------------------------------------------------------------
   Avisos debajo de los formularios del tema
   -------------------------------------------------------------------------- */

.om-aviso {
	margin: 1rem 0 0;
	padding: .7rem .9rem;
	border-radius: 4px;
	font-size: .875rem;
	line-height: 1.5;
}

/* Los dos tonos llegan a 4,5 de contraste sobre su fondo, y además se
   distinguen por el borde: el color no puede ser el único aviso. */
.om-aviso--error {
	background: #FDECEA;
	border-left: 3px solid #A4292B;
	color: #7A1F20;
}

.om-aviso--bien {
	background: #EAF3EC;
	border-left: 3px solid #2E6B3E;
	color: #1F4B2C;
}

/* --------------------------------------------------------------------------
   El botón flotante
   -------------------------------------------------------------------------- */

.om-wa {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 45; /* Por debajo del menú desplegado, que va en 100000. */
	font-family: 'Open Sans', sans-serif;
}

.om-wa__boton {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-left: auto;
	padding: .7rem 1.1rem;
	border: 0;
	border-radius: 999px;
	background: #3D4D44;
	color: #FFFFFF;
	font-family: inherit;
	font-size: .9375rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
	transition: background .25s ease, transform .25s ease;
}

.om-wa__boton:hover,
.om-wa__boton:focus-visible {
	background: #A39363;
	transform: translateY(-2px);
}

.om-wa__boton:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

.om-wa__icono {
	width: 22px;
	height: 22px;
	fill: currentColor;
	flex: none;
}

/* --------------------------------------------------------------------------
   El panel
   -------------------------------------------------------------------------- */

.om-wa__panel {
	width: min(320px, calc(100vw - 2rem));
	margin-bottom: .75rem;
	padding: 1.1rem 1.15rem 1rem;
	border: 1px solid rgba(163, 147, 99, .35);
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .26);
	animation: om-wa-entra .25s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes om-wa-entra {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

.om-wa__cabecera {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .5rem;
}

.om-wa__titulo {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #303030;
}

.om-wa__cerrar {
	margin: -.35rem -.35rem 0 0;
	padding: 0 .35rem;
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: #6B6B6B;
	cursor: pointer;
}

.om-wa__cerrar:hover { color: #303030; }

.om-wa__intro {
	margin: .5rem 0 .9rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: #5A5A5A;
}

.om-wa__campo {
	display: block;
	margin-bottom: .7rem;
}

.om-wa__campo > span {
	display: block;
	margin-bottom: .25rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #5A5A5A;
}

.om-wa__campo input {
	width: 100%;
	padding: .55rem .7rem;
	border: 1px solid #C9C9C9;
	border-radius: 5px;
	font-family: inherit;
	font-size: .9375rem;
	color: #303030;
	background: #FFFFFF;
}

.om-wa__campo input:focus-visible,
.om-wa__casilla input:focus-visible,
.om-wa__grupo input:focus-visible {
	outline: 2px solid #A39363;
	outline-offset: 1px;
}

.om-wa__grupo {
	margin: 0 0 .8rem;
	padding: 0;
	border: 0;
	display: flex;
	align-items: center;
	gap: .9rem;
	flex-wrap: wrap;
}

.om-wa__grupo legend {
	padding: 0;
	margin-bottom: .3rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #5A5A5A;
	float: left;
	width: 100%;
}

.om-wa__grupo label {
	display: flex;
	align-items: center;
	gap: .3rem;
	font-size: .875rem;
	color: #303030;
	cursor: pointer;
}

.om-wa__casilla {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-bottom: .9rem;
	font-size: .75rem;
	line-height: 1.45;
	color: #5A5A5A;
	cursor: pointer;
}

.om-wa__casilla a { color: #7A6540; }

/* La trampa para robots: fuera de la pantalla, no `display:none`, que algunos
   robots detectan y saltan. */
.om-wa__trampa {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.om-wa__error {
	margin: 0 0 .7rem;
	padding: .5rem .7rem;
	border-left: 3px solid #A4292B;
	background: #FDECEA;
	font-size: .8125rem;
	line-height: 1.45;
	color: #7A1F20;
}

.om-wa__enviar {
	width: 100%;
	padding: .7rem 1rem;
	border: 0;
	border-radius: 999px;
	background: #84754D;
	color: #FFFFFF;
	font-family: inherit;
	font-size: .9375rem;
	cursor: pointer;
	transition: background .25s ease;
}

.om-wa__enviar:hover:not(:disabled) { background: #A39363; }
.om-wa__enviar:disabled { opacity: .7; cursor: default; }

.om-wa__pie {
	margin: .8rem 0 0;
	text-align: center;
	font-size: .75rem;
	color: #5A5A5A;
}

.om-wa__pie a { color: #7A6540; }

/* En móvil la pestaña lateral «Pide cita» está oculta, así que el botón no
   estorba; solo se recorta la etiqueta para que ocupe poco. */
@media (max-width: 480px) {
	.om-wa__etiqueta { display: none; }
	.om-wa__boton { padding: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.om-wa__boton,
	.om-wa__panel {
		transition: none;
		animation: none;
	}
}