/* Niquelao Cookie Guard — banner de consentimiento (frontend). */

.ncc-banner {
	position: fixed;
	z-index: 999999;
	width: min(920px, calc(100% - 32px));
	background: var(--ncc-bg, #0f1b3d);
	color: var(--ncc-text, #eef2fb);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(8, 15, 40, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   Posiciones del banner (9 cajas + 2 barras + modal central)
   ========================================================================== */

/* --- Fila superior --- */
.ncc-banner--top-left {
	left: 24px;
	top: 24px;
	width: min(460px, calc(100% - 32px));
}

.ncc-banner--top-center {
	left: 50%;
	top: 24px;
	transform: translateX(-50%);
}

.ncc-banner--top-right {
	right: 24px;
	top: 24px;
	width: min(460px, calc(100% - 32px));
}

/* --- Fila central (medio vertical) --- */
.ncc-banner--middle-left {
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: min(460px, calc(100% - 32px));
}

.ncc-banner--middle-right {
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	width: min(460px, calc(100% - 32px));
}

/* --- Fila inferior --- */
.ncc-banner--bottom-left {
	left: 24px;
	bottom: 24px;
	width: min(460px, calc(100% - 32px));
}

.ncc-banner--bottom-center {
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
}

.ncc-banner--bottom-right {
	right: 24px;
	bottom: 24px;
	width: min(460px, calc(100% - 32px));
}

/* --- Ventana modal centrada (con velo de fondo) --- */
.ncc-banner--center {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, calc(100% - 32px));
}

/*
 * El velo es solo estetico: oscurece la pagina PERO no debe bloquear la
 * navegacion (requisito legal: se prohiben los "muros de cookies").
 * - z-index alto para verse por encima del contenido de la pagina.
 * - pointer-events:none para que los clics lo atraviesen y lleguen a la pagina.
 * El banner (.ncc-banner tiene z-index 999999) queda por encima del velo
 * y si recibe clics normalmente.
 */
.ncc-banner--center::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 999998;
	pointer-events: none;
	background: rgba(6, 11, 30, 0.55);
}

.ncc-banner--center .ncc-banner__inner {
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.ncc-banner--center .ncc-banner__text {
	flex: 0 0 auto;
}

.ncc-banner--center .ncc-banner__actions {
	width: 100%;
	flex-wrap: wrap;
}

/* --- Barras a lo ancho --- */
.ncc-banner--top-bar {
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	border-radius: 0;
}

.ncc-banner--bottom-bar {
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	border-radius: 0;
}

.ncc-banner--top-bar .ncc-banner__inner,
.ncc-banner--bottom-bar .ncc-banner__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ncc-banner[hidden] {
	display: none;
}

.ncc-banner__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px 24px;
	flex-wrap: wrap;
}

.ncc-banner__text {
	flex: 1 1 420px;
	min-width: 260px;
}

.ncc-banner__title {
	display: block;
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--ncc-text, #ffffff);
}

.ncc-banner__msg {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ncc-text, #c3cde6);
	opacity: 0.82;
}

.ncc-banner__actions {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

.ncc-btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	padding: 11px 22px;
	border-radius: 9px;
	transition: transform 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}

.ncc-btn:active {
	transform: translateY(1px);
}

.ncc-btn--reject {
	background: rgba(255, 255, 255, 0.08);
	color: #eef2fb;
	border: 1px solid rgba(255, 255, 255, 0.18);
}

.ncc-btn--reject:hover {
	background: rgba(255, 255, 255, 0.14);
}

.ncc-btn--accept {
	background: var(--ncc-accent, #38d39f);
	color: #0d1836;
}

.ncc-btn--accept:hover {
	opacity: 0.92;
}

.ncc-btn--link {
	background: transparent;
	color: var(--ncc-text, #9fb4e0);
	border: 0;
	text-decoration: underline;
	padding: 11px 10px;
	opacity: 0.75;
}

.ncc-btn--link:hover {
	opacity: 1;
}

/* Panel de preferencias por categoría (capa 2). */
.ncc-banner__prefs {
	padding: 4px 24px 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 4px;
}

.ncc-banner__prefs[hidden] {
	display: none;
}

.ncc-pref {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-size: 14px;
	color: #dbe3f5;
	cursor: pointer;
}

.ncc-pref__cb {
	width: 18px;
	height: 18px;
	accent-color: var(--ncc-accent, #38d39f);
}

.ncc-pref__always {
	color: #8fa0c4;
	font-size: 12.5px;
	font-style: italic;
	margin-left: 4px;
}

.ncc-banner__actions--prefs {
	margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.ncc-btn {
		transition: none;
	}
}

@media (max-width: 600px) {
	.ncc-banner__actions {
		width: 100%;
	}
	.ncc-btn {
		flex: 1 1 auto;
	}
}