.lab-layout {
  display: grid;
  grid-template-columns: 300px 1fr 300px;
  grid-template-rows: 60px 1fr 200px;
  height: 100vh;
  width: 100vw;
}

.lab-header {
  grid-column: 1 / 4;
  background: var(--lab-panel-bg);
  border-bottom: 1px solid var(--lab-border);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  justify-content: space-between;
}

.lab-controls {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background: var(--lab-panel-bg);
  border-right: 1px solid var(--lab-border);
  padding: 1rem;
  overflow-y: auto;
}

.lab-viewport {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  position: relative;
  background: #111; /* Contraste para 3D */
}

.lab-metrics {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  background: var(--lab-panel-bg);
  border-left: 1px solid var(--lab-border);
  padding: 1rem;
  overflow-y: auto;
}

.lab-timeline {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
  background: var(--lab-panel-bg);
  border-top: 1px solid var(--lab-border);
  padding: 1rem;
}

/* Common UI Elements */
.control-group { margin-bottom: 1rem; }
.control-group label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
.control-group input[type="range"] { width: 100%; }
.metric-box { background: rgba(0,0,0,0.2); padding: 0.8rem; border-radius: 4px; margin-bottom: 0.5rem; border: 1px solid var(--lab-border); }
.metric-value { font-size: 1.5rem; font-weight: bold; color: var(--lab-accent); }