/* ========================================================================== SBTR · sistema visual -------------------------------------------------------------------------- Capa de tema sobre AdminLTE 3 / Bootstrap 4. No cambia marcado ni clases: solo redefine la apariencia, de modo que las 96 vistas siguen intactas. El lenguaje visual sale del propio negocio: cámara de frío y bulbos. De ahí el acento teal frío y los neutros con sesgo verde-azulado, los mismos que usa la app móvil, para que ambas superficies se lean como un solo producto. Todo escala con clamp(): la interfaz es fluida de 320px a 4K sin saltos. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* --- superficies y tinta --- */ --sb-ground: #F4F7F7; --sb-surface: #FFFFFF; --sb-surface-2: #EDF2F2; --sb-surface-3: #E3EBEB; /* * El cliente pidio letras mas oscuras en todo el sistema, y tenia razon * medida: el gris de apoyo daba 4,07 de contraste sobre el fondo gris, por * debajo del 4,5 que pide la norma de accesibilidad, y es el color de las * cabeceras de tabla, las notas y las cifras secundarias — 33 sitios. * * Subiendo estos dos valores se oscurece el sistema entero sin tocar * ninguna pantalla. Contraste sobre fondo blanco / gris / gris-2: * * ink 17,1 15,9 15,2 (no se toco: ya estaba bien) * ink-2 12,3 11,5 10,9 (antes 9,5 8,8 8,4) * muted 6,7 6,2 5,9 (antes 4,6 4,3 4,1) */ --sb-ink: #0F1E20; --sb-ink-2: #24383A; --sb-muted: #4A6063; --sb-line: #DCE5E5; --sb-line-2: #C4D2D2; /* --- acento: frío de cámara --- */ --sb-accent: #0E6E7A; --sb-accent-h: #0B5A64; --sb-accent-soft: #E0EFF1; --sb-accent-ink: #08505A; --sb-accent-luz: #5FC8D4; /* acento legible sobre la tinta de la barra */ /* --- semánticos: estado, no decoración --- */ --sb-ok: #17714C; --sb-ok-soft: #E0F0E8; --sb-warn: #8A5D08; --sb-warn-soft: #FAEFD8; --sb-crit: #A2311C; --sb-crit-soft: #FAE5E1; --sb-info: #2B549C; --sb-info-soft: #E5EBF7; /* --- barra lateral --- */ --sb-nav: #0E1A1C; --sb-nav-2: #16262A; --sb-nav-ink: #C9D9D9; --sb-nav-ink-2: #7E9698; --sb-nav-line: #22383B; /* --- tipografía --- */ --sb-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sb-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace; /* escala fluida: se adapta al ancho sin media queries */ --sb-t-xs: clamp(0.688rem, 0.66rem + 0.14vw, 0.75rem); --sb-t-sm: clamp(0.781rem, 0.75rem + 0.16vw, 0.844rem); --sb-t-md: clamp(0.875rem, 0.84rem + 0.18vw, 0.938rem); --sb-t-lg: clamp(1rem, 0.96rem + 0.2vw, 1.063rem); --sb-t-xl: clamp(1.125rem, 1.06rem + 0.32vw, 1.313rem); --sb-t-2x: clamp(1.375rem, 1.25rem + 0.62vw, 1.75rem); /* --- espaciado fluido --- */ --sb-s1: clamp(0.25rem, 0.23rem + 0.1vw, 0.313rem); --sb-s2: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem); --sb-s3: clamp(0.75rem, 0.69rem + 0.3vw, 0.938rem); --sb-s4: clamp(1rem, 0.92rem + 0.4vw, 1.25rem); --sb-s5: clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem); /* --- forma y profundidad --- */ --sb-r-sm: 6px; --sb-r: 10px; --sb-r-lg: 14px; --sb-sh-1: 0 1px 2px rgba(15, 30, 32, .05), 0 1px 3px rgba(15, 30, 32, .04); --sb-sh-2: 0 2px 4px rgba(15, 30, 32, .05), 0 6px 16px rgba(15, 30, 32, .07); --sb-sh-3: 0 8px 20px rgba(15, 30, 32, .1), 0 20px 48px rgba(15, 30, 32, .12); --sb-ring: 0 0 0 3px rgba(14, 110, 122, .18); --sb-fast: 120ms cubic-bezier(.4, 0, .2, 1); --sb-base: 200ms cubic-bezier(.4, 0, .2, 1); } /* -------------------------------------------------------------------------- Alias de compatibilidad El tablero kanban, la fila de filtros y el selector de semana se escribieron con otros nombres de variable que nunca llegaron a declararse. Caian siempre al valor de reserva, que venia de otra paleta —gris azulado y verde #1b7f6b—, asi que dentro del mismo archivo convivian dos lenguajes visuales. Se declaran aqui apuntando a los tokens de verdad: esas pantallas quedan con la paleta del resto sin reescribir sus reglas una por una. -------------------------------------------------------------------------- */ :root { --sb-fondo: var(--sb-ground); --sb-fondo-2: var(--sb-surface-2); --sb-texto: var(--sb-ink); --sb-texto-2: var(--sb-muted); --sb-acento: var(--sb-accent); --sb-borde: var(--sb-line-2); --sb-linea: var(--sb-line); --sb-radio: var(--sb-r); --sb-radio-xs: var(--sb-r-sm); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ body, .wrapper { background: var(--sb-ground); color: var(--sb-ink); font-family: var(--sb-font); font-size: var(--sb-t-md); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* el cuerpo nunca se desplaza en horizontal: lo hacen los contenedores anchos */ html, body { overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.011em; color: var(--sb-ink); } h1 { font-size: var(--sb-t-2x); } h2 { font-size: var(--sb-t-xl); } h3 { font-size: var(--sb-t-lg); } h4, h5, h6 { font-size: var(--sb-t-md); } a { color: var(--sb-accent); text-decoration: none; transition: color var(--sb-fast); } a:hover, a:focus { color: var(--sb-accent-h); text-decoration: none; } :focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; border-radius: var(--sb-r-sm); } ::selection { background: var(--sb-accent-soft); color: var(--sb-accent-ink); } /* cifras alineadas en columna donde haya números */ .table td, .table th, input[type="number"], .text-right, .num { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 3. Barra lateral -------------------------------------------------------------------------- */ .main-sidebar, .sidebar-dark-primary { background: var(--sb-nav); } .brand-link { border-bottom: 1px solid var(--sb-nav-line) !important; padding: var(--sb-s3) var(--sb-s4); background: var(--sb-nav); } .brand-link .brand-text { font-weight: 600; font-size: var(--sb-t-lg); letter-spacing: -.01em; color: #F2F7F7 !important; } /* redondo, no cuadrado con esquinas: el logo es un sello circular */ .brand-image { border-radius: 50%; box-shadow: none; opacity: 1; max-height: 32px; margin-right: var(--sb-s2); } .sidebar { padding: var(--sb-s2) var(--sb-s2) var(--sb-s5); } /* El enlace es una fila, no una linea de texto: asi su alto lo fija el contenido y no la linea base del icono, y el menu desplegado queda con la misma densidad que el colapsado. */ .nav-sidebar .nav-link { display: flex; align-items: center; gap: .6rem; border-radius: var(--sb-r-sm); color: var(--sb-nav-ink); padding: .55rem .7rem; font-size: var(--sb-t-md); font-weight: 450; margin-bottom: 2px; transition: background var(--sb-fast), color var(--sb-fast); } .nav-sidebar .nav-link > .nav-icon { margin: 0; flex: none; } .nav-sidebar .nav-link > p { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; } /* la flecha del submenu y los contadores no se encogen */ .nav-sidebar .nav-link > p > .right, .nav-sidebar .nav-link > p > .badge { flex: none; } .nav-sidebar .nav-link p { overflow: hidden; text-overflow: ellipsis; } .nav-sidebar .nav-link .nav-icon { color: var(--sb-nav-ink-2); transition: color var(--sb-fast); width: 1.4rem; } .nav-sidebar .nav-link:hover { background: var(--sb-nav-2); color: #EAF3F3; } .nav-sidebar .nav-link:hover .nav-icon { color: var(--sb-nav-ink); } .nav-sidebar .nav-link.active, .nav-sidebar > .nav-item > .nav-link.active { background: var(--sb-accent) !important; color: #FFF !important; box-shadow: 0 2px 8px rgba(14, 110, 122, .35); } .nav-sidebar .nav-link.active .nav-icon { color: #FFF; } /* submenús: se leen como una rama, no como ítems sueltos */ .nav-treeview { margin: 2px 0 var(--sb-s2) .95rem; padding-left: .55rem; border-left: 1px solid var(--sb-nav-line); } .nav-treeview .nav-link { font-size: var(--sb-t-sm); padding: .42rem .6rem; } .nav-header { color: var(--sb-nav-ink-2); font-size: var(--sb-t-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: var(--sb-s4) .7rem var(--sb-s2); } /* -------------------------------------------------------------------------- 4. Barra superior -------------------------------------------------------------------------- */ .main-header.navbar { background: var(--sb-surface); border-bottom: 1px solid var(--sb-line) !important; box-shadow: var(--sb-sh-1); min-height: 56px; padding: 0 var(--sb-s3); } .main-header .nav-link { color: var(--sb-ink-2); font-size: var(--sb-t-md); border-radius: var(--sb-r-sm); transition: background var(--sb-fast); } .main-header .nav-link:hover { background: var(--sb-surface-2); color: var(--sb-ink); } .content-header { padding: var(--sb-s4) var(--sb-s4) var(--sb-s2); } .content-header h1 { font-size: var(--sb-t-xl); margin: 0; } .content-wrapper { background: var(--sb-ground); } .content { padding: 0 var(--sb-s4) var(--sb-s5); } .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: var(--sb-t-sm); } .breadcrumb-item + .breadcrumb-item::before { color: var(--sb-line-2); } /* -------------------------------------------------------------------------- 5. Tarjetas -------------------------------------------------------------------------- */ .card { background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: var(--sb-r-lg); box-shadow: var(--sb-sh-1); margin-bottom: var(--sb-s4); overflow: hidden; transition: box-shadow var(--sb-base); } .card:hover { box-shadow: var(--sb-sh-2); } /* la franja de color de AdminLTE se sustituye por jerarquía tipográfica */ .card.card-primary:not(.card-outline) > .card-header, .card.card-info:not(.card-outline) > .card-header, .card.card-success:not(.card-outline) > .card-header, .card.card-danger:not(.card-outline) > .card-header, .card.card-warning:not(.card-outline) > .card-header { background: var(--sb-surface); color: var(--sb-ink); border-bottom: 1px solid var(--sb-line); } .card-primary, .card-info, .card-success, .card-danger, .card-warning { border-top: 0; } .card-header { background: var(--sb-surface); border-bottom: 1px solid var(--sb-line); padding: var(--sb-s3) var(--sb-s4); display: flex; align-items: center; gap: var(--sb-s3); flex-wrap: wrap; min-height: 0; } .card-title { font-size: var(--sb-t-md); font-weight: 600; letter-spacing: -.005em; margin: 0; color: var(--sb-ink); display: flex; align-items: center; gap: .5rem; min-width: 0; } .card-title i, .card-title .fa { color: var(--sb-accent); font-size: .95em; } .card-tools { margin-left: auto; display: flex; align-items: center; gap: var(--sb-s2); flex-wrap: wrap; } .card-body { padding: var(--sb-s4); } .card-body.p-0 { padding: 0; } .card-footer { background: var(--sb-surface-2); border-top: 1px solid var(--sb-line); padding: var(--sb-s3) var(--sb-s4); } /* -------------------------------------------------------------------------- 6. Tablas — el corazón de un ERP -------------------------------------------------------------------------- */ .table { color: var(--sb-ink-2); font-size: var(--sb-t-sm); margin-bottom: 0; border-color: var(--sb-line); } .table thead th { background: var(--sb-surface-2); color: var(--sb-muted); font-size: var(--sb-t-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--sb-line-2) !important; border-top: 0 !important; padding: var(--sb-s3) var(--sb-s3); white-space: nowrap; vertical-align: middle; position: sticky; top: 0; z-index: 2; } .table tbody td { border-top: 1px solid var(--sb-line); padding: var(--sb-s3); vertical-align: middle; } .table tbody tr { transition: background var(--sb-fast); } .table-hover tbody tr:hover { background: var(--sb-accent-soft); } .table-striped tbody tr:nth-of-type(odd) { background: rgba(237, 242, 242, .55); } .table-striped.table-hover tbody tr:hover { background: var(--sb-accent-soft); } /* toda tabla ancha se desplaza dentro de su caja: la página nunca */ .table-responsive, .card-body.table-responsive, .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive::-webkit-scrollbar, .dataTables_wrapper::-webkit-scrollbar { height: 10px; } .table-responsive::-webkit-scrollbar-thumb, .dataTables_wrapper::-webkit-scrollbar-thumb { background: var(--sb-line-2); border-radius: 5px; } .table-responsive::-webkit-scrollbar-thumb:hover, .dataTables_wrapper::-webkit-scrollbar-thumb:hover { background: var(--sb-muted); } /* códigos, lotes y contenedores: monoespaciada para poder compararlos de un vistazo */ .table td code, .table td .mono, code { font-family: var(--sb-mono); font-size: .92em; } code { background: var(--sb-surface-2); color: var(--sb-accent-ink); padding: .12em .38em; border-radius: var(--sb-r-sm); } /* -------------------------------------------------------------------------- 7. Botones -------------------------------------------------------------------------- */ .btn { border-radius: var(--sb-r); font-size: var(--sb-t-sm); font-weight: 550; padding: .48rem .95rem; border: 1px solid transparent; transition: background var(--sb-fast), border-color var(--sb-fast), box-shadow var(--sb-fast), transform var(--sb-fast); display: inline-flex; align-items: center; gap: .45rem; line-height: 1.35; } .btn:active { transform: translateY(1px); } .btn:focus, .btn.focus { box-shadow: var(--sb-ring); } .btn-primary { background: var(--sb-accent); border-color: var(--sb-accent); color: #FFF; } .btn-primary:hover { background: var(--sb-accent-h); border-color: var(--sb-accent-h); color: #FFF; } /* btn-default es el más usado (99 apariciones): es la acción neutra */ .btn-default { background: var(--sb-surface); border-color: var(--sb-line-2); color: var(--sb-ink-2); } .btn-default:hover { background: var(--sb-surface-2); border-color: var(--sb-muted); color: var(--sb-ink); } .btn-secondary { background: var(--sb-surface-2); border-color: var(--sb-line-2); color: var(--sb-ink-2); } .btn-secondary:hover { background: var(--sb-surface-3); color: var(--sb-ink); } .btn-success { background: var(--sb-ok); border-color: var(--sb-ok); color: #FFF; } .btn-success:hover { filter: brightness(.92); color: #FFF; } .btn-danger { background: var(--sb-crit); border-color: var(--sb-crit); color: #FFF; } .btn-danger:hover { filter: brightness(.92); color: #FFF; } .btn-warning { background: var(--sb-warn); border-color: var(--sb-warn); color: #FFF; } .btn-warning:hover { filter: brightness(.92); color: #FFF; } .btn-info { background: var(--sb-info); border-color: var(--sb-info); color: #FFF; } .btn-info:hover { filter: brightness(.92); color: #FFF; } .btn-sm { font-size: var(--sb-t-xs); padding: .32rem .65rem; border-radius: var(--sb-r-sm); } .btn-lg { font-size: var(--sb-t-lg); padding: .7rem 1.3rem; } .btn-block { width: 100%; justify-content: center; } .btn:disabled, .btn.disabled { opacity: .5; } .btn-group > .btn { border-radius: 0; } .btn-group > .btn:first-child { border-top-left-radius: var(--sb-r); border-bottom-left-radius: var(--sb-r); } .btn-group > .btn:last-child { border-top-right-radius: var(--sb-r); border-bottom-right-radius: var(--sb-r); } /* -------------------------------------------------------------------------- 8. Formularios -------------------------------------------------------------------------- */ .form-group { margin-bottom: var(--sb-s3); min-width: 0; } .form-group > label, label { font-size: var(--sb-t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sb-muted); margin-bottom: .3rem; display: block; } .form-control, .custom-select, select.form-control { background: var(--sb-surface); border: 1px solid var(--sb-line-2); border-radius: var(--sb-r); color: var(--sb-ink); font-size: var(--sb-t-md); font-family: var(--sb-font); padding: .5rem .7rem; height: auto; min-height: 0; box-shadow: none; transition: border-color var(--sb-fast), box-shadow var(--sb-fast), background var(--sb-fast); width: 100%; max-width: 100%; } .form-control:focus { border-color: var(--sb-accent); box-shadow: var(--sb-ring); background: var(--sb-surface); } .form-control[readonly], .form-control:disabled { background: var(--sb-surface-2); color: var(--sb-muted); border-color: var(--sb-line); } .form-control.is-invalid, .is-invalid .form-control { border-color: var(--sb-crit); } textarea.form-control { min-height: 5.5rem; resize: vertical; } .form-control-sm { font-size: var(--sb-t-sm); padding: .35rem .55rem; } .input-group > .form-control { min-width: 0; } .input-group-text { background: var(--sb-surface-2); border-color: var(--sb-line-2); color: var(--sb-muted); font-size: var(--sb-t-sm); border-radius: var(--sb-r); } .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .input-group-append > .input-group-text, .input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .custom-file-label { border-radius: var(--sb-r); border-color: var(--sb-line-2); font-size: var(--sb-t-md); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--sb-muted); padding: .5rem .7rem; height: auto; } .custom-file-label::after { background: var(--sb-surface-2); color: var(--sb-ink-2); border-left-color: var(--sb-line-2); border-radius: 0 var(--sb-r) var(--sb-r) 0; height: auto; padding: .5rem .8rem; } .custom-file, .custom-file-input, .custom-file-label { height: auto; } /* -------------------------------------------------------------------------- 9. Avisos y estados -------------------------------------------------------------------------- */ .alert { border: 1px solid; border-radius: var(--sb-r); padding: var(--sb-s3) var(--sb-s4); font-size: var(--sb-t-sm); box-shadow: none; margin-bottom: var(--sb-s3); } .alert ul { margin: 0; padding-left: 1.1rem; } .alert-danger { background: var(--sb-crit-soft); border-color: var(--sb-crit); color: var(--sb-crit); } .alert-success { background: var(--sb-ok-soft); border-color: var(--sb-ok); color: var(--sb-ok); } .alert-warning { background: var(--sb-warn-soft); border-color: var(--sb-warn); color: var(--sb-warn); } .alert-info { background: var(--sb-info-soft); border-color: var(--sb-info); color: var(--sb-info); } .badge { font-size: var(--sb-t-xs); font-weight: 600; letter-spacing: .03em; padding: .32em .6em; border-radius: var(--sb-r-sm); } .badge-success, .badge-green { background: var(--sb-ok-soft); color: var(--sb-ok); } .badge-danger, .badge-red { background: var(--sb-crit-soft); color: var(--sb-crit); } .badge-warning, .badge-yellow { background: var(--sb-warn-soft); color: var(--sb-warn); } .badge-info, .badge-primary{ background: var(--sb-accent-soft); color: var(--sb-accent-ink); } .badge-secondary { background: var(--sb-surface-3); color: var(--sb-muted); } .text-danger { color: var(--sb-crit) !important; } .text-success { color: var(--sb-ok) !important; } .text-warning { color: var(--sb-warn) !important; } .text-info { color: var(--sb-info) !important; } .text-muted { color: var(--sb-muted) !important; } /* -------------------------------------------------------------------------- 10. Ventanas modales -------------------------------------------------------------------------- */ .modal-content { border: 0; border-radius: var(--sb-r-lg); box-shadow: var(--sb-sh-3); overflow: hidden; } .modal-header { background: var(--sb-surface); border-bottom: 1px solid var(--sb-line); padding: var(--sb-s3) var(--sb-s4); align-items: center; } .modal-title { font-size: var(--sb-t-lg); font-weight: 600; } .modal-body { padding: var(--sb-s4); } .modal-footer { background: var(--sb-surface-2); border-top: 1px solid var(--sb-line); padding: var(--sb-s3) var(--sb-s4); gap: var(--sb-s2); } .modal-backdrop.show { opacity: .5; background: #0F1E20; } .close { color: var(--sb-muted); opacity: 1; text-shadow: none; font-weight: 400; font-size: 1.6rem; } .close:hover { color: var(--sb-ink); } /* modales anchos: no desbordan en pantallas chicas */ .modal-dialog { max-width: min(96vw, var(--sb-modal-w, 500px)); margin: var(--sb-s4) auto; } .modal-lg, .modal-xl { --sb-modal-w: 1080px; } .modal .modal-body { max-height: calc(100vh - 11rem); overflow-y: auto; } /* -------------------------------------------------------------------------- 11. Menús desplegables -------------------------------------------------------------------------- */ .dropdown-menu { border: 1px solid var(--sb-line); border-radius: var(--sb-r); box-shadow: var(--sb-sh-2); padding: var(--sb-s1); font-size: var(--sb-t-sm); min-width: 12rem; } .dropdown-item { border-radius: var(--sb-r-sm); padding: .5rem .7rem; color: var(--sb-ink-2); display: flex; align-items: center; gap: .55rem; transition: background var(--sb-fast); } .dropdown-item:hover, .dropdown-item:focus { background: var(--sb-accent-soft); color: var(--sb-accent-ink); } .dropdown-item i, .dropdown-item .fa { width: 1.1rem; color: var(--sb-muted); } .dropdown-item:hover i { color: var(--sb-accent); } .dropdown-item.text-danger:hover { background: var(--sb-crit-soft); color: var(--sb-crit); } .dropdown-divider { border-color: var(--sb-line); margin: var(--sb-s1) 0; } /* -------------------------------------------------------------------------- 12. Paginación -------------------------------------------------------------------------- */ .pagination { gap: 3px; flex-wrap: wrap; } .page-link { border: 1px solid var(--sb-line); border-radius: var(--sb-r-sm) !important; color: var(--sb-ink-2); font-size: var(--sb-t-sm); padding: .4rem .7rem; transition: background var(--sb-fast), border-color var(--sb-fast); } .page-link:hover { background: var(--sb-surface-2); border-color: var(--sb-line-2); color: var(--sb-ink); } .page-item.active .page-link { background: var(--sb-accent); border-color: var(--sb-accent); color: #FFF; } .page-item.disabled .page-link { color: var(--sb-line-2); background: var(--sb-surface); } /* -------------------------------------------------------------------------- 13. Panel lateral derecho (filtros del reporte) -------------------------------------------------------------------------- */ .control-sidebar, .control-sidebar-dark { background: var(--sb-surface) !important; color: var(--sb-ink-2); box-shadow: -8px 0 24px rgba(15, 30, 32, .12); padding: var(--sb-s4); width: min(92vw, 22rem); } .control-sidebar h1, .control-sidebar h2, .control-sidebar h3, .control-sidebar h4, .control-sidebar h5 { color: var(--sb-ink); font-size: var(--sb-t-md); } .control-sidebar .form-control { font-size: var(--sb-t-sm); } .control-sidebar hr { border-color: var(--sb-line); } /* -------------------------------------------------------------------------- 14. Autocompletado -------------------------------------------------------------------------- */ .tt-suggestion, .typeahead > li > a { padding: .5rem .7rem; font-size: var(--sb-t-sm); } .typeahead > .active > a, .tt-suggestion:hover { background: var(--sb-accent-soft) !important; color: var(--sb-accent-ink) !important; } /* -------------------------------------------------------------------------- 15. Fluidez: nada se sale, nada se corta -------------------------------------------------------------------------- */ .container, .container-fluid { max-width: 100%; padding-left: var(--sb-s3); padding-right: var(--sb-s3); } .row { margin-left: calc(var(--sb-s2) * -1); margin-right: calc(var(--sb-s2) * -1); } .row > [class*="col"] { padding-left: var(--sb-s2); padding-right: var(--sb-s2); min-width: 0; } /* palabras largas (correos, rut, códigos) parten en vez de desbordar */ .card-body, .modal-body, td, dd, p, li { overflow-wrap: anywhere; } /* ...pero los números y las acciones no se parten */ td.text-right, td .btn, th, .btn, .badge, .table td code { overflow-wrap: normal; } img, svg, video, canvas { max-width: 100%; height: auto; } /* en pantallas chicas las tarjetas ganan aire y las cabeceras se apilan */ @media (max-width: 576px) { .card { border-radius: var(--sb-r); } .card-header { flex-direction: column; align-items: flex-start; } .card-tools { margin-left: 0; width: 100%; } .card-tools .btn, .card-tools .input-group { width: 100%; } .content-header h1 { font-size: var(--sb-t-lg); } .btn { width: auto; } .modal-dialog { margin: var(--sb-s2) auto; } } /* de tablet en adelante, más aire lateral */ @media (min-width: 1600px) { .content, .content-header { padding-left: var(--sb-s5); padding-right: var(--sb-s5); } } /* -------------------------------------------------------------------------- 16. Impresión: etiquetas, packing list y picking list -------------------------------------------------------------------------- */ @media print { .main-sidebar, .main-header, .control-sidebar, .card-tools, .btn, .pagination { display: none !important; } .content-wrapper { margin-left: 0 !important; background: #FFF; } .card { border: 0; box-shadow: none; } body { background: #FFF; font-size: 11pt; } } /* -------------------------------------------------------------------------- 17. Movimiento -------------------------------------------------------------------------- */ .card, .btn, .table tbody tr { will-change: auto; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 18. Ajustes finos -------------------------------------------------------------------------- */ /* las etiquetas de casillas y radios van junto al control: ni versalitas ni bloque */ .form-check-label, .custom-control-label, .icheck-primary > label, .icheck-success > label, .icheck-danger > label, label.form-check-label, .form-check .form-check-label, td label, th label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--sb-t-md); color: var(--sb-ink-2); display: inline; margin-bottom: 0; } /* AdminLTE marca las tarjetas con una franja de color arriba; aquí manda la tipografía */ .card-outline { border-top: 1px solid var(--sb-line) !important; } .card-outline.card-primary, .card-outline.card-info, .card-outline.card-success, .card-outline.card-danger, .card-outline.card-warning { border-top: 1px solid var(--sb-line) !important; } /* contraste legible en los textos de ayuda */ .form-control::placeholder { color: #93A6A8; opacity: 1; } /* pantalla de acceso */ .login-page, .register-page { background: var(--sb-ground); } .login-logo a, .register-logo a { color: var(--sb-ink); font-weight: 600; letter-spacing: -.02em; } .login-box, .register-box { width: min(92vw, 26rem); } .login-card-body, .register-card-body { border-radius: var(--sb-r-lg); padding: var(--sb-s5); } .login-box-msg { font-size: var(--sb-t-md); color: var(--sb-muted); margin-bottom: var(--sb-s4); } /* El logo de SB Trading es un sello redondo con fondo transparente, asi que no lleva caja: las esquinas redondeadas y la sombra que habia aqui estaban pensadas para una imagen cuadrada y le recortaban el borde del circulo. */ .login-logo img, .register-logo img { max-width: min(38vw, 8rem); margin-bottom: var(--sb-s3); } /* casillas de icheck con el acento del sistema */ .icheck-primary > input:first-child:checked + input[type="hidden"] + label::before, .icheck-primary > input:first-child:checked + label::before { background-color: var(--sb-accent); border-color: var(--sb-accent); } /* el interruptor de la barra lateral */ [data-widget="pushmenu"] { color: var(--sb-ink-2); } /* separadores */ hr { border-color: var(--sb-line); } /* barras de desplazamiento coherentes con el tema */ * { scrollbar-width: thin; scrollbar-color: var(--sb-line-2) transparent; } /* -------------------------------------------------------------------------- 19. Tablas anchas sin envoltorio -------------------------------------------------------------------------- Solo 3 de las 54 vistas con tabla usan .table-responsive, asi que una tabla ancha empujaba la pagina entera. Con :has() se hace desplazable unicamente el contenedor que tiene una tabla como hijo directo; los que contienen formularios conservan overflow visible, para no recortar los desplegables del autocompletado. -------------------------------------------------------------------------- */ .card-body:has(> table), .card-body:has(> form > table), .modal-body:has(> table), .tab-pane:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* La cabecera fija, que el marcado pedia y esta regla impedia. Decia "la cabecera queda fija al desplazar en vertical" y a continuacion ponia max-height: none, que es justo lo contrario: position: sticky no tiene donde fijarse si su contenedor no tiene alto acotado. Ocho vistas pedian table-head-fixed y en ninguna funcionaba. Se acota solo donde el marcado lo pide, no en todas las tablas: la caja crece hasta llenar la pantalla y a partir de ahi se desplaza por dentro, con la cabecera siempre a la vista. Una tabla corta no llega a ese alto y se comporta igual que antes. */ .card-body:has(> table) { max-height: none; } .card-body:has(> .table-head-fixed), .card-body:has(> form > .table-head-fixed), #po_holder:has(> .table-head-fixed) { max-height: calc(100vh - 17rem); overflow: auto; } /* Salvo en un formulario de captura. Ahi la tabla no es un listado que se consulta: son las lineas que el usuario esta escribiendo, y el boton de guardar va debajo. Si la caja se acota, las lineas se desplazan por dentro, la caja deja de crecer y el boton queda clavado a media pantalla. Con catorce lineas quedaban 515px de pedido escondidos dentro del recuadro. Alcanza a Nueva OC, Editar OC y Editar contenedor, que tienen las tres la misma forma. */ form .card-body:has(> .table-head-fixed) { max-height: none; overflow: visible; } /* en un modal el alto disponible es otro: lo marca el propio cuadro */ .modal-body .table-responsive:has(> .table-head-fixed), .modal-body:has(> .table-head-fixed) { max-height: calc(100vh - 24rem); overflow: auto; } /* la cabecera, por encima de las filas y sin dejar ver nada por debajo */ .table-head-fixed thead th { position: sticky; top: 0; z-index: 3; background: var(--sb-surface-2); } /* pista visual de que hay mas contenido a la derecha */ .card-body:has(> table)::-webkit-scrollbar, .modal-body:has(> table)::-webkit-scrollbar { height: 10px; } .card-body:has(> table)::-webkit-scrollbar-thumb, .modal-body:has(> table)::-webkit-scrollbar-thumb { background: var(--sb-line-2); border-radius: 5px; } /* las celdas no se estrujan hasta romper la palabra */ /* Las celdas de un listado no se parten en varias lineas: la tabla ya se desplaza de lado, y un nombre cortado en tres renglones se lee peor que uno que obliga a desplazar. */ .card-body:has(> table) > table td, .card-body:has(> form > table) > form > table td, .tab-pane:has(> table) > table td { white-space: nowrap; } .table td, .table th { min-width: 0; } .table td:first-child, .table th:first-child { padding-left: var(--sb-s4); } .table td:last-child, .table th:last-child { padding-right: var(--sb-s4); } /* columnas de acciones: siempre al ancho de su contenido */ .table td:has(> .dropdown), .table td:has(> form), .table td:has(> .btn) { white-space: nowrap; width: 1%; } /* -------------------------------------------------------------------------- 20. Filtros del reporte -------------------------------------------------------------------------- Cada fila combina dos cosas: la casilla decide si la columna se muestra y el campo filtra por su valor. Se agrupan visualmente para que se lea como una sola decision por campo. -------------------------------------------------------------------------- */ .filtro-fila { display: flex; align-items: center; gap: var(--sb-s3); padding: .45rem .6rem; border: 1px solid transparent; border-radius: var(--sb-r); margin-bottom: .3rem; transition: background var(--sb-fast), border-color var(--sb-fast); } .filtro-fila:hover { background: var(--sb-surface-2); } .filtro-fila:focus-within { background: var(--sb-accent-soft); border-color: var(--sb-accent); } .filtro-check { display: flex; align-items: center; gap: .5rem; margin: 0; cursor: pointer; flex: 0 0 clamp(9rem, 26%, 13rem); min-width: 0; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--sb-t-sm); color: var(--sb-ink-2); } .filtro-check input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--sb-accent); flex: none; margin: 0; } .filtro-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* una casilla desmarcada avisa que esa columna no saldra en el reporte */ .filtro-check:has(input:not(:checked)) span { color: var(--sb-line-2); text-decoration: line-through; } .filtro-campo { flex: 1 1 auto; min-width: 0; } .filtro-campo .form-control { font-size: var(--sb-t-sm); } .filtro-rango { display: flex; align-items: center; gap: var(--sb-s2); } .filtro-rango .form-control { flex: 1 1 0; min-width: 5rem; } .filtro-a { color: var(--sb-muted); font-size: var(--sb-t-sm); flex: none; } .filtro-semana { background: var(--sb-accent-soft); border-color: var(--sb-accent); } /* el autocompletado debe quedar por encima de la ventana */ .modal .typeahead.dropdown-menu, .modal .tt-menu { z-index: 1080; } @media (max-width: 576px) { .filtro-fila { flex-direction: column; align-items: stretch; gap: var(--sb-s2); } .filtro-check { flex: none; } } /* en pantallas chicas el pie de las ventanas se ordena en una columna */ @media (max-width: 576px) { .modal-footer { flex-direction: column-reverse; align-items: stretch; } .modal-footer > .btn, .modal-footer > a.btn { width: 100%; margin: 0; justify-content: center; } .modal-footer > .mr-auto { margin-right: 0 !important; } } /* -------------------------------------------------------------------------- 21. Correcciones de disposicion -------------------------------------------------------------------------- */ /* Varias pantallas ponen su barra de filtros directamente en el contenido, sin cabecera. Sin margen superior quedaban pegadas bajo la barra de navegacion. */ .content { padding-top: var(--sb-s4); } .content-header + .content { padding-top: var(--sb-s2); } /* Ventanas encadenadas: el selector de semanas se abre desde el de filtros y debe quedar por encima, no por debajo. */ #modal-weeks { z-index: 1075; } .modal-backdrop ~ .modal-backdrop { z-index: 1070; } /* los selectores de fecha y el autocompletado, sobre cualquier ventana */ .daterangepicker { z-index: 1085 !important; font-family: var(--sb-font); } .daterangepicker td.active, .daterangepicker td.active:hover { background: var(--sb-accent); } .typeahead.dropdown-menu, .tt-menu { z-index: 1085; } /* -------------------------------------------------------------------------- 22. Botones de accion en icono -------------------------------------------------------------------------- En las barras de herramientas la accion se reconoce por su icono; el texto sobra y roba ancho. Los botones que confirman algo -Agregar, Aplicar- si conservan su etiqueta. -------------------------------------------------------------------------- */ .card-tools .btn > i:only-child, .card-tools .btn > i:first-child:last-of-type { margin: 0; } .card-tools .btn:has(> i:only-child) { padding: .48rem .7rem; min-width: 2.4rem; justify-content: center; } .card-tools .btn:has(> i:first-child):has(> .badge) { padding: .48rem .7rem; } /* la barra de filtros de Stock: campos y botones alineados y fluidos */ .content > form .row { align-items: flex-end; } .content > form .form-group { margin-bottom: var(--sb-s2); } /* el autocompletado ocupa el ancho de su campo */ .typeahead.dropdown-menu { min-width: 100%; width: auto; max-height: 16rem; overflow-y: auto; } .typeahead.dropdown-menu > li > a { padding: .5rem .7rem; font-size: var(--sb-t-sm); color: var(--sb-ink-2); white-space: normal; } .typeahead.dropdown-menu > .active > a, .typeahead.dropdown-menu > li > a:hover { background: var(--sb-accent-soft); color: var(--sb-accent-ink); } /* -------------------------------------------------------------------------- 23. Barra superior: fecha y usuario -------------------------------------------------------------------------- El espacio estaba vacio. A la izquierda la fecha y la semana operativa, que es como se organiza el trabajo; a la derecha quien esta operando y con que perfil, para no equivocarse de sesion. -------------------------------------------------------------------------- */ .barra-fecha { display: flex; align-items: baseline; gap: var(--sb-s2); padding: 0 var(--sb-s3); margin-left: var(--sb-s2); border-left: 1px solid var(--sb-line); } .barra-fecha-dia { font-size: var(--sb-t-sm); color: var(--sb-ink-2); font-weight: 500; text-transform: capitalize; white-space: nowrap; } .barra-fecha-semana { font-family: var(--sb-mono); font-size: var(--sb-t-xs); font-weight: 500; color: var(--sb-accent-ink); background: var(--sb-accent-soft); padding: .15rem .5rem; border-radius: var(--sb-r-sm); white-space: nowrap; } .barra-usuario > .nav-link { display: flex; align-items: center; gap: var(--sb-s2); padding: .35rem .6rem; } .barra-usuario-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--sb-accent-soft); color: var(--sb-accent); display: grid; place-items: center; font-size: .9rem; flex: none; } .barra-usuario-datos { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .barra-usuario-nombre { font-size: var(--sb-t-sm); font-weight: 600; color: var(--sb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; } .barra-usuario-perfil { font-size: var(--sb-t-xs); color: var(--sb-muted); text-transform: uppercase; letter-spacing: .05em; } @media (max-width: 991px) { .barra-fecha-semana { display: none; } .barra-usuario-datos { display: none; } } @media (max-width: 575px) { .barra-fecha { display: none; } } /* -------------------------------------------------------------------------- 24. Barra lateral plegada -------------------------------------------------------------------------- */ .sidebar-collapse .brand-link { padding-left: .8rem; padding-right: .8rem; } .sidebar-collapse .brand-image { margin-left: 0; margin-right: 0; max-height: 28px; } .sidebar-collapse .nav-sidebar .nav-link { justify-content: center; gap: 0; padding-left: .5rem; padding-right: .5rem; } .sidebar-collapse .nav-sidebar .nav-link > p { display: none; } .sidebar-collapse .nav-sidebar .nav-link .nav-icon { margin: 0; } .sidebar-collapse .nav-treeview { border-left: 0; margin-left: 0; padding-left: 0; } /* -------------------------------------------------------------------------- 25. Iconos -------------------------------------------------------------------------- Se apoyan en el texto, no compiten con el: tamano contenido, alineados a la linea base y en el gris de la interfaz salvo cuando marcan estado. -------------------------------------------------------------------------- */ .btn > i, .btn > .fa, .btn > .fas, .btn > .far { font-size: .95em; line-height: 1; } .card-title > i { font-size: .95em; opacity: .9; } .dropdown-item > i { font-size: .9em; opacity: .85; } .nav-sidebar .nav-icon { font-size: .95em; } .table td .btn > i { font-size: .9em; } /* los iconos de estado si llevan su color */ .text-green, .fa-file-excel { color: var(--sb-ok) !important; } .text-red { color: var(--sb-crit) !important; } /* nada de iconos desproporcionados si una hoja de estilos externa no carga */ svg { max-width: 100%; max-height: 100%; } .pagination svg, .page-link svg { width: 1em; height: 1em; } /* -------------------------------------------------------------------------- 26. Paginacion con su resumen -------------------------------------------------------------------------- */ .pagination { margin-bottom: 0; } nav[role="navigation"] .flex.justify-between, nav[role="navigation"] p.text-sm { font-size: var(--sb-t-sm); color: var(--sb-muted); } .card-footer .pagination { justify-content: flex-end; } /* -------------------------------------------------------------------------- 27. Campos obligatorios -------------------------------------------------------------------------- */ .requerido::after { content: " *"; color: var(--sb-crit); font-weight: 700; } .nota-requerido { font-size: var(--sb-t-xs); color: var(--sb-muted); } .nota-requerido b { color: var(--sb-crit); } /* --- barra de herramientas de la tarjeta --------------------------------- Los botones de accion van siempre en una linea (card-tools en una linea). Sin esto, un input-group intermedio los empuja a un segundo renglon. */ .card-header > .card-tools { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sb-s2); margin: 0; float: none; white-space: nowrap; } .card-header > .card-tools > .input-group { width: auto; margin: 0; flex: none; } /* los margenes sueltos de las vistas antiguas ceden ante el gap */ .card-header > .card-tools > *, .card-header > .card-tools > .input-group > * { margin-left: 0 !important; } .card-header > .card-tools .btn { flex: none; } /* --- barra lateral colapsada al desplegarse ------------------------------- AdminLTE 3.16 le pone width:0 al texto de cada opcion cuando la barra esta colapsada, pero al desplegarla con el puntero solo devuelve la opacidad y la visibilidad: nunca el ancho. El resultado es una barra que se abre sin nombres. Aqui se devuelve el ancho y la disposicion horizontal. */ @media (min-width: 992px) { .sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > p, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link > p { display: flex; width: auto; overflow: visible; } .sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link { justify-content: flex-start; gap: .6rem; padding-left: .7rem; padding-right: .7rem; } .sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-treeview, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-treeview { border-left: 1px solid var(--sb-nav-line); margin-left: 1.55rem; padding-left: .5rem; } .sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-link { padding-left: 1rem; padding-right: 1rem; } } /* --- menu de acciones fuera de su recuadro -------------------------------- Cuando el menu se abre dentro de un listado que se desplaza, sbtr-menus.js lo traslada al cuerpo del documento para que no quede recortado. Aqui solo se le fija la posicion; el resto del aspecto lo hereda de .dropdown-menu. */ .dropdown-menu.sbtr-menu-suelto { position: fixed; z-index: 1060; margin: 0; /* .dropdown-menu-right fija right:0; con left y right a la vez el menu se estiraria de lado a lado, asi que aqui manda solo la posicion calculada */ right: auto; width: max-content; max-width: calc(100vw - 2rem); } /* --- pie de firma --------------------------------------------------------- Va en la misma tinta que la barra lateral, asi el marco de la aplicacion cierra por abajo con el mismo color con que abre por el costado. Sobre ese fondo la firma se lee sin gritar. */ .main-footer.sbtr-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sb-s2) var(--sb-s4); padding: var(--sb-s2) var(--sb-s4); background: var(--sb-nav); border-top: 1px solid var(--sb-nav-line); color: var(--sb-nav-ink-2); font-size: var(--sb-t-xs); } .sbtr-pie-vista { min-width: 0; } /* el pie va fijo, asi que el contenido tiene que dejarle sitio */ .layout-footer-fixed .content-wrapper, .layout-md-footer-fixed .content-wrapper, .layout-xl-footer-fixed .content-wrapper { padding-bottom: 2.6rem; } .sbtr-firma { display: flex; align-items: center; gap: .4em; margin: 0 0 0 auto; font-size: var(--sb-t-xs); color: var(--sb-nav-ink-2); letter-spacing: .02em; white-space: nowrap; } .sbtr-firma a { display: inline-flex; align-items: center; gap: .4em; color: var(--sb-nav-ink); font-weight: 600; letter-spacing: .06em; transition: color var(--sb-base); } .sbtr-firma a:hover, .sbtr-firma a:focus-visible { color: var(--sb-accent-luz); text-decoration: none; } .sbtr-firma svg { width: 1.15em; height: 1.15em; flex: none; } .sbtr-firma-texto { font-weight: 400; opacity: .8; } .sbtr-firma-sep { opacity: .45; } /* --- los isotipos giran --------------------------------------------------- Cada uno da la vuelta justo sobre su propia simetria: el cubo de TICBOX se repite cada 120 grados y el nodo de MINDCORP cada 60, asi que el giro no tiene principio ni fin visible. Es lento a proposito; al pasar el puntero se anima y da una vuelta rapida. */ @keyframes sbtr-gira-tercio { from { transform: rotate(0deg); } to { transform: rotate(120deg); } } @keyframes sbtr-gira-sexto { from { transform: rotate(0deg); } to { transform: rotate(60deg); } } .sbtr-firma a[title="TICBOX"] svg { animation: sbtr-gira-tercio 9s linear infinite; transition: filter var(--sb-base); } .sbtr-firma a[title="MINDCORP"] svg { animation: sbtr-gira-sexto 6s linear infinite; transition: filter var(--sb-base); } .sbtr-firma a:hover svg, .sbtr-firma a:focus-visible svg { animation-duration: 1.1s; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sb-accent-luz) 55%, transparent)); } /* en pantallas estrechas la firma se va sola a la linea siguiente */ @media (max-width: 30rem) { .sbtr-firma { margin-left: 0; white-space: normal; } } /* quien pidio menos movimiento no ve ninguno */ @media (prefers-reduced-motion: reduce) { .sbtr-firma svg, .sbtr-firma a:hover svg { animation: none; } } /* al imprimir no aparece: los documentos llevan su propio pie */ @media print { .main-footer.sbtr-pie { display: none; } } /* --- visor de documentos -------------------------------------------------- El documento vive dentro de un marco para que su hoja no se mezcle con los estilos de la aplicacion. El cuerpo no lleva relleno: la hoja ya trae el suyo y el gris de alrededor es parte del documento. */ #modal-documento .modal-dialog { max-width: min(96vw, 24cm); } .documento-acciones { display: flex; align-items: center; gap: var(--sb-s2); margin-left: auto; } .modal-body.documento-cuerpo { padding: 0; background: var(--sb-surface-2); } #documento-marco { display: block; width: 100%; height: min(78vh, 30cm); border: 0; background: var(--sb-surface-2); } /* --- opcion dentro del visor de documentos -------------------------------- La casilla que agrega la hoja de recepcion vive junto a los botones de la cabecera, asi que tiene que leerse como uno mas de ellos. */ .documento-opcion { display: inline-flex; align-items: center; gap: .45em; margin: 0; padding: .3rem .7rem; border: 1px solid var(--sb-line); border-radius: var(--sb-r-sm); background: var(--sb-surface); font-size: var(--sb-t-xs); font-weight: 500; color: var(--sb-ink-2); cursor: pointer; white-space: nowrap; transition: border-color var(--sb-fast), color var(--sb-fast); } .documento-opcion:hover { border-color: var(--sb-accent); color: var(--sb-accent); } .documento-opcion input { margin: 0; cursor: pointer; } .documento-opcion:has(input:checked) { border-color: var(--sb-accent); background: var(--sb-accent-soft); color: var(--sb-accent-ink); } /* -------------------------------------------------------------------------- Permanencia en stock El semaforo lo pidio el cliente: hasta un mes la celda no dice nada, y de ahi en adelante avisa. Se pinta el fondo y no solo el texto, porque en una tabla de veinte columnas un numero de color se pierde. -------------------------------------------------------------------------- */ .sb-permanencia-aviso, .sb-permanencia-alerta, .sb-permanencia-viejo { font-weight: 600; text-align: right; border-radius: var(--sb-radio-xs, 3px); } .sb-permanencia-aviso { background: #fff3cd; color: #7a5b00; } .sb-permanencia-alerta { background: #ffe0b2; color: #8a4b00; } .sb-permanencia-viejo { background: #f8d7da; color: #8b1a1a; } /* Aqui habia dos bloques de modo oscuro para el semaforo de permanencia. El primero estaba VIVO y hacia dano: la aplicacion no escribe data-theme en ninguna parte, asi que :not([data-theme="light"]) siempre acertaba y cualquiera con el sistema operativo en oscuro veia esas tres celdas en marron y granate oscuro dentro de una tabla blanca. El segundo era su gemelo inerte, para un data-theme="dark" que nadie pone. La aplicacion tiene un solo modo. Si algun dia se hace uno oscuro de verdad, se hace entero y con las variables del tema, no con tres hex sueltos. */ /* -------------------------------------------------------------------------- Filtro por columna La fila de campos va pegada bajo la cabecera y tiene que leerse como parte de ella, no como una fila de datos mas. -------------------------------------------------------------------------- */ .sb-fila-filtros th { padding: 2px 4px !important; border-top: 0 !important; background: var(--sb-fondo-2, #f6f7f9); } .sb-filtro-columna { width: 100%; min-width: 60px; max-width: 220px; padding: 1px 5px; font-size: var(--sb-t-xs, .78rem); font-weight: 400; line-height: 1.6; color: var(--sb-texto, #26303b); background: var(--sb-fondo, #fff); border: 1px solid var(--sb-borde, #d6dbe1); border-radius: var(--sb-radio-xs, 3px); } .sb-filtro-columna:focus { outline: 0; border-color: var(--sb-acento, #1b7f6b); box-shadow: 0 0 0 2px rgba(27, 127, 107, .15); } .sb-filtro-cuenta { padding: 4px 2px 0; font-size: var(--sb-t-xs, .78rem); color: var(--sb-texto-2, #6b7783); } @media print { .sb-fila-filtros, .sb-filtro-cuenta { display: none !important; } } /* -------------------------------------------------------------------------- Selector de semana del tablero -------------------------------------------------------------------------- */ .tb-semana { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .tb-semana-campo { width: 110px; padding: 2px 8px; font-size: var(--sb-t-xs, .78rem); color: var(--sb-texto, #26303b); background: var(--sb-fondo, #fff); border: 1px solid var(--sb-borde, #d6dbe1); border-radius: var(--sb-radio-xs, 3px); } .tb-semana-paso, .tb-semana-hoy { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; font-size: var(--sb-t-xs, .78rem); color: var(--sb-texto-2, #6b7783); border: 1px solid var(--sb-borde, #d6dbe1); border-radius: var(--sb-radio-xs, 3px); text-decoration: none; } .tb-semana-paso:hover, .tb-semana-hoy:hover { color: var(--sb-acento, #1b7f6b); border-color: var(--sb-acento, #1b7f6b); text-decoration: none; } /* -------------------------------------------------------------------------- Tablero de la semana (kanban) Tres columnas, una por estado del pedido. Se lee de izquierda a derecha como avanza el trabajo: lo que falta leer, lo que puede salir, lo que salio. -------------------------------------------------------------------------- */ .kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; } .kb-col { background: var(--sb-fondo-2, #f6f7f9); border: 1px solid var(--sb-borde, #d6dbe1); border-radius: var(--sb-radio, 6px); overflow: hidden; } .kb-cab { padding: 10px 12px; border-bottom: 1px solid var(--sb-borde, #d6dbe1); border-top: 3px solid var(--sb-linea, #b9c2cc); background: var(--sb-fondo, #fff); } .kb-espera .kb-cab { border-top-color: #c9a227; } .kb-lista .kb-cab { border-top-color: var(--sb-acento, #1b7f6b); } .kb-hecha .kb-cab { border-top-color: #7a8794; } .kb-cab h2 { margin: 0; font-size: var(--sb-t-sm, .92rem); font-weight: 600; letter-spacing: .01em; } .kb-cab p { margin: 2px 0 0; font-size: var(--sb-t-xs, .78rem); color: var(--sb-texto-2, #6b7783); } .kb-pila { display: flex; flex-direction: column; gap: 8px; padding: 10px; max-height: 68vh; overflow-y: auto; } .kb-tarjeta { display: block; padding: 8px 10px; color: var(--sb-texto, #26303b); background: var(--sb-fondo, #fff); border: 1px solid var(--sb-borde, #d6dbe1); border-left: 3px solid transparent; border-radius: var(--sb-radio-xs, 3px); text-decoration: none; } .kb-tarjeta:hover { color: var(--sb-texto, #26303b); border-color: var(--sb-acento, #1b7f6b); text-decoration: none; } .kb-quieta { border-left-color: #c0392b; } .kb-fila1 { display: flex; justify-content: space-between; align-items: baseline; } .kb-po { font-weight: 600; font-variant-numeric: tabular-nums; } .kb-dias { font-size: var(--sb-t-xs, .78rem); color: var(--sb-texto-2, #6b7783); font-variant-numeric: tabular-nums; } .kb-alerta { color: #c0392b; font-weight: 600; } .kb-cliente { margin: 2px 0 6px; font-size: var(--sb-t-xs, .78rem); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .kb-barra { height: 4px; background: var(--sb-borde, #d6dbe1); border-radius: 2px; overflow: hidden; } .kb-barra span { display: block; height: 100%; background: var(--sb-acento, #1b7f6b); } .kb-pie { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: var(--sb-t-xs, .78rem); color: var(--sb-texto-2, #6b7783); } .kb-origen { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; } .kb-vacia { margin: 4px 2px; font-size: var(--sb-t-xs, .78rem); color: var(--sb-texto-2, #6b7783); } @media (max-width: 900px) { .kb { grid-template-columns: 1fr; } .kb-pila { max-height: none; } } /* ========================================================================== 23 · Detalle desplegable bajo cada orden La fila de detalle no es una fila de datos: es la continuacion de la de arriba, y tiene que leerse asi. Fondo distinto, sin el borde que separa filas hermanas, y la tabla de adentro mas compacta que la de afuera. ========================================================================== */ .sb-desplegar-col { width: 2.4rem; padding-right: 0 !important; } .sb-desplegar { padding: .15rem .45rem; line-height: 1; color: var(--sb-muted); border-color: transparent; background: transparent; } .sb-desplegar:hover { color: var(--sb-accent); background: var(--sb-accent-soft); } .sb-desplegar[aria-expanded="true"] { color: var(--sb-accent); } tr.sb-detalle > td { padding: 0 0 var(--sb-s3) 2.4rem; background: var(--sb-surface-2); border-top: 0; } /* la tabla de adentro se desplaza sola si la pantalla es angosta */ .sb-detalle-celda { overflow-x: auto; } .sb-detalle-tabla { margin: 0; font-size: var(--sb-t-xs); background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: var(--sb-r-sm); overflow: hidden; } .sb-detalle-tabla thead th { position: static; /* dentro de la fila no corresponde fijar la cabecera */ background: var(--sb-surface-2); font-weight: 500; white-space: nowrap; } .sb-detalle-tabla td, .sb-detalle-tabla th { padding: .3rem .55rem; } .sb-detalle-tabla .text-right { text-align: right; font-variant-numeric: tabular-nums; } .sb-detalle-total > td { background: var(--sb-surface-2); font-weight: 500; color: var(--sb-muted); } .sb-detalle-gran-total > td { background: var(--sb-accent-soft); color: var(--sb-accent-ink); font-weight: 600; border-top: 1px solid var(--sb-line-2); } /* ========================================================================== 24 · Reservar stock: todo a la vista, sin desplazar El cuerpo de ese modal reparte los campos de arriba en columnas de ancho fijo (col-2) y mete la etiqueta como texto suelto delante del campo. Con la tabla al lado, "Pendiente" o "Asignado" caian en un dieciseisavo de la pantalla: el recuadro quedaba mas angosto que el numero que habia dentro. El reparto es, entonces: encabezado en una tira horizontal compacta, y debajo las dos tablas lado a lado --Stock a la izquierda, Asignacion a la derecha, que es donde queda el boton de confirmar--. Asi la ventana entra entera en una pantalla sin desplazamiento vertical. Se arregla aqui y no en las tres vistas porque las tres comparten el mismo id y el mismo problema, y porque el contenido llega por AJAX. ========================================================================== */ /* la ventana, lo mas ancha que la pantalla permita */ #modal-reserve-stock .modal-dialog { --sb-modal-w: 1600px; } /* --- el encabezado: una tira horizontal, no una columna de campos --------- Los campos son solo de lectura, asi que no necesitan el alto de un campo editable. Se les da ancho minimo para que el valor se lea entero y se dejan crecer; si no caben todos, bajan a la linea siguiente. */ #stock_holder .row { row-gap: var(--sb-s2); } #stock_holder .row > [class*="col-"] { /* 0 de crecimiento: son campos cortos y de solo lectura, estirarlos hasta llenar la fila los vuelve recuadros vacios */ flex: 0 1 12rem; min-width: 8rem; max-width: none; /* la etiqueta es texto suelto delante del campo: se la trata como tal */ font-size: var(--sb-t-xs); line-height: 1.25; color: var(--sb-texto-2); } #stock_holder .row > [class*="col-"] .form-control { height: auto; padding: .25rem .5rem; margin-top: .1rem; font-size: var(--sb-t-sm); color: var(--sb-texto); } /* --- las dos tablas, lado a lado ----------------------------------------- La de Stock lleva nueve columnas y la de Asignacion cuatro, asi que el reparto por mitades deja a la primera apretada: se le da algo mas. */ /* el :not() importa: los campos del encabezado son "col col-2" y tambien responden a .col; sin el, se llevarian el reparto de las tablas */ #stock_holder .row > .col:not([class*="col-"]) { flex: 1 1 0; min-width: 0; } #stock_holder .row > .col.table-responsive { flex: 1.8 1 0; } /* Debajo de ~1400px la mitad ya no le alcanza a la tabla de Stock y volveria el desplazamiento horizontal, que es justo lo que se reporto. Ahi se apilan: cada una con el ancho entero. Se pierde algo de alto, no la lectura. */ @media (max-width: 1399.98px) { #stock_holder .row > .col.table-responsive, #stock_holder .row > .col:not([class*="col-"]) { flex: 0 0 100%; max-width: 100%; } #stock_holder .row > .col:not([class*="col-"]) + .col { margin-top: var(--sb-s4); } } /* la tabla, compacta para que quepa holgada */ #stock_holder table.table { font-size: var(--sb-t-sm); } #stock_holder table.table th, #stock_holder table.table td { padding: .35rem .5rem; } #stock_holder .form-group { margin-bottom: 0; } /* la casilla de la cantidad: ancho propio, numero grande y alineado a la derecha, que es como se lee una cifra */ #stock_holder table .form-control { min-width: 5rem; text-align: right; font-size: var(--sb-t-md); font-variant-numeric: tabular-nums; } #stock_holder table td { vertical-align: middle; } /* el boton de confirmar vive dentro de la columna de Asignacion, o sea a la derecha; se le da aire arriba para que no se pegue a la ultima fila */ #stock_holder #confirm { margin-top: var(--sb-s4); } /* ========================================================================== 25 · Las listas de autocompletado no se recortan El menu que dibuja la libreria es un