/* ========================================================================== Glopy · Tokens de tema (única fuente de verdad) -------------------------------------------------------------------------- Antes cada pantalla declaraba su propio :root con un subconjunto distinto de variables, y encima con nombres que no coincidían (--gl-muted en appshell.css frente a --gl-text-muted en feed.css). Con eso no había un sitio donde cambiar el tema: mandaba la última hoja que cargara. Aquí viven todos los tokens. Este fichero se carga EL PRIMERO en cada pantalla, antes que su CSS propio. Dos familias: · Marca (--gl-blue, --gl-green…) → NO cambian con el tema. · Rol (--gl-surface, --gl-text…) → sí cambian. Los tokens se nombran por lo que HACEN, no por el color que tienen: "--gl-bg: #07090f" deja de tener sentido en cuanto existe un modo claro, mientras que "--gl-surface" sigue siendo verdad en los dos. El tema se aplica con [data-theme] en . `:root[data-theme="light"]` tiene más especificidad (0,1,1) que un `:root` suelto (0,0,1), así que gana aunque una hoja antigua vuelva a declarar sus variables — que es lo que permite migrar pantalla a pantalla sin romper las que faltan. ========================================================================== */ :root { /* --- Marca (idéntica en claro y oscuro) ------------------------------ */ --gl-blue: #1060ff; --gl-blue-soft: #3d86ff; --gl-green: #26d07c; --gl-amber: #f5c451; --gl-violet: #b07cff; --gl-red: #ff4d57; --gl-cyan: #38c6e0; /* --- Tokens heredados de las pantallas splash (welcome, login, onboarding). Vivían en el :root de cada CSS de pantalla y se perdieron al centralizar los tokens aquí: sin ellos el degradado del logo GLOPY quedaba INVISIBLE (texto transparente sobre fondo transparente) y el botón "Empezar" se pintaba negro. Son visuales de marca fijos: no cambian con el tema claro. ---------------------- */ --gl-blue-deep: #0b4ad6; --gl-bg-0: #05070f; --gl-bg-1: #0a0e1a; --gl-radius: 16px; --gl-orange: #ff8a3d; --gl-pink: #ff7ac2; --gl-card-2: #11182a; /* fondo de las hojas inferiores (sheets) */ /* --- Roles · tema oscuro (por defecto) ------------------------------- */ --gl-surface: #07090f; /* fondo de la pantalla */ --gl-surface-raised: #0e1422; /* tarjetas y paneles */ --gl-surface-sunken: #0c1322; /* campos, huecos */ --gl-surface-hover: rgba(255, 255, 255, 0.06); --gl-text: #ffffff; --gl-text-soft: #cfd6e8; --gl-text-muted: #8c98b6; --gl-border: rgba(255, 255, 255, 0.08); --gl-border-strong: rgba(255, 255, 255, 0.16); --gl-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); /* Degradado que oscurece la foto para que el texto encima se lea. */ --gl-photo-scrim: linear-gradient(180deg, rgba(7, 9, 15, 0) 0%, rgba(7, 9, 15, 0.85) 100%); --gl-chip-bg: rgba(0, 0, 0, 0.55); --gl-chip-text: #ffffff; --gl-shell-bg: radial-gradient(50% 40% at 22% 30%, rgba(16, 96, 255, 0.22) 0%, rgba(16, 96, 255, 0) 70%), radial-gradient(120% 90% at 50% 12%, #0d1426 0%, #0a0e1a 46%, #05070f 100%); --gl-shell-frame-radius: 36px; --gl-shell-frame-height: min(800px, 90vh); /* --- Cabecera de app (pestañas + botones rotulados) ------------------- La comparten el feed de swipe y el Modo Lista. Estaban cada una con sus medidas y en un iPhone (390 px) se veían distintas: pestaña de 14,4 px contra 16,8 px y botón de 50 contra 58. Se tocan AQUÍ, nunca en feed.css / feed_list.css, que solo consumen estas variables. */ --gl-head-pad-top: 12px; --gl-head-pad-x: 16px; --gl-head-pad-bottom: 10px; --gl-head-tab-size: 1rem; --gl-head-tab-weight: 700; --gl-head-tab-gap: 14px; --gl-head-btn: 48px; --gl-head-btn-radius: 14px; --gl-head-btn-icon: 1rem; --gl-head-btn-label: 0.62rem; --gl-head-btn-gap: 8px; /* --- Alias heredados ------------------------------------------------- Las hojas todavía sin migrar siguen usando estos nombres. Al apuntarlos a los tokens de rol, esas pantallas cambian de tema solas y la migración puede ir pantalla a pantalla en vez de todo de golpe. */ --gl-bg: var(--gl-surface); --gl-bg-soft: var(--gl-surface-sunken); --gl-card: var(--gl-surface-raised); --gl-line: var(--gl-border); --gl-line-strong: var(--gl-border-strong); --gl-muted: var(--gl-text-muted); } /* --- Tema claro (rediseño completo, punto 17 del cliente, 13/10/2026) ---- Diseñado como tema propio, no como inversión del oscuro: · Superficies: página gris azulado muy claro, tarjetas blancas, campos un punto más hundidos. La profundidad la dan sombras suaves y bordes finos, no brillos. · Texto: tres niveles con contraste AA (≥ 4,5:1) sobre blanco y sobre el fondo de página. · Acentos: el azul de marca #1060ff no cambia. Los acentos que en oscuro brillan sobre negro (verde, ámbar, violeta, rojo, cian, azul suave) se usan casi siempre como TEXTO (≈330 usos), y sobre blanco no se leían (verde 2:1, ámbar 1,6:1). En claro pasan a su tono profundo, del mismo matiz, con contraste AA. · Lo que va SOBRE una foto (precio del feed, botones de la galería…) sigue en blanco sobre velo oscuro, o pasa a cristal claro: cada hoja lo resuelve en su bloque «Tema claro» al final. Cada hoja de pantalla lleva al final su bloque `:root[data-theme="light"]` para lo que no sale de tokens; el tema oscuro no se toca. */ :root[data-theme="light"] { --gl-surface: #f5f7fb; --gl-surface-raised: #ffffff; --gl-card-2: #ffffff; /* las hojas inferiores pasan a blanco en claro */ --gl-surface-sunken: #eef2f8; --gl-surface-hover: rgba(15, 23, 42, 0.045); --gl-text: #0b1220; --gl-text-soft: #334155; --gl-text-muted: #5b6780; --gl-border: rgba(15, 23, 42, 0.09); --gl-border-strong: rgba(15, 23, 42, 0.16); --gl-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 28px rgba(15, 23, 42, 0.08); /* Acentos en su tono legible sobre claro (mismo matiz). */ --gl-blue-soft: #1a63f5; --gl-green: #08824a; --gl-amber: #9a6200; --gl-violet: #7442e0; --gl-red: #d42a35; --gl-cyan: #087a90; /* La foto sigue necesitando velo oscuro: el texto que va encima es blanco en los dos temas, porque la imagen no cambia de color. */ --gl-photo-scrim: linear-gradient(180deg, rgba(10, 14, 26, 0) 0%, rgba(10, 14, 26, 0.78) 100%); --gl-chip-bg: rgba(255, 255, 255, 0.92); --gl-chip-text: #0b1220; --gl-shell-bg: radial-gradient(50% 40% at 22% 30%, rgba(16, 96, 255, 0.08) 0%, rgba(16, 96, 255, 0) 70%), radial-gradient(120% 90% at 50% 12%, #f4f7fd 0%, #edf1f9 46%, #e6ebf5 100%); } /* Oscuro es el tema por defecto (decisión de producto): la app abre en negro aunque el móvil esté en claro. NO se sigue `prefers-color-scheme`, porque si no un usuario con el sistema en claro vería la app en blanco sin haberlo pedido, que es justo lo contrario de lo acordado. El modo claro se activa solo cuando el usuario lo elige con el interruptor. */ /* Evita el "flash" blanco/negro mientras carga: el color de fondo del documento ya sale del token, sin esperar al CSS de cada pantalla. */ html { background: var(--gl-surface); } /* El cambio de tema se anima salvo que el usuario pida menos movimiento. */ @media (prefers-reduced-motion: no-preference) { body { transition: background-color 0.2s ease, color 0.2s ease; } } /* Móviles estrechos: encoger la cabecera es cuestión de bajar los tokens una vez; antes cada pantalla tenía su propia media query (y el listado no tenía ninguna, así que no encogía). */ @media (max-width: 400px) { :root { --gl-head-tab-size: 0.94rem; --gl-head-tab-gap: 11px; --gl-head-btn: 44px; --gl-head-btn-icon: 0.92rem; --gl-head-btn-label: 0.58rem; --gl-head-btn-gap: 6px; } } /* Suelo de 16px en campos de formulario, en móvil ---------------------------- iOS Safari hace zoom de TODA la página al enfocar un input/select/textarea con font-size por debajo de 16px (asume que el usuario necesita verlo más de cerca), y el usuario tiene que deshacerlo a mano y scrollear para volver a donde estaba. Encontramos ~12 componentes por la app (buscadores del hero, chat de Glopy IA, formulario de publicar anuncio, perfil, favoritos, explorar…) en 0.9-0.98rem que lo disparaban, y ya se han subido a 1rem cada uno; esta regla es la red que evita que un componente futuro (o uno que se nos haya escapado) vuelva a bajar de ese suelo. theme.css se carga el primero en todas las pantallas, así que el !important solo hace falta para ganarle a selectores más específicos que sigan fijando algo menor — no para pelear por orden de carga. */ @media (max-width: 767px) { input, textarea, select { font-size: max(16px, 1rem) !important; } } /* Iconos propios (Bootstrap Icons 1.11 no trae cama ni casa con llave): máscara SVG que toma el color del texto, del tamaño de la letra. */ .gl-ico { display: inline-block; width: 1em; height: 1em; background: currentColor; vertical-align: -0.125em; -webkit-mask: var(--gl-ico) center / contain no-repeat; mask: var(--gl-ico) center / contain no-repeat; } .gl-ico--bed { --gl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5M3 16h18M5 11V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v4M7 11V9.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V11M13 11V9.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V11M3 18v1.5M21 18v1.5'/%3E%3C/svg%3E"); } .gl-ico--housekey { --gl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.5 12 4l8.5 7.5M5.5 10v10h5'/%3E%3Ccircle cx='14.5' cy='15' r='2.3'/%3E%3Cpath d='m16.2 16.7 4.3 4.3M19 19.5l1.4-1.4'/%3E%3C/svg%3E"); }