/**
 * WS Cookies Hero — banner.css
 *
 * Estilos del banner frontend, modal de preferencias, switches, icono
 * flotante e iframe placeholders.
 *
 * ESTRATEGIA DE ESPECIFICIDAD (v2.0):
 * Todas las reglas van prefijadas por `.wsch-root` para subir la especificidad
 * a (0,2,X) mínimo y resistir reglas globales agresivas de themes / page
 * builders (UiCore, Elementor, Astra, GeneratePress, etc.) que se cuelan
 * con selectores tipo `button`, `button[type="submit"]`, `input[type=checkbox]`,
 * `details`, `summary`, `form input`, etc.
 *
 * Para elementos que requieren especificidad aún mayor (switches contra
 * `input[type=checkbox]` global de UiCore), usamos compuesto:
 *   `.wsch-root input[type="checkbox"].wsch-switch` → (0,3,1).
 *
 * Sistema de diseño: tokens basados en Webshero DS pero encapsulados en
 * --wsch-* para no chocar con themes. Personalizables desde admin
 * (primary/accent/bg/text) inyectados inline en `.wsch-root`.
 */

/* ============================================================================
 * Tokens (paleta Webshero, override-able por admin via --wsch-*)
 * ========================================================================= */

.wsch-root {
	/* Paleta */
	--wsch-primary:        #161514;
	--wsch-primary-hover:  #2a2826;
	--wsch-accent:         #FBFF00;
	--wsch-bg:             #FFFFFF;
	--wsch-text:           #161514;
	--wsch-text-muted:     #6b6660;
	--wsch-border:         #E6E2DC;
	--wsch-border-strong:  #161514;
	--wsch-cream:          #F9F4E9;
	--wsch-cream-2:        #F6F4F0;
	--wsch-beige-2:        #E0DEDB;
	--wsch-white:          #FFFFFF;

	/* Estados (loading/error) */
	--wsch-danger:         #D32F2F;
	--wsch-danger-bg:      #FDEDED;

	/* Sombras y radius */
	--wsch-shadow-sm:      0 1px 2px rgba(22,21,20,.04);
	--wsch-shadow:         0 4px 14px -6px rgba(22,21,20,.12), 0 1px 3px rgba(22,21,20,.04);
	--wsch-shadow-lg:      0 18px 40px -16px rgba(22,21,20,.22);
	--wsch-shadow-btn-h:   0 8px 22px -10px rgba(22,21,20,.35);
	--wsch-radius-sm:      10px;
	--wsch-radius-md:      12px;
	--wsch-radius-card:    14px;
	--wsch-radius-lg:      18px;
	--wsch-radius-pill:    100px;

	--wsch-font:           "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wsch-transition:     180ms cubic-bezier(.2, .7, .3, 1);

	/* Z-index — bumpeados para superar floating contact buttons (wsfc 1010+)
	 * y headers sticky agresivos (algunos themes usan 9000+). */
	--wsch-z-banner:       2147483640;
	--wsch-z-modal:        2147483645;
	--wsch-z-floating:     2147483630;
}

/* ============================================================================
 * Reset defensivo — anula reglas globales agresivas de themes/page builders.
 * Solo aplica DENTRO de .wsch-root, no afecta al resto del sitio.
 * ========================================================================= */

.wsch-root,
.wsch-root *,
.wsch-root *::before,
.wsch-root *::after {
	box-sizing: border-box;
}
.wsch-root button,
.wsch-root input,
.wsch-root select,
.wsch-root textarea,
.wsch-root label {
	font-family: var(--wsch-font);
	font-size: inherit;
	line-height: inherit;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}
/* Algunos themes le meten max-width / display weird a buttons globalmente */
.wsch-root button {
	max-width: none;
	min-height: 0;
}
/* Detalles/resumen: themes a menudo le ponen margin/list-style raros */
.wsch-root details,
.wsch-root summary {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.wsch-root summary { list-style: none; }
.wsch-root summary::-webkit-details-marker { display: none; }

/* ============================================================================
 * Banner principal
 * ========================================================================= */

.wsch-root .wsch-banner {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(120%);
	width: min(1100px, calc(100vw - 32px));
	z-index: var(--wsch-z-banner);
	background-color: var(--wsch-bg) !important;
	background-image: none !important;
	color: var(--wsch-text);
	font-family: var(--wsch-font);
	border: 1px solid var(--wsch-border);
	border-radius: var(--wsch-radius-lg);
	box-shadow: var(--wsch-shadow-lg);
	box-sizing: border-box;
	opacity: 0;
	pointer-events: none;
	transition: transform 320ms cubic-bezier(.2,.7,.3,1), opacity 240ms ease;
}
/* Visibilidad controlada por JS via clase .is-hidden (más robusto que
 * el atributo [hidden] que algunos resets globales pueden pisar). */
.wsch-root .wsch-banner.is-hidden { display: none; }
.wsch-root .wsch-banner[hidden]   { display: block; }
.wsch-root .wsch-banner.is-open {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* Variantes de posición — `.wsch-pos-*` está en el mismo elemento que
 * `.wsch-root`, así que usamos compuesto `.wsch-root.wsch-pos-*` para
 * mantener especificidad (0,2,1) sobre el `.wsch-banner` descendiente. */
.wsch-root.wsch-pos-bottom-left  .wsch-banner { left: 24px; right: auto; transform: translateY(120%); }
.wsch-root.wsch-pos-bottom-left  .wsch-banner.is-open { transform: translateY(0); }
.wsch-root.wsch-pos-bottom-right .wsch-banner { left: auto; right: 24px; transform: translateY(120%); }
.wsch-root.wsch-pos-bottom-right .wsch-banner.is-open { transform: translateY(0); }
.wsch-root.wsch-pos-center .wsch-banner {
	top: 50%; bottom: auto;
	transform: translate(-50%, calc(-50% + 40px));
}
.wsch-root.wsch-pos-center .wsch-banner.is-open { transform: translate(-50%, -50%); }

.wsch-root .wsch-banner__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 22px 26px;
	flex-wrap: wrap;
}
.wsch-root .wsch-banner__copy { flex: 1 1 360px; min-width: 0; }
.wsch-root .wsch-banner__title {
	margin: 0 0 6px;
	font-family: var(--wsch-font);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--wsch-text);
}
.wsch-root .wsch-banner__msg {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--wsch-text-muted);
	font-weight: 500;
}
.wsch-root .wsch-banner__msg a,
.wsch-root .wsch-banner__policy {
	color: var(--wsch-primary);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 2px;
	font-weight: 600;
}
.wsch-root .wsch-banner__msg a:hover,
.wsch-root .wsch-banner__policy:hover { color: var(--wsch-primary-hover); }

/* I4: aviso contextual cuando el banner reaparece por cambio de versión.
 * Se inserta al principio del banner__msg via JS. Diseño integrado: solo un
 * dot accent + texto bold en el mismo color que el body, fluyendo en línea
 * con el mensaje. Sin pill amarillo destacado que rompía la maqueta. */
.wsch-root .wsch-banner__update-notice {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	background: transparent;
	color: var(--wsch-text);
	font-size: inherit;
	font-weight: 700;
	letter-spacing: 0;
	border-radius: 0;
}
.wsch-root .wsch-banner__update-notice::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 7px;
	background: var(--wsch-accent);
	border-radius: 50%;
	vertical-align: 0.12em;
}

.wsch-root .wsch-banner__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* Layout "card" — apila copy y botones (compuesto en .wsch-root). */
.wsch-root.wsch-layout-card .wsch-banner { width: min(420px, calc(100vw - 32px)); height: auto; }
.wsch-root.wsch-layout-card .wsch-banner__inner {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 14px;
	padding: 20px;
}
.wsch-root.wsch-layout-card .wsch-banner__copy    { flex: 0 0 auto; }
.wsch-root.wsch-layout-card .wsch-banner__actions { flex: 0 0 auto; flex-direction: column; gap: 8px; }
.wsch-root.wsch-layout-card .wsch-banner__title   { margin-bottom: 4px; }
.wsch-root.wsch-layout-card .wsch-banner__msg     { line-height: 1.5; }
.wsch-root.wsch-layout-card .wsch-banner__actions .wsch-btn { width: 100%; }

/* ============================================================================
 * Botones — prefijados con .wsch-root para resistir reglas globales.
 * ========================================================================= */

.wsch-root .wsch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	min-height: 40px;
	font-family: var(--wsch-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	cursor: pointer;
	border: 1.5px solid transparent;
	border-radius: var(--wsch-radius-pill);
	background: transparent;
	color: var(--wsch-text);
	white-space: nowrap;
	text-decoration: none;
	transition: var(--wsch-transition);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	position: relative;
}
.wsch-root .wsch-btn:focus-visible {
	outline: 3px solid var(--wsch-accent);
	outline-offset: 2px;
}

/* !important defensivo en propiedades visuales clave. Defienden contra
 * reglas globales de themes/page-builders que apuntan a button[type="submit"],
 * .elementor-button, form button, etc. Necesario para garantizar que los 3
 * botones del modal (Rechazar/Aceptar/Guardar — Guardar es type="submit")
 * tengan el mismo aspecto sin que reglas de Elementor/UiCore pisen el ghost. */
.wsch-root .wsch-btn--primary {
	background-color: var(--wsch-primary) !important;
	background-image: none !important;
	color: #fff !important;
	border-color: var(--wsch-primary) !important;
	box-shadow: var(--wsch-shadow-sm);
}
.wsch-root .wsch-btn--primary:hover {
	background-color: var(--wsch-primary-hover) !important;
	border-color: var(--wsch-primary-hover) !important;
	transform: translateY(-1px);
	box-shadow: var(--wsch-shadow-btn-h);
	color: #fff !important;
}
.wsch-root .wsch-btn--primary:active { transform: translateY(0); }

.wsch-root .wsch-btn--ghost {
	background-color: var(--wsch-white) !important;
	background-image: none !important;
	color: var(--wsch-text) !important;
	border-color: var(--wsch-border) !important;
}
.wsch-root .wsch-btn--ghost:hover {
	background-color: var(--wsch-cream-2) !important;
	border-color: var(--wsch-beige-2) !important;
	color: var(--wsch-text) !important;
}

/* Loading state — texto invisible (color: transparent) + spinner via ::after.
 * El botón mantiene su tamaño para evitar layout shift. Tier 1 C3. */
.wsch-root .wsch-btn[aria-busy="true"],
.wsch-root .wsch-btn:disabled {
	pointer-events: none;
	cursor: not-allowed;
}
.wsch-root .wsch-btn:disabled { opacity: 0.55; }
.wsch-root .wsch-btn[aria-busy="true"] {
	color: transparent !important;
	text-shadow: none !important;
}
.wsch-root .wsch-btn[aria-busy="true"]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid;
	border-color: var(--wsch-text);
	border-top-color: transparent;
	border-radius: 50%;
	animation: wschSpin 700ms linear infinite;
}
.wsch-root .wsch-btn--primary[aria-busy="true"]::after {
	border-color: #fff;
	border-top-color: transparent;
}
@keyframes wschSpin {
	to { transform: rotate(360deg); }
}

/* ============================================================================
 * Modal de preferencias
 * ========================================================================= */

.wsch-root .wsch-modal {
	position: fixed;
	inset: 0;
	z-index: var(--wsch-z-modal);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.wsch-root .wsch-modal.is-hidden { display: none; }
.wsch-root .wsch-modal[hidden]   { display: none; }
.wsch-root .wsch-modal.is-open {
	display: flex;
	animation: wschModalFade 220ms ease;
}

.wsch-root .wsch-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(22,21,20,.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.wsch-root .wsch-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow: hidden;
	background-color: var(--wsch-bg) !important;
	background-image: none !important;
	color: var(--wsch-text);
	font-family: var(--wsch-font);
	border-radius: 8px;
	box-shadow: var(--wsch-shadow-lg);
	box-sizing: border-box;
	animation: wschModalSlide 280ms cubic-bezier(.2,.7,.3,1);
}

.wsch-root .wsch-modal__scroll {
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	padding: 32px 36px;
	box-sizing: border-box;

	scrollbar-width: thin;
	scrollbar-color: var(--wsch-primary) transparent;
}

.wsch-root .wsch-modal__scroll::-webkit-scrollbar { width: 8px; }
.wsch-root .wsch-modal__scroll::-webkit-scrollbar-track,
.wsch-root .wsch-modal__scroll::-webkit-scrollbar-track-piece {
	background: transparent;
	border-radius: 100px;
}
.wsch-root .wsch-modal__scroll::-webkit-scrollbar-thumb {
	background: var(--wsch-primary);
	border-radius: 100px;
	border: 2px solid var(--wsch-bg);
	background-clip: padding-box;
	min-height: 40px;
}
.wsch-root .wsch-modal__scroll::-webkit-scrollbar-thumb:hover {
	background: var(--wsch-primary-hover);
	background-clip: padding-box;
}
.wsch-root .wsch-modal__scroll::-webkit-scrollbar-button {
	display: none;
	height: 0;
	width: 0;
}
.wsch-root .wsch-modal__scroll::-webkit-scrollbar-corner { background: transparent; }

.wsch-root .wsch-modal__close {
	position: absolute;
	top: 14px; right: 14px;
	width: 36px; height: 36px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--wsch-text-muted);
	cursor: pointer;
	transition: var(--wsch-transition);
	padding: 0;
}
.wsch-root .wsch-modal__close:hover    { background: var(--wsch-cream-2); color: var(--wsch-text); }
.wsch-root .wsch-modal__close:focus-visible { outline: 2px solid var(--wsch-text); outline-offset: 2px; }

.wsch-root .wsch-modal__head { margin: 0 0 22px; padding-right: 36px; }
.wsch-root .wsch-modal__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--wsch-text-muted);
	margin: 0 0 8px;
}
.wsch-root .wsch-modal__eyebrow::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--wsch-accent);
	box-shadow: 0 0 0 1px var(--wsch-text);
}
.wsch-root .wsch-modal__title {
	margin: 0 0 10px;
	font-family: var(--wsch-font);
	font-weight: 800;
	font-size: clamp(20px, 3vw, 24px);
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--wsch-text);
}
.wsch-root .wsch-modal__sub {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wsch-text-muted);
	font-weight: 500;
}
.wsch-root .wsch-modal__sub a {
	color: var(--wsch-primary);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 2px;
	font-weight: 600;
}

.wsch-root .wsch-modal__form { display: flex; flex-direction: column; gap: 14px; }

/* Error UI dentro del modal/banner (Tier 1 C6 — feedback de fallo) */
.wsch-root .wsch-error {
	display: none;
	margin: 14px 0 0;
	padding: 12px 14px;
	background: var(--wsch-danger-bg);
	color: var(--wsch-danger);
	border: 1px solid var(--wsch-danger);
	border-radius: var(--wsch-radius-sm);
	font-size: 13px;
	line-height: 1.5;
	font-weight: 600;
}
.wsch-root .wsch-error.is-visible { display: block; }

/* ============================================================================
 * Categorías (preferences)
 * ========================================================================= */

.wsch-root .wsch-cat {
	padding: 16px 18px;
	background-color: var(--wsch-cream-2) !important;
	background-image: none !important;
	border: 1px solid var(--wsch-border);
	border-radius: var(--wsch-radius-md);
	transition: var(--wsch-transition);
}
.wsch-root .wsch-cat:hover { border-color: var(--wsch-beige-2); }
.wsch-root .wsch-cat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.wsch-root .wsch-cat__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wsch-text);
	cursor: pointer;
	margin: 0;
	user-select: none;
}
.wsch-root .wsch-cat__lock {
	display: inline-flex;
	align-items: center;
	color: var(--wsch-text-muted);
}
.wsch-root .wsch-cat__desc {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--wsch-text-muted);
}

.wsch-root .wsch-cat__details {
	margin: 10px 0 0;
	border-top: 1px solid var(--wsch-border);
	padding-top: 10px;
}
.wsch-root .wsch-cat__details-summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--wsch-primary);
	cursor: pointer;
	user-select: none;
	list-style: none;
	padding: 4px 0;
}
.wsch-root .wsch-cat__details-summary::-webkit-details-marker { display: none; }
.wsch-root .wsch-cat__details-summary::marker { display: none; }
.wsch-root .wsch-cat__details-summary::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161514' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px 12px;
	transition: transform 180ms cubic-bezier(.2,.7,.3,1);
	flex-shrink: 0;
}
.wsch-root .wsch-cat__details[open] .wsch-cat__details-summary::before { transform: rotate(90deg); }
.wsch-root .wsch-cat__details-summary:hover { color: var(--wsch-primary-hover); }

.wsch-root .wsch-cat__cookies {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wsch-root .wsch-cat__cookie {
	padding: 8px 10px;
	background: var(--wsch-white);
	border: 1px solid var(--wsch-border);
	border-radius: var(--wsch-radius-sm);
}
.wsch-root .wsch-cat__cookie-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.wsch-root .wsch-cat__cookie-name {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--wsch-text);
	background: var(--wsch-cream-2);
	padding: 2px 6px;
	border-radius: 4px;
	white-space: nowrap;
}
.wsch-root .wsch-cat__cookie-provider,
.wsch-root .wsch-cat__cookie-duration {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 500;
	color: var(--wsch-text-muted);
	letter-spacing: 0.02em;
}
.wsch-root .wsch-cat__cookie-provider::before {
	content: "•";
	color: var(--wsch-text-muted);
	margin-right: 2px;
}
.wsch-root .wsch-cat__cookie-duration::before {
	content: "·";
	color: var(--wsch-text-muted);
	margin-right: 2px;
}
.wsch-root .wsch-cat__cookie-purpose {
	margin: 6px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--wsch-text-muted);
}

/* ============================================================================
 * Switch (input[type=checkbox]) — especificidad reforzada (0,3,1)
 * para superar `body input[type=checkbox]` (0,1,2) de algunos themes.
 * ========================================================================= */

.wsch-root input[type="checkbox"].wsch-switch {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: inline-block;
	width: 38px; height: 22px;
	min-width: 38px; min-height: 22px;
	max-width: 38px; max-height: 22px;
	margin: 0; padding: 0;
	left: auto; top: auto; right: auto; bottom: auto;
	background: #D4CFC8;
	border: 0;
	border-radius: 100px;
	box-shadow: inset 0 1px 2px rgba(22,21,20,.06);
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
	visibility: visible;
	overflow: visible;
	z-index: 0;
	transition: background-color var(--wsch-transition);
	flex-shrink: 0;
	vertical-align: middle;
}
.wsch-root input[type="checkbox"].wsch-switch::before {
	content: "";
	position: absolute;
	top: 2px; left: 2px;
	width: 18px; height: 18px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(22,21,20,.18), 0 1px 2px rgba(22,21,20,.06);
	transition: transform var(--wsch-transition), background-color var(--wsch-transition);
}
.wsch-root input[type="checkbox"].wsch-switch:hover            { background: #c0bbb4; }
.wsch-root input[type="checkbox"].wsch-switch:checked          { background: var(--wsch-primary); }
.wsch-root input[type="checkbox"].wsch-switch:checked::before  { transform: translateX(16px); background: var(--wsch-cream); }
.wsch-root input[type="checkbox"].wsch-switch:checked:hover    { background: var(--wsch-primary-hover); }
.wsch-root input[type="checkbox"].wsch-switch:focus-visible    { outline: 2px solid var(--wsch-primary); outline-offset: 3px; }
.wsch-root input[type="checkbox"].wsch-switch:disabled         { opacity: .55; cursor: not-allowed; }

/* ============================================================================
 * Modal actions (3 botones)
 * ========================================================================= */

.wsch-root .wsch-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--wsch-border);
}
.wsch-root .wsch-modal__actions .wsch-btn {
	flex: 1 1 0;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	line-height: 1.2;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 12.5px;
	min-height: 42px;
	/* Pill radius explícito (50px) — `var(--wsch-radius-pill)=100px` debería
	 * dar el mismo resultado para botones de ≤84px de alto, pero algunos
	 * themes pisan border-radius con reglas `button { border-radius: 0 }` o
	 * similar. !important defiende contra eso, mobile + desktop. */
	border-radius: 50px !important;
}

/* ============================================================================
 * Icono flotante
 * ========================================================================= */

.wsch-root .wsch-floating {
	position: fixed;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wsch-white);
	color: var(--wsch-text);
	border: 1px solid var(--wsch-border);
	box-shadow: var(--wsch-shadow);
	cursor: pointer;
	transition: var(--wsch-transition);
	z-index: var(--wsch-z-floating);
	padding: 0;
}
.wsch-root .wsch-floating.is-hidden { display: none; }
.wsch-root .wsch-floating[hidden]   { display: none; }
.wsch-root .wsch-floating--bottom-left  { left: 18px;  bottom: 18px; }
.wsch-root .wsch-floating--bottom-right { right: 18px; bottom: 18px; }
.wsch-root .wsch-floating:hover {
	background: var(--wsch-primary);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--wsch-shadow-btn-h);
}
.wsch-root .wsch-floating:focus-visible { outline: 3px solid var(--wsch-accent); outline-offset: 2px; }

/* ============================================================================
 * Iframe placeholders (YouTube, Vimeo, Maps...)
 * ========================================================================= */

.wsch-iframe-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	margin: 1em 0;
	padding: 24px;
	background: var(--wsch-cream-2, #F6F4F0);
	border: 1.5px dashed var(--wsch-border, #E6E2DC);
	border-radius: var(--wsch-radius-card, 14px);
	font-family: var(--wsch-font, "Manrope", system-ui, sans-serif);
	color: var(--wsch-text, #161514);
	box-sizing: border-box;
}
.wsch-iframe-placeholder__inner {
	max-width: 360px;
	text-align: center;
}
.wsch-iframe-placeholder__icon { color: var(--wsch-text-muted, #6b6660); margin-bottom: 10px; }
.wsch-iframe-placeholder__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--wsch-text, #161514);
}
.wsch-iframe-placeholder__desc {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--wsch-text-muted, #6b6660);
	line-height: 1.5;
}
.wsch-iframe-placeholder__btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	min-height: 40px;
	background: var(--wsch-primary, #161514);
	color: #fff;
	border: 1.5px solid var(--wsch-primary, #161514);
	border-radius: 100px;
	font-family: var(--wsch-font, "Manrope", system-ui, sans-serif);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: 180ms cubic-bezier(.2,.7,.3,1);
	position: relative;
}
.wsch-iframe-placeholder__btn:hover {
	background: var(--wsch-primary-hover, #2a2826);
	border-color: var(--wsch-primary-hover, #2a2826);
	transform: translateY(-1px);
}
/* Loading state también para botones de iframe placeholder */
.wsch-iframe-placeholder__btn[aria-busy="true"] {
	pointer-events: none;
	cursor: not-allowed;
	color: transparent !important;
}
.wsch-iframe-placeholder__btn[aria-busy="true"]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid #fff;
	border-top-color: transparent;
	border-radius: 50%;
	animation: wschSpin 700ms linear infinite;
}

/* ============================================================================
 * Animaciones
 * ========================================================================= */

@keyframes wschModalFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes wschModalSlide {
	from { opacity: 0; transform: translateY(20px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================================
 * Responsive
 * ========================================================================= */

@media (max-width: 640px) {
	.wsch-root .wsch-banner {
		left: 12px !important;
		right: 12px !important;
		bottom: 12px;
		width: calc(100vw - 24px);
		transform: translateY(120%);
		/* Limitar altura para que el banner no ocupe toda la pantalla cuando
		 * el texto sea largo o el flex-column se descontrole. 70vh deja el
		 * hero/contenido visible detrás. Si el contenido es más alto, scroll
		 * interno. */
		max-height: 70vh;
		max-height: 70dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.wsch-root.wsch-pos-center .wsch-banner { top: auto; transform: translateY(120%); }
	.wsch-root .wsch-banner.is-open { transform: translateY(0) !important; }
	.wsch-root .wsch-banner__inner {
		padding: 16px 18px;
		gap: 14px;
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap; /* evita que wrap genere alturas raras */
	}
	.wsch-root .wsch-banner__copy { flex: 0 0 auto; min-width: 0; }
	.wsch-root .wsch-banner__title { font-size: 15px; }
	.wsch-root .wsch-banner__msg { font-size: 12.5px; line-height: 1.5; }
	.wsch-root .wsch-banner__actions { flex-direction: column; gap: 8px; flex-wrap: nowrap; }
	.wsch-root .wsch-banner__actions .wsch-btn { width: 100%; min-height: 42px; }

	.wsch-root .wsch-modal__actions { flex-direction: column; }
	.wsch-root .wsch-modal__actions .wsch-btn { width: 100%; }
}

/* ============================================================================
 * MOBILE — modal a pantalla completa
 * Breakpoint 880px, slide-down igual que Calendar Meet del DS Webshero.
 * ========================================================================= */
@media (max-width: 880px) {
	.wsch-root .wsch-modal {
		padding: 0;
		align-items: stretch;
		justify-content: stretch;
	}
	.wsch-root .wsch-modal__overlay { display: none; }
	.wsch-root .wsch-modal__dialog {
		width: 100vw;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		transform: translateY(-100%);
		animation: none;
		transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	.wsch-root .wsch-modal.is-open .wsch-modal__dialog { transform: translateY(0); }
	.wsch-root .wsch-modal__scroll {
		max-height: none;
		height: 100%;
		padding: 70px 20px 24px;
	}
	.wsch-root .wsch-modal__close {
		top: 16px;
		right: 16px;
		width: 40px;
		height: 40px;
		background: rgba(22,21,20,.04);
	}
	.wsch-root .wsch-modal__close:hover { background: rgba(22,21,20,.08); }
}

/* ============================================================================
 * Dark mode — INTENCIONADAMENTE DESACTIVADO.
 *
 * Originalmente había aquí un bloque @media (prefers-color-scheme: dark) que
 * invertía la paleta automáticamente. Resultaba en combinaciones imposibles
 * en sitios donde el admin había configurado colores explícitos (la inline
 * style del .wsch-root sobrescribe --wsch-bg / --wsch-text pero NO el resto
 * de tokens dependientes, así que terminabas con "fondo blanco + botones
 * ghost negros + texto oscuro sobre tarjetas oscuras").
 *
 * Conclusión: la paleta del plugin debe respetar lo que el admin configura
 * desde Settings, NO auto-invertirse según preferencia del visitante. Si en
 * el futuro quieres dark mode automático, hazlo opt-in desde admin con un
 * preset completo (no solo tokens parciales) o invierte TODOS los tokens
 * vía inline style desde PHP en función de la elección del admin.
 * ========================================================================= */

/* ============================================================================
 * Print — el banner no debe imprimirse.
 * ========================================================================= */
@media print {
	.wsch-root,
	.wsch-root * {
		display: none !important;
	}
}

/* ============================================================================
 * Reduce motion — accesibilidad
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.wsch-root .wsch-banner,
	.wsch-root .wsch-modal,
	.wsch-root .wsch-modal__dialog,
	.wsch-root .wsch-btn,
	.wsch-root .wsch-floating,
	.wsch-root input[type="checkbox"].wsch-switch,
	.wsch-root input[type="checkbox"].wsch-switch::before {
		transition: none !important;
		animation: none !important;
	}
}