/* ============================================================================ temas.css · LorryWorks · los tres temas que NO son el de obra ---------------------------------------------------------------------------- Cuatro modos, del más oscuro al más claro y todos suaves: obra el de siempre fondo #12160f (no está aquí: es el :root de cada panel, sin tocar) penumbra oscuro descansado fondo #232821 papel claro cálido fondo #e8e2d5 claro de día, para el sol fondo #efece3 Ni negro puro ni blanco puro en ninguno: las tarjetas del claro son #fbf9f4, no #ffffff, que es lo que deslumbraba al venir del oscuro. Manda por especificidad, no por orden: html[data-tema="x"] (0,1,1) pesa más que :root (0,1,0). Si este fichero no se carga, todo se ve como siempre. Los contrastes están MEDIDOS, no mirados. Todos los textos pasan AA (4,5:1) sobre su fondo. Donde se ha tenido que cambiar un color respecto al oscuro, está dicho al lado. ========================================================================== */ /* ─────────────────── PENUMBRA · oscuro, pero descansado ─────────────────── */ html[data-tema="penumbra"]{ --bg:#232821; --panel:#2c322a; --panel2:#343b31; --line:#454d40; --ink:#eef2e6; --dim:#c2cbb6; --muted:#98a28c; --amber:#e0a83a; --amber-d:#8a6716; --green:#5fae5f; --red:#e88a6b; /* el #d1603d del oscuro aquí solo daba 3,4:1 */ --red-bg:#3a251c; --focus:#e0a83a; --surface:#2c322a; --surface2:#363d33; --border:#454d40; --text:#eef2e6; --accent:#5d7a33; --accent2:#4a7a33; --accent-soft:#333d29; --warn:#e88a6b; --ok:#25401f; --oktx:#8fd894; --warnbg:#3a2a22; --warntx:#ffab99; --tx-acento:#d5e6b8; --tx-acento2:#a9c98c; --tx-aviso:#ffd98a; --tx-ok:#7fe0a0; --tx-mal:#ffb9a0; --tx-tenue:#a3ad96; } html[data-tema="penumbra"] body{ background:var(--bg); color:var(--ink); } /* ─────────────────── PAPEL · claro cálido, sin fogonazo ─────────────────── */ html[data-tema="papel"]{ --bg:#e8e2d5; --panel:#f3eee2; --panel2:#eae4d7; --line:#d8d0be; --ink:#2b2a22; --dim:#57534a; --muted:#615c50; --amber:#96601a; --amber-d:#7a4d12; --green:#2d6f33; --red:#a83f2c; --red-bg:#f6e3dd; --focus:#96601a; --surface:#f3eee2; --surface2:#e4ddcd; --border:#d8d0be; --text:#2b2a22; --accent:#4a6a26; --accent2:#3f7a2f; --accent-soft:#e6e6d2; --warn:#a83f2c; --ok:#e2ecd9; --oktx:#256b2a; --warnbg:#f6e3dd; --warntx:#9c3a26; --tx-acento:#3d5a1f; --tx-acento2:#4a6a26; --tx-aviso:#7d5a11; --tx-ok:#256b2a; --tx-mal:#9c3a26; --tx-tenue:#615c50; } html[data-tema="papel"] body{ background:var(--bg); color:var(--ink); } /* ─────────────────── CLARO · de día, para leer al sol ─────────────────── */ html[data-tema="claro"]{ --bg:#efece3; --panel:#fbf9f4; --panel2:#f4f1e8; --line:#ded9cc; --ink:#23281f; --dim:#4d5545; --muted:#646d59; --amber:#a1660f; --amber-d:#7d4f0b; --green:#2f7d32; --red:#b3402a; --red-bg:#fbe9e5; --focus:#a1660f; --surface:#fbf9f4; --surface2:#eeece4; --border:#ded9cc; --text:#23281f; --accent:#4a6a26; --accent2:#3f7a2f; --accent-soft:#eef3e4; --warn:#b3402a; --ok:#e6f3e2; --oktx:#256b2a; --warnbg:#fbe9e5; --warntx:#a53a25; --tx-acento:#3d5a1f; --tx-acento2:#4a6a26; --tx-aviso:#8a5d12; --tx-ok:#256b2a; --tx-mal:#a53a25; --tx-tenue:#646d59; } html[data-tema="claro"] body{ background:var(--bg); color:var(--ink); } /* ═════════ lo que cambia en los DOS temas claros ═════════ En oscuro, lo que lleva ámbar de fondo va con texto casi negro. Con el ámbar tostado de los temas claros eso baja de 3,5:1, así que ahí el texto es blanco (5,3:1 en papel, 4,8:1 en claro). */ html[data-tema="papel"] ::selection, html[data-tema="claro"] ::selection, html[data-tema="papel"] .mark, html[data-tema="claro"] .mark, html[data-tema="papel"] .seg.on, html[data-tema="claro"] .seg.on, html[data-tema="papel"] .toggle.on, html[data-tema="claro"] .toggle.on, html[data-tema="papel"] .btn, html[data-tema="claro"] .btn, html[data-tema="papel"] .ofl, html[data-tema="claro"] .ofl, html[data-tema="papel"] .rowbtn.on, html[data-tema="claro"] .rowbtn.on, html[data-tema="papel"] .rowbtn.pri:hover, html[data-tema="claro"] .rowbtn.pri:hover, html[data-tema="papel"] .minitag.j, html[data-tema="claro"] .minitag.j, html[data-tema="papel"] .atajos button.on, html[data-tema="claro"] .atajos button.on, html[data-tema="papel"] .capa .mandos button.pri, html[data-tema="claro"] .capa .mandos button.pri, html[data-tema="papel"] .logo .env, html[data-tema="claro"] .logo .env{ color:#fff; } /* el botón secundario de la app hereda color:#fff de .btn y se quedaba blanco sobre blanco */ html[data-tema="papel"] .btn.sec, html[data-tema="claro"] .btn.sec{ color:var(--text); } /* las cajas de aviso llevaban fondo y color escritos a fuego */ html[data-tema="papel"] .note.err{ background:#f6e3dd; color:#8a3421; border-color:#e6c4ba; } html[data-tema="claro"] .note.err{ background:#fbe9e5; color:#8f2f1c; border-color:#f0c8bf; } html[data-tema="papel"] .note.ok{ background:#e2ecd9; color:#22602a; border-color:#c6d8b8; } html[data-tema="claro"] .note.ok{ background:#e6f3e2; color:#256b2a; border-color:#c3e0bb; } html[data-tema="papel"] .warnbox{ background:#f3e7cc; border-color:#ddc99b; color:#75530f; } html[data-tema="claro"] .warnbox{ background:#fdf4e0; border-color:#e9d39a; color:#7d5a11; } html[data-tema="papel"] .envpanel .avi.malo, html[data-tema="papel"] .msg.err{ background:#f6e3dd; color:#8a3421; } html[data-tema="claro"] .envpanel .avi.malo, html[data-tema="claro"] .msg.err{ background:#fbe9e5; color:#8f2f1c; } html[data-tema="papel"] .envpanel .avi.ojo, html[data-tema="papel"] .msg.warn{ background:#f3e7cc; color:#75530f; } html[data-tema="claro"] .envpanel .avi.ojo, html[data-tema="claro"] .msg.warn{ background:#fdf4e0; color:#7d5a11; } html[data-tema="papel"] .envpanel .avi.bueno, html[data-tema="papel"] .envpanel .avi.bien, html[data-tema="papel"] .msg.ok{ background:#e2ecd9; color:#22602a; } html[data-tema="claro"] .envpanel .avi.bueno, html[data-tema="claro"] .envpanel .avi.bien, html[data-tema="claro"] .msg.ok{ background:#e6f3e2; color:#256b2a; } /* el gráfico: el punto se recorta contra la tarjeta, no contra el fondo */ html[data-tema="penumbra"] .chart .punto, html[data-tema="papel"] .chart .punto, html[data-tema="claro"] .chart .punto{ stroke:var(--panel); } html[data-tema="papel"] .chart g.fila:hover .bar, html[data-tema="papel"] .chart .toque:hover+.punto{ fill:#7a4d12; } html[data-tema="claro"] .chart g.fila:hover .bar, html[data-tema="claro"] .chart .toque:hover+.punto{ fill:#7d4f0b; } /* ═════════ fondos que estaban escritos a fuego en los paneles ═════════ [24/08/2026] Los campos de escribir tenían el fondo casi negro (#0e120b) con el texto en var(--ink): en los temas claros eso quedaba NEGRO SOBRE NEGRO y no se veía lo que se escribía. Lo mismo con las píldoras y las filas de detalle. Aquí se les da su equivalente claro; en penumbra solo se sube el negro a un tono de la casa. */ /* --- los campos --- */ html[data-tema="penumbra"] input[type=text], html[data-tema="penumbra"] input[type=password], html[data-tema="penumbra"] input:not([type]), html[data-tema="penumbra"] select, html[data-tema="penumbra"] .acceso input{ background:#1b201a; color:var(--ink); } html[data-tema="papel"] input[type=text], html[data-tema="papel"] input[type=password], html[data-tema="papel"] input:not([type]), html[data-tema="papel"] select, html[data-tema="papel"] .acceso input{ background:#fbf8f0; color:var(--ink); border-color:var(--line); } html[data-tema="claro"] input[type=text], html[data-tema="claro"] input[type=password], html[data-tema="claro"] input:not([type]), html[data-tema="claro"] select, html[data-tema="claro"] .acceso input{ background:#ffffff; color:var(--ink); border-color:var(--line); } /* los de fecha, número y correo no llevaban tipo en la regla original */ html[data-tema="papel"] input[type=date], html[data-tema="papel"] input[type=email], html[data-tema="papel"] input[type=number], html[data-tema="papel"] textarea{ background:#fbf8f0; color:var(--ink); border-color:var(--line); } html[data-tema="claro"] input[type=date], html[data-tema="claro"] input[type=email], html[data-tema="claro"] input[type=number], html[data-tema="claro"] textarea{ background:#ffffff; color:var(--ink); border-color:var(--line); } html[data-tema="penumbra"] textarea{ background:#1b201a; color:var(--ink); } /* --- filas de detalle y píldoras de grupo --- */ html[data-tema="penumbra"] table.grid tr.det td{ background:#1b201a; } html[data-tema="papel"] table.grid tr.det td, html[data-tema="claro"] table.grid tr.det td{ background:var(--panel2); } html[data-tema="penumbra"] .pill.grp{ background:#232821; } html[data-tema="papel"] .pill.grp, html[data-tema="claro"] .pill.grp{ background:var(--panel2); } /* --- las etiquetas de estado: verde y ámbar en claro, no en oscuro --- */ html[data-tema="papel"] .fst.si, html[data-tema="papel"] .rol.jefe, html[data-tema="papel"] .cfgpill.si, html[data-tema="papel"] .hero .badge-jefe{ background:#e2ecd9; color:#22602a; border-color:#c6d8b8; } html[data-tema="claro"] .fst.si, html[data-tema="claro"] .rol.jefe, html[data-tema="claro"] .cfgpill.si, html[data-tema="claro"] .hero .badge-jefe{ background:#e6f3e2; color:#256b2a; border-color:#c3e0bb; } html[data-tema="papel"] .fst.pa, html[data-tema="papel"] .rol.admin, html[data-tema="papel"] .hero .badge-admin, html[data-tema="papel"] .quien .tag.sinapp{ background:#f3e7cc; color:#75530f; border-color:#ddc99b; } html[data-tema="claro"] .fst.pa, html[data-tema="claro"] .rol.admin, html[data-tema="claro"] .hero .badge-admin, html[data-tema="claro"] .quien .tag.sinapp{ background:#fdf4e0; color:#7d5a11; border-color:#e9d39a; } html[data-tema="papel"] .cfgpill.no{ background:#f6e3dd; color:#8a3421; } html[data-tema="claro"] .cfgpill.no{ background:#fbe9e5; color:#8f2f1c; } html[data-tema="papel"] .cfgpill.wait, html[data-tema="claro"] .cfgpill.wait{ background:var(--panel2); color:var(--muted); } html[data-tema="papel"] .aviso{ background:#f6e3dd; color:#8a3421; } html[data-tema="claro"] .aviso{ background:#fbe9e5; color:#8f2f1c; } html[data-tema="papel"] .ico, html[data-tema="claro"] .ico{ background:var(--panel2); } /* ═══════════════════ COBALTO · el vistoso ═══════════════════ Azul grafito con acento agua. Es el único que se aparta de la paleta de obra a propósito: cuando se quiere que la pantalla luzca -una demo, la oficina, una pantalla grande- se nota que es otra cosa. Lo que NO lleva, y es a propósito: nada de cristal esmerilado (backdrop-filter). Se ve muy bien en una captura y va a tirones en un móvil viejo, que es justo donde se usa esto. La profundidad se hace con degradados y un brillo suave, que no cuestan nada. Todos los textos pasan AA, y de largo: el más justo es 6,6:1. */ html[data-tema="cobalto"]{ --bg:#0d1220; --panel:#151d2f; --panel2:#1e2942; --line:#2c3a58; --ink:#eaf0ff; --dim:#c0cde8; --muted:#93a3c2; --amber:#46e0c8; --amber-d:#1f8f7f; --green:#63e08c; --red:#ff8878; --red-bg:#3a2120; --focus:#46e0c8; --surface:#151d2f; --surface2:#1e2942; --border:#2c3a58; --text:#eaf0ff; --accent:#2f6f8f; --accent2:#2b8f7d; --accent-soft:#17273a; --warn:#ff8878; --ok:#123526; --oktx:#8ff0b4; --warnbg:#3a2120; --warntx:#ffb3a3; --tx-acento:#bfe6ff; --tx-acento2:#8fd4ff; --tx-aviso:#ffcf8a; --tx-ok:#8ff0b4; --tx-mal:#ffb3a3; --tx-tenue:#93a3c2; } /* el fondo con profundidad, no un plano */ html[data-tema="cobalto"] body{ background:radial-gradient(1100px 620px at 50% -12%, #1b2a45 0%, #0d1220 62%) fixed, #0d1220; color:var(--ink); } /* las tarjetas, con un filo de luz arriba */ html[data-tema="cobalto"] .card, html[data-tema="cobalto"] .chartbox, html[data-tema="cobalto"] .sheet, html[data-tema="cobalto"] .kpibox, html[data-tema="cobalto"] .arbol, html[data-tema="cobalto"] .tablewrap{ background-image:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 42%); box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px rgba(0,0,0,.28); } /* brillo solo en lo que está activo: el ojo va donde tiene que ir */ html[data-tema="cobalto"] .btn, html[data-tema="cobalto"] .rowbtn.on, html[data-tema="cobalto"] .atajos button.on, html[data-tema="cobalto"] .seg.on, html[data-tema="cobalto"] .toggle.on{ color:#0d1220; box-shadow:0 0 0 1px rgba(70,224,200,.35), 0 6px 18px rgba(70,224,200,.22); } html[data-tema="cobalto"] .mark{ color:#0d1220; box-shadow:0 6px 18px rgba(70,224,200,.25); } html[data-tema="cobalto"] input[type=text], html[data-tema="cobalto"] input[type=password], html[data-tema="cobalto"] input:not([type]), html[data-tema="cobalto"] input[type=date], html[data-tema="cobalto"] input[type=email], html[data-tema="cobalto"] input[type=number], html[data-tema="cobalto"] textarea, html[data-tema="cobalto"] select, html[data-tema="cobalto"] .acceso input{ background:#101728; color:var(--ink); border-color:var(--line); } html[data-tema="cobalto"] table.grid tr.det td{ background:#101728; } html[data-tema="cobalto"] .pill.grp{ background:#1a2438; } html[data-tema="cobalto"] .chart .punto{ stroke:var(--panel); } /* ═══ el cambio de tema, con suavidad en TODOS los modos ═══ Sin esto el salto es un fogonazo. 160 ms es lo justo para que se note que ha cambiado sin que parezca que la pantalla va lenta. */ body, .card, .panel, .sheet, .chartbox, .arbol, .nodo, .hijo, table.grid td, table.grid th, input, select, textarea, .btn, .rowbtn{ transition: background-color .16s ease, border-color .16s ease, color .16s ease; } @media (prefers-reduced-motion: reduce){ body, .card, .panel, .sheet, .chartbox, .arbol, .nodo, .hijo, table.grid td, table.grid th, input, select, textarea, .btn, .rowbtn{ transition:none; } } /* ════════════════════════════════════════════════════════════════════════ [25/08/2026] TINTA ILEGIBLE EN ALGUNOS MODOS Salió al teclear un albarán: el botón «Firmo yo» no se leía. El fallo no era de ese botón, sino de tres costumbres que se repiten por todos los paneles, y las tres se ven igual — texto y fondo que se mueven por separado al cambiar de modo: 1. una variante de botón (.sec, .ghost) que se queda con el color de texto de .btn pero cambia el fondo; 2. un fondo escrito a fuego (un degradado, una barra) debajo de un texto que sí sigue al modo; 3. un color de texto escrito a fuego, pensado para fondo oscuro, en un modo claro. Todo se arregla AQUÍ y por modo, para no tocar el tema «obra», que es el de siempre y el que corre en producción. Comprobado midiendo: 1.985 pares de texto/fondo (los cinco paneles × cinco modos) contra el 4,5:1 de la WCAG AA. El barredor está en /root/status/contraste/ y se vuelve a pasar con: python3 mirar.py /var/www/tpv/html/obrav13.html ══════════════════════════════════════════════════════════════════════ */ /* 1 · Botones secundarios. Cobalto pinta la tinta de .btn casi negra (#0d1220) porque su acento es agua y claro; .sec y .ghost conservan esa tinta pero su fondo es la superficie OSCURA -> negro sobre azul marino, 1,29:1. Es el «Firmo yo». Papel y claro ya tenían el arreglo para .sec, pero no para .ghost, que es el que usan los paneles de escritorio. */ html[data-tema="cobalto"] .btn.sec, html[data-tema="cobalto"] .btn.ghost, html[data-tema="papel"] .btn.ghost, html[data-tema="claro"] .btn.ghost{ color:var(--text); } /* 2 · La tarjeta de bienvenida y la del trabajador, en la app de obra. El degradado va escrito a fuego en verde oscuro, y en los modos claros la tinta es oscura: 1,04:1, o sea invisible del todo. */ html[data-tema="papel"] .hero, html[data-tema="papel"] .quien{ background:linear-gradient(135deg,#eae5d2,#e2ddca); } html[data-tema="claro"] .hero, html[data-tema="claro"] .quien{ background:linear-gradient(135deg,#f2f0e6,#eaece0); } /* 3 · La barra de arriba de los tres paneles de escritorio: fondo rgba(18,22,15,.94), casi opaco y verde oscuro, con la tinta del modo. */ html[data-tema="papel"] header{ background:rgba(243,238,226,.94); } html[data-tema="claro"] header{ background:rgba(251,249,244,.94); } /* 4 · Lo destacado dentro de una caja de aviso: la caja sí cambiaba de color con el modo (más arriba), pero su se quedaba en ámbar pálido. */ html[data-tema="papel"] .warnbox b{ color:#5b3f0a; } html[data-tema="claro"] .warnbox b{ color:#63470c; } /* 5 · Dos sellos de la lista de albaranes con el color escrito a fuego: el «mandado por correo» (verde pálido) y el «Pendiente» de facturar (salmón). El verde no es var(--green): en claro se quedaba en 4,34:1. */ html[data-tema="papel"] .env, html[data-tema="claro"] .env{ color:#26652a; } html[data-tema="papel"] .fst.no, html[data-tema="claro"] .fst.no{ color:var(--warntx); } /* 6 · El botón de aviso en penumbra: ahí el salmón (--warn) es CLARO, y la tinta blanca de .btn se le queda encima a 2,54:1. */ html[data-tema="penumbra"] .btn.warn{ color:#2a1a12; } /* 7 · [26/08/2026] El panel de personal (personalv1.html). Los mismos tres vicios de arriba, en clases nuevas: - .okbox y .c.v llevaban un verde oscuro escrito a fuego (--green-bg) debajo de una tinta que sí sigue al modo: 1,08:1 en claro, o sea nada. - .btn.dang se quedaba con el color:#fff que .btn recibe en los modos claros, sobre su fondo rosa pálido: 1,17:1. Es el caso 1 de siempre. - .hbtn.on (la pestaña elegida) pintaba la tinta a fuego para fondo oscuro, y en papel y claro el ámbar es OSCURO: oscuro sobre oscuro. El fondo va explícito y no por variable a propósito: así se ve aquí de qué color queda cada modo sin tener que seguir la pista de un token. */ html[data-tema="penumbra"] .okbox, html[data-tema="penumbra"] .c.v{ background:#1d2b18; } html[data-tema="cobalto"] .okbox, html[data-tema="cobalto"] .c.v{ background:#16301f; } html[data-tema="papel"] .okbox, html[data-tema="papel"] .c.v{ background:#e4ecdc; } html[data-tema="claro"] .okbox, html[data-tema="claro"] .c.v{ background:#eaf2e4; } /* el verde es el mismo #26652a que ya se usó para el sello «enviado»: var(--green) en claro se queda en 4,34:1 */ html[data-tema="papel"] .c.v, html[data-tema="claro"] .c.v, html[data-tema="papel"] .pill.v, html[data-tema="claro"] .pill.v{ color:#26652a; } html[data-tema="papel"] .btn.dang, html[data-tema="claro"] .btn.dang, html[data-tema="cobalto"] .btn.dang{ color:var(--red); } html[data-tema="papel"] .hbtn.on, html[data-tema="claro"] .hbtn.on{ color:#fff; } /* 8 · [26/08/2026] Los gráficos de ausencias (personalv1.html). Cuatro tonos de serie, y NO son los mismos en claro que en oscuro: son los mismos cuatro colores escalonados para cada fondo, que es como se hace un modo claro de verdad —no dándole la vuelta al oscuro—. Validados los cinco modos con el comprobador: banda de luminosidad, croma, separación para daltonismo (peor par adyacente ΔE 8,4 protanopía / 19,8 a la vista normal) y contraste con el fondo. En papel y claro los tonos bajan de 3:1 contra el papel, y ahí la norma pide "relieve": por eso cada gráfico lleva las cifras escritas y una tabla de datos debajo. */ html[data-tema="papel"] .s1, html[data-tema="claro"] .s1{ --c:#2a78d6; } html[data-tema="papel"] .s2, html[data-tema="claro"] .s2{ --c:#eb6834; } html[data-tema="papel"] .s3, html[data-tema="claro"] .s3{ --c:#1baf7a; } html[data-tema="papel"] .s4, html[data-tema="claro"] .s4{ --c:#eda100; } html[data-tema="papel"] .s0, html[data-tema="claro"] .s0{ --c:#8a9478; } /* 9 · [02/09/2026] La pastilla de estado del panel de pedidos (pedidosv1.html). El mismo vicio del apartado 7, otra vez: --green-bg es un verde OSCURO escrito a fuego que los modos claros no redefinen, así que la pastilla de "Servido" salía tinta oscura sobre fondo oscuro (1,08:1 en claro). --red-bg sí está redefinido en los cinco modos y por eso la de "Cancelado" no daba guerra. Se llama .eped y no .tag a propósito: .tag lo usan otros cuatro paneles y tocarlo aquí les cambiaría el aspecto de rebote. El fondo va explícito y no por variable, como en el 7: así se ve de qué color queda cada modo sin seguir la pista de un token. */ html[data-tema="obra"] .eped.s{ background:#17240f; } html[data-tema="penumbra"] .eped.s{ background:#1d2b18; } html[data-tema="cobalto"] .eped.s{ background:#16301f; } html[data-tema="papel"] .eped.s{ background:#e4ecdc; } html[data-tema="claro"] .eped.s{ background:#eaf2e4; }