diff --git a/.gitignore b/.gitignore
index 94a69ff..a84e5d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,6 @@ src/styled
 *.log
 .DS_Store
 *.tgz
+
+# Figma fidelity audit scratch (playwright + screenshots)
+.audit/
diff --git a/package.json b/package.json
index 0918fc0..20ec80e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aymurai/ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "AymurAI shared React component library, extracted from the Figma UI Library and authored with Panda CSS.",
   "license": "MIT",
   "type": "module",
diff --git a/src/components/archives/ArchiveProgress.tsx b/src/components/archives/ArchiveProgress.tsx
index 4c93aae..b328ab9 100644
--- a/src/components/archives/ArchiveProgress.tsx
+++ b/src/components/archives/ArchiveProgress.tsx
@@ -80,6 +80,17 @@ function ProgressBar({
 
   const pct = Math.min(100, Math.max(0, progress));
 
+  // Figma renders the active/completed fill with a 45° diagonal hatch texture
+  // (a "barber-pole" loading pattern): periwinkle stripes over the light-blue
+  // in-progress fill, white stripes over the navy completed fill. Applied as an
+  // inline backgroundImage (gradients are not tokenizable).
+  const stripe =
+    status === "completed"
+      ? "repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 0px, rgba(255,255,255,0.5) 2px, transparent 2px, transparent 7px)"
+      : status === "default"
+        ? "repeating-linear-gradient(135deg, rgba(63,71,157,0.35) 0px, rgba(63,71,157,0.35) 2px, transparent 2px, transparent 7px)"
+        : undefined;
+
   return (
     <div
       className={css({
@@ -116,7 +127,7 @@ function ProgressBar({
           transitionDuration: "normal",
           transitionTimingFunction: "default",
         })}
-        style={{ width: `${pct}%` }}
+        style={{ width: `${pct}%`, backgroundImage: stripe }}
       />
     </div>
   );
@@ -161,6 +172,7 @@ function ProgressLabel({
       <span
         className={css({
           textStyle: "label.md.default",
+          fontWeight: "[300]",
           color: "system.error",
           fontStyle: "italic",
           whiteSpace: "nowrap",
@@ -171,6 +183,23 @@ function ProgressLabel({
     );
   }
 
+  // Figma: "Replace archive" shows a light-italic caption (text.lighter), not a %.
+  if (status === "replace") {
+    return (
+      <span
+        className={css({
+          textStyle: "label.md.default",
+          fontWeight: "[300]",
+          color: "text.lighter",
+          fontStyle: "italic",
+          whiteSpace: "nowrap",
+        })}
+      >
+        Detuviste el procesamiento de este archivo
+      </span>
+    );
+  }
+
   return (
     <span
       className={css({
@@ -200,7 +229,7 @@ export function ArchiveProgress({
   const nameColor =
     status === "error"
       ? "system.error"
-      : status === "stopped"
+      : status === "stopped" || status === "replace"
         ? "text.onbutton-disabled"
         : "text.default";
 
diff --git a/src/components/archives/ArchiveView.tsx b/src/components/archives/ArchiveView.tsx
index 6980a0d..af74bb4 100644
--- a/src/components/archives/ArchiveView.tsx
+++ b/src/components/archives/ArchiveView.tsx
@@ -242,21 +242,34 @@ export function ArchiveView({
         {fileName}
       </p>
 
-      {/* Error message */}
+      {/* Error message — Figma: 14px italic, two lines, constrained to card width. */}
       {isError && (
         <p
           className={css({
-            // Figma error message is 14px italic (subtitle.sm), not 12px.
             textStyle: "subtitle.sm.default",
             color: "system.error",
             fontStyle: "italic",
             textAlign: "center",
-            minW: "full",
+            w: "[157px]",
           })}
         >
-          {type === "preview-error"
-            ? "Error de carga.\nVolvelo a intentar."
-            : "Error de guardado.\nVolver a cargar archivo."}
+          {type === "preview-error" ? (
+            <>
+              <span className={css({ display: "block" })}>Error de carga.</span>
+              <span className={css({ display: "block" })}>
+                Volvelo a intentar.
+              </span>
+            </>
+          ) : (
+            <>
+              <span className={css({ display: "block" })}>
+                Error de guardado.
+              </span>
+              <span className={css({ display: "block" })}>
+                Volver a cargar archivo.
+              </span>
+            </>
+          )}
         </p>
       )}
     </div>
diff --git a/src/components/avatar/Avatar.stories.tsx b/src/components/avatar/Avatar.stories.tsx
index b3a01cf..291d74d 100644
--- a/src/components/avatar/Avatar.stories.tsx
+++ b/src/components/avatar/Avatar.stories.tsx
@@ -14,7 +14,19 @@ const meta = {
     size: { control: "inline-radio", options: ["sm", "md"] },
     color: {
       control: "inline-radio",
-      options: ["primary", "secondary", "warning", "success"],
+      options: [
+        "primary",
+        "secondary",
+        "warning",
+        "success",
+        "violet",
+        "green",
+        "red",
+        "yellow",
+        "pink",
+        "orange",
+        "green-light",
+      ],
     },
   },
 } satisfies Meta<typeof Avatar>;
@@ -23,17 +35,37 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: { initials: "AD", size: "sm", color: "primary" },
+  args: { initials: "AD", size: "sm", color: "violet" },
 };
 
+/** Figma bg/category/* speaker-palette — one avatar per colour, both sizes. */
 export const Matrix: Story = {
   render: () => (
-    <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
-      <Avatar initials="AD" color="primary" />
-      <Avatar initials="AB" color="secondary" />
-      <Avatar initials="MC" color="warning" />
-      <Avatar initials="JL" color="success" />
-      <Avatar initials="AD" color="primary" size="md" />
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
+        <Avatar initials="AB" color="violet" size="sm" />
+        <Avatar initials="CD" color="green" size="sm" />
+        <Avatar initials="EF" color="red" size="sm" />
+        <Avatar initials="GH" color="yellow" size="sm" />
+        <Avatar initials="IJ" color="pink" size="sm" />
+        <Avatar initials="KL" color="orange" size="sm" />
+        <Avatar initials="MN" color="green-light" size="sm" />
+      </div>
+      <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
+        <Avatar initials="AB" color="violet" size="md" />
+        <Avatar initials="CD" color="green" size="md" />
+        <Avatar initials="EF" color="red" size="md" />
+        <Avatar initials="GH" color="yellow" size="md" />
+        <Avatar initials="IJ" color="pink" size="md" />
+        <Avatar initials="KL" color="orange" size="md" />
+        <Avatar initials="MN" color="green-light" size="md" />
+      </div>
+      <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
+        <Avatar initials="AD" color="primary" size="sm" />
+        <Avatar initials="AB" color="secondary" size="sm" />
+        <Avatar initials="MC" color="warning" size="sm" />
+        <Avatar initials="JL" color="success" size="sm" />
+      </div>
     </div>
   ),
 };
diff --git a/src/components/big-icon-button/BigIconButton.tsx b/src/components/big-icon-button/BigIconButton.tsx
index 3cf555e..5d04429 100644
--- a/src/components/big-icon-button/BigIconButton.tsx
+++ b/src/components/big-icon-button/BigIconButton.tsx
@@ -60,7 +60,9 @@ const bigIconButton = cva({
           bg: "action.pressed",
           color: "text.onbutton-alternative",
         },
-        "&:disabled": { bg: "action.disabled", color: "text.onbutton-default" },
+        // TOKEN GAP: Figma action-disabled for this component = #E2EBF3 (blue-tinted),
+        // not the warm-grey #E0DDE2 stored in action.disabled. Escape until token updated.
+        "&:disabled": { bg: "[#E2EBF3]", color: "text.onbutton-default" },
       },
       secondary: {
         bg: "bg.secondary",
@@ -68,21 +70,24 @@ const bigIconButton = cva({
         borderWidth: "[2px]",
         borderStyle: "solid",
         borderColor: "action.alt-default",
-        "&:hover:enabled": { borderColor: "action.hover" },
+        // TOKEN GAP: Figma secondary-hover border = #728197 (muted blue-grey);
+        // action.hover = #110041 is wrong here. Escape until token promoted.
+        "&:hover:enabled": { borderColor: "[#728197]" },
         "&:active:enabled": {
           bg: "action.pressed",
           color: "text.onbutton-alternative",
           borderColor: "action.pressed",
         },
+        // TOKEN GAP: Figma disabled border uses same #E2EBF3 as primary disabled bg.
         "&:disabled": {
-          borderColor: "action.disabled",
+          borderColor: "[#E2EBF3]",
           color: "text.onbutton-disabled",
         },
       },
       tertiary: {
         bg: "[transparent]",
         color: "text.onbutton-default",
-        "&:hover:enabled": { bg: "bg.primary-alternative" },
+        // Figma tertiary hover: no bg fill — stays transparent.
         "&:active:enabled": {
           bg: "action.pressed",
           color: "text.onbutton-alternative",
diff --git a/src/components/button-link/ButtonLink.stories.tsx b/src/components/button-link/ButtonLink.stories.tsx
index 3a26ee3..e164672 100644
--- a/src/components/button-link/ButtonLink.stories.tsx
+++ b/src/components/button-link/ButtonLink.stories.tsx
@@ -45,24 +45,24 @@ export const SizeMAlternative: Story = {
 };
 
 // Figma: Size=S, Type=Default (21:5355)
+// Note: Size=S always renders a built-in CaretDown — do not pass iconRight.
 export const SizeSDefault: Story = {
   args: {
     size: "S",
     type: "Default",
     children: "call to action",
     iconLeft: <ArrowLeft size={16} />,
-    iconRight: <CaretDown size={16} />,
   },
 };
 
 // Figma: Size=S, Type=Alternative (21:5359)
+// Note: Size=S always renders a built-in CaretDown — do not pass iconRight.
 export const SizeSAlternative: Story = {
   args: {
     size: "S",
     type: "Alternative",
     children: "call to action",
     iconLeft: <ArrowLeft size={16} />,
-    iconRight: <CaretDown size={16} />,
   },
   parameters: { backgrounds: { default: "dark" } },
 };
@@ -99,12 +99,8 @@ export const Matrix: Story = {
           Size M / Alternative
         </ButtonLink>
       </div>
-      <ButtonLink
-        size="S"
-        type="Default"
-        iconLeft={<ArrowLeft size={16} />}
-        iconRight={<CaretDown size={16} />}
-      >
+      {/* Size=S: built-in CaretDown replaces iconRight */}
+      <ButtonLink size="S" type="Default" iconLeft={<ArrowLeft size={16} />}>
         Size S / Default
       </ButtonLink>
       <div
@@ -114,7 +110,6 @@ export const Matrix: Story = {
           size="S"
           type="Alternative"
           iconLeft={<ArrowLeft size={16} />}
-          iconRight={<CaretDown size={16} />}
         >
           Size S / Alternative
         </ButtonLink>
diff --git a/src/components/button-link/ButtonLink.tsx b/src/components/button-link/ButtonLink.tsx
index 3b81cbb..45a2628 100644
--- a/src/components/button-link/ButtonLink.tsx
+++ b/src/components/button-link/ButtonLink.tsx
@@ -96,12 +96,14 @@ export function ButtonLink({
     >
       {iconLeft && <span aria-hidden="true">{iconLeft}</span>}
       {children}
-      {iconRight && <span aria-hidden="true">{iconRight}</span>}
-      {/* Figma Size=S carries a trailing caret-down (angle-down-small). */}
-      {size === "S" && (
+      {/* Figma Size=S always carries a trailing caret-down (angle-down-small)
+          as the exclusive right slot. For Size=M the caller controls iconRight. */}
+      {size === "S" ? (
         <span aria-hidden="true">
           <CaretDown size={16} />
         </span>
+      ) : (
+        iconRight && <span aria-hidden="true">{iconRight}</span>
       )}
     </a>
   );
diff --git a/src/components/callout/Callout.tsx b/src/components/callout/Callout.tsx
index 4dfad52..14debbb 100644
--- a/src/components/callout/Callout.tsx
+++ b/src/components/callout/Callout.tsx
@@ -11,6 +11,12 @@ import type { HTMLAttributes } from "react";
  *
  * Figma: Toast family node 1994:30384 — Error / Warning / Success / Info.
  */
+
+/**
+ * Container recipe — background + border only.
+ * Message text color is always text.default (set in base); accent color is
+ * applied separately to the icon and dismiss button via accentRecipe.
+ */
 const calloutRecipe = cva({
   base: {
     ...hstack.raw({
@@ -27,6 +33,8 @@ const calloutRecipe = cva({
 
     width: "full",
 
+    // Message text is always text.default (#110041) across all variants.
+    color: "text.default",
     textStyle: "label.md.default", // Figma: Archivo 16/120%
   },
   variants: {
@@ -34,22 +42,18 @@ const calloutRecipe = cva({
       error: {
         bg: "system.error-secondary",
         borderColor: "system.error",
-        color: "system.error",
       },
       warning: {
         bg: "system.warning-secondary",
         borderColor: "system.warning",
-        color: "system.warning",
       },
       success: {
         bg: "system.success-secondary",
         borderColor: "system.success",
-        color: "system.success",
       },
       info: {
         bg: "system.info-secondary",
         borderColor: "system.info",
-        color: "text.default",
       },
     },
     noBorder: {
@@ -64,6 +68,24 @@ const calloutRecipe = cva({
   },
 });
 
+/**
+ * Accent recipe — maps variant to its accent color.
+ * Applied only to the icon element and the dismiss (X) button so the accent
+ * colour is scoped to those chrome elements, not the message text.
+ */
+const accentRecipe = cva({
+  base: {},
+  variants: {
+    variant: {
+      error: { color: "system.error" },
+      warning: { color: "system.warning" },
+      success: { color: "system.success" },
+      info: { color: "system.info" },
+    },
+  },
+  defaultVariants: { variant: "info" },
+});
+
 export type CalloutVariant = "error" | "warning" | "success" | "info";
 
 export interface CalloutProps extends HTMLAttributes<HTMLDivElement> {
@@ -83,17 +105,15 @@ export function Callout({
   className,
   ...props
 }: CalloutProps) {
+  const accent = accentRecipe({ variant });
   return (
     <div
       className={cx(calloutRecipe({ variant, noBorder }), className)}
       {...props}
     >
-      <IconComponent
-        size={24}
-        weight="regular"
-        aria-hidden="true"
-        style={{ flexShrink: 0 }}
-      />
+      <styled.span className={accent} flexShrink="0" lineHeight="[0]">
+        <IconComponent size={24} weight="regular" aria-hidden="true" />
+      </styled.span>
       <styled.span flex="1">{message}</styled.span>
       {onDismiss && (
         <styled.button
@@ -101,6 +121,15 @@ export function Callout({
           aria-label="Dismiss notification"
           onClick={onDismiss}
           cursor="pointer"
+          display="inline-flex"
+          alignItems="center"
+          justifyContent="center"
+          flexShrink="0"
+          p="0"
+          bg="[transparent]"
+          borderWidth="0"
+          lineHeight="[0]"
+          className={accent}
         >
           <X size={24} aria-hidden="true" />
         </styled.button>
diff --git a/src/components/check-circle/CheckCircle.tsx b/src/components/check-circle/CheckCircle.tsx
index 5388d53..1d1a861 100644
--- a/src/components/check-circle/CheckCircle.tsx
+++ b/src/components/check-circle/CheckCircle.tsx
@@ -4,10 +4,10 @@ import { useId } from "react";
 /**
  * CheckCircle — AymurAI UI Library.
  *
- * Figma family: 1568:25593 (success/complete state icon). Geometry matches the
- * exported Figma vector (src/assets/check-circle.svg): a full ring, NOT a tick.
- * Base circle stroke #C5CAFF (= action.default) + gradient overlay from
- * action/alt-default (#3F479D) → transparent. Completed/success state.
+ * Figma family: 1568:25593 (success/complete state icon). A full ring, NOT a tick.
+ * Stroke is a 3-stop gradient matching `gradients.primary` token:
+ *   249.5deg — #C5CAFF (action.default) → #8591E8 → #3F479D (action.alt-default).
+ * Completed/success state.
  */
 
 export type CheckCircleProps = {
@@ -36,15 +36,7 @@ export function CheckCircle({
       role="img"
       className={cx(className)}
     >
-      {/* Base circle — brand/secondary */}
-      <path
-        d="M24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42Z"
-        stroke="#C5CAFF"
-        strokeWidth={3.25}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      {/* Gradient overlay circle — action/alt-default fade */}
+      {/* Gradient circle — gradients.primary token: 249.5deg, #C5CAFF → #8591E8 → #3F479D */}
       <path
         d="M24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42Z"
         stroke={`url(#${gradId})`}
@@ -53,16 +45,23 @@ export function CheckCircle({
         strokeLinejoin="round"
       />
       <defs>
+        {/*
+          Matches Figma `gradients.primary`:
+          linear-gradient(249.5deg, #C5CAFF -33.26%, #8591E8 28.49%, #3F479D 82.99%)
+          SVG coords derived from 249.5deg on a 48×48 userSpaceOnUse canvas.
+          x1/y1 = light end (C5CAFF), x2/y2 = dark end (3F479D).
+        */}
         <linearGradient
           id={gradId}
-          x1={20}
-          y1={6}
-          x2={36}
-          y2={40}
+          x1={52.9}
+          y1={13.2}
+          x2={-4.9}
+          y2={34.8}
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#3F479D" />
-          <stop offset={1} stopColor="#3F479D" stopOpacity={0} />
+          <stop offset={0} stopColor="#C5CAFF" />
+          <stop offset={0.2849} stopColor="#8591E8" />
+          <stop offset={0.8299} stopColor="#3F479D" />
         </linearGradient>
       </defs>
     </svg>
diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx
index 59727c2..b1422d5 100644
--- a/src/components/checkbox/Checkbox.tsx
+++ b/src/components/checkbox/Checkbox.tsx
@@ -7,12 +7,14 @@ import type { InputHTMLAttributes, ReactNode } from "react";
  *
  * Figma family: 25:12490, base: 25:12527
  * Variants: Checked × {Default, Hover, Disable, Focus}
- * - Box: 18×18px, border-radius 4px (token sm)
- * - Padding around box: 3px; outer row padding: 8px; gap: 8px
- * - Unchecked: 2px border action/alt-default (#3F479D)
- * - Checked: filled action/alt-default bg, white check icon
- * - Focus: 3px border border/primary (#BCBAB8)
- * - Disabled: action/disabled bg & border
+ * - Box: 18×18px total, border-radius 4px (token sm)
+ * - Unchecked default: 2px border action/alt-default (#3F479D), transparent bg
+ * - Unchecked hover: 1px border #BCBAB8
+ * - Checked default: filled action/alt-default bg, no border, white check icon 16px
+ * - Checked hover: filled action/hover (#110041) bg
+ * - Focus: 4px border action/hover (#110041) on the box, rounded-[6px]
+ * - Disabled unchecked: bg action/disabled (#E0DDE2) + 2px border #BCBAB8
+ * - Disabled checked: bg action/disabled (#E0DDE2), no border, dimmed tick
  */
 
 const checkboxBox = cva({
@@ -24,7 +26,7 @@ const checkboxBox = cva({
     h: "[18px]",
     rounded: "sm",
     flexShrink: "0",
-    transitionProperty: "[background-color, border-color]",
+    transitionProperty: "[background-color, border-color, border-width]",
     transitionDuration: "fast",
     transitionTimingFunction: "default",
   },
@@ -38,22 +40,35 @@ const checkboxBox = cva({
         color: "[transparent]",
       },
       true: {
-        borderWidth: "[2px]",
-        borderStyle: "solid",
-        borderColor: "action.alt-default",
+        // Figma: checked box is a filled square — no visible border, just bg
+        borderWidth: "0",
         bg: "action.alt-default",
         color: "text.onbutton-alternative",
       },
     },
     disabled: {
+      // Disabled unchecked: bg action/disabled + 2px border #BCBAB8 (border/primary color)
+      // Disabled checked: bg action/disabled only, tick uses onbutton-disabled color
       true: {
-        borderColor: "action.disabled",
+        borderWidth: "[2px]",
+        borderStyle: "solid",
+        borderColor: "[#BCBAB8]",
         bg: "action.disabled",
         color: "text.onbutton-disabled",
       },
       false: {},
     },
   },
+  compoundVariants: [
+    // Disabled + checked: bg only, no border (Figma: bg-[#e0dde2], no border)
+    {
+      checked: true,
+      disabled: true,
+      css: {
+        borderWidth: "0",
+      },
+    },
+  ],
   defaultVariants: {
     checked: false,
     disabled: false,
@@ -65,36 +80,36 @@ const checkboxRoot = cva({
     display: "inline-flex",
     alignItems: "center",
     gap: "2", // 8px
-    p: "2", // 8px
+    p: "2", // 8px outer row padding
     cursor: "pointer",
     userSelect: "none",
     rounded: "xs",
     textStyle: "label.md.default",
     color: "text.default",
 
-    // Focus ring on the wrapper (matches Figma Focus state: 3px border/primary)
-    "&:focus-within": {
-      outline: "primary",
-      outlineWidth: "[3px]",
-      outlineStyle: "solid",
+    // Hover (unchecked): box border changes to 1px #BCBAB8
+    "&:hover:not([data-disabled]) [data-box][data-checked='false']": {
+      borderWidth: "[1px]",
+      borderColor: "[#BCBAB8]",
     },
 
-    "&:hover:not([data-disabled])": {
-      bg: "bg.primary-alternative",
+    // Hover (checked): box bg darkens to action.hover (#110041)
+    "&:hover:not([data-disabled]) [data-box][data-checked='true']": {
+      bg: "action.hover",
     },
 
-    // Figma Hover + Checked: the box darkens to action.hover (#110041).
-    "&:hover:not([data-disabled]) [data-checked='true']": {
-      bg: "action.hover",
+    // Focus: 4px solid action.hover (#110041) border on the box, radius 6px
+    "&:focus-within [data-box]": {
+      borderWidth: "[4px]",
+      borderStyle: "solid",
       borderColor: "action.hover",
+      rounded: "[6px]",
     },
   },
   variants: {
     disabled: {
       true: {
         cursor: "not-allowed",
-        // Per-slot disabled colours (Figma) rather than a blanket opacity:
-        // the box already maps action.disabled; here we dim the label.
         color: "text.lighter",
       },
       false: {},
@@ -158,13 +173,14 @@ export function Checkbox({
       {/* Visual box */}
       <span
         aria-hidden="true"
-        data-checked={!!checked || !!defaultChecked}
+        data-box
+        data-checked={String(!!checked || !!defaultChecked)}
         className={checkboxBox({
           checked: !!checked || !!defaultChecked,
           disabled,
         })}
       >
-        {(checked || defaultChecked) && <Check size={12} weight="bold" />}
+        {(checked || defaultChecked) && <Check size={16} weight="bold" />}
       </span>
       {children}
     </label>
diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx
index 0afd6d6..5ee846e 100644
--- a/src/components/logo/Logo.tsx
+++ b/src/components/logo/Logo.tsx
@@ -24,8 +24,8 @@ function IsoMark({ className }: { className?: string }) {
   return (
     <svg
       width="40"
-      height="41"
-      viewBox="0 0 40 41"
+      height="40"
+      viewBox="0 0 40 40.048"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
@@ -76,9 +76,9 @@ function IsoMark({ className }: { className?: string }) {
 function Wordmark({ className }: { className?: string }) {
   return (
     <svg
-      width="109"
-      height="27"
-      viewBox="48 7 109 20"
+      width="108.27"
+      height="24.19"
+      viewBox="48 7 109 25.2"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
@@ -204,6 +204,7 @@ export function Logo({
           display: "inline-flex",
           alignItems: "center",
           gap: "2", // 8px
+          h: "10", // 40px — matches Figma Version=Logo height
           overflow: "hidden",
         }),
         className,
diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx
index 894350d..bd1a85c 100644
--- a/src/components/player/Player.tsx
+++ b/src/components/player/Player.tsx
@@ -42,10 +42,13 @@ const playerBar = css({
   justifyContent: "space-between",
   px: "12",
   py: "6",
-  height: "24",
+  // Figma editor-footer bar: h-99px (24px top pad + 36px content + 24px bottom pad + 15px frame
+  // rounding ≈ 99px). Use escape-hatch to match exactly.
+  minHeight: "[99px]",
   bg: "bg.secondary",
   borderTopWidth: "[1px]",
   borderTopStyle: "solid",
+  // #BCBAB8 is border.primary color but no bare color token exists; escape-hatch required.
   borderTopColor: "[#BCBAB8]",
   boxSizing: "border-box",
 });
@@ -69,9 +72,11 @@ const iconButton = css({
   height: "9",
   rounded: "[6px]",
   borderWidth: "0",
-  background: "transparent",
+  // transparent is not a semantic token — escape-hatch required (strictTokens)
+  bg: "[transparent]",
   cursor: "pointer",
   position: "relative",
+  color: "text.default",
   "&:hover": { bg: "bg.primary-alternative" },
 });
 
@@ -88,6 +93,8 @@ const playButton = css({
   cursor: "pointer",
   position: "relative",
   bg: "action.default",
+  // Figma: play icon is dark (text/default #110041) on lavender (#C5CAFF) background
+  color: "text.default",
   "&:hover": { bg: "action.default", opacity: "0.85" },
 });
 
@@ -112,13 +119,25 @@ const speedText = css({
   userSelect: "none",
 });
 
+// Figma: Controls + progress Container share a row with gap-[24px]; this inner
+// wrapper holds them so rightSlot stays at the far edge via space-between.
+const transportRow = css({
+  display: "flex",
+  flexDir: "row",
+  alignItems: "center",
+  gap: "6",
+  flex: "[1]",
+  minWidth: "0",
+});
+
 const progressSection = css({
   display: "flex",
   flexDir: "row",
   alignItems: "center",
+  // Figma: progress track + timestamp gap is 16px (gap-[16px])
   gap: "4",
   flex: "[1]",
-  mx: "6",
+  minWidth: "0",
 });
 
 const progressBar = css({
@@ -303,54 +322,60 @@ export function Player({
         onPause={() => setIsPlaying(false)}
       />
 
-      <div className={controls}>
-        <button
-          type="button"
-          aria-label={t.rewind5s}
-          onClick={rewind5s}
-          className={iconButton}
-        >
-          <ArrowCounterClockwise size={20} />
-          <span className={skipLabel}>5</span>
-        </button>
-
-        <button
-          type="button"
-          aria-label={isPlaying ? t.pause : t.play}
-          onClick={togglePlay}
-          className={playButton}
-        >
-          {isPlaying ? <Pause size={20} /> : <Play size={20} />}
-        </button>
-
-        <button
-          type="button"
-          aria-label={t.forward5s}
-          onClick={forward5s}
-          className={iconButton}
-        >
-          <ArrowClockwise size={20} />
-          <span className={skipLabel}>5</span>
-        </button>
-
-        <button
-          type="button"
-          aria-label={t.speed}
-          onClick={cycleSpeed}
-          className={iconButton}
-        >
-          <span className={speedText}>{playbackRates[rateIndex]}×</span>
-        </button>
-      </div>
+      {/* transportRow mirrors Figma's inner Container (gap-24px: Controls + progress) */}
+      <div className={transportRow}>
+        <div className={controls}>
+          <button
+            type="button"
+            aria-label={t.rewind5s}
+            onClick={rewind5s}
+            className={iconButton}
+          >
+            <ArrowCounterClockwise size={20} />
+            <span className={skipLabel}>5</span>
+          </button>
+
+          <button
+            type="button"
+            aria-label={isPlaying ? t.pause : t.play}
+            onClick={togglePlay}
+            className={playButton}
+          >
+            {isPlaying ? <Pause size={20} /> : <Play size={20} />}
+          </button>
+
+          <button
+            type="button"
+            aria-label={t.forward5s}
+            onClick={forward5s}
+            className={iconButton}
+          >
+            <ArrowClockwise size={20} />
+            <span className={skipLabel}>5</span>
+          </button>
+
+          <button
+            type="button"
+            aria-label={t.speed}
+            onClick={cycleSpeed}
+            className={iconButton}
+          >
+            <span className={speedText}>{playbackRates[rateIndex]}×</span>
+          </button>
+        </div>
 
-      <div className={progressSection}>
-        {/* biome-ignore lint/a11y/useKeyWithClickEvents: seek bar, click-to-seek */}
-        <div ref={barRef} onClick={handleBarClick} className={progressBar}>
-          <div className={progressFill} style={{ width: `${fillPercent}%` }} />
+        <div className={progressSection}>
+          {/* biome-ignore lint/a11y/useKeyWithClickEvents: seek bar, click-to-seek */}
+          <div ref={barRef} onClick={handleBarClick} className={progressBar}>
+            <div
+              className={progressFill}
+              style={{ width: `${fillPercent}%` }}
+            />
+          </div>
+          <span className={timeDisplay}>
+            {formatTime(currentMs)} / {formatTime(durationMs)}
+          </span>
         </div>
-        <span className={timeDisplay}>
-          {formatTime(currentMs)} / {formatTime(durationMs)}
-        </span>
       </div>
 
       {rightSlot}
diff --git a/src/components/radio/Radio.tsx b/src/components/radio/Radio.tsx
index 8f5c864..a0530af 100644
--- a/src/components/radio/Radio.tsx
+++ b/src/components/radio/Radio.tsx
@@ -10,7 +10,8 @@ import type { InputHTMLAttributes, ReactNode } from "react";
  * - On: filled inner dot (action/alt-default)
  * - Off: white bg with border
  * - Padding 3px around circle; outer row 8px, gap 8px
- * - Focus: 3px outline border/primary
+ * - Focus: 3px border border/primary (#BCBAB8), radius 3px
+ * - Hover: circle border + dot darken to action.hover (#110041)
  */
 
 const radioCircle = cva({
@@ -75,26 +76,35 @@ const radioRoot = cva({
     p: "2", // 8px
     cursor: "pointer",
     userSelect: "none",
-    rounded: "xs",
+    // Figma Focus state: 3px border border/primary (#BCBAB8), radius 3px.
+    // Use a transparent border in base so layout is stable; fill it on focus-within.
+    borderWidth: "[3px]",
+    borderStyle: "solid",
+    borderColor: "[transparent]",
+    rounded: "[3px]",
     textStyle: "label.md.default",
     color: "text.default",
 
     "&:focus-within": {
-      outline: "primary",
-      outlineWidth: "[3px]",
-      outlineStyle: "solid",
+      borderColor: "[#BCBAB8]",
     },
 
     "&:hover:not([data-disabled])": {
       bg: "bg.primary-alternative",
     },
+
+    // Figma Hover: circle border + inner dot darken to action.hover.
+    "&:hover:not([data-disabled]) [data-circle]": {
+      borderColor: "action.hover",
+    },
+    "&:hover:not([data-disabled]) [data-circle='true']::after": {
+      bg: "action.hover",
+    },
   },
   variants: {
     disabled: {
       true: {
         cursor: "not-allowed",
-        // Figma disabled label colour (text/text-onbutton-disabled #A9A9A9);
-        // the circle handles its own per-slot disabled colours.
         color: "text.disabled",
       },
       false: {},
@@ -131,6 +141,7 @@ export function Radio({
   ...rest
 }: RadioProps) {
   const isControlled = checked !== undefined;
+  const isChecked = !!checked || !!defaultChecked;
 
   return (
     <label
@@ -161,7 +172,8 @@ export function Radio({
       {/* Visual circle */}
       <span
         aria-hidden="true"
-        className={radioCircle({ checked: !!checked, disabled })}
+        data-circle={isChecked ? "true" : "false"}
+        className={radioCircle({ checked: isChecked, disabled })}
       />
       {children}
     </label>
diff --git a/src/components/search/Search.stories.tsx b/src/components/search/Search.stories.tsx
index 0a78820..b58c826 100644
--- a/src/components/search/Search.stories.tsx
+++ b/src/components/search/Search.stories.tsx
@@ -11,25 +11,52 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** Status=Default — empty placeholder */
+/** Status=Default — empty placeholder, border #BCBAB8 */
 export const Default: Story = {};
 
-/** Status=Field — user has typed something */
+/** Status=Focus — dark border #110041 + drop-shadow; click/tab into the input */
+export const Focus: Story = {
+  render: (args) => (
+    // autoFocus triggers :focus-within styles in the wrapper
+    <Search {...args} autoFocus />
+  ),
+};
+
+/** Status=Field — user has typed something; border #9F99A5; right-side controls */
 export const Field: Story = {
-  args: { value: "Buscar", defaultValue: "Buscar" },
+  args: {
+    value: "Buscar",
+    defaultValue: "Buscar",
+    resultCount: "1 de 2",
+    onClear: () => {},
+    onPrev: () => {},
+    onNext: () => {},
+  },
 };
 
-/** Status=Suggestion — text with autocomplete ghost */
+/** Status=Suggestion — text with autocomplete ghost; border #9F99A5 + drop-shadow */
 export const Suggestion: Story = {
   args: { value: "Buscar", suggestion: "suggestion" },
 };
 
-/** Matrix */
+/** Matrix — all 4 Figma variants in one view */
 export const Matrix: Story = {
   render: () => (
     <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      {/* Default */}
       <Search placeholder="Buscar" />
-      <Search value="Buscar" />
+      {/* Focus — autoFocus triggers the :focus-within ring */}
+      <Search placeholder="Buscar" autoFocus />
+      {/* Field */}
+      <Search
+        value="Buscar"
+        defaultValue="Buscar"
+        resultCount="1 de 2"
+        onClear={() => {}}
+        onPrev={() => {}}
+        onNext={() => {}}
+      />
+      {/* Suggestion */}
       <Search value="Buscar" suggestion="suggestion" />
     </div>
   ),
diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx
index 89ad5fb..8d4eaee 100644
--- a/src/components/search/Search.tsx
+++ b/src/components/search/Search.tsx
@@ -1,5 +1,5 @@
 import { css, cx, sva } from "@/styled/css";
-import { MagnifyingGlass } from "phosphor-react";
+import { CaretDown, CaretUp, MagnifyingGlass, X } from "phosphor-react";
 import type { InputHTMLAttributes } from "react";
 
 /**
@@ -8,15 +8,24 @@ import type { InputHTMLAttributes } from "react";
  * Figma variants: Status = Default | Focus | Field | Suggestion
  *
  * Tokens used:
- *   bg.secondary           = #FFFFFF  (input background)
- *   border/primary         = 1px solid #BCBAB8  (Default border)
- *   text.lighter           = #625C68  (placeholder)
- *   text.default           = #110041  (typed text / suggestion text)
- *   bg.primary-alternative = #E5E8FF  (suggestion highlight)
- *   rounded full           (pill shape, 24px radius via full token)
+ *   bg.secondary              = #FFFFFF  (input background)
+ *   border/primary            = 1px solid #BCBAB8  (Default border)
+ *   border/primary-alt        = 1px solid #110041  (Focus border)
+ *   [1px_solid_#9F99A5]       = Field + Suggestion border (border/secondary in Figma;
+ *                               promote to preset as `border.tertiary` or rename
+ *                               existing `border.secondary` which is currently #EDF2F7)
+ *   text.lighter              = #625C68  (placeholder, result counter)
+ *   text.default              = #110041  (typed text / suggestion text)
+ *   [#2D3748]                 = Suggestion typed+caret colour (promote as text.secondary)
+ *   bg.primary-alternative    = #E5E8FF  (suggestion highlight)
+ *   shadows/input-focus       = 0px 2px 1px rgba(0,0,0,0.16)  (Focus + Suggestion)
+ *   rounded full              (pill shape, 24px radius via full token)
  *
- * The Search component is a controlled-friendly input.
- * `suggestion` prop shows autocomplete ghost text next to cursor text.
+ * Right-side controls (Field state):
+ *   onClear?   — renders X icon
+ *   resultCount? — renders "1 de 2" counter + CaretUp + CaretDown
+ *   onPrev?    — CaretUp handler
+ *   onNext?    — CaretDown handler
  */
 
 const searchInput = sva({
@@ -32,7 +41,7 @@ const searchInput = sva({
     inputWrap: {
       display: "flex",
       alignItems: "center",
-      gap: "2", // 8px
+      gap: "2", // 8px — Default state
       h: "12", // 48px
       px: "3", // 12px
       bg: "bg.secondary",
@@ -43,11 +52,12 @@ const searchInput = sva({
       transitionDuration: "normal",
       transitionTimingFunction: "default",
       "&:focus-within": {
-        // Figma Focus: border primary-alt (#110041), icon darkens to text.default.
+        // Focus state: border primary-alt (#110041), drop-shadow, icon darkens
         border: "primary-alt",
         boxShadow: "input-focus",
         outline: "none",
       },
+      // Icon darkens to text.default when focus-within
       "&:focus-within > span": {
         color: "text.default",
       },
@@ -83,6 +93,14 @@ export interface SearchProps
   suggestion?: string;
   /** Typed value (the non-ghost part) */
   value?: string;
+  /** Result count label, e.g. "1 de 2" — triggers right-side controls group */
+  resultCount?: string;
+  /** Called when the user clicks CaretUp (previous result) */
+  onPrev?: () => void;
+  /** Called when the user clicks CaretDown (next result) */
+  onNext?: () => void;
+  /** Called when the user clicks the Clear (X) button */
+  onClear?: () => void;
 }
 
 export function Search({
@@ -90,16 +108,54 @@ export function Search({
   value,
   placeholder = "Buscar",
   className,
+  resultCount,
+  onPrev,
+  onNext,
+  onClear,
   ...props
 }: SearchProps) {
   const classes = searchInput();
 
+  // Field state: value is present (no suggestion). Border changes to #9F99A5,
+  // gap shrinks to 6px, icon darkens to text.default.
+  const hasValue = Boolean(value);
+  const isSuggestion = Boolean(suggestion);
+  const isField = hasValue && !isSuggestion;
+  const hasRightControls = Boolean(resultCount || onClear);
+
   return (
     <div className={cx(classes.root, className)}>
-      <div className={classes.inputWrap}>
-        <span className={classes.icon}>
+      <div
+        className={cx(
+          classes.inputWrap,
+          // Field + Suggestion: border/secondary in Figma (#9F99A5)
+          (isField || isSuggestion) &&
+            css({
+              border: "[1px_solid_#9F99A5]",
+            }),
+          // Suggestion: also gets the drop-shadow (same as Focus)
+          isSuggestion &&
+            css({
+              boxShadow: "input-focus",
+            }),
+          // Field + Suggestion + any value: gap shrinks to 6px
+          (isField || isSuggestion) &&
+            css({
+              gap: "[6px]",
+            }),
+        )}
+      >
+        {/* Left: icon + text */}
+        <span
+          className={cx(
+            classes.icon,
+            // Icon darkens to text.default when a value is present (Field/Suggestion)
+            hasValue && css({ color: "text.default" }),
+          )}
+        >
           <MagnifyingGlass size={24} />
         </span>
+
         <div
           className={css({
             display: "flex",
@@ -118,14 +174,24 @@ export function Search({
             className={cx(
               classes.input,
               css({ flex: suggestion ? "[0_0_auto]" : "1" }),
+              // Suggestion typed text: Figma shows #2D3748, not text.default (#110041)
+              isSuggestion &&
+                css({
+                  color: "[#2D3748]",
+                }),
             )}
           />
           {suggestion && (
             <>
+              {/* Caret "|": Inter Regular (paragraph.md.default) per Figma */}
               <span
                 className={css({
-                  color: "text.default",
-                  textStyle: "label.md.default",
+                  // Inter Regular at 16px / 1.5 line-height
+                  fontFamily: "[Inter,sans-serif]",
+                  fontWeight: "[400]",
+                  fontSize: "[16px]",
+                  lineHeight: "[1.5]",
+                  color: "[#2D3748]",
                   flexShrink: "0",
                 })}
               >
@@ -145,6 +211,105 @@ export function Search({
             </>
           )}
         </div>
+
+        {/* Right-side controls (Field state): Clear + counter + prev/next */}
+        {hasRightControls && (
+          <div
+            className={css({
+              display: "flex",
+              alignItems: "center",
+              gap: "[2px]",
+              flexShrink: "0",
+            })}
+          >
+            {onClear && (
+              <button
+                type="button"
+                onClick={onClear}
+                aria-label="Limpiar búsqueda"
+                className={css({
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  w: "[24px]",
+                  h: "[24px]",
+                  borderWidth: "0",
+                  bg: "[transparent]",
+                  color: "text.lighter",
+                  cursor: "pointer",
+                  flexShrink: "0",
+                  p: "0",
+                  "&:hover": { color: "text.default" },
+                })}
+              >
+                <X size={24} />
+              </button>
+            )}
+            {resultCount && (
+              <div
+                className={css({
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "[2px]",
+                  flexShrink: "0",
+                })}
+              >
+                <span
+                  className={css({
+                    textStyle: "label.md.default",
+                    color: "text.lighter",
+                    whiteSpace: "nowrap",
+                    flexShrink: "0",
+                  })}
+                >
+                  {resultCount}
+                </span>
+                <button
+                  type="button"
+                  onClick={onPrev}
+                  aria-label="Resultado anterior"
+                  className={css({
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    w: "[24px]",
+                    h: "[24px]",
+                    borderWidth: "0",
+                    bg: "[transparent]",
+                    color: "text.lighter",
+                    cursor: "pointer",
+                    flexShrink: "0",
+                    p: "0",
+                    "&:hover": { color: "text.default" },
+                  })}
+                >
+                  <CaretUp size={24} />
+                </button>
+                <button
+                  type="button"
+                  onClick={onNext}
+                  aria-label="Resultado siguiente"
+                  className={css({
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    w: "[24px]",
+                    h: "[24px]",
+                    borderWidth: "0",
+                    bg: "[transparent]",
+                    color: "text.lighter",
+                    cursor: "pointer",
+                    flexShrink: "0",
+                    p: "0",
+                    "&:hover": { color: "text.default" },
+                  })}
+                >
+                  <CaretDown size={24} />
+                </button>
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/select/Select.tsx b/src/components/select/Select.tsx
index 7156024..951aaeb 100644
--- a/src/components/select/Select.tsx
+++ b/src/components/select/Select.tsx
@@ -126,6 +126,8 @@ const select = sva({
       overflow: "hidden",
       zIndex: "10",
       minWidth: "[var(--radix-select-trigger-width)]",
+      // Figma dropdown panel: py-[8px] vertical inset around option list.
+      py: "2",
     },
     viewport: {
       maxHeight: "[400px]",
@@ -171,13 +173,15 @@ const select = sva({
   variants: {
     size: {
       md: {
-        trigger: { px: "3", py: "3" },
-        item: { px: "3", py: "3" },
+        // Figma trigger / option row M: px=16px, py=12px → tokens 4/3.
+        trigger: { px: "4", py: "3" },
+        item: { px: "4", py: "3" },
       },
       sm: {
-        trigger: { px: "3", py: "1" },
+        // Figma trigger / option row S: px=16px, py=8px → tokens 4/2.
+        trigger: { px: "4", py: "2" },
         // Figma S option: 14px text (subtitle.sm), 8px vertical padding (40px row).
-        item: { px: "3", py: "2", textStyle: "subtitle.sm.default" },
+        item: { px: "4", py: "2", textStyle: "subtitle.sm.default" },
       },
     },
   },
@@ -247,14 +251,6 @@ export function Select({
           <div className={classes.trigger} role="combobox" tabIndex={0}>
             {prefix && <Affix aria-hidden="true">{prefix} |</Affix>}
 
-            <RadixSelect.Icon asChild>
-              <CaretDown
-                size={16}
-                className={classes.caret}
-                aria-hidden="true"
-              />
-            </RadixSelect.Icon>
-
             <span className={classes.value}>
               {!value && securedSuggestion ? (
                 <button
@@ -271,6 +267,15 @@ export function Select({
             </span>
 
             {suffix && <Affix aria-hidden="true">| {suffix}</Affix>}
+
+            {/* Caret sits at the trailing edge — matches Figma layout */}
+            <RadixSelect.Icon asChild>
+              <CaretDown
+                size={16}
+                className={classes.caret}
+                aria-hidden="true"
+              />
+            </RadixSelect.Icon>
           </div>
         </RadixSelect.Trigger>
 
diff --git a/src/components/spinner/Spinner.tsx b/src/components/spinner/Spinner.tsx
index 9e03f6a..0a91182 100644
--- a/src/components/spinner/Spinner.tsx
+++ b/src/components/spinner/Spinner.tsx
@@ -6,8 +6,10 @@ import { useId } from "react";
  *
  * Figma family: 1994:29039, inner frame: 1568:25587
  * 48×48px animated arc spinner.
- * Track: #E6E8FF (bg/primary-alternative adjacent)
- * Arc: gradient #3F479D → transparent (action/alt-default)
+ * Track: #E6E8FF (no token — distinct from bg.primary-alternative #E5E8FF;
+ *   use escape-hatch [#E6E8FF] if ever needed in a css() call)
+ * Arc: gradient #3F479D → transparent (#3F479D = action.alt-default)
+ *   Gradient coords match Figma asset exactly: x1=42 y1=20.5 x2=22 y2=42
  * Uses the `spin` animation token (1s linear infinite).
  */
 
diff --git a/src/components/status-bar/StatusBar.tsx b/src/components/status-bar/StatusBar.tsx
index 4818a17..190874c 100644
--- a/src/components/status-bar/StatusBar.tsx
+++ b/src/components/status-bar/StatusBar.tsx
@@ -60,13 +60,34 @@ function TimeBatteryBar() {
 }
 
 // ── Sub-section: Traffic lights ───────────────────────────────────────────────
+//
+// Each dot uses its own css() call so Panda can statically extract the escape-
+// hatch bg value at build time. Passing a dynamic variable into css({ bg: var })
+// is not statically analysable and produces no CSS output.
+
+const trafficLightRed = css({
+  w: "[12px]",
+  h: "[12px]",
+  rounded: "full",
+  bg: "[#FF5F57]",
+  flexShrink: "0",
+});
+const trafficLightYellow = css({
+  w: "[12px]",
+  h: "[12px]",
+  rounded: "full",
+  bg: "[#FEBC2E]",
+  flexShrink: "0",
+});
+const trafficLightGreen = css({
+  w: "[12px]",
+  h: "[12px]",
+  rounded: "full",
+  bg: "[#28C840]",
+  flexShrink: "0",
+});
 
 function TrafficLights() {
-  const lights = [
-    { bg: "[#FF5F57]" },
-    { bg: "[#FEBC2E]" },
-    { bg: "[#28C840]" },
-  ] as const;
   return (
     <div
       className={css({
@@ -76,17 +97,9 @@ function TrafficLights() {
         flexShrink: "0",
       })}
     >
-      {lights.map((l, i) => (
-        <div
-          key={i}
-          className={css({
-            w: "[12px]",
-            h: "[12px]",
-            rounded: "full",
-            bg: l.bg,
-          })}
-        />
-      ))}
+      <div className={trafficLightRed} />
+      <div className={trafficLightYellow} />
+      <div className={trafficLightGreen} />
     </div>
   );
 }
diff --git a/src/components/stepper/Stepper.tsx b/src/components/stepper/Stepper.tsx
index fd6c1d0..1c49937 100644
--- a/src/components/stepper/Stepper.tsx
+++ b/src/components/stepper/Stepper.tsx
@@ -48,9 +48,7 @@ const stepIndicator = cva({
       },
       focus: {
         bg: "action.default",
-        borderWidth: "[1px]",
-        borderStyle: "solid",
-        borderColor: "text.default",
+        border: "primary-alt",
       },
       disabled: {
         bg: "action.disabled",
diff --git a/src/components/switch/Switch.tsx b/src/components/switch/Switch.tsx
index 0002a73..0d9ab5d 100644
--- a/src/components/switch/Switch.tsx
+++ b/src/components/switch/Switch.tsx
@@ -5,16 +5,16 @@ import * as RadixSwitch from "@radix-ui/react-switch";
  * Switch — Radix UI switch with AymurAI styling.
  * Ported from desktop-app/src/renderer/src/components/ui/switch.tsx
  */
+// Figma: Switch Status=Inactive/Active — track 32×19px, thumb 12×12px, padding 4px
 const rootStyle = css({
-  width: "[44px]",
-  height: "[24px]",
+  width: "[32px]",
+  height: "[19px]",
   borderRadius: "full",
-  // strictTokens: `border: "none"` is invalid — use borderWidth: "0"
   borderWidth: "0",
   cursor: "pointer",
   position: "relative",
   flexShrink: "0",
-  // Figma Status=Inactive track is grey (#E0DDE2), not the light-purple highlight.
+  // Inactive: #E0DDE2 = action.disabled
   bg: "action.disabled",
 
   transitionProperty: "[background-color]",
@@ -22,6 +22,7 @@ const rootStyle = css({
   transitionTimingFunction: "default",
 
   '&[data-state="checked"]': {
+    // Active: #3F479D = brand.primary
     bg: "brand.primary",
   },
 
@@ -33,20 +34,23 @@ const rootStyle = css({
 
 const thumbStyle = css({
   display: "block",
-  width: "[20px]",
-  height: "[20px]",
+  // Figma thumb: 12×12px (track 32 - 2×4px padding = 24 travel space; thumb 12px)
+  width: "[12px]",
+  height: "[12px]",
   borderRadius: "full",
   bg: "bg.secondary",
   position: "absolute",
-  top: "[2px]",
-  left: "[2px]",
+  // Center vertically: (19 - 12) / 2 = 3.5px ≈ 3.5px (matches Figma y=3.5)
+  top: "[3.5px]",
+  left: "[4px]",
 
   transitionProperty: "[transform]",
   transitionDuration: "slow",
   transitionTimingFunction: "default",
 
   '&[data-state="checked"]': {
-    transform: "[translateX(20px)]",
+    // Travel: 32 - 4px left padding - 12px thumb - 4px right padding = 12px
+    transform: "[translateX(12px)]",
   },
 });
 
diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx
index be5b28b..f88efff 100644
--- a/src/components/tag/Tag.tsx
+++ b/src/components/tag/Tag.tsx
@@ -7,12 +7,14 @@ import type { HTMLAttributes } from "react";
  * Figma family: 40000041:10589, label: 40000041:10494
  * Variants: Persona / CUIJ / Num_Expediente / Num_Actuacion / Fecha
  *
- * Layout: bg.primary-alternative pill, gap 10px, padding 4px, rounded md (8px)
- * - Value text: font/file (Times New Roman), 16px, regular, black
- * - Label badge (for non-Persona): Archivo Bold 16px, black
+ * Layout: rgba(229,232,255,0.8) pill, gap 10px, padding 4px, rounded md (8px)
+ * - Value text: font/file (Times New Roman), 16px, regular, #000000
+ * - Label badge: Archivo Bold 16px, #000000, fontVariationSettings "wdth" 100
  * - Persona shows abbreviated "PER" badge
+ * - Hover: label badge turns brand/primary (#3F479D) + underline; bg unchanged.
  *
- * Token gap: "bg/etiqueta" (#E5E8FF) = bg.primary-alternative (#E5E8FF) ✓ exact match.
+ * Token gap: "bg/etiqueta" = rgba(229,232,255,0.8) — 80% opacity tint of #E5E8FF.
+ * Candidate to promote: bg.etiqueta rgba(229,232,255,0.8) once confirmed with design.
  */
 
 const TAG_LABELS: Record<TagVariant, string> = {
@@ -47,7 +49,9 @@ const tagRoot = cva({
     px: "1", // 4px
     py: "1",
     rounded: "md", // 8px
-    bg: "bg.primary-alternative", // #E5E8FF — matches Figma "bg/etiqueta"
+    // Figma bg/etiqueta = rgba(229,232,255,0.8) — 80% opacity tint.
+    // bg.primary-alternative is the solid #E5E8FF; apply opacity via escape hatch.
+    bg: "[rgba(229,232,255,0.8)]",
     cursor: "default",
     userSelect: "none",
   },
@@ -55,8 +59,8 @@ const tagRoot = cva({
     status: {
       Default: {},
       Hover: {
-        bg: "bg.primary-highlight",
-        // Figma Hover: the label badge turns action.alt-default + underline.
+        // Figma Hover does NOT change the background — only the label badge
+        // text turns brand/primary (#3F479D) with an underline.
         "& > span:last-child": {
           color: "action.alt-default",
           textDecoration: "underline",
@@ -71,11 +75,12 @@ const tagRoot = cva({
 
 const tagValue = cva({
   base: {
-    fontFamily: "file", // Times New Roman
+    fontFamily: "file", // Times New Roman Regular
     fontSize: "[16px]",
     fontWeight: "[400]",
     lineHeight: "[normal]",
-    color: "text.default",
+    // Figma: text-black (#000000) for the value text.
+    color: "[#000000]",
     whiteSpace: "nowrap",
     flexShrink: "0",
   },
@@ -83,13 +88,16 @@ const tagValue = cva({
 
 const tagLabel = cva({
   base: {
-    fontFamily: "primary", // Archivo
+    fontFamily: "primary", // Archivo Bold
     fontSize: "[16px]",
     fontWeight: "[700]", // Bold
     lineHeight: "[normal]",
-    color: "text.default",
+    // Figma: text-black (#000000) for the label badge (Default state).
+    color: "[#000000]",
     whiteSpace: "nowrap",
     flexShrink: "0",
+    // Figma specifies fontVariationSettings on Archivo Bold (variable font axis).
+    fontVariationSettings: '["wdth" 100]',
   },
 });
 
diff --git a/src/components/text-field/TextField.tsx b/src/components/text-field/TextField.tsx
index 79b0fce..db943fc 100644
--- a/src/components/text-field/TextField.tsx
+++ b/src/components/text-field/TextField.tsx
@@ -11,20 +11,35 @@ import { hstack, stack } from "@/styled/patterns";
  *
  * Figma: TextField family node 1:296 — sizes md/sm;
  * states: Placeholder / Focus / Typed / Disabled / Error / Suggestion.
+ *
+ * Key Figma measurements (from get_design_context):
+ *  - inputBox: h-[48px], p-[12px] all sides, rounded-[4px] (sm), bg white
+ *  - Placeholder border: #BCBAB8 (border/primary)
+ *  - Typed border: #9F99A5 (border/secondary) — darker when value present
+ *  - Focus: border primary-alt (#110041) + drop-shadow(0 2 1 rgba(0,0,0,0.16))
+ *  - Disabled: bg #F6F5F7 (bg.primary), border primary, text lighter
+ *  - Error: border + label + input text all system.error (#DC582E)
+ *  - Suggestion: border secondary + drop-shadow (same as focus shadow)
+ *  - Label: 12px, text.lighter; turns text.default on focus
+ *  - Prefix separator: border-right #C3CCD7 (brand.secondary), pr-[8px]
  */
 const input = sva({
   slots: ["container", "inputBox", "input", "label", "errorMessage", "helper"],
   base: {
     container: stack.raw({ gap: "1", width: "full" }),
     inputBox: {
-      ...hstack.raw({ alignItems: "center", gap: "1" }),
+      ...hstack.raw({ alignItems: "center", gap: "2" }),
 
+      // Figma: p-[12px] on the container box, h-[48px], rounded-[4px]
+      p: "3",
+      h: "12",
       rounded: "sm",
       border: "primary",
+      bg: "bg.secondary",
 
       "&:focus-within": {
         outline: "none",
-        // Figma Focus: border turns primary-alt (#110041) + 1px-blur shadow.
+        // Figma Focus: border turns primary-alt (#110041) + drop-shadow
         border: "primary-alt",
         boxShadow: "input-focus",
       },
@@ -35,7 +50,10 @@ const input = sva({
       borderWidth: "0",
       outline: "none",
       flex: "[1]",
+      minW: "0",
       bg: "[transparent]",
+      // Figma: typed input text is text.default
+      color: "text.default",
 
       "&::placeholder": {
         color: "text.lighter",
@@ -54,62 +72,89 @@ const input = sva({
   },
   variants: {
     size: {
-      md: {
-        input: { p: "3" },
-      },
-      sm: {
-        input: { px: "3", py: "1" },
-      },
+      // Figma M and S: both use h-[48px] + p-[12px] — no visual size difference in the spec
+      md: {},
+      sm: {},
     },
     disabled: {
       true: {
         inputBox: {
           bg: "bg.primary",
           border: "primary",
-          color: "text.lighter",
           cursor: "not-allowed",
         },
         input: {
           cursor: "not-allowed",
+          color: "text.lighter",
         },
       },
-      false: {
-        inputBox: {
-          bg: "bg.secondary",
-        },
-      },
+      false: {},
     },
     error: {
       true: {
-        container: {
-          color: "system.error",
-        },
         inputBox: {
           border: "error",
         },
-        input: {},
+        // Figma Error: input text and label both turn system.error
+        input: { color: "system.error" },
         label: { color: "system.error" },
       },
       false: {},
     },
+    // Typed: Figma uses border/secondary (#9F99A5) when a value is present
+    typed: {
+      true: {
+        inputBox: { border: "secondary" },
+      },
+      false: {},
+    },
+    // Suggestion: Figma shows secondary border + same drop-shadow as focus
+    suggestion: {
+      true: {
+        inputBox: {
+          border: "secondary",
+          boxShadow: "input-focus",
+        },
+      },
+      false: {},
+    },
   },
   defaultVariants: {
     error: false,
     disabled: false,
     size: "md",
+    typed: false,
+    suggestion: false,
   },
 });
 
+// Prefix/suffix separator styling.
+// Figma: prefix has a border-right divider in brand.secondary (#C3CCD7) with pr-[8px].
+// Suffix mirrors with a border-left divider and pl-[8px].
 const affix = cva({
   base: {
-    ...hstack.raw({ alignItems: "center", gap: "1" }),
+    ...hstack.raw({ alignItems: "center" }),
+    flexShrink: "0",
     userSelect: "none",
     textStyle: "label.md.default",
+    color: "text.lighter",
   },
   variants: {
     position: {
-      prefix: { pl: "3", mr: "-3" },
-      suffix: { pr: "3", ml: "-3" },
+      prefix: {
+        // Figma: right border separator, color brand.secondary (#C3CCD7), pr-[8px]
+        borderRightWidth: "1",
+        borderRightStyle: "solid",
+        borderRightColor: "brand.secondary",
+        pr: "2",
+      },
+      suffix: {
+        // Mirror: left border separator
+        borderLeftWidth: "1",
+        borderLeftStyle: "solid",
+        borderLeftColor: "brand.secondary",
+        pl: "2",
+      },
     },
   },
 });
@@ -164,7 +209,17 @@ export function TextField({
   const inputId = id ?? randomId;
   const errorMessageId = `${inputId}-error`;
 
-  const classes = input({ disabled, error: !!error, size });
+  // Derive typed state: value present + not disabled + not error
+  const isTyped = !!value && !disabled && !error;
+  const hasSuggestion = !!suggestion;
+
+  const classes = input({
+    disabled,
+    error: !!error,
+    size,
+    typed: isTyped,
+    suggestion: hasSuggestion,
+  });
 
   return (
     <div className={classes.container}>
@@ -178,8 +233,6 @@ export function TextField({
         {prefix && (
           <div className={affix({ position: "prefix" })}>
             <span>{prefix}</span>
-            {/* Vertical separator — matches Figma design where this is rendered as text */}
-            <span>|</span>
           </div>
         )}
 
@@ -202,8 +255,6 @@ export function TextField({
 
         {suffix && (
           <div className={affix({ position: "suffix" })}>
-            {/* Vertical separator — matches Figma design */}
-            <span>|</span>
             <span>{suffix}</span>
           </div>
         )}
diff --git a/src/components/tool-button/ToolButton.tsx b/src/components/tool-button/ToolButton.tsx
index cc914f0..bca7122 100644
--- a/src/components/tool-button/ToolButton.tsx
+++ b/src/components/tool-button/ToolButton.tsx
@@ -1,5 +1,5 @@
-import { cva, cx } from "@/styled/css";
-import { Backspace, Repeat, RepeatOnce, TrashSimple } from "phosphor-react";
+import { css, cva, cx } from "@/styled/css";
+import { Backspace, Repeat, TrashSimple } from "phosphor-react";
 import type { ButtonHTMLAttributes } from "react";
 
 /**
@@ -17,6 +17,8 @@ import type { ButtonHTMLAttributes } from "react";
  *   action.hover        = #110041  (Hover bg)
  *   action.pressed      = #3F479D  (Pressed bg) + border/primary-alt
  *   text.onbutton-alternative = #FFFFFF (icon color)
+ *
+ * "Todo/Todas" variants: base icon + "ALL" badge overlay (Figma composite).
  */
 
 const toolButton = cva({
@@ -55,6 +57,32 @@ const toolButton = cva({
   },
 });
 
+/** Wrapper that layers a base icon with an "ALL" badge in the bottom-right. */
+const iconWrapperStyle = css({
+  position: "relative",
+  w: "[24px]",
+  h: "[24px]",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+/** "ALL" badge — positioned bottom-right of the 24×24 icon area. */
+const allBadgeStyle = css({
+  position: "absolute",
+  bottom: "[0px]",
+  right: "[0px]",
+  fontSize: "[6px]",
+  fontWeight: "[700]",
+  lineHeight: "[1]",
+  letterSpacing: "[0.02em]",
+  color: "text.onbutton-alternative",
+  // Tight background patch so the badge is readable over the icon's bottom-right
+  bg: "[transparent]",
+  pointerEvents: "none",
+  userSelect: "none",
+});
+
 export type ToolButtonAction =
   | "reemplazar"
   | "reemplazar-todo"
@@ -72,22 +100,51 @@ const ACTION_LABELS: Record<ToolButtonAction, string> = {
   "agregar-todas": "Agregar todas",
 };
 
-// Icon per action — exact Figma layer names (node 40000041:10526).
-// "Agregar" uses Backspace rotated 180°. No filled weights in Figma.
+/**
+ * Icon per action — matches Figma layer structure (node 40000041:10526).
+ *
+ * "Todo/Todas" variants composite the singular icon with an absolute "ALL"
+ * badge overlaid in the bottom-right quadrant, matching the Figma SVG layout.
+ * "Agregar" uses Backspace rotated 180° (produces the right-pointing tag shape).
+ */
 function ActionIcon({ action }: { action: ToolButtonAction }) {
   const size = 24;
   const flipped = { transform: "rotate(180deg)" };
+
   switch (action) {
     case "reemplazar":
       return <Repeat size={size} />;
+
     case "reemplazar-todo":
-      return <RepeatOnce size={size} />;
+      return (
+        <div className={iconWrapperStyle}>
+          <Repeat size={size} />
+          <span className={allBadgeStyle}>ALL</span>
+        </div>
+      );
+
     case "eliminar":
-    case "eliminar-todo":
       return <TrashSimple size={size} />;
+
+    case "eliminar-todo":
+      return (
+        <div className={iconWrapperStyle}>
+          <TrashSimple size={size} />
+          <span className={allBadgeStyle}>ALL</span>
+        </div>
+      );
+
     case "agregar-etiqueta":
-    case "agregar-todas":
       return <Backspace size={size} style={flipped} />;
+
+    case "agregar-todas":
+      return (
+        <div className={iconWrapperStyle}>
+          <Backspace size={size} style={flipped} />
+          <span className={allBadgeStyle}>ALL</span>
+        </div>
+      );
+
     default:
       return null;
   }
diff --git a/src/components/toolbar/Toolbar.tsx b/src/components/toolbar/Toolbar.tsx
index cb4e152..5bbafd8 100644
--- a/src/components/toolbar/Toolbar.tsx
+++ b/src/components/toolbar/Toolbar.tsx
@@ -30,14 +30,15 @@ import type { ReactNode } from "react";
  * via `toolButtons` prop.
  */
 
-// Vertical divider matching Figma rotated 90-deg line element
+// Vertical divider — Figma: 1px × 48px line, color #BCBAB8 (border/primary stroke).
+// No standalone color token for #BCBAB8 exists; escape hatch used (token gap: border.primary-color).
 function ToolbarDivider() {
   return (
     <div
       className={css({
         w: "[1px]",
         h: "12",
-        bg: "bg.secondary-highlight",
+        bg: "[#BCBAB8]",
         flexShrink: "0",
         alignSelf: "center",
       })}
@@ -72,7 +73,11 @@ export function Toolbar({
   className,
   children,
 }: ToolbarProps) {
-  // Figma: Search+Switch is center-aligned; the other contexts are bottom-aligned.
+  // Figma layout per context:
+  //   anonimizador  — items: end, justify: space-between, pt: 42px, pb: 24px
+  //   set-de-datos  — items: end, justify: start, gap: 24px, py: 24px
+  //   search-switch — items: center, justify: space-between, pt: 42px, pb: 24px
+  const isSetDeDatos = context === "set-de-datos";
   const alignItems = context === "search-switch" ? "center" : "flex-end";
   return (
     <div
@@ -80,13 +85,13 @@ export function Toolbar({
         css({
           display: "flex",
           alignItems,
-          justifyContent: "space-between",
+          justifyContent: isSetDeDatos ? "flex-start" : "space-between",
           bg: "bg.secondary",
-          pt: "[42px]",
+          pt: isSetDeDatos ? "6" : "[42px]",
           pb: "6",
           px: "12",
           w: "full",
-          gap: "6",
+          gap: isSetDeDatos ? "6" : "0",
         }),
         className,
       )}
@@ -116,7 +121,7 @@ export function Toolbar({
             className={css({
               display: "flex",
               alignItems: "center",
-              gap: "1",
+              gap: "4",
               flexShrink: "0",
             })}
           >
diff --git a/src/components/tooltip/Tooltip.stories.tsx b/src/components/tooltip/Tooltip.stories.tsx
index 7e9e83e..c85c259 100644
--- a/src/components/tooltip/Tooltip.stories.tsx
+++ b/src/components/tooltip/Tooltip.stories.tsx
@@ -42,7 +42,7 @@ export const Default: Story = {
       </TooltipTrigger>
       <TooltipContent>
         <span
-          className={css({ px: "3", py: "2", textStyle: "label.sm.default" })}
+          className={css({ px: "3", py: "2", textStyle: "label.md.default" })}
         >
           This is a tooltip
         </span>
@@ -69,7 +69,7 @@ export const WithoutArrow: Story = {
       </TooltipTrigger>
       <TooltipContent showArrow={false}>
         <span
-          className={css({ px: "3", py: "2", textStyle: "label.sm.default" })}
+          className={css({ px: "3", py: "2", textStyle: "label.md.default" })}
         >
           Tooltip without arrow
         </span>
@@ -96,7 +96,7 @@ export const BottomPlacement: Story = {
       </TooltipTrigger>
       <TooltipContent side="bottom">
         <span
-          className={css({ px: "3", py: "2", textStyle: "label.sm.default" })}
+          className={css({ px: "3", py: "2", textStyle: "label.md.default" })}
         >
           Positioned at the bottom
         </span>
diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx
index f66d16a..ac7994b 100644
--- a/src/components/tooltip/Tooltip.tsx
+++ b/src/components/tooltip/Tooltip.tsx
@@ -15,6 +15,8 @@ export const TooltipTrigger = TooltipPrimitive.Trigger;
 const contentStyles = css({
   zIndex: 50,
   bg: "bg.primary",
+  color: "text.default",
+  fontFamily: "primary",
   // Figma: 4px radius, 8px padding, 8px gap, 0px 4px 8px/10% shadow.
   rounded: "sm",
   p: "2",