/* ============================================================================ 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 color de la marca 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. ── PERLA (2026-09-08) ──────────────────────────────────────────────────────── El acento pasa de CEREZA a AZUL NOCHE y el fondo, de gris a blanco APERLADO. Lo pidió la dueña: «cambiemos el color a aperlado, fondo blanco, letras entre azul noche, negro y gris», mirando los titanios del iPhone. TRES COSAS QUE HAY QUE ENTENDER ANTES DE TOCAR ESTO: 1 · APERLADO NO ES BLANCO. El nácar tiene DOS brillos, uno frío (azulado) y uno cálido (dorado), y según de dónde le da la luz se ve uno u otro. Por eso el fondo lleva cuatro manchas muy suaves —dos frías, una cálida, una lila— y no un color plano. Puestas todas del mismo color, el fondo se ve gris sucio; sin ninguna, se ve blanco de hoja de Word. Van muy bajas a propósito: subidas, deja de ser perla y se vuelve azul, que en el mostrador se lee como que la pantalla tiene un filtro puesto. 2 · EL CEREZA SE FUE DE LA PANTALLA, no de la marca. Sigue en el logo y en el papel que se lleva la clienta. Dos colores fuertes en la misma pantalla se pelean y nadie sabe cuál es el importante — y acá el importante es el botón que cobra. 3 · LOS NOMBRES NO CAMBIARON, solo su valor. `--acento` sigue llamándose `--acento` aunque hoy sea azul: así ninguna de las tres apps tuvo que tocarse. Si algún día se renombra, hay que cambiarlo en las tres a la vez o una se queda sin color. EL AMARILLO, EL VERDE, EL ÁMBAR Y EL ROJO NO SE TOCARON. No son marca: son semáforo, y cambiarlos sería que un aviso deje de leerse como aviso. 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-08.3 ============================================================================ */ :root{ /* Fondos y letra */ --fondo:#FAFBFD; /* el blanco perla de la página */ --papel:#FFFFFF; /* las tarjetas, encima del perla */ /* EL NÁCAR. Son las manchas que le dan el brillo al fondo (ver la regla 1 de arriba). Se pintan abajo, en `body::before` y `body::after`, y con eso lo tienen las TRES apps sin que ninguna se entere. ×1,6 DESDE EL 08/09, Y ES EL TECHO. La dueña: «el fondo qué es y por qué se nota poco?». Se notaba poco porque los primeros números se pusieron con un freno DEMASIADO estricto: se calcularon suponiendo que la letra chica de los avisos iba ENCIMA del nácar, y midiéndolo en la app resultó que no — los avisos llevan su propia caja de color y las pistas van dentro de cajas blancas. El fondo no los toca. DOS COSAS SÍ SE APOYAN EN EL FONDO, y son las que mandan: · `--tinta-2` — «30 prendas», los chips de categoría, los subtítulos. Mínimo 4,5. · `--borde-control` — EL BORDE DEL BUSCADOR, que va suelto sobre la página. Mínimo 3, y es el más justo de los dos: un borde que no se ve es un campo que no se ve. El techo se midió PINTANDO EL FONDO y buscando su píxel más oscuro de VERDAD, no modelándolo: «las tres manchas apiladas» era demasiado pesimista —están en esquinas opuestas y nunca se juntan— y por eso el primer cálculo dio ×2 de más. ×1 5,12 / 3,18 ×1,5 4,87 / 3,03 ×1,6 4,83 / 3,00 ✓ ×1,75 4,74 / 2,95 ✗ ×2 4,61 / 2,86 ✗ Para subirlo más habría que oscurecer `--borde-control`, o sea engordar el borde de TODOS los campos de las tres apps. Es otra decisión, no un número más. */ --nacar-frio:rgba(150,178,220,.29); --nacar-calido:rgba(228,206,172,.38); --nacar-lila:rgba(192,176,220,.22); /* ── EL VIDRIO ── La tarjeta MEDIO TRANSPARENTE, para que se note el nácar por debajo. Es lo que hacía que el demo se viera aperlado y no blanco: una tarjeta blanca maciza sobre un fondo con brillo tapa justo el brillo. VA EN SU PROPIO TOKEN Y NO DENTRO DE `--papel`, y eso NO es por comodidad: `--papel` lo usan las HOJAS, los menús y las barras pegadas, que tienen que TAPAR lo de atrás. Vuelto transparente, el texto de la lista se vería pasar por debajo de la hoja abierta encima — ilegible, y en la pantalla de cobrar. El vidrio es solo para las tarjetas que se apoyan sobre el fondo. El degradado va en DIAGONAL y de frío a cálido, que es lo que hace el nácar de verdad: un blanco liso al 80 % se ve descolorido, no aperlado. */ /* 5 % TRANSPARENTE, PEDIDO DE LA DUEÑA (2026-09-08): «el cuadro blanco del medio debe ser un 5 % transparente». Antes iba entre 8 y 22 % según el punto del degradado. LA TRANSPARENCIA ES LA MISMA EN LOS TRES PUNTOS —.95— y lo que cambia es el COLOR: frío arriba-izquierda, cálido abajo-derecha. Ése es el brillo del nácar. Bajando la opacidad en el medio, como estaba antes, la tarjeta se ve descolorida en su parte más fina en vez de aperlada. */ --vidrio:linear-gradient(138deg, rgba(255,255,255,.95) 0%, rgba(243,247,253,.95) 42%, rgba(253,248,242,.95) 100%); --vidrio-linea:rgba(255,255,255,.85); /* el filo, donde pega la luz */ /* La rayita blanca de dentro (`inset`) es lo que separa la tarjeta del fondo. Sin ella se ve pegada, no encima. */ --vidrio-sombra:0 8px 26px rgba(21,33,58,.07), 0 1px 2px rgba(21,33,58,.05), inset 0 1px 0 rgba(255,255,255,.95); /* EL DESENFOQUE SOLO DONDE HAY ALGO DETRÁS. Detrás de una tarjeta de contenido solo está el nácar, que ya es suave: desenfocarlo no se ve y cuesta batería en cada repintado. Se usa en lo que FLOTA sobre la lista —los botones redondos, la barra de abajo—, que es donde de verdad pasa contenido por debajo. */ --vidrio-desenfoque:blur(22px) saturate(160%); --tinta:#16213A; /* AZUL NOCHE: la letra y los títulos. 13,8 sobre el perla */ /* EL NEGRO ES SOLO PARA LA PLATA. Un total, un vuelto, un precio: son lo único que se lee de un vistazo y sin leer, así que van un punto más oscuros que el resto para que salten. Usado en el texto corrido no se nota y encima cansa más. */ --tinta-num:#0B0D12; /* 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. Y desde Perla los dos GRISES TIRAN A AZUL. Los de antes eran neutros y peleaban con el cereza cálido; con el azul noche son de la misma familia, que es lo que hace que una pantalla llena de gris se sienta de una pieza y no de dos. El --tinta-3 se oscureció otro punto porque ahora el fondo lleva nácar: encima de la mancha cálida, el de antes se quedaba en 4,4. */ --tinta-2:#5C6472; --tinta-3:#656C7A; --linea:#E6E9F0; /* separadores: decoran, no informan */ --linea-fuerte:#CFD5E0; /* 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:#7C8598; /* Azul noche: lo nuestro (era cereza hasta el 08/09 — ver la nota Perla de arriba) */ --acento:#1C2E52; --acento-vivo:#26406F; /* 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:#EDF2FA; --sobre-acento:#FFFFFF; /* la letra que va ENCIMA del azul. 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:#1A2233; /* la letra que va encima del amarillo. Era un vino oscuro; con el acento en azul, ese vino era el único resto de cereza que quedaba en pantalla y se leía como un despiste. Este da 7,3 sobre el amarillo, más que el de antes. */ /* 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} /* ── EL NÁCAR ── Las cuatro manchas que convierten el blanco en APERLADO. Van acá y no en cada app: escritas tres veces, el día que se muevan un pelo las tres se separan y la portada y la app dejan de ser la misma marca. VA EN `position:fixed` Y NO EN EL FONDO DEL BODY, y no es adorno: - `background-attachment:fixed` sobre el body es justo lo que en iPhone se traba al desplazar, y esto se usa desplazando listas largas todo el día; - y sin fijarlo, en una lista de mil prendas las manchas se quedan arriba y de la mitad para abajo el fondo sale blanco de hoja de Word. El `z-index:-1` es lo que lo mete DEBAJO de todo el contenido y ENCIMA del fondo del body. No hace falta tocar nada en ninguna app para que funcione. Y `pointer-events` en none: si no, se come los toques de la primera pantalla entera. */ body::before, body::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background-repeat:no-repeat; } /* SON DOS CAPAS Y NO UNA, y es lo único que hace posible el movimiento (2026-09-08). Con las cuatro manchas en un solo fondo solo se podrían mover TODAS a la vez, y eso sí se ve: se lee como que la pantalla entera se desliza. En dos capas que van en sentidos contrarios, el brillo se recompone solo y nunca parece que algo se mueve. */ body::before{ background-image: radial-gradient(58vmax 46vmax at 4% -8%, var(--nacar-frio), transparent 62%), radial-gradient(56vmax 46vmax at -8% 86%, var(--nacar-lila), transparent 62%); animation:nacar-a 25s ease-in-out infinite; } body::after{ background-image: radial-gradient(50vmax 42vmax at 104% 24%, var(--nacar-calido), transparent 62%), radial-gradient(46vmax 38vmax at 106% 100%, var(--nacar-frio), transparent 62%); animation:nacar-b 31s ease-in-out infinite; } /* ── EL MOVIMIENTO (2026-09-08) ── Pedido de la dueña: «en todo… que no sea muy lento, que sea 25 segundos por vuelta». SE MUEVE CON `transform`, NUNCA con `top`/`left`, con `background-position` ni con el desenfoque. El desplazamiento de un `transform` lo hace la tarjeta gráfica sola sobre una capa que ya está pintada; mover la posición obliga al teléfono a REPINTAR la pantalla entera sesenta veces por segundo, y eso sí se siente y sí gasta batería. En una app que está abierta ocho horas en el mostrador, ésa es toda la diferencia. LOS DOS CICLOS NO SON IGUALES —25 y 31 segundos— a propósito: siendo primos entre sí, el dibujo tarda más de doce minutos en repetirse y nunca se le ve el bucle. Con los dos en 25 las capas volverían a la misma posición cada vuelta y se notaría el latido. Y el desplazamiento es pequeño (unos 40 px sobre manchas de media pantalla): lo que se busca es que el brillo esté en otro sitio al volver a mirar, no que se vea moverse. */ @keyframes nacar-a{ 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50% { transform:translate3d(3.5%, 2.5%, 0) scale(1.10) } } @keyframes nacar-b{ 0%,100%{ transform:translate3d(0,0,0) scale(1.06) } 50% { transform:translate3d(-3%, -2.5%, 0) scale(1) } } /* «NO ME ANIMES LAS COSAS» ES UNA PREFERENCIA DEL TELÉFONO, y se respeta: el fondo se queda quieto y se ve exactamente igual. Hay gente que lo tiene puesto porque el movimiento le marea, y esto está encendido todo el día. */ @media (prefers-reduced-motion:reduce){ body::before, body::after{ animation:none } } /* EN EL PAPEL NO VA. La impresora es térmica y en blanco y negro: cada mancha saldría como una sombra gris encima de la boleta de la clienta, y el rollo se paga por metro. */ @media print{ body::before, body::after{display:none} } /* La tarjeta de vidrio, lista para usar. Cada app se la pone a SUS tarjetas de contenido con una lista de selectores en su propia hoja (no se puede desde acá: cada una llama a las suyas de otra manera). Esta clase es para lo que se escriba de aquí en adelante. */ .vidrio{ background:var(--vidrio); border:1px solid var(--vidrio-linea); box-shadow:var(--vidrio-sombra); } /* Y lo que FLOTA encima de una lista lleva además el desenfoque: ahí sí pasa contenido por debajo, y sin desenfocarlo el texto de atrás se lee a través de la tarjeta. */ .vidrio-flota{ -webkit-backdrop-filter:var(--vidrio-desenfoque); backdrop-filter:var(--vidrio-desenfoque); } /* EN EL PAPEL, MACIZO. La impresora es térmica: un fondo translúcido sale de gris sucio y se come el rollo. Mismo motivo que el nácar. */ @media print{ .vidrio,.vidrio-flota{background:#fff!important;box-shadow:none!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important} } 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); }