/* Mobile role override. Load after the legacy role sheets and pro-vision.css. */
html[data-stgr-app] {
  --dp-bg: #f6f7f9;
  --dp-surface: #fff;
  --dp-soft: #eef3fd;
  --dp-surface-soft: #f6f7f9;
  --dp-text: #202831;
  --dp-muted: #596575;
  --dp-line: #dfe3e8;
  --dp-brand: #2563eb;
  --dp-brand-deep: #1d4ed8;
  --dp-action: #2563eb;
  --dp-primary: #2563eb;
  --dp-primary-strong: #1d4ed8;
  --dp-primary-soft: #eef3fd;
  --dp-success: #087f65;
  --dp-warning: #925b0b;
  --dp-danger: #b42318;
  --dp-radius: 8px;
  --dp-radius-sm: 8px;
  --dp-radius-md: 8px;
  --dp-radius-lg: 8px;
  --dp-shadow: none;
  --stgr-bg: #f6f7f9;
  --stgr-card: #fff;
  --stgr-ink: #202831;
  --stgr-muted: #596575;
  --stgr-line: #dfe3e8;
  --stgr-primary: #2563eb;
  --stgr-primary-2: #1d4ed8;
  --stgr-accent: #087f65;
  --stgr-warm: #925b0b;
  --stgr-danger: #b42318;
  --stgr-radius: 8px;
  --stgr-shadow: none;
  --bg: #f6f7f9;
  --card: #fff;
  --panel: #fff;
  --text: #202831;
  --ink: #202831;
  --muted: #596575;
  --line: #dfe3e8;
  --primary: #2563eb;
  --primary2: #1d4ed8;
  --teal: #2563eb;
  --teal-dark: #1d4ed8;
  --success: #087f65;
  --warning: #925b0b;
  --danger: #b42318;
  --shadow: none;
  --pm-nav-height: 68px;
  --pm-header-height: 72px;
  background: var(--dp-bg);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
  scroll-padding-top: calc(var(--pm-header-height) + env(safe-area-inset-top) + 16px);
  scroll-padding-bottom: calc(var(--pm-nav-height) + env(safe-area-inset-bottom) + 24px);
}
[data-stgr-app] body {
  background: var(--dp-bg);
  color: var(--dp-text);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
[data-stgr-app] *, [data-stgr-app] *::before, [data-stgr-app] *::after { letter-spacing: 0; }
[data-stgr-app] [hidden] { display: none !important; }
[data-stgr-app] :is(button,input,select,textarea,stgr-app-mark,stgr-bottom-nav,stgr-sync-state) { font-family: inherit; }
[data-stgr-app] :is(h1,h2,h3,p,small,b,strong,label,button) { overflow-wrap: anywhere; }
[data-stgr-app] :is(button,.btn,input:not([type="hidden"]),select,summary) { min-height: 44px; }
[data-stgr-app] :is(button,.btn) { touch-action: manipulation; }
[data-stgr-app] :is(button,input,select,textarea,.btn) { max-width: 100%; }
[data-stgr-app] :is(button,a,input,select,textarea,summary):focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}
[data-stgr-app] :is(button,.btn):disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
[data-stgr-app] :is(input,select,textarea) {
  min-width: 0;
  border: 1px solid #c7cdd5 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--dp-text);
  font-size: 16px;
  accent-color: var(--dp-brand);
}
[data-stgr-app] :is(input,select,textarea):focus { border-color: #2563eb !important; box-shadow: 0 0 0 2px #dbe7ff !important; }
[data-stgr-app] input[type="checkbox"], [data-stgr-app] input[type="radio"] { min-height: 24px; width: 24px; height: 24px; }
[data-stgr-app] :is(.field label,.field-label,.order-form label span) { color: var(--dp-muted); font-size: 13px; font-weight: 600; }
[data-stgr-app] :is(.helper,.support-copy,.status-copy) { color: var(--dp-muted); line-height: 1.5; }

/* The brand, role and actions have separate tracks, even on a 320px screen. */
[data-stgr-app] :is(.stgr-appbar,.mobile-appbar) {
  min-height: calc(var(--pm-header-height) + env(safe-area-inset-top));
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--dp-line);
  background: #fff;
  backdrop-filter: none;
  box-shadow: none;
}
[data-stgr-app] :is(.stgr-mark,.mobile-brand) {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 8px;
  background: #eef3fd;
  color: #2563eb;
  box-shadow: none;
}
[data-stgr-app] .stgr-mark::after { display: none; }
[data-stgr-app] :is(.stgr-mark,.mobile-brand) svg { width: 24px; height: 24px; }
[data-stgr-app] :is(.stgr-app-title,.mobile-app-identity) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
[data-stgr-app] :is(.stgr-app-title,.mobile-app-identity) strong {
  order: -1;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 750;
  color: var(--dp-text);
  white-space: normal;
}
[data-stgr-app] :is(.stgr-app-title,.mobile-app-identity) small {
  display: block;
  margin-top: 2px;
  color: var(--dp-muted);
  font-size: 12px;
  line-height: 1.3;
  text-transform: none;
  font-weight: 500;
}
[data-stgr-app] :is(.stgr-user-chip,.mobile-account) { max-width: 160px; min-width: 0; }
[data-stgr-app] :is(.stgr-user-chip b,.mobile-account b) { font-size: 12px; }
[data-stgr-app] :is(.stgr-user-chip small,.mobile-account small) { font-size: 11px; }
[data-stgr-app] :is(.stgr-sync,.mobile-sync,.stgr-logout) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px !important;
  padding: 8px 10px;
  border: 1px solid var(--dp-line);
  border-radius: 8px !important;
  background: #fff;
  color: var(--dp-muted);
  font-size: 12px;
  font-weight: 600;
}
[data-stgr-app] :is(.stgr-sync,.mobile-sync) { color: #087f65; }
[data-stgr-app] :is(.stgr-sync,.mobile-sync) svg { width: 20px; height: 20px; flex: 0 0 20px; }
[data-stgr-app] :is(.stgr-sync-dot,.mobile-sync i) { display: none; }
[data-stgr-app] :is(.stgr-sync.offline,.mobile-sync[data-state="offline"]) { color: #925b0b; background: #fff7e7; border-color: #ebd7ad; }
[data-stgr-app] :is(.stgr-sync.syncing,.mobile-sync[data-state="syncing"]) { color: #2563eb; background: #eef3fd; }
[data-stgr-app] :is(.stgr-sync.syncing,.mobile-sync[data-state="syncing"]) svg { animation: stgrPulse 1.2s ease-in-out infinite; }
[data-stgr-app] .stgr-logout:hover { color: #b42318; background: #fff1f0; }
[data-stgr-app] .stgr-logout { width: 44px; height: 44px; padding: 0; }
[data-stgr-app] .stgr-logout svg { width: 20px; height: 20px; }

[data-stgr-app] :is(stgr-bottom-nav,.mobile-bottom-nav) {
  z-index: 950;
  min-height: calc(var(--pm-nav-height) + env(safe-area-inset-bottom));
  padding: 6px max(12px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: #fff;
  border-top: 1px solid var(--dp-line);
  backdrop-filter: none;
}
[data-stgr-app] :is(.stgr-nav a,.mobile-bottom-nav button) {
  min-height: 55px;
  min-width: 0;
  gap: 3px;
  padding: 5px 4px;
  border: 0;
  border-radius: 8px;
  color: var(--dp-muted);
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  background: transparent;
}
[data-stgr-app] :is(.stgr-nav a[aria-current="page"],.mobile-bottom-nav button.is-active) {
  background: #eef3fd;
  color: #1d4ed8;
  box-shadow: inset 0 2px #2563eb;
}
[data-stgr-app] :is(.stgr-nav,.mobile-bottom-nav) svg { width: 22px; height: 22px; flex-shrink: 0; }
[data-stgr-app] .stgr-shell-version {
  position: static;
  display: block;
  margin: 0 16px calc(var(--pm-nav-height) + env(safe-area-inset-bottom) + 12px);
  padding: 0;
  background: transparent;
  text-align: center;
  color: var(--dp-muted);
  font-size: 10px;
}

/* Sections are unframed; only repeated records and actual dialogs get borders. */
[data-stgr-app] :is(.mobile-shell,body > main:not(.rutas-main):not(.stgr-login)) {
  width: min(840px, 100%);
  max-width: 840px;
  min-height: 0;
  margin: 0 auto;
  padding: 24px max(20px, env(safe-area-inset-right)) calc(var(--pm-nav-height) + env(safe-area-inset-bottom) + 24px) max(20px, env(safe-area-inset-left));
  background: transparent;
}
[data-stgr-app] body.dp-mobile-app { padding: calc(var(--pm-header-height) + env(safe-area-inset-top)) 0 calc(var(--pm-nav-height) + env(safe-area-inset-bottom)); }
[data-stgr-app="preventa"] body > main#preventaApp { padding: 0; min-height: 0; }
[data-stgr-app] .mobile-view { width: 100%; padding: 24px max(20px, env(safe-area-inset-right)) 28px max(20px, env(safe-area-inset-left)); }
[data-stgr-app] :is(.hero,.preventa-hero) {
  margin: 0 0 24px;
  padding: 0 0 22px !important;
  overflow: visible;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dp-text) !important;
  box-shadow: none !important;
}
[data-stgr-app] :is(.hero,.preventa-hero)::after { display: none; }
[data-stgr-app] :is(.hero h1,.preventa-hero h1,.view-heading h1) {
  margin: 6px 0 10px !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 750;
  color: var(--dp-text);
}
[data-stgr-app] :is(.hero p,.preventa-hero p) { max-width: 62ch; margin: 0; color: var(--dp-muted) !important; font-size: 14px; line-height: 1.6; }
[data-stgr-app] :is(.eyebrow,.hero > small,.hero > div > small) { color: var(--dp-muted); font-size: 11px; font-weight: 650; text-transform: uppercase; }
[data-stgr-app] :is(.section,.mobile-panel.section-card) {
  margin: 24px 0 0;
  padding: 0 0 24px;
  border: 0 !important;
  border-bottom: 1px solid var(--dp-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
[data-stgr-app] :is(.section-head,.section-heading) { align-items: center; gap: 12px; margin-bottom: 16px; }
[data-stgr-app] :is(.section-head,.section-heading,.dialog-header,.dialog-head) > div { min-width: 0; }
[data-stgr-app] :is(.section-head h2,.section-heading h2,.dialog-header h2,.dialog-head h2) { margin: 0; color: var(--dp-text); font-size: 20px; line-height: 1.3; font-weight: 700; }
[data-stgr-app] :is(.metric-grid,.hero-stats) { gap: 0; margin-top: 22px; background: #fff; border-block: 1px solid var(--dp-line); }
[data-stgr-app] :is(.metric-grid,.hero-stats) > div {
  min-width: 0;
  padding: 14px 12px;
  border: 0;
  border-right: 1px solid var(--dp-line);
  border-radius: 0;
  background: #fff;
}
[data-stgr-app] :is(.metric-grid,.hero-stats) > div:last-child { border-right: 0; }
[data-stgr-app] :is(.metric-grid strong,.hero-stats b) { color: var(--dp-text); font-size: 20px; line-height: 1.3; font-variant-numeric: tabular-nums; }
[data-stgr-app] :is(.metric-grid span,.hero-stats small) { margin-top: 5px; color: var(--dp-muted) !important; font-size: 12px; }
[data-stgr-app] :is(.action-grid,.quick) { gap: 12px; margin: 20px 0; }
[data-stgr-app] .action-card { min-height: 76px; padding: 16px; gap: 12px; border-radius: 8px; }
[data-stgr-app] .action-card svg { width: 24px; height: 24px; }
[data-stgr-app] .action-card strong { font-size: 15px; }
[data-stgr-app] .action-card small { font-size: 12px; opacity: 1; }
[data-stgr-app] :is(.btn,.mobile-primary,.mobile-secondary,.mobile-danger,.primary,.quick button,.text-action) { border-radius: 8px !important; box-shadow: none !important; font-weight: 650 !important; }
[data-stgr-app] :is(.btn-primary,.mobile-primary,button.primary,.primary) { background: #2563eb !important; color: #fff !important; }
[data-stgr-app] :is(.btn-primary,.mobile-primary,button.primary,.primary):hover { background: #1d4ed8 !important; }
[data-stgr-app] :is(.btn-soft,.mobile-secondary) { background: #fff !important; border: 1px solid #c7cdd5 !important; color: #202831 !important; }
[data-stgr-app] .btn-success { background: #087f65 !important; color: #fff !important; }
[data-stgr-app] .mobile-danger { background: #fff1f0; border-color: #efc9c5; color: #b42318; }
[data-stgr-app] :is(.compact,.text-action,.row-actions button) { min-height: 44px !important; }
[data-stgr-app] .quick button { border-radius: 8px !important; }
[data-stgr-app] :is(.badge,.status-pill,.route-number) { max-width: 100%; border-radius: 4px !important; font-size: 11px !important; line-height: 1.4; font-weight: 650; }
[data-stgr-app] :is(.status-pill,.route-number) { color: #1d4ed8; background: #eef3fd; }
[data-stgr-app] .ok { color: #087f65; background: #e9f6f0; }
[data-stgr-app] .warn { color: #925b0b; background: #fff5df; }
[data-stgr-app] .danger { color: #b42318; background: #fff1f0; }

[data-stgr-app] :is(.warehouse-order,.route-card,.product,.client-row,.order-row,.invoice-row,.suggestion-row,.product-row,.client-item,.plan-item) {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--dp-line);
  border-radius: 8px !important;
  background: #fff;
  color: var(--dp-text);
  box-shadow: none !important;
}
[data-stgr-app] :is(.warehouse-order,.route-card) + :is(.warehouse-order,.route-card) { margin-top: 0; }
[data-stgr-app] :is(.product-list,.stack-list,.catalog-list,.list) { gap: 12px; }
[data-stgr-app] :is(.warehouse-order-head,.route-card-top) { flex-wrap: wrap; gap: 6px 12px; }
[data-stgr-app] :is(.warehouse-order-head,.route-card-top) > div { flex: 1 1 160px; min-width: 0; }
[data-stgr-app] :is(.warehouse-order h3,.route-card h3,.client-item h3,.plan-item h3) { font-size: 16px; line-height: 1.4; }
[data-stgr-app] :is(.warehouse-order-head,.route-card-top) > strong { font-size: 15px; font-variant-numeric: tabular-nums; }
[data-stgr-app] .warehouse-order.urgent { border-left: 3px solid #b77914; }
[data-stgr-app] .delivery-address { color: #394452; font-size: 14px; font-weight: 500; }
[data-stgr-app] .delivery-preview { padding: 12px 0 0; border-top: 1px solid var(--dp-line); border-radius: 0; background: transparent; }
[data-stgr-app] .delivery-preview span { font-size: 13px; }
[data-stgr-app] :is(.row-mark,.product-icon) { width: 40px; height: 40px; flex-basis: 40px; border-radius: 8px; background: #eef3fd; color: #2563eb; }
[data-stgr-app] .product { grid-template-columns: 40px minmax(0,1fr) auto; }
[data-stgr-app] .product > :last-child { max-width: 100%; overflow-wrap: anywhere; }
[data-stgr-app] :is(.product small,.row-copy small,.product-copy small) { display: block; margin-top: 4px; color: var(--dp-muted); font-size: 12px; }
[data-stgr-app] :is(.row-copy strong,.product-copy strong) { white-space: normal; font-size: 14px; }
[data-stgr-app] .qty { gap: 4px; }
[data-stgr-app] .qty button { width: 44px; height: 44px; min-width: 44px; border: 1px solid var(--dp-line); border-radius: 8px; background: #f6f7f9; color: #2563eb; }
[data-stgr-app] .qty b { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
[data-stgr-app] .quantity-control { grid-template-columns: 44px minmax(32px,auto) 44px; }
[data-stgr-app] .quantity-control button { width: 44px; height: 44px; background: #f6f7f9; color: #2563eb; border-radius: 8px; }
[data-stgr-app] :is(.client-row.is-selected,.client-item.selected) { border-color: #2563eb; background: #f3f7ff; box-shadow: inset 3px 0 #2563eb; }
[data-stgr-app] .search-field { margin: 12px 0 16px; min-height: 48px; padding: 0 12px; border-radius: 8px; }
[data-stgr-app] .search-field input { border: 0 !important; background: transparent !important; box-shadow: none !important; }
[data-stgr-app] .search-field:focus-within { border-color: #2563eb; box-shadow: 0 0 0 2px #dbe7ff; }
[data-stgr-app] .search-field svg { flex-shrink: 0; }
[data-stgr-app] :is(.analysis-card,.sync-summary,.selected-document,.summary-strip div,.status-banner,.success-receipt,.mobile-notice,.mobile-audit-alert,.return-notice,.signature-card,.signature-card canvas,.visit-summary > div,.payment-card,.summary,.route-stops li,.plan-stop,.sync-issue) { border-radius: 8px; box-shadow: none; }
[data-stgr-app] :is(.analysis-card,.selected-document,.summary) { background: #eef3fd; color: #202831; }
[data-stgr-app] :is(.status-banner,.offline,.offline-status) { color: #925b0b; background: #fff7e7; border-color: #ebd7ad; }
[data-stgr-app] :is(.empty,.empty-copy,.mobile-state) { padding: 28px 16px; color: var(--dp-muted); font-size: 14px; line-height: 1.6; }
[data-stgr-app] .mobile-state[data-mobile-state="error"] { color: #b42318; }
[data-stgr-app] .mobile-notices { top: calc(var(--pm-header-height) + env(safe-area-inset-top) + 8px); }
[data-stgr-app] .mobile-notice { padding: 14px; border: 1px solid var(--dp-line); background: #fff; box-shadow: 0 4px 16px #20283114; }
[data-stgr-app] .mobile-audit-alert { border-left-width: 3px; }

/* Picking and delivery retain their selected/error state and quantity controls. */
[data-stgr-app] .picking-card.section { padding: 20px 0 24px; }
[data-stgr-app] :is(.pick-item,.delivery-item,.return-row) {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 76px;
  gap: 10px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--dp-line);
  border-radius: 8px;
}
[data-stgr-app] :is(.pick-item,.delivery-item,.return-row) > div { min-width: 0; }
[data-stgr-app] .pick-check { width: 28px; height: 28px; border-radius: 6px; background: #eef3fd; color: #2563eb; }
[data-stgr-app] :is(.pick-item.selected,.delivery-item.selected) { border-color: #087f65; background: #eff9f4; }
[data-stgr-app] :is(.pick-item.selected,.delivery-item.selected) .pick-check { background: #087f65; color: #fff; }
[data-stgr-app] .return-row.selected { border-color: #b42318; background: #fff1f0; }
[data-stgr-app] .return-row.selected .pick-check { background: #b42318; color: #fff; }
[data-stgr-app] .signature-card { padding: 12px 0; border: 0; border-block: 1px solid var(--dp-line); background: transparent; }
[data-stgr-app] .payment-card { gap: 12px; flex-wrap: wrap; background: #eef3fd; color: #202831; }
[data-stgr-app] .step-tabs { border-radius: 8px; background: #f0f2f5; }
[data-stgr-app] .step-tab { min-height: 44px; border-radius: 6px; color: var(--dp-muted); font-size: 13px; }
[data-stgr-app] .step-tab.active { color: #1d4ed8; box-shadow: inset 0 -2px #2563eb; }
[data-stgr-app] :is(.visit-actions,.inline-actions,.button-row) { flex-wrap: wrap; }
[data-stgr-app] .visit-actions > button { flex: 1 1 120px; }
[data-stgr-app] :is(.cartbar,#sendClientOrder) { bottom: calc(var(--pm-nav-height) + env(safe-area-inset-bottom) + 10px) !important; }
[data-stgr-app] .cartbar { gap: 12px; flex-wrap: wrap; border-radius: 8px !important; background: #fff !important; color: #202831; box-shadow: 0 4px 16px #20283114 !important; }
[data-stgr-app="clientes"] #sendClientOrder { position: sticky; z-index: 30; box-shadow: 0 4px 12px #20283118 !important; }
[data-stgr-app="clientes"] #catalogProducts { margin-top: 16px; }
[data-stgr-app="clientes"] .client-mini { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
[data-stgr-app="clientes"] .client-mini > div { min-width: 0; }
[data-stgr-app="clientes"] .client-mini :is(small,b,span) { display: block; }
[data-stgr-app="clientes"] .client-mini b { margin: 6px 0; font-size: 20px; }
[data-stgr-app="clientes"] .client-mini :is(small,span) { color: var(--dp-muted); font-size: 12px; }
[data-stgr-app="clientes"] :is(#statementRows,#orders) { display: grid; gap: 10px; }

/* Native dialogs use the top layer; legacy overlays must sit above both navs. */
[data-stgr-app] .modal { z-index: 2000; padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
[data-stgr-app] :is(.dialog,.operation-dialog,.stgr-access-card) { border-radius: 8px; background: #fff; color: var(--dp-text); }
[data-stgr-app] :is(.dialog,.mobile-dialog) { max-height: calc(100vh - 32px); max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); overflow-y: auto; overscroll-behavior: contain; }
[data-stgr-app] .operation-dialog { height: min(94vh,900px); height: min(94dvh,900px); max-height: calc(100dvh - env(safe-area-inset-top)); border-radius: 8px 8px 0 0; background: #f6f7f9; }
[data-stgr-app] .dialog-header { padding: 16px; align-items: flex-start; }
[data-stgr-app] .dialog-header .icon-button[aria-label="Cerrar"] svg { transform:none; }
[data-stgr-app] :is(.icon-button,.close-btn) { display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; flex-shrink: 0; padding: 0; border: 1px solid var(--dp-line); border-radius: 8px; background: #fff; color: var(--dp-text); box-shadow: none; }
[data-stgr-app] .dialog-shell { overflow-y: auto; overscroll-behavior: contain; }
[data-stgr-app] .dialog-shell > * { flex-shrink: 0; }
[data-stgr-app] .dialog-shell > .catalog-list { flex: 1 0 auto; overflow: visible; }
[data-stgr-app] .dialog-shell > .full-action { width: calc(100% - 32px); }
[data-stgr-app] .mobile-scan-row { display: flex; gap: 8px; align-items: center; margin: 0 16px; }
[data-stgr-app] .mobile-scan-row .search-field { flex: 1; min-width: 0; }
[data-stgr-app] .scan-camera-button { flex: 0 0 auto; padding-inline: 12px; }
[data-stgr-app] .stgr-access-card a { border-radius: 8px; }

/* Rutas keeps a usable map beside its controls on wide screens. */
[data-stgr-app="rutas"] body > main {
  width: 100%;
  max-width: none;
  padding: 0 max(0px,env(safe-area-inset-right)) calc(var(--pm-nav-height) + env(safe-area-inset-bottom) + 16px) max(0px,env(safe-area-inset-left));
}
[data-stgr-app="rutas"] .topbar { height: auto; min-height: 68px; padding: 16px 20px; gap: 12px; background: #f6f7f9; }
[data-stgr-app="rutas"] .topbar h1 { font-size: 22px; }
[data-stgr-app="rutas"] .topbar small { display: none; }
[data-stgr-app="rutas"] .network { font-size: 12px; color: var(--dp-muted); }
[data-stgr-app="rutas"] .offline-status { padding: 12px 20px; font-size: 13px; }
[data-stgr-app="rutas"] #retrySync { margin: 4px 0; }
[data-stgr-app="rutas"] .metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
[data-stgr-app="rutas"] .metrics div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 16px; }
[data-stgr-app="rutas"] .metrics b { font-size: 22px; font-variant-numeric: tabular-nums; }
[data-stgr-app="rutas"] .metrics span { color: var(--dp-muted); font-size: 12px; }
[data-stgr-app="rutas"] .workspace { grid-template-columns: minmax(0,1.5fr) minmax(340px,1fr); height: auto; min-height: 540px; }
[data-stgr-app="rutas"] .map-panel { min-width: 0; min-height: 440px; height: 65vh; height: 65dvh; }
[data-stgr-app="rutas"] #map { background: #e9eef0; }
[data-stgr-app="rutas"] .control-panel { min-width: 0; max-height: max(440px,65vh); max-height: max(440px,65dvh); }
[data-stgr-app="rutas"] .tab { min-height: 48px; border-radius: 0; font-size: 13px; }
[data-stgr-app="rutas"] .tab.active { color: #1d4ed8; border-bottom-color: #2563eb; }
[data-stgr-app="rutas"] .tab-content { padding: 16px; }
[data-stgr-app="rutas"] .search-row { grid-template-columns: minmax(0,1fr) 44px; }
[data-stgr-app="rutas"] .client-item { grid-template-columns: 28px minmax(0,1fr) auto; gap: 10px; padding: 12px; }
[data-stgr-app="rutas"] .select-check { min-height: 24px; }
[data-stgr-app="rutas"] .item-actions { flex-wrap: wrap; }
[data-stgr-app="rutas"] .mini { min-width: 44px; padding: 8px; border-radius: 8px; }
[data-stgr-app="rutas"] .icon-button.accent { background: #2563eb; color: #fff; }
[data-stgr-app="rutas"] .offline-map-tools { max-height: 40%; max-width: calc(100% - 74px); border: 1px solid var(--dp-line); background: #fff; padding: 10px; }
[data-stgr-app="rutas"] .offline-map-tools button { min-height: 44px; font-size: 12px; }
[data-stgr-app="rutas"] .offline-map-tools summary { display: flex; align-items: center; cursor: pointer; }
[data-stgr-app="rutas"] .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
[data-stgr-app="rutas"] #toast { max-width: calc(100% - 32px); bottom: calc(var(--pm-nav-height) + env(safe-area-inset-bottom) + 12px); background: #202831; }

@media (max-width: 850px) {
  [data-stgr-app="rutas"] .workspace { grid-template-columns: minmax(0,1fr); min-height: 0; }
  [data-stgr-app="rutas"] .map-panel { height: 42vh; height: 42dvh; min-height: 300px; }
  [data-stgr-app="rutas"] .control-panel { max-height: none; min-height: 0; border-left: 0; border-top: 1px solid var(--dp-line); overflow: visible; }
  [data-stgr-app="rutas"] .tabs { top: calc(var(--pm-header-height) + env(safe-area-inset-top)); }
}
@media (max-width: 600px) {
  [data-stgr-app] :is(.stgr-user-chip,.mobile-account) { display: none; }
  [data-stgr-app] :is(.stgr-sync,.mobile-sync) { width: 44px; height: 44px; padding: 0; }
  [data-stgr-app] :is(.stgr-sync,.mobile-sync) > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  [data-stgr-app] .section-head { flex-wrap: wrap; }
  [data-stgr-app] .section-heading { align-items: flex-start; }
  [data-stgr-app] .section-heading .text-action { flex-shrink: 0; }
  [data-stgr-app="clientes"] .product { grid-template-columns: 40px minmax(0,1fr); }
  [data-stgr-app="clientes"] .product > :last-child { grid-column: 2; justify-self: start; }
  [data-stgr-app="rutas"] .client-item .item-actions { grid-column: 2 / -1; }
}
@media (max-width: 460px) {
  [data-stgr-app] .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  [data-stgr-app] .metric-grid > div:nth-child(2) { border-right: 0; }
  [data-stgr-app] .metric-grid > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--dp-line); }
}
@media (max-width: 380px) {
  [data-stgr-app] :is(.stgr-appbar,.mobile-appbar) { gap: 8px; padding-inline: max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right)); }
  [data-stgr-app] :is(.stgr-mark,.mobile-brand) { width: 32px; height: 36px; flex-basis: 32px; }
  [data-stgr-app] :is(.stgr-app-title,.mobile-app-identity) strong { font-size: 14px; }
  [data-stgr-app] :is(.mobile-shell,.mobile-view) { padding-inline: max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right)); }
  [data-stgr-app] :is(.hero h1,.preventa-hero h1,.view-heading h1) { font-size: 22px !important; }
  [data-stgr-app] :is(.metric-grid strong,.hero-stats b) { font-size: 17px; }
  [data-stgr-app] :is(.metric-grid,.hero-stats) > div { padding: 12px 7px; }
  [data-stgr-app] :is(.section-head h2,.section-heading h2,.dialog-header h2) { font-size: 18px; }
  [data-stgr-app] .account-card { flex-wrap: wrap; }
  [data-stgr-app="clientes"] .client-mini { grid-template-columns: minmax(0,1fr); }
  [data-stgr-app="rutas"] .metrics div { padding: 12px 8px; }
  [data-stgr-app="rutas"] .metrics b { font-size: 19px; }
  [data-stgr-app="rutas"] .metrics span { font-size: 11px; }
}
@media (min-width: 721px) {
  [data-stgr-app] .operation-dialog { margin: auto; border-radius: 8px; height: min(88dvh,850px); }
  [data-stgr-app] .mobile-bottom-nav { padding-inline: max(12px,calc((100% - 620px) / 2)); }
}
@media (orientation: landscape) and (max-height: 540px) {
  html[data-stgr-app] { --pm-header-height: 60px; --pm-nav-height: 56px; }
  [data-stgr-app] :is(.stgr-appbar,.mobile-appbar) { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  [data-stgr-app] :is(.stgr-nav a,.mobile-bottom-nav button) { min-height: 44px; flex-direction: row; gap: 8px; }
  [data-stgr-app] .operation-dialog { height: calc(100vh - 12px); height: calc(100dvh - 12px); margin: auto; border-radius: 8px; }
  [data-stgr-app] .dialog-header { padding-block: 10px; }
  [data-stgr-app] .mobile-view { padding-top: 16px; }
  [data-stgr-app="rutas"] .map-panel { height: 65vh; min-height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-stgr-app] *, [data-stgr-app] *::before, [data-stgr-app] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Shared layout, with a clear accent for each role. */
html[data-stgr-app] { --role:#245be0; --role-deep:#1947bd; --role-soft:#eaf0ff; }
html[data-stgr-app="almacen"] { --role:#087c8c; --role-deep:#066473; --role-soft:#def5f7; }
html[data-stgr-app="reparto"] { --role:#08785b; --role-deep:#065e46; --role-soft:#e3f6ed; }
html[data-stgr-app="clientes"] { --role:#a23e61; --role-deep:#852d4b; --role-soft:#fce9ee; }
html[data-stgr-app="rutas"] { --role:#087a96; --role-deep:#056179; --role-soft:#e0f4fa; }
[data-stgr-app] :is(.stgr-appbar,.mobile-appbar) { border-bottom:3px solid var(--role); background:var(--role-soft); }
[data-stgr-app] :is(.stgr-mark,.mobile-brand) { background:var(--role); color:#fff; }
[data-stgr-app] :is(.stgr-app-title,.mobile-app-identity) strong { color:var(--role-deep); }
[data-stgr-app] :is(.hero,.preventa-hero) { border-bottom:2px solid var(--role) !important; }
[data-stgr-app] :is(.hero h1,.preventa-hero h1,.view-heading h1) { color:var(--role-deep); }
[data-stgr-app] :is(.eyebrow,.hero > small,.hero > div > small) { color:var(--role); }
[data-stgr-app] :is(.metric-grid,.hero-stats) { gap:8px; background:transparent; border:0; }
[data-stgr-app] :is(.metric-grid,.hero-stats)>div { background:#eaf0ff; border:1px solid #d3dff7; border-top:3px solid #245be0; border-radius:8px; }
[data-stgr-app] :is(.metric-grid,.hero-stats)>div:nth-child(2) { background:#e3f6ed; border:1px solid #c8e6d8; border-top:3px solid #08785b; }
[data-stgr-app] :is(.metric-grid,.hero-stats)>div:nth-child(3) { background:#fff3d6; border:1px solid #eddcb5; border-top:3px solid #946000; }
[data-stgr-app] :is(.metric-grid strong,.hero-stats b) { color:#1947bd; }
[data-stgr-app] :is(.metric-grid,.hero-stats)>div:nth-child(2) :is(strong,b) { color:#07654f; }
[data-stgr-app] :is(.metric-grid,.hero-stats)>div:nth-child(3) :is(strong,b) { color:#855400; }
[data-stgr-app] :is(.btn-primary,.mobile-primary,button.primary,.primary) { background:var(--role) !important; }
[data-stgr-app] :is(.btn-primary,.mobile-primary,button.primary,.primary):hover { background:var(--role-deep) !important; }
[data-stgr-app] :is(.btn-soft,.mobile-secondary) { background:var(--role-soft) !important; border-color:var(--role) !important; color:var(--role-deep) !important; }
[data-stgr-app] .action-card svg { background:#ffffff26; padding:8px; width:40px; height:40px; box-sizing:border-box; border-radius:8px; flex-shrink:0; }
[data-stgr-app] :is(.stgr-nav a[aria-current="page"],.mobile-bottom-nav button.is-active) { color:var(--role-deep); background:var(--role-soft); box-shadow:inset 0 3px var(--role); }
[data-stgr-app] :is(.stgr-nav a,.mobile-bottom-nav button):nth-child(2) svg { color:#08785b; }
[data-stgr-app] :is(.stgr-nav a,.mobile-bottom-nav button):nth-child(3) svg { color:#986000; }
[data-stgr-app] :is(.stgr-nav a,.mobile-bottom-nav button):nth-child(4) svg { color:#a23e61; }
[data-stgr-app] :is(.stgr-nav a[aria-current="page"],.mobile-bottom-nav button.is-active) svg { color:var(--role); }
[data-stgr-app] :is(.row-mark,.product-icon) { background:var(--role-soft); color:var(--role); }
[data-stgr-app] :is(.section-head h2,.section-heading h2) { color:var(--role-deep); }
[data-stgr-app] :is(.status-pill,.route-number) { color:var(--role-deep); background:var(--role-soft); }
[data-stgr-app] .cartbar { border-top:3px solid var(--role); }
[data-stgr-app="rutas"] .metrics { background:#fff; border-bottom:1px solid #dce5eb; }
[data-stgr-app="rutas"] .metrics div:nth-child(odd) { background:#e0f4fa; }
[data-stgr-app="rutas"] .metrics b { color:var(--role-deep); }
[data-stgr-app="rutas"] .tab.active { color:var(--role-deep); border-bottom-color:var(--role); background:var(--role-soft); }