feat(context): Añadir drawBeveledRect/drawBeveledRectPressed

Helpers para dibujar rectángulos con efecto 3D:
- drawBeveledRect: luz desde arriba-izquierda (normal)
- drawBeveledRectPressed: bisel invertido (presionado)

Usa lightenHsl(10) y darkenHsl(15) para bordes.

Parte del plan 'Acabado Espectacular'.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/core/context.zig

@@ -428,6 +428,116 @@ pub const Context = struct {
         self.overlay_commands.append(self.allocator, cmd) catch {};
     }
 
+    // =========================================================================
+    // High-level Drawing Helpers
+    // =========================================================================
+
+    /// Draw a rectangle with 3D bevel effect
+    /// Creates illusion of depth with light from top-left
+    /// - Top/Left edges: lighter (raised)
+    /// - Bottom/Right edges: darker (shadow)
+    pub fn drawBeveledRect(self: *Self, x: i32, y: i32, w: u32, h: u32, base_color: Style.Color) void {
+        const light = base_color.lightenHsl(10);
+        const dark = base_color.darkenHsl(15);
+
+        // Main fill
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y,
+            .w = w,
+            .h = h,
+            .color = base_color,
+        } });
+
+        // Top edge (light)
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y,
+            .w = w,
+            .h = 1,
+            .color = light,
+        } });
+
+        // Left edge (light)
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y,
+            .w = 1,
+            .h = h,
+            .color = light,
+        } });
+
+        // Bottom edge (dark)
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y + @as(i32, @intCast(h)) - 1,
+            .w = w,
+            .h = 1,
+            .color = dark,
+        } });
+
+        // Right edge (dark)
+        self.pushCommand(.{ .rect = .{
+            .x = x + @as(i32, @intCast(w)) - 1,
+            .y = y,
+            .w = 1,
+            .h = h,
+            .color = dark,
+        } });
+    }
+
+    /// Draw a rectangle with inverted 3D bevel effect (pressed state)
+    /// Dark edges on top/left, light on bottom/right
+    pub fn drawBeveledRectPressed(self: *Self, x: i32, y: i32, w: u32, h: u32, base_color: Style.Color) void {
+        const light = base_color.lightenHsl(10);
+        const dark = base_color.darkenHsl(15);
+
+        // Main fill
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y,
+            .w = w,
+            .h = h,
+            .color = base_color,
+        } });
+
+        // Top edge (dark - inverted)
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y,
+            .w = w,
+            .h = 1,
+            .color = dark,
+        } });
+
+        // Left edge (dark - inverted)
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y,
+            .w = 1,
+            .h = h,
+            .color = dark,
+        } });
+
+        // Bottom edge (light - inverted)
+        self.pushCommand(.{ .rect = .{
+            .x = x,
+            .y = y + @as(i32, @intCast(h)) - 1,
+            .w = w,
+            .h = 1,
+            .color = light,
+        } });
+
+        // Right edge (light - inverted)
+        self.pushCommand(.{ .rect = .{
+            .x = x + @as(i32, @intCast(w)) - 1,
+            .y = y,
+            .w = 1,
+            .h = h,
+            .color = light,
+        } });
+    }
+
     /// Resize the context
     pub fn resize(self: *Self, width: u32, height: u32) void {
         self.width = width;