/* ============================================================ Tandem Desing - Custom overrides sobre Materio ============================================================ */ /* ============================================================================= Intranet Materio: pie visible siempre; scroll solo en la zona de contenido (marcador en de _LayoutMaterio.cshtml — no afecta _LayoutMaterioBlank). ============================================================================= */ html.tandem-intranet-chrome { height: 100%; min-height: 100dvh; max-height: 100dvh; } html.tandem-intranet-chrome body { min-height: 100%; height: 100%; max-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } /* Filas hijas del wrapper: menu + pagina deben encajar en el viewport */ html.tandem-intranet-chrome .layout-wrapper.layout-content-navbar { flex: 1 1 auto; min-height: 0; max-height: 100%; align-items: stretch; overflow: hidden; } html.tandem-intranet-chrome .layout-wrapper.layout-content-navbar > .layout-container { flex: 1 1 auto; min-width: 0; min-height: 0; max-height: 100%; /* sustituye min-block-size: 100vh de Materio, que forzaba altura documento */ min-block-size: 0; align-self: stretch; } html.tandem-intranet-chrome .layout-content-navbar .layout-menu { max-height: 100%; align-self: stretch; } html.tandem-intranet-chrome .layout-content-navbar .layout-page { min-height: 0; max-height: 100%; overflow: hidden; } html.tandem-intranet-chrome .layout-content-navbar .content-wrapper { min-height: 0; flex: 1 1 auto; overflow: hidden; } /* * Contenido principal (.tandem-layout-main-scroll): scroll aqui salvo pantallas que * fuerzan overflow:hidden en este mismo contenedor (DataTables lista, Jobside workspace). */ html.tandem-intranet-chrome .layout-content-navbar .content-wrapper > .container-fluid.flex-grow-1.container-p-y.tandem-layout-main-scroll:not(:has(.tandem-dt-list-page)):not(:has(.tandem-jobside-workspace)) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Intranet flex panels: .tandem-scroll-y = min-height:0 + overflow-y:auto inside a flex chain; .tandem-fill-scroll = flex:1 1 auto + min-height:0 + overflow-y:auto (body under a fixed flex header, e.g. long card stacks). */ .tandem-scroll-y { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .tandem-fill-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ---- Separador: linea azul (color plantilla) entre contenido y pie ---- */ .layout-content-navbar .content-footer.footer { border-top: 1px solid var(--tandem-primary, var(--bs-primary)); } /* ---- Menu lateral: fondo ligeramente mas oscuro (barra superior sin override) ---- */ .layout-content-navbar { --tandem-chrome-bg: color-mix(in srgb, var(--bs-body-bg, #fff) 94%, var(--bs-heading-color, #2e263d) 6%); } .layout-content-navbar #layout-menu.layout-menu.menu-vertical { background-color: var(--tandem-chrome-bg) !important; } /* ---- Barra superior: linea fina inferior (mismo tono que separadores .menu-header) ---- */ .layout-content-navbar .layout-navbar.bg-navbar-theme { border-bottom: 1px solid rgba(var(--bs-base-color-rgb), 0.2); } /* ---- Popups AJAX (DesignTools _Create / _Edit / _Delete) ---- */ /* Backdrop oscuro detras del popup */ #Loading { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; background-color: rgba(75, 70, 92, 0.55) !important; opacity: 1 !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer; z-index: 1190 !important; } /* Carcasa del popup: card blanca centrada con sombra fuerte */ .tandem-popup-shell { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: min(750px, 92vw) !important; max-height: 90vh; overflow-y: auto; background-color: #fff !important; border-radius: 0.75rem !important; box-shadow: 0 1.25rem 3rem rgba(75, 70, 92, 0.45), 0 0.5rem 1.5rem rgba(75, 70, 92, 0.25) !important; border: 1px solid rgba(75, 70, 92, 0.1) !important; z-index: 1200 !important; } .tandem-popup-content { width: 100%; height: auto; } /* El contenido AJAX (_Create/_Edit/_Delete) ya viene con clase .tandem-popup */ .tandem-popup-shell .tandem-popup { background-color: transparent; border: none; box-shadow: none; border-radius: 0; } /* ---- Auth pages: skyline + tarjeta centrada ---- */ .tandem-login-skyline { width: 100%; max-width: 2200px; height: auto; max-height: 430px; object-fit: contain; object-position: center bottom; position: fixed; left: 50%; transform: translateX(-50%); bottom: 46px; z-index: 0; pointer-events: none; opacity: 0.96; mix-blend-mode: multiply; filter: contrast(1.08); } .tandem-auth-inner { position: relative; min-height: calc(100vh - 3rem); display: flex; align-items: flex-start; justify-content: center; padding-top: 2.25rem; } .tandem-auth-inner .card { position: relative; z-index: 2; } /* ---- Listas DataTables: altura a viewport, scroll en la tabla ----------- El contenedor principal deja de crecer con todas las filas; el scroll vertical queda en .dataTables_scrollBody (requiere scrollY en la init). */ .layout-content-navbar .content-wrapper > .container-fluid.flex-grow-1:has(.tandem-dt-list-page) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .tandem-dt-list-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: 100%; overflow: hidden; } /* Intranet con pie fijo: el alto util es el del contenedor flex, no un vh fijo */ html.tandem-intranet-chrome .tandem-dt-list-page { max-height: 100%; } .tandem-dt-list-page > .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; margin-bottom: 0 !important; } .tandem-dt-list-page > .card > .card-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .tandem-dt-list-page .dataTables_wrapper { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .tandem-dt-list-page .dataTables_wrapper .dataTables_scroll { flex: 1 1 auto; min-height: 0; overflow: hidden; } .tandem-dt-list-page .dataTables_wrapper .dataTables_scrollBody { flex: 1 1 auto; min-height: 0; } /* ---- Jobside Details: workspace (columna izquierda: card-body con .tandem-fill-scroll; derecha: tabs + scroll en .tandem-jobside-tab-content) ----- */ .layout-content-navbar .content-wrapper > .container-fluid.flex-grow-1:has(.tandem-jobside-workspace) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; } .tandem-jobside-workspace { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: 100%; } html.tandem-intranet-chrome .tandem-jobside-workspace { max-height: 100%; } .tandem-jobside-workspace-toolbar { flex: 0 0 auto; } .tandem-jobside-workspace-row { flex: 1 1 auto; min-height: 0; } .tandem-jobside-workspace .tandem-jobside-col-left, .tandem-jobside-workspace .tandem-jobside-col-right { min-height: 0; } .tandem-jobside-workspace .tandem-jobside-col-left { display: flex; flex-direction: column; } .tandem-jobside-workspace .tandem-jobside-col-left > .card { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: 100%; overflow: hidden; } .tandem-jobside-workspace .tandem-jobside-col-left > .card > .card-header { flex-shrink: 0; } /* Cuerpo izquierdo: flex-basis 0 obliga al alto acotado del padre (sin esto el card crece y no aparece scroll). */ .tandem-jobside-workspace .tandem-jobside-col-left > .card > .card-body.tandem-fill-scroll { flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .tandem-jobside-workspace .tandem-jobside-right-card { display: flex; flex-direction: column; min-height: 0; } .tandem-jobside-workspace .tandem-jobside-right-card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .tandem-jobside-workspace .tandem-jobside-tab-content { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Documents tab: menús DataTables / dropdowns en panel con scroll */ .tandem-jobside-workspace .tandem-jobside-tab-content .table-responsive { overflow-x: auto !important; overflow-y: visible; } .tandem-jobside-workspace.tandem-jobside-workspace--expanded .tandem-jobside-col-left { opacity: 0.42; transition: opacity 0.2s ease; } /* ---- DataTables: modo un solo scroll (global) ------------------------- */ html.master-articles-one-scroll, body.master-articles-one-scroll { overflow: hidden !important; height: 100dvh !important; max-height: 100dvh !important; } body.master-articles-one-scroll .layout-content-navbar .layout-page, body.master-articles-one-scroll .layout-content-navbar .content-wrapper, body.master-articles-one-scroll .layout-content-navbar .content-wrapper > .container-fluid.flex-grow-1.container-p-y, body.master-articles-one-scroll .layout-content-navbar .content-wrapper > .container-fluid.flex-grow-1 { overflow: hidden !important; max-height: 100% !important; } .master-articles-partial-scroll { max-height: var(--ma-partial-height, calc(100dvh - 14rem)); height: var(--ma-partial-height, calc(100dvh - 14rem)); overflow: hidden !important; } .master-articles-partial-scroll .dataTables_wrapper .dataTables_scrollBody { overflow-y: auto !important; border-bottom: 0 !important; } /* ---- DataTables (Bootstrap 5) integracion con Materio ---- */ .dataTables_wrapper { padding: 0.5rem 0; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { margin: 0.5rem 0; } .dataTables_wrapper .dataTables_filter input.form-control-sm, .dataTables_wrapper .dataTables_length select.form-select-sm { border-radius: 0.5rem; border: 1px solid var(--bs-border-color); } .dataTables_wrapper .dataTables_filter input { margin-left: 0.5rem; } .dataTables_wrapper table.dataTable thead th, .dataTables_wrapper table.dataTable thead td { background-color: transparent; border-bottom: 1px solid var(--bs-border-color); color: var(--bs-heading-color); font-weight: 500; text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.5px; padding: 0.875rem 1rem; } .dataTables_wrapper table.dataTable tbody td { padding: 0.75rem 1rem; vertical-align: middle; } .dataTables_wrapper table.dataTable tbody tr:hover { background-color: var(--bs-gray-50); } .dataTables_wrapper .dt-buttons .btn { margin-right: 0.25rem; } .dataTables_wrapper .pagination .page-link { border-radius: 0.5rem; margin: 0 2px; border: none; } .dataTables_wrapper .pagination .page-item.active .page-link { background-color: var(--bs-primary); color: #fff; } /* ---- Botones de accion en tablas (editar, eliminar, etc.) ---- */ table.dataTable .btn-icon, table.dataTable .btn-action { padding: 0.25rem 0.5rem; margin: 0 1px; border-radius: 0.375rem; } /* La ultima columna (Acciones) en DataTables siempre debe acomodar los iconos */ table.dataTable td:last-child, table.dataTable th:last-child { white-space: nowrap; min-width: 8rem; } /* MasterArticles: la columna ID sigue siendo la ultima en el DOM aunque este oculta; forzar ancho en Acciones */ #Master_Articles.dataTable td.tandem-ma-actions-col, #Master_Articles.dataTable th.tandem-ma-actions-col { min-width: 14rem; white-space: nowrap; vertical-align: middle; } /* Forzar que los iconos/botones embebidos en celdas no se rompan */ table.dataTable td a, table.dataTable td button, table.dataTable td .btn { white-space: nowrap; } /* Pequeno reset: imagenes y elementos dentro de celdas se alinean */ table.dataTable td img { vertical-align: middle; } /* ---- Cards: pequenos ajustes ---- */ .card .card-body { padding: 1.25rem 1.5rem; } /* ---- Forzar que los enlaces dentro de breadcrumb h4 sean discretos ---- */ h4 .text-muted a { color: inherit; text-decoration: none; } h4 .text-muted a:hover { color: var(--bs-primary); text-decoration: underline; } /* ---- Botones legacy (.btn-success, .btn-warning con success class) ---- */ a.success { color: var(--bs-success) !important; text-decoration: none; } /* Filled buttons must keep white foreground text */ .btn-primary, .btn-success, .btn-info, .btn-danger, .btn-warning { color: #fff !important; } /* ---- Compatibilidad: estilos de la app vieja que aun se usan ---- */ .well { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: 1.25rem; margin-bottom: 1rem; } .TopMenu { background: var(--bs-card-bg); border-radius: var(--bs-border-radius); box-shadow: var(--bs-box-shadow-sm); } /* ---- DataTables Buttons (export, columns, etc.) collection dropdown ---- */ div.dt-button-collection { background: #E8E5F3; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow); padding: 0.5rem; width: 14rem !important; min-width: 14rem !important; max-width: 14rem !important; z-index: 1080; inset: auto !important; position: absolute !important; } div.dt-button-collection h5 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--bs-secondary-color); margin: 0.5rem 0.75rem 0.25rem; padding: 0; border: none; } div.dt-button-collection h5.not-top-heading { margin-top: 0.5rem; border-top: 1px solid var(--bs-border-color); padding-top: 0.75rem; } div.dt-button-collection .dt-button, div.dt-button-collection button.dt-button, div.dt-button-collection a.dt-button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: #fff !important; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.9375rem; margin: 0; box-shadow: none; } div.dt-button-collection .dt-button:hover, div.dt-button-collection button.dt-button:hover, div.dt-button-collection a.dt-button:hover { background: var(--bs-primary-bg-subtle); color: #fff !important; } div.dt-button-collection .dt-button.active, div.dt-button-collection button.dt-button.active { background: var(--bs-primary); color: #fff; } /* Boton trigger (el de "") */ .dt-buttons .btn.custom-html-collection, .dt-buttons .buttons-collection { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; border-radius: 0.5rem; padding: 0.375rem 0.75rem; } .dt-buttons .btn.custom-html-collection:hover, .dt-buttons .buttons-collection:hover { background: color-mix(in sRGB, var(--bs-primary) 85%, #000); color: #fff; } /* Backdrop oscuro detras del dropdown - quitar */ div.dt-button-background { display: none !important; } /* Sub-dropdowns como pageLength y colvis dentro del collection */ div.dt-button-collection .dt-button-collection-inner select, div.dt-button-collection select { border-radius: 0.5rem; border: 1px solid var(--bs-border-color); padding: 0.25rem 0.5rem; margin: 0.25rem 0.75rem; }