/*
 * Banner de consentimiento de analítica. Lo pinta el plugin (en el pie) y lo
 * muestra el script `consentimiento.js`. Es una franja fija, no un cuadro
 * modal: no tapa la página ni impide leerla o navegar.
 *
 * Los dos botones tienen el mismo tamaño y el mismo peso. Rechazar no se
 * oculta ni se presenta como un enlace menor: eso sería un patrón engañoso.
 */

.apmv-consentimiento[hidden] {
	display: none;
}

.apmv-consentimiento {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	padding: var(--apmv-e4) var(--apmv-margen-lateral);
	border-top: var(--apmv-filete-fino) solid var(--apmv-verde);
	background: var(--apmv-papel);
	color: var(--apmv-grafito);
}

.apmv-consentimiento__caja {
	display: flex;
	flex-direction: column;
	gap: var(--apmv-e3);
	max-width: var(--apmv-ancho-contenedor);
	margin: 0 auto;
}

.apmv-consentimiento__titulo {
	margin: 0;
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-s);
	font-weight: 700;
	letter-spacing: var(--apmv-tracking-etiqueta);
	text-transform: uppercase;
}

/* Sin foco visible el titular no se ve al abrirlo desde el enlace del pie. */
.apmv-consentimiento__titulo:focus {
	outline: var(--apmv-foco-grosor) solid var(--apmv-foco-color);
	outline-offset: var(--apmv-foco-separacion);
}

.apmv-consentimiento__texto {
	margin: 0;
	max-width: var(--apmv-medida-texto);
	font-size: var(--apmv-txt-s);
	line-height: var(--apmv-interlinea-lectura);
}

.apmv-consentimiento__texto a {
	color: var(--apmv-verde-profundo);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.apmv-consentimiento__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apmv-e3);
}

.apmv-consentimiento__boton {
	min-height: 2.75rem;
	padding: 0.5rem var(--apmv-e4);
	border: var(--apmv-filete-fino) solid var(--apmv-verde-profundo);
	border-radius: var(--apmv-radio-boton);
	background: var(--apmv-verde-profundo);
	color: var(--apmv-blanco);
	font-family: var(--apmv-sans);
	font-size: var(--apmv-txt-s);
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--apmv-transicion), color var(--apmv-transicion);
}

.apmv-consentimiento__boton--secundario {
	background: transparent;
	color: var(--apmv-verde-profundo);
}

.apmv-consentimiento__boton:hover {
	background: var(--apmv-verde-profundo);
	border-color: var(--apmv-verde-profundo);
	color: var(--apmv-blanco);
}

.apmv-consentimiento__boton--secundario:hover {
	background: var(--apmv-verde-velo);
	color: var(--apmv-verde-profundo);
}

.apmv-consentimiento__boton:focus-visible,
.apmv-consentimiento__texto a:focus-visible {
	outline: var(--apmv-foco-grosor) solid var(--apmv-foco-color);
	outline-offset: var(--apmv-foco-separacion);
}

@media (min-width: 48rem) {
	.apmv-consentimiento__caja {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.apmv-consentimiento__acciones {
		flex-shrink: 0;
		flex-wrap: nowrap;
	}
}

/* Enlace del pie que reabre el banner. Hereda el color del pie. */
.apmv-pie__cookies {
	margin: 0;
	max-width: none;
}

.apmv-pie__cookies a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/*
 * Con el banner abierto, el botón de WhatsApp sube hasta quedar encima de él:
 * sigue visible y no se pisan. La altura del banner la mide `consentimiento.js`
 * en `--apmv-consentimiento-altura`; si no existiera, el botón quedaría en su
 * sitio de siempre. Al aceptar o rechazar, la clase se quita y vuelve solo.
 */
.apmv-consentimiento-abierto .apmv-whatsapp {
	bottom: calc(var(--apmv-consentimiento-altura, 0px) + var(--apmv-whatsapp-margen) + var(--apmv-e3));
}

/*
 * Al final de la página, con el banner abierto, el pie también tiene que
 * subir por encima de él. El margen del pie reserva el botón; con el banner
 * abierto, el botón sube, así que se reserva además la altura del banner.
 */
.apmv-consentimiento-abierto.apmv-con-whatsapp .apmv-pie__legal {
	padding-bottom: calc(var(--apmv-consentimiento-altura, 0px) + var(--apmv-whatsapp-tamano) + var(--apmv-whatsapp-margen) * 2 + var(--apmv-e3));
}