/* ============================================================================= te.tokens.css — el vocabulario visual de TouchExpress. UN fichero. ============================================================================= Aqui, y SOLO aqui, se decide de que color y de que tamaño es todo. Lo carga el login y lo carga el layout de la aplicacion, asi que no hay dos verdades. ⚠️ LA REGLA, y es la que evita volver a donde estabamos: ninguna otra hoja escribe un #hex ni un tamaño en px/pt/em. Se usa una variable de aqui. Si algo necesita un color o un tamaño que no esta en esta lista, la pregunta correcta NO es "lo pongo a mano", es "falta un token". DE DONDE VENIMOS, medido el 31/08/2026 sobre wwwroot/css: 17 familias de letra distintas, en 335 declaraciones 74 tamaños distintos, en 957 declaraciones 5 unidades mezcladas: px, pt, em, rem y % Con eso es imposible que dos pantallas se parezcan, y por eso en una sola pantalla -la 4049- se distinguen cuatro letras distintas a simple vista. ========================================================================== */ /* ── MODO OSCURO (el de siempre, y el defecto) ──────────────────────────── */ :root, :root[data-tema="oscuro"] { --te-fondo: #16181a; /* el papel */ --te-superficie: #1e2124; /* cajas, campos, cabeceras de rejilla */ --te-superficie-2: #24282c; /* un escalon mas, para filas alternas */ --te-borde: #33383d; --te-borde-fuerte: #4a5157; /* LA CEBRA de las tablas de informes, que van sin rayas (Jose, 05/10/2026, la B de mishuevos\6009\rayas): el texto casi transparente, asi que se nota igual sobre la superficie que sobre la tarjeta de una seccion, que ya es superficie-2. Un color fijo, no un color-mix: tambien la lee el correo. */ --te-cebra: rgba(230, 232, 234, .04); --te-texto: #e6e8ea; --te-texto-suave: #9aa1a8; --te-texto-legal: #6b7278; --te-acento: #4f93b8; /* el azul de la casa, desaturado */ /* La marca de la casilla y el "cargando" de los campos, como imagen: una imagen de fondo no hereda currentColor, asi que el color va dentro y hay una por tema. Mismo azul. */ --te-casilla-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.6' fill='none' stroke='%234f93b8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* La casilla a medias (una region con parte de sus tiendas): una raya, del mismo azul. */ --te-casilla-parcial: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' fill='none' stroke='%234f93b8' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); --te-cargando: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%234f93b8' stroke-opacity='.25' stroke-width='2.4'/%3E%3Cpath d='M12 4a8 8 0 0 1 8 8' fill='none' stroke='%234f93b8' stroke-width='2.4' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E"); --te-acento-rgb: 79, 147, 184; /* el MISMO color en componentes, para rgba() */ --te-acento-vivo: #63a8cd; --te-acento-foco: rgba(79, 147, 184, .18); --te-acento-suave: rgba(79, 147, 184, .14); /* fila seleccionada, resaltados */ --te-sobre-acento: #ffffff; --te-ok: #6fbf8b; --te-aviso: #d9b25f; --te-error: #e08585; /* El FONDO de un estado, que no es el mismo color que su texto. Las hojas viejas usaban pastel casi blanco -#f5fff5 verde, #f7f8e0 amarillo, #ffd9d9 rojo- y sobre fondo oscuro eso no vale: aqui es el color del estado muy rebajado, que es lo que hace que la fila resaltada se lea en los dos modos. */ --te-ok-fondo: rgba(111, 191, 139, .16); --te-aviso-fondo: rgba(217, 178, 95, .16); --te-error-fondo: rgba(224, 133, 133, .16); /* LAS SERIES DE LOS GRAFICOS: una paleta para TODOS (motor de informes, 6078...), en este orden y nunca por rango. Tonos apagados -Jose, 11/09/2026: los vivos "son muy chillones"-: azul pizarra, arena, lavanda, salvia, arcilla, verde azulado, oliva y rosa ceniza, OKLCH croma ~0,105. Validados con los seis controles de paleta de la skill dataviz, tambien para daltonicos (salvia y arcilla, y rosa y verde azulado, nunca juntos). El oscuro lleva sus propios pasos, no los mismos invertidos. ⚠️ Un canvas NO entiende var(--…): quien pinta lee el token con getComputedStyle y le pasa el #hex. Y el Excel y el correo (C#) copian a mano los del claro: PaletaInformes.Serie. */ --te-serie-1: #5d8ece; --te-serie-2: #b48b40; --te-serie-3: #715da4; --te-serie-4: #58a576; --te-serie-5: #954c28; --te-serie-6: #029393; --te-serie-7: #596912; --te-serie-8: #c8758f; /* Los materiales del plano de un salon (1009 Salones): mesas, sillas, hamacas, setos, muros y piscina. Los del boceto aprobado por Jose el 11/09/2026. */ --te-plano-lienzo: #1a1d20; --te-plano-rejilla: rgba(230, 232, 234, .05); --te-plano-mesa: #8a6e4b; --te-plano-mesa-borde: #b8976a; --te-plano-silla: #5e4d38; --te-plano-hamaca: #b56f6f; --te-plano-hamaca-borde: #e0a0a0; --te-plano-seto: #5d8a55; --te-plano-muro: #8b949d; --te-plano-piscina: rgba(79, 147, 184, .22); --te-plano-piscina-borde: #63a8cd; --te-plano-etiqueta: #e6e8ea; } /* ── MODO CLARO ─────────────────────────────────────────────────────────── */ :root[data-tema="claro"] { --te-fondo: #f4f5f7; --te-superficie: #ffffff; --te-superficie-2: #f0f2f4; --te-borde: #d9dde1; --te-borde-fuerte: #b6bdc4; --te-cebra: rgba(28, 33, 38, .04); --te-texto: #1c2126; --te-texto-suave: #626d78; --te-texto-legal: #8b949d; /* El acento se OSCURECE en claro: el mismo azul sobre blanco no llega al contraste minimo y se lee lavado. No es el mismo color con otro fondo. */ --te-acento: #2f739a; --te-casilla-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.6' fill='none' stroke='%232f739a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* La casilla a medias (una region con parte de sus tiendas): una raya, del mismo azul. */ --te-casilla-parcial: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' fill='none' stroke='%232f739a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); --te-cargando: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%232f739a' stroke-opacity='.25' stroke-width='2.4'/%3E%3Cpath d='M12 4a8 8 0 0 1 8 8' fill='none' stroke='%232f739a' stroke-width='2.4' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E"); --te-acento-rgb: 47, 115, 154; /* el MISMO color en componentes, para rgba() */ --te-acento-vivo: #255f81; --te-acento-foco: rgba(47, 115, 154, .20); --te-acento-suave: rgba(47, 115, 154, .12); --te-sobre-acento: #ffffff; --te-ok: #1f7a4d; --te-aviso: #8a6416; --te-error: #b03636; --te-ok-fondo: rgba(31, 122, 77, .10); --te-aviso-fondo: rgba(138, 100, 22, .12); --te-error-fondo: rgba(176, 54, 54, .10); /* Las series de los graficos, en su paso para fondo claro (ver el bloque oscuro). */ --te-serie-1: #4273b0; --te-serie-2: #c79d53; --te-serie-3: #68559b; --te-serie-4: #65b282; --te-serie-5: #9c522e; --te-serie-6: #029393; --te-serie-7: #56660e; --te-serie-8: #d5819c; --te-plano-lienzo: #ffffff; --te-plano-rejilla: rgba(28, 33, 38, .06); --te-plano-mesa: #9a7a52; --te-plano-mesa-borde: #6f5638; --te-plano-silla: #c9b08a; --te-plano-hamaca: #d98f8f; --te-plano-hamaca-borde: #a95c5c; --te-plano-seto: #6c9f63; --te-plano-muro: #59616a; --te-plano-piscina: rgba(47, 115, 154, .22); --te-plano-piscina-borde: #2f739a; --te-plano-etiqueta: #1c2126; } /* ── TIPOGRAFIA: una familia y SEIS tamaños ─────────────────────────────── */ :root { /* Pila del sistema: se ve nativo en cada maquina y no depende de que Calibri o Verdana esten instaladas, que en un TPV con Windows pelado no siempre lo estan — y cuando falta, el navegador cae en Times y canta muchisimo. */ --te-tipo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --te-tipo-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; /* La escala. SEIS tamaños para toda la aplicacion, en rem y con un nombre que dice PARA QUE sirve cada uno, no cuanto mide. Si alguien necesita un septimo, casi siempre es que esta usando el que no toca. */ --te-tam-micro: .69rem; /* pies de pagina, avisos legales */ --te-tam-menor: .78rem; /* datos densos: celdas de rejilla, cabeceras */ --te-tam-base: .86rem; /* TODO lo demas: etiquetas, campos, botones */ --te-tam-mayor: .95rem; /* subtitulos, titulos de seccion */ --te-tam-titulo: 1.15rem; /* el titulo de la pantalla */ --te-tam-cifra: 1.6rem; /* los numeros grandes del panel de control */ /* Grosores: dos. Ni light, ni semibold, ni 800. */ --te-peso: 400; --te-peso-fuerte: 600; --te-alto-linea: 1.45; /* ── Geometria ──────────────────────────────────────────────────────── */ --te-radio: 6px; --te-radio-corto: 3px; --te-alto-control: 34px; /* alto comun de campos y botones */ --te-tam-casilla: 16px; /* casilla y radio: el MISMO tamaño los tres tipos */ --te-col-etiqueta: 132px; /* columna de etiquetas de los mantenimientos */ --te-tam-icono: 20px; /* TODOS los iconos del programa miden esto */ /* ── Ritmo. Todo el espaciado sale de aqui ──────────────────────────── */ --te-hueco-xs: 4px; --te-hueco-s: 8px; --te-hueco-m: 14px; --te-hueco-l: 22px; --te-hueco-xl: 34px; } /* ── TIEMPOS ──────────────────────────────────────────────────────────────── */ /* Lo que espera una persona se escribe en SEGUNDOS, y la unidad va en el valor. */ :root { /* Cuanto tarda en aparecer el "Actualizando datos". Jose, 02/09/2026: si la operacion dura menos que esto, el aviso no aporta nada y hace que los movimientos parezcan menos instantaneos. Ver te.componentes.css. */ --te-espera-aviso: 1s; }