/*
 * Pantalla completa: en vez de intentar ocultar el header/footer del tema (cada tema usa
 * nombres distintos, por eso antes fallaba en algunos sitios), el cuestionario se coloca
 * por encima de todo con position:fixed cubriendo toda la ventana. El JS además lo mueve
 * para que sea hijo directo de <body>, así funciona incluso si el tema envuelve el
 * contenido en algún contenedor con transform/animaciones (muy común en temas con
 * sliders o encabezados fijos), que de otro modo limitarían el "fixed" a ese contenedor.
 */
html.sfq-fullscreen-active,
body.sfq-fullscreen-active { overflow: hidden !important; height: 100%; }

/*
 * Colores personalizables desde el panel. Cada variable solo existe si el administrador
 * eligió un color (se define en el atributo style de .sfq-page); si no, se usa el valor
 * original que aparece como respaldo en cada var(...).
 */
.sfq-page {
	position: fixed !important;
	inset: 0 !important;
	margin: 0 !important;
	z-index: 2147483647 !important;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box; display: grid; place-items: center; padding: 36px 20px; background: var(--sfq-bg, linear-gradient(135deg, #f5f8ff, #e8f7f2)); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.sfq-page * { box-sizing: border-box; }
.sfq-card { width: min(820px, 100%); background: var(--sfq-card, #fff); border-radius: 22px; padding: clamp(26px, 5vw, 58px); box-shadow: 0 18px 55px #18336a20; }
.sfq-card header { text-align: center; }
.sfq-card h1 { margin: 0 0 10px; color: var(--sfq-text, #17243c); font-size: clamp(1.8rem, 4vw, 2.6rem); }
.sfq-card header p { margin: 0; color: var(--sfq-muted, #526075); }

.sfq-question { border: 0; margin: 34px 0 0; padding: 0; }
.sfq-question legend { width: 100%; font-size: 1.1rem; font-weight: 700; color: var(--sfq-text, #1d2a3d); text-align: center; margin-bottom: 16px; }
.sfq-scale { display: flex; justify-content: center; gap: clamp(7px, 2.2vw, 22px); }
.sfq-choice { cursor: pointer; text-align: center; }
.sfq-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sfq-face { display: grid; place-items: center; width: clamp(44px, 9vw, 75px); height: clamp(44px, 9vw, 75px); border: 2px solid transparent; border-radius: 50%; font-size: clamp(25px, 5vw, 44px); transition: transform .15s, background .15s; }
.sfq-choice:hover .sfq-face { transform: translateY(-4px); background: var(--sfq-accent-faint, #f0f7ff); }
.sfq-choice input:focus-visible + .sfq-face { outline: 3px solid var(--sfq-accent, #1769e0); outline-offset: 3px; }
.sfq-choice input:checked + .sfq-face { background: var(--sfq-accent-soft, #dceeff); border-color: var(--sfq-accent, #1769e0); transform: scale(1.1); }
.sfq-percent { display: block; margin-top: 8px; font-size: clamp(.7rem, 1.9vw, .95rem); font-weight: 700; line-height: 1; white-space: nowrap; color: var(--sfq-muted, #526075); transition: color .15s; }
.sfq-choice input:checked ~ .sfq-percent { color: var(--sfq-accent, #1769e0); }

.sfq-submit { display: block; margin: 38px auto 0; background: var(--sfq-accent, #1769e0); color: var(--sfq-btn-text, #fff); border: 0; border-radius: 9px; padding: 14px 28px; font-size: 1rem; font-weight: 700; cursor: pointer; }
.sfq-submit:hover { filter: brightness(.92); }
.sfq-error { min-height: 1.5em; margin: 18px 0 0; text-align: center; color: #b42318; font-weight: 600; }

.sfq-thanks { text-align: center; padding: 35px 0 10px; }
.sfq-thanks-message { font-size: 1.25rem; font-weight: 700; color: var(--sfq-text, #17243c); }
.sfq-countdown-line { color: var(--sfq-muted, inherit); }
.sfq-thanks strong { color: var(--sfq-accent, #1769e0); font-size: 1.4rem; }
.sfq-go-now { margin-top: 14px; background: transparent; color: var(--sfq-accent, #1769e0); border: 2px solid var(--sfq-accent, #1769e0); border-radius: 9px; padding: 10px 24px; font-size: 1rem; font-weight: 700; cursor: pointer; }
.sfq-go-now:hover { background: var(--sfq-accent, #1769e0); color: var(--sfq-btn-text, #fff); }
.sfq-go-now:focus-visible { outline: 3px solid var(--sfq-accent, #1769e0); outline-offset: 3px; }

@media (max-width: 400px) { .sfq-scale { gap: 2px; } .sfq-card { padding: 25px 12px; } }