/* ============================================================ SISTEMA DE TEMAS — variables CSS semánticas (base de todos los temas). Cada tema define 8 familias de color como tripletas RGB ("R G B", sin comas), para que Tailwind pueda aplicar opacidad encima: rgb(var(--x) / alfa). Las familias están registradas en tailwind.config.js, así el HTML usa clases semánticas (bg-neutro-900, text-acento-400, border-peligro-700, …) con TODAS las variantes de Tailwind (hover:, focus:, /50, gradientes) funcionando igual. Familias (por FUNCIÓN, no por color): · neutro fondos, superficies, bordes y textos (la "escala de grises" del tema) · acento la identidad del tema (botones primarios, títulos, focus) · exito verde semántico — efectivo, confirmaciones, stock OK · peligro rojo semántico — errores, eliminar, stock crítico · advertencia ámbar semántico — vencimientos, avisos, stock por agotar · naranja advertencia fuerte — devoluciones, deudas · info azul semántico — tarjeta, información · especial violeta — funciones premium/IA/founder Quedan SIN variable a propósito (constantes en los temas OSCUROS): · blanco/negro puros (text-white, bg-black/80 de los velos, fondo del QR 2FA) — nota: en CLARO, text-white se re-mapea a texto oscuro con overrides scoped (salvo sobre fondos de color fuertes); ver el bloque de Claro. · el verde de marca de WhatsApp/Excel (bg-green-*) El tema activo se elige con data-tema en (p.ej. ). Sin atributo (o con valor desconocido) rige el default: MIDNIGHT — la paleta Tailwind v3.4.17 EXACTA de fábrica (gray/cyan/emerald/red/amber/orange/blue/ purple), restaurada desde el commit 4ee10e1 (estado anterior al sistema de temas). El ajuste de neutros v2 y el anclaje a bienvenida rigen para los OTROS temas, no para Midnight. CSP-safe: nada de estilos inline; solo variables + atributo. ============================================================ */ /* ------------------------------------------------------------ MIDNIGHT (default) — la identidad de Zervia: azul-negro profundo, acento cyan. COLOR = paleta Tailwind v3.4.17 exacta = el aspecto original de fábrica (neutros v2 y anclaje a bienvenida revertidos en Midnight; ver runbook). Encima de ese color base, Midnight suma BRILLO y PROFUNDIDAD "estilo panel del founder" (malla de gradientes de fondo + sombras del pulido) — ver las secciones "FONDO CON MALLA DE GRADIENTES" y "EFECTOS PREMIUM" más abajo. El color base no cambia. ------------------------------------------------------------ */ :root { /* neutro (hoy: gray de Tailwind) */ --neutro-50: 249 250 251; --neutro-100: 243 244 246; --neutro-200: 229 231 235; --neutro-300: 209 213 219; --neutro-400: 156 163 175; --neutro-500: 107 114 128; --neutro-600: 75 85 99; --neutro-700: 55 65 81; --neutro-800: 31 41 55; --neutro-900: 17 24 39; --neutro-950: 3 7 18; /* acento (hoy: cyan de Tailwind) */ --acento-50: 236 254 255; --acento-100: 207 250 254; --acento-200: 165 243 252; --acento-300: 103 232 249; --acento-400: 34 211 238; --acento-500: 6 182 212; --acento-600: 8 145 178; --acento-700: 14 116 144; --acento-800: 21 94 117; --acento-900: 22 78 99; --acento-950: 8 51 68; /* exito (hoy: emerald de Tailwind) */ --exito-50: 236 253 245; --exito-100: 209 250 229; --exito-200: 167 243 208; --exito-300: 110 231 183; --exito-400: 52 211 153; --exito-500: 16 185 129; --exito-600: 5 150 105; --exito-700: 4 120 87; --exito-800: 6 95 70; --exito-900: 6 78 59; --exito-950: 2 44 34; /* peligro (hoy: red de Tailwind) */ --peligro-50: 254 242 242; --peligro-100: 254 226 226; --peligro-200: 254 202 202; --peligro-300: 252 165 165; --peligro-400: 248 113 113; --peligro-500: 239 68 68; --peligro-600: 220 38 38; --peligro-700: 185 28 28; --peligro-800: 153 27 27; --peligro-900: 127 29 29; --peligro-950: 69 10 10; /* advertencia (hoy: amber de Tailwind) */ --advertencia-50: 255 251 235; --advertencia-100: 254 243 199; --advertencia-200: 253 230 138; --advertencia-300: 252 211 77; --advertencia-400: 251 191 36; --advertencia-500: 245 158 11; --advertencia-600: 217 119 6; --advertencia-700: 180 83 9; --advertencia-800: 146 64 14; --advertencia-900: 120 53 15; --advertencia-950: 69 26 3; /* naranja (hoy: orange de Tailwind) */ --naranja-50: 255 247 237; --naranja-100: 255 237 213; --naranja-200: 254 215 170; --naranja-300: 253 186 116; --naranja-400: 251 146 60; --naranja-500: 249 115 22; --naranja-600: 234 88 12; --naranja-700: 194 65 12; --naranja-800: 154 52 18; --naranja-900: 124 45 18; --naranja-950: 67 20 7; /* info (hoy: blue de Tailwind) */ --info-50: 239 246 255; --info-100: 219 234 254; --info-200: 191 219 254; --info-300: 147 197 253; --info-400: 96 165 250; --info-500: 59 130 246; --info-600: 37 99 235; --info-700: 29 78 216; --info-800: 30 64 175; --info-900: 30 58 138; --info-950: 23 37 84; /* especial (hoy: purple de Tailwind) */ --especial-50: 250 245 255; --especial-100: 243 232 255; --especial-200: 233 213 255; --especial-300: 216 180 254; --especial-400: 192 132 252; --especial-500: 168 85 247; --especial-600: 147 51 234; --especial-700: 126 34 206; --especial-800: 107 33 168; --especial-900: 88 28 135; --especial-950: 59 7 100; /* -------------------------------------------------------- Tokens núcleo (alias sobre las familias) — el "contrato" de la spec. Hoy son GUÍA DOCUMENTAL para diseñar un tema (si estos puntos están bien elegidos, el tema funciona); no tienen consumidores directos en CSS — los css de página usan rgb(var(--neutro-*)) desde la Fase 2b. Se conservan como puntos de entrada estables para código futuro. -------------------------------------------------------- */ --color-fondo: var(--neutro-950); /* fondo general de la app */ --color-superficie: var(--neutro-900); /* tarjetas, modales, paneles */ --color-superficie-2: var(--neutro-800); /* elementos elevados sobre superficie */ --color-borde: var(--neutro-700); /* bordes y divisores */ --color-texto-principal: var(--neutro-100); /* texto principal */ --color-texto-secundario: var(--neutro-400); /* texto de apoyo */ --color-texto-tenue: var(--neutro-500); /* labels, placeholders */ --color-acento: var(--acento-600); /* acción primaria */ --color-acento-hover: var(--acento-500); --color-acento-texto: var(--neutro-950); /* texto sobre el acento */ /* -------------------------------------------------------- Gradientes decorativos (los usan los css/*.css de página): el halo radial del fondo en admin/consolidado/auditoria/sucursales/ usuarios/login/selector, y el fondo de la tarjeta con el sello dorado. En Midnight son los navy originales; cada tema los ajusta a su paleta. -------------------------------------------------------- */ --grad-fondo-centro: 9 15 32; /* pico del glow: navy PROFUNDO (antes 15 24 48 = #0f1830, que aclaraba de más). Baja el brillo del glow sin apagarlo: fondo oscuro Y con brillo. Base (--neutro-950) sin tocar. */ --grad-fondo-borde: 6 9 18; --grad-tarjeta-centro: 26 34 54; --grad-tarjeta-borde: 10 14 26; /* -------------------------------------------------------- Malla de gradientes del fondo (efectos premium) — DOS radiales muy sutiles. Usa las variables del tema activo, así cada tema resuelve su propio matiz (Claro la redefine con su versión clara). Ver la sección "EFECTOS PREMIUM" al final. --grad-fondo-centro ya trae la intensidad del glow por tema; el 2º radial tiñe con --acento-950 al 12%. -------------------------------------------------------- */ --mesh-fondo: radial-gradient(circle at 50% 0%, rgb(var(--grad-fondo-centro)) 0%, transparent 60%), radial-gradient(ellipse 75% 55% at 88% 100%, rgb(var(--acento-950) / .12) 0%, transparent 55%); /* Escalares de efectos premium (Claro los ajusta). */ --efecto-lift: -2px; /* micro-levantamiento del botón al hover */ --efecto-glass-blur: 12px; /* blur moderado del velo de modales (NO 20px+) */ --sombra-boton-hover: 0 10px 24px -10px rgb(var(--sombra) / .9); /* sombra del botón levantado */ /* -------------------------------------------------------- COLOR POR MÓDULO — cada sección con su color de identidad. Enfoque DERIVADO por tema: 4 módulos mapean a familias semánticas ya tuneadas por tema (auto-adaptan: brillan en oscuro, oscurecen en Claro, AA ok); Sucursal usa un rosa propio (Claro lo oscurece). Ver la sección "COLOR POR MÓDULO" al final. La marca dorada no se toca. -------------------------------------------------------- */ --seccion-pos: var(--exito-400); /* venta · dinero → verde */ --seccion-taller: var(--info-400); /* técnico → azul */ --seccion-inventario: var(--advertencia-400); /* stock → ámbar */ --seccion-clientes: var(--especial-400); /* personas · CRM → violeta */ --seccion-sucursal: 251 113 133; /* tienda · local → rosa (nueva) */ } /* ============================================================ LOS OTROS 5 TEMAS — cada bloque redefine SOLO lo que cambia respecto de Midnight (neutro, acento, gradientes; Forest además exito, Plum además especial, y CLARO todas las familias: es el único tema de fondo claro y reconstruye los semánticos para rendir sobre blanco). Todo lo no redefinido hereda de :root. Valores generados y verificados con contraste AA (ver runbook de temas). ============================================================ */ /* ------------------------------------------------------------ SLATE — grafito neutro: grises sofisticados con acento azul acero discreto. Sobriedad total. ------------------------------------------------------------ */ [data-tema="slate"] { --neutro-50: 249 250 250; --neutro-100: 241 242 243; --neutro-200: 228 229 231; --neutro-300: 212 214 216; --neutro-400: 186 188 191; --neutro-500: 147 149 154; --neutro-600: 100 103 109; --neutro-700: 73 75 80; --neutro-800: 48 50 54; --neutro-900: 31 32 35; --neutro-950: 14 15 17; --acento-50: 240 244 249; --acento-100: 222 231 242; --acento-200: 190 207 228; --acento-300: 154 181 214; --acento-400: 121 159 205; --acento-500: 79 125 186; --acento-600: 58 99 156; --acento-700: 47 77 121; --acento-800: 40 61 93; --acento-900: 32 47 70; --acento-950: 18 28 43; --grad-fondo-centro: 22 27 36; --grad-fondo-borde: 7 9 13; --grad-tarjeta-centro: 26 31 40; --grad-tarjeta-borde: 12 14 19; } /* ------------------------------------------------------------ FOREST — verde profundo: neutros con tinte pino, acento teal. El semántico de éxito pasa a green (más amarillo) para que ningún botón de confirmación se confunda con el acento del tema. ------------------------------------------------------------ */ [data-tema="forest"] { --neutro-50: 249 250 250; --neutro-100: 241 243 243; --neutro-200: 225 229 227; --neutro-300: 208 215 212; --neutro-400: 179 189 185; --neutro-500: 139 152 147; --neutro-600: 95 109 104; --neutro-700: 68 80 76; --neutro-800: 44 53 50; --neutro-900: 26 35 32; --neutro-950: 10 15 14; --acento-50: 240 253 250; --acento-100: 204 251 241; --acento-200: 153 246 228; --acento-300: 94 234 212; --acento-400: 45 212 191; --acento-500: 20 184 166; --acento-600: 13 148 136; --acento-700: 15 118 110; --acento-800: 17 94 89; --acento-900: 19 78 74; --acento-950: 4 47 46; --exito-50: 240 253 244; --exito-100: 220 252 231; --exito-200: 187 247 208; --exito-300: 134 239 172; --exito-400: 74 222 128; --exito-500: 34 197 94; --exito-600: 22 163 74; --exito-700: 21 128 61; --exito-800: 22 101 52; --exito-900: 20 83 45; --exito-950: 5 46 22; --grad-fondo-centro: 17 27 23; --grad-fondo-borde: 7 13 10; --grad-tarjeta-centro: 23 34 29; --grad-tarjeta-borde: 11 17 14; } /* ------------------------------------------------------------ PLUM — violeta oscuro: neutros con tinte ciruela, acento violet. El semántico especial (founder/IA) pasa a fuchsia para no pisarse con el acento del tema. ------------------------------------------------------------ */ [data-tema="plum"] { --neutro-50: 250 249 250; --neutro-100: 242 241 243; --neutro-200: 227 225 229; --neutro-300: 212 209 214; --neutro-400: 184 179 188; --neutro-500: 146 140 151; --neutro-600: 104 96 108; --neutro-700: 75 69 79; --neutro-800: 50 44 53; --neutro-900: 32 27 35; --neutro-950: 14 10 15; --acento-50: 245 243 255; --acento-100: 237 233 254; --acento-200: 221 214 254; --acento-300: 196 181 253; --acento-400: 167 139 250; --acento-500: 139 92 246; --acento-600: 124 58 237; --acento-700: 109 40 217; --acento-800: 91 33 182; --acento-900: 76 29 149; --acento-950: 46 16 101; --especial-50: 253 244 255; --especial-100: 250 232 255; --especial-200: 245 208 254; --especial-300: 240 171 252; --especial-400: 232 121 249; --especial-500: 217 70 239; --especial-600: 192 38 211; --especial-700: 162 28 175; --especial-800: 134 25 143; --especial-900: 112 26 117; --especial-950: 74 4 78; --grad-fondo-centro: 30 23 35; --grad-fondo-borde: 12 8 14; --grad-tarjeta-centro: 37 30 43; --grad-tarjeta-borde: 17 13 20; } /* ------------------------------------------------------------ CLARO — blanco puro + gris (estilo Apple/Notion): fondo #ffffff, superficies #f5f5f7, texto casi negro, acento azul discreto #0066cc. INVIERTE la lógica funcional del ramp (tonos altos claros, bajos oscuros); el hover del acento OSCURECE (500 más profundo que 600), como corresponde en una UI clara. Los semánticos no se copian de los temas oscuros: 300/400 van a tw700/800 (texto legible sobre blanco) y 700-950 a tintes pálidos — EXCEPTO peligro: una acción destructiva tiene que gritar también en claro, así que sus 700-950 quedan en los rojos sólidos originales y peligro-200 vuelve a pálido (solo se usa como texto sobre esos fondos; pares AA ≥4.8 verificados). AA verificado en los 11 pares del runbook. ------------------------------------------------------------ */ [data-tema="claro"] { --neutro-50: 0 0 0; --neutro-100: 29 29 31; --neutro-200: 41 41 44; --neutro-300: 51 51 56; --neutro-400: 69 69 73; --neutro-500: 95 95 102; --neutro-600: 119 119 126; --neutro-700: 201 201 208; --neutro-800: 230 230 235; --neutro-900: 244 244 246; --neutro-950: 255 255 255; --acento-50: 0 31 61; --acento-100: 0 45 90; --acento-200: 0 61 122; --acento-300: 0 79 158; --acento-400: 0 102 204; --acento-500: 0 84 168; --acento-600: 0 102 204; --acento-700: 158 199 236; --acento-800: 196 221 244; --acento-900: 226 238 250; --acento-950: 240 246 252; --exito-50: 2 44 34; --exito-100: 6 78 59; --exito-200: 6 95 70; --exito-300: 6 95 70; --exito-400: 4 120 87; --exito-500: 4 120 87; --exito-600: 5 150 105; --exito-700: 110 231 183; --exito-800: 167 243 208; --exito-900: 209 250 229; --exito-950: 236 253 245; --peligro-50: 69 10 10; --peligro-100: 127 29 29; --peligro-200: 254 202 202; --peligro-300: 153 27 27; --peligro-400: 185 28 28; --peligro-500: 185 28 28; --peligro-600: 220 38 38; --peligro-700: 185 28 28; --peligro-800: 153 27 27; --peligro-900: 127 29 29; --peligro-950: 69 10 10; --advertencia-50: 69 26 3; --advertencia-100: 120 53 15; --advertencia-200: 146 64 14; --advertencia-300: 146 64 14; --advertencia-400: 180 83 9; --advertencia-500: 180 83 9; --advertencia-600: 217 119 6; --advertencia-700: 252 211 77; --advertencia-800: 253 230 138; --advertencia-900: 254 243 199; --advertencia-950: 255 251 235; --naranja-50: 67 20 7; --naranja-100: 124 45 18; --naranja-200: 154 52 18; --naranja-300: 154 52 18; --naranja-400: 194 65 12; --naranja-500: 194 65 12; --naranja-600: 234 88 12; --naranja-700: 253 186 116; --naranja-800: 254 215 170; --naranja-900: 255 237 213; --naranja-950: 255 247 237; --info-50: 23 37 84; --info-100: 30 58 138; --info-200: 30 64 175; --info-300: 30 64 175; --info-400: 29 78 216; --info-500: 29 78 216; --info-600: 37 99 235; --info-700: 147 197 253; --info-800: 191 219 254; --info-900: 219 234 254; --info-950: 239 246 255; --especial-50: 59 7 100; --especial-100: 88 28 135; --especial-200: 107 33 168; --especial-300: 107 33 168; --especial-400: 126 34 206; --especial-500: 126 34 206; --especial-600: 147 51 234; --especial-700: 216 180 254; --especial-800: 233 213 255; --especial-900: 243 232 255; --especial-950: 250 245 255; --grad-fondo-centro: 247 247 249; --grad-fondo-borde: 236 236 241; --grad-tarjeta-centro: 250 250 250; --grad-tarjeta-borde: 240 240 243; } /* ------------------------------------------------------------ NEGRO — OLED minimalista (reemplaza a Carbon): fondo #000000, superficies #141414, texto blanco, acento #4da3ff en títulos con botón primario más profundo (#1877d2) para sostener el texto blanco. El sub-nav activo del POS va en blanco puro (override abajo); el pill del nav principal lo pinta el COLOR POR MÓDULO, como en todos los temas. Las preferencias guardadas con "carbon" caen acá (alias en tema.js). ------------------------------------------------------------ */ [data-tema="negro"]{ --neutro-50: 250 250 250; --neutro-100: 245 245 245; --neutro-200: 227 227 227; --neutro-300: 212 212 212; --neutro-400: 179 179 179; --neutro-500: 140 140 140; --neutro-600: 87 87 87; --neutro-700: 61 61 61; --neutro-800: 38 38 38; --neutro-900: 22 22 22; --neutro-950: 0 0 0; --acento-50: 238 246 255; --acento-100: 219 237 255; --acento-200: 184 219 255; --acento-300: 124 188 255; --acento-400: 77 163 255; --acento-500: 43 140 232; --acento-600: 24 119 210; --acento-700: 19 95 168; --acento-800: 16 73 126; --acento-900: 13 58 99; --acento-950: 8 39 66; --grad-fondo-centro: 16 16 16; --grad-fondo-borde: 0 0 0; --grad-tarjeta-centro: 22 22 22; --grad-tarjeta-borde: 8 8 8; } /* --- Ajustes scoped de CLARO: el blanco literal (text-white) era un supuesto de "todos los temas son oscuros". En claro pasa a texto principal oscuro, SALVO sobre fondos de color fuertes (botones/CTAs), donde el blanco sigue siendo lo correcto. Mismo truco de especificidad que la capa de pulido. --- */ [data-tema="claro"] .text-white { color: rgb(29 29 31); } [data-tema="claro"] .hover\:text-white:hover { color: rgb(0 0 0); } [data-tema="claro"] :where([class*="bg-acento-5"], [class*="bg-acento-6"], [class*="bg-exito-5"], [class*="bg-exito-6"], [class*="bg-exito-7"], [class*="bg-peligro-5"], [class*="bg-peligro-6"], [class*="bg-peligro-7"], [class*="bg-info-5"], [class*="bg-info-6"], [class*="bg-especial-5"], [class*="bg-especial-6"], [class*="bg-especial-7"], [class*="bg-naranja-5"], [class*="bg-naranja-6"], [class*="bg-advertencia-5"], [class*="bg-advertencia-6"], [class*="bg-green-5"], [class*="bg-green-6"], [class*="bg-green-7"], [class*="bg-green-8"]).text-white, [data-tema="claro"] :where([class*="bg-acento-5"], [class*="bg-acento-6"], [class*="bg-exito-5"], [class*="bg-exito-6"], [class*="bg-exito-7"], [class*="bg-peligro-5"], [class*="bg-peligro-6"], [class*="bg-peligro-7"], [class*="bg-info-5"], [class*="bg-info-6"], [class*="bg-especial-5"], [class*="bg-especial-6"], [class*="bg-especial-7"], [class*="bg-naranja-5"], [class*="bg-naranja-6"], [class*="bg-advertencia-5"], [class*="bg-advertencia-6"], [class*="bg-green-5"], [class*="bg-green-6"], [class*="bg-green-7"], [class*="bg-green-8"]) .text-white { color: rgb(255 255 255); } /* Blanco protegido también sobre los rojos sólidos plenos de claro (las variantes con opacidad /40-/70 son chips con texto propio y no entran). */ [data-tema="claro"] .bg-peligro-800.text-white, [data-tema="claro"] .bg-peligro-900.text-white { color: rgb(255 255 255); } /* --- Ajuste scoped de NEGRO: el sub-nav activo del POS va en blanco puro sobre negro (máximo contraste). El pill del NAV principal, en cambio, lo pinta el COLOR POR MÓDULO (decisión posterior que reemplazó ahí al blanco; la regla vieja sobre .bg-acento-900 se retiró por muerta). --- */ [data-tema="negro"] .sub-nav-btn.active { background: rgb(255 255 255); color: rgb(10 10 10); } /* ============================================================ APOYOS DEL SELECTOR DE TEMA (nuska-core.js + tema.js) ============================================================ */ /* Transición suave SOLO durante el cambio de tema: tema.js pone la clase un instante y la saca a los 350ms (si quedara fija, todos los hover del sistema se sentirían lentos). */ html.tema-transicion, html.tema-transicion * { transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease, box-shadow .3s ease !important; } /* Muestras del menú (mitad fondo / mitad acento de CADA tema). Colores literales a propósito: representan a su tema sin importar el activo, y al ser hoja externa son CSP-safe (nada de style="" inline). */ .muestra-tema { width: 22px; height: 22px; border-radius: 7px; flex: none; border: 1px solid rgb(127 127 127 / .45); } .muestra-midnight { background: linear-gradient(135deg, #030712 50%, #22d3ee 50%); } .muestra-slate { background: linear-gradient(135deg, #020617 50%, #799fcd 50%); } .muestra-forest { background: linear-gradient(135deg, #09100f 50%, #2dd4bf 50%); } .muestra-plum { background: linear-gradient(135deg, #0e0a10 50%, #a78bfa 50%); } .muestra-claro { background: linear-gradient(135deg, #ffffff 50%, #0066cc 50%); } .muestra-negro { background: linear-gradient(135deg, #000000 50%, #4da3ff 50%); } /* ============================================================ CAPA DE PULIDO — profundidad y jerarquía de estado. Sombras tintadas por tema, bordes con más presencia y micro- transiciones de interacción. TODO vía :where() (especificidad 0) u override de baja especificidad: cualquier utilidad explícita del HTML (hover:border-peligro-*, shadow-2xl, transition-colors) sigue ganando porque el bundle de Tailwind carga DESPUÉS de esta hoja. CSP-safe: solo variables y clases. ============================================================ */ :root { /* Base tintada de las sombras (tripleta RGB) — cada tema la redefine: nada de negro plano; la sombra hereda el matiz del fondo del tema. */ --sombra: 3 10 30; /* Composiciones compartidas (usan la base del tema activo). */ --sombra-tarjeta: inset 0 1px 0 rgb(255 255 255 / .04), 0 10px 28px -14px rgb(var(--sombra) / .6), 0 3px 10px -6px rgb(var(--sombra) / .45); --sombra-boton: 0 1px 3px -1px rgb(var(--sombra) / .55); /* Bordes con presencia: re-mapean las DOS utilidades de borde estándar (border-neutro-800 → --borde, border-neutro-700 → --borde-fuerte), medio tono más claras que el valor del ramp. Las variantes con opacidad (border-neutro-800/50) quedan como están, sutiles a propósito. */ --borde: 31 41 55; /* Midnight de fábrica: = neutro-800 original (neutraliza el remapeo del pulido) */ --borde-fuerte: 55 65 81; /* = neutro-700 original */ } /* --- Bordes (override de baja especificidad: html + clase) --- */ html .border-neutro-800 { border-color: rgb(var(--borde) / var(--tw-border-opacity, 1)); } html .border-neutro-700 { border-color: rgb(var(--borde-fuerte) / var(--tw-border-opacity, 1)); } /* --- Profundidad: tarjetas (cajas con borde y esquinas xl/2xl; los modales con shadow-2xl propio quedan excluidos y conservan su sombra) --- */ :where(div, section, form):where(.rounded-xl, .rounded-2xl):where([class*="border"]):where(:not([class*="shadow"])) { box-shadow: var(--sombra-tarjeta); } :where(.table-wrapper, .summary-box) { box-shadow: var(--sombra-tarjeta); } /* --- Profundidad: botones (con fondo propio; los que declaran shadow-* explícito conservan el suyo) --- */ :where(button, a):where([class*="bg-"]):where(:not([class*="shadow"])) { box-shadow: var(--sombra-boton); } :where(.btn-quick, .btn-submit, .btn-checkout, .bk-btn-primary) { box-shadow: var(--sombra-boton); } /* --- Jerarquía de estado: acento del tema al hover/focus en interactivos de borde neutro. Empatan en especificidad (0,2,0) con las variantes hover:/focus: del HTML → ganan las explícitas por orden de carga. --- */ :where(button, a, [data-act], [data-accion]).border-neutro-800:hover, :where(button, a, [data-act], [data-accion]).border-neutro-700:hover { border-color: rgb(var(--acento-500) / .6); } :where(input, select, textarea).border-neutro-800:focus, :where(input, select, textarea).border-neutro-700:focus, :where(input, select, textarea).border-neutro-600:focus { border-color: rgb(var(--acento-500)); } /* --- Micro-transiciones de interacción (independientes de la transición de 300ms del cambio de tema, que va con !important y las pisa) --- */ :where(button, a, input, select, textarea, [data-act], [data-accion]) { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } /* ------------------------------------------------------------ FONDO CON MALLA DE GRADIENTES — profundidad "estilo panel del founder" para las 4 pantallas de trabajo (POS, taller, inventario, clientes; los paneles del dueño ya la traen en sus css/*.css). Antes eran bg-neutro-950 PLANO. La malla (--mesh-fondo, definida en :root y por tema) son DOS radiales MUY sutiles en distintas posiciones, sobre el color base intacto (son background-image; el background-color sigue siendo --neutro-950): · radial 1: glow arriba (--grad-fondo-centro) que cae a transparente → revela la base; idéntico al glow que ya teníamos (mismo look aprobado). · radial 2: matiz de --acento-950 del tema al 12%, abajo-derecha → aporta la sensación 3D sin aclarar la pantalla. Cada tema resuelve su matiz porque --mesh-fondo usa sus propias variables (Claro la redefine con su versión clara). Las sombras del pulido siguen activas (cards con elevación). CSP-safe (variables + clases). --- */ html:not([data-tema]) body.bg-neutro-950, [data-tema="slate"] body.bg-neutro-950, [data-tema="forest"] body.bg-neutro-950, [data-tema="plum"] body.bg-neutro-950, [data-tema="negro"] body.bg-neutro-950, [data-tema="claro"] body.bg-neutro-950 { background-image: var(--mesh-fondo); } /* CLARO es un tema CLARO: la malla oscura no aplica. Versión propia, MUY sutil, sobre el blanco base: un velo papel gris apenas perceptible arriba (--grad-fondo-borde #ececf1 → transparente) + un matiz de acento al 5% abajo-derecha. La profundidad real la ponen las sombras claras del pulido (las cards blancas flotan sobre el papel). */ [data-tema="claro"] { --mesh-fondo: radial-gradient(ellipse 120% 55% at 50% 0%, rgb(var(--grad-fondo-borde)) 0%, transparent 60%), radial-gradient(ellipse 75% 55% at 88% 100%, rgb(var(--acento-500) / .05) 0%, transparent 55%); /* Claro: blur un pelín menor y sombra de botón MUCHO más tenue (fondo claro). */ --efecto-glass-blur: 10px; --sombra-boton-hover: 0 10px 22px -10px rgb(var(--sombra) / .22); /* Rosa de Sucursal oscurecido para rendir sobre el blanco (como el resto de familias semánticas de Claro). Los otros 4 se auto-adaptan solos. */ --seccion-sucursal: 190 18 60; } /* --- Valores de pulido por tema --- */ [data-tema="claro"] { --sombra: 50 60 80; /* Sobre blanco, la receta oscura ensucia: composiciones propias, sin el inset (invisible en claro) y con opacidades bajas, estilo elevación suave. */ --sombra-tarjeta: 0 1px 2px rgb(var(--sombra) / .06), 0 10px 28px -14px rgb(var(--sombra) / .16), 0 3px 10px -6px rgb(var(--sombra) / .10); --sombra-boton: 0 1px 2px rgb(var(--sombra) / .12); --borde: 216 216 222; --borde-fuerte: 201 201 208; } [data-tema="negro"] { --sombra: 0 0 0; --borde: 50 50 50; --borde-fuerte: 74 74 74; } [data-tema="slate"] { --sombra: 6 8 12; --borde: 61 63 67; --borde-fuerte: 87 89 95; } [data-tema="forest"] { --sombra: 4 12 9; --borde: 56 67 63; --borde-fuerte: 82 95 90; } [data-tema="plum"] { --sombra: 12 7 16; --borde: 63 57 66; --borde-fuerte: 90 83 94; } /* --- Placeholders tematizados: el gris por defecto del navegador no sigue al tema (y en Claro se lavaba). neutro-500 = el escalón "tenue" de cada tema. --- */ input::placeholder, textarea::placeholder { color: rgb(var(--neutro-500)); opacity: 1; } /* ============================================================ EFECTOS PREMIUM — refinamientos para dar sensación de calidad y confianza. Criterio: software para empresas (talleres/POS de Chile) — SERIO y PROFESIONAL, no gamer. Cada efecto usa el --acento EXISTENTE de cada tema (cero cambio de color; en Midnight el cyan — el dorado es la marca, intacta). Todo CSP-safe (variables + clases + pseudo-elementos, cero inline). Sin text-shadow/glow en textos, sin neón, sin saturate, blur ≤12px, sin grayscale. Rendimiento: solo transiciones sobre transform/opacity/box-shadow y hover; el blur va sólo en el velo de modales (contenido estático, no en tablas). ============================================================ */ /* (1) BOTÓN DE ACCIÓN PRINCIPAL — brillo sutil (sheen) + micro-levantamiento al hover con sombra más marcada. El sheen es un velo NEUTRO semitransparente (luz arriba, sombra abajo), NO stops del acento: así el cambio de color del hover (hover:bg-acento-500) se ve por debajo, y no se invierte la luz en los temas claros. Impacto de contraste despreciable (velo ≤10%). */ :where(button, a).bg-acento-600, .btn-submit, .btn-checkout { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } :where(button, a).bg-acento-600 { background-image: linear-gradient(180deg, rgb(255 255 255 / .10) 0%, transparent 46%, rgb(0 0 0 / .08) 100%); } :where(button, a).bg-acento-600:hover, .btn-submit:hover, .btn-checkout:hover { transform: translateY(var(--efecto-lift)); box-shadow: var(--sombra-boton-hover); } :where(button, a).bg-acento-600:active, .btn-submit:active, .btn-checkout:active { transform: translateY(0); box-shadow: 0 3px 8px -5px rgb(var(--sombra) / .7); } /* (2) FOCUS DE INPUTS — anillo de luz con el acento a baja opacidad. Clave para operar con teclado (cajero). Se suma al borde de acento que ya pone el pulido. */ :where(input, select, textarea):focus, :where(input, select, textarea):focus-visible { box-shadow: 0 0 0 3px rgb(var(--acento-500) / .18); } /* (3) HOVER DE FILAS DE TABLA — deslizamiento sutil + borde de acento a la izquierda. El translateX es de la fila del cuerpo (thead sticky intacto). */ :where(tbody) tr { transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; } :where(tbody) tr:hover { transform: translateX(3px); box-shadow: inset 3px 0 0 rgb(var(--acento-500)); background-color: rgb(var(--acento-500) / .05); } /* (4) UNDERLINE ANIMADO EN SUBNAV — línea de acento que crece al hover/activo. */ .sub-nav-btn { position: relative; } .sub-nav-btn::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; background: rgb(var(--acento-500)); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .2s ease; } .sub-nav-btn:hover::after, .sub-nav-btn.active::after { transform: scaleX(1); } /* (5) SCROLLBAR — fino y elegante: thumb neutro, hover en el acento. */ * { scrollbar-width: thin; scrollbar-color: rgb(var(--neutro-700)) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgb(var(--neutro-700)); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--acento-600)); } /* (6) GLASSMORPHISM CON MODERACIÓN — blur del velo de los modales (background- image no, sólo el velo semitransparente bg-black/*). Blur 12px (10 en Claro), sin saturate. El velo cubre contenido estático → sin lag en tablas; cuando el modal está oculto (.hidden) no cuesta nada. */ .fixed.inset-0[class*="bg-black"] { backdrop-filter: blur(var(--efecto-glass-blur)); -webkit-backdrop-filter: blur(var(--efecto-glass-blur)); } /* ============================================================ COLOR POR MÓDULO (Versión A — menú color-coded) — cada sección (POS/Taller/Inventario/Clientes/Sucursal) con su color de identidad, para saber de un vistazo dónde estás. CSP-safe: usa las clases .link-* que ya trae el nav + el atributo data-seccion que tema.js pone en según la página. Cero inline, cero !important (la especificidad alcanza). La marca dorada y el acento del tema quedan intactos. ============================================================ */ /* Íconos del menú coloreados por módulo (siempre, en todo el nav). */ .link-pos i { color: rgb(var(--seccion-pos)); } .link-taller i { color: rgb(var(--seccion-taller)); } .link-inventario i { color: rgb(var(--seccion-inventario)); } .link-clientes i { color: rgb(var(--seccion-clientes)); } .link-sucursal i { color: rgb(var(--seccion-sucursal)); } /* --sec-activa = color del módulo activo (tema.js pone data-seccion). */ [data-seccion="pos"] { --sec-activa: var(--seccion-pos); } [data-seccion="taller"] { --sec-activa: var(--seccion-taller); } [data-seccion="inventario"] { --sec-activa: var(--seccion-inventario); } [data-seccion="clientes"] { --sec-activa: var(--seccion-clientes); } [data-seccion="sucursal"] { --sec-activa: var(--seccion-sucursal); } /* El link del módulo activo toma su color de sección (pill + texto + borde), en vez del pill genérico del acento. Especificidad (0,2,0) > la utilidad Tailwind del pill (0,1,0) → gana sin !important. */ [data-seccion="pos"] .link-pos, [data-seccion="taller"] .link-taller, [data-seccion="inventario"] .link-inventario, [data-seccion="clientes"] .link-clientes, [data-seccion="sucursal"] .link-sucursal { background-color: rgb(var(--sec-activa) / .16); color: rgb(var(--sec-activa)); border-color: rgb(var(--sec-activa) / .5); } /* Barra fina arriba con el color del módulo activo ("estás acá"). Fija (no empuja el layout), sin capturar clics, solo en páginas con data-seccion. La transición hace que su color funda al cambiar de tema (los pseudo- elementos no los alcanza html.tema-transicion *). */ [data-seccion] body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgb(var(--sec-activa)); z-index: 90; pointer-events: none; transition: background .3s ease; } /* Impresión: la barra de sección NO va en tickets/órdenes (un pseudo-elemento del body no lo tapa la regla `body > *:not(#print-template…)` de los css de página). Lo impreso no se tematiza. */ @media print { [data-seccion] body::before { content: none; } } /* Accesibilidad — respetar "reducir movimiento" del sistema: se apagan los micro-movimientos (lift del botón, deslizamiento de filas, crecer del underline); los cambios de color/opacidad se conservan. */ @media (prefers-reduced-motion: reduce) { :where(button, a).bg-acento-600:hover, .btn-submit:hover, .btn-checkout:hover, :where(tbody) tr:hover { transform: none; } .sub-nav-btn::after { transition: none; } :where(button, a, input, select, textarea, [data-act], [data-accion]) { transition-duration: .01ms; } }