/* ========================================================================== Modernist — sistema de diseño (tokens + componentes) -------------------------------------------------------------------------- Copia del `styles.css` del proyecto "Modernist" en claude.ai/design (projectId 28958484-e19d-4fc0-ae29-5a09c539cfc0), con DOS correcciones marcadas abajo como [FIX A] y [FIX B]. Ver CLAUDE.md sección 13.6. Este archivo se mantiene GENÉRICO: no lleva nada específico de Socorrista Urbano. Todo lo propio de la marca vive en `socorrista.css`, que se carga después y pisa lo que haga falta. ────────────────────────────────────────────────────────────────────────── LOS DOS CANDADOS QUE HACEN POSIBLE LA MIGRACIÓN POR ETAPAS ────────────────────────────────────────────────────────────────────────── Durante el rebrand conviven las pantallas viejas (Tailwind, admin.css, alumno.css) con este sistema nuevo. Para que enlazar esta hoja NO le cambie el aspecto a una pantalla que todavía no se migró, hay dos candados puestos, y se necesitan los dos porque tapan agujeros distintos: 1. TODO ESTÁ DENTRO DE @layer. En CSS, cualquier regla SIN capa le gana a una regla CON capa, sin importar el orden ni la especificidad. Eso resuelve los CHOQUES: las clases .btn, .card y .field ya existen en admin.css y alumno.css, y con la capa siguen mandando ellas. 2. TODO SELECTOR EMPIEZA CON :where([data-modernist]). La capa sólo resuelve choques. Si la hoja vieja NUNCA definió una propiedad, la de Modernist se aplicaba igual. Pasó de verdad al probar: `alumno.css` no fija `font-size` ni `line-height` en body, así que Modernist le achicaba el texto de 16px a 15px a TODO el campus. Con el atributo, ninguna regla del sistema existe hasta que la pantalla lo pide explícitamente. `:where(…)` no suma especificidad: `:where([data-modernist]) h1` pesa exactamente lo mismo que `h1` a secas, así que no complica nada después. >>> CÓMO SE MIGRA UNA PANTALLA (etapas 2 a 6) <<< 1. Poner `data-modernist` en la etiqueta . 2. Sacarle el de la hoja vieja (admin.css / alumno.css / Tailwind). Recién ahí la pantalla pasa a verse con el sistema nuevo. ========================================================================== */ /* Orden de capas: socorrista le gana a modernist. OJO con una asimetría de CSS que sorprende: el orden de capas le gana a la especificidad. Un selector flojo en una capa posterior vence a un selector fuerte de una capa anterior. Por eso el blindaje de [FIX B] no puede defenderse solo; ver el LÍMITE CONOCIDO anotado junto a esas reglas. */ @layer modernist, socorrista; @layer modernist { /* Los tokens NO van detrás del interruptor: una variable que nadie usa no pinta nada, así que no puede alterar una pantalla vieja. Dejarlos sueltos permite además que el