/*
 * Cookies LSSI España 1.3 – estilos.
 * Colores desde Ajustes → Apariencia: --lssic-primary, --lssic-bg, --lssic-text, --lssic-side, --lssic-btn-text.
 * Todo va con selectores de ID (#lssic-banner, #lssic-panel) para que el tema o Elementor
 * no cambien tamaños de títulos, botones ni márgenes.
 */
#lssic-banner, #lssic-panel, .lssic-float, .lssic-ph, .lssic-policy {
	--lssic-radius: 12px;
	--lssic-line: color-mix(in srgb, var(--lssic-text) 13%, transparent);
	--lssic-soft: color-mix(in srgb, var(--lssic-text) 5%, var(--lssic-bg));
	--lssic-muted: color-mix(in srgb, var(--lssic-text) 68%, var(--lssic-bg));
}
#lssic-banner, #lssic-panel, .lssic-ph {
	font-size: 15px !important; line-height: 1.5 !important; color: var(--lssic-text); box-sizing: border-box;
	text-align: left; -webkit-font-smoothing: antialiased;
}
#lssic-banner *, #lssic-panel *, .lssic-ph * { box-sizing: border-box; }
#lssic-banner :is(h2, h3, p, ul, li, dl, dt, dd, code, span, label, a, button),
#lssic-panel :is(h2, h3, p, ul, li, dl, dt, dd, code, span, label, a, button) {
	font-family: inherit !important; letter-spacing: normal !important; text-transform: none !important;
	text-shadow: none !important; float: none;
}
#lssic-banner :is(h2, h3, p, ul, li, dl, dt, dd), #lssic-panel :is(h2, h3, p, ul, li, dl, dt, dd) { margin: 0; padding: 0; color: inherit; }
#lssic-banner ul, #lssic-panel ul { list-style: none; }
#lssic-banner li::before, #lssic-panel li::before, #lssic-banner li::marker, #lssic-panel li::marker { content: none; }
#lssic-banner a, #lssic-panel a { color: inherit !important; text-decoration: underline !important; text-underline-offset: 2px; font-weight: 600; }
#lssic-banner[hidden], #lssic-panel[hidden], .lssic-float[hidden], #lssic-panel .lssic-cat__body[hidden] { display: none !important; }
html.lssic-lock { overflow: hidden; }

/* ---------- Botones (Aceptar y Rechazar idénticos) ---------- */
#lssic-banner .lssic-btn, #lssic-panel .lssic-btn, .lssic-ph .lssic-btn {
	appearance: none; cursor: pointer; margin: 0; box-shadow: none;
	font-family: inherit !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.2 !important;
	letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important;
	padding: 11px 20px !important; min-height: 46px; min-width: 0; width: auto; height: auto;
	border-radius: 8px !important; border: 2px solid var(--lssic-primary) !important; transition: filter .15s, background-color .15s;
}
#lssic-banner .lssic-btn--main, #lssic-panel .lssic-btn--main, .lssic-ph .lssic-btn--main {
	background: var(--lssic-primary) !important; color: var(--lssic-btn-text) !important;
}
#lssic-banner .lssic-btn--ghost, #lssic-panel .lssic-btn--ghost, .lssic-ph .lssic-btn--ghost {
	background: transparent !important; color: var(--lssic-text) !important;
}
#lssic-banner .lssic-btn:hover, #lssic-panel .lssic-btn:hover, .lssic-ph .lssic-btn:hover { filter: brightness(1.06); }
#lssic-banner .lssic-btn--ghost:hover, #lssic-panel .lssic-btn--ghost:hover { background: color-mix(in srgb, var(--lssic-primary) 12%, transparent) !important; }
#lssic-banner :focus-visible, #lssic-panel :focus-visible, .lssic-float:focus-visible, .lssic-ph :focus-visible,
#lssic-banner .lssic-switch input:focus-visible + .lssic-switch__ui, #lssic-panel .lssic-switch input:focus-visible + .lssic-switch__ui {
	outline: 3px solid var(--lssic-text) !important; outline-offset: 2px;
}

/* ---------- Interruptores y «Siempre activas» ---------- */
#lssic-banner .lssic-switch, #lssic-panel .lssic-switch { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; margin: 0; padding: 0; }
#lssic-banner .lssic-switch input, #lssic-panel .lssic-switch input {
	position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1;
}
#lssic-banner .lssic-switch__ui, #lssic-panel .lssic-switch__ui {
	display: block; width: 46px; height: 26px; border-radius: 26px; position: relative; transition: background .15s;
	background: color-mix(in srgb, var(--lssic-text) 28%, var(--lssic-bg));
}
#lssic-banner .lssic-switch__ui::after, #lssic-panel .lssic-switch__ui::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
	background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
#lssic-banner .lssic-switch input:checked + .lssic-switch__ui, #lssic-panel .lssic-switch input:checked + .lssic-switch__ui { background: var(--lssic-primary); }
#lssic-banner .lssic-switch input:checked + .lssic-switch__ui::after, #lssic-panel .lssic-switch input:checked + .lssic-switch__ui::after { transform: translateX(20px); }
#lssic-banner .lssic-always, #lssic-panel .lssic-always {
	flex-shrink: 0; white-space: nowrap; font-size: 12px !important; font-weight: 700; line-height: 1.2 !important;
	padding: 5px 10px; border-radius: 20px; color: var(--lssic-text);
	background: color-mix(in srgb, var(--lssic-primary) 22%, var(--lssic-bg));
}

/* ---------- Aviso (primera capa) ---------- */
#lssic-banner { position: fixed; z-index: 2147483000; }
#lssic-banner .lssic-banner__box { background: var(--lssic-bg); display: flex; gap: 20px; align-items: center; }
#lssic-banner .lssic-banner__title { margin: 0 0 6px; font-size: 17px !important; line-height: 1.3 !important; font-weight: 700; }
#lssic-banner .lssic-banner__text { font-size: 14px !important; line-height: 1.55 !important; }
#lssic-banner .lssic-banner__btns { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* Barra inferior */
#lssic-banner.lssic-banner--bar { left: 0; right: 0; bottom: 0; }
#lssic-banner.lssic-banner--bar .lssic-banner__box {
	padding: 18px max(20px, calc((100vw - 1200px) / 2));
	border-top: 3px solid var(--lssic-primary); box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
}
/* Caja en esquina */
#lssic-banner.lssic-banner--box { left: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); }
#lssic-banner.lssic-banner--box .lssic-banner__box {
	flex-direction: column; align-items: stretch; padding: 20px; border-radius: var(--lssic-radius);
	border-top: 4px solid var(--lssic-primary); box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
}
/* Ventana centrada */
#lssic-banner.lssic-banner--modal { inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .5); padding: 16px; }
#lssic-banner.lssic-banner--modal .lssic-banner__box {
	flex-direction: column; align-items: stretch; gap: 18px; width: min(600px, 100%); max-height: calc(100vh - 32px);
	overflow-y: auto; padding: 28px; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
#lssic-banner.lssic-banner--box .lssic-banner__btns, #lssic-banner.lssic-banner--modal .lssic-banner__btns { display: grid; grid-template-columns: 1fr 1fr; }
#lssic-banner.lssic-banner--box .lssic-btn--ghost { grid-column: 1 / -1; }

/* Finalidades dentro de la ventana centrada */
#lssic-banner .lssic-banner__cats { border: 1px solid var(--lssic-line); border-radius: 10px; overflow: hidden; }
#lssic-banner .lssic-bcat { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; }
#lssic-banner .lssic-bcat + .lssic-bcat { border-top: 1px solid var(--lssic-line); }
#lssic-banner .lssic-bcat__name { font-size: 14px !important; line-height: 1.35 !important; font-weight: 700; }
#lssic-banner .lssic-bcat__desc { font-size: 12.5px !important; line-height: 1.45 !important; color: var(--lssic-muted); margin-top: 2px; }

/* ---------- Panel de configuración (2 columnas) ---------- */
#lssic-panel { position: fixed; inset: 0; z-index: 2147483001; display: grid; place-items: center; padding: 24px; }
#lssic-panel .lssic-panel__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
#lssic-panel .lssic-panel__box {
	position: relative; background: var(--lssic-bg); width: min(1040px, 100%); height: min(680px, calc(100vh - 48px));
	display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; outline: none;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
#lssic-panel .lssic-x {
	position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; min-height: 0; display: grid; place-items: center;
	padding: 0 !important; margin: 0; border: 0 !important; border-radius: 50% !important; box-shadow: none !important;
	background: transparent !important; color: var(--lssic-text) !important;
	font-size: 26px !important; line-height: 1 !important; font-weight: 400 !important; cursor: pointer;
}
#lssic-panel .lssic-x:hover { background: var(--lssic-soft) !important; }

#lssic-panel .lssic-panel__grid {
	flex: 1; min-height: 0; display: grid;
	grid-template-columns: minmax(280px, 5fr) 7fr; grid-template-rows: auto 1fr;
	grid-template-areas: "about cats" "resp cats";
}
#lssic-panel .lssic-panel__about, #lssic-panel .lssic-panel__resp { background: var(--lssic-side); border-right: 1px solid var(--lssic-line); }
#lssic-panel .lssic-panel__about { grid-area: about; padding: 32px 30px 18px; }
#lssic-panel .lssic-panel__resp { grid-area: resp; padding: 0 30px 28px; overflow-y: auto; }
#lssic-panel .lssic-panel__cats { grid-area: cats; padding: 30px 30px 24px; overflow-y: auto; }

#lssic-panel .lssic-panel__title { font-size: 22px !important; line-height: 1.25 !important; font-weight: 700 !important; margin: 0 0 10px; }
#lssic-panel .lssic-panel__intro { font-size: 14px !important; line-height: 1.55 !important; margin: 0 0 12px; }
#lssic-panel .lssic-panel__policy { font-size: 14px !important; }
#lssic-panel .lssic-panel__subtitle { font-size: 15px !important; line-height: 1.3 !important; font-weight: 700 !important; margin: 0 0 14px; }
#lssic-panel .lssic-panel__cats-title { padding-right: 48px; }

#lssic-panel .lssic-panel__resp .lssic-panel__subtitle { padding-top: 18px; border-top: 1px solid var(--lssic-line); }
#lssic-panel .lssic-resp { display: grid; gap: 10px; }
#lssic-panel .lssic-resp dt { font-size: 12px !important; line-height: 1.3 !important; color: var(--lssic-muted); font-weight: 400; }
#lssic-panel .lssic-resp dd { font-size: 14px !important; line-height: 1.4 !important; font-weight: 600; word-break: break-word; }

#lssic-panel .lssic-cat { border: 1px solid var(--lssic-line); border-radius: 10px; margin: 0 0 10px; padding: 14px 16px; background: var(--lssic-bg); }
#lssic-panel .lssic-cat--always { background: var(--lssic-soft); }
#lssic-panel .lssic-cat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
#lssic-panel .lssic-cat__name { font-size: 15px !important; line-height: 1.3 !important; font-weight: 700 !important; margin: 0 0 4px; }
#lssic-panel .lssic-cat__desc { font-size: 13px !important; line-height: 1.5 !important; color: var(--lssic-muted); }
#lssic-panel .lssic-cat__head > .lssic-switch, #lssic-panel .lssic-cat__head > .lssic-always { margin-top: 1px; }
#lssic-panel .lssic-cat__toggle {
	display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 2px 0 !important; min-height: 0; width: auto;
	background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
	color: var(--lssic-text) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.3 !important;
	text-decoration: underline !important; text-underline-offset: 3px; cursor: pointer;
}
#lssic-panel .lssic-cat__toggle::before {
	content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(-45deg); transition: transform .15s; flex-shrink: 0;
}
#lssic-panel .lssic-cat__toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
#lssic-panel .lssic-cat__body { padding-top: 10px; }
#lssic-panel .lssic-cat__empty { font-size: 13px !important; font-style: italic; color: var(--lssic-muted); }

/* Listado de cookies dentro de cada finalidad */
#lssic-panel .lssic-clist { display: grid; gap: 8px; }
#lssic-panel .lssic-clist__item { border-radius: 8px; padding: 10px 12px; background: var(--lssic-soft); }
#lssic-panel .lssic-cat--always .lssic-clist__item { background: var(--lssic-bg); }
#lssic-panel .lssic-clist__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#lssic-panel .lssic-clist__name {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 12.5px !important; font-weight: 700;
	background: none !important; padding: 0 !important; color: var(--lssic-text) !important; word-break: break-all; border: 0;
}
#lssic-panel .lssic-clist__dur { font-size: 12px !important; color: var(--lssic-muted); white-space: nowrap; }
#lssic-panel .lssic-clist__owner { font-size: 12px !important; line-height: 1.4 !important; color: var(--lssic-muted); margin-top: 3px; }
#lssic-panel .lssic-clist__purpose { font-size: 13px !important; line-height: 1.45 !important; margin-top: 4px; }

#lssic-panel .lssic-panel__foot {
	display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
	padding: 16px 30px; border-top: 1px solid var(--lssic-line); background: var(--lssic-bg);
}

/* ---------- Botón flotante para cambiar o retirar el consentimiento ---------- */
.lssic-float {
	position: fixed !important; left: 16px; bottom: 16px; z-index: 2147482999; width: 46px !important; height: 46px !important;
	min-height: 0; padding: 0 !important; margin: 0; border: 0 !important; border-radius: 50% !important;
	background: var(--lssic-primary) !important; color: var(--lssic-btn-text) !important; cursor: pointer;
	display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* ---------- Aviso en lugar de iframes bloqueados ---------- */
.lssic-ph {
	background: var(--lssic-soft, #f3f4f6); border: 1px dashed var(--lssic-line, #ccc); border-radius: 10px;
	padding: 24px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px;
	aspect-ratio: 16 / 9; width: 100%; margin: 0 0 1em;
}
.lssic-ph p { margin: 0; max-width: 60ch; }
.lssic-ph__btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Tablas de la política ([lssi_cookies_tabla] y [lssi_cookies_politica]) ---------- */
.lssic-policy .lssic-table-wrap { overflow-x: auto; margin: 0 0 1.5em; }
.lssic-policy .lssic-table { width: 100%; border-collapse: collapse; font-size: .92em; margin: 0; }
.lssic-policy .lssic-table th, .lssic-policy .lssic-table td { text-align: left; padding: 9px 10px; border: 1px solid var(--lssic-line); vertical-align: top; }
.lssic-policy .lssic-table th { background: var(--lssic-soft); font-weight: 700; }
.lssic-policy .lssic-table code { font-size: .95em; background: none; padding: 0; color: inherit; word-break: break-all; }
.lssic-policy .lssic-resp-list { padding-left: 1.2em; }
.lssic-policy .lssic-btn-link { font-weight: 600; }

/* ---------- Móvil ---------- */
@media (max-width: 782px) {
	#lssic-banner.lssic-banner--bar .lssic-banner__box { flex-direction: column; align-items: stretch; padding: 16px; }
	#lssic-banner.lssic-banner--bar .lssic-banner__btns { display: grid; grid-template-columns: 1fr 1fr; }
	#lssic-banner.lssic-banner--bar .lssic-btn--ghost { grid-column: 1 / -1; }
	#lssic-banner .lssic-banner__text { max-height: 34vh; overflow-y: auto; }
	#lssic-banner.lssic-banner--modal { padding: 0; align-items: end; }
	#lssic-banner.lssic-banner--modal .lssic-banner__box { padding: 20px; border-radius: 16px 16px 0 0; max-height: 94vh; }
	#lssic-banner .lssic-btn, #lssic-panel .lssic-btn { padding: 11px 12px !important; }

	#lssic-panel { padding: 0; align-items: end; }
	#lssic-panel .lssic-panel__box { height: auto; max-height: 94vh; border-radius: 16px 16px 0 0; }
	#lssic-panel .lssic-panel__grid { overflow-y: auto; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "about" "cats" "resp"; }
	#lssic-panel .lssic-panel__about, #lssic-panel .lssic-panel__resp { border-right: 0; }
	#lssic-panel .lssic-panel__about { padding: 24px 20px 16px; }
	#lssic-panel .lssic-panel__title { padding-right: 40px; font-size: 20px !important; }
	#lssic-panel .lssic-panel__cats { padding: 18px 20px; overflow: visible; }
	#lssic-panel .lssic-panel__cats-title { padding-right: 0; }
	#lssic-panel .lssic-panel__resp { padding: 0 20px 20px; overflow: visible; }
	#lssic-panel .lssic-panel__foot { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 16px; }
	#lssic-panel .lssic-panel__foot .lssic-btn--ghost { grid-column: 1 / -1; }

	.lssic-policy .lssic-table thead { display: none; }
	.lssic-policy .lssic-table, .lssic-policy .lssic-table tbody, .lssic-policy .lssic-table tr, .lssic-policy .lssic-table td { display: block; width: 100%; }
	.lssic-policy .lssic-table tr { border: 1px solid var(--lssic-line); border-radius: 8px; margin-bottom: 10px; padding: 6px 0; }
	.lssic-policy .lssic-table td { border: 0; padding: 4px 12px; }
	.lssic-policy .lssic-table td::before { content: attr(data-label) ": "; font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) {
	#lssic-banner *, #lssic-panel * { transition: none !important; }
}
