/* * ============================================================================ * SISTEMA DE DISENO DEL WMS DE EEPAT * ============================================================================ * * Esto no es una hoja de estilos suelta: es la ley visual del sistema. Si algo * se ve distinto al resto, o esta mal escrito o le falta una ficha de aqui. * * --------------------------------------------------------------------------- * LA TESIS * --------------------------------------------------------------------------- * El WMS no es una pagina de producto ni un panel de SaaS. Es el instrumento * con el que se opera un almacen: se mira de lejos, con guantes, con una * pistola de codigo en la mano, y lo que se lee decide si una pieza sale dos * veces. Se disena como equipo profesional, no como folleto: * * - Densidad antes que aire. Un supervisor tiene que ver quince renglones, * no siete. * - Contraste antes que sutileza. Se lee a tres metros del monitor. * - La linea antes que la sombra. Las superficies se separan con un filete * de 1px, no flotando. * - Un solo acento: el azul de EEPAT. El rojo NO decora, solo significa * peligro o error. * * --------------------------------------------------------------------------- * LO QUE ESTA PROHIBIDO, Y POR QUE * --------------------------------------------------------------------------- * Hay una estetica reconocible de interfaz hecha en serie. El sistema no la * usa. Nada de esto entra: * * PROHIBIDO MOTIVO * Degradados en botones Un boton solido se lee mejor y no caduca * Sombras de color, resplandores No existe la luz de colores; delata el molde * Sombra en superficies quietas Solo lleva sombra lo que de verdad flota * Esquinas de 16px o mas Redondea a instrumento, no a burbuja * Emojis como iconos Cambian en cada sistema y no se imprimen * Cristal esmerilado Sacrifica contraste, que no se negocia * Un rotulo sobre cada titulo Una seccion no necesita que la presenten * Tarjeta con icono y dos lineas Es el molde de todas las paginas iguales * * --------------------------------------------------------------------------- * LAS FICHAS: TRES CAPAS * --------------------------------------------------------------------------- * 1. Primitiva --wms-azul-500 el color que existe * 2. Semantica --wms-accion para que sirve * 3. Componente --wms-control-alto cuanto mide una pieza * * Una vista NUNCA escribe un color literal: usa la ficha semantica. Cambiar la * identidad visual del sistema es tocar la capa 1, y lo demas obedece. */ /* ========================================================================== CAPA 1. PRIMITIVAS Derivadas del logotipo de EEPAT: azul #3b62af y rojo #d81f25. ========================================================================== */ :root { /* Azul de EEPAT. Es el unico acento del sistema */ --wms-azul-50: #f1f4fc; --wms-azul-100: #dfe7f6; --wms-azul-200: #c8d1e5; --wms-azul-300: #98add7; --wms-azul-400: #6183c7; --wms-azul-500: #3b62af; /* el del logotipo, exacto */ --wms-azul-600: #2e5299; --wms-azul-700: #22407d; --wms-azul-800: #193162; --wms-azul-900: #112346; /* * Rojo de EEPAT. En el logotipo es el trazo que cruza la palabra. En el * sistema significa exactamente dos cosas: peligro y error. Nunca decora. */ --wms-rojo-50: #fdeded; --wms-rojo-100: #fbdbdc; --wms-rojo-200: #f6c1c3; --wms-rojo-500: #d81f25; /* el del logotipo, exacto */ --wms-rojo-600: #bd1b20; --wms-rojo-700: #9a1a1e; /* Los otros dos estados del almacen. Apagados a proposito */ --wms-verde-50: #e7f8f0; --wms-verde-100: #c9eddd; --wms-verde-500: #2c9664; --wms-verde-600: #247c53; --wms-verde-700: #1b6a48; --wms-ambar-50: #fef5e7; --wms-ambar-100: #fce7c4; --wms-ambar-500: #f59f0a; --wms-ambar-600: #c97f08; --wms-ambar-700: #aa5909; /* * Neutros. No son grises puros: llevan el mismo tono 220 del azul de la * marca con muy poca saturacion. Por eso el sistema se ve de una pieza y * no como una plantilla con un color encima. */ --wms-gris-0: #ffffff; --wms-gris-25: #fbfbfb; --wms-gris-50: #f7f7f8; --wms-gris-100: #efeff0; --wms-gris-200: #e1e2e5; --wms-gris-300: #c9cbcf; --wms-gris-400: #9fa2a8; --wms-gris-500: #747881; --wms-gris-600: #5a5f68; --wms-gris-700: #434751; --wms-gris-800: #2c313a; --wms-gris-900: #1b1f28; --wms-gris-950: #11151d; /* Tipografia */ --wms-fuente: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --wms-fuente-dato: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Escala tipografica. Seis tamanos, ni uno mas */ --wms-txt-xs: 11px; /* rotulos de columna y ayudas */ --wms-txt-sm: 12.5px; /* la mayor parte de la interfaz */ --wms-txt-md: 14px; /* cuerpo y campos */ --wms-txt-lg: 16px; /* titulo de tarjeta */ --wms-txt-xl: 20px; /* titulo de pantalla */ --wms-txt-2xl: 27px; /* cifra de indicador */ /* Espaciado: multiplos de 4. No hay valores sueltos */ --wms-e1: 4px; --wms-e2: 8px; --wms-e3: 12px; --wms-e4: 16px; --wms-e5: 20px; --wms-e6: 24px; --wms-e8: 32px; --wms-e10: 40px; /* Radios de instrumento, no de burbuja */ --wms-r-sm: 3px; --wms-r-md: 5px; --wms-r-lg: 7px; /* * Sombras. SOLO para lo que de verdad flota sobre la pagina: menus, * ventanas y globos de ayuda. Una tarjeta quieta lleva filete, no sombra. */ --wms-sombra-flota: 0 4px 12px -2px rgba(17, 21, 29, .12), 0 2px 4px -2px rgba(17, 21, 29, .08); --wms-sombra-ventana: 0 16px 40px -8px rgba(17, 21, 29, .22), 0 4px 12px -4px rgba(17, 21, 29, .12); /* * Movimiento. Las curvas de CSS son demasiado flojas; estas tienen empuje. * Nunca ease-in: arranca lento justo cuando la persona esta mirando. */ --wms-salida: cubic-bezier(.23, 1, .32, 1); --wms-ambas: cubic-bezier(.77, 0, .175, 1); --wms-veloz: 120ms; --wms-normal: 180ms; --wms-lento: 240ms; } /* ========================================================================== CAPA 2. SEMANTICAS Lo unico que una vista puede nombrar. ========================================================================== */ :root { --wms-fondo: var(--wms-gris-50); --wms-superficie: var(--wms-gris-0); --wms-superficie-suave: var(--wms-gris-25); --wms-superficie-hundida: var(--wms-gris-100); /* Los filetes son la sombra de este sistema */ --wms-filete: var(--wms-gris-200); --wms-filete-fuerte: var(--wms-gris-300); --wms-filete-suave: var(--wms-gris-100); --wms-tinta: var(--wms-gris-900); --wms-tinta-media: var(--wms-gris-700); --wms-tinta-suave: var(--wms-gris-500); --wms-tinta-tenue: var(--wms-gris-400); --wms-tinta-invertida: var(--wms-gris-0); --wms-accion: var(--wms-azul-500); --wms-accion-viva: var(--wms-azul-600); --wms-accion-honda: var(--wms-azul-700); --wms-accion-tenue: var(--wms-azul-50); --wms-accion-filete: var(--wms-azul-200); --wms-bien: var(--wms-verde-600); --wms-bien-tenue: var(--wms-verde-50); --wms-bien-filete: var(--wms-verde-100); --wms-bien-tinta: var(--wms-verde-700); --wms-atencion: var(--wms-ambar-500); --wms-atencion-tenue: var(--wms-ambar-50); --wms-atencion-filete: var(--wms-ambar-100); --wms-atencion-tinta: var(--wms-ambar-700); --wms-peligro: var(--wms-rojo-500); --wms-peligro-viva: var(--wms-rojo-600); --wms-peligro-tenue: var(--wms-rojo-50); --wms-peligro-filete: var(--wms-rojo-200); --wms-peligro-tinta: var(--wms-rojo-700); /* El anillo de foco se ve siempre: aqui se navega con teclado y con lector */ --wms-foco: 0 0 0 2px var(--wms-gris-0), 0 0 0 4px var(--wms-azul-400); } /* ========================================================================== CAPA 3. COMPONENTE ========================================================================== */ :root { --wms-control-alto: 34px; /* campos, desplegables y botones: una altura */ --wms-control-alto-lg: 40px; --wms-boton-icono: 30px; --wms-fila-alto: 40px; --wms-menu-ancho: 248px; --wms-barra-alto: 52px; --wms-contenido-max: 2200px; /* solo muerde en pantallas ultrapanoramicas */ --wms-texto-max: 80ch; /* la prosa se acota; las tablas no */ } /* ========================================================================== BASE ========================================================================== */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body, body.white-content, .wrapper, .main-panel, .content, input, select, textarea, button { font-family: var(--wms-fuente); } body, body.white-content { background-color: var(--wms-fondo); color: var(--wms-tinta-media); font-size: var(--wms-txt-sm); line-height: 1.45; } h1, h2, h3, h4, h5, h6, .card-title, .modal-title, .page-title { font-family: var(--wms-fuente); color: var(--wms-tinta); font-weight: 600; letter-spacing: -.006em; margin-top: 0; } h1, .page-title { font-size: var(--wms-txt-xl); line-height: 26px; } h2 { font-size: var(--wms-txt-lg); line-height: 22px; } h3 { font-size: var(--wms-txt-md); line-height: 20px; } h4, .card-title { font-size: var(--wms-txt-md); line-height: 20px; margin-bottom: 0; } h5 { font-size: var(--wms-txt-sm); } h6 { font-size: var(--wms-txt-xs); } a { color: var(--wms-accion-viva); transition: color var(--wms-veloz) ease; } a:hover, a:focus { color: var(--wms-accion-honda); text-decoration: none; } hr { border-top-color: var(--wms-filete); margin: var(--wms-e5) 0; } /* * Todo lo que asigno una maquina va en monoespaciada: codigo de articulo, * numero de serie, lote, EPC, uuid y folio. Se comparan caracter por caracter, * y asi el 0 no se confunde con la O ni el 1 con la l. */ code, kbd, pre, samp, .wms-dato, .product-code { font-family: var(--wms-fuente-dato); font-size: .95em; font-variant-ligatures: none; } .wms-dato { color: var(--wms-tinta); letter-spacing: -.01em; } /* * Un dato enlazado tiene que verse como enlace. Con la tinta de arriba, una clave de articulo o * un folio que llevaban a su ficha se veian igual que los que no llevan a ninguna parte, y nadie * los pulsaba. */ a > .wms-dato { color: var(--wms-accion-viva); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover > .wms-dato, a:focus > .wms-dato { color: var(--wms-accion-honda); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--wms-gris-300); border: 3px solid var(--wms-fondo); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--wms-gris-400); } *:focus-visible { outline: none; box-shadow: var(--wms-foco); border-radius: var(--wms-r-sm); } ::selection { background: var(--wms-azul-100); color: var(--wms-azul-900); } /* Lo que Alpine va a esconder no parpadea abierto antes de que Alpine arranque. Con !important a proposito: tiene que ganar al display que le ponga cualquier componente. */ [x-cloak] { display: none !important; } /* ========================================================================== ESTRUCTURA: MENU LATERAL ========================================================================== */ .sidebar, body.white-content .sidebar, .off-canvas-sidebar { display: flex; flex-direction: column; width: var(--wms-menu-ancho); margin: 0; top: 0; bottom: 0; left: 0; height: 100vh; border-radius: 0; box-shadow: none; border-right: 1px solid var(--wms-gris-800); background: var(--wms-gris-950); } .sidebar:after, .sidebar:before, body.white-content .sidebar:after, body.white-content .sidebar:before { display: none; } /* * La marca no se desplaza y el menu se queda con el resto exacto de la altura. * Antes el menu pedia el alto completo de la pantalla ADEMAS de la marca, asi que * sus ultimos 53 px caian por debajo del borde y no habia forma de alcanzarlos: con * varios grupos desplegados, la ultima entrada quedaba fuera. * * `min-height: 0` es obligatorio. Sin el, un hijo flexible no encoge por debajo de su * contenido y el desbordamiento vuelve, esta vez sin barra de desplazamiento. */ .sidebar .wms-marca, .off-canvas-sidebar .wms-marca { flex: 0 0 auto; } .sidebar .sidebar-wrapper { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; /* * La plantilla le pone `max-height: calc(-705px + 100vh)`, un resto de su maqueta original con * cabecera y pie grandes. En una pantalla de 1170 px eso recorta el menu a 465: se veia cortado * y sobraba medio panel vacio debajo. Aqui el alto lo decide el flex del contenedor. */ max-height: none; padding: var(--wms-e2) var(--wms-e2) var(--wms-e4); overflow-y: auto; overscroll-behavior: contain; } /* Delgada y discreta: la del sistema mide 10 px y sobre un menu de 248 px se come el texto */ .sidebar .sidebar-wrapper::-webkit-scrollbar { width: 6px; } .sidebar .sidebar-wrapper::-webkit-scrollbar-track { background: transparent; } .sidebar .sidebar-wrapper::-webkit-scrollbar-thumb { background: var(--wms-gris-700); border: none; border-radius: 99px; } .sidebar .sidebar-wrapper::-webkit-scrollbar-thumb:hover { background: var(--wms-gris-600); } .sidebar .logo, .sidebar .logo:after { display: none; } .sidebar .nav { margin-top: var(--wms-e1); } .sidebar .nav li > a, body.white-content .sidebar .nav li > a { position: relative; display: flex; align-items: center; gap: var(--wms-e3); margin: 1px 0; padding: 7px 10px; border-radius: var(--wms-r-md); color: var(--wms-gris-400); opacity: 1; font-weight: 400; transition: background-color var(--wms-veloz) ease, color var(--wms-veloz) ease; } .sidebar .nav li > a:hover, .sidebar .nav li > a:focus, body.white-content .sidebar .nav li > a:hover { background-color: rgba(255, 255, 255, .05); color: var(--wms-gris-100); } .sidebar .nav li.active > a, body.white-content .sidebar .nav li.active > a { background-color: rgba(255, 255, 255, .07); color: #fff; font-weight: 500; } /* * El trazo rojo inclinado del logotipo de EEPAT, usado como marca de "estas * aqui". Es la firma del sistema: sale de su propia marca y no la tiene ningun * otro panel. */ .sidebar .nav li.active > a:before, body.white-content .sidebar .nav li.active > a:before { content: "" !important; display: block !important; position: absolute !important; left: -8px !important; right: auto !important; top: 50% !important; bottom: auto !important; width: 3px !important; height: 16px !important; margin: -8px 0 0 !important; padding: 0 !important; background: var(--wms-rojo-500) !important; border: 0 !important; border-radius: 0 2px 2px 0 !important; transform: skewX(-12deg) !important; opacity: 1 !important; } .sidebar .nav li.active > a:after, .sidebar .nav li > a:after { display: none !important; } .sidebar .nav p, .sidebar .nav .nav-link-text, body.white-content .sidebar .nav p, body.white-content .sidebar .nav .nav-link-text { text-transform: none; font-size: var(--wms-txt-sm); font-weight: inherit; letter-spacing: 0; line-height: 17px; margin: 0; white-space: normal; overflow: visible; text-overflow: clip; } /* Los grupos que se despliegan son encabezados de seccion, no destinos */ .sidebar .nav > li > a[data-toggle="collapse"] .nav-link-text, .sidebar .nav > li > a[data-toggle="collapse"] p { font-size: var(--wms-txt-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--wms-gris-500); } .sidebar .nav > li > a[data-toggle="collapse"]:hover .nav-link-text, .sidebar .nav > li > a[aria-expanded="true"] .nav-link-text { color: var(--wms-gris-300); } .sidebar .nav i, .sidebar .nav [class^="fa-"], .sidebar .nav [class*=" fa-"], .sidebar .nav [class^="tim-icons"] { width: 16px; text-align: center; font-size: 13px; flex-shrink: 0; opacity: .75; } .sidebar .nav li.active > a i { opacity: 1; } /* Submenu: sangrado con una guia vertical */ .sidebar .nav .nav { margin: 1px 0 var(--wms-e2) 18px; padding-left: 10px; border-left: 1px solid var(--wms-gris-800); } .sidebar .nav .nav li > a { padding: 6px 10px; } .sidebar .nav .nav p { font-size: var(--wms-txt-sm); } .sidebar .caret { margin-left: auto; font-size: 10px; transition: transform var(--wms-normal) var(--wms-salida); } .sidebar .nav li > a[aria-expanded="true"] .caret { transform: rotate(180deg); } /* ========================================================================== ESTRUCTURA: PANEL Y BARRA SUPERIOR ========================================================================== */ .main-panel, body.white-content .main-panel { width: calc(100% - var(--wms-menu-ancho)); background: var(--wms-fondo); border-radius: 0; border-top: 0; } .main-panel.main-panel-full, body.white-content .main-panel.main-panel-full { width: 100%; } /* * El contenido ocupa todo el ancho disponible. * * Estaba topado a 1560px y pegado a la izquierda: en un monitor de 2560 dejaba * 752px muertos a la derecha. Una medida maxima tiene sentido para leer prosa, * no para una consola de operacion: aqui el ancho de mas se traduce en mas * columnas y mas renglones visibles, que es justo lo que necesita un supervisor. * * Lo que si se acota es el texto corrido, que a 2300px no se lee. */ .main-panel > .content { padding: calc(var(--wms-barra-alto) + var(--wms-e5)) var(--wms-e6) var(--wms-e10); min-height: 100vh; /* * El tope es alto a proposito: en un monitor de 2560 no se nota, y solo entra * en juego en pantallas ultrapanoramicas, donde una tabla de cinco columnas * estirada tres mil pixeles deja el dato flotando. Y va centrado, no pegado * a la izquierda. */ max-width: var(--wms-contenido-max); margin-left: auto; margin-right: auto; } .main-panel.main-panel-full > .content { padding-top: var(--wms-e5); min-height: auto; max-width: none; } .main-panel .navbar, body.white-content .main-panel > .navbar { min-height: var(--wms-barra-alto); height: var(--wms-barra-alto); padding: 0 var(--wms-e6); background: var(--wms-superficie); border-bottom: 1px solid var(--wms-filete); box-shadow: none; } .main-panel .navbar .navbar-brand { color: var(--wms-tinta); font-size: var(--wms-txt-md); font-weight: 600; letter-spacing: -.006em; text-transform: none; } /* ========================================================================== TARJETAS Sin sombra: un filete de 1px basta para separarlas del fondo. ========================================================================== */ .card, body.white-content .card { background: var(--wms-superficie); border: 1px solid var(--wms-filete); border-radius: var(--wms-r-lg); box-shadow: none; margin-bottom: var(--wms-e5); } .card:hover { box-shadow: none; } .card .card-header, body.white-content .card .card-header { min-height: 46px; background: transparent; border-bottom: 1px solid var(--wms-filete-suave); border-radius: var(--wms-r-lg) var(--wms-r-lg) 0 0; padding: var(--wms-e3) var(--wms-e5); } /* * La cabecera en fila solo la usa . Las vistas heredadas meten un * `row`/`col` dentro de la cabecera, y con `display:flex` aqui el titulo se * quedaba en una columna angosta y se partia a la mitad ("Recep / ciones"). */ .card.wms-card > .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--wms-e3); } .card.wms-card > .card-header > :first-child { flex: 1 1 auto; min-width: 0; } .card .card-body, body.white-content .card .card-body { padding: var(--wms-e5); } .card .card-footer, body.white-content .card .card-footer { background: var(--wms-superficie-suave); border-top: 1px solid var(--wms-filete-suave); border-radius: 0 0 var(--wms-r-lg) var(--wms-r-lg); padding: var(--wms-e3) var(--wms-e5); } /* La plantilla ponia los titulos en peso 100 y las ayudas en Mayusculas De Titulo */ body .card .card-header .card-title, body.white-content .card .card-header .card-title, body .card .card-title { color: var(--wms-tinta); font-size: var(--wms-txt-md); font-weight: 600; text-transform: none; letter-spacing: -.006em; margin-bottom: 0; } body .card .card-category, body .card .card-subtitle, body.white-content .card .card-category { color: var(--wms-tinta-suave); font-size: var(--wms-txt-xs); font-weight: 400; text-transform: none; margin-top: 2px; } .card > .table-responsive:last-child, .card > .table-responsive:last-child > .table { border-radius: 0 0 var(--wms-r-lg) var(--wms-r-lg); } /* ========================================================================== BOTONES Solidos. Sin degradado y sin resplandor. Una sola altura. ========================================================================== */ .btn, body.white-content .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--wms-control-alto); padding: 0 var(--wms-e3); font-family: var(--wms-fuente); font-size: var(--wms-txt-sm); font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; background-color: var(--wms-superficie); background-image: none; border: 1px solid var(--wms-filete-fuerte); border-radius: var(--wms-r-md); color: var(--wms-tinta-media); box-shadow: none; transition: background-color var(--wms-veloz) ease, border-color var(--wms-veloz) ease, color var(--wms-veloz) ease, transform 100ms var(--wms-salida); } .btn:hover { background-color: var(--wms-gris-50); border-color: var(--wms-gris-400); color: var(--wms-tinta); } /* Que el boton conteste al dedo: 100ms, apenas visible, pero se siente */ .btn:active, .btn.active, .btn:not(:disabled):not(.disabled):active { transform: scale(.97); } .btn:disabled, .btn.disabled { opacity: .45; box-shadow: none; pointer-events: none; } .btn-sm { height: var(--wms-boton-icono); padding: 0 var(--wms-e2); font-size: var(--wms-txt-xs); } .btn-lg { height: var(--wms-control-alto-lg); padding: 0 var(--wms-e5); font-size: var(--wms-txt-md); } .btn-block { width: 100%; } .btn.btn-primary, body.white-content .btn.btn-primary { background-color: var(--wms-accion); background-image: none; border-color: var(--wms-accion); color: var(--wms-tinta-invertida); } .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:not(:disabled):not(.disabled):active, body.white-content .btn.btn-primary:hover { background-color: var(--wms-accion-viva); border-color: var(--wms-accion-viva); color: var(--wms-tinta-invertida); } .btn.btn-success, body.white-content .btn.btn-success { background-color: var(--wms-bien); background-image: none; border-color: var(--wms-bien); color: var(--wms-tinta-invertida); } .btn.btn-success:hover, .btn.btn-success:focus, .btn.btn-success:not(:disabled):not(.disabled):active { background-color: var(--wms-verde-700); border-color: var(--wms-verde-700); color: var(--wms-tinta-invertida); } .btn.btn-danger, body.white-content .btn.btn-danger { background-color: var(--wms-peligro); background-image: none; border-color: var(--wms-peligro); color: var(--wms-tinta-invertida); } .btn.btn-danger:hover, .btn.btn-danger:focus, .btn.btn-danger:not(:disabled):not(.disabled):active { background-color: var(--wms-peligro-viva); border-color: var(--wms-peligro-viva); color: var(--wms-tinta-invertida); } .btn.btn-warning, body.white-content .btn.btn-warning { background-color: var(--wms-atencion); background-image: none; border-color: var(--wms-atencion); color: var(--wms-gris-950); } .btn.btn-warning:hover, .btn.btn-warning:focus, .btn.btn-warning:not(:disabled):not(.disabled):active { background-color: var(--wms-ambar-600); border-color: var(--wms-ambar-600); color: var(--wms-gris-950); } /* `info` no es un estado del almacen: se comporta como el acento */ .btn.btn-info, body.white-content .btn.btn-info { background-color: var(--wms-azul-600); background-image: none; border-color: var(--wms-azul-600); color: var(--wms-tinta-invertida); } .btn.btn-info:hover, .btn.btn-info:focus, .btn.btn-info:not(:disabled):not(.disabled):active { background-color: var(--wms-azul-700); border-color: var(--wms-azul-700); color: var(--wms-tinta-invertida); } .btn.btn-secondary, .btn.btn-default, body.white-content .btn.btn-secondary { background-color: var(--wms-superficie); background-image: none; border-color: var(--wms-filete-fuerte); color: var(--wms-tinta-media); } .btn.btn-secondary:hover, .btn.btn-default:hover, .btn.btn-secondary:focus { background-color: var(--wms-gris-50); border-color: var(--wms-gris-400); color: var(--wms-tinta); } .btn.btn-link, body.white-content .btn.btn-link { background: transparent; background-image: none; border-color: transparent; color: var(--wms-tinta-suave); padding: 0 var(--wms-e2); } .btn.btn-link:hover, .btn.btn-link:focus { background: var(--wms-gris-100); border-color: transparent; color: var(--wms-tinta); } /* -------------------------------------------------------------------------- Estados de raton y teclado de los botones -------------------------------------------------------------------------- */ /* * La plantilla declara esto, con !important, sobre TODO `.btn`: * * .btn:hover, .btn:focus, .btn:active, .btn.active, ... { * background-color: #263148 !important; * background-image: linear-gradient(to bottom left, #344675, #263148, #344675) !important; * } * * y repite el patron por variante con el magenta #e14eca de su paleta. Como lleva !important, gana * sobre las reglas de arriba por mucha especificidad que se les ponga: los botones de este sistema * se quedaban con el degradado morado de la plantilla en cuanto se les pasaba el raton, y el * secundario quedaba con texto oscuro sobre azul marino, ilegible. * * Solo se puede responder con !important. Se aplica al minimo: el fondo y su degradado. */ .btn:hover, .btn:focus, .btn:active, .btn.active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active { background-image: none !important; box-shadow: none; } .btn:hover, .btn:focus, .btn:not(:disabled):not(.disabled):active { background-color: var(--wms-gris-50) !important; } .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:not(:disabled):not(.disabled):active { background-color: var(--wms-accion-viva) !important; } .btn.btn-success:hover, .btn.btn-success:focus, .btn.btn-success:not(:disabled):not(.disabled):active { background-color: var(--wms-verde-700) !important; } .btn.btn-danger:hover, .btn.btn-danger:focus, .btn.btn-danger:not(:disabled):not(.disabled):active { background-color: var(--wms-peligro-viva) !important; } .btn.btn-warning:hover, .btn.btn-warning:focus, .btn.btn-warning:not(:disabled):not(.disabled):active { background-color: var(--wms-ambar-600) !important; } .btn.btn-info:hover, .btn.btn-info:focus, .btn.btn-info:not(:disabled):not(.disabled):active { background-color: var(--wms-azul-700) !important; } .btn.btn-secondary:hover, .btn.btn-default:hover, .btn.btn-secondary:focus, .btn.btn-default:focus { background-color: var(--wms-gris-50) !important; } /* El de accion de un listado vive sobre la fila, que ya se tine al pasar el raton */ .btn.btn-link:hover, .btn.btn-link:focus, .table .btn.btn-link:hover, .td-actions .btn:hover { background-color: var(--wms-gris-100) !important; } .btn[class*="btn-outline-"]:hover, .btn[class*="btn-outline-"]:focus { background-color: var(--wms-accion-tenue) !important; } .btn[class*="btn-outline-"] { background: transparent; background-image: none; } .btn.btn-outline-primary { border-color: var(--wms-accion-filete); color: var(--wms-accion-honda); } .btn.btn-outline-primary:hover { background: var(--wms-accion-tenue); border-color: var(--wms-azul-300); color: var(--wms-azul-800); } .btn.btn-outline-danger { border-color: var(--wms-peligro-filete); color: var(--wms-peligro-tinta); } .btn.btn-outline-danger:hover { background: var(--wms-peligro-tenue); color: var(--wms-peligro-tinta); } .btn.btn-outline-success { border-color: var(--wms-bien-filete); color: var(--wms-bien-tinta); } .btn.btn-outline-success:hover { background: var(--wms-bien-tenue); color: var(--wms-bien-tinta); } .btn.btn-outline-secondary { border-color: var(--wms-filete-fuerte); color: var(--wms-tinta-media); } .btn.btn-outline-secondary:hover { background: var(--wms-gris-100); color: var(--wms-tinta); } .btn.btn-icon, .btn.btn-sm.btn-icon { width: var(--wms-boton-icono); height: var(--wms-boton-icono); padding: 0; } .btn i { font-size: 12px; line-height: 1; } .btn-group > .btn { border-radius: 0; margin-left: -1px; } .btn-group > .btn:first-child { border-radius: var(--wms-r-md) 0 0 var(--wms-r-md); margin-left: 0; } .btn-group > .btn:last-child { border-radius: 0 var(--wms-r-md) var(--wms-r-md) 0; } .btn-group > .btn:only-child { border-radius: var(--wms-r-md); } /* ========================================================================== FORMULARIOS ========================================================================== */ .form-control, .custom-select, body.white-content .form-control, .input-group .form-control { font-family: var(--wms-fuente); font-size: var(--wms-txt-sm); color: var(--wms-tinta); background-color: var(--wms-superficie); border: 1px solid var(--wms-filete-fuerte); border-radius: var(--wms-r-md); padding: 0 10px; height: var(--wms-control-alto); line-height: 1.4; box-shadow: none; transition: border-color var(--wms-veloz) ease, box-shadow var(--wms-veloz) ease; } .input-group .input-group-text, .input-group .btn, body.white-content .input-group .btn { height: var(--wms-control-alto); } textarea.form-control, body.white-content textarea.form-control, select[multiple].form-control { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; } .form-control:hover, .custom-select:hover { border-color: var(--wms-gris-400); } .form-control:focus, .custom-select:focus, body.white-content .form-control:focus { background-color: var(--wms-superficie); border-color: var(--wms-accion); color: var(--wms-tinta); box-shadow: 0 0 0 3px var(--wms-azul-100); } .form-control::placeholder { color: var(--wms-tinta-tenue); } .form-control.is-invalid, .has-danger .form-control { border-color: var(--wms-peligro); } .form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--wms-rojo-100); } .form-control:disabled, .form-control[readonly] { background-color: var(--wms-superficie-hundida); color: var(--wms-tinta-suave); } /* Un codigo se escribe y se lee en monoespaciada tambien dentro del campo */ input.wms-dato, input[name*="barcode"], input[name*="serial"], input[name*="item_code"], input[name*="scan"] { font-family: var(--wms-fuente-dato); letter-spacing: .01em; } label, .form-group label, .col-form-label { display: block; color: var(--wms-tinta-media); font-size: var(--wms-txt-xs); font-weight: 500; text-transform: none; letter-spacing: 0; margin-bottom: 5px; } .form-group { margin-bottom: var(--wms-e4); } .invalid-feedback, .form-control-feedback, .has-danger .form-control-feedback { color: var(--wms-peligro-tinta); font-size: var(--wms-txt-xs); margin-top: 4px; } .input-group .input-group-text, .input-group-prepend .input-group-text, .input-group-append .input-group-text { background: var(--wms-superficie-suave); border: 1px solid var(--wms-filete-fuerte); color: var(--wms-tinta-suave); font-size: var(--wms-txt-sm); padding: 0 10px; } .input-group > .input-group-prepend > .input-group-text { border-radius: var(--wms-r-md) 0 0 var(--wms-r-md); margin-right: -1px; } .input-group > .input-group-append > .input-group-text, .input-group > .input-group-append > .btn { border-radius: 0 var(--wms-r-md) var(--wms-r-md) 0; margin-left: -1px; } .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .form-check-input, .custom-control-input { accent-color: var(--wms-accion); } .form-check-label, .custom-control-label { color: var(--wms-tinta-media); font-size: var(--wms-txt-sm); } /* El desplegable con busqueda de varias pantallas */ .ss-main .ss-single-selected, .ss-main .ss-multi-selected { height: var(--wms-control-alto); min-height: var(--wms-control-alto); padding: 0 10px; font-family: var(--wms-fuente); font-size: var(--wms-txt-sm); color: var(--wms-tinta); background: var(--wms-superficie); border: 1px solid var(--wms-filete-fuerte); border-radius: var(--wms-r-md); } .ss-main .ss-single-selected:focus, .ss-main .ss-multi-selected:focus-within { border-color: var(--wms-accion); box-shadow: 0 0 0 3px var(--wms-azul-100); } .ss-content { border-radius: var(--wms-r-md); border: 1px solid var(--wms-filete); box-shadow: var(--wms-sombra-flota); } .ss-content .ss-list .ss-option:hover, .ss-content .ss-list .ss-option.ss-highlighted { background: var(--wms-accion-tenue); color: var(--wms-accion-honda); } /* ========================================================================== TABLAS Densas: un supervisor tiene que ver quince renglones sin desplazarse. ========================================================================== */ .table, body.white-content .table { color: var(--wms-tinta-media); font-size: var(--wms-txt-sm); margin-bottom: 0; border-collapse: separate; border-spacing: 0; width: 100%; } .table > thead > tr > th, body.white-content .table > thead > tr > th { height: 34px; padding: 0 var(--wms-e4); background: var(--wms-superficie-suave); border-bottom: 1px solid var(--wms-filete); border-top: 0; color: var(--wms-tinta-suave); font-size: var(--wms-txt-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; vertical-align: middle; text-align: left; } .table > tbody > tr > td, body.white-content .table > tbody > tr > td { height: var(--wms-fila-alto); padding: 6px var(--wms-e4); border-top: 1px solid var(--wms-filete-suave); color: var(--wms-tinta-media); vertical-align: middle; } .table > tbody > tr:first-child > td { border-top: 0; } .table > tbody > tr, body.white-content .table > tbody > tr { transition: background-color 90ms ease; } .table > tbody > tr:hover, body.white-content .table > tbody > tr:hover { background-color: var(--wms-azul-50); } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table td.td-nowrap, .table th.td-nowrap { white-space: nowrap; } .table .td-actions { width: 1%; white-space: nowrap; text-align: right; } /* -------------------------------------------------------------------------- Encabezado ordenable -------------------------------------------------------------------------- */ /* * Hereda la tipografia del `th` en vez de fijarla: si cambia el encabezado, la columna * ordenable cambia con el y no se queda con un tamano distinto al de sus vecinas. */ .wms-orden { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; } .wms-orden:hover { color: var(--wms-azul-600); } .wms-orden--activa { color: var(--wms-tinta); } /* Apagada mientras no ordena por esta columna: se ve que se puede, sin competir con la activa */ .wms-orden__icono { font-size: 10px; opacity: .35; transition: opacity var(--wms-veloz) ease; } .wms-orden:hover .wms-orden__icono { opacity: .7; } .wms-orden--activa .wms-orden__icono { opacity: 1; color: var(--wms-azul-600); } th[aria-sort="ascending"], th[aria-sort="descending"] { background: var(--wms-azul-50); } /* -------------------------------------------------------------------------- Veredicto de una pantalla de diagnostico: -------------------------------------------------------------------------- */ /* * Va antes que cualquier dato y ocupa el ancho completo: es la respuesta, no un aviso al margen. * El color va en el filete de la izquierda y en el icono, no en un fondo saturado que compita con * las tarjetas que vienen debajo. */ .wms-veredicto { display: flex; align-items: flex-start; gap: var(--wms-e4); margin-bottom: var(--wms-e4); padding: var(--wms-e4) var(--wms-e5); border: 1px solid var(--wms-filete); border-left: 3px solid var(--wms-gris-400); border-radius: var(--wms-r-lg); background: var(--wms-superficie); } .wms-veredicto__icono { font-size: 18px; line-height: 1.35; color: var(--wms-gris-400); flex-shrink: 0; } .wms-veredicto__texto { min-width: 0; } .wms-veredicto__titulo { margin: 0; font-size: var(--wms-txt-lg); font-weight: 600; letter-spacing: -.01em; color: var(--wms-tinta); } .wms-veredicto__detalle { margin: 3px 0 0; font-size: var(--wms-txt-md); color: var(--wms-tinta-media); max-width: 78ch; } .wms-veredicto--bien { border-left-color: var(--wms-bien); background: var(--wms-bien-tenue); border-color: var(--wms-bien-filete); } .wms-veredicto--bien .wms-veredicto__icono { color: var(--wms-bien-tinta); } .wms-veredicto--falta { border-left-color: var(--wms-atencion); background: var(--wms-atencion-tenue); border-color: var(--wms-atencion-filete); } .wms-veredicto--falta .wms-veredicto__icono { color: var(--wms-atencion-tinta); } .wms-veredicto--cancelada { border-left-color: var(--wms-peligro); background: var(--wms-peligro-tenue); border-color: var(--wms-peligro-filete); } .wms-veredicto--cancelada .wms-veredicto__icono { color: var(--wms-peligro-tinta); } .wms-veredicto--pendiente { border-left-color: var(--wms-gris-400); } /* -------------------------------------------------------------------------- Lo que falta por resolver, y las partidas -------------------------------------------------------------------------- */ .wms-faltantes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wms-e4); } .wms-faltantes__punto { display: flex; flex-direction: column; gap: 5px; } .wms-faltantes__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wms-e2); } /* Que partidas toca. Sin esto el aviso dice el problema pero no a quien mirar */ .wms-faltantes__donde { font-size: var(--wms-txt-xs); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--wms-tinta-suave); } .wms-faltantes__texto { margin: 0; font-size: var(--wms-txt-md); color: var(--wms-tinta-media); max-width: 92ch; } /* La ficha de datos: pares que se acomodan solos sin dejar un hueco al final */ .wms-ficha { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--wms-e4) var(--wms-e5); } .wms-ficha > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .wms-ficha dt { font-size: var(--wms-txt-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--wms-tinta-suave); } .wms-ficha dd { margin: 0; font-size: var(--wms-txt-md); color: var(--wms-tinta); } /* Una partida a la que le falta algo se distingue por el filete, no por un fondo de color: con varias seguidas, el fondo convierte la tabla en un semaforo ilegible */ .wms-partida--pendiente > td:first-child { box-shadow: inset 2px 0 0 var(--wms-atencion); } .wms-partida__num { color: var(--wms-tinta-suave); font-variant-numeric: tabular-nums; } /* Al desplazar la tabla en horizontal, el numero de partida se queda a la vista: es el ancla de la fila y sin el se pierde de que renglon se esta leyendo */ @media (max-width: 1200px) { .table td.wms-partida__num, .table thead th:first-child { position: sticky; left: 0; background: var(--wms-superficie); z-index: 1; } } .wms-partida__nombre { margin-top: 2px; max-width: 34ch; overflow-wrap: anywhere; font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); } .wms-listado__bien { display: inline-flex; align-items: center; gap: 5px; color: var(--wms-bien-tinta); font-size: var(--wms-txt-sm); } /* La serie o el lote que SAP reservo, junto a su articulo */ .wms-reserva { display: inline-flex; align-items: center; gap: 4px; margin: 4px 4px 0 0; padding: 1px 7px 1px 5px; border: 1px solid var(--wms-filete); border-radius: 99px; background: var(--wms-gris-25); font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); } .wms-piezas { font-family: var(--wms-fuente-dato); font-size: var(--wms-txt-md); color: var(--wms-tinta); font-variant-numeric: tabular-nums; } .wms-piezas__de { margin: 0 2px; font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); } /* El surtido del WMS que trabaja la partida: su numero y su estado en un renglon, uno por surtido */ .wms-surtido { display: flex; align-items: center; gap: 6px; } .wms-surtido + .wms-surtido { margin-top: 4px; } /* -------------------------------------------------------------------------- Panel de pruebas, solo en el entorno local -------------------------------------------------------------------------- */ /* * Se distingue del resto de la pantalla a proposito: es una herramienta de desarrollo dentro de una * pantalla de operacion, y quien la mire tiene que ver de un vistazo que no es parte del sistema. * Las rayas son el recurso de siempre para decir "zona de trabajo, no de produccion". */ .wms-card--prueba { border-style: dashed; border-color: var(--wms-gris-300); background: repeating-linear-gradient( 135deg, var(--wms-ambar-50), var(--wms-ambar-50) 12px, var(--wms-superficie) 12px, var(--wms-superficie) 24px ); } /* La cabecera es el interruptor entero, no una flecha de 12px al final del renglon */ .wms-prueba__palanca { display: flex; align-items: center; gap: var(--wms-e3); width: 100%; padding: var(--wms-e3) var(--wms-e4); border: 0; background: none; text-align: left; cursor: pointer; } .wms-prueba__icono { font-size: 14px; color: var(--wms-tinta-suave); flex-shrink: 0; } .wms-prueba__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; } .wms-prueba__titulo { font-size: var(--wms-txt-md); font-weight: 600; color: var(--wms-tinta); } .wms-prueba__ayuda { font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); } .wms-prueba__flecha { flex-shrink: 0; font-size: 11px; color: var(--wms-tinta-suave); transition: transform var(--wms-normal) ease; } .wms-prueba__flecha--abierta { transform: rotate(180deg); } .wms-prueba__cuerpo { padding: var(--wms-e4); border-top: 1px solid var(--wms-filete-suave); } .wms-prueba__pie { margin-top: var(--wms-e3); } .wms-casos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--wms-e2); } .wms-caso { display: flex; align-items: center; gap: var(--wms-e3); padding: 9px 12px; border: 1px solid var(--wms-filete); border-radius: var(--wms-r-md); background: var(--wms-superficie); font-size: var(--wms-txt-sm); color: var(--wms-tinta-media); text-align: left; cursor: pointer; transition: border-color var(--wms-veloz) ease, background-color var(--wms-veloz) ease; } .wms-caso:hover { border-color: var(--wms-accion); background: var(--wms-accion-tenue); color: var(--wms-tinta); } .wms-caso:disabled { opacity: .5; cursor: default; } .wms-caso__num { flex-shrink: 0; font-family: var(--wms-fuente-dato); font-size: var(--wms-txt-xs); font-weight: 500; color: var(--wms-tinta-suave); font-variant-numeric: tabular-nums; } .wms-caso__titulo { min-width: 0; } /* -------------------------------------------------------------------------- Listado que se actualiza sin recargar -------------------------------------------------------------------------- */ .wms-listado__resumen { display: flex; align-items: center; gap: var(--wms-e2); } /* * Un cero no es un dato que mirar: se apaga para que resalten los renglones que si traen algo. * Se apaga, no se esconde: en gris-300 sobre blanco no llega al contraste minimo y "Sin surtir" * es informacion, no relleno. */ .wms-listado__cero { color: var(--wms-tinta-suave); } /* * Mientras la consulta viaja, la tabla se atenua en vez de vaciarse. * * Vaciarla haria saltar la pagina entera a cada letra que se escribe en el buscador. Atenuarla * dice lo mismo (esto ya no es el resultado) sin mover nada de sitio. */ .wms-listado--actualizando { opacity: .45; transition: opacity var(--wms-veloz) ease; pointer-events: none; } /* La rueda del boton, suelta: aqui no cuelga de un `.btn` sino del resumen del listado */ .wms-listado__resumen .wms-girando { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--wms-gris-300); border-right-color: transparent; border-radius: 50%; animation: wms-gira 600ms linear infinite; } /* -------------------------------------------------------------------------- Pie de paginacion -------------------------------------------------------------------------- */ .wms-paginacion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wms-e3); } .wms-paginacion__tamano { display: flex; align-items: center; gap: var(--wms-e2); flex: 0 0 auto; } .wms-paginacion__tamano label { margin: 0; font-size: var(--wms-txt-sm); color: var(--wms-tinta-suave); white-space: nowrap; } .wms-paginacion__tamano .form-control, .wms-paginacion__tamano .ss-main { width: auto; min-width: 82px; } /* Se centra en el hueco que dejan el selector y las paginas, no respecto de la tarjeta */ .wms-paginacion__cuenta { flex: 1 1 auto; margin: 0; text-align: center; font-size: var(--wms-txt-sm); color: var(--wms-tinta-suave); } .wms-paginacion__paginas { flex: 0 0 auto; } .wms-paginacion__paginas .pagination { margin: 0; } @media (max-width: 640px) { .wms-paginacion { justify-content: center; } .wms-paginacion__cuenta { flex-basis: 100%; order: 3; } } /* Numeros a la derecha y en cifras de ancho fijo, para poder compararlos */ .table td.wms-numero, .table th.wms-numero { text-align: right; font-family: var(--wms-fuente-dato); font-variant-numeric: tabular-nums; } /* * Filas que la aplicacion marca por estado. Con filete a la izquierda ademas * del fondo: el color solo no basta para quien no lo distingue. */ body.white-content .table > tbody > tr.tr-success td { background-color: var(--wms-bien-tenue); } body.white-content .table > tbody > tr.tr-success td:first-child { box-shadow: inset 3px 0 0 var(--wms-bien); } body.white-content .table > tbody > tr.tr-danger td { background-color: var(--wms-peligro-tenue); } body.white-content .table > tbody > tr.tr-danger td:first-child { box-shadow: inset 3px 0 0 var(--wms-peligro); } body.white-content .table > tbody > tr.tr-closed td { background-color: var(--wms-superficie-suave); color: var(--wms-tinta-suave); } /* Los botones de accion de un listado, iguales se escriban como se escriban */ .table .btn.btn-link, .td-actions .btn, .table .btn.btn-sm:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not([class*="btn-outline"]), body.white-content .table .btn.btn-link, body.white-content .td-actions .btn { width: var(--wms-boton-icono); height: var(--wms-boton-icono); padding: 0; background: var(--wms-superficie); background-image: none; border: 1px solid var(--wms-filete); border-radius: var(--wms-r-sm); color: var(--wms-tinta-suave); box-shadow: none; } .table .btn.btn-link:hover, .td-actions .btn:hover, .table .btn.btn-sm:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-secondary):not([class*="btn-outline"]):hover { background: var(--wms-accion-tenue); border-color: var(--wms-accion-filete); color: var(--wms-accion-honda); } /* Paginacion */ .pagination { gap: 3px; margin: 0; } .pagination .page-item .page-link, body.white-content .pagination .page-item .page-link { min-width: var(--wms-boton-icono); height: var(--wms-boton-icono); display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid var(--wms-filete); border-radius: var(--wms-r-sm); color: var(--wms-tinta-media); background: var(--wms-superficie); font-size: var(--wms-txt-sm); margin: 0; } .pagination .page-item .page-link:hover { background: var(--wms-gris-100); color: var(--wms-tinta); border-color: var(--wms-filete-fuerte); } .pagination .page-item.active .page-link, body.white-content .pagination .page-item.active .page-link { background: var(--wms-accion); border-color: var(--wms-accion); color: var(--wms-tinta-invertida); box-shadow: none; } .pagination .page-item.disabled .page-link { background: var(--wms-superficie-suave); color: var(--wms-tinta-tenue); } /* ========================================================================== DISTINTIVOS DE ESTADO Color, forma y palabra. Nunca solo color: hay gente que no lo distingue. ========================================================================== */ .badge, body.white-content .badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; font-family: var(--wms-fuente); font-size: var(--wms-txt-xs); font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; border-radius: var(--wms-r-sm); border: 1px solid transparent; white-space: nowrap; } .badge:before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: currentColor; flex-shrink: 0; } .badge.badge-primary, body.white-content .badge.badge-primary { background-color: var(--wms-accion-tenue); border-color: var(--wms-accion-filete); color: var(--wms-accion-honda); } .badge.badge-success, body.white-content .badge.badge-success { background-color: var(--wms-bien-tenue); border-color: var(--wms-bien-filete); color: var(--wms-bien-tinta); } .badge.badge-warning, body.white-content .badge.badge-warning { background-color: var(--wms-atencion-tenue); border-color: var(--wms-atencion-filete); color: var(--wms-atencion-tinta); } .badge.badge-danger, body.white-content .badge.badge-danger { background-color: var(--wms-peligro-tenue); border-color: var(--wms-peligro-filete); color: var(--wms-peligro-tinta); } .badge.badge-info, body.white-content .badge.badge-info { background-color: var(--wms-azul-50); border-color: var(--wms-azul-200); color: var(--wms-azul-700); } .badge.badge-secondary, .badge.badge-default, body.white-content .badge.badge-secondary { background-color: var(--wms-superficie-hundida); border-color: var(--wms-filete); color: var(--wms-tinta-media); } /* ========================================================================== AVISOS, VENTANAS Y MENUS Aqui si hay sombra: son las unicas cosas que de verdad flotan. ========================================================================== */ /* * En bloque, no en fila. Con `display: flex` un aviso que lleva dentro un * parrafo y una lista convertia la lista en columnas y partia las palabras a la * mitad. El icono, cuando lo hay, se alinea sin volver flexible al aviso. */ .alert { display: block; border: 1px solid transparent; border-left-width: 3px; border-radius: var(--wms-r-md); padding: 10px var(--wms-e4); font-size: var(--wms-txt-sm); box-shadow: none; margin-bottom: var(--wms-e4); } .alert p { max-width: var(--wms-texto-max); } .alert.alert-success { background: var(--wms-bien-tenue); border-color: var(--wms-bien-filete); border-left-color: var(--wms-bien); color: var(--wms-bien-tinta); } .alert.alert-danger { background: var(--wms-peligro-tenue); border-color: var(--wms-peligro-filete); border-left-color: var(--wms-peligro); color: var(--wms-peligro-tinta); } .alert.alert-warning { background: var(--wms-atencion-tenue); border-color: var(--wms-atencion-filete); border-left-color: var(--wms-atencion); color: var(--wms-atencion-tinta); } .alert.alert-info { background: var(--wms-accion-tenue); border-color: var(--wms-accion-filete); border-left-color: var(--wms-accion); color: var(--wms-accion-honda); } .alert .alert-link { color: inherit; font-weight: 600; text-decoration: underline; } .alert > i:first-child { margin-right: 6px; } .alert p:last-child { margin-bottom: 0; } .alert strong { display: block; margin-bottom: 4px; } .modal-content { border: 1px solid var(--wms-filete); border-radius: var(--wms-r-lg); box-shadow: var(--wms-sombra-ventana); } /* La plantilla les quita el filete con un selector mas fuerte, y la ventana se queda sin separacion entre el titulo, el cuerpo y las acciones */ body .modal .modal-header, body.white-content .modal .modal-header { border-bottom: 1px solid var(--wms-filete); padding: var(--wms-e4) var(--wms-e5); } body .modal .modal-body, body.white-content .modal .modal-body { padding: var(--wms-e5); } body .modal .modal-footer, body.white-content .modal .modal-footer { border-top: 1px solid var(--wms-filete); padding: var(--wms-e3) var(--wms-e5); gap: var(--wms-e2); } .modal-footer > * { margin: 0; } .modal-backdrop.show { opacity: .4; } /* Nada aparece de la nada: entra desde 0.98, nunca desde cero */ .modal.fade .modal-dialog { transform: scale(.98) translateY(-8px); transition: transform var(--wms-lento) var(--wms-salida); } .modal.show .modal-dialog { transform: none; } .dropdown-menu, body.white-content .dropdown-menu { border: 1px solid var(--wms-filete); border-radius: var(--wms-r-md); box-shadow: var(--wms-sombra-flota); padding: 4px; font-size: var(--wms-txt-sm); } .dropdown-menu .dropdown-item { border-radius: var(--wms-r-sm); padding: 6px 10px; font-size: var(--wms-txt-sm); color: var(--wms-tinta-media); } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: var(--wms-gris-100); color: var(--wms-tinta); } .dropdown-divider { border-top-color: var(--wms-filete-suave); } .tooltip-inner { background: var(--wms-gris-900); /* * La plantilla pinta el globo blanco con texto #222a42. Aqui el fondo pasa a oscuro, asi que * sin este color el texto se queda en el de la plantilla y el globo sale en blanco: oscuro * sobre oscuro. Las dos mitades de la regla viajan juntas. */ color: var(--wms-gris-0); border-radius: var(--wms-r-sm); font-size: var(--wms-txt-xs); padding: 5px 8px; max-width: 260px; } .tooltip .arrow:before { border-top-color: var(--wms-gris-900); border-bottom-color: var(--wms-gris-900); } .nav-tabs { border-bottom: 1px solid var(--wms-filete); gap: 2px; } .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--wms-tinta-suave); font-size: var(--wms-txt-sm); font-weight: 500; padding: 8px 12px; } .nav-tabs .nav-link:hover { color: var(--wms-tinta); } .nav-tabs .nav-link.active { background: transparent; color: var(--wms-accion-honda); border-bottom-color: var(--wms-accion); } .progress { height: 6px; background: var(--wms-superficie-hundida); border-radius: 99px; box-shadow: none; } .progress-bar { background-image: none; background-color: var(--wms-accion); border-radius: 99px; } /* ========================================================================== UTILIDADES DE COLOR La plantilla definia `text-primary` como magenta. Se realinean al sistema. ========================================================================== */ .text-primary, body.white-content .text-primary { color: var(--wms-accion-viva) !important; } .text-info, body.white-content .text-info { color: var(--wms-accion-viva) !important; } .text-success, body.white-content .text-success { color: var(--wms-bien-tinta) !important; } .text-danger, body.white-content .text-danger { color: var(--wms-peligro-tinta) !important; } .text-warning, body.white-content .text-warning { color: var(--wms-atencion-tinta) !important; } .text-muted, body.white-content .text-muted { color: var(--wms-tinta-suave) !important; } .text-dark, body.white-content .text-dark { color: var(--wms-tinta) !important; } .text-secondary { color: var(--wms-tinta-suave) !important; } .bg-primary { background-color: var(--wms-accion) !important; } .bg-success { background-color: var(--wms-bien) !important; } .bg-danger { background-color: var(--wms-peligro) !important; } .bg-warning { background-color: var(--wms-atencion) !important; } .bg-info { background-color: var(--wms-azul-600) !important; } .bg-light { background-color: var(--wms-superficie-suave) !important; } .bg-dark { background-color: var(--wms-gris-900) !important; } .table thead.text-primary th, .table thead.text-info th { color: var(--wms-tinta-suave) !important; } /* ========================================================================== PANTALLA DE ACCESO ========================================================================== */ .wrapper-full-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--wms-e8) var(--wms-e4); background: var(--wms-gris-100); } .wrapper-full-page .full-page, .wrapper-full-page .content, .wrapper-full-page .container { width: 100%; padding: 0; background: transparent; min-height: 0; } .wrapper-full-page .full-page:after, .wrapper-full-page .full-page:before { display: none; } .wrapper-full-page .card { max-width: 340px; margin: 0 auto; box-shadow: var(--wms-sombra-flota); } .wrapper-full-page .card .card-header { justify-content: center; border-bottom: 0; padding-bottom: 0; } .wrapper-full-page .card img { display: block; max-width: 168px; margin: var(--wms-e2) auto var(--wms-e5); } /* ========================================================================== PANTALLAS ANGOSTAS ========================================================================== */ @media (max-width: 991px) { .main-panel, body.white-content .main-panel { width: 100%; } .main-panel > .content { padding-left: var(--wms-e4); padding-right: var(--wms-e4); } .main-panel .navbar, body.white-content .main-panel > .navbar { padding: 0 var(--wms-e4); } .table > thead > tr > th, .table > tbody > tr > td { padding-left: var(--wms-e3); padding-right: var(--wms-e3); } } @media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ========================================================================== COMPONENTES PROPIOS Cada uno tiene su pieza en resources/views/components/ui/. Si una pantalla necesita algo que no esta aqui, se agrega el componente; no se escribe suelto en la vista. ========================================================================== */ /* --- Encabezado de pantalla: ------------------------------- */ .wms-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wms-e4); flex-wrap: wrap; margin-bottom: var(--wms-e5); } .wms-page-header__ayuda { color: var(--wms-tinta-suave); font-size: var(--wms-txt-sm); margin: 3px 0 0; max-width: var(--wms-texto-max); } .wms-page-header__acciones { display: flex; align-items: center; gap: var(--wms-e2); flex-shrink: 0; } /* --- Tarjeta: ---------------------------------------------- */ .wms-card__acciones { display: flex; align-items: center; gap: var(--wms-e2); flex-shrink: 0; } /* * Una tarjeta puede llevar tono cuando lo que contiene es una condicion del * almacen, no decoracion. Solo cambia el filete: el fondo se queda blanco para * que la tabla de dentro siga siendo legible. */ body .card.wms-card--peligro, body.white-content .card.wms-card--peligro { border-color: var(--wms-peligro-filete); } body .card.wms-card--peligro > .card-header { border-bottom-color: var(--wms-peligro-filete); } body .card.wms-card--peligro > .card-header .card-title { color: var(--wms-peligro-tinta); } body .card.wms-card--atencion, body.white-content .card.wms-card--atencion { border-color: var(--wms-atencion-filete); } body .card.wms-card--atencion > .card-header { border-bottom-color: var(--wms-atencion-filete); } /* --- Indicador: ------------------------------------------ */ /* * A proposito NO es la tarjeta de icono redondo con titulo y dos renglones que * traen todas las plantillas. Aqui manda la cifra: es lo que se lee de lejos. * El color vive en una barra de 3px arriba, no en un circulo de fondo. */ .wms-metric { display: block; position: relative; height: 100%; padding: var(--wms-e4) var(--wms-e4) var(--wms-e3); background: var(--wms-superficie); border: 1px solid var(--wms-filete); border-top: 3px solid var(--wms-filete-fuerte); border-radius: var(--wms-r-lg); color: inherit; text-decoration: none; transition: border-color var(--wms-veloz) ease, background-color var(--wms-veloz) ease; } a.wms-metric:hover { background: var(--wms-superficie-suave); color: inherit; } .wms-metric--accion, .wms-metric--primary, .wms-metric--info { border-top-color: var(--wms-accion); } .wms-metric--bien { border-top-color: var(--wms-bien); } .wms-metric--atencion, .wms-metric--warning { border-top-color: var(--wms-atencion); } .wms-metric--peligro, .wms-metric--danger { border-top-color: var(--wms-peligro); } .wms-metric__valor { display: block; font-size: var(--wms-txt-2xl); font-weight: 600; line-height: 1.1; color: var(--wms-tinta); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .wms-metric__etiqueta { display: flex; align-items: center; gap: 6px; margin-top: var(--wms-e2); font-size: var(--wms-txt-sm); font-weight: 500; color: var(--wms-tinta-media); } .wms-metric__etiqueta i { font-size: 11px; color: var(--wms-tinta-tenue); } .wms-metric--peligro .wms-metric__etiqueta i, .wms-metric--danger .wms-metric__etiqueta i { color: var(--wms-peligro); } .wms-metric__ayuda { display: block; margin-top: 2px; font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); } /* --- Vacio: ----------------------------------------------- */ .wms-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--wms-e10) var(--wms-e5); text-align: center; } .wms-empty__icono { font-size: 22px; color: var(--wms-gris-300); margin-bottom: var(--wms-e3); } .wms-empty__titulo { margin: 0; font-size: var(--wms-txt-md); font-weight: 500; color: var(--wms-tinta-media); } .wms-empty__texto { margin: 4px 0 0; font-size: var(--wms-txt-sm); color: var(--wms-tinta-suave); max-width: 46ch; } /* --- Campo: ----------------------------------------------- */ .wms-requerido { color: var(--wms-peligro); margin-left: 2px; } .wms-ayuda { display: block; margin-top: 4px; font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); } /* --- Barra de filtros: components/searchBar ---------------------------- */ /* * La alineacion de la fila de filtros es estructural, no incidental: cada * columna es a su vez una columna flexible que empuja su control al fondo. Asi * da igual que una etiqueta ocupe dos renglones o que el control sea un * desplegable con buscador; todos los controles terminan en la misma linea. */ .wms-filtros { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--wms-e3); } .wms-filtros__campo, .wms-filtros__acciones { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; } .wms-filtros__campo { flex: 1 1 150px; } .wms-filtros__acciones { flex: 0 0 auto; margin-left: auto; } .wms-filtros__campo label { margin-bottom: 5px; } /* Y el control siempre mide lo mismo, sea cual sea */ .wms-filtros__campo > .form-control, .wms-filtros__campo > .input-group, .wms-filtros__campo > .ss-main, .wms-filtros__acciones > .btn { height: var(--wms-control-alto); flex: 0 0 auto; } /* * Un control que Livewire no debe repintar va envuelto en `wire:ignore`, y ese envoltorio se * interpone entre el campo y su control. Sin estas dos reglas el control se sale de la linea: * deja de heredar la altura del sistema y la fila de filtros pierde su alineacion al fondo. */ .wms-filtros__campo > [wire\:ignore] { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; } .wms-filtros__campo > [wire\:ignore] > .form-control, .wms-filtros__campo > [wire\:ignore] > .input-group, .wms-filtros__campo > [wire\:ignore] > .ss-main { height: var(--wms-control-alto); flex: 0 0 auto; } /* La caja de texto libre pide mas sitio que un desplegable de opciones cerradas */ .wms-filtros__campo--ancho { flex: 2 1 240px; } /* --- Rejilla de indicadores -------------------------------------------- */ .wms-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--wms-e4); margin-bottom: var(--wms-e5); } /* --- Panel de estado del tunel: --------------------------- */ /* * Las dos pantallas del tunel se leen desde el pasillo, no desde la silla. Por * eso aqui la tipografia sube de escala. Sigue siendo el mismo sistema: los * mismos colores, el mismo filete y el mismo lenguaje, en tamano de kiosco. */ .wms-estado { display: flex; align-items: center; gap: var(--wms-e5); padding: var(--wms-e6); background: var(--wms-superficie); border: 1px solid var(--wms-filete); border-left: 4px solid var(--wms-filete-fuerte); border-radius: var(--wms-r-lg); margin-bottom: var(--wms-e5); } .wms-estado__icono { font-size: 34px; flex-shrink: 0; color: var(--wms-tinta-tenue); } .wms-estado__texto { flex: 1 1 auto; min-width: 0; } .wms-estado__titulo { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; color: var(--wms-tinta); } .wms-estado__mensaje { margin: 5px 0 0; font-size: var(--wms-txt-lg); color: var(--wms-tinta-media); } .wms-estado__etiqueta { display: inline-flex; align-items: center; margin-top: var(--wms-e3); padding: 4px 10px; border-radius: var(--wms-r-sm); font-size: var(--wms-txt-sm); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; background: var(--wms-superficie-hundida); color: var(--wms-tinta-media); } .wms-estado__acciones { display: flex; align-items: center; gap: var(--wms-e2); flex-shrink: 0; } .wms-estado--espera { border-left-color: var(--wms-atencion); } .wms-estado--espera .wms-estado__icono { color: var(--wms-atencion); } .wms-estado--espera .wms-estado__etiqueta { background: var(--wms-atencion-tenue); color: var(--wms-atencion-tinta); } .wms-estado--bien { border-left-color: var(--wms-bien); } .wms-estado--bien .wms-estado__icono { color: var(--wms-bien); } .wms-estado--bien .wms-estado__etiqueta { background: var(--wms-bien-tenue); color: var(--wms-bien-tinta); } .wms-estado--peligro { border-left-color: var(--wms-peligro); } .wms-estado--peligro .wms-estado__icono { color: var(--wms-peligro); } .wms-estado--peligro .wms-estado__etiqueta { background: var(--wms-peligro-tenue); color: var(--wms-peligro-tinta); } .wms-estado--peligro .wms-estado__titulo { color: var(--wms-peligro-tinta); } /* Una pantalla de kiosco no tiene menu: el contenido se centra y respira */ .wms-kiosco { max-width: 1280px; margin: 0 auto; padding: var(--wms-e5) var(--wms-e5) var(--wms-e10); } /* En el tunel la tabla tambien se lee de lejos */ .wms-kiosco .table > tbody > tr > td { height: 44px; font-size: var(--wms-txt-md); } .wms-kiosco .table > thead > tr > th { font-size: var(--wms-txt-sm); } [v-cloak] { display: none; } /* Un contador junto al titulo de una tarjeta: cuantos hay de lo que se lista */ .wms-contador { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px; background: var(--wms-superficie-hundida); border: 1px solid var(--wms-filete); border-radius: var(--wms-r-sm); font-family: var(--wms-fuente-dato); font-size: var(--wms-txt-xs); font-weight: 500; color: var(--wms-tinta-media); font-variant-numeric: tabular-nums; } /* --- Fila con estado ---------------------------------------------------- */ /* * Tres listados de bitacora pintaban CADA celda con el color solido del estado y * ponian el texto en blanco encima. Se leia mal y repetia la informacion, porque * en la misma fila ya iba el distintivo. Aqui el estado es un filete a la * izquierda y un fondo apenas tenido: la fila sigue siendo legible. */ .wms-fila > td:first-child { box-shadow: inset 3px 0 0 var(--wms-filete-fuerte); } .wms-fila--success > td { background-color: var(--wms-bien-tenue); } .wms-fila--success > td:first-child { box-shadow: inset 3px 0 0 var(--wms-bien); } .wms-fila--danger > td { background-color: var(--wms-peligro-tenue); } .wms-fila--danger > td:first-child { box-shadow: inset 3px 0 0 var(--wms-peligro); } .wms-fila--warning > td { background-color: var(--wms-atencion-tenue); } .wms-fila--warning > td:first-child { box-shadow: inset 3px 0 0 var(--wms-atencion); } .wms-fila--info > td, .wms-fila--primary > td { background-color: var(--wms-accion-tenue); } .wms-fila--info > td:first-child, .wms-fila--primary > td:first-child { box-shadow: inset 3px 0 0 var(--wms-accion); } .wms-fila--secondary > td:first-child { box-shadow: inset 3px 0 0 var(--wms-gris-400); } /* --- Encabezado de pantalla, seccion y resumen -------------------------- */ .wms-page-header__seccion { margin: 0 0 2px; font-size: var(--wms-txt-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--wms-tinta-tenue); } .wms-page-header__resumen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wms-e2); margin-top: var(--wms-e3); } /* * Los distintivos del resumen son enlaces: filtran el listado. Se ven como * distintivo de estado porque eso es lo que cuentan. */ .wms-resumen { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: var(--wms-superficie); border: 1px solid var(--wms-filete); border-radius: var(--wms-r-md); font-size: var(--wms-txt-sm); color: var(--wms-tinta-media); text-decoration: none; transition: border-color var(--wms-veloz) ease, background-color var(--wms-veloz) ease; } a.wms-resumen:hover { background: var(--wms-superficie-suave); border-color: var(--wms-filete-fuerte); color: var(--wms-tinta); } a.wms-resumen.is-activo { border-color: var(--wms-accion); background: var(--wms-accion-tenue); color: var(--wms-accion-honda); } .wms-resumen__punto { width: 6px; height: 6px; border-radius: 1px; background: var(--wms-gris-400); flex-shrink: 0; } .wms-resumen--bien .wms-resumen__punto { background: var(--wms-bien); } .wms-resumen--atencion .wms-resumen__punto { background: var(--wms-atencion); } .wms-resumen--peligro .wms-resumen__punto { background: var(--wms-peligro); } .wms-resumen--accion .wms-resumen__punto { background: var(--wms-accion); } .wms-resumen__cifra { font-family: var(--wms-fuente-dato); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wms-tinta); } /* --- Barra superior: ruta y sesion -------------------------------------- */ .wms-ruta { display: flex; align-items: center; gap: 6px; font-size: var(--wms-txt-sm); } .wms-ruta__paso { color: var(--wms-tinta-suave); } .wms-ruta__paso--actual { color: var(--wms-tinta); font-weight: 500; } .wms-ruta__sep { color: var(--wms-tinta-tenue); } .wms-sesion { display: flex; align-items: center; margin-left: auto; } .wms-sesion__boton { display: flex; align-items: center; gap: var(--wms-e2); padding: 4px 8px 4px 4px; border: 1px solid transparent; border-radius: var(--wms-r-md); color: var(--wms-tinta-media); transition: background-color var(--wms-veloz) ease, border-color var(--wms-veloz) ease; } .wms-sesion__boton:hover { background: var(--wms-superficie-suave); border-color: var(--wms-filete); color: var(--wms-tinta); } .wms-sesion__inicial { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--wms-r-md); background: var(--wms-azul-100); color: var(--wms-accion-honda); font-size: var(--wms-txt-sm); font-weight: 600; flex-shrink: 0; } .wms-sesion__texto { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .wms-sesion__nombre { font-size: var(--wms-txt-sm); font-weight: 500; color: var(--wms-tinta); } .wms-sesion__perfil { font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); } .wms-sesion__caret { font-size: 9px; color: var(--wms-tinta-tenue); margin-left: 2px; } .dropdown-menu .dropdown-item i { width: 14px; margin-right: 6px; color: var(--wms-tinta-tenue); } @media (max-width: 767px) { .wms-sesion__texto { display: none; } .wms-ruta__paso:not(.wms-ruta__paso--actual), .wms-ruta__sep { display: none; } } /* ========================================================================== MOVIMIENTO Con criterio, no de adorno. Las reglas, en orden: 1. Nada que se vea cien veces al dia se anima. Cansa y hace lento al sistema. 2. Nunca `ease-in`: arranca lento justo cuando la persona esta mirando. 3. Nada por encima de 300ms. Un desplegable de 180ms se SIENTE mas rapido que uno de 400, aunque los dos tarden lo mismo en ser utiles. 4. Nada aparece de la nada: se entra desde 0.98 y 4px, nunca desde cero. En el mundo real las cosas no surgen del vacio. 5. Quien pidio que nada se mueva, no ve nada moverse. ========================================================================== */ @keyframes wms-entra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } @keyframes wms-entra-lateral { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } /* * El contenido entra al cargar. Es lo que mas cambia la sensacion de un sistema * que pinta paginas en el servidor: antes aparecia de golpe. * * Escalonado, pero solo los primeros: a partir del sexto bloque el retraso ya * no lee como orden, lee como lentitud. */ .main-panel > .content > * { animation: wms-entra 220ms var(--wms-salida) backwards; } .main-panel > .content > *:nth-child(1) { animation-delay: 0ms; } .main-panel > .content > *:nth-child(2) { animation-delay: 25ms; } .main-panel > .content > *:nth-child(3) { animation-delay: 50ms; } .main-panel > .content > *:nth-child(4) { animation-delay: 70ms; } .main-panel > .content > *:nth-child(n+5) { animation-delay: 85ms; } /* Los indicadores del tablero entran uno tras otro, de izquierda a derecha */ .wms-rejilla > * { animation: wms-entra 240ms var(--wms-salida) backwards; } .wms-rejilla > *:nth-child(1) { animation-delay: 40ms; } .wms-rejilla > *:nth-child(2) { animation-delay: 80ms; } .wms-rejilla > *:nth-child(3) { animation-delay: 120ms; } .wms-rejilla > *:nth-child(4) { animation-delay: 160ms; } .wms-rejilla > *:nth-child(n+5) { animation-delay: 180ms; } /* * Los renglones entran escalonados, y solo los doce primeros: en una tabla de * cien, la cascada completa se vuelve una espera. */ .table > tbody > tr { animation: wms-entra-lateral 200ms var(--wms-salida) backwards; } .table > tbody > tr:nth-child(1) { animation-delay: 20ms; } .table > tbody > tr:nth-child(2) { animation-delay: 32ms; } .table > tbody > tr:nth-child(3) { animation-delay: 44ms; } .table > tbody > tr:nth-child(4) { animation-delay: 56ms; } .table > tbody > tr:nth-child(5) { animation-delay: 68ms; } .table > tbody > tr:nth-child(6) { animation-delay: 80ms; } .table > tbody > tr:nth-child(7) { animation-delay: 92ms; } .table > tbody > tr:nth-child(8) { animation-delay: 104ms; } .table > tbody > tr:nth-child(9) { animation-delay: 116ms; } .table > tbody > tr:nth-child(10) { animation-delay: 128ms; } .table > tbody > tr:nth-child(11) { animation-delay: 140ms; } .table > tbody > tr:nth-child(n+12) { animation-delay: 150ms; } /* Los avisos bajan desde arriba: vienen del sistema, no estaban ahi */ .alert { animation: wms-entra 260ms var(--wms-salida) backwards; } /* * El renglon se levanta un pelo al pasar por encima. Dos pixeles: suficiente * para saber cual estas mirando en una tabla de diez columnas, y no tanto como * para marear al recorrerla. */ .table > tbody > tr, body.white-content .table > tbody > tr { transition: background-color 90ms ease, box-shadow 140ms var(--wms-salida); } /* Las tarjetas de indicador se levantan al apuntarlas, porque son enlaces */ a.wms-metric { transition: border-color var(--wms-veloz) ease, background-color var(--wms-veloz) ease, transform 160ms var(--wms-salida), box-shadow 160ms var(--wms-salida); } a.wms-metric:hover { transform: translateY(-2px); box-shadow: var(--wms-sombra-flota); } a.wms-metric:active { transform: translateY(0); } /* Los distintivos del resumen tambien son enlaces */ a.wms-resumen { transition: border-color var(--wms-veloz) ease, background-color var(--wms-veloz) ease, transform 120ms var(--wms-salida); } a.wms-resumen:active { transform: scale(.97); } /* El menu lateral: la entrada activa y el submenu que se despliega */ .sidebar .nav li.active > a:before { animation: wms-entra 200ms var(--wms-salida) backwards; } .sidebar .nav .collapsing { transition: height var(--wms-normal) var(--wms-salida); } /* Un boton trabajando lo dice. El formulario ya lo desactiva; esto explica por que */ .btn .wms-girando { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wms-gira 600ms linear infinite; } @keyframes wms-gira { to { transform: rotate(360deg); } } /* La cifra de un indicador, mientras cuenta */ .wms-metric__valor { transition: color var(--wms-veloz) ease; } @media (prefers-reduced-motion: reduce) { .main-panel > .content > *, .wms-rejilla > *, .table > tbody > tr, .alert, .sidebar .nav li.active > a:before { animation: none !important; } } /* --- La marca, arriba del menu ------------------------------------------ */ /* * Mide exactamente lo que la barra superior, para que el filete de abajo de la * marca y el de abajo de la barra sean la misma linea cruzando la pantalla. Con * 70 contra 52 se notaba el escalon. */ .wms-marca { display: flex; align-items: center; gap: 10px; height: var(--wms-barra-alto); padding: 0 var(--wms-e4); border-bottom: 1px solid var(--wms-gris-800); text-decoration: none; } /* * El sello: el trazo rojo del logotipo sobre una placa oscura. Antes el trazo * cruzaba la palabra, y una palabra con una linea encima se lee como texto * tachado, no como marca. Asi el rojo sigue siendo el de EEPAT y ademas es la * misma forma inclinada que senala la pantalla activa en el menu. */ .wms-marca__sello { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--wms-r-md); background: var(--wms-gris-800); border: 1px solid var(--wms-gris-700); overflow: hidden; } .wms-marca__sello:before, .wms-marca__sello:after { content: ""; position: absolute; top: 5px; bottom: 5px; width: 3px; border-radius: 1px; transform: skewX(-14deg); } .wms-marca__sello:before { left: 8px; background: var(--wms-azul-400); } .wms-marca__sello:after { left: 15px; background: var(--wms-rojo-500); } .wms-marca__texto { display: flex; flex-direction: column; min-width: 0; } .wms-marca:hover { text-decoration: none; } .wms-marca__nombre { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .09em; line-height: 1.15; } .wms-marca__producto { display: block; margin-top: 1px; font-size: var(--wms-txt-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--wms-gris-500); } .wms-marca:hover .wms-marca__producto { color: var(--wms-gris-400); } /* --- El desplegable con buscador de los filtros ------------------------- */ /* * Los filtros usan SlimSelect, que ya venia en el proyecto pero solo en cinco * pantallas sueltas. Un desplegable nativo con treinta almacenes obliga a * recorrerlos a ojo; con buscador se escribe una parte del nombre y ya. */ .ss-main { width: 100%; } .ss-main .ss-single-selected .placeholder { color: var(--wms-tinta); } .ss-main .ss-single-selected .placeholder.ss-disabled { color: var(--wms-tinta-tenue); } .ss-main .ss-single-selected .ss-arrow .arrow-up, .ss-main .ss-single-selected .ss-arrow .arrow-down { border-color: var(--wms-tinta-tenue); } .ss-content .ss-search { padding: 6px; border-bottom: 1px solid var(--wms-filete-suave); } .ss-content .ss-search input { height: 30px; padding: 0 10px; font-family: var(--wms-fuente); font-size: var(--wms-txt-sm); color: var(--wms-tinta); border: 1px solid var(--wms-filete-fuerte); border-radius: var(--wms-r-sm); box-shadow: none; } .ss-content .ss-search input:focus { border-color: var(--wms-accion); box-shadow: 0 0 0 3px var(--wms-azul-100); } .ss-content .ss-list { padding: 4px; } .ss-content .ss-list .ss-option { padding: 6px 10px; border-radius: var(--wms-r-sm); font-size: var(--wms-txt-sm); color: var(--wms-tinta-media); } .ss-content .ss-list .ss-option.ss-disabled { color: var(--wms-tinta-tenue); background: transparent; } .ss-content .ss-list .ss-option.ss-option-selected, .ss-content .ss-list .ss-option[data-selected="true"] { background: var(--wms-accion-tenue); color: var(--wms-accion-honda); font-weight: 500; } /* Cuando el desplegable esta abierto, el campo se ve enfocado */ .ss-main .ss-single-selected.ss-open-below, .ss-main .ss-single-selected.ss-open-above { border-color: var(--wms-accion); box-shadow: 0 0 0 3px var(--wms-azul-100); border-radius: var(--wms-r-md); } /* ========================================================================== AJUSTES DE APRIETE Y HUECOS Cada uno viene de una medicion, no de una impresion. ========================================================================== */ /* * Un campo con boton pegado quedaba 5px mas abajo que sus vecinos, y eso * empujaba el boton de buscar 16px por debajo de la fila. En una barra de * filtros se nota como si estuviera torcida. */ .input-group { align-items: stretch; } .input-group > .input-group-append, .input-group > .input-group-prepend { display: flex; align-items: stretch; } .input-group > .input-group-append > .btn, .input-group > .input-group-prepend > .btn { height: auto; align-self: stretch; } /* Los desplegables con buscador miden lo mismo que un campo de texto */ .wms-filtros .ss-main, .wms-filtros .ss-main .ss-single-selected { height: var(--wms-control-alto); } .wms-filtros .ss-main .ss-single-selected { display: flex; align-items: center; } /* * Un pie de tarjeta que solo lleva la paginacion y la paginacion no existe * (porque todo cabe en una pagina) dejaba 49px de tarjeta vacia debajo de la * tabla. Se va, pero solo en ese caso: un pie con botones se queda. */ .card > .card-footer:has(> nav):not(:has(.pagination)), .card > .card-footer:has(> .row > nav):not(:has(.pagination)) { display: none; } /* La paginacion queda a la derecha con el mismo aire que el resto de la tarjeta */ .card > .card-footer > nav, .card > .card-footer > .row > nav { margin: 0; } .card > .card-footer .row { margin: 0; } /* Un `py-4` heredado hacia el pie el doble de alto que la cabecera */ .card > .card-footer.py-4 { padding-top: var(--wms-e3) !important; padding-bottom: var(--wms-e3) !important; } /* * Los listados heredados envuelven la tabla en `card-body`, que le mete 20px de * relleno lateral encima de los 16 de cada celda: la tabla quedaba flotando * dentro de la tarjeta en vez de ocuparla. */ .card > .card-body > .table-responsive, .card > .card-body > .table, .card > .card-body > div:only-child > .table { margin-left: calc(var(--wms-e5) * -1); margin-right: calc(var(--wms-e5) * -1); width: calc(100% + var(--wms-e5) * 2); } .card > .card-body:has(> .table-responsive:only-child), .card > .card-body:has(> .table:only-child) { padding-top: 0; padding-bottom: 0; } /* * La plantilla le pone margen inferior a los campos, a los grupos y a los * botones. Dentro de una fila de filtros eso hace que cada columna mida * distinto y la fila se vea torcida: medido, el boton de buscar quedaba 16px * por debajo de los campos. Aqui los margenes se anulan y la rejilla manda. */ body .wms-filtros .wms-filtros__campo > *, body .wms-filtros .wms-filtros__campo > [wire\:ignore] > *, body .wms-filtros .wms-filtros__acciones > *, body.white-content .wms-filtros .wms-filtros__campo > *, body.white-content .wms-filtros .wms-filtros__campo > [wire\:ignore] > * { margin: 0; } body .wms-filtros .wms-filtros__campo > label { margin-bottom: 5px; } .wms-filtros__campo > .input-group, .wms-filtros__campo > .ss-main { display: flex; } /* * El boton pegado al campo de fecha quedaba 5px mas abajo que el campo: la * plantilla le pone margen propio a los botones y el grupo no lo compensa. */ body .input-group > .input-group-append > .btn, body .input-group > .input-group-prepend > .btn, body.white-content .input-group > .input-group-append > .btn { margin-top: 0; margin-bottom: 0; height: 100%; } /* * La plantilla le pone 30px de margen inferior a los titulos. Dentro del * encabezado eso abria un hueco entre el titulo y su linea de contexto, que * son la misma idea y tienen que leerse juntos. */ body .wms-page-header .page-title, body .wms-page-header h1, body .wms-page-header p { margin: 0; } body .wms-page-header__ayuda { margin-top: 3px !important; } body .wms-page-header__seccion { margin-bottom: 3px !important; } /* Lo mismo dentro de las tarjetas y de los paneles del tunel */ body .card .card-header h1, body .card .card-header h2, body .card .card-header h3, body .card .card-header h4, body .card .card-header h5, body .wms-estado p { margin-top: 0; margin-bottom: 0; } body .wms-estado__mensaje { margin-top: 5px !important; } /* * La tarjeta de filtros se dibuja por encima de la que lleva la tabla: su * desplegable con buscador se despliega hacia abajo y tiene que tapar el * listado, no quedar debajo. */ .card-search { position: relative; z-index: 20; } .ss-content { z-index: 1100; } /* Con listas de doscientas marcas, 200px de alto se queda corto */ .ss-content .ss-list { max-height: 260px; } /* * SlimSelect copia al contenedor las clases del `select` original, asi que * `.ss-main` acababa con `form-control` y dibujaba su propia caja ademas de la * del control de dentro: dos rectangulos con borde, uno metido en el otro, * separados 11px. Se ve como un campo mal armado. * * El contenedor pasa a ser transparente y la unica caja es la del control. */ .wms-filtros .ss-main, .wms-filtros .ss-main.form-control, body.white-content .wms-filtros .ss-main.form-control, .ss-main.form-control { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .ss-main .ss-single-selected, .wms-filtros .ss-main .ss-single-selected { width: 100%; } /* ========================================================================== FORMULARIOS DE ALTA Y EDICION ========================================================================== */ /* * La plantilla pinta las etiquetas de dentro de una tarjeta en azul marino con * una regla muy especifica, asi que se salian del sistema justo donde mas se * leen. Se igualan con la misma especificidad. */ body.white-content .card:not(.card-white) label:not(.btn), body.white-content .card:not(.card-white) .col-form-label { color: var(--wms-tinta-media); font-size: var(--wms-txt-xs); font-weight: 500; text-transform: none; letter-spacing: 0; } /* * Un campo de nombre de mil pixeles de ancho no se lee mejor: se lee peor, * porque el ojo pierde la relacion entre la etiqueta y lo que escribio. Los * controles de un formulario se acotan a una medida comoda; dentro de una * rejilla de columnas la columna ya manda y esto no estorba. */ form .form-group > .form-control, form .form-group > .ss-main, form .form-group > .input-group, form .form-group > .custom-select { max-width: 520px; } /* Lo que si necesita todo el ancho */ form .form-group > textarea.form-control, form .form-group > .form-control.w-100 { max-width: none; } /* El pie de un formulario: las acciones a la derecha, no centradas */ form .text-center > .btn[type="submit"] { margin-left: 0; } /* ========================================================================== CASILLAS, INTERRUPTORES Y OPCIONES ========================================================================== */ /* * Una casilla NUNCA se dibuja como un campo de texto, aunque el marcado diga * `form-control`. Dos vistas lo hacian y el resultado era un recuadro vacio de * 34px de alto flotando en medio del formulario, con su etiqueta perdida * encima. Esta regla protege tambien a las vistas que no se han tocado. */ /* * La plantilla esconde la casilla nativa (`visibility: hidden; opacity: 0`) para * dibujar la suya con pseudoelementos sobre la etiqueta. Ese contrato solo * funciona con su marcado exacto, asi que en cuanto una vista lo escribia * distinto no se veia ninguna casilla. El sistema dibuja la suya y no depende * de eso. */ input[type="checkbox"], input[type="radio"], body.white-content input[type="checkbox"], body.white-content input[type="radio"], body.white-content .card:not(.card-white) input[type="checkbox"], body.white-content .card:not(.card-white) input[type="radio"], input[type="checkbox"].form-control, input[type="radio"].form-control, input[type="checkbox"].form-check-input, input[type="radio"].form-check-input { position: static; width: 16px; height: 16px; min-width: 16px; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto; visibility: visible; opacity: 1; appearance: none; -webkit-appearance: none; background-color: var(--wms-superficie); background-repeat: no-repeat; background-position: center; border: 1px solid var(--wms-filete-fuerte); border-radius: var(--wms-r-sm); box-shadow: none; cursor: pointer; vertical-align: middle; transition: background-color var(--wms-veloz) ease, border-color var(--wms-veloz) ease; } input[type="radio"], input[type="radio"].form-control, input[type="radio"].form-check-input { border-radius: 50%; } input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--wms-gris-400); } input[type="checkbox"]:checked, body.white-content input[type="checkbox"]:checked, body.white-content .card:not(.card-white) input[type="checkbox"]:checked, body.white-content .card:not(.card-white) input[type="checkbox"].form-check-input:checked, body.white-content .card:not(.card-white) input[type="checkbox"].form-control:checked, input[type="checkbox"].form-check-input:checked { background-color: var(--wms-accion); border-color: var(--wms-accion); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 5.8 10.2 11 4.6'/%3E%3C/svg%3E"); background-size: 12px; } input[type="radio"]:checked, body.white-content input[type="radio"]:checked, body.white-content .card:not(.card-white) input[type="radio"]:checked, body.white-content .card:not(.card-white) input[type="radio"].form-check-input:checked, body.white-content .card:not(.card-white) input[type="radio"].form-control:checked, input[type="radio"].form-check-input:checked { background-color: var(--wms-accion); border-color: var(--wms-accion); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='2.6' fill='%23fff'/%3E%3C/svg%3E"); background-size: 12px; } input[type="checkbox"]:indeterminate { background-color: var(--wms-accion); border-color: var(--wms-accion); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3.5 7h7'/%3E%3C/svg%3E"); background-size: 12px; } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { box-shadow: var(--wms-foco); } input[type="checkbox"]:disabled, input[type="radio"]:disabled { cursor: not-allowed; opacity: .5; background-color: var(--wms-superficie-hundida); } /* La plantilla dibujaba su casilla falsa sobre la etiqueta. Ya no hace falta */ .form-check .form-check-label:before, .form-check .form-check-label:after, .form-check-sign:before, .form-check-sign:after { display: none !important; } /* * La etiqueta al lado de la casilla, alineada con ella, y toda la fila es zona * de click: con guantes, acertarle a un cuadro de 16px es pedir mucho. */ .form-check, .wms-check { display: flex; align-items: flex-start; gap: var(--wms-e2); padding: 0; margin: 0; min-height: 22px; } .form-check + .form-check, .wms-check + .wms-check { margin-top: 6px; } .form-check .form-check-input, .wms-check .form-check-input { position: static; margin: 3px 0 0; } body.white-content .card:not(.card-white) .form-check .form-check-label, .form-check .form-check-label, .wms-check .form-check-label { display: block; margin: 0; /* * La plantilla le reserva 25px a la casilla que ella misma dibuja con :before y :after. Esos * pseudo-elementos se apagan mas arriba, asi que sin este cero el hueco se queda vacio y el * texto aparece separado de su casilla por dos centimetros de nada. */ padding-left: 0; font-size: var(--wms-txt-sm); font-weight: 400; color: var(--wms-tinta-media); cursor: pointer; text-transform: none; letter-spacing: 0; } .wms-check__ayuda { display: block; margin-top: 1px; font-size: var(--wms-txt-xs); color: var(--wms-tinta-suave); } /* Un grupo de casillas dentro de un campo respira igual que cualquier control */ .form-group > .form-check:first-of-type, .form-group > .wms-check:first-of-type { margin-top: 2px; } /* * Las casillas de seleccion de renglon en las tablas de etiquetas y particiones: * centradas en su celda y con zona de click amplia. */ .table td > input[type="checkbox"], .table th > input[type="checkbox"] { display: block; margin: 0 auto; } .table td:has(> input[type="checkbox"]:only-child), .table th:has(> input[type="checkbox"]:only-child) { width: 44px; text-align: center; padding-left: var(--wms-e2); padding-right: var(--wms-e2); } /* ========================================================================== OTROS CONTROLES ========================================================================== */ /* Subir un archivo */ input[type="file"].form-control, input[type="file"] { height: auto; min-height: var(--wms-control-alto); padding: 6px 10px; font-size: var(--wms-txt-sm); cursor: pointer; } input[type="file"]::file-selector-button { height: 22px; margin-right: var(--wms-e2); padding: 0 10px; background: var(--wms-superficie-hundida); border: 1px solid var(--wms-filete); border-radius: var(--wms-r-sm); font-family: var(--wms-fuente); font-size: var(--wms-txt-xs); color: var(--wms-tinta-media); cursor: pointer; } input[type="file"]::file-selector-button:hover { background: var(--wms-gris-100); } /* Un campo numerico se lee en cifras de ancho fijo y alineado a la derecha */ input[type="number"].form-control { font-family: var(--wms-fuente-dato); font-variant-numeric: tabular-nums; text-align: right; } /* El campo de fecha nativo, a la altura del resto */ input[type="date"].form-control, input[type="datetime-local"].form-control, input[type="time"].form-control { padding-right: 8px; } /* Un `select` nativo que se quede sin buscador tampoco desentona */ select.form-control:not([data-wms-buscador]) { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23747881' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; } /* Los permisos heredados: una lista, no una fila */ .wms-heredados__lista { list-style: none; margin: var(--wms-e3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--wms-e2) var(--wms-e5); } .wms-heredados .form-check-label .wms-dato { color: var(--wms-atencion-tinta); } /* * La hoja vieja le pone 20px de margen inferior a todo desplegable con * buscador. Dentro de un campo que ya trae su propio margen eso deja 36px entre * un control y el siguiente, mientras un campo de texto normal deja 16: la * misma columna con dos ritmos distintos. */ body .ss-main, body.white-content .ss-main { margin: 0; width: 100%; } body .form-group > .ss-main { margin-bottom: 0; } /* Un contador dentro de un boton: cuantas cosas va a tocar la accion */ .btn .wms-contador { height: 18px; min-width: 18px; padding: 0 5px; margin-left: 2px; background: rgba(255, 255, 255, .22); border-color: transparent; color: inherit; } .btn.btn-secondary .wms-contador, .btn:not([class*="btn-primary"]):not([class*="btn-success"]):not([class*="btn-danger"]):not([class*="btn-warning"]):not([class*="btn-info"]) .wms-contador { background: var(--wms-superficie-hundida); border: 1px solid var(--wms-filete); color: var(--wms-tinta-media); } /* Una accion apagada dice por que con su globo de ayuda, asi que sigue recibiendo el raton */ .btn:disabled, .btn.disabled { pointer-events: auto; cursor: not-allowed; } /* Un formulario que solo envuelve un boton no ocupa espacio propio */ .wms-card__acciones > form, .wms-page-header__acciones > form { display: inline-flex; margin: 0; } /* La fila de un remanente. Antes lo pintaba una hoja privada de la vista */ body.white-content .table > tbody > tr.tr-warning td { background-color: var(--wms-atencion-tenue); } body.white-content .table > tbody > tr.tr-warning td:first-child { box-shadow: inset 3px 0 0 var(--wms-atencion); }