/**
 * Banner de cookies de O|M Clinics.
 *
 * Usa la paleta del tema (oscuro #262626, beige #C4AB8D, oliva #A39363) para
 * que no parezca un pegote de otro sitio, pero las escribe en variables
 * propias: el plugin tiene que verse bien aunque un día se cambie de tema.
 *
 * Aceptar y rechazar comparten estilo a propósito. Hacer el «rechazar» más
 * pálido que el «aceptar» es exactamente lo que la AEPD llama patrón oscuro.
 */

.om-cookies {
	--om-ck-oscuro: #262626;
	--om-ck-beige: #c4ab8d;
	--om-ck-oliva: #a39363;
	--om-ck-claro: #f2f2f2;
	--om-ck-suave: #92a299;
}

.om-cookies[hidden] {
	display: none;
}

/* --- El aviso de abajo ---------------------------------------------------- */

.om-cookies__aviso {
	position: fixed;
	z-index: 9999;
	right: 1rem;
	bottom: 1rem;
	left: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	align-items: center;
	justify-content: space-between;
	max-width: 1040px;
	margin: 0 auto;
	padding: 1.25rem 1.5rem;
	border-radius: 6px;
	background: var(--om-ck-oscuro);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
	color: var(--om-ck-claro);
}

.om-cookies__aviso[hidden] {
	display: none;
}

.om-cookies--visible .om-cookies__aviso {
	animation: om-cookies-entra 0.28s ease-out;
}

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

@media (prefers-reduced-motion: reduce) {
	.om-cookies--visible .om-cookies__aviso { animation: none; }
}

.om-cookies__cuerpo {
	flex: 1 1 22rem;
}

.om-cookies__titulo {
	margin: 0 0 0.35rem;
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--om-ck-beige);
}

.om-cookies__texto {
	margin: 0;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--om-ck-claro);
}

.om-cookies__texto a,
.om-cookies__pie a {
	color: var(--om-ck-beige);
	text-underline-offset: 3px;
}

/* --- Los botones ---------------------------------------------------------- */

.om-cookies__botones {
	display: flex;
	flex-wrap: wrap;
	flex: 0 1 auto;
	gap: 0.6rem;
}

.om-cookies__boton {
	padding: 0.7rem 1.35rem;
	border: 1px solid var(--om-ck-oliva);
	border-radius: 3px;
	background: var(--om-ck-oliva);
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.om-cookies__boton:hover,
.om-cookies__boton:focus-visible {
	background: #8d7f55;
	border-color: #8d7f55;
}

/* «Configurar» es el único que baja de tono: no es una respuesta, es un paso
   intermedio. Aceptar y rechazar se quedan iguales entre sí. */
.om-cookies__boton--suave {
	background: transparent;
	border-color: var(--om-ck-suave);
	color: var(--om-ck-claro);
}

.om-cookies__boton--suave:hover,
.om-cookies__boton--suave:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--om-ck-claro);
}

.om-cookies :focus-visible {
	outline: 2px solid var(--om-ck-beige);
	outline-offset: 2px;
}

/* --- Que no tape el botón de WhatsApp -------------------------------------- */

/*
 * El botón flotante de WhatsApp (`.om-wa`, del plugin de contacto) vive en la
 * esquina de abajo a la derecha, justo donde cae el aviso. El aviso va por
 * encima, así que sin esto el botón queda medio comido mientras se decide.
 *
 * Se sube exactamente lo que mide el aviso, y ese desplazamiento lo escribe el
 * JS en el `bottom` del propio botón. Aquí solo queda la transición.
 *
 * El porqué del `bottom` y no de un `transform` está contado en `cookies.js`,
 * en la función `medir()`.
 */
.om-wa {
	transition: bottom 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
	.om-wa { transition: none; }
	.om-cookies__boton,
	.om-cookies__palanca,
	.om-cookies__palanca::after { transition: none; }
}

/* --- El panel de categorías ----------------------------------------------- */

.om-cookies__panel {
	position: fixed;
	z-index: 10000;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.55);
}

.om-cookies__panel[hidden] {
	display: none;
}

.om-cookies__panel-caja {
	width: min(46rem, 100%);
	max-height: min(85vh, 44rem);
	overflow-y: auto;
	padding: 1.75rem;
	border-radius: 6px;
	background: #fff;
	color: #303030;
}

.om-cookies__panel-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid #e4e4e4;
}

.om-cookies__panel .om-cookies__titulo {
	margin: 0;
	color: var(--om-ck-oscuro);
}

.om-cookies__cerrar {
	border: 0;
	background: none;
	font-size: 1.65rem;
	line-height: 1;
	color: #767676;
	cursor: pointer;
}

.om-cookies__cerrar:hover {
	color: var(--om-ck-oscuro);
}

.om-cookies__lista {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.om-cookies__fila + .om-cookies__fila {
	padding-top: 1.25rem;
	border-top: 1px solid #efefef;
}

.om-cookies__interruptor {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
}

.om-cookies__interruptor input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.om-cookies__palanca {
	position: relative;
	flex: 0 0 auto;
	width: 2.6rem;
	height: 1.45rem;
	border-radius: 1rem;
	background: #c9c9c9;
	transition: background-color 0.18s ease;
}

.om-cookies__palanca::after {
	content: "";
	position: absolute;
	top: 0.175rem;
	left: 0.175rem;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.18s ease;
}

.om-cookies__interruptor input:checked + .om-cookies__palanca {
	background: var(--om-ck-oliva);
}

.om-cookies__interruptor input:checked + .om-cookies__palanca::after {
	transform: translateX(1.15rem);
}

/* Las necesarias se ven encendidas pero apagadas de color: no son una elección
   y no deben parecerlo. */
.om-cookies__interruptor input:disabled + .om-cookies__palanca {
	background: var(--om-ck-suave);
	cursor: default;
}

.om-cookies__interruptor input:focus-visible + .om-cookies__palanca {
	outline: 2px solid var(--om-ck-oliva);
	outline-offset: 2px;
}

.om-cookies__nombre {
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--om-ck-oscuro);
}

.om-cookies__nombre em {
	font-weight: 400;
	font-style: normal;
	color: #767676;
}

.om-cookies__detalle {
	margin: 0.5rem 0 0 3.35rem;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 0.85rem;
	line-height: 1.6;
	color: #4a4a4a;
}

.om-cookies__botones--panel {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid #e4e4e4;
}

.om-cookies__botones--panel .om-cookies__boton--suave {
	border-color: #c9c9c9;
	color: #4a4a4a;
}

.om-cookies__botones--panel .om-cookies__boton--suave:hover,
.om-cookies__botones--panel .om-cookies__boton--suave:focus-visible {
	background: #f2f2f2;
	border-color: #767676;
	color: var(--om-ck-oscuro);
}

.om-cookies__pie {
	margin: 1rem 0 0;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 0.8rem;
	color: #767676;
}

.om-cookies__pie a {
	color: #6f6340;
}

/* --- Móvil ---------------------------------------------------------------- */

@media (max-width: 640px) {
	.om-cookies__aviso {
		right: 0.6rem;
		bottom: 0.6rem;
		left: 0.6rem;
		padding: 1.1rem 1.15rem;
	}

	/* En una pantalla estrecha los botones van uno por línea. Que «rechazar»
	   quede debajo de «aceptar» no lo hace más difícil: es el mismo gesto. */
	.om-cookies__botones {
		width: 100%;
	}

	.om-cookies__botones .om-cookies__boton {
		flex: 1 1 100%;
	}

	.om-cookies__panel-caja {
		padding: 1.35rem 1.15rem;
	}

	.om-cookies__detalle {
		margin-left: 0;
	}
}