/* ===================================================================== Twenty Design System — capa de tema global Se carga DESPUÉS de tabler.css y global.css: reescribe los tokens de Tabler para que todas las vistas hereden la escala tipográfica, la paleta y los radios del design system de Twenty. ===================================================================== */ :root { /* ---------- Escala de grises (Twenty) ---------- */ --tw-gray-0: #ffffff; --tw-gray-10: #fbfbfb; --tw-gray-15: #f9f9f9; --tw-gray-20: #f6f6f6; --tw-gray-25: #f1f1f1; --tw-gray-30: #ededed; --tw-gray-35: #e3e3e3; --tw-gray-40: #d6d6d6; --tw-gray-45: #cbcbcb; --tw-gray-50: #b3b3b3; --tw-gray-55: #999999; --tw-gray-60: #818181; --tw-gray-65: #666666; --tw-gray-70: #4b4b4b; --tw-gray-75: #3d3d3d; --tw-gray-80: #333333; --tw-gray-85: #292929; --tw-gray-90: #1b1b1b; --tw-gray-100: #000000; /* ---------- Fondos ---------- */ --tw-bg-primary: var(--tw-gray-0); --tw-bg-secondary: var(--tw-gray-15); --tw-bg-tertiary: var(--tw-gray-20); --tw-bg-quaternary: var(--tw-gray-25); --tw-bg-transparent-light: rgba(0, 0, 0, 0.04); --tw-bg-transparent-lighter: rgba(0, 0, 0, 0.02); --tw-bg-danger: #fff2f2; --tw-bg-overlay: rgba(27, 27, 27, 0.08); /* ---------- Bordes ---------- */ --tw-border-light: var(--tw-gray-25); --tw-border-medium: var(--tw-gray-30); --tw-border-strong: var(--tw-gray-35); /* ---------- Texto ---------- Los tonos secundarios no salen de la escala de grises, y es a propósito. La escala está pensada para bordes y fondos, donde un gris claro es lo que se quiere. Usada para texto sobre blanco daba lo siguiente: `gray-50` —el tono de `.tw-meta`, que es el que lleva media pantalla— **2.10 : 1**, y `gray-45` —el de `.tw-empty-value`— **1.62 : 1**. Los mismos dos papeles en el tema oscuro dan 4.55 : 1 y 2.80 : 1: el oscuro estaba medido y el claro había heredado la escala sin mirar, así que la misma clase se leía en uno y se desvanecía en el otro. Ahora cada tono lleva su contraste sobre blanco al lado. El de `light` está en 4.5 : 1 porque es donde vive el texto que se lee de verdad —la línea de datos de una tarjeta, la nota de un paso—; `extra-light` se queda por debajo a propósito, porque es para lo que **no** hay que leer: un valor vacío, un separador, un fondo de campo. */ --tw-font-primary: #171717; /* 17.9 : 1 */ --tw-font-secondary: #5c5c5c; /* 7.0 : 1 */ --tw-font-tertiary: #6b6b6b; /* 5.5 : 1 */ --tw-font-light: #737373; /* 4.8 : 1 · el mínimo para texto normal */ --tw-font-extra-light: #8f8f8f; /* 3.1 : 1 · sólo para lo que no se lee */ --tw-font-inverted: var(--tw-gray-0); /* ---------- Acentos ---------- */ --tw-accent: #1961ed; --tw-accent-hover: #144ec0; --tw-accent-secondary: rgba(25, 97, 237, 0.08); --tw-accent-tertiary: rgba(25, 97, 237, 0.04); /* ---------- Relleno de un botón de acción ---------- Aparte de los `--tw-tag-*-fg`: el verde de un chip se lee sobre el fondo pálido del chip, y el de un botón tiene que sostener texto blanco encima. En oscuro los dos van en direcciones contrarias —el chip aclara, el botón se mantiene saturado— y con un solo token uno de los dos siempre sale ilegible. */ --tw-solid-green: #1f7a45; --tw-solid-red: #b32020; --tw-font-on-solid: #ffffff; /* ---------- Tags / chips ---------- */ /* El acento, con el nombre de un tono de tag. No es un color nuevo: es el mismo `--tw-accent` de siempre, y existe para que lo que pinta tramos y leyendas por su nombre de tono —`tw-etapas-seg--accent` y el punto de `leyendaDeEtapas`— pueda nombrarlo igual que a los demás. Sin esto, el tramo «en este estimado» salía del acento y su punto de la leyenda no salía de ningún sitio. */ --tw-tag-accent-fg: var(--tw-accent); --tw-tag-green-bg: #d7f5e1; --tw-tag-green-fg: #1f7a45; --tw-tag-turquoise-bg: #d0f4ee; --tw-tag-turquoise-fg: #17786c; --tw-tag-sky-bg: #d6eefb; --tw-tag-sky-fg: #10618f; --tw-tag-blue-bg: #dbe5fe; --tw-tag-blue-fg: #1b4bc4; --tw-tag-purple-bg: #e4ddfb; --tw-tag-purple-fg: #5232a8; --tw-tag-pink-bg: #fbddf2; --tw-tag-pink-fg: #a02a7f; --tw-tag-red-bg: #fbdbdb; --tw-tag-red-fg: #b32020; --tw-tag-orange-bg: #fde6d3; --tw-tag-orange-fg: #a85410; --tw-tag-yellow-bg: #fff3d0; --tw-tag-yellow-fg: #8a6100; --tw-tag-gray-bg: var(--tw-gray-30); --tw-tag-gray-fg: var(--tw-gray-70); /* ---------- Tipografía ---------- */ --tw-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --tw-font-size-xxs: 0.625rem; /* 10px */ --tw-font-size-xs: 0.6875rem; /* 11px */ --tw-font-size-sm: 0.75rem; /* 12px */ --tw-font-size-md: 0.8125rem; /* 13px */ --tw-font-size-lg: 1rem; /* 16px */ --tw-font-size-xl: 1.25rem; /* 20px */ --tw-font-size-xxl: 1.5rem; /* 24px */ --tw-weight-regular: 400; --tw-weight-medium: 500; --tw-weight-semibold: 600; /* ---------- Espaciado y formas ---------- */ --tw-spacing: 4px; --tw-radius-xs: 2px; --tw-radius-sm: 4px; --tw-radius-md: 8px; --tw-radius-lg: 12px; --tw-radius-pill: 50px; --tw-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.08); --tw-shadow-strong: 2px 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04); /* ---------- Medidas de layout ---------- */ --tw-sidebar-width: 236px; --tw-row-height: 32px; --tw-record-panel-width: 400px; --tw-record-rail-width: 44px; /* la ficha plegada: lo que queda a la vista */ --tw-screen-gutter: 8px; /* respiro contra el borde de la pantalla */ --tw-settings-column: 960px; /* lo que se lee, acotado: ver `.tw-settings-column` */ --tw-kanban-column-width: 284px; --tw-icon-size: 16px; /* icono de fila, campo y menú */ --tw-icon-size-sm: 14px; /* icono dentro de un botón o chip */ --tw-tab-height: 38px; --tw-tab-gap: 8px; /* separación entre pestañas y padding lateral */ /* ---------- Movimiento ---------- */ --tw-transition: 0.1s ease; /* Una sola curva para todo el sistema. `ease-out` de salida rápida: el movimiento acompaña al clic en lugar de hacerse notar. Las duraciones son cortas a propósito —esto es una herramienta de trabajo, no una presentación— y todas se anulan juntas con `prefers-reduced-motion`. */ --tw-ease: cubic-bezier(0.2, 0, 0.13, 1); --tw-duration-fast: 0.12s; --tw-duration-base: 0.22s; --tw-duration-slow: 0.36s; /* Esqueletos de carga */ --tw-skeleton-base: var(--tw-gray-25); --tw-skeleton-shine: var(--tw-gray-15); } /* ===================================================================== 0. Modo oscuro --------------------------------------------------------------------- El tema se decide en `html[data-bs-theme]`, que escribe el guion de `theme.js` antes de pintar. Se usa el mismo atributo que Bootstrap para que los componentes de Tabler, DataTables y flatpickr cambien con él; lo que sigue reescribe sus valores, porque el oscuro que trae Tabler es un azul marino (#151f2c) y aquí la base es negro neutro. La escala de grises se invierte de punta a punta, así que todo lo que ya usa `--tw-gray-NN` —un botón oscuro, un tooltip— se da la vuelta solo. Lo que NO se invierte son los fondos: en claro la tarjeta es más clara que la página, y en oscuro tiene que ser más clara también, no más oscura. Por eso los `--tw-bg-*` se declaran a mano debajo. ===================================================================== */ [data-bs-theme='dark'] { color-scheme: dark; /* ---------- Escala de grises, invertida ---------- */ --tw-gray-0: #000000; --tw-gray-10: #0a0a0a; --tw-gray-15: #0f0f0f; --tw-gray-20: #141414; --tw-gray-25: #1a1a1a; --tw-gray-30: #222222; --tw-gray-35: #2b2b2b; --tw-gray-40: #363636; --tw-gray-45: #414141; --tw-gray-50: #4f4f4f; --tw-gray-55: #666666; --tw-gray-60: #818181; --tw-gray-65: #9b9b9b; --tw-gray-70: #b5b5b5; --tw-gray-75: #c4c4c4; --tw-gray-80: #d2d2d2; --tw-gray-85: #dfdfdf; --tw-gray-90: #ececec; --tw-gray-100: #ffffff; /* ---------- Fondos ---------- */ /* `secondary` es el fondo de página y del sidebar: negro. `primary` es la superficie que se levanta encima —tarjeta, menú, modal—. */ --tw-bg-primary: #121212; --tw-bg-secondary: #000000; --tw-bg-tertiary: #1c1c1c; --tw-bg-quaternary: #262626; --tw-bg-transparent-light: rgba(255, 255, 255, 0.06); --tw-bg-transparent-lighter: rgba(255, 255, 255, 0.03); --tw-bg-danger: #2a1414; --tw-bg-overlay: rgba(0, 0, 0, 0.65); /* ---------- Bordes ---------- */ --tw-border-light: #1f1f1f; --tw-border-medium: #2a2a2a; --tw-border-strong: #3a3a3a; /* ---------- Texto ---------- */ --tw-font-primary: #ededed; --tw-font-secondary: #b5b5b5; --tw-font-tertiary: #9b9b9b; --tw-font-light: #7d7d7d; --tw-font-extra-light: #5c5c5c; /* Lo que va encima del acento sigue siendo blanco: el acento no cambia. */ --tw-font-inverted: #ffffff; /* ---------- Acentos ---------- */ /* Mismo azul, un punto más claro: el #1961ed de claro se apaga sobre negro y deja los enlaces por debajo del contraste legible. */ --tw-accent: #3b7ff5; --tw-accent-hover: #5c96f7; --tw-accent-secondary: rgba(59, 127, 245, 0.16); --tw-accent-tertiary: rgba(59, 127, 245, 0.08); /* El relleno del botón se satura, no se aclara: aclararlo lo dejaba con texto blanco sobre menta. El texto encima sigue siendo blanco. */ --tw-solid-green: #2b9c53; --tw-solid-red: #ca3c3c; --tw-font-on-solid: #ffffff; /* ---------- Tags / chips ---------- */ /* Se invierte la pareja: el fondo pasa a ser el tinte apagado y el texto, el tono claro. Los `-fg` son además los colores con los que se dibujan las gráficas, así que tienen que leerse sobre negro. */ --tw-tag-green-bg: #10291b; --tw-tag-green-fg: #6bd898; --tw-tag-turquoise-bg: #0d2a27; --tw-tag-turquoise-fg: #5cd4c4; --tw-tag-sky-bg: #0d2634; --tw-tag-sky-fg: #68c0ec; --tw-tag-blue-bg: #121f3d; --tw-tag-blue-fg: #7ea6f5; --tw-tag-purple-bg: #1e1836; --tw-tag-purple-fg: #b098f5; --tw-tag-pink-bg: #2e1327; --tw-tag-pink-fg: #ee8cce; --tw-tag-red-bg: #2e1515; --tw-tag-red-fg: #ef8b8b; --tw-tag-orange-bg: #2e1e0d; --tw-tag-orange-fg: #eda45f; --tw-tag-yellow-bg: #2b2409; --tw-tag-yellow-fg: #e2c257; --tw-tag-gray-bg: var(--tw-gray-30); --tw-tag-gray-fg: var(--tw-gray-70); /* ---------- Sombras ---------- */ /* Sobre negro una sombra no se ve: lo que separa la superficie de la página es el propio salto de fondo, y la sombra solo profundiza. */ --tw-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 4px rgba(0, 0, 0, 0.6); --tw-shadow-strong: 2px 4px 16px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.5); /* Esqueletos: el brillo tiene que ir por encima de la base, no debajo. */ --tw-skeleton-base: #161616; --tw-skeleton-shine: #242424; } /* ===================================================================== 1. Mapeo sobre los tokens de Tabler / Bootstrap ===================================================================== */ :root, [data-bs-theme='light'], [data-bs-theme='dark'] { --tblr-font-sans-serif: var(--tw-font-family); --tblr-headings-font-family: var(--tw-font-family); --tblr-body-font-family: var(--tw-font-family); --tblr-font-size-base: var(--tw-font-size-md); --tblr-body-font-size: var(--tw-font-size-md); --tblr-body-font-weight: var(--tw-weight-regular); --tblr-body-line-height: 1.5; --tblr-body-color: var(--tw-font-primary); --tblr-body-color-rgb: 23, 23, 23; --tblr-emphasis-color: var(--tw-font-primary); --tblr-secondary-color: var(--tw-font-secondary); --tblr-tertiary-color: var(--tw-font-tertiary); --tblr-muted: var(--tw-font-tertiary); --tblr-body-bg: var(--tw-bg-secondary); --tblr-bg-surface: var(--tw-bg-primary); --tblr-bg-surface-secondary: var(--tw-bg-secondary); --tblr-bg-surface-tertiary: var(--tw-bg-tertiary); --tblr-bg-surface-dark: var(--tw-gray-90); --tblr-border-color: var(--tw-border-medium); --tblr-border-color-translucent: var(--tw-border-medium); --tblr-border-width: 1px; --tblr-border-radius: var(--tw-radius-sm); --tblr-border-radius-sm: var(--tw-radius-xs); --tblr-border-radius-lg: var(--tw-radius-md); --tblr-border-radius-xl: var(--tw-radius-lg); --tblr-border-radius-pill: var(--tw-radius-pill); --tblr-primary: var(--tw-accent); --tblr-primary-rgb: 25, 97, 237; --tblr-link-color: var(--tw-accent); --tblr-link-hover-color: var(--tw-accent-hover); --tblr-secondary: var(--tw-gray-65); --tblr-dark: var(--tw-gray-90); --tblr-light: var(--tw-gray-20); --tblr-box-shadow: var(--tw-shadow-strong); --tblr-box-shadow-sm: var(--tw-shadow-light); --tblr-box-shadow-lg: var(--tw-shadow-strong); --tblr-font-weight-normal: var(--tw-weight-regular); --tblr-font-weight-medium: var(--tw-weight-medium); --tblr-font-weight-bold: var(--tw-weight-semibold); } /* Lo que Tabler solo define en su bloque oscuro y el mapa de arriba no toca. Sin esto se cuela su azul marino en los fondos suaves de los badges, en el hover de las filas y en los campos de formulario. */ [data-bs-theme='dark'] { --tblr-body-color-rgb: 237, 237, 237; --tblr-body-bg-rgb: 0, 0, 0; --tblr-emphasis-color: var(--tw-gray-100); --tblr-emphasis-color-rgb: 255, 255, 255; --tblr-secondary-bg: var(--tw-bg-tertiary); --tblr-tertiary-bg: var(--tw-bg-primary); --tblr-bg-forms: var(--tw-bg-primary); --tblr-active-bg: var(--tw-bg-tertiary); --tblr-disabled-color: var(--tw-font-extra-light); --tblr-border-color-active: var(--tw-border-strong); --tblr-border-dark-color: var(--tw-border-strong); --tblr-code-color: var(--tw-font-primary); --tblr-code-bg: var(--tw-bg-tertiary); --tblr-btn-color: var(--tw-font-on-solid); /* Fondos suaves de badge (`bg-*-lt`): los del design system, no los de Tabler. Cada uno con el mismo tinte que su chip `tw-tag`. */ --tblr-primary-lt: var(--tw-tag-blue-bg); --tblr-blue-lt: var(--tw-tag-blue-bg); --tblr-azure-lt: var(--tw-tag-sky-bg); --tblr-indigo-lt: var(--tw-tag-purple-bg); --tblr-purple-lt: var(--tw-tag-purple-bg); --tblr-pink-lt: var(--tw-tag-pink-bg); --tblr-red-lt: var(--tw-tag-red-bg); --tblr-danger-lt: var(--tw-tag-red-bg); --tblr-orange-lt: var(--tw-tag-orange-bg); --tblr-warning-lt: var(--tw-tag-orange-bg); --tblr-yellow-lt: var(--tw-tag-yellow-bg); --tblr-lime-lt: var(--tw-tag-green-bg); --tblr-green-lt: var(--tw-tag-green-bg); --tblr-success-lt: var(--tw-tag-green-bg); --tblr-teal-lt: var(--tw-tag-turquoise-bg); --tblr-cyan-lt: var(--tw-tag-sky-bg); --tblr-info-lt: var(--tw-tag-sky-bg); --tblr-secondary-lt: var(--tw-tag-gray-bg); --tblr-muted-lt: var(--tw-tag-gray-bg); --tblr-light-lt: var(--tw-bg-tertiary); --tblr-dark-lt: var(--tw-bg-quaternary); --tblr-github-lt: var(--tw-bg-quaternary); } /* ===================================================================== 2. Base ===================================================================== */ body { font-family: var(--tw-font-family); font-size: var(--tw-font-size-md); color: var(--tw-font-primary); background-color: var(--tw-bg-secondary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--tw-font-family); color: var(--tw-font-primary); font-weight: var(--tw-weight-semibold); letter-spacing: -0.01em; } h1, .h1 { font-size: var(--tw-font-size-xxl); } h2, .h2 { font-size: var(--tw-font-size-xl); } h3, .h3 { font-size: var(--tw-font-size-lg); } h4, .h4 { font-size: var(--tw-font-size-md); } h5, .h5, h6, .h6 { font-size: var(--tw-font-size-sm); } /* --------------------------------------------------------------------- Escala de encabezados semántica. Usar SIEMPRE estas clases en lugar de h1..h6 sueltos, para que el mismo tipo de contenido tenga el mismo tamaño en todo el sistema. --------------------------------------------------------------------- */ /* Título de la barra superior de una pantalla (breadcrumb). */ .tw-page-title { display: flex; align-items: center; gap: 4px; font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-medium); color: var(--tw-font-primary); letter-spacing: 0; margin: 0; min-width: 0; } /* La cola tenue del breadcrumb. Cambia el color y el peso, **no el tamaño**: sigue siendo el título, y encogerla lo parte en dos alturas. Por eso vive aquí dentro y no suelta. Fuera de un título la clase de texto secundario es `.tw-meta` —tenue y a doce— y `.tw-muted` no pinta nada. */ .tw-page-title .tw-muted, .tw-page-title .tw-sep { color: var(--tw-font-light); font-weight: var(--tw-weight-regular); } /* Nombre de un registro concreto: una pieza, un cliente, una orden. Debe verse igual en todas las pantallas de detalle. */ .tw-record-title { font-size: var(--tw-font-size-xl); font-weight: var(--tw-weight-semibold); color: var(--tw-font-primary); letter-spacing: -0.01em; margin: 0; word-break: break-word; } /* Encabezado de una sección o bloque dentro de la pantalla. */ .tw-section-title { font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-semibold); color: var(--tw-font-primary); margin: 0; } /* Apostilla del encabezado: la salvedad que la sección tiene que confesar ("se enseñan 500 de 3.412"). Va apagada y en peso normal porque no es parte del título; va **dentro** del título porque callarla convertiría una tabla recortada en una tabla que parece completa. */ .tw-section-title .tw-section-note { font-size: var(--tw-font-size-sm); font-weight: var(--tw-weight-regular); color: var(--tw-font-light); margin-left: 8px; } /* Pregunta de un diálogo de confirmación ("¿Eliminar pieza?"). */ .tw-dialog-title { font-size: var(--tw-font-size-lg); font-weight: var(--tw-weight-semibold); color: var(--tw-font-primary); margin: 0 0 4px; } /* Encabezado de un grupo del menú lateral. */ .tw-nav-section-title { font-size: var(--tw-font-size-sm); font-weight: var(--tw-weight-medium); color: var(--tw-font-light); letter-spacing: 0; text-transform: none; margin: 0; } /* Etiqueta de subsección / grupo de campos. */ .tw-subsection-title { font-size: var(--tw-font-size-sm); font-weight: var(--tw-weight-medium); color: var(--tw-font-secondary); margin: 0; } /* Un encabezado nunca debe heredar el tamaño de .form-label */ h1.form-label, h2.form-label, h3.form-label, h4.form-label { font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-semibold); color: var(--tw-font-primary); } small, .small { font-size: var(--tw-font-size-sm); } .text-muted, .text-secondary { color: var(--tw-font-tertiary) !important; } a { text-decoration: none; } hr, .dropdown-divider { border-color: var(--tw-border-light); opacity: 1; } /* Scrollbars discretos, como en Twenty */ * { scrollbar-width: thin; scrollbar-color: var(--tw-gray-40) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--tw-gray-40); border-radius: var(--tw-radius-pill); border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background-color: var(--tw-gray-50); background-clip: content-box; } /* ===================================================================== 3. Sidebar ===================================================================== */ /* Sin línea divisoria: el sidebar comparte fondo con la pantalla y lo que separa es el margen de la tarjeta de contenido. */ .navbar-vertical.navbar-expand-lg { width: var(--tw-sidebar-width); padding-right: 0 !important; background-color: var(--tw-bg-secondary); border-right: 0; box-shadow: none; } /* Tabler desplaza el contenido 15rem (240px) fijos; el sidebar mide 236px, y esa diferencia dejaba una franja vacía a su derecha. */ .navbar-vertical.navbar-expand-lg ~ .page-wrapper, .navbar-vertical.navbar-expand-lg + .page-wrapper { margin-left: var(--tw-sidebar-width); } .navbar-vertical .navbar-brand { background-color: var(--tw-bg-secondary) !important; border-bottom: 0 !important; padding: 0 var(--tw-spacing) !important; } .navbar-vertical .navbar-brand h2, .navbar-vertical .navbar-brand .fs-4 { font-size: var(--tw-font-size-md) !important; font-weight: var(--tw-weight-medium); color: var(--tw-font-primary); } .navbar-vertical .navbar-nav { font-weight: var(--tw-weight-medium); gap: 1px; } /* La especificidad tiene que igualar la de Tabler, que fija su propio padding */ .navbar-vertical.navbar-expand-lg .navbar-nav .nav-link { display: flex; align-items: center; gap: 8px; font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-medium); color: var(--tw-font-secondary); border-radius: var(--tw-radius-sm); padding: 4px 8px !important; margin: 0 6px; min-height: 28px; transition: background-color 0.1s ease; } .navbar-vertical .navbar-nav .nav-link:hover { background-color: var(--tw-bg-transparent-light); color: var(--tw-font-primary); } /* Caja fija para el icono: así todos los textos arrancan en la misma columna y el icono queda centrado respecto a la línea de texto. */ .navbar-vertical .navbar-nav .nav-link .nav-link-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--tw-icon-size); width: var(--tw-icon-size); height: var(--tw-icon-size); color: var(--tw-font-tertiary); margin-right: 0; } /* El gap del enlace ya separa icono y texto: el me-2 del markup sobra */ .navbar-vertical .navbar-nav .nav-link .ti { display: block; font-size: var(--tw-icon-size) !important; line-height: 1; margin-right: 0 !important; } .navbar-vertical .navbar-nav .nav-link .nav-link-title { line-height: 20px; } /* ── El renglón de la pantalla abierta ───────────────────────────────────── * * Fondo gris sólido, sin barra lateral azul. * * El selector es `aria-current="page"`, que es lo que el servidor escribe desde * el 9 de septiembre de 2026: un mecanismo en lugar de dos, y el mismo atributo * que un lector de pantalla anuncia solo. La clase `.current` sigue aquí porque * la escriben las pestañas de ficha, que son otra cosa. */ /* `.current` la escribía un guion del armazón que se retiró el 9 de septiembre * de 2026; se queda porque las pestañas de ficha usan la misma clase y esta * regla les da su fondo. En el menú lateral ya no la pone nadie. */ .navbar-vertical .navbar-nav .nav-link.current::before { background: var(--tw-bg-quaternary) !important; inset: 0 !important; border-radius: var(--tw-radius-sm) !important; } /* El fondo va en el propio enlace y no en un `::before`, que es como estaba escrito el de `.current`: ese pseudo-elemento se pinta sólo si algo le da `content`, y en la barra lateral no lo tiene, así que la regla de al lado lleva tiempo sin dibujar nada. Aquí no hace falta ninguno —el enlace ya es una caja con su propio radio— y así el resalte no depende de una herencia de Tabler que puede irse en la próxima actualización. */ .navbar-vertical.navbar-expand-lg .navbar-nav .nav-link[aria-current='page'] { background-color: var(--tw-bg-quaternary); color: var(--tw-font-primary); } .navbar-vertical .navbar-nav .nav-link.current { color: var(--tw-font-primary); } /* Y su icono, que es lo único que queda del renglón cuando el menú se pliega: sin esto, en el riel el resalte era un cuadro gris con el icono del mismo gris apagado que los demás. */ .navbar-vertical .navbar-nav .nav-link[aria-current='page'] .nav-link-icon { color: var(--tw-font-primary); } .navbar-expand-lg .nav-item.active:after, .navbar-vertical .nav-item.active:after { display: none !important; } /* Encabezados de grupo del menú ("Operación", "Administración") */ .navbar-vertical .navbar-nav .nav-link .text-uppercase { font-size: var(--tw-font-size-xs); font-weight: var(--tw-weight-medium); letter-spacing: 0.02em; color: var(--tw-font-light) !important; } /* No son navegables: no deben reaccionar al puntero como un enlace */ .navbar-vertical .navbar-nav div.nav-link { margin-top: 12px; cursor: default; } .navbar-vertical .navbar-nav div.nav-link:hover { background-color: transparent; } .navbar-vertical .navbar-nav .nav-link.disabled { color: var(--tw-font-extra-light); opacity: 1; cursor: not-allowed; } /* Un módulo apagado sin más se lee como "no tengo permiso". Estos no existen todavía, así que se dicen con el mismo distintivo que las pestañas. */ .navbar-vertical .navbar-nav .nav-link.disabled .nav-link-title::after { content: 'Pronto'; display: inline-block; margin-left: 6px; font-size: var(--tw-font-size-xxs); font-weight: var(--tw-weight-medium); line-height: 1; letter-spacing: 0.02em; padding: 3px 5px; border-radius: var(--tw-radius-xs); background-color: var(--tw-tag-gray-bg); color: var(--tw-tag-gray-fg); vertical-align: middle; } /* ===================================================================== 4. Superficie de página ===================================================================== */ /* El shell mide exactamente una pantalla: nunca hay scroll de ventana. Lo que scrollea es el contenedor interno de cada vista. El contenido de la vista se estira con flex — un `height: 100%` no resolvería aquí, porque .page-wrapper es a su vez un flex item de .page. El `overflow: auto` queda como red de seguridad para las vistas que todavía no acotan su propio alto. */ .page { height: 100dvh; max-height: 100dvh; overflow: hidden; } .page-wrapper { display: flex; flex-direction: column; height: 100dvh; max-height: 100dvh; /* Un flex item nace con min-height:auto y el contenido lo estira: sin esto el wrapper crece más allá de la pantalla y reaparece el scroll. */ min-height: 0; overflow: auto; background-color: var(--tw-bg-secondary); } /* El contenido de la vista ocupa la pantalla completa. Modales y offcanvas son position:fixed, así que no participan de este reparto. */ .page-wrapper > * { flex: 1 1 auto; min-height: 0; } /* Sin esto los hijos flex se niegan a encogerse y desbordan su contenedor */ .page-wrapper .flex-fill, .page-wrapper .flex-grow-1 { min-height: 0; } .page-header, .page-body { background-color: transparent; } .container-xl, .container-fluid { max-width: none; } /* Respiro entre el contenido y el borde de la pantalla. Si cambia, hay que actualizar BOTTOM_GAP en adjustScrollY() (public/scripts/global.js). */ .page-wrapper .container-xl.p-3, .page-wrapper .container-fluid.p-3 { padding-bottom: var(--tw-screen-gutter) !important; } /* En papel no hay pantalla que acotar. El shell mide 100dvh y recorta con `overflow`, que es justo lo que se quiere en la pantalla y lo contrario de lo que hace falta en la impresora: **toda hoja imprimible salía de una sola página**, con lo que no cabía en el primer viewport perdido sin aviso. Se vio el 17 de septiembre de 2026 en la hoja de revisión de recorridos —«1 página», cortada a la mitad de la lista— y le pasaba igual al packing list y al gafete, que se sirven con el mismo armazón. Se desmonta el reparto entero: alto automático, sin recorte y en bloque, para que el contenido fluya de una página a la siguiente en vez de repartirse como items de un flex que sólo sabe de una pantalla. Es el mismo arreglo que ya llevaba el armazón de kiosco en `station.css`. */ @media print { html, body { height: auto !important; max-height: none !important; overflow: visible !important; } .page, .page-wrapper { display: block !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } .page-wrapper > * { flex: none !important; min-height: 0 !important; } } /* ===================================================================== 5. Cards ===================================================================== */ .card { background-color: var(--tw-bg-primary); border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-md); box-shadow: none; } .card-header { background-color: transparent; border-bottom: 1px solid var(--tw-border-light); min-height: 40px; padding: 0 12px; } .card-title { font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-semibold); margin-bottom: 0; } .card-footer { background-color: transparent; border-top: 1px solid var(--tw-border-light); } /* ===================================================================== 6. Tablas ===================================================================== */ .table { --tblr-table-bg: var(--tw-bg-primary); --tblr-table-border-color: var(--tw-border-light); --tblr-table-hover-bg: var(--tw-bg-transparent-lighter); --tblr-table-striped-bg: var(--tw-bg-secondary); font-size: var(--tw-font-size-md); color: var(--tw-font-primary); margin-bottom: 0; } .table > thead > tr > th, .table thead th, #products-table > thead > tr > th { background-color: var(--tw-bg-primary) !important; color: var(--tw-font-tertiary) !important; font-size: var(--tw-font-size-sm) !important; font-weight: var(--tw-weight-medium) !important; text-transform: none; letter-spacing: 0; height: var(--tw-row-height); padding: 0 8px !important; border-bottom: 1px solid var(--tw-border-light); white-space: nowrap; vertical-align: middle; } .table > thead > tr > th .ti, .table thead th .ti { font-size: 0.875rem !important; color: var(--tw-font-light); } .table > tbody > tr > td, .table td { height: var(--tw-row-height); padding: 0 8px !important; font-size: var(--tw-font-size-md); color: var(--tw-font-primary); border-bottom: 1px solid var(--tw-border-light); vertical-align: middle; } /* La celda que sí parte en dos renglones. `td { white-space: nowrap }` —de global.css— está para que un texto largo no ensanche la tabla, y en una tabla de ancho automático no lo consigue: la columna crece hasta el contenido más largo, así que el recorte con puntos suspensivos que lo acompaña no llega a hacerse nunca. Donde la celda lleva una lista —los números de parte de un nesteo, doce en el renglón más largo— el resultado era una columna de trescientos y pico píxeles que empujaba las otras nueve fuera del panel. Lo que hace falta ahí no es cortar, es **partir**: el ancho del `th` vuelve a mandar y lo que no cabe pasa al renglón de abajo, que se lee entero. Los puntos suspensivos se descartaron por lo mismo que en la ficha —ver `.tw-field-label`—: medio número de parte no se puede leer. */ .table td.tw-cell-wrap { white-space: normal; overflow: visible; text-overflow: clip; } /* Cuentas de una celda como texto de color, no como insignias: «10 sin certificado · 1 sin país». Una píldora por cuenta partía la fila en dos renglones y la tabla se leía como un montón de etiquetas; así cabe en uno y la píldora de la fila queda para el estado. El punto lo pone el CSS, para que quien arma la celda no tenga que acordarse del separador. */ .tw-flags { display: inline; } .tw-flag { font-weight: var(--tw-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; } .tw-flag + .tw-flag::before { content: '·'; margin: 0 6px; font-weight: var(--tw-weight-regular); color: var(--tw-font-light); } /* Y cuando la primera marca del grupo es la cifra principal —«58 de 310 pza» en la celda de avance del listado—, el punto también va detrás de ella. Sin esto salía «58 de 310 pza3 de 6 cajas», todo pegado. Sólo dentro de `.tw-flags`: `.tw-num` se usa en media aplicación y ahí no separa nada. */ .tw-flags .tw-num + .tw-flag::before { content: '·'; margin: 0 6px; font-weight: var(--tw-weight-regular); color: var(--tw-font-light); } /* Y cuando una de las marcas la trae un componente que ya se envuelve solo —`banderaDePrioridad` devuelve su propio `.tw-flags`—, los dos grupos se leen como uno: el punto también va entre ellos. Sin esto, «Propuesta de Empaque Prioridad alta» salía pegado y parecía una sola frase. */ .tw-flag + .tw-flags::before, .tw-flags + .tw-flag::before { content: '·'; margin: 0 6px; font-weight: var(--tw-weight-regular); color: var(--tw-font-light); } .tw-flag .ti { margin-right: 3px; font-size: 0.95em; vertical-align: -1px; } .tw-flag--red { color: var(--tw-tag-red-fg); } .tw-flag--orange { color: var(--tw-tag-orange-fg); } .tw-flag--yellow { color: var(--tw-tag-yellow-fg); } .tw-flag--green { color: var(--tw-tag-green-fg); } .tw-flag--quieto { font-weight: var(--tw-weight-regular); color: var(--tw-font-tertiary); } /* La prisa, pegada a la identidad de la fila · en el mismo renglón. * * Iba en una línea propia debajo del folio, y eso costaba una línea: en el * listado de órdenes la fila con bandera medía 40 px y la de al lado 32. En una * tabla de seiscientas, lo primero que se ve de las urgentes no es que corran * prisa: es que son más altas que las demás, y el ojo lee eso como un desorden * de la tabla antes que como un dato. * * Así que va detrás del nombre, en el mismo renglón y un punto más pequeña, que * es exactamente lo que ya hacía la torre con `.plano-orden-prisa`. La fila no * cambia de alto y todas las de la tabla miden lo mismo. * * `inline-block` para que el margen de la izquierda no se coma el espacio en * blanco anterior, y `nowrap` para que «Prioridad alta» no se parta en dos. */ .tw-prisa { display: inline-block; margin-left: 6px; font-size: 11px; white-space: nowrap; } /* Y la prisa dicha con un icono · para una lista apretada de números de parte. * * El contenido de una caja son seis pastillas en dos renglones, y dentro de * cada una el rótulo «Prioridad alta» le gana al número de parte, que es lo que * se está leyendo. Así que ahí la prisa es una llama del color del tono, con el * rótulo en el `title`, delante del número y no detrás: el ojo barre la columna * por la izquierda y lo que tiene que encontrar es cuál de los seis. * * `vertical-align` y no `baseline`: el glifo de Tabler cuelga un punto por * debajo de la caja de la letra y sin esto el número de parte queda alto. */ .tw-prisa-marca { margin-right: 2px; font-size: 14px; vertical-align: -1px; } .tw-prisa-marca--red { color: var(--tw-tag-red-fg); } .tw-prisa-marca--orange { color: var(--tw-tag-orange-fg); } /* Y la celda de la matriz de reparto que cruza con una partida urgente. * * Es el único sitio de esa pantalla donde la prisa tiene dónde apoyarse: la * columna es una orden entera y el renglón un número de parte, pero su cruce es * una partida. El tinte va en toda la celda —nunca en una barra al costado— y * es el del fondo de la pastilla roja, que junto a un campo de captura no puede * competir con el propio número que se teclea. */ .lk-celda-prisa { background-color: var(--tw-tag-red-bg); } .table.table-bordered > tbody > tr > td, .table.table-bordered > thead > tr > th { border-right: 1px solid var(--tw-border-light); border-left: 0; } .table.table-bordered > tbody > tr > td:last-child, .table.table-bordered > thead > tr > th:last-child { border-right: 0; } .table-hover > tbody > tr:hover > * { background-color: var(--tw-bg-transparent-lighter); --tblr-table-accent-bg: transparent; color: var(--tw-font-primary); } .table thead .sorting:after, .table thead .sorting_asc:after, .table thead .sorting_desc:after { color: var(--tw-font-extra-light); } /* --------------------------------------------------------------------- DataTables. El alto del cuerpo scrolleable lo calcula adjustScrollY() en global.js midiendo el espacio real hasta el borde de la pantalla: el `scrollY` de la config es sólo el valor inicial. --------------------------------------------------------------------- */ .dataTables_wrapper, .dt-container { font-size: var(--tw-font-size-md); } .dataTables_scrollHead, .dt-scroll-head { background-color: var(--tw-bg-primary); } /* Pie de tabla: una sola barra inferior, como el footer de conteo de Twenty */ .dataTables_info, .dataTables_length, .dataTables_filter { font-size: var(--tw-font-size-sm); color: var(--tw-font-tertiary); } /* Pie de conteo, como la barra inferior de Twenty ("Count all 217") */ .dataTables_info { display: flex; align-items: center; gap: 16px; min-height: 32px; padding: 0 8px; border-top: 1px solid var(--tw-border-light); background-color: var(--tw-bg-primary); color: var(--tw-font-tertiary); font-size: var(--tw-font-size-sm); } .dataTables_info .tw-count { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: var(--tw-radius-sm); color: var(--tw-font-tertiary); } .dataTables_info .tw-count strong { color: var(--tw-font-primary); font-weight: var(--tw-weight-medium); } .dataTables_info .tw-count-label { color: var(--tw-font-light); } .bottom-table { min-height: 36px; padding: 0 12px !important; margin-top: 0 !important; border-top: 1px solid var(--tw-border-light); align-items: center; } .bottom-table .dataTables_paginate { padding-top: 0 !important; } .dataTables_paginate .page-link { font-size: var(--tw-font-size-sm); color: var(--tw-font-secondary); border: 0; border-radius: var(--tw-radius-sm) !important; min-width: 26px; padding: 3px 8px; } .dataTables_paginate .page-link:hover { background-color: var(--tw-bg-transparent-light); color: var(--tw-font-primary); } .page-link.active, .active > .page-link { background-color: var(--tw-bg-quaternary) !important; border-color: transparent !important; color: var(--tw-font-primary) !important; border-radius: var(--tw-radius-sm) !important; } /* ===================================================================== 7. Botones ===================================================================== Un botón se elige por lo que hace, no por cómo se ve: .btn acción neutra: Cancelar, Cerrar, Ver, Editar, Imprimir, Filtrar, Volver, Anterior .btn.btn-primary la que cierra la pantalla o el modal: Guardar, Crear, Confirmar. Una sola por contexto .btn.btn-ghost acción de fondo, casi siempre sólo icono, dentro de una fila o una tarjeta .btn.btn-outline-danger abre algo destructivo o peligroso: Eliminar, Dar de baja, Cerrar sesiones, Revocar .btn.btn-danger lo ejecuta, ya dentro de la confirmación .btn.btn-outline-warning degrada algo pero se puede deshacer: Cuarentena El verde no es un color de botón: significa «salió bien» y vive en los chips de estado. `.btn-success` se pinta igual que la primaria para que cualquier resto —o cualquier pantalla nueva escrita de memoria— no vuelva a abrir la brecha entre Guardar verde y Guardar negro. Lo mismo con las variantes de Tabler que no tienen sentido aquí (`btn-secondary`, `btn-light`, `btn-outline-primary`, `btn-outline-secondary`, `btn-link`): todas caen en la neutra en vez de sacar el azul crudo del framework, que en oscuro se sale del tema. Las estaciones no usan esta escala: tienen `.st-btn` en station.css, con la primaria en azul porque a un metro de distancia el negro no se separa del fondo de la terminal. */ /* ── UN BOTÓN MIDE 28 PÍXELES ──────────────────────────────────────────── * * Todos. El de texto, el de icono, el primario, el de una barra y el de un * modal. Hasta el 20 de septiembre de 2026 medían tres cosas distintas y las * tres estaban a un píxel de las otras, que es la peor distancia: no se ve de * frente y se ve en cuanto hay dos juntos en la misma barra. * * .btn 28.57 px (719 botones en las pantallas) * .btn.btn-sm 29.50 px (148) * .btn.btn-icon 28.00 px (57) * * SON DOS AVERÍAS, Y NINGUNA SE VE LEYENDO LA REGLA: * * · **`min-height` cuenta el borde.** Con `box-sizing: border-box` —que es * lo que pone Tabler— los 28 de aquí abajo son la caja entera, borde * incluido. Pero el contenido ya sumaba 18.57 de renglón + 8 de relleno + * 2 de borde = 28.57, así que el `min-height` no llegaba nunca a aplicarse * y el número escrito no era el número dibujado. El de icono sí lo * alcanzaba —no tiene relleno— y por eso ése, y sólo ése, medía 28. * * · **`btn-sm` se colaba por el renglón.** El relleno y el cuerpo de letra * de `.btn-sm` ya los pisa esta regla, así que la clase parecía inerte; * pero Tabler le pone además `--tblr-btn-line-height: 1.5` en otro bloque * que esta hoja no tocaba. Un píxel más de renglón, un píxel más de botón. * De ahí que «Distribuir en cajas» y «Nueva caja» —las dos con `btn-sm`— * no cuadraran con el «Acciones» de la barra de arriba, que no la lleva. * * Se arregla fijando el renglón en píxeles: 18 + 8 + 2 = 28 exactos, y el * `min-height` pasa a ser lo que dice que es. Al ser una declaración de esta * hoja —que carga después de Tabler— gana también a `btn-sm` y a `btn-lg`, así * que las dos dejan de mover la caja: un `btn-sm` de más o de menos en una * plantilla ya no descuadra la barra donde cae. * * La medida del dedo va aparte, al final de la hoja: ahí el botón crece a 44 y * el de una barra a 38, y también por dónde está y no por la clase que lleve. */ .btn { --tblr-btn-font-size: var(--tw-font-size-md); --tblr-btn-font-weight: var(--tw-weight-medium); --tblr-btn-padding-y: 4px; --tblr-btn-padding-x: 8px; --tblr-btn-border-radius: var(--tw-radius-sm); --tblr-btn-line-height: 18px; min-height: 28px; box-shadow: none; border-color: var(--tw-border-strong); color: var(--tw-font-primary); background-color: var(--tw-bg-primary); transition: background-color 0.1s ease, border-color 0.1s ease; } .btn:hover { background-color: var(--tw-bg-tertiary); border-color: var(--tw-border-strong); color: var(--tw-font-primary); } .btn:focus, .btn:focus-visible { box-shadow: none; outline: none; } .btn-primary { background-color: var(--tw-gray-90); border-color: var(--tw-gray-90); color: var(--tw-gray-0); } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: var(--tw-gray-80) !important; border-color: var(--tw-gray-80) !important; color: var(--tw-gray-0) !important; } /** * El botón de una opción de `elegir`: icono, rótulo y una línea de detalle. * * LO QUE SE VEÍA ANTES, y era feo con motivo: el detalle iba en un `form-hint` * con `d-block`, pero un `.btn` es `inline-flex` centrado, así que `d-block` no * bajaba de renglón —lo convertía en otro elemento de la misma fila— y el * resultado era «Seguir imprimiendo Te quedan 8 por sacar» todo seguido, con el * icono empujado fuera y el detalle en el gris de un formulario, que sobre el * azul de la primaria no se lee. * * Se arregla con estructura y no con más clases de utilidad: el botón pasa a * tener un icono a la izquierda y un bloque de texto en columna. El detalle * hereda el color del rótulo y baja la opacidad, que es lo que lo hace legible * lo mismo sobre azul que sobre el fondo neutro. * * El segundo selector es para el kiosco: allí `.modal .btn` centra su contenido * y esto tiene que alinearse a la izquierda, porque son dos frases de largos * distintos y centradas no se leen en columna. */ .tw-choice, .modal .btn.tw-choice { display: flex; align-items: center; justify-content: flex-start; gap: 12px; text-align: left; padding: 12px 16px; height: auto; } .tw-choice-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .tw-choice-hint { font-size: var(--tw-font-size-sm); font-weight: var(--tw-weight-regular); /* Del color del rótulo, no del gris de los formularios: sobre la primaria aquél desaparece. */ color: currentColor; opacity: 0.72; white-space: normal; } /* La lista de resultados del diálogo con buscador. Se acota por alto y scrollea sola en vez de dejar crecer el modal: el campo de búsqueda tiene que quedarse a la vista mientras se lee el resultado, que es lo que permite corregir una letra sin volver a empezar. El tope va en `vh` para la tablet —en horizontal y con el teclado abierto queda poca pantalla— y en `rem` para el escritorio, y manda el más bajo. */ .tw-choice-list { display: flex; flex-direction: column; gap: 8px; max-height: min(38vh, 22rem); overflow-y: auto; /* El foco del botón se dibuja fuera del borde: sin este aire se recorta contra el borde del contenedor que scrollea. */ padding: 2px; margin-inline: -2px; } /* Que la lista se desplace en vez de aplastar los renglones: en una columna flexible con alto máximo los hijos encogen por omisión, y con siete opciones de dos líneas el texto se salía del recuadro (5-oct-2026, «¿De qué insumo es?»). */ .tw-choice-list > * { flex-shrink: 0; } /* Buscando, sin resultados, o la búsqueda falló. Es el `tw-empty-state` de siempre con la altura de un modal: sus 64px de aire mueven el diálogo entero cada vez que se teclea una letra. */ .tw-choice-state { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px 16px; color: var(--tw-font-light); text-align: center; } .tw-choice-state .ti { color: var(--tw-font-extra-light); } /* ── La opción que se lee entera · un radio con su explicación ───────────── Los diálogos de «Por decidir» pintaban sus salidas con `.tw-item-row`, que es el renglón de 32 px de una columna lateral: `nowrap` y puntos suspensivos. La explicación no se recortaba —el bloque de texto no tenía `min-width: 0`— sino que se salía del diálogo por la derecha, y la mitad de la frase quedaba pintada encima del fondo de la página. Aquí el radio se alinea con la primera línea, el texto envuelve, y la elegida lleva el borde entero y el fondo del acento: nada de barra a un lado. */ .tw-radio-list { display: flex; flex-direction: column; gap: 6px; } /* En columnas cuando las opciones son cortas y hay sitio: dos respuestas a la misma pregunta se comparan mejor lado a lado. Bajan a una sola por debajo de dos columnas de 15rem, sin punto de corte que mantener. */ .tw-radio-list--cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .tw-radio-option { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 8px 12px; border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-sm); cursor: pointer; transition: background-color var(--tw-transition), border-color var(--tw-transition); } .tw-radio-option:hover { background-color: var(--tw-bg-transparent-light); } .tw-radio-option:has(> input:checked) { border-color: var(--tw-accent); background-color: var(--tw-accent-secondary); } .tw-radio-option > .form-check-input { flex: 0 0 auto; float: none; margin: 2px 0 0; } .tw-radio-option-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .tw-radio-option-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-medium); color: var(--tw-font-primary); overflow-wrap: anywhere; } .tw-radio-option-hint { font-size: var(--tw-font-size-sm); color: var(--tw-font-light); overflow-wrap: anywhere; } /* * La opción que se configura adentro · una tarjeta con su ajuste. * * Nació en el alta de procesos (28 sep 2026): once casillas sueltas con sus * ajustes al fondo del diálogo —lecturas por pieza, datos del baño, ciclo * mínimo— se marcaban a ciegas. Aquí el ajuste vive dentro de la opción que lo * enciende y sólo aparece con ella. El título es un `label for` y no envuelve * lo anidado: un clic en un campo de adentro no apaga la opción. */ .tw-radio-option:has(> input:disabled) { opacity: 0.55; } .tw-radio-option:has(> input:disabled) .tw-radio-option-title { cursor: not-allowed; } .tw-radio-option > .tw-radio-option-text > label.tw-radio-option-title { cursor: pointer; margin: 0; } .tw-option-nested { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--tw-border-light); } .tw-option-nested .tw-radio-option { background-color: var(--tw-bg-primary); } /* El paso a paso fijo al lado del formulario: se ve la consecuencia sin bajar. */ .tw-config-preview { position: sticky; top: 0; } .tw-config-section + .tw-config-section { margin-top: 20px; } .tw-config-question { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-medium); color: var(--tw-font-primary); } .tw-config-question .tw-step-num { flex: 0 0 auto; } /* El pie de la ficha: lo que se decide va separado de lo que se lee. */ .tw-modal-part { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--tw-border-light); } .tw-modal-part + .tw-modal-part { margin-top: 16px; } /* Toda la familia «no pasa nada si le picas» aterriza en la neutra. */ .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-link { background-color: var(--tw-bg-primary); border-color: var(--tw-border-strong); color: var(--tw-font-primary); } .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-link:hover { background-color: var(--tw-bg-tertiary); border-color: var(--tw-border-strong); color: var(--tw-font-primary); } /* Verde retirado de los botones: lo que quede se lee como primaria. */ .btn-success { background-color: var(--tw-gray-90); border-color: var(--tw-gray-90); color: var(--tw-gray-0); } .btn-success:hover, .btn-success:active, .btn-success:focus { background-color: var(--tw-gray-80) !important; border-color: var(--tw-gray-80) !important; color: var(--tw-gray-0) !important; } /* Relleno rojo: sólo el botón que consuma el borrado dentro de la confirmación. Fuera de un modal siempre va la versión de contorno. */ .btn-danger { background-color: var(--tw-solid-red); border-color: var(--tw-solid-red); color: var(--tw-font-on-solid); } .btn-danger:hover, .btn-danger:active, .btn-danger:focus { background-color: var(--tw-tag-red-fg); border-color: var(--tw-tag-red-fg); color: var(--tw-font-on-solid); } /* Peligroso pero todavía no ejecutado: el color va en el texto, no en el relleno, para que no compita con la primaria de la misma pantalla. El `-fg` del chip es el que está calibrado para leerse en los dos temas; `--tw-solid-red` se apaga demasiado sobre negro. */ .btn-outline-danger, .btn-warning, .btn-outline-warning { background-color: var(--tw-bg-primary); border-color: var(--tw-border-strong); } .btn-outline-danger { color: var(--tw-tag-red-fg); } .btn-warning, .btn-outline-warning { color: var(--tw-tag-orange-fg); } .btn-outline-danger:hover { background-color: var(--tw-tag-red-bg); border-color: var(--tw-tag-red-bg); color: var(--tw-tag-red-fg); } .btn-warning:hover, .btn-outline-warning:hover { background-color: var(--tw-tag-orange-bg); border-color: var(--tw-tag-orange-bg); color: var(--tw-tag-orange-fg); } .btn-ghost, .btn-transparent { background-color: transparent; border-color: transparent; color: var(--tw-font-secondary); } .btn-ghost:hover, .btn-transparent:hover { background-color: var(--tw-bg-transparent-light); border-color: transparent; color: var(--tw-font-primary); } .btn-icon { min-width: 28px; padding: 0; } /* --- Apagado y trabajando --------------------------------------------- Tabler no repinta el botón deshabilitado: lo arma con las variables `--tblr-btn-disabled-*`, y su regla `.btn:disabled` (0,2,0) gana a las variantes de arriba (0,1,0). El efecto era que la escala entera se caía justo al deshabilitar: «Guardar» negro salía azul y `.btn-success` volvía a salir verde —los dos colores que esta sección retiró—. Se corrige en el origen, dando valor a esas variables, y no repitiendo las reglas con `!important`, que sólo movería el problema al siguiente estado. Apagado y trabajando no son el mismo estado. El apagado baja la opacidad porque todavía no se puede pulsar. El que trabaja acaba de recibir el clic: conserva su color y su opacidad —es la única prueba de que el clic llegó— y sólo apaga el rótulo para girar el indicador encima. La parte animada de `is-busy` vive con las demás transiciones, más abajo. */ .btn { --tblr-btn-disabled-bg: var(--tw-bg-primary); --tblr-btn-disabled-color: var(--tw-font-primary); --tblr-btn-disabled-border-color: var(--tw-border-strong); --tblr-btn-disabled-opacity: 0.45; /* Color del aro que gira; cada variante lo ajusta a su propio fondo. */ --tw-btn-spinner: var(--tw-font-secondary); } .btn-primary, .btn-success { --tblr-btn-disabled-bg: var(--tw-gray-90); --tblr-btn-disabled-color: var(--tw-gray-0); --tblr-btn-disabled-border-color: var(--tw-gray-90); --tw-btn-spinner: var(--tw-gray-0); } .btn-danger { --tblr-btn-disabled-bg: var(--tw-solid-red); --tblr-btn-disabled-color: var(--tw-font-on-solid); --tblr-btn-disabled-border-color: var(--tw-solid-red); --tw-btn-spinner: var(--tw-font-on-solid); } .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-link, .btn-outline-danger, .btn-warning, .btn-outline-warning { --tblr-btn-disabled-bg: var(--tw-bg-primary); --tblr-btn-disabled-color: var(--tw-font-primary); --tblr-btn-disabled-border-color: var(--tw-border-strong); } .btn-outline-danger { --tblr-btn-disabled-color: var(--tw-tag-red-fg); --tw-btn-spinner: var(--tw-tag-red-fg); } .btn-warning, .btn-outline-warning { --tblr-btn-disabled-color: var(--tw-tag-orange-fg); --tw-btn-spinner: var(--tw-tag-orange-fg); } .btn-ghost, .btn-transparent { --tblr-btn-disabled-bg: transparent; --tblr-btn-disabled-color: var(--tw-font-secondary); --tblr-btn-disabled-border-color: transparent; } /* En Twenty el icono de un botón es menor que el de una fila de tabla: con 16px junto a texto de 13px el botón se ve pesado. */ .btn .ti { font-size: 0.875rem !important; } .bg-primary-lt { background-color: var(--tw-accent-secondary) !important; color: var(--tw-accent) !important; border-color: transparent !important; } .bg-danger-lt { background-color: var(--tw-tag-red-bg) !important; color: var(--tw-tag-red-fg) !important; border-color: transparent !important; } .bg-success-lt { background-color: var(--tw-tag-green-bg) !important; color: var(--tw-tag-green-fg) !important; border-color: transparent !important; } .bg-blue-lt { background-color: var(--tw-tag-blue-bg) !important; color: var(--tw-tag-blue-fg) !important; } /* Un `btn-ghost text-danger` es la versión de icono de la destructiva: el botón no lleva relleno y el color entra por la utilidad de texto. Tabler la resuelve con `--tblr-danger`, que nunca se mapeó y sale en su rojo crudo —ilegible sobre el negro del tema oscuro—, así que las tres se enganchan al `-fg` del chip equivalente, que sí está calibrado. */ .text-danger { color: var(--tw-tag-red-fg) !important; } .text-success { color: var(--tw-tag-green-fg) !important; } .text-warning { color: var(--tw-tag-orange-fg) !important; } /* ===================================================================== 8. Badges / tags ===================================================================== */ /* Los `bg-*-lt` de Tabler se arman con tripletas `--tblr-*-lt-rgb`, no con el token plano, así que en oscuro hay que reescribir la regla entera: fondo y texto salen del mismo par que usa el chip `tw-tag` equivalente. */ [data-bs-theme='dark'] .bg-primary-lt, [data-bs-theme='dark'] .bg-blue-lt { background-color: var(--tw-tag-blue-bg) !important; color: var(--tw-tag-blue-fg) !important; } [data-bs-theme='dark'] .bg-azure-lt, [data-bs-theme='dark'] .bg-cyan-lt, [data-bs-theme='dark'] .bg-info-lt { background-color: var(--tw-tag-sky-bg) !important; color: var(--tw-tag-sky-fg) !important; } [data-bs-theme='dark'] .bg-indigo-lt, [data-bs-theme='dark'] .bg-purple-lt { background-color: var(--tw-tag-purple-bg) !important; color: var(--tw-tag-purple-fg) !important; } [data-bs-theme='dark'] .bg-pink-lt { background-color: var(--tw-tag-pink-bg) !important; color: var(--tw-tag-pink-fg) !important; } [data-bs-theme='dark'] .bg-red-lt, [data-bs-theme='dark'] .bg-danger-lt { background-color: var(--tw-tag-red-bg) !important; color: var(--tw-tag-red-fg) !important; } [data-bs-theme='dark'] .bg-orange-lt, [data-bs-theme='dark'] .bg-warning-lt { background-color: var(--tw-tag-orange-bg) !important; color: var(--tw-tag-orange-fg) !important; } [data-bs-theme='dark'] .bg-yellow-lt { background-color: var(--tw-tag-yellow-bg) !important; color: var(--tw-tag-yellow-fg) !important; } [data-bs-theme='dark'] .bg-green-lt, [data-bs-theme='dark'] .bg-lime-lt, [data-bs-theme='dark'] .bg-success-lt { background-color: var(--tw-tag-green-bg) !important; color: var(--tw-tag-green-fg) !important; } [data-bs-theme='dark'] .bg-teal-lt { background-color: var(--tw-tag-turquoise-bg) !important; color: var(--tw-tag-turquoise-fg) !important; } [data-bs-theme='dark'] .bg-secondary-lt, [data-bs-theme='dark'] .bg-muted-lt, [data-bs-theme='dark'] .bg-light-lt, [data-bs-theme='dark'] .bg-dark-lt, [data-bs-theme='dark'] .bg-github-lt { background-color: var(--tw-tag-gray-bg) !important; color: var(--tw-tag-gray-fg) !important; } /* `text-dark` sobre uno de esos fondos escribiría negro sobre negro. */ [data-bs-theme='dark'] .text-dark { color: var(--tw-font-primary) !important; } .badge { font-size: var(--tw-font-size-sm); font-weight: var(--tw-weight-medium); padding: 2px 8px; border-radius: var(--tw-radius-pill); line-height: 18px; } .badge.bg-success { background-color: var(--tw-tag-green-bg) !important; color: var(--tw-tag-green-fg) !important; } .badge.bg-danger { background-color: var(--tw-tag-red-bg) !important; color: var(--tw-tag-red-fg) !important; } .badge.bg-warning { background-color: var(--tw-tag-yellow-bg) !important; color: var(--tw-tag-yellow-fg) !important; } .badge.bg-primary { background-color: var(--tw-tag-blue-bg) !important; color: var(--tw-tag-blue-fg) !important; } .badge.bg-info { background-color: var(--tw-tag-sky-bg) !important; color: var(--tw-tag-sky-fg) !important; } .badge.bg-secondary, .badge.bg-light, .badge.bg-dark { background-color: var(--tw-tag-gray-bg) !important; color: var(--tw-tag-gray-fg) !important; } /* Chip de campo tipo Twenty (dominio, etiqueta, relación) */ .tw-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 6px; font-size: var(--tw-font-size-md); line-height: 18px; color: var(--tw-font-primary); background-color: var(--tw-bg-transparent-light); border-radius: var(--tw-radius-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* ── Y también cuando el chip es un `button` ────────────────────────── El chip nació para enlaces y rótulos —hoy son veintiséis `a` y quince `span`— así que nada de esto hacía falta. Al usarlo por primera vez en un `button` —«Ver desglose», que abre los códigos de una tanda de impresión— salió con el **borde y la tipografía del navegador**: una caja con recuadro en mitad de una bitácora donde todo lo demás es plano. El arreglo va aquí y no en aquel botón: si un chip se ve distinto según la etiqueta que lo lleve, deja de ser un componente. Y la etiqueta correcta ahí es `button` —abre un diálogo, no lleva a ninguna dirección—, así que ponerle un `a` con `href="#"` para que se viera bien sería mentir en el HTML para arreglar el CSS. Es un no-op para los `a` y los `span`, que no traen borde ni fuente propia. */ appearance: none; border: 0; font-family: inherit; font-weight: inherit; } .tw-chip .ti { font-size: 0.875rem !important; color: var(--tw-font-tertiary); } button.tw-chip { cursor: pointer; } /* El hover cubría sólo `a.tw-chip`, así que un chip pulsable escrito como `button` no respondía al pasar por encima: se veía apagado justo donde hay que pulsar. */ a.tw-chip:hover, button.tw-chip:hover { background-color: var(--tw-bg-quaternary); color: var(--tw-font-primary); } /* ===================================================================== 9. Formularios ===================================================================== */ .form-control, .form-select, .ts-control { font-size: var(--tw-font-size-md) !important; min-height: 28px; padding: 3px 8px !important; border-color: var(--tw-border-strong); border-radius: var(--tw-radius-sm); color: var(--tw-font-primary); box-shadow: none; } .form-control::placeholder, .ts-control input::placeholder { color: var(--tw-font-light); } /* El campo con lupa. El `padding: 3px 8px !important` de arriba le gana al relleno que Tabler reserva para el icono (`.input-icon .form-control`), y el texto corría por debajo de la lupa — se veía en «Buscar permiso». Se repone con el mismo peso, y a 2rem en vez de las 2.5 de Tabler porque el icono es `ti-sm` y los campos de este tema son compactos: la lupa cabe y el texto no pierde un tercio del campo. */ .input-icon .form-control:not(:last-child), .input-icon .form-select:not(:last-child) { padding-right: 2rem !important; } .input-icon .form-control:not(:first-child), .input-icon .form-select:not(:first-child) { padding-left: 2rem !important; } .input-icon .input-icon-addon { min-width: 2rem; } .form-control:focus, .form-select:focus, .ts-wrapper.focus .ts-control { border-color: var(--tw-accent); box-shadow: 0 0 0 3px var(--tw-accent-secondary); } /* --------------------------------------------------------------------- Tom Select. Su hoja viene de un CDN y trae el blanco escrito a mano —`#fff` en el campo y en el desplegable, `#303030` en el texto—, así que en oscuro se quedaba encendido en medio de la pantalla. Se reescribe con tokens, no con un bloque `[data-bs-theme='dark']`: en claro da exactamente los mismos valores que ya tenía y así solo hay una versión que mantener. --------------------------------------------------------------------- */ .ts-control, .ts-wrapper.single.input-active .ts-control, .ts-wrapper.multi.has-items .ts-control, /* `.full` la pone Tom Select en cuanto el desplegable tiene algo elegido, y su hoja le escribe `#fff` con dos clases de peso: le ganaba al `.ts-control` de arriba, que sólo tiene una. En oscuro, un desplegable de uno solo se quedaba blanco en cuanto se elegía —o si nacía con valor— mientras los de marcar varios se veían bien, que es como se descubrió. */ .full .ts-control { background: var(--tw-bg-primary); color: var(--tw-font-primary); } .ts-control input, .ts-control > input { color: var(--tw-font-primary); } /* --------------------------------------------------------------------- Un renglón, siempre. `.ts-control` es una caja flexible con `flex-wrap: wrap`, así que un nombre que no cabe —«KONE INDUSTRIAL S.A. DE C.V.» en un filtro de 13 rem— se parte en dos y el campo crece a dos renglones: más alto que los desplegables de al lado, con la fila entera descuadrada y saltando cada vez que se cambia el filtro. El texto se recorta con puntos suspensivos, que es lo que hace el `` lo tenía, el botón de guardar se encendía— y lo único que faltaba era verlo. En el panel se notaba poco porque el foco se va al campo siguiente; en una terminal de piso, donde se elige y se mira, el operador lee un campo vacío y vuelve a elegir. `dropdown-active` es la clase que TomSelect pone sólo con la lista desplegada. `tw-select-lista` la pone `select.js` en los desplegables sin buscador: ahí no hay nada que teclear, así que lo elegido se queda a la vista. */ .ts-wrapper.single.input-active.dropdown-active:not(.tw-select-lista) .ts-control > .item { display: none; } /* Y sin esto el campo de escritura exige sus 7 rem y empuja al renglón de abajo justo lo que se acaba de arreglar. */ .ts-wrapper.single .ts-control > input { min-width: 0; } .ts-wrapper.disabled .ts-control, .ts-wrapper.disabled .ts-control * { background-color: var(--tw-bg-tertiary) !important; color: var(--tw-font-light) !important; opacity: 1; } /* El desplegable es una superficie levantada, como los menús del sistema. */ .ts-dropdown { background: var(--tw-bg-primary); color: var(--tw-font-primary); border: 1px solid var(--tw-border-medium); border-radius: var(--tw-radius-sm); box-shadow: var(--tw-shadow-strong); margin-top: 2px; /* * Por encima del modal de Bootstrap, que es 1055. * * Hace falta para los desplegables que cuelgan del `body` —los que viven * dentro de una tarjeta, que si no los recorta—. TomSelect sólo calcula la * posición cuando el padre es literalmente `body`; con cualquier otro padre * lo pega sin colocarlo y acaba al fondo de la página. Así que la salida es * `body` + este z-index, y no un padre intermedio. */ z-index: 1060; } .ts-dropdown .option, .ts-dropdown .create, .ts-dropdown .no-results, .ts-dropdown .optgroup-header { color: var(--tw-font-primary); font-size: var(--tw-font-size-md); } /* El encabezado de grupo, que hasta ahora se saltaba el tema. La hoja de TomSelect trae `background: #fff` clavado en `.optgroup-header`, y aquí sólo se le estaba cambiando el color de la letra. En claro no se notaba —el fondo del desplegable es blanco de todas formas—, pero en oscuro salía una barra blanca de lado a lado del menú, con el nombre del grupo en gris encima. Se vio en el desplegable de países, y le pasaba lo mismo al de unidades —`materials/units.js`, que agrupa medida y empaque—: son los dos únicos del sistema con grupos, así que el defecto llevaba ahí desde que existe el tema oscuro y sólo lo veía quien abría ese desplegable. Va con el fondo del desplegable y no con uno propio: el grupo ya se separa con el filo de arriba y con la letra más pequeña, y un segundo tono dentro de un menú de dos centímetros es ruido. */ .ts-dropdown .optgroup-header, .ts-dropdown .no-results { color: var(--tw-font-tertiary); background: var(--tw-bg-primary); } .ts-dropdown .optgroup-header { font-size: var(--tw-font-size-sm); font-weight: var(--tw-weight-medium); } .ts-dropdown .optgroup:not(:first-child) .optgroup-header { border-top: 1px solid var(--tw-border-light); } .ts-dropdown .active { background-color: var(--tw-bg-tertiary); color: var(--tw-font-primary); } .ts-dropdown .active.create { color: var(--tw-font-primary); } .ts-dropdown .selected, .ts-dropdown .active.selected { background-color: var(--tw-accent-secondary); color: var(--tw-font-primary); } .ts-dropdown .disabled { color: var(--tw-font-extra-light); } /* El resaltado de la búsqueda: un subrayado del acento, no un amarillo. */ .ts-dropdown [data-selectable] .highlight { background: var(--tw-accent-secondary); color: var(--tw-font-primary); border-radius: var(--tw-radius-xs); } /* Fichas de una selección múltiple: el mismo chip gris que `tw-tag`. */ .ts-wrapper.multi .ts-control > div { background: var(--tw-tag-gray-bg); color: var(--tw-tag-gray-fg); border: 0; border-radius: var(--tw-radius-xs); } .ts-wrapper.multi .ts-control > div.active { background: var(--tw-accent); color: var(--tw-font-on-solid); } .ts-wrapper.plugin-remove_button .item .remove { border-left-color: var(--tw-border-medium); color: inherit; } .ts-wrapper.plugin-remove_button .item .remove:hover { background: var(--tw-bg-transparent-light); } /* La flecha del selector sencillo la dibuja Tom Select con bordes. */ .ts-wrapper.single .ts-control:after { border-top-color: var(--tw-font-tertiary) !important; } /* --------------------------------------------------------------------- Mientras el servidor busca. El indicador que trae la hoja del CDN es un aro gris de 5 px de grosor metido en una caja de 30 px: en un campo de 28 px de alto parece un error de maquetación. Se cambia por un aro fino del color de acento, y la flecha del campo se convierte en ese mismo aro mientras dura la consulta — la actividad se ve donde está la vista, en el campo, y no solo en el desplegable. --------------------------------------------------------------------- */ @keyframes tw-select-cargando { to { transform: rotate(360deg); } } .ts-dropdown .spinner { display: flex; align-items: center; justify-content: center; width: 100%; height: 34px; margin: 0; } .ts-dropdown .spinner:after { content: ''; display: block; width: 16px; height: 16px; margin: 0; border: 2px solid var(--tw-border-strong); border-top-color: var(--tw-accent); border-radius: 50%; animation: tw-select-cargando 0.7s linear infinite; } /* La flecha del campo es la de Bootstrap, dibujada como fondo: se apaga mientras carga y en su sitio gira el mismo aro. */ .ts-wrapper.form-select.loading { background-image: none; } .ts-wrapper.single.loading .ts-control { position: relative; } .ts-wrapper.single.loading .ts-control:after { content: ''; position: absolute; top: 50%; right: 10px; width: 12px; height: 12px; margin-top: -6px; border: 2px solid var(--tw-border-strong) !important; border-top-color: var(--tw-accent) !important; border-radius: 50%; animation: tw-select-cargando 0.7s linear infinite; } .form-label { font-size: var(--tw-font-size-sm); font-weight: var(--tw-weight-medium); color: var(--tw-font-secondary); margin-bottom: 2px; } .form-hint { font-size: var(--tw-font-size-sm); color: var(--tw-font-light); } /* ── El ancho del control lo pide el dato ───────────────────────────── * * Un campo que no tiene con quién compartir renglón se lo queda entero: * a medias deja el otro medio en blanco y se lee como si faltara algo * por poner ahí. Pero que la **columna** ocupe el renglón no obliga al * **control** a estirarse con ella: un sitio en el desplegable —tres * cifras— dentro de una caja de 470 px anuncia que ahí cabe mucho, y lo * que cabe son tres cifras. * * Se pone sobre el control, no sobre la columna, y por eso también sobre * el `input-group`: un campo con sufijo —«%», «MB»— es el grupo entero. */ .form-control.tw-w-num, .form-select.tw-w-num, .input-group.tw-w-num { max-width: 8rem; } .form-control.tw-w-code, .form-select.tw-w-code, .input-group.tw-w-code { max-width: 14rem; } .input-group-text { font-size: var(--tw-font-size-md); background-color: var(--tw-bg-tertiary); border-color: var(--tw-border-strong); color: var(--tw-font-tertiary); } /* La casilla no se aplasta. Como hija de un renglón flex —las bandejas, el riel del nesteador, cualquier lista con casilla— el navegador la encogía para hacerle sitio al texto largo de al lado, y una casilla ovalada se lee como un control roto. Su tamaño es su tamaño. */ .form-check-input { flex-shrink: 0; } .form-check-input:checked { background-color: var(--tw-accent); border-color: var(--tw-accent); } /* ===================================================================== 10. Tabs ===================================================================== */ /* Una sola definición de pestaña para todo el sistema: la barra de la vista de registro y la de las tarjetas con tabs deben verse idénticas. */ .nav-tabs, .tw-record-tabs { display: flex; align-items: stretch; gap: var(--tw-tab-gap); border-bottom: 1px solid var(--tw-border-light); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .nav-tabs::-webkit-scrollbar, .tw-record-tabs::-webkit-scrollbar { display: none; } /* Cuando las pestañas no caben, el degradado avisa que hay más hacia ese lado: sin él una pestaña simplemente se corta y parece que no existe. Las clases las pone el script de la barra de pestañas en el layout. */ .nav-tabs.has-overflow-end, .tw-record-tabs.has-overflow-end { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%); } .nav-tabs.has-overflow-start, .tw-record-tabs.has-overflow-start { mask-image: linear-gradient(to right, transparent 0, #000 40px); } .nav-tabs.has-overflow-start.has-overflow-end, .tw-record-tabs.has-overflow-start.has-overflow-end { mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } /* Tabler compensa el padding original del card-header con márgenes negativos; como aquí el padding es distinto, esos márgenes empujaban la primera pestaña fuera del card (que recorta con overflow:hidden). */ .card-header-tabs { margin: 0 !important; width: 100%; } .card-header:has(.card-header-tabs) { padding: 0 12px; align-items: flex-end; } .nav-tabs .nav-link, .tw-record-tabs .nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tw-tab-height); padding: 0 var(--tw-tab-gap); font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-medium); color: var(--tw-font-tertiary); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: 0 0 auto; } .nav-tabs .nav-link:hover, .tw-record-tabs .nav-link:hover { color: var(--tw-font-primary); border-bottom-color: var(--tw-border-strong); background-color: transparent; } .nav-tabs .nav-link.active, .tw-record-tabs .nav-link.active, .card-header-tabs .nav-link.active { color: var(--tw-font-primary) !important; background-color: transparent !important; border-bottom: 2px solid var(--tw-gray-90) !important; } /* ── Lo que no cabe va a «Más» ─────────────────────────────────────────── Lo pone `components/tabs.js`: mide la barra y pliega en un menú las pestañas que sobran, de la última a la primera, nunca la activa. Con el menú puesto la barra deja de recortar —el menú cuelga fuera de ella— y el degradado de desplazamiento se apaga: ya no hay nada oculto a un lado. */ .nav-tabs.tw-tabs--menu, .tw-record-tabs.tw-tabs--menu { overflow: visible; mask-image: none !important; } .tw-tabs-more .dropdown-menu { min-width: 12rem; padding: 4px; } .tw-tabs-more .dropdown-menu .nav-item { display: block; } .tw-tabs-more .dropdown-menu .nav-link { display: flex; width: 100%; min-height: 32px; margin: 0; padding: 4px 10px; border: 0 !important; border-radius: var(--tw-radius-sm); white-space: nowrap; } .tw-tabs-more .dropdown-menu .nav-link:hover { background-color: var(--tw-bg-transparent-light); } /* Un contador en cero no invita a entrar: se lee, pero no llama. */ .nav-link .tw-tag[data-zero], .tw-subtabs .tw-tag[data-zero] { opacity: 0.45; } /* ── Pestañas agrupadas · el control segmentado dentro del panel ────────── «Fabricación» reúne Revisiones, Insumos, Procesos y Componentes; abrirla enseña un carril con las cuatro. Es el mismo carril gris de `.tw-seg`, sólo que cada opción es una pestaña de Bootstrap (`role="tab"`), así que la dirección y la memoria de pestañas la entienden igual. */ .tw-subtabs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 2px; /* Alineado con lo que viene debajo: la barra de vista lleva 12 px. Y mide lo que miden sus opciones: dentro del panel en columna, el carril se estiraba a todo el ancho. */ margin: 12px 12px 0; align-self: flex-start; border-radius: var(--tw-radius-md); background-color: var(--tw-bg-secondary); } /* Dentro del contenido de la ficha el padding ya lo pone el contenedor (24 px): el carril arranca donde arranca el texto, no 24 px más adentro. */ .tw-record-content .tw-subtabs { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 12px; } .tw-subtabs > .tw-subtab { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: var(--tw-radius-sm); /* 5 px y no 3: con el borde del carril suma 34 px, lo que mide una pestaña, para que en columna las dos filas queden a la misma altura. */ padding: 5px 10px; font-size: var(--tw-font-size-md); color: var(--tw-font-tertiary); text-decoration: none; white-space: nowrap; transition: background-color var(--tw-transition), color var(--tw-transition); } .tw-subtabs > .tw-subtab:hover { color: var(--tw-font-primary); } .tw-subtabs > .tw-subtab.active { background-color: var(--tw-bg-primary); border-color: var(--tw-border-light); color: var(--tw-font-primary); font-weight: var(--tw-weight-medium); } /* ── Pestañas verticales dentro de un panel · el carril a la izquierda ───── Para un listado que junta dos preguntas distintas —en «Por decidir → Certificados», lo que falta capturar y lo que leyó la IA—: el mismo carril de `.tw-subtabs`, puesto en columna a la izquierda y con el contenido al lado, como las secciones de una ficha en monitor ancho. Las opciones siguen siendo pestañas de Bootstrap, así que la dirección y la memoria las entienden igual. En el teléfono vuelve a ser una fila encima del contenido. */ .tw-pane-split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: clamp(200px, 15vw, 240px) minmax(0, 1fr); } .tw-subtabs.tw-subtabs--vertical { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; align-self: stretch; gap: 2px; margin: 0; padding: 12px 8px; border-radius: 0; background-color: transparent; border-right: 1px solid var(--tw-border-light); } .tw-subtabs--vertical > .tw-subtab { width: 100%; padding: 7px 10px; } .tw-subtabs--vertical > .tw-subtab.active { background-color: var(--tw-bg-transparent-light); border-color: transparent; } .tw-pane-split > .tab-content { min-width: 0; min-height: 0; display: flex; flex-direction: column; } .tw-pane-split > .tab-content > .tab-pane.active { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } @media (max-width: 768px) { .tw-pane-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .tw-subtabs.tw-subtabs--vertical { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--tw-border-light); } .tw-subtabs--vertical > .tw-subtab { width: auto; } } /* El panel de un grupo apila el carril y el contenido; el panel hijo activo ocupa el resto, como haría de estar suelto en la barra. */ .tw-record-main > .tab-content > .tab-pane.tw-pane-group.active { display: flex; flex-direction: column; } .tw-pane-group > .tab-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .tw-pane-group > .tab-content > .tab-pane.active { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* ── En monitores anchos, la barra es una columna ───────────────────────── A partir de 1440 px la ficha tiene sitio para una lista vertical de secciones: sin límite de ancho, con contador y sin nada que plegar. Sólo en la ficha de registro; los listados con pestañas siguen en horizontal. */ @media (min-width: 1440px) { /* Sólo donde hay carril que poner · una ficha sin pestañas no reserva su columna. La primera columna mide siempre lo mismo, tenga o no una lista de secciones que meter dentro. En «Mi cuenta» o en el alta de una orden de producción —fichas de una sola pantalla, sin pestañas— quedaba una banda vacía de 216 px entre el panel de la izquierda y el contenido, que arrancaba a media pantalla. Con `:has()` la rejilla se monta sólo cuando el carril existe; sin él la sección sigue siendo la columna flexible de siempre y el contenido empieza pegado al panel. */ .tw-record .tw-record-main:has(> .tw-record-tabs) { display: grid; /* La columna crece un poco con la pantalla: «Renglones y certificados» no cabe en 200 px y un rótulo cortado es una pestaña que no se lee. Lo que aun así no quepa parte en dos líneas, más abajo. */ grid-template-columns: clamp(200px, 15vw, 260px) minmax(0, 1fr); /* El contenido se lleva el alto que sobra · si no, se corta a media pantalla. La columna de pestañas se estira a lo largo de cuarenta renglones (`grid-row: 1 / span 40`, abajo) para llegar hasta el fondo sea cual sea el número de hermanos. Con todos los renglones en `auto`, el sobrante de la rejilla se reparte **a partes iguales entre los cuarenta**: el del contenido se quedaba con una cuarentava parte y los treinta y nueve vacíos con el resto. En la recepción eso dejaba el panel doscientos píxeles más corto que la tarjeta —la ficha se cortaba a mitad del segundo renglón y debajo quedaba un hueco negro— y el desplazamiento de dentro empezaba antes de tiempo. El primer renglón es el del contenido: declarado en `1fr` se lleva todo el sobrante y no queda nada que repartir. Va con `minmax(0, …)` para que pueda encoger por debajo de lo que mide su contenido, que es la condición para que `overflow-y: auto` de dentro desplace en vez de empujar. Lo que se coloque después —si alguna ficha añade un hermano en la segunda columna— sigue midiendo lo suyo. */ grid-template-rows: minmax(0, 1fr); grid-auto-rows: auto; } .tw-record .tw-record-main > .tw-record-tabs { grid-column: 1; grid-row: 1 / span 40; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 8px; border-bottom: 0; border-right: 1px solid var(--tw-border-light); overflow: visible; mask-image: none !important; } .tw-record .tw-record-main > :not(.tw-record-tabs) { grid-column: 2; min-width: 0; } /* El contenido arranca a la altura de la primera pestaña de la columna: ésta lleva 12 px arriba y el contenido traía 16. Así el carril de un grupo queda en la misma línea que «Fabricación». */ .tw-record .tw-record-main > .tw-record-content { padding-top: 12px; } .tw-record .tw-record-main > .tw-record-tabs .nav-item { display: block; } .tw-record .tw-record-main > .tw-record-tabs .nav-link { display: flex; align-items: flex-start; width: 100%; min-height: 34px; margin: 0; padding: 7px 10px; border-bottom: 0; border-radius: var(--tw-radius-sm); /* En columna el rótulo puede partir: mejor dos líneas que salirse. */ white-space: normal; overflow-wrap: anywhere; line-height: 1.25; text-align: left; } .tw-record .tw-record-main > .tw-record-tabs .nav-link .ti { flex: 0 0 auto; margin-top: 1px; } .tw-record .tw-record-main > .tw-record-tabs .nav-link:hover { background-color: var(--tw-bg-transparent-light); border-bottom: 0; } /* La abierta pesa más que la que se está señalando. Iba con `--tw-bg-secondary`, que en oscuro es negro puro: la pestaña abierta quedaba *más apagada* que el fondo del panel y el puntero, que aclara, la pisaba. Es el mismo gris sólido con el que el menú de la izquierda marca la pantalla en la que se está (`.nav-link[aria-current='page']`), y por la misma razón. */ .tw-record .tw-record-main > .tw-record-tabs .nav-link.active { background-color: var(--tw-bg-quaternary) !important; border-bottom: 0 !important; } /* El contador, al filo derecho: en columna los números forman su propia vertical y se leen de un vistazo, en vez de quedar colgados donde acabe cada rótulo. El `!important` es contra el `ms-1` del marcado —una utilidad de Bootstrap, que gana por serlo y no por ser más específica—. Sin relleno arriba y abajo porque el contador no debe decidir el alto del renglón: con él medía 22 px y las pestañas con número quedaban dos píxeles más altas que las que no lo llevan. Al pasar el puntero de una a otra se veía saltar el recuadro. */ .tw-record .tw-record-main > .tw-record-tabs .nav-link .tw-tag { margin-left: auto !important; padding-block: 0; } /* La píldora del contador se pinta *sobre* lo que tenga debajo y no con un gris fijo. El gris fijo era casi el mismo tono que el recuadro del puntero: al señalar «Cajas» el número se quedaba flotando sin píldora, mientras los de al lado seguían con la suya. Los distintivos de color —los que dicen algo— se quedan con el suyo. */ .tw-record .tw-record-main > .tw-record-tabs .nav-link .tw-tag:not([class*='tw-tag--']) { background-color: var(--tw-bg-transparent-light); } } /* El gap ya separa icono y texto: el me-2 del markup duplicaba la distancia */ .nav-tabs .nav-link .ti, .tw-record-tabs .nav-link .ti { font-size: var(--tw-icon-size) !important; margin-right: 0 !important; } /* Pestañas de módulos que todavía no existen. Antes iban con `.disabled`: se veían igual que una pestaña normal pero no respondían al clic, así que parecía que la aplicación estaba rota. Ahora se marcan con el distintivo "Pronto" y siguen siendo navegables a propósito — el panel explica qué falta y dónde se hace hoy esa tarea. */ .nav-tabs .nav-link.tw-tab-soon, .tw-record-tabs .nav-link.tw-tab-soon { color: var(--tw-font-extra-light); } .nav-tabs .nav-link.tw-tab-soon:hover, .tw-record-tabs .nav-link.tw-tab-soon:hover { color: var(--tw-font-light); border-bottom-color: var(--tw-border-medium); } .nav-tabs .nav-link.tw-tab-soon.active, .tw-record-tabs .nav-link.tw-tab-soon.active { color: var(--tw-font-secondary) !important; border-bottom-color: var(--tw-border-strong) !important; } .nav-tabs .nav-link.tw-tab-soon .ti, .tw-record-tabs .nav-link.tw-tab-soon .ti { opacity: 0.7; } .nav-tabs .nav-link.tw-tab-soon::after, .tw-record-tabs .nav-link.tw-tab-soon::after { content: 'Pronto'; font-size: var(--tw-font-size-xxs); font-weight: var(--tw-weight-medium); line-height: 1; letter-spacing: 0.02em; padding: 3px 5px; border-radius: var(--tw-radius-xs); background-color: var(--tw-tag-gray-bg); color: var(--tw-tag-gray-fg); } /* Pestaña deshabilitada de verdad: la que aún está cargando o que el rol no puede abrir. Se distingue de la anterior en que no se puede pulsar. */ .nav-tabs .nav-link.disabled, .tw-record-tabs .nav-link.disabled { color: var(--tw-font-extra-light); cursor: not-allowed; } /* Tabs "pill" existentes de la app */ ul.new-tabs[data-bs-toggle='tabs'] .nav-link.active::before { background: var(--tw-bg-quaternary) !important; border-radius: var(--tw-radius-sm) !important; } /* ===================================================================== 11. Dropdowns, modales y offcanvas ===================================================================== */ .dropdown-menu { font-size: var(--tw-font-size-md) !important; border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-md); box-shadow: var(--tw-shadow-strong); padding: 4px; } .dropdown-item { font-size: var(--tw-font-size-md) !important; border-radius: var(--tw-radius-sm); padding: 5px 8px; color: var(--tw-font-primary); min-height: 28px; display: flex; align-items: center; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--tw-bg-transparent-light); color: var(--tw-font-primary); } .dropdown-item .ti, .dropdown-item svg { width: 16px; height: 16px; font-size: 1rem !important; color: var(--tw-font-tertiary); } .dropdown-item.text-danger, .dropdown-item.text-danger .ti, .dropdown-item.text-danger svg { color: var(--tw-tag-red-fg) !important; } /* El menú de las altas · cada opción con su renglón de «cuándo se usa». El icono se queda arriba, a la altura del título, y no centrado contra las dos líneas; el texto de apoyo puede envolver sin empujar el menú entero. */ .tw-menu-alta { width: 23rem; } .tw-menu-alta .dropdown-item { align-items: flex-start; gap: 10px; padding: 7px 10px; white-space: normal; } .tw-menu-alta .dropdown-item .ti { flex: 0 0 auto; margin-top: 2px; } .modal-content, .offcanvas { border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-lg); box-shadow: var(--tw-shadow-strong); } .offcanvas { border-radius: 0; } .modal-header, .offcanvas-header { border-bottom: 1px solid var(--tw-border-light); padding: 10px 16px; min-height: 44px; } /* El título del cajón, igual que el del modal: sin esto salía con el tamaño de Tabler, el doble que cualquier otro título de la pantalla. */ .modal-title, .offcanvas-title { font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-semibold); margin: 0; /* Un título largo en un diálogo pequeño («Parece que hubo un error al imprimir», `modal-sm`) parte renglón en vez de salir cortado (11-oct). */ white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; flex: 1 1 auto; } .modal-footer, .offcanvas-footer { border-top: 1px solid var(--tw-border-light); padding: 10px 16px; } /* * Un botón del pie que dice lo que hace es largo («Cancelar lo empezado de * REC-2026-00032-L067-002») y en un diálogo pequeño se salía del cuadro por * la izquierda: `.btn` no parte renglón. En el pie sí lo parte (9-oct-2026). */ .modal-footer > .btn { white-space: normal; max-width: 100%; } /* * El cuerpo del modal heredaba los 24 px de Tabler mientras el encabezado y el * pie usaban 16 px, así que el título y los botones quedaban desalineados * respecto a los campos. Se unifica el margen lateral en los tres. */ .modal-body, .offcanvas-body { padding: 16px; } .modal-backdrop.show { opacity: 0.08; } /* Tooltips */ .tooltip-inner { font-size: var(--tw-font-size-sm); background-color: var(--tw-gray-90); border-radius: var(--tw-radius-sm); padding: 4px 8px; } /* Avatares */ .avatar { border-radius: var(--tw-radius-sm); font-size: var(--tw-font-size-sm); font-weight: var(--tw-weight-medium); background-color: var(--tw-bg-quaternary); color: var(--tw-font-secondary); } .avatar.avatar-rounded, .avatar.rounded-circle { border-radius: var(--tw-radius-pill); } /* Tagify: usado en el formato de código de la etiqueta del cliente */ .tagify { --tags-border-color: var(--tw-border-strong); --tags-hover-border-color: var(--tw-gray-50); --tags-focus-border-color: var(--tw-accent); --tag-bg: var(--tw-bg-quaternary); --tag-hover: var(--tw-bg-tertiary); --tag-text-color: var(--tw-font-primary); --tag-remove-bg: var(--tw-tag-red-bg); --tag-pad: 2px 6px; --tag-inset-shadow-size: 1.2em; --tagify-dd-item-pad: 5px 8px; min-height: 28px; padding: 3px; border-radius: var(--tw-radius-sm); font-size: var(--tw-font-size-md); } .tagify__tag { margin: 2px; } .tagify__tag > div { border-radius: var(--tw-radius-sm); padding: var(--tag-pad); } .tagify__tag-text { font-size: var(--tw-font-size-md); line-height: 18px; } .tagify__input { margin: 2px; padding: 2px 4px; font-size: var(--tw-font-size-md); } .tagify__input:empty::before { color: var(--tw-font-light); } .tagify__dropdown { --tagify-dd-bg-color: var(--tw-bg-primary); --tagify-dd-text-color: var(--tw-font-primary); --tagify-dd-color-primary: var(--tw-accent); border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-md); box-shadow: var(--tw-shadow-strong); } .tagify__dropdown__wrapper { border: 0; border-radius: var(--tw-radius-md); background: var(--tw-bg-primary); } /* Las sugerencias en fila (`tags-inline`). La hoja de la librería sólo las pinta bajo `.light-style`/`.dark-style`, que aquí no existen: salían con el fondo blanco de la librería y el texto claro del tema oscuro, sin leerse. */ .tags-inline .tagify__dropdown__item { border: 1px solid var(--tw-border-medium); background: var(--tw-bg-secondary); color: var(--tw-font-primary); } .tags-inline .tagify__dropdown__item--active, .tags-inline .tagify__dropdown__item:hover { background: var(--tw-bg-transparent-light); color: var(--tw-font-primary) !important; } /* Un marcador no se edita: su texto es el nombre, lo impreso sale de la orden. */ .tagify__tag[editable='false'] { cursor: grab; } .tagify__dropdown__item { font-size: var(--tw-font-size-md); border-radius: var(--tw-radius-sm); margin: 2px; } .tagify__dropdown__item--active { background-color: var(--tw-bg-transparent-light); color: var(--tw-font-primary); } /* Dropzone */ .dropzone { border: 1px dashed var(--tw-border-strong) !important; border-radius: var(--tw-radius-md); background-color: var(--tw-bg-secondary); color: var(--tw-font-tertiary); min-height: 0; padding: 12px !important; } .dropzone:hover { border-color: var(--tw-accent) !important; background-color: var(--tw-accent-tertiary); } .dz-button { font-size: var(--tw-font-size-md); color: var(--tw-font-tertiary); background: none; border: 0; } /* ===================================================================== 12. Página de registro (perfil) — usada por /pieces/:id ===================================================================== */ .tw-page { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; background-color: var(--tw-bg-primary); } /* --------------------------------------------------------------------- Pantalla de listado, tal como la arma Twenty: la barra de título va directamente sobre el fondo gris, y todo lo demás —barra de vista, tabla y pie de conteo— vive dentro de una tarjeta con margen uniforme. Lo que parece un hueco bajo la tabla es en realidad ese margen. --------------------------------------------------------------------- */ .tw-screen { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; background-color: var(--tw-bg-secondary); } /* La tarjeta flota sobre el fondo gris con las cuatro esquinas redondeadas: quien separa del sidebar es su propio margen, no una línea divisoria. */ .tw-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0 var(--tw-screen-gutter) var(--tw-screen-gutter); background-color: var(--tw-bg-primary); border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-md); overflow: hidden; } /* La vista de registro reparte la tarjeta en dos columnas: campos y pestañas */ .tw-panel.tw-record { flex-direction: row; } /* Galería de tarjetas: para colecciones cortas y visuales, donde una tabla con cuatro filas resulta pesada (por ejemplo los diseños de etiqueta). */ .tw-card-grid { display: grid; /* `min(240px, 100%)` y no `240px` a secas: `minmax` con un mínimo fijo **no baja de él**, así que en una pantalla de 375 px la columna seguía midiendo lo suyo y la tarjeta se salía por la derecha. Es el mismo arreglo en las ocho rejillas del tema. */ grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; } .tw-select-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-md); background-color: var(--tw-bg-primary); transition: border-color var(--tw-transition), box-shadow var(--tw-transition); } .tw-select-card:hover { border-color: var(--tw-border-strong); box-shadow: var(--tw-shadow-light); } .tw-select-card.is-selected { border-color: var(--tw-tag-green-fg); box-shadow: 0 0 0 1px var(--tw-tag-green-fg); } .tw-select-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .tw-select-card-title { display: flex; align-items: center; gap: 6px; font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-semibold); color: var(--tw-font-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tw-select-card-specs { display: flex; flex-direction: column; gap: 2px; } .tw-select-card-spec { display: flex; align-items: center; gap: 6px; font-size: var(--tw-font-size-md); color: var(--tw-font-tertiary); } .tw-select-card-spec .ti { font-size: var(--tw-icon-size) !important; color: var(--tw-font-light); } .tw-select-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--tw-border-light); } /* Código generado: monoespaciado para poder cotejarlo carácter a carácter */ .tw-code-sample { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-sm); background-color: var(--tw-bg-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--tw-font-size-md); color: var(--tw-font-primary); word-break: break-all; } /* La misma muestra, cuando lo que se copia ocupa su propio renglón: una dirección, un comando. `inline-flex` la encogía al ancho del texto, así que una dirección corta dejaba media caja y el bloque no se leía como algo copiable. */ .tw-code-sample--block { display: flex; width: 100%; white-space: pre-wrap; } /* La etiqueta dibujada en pequeño, junto a la casilla que la elige. Dice CUÁL es el papel: dos diseños del mismo juego se parecen escritos —«CHICA · SERIAL» y «CHICA · NÚMERO DE PARTE»— y son dos papeles distintos sobre la mesa. Fondo blanco siempre, porque la etiqueta es papel, y por eso no sigue al tema oscuro. */ .tw-label-thumb { flex-shrink: 0; width: 180px; padding: 4px; border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-sm); background-color: #fff; } /* Lienzo de la vista previa de etiqueta */ .tw-label-canvas { padding: 8px; border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-sm); background-color: var(--tw-bg-secondary); } /* Sección con encabezado dentro del contenido de una pestaña */ .tw-subpanel + .tw-subpanel { border-top: 1px solid var(--tw-border-light); } /* La cabecera de un subpanel: el título a la izquierda y sus acciones a la derecha. ENVUELVE, y no es un adorno. En la ficha de una recepción esa hilera llegó a seis botones —imprimir, dar de baja, aceptar, cuarentena, rechazar— dentro de un panel que comparte el ancho con la ficha y con el menú, y sin envolver el último se salía por la derecha y se **cortaba**: el operador no podía rechazar material porque el botón no existía en su pantalla. Le pasa a cualquier pantalla de este layout el día que le añaden una acción más, así que se arregla aquí y no en la que se rompió. Con `min-width: 0` en el hijo del título, el que cede sitio es el texto —que se puede recortar y sigue leyéndose— y no los botones, que recortados no sirven para nada. El `min-height` se queda como alto mínimo de una hilera; en cuanto envuelve, el `padding` vertical le da aire. */ .tw-subpanel-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-height: 40px; padding: 6px 12px; border-bottom: 1px solid var(--tw-border-light); background-color: var(--tw-bg-primary); } .tw-subpanel-header > * { min-width: 0; } /* Y las hileras de dentro también: el bloque de acciones es un flex propio, así que sin esto la cabecera envolvía una sola pieza —el bloque entero— y el bloque seguía saliéndose. Cada grupo de botones se mantiene junto y baja entero, que es como se leen: «imprimir y dar de baja» por un lado, «aceptar, cuarentena y rechazar» por otro. */ .tw-subpanel-header .d-flex { flex-wrap: wrap; } .tw-subpanel-body { padding: 12px; } /* Identidad del registro dentro de la tarjeta, en las vistas de detalle */ .tw-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 12px; border-bottom: 1px solid var(--tw-border-light); } /* Donde va la tabla: es quien recorta, así adjustScrollY lo toma de límite */ .tw-panel-body { flex: 1 1 auto; min-height: 0; overflow: hidden; } /* ── La columna de lectura de una pantalla de ajustes ─────────────────────── Una pantalla de configuración son dos o tres tarjetas con texto dentro, y estiradas a un monitor de 27 pulgadas se rompen de la misma forma: una dirección de sesenta caracteres queda flotando en metro y medio de vacío, y el párrafo de al lado se vuelve ilegible porque el ojo pierde el renglón al volver. Acota **lo que se lee**, no lo que se compara: una tabla, un tablero o un plano siguen ocupando el panel entero, porque ahí el ancho es información. */ .tw-settings-column { max-width: var(--tw-settings-column); } /* ── La pestaña que es una tabla: `--tabla` ───────────────────────────────── El cuerpo del panel recorta con `overflow: hidden` porque casi siempre lleva dentro una DataTable, que se desplaza sola —el mismo motivo que documenta `.tw-panel-body:has(> .tw-inbox-list)`—. Una tabla escrita a mano dentro de una `.table-responsive` no se desplaza sola: el carril crece con sus renglones hasta pasarse del panel y el recorte se lo come **sin dejar barra**. Es el peor de los fallos de alto, porque no se ve: la pantalla sale entera y bien, y los últimos renglones sencillamente no están. En la ficha de la orden de producción la tabla medía 1509 px dentro de un panel de 664 y no había forma de llegar al renglón trece. Las otras pestañas con esta forma lo taparon a mano con un `overflow-y-auto` en el cuerpo. Devuelve el desplazamiento, sí, pero deja la barra horizontal del carril **debajo del último renglón**, o sea fuera de la pantalla en cuanto la tabla es larga; y esta tabla mide 1200 px en un panel de 977, así que la de lado hace tanta falta como la de arriba abajo. Aquí el cuerpo se apila en columna y el carril se queda con el alto que sobra: las dos barras caen dentro de lo que se ve, y lo que no es el carril —la barra de lo marcado— se queda quieto arriba. VA DECLARADO EN LA PLANTILLA y no por `:has(> .table-responsive)` a secas, porque la misma etiqueta envuelve dos cosas distintas. En Permisos hay **dos** carriles en un mismo cuerpo y en Trazabilidad el carril es el último bloque de un tablero de tarjetas: en los dos, quien tiene que desplazarse es el cuerpo entero, y repartir el alto entre los carriles dejaría cada tabla en una tira. `--tabla` dice «esta pestaña **es** la tabla», que es cuando esto vale. */ .tw-panel-body--tabla { display: flex; flex-direction: column; } .tw-panel-body--tabla > :is(.table-responsive, .tw-table-scroll) { flex: 1 1 auto; min-height: 0; } /* Y el tablero dentro de un panel · el mismo fallo, del otro lado. `.tw-dash` ya se desplaza solo —trae `flex: 1 1 auto; min-height: 0; overflow-y: auto`—, pero eso sólo funciona si su padre es una columna flex, que es como vive en el resto de pantallas: colgando de `.tw-screen`. Dentro de un cuerpo de panel —el panorama de Seguimiento— el padre es un bloque, así que el `flex` no aplica, el tablero crece con sus secciones y el recorte del cuerpo se lleva las de abajo. Se le devuelve la columna y el tablero vuelve a hacer lo que ya sabía hacer. */ .tw-panel-body:has(> .tw-dash) { display: flex; flex-direction: column; } /* Dentro de la tarjeta la barra de vista no repite el borde superior */ .tw-panel > .tw-view-bar:first-child { border-top: 0; } /* La barra de título va sobre el fondo gris; quien delimita es la tarjeta */ .tw-screen > .tw-topbar { border-bottom: 0; min-height: 48px; height: auto; padding: 0 var(--tw-screen-gutter); flex-wrap: wrap; } .tw-record { display: flex; flex: 1 1 auto; min-height: 0; background-color: var(--tw-bg-primary); /* Plegada, el panel se sale del flujo y se asoma encima del contenido: esto es lo que le da el marco de referencia. Ver «La ficha, plegada». */ position: relative; } /* --- Barra superior con breadcrumb --- */ .tw-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 12px; background-color: var(--tw-bg-secondary); border-bottom: 1px solid var(--tw-border-light); flex: 0 0 auto; } .tw-page-title a { color: var(--tw-font-primary); display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: var(--tw-radius-sm); } .tw-page-title a:hover { background-color: var(--tw-bg-transparent-light); } /* --- Panel izquierdo (campos) --- */ /* Tres zonas: identidad fija arriba, campos scrolleando en medio y el bloque de relaciones anclado abajo, siempre a la vista. */ .tw-record-panel { width: var(--tw-record-panel-width); flex: 0 0 var(--tw-record-panel-width); display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-right: 1px solid var(--tw-border-light); background-color: var(--tw-bg-primary); } /* ── La ficha, plegada · el riel y la ojeada ────────────────────────── * * El panel se lleva 400 px —340 por debajo de 1400— en las diecisiete * fichas del panel, y quien abre «Partidas», «Embarques» o «Producción» * está mirando la otra mitad: una tabla de ocho columnas apretada contra * el borde derecho, mientras a la izquierda siguen quince rótulos que ya * se leyeron al entrar. * * ── Plegada no es desaparecida ─────────────────────────────────────── * * La primera versión escondía el panel entero y la pantalla se quedaba sin * decir que existía: un botón en la barra de título es un botón, no una * pista de qué hay debajo. Queda un riel de 44 px con el icono del * registro y la palabra «Campos» de canto —se ve que ahí vive algo—, y al * pasar el cursor por encima el panel **se asoma**: sale flotando sobre el * contenido, se lee el dato que hacía falta y se retira solo al salir. Un * clic en el riel lo devuelve a su sitio para siempre. * * ── Por qué se asoma flotando y no empujando ───────────────────────── * * Porque abrirse y cerrarse dentro del flujo mueve la columna de la * derecha en cada pasada del ratón, y ahí hay tablas: cada rebote sería un * reparto de columnas de DataTables. Plegado, el panel sale del flujo * —`position: absolute` sobre la ficha, que por eso es `relative`— y quien * ocupa su hueco es el riel. Al asomarse no se mueve un píxel de la tabla. * * ── La excepción declara que lo es ─────────────────────────────────── * * `:not([data-ficha-fija])`. Dos pantallas usan este panel como riel de * trabajo y no como ficha de campos —el alta de una orden de producción y * la importación de un nesteo, donde a la izquierda están los nesteos que * hay que elegir— y ahí plegar sería esconder la pantalla. Esas dos lo * marcan en su plantilla; las demás, que son fichas, se pliegan. */ html[data-ficha='plegada'] .tw-record > .tw-record-panel:not([data-ficha-fija]) { position: absolute; top: 0; bottom: 0; left: 0; z-index: 20; box-shadow: var(--tw-shadow-strong); /* Invisible y **sin recoger el ratón**: `opacity: 0` a secas dejaría una plancha de 400 px por delante de la tabla, y el clic en la primera columna no llegaría nunca a su renglón. */ visibility: hidden; opacity: 0; transition: opacity var(--tw-duration-base) var(--tw-ease), visibility var(--tw-duration-base) var(--tw-ease); } /* La ojeada · mientras el ratón está en el riel o en el propio panel. * * Los dos hacen falta y no sobra ninguno: el riel es quien la abre, y el * panel —que sale justo encima del riel— es quien la mantiene mientras se * lee. Con `:focus-within` la misma ojeada llega desde el teclado, que es * como se recorre una ficha sin ratón. */ html[data-ficha='plegada'] .tw-ficha-riel:hover + .tw-record-panel:not([data-ficha-fija]), html[data-ficha='plegada'] .tw-ficha-riel:focus-visible + .tw-record-panel:not([data-ficha-fija]), html[data-ficha='plegada'] .tw-record > .tw-record-panel:not([data-ficha-fija]):hover, html[data-ficha='plegada'] .tw-record > .tw-record-panel:not([data-ficha-fija]):focus-within { visibility: visible; opacity: 1; /* Un pelo de espera para entrar y ninguna para salir: el riel está pegado al borde de la ficha y se cruza sin querer al ir a cualquier otro sitio. Sin la espera, cada pasada del ratón por la izquierda de la pantalla sacaba un panel de 400 px. */ transition-delay: 0.15s; } /* El riel · lo pone `ficha-plegar.js` al lado del panel, y sólo se ve cuando la ficha está plegada. Es un botón entero: se pulsa donde sea. */ .tw-ficha-riel { display: none; } html[data-ficha='plegada'] .tw-record > .tw-ficha-riel { display: flex; flex: 0 0 var(--tw-record-rail-width); width: var(--tw-record-rail-width); flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; border: 0; border-right: 1px solid var(--tw-border-light); background-color: var(--tw-bg-primary); color: var(--tw-font-light); font-family: var(--tw-font-family); font-size: var(--tw-font-size-md); cursor: pointer; transition: background-color var(--tw-transition); } html[data-ficha='plegada'] .tw-record > .tw-ficha-riel:hover { background-color: var(--tw-bg-secondary); color: var(--tw-font-primary); } /* «Campos», de canto. `vertical-rl` con la vuelta de 180 grados lo deja leyéndose de abajo arriba, que es como va el rótulo de un lomo. */ .tw-ficha-riel__texto { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.02em; } /* El icono del registro, clonado de la identidad: es lo que dice de qué ficha se trata sin abrirla. Más chico que el de arriba —28 en vez de 40— porque aquí no encabeza nada, sólo señala. */ .tw-ficha-riel .tw-record-avatar { width: 28px; height: 28px; font-size: var(--tw-font-size-md); } .tw-ficha-riel .tw-record-avatar .ti { font-size: 1rem !important; } /* El galón · el mismo icono que el botón de la barra, cerrando el grupo. Pegado al rótulo y no en el pie del riel: los tres —icono del registro, «Campos» y galón— son una sola cosa que se lee de un vistazo, y un icono solo a ochocientos píxeles de distancia no acompaña a nada. Acostado, en cambio, se va a la derecha: ahí lo que sobra es el ancho. */ .tw-ficha-riel__galon { margin-top: 4px; font-size: var(--tw-icon-size) !important; } /* El botón de la barra de título lo pone `ficha-plegar.js`. Va pegado al rastro de migas y no entre las acciones de la derecha: no es algo que se le haga al registro, es cómo se está mirando. */ .tw-ficha-plegar { flex: 0 0 auto; margin-right: 2px; color: var(--tw-font-light); } /* El rastro de migas se queda pegado al botón, no se va al centro. * * La barra reparte con `space-between`, y eso con dos hijos —título y * acciones— es «uno a cada extremo». Al meter el botón delante pasaron a ser * tres y el reparto hizo lo que le toca: el del medio, al medio. El título * quedaba flotando en mitad de la pantalla, lejos del registro que nombra. * * El margen automático se come el hueco antes que el reparto: botón y título * a la izquierda, acciones a la derecha, y el hueco entero en medio. Sólo * donde está el botón, que es donde apareció el problema. */ .tw-ficha-plegar + .tw-page-title { margin-right: auto; } .tw-record-fields { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 12px 16px; } /* La identidad no scrollea: al recorrer campos siempre se sabe de qué registro se están viendo. */ .tw-record-identity { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 12px 20px; border-bottom: 1px solid var(--tw-border-light); background-color: var(--tw-bg-primary); } .tw-record-avatar { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--tw-radius-md); background-color: var(--tw-bg-quaternary); color: var(--tw-font-secondary); font-size: var(--tw-font-size-lg); font-weight: var(--tw-weight-semibold); overflow: hidden; } .tw-record-avatar .ti { font-size: 1.25rem !important; } /* El tamaño lo define .tw-record-title en la escala de encabezados; aquí sólo se centra dentro del panel de identidad. */ .tw-record-identity .tw-record-title { text-align: center; } .tw-record-subtitle { font-size: var(--tw-font-size-md); color: var(--tw-font-light); } .tw-record-panel .tw-section-title { padding: 8px 4px; } /* Grupo colapsable de campos */ .tw-field-group { margin-bottom: 4px; } .tw-field-group-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 4px; background: none; border: 0; border-radius: var(--tw-radius-sm); font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-medium); color: var(--tw-font-secondary); cursor: pointer; } .tw-field-group-header:hover { background-color: var(--tw-bg-transparent-light); } .tw-field-group-header .ti { font-size: 1rem !important; color: var(--tw-font-light); transition: transform 0.15s ease; } .tw-field-group-header[aria-expanded='false'] .ti { transform: rotate(-180deg); } .tw-field-list { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 12px; } .tw-field { display: flex; align-items: flex-start; gap: 8px; min-height: 24px; padding: 2px 4px; border-radius: var(--tw-radius-sm); } /* Un rótulo no se corta nunca. Iba con `white-space: nowrap` + `overflow: hidden` y **sin** puntos suspensivos: cualquier rótulo de más de ~106 px se cortaba a media palabra —«Piezas en la etiqu»— sin ninguna señal de que faltara texto y sin forma de leerlo, porque tampoco había `title`. Afectaba a todas las fichas del panel, no a una pantalla. La columna sigue midiendo 128 px para que los valores queden alineados entre sí; lo que cambia es que el rótulo que no cabe pasa a dos líneas en lugar de perderse. Los puntos suspensivos se descartaron a propósito: en una ficha el rótulo es lo que da sentido al valor, y medio rótulo con «…» sigue sin poderse leer. */ .tw-field-label { display: flex; align-items: flex-start; gap: 6px; flex: 0 0 128px; min-height: 20px; padding-top: 1px; font-size: var(--tw-font-size-md); line-height: 1.35; color: var(--tw-font-tertiary); white-space: normal; overflow-wrap: break-word; } /* La misma lista con la columna de rótulos más ancha. Es para las fichas dentro de un modal, donde hay sitio de sobra y rótulos largos —«Orden de producción», «Nota de quien contó»— que en 128 px se parten en dos líneas cada uno y convierten una lista de quince campos en una escalera. */ .tw-field-list--wide .tw-field-label { flex-basis: 168px; } .tw-field-label .ti { font-size: 1rem !important; color: var(--tw-font-light); flex: 0 0 auto; /* Que el icono quede sobre la primera línea cuando el rótulo va a dos. */ line-height: 1.35; } .tw-field-value { flex: 1 1 auto; min-width: 0; min-height: 20px; display: flex; align-items: center; font-size: var(--tw-font-size-md); color: var(--tw-font-primary); padding: 0 4px; border-radius: var(--tw-radius-sm); word-break: break-word; } .tw-field-value.tw-editable { cursor: pointer; } .tw-field-value.tw-editable:hover { background-color: var(--tw-bg-transparent-light); } .tw-field-value.tw-empty { color: var(--tw-font-extra-light); } /* El texto que trae sus propios saltos de línea —un motivo de cancelación, una nota de recepción—. Vivía sólo dentro de `.tw-field-value`, y el mismo texto fuera de un campo —la tarjeta de «Cancelada», en la ficha del nesteo y en la de la orden de producción— perdía los saltos sin que se notara al escribirlo. */ .tw-multiline { white-space: pre-wrap; line-height: 1.45; } /* ── Dos bloques al lado, si el sitio da ───────────────────────────────────── Reparte los hijos en columnas **según lo que mida la caja**, y no según lo que mida la ventana. Es lo que `row` + `col-lg-*` de Bootstrap no puede hacer: sus puntos de corte miran el `viewport`, y estas tarjetas viven en el panel derecho de una ficha, que mide lo mismo con la ventana a 1440 que a 2560 —lo que crece es el hueco de al lado—. Con 570 px de panel, «Material» y «Certificado de calidad» caían a 220 y 320 px: el rótulo se lleva 128 fijos y en lo que quedaba, «Sin definir» iba a dos líneas y un lote — `REC-2026-00013-L030`— se partía letra a letra en cuatro. Con `auto-fit` los dos bloques se ponen uno debajo del otro en cuanto no caben a 300 px, que es cuando dejan de leerse; en un panel ancho vuelven a ponerse al lado solos. El `min(100%, …)` es para que en una caja más estrecha que el mínimo la columna encoja en vez de desbordar. */ .tw-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tw-cols-min, 300px)), 1fr)); gap: 16px 24px; align-items: start; } /* Bloque de relaciones al pie del panel (People / Opportunities en Twenty) */ .tw-relation-block { border-top: 1px solid var(--tw-border-light); padding: 12px; margin-top: 0; } /* Dentro del panel de registro se ancla abajo y scrollea por dentro si crece */ .tw-record-panel > .tw-relation-block { flex: 0 1 auto; min-height: 0; max-height: 40%; overflow-y: auto; background-color: var(--tw-bg-primary); } /* Una tarjeta suelta en el panel —el aviso de «Cancelado», en la ficha del nesteo y en la de la orden de producción— no se encoge. El panel es una columna flex y la tarjeta recorta lo que le sobra: sin esto, el último renglón del aviso —quién canceló y cuándo— se pierde detrás del borde. Quien cede el espacio es la lista de campos, que tiene su propio scroll. */ .tw-record-panel > .tw-card { flex: 0 0 auto; } .tw-relation-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; } .tw-relation-header h4 { font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-semibold); margin: 0; } .tw-relation-list { display: flex; flex-direction: column; gap: 2px; } .tw-relation-item { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: var(--tw-radius-sm); font-size: var(--tw-font-size-md); color: var(--tw-font-primary); } .tw-relation-item:hover { background-color: var(--tw-bg-transparent-light); } /* --- Panel derecho (tabs) --- */ .tw-record-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background-color: var(--tw-bg-primary); } /* La barra de pestañas se define una sola vez, junto a .nav-tabs. Aquí sólo lo específico de la vista de registro. */ .tw-record-tabs { flex: 0 0 auto; padding: 0 12px; } .tw-record-tabs .nav-item { flex: 0 0 auto; } /* ── Pestañas con las vistas al lado ───────────────────────────────────── Las pestañas cambian de pantalla; el segmentado de la derecha cambia cómo se mira ésta —las vistas de la torre, el recorrido y el panorama de Seguimiento—. Van en el mismo renglón y con dos formas distintas para que no se lean como dos filas de lo mismo, y dentro de la tarjeta porque son de lo que hay dentro de ella, no de la página. Cada mitad lleva su borde de abajo y las dos se estiran al mismo alto: así la línea sale corrida y el subrayado de la pestaña activa sigue cayendo encima. Si no caben, las vistas bajan a su propio renglón y lo llenan. */ .tw-tabs-bar { display: flex; flex-wrap: wrap; align-items: stretch; flex: 0 0 auto; min-width: 0; } .tw-tabs-bar > .tw-record-tabs { flex: 999 1 auto; min-width: 0; } .tw-tabs-bar-end { flex: 1 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; /* Sin relleno vertical: con él esta mitad pasaba de los 38 px de las pestañas, estiraba la barra y el subrayado quedaba flotando tres píxeles sobre la línea. El alto lo ponen las pestañas. */ padding: 0 12px; border-bottom: 1px solid var(--tw-border-light); } /* Cuando la pestaña contiene una tabla, ocupa el alto restante en lugar de scrollear con padding como el contenido de texto. */ .tw-record-main > .tab-content { flex: 1 1 auto; min-height: 0; } /* La pantalla de listado con pestañas: la tarjeta manda el alto y quien se desplaza es la lista de dentro. Como elemento flex, `.tw-record-main` nace con `min-height: auto` y se estira con su contenido; la tarjeta recorta con `overflow: hidden`, así que una lista larga se cortaba por abajo **sin barra de desplazamiento**: no había forma de llegar al último renglón. Es la misma trampa que documenta `.page-wrapper` más arriba, un nivel más adentro. Va acotado a las que cuelgan de una tarjeta para no tocar la ficha de registro, donde el desplazamiento es de la página. */ .tw-panel > .tw-record-main { min-height: 0; } .tw-record-main > .tab-content > .tab-pane.active { height: 100%; } /* El contenido de una pestaña de texto, **acotado de verdad**. * * `.tw-record-content` promete desplazarse —trae `overflow-y: auto`— pero sus * `flex` no aplican: cuelga de un `.tab-pane`, que es block. Sin alto propio * crecía con su contenido, la tarjeta recortaba con `overflow: hidden` y una * pestaña larga —el checklist de doce puntos por renglón— se cortaba por abajo * **sin barra**: no había forma de llegar a Bloquear. El alto del pane es el * límite que le faltaba. En un teléfono no aplica: la regla del bloque * responsive lo devuelve a `height: auto` y quien desplaza es la página. */ .tw-record-main > .tab-content > .tab-pane.active > .tw-record-content { height: 100%; } /* Listado cuyas filas abren un registro: el cursor lo dice antes de pulsar. La clase la pone `filaAbre()` sobre la tabla que de verdad engancha el clic, no la vista: escrita a mano se desincronizaba —Embarques prometía el cursor y no abría nada— y hay tablas de solo lectura con el mismo aspecto. */ .tw-rows-link tbody > tr, /* Y su equivalente en las tablas escritas a mano, que declaran el destino en el propio renglón. Aquí el atributo es a la vez la conducta y el cursor: no hay forma de que uno exista sin el otro. */ tr[data-abre] { cursor: pointer; } /* Columna que es sólo control (marcar, botonera): ahí la fila no abre, y el cursor tiene que dejar de prometerlo. */ .tw-rows-link tbody > tr > td.tw-cell-control, tr[data-abre] > td.tw-cell-control { cursor: default; } /* Una fila que abre se separa del resto al apuntarla, aunque su tabla no lleve `.table-hover`: es la mitad de la promesa que hace el cursor. */ tr[data-abre]:hover > td { background-color: var(--tw-bg-transparent-light); } /* Celda de identidad: la columna que dice qué registro es la fila. Va en negrita y con el color del texto —no en azul de enlace— porque el destino ya lo anuncia la fila entera; el subrayado aparece al apuntar, que es cuando la pregunta «¿esto es pulsable?» se hace. Las referencias a otro registro son `.tw-chip`, y que se lean distinto es lo que evita confundir «esto es la fila» con «esto lleva a otra parte». */ .tw-record-link { font-weight: 600; color: var(--tw-font-primary); text-decoration: none; } .tw-record-link:hover { color: var(--tw-font-primary); text-decoration: underline; } .tw-record-link:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; border-radius: var(--tw-radius-sm); } /* Pestaña cuyo contenido es una tabla: se apila en columna para que el cuerpo scrolleable ocupe el alto restante, en lugar de scrollear la pestaña entera. Va con `.active` a propósito: `display: flex` suelto vencería al `display: none` de Bootstrap y enseñaría las pestañas inactivas. */ .tw-record-main > .tab-content > .tab-pane.tw-pane-fill.active { display: flex; flex-direction: column; } .tw-record-content { /* El relleno lateral, con nombre: la tabla que va de orilla a orilla lo descuenta con un margen negativo y tiene que ser el mismo número. */ --tw-record-content-gutter: 24px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px var(--tw-record-content-gutter) 32px; } /* ── La tabla llega al filo del panel ──────────────────────────────────────── Una tabla no lleva margen lateral en ninguna otra pantalla: en los listados ocupa el ancho entero de la tarjeta y la primera columna arranca en el filo. Dentro de una ficha se quedaba metida 24 px por cada lado —el relleno del contenido— y con eso se veía despegada del panel y perdía 48 px de los pocos que tiene. Los descuenta con un margen negativo: el título y el texto siguen con su sangría y la tabla, no. Vale para las dos cajas que envuelven una tabla: la de aquí —`.tw-table-scroll`— y la `.table-responsive` de Bootstrap, que es la que usan las pestañas escritas antes. Sólo como hijas directas: una tabla dentro de una tarjeta lleva el relleno de la tarjeta y ahí sí lo quiere. */ .tw-record-content > :is(.tw-table-scroll, .table-responsive), .tw-record-content > .tab-content > .tab-pane > :is(.tw-table-scroll, .table-responsive) { margin-inline: calc(var(--tw-record-content-gutter) * -1); } .tw-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 64px 16px; color: var(--tw-font-light); font-size: var(--tw-font-size-md); text-align: center; } .tw-empty-state .ti { font-size: 1.5rem !important; color: var(--tw-font-extra-light); } /* El icono grande es el del estado vacío, no el de sus botones: un «Ver la bitácora» dentro del vacío salía con el icono a 1.5rem, el doble que en cualquier otro botón. Dentro de un botón manda la escala de botones. */ .tw-empty-state .btn .ti { font-size: 0.875rem !important; color: inherit; } /* Estado vacío con explicación: título de la sección que falta y una línea que dice qué hacer mientras tanto. Un "Próximamente" suelto no bastaba — no aclaraba si la función faltaba o si algo había fallado. */ .tw-empty-state-title { font-size: var(--tw-font-size-lg); font-weight: var(--tw-weight-semibold); color: var(--tw-font-secondary); } .tw-empty-state-text { max-width: 420px; line-height: 1.5; } .tw-empty-state-hint { max-width: 420px; line-height: 1.5; color: var(--tw-font-tertiary); } .tw-empty-state-hint strong { font-weight: var(--tw-weight-medium); color: var(--tw-font-secondary); } /* Tarjeta compacta reutilizable dentro del panel derecho */ .tw-card { border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-md); background-color: var(--tw-bg-primary); overflow: hidden; } .tw-card + .tw-card { margin-top: 8px; } /** * …salvo cuando las coloca una rejilla. * * El margen de arriba está pensado para tarjetas **apiladas en una * columna**, donde separa una de la siguiente. Dentro de una rejilla el * hueco ya lo pone `gap`, y el margen de hermano adyacente sigue * aplicándose igual: baja 8 px **todas las tarjetas menos la primera**, así * que en el tablero la de la derecha arrancaba ocho píxeles por debajo de * la de su izquierda y las cabeceras no cuadraban. * * Es un desajuste pequeño y constante, del tipo que se mira diez veces sin * saber qué es. */ .tw-dash-grid > .tw-card + .tw-card, .tw-card-grid > .tw-card + .tw-card, .tw-links-grid > .tw-card + .tw-card, .tw-docs-grid > .tw-card + .tw-card { margin-top: 0; } .tw-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; min-height: 40px; } .tw-card-header h5 { font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-medium); margin: 0; } /* Un título de tarjeta que además lleva icono. El `h5` es un bloque, así que un `.ti` dentro se alinea por la línea base y con `line-height: 1` —que es lo que trae la fuente de iconos— sube un par de píxeles sobre el texto y se lee torcido. En fila y centrado se sienta a la altura de la palabra, y el icono se acota al tamaño de icono en vez de heredar el del título, que lo dejaba más grande que la letra que acompaña. Va con `:has()` y no con una clase aparte: un título con icono ya se distingue por llevarlo, y una clase que hay que acordarse de poner es una clase que el siguiente título se olvida. */ .tw-card-header h5:has(> .ti) { display: inline-flex; align-items: center; gap: 6px; } .tw-card-header h5 > .ti { flex: 0 0 auto; font-size: var(--tw-icon-size) !important; line-height: 1; color: var(--tw-font-light); } .tw-card-body { border-top: 1px solid var(--tw-border-light); padding: 12px; } .tw-meta { font-size: var(--tw-font-size-sm); color: var(--tw-font-light); } /* Rejilla de miniaturas (imágenes de pieza / revisión) */ .tw-thumb-grid { display: flex; flex-wrap: wrap; gap: 8px; } .tw-thumb { position: relative; width: 72px; height: 72px; border-radius: var(--tw-radius-md); border: 1px solid var(--tw-border-light); background-color: var(--tw-bg-tertiary); background-size: cover; background-position: center; overflow: hidden; } .tw-thumb-add { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--tw-radius-md); border: 1px dashed var(--tw-border-strong); background-color: var(--tw-bg-secondary); color: var(--tw-font-tertiary); cursor: pointer; } .tw-thumb-add:hover { border-color: var(--tw-accent); color: var(--tw-accent); background-color: var(--tw-accent-tertiary); } .tw-thumb .tw-thumb-remove { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; min-height: 20px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--tw-radius-sm); background-color: var(--tw-bg-primary); color: var(--tw-tag-red-fg); opacity: 0; transition: opacity 0.1s ease; cursor: pointer; } .tw-thumb:hover .tw-thumb-remove { opacity: 1; } .tw-thumb .tw-thumb-remove .ti { font-size: 0.875rem !important; } /* Lista de archivos */ .tw-file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-sm); font-size: var(--tw-font-size-md); } .tw-file-row + .tw-file-row { margin-top: 4px; } .tw-file-row:hover { background-color: var(--tw-bg-transparent-lighter); } .tw-file-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tw-file-name .ti { color: var(--tw-font-tertiary); flex: 0 0 auto; } /* Timeline */ .tw-timeline { display: flex; flex-direction: column; gap: 0; position: relative; } .tw-timeline-item { display: flex; gap: 12px; padding-bottom: 16px; position: relative; } .tw-timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 1px; background-color: var(--tw-border-medium); } .tw-timeline-icon { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--tw-radius-pill); background-color: var(--tw-bg-tertiary); color: var(--tw-font-tertiary); z-index: 1; } .tw-timeline-icon .ti { font-size: 0.875rem !important; } .tw-timeline-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--tw-font-size-md); color: var(--tw-font-secondary); padding-top: 2px; } .tw-timeline-body strong { color: var(--tw-font-primary); font-weight: var(--tw-weight-medium); } /* --- Bitácora con una acción por renglón --------------------------------- EL CASO QUE ESTO ARREGLA. La bitácora de Inicio pone la frase y la hora en la misma línea, repartidas con `space-between`, y eso funciona mientras el renglón sea sólo texto. Al añadirle un botón —«Ver desglose», que abre los códigos de una tanda de impresión— las tres cosas se pelearon por los 381 px de la tarjeta: el botón pedía 92 y se quedaba con 63, o sea recortado a «Ver desglo…», y la hora se partía en dos renglones —«hace 2» / «h»—. Peor que feo: **nada quedaba en columna**. La hora vive dentro del cuerpo, y el cuerpo mide distinto según el renglón lleve botón o no, así que las horas acababan en tres posiciones distintas y los botones en cinco anchos. LO QUE HACE. La hora baja debajo de la frase —que es como se lee un renglón en el resto de este tablero, ver `tw-dash-row`— y la acción se queda sola en su columna, sin encoger. Con un único texto en todos los botones, la columna es la misma en todos los renglones y se alinean sin fijar ningún ancho. Va como modificador y no en `.tw-timeline` a secas porque las otras dos bitácoras —el recorrido del contenedor y el pasaporte de la pieza— no llevan acción y ahí la hora al lado de la frase se lee mejor. */ .tw-timeline--actions .tw-timeline-body { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; } /* La hora, ya como segundo renglón. En una línea: «hace 2 h» partido es una cifra sin su unidad encima de la unidad sin su cifra. */ .tw-timeline--actions .tw-timeline-body .tw-meta { white-space: nowrap; } /* La acción no encoge y no parte su rótulo: es lo que la dejaba en «Ver desglo…». Centrada contra las dos líneas del cuerpo, que es donde el ojo la busca. */ .tw-timeline-action { flex: 0 0 auto; align-self: center; } /* ===================================================================== 13. Componentes del design system aún no usados en la app. Están listos para las pantallas de tareas y tableros que vienen después. ===================================================================== */ /* --- Etiqueta de estado (columna de tablero, campo de selección) --- */ .tw-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--tw-radius-pill); font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-medium); line-height: 18px; white-space: nowrap; background-color: var(--tw-tag-gray-bg); color: var(--tw-tag-gray-fg); } /* El distintivo ya centra por `align-items`, pero el icono heredaba el tamaño del texto del distintivo y salía del alto de la píldora. El de dentro de un chip es el chico, igual que en los botones. El color no se toca: un icono de aviso tiene que ir del color del aviso. */ .tw-tag > .ti { flex: 0 0 auto; font-size: var(--tw-icon-size-sm) !important; line-height: 1; } /* El distintivo que se pulsa · abre el desglose de lo que dice. Es un botón de verdad —se llega con el tabulador y se dispara con Intro— y no un enlace falso: no lleva a otra pantalla, abre un diálogo encima de ésta. Lo único que necesita del navegador es que no le pinte su borde ni su fondo. */ button.tw-tag { border: 0; cursor: pointer; font-family: inherit; appearance: none; } button.tw-tag:hover { filter: brightness(1.08); } .tw-tag--green { background-color: var(--tw-tag-green-bg); color: var(--tw-tag-green-fg); } .tw-tag--turquoise { background-color: var(--tw-tag-turquoise-bg); color: var(--tw-tag-turquoise-fg); } .tw-tag--sky { background-color: var(--tw-tag-sky-bg); color: var(--tw-tag-sky-fg); } .tw-tag--blue { background-color: var(--tw-tag-blue-bg); color: var(--tw-tag-blue-fg); } .tw-tag--purple { background-color: var(--tw-tag-purple-bg); color: var(--tw-tag-purple-fg); } .tw-tag--pink { background-color: var(--tw-tag-pink-bg); color: var(--tw-tag-pink-fg); } .tw-tag--red { background-color: var(--tw-tag-red-bg); color: var(--tw-tag-red-fg); } .tw-tag--orange { background-color: var(--tw-tag-orange-bg); color: var(--tw-tag-orange-fg); } .tw-tag--yellow { background-color: var(--tw-tag-yellow-bg); color: var(--tw-tag-yellow-fg); } /* --- Barra de vista: nombre de la vista, conteo y acciones --- */ .tw-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px; border-bottom: 1px solid var(--tw-border-light); flex: 0 0 auto; } .tw-view-name { display: flex; align-items: center; gap: 6px; font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-medium); color: var(--tw-font-primary); } .tw-view-name .tw-count-badge { color: var(--tw-font-light); font-weight: var(--tw-weight-regular); } .tw-view-actions { display: flex; align-items: center; gap: 4px; } /* --- Alcance por revisión --- La barra de las tres recetas del número de parte: insumos, componentes y ruta. Elige de qué revisión se está hablando, y con eso la pantalla enseña una sola lista —la que aplica— en vez de apilar la base y las excepciones. Es una pestaña más pequeña que `.tw-record-tabs` a propósito: vive dentro de un panel que ya tiene sus pestañas arriba, y tienen que leerse como dos niveles distintos. El punto marca la revisión que tiene la suya. */ /* `flex-end` y no `center`: el subrayado de la pestaña activa es su borde inferior, y tiene que caer sobre el borde de la barra. Centrado, el botón —más alto que las pestañas— las levantaba y el subrayado quedaba flotando. El `min-height` evita que la barra dé un salto al aparecer ese botón. */ .tw-scope { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-height: 38px; margin-bottom: 12px; border-bottom: 1px solid var(--tw-border-light); } .tw-scope-tabs { display: flex; align-items: stretch; gap: var(--tw-tab-gap); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .tw-scope-tabs::-webkit-scrollbar { display: none; } .tw-scope-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 4px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background-color: transparent; font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-medium); color: var(--tw-font-tertiary); white-space: nowrap; flex: 0 0 auto; transition: color var(--tw-transition); } .tw-scope-tab:hover { color: var(--tw-font-primary); border-bottom-color: var(--tw-border-strong); } .tw-scope-tab.is-active { color: var(--tw-font-primary); border-bottom-color: var(--tw-gray-90); } .tw-scope-dot { width: 5px; height: 5px; border-radius: var(--tw-radius-pill); background-color: var(--tw-font-light); flex: 0 0 auto; } .tw-scope-tab.is-active .tw-scope-dot { background-color: var(--tw-gray-90); } .tw-scope-actions { display: flex; align-items: center; gap: 4px; padding-bottom: 4px; } /* La fila que se está viendo prestada: es de la base, se enseña porque esta revisión la hereda, y por eso no trae controles. El trazo discontinuo dice que no vive aquí sin tener que escribirlo debajo de cada renglón. */ .tw-card.is-inherited { background-color: var(--tw-bg-transparent-lighter); border-style: dashed; } .tw-card.is-inherited .tw-card-body { color: var(--tw-font-secondary); } /* El renglón del selector que no se puede marcar: la placa sin etiqueta, y —con el cupo del programa lleno— todas las que no alcanzaron lugar. Se apaga entero, no sólo la casilla: una casilla gris junto a un renglón vivo se lee como un fallo de la pantalla, no como un estado de la placa. */ .tw-pick-row.is-off, .tw-pick-group.is-off { opacity: 0.5; } .tw-pick-row.is-off:hover, .tw-pick-group.is-off:hover { background-color: transparent; } /* --- Por dónde pasa: la ruta dibujada como recorrido ------------------- Los extremos no se capturan. Toda pieza sale de Almacén y acaba en Empaque —eso es la nave, no la ruta del número de parte—, así que se dibujan siempre y sin controles: con ellos delante, lo capturado se lee como un recorrido completo y el hueco que falta se ve dónde va. Y por eso los extremos no llevan número: el número cuenta pasos de la ruta, que es lo único que aquí se decide. Numerar las dos paradas fijas correría toda la cuenta y prometería que se pueden mover. La línea de la izquierda es la que convierte la lista en recorrido. Va por la columna de las marcas, se sale del hueco entre filas para tocar a la vecina y se recorta antes del primer hito y después del último, para que el recorrido empiece y acabe en una parada y no en el aire. Es la idea de `.st-chain` del kiosco, escrita aparte porque aquí las filas son tarjetas. */ .tw-ruta { --tw-ruta-hueco: 8px; display: flex; flex-direction: column; gap: var(--tw-ruta-hueco); } .tw-ruta-fila { display: flex; align-items: stretch; gap: 8px; } /* La tarjeta del paso ocupa lo que quede. `min-width: 0` para que una nota larga se recorte dentro en vez de empujar la columna de las marcas. */ .tw-ruta-fila > .tw-card { flex: 1 1 auto; min-width: 0; } /* La columna de las marcas. Ancho fijo: así el número, el hito y la línea caen siempre en el mismo eje, lleve la fila asidero de arrastre o no. */ .tw-ruta-marca { position: relative; flex: 0 0 auto; width: 28px; display: flex; align-items: center; justify-content: center; } .tw-ruta-marca::before { content: ''; position: absolute; left: 50%; top: calc(var(--tw-ruta-hueco) * -1); bottom: calc(var(--tw-ruta-hueco) * -1); width: 1px; margin-left: -0.5px; background-color: var(--tw-border-strong); } .tw-ruta > :first-child .tw-ruta-marca::before { top: 50%; } .tw-ruta > :last-child .tw-ruta-marca::before { bottom: 50%; } /* El número del paso. El fondo es el de la tarjeta a propósito: tapa la línea que lo cruza, que si no le sale por arriba y por abajo. */ .tw-ruta-num { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--tw-border-strong); border-radius: var(--tw-radius-pill); background-color: var(--tw-bg-primary); font-size: var(--tw-font-size-sm); font-weight: var(--tw-weight-semibold); font-variant-numeric: tabular-nums; color: var(--tw-font-secondary); } /* El paso que todavía no existe: el círculo vacío del hueco. */ .tw-ruta-num--hueco { border-style: dashed; } /* Una parada fija. Disco lleno y con icono, no círculo con número: se distingue de un paso antes de leer nada. */ .tw-ruta-hito { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--tw-radius-pill); background-color: var(--tw-bg-quaternary); color: var(--tw-font-secondary); } /* El icono se dice aquí y no en el disco: el tamaño de `.ti` lo fija la fuente de iconos y sólo se le gana desde el propio icono, como en los demás discos del sistema. Vive dentro de sus 24 px con aire alrededor —lleno de lado a lado parecía un botón—. */ .tw-ruta-hito .ti { font-size: 0.875rem !important; } /* Sin tarjeta: una parada fija no es un registro que se pueda abrir ni editar, y darle el mismo marco que a los pasos invitaba a pulsarla. */ .tw-ruta-extremo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 32px; padding: 4px 0; font-size: var(--tw-font-size-md); } .tw-ruta-extremo-nombre { font-weight: var(--tw-weight-medium); color: var(--tw-font-secondary); } .tw-ruta-extremo-nota { color: var(--tw-font-light); } /* Cuando lo que dice la parada es que algo no cuadra —ningún paso recoge el material que sale de aquí—. Naranja y no rojo: la ruta se puede seguir capturando, lo que no se puede es cerrarla así. */ .tw-ruta-extremo-nota--aviso { color: var(--tw-tag-orange-fg); } /* Lo que falta, del tamaño de lo que falta: el trazo discontinuo dice que ahí va algo que todavía no se capturó. */ .tw-ruta-hueco { flex: 1 1 auto; min-width: 0; padding: 20px 16px; border: 1px dashed var(--tw-border-strong); border-radius: var(--tw-radius-md); background-color: var(--tw-bg-transparent-lighter); } .tw-ruta-hueco-titulo { font-weight: var(--tw-weight-medium); color: var(--tw-font-secondary); } /* El paso prestado de la base: el mismo trazo discontinuo que su tarjeta. */ .tw-ruta-fila.is-inherited .tw-ruta-num { border-style: dashed; color: var(--tw-font-light); } /* --- Casilla de selección --- */ .tw-checkbox { appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--tw-border-strong); border-radius: var(--tw-radius-sm); background-color: var(--tw-bg-primary); cursor: pointer; position: relative; transition: background-color var(--tw-transition), border-color var(--tw-transition); } .tw-checkbox:hover { border-color: var(--tw-gray-50); } .tw-checkbox:checked { background-color: var(--tw-accent); border-color: var(--tw-accent); } .tw-checkbox:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .tw-checkbox--round { border-radius: var(--tw-radius-pill); } /* --- Celda o campo sin valor --- */ .tw-empty-value { color: var(--tw-font-extra-light); } /* --- Chip de registro con avatar (relación) --- */ .tw-chip-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 16px; height: 16px; border-radius: var(--tw-radius-xs); background-color: var(--tw-bg-quaternary); color: var(--tw-font-secondary); font-size: var(--tw-font-size-xxs); font-weight: var(--tw-weight-semibold); overflow: hidden; } /* --- Tablero kanban --- */ .tw-board { display: flex; gap: 0; height: 100%; min-height: 0; overflow-x: auto; overflow-y: hidden; } .tw-board-column { display: flex; flex-direction: column; flex: 0 0 var(--tw-kanban-column-width); width: var(--tw-kanban-column-width); min-height: 0; padding: 12px; border-right: 1px solid var(--tw-border-light); } .tw-board-column-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; flex: 0 0 auto; } .tw-board-column-header .tw-board-column-count { color: var(--tw-font-light); font-size: var(--tw-font-size-md); } .tw-board-column-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .tw-board-card { border: 1px solid var(--tw-border-light); border-radius: var(--tw-radius-md); background-color: var(--tw-bg-primary); padding: 8px; cursor: pointer; transition: border-color var(--tw-transition), box-shadow var(--tw-transition); } .tw-board-card:hover { border-color: var(--tw-border-strong); box-shadow: var(--tw-shadow-light); } .tw-board-card-title { display: flex; align-items: center; gap: 6px; font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-semibold); color: var(--tw-font-primary); padding-bottom: 6px; } .tw-board-card-row { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: var(--tw-font-size-md); color: var(--tw-font-primary); } .tw-board-card-row .ti { font-size: var(--tw-icon-size) !important; color: var(--tw-font-light); flex: 0 0 auto; } .tw-board-new { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 4px; margin-top: 8px; border: 0; border-radius: var(--tw-radius-sm); background: none; color: var(--tw-font-light); font-size: var(--tw-font-size-md); cursor: pointer; } .tw-board-new:hover { background-color: var(--tw-bg-transparent-light); color: var(--tw-font-primary); } /* --- Lista de tareas agrupada por estado --- */ .tw-task-group + .tw-task-group { margin-top: 24px; } .tw-task-group-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 8px; } .tw-task-group-title { display: flex; align-items: center; gap: 8px; font-size: var(--tw-font-size-sm); font-weight: var(--tw-weight-semibold); letter-spacing: 0.02em; text-transform: uppercase; color: var(--tw-font-secondary); } .tw-task-group-title .tw-count-badge { font-weight: var(--tw-weight-regular); color: var(--tw-font-light); text-transform: none; letter-spacing: 0; } .tw-task-row { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 8px; border-bottom: 1px solid var(--tw-border-light); cursor: pointer; } .tw-task-row:hover { background-color: var(--tw-bg-transparent-lighter); } .tw-task-title { font-size: var(--tw-font-size-md); font-weight: var(--tw-weight-medium); color: var(--tw-font-primary); white-space: nowrap; } .tw-task-body { flex: 1 1 auto; min-width: 0; font-size: var(--tw-font-size-md); color: var(--tw-font-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tw-task-meta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; font-size: var(--tw-font-size-md); color: var(--tw-font-secondary); } .tw-task-meta .ti { font-size: var(--tw-icon-size) !important; color: var(--tw-font-light); } .tw-task-row.is-done .tw-task-title { text-decoration: line-through; color: var(--tw-font-tertiary); } /* Fecha vencida */ .tw-due--overdue, .tw-due--overdue .ti { color: var(--tw-tag-red-fg) !important; } /* --- Pie de tabla con agregados ("Count all", "Max of...") --- */ .tw-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; padding: 0 8px; border-top: 1px solid var(--tw-border-light); background-color: var(--tw-bg-primary); font-size: var(--tw-font-size-sm); color: var(--tw-font-tertiary); flex: 0 0 auto; } /* Se envuelve: la tarjeta recorta lo que sobresale (`overflow: hidden`), así que tres cifras en una tarjeta angosta perdían la última sin avisar. */ .tw-agg-list { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; } .tw-agg { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: var(--tw-radius-sm); white-space: nowrap; } .tw-agg:hover { background-color: var(--tw-bg-transparent-light); } /* Cuando la cifra lleva a algún sitio. Sin subrayado: ya se distingue por el fondo del hover que la clase trae de serie, y una fila de agregados con dos subrayadas y tres no parece un error de maquetación. */ a.tw-agg { color: inherit; text-decoration: none; } .tw-agg-label { color: var(--tw-font-light); } .tw-agg-value { color: var(--tw-font-primary); font-weight: var(--tw-weight-medium); } /* Responsive: el panel de campos pasa arriba en pantallas chicas */ @media (max-width: 991.98px) { .tw-page { height: auto; min-height: 100dvh; overflow: visible; } /** * `.tw-panel.tw-record` y no `.tw-record` a secas. * * Esta regla llevaba tiempo escrita y **no hacía nada**: la ficha usa * las dos clases y `.tw-panel.tw-record { flex-direction: row }` gana * por especificidad, así que en un teléfono el panel de campos se * quedaba con todo el ancho y la columna de pestañas medía **cero * píxeles**. La pantalla se veía «bien» —no desbordaba— y la mitad * derecha sencillamente no estaba. */ .tw-panel.tw-record { flex-direction: column; } .tw-record-panel { width: 100%; flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--tw-border-light); overflow: visible; } /* ── Plegada en un teléfono: el riel se acuesta ─────────────────── * * Apilada, el panel no es una columna a la izquierda sino una franja * arriba, así que su riel tampoco puede ser un lomo de 44 px: se pone * de canto a canto y se lee de corrido, con el icono del registro * delante. Se toca y la ficha se abre. * * Y aquí no hay ojeada. Asomarse es un gesto de ratón —se entra, se * lee, se sale— y en una pantalla táctil el equivalente sería un panel * de setecientos píxeles tapando el contenido hasta tocar en otro * sitio. El riel abre la ficha y ya está. */ html[data-ficha='plegada'] .tw-record > .tw-ficha-riel { flex: 0 0 auto; width: 100%; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--tw-border-light); } .tw-ficha-riel__texto { writing-mode: horizontal-tb; transform: none; } .tw-ficha-riel__galon { margin-top: 0; margin-left: auto; /* De canto abre a la derecha y acostado abre hacia abajo: el mismo icono, girado, dice por dónde va a salir el panel. */ transform: rotate(90deg); } html[data-ficha='plegada'] .tw-record > .tw-record-panel:not([data-ficha-fija]) { display: none; } /* ── La cadena de alturas se suelta hasta el final ──────────────── * * `.tw-page` ya dejaba de medir una pantalla exacta aquí arriba, pero * la cadena seguía apretada tres niveles más abajo. Con la ficha en * columna, al panel de campos le tocaba su alto natural —es * `flex: 0 0 auto`— y a la columna de contenido lo que sobrara de la * pantalla: **ocho píxeles**. La cadena de eslabones, los enlaces de * identidad y la línea de tiempo se dibujaban encima de los campos. * En la colada era peor —el contenido cuelga directo de la tarjeta, * que recorta con `overflow: hidden`— y las tres tablas quedaban * **fuera de alcance**: recortadas y sin barra, no había forma de * llegar a ellas. * * Lo que hay que soltar es el reparto, no sólo el recorte. Quien * desplaza en un teléfono es `.page-wrapper`, que ya trae * `overflow: auto`; lo que le impedía tener nada que desplazar era * que sus hijos se estiran y se **encogen** con la pantalla * (`flex: 1 1 auto`). Con `flex: 1 0 auto` siguen llenando una * pantalla corta y dejan de encogerse por debajo de su contenido: * miden lo que miden y el sobrante se desplaza. */ .page-wrapper > *, .tw-panel, .tw-record-main { flex: 1 0 auto; } .tw-screen { height: auto; min-height: 0; overflow: visible; } .tw-panel { overflow: visible; } /* El cuerpo de una tarjeta **de contenido**, que es el que lleva la * utilidad `overflow-auto` escrita en la plantilla. El cuerpo pelado * —el que envuelve una tabla de DataTables— sigue recortando: es el * límite que mide `adjustScrollY`, y sin él la tabla pierde su alto. * * `!important` porque compite con `.overflow-auto` de Bootstrap, que * lo lleva puesto. Es justo lo que hacía que la regla de aquí abajo * llevara tiempo escrita sin surtir efecto. */ .tw-panel-body.overflow-auto, .tw-record-content { height: auto; overflow: visible !important; } .tw-record-main > .tab-content { min-height: 0; overflow: visible; } /* Los campos dejan de tener desplazamiento propio: dentro de una * página que ya se desplaza, un segundo desplazamiento de dos dedos * es una trampa. Miden lo que miden. */ .tw-record-fields { flex: 0 0 auto; overflow: visible; } } /* ── La excepción: el listado con tabla, en una tablet ──────────────── * * Un cuerpo de tarjeta **pelado** —sin la utilidad `overflow-auto`— es por * definición «aquí va una tabla, y este cuerpo es quien recorta»: es el * límite que mide `adjustScrollY` para darle su alto. Soltarle la cadena * de alturas lo deja medir lo que mida la tabla, y entonces se desplazan * las dos cosas —la página y la tabla dentro— que es el desplazamiento * doble que hace sentir roto un listado. * * Por debajo de 768 px no aplica: ahí la tabla se parte en tarjetas, el * cuerpo scrolleable de DataTables se suelta y lo que fluye es la página, * que es lo correcto. Así que la excepción vive sólo en la franja de la * tablet, donde la tabla sigue siendo una tabla. */ @media (min-width: 768px) and (max-width: 991.98px) { .tw-screen:has(> .tw-panel > .tw-panel-body:not(.overflow-auto)) { height: 100%; overflow: hidden; flex: 1 1 auto; } .tw-screen:has(> .tw-panel > .tw-panel-body:not(.overflow-auto)) > .tw-panel { flex: 1 1 auto; overflow: hidden; } } /* ── Primero la respuesta, después los campos ───────────────────────── * * En una ficha de registro el panel de campos va a la izquierda, y al * apilarse en un teléfono cae **encima** del contenido. En la mayoría de * las pantallas eso está bien: los campos *son* el registro. * * En las de consulta no. Quien abre el pasaporte de una pieza o el * recorrido de un contenedor en un teléfono viene con la etiqueta en la * mano y una pregunta concreta —¿por dónde pasó?, ¿qué le falta?—, y esa * respuesta vive en la columna de contenido. Con el panel delante hay que * pasar setecientos píxeles de fichas para llegar a ella. * * `display: contents` disuelve el `