/**
 * Estilos del banner/modal de consentimiento.
 *
 * Identidad visual de PlusExpert: tarjeta compacta anclada a la esquina
 * inferior izquierda, estilo SaaS moderno (espacio en blanco generoso,
 * esquinas redondeadas, sombras suaves), azul corporativo #1351d8 como
 * color principal, contenido siempre alineado a la izquierda. Sin
 * frameworks ni dependencias externas: solo CSS plano.
 *
 * No se elimina el foco de teclado por defecto en ningún elemento
 * interactivo; solo se refuerza su visibilidad (contraste AA verificado
 * contra blanco y contra #1351d8).
 */

.plusexpert-privacy-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	box-sizing: border-box;
	padding: 24px;
	background-color: rgba( 15, 23, 42, 0.35 );
}

.plusexpert-privacy-overlay--top {
	align-items: flex-start;
}

.plusexpert-privacy-overlay--center {
	align-items: center;
	justify-content: center;
}

.plusexpert-privacy-overlay--hidden {
	display: none;
}

.plusexpert-privacy-banner {
	box-sizing: border-box;
	width: 100%;
	max-width: 400px;
	max-height: calc( 100vh - 48px );
	overflow-y: auto;
	background-color: #ffffff;
	color: #18181b;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba( 15, 23, 42, 0.25 ), 0 2px 8px rgba( 15, 23, 42, 0.08 );
	padding: 24px;
	transition: max-width 0.3s ease;
}

.plusexpert-privacy-banner:focus {
	outline: 3px solid #1351d8;
	outline-offset: 2px;
}

.plusexpert-privacy-banner__content {
	display: flex;
	flex-direction: column;
}

.plusexpert-privacy-banner__copy {
	text-align: left;
}

.plusexpert-privacy-banner__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #0f172a;
	text-align: left;
}

.plusexpert-privacy-banner__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #3f3f46;
	text-align: left;
}

.plusexpert-privacy-banner__policy {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
}

.plusexpert-privacy-banner__policy-link,
.plusexpert-privacy-banner__policy-link:visited {
	color: #1351d8;
	font-weight: 600;
	text-decoration: underline;
}

.plusexpert-privacy-banner__policy-link:hover {
	text-decoration: none;
}

.plusexpert-privacy-banner__policy-link:focus-visible {
	outline: 3px solid #1351d8;
	outline-offset: 2px;
	border-radius: 2px;
}

/**
 * Panel de preferencias (Etapa 6B).
 *
 * Colapsado por defecto (max-height: 0, overflow: hidden). banner.js mide
 * scrollHeight y anima max-height/opacity al expandir/contraer — sin
 * librerías, solo transition de CSS. El contenido de hoy es informativo;
 * cuando se conecten categorías reales, se reutiliza este mismo
 * contenedor y esta misma animación.
 */
.plusexpert-privacy-banner__panel {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.08s,
		margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.plusexpert-privacy-banner__panel.is-open {
	opacity: 1;
	margin-top: 18px;
}

.plusexpert-privacy-banner__panel-title {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	text-align: left;
}

.plusexpert-privacy-panel__category {
	border: 1px solid #e4e4e7;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 10px;
	text-align: left;
}

.plusexpert-privacy-panel__category:last-of-type {
	margin-bottom: 0;
}

.plusexpert-privacy-panel__category-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.plusexpert-privacy-panel__category-info {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.plusexpert-privacy-panel__category-name {
	font-size: 13px;
	font-weight: 600;
	color: #0f172a;
	white-space: nowrap;
}

.plusexpert-privacy-panel__category-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #6b7280;
	background-color: #f3f4f6;
	border-radius: 4px;
	padding: 2px 6px;
}

.plusexpert-privacy-panel__category-desc {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: #71717a;
	text-align: left;
}

/* -----------------------------------------------------------------
 * Toggle switch (CSS puro, sin dependencias).
 * -------------------------------------------------------------- */
.plusexpert-privacy-toggle {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 24px;
	flex-shrink: 0;
	cursor: pointer;
}

.plusexpert-privacy-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.plusexpert-privacy-toggle__slider {
	position: absolute;
	inset: 0;
	background-color: #d4d4d8;
	border-radius: 1000px;
	transition: background-color 0.2s ease;
}

.plusexpert-privacy-toggle__slider::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 18px;
	height: 18px;
	background-color: #ffffff;
	border-radius: 50%;
	transition: transform 0.2s ease;
	box-shadow: 0 1px 3px rgba( 15, 23, 42, 0.15 );
}

.plusexpert-privacy-toggle input:checked + .plusexpert-privacy-toggle__slider {
	background-color: #1351d8;
}

.plusexpert-privacy-toggle input:checked + .plusexpert-privacy-toggle__slider::before {
	transform: translateX( 18px );
}

.plusexpert-privacy-toggle input:focus-visible + .plusexpert-privacy-toggle__slider {
	outline: 3px solid #1351d8;
	outline-offset: 2px;
}

.plusexpert-privacy-toggle--disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.plusexpert-privacy-toggle--disabled .plusexpert-privacy-toggle__slider {
	background-color: #a1a1aa;
}

.plusexpert-privacy-toggle--disabled .plusexpert-privacy-toggle__slider::before {
	transform: translateX( 18px );
}

/* -----------------------------------------------------------------
 * Botón "Guardar preferencias" dentro del panel.
 * -------------------------------------------------------------- */
.plusexpert-privacy-panel__save {
	margin-top: 14px;
}

.plusexpert-privacy-banner__button--save-preferences {
	width: 100%;
	background-color: #1351d8;
	border-color: #1351d8;
	color: #ffffff;
}

.plusexpert-privacy-banner__button--save-preferences:hover {
	background-color: #0f3fac;
	border-color: #0f3fac;
}

.plusexpert-privacy-banner__form {
	margin: 18px 0 0;
}

.plusexpert-privacy-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.plusexpert-privacy-banner__button {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-height: 42px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	background-color: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.plusexpert-privacy-banner__button--accept {
	background-color: #1351d8;
	border-color: #1351d8;
	color: #ffffff;
}

.plusexpert-privacy-banner__button--accept:hover {
	background-color: #0f3fac;
	border-color: #0f3fac;
}

.plusexpert-privacy-banner__button--reject {
	background-color: #ffffff;
	border-color: #d4d4d8;
	color: #18181b;
}

.plusexpert-privacy-banner__button--reject:hover {
	background-color: #f4f4f5;
}

.plusexpert-privacy-banner__button--configure {
	background-color: #ffffff;
	border-color: #d4d4d8;
	color: #18181b;
}

.plusexpert-privacy-banner__button--configure:hover {
	background-color: #f4f4f5;
}

.plusexpert-privacy-banner__button:focus-visible {
	outline: 3px solid #1351d8;
	outline-offset: 2px;
}

/* -----------------------------------------------------------------
 * Botón flotante para reabrir el panel de consentimiento.
 *
 * Solo visible cuando el visitante ya tomó una decisión. Permite
 * modificar el consentimiento en cualquier momento sin depender
 * del administrador del sitio.
 * -------------------------------------------------------------- */
.plusexpert-privacy-trigger {
	position: fixed;
	bottom: 16px;
	left: 16px;
	z-index: 999998;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #ffffff;
	background-color: #1351d8;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba( 15, 23, 42, 0.15 );
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.plusexpert-privacy-trigger:hover {
	filter: brightness( 0.85 );
	box-shadow: 0 4px 12px rgba( 15, 23, 42, 0.25 );
}

.plusexpert-privacy-trigger:focus-visible {
	outline: 3px solid #1351d8;
	outline-offset: 2px;
}

/**
 * Bloqueo de scroll del body mientras el modal está visible (aplicado por
 * assets/js/banner.js). No interviene en el consentimiento: es solo una
 * mejora de experiencia para que la página no se desplace detrás del
 * overlay.
 */
.plusexpert-privacy-no-scroll {
	overflow: hidden;
}

@media ( max-width: 600px ) {
	.plusexpert-privacy-overlay {
		padding: 16px;
	}

	.plusexpert-privacy-banner {
		max-width: 100%;
		padding: 20px;
		border-radius: 12px;
	}

	.plusexpert-privacy-banner__actions {
		flex-direction: column;
	}

	.plusexpert-privacy-banner__button {
		width: 100%;
	}

	.plusexpert-privacy-trigger {
		bottom: 12px;
		left: 12px;
		padding: 8px 14px;
		font-size: 12px;
	}
}