/* Renovación visual Oli Networks. Se carga después de app.css. */
:root {
  --black: #07070a;
  --black-soft: #0d0d13;
  --panel: #101016;
  --panel-raised: #15141d;
  --white: #f7f6fa;
  --muted: #a8a4b2;
  --line: #ffffff17;
  --line-strong: #ffffff28;
  --purple: #8b42f6;
  --purple-soft: #a970ff;
  --pink: #e94aac;
  --lime: #b1d735;
  --orange: #f49332;
  --danger: #ff667c;
  --shadow: 0 24px 70px #00000052;
}

html { background: var(--black); }
body {
  min-height: 100vh;
  color: var(--white);
  background:
    radial-gradient(circle at 78% -18%, #8b42f61f 0, transparent 31%),
    radial-gradient(circle at 104% 28%, #e94aac0e 0, transparent 28%),
    linear-gradient(155deg, #07070a 0%, #0b0910 52%, #08080b 100%);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  letter-spacing: -.008em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .13;
  background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
  pointer-events: none;
}

::selection { color: #fff; background: #8b42f699; }
*:focus-visible { outline: 3px solid #a970ff66; outline-offset: 2px; }

.sidebar {
  width: 274px;
  padding: 24px 18px 22px;
  overflow-y: auto;
  border-right: 1px solid #ffffff14;
  background: linear-gradient(180deg, #0b0a0fed 0%, #07070af5 100%);
  box-shadow: 18px 0 55px #00000038;
}
.brand { margin: 0 0 22px 9px; }
.brand-image-wrap { width: 176px; height: 116px; }
.brand-image-wrap img { width: 286px; }
.nav-section {
  display: block;
  margin: 18px 13px 6px;
  color: #777280;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
nav { gap: 3px; }
nav a {
  position: relative;
  min-height: 45px;
  padding: 10px 13px;
  border-radius: 12px;
  color: #c8c4d0;
  font-size: 14px;
  font-weight: 650;
}
nav a::after {
  content: "";
  position: absolute;
  inset: 9px auto 9px -18px;
  width: 3px;
  border-radius: 99px;
  background: transparent;
}
nav a:hover { border-color: #ffffff12; color: #fff; background: #ffffff0a; transform: translateX(2px); }
nav a.active { border-color: #a970ff24; color: #fff; background: linear-gradient(90deg, #8b42f626, #8b42f608); }
nav a.active::after { background: linear-gradient(var(--purple-soft), var(--pink)); box-shadow: 0 0 14px var(--purple); }
.nav-dot { width: 9px; height: 9px; flex-basis: 9px; border: 0; border-radius: 3px; background: currentColor; box-shadow: 0 0 12px currentColor; opacity: .9; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color .18s ease, transform .18s ease;
}
.nav-icon.purple { color: var(--purple-soft); }
.nav-icon.pink { color: var(--pink); }
.nav-icon.lime { color: var(--lime); }
.nav-icon.orange { color: var(--orange); }
nav a:hover .nav-icon, nav a.active .nav-icon { transform: scale(1.08); }
.sidebar-footer { padding: 16px 13px 0; border-color: #ffffff14; }

.container {
  width: calc(100% - 274px);
  max-width: 1660px;
  margin-left: 274px;
  padding: 42px clamp(25px, 3.4vw, 58px) 80px;
}
.app-topbar { position: relative; z-index: 80; display: flex; justify-content: flex-end; align-items: center; gap: 10px; min-height: 48px; margin: -20px 0 8px; }
.theme-toggle {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid #ffffff21;
  border-radius: 14px;
  color: #e8e3ed;
  background: linear-gradient(145deg, #181620, #0d0c11);
  box-shadow: 0 12px 32px #0006, inset 0 1px 0 #ffffff0d;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.theme-toggle:hover { border-color: #a970ff88; color: #fff; transform: translateY(-1px); }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: block; }
.notifications-menu { position: relative; }
.notification-bell {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #ffffff21;
  border-radius: 14px;
  color: #e8e3ed;
  background: linear-gradient(145deg, #181620, #0d0c11);
  box-shadow: 0 12px 32px #0006, inset 0 1px 0 #ffffff0d;
  cursor: pointer;
  list-style: none;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.notification-bell::-webkit-details-marker { display: none; }
.notification-bell:hover, .notifications-menu[open] .notification-bell { border-color: #a970ff88; color: #fff; transform: translateY(-1px); }
.notification-bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.notification-count { position: absolute; top: -6px; right: -7px; display: grid; min-width: 22px; height: 22px; padding: 0 5px; place-items: center; border: 2px solid #09090d; border-radius: 99px; color: #fff; background: linear-gradient(135deg, var(--orange), var(--pink)); box-shadow: 0 5px 16px #e94aac66; font-size: 10px; font-weight: 900; }
.notifications-popover { position: absolute; top: 56px; right: 0; width: min(430px, calc(100vw - 32px)); overflow: hidden; border: 1px solid #ffffff22; border-radius: 18px; background: #0d0c12f7; box-shadow: 0 30px 90px #000b; backdrop-filter: blur(20px); }
.notifications-popover > header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 15px; border-bottom: 1px solid #ffffff12; background: linear-gradient(120deg, #8b42f617, #e94aac08); }
.notifications-popover h2 { font-size: 20px; }
.notifications-popover .eyebrow { display: block; margin-bottom: 5px; }
.notification-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 15px var(--lime); }
.notification-list { display: grid; padding: 8px; }
.notification-item { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 13px; padding: 14px 13px; border: 1px solid transparent; border-radius: 12px; color: inherit; text-decoration: none; }
a.notification-item:hover { border-color: #ffffff16; background: #ffffff08; transform: none; }
.notification-item + .notification-item { border-top-color: #ffffff0d; }
.notification-symbol { width: 9px; height: 9px; margin-top: 5px; border-radius: 3px; background: currentColor; box-shadow: 0 0 12px currentColor; }
.notification-symbol.lime { color: var(--lime); }
.notification-symbol.purple { color: var(--purple-soft); }
.notification-symbol.orange { color: var(--orange); }
.notification-item strong { font-size: 13px; }
.notification-item p { margin: 4px 0 3px; color: #aaa5b1; font-size: 12px; line-height: 1.45; }
.notification-item small { color: #777280; font-size: 10px; }
.notification-item.danger strong { color: #ffadb9; }
.notification-item.attention { background: linear-gradient(90deg, #f493320d, transparent); }
.page-heading { margin-bottom: 30px; }
.page-heading h1 {
  font-size: clamp(31px, 3.2vw, 48px);
  font-weight: 760;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.eyebrow { margin-bottom: 9px; color: var(--lime); font-size: 10px; letter-spacing: .2em; }
h2 { font-size: 18px; font-weight: 720; }
.muted, small { color: var(--muted); }

.button {
  min-height: 42px;
  padding: 9px 16px;
  border-color: #ffffff22;
  border-radius: 11px;
  background: linear-gradient(180deg, #1b1921, #121118);
  box-shadow: 0 7px 18px #0003;
  font-size: 13px;
  font-weight: 750;
}
.button:hover { border-color: #ffffff55; background: #211e29; box-shadow: 0 10px 25px #0006; transform: translateY(-1px); }
.button.primary { background: linear-gradient(125deg, #7d35ed, #9d45f5 62%, #c24edc); box-shadow: 0 12px 30px #8b42f63d; }
.button.primary:hover { background: linear-gradient(125deg, #8b42f6, #ae51f7 58%, #df4fbd); box-shadow: 0 15px 38px #8b42f659; }
.button.danger { border-color: #ff667c52; background: linear-gradient(180deg, #35151c, #241015); }
.button.compact { min-height: 32px; padding: 6px 10px; border-radius: 9px; font-size: 11px; }

.panel, .form-card, .login-card, .route-technician-card {
  border-color: var(--line-strong);
  border-radius: 17px;
  background: linear-gradient(145deg, #121118e8, #0d0c12ed);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.panel-title { min-height: 65px; padding: 17px 20px; border-color: var(--line); background: linear-gradient(180deg, #ffffff04, transparent); }
.panel-title a { color: #b781ff; font-size: 12px; }

.metrics { gap: 13px; margin-bottom: 19px; }
.metrics article {
  min-height: 133px;
  padding: 20px;
  border-color: var(--line-strong);
  border-radius: 17px;
  background: linear-gradient(145deg, #15131cde, #0d0c12f0);
  box-shadow: 0 18px 45px #0000003b;
}
.metrics article::before { content: ""; position: absolute; inset: auto 18px 0; height: 2px; border-radius: 99px; background: currentColor; box-shadow: 0 0 18px currentColor; opacity: .78; }
.metrics article::after { right: -43px; bottom: -59px; opacity: .08; }
.metrics article > span { color: #bdb9c5; font-size: 12px; font-weight: 650; }
.metrics article strong { margin-top: 18px; font-size: 37px; font-weight: 760; }
.metrics article i { width: 9px; height: 9px; }
.metrics .metric-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 19px;
}
.metrics .metric-card::after { width: 92px; height: 92px; right: -46px; bottom: -50px; }
.metrics .metric-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 16px;
  color: inherit;
  background: color-mix(in srgb, currentColor 14%, transparent);
  box-shadow: inset 0 1px 0 #ffffff18;
}
.metric-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.metrics .metric-copy { position: relative; z-index: 1; min-width: 0; }
.metrics .metric-copy > span { display: block; overflow: hidden; color: #c8c4cf; font-size: 12px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.metrics .metric-copy > strong { margin-top: 8px; font-size: 34px; }
.metrics .metric-copy > small { margin-top: 6px; overflow: hidden; color: #8f8a98; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.sync-strip, .module-note {
  border-color: var(--line-strong);
  border-radius: 13px;
  background: linear-gradient(90deg, #131119d9, #0d0c12d9);
  box-shadow: 0 12px 35px #0003;
}
.sync-strip.success { border-color: #b1d73542; }
.backup-strip.success { border-color: #8b42f64d; }

.table-wrap { scrollbar-color: #8b42f6 #15131a; }
table { font-size: 13px; }
th, td { padding: 13px 16px; border-color: #ffffff0d; }
th { position: sticky; top: 0; z-index: 2; color: #96919f; background: #111016f5; font-size: 10px; font-weight: 800; letter-spacing: .11em; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #8b42f60a; }
td strong { font-weight: 720; }
.number { color: #cae966; }
.badge { color: #dbc4ff; background: #8b42f62b; }

input, select, textarea {
  min-height: 44px;
  padding: 11px 13px;
  border-color: #ffffff24;
  border-radius: 10px;
  color: var(--white);
  background: #0d0c12cc;
  box-shadow: inset 0 1px 0 #ffffff06;
}
textarea { min-height: 92px; }
input:hover, select:hover, textarea:hover { border-color: #ffffff3d; }
input:focus, select:focus, textarea:focus { border-color: #9d5af4; outline: 3px solid #8b42f626; background: #111018; }
.search, .stock-filters, .movement-filters, .audit-filters { border-color: var(--line-strong); border-radius: 15px; background: #0e0d13d9; box-shadow: 0 14px 35px #0003; }
.form-card { padding: 25px; }
.stacked-form label, .movement-line label { color: #cac6d1; font-size: 12px; }

.message { border-radius: 12px; box-shadow: 0 12px 35px #0004; }
.catalog-image { border: 1px solid #ffffff18; border-radius: 11px; }
.catalog-footer { border-color: var(--line); }
.stock-status { letter-spacing: .04em; }

.request-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.request-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.request-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.request-card-heading > div { display: grid; gap: 4px; }
.request-card-heading strong { font-size: 1.05rem; }
.request-card-heading small { color: var(--muted); }
.request-products { display: grid; gap: 8px; }
.request-products > div, .request-mini-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.request-products span { min-width: 0; color: var(--muted); }
.request-products span small { display: block; margin-top: 4px; color: #8f8a99; font-size: 11px; }
.request-products strong { flex: 0 0 auto; color: var(--lime); }
.request-notes { margin: 0; padding: 12px 14px; border-left: 3px solid var(--orange); border-radius: 0 10px 10px 0; background: rgba(255,122,0,.08); color: #e9e5ee; }
.request-actions, .request-actions form { margin: 0; }
.request-mini-list { display: grid; gap: 10px; padding: 0 18px 18px; }
.request-mini-list a { color: inherit; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.request-mini-list a:hover { border-color: rgba(142,61,255,.5); transform: translateY(-1px); }
.request-mini-list a > div { display: grid; gap: 3px; }
.request-mini-list small { color: var(--muted); }
.request-filter { grid-template-columns: minmax(220px, 360px) auto auto; }
.pending-requests-strip { border-color: rgba(255,122,0,.35); background: linear-gradient(110deg, rgba(255,122,0,.12), rgba(139,66,246,.08)); }
.partial-delivery-form { display: grid; gap: 20px; }
.partial-delivery-lines { display: grid; gap: 12px; }
.partial-delivery-lines article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 260px); align-items: end; gap: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.partial-delivery-lines article > div { display: grid; gap: 5px; }
.partial-delivery-lines small { color: var(--muted); }
.partial-delivery-lines label { color: #cac6d1; font-size: 12px; font-weight: 700; }
.partial-delivery-lines input { margin-top: 6px; }
.receipt-alert-panel { border-color: rgba(169,112,255,.3); background: linear-gradient(145deg, rgba(139,66,246,.1), rgba(13,12,18,.96)); }
.receipt-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; padding: 12px 14px; border-radius: 11px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 11px; }
.receipt-meta p { flex-basis: 100%; margin: 0; color: #ddd8e3; }
.receipt-confirm-form { display: grid; gap: 20px; }
.receipt-instructions { display: grid; gap: 4px; padding: 15px 16px; border-left: 3px solid var(--lime); border-radius: 0 12px 12px 0; background: rgba(177,215,53,.07); }
.receipt-checklist { display: grid; gap: 10px; }
.receipt-confirm-form .receipt-check-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 15px 16px; border: 1px solid var(--line); border-radius: 13px; color: inherit; background: rgba(255,255,255,.025); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.receipt-confirm-form .receipt-check-item:hover { border-color: #ffffff32; background: rgba(255,255,255,.045); }
.receipt-confirm-form .receipt-check-item input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.receipt-confirm-form .custom-check { display: grid; width: 31px; height: 31px; margin: 0; padding: 0; place-items: center; border: 2px solid #5d5865; border-radius: 9px; color: transparent; background: #0c0b10; font-size: 17px; font-weight: 900; line-height: 1; transition: all .2s ease; }
.receipt-confirm-form .receipt-check-item input:checked + .custom-check { border-color: var(--lime); color: #101307; background: var(--lime); box-shadow: 0 0 18px rgba(177,215,53,.35); }
.receipt-product-info { display: grid; min-width: 0; gap: 3px; }
.receipt-product-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-product-info small { color: var(--muted); }
.receipt-line-quantity { display: flex; align-items: baseline; gap: 5px; color: var(--lime); text-align: right; white-space: nowrap; }
.receipt-line-quantity small { color: var(--muted); font-size: 10px; font-weight: 700; }
.receipt-confirm-form .receipt-check-item:has(input:checked) { border-color: rgba(177,215,53,.28); background: rgba(177,215,53,.055); }
.receipt-confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.discrepancy-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 20px; border-color: rgba(233,74,172,.32); background: linear-gradient(135deg, rgba(233,74,172,.08), rgba(139,66,246,.06)); }
.discrepancy-summary > div { display: grid; gap: 7px; }
.discrepancy-summary p { margin: 0; color: var(--muted); }
.discrepancy-resolution-form { display: grid; gap: 20px; padding: 22px; }
.resolution-line-list { display: grid; gap: 10px; }
.resolution-line { display: grid; grid-template-columns: minmax(0, 1fr) 170px; align-items: center; gap: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.resolution-line > span:first-child { display: grid; gap: 4px; }
.resolution-line small { color: var(--muted); }
.resolution-input input { width: 100%; text-align: right; }
.resolution-options { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.2fr); gap: 18px; }
.field-block { display: grid; align-content: start; gap: 8px; }
.field-block > label { color: #cac6d1; font-size: 12px; font-weight: 700; }
.field-block ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.field-block li label { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.field-block input[type="radio"] { min-height: 18px; width: 18px; margin: 1px 0 0; padding: 0; }
.table-note { display: block; max-width: 340px; margin-top: 4px; color: var(--muted); }
.table-actions { display: flex; align-items: center; gap: 7px; }
.inline-close-menu { position: relative; }
.inline-close-menu summary { list-style: none; cursor: pointer; }
.inline-close-menu summary::-webkit-details-marker { display: none; }
.inline-close-menu form { position: absolute; z-index: 8; top: calc(100% + 7px); right: 0; display: grid; width: 190px; gap: 8px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: #111016; box-shadow: var(--shadow); }
.inline-close-menu select { width: 100%; }
.custody-technician-panel { border-color: rgba(139,66,246,.28); }
.custody-filters { grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) auto; align-items: end; }
.custody-filter-actions { display: flex; gap: 8px; }
.custody-technician-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.custody-technician-card { min-width: 0; overflow: visible; }
.custody-technician-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(100deg, rgba(139,66,246,.09), transparent); }
.custody-technician-heading h2 { margin: 0; font-size: 18px; }
.custody-technician-heading small { display: block; margin-top: 3px; color: var(--muted); }
.custody-avatar { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(177,215,53,.24); border-radius: 13px; color: var(--lime); background: linear-gradient(145deg, rgba(177,215,53,.12), rgba(139,66,246,.14)); font-size: 18px; font-weight: 900; }
.custody-item-list { display: grid; gap: 10px; padding: 14px; }
.custody-item { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.023); }
.custody-item-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.custody-item-heading > div { display: grid; min-width: 0; gap: 4px; }
.custody-item-heading > div > strong { overflow: hidden; text-overflow: ellipsis; }
.custody-item-heading small { color: var(--muted); }
.custody-item-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.custody-item-details > span { display: grid; gap: 3px; padding: 9px 10px; border-radius: 9px; background: rgba(255,255,255,.035); }
.custody-item-details small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.custody-item-details strong { font-size: 11px; }
.custody-item-notes { margin: 0; padding: 9px 11px; border-left: 2px solid var(--orange); color: #ccc7d1; background: rgba(255,122,0,.055); font-size: 11px; }
.custody-item-actions { display: flex; justify-content: flex-end; gap: 7px; }
.custody-closed-at { color: var(--muted); text-align: right; }
.custody-empty { display: grid; min-height: 120px; place-content: center; padding: 22px; color: var(--muted); text-align: center; }
.custody-empty span { color: #d7d1dc; font-weight: 800; }
.custody-empty p { margin: 5px 0 0; }
.consumption-period-heading { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
.consumption-period-heading > div { display: grid; min-width: 0; gap: 3px; }
.period-filter { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; align-items: center; width: 100%; min-width: 0; max-width: 100%; gap: 8px; }
.period-filter label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.period-filter input { width: 100%; min-width: 0; min-height: 34px; padding: 6px 9px; font-size: 11px; }
.period-filter .button { min-width: 0; max-width: 100%; }
.route-receipt-area { display: grid; gap: 14px; padding: 18px; border-top: 1px solid var(--line); background: linear-gradient(145deg, rgba(139,66,246,.055), rgba(177,215,53,.025)); }
.route-receipt-heading, .route-receipt-folio { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.route-receipt-heading > div, .route-receipt-folio > div { display: grid; gap: 3px; }
.route-receipt-heading small, .route-receipt-folio small { color: var(--muted); }
.route-receipt-card { padding: 16px; border: 1px solid rgba(139,66,246,.3); border-radius: 14px; background: rgba(10,9,14,.74); }
.route-receipt-folio { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.route-receipt-folio > span { color: #d6b9ff; font-size: 11px; font-weight: 800; }
.route-signature-grid { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(280px,1.2fr); gap: 14px; }
.route-signature-grid label { display: grid; gap: 7px; color: #cac6d1; font-size: 12px; font-weight: 700; }
.route-signature-grid textarea { min-height: 66px; }
.route-receipt-complete { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid rgba(177,215,53,.2); border-radius: 12px; background: rgba(177,215,53,.055); }
.route-receipt-complete > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #111407; background: var(--lime); font-weight: 900; }
.route-receipt-complete > div { display: grid; gap: 2px; }
.route-receipt-complete small { color: var(--muted); }
.usage-filter { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 12px; padding: 16px; }
.usage-filter label, .reconciliation-filter label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.usage-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.usage-review-card { display: grid; align-content: start; gap: 15px; padding: 18px; }
.usage-review-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.usage-review-card h2 { margin: 4px 0; font-size: 18px; }
.usage-review-card header small { color: var(--muted); }
.usage-facts { display: grid; grid-template-columns: .65fr 1fr 1.2fr; gap: 8px; }
.usage-facts span { display: grid; gap: 4px; padding: 11px; border-radius: 10px; background: rgba(255,255,255,.035); }
.usage-facts small { color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.usage-facts strong { font-size: 12px; }
.usage-facts-compact { grid-template-columns: .65fr 1.35fr; }
.usage-notes { margin: 0; padding: 10px 12px; border-left: 2px solid var(--orange); color: #cbc6d0; background: rgba(255,122,0,.05); }
.evidence-link { padding: 11px 13px; border: 1px solid rgba(139,66,246,.3); border-radius: 10px; color: #d8bdff; background: rgba(139,66,246,.07); text-decoration: none; }
.usage-review-form { display: grid; gap: 12px; padding-top: 13px; border-top: 1px solid var(--line); }
.usage-review-form label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; }
.usage-resolution { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.usage-resolution small { color: var(--muted); }
.reconciliation-metrics { margin-bottom: 16px; }
.reconciliation-filter { display: flex; align-items: end; gap: 12px; padding: 16px; }
.reconciliation-filter input { min-width: 190px; }
.reconciliation-form { overflow: hidden; }
.reconciliation-form table { min-width: 1320px; }
.reconciliation-form input { min-width: 115px; }
.reconciliation-form td:last-child input { min-width: 180px; }
.count-input { border-color: rgba(177,215,53,.28); }
.return-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.return-review-card { max-width: 850px; }
.return-review-card .stacked-form { padding: 22px; }
.return-review-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
.return-review-summary span { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 16px 20px; background: #0d0c11; }
.return-review-summary small { color: var(--muted); }
.return-pending { color: #ffd29f; background: #ff7a0027; }
.return-reusable { color: #dfff62; background: #acd40025; }
.return-damaged, .return-scrapped { color: #ffb2bd; background: #ff597327; }
.return-warranty { color: #d8bcff; background: #8d35f52c; }
.reconciliation-actions { justify-content: flex-end; padding: 16px; border-top: 1px solid var(--line); }
.positive { color: #cceb65; }
.negative { color: #ff9eac; }
.warning-number { color: #ffc075; }
.reason-breakdown { display: grid; gap: 3px; margin-top: 7px; color: #aaa5b1; text-align: left; white-space: nowrap; }
.reason-breakdown small { font-size: 9px; font-weight: 700; }

.trend-panel, .donut-panel { border-color: #ffffff24; background: linear-gradient(145deg, #15121d 0%, #0c0b10 100%); }
.chart-grid-line { stroke: #ffffff12; }
.bar-track, .category-track { background: #ffffff0d; }
.bar-track i, .category-track i { box-shadow: 0 0 14px currentColor; }
.route-avatar { color: #d8ef85; background: linear-gradient(145deg, #b1d73528, #8b42f61e); box-shadow: inset 0 0 0 1px #ffffff0d; }

.movement-line { border-color: var(--line); }
.line-number { color: #d7bdff; background: linear-gradient(145deg, #8b42f638, #e94aac1f); }
.movement-history-panel td:nth-child(4) { min-width: 330px; max-width: 520px; white-space: normal; }
.movement-history-panel td:nth-child(5),
.movement-history-panel td:nth-child(6) { min-width: 150px; }
.movement-product-line { grid-template-columns: minmax(0, 1fr) 72px; align-items: start; min-width: 0; border-color: var(--line); }
.movement-product-line > span { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.movement-product-line > small { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.usage-reason-allocation { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; }
.usage-reason-allocation legend { padding: 0 7px; font-weight: 850; }
.usage-reason-allocation > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.usage-reason-allocation label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 10px; background: #ffffff05; }
.usage-reason-allocation input { width: 95px; min-height: 38px; padding: 7px 9px; text-align: right; }
.usage-reason-summary { display: flex; flex-direction: column; gap: 3px; }
.usage-batch-card { grid-column: 1 / -1; }
.usage-batch-products { display: grid; gap: 8px; }
.usage-batch-product { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(180px, .6fr); align-items: center; gap: 16px; padding: 12px 14px; border-radius: 11px; background: rgba(255,255,255,.035); }
.usage-batch-product > div { display: grid; gap: 4px; }
.usage-batch-product small { color: var(--muted); }
.usage-multi-form .movement-line { grid-template-columns: 34px minmax(280px, 1fr) 150px auto; }

.mobile-header { background: #09090dda; box-shadow: 0 10px 30px #0005; }

@media (max-width: 1050px) {
  .sidebar { width: 222px; }
  .container { width: calc(100% - 222px); margin-left: 222px; }
  .brand-image-wrap { width: 164px; }
  .metrics .metric-card { grid-template-columns: 46px minmax(0, 1fr); gap: 11px; padding: 16px; }
  .metrics .metric-icon { width: 46px; height: 46px; border-radius: 14px; }
  .metric-icon svg { width: 23px; height: 23px; }
  .metrics .metric-copy > strong { font-size: 30px; }
}

@media (max-width: 720px) {
  body::before { background-size: 38px 38px; }
  .container { width: 100%; margin-left: 0; padding: 25px 5vw 65px; }
  .app-topbar { min-height: 42px; margin: -12px 0 8px; }
  .theme-toggle { width: 42px; min-height: 42px; padding: 0; justify-content: center; border-radius: 12px; }
  .theme-toggle span { display: none; }
  .notification-bell { width: 42px; height: 42px; border-radius: 12px; }
  .notifications-popover { position: fixed; top: 70px; right: 4vw; width: 92vw; }
  .mobile-header { border-color: #ffffff14; }
  .page-heading { gap: 18px; margin-bottom: 24px; }
  .page-heading h1 { font-size: 34px; }
  .panel, .form-card, .route-technician-card { border-radius: 15px; }
  .request-card-grid { grid-template-columns: 1fr; }
  .request-card-heading, .request-products > div { align-items: flex-start; }
  .request-products > div { flex-direction: column; gap: 5px; }
  .request-filter { grid-template-columns: 1fr; }
  .partial-delivery-lines article { grid-template-columns: 1fr; }
  .receipt-confirm-actions { display: grid; grid-template-columns: 1fr; }
  .receipt-confirm-form .receipt-check-item { grid-template-columns: 34px minmax(0, 1fr); }
  .receipt-line-quantity { grid-column: 2; justify-self: start; }
  .discrepancy-summary, .resolution-options { grid-template-columns: 1fr; }
  .resolution-line { grid-template-columns: 1fr; }
  .resolution-input input { text-align: left; }
  .consumption-period-heading { display: grid; grid-template-columns: 1fr; align-items: flex-start; }
  .period-filter { width: 100%; grid-template-columns: 1fr; }
  .period-filter .button { width: 100%; }
  .route-receipt-area { padding: 14px; }
  .route-receipt-heading, .route-receipt-folio { align-items: flex-start; }
  .route-receipt-card { padding: 12px; }
  .route-signature-grid { grid-template-columns: 1fr; }
  .technician-panel > .panel-title { align-items: flex-start; flex-direction: column; gap: 5px; }
  .return-review-summary { grid-template-columns: 1fr; }
  .usage-reason-allocation > div { grid-template-columns: 1fr; }
  .custody-filters, .custody-technician-grid { grid-template-columns: 1fr; }
  .custody-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .custody-technician-heading { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 14px; }
  .custody-avatar { width: 40px; height: 40px; }
  .custody-item-details { grid-template-columns: 1fr 1fr; }
  .custody-item-details > span:first-child { grid-column: 1 / -1; }
  .usage-review-grid { grid-template-columns: 1fr; }
  .usage-filter { grid-template-columns: 1fr; }
  .usage-facts { grid-template-columns: 1fr 1fr; }
  .usage-facts span:last-child { grid-column: 1 / -1; }
  .usage-review-card > header { flex-direction: column; }
  .usage-batch-product { grid-template-columns: 1fr; }
  .metrics { gap: 9px; }
  .metrics article { min-height: 112px; padding: 16px; border-radius: 14px; }
  .metrics article strong { margin-top: 14px; font-size: 30px; }
  .metrics .metric-card { display: grid; min-height: 118px; grid-template-columns: 44px minmax(0, 1fr); padding: 15px; }
  .metrics .metric-icon { width: 44px; height: 44px; }
  .metrics .metric-copy > strong { margin-top: 6px; font-size: 28px; }
  .metrics .metric-copy > small { margin-top: 4px; }
  .panel-title { min-height: 58px; padding: 15px 16px; }
  th, td { padding: 11px 13px; }
  .donut-grid { gap: 4px; padding-inline: 10px; }
  .donut { width: 112px; height: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Distribuciones operativas 2026 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.page-subtitle { max-width: 680px; margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.button-with-icon { gap: 8px; }
.button-with-icon > span { font-size: 18px; line-height: 1; }

.catalog-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) minmax(220px, .85fr) auto auto minmax(110px, auto);
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid var(--line-strong);
  border-radius: 17px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 14px 40px #0002;
}
.toolbar-search, .toolbar-select { position: relative; display: block; }
.toolbar-search > svg, .toolbar-select > svg { position: absolute; z-index: 2; top: 50%; left: 14px; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.8; transform: translateY(-50%); pointer-events: none; }
.toolbar-search input, .toolbar-select select { width: 100%; padding-left: 42px; background: color-mix(in srgb, var(--panel-raised) 82%, transparent); }
.catalog-result-count { justify-self: end; color: var(--muted); font-size: 11px; font-weight: 750; white-space: nowrap; }
.catalog-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.catalog-product-card, .catalog-create-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 17px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel-raised) 94%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
  box-shadow: 0 16px 42px #00000026;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.catalog-product-card:hover { border-color: color-mix(in srgb, var(--pink) 34%, var(--line-strong)); box-shadow: 0 22px 48px #0003; transform: translateY(-3px); }
.catalog-product-media { position: relative; display: grid; height: 172px; place-items: center; margin: 10px 10px 0; overflow: hidden; border-radius: 13px; background: #fff; }
.catalog-product-media > img { display: block; width: 100%; height: 100%; padding: 10px; object-fit: contain; }
.catalog-code { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 5px 8px; border: 1px solid #2b1b3b12; border-radius: 8px; color: #382645; background: #fffffff2; box-shadow: 0 5px 16px #2d18351c; font-size: 10px; font-weight: 850; }
.catalog-product-placeholder { display: grid; place-items: center; gap: 8px; color: #938b99; }
.catalog-product-placeholder svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.catalog-product-body { display: grid; align-content: start; min-height: 154px; padding: 15px 15px 12px; }
.catalog-product-body h2 { display: -webkit-box; margin-bottom: 5px; overflow: hidden; font-size: 15px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalog-category { color: var(--pink); font-size: 10px; font-weight: 800; }
.catalog-product-body p { display: -webkit-box; margin: 10px 0 0; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.catalog-product-body > small { margin-top: 8px; font-size: 10px; }
.catalog-product-actions { display: grid; grid-template-columns: .75fr 1.35fr .8fr; gap: 1px; padding: 0 8px 8px; }
.catalog-product-actions a { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 5px; padding: 9px 5px; border-radius: 8px; color: var(--muted); font-size: 9px; font-weight: 750; text-align: center; }
.catalog-product-actions a:hover { color: var(--white); background: color-mix(in srgb, var(--purple) 10%, transparent); }
.catalog-product-actions svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.catalog-product-actions .danger-link:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); }
.catalog-create-card { display: grid; min-height: 366px; place-content: center; gap: 9px; border-style: dashed; color: var(--pink); text-align: center; }
.catalog-create-card:hover { border-color: var(--pink); color: var(--pink); background: color-mix(in srgb, var(--pink) 5%, var(--panel)); transform: translateY(-2px); }
.catalog-create-card > span { display: grid; width: 55px; height: 55px; margin: 0 auto 6px; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 28px; font-weight: 300; }
.catalog-create-card small { font-size: 10px; }
.catalog-empty { grid-column: 1 / -1; }

.movement-launcher { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 14px; }
.movement-launcher > a { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 4px 13px; min-height: 94px; padding: 17px; border: 1px solid var(--line-strong); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-raised) 94%, transparent), color-mix(in srgb, var(--panel) 95%, transparent)); box-shadow: 0 14px 38px #0002; }
.movement-launcher > a:hover { border-color: color-mix(in srgb, var(--pink) 38%, var(--line-strong)); transform: translateY(-2px); }
.launcher-icon { display: grid; grid-row: 1 / 3; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: color-mix(in srgb, currentColor 13%, transparent); }
.launcher-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.launcher-icon.lime, .summary-icon.lime { color: var(--lime); }.launcher-icon.pink, .summary-icon.pink { color: var(--pink); }.launcher-icon.purple, .summary-icon.purple { color: var(--purple-soft); }.launcher-icon.orange, .summary-icon.orange { color: var(--orange); }
.movement-launcher strong { align-self: end; font-size: 15px; }
.movement-launcher small { align-self: start; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.movement-day-summary { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 12px 34px #0002; }
.movement-day-summary > div { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 3px 10px; min-width: 0; padding: 14px 17px; border-right: 1px solid var(--line); }
.movement-day-summary > div:last-child { border-right: 0; }
.summary-icon { display: grid; grid-row: 1 / 3; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: color-mix(in srgb, currentColor 13%, transparent); }
.summary-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.movement-day-summary small { font-size: 10px; }
.movement-day-summary strong { grid-column: 3; grid-row: 1 / 3; font-size: 22px; }
.movement-history-panel { overflow: hidden; }

.route-technician-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.route-technician-card { box-shadow: 0 16px 44px #00000027; }
.route-card-heading { min-height: 83px; padding: 17px 20px; background: linear-gradient(100deg, color-mix(in srgb, var(--purple) 7%, transparent), transparent); }
.route-card-heading > div > div { display: grid; gap: 5px; }
.route-card-heading h2 { font-size: 19px; }
.route-state { display: inline-flex; width: max-content; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; color: color-mix(in srgb, var(--lime) 82%, var(--white)); background: color-mix(in srgb, var(--lime) 11%, transparent); font-size: 9px; font-weight: 800; }
.route-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px var(--lime); }
.route-truck { width: 25px; height: 25px; fill: none; stroke: var(--purple-soft); stroke-width: 1.6; }
.route-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin: 13px 18px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.route-stat-strip > span { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 1px 8px; padding: 10px 11px; border-right: 1px solid var(--line); }
.route-stat-strip > span:last-child { border-right: 0; }
.route-stat-strip svg { grid-row: 1 / 3; width: 20px; height: 20px; align-self: center; fill: none; stroke: var(--muted); stroke-width: 1.7; }
.route-stat-strip strong { line-height: 1; }
.route-stat-strip small { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.route-preview { min-height: 207px; padding: 14px 20px; }
.route-preview h3 { margin: 0 0 6px; font-size: 11px; }
.route-preview > div { padding: 8px 0; font-size: 11px; }
.route-card-footer { min-height: 65px; }
.route-delivery-status { display: inline-flex; min-width: 0; align-items: center; gap: 7px; overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.route-delivery-status svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.route-delivery-status.confirmed { color: var(--lime); }.route-delivery-status.pending { color: var(--orange); }.route-delivery-status.danger { color: var(--danger); }

.movement-header-card { position: sticky; top: 20px; padding: 24px; }
.movement-lines-panel { min-height: 410px; }
.movement-lines { display: grid; gap: 10px; padding: 14px; }
.movement-multi-form:not(.usage-multi-form) .movement-line { width: 100%; max-width: 100%; min-width: 0; grid-template-columns: 34px repeat(12, minmax(0, 1fr)); align-items: end; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--panel-raised) 72%, transparent); }
.movement-multi-form:not(.usage-multi-form) .line-number { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.movement-multi-form:not(.usage-multi-form) .line-product { grid-column: 2 / span 5; grid-row: 1; }
.movement-multi-form:not(.usage-multi-form) .line-quantity { grid-column: 7 / span 2; grid-row: 1; }
.movement-multi-form:not(.usage-multi-form) .line-returner { grid-column: 9 / span 5; grid-row: 1; }
.movement-multi-form:not(.usage-multi-form) .line-reason { grid-column: 2 / span 4; grid-row: 2; align-self: start; }
.movement-multi-form:not(.usage-multi-form) .line-applied-date { display: none; }
.movement-multi-form:not(.usage-multi-form) .line-allocations { grid-column: 6 / span 7; grid-row: 2; align-self: start; }
.movement-multi-form:not(.usage-multi-form) .line-delete { grid-column: 13; grid-row: 2; align-self: end; justify-self: end; }
.pending-allocation-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.pending-allocation-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: end; gap: 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--panel) 78%, transparent); }
.pending-allocation-row > div { min-width: 0; }
.pending-allocation-row strong, .pending-allocation-row small { display: block; }
.pending-allocation-row strong { font-size: 13px; }
.pending-allocation-row small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.pending-allocation-row label { margin: 0; }
.pending-allocation-row label span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 800; }
.pending-allocation-row input { width: 100%; min-height: 42px; padding: 8px 10px; }
.allocation-help { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.allocation-loading { display: block; padding: 12px; color: var(--muted); }
.movement-multi-form .movement-line > div,
.movement-multi-form .movement-line input,
.movement-multi-form .movement-line select,
.movement-multi-form .movement-line .product-combobox { min-width: 0; max-width: 100%; }
.movement-multi-form .movement-line label { overflow-wrap: anywhere; }
.movement-multi-form .line-delete .button { max-width: 100%; white-space: nowrap; }
.movement-multi-form .movement-line:last-child { border-bottom: 1px solid var(--line); }
.movement-submit-bar { position: sticky; z-index: 12; bottom: 14px; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 18px 55px #0006; backdrop-filter: blur(18px); }
.movement-live-summary { display: flex; align-items: center; gap: 12px; }
.movement-live-summary > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--lime); background: color-mix(in srgb, var(--lime) 12%, transparent); }
.movement-live-summary svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.movement-live-summary strong, .movement-live-summary small { display: block; }
.movement-live-summary strong { font-size: 13px; }.movement-live-summary strong b { color: var(--lime); }
.movement-live-summary small { margin-top: 2px; font-size: 10px; }.movement-live-summary small b { color: var(--pink); }

@media (max-width: 1280px) {
  .catalog-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-toolbar { grid-template-columns: minmax(240px, 1.2fr) minmax(200px, .8fr) auto auto; }
  .catalog-result-count { grid-column: 1 / -1; justify-self: start; }
  .movement-launcher > a { grid-template-columns: 42px minmax(0, 1fr); padding: 14px; }
  .launcher-icon { width: 42px; height: 42px; }
}
@media (max-width: 950px) {
  .catalog-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .movement-launcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .movement-day-summary { grid-template-columns: repeat(2, 1fr); }
  .movement-day-summary > div:nth-child(2) { border-right: 0; }
  .movement-day-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .route-technician-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .page-subtitle { font-size: 12px; }
  .catalog-heading { align-items: stretch; }
  .catalog-toolbar { grid-template-columns: 1fr 1fr; padding: 12px; }
  .toolbar-search, .toolbar-select { grid-column: 1 / -1; }
  .catalog-result-count { grid-column: 1 / -1; }
  .catalog-card-grid { grid-template-columns: 1fr; }
  .catalog-product-media { height: 205px; }
  .catalog-create-card { min-height: 230px; }
  .movement-launcher { gap: 9px; }
  .movement-launcher > a { display: grid; min-height: 105px; grid-template-columns: 38px minmax(0, 1fr); padding: 12px; }
  .launcher-icon { width: 38px; height: 38px; }
  .movement-day-summary > div { grid-template-columns: 32px 1fr auto; padding: 11px; }
  .summary-icon { width: 32px; height: 32px; }
  .movement-day-summary strong { font-size: 19px; }
  .route-stat-strip { margin: 11px 12px 0; }
  .route-stat-strip > span { grid-template-columns: 1fr; place-items: center; padding: 9px 5px; text-align: center; }
  .route-stat-strip svg { grid-row: auto; }
  .route-stat-strip small { white-space: normal; }
  .route-preview { min-height: 0; padding: 13px 15px; }
  .route-card-footer { align-items: flex-start; flex-direction: column; }
  .route-card-footer .button { width: 100%; }
  .movement-header-card { position: static; }
  .movement-multi-form:not(.usage-multi-form) .movement-line { grid-template-columns: 28px minmax(0, 1fr); padding: 12px; }
  .movement-multi-form:not(.usage-multi-form) .line-number { grid-column: 1; grid-row: 1; }
  .movement-multi-form:not(.usage-multi-form) .line-product,
  .movement-multi-form:not(.usage-multi-form) .line-quantity,
  .movement-multi-form:not(.usage-multi-form) .line-returner,
  .movement-multi-form:not(.usage-multi-form) .line-reason,
  .movement-multi-form:not(.usage-multi-form) .line-applied-date,
  .movement-multi-form:not(.usage-multi-form) .line-allocations,
  .movement-multi-form:not(.usage-multi-form) .line-delete { grid-column: 2; grid-row: auto; justify-self: stretch; }
  .pending-allocation-options { grid-template-columns: 1fr; }
  .movement-multi-form:not(.usage-multi-form) .line-delete .button { width: 100%; }
  .movement-submit-bar { bottom: 72px; align-items: stretch; flex-direction: column; }
  .movement-submit-bar .actions { display: grid; grid-template-columns: 1fr 1fr; }
}