/* Sistema de diseño del Portal Max Service, adaptado del kit visual original (SaludCRM) -- 2026-08-06, pedido de Marcelo: normalizar el estilo de los 11 módulos. Los temas "light"/"dark" de abajo llevan los colores REALES de Maxservice (navy/verde, los mismos que ya usaba static/css/design-system.css antes de esta migración) en vez de los del kit original; lino/telar/greda/cordillera se dejan tal cual, son la parte "de prueba" que Marcelo quiere comparar. */ /* --accentButton/--okButton: fondo sólido para botones CTA. Siempre lo bastante oscuro para que el texto blanco encima sea legible — en los temas oscuros NO se usa el --accent brillante directamente (eso se reserva para texto/íconos sobre superficie, donde sí luce bien). --accentText/--okText quedan blancos siempre, así el patrón "botón de color + texto blanco" es uniforme. */ /* "Original" (id interno sigue siendo "light", solo cambio la etiqueta visible -- ver theme.js/NOMBRES) -- 2026-08-07, recoloreado con la paleta REAL de marca (Brand Guideline Maxservice): SERVICIO #00B061 (verde vivo, PANTONE 2277C) para --accentButton, COLABORACIÓN #1D7564 (verde profundo, PANTONE 131-8U) para --accent (texto/ iconos), INTEGRIDAD #8BBF47 (PANTONE 375UP) como --accentDuo, el gris oscuro de marca #292B2A como --text. Ajustado de nuevo el mismo dia: la primera version tambien tiñó fondo/superficie/bordes con el sage clarito de la guia (#E1ECC7) y quedo "muy pastel" (feedback de Marcelo) -- se volvio a un fondo/ superficie NEUTROS y blancos, como el look original de siempre. Tercer ajuste el mismo dia: el verde de marca en --accent/--accentButton se veia "demasiado verde" en botones y texto resaltado (ej. nombres de vendedor/cliente en Muestras) comparado con kimi -- Marcelo pidio volver al navy real de produccion ahi. El verde de marca queda solo en --ok/--okButton (estados de aprobado/exito, ya eran verdes en kimi antes de esta migracion) y --accentDuo (color secundario, recien usado en graficos). --accent/--accentButton/--accentSoft vuelven al navy de siempre. */ :root, [data-theme="light"] { --bg: #F6F7FA; --surface: #FFFFFF; --surfaceAlt: #EEF1F5; --border: #E4E8EE; --text: #292B2A; --textDim: #5C6675; --accent: #1B3A5C; --accentSoft: #EAF0F6; --accentButton: #1B3A5C; --accentText: #FFFFFF; --accentDuo: #8BBF47; --urgent: #DC2626; --urgentSoft: #FDECEC; --warn: #D97706; --warnSoft: #FEF6E7; --ok: #00B061; --okSoft: #E3F7EC; --okButton: #00B061; --okText: #FFFFFF; --info: #3A66C4; --infoSoft: #E7EDFB; --shadow: 0 1px 2px rgba(20,26,34,0.05), 0 8px 24px -12px rgba(20,26,34,0.14); color-scheme: light; } /* Oscuro de verdad, mismo criterio del kit original: el fondo es casi negro y las superficies suben por grises neutros, no por verde apagado -- teñir todo de verde oscuro da un gris verdoso que no se lee ni como oscuro ni como marca. Es el ACENTO el que sube de luminosidad para leerse como marca sobre negro (un verde que funciona sobre blanco queda apagado sobre negro). */ [data-theme="dark"] { /* surface/surfaceAlt un poco mas claras que el kit original (#181818/#232323) -- 2026-08-07, Marcelo: el sidebar/header se perdian contra el fondo, muy poco salto de tono entre --bg y --surface para notar la separacion. Ajuste chico, no cambia el caracter del tema. */ --bg: #0F0F0F; --surface: #1F1F1F; --surfaceAlt: #2A2A2A; --border: #383838; --text: #F1F1F1; --textDim: #A0A0A0; --accent: #34D399; --accentSoft: #12312C; --accentButton: #15803D; --accentText: #FFFFFF; /* Segundo color. Era el unico tema sin --accentDuo: caia al #8BBF47 de :root, que es verde igual que su --accent, asi que los dos colores se confundian donde justamente sirven para distinguir (la barra de Mover de Cartera y la serie "Extra" del grafico de Forecast). Ambar calido, mismo criterio que el cobre de Cordillera y el coral de Telar. */ --accentDuo: #E0A05A; --urgent: #FF7A6B; --urgentSoft: #3A1714; --warn: #F0B85C; --warnSoft: #382A12; --ok: #5CDCA4; --okSoft: #10301F; --okButton: #16A34A; --okText: #FFFFFF; --info: #8AAEFF; --infoSoft: #16203A; --rail: #0A0A0A; --railAlt: #1F1F1F; --shadow: 0 1px 2px rgba(0,0,0,0.6), 0 12px 28px -14px rgba(0,0,0,0.8); color-scheme: dark; } /* Lino — la versión clara de Telar. Ningún blanco puro en toda la paleta: el fondo es crema tibio y la superficie de las tarjetas es apenas más clara que él, no blanca. El blanco puro sobre una pantalla encendida es la superficie que más cansa la vista, y además aplana todo — si la tarjeta y el fondo son los dos blancos, no hay jerarquía que mostrar. El acento es el mismo fucsia de Telar bajado de tono hasta que contrasta sobre crema: el mismo color a plena saturación sería ilegible acá. */ [data-theme="lino"] { --bg: #F6EFE9; --surface: #FDF8F4; --surfaceAlt: #F0E6DE; --border: #E2D2C8; --text: #3A2530; --textDim: #8A6E7A; --accent: #BE3670; --accentSoft: #FAE4EE; --accentButton: #BE3670; --accentText: #FFFFFF; /* Terracota: el segundo color, el mismo papel que el coral en Telar. */ --accentDuo: #D9834F; --urgent: #C0392B; --urgentSoft: #FAE3DE; --warn: #96610A; --warnSoft: #F9EED4; --ok: #1B7F5F; --okSoft: #DFF1E9; --okButton: #1B7F5F; --okText: #FFFFFF; --info: #7A5AA8; --infoSoft: #F0E9F8; --shadow: 0 1px 2px rgba(58,37,48,0.06), 0 10px 26px -14px rgba(190,54,112,0.28); color-scheme: light; } /* Greda — la versión clara de Cordillera. Mismo criterio con el crema, pero corrido hacia el gris cálido de la cerámica: menos rosa, más arena. El acento es el petróleo de Cordillera, que sobre crema funciona tal cual porque ya era oscuro. */ [data-theme="greda"] { --bg: #F1EDE5; --surface: #FAF7F1; --surfaceAlt: #E9E3D8; --border: #D8D0C2; --text: #262E33; --textDim: #6E7A80; --accent: #1B6580; --accentSoft: #E0EDF2; --accentButton: #1B6580; --accentText: #FFFFFF; /* Cobre quemado: el segundo color, el mismo papel que en Cordillera. */ --accentDuo: #A9663A; --urgent: #BC3B2B; --urgentSoft: #F8E3DD; --warn: #8A6100; --warnSoft: #F6EED3; --ok: #1B7F5F; --okSoft: #DEF0E8; --okButton: #1B7F5F; --okText: #FFFFFF; --info: #3D6B92; --infoSoft: #E5EDF4; --shadow: 0 1px 2px rgba(38,46,51,0.06), 0 10px 26px -14px rgba(27,101,128,0.26); color-scheme: light; } /* Cordillera — reemplaza al Índigo. El par masculino de Telar, construido con el mismo criterio pero sin repetir ni un solo recurso. Del Índigo se descartaron las dos cosas: el violeta eléctrico, que en una pantalla de trabajo cansa, y el fondo casi blanco, que a las siete de la tarde encandila. Acá el suelo es pizarra profunda con tinte azul verdoso y el acento es azul petróleo, el color del acero mojado. Cobre como segundo color, que es lo que le da temperatura: petróleo solo se va a frío clínico. Y la geometría es opuesta a la de Telar a propósito. Allá son rombos y triángulos — ángulos, tejido. Acá son CURVAS DE NIVEL, las de un mapa topográfico: anillos concéntricos irregulares, todos curvos, ninguno recto. Es cartográfico y técnico en vez de artesanal, y de paso es lo que se ve desde cualquier ventana en Chile. */ [data-theme="cordillera"] { /* surface/surfaceAlt un poco mas claras, mismo ajuste que en "dark" -- 2026-08-07, sidebar/header se perdian contra el fondo. */ --bg: #0C1319; --surface: #182530; --surfaceAlt: #21313E; --border: #324655; --text: #E4EEF4; --textDim: #90A6B4; --accent: #5CC8E8; --accentSoft: #16303C; --accentButton: #1E6E8F; --accentText: #FFFFFF; /* Cobre: el segundo color de la paleta, no un adorno suelto. */ --accentDuo: #C98A4B; --urgent: #F0796A; --urgentSoft: #2B1614; --warn: #E0A94F; --warnSoft: #2A2313; --ok: #4FD69C; --okSoft: #10291F; --okButton: #17916C; --okText: #FFFFFF; --info: #86A9E0; --infoSoft: #16233A; --shadow: 0 2px 6px rgba(12,19,25,0.5), 0 20px 44px -22px rgba(30,110,143,0.5); color-scheme: dark; } /* Telar. El único tema con identidad propia además de la paleta. El rosa "femenino" por defecto es el pastel de papelería infantil: se ve barato y en una app de trabajo se ve poco serio. Acá el rosa es fucsia saturado sobre un ciruela casi negro — la combinación de la cosmética y la moda contemporánea — que es intenso sin ser dulce, y encima deja los datos perfectamente legibles, que es de lo que vive esta pantalla. La identidad no está en el color plano sino en la atmósfera del fondo: manchas de color difusas y un motivo geométrico girado, apenas visibles (ver el bloque de abajo). Es geometría textil, sin nada de flor ni de corazón, y no copia el patrón de ningún pueblo en particular: se inspira en la lógica del tejido, que es universal. Además: - Coral como segundo color, y los botones principales con degradado entre fucsia y coral. Es el único lugar donde los dos aparecen juntos. - Geometría intermedia: más blanda que el resto de los temas, pero no redonda del todo — el motivo es angular y una caja muy redondeada lo contradice. - Selección de texto y barra de scroll en fucsia: los detalles que nadie mira de frente son los que hacen que se sienta terminado. Todo vive dentro del selector del tema: quien elija otro no ve nada de esto, y desactivarlo es borrar este bloque. */ [data-theme="telar"] { /* surface/surfaceAlt un poco mas claras, mismo ajuste que en "dark" -- 2026-08-07, sidebar/header se perdian contra el fondo. */ --bg: #150C16; --surface: #291731; --surfaceAlt: #351D40; --border: #4E2C58; --text: #FCEDF7; --textDim: #C79BBA; --accent: #FF6FAE; --accentSoft: #3A1B33; --accentButton: #D6357F; --accentText: #FFFFFF; /* Coral: el segundo color de la paleta, no un adorno suelto. */ --accentDuo: #FF9A6B; --urgent: #FF7B6B; --urgentSoft: #2E1516; --warn: #F2B95C; --warnSoft: #2E2413; --ok: #4FD6A8; --okSoft: #10291F; --okButton: #17916C; --okText: #FFFFFF; --info: #8FA8FF; --infoSoft: #171C33; /* Sombra abierta y con tinte fucsia, para que las tarjetas floten sobre el ciruela en vez de recortarse contra él. */ --shadow: 0 2px 6px rgba(21,12,22,0.45), 0 20px 44px -22px rgba(214,53,127,0.5); color-scheme: dark; } /* ── Atmósfera ────────────────────────────────────────────────────────────── El ornamento está DENTRO del fondo, no encima de la interfaz. Se probaron dos caminos antes y los dos molestaban por lo mismo: eran elementos dibujados sobre la pantalla. El tapiz repetido competía con las tablas; las cenefas de los cantos eran franjas rectas de colores fuertes, y una línea recta y saturada al borde de la vista es exactamente lo que el ojo no puede ignorar. Acá no hay ninguna línea ni ningún borde. Hay dos capas: 1. Manchas de color enormes y difusas — fucsia, coral, turquesa — al 6% u 8%, en las esquinas y desbordando la pantalla. No tienen contorno: se funden con el ciruela del fondo y solo lo tiñen. Es lo que hace que el fondo se vea "de un color" y no de un gris pintado. 2. Un único motivo geométrico, grande y girado, apoyado en una esquina, al 3,5%. Girado a propósito: en diagonal no hay ninguna recta que se alinee con los bordes de la ventana ni con las filas de la tabla, así que no arma ese efecto de franja. Nada de esto se repite ni se desplaza con el scroll: es atmósfera, no decoración. */ [data-theme="telar"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70vw 70vh at 8% -15%, rgba(255, 61, 154, 0.10), transparent 62%), radial-gradient(55vw 60vh at 108% 12%, rgba(255, 154, 77, 0.07), transparent 60%), radial-gradient(80vw 70vh at 88% 112%, rgba(63, 217, 200, 0.055), transparent 62%), radial-gradient(60vw 60vh at -10% 105%, rgba(200, 107, 232, 0.07), transparent 62%); } /* El motivo, una sola vez y en diagonal. */ [data-theme="telar"] body::after { content: ""; position: fixed; right: -90px; bottom: -70px; width: 520px; height: 520px; z-index: 0; pointer-events: none; opacity: 0.035; transform: rotate(-24deg); background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23FFC2DE' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M120 400 200 320 280 400 200 480Z'/%3E%3Cpath d='M160 400 200 360 240 400 200 440Z'/%3E%3Cpath d='M240 280 320 200 400 280 320 360Z'/%3E%3Cpath d='M284 280 320 244 356 280 320 316Z'/%3E%3Cpath d='M360 160 420 100 480 160 420 220Z'/%3E%3Cpath d='M392 160 420 132 448 160 420 188Z'/%3E%3Cpath d='M60 300 100 260 140 300'/%3E%3Cpath d='M60 330 100 290 140 330'/%3E%3Cpath d='M180 180 220 140 260 180'/%3E%3Cpath d='M180 210 220 170 260 210'/%3E%3Cpath d='M300 60 340 20 380 60'/%3E%3Cpath d='M300 90 340 50 380 90'/%3E%3C/g%3E%3Cg fill='%23FFC2DE'%3E%3Ccircle cx='96' cy='448' r='5'/%3E%3Ccircle cx='40' cy='392' r='5'/%3E%3Ccircle cx='448' cy='96' r='5'/%3E%3Ccircle cx='484' cy='60' r='5'/%3E%3Ccircle cx='232' cy='232' r='5'/%3E%3Ccircle cx='140' cy='120' r='5'/%3E%3C/g%3E%3C/svg%3E"); } /* El contenido va por encima de la atmósfera. Selector adaptado de #root a .app-shell (2026-08-06): la raíz de este portal no usa el id "root" del kit original. */ [data-theme="telar"] .app-shell { position: relative; z-index: 1; } /* NOTA 2026-08-06: las reglas de acá para abajo apuntan a ".app-sidebar" (renombradas de ".sidebar" del kit original) -- el sidebar de este portal SÍ es reactivo al tema (corregido tras feedback de Marcelo: "lino no cambia el menu lateral"), así que el ornamento de Telar/Cordillera/Lino/Greda pinta sobre el sidebar real. */ /* El menú lateral es una superficie opaca, así que la atmósfera del fondo no se ve a través suyo: quedaba como un rectángulo plano al lado de una pantalla con color. Lleva la suya propia, con el mismo vocabulario pero más contenida — es una franja angosta y de lectura constante. Va todo en un solo `background`, con `!important`, porque el estilo en línea del componente usa la forma corta `background: var(--surface)` y esa forma borra la imagen de fondo. Por eso también se repite acá el color: la última capa de la lista es la que lo lleva. El resplandor fucsia queda detrás de la marca, arriba, que es donde el ojo entra; el coral abajo, apenas insinuado. El motivo se apoya sobre el borde derecho y sale cortado — entero se vería como un dibujo puesto ahí; cortado se lee como textura. */ [data-theme="telar"] .app-sidebar { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg transform='rotate(-24 95 95)' fill='none' stroke='%23FFC2DE' stroke-opacity='0.075' stroke-width='2.5' stroke-linejoin='round'%3E%3Cpath d='M95 40 130 75 95 110 60 75Z'/%3E%3Cpath d='M95 58 112 75 95 92 78 75Z'/%3E%3Cpath d='M34 132 62 104 90 132'/%3E%3Cpath d='M34 150 62 122 90 150'/%3E%3Cpath d='M116 142 144 114 172 142'/%3E%3C/g%3E%3Cg transform='rotate(-24 95 95)' fill='%23FFC2DE' fill-opacity='0.075'%3E%3Ccircle cx='28' cy='62' r='3.5'/%3E%3Ccircle cx='168' cy='58' r='3.5'/%3E%3Ccircle cx='148' cy='168' r='3.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -34px bottom 64px / 190px 190px, radial-gradient(150% 34% at 0% 0%, rgba(255, 61, 154, 0.15), transparent 72%), radial-gradient(130% 26% at 100% 100%, rgba(255, 154, 77, 0.07), transparent 70%), var(--surface) !important; } /* Geometría intermedia. Se aplica a los contenedores por su radio original en vez de a una clase, porque los estilos van en línea repartidos por toda la app y no hay una clase común que tocar. */ [data-theme="telar"] [style*="border-radius: 14px"], [data-theme="telar"] [style*="border-radius:14px"] { border-radius: 16px !important; } [data-theme="telar"] [style*="border-radius: 12px"], [data-theme="telar"] [style*="border-radius:12px"] { border-radius: 14px !important; } /* Botón principal: degradado fucsia → coral. */ [data-theme="telar"] [style*="background: var(--accentButton)"], [data-theme="telar"] [style*="background:var(--accentButton)"] { background-image: linear-gradient(135deg, #C42E7E 0%, #E8437F 50%, #FF7E6E 100%); } /* Detalles que rematan el tema. */ [data-theme="telar"] .font-display { letter-spacing: 0.2px; } [data-theme="telar"] ::selection { background: #D6357F; color: #FFFFFF; } [data-theme="telar"] ::-webkit-scrollbar-thumb { background: #6B3352; } /* ── Atmósfera de Cordillera ──────────────────────────────────────────────── Mismo criterio que en Telar — el ornamento dentro del fondo, sin bordes ni rectas — pero con otro dibujo y otra temperatura. Las manchas son más frías y más abiertas: acá el tema tiene que sentirse amplio, no envolvente. Y el motivo son curvas de nivel: anillos concéntricos irregulares, como los de un mapa topográfico. No hay un solo segmento recto en todo el dibujo, que es justamente lo que hace que se lea como terreno y no como gráfico. Los anillos son el MISMO trazado escalado — por eso son concéntricos de verdad — y llevan `non-scaling-stroke` para que la línea del anillo chico no quede más delgada que la del grande. Sin eso, el interior desaparece. */ [data-theme="cordillera"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(75vw 70vh at 6% -14%, rgba(92, 200, 232, 0.09), transparent 62%), radial-gradient(55vw 60vh at 108% 10%, rgba(201, 138, 75, 0.06), transparent 60%), radial-gradient(85vw 75vh at 90% 112%, rgba(46, 138, 176, 0.10), transparent 62%), radial-gradient(60vw 60vh at -12% 104%, rgba(120, 150, 180, 0.05), transparent 62%); } [data-theme="cordillera"] body::after { content: ""; position: fixed; right: -110px; bottom: -90px; width: 620px; height: 620px; z-index: 0; pointer-events: none; opacity: 0.5; transform: rotate(-9deg); background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'%3E%3Cg fill='none' stroke='%23A8D8EC' stroke-opacity='0.10' stroke-width='2'%3E%3Cg transform='translate(340 300)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M 0 -190 C 118 -196 196 -112 186 -8 C 176 96 96 178 -12 182 C -120 186 -196 102 -188 -4 C -180 -110 -104 -184 0 -190 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(0.83)' d='M 0 -190 C 118 -196 196 -112 186 -8 C 176 96 96 178 -12 182 C -120 186 -196 102 -188 -4 C -180 -110 -104 -184 0 -190 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(0.66)' d='M 0 -190 C 118 -196 196 -112 186 -8 C 176 96 96 178 -12 182 C -120 186 -196 102 -188 -4 C -180 -110 -104 -184 0 -190 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(0.49)' d='M 0 -190 C 118 -196 196 -112 186 -8 C 176 96 96 178 -12 182 C -120 186 -196 102 -188 -4 C -180 -110 -104 -184 0 -190 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(0.32)' d='M 0 -190 C 118 -196 196 -112 186 -8 C 176 96 96 178 -12 182 C -120 186 -196 102 -188 -4 C -180 -110 -104 -184 0 -190 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(0.16)' d='M 0 -190 C 118 -196 196 -112 186 -8 C 176 96 96 178 -12 182 C -120 186 -196 102 -188 -4 C -180 -110 -104 -184 0 -190 Z'/%3E%3C/g%3E%3Cg transform='translate(96 512)'%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(0.62)' d='M 0 -150 C 96 -158 158 -88 150 -4 C 142 80 74 144 -12 148 C -98 152 -158 82 -152 -6 C -146 -94 -84 -144 0 -150 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(0.44)' d='M 0 -150 C 96 -158 158 -88 150 -4 C 142 80 74 144 -12 148 C -98 152 -158 82 -152 -6 C -146 -94 -84 -144 0 -150 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(0.27)' d='M 0 -150 C 96 -158 158 -88 150 -4 C 142 80 74 144 -12 148 C -98 152 -158 82 -152 -6 C -146 -94 -84 -144 0 -150 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* El contenido va por encima de la atmósfera. */ [data-theme="cordillera"] .app-shell { position: relative; z-index: 1; } /* El menú lateral, por lo mismo que en Telar: es opaco y no deja pasar el fondo. Acá el resplandor petróleo va arriba, el cobre abajo, y las curvas se apoyan cortadas contra el canto derecho. */ [data-theme="cordillera"] .app-sidebar { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cg fill='none' stroke='%23A8D8EC' stroke-opacity='0.10' stroke-width='2' transform='translate(120 105) rotate(-9)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M 0 -95 C 59 -98 98 -56 93 -4 C 88 48 48 89 -6 91 C -60 93 -98 51 -94 -2 C -90 -55 -52 -92 0 -95 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(0.72)' d='M 0 -95 C 59 -98 98 -56 93 -4 C 88 48 48 89 -6 91 C -60 93 -98 51 -94 -2 C -90 -55 -52 -92 0 -95 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(0.48)' d='M 0 -95 C 59 -98 98 -56 93 -4 C 88 48 48 89 -6 91 C -60 93 -98 51 -94 -2 C -90 -55 -52 -92 0 -95 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' transform='scale(0.26)' d='M 0 -95 C 59 -98 98 -56 93 -4 C 88 48 48 89 -6 91 C -60 93 -98 51 -94 -2 C -90 -55 -52 -92 0 -95 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -40px bottom 60px / 210px 210px, radial-gradient(150% 34% at 0% 0%, rgba(92, 200, 232, 0.13), transparent 72%), radial-gradient(130% 26% at 100% 100%, rgba(201, 138, 75, 0.07), transparent 70%), var(--surface) !important; } /* Botón principal: degradado petróleo → azul profundo. Más corto y más contenido que el de Telar: acá el gesto es sobriedad, no fiesta. */ [data-theme="cordillera"] [style*="background: var(--accentButton)"], [data-theme="cordillera"] [style*="background:var(--accentButton)"] { background-image: linear-gradient(135deg, #1E6E8F 0%, #23597E 100%); } /* Nada de radios más blandos acá: la geometría firme es parte de la lectura. Solo los remates de color. */ [data-theme="cordillera"] ::selection { background: #1E6E8F; color: #FFFFFF; } [data-theme="cordillera"] ::-webkit-scrollbar-thumb { background: #2F4E5E; } /* ── Atmósfera de Lino y Greda ────────────────────────────────────────────── Los dos temas claros llevan el mismo tratamiento que sus versiones oscuras, con dos ajustes que impone el fondo claro: 1. Las manchas de color van MÁS abiertas y MÁS tenues. Sobre crema, una mancha marcada se ve como una mancha — literalmente, como si la pantalla estuviera sucia. Sobre oscuro ese mismo valor apenas se insinúa. 2. El motivo se dibuja en el color del acento, oscuro sobre claro, en vez de un tono pálido sobre oscuro. Es el mismo gesto invertido: en los dos casos la línea es apenas más oscura o más clara que su fondo. Los motivos son grecas escalonadas, no los de sus pares oscuros: Lino las lleva finas y dobles, con rombos y puntos entre medio; Greda las lleva gruesas y macizas, con triángulos llenos. Misma familia, distinto peso. */ [data-theme="lino"] body::before, [data-theme="greda"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; } [data-theme="lino"] body::before { background: radial-gradient(75vw 70vh at 6% -14%, rgba(190, 54, 112, 0.10), transparent 62%), radial-gradient(55vw 60vh at 108% 10%, rgba(217, 131, 79, 0.08), transparent 60%), radial-gradient(85vw 75vh at 90% 112%, rgba(190, 54, 112, 0.07), transparent 62%), radial-gradient(60vw 60vh at -12% 104%, rgba(217, 131, 79, 0.06), transparent 62%); } [data-theme="greda"] body::before { background: radial-gradient(75vw 70vh at 6% -14%, rgba(27, 101, 128, 0.10), transparent 62%), radial-gradient(55vw 60vh at 108% 10%, rgba(169, 102, 58, 0.07), transparent 60%), radial-gradient(85vw 75vh at 90% 112%, rgba(27, 101, 128, 0.08), transparent 62%), radial-gradient(60vw 60vh at -12% 104%, rgba(169, 102, 58, 0.05), transparent 62%); } [data-theme="lino"] body::after, [data-theme="greda"] body::after { content: ""; position: fixed; right: -100px; bottom: -80px; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-size: contain; } /* Lino: greca fina y doble, con rombos y puntos. */ [data-theme="lino"] body::after { width: 560px; height: 560px; opacity: 0.09; transform: rotate(-18deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23BE3670' stroke-width='3'%3E%3Cpath d='M30 530V470H90V410H150V350H210V290H270V230H330V170H390V110H450V50H510'/%3E%3Cpath d='M70 560V500H130V440H190V380H250V320H310V260H370V200H430V140H490V80H550'/%3E%3Cpath d='M70 300 92 322 70 344 48 322Z'/%3E%3Cpath d='M190 180 212 202 190 224 168 202Z'/%3E%3Cpath d='M310 60 332 82 310 104 288 82Z'/%3E%3Cpath d='M430 420 452 442 430 464 408 442Z'/%3E%3C/g%3E%3Cg fill='%23BE3670'%3E%3Ccircle cx='130' cy='240' r='5'/%3E%3Ccircle cx='250' cy='120' r='5'/%3E%3Ccircle cx='250' cy='480' r='5'/%3E%3Ccircle cx='370' cy='360' r='5'/%3E%3Ccircle cx='490' cy='240' r='5'/%3E%3C/g%3E%3C/svg%3E"); } /* Greda: la misma greca en versión maciza, con triángulos llenos. */ [data-theme="greda"] body::after { width: 600px; height: 600px; opacity: 0.075; transform: rotate(14deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%231B6580' stroke-width='7'%3E%3Cpath d='M40 560V480H120V400H200V320H280V240H360V160H440V80H520V0'/%3E%3Cpath d='M110 600V520H190V440H270V360H350V280H430V200H510V120H590V40'/%3E%3C/g%3E%3Cg fill='%231B6580'%3E%3Cpath d='M60 300 108 348 12 348Z'/%3E%3Cpath d='M220 140 268 188 172 188Z'/%3E%3Cpath d='M300 460 348 508 252 508Z'/%3E%3Cpath d='M460 300 508 348 412 348Z'/%3E%3Crect x='150' y='230' width='22' height='22'/%3E%3Crect x='390' y='150' width='22' height='22'/%3E%3Crect x='230' y='390' width='22' height='22'/%3E%3Crect x='470' y='470' width='22' height='22'/%3E%3C/g%3E%3C/svg%3E"); } [data-theme="lino"] .app-shell, [data-theme="greda"] .app-shell { position: relative; z-index: 1; } /* El menú lateral, por lo mismo de siempre: es opaco y no deja pasar el fondo. Acá la greca se apoya cortada contra el canto derecho. */ [data-theme="lino"] .app-sidebar { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cg transform='rotate(-18 105 105)' fill='none' stroke='%23BE3670' stroke-opacity='0.13' stroke-width='2.5'%3E%3Cpath d='M10 200V170H40V140H70V110H100V80H130V50H160V20H190'/%3E%3Cpath d='M32 210V180H62V150H92V120H122V90H152V60H182V30H210'/%3E%3Cpath d='M55 120 70 135 55 150 40 135Z'/%3E%3Cpath d='M145 65 160 80 145 95 130 80Z'/%3E%3C/g%3E%3Cg transform='rotate(-18 105 105)' fill='%23BE3670' fill-opacity='0.13'%3E%3Ccircle cx='100' cy='95' r='3.5'/%3E%3Ccircle cx='175' cy='170' r='3.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -40px bottom 60px / 210px 210px, radial-gradient(150% 34% at 0% 0%, rgba(190, 54, 112, 0.10), transparent 72%), radial-gradient(130% 26% at 100% 100%, rgba(217, 131, 79, 0.08), transparent 70%), var(--surface) !important; } [data-theme="greda"] .app-sidebar { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cg transform='rotate(14 105 105)' fill='none' stroke='%231B6580' stroke-opacity='0.11' stroke-width='5'%3E%3Cpath d='M10 200V165H45V130H80V95H115V60H150V25H185'/%3E%3Cpath d='M40 210V175H75V140H110V105H145V70H180V35H210'/%3E%3C/g%3E%3Cg transform='rotate(14 105 105)' fill='%231B6580' fill-opacity='0.11'%3E%3Cpath d='M60 110 82 132 38 132Z'/%3E%3Cpath d='M150 60 172 82 128 82Z'/%3E%3Crect x='108' y='150' width='14' height='14'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -40px bottom 60px / 210px 210px, radial-gradient(150% 34% at 0% 0%, rgba(27, 101, 128, 0.10), transparent 72%), radial-gradient(130% 26% at 100% 100%, rgba(169, 102, 58, 0.07), transparent 70%), var(--surface) !important; } /* Lino hereda de Telar la geometría más blanda; Greda, la firme de Cordillera. Es lo que hace que se lean como pares y no como cuatro temas sueltos. */ [data-theme="lino"] [style*="border-radius: 14px"], [data-theme="lino"] [style*="border-radius:14px"] { border-radius: 16px !important; } [data-theme="lino"] [style*="border-radius: 12px"], [data-theme="lino"] [style*="border-radius:12px"] { border-radius: 14px !important; } [data-theme="lino"] .font-display { letter-spacing: 0.2px; } [data-theme="lino"] [style*="background: var(--accentButton)"], [data-theme="lino"] [style*="background:var(--accentButton)"] { background-image: linear-gradient(135deg, #B02F6C 0%, #C9456F 50%, #D9834F 100%); } [data-theme="greda"] [style*="background: var(--accentButton)"], [data-theme="greda"] [style*="background:var(--accentButton)"] { background-image: linear-gradient(135deg, #1B6580 0%, #215270 100%); } [data-theme="lino"] ::selection { background: #BE3670; color: #FFFFFF; } [data-theme="greda"] ::selection { background: #1B6580; color: #FFFFFF; } * { box-sizing: border-box; } /* NOTA 2026-08-06: el kit original fija "height:100%" en html/body/raiz (necesario para el layout flex de su propia SPA). Acá se sacó -- era la causa de un bug real (reportado por Marcelo: "se corta el logo y la pagina cuando bajo en el scroll"): con body atado a exactamente 1 viewport de alto, el .app-header con position:sticky pierde su contenedor de scroll de referencia y deja de pegarse arriba. Este portal ya resuelve el alto minimo con .app-shell{min-height:100vh} (ver design-system.css), no necesita esta regla. */ html, body { margin: 0; } body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; } .font-display { font-family: 'Sora', 'Inter', sans-serif; } button { font-family: inherit; cursor: pointer; color: inherit; } input, select, textarea { outline: none; font-family: inherit; color: var(--text); } input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--accentSoft); border-color: var(--accent) !important; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; } .navitem { transition: background .15s, color .15s; } .navitem:hover { background: var(--surfaceAlt); } .card-hover { transition: transform .12s, box-shadow .12s; } .card-hover:hover { transform: translateY(-1px); box-shadow: var(--shadow); } @keyframes helpPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214,80,63,0.5); } 50% { box-shadow: 0 0 0 5px rgba(214,80,63,0); } } .help-tooltip-dot { animation: helpPulse 1.8s ease-in-out infinite; } @keyframes drawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } } .drawer-overlay { position: fixed; inset: 0; background: rgba(8,16,14,0.42); z-index: 70; animation: overlayIn .15s ease-out; } .drawer-panel { position: fixed; top: 0; right: 0; height: 100%; z-index: 71; animation: drawerIn .18s ease-out; } /* Utilidades mínimas tipo Tailwind, para no depender de un compilador de CSS */ .flex { display: flex; } .flex-1 { flex: 1; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .rounded-lg { border-radius: 10px; } .rounded-xl { border-radius: 14px; } .rounded-full { border-radius: 999px; } .w-full { width: 100%; } .min-w-0 { min-width: 0; } .shrink-0 { flex-shrink: 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .grid { display: grid; } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: repeat(4,1fr); } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-5 { padding: 20px; } .p-6 { padding: 24px; } .px-3 { padding-left: 12px; padding-right: 12px; } .py-2 { padding-top: 8px; padding-bottom: 8px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .text-dim { color: var(--textDim); } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* ── Responsive ──────────────────────────────────────────────────────── */ .topbar-menu-btn { display: none; } .sidebar-close { display: none; } .sidebar-overlay { display: none; } @media (max-width: 860px) { .grid-4 { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr; } } @media (max-width: 768px) { .topbar-menu-btn { display: flex; align-items: center; justify-content: center; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 91; transform: translateX(-100%); transition: transform .2s ease-out; box-shadow: var(--shadow); } .sidebar.sidebar-open { transform: translateX(0); } .sidebar-close { display: block; } .sidebar-overlay { display: block; z-index: 90; } .drawer-panel { width: 100vw !important; max-width: 100vw !important; } .cliente-row-icons, .cliente-row-autor { display: none; } .drawer-quick-actions { flex-wrap: wrap; } .drawer-quick-actions > button { min-width: calc(50% - 4px); } .clientes-header { flex-wrap: wrap; gap: 10px; } .clientes-search { width: 100% !important; } .clientes-header > div { width: 100%; } .auditoria-filtros { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 480px) { .auditoria-filtros { grid-template-columns: 1fr !important; } } /* Pipeline: en pantallas chicas las columnas se angostan pero el tablero sigue desplazándose en horizontal, que es como funciona en Odoo y en Trello. */ @media (max-width: 768px) { .pipeline-scroll > div { flex: 0 0 210px !important; width: 210px !important; } } /* Cuadrícula del calendario: la celda se resalta al pasar el mouse para que se note que es clickeable, sin agregarle un borde que rompería la grilla. */ .calendario-celda { transition: background .12s; } .calendario-celda:hover { background: var(--accentSoft) !important; opacity: 1 !important; } @media (max-width: 900px) { /* En pantallas chicas la grilla de 7 columnas queda ilegible: se deja desplazar en horizontal en vez de aplastar las celdas. */ .calendario-celda { min-height: 88px; } } /* Selección de filas. La casilla de cada fila está presente pero invisible: aparece al pasar el mouse o cuando ya hay algo seleccionado. Ocupa su espacio siempre, para que al aparecer no se corra la tabla entera. La casilla de la CABECERA se ve siempre — es la pista de que las filas se pueden seleccionar. Sin ella, esconder las de fila hace que nadie descubra que existe la selección múltiple. */ .celda-seleccion input[type="checkbox"] { opacity: 0; transition: opacity .12s; } .fila-seleccionable:hover .celda-seleccion input[type="checkbox"], .celda-seleccion input[type="checkbox"]:focus-visible, .modo-seleccion .celda-seleccion input[type="checkbox"] { opacity: 1; } /* ── Entrada del logo en el login ────────────────────────────────────── El logo aparece grande y centrado sobre el panel, se dibuja el latido, y después viaja a su lugar arriba a la izquierda. Es una sola secuencia de dos segundos: lo justo para que se lea la marca sin hacer esperar a quien solo quiere entrar. Los campos del formulario están activos desde el principio, así que la animación nunca bloquea. */ @keyframes marcaEntra { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.82); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 62% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.28) translateY(-40px); } } @keyframes marcaAterriza { 0%, 62% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: scale(1); } } /* El trazo del escudo se dibuja solo: el latido "late" una vez al aparecer. */ @keyframes latidoTrazo { 0% { stroke-dashoffset: 60; } 100% { stroke-dashoffset: 0; } } .marca-intro { position: absolute; top: 42%; left: 50%; z-index: 2; pointer-events: none; text-align: center; animation: marcaEntra 2.1s cubic-bezier(.4, 0, .2, 1) forwards; } .marca-intro .marca-latido path:last-child { stroke-dasharray: 60; animation: latidoTrazo .9s ease-out .15s both; } .marca-cabecera { animation: marcaAterriza 2.1s ease-out both; } /* Quien pide menos movimiento ve la marca ya puesta en su lugar, sin viaje. */ @media (prefers-reduced-motion: reduce) { .marca-intro { display: none; } .marca-cabecera { animation: none; } .marca-intro .marca-latido path:last-child { animation: none; stroke-dashoffset: 0; } } /* ===== Vista previa de cada tema, para el selector ================== Literales a proposito: las variables de un tema que no esta aplicado no se pueden leer desde CSS. Van aca, pegadas a la paleta que representan, para que al cambiar un tema no se olvide su miniatura. Si alguna vez no calzan, lo que manda es el bloque [data-theme=...] de mas arriba. */ .theme-vista{--v-bg:#F6F7FA; --v-surface:#FFFFFF; --v-text:#292B2A; --v-accent:#1B3A5C;} .theme-vista[data-tema="light"] {--v-bg:#F6F7FA; --v-surface:#FFFFFF; --v-text:#292B2A; --v-accent:#1B3A5C;} .theme-vista[data-tema="dark"] {--v-bg:#0F0F0F; --v-surface:#1F1F1F; --v-text:#F1F1F1; --v-accent:#34D399;} .theme-vista[data-tema="lino"] {--v-bg:#F6EFE9; --v-surface:#FDF8F4; --v-text:#3A2530; --v-accent:#BE3670;} .theme-vista[data-tema="greda"] {--v-bg:#F1EDE5; --v-surface:#FAF7F1; --v-text:#262E33; --v-accent:#1B6580;} .theme-vista[data-tema="cordillera"]{--v-bg:#0C1319; --v-surface:#182530; --v-text:#E4EEF4; --v-accent:#5CC8E8;} .theme-vista[data-tema="telar"] {--v-bg:#150C16; --v-surface:#291731; --v-text:#FCEDF7; --v-accent:#FF6FAE;} /* Desplegables nativos en temas oscuros (2026-09-29, Marcelo: "aparecen claro de fondo con letras blancas y no se ve nada a no ser que se le pase el mouse"). Las