/* Linha de envase 2,5D baseada no processo descrito por Tomar & Kumar (2020). */
.bottling-scenario-panel .scenario-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}

.bottling-scenario-panel .bottling-line-scene {
  overflow: hidden;
  padding: 0;
  border: 1px solid #bdd0dd;
  border-radius: 15px;
  background: #e3edf2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 10px 26px rgba(0,63,115,.09);
}

.bottling-scenario-panel .bottling-line-scene svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 500;
}

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

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

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

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

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

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

.bottling-scenario-panel .scenario-control {
  min-height: 66px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .65rem;
  padding: .58rem .68rem;
  border-radius: 10px;
  box-shadow: none;
}

.bottling-scenario-panel .scenario-control-copy strong { font-size: .75rem; }
.bottling-scenario-panel .scenario-control-copy small { font-size: .65rem; line-height: 1.25; }
.bottling-scenario-panel .control-kind { font-size: .54rem; white-space: nowrap; }

/* Planta industrial */
.factory-floor-zone { fill: #cfdbe1; opacity: .62; }
.bottling-hud rect,
.bottling-counts rect {
  fill: rgba(5,44,72,.94);
  stroke: rgba(255,255,255,.18);
  stroke-width: 1;
}
.bottling-hud text,
.bottling-counts text { fill: #dcecf5; font-size: 12px; font-weight: 650; }
.bottling-hud .hud-kicker,
.bottling-counts .hud-kicker { fill: #9fc9df; font-size: 10px; font-weight: 850; letter-spacing: .09em; }
.bottling-hud .hud-main { fill: #fff; font-size: 18px; font-weight: 900; }
.bottling-counts .count-value { fill: #fff; font-size: 17px; font-weight: 900; }
.bottling-counts .next-bottle { fill: #ffd0aa; font-size: 10px; }

.bottling-tank > text,
.process-machine > text {
  fill: #18324a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}
.tank-shell {
  fill: #eef3f5;
  stroke: #637b89;
  stroke-width: 3;
  filter: drop-shadow(0 6px 7px rgba(23,53,69,.16));
}
.tank-liquid { opacity: .92; }
.tank-liquid-1, .bottle-liquid.liquid-1 { fill: #c94f46; }
.tank-liquid-2, .bottle-liquid.liquid-2 { fill: #8b883d; }
.tank-liquid-3, .bottle-liquid.liquid-3 { fill: #287ab3; }
.tank-hopper { fill: #c6d3d9; stroke: #637b89; stroke-width: 2; }
.tank-valve { fill: #536d7c; stroke: #2f4652; stroke-width: 1.5; }
.valve-label { fill: #fff; font-size: 9px; font-weight: 900; }
.bottling-tank.active .tank-valve {
  fill: #f47b20;
  filter: drop-shadow(0 0 6px rgba(244,123,32,.7));
}
.liquid-stream {
  stroke: #56a6d4;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 12 8;
  animation: bottling-flow .42s linear infinite;
}
@keyframes bottling-flow { to { stroke-dashoffset: -20; } }

.machine-frame {
  fill: #e9eff2;
  stroke: #647d8b;
  stroke-width: 3;
  filter: drop-shadow(0 6px 7px rgba(23,53,69,.16));
}
.machine-head { fill: #5e7481; }
.machine-status { fill: #d75d55; stroke: #7c3531; stroke-width: 2; }
.process-machine.active .machine-status {
  fill: #39b96f;
  stroke: #1f7545;
  filter: drop-shadow(0 0 7px rgba(57,185,111,.7));
}
.machine-actuator { fill: #899ba5; }
.process-machine.active .machine-actuator { fill: #f47b20; }
.label-roll { fill: #fff; stroke: #758b97; stroke-width: 6; }

.belt { stroke: #172027; stroke-width: 2; }
.roller { fill: #697982; stroke: #a9b5bc; stroke-width: 2; }
.conveyor.running .roller { stroke: #f47b20; }
.belt-edge { stroke: #b9c7ce; stroke-width: 2; opacity: .75; }

.inductive-station rect { fill: #005ca9; stroke: #003f73; stroke-width: 2; }
.inductive-station text { fill: #fff; font-size: 10px; font-weight: 900; }
.bottling-sensor rect { fill: #536b78; }
.bottling-sensor circle { fill: #96a8b2; stroke: #405560; stroke-width: 2; }
.bottling-sensor text { fill: #4b6371; font-size: 10px; font-weight: 900; }
.bottling-sensor.passed circle { fill: #4f9ccc; }
.bottling-sensor.active circle {
  fill: #f47b20;
  stroke: #b14f09;
  filter: drop-shadow(0 0 7px rgba(244,123,32,.7));
}

.bottle-shadow { fill: rgba(13,31,42,.23); }
.bottle-body { fill: rgba(232,247,255,.68); }
.bottle-outline { fill: none; stroke: #355b70; stroke-width: 3; }
.bottle-liquid { opacity: .96; }
.metal-base { fill: #89979f; stroke: #52636b; stroke-width: 1.5; }
.nonmetal-base { fill: #d6e8ef; stroke: #7797a7; stroke-width: 1.2; }
.bottle-cap { fill: #273f4e; stroke: #0f2734; stroke-width: 1.5; }
.bottle-label { stroke-width: 1.5; }
.metallic-label { fill: #7152a7; stroke: #432c70; }
.nonmetal-label { fill: #55bfd1; stroke: #247786; }
.process-bottle { filter: drop-shadow(0 5px 5px rgba(19,47,61,.24)); }

.line-status text { fill: #18324a; font-size: 12px; font-weight: 700; }
.line-status circle.running { fill: #35b36a; filter: drop-shadow(0 0 5px rgba(53,179,106,.55)); }
.line-status circle.stopped { fill: #9aa8b0; }

@media (max-width: 860px) {
  .bottling-scenario-panel .scenario-console { grid-template-columns: 1fr; }
  .bottling-scenario-panel .scenario-console > h3:first-child,
  .bottling-scenario-panel .scenario-console > h3:nth-of-type(2),
  .bottling-scenario-panel .scenario-console > .event-list,
  .bottling-scenario-panel .scenario-console > .muted:last-child { grid-column: 1; grid-row: auto; }
  .bottling-scenario-panel .scenario-inputs { grid-template-columns: 1fr; }
  .bottling-scenario-panel .bottling-line-scene { overflow-x: auto; }
  .bottling-scenario-panel .bottling-line-scene svg { min-width: 760px; }
}

@media (max-width: 560px) {
  .bottling-scenario-panel { padding: .7rem; }
  .bottling-scenario-panel .bottling-line-scene { border-radius: 10px; }
  .bottling-scenario-panel .bottling-line-scene svg { min-width: 690px; }
  .bottling-scenario-panel .scenario-control { grid-template-columns: auto minmax(0, 1fr); }
  .bottling-scenario-panel .control-kind { display: none; }
}