feat: add reusable button, swipe-button, question-card, and section-icon components

src/components/Componentes/button.tsx

@@ -121,6 +121,8 @@ export function Button({
     "px-4",
     "text-center",
     "transition-opacity",
+    "min-w-0",
+    "overflow-hidden",
     variant === "outlined"
       ? "border border-[#8B8B8B] bg-transparent text-[#8B8B8B]"
       : variant === "dark"
@@ -142,7 +144,7 @@ export function Button({
         name="arrowRight"
         aria-hidden="true"
         className={[
-          "size-5",
+          "size-5 shrink-0",
           direction === "left"
             ? "rotate-180 rtl:rotate-0"
             : "rotate-0 rtl:rotate-180",
@@ -157,16 +159,16 @@ export function Button({
   const content = isLoading ? (
     <LoadingThreeDot />
   ) : (
-    <span className="flex w-full items-center justify-center gap-2">
+    <span className="flex w-full min-w-0 max-w-full items-center justify-center gap-2">
       {renderArrow("left")}
-      <span className="flex min-w-0 flex-col items-center justify-center">
-        <span className="flex items-center justify-center gap-2 text-center group-16 font-semibold leading-none">
+      <span className="flex min-w-0 max-w-full flex-1 flex-col items-center justify-center">
+        <span className="block w-full min-w-0 max-w-full truncate text-center group-16 font-semibold leading-none">
           {children}
         </span>
         {description && !isOutlined ? (
           <span
             id={countdownId}
-            className="mt-1 text-center group-10 font-semibold leading-none text-white"
+            className="mt-1 block w-full min-w-0 max-w-full truncate text-center group-10 font-semibold leading-none text-white"
           >
             {description}
           </span>

src/components/Componentes/question-card.tsx

@@ -109,7 +109,13 @@ export function QuestionCard({
             <SectionIcon
               name={resolvedIconKey}
               aria-hidden="true"
-              className="size-[30px]"
+              className={
+                resolvedIconKey === "criteria" ||
+                resolvedIconKey === "verification" ||
+                resolvedIconKey === "checklist"
+                  ? "size-[38px]"
+                  : "size-[30px]"
+              }
             />
           </div>
 

src/components/Componentes/section-icon.tsx

@@ -38,7 +38,7 @@ const SECTION_ICON_DATA_URIS: Record<string, string> = {
 
 export function SectionIcon({
   name,
-  className = "size-[30px]",
+  className,
   ...props
 }: {
   name: SectionIconName;
@@ -47,12 +47,17 @@ export function SectionIcon({
   const dataUri = SECTION_ICON_DATA_URIS[name];
   if (!dataUri) return null;
 
+  const defaultSize =
+    name === "criteria" || name === "verification" || name === "checklist"
+      ? "size-[38px]"
+      : "size-[30px]";
+
   return (
     <svg
       viewBox="0 0 96 96"
       fill="none"
       aria-hidden="true"
-      className={className}
+      className={className ?? defaultSize}
       {...props}
     >
       <image href={dataUri} width="96" height="96" />

src/components/Componentes/swipe-button.tsx

@@ -57,9 +57,15 @@ export function SwipeButton({
       type="button"
       disabled={disabled || clicked}
       onClick={handleClick}
-      className={`flex-1 h-[52px] rounded-[11px] ${buttonBg} text-white font-semibold group-16 flex items-center justify-center cursor-pointer transition-all active:scale-[0.98] hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed`}
+      className={`flex-1 min-w-0 h-[52px] rounded-[11px] px-3 ${buttonBg} text-white font-semibold group-16 flex items-center justify-center cursor-pointer transition-all active:scale-[0.98] hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed`}
     >
-      {clicked ? <LoadingThreeDot /> : text}
+      {clicked ? (
+        <LoadingThreeDot />
+      ) : (
+        <span className="block w-full min-w-0 max-w-full truncate text-center">
+          {text}
+        </span>
+      )}
     </button>
   );
 
@@ -70,9 +76,11 @@ export function SwipeButton({
         <button
           type="button"
           onClick={onCancel}
-          className="flex-1 h-[52px] rounded-[11px] border border-[#8B8B8B] bg-transparent text-[#8B8B8B] font-semibold group-16 flex items-center justify-center cursor-pointer transition-all active:scale-[0.98] hover:opacity-90"
+          className="flex-1 min-w-0 h-[52px] rounded-[11px] px-3 border border-[#8B8B8B] bg-transparent text-[#8B8B8B] font-semibold group-16 flex items-center justify-center cursor-pointer transition-all active:scale-[0.98] hover:opacity-90"
         >
-          {cancelLabel}
+          <span className="block w-full min-w-0 max-w-full truncate text-center">
+            {cancelLabel}
+          </span>
         </button>
 
         {/* Action Button */}