:root {
  color-scheme: dark;
  --bg: #0a1020;
  --bg-elevated: #111a2e;
  --card: rgba(17, 26, 46, .94);
  --card-strong: #111a2e;
  --txt: #f4f7fb;
  --muted: #9aa9bf;
  --line: #263653;
  --accent: #f47b20;
  --accent-strong: #d85e08;
  --accent-soft: rgba(244, 123, 32, .15);
  --ok: #35c46a;
  --warn: #f5b942;
  --err: #ff5d68;
  --input: #0c1528;
  --overlay: rgba(3, 8, 18, .78);
  --shadow: 0 18px 50px rgba(0, 0, 0, .28);
  --radius: 18px;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fa;
  --bg-elevated: #ffffff;
  --card: rgba(255, 255, 255, .96);
  --card-strong: #ffffff;
  --txt: #182235;
  --muted: #66758b;
  --line: #d7dfeb;
  --accent: #e9670d;
  --accent-strong: #bd4e00;
  --accent-soft: rgba(233, 103, 13, .12);
  --ok: #168849;
  --warn: #9a6200;
  --err: #c82e3b;
  --input: #ffffff;
  --overlay: rgba(17, 24, 39, .56);
  --shadow: 0 14px 38px rgba(34, 51, 84, .12);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
html, body {
  min-height: 100%;
  background: var(--bg) !important;
  color: var(--txt) !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}
body {
  background-image:
    radial-gradient(900px 480px at 8% -10%, rgba(25, 86, 180, .16), transparent 64%),
    radial-gradient(700px 420px at 108% 8%, rgba(244, 123, 32, .12), transparent 60%) !important;
  background-attachment: fixed !important;
}

.wrap { max-width: 1440px !important; padding: clamp(12px, 2vw, 24px) !important; }
.header {
  background: color-mix(in srgb, var(--bg) 91%, transparent) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 10px 2px !important;
}
.brand .logo, .brand img { max-height: 46px; width: auto; object-fit: contain; }
h1, h2, h3, .title { color: var(--txt) !important; }
.muted, .soft, .subtitle, .hint, .kpi { color: var(--muted) !important; }

.card, .row, .modal .box, .box, .task, .panel {
  background: var(--card) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow);
}
.card { border-radius: var(--radius) !important; }
.row { border-radius: 14px !important; }
.row.header { background: var(--bg-elevated) !important; }

input, select, textarea, button {
  min-height: 46px;
  font-size: 16px !important;
  touch-action: manipulation;
}
input, select, textarea {
  background: var(--input) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
  border-radius: 12px !important;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 46%, transparent) !important;
  outline-offset: 2px;
}
.primary, button.primary, .btn.primary, .action-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 800;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 28%, transparent);
}
.secondary, button.secondary, .btn, .pill, .badge {
  background: var(--bg-elevated) !important;
  color: var(--txt) !important;
  border-color: var(--line) !important;
}
.link, a { color: color-mix(in srgb, var(--accent) 82%, #8ec5ff) !important; }
.modal { background: var(--overlay) !important; backdrop-filter: blur(6px); }
.modal .box { width: min(98vw, 1440px) !important; max-height: 92dvh !important; }
.toast { background: var(--card-strong) !important; color: var(--txt) !important; border-color: var(--line) !important; }

.wms-floating-nav {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 1000;
  display: flex;
  gap: 10px;
}
.wms-floating-nav button, .wms-floating-nav a {
  min-width: 52px;
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: var(--card-strong) !important;
  color: var(--txt) !important;
  box-shadow: var(--shadow);
  text-decoration: none;
  cursor: pointer;
  font-size: 21px !important;
}
.wms-floating-nav button:active, .wms-floating-nav a:active { transform: scale(.96); }

.import-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.import-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 10px;
  width: 100%;
}
.import-summary > div {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.import-summary b { display: block; font-size: 22px; color: var(--txt); }
.import-summary span { color: var(--muted); font-size: 13px; }

@media (max-width: 900px) {
  .header { align-items: flex-start !important; }
  .row, .row.header { min-width: 0 !important; }
  .grid.cargas { overflow: visible !important; }
  .row.data {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  .row.header { display: none !important; }
  .row.data > * { min-width: 0; }
  .row.data .carga { grid-column: 1 / -1; }
  .pedidos-carga { grid-column: 1 / -1; }
  .modal-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .import-summary { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
}

@media (max-width: 560px) {
  .brand h1, h1 { font-size: 19px !important; }
  .header { flex-wrap: wrap; }
  .row.data { grid-template-columns: 1fr !important; }
  .row.data .carga { grid-column: auto; }
  .toolbar > *, .actions > * { width: 100%; }
  .import-summary { grid-template-columns: 1fr 1fr; }
}