:root {
  color-scheme: dark;
  --bg: #050b13;
  --surface: #0a1422;
  --surface-2: #0e1b2c;
  --surface-3: #14253b;
  --line: #20344d;
  --line-2: #182a40;
  --text: #e8f0f8;
  --muted: #8398ae;
  --muted-2: #5e748a;
  --cyan: #58a4d8;
  --cyan-bright: #6cc7ff;
  --magenta: #cf61a2;
  --green: #3ccb91;
  --amber: #f5b942;
  --red: #f06464;
  --blue: #319ddf;
  --radius: 10px;
  --shadow: 0 18px 50px rgb(0 0 0 / 32%);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 1180px; min-height: 720px; background: var(--bg); color: var(--text); }

body {
  font-family: Barlow, system-ui, sans-serif;
  background:
    radial-gradient(circle at 58% -12%, rgb(31 78 115 / 16%), transparent 38%),
    linear-gradient(180deg, #07101d, #050b13 62%);
}

button, input { font: inherit; }
button { color: inherit; }

button:focus-visible, input:focus-visible {
  outline: 2px solid var(--cyan-bright);
  outline-offset: 2px;
}

.app-shell { height: 100vh; min-height: 720px; display: flex; flex-direction: column; }

.topbar {
  min-height: 82px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: rgb(7 16 29 / 92%);
  backdrop-filter: blur(12px);
}

.brand-mark {
  width: 40px; height: 40px; border: 1px solid #315474; border-radius: 8px;
  display: grid; place-items: center; color: var(--cyan-bright);
  font: 700 15px/1 "IBM Plex Mono", monospace; letter-spacing: -.5px;
  box-shadow: inset 0 0 20px rgb(88 164 216 / 8%);
}

.breadcrumb, .eyebrow {
  margin: 0 0 4px; color: var(--cyan); font: 600 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

.breadcrumb span { color: var(--muted-2); padding: 0 4px; }
.title-line { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.title-line h1, .panel-heading h2, dialog h2 { margin: 0; font-family: "Barlow Condensed", sans-serif; }
.title-line h1 { font-size: 28px; line-height: 1; letter-spacing: .01em; }
.trip-code { font: 600 12px/1 "IBM Plex Mono", monospace; color: #cbd9e7; }
.trip-route { color: var(--muted); font-size: 13px; white-space: nowrap; }

.topbar-meta { display: flex; align-items: center; gap: 10px; }
.disclaimer { font-size: 11px; color: var(--muted); padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 7px; background: #091321; }
.overall-status { min-width: 210px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 7px; text-align: center; font-family: "Barlow Condensed", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .03em; }
.overall-status.safe { border-color: rgb(60 203 145 / 55%); background: rgb(60 203 145 / 10%); color: var(--green); }
.overall-status.warning { border-color: rgb(245 185 66 / 68%); background: rgb(245 185 66 / 12%); color: var(--amber); }
.overall-status.blocked { border-color: rgb(240 100 100 / 70%); background: rgb(240 100 100 / 13%); color: #ff7b7b; }
.overall-status.neutral { color: var(--muted); }

.workspace {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(245px, 19vw) minmax(630px, 1fr) minmax(286px, 21vw);
  gap: 10px;
  padding: 10px;
}

.panel {
  min-height: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgb(12 25 42 / 96%), rgb(7 15 26 / 96%));
  box-shadow: 0 10px 34px rgb(0 0 0 / 16%);
}

.left-panel, .right-panel { padding: 14px; display: flex; flex-direction: column; overflow: hidden; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.panel-heading h2 { font-size: 22px; line-height: 1; }
.count-pill { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: #a9bbcc; background: #0a1625; font: 600 10px "IBM Plex Mono", monospace; white-space: nowrap; }

.search-box { height: 38px; margin-top: 13px; display: flex; align-items: center; gap: 8px; border: 1px solid #2a4059; border-radius: 7px; padding: 0 10px; color: var(--muted); background: #07111e; }
.search-box:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 2px rgb(88 164 216 / 10%); }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }
.search-box input::placeholder { color: #657a90; }

.stop-filters { display: flex; gap: 5px; margin-top: 9px; }
.filter-chip { border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; }
.filter-chip:hover, .filter-chip.active { color: var(--text); border-color: #3f6383; background: #102238; }
.filter-chip i { display: inline-block; width: 7px; height: 7px; margin-right: 3px; border-radius: 2px; background: currentColor; }
.filter-chip.stop-1 { color: var(--cyan-bright); }
.filter-chip.stop-2 { color: #e57abd; }
.cargo-help { margin: 10px 0 7px; color: var(--muted); font-size: 10.5px; }

.cargo-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 7px; padding-right: 4px; scrollbar-color: #284461 transparent; scrollbar-width: thin; }
.cargo-card { position: relative; display: grid; grid-template-columns: 13px minmax(0, 1fr) auto; gap: 3px 8px; padding: 9px 9px 8px; border: 1px solid var(--line); border-left: 3px solid var(--stop-color); border-radius: 7px; background: #0c1929; cursor: grab; user-select: none; transition: border-color .15s, transform .15s, background .15s, opacity .15s; }
.cargo-card:hover { border-color: #3a5a78; transform: translateY(-1px); background: #102137; }
.cargo-card.selected { border-color: var(--cyan-bright); box-shadow: inset 0 0 0 1px rgb(108 199 255 / 20%); background: #10243a; }
.cargo-card.placed { opacity: .58; }
.cargo-card.dragging { opacity: .28; }
.cargo-grip { grid-row: 1 / 4; color: #678199; font-size: 13px; line-height: .65; letter-spacing: -2px; align-self: center; }
.cargo-main { min-width: 0; }
.cargo-name { display: flex; align-items: center; gap: 6px; }
.cargo-code { font: 700 12px "IBM Plex Mono", monospace; }
.cargo-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c7d5e4; font-size: 11.5px; }
.cargo-weight { font: 600 12px "IBM Plex Mono", monospace; color: var(--text); white-space: nowrap; }
.cargo-meta { grid-column: 2 / 4; display: flex; justify-content: space-between; gap: 6px; color: var(--muted); font-size: 9.5px; }
.cargo-state { grid-column: 2 / 4; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.stop-tag, .cargo-state-tag { display: inline-flex; align-items: center; width: fit-content; padding: 2px 5px; border-radius: 4px; font-size: 9px; }
.stop-tag { color: var(--stop-color); background: color-mix(in srgb, var(--stop-color) 15%, transparent); border: 1px solid color-mix(in srgb, var(--stop-color) 35%, transparent); }
.cargo-state-tag { color: var(--muted); }
.cargo-state-tag.ok { color: var(--green); }
.cargo-card-placeholder { padding: 22px 10px; text-align: center; color: var(--muted); font-size: 12px; border: 1px dashed var(--line); border-radius: 8px; }

.left-actions { display: grid; gap: 6px; padding-top: 10px; }
.button { min-height: 36px; border: 1px solid var(--line); border-radius: 7px; padding: 8px 12px; font-weight: 600; font-size: 12px; cursor: pointer; transition: filter .15s, transform .15s, opacity .15s; }
.button:hover:not(:disabled) { filter: brightness(1.13); transform: translateY(-1px); }
.button:disabled { opacity: .4; cursor: not-allowed; }
.button.primary { border-color: #2b92d4; color: white; background: linear-gradient(180deg, #1778b8, #0d6097); box-shadow: inset 0 1px rgb(255 255 255 / 10%); }
.button.secondary { border-color: #326b92; color: #b9ddf5; background: #0b2235; }
.button.compare { min-height: 31px; padding-block: 6px; border-color: rgb(245 185 66 / 42%); color: #d9bd7f; background: rgb(245 185 66 / 6%); }
.button.subtle { min-height: 29px; padding: 5px 10px; color: var(--muted); background: transparent; }

.stage-panel { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; background: #060e19; }
.stage-toolbar { min-height: 48px; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line-2); background: #091522; }
.camera-tabs { display: flex; gap: 4px; }
.camera-button, .icon-button, .leg-button, .action-dock button { border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; color: var(--muted); background: #0a1726; font-size: 10.5px; cursor: pointer; }
.camera-button:hover, .icon-button:hover, .leg-button:hover, .action-dock button:hover:not(:disabled) { color: var(--text); border-color: #416383; }
.camera-button.active, .leg-button.active { color: white; border-color: #287eb7; background: #0d3857; }
.icon-button { padding-inline: 10px; }
.leg-tabs { position: absolute; top: 58px; right: 12px; z-index: 8; display: flex; align-items: center; gap: 7px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: rgb(6 14 25 / 86%); backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.leg-tabs > span { width: 16px; height: 1px; background: #39506a; }
.leg-button { border: 0; background: transparent; }
.leg-button b { display: inline-grid; width: 18px; height: 18px; place-items: center; margin-right: 4px; border: 1px solid #4a6076; border-radius: 50%; font: 600 9px "IBM Plex Mono", monospace; }
.leg-button.active b { border-color: var(--cyan); background: var(--blue); }

.canvas-wrap { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(circle at 55% 45%, #0b1a2b, #040a12 72%); }
#sceneCanvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.scene-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.scene-code { position: absolute; transform: translate(-50%, -100%); padding: 2px 5px; border-radius: 4px; color: white; background: rgb(4 11 19 / 72%); border: 1px solid rgb(255 255 255 / 12%); font: 600 9px "IBM Plex Mono", monospace; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.scene-code.selected { color: #fff1ca; border-color: var(--amber); }
.empty-state { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 6px; pointer-events: none; color: var(--muted); text-align: center; }
.empty-state[hidden] { display: none; }
.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px dashed #31506d; border-radius: 12px; color: var(--cyan); font-size: 25px; }
.empty-state strong { color: #c6d5e3; }
.empty-state span { font-size: 11px; }
.canvas-wrap.dropping { box-shadow: inset 0 0 0 2px var(--cyan); }
.canvas-wrap.dropping::after { content: "SOLTÁ EL BULTO EN LA CARRETA"; position: absolute; left: 50%; top: 18px; z-index: 8; transform: translateX(-50%); padding: 7px 12px; border: 1px solid var(--cyan); border-radius: 6px; background: rgb(6 23 37 / 88%); color: #b9e2fb; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .08em; }
.drop-hint { position: absolute; z-index: 12; width: 220px; padding: 10px 12px; border: 1px solid var(--green); border-radius: 8px; background: rgb(8 20 31 / 94%); box-shadow: var(--shadow); pointer-events: none; }
.drop-hint[hidden] { display: none; }
.drop-hint.invalid { border-color: var(--red); background: rgb(37 14 20 / 94%); }
.drop-hint.warning { border-color: var(--amber); }
.drop-hint strong, .drop-hint span { display: block; }
.drop-hint strong { margin-bottom: 3px; font-size: 12px; }
.drop-hint span { color: #b7c7d7; font-size: 10.5px; line-height: 1.3; }
.live-toast { position: absolute; z-index: 15; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 9px 13px; border: 1px solid #315b7e; border-radius: 7px; color: #d4e8f7; background: rgb(7 23 37 / 94%); box-shadow: var(--shadow); font-size: 11px; }
.live-toast[hidden] { display: none; }
.canvas-legend { position: absolute; left: 10px; bottom: 9px; z-index: 6; display: flex; gap: 10px; padding: 5px 7px; border-radius: 5px; background: rgb(5 12 21 / 68%); color: var(--muted); font-size: 9px; pointer-events: none; }
.canvas-legend span { display: flex; align-items: center; gap: 4px; }
.canvas-legend i, .risk-legend i { width: 8px; height: 8px; display: inline-block; border-radius: 2px; }
.canvas-legend .stop-one { background: var(--cyan); }
.canvas-legend .stop-two { background: var(--magenta); }
.canvas-legend .valid-zone { background: transparent; border: 1px solid var(--green); }

.action-dock { min-height: 64px; display: grid; grid-template-columns: minmax(145px, 1fr) auto auto auto auto auto; align-items: stretch; gap: 6px; padding: 8px; border-top: 1px solid var(--line); background: #091522; }
.selected-summary { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: #0c1929; }
.selected-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background: #496075; }
.selected-summary div { min-width: 0; }
.selected-summary strong, .selected-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-summary strong { font: 600 11px "IBM Plex Mono", monospace; }
.selected-summary span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.nudge-group, .lane-group, .history-group { display: flex; gap: 4px; }
.nudge-group { flex-direction: column; }
.nudge-group button { padding: 4px 7px; }
.lane-group button.active { border-color: var(--cyan); color: #d4efff; background: #0d304c; }
.action-dock button:disabled { opacity: .32; cursor: not-allowed; }
.history-group button { font-size: 17px; }

.stage-footer { min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; border-top: 1px solid var(--line-2); color: var(--muted); background: #07111e; font-size: 9.5px; }
.risk-legend { display: flex; gap: 10px; white-space: nowrap; }
.risk-legend span { display: flex; align-items: center; gap: 4px; }
.risk-legend i.safe { background: var(--green); }
.risk-legend i.warning { background: var(--amber); }
.risk-legend i.blocked { background: var(--red); }

.right-panel { gap: 10px; }
.risk-heading { flex: 0 0 auto; }
.risk-heading h2 { font-size: 20px; }
.risk-stack { display: flex; flex-direction: column; gap: 7px; overflow: auto; scrollbar-width: thin; scrollbar-color: #284461 transparent; }
.risk-card { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #0a1726; transition: border-color .2s, background .2s; }
.risk-card.safe { border-color: rgb(60 203 145 / 50%); background: linear-gradient(105deg, rgb(60 203 145 / 8%), #0a1726 58%); }
.risk-card.warning { border-color: rgb(245 185 66 / 60%); background: linear-gradient(105deg, rgb(245 185 66 / 10%), #0a1726 58%); }
.risk-card.blocked { border-color: rgb(240 100 100 / 68%); background: linear-gradient(105deg, rgb(240 100 100 / 12%), #0a1726 58%); }
.risk-card.info { border-color: #2c4864; }
.risk-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; color: var(--muted); background: #12233a; font-size: 15px; }
.risk-card.safe .risk-icon { color: var(--green); background: rgb(60 203 145 / 12%); }
.risk-card.warning .risk-icon { color: var(--amber); background: rgb(245 185 66 / 12%); }
.risk-card.blocked .risk-icon { color: var(--red); background: rgb(240 100 100 / 12%); }
.risk-title { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.risk-title strong { font-size: 11.5px; }
.risk-title span { color: var(--muted); font-size: 8.5px; text-transform: uppercase; letter-spacing: .06em; }
.risk-value { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; }
.risk-value b { font: 700 20px "Barlow Condensed", sans-serif; letter-spacing: .02em; }
.risk-value span { color: var(--muted); font-size: 9px; }
.risk-card p { margin: 3px 0 0; color: var(--muted); font-size: 9.5px; }
.risk-card.safe p { color: #70d9b0; }
.risk-card.warning p { color: #dfb95c; }
.risk-card.blocked p { color: #f28787; }
.meter-track { position: relative; height: 5px; margin: 9px 0 0; overflow: visible; border-radius: 99px; background: #1b2d43; }
.meter-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--cyan); transition: width .25s; }
.meter-track em { position: absolute; left: 87%; top: -3px; width: 1px; height: 11px; background: #cad8e4; }
.meter-track.has-min u { position: absolute; left: 15%; top: -2px; width: 1px; height: 9px; background: var(--amber); text-decoration: none; }
.risk-card.safe .meter-track i { background: var(--green); }
.risk-card.warning .meter-track i { background: var(--amber); }
.risk-card.blocked .meter-track i { background: var(--red); }
.lateral-visual { display: grid; grid-template-columns: auto 1fr auto; gap: 5px; align-items: center; margin-top: 8px; color: var(--muted-2); font: 600 7px "IBM Plex Mono", monospace; }
.balance-track { position: relative; height: 5px; border-radius: 99px; background: linear-gradient(90deg, #406e8e, #263b4f 47%, #263b4f 53%, #a94c7f); }
.balance-track::after { content: ""; position: absolute; left: 50%; top: -3px; width: 1px; height: 11px; background: white; opacity: .55; }
.balance-track i { position: absolute; left: 50%; top: -4px; width: 3px; height: 13px; border-radius: 3px; background: white; box-shadow: 0 0 8px white; transform: translateX(-50%); transition: left .25s; }
.cg-visual { height: 5px; position: relative; margin-top: 9px; border-radius: 99px; background: linear-gradient(90deg, #2c6370, #55747c, #735f48); }
.cg-visual i { position: absolute; left: 0; top: -3px; width: 3px; height: 11px; border-radius: 2px; background: white; transition: left .25s; }

.recommendation { margin-top: auto; padding: 11px; border: 1px solid #2c4c69; border-radius: 8px; background: linear-gradient(145deg, #10253a, #0b1726); }
.recommendation-label { color: var(--cyan); font: 600 9px "IBM Plex Mono", monospace; letter-spacing: .08em; }
.recommendation p { min-height: 31px; margin: 7px 0 10px; color: #cedbe7; font-size: 11px; line-height: 1.4; }
.recommendation .button { width: 100%; }
.explain-button { flex: 0 0 auto; display: flex; justify-content: space-between; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; color: #b9c8d6; background: #091522; font-size: 11px; cursor: pointer; }

dialog { width: min(570px, calc(100vw - 40px)); border: 1px solid #385a79; border-radius: 12px; padding: 0; color: var(--text); background: #0c1828; box-shadow: 0 32px 90px #000; }
dialog::backdrop { background: rgb(1 5 10 / 72%); backdrop-filter: blur(4px); }
dialog form { position: relative; padding: 25px; }
.dialog-close { position: absolute; right: 12px; top: 10px; border: 0; color: var(--muted); background: transparent; font-size: 25px; cursor: pointer; }
dialog h2 { margin-bottom: 10px; font-size: 28px; }
dialog p { color: #b4c4d2; font-size: 13px; line-height: 1.5; }
dialog dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
dialog dl div { padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #091523; }
dialog dt { margin-bottom: 3px; color: #d9e6f1; font-weight: 600; font-size: 12px; }
dialog dd { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.dialog-warning { margin-bottom: 14px; padding: 9px 10px; border-left: 3px solid var(--amber); color: #dcc999; background: rgb(245 185 66 / 8%); font-size: 10.5px; }

@media (max-height: 820px) {
  .topbar { min-height: 70px; }
  .workspace { padding: 7px; gap: 7px; }
  .left-panel, .right-panel { padding: 10px; }
  .cargo-card { padding-block: 7px; }
  .risk-card { padding: 8px; }
  .risk-value b { font-size: 18px; }
}

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