:root {
  --ink: #172437;
  --muted: #7b8798;
  --blue: #0f5d96;
  --blue-deep: #0a3d67;
  --blue-soft: #eaf3fb;
  --line: #e5ebf2;
  --surface: #ffffff;
  --canvas: #f4f7fa;
  --shadow: 0 12px 34px rgba(21, 47, 79, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; }
button, input, select { font: inherit; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 222px; flex: 0 0 222px; background: #102b47; color: #d9e7f3; padding: 24px 16px 18px; display: flex; flex-direction: column; min-height: 100vh; position: sticky; top: 0; height: 100vh; }
.brand-lockup { display: flex; align-items: center; gap: 11px; padding: 2px 9px 28px; }
.brand-mark { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #3d9ce1, #155b97); box-shadow: 0 7px 18px rgba(23, 137, 216, .25); }
.brand-lockup strong { display: block; color: #fff; letter-spacing: .08em; font-size: 12px; }
.brand-lockup span { display: block; color: #7faccd; letter-spacing: .12em; font-size: 8px; margin-top: 1px; }
.sidebar-section-label { color: #6e94b3; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 700; padding: 0 12px 10px; }
.sidebar-nav { display: grid; gap: 4px; }
.sidebar-link { color: #abc6da; text-decoration: none; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; transition: .2s ease; }
.sidebar-link i { color: #81a9c6; font-size: 15px; width: 16px; text-align: center; }
.sidebar-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.sidebar-link.active { color: #fff; background: linear-gradient(90deg, rgba(72, 161, 224, .24), rgba(72, 161, 224, .08)); box-shadow: inset 3px 0 #49a9e5; }
.sidebar-link.active i { color: #62c0f2; }
.sidebar-count { margin-left: auto; color: #f2ae52; background: rgba(242, 174, 82, .14); padding: 2px 6px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.sidebar-footer { margin-top: auto; padding: 15px 11px 0; color: #81a1b9; border-top: 1px solid rgba(255,255,255,.09); }
.storage-status { color: #cbe4d7; display: flex; align-items: center; gap: 7px; font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 100%; background: #54c48b; box-shadow: 0 0 0 4px rgba(84,196,139,.12); }
.sidebar-footer small { display: block; padding-top: 6px; font-size: 10px; color: #6e8aa1; }
.main-content { width: calc(100% - 222px); padding: 26px 30px 24px; max-width: 1650px; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 24px; }
.eyebrow, .section-kicker { color: #5e89ab; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; font-weight: 800; }
.eyebrow { display: flex; gap: 7px; align-items: center; margin-bottom: 7px; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 100%; background: #36a4d8; }
.topbar h1 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.045em; font-weight: 800; color: #182b40; }
.topbar p { color: #7c8998; margin: 6px 0 0; font-size: 13px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; padding-top: 4px; }
.action-button { border-radius: 9px; padding: 9px 13px; font-size: 12px; font-weight: 600; box-shadow: 0 4px 14px rgba(21, 47, 79, .04); }
.btn-primary { --bs-btn-bg: #0f5d96; --bs-btn-border-color: #0f5d96; --bs-btn-hover-bg: #0b4a78; --bs-btn-hover-border-color: #0b4a78; }
.btn-outline-primary { --bs-btn-color: #0f5d96; --bs-btn-border-color: #bdd7ea; --bs-btn-hover-bg: #0f5d96; --bs-btn-hover-border-color: #0f5d96; }
.summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.summary-card, .panel-card, .toolbar-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.summary-card { min-height: 97px; display: flex; align-items: center; gap: 13px; padding: 15px; border-top: 3px solid transparent; }
.summary-card.accent-blue { border-top-color: #338fd0; }.summary-card.accent-violet { border-top-color: #8164d9; }.summary-card.accent-cyan { border-top-color: #32abc1; }.summary-card.accent-amber { border-top-color: #efa94f; }.summary-card.accent-rose { border-top-color: #de6f85; }
.summary-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; font-size: 17px; }
.accent-blue .summary-icon { background: #e9f4fc; color: #2982c0; }.accent-violet .summary-icon { background: #f0edfb; color: #7657ca; }.accent-cyan .summary-icon { background: #e6f7fa; color: #2497ab; }.accent-amber .summary-icon { background: #fff5e6; color: #d88d24; }.accent-rose .summary-icon { background: #fff0f2; color: #ca5e75; }
.summary-card span { display: block; color: #78879a; font-size: 10px; font-weight: 600; white-space: nowrap; }.summary-card strong { display: block; font-size: 23px; line-height: 1.15; letter-spacing: -.04em; margin: 4px 0 3px; }.summary-card small { display: block; font-size: 9px; color: #a1acb7; }
.toolbar-card { display: flex; align-items: flex-end; gap: 13px; padding: 12px; margin-bottom: 16px; }
.search-control { flex: 1 1 280px; height: 38px; display: flex; align-items: center; gap: 9px; border: 1px solid #dfe7ef; border-radius: 9px; padding: 0 11px; background: #fbfcfd; }.search-control i { color: #94a4b5; }.search-control input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }.search-control input::placeholder { color: #9aa7b5; }
.filter-control { min-width: 130px; }.filter-control.filter-wide { min-width: 188px; }.filter-control label { display: block; color: #8794a2; font-size: 9px; font-weight: 700; margin: 0 0 5px 2px; }.filter-control select { width: 100%; height: 38px; border: 1px solid #dfe7ef; border-radius: 8px; background: #fbfcfd; color: #405165; padding: 0 9px; outline: 0; font-size: 11px; }.clear-filters { align-self: flex-end; height: 38px; padding: 0 5px; color: #70839a; text-decoration: none; font-size: 11px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 16px; align-items: stretch; }
.visualization-card { min-width: 0; overflow: hidden; position: relative; }.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px 13px; }.card-heading h2 { margin: 3px 0 0; font-size: 16px; letter-spacing: -.03em; color: #21344a; }.compact-heading { padding-bottom: 12px; }.card-heading > i { color: #9eb4c5; font-size: 18px; }
.view-toggle { display: inline-flex; border: 1px solid #e1e9f0; border-radius: 8px; padding: 3px; background: #f7fafc; }.view-toggle .btn { border: 0; border-radius: 6px; color: #8796a6; font-size: 11px; padding: 5px 9px; }.view-toggle .btn.active { background: #fff; color: #0f5d96; box-shadow: 0 2px 7px rgba(19, 57, 87, .12); }
.card-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.scene-toolbar { border-top: 1px solid #eff3f6; border-bottom: 1px solid #eff3f6; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; color: #91a0af; font-size: 10px; }.scene-toolbar i { color: #6397ba; margin-right: 3px; }.scene-toolbar .btn { font-size: 10px; color: #637589; }.scene-toolbar-info { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }.scene-temperature { color: #8294a2; }.scene-temperature strong { color: #54758a; font-weight: 800; }.scene-view-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }.scene-view-actions .btn { padding: 4px 7px; white-space: nowrap; }
.scene-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 27px; padding: 0 20px; color: #718798; background: #fbfdfe; border-bottom: 1px solid #eff3f6; font-size: 9px; }.scene-status-bar span:last-child { color: #2f7599; font-weight: 700; }.scene-canvas { height: 478px; min-height: 360px; background: linear-gradient(180deg, #f1f6fa 0%, #e9f0f5 100%); position: relative; overflow: hidden; }.scene-canvas canvas { display: block; width: 100%; height: 100%; cursor: grab; }.scene-canvas canvas:active { cursor: grabbing; }
.scene-minimap { position: absolute; z-index: 4; right: 14px; bottom: 14px; width: 145px; padding: 8px; border: 1px solid rgba(199,218,228,.95); border-radius: 10px; background: rgba(250,253,254,.92); box-shadow: 0 8px 22px rgba(35,67,86,.16); color: #638094; font-size: 8px; pointer-events: auto; }.minimap-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.minimap-toggle, .minimap-show { border: 0; background: transparent; color: #6a8ca0; padding: 0; cursor: pointer; }.minimap-room { position: relative; height: 118px; border: 1px solid #cfdee5; border-radius: 6px; overflow: hidden; background: #edf4f6; }.minimap-wall-back { position: absolute; inset: 4px 7px auto; height: 4px; border-radius: 2px; background: #9bb2bc; }.minimap-rack { position: absolute; top: 12px; bottom: 8px; width: 23px; display: grid; place-items: center; color: #fff; font-size: 8px; font-weight: 800; background: #415c66; border-radius: 4px; writing-mode: vertical-rl; }.minimap-rack-left { left: 13px; }.minimap-rack-right { right: 13px; }.minimap-aisle { position: absolute; top: 12px; bottom: 8px; left: 50%; width: 28px; transform: translateX(-50%); border-left: 1px dashed #b7cbd4; border-right: 1px dashed #b7cbd4; }.minimap-observer { position: absolute; z-index: 2; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 11px solid #1e9bce; transform-origin: 50% 65%; filter: drop-shadow(0 1px 2px rgba(20,66,86,.35)); }.minimap-legend { display: flex; justify-content: space-between; margin-top: 4px; color: #8ba0ad; }.minimap-show { position: absolute; z-index: 5; right: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 8px; background: rgba(250,253,254,.95); box-shadow: 0 5px 15px rgba(35,67,86,.16); }
.scene-legend { display: flex; gap: 16px; flex-wrap: wrap; border-top: 1px solid #eff3f6; padding: 12px 20px 14px; color: #7d8c9a; font-size: 10px; }.legend-swatch { display: inline-block; vertical-align: -1px; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }.swatch-blue { background: #5b9bca; }.swatch-amber { background: #eeae4c; }.swatch-red { background: #d96f72; }.swatch-outline { border: 1px solid #28a6e5; background: #e1f4fb; }
.location-panel { min-height: 478px; display: flex; flex-direction: column; overflow: hidden; }.empty-panel { flex: 1; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }.empty-icon { width: 53px; height: 53px; display: grid; place-items: center; border-radius: 17px; color: #4b97bf; background: #eaf6fb; font-size: 23px; margin-bottom: 15px; }.empty-panel h3 { font-size: 15px; margin: 0 0 7px; letter-spacing: -.02em; }.empty-panel p { color: #8a98a6; font-size: 11px; line-height: 1.65; max-width: 220px; margin: 0 0 17px; }
.location-head { padding: 19px 20px 14px; border-bottom: 1px solid #edf2f6; }.location-head .section-kicker { margin-bottom: 4px; }.location-title-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.location-title-line h3 { margin: 0; font-size: 17px; letter-spacing: -.04em; }.location-subtitle { color: #8797a8; font-size: 10px; margin-top: 4px; }.location-close { border: 0; background: transparent; color: #a6b2be; padding: 0; font-size: 16px; }.location-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 20px; border-bottom: 1px solid #edf2f6; }.location-metric { background: #f7fafc; padding: 9px 10px; border-radius: 8px; }.location-metric span { display: block; color: #8a99a7; font-size: 9px; }.location-metric strong { display: block; font-size: 15px; margin-top: 3px; }.stock-list { flex: 1; overflow: auto; padding: 10px 14px 10px 20px; }.stock-item { border-bottom: 1px solid #eff3f6; padding: 10px 0 11px; }.stock-item:last-child { border-bottom: 0; }.stock-item-head { display: flex; gap: 8px; align-items: flex-start; }.product-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; margin-top: 4px; }.stock-name { color: #33475a; font-weight: 700; line-height: 1.3; font-size: 11px; }.stock-ref { color: #90a0ae; font-size: 9px; margin-top: 2px; }.stock-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 9px 0 8px 16px; }.stock-info-grid span { color: #95a2ae; font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }.stock-info-grid strong { display: block; color: #506176; font-size: 10px; margin-top: 2px; font-weight: 600; }.qty-pill { margin-left: auto; color: #356d94; background: #eaf4fb; border-radius: 6px; padding: 4px 7px; font-weight: 800; font-size: 11px; white-space: nowrap; }.qty-pill.warning { color: #a56b1b; background: #fff5df; }.qty-pill.expired { color: #af4e5c; background: #ffedef; }.stock-actions { display: flex; gap: 5px; margin-left: 16px; }.stock-actions .btn { flex: 1; border-radius: 6px; font-size: 9px; padding: 5px 4px; }.location-footer { padding: 12px 20px 15px; border-top: 1px solid #edf2f6; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.location-footer .btn { font-size: 10px; padding: 7px 5px; }.location-footer .btn:last-child { grid-column: 1 / -1; }
.front-view { height: 620px; overflow: auto; padding: 16px; background: #f4f7fa; }.front-rack { margin-bottom: 20px; }.front-rack:last-child { margin-bottom: 0; }.front-rack-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }.front-rack-head h3 { font-size: 13px; margin: 0; }.front-rack-head span { font-size: 10px; color: #8998a7; }.front-level { display: grid; grid-template-columns: 50px repeat(var(--positions), minmax(110px, 1fr)); gap: 6px; margin-bottom: 6px; }.front-level-label { display: flex; align-items: center; justify-content: center; background: #eaf2f7; border: 1px solid #dbe7ee; border-radius: 7px; color: #45647a; font-weight: 800; font-size: 10px; }.front-slot { min-height: 73px; text-align: left; padding: 8px; background: #fff; border: 1px solid #dfe9f0; border-radius: 7px; cursor: pointer; transition: .2s ease; }.front-slot:hover, .front-slot.selected { border-color: #54b2df; box-shadow: 0 0 0 2px rgba(84,178,223,.13); }.front-slot.empty { background: rgba(255,255,255,.4); cursor: default; }.front-slot-code { font-size: 8px; color: #92a0ad; display: block; margin-bottom: 5px; }.front-chip { display: block; color: #3f5265; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; margin-bottom: 3px; }.front-chip strong { font-weight: 800; color: #244c70; }.front-slot-foot { margin-top: 4px; font-size: 9px; color: #8493a1; }.front-slot-foot i { color: #4c9bc7; }
.bottom-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 16px; margin-top: 16px; }.health-card, .quick-card { min-height: 177px; }.health-content { display: flex; align-items: center; gap: 23px; padding: 5px 20px 20px; }.health-ring { width: 105px; height: 105px; flex: 0 0 105px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at center, #fff 52%, transparent 53%), conic-gradient(#45a8d8 var(--health-progress, 82%), #e8f0f5 0); box-shadow: inset 0 0 0 1px #edf2f7; }.health-ring span { color: #245c80; font-size: 24px; font-weight: 800; letter-spacing: -.06em; }.health-ring small { color: #8a9aa7; font-size: 9px; }.health-copy strong { display: block; font-size: 13px; }.health-copy p { color: #8997a5; font-size: 10px; line-height: 1.6; max-width: 370px; margin: 7px 0 9px; }.health-copy a { color: #2180b7; font-size: 10px; font-weight: 700; text-decoration: none; }.soft-badge { border-radius: 20px; padding: 5px 8px; font-size: 9px; font-weight: 700; }.soft-badge-blue { color: #317aa8; background: #eaf4fb; }.soft-badge-amber { color: #a87327; background: #fff4de; }.soft-badge-red { color: #a94d58; background: #ffedef; }
.quick-actions { padding: 0 20px 12px; }.quick-action { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 0; border: 0; border-bottom: 1px solid #eff3f6; text-align: left; background: transparent; }.quick-action:last-child { border-bottom: 0; }.quick-action > span:nth-child(2) { flex: 1; }.quick-action strong, .quick-action small { display: block; }.quick-action strong { color: #33495d; font-size: 11px; }.quick-action small { color: #99a5b1; font-size: 9px; margin-top: 2px; }.quick-action > i { color: #adbac5; font-size: 11px; }.quick-action-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; }.icon-in { color: #2686bb; background: #eaf5fc; }.icon-out { color: #bd6c72; background: #fff0f1; }.icon-move { color: #8171bf; background: #f0eefb; }
.observations-card { margin-top: 16px; }.observations-content { padding: 0 20px 18px; }.empty-inline { color: #8292a1; font-size: 11px; padding: 15px 0; }.empty-inline i { color: #4cb889; margin-right: 6px; }.observation-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }.observation-row { display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid #eff3f6; padding: 10px 0 4px; }.observation-icon { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border-radius: 6px; font-size: 11px; }.observation-warning .observation-icon { color: #b17825; background: #fff4dc; }.observation-error .observation-icon { color: #b6515e; background: #ffeaed; }.observation-info .observation-icon { color: #377ea6; background: #eaf5fb; }.observation-row strong { display: block; color: #526477; font-size: 10px; line-height: 1.35; }.observation-row p { color: #8997a3; margin: 2px 0 0; font-size: 10px; line-height: 1.45; }.observation-row code { font-size: 9px; color: #5b7990; }
.app-footer { display: flex; justify-content: space-between; gap: 12px; color: #94a1ad; font-size: 10px; padding: 18px 2px 0; }.app-footer i { color: #56ae85; margin-right: 4px; }
.pending-assignment { border: 1px solid #f3e1bd; background: #fffaf0; border-radius: 9px; padding: 10px 12px; margin: 0 0 11px; }.pending-assignment-title { display: flex; align-items: center; gap: 7px; color: #9d6f29; font-size: 10px; margin-bottom: 8px; }.pending-assignment-title i { font-size: 14px; }.pending-assignment-title span { margin-left: auto; color: #b08b53; }.pending-assignment-row { display: grid; grid-template-columns: minmax(180px, 1fr) 190px auto; gap: 8px; align-items: center; border-top: 1px solid #f1e6d1; padding: 8px 0 0; margin-top: 8px; }.pending-assignment-row strong, .pending-assignment-row small { display: block; }.pending-assignment-row strong { font-size: 10px; color: #6f5a3a; }.pending-assignment-row small { color: #a99470; font-size: 9px; margin-top: 2px; }.pending-assignment-row .form-select { min-height: 30px; font-size: 10px; }.pending-assignment-row .btn { font-size: 10px; white-space: nowrap; }
.loading-screen { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: #f4f7fa; transition: opacity .25s ease, visibility .25s ease; }.loading-screen.is-hidden { opacity: 0; visibility: hidden; }.loading-card { display: flex; align-items: center; gap: 13px; color: #52677b; }.loading-card strong, .loading-card span { display: block; }.loading-card strong { font-size: 13px; }.loading-card span { color: #95a2ae; font-size: 10px; margin-top: 4px; }.loading-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: #0f5d96; box-shadow: 0 7px 20px rgba(15,93,150,.2); }
.operation-modal-content { border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 25px 75px rgba(19, 44, 70, .2); }.operation-modal-content .modal-header { border-bottom: 1px solid #edf2f6; padding: 19px 22px 16px; }.operation-modal-content .modal-title { font-size: 19px; letter-spacing: -.04em; margin-top: 3px; }.operation-modal-content .modal-body { padding: 20px 22px; }.operation-modal-content .modal-footer { border-top: 1px solid #edf2f6; padding: 13px 22px; }.modal-header-actions { display: flex; align-items: center; gap: 12px; }.operation-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }.operation-form-grid .full { grid-column: 1 / -1; }.form-label { color: #657789; font-size: 10px; font-weight: 700; margin-bottom: 5px; }.form-control, .form-select { border-color: #dae5ed; border-radius: 8px; font-size: 11px; color: #364b60; min-height: 37px; }.form-control:focus, .form-select:focus { border-color: #86bad8; box-shadow: 0 0 0 .2rem rgba(42, 142, 197, .12); }.input-help { display: block; color: #97a4af; font-size: 9px; margin-top: 5px; }.operation-callout { display: flex; gap: 10px; padding: 11px 12px; border-radius: 8px; color: #557288; background: #f1f7fb; font-size: 10px; line-height: 1.45; margin-bottom: 15px; }.operation-callout i { color: #3d94be; font-size: 15px; }.operation-summary { background: #f7fafc; border: 1px solid #e6eef3; border-radius: 9px; padding: 12px; margin-bottom: 14px; }.operation-summary strong { color: #38556d; font-size: 11px; }.operation-summary span { color: #8b9aa7; font-size: 10px; display: block; margin-top: 4px; }.import-preview { min-height: 170px; }.import-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px; }.import-kpi { padding: 10px; border-radius: 8px; background: #f6f9fb; border: 1px solid #e8eef2; }.import-kpi span { display: block; color: #8b9aa8; font-size: 9px; }.import-kpi strong { display: block; color: #38556e; font-size: 18px; margin-top: 3px; }.import-note { color: #7c8b99; font-size: 10px; line-height: 1.55; margin: 0 0 9px; }.import-note strong { color: #536c80; }.import-observations { border-top: 1px solid #edf2f6; padding-top: 10px; max-height: 160px; overflow: auto; }.history-table-wrap { max-height: 480px; overflow: auto; }.history-table { margin: 0; font-size: 10px; vertical-align: middle; }.history-table th { color: #81909f; background: #f7fafc; text-transform: uppercase; letter-spacing: .06em; font-size: 9px; font-weight: 800; white-space: nowrap; }.history-table td { color: #536679; border-color: #edf2f6; }.history-type { display: inline-block; font-size: 8px; font-weight: 800; border-radius: 4px; padding: 4px 5px; }.history-in { color: #277ca9; background: #eaf5fb; }.history-out { color: #b55c69; background: #fff0f1; }.history-move { color: #7164ad; background: #f0eefb; }.history-adjust { color: #a5732c; background: #fff5df; }.history-empty { padding: 35px 0; text-align: center; color: #91a0ac; font-size: 11px; }
.is-moving .scene-canvas canvas { cursor: crosshair; }.move-target { outline: 2px solid #f2b04f; }
.stock-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-left: 16px; }.stock-actions .btn { flex: 1 1 72px; }
.expiry-watch { margin: 11px 20px 13px; border-top: 1px solid #edf2f6; padding-top: 10px; }.expiry-watch-head { display: flex; align-items: center; justify-content: space-between; color: #8b6a38; font-size: 10px; font-weight: 800; margin-bottom: 6px; }.expiry-watch-head i { color: #d69231; margin-right: 4px; }.expiry-watch-head small { color: #b39769; font-weight: 600; }.expiry-watch-row { display: flex; align-items: center; gap: 7px; padding: 6px 0; border-top: 1px solid #f1f4f6; }.expiry-watch-row > div { min-width: 0; flex: 1; }.expiry-watch-row strong, .expiry-watch-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.expiry-watch-row strong { color: #526273; font-size: 9px; }.expiry-watch-row small { color: #9a8e78; font-size: 8px; margin-top: 2px; }.expiry-watch-row .btn { color: #a87526; font-size: 8px; padding: 2px 0; white-space: nowrap; }.expiry-watch-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }.expiry-watch-dot.is-soon { background: #e4a33e; }.expiry-watch-dot.is-expired { background: #d36b74; }.expiry-watch-empty { color: #90a0ac; font-size: 9px; padding-top: 5px; }.expiry-watch-empty i { color: #4aae82; margin-right: 4px; }
@media (max-width: 1260px) { .summary-grid { grid-template-columns: repeat(3, 1fr); }.summary-card:nth-child(4), .summary-card:nth-child(5) { min-height: 86px; }.hero-grid { grid-template-columns: minmax(0, 1fr) 310px; }.main-content { padding-left: 22px; padding-right: 22px; } }
@media (max-width: 1000px) { .sidebar { width: 70px; flex-basis: 70px; padding-left: 10px; padding-right: 10px; }.brand-lockup { justify-content: center; padding: 2px 0 28px; }.brand-lockup > div:last-child, .sidebar-section-label, .sidebar-link span:not(.sidebar-count), .sidebar-footer { display: none; }.sidebar-link { justify-content: center; padding: 12px; }.sidebar-count { position: absolute; margin: -19px -26px 0 0; }.main-content { width: calc(100% - 70px); }.hero-grid { grid-template-columns: 1fr; }.location-panel { min-height: 0; max-height: 520px; }.bottom-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .main-content { padding: 18px 12px; }.topbar { display: block; }.topbar-actions { padding-top: 14px; }.summary-grid { grid-template-columns: repeat(2, 1fr); }.summary-card { padding: 12px; }.summary-card:last-child { grid-column: 1 / -1; }.toolbar-card { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }.search-control { grid-column: 1 / -1; }.filter-control.filter-wide { min-width: 0; }.clear-filters { justify-self: start; }.scene-canvas, .front-view, .location-panel { min-height: 390px; height: 390px; }.scene-toolbar { flex-direction: column; align-items: flex-start; padding: 8px 12px; }.scene-toolbar-info { gap: 5px 12px; }.scene-toolbar-info > span { max-width: 100%; }.scene-view-actions { justify-content: flex-start; }.scene-legend { padding-left: 12px; padding-right: 12px; gap: 9px; }.card-heading { padding-left: 14px; padding-right: 14px; }.health-content { padding-left: 14px; padding-right: 14px; gap: 13px; }.health-ring { width: 84px; height: 84px; flex-basis: 84px; }.health-ring span { font-size: 19px; }.operation-form-grid { grid-template-columns: 1fr; }.operation-form-grid .full { grid-column: auto; }.import-kpis { grid-template-columns: repeat(2,1fr); }.app-footer { display: block; line-height: 1.8; } }
@media (max-width: 720px) { .pending-assignment-row { grid-template-columns: 1fr; }.pending-assignment-row .btn { justify-self: start; } }
@media (max-width: 450px) { .sidebar { width: 54px; flex-basis: 54px; }.main-content { width: calc(100% - 54px); }.topbar-actions { gap: 5px; }.action-button { padding: 9px 10px; }.summary-card { min-height: 88px; }.summary-card strong { font-size: 19px; }.summary-icon { width: 31px; height: 31px; flex-basis: 31px; font-size: 14px; }.front-level { grid-template-columns: 36px repeat(var(--positions), minmax(92px, 1fr)); overflow: auto; }.front-slot { min-height: 72px; } }
@media (max-width: 720px) { .scene-status-bar { padding: 5px 12px; align-items: flex-start; flex-direction: column; gap: 2px; }.scene-minimap { right: 9px; bottom: 9px; transform: scale(.9); transform-origin: bottom right; }.expiry-watch { margin-left: 14px; margin-right: 14px; } }

@media (min-width: 721px) { .scene-canvas { height: 540px; min-height: 540px; } }
.front-view { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
.front-rack { min-width: 0; }
.scene-minimap { user-select: none; }
.minimap-room { cursor: crosshair; touch-action: manipulation; }
.minimap-room::after { content: ''; position: absolute; inset: 12px 7px 8px; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0, transparent 31%, rgba(104,142,160,.16) 32%, transparent 33%); }
.minimap-room.is-navigating { box-shadow: inset 0 0 0 2px rgba(30,155,206,.48); }
.scene-minimap[data-lane="rack1"] .minimap-rack-left, .scene-minimap[data-lane="rack2"] .minimap-rack-right, .scene-minimap[data-lane="aisle"] .minimap-aisle { background-color: #1e9bce; border-color: #1e9bce; box-shadow: 0 0 0 2px rgba(30,155,206,.16); }
.scene-minimap[data-lane="aisle"] .minimap-aisle { background-color: rgba(30,155,206,.1); }
.scene-joysticks { position: absolute; z-index: 5; left: 14px; bottom: 14px; display: flex; gap: 12px; pointer-events: auto; user-select: none; }
.virtual-joystick { width: 78px; display: grid; justify-items: center; gap: 4px; color: #456b80; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; cursor: grab; touch-action: none; outline: none; }
.virtual-joystick:active { cursor: grabbing; }
.virtual-joystick:focus-visible .joystick-ring { box-shadow: 0 0 0 3px rgba(30,155,206,.3); }
.joystick-label { padding: 2px 6px; border-radius: 5px; background: rgba(250,253,254,.84); text-shadow: 0 1px 0 #fff; }
.joystick-ring { position: relative; width: 64px; height: 64px; display: block; border: 1px solid rgba(173,201,215,.98); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.92) 0 27%, rgba(220,235,242,.78) 28% 30%, rgba(239,247,250,.82) 31% 100%); box-shadow: 0 6px 16px rgba(29,66,85,.2); }
.joystick-ring::before, .joystick-ring::after { content: ''; position: absolute; background: rgba(102,145,165,.34); }
.joystick-ring::before { width: 1px; top: 9px; bottom: 9px; left: 50%; }.joystick-ring::after { height: 1px; left: 9px; right: 9px; top: 50%; }
.joystick-stick { position: absolute; z-index: 1; left: 50%; top: 50%; width: 27px; height: 27px; border: 1px solid #66a8c8; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ffffff 0 12%, #bfe4f3 38%, #4d97bc 100%); box-shadow: 0 3px 8px rgba(30,87,116,.35); transform: translate(-50%, -50%); transition: transform .12s ease-out; }
.virtual-joystick.is-active .joystick-stick { transition: none; }
@media (max-width: 720px) { .scene-joysticks { left: 8px; bottom: 8px; gap: 7px; transform: scale(.86); transform-origin: bottom left; } }
.front-slot-code { color: #000000; font-weight: 900; letter-spacing: .01em; }
.front-slot-code i { margin-right: 3px; }
.front-slot.occupied-extension { background: linear-gradient(135deg, #f8fcff 0%, #eef8fc 100%); border-color: #8bcbe7; border-style: dashed; }
.front-slot.occupied-extension .front-slot-code { color: #147fa8; }
.front-slot.occupied-extension .extension-copy { color: #245b78; }
.front-slot.occupied-extension .extension-copy strong { color: #0c628b; }
.search-control { position: relative; z-index: 20; }
.search-control input { padding-right: 28px; }
.search-clear { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; border: 0; border-radius: 6px; color: #8799a8; background: transparent; cursor: pointer; }
.search-clear:hover, .search-clear:focus-visible { color: #176d99; background: #eaf6fb; outline: 0; }
.search-suggestions { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0; max-height: 300px; overflow: auto; padding: 5px; border: 1px solid #d7e5ec; border-radius: 9px; background: #fff; box-shadow: 0 12px 28px rgba(32, 69, 89, .18); }
.search-suggestion { width: 100%; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 6px; padding: 8px 9px; color: #456175; background: transparent; text-align: left; cursor: pointer; }
.search-suggestion:hover, .search-suggestion:focus-visible { color: #0f6695; background: #eef8fc; outline: 0; }
.search-suggestion > i { width: 17px; color: #5da9c9; text-align: center; }
.search-suggestion span { min-width: 0; display: grid; gap: 2px; }
.search-suggestion strong { overflow: hidden; color: #2b526e; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion small { overflow: hidden; color: #8c9cab; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.search-suggestion-empty { padding: 10px 9px; color: #8495a3; font-size: 10px; }
.stock-actions { justify-content: flex-end; align-items: center; min-height: 28px; }
.stock-item-tools { margin-left: auto; flex: 0 0 auto; display: grid; justify-items: end; align-items: end; gap: 5px; }
.stock-item-tools .qty-pill { margin-left: 0; }
.stock-item { margin: 0 0 7px; padding: 8px 9px 7px; border: 1px solid #e2ebf0; border-bottom: 3px solid var(--stock-accent, #4c8ec2); border-radius: 7px; background: #fff; }
.stock-item[data-stock-card] { cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.stock-item[data-stock-card]:hover, .stock-item[data-stock-card]:focus-visible { border-color: #74b9d4; box-shadow: 0 4px 12px rgba(35, 95, 123, .12); outline: 0; }
.stock-item[data-stock-card]:active { transform: translateY(1px); }
.stock-item:last-child { border-bottom: 3px solid var(--stock-accent, #4c8ec2); }
.stock-item-head { gap: 6px; }
.stock-item-content { min-width: 0; flex: 1 1 auto; }
.stock-item-head > .qty-pill { flex: 0 0 auto; margin: 0; margin-top: 1px; }
.stock-item-head > .stock-actions-menu { flex: 0 0 auto; margin-left: auto; }
.stock-name { font-size: 10px; line-height: 1.2; }
.stock-ref { font-size: 8px; margin-top: 2px; }
.stock-item-content .stock-info-grid { gap: 8px; margin: 5px 0 0; }
.stock-info-grid span { font-size: 7px; }
.stock-info-grid strong { font-size: 9px; margin-top: 2px; }
.location-panel .stock-list { min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; }
.bottom-grid[hidden] { display: none !important; }
.sidebar[hidden], .topbar-actions[hidden], .empty-panel > [hidden] { display: none !important; }
.sidebar[hidden] + .main-content { width: 100%; max-width: none; }
@media (min-width: 1001px) {
  .hero-grid { align-items: start; }
  .location-panel { height: var(--location-panel-height, auto); min-height: 0; }
}
.qty-pill { padding: 3px 6px; font-size: 10px; }
.stock-more { width: 27px; height: 25px; font-size: 13px; }
.stock-actions-menu, .location-more-actions { position: relative; }
.stock-actions-menu summary, .location-more-actions summary { list-style: none; }
.stock-actions-menu summary::-webkit-details-marker, .location-more-actions summary::-webkit-details-marker { display: none; }
.stock-more { width: 30px; height: 28px; display: grid; place-items: center; border: 1px solid #d2dfe7; border-radius: 6px; color: #597286; background: #fff; cursor: pointer; font-size: 14px; }
.stock-more:hover, .stock-actions-menu[open] .stock-more { color: #0f6695; border-color: #72b9d6; background: #f3fbfe; }
.stock-actions-menu-list { position: absolute; z-index: 30; top: calc(100% + 5px); right: 0; width: 154px; padding: 5px; border: 1px solid #d9e6ed; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(32, 69, 89, .18); }
.stock-item:nth-last-of-type(-n+2) .stock-actions-menu-list { top: auto; bottom: calc(100% + 5px); }
.stock-menu-item, .location-menu-item { width: 100%; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 5px; padding: 7px 8px; color: #51697b; background: transparent; font-size: 10px; text-align: left; cursor: pointer; }
.stock-menu-item:hover, .location-menu-item:hover { color: #0f6695; background: #eef8fc; }
.summary-card { min-height: 83px; }
.summary-card strong, .summary-card small { display: inline-block; vertical-align: baseline; }
.summary-card strong { margin: 4px 6px 0 0; }
.summary-card small { margin: 0; white-space: nowrap; }
.summary-card small > span { display: inline; }
.stock-menu-item i, .location-menu-item i { width: 14px; color: #6d9ab0; text-align: center; }
.location-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; align-items: stretch; }
.location-footer-primary { min-width: 0; }
.location-footer-primary, .location-history-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.location-more-trigger { width: 100%; height: 100%; display: grid; place-items: center; padding: 7px 5px; cursor: pointer; }
.location-more-actions[open] .location-more-trigger { color: #0f6695; border-color: #72b9d6; background: #f3fbfe; }
.location-more-menu { position: absolute; z-index: 30; right: 0; bottom: calc(100% + 7px); width: 218px; padding: 5px; border: 1px solid #d9e6ed; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(32, 69, 89, .18); }
@media (max-width: 980px) { .front-view { grid-template-columns: 1fr; } }

/* Minimapa compacto: conserva la orientación sin ocupar la zona de trabajo. */
.scene-minimap { width: 112px; padding: 6px; border-radius: 8px; font-size: 7px; }
.minimap-header { margin-bottom: 4px; letter-spacing: .06em; }
.minimap-room { height: 88px; border-radius: 5px; }
.minimap-rack { top: 9px; bottom: 6px; width: 18px; font-size: 7px; border-radius: 3px; }
.minimap-rack-left { left: 9px; }
.minimap-rack-right { right: 9px; }
.minimap-aisle { top: 9px; bottom: 6px; width: 22px; }
.minimap-legend { margin-top: 3px; font-size: 7px; }
.minimap-header[data-action="toggle-minimap"] { cursor: pointer; }
.minimap-header[data-action="toggle-minimap"]:focus-visible { outline: 2px solid rgba(30, 155, 206, .45); outline-offset: 2px; border-radius: 4px; }
.scene-minimap.is-collapsed { padding-top: 5px; padding-bottom: 5px; }
.scene-minimap.is-collapsed { width: 34px; padding-left: 4px; padding-right: 4px; }
.scene-minimap.is-collapsed .minimap-header { justify-content: center; }
.scene-minimap.is-collapsed .minimap-header > span { display: none; }
.scene-minimap.is-collapsed .minimap-toggle { width: 24px; height: 24px; display: grid; place-items: center; }
.scene-minimap.is-collapsed .minimap-header { margin-bottom: 0; }
.scene-minimap.is-collapsed .minimap-room, .scene-minimap.is-collapsed .minimap-legend { display: none; }

.scene-fullscreen-toggle { position: absolute; z-index: 7; top: 12px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(190, 212, 223, .95); border-radius: 8px; color: #315f78; background: rgba(250, 253, 254, .92); box-shadow: 0 5px 15px rgba(35, 67, 86, .16); cursor: pointer; transition: .18s ease; }
.scene-fullscreen-toggle:hover, .scene-fullscreen-toggle:focus-visible { color: #0f5d96; background: #fff; border-color: #69afd0; box-shadow: 0 0 0 3px rgba(30, 155, 206, .16); outline: 0; }
.scene-fullscreen-toggle i { margin: 0; color: inherit; }
.scene-alert-toggle { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 25px; padding: 3px 6px; border: 1px solid #dfe9ef; border-radius: 7px; color: #637589; background: #fff; font-size: 10px; cursor: pointer; user-select: none; }
.scene-alert-toggle > span:first-child { font-weight: 700; }
.scene-alert-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.scene-alert-track { position: relative; width: 25px; height: 14px; flex: 0 0 25px; border-radius: 10px; background: #d7e3e9; transition: .18s ease; }
.scene-alert-thumb { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(28, 61, 77, .28); transition: .18s ease; }
.scene-alert-input:checked + .scene-alert-track { background: #e84d5b; }
.scene-alert-input:checked + .scene-alert-track .scene-alert-thumb { transform: translateX(11px); }
.scene-alert-input:focus-visible + .scene-alert-track { box-shadow: 0 0 0 3px rgba(232, 77, 91, .18); }
.scene-alert-toggle.is-active > span:first-child { color: #bd4552; }
.visualization-card:fullscreen, .visualization-card.is-fullscreen-fallback { display: flex; flex-direction: column; width: 100vw; height: 100vh; max-width: none; min-height: 0; margin: 0; border-radius: 0; background: #fff; }
.visualization-card:fullscreen .scene-canvas, .visualization-card.is-fullscreen-fallback .scene-canvas { flex: 1 1 auto; height: auto; min-height: 0; }
.visualization-card:fullscreen .front-view, .visualization-card.is-fullscreen-fallback .front-view { flex: 1 1 auto; height: auto; min-height: 0; }
.visualization-card:fullscreen .scene-legend, .visualization-card.is-fullscreen-fallback .scene-legend { flex: 0 0 auto; }
.visualization-card.is-fullscreen-fallback { position: fixed; inset: 0; z-index: 2050; overflow: auto; }
body.scene-fullscreen-open { overflow: hidden; }
@media (min-width: 1001px) {
  .hero-grid {
    height: auto;
    min-height: 0;
    align-items: start;
  }
  .visualization-card:not(:fullscreen):not(.is-fullscreen-fallback) {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .visualization-card:not(:fullscreen):not(.is-fullscreen-fallback) .scene-canvas {
    flex: 0 0 620px;
    height: 620px;
    min-height: 620px;
  }
  .visualization-card:not(:fullscreen):not(.is-fullscreen-fallback) .front-view {
    flex: 0 0 670px;
    height: 670px;
    min-height: 670px;
  }
  .visualization-card .scene-legend { flex: 0 0 auto; }
  .location-panel { height: var(--location-panel-height, auto); min-height: 0; }
}
.card-heading-actions { gap: 6px; }
.card-heading-actions .scene-view-actions { gap: 4px; }
.card-heading-actions .scene-view-actions .btn,
.card-heading-actions .scene-alert-toggle {
  min-height: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid #dbe6ed;
  border-radius: 7px;
  color: #5d7183;
  background: #f8fafc;
  box-shadow: 0 1px 2px rgba(35, 67, 86, .05);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  transition: .18s ease;
}
.card-heading-actions .scene-view-actions .btn:hover,
.card-heading-actions .scene-view-actions .btn:focus-visible,
.card-heading-actions .scene-alert-toggle:hover,
.card-heading-actions .scene-alert-toggle:focus-within {
  color: #0f6695;
  border-color: #83bfd8;
  background: #f1f9fc;
  box-shadow: 0 0 0 3px rgba(30, 155, 206, .12);
  outline: 0;
}
.card-heading-actions .scene-view-actions .btn i { color: #4e8caf; font-size: 11px; }
.card-heading-actions .scene-view-actions .btn[data-action="scene-end"] { width: 30px; padding: 0; }
.card-heading-actions .scene-alert-toggle { cursor: pointer; }
.card-heading-actions .scene-alert-toggle > span:first-child { color: inherit; font-weight: 700; }
.card-heading-actions .scene-alert-toggle.is-active { color: #b84855; border-color: #e8a1a8; background: #fff5f6; }
.card-heading-actions .scene-alert-toggle.is-active:hover,
.card-heading-actions .scene-alert-toggle.is-active:focus-within { color: #a33d49; border-color: #df7c86; background: #fff0f2; }
@media (max-width: 720px) {
  .card-heading-actions { width: 100%; justify-content: flex-start; }
  .card-heading-actions .scene-view-actions { justify-content: flex-start; }
}