:root{
  --blue:#1d5eff;
  --panel:#efefef;
  --gap:16px;
  --box-h:48px;
  --sm:56px;
}

*{box-sizing:border-box}
body{
  margin:0;
  padding:16px;
  font-family:system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background:#fff;
  color:#fff;
}

.panel{
  background:var(--panel);
  border:2px solid #222;
  padding:14px;
  margin-bottom:14px;
}

.row{
  display:flex;
  gap:var(--gap);
}

/* Estilo base de caja */
.box{
  background:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--box-h);
  border-radius:4px;
  font-weight:600;
}

/* -------- Fila 1 -------- */
.row-1 .box{ flex:1; }

/* -------- Fila 2 -------- */
.row-2 .box{ flex:1; }
.row-2 .wide{ flex:2; }

/* -------- Fila 3 -------- */
.row-3 .side{ flex:2; }
.row-3 .narrow{ flex:1; }

/* -------- Fila 4 -------- */
.row-4{
  justify-content:space-between;
}
.row-4 .sm{
  flex:0 0 var(--sm);
  height:44px;
}

/* -------- Fila 5 -------- */
.panel.tall{ padding:14px; }
.row-5{
  min-height:360px; /* alto del contenedor grande */
}

/* barra vertical izquierda */
.row-5 .bar{
  align-self:stretch;       /* ocupa toda la altura disponible */
  width:56px;
  flex:0 0 56px;
}

/* área derecha (columna) */
.stage{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between; /* arriba / centro / abajo */
  padding-left:16px;
}

/* cajitas de la columna derecha */
.stage .sm{
  width:64px;
  height:48px;
}

/* afinamos posiciones con solo Flexbox */
.stage .top{
  align-self:flex-start;    /* cerca de la izquierda del área derecha */
  margin-left:8px;
}
.stage .mid{
  align-self:center;        /* centrada en el medio */
}
.stage .bottom{
  align-self:center;        /* centrada abajo */
  margin-bottom:4px;
}