/* Visual 2.5D do cenário de cruzamento. Carregado após o tema institucional. */
.traffic-scenario-panel .scenario-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  align-items: stretch;
}

.traffic-scenario-panel .traffic-pseudo3d {
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #bdd0dd;
  background: #dce8ef;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), 0 8px 22px rgba(0,63,115,.08);
}

.traffic-scenario-panel .traffic-pseudo3d svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 900 / 520;
}

.traffic-scenario-panel .scenario-console {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, .75fr);
  gap: .8rem 1rem;
  align-items: start;
  padding: .85rem;
  border: 1px solid #d7e3eb;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdff, #f4f8fb);
}

.traffic-scenario-panel .scenario-console > h3:first-child {
  grid-column: 1;
  margin: 0 0 .15rem;
}

.traffic-scenario-panel .scenario-console > h3:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 .15rem;
}

.traffic-scenario-panel .scenario-console > .scenario-controls-wrap,
.traffic-scenario-panel .scenario-console > .scenario-control-group,
.traffic-scenario-panel .scenario-console > .scenario-inputs {
  grid-column: 1;
}

.traffic-scenario-panel .scenario-console > .event-list,
.traffic-scenario-panel .scenario-console > .muted:last-child {
  grid-column: 2;
}

.traffic-scenario-panel .scenario-control-group {
  margin: 0 0 .55rem;
}

.traffic-scenario-panel .scenario-control-group:last-child {
  margin-bottom: 0;
}

.traffic-scenario-panel .scenario-control-group-title {
  margin-bottom: .38rem;
  color: #496174;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.traffic-scenario-panel .scenario-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.traffic-scenario-panel .scenario-control {
  min-height: 64px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  padding: .55rem .65rem;
  border-radius: 10px;
  box-shadow: none;
}

.traffic-scenario-panel .scenario-control-copy strong {
  font-size: .76rem;
}

.traffic-scenario-panel .scenario-control-copy small {
  margin-top: .16rem;
  line-height: 1.25;
  font-size: .66rem;
}

.traffic-scenario-panel .control-kind {
  align-self: start;
  font-size: .55rem;
  white-space: nowrap;
}

/* Cenário urbano */
.city-scene-bg { fill: #dfe8ed; }
.city-block { fill: #d2dde3; stroke: #becdd5; stroke-width: 2; }
.city-grass { fill: #87b878; }
.city-sidewalk { fill: #d7d5cf; stroke: #c2c0b9; stroke-width: 2; }
.city-building { fill: #eef2f4; stroke: #b6c3ca; stroke-width: 2; filter: url(#scene-soft-shadow); }
.city-building-roof { fill: #f8fafb; }
.city-building-window { fill: #8eb8cf; opacity: .78; }
.city-tree-trunk { fill: #72513a; }
.city-tree { fill: #438d58; stroke: #327548; stroke-width: 2; filter: url(#scene-soft-shadow); }

.intersection-road { fill: #303840; }
.intersection-asphalt { fill: #343d45; }
.road-edge-line { stroke: #f7f7f3; stroke-width: 4; opacity: .9; }
.road-lane-dash { stroke: #f1cb54; stroke-width: 5; stroke-dasharray: 25 24; stroke-linecap: round; }
.road-white-dash { stroke: #e9eef1; stroke-width: 3; stroke-dasharray: 22 20; opacity: .82; }
.stop-line { fill: #f6f7f5; opacity: .96; }
.crosswalk-stripe { fill: #fff; opacity: .98; }
.lane-arrow { fill: #f8fafb; opacity: .75; }

/* Semáforos */
.signal-shadow { fill: rgba(15,25,35,.2); }
.signal-pole { fill: #40515d; stroke: #293740; stroke-width: 1.5; }
.signal-arm { stroke: #40515d; stroke-width: 7; stroke-linecap: round; }
.signal-box { fill: #1f2a32; stroke: #11191f; stroke-width: 2.5; filter: url(#scene-soft-shadow); }
.signal-visor { fill: #11181d; }
.signal-lamp { stroke: #0a1116; stroke-width: 2; opacity: .16; }
.signal-lamp.red { fill: #ef5651; }
.signal-lamp.yellow { fill: #f2c94c; }
.signal-lamp.green { fill: #3cc77b; }
.signal-lamp.active { opacity: 1; filter: url(#lamp-glow); }

.ped-signal-box { fill: #1e2930; stroke: #11191f; stroke-width: 2.5; filter: url(#scene-soft-shadow); }
.ped-signal-screen { fill: #0c1419; }
.ped-icon-stop { stroke: #eb5a54; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .2; }
.ped-icon-walk { stroke: #41ce82; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .2; }
.ped-icon-stop.active, .ped-icon-walk.active { opacity: 1; filter: url(#lamp-glow); }
.sound-wave { fill: none; stroke: #f47b20; stroke-width: 3; stroke-linecap: round; }

/* Veículos */
.road-car { filter: url(#scene-soft-shadow); }
.car-shadow { fill: rgba(7,15,21,.28); }
.car-body { stroke: rgba(0,0,0,.28); stroke-width: 2; }
.car-body.blue { fill: #1976b9; }
.car-body.orange { fill: #ef7929; }
.car-body.silver { fill: #b9c5cb; }
.car-body.red { fill: #c54b47; }
.car-roof { fill: rgba(255,255,255,.24); }
.car-window { fill: #bfe1f1; stroke: rgba(14,48,68,.46); stroke-width: 1.2; }
.car-wheel { fill: #151a1e; }
.car-light { fill: #fff4bb; }
.car-brake { fill: #ff665d; }

/* Pedestre */
.pedestrian-shadow { fill: rgba(14,25,31,.22); }
.pedestrian-head { fill: #e2a875; stroke: #80583a; stroke-width: 1; }
.pedestrian-shirt { stroke: #005ca9; stroke-width: 7; stroke-linecap: round; }
.pedestrian-limb { stroke: #283942; stroke-width: 4; stroke-linecap: round; }

/* HUD */
.scene-hud rect { fill: rgba(8,31,47,.92); stroke: rgba(255,255,255,.12); stroke-width: 1; }
.scene-hud .hud-label { fill: #bcd1dd; font-size: 11px; font-weight: 700; }
.scene-hud .hud-value { fill: #fff; font-size: 14px; font-weight: 900; }
.scene-hud .hud-green { fill: #62dd97; }
.scene-hud .hud-yellow { fill: #ffd15a; }
.scene-hud .hud-red { fill: #ff7771; }
.scene-hud .hud-orange { fill: #ff9c4d; }

.scene-chip rect { fill: rgba(255,255,255,.94); stroke: #c6d5de; stroke-width: 1; }
.scene-chip text { fill: #18324a; font-size: 11px; font-weight: 850; }
.scene-chip.request rect { stroke: #f47b20; }
.scene-chip.maintenance rect { fill: #fff5e9; stroke: #f47b20; }
.scene-chip.fault rect { fill: #fff0ee; stroke: #df625d; }

@media (max-width: 860px) {
  .traffic-scenario-panel .scenario-console {
    grid-template-columns: 1fr;
  }

  .traffic-scenario-panel .scenario-console > h3:first-child,
  .traffic-scenario-panel .scenario-console > h3:nth-of-type(2),
  .traffic-scenario-panel .scenario-console > .event-list,
  .traffic-scenario-panel .scenario-console > .muted:last-child {
    grid-column: 1;
    grid-row: auto;
  }

  .traffic-scenario-panel .scenario-inputs {
    grid-template-columns: 1fr;
  }

  .traffic-scenario-panel .traffic-pseudo3d svg {
    min-width: 640px;
  }

  .traffic-scenario-panel .traffic-pseudo3d {
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .traffic-scenario-panel {
    padding: .72rem;
  }

  .traffic-scenario-panel .traffic-pseudo3d {
    border-radius: 10px;
  }

  .traffic-scenario-panel .traffic-pseudo3d svg {
    min-width: 560px;
  }

  .traffic-scenario-panel .scenario-control {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .traffic-scenario-panel .control-kind {
    display: none;
  }
}