/* ============================================================================ SKY TERRA GESTIÓN — tema-oscuro.css Un solo modo oscuro para todo el sistema. Cada módulo nació con su propio :root y sus propios nombres de variable (--ink acá, --tinta allá, --bg y --crema para lo mismo). En vez de reescribir cuatro hojas de estilo, este archivo REDEFINE esas variables con la paleta oscura: como todo el CSS ya usa var(--x), alcanza con cambiar --x. La paleta es la que ya usaba el módulo Obra, que fue el primero en tener modo oscuro: se adopta esa en lugar de inventar otra, así los módulos se ven igual. Se activa de dos formas, iguales en todos lados: · data-tema="oscuro" en → lo eligió la persona · el sistema en oscuro y sin elección → automático Va DESPUÉS de la hoja del módulo, para poder pisarle los valores. ============================================================================ */ /* --- La paleta, una sola vez ---------------------------------------------- */ :root[data-tema="oscuro"] { /* superficies */ --crema: #131E29; --bg: #131E29; --bg-2: #1B2A3B; --bg-3: #223345; --panel: #1B2A3B; --papel: #1B2A3B; --surface: #1B2A3B; --arena: #223345; --gris: #223345; /* tinta */ --ink: #EFEAE1; --tinta: #EFEAE1; --ink-2: #A7B3BF; --ink-3: #8A97A5; /* líneas */ --borde: #2B3F55; --borde-2: #3A4F66; --linea: #2B3F55; --linea-tenue: #223345; --hairline: rgba(255, 255, 255, 0.09); /* marca */ --petroleo: #0F1822; --petroleo-2: #223345; --barra: #0F1822; --dorado: #D4B45E; --dorado-hondo: #C0A04B; --dorado-suave: #33301F; --dorado-tenue: #33301F; --dorado-txt: #E5CE8D; --terracota: #C08A63; --terracota-hondo: #A97551; --terracota-tenue: #33251C; --verde: #8FAE8D; --verde-tenue: #1E2A1E; /* estados */ --ok: #8FAE8D; --ok-bg: #1E2A1E; --warn: #E5CE8D; --warn-bg: #33301F; --err: #E0B396; --err-bg: #33251C; --info-bg: #223345; /* sombras: en oscuro el volumen lo da la sombra, no el borde */ --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28); --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 14px -8px rgba(0, 0, 0, 0.5); --sombra-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 28px -12px rgba(0, 0, 0, 0.6); } /* --- El mismo juego, cuando el sistema está en oscuro y nadie eligió ------- */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --crema: #131E29; --bg: #131E29; --bg-2: #1B2A3B; --bg-3: #223345; --panel: #1B2A3B; --papel: #1B2A3B; --surface: #1B2A3B; --arena: #223345; --gris: #223345; --ink: #EFEAE1; --tinta: #EFEAE1; --ink-2: #A7B3BF; --ink-3: #8A97A5; --borde: #2B3F55; --borde-2: #3A4F66; --linea: #2B3F55; --linea-tenue: #223345; --hairline: rgba(255, 255, 255, 0.09); --petroleo: #0F1822; --petroleo-2: #223345; --barra: #0F1822; --dorado: #D4B45E; --dorado-hondo: #C0A04B; --dorado-suave: #33301F; --dorado-tenue: #33301F; --dorado-txt: #E5CE8D; --terracota: #C08A63; --terracota-hondo: #A97551; --terracota-tenue: #33251C; --verde: #8FAE8D; --verde-tenue: #1E2A1E; --ok: #8FAE8D; --ok-bg: #1E2A1E; --warn: #E5CE8D; --warn-bg: #33301F; --err: #E0B396; --err-bg: #33251C; --info-bg: #223345; --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28); --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 14px -8px rgba(0, 0, 0, 0.5); --sombra-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 28px -12px rgba(0, 0, 0, 0.6); } } /* --- Lo que no salía de una variable -------------------------------------- Blancos y negros escritos a mano en las hojas de cada módulo: sin esto quedarían como manchas claras sobre el fondo oscuro. */ :root[data-tema="oscuro"] body, :root[data-tema="oscuro"] .tarjeta, :root[data-tema="oscuro"] .card, :root[data-tema="oscuro"] .panel, :root[data-tema="oscuro"] .modal-caja, :root[data-tema="oscuro"] table, :root[data-tema="oscuro"] thead th, :root[data-tema="oscuro"] input, :root[data-tema="oscuro"] select, :root[data-tema="oscuro"] textarea { background-color: var(--panel); color: var(--ink); border-color: var(--borde); } :root[data-tema="oscuro"] body { background-color: var(--bg); } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) body, :root:not([data-tema="claro"]) .tarjeta, :root:not([data-tema="claro"]) .card, :root:not([data-tema="claro"]) .panel, :root:not([data-tema="claro"]) .modal-caja, :root:not([data-tema="claro"]) table, :root:not([data-tema="claro"]) thead th, :root:not([data-tema="claro"]) input, :root:not([data-tema="claro"]) select, :root:not([data-tema="claro"]) textarea { background-color: var(--panel); color: var(--ink); border-color: var(--borde); } :root:not([data-tema="claro"]) body { background-color: var(--bg); } } /* --- Chips/pills e insignias: fondo pastel fijo escrito a mano en cada módulo. El texto se redefine arriba (var(--ok)/(--warn)/(--err) ya quedan claros en oscuro), pero el fondo pastel clarísimo nunca se tocaba → texto claro sobre fondo claro. Acá se les da un fondo oscuro a tono, igual que --ok-bg/--warn-bg. */ :root[data-tema="oscuro"] .pill.ok, :root:not([data-tema="claro"]) .pill.ok { background: var(--ok-bg); } :root[data-tema="oscuro"] .pill.warn, :root:not([data-tema="claro"]) .pill.warn { background: var(--warn-bg); color: var(--warn); } :root[data-tema="oscuro"] .pill.err, :root:not([data-tema="claro"]) .pill.err { background: var(--err-bg); } :root[data-tema="oscuro"] .pill.dir, :root:not([data-tema="claro"]) .pill.dir { background: var(--bg-3); color: var(--dorado); } /* El segmentado (tabs tipo "Abiertas/Mías") y el chip de planilla tienen el riel de fondo pastel fijo — sin esto quedan como manchas claras en oscuro. */ :root[data-tema="oscuro"] .seg, :root:not([data-tema="claro"]) .seg { background: var(--bg-3); } :root[data-tema="oscuro"] .chip-sheet, :root:not([data-tema="claro"]) .chip-sheet { background: var(--bg-3); border-color: var(--borde); } /* Selector de estado de tarea (checklist de obra): mismo problema que los pills. */ :root[data-tema="oscuro"] .sel-estado.e-hecha, :root:not([data-tema="claro"]) .sel-estado.e-hecha { background: var(--ok-bg); border-color: var(--borde); } :root[data-tema="oscuro"] .sel-estado.e-en-curso, :root:not([data-tema="claro"]) .sel-estado.e-en-curso { background: var(--warn-bg); border-color: var(--borde); } :root[data-tema="oscuro"] .sel-estado.e-bloqueada, :root:not([data-tema="claro"]) .sel-estado.e-bloqueada { background: var(--err-bg); border-color: var(--borde); } /* Grilla del gráfico de barras (Gantt): línea clara fija, invisible en oscuro. */ :root[data-tema="oscuro"] .grafico .g-grid, :root:not([data-tema="claro"]) .grafico .g-grid { stroke: var(--borde); } /* Etiqueta "Alta" activa (CRM): fondo var(--ok) se aclara en oscuro y el texto blanco fijo pierde contraste. Fondo verde oscuro fijo, igual en las dos formas de activar el tema. */ :root[data-tema="oscuro"] .conv-etiq .et.cal-alta.on, :root:not([data-tema="claro"]) .conv-etiq .et.cal-alta.on { background: #2E7D32; border-color: #2E7D32; } /* SIC · las tarjetas de elección de "Nueva orden de compra" (Compras / Mano de obra, Producto por producto / Una lista completa). La regla base usaba bien var(--panel), pero un override posterior le hardcodea el fondo claro (#eef2f7 la elegida, #fcfbf9 las otras) y el título de la no elegida sale de var(--ink-2), que en oscuro se aclara: gris claro sobre blanco. Acá se les da superficie oscura — la elegida sube (--bg-3) y las otras se hunden (--bg). */ :root[data-tema="oscuro"] .modo-sel button:not(.act), :root[data-tema="oscuro"] .clase-sel button:not(.act), :root:not([data-tema="claro"]) .modo-sel button:not(.act), :root:not([data-tema="claro"]) .clase-sel button:not(.act) { background: var(--bg); } :root[data-tema="oscuro"] .modo-sel button.act, :root[data-tema="oscuro"] .clase-sel button.act, :root:not([data-tema="claro"]) .modo-sel button.act, :root:not([data-tema="claro"]) .clase-sel button.act { background: var(--bg-3); border-color: var(--dorado); box-shadow: inset 3px 0 0 var(--dorado); } :root[data-tema="oscuro"] .modo-sel button.act b, :root[data-tema="oscuro"] .clase-sel button.act b, :root:not([data-tema="claro"]) .modo-sel button.act b, :root:not([data-tema="claro"]) .clase-sel button.act b { color: var(--dorado-txt); } /* Pills "info" (CRM: nuevo/interesado/recontactar): fondo var(--info-bg) ya se oscurece bien, pero el texto navy quedaba fijo — dark-on-dark en oscuro. */ :root[data-tema="oscuro"] .pill.nuevo, :root[data-tema="oscuro"] .pill.e-interesado, :root[data-tema="oscuro"] .pill.e-recontactar, :root:not([data-tema="claro"]) .pill.nuevo, :root:not([data-tema="claro"]) .pill.e-interesado, :root:not([data-tema="claro"]) .pill.e-recontactar { color: var(--ink); } /* El navegador dibuja sus propios controles (calendarios, flechas de select, barras de scroll) según esto. */ :root[data-tema="oscuro"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; } } /* PNL: los fondos de los renglones totales son pasteles fijos — en oscuro se reemplazan por tonos oscuros a tono, como los pills. */ :root[data-tema="oscuro"], :root:not([data-tema="claro"]) { /* El cuadro del PNL en oscuro: los mismos papeles que en claro (ingreso verde, egreso ámbar, resultado azul) pero con fondos oscuros y acentos más claros, porque sobre negro el rojo y el verde saturados no se leen. */ --pnl-bloque:#243244; --pnl-ingreso:#1F3326; --pnl-egreso:#3A3222; --pnl-res:#25384E; --pnl-cab:#1A2534; --pnl-linea:#2C3A4B; --pnl-cebra:#151E2A; --pnl-hover:#22303F; --pnl-finzona:#141D28; --pnl-hoy:#332E1C; --pnl-rojo:#F08A82; --pnl-verde:#6FCF8C; --pnl-ambar:#D9B268; --pnl-barra:#7C93AA; } /* El recuadro de aviso (.f-warn) tenía fondo y borde claros fijos: en oscuro quedaba como una isla blanca. Se lee, pero rompe la página — sobre todo ahora que lo usa el aviso de cruces del calendario de RRHH, que es grande. */ :root[data-tema="oscuro"] .f-warn, :root:not([data-tema="claro"]) .f-warn { background: var(--warn-bg); border-color: var(--borde); color: var(--warn); } :root[data-tema="oscuro"] .f-warn b, :root:not([data-tema="claro"]) .f-warn b { color: var(--warn); } :root[data-tema="oscuro"] .f-warn button, :root:not([data-tema="claro"]) .f-warn button { color: var(--dorado); } /* ============================================================================ Tokens de la capa visual v1 (16-sep-2026) en oscuro. Solo los que son COLOR: la tipografía, el espaciado, los radios, las alturas de control y las sombras son iguales en los dos temas y se heredan de tokens.css. Si se agregara acá un --fs-* o un --radio, habría dos fuentes de verdad para lo mismo y tarde o temprano se despegan. El criterio del original se mantiene: en claro los semánticos oscurecen para llegar a 4,5:1 sobre fondo blanco; en oscuro aclaran para llegar al mismo ratio sobre #1B2A3B. ============================================================================ */ :root[data-tema="oscuro"] { /* en oscuro el hover ACLARA, no oscurece */ --petroleo-hover: #2B3F55; --petroleo-active: #33495F; --terracota-hover: #D09B74; /* superficies de apoyo */ --surface-2: #17222E; /* pie de tabla */ --surface-3: #223345; /* cabecera de tabla, chips */ --surface-sel: #24384E; /* fila seleccionada */ --surface-hover: #223345; /* hover de fila */ /* un borde de control tiene que verse: #6A7B8C da 3,1:1 sobre #1B2A3B */ --borde-fuerte: #6A7B8C; /* El botón primario sigue siendo oscuro con texto claro: la tinta inversa NO se da vuelta con el tema, o el primario quedaría ilegible. */ --ink-inv: #EFEAE1; --ink-disabled: #7A8794; /* semánticos: aclaran para contrastar contra la superficie oscura */ --ok-txt: #8FD79A; --warn-txt: #E3B765; --err-txt: #F2A9A0; --info: #A8C4E0; --info-txt: #A8C4E0; }