/* ===================================================================================== LA PALETA ÚNICA DEL PLANO DE SALA (2026-09-12) ===================================================================================== ESTE FICHERO SE ESCRIBE UNA VEZ Y SE USA EN DOS SITIOS. Es la misma sala dibujada por dos programas distintos: * el TPV -> frontend-blazor\Tentalo.POS.Terminal\Mapa\PlanoDeSala.razor, con las reglas `plano-de-sala__*` de wwwroot\css\terminal.css; * la central -> central\Tentalo.Central.Web.Locales\Components\Salas\ FiguraDeSala.razor, con las reglas `salas-*` de central\Tentalo.Central.Web\wwwroot\css\app.css. EL DEFECTO QUE ARREGLA (encargo del 2026-09-12, con capturas): los dos pintaban el MISMO dato -FloorPlanDTO / TableLayoutDTO, fases M1-M4 de docs\tpv\diseno-de-salas.md- con dos paletas distintas. Arriba, en la nube, las mesas libres salían con relleno suave y canto fino, el nombre en negrita y «4 plazas» en gris; abajo, en la caja, salían en blanco con solo el borde y un «4» pelado. La misma mesa, dos dibujos. LA REFERENCIA ES LA CENTRAL, que es donde se diseñó el plano: «sala clara, tinta morada» (docs\tpv\diseno-sala-clara.md) con el rediseño del §9.8 de docs\tpv\diseno-de-salas.md. De ahí salen los siete estados, el canto de 1,5 px que no escala, la sombra corta y los neutros de los adornos. CÓMO LLEGA A LOS DOS SITIOS =========================== El fichero VIVE aquí, en la biblioteca Táctil, que es la que ya sirve tactil.css a los frontales del TPV bajo _content/Tentalo.POS.Tactil/. La central no puede referenciar esa biblioteca -su web es WebAssembly y no arrastra nada del POS-, así que se lleva una COPIA en central\Tentalo.Central.Web\wwwroot\css\sala.css, que el objetivo MSBuild `TentaloCopiarPaletaDeSala` refresca en cada compilación. Que las dos no se separen lo vigila una prueba: PaletaDeSalaTests (central) compara el hash de las dos. NI UN COLOR DE ESTADO FUERA DE AQUÍ. terminal.css y app.css consumen estos tokens; lo único que entra de fuera es el color que el administrador elige por mesa o por zona de venta, y ese NO se pinta tal cual: se mezcla con el blanco para el relleno y se oscurece para el canto (ver «El tinte del color de la mesa», más abajo). ===================================================================================== */ :root { /* --- Superficie ------------------------------------------------------------------ El «papel» de la sala y el lienzo sobre el que se apoya. En la central son --salas-papel y --salas-lienzo; en el TPV, el fondo del plano. */ /* 2026-10-14: el suelo y el lienzo en claro, de crema y lavanda a azulados, para casar con el fondo nuevo del tema claro (tactil.css --t-fondo #eef2f8): suelo casi blanco con un punto frio, lienzo del tono del fondo, canto un punto mas hondo. Las mesas (libre, ocupada...) no cambian de color y se siguen distinguiendo del suelo por su canto y su relleno. En la central esta misma hoja pinta el editor de salas (copia de MSBuild). */ --sala-suelo: #f7f9fc; --sala-lienzo: #e9eff7; --sala-suelo-canto: #d3dbe7; --sala-rejilla: rgba(103, 41, 144, .16); /* --- Trazo y forma --------------------------------------------------------------- EL CANTO VA SIN UNIDAD a propósito: es un `stroke-width` de SVG y todas las figuras llevan `vector-effect: non-scaling-stroke`, así que el número son píxeles de pantalla y no centímetros del plano. 1,5 es el grosor del rediseño §9.8: con menos una mesa no tiene borde al alejar, con más se convierte en una mancha al acercar. El «fuerte» es el que llevan los dos estados que hay que ver de lejos -cocina lista y cuenta pedida-, y el «acento» el de la mesa elegida. */ --sala-canto: 1.5; --sala-canto-fuerte: 3; --sala-canto-acento: 2; --sala-radio: .55rem; /* La sombra CORTA de una mesa: un milímetro de despegue del suelo, no un halo. Va como `filter` porque en SVG un box-shadow no existe. */ --sala-sombra: drop-shadow(0 1px 1.5px rgba(36, 28, 43, .16)); --sala-sombra-caja: 0 1px 2px rgba(36, 28, 43, .06), 0 1px 3px rgba(36, 28, 43, .07); /* --- La tinta -------------------------------------------------------------------- El nombre de la mesa en 700 y el dato secundario -«4 plazas», el importe, el tiempo- en gris. Los dos cuerpos NO se deciden aquí: son centímetros del plano y los calcula el C# de los dos frentes (Colocacion.CuerpoDelNombre en el TPV, DibujoDeSala.LetraDeEtiqueta en la central), con el secundario al 60 % del nombre. */ --sala-tinta: #241c2b; /* 2026-09-28 (docs\tpv\contraste-claro-2026-09-28.md): de #7a7284 a #574d60. El gris de antes daba 4,07:1 sobre la libre y 3,49:1 sobre la ocupada -«4 plazas», el importe y el tiempo del plano compacto-; este da 7,05:1 sobre la libre, 6,06:1 sobre la ocupada y 4,71:1 sobre el peor tinte de zona (negro al 22 %, #c7c7c7). */ --sala-tinta-2: #574d60; --sala-nombre-peso: 700; /* --- LOS SIETE ESTADOS ----------------------------------------------------------- El orden es el de docs\tpv\diseno-de-salas.md §5 y el de Colocacion.EstadoDeMesa. Y NINGUNO SE DISTINGUE SOLO POR EL COLOR: cocina lista, cuenta pedida, reservada y bloqueada llevan además un glifo, y la inactiva un rayado. LIBRE es la que cambia con este encargo: relleno suave gris azulado -no blanco- y canto fino. Es lo que hace que una sala vacía se lea como una sala y no como una hoja en blanco con rayas. */ --sala-libre-fondo: #f2f0f7; --sala-libre-borde: #cfc7d6; /* OCUPADA: morado suave de marca. Es el estado que el TPV ya tenía bien. */ --sala-ocupada-fondo: #e8d9f3; --sala-ocupada-borde: #672990; /* COCINA LISTA: ámbar. El ámbar NO pinta texto -no llega a 4,5:1 sobre blanco-, solo relleno y canto; es la salvedad que deja escrita docs\tpv\diseno-sala-clara.md §4. */ --sala-cocina-fondo: #fdf2da; --sala-cocina-borde: #c98a12; /* CUENTA PEDIDA: verde. */ --sala-cuenta-fondo: #e2f2e8; --sala-cuenta-borde: #2f8f5b; /* RESERVADA: sin ticket todavía, así que POR DENTRO ES UNA MESA LIBRE —y por eso su relleno es literalmente el de libre, tinte de la zona incluido—; lo que distingue es el canto AZUL DISCONTINUO y el reloj con la hora en la etiqueta. */ --sala-reservada-fondo: var(--sala-libre-fondo); --sala-reservada-borde: #2f6fb5; --sala-reservada-guion: 8 5; /* BLOQUEADA POR OTRA CAJA: apagada, canto rojo y candado. */ --sala-bloqueada-fondo: #eceaee; --sala-bloqueada-borde: #c8382f; /* INACTIVA: rayada. El rayado es un en los dos frentes y lo único que se puede pasar por token es el color de sus líneas. */ --sala-inactiva-fondo: #f4f2f5; --sala-inactiva-borde: #8a7f94; --sala-inactiva-rayado: rgba(43, 43, 43, .28); /* La mesa ELEGIDA y el foco de teclado: el morado de marca, en los dos. */ --sala-elegida-borde: #672990; /* --- EL TINTE DEL COLOR DE LA MESA ----------------------------------------------- El administrador elige un color por mesa (TableLayoutDTO.Color) o por zona de venta, y son colores de ROTULACIÓN: hay instalaciones con la terraza en rojo puro. Pintados tal cual, un plano de seis zonas es un semáforo y no un plano. Así que el color TIÑE la mesa libre: relleno = color mezclado con blanco al 22 % (el 78 % es blanco) canto = ese relleno multiplicado por 0,55 (el mismo tono, más oscuro) CON TICKET ABIERTO MANDA EL ESTADO Y NO EL COLOR: una mesa ocupada es morada venga de la zona que venga, porque lo que hay que leer es «tiene gente», no «es de la terraza». LOS DOS NÚMEROS SE CALCULAN EN C#, no con color-mix(), y no es por gusto: así son una función con pruebas -Colocacion.RellenoDeMesa en el TPV y DibujoDeSala.RellenoDeMesa en la central-, dan exactamente el mismo #rrggbb en los dos frentes y se pueden comparar en una prueba. Aquí quedan escritos para que el que lea la hoja sepa de dónde sale el color, y una prueba de cada lado comprueba que el C# y estos dos tokens dicen lo mismo. */ --sala-tinte-relleno: 22%; --sala-tinte-canto: 55%; /* --- LOS ADORNOS ----------------------------------------------------------------- Paredes, puertas, ventanas, barras, pilares, plantas, escaleras, zonas y líneas. Ninguno satura: en el plano de una sala manda la MESA. El canto de cada uno es su relleno multiplicado por 0,68, que es lo que hace DibujoDeSala.CantoDeAdorno; está escrito aquí ya resuelto para que la hoja del TPV no tenga que calcularlo. LO MACIZO EN TOPO OSCURO (§14 de docs\tpv\diseno-de-salas.md, «Dibujo», 2026-09-27). La pared y el pilar eran un beige casi del color del suelo, y las barandillas que daban forma al plano antiguo se quedaban en una mancha plana. Un plano de arquitecto dibuja el muro en oscuro y lo demás en claro: el muro dice dónde acaba la sala sin competir con las mesas, que son claras y llevan el color de estado. La planta, de un verde casi blanco a un salvia apagado que se lee como planta. */ --sala-adorno-pared: #6f645d; --sala-adorno-pared-canto: #4b443f; --sala-adorno-puerta: #b5aa9a; --sala-adorno-puerta-canto: #7b7469; --sala-adorno-ventana: #cfe3ef; --sala-adorno-ventana-canto: #8d9aa3; --sala-adorno-barra: #f0e3cf; --sala-adorno-barra-canto: #a39a8d; --sala-adorno-pilar: #7d726b; --sala-adorno-pilar-canto: #554e49; --sala-adorno-planta: #a8c6ae; --sala-adorno-planta-canto: #728776; --sala-adorno-escalera: #e7e2db; --sala-adorno-escalera-canto: #9d9a95; --sala-adorno-zona: #e9e3f1; --sala-adorno-zona-canto: #9e9aa4; --sala-adorno-linea: #c9c1b8; --sala-adorno-linea-canto: #89837d; --sala-adorno-neutro: #ded7cf; --sala-adorno-neutro-canto: #97928d; --sala-adorno-tinta: #7a7284; /* --- EL MOBILIARIO (§14 de docs\tpv\diseno-de-salas.md, «Dibujo», 2026-09-27) ------ LAS SILLAS de cada mesa, una por plaza (Mobiliario.Sillas en los dos frentes): madera clara con el respaldo un punto más oscuro, que es lo que dice hacia dónde mira la silla. En el TPV, las sillas de los comensales sentados toman el morado de «ocupada»: una mesa de cuatro con tres personas se lee sin leer el «3/4». LA PLANTA vista desde arriba: la roseta clara es --sala-adorno-planta, la de encima es ese color al 70 % (DibujoDeSala.Oscurecer(…, 0,7), escrito aquí ya resuelto) y el centro al 55 %; la sombra de la maceta es un velo del mismo verde. EL MUEBLE que la importación del plano antiguo no supo clasificar: un bulto neutro con canto. LA REJILLA DE LÍNEAS del TPV, más suave que la de puntos de la central: una línea entera se ve mucho más que un punto con el mismo color. */ --sala-silla: #e3d9cd; --sala-silla-respaldo: #b9a794; --sala-silla-canto: #a8988a; --sala-silla-sentada: #dccbeb; --sala-silla-sentada-respaldo: #7a3fa6; --sala-planta-honda: #768b7a; --sala-planta-centro: #5c6d60; --sala-planta-sombra: rgba(58, 84, 64, .16); --sala-adorno-mueble: #e4ddd5; --sala-adorno-mueble-canto: #9b9691; --sala-rejilla-linea: rgba(103, 41, 144, .07); } /* ===================================================================================== LA VARIANTE OSCURA, SOLO DEL TPV ===================================================================================== El Terminal tiene botón de luna en la barra de estado y arranca en claro (docs\tpv\diseno-sala-clara.md 3.1): el tema claro pone data-tema="claro" en el y el OSCURO se marca QUITANDO el atributo (Tactil\Runtime\Tema.cs y tactil.js). POR QUÉ EL SELECTOR CUELGA DE .plano-de-sala Y NO DE :root. «Sin data-tema» no es una marca de oscuro en general: es una marca de oscuro EN EL TPV. La central no pone ese atributo nunca -su administrador es claro y punto-, así que un `:root:not([data-tema="claro"])` a secas le pondría el plano en negro a la nube. El contenedor .plano-de-sala solo existe en el TPV, y ahí el par de condiciones sí significa lo que dice. LOS TONOS NO SON LOS CLAROS INVERTIDOS: son los mismos SIETE estados llevados al tema oscuro de tactil.css, con los rellenos apenas por encima del panel #1c1920 para que la sala siga pareciendo una superficie y no un agujero. LA PALETA OSCURA REHECHA EL 2026-10-01 (docs/tpv/modo-oscuro-2026-10-01.md; foto de la sala «4000C - MC» en oscuro: «este verde contesta mal en el modo oscuro»). Medido antes: el relleno de cada estado con ticket salía de mezclar su canto al 16 % con el suelo morado, y el verde de «cuenta pedida» se volvía un gris oliva sin color (croma 2,4 en OKLCH) que peleaba con el morado; la ocupada quedaba MÁS OSCURA que una libre teñida de su zona (luminosidad 27 contra 38) y su canto #8b3fc0 no llegaba a 3:1 del suelo (2,95:1); la elegida era ese mismo morado, así que una ocupada elegida no se distinguía y una verde elegida llevaba un canto morado encima; y las paredes (#968ca0, 5,42:1) y los respaldos (4,19:1) brillaban más que el canto de cualquier mesa. LA REGLA DE AHORA: la luz dice la jerarquía. Suelo (luminosidad 22) < libre (27) < los tres estados con ticket, todos a la MISMA luz (35-37) y con su propio color —violeta, ámbar, jade—, que es lo que salta a la vista; los cantos de estado entre 4,9 y 9,5:1 del suelo; paredes a 3:1 y sillas discretas por debajo. Cada relleno es un color ESCRITO, no una mezcla, para que tenga croma y una prueba lo pueda medir (Tentalo.POS.Tactil.Tests/ContrasteDelTemaTests.cs). */ :root:not([data-tema="claro"]) .plano-de-sala { --sala-suelo: #1c1920; --sala-lienzo: #141216; --sala-suelo-canto: rgba(255, 255, 255, .10); --sala-rejilla: rgba(243, 239, 247, .10); /* EL RELIEVE EN OSCURO (2026-11-08, decisión del usuario del 07-11: las mesas conservan el relieve también en oscuro; pieza U2 del plan de usabilidad). La sombra negra al 55 % sobre el suelo #1c1920 no se veía (1,21:1 del negro puro): un canto oscuro no contrasta con un suelo casi negro. Como en los botones de empleado (terminal.css, «EL RELIEVE EN OSCURO») el relieve lo hace la LUZ, con tres sombras duras, sin difuminar («no quiero las sombritas»): un filo de luz de 1 px arriba (blanco al 20 %, 1,9:1 del suelo), el canto oscuro de 2 px abajo y, debajo de él, un filete de luz de 1 px (blanco al 12 %, 1,4:1 del suelo) que lo separa del suelo. Lo mide ContrasteDelTemaTests. El claro no cambia. */ --sala-sombra: drop-shadow(0 -1px 0 rgba(255, 255, 255, .20)) drop-shadow(0 2px 0 rgba(0, 0, 0, .90)) drop-shadow(0 1px 0 rgba(255, 255, 255, .12)); --sala-sombra-caja: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .30); --sala-tinta: #f3eff7; /* 2026-09-28 (§18.6 del plan): de #a79fb2 a #c4bccf. Sobre la libre teñida de una zona BLANCA -el peor caso- da 5,73:1; sobre los tres estados con ticket, 5,63-5,89:1. */ --sala-tinta-2: #c4bccf; /* LIBRE: gris lavanda apenas por encima del suelo (1,16:1) y canto a 3,2:1. Es la mesa que espera: se ve, pero no llama. */ --sala-libre-fondo: #282330; --sala-libre-borde: #6e6680; /* OCUPADA: VIOLETA DE LA MARCA, el mismo estado que en el claro y en la central. El relleno lleva croma de verdad (8,2 contra el 2,5 de la libre) y más luz que la libre, y el canto es un lila a 4,94:1 del suelo (el #8b3fc0 de antes, 2,95:1). */ --sala-ocupada-fondo: #48326b; --sala-ocupada-borde: #a271e0; /* COCINA LISTA: el ámbar de siempre en el canto; el relleno, un tostado a la misma luz que la ocupada. */ --sala-cocina-fondo: #4b3b22; --sala-cocina-borde: #f0b64a; /* CUENTA PEDIDA: JADE, no el verde menta (#5fd38d). El jade (tono 172 en OKLCH) está a 130 grados del violeta (302) y su relleno es un verde azulado con croma (4,7, tono 181) en vez del gris oliva que salía de mezclar menta con morado. */ --sala-cuenta-fondo: #1f4740; --sala-cuenta-borde: #4fc6a6; /* RESERVADA: el azul de --t-info (#7cc4ff), el que ya lleva la reservada en la lista y en el plano compacto. Con el azul de antes (#5b93d6) el canto de la reservada y el de la ocupada tenían la MISMA luz (65) y un deuteranope no los separaba (ΔE 2,1); con este, 8,1 o más entre cualquier par de estados. */ --sala-reservada-fondo: var(--sala-libre-fondo); --sala-reservada-borde: #7cc4ff; --sala-bloqueada-fondo: #2b2830; --sala-bloqueada-borde: #ff6b6b; --sala-inactiva-fondo: #232029; --sala-inactiva-borde: #6f6779; --sala-inactiva-rayado: rgba(243, 239, 247, .22); /* ELEGIDA: un lila casi blanco (12,1:1 del suelo, 7,5:1 sobre la ocupada) y no el violeta de la ocupada. Es lo más claro del plano después de la letra: la mesa tocada se ve encima de cualquier estado sin cambiar de familia de color. */ --sala-elegida-borde: #e2d0f7; /* Los adornos en oscuro: los mismos neutros bajados de luz. Un mueble sigue siendo referencia espacial y no puede brillar más que una mesa. */ /* LA PARED, BAJADA DE LUZ EL 2026-10-01: de #968ca0 (5,42:1 del suelo, más que el canto de cualquier mesa) a #6b6379, 3,05:1. Sigue diciendo «aquí acaba la sala» -3:1 es el mínimo de un gráfico que hay que ver (WCAG 1.4.11)- y ya no deslumbra: en la sala «4000C - MC» las barandillas del plano antiguo son paredes y cruzaban el plano en lavanda casi blanco. LOS MISMOS COLORES QUE EL CLARO, EN OSCURO (2026-11-08, nota 2 de Paula, pieza U2): cada adorno era un neutro propio del oscuro (la pared violeta en oscuro y topo en claro). Ahora cada token es el del claro con su tono y su croma en OKLCH y la LUZ que ya tenía aquí (TinteOscuro.Oscuro): la pared sigue a 3,07:1 del suelo, la barra es la madera clara en oscuro y la ventana el mismo azul. ContrasteDelTemaTests comprueba el tono (≤ 10° del claro) y que la luz no ha cambiado. */ --sala-adorno-pared: #70655e; --sala-adorno-pared-canto: #877f79; --sala-adorno-puerta: #4d4336; --sala-adorno-puerta-canto: #6d665c; --sala-adorno-ventana: #2a3a44; --sala-adorno-ventana-canto: #546069; --sala-adorno-barra: #584d3c; --sala-adorno-barra-canto: #81786c; --sala-adorno-pilar: #70655e; --sala-adorno-pilar-canto: #867f79; --sala-adorno-planta: #5d7963; --sala-adorno-planta-canto: #445748; --sala-adorno-escalera: #39352f; --sala-adorno-escalera-canto: #575450; --sala-adorno-zona: #322d38; --sala-adorno-zona-canto: #4e4a53; --sala-adorno-linea: #3a342c; --sala-adorno-linea-canto: #59534d; --sala-adorno-neutro: #3b362f; --sala-adorno-neutro-canto: #5b5651; --sala-adorno-tinta: #c4bccf; /* El mobiliario en oscuro: el muro ya no es lo más oscuro, es lo más CLARO que no es mesa, que es lo que en un plano oscuro dice «aquí hay pared». BAJADAS DE NUEVO EL 2026-10-01 (docs/tpv/modo-oscuro-2026-10-01.md): con el respaldo a 4,2:1 las sillas brillaban más que el canto de la mesa ocupada. Ahora son DISCRETAS: la silla a 1,46:1 del suelo y el respaldo a 2,5:1 (se ve hacia dónde mira sin competir con la mesa). El taburete libre, que se pinta con la silla, lleva en oscuro el canto de la mesa libre (3,2:1; regla en terminal.css), porque es una mesa que se toca. Las sillas de los sentados, en el violeta de «ocupada»: el respaldo es su mismo canto. Lo de antes, para la historia: SUBIDOS DE LUZ EL 2026-09-28 (§18.6 del plan; foto de la Concord en oscuro: «no se ve nada»). La silla #3a3440 se quedaba a 1,4:1 del suelo y 1,3:1 de la mesa libre, y el taburete, que se pinta con ella, desaparecía; el muro #6a6170 no llegaba a 3:1. Ahora la silla está a 2,2:1 del suelo con el respaldo a 4,2:1 -se ve la silla y hacia dónde mira- y el muro a 5,4:1. El nombre sobre un taburete (tinta sobre la silla) queda a 7:1. */ --sala-silla: #3b3446; --sala-silla-respaldo: #5e566c; --sala-silla-canto: rgba(255, 255, 255, .08); --sala-silla-sentada: #3f2d5a; --sala-silla-sentada-respaldo: #a271e0; --sala-planta-honda: #415545; --sala-planta-centro: #2d3d31; --sala-planta-sombra: rgba(0, 0, 0, .30); --sala-adorno-mueble: #3f3a33; --sala-adorno-mueble-canto: #6b6662; --sala-rejilla-linea: rgba(243, 239, 247, .05); } /* LA ELEGIDA EN EL CLARO DEL TPV (2026-11-08, nota 5 de Paula, docs/tpv/notas-de-usabilidad-2026-11-07.md). En claro la elegida y la ocupada llevaban el MISMO morado (#672990): una mesa recién cobrada, libre pero aún elegida, se leía como si siguiera ocupada. En el TPV la elegida pasa a la TINTA del claro un punto más honda (#1a1420): más de 12:1 sobre cualquier relleno y a 23,5 del morado de la ocupada en el peor caso, la deuteranopía (Tentalo.POS.Tactil.Tests/ContrasteDelTemaTests.cs). La tinta tal cual (--sala-tinta, #241c2b) se quedaba en 20,0 con deuteranopía: justo el mínimo. Es lo mismo que se hizo en oscuro el 2026-10-01: la selección no comparte color con ningún estado. SOLO EN EL TPV: cuelga del plano dibujado, del compacto del teléfono y de la fila de mesa, igual que la variante oscura. La central carga este mismo fichero y su editor sigue con el morado, que allí no se confunde con nada (sus mesas no tienen estado) y casa con las asas moradas de la selección. */ :root[data-tema="claro"] :is(.plano-de-sala, .plano-compacto__mesa, .mesa-fila) { --sala-elegida-borde: #1a1420; }