/* Aviso de cookies.
   El aspecto llega por variables (IC_Front::estilo). La letra es la del sitio:
   el aviso hereda, no trae tipografía propia.

   Estructura: .ic es la capa fija que ubica; .ic__velo, el fondo oscuro de las
   ventanas; .ic__caja, el aviso en sí. */

.ic {
	position: fixed;
	/* Por encima del navbar (100), de la barra de anuncio (101) y del botón de
	   WhatsApp (que usa 9999999 y taparía los botones en el celular). Por
	   debajo del carrito abierto de innova-shop (2147483000). */
	z-index: 2147482000;
	box-sizing: border-box;
	font-family: inherit;
	font-size: var(--ic-fuente);
	line-height: 1.5;
	color: var(--ic-texto);
	pointer-events: none;
}

.ic[hidden] {
	display: none;
}

.ic *,
.ic *::before,
.ic *::after {
	box-sizing: border-box;
}

.ic__caja {
	position: relative;
	pointer-events: auto;
	background: var(--ic-fondo);
	color: var(--ic-texto);
	box-shadow: var(--ic-sombra);
	padding: 20px 22px;
}

.ic__velo {
	display: none;
}

.ic__titulo {
	margin: 0 0 6px;
	font-size: var(--ic-fuente-t);
	font-weight: var(--ic-peso-t);
	line-height: 1.3;
	color: inherit;
}

.ic__texto p {
	margin: 0 0 8px;
	font-size: inherit;
	color: inherit;
}

.ic__texto p:last-child {
	margin-bottom: 0;
}

.ic__texto ul {
	margin: 0 0 8px 18px;
	padding: 0;
}

.ic a {
	color: var(--ic-enlace);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ic__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

/* Lo que comparten los dos estilos: solo ubicación. */
.ic__btn {
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	margin: 0;
	cursor: pointer;
}

.ic__btn:focus-visible {
	outline: 2px solid var(--ic-enlace);
	outline-offset: 2px;
}

/* ---- Botones del sitio.
   Los botones llevan las clases de Oxygen (btn-primary, btn-secondary) y las
   reglas de universal.css los dibujan: 11 px, peso 300, minúscula, borde de
   1 px y el relleno de color que se invierte al pasar el mouse. Acá no se
   repite nada de eso, así un cambio hecho en Oxygen llega solo al aviso.

   Lo de abajo es un respaldo por si alguna página no carga universal.css: va
   dentro de :where(), que no suma especificidad, y Oxygen le gana siempre. */

:where(.ic--botones-sitio .ic__btn) {
	display: flex;
	padding: 8px 25px;
	border: 1px solid #231f20;
	border-radius: 0;
	font-family: inherit;
	font-size: 11px;
	font-weight: 300;
	text-transform: lowercase;
	transition: all 0.3s ease;
}

/* Oxygen no le da interlineado a sus botones: los links lo heredan del body
   (1.6). Un <button> no hereda, así que se lo damos igual. */
.ic--botones-sitio .ic__btn {
	line-height: 1.6;
}

:where(.ic--botones-sitio .ic__btn--aceptar) {
	background-color: #231f20;
}

:where(.ic--botones-sitio .ic__btn--aceptar .ic__btn-texto) {
	color: #eaebed;
}

:where(.ic--botones-sitio .ic__btn--rechazar) {
	background-color: transparent;
}

:where(.ic--botones-sitio .ic__btn--rechazar .ic__btn-texto) {
	color: #231f20;
}

:where(.ic--botones-sitio .ic__btn--aceptar:hover) {
	background-color: transparent;
}

:where(.ic--botones-sitio .ic__btn--aceptar:hover .ic__btn-texto) {
	color: #231f20;
}

:where(.ic--botones-sitio .ic__btn--rechazar:hover) {
	background-color: #231f20;
}

:where(.ic--botones-sitio .ic__btn--rechazar:hover .ic__btn-texto) {
	color: #fff;
}

:where(.ic--botones-sitio .ic__btn-texto) {
	transition: color 0.3s ease;
}

/* ---- Botones con los colores del panel.
   Con `.ic.` adelante para ganarle a Oxygen, que carga después y también
   dibuja estos botones (lleven la clase que lleven, el :hover de btn-primary
   y el color de su texto les llegarían). */

.ic.ic--botones-propio .ic__btn {
	min-height: 42px;
	padding: 10px 22px;
	border: 1px solid transparent;
	border-radius: min(var(--ic-radio), 21px);
	font-family: inherit;
	font-size: var(--ic-fuente-b);
	font-weight: var(--ic-peso-b);
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: var(--ic-mayus-b);
	transition: opacity 0.2s ease;
}

.ic.ic--botones-propio .ic__btn .ic__btn-texto {
	color: inherit;
	font: inherit;
	text-transform: inherit;
}

.ic.ic--botones-propio .ic__btn:hover {
	opacity: 0.85;
}

.ic.ic--botones-propio .ic__btn--aceptar,
.ic.ic--botones-propio .ic__btn--aceptar:hover {
	background: var(--ic-acep-f);
	border-color: var(--ic-acep-f);
	color: var(--ic-acep-t);
}

.ic.ic--botones-propio .ic__btn--rechazar,
.ic.ic--botones-propio .ic__btn--rechazar:hover {
	background: var(--ic-rech-f);
	border-color: var(--ic-rech-b);
	color: var(--ic-rech-t);
}

/* ------------------------------------------------ Barras de lado a lado */

.ic--pos-barra_abajo,
.ic--pos-barra_arriba {
	left: 0;
	right: 0;
}

.ic--pos-barra_abajo { bottom: 0; --ic-desde: translateY(100%); }
.ic--pos-barra_arriba { top: 0; --ic-desde: translateY(-100%); }

.admin-bar .ic--pos-barra_arriba {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.ic--pos-barra_abajo .ic__caja,
.ic--pos-barra_arriba .ic__caja {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px 32px;
	padding: 16px max(24px, calc((100% - 1200px) / 2));
}

.ic--pos-barra_abajo .ic__botones,
.ic--pos-barra_arriba .ic__botones {
	flex: 0 0 auto;
	margin-top: 0;
	flex-wrap: nowrap;
}

/* ------------------------------------------------ Flotantes */

.ic--flotante {
	width: min(var(--ic-ancho), calc(100% - 2 * var(--ic-margen)));
}

.ic--flotante .ic__caja {
	border-radius: var(--ic-radio);
}

.ic--pos-abajo_izquierda   { left: var(--ic-margen); bottom: var(--ic-margen); --ic-desde: translateY(calc(100% + var(--ic-margen))); }
.ic--pos-abajo_derecha     { right: var(--ic-margen); bottom: var(--ic-margen); --ic-desde: translateY(calc(100% + var(--ic-margen))); }
.ic--pos-abajo_centro      { left: 50%; bottom: var(--ic-margen); --ic-x: -50%; --ic-desde: translateY(calc(100% + var(--ic-margen))); }
.ic--pos-arriba_izquierda  { left: var(--ic-margen); top: var(--ic-margen); --ic-desde: translateY(calc(-100% - var(--ic-margen))); }
.ic--pos-arriba_derecha    { right: var(--ic-margen); top: var(--ic-margen); --ic-desde: translateY(calc(-100% - var(--ic-margen))); }
.ic--pos-arriba_centro     { left: 50%; top: var(--ic-margen); --ic-x: -50%; --ic-desde: translateY(calc(-100% - var(--ic-margen))); }
.ic--pos-centro_izquierda  { left: var(--ic-margen); top: 50%; --ic-y: -50%; --ic-desde: translateX(calc(-100% - var(--ic-margen))); }
.ic--pos-centro_derecha    { right: var(--ic-margen); top: 50%; --ic-y: -50%; --ic-desde: translateX(calc(100% + var(--ic-margen))); }

/* El centrado de los flotantes va en `translate` y la animación en `transform`:
   así se suman en vez de pisarse. */
.ic--flotante {
	translate: var(--ic-x, 0) var(--ic-y, 0);
}

.admin-bar .ic--pos-arriba_izquierda,
.admin-bar .ic--pos-arriba_derecha,
.admin-bar .ic--pos-arriba_centro {
	top: calc(var(--ic-margen) + var(--wp-admin--admin-bar--height, 32px));
}

/* ------------------------------------------------ Ventanas */

.ic--ventana {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ic-margen);
	pointer-events: auto;
	--ic-desde: translateY(24px);
}

.ic--ventana .ic__velo {
	display: block;
	position: absolute;
	inset: 0;
	background: var(--ic-velo);
}

.ic--pos-centro .ic__caja {
	width: min(var(--ic-ancho), 100%);
	max-height: 100%;
	overflow: auto;
	border-radius: var(--ic-radio);
}

.ic--pos-pantalla_completa {
	padding: 0;
}

.ic--pos-pantalla_completa .ic__caja {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: auto;
	padding: 32px 24px;
	text-align: center;
	box-shadow: none;
}

.ic--pos-pantalla_completa .ic__cuerpo,
.ic--pos-pantalla_completa .ic__botones {
	width: min(var(--ic-ancho), 100%);
}

.ic--pos-pantalla_completa .ic__botones {
	justify-content: center;
}

/* ------------------------------------------------ Animaciones */

.ic.is-entrando.ic--anim-fundido .ic__caja,
.ic.is-entrando .ic__velo {
	animation: ic-fundido 0.35s ease both;
}

.ic.is-entrando.ic--anim-deslizar .ic__caja {
	animation: ic-deslizar 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ic.is-entrando.ic--anim-zoom .ic__caja {
	animation: ic-zoom 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ic.is-saliendo .ic__caja,
.ic.is-saliendo .ic__velo {
	animation: ic-fundido 0.25s ease reverse both;
}

@keyframes ic-fundido {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ic-deslizar {
	from { opacity: 0; transform: var(--ic-desde, translateY(100%)); }
	to   { opacity: 1; transform: none; }
}

@keyframes ic-zoom {
	from { opacity: 0; transform: scale(0.92); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ic .ic__caja,
	.ic .ic__velo {
		animation: none !important;
	}
}

/* ------------------------------------------------ Celular */

@media (max-width: 767px) {
	.ic {
		font-size: var(--ic-fuente-m);
	}

	.ic__caja {
		padding: 16px;
	}

	.ic--pos-barra_abajo .ic__caja,
	.ic--pos-barra_arriba .ic__caja {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 16px;
	}

	.ic--pos-barra_abajo .ic__botones,
	.ic--pos-barra_arriba .ic__botones {
		flex-wrap: wrap;
	}

	/* En el celular un flotante a media altura tapa el contenido de lleno: se
	   apoya abajo, que es donde el pulgar llega. */
	.ic--pos-centro_izquierda,
	.ic--pos-centro_derecha {
		top: auto;
		bottom: var(--ic-margen);
		--ic-y: 0;
		--ic-desde: translateY(calc(100% + var(--ic-margen)));
	}
}