/* ============================================================================ LA MARCA, EN UN SOLO SITIO. Antes esta paleta estaba COPIADA dentro de index.html, alta.html y admin.html. Cambiarla en uno y olvidar los otros dos dejaba al cliente viendo la portada con la marca nueva y su pantalla de alta con la vieja, sin ningún error. Por eso ahora vive acá y las tres páginas la enlazan. SOLO CLARO, y es una decisión, no un olvido: se quiere un sistema que se sienta luminoso y de confianza, así que un celular en modo oscuro sigue viendo la marca igual. Por eso NO hay bloque @media (prefers-color-scheme: dark) y cada color se pinta explícitamente. LA REGLA QUE SOSTIENE TODO: el cereza NUNCA aparece en un aviso. Vive en lo que es nuestro —botones, títulos, la marca—. Los avisos tienen su propia familia (--ok, --aviso, --mal) y siempre llevan icono o palabra, así que lo que dice «para» es la forma, no el color. Sin esta regla, nuestro propio color acabaría significando «error» y el equipo dejaría de mirar los avisos de verdad. ESTE ES EL ORIGINAL. Vive en `plataforma/marca/marca.css` y se copia a las tres apps con `npm run marca`. NO edites el `public/marca.css` de ninguna app: se sobrescribe, y hasta que se sobrescriba una app se ve distinta de las otras. Para comprobar que no se separaron: `npm run marca:check`. marca-version: 2026-09-03.2 ============================================================================ */ :root{ /* Fondos y letra */ --fondo:#F5F5F7; /* el gris de la página */ --papel:#FFFFFF; /* las tarjetas, encima del gris */ --tinta:#1D1D1F; /* la letra; negro suave, no negro puro: cansa menos */ /* ESTOS DOS GRISES SE OSCURECIERON A PROPOSITO, y no es un capricho de diseno. Con los de Apple (#6E6E73 y #86868B) la letra chica se quedaba entre 3,1 y 3,6 de contraste sobre nuestros fondos, cuando lo minimo legible es 4,5. Eso son el codigo del cliente, la etiqueta de la clave y las palabras del marcador —«fallaron», «por cobrar»—: justo lo que hay que leer en un celular, a plena luz, en el mostrador. Apple los usa mas claros porque los pensó para una pantalla bajo techo. Si algo tiene que verse mas apagado, se baja el TAMANO o el peso, nunca el contraste. */ --tinta-2:#5A5A5F; --tinta-3:#6B6B70; --linea:#E8E8ED; /* separadores: decoran, no informan */ --linea-fuerte:#D2D2D7; /* EL BORDE DE UN CONTROL NO ES DECORACION: es lo unico que dice que ahi hay una casilla, un campo o un boton. A #D2D2D7 se quedaba en 1,5 de contraste —o sea que el campo de texto no se veia— y hace falta 3. Por eso los controles llevan este y no --linea-fuerte. */ --borde-control:#8A8A8F; /* Cereza: lo nuestro */ --acento:#78182F; --acento-vivo:#93253F; /* al pasar el dedo o el mouse. Es MÁS CLARO que --acento, por eso NO se llama «oscuro»: el nombre de antes mentía. */ --acento-claro:#F7EEF0; --sobre-acento:#FFFFFF; /* la letra que va ENCIMA del cereza. Estaba escrita a mano nueve veces; si un día el acento se aclara, se cambia acá. */ /* Amarillo: lo que queremos que miren */ --sol:#FFC53D; /* el amarillo, siempre de FONDO */ --sol-tenue:#FFF6E2; --sobre-sol:#4A1220; /* la letra que va encima del amarillo */ /* EL AMARILLO NO SE PUEDE USAR DE LETRA: sobre blanco se queda en 1,7 de contraste y desaparece. Cuando lo calido tiene que ser texto —«pocas unidades», el «S/» de un precio, un enlace del pie— se usa este, que es el mismo color llevado hasta poder leerse (4,9 sobre el papel). */ --sol-texto:#966210; /* Los avisos, cada uno con su trabajo */ --ok:#1D7A56; --ok-fondo:#E8F5EF; /* se guardó, se pagó */ --aviso:var(--sol-texto); --aviso-fondo:#FDF3DE; /* mira esto. Es el mismo calido de la marca, por nombre y no por copia: asi no pueden separarse. */ --mal:#B4441F; --mal-fondo:#FCEDE6; /* se rompió */ --urge:#B4441F; --urge-fondo:#FCEDE6; /* mismo par, nombre del panel */ /* ── LA MEDIDA DEL DEDO ── 44 px es el mínimo con el que un dedo acierta a la primera (Apple HIG y la norma de accesibilidad piden eso). Estaba sin escribir, y por eso los botones habían quedado en 39, 35, 34, 32, 30, 29, 27, 23 y 20: cada uno decidió su alto por su cuenta. Con el token, un botón nuevo nace bien sin que nadie se acuerde. */ --toque-min:44px; /* ── LA LETRA ── Cinco escalones. El piso es 13: por debajo no se lee de pie, a plena luz y con el celular bajo, que es como se usa esto. La BASE son 16 y no 15, y no es gusto: por debajo de 16, iOS hace zoom solo al tocar un campo de texto y descoloca la pantalla entera. Antes había NUEVE tamaños entre 10 y 15, que a un brazo de distancia son todos el mismo y por eso ya no decían qué importaba más. */ --txt-xs:13px; /* rótulos de una palabra */ --txt-sm:14px; /* secundario: fechas, datos de apoyo */ --txt-md:16px; /* LA BASE, y todo campo que se escribe */ --txt-lg:20px; /* títulos de sección */ --txt-xl:28px; /* totales */ /* ── EL AIRE ── Base 4. Antes cada padding era un número suelto, y por eso dos tarjetas parecidas respiraban distinto sin que se supiera por qué. */ --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:24px; --esp-6:32px; /* ── LA FORMA ── UNA esquina para todo, y la píldora, que es la otra forma. `--radio` ya estaba acá y NO LO USABA NADIE: el almacén se había hecho los suyos (--r-sm 12 / --r-md 18 / --r-lg 24) dentro de su propio index.html, o sea dos sistemas de esquinas y el de la marca muerto. `--radio-pill` es el nombre nuevo de `--pildora`, que se queda por compatibilidad mientras se termina de cambiar. */ --radio:14px; --radio-pill:980px; --pildora:var(--radio-pill); /* el nombre viejo, para no romper lo que ya lo usa */ --texto:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter', system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; /* Sin esto, un celular en modo oscuro oscurece por su cuenta los campos, los menus y la barra de desplazamiento, y el texto se queda ilegible sobre un fondo que no pintamos nosotros. Se lo decimos de frente: esta pagina es clara. */ color-scheme:light; --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace; } /* Lo que comparten las tres páginas. Todo lo demás vive en cada una. */ *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{font-family:var(--texto);background:var(--fondo);color:var(--tinta); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; line-height:1.47;letter-spacing:-.012em} h1,h2,h3{line-height:1.14;letter-spacing:-.022em;text-wrap:balance} /* El aro del foco NO lleva border-radius propio: se lo ponia al elemento, asi que un boton en pildora se volvia un rectangulo redondeado justo al tocarlo con el teclado. Sin esa linea, el aro sigue solo la forma que ya tiene cada cosa. */ :focus-visible{outline:3px solid var(--acento);outline-offset:3px} /* EL TEXTO DE EJEMPLO DE LOS CAMPOS. Sin esta regla se queda con el gris de fabrica del navegador, que anda entre 2,3 y 3,5 de contraste — por debajo del minimo que esta misma hoja acaba de fijar al oscurecer los grises. Y no siempre es decoracion: hay campos cuyo UNICO rotulo es su texto de ejemplo. El opacity:1 hace falta porque Firefox le aplica .54 por su cuenta y lo volveria a bajar. */ ::placeholder{color:var(--tinta-3);opacity:1} /* Chrome y Safari pintan de amarillo el campo que autorrellenan y no hay forma de cambiar ese fondo: se sustituye con una sombra interior del color del papel. Sin esto, el formulario de alta —que es donde el cliente autorrellena su nombre y su telefono— sale con dos campos amarillos en medio de la marca. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--tinta); -webkit-box-shadow:0 0 0 40px var(--papel) inset; caret-color:var(--tinta); }