/* ============================================================= LA PALETA DE THERESA — UNA SOLA, PARA OPS Y PARA RRHH. Rubén, 2026-09-27: «la paleta de colores de OPS pasa a ser la paleta oficial de todo, también para RRHH. Todo tiene que verse como operaciones: ese gris, el azul, y luego pequeños toques en el verde y el rosa». Hasta hoy RRHH tenía la suya (`hr_theresa.css`, una copia vieja de `theresa.css` con grises cálidos y sin azul, menta ni rosa) y el mismo producto parecía dos. Por eso vive AQUÍ y en ningún otro sitio: lo importan `theresa.css` (OPS, manager, escritorio del empleado, tenant, supervisor, ultra-admin) y `hr_theresa.css` (la app del empleado). Cambiar un color es cambiarlo aquí. Cómo se usa (`docs/biblia/01-reglas.md` §D): fondos, tarjetas, bordes --c-bg · --c-surface · --c-surface2 · --c-border texto --c-text · --c-text2 · --c-text3 lo principal --c-azul · --c-azul-soft toques --c-menta (lo que va bien) · --c-rose (lo que falla) ============================================================= */ :root { /* Claro: fondo gris, tarjetas blancas */ /* LOS CUATRO TAMAÑOS DE LETRA DE TODA LA APP (Rubén, 2026-10-12: «quiero solo 4 tamaños distintos de letras en RRHH y OPS, móvil y escritorio; solo una o dos tipografías»). Ningún otro tamaño: título · sección · texto · pequeño. El escritorio los escala a todos igual (un solo zoom, 0,75). La tipografía es UNA, Manrope; las cifras que deben cuadrar, con `tabular-nums`. */ --t1: 28px; --t2: 19px; --t3: 16px; /* el texto; 16 y no 15: por debajo, el iPhone amplía la página al tocar un campo */ --t4: 13px; --fuente: 'Manrope', system-ui, sans-serif; /* LA FLECHA DE VOLVER Y LA EQUIS DE CERRAR, UN SOLO TAMAÑO EN TODA LA APP (Rubén, 2026-10-18: «reducción 10 % tamaño flecha para atrás y símbolo x, en móvil y PC»). El 12-10 quedaron en 39 px el círculo y 17 el icono (01 §D: los de una página, en la misma escala), pero cada pantalla seguía con el suyo: había de 30 a 46 px. Ahora todos leen estos: 35 y 15 (un 10 % menos), y el pequeño (la ficha estrecha, un aviso dentro de una hoja), 30. Lo pinta `.fl-redondo` (`hoja.css`); las piezas que no lo son, con estas mismas medidas. */ --redondo: 35px; --redondo-peq: 30px; --redondo-ico: 15px; --c-bg: #edf0f4; /* un punto más hondo (2026-10-12): la ficha blanca se separa del fondo */ --c-surface: #ffffff; --c-surface2: #eef0f3; --c-border: #e5e7eb; --c-rivet: #d3d6db; --c-text: #1f2733; --c-text2: #6b7280; --c-text3: #9aa1ad; /* ── La marca (los ÚNICOS acentos) ── */ --c-rose: #fa7782; /* rosa coral */ --c-rose-soft: rgba(250, 119, 130, .14); --c-menta: #50b9bc; /* menta */ --c-menta-soft: rgba(80, 185, 188, .14); --c-azul: #5b7a99; /* azul */ --c-azul-soft: rgba(91, 122, 153, .14); /* EL TEXTO SOBRE SU TINTE (una pastilla «Aprobada» sobre --c-menta-soft). No son colores nuevos: son la marca mezclada con el color del texto, como hace OPS con sus estados (fondo claro teñido, letra oscura del mismo tono). Así se lee, y en oscuro se aclara sola porque --c-text se aclara. */ --c-menta-tx: color-mix(in srgb, var(--c-menta) 45%, var(--c-text)); --c-rose-tx: color-mix(in srgb, var(--c-rose) 55%, var(--c-text)); --c-azul-tx: color-mix(in srgb, var(--c-azul) 70%, var(--c-text)); /* Heredados de OPS. Siguen aquí porque hay pantallas que los leen, pero no son para lo nuevo: el principal es el azul y los avisos se dicen con palabras. */ --c-accent: #cc1010; --c-pri: #1f2733; --c-pri-fg: #ffffff; --c-ok: #186018; --c-warn: #a05010; --c-err: #c01010; --c-info: #105098; --c-ok-bg: #e8f3e8; --c-warn-bg: #fff0e0; --c-err-bg: #fde8e8; --c-info-bg: #e0eaff; /* LOS COLORES DEL REGISTRO HORARIO, para su gráfica (Rubén, 2026-10-12: «usa los mismos colores que hay en theresa rrhh en el export de horarios»). El Excel de Inspección pinta cada día con un tinte pálido: verde si cuadra, ámbar si se desvía, rojo si no fichó y azul si estaba de vacaciones o de baja. Estos son esos mismos colores con fuerza de barra, y SOLO para la línea de tiempo de los fichajes (la ficha de la persona, P1-47): trabajando, en pausa, sin fichar y ausente. */ --c-reg-trabajo: #5cb87a; --c-reg-pausa: #f2c14e; --c-reg-falta: #e57373; --c-reg-ausencia: #64a8e8; /* LOS ESTADOS DE UN DÍA DE UNA PERSONA, IGUALES PARA EL DUEÑO, EL ENCARGADO Y EL EMPLEADO (Rubén, 2026-10-20: «antes de eso ya estaba todo bien, vacaciones era color amarillo en owner y employee; ausencia justificada era verde oscuro… los colores de ahora no son válidos»; y «el dueño tiene que tener los mismos colores que employee, yo solo cambié turquesa a azul OPS, pero un agente al poner las plantillas nuevas de OPS cambió también los colores»). Son los del calendario del empleado hasta el 2026-09-27, con el único cambio de Rubén: el turno, del turquesa al azul de la marca. · turno, azul; vacaciones, amarillo; baja médica (incapacidad temporal), rojo; · cita médica, permiso retribuido y ausencia justificada, verde oscuro; · falta (no vino), rosa; lo pedido sin aprobar, discontinuo en azul; festivo, gris. Los pintan el calendario de la persona (móvil y escritorio), el año de Ausencias de su ficha y el calendario del dueño y del encargado. Qué estado tiene un día lo decide `ficha_empleado.ESTADOS_DEL_DIA`. NO cambian con el tema: ninguno apunta a una variable que el oscuro redefina (así salió el turquesa del 17-10). Lo vigila `test_calendario_del_empleado`. */ --c-amarillo: #f0a030; --c-amarillo-tx: #9a6a06; --c-rojo: #dc2626; --c-rojo-tx: #b91c1c; --c-verde: #16a34a; --c-verde-tx: #15803d; --c-dia-turno: var(--c-azul); --c-dia-vac: var(--c-amarillo); --c-dia-vac-tx: var(--c-amarillo-tx); --c-dia-vac-fg: #1f2733; /* la letra sobre el día amarillo lleno: oscura en los dos temas */ --c-dia-baja: var(--c-rojo); --c-dia-baja-tx: var(--c-rojo-tx); --c-dia-baja-fg: #ffffff; /* la letra sobre el día rojo o verde lleno: blanca en los dos temas */ --c-dia-aus: var(--c-verde); --c-dia-aus-tx: var(--c-verde-tx); --c-dia-aus-fg: #ffffff; --c-dia-falta: var(--c-rose-tx); --c-dia-pedido: var(--c-azul); --c-dia-festivo: var(--c-text3); /* LOS ACENTOS VIEJOS DE RRHH, AHORA ALIAS DE LA MARCA. El turquesa era su color principal (botones, pestañas, degradados): en OPS lo principal es el azul. Así cualquier pantalla de RRHH que aún los nombre se pinta con la paleta. */ --c-teal-bright: var(--c-azul); --c-teal: var(--c-azul); --c-teal-dark: var(--c-azul); --c-blue-metal: var(--c-azul); --c-blue-soft: var(--c-azul); --gradient-cta: var(--c-azul); --glow-teal: none; --glow-blue: none; /* LOS DEGRADADOS DE LA MARCA (Rubén, 2026-09-27, «INICIO OPS comun», regla 1: «se añade el degradado en los iconos de color azul, verde y rosa de la paleta de OPS como en los mock up; aplica a toda la aplicación»). No son colores nuevos: cada uno es su color de marca, aclarado arriba con blanco y oscurecido abajo con la tinta del texto claro. Se usan en lo principal (botón, píldora activa, tarjeta de cifras) y en los tres botones redondos del Inicio; nunca en un fondo de página. */ --c-azul-borde: var(--c-azul); /* el borde de lo que pinta --g-azul; en oscuro, el aro del cristal */ --c-tinta: #1f2733; /* = --c-text del modo claro; fija, para que en oscuro no aclare */ --g-azul: linear-gradient(165deg, color-mix(in srgb, var(--c-azul) 58%, #fff) 0%, var(--c-azul) 52%, color-mix(in srgb, var(--c-azul) 74%, var(--c-tinta)) 100%); --g-menta: linear-gradient(165deg, color-mix(in srgb, var(--c-menta) 52%, #fff) 0%, var(--c-menta) 55%, color-mix(in srgb, var(--c-menta) 82%, var(--c-tinta)) 100%); --g-rose: linear-gradient(165deg, color-mix(in srgb, var(--c-rose) 58%, #fff) 0%, var(--c-rose) 55%, color-mix(in srgb, var(--c-rose) 86%, var(--c-tinta)) 100%); /* Sombras de la piel de las fotos: la tarjeta flota poco; lo azul, un poco más. */ --sombra-card: 0 12px 30px rgba(31, 39, 51, .08), 0 1px 3px rgba(31, 39, 51, .06); --sombra-azul: 0 12px 24px color-mix(in srgb, var(--c-azul) 34%, transparent); --sombra-menta: 0 12px 24px color-mix(in srgb, var(--c-menta) 34%, transparent); --sombra-rose: 0 12px 24px color-mix(in srgb, var(--c-rose) 34%, transparent); /* EL CRISTAL (Rubén, 2026-10-03, punto 43: «el efecto translúcido glassy que tiene Apple ahora, algo más crema, no tan plano»; y por la noche: «no veo el efecto glassy»). No son colores nuevos ni se toca el fondo de la app (Rubén, 14:58: «¿has tocado algo de un fondo en la aplicación móvil?… no tocar nada de colores»): es la tarjeta (--c-surface) hecha cristal. Lo usa `piel.css` (§ El cristal), solo en el móvil. · la CREMA: blanca casi opaca arriba y dejando pasar abajo (--vidrio-alto → -bajo); · el REFLEJO de la esquina de arriba (--vidrio-brillo) y el FILO de luz; · el GROSOR: un poco de azul por dentro, abajo, y una sombra azul difusa debajo, que es lo que separa un cristal de una tarjeta blanca sobre gris. */ --vidrio-alto: color-mix(in srgb, var(--c-surface) 92%, transparent); --vidrio-bajo: color-mix(in srgb, var(--c-surface) 56%, transparent); --vidrio-brillo: rgba(255, 255, 255, .72); --vidrio-borde: rgba(255, 255, 255, .9); --vidrio-denso: color-mix(in srgb, var(--c-surface) 66%, transparent); /* Las hojas y ventanas llevan TEXTO encima de otro texto. Se ve la página detrás porque su fondo oscuro ya la DESENFOCA (--vidrio-velo): así, aunque el navegador no desenfoque la hoja mientras entra (WebKit, en una hoja animada), lo de detrás llega borroso y no se cruza con el texto. */ --vidrio-hoja-alto: color-mix(in srgb, var(--c-surface) 88%, transparent); --vidrio-hoja-bajo: color-mix(in srgb, var(--c-surface) 76%, transparent); --vidrio-filtro: saturate(190%) blur(26px); --vidrio-velo: saturate(140%) blur(7px); --vidrio-filo: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .4), inset 0 -20px 30px -26px color-mix(in srgb, var(--c-azul) 60%, transparent); --vidrio-sombra: 0 1px 2px rgba(31, 39, 51, .05), 0 12px 26px -12px rgba(31, 39, 51, .18), 0 28px 50px -28px color-mix(in srgb, var(--c-azul) 65%, transparent); /* EL CRISTAL DE LA HOJA DE THERESA (la que se abre al pulsar el botón de hablar). Rubén, 2026-10-05: las tarjetas de Notificaciones y de Llamadas, en el móvil y en el PC, llevan «ese mismo efecto glassy». Una receta, tres sitios: `_orbe.html` y `piel.css` (§ El cristal de la hoja de Theresa). El tinte va en un `::before` con el borde redondeado y SIN `filter`: con `blur` Safari no lo recortaba y el azul de la esquina de arriba a la izquierda se salía de la hoja. */ --cristal-fondo: linear-gradient(150deg, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .14) 45%, rgba(255, 255, 255, .24) 100%); --cristal-filtro: blur(26px) saturate(220%); --cristal-borde: rgba(255, 255, 255, .6); --cristal-filo: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .3), inset 0 0 34px rgba(255, 255, 255, .16); --cristal-tinte: radial-gradient(42% 46% at 50% 82%, color-mix(in srgb, var(--c-rose) 70%, transparent) 0%, transparent 100%), radial-gradient(55% 50% at 0% 0%, color-mix(in srgb, var(--c-azul) 55%, transparent) 0%, transparent 100%), radial-gradient(45% 45% at 100% 30%, color-mix(in srgb, var(--c-menta) 45%, transparent) 0%, transparent 100%); } [data-theme="dark"] { /* La letra de las pastillas del día (vacaciones, baja, ausencia), más clara para leerse en oscuro. El color de cada día (`--c-amarillo`, `--c-rojo`, `--c-verde`) es el mismo en los dos temas. */ --c-amarillo-tx: #f3b552; --c-rojo-tx: #f87171; --c-verde-tx: #4ade80; --c-bg: #161a1e; --c-surface: #1d2229; --c-surface2: #242c35; --c-border: #303a46; --c-rivet: #3a4552; --c-text: #dddede; --c-text2: #878992; --c-text3: #525462; --c-accent: #ff2424; --c-pri: #dddede; --c-pri-fg: #161a1e; --c-ok: #2aba2a; --c-warn: #e08828; --c-err: #ff2828; --c-info: #4088e0; --c-ok-bg: rgba(42,186,42,.13); --c-warn-bg: rgba(224,136,40,.13); --c-err-bg: rgba(255,40,40,.13); --c-info-bg: rgba(64,136,224,.13); --c-reg-trabajo: #4aa86a; --c-reg-pausa: #d9a93a; --c-reg-falta: #d06060; --c-reg-ausencia: #4f8fd0; --sombra-card: 0 10px 28px rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .2); --vidrio-alto: color-mix(in srgb, var(--c-surface) 86%, transparent); --vidrio-bajo: color-mix(in srgb, var(--c-surface) 62%, transparent); --vidrio-brillo: rgba(255, 255, 255, .07); --vidrio-borde: rgba(255, 255, 255, .09); --vidrio-filo: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .04); --vidrio-sombra: 0 14px 34px rgba(0, 0, 0, .34), 0 1px 2px rgba(0, 0, 0, .2); --cristal-fondo: linear-gradient(150deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .10) 100%); --cristal-borde: rgba(255, 255, 255, .24); --cristal-filo: inset 0 1.5px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(255, 255, 255, .08); } /* ============================================================= EL CRISTAL DE TODA LA APP (Rubén, 2026-10-25, con dos fotos: la clara del Inicio de OPS en el iPhone y la oscura de Agente › Configuración). «Quiero cambiar el modo oscuro y la versión clara, en escritorio y móvil, en Operaciones y en Recursos Humanos, para todo el mundo, todas las pantallas. Incluye cambiar el fondo y el color de relleno de cada tarjeta. En la clara, como cristal transparente; en la oscura, como la foto. Lo más cristal y transparente posible, como Apple y iOS 27. Lo que hay DENTRO de las tarjetas no lo cambies: solo el fondo y el relleno. Y la bola verde del fondo, fuera.» Cómo: la app entera (y solo la app: la web de theresa.es no lleva `data-theme` en su y sigue con los de arriba) lee AQUÍ otro fondo y otra superficie. `--c-surface` deja de ser un color opaco y pasa a ser un velo blanco: en claro, un 40 % sobre el gris azulado de la foto; en oscuro, un 5,5 % sobre el casi negro de la foto (#07090e: no es negro puro). Así TODA tarjeta, campo, pastilla y fila de la app —cientos de clases, en OPS, RRHH y el empleado— se vuelve cristal sin tocarlas una a una: su relleno es el velo, su filo lo pone `--sombra-card` (una línea de luz arriba y un aro blanco por dentro) y las letras siguen siendo las de siempre. Lo que NO es cristal (01-reglas §D, Rubén 2026-10-13: «navs y desplegables, todos de color sólido; solo el footer nav transparente»): la cabecera, el rail, la columna, los cajones, las hojas, los menús, las ventanas y todo lo pegajoso que lleva texto pasando por debajo. Esas piezas reciben `--c-surface: var(--c-solido)` en la lista de abajo: el MISMO color que el cristal sobre el fondo, pero opaco. Una pieza nueva que flote sobre texto se añade a esa lista. Y nada de colores detrás: la media luna menta del móvil (`.pz-luna`) y el aura del Inicio de OPS en oscuro se quitaron ese día (Rubén: «hay como una bola verde: eso lo quiero eliminar»). ============================================================= */ html[data-theme] { --c-bg: #e9edf2; /* el fondo de la foto clara */ --c-solido: #f3f5f8; /* el cristal sobre el fondo, hecho opaco */ --c-surface: rgba(255, 255, 255, .40); /* el velo: la tarjeta */ --c-surface2: rgba(31, 39, 51, .055); /* lo hundido dentro de una tarjeta */ --c-border: rgba(31, 39, 51, .08); --c-rivet: rgba(31, 39, 51, .14); --sombra-card: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 1px 2px rgba(31, 39, 51, .04), 0 14px 34px -12px rgba(31, 39, 51, .14); --sombra-pildora: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .45), 0 4px 14px rgba(31, 39, 51, .06); --vidrio-denso: rgba(255, 255, 255, .5); /* la barra de abajo: velo + desenfoque */ } html[data-theme="dark"] { --c-bg: #07090e; /* el fondo de la foto oscura */ --c-solido: #1b1e23; /* el cristal sobre el fondo, hecho opaco */ --c-surface: rgba(255, 255, 255, .08); /* Rubén, 2026-10-26: «un poco más claritas, si no no se aprecia» (era .055) */ --c-surface2: rgba(255, 255, 255, .11); --c-border: rgba(255, 255, 255, .11); --c-rivet: rgba(255, 255, 255, .18); --sombra-card: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -14px rgba(0, 0, 0, .7); --sombra-pildora: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .4); --vidrio-denso: rgba(14, 17, 22, .62); /* la barra de abajo: como la de la foto, oscura y desenfocando lo de debajo */ /* El cristal de las tarjetas del Inicio da EL MISMO tono que `--c-surface` (Rubén, 2026-10-26: «todas las tarjetas el mismo color»): hasta hoy el cristal salía más oscuro (.07→.03) que el color liso (.085) y convivían dos. */ --vidrio-alto: rgba(255, 255, 255, .095); --vidrio-bajo: rgba(255, 255, 255, .065); --vidrio-borde: rgba(255, 255, 255, .12); /* EL RELLENO DE LO PRINCIPAL Y DE LO SELECCIONADO, EN OSCURO, ES EL «VOZ» DE LA MAQUETA (Rubén, 2026-10-26, con la foto de `docs/diseno/mockups/cristal-oscuro-agente-movil.html`: «ves el relleno, el brillo, lo translúcido; todos los botones, móvil y escritorio; la píldora seleccionada, exactamente así, y no azul»). Es su `.seg span.on`: velo blanco de arriba abajo, filo de luz arriba y aro fino. Todo botón principal o píldora encendida de la app pinta `--g-azul` (y `--c-azul-borde` su borde): así cambian todos a la vez. El filo y el aro los pone la lista de `piel.css` (§ El «Voz» de la maqueta). */ --g-azul: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); --sombra-azul: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .1); --c-azul-borde: rgba(255, 255, 255, .1); } /* Lo sólido: la MISMA superficie, opaca. Cabecera, rail y columna; cajones, hojas, menús, ventanas y avisos; y lo pegajoso con texto debajo (cabeceras de la agenda, pies de hoja). */ html[data-theme] :is( .pz-cab, .ai-rail, .ai-panel, .dk-sidebar, .mg-rail, .mg-panel, .tn-rail, .tn-panel, .nav, .nav__mobile, .ux .barra, .cj-top, .cj-pie, .pz-hoja__panel, .pz-hoja--rrhh, .ai-sheet__panel, .ai-pop, .ai-modal__box, .bs-sheet, .fi-sheet__content, .fi-drawer, .mg-modal__content, .tn-modal__content, .vac-emp-modal__content, .ua-modal__box, .sup-modal__box, .rd-back > .rd, .rd-overlay > .la-det, .rd-overlay > .la-new, .incident-panel__content, .mg-drawer__panel, .tn-drawer__panel, .cal-resumen-sheet__panel, .pf-menu__pop, .pz-elige__lista, .cm-menu, .dk-menu-card, .ds-doc-row__menu-dropdown, .mg-toast, .bil-modal, .rot-modal, .liq-modal__inner, .vp-modal, .fl-hoja__panel, .ks-drop__inner, .ux .menu-hoja, .lc-sel, .dcb-modal, dialog, [role="dialog"], [popover], .la-cols-head, .la-groups, .am-ch, .wk-headrow, .rd-pie, .io-pie, .cm-previa__cab, .cal-summary, .mg-home-dsk__estado, .fest-emp-header, .fest-emp-name, .sup-detail__side, .ini-eje, .ca-papel ) { --c-surface: var(--c-solido); } /* LAS TARJETAS, TRANSPARENTES EN OSCURO (Rubén, 2026-10-26: «esos cards eran perfectos, no los toques»). Son como estaban con el fondo de estrellas, sin las estrellas y sin nada más detrás: las cajas de página van transparentes para que el cristal de la tarjeta caiga sobre el fondo de la app y no sobre otra caja. */ html[data-theme="dark"] :is(.ai-shell, .dk-shell, .mg-shell, .tn-shell, .fi-app, .fi-main, .dk-main, .mg-content.dk-main, .tn-content.dk-main) { background: transparent !important; } /* Hasta el 2026-10-25 las tarjetas del Inicio de RRHH (`.ho-card`) llevaban en oscuro su propio velo (del 16 al 5 %) con un filo rosa abajo a la derecha (Rubén, 2026-10-04, con la foto de una carpeta de iOS). Ese día el cristal pasó a ser el de TODA la app (arriba, «El cristal de toda la app») y leen los mismos tokens que las demás: ninguna tarjeta se distingue de otra por su cristal. */ /* LA CAJA DENTRO DE UNA TARJETA DE GOOGLE (Reputación y Reservas desde Google). Del 13-10 al 26-10 fue BLANCA en oscuro; Rubén, 2026-10-26: «cambiar el blanco por el color que usan el resto de tarjetas». Ahora es el mismo cristal que cualquier tarjeta, en los dos temas. */ html[data-theme] .caja-blanca { background: var(--c-surface); box-shadow: var(--sombra-card); }