/* ========================================================================== DIVAS LASH — Hoja de tokens Una sola fuente de verdad para panel.divaslash.com y pos.divaslash.com. Se sirve antes que cualquier otro CSS. Sustituye a los dos bloques :root que hoy conviven peleados dentro de panel/index.html (lineas 9 y 227). ESTRUCTURA 1. Fuentes de marca 2. Primitivas — la paleta cruda del manual. No se usa directo. 3. Roles — que hace cada color. Esto es lo que se usa. 4. Registro — densidad. Misma marca, dos aparatos. 5. Estados 6. Base 7. Alias de compatibilidad (temporal) REGLA DE ORO DEL ORO --dinero (#D4AF37) aparece unicamente donde hay pesos: totales, precios cobrables, cifras de arqueo. Nunca como adorno, nunca como borde decorativo, nunca en un icono. Si el oro esta en pantalla, alguien esta viendo dinero. Eso lo vuelve legible de reojo. ========================================================================== */ /* 1. FUENTES DE MARCA ----------------------------------------------------- Los TTF viven en el VPS en /usr/share/fonts/truetype/crosextra/. Copiarlos a web/fuentes/ y quedan servidos. El woff2 va primero como mejora futura; si no existe, el navegador toma el ttf sin quejarse. -------------------------------------------------------------------------- */ @font-face{font-family:Caladea;font-style:normal;font-weight:400;font-display:swap; src:url(/fuentes/Caladea-Regular.woff2) format("woff2")} @font-face{font-family:Caladea;font-style:italic;font-weight:400;font-display:swap; src:url(/fuentes/Caladea-Italic.woff2) format("woff2")} @font-face{font-family:Caladea;font-style:normal;font-weight:700;font-display:swap; src:url(/fuentes/Caladea-Bold.woff2) format("woff2")} @font-face{font-family:Caladea;font-style:italic;font-weight:700;font-display:swap; src:url(/fuentes/Caladea-BoldItalic.woff2) format("woff2")} @font-face{font-family:Carlito;font-style:normal;font-weight:400;font-display:swap; src:url(/fuentes/Carlito-Regular.woff2) format("woff2")} @font-face{font-family:Carlito;font-style:italic;font-weight:400;font-display:swap; src:url(/fuentes/Carlito-Italic.woff2) format("woff2")} @font-face{font-family:Carlito;font-style:normal;font-weight:700;font-display:swap; src:url(/fuentes/Carlito-Bold.woff2) format("woff2")} @font-face{font-family:Carlito;font-style:italic;font-weight:700;font-display:swap; src:url(/fuentes/Carlito-BoldItalic.woff2) format("woff2")} :root{ /* 2. PRIMITIVAS ----------------------------------------------------------- La paleta del manual, tal cual. Ningun componente debe nombrar estas variables: se nombran los roles de la seccion 3. Si manana el rosa profundo cambia de hex, se cambia aqui y nada mas. -------------------------------------------------------------------------- */ --p-rosa: #F4A6C1; --p-rosa-profundo: #D66B98; --p-rosa-claro: #FFE1EC; --p-oro: #D4AF37; --p-crema: #FFF3E6; --p-taupe: #8B7566; --p-gris: #6D6662; --p-tinta: #2E2A28; --p-linea: #E7DDD4; --p-blanco: #FFFFFF; /* Semaforo. Ninguno de estos esta en el manual de marca porque el manual nunca tuvo que decir "no se pudo cobrar". Elegidos para convivir con el rosa sin confundirse con el: verde — ya vivia suelto en el panel (.planea, borde #3F7D4E) ladrillo — rojo cafeteado. Un rojo brillante al lado del rosa profundo se lee como "rosa mas fuerte", no como alarma. No hay amarillo de aviso a proposito: el amarillo esta reservado al oro y el oro significa dinero. El aviso se marca con taupe y regla lateral. */ --p-verde: #3F7D4E; --p-verde-claro: #E3EDE5; --p-ladrillo: #A8322E; --p-ladrillo-claro:#F7E4E2; /* 3. ROLES ---------------------------------------------------------------- Lo unico que se nombra desde un componente. -------------------------------------------------------------------------- */ /* superficies */ --fondo: var(--p-crema); /* el lienzo de la app */ --superficie: var(--p-blanco); /* tarjeta, ficha, panel, hoja */ --superficie-2: var(--p-rosa-claro); /* seleccionado, activo, quieto */ --velo: rgba(46,42,40,.45); /* atras de una hoja modal */ /* tinta */ --texto: var(--p-tinta); --texto-2: var(--p-gris); /* secundario, apoyo */ --texto-3: var(--p-taupe); /* etiquetas, unidades, meta */ --texto-sobre-acento: var(--p-blanco); /* estructura */ --linea: var(--p-linea); --linea-fuerte: var(--p-taupe); /* accion */ --acento: var(--p-rosa-profundo); /* lo que se puede tocar */ --acento-suave: var(--p-rosa); /* hover, halo de foco */ --acento-fondo: var(--p-rosa-claro); /* dinero — ver regla de oro arriba */ --dinero: var(--p-oro); /* semaforo */ --exito: var(--p-verde); --exito-fondo: var(--p-verde-claro); --peligro: var(--p-ladrillo); --peligro-fondo: var(--p-ladrillo-claro); --aviso: var(--p-taupe); --aviso-fondo: var(--p-crema); /* sombra — dos capas: contacto corta y difusa larga. Tenue a proposito: el fondo crema ya separa; una sombra fuerte lo ensucia. */ --sombra-1: 0 1px 2px rgba(46,42,40,.06); --sombra-2: 0 1px 3px rgba(46,42,40,.05), 0 6px 18px rgba(46,42,40,.05); --sombra-3: 0 2px 6px rgba(46,42,40,.07), 0 18px 44px rgba(46,42,40,.11); /* tipografia — familias */ --serif: Caladea, Cambria, Georgia, serif; --palo: Carlito, Calibri, "Segoe UI", system-ui, sans-serif; --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* La escala tipografica y los pasos NO viven aqui. Viven en el registro de densidad, porque son lo unico que cambia entre raton y dedo. */ } /* 4. REGISTRO DE DENSIDAD ------------------------------------------------- Misma marca, dos aparatos. La clase va en . panel.divaslash.com, raton, 14px, denso pos.divaslash.com, dedo, 17px, 64px Un componente escrito contra --paso-3 y --texto-base se comporta bien en los dos sin una sola media query ni un solo duplicado. -------------------------------------------------------------------------- */ .densidad-panel{ --texto-micro: 10px; --texto-menor: 12px; --texto-base: 14px; --texto-mayor: 17px; --texto-titulo: 21px; --texto-cifra: 27px; --alto-linea: 1.45; --paso-1: 6px; --paso-2: 10px; --paso-3: 16px; --paso-4: 24px; --paso-5: 36px; --radio-1: 6px; --radio-2: 13px; --radio-3: 18px; --px-min: 1.15; /* pixeles por minuto de la agenda */ --toque: 34px; /* alto minimo de un control con raton */ --toque-grande: 40px; --ancho-max: 1440px; } .densidad-pos{ --texto-micro: 12px; --texto-menor: 14px; --texto-base: 17px; --texto-mayor: 21px; --texto-titulo: 26px; --texto-cifra: 34px; --alto-linea: 1.4; --paso-1: 8px; --paso-2: 12px; --paso-3: 20px; --paso-4: 30px; --paso-5: 44px; --radio-1: 10px; --radio-2: 16px; --radio-3: 22px; --toque: 64px; /* piso duro. Nada tocable mide menos. */ --toque-grande: 76px; /* cobrar, cargar a cuenta, confirmar */ --ancho-max: none; } /* 5. ESTADOS -------------------------------------------------------------- Un estado se ve igual en las dos superficies. Que Josefina y Valeria reconozcan "esto esta seleccionado" sin volver a aprenderlo. -------------------------------------------------------------------------- */ :root{ --foco-halo: 0 0 0 3px var(--acento-suave); --foco-borde: var(--acento); --apagado-opacidad: .42; /* deshabilitado: se ve, no se toca */ --presion: scale(.97); /* feedback tactil de 90ms */ --transicion: 120ms ease-out; } /* Foco visible siempre, tambien con dedo. Piso de calidad, no adorno. */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--foco-borde); outline-offset:2px; box-shadow:var(--foco-halo); } [disabled],[aria-disabled="true"]{ opacity:var(--apagado-opacidad); cursor:not-allowed; } @media (prefers-reduced-motion: reduce){ :root{--transicion:0ms; --presion:none} *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important} } /* 6. BASE ----------------------------------------------------------------- */ *{box-sizing:border-box} body{ margin:0; background:var(--fondo); color:var(--texto); font-family:var(--palo); font-size:var(--texto-base); line-height:var(--alto-linea); -webkit-text-size-adjust:100%; } /* En el POS la pagina no hace scroll: hace scroll cada columna por dentro. Sin esto, el rebote de iPad despega el carrito del borde. */ .densidad-pos, .densidad-pos body{ height:100%; overflow:hidden; overscroll-behavior:none; -webkit-user-select:none; user-select:none; touch-action:manipulation; /* mata el zoom por doble toque */ } h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0} /* La cifra de dinero tiene tratamiento propio: serif, tabular, oro. Se usa en el total del POS, en el arqueo y en las cifras del tablero. */ .cifra{ font-family:var(--serif); font-variant-numeric:tabular-nums; color:var(--dinero); letter-spacing:.01em; } /* 7. ALIAS DE COMPATIBILIDAD ---------------------------------------------- panel/index.html tiene 176 KB escritos contra los nombres viejos. Estos alias dejan adoptar la hoja hoy sin reescribir el panel. Se van borrando por tandas conforme el panel migre a los roles; cuando este bloque quede vacio, la migracion termino. -------------------------------------------------------------------------- */ :root{ --rosa: var(--p-rosa); --rosa-hondo: var(--p-rosa-profundo); --rosa-claro: var(--p-rosa-claro); --oro: var(--p-oro); --crema: var(--p-crema); --taupe: var(--p-taupe); --gris: var(--p-gris); --tinta: var(--p-tinta); /* --linea ya es un rol con el mismo nombre y el mismo valor: no se duplica */ --e1: var(--paso-1); --e2: var(--paso-2); --e3: var(--paso-3); --e4: var(--paso-4); --e5: var(--paso-5); --radio: var(--radio-2); --sombra: var(--sombra-2); --ancho: var(--ancho-max); }