/* Serficon Cookies - banner.css */

:root {
	--sfck-bg: #ffffff;
	--sfck-text: #1f2933;
	--sfck-link: #006633;
	--sfck-acc-bg: #00bf64;
	--sfck-acc-tx: #ffffff;
	--sfck-rej-bg: #33414d;
	--sfck-rej-tx: #ffffff;
	--sfck-radius: 8px;
}

/* hidden manda siempre (el modal y revisit usan display:flex) */
#sfck-banner[hidden],
#sfck-modal[hidden],
#sfck-revisit[hidden] { display: none !important; }

.sfck-noscroll, .sfck-noscroll body { overflow: hidden !important; }

/* ---------- Banner ---------- */

.sfck-banner {
	position: fixed;
	z-index: 999990;
	background: var(--sfck-bg);
	color: var(--sfck-text);
	box-shadow: 0 4px 30px rgba(14, 31, 24, 0.18);
	font-size: 14px;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease;
}
.sfck-banner.sfck-visible { opacity: 1; transform: translateY(0); }

.sfck-bar-bottom { left: 0; right: 0; bottom: 0; border-top: 1px solid rgba(0,0,0,.08); }
.sfck-bar-top    { left: 0; right: 0; top: 0; border-bottom: 1px solid rgba(0,0,0,.08); transform: translateY(-12px); }
.sfck-bar-top.sfck-visible { transform: translateY(0); }

.sfck-box-left,
.sfck-box-right {
	bottom: 20px;
	max-width: 420px;
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,.08);
}
.sfck-box-left  { left: 20px; }
.sfck-box-right { right: 20px; }

.sfck-banner-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 18px 22px;
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.sfck-box-left .sfck-banner-inner,
.sfck-box-right .sfck-banner-inner { flex-direction: column; align-items: stretch; gap: 14px; }

.sfck-banner-text { flex: 1 1 320px; min-width: 240px; }
.sfck-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.sfck-msg { margin: 0; }
.sfck-msg a { color: var(--sfck-link); text-decoration: underline; }

.sfck-banner-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}
.sfck-box-left .sfck-banner-actions,
.sfck-box-right .sfck-banner-actions { justify-content: flex-end; }

/* ---------- Botones (Aceptar y Rechazar con la misma prominencia - AEPD) ---------- */

.sfck-btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: var(--sfck-radius);
	transition: filter .15s ease, background .15s ease;
}
.sfck-btn:hover { filter: brightness(1.08); }
.sfck-btn:focus-visible { outline: 2px solid var(--sfck-link); outline-offset: 2px; }

.sfck-btn-accept { background: var(--sfck-acc-bg); color: var(--sfck-acc-tx); }
.sfck-btn-reject { background: var(--sfck-rej-bg); color: var(--sfck-rej-tx); }
.sfck-btn-ghost {
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
	font-weight: 500;
}

/* ---------- Modal ---------- */

.sfck-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .2s ease;
}
.sfck-modal.sfck-visible { opacity: 1; }

.sfck-overlay { position: absolute; inset: 0; background: rgba(14, 31, 24, .55); }

.sfck-dialog {
	position: relative;
	background: var(--sfck-bg);
	color: var(--sfck-text);
	width: 100%;
	max-width: 680px;
	max-height: 85vh;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(14, 31, 24, .3);
	display: flex;
	flex-direction: column;
	font-size: 14px;
	line-height: 1.5;
}

.sfck-dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.sfck-dialog-head h2 { margin: 0; font-size: 17px; font-weight: 700; }

.sfck-x {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.sfck-dialog-body { padding: 16px 20px; overflow-y: auto; }
.sfck-intro { margin: 0 0 14px; }

/* Acordeón de categorías */
.sfck-cat { border: 1px solid rgba(0,0,0,.1); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.sfck-cat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: rgba(0,0,0,.025);
}
.sfck-cat-toggle {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	text-align: left;
	flex: 1;
}
.sfck-caret { display: inline-block; transition: transform .15s ease; }
.sfck-open .sfck-caret { transform: rotate(90deg); }
.sfck-count { font-weight: 400; opacity: .6; font-size: 13px; }
.sfck-always { font-size: 12px; font-weight: 600; color: var(--sfck-link); white-space: nowrap; }

.sfck-cat-body { padding: 12px 14px; border-top: 1px solid rgba(0,0,0,.08); }
.sfck-cat-body p { margin: 0 0 10px; }

/* Switch */
.sfck-switch { position: relative; display: inline-block; width: 46px; height: 24px; flex-shrink: 0; }
.sfck-switch input { opacity: 0; width: 0; height: 0; }
.sfck-switch span {
	position: absolute;
	inset: 0;
	background: #c3ccd4;
	border-radius: 24px;
	cursor: pointer;
	transition: background .15s ease;
}
.sfck-switch span::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform .15s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.sfck-switch input:checked + span { background: var(--sfck-acc-bg); }
.sfck-switch input:checked + span::before { transform: translateX(22px); }
.sfck-switch input:focus-visible + span { outline: 2px solid var(--sfck-link); outline-offset: 2px; }

/* Tabla de cookies */
.sfck-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sfck-table th, .sfck-table td {
	text-align: left;
	padding: 6px 8px;
	border-bottom: 1px solid rgba(0,0,0,.08);
	vertical-align: top;
}
.sfck-table th { font-weight: 600; background: rgba(0,0,0,.025); }
.sfck-table code { font-size: 12px; background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; }

.sfck-dialog-foot {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding: 14px 20px;
	border-top: 1px solid rgba(0,0,0,.08);
}

/* ---------- Botón flotante (retirar / cambiar consentimiento) ---------- */

.sfck-revisit {
	position: fixed;
	bottom: 18px;
	z-index: 999980;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background: var(--sfck-acc-bg);
	color: var(--sfck-acc-tx);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(14, 31, 24, .25);
	opacity: 0;
	transform: scale(.8);
	transition: opacity .2s ease, transform .2s ease, filter .15s ease;
}
.sfck-revisit.sfck-visible { opacity: 1; transform: scale(1); }
.sfck-revisit:hover { filter: brightness(1.08); }
.sfck-revisit-left { left: 18px; }
.sfck-revisit-right { right: 18px; }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
	.sfck-banner-inner { padding: 14px 16px; gap: 12px; }
	.sfck-banner-actions { width: 100%; }
	.sfck-banner-actions .sfck-btn { flex: 1 1 auto; text-align: center; }
	.sfck-box-left, .sfck-box-right { left: 10px; right: 10px; bottom: 10px; max-width: none; }

	.sfck-modal { padding: 0; align-items: flex-end; }
	.sfck-dialog { max-height: 92vh; border-radius: 14px 14px 0 0; }
	.sfck-dialog-foot .sfck-btn { flex: 1 1 auto; text-align: center; }
}