/* =================================================================== 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. =================================================================== */ /* =================================================================== BASE CLARA NEUTRA — mismo criterio que Dark Mode: el "chrome" (fondo blanco, superficies, bordes, paneles) es IGUAL para todas las categorías; el color solo vive en --acento-* (bloque por categoría más abajo). Valores neutros = los mismos que ya usa Home en claro. =================================================================== */ html[data-modo="claro"] { --bg: #fafafa; --superficie: #f5f5f5; --superficie-clara: #ececec; --borde: #b8b8b8; --borde-suave: #d8d8d8; --borde-brillo: rgba(255, 255, 255, 0.75); --panel-borde-ext: #fcfcfc; --panel-borde-int: rgba(0, 0, 0, 0.14); --panel-grad: linear-gradient(180deg, #ececec 0%, #f5f5f5 100%); --panel-grad-clara: linear-gradient(180deg, #ffffff 0%, #ececec 100%); --bg-rgb: 250, 250, 250; --superficie-rgb: 245, 245, 245; --borde-rgb: 184, 184, 184; --panel-borde-int-rgb: 0, 0, 0; --texto: #161a20; --texto-tenue: #545e6e; /* Movies (azul) es el acento por defecto en claro. */ --acento: #163ba2; --acento-suave: #1d4ed8; --acento-glow: rgba(29, 78, 216, 0.22); --acento-rgb: 22, 59, 162; --acento-suave-rgb: 29, 78, 216; } /* ===== Acento por categoría en MODO CLARO (solo los tokens de acento — la base la pone el bloque neutro de arriba). Doble selector: ver el comentario grande al inicio del archivo. ===== */ html[data-modo="claro"].tema-series, html[data-modo="claro"] body.tema-series { --acento: #0b5225; --acento-suave: #12883e; --acento-glow: rgba(18, 136, 62, 0.22); --acento-rgb: 11, 82, 37; --acento-suave-rgb: 18, 136, 62; } html[data-modo="claro"].tema-kdramas, html[data-modo="claro"] body.tema-kdramas { --acento: #740083; --acento-suave: #ab00c0; --acento-glow: rgba(171, 0, 192, 0.22); --acento-rgb: 116, 0, 131; --acento-suave-rgb: 171, 0, 192; } html[data-modo="claro"].tema-videogames, html[data-modo="claro"] body.tema-videogames { --acento: #8f0000; --acento-suave: #cc0000; --acento-glow: rgba(204, 0, 0, 0.22); --acento-rgb: 143, 0, 0; --acento-suave-rgb: 204, 0, 0; } html[data-modo="claro"].tema-books, html[data-modo="claro"] body.tema-books { --acento: #7d4823; --acento-suave: #ad6331; --acento-glow: rgba(173, 99, 49, 0.22); --acento-rgb: 125, 72, 35; --acento-suave-rgb: 173, 99, 49; } /* ===== 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. */ /* Borde: en Dark Mode el color-mix al 55% (home.css) resalta solo por el contraste natural contra el fondo casi negro — sobre blanco, ese mismo 55% se percibe deslavado (reporte real del usuario: "se pierden visualmente contra el fondo"). Se sube a 1.5px / ~68% SOLO en Light Mode (Dark Mode sigue leyendo 1px/55% de home.css, intacto). El ícono interior (.home-icono, más abajo) se queda en el 55% de siempre, para que su anillo siga viéndose más sutil que el marco exterior de la tarjeta — la jerarquía visual pedida. Sombra: se cambia de negro puro a un gris-azulado muy oscuro (rgba(15,23,42,...)) — mismo criterio "tinte frío" que ya usa el resto de la paleta clara, se siente menos duro que negro plano. */ html[data-modo="claro"] .home-tarjeta { background: linear-gradient(180deg, #ffffff 0%, var(--superficie-clara) 100%); color: var(--texto); border: 1.5px solid color-mix(in srgb, var(--color-cat) 68%, transparent); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.045) inset, 0 10px 26px rgba(15, 23, 42, 0.07); } html[data-modo="claro"] .home-tarjeta:hover, html[data-modo="claro"] .home-tarjeta:focus-visible { border-color: color-mix(in srgb, var(--color-cat) 88%, transparent); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05) inset, 0 16px 32px rgba(15, 23, 42, 0.11), 0 0 22px color-mix(in srgb, var(--color-cat) 24%, 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(0, 0, 0, 0.03), transparent 60%), radial-gradient(ellipse 900px 600px at 85% 35%, rgba(0, 0, 0, 0.022), transparent 65%), radial-gradient(ellipse 900px 600px at 10% 60%, rgba(0, 0, 0, 0.018), transparent 65%), radial-gradient(ellipse 1400px 700px at 50% 115%, rgba(0, 0, 0, 0.04), 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); } /* =================================================================== DARK GLASS en Modo Claro — el mismo sistema (tokens --glass-* de style.css) produce un "light glass" al resolver --superficie-rgb/ --bg-rgb ya claros. Solo se ajusta acá: superficie MÁS opaca (para que la tarjeta se separe bien de un fondo blanco) y sombras más suaves (el negro puro pesa demasiado sobre blanco). data-modo solo vive en y ningún body redefine --glass-*, así que un único selector basta (a diferencia de las variables de color, ver arriba). */ html[data-modo="claro"] { --glass-fondo: radial-gradient(150% 120% at 28% -12%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 26%, rgba(255, 255, 255, 0) 58%), radial-gradient(120% 70% at 50% -22%, rgba(var(--acento-rgb), 0.05) 0%, rgba(var(--acento-rgb), 0) 78%), linear-gradient(180deg, rgba(var(--superficie-rgb), 0.95) 0%, rgba(var(--superficie-rgb), 0.90) 38%, rgba(var(--superficie-rgb), 0.89) 68%, rgba(var(--bg-rgb), 0.90) 100%); --glass-fondo-suave: radial-gradient(150% 120% at 28% -12%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 58%), linear-gradient(180deg, rgba(var(--superficie-rgb), 0.86) 0%, rgba(var(--superficie-rgb), 0.80) 60%, rgba(var(--bg-rgb), 0.80) 100%); --glass-sombra: inset 0 1px 0 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(var(--panel-borde-int-rgb), 0.05), inset 0 -34px 48px -40px rgba(var(--borde-rgb), 0.4), 0 18px 38px -16px rgba(var(--borde-rgb), 0.5), 0 0 22px -10px rgba(var(--acento-suave-rgb), 0.1); --glass-sombra-suave: inset 0 1px 0 0 rgba(255, 255, 255, 0.7), inset 0 -24px 36px -34px rgba(var(--borde-rgb), 0.3), 0 10px 24px -14px rgba(var(--borde-rgb), 0.4); }