style(checkbox): make checkbox card styling 100% identical to radio boxes (pink background + white text on active)

src/components/Componentes/question-checkbox.tsx

@@ -55,10 +55,10 @@ export function QuestionCheckbox({
           <label
             htmlFor={`checkbox-${question.id}`}
             className={[
-              "cursor-pointer rounded-[16px] font-medium text-[14px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3.5 w-full px-5 py-4 text-start leading-relaxed border",
+              "cursor-pointer rounded-[16px] font-semibold text-[15px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3 w-full px-5 py-4 text-start leading-snug",
               isChecked
-                ? "bg-white text-[#181818] border-[#F0445B]"
-                : "bg-[#FAFAFA] text-[#181818] hover:bg-white border-[#F0EDED]",
+                ? "bg-[#F0445B] text-white shadow-[0_8px_20px_rgba(240,68,91,0.25)]"
+                : "bg-[#FAFAFA] text-[#181818] hover:bg-white shadow-[0_2px_6px_rgba(0,0,0,0.03)] border border-[#F0EDED]",
             ].join(" ")}
           >
             <input
@@ -71,19 +71,19 @@ export function QuestionCheckbox({
             />
             <div
               className={[
-                "size-[20px] shrink-0 rounded-[6px] border-[2px] transition-all flex items-center justify-center",
+                "size-[18px] shrink-0 rounded-[5px] border-[2px] transition-all flex items-center justify-center",
                 isChecked
-                  ? "border-[#F0445B] bg-[#F0445B] text-white"
+                  ? "border-white bg-white text-[#F0445B]"
                   : "border-[#D0D5DD] bg-white text-transparent",
               ].join(" ")}
             >
               {isChecked && (
                 <svg
-                  width="12"
-                  height="10"
+                  width="10"
+                  height="8"
                   viewBox="0 0 10 8"
                   fill="none"
-                  className="stroke-current stroke-[2.5]"
+                  className="stroke-current stroke-[2]"
                 >
                   <path
                     d="M1 4L3.5 6.5L9 1"
@@ -143,13 +143,13 @@ export function QuestionCheckbox({
               key={option.id}
               htmlFor={optionId}
               className={[
-                "cursor-pointer rounded-[16px] font-semibold text-[15px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3 border",
+                "cursor-pointer rounded-[16px] font-semibold text-[15px] transition-all duration-200 active:scale-[0.99] flex items-center gap-3",
                 isShortOptions
                   ? "flex-1 min-w-[90px] px-5 py-3.5 text-center justify-center"
                   : "w-full px-5 py-4 text-start leading-snug",
                 isSelected
-                  ? "bg-[#F0445B] text-white border-[#F0445B]"
-                  : "bg-[#FAFAFA] text-[#181818] hover:bg-white border-[#F0EDED]",
+                  ? "bg-[#F0445B] text-white shadow-[0_8px_20px_rgba(240,68,91,0.25)]"
+                  : "bg-[#FAFAFA] text-[#181818] hover:bg-white shadow-[0_2px_6px_rgba(0,0,0,0.03)] border border-[#F0EDED]",
               ].join(" ")}
             >
               <input