/* ===================================================================== polarys-tema.css — EL TEMA CLARO DE LA APP, en un solo sitio. QUÉ ES Y QUÉ NO ES ------------------ Es el vocabulario visual de la APP autenticada: fondo blanco frío, azul marino en títulos, azul eléctrico en lo activo, coral en la acción primaria. Nada de modo oscuro ni de vidrio. NO es el tema del sitio público. `index.html` y `precios.html` son OSCURAS a propósito —`--bg:#05070C`, otro sistema de nombres entero— y se quedan como están. Decidido el 2026-09-14: web pública oscura, app clara. Si algún día eso cambia, se cambia ahí, no estirando este fichero. POR QUÉ SALIÓ DE inicio.css --------------------------- Vivía dentro de `inicio.css` y no lo usaba nadie más, así que llevar este lenguaje a otra pantalla de la app obligaba a copiarlo. Y copiar un tema a mano ya tiene precedente en este repo: `portada-theme.css` es una copia a mano del `:root` de `index.html`, y su propia cabecera dice que hay que reflejar los cambios «A MANO». Un fichero que se importa no tiene ese problema. QUÉ NO ESTÁ AQUÍ, Y POR QUÉ --------------------------- Dos variables se quedaron en `inicio.css` porque son de ESA pantalla y de ninguna otra: · `--p-fase` la duración del cambio de fase del bloque 3D (imagen → malla → modelo). Solo la usa `.inicio-dibujo`. Fuera de esa pantalla no hay fases. · `--p-pista` el color de la pista de la barra de progreso. Solo `.inicio-barra`. Medido antes de decidir la frontera: las de aquí se usan en familias de selectores genéricas (texto, bordes, botones, sombras); esas dos, en UN selector cada una. POR QUÉ EL ERROR NO ES EL CORAL, que es lo primero que se piensa al ver dos rojos juntos. `--p-coral` es LA ACCIÓN PRIMARIA de esta app: el botón de crear, la barra de progreso, el `aria-current` de la navegación. Si el rojo de «algo salió mal» fuera el mismo, el aviso de error y el botón que hay que pulsar para arreglarlo serían del mismo color — y `#ee4a3f` y `#9a3a33` se parecen lo justo para que nadie note que son dos cosas. Son tres y no uno porque un estado de error se pinta con tres: el texto, el borde y el fondo. Entran juntos porque `inicio.css` ya los usa los tres. DE LAS CUATRO QUE SE ANUNCIARON AQUÍ, ENTRARON TRES. El 2026-09-15 esta nota decía que faltaban «superficie de campo, anillo de foco, verde de éxito y el dorado de la marca», y que cada una entraría el día que alguien la pintara. Ese día fue `nueva-clave.html`, y al pintarla salieron TRES, no cuatro: · `--p-anillo` el foco de teclado de los campos. · `--p-exito`+2 el trío de «salió bien», gemelo del de error. · `--p-dorado` la marca. La SUPERFICIE DE CAMPO no entró, y no por olvido: al pintarla resultó ser `--p-fondo` —el campo se hunde respecto a la tarjeta blanca, o sea que lleva el color de la página—. Definir un `--p-campo:#f4f7fb` habría sido un segundo nombre para un color que ya tiene uno, que es exactamente lo que fue `--p-papel` con el blanco. Se anota aquí para que la próxima pantalla no la vuelva a echar de menos. La regla de fondo no cambia: una variable definida y sin usar es un `--p-suave` —definida, sin un solo consumidor, y retirada cuatro días después—. Y CADA VARIABLE TRAE SU MOVIMIENTO REDUCIDO. `--p-transicion` se define aquí y AQUÍ se anula bajo `prefers-reduced-motion`. Separar las dos mitades es la forma barata de que un día el tema diga una cosa y su reducción diga otra. ===================================================================== */ :root{ --p-fondo:#f4f7fb; /* página: blanco frío con matiz azulado */ --p-marco:#ffffff; /* contenedor exterior, tarjetas y controles sobre blanco */ --p-borde:#dde4ee; /* borde gris azulado fino */ --p-borde-suave:#e8edf4; --p-marino:#132b5c; /* títulos, navegación, iconos */ --p-tinta:#1c2c4d; /* texto principal */ --p-apagado:#66748c; /* subtítulos y metadatos */ --p-azul:#2b6fe8; /* selección, bordes activos, enlaces, recorrido 3D */ --p-azul-oscuro:#1f55c4; --p-azul-claro:#e9f0fd; --p-azul-borde:#8fb3f2; --p-coral:#ee4a3f; /* acción primaria y progreso */ --p-coral-oscuro:#d63c32; --p-coral-claro:#fdeceb; --p-error:#9a3a33; /* algo salió mal — NO es el coral, ver abajo */ --p-error-borde:#f3c9c5; --p-error-claro:#fff7f6; --p-exito:#2f6f4a; /* salió bien: el gemelo del trío de error, y por lo mismo */ --p-exito-borde:#bfe0cc; /* son tres porque un estado se pinta con tres: texto, */ --p-exito-claro:#f2fbf5; /* borde y fondo. 5,69:1 sobre el suyo (el error da 6,57:1). */ --p-dorado:#eeb63f; /* LA MARCA y nada más: la estrella y el «3D» del logotipo. Es el `#EEB63F` del favicon de las seis páginas, en la minúscula del resto del fichero. NO es un acento de uso general: la acción primaria es `--p-coral` y lo activo es `--p-azul`. Sobre blanco da 1,84:1, que como TEXTO sería ilegible — y no lo es: WCAG 1.4.3 y 1.4.11 exceptúan expresamente el logotipo. En cuanto alguien lo use para algo que no sea la marca, esa excepción deja de valer. */ --p-radio:12px; --p-sombra:0 1px 2px rgba(19,43,92,.04), 0 10px 28px rgba(19,43,92,.05); --p-sombra-azul:0 0 0 1px var(--p-azul), 0 10px 26px rgba(43,111,232,.16); /* Anillo de foco de teclado. El `rgba(43,111,232,…)` es `--p-azul` otra vez, escrito en otra notación porque `rgba()` no acepta un `var()` de hex: es la MISMA duplicación que ya tiene `--p-sombra-azul` en la línea de arriba, y se deja igual a propósito en vez de estrenar aquí un `color-mix` que la otra no usa. Si un día se cambia el azul, hay que cambiar los dos — y por eso están pegados, para que se vean juntos. */ --p-anillo:0 0 0 3px rgba(43,111,232,.18); --p-fuente:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --p-transicion:180ms cubic-bezier(.2,.7,.2,1); } @media (prefers-reduced-motion:reduce){ :root{--p-transicion:1ms linear} }