/* ========================================================================== casos-tema.css — puente entre el tema del sitio y el de las secciones -------------------------------------------------------------------------- Las secciones `.caso` nacieron como piezas sueltas: deciden claro u oscuro con `@media (prefers-color-scheme: dark)`, o sea segun el sistema operativo. El sitio no funciona asi: pone `data-theme="light"|"dark"` en el y lo guarda en localStorage, porque el visitante puede elegir. Sin este puente pasan las dos mitades del problema: · SO oscuro + sitio en claro → la pagina clara y las secciones negras. · SO claro + sitio en oscuro → la pagina negra y las secciones blancas. VA DE ULTIMO. Sus reglas empatan en especificidad con las de caso-base.css y con las hojas de cada caso, asi que solo ganan por venir despues. Adaptado de "03_2 Proyectos pequenos/casos/casos-tema.css" (la pagina que se retiro). Aca solo esta lo de los casos que usa el visor del portafolio. ========================================================================== */ /* --- 1. Grises: siempre los del sitio, en cualquier tema ------------------ Sin media query: --bg-card y compania ya cambian solas cuando el sitio cambia de tema, asi que una sola regla vale para claro y oscuro. El prefijo `[data-theme]` no es decorativo. caso-base.css declara sus grises con `.caso:not([data-tema="claro"])`, que pesa (0,2,0); un `.caso` a secas pesa (0,1,0) y PIERDE. Con el atributo del delante quedan empatadas y gana esta por cargarse despues. De paso acota el efecto al sitio: en la vista previa suelta de cada caso no hay data-theme y estas reglas no aplican, que es justo lo que se quiere. */ [data-theme] .caso { --caso-tinta: var(--text-title); --caso-tinta-suave: var(--text-muted); --caso-fondo: var(--bg-card); --caso-fondo-alt: var(--bg-alt); --caso-linea: var(--border-color); } /* --- 2. La Cañaña --------------------------------------------------------- El fragmento trae `data-tema="claro"` porque sus piezas son beige y marron sobre fondo claro. Dentro del sitio eso ya no manda: la regla de arriba le pone los grises del sitio, asi que en modo oscuro el fondo se oscurece. Y ahi aparece el problema: su marron #7d4e24 sobre fondo oscuro queda en 2,1:1 — ilegible. Estos acentos son la version aclarada del mismo marron, medidos contra el fondo oscuro del sitio (#131722). */ [data-theme="dark"] .caso--lacananna { --caso-acento: #d9a273; /* marron claro — 7,4:1 sobre el fondo oscuro */ --caso-acento-texto: #241505; /* casi negro, para texto sobre el acento */ --caso-secundario: #e8c9a8; /* crema, para los apoyos */ } /* --- 4. PropLegal ----------------------------------------------------- caso-proplegal.css no trae bloque de modo oscuro a proposito: sus seis piezas son mockups azul y blanco sobre fondo claro, y por eso trae data-tema="claro" (ver el comentario en esa hoja). Pero data-tema="claro" solo apaga el @media de caso-base.css — no protege del interruptor DEL SITIO. Con el sitio en oscuro, la regla 1 de aqui arriba oscurece el fondo de la seccion igual, y el azul #0165c3 sobre ese fondo queda en 3,2:1 — bajo el minimo AA (4,5:1). Mismo problema que La Cañaña, aca sin resolver hasta ahora. --caso-acento se usa en dos papeles: como TEXTO (el "em" del titular, el rotulo del cierre) y como FONDO de la pildora superior (con --caso-acento-texto encima). Aclarar el azul resuelve el primer papel; por eso --caso-acento-texto pasa a un azul casi negro, para seguir leyendose sobre la pildora ya aclarada. */ [data-theme="dark"] .caso--proplegal { --caso-acento: #6fb0e8; /* azul claro — 7,9:1 sobre el fondo oscuro */ --caso-acento-texto: #062038; /* azul casi negro, 7,1:1 sobre el acento */ } /* --- 3. La Cañaña con el sitio en claro y el sistema en oscuro ------------ Sin este bloque, el media query de caso-la-cananna.css sigue ganando y los acentos salen en su version oscura sobre una pagina blanca. Se repiten los valores originales de la hoja del caso: son los correctos para fondo claro. */ @media (prefers-color-scheme: dark) { [data-theme="light"] .caso--lacananna { --caso-acento: #7d4e24; /* marron del logotipo */ --caso-acento-texto: #f4eade; /* crema, 5,92:1 sobre el acento */ --caso-secundario: #402a15; /* marron oscuro */ } } /* --- 5. Asistir --------------------------------------------------------- Mismo problema que PropLegal y La Cañaña: caso-asistir.css trae data-tema="claro" y su indigo #3f4194 mide 2,1:1 sobre el fondo oscuro del sitio — casi tan bajo como el marron original de La Cañaña. La diferencia con los otros dos casos: aca NO hace falta inventar un color nuevo. caso-asistir.css YA trae un bloque de modo oscuro completo y medido (comentario original: "8,1:1 sobre #101215"), pero atado a `.caso--asistir:not([data-tema="claro"])` — o sea que se pensó para cuando el SISTEMA esta oscuro, no para cuando el SITIO lo esta, y con data-tema="claro" puesto ese bloque nunca corre. Se reactivan aqui los mismos valores, sin recalcular nada. */ [data-theme="dark"] .caso--asistir { --caso-acento: #9ba1ee; /* indigo claro — 7,6:1 sobre el fondo oscuro */ --caso-acento-texto: #0d0e1c; --caso-secundario: #c0bce0; --caso-fondo-alt: #17181f; --caso-linea: #2e3040; } /* --- 6. Pasaje La Fortaleza ----------------------------------------------- Mismo problema, sin bloque de modo oscuro previo (como PropLegal): el azul #0e448c mide 9,4:1 sobre BLANCO (el comentario original de caso-lafortaleza.css), pero solo 1,95:1 sobre el fondo oscuro del sitio — el peor de los tres casos resueltos hasta ahora. --caso-acento aca SOLO pinta texto chico (el sobretitulo y el filete, segun el propio comentario del caso) — no hace de fondo de nada, asi que no hace falta la pareja con --caso-acento-texto invertida como en PropLegal. --caso-secundario tampoco se toca: los swatches de marca (.lf-color--azul / --naranja) usan sus hex fijos, no la variable — son una referencia de color de marca y tienen que quedarse en su tono exacto pase lo que pase con el tema del sitio. */ [data-theme="dark"] .caso--lafortaleza { --caso-acento: #6fa8e6; /* azul claro — 7,4:1 sobre el fondo oscuro */ } /* --- 7. Eurofarma ------------------------------------------------------- Identico a Asistir, y por la misma razon: caso-eurofarma.css YA trae un bloque de modo oscuro completo y medido, pero atado a `.caso--eurofarma:not([data-tema="claro"])`. Sus tres
llevan data-tema="claro", asi que ese bloque no corre nunca — se penso para cuando el SISTEMA esta oscuro, no para cuando lo esta el SITIO. No se recalcula nada: se reactivan los mismos valores que ya venian medidos en la hoja del caso. El magenta original (#D6005B) esta pensado para fondo blanco y sobre el fondo oscuro del sitio queda ilegible. */ [data-theme="dark"] .caso--eurofarma { --caso-acento: #ff8fb8; /* rosa claro — 8,8:1, medido en el caso */ --caso-acento-texto: #2a0014; --caso-secundario: #8fb8f0; --caso-fondo-alt: #1b1418; --caso-linea: #34262d; } /* --- 8. Fígaro ---------------------------------------------------------- Tercera vez el mismo patron (Asistir, Eurofarma, y ahora este): la hoja del caso trae su bloque de modo oscuro medido, atado a `.caso--figaro:not([data-tema="claro"])`, y la seccion lleva data-tema="claro" — asi que no corre nunca. Aca el contraste importa doble: el dorado de la version clara (#946200) esta bajado a AA para leerse sobre blanco, y sobre el fondo oscuro del sitio se apaga. El de marca sin bajar (#ffc949) mide 12,2:1 sobre oscuro, asi que ademas de resolver el contraste devuelve el color real de Figaro. */ [data-theme="dark"] .caso--figaro { --caso-acento: #ffc949; /* dorado de marca tal cual — 12,2:1 */ --caso-acento-texto: #231800; --caso-secundario: #8ab8e8; } /* --- 9. Juvenia — el caso raro ------------------------------------------ No es de la familia `caso__`: trae su propio vocabulario (`juvenia-*`), asi que la regla 1 de este archivo (`[data-theme] .caso`) no lo alcanza. Y su hoja no tiene bloque de modo oscuro: codifica `background: #fff` en duro y un `--j-ink` casi negro. Sin este puente queda de isla blanca dentro de la pagina oscura. Hay que tocar FONDOS y no solo tokens, justamente porque estan en duro. El rojo de marca (#d7082f) mide 3,5:1 sobre el fondo oscuro del sitio — por debajo del minimo AA de 4,5:1. #ff6b7f es el mismo rojo aclarado y llega a 6,8:1. El turquesa (#16d5c6) ya contrasta de sobra y se queda. */ [data-theme="dark"] .juvenia-section { --j-red: #ff6b7f; /* rojo aclarado — 6,8:1 sobre el fondo */ --j-red-dark: #ff8f9e; --j-ink: var(--text-title); --j-muted: var(--text-muted); --j-line: var(--border-color); --j-soft: rgba(255, 107, 127, .10); background: var(--bg-card); } [data-theme="dark"] .juvenia-tab { background: var(--bg-alt); border-color: var(--border-color); } [data-theme="dark"] .juvenia-section__footer { background: var(--bg-alt); } /* El gris de relleno que se ve mientras carga cada pieza. En claro es casi blanco y en oscuro destella. */ [data-theme="dark"] .juvenia-piece button, [data-theme="dark"] .juvenia-tile button { background: var(--bg-alt); } /* --- 7. La Herencia ------------------------------------------------------- Tercera vez el mismo patron (Asistir, La Fortaleza, y ahora esta): el caso trae `data-tema="claro"` porque su paleta nacio para papel crema y fotografia calida, y su vinotinto #7a1e12 mide 1,77:1 sobre el fondo oscuro del sitio — ilegible. Y como en Asistir, NO hace falta inventar color: caso-la-herencia.css ya trae el bloque de oscuro completo y calibrado ("el acento pasa al dorado de las velas"), pero atado a `@media (prefers-color-scheme: dark)` + `:not([data-tema="claro"])`. O sea que se penso para cuando el SISTEMA esta oscuro, no para cuando lo esta el SITIO, y con el atributo puesto no corre nunca. Se reactivan aqui los mismos valores, sin recalcular nada: el dorado da 10,1:1 sobre el fondo oscuro. */ [data-theme="dark"] .caso--herencia { --caso-acento: #e8b86a; /* dorado de las velas — 10,1:1 */ --caso-acento-texto: #231500; /* 11,0:1 sobre el acento */ --caso-secundario: #d9bba0; --caso-fondo-alt: #171310; --caso-linea: #332c20; } /* --- 8. La Rueda ---------------------------------------------------------- Cuarta vez lo mismo (Asistir, La Fortaleza, La Herencia, esta). A estas alturas conviene leerlo como regla y no como sorpresa: TODO caso legado con `data-tema="claro"` trae su bloque de oscuro ya escrito y calibrado, y SIEMPRE esta muerto, porque lo condiciona `@media (prefers-color-scheme: dark)` — el modo del SISTEMA— y no el interruptor del SITIO. Aca el naranja Continental #c2410c cae a 2,7:1 sobre el fondo oscuro. Los valores de abajo son los del propio caso, sin tocar: el naranja se aclara a #f97316 (6,6:1) y el secundario pasa a celeste. */ [data-theme="dark"] .caso--larueda { --caso-acento: #f97316; /* naranja aclarado — 6,6:1 */ --caso-acento-texto: #180900; --caso-secundario: #38bdf8; --caso-fondo-alt: #181108; --caso-linea: #451a03; } /* --- 9. Magna Lux --------------------------------------------------------- Quinta vez. Ver el bloque 8 (La Rueda) para el porque: el caso trae sus tokens de oscuro calibrados y atados al modo del SISTEMA, no al del SITIO, asi que con `data-tema="claro"` nunca corren. Se reactivan tal cual. */ [data-theme="dark"] .caso--magnalux { --caso-acento: #c9aedd; --caso-acento-texto: #2a1a34; --caso-secundario: #d9c7e6; --caso-fondo-alt: #17131a; --caso-linea: #2e2536; } /* --- 10. Queen Esther ----------------------------------------------------- Sexta y ultima del lote de casos legados (ago 2026). Mismo diagnostico que los bloques 5 a 9: tokens de oscuro escritos, medidos y muertos porque los gobierna `@media (prefers-color-scheme: dark)` — el modo del SISTEMA— en vez del interruptor del SITIO. Se reactivan tal cual, sin recalcular. */ [data-theme="dark"] .caso--queen-esther { --caso-acento: #d4af37; /* oro de marca — 8,9:1 */ --caso-acento-texto: #241a05; /* 8,2:1 sobre el acento */ --caso-secundario: #c98f97; /* 7,0:1 */ --caso-fondo-alt: #17130e; --caso-linea: #332b21; --caso-tinta-suave: #a89f92; }