/* ============================================================================ SOFTLINE UI — Sistema de diseño unificado de Intra Line ---------------------------------------------------------------------------- Tokens de marca (--sl-*) + componentes (.sl-*). Doc: _devel/design-system.md Coexiste con Bootstrap 3 (Nice Admin) y PREDOMINA sobre él. Cargar SIEMPRE después del bundle de Bootstrap/Nice Admin. ESCALA / ACCESIBILIDAD ---------------------------------------------------------------------------- Los tamaños de los componentes se expresan en REM, de modo que toda la UI escala proporcionalmente (con reflow correcto, sin transform borroso) desde un único mando: el font-size raíz. La preferencia por usuario (usuarios_preferencias.up_ui_scale) se pinta como . 'normal' ya parte de un tamaño cómodo (112.5% del navegador), y grande/mayor escalan desde ahí (ideal para baja visión; convive con Ctrl/+/- del navegador). Los % son relativos al tamaño del navegador, así respetan su config base. Como este archivo solo se carga en pantallas migradas, la escala solo afecta a esas pantallas (piloto actual: clientes_fichas). ============================================================================ */ html[data-ui-scale="normal"] { font-size: 112.5%; } /* ~18px base (nuevo baseline) */ html[data-ui-scale="grande"] { font-size: 125%; } /* ~20px base */ html[data-ui-scale="mayor"] { font-size: 137.5%; } /* ~22px base */ /* ——— 1. Design tokens —————————————————————————————————————————————————— */ :root { /* Marca: azul */ --sl-blue: #034D96; --sl-blue-600: #023C77; --sl-blue-100: #E6EEF7; --sl-blue-050: #F3F7FB; /* Marca: rosa (acento) */ --sl-pink: #E33678; --sl-pink-600: #C21F5F; --sl-pink-050: #FDEEF4; /* Marca: púrpura (focus/realce) */ --sl-purple: #80388D; /* Acción destructiva (botón de eliminar) — ver .sl-btn--danger ⚠️ NO reutilizar "--sl-red" para esto: ese token ya existe más abajo con #D5384C y significa un ESTADO ("sin empezar / bloqueado", lo consume .sl-lock-btn--locked entre otros). Son dos cosas distintas que dio la casualidad de que son rojas; fundirlas ataría el color de un botón al de un estado y repintaría los candados al tocar cualquiera de los dos. El tono -600 es el mismo salto de luminosidad (-11 pp en HSL) que separa --sl-pink de --sl-pink-600, el par existente más parecido en tono y luminosidad: así el oscurecido al hover se siente igual que en el resto. */ --sl-danger: #E3274B; --sl-danger-600: #BA1837; /* Marca de terceros: Clockify (integración de tiempos) — ver .sl-btn--clockify. #03A9F4 es el azul de marca de Clockify tal cual, deliberadamente distinto de --sl-blue (#034D96, la marca de SOFT LINE): identifica una acción de esa integración externa, no una acción propia de la app. El tinte "-050" sigue el mismo cálculo que --sl-blue-050/--sl-pink-050 (mezcla ~92% blanco). */ --sl-clockify: #03A9F4; --sl-clockify-050: #EBF8FE; /* Superficies */ --sl-bg-page: #FFFFFF; /* fondo de página blanco; las cajas se definen por borde */ --sl-bg-card: #FFFFFF; --sl-bg-soft: #FAFBFC; /* zonas internas (cabeceras de panel/tabla): casi blanco */ /* Bordes */ --sl-border: #babcbf; --sl-border-2: #CFD6DE; --sl-border-3: #eaeaea; /* Texto (fg-3 oscurecido a #6B7685 para cumplir contraste WCAG AA) */ --sl-fg-1: #034D96; --sl-fg-2: #4A5B6F; --sl-fg-3: #6B7685; --sl-grey: #a2a2a2; /* Sombras */ --sl-shadow-sm: 0 1px 2px rgba(3,77,150,.06); --sl-shadow-md: 0 4px 14px rgba(3,77,150,.08); --sl-shadow-card: 0 1px 2px rgba(3,77,150,.06), 0 4px 12px rgba(3,77,150,.04); /* Foco accesible */ /* old foco --sl-focus: 0 0 0 3px rgba(128,56,141,.35);*/ --sl-focus: 0 0 0 3px rgb(227 54 120 / 35%); /* Radios (en px: son cosméticos, no necesitan escalar) */ /* --sl-radius-sm: 4px; --sl-radius-md: 8px; --sl-radius-lg: 12px; */ --sl-radius-xxs: 6px; --sl-radius-sm: 8px; --sl-radius-md: 8px; --sl-radius-lg: 8px; --sl-radius-pill: 999px; /* Espaciado (escala 4px, en rem para que escale con la interfaz) */ --sl-space-1: .25rem; --sl-space-2: .5rem; --sl-space-3: .75rem; --sl-space-4: 1rem; --sl-space-5: 1.5rem; /* Tipografía */ --sl-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Alto de la barra inferior de la app (.sl-appfooter). En px y no en rem a propósito: es una franja de chrome, no texto de contenido, y no debe crecer con la preferencia de escala de la interfaz. */ --sl-appfooter-h: 40px; /* Estados semánticos */ --sl-state-progress: #ffa630; --sl-state-neutral: #a8a8a8; --sl-state-done: #5cb063; --sl-state-review: #FF5C8D; --sl-state-urgent: #FF5566; } /* ——— 2. Contenedor de página ——————————————————————————————————————————— */ /* Fondo de página blanco. El tema legacy pinta body { background:#eee }; como este CSS solo se carga en pantallas migradas, lo blanqueamos solo ahí (gana por orden de carga, sin !important). Las cajas se definen por su borde gris. */ body { background: var(--sl-bg-page); } #sl-app { font-family: var(--sl-font); -webkit-font-smoothing: antialiased; color: var(--sl-fg-2); background: var(--sl-bg-page); min-height: 100%; /* Base para el texto legacy suelto que hereda (Bootstrap/Nice Admin lo dejaba en ~15px fijos, sin ligar a la escala). En rem para que ahora SÍ escale con data-ui-scale. */ font-size: .875rem; /* Montserrat 400 + antialiasing se veía fino/desvaído; 500 (medium) mejora la legibilidad. */ font-weight: 500; } /*.fa, .fa-brands, .fa-duotone, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fab, .fad, .fal, .far, .fas, .fat { line-height: 0 !important; }*/ /* ——— 3. Tipografía ————————————————————————————————————————————————————— */ .sl-title { font-size: 1.0625rem; font-weight: 700; color: var(--sl-blue); letter-spacing: -0.01em; margin: 0; line-height: 1.2; } .sl-title--sm { font-size: .8rem; font-weight: 600; color: var(--sl-blue); } .sl-eyebrow { font-size: .8125rem; font-weight: 700; color: var(--sl-pink); line-height: 1.2; } .sl-label { font-size: .5625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sl-fg-3); margin: 0; } .sl-meta-label { font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--sl-grey); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-meta-value { font-size: .75rem; font-weight: 700; color: var(--sl-blue); line-height: 1.3; } .sl-meta-value--pink { color: var(--sl-pink); } .sl-text { font-size: .8125rem; font-weight: 400; color: var(--sl-fg-2); line-height: 1.45; } .sl-text--muted { font-size: .6875rem; font-weight: 500; color: var(--sl-grey); } /* Rosa de marca como color de texto suelto. Uso actual: la "Fecha prev." del listado de asuntos (asunto y encargo), que antes iba en texto normal / en un style="color:blue" inline. Se destaca porque es LA fecha que se mira en ese listado y comparte celda vecina con "Fecha cr.", que va en texto normal: sin color, ambas se confundian de un vistazo. */ .sl-text--pink { color: var(--sl-pink); } /* ——— 4. Botones ———————————————————————————————————————————————————————— */ .sl-btn, #sl-app tr.footable-filtering .input-group .btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; height: 32px; padding: 0 .75rem; font-family: var(--sl-font); font-size: .75rem; font-weight: 500; line-height: 1; color: var(--sl-fg-2); background: #fff; border: 1px solid var(--sl-border); border-radius: var(--sl-radius-sm); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s; } .sl-btn:hover, #sl-app tr.footable-filtering .input-group .btn:hover { transform: translateY(-1px); text-decoration: none; } .sl-btn:focus, #sl-app tr.footable-filtering .input-group .btn:focus { outline: none; box-shadow: var(--sl-focus); } .sl-btn:active, #sl-app tr.footable-filtering .input-group .btn:active { transform: translateY(0); } .sl-btn[disabled], #sl-app tr.footable-filtering .input-group .btn[disabled], .sl-btn.is-disabled, #sl-app tr.footable-filtering .input-group .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; } /* Indicador con forma de botón pero que NO es un control: informa de un estado y no hace nada al pulsarlo (p.ej. "encargo creado por un cliente"). Mismo criterio que .sl-lock-btn.is-static para el candado sin permiso: si no hay acción, que no la prometa ni el cursor ni el hover. */ .sl-btn.is-static { cursor: default; } .sl-btn.is-static:hover, .sl-btn.is-static:focus { transform: none; box-shadow: none; } #sl-app tr.footable-filtering .input-group .input-group-addon, #sl-app tr.footable-filtering .input-group .input-group-btn { width: auto; display: flex; gap: 5px; } .sl-btn--primary, #sl-app tr.footable-filtering .input-group .btn-primary { background: var(--sl-blue); border-color: var(--sl-blue); color: #fff; } /* :focus a propósito: "a:hover,a:focus{color:#0055b3}" del theme base pisa el color y deja el texto ilegible en un enfocado. */ .sl-btn--primary:hover, .sl-btn--primary:focus, #sl-app tr.footable-filtering .input-group .btn-primary:hover { background-color: var(--sl-blue-600) !important; border-color: var(--sl-blue-600); color: #fff; } .sl-btn--primary i { border: none !important; width: unset !important; line-height: 0; } #sl-app tr.footable-filtering .input-group .input-group-btn .btn.btn-default { position: relative !important; } .sl-btn--pink { background: var(--sl-pink); border-color: var(--sl-pink); color: #fff; } .sl-btn--pink:hover, .sl-btn--pink:focus { background: var(--sl-pink-600); border-color: var(--sl-pink-600); color: #fff; } .sl-btn--ghost { background: transparent; color: var(--sl-fg-2); } .sl-btn--ghost:hover, .sl-btn--ghost:focus { background: var(--sl-blue); border-color: var(--sl-blue); color: #fff; } /* Acción destructiva. Relleno sólido, no contorno: hasta 2026-09-14 era un botón "fantasma" (fondo transparente, borde gris, texto gris) que solo se teñía al pasar el ratón, así que en reposo era indistinguible del botón de editar de al lado — justo la acción de la que conviene distinguirlo. Ahora se lee de un vistazo. Estructura calcada de .sl-btn--primary, incluido el ":focus": no es simetría, es necesario — el theme base trae "a:hover,a:focus{color:#0055b3}" y varios de estos botones son , así que sin él el texto se vuelve azul al enfocarlos. */ .sl-btn--danger { background: var(--sl-danger); border-color: var(--sl-danger); color: #fff; } .sl-btn--danger:hover, .sl-btn--danger:focus { background-color: var(--sl-danger-600) !important; border-color: var(--sl-danger-600); color: #fff; } /* Semáforo en forma de botón — .sl-btn--ok / .sl-btn--warn (2026-09-17). Nacen para los desplegables del resumen de la ficha de asunto (modules/resumen.asunto.pills.tpl), donde el COLOR DEL BOTÓN es el estado del grupo: verde todo acabado, rojo algo sin asignar o atrasado, ámbar algo esperando a alguien. Hasta ahora .sl-btn solo tenía --primary, --pink, --danger y --ghost, así que ese semáforo no se podía expresar con un botón; en pills sí, porque $pill_color acepta cualquier token de color. Estructura calcada de .sl-btn--danger, ":focus" incluido y por su mismo motivo: el theme base trae "a:hover,a:focus{color:#0055b3}" y estos botones pueden ser . ⚠️ EL ÁMBAR NO LLEVA TEXTO BLANCO, y no es un descuido ni una asimetría gratuita. --sl-amber es #E2A900: blanco encima da 2,1:1, ilegible. Con --sl-blue-600 (#023C77, token que ya existe) sube a 5,17:1 y pasa AA sin inventar un color nuevo. Es la razón de que --warn sea el único botón sólido del sistema con tinta oscura; si alguien lo "corrige" a #fff por simetría, rompe la legibilidad. ⚠️ El verde SÍ lleva blanco, a 3,49:1, que se queda corto para AA en texto pequeño. Se deja así A PROPÓSITO: es exactamente el contraste que --sl-green ya tiene como texto sobre blanco en el resto de la app (.sl-copy.is-copied, los iconos de tarea hecha), de modo que no se introduce aquí un problema nuevo. Arreglarlo de verdad es tocar --sl-green, y eso repinta media aplicación — decisión de diseño, no de esta pantalla. Queda anotado. */ .sl-btn--ok { background: var(--sl-green); border-color: var(--sl-green); color: #fff; } .sl-btn--ok:hover, .sl-btn--ok:focus { background-color: var(--sl-green-600) !important; border-color: var(--sl-green-600); color: #fff; } .sl-btn--warn { background: var(--sl-amber); border-color: var(--sl-amber); color: var(--sl-blue-600); } .sl-btn--warn:hover, .sl-btn--warn:focus { background-color: var(--sl-amber-600) !important; border-color: var(--sl-amber-600); color: var(--sl-blue-600); } /* "Contorno", no relleno sólido — a propósito, para diferenciarlo de los botones de acción propia (--primary/--pink/--danger/...) de un botón que dispara una integración EXTERNA (Clockify). Misma receta que .sl-generic-id-badge (fondo claro del color + borde + texto/icono del mismo color, en vez de fondo sólido + texto blanco): fondo -050, borde y color en --sl-clockify. El :hover reutiliza el mismo "filter: brightness()" del id-badge en vez de un -600 sólido, porque aquí no hay relleno que oscurecer, solo un tinte claro. */ .sl-btn--clockify { background: var(--sl-clockify-050); border-color: var(--sl-clockify); color: var(--sl-clockify); } .sl-btn--clockify:hover, .sl-btn--clockify:focus { filter: brightness(0.92); border-color: var(--sl-clockify); color: var(--sl-clockify); } .sl-btn--pill { border-radius: var(--sl-radius-pill); } .sl-btn--xs { /*height: 1.3rem;*/ height: 24px; padding: .3rem; } .sl-btn--xxs { height: 1rem; padding: .3rem; border-radius: var(--sl-radius-xxs); } .sl-btn--icon, #sl-app tr.footable-filtering .input-group .btn { width: 32px; min-width: 32px; max-width: 32px; padding: 0; } .sl-btn--icon.sl-btn--xs { width: 24px; max-width: 24px; min-width: 24px; } .sl-btn--icon.sl-btn--xxs { width: 1rem; } .sl-btn--icon i, .sl-btn--icon.sl-btn--xs i { line-height: 0 !important; } .sl-btn--icon.sl-btn--xxs i { font-size: .60rem; } /* Flecha de dropdown que gira al abrirse el menú. Se pone JUNTO a la .caret de Bootstrap 3 (bootstrap-niceadmin-bundle-theme.css:2817), que es quien dibuja el triángulo con bordes: . Aquí solo se añaden las tres cosas que le faltan, sin repetir la geometría: · el color del texto del botón en vez del negro fijo de Bootstrap, · el giro de 180° cuando el menú está abierto, · y quitarle el margin-left de BS3, porque .sl-btn ya separa con `gap`. El gancho del estado es el .open que Bootstrap pone en el PADRE del .dropdown-toggle, así que no hace falta ni una línea de JS. Genérico a propósito: vale para cualquier dropdown del design system, no solo para el de "Imprimir" de los encargos. El triángulo cabe entero en su caja de borde (8x4px) y el origen de la rotación es su centro, así que al girar no se desplaza ni un píxel. */ #sl-app .sl-caret { margin-left: 0; border-top-color: currentColor; /* En un .dropup, Bootstrap 3 apaga el borde superior y dibuja el triangulo con el INFERIOR, y ademas le clava el color negro literal (bootstrap-niceadmin-bundle-theme.css: ".dropup .caret { border-bottom: 4px solid #000 }"). Sin esta linea, la flecha de los desplegables que se abren hacia arriba —los de documentos y fotos— sale negra en vez de tomar la tinta del boton. En un dropdown normal no hace nada: ahi ese borde mide 0. */ border-bottom-color: currentColor; transition: transform .15s ease; } #sl-app .open > .dropdown-toggle .sl-caret { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { #sl-app .sl-caret { transition: none; } } /* Variante de botón-icono que además lleva un badge de notificación (contador), p.ej. los botones del header en modules/barra_top_right.tpl (ALERTAS, AVISOS, NOTIFICACIONES) y el botón "Abrir encargo" de asuntos.tpl (.sl-encargo-num-btn). Se añade JUNTO a las clases mínimas: "sl-btn sl-btn--primary sl-btn--icon sl-btn--icon-badge". El icono principal DEBE ser el primer hijo del botón, y debe quedar como el ÚNICO hijo que participa en el centrado flex de .sl-btn: cualquier otro hijo directo —el badge ".sl-badge-count", el (subrayado de estado que viaja con los botones del header, ver span.num.alertas.tpl y barra_top_right.tpl), o un segundo decorativo (p.ej. el candado ".encargo-blocked" de un encargo bloqueado, ver asuntos.tpl)— se saca del flujo con position:absolute (por eso ":not(:first-child)" y no ":not(i)": un segundo también debe salir del flujo). Así el icono principal queda perfectamente centrado por el justify-content/align-items de .sl-btn en vez de compartir el centrado con esos elementos vecinos (antes el icono quedaba desplazado). La posición concreta de cada hijo adicional (badge en una esquina, candado en otra) la decide quien use la clase. */ .sl-btn--icon-badge { position: relative; overflow: visible; } .sl-btn--icon-badge > *:not(:first-child) { position: absolute; } /* El badge asoma en la esquina superior derecha (-6px) sin llegar a tapar el icono del todo. !important porque ".megaheader ul li .badge" (mega-design.css, bundleado en compiled.css) ya fija position:absolute;top:0;right:0 con la misma especificidad (0,2,2 vs 0,2,0 aquí): al empatar en nº de clases, gana por nº de selectores de tipo (ul, li), así que sin !important el badge se quedaría clavado en la esquina en vez de asomar hacia fuera. */ .sl-btn--icon-badge .sl-badge-count { top: -6px !important; right: -6px !important; left: auto !important; } /* --- Botón de adjudicación con las clases del sistema --------------------- modules/boton.adjudicacion.tpl es de los de antes: emite id="adjud" y TODA su geometría cuelga de ese id en css/style.css:8234 — "button#adjud { height:22px; width:23px }" más un "position:absolute" para el reloj y otro para el badge. Con esas medidas el botón salía a 23x22 al lado de los 24x24 de sus vecinos en la cabecera de la tabla de partes, y se le notaba (usuario 2026-09-15). Medido, no estimado. No basta con darle las clases del sistema: "button#adjud" es (1,0,1) y le gana a ".sl-btn--xs" (0,1,0), así que la altura seguía siendo 22px. De ahí este bloque, que es un desempate de especificidad y nada más. ⚠️ Va acotado con ".sl-btn" a propósito, y eso NO es decoración: el mismo partial se pinta en los tres diálogos de proyectos (dialog.proyecto.listado.*) —que viven fuera de #sl-app y conservan sus clases de Bootstrap— y como fila del menú "+ Nuevo", donde lleva ".sl-menu__link". Ninguno de los tres tiene ".sl-btn", así que a ninguno le llega esto y se quedan exactamente como estaban. ⚠️ Las medidas se repiten aquí (24px) en vez de heredarse, y es inevitable: para ganarle a un selector de id hay que volver a declarar la propiedad. Si .sl-btn--xs cambia de altura, esto hay que cambiarlo con ella. El id, de paso, es un defecto en sí mismo: se emite una vez por fila, o sea que en una tabla de partes hay tantos id="adjud" como adjudicaciones. No se toca aquí porque es el gancho del que cuelga todo el CSS legacy de arriba. */ #sl-app button#adjud.sl-btn--xs { height: 24px; } #sl-app button#adjud.sl-btn--icon.sl-btn--xs { width: 24px; min-width: 24px; max-width: 24px; } /* El RELOJ vuelve al flujo para que lo centre el flex de .sl-btn, en vez de quedarse clavado en 2,2 como lo dejaba el CSS legacy para una caja de 23x22 — ahí dentro de 24x24 se salía por arriba y quedaba recortado. Y el BADGE (la marca de acción: + / ✓ / ✎) pasa a ser un DISCO del color del botón en la esquina inferior derecha, en vez del "background: none" que trae de css/style.css:8261. Esto no es cosmética, es lo único que lo hace visible, y costó dos intentos: 1) Con el reloj centrado y el badge sin fondo, el "+" cae ENCIMA del reloj — y los dos son blancos. Blanco sobre blanco: el usuario lo reportó como "no se ve el icono". 2) Sacándolo fuera del botón ("top:-5px; right:-5px", al estilo de .sl-btn--icon-badge) es peor: queda blanco sobre el fondo claro de la página. Invisible del todo, y sin un solo error en ninguna parte que lo delate. Con fondo propio, el badge recorta un hueco limpio en el reloj y se lee a 24px. Es el mismo recurso que usa cualquier icono-con-insignia; lo que no se puede reutilizar aquí es ".sl-badge-count", que es el círculo ROSA de los contadores del header y este badge no cuenta nada: marca qué hace el botón. El color va con var(--sl-blue) porque estos dos botones son siempre .sl-btn--primary (línea 201). Si algún día se pinta en otro color, esto hay que revisarlo. */ #sl-app button#adjud.sl-btn > i#icon { position: static; top: auto; left: auto; } #sl-app button#adjud.sl-btn > span.badge { top: auto; bottom: -1px; right: -1px; left: auto; width: 11px; min-width: 11px; height: 11px; background: var(--sl-blue); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; line-height: 1; } /* --- Grupo de botones-badge del header (modules/barra_top_right.tpl) ------ AYUDA / ALERTAS / BONO / AVISOS / NOTIFICACIONES: la tira de botones-icono del extremo derecho del header (.megaheader), fuera de #sl-app. Tres correcciones sobre lo que traía mega-design.css, las tres medidas en pantalla y no supuestas (1600px, cliente softline, bg_class="white-bg"): 1) EL BADGE ATERRIZABA ENCIMA DEL BOTÓN DE AL LADO. El contador de AVISOS ocupaba 1536-1551 contra un botón que empieza en 1551. ⚠️ EL HUECO ENTRE BOTONES NO SE TOCA, Y ESO ES DELIBERADO. La primera versión de este arreglo ensanchaba el gap de 5px a .5rem, y era tratar el síntoma: el hueco de 5px ya IGUALA al del grupo de la izquierda del header (Asuntos, Comerciales, Llamadas...), que no usa gap ninguno sino el carácter de espacio que queda entre sus en el HTML — mide 4-5px según el redondeo. Al subirlo, la derecha se veía más suelta que la izquierda. Lo que sobra es lo que ASOMA EL BADGE: la regla genérica de arriba lo saca -6px, más que el hueco entero. Aquí se mete a -3px, que con el hueco de 5px deja 2px de aire —suficientes, porque el badge lleva su anillo blanco de 2px— y sigue leyéndose como un contador pegado a la esquina. 2) EL BADGE DEL ÚLTIMO BOTÓN SE SALÍA DEL HEADER. La