/* =================================================================== MODO CLARO — mismas variables de tema que ya usa toda la app (ver el comentario grande al principio de style.css), solo que con valores claros DERIVADOS de los mismos colores de categoría que ya existen en Dark Mode (nunca colores nuevos/inventados). Un solo bloque por categoría, exactamente igual de estructurado que .tema-series/ .tema-kdramas/.tema-videogames/.tema-books/.fondo-home en style.css/ home.css — la única diferencia es el selector: en vez de ".tema-X" es "html[data-modo="claro"].tema-X", que gana por especificidad sobre la versión oscura sin depender del orden de carga de los archivos. IMPORTANTE — por qué cada bloque (salvo Movies) tiene DOS selectores, no uno: en Dark Mode, ".tema-series"/".tema-kdramas"/".tema-videogames"/ ".tema-books" (style.css) y "html.fondo-home, body.fondo-home" (home.css) son selectores SUELTOS (sin calificar por elemento) que además vienen puestos TANTO en COMO en (ver cada *.html: "" y "") — así que esas variables quedan declaradas DIRECTO en los dos elementos, no solo heredadas de html a body. data-modo, en cambio, SOLO se pone en (js/tema.js). Si acá solo se sobreescribe "html[data-modo=claro].tema-X" (nada más en html), se queda con SU PROPIA copia directa de los valores oscuros sin tocar — y una propiedad puesta directo en un elemento le gana a la heredada del padre, sin importar especificidad. Resultado real que se vio: el fondo/tarjetas seguían oscuros aunque ya tuviera las variables claras bien puestas. Por eso cada bloque de acá redefine las variables en LOS DOS selectores: "html [data-modo=claro].tema-X" (por si algo lee la variable heredando directo de html) Y "html[data-modo=claro] body.tema-X" (para pisar la copia directa que body ya tiene). Movies es la única excepción: su versión oscura vive en ":root" puro (SOLO existe en html, nunca se copia a body), así que ahí un solo selector alcanza. Cómo se activa: js/tema.js pone data-modo="claro" en (guardado en localStorage, ver ese archivo) — nada más. Dark Mode sigue siendo el default absoluto (sin el atributo, o con data-modo="oscuro"), y sus valores en style.css/home.css NO se tocan. Valores generados con scripts/notion-import/derivar-tema-claro.js (herramienta puntual, no parte de la app) a partir de los --acento/ --acento-suave oscuros de cada categoría, con verificación de contraste WCAG AA (4.5:1) tanto para texto sobre blanco como para texto blanco sobre el color de relleno de botones/badges. =================================================================== */ /* ===== MOVIES (azul) — default de :root, SOLO existe en html ===== */ html[data-modo="claro"] { --bg: #f8f9fc; --superficie: #f1f3f9; --superficie-clara: #e0e5f5; --borde: #9eaedb; --borde-suave: #ccd2e6; --borde-brillo: rgba(255, 255, 255, 0.75); --acento: #163ba2; --acento-suave: #1d4ed8; --acento-glow: rgba(29, 78, 216, 0.22); --panel-borde-ext: #fcfcfd; --panel-borde-int: rgba(29, 78, 216, 0.45); --panel-grad: linear-gradient(180deg, #e0e5f5 0%, #f1f3f9 100%); --panel-grad-clara: linear-gradient(180deg, #ffffff 0%, #e0e5f5 100%); --acento-rgb: 22, 59, 162; --acento-suave-rgb: 29, 78, 216; --bg-rgb: 248, 249, 252; --superficie-rgb: 241, 243, 249; --borde-rgb: 158, 174, 219; --panel-borde-int-rgb: 29, 78, 216; /* Texto — compartido entre categorías, igual criterio que Dark Mode (--texto/--texto-tenue no cambian por categoría, solo por modo). */ --texto: #161a20; --texto-tenue: #545e6e; } /* ===== SERIES (verde) ===== */ html[data-modo="claro"].tema-series, html[data-modo="claro"] body.tema-series { --bg: #f8fcf9; --superficie: #f1f9f4; --superficie-clara: #e0f5e8; --borde: #9edbb5; --borde-suave: #cce6d5; --acento: #0b5225; --acento-suave: #12883e; --acento-glow: rgba(18, 136, 62, 0.22); --panel-borde-ext: #fcfdfc; --panel-borde-int: rgba(18, 136, 62, 0.45); --panel-grad: linear-gradient(180deg, #e0f5e8 0%, #f1f9f4 100%); --panel-grad-clara: linear-gradient(180deg, #ffffff 0%, #e0f5e8 100%); --acento-rgb: 11, 82, 37; --acento-suave-rgb: 18, 136, 62; --bg-rgb: 248, 252, 249; --superficie-rgb: 241, 249, 244; --borde-rgb: 158, 219, 181; --panel-borde-int-rgb: 18, 136, 62; --texto: #161a20; --texto-tenue: #545e6e; } /* ===== K-DRAMAS (morado) ===== */ html[data-modo="claro"].tema-kdramas, html[data-modo="claro"] body.tema-kdramas { --bg: #fcf8fc; --superficie: #f9effa; --superficie-clara: #f6dcf9; --borde: #dc95e4; --borde-suave: #e6c8ea; --acento: #740083; --acento-suave: #ab00c0; --acento-glow: rgba(171, 0, 192, 0.22); --panel-borde-ext: #fdfbfd; --panel-borde-int: rgba(171, 0, 192, 0.45); --panel-grad: linear-gradient(180deg, #f6dcf9 0%, #f9effa 100%); --panel-grad-clara: linear-gradient(180deg, #ffffff 0%, #f6dcf9 100%); --acento-rgb: 116, 0, 131; --acento-suave-rgb: 171, 0, 192; --bg-rgb: 252, 248, 252; --superficie-rgb: 249, 239, 250; --borde-rgb: 220, 149, 228; --panel-borde-int-rgb: 171, 0, 192; --texto: #161a20; --texto-tenue: #545e6e; } /* ===== VIDEOGAMES (rojo) ===== */ html[data-modo="claro"].tema-videogames, html[data-modo="claro"] body.tema-videogames { --bg: #fcf8f8; --superficie: #faefef; --superficie-clara: #f9dcdc; --borde: #e49595; --borde-suave: #eac8c8; --acento: #8f0000; --acento-suave: #cc0000; --acento-glow: rgba(204, 0, 0, 0.22); --panel-borde-ext: #fdfbfb; --panel-borde-int: rgba(204, 0, 0, 0.45); --panel-grad: linear-gradient(180deg, #f9dcdc 0%, #faefef 100%); --panel-grad-clara: linear-gradient(180deg, #ffffff 0%, #f9dcdc 100%); --acento-rgb: 143, 0, 0; --acento-suave-rgb: 204, 0, 0; --bg-rgb: 252, 248, 248; --superficie-rgb: 250, 239, 239; --borde-rgb: 228, 149, 149; --panel-borde-int-rgb: 204, 0, 0; --texto: #161a20; --texto-tenue: #545e6e; } /* ===== BOOKS (café) ===== */ html[data-modo="claro"].tema-books, html[data-modo="claro"] body.tema-books { --bg: #fbfaf9; --superficie: #f8f4f2; --superficie-clara: #f3e9e3; --borde: #d3b8a7; --borde-suave: #e2d7cf; --acento: #7d4823; --acento-suave: #ad6331; --acento-glow: rgba(173, 99, 49, 0.22); --panel-borde-ext: #fdfcfc; --panel-borde-int: rgba(173, 99, 49, 0.45); --panel-grad: linear-gradient(180deg, #f3e9e3 0%, #f8f4f2 100%); --panel-grad-clara: linear-gradient(180deg, #ffffff 0%, #f3e9e3 100%); --acento-rgb: 125, 72, 35; --acento-suave-rgb: 173, 99, 49; --bg-rgb: 251, 250, 249; --superficie-rgb: 248, 244, 242; --borde-rgb: 221, 176, 146; --panel-borde-int-rgb: 173, 99, 49; --texto: #161a20; --texto-tenue: #545e6e; } /* ===== HOME (gris — blanco/negro, sin color propio, igual criterio que "html.fondo-home, body.fondo-home" en home.css) ===== */ html[data-modo="claro"].fondo-home, html[data-modo="claro"] body.fondo-home { --bg: #fafafa; --superficie: #f5f5f5; --superficie-clara: #ebebeb; --borde: #b8b8b8; --borde-suave: #d6d6d6; --acento: #2b2b2b; --acento-suave: #4a4a4a; --acento-glow: rgba(74, 74, 74, 0.22); --panel-borde-ext: #fcfcfc; --panel-borde-int: rgba(74, 74, 74, 0.45); --panel-grad: linear-gradient(180deg, #ebebeb 0%, #f5f5f5 100%); --panel-grad-clara: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%); --acento-rgb: 43, 43, 43; --acento-suave-rgb: 74, 74, 74; --bg-rgb: 250, 250, 250; --superficie-rgb: 245, 245, 245; --borde-rgb: 184, 184, 184; --panel-borde-int-rgb: 74, 74, 74; --texto: #161a20; --texto-tenue: #545e6e; } /* =================================================================== HOME — arreglo del problema real reportado: .home-tarjeta, .home-icono, el fondo de body.fondo-home y varios textos chicos (tagline, indicador de almacenamiento) tienen sus colores escritos DIRECTO en hex/rgba en home.css (#050505, #0a0a0a, #f0f0f0, rgba(255,255,255,...)) — nunca pasan por var(--bg)/var(--superficie)/var(--texto), así que aunque esas variables ya estén bien definidas arriba, estas reglas las ignoran por completo y la página se queda viéndose negra sin importar el modo. Se sobreescribe cada una acá, solo para Light Mode — Dark Mode no se toca (sigue leyendo directo de home.css, ni un valor cambia). =================================================================== */ html[data-modo="claro"] body.fondo-home { background: radial-gradient(ellipse 1000px 500px at 50% -10%, rgba(0, 0, 0, 0.025), transparent 60%), radial-gradient(ellipse 900px 700px at 85% 100%, rgba(0, 0, 0, 0.02), transparent 65%), radial-gradient(ellipse 900px 700px at 10% 90%, rgba(0, 0, 0, 0.015), transparent 65%), var(--bg); background-color: var(--bg); } /* Logo KEEPB — el PNG original (icons/keepb-banner.png) no tiene canal alpha, el rectángulo negro alrededor de las letras está pintado en la imagen misma. A pedido del usuario se generó icons/keepb-banner-claro.png (mismas letras y barras, mismos colores — recorte por color de fondo, no reinterpretación del diseño) quitando ese negro, para Light Mode. Acá solo se hace el swap: se apaga el banner oscuro y se prende el claro (los dos viven siempre en el DOM, ver index.html). */ html[data-modo="claro"] .home-header-icono-oscuro { display: none; } html[data-modo="claro"] .home-header-icono-claro { display: block; } /* Los dos arcos de luz blanca (::before/::after) son puramente decorativos, pensados para resaltar sobre un fondo casi negro — sobre blanco no aportan nada y se ven como una mancha; se ocultan. */ html[data-modo="claro"] body.fondo-home::before, html[data-modo="claro"] body.fondo-home::after { display: none; } html[data-modo="claro"] .home-almacenamiento-icono { color: var(--texto-tenue); } html[data-modo="claro"] .home-almacenamiento-texto span { color: var(--texto-tenue); } html[data-modo="claro"] .home-almacenamiento-barra { background: var(--borde-suave); } html[data-modo="claro"] .home-almacenamiento-barra-relleno { background: var(--acento-suave); } html[data-modo="claro"] .home-header .home-tagline { color: var(--texto-tenue); } /* Tarjetas de categoría — el cambio central que pedía el usuario: fondo CLARO (blanco → var(--superficie-clara), la superficie "elevada" de tarjeta, igual criterio que .poster-tarjeta en los catálogos) en vez del #0a0a0a fijo, con el color de cada categoría quedando SOLO en borde/ícono/subrayado — nunca tiñendo el área principal. */ html[data-modo="claro"] .home-tarjeta { background: linear-gradient(180deg, #ffffff 0%, var(--superficie-clara) 100%); color: var(--texto); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset, 0 6px 18px rgba(0, 0, 0, 0.08); } html[data-modo="claro"] .home-tarjeta:hover, html[data-modo="claro"] .home-tarjeta:focus-visible { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset, 0 10px 24px rgba(0, 0, 0, 0.12), 0 0 20px color-mix(in srgb, var(--color-cat) 30%, transparent); } html[data-modo="claro"] .home-icono { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-cat) 16%, #ffffff), var(--superficie) 70%); } html[data-modo="claro"] .home-tarjeta span { color: var(--texto); } html[data-modo="claro"] .home-tarjeta small { color: var(--texto-tenue); } /* El fondo de body (style.css) tiene una "viñeta inferior oscura" fija en negro — pensada para dar ambiente sobre un fondo oscuro, pero se vería como una mancha sucia al pie de una página blanca. Se repite la MISMA receta (mismos halos de luz arriba, misma textura de metal cepillado) cambiando solo esa viñeta por una versión clara y mucho más sutil, coherente con una superficie iluminada en vez de un gabinete oscuro. No aplica en Home (tiene su propio fondo, ver arriba). */ html[data-modo="claro"] body:not(.fondo-home) { background: radial-gradient(ellipse 1100px 480px at 50% -8%, rgba(var(--acento-suave-rgb), 0.07), transparent 60%), radial-gradient(ellipse 900px 600px at 85% 35%, rgba(var(--borde-rgb), 0.12), transparent 65%), radial-gradient(ellipse 900px 600px at 10% 60%, rgba(var(--borde-rgb), 0.1), transparent 65%), radial-gradient(ellipse 1400px 700px at 50% 115%, rgba(var(--borde-rgb), 0.18), transparent 60%), repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.4) 0px, rgba(255, 255, 255, 0.4) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(25deg, rgba(0, 0, 0, 0.025) 0px, rgba(0, 0, 0, 0.025) 1px, transparent 1px, transparent 4px), var(--bg); }