/* PIEL ALTERNATIVA. Una segunda cara para la misma aplicacion. * =========================================================================== * * REGLA QUE NO SE ROMPE: **todo aqui cuelga de `:root`.** * * Sin ese atributo este fichero no cambia ni un pixel de lo que ya hay. Se * carga siempre, no pesa nada, y no pinta nada donde el atributo no este. Por * eso no hace falta tocar una sola regla de `estilo.css` para tener las dos. * * DONDE ESTA PUESTO EL ATRIBUTO, que ya no es «solo si alguien lo pide»: * * - `base.html` (publico: portada, reservar, consultar, eventos) lo trae * escrito por el servidor. Ahi esta piel es la de fabrica, porque es la * que ve un comensal y es donde el color de Disertic tiene que verse. * - `base_panel.html` NO lo trae. El panel se rige por `data-experiencia`, * que se resuelve en el servidor. Las dos pieles declaran las mismas * variables con la misma especificidad y se pisarian. * - `base_widget.html` tampoco: el widget vive dentro de la web del * restaurante y lleva el color que elige cada uno. * * El boton sigue permitiendo cambiar, y ahora la eleccion se guarda en los * dos sentidos. Ver `piel.js`. * * Si alguien anade aqui una regla sin ese prefijo, se lleva por delante la * pantalla de todos los clientes. `prueba_piel` lo comprueba y falla. * * COMO ESTA HECHA * --------------- * * `estilo.css` saca TODOS sus colores de variables. Eso es lo que hace posible * esto: la mayor parte de la piel es redeclarar esas variables, y cada tarjeta, * boton y tabla que ya existe se repinta sola. Lo demas -sombras en capas, * curvas mas amplias, transiciones- va detras, y solo sobre lo que se toca. * * DECISIONES * ---------- * * **Paleta en HSL y no en HEX.** Con HSL se ve de un vistazo que toda la * escala de grises comparte tono y saturacion y solo cambia la luminosidad, y * que el acento y su version suave son el mismo color a distinta luz. En HEX * eso son doce numeros sin relacion aparente y la primera vez que alguien * retoca uno, la armonia se rompe sin que se note. * * **Se animan solo `transform` y `opacity`.** Son las dos unicas propiedades * que el navegador resuelve en la GPU sin volver a calcular la maquetacion. * Animar `box-shadow`, `width` o `top` obliga a rehacerla en cada fotograma, y * en la tablet de una barra -que es donde de verdad se usa esto- eso se ve. * * **`prefers-reduced-motion` al final.** Hay gente a la que el movimiento le * marea de verdad. Con esa preferencia puesta, todo esto se queda quieto. */ /* --- La tipografia ------------------------------------------------------- */ /* Inter, en una sola variable de 352 KB que cubre TODOS los grosores. Con ficheros sueltos harian falta cuatro o cinco y pesarian mas entre todos. La licencia (SIL Open Font License) va al lado, en `fuentes/`. **Alojada por nosotros, nunca desde un CDN ni desde Google Fonts.** No es manía: cargar una fuente de fuera le entrega la IP de cada comensal a un tercero cada vez que abre la pagina de reservas de su restaurante, y eso es un dato personal que nadie nos ha autorizado a repartir. Ademas, con el wifi del local caido la pagina seguiria funcionando con la letra del sistema. `swap`: mientras se descarga se lee con la del sistema y luego cambia. Sin esto, el navegador esconde el texto hasta un tercio de segundo — en una tablet de barra con la conexion floja, eso es una pantalla en blanco. */ @font-face { font-family: "Inter var"; font-style: normal; font-weight: 100 900; /* una sola variable cubre todo el rango */ /* `optional` Y NO `swap`. Con `swap` la pagina se pintaba con la letra del sistema y se rehacia ENTERA al llegar Inter: medio segundo de botones de otro tamaño en cada recarga, que es lo que se veia. Con `optional` el navegador decide antes de pintar: si la fuente ya esta -reservada arriba en la plantilla y en la memoria del navegador- la usa desde el primer fotograma; y si todavia no ha llegado, se queda con la del sistema y NO cambia a media pagina. Nunca esconde el texto, que es lo que se queria evitar. */ font-display: optional; src: url("fuentes/inter-variable.woff2") format("woff2"); } /* --- Las medidas --------------------------------------------------------- */ /* Escalas, no numeros sueltos. La idea es la de Open Props: en vez de escribir `.28s` aqui y `.3s` alla, hay UNA lista de valores y todo se sirve de ella. Lo que se nota no es cada valor por separado, es que no haya doce parecidos. Los valores estan escritos aqui y no traidos de la libreria: es una tercera dependencia para veinte lineas de CSS, y este proyecto no tiene ninguna. */ :root { /* Curvas. La `salida` es la de casi todo: arranca rapido y frena al final, que es como se mueven las cosas con masa. La `entrada` para lo que aparece, y el `muelle` -que se pasa un poco y vuelve- solo para lo que se pulsa, donde ese rebote se lee como respuesta. */ --pn-salida: cubic-bezier(.2, .8, .3, 1); --pn-entrada: cubic-bezier(.4, 0, .2, 1); --pn-muelle: cubic-bezier(.5, 1.6, .4, .9); /* Duraciones. Por debajo de 100 ms no se percibe el movimiento, solo el salto; por encima de 400 la interfaz se siente lenta. */ --pn-rapido: .12s; --pn-medio: .2s; --pn-lento: .32s; /* Curvas de las esquinas, en escala. */ --pn-radio-1: 8px; --pn-radio-2: 12px; --pn-radio-3: 16px; --pn-radio-redondo: 999px; } /* --- La paleta ----------------------------------------------------------- */ :root { /* Grises: un solo tono (203, el del azul claro de la marca) y una pizca de saturacion, para que el gris no sea plano sino que tire discretamente a azul. Es el mismo gesto que hace disertic.com, donde el blanco de fondo tampoco es blanco sino #f8fbfe. */ --pn-gris-50: hsl(203 45% 97%); --pn-gris-100: hsl(203 35% 94%); --pn-gris-200: hsl(203 28% 89%); --pn-gris-400: hsl(203 14% 42%); --pn-gris-700: hsl(203 25% 25%); --pn-gris-900: hsl(203 40% 12%); /* EL ACENTO, Y POR QUE NO ES EL NARANJA DE LA MARCA TAL CUAL. ------------------------------------------------------------------------ El naranja de disertic.com es #ef7d00, y en la aplicacion no puede ir asi. `--acento` juega DOS papeles a la vez en `estilo.css` y hay que medir los dos: - como RELLENO, con `--sobre-relleno` encima: el boton «Reservar», el hueco de hora elegido, los botones del tablero, - como TEXTO, sobre el fondo de la pagina: los enlaces, `.etiqueta`, `.marca-extra`, el hover del menu. Con #ef7d00 los dos fallan: 2.8:1 en las dos direcciones. No es un tono que se pueda usar con letra encima ni como letra. Bajandolo a #b35700 -el MISMO naranja, mas oscuro- salen 4.91 con el blanco encima y 4.58 como texto sobre el fondo. Los dos por encima del minimo, y sigue leyendose como naranja de Disertic al lado del vivo. Es la misma leccion que ya costo una vez en `premium/tokens.css` con el bronce: una pareja de colores hay que medirla en las DOS direcciones. Escrito en HSL como el resto: #b35700 es hsl(29 100% 35%). */ --pn-acento: hsl(29 100% 35%); /* El hover OSCURECE, no aclara: el blanco de encima tiene que seguir leyendose, y aclarando se pierde (con #ef7d00 se queda en 2.8). */ --pn-acento-vivo: hsl(29 100% 31%); --pn-acento-suave: hsl(30 88% 96%); /* EL NARANJA VIVO DE LA MARCA, y solo donde no lleva letra encima. Este si es el #ef7d00 exacto de disertic.com. Vive en lo decorativo -el cerco del foco, el halo del hueco elegido, el filete de un aviso- donde no hay ningun texto que medir y donde el tono vivo es justo lo que se quiere: que se vea desde la otra punta de la barra. */ --pn-naranja-marca: hsl(31 100% 47%); /* El azul pizarra de la marca. Estructura, no accion: es lo que sostiene la pantalla mientras el naranja dice donde se pulsa. Dos valores y un mapeo debajo, como el resto de la paleta: sobre el fondo oscuro el pizarra de la marca se pierde -es casi el propio fondo- y hay que subirlo. Escrito asi y no con un literal repetido en los tres bloques de mapeo, que es como se separan las paletas con el tiempo. */ --pn-pizarra-claro: hsl(202 29% 30%); --pn-pizarra-oscuro: hsl(200 30% 72%); --pn-verde: hsl(152 60% 30%); --pn-ambar: hsl(39 100% 27%); --pn-rojo: hsl(3 71% 41%); /* Sombras en tres capas: un filo casi opaco que dibuja el borde, una sombra corta que apoya la pieza y una larga y muy suave que la separa del fondo. Una sola sombra grande da ese efecto de pegatina flotando. */ --pn-sombra-1: 0 1px 2px hsl(203 40% 12% / .06), 0 2px 6px hsl(203 40% 12% / .05); --pn-sombra-2: 0 1px 2px hsl(203 40% 12% / .07), 0 4px 10px hsl(203 40% 12% / .06), 0 12px 28px hsl(203 40% 12% / .07); --radio: var(--pn-radio-3); } /* Claro, y tambien cuando se pide claro a mano con el sistema en oscuro. */ :root, :root[data-tema="claro"] { --fondo: var(--pn-gris-50); --superficie: hsl(0 0% 100%); --texto: var(--pn-gris-900); --texto-suave: var(--pn-gris-400); --borde: var(--pn-gris-200); --acento: var(--pn-acento); --acento-suave: var(--pn-acento-suave); --pn-pizarra: var(--pn-pizarra-claro); --verde: var(--pn-verde); --ambar: var(--pn-ambar); --rojo: var(--pn-rojo); --sombra: var(--pn-sombra-1); color-scheme: light; } /* OSCURO -la piel «Sala»-. No es el claro invertido: en oscuro hay que SUBIR la luz del acento, o vibra sobre el fondo y cansa la vista. Y aqui pasa algo que conviene entender, porque es lo que hace que solo haya UN oscuro para las dos pieles claras: sobre un fondo azul-negro, el azul pizarra de la marca deja de verse. En oscuro el naranja tiene que subir a acento por narices. Por eso este bloque y el oscuro de `premium/tokens.css` son el MISMO aspecto: mismo fondo, mismo naranja, mismos semanticos. Se escribe dos veces porque las dos hojas no se cargan nunca juntas, no porque sean dos decisiones distintas. El naranja de aqui -hsl(29 100% 62%), o sea #ff9a3d- es el vivo de la marca aclarado lo justo: 7.38:1 como texto sobre el fondo. `--sobre-relleno` no se redefine porque el de `estilo.css` en oscuro ya es casi negro, que es lo que toca encima de acentos claros. */ :root[data-tema="oscuro"], :root:not([data-tema="claro"]) { --fondo: hsl(203 33% 9%); --superficie: hsl(202 31% 14%); --texto: hsl(202 30% 93%); --texto-suave: hsl(200 19% 68%); --borde: hsl(201 26% 22%); --acento: hsl(29 100% 62%); --acento-suave: hsl(33 31% 14%); --pn-pizarra: var(--pn-pizarra-oscuro); --verde: hsl(149 37% 48%); --ambar: hsl(37 71% 59%); /* 70 % de luz y no 63 (27/09/2026): con 63, la pastilla roja de aviso -`.marca-extra.alerta`, rojo sobre un 14 % del acento- se quedaba en 3.84:1 sobre la superficie. Con 70 da 4.79, y la letra casi negra de un boton rojo sube de 5.70 a 7.11. Lo vigila `prueba_tema` §5c. Es el mismo rojo que el `--granate` oscuro de `premium/tokens.css`. */ --rojo: hsl(8 68% 70%); --sombra: 0 1px 2px hsl(203 60% 3% / .5), 0 8px 24px hsl(203 60% 3% / .45); color-scheme: dark; } /* El `:not()` de arriba haria que el oscuro ganase SIEMPRE. Esta regla lo devuelve a su sitio: solo manda cuando lo dice el sistema. Va aqui abajo para que gane por orden, igual que en `estilo.css`. */ @media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]) { --fondo: var(--pn-gris-50); --superficie: hsl(0 0% 100%); --texto: var(--pn-gris-900); --texto-suave: var(--pn-gris-400); --borde: var(--pn-gris-200); --acento: var(--pn-acento); --acento-suave: var(--pn-acento-suave); --pn-pizarra: var(--pn-pizarra-claro); --verde: var(--pn-verde); --ambar: var(--pn-ambar); --rojo: var(--pn-rojo); --sombra: var(--pn-sombra-1); color-scheme: light; } } /* --- Piezas -------------------------------------------------------------- */ :root body { /* La del sistema queda detras como red: si la fuente no llega -bloqueada, sin conexion, un navegador viejo-, se lee igual y con buena letra. Nunca se cae a Times New Roman. */ font-family: "Inter var", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Inter trae cifras de ancho variable. En una lista de horas y de importes eso hace que las columnas bailen: `tnum` las iguala. */ font-feature-settings: "tnum" 1, "cv05" 1; letter-spacing: -.011em; /* Inter va algo suelta a tamano de interfaz */ /* `optimizeLegibility` no: en textos cortos activa ligaduras que retrasan la primera pintura sin que se note ninguna mejora. */ -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; } /* Los titulos, mas apretados: a tamano grande el mismo espaciado se ve suelto. */ :root h1, :root h2, :root h3 { letter-spacing: -.021em; } /* Donde importa que las cifras cuadren en columna: horas, codigos, importes. */ :root .hueco, :root .tabla td, :root .ficha-hora, :root .tpv-hora { font-variant-numeric: tabular-nums; } :root .tarjeta { box-shadow: var(--pn-sombra-1); border: 1px solid var(--borde); transition: box-shadow var(--pn-lento) var(--pn-salida); } :root .cabecera { /* Pegada arriba y con el fondo translucido. `backdrop-filter` lo resuelve la GPU; donde no exista, se queda el color de siempre y no se rompe nada. */ position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--superficie) 82%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--borde); } /* Botones: se hunden un pixel al pulsar y se levantan al pasar por encima. Solo `transform` y `box-shadow`; el desplazamiento va en la GPU. */ :root .boton { border-radius: var(--pn-radio-2); box-shadow: var(--pn-sombra-1); transition: transform var(--pn-rapido) var(--pn-salida), box-shadow var(--pn-medio) var(--pn-salida), background-color var(--pn-medio) var(--pn-salida); } :root .boton:hover { transform: translateY(-1px); box-shadow: var(--pn-sombra-2); filter: none; /* la piel de siempre aclara con filter */ background: var(--pn-acento-vivo); } :root .boton:active { transform: translateY(1px) scale(.99); box-shadow: var(--pn-sombra-1); } /* EL SECUNDARIO NO TIRA DE NARANJA, TIRA DE PIZARRA. Antes se ponia del color del acento al pasar por encima, o sea que en una fila con «Guardar» al lado el secundario se encendia del mismo tono que el principal y por un momento parecian dos botones iguales. Con el pizarra de la marca se distingue solo, y ademas es el segundo color de Disertic cumpliendo su papel: estructura, no accion. 8.28:1 sobre blanco. */ :root .boton.secundario:hover { background: var(--acento-suave); border-color: var(--pn-pizarra); color: var(--pn-pizarra); } :root .boton.peligro:hover { background: color-mix(in srgb, var(--rojo) 85%, white); } /* OJO: los botones de dialogo NO pueden llevar `filter` ni `transform`. Los dos convierten al elemento en bloque contenedor de sus descendientes `position: fixed`, y el velo del fondo es un `fixed` que cuelga de ese mismo summary: con cualquiera de los dos, el velo se encoge al tamano del boton y cerrar pulsando fuera deja de funcionar. Costo encontrarlo una vez; no se vuelve a introducir por hacer una animacion bonita. */ :root .dialogo-centrado > summary:hover, :root .dialogo-centrado > summary:active { transform: none; filter: none; } /* Campos: el foco se marca con un halo, que se ve mucho mejor que un borde de un pixel en una pantalla tactil con reflejos. */ :root input, :root select, :root textarea { border-radius: var(--pn-radio-2); transition: border-color var(--pn-medio) var(--pn-salida), box-shadow var(--pn-medio) var(--pn-salida); } /* EL HALO VA CON EL NARANJA VIVO DE LA MARCA, no con el acento. Aqui no hay letra encima que medir -es un cerco de color alrededor de una caja-, asi que se puede usar el #ef7d00 de verdad. Y se gana justo lo que hace falta de un foco: que se vea desde lejos, en una tablet con reflejos, sin tener que buscar donde estabas escribiendo. */ :root input:focus, :root select:focus, :root textarea:focus { outline: none; border-color: var(--pn-naranja-marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pn-naranja-marca) 30%, transparent); } /* Los huecos de hora: es lo que mas se toca de toda la aplicacion. */ :root .hueco { border-radius: var(--pn-radio-2); transition: transform var(--pn-rapido) var(--pn-salida), border-color .18s var(--pn-salida), background-color .18s var(--pn-salida); } :root .hueco:hover { transform: translateY(-2px); border-color: var(--acento); } /* El halo del hueco elegido, con el naranja vivo por lo mismo que el foco: es color alrededor, no debajo de ninguna letra. El relleno del hueco lo sigue poniendo `--acento`, que es el que si lleva texto encima. */ :root .hueco.elegido { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pn-naranja-marca) 32%, transparent); } :root .tabla tbody tr { transition: background-color var(--pn-rapido) var(--pn-salida); } :root .tabla tbody tr:hover { background: color-mix(in srgb, var(--acento) 5%, transparent); } /* Iconos: los SVG que ya hay en las plantillas, un poco mas finos y nitidos. No se cambia ningun icono — eso obligaria a tocar las plantillas, y esta piel no toca ni una. */ :root svg { shape-rendering: geometricPrecision; } :root .boton svg { stroke-width: 1.75; } /* --- Movimiento ---------------------------------------------------------- */ /* Lo que se despliega, entra. Traslacion y opacidad: las dos en la GPU. */ @keyframes pn-entrar { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } :root .menu-desplegado, :root .calendario-panel { animation: pn-entrar var(--pn-medio) var(--pn-entrada); box-shadow: var(--pn-sombra-2); } /* Esperando. Se pone en los avisos de «Cargando horarios» y «Buscando huecos», que es el unico rato en que esto tiene algo que decir. */ @keyframes pn-latido { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } :root #horas > .apunte:only-child, :root #cartelera .apunte:only-child { animation: pn-latido 1.4s ease-in-out infinite; } /* --- Quien no quiere movimiento ------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root *, :root *::before, :root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* --- El boton que cambia de piel ----------------------------------------- */ /* Lo pinta `piel.js` al lado del de tema, y por eso no lleva ninguna clase de ninguna plantilla. Se estiliza para las DOS pieles: con la de siempre tambien tiene que verse, o no habria forma de volver. */ .piel { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 0 .5rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); color: var(--texto-suave); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; transition: color .18s ease, border-color .18s ease; } .piel:hover { color: var(--acento); border-color: var(--acento); } .piel:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; } .piel-suelto { position: fixed; right: 3.6rem; bottom: 1rem; z-index: 50; }