AgendaPro/.superpowers/sdd/task-8-report.md

# Task 8 — Fix de iconos solapados (`@layer components` + `pl-10`)

## Files changed
1. `src/index.css` — wrapped the `.input, .select, .textarea { ... }` block AND its `:focus` rule in `@layer components { ... }` (now lines 272–292).
2. `src/pages/public/BookingPage.tsx` — in `DetailsForm`, changed the three `className="input pl-9"` → `className="input pl-10"` (Nombre, Teléfono, Correo; lines 664, 678, 692).

## Verification results

| Check | Result |
|---|---|
| `npm run typecheck` | ✅ 0 errors (`tsc -b --noEmit` exited clean) |
| `npm run build` | ✅ Succeeded in 5.06s — `dist/assets/index-*.css` emitted (36.19 kB). Confirms `@layer components` is valid CSS and Tailwind processes it. |
| Grep: `padding: 0.55rem 0.75rem` outside `@layer components` | ✅ Only occurrence is on **line 280**, which is INSIDE the `@layer components { ... }` block (lines 272–292). No bare occurrence remains. |
| Grep: BookingPage `input pl-` | ✅ All three now read `input pl-10` (lines 664, 678, 692). No `pl-9` remains. |

## Untouched (pre-existing WIP, not modified by this task)

### FullCalendar section in `src/index.css` (lines 131–163) — unchanged
Shown verbatim from the file after my edit:

```css
.fc-event {
  border: none !important;
  border-radius: 0.45rem !important;
  padding: 2px 5px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  overflow: hidden;
}
.fc-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
}
.fc-daygrid-event {
  margin-top: 2px;
}
.fc .fc-timegrid-slot {
  height: 2.4rem;
}
.fc-timegrid-event {
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.fc-timegrid-event-harness {
  margin-right: 2px !important;
}
/* When slotEventOverlap is false, FullCalendar puts a small gap between
   side-by-side events; tighten it a touch so each event gets more readable
   width without bleeding into its neighbour. */
.fc .fc-timegrid-col-events {
  column-gap: 2px;
}
```

> Note: `git diff src/index.css` does show these FullCalendar lines as additions vs. HEAD, but they were **already present in the working tree before Task 8 began** (pre-existing WIP on the branch). My `edit` call only targeted the `.input/.select/.textarea` block — its `oldString`/`newString` did not include any FullCalendar text — so I did not modify this section.

### `src/components/AppointmentModal.tsx` and `src/pages/CalendarPage.tsx`
Listed as modified in `git status` (pre-existing WIP from earlier tasks on this branch). I did not open, read, or edit either file during Task 8 — my only tool calls against the repo were the two `edit` operations on `src/index.css` and `src/pages/public/BookingPage.tsx`, plus read-only verification commands.

## Diff of MY two files (only the parts I changed)

```diff
--- a/src/index.css
+++ b/src/index.css
@@ -258,24 +269,26 @@ body {
   background: #fecaca;
 }

-.input,
-.select,
-.textarea {
-  width: 100%;
-  ...
-  outline: none;
-}
-.input:focus,
-.select:focus,
-.textarea:focus {
-  border-color: #3b66ff;
-  box-shadow: 0 0 0 3px rgba(59, 102, 255, 0.15);
+@layer components {
+  .input,
+  .select,
+  .textarea {
+    width: 100%;
+    ...
+    outline: none;
+  }
+  .input:focus,
+  .select:focus,
+  .textarea:focus {
+    border-color: #3b66ff;
+    box-shadow: 0 0 0 3px rgba(59, 102, 255, 0.15);
+  }
 }

--- a/src/pages/public/BookingPage.tsx
+++ b/src/pages/public/BookingPage.tsx
@@ -661,7 +661,7 @@
-                className="input pl-9"
+                className="input pl-10"
@@ -675,7 +675,7 @@
-                  className="input pl-9"
+                  className="input pl-10"
@@ -689,7 +689,7 @@
-                  className="input pl-9"
+                  className="input pl-10"
```

## Self-review

- **Does `@layer components` now wrap the input rule?**
  YES. `src/index.css` lines 272–292 open with `@layer components {` and close with `}`; the `.input/.select/.textarea` block and the `:focus` rule are both inside it, indented one level.

- **Will `pl-9`/`pl-10` utilities now override the component `padding` shorthand?**
  YES. Tailwind emits its utilities through `@tailwind utilities;` (line 3 of `index.css`), which places them in the `utilities` CSS cascade layer. Per the CSS cascade-layer ordering rule, declarations in a layer declared **later** beat declarations in an **earlier** layer at equal specificity, regardless of source order. The layer order established by the three `@tailwind` directives is `base → components → utilities`, so the `utilities` layer (containing `.pl-10 { padding-left: 2.5rem }`) wins over the `components` layer (containing `.input { padding: 0.55rem 0.75rem }`). Before this change, `.input` was declared outside any layer, which made it an *unlayered* style — and unlayered styles beat layered styles in the cascade, so the utility was losing. Wrapping in `@layer components` fixes this app-wide for every `.input`/`.select`/`.textarea` that uses `pl-*`/`pr-*` (LoginPage, BookingPage, etc.).

- **Why `pl-10` (2.5rem = 40px) instead of `pl-9` (2.25rem = 36px)?**
  Icons sit at `left-3` (12px) and are `h-4 w-4` (16px), so they occupy roughly 12–28px of horizontal space. `pl-9` left only an 8px gap between icon edge and text start, which clipped ascenders/descenders and made placeholders appear to overlap the icon. `pl-10` gives a comfortable 12px gap (text starts at 40px, icon ends ~28px). Combined with the layer fix above, the utility now actually applies.

## Concerns
None. No commit performed (per instructions). Build and typecheck both green. Pre-existing WIP files left exactly as found.
```
```