# Migración de estilos Cuba → Porto: eliminación total de `modern.scss`

> Documento vivo de la rama `feat/cuba-porto-admin`. Complementa el plan de fases en
> `~/.claude/plans/golden-wibbling-hopper.md`. Decisión tomada 2026-08-11 tras inventariar
> `modern.scss` sección por sección.

## Decisión

`modern.scss` **se elimina por completo** (no se poda). Su contenido vivo migra a una nueva
cadena de estilos que replica el **mecanismo de capas de pro9** (theme estático + CSS de app +
skin del tenant como último link), pero conservando nuestros **tokens `--mn-*`** como fuente de
verdad (superiores al enfoque de pro9, que hardcodea hex sin tokens y usa skins de 120 KB+).

## Anatomía de `modern.scss` (6.166 líneas)

| Categoría | Peso | Qué pasa |
|---|---|---|
| **App-components** (reportes, dashboard, Vet, Clínica, formularios, modales) | ~80% (~4.850 l) | **Migran** tal cual a `porto-app.scss` — solo dependen de tokens, no de Cuba |
| **Anti-Cuba** (sidebar navy + purga morados, colapsado/flyout, drawer móvil, densidad header, teal, anti-Rubik) | ~12-15% (~750 l) | **Mueren** con Cuba |
| **Anti-Element-Plus** (overrides vs CSS de EP inyectado en runtime) | ~5-6% | Migran a `element-plus.scss` propio (EP inyecta después con CUALQUIER theme — pro9 tiene su `element-ui.scss` por lo mismo) |
| **Bloques imprescindibles** (ver abajo) | ~260 l | **Extraer ANTES de borrar** |

## Los 3 bloques que NO se pueden perder (extraer primero)

Si se borran sin migrar, rompen la app:

1. **Tokens `:root`** (`modern.scss` ~2575-2637 + `--mn-header-h`): `--mn-*`, `--df-*` (aliases),
   puente `--bs-*`. Los lee `resources/js/app.js` (~1597) para el puente de Element Plus y
   decenas de componentes Vue con `var(--mn-*)`. **Fuente de verdad — va primero en `porto-app.scss`.**
2. **Bridge BS4 → BS5** (~2435-2573): shim de utilities (`.ml-*`, `.badge-primary`, etc.) para
   markup legacy todavía vivo. Independiente de Cuba.
3. **Shim `el-icon-*` → FA6** (~6094-6146): mapea ~36 clases de iconos de Element UI **v1** a
   glifos Font Awesome 6, usadas en 159 componentes Vue. Sin esto, esos íconos renderizan cuadrados vacíos.

## Estructura destino (orden de cascada, como pro9)

```
vite/webpack (Bootstrap + Element Plus)   ← primero
  → porto-light/css/theme.css              ← theme Porto estático (no se compila)
  → public/css/porto-app.css               ← NUESTRO: tokens + bridge BS4 + shim el-icon
                                              + ~4.850 líneas app-components + anti-EP
  → theme/custom_styles.css (hook opcional)
  → storage/skins/{tenant}.css             ← Fase 7, ÚLTIMO link, gana la cascada
```

- Entry nuevo: `resources/sass/porto-app.scss` → `public/css/porto-app.css`. **Sin** las ~750
  líneas anti-Cuba.
- `variable.scss` **también muere**: es del template *Wrappixel "Admin Pro"* (ni siquiera Cuba —
  un tercer theme fantasma). `modern.scss` solo consume `$themecolor` de ahí (5 usos) → se
  reemplaza por `var(--mn-primary-dk)`.
- `style.scss` / `app.css` y `overrides.scss` / `overrides.css` **mueren**: hoy compilan
  `modern.scss` **duplicado** en dos bundles distintos.

## Consumidores afectados (mapa verificado)

`modern.scss` llega hoy por **dos** bundles:
- `overrides.css` → linkeado por `tenant/layouts/app.blade.php` = **todo el admin tenant** (incl. `pos/index`).
- `app.css` (vía `style.scss:26`) → linkeado por `tenant/layouts/app_pos.blade.php` = **POS pantalla completa**.

El POS usa clases de modern (`.mn-product-sub`, `.mn-incentive`) → **ambas variantes de POS**
entran al plan de migración de estilos.

**NO consumen `modern.scss`** (no se tocan): system admin, login tenant (standalone), web público
(search / payment-links), storefront ecommerce.

⚠️ En el admin, `@stack('styles')` carga **después** de `setting.css` — la regla de `CLAUDE.md`
"`setting.css` es el último stylesheet" solo vale para páginas sin `@push('styles')`.

## Orden de trabajo seguro

1. Extraer los 3 bloques imprescindibles a `porto-app.scss` (tokens primero).
2. Migrar las ~4.850 líneas de app-components + el ~5-6% anti-EP (a `porto-app.scss` /
   `element-plus.scss`), reemplazando `$themecolor` por `var(--mn-primary-dk)`.
3. Cablear `porto-app.css` en el lado Porto del layout (orden de cascada de arriba).
4. Verificar POS (ambas variantes) con la cadena nueva.
5. Recién entonces (Fase 8, 100% tenants en Porto) borrar `modern.scss`, `overrides.*`,
   `style.scss`/`app.css`, `variable.scss` y sus entradas en `webpack.mix.js` + `<link>` en blades.

## Notas de auditoría

- La numeración interna de secciones de `modern.scss` está **triplicada** (dos series "N." + una
  "§34-§55", con §34-§45 repetidos con contenidos distintos). **Referirse siempre a rangos de
  líneas, nunca a números de sección.**
- Las peleas anti-EP **no desaparecen** con Cuba: EP2 inyecta su CSS en runtime después de
  cualquier stylesheet. Alternativa a los `!important`: cambiar el orden de carga en webpack.