/* IMPORTANTE (DOCUMENTACIÓN DIDÁCTICA): - Este proyecto se usa también como material de aprendizaje. - Mantener comentarios MUY explicativos: qué hace cada bloque, qué endpoint llama, y con qué archivo se comunica. - Cuando se agregue código nuevo, documentarlo como si lo fuera a leer un estudiante de 1er semestre. Archivo: wwwroot/css/xtrak.css Fecha: 2026-02-04 */ /* ========================= XTRAK - THEME BASE Mantiene tu look "glass" ========================= */ :root { /* Variables "glass" base. IMPORTANTE: - No usamos colores fijos (blanco/negro) para que el tema Bootstrap (data-bs-theme) pueda alternar claro/oscuro sin romper el diseño. - Estas variables se ajustan más abajo para light/dark. */ --glass-bg: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); --glass-border: color-mix(in srgb, var(--bs-body-color) 12%, transparent); --glass-shadow: 0 10px 30px rgba(0,0,0,.22); --muted: color-mix(in srgb, var(--bs-body-color) 65%, transparent); /* Fondo "ambient" (se ajusta por tema) */ --page-bg: var(--bs-body-bg); } /* ======= Ajustes por tema (Bootstrap 5.3) ======= Bootstrap usa el atributo data-bs-theme en . Aquí afinamos el look glass para que se vea bien en ambos temas. */ html[data-bs-theme="light"] { /* Glass en tema claro: Subimos un poco la opacidad para mejorar legibilidad (sin perder el efecto). */ --glass-bg: rgba(255,255,255,.78); --glass-border: rgba(0,0,0,.08); --glass-shadow: 0 10px 30px rgba(18, 38, 63, .10); --muted: rgba(0,0,0,.55); /* Glass “fuerte” para overlays (dropdowns/menús flotantes) */ --glass-bg-strong: rgba(255,255,255,.92); --page-bg: radial-gradient(1200px 600px at 10% 10%, #e9f2ff, transparent), #f6f7fb; } html[data-bs-theme="dark"] { /* Glass en tema oscuro: Subimos un poco la opacidad para que el contenido no “se pierda”. */ --glass-bg: rgba(255,255,255,.10); --glass-border: rgba(255,255,255,.10); --glass-shadow: 0 10px 30px rgba(0,0,0,.25); --muted: rgba(255,255,255,.70); /* Glass “fuerte” para overlays (dropdowns/menús flotantes) */ --glass-bg-strong: rgba(15, 23, 42, .88); --page-bg: radial-gradient(1200px 600px at 10% 10%, rgba(13,110,253,.18), transparent), #0b1220; } html, body { height: 100%; } /* Evita scroll horizontal en toda la app (típico por row/gutters o links largos) */ body { min-height: 100vh; overflow-x: hidden; } /* Mantiene tu contenedor centrado */ .app-shell { max-width: 1200px; } /* Tarjetas glass */ .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1rem; /* Sombra centralizada en variable para que se ajuste por tema. (Evita que en tema claro quede “muy pesada”). */ box-shadow: var(--glass-shadow); } /* ========================================================= TOPBAR y MENÚS FLOTANTES Objetivo: - Garantizar que el TopBar SIEMPRE quede por encima del contenido. - Hacer los dropdowns más legibles (menos transparentes) sin perder el glass. ========================================================= */ /* Contenedor donde layout.js inyecta el TopBar */ #topbar-container { position: sticky; top: 0; z-index: 2200; overflow: visible; isolation: isolate; } /* Barra superior (la clase .topbar la usamos en el parcial TopBar.html) */ .topbar { position: sticky; top: 0; z-index: 2200; overflow: visible; } /* Dropdowns del TopBar: glass más “fuerte” y encima de todo */ .topbar .dropdown-menu { z-index: 2300; margin-top: .5rem; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Items dentro del menú: mejora contraste */ .topbar .dropdown-menu .dropdown-item { color: var(--bs-body-color); } .topbar .dropdown-menu .dropdown-item:hover, .topbar .dropdown-menu .dropdown-item:focus { background: color-mix(in srgb, var(--bs-primary) 12%, transparent); } .topbar, .topbar .container-fluid, .topbar .dropdown, .topbar-actions, #topbar-container { overflow: visible !important; } .topbar-actions { flex-wrap: nowrap; } .small-muted { color: var(--muted); } .brand-logo { width: 28px; height: 28px; object-fit: contain; } .brand-text { letter-spacing: .2px; } /* ========================= NAV ITEM (tu "nav-pill") ========================= */ .nav-pill { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 12px; text-decoration: none; color: rgba(255,255,255,.85); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); /* IMPORTANTE: evita que textos largos creen scroll horizontal */ white-space: normal; word-break: break-word; } .nav-pill:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); } /* ========================= SIDEBAR OFFCANVAS Objetivo: siempre oculto. Se muestra con botón hamburguesa. ========================= */ /* el offcanvas en bootstrap tiene ancho propio; aquí lo fijamos */ #sidebar { width: 280px; max-width: 85vw; overflow-x: hidden; /* mata scroll horizontal interno */ } /* cuerpo con scroll vertical si el menú crece */ #sidebar .sidebar-body { max-height: calc(100vh - 110px); /* header + padding aprox */ overflow-y: auto; overflow-x: hidden; } /* Ajuste visual para separación del contenido */ .main-pad { padding-top: 1rem; } /* Fondo general (depende de --page-bg por tema) */ body { background: var(--page-bg); } /* Utilidades que antes estaban inline en algunas páginas */ .mono { font-variant-numeric: tabular-nums; } /* Alias para textos secundarios (varios HTML usan .muted) */ .muted { color: var(--muted) !important; } /* KPI box para pantallas de costos/precio */ .kpi { border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--bs-body-color) 18%, transparent); padding: .85rem; background: color-mix(in srgb, var(--bs-body-bg) 84%, transparent); } /* Cabecera sticky (para acciones en pantallas largas) */ .sticky-actions { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bs-body-bg) 86%, transparent); backdrop-filter: blur(8px); } /* Badge suave (para etiquetas de contexto) */ .badge-soft { background: color-mix(in srgb, var(--bs-primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bs-primary) 22%, transparent); color: var(--bs-primary); } .readonly { background: color-mix(in srgb, var(--bs-body-color) 4%, transparent); } /* Evita que rompa el layout por columnas angostas */ .table thead th { white-space: nowrap; } .list-group-item-action { cursor: pointer; } /* ===================================================== Mensajes de estado (hdrMsg) ===================================================== - layout.js garantiza que exista en todas las páginas. - Para escribir: window.XtrakUI.setHdrMsg('texto', 'info'|'success'|'warn'|'error') - Las clases siguientes mantienen el look "glass" y se adaptan a light/dark. */ .xtrak-msg { display: inline-block; padding: .25rem .5rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--bs-body-color) 18%, transparent); background: color-mix(in srgb, var(--bs-body-bg) 86%, transparent); color: var(--bs-body-color); } .xtrak-msg-info { border-color: color-mix(in srgb, var(--bs-primary) 35%, transparent); background: color-mix(in srgb, var(--bs-primary) 12%, transparent); } .xtrak-msg-success { border-color: color-mix(in srgb, var(--bs-success) 35%, transparent); background: color-mix(in srgb, var(--bs-success) 12%, transparent); } .xtrak-msg-warn { border-color: color-mix(in srgb, var(--bs-warning) 45%, transparent); background: color-mix(in srgb, var(--bs-warning) 14%, transparent); } .xtrak-msg-error { border-color: color-mix(in srgb, var(--bs-danger) 45%, transparent); background: color-mix(in srgb, var(--bs-danger) 14%, transparent); } /* ========================= PRODUCTOS · IMÁGENES (UI) - Solo UI por ahora (localStorage). - Cuando haya backend, este bloque sigue sirviendo para la estética. ========================= */ .product-media .media-main-wrap{ position: relative; width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-border); background: var(--glass-bg); } .product-media .media-main-img{ display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .product-media .media-empty{ position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; background: color-mix(in srgb, var(--glass-bg) 88%, transparent); backdrop-filter: blur(6px); } .product-media .media-thumbs{ display: flex; gap: 10px; flex-wrap: wrap; } .product-media .media-thumb{ width: 64px; height: 64px; border-radius: 12px; overflow: hidden; border: 1px solid var(--glass-border); background: var(--glass-bg); padding: 0; cursor: pointer; } .product-media .media-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; } .product-media .media-thumb.active{ outline: 2px solid color-mix(in srgb, var(--bs-primary) 75%, transparent); outline-offset: 2px; } /* ========================= FORM ALIGNMENT (ORDEN VISUAL) Objetivo: que los campos queden en la misma "altura" y no se vean desordenados. ========================= */ .field-note{ line-height: 1.25; } /* En pantallas grandes, el selector de estado debe ser legible */ #hdrEstado{ min-width: 180px; } /* ===================================================== RESPONSIVE-FIRST 2026-03-29 Regla vigente del proyecto: - una sola UI responsive - optimizada para celular, tablet y PC ===================================================== */ :root { --shell-max: 1320px; --page-pad-x: clamp(.85rem, 1.6vw, 1.25rem); --page-pad-y: clamp(.85rem, 1.6vw, 1.25rem); --control-min-h: 42px; } .xtrak-page { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .app-shell, .page-shell { max-width: var(--shell-max); padding-left: var(--page-pad-x); padding-right: var(--page-pad-x); } .page-section { padding-inline: 0; } .page-header, .page-head-card, .sticky-actions { border-radius: 18px; } .page-toolbar, .page-actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; } .page-title-block { min-width: 0; } .page-title-block h1, .page-title-block h2, .page-title-block h3, .page-title-block h4, .page-title-block h5, .page-title-block h6 { overflow-wrap: anywhere; } .glass, .card, .modal-content { overflow: hidden; } .card, .modal-content { border-radius: 16px; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } .card-header { background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent); border-bottom: 1px solid var(--glass-border); font-weight: 600; } .form-control, .form-select, .btn, .input-group-text { min-height: var(--control-min-h); } .form-control, .form-select { border-radius: 12px; } .btn { border-radius: 12px; } .btn-sm, .form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .btn { min-height: 36px; } textarea.form-control { min-height: 96px; } .table-responsive { border-radius: 14px; overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .table { vertical-align: middle; } .table > :not(caption) > * > * { padding: .7rem .75rem; } .table thead th { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--bs-body-bg) 96%, transparent); backdrop-filter: blur(8px); } .sticky-actions { top: calc(.4rem + env(safe-area-inset-top, 0px)); z-index: 1020; padding-inline: .25rem; border-bottom: 0 !important; } .sticky-actions .container-fluid, .sticky-actions .page-header-inner { padding-inline: 0; } .topbar { margin: .65rem var(--page-pad-x) 0; padding-inline: .35rem; border-radius: 18px; } .topbar .container-fluid { gap: .5rem; } .topbar .navbar-brand { min-width: 0; margin-right: auto; } .topbar .navbar-brand span { white-space: nowrap; } .topbar-btn { min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; } .topbar .dropdown-menu { max-width: min(92vw, 360px); } #sidebarOffcanvas { width: min(86vw, 340px); max-width: 340px; } #sidebarOffcanvas .accordion-item { border-radius: 14px; } #sidebarOffcanvas .accordion-button, #sidebarOffcanvas .nav-link { min-height: 44px; } #sidebarOffcanvas .nav-link { border-radius: 12px; color: var(--bs-body-color); } #sidebarOffcanvas .nav-link.active, #sidebarOffcanvas .nav-link:hover, #sidebarOffcanvas .nav-link:focus { background: color-mix(in srgb, var(--bs-primary) 12%, transparent); color: var(--bs-body-color); } #sidebarOffcanvas .accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--bs-primary) 12%, transparent); color: var(--bs-body-color); } .sidebar-context { padding: .95rem; border-radius: 14px; } .sidebar-context-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .sidebar-context-value { font-weight: 600; line-height: 1.25; word-break: break-word; } #btnLogoutSidebar.nav-link { width: 100%; } .modal-dialog { margin: max(1rem, env(safe-area-inset-top, 0px)) auto; } .modal-content { background: var(--glass-bg-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .modal-body { max-height: min(70vh, 680px); overflow: auto; } .badge-soft { white-space: normal; text-align: center; } .readonly, .form-control[readonly] { opacity: .92; } @media (max-width: 991.98px) { .topbar .navbar-brand span, #topbar-username { max-width: 20vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sticky-actions { position: static; padding-inline: 0; background: transparent; backdrop-filter: none; } .sticky-actions > .container-fluid, .sticky-actions > .page-header-inner { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: var(--glass-shadow); padding: 1rem; } .page-shell .glass[style*="position: sticky"], .page-shell [style*="position: sticky"] { position: static !important; top: auto !important; } } @media (max-width: 767.98px) { :root { --page-pad-x: .85rem; --page-pad-y: .85rem; } .topbar { margin-top: .45rem; padding-inline: .15rem; } .topbar .container-fluid { flex-wrap: wrap; row-gap: .55rem; } .topbar .navbar-brand { order: 1; flex: 1 1 auto; } .topbar .ms-auto { order: 2; width: 100%; justify-content: flex-end; gap: .45rem !important; } .topbar-actions { width: 100%; justify-content: flex-end; } .topbar .dropdown-menu { max-width: min(94vw, 320px); } .page-shell > .row, .page-shell .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; } .page-toolbar, .page-actions, .d-flex.gap-2, .d-flex.gap-3 { row-gap: .55rem; } .page-toolbar > .btn, .page-actions > .btn, .page-toolbar > a.btn, .page-actions > a.btn, .page-shell .header-actions > .btn, .page-shell .header-actions > a.btn { flex: 1 1 100%; } .page-shell .d-flex.align-items-center.justify-content-between, .page-shell .d-flex.flex-wrap.align-items-center.justify-content-between, .page-shell .d-flex.flex-wrap.align-items-start.justify-content-between { align-items: stretch !important; } .page-shell h3, .page-shell h4, .page-shell h5 { line-height: 1.15; } .page-shell .badge-soft, .page-shell .badge { max-width: 100%; } .table { font-size: .92rem; } .table > :not(caption) > * > * { padding: .6rem .55rem; } .glass, .card, .modal-content { border-radius: 14px; } .page-shell .container, .page-shell .container-fluid, .page-shell .page-section { padding-left: 0; padding-right: 0; } } @media (min-width: 768px) and (max-width: 1199.98px) { .app-shell, .page-shell { max-width: 1040px; } #sidebarOffcanvas { width: min(52vw, 340px); } } /* ========================= Ajustes de esta entrega ========================= */ .modal-backdrop.show { opacity: .72; } .cursor-pointer { cursor: pointer; } .login-shell { padding: clamp(1rem, 2vw, 1.5rem); } .login-hero { justify-content: center; } .login-hero-logo { display: inline-flex; align-items: center; justify-content: center; border-radius: 24px; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--bs-body-bg) 76%, transparent); box-shadow: var(--glass-shadow); width: 92px; height: 92px; transition: all .2s ease; } .login-hero-logo img { width: 70%; height: 70%; object-fit: contain; } .login-hero-logo--large { width: min(100%, 260px); height: 260px; margin-inline: auto; } .login-hero-logo--compact { width: 84px; height: 84px; } #dvWrap .form-control { max-width: 100%; } @media (max-width: 767.98px) { .login-hero-logo--large { width: min(100%, 180px); height: 180px; } .product-media .media-main-wrap { min-height: 220px; } } /* ===================================================== TERCEROS - layout lateral de ficha + buscador Objetivo: - En escritorio: ficha a la izquierda y buscador a la derecha. - En móvil/tablet: ficha arriba y buscador debajo. ===================================================== */ .terceros-layout { align-items: flex-start; } .terceros-main-col, .terceros-search-col { display: flex; flex-direction: column; } .terceros-search-panel { position: sticky; top: calc(6.4rem + env(safe-area-inset-top, 0px)); } .terceros-search-results { max-height: min(62vh, 720px); } .terceros-doc-type-col { max-width: 320px; } .terceros-doc-number-col { min-width: 0; } .terceros-doc-dv-col { max-width: 90px; } @media (max-width: 991.98px) { .terceros-search-panel { position: static; top: auto; } .terceros-search-results { max-height: none; } } .product-page-v3 #modalDuplicarVariante .modal-body .form-check { padding-top: .2rem; } .product-page-v3 #dupVarianteOrigen { max-width: 100%; word-break: break-word; } /* ========================= Empresa activa en topbar ========================= */ .topbar-company { display: inline-flex; flex-direction: column; justify-content: center; min-width: 0; max-width: min(34vw, 380px); padding: .4rem .75rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--bs-body-color) 14%, transparent); background: color-mix(in srgb, var(--bs-body-bg) 72%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .topbar-company-label { font-size: .68rem; line-height: 1; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } #topbar-company-name { display: block; font-size: .92rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-company.is-empty { opacity: .78; } @media (max-width: 991.98px) { .topbar-company { max-width: min(42vw, 300px); } } @media (max-width: 767.98px) { .topbar-company { order: 3; width: 100%; max-width: none; } .topbar-company-label { font-size: .64rem; } } /* ========================= CATÁLOGOS · Toolbar ordenado ========================= */ .catalog-toolbar { padding-top: .15rem; } .catalog-toolbar-grid { display: grid; grid-template-columns: minmax(220px, 270px) minmax(190px, 220px) minmax(260px, 1fr) minmax(240px, 320px); gap: 1rem; align-items: end; } .catalog-toolbar-item { min-width: 0; } .catalog-toolbar-item .form-label { margin-bottom: .45rem; font-weight: 500; } .catalog-actions-wrap { min-height: var(--control-min-h); align-items: center; } .catalog-actions-wrap .btn { min-width: 90px; } @media (max-width: 1199.98px) { .catalog-toolbar-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); } } @media (max-width: 767.98px) { .catalog-toolbar-grid { grid-template-columns: 1fr; gap: .85rem; } .catalog-actions-wrap .btn { flex: 1 1 calc(50% - .5rem); } } /* ===================================================== XTRAK · BRANDING 2026-04-11 - isotipo en espacios compactos - logo horizontal donde hay contexto suficiente ===================================================== */ .brand-logo-iso { width: 36px; height: 36px; object-fit: contain; border-radius: 10px; } .brand-logo-horizontal { height: 38px; width: auto; object-fit: contain; display: block; } .topbar-wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .topbar-left { min-width: 0; } .navbar-brand { min-width: 0; } .login-brand-panel { display: inline-flex; align-items: center; justify-content: center; width: min(100%, 340px); padding: 1rem 1.15rem; border-radius: 24px; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--bs-body-bg) 78%, transparent); box-shadow: var(--glass-shadow); } .login-brand-horizontal { width: 100%; height: auto; object-fit: contain; } /* ===================================================== PRODUCTOS V3 · Rediseño funcional ===================================================== */ .product-main-shell { padding-bottom: 6rem; } .product-page-hero { padding: 1.25rem 1.35rem; } .product-page-hero__content { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .product-page-hero__actions { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; } .product-card { padding: 1.1rem 1.15rem; } .product-card__header { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .product-search-zone { border-top: 1px solid color-mix(in srgb, var(--bs-body-color) 12%, transparent); padding-top: .9rem; } .smart-search-results { max-height: 260px; overflow: auto; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--bs-body-color) 10%, transparent); background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); } .smart-search-item { background: transparent; border-left: 0; border-right: 0; } .smart-search-item:first-child { border-top: 0; } .variant-context-chip { display: inline-flex; align-items: center; padding: .55rem .85rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--bs-primary) 18%, transparent); background: color-mix(in srgb, var(--bs-primary) 10%, transparent); color: var(--bs-primary); font-size: .9rem; line-height: 1.2; } .variant-table-wrap { border: 1px solid color-mix(in srgb, var(--bs-body-color) 10%, transparent); border-radius: 18px; overflow: hidden; } .variant-table { margin-bottom: 0; } .variant-table tbody tr.table-active > * { background: color-mix(in srgb, var(--bs-primary) 14%, transparent); } .variant-cards { display: grid; gap: .85rem; } .variant-card { padding: .95rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--bs-body-color) 12%, transparent); background: color-mix(in srgb, var(--bs-body-bg) 86%, transparent); } .variant-card.is-active { border-color: color-mix(in srgb, var(--bs-primary) 34%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary) 22%, transparent); } .variant-card__header, .variant-card__actions, .config-toolbar, .product-context-card__head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; } .variant-card__code { font-weight: 700; letter-spacing: .02em; } .variant-card__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: .85rem; } .variant-card__body span, .product-context-grid .small { display: block; margin-bottom: .2rem; } .product-side-sticky { display: grid; gap: 1rem; align-content: start; grid-auto-flow: row; } .product-main-grid { align-items: start; } .product-context-card { background: color-mix(in srgb, var(--bs-body-bg) 90%, transparent); } .product-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .product-context-grid__full { grid-column: 1 / -1; } .config-card__header { align-items: flex-start; } .product-main-grid > [class*="col-"] { display: flex; flex-direction: column; } .product-main-grid > [class*="col-"] > .product-card:last-child, .product-main-grid > [class*="col-"] > .product-side-sticky:last-child { margin-bottom: 0; } .config-current-variant { flex: 1 1 220px; padding: .75rem .9rem; border-radius: 16px; background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); border: 1px solid color-mix(in srgb, var(--bs-body-color) 10%, transparent); font-weight: 600; } .config-toolbar__actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; } .config-tabs { gap: .5rem; } .config-tabs .nav-link { border-radius: 999px; } .bom-placeholder__box { padding: 1rem; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--bs-body-color) 18%, transparent); background: color-mix(in srgb, var(--bs-body-bg) 90%, transparent); } .kpi-stack { display: grid; gap: .85rem; } .kpi-compact { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .product-media--compact .media-main-wrap--compact { width: 100%; min-height: auto; } .product-media--compact .media-main-img { aspect-ratio: 16 / 9; width: 100%; max-height: 160px; object-fit: cover; } .product-media--compact .media-thumb { width: 58px; height: 58px; } .product-media--compact #mediaThumbs { gap: .6rem; } @media (max-width: 1199.98px) { .product-side-sticky { position: static; top: auto; } } @media (max-width: 767.98px) { .topbar-wrap { gap: .75rem; } .brand-logo-horizontal { height: 30px; } .login-brand-panel { width: 100%; padding: .9rem 1rem; } .product-page-hero { padding: 1rem; } .product-page-hero__actions { width: 100%; } .product-page-hero__actions > .btn, .product-page-hero__actions > .dropdown { flex: 1 1 100%; } .product-page-hero__actions .dropdown > .btn { width: 100%; } .product-card { padding: 1rem; } .variant-card__body, .product-context-grid { grid-template-columns: 1fr; } .config-toolbar__actions { width: 100%; justify-content: stretch; } .config-toolbar__actions > .btn { flex: 1 1 100%; } .kpi-compact { flex-direction: column; align-items: flex-start; } } .product-media--small .media-main-wrap--small { min-height: 140px; } .product-media--small .media-main-img { aspect-ratio: 16 / 9; max-height: 145px; object-fit: cover; } .product-media--small .media-empty { min-height: 140px; } @media (max-width: 1199.98px) { .product-media--small .media-main-wrap--small, .product-media--small .media-empty { min-height: 130px; } } @media (max-width: 767.98px) { .product-media--small .media-main-wrap--small, .product-media--small .media-empty { min-height: 120px; } .product-media--small .media-main-img { max-height: 130px; } } .product-media--small .media-empty .display-6 { font-size: 2.2rem; } /* ===================================================== PRODUCTOS V3 - layout 50 / 30 / 20 + 50 / 50 ===================================================== */ .product-page-v3 .product-page-hero .muted { display: none; } .product-page-v3 .product-page-hero { padding: 1.15rem 1.25rem; } .product-page-v3 .product-page-hero__actions .btn, .product-page-v3 .product-page-hero__actions .dropdown > .btn { min-width: 0; } .product-page-v3 .btn-icon-only { width: 2.45rem; height: 2.45rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .product-page-v3 .product-card__header--tight { align-items: center; } .product-page-v3 .product-switch-inline .form-check-input { margin-top: 0; } .product-workspace { display: grid; gap: 1rem; } .product-top-grid { display: grid; grid-template-columns: 5fr 3fr 2fr; gap: 1rem; align-items: stretch; } .product-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } .product-top-grid > .product-card, .product-bottom-grid > .product-card { margin-bottom: 0; height: 100%; } .product-page-v3 .card-head .product-search-zone { min-height: 0; } .product-page-v3 .smart-search-results { max-height: 220px; } .product-page-v3 .card-image .media-main-wrap { width: 100%; } .product-page-v3 .card-image .media-main-img { aspect-ratio: 4 / 5; max-height: 320px; object-fit: contain; width: 100%; } .product-page-v3 .card-image .media-empty { min-height: 220px; } .product-page-v3 .card-image #mediaThumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); gap: .5rem; } .product-page-v3 .card-image .media-thumb { width: 100%; height: 52px; } .product-page-v3 .card-variants { display: flex; flex-direction: column; min-height: 0; } .product-page-v3 .variant-listbox { display: grid; gap: .7rem; flex: 1 1 auto; min-height: 0; max-height: clamp(300px, 44vh, 560px); overflow-y: auto; padding-right: .2rem; } .product-page-v3 .variant-list-item { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; padding: .8rem .9rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--bs-body-color) 10%, transparent); background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); cursor: pointer; transition: border-color .18s ease, transform .18s ease, background .18s ease; } .product-page-v3 .variant-list-item:hover { border-color: color-mix(in srgb, var(--bs-primary) 24%, transparent); } .product-page-v3 .variant-list-item.is-active { border-color: color-mix(in srgb, var(--bs-primary) 34%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary) 20%, transparent); background: color-mix(in srgb, var(--bs-primary) 10%, transparent); } .product-page-v3 .variant-list-item.is-inactive { color: color-mix(in srgb, var(--bs-body-color) 48%, transparent); } .product-page-v3 .variant-list-item.is-inactive .variant-list-item__meta, .product-page-v3 .variant-list-item.is-inactive .variant-list-item__line2 { color: color-mix(in srgb, var(--bs-body-color) 44%, transparent); } .product-page-v3 .variant-list-item__main { min-width: 0; } .product-page-v3 .variant-list-item__line1 { font-weight: 700; line-height: 1.2; margin-bottom: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-page-v3 .variant-list-item__line2, .product-page-v3 .variant-list-item__meta { font-size: .88rem; color: color-mix(in srgb, var(--bs-body-color) 66%, transparent); } .product-page-v3 .variant-list-item__actions { display: flex; align-items: center; gap: .4rem; } .product-page-v3 .variant-context-chip { padding: .45rem .7rem; font-size: .83rem; } .product-page-v3 .config-toolbar { align-items: flex-start; } .product-page-v3 .config-current-variant { min-height: 48px; } .product-page-v3 .config-tabs .nav-link { padding: .55rem .95rem; } .product-page-v3 .price-card .tab-pane .row > [class*="col-"] { display: flex; flex-direction: column; } .product-page-v3 .ficha-card .bom-placeholder__box, .product-page-v3 .price-card .bom-placeholder__box { min-height: 160px; } @media (max-width: 1399.98px) { .product-top-grid { grid-template-columns: 1.65fr 1fr .85fr; } } @media (max-width: 1199.98px) { .product-top-grid { grid-template-columns: 1fr; } .product-top-grid .card-head { order: 1; } .product-top-grid .card-variants { order: 2; } .product-top-grid .card-image { order: 3; } .product-bottom-grid { grid-template-columns: 1fr; } } @media (max-width: 767.98px) { .product-page-v3 .product-page-hero__actions { width: auto; flex-wrap: nowrap; } .product-page-v3 .product-page-hero__actions > .btn, .product-page-v3 .product-page-hero__actions > .dropdown { flex: 0 0 auto; } .product-top-grid { grid-template-columns: 3fr 2fr; } .product-top-grid .card-head { grid-column: 1 / -1; } .product-top-grid .card-variants { grid-column: 1 / 2; order: 2; } .product-top-grid .card-image { grid-column: 2 / 3; order: 3; } .product-page-v3 .card-image .media-main-img { aspect-ratio: 1 / 1.2; max-height: 220px; } .product-page-v3 .card-image .media-empty { min-height: 160px; } .product-page-v3 .config-toolbar__actions { width: 100%; } .product-page-v3 .config-toolbar__actions > .btn { flex: 1 1 calc(50% - .5rem); } } @media (max-width: 479.98px) { .product-page-v3 .product-page-hero__actions { gap: .45rem; } } /* ==== PRODUCTOS V3 · compactación adicional 2026-04-16 ==== */ .product-page-v3 .product-head-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem .9rem; } .product-page-v3 .field-span-4 { grid-column: 1 / -1; } .product-page-v3 .product-head-grid .form-label { margin-bottom: .35rem; } .product-page-v3 .product-head-grid .form-control, .product-page-v3 .product-head-grid .form-select { min-width: 0; } .product-page-v3 .field-state #hdrEstado { min-width: 0; width: 100%; max-width: 10rem; } .product-page-v3 .variant-listbox { gap: .55rem; max-height: clamp(240px, 36vh, 420px); } .product-page-v3 .variant-list-item { grid-template-columns: 1fr auto; gap: .6rem; padding: .72rem .8rem; } .product-page-v3 .variant-list-item__line1, .product-page-v3 .variant-list-item__line2 { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; } .product-page-v3 .variant-list-item__title, .product-page-v3 .variant-list-item__code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-page-v3 .variant-list-item__line1 { margin-bottom: .18rem; } .product-page-v3 .variant-list-item__line2 { font-size: .86rem; color: color-mix(in srgb, var(--bs-body-color) 66%, transparent); } .product-page-v3 .variant-list-item__qty, .product-page-v3 .variant-list-item__unit { flex: 0 0 auto; font-size: .82rem; color: color-mix(in srgb, var(--bs-body-color) 64%, transparent); } .product-page-v3 .variant-list-item__actions { align-self: center; } .product-page-v3 .variant-list-item.is-inactive .variant-list-item__qty, .product-page-v3 .variant-list-item.is-inactive .variant-list-item__unit { color: color-mix(in srgb, var(--bs-body-color) 44%, transparent); } .product-page-v3 .config-header-compact { gap: .75rem; align-items: flex-start; } .product-page-v3 .config-toolbar__actions--header { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; } .product-page-v3 .config-variant-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; } .product-page-v3 .config-current-variant { min-height: 0; padding: .72rem .9rem; font-weight: 600; border-radius: 14px; } .product-page-v3 .config-tabs { margin: 0; gap: .45rem; justify-content: flex-end; } .product-page-v3 .config-tabs .nav-link { padding: .48rem .82rem; font-size: .95rem; } .product-page-v3 .tab-content.pt-3 { padding-top: .85rem !important; } .product-page-v3 .price-card .tab-pane .row { row-gap: .8rem !important; } .product-page-v3 .price-card .form-label { margin-bottom: .28rem; } .product-page-v3 .price-card .form-control, .product-page-v3 .price-card .form-select { padding-top: .5rem; padding-bottom: .5rem; } .product-page-v3 .card-image .media-main-img { max-height: 250px; } .product-page-v3 .card-image .media-empty { min-height: 180px; } @media (max-width: 991.98px) { .product-page-v3 .product-head-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; } .product-page-v3 .product-head-grid .form-label { font-size: .83rem; } .product-page-v3 .product-head-grid .form-control, .product-page-v3 .product-head-grid .form-select { font-size: .92rem; padding: .48rem .7rem; } .product-page-v3 .field-state #hdrEstado { max-width: 100%; } .product-page-v3 .config-header-compact { flex-direction: column; align-items: stretch; } .product-page-v3 .config-toolbar__actions--header { justify-content: flex-start; } .product-page-v3 .config-variant-row { grid-template-columns: 1fr; } .product-page-v3 .config-tabs { justify-content: flex-start; } } @media (max-width: 767.98px) { .product-page-v3 .product-head-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; } .product-page-v3 .product-head-grid .form-label { font-size: .78rem; } .product-page-v3 .product-head-grid .form-control, .product-page-v3 .product-head-grid .form-select { font-size: .84rem; padding: .42rem .58rem; } .product-page-v3 .product-top-grid { grid-template-columns: 3fr 2fr; align-items: start; } .product-page-v3 .product-top-grid .card-head { grid-column: 1 / -1; } .product-page-v3 .product-top-grid .card-variants { grid-column: 1 / 2; } .product-page-v3 .product-top-grid .card-image { grid-column: 2 / 3; } .product-page-v3 .card-image .media-main-img { aspect-ratio: 1 / 1.18; max-height: 180px; } .product-page-v3 .card-image .media-empty { min-height: 140px; } .product-page-v3 .price-card .tab-pane .row > [class*="col-"] { flex: 0 0 33.3333%; max-width: 33.3333%; } .product-page-v3 .price-card .tab-pane .row { display: flex; flex-wrap: wrap; } } @media (max-width: 419.98px) { .product-page-v3 .product-head-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .product-page-v3 .field-span-4 { grid-column: 1 / -1; } .product-page-v3 .product-page-hero__actions .btn, .product-page-v3 .product-page-hero__actions .dropdown > .btn { width: 2.5rem; height: 2.5rem; padding: 0; } .product-page-v3 .config-toolbar__actions--header > .btn { flex: 1 1 calc(50% - .25rem); } .product-page-v3 .config-tabs .nav-link { font-size: .88rem; padding-inline: .7rem; } } /* ==== PRODUCTOS V3 · ronda compactación 03 ==== */ .product-page-v3 .product-page-hero { position: relative; z-index: 30; overflow: visible; } .product-page-v3 .product-page-hero .dropdown-menu { z-index: 2400; background: var(--glass-bg-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .product-page-v3 .product-workspace { position: relative; z-index: 1; } .product-page-v3 .field-state { max-width: 9rem; } .product-page-v3 .field-state #hdrEstado { max-width: 8.4rem; } .product-page-v3 .card-variants .product-card__header, .product-page-v3 .card-image .product-card__header, .product-page-v3 .price-card .product-card__header, .product-page-v3 .ficha-card .product-card__header { margin-bottom: .2rem; } .product-page-v3 .variant-list-item { padding: .62rem .72rem; } .product-page-v3 .variant-list-item__line1, .product-page-v3 .variant-list-item__line2 { margin-bottom: .08rem; } .product-page-v3 .variant-list-item__title { padding-right: .4rem; } .product-page-v3 .variant-list-item__qty, .product-page-v3 .variant-list-item__unit, .product-page-v3 .variant-list-item__code { font-size: .81rem; } .product-page-v3 .variant-list-item__actions .btn { width: 2.35rem; height: 2.35rem; } .product-page-v3 .config-header-compact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: center; } .product-page-v3 .config-toolbar__actions--header { flex-wrap: nowrap; gap: .4rem; } .product-page-v3 .config-toolbar__actions--header > .btn { white-space: nowrap; } .product-page-v3 .config-variant-row { gap: .65rem; align-items: center; } .product-page-v3 .config-current-variant { min-height: 0; padding: .62rem .82rem; font-size: .95rem; line-height: 1.2; } .product-page-v3 #precioMsg { min-height: 0; margin-top: 0 !important; } .product-page-v3 .tab-content.pt-3 { padding-top: .55rem !important; } .product-page-v3 .price-card .form-label { margin-bottom: .18rem; font-size: .94rem; } .product-page-v3 .price-card .form-control, .product-page-v3 .price-card .form-select { padding-top: .42rem; padding-bottom: .42rem; } .product-page-v3 .price-card .tab-pane .row { row-gap: .62rem !important; } .product-page-v3 .price-card .nav-pills { row-gap: .35rem; } @media (max-width: 991.98px) { .product-page-v3 .config-header-compact { grid-template-columns: minmax(0, 1fr) auto; } .product-page-v3 .config-toolbar__actions--header > .btn { min-width: 2.4rem; width: 2.4rem; height: 2.4rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .product-page-v3 .config-variant-row { grid-template-columns: 1fr; gap: .55rem; } .product-page-v3 .config-tabs { justify-content: flex-start; } } @media (max-width: 767.98px) { .product-page-v3 .variant-list-item { padding: .56rem .6rem; } .product-page-v3 .variant-list-item__title { font-size: .9rem; } .product-page-v3 .variant-list-item__qty, .product-page-v3 .variant-list-item__unit, .product-page-v3 .variant-list-item__code { font-size: .74rem; } .product-page-v3 .config-header-compact { grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; } .product-page-v3 .config-toolbar__actions--header { gap: .3rem; } .product-page-v3 .config-toolbar__actions--header > .btn { width: 2.28rem; height: 2.28rem; } .product-page-v3 .price-card .form-label { font-size: .86rem; } .product-page-v3 .price-card .form-control, .product-page-v3 .price-card .form-select, .product-page-v3 .config-current-variant { font-size: .88rem; } } /* ===================================================== PRODUCTOS V3 - cierre visual de productos ===================================================== */ .product-page-v3 .smart-search-results { position: relative; z-index: 35; max-height: 12.5rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .product-page-v3 .smart-search-item { display: grid; gap: .3rem; padding-block: .65rem; } .product-page-v3 .smart-search-item__title { font-size: .82rem; font-weight: 600; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-page-v3 .smart-search-item__meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .72rem; color: var(--muted); } .product-page-v3 .product-page-hero, .product-page-v3 .product-page-hero .dropdown, .product-page-v3 .product-page-hero .dropdown-menu { position: relative; z-index: 60; } .product-page-v3 .config-header-compact { gap: .7rem; flex-wrap: nowrap; } .product-page-v3 .config-header-compact > h4 { font-size: 1.05rem; white-space: nowrap; flex: 0 0 auto; } .product-page-v3 .config-toolbar__actions--header { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: .45rem; } .product-page-v3 .config-toolbar__actions--header > .btn { display: inline-flex; align-items: center; gap: .38rem; min-width: 0; font-size: .82rem; padding: .38rem .62rem; white-space: nowrap; } .product-page-v3 .config-toolbar__actions--header > .btn i { font-size: .86rem; line-height: 1; } .product-page-v3 .config-toolbar__actions--header > .btn .btn-label { display: inline; } .product-page-v3 .config-variant-row { gap: .6rem; } .product-page-v3 .config-current-variant { padding: .6rem .8rem; font-size: .95rem; line-height: 1.2; } .product-page-v3 .tab-content.pt-3 { padding-top: .75rem !important; } .product-page-v3 .price-card .tab-pane .row { --bs-gutter-x: .75rem; --bs-gutter-y: .65rem; } .product-page-v3 .price-card .form-label { margin-bottom: .3rem; font-size: .88rem; } .product-page-v3 .price-card .form-control, .product-page-v3 .price-card .form-select { min-height: 2.5rem; padding-top: .42rem; padding-bottom: .42rem; } .product-page-v3 #precioMsg { display: none !important; } @media (max-width: 1399.98px) { .product-page-v3 .config-header-compact > h4 { font-size: .96rem; } .product-page-v3 .config-toolbar__actions--header > .btn { font-size: .74rem; padding-inline: .54rem; } } @media (max-width: 991.98px) { .product-page-v3 .config-header-compact { align-items: center; } .product-page-v3 .config-toolbar__actions--header > .btn .btn-label { display: none; } .product-page-v3 .config-toolbar__actions--header > .btn { width: 2.35rem; height: 2.35rem; padding: 0; justify-content: center; border-radius: .8rem; } } @media (max-width: 767.98px) { .product-page-v3 .variant-list-item__title { font-size: .92rem; } .product-page-v3 .variant-list-item__qty, .product-page-v3 .variant-list-item__unit, .product-page-v3 .variant-list-item__code { font-size: .74rem; } .product-page-v3 .smart-search-item__title { font-size: .76rem; } } /* ==== FASE 4B · Matriz de variantes + scroll controlado ==== */ .product-page-v3 .card-variants { overflow: hidden; } .product-page-v3 .variant-listbox { scrollbar-width: thin; } .product-page-v3 .variant-listbox::-webkit-scrollbar { width: 8px; } .product-page-v3 .variant-listbox::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--bs-body-color) 22%, transparent); border-radius: 999px; } .product-page-v3 .matrix-summary { display: grid; gap: .35rem; padding: .8rem .95rem; border-radius: 18px; background: color-mix(in srgb, var(--bs-primary) 6%, transparent); border: 1px solid color-mix(in srgb, var(--bs-primary) 14%, transparent); } /* ==== FASE 4C · Matriz avanzada + scroll de variantes ==== */ .product-top-grid { align-items: stretch; } .product-page-v3 .card-variants { max-height: clamp(360px, 64vh, 780px); overflow: hidden; } .product-page-v3 .card-variants .product-card__header { flex: 0 0 auto; } .product-page-v3 .variant-listbox { flex: 1 1 auto; min-height: 180px; max-height: none; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } .product-page-v3 .matrix-picker-box { display: grid; gap: .75rem; min-height: 100%; padding: .8rem; border: 1px solid color-mix(in srgb, var(--bs-body-color) 10%, transparent); border-radius: 18px; background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); } .product-page-v3 .matrix-picker-box__top { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: start; } .product-page-v3 .matrix-selected-list { display: grid; gap: .5rem; align-content: start; min-height: 108px; max-height: 240px; overflow-y: auto; padding-right: .1rem; } .product-page-v3 .matrix-selected-item { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; padding: .55rem .7rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--bs-body-color) 10%, transparent); background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent); } .product-page-v3 .matrix-selected-item__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-page-v3 .matrix-selected-empty { padding: .8rem; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--bs-body-color) 16%, transparent); color: var(--bs-secondary-color); text-align: center; } @media (max-width: 991.98px) { .product-page-v3 .card-variants { max-height: clamp(320px, 58vh, 700px); } .product-page-v3 .matrix-picker-box__top { grid-template-columns: 1fr; } } /* ==== FASE 4D · Código corto oficial de color + scroll robusto ==== */ .product-top-grid, .product-bottom-grid { min-height: 0; } .product-page-v3 .card-variants, .product-page-v3 .price-card, .product-page-v3 .ficha-card { min-height: 0; } .product-page-v3 .card-variants { display: flex; flex-direction: column; overflow: hidden; } .product-page-v3 .variant-listbox { flex: 1 1 auto; min-height: 0 !important; max-height: clamp(320px, 48vh, 640px) !important; overflow-y: auto !important; overflow-x: hidden !important; padding-right: .2rem; } .product-page-v3 .variant-listbox::-webkit-scrollbar, .product-page-v3 .config-tab-scroll::-webkit-scrollbar, .product-page-v3 .ficha-card .bom-placeholder::-webkit-scrollbar { width: 8px; } .product-page-v3 .variant-listbox::-webkit-scrollbar-thumb, .product-page-v3 .config-tab-scroll::-webkit-scrollbar-thumb, .product-page-v3 .ficha-card .bom-placeholder::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--bs-body-color) 22%, transparent); border-radius: 999px; } .product-page-v3 .price-card { display: flex; flex-direction: column; overflow: hidden; } .product-page-v3 .config-tab-scroll { flex: 1 1 auto; min-height: 0; max-height: clamp(220px, 34vh, 420px); overflow-y: auto; overflow-x: hidden; padding-right: .1rem; overscroll-behavior: contain; } .product-page-v3 .ficha-card { display: flex; flex-direction: column; overflow: hidden; } .product-page-v3 .ficha-card .bom-placeholder { flex: 1 1 auto; min-height: 0; max-height: clamp(220px, 34vh, 420px); overflow-y: auto; overflow-x: hidden; padding-right: .1rem; overscroll-behavior: contain; } @media (max-width: 991.98px) { .product-page-v3 .variant-listbox { max-height: clamp(280px, 42vh, 540px) !important; } .product-page-v3 .config-tab-scroll, .product-page-v3 .ficha-card .bom-placeholder { max-height: 360px; } } /* ==== FASE 4E · Código corto oficial + scroll fino ==== */ .catalog-color-helper { padding: .55rem .7rem; border-radius: 12px; background: color-mix(in srgb, var(--bs-info) 7%, transparent); border: 1px dashed color-mix(in srgb, var(--bs-info) 18%, transparent); } .product-page-v3 .variant-listbox { scrollbar-gutter: stable both-edges; } .product-page-v3 .config-tab-scroll, .product-page-v3 .ficha-card .bom-placeholder { scrollbar-gutter: stable both-edges; } .product-page-v3 .price-card, .product-page-v3 .ficha-card { min-height: clamp(280px, 34vh, 520px); } /* ==== FASE 5A · Catálogos compactos en pantallas pequeñas ==== */ .catalog-workspace { display: grid; grid-template-columns: minmax(280px, 0.92fr) minmax(360px, 1.08fr); gap: 1rem; align-items: start; } .catalog-form-card, .catalog-list-card { min-width: 0; overflow: hidden; } .catalog-form-card { position: sticky; top: calc(72px + 1rem); } .catalog-list-card__body { padding: 0; } .catalog-list-scroll { max-height: clamp(420px, calc(100vh - 225px), 760px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; } .catalog-list-table { min-width: 520px; margin-bottom: 0; } .catalog-list-table thead.sticky-top th { position: sticky; top: 0; z-index: 1; background: var(--bs-body-bg); } .catalog-list-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .catalog-list-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--bs-primary) 38%, transparent); border-radius: 999px; } .catalog-inline-help { font-size: .88rem; line-height: 1.35; } .catalog-color-helper { padding: .45rem .6rem; font-size: .88rem; line-height: 1.3; } @media (max-width: 991.98px) { .catalog-workspace { grid-template-columns: minmax(240px, 0.95fr) minmax(280px, 1.05fr); gap: .8rem; } .catalog-form-card { top: calc(68px + .75rem); } .catalog-list-scroll { max-height: clamp(400px, calc(100vh - 205px), 680px); } .catalog-list-table { min-width: 440px; } } @media (max-width: 767.98px) { .catalog-workspace { grid-template-columns: minmax(210px, 0.96fr) minmax(250px, 1.04fr); gap: .65rem; } .catalog-form-card .card-header, .catalog-list-card .card-header { padding: .8rem .9rem; font-size: 1rem; } .catalog-form-card .card-body { padding: .9rem; } .catalog-form-card .btn, .catalog-list-card .btn { min-height: 42px; } .catalog-form-card { top: calc(64px + .6rem); } .catalog-list-scroll { max-height: clamp(380px, calc(100vh - 175px), 620px); } .catalog-list-table { min-width: 380px; } } /* ==== FASE 5B · Toolbar catálogos compacto + publicación http/https ==== */ .catalog-toolbar-rows { display: grid; gap: .9rem; } .catalog-toolbar-row { display: grid; gap: .85rem; align-items: end; } .catalog-toolbar-row-primary { grid-template-columns: minmax(220px, 1fr) auto auto; } .catalog-toolbar-row-secondary { grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px) auto; } .catalog-toolbar-inline-actions { display: grid; grid-template-columns: repeat(2, auto); gap: .6rem; align-items: end; } .catalog-toolbar-inline-actions .btn { min-width: 96px; } .catalog-toolbar-inline-visibility { display: grid; align-items: end; } .form-label-compact { margin-bottom: .35rem; } .catalog-toolbar-inline-visibility .catalog-visibility-switch { min-height: var(--control-min-h); display: inline-flex; align-items: center; padding-top: .15rem; } .catalog-inline-help { font-size: .83rem; line-height: 1.25; margin-bottom: .65rem !important; } .catalog-color-helper { min-height: 0; padding: .35rem .5rem; font-size: .82rem; line-height: 1.2; background: color-mix(in srgb, var(--bs-info) 5%, transparent); } .catalog-color-helper:empty { display: none; } @media (max-width: 991.98px) { .catalog-toolbar-row-primary { grid-template-columns: minmax(170px, 1fr) auto auto; } .catalog-toolbar-row-secondary { grid-template-columns: minmax(170px, 1fr) minmax(150px, 210px) auto; } .catalog-toolbar-inline-actions .btn { min-width: 86px; padding-inline: .9rem; } } @media (max-width: 575.98px) { .catalog-toolbar-row { gap: .6rem; } .catalog-toolbar-row-primary { grid-template-columns: minmax(128px, 1fr) auto auto; } .catalog-toolbar-row-secondary { grid-template-columns: minmax(140px, 1fr) auto; } .catalog-toolbar-item-subcat { grid-column: 1 / -1; order: 3; } .catalog-toolbar-inline-actions .btn { min-width: 74px; min-height: 40px; padding-inline: .7rem; font-size: .92rem; } .catalog-toolbar-inline-visibility { justify-self: end; } .catalog-toolbar-inline-visibility .catalog-visibility-switch .form-check-label { font-size: .92rem; } } /* ==== FASE 5B.1 · Ajuste fino catálogo móvil ==== */ .page-head-card-compact { padding: .85rem 1rem; } .page-head-card-compact .page-title-block h3 { font-size: 1.15rem; } .page-head-card-compact .small-muted { font-size: .92rem; } .catalog-quick-actions .btn { min-height: 38px; padding-inline: .9rem; } .catalog-toolbar-row-primary { grid-template-columns: minmax(190px, 1fr) auto auto; } .catalog-toolbar-inline-actions-compact { align-self: end; display: flex; gap: .55rem; flex-wrap: nowrap; } .catalog-toolbar-inline-actions-compact .btn { min-width: 94px; min-height: 42px; white-space: nowrap; } .catalog-toolbar-row-secondary { grid-template-columns: minmax(220px, 1fr) auto minmax(160px, 220px); } .catalog-toolbar-inline-visibility { align-self: end; } .catalog-inline-help { font-size: .78rem; line-height: 1.15; color: var(--muted); } .catalog-color-helper { padding: .3rem .45rem; font-size: .78rem; line-height: 1.15; } @media (max-width: 767.98px) { .page-head-card-compact { padding: .75rem .85rem; } .catalog-quick-actions { width: 100%; } .catalog-quick-actions .btn { flex: 1 1 auto; min-width: 0; } .catalog-toolbar-row-primary { grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; } .catalog-toolbar-row-secondary { grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; } .catalog-toolbar-item-subcat { grid-column: 1 / -1; } .catalog-toolbar-inline-actions-compact .btn { min-width: 0; padding-inline: .75rem; font-size: .9rem; } .catalog-toolbar-inline-actions-compact .btn .bi { margin-right: .25rem !important; } .catalog-form-card .card-body, .catalog-list-card .card-body { padding: .8rem; } .catalog-list-scroll { max-height: clamp(360px, calc(100vh - 210px), 600px); } } @media (max-width: 420px) { .catalog-toolbar-row-primary { grid-template-columns: minmax(0, 1fr) auto auto; } .catalog-toolbar-inline-actions-compact { gap: .4rem; } .catalog-toolbar-inline-actions-compact .btn { min-height: 40px; padding-inline: .6rem; font-size: .86rem; } }