/* =========================================================================== tokens.css — el vocabulario visual que comparten los dos paneles Cristian (ago-2026): «manejemos el mismo estilo ya que esto al final será un solo producto de restaurant management». ⭐ MISMOS COMPONENTES ≠ MISMA PALETA Un solo producto NO quiere decir que las dos pantallas se vean iguales: quiere decir que un botón es un botón, un chip es un chip y un aviso rojo significa lo mismo en las dos. El panel del cajero se llena de NOCHE, de pie, en el PC del local, y el fondo oscuro hace que el descuadre en rojo salte. El del gerente se abre de DÍA, sentado, contra un Excel abierto al lado, y ahí manda parecerse a una hoja de cálculo. Copiarle el tema oscuro al gerente habría quedado bonito y se habría leído peor. Por eso lo que se comparte son los NOMBRES, no los valores. `--acento` es «la mostaza de Las Crepes» en los dos; que en uno sea #e8a33d y en el otro #b57614 es la misma decisión de marca leída sobre fondos opuestos. --------------------------------------------------------------------------- ⚠️ ESTE ARCHIVO ESTÁ COPIADO A MANO EN DOS SITIOS panel_cuadre/estilo/tokens.css ← el original, el que se edita panel_cuadre/web/tokens.css ← copia (panel del cajero) panel_cuadre/web_gerente/tokens.css ← copia (panel del gerente) No hay build, no hay git y los dos sitios se suben a Cloudflare por separado. Una copia vieja en UNA sola de las dos carpetas es una AUSENCIA VISUAL MUDA: no da error, no aparece en consola, simplemente un panel se ve distinto del otro y nadie sabe desde cuándo. Al tocar este archivo hay que volver a copiarlo a las dos carpetas Y SUBIR LAS DOS. ⚠️ Y hay que mover el `?v=` del `` en LOS DOS index.html. El navegador cachea CSS con ganas; sin cambiar la URL, el que ya entró una vez sigue viendo los colores viejos indefinidamente. --------------------------------------------------------------------------- ⚠️ NO HAY TEMA POR DEFECTO, Y ES A PROPÓSITO Los tokens viven SOLO bajo `[data-tema="oscuro"]` y `[data-tema="claro"]`. Si alguien se lleva este archivo a una página nueva y olvida poner el atributo en el ``, la página sale sin estilo — rota de forma escandalosa, imposible de no ver. La alternativa (dejar un tema en `:root` como respaldo) suena más prudente y es peor: la página saldría PLAUSIBLE, con el tema equivocado, y eso sí se pasa a producción sin que nadie lo note. Entre romperse a gritos y equivocarse en silencio, en este proyecto se rompe a gritos. --------------------------------------------------------------------------- ⭐ SOBRE LOS NOMBRES: se conservan los que ya estaban El plan de la fase D proponía rebautizarlos (`--fondo`→`--sup`, `--texto`→`--tinta`…). No se hizo, y la razón no es pereza: los nombres viejos YA cumplen el único criterio que importaba —son semánticos, no de color: ninguno se llama `--gris-oscuro`—, y ya están escritos idénticos en los dos archivos, que era justo lo que la fase venía a conseguir. Cambiarlos obligaba a tocar ~1.300 líneas de CSS a mano para conseguir sinónimos. Y una sola sustitución olvidada deja un `var(--texto)` que ya no existe: la propiedad se descarta, el elemento hereda, y el resultado es un borde que desaparece o un texto que casi se lee. Otra vez la misma familia: NO da error, se ve casi bien. Todo el riesgo, cero beneficio visible. =========================================================================== */ /* ============================================================ CAJERO ===== */ [data-tema="oscuro"] { --fondo: #12100e; --panel: #1c1917; --panel-alto: #262220; --borde: #3a3431; --texto: #f5f0eb; --texto-2: #a89f98; --acento: #e8a33d; /* mostaza Las Crepes */ --sobre-acento:#1a1512; /* ver nota abajo */ --ok: #3fb96b; --mal: #e5484d; --radio: 12px; --toque: 44px; /* ver nota abajo */ } /* ============================================================ GERENTE ==== */ [data-tema="claro"] { --fondo: #f4f2ef; --panel: #ffffff; --panel-alto: #faf8f6; --borde: #d9d4ce; --texto: #1b1917; --texto-2: #6f675f; --acento: #b57614; /* la misma mostaza, oscurecida para leerse en claro */ --sobre-acento:#ffffff; --ok: #1f7a44; --mal: #c02730; --radio: 10px; --toque: 32px; } /* =========================================================================== ⭐ `--sobre-acento` — la tinta que va ENCIMA del acento Es el token que demuestra que el tema es real y no dos hojas pintadas distinto. La regla es la misma en los dos paneles —«el texto sobre la mostaza tiene que contrastar con la mostaza»— y por eso los valores salen OPUESTOS: en oscuro la mostaza es clara y brillante, así que encima va tinta casi negra; en claro la mostaza va oscurecida para leerse, así que encima va blanco. Antes esto no era un token y se pagaba caro: `#1a1512` estaba escrito A MANO DIEZ VECES en panel.css (`.btn-primario`, `.paso.activo`, `.chip:active`, `.chip-sede.activo`…) y `#fff` andaba mezclado en gerente.css haciendo dos trabajos distintos —a veces «superficie blanca de un control», a veces «texto sobre el acento»— que se ven igual en un tema claro y dejan de verse igual en cuanto se toca el acento. ⚠️ Ese es el punto: si mañana la mostaza se aclara, con el token hay UN sitio que revisar. Sin él, hay que cazar cada literal y adivinar cuál de los dos trabajos estaba haciendo. Los que significaban «superficie» ahora dicen `var(--panel)`; los que significaban «tinta sobre el acento», `var(--sobre-acento)`. --------------------------------------------------------------------------- ⭐ `--toque` — MISMO token, valor distinto: 44px vs 32px Eso no es una inconsistencia, es la coherencia bien entendida. El cajero toca con el pulgar, de pie y de afán: 44px es el mínimo de área táctil que recomienda Apple y por debajo de eso se falla el botón. El gerente usa mouse en un PC, con 26 columnas en pantalla: 44px por control desperdiciaría el alto que necesita la hoja, y con puntero la precisión no es el problema. Un solo producto no significa un solo tamaño: significa que los dos dicen «este es el alto mínimo de algo que se toca» con la misma palabra. =========================================================================== */