/* z-index al máximo posible: evita que widgets de chat, botones "volver
   arriba" u otros elementos flotantes del tema tapen o intercepten los
   clics del aviso. */
#ccm-consent-root {
	position: fixed !important;
	z-index: 2147483647 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	pointer-events: none !important; /* el contenedor en sí no bloquea nada... */
}
#ccm-consent-root > * {
	pointer-events: auto !important; /* ...pero cada pieza (banner, overlay, modal) sí es clicable */
}

.ccm-box {
	background: var(--ccm-bg, #ffffff);
	color: var(--ccm-text-color, #1c1c1c);
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box;
	border: var(--ccm-border-width, 0px) solid var(--ccm-border-color, transparent);
	position: relative;
}
.ccm-box * { box-sizing: border-box; }

/* -------- Presentación: banner inferior -------- */
.ccm-box.ccm-banner {
	width: 100%;
	padding: 18px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	border-top: 3px solid var(--ccm-accent, #4f8cff);
}
.ccm-box.ccm-banner .ccm-content { flex: 1 1 420px; }
.ccm-box.ccm-banner .ccm-actions { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* -------- Presentación: cuadro flotante fijo -------- */
.ccm-box.ccm-floating {
	position: fixed !important;
	/* Sin esto, un elemento con z-index:auto pinta POR DEBAJO de cualquier
	   hermano con z-index explícito (como .ccm-floating-overlay), aunque
	   vaya después en el DOM: el fondo oscuro tapaba el cuadro entero y
	   se comía todos los clics (ni Aceptar ni Cerrar respondían). */
	z-index: 2147483647 !important;
	max-width: 380px;
	width: calc(100% - 32px);
	padding: 20px;
	border-radius: var(--ccm-border-radius, 12px);
	border-top: 4px solid var(--ccm-accent, #4f8cff);
}
.ccm-box.ccm-floating.ccm-pos-bottom-right { right: 16px; bottom: 16px; }
.ccm-box.ccm-floating.ccm-pos-bottom-left  { left: 16px; bottom: 16px; }
.ccm-box.ccm-floating.ccm-pos-center {
	left: 50%; top: 50%; transform: translate(-50%, -50%);
	max-width: 460px;
}
.ccm-floating-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 2147483646 !important;
}
/* Especificidad (id + clase) para ganarle a "#ccm-consent-root > *":
   el fondo oscuro es solo decorativo y nunca debe interceptar clics. */
#ccm-consent-root > .ccm-floating-overlay {
	pointer-events: none !important;
}
.ccm-box.ccm-floating .ccm-actions {
	display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
}

.ccm-title { font-weight: 700; font-size: 16px; margin: 0 0 6px; color: var(--ccm-title-color, #1c1c1c); }
.ccm-text { margin: 0; color: var(--ccm-text-color, #333); }

.ccm-links { margin: 8px 0 0; font-size: 12px; }
.ccm-links a { color: var(--ccm-accent, #4f8cff); text-decoration: underline; }
.ccm-links-sep { margin: 0 6px; color: #999; }

.ccm-btn {
	border: none;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
.ccm-btn-accept  { background: var(--ccm-accent, #4f8cff); color: var(--ccm-btn-text-color, #fff); }
.ccm-btn-reject  { background: #eee; color: #1c1c1c; }
.ccm-btn-edit    {
	background: transparent;
	color: var(--ccm-primary, #1c1c1c);
	border: 1.5px solid var(--ccm-primary, #1c1c1c);
}
.ccm-btn-save    { background: var(--ccm-primary, #1c1c1c); color: var(--ccm-btn-text-color, #fff); width: 100%; margin-top: 14px; }

.ccm-close-btn {
	position: absolute;
	top: 10px;
	right: 12px;
	background: transparent;
	border: none;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #888;
}

/* -------- Modal de preferencias (botón "Configurar") -------- */
.ccm-modal-overlay {
	display: none;
	position: fixed !important;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 2147483646 !important;
}
.ccm-modal-overlay.ccm-open { display: block; }

.ccm-panel {
	display: none;
	position: fixed !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--ccm-bg, #ffffff);
	color: var(--ccm-text-color, #1c1c1c);
	z-index: 2147483647 !important;
	width: 90%;
	max-width: 480px;
	max-height: 82vh;
	overflow-y: auto;
	border-radius: var(--ccm-border-radius, 12px);
	padding: 20px;
	box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	box-sizing: border-box;
}
.ccm-panel * { box-sizing: border-box; }
.ccm-panel.ccm-open { display: block; }

.ccm-panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}
.ccm-panel-title { font-weight: 700; font-size: 16px; margin: 0; color: var(--ccm-title-color, #1c1c1c); }
.ccm-panel-close {
	background: transparent; border: none; font-size: 20px; line-height: 1;
	cursor: pointer; color: #888;
}

.ccm-cat-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 10px 0; border-bottom: 1px solid #f2f2f2;
}
.ccm-cat-row:last-child { border-bottom: none; }
.ccm-cat-name { font-weight: 600; }
.ccm-cat-tag { font-weight: 400; color: #999; }
.ccm-cat-desc { color: #777; font-size: 12px; margin-top: 2px; }
.ccm-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; margin-left: 12px; }
.ccm-switch input { opacity: 0; width: 0; height: 0; }
.ccm-slider {
	position: absolute; cursor: pointer; inset: 0;
	background: #ccc; border-radius: 22px; transition: 0.15s;
}
.ccm-slider:before {
	content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px;
	background: #fff; border-radius: 50%; transition: 0.15s;
}
.ccm-switch input:checked + .ccm-slider { background: var(--ccm-accent, #4f8cff); }
.ccm-switch input:checked + .ccm-slider:before { transform: translateX(18px); }
.ccm-switch input:disabled + .ccm-slider { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 600px) {
	.ccm-box.ccm-banner { flex-direction: column; align-items: stretch; }
	.ccm-box.ccm-banner .ccm-actions { justify-content: stretch; }
	.ccm-box.ccm-banner .ccm-actions .ccm-btn { flex: 1 1 auto; }
}