From 7c8b034756a9fd9cdfb437e15b21b0fc1fec436a Mon Sep 17 00:00:00 2001
From: markosbenitez <msebem@gmail.com>
Date: Tue, 23 Jun 2026 22:12:00 -0300
Subject: [PATCH] =?UTF-8?q?Bug=20corregido=20=E2=80=94=20duplicaci=C3=B3n?=
 =?UTF-8?q?=20de=20enunciado=20+=20fade=20mal=20posicionado?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/globals.css                       | 14 +++++++++++---
 components/widgets/checkbox-group.tsx |  7 ++++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 4448360..50694ff 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -63,7 +63,11 @@ body {
 .skip-link:focus { left: 4px; }
 
 /* ── Screen reader only ── */
-.sr-only {
+/* El legend/label de los widgets dentro del wizard se oculta visualmente —
+   el enunciado ya se muestra una sola vez en .wizard-prompt-block. Se deja
+   el texto accesible (nombre del fieldset/label) en vez de quitarlo. */
+.sr-only,
+.wizard-answer-area .question-legend {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -586,9 +590,13 @@ body {
   margin: 0;
 }
 
-/* Área de respuesta: altura máxima + scroll interno + fade inferior cuando hay más abajo. */
+/* Área de respuesta: altura máxima + scroll interno + fade inferior cuando hay más abajo.
+   flex: 0 1 auto (NO flex:1) — mide según su contenido, nunca se estira a llenar el alto
+   disponible. Si creciera con flex:1, una pregunta corta (3 opciones) dejaría la caja con
+   espacio vacío abajo y el fade ::after (sticky bottom:0) quedaría flotando justo después
+   del contenido real, lejos del borde inferior visual de la caja — en vez de pegado a él. */
 .wizard-answer-area {
-  flex: 1;
+  flex: 0 1 auto;
   min-height: 0;
   max-height: 360px;
   overflow-y: auto;
diff --git a/components/widgets/checkbox-group.tsx b/components/widgets/checkbox-group.tsx
index 461b08a..fdb7e84 100644
--- a/components/widgets/checkbox-group.tsx
+++ b/components/widgets/checkbox-group.tsx
@@ -40,13 +40,14 @@ export function CheckboxGroup({
         {required && <span className="required-mark" aria-hidden="true"> *</span>}
         {required && <span className="sr-only"> (obligatorio)</span>}
       </legend>
-      {maxSelect !== null ? (
+      {/* El hint estático ("Podés marcar más de una opción") ya vive en
+          wizard-prompt-block (question.hint) — acá solo el contador vivo,
+          que es información que no está en ningún otro lado. */}
+      {maxSelect !== null && (
         <p className="max-select-hint" aria-live="polite">
           Elegí hasta {maxSelect} opciones
           {value.length > 0 && ` · ${value.length}/${maxSelect} seleccionadas`}
         </p>
-      ) : (
-        <p className="max-select-hint">Podés marcar más de una opción</p>
       )}
       <div className="options-list" role="list">
         {options.map((opt) => {